/*
 * Shared design tokens. Kitchen enamelware, not cream-and-terracotta.
 *
 * Two rims on purpose. `--rim` outlines things you can press or type into, and holds
 * 3:1 against both backgrounds so an unpressed pill still reads as a control. `--rim-soft`
 * is for card edges, dotted leaders and dividers, which only need to be seen, not found.
 */
:root {
  --enamel:  #E9EDE7;
  --preserve:#17352B;
  --slate:   #5C6B62;
  --saffron: #E8A93B;
  --tomato:  #C0472F;
  --paper:   #FFFFFF;
  --rim:     #78887D;
  --rim-soft:#C8D2C4;
  --rule:    var(--rim-soft);
  /* Text placed on the two strong fills. Saffron is light in both themes, so its text
     stays dark; the preserve fill flips with the theme, so its text follows the page. */
  --on-saffron: #17352B;
  --on-preserve: var(--enamel);
  /* The setup deck: a dark card in either theme. */
  --deck-bg:    #17352B;
  --deck-fg:    #E9EDE7;
  --deck-muted: #9DB3A5;
  --deck-soft:  #C6D4CA;
  --deck-line:  #3E5C50;
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Karla", system-ui, -apple-system, sans-serif;
  --g-week: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="16" rx="2"/><line x1="3" y1="9.5" x2="21" y2="9.5"/><line x1="8" y1="2.5" x2="8" y2="6.5"/><line x1="16" y1="2.5" x2="16" y2="6.5"/></svg>');
  --g-prefs: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.2 5.2l2.1 2.1M16.7 16.7l2.1 2.1M18.8 5.2l-2.1 2.1M7.3 16.7l-2.1 2.1"/></svg>');
  --g-signout: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 4.5H19a1.5 1.5 0 011.5 1.5v12a1.5 1.5 0 01-1.5 1.5h-4"/><polyline points="10,8 14,12 10,16"/><line x1="14" y1="12" x2="3" y2="12"/></svg>');
  --g-home: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 11L12 3.5 20.5 11"/><path d="M5.5 9.5V20h13V9.5"/></svg>');
  --g-tick: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4,12.5 9.5,18 20,6"/></svg>');
  --g-swap: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17,3.5 20.5,7 17,10.5"/><path d="M20.5 7H7A3.5 3.5 0 003.5 10.5"/><polyline points="7,20.5 3.5,17 7,13.5"/><path d="M3.5 17H17a3.5 3.5 0 003.5-3.5"/></svg>');
  --g-cross: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="5.5" y1="5.5" x2="18.5" y2="18.5"/><line x1="18.5" y1="5.5" x2="5.5" y2="18.5"/></svg>');
  --g-flame: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.5s5.5 5 5.5 9.5a5.5 5.5 0 01-11 0C6.5 9 9 7 9 7s.5 2.5 2 2.5S12 2.5 12 2.5z"/></svg>');
  --g-leftovers: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="8" width="17" height="11.5" rx="2"/><path d="M8 8V5.5A2 2 0 0110 3.5h4a2 2 0 012 2V8"/><line x1="3.5" y1="12.5" x2="20.5" y2="12.5"/></svg>');
  --g-info: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16.5"/><circle cx="12" cy="7.8" r=".2"/></svg>');
  --g-warn: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5L21 19.5H3z"/><line x1="12" y1="9.5" x2="12" y2="14"/><circle cx="12" cy="16.8" r=".2"/></svg>');
  --g-cooked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 19.5h15"/><path d="M5.5 16.5a6.5 6.5 0 0113 0z"/><line x1="12" y1="3.5" x2="12" y2="6.5"/></svg>');
  --g-takeout: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8.5h14l-1.2 11a1.5 1.5 0 01-1.5 1.3H7.7a1.5 1.5 0 01-1.5-1.3z"/><path d="M8.5 8.5l1.5-5h4l1.5 5"/></svg>');
  --g-photo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="14" rx="2"/><circle cx="12" cy="13" r="3.4"/><path d="M8 6l1.4-2.5h5.2L16 6"/></svg>');
  --g-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>');
  --g-prev: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="14.5,4.5 7.5,12 14.5,19.5"/></svg>');
  --g-next: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,4.5 16.5,12 9.5,19.5"/></svg>');
  --g-chat: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5h16v10H9l-4.5 4v-4H4z"/></svg>');
  color-scheme: light dark;
}

