/*
 * bgcast — design system.
 *
 * LIGHT, full stop. The app is single-theme by design: there is no prefers-color-scheme
 * block and no dark palette, so a dark OS cannot quietly recolour a health app the user
 * reads at a glance. `color-scheme: light` below tells the browser to render form
 * controls to match.
 *
 * COLOUR: glucose state uses the STATUS palette (state), never the categorical one
 * (identity). Three states only — the validator scores warning #fab219 against serious
 * #ec835a at normal-vision dE 13.6, below the 15 floor, so a fourth hue would put a
 * genuinely confusable pair on screen. Colour never stands alone: every state carries a
 * word or a position too.
 */

:root {
  color-scheme: light;

  --plane: #faf9f7;
  --surface: #ffffff;
  --surface-2: #f3f2ef;
  --ink: #14130f;
  --ink-2: #56544d;
  --ink-3: #8d8b82;
  --line: #eae8e2;
  --line-strong: #d8d5cc;

  --trace: #2a78d6;
  --good: #0ca30c;
  --warn: #fab219;
  --crit: #d03b3b;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;

  --shadow: 0 1px 2px rgba(20, 19, 15, 0.04), 0 4px 14px rgba(20, 19, 15, 0.035);
  --shadow-lift: 0 2px 6px rgba(20, 19, 15, 0.06), 0 14px 34px rgba(20, 19, 15, 0.07);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ------------------------------------------------------------------- chrome */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1.35rem;
  background: color-mix(in srgb, var(--plane) 82%, transparent);
  backdrop-filter: saturate(1.7) blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 1.02rem; font-weight: 640; letter-spacing: -0.025em;
  text-decoration: none; color: var(--ink);
}
/* The brand dot doubles as an always-visible status light. */
.brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.brand-dot[data-state="in_range"] { background: var(--good); }
.brand-dot[data-state="high"] { background: var(--warn); }
.brand-dot[data-state="low"] { background: var(--crit); }

.topnav { display: flex; align-items: center; gap: 0.2rem; }
.topnav a, .topnav button {
  font: inherit; font-size: 0.85rem; color: var(--ink-2); text-decoration: none;
  padding: 0.34rem 0.72rem; border-radius: 999px; border: 0; background: none; cursor: pointer;
}
.topnav a:hover, .topnav button:hover { background: var(--surface-2); color: var(--ink); }
.topnav a.is-active { background: var(--surface-2); color: var(--ink); font-weight: 550; }
.topnav form { display: flex; }

.wrap { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.35rem 5rem; }

/* --------------------------------------------------------------------- now */

.now {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 0 0.25rem 1.4rem;
}
.now-left { display: flex; align-items: baseline; gap: 0.5rem; }
/* Proportional figures: tabular-nums makes a large standalone number look loose. */
.now-value {
  font-size: 4.2rem; font-weight: 630; line-height: 0.88;
  letter-spacing: -0.05em; font-variant-numeric: proportional-nums;
}
.now-arrow { font-size: 1.7rem; color: var(--ink-3); line-height: 1; }
.now-right { text-align: right; padding-bottom: 0.3rem; }

.chip {
  display: inline-flex; align-items: center; gap: 0.38rem;
  padding: 0.2rem 0.62rem 0.2rem 0.5rem; border-radius: 999px;
  background: var(--surface-2); font-size: 0.78rem; font-weight: 560; color: var(--ink-2);
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.chip[data-state="in_range"] .chip-dot { background: var(--good); }
.chip[data-state="high"] .chip-dot { background: var(--warn); }
.chip[data-state="low"] .chip-dot { background: var(--crit); }
.chip[data-urgent="true"] { box-shadow: inset 0 0 0 1.5px var(--crit); }

.now-meta { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.35rem; }
.now[data-stale="true"] .now-value, .now[data-stale="true"] .now-arrow { opacity: 0.35; }

.stale-flag {
  margin: 0 0 1rem; padding: 0.55rem 0.85rem; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  color: var(--ink-2); font-size: 0.8rem;
}

/* ------------------------------------------------------------------- range */

.range {
  display: flex; gap: 0.2rem; padding: 0.2rem; margin-bottom: 1.1rem;
  background: var(--surface-2); border-radius: 999px; width: fit-content;
}
.range a {
  font-size: 0.79rem; color: var(--ink-2); text-decoration: none;
  padding: 0.28rem 0.78rem; border-radius: 999px;
}
.range a.is-active { background: var(--surface); color: var(--ink); font-weight: 570; box-shadow: var(--shadow); }

/* ------------------------------------------------------------------ stream */

/*
 * The stream is the chart. Each reading sits at a horizontal position set by its value,
 * so scanning down the column reads as the trace rotated ninety degrees — and an event
 * never lives somewhere separate from the glucose it relates to.
 */
.stream { position: relative; }

/* The in-range band, drawn once behind every row. */
.stream-band {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--good) 7%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--good) 22%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--good) 22%, transparent);
  pointer-events: none;
  z-index: 0;
}

