/* Arkhelion — /what-came-before/
   The `lb-` class prefix throughout this file is HISTORICAL — it predates the
   rename from /lookback/. Class names are not brand, and re-prefixing ~60 rules
   plus the print and reduced-motion blocks would risk a silent visual break for
   zero reader-visible gain. Left deliberately.
 *
 * Loaded AFTER site.css and only on this page. Every colour, size and spacing
 * value comes from a site.css token; nothing new is invented, because the
 * ladder in site.css carries measured contrast ratios and a one-off hex here
 * would quietly opt out of them.
 *
 * Reminder from _headers: the CSP is `style-src 'self'`. An inline <style> or
 * a style="" attribute is DROPPED IN PRODUCTION and works fine locally.
 * /privacy shipped visually broken for a month exactly that way.
 *
 * WHY THIS PAGE IS DRAWN RATHER THAN WRITTEN. The first version explained the
 * lag idea in four paragraphs above the fold. It is one picture: two rows of
 * daily bars with the tall one sitting two columns left of the bad one. The
 * diagram carries the whole product argument, so the prose that used to carry
 * it is gone rather than shortened. Everything that survives as words is
 * behind a <details> — visible text before any click is ~120 words.
 *
 * ICONS ARE INLINE SVG SYMBOLS, not an icon font and not an image file. The
 * CSP is default-src 'self' / img-src 'self' data:, so every hosted icon set
 * is blocked outright. Stroke-only with currentColor so both themes and the
 * print sheet work from one definition.
 *
 * NO EMOJI ANYWHERE. BRAND.md §3.4 bans emoji as decoration or persuasion,
 * §2 rules out friendly illustration, and §12 puts illustration and
 * photography out of scope for v1. The visual register is editorial and HUD,
 * closer to a type foundry than a consumer app.
 *
 * The audience is people who are exhausted and often in pain. That is the
 * reason for the large tap targets, the short line length, and the absence of
 * anything that moves on its own.
 */

.lb-hidden { display: none; }

/* The sprite is a definitions carrier, never rendered itself. */
.lb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.lb-eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.34em;
  color: var(--dim);
  margin: 0 0 var(--sp-2);
}
.lb-hero h1 { margin: 0 0 var(--sp-2); }
.lb-sub {
  font-size: var(--fs-5);
  line-height: 1.45;
  color: var(--muted);
  max-width: 30em;
  margin: 0 0 var(--sp-4);
}

/* ── the lag diagram ────────────────────────────────────────────────────── */
.lb-figure { margin: 0 0 var(--sp-4); }
.lb-figure-scroll {
  overflow-x: auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.lb-lag { display: block; width: 100%; min-width: 380px; height: auto; }
.lb-figure figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-2);
  line-height: 1.65;
  color: var(--dim);
  max-width: 40em;
}

.lb-svg-rule { stroke: var(--hairline-strong); stroke-width: 1; }
.lb-svg-act { fill: var(--fg); }
.lb-svg-crash { fill: var(--accent-emerald); }
.lb-svg-link { stroke: var(--accent-emerald); stroke-width: 1.5; }
.lb-svg-lab {
  fill: var(--dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
}
.lb-svg-lab--accent { fill: var(--accent-emerald); }

/* ── promise chips ──────────────────────────────────────────────────────── */
.lb-promises {
  list-style: none;
  margin: 0 0 var(--sp-2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--sp-2);
}
.lb-promises li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-family: var(--mono);
  font-size: var(--fs-2);
  line-height: 1.3;
  color: var(--muted);
}

