/* GROUNDED · app shell
 * Shares the tokens with ismanifestationreal.com so the marketing site and the
 * product are visibly one thing — the category's apps all look like a different
 * company made the landing page.
 */

:root {
  --paper:   oklch(96.5% 0.008 85);
  --paper-2: oklch(93.5% 0.011 82);
  --paper-3: oklch(90%   0.014 80);
  --ink:     oklch(21%   0.012 60);
  --ink-2:   oklch(42%   0.010 62);
  --ink-3:   oklch(58%   0.008 65);
  --accent:  oklch(48%   0.10  62);
  --accent-soft: oklch(48% 0.10 62 / 0.12);
  --focus:   oklch(42%   0.15  62);
  --rule:    oklch(21%   0.012 60 / 0.16);
  --rule-2:  oklch(21%   0.012 60 / 0.08);
  --quarantine: oklch(58% 0.008 65 / 0.5);

  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1.25rem;
  --sp-5: 2rem;    --sp-6: 3.25rem; --sp-7: 5rem;

  --r-sm: 2px; --r-md: 4px; --r-lg: 8px;
  --dur: 180ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }

.wrap { max-width: 44rem; margin-inline: auto; padding: 0 var(--sp-4) var(--sp-7); }

/* ---- chrome ------------------------------------------------------------- */
.bar {
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-5);
}
.bar__in {
  max-width: 44rem; margin-inline: auto; padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.brand {
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  letter-spacing: -0.015em; text-decoration: none; color: var(--ink);
}
.brand span { color: var(--accent); }
.daychip {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}

/* Where the entries live. Quiet on purpose — this is reassurance, not a status
   dashboard, and a person mid-journal should never have to think about sync. */
.syncstatus {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--ink-3); white-space: nowrap; opacity: 0.75;
  overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}

/* On a phone the day count is what matters; the storage note is not worth a
   line of its own on a 375px header. */
@media (max-width: 34rem) {
  .syncstatus { display: none; }
}

/* Account recovery needs the complete backup status on phones too. */
body:has(#account-heading) .syncstatus {
  display:block; max-width:100%; white-space:normal; opacity:1;
  color:var(--ink-2); font-family:var(--body); font-size:0.875rem; letter-spacing:0;
}

/* ---- type --------------------------------------------------------------- */
h1 {
  font-family: var(--display); font-style: normal; font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.1;
  letter-spacing: -0.025em; margin: 0 0 var(--sp-3);
  overflow-wrap: anywhere; min-width: 0;
}
h2 {
  font-family: var(--display); font-style: normal; font-weight: 600;
  font-size: 1.2rem; letter-spacing: -0.015em; margin: var(--sp-5) 0 var(--sp-2);
}
.kicker {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--sp-2);
}
.lede { font-size: 1.15rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 var(--sp-5); }
.hint { font-size: 0.95rem; color: var(--ink-2); margin: 0 0 var(--sp-3); }

