/* Guides (/blog and /blog/<slug>): a reading column with live figures in it, loaded after styles.css. They follow the
   site's light and dark: the system's, unless the theme toggle sets data-theme on <html>. Colours keep the app's
   meanings: pink for links, active and interactive things and the days of the week; amber for the dose day and side
   effects; cyan for the level and the half-life; lime for weight; the protein, lime and water hues for protein, fiber
   and water; green for rest on the body map, as in the app. Cyan, lime and amber are for shapes only, never for words
   on white. Headlines in the system's display face, set tight as on the home page; numbers in Barlow Condensed.
   On dark the colours glow; on light the glow becomes a soft shadow. Every difference between the two is a token
   below, so no rule further down asks which theme it is in. */

:root {
  /* An inset panel inside a figure. */
  --panel: var(--canvas);
  /* The level's cyan and the weight's lime, deepened just enough to hold a thin line on white (3:1). */
  --line-level: #0092BC;
  --line-weight: #4C9A00;
  /* The headers' glow. */
  --glow-a: rgba(214, 15, 90, 0.11);
  --glow-b: rgba(255, 149, 0, 0.09);
  --lift: 0 1px 2px rgba(11, 11, 16, 0.04), 0 24px 48px -30px rgba(11, 11, 16, 0.2);
  --lift-hover: 0 1px 2px rgba(11, 11, 16, 0.05), 0 34px 60px -30px rgba(11, 11, 16, 0.3);
  --clock-day: #FFFFFF;
  --clock-night: #1C1C24;
  /* 1 where the colours glow (dark), 0 where they don't: scales the glows drawn in a topic's own hue. */
  --glowing: 0;
  /* The stills: the app's light screenshots. */
  --still-light: block;
  --still-dark: none;
  /* The week ring's blurred copy: a soft shadow below the ring. */
  --ring-glow-opacity: 0.35;
  --ring-glow-shift: 6px;
  /* Glows in fixed colours, none on light. */
  --fx-phone: 0 0 #0000;
  --fx-here: 0 14px 30px -14px rgba(214, 15, 90, 0.55);
  --fx-last: 0 0 #0000;
  --fx-rested: 0 0 #0000;
  --fx-amber-2: 0 0 #0000;
  --fx-amber-3: 0 0 #0000;
  --fx-today-bar: 0 0 #0000;
  --fx-done: 0 0 #0000;
  --fx-today: 0 0 #0000;
  --fx-weight-line: none;
  --fx-level-line: none;
  --fx-tape: none;
  --fx-dot: none;
  --fx-dose: none;
  --fx-dose-low: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --panel: var(--raised);
    --line-level: var(--level);
    --line-weight: var(--weight);
    --glow-a: rgba(255, 45, 120, 0.22);
    --glow-b: rgba(255, 178, 30, 0.10);
    --lift: 0 0 #0000;
    --lift-hover: 0 0 #0000;
    --clock-day: #1F2026;
    --clock-night: #000000;
    --glowing: 1;
    --still-light: none;
    --still-dark: block;
    --ring-glow-opacity: 0.9;
    --ring-glow-shift: 0px;
    --fx-phone: 0 0 90px -30px rgba(255, 45, 120, 0.55);
    --fx-here: 0 0 34px -6px rgba(255, 45, 120, 0.75);
    --fx-last: 0 0 16px -2px rgba(255, 178, 30, 0.8);
    --fx-rested: 0 0 18px -4px rgba(61, 245, 160, 0.7);
    --fx-amber-2: 0 0 12px -6px rgba(255, 178, 30, 0.7);
    --fx-amber-3: 0 0 18px -5px rgba(255, 178, 30, 0.8);
    --fx-today-bar: 0 0 18px -4px rgba(255, 45, 120, 0.75);
    --fx-done: 0 0 14px -5px rgba(255, 45, 120, 0.8);
    --fx-today: 0 0 18px -2px rgba(255, 178, 30, 0.6);
    --fx-weight-line: drop-shadow(0 0 6px rgba(184, 255, 60, 0.5));
    --fx-level-line: drop-shadow(0 0 6px rgba(30, 227, 255, 0.6));
    --fx-tape: drop-shadow(0 0 5px rgba(255, 45, 120, 0.7));
    --fx-dot: drop-shadow(0 0 4px rgba(255, 45, 120, 0.9));
    --fx-dose: drop-shadow(0 0 6px rgba(184, 255, 60, 0.45));
    --fx-dose-low: drop-shadow(0 0 6px rgba(255, 178, 30, 0.6));
  }
}
:root[data-theme="dark"] {
  --panel: var(--raised);
  --line-level: var(--level);
  --line-weight: var(--weight);
  --glow-a: rgba(255, 45, 120, 0.22);
  --glow-b: rgba(255, 178, 30, 0.10);
  --lift: 0 0 #0000;
  --lift-hover: 0 0 #0000;
  --clock-day: #1F2026;
  --clock-night: #000000;
  --glowing: 1;
  --still-light: none;
  --still-dark: block;
  --ring-glow-opacity: 0.9;
  --ring-glow-shift: 0px;
  --fx-phone: 0 0 90px -30px rgba(255, 45, 120, 0.55);
  --fx-here: 0 0 34px -6px rgba(255, 45, 120, 0.75);
  --fx-last: 0 0 16px -2px rgba(255, 178, 30, 0.8);
  --fx-rested: 0 0 18px -4px rgba(61, 245, 160, 0.7);
  --fx-amber-2: 0 0 12px -6px rgba(255, 178, 30, 0.7);
  --fx-amber-3: 0 0 18px -5px rgba(255, 178, 30, 0.8);
  --fx-today-bar: 0 0 18px -4px rgba(255, 45, 120, 0.75);
  --fx-done: 0 0 14px -5px rgba(255, 45, 120, 0.8);
  --fx-today: 0 0 18px -2px rgba(255, 178, 30, 0.6);
  --fx-weight-line: drop-shadow(0 0 6px rgba(184, 255, 60, 0.5));
  --fx-level-line: drop-shadow(0 0 6px rgba(30, 227, 255, 0.6));
  --fx-tape: drop-shadow(0 0 5px rgba(255, 45, 120, 0.7));
  --fx-dot: drop-shadow(0 0 4px rgba(255, 45, 120, 0.9));
  --fx-dose: drop-shadow(0 0 6px rgba(184, 255, 60, 0.45));
  --fx-dose-low: drop-shadow(0 0 6px rgba(255, 178, 30, 0.6));
}

