/* ==========================================================================
   Feast — Title-specific styles (the nutrition / weekly menu section).
   Design tokens and generic shared components (topbar, card, btn, sheet,
   toast, seg, section-label, chip, empty-state, attn-status-pill) live in
   the shell's own stylesheet, not here. Two deliberate cross-Title reuses,
   both Titles' CSS is always loaded together so this is sharing, not a
   hidden dependency:
     - The day editor sheet's "add a protein / add a carb" tap-to-pick
       lists reuse Beast's grouped .mini-beast-* classes.
     - The week builder's drag-and-drop (palette pills you drag onto a day,
       and the days themselves) reuses Beast's weekly-schedule classes --
       .sched-day / .sched-day-head / .sched-day-name / .sched-day-body /
       .sched-chip / .sched-chip-drag / .sched-ghost / .drag-over /
       .dragging, all defined once in beast.css -- so building this week's
       dinners *looks* and *feels* like scheduling a Beast exercise,
       because it's the same gesture. Only the few bits that are actually
       different about a Feast pill (the protein/carb color accent, the
       small remove "x", the palette's own layout) are added below.
   ========================================================================== */

/* ---------- Home: "create my week" call to action ---------- */
.feast-cta-card{padding:28px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;}
.feast-cta-card .glyph{color:var(--text-faint); margin-bottom:2px;}
.feast-cta-card h2{margin:0; font-size:22px;}
.feast-cta-card p{margin:0 0 6px; font-size:15.5px; color:var(--text-muted); line-height:1.45;}

/* ---------- Shredfest meter (inside the "create/new week" sheet) ---------- */
.feast-meter-intro{font-size:15px; color:var(--text-muted); line-height:1.45; margin:0 0 14px;}
.feast-meter-seg{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.feast-meter-seg button{
  padding:13px 10px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text); font-weight:700; font-size:14.5px; text-align:center; cursor:pointer; line-height:1.25;
}
.feast-meter-seg button.active{background:var(--accent-100); border-color:var(--accent-500); color:var(--accent-700);}
.feast-meter-seg button:active{transform:scale(0.98);}
.feast-meter-desc{font-size:14.5px; color:var(--text-muted); text-align:center; margin:12px 0 4px;}
.feast-meter-warn{font-size:13.5px; color:var(--text-faint); text-align:center; margin:10px 0 0;}

/* ---------- Week builder: days, and the day editor sheet's pick lists ----------
   .sched-day / .sched-day-head / .sched-day-name / .sched-day-body /
   .sched-chip / .sched-chip-drag / .sched-ghost / .drag-over / .dragging
   all come from beast.css -- see the file header. The full add-protein /
   add-carb lists (.mini-beast-*, also from beast.css) only ever appear
   inside the day editor sheet now, not on the main page -- the main page
   shows only the user's current 7 days, so the "library" stays in the
   sheet and the day itself stays simple (same split Beast keeps between
   its own library and its today view). Everything here is just the
   Feast-specific layer on top: what makes a protein pill look different
   from a carb pill, and the small remove "x" on a placed pill. */
