/* Design system copied from this repo's docs/index.html (the athlete's existing GitHub Pages
   dashboard) for visual alignment — same tokens, same card/tile language, same breakpoint. */
:root{
  --surface:#ffffff; --surface-2:#f6f7f8; --border:#e3e5e8;
  --ink:#1c2024; --ink-2:#5c6470; --muted:#8a919c;
  --good-bg:#e7f6ee; --good-ink:#15803d; --good-ring:#bfe8d2;
  --mild-bg:#fef9e7; --mild-ink:#a16207; --mild-ring:#f5e2a3;
  --bad-bg:#fdecec; --bad-ink:#c81e3a; --bad-ring:#f6c2cb;
  --pend-bg:#f1f2f4; --pend-ink:#8a919c; --pend-ring:#dfe2e6;
  --accent:#2563eb; --accent-ink:#ffffff;
  /* Macros-chart palette, taken verbatim from the athlete's own dashboard (docs/index.html)
     so both charts read the same. */
  --prot-actual:#2563eb; --prot-goal:#16a34a; --prot-min:#dc2626;
  --carb-actual:#7c3aed; --carb-band:#7c3aed; --carb-low:#dc2626;
  --fat-actual:#d97706; --fat-band:#d97706; --fat-min:#dc2626;
  --fib-actual:#0d9488; --fib-target:#16a34a;
  --today-line:#b8bfc7; --grid-line:#eceef1;
}
:root[data-theme="dark"]{
  --surface:#16181d; --surface-2:#1d2025; --border:#2a2e35;
  --ink:#eef0f2; --ink-2:#b8bfc7; --muted:#7d8590;
  --good-bg:#123524; --good-ink:#4ade80; --good-ring:#1e5a3d;
  --mild-bg:#3a2f10; --mild-ink:#facc15; --mild-ring:#5c4a17;
  --bad-bg:#3a1620; --bad-ink:#fb7185; --bad-ring:#6b2331;
  --pend-bg:#23262c; --pend-ink:#9aa2ac; --pend-ring:#33373e;
  --accent:#60a5fa; --accent-ink:#0b0d10;
  --prot-actual:#60a5fa; --prot-goal:#4ade80; --prot-min:#f87171;
  --carb-actual:#a78bfa; --carb-band:#a78bfa; --carb-low:#f87171;
  --fat-actual:#fbbf24; --fat-band:#fbbf24; --fat-min:#f87171;
  --fib-actual:#2dd4bf; --fib-target:#4ade80;
  --today-line:#4b515c; --grid-line:#25282e;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:#16181d; --surface-2:#1d2025; --border:#2a2e35;
    --ink:#eef0f2; --ink-2:#b8bfc7; --muted:#7d8590;
    --good-bg:#123524; --good-ink:#4ade80; --good-ring:#1e5a3d;
    --mild-bg:#3a2f10; --mild-ink:#facc15; --mild-ring:#5c4a17;
    --bad-bg:#3a1620; --bad-ink:#fb7185; --bad-ring:#6b2331;
    --pend-bg:#23262c; --pend-ink:#9aa2ac; --pend-ring:#33373e;
    --accent:#60a5fa; --accent-ink:#0b0d10;
  --prot-actual:#60a5fa; --prot-goal:#4ade80; --prot-min:#f87171;
  --carb-actual:#a78bfa; --carb-band:#a78bfa; --carb-low:#f87171;
  --fat-actual:#fbbf24; --fat-band:#fbbf24; --fat-min:#f87171;
  --fib-actual:#2dd4bf; --fib-target:#4ade80;
  --today-line:#4b515c; --grid-line:#25282e;
  }
}

*{box-sizing:border-box;}
html,body{background:var(--surface);}
/* App shell: the page content scrolls, the composer stays parked at the bottom of the screen
   (chat-app layout) rather than the input sitting above a long scrolling page. --page-max is
   shared by the content pane and the composer so the two stay aligned at every width. */
:root{--page-max:640px;}
body{
  margin:0; padding:0; color:var(--ink); height:100dvh; display:flex; flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  width:100%; max-width:var(--page-max); margin:0 auto; padding:20px;
}

h1{font-size:1.15rem; font-weight:650; margin:0 0 4px;}
h2{font-size:1rem; font-weight:650; margin:0 0 4px;}
h3{font-size:0.88rem; font-weight:650; margin:22px 0 8px; color:var(--ink);}
.sub{color:var(--ink-2); font-size:0.85rem; margin:0 0 16px;}
a{color:var(--accent); text-decoration:none; font-size:0.85rem;}
a:hover{text-decoration:underline;}

section{margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid var(--border);}
section:last-of-type{border-bottom:none; margin-bottom:0;}

