/* ── UNICORN: app.css ── */
/* All styles. To add new styles: add a labelled section at the bottom. */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --cream:#FFF8F0;--dark:#3D2B1F;--rose:#E8C4B8;--sage:#8FADA3;
  --taupe:#C4A882;--blush:#F0E0D8;--peach:#F5D5C8;
  --white:#FFFFFF;--light:#F5F0EB;--border:#E8DDD5;
  --font:'Inter',system-ui,-apple-system,sans-serif;
}
html,body{height:100%;background:var(--cream);font-family:var(--font);color:var(--dark);overflow:hidden}
#app{height:100dvh;display:flex;flex-direction:column;max-width:430px;margin:0 auto;background:var(--cream);position:relative;overflow:hidden}
.screen{flex:1;display:flex;flex-direction:column;overflow:hidden}
.btn-primary{width:100%;padding:16px;background:var(--dark);color:var(--white);border:none;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;font-family:var(--font);transition:opacity .15s}
.btn-primary:active{opacity:.8}
.btn-primary:disabled{opacity:.35}
.btn-secondary{width:100%;padding:14px;background:none;color:var(--dark);border:1.5px solid var(--border);border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font)}
.btn-ghost{background:none;border:none;cursor:pointer;color:var(--taupe);font-size:14px;font-family:var(--font)}
.input{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:12px;font-size:16px;font-family:var(--font);color:var(--dark);background:var(--white);outline:none;transition:border-color .2s}
.input:focus{border-color:var(--sage)}
.input-label{font-size:13px;font-weight:600;color:var(--dark);margin-bottom:4px;display:block}
.error-msg{background:#FDECEA;color:#842029;padding:10px 14px;border-radius:10px;font-size:13px;text-align:center}
.info-msg{background:#E8F4FD;color:#1565C0;padding:12px 14px;border-radius:10px;font-size:13px;text-align:center}
/* AUTH */
.auth-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 24px;gap:20px}
.auth-logo{text-align:center}
.auth-logo .icon{font-size:52px;display:block;margin-bottom:8px}
.auth-logo h1{font-size:28px;font-weight:700}
.auth-logo p{font-size:14px;color:var(--taupe);margin-top:4px}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-switch{text-align:center;font-size:14px;color:var(--taupe)}
.auth-switch span{color:var(--dark);font-weight:600;cursor:pointer;text-decoration:underline}
/* ONBOARDING */
.ob-progress{height:4px;background:var(--border);flex-shrink:0}
.ob-progress-fill{height:100%;background:var(--sage);transition:width .4s ease}
.ob-content{flex:1;overflow-y:auto;padding:32px 24px 20px;-webkit-overflow-scrolling:touch}
.ob-content h2{font-size:24px;font-weight:700;line-height:1.25;margin-bottom:6px}
.ob-content .sub{font-size:14px;color:var(--taupe);margin-bottom:22px;line-height:1.5}
.ob-footer{padding:12px 24px 32px;flex-shrink:0}
.ob-back{position:absolute;top:12px;left:16px;background:none;border:none;cursor:pointer;font-size:22px;color:var(--taupe);padding:4px;z-index:10}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{padding:9px 16px;border-radius:24px;border:1.5px solid var(--border);background:var(--white);font-size:13px;font-weight:500;cursor:pointer;color:var(--dark);font-family:var(--font);transition:all .15s}
.chip.sel{background:var(--dark);color:var(--white);border-color:var(--dark)}
.chip-large{padding:12px 18px;font-size:14px;border-radius:14px;flex:1;min-width:130px;text-align:center}
/* Item 81 — the multi-select clarification card's child chips, on the DARK decision card.
   APPROVED, DELIBERATE exception to the one-file rule: a selected/pressed visual state cannot live in
   chat.js, and this is the file it belongs in. The base .chip (a light pill) reads fine on the dark
   card and its pressed state is already covered by the shared pressed-state rule further down (the one
   the s91 sweep guards) — but a selected .chip is ALSO dark and would vanish against the card, so a
   dc-chip overrides SELECTED to the --rose accent the primary action already uses, making "chosen"
   unmistakable. Placed right after the base chip rules so it wins on source order (equal specificity).
   The disabled dc-btn dims the confirm while nothing is picked — the visual half of the zero-picked
   guard. (This comment deliberately avoids writing the literal pressed-state selector: the s91 parser
   scans the stylesheet text for it, and a mention here would read as a phantom second rule.) */
.dc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dc-chip.sel{background:var(--rose);color:var(--dark);border-color:var(--rose);font-weight:700}
.dc-btn:disabled{opacity:.4;cursor:default}
.pillar-card{border:1.5px solid var(--border);border-radius:16px;padding:16px;background:var(--white);cursor:pointer;transition:all .2s;margin-bottom:10px;display:flex;align-items:center;gap:14px}
.pillar-card.sel{border-color:var(--dark);background:var(--light)}
.pillar-card .pill-icon{font-size:26px;flex-shrink:0}
.pillar-card .pill-text h3{font-size:15px;font-weight:600;margin-bottom:2px}
.pillar-card .pill-text p{font-size:12px;color:var(--taupe);line-height:1.4}
.kid-card{background:var(--light);border-radius:14px;padding:14px;margin-bottom:10px;border:1.5px solid var(--border)}
.kid-card-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.kid-card-hdr span{font-size:14px;font-weight:600}
.kid-remove{background:none;border:none;cursor:pointer;font-size:18px;color:var(--taupe);font-family:var(--font)}
.add-kid-btn{width:100%;padding:12px;border:1.5px dashed var(--border);border-radius:12px;background:none;font-size:14px;color:var(--taupe);cursor:pointer;font-family:var(--font);margin-bottom:14px}
/* MAGIC */
.magic-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;gap:20px;text-align:center}
.magic-icon{font-size:64px;animation:bounce 1.5s ease infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes starPop{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.5);opacity:1}}
.skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:14px;margin-bottom:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* APP */
.app-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}
.app-header{padding:12px 20px 10px;flex-shrink:0;border-bottom:1px solid var(--border);background:var(--cream);display:flex;align-items:center;justify-content:space-between}
.app-header .greeting-line{font-size:12px;color:var(--taupe)}
.app-header h2{font-size:20px;font-weight:700}
.streak-badge{background:var(--dark);color:var(--white);font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
.avatar-btn{width:36px;height:36px;border-radius:50%;background:var(--sage);border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--white)}
/* INSTALL BANNER */
.install-banner{background:var(--dark);color:var(--white);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.install-banner p{font-size:13px;line-height:1.4}
.install-banner-btn{background:var(--rose);color:var(--dark);border:none;padding:8px 14px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap}
.install-x{background:none;border:none;color:var(--taupe);cursor:pointer;font-size:18px;font-family:var(--font)}
/* TABS */
.tab-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tab-content::-webkit-scrollbar{display:none}
/* DASHBOARD */
.dash-scroll{padding:16px 16px 90px}
.empty-state{text-align:center;padding:32px 20px}
.empty-icon{font-size:40px;margin-bottom:10px}
.empty-state h3{font-size:16px;font-weight:600;margin-bottom:6px}
.empty-state p{font-size:13px;color:var(--taupe);line-height:1.5;margin-bottom:14px}
.widget{background:var(--white);border-radius:18px;padding:18px;margin-bottom:12px;border:1px solid var(--border)}
.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.widget-title{font-size:16px;font-weight:700}
.widget-badge{font-size:12px;color:var(--taupe)}
.widget-action{font-size:12px;color:var(--sage);font-weight:600;cursor:pointer;background:none;border:none;font-family:var(--font)}
.day-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.day-strip::-webkit-scrollbar{display:none}
/* Meal Plan tabs (Dinners / Lunchboxes) */
.meal-tabs{display:flex;gap:6px;margin:2px 0 10px}
.meal-tab{flex:1;padding:8px 0;border-radius:10px;border:1px solid var(--border);background:var(--white);color:var(--taupe);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
.meal-tab.active{background:var(--dark);color:var(--white);border-color:var(--dark)}
/* Combined week overview — dinner + lunch per day */
.mw-day{display:flex;gap:12px;padding:10px 2px;border-bottom:1px solid var(--border)}
.mw-day:last-child{border-bottom:none}
.mw-day-lbl{font-size:12px;font-weight:700;color:var(--taupe);width:34px;flex-shrink:0;padding-top:2px}
.mw-day-meals{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mw-meal{display:flex;align-items:center;gap:8px;min-width:0}
.mw-emoji{font-size:16px;flex-shrink:0;line-height:1}
.mw-kind{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:8px;flex-shrink:0}
.mw-kind-dinner{color:#8A6D3B;background:rgba(138,109,59,.13)}
.mw-kind-lunch{color:#4A7A8C;background:rgba(74,122,140,.14)}
.mw-name{font-size:13px;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Lunchboxes widget */
.lb-list{display:flex;flex-direction:column;gap:2px}
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border)}
.lb-row:last-child{border-bottom:none}
.lb-row.lb-today{background:var(--light);border-radius:8px;border-bottom:none;padding:9px 8px}
.lb-emoji{font-size:18px;flex-shrink:0;line-height:1}
.lb-info{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.lb-day{font-size:12px;font-weight:700;color:var(--taupe);width:30px;flex-shrink:0}
.lb-meal{font-size:14px;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:9px;flex-shrink:0}
.lb-cold{color:#4A7A8C;background:rgba(74,122,140,.14)}
.lb-hot{color:#B5651D;background:rgba(181,101,29,.14)}
/* Lunchbox tag inside the chat widget preview */
.cwc-lunch-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:8px;margin-left:6px}
.cwc-lunch-cold{color:#4A7A8C;background:rgba(74,122,140,.16)}
.cwc-lunch-hot{color:#B5651D;background:rgba(181,101,29,.16)}
.day-pill{flex-shrink:0;width:44px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border-radius:12px;cursor:pointer;border:1.5px solid transparent;transition:all .15s}
.day-pill.active{background:var(--dark)}
.day-pill.active .dp-lbl{color:var(--white)}
.dp-lbl{font-size:10px;font-weight:600;color:var(--taupe)}
.day-pill.dp-today:not(.active) .dp-lbl{color:var(--sage);font-weight:800}
.dp-emoji{font-size:18px}
.meal-detail{margin-top:10px;background:var(--light);border-radius:12px;padding:14px}
.meal-detail h4{font-size:15px;font-weight:600;margin-bottom:6px}
.meal-dtag{background:var(--peach);color:var(--dark);font-size:11px;padding:3px 8px;border-radius:10px}
/* SHOPPING */
.shop-add-row{display:flex;gap:8px;margin-bottom:14px}
.shop-add-input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:var(--font);color:var(--dark);background:var(--white);outline:none}
.shop-add-input:focus{border-color:var(--sage)}
.shop-add-btn{padding:10px 16px;background:var(--dark);color:var(--white);border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
.shop-cat{margin-bottom:12px}
.shop-cat-label{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--taupe);text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
/* Collapsed shopping: one tappable row per category (name · count + how many still to buy). */
.shop-cat-collapsed{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer}
.shop-cat-collapsed:last-of-type{border-bottom:none}
.shop-cat-left{font-size:12px;color:var(--taupe);flex-shrink:0}
.shop-dot{width:7px;height:7px;border-radius:50%}
.shop-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.shop-item:last-child{border:none}
.shop-check{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border);background:var(--white);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.shop-check.done{background:var(--sage);border-color:var(--sage)}
.shop-check.done::after{content:'✓';color:white;font-size:13px;font-weight:700}
.shop-item-info{flex:1}
.shop-name{font-size:14px;font-weight:500;transition:all .15s}
.shop-name.done{text-decoration:line-through;color:var(--taupe)}
.shop-sub{font-size:11px;color:var(--taupe);margin-top:1px}
.shop-qty{font-size:12px;color:var(--taupe)}
/* TODOS */
.todo-add-row{display:flex;gap:8px;margin-bottom:14px}
.todo-add-input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:var(--font);color:var(--dark);background:var(--white);outline:none}
.todo-add-input:focus{border-color:var(--sage)}
.todo-add-btn{padding:10px 16px;background:var(--dark);color:var(--white);border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
.todo-tabs{display:flex;gap:8px;margin-bottom:12px}
.todo-tab{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;border:1.5px solid var(--border);background:var(--white);cursor:pointer;color:var(--taupe);font-family:var(--font);transition:all .15s}
.todo-tab.active{background:var(--dark);color:var(--white);border-color:var(--dark)}
.todo-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.todo-item:last-child{border:none}
.todo-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.todo-check.done{background:var(--sage);border-color:var(--sage)}
.todo-check.done::after{content:'✓';color:white;font-size:12px;font-weight:700}
.todo-text{flex:1}
.todo-title{font-size:14px;font-weight:500}
.todo-title.done{text-decoration:line-through;color:var(--taupe)}
.todo-meta{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.todo-owner-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}
.todo-due{font-size:11px;color:var(--taupe)}
/* CALENDAR */
.cal-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.cal-strip::-webkit-scrollbar{display:none}
.cal-day{flex-shrink:0;width:40px;text-align:center;cursor:pointer;padding:6px 0;border-radius:10px;border:1.5px solid transparent;transition:all .15s}
.cal-day.today{background:var(--dark)}
.cal-day.today .cal-dn,.cal-day.today .cal-dd{color:var(--white)}
.cal-dn{font-size:10px;font-weight:600;color:var(--taupe)}
.cal-dd{font-size:15px;font-weight:700}
.cal-dots{display:flex;justify-content:center;gap:2px;margin-top:3px}
.cal-dot{width:4px;height:4px;border-radius:50%}
.ev-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.ev-row:last-child{border:none}
.ev-time{font-size:11px;font-weight:600;color:var(--taupe);width:36px;flex-shrink:0}
.ev-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ev-label{font-size:14px;font-weight:500}
/* Grouped drop-off / pick-up row: one label + a colour+icon pillar per child */
.ev-main{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ev-kind{font-size:14px;font-weight:500}
.ev-kids{display:flex;gap:6px;flex-wrap:wrap}
.ev-kid{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--dark);padding:2px 9px;border-radius:12px}
.ev-run{padding-left:8px;border-radius:0 6px 6px 0}
.ev-label{display:block}
.ev-loc{display:block;font-size:11px;color:var(--taupe);margin-top:1px}
/* Pillar tag — who an event is about / responsible (right-aligned on the row) */
.ev-tag{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--dark);padding:2px 8px;border-radius:11px;white-space:nowrap}
.ev-tag-family{margin-left:auto;background:var(--light);gap:4px}
.ev-tag-family .pt-ic{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px}
.ev-tag-family .pt-lbl{font-size:11px;font-weight:700;color:var(--taupe);margin-left:2px}
.ev-tag-other{margin-left:auto;background:var(--light);color:var(--taupe)}
.ev-form-title{font-size:13px;font-weight:700;color:var(--dark);margin-bottom:8px}
.ev-type-badge{font-size:10px;font-weight:700;color:#B5651D;background:rgba(230,184,156,.25);padding:1px 6px;border-radius:8px;vertical-align:middle}
.ev-badge-reminder{color:#7A5A86;background:rgba(195,166,201,.28)}
.todo-date-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0 2px}
.todo-date-row .input{padding:7px 9px;font-size:13px;flex:0 1 auto;max-width:150px}
.todo-date-hint{font-size:11px;color:var(--taupe);flex:1 1 100%;line-height:1.3}
/* CHAT */
.chat-messages{flex:1;overflow-y:auto;padding:16px 16px 0;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chat-messages::-webkit-scrollbar{display:none}
.bubble-wrap{display:flex;flex-direction:column;gap:6px}
.bubble-wrap.user{align-items:flex-end}
.bubble{max-width:84%;padding:12px 16px;font-size:14px;line-height:1.55}
.bubble.ai{background:var(--white);border:1px solid var(--border);border-radius:4px 18px 18px 18px}
.bubble.user{background:var(--blush);border-radius:18px 4px 18px 18px}
.bubble-time{font-size:10px;color:var(--taupe)}
.pills-row{display:flex;gap:8px;flex-wrap:wrap}
.pill-btn{padding:8px 14px;border-radius:20px;background:var(--peach);border:none;font-size:12px;font-weight:500;cursor:pointer;color:var(--dark);font-family:var(--font)}
/* Pressed state. The global reset sets -webkit-tap-highlight-color:transparent, so without this a
   pill tap on iOS produced NO visual feedback at all — the handler fired, but nothing on screen said
   so, which is why a beta user asked whether pills were clickable. Deliberately not transitioned:
   acknowledgement of a tap should be immediate, unlike .btn-primary's fade. Follows that button's
   opacity convention and deepens peach → rose, both existing tokens. */
.pill-btn:active{background:var(--rose);opacity:.85}
.unicorn-typing{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--white);border:1px solid var(--border);border-radius:4px 18px 18px 18px;width:fit-content}
.ut-icon{font-size:16px;animation:spin 2s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.star-burst{display:flex;gap:3px}
.star{font-size:10px;animation:starPop .8s ease infinite}
.star:nth-child(2){animation-delay:.2s}
.star:nth-child(3){animation-delay:.4s}
.chat-input-wrap{padding:12px 16px 28px;border-top:1px solid var(--border);background:var(--cream);flex-shrink:0;display:flex;gap:10px;align-items:flex-end}
.chat-input{flex:1;padding:12px 16px;border:1.5px solid var(--border);border-radius:24px;font-size:15px;font-family:var(--font);color:var(--dark);background:var(--white);outline:none;resize:none;max-height:100px;line-height:1.4}
.chat-input:focus{border-color:var(--sage)}
/* Placeholder uses the muted text token rather than the browser default grey, which is a cold grey
   against this warm palette. Native behaviour is kept — it clears on typing, not on focus. */
.chat-input::placeholder{color:var(--taupe)}
.send-btn{width:44px;height:44px;border-radius:50%;background:var(--dark);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.send-btn svg{width:18px;height:18px;fill:none;stroke:white;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notify-btn{width:44px;height:44px;border-radius:50%;background:var(--light);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;line-height:1}
.composer-hint{font-size:11px;color:var(--taupe);text-align:center;padding:6px 12px 2px;line-height:1.4}
/* CHAT SESSIONS (history) */
.chat-subhead{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--cream);flex-shrink:0}
.chat-subhead-day{font-size:13px;font-weight:600;color:var(--dark)}
.chat-hist-btn{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;padding:4px;color:var(--taupe)}
/* Past read-only session: dim AND non-interactive. The guard's Q3 refuses a past-session write at the
   handler; this is the render-layer half — pointer-events:none stops the tap reaching the handler at all
   (defense-in-depth for a silent data bug, CONFIRM_FLOW §7). The "back to today" footer sits OUTSIDE
   .chat-readonly so it stays tappable, and scrolling is on the parent #chat-scroll, so it is unaffected. */
.chat-readonly{opacity:.94;pointer-events:none}
.chat-past-footer{flex-shrink:0;padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 20px);border-top:1px solid var(--border);background:var(--light);text-align:center;font-size:12px;color:var(--taupe);line-height:1.5;cursor:pointer}
.chat-past-footer span{color:var(--dark);font-weight:600;text-decoration:underline}
.sess-list{max-height:60vh;overflow-y:auto;margin-top:6px;-webkit-overflow-scrolling:touch}
.sess-group{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--taupe);padding:12px 2px 4px}
.sess-row{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:6px;border:1px solid var(--border);border-radius:12px;background:var(--white);cursor:pointer;font-family:var(--font);text-align:left}
.sess-row.active{border-color:var(--sage);background:var(--light)}
.sess-day{font-size:13px;font-weight:600;color:var(--dark);white-space:nowrap;flex-shrink:0;min-width:74px}
.sess-title{flex:1;font-size:13px;color:var(--taupe);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sess-count{font-size:11px;font-weight:600;color:var(--sage);flex-shrink:0;min-width:26px;text-align:right}
.sess-older{width:100%;margin-top:8px;padding:10px;border:1px dashed var(--border);border-radius:12px;background:none;color:var(--taupe);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
/* Step 8: day row is the top level; the day's sessions nest under it, expandable. */
.sess-day-row{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:6px;border:1px solid var(--border);border-radius:12px;background:var(--light);cursor:pointer;font-family:var(--font);text-align:left}
.sess-day-row.active{border-color:var(--sage)}
.sess-caret{font-size:11px;color:var(--taupe);flex-shrink:0;width:12px}
.sess-row.sess-sub{margin-left:18px;width:calc(100% - 18px);background:var(--white)}
.sess-time{font-size:12px;font-weight:600;color:var(--taupe);white-space:nowrap;flex-shrink:0;min-width:44px}
/* NEW-DAY WELCOME */
.welcome-card{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:18px;margin:8px 0 4px}
.wc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.wc-uni{font-size:32px;line-height:1}
.wc-hi{font-size:16px;font-weight:700;color:var(--dark)}
.wc-date{font-size:12px;color:var(--taupe);margin-top:1px}
.wc-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.wc-row{display:flex;align-items:flex-start;gap:10px}
.wc-ic{font-size:18px;line-height:1.3;flex-shrink:0}
.wc-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--taupe)}
.wc-s{font-size:14px;color:var(--dark);line-height:1.4}
.wc-empty{font-size:14px;color:var(--taupe);line-height:1.5;margin-bottom:14px}
.wc-pills{display:flex;flex-wrap:wrap;gap:8px}
/* SETTINGS */
.settings-scroll{padding:20px 16px 90px}
.settings-section{margin-bottom:24px}
.settings-section h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe);margin-bottom:10px}
/* Currently avoiding — active allergen flags (read-only list + clear). */
.avoid-hint{font-size:12px;color:var(--taupe);line-height:1.5;margin-bottom:10px}
.avoid-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin-bottom:6px;border:1px solid var(--border);border-radius:12px;background:var(--white)}
.avoid-what{font-size:14px;font-weight:600;color:var(--dark)}
.avoid-clear{width:30px;height:30px;flex-shrink:0;border:1px solid var(--border);border-radius:8px;background:var(--light);color:var(--taupe);font-size:14px;cursor:pointer;font-family:var(--font)}
.avoid-clear:active{background:var(--peach)}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);cursor:pointer}
.settings-row:last-child{border:none}
.settings-row-label{font-size:15px;font-weight:500}
.settings-row-value{font-size:13px;color:var(--taupe);max-width:180px;text-align:right}
.invite-box{background:var(--light);border-radius:14px;padding:16px;margin-top:8px}
.invite-url{font-size:12px;font-family:monospace;color:var(--dark);word-break:break-all;background:var(--white);padding:8px 12px;border-radius:8px;border:1px solid var(--border);margin:8px 0}
.copy-btn{width:100%;padding:10px;background:var(--dark);color:var(--white);border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
/* FAMILY MEMBERS (per-person colour + icon) */
.member-row{border-bottom:1px solid var(--border)}
.member-row:last-child{border-bottom:none}
.member-main{display:flex;align-items:center;gap:12px;padding:12px 0}
.member-avatar{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.member-avatar-sm{width:24px;height:24px;font-size:13px;vertical-align:middle;margin-right:6px}
.member-name{font-size:15px;font-weight:600}
.member-role{font-size:11px;color:var(--taupe);background:var(--light);padding:2px 8px;border-radius:10px;margin-left:auto}
.member-edit{font-size:13px;color:var(--taupe);width:18px;text-align:center;flex-shrink:0}
.member-style{padding:2px 0 14px}
.member-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.swatch.sel{border-color:var(--dark)}
.member-emojis{display:flex;gap:6px;flex-wrap:wrap}
.emoji{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;background:var(--light);border:2px solid transparent}
.emoji.sel{border-color:var(--dark)}
/* Member roster tiles (child age + kindergarten/school) */
.member-tiles{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
.member-tile{font-size:11px;font-weight:600;color:var(--taupe);background:var(--light);padding:2px 8px;border-radius:10px;white-space:nowrap}
.member-tile-inst{color:var(--sage);background:rgba(143,173,163,.14)}
.member-add{cursor:pointer}
.member-add-plus{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:var(--sage);background:var(--light)}

/* Family topline summary (derived — no dropdown) */
.fam-summary{background:var(--light);border-radius:14px;padding:14px 16px;margin-bottom:20px}
.fam-summary-line{font-size:15px;font-weight:600;color:var(--dark)}
.fam-summary-allergies{font-size:12px;color:var(--taupe);margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fam-summary-label{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:10px}
.fam-summary-none{color:var(--taupe)}
.chip-sm{font-size:11px;padding:2px 8px}

/* Collapsible settings accordions */
.acc{margin-bottom:12px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:var(--white);border:none;cursor:pointer;font-family:var(--font);text-align:left}
.acc-title{font-size:15px;font-weight:600;color:var(--dark)}
.acc-chevron{font-size:18px;color:var(--taupe);transition:transform .18s ease;flex-shrink:0}
.acc-open .acc-chevron{transform:rotate(90deg)}
.acc-sub{padding:0 16px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.acc-summary{font-size:12.5px;color:var(--taupe);line-height:1.4}
.acc-summary-empty{color:var(--taupe);font-style:italic}
.acc-setup{font-size:12px;font-weight:600;color:var(--sage);background:rgba(143,173,163,.14);border:none;border-radius:10px;padding:5px 10px;cursor:pointer;font-family:var(--font);white-space:nowrap}
.acc-body{padding:2px 16px 16px}
.acc-body .avail-lbl:first-child{margin-top:2px}
/* PARENT AVAILABILITY */
.avail-lbl{font-size:12px;font-weight:600;color:var(--taupe);margin:12px 0 6px}
.avail-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--light);border-radius:8px;margin-bottom:6px;font-size:13px}
.avail-x{cursor:pointer;color:var(--taupe);font-size:18px;line-height:1;flex-shrink:0;padding:0 2px}
.avail-add{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.avail-add .input{flex:1;min-width:70px;padding:8px 10px;font-size:13px}
.avail-add .shop-add-btn{flex-shrink:0}
/* NAV */
.bottom-nav{display:flex;border-top:1px solid var(--border);background:var(--cream);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;border:none;background:none;cursor:pointer;color:var(--taupe);font-family:var(--font);transition:color .15s}
.nav-btn.active{color:var(--dark)}
.nav-icon{font-size:22px}
.nav-lbl{font-size:10px;font-weight:600}
.loading-screen{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}

/* CHAT WIDGETS */
.chat-widget-card{background:var(--light);border:1.5px solid var(--border);border-radius:14px;padding:14px;margin-top:8px;max-width:84%}
.cwc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;font-weight:700}
.cwc-count{font-size:11px;color:var(--taupe);font-weight:500}
.cwc-meal-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.cwc-meal-row:last-child{border:none}
.cwc-emoji{font-size:20px;width:28px;flex-shrink:0;text-align:center}
.cwc-meal-info{display:flex;flex-direction:column;gap:1px}
.cwc-day{font-size:10px;font-weight:700;color:var(--taupe);text-transform:uppercase;letter-spacing:.04em}
.cwc-name{font-size:13px;font-weight:500}
.cwc-shop-cat{margin-bottom:10px}
.cwc-shop-cat:last-child{margin-bottom:0}
.cwc-cat-lbl{font-size:10px;font-weight:700;color:var(--taupe);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.cwc-shop-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.cwc-shop-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cwc-item-name{font-size:13px;flex:1}
.cwc-item-qty{font-size:11px;color:var(--taupe)}
/* SYNC PROMPT */
.sync-prompt{background:var(--dark);border-radius:14px;padding:14px;margin-top:8px;max-width:84%}
.sync-prompt p{font-size:13px;color:var(--white);margin-bottom:10px;line-height:1.4}
.sync-btns{display:flex;gap:8px}
.sync-yes{flex:1;padding:9px;background:var(--rose);color:var(--dark);border:none;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font)}
.sync-no{padding:9px 14px;background:rgba(255,255,255,.1);color:var(--white);border:none;border-radius:10px;font-size:12px;cursor:pointer;font-family:var(--font)}
/* ── CHAT WIDGETS (added Phase 2) ── */
.chat-widget-card{background:var(--light);border:1.5px solid var(--border);border-radius:14px;padding:14px;margin-top:8px;max-width:84%}
.cwc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;font-weight:700}
.cwc-count{font-size:11px;color:var(--taupe);font-weight:500}
.cwc-meal-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.cwc-meal-row:last-child{border:none}
.cwc-emoji{font-size:20px;width:28px;flex-shrink:0;text-align:center}
.cwc-meal-info{display:flex;flex-direction:column;gap:1px}
.cwc-day{font-size:10px;font-weight:700;color:var(--taupe);text-transform:uppercase;letter-spacing:.04em}
.cwc-name{font-size:13px;font-weight:500}
.cwc-shop-cat{margin-bottom:10px}
.cwc-shop-cat:last-child{margin-bottom:0}
.cwc-cat-lbl{font-size:10px;font-weight:700;color:var(--taupe);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.cwc-shop-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.cwc-shop-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cwc-item-name{font-size:13px;flex:1}
.cwc-item-qty{font-size:11px;color:var(--taupe)}
.sync-prompt{background:var(--dark);border-radius:14px;padding:14px;margin-top:8px;max-width:84%}
.sync-prompt p{font-size:13px;color:var(--white);margin-bottom:10px;line-height:1.4}
.sync-btns{display:flex;gap:8px}
.sync-yes{flex:1;padding:9px;background:var(--rose);color:var(--dark);border:none;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font)}
.sync-no{padding:9px 14px;background:rgba(255,255,255,.1);color:var(--white);border:none;border-radius:10px;font-size:12px;cursor:pointer;font-family:var(--font)}
.shop-add-row{display:flex;gap:8px;margin-bottom:14px}
.shop-add-input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:var(--font);color:var(--dark);background:var(--white);outline:none}
.shop-add-input:focus{border-color:var(--sage)}
.shop-add-btn{padding:10px 16px;background:var(--dark);color:var(--white);border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
.todo-add-row{display:flex;gap:8px;margin-bottom:12px}
.todo-add-input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:var(--font);color:var(--dark);background:var(--white);outline:none}
.todo-add-input:focus{border-color:var(--sage)}
.todo-add-btn{padding:10px 16px;background:var(--dark);color:var(--white);border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
.invite-box{background:var(--light);border-radius:14px;padding:16px;margin-top:8px}
.invite-url{font-size:12px;font-family:monospace;color:var(--dark);word-break:break-all;background:var(--white);padding:8px 12px;border-radius:8px;border:1px solid var(--border);margin:8px 0}
.copy-btn{width:100%;padding:10px;background:var(--dark);color:var(--white);border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
.widget-action{font-size:12px;color:var(--sage);font-weight:600;cursor:pointer;background:none;border:none;font-family:var(--font)}
.info-msg{background:#E8F4FD;color:#1565C0;padding:12px 14px;border-radius:10px;font-size:13px;text-align:center}

/* ── FAMILY NAME (Settings) ── */
.fam-name{font-size:20px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fam-name-pencil{font-size:13px;color:var(--taupe)}
.fam-name-edit{max-width:280px;margin:0 auto}
.fam-name-btns{display:flex;gap:8px;margin-top:8px}
.fam-name-btns .sync-yes,.fam-name-btns .sync-no{flex:1}

/* ── TO-DO ASSIGNEE + WORKLOAD ── */
.todo-assign-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.todo-assign-lbl{font-size:12px;color:var(--taupe);font-weight:600}
.todo-assign-btn{margin-left:auto;padding:5px 10px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);color:var(--dark);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font)}
.todo-assign-btn:hover{border-color:var(--sage)}
.todo-tab-count{display:inline-block;margin-left:6px;padding:0 5px;border-radius:8px;background:rgba(0,0,0,.08);font-size:10px;font-weight:700;line-height:15px}
.todo-tab.active .todo-tab-count{background:rgba(255,255,255,.22)}

/* ── ADD EVENT FORM ── */
.ev-form{background:var(--light);border-radius:12px;padding:12px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.ev-form .input{width:100%}
.ev-form-row{display:flex;gap:8px}
.ev-form-row .input{flex:1;min-width:0}
.ev-hint{font-size:11px;color:var(--taupe);margin:-2px 2px 0}
.ev-error{background:var(--peach);color:var(--dark);font-size:12px;font-weight:600;padding:8px 10px;border-radius:8px}
.ev-form-btns{display:flex;gap:8px;margin-top:2px}
.ev-form-btns .btn-primary{flex:1}
.ev-cancel{padding:10px 16px;background:var(--white);color:var(--dark);border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}

/* ── KID SWITCHER ── */
.cal-kid-switch{flex-wrap:wrap}

/* — CHILDREN SETTINGS — */
.child-editor{background:var(--light);border-radius:12px;padding:12px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.child-editor .input{width:100%}
.child-lbl{font-size:12px;font-weight:600;color:var(--taupe);margin:6px 2px 0}
.child-hint{font-weight:400}
.child-activity{border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px}
.child-remove{color:#C0392B;border-color:#C0392B}

/* — CALENDAR WEEK NAV — */
.cal-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}
.cal-nav-btn{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);background:var(--white);color:var(--dark);font-size:15px;line-height:1;cursor:pointer;font-family:var(--font)}
.cal-nav-btn:hover{border-color:var(--sage)}
.cal-nav-week{border:none;background:none;font-size:12px;font-weight:600;color:var(--taupe);cursor:pointer;font-family:var(--font);min-width:96px}
.cal-nav-away{color:var(--sage)}
.cal-day.cal-now .cal-dn,.cal-day.cal-now .cal-dd{color:var(--sage);font-weight:800}

/* — PER-WEEKDAY SCHEDULE (child editor) — */
.child-day-row{display:flex;align-items:flex-start;gap:8px;padding:4px 0}
.child-day-lbl{font-size:12px;font-weight:600;color:var(--taupe);width:32px;flex-shrink:0;padding-top:8px}
.child-day-slots{flex:1;display:flex;flex-direction:column;gap:6px}
.child-day-slot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.child-day-kind{font-size:11px;color:var(--taupe);width:34px;flex-shrink:0}
.child-day-slot .input{flex:1;min-width:0;padding:6px 8px;font-size:12px}

/* ── SHOPPING SECTION HEADERS ── */
.shop-cat-count,.shop-section-count,.cwc-cat-count{color:var(--taupe);font-weight:600;letter-spacing:0}
.shop-section-divider{display:flex;align-items:center;gap:6px;margin:12px 0 6px;padding-top:10px;border-top:1px solid var(--border);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe)}
.shop-section-divider:first-child{border-top:none;padding-top:0;margin-top:2px}
.cwc-section-divider{margin:8px 0 4px;padding-top:6px;border-top:1px solid var(--border);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--taupe)}
.cwc-section-divider:first-child{border-top:none;padding-top:0;margin-top:0}

/* ── SHOPPING ITEM QTY ── */
.shop-qty,.cwc-item-qty{white-space:nowrap;flex-shrink:0;color:var(--taupe)}

/* ── MEAL LEFTOVER REUSE NOTE ── */
.meal-reuses{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.meal-reuse-note{font-size:11px;color:var(--taupe);line-height:1.4}
.cwc-meal-reuse{display:block;font-size:10px;color:var(--taupe);line-height:1.4;margin-top:2px}

/* ── SW UPDATE BANNER ── */
.sw-update-banner{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:12px;right:12px;max-width:440px;margin:0 auto;z-index:2000;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--dark);color:var(--cream);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px}
.sw-update-text{flex:1;font-weight:600}
.sw-update-reload{background:var(--rose);color:var(--dark);border:none;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);flex-shrink:0}
.sw-update-dismiss{background:transparent;border:none;color:var(--cream);font-size:18px;line-height:1;cursor:pointer;padding:0 2px;opacity:.8;flex-shrink:0}

/* ── DASHBOARD WEEK EXPAND + QUICK ACTIONS ── */
.week-expand-link{display:block;width:100%;margin-top:10px;padding:6px 0;background:none;border:none;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:600;color:var(--taupe);text-align:center}
.week-list{margin-top:6px}

/* ── BETA FEEDBACK BUTTON ── */
/* Temporary beta scaffolding. Muted, unobtrusive; 48px tap target with a smaller visual circle. */
.fb-fab{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);z-index:900;width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;cursor:pointer}
.fb-fab-dot{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--light);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.10);font-size:17px;opacity:.9}
/* On the chat tab the send button sits bottom-right above the nav — raise the FAB clear of it. */
.fb-fab-chat{bottom:calc(env(safe-area-inset-bottom,0px) + 148px)}
.fb-overlay{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.28);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.fb-sheet{width:100%;max-width:440px;background:var(--cream);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.fb-sheet-title{font-weight:700;color:var(--dark);margin-bottom:10px}
.fb-hint{font-size:12px;color:var(--taupe);margin:6px 0 12px}
.fb-toast{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 82px);max-width:440px;margin:0 auto;z-index:1500;text-align:center;background:var(--dark);color:var(--cream);font-size:13px;padding:10px 14px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18)}

