/* Today's Load — site styles.
   Tokens are the app's own (docs/design-system.md, ios/.../DesignTokens.swift).
   No web fonts, no JS, no third-party requests. */

:root {
  --bg:#F6F7F9; --card:#FFFFFF; --sunken:#ECEEF2;
  --ink:#0E1726; --ink2:#55617A; --ink3:#8A93A6; --hair:#E2E6EC;
  --brand:#1E5F8C; --tint:#E8F2F8; --purpose:#1E5F8C;
  --go:#1F9E6E; --caution:#D9902A; --hold:#C24D52; --slate:#6E7891;
  --response:#2E7DB0; --rebound:#0F8C91; --stability:#8B5CC0; --reserve:#857A62;
  --g1:#739C84; --g2:#2F6F55; --g3:#0A9A3C; --o1:#BF8600; --o2:#AE4C0C; --r:#951028;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0A0E17; --card:#141A26; --sunken:#070A11;
  --ink:#F2F5FA; --ink2:#9AA5BC; --ink3:#5C6678; --hair:#232B3A;
  --brand:#4FA3D1; --tint:#12242F; --purpose:#B3DDF5;
  --go:#3CC88E; --caution:#F0B54A; --hold:#E87A7F; --slate:#8B95AD;
  --response:#4FA3D1; --rebound:#2EC4C9; --stability:#B98BE0; --reserve:#CFC4AA;
  --g1:#A9CFB6; --g2:#23A064; --g3:#2EEB6E; --o1:#F7BE3A; --o2:#FA7A22; --r:#F2425C;
} }
:root[data-theme="dark"] {
  --bg:#0A0E17; --card:#141A26; --sunken:#070A11;
  --ink:#F2F5FA; --ink2:#9AA5BC; --ink3:#5C6678; --hair:#232B3A;
  --brand:#4FA3D1; --tint:#12242F; --purpose:#B3DDF5;
  --go:#3CC88E; --caution:#F0B54A; --hold:#E87A7F; --slate:#8B95AD;
  --response:#4FA3D1; --rebound:#2EC4C9; --stability:#B98BE0; --reserve:#CFC4AA;
  --g1:#A9CFB6; --g2:#23A064; --g3:#2EEB6E; --o1:#F7BE3A; --o2:#FA7A22; --r:#F2425C;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); margin:0; padding:0 16px 72px;
  font:17px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  overflow-wrap:break-word; }
main { max-width:44rem; margin:0 auto; }
p { margin:0 0 12px; }
a { color:var(--brand); }
h1 { font-size:34px; line-height:1.12; letter-spacing:-.022em; margin:0 0 8px; text-wrap:balance; }
h2 { font-size:22px; line-height:1.2; letter-spacing:-.014em; margin:40px 0 12px; text-wrap:balance; }
h3 { font-size:17px; margin:0 0 6px; letter-spacing:-.008em; }
.lede { font-size:19px; line-height:1.4; color:var(--ink2); margin:0 0 8px; text-wrap:pretty; }
.sub { color:var(--ink2); font-size:15px; margin:0 0 28px; }
.num { font-variant-numeric:tabular-nums; }
.store-link { display:inline-flex; align-items:center; gap:12px; min-height:48px;
  padding:12px 20px; border:1px solid var(--ink); border-radius:12px;
  background:var(--ink); color:var(--bg); font-size:16px; font-weight:600;
  text-decoration:none; }
.store-link:hover { text-decoration:underline; text-underline-offset:3px; }
.store-link:focus-visible { outline:3px solid var(--brand); outline-offset:4px; }
.store-note { color:var(--ink2); font-size:14px; line-height:1.5; }

/* Header + footer */
.site { max-width:44rem; margin:0 auto; padding:20px 0 0; }
.site nav { display:flex; gap:6px 14px; flex-wrap:wrap; align-items:center;
  padding-bottom:18px; border-bottom:1px solid var(--hair); margin-bottom:32px; }
.site nav a { color:var(--ink2); text-decoration:none; font-size:15px; }
.site nav a:hover { color:var(--ink); }
.site nav a[aria-current="page"] { color:var(--ink); font-weight:600; }
.wordmark { display:inline-flex; align-items:center; gap:8px; margin-right:auto;
  color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-.01em; }
.wordmark svg { display:block; }
footer { max-width:44rem; margin:56px auto 0; padding-top:20px;
  border-top:1px solid var(--hair); color:var(--ink3); font-size:13px; }
footer p { margin:0 0 8px; }
footer a { color:var(--ink2); }

/* Cards */
.card { background:var(--card); border:1px solid var(--hair); border-radius:20px;
  padding:20px 22px; margin:0 0 16px; }