.lb-ico {
  flex: none;
  width: 20px;
  height: 20px;
  stroke: var(--accent-emerald);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── progressive disclosure ─────────────────────────────────────────────── */
.lb-more {
  margin: var(--sp-3) 0 0;
  border-top: 1px solid var(--border);
}
.lb-more--tight { margin-top: var(--sp-2); }
.lb-more > summary {
  cursor: pointer;
  padding: var(--sp-2) 0;
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.06em;
  color: var(--dim);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  transition: color var(--dur-ui) var(--ease-out);
}
.lb-more > summary::-webkit-details-marker { display: none; }
.lb-more > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  font-size: var(--fs-3);
  line-height: 1;
  color: var(--accent-emerald);
}
.lb-more[open] > summary::before { content: "\2212"; }
.lb-more > summary:hover { color: var(--fg); }
.lb-more > summary:focus-visible {
  outline: 2px solid var(--accent-violet);
  outline-offset: 2px;
}
/* PROMOTED DISCLOSURE LABELS — the summary text is now a real heading.
   Why: this page had four headings total ("What happened before your crash?"
   and the three numbered wizard steps), while roughly 450 of its 765 words —
   the method, the calibration numbers, the limits, the honesty section, i.e.
   every citable and differentiating thing on the site — sat inside <details>
   blocks whose only label was a <summary>. A crawler building a topical model
   of this URL saw a wizard, not a document about delayed symptom patterns.
   The HTML spec allows exactly one heading inside <summary>, so this is the
   standard fix rather than a hack.

   Rendering must not move a pixel, so every property site.css puts on h2/h3 is
   handed straight back. text-transform is declared EXPLICITLY and is NOT
   optional: site.css:222 and :227 set h2 and h3 to uppercase, and `font:
   inherit` does not reset it because text-transform is not part of the font
   shorthand. Drop that one line and every label ships in CAPS. */
.lb-more > summary > h2,
.lb-more > summary > h3 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.lb-more-body {
  padding: 0 0 var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 44em;
}
.lb-more-body p {
  margin: 0;
  font-size: var(--fs-3);
  line-height: 1.65;
  color: var(--muted);
}
.lb-more-body strong { color: var(--fg); }

/* ── steps ──────────────────────────────────────────────────────────────── */
.lb-step {
  margin: var(--sp-6) 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.lb-step--quiet { border-top-color: var(--hairline); }
.lb-step > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}
.lb-step-n {
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.24em;
  color: var(--dim);
}

/* ── input controls ─────────────────────────────────────────────────────── */
.lb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

/* The file input is visually replaced by its own label so the control can be a
   real tap target, but it stays in the accessibility tree and keeps native
   keyboard behaviour — positioned out of view, never display:none, which would
   remove it from the tab order. */
.lb-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-3);
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-out);
}
.lb-file:hover { border-color: var(--accent-violet); }
.lb-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.lb-file:focus-within { outline: 2px solid var(--accent-violet); outline-offset: 2px; }

/* Also worn by an <a> (#lb-wrong), not only <button>. An anchor without these
   three blockifies inside the .lb-after flex row and renders underlined and
   top-aligned beside a vertically-centred button — a visibly broken control.
   All three are no-ops for the <button> users. */
.lb-secondary {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-height: 44px;
  padding: 0 var(--sp-3);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-3);
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-out);
}
.lb-secondary:hover { border-color: var(--accent-violet); }

.lb-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.lb-picker select {
  min-height: 48px;
  min-width: 16rem;
  max-width: 100%;
  padding: 0 var(--sp-2);
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--fs-3);
}

.lb-hint, .lb-status, .lb-note {
  font-family: var(--mono);
  font-size: var(--fs-2);
  color: var(--dim);
  line-height: 1.65;
  margin: 0;
}
.lb-status, .lb-note { margin-top: var(--sp-2); }

.lb-sample {
  margin: 0;
  padding: var(--sp-2);
  overflow-x: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--fs-2);
  color: var(--muted);
  line-height: 1.7;
}

.lb-more-body textarea {
  width: 100%;
  padding: var(--sp-2);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--fs-2);
  line-height: 1.6;
  resize: vertical;
}
.lb-more-body button { align-self: flex-start; }

