/* ============================================================
   GyST — meals
   Loaded after app.css, so it inherits every token from there.
   ============================================================ */

/* Four tabs, so they get the whole width of the phone rather than
   huddling in the middle at a smaller size than everything else.
   flex:1 1 auto rather than flex:1 — equal columns would give "Plan" as
   much room as "Freezer" and squeeze the long one for no reason. */
.seg.four{display:flex;width:100%;}
.seg.four button{
  flex:1 1 auto;min-width:0;
  padding:9px 6px;
  font-size:var(--t-sm);font-weight:600;
  white-space:nowrap;
}

/* The day-after nudge. One question, dismissable, never asked twice. */
.nudge{
  border:1px solid color-mix(in oklab, var(--accent) 38%, var(--border));
  background:color-mix(in oklab, var(--accent) 7%, var(--surface));
  border-radius:var(--r);padding:12px 13px;margin-bottom:12px;
}
.nudge .q{font-size:var(--t-sm);font-weight:600;margin-bottom:2px;}
.nudge .sub{font-size:var(--t-xs);color:var(--ink-3);margin-bottom:10px;}
.rate{display:flex;gap:4px;}
.rate button{
  flex:1;aspect-ratio:1;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);background:var(--surface);
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:var(--t-xs);color:var(--ink-2);
}
.rate button:hover{
  border-color:var(--accent);color:var(--accent);
  background:color-mix(in oklab, var(--accent) 10%, var(--surface));
}
.nudge .skip{margin-top:9px;font-size:var(--t-xs);color:var(--ink-3);font-weight:600;}
.nudge .skip:hover{color:var(--ink);}