/* Motion: things rise in once (blog.js). Under Reduce Motion they are simply there. */
.js .reveal { opacity: 0; translate: 0 24px; }
.lede { font: 500 clamp(18px, 1.6vw, 21px)/1.48 var(--text); letter-spacing: -0.015em; color: var(--ink-2); max-width: 34em; }
.nav nav a[aria-current] { color: var(--ink); }

/* Reading progress, along the bottom edge of the navigation bar. */
.read-progress { position: fixed; top: 56px; left: 0; right: 0; z-index: 49; height: 2px; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--amber)); transform: scaleX(0); transform-origin: 0 50%; }

/* --------------------------------------------------------------------------------------------------------------------
   Headers: a soft glow in the accent colour behind them, reaching up under the glass of the nav. */

.post-head, .blog-hero { position: relative; isolation: isolate; }
.hero-glow { position: absolute; z-index: -1; left: 0; right: 0; top: -57px; height: min(760px, 120%); pointer-events: none;
  background:
    radial-gradient(36% 58% at 76% 34%, var(--glow-a), transparent 72%),
    radial-gradient(24% 34% at 90% 8%, var(--glow-b), transparent 70%); }
.blog-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px 64px; padding-block: clamp(44px, 7vw, 104px) clamp(36px, 5vw, 64px); }
.blog-hero-copy, .post-head-inner { display: grid; gap: 18px; justify-items: start; }
.post-head-inner { padding-block: clamp(36px, 6vw, 88px) clamp(28px, 4vw, 52px); }
.blog-mark { display: block; margin-right: clamp(0px, 3vw, 48px); }
.blog-mark svg { width: clamp(168px, 18vw, 236px); height: auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.crumbs a:hover { color: var(--accent); }
.post-cat { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-strong); font: 600 14px/1.2 var(--text); color: var(--ink); }
.post-cat .icon { width: 19px; height: 19px; color: var(--hue, var(--accent)); filter: drop-shadow(0 0 calc(var(--glowing) * 6px) color-mix(in srgb, var(--hue, var(--accent)) calc(var(--glowing) * 70%), transparent)); }
.post-cat b { font: 700 17px/1 var(--num); letter-spacing: 0.01em; }
.post-head h1, .blog-hero h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.045em; max-width: 14.5em; }
.post-dek { font: 500 clamp(18px, 1.6vw, 21px)/1.46 var(--text); letter-spacing: -0.015em; color: var(--ink-2); max-width: 36em; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14.5px; color: var(--ink-3); }

/* --------------------------------------------------------------------------------------------------------------------
   The reading column, with the contents beside it on wide screens */