/* ---- a gentle first step ------------------------------------------------ */
.practice-studio { padding-top:var(--sp-2); }
body:has(.practice-studio) .bar { margin-bottom:var(--sp-3); }
body:has(.practice-studio) .site-links { margin-bottom:var(--sp-3); }
.practice-back { display:inline-flex; align-items:center; min-height:44px; margin-bottom:var(--sp-3); color:var(--ink-2); }
.practice-label { color:var(--accent); font-size:1rem; margin:0 0 var(--sp-3); }
.practice-studio h1 { max-width:20ch; margin-bottom:var(--sp-3); text-wrap:balance; }
.practice-context { font-size:1rem; color:var(--ink-2); margin:0; max-width:60ch; }
.practice-studio h2 { font-size:clamp(1.7rem,4vw,2.2rem); margin:0 0 var(--sp-3); line-height:1.2; }
.practice-steps { display:flex; border-block:1px solid var(--rule); margin:var(--sp-4) 0 var(--sp-5); }
.practice-steps button { flex:1; min-width:0; padding:var(--sp-3) var(--sp-2); color:var(--ink-2); background:none; border:0; cursor:pointer; font:inherit; font-size:1rem; text-align:left; }
.practice-steps button span { display:block; font-family:var(--mono); font-size:.75rem; margin-bottom:var(--sp-1); }
.practice-steps button[aria-current="step"] { background:var(--accent-soft); color:var(--ink); font-weight:600; }
.practice-prompt { font-size:1.25rem; line-height:1.5; max-width:54ch; margin:0 0 var(--sp-5); }
.practice-sheet { padding:0 0 var(--sp-5); }
.practice-sheet input,.practice-sheet textarea,.practice-sheet select { font:inherit; }
.practice-sheet textarea { resize:vertical; }
.practice-sheet .field>label { font-family:var(--body); text-transform:none; letter-spacing:0; font-size:1rem; color:var(--ink); }
.practice-sheet textarea[readonly] { background:var(--paper-2); }
.practice-focus { font-family:var(--display); font-size:clamp(1.5rem,3vw,2rem); line-height:1.45; padding:var(--sp-5) 0; border-block:1px solid var(--rule); overflow-wrap:anywhere; }
.practice-focus--small { font-size:1.25rem; padding:var(--sp-4) 0; }
.practice-plan { font-size:1.1rem; color:var(--ink-2); }
.practice-audio,.practice-evidence,.practice-history { border-top:1px solid var(--rule); padding:var(--sp-3) 0; margin-top:var(--sp-4); }
.practice-studio summary { cursor:pointer; min-height:44px; display:list-item; align-content:center; }
.practice-studio a { color:var(--accent); text-underline-offset:.2em; }
.practice-audio audio { width:100%; margin:var(--sp-3) 0; }
.practice-timer { padding:var(--sp-4) 0; }
.practice-timer label { display:block; margin-bottom:var(--sp-2); }
.practice-timer select { background:var(--paper); border:1px solid var(--rule); color:var(--ink); min-height:44px; padding:var(--sp-2) var(--sp-3); }
.practice-timer output { display:block; font-family:var(--display); font-variant-numeric:tabular-nums; font-size:3.8rem; line-height:1.2; margin:var(--sp-4) 0; }
.practice-actions { margin-top:var(--sp-5); }
.practice-save-note { font-size:.95rem; color:var(--ink-2); }
.practice-record { border-top:1px solid var(--rule); padding:var(--sp-4) 0; overflow-wrap:anywhere; }
.practice-record h3 { font-size:1.15rem; margin:0 0 var(--sp-2); }
.practice-record .actions { margin:var(--sp-3) 0 0; }
.practice-remove { background:var(--paper-2, #ebe7dd); padding:var(--sp-3); margin-top:var(--sp-3); }
.practice-remove p { margin:0; }
@media (max-width:34rem) {
  .practice-steps { gap:0; margin-bottom:var(--sp-5); }
  .practice-steps button { padding:var(--sp-3) var(--sp-1); font-size:.85rem; overflow-wrap:anywhere; }
  .practice-actions .btn { flex:1; min-width:6rem; min-height:44px; white-space:normal; }
  .practice-prompt { font-size:1.15rem; }
}
.site-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  max-width: 44rem; margin: calc(-1 * var(--sp-3)) auto var(--sp-5);
  padding-inline: var(--sp-4); font-size: 0.95rem;
}
.site-links a, .welcome a:not(.btn) { color: var(--ink-2); text-underline-offset: 0.2em; }
.site-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-links a:hover, .welcome a:not(.btn):hover { color: var(--accent); }
.welcome h1 { font-size: 2.6rem; text-wrap: balance; }
.welcome .lede { max-width: 60ch; }
.welcome__label { margin: 0 0 var(--sp-3); color: var(--accent); font-size: 1rem; }
.welcome__back { display: inline-block; margin-bottom: var(--sp-5); min-height: 2.75rem; }
.welcome__actions { margin-top: 0; margin-bottom: var(--sp-3); }
.welcome .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; text-decoration: none; white-space: normal; }
.welcome__privacy { color: var(--ink-2); font-size: 0.95rem; max-width: 64ch; margin: var(--sp-3) 0 var(--sp-5); }
.welcome__steps { list-style: none; counter-reset: welcome-step; padding: 0; margin: var(--sp-6) 0 var(--sp-5); }
.welcome__steps li {
  counter-increment: welcome-step; display: flex; gap: var(--sp-4);
  padding-block: var(--sp-4); border-top: 1px solid var(--rule);
}
.welcome__steps li::before {
  content: counter(welcome-step); flex: 0 0 1.5rem;
  font-family: var(--display); font-size: 1.4rem; line-height: 1.2; color: var(--accent);
}
.welcome__steps h2 { margin: 0 0 var(--sp-2); font-size: 1.2rem; }
.welcome__steps p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.welcome__steps a { display: inline-block; margin-top: var(--sp-3); min-height: 2.75rem; }
.welcome__next { display: flex; flex-direction: column; gap: var(--sp-2); padding-block: var(--sp-3); border-top: 1px solid var(--rule); }
.welcome__next a { width: fit-content; padding-block: var(--sp-2); min-height: 2.75rem; }
.welcome__boundary { margin-top: var(--sp-4); max-width: 64ch; }
.welcome__example { margin: 0 0 var(--sp-5); }
.welcome__example > div { padding-block: var(--sp-4); border-top: 1px solid var(--rule); }
.welcome__example dt { font-weight: 600; margin-bottom: var(--sp-2); }
.welcome__example dd { margin: 0; color: var(--ink-2); max-width: 65ch; }
.welcome__detail { background: var(--paper-2); padding: var(--sp-4); margin-bottom: var(--sp-4); border-radius: var(--r-md); }
.welcome__detail summary { min-height: 2.75rem; cursor: pointer; font-weight: 600; }
.welcome__detail .welcome__example { margin-bottom: var(--sp-3); }
.welcome__example--compact > div { padding-block: var(--sp-3); }
.welcome__textlink { align-self: center; display: inline-flex; align-items: center; min-height: 2.75rem; }
.commitment { margin-top: var(--sp-5); padding: var(--sp-4); border: 1px solid var(--rule); border-radius: var(--r-md); }
.commitment h2 { margin: 0 0 var(--sp-2); }
.commitment p { margin: 0; }
.commitment .hint { margin-top: var(--sp-3); }
.commitment + .actions { margin-top: var(--sp-3); }
.pro-intro__features { padding-left: 1.2em; margin-block: var(--sp-4) var(--sp-5); }
.pro-intro__features li { padding-left: var(--sp-2); margin-bottom: var(--sp-3); color: var(--ink-2); }
.pro-intro__features strong { color: var(--ink); }
.pro-intro__status { padding-block: var(--sp-4); font-weight: 600; }
.pro-signin { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
.pro-signin h2 { margin-top: 0; }
.pro-signin label { color: var(--ink-2); }
.pro-signin input[type="email"] {
  width: 100%; min-height: 2.75rem; padding: 0.65em 0.8em; border: 1px solid var(--rule);
  border-radius: var(--r-sm); font: inherit; color: var(--ink); background: var(--paper);
}
.pro-signin input::placeholder { color: var(--ink-2); opacity: 1; }
.pro-signin .actions { margin-top: var(--sp-3); }
@media (max-width: 34rem) {
  .welcome h1 { font-size: 2rem; }
  .welcome__actions { flex-direction: column; align-items: stretch; }
  .welcome__steps { margin-top: var(--sp-5); }
  .welcome__steps li { gap: var(--sp-3); }
  .site-links { gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
}

/* ---- fields ------------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }
label, .lbl {
  display: block; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--sp-2);
}
textarea, input[type="text"] {
  width: 100%; min-width: 0; font-family: var(--body); font-size: 1.0625rem;
  line-height: 1.55; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 0.65em 0.8em; resize: vertical;
  transition: border-color var(--dur) var(--ease);
}
textarea:hover, input:hover { border-color: var(--ink-3); }
textarea:focus-visible, input:focus-visible { border-color: var(--focus); }
textarea[readonly], input[readonly] { background: var(--paper-2); color: var(--ink-2); }

/* ---- 1-10 scale --------------------------------------------------------- */
.scale { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale label {
  margin: 0; width: 2.35rem; height: 2.35rem; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 0.85rem; font-variant-numeric: tabular-nums;
  color: var(--ink-2); text-transform: none; letter-spacing: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.scale label:hover { background: var(--paper-3); }
.scale input:checked + label {
  background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500;
}
.scale input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- yes/no ------------------------------------------------------------- */
.yn { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.yn input { position: absolute; opacity: 0; pointer-events: none; }
.yn label {
  margin: 0; padding: 0.5em 1.1em; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-family: var(--body); font-size: 1rem; text-transform: none;
  letter-spacing: 0; color: var(--ink-2);
  transition: background var(--dur) var(--ease);
}
.yn label:hover { background: var(--paper-3); }
.yn input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.yn input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  font-family: var(--body); font-size: 1.0625rem; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  padding: 0.65em 1.2em;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--ink); border-color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--paper-3); color: var(--ink); border-color: var(--ink-3); }

.actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }

/* ---- callouts ----------------------------------------------------------- */
.note {
  border-left: 2px solid var(--accent); background: var(--accent-soft);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--sp-4) 0;
}
.note p { margin: 0; font-size: 0.98rem; color: var(--ink-2); }
.note p + p { margin-top: var(--sp-2); }
.note strong { color: var(--ink); }

