/* ============================================================================
   Nutrition tracker — design system
   Direction (from the brief): consumer wellness. Calm, legible, generous
   spacing, ONE accent colour, system font stack, responsive to phone width,
   visible focus, reduced motion respected, dark mode by preference.

   The one idea this page is built around: a number that admits its own
   incompleteness. Every quantity is drawn as KNOWN (solid accent) + UNRECORDED
   (hatched), and the coverage sentence sits with the total, always. Hatch means
   "not recorded", never "zero". That is the whole visual language; nothing else
   in here is allowed to compete with it.
   ========================================================================= */

:root {
  color-scheme: light dark;

  --canvas:      #F1F3F1;
  --surface:     #FFFFFF;
  --surface-2:   #F7F9F7;
  --topbar-bg:   rgba(241, 243, 241, 0.88);

  --ink:         #131A18;
  --ink-2:       #4B5653;
  /* Measured, not guessed: at #6E7A77 this failed WCAG AA (4.0:1) against the
     canvas for 11–14px labels. #636F6C gives 4.68:1 on the canvas and 5.22:1 on
     a card, so small muted text is legible rather than merely quiet. */
  --ink-3:       #636F6C;
  --line:        #DCE2DE;
  --line-strong: #C3CCC7;

  --accent:        #1E6A54;
  --accent-strong: #14503F;
  --accent-tint:   #E3EFEA;
  --accent-line:   #B9D8CD;
  --on-accent:     #FFFFFF;

  --attention:      #8A5B00;
  --attention-ink:  #6E4800;
  --attention-tint: #FAF0DC;
  --attention-line: #E4CE9E;

  --hatch-bg:   #E9EEEB;
  --hatch-line: rgba(30, 106, 84, 0.22);
  --hatch: repeating-linear-gradient(135deg, var(--hatch-line) 0 5px, transparent 5px 10px);

  --focus: #1E6A54;

  /* The widget's send button puts a fixed #fff on --ag-accent, so the accent
     handed to it must stay dark enough for white text in both schemes. */
  --widget-accent: #1E6A54;

  /* Letter-spacing is a token because Arabic is a cursive script: any tracking
     pulls joined letterforms apart. Both tokens are zeroed for `ar` below, so no
     individual rule has to know which script it is styling. */
  --track-tight: -0.01em;
  --track-wide: 0.09em;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --radius: 12px;
  --radius-sm: 8px;
  --gutter: clamp(16px, 4vw, 40px);
  --shadow: 0 1px 2px rgba(19, 26, 24, 0.04);
}

/* ======================================================== Arabic and RTL ===
   The document carries `lang` and `dir`; these are the consequences that CSS
   has to state. Layout mirrors on its own because the sheet uses logical
   properties throughout — nothing in this block is a layout override. */

html[lang="ar"] {
  /* Platform Arabic faces only. A webfont from a CDN would be a third-party
     request that this page's CSP forbids outright, and a privacy leak in a
     health product, so the stack is whatever the system already has. */
  --font: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Arabic Typesetting",
          "Traditional Arabic", system-ui, sans-serif;
  /* Arabic carries less x-height than Latin at the same px, so the whole scale
     steps up. Every size in this sheet is in rem, so this one number moves it. */
  font-size: 17px;
  /* Cursive script: no tracking, in either direction. */
  --track-tight: 0;
  --track-wide: 0;
}

html[lang="ar"] body { line-height: 1.75; }

/* These two set their own leading; everything else inherits body's. */
html[lang="ar"] .day__title { line-height: 1.5; }
html[lang="ar"] .card__hint { line-height: 1.7; }

/* The hatch is the texture that means "unrecorded". Mirroring its diagonal in
   RTL keeps it running with the reading direction rather than against it. */
html[dir="rtl"] {
  --hatch: repeating-linear-gradient(45deg, var(--hatch-line) 0 5px, transparent 5px 10px);
}