.post-grid { display: grid; grid-template-columns: 220px minmax(0, 720px); justify-content: center; gap: clamp(32px, 5vw, 72px); padding-block: clamp(8px, 2vw, 24px) 48px; }
.toc { position: sticky; top: 96px; align-self: start; font-size: 14px; }
.toc > p { margin-bottom: 12px; font: 700 13px/1 var(--num); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--hairline); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-3); text-decoration: none; line-height: 1.35; transition: color 0.3s, border-color 0.3s; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--accent); border-left-color: var(--accent); }

.prose { min-width: 0; font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 64px; font-size: clamp(28px, 3vw, 38px); line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); scroll-margin-top: 90px; }
.prose h3 { margin-top: 36px; font: 600 21px/1.3 var(--display); letter-spacing: -0.02em; color: var(--ink); scroll-margin-top: 90px; }
.prose h2 + *, .prose h3 + * { margin-top: 14px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--accent); font-weight: 600; }
.prose ol > li::marker { font: 700 19px var(--num); }
.pull { margin: 44px 0; padding: 2px 0 2px 24px; border-left: 3px solid; border-image: linear-gradient(var(--accent), var(--amber)) 1; }
.pull p { font: 600 clamp(22px, 2.4vw, 28px)/1.34 var(--display); letter-spacing: -0.025em; color: var(--ink); }
.callout { padding: 22px 26px; border-radius: 22px; background: var(--accent-soft); }
.callout > * + * { margin-top: 10px; }
.callout p { color: var(--ink); }

/* --------------------------------------------------------------------------------------------------------------------
   Figures: a card with the app's controls in it */

.fig { margin: 40px 0; padding: clamp(18px, 3vw, 28px); border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline), var(--lift); }
.fig figcaption { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.fig-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 14px; }
.fig-label, .fig-kicker { font: 600 14px/1.3 var(--text); color: var(--ink-2); }
.fig-label strong { font: 700 19px/1 var(--num); letter-spacing: 0.01em; color: var(--ink); }
.fig-readout { min-height: 1.5em; font-size: 15px; color: var(--ink-2); }
.fig-readout strong { color: var(--ink); }
.fig-note { font-size: 13.5px; color: var(--ink-3); }
.muted { color: var(--ink-3); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { appearance: none; display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 9px 15px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--hairline-strong); color: var(--ink-2); font: 500 14px/1.1 var(--text); cursor: pointer; transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.15s var(--ease-out); }
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--ink); }
.chip span { font: 700 15px/1 var(--num); color: var(--ink-3); }
.chip[aria-pressed="true"] span { color: var(--ink-2); }

