/* EB Garamond — self-hosted (SIL OFL). Deliberately NOT loaded from Google:
   hotlinking would send every visitor's IP to a third party, which contradicts
   the promise that nothing leaves your browser. Latin subset only, 154 KB. */
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/ebgaramond-400.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/ebgaramond-500.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/ebgaramond-600.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('fonts/ebgaramond-400-italic.woff2') format('woff2'); }

/* FaithMirror — dark-first app UI.
   Borderless surfaces, large radii, one sans stack, floating capsule nav. */

:root {
  /* White is the default. Page a hair off pure white so the white cards read
     against it; the dark theme is opt-in below. */
  --bg: #f8f9fb;
  --surface: #ffffff;
  --surface-2: #eef0f4;
  --surface-3: #e3e6ec;
  --ink: #14141a;
  --ink-2: #545460;
  --ink-3: #8a8a97;
  --line: #e7e9ef;
  --accent: #3f5fd0;
  --on-accent: #ffffff;
  --gold: #97671c;
  --high: #007e4e;
  --mid: #97671c;
  --low: #c05a3e;
  --high-fill: rgba(0,126,78,.10);
  --mid-fill: rgba(151,103,28,.11);
  --low-fill: rgba(192,90,62,.10);

  --c-indigo: #3f5fd0; --c-violet: #7a45c0; --c-cyan: #006f85; --c-sky: #1f6fb5;
  --c-teal: #006e53;   --c-green: #087239;  --c-amber: #97671c; --c-rose: #b6486a;
  --c-slate: #4b5a75;

  /* Chroma note: cyan and teal sit at ~0.09, just under the 0.10 floor. That is
     an sRGB gamut limit at these hues, not a tuning miss - and it is acceptable
     because both are only ever a SINGLE series under its own title, or a dot
     beside a text label. Neither is ever discriminated against another hue.
     Slate is deliberately low-chroma: raising it turns it blue and collides
     with indigo, breaking the 1:1 dimension-to-hue mapping. */
  --k-accent: #3f5fd0; --k-up: #007e4e; --k-down: #c05a3e; --k-zero: #9a9aa6;
  --k-grid: #edeef3; --k-axis: #d9dce4;
  --k-indigo: #3f5fd0; --k-violet: #7a45c0; --k-cyan: #006f85; --k-sky: #1f6fb5;
  --k-teal: #006e53;   --k-green: #087239;  --k-amber: #97671c; --k-rose: #b6486a;
  --k-slate: #4b5a75;

  /* decorative only — never used to encode anything */
  --art-warm: #f2d49f; --art-mid: #e9adbb; --art-cool: #aeb8e6;

  --r-xl: 24px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --maxw: 640px;
  --serif: 'EB Garamond', ui-serif, Georgia, 'Iowan Old Style', serif;
  --sans: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #0e0e12; --surface: #17171c; --surface-2: #202027; --surface-3: #2a2a33;
  --ink: #f2f2f5; --ink-2: #a6a6b2; --ink-3: #71717d; --line: #24242c;
  --accent: #a9b6e6; --on-accent: #0e0e12;
  --gold: #d8b06a; --high: #5ec48f; --mid: #e3b063; --low: #e78d72;
  --high-fill: rgba(94,196,143,.14); --mid-fill: rgba(227,176,99,.14); --low-fill: rgba(231,141,114,.14);
  --c-indigo: #8b9cf8; --c-violet: #b48cf2; --c-cyan: #5fc8d8; --c-sky: #6cb6f5; --c-teal: #57c6a5;
  --c-green: #6cc487; --c-amber: #e0ad5c; --c-rose: #ef8fa8; --c-slate: #96a6c0;
  --k-accent: #6977d0; --k-up: #3f9c6d; --k-down: #c9603f; --k-zero: #5a5a66;
  --k-grid: #202027; --k-axis: #30303a;
  --k-indigo: #6977d0; --k-violet: #9068ca; --k-cyan: #0095ab; --k-sky: #2986cb;
  --k-teal: #009975; --k-green: #2f9757; --k-amber: #ac7300; --k-rose: #c05978; --k-slate: #6d7f9c;
  --art-warm: #e3b063; --art-mid: #ef8fa8; --art-cool: #8b9cf8;
  }
}
:root[data-theme="dark"] {
  --bg: #0e0e12; --surface: #17171c; --surface-2: #202027; --surface-3: #2a2a33;
  --ink: #f2f2f5; --ink-2: #a6a6b2; --ink-3: #71717d; --line: #24242c;
  --accent: #a9b6e6; --on-accent: #0e0e12;
  --gold: #d8b06a; --high: #5ec48f; --mid: #e3b063; --low: #e78d72;
  --high-fill: rgba(94,196,143,.14); --mid-fill: rgba(227,176,99,.14); --low-fill: rgba(231,141,114,.14);
  --c-indigo: #8b9cf8; --c-violet: #b48cf2; --c-cyan: #5fc8d8; --c-sky: #6cb6f5; --c-teal: #57c6a5;
  --c-green: #6cc487; --c-amber: #e0ad5c; --c-rose: #ef8fa8; --c-slate: #96a6c0;
  --k-accent: #6977d0; --k-up: #3f9c6d; --k-down: #c9603f; --k-zero: #5a5a66;
  --k-grid: #202027; --k-axis: #30303a;
  --k-indigo: #6977d0; --k-violet: #9068ca; --k-cyan: #0095ab; --k-sky: #2986cb;
  --k-teal: #009975; --k-green: #2f9757; --k-amber: #ac7300; --k-rose: #c05978; --k-slate: #6d7f9c;
  --art-warm: #e3b063; --art-mid: #ef8fa8; --art-cool: #8b9cf8;
}