.card > :last-child { margin-bottom:0; }
.card p, .card li { color:var(--ink2); font-size:16px; }
.card strong { color:var(--ink); }
.card.tinted { background:var(--sunken); }
.headrow { display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.headrow h3 { margin:0; }
ul, ol { margin:8px 0 12px; padding-left:22px; }
li { margin:0 0 6px; }

/* Chips + status */
.chip { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 10px; border-radius:999px; white-space:nowrap;
  color:var(--ink2); background:var(--sunken); }
.chip.brand { color:var(--brand); background:var(--tint); }
.state { display:inline-flex; align-items:center; gap:7px; font-weight:700;
  font-size:13px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.state svg { flex:none; display:block; }
.state.go { color:var(--go); } .state.caution { color:var(--caution); }
.state.hold { color:var(--hold); } .state.noread { color:var(--slate); }

/* The four signals */
.signal { border-left:3px solid var(--hair); padding-left:14px; margin:0 0 14px; }
.signal.response { border-color:var(--response); } .signal.rebound { border-color:var(--rebound); }
.signal.stability { border-color:var(--stability); } .signal.reserve { border-color:var(--reserve); }
.signal h3 { color:var(--ink); }
/* The one-line read is the answer; the physiology below it is the explanation,
   so the two must not look alike. */
.signal .read { color:var(--ink); font-size:16px; margin:0 0 10px; }
.signal p + p { font-size:15px; margin:0 0 10px; }
.signal > p:last-child { margin-bottom:0; }

/* Tables */
.scroll { overflow-x:auto; margin:14px 0; }
table { border-collapse:collapse; width:100%; font-size:15px;
  font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:9px 12px 9px 0; vertical-align:top;
  border-bottom:1px solid var(--hair); color:var(--ink2); }
th { color:var(--ink3); font-size:12px; text-transform:uppercase;
  letter-spacing:.05em; font-weight:600; white-space:nowrap; }
td strong { color:var(--ink); }

/* Diagrams */
figure { margin:18px 0; }
/* The timeline's labels become unreadable if the SVG shrinks to phone width,
   so below ~600px it scrolls sideways at a legible size instead. */
figure .scroll { margin:0; }
figure svg { display:block; width:100%; min-width:600px; height:auto; }
figcaption { color:var(--ink3); font-size:13px; margin-top:8px; }

/* Legal pages */
.legal h2 { font-size:19px; margin:32px 0 10px; }
.legal p, .legal li { color:var(--ink2); font-size:16px; }
.legal strong { color:var(--ink); }

/* A single sentence a section is built around. */
.pull { color:var(--ink); font-size:19px; line-height:1.35; margin:0;
  text-wrap:pretty; letter-spacing:-.008em; }
.card .pull { color:var(--ink); font-size:19px; }

.disclaimer { color:var(--ink3); font-size:13px; }

/* The home page's opening sequence. One thought per beat, each given most of a screen:
   the science owner asked that every thought land before the next one appears. */
.flow { border-bottom:1px solid var(--hair); }
.beat { min-height:85vh; min-height:85svh; padding:48px 0;
  display:flex; flex-direction:column; justify-content:center; }
.beat.open { min-height:75vh; min-height:75svh; padding-top:0; position:relative; }
.beat > *, .beat .group > * { margin:0; }
.beat > * + * { margin-top:clamp(14px, 2.2vh, 24px); }
.beat > .group, .beat > .group + * { margin-top:clamp(22px, 4vh, 40px); }
.beat > .then { margin-top:clamp(28px, 7vh, 64px); }
.beat p { font-size:clamp(20px, 1rem + 1.1vw, 26px); line-height:1.35; color:var(--ink2);
  text-wrap:balance; }
.beat .say { font-size:clamp(34px, 1.25rem + 3.6vw, 54px); line-height:1.08;
  letter-spacing:-.026em; font-weight:700; color:var(--ink); }
.beat h1, .beat .echo { font-size:clamp(42px, 1.5rem + 5vw, 68px); line-height:1.04;
  letter-spacing:-.03em; }
.beat .mid { font-size:clamp(24px, 1.1rem + 1.9vw, 34px); line-height:1.2;
  letter-spacing:-.016em; font-weight:500; color:var(--ink); }
/* The two frozen core-message lines wear the app's purpose accent (the icon's rise blue). */
.beat .purpose { color:var(--purpose); }
.beat .sub { font-size:clamp(17px, .9rem + .5vw, 20px); line-height:1.45; max-width:34rem;
  text-wrap:pretty; }
.beat .group > * + * { margin-top:.4em; }
.beat .asks > * + * { margin-top:.55em; }
.beat .asks p { font-size:clamp(28px, 1.1rem + 2.8vw, 44px); line-height:1.15;
  letter-spacing:-.02em; font-weight:600; color:var(--ink); }
.words strong { color:var(--ink); letter-spacing:.04em; }
.triad > div { border-left:2px solid var(--brand); padding-left:16px; }
.beat .triad > div + div { margin-top:clamp(18px, 3vh, 30px); }
.triad dt { font-size:clamp(22px, 1rem + 1.4vw, 30px); font-weight:700; letter-spacing:-.012em; }
.triad dd { margin:4px 0 0; font-size:clamp(18px, .95rem + .7vw, 22px); line-height:1.4;
  color:var(--ink2); }
.hint { position:absolute; bottom:24px; left:0; color:var(--ink3); }

/* Reveals: scroll-driven, CSS only, and only where the browser supports it AND the reader
   has not asked for less motion. Outside these two guards nothing is ever hidden. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Every range ends by cover 19% — the line in the lowest fifth of the screen — because
       the last line of a tall beat sits that low while its beat is centred, and a thought
       still half-faded while you are reading it has not landed. */
    @keyframes land { from { opacity:0; transform:translateY(16px); } }
    .beat:not(.open) > :not(.group), .beat .group > * {
      animation:land 1ms ease-out both;
      animation-timeline:view();
      animation-range:entry 0% cover 16%;
    }
    .beat .group > :nth-child(2) { animation-range:entry 25% cover 17%; }
    .beat .group > :nth-child(3) { animation-range:entry 50% cover 18%; }
    .beat .group > :nth-child(n+4) { animation-range:entry 75% cover 19%; }
    .beat:not(.open) > .then { animation-range:entry 50% cover 18%; }
  }
}