.feast-pill.is-protein{border-left:3px solid var(--accent-500);}
.feast-pill.is-carb{border-left:3px solid var(--warning);}
.sched-day-edit-hint{margin-left:auto; color:var(--text-faint); display:flex; flex-shrink:0;}
.sched-chip-remove{
  width:18px; height:18px; border-radius:50%; flex-shrink:0; border:none; margin-left:1px;
  background:var(--surface-3); color:var(--text-faint); display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.sched-chip-remove:active{background:var(--border-strong);}
.sched-empty{font-size:14.5px; color:var(--text-faint); padding:11px 6px;}

/* ---------- Shopping list ---------- */
.feast-fats-note{display:flex; align-items:flex-start; gap:8px; font-size:14.5px; color:var(--text-muted); line-height:1.4;}
.feast-shop-list{padding:2px 4px;}
.feast-shop-row{padding:13px 12px; display:flex; align-items:center; gap:12px; cursor:pointer;}
.feast-shop-row:active{background:var(--surface-2);}
.feast-shop-check{
  width:24px; height:24px; border-radius:50%; flex-shrink:0; border:1.5px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.feast-shop-row.is-checked .feast-shop-check{background:var(--success); border-color:var(--success);}
.feast-shop-label{flex:1; font-weight:600; font-size:16px;}
.feast-shop-row.is-checked .feast-shop-label{color:var(--text-faint); text-decoration:line-through;}
.feast-shop-count{font-size:14px; color:var(--text-faint); flex-shrink:0;}
.feast-flavor-list{display:flex; flex-wrap:wrap; gap:8px;}
.feast-flavor-chip{border:1px solid var(--border); cursor:pointer;}
.feast-flavor-chip.is-checked{background:var(--success-100); color:var(--success); border-color:transparent;}

/* ---------- "Your Foods" availability list ---------- */
/* Same row shape as .feast-shop-row, but inverted semantics on purpose:
   here the default (no modifier) IS the normal/available state -- a food
   starts checked/available, and .is-off is what a user taps it into, not
   the other way around. */
.food-pref-row{padding:13px 12px; display:flex; align-items:center; gap:12px; cursor:pointer;}
.food-pref-row:active{background:var(--surface-2);}
.food-pref-check{
  width:24px; height:24px; border-radius:50%; flex-shrink:0; border:1.5px solid var(--success);
  background:var(--success); display:flex; align-items:center; justify-content:center; color:#fff;
}
.food-pref-row.is-off .food-pref-check{background:transparent; border-color:var(--border-strong);}
.food-pref-label{flex:1; font-weight:600; font-size:16px;}
.food-pref-row.is-off .food-pref-label{color:var(--text-faint); text-decoration:line-through;}

/* ---------- My Saved Menus ---------- */
.saved-menu-row{padding:13px 12px; display:flex; align-items:center; gap:10px;}
.saved-menu-name{flex:1; font-weight:600; font-size:16px; cursor:pointer;}
.saved-menu-name:active{opacity:0.7;}
.saved-menu-meta{font-size:13px; color:var(--text-faint); margin-top:2px;}

/* ---------- v102: How FEAST works (intro) ---------- */
.feast-intro .den-logo svg{width:26px; height:26px; margin-bottom:3px;}
.feast-mock{padding:4px 14px; pointer-events:none;}
.feast-mock .sched-day:last-child{border-bottom:0;}
.feast-mock-day.is-editing .sched-day-head{color:var(--accent-500);}
.feast-mock-day.is-target .sched-day-body{border:1.5px dashed var(--accent-400); border-radius:12px;}
.feast-key{display:flex; justify-content:center; gap:16px; font-size:13px; color:var(--text-muted); font-weight:600;}
.feast-key span{display:inline-flex; align-items:center; gap:6px;}
.feast-key i{display:inline-block; width:14px; height:10px; border-radius:3px; background:var(--surface-2); border-left:3px solid var(--accent-500);}
.feast-key i.is-carb{border-left-color:var(--warning);}
.feast-howto{display:block; margin:10px auto 0; padding:8px 12px; border:0; background:none; font:inherit; font-size:14.5px; font-weight:700; color:var(--accent-500); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.feast-guide-btn svg{vertical-align:-3px; margin-right:4px;}

/* ---------- v102: Menu items & categories ---------- */
.feast-guide{gap:12px;}
.feast-guide-lead{margin:0; font-size:16px; line-height:1.45; color:var(--text);}
.feast-guide .feast-key{justify-content:flex-start;}
.feast-guide-small{margin:-4px 0 0; font-size:14px; line-height:1.4; color:var(--text-muted);}
.feast-guide-card{padding:14px; display:flex; flex-direction:column; gap:10px; border-left:4px solid var(--accent-500);}
.feast-guide-card.is-tier-2{border-left-color:var(--accent-400);}
.feast-guide-card.is-tier-3{border-left-color:var(--warning);}
.feast-guide-card.is-tier-4{border-left-color:var(--danger);}
.feast-guide-card.is-carb{border-left-color:var(--warning);}
.feast-guide-h{display:flex; align-items:flex-start; gap:10px;}
.feast-guide-h b{display:block; font-size:16.5px; line-height:1.25;}
.feast-guide-h div span{display:block; font-size:14px; color:var(--text-muted); margin-top:2px;}
.feast-guide-n{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; background:var(--accent-100); color:var(--accent-600);}
.feast-guide-n.is-carb{background:var(--warning-100); color:var(--warning);}
.feast-guide-chips{display:flex; flex-wrap:wrap; gap:6px;}
.feast-guide-chip{font-size:14px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text);}
.feast-guide-chip.is-off{opacity:.45; text-decoration:line-through;}
.feast-guide-meter{margin:0; font-size:13px; color:var(--text-muted);}
.feast-guide-note{margin:0; font-size:15px; line-height:1.45; color:var(--text);}
/* v103: Your foods page */
.feast-cat-link{margin:2px 0 0; padding:6px 0; text-align:left;}
.feast-tier-short{margin:-4px 0 8px; font-size:14px; color:var(--text-muted);}

/* ---------- v104: Your table ---------- */
.ft-card{display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; margin:0 0 14px; text-align:left; font:inherit; color:var(--text); cursor:pointer; border:1px solid var(--border);}
.ft-card-ic{flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--accent-100); color:var(--accent-500);}
.ft-card-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ft-card-h{font-weight:800; font-size:16px;}
.ft-card-s{font-size:14px; color:var(--text-muted); line-height:1.35;}
.ft-card-s b{color:var(--text);}
.ft-card > svg{color:var(--text-faint); flex:none;}
.ft-night{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:2px 2px 10px; font-size:13.5px; color:var(--text-muted);}
.ft-night b{color:var(--text); font-weight:800;}
.ft-night span{font-size:13px;}
.ft-main{gap:12px;}
.ft-lead{margin:0; font-size:15.5px; line-height:1.45; color:var(--text-muted);}
.ft-list{padding:4px 12px;}
.ft-person{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border);}
.ft-person:last-child{border-bottom:0;}
.ft-person.is-off .ft-person-t b,.ft-person.is-off .ft-person-t span{opacity:.5;}
.ft-eat{flex:none; width:28px; height:28px; border-radius:8px; border:2px solid var(--border-strong); background:var(--surface); color:#fff; display:grid; place-items:center; cursor:pointer; padding:0;}
.ft-eat.is-on{background:var(--success); border-color:var(--success);}
.ft-person-t{flex:1; min-width:0; text-align:left; border:0; background:none; padding:0; font:inherit; color:var(--text); cursor:pointer; display:flex; flex-direction:column; gap:2px;}
.ft-person-t b{font-size:16.5px;}
.ft-person-t b i{font-style:normal; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-500); background:var(--accent-100); border-radius:999px; padding:2px 7px; margin-left:4px; vertical-align:2px;}
.ft-person-t span{font-size:13.5px; color:var(--text-muted); line-height:1.35;}
.ft-person-r{flex:none; font-weight:800; font-size:14px; color:var(--text);}
.ft-totals{padding:14px; display:flex; flex-direction:column; gap:10px;}
.ft-big b{font-size:28px; font-weight:800; display:block; line-height:1.1;}
.ft-big span{font-size:14px; color:var(--text-muted);}
.ft-sub{font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted);}
.ft-shares{display:flex; flex-direction:column; gap:6px;}
.ft-share{position:relative; display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-radius:10px; background:var(--surface-2); overflow:hidden; font-size:14.5px;}
.ft-share span{position:absolute; left:0; top:0; bottom:0; background:var(--accent-100); z-index:0;}
.ft-share b,.ft-share i{position:relative; z-index:1; font-style:normal;}
.ft-share i{font-weight:800;}
.ft-eggs{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--text-muted);}
.ft-small{margin:0; font-size:14px; color:var(--text-muted); line-height:1.4;}
.ft-excard{padding:12px 14px; display:flex; flex-direction:column; gap:12px;}
.ft-ex-h{font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;}
.ft-chips{display:flex; flex-wrap:wrap; gap:6px;}
.ft-chip{display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:14px; font-weight:600; padding:6px 10px; border-radius:999px; border:1px dashed var(--border-strong); background:none; color:var(--text-muted); cursor:pointer;}
.ft-chip.is-on{border-style:solid; background:var(--surface-2); color:var(--text); cursor:default;}
.ft-chip.is-on button{border:0; background:none; color:var(--text-muted); font-size:16px; line-height:1; padding:0 0 0 2px; cursor:pointer;}
.ft-ex-new{display:flex; gap:6px;}
.ft-ex-new input{flex:1; min-width:0; font:inherit; font-size:16px; padding:9px 10px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text);}
.ft-ex-new select{flex:none; font:inherit; font-size:14px; padding:0 6px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text);}
.ft-ex-new .btn{flex:none; padding:0 14px;}
.ft-note{margin:0; font-size:13px; color:var(--text-faint, var(--text-muted)); text-align:center;}
.ft-hint{margin:6px 0 0; font-size:13.5px; color:var(--text-muted);}
.ft-main .btn svg{vertical-align:-3px; margin-right:4px;}
/* shopping list: amounts and "Have it" */
.feast-shop-help{margin:0 0 4px; font-size:14px; color:var(--text-muted);}
.feast-shop-amt{display:block; font-size:13.5px; font-weight:700; color:var(--accent-600); margin-top:1px;}
.feast-have{flex:none; font:inherit; font-size:13px; font-weight:700; padding:6px 10px; border-radius:999px; border:1px dashed var(--border-strong); background:none; color:var(--text-muted); cursor:pointer;}
.feast-have.is-on{border-style:solid; background:var(--success-100); color:var(--success); border-color:transparent;}
.feast-shop-row.is-have .feast-shop-label{color:var(--text-faint);}