/* NOTE: a custom property declared on :root computes there, so a token like
   --accent-fill would NOT follow a subtree that overrides --accent. Anything
   that must re-tint therefore color-mixes at the point of use. */
:root { --accent-fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.tint-fill { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* data-c names an identity hue; .tint remaps --accent to it for a whole screen. */
[data-c="indigo"] { --c: var(--c-indigo); }
[data-c="violet"] { --c: var(--c-violet); }
[data-c="cyan"]   { --c: var(--c-cyan); }
[data-c="sky"]    { --c: var(--c-sky); }
[data-c="teal"]   { --c: var(--c-teal); }
[data-c="green"]  { --c: var(--c-green); }
[data-c="amber"]  { --c: var(--c-amber); }
[data-c="rose"]   { --c: var(--c-rose); }
[data-c="slate"]  { --c: var(--c-slate); }
.tint { --accent: var(--c, var(--accent)); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 17px; }   /* the one dial the desktop breakpoints turn */
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.62 var(--serif);   /* Garamond wants more leading than a sans */
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.22; letter-spacing: -.004em;
  font-weight: 600; font-family: var(--serif); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .9em; }
a { color: var(--accent); }
em { font-style: italic; }

/* serif only where you actually read at length */
.serif { font-family: var(--serif); }

/* ============ shell ============ */
.app { max-width: var(--maxw); margin: 0 auto; padding: 0 16px 110px; }

header.top {
  position: sticky; top: 0; z-index: 30;
  margin: 0 -16px; padding: 10px 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  display: flex; align-items: center; gap: 8px; min-height: 58px;
}
header.top.scrolled { box-shadow: 0 1px 0 var(--line); }
/* landing page: controls only, no title, no hairline */
header.top.bare { background: none; backdrop-filter: none; box-shadow: none; min-height: 46px; }
header.top.bare .pagetitle { display: none; }
header.top.bare::before { content: ''; flex: 1; }

.pagetitle {
  font-size: 1.42rem; font-weight: 700; letter-spacing: -.025em; margin: 0;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top .spacer { flex: 1; }

.iconbtn {
  border: 0; background: var(--surface-2); color: var(--ink-2);
  border-radius: 50%; width: 36px; height: 36px; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  padding: 0; min-height: 0;
}
.iconbtn:hover { color: var(--ink); background: var(--surface-3); }
.navback {
  border: 0; background: var(--surface-2); color: var(--ink); cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; padding: 0; min-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
}
.navback:hover { background: var(--surface-3); }

/* ============ primitives ============ */
.card {
  background: var(--surface); border: 0; border-radius: var(--r-lg);
  padding: 18px; margin: 0 0 12px;
}
.card.flat { background: none; padding: 0; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.center { text-align: center; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row.between { justify-content: space-between; align-items: center; }

.seclabel {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 22px 0 10px;
}
.seclabel:first-child { margin-top: 4px; }

button, .btn {
  font: 500 .92rem/1.2 var(--sans);
  border-radius: var(--r-md); border: 0;
  background: var(--surface-2); color: var(--ink); padding: 12px 16px;
  cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; min-height: 44px;
}
button:hover, .btn:hover { background: var(--surface-3); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { padding: 8px 14px; min-height: 38px; font-size: .85rem; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
button:disabled { opacity: .4; cursor: default; }

.pill {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  padding: 4px 10px; border-radius: 999px; border: 0;
  color: var(--ink-2); background: var(--surface-2); white-space: nowrap;
}
.pill.high { color: var(--high); background: var(--high-fill); }
.pill.mid  { color: var(--mid);  background: var(--mid-fill); }
.pill.low  { color: var(--low);  background: var(--low-fill); }
.pill.accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

.note {
  background: var(--surface-2); border-radius: var(--r-md);
  padding: 12px 14px; font-size: .85rem; color: var(--ink-2); line-height: 1.5;
}
.note strong { color: var(--ink); font-weight: 600; }

.verse {
  border-left: 2px solid var(--accent); padding: 1px 0 1px 13px;
  color: var(--ink-2); font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; line-height: 1.5;
}

/* ============ search ============ */
.searchfield {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border-radius: var(--r-md);
  padding: 0 14px; margin: 0 0 16px;
}
.searchfield span { color: var(--ink-3); font-size: .95rem; }
.searchfield input {
  border: 0; background: none; padding: 13px 0; width: 100%;
  color: var(--ink); font: 400 .95rem var(--sans);
}
.searchfield input:focus { outline: none; }
.searchfield:focus-within { background: var(--surface-3); }

/* ============ audience cards + page taglines ============ */
.tagline {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.45;
  color: var(--ink); margin: 2px 0 14px;
}
.audgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 4px; }
@media (min-width: 600px) { .audgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.aud {
  display: flex; gap: 12px; align-items: flex-start; min-width: 0;
  background: var(--surface); border-radius: var(--r-md); padding: 13px 14px;
}
.aud-i { font-size: 1.05rem; line-height: 1.4; flex: 0 0 auto; opacity: .85; }
.aud > div { min-width: 0; }
.aud strong { display: block; font-size: .93rem; font-weight: 650; letter-spacing: -.01em; }
.aud span { display: block; font-size: .85rem; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }

/* ============ hero ============ */
.hero {
  border-radius: var(--r-xl); padding: 22px; margin: 0 0 16px;
  background:
    radial-gradient(120% 140% at 10% 6%, color-mix(in srgb, var(--c, var(--accent)) 40%, transparent), transparent 58%),
    radial-gradient(130% 130% at 94% 98%, color-mix(in srgb, var(--c2, var(--gold)) 30%, transparent), transparent 60%),
    var(--surface);
}
.hero .kicker { color: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--ink-2)); }
.hero .kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 12px;
}
.hero .htext {
  font-family: var(--serif); font-size: 1.32rem; line-height: 1.38;
  letter-spacing: -.01em; margin: 0 0 12px;
}
.hero .href { font-size: .82rem; font-weight: 600; color: var(--ink-2); }

/* ============ rows (home nav, tests, journeys, questions) ============ */
/* minmax(0,1fr) + min-width:0 stop the nowrap subtitle from setting a
   min-content floor that the grid item refuses to shrink below. */
.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rowitem {
  display: flex; align-items: center; gap: 13px; width: 100%; min-width: 0; text-align: left;
  background: var(--surface); border-radius: var(--r-lg); padding: 13px 14px; min-height: 62px;
}
.rowitem .pill, .rowitem .chev { flex: 0 0 auto; }
.rowitem:hover { background: var(--surface-2); }
.rowitem .tile {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; background: var(--surface-2);
}
.rowitem .tile[data-c] {
  background: color-mix(in srgb, var(--c) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
}
.rowitem .main { flex: 1; min-width: 0; display: block; }
.rowitem .t { display: block; font-weight: 600; font-size: .96rem; letter-spacing: -.01em; }
.rowitem .s {
  display: block; font-size: .82rem; color: var(--ink-2); line-height: 1.4; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rowitem .chev { color: var(--ink-3); font-size: 1.1rem; flex: 0 0 auto; }

/* ============ assessment ============ */
.progressbar { height: 3px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 2px 0 16px; }
.progressbar > i { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }

.qtext {
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.42;
  letter-spacing: -.01em; margin: 8px 0 18px;
}
.likert { display: grid; gap: 7px; }
.likert button { justify-content: flex-start; text-align: left; width: 100%; padding: 13px 15px; background: var(--surface); }
.likert button:hover { background: var(--surface-2); }
.likert button.sel { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.likert button .k {
  width: 21px; height: 21px; border-radius: 6px; background: var(--surface-2);
  font-size: .7rem; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); flex: 0 0 auto; font-weight: 600;
}
.likert button.sel .k { background: var(--accent); color: var(--on-accent); }
.likert button.sel:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ============ profile ============ */
.dimrow { padding: 13px 0; border-bottom: 1px solid var(--line); }
.dimrow:first-child { padding-top: 0; }
.dimrow:last-child { border-bottom: 0; padding-bottom: 0; }
.dimhead { display: flex; align-items: baseline; gap: 8px; }
.dimhead .dn { font-weight: 600; flex: 1; min-width: 0; font-size: .96rem; }
.dimhead .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c, var(--ink-3)); align-self: center;
}
.dimhead .dv { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; }
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 9px 0 8px; }
.bar > i { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; background: var(--ink-3); }
.bar > i.high { background: var(--high); }
.bar > i.mid  { background: var(--mid); }
.bar > i.low  { background: var(--low); }
.linkish {
  background: none; border: 0; padding: 0; min-height: 0; color: var(--accent);
  font: 500 .82rem var(--sans); cursor: pointer;
}
.linkish:hover { background: none; text-decoration: underline; }

.insight { padding: 14px 0 14px 14px; border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--c, var(--accent)); margin-left: -14px; padding-left: 14px; }
.insight h3 { color: var(--c, var(--accent)); }
.insight:last-child { border-bottom: 0; padding-bottom: 0; }
.insight h3 { margin-bottom: 5px; }

.spark { display: block; width: 100%; height: 34px; }

/* ============ belief map ============ */
.beliefrow { padding: 13px 0; border-bottom: 1px solid var(--line); }
.beliefrow:first-child { padding-top: 0; }
.beliefrow:last-child { border-bottom: 0; padding-bottom: 0; }
.beliefrow .bt { margin-bottom: 9px; font-size: .95rem; }
.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.triple button { padding: 8px 6px; min-height: 40px; font-size: .83rem; }
.triple button.sel-a { background: var(--high-fill); color: var(--high); }
.triple button.sel-u { background: var(--mid-fill);  color: var(--mid); }
.triple button.sel-d { background: var(--low-fill);  color: var(--low); }

.bucket { margin-bottom: 16px; }
.bucket:last-child { margin-bottom: 0; }
.bucket h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bucket ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.bucket li { margin: 4px 0; }

/* ============ journey ============ */
.day { background: var(--surface); border-radius: var(--r-lg); margin: 0 0 8px; overflow: hidden; }
.day > .dh {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; background: none; border-radius: 0; text-align: left; min-height: 62px;
}
.day > .dh:hover { background: var(--surface-2); }
.day > .dh .num {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 600; color: var(--ink-3);
}
.day > .dh .num { color: var(--ink-3); }
.day.done > .dh .num { background: var(--accent); color: var(--on-accent); }
.day > .dh .dt { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.day > .dh .chev { color: var(--ink-3); font-size: .8rem; }
.day .body { padding: 2px 14px 16px; }
.day .body h4, .subhead {
  font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); margin: 16px 0 7px;
}
.day .body h4:first-child { margin-top: 0; }
.day .body .learn { font-family: var(--serif); font-size: 1rem; line-height: 1.55; }

.reflist { display: flex; flex-wrap: wrap; gap: 6px; }
.reflist a {
  font-size: .82rem; font-weight: 500; background: var(--surface-2); color: var(--ink);
  border-radius: 999px; padding: 7px 12px; text-decoration: none;
}
.reflist a:hover { background: var(--surface-3); }

/* ============ tree ============ */
.treegrid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 600px) { .treegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.treegrid button { min-width: 0; }
.treegrid button {
  flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 13px;
  text-align: left; background: var(--surface); border-radius: var(--r-md); min-height: 74px;
  justify-content: center;
}
.treegrid button:hover { background: var(--surface-2); }
.treegrid button .tg-t { display: block; font-weight: 600; font-size: .9rem; letter-spacing: -.01em; }
.treegrid button .tg-r { font-size: .76rem; color: var(--ink-3); }
.treegrid button[data-c] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.treegrid button[data-c] .tg-t { color: var(--c); }
.treegrid button.done { background: color-mix(in srgb, var(--c) 15%, transparent); }
.treegrid button.done .tg-r { color: color-mix(in srgb, var(--c) 70%, var(--ink-3)); }

.quiz .opt {
  display: flex; width: 100%; text-align: left; justify-content: flex-start;
  margin: 0 0 7px; background: var(--surface-2);
}
.quiz .opt.right { background: var(--high-fill); color: var(--high); }
.quiz .opt.wrong { background: var(--low-fill); color: var(--low); }
.quiz .opt:disabled { opacity: 1; }

/* ============ forms ============ */
textarea, input[type="text"], select {
  font: 400 .95rem var(--sans); width: 100%; padding: 12px 14px;
  border-radius: var(--r-md); border: 0;
  background: var(--surface-2); color: var(--ink); resize: vertical;
}
select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

input[type="password"] { font: 400 .95rem var(--sans); width: 100%; padding: 12px 14px;
  border-radius: var(--r-md); border: 0; background: var(--surface-2); color: var(--ink); }
label.subhead { display: block; }

.entry { border-bottom: 1px solid var(--line); padding: 13px 0; }
.entry:first-child { padding-top: 0; }
.entry:last-child { border-bottom: 0; padding-bottom: 0; }
.entry .meta { font-size: .76rem; color: var(--ink-3); }
.entry .prompt { font-size: .85rem; color: var(--accent); margin: 3px 0 5px; font-weight: 500; }
.entry .etext { font-family: var(--serif); font-size: .98rem; line-height: 1.55; white-space: pre-wrap; }

/* ============ table ============ */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
table { border-collapse: collapse; width: 100%; font-size: .87rem; min-width: 460px; }
/* narrow tables with a few short columns do not need the wide-table floor */
.tablewrap.compact table { min-width: 0; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }


/* ============ charts ============ */
.k-tick { fill: var(--ink-3); font: 500 9px var(--sans); }
.k-endlabel { fill: var(--ink); font: 700 11px var(--sans); }
.k-rowlabel { fill: var(--ink-2); font: 500 10.5px var(--sans); }
.k-rowval { fill: var(--ink); font: 700 10.5px var(--sans); font-variant-numeric: tabular-nums; }
.k-line, .k-div { display: block; width: 100%; height: auto; }
.k-hit { cursor: crosshair; }
.k-hit:focus { outline: none; }
.k-wrap { position: relative; }
.k-tip {
  position: absolute; top: 2px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 4px 9px; border-radius: 999px;
  font: 600 .74rem var(--sans); white-space: nowrap; pointer-events: none;
}

/* stat tiles — the story is one number, so it is not a chart */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile-stat { background: var(--surface); border-radius: var(--r-md); padding: 13px 12px; min-width: 0; }
.tile-stat .tv { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.tile-stat .tl { display: block; font-size: .72rem; color: var(--ink-2); line-height: 1.35; margin-top: 3px; }

/* small multiples — identity comes from the panel title, not the colour */
.smgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 560px) { .smgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.smpanel {
  display: block; width: 100%; min-width: 0; text-align: left; padding: 12px 13px 8px;
  background: var(--surface); border-radius: var(--r-md);
}
.smpanel:hover { background: var(--surface-2); }
.sm-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.sm-head .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--c, var(--ink-3)); }
.sm-t { flex: 1; min-width: 0; font-size: .86rem; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sm-v { font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-d { font-size: .74rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sm-d.up { color: var(--k-up); }
.sm-d.down { color: var(--k-down); }
.smpanel .spark { height: 46px; }

/* timeline */
.ms { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ms:last-of-type { border-bottom: 0; }
.ms-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--ink-3)); flex: 0 0 auto; }
.ms-body { flex: 1; min-width: 0; }
.ms-t { display: block; font-size: .9rem; font-weight: 600; }
.ms-d { display: block; font-size: .78rem; color: var(--ink-3); }
.ms-after { font-size: .74rem; font-weight: 700; color: var(--ink-3); flex: 0 0 auto; }
.ms-after.up { color: var(--k-up); }
.ms-after.down { color: var(--k-down); }


/* ============ landing illustration ============ */
.hero-wrap { display: flex; justify-content: center; margin: 4px 0 6px; }
.hero-art { width: min(300px, 78%); height: auto; display: block; }
.landing-h1 {
  font-size: clamp(1.7rem, 7vw, 2.1rem); line-height: 1.15; letter-spacing: -.03em;
  text-align: center; margin: 6px 0 10px;
}
.landing-sub {
  text-align: center; color: var(--ink-2); font-size: 1rem; line-height: 1.5;
  margin: 0 auto 20px; max-width: 30rem;
}
.preview-art { width: 100%; height: auto; display: block; }
.pa-label { fill: var(--ink-2); font: 500 11px var(--sans); }
.pa-val   { fill: var(--ink);   font: 700 11px var(--sans); font-variant-numeric: tabular-nums; }

.aud[data-c] .aud-i { color: var(--c); }
.aud-glyph { width: 20px; height: 20px; display: block; }
.aud-i { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--c, var(--ink-3)) 15%, transparent); }

