/* ────────────────────────────────────────────────────────────────────────
   nimiq-base.css — Pro Athlete Academy "Bone / platinum" identity.

   This is the ONLY bespoke stylesheet going forward. It layers on top of the
   vendored Nimiq CSS (`/vendor/nimiq-style.min.css`), which must be linked
   FIRST so the `.nq-*` components are available here.

   Brand stance (REBRAND): we KEEP Nimiq's STRUCTURAL discipline (8px root so
   custom CSS in px, inset box-shadow inputs not border, radial gradients not
   flat fills, sentence-case, no periods on display titles, no em/en dashes, no
   AI-slop ornaments) but we REPLACE Nimiq's colors, icons, and logo with PAA's
   own. Icons are Lucide (lib/icons.ts), not Nimiq icons. The mark is the PAA
   "PA" tile (public/paa-mark.svg), never the Nimiq hexagon/wordmark (rule 12).

   THE PALETTE (approved — "Bone / platinum", NO GREEN ANYWHERE):
     black #0D0D0F · charcoal #1C1C20 / #26262C · white #FFF · page #F6F5F4
     brand maroon #7E1420 -> crimson #B11226 (radial) · accent crimson #B11226
     bone #ECEAE4 (the on-dark "pop": big stats, CTA fill on dark, active, logo)
     error #E5484D (distinct from brand red) · success = NEUTRAL charcoal + check
   Dark surfaces/heroes/nav/footers: radial-gradient(130% 130% at 100% 100%,
     #2A2125, #0D0D0F). Brand areas/mark: radial-gradient(120% 120% at 100% 100%,
     #7E1420, #B11226). Modal overlays: rgba(13,13,15,0.6).

   IMPORTANT — 8px root font-size. The vendored Nimiq CSS sets
   `html { font-size: 8px }` so 1rem = 8px; nq-* rem values assume this. ALL
   custom CSS in THIS file is written in px to avoid the half-size trap.

   ── How the nq-* recolor works ─────────────────────────────────────────
   The vendored `.nq-*` classes reference `--nimiq-*` tokens (defined on html{}
   upstream). We REDEFINE those `--nimiq-*` tokens here at :root — same
   specificity, later source order wins — so the entire nq-* layer takes the PAA
   palette without per-class edits. Specific cases the token remap can't cleanly
   cover (default button = brand, bone button on dark, "green" -> neutral) get
   explicit overrides further down.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Remap the upstream Nimiq palette tokens to PAA's. The nq-* components read
   these, so this single block recolors every vendored button/input/card/bg. */
