:root {
  --bg: #f6f6f3;
  --surface: #ffffff;
  --surface-2: #f0f0ec;
  --border: #e2e2dc;
  --text: #1d1d1b;
  --text-2: #5f5f5a;
  --muted: #7a7a74;
  --brand: #0f766e;
  --brand-ink: #ffffff;
  --brand-soft: #e3f2ef;
  --danger: #b42318;
  --ok: #067647;

  /* Status palette — glucose levels. Always paired with icon + label. */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  /* Text-safe darker steps for coloured numbers on light surfaces */
  --good-text: #067a06;
  --warning-text: #8a5a00;
  --serious-text: #b44a1f;
  --critical-text: #b42318;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121211; --surface: #1f1f1d; --surface-2: #2a2a27; --border: #34342f;
    --text: #ededea; --text-2: #b8b8b2; --muted: #93938d;
    --brand: #2bb3a3; --brand-ink: #062b27; --brand-soft: #173a36;
    --danger: #f97066; --ok: #47cd89;
    --good-text: #4fd44f; --warning-text: #fab219; --serious-text: #f0a080; --critical-text: #f47b7b;
    --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121211; --surface: #1f1f1d; --surface-2: #2a2a27; --border: #34342f;
  --text: #ededea; --text-2: #b8b8b2; --muted: #93938d;
  --brand: #2bb3a3; --brand-ink: #062b27; --brand-soft: #173a36;
  --danger: #f97066; --ok: #47cd89;
  --good-text: #4fd44f; --warning-text: #fab219; --serious-text: #f0a080; --critical-text: #f47b7b;
  --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[hidden] { display: none !important; }
a { color: var(--brand); }
h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.2; }
h1 { font-size: 1.35rem; } h2 { font-size: 1.1rem; } h3 { font-size: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--danger); min-height: 1em; margin: 0; }
.ok { color: var(--ok); min-height: 1em; margin: 0; }
/* Empty status lines would otherwise leave a gap in stacked forms. */
.stack > .error:empty, .stack > .ok:empty { display: none; }
.big-input::placeholder { font-size: 1.5rem; font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.grow { flex: 1; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: .85rem; }

/* ---------- form controls ---------- */
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--text-2); font-weight: 500; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem; width: 100%;
  min-height: 44px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px;
}
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-size: .9rem; color: var(--text-2); font-weight: 500; margin-bottom: .35rem; padding: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 10px; padding: .6rem 1rem; min-height: 44px;
}
.btn:hover { filter: brightness(.97); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn.danger:not(.ghost) { background: transparent; border-color: var(--danger); }
.btn.small { padding: .3rem .7rem; min-height: 34px; font-size: .85rem; }

.pill { font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { flex-direction: row; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; width: auto; min-height: 0; }
.chip span {
  display: inline-block; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 500; font-size: .9rem;
}
.chip input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.segmented { display: flex; gap: .25rem; flex-wrap: wrap; }
.segmented label { flex-direction: row; align-items: center; gap: .4rem; }
.segmented label input { width: auto; min-height: 0; }
.segmented.compact button {
  font: inherit; font-size: .85rem; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); padding: .25rem .65rem; border-radius: 8px; cursor: pointer; min-height: 32px;
}
.segmented.compact button.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.switch { flex-direction: row; align-items: center; gap: .8rem; cursor: pointer; color: var(--text); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .slider { flex: none; width: 48px; height: 28px; border-radius: 999px; background: var(--border); position: relative; transition: background .2s; }
.switch .slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked + .slider { background: var(--brand); }
.switch input:checked + .slider::after { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- layout ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); min-width: 0; }
.card + .card, .grid + .card, .card + .grid, .viewing-bar + .card, .followups + .card, .followups + .grid { margin-top: 1rem; }
.card.narrow, .narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.card-head h2, .card-head h3 { margin: 0; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid.members { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 1rem; }
.empty { color: var(--muted); text-align: center; padding: 1rem 0; margin: 0; }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.5rem; box-shadow: var(--shadow); }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.auth .brand { margin-bottom: 1rem; }
.auth .brand h1 { margin: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.tab { flex: 1; font: inherit; font-weight: 600; background: none; border: 0; padding: .7rem; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }
#register-form .segmented { flex-direction: column; gap: .4rem; }
#auth-error { margin-top: .8rem; }

/* ---------- app chrome ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .6rem 16px; padding-top: max(.6rem, env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar-right { display: flex; gap: .5rem; align-items: center; min-width: 0; }
#who { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
#offline-badge { background: var(--warning); color: #1d1d1b; border-color: transparent; }

.nav { display: flex; gap: .25rem; padding: .5rem 16px; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; }
.nav a { display: flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 10px; text-decoration: none; color: var(--text-2); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.nav a.active { background: var(--brand-soft); color: var(--brand); }
main { padding: 16px; max-width: 1100px; margin: 0 auto; padding-bottom: 96px; }

@media (max-width: 720px) {
  .nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; border-top: 1px solid var(--border); border-bottom: 0;
    justify-content: space-between; gap: 0; padding: .3rem .2rem; padding-bottom: max(.3rem, env(safe-area-inset-bottom));
  }
  .nav a { flex: 1; flex-direction: column; gap: 0; font-size: .66rem; padding: .3rem .1rem; text-align: center; }
  .nav a span { font-size: 1.2rem; }
  .topbar .brand span { display: none; }
}

/* ---------- dashboard ---------- */
.viewing-bar:empty { display: none; }
.viewing-bar { margin-bottom: 1rem; }
.viewing-bar label { flex-direction: row; align-items: center; gap: .5rem; }
.viewing-bar select { width: auto; }
.tile .tile-value { font-size: 1.6rem; font-weight: 700; margin: .2rem 0; }
.tile-value { font-size: 1.4rem; font-weight: 700; }
.tile-sub { font-size: .85rem; color: var(--text-2); display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.value { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-wrap { position: relative; height: 300px; }
.chart-wrap.small { height: 220px; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--text-2); margin-top: .6rem; }
.legend span, .range-list li { display: inline-flex; align-items: center; gap: .35rem; }
.legend i, .range-list i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.range-bar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface); margin-bottom: .8rem; }
.range-bar span { min-width: 4px; }
.range-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.range-list li { display: grid; grid-template-columns: 12px 1fr auto 2.5rem; font-size: .9rem; }
.range-list li .muted { text-align: right; }

.reading-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.reading { border-left: 4px solid var(--border); padding: .4rem .7rem; background: var(--surface-2); border-radius: 8px; }

/* Level colours. Text uses darker, contrast-safe steps; fills use the status palette. */
.badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; color: #1d1d1b; }
.lvl-good { background: #c9efc9; }
.lvl-warning { background: #fde6b0; }
.lvl-serious { background: #f9d3c3; }
.lvl-critical { background: #f4c4c4; color: #7a1414; }
.lvl-good-text { color: var(--good-text); }
.lvl-warning-text { color: var(--warning-text); }
.lvl-serious-text { color: var(--serious-text); }
.lvl-critical-text { color: var(--critical-text); }
.lvl-border-in_range { border-left-color: var(--good); }
.lvl-border-elevated { border-left-color: var(--warning); }
.lvl-border-low, .lvl-border-high { border-left-color: var(--serious); }
.lvl-border-very_low, .lvl-border-very_high { border-left-color: var(--critical); }
.history-table tr[class^="lvl-row-"] td.h-date { border-left: 4px solid transparent; }
.lvl-row-in_range td.h-date { border-left-color: var(--good) !important; }
.lvl-row-elevated td.h-date { border-left-color: var(--warning) !important; }
.lvl-row-low td.h-date, .lvl-row-high td.h-date { border-left-color: var(--serious) !important; }
.lvl-row-very_low td.h-date, .lvl-row-very_high td.h-date { border-left-color: var(--critical) !important; }

/* ---------- add reading ---------- */
.value-box { display: flex; flex-direction: column; gap: .5rem; background: var(--surface-2); border-radius: 14px; padding: .8rem; }
.value-label { font-weight: 600; }
.value-row { display: flex; align-items: stretch; gap: .6rem; }
.big-input { flex: 1; min-width: 0; font-size: 2.2rem; font-weight: 700; padding: .3rem .7rem; text-align: center; font-variant-numeric: tabular-nums; }
.unit-switch { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); flex: none; }
.unit-switch button { flex: 1; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: .85rem; font-weight: 600; padding: .3rem .7rem; cursor: pointer; }
.unit-switch button.active { background: var(--brand); color: #fff; }
.unit-hint { background: #fde6b0; color: #1d1d1b; border-radius: 10px; padding: .5rem .7rem; font-size: .9rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
details.more { border: 1px solid var(--border); border-radius: 12px; padding: .2rem .8rem; }
details.more > summary { cursor: pointer; font-weight: 600; padding: .6rem 0; }
details.more[open] { padding-bottom: .8rem; }
.filters .filter-actions { grid-column: 1 / -1; }
.level-preview { border-radius: 10px; padding: 0; font-weight: 600; color: #1d1d1b; }
.level-preview:not(:empty) { padding: .55rem .8rem; }
.photo-field { display: flex; flex-direction: column; gap: .35rem; }
.photo-field .label { font-size: .9rem; color: var(--text-2); font-weight: 500; }
.photo-drop {
  position: relative; display: grid; place-items: center; min-height: 90px; border: 2px dashed var(--border);
  border-radius: 12px; background: var(--surface-2); cursor: pointer; overflow: hidden; color: var(--muted);
}
.photo-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.photo-drop img { width: 100%; height: 180px; object-fit: cover; }
.photo-drop .hint { font-size: .85rem; padding: 1rem; text-align: center; }
.linked-activity { display: flex; gap: .7rem; align-items: center; background: var(--brand-soft); border-radius: 12px; padding: .6rem; }
.linked-activity img, .followup img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: none; }
.linked-activity > div { flex: 1; min-width: 0; }
.act-icon { font-size: 1.8rem; width: 56px; text-align: center; flex: none; }

/* ---------- day log ---------- */
.day-nav { display: flex; gap: .5rem; align-items: center; }
.day-nav input { flex: 1; min-width: 0; }
.followups:empty { display: none; }
.followups { display: grid; gap: .6rem; margin-top: 1rem; }
.viewing-bar + .followups { margin-top: 0; margin-bottom: 1rem; }
.followup { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 12px; padding: .6rem .8rem; }
.followup.due { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
.followup .grow { min-width: 160px; }
/* ---------- Log: day header, totals strip, quick-log bar, compact timeline ---------- */
.day-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.day-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer; flex: none; }
.day-arrow:disabled { opacity: .3; cursor: default; }
.day-title { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.day-title #day-title { font-size: 1.35rem; font-weight: 700; color: var(--brand); }
.day-title small { color: var(--text-2); font-size: .85rem; }
/* The real date input covers the title invisibly, so tapping the title opens the date picker. */
.day-title input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; padding: 0; border: 0; min-height: 0; }
.day-actions { display: flex; justify-content: center; gap: .5rem; margin-bottom: .6rem; }
.day-actions:not(:has(> :not([hidden]))) { display: none; }
#ai-summary-share { margin-top: .6rem; }
.day-stats { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .2rem; margin-bottom: .8rem; scrollbar-width: none; }
.day-stats:empty { display: none; }
.day-stats .ds { flex: none; display: flex; flex-direction: column; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .35rem .7rem; min-width: 64px; }
.day-stats .ds b { font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-stats .ds small { font-size: .7rem; color: var(--text-2); white-space: nowrap; }

.quick-buttons { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .2rem; }
.quick-buttons::-webkit-scrollbar, .day-stats::-webkit-scrollbar { display: none; }
.quick {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 68px; padding: .2rem 0; font: inherit; font-weight: 600; font-size: .75rem;
  border: 0; background: transparent; color: var(--text); cursor: pointer; text-decoration: none;
}
.quick span { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 1.55rem; background: var(--surface-2); border: 2px solid var(--border); }
.quick:hover span { border-color: var(--brand); }
.quick-glucose span { background: color-mix(in srgb, #e05a5a 22%, var(--surface)); border-color: color-mix(in srgb, #e05a5a 45%, var(--surface)); }
.quick-bar { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: .4rem; margin-top: 1rem; }
@media (max-width: 720px) {
  /* Phone: the quick-log bar sits just above the bottom tabs, always in reach. */
  .quick-bar { position: fixed; left: 0; right: 0; bottom: var(--nav-h, 62px); z-index: 9; margin: 0; border-radius: 0;
    border-width: 1px 0 0; padding: .35rem .2rem; box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
  body[data-page="log"] main { padding-bottom: calc(var(--nav-h, 62px) + 120px); }
}
.custom-delay label { flex: 1; }

.timeline-card { padding: .2rem .8rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 3.4rem 2.6rem 1fr; gap: .6rem; padding: .7rem 0; align-items: start; border-bottom: 1px solid var(--border); }
.tl-item:last-child { border-bottom: 0; }
.tl-item.tappable { cursor: pointer; }
.tl-item.tappable:hover { background: var(--surface-2); }
.tl-item time { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; padding-top: .45rem; line-height: 1.1; }
.tl-item time small { display: block; font-size: .65rem; font-weight: 500; color: var(--muted); text-transform: uppercase; }
.tl-dot { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 1.3rem; }
.tl-reading .tl-dot { background: color-mix(in srgb, #e05a5a 20%, var(--surface)); }
.tl-meal .tl-dot, .tl-snack .tl-dot, .tl-drink .tl-dot { background: color-mix(in srgb, #f0a020 22%, var(--surface)); }
.tl-med .tl-dot, .tl-medication .tl-dot, .tl-insulin .tl-dot { background: color-mix(in srgb, #7c5ce0 20%, var(--surface)); }
.tl-exercise .tl-dot { background: color-mix(in srgb, #2a9d5c 20%, var(--surface)); }
.tl-sleep .tl-dot { background: color-mix(in srgb, #3b7ddd 20%, var(--surface)); }
.tl-body { min-width: 0; display: grid; gap: .25rem; padding-top: .15rem; }
.tl-head { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; font-size: 1.05rem; }
.tl-value .value { font-size: 1.35rem; }
.tl-desc { color: var(--text-2); }
.follow { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.follow.due { color: var(--warning-text); font-weight: 600; }

/* ---------- menu ---------- */
.menu-me { display: flex; gap: .8rem; align-items: center; }
.menu-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; flex: none; }
.menu-list { list-style: none; padding: 0; margin: 0 auto 1rem; overflow: hidden; }
.menu-list li + li { border-top: 1px solid var(--border); }
.menu-list li[hidden], .menu-list li:has(> [hidden]) { display: none; }
.menu-list a, .menu-list button { display: flex; gap: .9rem; align-items: center; padding: .85rem 1rem; color: var(--text); text-decoration: none; width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.menu-list a:hover, .menu-list button:hover { background: var(--surface-2); }
.menu-list .mi { font-size: 1.4rem; width: 2rem; text-align: center; flex: none; }
.menu-list strong { display: block; }
.menu-list small { color: var(--text-2); }
.menu-list a::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 1.4rem; }

.thumbs { display: flex; gap: .4rem; flex-wrap: wrap; }
.thumb { padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: 48px; height: 48px; cursor: zoom-in; background: var(--surface-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs.big .thumb { width: 120px; height: 90px; }
#photo-dialog { border: 0; border-radius: 14px; padding: .6rem; max-width: min(92vw, 900px); background: var(--surface); color: var(--text); }
#photo-dialog img { max-width: 100%; max-height: 78vh; display: block; margin: 0 auto .6rem; border-radius: 8px; }
#photo-dialog form { text-align: right; }
#photo-dialog::backdrop { background: rgba(0,0,0,.7); }

/* ---------- history ---------- */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; align-items: end; }
.table-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.history-table th, .history-table td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.history-table th { color: var(--text-2); font-weight: 600; font-size: .8rem; white-space: nowrap; }
.history-table .h-sum { display: none; }
@media (max-width: 720px) {
  /* Phone: each reading is a compact card — value + level on top, date · when below, then only the
     extras that exist (food, photos, notes). */
  .history-table thead, .history-table .h-date, .history-table .h-val, .history-table .h-lvl,
  .history-table .h-when, .history-table .is-empty { display: none; }
  .history-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; row-gap: .3rem;
    padding: .7rem .7rem; margin-bottom: .6rem; background: var(--surface-2); border-radius: 10px; border-left: 4px solid var(--border); }
  .history-table td { display: block; border: 0; padding: 0; grid-column: 1; }
  .history-table td.h-sum { display: block; }
  .history-table td.h-sum .value { font-size: 1.35rem; }
  .history-table td.h-edit { grid-column: 2; grid-row: 1; align-self: start; }
  .history-table td.h-edit:empty { display: none; }
  .history-table .lvl-row-in_range { border-left-color: var(--good); }
  .history-table .lvl-row-elevated { border-left-color: var(--warning); }
  .history-table .lvl-row-low, .history-table .lvl-row-high { border-left-color: var(--serious); }
  .history-table .lvl-row-very_low, .history-table .lvl-row-very_high { border-left-color: var(--critical); }
  .history-table .h-notes { font-size: .9rem; color: var(--text-2); }
}

/* ---------- family ---------- */
.invite { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.code { font: 700 1.5rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.member { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.member .card-head { width: 100%; margin-bottom: 0; }
.private { padding: .8rem; border-radius: 10px; background: var(--surface-2); color: var(--text-2); width: 100%; text-align: center; }
.admin-actions { margin-top: .4rem; border-top: 1px solid var(--border); padding-top: .5rem; width: 100%; }

/* ---------- reminders ---------- */
.reminder-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.reminder { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.reminder:last-child { border-bottom: 0; }

#toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #1d1d1b; color: #fff; padding: .7rem 1rem; border-radius: 10px; transition: .25s; z-index: 50; max-width: calc(100vw - 32px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- print (doctor report) ---------- */
@media print {
  .topbar, .nav, .filters .row, #toast, [data-edit], .viewing-bar select { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 0; padding: 0; }
  main { padding: 0; }
}

/* fixes */
.grid > .card { margin-top: 0; }
.photo-field .remove-photo { align-self: flex-start; }

/* ---------- language ---------- */
.lang-row { display: flex; justify-content: flex-end; margin: -.4rem 0 .6rem; }
.lang-row select { width: auto; min-height: 36px; padding: .3rem .6rem; font-size: .9rem; }
html[lang="zh-Hans"] body { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }

/* ---------- notifications ---------- */
.warn { color: var(--warning-text); margin: .3rem 0; }
.push-banner { display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--brand-soft); border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1rem; }

/* ---------- medicines ---------- */
.dose-list, .med-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dose { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; padding: .55rem .7rem; border-radius: 10px;
  background: var(--surface-2); border-left: 4px solid var(--border); }
.dose time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.2rem; }
.dose .grow { min-width: 140px; }
.dose-taken { border-left-color: var(--good); }
.dose-skipped { border-left-color: var(--muted); opacity: .8; }
.dose-late { border-left-color: var(--warning); }
.time-pill { display: inline-flex; align-items: center; gap: .2rem; }
.time-pill input { width: auto; }
.med-list .inactive { opacity: .6; }

/* ---------- food ranking ---------- */
.food-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.food-list li { display: grid; grid-template-columns: 48px 1fr auto; gap: .7rem; align-items: center; }
.food-list .thumb.ph { display: grid; place-items: center; font-size: 1.4rem; cursor: default; }
.food-main { min-width: 0; }
.food-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.food-bar { height: 8px; border-radius: 4px; background: var(--surface-2); margin-top: .3rem; overflow: hidden; }
.food-bar span { display: block; height: 100%; border-radius: 4px; }
.food-val { text-align: right; white-space: nowrap; }

/* ---------- doctor report ---------- */
.small-switch { align-self: center; font-size: .9rem; }
.report { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; margin-top: 1rem; }
.report section { margin-top: 1.4rem; }
.report h1 { font-size: 1.4rem; margin-bottom: .3rem; }
.report h2 { font-size: 1.05rem; border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.report-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.report-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; }
.report-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.report-table th, .report-table td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.report-table th { color: var(--text-2); font-weight: 600; font-size: .78rem; }
.report-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.report-photos figure { margin: 0; }
.report-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.report-photos figcaption { font-size: .75rem; color: var(--text-2); margin-top: .2rem; }
.report .chart-wrap { height: 260px; }
@media (max-width: 720px) { .report { padding: .8rem; } .report .table-wrap, .report section { overflow-x: auto; } }

@media print {
  @page { margin: 12mm; }
  :root { --surface: #fff; --surface-2: #f3f3f0; --border: #ddd; --text: #000; --text-2: #333; --muted: #555; }
  .no-print, .push-banner, .followups { display: none !important; }
  [data-view]:not([data-view="report"]) { display: none !important; }
  .report { border: 0; padding: 0; margin: 0; }
  .avoid-break, .report-table tr, .report-photos figure { break-inside: avoid; }
  .report h2 { break-after: avoid; }
  .badge, .range-bar span, .legend i, .food-bar span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- food tags ---------- */
.tag-picker .chips { gap: .35rem; }
.tag-btn { font: inherit; font-size: .88rem; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: .35rem .7rem; cursor: pointer; min-height: 36px; }
.tag-btn.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.new-tag { display: inline-flex; gap: .25rem; align-items: center; }
.new-tag input { width: 9rem; min-height: 36px; padding: .3rem .6rem; border-radius: 999px; font-size: .88rem; }
.new-tag .btn { min-height: 36px; border-radius: 999px; }
.tag-chips { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin: .1rem 0; }
.tag { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; padding: .08rem .45rem; border-radius: 999px;
  background: var(--brand-soft); color: var(--text); white-space: nowrap; }
.tag.big { font-size: .9rem; padding: .3rem .7rem; }
.tag-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 .1rem; font-size: .8rem; }
.history-table td .tag-chips { display: flex; }

/* ---------- top bar settings button ---------- */
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; text-decoration: none; font-size: 1.2rem; }
.icon-btn.active, .icon-btn:hover { background: var(--brand-soft); }

/* ---------- foods page ---------- */
.insights { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.insight { padding: .7rem .85rem; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--border); display: grid; gap: .3rem; }
.insight-problem { border-left-color: var(--critical); }
.insight-watch { border-left-color: var(--warning); }
.insight-good { border-left-color: var(--good); }
.insight-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tip { margin: .2rem 0 0; }
#food-analysis h3 { margin-top: .6rem; }
#food-search { margin: .3rem 0 .6rem; }
.food-cats { margin-bottom: .6rem; }
.food-db { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.food-db details { background: var(--surface-2); border-radius: 10px; }
.food-db summary { display: flex; gap: .7rem; align-items: center; justify-content: space-between; padding: .6rem .8rem; cursor: pointer; list-style: none; }
.food-db summary::-webkit-details-marker { display: none; }
.fd-name { min-width: 0; }
.fd-impact { display: grid; gap: .3rem; justify-items: end; flex: none; }
.gl-meter { width: 110px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.gl-meter span { display: block; height: 100%; border-radius: 4px; }
.gl-meter .lvl-good { background: var(--good); }
.gl-meter .lvl-warning { background: var(--warning); }
.gl-meter .lvl-serious { background: var(--serious); }
.fd-details { padding: 0 .8rem .8rem; }
.fd-nums { display: flex; gap: 1.4rem; flex-wrap: wrap; padding: .4rem 0; border-top: 1px dashed var(--border); }
.mine { margin: .3rem 0 0; }
.gi-help { margin-top: .8rem; font-size: .9rem; }
.gi-help summary { cursor: pointer; color: var(--brand); font-weight: 600; }
@media (max-width: 720px) { .gl-meter { width: 70px; } }
#followups-rem:not(:empty) { margin-bottom: 1rem; }

.boot-recovery { max-width: 420px; margin: 20vh auto 0; padding: 1.5rem; text-align: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 1rem; }

/* ---------- AI assistant ---------- */
.ai-btn { background: linear-gradient(135deg, #f3ecff, #e3f2ef); border-color: #c9b8f0; color: #3b2a7a; }
:root[data-theme="dark"] .ai-btn { background: #2b2540; color: #d9ccff; border-color: #4b3f75; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai-btn { background: #2b2540; color: #d9ccff; border-color: #4b3f75; } }
.photo-field .ai-btn { align-self: flex-start; }
.ai-result { border: 1px solid #c9b8f0; border-radius: 12px; padding: .7rem .85rem; display: grid; gap: .35rem; background: var(--surface-2); }
.ai-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ai-pill { background: #f3ecff; color: #3b2a7a; border-color: #c9b8f0; }
.plain-list { margin: .2rem 0; padding-left: 1.2rem; }
.food-ai { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.summary h3 { margin: .3rem 0 .4rem; }
.summary h4 { margin: .8rem 0 .2rem; font-size: .95rem; }
.summary ul { margin: .2rem 0; padding-left: 1.2rem; }
.summary .encourage { font-weight: 600; color: var(--brand); }
.older { margin-top: 1rem; }
.older > summary, .older details > summary { cursor: pointer; }
.older details { border-top: 1px solid var(--border); padding: .4rem 0; }
.older details > summary { list-style: none; }
.chat { display: flex; flex-direction: column; gap: .5rem; max-height: 55vh; overflow-y: auto; padding: .3rem 0; margin-bottom: .6rem; }
.msg { max-width: 88%; padding: .55rem .8rem; border-radius: 14px; line-height: 1.45; }
.msg p { margin: 0 0 .4rem; } .msg p:last-child { margin: 0; }
.msg ul { margin: .2rem 0 .4rem; padding-left: 1.1rem; }
.msg-user { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.msg-assistant { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.typing { color: var(--muted); }
.chat-input { display: flex; gap: .5rem; align-items: flex-end; margin-top: .6rem; }
.chat-input textarea { flex: 1; min-height: 48px; }
#ai-quick { margin-bottom: .2rem; }
.photo-field .camera-btn { align-self: flex-start; }

/* Text boxes grow with their content (JS fallback in app.js for older browsers). */
textarea { field-sizing: content; min-height: 4.5em; max-height: 60vh; overflow-y: auto; resize: vertical; }
.quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.quick-row .btn { min-height: 52px; }

/* ---------- full-screen alarm ---------- */
.alarm { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--brand) 85%, #000); color: #fff; animation: alarm-bg 1s ease-in-out infinite alternate; }
@keyframes alarm-bg { from { background: color-mix(in srgb, var(--brand) 90%, #000); } to { background: color-mix(in srgb, #d03b3b 80%, #000); } }
.alarm-box { text-align: center; max-width: 420px; display: grid; gap: 1rem; }
.alarm-box h2 { font-size: 1.6rem; margin: 0; }
.alarm-box p { font-size: 1.1rem; margin: 0; opacity: .95; }
.alarm-bell { font-size: 5rem; animation: ring .5s ease-in-out infinite alternate; }
@keyframes ring { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.alarm-actions { display: grid; gap: .7rem; margin-top: .5rem; }
.alarm-actions .btn { min-height: 60px; font-size: 1.2rem; }
#alarm-stop { background: #fff; color: #1d1d1b; }
@media (prefers-reduced-motion: reduce) { .alarm, .alarm-bell { animation: none; } }

/* Food search: GI first */
.gi-badge { display: inline-block; font-weight: 800; font-size: .95rem; padding: .25rem .65rem; border-radius: 999px; white-space: nowrap; color: #1d1d1b; }
.gi-badge.lvl-critical { color: #7a1414; }
.gl-row { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.gl-row .gl-meter { width: 70px; }

.food-db .more-foods { list-style: none; text-align: center; padding: .4rem 0; }
.food-db .more-foods .btn { width: 100%; }

/* AI: whose data to ask about, and the conversation picker row */
.ai-person { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chat-tools { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.chat-tools select { flex: 1; min-width: 0; }

/* ---------- Summary: patterns, month calendar, meals before & after ---------- */
.patterns { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pattern { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border-radius: 10px; background: var(--surface-2); line-height: 1.4; }
.pattern.warn { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); }
.pattern.good { background: color-mix(in srgb, var(--good) 14%, var(--surface)); }

.month-nav { display: flex; align-items: center; gap: .5rem; }
.day-arrow.small { width: 34px; height: 34px; font-size: 1.2rem; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: .5rem; }
.cal-wd { text-align: center; font-size: .75rem; color: var(--muted); font-weight: 600; padding-bottom: .2rem; }
.cal-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .3rem 0 .35rem; border: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; min-height: 62px; }
.cal-cell.empty { background: transparent; }
.cal-cell:disabled { opacity: .35; cursor: default; }
.cal-cell.today { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-num { font-size: .78rem; font-weight: 600; }
.cal-dot { width: 18px; height: 18px; border-radius: 50%; }
.cal-dot.none { background: transparent; border: 1px dashed var(--border); }
.cal-dot.low-ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--critical); }
.cal-avg { font-size: .68rem; color: var(--text-2); font-variant-numeric: tabular-nums; }

#meal-impact h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.meal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.meal-row { display: flex; gap: .7rem; align-items: center; padding: .5rem; border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.meal-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.meal-row .act-icon { width: 44px; font-size: 1.5rem; }
.meal-row .grow { min-width: 0; flex: 1; }
.meal-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.meal-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; text-align: right; }
.rise { font-size: .78rem; font-weight: 700; padding: 0 .4rem; border-radius: 999px; }
.rise.big { background: #f4c4c4; color: #7a1414; }
.rise.mid { background: #fde6b0; color: #1d1d1b; }
.rise.ok { background: #c9efc9; color: #1d1d1b; }

/* Offline outbox banner (Log) */
.outbox { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--surface));
  border-radius: 12px; padding: .6rem .8rem; margin-bottom: .8rem; }
.outbox-head { display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.outbox ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .9rem; }