/* NOTE: the ‹ and › chevrons are deliberately NOT mirrored here.
   U+2039/U+203A are Bidi_Mirrored characters, so the browser already renders
   them the other way round in RTL — which is the correct result: "previous day"
   sits on the right and points right, away from the date, exactly as it points
   left in LTR. Hand-mirroring them with scaleX(-1) double-mirrors and leaves
   both chevrons pointing inward, which is what an earlier version of this sheet
   did. The rule there is the opposite of the one for the "≥" qualifier, which
   is drawn as SVG (see render.mjs): relational symbols read as a picture of the
   familiar glyph, angle quotes read as punctuation and mirror with the text. */
.chev { display: inline-block; }

/* Nobody should see a frame of the wrong language laid out in the wrong
   direction. Language is applied by an external module (an inline snippet would
   need 'unsafe-inline' in the CSP), so the page stays hidden until that has run.
   The animation is the safety net: if the module never runs, the page appears
   after two seconds instead of staying blank. Under reduced motion the global
   0.01ms override fires it at once — a possible flash, but never hidden content. */
html:not([data-locale-ready]) body {
  visibility: hidden;
  animation: reveal-body 0ms linear 2s forwards;
}
@keyframes reveal-body { to { visibility: visible; } }

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:      #0E1413;
    --surface:     #161D1B;
    --surface-2:   #1B2422;
    --topbar-bg:   rgba(14, 20, 19, 0.86);

    --ink:         #E9EEEC;
    --ink-2:       #B4BFBB;
    --ink-3:       #8C9995;
    --line:        #2A3431;
    --line-strong: #3C4844;

    --accent:        #5FBF9F;
    --accent-strong: #86D4B8;
    --accent-tint:   #17332B;
    --accent-line:   #2C5A4A;
    --on-accent:     #08221A;

    --attention:      #D9AC5C;
    --attention-ink:  #EFCB8A;
    --attention-tint: #2E2617;
    --attention-line: #5A4A28;

    --hatch-bg:   #1D2624;
    --hatch-line: rgba(134, 212, 184, 0.24);

    --focus: #86D4B8;
    --widget-accent: #2C7F66;
    --shadow: none;
  }
}

/* ---------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select { font: inherit; color: inherit; }

a { color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; inset-inline-start: var(--gutter); top: -3rem; z-index: 30;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: var(--s2) var(--s4); text-decoration: none; font-weight: 600;
}
.skip:focus { top: var(--s2); }

/* --------------------------------------------------------------- shell --- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  max-width: 1160px; margin-inline: auto;
  padding: var(--s3) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; }

.brand__mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 5px var(--accent-tint);
  flex: 0 0 auto;
}

.brand__name { font-weight: 700; letter-spacing: var(--track-tight); }

.brand__user { color: var(--ink-3); font-size: 0.9375rem; }
.brand__user::before { content: "\00B7"; margin-inline-end: var(--s2); }

.dates { display: flex; align-items: center; gap: var(--s2); }

.dates__field input[type="date"] {
  width: auto; min-width: 9.5rem;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 8px 10px;
}

.iconbtn {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: 1.15rem; line-height: 1;
}
.iconbtn:hover { border-color: var(--ink-3); }

.topbar__controls {
  display: flex; align-items: center; gap: var(--s4);
  flex-wrap: wrap; justify-content: flex-end;
}

/* Language switch: both names are written in their own script, because someone
   looking for Arabic is looking for «العربية», not for the word "Arabic". */
.lang {
  display: inline-flex; flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px; overflow: hidden;
}

.lang__btn {
  background: none; border: 0;
  padding: 7px 12px;
  font: inherit; font-size: 0.8125rem; font-weight: 620;
  color: var(--ink-2); cursor: pointer;
  white-space: nowrap;
}
.lang__btn + .lang__btn { border-inline-start: 1px solid var(--line); }
.lang__btn:hover { background: var(--surface-2); color: var(--ink); }
.lang__btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.lang__btn[aria-pressed="true"]:hover { background: var(--accent-strong); }

main, .foot {
  max-width: 1160px; margin-inline: auto;
  padding-inline: var(--gutter);
}

main { padding-block: var(--s6) var(--s7); }

.foot {
  padding-bottom: var(--s7);
  color: var(--ink-3); font-size: 0.8125rem;
}

/* -------------------------------------------------------------- banner --- */