.card{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:16px;
}

/* --- topbar --- */
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:8px;}
.topbar h1{margin:0;}
.topbar-actions{display:flex; align-items:center; gap:14px; font-size:0.85rem; color:var(--ink-2);}

/* --- forms --- */
form label{display:block; font-size:0.78rem; color:var(--ink-2); margin-bottom:12px;}
form label > span{display:block; margin-bottom:4px;}
input, select{
  width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--ink); font-size:0.9rem; font-family:inherit;
}
input:focus, select:focus{outline:2px solid var(--accent); outline-offset:1px;}
/* iOS Safari zooms the whole page in when a focused input's text is under 16px, and never
   zooms back out — which leaves the page wider than the screen until you pinch it back. */
@media (pointer:coarse){
  input, select, textarea{font-size:16px;}
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:480px){ .field-row{grid-template-columns:1fr;} }

button{
  font-family:inherit; font-size:0.85rem; font-weight:600; cursor:pointer;
  padding:9px 16px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink);
}
button:hover{border-color:var(--ink-2);}
button[type="submit"], .btn-primary{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
}
button[type="submit"]:hover, .btn-primary:hover{filter:brightness(0.92);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}

.error{background:var(--bad-bg); color:var(--bad-ink); border:1px solid var(--bad-ring); border-radius:8px; padding:10px 12px; font-size:0.82rem; margin-top:10px;}

/* --- login --- */
#login-view{max-width:340px; margin:60px auto 0;}
#login-view h1{text-align:center; margin-bottom:4px;}
#login-view .sub{text-align:center;}

/* --- metric tiles (today's totals) — mirrors docs/index.html's .metric-tile exactly --- */
.metrics-strip{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.metric-tile{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; flex:1 1 76px; min-width:70px;
}
.metric-tile .mt-label{font-size:0.66rem; color:var(--ink-2); text-transform:uppercase; letter-spacing:.03em;}
.metric-tile .mt-value{font-size:1.05rem; font-weight:650; margin-top:2px; white-space:nowrap;}

/* --- log-food result feedback --- */
#log-result{margin-top:12px; font-size:0.85rem; padding:10px 12px; border-radius:8px;}
#log-result:empty{display:none; padding:0; margin:0;}
#log-result.hit{background:var(--good-bg); color:var(--good-ink); border:1px solid var(--good-ring);}
#log-result.miss{background:var(--bad-bg); color:var(--bad-ink); border:1px solid var(--bad-ring);}
#log-result.working{background:var(--pend-bg); color:var(--pend-ink); border:1px solid var(--pend-ring);}

/* --- day rows (today's log + history) — mirrors docs/index.html's .day-row card language --- */
.day-list{display:flex; flex-direction:column; gap:6px;}
.day-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface-2); font-size:0.85rem;
}
.day-row .day-main{flex:1; min-width:0;}
.day-row .day-desc{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.day-row .day-meta{color:var(--muted); font-size:0.72rem; margin-top:1px;}
.day-row .day-macros{
  color:var(--ink-2); font-size:0.78rem; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;
}
.day-row .day-actions{display:flex; gap:2px; flex-shrink:0;}
.day-row .day-edit, .day-row .day-del{
  color:var(--muted); font-size:0.85rem; padding:2px 6px; border-radius:6px;
}
.day-row .day-edit:hover{color:var(--accent); background:var(--pend-bg); text-decoration:none;}
.day-row .day-del:hover{color:var(--bad-ink); background:var(--bad-bg); text-decoration:none;}
.empty-state{color:var(--muted); font-size:0.85rem; padding:8px 2px;}

/* --- the one composer: transcript, the item in hand, its buttons, then the input bar --- */
#composer{
  flex-shrink:0; background:var(--surface); border-top:1px solid var(--border);
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
}
/* Follows the content pane's width, but capped — a full-bleed input on a wide monitor puts the
   send button an absurd distance from the text you just typed. */
.composer-inner{max-width:min(var(--page-max), 900px); margin:0 auto;}
#conversation{
  display:flex; flex-direction:column; gap:6px;
  max-height:40dvh; overflow-y:auto; overscroll-behavior:contain;
}
#conversation:not(:empty){margin-bottom:10px;}
.chat-bubble{padding:6px 10px; border-radius:10px; font-size:0.8rem; max-width:min(85%,620px); white-space:pre-wrap; overflow-wrap:anywhere;}
.chat-bubble.chat-user{align-self:flex-end; background:var(--accent); color:var(--accent-ink);}
.chat-bubble.chat-assistant{align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); color:var(--ink);}

