/* =========================================================================
   SPOONFUL — illustrations, detail pages, log notes, WhatsApp scenes,
   and the parent's own recipes. Loads after styles.css.
   ========================================================================= */

/* ------------------------------------------------------- illustrations - */
.art{display:inline-block; line-height:0; flex:none; vertical-align:middle;}
.art svg{display:block; width:100%; height:100%;}
.art-xs{width:22px; height:22px; margin-right:7px;}
.art-sm{width:36px; height:36px;}
.art-md{width:60px; height:60px;}
.art-lg{width:104px; height:104px;}
.art-xl{width:150px; height:150px;}
@media (max-width:700px){ .art-xl{width:104px; height:104px;} .art-lg{width:80px; height:80px;} }

.chip{display:inline-flex; align-items:center;}
.mini-lbl{font-family:var(--ui); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--herb); display:block; margin-bottom:5px; font-weight:600;}
.up-next{font-family:var(--body); font-style:italic; color:var(--ink-2); margin-top:16px;}
.chip-lbl.first{margin-top:0;}
.more.tight{border:none; padding-top:12px; margin-top:8px;}

.v-art{display:flex; flex-direction:column; align-items:center; gap:14px; min-width:190px;}
@media (max-width:700px){ .v-art{flex-direction:row; align-items:center; min-width:0;} .v-art .stamp{flex:1; min-width:0;} }

.pm-more{font-family:var(--ui); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:9px; font-weight:600;}
.paper-mini:hover .pm-more{color:var(--herb);}
.lib-empty{padding:36px; font-family:var(--body); font-style:italic; color:var(--ink-2);}

/* ==================================================== detail pages ===== */
.page{padding:104px 0 60px; animation:railIn .5s var(--ease-out) both;}
.back{display:inline-block; font-family:var(--ui); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); text-decoration:none; font-weight:600; margin-bottom:26px;}
.back:hover{color:var(--herb);}
.rp-h2{font-family:var(--ui); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:16px;}