.daymark {
  position: sticky; top: 3.3rem; z-index: 10;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 1rem 0 0.5rem;
  font-size: 0.72rem; font-weight: 620; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3);
  background: linear-gradient(var(--plane) 72%, transparent);
}
.daymark::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 3.1rem 1fr; align-items: center;
  min-height: 1.95rem;
}
.row-time {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.72rem; color: var(--ink-3); text-align: right; padding-right: 0.85rem;
}

/* ---- reading rows ---- */

.row-track { position: relative; height: 1.95rem; }
/* A hairline spine so consecutive readings read as one continuous series. */
.row-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--line);
}
.mark {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--trace);
  box-shadow: 0 0 0 2.5px var(--plane);   /* surface ring keeps it legible over the band */
}
.mark[data-state="low"] { background: var(--crit); }
.mark[data-state="high"] { background: var(--warn); }

.row-value {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 0.76rem; font-variant-numeric: tabular-nums; color: var(--ink-3);
  white-space: nowrap;
}
/* Out-of-range readings are kept regardless of cadence, so they get the emphasis too. */
.row[data-notable="true"] .row-value { color: var(--ink); font-weight: 570; }
.row[data-notable="true"] .mark { width: 11px; height: 11px; }

/* ---- event rows ---- */

.row-event { min-height: 2.9rem; }
.event {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0.3rem 0; padding: 0.55rem 0.85rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.event-icon {
  width: 1.55rem; height: 1.55rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 0.72rem;
  background: var(--surface-2); color: var(--ink-2);
}
.row[data-kind="dose"] .event-icon { background: color-mix(in srgb, var(--trace) 14%, var(--surface)); color: var(--trace); }
.row[data-severity="critical"] .event-icon { background: color-mix(in srgb, var(--crit) 13%, var(--surface)); color: var(--crit); }
.row[data-severity="warn"] .event-icon { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: #8a6100; }

.event-body { flex: 1; min-width: 0; }
.event-title { font-size: 0.88rem; font-weight: 545; }
.event-detail { font-size: 0.76rem; color: var(--ink-3); }

/* Outcome is a word first; the tint only reinforces it. */
.outcome {
  flex: none; font-size: 0.69rem; font-weight: 570;
  padding: 0.14rem 0.5rem; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.outcome[data-o="confirmed"], .outcome[data-o="delivered"] {
  background: color-mix(in srgb, var(--good) 13%, var(--surface)); color: #067806;
}
.outcome[data-o="failed"] { background: color-mix(in srgb, var(--crit) 11%, var(--surface)); color: var(--crit); }
.outcome[data-o="pending"] { background: color-mix(in srgb, var(--warn) 17%, var(--surface)); color: #8a6100; }

.stream-empty {
  padding: 2.5rem 1.5rem; text-align: center; color: var(--ink-3); font-size: 0.87rem;
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r);
}

/*
 * The scale sticks below the top bar. Marker positions are meaningless without it, so
 * it has to stay on screen for the whole scroll rather than sitting at one end.
 */
.scale {
  position: sticky; top: 3.25rem; z-index: 15;
  height: 1.65rem;
  margin-bottom: 0.15rem;
  background: color-mix(in srgb, var(--plane) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.scale .tick {
  position: absolute; bottom: 0.3rem; transform: translateX(-50%);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.67rem; color: var(--ink-3); white-space: nowrap;
}
/* The end labels would otherwise hang off the edges. */
.scale .tick:first-of-type { transform: none; }
.scale .tick:nth-of-type(4) { transform: translateX(-100%); }
.scale-unit {
  position: absolute; left: 0; bottom: 0.3rem;
  font-size: 0.64rem; color: var(--ink-3); opacity: 0.75;
}

/* Faint verticals tying each row's marker back to the scale above. */
.stream-tick {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--line); opacity: 0.7; pointer-events: none; z-index: 0;
}

/* ------------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; margin-bottom: 0.35rem; }
@media (max-width: 34rem) { .stats { grid-template-columns: repeat(2, 1fr); } }

.stat {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0.7rem 0.85rem; box-shadow: var(--shadow);
}
.stat-label { font-size: 0.71rem; color: var(--ink-3); }
.stat-value { font-size: 1.32rem; font-weight: 640; letter-spacing: -0.025em; line-height: 1.25; }
.stat-value small { font-size: 0.65rem; font-weight: 450; color: var(--ink-3); margin-left: 0.14rem; }

/*
 * Delta badge. Coloured by MEANING rather than by sign — less time below range is an
 * improvement even though the number fell. `data-tone` is set from the stat's own idea
 * of which direction is better.
 */
.delta {
  position: absolute; top: 0.65rem; right: 0.7rem;
  font-size: 0.66rem; font-weight: 600;
  padding: 0.08rem 0.35rem; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--ink-3);
}
.delta[data-tone="good"] { background: color-mix(in srgb, var(--good) 13%, var(--surface)); color: #067806; }
.delta[data-tone="bad"] { background: color-mix(in srgb, var(--crit) 11%, var(--surface)); color: var(--crit); }

.stats-note { margin: 0 0 1.1rem; font-size: 0.71rem; color: var(--ink-3); }

/* ------------------------------------------------------------ generic bits */

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.2rem; margin-bottom: 0.85rem; box-shadow: var(--shadow);
}
.card h1 { font-size: 1rem; margin: 0 0 0.45rem; font-weight: 620; }
.card h2 { font-size: 0.87rem; margin: 0 0 0.5rem; font-weight: 600; color: var(--ink-2); }
.card p { color: var(--ink-2); font-size: 0.87rem; margin: 0 0 0.8rem; }
.card p:last-child { margin-bottom: 0; }
.card.ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.card ul { margin: 0; padding-left: 1.15rem; color: var(--ink-2); font-size: 0.87rem; }
.card li { margin-bottom: 0.4rem; }
.card strong { color: var(--ink); }

.page-title { font-size: 1.35rem; font-weight: 660; letter-spacing: -0.025em; margin: 0.3rem 0 1.1rem; }
.lede { color: var(--ink-2); font-size: 0.9rem; }
.muted-text { color: var(--ink-3); font-size: 0.85rem; }
.muted-text[data-tone="ok"] { color: #067806; }
.muted-text[data-tone="warn"] { color: #8a6100; }

label { display: block; font-size: 0.75rem; color: var(--ink-3); margin: 0.8rem 0 0.25rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="time"], select {
  width: 100%; padding: 0.5rem 0.65rem;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--ink); font: inherit; font-size: 0.89rem;
}
input:focus, select:focus, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--trace); outline-offset: 1px;
}

button[type="submit"]:not(.linkish), .button {
  display: inline-block; padding: 0.5rem 0.95rem;
  background: var(--ink); color: var(--plane); border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: 0.85rem; font-weight: 560; cursor: pointer; text-decoration: none;
}
button[type="submit"]:not(.linkish):hover, .button:hover { opacity: 0.87; }
.button.secondary { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-strong); }
.button.secondary:hover { color: var(--ink); opacity: 1; }
.button.small { padding: 0.34rem 0.7rem; font-size: 0.77rem; }
button:disabled { opacity: 0.42; cursor: not-allowed; }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--ink-2); }