/* ── results ────────────────────────────────────────────────────────────── */
.lb-runline {
  font-family: var(--mono);
  font-size: var(--fs-2);
  color: var(--dim);
  line-height: 1.7;
  margin: 0 0 var(--sp-3);
}

.lb-found-h { margin: 0 0 var(--sp-3); font-size: var(--fs-5); font-weight: 400; }

.lb-find {
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent-emerald);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.lb-find-lag {
  margin: 0 0 var(--sp-1);
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-emerald);
}
.lb-find h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-5); font-weight: 400; line-height: 1.25; }
.lb-find-dir { margin: 0 0 var(--sp-1); color: var(--muted); font-size: var(--fs-3); }
.lb-find-plain { margin: 0 0 var(--sp-2); color: var(--fg); font-size: var(--fs-3); }
.lb-find-nums {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-1);
  color: var(--dim);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.lb-null {
  border: 1px solid var(--border);
  border-left: 2px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--sp-3);
}
.lb-null h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-5); font-weight: 400; }
.lb-null p { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--fs-3); }
.lb-null p:last-child { margin-bottom: 0; }

.lb-caveat {
  margin: var(--sp-3) 0 0;
  color: var(--dim);
  font-size: var(--fs-2);
  line-height: 1.7;
  max-width: 42em;
}

.lb-after { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.lb-pass { color: var(--accent-emerald); font-family: var(--mono); font-size: var(--fs-3); }
.lb-fail { color: #ff6b6b; font-family: var(--mono); font-size: var(--fs-3); }

.lb-cta-lead { max-width: 32em; color: var(--muted); }

/* Retained for the skipped-pairings list the engine renders into the report. */
.lb-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.lb-checks li { position: relative; padding-left: var(--sp-3); color: var(--muted); font-size: var(--fs-2); line-height: 1.65; }
.lb-checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 1px;
  background: var(--hairline-strong);
}
.lb-checks--plain li::before { background: var(--hairline-strong); }
.lb-details { margin-top: var(--sp-3); border-top: 1px solid var(--border); }
.lb-details > summary {
  cursor: pointer;
  padding: var(--sp-2) 0;
  font-family: var(--mono);
  font-size: var(--fs-2);
  color: var(--dim);
}
.lb-details-body { padding: 0 0 var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }

/* ── the receipt: a picture of the result the reader can save ──────────────
   The card itself is drawn on a canvas at a fixed 1080x1350 and carries its own
   colours (BRAND.md, read from site.css). Everything here is the surround. */
.lb-rc {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}
.lb-rc-h { margin: 0; font-size: var(--fs-5); }
.lb-rc-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
  max-width: 34rem;
  color: var(--muted);
  font-size: var(--fs-2);
  font-family: var(--mono);
}
.lb-rc-field input,
.lb-rc-field textarea {
  min-height: 48px;             /* a 44px+ target, per the rest of this page */
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  background: var(--card);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-3);
}
.lb-rc-field textarea { min-height: 16rem; line-height: 1.6; resize: vertical; }
.lb-rc-out { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; align-items: flex-start; }
/* The canvas is the SOURCE, never the thing on screen: what the reader sees is
   the <img>, which is the same bytes they will save. Showing the canvas instead
   would let the picture and the saved file diverge without anyone noticing. */