/* The quarantine is visually distinct on purpose — a user should be able to see
   that this box is fenced off from everything else on the page. */
.quarantine {
  border: 1px dashed var(--quarantine); border-radius: var(--r-md);
  padding: var(--sp-4); margin: var(--sp-5) 0 0; background: transparent;
}
.quarantine .lbl { color: var(--ink-3); }
.quarantine__tag {
  display: inline-block; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 0.15em 0.5em; margin-bottom: var(--sp-2);
}

/* ---- locked pre-registration -------------------------------------------- */
.locked {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--sp-4); background: var(--paper-2); margin-bottom: var(--sp-5);
}
.locked dl { margin: 0; display: grid; gap: var(--sp-3); }
.locked dt {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3);
}
.locked dd { margin: var(--sp-1) 0 0; color: var(--ink); }

/* ---- verdict ------------------------------------------------------------ */
/* Borders live on the cells, not on the grid background. The gap-background
   trick paints any empty track — with 5 figures in a 4-column layout that
   renders a phantom grey cell. */
/* Explicit column counts, not auto-fit.
 *
 * `auto-fit` chose 4 columns for 6 figures, leaving a bordered empty cell that
 * reads as a missing statistic. There are exactly six measures and there will
 * be six, so the count is a design decision rather than something to negotiate
 * with the viewport: 2 up on a phone, 3 up above that. Both divide evenly.
 */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); overflow: hidden; margin: var(--sp-4) 0;
}

