/* 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;
}
: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;
}
@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;
  }
}

*{box-sizing:border-box;}
html,body{background:var(--surface);}
body{
  margin:0; padding:20px; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:640px; margin:0 auto;}

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;}
.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 14px; flex:1 1 90px; min-width:80px;
}
.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-chat, .day-row .day-edit, .day-row .day-del{
  color:var(--muted); font-size:0.85rem; padding:2px 6px; border-radius:6px;
}
.day-row .day-chat:hover{color:var(--accent); background:var(--pend-bg); text-decoration:none;}
.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;}

/* --- per-entry AI chat panel --- */
.chat-panel{
  margin-top:6px; padding:10px; border-radius:9px; border:1px solid var(--border); background:var(--surface);
}
.chat-transcript{display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; margin-bottom:8px;}
.chat-transcript:empty{margin-bottom:0;}
.chat-bubble{padding:6px 10px; border-radius:10px; font-size:0.8rem; max-width:85%; white-space:pre-wrap;}
.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);}
.chat-form{display:flex; gap:6px;}
.chat-form .chat-input{flex:1; min-width:0; padding:6px 10px; font-size:0.82rem; border-radius:999px;}
.chat-form .icon-btn{width:30px; height:30px;}

.chat-proposal{
  align-self:stretch; padding:8px 10px; border-radius:9px;
  border:1px solid var(--mild-ring); background:var(--mild-bg);
}
.chat-proposal-diff{font-size:0.8rem; color:var(--ink); font-variant-numeric:tabular-nums; margin-bottom:8px;}
.chat-proposal-actions{display:flex; gap:8px;}
.chat-proposal-actions button{padding:5px 12px; font-size:0.76rem;}
.chat-proposal-actions .chat-cancel{background:transparent;}

/* --- inline meal-correction form (replaces a day-row's contents while editing) --- */
.day-edit-form{display:flex; flex-direction:column; gap:8px; flex:1;}
.day-edit-form .edit-fields{display:grid; grid-template-columns:repeat(5,1fr); gap:6px;}
.day-edit-form label{margin:0;}
.day-edit-form label span{font-size:0.62rem;}
.day-edit-form input{padding:6px 6px; font-size:0.8rem;}
.day-edit-form .edit-actions{display:flex; gap:8px;}
.day-edit-form .edit-actions button{padding:6px 12px; font-size:0.78rem;}

/* --- 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 mini rows, one per macro, own y-scale each --- */
#macros-chart .chart-line{stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round;}
#macros-chart .chart-label{fill:var(--muted); font-size:11px;}
#macros-chart .macro-row-label{fill:var(--ink-2); font-size:11px; font-weight:600;}

/* --- 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);}

/* --- barcode scanner --- */
#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;}
.weight-bar{margin-bottom:14px;}
.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);}
.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);}

@media (max-width:480px){
  body{padding:14px;}
  .metric-tile{flex:1 1 72px; padding:8px 10px;}
  .metric-tile .mt-value{font-size:0.95rem;}
}