.banner {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin: 0;
  padding: var(--s3) var(--gutter);
  background: var(--attention-tint);
  color: var(--attention-ink);
  border-bottom: 1px solid var(--attention-line);
  font-size: 0.9375rem;
}
.banner__code {
  font-family: var(--mono); font-size: 0.75rem;
  border: 1px solid var(--attention-line); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap;
}
.banner__msg { flex: 1 1 18rem; min-width: 0; }
.banner__action { margin-inline-start: auto; }

/* ----------------------------------------------------------------- day --- */

.day { margin-bottom: var(--s6); }

.day__head { margin-bottom: var(--s4); }

.eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-3);
}

.day__title {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 640; letter-spacing: var(--track-tight); line-height: 1.2;
}

.hero-host[aria-busy="true"] { opacity: 0.55; }

.hero__top {
  display: flex; align-items: center; gap: var(--s3);
  justify-content: space-between; flex-wrap: wrap;
  margin-bottom: var(--s2);
}

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  white-space: nowrap;
}
.chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.chip--complete { background: var(--accent-tint); color: var(--accent-strong); border-color: var(--accent-line); }
.chip--partial,
.chip--empty,
.chip--unknown { background: var(--attention-tint); color: var(--attention-ink); border-color: var(--attention-line); }

.total {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.total__qual {
  font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 600;
  color: var(--attention-ink); line-height: 1;
  display: inline-flex; align-items: center; align-self: center;
}
/* The qualifier is a drawn glyph on purpose (see render.mjs icon('gte')): the
   text character U+2265 is bidi-mirrored, which turned "at least" into "at
   most" in Arabic. Size it in em so it tracks the number it qualifies. */
.total__qual svg { width: 0.85em; height: 0.85em; }

.macro__qual { display: inline-flex; align-items: center; color: var(--attention-ink); }
.macro__qual svg { width: 0.72em; height: 0.72em; }

.total__value {
  font-size: clamp(2.75rem, 9vw, 4rem);
  font-weight: 660; letter-spacing: -0.035em; line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.total__unit { font-size: 1rem; font-weight: 600; color: var(--ink-3); }
.total__of { font-size: 0.9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.hero[data-coverage="empty"] .total__value { color: var(--ink-3); }

/* Visual weight follows meaning, not magnitude. When nothing (or nothing
   confirmable) is logged, a big "0" would be the loudest thing on the page —
   and the single most misleading reading this UI can produce. So the number
   steps back and the statement about the missing log steps forward. The total
   and the target stay on screen, together, exactly as before. */
.hero[data-coverage="empty"] .total__value,
.hero[data-coverage="unknown"] .total__value {
  font-size: clamp(2rem, 6vw, 2.75rem);
  color: var(--ink-2);
}

.hero[data-coverage="empty"] .subnote,
.hero[data-coverage="unknown"] .subnote {
  font-size: 1.0625rem;
}

/* The load-bearing sentence. Never below the fold, never smaller than a hint. */
.logline {
  font-size: 1.0625rem;
  margin-bottom: var(--s3);
  font-variant-numeric: tabular-nums;
}
.logline strong { font-weight: 680; }
.logline__rest { color: var(--ink-3); }

.subnote {
  max-width: 62ch;
  margin-bottom: var(--s4);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* Gaps get the same visual weight as the totals, by design. The rule sits on the
   leading edge in whichever direction that is. */
.hero[data-coverage="partial"] .subnote,
.hero[data-coverage="empty"] .subnote,
.hero[data-coverage="unknown"] .subnote {
  color: var(--attention-ink);
  background: var(--attention-tint);
  border-inline-start: 3px solid var(--attention);
  border-radius: var(--radius-sm);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  padding: var(--s3) var(--s4);
  font-weight: 550;
}

/* ------------------------------------------------------------- meters --- */

.meter {
  display: flex; height: 12px; width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden;
  background: var(--hatch-bg);
  margin-bottom: var(--s3);
}

.meter__known {
  flex: 0 0 var(--pct, 0%);
  background: var(--accent);
  transition: flex-basis 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.meter__unknown {
  flex: 1 1 auto;
  background-image: var(--hatch);
}

.meter--complete .meter__unknown { display: none; }
.meter--empty .meter__known { display: none; }

.slots {
  display: flex; gap: var(--s2);
  margin-bottom: var(--s5);
}

.slot { flex: 1 1 0; min-width: 0; }

.slot__bar {
  display: block; height: 6px; border-radius: 999px;
  background-color: var(--hatch-bg);
  background-image: var(--hatch);
  border: 1px solid var(--line);
}
.slot--on .slot__bar {
  background-image: none;
  background-color: var(--accent);
  border-color: var(--accent);
}

.slot__name {
  display: block; margin-top: var(--s2);
  font-size: 0.6875rem; letter-spacing: var(--track-wide);
  color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.slot--on .slot__name { color: var(--ink-2); font-weight: 650; }

/* -------------------------------------------------------------- macros --- */

.macros {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.macro__label {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-3);
}
.macro__value {
  font-size: 1.125rem; font-weight: 640; letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.macro__target { color: var(--ink-3); font-weight: 500; font-size: 0.875rem; }

.macro .meter { height: 8px; margin: var(--s2) 0 0; }

.targetnote {
  grid-column: 1 / -1;
  color: var(--ink-3);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------- cards --- */

.columns {
  display: grid; gap: var(--s5);
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  align-items: start;
}

.stack { display: grid; gap: var(--s5); min-width: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
}

.card__head { margin-bottom: var(--s4); }

.card h2 { font-size: 1.0625rem; font-weight: 680; letter-spacing: var(--track-tight); }

.card__hint {
  margin-top: var(--s1); max-width: 62ch;
  color: var(--ink-3); font-size: 0.875rem; line-height: 1.5;
}

/* -------------------------------------------------------------- entries --- */

.gapnote {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  background: var(--attention-tint);
  border: 1px solid var(--attention-line);
  border-radius: var(--radius-sm);
  color: var(--attention-ink);
  font-size: 0.9375rem;
}

.gapnote__swatch {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 4px;
  border-radius: 3px; border: 1px solid var(--attention-line);
  background-color: var(--hatch-bg);
  background-image: var(--hatch);
}

.slotgroup + .slotgroup { margin-top: var(--s4); }

.slotgroup__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s1);
}

.slotgroup__label {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-3);
}

.slotgroup__sum { color: var(--ink-3); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.entry {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-top: 1px dashed var(--line);
}
.slotgroup__head + .entry { border-top: 0; }

.entry__main { min-width: 0; }
.entry__name { font-weight: 600; }
.entry__meta {
  color: var(--ink-3); font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.entry__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); flex: 0 0 auto; }
.entry__kcal { font-weight: 640; font-variant-numeric: tabular-nums; }

.entry__actions { display: flex; gap: var(--s2); }

.entry--missing .entry__name { font-weight: 500; color: var(--ink-3); }

.entry--confirming {
  background: var(--attention-tint);
  border-radius: var(--radius-sm);
  padding-inline: var(--s3);
  border-top-color: transparent;
}
.entry--confirming .btn--danger { color: var(--attention-ink); border-color: var(--attention-line); }

.empty {
  padding: var(--s4) 0;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------- forms --- */

.field { margin-bottom: var(--s4); border: 0; padding: 0; }

.field > label,
.field > legend {
  display: block; margin-bottom: var(--s2);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-3);
}

input[type="search"],
input[type="number"],
input[type="date"],
select {
  width: 100%;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
input[type="search"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
select:hover { border-color: var(--ink-3); }

input[type="number"] { font-variant-numeric: tabular-nums; }

.hint { margin-top: var(--s2); color: var(--ink-3); font-size: 0.8125rem; }

.results {
  margin-top: var(--s2);
  padding: var(--s1);
  max-height: 15rem; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.results__opt {
  display: block; width: 100%; text-align: start;
  background: none; border: 0; border-radius: 6px;
  padding: var(--s2) var(--s3); cursor: pointer;
  border-inline-start: 3px solid transparent;
}
.results__opt:hover { background: var(--surface-2); }
.results__opt[aria-selected="true"] { background: var(--accent-tint); }
.results__name { display: block; font-weight: 600; }
.results__kcal { display: block; color: var(--ink-3); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

/* A food the backend will refuse is marked before it is chosen, not after. */
.results__opt--conflict { border-inline-start-color: var(--attention); }
.results__opt--conflict .results__name { color: var(--attention-ink); }
.results__flag {
  display: block; margin-top: var(--s1);
  color: var(--attention-ink); font-size: 0.75rem; font-weight: 620;
}

.foodwarn__lead { font-weight: 680; margin-bottom: var(--s1); }
.foodwarn__foot { margin-top: var(--s2); color: var(--ink-2); font-size: 0.8125rem; }

.selected {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
}
.selected__name { font-weight: 640; }
.selected__meta { color: var(--ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.selected__clear { margin-inline-start: auto; }

.amount__row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.segmented {
  display: inline-flex; flex: 0 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px; overflow: hidden;
}

.seg {
  position: relative; display: inline-flex; align-items: center;
  padding: 8px 14px; font-size: 0.875rem; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
}
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg:has(input:checked) { background: var(--accent); color: var(--on-accent); }
.seg:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.seg:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }

.amount__value { flex: 0 1 8rem; }
.amount__value input { padding: 9px 12px; }

.preview {
  color: var(--ink-2); font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
}

.foodwarn {
  margin-top: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--attention-tint);
  border: 1px solid var(--attention-line);
  border-radius: var(--radius-sm);
  color: var(--attention-ink);
  font-size: 0.875rem;
}

.addform__actions { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s4); }

.addstatus { margin-top: var(--s3); font-size: 0.875rem; min-height: 1.4em; }
.addstatus[data-tone="ok"] { color: var(--accent-strong); }
.addstatus[data-tone="error"] { color: var(--attention-ink); font-weight: 550; }

/* -------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 10px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-weight: 620; cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink-3); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn--primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); padding-inline: 10px; }
.btn--quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn--small { padding: 5px 10px; font-size: 0.8125rem; }
.btn--danger { color: var(--ink-2); }
.btn--danger:hover { border-color: var(--attention-line); color: var(--attention-ink); }

/* ---------------------------------------------------------- restrictions --- */

.rest {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px dashed var(--line);
}
.rest:first-child { border-top: 0; padding-top: 0; }
.rest__label { font-weight: 620; }
.rest__note { margin-top: 2px; color: var(--ink-3); font-size: 0.8125rem; max-width: 44ch; }
.rest__kind {
  display: block; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-3);
}
.rest__sev {
  flex: 0 0 auto;
  padding: 3px 9px; border-radius: 999px;
  background: var(--attention-tint); border: 1px solid var(--attention-line);
  color: var(--attention-ink);
  font-size: 0.75rem; white-space: nowrap;
}

/* -------------------------------------------------------------- program --- */

.pgm__day + .pgm__day { margin-top: var(--s5); }

.pgm__dayhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); padding-bottom: var(--s2);
}
.pgm__dayname { font-size: 0.9375rem; font-weight: 680; }
.pgm__count { font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }

.mv {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s2) 0;
  border-top: 1px dashed var(--line);
}
.pgm__dayhead + .mv { border-top: 0; }

.mv__icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--ink-3); }
.mv__body { min-width: 0; flex: 1 1 auto; }
.mv__name { font-weight: 550; }
.mv__dose { flex: 0 0 auto; color: var(--ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

.mv__note { color: var(--ink-3); font-size: 0.8125rem; }
.mv__sub { margin-top: var(--s1); color: var(--ink-2); font-size: 0.8125rem; }

.mv__why { margin-top: var(--s1); color: var(--attention-ink); font-size: 0.8125rem; }

/* A restricted movement is marked by structure as well as colour: a solid
   attention rule, a tinted field, a lock, and the words "Not programmable". */
.mv--restricted {
  display: block;
  margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--attention-line);
  border-inline-start: 3px solid var(--attention);
  border-radius: var(--radius-sm);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  background: var(--attention-tint);
}
.mv--restricted .mv__row { display: flex; align-items: baseline; gap: var(--s3); justify-content: space-between; }
.mv--restricted .mv__name { font-weight: 650; }
.mv--restricted .mv__icon { color: var(--attention); }

.mv__flags { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }

.flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--attention-tint); border: 1px solid var(--attention-line);
  color: var(--attention-ink);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase; white-space: nowrap;
}

.pgm__foot {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 0.8125rem;
}

/* ------------------------------------------------------------- sessions --- */

.session {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) 0; border-top: 1px dashed var(--line);
}
.session:first-child { border-top: 0; padding-top: 0; }
.session__date { font-variant-numeric: tabular-nums; font-weight: 600; }
.session__meta { color: var(--ink-3); font-size: 0.8125rem; }