@media (min-width: 34rem) {
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fig {
  background: var(--paper); padding: var(--sp-4); min-width: 0;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: 0 -1px -1px 0;   /* collapse against the container edge */
}
.fig__n {
  font-family: var(--display); font-weight: 600; font-size: 1.9rem;
  font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em;
  display: block; margin-bottom: var(--sp-1);
}
.fig__l {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.4;
}
.fig--up .fig__n { color: var(--accent); }

.verdict-prose { white-space: pre-wrap; font-size: 1.08rem; line-height: 1.65; }

/* ---- progress ----------------------------------------------------------- */
.dots { display: flex; flex-wrap: wrap; gap: 3px; margin: var(--sp-3) 0 var(--sp-5); }
.dot {
  width: 11px; height: 11px; border-radius: 1px;
  border: 1px solid var(--rule);
}
.dot--done  { background: var(--ink); border-color: var(--ink); }
.dot--today { background: var(--accent); border-color: var(--accent); }

/* ---- dev strip (prototype only) ----------------------------------------- */
.dev {
  margin-top: var(--sp-7); padding-top: var(--sp-3);
  border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3);
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
}
.dev button {
  font-family: var(--mono); font-size: 0.68rem; cursor: pointer;
  background: transparent; border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 0.3em 0.6em; color: var(--ink-2);
}
.dev button:hover { background: var(--paper-3); }