/* ============ share sheet ============ */
.sheet {
  position: fixed; inset: 0; z-index: 70; display: none;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px);
  align-items: flex-end; justify-content: center;
}
.sheet.open { display: flex; }
.sheet-panel {
  background: var(--bg); width: 100%; max-width: 520px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
  animation: sheetUp .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes sheetUp { from { transform: translateY(14%); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet-panel { animation: none; } }
.sheet-grab { width: 38px; height: 4px; border-radius: 999px; background: var(--surface-3);
  margin: 2px auto 14px; }
.sharegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; }
@media (max-width: 380px) { .sharegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shareitem {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: 0; padding: 10px 4px; min-height: 0;
  font: 500 .72rem var(--sans); color: var(--ink-2); text-decoration: none; cursor: pointer;
}
.shareitem:hover { background: none; color: var(--ink); }
.sh-tile {
  width: 46px; height: 46px; border-radius: 14px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
}
.shareitem:hover .sh-tile { background: color-mix(in srgb, var(--c, var(--accent)) 26%, transparent); }
.sh-i { width: 21px; height: 21px; }
.sheet-url {
  font: 500 .76rem var(--sans); color: var(--ink-3); background: var(--surface-2);
  border-radius: var(--r-sm); padding: 9px 12px; margin: 10px 0 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ============ the next step ============ */
.nextstep {
  border-radius: var(--r-xl); padding: 20px; margin: 0 0 16px;
  background:
    radial-gradient(130% 150% at 8% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%),
    var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent);
}
.ns-kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c); margin-bottom: 8px;
}
.ns-title { font-size: 1.32rem; line-height: 1.22; letter-spacing: -.025em; margin: 0 0 8px; }
.ns-body { color: var(--ink-2); font-size: .92rem; line-height: 1.5; margin: 0 0 14px; }
.nextstep .progressbar { background: color-mix(in srgb, var(--c) 20%, transparent); }