/* ── MEAL DETAIL: COOK TIME, DESCRIPTION, INGREDIENT LIST ── */
/* The selected-day meal tile now shows an at-a-glance summary: a cook-time chip beside the tags,
   a one-line description, and (below the actions) an ingredient list whose amounts mirror the
   shopping list exactly. All three rows self-hide when their data is absent (older saved meals). */
.meal-dmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.meal-cooktime{background:var(--dark);color:var(--white);font-size:11px;font-weight:600;padding:3px 9px;border-radius:10px;white-space:nowrap}
.meal-desc{font-size:13px;color:var(--dark);line-height:1.5;margin:0 0 12px;opacity:.85}
.meal-ings{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.meal-ings-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe);margin-bottom:6px}
.meal-ing-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px}
.meal-ing-row:last-child{border:none}
.meal-ing-name{color:var(--dark)}
.meal-ing-qty{color:var(--taupe);font-size:12px;white-space:nowrap;flex-shrink:0}
/* Primary action sits below the ingredient list; "Change" is a quieter text link beneath it. */
.meal-recipe-btn{width:100%;margin-top:14px;padding:11px;border-radius:10px;border:none;background:var(--dark);color:var(--white);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font)}
.meal-change-link{display:block;width:100%;margin-top:8px;padding:4px 0;background:none;border:none;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:600;color:var(--taupe);text-align:center}