:root {
  --nimiq-blue:                  #1C1C20;       /* "dark" / ink -> charcoal */
  --nimiq-blue-darkened:         #0D0D0F;       /* darker charcoal -> black */
  --nimiq-blue-bg:               radial-gradient(130% 130% at 100% 100%, #2A2125, #0D0D0F);   /* dark hero */
  --nimiq-blue-bg-darkened:      radial-gradient(130% 130% at 100% 100%, #201A1C, #060607);

  --nimiq-light-blue:            #B11226;       /* "accent" -> crimson (links/CTA on light) */
  --nimiq-light-blue-darkened:   #8E0E1E;
  --nimiq-light-blue-on-dark:    #D8556A;       /* crimson is dark; lighten it for on-dark text */
  --nimiq-light-blue-bg:         radial-gradient(120% 120% at 100% 100%, #7E1420, #B11226);   /* brand */
  --nimiq-light-blue-bg-darkened: radial-gradient(120% 120% at 100% 100%, #650F1A, #8E0E1E);

  /* "gold" is repurposed as the bone "bright" (on-dark pop / active / CTA-on-dark). */
  --nimiq-gold:                  #ECEAE4;
  --nimiq-gold-darkened:         #D8D5CC;
  --nimiq-gold-bg:               radial-gradient(120% 120% at 100% 100%, #F2F0EB, #ECEAE4);
  --nimiq-gold-bg-darkened:      radial-gradient(120% 120% at 100% 100%, #E2DFD7, #D8D5CC);

  /* NO GREEN: "green" is remapped to the brand so any stray .green reads as brand,
     never green. (Semantic success in PAA is NEUTRAL charcoal + a check icon.) */
  --nimiq-green:                 #B11226;
  --nimiq-green-darkened:        #8E0E1E;
  --nimiq-green-bg:              radial-gradient(120% 120% at 100% 100%, #7E1420, #B11226);
  --nimiq-green-bg-darkened:     radial-gradient(120% 120% at 100% 100%, #650F1A, #8E0E1E);

  /* error is its OWN red, distinct from brand red so an error never reads as branding. */
  --nimiq-red:                   #E5484D;
  --nimiq-red-darkened:          #CB3B40;
  --nimiq-red-on-dark:           #F0686C;
  --nimiq-red-bg:                radial-gradient(120% 120% at 100% 100%, #E5484D, #C93539);
  --nimiq-red-bg-darkened:       radial-gradient(120% 120% at 100% 100%, #CB3B40, #B12F33);
}

/* ── PAA tokens (the names elsewhere in lib/ + public/ reference — KEPT verbatim,
   values remapped to the bone palette). All px (8px root aware). New tokens
   (--paa-black, --paa-bright, --paa-bright-ink, --paa-brand, --paa-brand-deep,
   --paa-dark-bg) added for the rebrand. */
:root {
  /* New foundational colors */
  --paa-black:          #0D0D0F;                 /* deepest base */
  --paa-charcoal:       #1C1C20;                 /* dark surface / ink */
  --paa-charcoal-2:     #26262C;                 /* raised dark surface */
  --paa-brand:          #B11226;                 /* crimson */
  --paa-brand-deep:     #7E1420;                 /* maroon */
  --paa-bright:         #ECEAE4;                  /* bone — the on-dark pop */
  --paa-bright-ink:     #1C1C20;                  /* text on a bone fill */
  --paa-dark-bg:        radial-gradient(130% 130% at 100% 100%, #2A2125, #0D0D0F);  /* dark hero/nav/footer */
  --paa-brand-bg:       radial-gradient(120% 120% at 100% 100%, #7E1420, #B11226);  /* brand areas/mark */

  /* Surfaces */
  --paa-page-bg:        #F6F5F4;                 /* off-white page */
  --paa-surface:        #ffffff;                 /* cards */
  --paa-navy:           #1C1C20;                 /* (legacy name) dark surface / ink -> charcoal */
  --paa-navy-bg:        var(--paa-dark-bg);      /* (legacy name) dark hero fill */

  /* Text */
  --paa-ink:            #1C1C20;                 /* primary text on light */
  --paa-ink-muted:      rgba(28, 28, 32, 0.55);  /* secondary text / labels */
  --paa-ink-faint:      rgba(28, 28, 32, 0.40);  /* footer text */
  --paa-on-navy:        #ffffff;                 /* text on dark */
  --paa-on-navy-muted:  rgba(255, 255, 255, 0.62);
  --paa-on-navy-faint:  rgba(255, 255, 255, 0.42);

  /* Accents. crimson = primary CTA / links on light. success is NEUTRAL (charcoal
     + a check icon), NEVER a green color. error is its own red. gold name kept
     but repurposed as the bone "bright". */
  --paa-accent:         #B11226;                 /* crimson */
  --paa-accent-bg:      var(--paa-brand-bg);     /* brand gradient fill */
  --paa-success:        #1C1C20;                 /* NEUTRAL (not green) — pair with a check icon */
  --paa-error:          #E5484D;
  --paa-gold:           #ECEAE4;                 /* (legacy name) repurposed as bone "bright" */

  /* Lines / fills (charcoal rgbas) */
  --paa-line:           rgba(28, 28, 32, 0.10);  /* matches nq-input inset */
  --paa-fill-soft:      rgba(28, 28, 32, 0.06);  /* soft fill (nq-button-s style) */

  /* Radius / shadow (card 10px, inputs 4px) */
  --paa-radius:         10px;
  --paa-radius-sm:      4px;
  --paa-radius-pill:    500px;
  --paa-shadow-card:    0 4px 28px rgba(13, 13, 15, 0.10);

  /* Fonts */
  --paa-font:           'Mulish', 'Muli', system-ui, sans-serif;
  --paa-font-mono:      'Fira Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Motion */
  --paa-ease:           var(--nimiq-ease, cubic-bezier(0.25, 0, 0, 1));

  /* Page chrome dimensions */
  --paa-page-max:       560px;
  --paa-content-pad:    24px;
}

/* ── Mulish body override (nimiq-ui rule 9; nimiq-style sets deprecated Muli) */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--paa-font) !important;
  background: var(--paa-page-bg);
  color: var(--paa-ink);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

/* Numbers / stats / hashes in Fira Mono (nimiq-ui). */
.paa-mono,
.mono,
.value,
.slider-value,
.err-code {
  font-family: var(--paa-font-mono);
  font-feature-settings: "tnum" 1;
}

/* ── Lucide icon helper (lib/icons.ts) ──────────────────────────────────────
   Icons are inline SVG with stroke=currentColor; this just keeps them inline
   and optically aligned with adjacent text. Size via width/height on the svg
   (icon() sets them) — do NOT size via font-size here. */
.paa-ico {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.15em;
  line-height: 0;
}
.paa-ico svg { display: block; }

/* ── nq-* component overrides (PALETTE only; keep upstream shape/motion) ─────
   The :root token remap above already pushes the PAA palette into every nq-*
   class. These overrides cover the few cases the remap can't express:
     - default .nq-button should be the BRAND crimson (remap left it charcoal),
     - a BONE button for dark heroes (#ECEAE4 fill + charcoal text),
     - "success" is NEUTRAL not green (remap already made .green = brand). */

/* Default solid button = brand crimson gradient, white text (was charcoal). */
.nq-button {
  background: var(--paa-brand);
  background-image: var(--paa-brand-bg);
  color: #fff;
}
.nq-button:not([disabled])::before { background-image: var(--paa-brand-bg); filter: brightness(0.9); }
/* .nq-button.light-blue is ALSO the brand crimson (the app's primary CTA) —
   the token remap already maps light-blue -> crimson, so it matches the default.
   Kept explicit for clarity / future-proofing. */
.nq-button.light-blue {
  background: var(--paa-brand);
  background-image: var(--paa-brand-bg);
  color: #fff;
}

/* Bone button — the primary CTA ON DARK heroes/nav: bone fill, charcoal text.
   Use `.nq-button.bone` anywhere, or any plain .nq-button inside an `.on-dark`
   block or a `.paa-hero` (so a hero CTA pops in bone, not crimson-on-dark). */
.nq-button.bone,
.on-dark .nq-button:not(.light-blue):not(.green):not(.red):not(.gold):not(.orange),
.paa-hero .nq-button:not(.light-blue):not(.green):not(.red):not(.gold):not(.orange) {
  background: var(--paa-bright);
  background-image: var(--paa-gold-bg);   /* gold token = bone bright gradient */
  color: var(--paa-bright-ink);
}
.nq-button.bone::before,
.on-dark .nq-button:not(.light-blue):not(.green):not(.red):not(.gold):not(.orange)::before,
.paa-hero .nq-button:not(.light-blue):not(.green):not(.red):not(.gold):not(.orange)::before {
  background-image: var(--paa-gold-bg);
  filter: brightness(0.93);
}

/* Soft small button: charcoal-rgba soft fill, charcoal text. */
.nq-button-s,
.nq-button-pill.inverse {
  background: var(--paa-fill-soft);
  color: var(--paa-ink);
}
.nq-button-s:active,
.nq-button-s:focus,
.nq-button-s:hover {
  background: rgba(28, 28, 32, 0.10);
  color: var(--paa-ink);
}

/* Inputs: inset box-shadow ring (never border). Resting = charcoal line; focus =
   crimson. The token remap already recolors these, this just nails the rest
   color + focus color explicitly and overrides the upstream blue focus text. */
.nq-input,
.nq-input-s {
  --border-color: var(--paa-line);
  color: var(--paa-ink);
}
.nq-input:hover,
.nq-input-s:hover { --border-color: rgba(28, 28, 32, 0.2); }
.nq-input:focus,
.nq-input-s:focus {
  --border-color: var(--paa-brand);
  color: var(--paa-ink);
}
.nq-input::placeholder,
.nq-input-s::placeholder { color: rgba(28, 28, 32, 0.40); }

/* PAA header (wordmark, never the Nimiq hexagon — rule 12) ───────────── */
.paa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  max-width: 1080px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}
.paa-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--paa-ink);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.paa-wordmark .paa-mark {
  /* PAA mark — the "PA" tile on the brand-red radial gradient (public/paa-mark.svg).
     Rendered as an <img>; sized here. Falls back to a gradient tile + text if the
     SVG is missing (the bg-image/color below show through a textual .paa-mark). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-image: var(--paa-brand-bg);
  color: var(--paa-bright);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  align-self: center;
}
/* When .paa-mark is the SVG <img> (shell.ts / signin.html), it paints itself —
   drop the fallback gradient/text styles so they don't show through. */
.paa-wordmark img.paa-mark {
  background: none;
  object-fit: contain;
  border-radius: 10px;
}
.paa-wordmark .paa-name { white-space: nowrap; }
.paa-wordmark .paa-name .paa-name-short { display: none; }

/* App nav (shown when shell nav: "app") */
.paa-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.paa-nav a {
  color: var(--paa-ink-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: color 0.2s var(--paa-ease);
}
.paa-nav a:hover { color: var(--paa-ink); }
.paa-nav a[aria-current="page"] { color: var(--paa-ink); }

/* ── Main page-body wrapper ─────────────────────────────────────────────── */
.paa-main {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}
/* Centered single-column content (default app pages). */
.paa-page {
  max-width: var(--paa-page-max);
  width: 100%;
  margin: 0 auto;
  padding: 8px var(--paa-content-pad) 56px;
  box-sizing: border-box;
}
/* Vertically + horizontally centered, for auth / focused single-card pages. */
.paa-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

/* ── PAA footer (NOT the Nimiq footer — no hexagon, no nimiq.com — rule 12) */
.paa-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 28px 24px;
  color: var(--paa-ink-faint);
  font-size: 13px;
  font-weight: 600;
}
.paa-footer a {
  color: var(--paa-ink-faint);
  text-decoration: none;
  transition: color 0.2s var(--paa-ease);
}
.paa-footer a:hover { color: var(--paa-ink); }
.paa-footer .paa-footer-sep { opacity: 0.4; }

/* ── PAA card (built on nq-card; nq-card has ZERO internal padding — rule 14) */
.paa-card {
  background: var(--paa-surface);
  border-radius: var(--paa-radius);
  box-shadow: var(--paa-shadow-card);
  padding: 32px;
  box-sizing: border-box;
  margin: 0;
  color: var(--paa-ink);
}
.paa-card + .paa-card { margin-top: 20px; }
.paa-card h1,
.paa-card h2,
.paa-card h3 { color: var(--paa-ink); }
.paa-card h1 { font-size: 28px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; letter-spacing: -0.01em; }
.paa-card h2 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; }
.paa-card h3 { font-size: 16px; font-weight: 700; margin: 0; }
.paa-card p  { color: var(--paa-ink-muted); margin: 0; line-height: 1.6; }

/* Icon + label launcher grid — shared component (dashboard + mind hub). Tiles
   are links: icon tile, bold label, optional small real-state hint. No explainer
   copy (progressive disclosure: the destination page explains itself). */
.launch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
@media (min-width: 600px) { .launch-grid { grid-template-columns: 1fr 1fr 1fr; } }
.launch-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border-radius: var(--paa-radius);
  box-shadow: inset 0 0 0 2px var(--paa-line);
  text-decoration: none;
  color: var(--paa-ink);
  min-height: 104px;
  transition: box-shadow 0.2s var(--paa-ease), transform 0.08s var(--paa-ease);
}
.launch-tile:hover { box-shadow: inset 0 0 0 2px rgba(28, 28, 32, 0.22); }
.launch-tile:active { transform: translateY(1px); }
.launch-tile .launch-ico {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: var(--paa-fill-soft);
  color: var(--paa-ink);
}
.launch-tile .launch-label { font-size: 16px; font-weight: 700; line-height: 1.25; }
.launch-tile .launch-hint { font-size: 13px; color: var(--paa-ink-muted); margin-top: auto; }

/* Progressive-disclosure <details> (lib/shell.ts disclosure()). Collapsed by
   default; the summary is a quiet crimson affordance with a Lucide chevron that
   rotates open. Solid surfaces, no AI-slop. */
.paa-disclosure { margin: 0; }
.paa-disclosure-sum {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--paa-accent);
  padding: 6px 0;
  user-select: none;
}
.paa-disclosure-sum::-webkit-details-marker { display: none; }
.paa-disclosure-chev { display: inline-flex; transition: transform 0.15s var(--paa-ease); }
.paa-disclosure[open] .paa-disclosure-chev { transform: rotate(90deg); }
.paa-disclosure-sum:hover { color: var(--paa-brand-deep); }
.paa-disclosure-body { margin-top: 8px; }

/* Auth-style focused card. */
.paa-auth-card {
  max-width: 460px;
  width: 100%;
}

/* Stacks an auth card above its foot link, centered, with generous spacing. */
.paa-auth-stack {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Lede / muted text ──────────────────────────────────────────────────── */
.paa-lede {
  font-size: 16px;
  color: var(--paa-ink-muted);
  margin: 0 0 24px;
  line-height: 1.6;
}
.paa-muted { color: var(--paa-ink-muted); }

/* ── Dark radial-gradient hero (rule 7: never flat-fill; warm brand-glow corner).
   Set `.on-dark` here too so a .nq-button inside a hero becomes a bone button. */
.paa-hero {
  background-image: var(--paa-dark-bg);
  color: var(--paa-on-navy);
  border-radius: var(--paa-radius);
  padding: 40px 32px;
  box-sizing: border-box;
}
.paa-hero h1 { color: var(--paa-on-navy); font-size: 32px; font-weight: 700; line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.01em; }
.paa-hero p  { color: var(--paa-on-navy-muted); margin: 0; font-size: 16px; line-height: 1.6; }
.paa-hero a  { color: #fff; }
.paa-hero .paa-emphasis { color: var(--paa-bright); }   /* bone on dark = the "pop" */

/* ── Forms (inset box-shadow borders — rule 1; never border:) ───────────── */
.paa-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  min-width: 0;
}
.paa-field:last-of-type { margin-bottom: 0; }
.paa-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--paa-ink-muted);
}
.paa-input,
.paa-field input,
.paa-field select,
.paa-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: var(--paa-radius-sm);
  box-shadow: inset 0 0 0 2px var(--paa-line);
  background: #fff;
  font-family: var(--paa-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--paa-ink);
  outline: none;
  transition: box-shadow 0.2s var(--paa-ease);
}
.paa-field textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 16px;
  font-weight: 400;
  resize: vertical;
}
.paa-input::placeholder,
.paa-field input::placeholder,
.paa-field textarea::placeholder {
  color: rgba(28, 28, 32, 0.40);
  font-weight: 400;
}
.paa-input:hover,
.paa-field input:hover,
.paa-field select:hover,
.paa-field textarea:hover {
  box-shadow: inset 0 0 0 2px rgba(28, 28, 32, 0.2);
}
.paa-input:focus,
.paa-field input:focus,
.paa-field select:focus,
.paa-field textarea:focus {
  box-shadow: inset 0 0 0 2px var(--paa-accent);
}
.paa-input.is-error,
.paa-field input.is-error {
  box-shadow: inset 0 0 0 2px var(--paa-error);
}
.paa-field .hint { font-size: 13px; color: var(--paa-ink-muted); font-weight: 400; }

/* Mono numeric input (stats, weights). */
.paa-input.mono { font-family: var(--paa-font-mono); }

/* ── Full-width button helpers on top of nq-button ──────────────────────── */
/* nq-button already brings pill shape, height, gradient, uppercase, hover.
   .paa-btn-block makes a button stretch a form; .paa-btn-row lays out a pair. */
.paa-btn-block { display: block; width: 100%; }
.paa-btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* nq-button is min-width 200px by default; let it shrink inside tight rows. */
.paa-btn-row .nq-button { min-width: 0; }

/* Plain text link styled in the brand crimson. */
.paa-link {
  color: var(--paa-accent);
  text-decoration: none;
  font-weight: 600;
}
.paa-link:hover { text-decoration: underline; }

/* ── Alerts / inline status (real state changes only — rule 17) ─────────────
   error = its own red (#E5484D, distinct from brand). success = NEUTRAL charcoal
   (NO green — pair with a check icon in markup). info = brand crimson. */
.paa-alert {
  padding: 12px 16px;
  border-radius: var(--paa-radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.paa-alert.error {
  color: var(--paa-error);
  box-shadow: inset 0 0 0 2px rgba(229, 72, 77, 0.30);
  background: rgba(229, 72, 77, 0.07);
}
.paa-alert.ok,
.paa-alert.success {
  /* neutral, NOT green: charcoal text on a soft charcoal fill + a check in copy */
  color: var(--paa-ink);
  box-shadow: inset 0 0 0 2px rgba(28, 28, 32, 0.14);
  background: rgba(28, 28, 32, 0.05);
}
.paa-alert.ok .paa-ico,
.paa-alert.success .paa-ico { color: var(--paa-ink); }
.paa-alert.info {
  color: var(--paa-accent);
  box-shadow: inset 0 0 0 2px rgba(177, 18, 38, 0.25);
  background: rgba(177, 18, 38, 0.05);
}

/* ── Footer foot-note links under an auth card ──────────────────────────── */
.paa-foot {
  text-align: center;
  font-size: 14px;
  color: var(--paa-ink-muted);
  margin: 18px 0 0;
}
.paa-foot a { color: var(--paa-accent); text-decoration: none; font-weight: 600; }
.paa-foot a:hover { text-decoration: underline; }

/* ── Crisis-line footer (preserved verbatim copy from /app/*; restyled) ── */
.mind-crisis {
  margin: 32px auto 0;
  max-width: var(--paa-page-max);
  padding: 16px 24px 32px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--paa-ink-muted);
}
.mind-crisis strong { color: var(--paa-ink); font-weight: 700; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .paa-header { padding: 16px 20px; }
  :root { --paa-content-pad: 16px; }
  .paa-card { padding: 24px; }
  .paa-hero { padding: 32px 24px; }
  .paa-center { padding: 16px; }
  .paa-wordmark .paa-name .paa-name-full { display: none; }
  .paa-wordmark .paa-name .paa-name-short { display: inline; }
  /* App header: the in-app nav (Dashboard / Training / Progress) needs the room,
     so show just the PAA mark (it already reads "PA") and let the nav sit beside
     it without clipping. Public headers keep the full wordmark. */
  .paa-header--app .paa-wordmark .paa-name { display: none; }
  .paa-header--app .paa-nav { gap: 18px; }
  .paa-header--app .paa-nav a { font-size: 14px; }
}