.hint { font-size: 0.75rem; color: var(--ink-3); margin: 0.3rem 0 0; }
.fineprint { font-size: 0.73rem; color: var(--ink-3); margin-top: 0.85rem; line-height: 1.5; }

.error {
  padding: 0.55rem 0.75rem; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--crit) 9%, var(--surface));
  color: var(--crit); font-size: 0.84rem; margin: 0 0 0.7rem; white-space: pre-wrap;
}

.advice {
  padding: 0.7rem 0.9rem; border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 0.82rem; color: var(--ink-2); margin-bottom: 0.9rem;
}
.advice strong { color: var(--ink); display: block; margin-bottom: 0.15rem; }

.formula {
  font-family: var(--mono); font-size: 0.77rem; background: var(--surface-2);
  border-radius: var(--r-sm); padding: 0.7rem 0.85rem; overflow-x: auto; color: var(--ink-2);
}
code { font-family: var(--mono); font-size: 0.86em; }

/* ------------------------------------------------------------ settings hub */

.settings-list { display: grid; gap: 0.55rem; }
.settings-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); text-decoration: none; box-shadow: var(--shadow);
}
.settings-link:hover { box-shadow: var(--shadow-lift); }
.settings-link h3 { margin: 0; font-size: 0.91rem; font-weight: 580; }
.settings-link p { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--ink-3); }
.settings-link .arrow { color: var(--ink-3); font-size: 1.1rem; }