#composer-context{
  padding:8px 10px; border-radius:9px; margin-bottom:8px;
  border:1px solid var(--mild-ring); background:var(--mild-bg);
}
.context-desc{color:var(--ink); font-weight:600; overflow-wrap:anywhere;}
.context-macros{font-size:0.8rem; color:var(--ink); font-variant-numeric:tabular-nums; margin-top:2px;}
.context-notes{color:var(--muted); font-size:0.72rem; margin-top:4px; overflow-wrap:anywhere;}
.context-notes:empty{display:none;}

#composer-actions{display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap;}
#composer-actions button{padding:6px 14px; font-size:0.78rem;}
.input-disabled{opacity:0.35; pointer-events:none;}

/* --- weight trend chart — mirrors docs/index.html's .chart-wrap --- */
.chart-wrap{position:relative; width:100%; margin-top:4px;}
.chart-wrap svg{display:block; width:100%; height:auto; overflow:visible;}
#weight-chart .chart-target-line{stroke:var(--muted); stroke-width:1.5; stroke-dasharray:4,4;}
#weight-chart .chart-line{stroke:var(--accent); stroke-width:2.5; fill:none; stroke-linejoin:round; stroke-linecap:round;}
#weight-chart .chart-point{fill:var(--accent);}
#weight-chart .chart-label{fill:var(--muted); font-size:11px;}

/* --- macros chart: four stacked rows, own y-scale and own reference each — ported from the
   athlete's own dashboard so the two read identically. The four series are faceted into separate
   rows and each row is direct-labelled in its own colour, so identity comes from position, not
   from telling blue and purple apart. --- */
#macros-chart .chart-label{fill:var(--muted); font-size:11px;}
.macro-key{color:var(--muted); font-size:11px; line-height:1.5; margin:0 0 14px;}
.chart-tip{
  position:absolute; pointer-events:none; z-index:6; transform:translate(-50%,-100%);
  background:var(--ink); color:var(--surface); padding:6px 9px; border-radius:6px;
  font-size:0.72rem; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.2); opacity:0;
  transition:opacity .08s ease; top:0; left:0; max-width:92vw; overflow:hidden; text-overflow:ellipsis;
}
.chart-tip.show{opacity:1;}

/* --- deficit/surplus calendar --- */
.cal-legend{display:flex; flex-wrap:wrap; gap:12px; font-size:0.76rem; color:var(--ink-2); margin-bottom:10px;}
.cal-legend .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:middle;}
.cal-legend .dot.good{background:var(--good-ink);}
.cal-legend .dot.mild{background:var(--mild-ink);}
.cal-legend .dot.bad{background:var(--bad-ink);}
.cal-month{margin-bottom:20px;}
.cal-month:last-child{margin-bottom:0;}
.cal-month-title{font-size:0.82rem; font-weight:650; margin:0 0 8px; color:var(--ink);}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px;}
.cal-weekdays span{text-align:center; font-size:0.68rem; color:var(--muted);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cal-cell{
  aspect-ratio:1; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:0.68rem; font-variant-numeric:tabular-nums;
  background:var(--pend-bg); color:var(--pend-ink); border:1px solid var(--pend-ring);
}
.cal-cell.cal-good{background:var(--good-bg); color:var(--good-ink); border-color:var(--good-ring);}
.cal-cell.cal-mild{background:var(--mild-bg); color:var(--mild-ink); border-color:var(--mild-ring);}
.cal-cell.cal-bad{background:var(--bad-bg); color:var(--bad-ink); border-color:var(--bad-ring);}
.cal-cell.cal-future{background:transparent; border-color:transparent; color:var(--muted);}
.cal-cell.cal-clickable{cursor:pointer;}
.cal-cell.cal-clickable:hover{outline:2px solid var(--accent); outline-offset:-1px;}

/* --- heading with a control on the right (macros range) --- */
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.section-head h3{margin-bottom:4px;}
.range-toggle{display:flex; gap:4px; flex-shrink:0;}
.range-toggle button{
  padding:3px 9px; font-size:0.72rem; border-radius:999px;
  background:var(--surface-2); color:var(--ink-2);
}
.range-toggle button.active{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
}

/* --- the day's budget line: baseline + what training cost, vs what was eaten --- */
.budget-line{
  font-size:0.8rem; color:var(--ink-2); margin:0 0 12px; padding:8px 10px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--border); font-variant-numeric:tabular-nums;
}
.budget-line:empty{display:none;}
.budget-line.budget-ok{background:var(--good-bg); color:var(--good-ink); border-color:var(--good-ring);}
.budget-line.budget-over{background:var(--bad-bg); color:var(--bad-ink); border-color:var(--bad-ring);}

