/* PulseDeck reading pages — docs and how-to.
 *
 * The landing page (public/index.html), the dashboard and the TV board do NOT
 * use this. They keep the full neon treatment, which is right for atmosphere
 * and wrong for a page someone reads standing at a front desk.
 *
 * Three jobs for colour, and only three:
 *   purple      brand and interaction. Never carries information.
 *   zone ramp   meaning. Never decoration. Copied from src/zones.ts.
 *   near-blacks the reading surface.
 *
 * Every value is measured against the surface it actually sits on; the ratios
 * in the comments are WCAG contrast against --card unless stated.
 */
:root {
  /* surfaces — a real ladder, so cards separate without leaning on a border */
  --bg: #0b0912;        /* was #0a0612 — same hue, off full saturation */
  --panel: #1d1830;     /* 1.15:1 above the page; the old pair was 1.08:1 */
  --card: #1d1830;
  --code: #282142;
  --border: #4a4270;    /* 1.88:1 — the old #3a2466 measured 1.38:1, invisible */

  /* text — three real tiers. Prose used to be set in the caption colour. */
  --text: #ece9f5;      /* headings                                  14.3:1 */
  --body: #cfc8e2;      /* paragraphs — this tier did not exist       10.6:1 */
  --muted: #9d95b8;     /* captions, meta, and nothing else            6.1:1 */

  /* brand — interaction only */
  --accent: #a78bfa;    /* links, buttons, step markers, focus         6.3:1 */
  --accent2: #e879f9;   /* wordmark gradient, eyebrows */

  /* meaning — verbatim from src/zones.ts */
  --cyan: #4cc9f0;      /* tip                                         8.9:1 */
  --blue: #3a86ff;      /* note                                        4.9:1 */
  --green: #2bff88;     /* works today                                12.9:1 */
  --amber: #ff9e2c;     /* heads-up                                    8.3:1 */
  --pink: #ff2d6f;      /* won't work                                  4.8:1 */

  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --good: #2bff88;
}

/* Prose gets a reading face. Rajdhani stays on the board and the nav chrome,
 * where condensed and squared-off is exactly right — it was never the wrong
 * font, just in the wrong place. */
body.pd-read {
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* The grid stays, at a third of the strength. It reads as texture at the edges
 * of the page instead of as noise directly behind the words. */
body.pd-read {
  background-image:
    linear-gradient(rgba(167, 139, 250, .017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, .017) 1px, transparent 1px);
  background-size: 48px 48px;
}

body.pd-read h1,
body.pd-read h2,
body.pd-read h3,
body.pd-read h4 { color: var(--text); text-wrap: balance; }

body.pd-read p { color: var(--body); font-size: 16px; line-height: 1.7; }
body.pd-read li { color: var(--body); }
body.pd-read b, body.pd-read strong { color: var(--text); }

/* Beat the page-level rules that set prose in --muted at 14px. */
body.pd-read .sec p,
body.pd-read .card p,
body.pd-read .guide p,
body.pd-read .steps p,
body.pd-read .steps li { color: var(--body); font-size: 15.5px; line-height: 1.65; }
body.pd-read .lede,
body.pd-read .sec .lede { color: var(--muted); font-size: 16px; }
body.pd-read .more { color: var(--muted); }

body.pd-read .card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: none;   /* the inset purple glow sat directly behind the text */
}

body.pd-read a { text-underline-offset: 3px; }
body.pd-read .sec a:not(.btn):not(.home),
body.pd-read .card a:not(.btn):not(.home) { color: var(--accent); }

/* ---- callouts -----------------------------------------------------------
 * The hue carries the meaning; the text stays neutral, because 16px of neon
 * prose is tiring to read. Tints are the hue at 10% over --card, which leaves
 * body text at 8.6:1 or better in every variant.
 */
.co {
  border-left: 3px solid var(--co-h, var(--accent));
  background: var(--co-t, transparent);
  border-radius: 0 9px 9px 0;
  padding: 13px 16px 14px;
  margin-top: 16px;
}
.co + .co { margin-top: 10px; }
.co .lbl {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--co-h, var(--accent));
  margin-bottom: 4px;
}
body.pd-read .co p { color: var(--body); font-size: 15.5px; line-height: 1.62; }

.co-tip     { --co-h: var(--cyan);  --co-t: #222a43; }
.co-note    { --co-h: var(--blue);  --co-t: #202345; }
.co-works   { --co-h: var(--green); --co-t: #1e2f39; }
.co-heads   { --co-h: var(--amber); --co-t: #342530; }
.co-wont    { --co-h: var(--pink);  --co-t: #341a36; }

/* The old .note blocks are notes; restyle them in place rather than rewriting
 * every page's markup. */
body.pd-read .note {
  border-left: 3px solid var(--blue);
  background: #202345;
  border-radius: 0 9px 9px 0;
  padding: 13px 16px 14px;
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.62;
}

/* ---- section spine ------------------------------------------------------
 * One hue per page, so the extra colour is navigation rather than decoration —
 * you know which part of the docs you're in before reading the heading.
 */
body.pd-read .chip { color: var(--spine, var(--accent2)); border-color: var(--border); }
body.pd-read .sec > h2 { border-left: 3px solid var(--spine, var(--accent)); padding-left: 12px; }

body.pd-docs-index  { --spine: var(--accent); }
body.pd-docs-garmin { --spine: var(--cyan); }
body.pd-docs-apps   { --spine: var(--green); }
body.pd-docs-req    { --spine: var(--amber); }
body.pd-how-to      { --spine: var(--accent2); }

body.pd-read :where(a, button):focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  body.pd-read *, body.pd-read *::before, body.pd-read *::after {
    animation: none !important; transition: none !important;
  }
}