.rule { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.rule:last-of-type { border-bottom: 0; padding-bottom: 0; }
.rule-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.rule-name { font-weight: 570; font-size: 0.89rem; }
.rule-help { color: var(--ink-3); font-size: 0.77rem; margin: 0.2rem 0 0.5rem; }
.rule-fields { display: flex; align-items: flex-end; gap: 0.55rem; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; }
.field label { margin: 0 0 0.2rem; }
.field input { width: 8.5rem; }

.switch { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; cursor: pointer; font-size: 0.89rem; color: var(--ink); }
.switch input { width: 1rem; height: 1rem; accent-color: var(--trace); cursor: pointer; }

.tier {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
  padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-3);
}
.tier-critical { background: color-mix(in srgb, var(--crit) 11%, var(--surface)); color: var(--crit); }
.tier-action { background: color-mix(in srgb, var(--warn) 17%, var(--surface)); color: #8a6100; }

/* ------------------------------------------------------------------ tables */

.table-scroll { max-height: 20rem; overflow: auto; margin-top: 0.7rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.81rem; }
th, td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
th { color: var(--ink-3); font-weight: 560; font-size: 0.73rem; position: sticky; top: 0; background: var(--surface); }
/* tabular-nums belongs here: columns that must align vertically. */
td.n, td.t { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.t { color: var(--ink-3); }
summary { cursor: pointer; font-size: 0.85rem; color: var(--ink-2); display: flex; align-items: baseline; gap: 0.6rem; }
.summary-hint { font-size: 0.73rem; color: var(--ink-3); }

/* -------------------------------------------------------------- auth pages */

body.centered { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
main.narrow { max-width: 24rem; width: 100%; padding: 2rem 1.25rem; }
.brand.big { font-size: 1.3rem; justify-content: center; margin-bottom: 1.2rem; }
.tagline { color: var(--ink-3); font-size: 0.83rem; margin: 0 0 1.4rem; }
.tagline.centered-text { text-align: center; }

/* ---------------------------------------------------------------- footnote */

.footnote {
  margin-top: 2.5rem; font-size: 0.75rem; color: var(--ink-3);
  line-height: 1.55; text-align: center;
}
.footnote strong { color: var(--ink-2); font-weight: 560; }

/* Version stamp under the About disclaimer: a quiet build marker, set on its own line as a
   monospace tag so it reads as data rather than part of the sentence. */
.footnote .version {
  display: block; width: fit-content; margin: 0.7rem auto 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.68rem;
  color: var(--ink-3); padding: 0.12rem 0.5rem;
  border: 1px solid var(--line); border-radius: 999px;
}

/* ----------------------------------------------------------- public pages */

/*
 * Landing and sign-in — the only two pages a signed-out visitor sees. Deliberately built
 * from the same primitives as the dashboard (.topbar, .wrap, .now, .stats, .card,
 * .footnote) rather than a separate marketing skin: someone arriving here should feel
 * they are already looking at the app. The few rules below only set the landing's
 * headline and the section dividers; everything else is reused as-is.
 */

.lp-hero { padding: 1.6rem 0 0.6rem; }
.lp-title {
  font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.03; letter-spacing: -0.038em;
  font-weight: 680; margin: 0 0 0.75rem; max-width: 15ch;
}
.lp-title .lp-accent { color: var(--trace); }
.lp-hero .lede { max-width: 33rem; }
.lp-hero .btn-row { margin-top: 1.25rem; }

/*
 * A quiet section divider. Same visual language as the timeline's .daymark — an uppercase
 * label trailed by a hairline rule — but without the sticky behaviour, which only makes
 * sense over a scrolling stream.
 */
.lp-mark {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 2.1rem 0 1rem;
  font-size: 0.72rem; font-weight: 620; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3);
}
.lp-mark::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.lp-list { margin: 0; padding-left: 1.15rem; color: var(--ink-2); font-size: 0.87rem; }
.lp-list li { margin-bottom: 0.5rem; }
.lp-list li:last-child { margin-bottom: 0; }
.lp-list strong { color: var(--ink); }

/* -------------------------------------------------------------- sign-in */

.auth-card {
  width: 100%; max-width: 23rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.7rem 1.55rem 1.5rem; box-shadow: var(--shadow);
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-bottom: 1.35rem; }
.auth-brand .brand.big { margin-bottom: 0; }
.auth-brand .tagline { margin: 0; }
.auth-card h1 { font-size: 1.05rem; font-weight: 640; letter-spacing: -0.02em; text-align: center; margin: 0 0 0.2rem; }
.auth-lede { text-align: center; color: var(--ink-3); font-size: 0.82rem; margin: 0 0 1.15rem; }
.auth-card button[type="submit"] { width: 100%; margin-top: 1.3rem; }
.auth-foot { text-align: center; margin-top: 1.25rem; font-size: 0.8rem; color: var(--ink-3); }
.auth-foot a { color: var(--ink-2); text-decoration: none; }
.auth-foot a:hover { color: var(--ink); text-decoration: underline; }