.btn { appearance: none; border: 0; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 15px/1 var(--text); cursor: pointer; transition: transform 0.15s var(--ease-out), opacity 0.2s, box-shadow 0.3s; }
.btn:hover { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.btn-quiet { background: var(--sunken); color: var(--ink); }
.btn-quiet:hover { box-shadow: none; }
.link-btn { appearance: none; border: 0; padding: 0; background: none; color: var(--accent); font: 500 14px var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.stat-row p { display: grid; align-content: start; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--panel); }
.stat-row strong { font: 700 42px/0.9 var(--num); color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-row span { font-size: 14px; line-height: 1.4; color: var(--ink-3); }

.chart { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart .grid line { stroke: var(--hairline-strong); stroke-width: 1; stroke-dasharray: 2 6; }
.chart text { font: 600 13px var(--num); letter-spacing: 0.05em; fill: var(--ink-3); text-anchor: end; }
.chart .tick { text-anchor: middle; }

/* The app's own recordings and stills. */
.fig-clip { display: grid; justify-items: center; background: radial-gradient(70% 55% at 50% 100%, var(--accent-soft), transparent 72%), var(--surface); }
.phone { position: relative; width: min(280px, 72vw); aspect-ratio: 720 / 1558; padding: 8px; border-radius: 44px; background: #030304; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1.5px #34353B, 0 40px 80px -36px rgba(0, 0, 0, 0.55), var(--fx-phone); }
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 36px; background: #000; }
.fig-clip figcaption { max-width: 30em; text-align: center; }
.fig-still img { width: 100%; height: auto; border-radius: 16px; }
/* Both takes of a still are in the page; the theme shows one (a hidden lazy image never loads). */
.fig-still .still-light { display: var(--still-light); }
.fig-still .still-dark { display: var(--still-dark); }

/* The week ring: the app's mark, live. The days in pink, the dose day thicker in amber at the top; the blurred copy
   underneath glows on dark and is a soft shadow on light, as the mark's does. */
.fig-week-ring { display: grid; justify-items: center; gap: 18px; }
.ring-wrap { position: relative; width: min(320px, 78vw); }
.ring { width: 100%; height: auto; overflow: visible; }
.ring .seg { fill: none; stroke: var(--track); stroke-width: 14; stroke-linecap: round; transition: stroke 0.45s var(--ease-out); }
.ring .seg.is-passed { stroke: var(--accent); }
.ring .seg.is-dose { stroke: var(--amber); stroke-width: 20; }
.ring .now-ring { fill: var(--accent); }
.ring .now-hole { fill: var(--surface); }
.ring .now { transition: opacity 0.3s; }
.ring .now.is-hidden { opacity: 0; }
.ring-glow { opacity: var(--ring-glow-opacity); transform: translateY(var(--ring-glow-shift)); }
.ring-glow .seg:not(.is-passed):not(.is-dose), .ring-glow .now-hole { stroke: transparent; fill: none; }
.ring .seg-day { font: 700 14px var(--num); letter-spacing: 0.06em; fill: var(--ink-3); text-anchor: middle; dominant-baseline: middle; }
.ring .seg-day.is-dose { fill: var(--ink); }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.ring-center strong { font: 700 clamp(46px, 12vw, 66px)/0.9 var(--num); color: var(--ink); font-variant-numeric: tabular-nums; }
.ring-center span { max-width: 9em; font-size: 14.5px; line-height: 1.3; color: var(--ink-2); }
.fig-week-ring .fig-controls { justify-content: center; margin: 0; }

/* Injection sites, tinted as the app's body map: amber for the spot used last, green growing stronger the longer a
   spot has rested, a ring round the one rested longest. */
.sites-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; }
.body { position: relative; width: min(240px, 100%); margin-inline: auto; }
.body svg { width: 100%; height: auto; }
.body svg * { fill: var(--sunken); }
.spot { --age: 0.5; position: absolute; display: grid; justify-items: center; gap: 4px; padding: 4px; border: 0; background: none; transform: translate(-50%, -50%); appearance: none; cursor: pointer; color: var(--ink-2); font: 700 13px/1 var(--num); letter-spacing: 0.04em; }
.spot i { position: relative; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--good) calc(22% + var(--age) * 78%), transparent); transition: background 0.4s, transform 0.2s var(--ease-out), box-shadow 0.4s; }
.spot span { padding: 3px 7px; border-radius: 999px; background: var(--surface); white-space: nowrap; }
.spot:hover i { transform: scale(1.12); }
.spot.is-last i { background: var(--amber); box-shadow: var(--fx-last); }
.spot.is-rested i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink), var(--fx-rested); }
.spot.is-rested i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ink); animation: halo 1.5s var(--ease-out) infinite; }
.spot.is-logged i { animation: logged 0.6s var(--ease-out); }
@keyframes halo { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes logged { from { transform: scale(1.6); } to { transform: scale(1); } }
.sites-side { display: grid; gap: 10px; justify-items: start; }
.sites-pick { font: 700 25px/1.15 var(--display); letter-spacing: -0.025em; color: var(--ink); }

/* Weight: faint daily dots, the average in the weight's lime. */
.fig-trend .dots { transition: opacity 0.3s; }
.fig-trend .dots circle { fill: color-mix(in srgb, var(--ink-3) 55%, transparent); }
.fig-trend .avg { fill: none; stroke: var(--line-weight); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: var(--fx-weight-line); transition: opacity 0.3s; }
.fig-trend .hide-dots .dots, .fig-trend .hide-avg .avg { opacity: 0; }
.fig-trend .scrub { stroke: var(--accent); stroke-width: 1.5; opacity: 0; transition: opacity 0.2s; }
.fig-trend .is-scrubbing .scrub { opacity: 1; }
.fig-trend [data-show]::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink-3) 70%, transparent); }
.fig-trend [data-show="avg"]::before { width: 16px; height: 3.5px; border-radius: 2px; background: var(--line-weight); }