/*
 * Dark theme: the same tokens, re-pointed. Everything below is written against the
 * tokens, so nothing else needs to know which theme is on. The saffron and tomato are
 * lifted a touch so they hold their contrast against the darker paper.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --enamel:  #151B18;
    --paper:   #1F2823;
    --preserve:#E6ECE6;
    --slate:   #A9B7AC;
    --saffron: #EDB24A;
    --tomato:  #E5715A;
    --rim:     #8A9A8E;
    --rim-soft:#34423A;
    --deck-bg:    #1C3D31;
    --deck-fg:    #E9EDE7;
    --deck-muted: #A6BCAF;
    --deck-soft:  #CCD9D0;
    --deck-line:  #3E5C50;
  }
}
:root[data-theme="dark"] {
  --enamel:  #151B18;
  --paper:   #1F2823;
  --preserve:#E6ECE6;
  --slate:   #A9B7AC;
  --saffron: #EDB24A;
  --tomato:  #E5715A;
  --rim:     #8A9A8E;
  --rim-soft:#34423A;
  --deck-bg:    #1C3D31;
  --deck-fg:    #E9EDE7;
  --deck-muted: #A6BCAF;
  --deck-soft:  #CCD9D0;
  --deck-line:  #3E5C50;
}

* { box-sizing: border-box; }
/*
 * A class rule that sets `display` beats the user agent's [hidden] { display: none },
 * so an element marked hidden still renders. The week page's add form was doing
 * exactly that - `form.add { display: grid }` kept it on screen behind its own
 * toggle. Every `hidden` in these pages is load-bearing, so make the attribute win.
 */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
a { color: var(--preserve); }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
body { margin: 0; background: var(--enamel); color: var(--preserve);
  font-family: var(--sans); font-size: 17px; line-height: 1.55; }
h1, h2, h3, .q { font-family: var(--serif); font-weight: 600; margin: 0; }
.wrap { max-width: 33rem; margin: 0 auto; padding: 1.25rem 1.25rem 6rem; }
.wrap.wide { max-width: 960px; }
.mark { font-size: .82rem; color: var(--slate); margin: 0 0 1.75rem; letter-spacing: .02em; }
.mark b { color: var(--preserve); font-weight: 700; }
.hint { color: var(--slate); font-size: .92rem; margin: .25rem 0 .75rem; }
.hint a { color: inherit; }
.err { color: var(--tomato); font-size: .92rem; margin: .5rem 0 0; }
.disclaimer { font-style: italic; }
code { font: inherit; font-weight: 700; }

/* --- Header and navigation ------------------------------------------------------------
   One header on every page: the page's name on the left, the same four controls on the
   right. Each control is an icon with its word beside it; the word folds away on a
   narrow phone and comes back as a tooltip, so nothing is ever a bare glyph. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nav { display: flex; gap: .4rem; flex-wrap: wrap; }
.nav .ibtn[aria-current="page"] { background: var(--preserve); color: var(--on-preserve); border-color: var(--preserve); }
.lbl { font-size: .9rem; }
@media (max-width: 30rem) { .nav .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* --- Pills: one press toggles them ------------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.pill { font: inherit; font-size: .95rem; cursor: pointer; background: var(--paper); color: var(--preserve);
  border: 1px solid var(--rim); border-radius: 2rem; padding: .46rem .95rem; min-height: 2.4rem;
  transition: background .12s, border-color .12s, color .12s; }
.pill:hover { border-color: var(--preserve); }
.pill[aria-pressed="true"] { background: var(--preserve); border-color: var(--preserve); color: var(--on-preserve); }
.pill.tomato[aria-pressed="true"] { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.pill .x { opacity: .7; margin-left: .4rem; }
/* A fact shown in pill shape, not a control: no hover, no pointer. */
span.pill { cursor: default; background: var(--preserve); border-color: var(--preserve); color: var(--on-preserve); display: inline-block; }

/* --- Buttons --------------------------------------------------------------------------
   Two kinds. `.primary` is the one thing a page wants you to do (saffron). `.save` is
   the same thing on the fixed bar. Both are 2.4rem tall or more, so a thumb finds them. */
button { font: inherit; }
button.primary, button.save, a.primary { background: var(--saffron); color: var(--on-saffron); border: 0; border-radius: 2rem;
  padding: .7rem 1.2rem; min-height: 2.6rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
button.save { flex: 1; padding: .85rem; }
button.quiet { background: var(--paper); color: var(--preserve); border: 1px solid var(--rim); border-radius: 2rem;
  padding: .5rem 1rem; min-height: 2.4rem; font: inherit; cursor: pointer; }
button:disabled, a.primary[aria-disabled="true"] { opacity: .5; cursor: default; }

.savebar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--enamel);
  border-top: 1px solid var(--rim-soft); padding: .8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom)); }
.savebar .inner { max-width: 33rem; margin: 0 auto; display: flex; align-items: center; gap: 1rem; }
#status { font-size: .88rem; color: var(--slate); }
#status.ok { color: var(--preserve); } #status.bad { color: var(--tomato); } #status.dirty { color: var(--preserve); font-weight: 700; }

input, select, textarea { font: inherit; padding: .55rem .7rem; border: 1px solid var(--rim); border-radius: .5rem;
  background: var(--paper); color: var(--preserve); min-width: 0; min-height: 2.4rem; }