/* ── PARTNER NOTIFICATIONS (bell, badge, inbox panel) ── */
.notif-bell{position:relative;width:36px;height:36px;border-radius:50%;background:var(--light);border:1px solid var(--border);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;line-height:1}
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#C0392B;color:var(--white);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
.notif-head{display:flex;justify-content:space-between;align-items:center}
.notif-readall{background:none;border:none;cursor:pointer;font-family:var(--font);font-size:12px;font-weight:600;color:var(--sage)}
.notif-list{display:flex;flex-direction:column;max-height:50vh;overflow-y:auto;margin:4px 0 2px}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border);cursor:pointer}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:var(--light);border-radius:8px;padding:10px 8px;border-bottom:none;margin-bottom:2px}
.notif-icon{font-size:16px;flex-shrink:0;line-height:1.4}
.notif-body{flex:1;min-width:0}
.notif-text{font-size:13px;color:var(--dark);line-height:1.4}
.notif-meta{font-size:11px;color:var(--taupe);margin-top:2px}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--rose);flex-shrink:0;margin-top:5px}
.notif-section-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--taupe);margin:10px 2px 2px}
.notif-section-label:first-of-type{margin-top:4px}
/* Schedule-reminder rows: 'soon' items lead the eye; 'past' fade back. */
.notif-item.rem-soon{background:var(--light);border-radius:8px;padding:10px 8px;border-bottom:none;margin-bottom:2px}
.notif-item.rem-soon .notif-meta{color:var(--sage);font-weight:600}
.notif-item.rem-past{opacity:.5}