/* Side effects by day since the dose, in amber, as the app draws them. */
.grid7 { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; }
.col-head, .row-head { font: 700 13px/1 var(--num); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.row-head { text-align: left; }
.cell, .legend i { appearance: none; border: 0; aspect-ratio: 1; border-radius: 9px; background: var(--track); cursor: pointer; transition: background 0.3s, box-shadow 0.3s; }
.cell[data-v="1"], .legend i[data-v="1"] { background: color-mix(in srgb, var(--amber) 34%, var(--track)); }
.cell[data-v="2"], .legend i[data-v="2"] { background: color-mix(in srgb, var(--amber) 66%, var(--track)); }
.cell[data-v="3"], .legend i[data-v="3"] { background: var(--amber); }
.fig-pattern .fig-controls { justify-content: space-between; margin: 16px 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; border-radius: 4px; cursor: default; }
.cell[data-v="2"] { box-shadow: var(--fx-amber-2); }
.cell[data-v="3"] { box-shadow: var(--fx-amber-3); }

/* Food noise: the check-in's pink. */
.noise-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: end; }
.noise-grid > div:first-child { display: grid; gap: 12px; justify-items: start; }
.noise-word { font: 700 clamp(30px, 4vw, 42px)/1 var(--display); letter-spacing: -0.04em; color: var(--ink); transition: color 0.3s; }
.noise-word[data-v="3"], .noise-word[data-v="4"] { color: var(--accent); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.range-ends { display: flex; justify-content: space-between; width: 100%; margin-top: -6px; font-size: 12.5px; color: var(--ink-3); }
.week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 150px; align-items: end; padding: 12px; border-radius: 18px; background: var(--panel); }
.bar { display: flex; align-items: end; height: 100%; }
.bar i { display: block; width: 100%; height: calc(12% + var(--v) * 22%); border-radius: 8px; background: color-mix(in srgb, var(--accent) 42%, var(--track)); transition: height 0.5s var(--ease-out); }
.bar.is-today i { background: var(--accent); box-shadow: var(--fx-today-bar); }

/* Protein, fiber and water, in their own hues. */
.glasses-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.glass { appearance: none; display: grid; justify-items: center; gap: 6px; padding: 16px 8px; border: 0; border-radius: 20px; background: var(--panel); color: var(--ink); cursor: pointer; transition: transform 0.15s var(--ease-out); }
.glass:active { transform: scale(0.97); }
.glass svg { width: min(96px, 100%); height: auto; overflow: visible; }
.glass .outline { fill: none; stroke: var(--ink-3); stroke-width: 2.5; stroke-linejoin: round; }
.glass .fill { --f: 0; fill: var(--water); transform: translateY(calc(6px + (1 - var(--f)) * 104px)); transition: transform 0.7s var(--ease-out); }
.glass[data-glass="protein"] .fill { fill: var(--protein); }
.glass[data-glass="fiber"] .fill { fill: var(--weight); }
.glass .wave { fill: #FFFFFF; opacity: 0.3; animation: slosh 3s linear infinite; transform-box: fill-box; }
.glass strong { font: 600 16px var(--display); letter-spacing: -0.01em; }
.glass span { font: 700 16px/1 var(--num); letter-spacing: 0.02em; color: var(--ink-3); }
.glass.is-full span { color: var(--good); }
@keyframes slosh { to { translate: 40px 0; } }
.fig-glasses .fig-controls { margin: 14px 0 0; }

/* The dose ladder: rising steps, the current one lit, as on the home page. */
.ladder-bars { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 10px; height: 220px; align-items: end; }
.step-bar { appearance: none; display: flex; align-items: end; justify-content: center; height: var(--h); padding-bottom: 10px; border: 0; border-radius: 12px 12px 6px 6px; background: var(--track); color: var(--ink-2); font: 700 15px/1.1 var(--num); letter-spacing: 0.02em; cursor: pointer; transition: background 0.35s, color 0.35s, box-shadow 0.35s; }
.step-bar:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.step-bar.is-past { background: color-mix(in srgb, var(--accent) 22%, var(--track)); color: var(--ink); }
.step-bar.is-here { background: linear-gradient(var(--accent-light), var(--accent)); color: var(--on-accent); box-shadow: var(--fx-here); }
.fig-ladder .fig-readout { margin-top: 16px; }

/* Half-life, in the level's cyan. */
.fig-half-life .area { fill: color-mix(in srgb, var(--level) 16%, transparent); }
.fig-half-life .line { fill: none; stroke: var(--line-level); stroke-width: 2.5; stroke-linejoin: round; filter: var(--fx-level-line); }
.fig-half-life input[type="range"] { flex: 1 1 200px; width: auto; }

/* A lock screen, dark in both modes, as the home page draws it. */
.fig-notify { display: grid; gap: 18px; justify-items: center; }
.fig-notify .lock-screen { width: min(340px, 100%); padding: 34px 16px 40px; border-radius: 36px; text-align: center; color: #FFFFFF; background: radial-gradient(120% 90% at 20% 0%, #3B1230, transparent 60%), radial-gradient(90% 80% at 100% 100%, #2D1A05, transparent 60%), #0A0A10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--lift); }
.fig-notify .lock-time { font: 600 64px/1 var(--display); letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.92); }
.fig-notify .lock-date { margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.note-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-top: 46px; padding: 12px 14px; border-radius: 20px; text-align: left; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); transition: background 0.3s; }
.note-card.is-loud { background: rgba(255, 45, 120, 0.34); }
.note-icon { width: 34px; height: 34px; border-radius: 9px; background: #000000 url('/assets/mark.svg') center / 100% no-repeat; }
.note-title { font-size: 15px; font-weight: 600; }
.note-body { margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, 0.86); }
.note-when { font-size: 12px; color: rgba(255, 255, 255, 0.6); }