/* ---- the week ---- */
.weekbar{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--border);}
.weekbar .title{font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;flex:1;}
.weekbar .arrow{
  width:28px;height:28px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;border:1px solid var(--border);color:var(--ink-2);
}
.weekbar .arrow:hover{border-color:var(--border-strong);color:var(--ink);}
.weekbar .arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.day{display:flex;gap:11px;padding:10px 13px;border-top:1px solid var(--border);align-items:center;}
.day:first-of-type{border-top:0;}
.day.is-today{background:color-mix(in oklab, var(--accent) 6%, var(--surface));}
.day.is-past{opacity:.72;}
.daycol{width:calc(38px * var(--fs));flex:none;text-align:center;}
.daycol .dw{font-size:var(--t-2xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
.daycol .dn{font-family:var(--font-display);font-size:var(--t-md);font-weight:600;line-height:1.15;}
.day.is-today .daycol .dn{color:var(--accent);}

.meal{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.thumb{
  width:calc(44px * var(--fs));aspect-ratio:1;flex:none;
  border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--border);display:grid;place-items:center;overflow:hidden;
}
.thumb .play{width:15px;height:15px;fill:#fff;opacity:.95;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
.thumb[data-src="youtube"]{background:linear-gradient(135deg,#c4302b,#7d1a17);}
.thumb[data-src="tiktok"]{background:linear-gradient(135deg,#25F4EE,#1b1b1b 55%,#FE2C55);}
.thumb[data-src="instagram"]{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF);}
.thumb[data-src="freezer"]{background:color-mix(in oklab, var(--accent) 16%, var(--surface));}
/* An ordinary web page has no brand to borrow, so it stays quiet and
   lets the host name in the badge do the identifying. */
.thumb[data-src="link"]{background:var(--surface-2);border-style:dashed;}
.thumb .glyph{width:19px;height:19px;stroke:var(--ink-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* ---- dragging a dinner to another day ----
   touch-action must be none on whatever you grab or the browser claims
   the gesture as a scroll before the first pointermove lands. That is
   why the handle is the thumbnail and not the whole row: the rest of
   the row still scrolls the week normally. */
.thumb[data-grab]{cursor:grab;touch-action:none;position:relative;}
.thumb[data-grab]:active{cursor:grabbing;}
.thumb .grip{
  position:absolute;inset:auto 0 2px 0;display:flex;justify-content:center;
  opacity:0;transition:opacity .12s ease;pointer-events:none;
}
.thumb .grip svg{width:14px;height:9px;fill:#fff;stroke:none;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.65));}
.thumb[data-src=""] .grip svg,
.thumb[data-src="freezer"] .grip svg,
.thumb[data-src="link"] .grip svg{fill:var(--ink-3);filter:none;}
.day:hover .thumb[data-grab] .grip{opacity:.9;}
/* No hover on a phone, so the grip is always faintly there instead. */
@media (hover:none){.thumb[data-grab] .grip{opacity:.55;}}

.drag-ghost{
  position:fixed;z-index:60;pointer-events:none;
  padding:8px 10px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--accent);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transform:rotate(-1.5deg);opacity:.96;
}
.day.is-dragging{opacity:.35;}
.day.is-drop{
  background:color-mix(in oklab, var(--accent) 13%, var(--surface));
  box-shadow:inset 3px 0 0 var(--accent);
}
.day.is-drop .addday{border-color:var(--accent);color:var(--accent);}
/* Landing on a day that is already taken swaps the two. Say so before
   the drop, not after. */
.day.is-drop.is-swap::after{
  content:"swap";position:absolute;right:13px;
  font-size:var(--t-3xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);
}
.day{position:relative;}
body.is-dragging-meal{cursor:grabbing;user-select:none;}
body.is-dragging-meal .day{transition:background .1s ease;}

.meal-main{flex:1;min-width:0;}
.meal-name{font-size:var(--t-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.meal-meta{display:flex;align-items:center;gap:5px;margin-top:2px;flex-wrap:wrap;}

.badge{
  font-size:var(--t-3xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border-radius:var(--r-sm);padding:1px 5px;border:1px solid var(--border-strong);color:var(--ink-3);
}
.badge[data-src="youtube"]{border-color:#c4302b;color:#c4302b;}
.badge[data-src="instagram"]{border-color:#DD2A7B;color:#DD2A7B;}
/* Host names are lowercase and can run long; let this one shrink and
   ellipsise rather than shove the score chip off the row. */
.badge[data-src="link"]{
  text-transform:none;letter-spacing:0;
  max-width:calc(150px * var(--fs));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.badge.left{border-style:dashed;}
.badge.frozen{border-color:var(--accent);color:var(--accent);}

/* Score colours reuse the family palette rather than inventing a third
   green and red, so the app keeps one set of semantic colours. */
.score{
  display:inline-flex;align-items:baseline;gap:1px;
  font-family:var(--font-mono);font-size:var(--t-2xs);font-weight:600;
  border-radius:var(--r-sm);padding:1px 5px;border:1px solid var(--tone);color:var(--tone);
}
.score .of{opacity:.6;font-weight:400;}
.score[data-tone="good"]{--tone:var(--p-flynn);}
.score[data-tone="ok"]{--tone:var(--p-tavi);}
.score[data-tone="poor"]{--tone:var(--p-jenn);}

.addday{
  flex:1;display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:var(--t-sm);
  border:1px dashed var(--border-strong);border-radius:var(--r-sm);padding:11px 10px;
}
.addday:hover{color:var(--accent);border-color:var(--accent);background:color-mix(in oklab, var(--accent) 5%, transparent);}
.addday svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;flex:none;}
.day.is-leftover .meal-name{color:var(--ink-2);}
.day.is-leftover .thumb{border-style:dashed;}

.kebab{width:26px;height:26px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-3);}
.kebab:hover{background:var(--surface-2);color:var(--ink);}
.kebab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;}

/* ---- freezer + lists ---- */
.subhead{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--surface-2);border-top:1px solid var(--border);}
.subhead .t{font-size:var(--t-2xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);}
.subhead .grow{flex:1;}
.subhead .n{font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--ink-3);}

.age{display:inline-flex;align-items:center;gap:5px;font-weight:600;}
.age i{width:7px;height:7px;border-radius:var(--r-pill);background:var(--tone);flex:none;}
.age[data-tone="fresh"]{--tone:var(--p-flynn);color:var(--p-flynn);}
.age[data-tone="ageing"]{--tone:var(--p-tavi);color:var(--p-tavi);}
.age[data-tone="old"]{--tone:var(--p-jenn);color:var(--p-jenn);}
.dinners{font-weight:600;color:var(--ink-2);}
.portions{color:var(--ink-3);}
.planned{color:var(--accent);font-weight:600;}

.insp{display:flex;gap:11px;padding:11px 13px;border-top:1px solid var(--border);align-items:flex-start;}
.insp:first-of-type{border-top:0;}
.insp .thumb{width:calc(52px * var(--fs));}
.insp-note{font-size:var(--t-xs);color:var(--ink-3);margin-top:3px;line-height:1.5;}
.insp-actions{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;}

.surprise{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 13px;border-top:1px solid var(--border);
  color:var(--accent);font-size:var(--t-sm);font-weight:600;
}
.surprise:hover{background:color-mix(in oklab, var(--accent) 7%, transparent);}
.surprise svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.surprise .d{font-weight:400;color:var(--ink-3);font-size:var(--t-xs);display:block;}

.mealbar{display:flex;gap:7px;padding:11px 13px;border-top:1px solid var(--border);}
.mealbar input{
  flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:9px 10px;font-size:var(--t-sm);
}
.mealbar input:focus{outline:none;border-color:var(--accent);}
.mealbar .narrow{width:calc(58px * var(--fs));flex:none;text-align:center;}

/* ---- sheets ---- */
.choices{display:flex;flex-direction:column;gap:8px;}
.choice{display:flex;align-items:center;gap:11px;width:100%;border:1px solid var(--border-strong);border-radius:var(--r);padding:11px 12px;}
.choice:hover{border-color:var(--accent);background:color-mix(in oklab, var(--accent) 6%, transparent);}
.choice .ic{width:30px;height:30px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface-2);}
.choice .ic svg{width:16px;height:16px;stroke:var(--ink-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.choice .tx{flex:1;min-width:0;}
/* Both are spans, so they need blockifying or they run together as one
   sentence — and margin-top on an inline box does nothing at all. At the
   default text size the title happened to fill the line and the wrap hid
   it; turning the size up just moved the wrap point. */
.choice .t{display:block;font-size:var(--t-sm);font-weight:600;line-height:1.3;}
.choice .d{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:3px;line-height:1.45;}
.choice[data-danger="1"]:hover{border-color:var(--p-jenn);background:color-mix(in oklab, var(--p-jenn) 8%, transparent);}

.days{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
.daypick{border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:9px 10px;font-size:var(--t-sm);}
.daypick:hover{border-color:var(--accent);color:var(--accent);}
.daypick .sub{display:block;font-size:var(--t-2xs);color:var(--ink-3);margin-top:1px;}
.daypick[data-taken="1"]{opacity:.5;}
.daypick[data-suggested="1"]{border-color:var(--accent);background:color-mix(in oklab, var(--accent) 8%, transparent);}