input::placeholder { color: var(--slate); opacity: 1; }

/* Present for assistive technology, absent from the layout. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Icons ---------------------------------------------------------------
   Masked inline SVG: the glyph takes currentColor, so one rule per icon and
   no font, sprite or network request. Sized in ems to follow the text. */
.i { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.18em;
     background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
     -webkit-mask-position: center; mask-position: center;
     -webkit-mask-size: contain; mask-size: contain; flex: none; }

.i-week      { -webkit-mask-image: var(--g-week);      mask-image: var(--g-week); }
.i-prefs     { -webkit-mask-image: var(--g-prefs);     mask-image: var(--g-prefs); }
.i-signout   { -webkit-mask-image: var(--g-signout);   mask-image: var(--g-signout); }
.i-home      { -webkit-mask-image: var(--g-home);      mask-image: var(--g-home); }
.i-tick      { -webkit-mask-image: var(--g-tick);      mask-image: var(--g-tick); }
.i-swap      { -webkit-mask-image: var(--g-swap);      mask-image: var(--g-swap); }
.i-cross     { -webkit-mask-image: var(--g-cross);     mask-image: var(--g-cross); }
.i-flame     { -webkit-mask-image: var(--g-flame);     mask-image: var(--g-flame); }
.i-leftovers { -webkit-mask-image: var(--g-leftovers); mask-image: var(--g-leftovers); }
.i-info      { -webkit-mask-image: var(--g-info);      mask-image: var(--g-info); }
.i-warn      { -webkit-mask-image: var(--g-warn);      mask-image: var(--g-warn); }
.i-cooked    { -webkit-mask-image: var(--g-cooked);    mask-image: var(--g-cooked); }
.i-takeout   { -webkit-mask-image: var(--g-takeout);   mask-image: var(--g-takeout); }
.i-photo     { -webkit-mask-image: var(--g-photo);     mask-image: var(--g-photo); }
.i-plus      { -webkit-mask-image: var(--g-plus);      mask-image: var(--g-plus); }
.i-prev      { -webkit-mask-image: var(--g-prev);      mask-image: var(--g-prev); }
.i-next      { -webkit-mask-image: var(--g-next);      mask-image: var(--g-next); }
.i-chat      { -webkit-mask-image: var(--g-chat);      mask-image: var(--g-chat); }

/* An icon control, with or without its word. The accessible name is the visible label
   when there is one, and the aria-label when there is not. Anchors and buttons share it. */
.ibtn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
        min-width: 2.4rem; min-height: 2.4rem; padding: .35rem .6rem;
        background: var(--paper); border: 1px solid var(--rim); border-radius: 10px;
        color: var(--preserve); font: inherit; cursor: pointer; text-decoration: none; }
.ibtn:hover { border-color: var(--preserve); }
.ibtn.bad:hover { color: var(--tomato); border-color: var(--tomato); }
.ibtn:disabled { opacity: .5; cursor: default; }

/* An inline check before something permanent: two words and two small buttons, in the
   row that asked, rather than a dialog over the whole page. */
.confirm { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; flex-wrap: wrap; }
.confirm button { font: inherit; font-size: .85rem; min-height: 2.2rem; padding: .25rem .7rem; border-radius: 2rem;
  border: 1px solid var(--rim); background: var(--paper); color: var(--preserve); cursor: pointer; }
.confirm button.yes { background: var(--tomato); border-color: var(--tomato); color: #fff; }

/* A short labelled chip: an icon plus a word, used for nutrition gaps. */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; min-height: 2.2rem;
        border: 1px solid var(--rim); border-radius: 999px; background: var(--paper);
        font: inherit; font-size: .9rem; cursor: pointer; color: var(--preserve); }
.chip .n { font-size: .9rem; }
.chip.over { color: var(--tomato); border-color: var(--tomato); }

/* --- The day meter ---------------------------------------------------------------------
   One cell per tracked nutrient. Each standing has a shape as well as a colour, so the
   strip reads the same to anyone: full = met, half = short, striped = over, outline = no
   numbers. The key above the days uses the same four cells. */
.meter { display: flex; gap: .25rem; margin-top: .5rem; align-items: flex-end; height: .55rem; }
.meter i, .key i { display: block; flex: 1; height: .55rem; border-radius: 3px; background: transparent;
  border: 1px solid var(--rim); }
.meter i.met, .key i.met { background: var(--preserve); border-color: var(--preserve); }
.meter i.short, .key i.short { height: .3rem; background: var(--saffron); border-color: var(--saffron); }
.meter i.over, .key i.over { background: repeating-linear-gradient(135deg, var(--tomato) 0 3px, transparent 3px 5px);
  border-color: var(--tomato); }
.key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .82rem; color: var(--slate); margin: 0 0 .6rem; }
.key span { display: inline-flex; align-items: center; gap: .35rem; }
.key i { width: 1.4rem; flex: none; }