/* a step that is not useful yet: still reachable, visibly waiting */
.rowitem.waiting .tile { opacity: .4; }
.rowitem.waiting .t { color: var(--ink-2); font-weight: 500; }
.rowitem.waiting .s { color: var(--ink-3); font-style: italic; }

/* the test to take next */
.rowitem.up-next { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent); }


.ios-share { width: 17px; height: 17px; display: inline-block; vertical-align: -3px;
  margin: 0 2px; color: var(--accent); }
.steps { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); font-size: .92rem; }
.steps li { margin: 7px 0; }
.steps strong { color: var(--ink); }
.installnudge { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.installnudge .iconbtn { width: 30px; height: 30px; font-size: 12px; }

/* ============ floating capsule nav ============ */
.tabbar {
  position: fixed; z-index: 40;
  left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: calc(100% - 24px); max-width: 460px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(150%) blur(16px);
  border-radius: 999px; padding: 6px;
  display: flex; gap: 2px;
  box-shadow: 0 6px 24px rgba(20, 20, 30, .10), 0 0 0 1px var(--line);
}
:root[data-theme="dark"] .tabbar { box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabbar { box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 0 1px var(--line); }
}
.tabbar button {
  flex: 1; flex-direction: column; gap: 2px; background: none;
  min-height: 50px; padding: 6px 2px; color: var(--ink-3); border-radius: 999px;
}
.tabbar button:hover { background: var(--surface-2); }
.tabbar button .ti { font-size: 1.02rem; line-height: 1.1; }
.tabbar button .tl { font-size: .64rem; font-weight: 600; letter-spacing: .01em; }
.tabbar button.on { background: var(--accent-fill); color: var(--accent); }

.footnote { margin: 24px 0 0; font-size: .76rem; color: var(--ink-3); text-align: center; line-height: 1.5; }


/* ============ laptop & desktop ============
   Below 900px this is a phone/tablet app: one column, floating capsule nav.
   At 900px and up it becomes a desktop app: a persistent side rail replaces the
   bottom bar, and the reading column is capped for line length rather than
   stretched — long serif prose does not get more readable by getting wider. */

.shell { display: block; }
.siderail { display: none; }

@media (min-width: 900px) {
  /* Phone metrics on a laptop read as tiny. Turning the root scales every
     rem-based size at once; the px-based spacing is bumped alongside it so the
     layout does not end up cramped around bigger text. */
  html { font-size: 18.5px; }

  .card { padding: 22px; margin-bottom: 14px; }
  .rowitem { padding: 15px 17px; min-height: 70px; gap: 15px; }
  .rowitem .tile { width: 42px; height: 42px; border-radius: 12px; font-size: 1.12rem; }
  .nextstep, .hero { padding: 26px; }
  .searchfield { padding: 0 16px; }
  .searchfield input { padding: 15px 0; }
  .seclabel { margin: 26px 0 12px; }
  button, .btn { min-height: 46px; padding: 13px 18px; }
  .btn-sm { min-height: 40px; padding: 9px 15px; }
  .iconbtn, .navback { width: 40px; height: 40px; }
  .likert button { padding: 15px 17px; }
  .qtext { margin: 10px 0 22px; }
  .day > .dh { min-height: 70px; padding: 16px; }
  .day .body { padding: 4px 16px 18px; }
  .tile-stat { padding: 16px 15px; }
  .aud { padding: 15px 16px; }
  .aud-i { width: 34px; height: 34px; }
  .siderail button { min-height: 46px; padding: 10px 12px; }

  /* The rail sits flush to the window edge, as a desktop rail should, and the
     reading column is centred in whatever space is left. */
  .shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
  }

  /* With the rail hidden (pre-onboarding) the grid must collapse to one column,
     or .app drops into the rail's narrow track and the page becomes a strip.
     The :has() rule is a belt-and-braces fallback if the class is ever missed. */
  .shell.norail,
  .shell:has(> .siderail.hidden) { grid-template-columns: minmax(0, 1fr); }

  .siderail {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 0; height: 100vh;
    padding: 22px 12px 20px; border-right: 1px solid var(--line);
  }
  .rail-brand {
    display: flex; align-items: center; gap: 9px;
    font-weight: 650; letter-spacing: -.015em; font-size: 1rem;
    padding: 0 10px 18px;
  }
  .rail-mark {
    width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
    background: radial-gradient(circle at 34% 28%, var(--c-amber), var(--c-indigo));
  }
  .siderail button {
    display: flex; flex-direction: row; align-items: center; gap: 11px;
    justify-content: flex-start; width: 100%; min-height: 42px;
    padding: 9px 11px; border-radius: var(--r-sm);
    background: none; color: var(--ink-2); font-size: .93rem; font-weight: 500;
  }
  .siderail button:hover { background: var(--surface); color: var(--ink); }
  .siderail button.on { background: var(--accent-fill); color: var(--accent); font-weight: 600; }
  .siderail .ti { font-size: 1.02rem; line-height: 1; }
  .siderail .tl { font-size: .93rem; letter-spacing: -.01em; }
  .rail-spacer { flex: 1; min-height: 14px; }
  .rail-minor { opacity: .75; font-size: .88rem; }

  .tabbar { display: none; }

  /* `margin: 0 auto` from the base rule makes this grid item size to its
     CONTENT instead of stretching to the column, so page width varied by view.
     Clear the auto margins and stretch explicitly. */
  .app { max-width: none; width: 100%; margin: 0; padding: 0 32px 60px; }
  .app > main, header.top { max-width: 800px; margin-inline: auto; }
  header.top {
    padding: 18px 0 12px; min-height: 0;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
  }
  header.top.bare::before { content: none; }
  .pagetitle { font-size: 1.7rem; }

  .toast { bottom: 28px; }

  /* a bottom sheet is a phone idiom — centre it here */
  .sheet { align-items: center; }
  .sheet-panel {
    max-width: 460px; border-radius: var(--r-xl);
    padding: 14px 22px 22px; max-height: 82vh;
  }
  .sheet-grab { display: none; }
}