/* ── OVERVIEW HERO CAROUSEL (day/date + auto-rotating panels) ── */
/* .ov-stack gives a stacked-deck look: two faded layers peek out behind the front card. */
.ov-stack{position:relative;margin-bottom:20px}
.ov-stack::before{content:'';position:absolute;z-index:1;left:10px;right:10px;bottom:-6px;height:22px;border-radius:18px;background:var(--dark);opacity:.5}
.ov-stack::after{content:'';position:absolute;z-index:0;left:18px;right:18px;bottom:-11px;height:22px;border-radius:18px;background:var(--dark);opacity:.28}
.ov-card{position:relative;z-index:2;background:var(--dark);border-radius:20px;padding:18px 20px;color:var(--white);overflow:hidden}
.ov-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.ov-date{font-size:12px;font-weight:600;color:var(--taupe)}
.ov-add{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:var(--white);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ov-viewport{overflow:hidden;touch-action:pan-y}
.ov-track{display:flex;transition:transform .4s ease;will-change:transform}
.ov-panel{flex:0 0 100%;min-width:100%;position:relative}
.ov-card-x{position:absolute;top:-2px;right:0;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);border:none;color:var(--white);font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ov-compose-row{display:flex;gap:8px}
.ov-compose-input{flex:1;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:var(--white);font-size:14px;font-family:var(--font);outline:none}
.ov-compose-input::placeholder{color:rgba(255,255,255,.5)}
.ov-compose-add{padding:9px 16px;border-radius:10px;border:none;background:var(--white);color:var(--dark);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);flex-shrink:0}
.ov-mind-hint{margin-top:8px;font-size:11px;color:rgba(255,255,255,.55);line-height:1.4}
.ov-mind-flash{margin-top:9px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ov-mind-done{font-size:12px;font-weight:600;color:var(--white)}
.ov-mind-move{display:flex;gap:6px}
.ov-mind-chip{font-size:11px;font-weight:600;color:var(--white);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:3px 9px;cursor:pointer;font-family:var(--font)}
.ov-mind-x{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.6);font-size:13px;cursor:pointer;flex-shrink:0}