.err { color: var(--accent); font-size: 0.95rem; margin-top: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- the criterion check ------------------------------------------------ *
 * Reports on the SENTENCE, never on the person or the month. Deliberately
 * plain: this is a proofreading tool, and dressing it up as a coach would make
 * a structural check feel like a judgement.
 */
.check {
  margin: var(--space-sm) 0 0;
  padding: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}

.check[data-state="blocked"] { border-left: 3px solid var(--accent); }
.check[data-state="ok"]      { border-left: 3px solid var(--rule); }

/* Sentence case, body face. The uppercase-mono treatment used elsewhere is for
   short labels; this header is a full sentence, and setting a sentence in caps
   reads as shouting at someone about their own writing. */
.check__head {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.check__list { margin: var(--space-sm) 0 0; padding: 0; list-style: none; }

.check__item + .check__item {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule-soft, var(--rule));
}

.check__msg { margin: 0; font-weight: 600; }
.check__why { margin: 0.2em 0 0; color: var(--ink-2); font-size: 0.94em; }

/* The blocker/warning distinction is carried by the marker, not by colour
   alone — a red-green cue would exclude a chunk of readers. */
.check__item--blocker .check__msg::before { content: "Must fix — "; color: var(--accent); }
.check__item--warning .check__msg::before { content: "Worth fixing — "; color: var(--ink-3); }
.check__item--good    .check__msg::before { content: "Good — "; color: var(--ink-3); }

.check__rewrite {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
}

.check__rewriteLabel {
  margin: 0 0 0.3em;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.check__rewriteText { margin: 0 0 var(--space-sm); }

.btn--small { font-size: 0.85rem; padding: 0.45em 0.8em; }

/* ---- the printable document --------------------------------------------- *
 * Hidden on screen, and the only thing visible on paper. Built for the
 * browser's own "Save as PDF", which produces selectable text at zero page
 * weight — a bundled PDF library would have been ~150KB of self-hosted
 * JavaScript on a site where the fonts were self-hosted to save two DNS
 * lookups.
 */
#printdoc { display: none; }

@media print {
  /* Everything except the document goes. `visibility` alone would leave the
     app's layout occupying pages. */
  .bar, #view, .dev, .syncstatus { display: none !important; }

  body.is-printing #printdoc { display: block; }

  html, body {
    background: #fff; color: #000;
    font-family: var(--body);
    font-size: 11pt; line-height: 1.5;
  }

  @page { margin: 18mm 16mm; }

  .p-head { margin-bottom: 10mm; border-bottom: 1px solid #000; padding-bottom: 4mm; }
  .p-head h1 {
    font-family: var(--display); font-size: 22pt; margin: 0 0 2mm;
    letter-spacing: -0.02em;
  }
  .p-sub { margin: 0; font-size: 12pt; font-style: italic; }

  .p-block { margin-bottom: 8mm; }
  .p-block h2 {
    font-family: var(--mono); font-size: 8pt; letter-spacing: 0.14em;
    text-transform: uppercase; margin: 0 0 3mm; padding-bottom: 1.5mm;
    border-bottom: 0.5pt solid #999;
  }

  .p-row { display: flex; gap: 4mm; margin-bottom: 1.5mm; }
  .p-k {
    flex: 0 0 42mm; font-family: var(--mono); font-size: 8pt;
    letter-spacing: 0.06em; text-transform: uppercase; color: #444;
    padding-top: 0.6mm;
  }
  .p-v { flex: 1 1 auto; }

  .p-quote { margin-top: 5mm; }
  .p-quote blockquote {
    margin: 1.5mm 0 0; padding-left: 4mm; border-left: 1.5pt solid #000;
    font-size: 12pt;
  }

  /* A day must not be split across a page — half an entry on each side is
     unreadable as a record. */
  .p-day { margin-bottom: 5mm; break-inside: avoid; page-break-inside: avoid; }
  .p-day h3 {
    font-size: 11pt; margin: 0 0 1.5mm;
    border-bottom: 0.5pt dotted #bbb; padding-bottom: 1mm;
  }
  .p-date { font-family: var(--mono); font-size: 8pt; color: #666; font-weight: 400; }

  .p-break { break-before: page; page-break-before: always; }

  /* describeVerdict returns newline-separated prose; keep its line breaks. */
  .p-prose { white-space: pre-wrap; font-size: 11.5pt; }

  .p-quarantine {
    border: 0.5pt dashed #999; padding: 4mm; break-inside: avoid;
  }
  .p-quarantine ul { margin: 2mm 0 0; padding-left: 5mm; }

  .p-foot {
    margin-top: 10mm; padding-top: 3mm; border-top: 0.5pt solid #999;
    font-family: var(--mono); font-size: 7.5pt; color: #555;
  }
}

/* ---------------------------------------------------------------- the offer */
/*
 * Ordered by law rather than by conversion: price, frequency, annual total and
 * cancellation method all appear ABOVE the button that leads to card details.
 * Nothing here is collapsed behind a disclosure triangle, because the ARL wants
 * these terms presented, not merely available.
 */
.offer {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
}

.offer h2 { margin: 0 0 var(--sp-3); }
.offer p { color: var(--ink-2); }

/* The terms block is deliberately the most prominent thing in the box after
   the heading — not the smallest, which is where a subscription's real cost is
   usually put. */
.offer__terms {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.offer__terms p { margin: 0; color: var(--ink); }
.offer__terms p + p { margin-top: var(--sp-2); }
.offer__terms strong { color: var(--ink); }

.offer__consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: var(--sp-4) 0;
  cursor: pointer;
  color: var(--ink);
}
.offer__consent input {
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}
.offer__consent input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* A disabled buy button must LOOK disabled. Styling it identically to the live
   one and relying on the attribute alone reads as a broken page. */
.offer .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.offer__msg:empty { display: none; }
.offer__msg {
  margin: var(--sp-3) 0 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.offer--active { border-color: var(--good, var(--rule)); }

/* Pause sits beside cancel, at the same visual weight — not promoted above it
   and not hidden below it. The choice is presented, not steered. */
.offer__pause {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 0.95rem; color: var(--ink-2);
}
.offer__pause select {
  font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 1mm 2mm;
}

/* What comes after the verdict. Free tier ends here; Pro continues. */
.another {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.another h2 { margin: 0 0 var(--sp-3); }
.another p { color: var(--ink-2); }
.another--locked { border-color: var(--accent); }
.doc .another .btn, .another .btn {
  color: var(--paper); background: var(--ink); text-decoration: none;
}
.another .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Pro: what the $49 actually buys, shown on the verdict screen. */
.pro {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}
.pro h2 { margin: 0 0 var(--sp-3); }
.pro h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: 1rem; }
.pro__prose { white-space: pre-line; color: var(--ink); margin: 0 0 var(--sp-3); }
.pro__out:not(:empty) { margin-top: var(--sp-3); }
.pro .tool__row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.pro .tool__input {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 1mm 2mm;
}


/* ---------------------------------------------------------- PRO · templates */
.tpl { border: 0; padding: 0; margin: 0 0 var(--sp-5); min-width: 0; }
.tpl legend { padding: 0; }
.tpl__pro {
  display: inline-block; margin-left: var(--sp-2); padding: 0.05em 0.5em;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-sm); vertical-align: middle;
}
.tpl__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.tpl__card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper-2); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tpl__card:hover { border-color: var(--ink-3); }
.tpl__card--on { border-color: var(--accent); background: var(--accent-soft); }
.tpl__card input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tpl__card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.tpl__name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.tpl__hyp { font-size: 0.92rem; color: var(--ink-2); line-height: 1.45; }
.tpl__ab { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-2); letter-spacing: 0.02em; margin-top: var(--sp-1); }
.tpl__ab b { color: var(--accent); margin-right: 0.2em; }
.tpl__ab b + b, .tpl__ab b:last-of-type { margin-left: 0.6em; }
.tpl__label {
  align-self: flex-start; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 0.1em 0.5em; border-radius: var(--r-sm); border: 1px solid var(--rule); color: var(--ink-2);
}
.tpl__label--E1 { border-color: var(--accent); color: var(--accent); }
.tpl__note { font-size: 0.8rem; color: var(--ink-3); line-height: 1.4; }

/* ---------------------------------------------------- PRO · this week's condition */
.cond { border-left: 3px solid var(--accent); padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-5); }
.cond--baseline { border-left-color: var(--ink-3); }
.cond--B { border-left-color: var(--ink-2); }
.cond__label { margin: 0 0 var(--sp-2); font-size: 1.35rem; }
.cond p { margin: 0 0 var(--sp-2); }
.cond__plan { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cond__sep { margin: 0 0.5em; }
.cond__now { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------ PRO · today */
.today {
  border-top: 2px solid var(--accent); padding: var(--sp-3) 0 var(--sp-4); margin: 0 0 var(--sp-5);
  max-width: 64ch;
}
.today__action { font-family: var(--display); font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 var(--sp-3); }
.today__row { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: baseline; margin: 0 0 var(--sp-3); }
.today__session { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.today__session:hover { border-bottom-color: var(--accent); }
.today__meta { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.today__finding { margin: 0; font-style: italic; color: var(--ink-2); }
.today__finding--empty { font-style: normal; color: var(--ink-3); font-size: 0.92rem; }

/* ------------------------------------------------------- PRO · comparison */
.cmp { margin: var(--sp-5) 0; padding: var(--sp-4); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper-2); }
.cmp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-3) 0 var(--sp-4); }
.cmp__head { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin: 0 0 var(--sp-2); }
.cmp__head span { color: var(--accent); font-family: var(--mono); font-size: 0.75rem; font-weight: 400; }
.cmp dl { margin: 0; }
.cmp dl div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--rule-2); }
.cmp dt { color: var(--ink-3); font-size: 0.85rem; }
.cmp dd { margin: 0; font-family: var(--mono); font-size: 0.9rem; }
@media (max-width: 34rem) { .cmp__grid { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; gap: var(--sp-4); margin: 0 0 var(--sp-5); border-bottom: 1px solid var(--rule); }
.tabs__tab {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; padding: 0 0 var(--sp-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab--on { color: var(--ink); border-bottom-color: var(--accent); }
.today__protocol { margin: 0 0 var(--sp-3); font-size: 0.95rem; color: var(--ink-2); }
.today__protocol a { color: var(--accent); }

/* -------------------------------------------------------- protocol lab */
.yn--wide { flex-wrap: wrap; }
.yn--wide label { min-width: 4.5rem; }
.yn input:disabled + label { opacity: 0.4; cursor: not-allowed; }
.pl__versions { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-4); flex-wrap: wrap; }
.pl__vtab { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; padding: 0.3em 0.8em; border: 1px solid var(--rule); background: var(--paper-2); border-radius: var(--r-sm); cursor: pointer; color: var(--ink-2); }
.pl__vtab--on { border-color: var(--accent); color: var(--accent); }
.pl__tools { margin: var(--sp-3) 0 var(--sp-5); align-items: center; }
.pl__week { border-top: 1px solid var(--rule); padding: var(--sp-3) 0; }
.pl__week summary { font-family: var(--display); font-weight: 600; cursor: pointer; padding: var(--sp-2) 0; }
.pl__day { padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); border-left: 2px solid var(--rule-2); margin: var(--sp-3) 0; }
.pl__day--today { border-left-color: var(--accent); }
.pl__day--done { opacity: 0.75; }
.pl__dayhead { display: flex; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-2); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pl__tick { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.pl__line { margin: 0 0 var(--sp-2); font-size: 0.98rem; line-height: 1.5; }
.pl__line b { font-family: var(--mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: inline-block; min-width: 9ch; margin-right: 0.5em; }
.pl__line--action { border-top: 1px solid var(--rule-2); padding-top: var(--sp-2); }
.pl__line--action b { color: var(--accent); }
.pl__extra { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); background: var(--paper-2); border-radius: var(--r-sm); font-size: 0.92rem; }
.pl__extra b { font-family: var(--mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-right: 0.5em; }
.pl__extra--cp { border-left: 2px solid var(--accent); }
.pl__extra--sym { color: var(--ink-2); }
.pl__why { margin-top: var(--sp-6); }
.pl__rationale div { padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule-2); }
.pl__rationale dt { font-family: var(--display); font-weight: 600; }
.pl__rationale dd { margin: 0; color: var(--ink-2); }
.pl__src { display: block; font-size: 0.85rem; color: var(--ink-3); }

/* Member reading uses the same paper, type and controls as the studio. */
.fieldguide { max-width:70ch; }
.fieldguide h1 { font-size:2.6rem; }
.fieldguide-reading { margin-top:var(--sp-6); line-height:1.75; }
.fieldguide-reading h2 { margin:2.6rem 0 1rem; font-size:1.55rem; line-height:1.25; text-wrap:balance; scroll-margin-top:1.5rem; }
.fieldguide-reading p, .fieldguide-reading li { overflow-wrap:anywhere; text-wrap:pretty; }
.fieldguide-reading li + li { margin-top:.6rem; }
.fieldguide-reading a { text-underline-offset:.18em; }
.fieldguide-reading blockquote { margin:1.5rem 0; padding:1rem; border:1px solid var(--rule); font-size:1.15rem; }
.fieldguide-contents { display:flex; flex-wrap:wrap; gap:.4rem 1rem; padding:1rem 0; border-block:1px solid var(--rule); }
.fieldguide-contents button { padding:.45rem 0; min-height:44px; border:0; background:none; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:.2em; }
.fieldguide-table { max-width:100%; overflow-x:auto; margin:1.5rem 0; }
.fieldguide table { width:100%; min-width:28rem; border-collapse:collapse; font-size:.88rem; line-height:1.5; }
.fieldguide th, .fieldguide td { text-align:left; vertical-align:top; padding:.75rem; border:1px solid var(--rule); }
.fieldguide th { color:var(--ink); font-weight:600; }
.fieldguide-sample { margin:var(--sp-6) 0; padding-block:var(--sp-5); border-block:1px solid var(--rule); }
.fieldguide-sample h2 { margin-top:0; font-size:1.4rem; }
.fieldguide-status { min-height:3rem; }
.fieldguide-footer { margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--rule); }
.fieldguide-tools .btn { white-space:normal; }
@media (max-width:34rem) {
  .fieldguide h1 { font-size:2.15rem; }
  .fieldguide-tools { align-items:stretch; }
  .fieldguide-tools .btn { flex:1 1 12rem; }
  .fieldguide-contents { gap:.3rem 1rem; font-size:.95rem; }
}
@media print {
  .site-links { display:none !important; }
  .fieldguide-paper { font:11pt/1.55 Georgia,serif; color:#000; }
  .fieldguide-paper h1 { font-size:25pt; line-height:1.15; }
  .fieldguide-paper h2 { margin-top:9mm; font-size:17pt; line-height:1.2; break-after:avoid; }
  .fieldguide-paper table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:9pt; }
  .fieldguide-paper th, .fieldguide-paper td { border:.5pt solid #888; padding:2mm; vertical-align:top; text-align:left; overflow-wrap:anywhere; }
  .fieldguide-paper tr { break-inside:avoid; }
  .fieldguide-paper a { color:#000; }
  .fieldguide-paper blockquote { margin:5mm 0; padding:3mm; border:.5pt solid #888; }
  .fieldguide-paper p, .fieldguide-paper li { orphans:3; widows:3; }
}