/* Two photos under one divider. */
.fig-compare .chips { margin-bottom: 14px; }
.compare-frame { --split: 50%; position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
.shot { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, #E6E6EC, #CDCDD5); }
.shot svg { width: auto; height: 82%; transition: transform 0.6s var(--ease-out); }
.shot svg * { fill: #84848F; }
.shot-b { clip-path: inset(0 0 0 var(--split)); transition: background 0.6s; }
.shot::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), rgba(11, 11, 16, 0.1) calc(25% - 1px) 25%); pointer-events: none; }
.shot-tag { position: absolute; top: 12px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: rgba(11, 11, 16, 0.7); color: #FFFFFF; font-size: 12.5px; font-weight: 600; }
.shot-a .shot-tag { left: 12px; }
.shot-b .shot-tag { right: 12px; }
.compare-frame[data-mode="different"] .shot-b { background: linear-gradient(180deg, #F3D9B8, #D9A877); }
.compare-frame[data-mode="different"] .shot-b svg { transform: translate(14%, 8%) scale(0.74) rotate(-3deg); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 3px; margin-left: -1.5px; background: #FFFFFF; box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); pointer-events: none; }
.compare-handle::after { content: '↔'; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; color: #0B0B10; font-weight: 700; transform: translate(-50%, -50%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.compare-frame input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* Where the tape goes. */
.measure-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; }
.torso { width: min(200px, 100%); height: auto; margin-inline: auto; overflow: visible; }
.torso > :not(.tape) { fill: var(--sunken); }
.tape { fill: none; stroke: var(--hairline-strong); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke 0.3s; }
.tape.is-on { stroke: var(--accent); stroke-width: 4; filter: var(--fx-tape); }
.measure-tip { margin-top: 16px; min-height: 3em; font: 600 18px/1.45 var(--display); letter-spacing: -0.015em; color: var(--ink); }
.mini-list { margin: 14px 0 0; padding-left: 1.2em; font-size: 15px; color: var(--ink-2); }

/* Where a log can go: in pink only where you send it; never to the grey side. */
.flow { position: relative; }
.flow svg { width: 100%; height: auto; }
.line-ok { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.55; }
.line-no { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 4 6; opacity: 0.45; }
.flow .dot { fill: var(--accent); filter: var(--fx-dot); }
.cross path { stroke: var(--ink-3); stroke-width: 3; stroke-linecap: round; }
.flow-phone { fill: var(--ink); }
.flow-phone-label { fill: var(--on-ink); font: 700 15px var(--num); letter-spacing: 0.06em; text-transform: uppercase; text-anchor: middle; }
.flow-node { position: absolute; width: 21%; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hairline-strong); color: var(--ink); font: 600 12.5px/1.25 var(--text); text-align: center; transform: translateY(-50%); appearance: none; cursor: pointer; transition: background 0.25s, color 0.25s, transform 0.15s; }
.flow-node:active { transform: translateY(-50%) scale(0.97); }
.flow-node.flow-no { left: 0; color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 70%, transparent); }
.flow-node.flow-ok { right: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.flow-node[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); text-decoration: none; }
.flow-node.flow-ok[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.flow-legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; font-weight: 600; }
.flow-legend .ok { order: 2; color: var(--accent); }
.flow-legend .no { color: var(--ink-2); }
.flow-note { min-height: 3.4em; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--panel); font-size: 15px; color: var(--ink); }

/* The label's own words, lighting up as you read. */
.fig-quote { background: radial-gradient(100% 120% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); }
.label-quote { margin: 0; font: 600 clamp(20px, 2.2vw, 26px)/1.42 var(--display); letter-spacing: -0.02em; }
.label-quote .w { opacity: 0.3; }
.fig-quote.is-read .w, html:not(.js) .label-quote .w { opacity: 1; }
.fig-quote .cite { margin-top: 14px; font-size: 14px; color: var(--ink-3); }

/* A pen: the doses left in the pen in use, as the app's supply card colours them (amber once one is left). */
.pen-svg { width: 100%; max-width: 520px; height: auto; margin-inline: auto; overflow: visible; }
.pen-body { fill: var(--sunken); }
.pen-cap { fill: var(--ink-3); }
.pen-button { fill: var(--track); }
.pen-svg .dose { fill: var(--weight); filter: var(--fx-dose); transition: fill 0.4s, opacity 0.4s; }
.fig-pen.is-low .dose { fill: var(--amber); filter: var(--fx-dose-low); }
.pen-svg .dose.is-used { fill: var(--track); filter: none; }
.fig-pen .fig-controls { margin: 16px 0 0; }

/* Time zones: two clocks, dark faces at night. */
.tz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tz-side { display: grid; align-content: start; gap: 10px; padding: 18px; border-radius: 20px; background: var(--panel); }
.tz-side label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tz-side select, .tz-side input { padding: 9px 10px; border: 1px solid var(--hairline-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: 500 16px var(--text); }
.clock { justify-self: center; width: 112px; height: 112px; }
.clock > circle:first-child { fill: var(--clock-day); stroke: var(--hairline-strong); stroke-width: 2; transition: fill 0.5s; }
.clock.is-night > circle:first-child { fill: var(--clock-night); }
.clock line { stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.clock .hand-h, .clock .hand-m { stroke: var(--ink); stroke-width: 4; transform-origin: 50px 50px; transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1); }
.clock .hand-m { stroke: var(--accent); stroke-width: 2.5; }
.clock.is-night .hand-h { stroke: #FFFFFF; }
.clock > circle:last-child { fill: var(--accent); }
.tz-out { font: 700 32px/1.05 var(--num); letter-spacing: 0.01em; color: var(--ink); }

/* Daily tablets: the days logged in pink, today ringed in amber. */
.streak-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; max-width: 420px; margin-inline: auto; }
.streak-grid .day { aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--track); appearance: none; cursor: pointer; transition: background 0.3s, box-shadow 0.3s; }
.streak-grid .day.is-done { background: var(--accent); box-shadow: var(--fx-done); }
.streak-grid .day.is-today { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--amber), var(--fx-today); }