/* Needs-attention strip (persistent digest below the hero carousel) */
.attn-stack{margin:-6px 0 18px}
.attn-head{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--taupe);margin:0 2px 6px}
.attn-row{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:6px;background:var(--white);border:1px solid var(--border);border-radius:12px;font-family:var(--font);text-align:left;cursor:default}
button.attn-row{cursor:pointer}
.attn-icon{font-size:15px;flex-shrink:0;line-height:1}
.attn-text{flex:1;min-width:0;font-size:13px;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attn-go{color:var(--taupe);font-size:15px;flex-shrink:0}
.attn-soon{border-left:3px solid var(--sage)}
.attn-alert{border-left:3px solid #C0392B}
.attn-note{border-left:3px solid var(--taupe)}
.ov-eyebrow{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);margin-bottom:6px}
.ov-dinner{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ov-emoji{font-size:30px}
.ov-title,.ov-headline{font-size:20px;font-weight:700;line-height:1.25}
.ov-headline{margin-bottom:8px}
.ov-btn{background:rgba(255,255,255,.15);color:var(--white);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);width:100%;text-align:center}
.ov-lines{display:flex;flex-direction:column;gap:4px}
.ov-line{font-size:13px;color:rgba(255,255,255,.9);line-height:1.4}
.ov-more{color:var(--taupe)}
.ov-sub{font-size:13px;color:rgba(255,255,255,.72);line-height:1.4}
.ov-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.ov-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:background .2s,width .2s}
.ov-dot.active{background:var(--white);width:16px;border-radius:3px}

/* ── NUDGE CARDS (Build 13) ── */
.nudge-card{display:flex;align-items:center;gap:10px;background:var(--peach);border:1px solid var(--border);
  border-radius:14px;padding:12px 14px;margin:4px 0 12px}
.nudge-icon{font-size:20px;flex:0 0 auto}
.nudge-text{flex:1;font-size:13px;color:var(--dark);line-height:1.35}
.nudge-go{flex:0 0 auto;background:var(--dark);color:var(--white);border:none;border-radius:20px;
  padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.nudge-x{flex:0 0 auto;background:transparent;border:none;color:var(--taupe);font-size:20px;
  line-height:1;cursor:pointer;padding:2px 6px}

/* ── OUR WEEK / PROTECTED TIME SETTINGS (Build 15) ── */
.settings-section select.input{width:100%;margin-bottom:10px}
.settings-section .avail-lbl{margin-top:6px}

/* ── CONFIRM FLOW ── */
/* Generic proposal/confirm action row, extracted from the schedule confirm path. Its buttons reuse
   .pill-btn, so a proposal's actions look identical to the schedule confirm buttons they replace; the
   row lays out exactly like .pills-row (flex, 8px gap, wrap). It carries no colour of its own — the
   button palette lives in .pill-btn (CSS variables). Future proposal kinds share this row. */
.cf-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── CHAT SCHEDULE WIDGET — GRID + LEGEND ── */
/* The 5-day drop-off/pick-up grid inside a chat widget card. Layout moved out of inline styles in
   chat.js so it lives with the rest of the CSS; only per-member colour stays inline, since it is a
   dynamic value from the palette. Both parents now carry the same icon badge — a uid-bearing parent
   used to get an emoji while a not-yet-joined partner got a bare dot — and the legend names whoever
   appears in the grid, which was previously undecodable at a glance. */
.cwc-sched-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;font-size:10px;text-align:center}
.cwc-sched-day{font-weight:700;color:var(--taupe)}
.cwc-sched-slot{line-height:1.5}
.cwc-sched-cell{display:inline-flex;align-items:center;gap:3px;justify-content:center;flex-wrap:wrap}
.cwc-sched-ic{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;font-size:10px;line-height:1;flex:0 0 auto}
.cwc-sched-unset{color:var(--rose);font-weight:700;white-space:nowrap}
.cwc-sched-foot{font-size:10px;color:var(--taupe);padding-top:6px}
.cwc-sched-legend{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;
  font-size:10px;color:var(--taupe);padding-top:6px;margin-top:6px;border-top:1px solid var(--border)}