/* --- day navigator above the food list --- */
.day-nav{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.day-nav h2{margin:0; min-width:7.5em;}
.day-nav button{
  padding:2px 10px; font-size:1rem; line-height:1.4; background:var(--surface-2);
  color:var(--ink-2); flex-shrink:0;
}
.day-nav button:disabled{opacity:0.35; cursor:default;}
.day-nav button:disabled:hover{border-color:var(--border);}

/* --- barcode scanner (overlay, so it isn't buried in the scrolling page) --- */
#scanner-modal{
  position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,0.6);
}
#scanner-modal[hidden]{display:none;}
#scanner-modal .card{width:100%; max-width:420px;}
#scanner-modal video{width:100%; max-width:100%; border-radius:8px; display:block;}
#scanner-modal .btn-row{margin-top:10px;}

/* --- log-food input bar: text field + inline icon buttons, chat-input style --- */
.input-bar{
  display:flex; align-items:center; gap:4px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:5px 5px 5px 16px;
}
.input-bar input[type="text"], .input-bar input[type="number"]{
  flex:1; min-width:0; border:none; padding:6px 4px; background:transparent;
}
.input-bar input[type="text"]:focus, .input-bar input[type="number"]:focus{outline:none;}
/* The what-am-I-logging picker. Needs its own width/padding — the base `input, select` rule is
   width:100%, which would push the rest of the bar out. */
#log-kind{
  width:auto; flex-shrink:0; margin:0 6px 0 -8px; padding:5px 8px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface-2);
  font-size:0.82rem; line-height:1.2; color:var(--ink-2); cursor:pointer; appearance:none;
}
#log-kind:hover{color:var(--ink); border-color:var(--ink-2);}
/* The id selector above outranks the global pointer:coarse rule, so restate it here — a select
   under 16px triggers the same iOS focus-zoom as a text input. */
@media (pointer:coarse){ #log-kind{font-size:16px;} }
#log-kind:focus{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
#log-kind:disabled{opacity:0.35; cursor:default;}
.icon-btn{
  flex-shrink:0; width:36px; height:36px; margin:0; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--ink-2); cursor:pointer;
}
.icon-btn:hover{color:var(--ink); border-color:var(--ink-2);}
/* display:flex above would otherwise win over the UA's [hidden] rule (same specificity, later
   in the sheet), so a hidden icon button would still show. */
.icon-btn[hidden]{display:none;}
.icon-btn.send-btn{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.icon-btn.send-btn:hover{filter:brightness(0.92);}

.input-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.input-chips:empty{margin-top:0;}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:4px 6px 4px 10px; font-size:0.76rem; color:var(--ink-2);
}
.chip.chip-error{background:var(--bad-bg); border-color:var(--bad-ring); color:var(--bad-ink);}
.chip .chip-x{
  cursor:pointer; color:var(--muted); width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:0.8rem;
}
.chip .chip-x:hover{background:var(--border); color:var(--ink);}

/* --- wide screens: use the room instead of a 640px column in the middle of a monitor.
   #app-view carries [hidden] on the login screen, so every display rule here has to be
   guarded by :not([hidden]) — an id selector would otherwise beat the UA's [hidden] rule. --- */
@media (min-width:1000px){
  :root{--page-max:1120px;}
  #app-view:not([hidden]){
    display:grid; column-gap:36px; align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "top      top"
      "settings settings"
      "food     weight"
      "food     calendar"
      "macros   macros";
  }
  .topbar{grid-area:top;}
  #settings-section{grid-area:settings;}
  #food-section{grid-area:food;}
  #weight-section{grid-area:weight;}
  #calendar-section{grid-area:calendar;}
  /* The macros chart is four stacked rows over 60+ days — it needs the full width, not a
     third of it, or the rows squash into unreadable smears. */
  #macros-section{grid-area:macros;}
  /* Full-width rules between stacked sections make no sense once they sit side by side. */
  #app-view:not([hidden]) section{border-bottom:none; padding-bottom:0; margin-bottom:30px;}
}
@media (min-width:1400px){
  :root{--page-max:1560px;}
  #app-view:not([hidden]){
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "top      top      top"
      "settings settings settings"
      "food     weight   calendar"
      "macros   macros   macros";
  }
}

@media (max-width:480px){
  .wrap{padding:14px;}
  #composer{padding-left:14px; padding-right:14px;}
  /* Sized so all five macro tiles sit on one row at phone widths instead of wrapping 4+1. */
  .metrics-strip{gap:6px;}
  .metric-tile{flex:1 1 56px; min-width:56px; padding:8px 7px;}
  .metric-tile .mt-label{font-size:0.6rem;}
  .metric-tile .mt-value{font-size:0.92rem;}
}