/* more room on a real laptop screen */
@media (min-width: 1180px) {
  html { font-size: 19.5px; }
  .shell { grid-template-columns: 272px minmax(0, 1fr); }
  .app > main, header.top { max-width: 840px; }
  .smgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .treegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ============ two columns on a wide screen ============
   Only Profile and Monitor opt in (`.app.wide`), because only they have two
   genuinely parallel streams: the numbers, and what the numbers mean. Prose
   views stay single-column — width does not help reading. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.col { min-width: 0; }

@media (min-width: 1180px) {
  .app.wide > main, .app.wide > header.top { max-width: 1240px; }
  .app.wide .cols {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 22px; align-items: start;
  }
  /* the left column's first card should line up with the right column's first */
  .app.wide .col > .row.between:first-child { margin-top: 0 !important; }
  .app.wide .col > .seclabel:first-child { margin-top: 0; }
  /* the panels now live in the left column, so two across is the right fit */
  .app.wide .smgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ onboarding ============ */
.welcome { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.welcome h1 { font-size: 1.9rem; letter-spacing: -.03em; }
.startlist { display: grid; gap: 7px; }
.startlist button { justify-content: flex-start; text-align: left; padding: 14px 16px; background: var(--surface-2); }
.startlist button:hover { background: var(--surface-3); }

/* ============ toast ============ */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(86px + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px;
  font-size: .84rem; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s;
  max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; }

.hidden { display: none !important; }