/* ---------- v109: who's cooking, send, print, a shared menu ---------- */
.feast-cook{ display:inline-flex; align-items:center; gap:6px; margin:0 0 6px; padding:5px 11px; border-radius:999px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  border:1px dashed var(--border-strong); background:none; color:var(--text-muted); }
.feast-cook svg{ flex:none; }
.feast-cook.is-set{ border-style:solid; border-color:var(--accent-400); background:var(--accent-100); color:var(--text); }
.feast-cook b{ font-weight:800; }
.feast-cook-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.feast-cook-opt{ font:inherit; font-size:15.5px; font-weight:700; padding:10px 16px; border-radius:999px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--text); cursor:pointer; }
.feast-cook-opt.is-on{ border-color:var(--accent-500); background:var(--accent-100); }
.feast-cook-opt i{ font-style:normal; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-500); margin-left:4px; }
.feast-cook-other{ display:flex; gap:8px; }
.feast-cook-other input{ flex:1; min-width:0; }
.feast-cook-other .btn{ flex:none; padding:0 16px; }
.feast-cook-hint{ margin:8px 0 0; font-size:13.5px; color:var(--text-muted); line-height:1.4; }
.feast-send-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
.feast-send-row .btn{ min-width:0; padding:0 10px; font-size:15px; }
.feast-send-row .btn svg{ vertical-align:-3px; margin-right:4px; }
/* a shared menu */
.feast-imp{ gap:12px; padding-top:14px; }
.feast-imp-lead{ margin:0; font-size:16px; line-height:1.45; }
.feast-imp-list{ list-style:none; margin:0; padding:4px 14px; }
.feast-imp-day{ padding:10px 0; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
.feast-imp-day:last-child{ border-bottom:0; }
.feast-imp-h{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.feast-imp-h span{ font-size:13.5px; font-weight:700; color:var(--accent-600); }
.feast-imp-items{ display:flex; flex-wrap:wrap; gap:6px; }
.feast-imp-pill{ font-size:14px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface-2); border-left:3px solid var(--accent-500); }
.feast-imp-pill.is-carb{ border-left-color:var(--warning); }
/* print the menu */
.fp-tools{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.fp-check{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; }
.fp-tools .btn svg{ vertical-align:-3px; margin-right:4px; }
.feast-print{ background:#fff; color:#111; border:1px solid var(--border); border-radius:14px; padding:18px 16px; overflow-x:auto; }
.feast-print h1{ margin:0 0 12px; font-size:22px; color:#111; }
.feast-print h2{ margin:18px 0 8px; font-size:18px; color:#111; }
.feast-print h3{ margin:0 0 4px; font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:#444; }
.fp-tbl{ width:100%; border-collapse:collapse; font-size:14.5px; }
.fp-tbl th{ text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:#555; border-bottom:2px solid #222; padding:6px 8px; }
.fp-tbl td{ padding:8px; border-bottom:1px solid #ccc; vertical-align:top; color:#111; }
.fp-tbl td:nth-child(4){ white-space:nowrap; }
@media (max-width:420px){ .fp-tbl{ font-size:13.5px; } .fp-tbl th, .fp-tbl td{ padding:6px 5px; } }
.fp-note{ margin:10px 0 0; font-size:13.5px; color:#333; line-height:1.4; }
.fp-shop{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px 18px; }
.fp-shop ul{ list-style:none; margin:0; padding:0; }
.fp-shop li{ display:flex; align-items:center; gap:8px; padding:3px 0; font-size:14px; color:#111; }
.fp-shop li i{ font-style:normal; color:#555; margin-left:auto; }
.fp-box{ flex:none; width:12px; height:12px; border:1.5px solid #333; border-radius:2px; }
@media print{
  html.is-printing-menu body *{ visibility:hidden !important; }
  html.is-printing-menu .feast-print, html.is-printing-menu .feast-print *{ visibility:visible !important; }
  html.is-printing-menu .feast-print{ position:absolute; left:0; top:0; width:100%; border:0; border-radius:0; padding:0; }
  html.is-printing-menu .fp-tbl{ min-width:0; }
}