.lb-rc-canvas { display: none; }
.lb-rc-img {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── print: one page a doctor can read in a minute ──────────────────────── */
@media print {
  .topbar,
  .skip-link,
  .lb-eyebrow,
  .lb-sub,
  .lb-figure,
  .lb-promises,
  .lb-more,
  .lb-actions,
  .lb-hint,
  .lb-picker,
  .lb-after,
  /* The receipt is the SCREEN artefact. The doctor's sheet is the paper one,
     and they are different documents for different rooms — a share card and
     its input boxes on a clinical printout is noise at an appointment. */
  .lb-rc,
  .lb-step--quiet,
  .aeo-cta,
  .aeo-footer,
  /* .lb-status IS NOT HIDDEN. It carries the date-reading line and the
     misread-date warning — the one failure the engine calls most dangerous,
     because it produces a confident and completely wrong answer. Hiding it
     made that warning invisible on the exact artifact a visitor carries to
     an appointment. The screen warns; the paper must warn too. */
  .lb-note { display: none !important; }

  html, body { background: #fff !important; color: #111 !important; }

  /* The printout is the artifact that actually leaves the building — it goes
     to an appointment, gets photographed, gets forwarded to a relative. Until
     now it carried no address and no URL, so a stranger who found a mistake
     while sitting in a waiting room had nothing to write to and nothing to
     send anyone. .lb-after stays hidden (its Print button is meaningless on
     paper); this is a printed-only line that does not disturb that list. */
  #lb-results::after {
    content: "This is a pattern in numbers you recorded yourself. It is not a diagnosis and not medical advice. A pattern is not a cause. Take it to your clinician as a question, not an answer.  ·  Wrong about you? Tell me: brock@arkhelion.ai  ·  arkhelion.ai/what-came-before/";
    display: block;
    margin-top: 12pt;
    padding-top: 6pt;
    border-top: 1px solid #ccc;
    font-size: 9pt;
    color: #333;
  }

  /* THE DISCLAIMER SENTENCE ABOVE IS NOT DECORATION — READ THIS BEFORE EDITING IT.
     Every medical disclaimer on this page is hidden in print, and all three were
     hidden by the block above this one:
       "Not medical advice."                       -> .lb-promises   (hidden)
       "It cannot diagnose or treat. It is not a
        medical device and not a doctor."          -> .lb-step--quiet
                                                      > .lb-more     (hidden twice)
       "Arkhelion surfaces patterns in your own
        data. It is not medical advice."           -> .aeo-footer    (hidden)
     So the one artifact that physically leaves the building — the sheet a sick
     stranger prints, hands to a consultant, photographs, forwards to a relative —
     presented correlation findings with nothing on it saying they are not a
     diagnosis.
     That is both the liability answer and the medical-device answer. Under UK MDR
     2002 reg 2 an intended purpose is read from "the data supplied by the
     manufacturer on the labelling, the instructions for use and/or the
     promotional materials". A printout titled for a clinical appointment, with
     every disclaimer stripped, is labelling that argues the wrong way.
     The screen warns; the paper must warn too — the same rule the date-misread
     comment four lines below already states. It was applied to one warning and
     not to the others, in the same selector list, which is exactly why nobody saw
     it: the care taken over one made the absence of the rest invisible.
     If this content string is ever shortened, the disclaimer half stays. */

  .lb-hero, .lb-step { border: none; margin: 0 0 12pt; padding: 0; }
  .lb-hero h1 { font-size: 18pt; margin: 0 0 4pt; }

  .lb-find, .lb-null {
    background: #fff !important;
    border: 1px solid #999 !important;
    border-left: 3px solid #333 !important;
    padding: 8pt;
    margin-bottom: 8pt;
    break-inside: avoid;
  }
  .lb-find h4 { font-size: 13pt; }
  .lb-find-lag { color: #333 !important; }
  .lb-find-dir, .lb-find-plain, .lb-find-nums, .lb-runline, .lb-caveat, .lb-null p, .lb-checks li {
    color: #333 !important;
  }
  .lb-checks li::before { background: #999 !important; }
  a[href]::after { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-file, .lb-secondary, .lb-more > summary { transition: none; }
}

/* Date-misread warning. Loud on purpose: a wrong date format is the one
   failure that yields a confident, plausible, completely wrong answer, and
   the reader is the only instrument that can catch it. */
.lb-warn {
  color: var(--fg);
  border-left: 2px solid var(--accent-emerald);
  padding-left: var(--sp-2);
}