.cwc-legend-item{display:inline-flex;align-items:center;gap:4px}

/* ── CARDS ── */
/* The two card types of CARDS.md. This slice ships the DARK decision card (§4): a promotion confirm
   whose question lives INSIDE the card and whose button row settles in place on tap. It reuses the
   dark-brown surface, rose primary and white text established by .sync-prompt, so the two dark surfaces
   read as one family. --dc-secondary is the white scrim behind the secondary button — a variable so the
   raw rgba (previously inline in .sync-no) is not repeated as a literal. Schedule keeps its light widget
   above and settles its bare .cf-actions row without a card, so .dc-settled must read on light too;
   --sage is the palette's checkmark colour and works on both the dark card and the cream bubble. */
:root{--dc-secondary:rgba(255,255,255,.10)}
.decision-card{background:var(--dark);border-radius:14px;padding:14px;margin-top:8px;max-width:84%}
.dc-q{font-size:13px;color:var(--white);margin-bottom:10px;line-height:1.4}
.dc-actions{display:flex;gap:8px;flex-wrap:wrap}
.dc-btn{padding:9px 14px;background:var(--dc-secondary);color:var(--white);border:none;border-radius:10px;font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font)}
.dc-primary{background:var(--rose);color:var(--dark);font-weight:700}
.dc-settled{font-size:13px;font-weight:700;color:var(--sage)}
/* Safety-refusal variant of the dark card (constraint block). A boundary, not a suggestion: same dark
   surface as .decision-card, distinguished by a --rose accent edge (the palette has no dedicated warn
   colour; the ⚠️ in the copy carries the meaning). Reuses .dc-q / .dc-actions / .dc-btn / .dc-primary. */
.warning-card{background:var(--dark);border-left:4px solid var(--rose);border-radius:14px;padding:14px;margin-top:8px;max-width:84%}

/* ── BETA WELCOME (sign-up page) ── */
/* The first screen an invited family sees, usually on a phone from an email link. Mobile first:
   the page SCROLLS, because .screen is overflow:hidden and this content is taller than a phone —
   .auth-wrap's centred, non-scrolling layout would clip the "Before you start" list entirely.
   Palette note: the brief asked for "charcoal" and "off-white", which are not variables in :root.
   Mapped to the existing warm palette — charcoal -> --dark, off-white page -> --light, card -> --cream.
   No raw hex. Tap targets are >= 48px per the accessibility rule. */
.bw-page{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--light);
  padding:24px 16px calc(env(safe-area-inset-bottom,0px) + 32px)}
.bw-card{max-width:420px;margin:0 auto;background:var(--cream);border:1px solid var(--border);
  border-radius:20px;padding:28px 22px}

.bw-uni{font-size:44px;line-height:1;text-align:center;margin-bottom:14px}
.bw-eyebrow{text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--taupe);margin-bottom:10px}
.bw-title{text-align:center;font-size:26px;font-weight:700;color:var(--dark);line-height:1.2;margin-bottom:10px}
.bw-sub{text-align:center;font-size:15px;line-height:1.55;color:var(--dark);opacity:.78;margin-bottom:18px}

.bw-panel{background:var(--peach);border-radius:14px;padding:16px 18px;margin-bottom:22px;
  font-size:15px;line-height:1.5;color:var(--dark);text-align:center}

.bw-form{margin-bottom:14px}
.bw-form .input{min-height:48px}
/* Dark fill, cream text — .btn-primary is dark on --white, so only the text colour is overridden. */
.bw-cta{color:var(--cream);margin-top:4px;min-height:52px}

.bw-switch{margin-bottom:4px}
/* 48px tap target on the inline link without disturbing the sentence's baseline. */
.bw-switch span{display:inline-block;padding:14px 6px;line-height:20px}

.bw-divider{height:1px;background:var(--border);margin:18px 0 20px}

.bw-before{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--taupe);margin-bottom:14px}
.bw-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0 0 20px;padding:0}
.bw-item{display:flex;align-items:flex-start;gap:10px}
.bw-mark{color:var(--sage);font-size:14px;line-height:1.5;flex:0 0 auto}
.bw-text{font-size:14px;line-height:1.5;color:var(--dark);opacity:.85}
.bw-text strong{font-weight:700;opacity:1}

.bw-legal{font-size:12px;line-height:1.5;color:var(--taupe);text-align:center}

/* Roomier on a larger screen; the card stays the same card, just wider. */
@media (min-width:600px){
  .bw-page{padding:40px 24px}
  .bw-card{padding:34px 30px}
  .bw-title{font-size:29px}
}

/* ── TAP FEEDBACK ── */
/* The reset at the top of this file clears -webkit-tap-highlight-color GLOBALLY, so on iOS a tap on
   any of these produced no visual response at all until the next render. That is not cosmetic: a
   parent reported "Add to overview" (.sync-yes) as not working when it had in fact worked silently,
   and it is the mechanism behind the duplicate calendar events — tap, see nothing, tap again.

   OPACITY, NOT COLOUR, deliberately. These eight sit on four different surfaces (the dark decision
   card, the dark hero glass, white, and no background at all) and several carry state modifiers
   (.chip.sel, .dc-primary, .nav-btn.active). A background override would need a per-class value and
   would fight those modifiers on specificity — which is how one shared rule becomes nine drifting
   ones. Opacity composes with every surface and every state. .8 matches the press convention
   .btn-primary:active already sets at the top of this file.

   transition:none because .chip carries `transition:all .15s`; without this the press would fade in
   over 150ms, which is longer than a quick tap — the feedback would be missed exactly when it is
   most needed. Release still eases back via each element's own base transition. */
.dc-btn:active,
.chip:active,
.ov-btn:active,
.sync-yes:active,
.sync-no:active,
.nav-btn:active,
.widget-action:active,
.ov-compose-add:active{opacity:.8;transition:none}

/* ── PAST-DAY GREYING (WEEKLY_LIFECYCLE §7) ── */
/* Past calendar events are KEPT and greyed out, in place — not hidden, not deleted: a past event is
   still the answer to "what did we do Tuesday." Presentation only, no data change. The to-do half
   (strike + sink) already shipped; this is the calendar/meal half. Three surfaces carry a `*-past`
   class set in dashboard.js by comparing the tile/pill's date to today: the calendar week strip
   (.cal-day.cal-past), the selected-day agenda when a past day is open (.cal-agenda.cal-past), and
   the meal strip's day pills (.day-pill.dp-past).

   OPACITY, NOT COLOUR — same reasoning as TAP FEEDBACK above: these sit on different surfaces and
   carry state modifiers (.today / .active selection), so a colour override would fight them on
   specificity. Opacity composes with every surface. The SELECTED day is exempted back to full
   opacity: you can tap a past day to read it, and the day you're looking at should not be dimmed
   while its (greyed) agenda is what you came to see. */
.cal-day.cal-past{opacity:.4}
.cal-day.cal-past.today{opacity:1}      /* a selected past day stays legible; its ring/label read */
.day-pill.dp-past{opacity:.45}
.day-pill.dp-past.active{opacity:1}     /* a selected past meal day stays legible */
.cal-agenda.cal-past{opacity:.55}       /* viewing a past day: its rows read as done, not current */

/* ── WEEK LIFECYCLE STATES (WEEKLY_LIFECYCLE §8) ── */
/* The viewed week's status is derived from the calendar offset and carried as a class on the nav, so a
   family is never unsure whether an edit lands in a live week or a dead one — §8 makes this distinction
   required, not optional. Colour (not only the text suffix): archived is muted (past, read-only), planned
   takes the forward-looking sage accent, active keeps the default weight. */
.cal-week-archived .cal-nav-week{color:var(--taupe)}
.cal-week-planned  .cal-nav-week{color:var(--sage)}
.cal-archived-note{text-align:center;color:var(--taupe);font-size:12px;font-style:italic;padding:10px 0 2px}

/* ── PER-DAY SCHEDULE OVERRIDE: STATE + RETURN-TO-USUAL ── */
/* Shown only on a weekday row whose Drop or Pick is set on its own rather than inheriting usual. The note
   is INFORMATION, not a warning — an override is a valid choice, so it takes the muted --taupe label
   colour, distinct from the --rose used for genuine divergence ("This week:") and incomplete ("not set").
   The button names its destination (usual), matching the "Usual" dropdown option, and stays a quiet inline
   affordance so it never competes with Save. The per-slot dropdown remains the finer clear-one-slot path. */