/* ------------------------------------------------------------ assistant --- */

.assistant {
  min-height: 12rem;
  padding: var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.assistant[data-state="unavailable"] {
  background: var(--attention-tint);
  border-color: var(--attention-line);
}
.assistant__pending { color: var(--ink-3); font-size: 0.9375rem; }
.assistant__title { font-weight: 640; color: var(--attention-ink); margin-bottom: var(--s1); }
.assistant__msg { color: var(--attention-ink); font-size: 0.875rem; }
.assistant__detail {
  margin-top: var(--s3); color: var(--ink-3);
  font-family: var(--mono); font-size: 0.75rem;
  overflow-wrap: anywhere;
}

ag-assistant { display: block; }

/* The widget's own panel frame is the right frame, so once it is mounted the
   wrapper stops drawing one. If the widget never loads, the wrapper keeps its
   attention styling and says so. */
.assistant[data-state="ready"] {
  padding: 0;
  background: none;
  border: 0;
  min-height: 0;
}

/* Theming the widget through its documented custom properties (its :host block
   declares them), so the panel keeps this page's single accent instead of
   introducing a second one. These are the widget's own token names: if it
   renames them the panel simply falls back to its own defaults — nothing here
   reaches into its shadow DOM. */
ag-assistant {
  --ag-font: var(--font);
  --ag-bg: var(--surface);
  --ag-fg: var(--ink);
  --ag-muted: var(--ink-3);
  --ag-border: var(--line);
  --ag-surface: var(--surface-2);
  --ag-accent: var(--widget-accent);
  --ag-danger: var(--attention-ink);
  --ag-warning: var(--attention);
  --ag-radius: var(--radius-sm);
}

.tools { margin-top: var(--s3); color: var(--ink-3); font-size: 0.8125rem; }
.tools__list { color: var(--ink-2); }

/* ---------------------------------------------------------------- why --- */

.why {
  margin-top: var(--s5);
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
}
.why > summary {
  cursor: pointer; color: var(--ink-2); font-size: 0.875rem; font-weight: 600;
  list-style: none;
  padding: 5px 0; /* keeps the disclosure a >=24px touch target (WCAG 2.5.8) */
}
.why > summary::-webkit-details-marker { display: none; }
.why > summary::before { content: "+ "; color: var(--ink-3); }
.why[open] > summary::before { content: "\2212 "; }
.why__body {
  margin-top: var(--s3); max-width: 62ch;
  display: grid; gap: var(--s2);
  color: var(--ink-2); font-size: 0.875rem;
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 960px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  main { padding-block: var(--s5) var(--s6); }
  .card { padding: var(--s4); }
  .macros { gap: var(--s3); }
  .macro__value { font-size: 1rem; }
  .brand__user { display: none; }
  .topbar__inner { gap: var(--s2); }

  /* Two rows, not three. The controls wrapper dissolves so the brand and the
     language switch share the first row and the date nav takes the second:
     a sticky header that eats a third of a phone screen is not worth the
     grouping it preserves. */
  .topbar__controls { display: contents; }
  .brand { order: 1; }
  .lang { order: 2; margin-inline-start: auto; }
  .dates { order: 3; flex: 1 1 100%; width: auto; justify-content: space-between; }

  .total__value { font-size: clamp(2.5rem, 15vw, 3.25rem); }
  .slot__name { font-size: 0.625rem; }
  .entry { gap: var(--s3); }
}

@media (max-width: 400px) {
  /* Slot names stay: at 360px four segments are ~76px wide and "Breakfast"
     fits at 10px. The meter is the coverage number drawn, and an unlabelled
     meter is decoration. */
  .slot__name { font-size: 0.625rem; letter-spacing: var(--track-wide); }
  .slots { gap: var(--s1); }
}

/* ------------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); }
  .meter { border-color: var(--ink-3); }
}