/* Your Week, Planned as a painted fridge door (Kite's Kitchen). Board = the content; the fridge is only the frame. */
:root{--marker:"Kalam","Figtree",cursive;--mk-blue:#2D6AA3;--mk-red:#D2553A;--hl:rgba(255,212,72,.78)}
body:has(.pl){background:#E7B26A url(/assets/kitchen/counter-tile.webp) center top/900px auto repeat}

.pf{position:relative;max-width:1240px;margin:0 auto}
.pf-left{display:none}
.pf-door{position:relative;padding:58px 14px 18px 24px;background:#EFE4CF url(/assets/kitchen/fridge.webp) 38% 0/cover;border-radius:0 0 26px 26px;box-shadow:0 18px 26px -14px rgba(50,30,60,.55);overflow:hidden}
.pf-top{display:none}
.pf-host{position:absolute;right:14px;top:6px;width:104px;pointer-events:none}
.pf-peek{width:100%;height:auto;animation:kkPeek 1s cubic-bezier(.34,1.56,.64,1) .3s both,kkBob 4.2s ease-in-out 1.4s infinite}
@keyframes kkPeek{from{transform:translateY(60%) scaleY(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes kkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3%) scaleY(.985)}}
.pf-say{position:relative;margin:0 92px 12px 0;padding:10px 13px;background:#FFFBF3;border-radius:16px 16px 4px 16px;font:700 16px/1.3 var(--sans);color:var(--plum);box-shadow:0 8px 16px -8px rgba(58,40,84,.5);animation:kkPop .5s cubic-bezier(.34,1.56,.64,1) .9s both}
.pf-say::after{content:"";position:absolute;right:-8px;top:12px;border:8px solid transparent;border-left-color:#FFFBF3;border-right:0}
.pf-say-go{display:inline-block;margin-top:2px;font-weight:800;color:var(--coral-dark);text-decoration:none;white-space:nowrap}
@keyframes kkPop{from{opacity:0;transform:scale(.7) translateY(8px)}to{opacity:1;transform:none}}

/* the dry-erase board */
.pf-board{position:relative;padding:12px 12px 8px;border:9px solid #D8B183;border-radius:7px;background:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.5)),url(/assets/kitchen/pf-board.webp) center/cover,#FBF9F4;
  box-shadow:inset 0 0 0 2px rgba(140,95,50,.25),inset 0 2px 8px rgba(80,60,40,.12),0 12px 20px -10px rgba(60,40,70,.55)}
.pf-board::before{content:"";position:absolute;left:50%;top:-16px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--sky);box-shadow:inset -4px -4px 0 rgba(0,0,0,.15),0 3px 3px rgba(0,0,0,.25)}
.pf-dates{margin:0;font:700 16px/1.2 var(--marker);color:var(--mk-red)}
.pf-board h1{font:700 28px/1.05 var(--marker);color:var(--plum);margin:0 0 6px;letter-spacing:0}
.pf-rows{list-style:none;margin:0;padding:0}
.pf-row{position:relative;display:grid;grid-template-columns:38px 1fr;align-items:center;min-height:42px;border-top:1.5px dashed rgba(58,46,63,.13)}
.pf-row:first-child{border-top:0}
.pf-row a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;column-gap:6px;padding:5px 0;text-decoration:none;color:var(--plum);font:700 19px/1.12 var(--marker)}
.pf-row b{color:var(--mk-blue);font-weight:700}
.pf-row span{position:relative}
.pf-row em{font-style:normal;font-size:16px;color:#6B5E70;white-space:nowrap}
.pf-row.today a{background:linear-gradient(100deg,transparent 0 1%,var(--hl) 2% 97%,transparent 98%) 0 55%/100% 70% no-repeat}
.pf-x{width:38px;height:42px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.pf-x i{width:22px;height:22px;border:2.5px solid #3A2E3F;border-radius:46% 54% 50% 50%;opacity:.55;transition:.2s}
.pf-row.done .pf-x i{opacity:1;border-color:var(--leaf);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4 12l5 5 10-13' stroke='%235E9E45' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/110% no-repeat}
.pf-row.done span{color:#8A7F8D}
.pf-row span{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:transparent;transition:text-decoration-color .3s}
.pf-row.done span{text-decoration-color:var(--mk-red)}
.pf-row.scribble .pf-x i{animation:pfTick .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes pfTick{0%{transform:scale(.6)}60%{transform:scale(1.2) rotate(-6deg)}100%{transform:none}}

/* notepad + kid drawing under the board */
.pf-low{display:flex}
.pf-note{position:relative;float:right;width:47%;margin:14px 2% 0 0;aspect-ratio:314/481;max-height:300px;background:url(/assets/kitchen/pf-note.webp) center/100% 100% no-repeat;padding:20% 9% 6% 12%;text-decoration:none;color:var(--plum);
  display:flex;flex-direction:column;transform:rotate(1.2deg);transition:transform .25s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent}
.pf-note:active{transform:rotate(1.2deg) scale(.97)}
.pf-note-h{font:700 18px/1.1 var(--marker);color:var(--plum)}
.pf-note-n{font:700 16px/1.15 var(--marker);color:var(--mk-red);margin:2px 0 4px}
.pf-note-peek{list-style:none;margin:0;padding:0;font:700 16px/1.55 var(--marker);color:#4A4050}
.pf-note-peek li::before{content:"\25A2  ";color:#9A8F9C}
.pf-note-go{margin-top:auto;font:800 16px/1.2 var(--sans);color:var(--coral-dark)}
.pf-drawing{float:left;width:44%;height:auto;margin:22px 0 0 0;transform:rotate(-3deg);border-radius:4px}
.pf-door::after{content:"";display:block;clear:both}
.pf-acts{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 16px 4px;text-align:center}
.pf-sub{margin:0;font:700 16px/1.35 var(--sans);color:#FFF6E6;text-shadow:0 1px 2px rgba(60,30,10,.55)}
.pf-acts .pl-sharebtn{background:#FFFBF3}

/* the rest of the page sits on the warm counter: plain, readable paper */
.pl .pl-list,.pl .pl-week,.pl .pl-ask-q,.pl .pl-pass,.pl .pl-lunch,.pl .pl-weeknav{position:relative;z-index:1}
.pl .pl-sec{background:rgba(255,251,243,.94);border-radius:16px;padding:12px 16px;display:inline-block}
.pl .pl-list{margin-top:18px}
.pl-snacktag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--sky-wash);color:#2D6AA3;font:800 16px/1.6 var(--sans);font-style:normal;vertical-align:2px}
.pl-aisles[data-nosnack] .pl-snack{display:none}

@media (min-width:900px){
  .pf{display:grid;grid-template-columns:1fr minmax(520px,560px);gap:0;margin-top:0}
  .pf-left{display:block;position:relative;overflow:hidden;border-radius:0 0 0 26px}
  .pf-left img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
  .pf-door{border-radius:0 0 26px 0;padding:64px 26px 24px 40px}
  .pf-board{padding:16px 18px 12px}
  .pf-board h1{font-size:34px}.pf-dates{font-size:18px}
  .pf-row a{font-size:21px}.pf-row em{font-size:18px}
  .pf-acts{grid-column:1/-1}
  .pf-host{width:120px;right:24px}
}
@media (prefers-reduced-motion:reduce){.pf-peek,.pf-say{animation:none}.pf-row span{transition:none}}