.child-day-reset{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.child-day-reset-note{font-size:11px;color:var(--taupe);flex:1;min-width:0}
.child-day-reset-btn{flex-shrink:0;background:none;border:none;padding:8px 6px;min-height:48px;
  font-size:12px;font-weight:600;color:var(--sage);cursor:pointer;text-decoration:underline}

/* ── SIGNUP / LOGIN FRONT DOOR ── */
/* The beta's front door: same URL, same flow point (state.screen 'login'/'signup' → render()), just a
   full-width marketing page instead of the centred card. #app is width-locked to 430px and overflow:hidden,
   so `.fd-root` uses position:fixed to break OUT of the phone frame and become the viewport-wide, scrolling
   page the mockup describes — index.html and #app are untouched. Built entirely on the shipping palette
   (no new :root vars, no mockup colours). Role map: page→--light, cards→--cream, ink→--dark, accent/button/
   dot→--sage, emphasis/marks/focus→--rose, muted→--taupe, preview band→--dark. The mockup's --dark-2 (a
   second dark shade for the nested app card) has no live equivalent, so it's a translucent-cream overlay
   over the dark band via color-mix. Headlines use --font-serif (self-hosted Instrument Serif, Georgia
   fallback); body/UI stays on the Inter --font stack.
   Mobile-first: the form section is first in the DOM and single-column stacks put it on top; the two-column
   layout only appears at ≥900px. */

.fd-root{position:fixed;inset:0;z-index:50;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;background:var(--light);color:var(--dark);
  font-family:var(--font);line-height:1.5;text-align:left}
.fd-root *{box-sizing:border-box}
.fd-wrap{max-width:1080px;margin:0 auto;width:100%;padding:0 20px}

/* Headlines: Instrument Serif (self-hosted, --font-serif) with the Georgia stack as fallback; everything
   else stays on Inter. Instrument Serif ships ONE weight (400) and no bold, so every serif headline is
   pinned to font-weight:400 — never 600/700 — to avoid a synthesised (fake) bold that looks broken. */
.fd-h1,.fd-h3,.fd-h4,.fd-card-h2,.fd-dish,.fd-wordmark{font-family:var(--font-serif);font-weight:400}

/* Header */
.fd-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 0}
.fd-wordmark{display:inline-flex;align-items:center;gap:9px;font-size:19px;font-weight:400;
  letter-spacing:-.01em;color:var(--dark)}
.fd-dot{width:11px;height:11px;border-radius:50%;background:var(--sage);flex:none}
.fd-signin{display:inline-flex;align-items:center;gap:12px}
.fd-signin-label{font-size:13px;color:var(--taupe)}
@media(max-width:520px){.fd-signin-label{display:none}}
.fd-ghost{background:transparent;border:1.5px solid var(--border);color:var(--dark);
  padding:9px 18px;border-radius:24px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.fd-ghost:hover{border-color:var(--sage)}

/* Two-column top. The form <section> is first in the DOM, but `order` shows the copy column first at
   EVERY width: at narrow widths the eyebrow/headline/"one brain"/steps stack on top and the form card
   follows (returning users use the header "Sign in"); at ≥900px the same order lays the two out as
   copy-left / form-right in the grid. Ordering only — the markup is unchanged. */
.fd-top{display:grid;gap:36px;padding:8px 0 40px}
.fd-copy{order:1}
.fd-form{order:2;display:flex;flex-direction:column;gap:14px}
@media(min-width:900px){
  .fd-top{grid-template-columns:1fr minmax(360px,420px);gap:56px;align-items:start;padding:24px 0 56px}
  .fd-form{position:sticky;top:24px}
}

/* Copy column */
.fd-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sage);margin-bottom:14px}
.fd-h1{font-size:clamp(30px,6.4vw,50px);line-height:1.08;letter-spacing:-.015em;margin:0 0 16px;color:var(--dark)}
.fd-h1 em{font-style:italic;font-weight:400;color:var(--rose)}
.fd-lede{font-size:17px;color:var(--dark);opacity:.86;max-width:38ch;margin:0 0 26px}

.fd-brain{background:var(--cream);border:1px solid var(--border);border-radius:18px;padding:20px 22px;
  margin-bottom:26px}
.fd-brain-viz{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.fd-node{flex:none;padding:8px 16px;border-radius:22px;background:var(--white);border:1.5px solid var(--border);
  font-size:14px;font-weight:600;color:var(--dark)}
.fd-thread{flex:1;position:relative;height:1px;background:var(--taupe);display:flex;align-items:center;
  justify-content:center}
.fd-thread span{background:var(--cream);padding:0 10px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sage)}
.fd-brain p{margin:0;font-size:14px;color:var(--dark);opacity:.85}
.fd-brain strong{opacity:1;font-weight:600}

.fd-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.fd-steps li{display:flex;gap:14px;align-items:flex-start}
.fd-step-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sage);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.fd-step-t{font-size:14px;color:var(--dark);opacity:.82}
.fd-step-t b{display:block;font-weight:600;opacity:1;margin-bottom:2px}

/* Form card (shared shell for login "Welcome back" + signup) */
.fd-card{background:var(--cream);border:1px solid var(--border);border-radius:22px;
  padding:28px 26px;box-shadow:0 10px 30px rgba(61,43,31,.06)}
.fd-card-h2{font-size:24px;margin:0 0 4px;color:var(--dark)}
.fd-sub{font-size:14px;color:var(--taupe);margin:0 0 18px}
.fd-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fd-field label{font-size:13px;font-weight:600;color:var(--dark)}
.fd-input{width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:13px;
  background:var(--white);font:inherit;font-size:15px;color:var(--dark);min-height:48px}
.fd-input::placeholder{color:var(--taupe)}
.fd-input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px color-mix(in srgb,var(--rose) 45%,transparent)}
.fd-hint{font-size:12px;color:var(--taupe);margin:6px 0 0}
.fd-btn{width:100%;margin-top:6px;padding:14px 20px;border:none;border-radius:26px;
  background:var(--sage);color:var(--white);font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  min-height:52px}
.fd-btn:hover{filter:brightness(.96)}
.fd-switch{text-align:center;font-size:14px;color:var(--taupe);margin:16px 0 0}
.fd-switch button{background:none;border:none;padding:0;font:inherit;font-size:14px;font-weight:600;
  color:var(--sage);cursor:pointer;text-decoration:underline}
.fd-consent{font-size:11.5px;line-height:1.5;color:var(--taupe);margin:14px 0 0}
.fd-consent a,.fd-data-note a,.fd-faq a,.fd-footer a{color:var(--sage)}

/* authNote / authError keep their classes but are restyled to sit inside the card on-palette
   (no palette warning colour exists, so error leans on --rose, info on --sage). */
.fd-card .info-msg,.fd-card .error-msg{text-align:left;margin:0 0 16px;font-size:13px;border-radius:12px;
  padding:11px 14px}
.fd-card .info-msg{background:color-mix(in srgb,var(--sage) 18%,var(--white));color:var(--dark);
  border:1px solid color-mix(in srgb,var(--sage) 40%,transparent)}
.fd-card .error-msg{background:color-mix(in srgb,var(--rose) 30%,var(--white));color:var(--dark);
  border:1px solid color-mix(in srgb,var(--rose) 55%,transparent)}

.fd-data-note{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.5;
  color:var(--taupe);padding:2px 4px}
.fd-pip{flex:none;width:7px;height:7px;border-radius:50%;background:var(--sage);margin-top:5px}

/* Preview band — full-bleed dark */
.fd-preview{background:var(--dark);color:var(--cream);padding:56px 0}
.fd-section-label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sage);margin:0 0 12px}
.fd-label-dark{color:var(--rose)}
.fd-h3{font-size:clamp(24px,4.4vw,34px);line-height:1.12;letter-spacing:-.01em;margin:0 0 12px;color:var(--dark)}
.fd-h3-dark{color:var(--cream)}
.fd-lede-dark{font-size:16px;color:var(--cream);opacity:.78;max-width:46ch;margin:0 0 30px}
.fd-preview-grid{display:grid;gap:16px}
@media(min-width:760px){.fd-preview-grid{grid-template-columns:1fr 1fr;align-items:start}}
.fd-app-card{background:color-mix(in srgb,var(--cream) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--cream) 16%,transparent);border-radius:18px;padding:20px 22px}
.fd-app-light{background:var(--cream);border-color:transparent;color:var(--dark)}
.fd-kicker{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--rose);margin:0 0 8px}
.fd-dish{font-size:22px;margin:0 0 14px;color:var(--cream)}
.fd-chips{display:flex;flex-wrap:wrap;gap:8px}
.fd-chip{font-size:12px;font-weight:600;padding:6px 12px;border-radius:16px;
  background:color-mix(in srgb,var(--cream) 12%,transparent);color:var(--cream)}
.fd-chip-safe{background:var(--sage);color:var(--white)}
.fd-cat{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--taupe);
  margin:0 0 12px}
.fd-row{display:flex;gap:11px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--border)}
.fd-row:first-of-type{border-top:none}
.fd-box{flex:none;width:19px;height:19px;border-radius:6px;border:1.5px solid var(--taupe);margin-top:1px}
.fd-box-on{background:var(--sage);border-color:var(--sage);position:relative}
.fd-box-on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:12px;font-weight:700}
.fd-item{font-size:14px;color:var(--dark)}
.fd-item small{display:block;font-size:12px;color:var(--taupe);margin-top:2px}
.fd-row-done .fd-item{color:var(--taupe);text-decoration:line-through}