.rp-head{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; margin-bottom:40px;}
@media (max-width:760px){ .rp-head{grid-template-columns:1fr; gap:20px;} }
.rp-art{width:200px; height:200px; border-radius:4px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);}
@media (max-width:760px){ .rp-art{width:140px; height:140px;} }
.rp-art.a{background:linear-gradient(140deg,#F5DDB2,#E0A257);}
.rp-art.b{background:linear-gradient(140deg,#DEE8C2,#94B26A);}
.rp-art.c{background:linear-gradient(140deg,#F7DAC5,#DB9270);}
.rp-art.d{background:linear-gradient(140deg,#E9D9EC,#AE8CB6);}

.page h1{font-family:var(--display); font-weight:290; font-size:clamp(30px,5vw,54px); line-height:1.04; letter-spacing:-.032em; font-variation-settings:"opsz" 144;}
.rp-line{font-family:var(--body); font-style:italic; font-size:19px; color:var(--ink-2); margin-top:12px; max-width:44ch;}
.rp-meta{display:flex; flex-wrap:wrap; gap:7px; margin-top:18px;}
.rp-pill{font-family:var(--ui); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:6px 13px; border-radius:999px; border:1px solid var(--rule); color:var(--ink-2);}
.rp-tag{font-family:var(--ui); font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; padding:6px 13px; border-radius:999px; background:rgba(78,122,58,.13); color:#41652F;}
.rp-fit{margin-top:18px; font-family:var(--body); font-style:italic; font-size:15.5px;}
.rp-fit.ok{color:var(--herb);}
.rp-fit.no{color:var(--tomato);}

.rp-body{display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:start; margin-bottom:44px;}
@media (max-width:900px){ .rp-body{grid-template-columns:1fr; gap:28px;} }
.rp-col{position:sticky; top:96px;}
@media (max-width:900px){ .rp-col{position:static;} }
.rp-list{list-style:none;}
.rp-list li{padding:9px 0; border-bottom:1px solid var(--rule-2); font-size:16px; display:flex; gap:10px; line-height:1.5;}
.rp-list li::before{content:"—"; color:var(--gold); flex:none;}
.rp-list.quiet li{font-size:14.5px; color:var(--ink-2);}
.rp-keep{margin-top:20px; font-size:14.5px; color:var(--ink-2); line-height:1.6; padding-top:14px; border-top:1px solid var(--rule-2);}
.rp-keep b{font-family:var(--ui); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:5px;}

.step{display:grid; grid-template-columns:34px 72px 1fr; gap:20px; align-items:start; padding:24px 0; border-bottom:1px solid var(--rule-2);}
@media (max-width:700px){ .step{grid-template-columns:28px 1fr; gap:14px;} .step .st-art{display:none;} }
.st-n{font-family:var(--display); font-size:26px; font-weight:280; color:var(--gold); line-height:1; font-variation-settings:"opsz" 144;}
.st-art{width:72px; height:72px; border-radius:3px; background:rgba(255,255,255,.62); border:1px solid var(--rule-2); display:flex; align-items:center; justify-content:center;}
.st-txt h3{font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:-.014em; margin-bottom:8px;}
.st-txt p{font-size:16.5px; line-height:1.7; color:var(--ink-2);}
.st-tip{margin-top:14px; padding:13px 16px; background:rgba(224,126,39,.11); border-left:2px solid var(--carrot); font-size:14.5px; line-height:1.6; color:var(--ink-2);}
.st-tip b{font-family:var(--ui); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#9C6420; display:block; margin-bottom:5px; font-weight:600;}

.rp-why{padding:30px 34px; background:var(--glass); border:1px solid var(--rule); border-radius:3px; margin-bottom:40px;}
.rp-why p{font-size:17px; line-height:1.72; color:var(--ink-2);}
.rp-next{border-top:1px solid var(--rule-2); padding-top:24px;}
.rp-next > span{font-family:var(--ui); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); font-weight:600;}
.rp-next-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;}
.rp-next-row a{display:flex; align-items:center; gap:11px; padding:11px 17px 11px 12px; border:1px solid var(--rule); border-radius:999px; text-decoration:none; font-family:var(--body); font-size:15px; color:var(--ink-2); background:var(--glass); transition:all .24s var(--ease);}
.rp-next-row a:hover{border-color:var(--herb-2); color:var(--ink); transform:translateY(-2px);}

/* ---- a paper, on our page --------------------------------------------- */
.pp-head{display:flex; gap:24px; align-items:flex-start; margin-bottom:38px;}
.plate-portrait.xl{width:86px; height:86px; font-size:26px;}
@media (max-width:700px){ .pp-head{flex-direction:column; gap:16px;} }
.pp-j{font-family:var(--ui); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:10px;}
.paper-page h1{font-size:clamp(24px,3.6vw,40px); line-height:1.14;}
.pp-who{font-family:var(--body); font-size:16.5px; margin-top:14px;}
.pp-inst{color:var(--ink-3); font-style:italic;}
.pp-grid{display:grid; grid-template-columns:1fr 320px; gap:38px; align-items:start; margin-bottom:40px;}
@media (max-width:900px){ .pp-grid{grid-template-columns:1fr;} }
.pp-finding{font-family:var(--display); font-weight:330; font-size:clamp(19px,2.5vw,25px); line-height:1.42; letter-spacing:-.018em; margin-bottom:16px;}
.pp-plain{font-family:var(--body); font-style:italic; font-size:17px; color:var(--herb); margin-bottom:32px;}
.pp-design{font-size:16.5px; line-height:1.7; color:var(--ink-2); margin-bottom:28px;}
.pp-side{display:flex; flex-direction:column; gap:14px;}
.pp-box{border:1px solid var(--rule); border-radius:3px; padding:20px 22px; background:var(--glass);}
.pp-box b{font-family:var(--ui); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:10px;}
.pp-box p{font-size:14.5px; line-height:1.6; color:var(--ink-2);}
.pp-box ul{list-style:none;}
.pp-box li{padding:6px 0; border-bottom:1px solid var(--rule-2); font-size:14.5px;}
.pp-box li a{color:var(--herb); text-decoration:none;}
.pp-box li a:hover{text-decoration:underline;}
.link-box{background:rgba(78,122,58,.08); border-color:rgba(78,122,58,.3);}
.link-box .btn{margin-top:12px;}

/* ==================================================== the log notes ==== */
.slot-wrap{border:1px solid var(--rule); border-radius:3px; background:rgba(255,255,255,.52); transition:all .26s var(--ease); overflow:hidden;}
.slot-wrap.done{background:rgba(78,122,58,.09); border-color:rgba(78,122,58,.34);}
.slot{display:flex; align-items:center; gap:13px; padding:12px 14px; width:100%; text-align:left; background:none; border:none;}
.s-art{flex:none;}
.s-txt{flex:1; min-width:0;}
.s-lbl{display:block; font-family:var(--ui); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:600;}
.s-dish{display:block; font-family:var(--body); font-size:15.5px; margin-top:2px;}
.s-tick{font-family:var(--ui); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600; flex:none; padding:6px 10px; border-radius:999px; transition:all .2s;}
.s-tick:hover{background:rgba(42,33,26,.06);}
.slot-wrap.done .s-tick{color:var(--herb);}
.s-note{font-family:var(--ui); font-size:9.5px; letter-spacing:.1em; color:var(--ink-3); border:1px solid var(--rule); border-radius:999px; padding:5px 11px; flex:none; transition:all .2s; font-weight:600;}
.s-note:hover{border-color:var(--herb); color:var(--herb);}

.note-list{display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 12px;}
.note{display:flex; align-items:center; gap:9px; background:var(--paper); border:1px solid var(--rule-2); border-radius:3px; padding:8px 11px; font-size:14px; max-width:100%;}
.note img{width:44px; height:44px; object-fit:cover; border-radius:2px;}
.note audio{height:30px; max-width:180px;}
.note-t{font-family:var(--body); color:var(--ink-2);}
.note-k{font-family:var(--ui); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600;}

.composer{padding:0 14px 14px; border-top:1px solid var(--rule-2);}
.cmp-tabs{display:flex; gap:6px; padding:12px 0;}
.cmp-tab{font-family:var(--ui); font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; padding:6px 13px; border:1px solid var(--rule); border-radius:999px; color:var(--ink-3); transition:all .2s;}
.cmp-tab.on{background:var(--wood); border-color:var(--wood); color:#FFFCF5;}
.cmp-pane{display:flex; gap:9px; align-items:center; flex-wrap:wrap;}
.cmp-input{flex:1; min-width:180px; padding:11px 13px; border:1px solid var(--rule); border-radius:2px; background:#fff; font-family:var(--body); font-size:15px;}
.cmp-input:focus{outline:none; border-color:var(--herb-2);}
.cmp-save,.cmp-rec{font-family:var(--ui); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:11px 18px; border-radius:2px; background:var(--herb); color:#FFFCF5; transition:all .2s;}
.cmp-save:hover,.cmp-rec:hover{background:#41652F;}
.cmp-rec.rec{background:var(--tomato); animation:pulseRec 1.4s ease-in-out infinite;}
@keyframes pulseRec{0%,100%{opacity:1}50%{opacity:.62}}
.cmp-file{font-family:var(--ui); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:11px 18px; border-radius:2px; border:1px dashed var(--rule); color:var(--ink-2); cursor:pointer; transition:all .2s;}
.cmp-file:hover{border-color:var(--herb); color:var(--herb);}
.cmp-hint,.cmp-status{font-family:var(--body); font-style:italic; font-size:13.5px; color:var(--ink-3);}
.log-insight{font-family:var(--body); font-style:italic; font-size:15.5px; color:var(--herb); margin-top:18px; padding-top:14px; border-top:1px solid var(--rule-2);}
.ledger-intro{font-family:var(--body); font-style:italic; font-size:15px; color:var(--ink-2); margin-top:6px;}
.exp{display:flex; align-items:center; gap:13px;}

#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,18px); z-index:95;
  background:var(--ink); color:#FBF4E6; padding:13px 22px; border-radius:3px;
  font-family:var(--body); font-size:15px; max-width:min(520px, calc(100vw - 32px));
  opacity:0; visibility:hidden; transition:all .34s var(--ease); box-shadow:var(--shadow-lift); text-align:center;
}
#toast.on{opacity:1; visibility:visible; transform:translate(-50%,0);}

/* ==================================================== recipes ========== */
.recipe{display:block; text-decoration:none; color:inherit;}
.rc-cover{position:relative;}
.rc-mine{position:absolute; top:10px; left:10px; font-family:var(--ui); font-size:9px; letter-spacing:.16em; text-transform:uppercase; background:var(--wood); color:#FFFCF5; padding:4px 9px; border-radius:999px; font-weight:600;}

.mine-box{margin-top:22px; border:1px dashed var(--rule); border-radius:3px; background:var(--glass-2);}
.mine-box summary{list-style:none; cursor:pointer; padding:18px 22px; font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:11px;}
.mine-box summary::-webkit-details-marker{display:none;}
.mine-box summary:hover{color:var(--herb);}
.mine-plus{font-family:var(--display); font-size:20px; color:var(--gold); line-height:1;}
.mine-form{padding:0 22px 24px; display:flex; flex-direction:column; gap:14px;}
.mine-intro{font-family:var(--body); font-style:italic; font-size:15px; color:var(--ink-2); max-width:56ch;}
.mine-form label{display:flex; flex-direction:column; gap:6px; font-family:var(--ui); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600; flex:1;}
.mine-form input,.mine-form textarea{padding:11px 13px; border:1px solid var(--rule); border-radius:2px; background:#fff; font-family:var(--body); font-size:15.5px; letter-spacing:0; text-transform:none; color:var(--ink);}
.mine-form input:focus,.mine-form textarea:focus{outline:none; border-color:var(--herb-2);}
.mf-row{display:flex; gap:14px; flex-wrap:wrap;}
.mf-row label:first-child{flex:3;}
.mf-row2{display:flex; gap:14px; flex-wrap:wrap;}
.mf-row2 label{min-width:240px;}
.mine-form .btn{align-self:flex-start;}

/* ==================================================== whatsapp ========= */
.wa-tabs{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:22px;}
.wa-tab{font-family:var(--ui); font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; padding:8px 15px; border:1px solid var(--rule); border-radius:999px; color:var(--ink-2); transition:all .22s;}
.wa-tab:hover{border-color:var(--herb-2);}
.wa-tab.on{background:var(--herb); border-color:var(--herb); color:#FFFCF5;}
.wa-copy{font-size:17px; line-height:1.7; color:var(--ink-2); max-width:44ch;}
.wa-quiet{font-family:var(--body); font-style:italic; font-size:16px; color:var(--herb); margin-top:18px; max-width:42ch;}
.wa-screen{min-height:320px;}

/* ==================================================== pricing ========== */
.p-alt{font-family:var(--body); font-style:italic; font-size:15px; color:var(--mango); margin-top:8px;}
.btn-pay{margin-top:24px; background:#FBF4E6; color:#2E4124; border:1px solid #FBF4E6; width:100%; text-align:center;}
.btn-pay:hover{background:var(--mango); border-color:var(--mango); color:#2A211A;}

.f-contact{display:flex; flex-direction:column; gap:6px; text-align:right;}
.f-contact span{font-family:var(--ui); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600;}
.f-contact a{font-family:var(--display); font-size:19px; color:var(--herb); text-decoration:none;}
.f-contact a:hover{text-decoration:underline;}
@media (max-width:700px){ .f-contact{text-align:left;} }
.recipe.later{opacity:.62;}
.recipe.later .rc-cover{filter:saturate(.55);}
.recipe.later:hover{opacity:1;}
.recipe.later .rc-age{background:rgba(42,33,26,.72); color:#FBF4E6;}

.lib-all{margin-top:26px; text-align:center;}
.lib-all .btn{display:inline-block;}
.page .lib-count{margin:18px 0 20px;}
.page .lib-filters{margin-bottom:24px;}