/* Checklists that keep their ticks on this device. */
.checklist ul { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.checklist li + li { margin-top: 0; }
.checklist label { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: 14px; color: var(--ink); font-size: 17px; line-height: 1.5; cursor: pointer; transition: background 0.2s; }
.checklist label:hover { background: var(--panel); }
.checklist input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tick { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--ink-3); border-radius: 8px; transition: background 0.25s, border-color 0.25s; }
.tick svg { width: 16px; height: 16px; }
.tick path { fill: none; stroke: var(--on-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.35s var(--ease-out) 0.05s; }
.checklist input:checked + .tick { background: var(--accent); border-color: var(--accent); }
.checklist input:checked + .tick path { stroke-dashoffset: 0; }
.checklist input:checked ~ span:last-child { color: var(--ink-2); }
.checklist input:focus-visible + .tick { outline: 2px solid var(--accent); outline-offset: 3px; }
.check-meter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; font-size: 15px; color: var(--ink-2); }
.check-meter strong { font: 700 24px/1 var(--num); color: var(--ink); }
.meter { display: block; height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--amber)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease-out); }
.checklist .link-btn { margin-top: 10px; }

/* Questions, as on the home page: a list between hairlines, the plus turning into a cross. */
.faq { border-top: 1px solid var(--hairline-strong); }
.faq details { border-bottom: 1px solid var(--hairline-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font: 600 19px/1.32 var(--display); letter-spacing: -0.02em; color: var(--ink); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.plus { flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 100% no-repeat; color: var(--accent); transition: transform 0.4s var(--ease-out); }
.faq details[open] .plus { transform: rotate(45deg); }
.faq-a { padding: 0 40px 24px 0; }
.faq details[open] .faq-a { animation: open 0.4s var(--ease-out); }
@keyframes open { from { opacity: 0; translate: 0 -6px; } }

/* The end of a guide: the disclaimer, then the app on its own dark card in both modes. */
.post-disclaimer { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; margin-top: 56px !important; padding: 20px 22px; border-radius: 18px; background: var(--sunken); font-size: 15px; line-height: 1.6; }
.post-disclaimer .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--accent); }
.app-card { position: relative; overflow: hidden; isolation: isolate; margin-top: 28px !important; padding: clamp(28px, 4vw, 44px); border-radius: 30px; color: #F5F5F7; background: radial-gradient(80% 110% at 100% 0%, rgba(255, 45, 120, 0.24), transparent 62%), radial-gradient(60% 80% at 100% 100%, rgba(255, 178, 30, 0.10), transparent 70%), #0B0C0F; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--lift); }
.app-card-copy { display: grid; justify-items: start; gap: 12px; max-width: 30em; }
.app-card-mark svg { width: 52px; height: 52px; }
.app-card .mark .wr-day { stroke: #FF2D78; }
.app-card .mark .wr-dose { stroke: #FFB21E; }
.app-card .mark .wr-glow { opacity: 0.9; transform: none; }
.app-card h2 { margin: 0; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.04; letter-spacing: -0.04em; color: #F5F5F7; }
.app-card p { color: #A1A1AA; font-size: 17px; }
.app-card .nav-cta { margin-top: 6px; padding: 11px 20px; background: #F5F5F7; color: #000000; font-size: 15px; }

/* --------------------------------------------------------------------------------------------------------------------
   Cards: the list, "Keep reading". Each topic glows in its own hue (build-blog.mjs sets --hue). */

.related { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--hairline); }
.related h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.045em; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.card { --hue: var(--accent); --hue-ink: color-mix(in srgb, var(--hue) calc(84% + var(--glowing) * 16%), #000000); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 0 24px; border-radius: 26px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline), var(--lift); color: var(--ink); text-decoration: none; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--hairline-strong), var(--lift-hover); }
.card:active { transform: translateY(-1px) scale(0.99); }
.card-art { position: relative; display: grid; place-items: center; height: 136px; overflow: hidden; color: var(--hue-ink); background: radial-gradient(60% 95% at 50% 100%, color-mix(in srgb, var(--hue) 24%, transparent), transparent 75%), var(--panel); }
.card-art > .icon { width: 44px; height: 44px; filter: drop-shadow(0 0 calc(var(--glowing) * 12px) color-mix(in srgb, var(--hue) calc(var(--glowing) * 70%), transparent)); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.card:hover .card-art > .icon { transform: translateY(-4px) scale(1.08); }
.card-cat { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 700 13px/1 var(--num); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.card-cat::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 calc(var(--glowing) * 10px) color-mix(in srgb, var(--hue) calc(var(--glowing) * 100%), transparent); }
.card-cat, .card h3, .card p, .card-meta { margin-inline: 22px; }
.card h3 { font-size: 21px; line-height: 1.16; letter-spacing: -0.025em; }
.card p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.card-meta { margin-top: auto; padding-top: 6px; font-size: 13.5px; color: var(--ink-3); }
.card.is-hidden { display: none; }
@media (min-width: 1100px) {
  .cards-all { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards-all .card h3 { font-size: 19px; }
}
.blog-list { padding-bottom: clamp(70px, 9vw, 120px); }
.card-featured { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-content: start; gap: 0 36px; padding: 0; }
.card-featured .card-art { grid-row: span 5; height: auto; min-height: 300px; }
.card-featured .card-art > .icon { width: 76px; height: 76px; }
.card-featured .card-cat { margin: 40px 36px 0 0; }
.card-featured h3 { margin: 14px 36px 0 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.04; letter-spacing: -0.04em; }
.card-featured p { margin: 14px 36px 0 0; font-size: 17px; }
.card-featured .card-meta { margin: 0 36px 36px 0; padding-top: 18px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }

/* --------------------------------------------------------------------------------------------------------------------
   Still, and narrow */

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; translate: none; }
  .spot.is-rested i::after, .glass .wave { animation: none; }
  .card, .card-art > .icon, .clock .hand-h, .clock .hand-m, .glass .fill, .bar i, .meter i { transition: none; }
}
@media (max-width: 1000px) {
  .post-grid { grid-template-columns: minmax(0, 720px); }
  .toc { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-featured { grid-template-columns: minmax(0, 1fr); }
  .card-featured .card-art { grid-row: auto; min-height: 180px; }
  .card-featured .card-cat { margin: 18px 22px 0; }
  .card-featured h3, .card-featured p { margin-inline: 22px; }
  .card-featured .card-meta { margin: 0 22px 24px; }
}
@media (max-width: 760px) {
  .blog-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .blog-mark { display: none; }
  .hero-glow { background: radial-gradient(70% 46% at 78% 18%, var(--glow-a), transparent 72%), radial-gradient(40% 26% at 96% 2%, var(--glow-b), transparent 70%); }
}
@media (max-width: 640px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 17px; }
  .sites-grid, .noise-grid, .measure-grid, .tz-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: minmax(0, 1fr); }
  .grid7 { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); gap: 4px; }
  .ladder-bars { gap: 6px; height: 180px; }
  .step-bar { padding-bottom: 6px; border-radius: 10px 10px 4px 4px; font-size: 12px; }
  .chart text { font-size: 22px; }
  .flow { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .flow svg { display: none; }
  .flow-node { position: static; width: auto; font-size: 13px; transform: none; }
  .flow-node:active { transform: scale(0.97); }
  .fig { margin-inline: -6px; }
  .faq-a { padding-right: 0; }
}