/* USP grid */
.fd-usps{padding:56px 0}
.fd-usp-grid{display:grid;gap:18px;margin-top:26px}
@media(min-width:560px){.fd-usp-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.fd-usp-grid{grid-template-columns:repeat(3,1fr)}}
.fd-usp{background:var(--cream);border:1px solid var(--border);border-radius:18px;padding:22px 22px 24px}
.fd-tag{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sage);
  margin:0 0 10px}
.fd-h4{font-size:19px;line-height:1.2;margin:0 0 10px;color:var(--dark)}
.fd-usp p:last-child{font-size:14px;color:var(--dark);opacity:.82;margin:0}

/* Beta terms */
.fd-terms{padding:20px 0 56px}
.fd-terms-inner{display:grid;gap:28px}
@media(min-width:860px){.fd-terms-inner{grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}}
.fd-terms-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.fd-terms-list li{display:flex;gap:13px;align-items:flex-start}
.fd-mark{flex:none;width:20px;height:20px;border-radius:50%;background:var(--rose);margin-top:2px}
.fd-terms-list b{display:block;font-size:15px;font-weight:600;color:var(--dark);margin-bottom:3px}
.fd-d{font-size:14px;color:var(--dark);opacity:.78}

/* FAQ */
.fd-faq{padding:20px 0 56px}
.fd-faq details{border-top:1px solid var(--border);padding:0}
.fd-faq details:last-of-type{border-bottom:1px solid var(--border)}
.fd-faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-size:16px;font-weight:600;color:var(--dark)}
.fd-faq summary::-webkit-details-marker{display:none}
.fd-faq summary::after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;color:var(--sage);line-height:1}
.fd-faq details[open] summary::after{content:'–'}
.fd-faq details p{margin:0 0 18px;font-size:14px;color:var(--dark);opacity:.82;max-width:60ch}

/* Closing CTA */
.fd-close-cta{background:var(--cream);border-top:1px solid var(--border);padding:56px 0;text-align:center}
.fd-close-cta p{font-size:16px;color:var(--dark);opacity:.82;margin:0 0 22px}
.fd-btn-inline{display:inline-block;padding:15px 34px;border:none;border-radius:28px;background:var(--sage);
  color:var(--white);font:inherit;font-size:15px;font-weight:700;cursor:pointer;min-height:52px}
.fd-btn-inline:hover{filter:brightness(.96)}

/* Footer */
.fd-footer{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;
  padding:26px 0 40px;border-top:1px solid var(--border);font-size:13px;color:var(--taupe)}
.fd-footer nav{display:flex;gap:20px;flex-wrap:wrap}

/* Accessibility: visible keyboard focus on every control */
.fd-root a:focus-visible,.fd-root button:focus-visible,.fd-root summary:focus-visible,
.fd-input:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:6px}

/* Honour reduced-motion: no transitions, no smooth scroll for anyone who asks for stillness */
@media(prefers-reduced-motion:reduce){
  .fd-root,.fd-root *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ── SELF-HOSTED FONT: INSTRUMENT SERIF (GDPR — no Google font requests) ── */
/* Files live at /fonts/instrument-serif/ (committed in-repo); paths are relative to this stylesheet at
   /css/app.css, so ../fonts/… resolves to /fonts/…. The style/subset → file map and the unicode-ranges
   are taken verbatim from fonts/instrument-serif/google-source.css (Google's own output); only the src
   URLs are rewritten to the LOCAL files — no gstatic URL is referenced, so nothing is fetched from
   fonts.googleapis.com / fonts.gstatic.com. Instrument Serif ships weight 400 only (regular + italic),
   so both @font-face blocks declare font-weight:400. Danish æ ø å (U+00E6/00F8/00E5) fall in the latin
   subset (U+0000–00FF), covered by the latin faces below. font-display:swap keeps text visible while the
   woff2 loads. */
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjnTLgNs.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif/jizBRFtNs2ka5fXjeivQ4LroWlx-6zsTjnTLgNuZ5w.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjjH7Motmp5g.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjgn7Motmp5r61.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* One new token — the palette variables are unchanged. */
:root{--font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;}

/* ── SIGN-IN / RESET (short returning-parent screens) ── */
/* Sign-in, reset-request and reset-sent share one quiet shell (authShell in auth.js) — deliberately NOT
   the front door: a returning parent gets a header, a vertically centred ~400px stage and a short footer,
   none of the acquisition sections. It lives INSIDE #app's 430px frame in normal flow (no position:fixed),
   so header/footer pin, the stage centres and scrolls if a small screen + keyboard shrink it, and focused
   inputs don't fight the iOS keyboard. Built on the live tokens (page --light, card --cream, inputs
   --white + --border, accents --sage/--rose/--taupe); h1 and wordmark are Instrument Serif at weight 400
   (--font-serif — the face has no bold); everything else stays on Inter (--font). */
.si-root{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--light);color:var(--dark)}
.si-root *{box-sizing:border-box}

/* Serif (Instrument Serif, 400) — headlines + wordmark only */
.si-h1,.si-wordmark,.si-check-h{font-family:var(--font-serif);font-weight:400}

/* Header */
.si-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px}
.si-wordmark{display:inline-flex;align-items:center;gap:9px;font-size:19px;letter-spacing:-.01em;color:var(--dark)}
.si-dot{width:11px;height:11px;border-radius:50%;background:var(--sage);flex:none}
.si-signin{display:inline-flex;align-items:center;gap:10px}
.si-new{font-size:13px;color:var(--taupe)}
@media(max-width:640px){.si-new{display:none}}
.si-ghost{background:transparent;border:1.5px solid var(--border);color:var(--dark);border-radius:22px;
  padding:8px 16px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.si-ghost:hover{border-color:var(--sage)}

/* Centred stage — the whole point is that it's short */
.si-stage{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;align-items:center;justify-content:center;padding:20px 22px}
.si-col{width:100%;max-width:400px;margin:0 auto}
.si-h1{font-size:clamp(34px,9vw,42px);line-height:1.08;letter-spacing:-.015em;text-align:center;margin:0 0 8px;color:var(--dark)}
.si-sub{font-size:15px;color:var(--taupe);text-align:center;margin:0 0 22px}

/* Card */
.si-card{background:var(--cream);border:1px solid var(--border);border-radius:20px;padding:28px 26px 24px;
  box-shadow:0 10px 30px rgba(61,43,31,.06)}
.si-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.si-field label{font-size:13px;font-weight:600;color:var(--dark)}
.si-input{width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:12px;background:var(--white);
  font:inherit;font-size:15px;color:var(--dark);min-height:48px}
.si-input::placeholder{color:var(--taupe)}
.si-input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px color-mix(in srgb,var(--rose) 45%,transparent)}
.si-forgot{text-align:right;margin:2px 0 14px}
.si-link{background:none;border:none;padding:0;font:inherit;font-size:12.5px;color:var(--taupe);
  text-decoration:underline;cursor:pointer}
.si-btn{width:100%;padding:14px 20px;border:none;border-radius:14px;background:var(--sage);color:var(--white);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;min-height:50px}
.si-btn:hover{filter:brightness(.96)}
.si-btn:disabled{opacity:.6;cursor:default;filter:none}
.si-divider{height:1px;background:var(--border);margin:18px 0}
.si-switch{text-align:center;font-size:14px;color:var(--taupe);margin:0}
.si-switch button{background:none;border:none;padding:0;font:inherit;font-size:14px;font-weight:600;
  color:var(--sage);cursor:pointer;text-decoration:underline}

/* Sent confirmation — centred card contents */
.si-card-center{text-align:center}
.si-check{width:44px;height:44px;border-radius:50%;background:var(--sage);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;margin:0 auto 16px}
.si-check-h{font-size:28px;line-height:1.15;margin:0 0 10px;color:var(--dark)}
.si-sub-center{text-align:center;margin:0 0 20px}
.si-card-center .si-switch{margin-top:4px}

/* authNote / authError inside the card, on-palette (error leans on --rose, info on --sage) */
.si-card .info-msg,.si-card .error-msg{text-align:left;margin:0 0 16px;font-size:13px;border-radius:12px;padding:11px 14px}
.si-card .info-msg{background:color-mix(in srgb,var(--sage) 18%,var(--white));color:var(--dark);
  border:1px solid color-mix(in srgb,var(--sage) 40%,transparent)}
.si-card .error-msg{background:color-mix(in srgb,var(--rose) 30%,var(--white));color:var(--dark);
  border:1px solid color-mix(in srgb,var(--rose) 55%,transparent)}

/* Footer */
.si-footer{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;
  padding:16px 22px calc(env(safe-area-inset-bottom,0px) + 18px);font-size:12.5px;color:var(--taupe)}
.si-footer a{color:var(--taupe);text-decoration:underline}
.si-footer nav{display:flex;gap:6px}

/* Accessibility: visible keyboard focus */
.si-root a:focus-visible,.si-root button:focus-visible,.si-input:focus-visible{outline:2px solid var(--rose);
  outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.si-root,.si-root *{transition:none!important;animation:none!important}}