/* ============================================================
   A NEW PAGE — design system tokens + components  (anp.css)
   ------------------------------------------------------------
   THE LAW: energy lives in the world chrome — backgrounds,
   frames, cards, flames, trails — NEVER under the words.
   Reading surfaces stay calm, near-white/cream, high-contrast,
   generously spaced. Spacing beats fonts (that's the evidence).
   All text/background pairs below are verified WCAG AA — see
   11_ReadingProgram/DESIGN_SYSTEM_LOG.md for the computed math.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300..800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Andika:wght@400;700&family=Baloo+2:wght@500..800&family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap');

/* ------------------------------------------------------------
   1. CORE TOKENS
   ------------------------------------------------------------ */
:root {
  /* Brand */
  --anp-violet:        #6844A3;  /* brand primary — white on this = 7.13 */
  --anp-violet-deep:   #4E3380;
  --anp-gold:          #F4B73F;  /* brand secondary — #35250E on this = 8.22 */
  --anp-gold-ink:      #35250E;

  /* Reading surfaces (CALM — the serene layer) */
  --anp-paper:         #FCFBF8;  /* near-white  — ink on this = 15.28 */
  --anp-cream:         #F7F1E3;  /* warm cream  — ink on this = 14.04 */
  --anp-ink:           #26221C;
  --anp-ink-soft:      #4A4339;  /* 9.43 on paper, 8.66 on cream */

  /* Semantics — colorblind-safe: NEVER hue alone.
     Every semantic surface pairs color + icon + text label. */
  --anp-success:       #1E7A46;  /* white on this = 5.35 */
  --anp-danger:        #B3402F;  /* white on this = 5.69 (red-orange, deutan-safe vs success by lightness) */
  --anp-info:          #2C5FB3;  /* white on this = 6.19 */
  --anp-warn-bg:       #FFE9B8;
  --anp-warn-ink:      #5C3D00;  /* 8.29 on warn-bg */

  /* Teen / band-4 dark register */
  --anp-teen-dark:     #13161D;  /* near-gaming UI base */
  --anp-teen-text:     #E4E5F0;  /* 14.45 on teen-dark */
  --anp-teen-soft:     #A9ADBE;  /* 8.11 on teen-dark */
  --anp-teen-line:     #2A2F3C;

  /* Type */
  --anp-font-read:     'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --anp-font-ui:       'Lexend', system-ui, sans-serif;
  --anp-font-early:    'Andika', 'Lexend', sans-serif;          /* band 1 reading face */
  --anp-font-display:  'Bricolage Grotesque', 'Lexend', system-ui, sans-serif; /* chrome headers — mature adventure-confident (2026-06-11 founder note: Baloo 2 too young as default; it now lives ONLY in [data-band="1"]) */

  /* Type scale (fluid, kid-honest sizes) */
  --anp-fs-xs:   0.8125rem;
  --anp-fs-sm:   0.9375rem;
  --anp-fs-base: 1.0625rem;
  --anp-fs-lg:   1.25rem;
  --anp-fs-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  --anp-fs-2xl:  clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --anp-fs-hero: clamp(2.4rem, 1.8rem + 3vw, 3.6rem);
  --anp-fs-child-line: clamp(1.7rem, 1.3rem + 2.2vw, 2.5rem); /* the huge child lines */

  /* THE SPACING DIAL — the dyslexia feature. Per-child, persisted. */
  --anp-letterspace: 0.05em;   /* dial range 0.05–0.12em */
  --anp-wordspace:   0.10em;   /* dial range 0–0.3em     */
  --anp-lineheight:  1.7;      /* dial range 1.6–1.8     */
  --anp-maxch:       55ch;     /* max measure            */

  /* Geometry + motion */
  --anp-radius:      18px;
  --anp-radius-sm:   12px;
  --anp-tap:         44px;     /* minimum target — never smaller */
  --anp-shadow:      0 6px 24px rgba(38, 34, 28, 0.12);
  --anp-shadow-lift: 0 10px 32px rgba(38, 34, 28, 0.18);
  --anp-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --anp-dur:         180ms;

  /* World accents — defaulted to brand, overridden by [data-world] */
  --anp-world-base:    var(--anp-violet);
  --anp-world-deep:    var(--anp-violet-deep);
  --anp-world-accent:  var(--anp-gold);
  --anp-world-accent-ink: var(--anp-gold-ink);
  --anp-world-on-base: #FFFFFF;
  --anp-world-glow:    rgba(244, 183, 63, 0.35);
}

/* ------------------------------------------------------------
   2. WORLD ACCENTS  [data-world]
   Chrome only. Reading surfaces ignore these on purpose.
   ------------------------------------------------------------ */
[data-world="emberwing"] {
  --anp-world-base:    #232E4D;   /* deep dusk blue */
  --anp-world-deep:    #18203A;
  --anp-world-accent:  #FF9A47;   /* ember — 6.35 on dusk, #35250E on ember = 7.01 */
  --anp-world-accent-ink: #35250E;
  --anp-world-on-base: #FFFFFF;
  --anp-world-glow:    rgba(255, 154, 71, 0.38);
  --anp-world-second:  #F4B73F;   /* lantern gold — 7.45 as text on dusk */
}
[data-world="champions"] {
  --anp-world-base:    #103A26;   /* stadium pitch green */
  --anp-world-deep:    #0B2A1B;
  --anp-world-accent:  #FCDA4E;   /* champ gold — 9.23 on pitch */
  --anp-world-accent-ink: #103A26;
  --anp-world-on-base: #FFFFFF;
  --anp-world-glow:    rgba(252, 218, 78, 0.35);
  --anp-world-second:  #7FD8A4;
}
[data-world="agency"] {
  /* Reconciliation (logged): midnight base + cyan accent
     + lamplight amber secondary. Cozy noir, never sinister. */
  --anp-world-base:    #101D31;   /* midnight */
  --anp-world-deep:    #0A1422;
  --anp-world-accent:  #60DAE5;   /* cyan — 10.19 on midnight */
  --anp-world-accent-ink: #101D31;
  --anp-world-on-base: #FFFFFF;
  --anp-world-glow:    rgba(96, 218, 229, 0.32);
  --anp-world-second:  #F4B73F;   /* lamplight amber */
}
[data-world="blockfall"] {
  --anp-world-base:    #2B2014;   /* workshop earth */
  --anp-world-deep:    #1E160D;
  --anp-world-accent:  #9ADFB9;   /* mint — 10.33 on earth */
  --anp-world-accent-ink: #2B2014;
  --anp-world-on-base: #FFFFFF;
  --anp-world-glow:    rgba(154, 223, 185, 0.32);
  --anp-world-second:  #F4B73F;
}

/* ------------------------------------------------------------
   3. BAND REGISTERS  [data-band]
   1 = ages 3-7 storybook warm · 2 = 8-10 saturated adventure
   3 = 11-13 deeper · 4 = 14-18 mature dark, zero cartoons
   ------------------------------------------------------------ */
[data-band="1"] {
  --anp-radius: 26px;
  --anp-radius-sm: 18px;
  --anp-font-display: 'Baloo 2', sans-serif;
  --anp-fs-base: 1.1875rem;
  --anp-lineheight: 1.8;
  --anp-page-bg: var(--anp-cream);
}
[data-band="1"] .anp-read { font-family: var(--anp-font-early); }

[data-band="2"] {
  --anp-radius: 20px;
  --anp-page-bg: var(--anp-paper);
}
[data-band="3"] {
  --anp-radius: 14px;
  --anp-page-bg: var(--anp-paper);
  --anp-shadow: 0 4px 18px rgba(38, 34, 28, 0.14);
}
[data-band="4"] {
  --anp-radius: 10px;
  --anp-radius-sm: 8px;
  --anp-font-display: 'Lexend', system-ui, sans-serif; /* zero cartoons — display face retires */
  --anp-page-bg: var(--anp-teen-dark);
  --anp-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  --anp-shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* Teen chrome: dark register for everything EXCEPT the reading
   surface, which stays calm paper (legibility law holds at 17). */
[data-band="4"] .anp-chrome {
  background: var(--anp-teen-dark);
  color: var(--anp-teen-text);
}
[data-band="4"] .anp-chrome h1,
[data-band="4"] .anp-chrome h2,
[data-band="4"] .anp-chrome h3 {
  font-family: var(--anp-font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
}
[data-band="4"] .anp-tile,
[data-band="4"] .anp-power-card,
[data-band="4"] .anp-artifact-card,
[data-band="4"] .anp-cliffhanger-card {
  background: #1A1E28;
  border: 1px solid var(--anp-teen-line);
  color: var(--anp-teen-text);
}
[data-band="4"] .anp-tile p, [data-band="4"] .anp-power-card p { color: var(--anp-teen-soft); }

/* ------------------------------------------------------------
   4. BASE + ACCESSIBILITY GLOBALS
   ------------------------------------------------------------ */
.anp-page {
  font-family: var(--anp-font-ui);
  font-size: var(--anp-fs-base);
  color: var(--anp-ink);
  background: var(--anp-page-bg, var(--anp-paper));
  -webkit-font-smoothing: antialiased;
}
.anp-page :focus-visible {
  outline: 3px solid var(--anp-info);
  outline-offset: 2px;
  border-radius: 4px;
}
/* High-clarity toggle: Atkinson Hyperlegible everywhere */
.anp-hyperlegible, .anp-hyperlegible .anp-read {
  font-family: 'Atkinson Hyperlegible', var(--anp-font-read) !important;
}

/* ------------------------------------------------------------
   5. THE READING SURFACE  .anp-read  (the serene layer)
   Calm near-white/cream. High contrast. The spacing dial
   does the dyslexia work. No decoration touches this box.
   ------------------------------------------------------------ */
.anp-read {
  font-family: var(--anp-font-read);
  background: var(--anp-paper);
  color: var(--anp-ink);
  letter-spacing: var(--anp-letterspace);
  word-spacing: var(--anp-wordspace);
  line-height: var(--anp-lineheight);
  max-width: var(--anp-maxch);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--anp-radius);
  box-shadow: var(--anp-shadow);
  font-size: var(--anp-fs-lg);
}
.anp-read--cream { background: var(--anp-cream); }
.anp-read p { margin: 0 0 1em; }
.anp-read p:last-child { margin-bottom: 0; }

/* Spacing-dial presets (the per-child dial writes the vars;
   these are the three named stops) */
.anp-space-cozy   { --anp-letterspace: 0.05em; --anp-wordspace: 0.05em; --anp-lineheight: 1.6; }
.anp-space-open   { --anp-letterspace: 0.08em; --anp-wordspace: 0.16em; --anp-lineheight: 1.7; }
.anp-space-airy   { --anp-letterspace: 0.12em; --anp-wordspace: 0.30em; --anp-lineheight: 1.8; }

/* Two-voice episode panel: parent voice = quiet book text;
   child lines = huge, bold, theirs. Both live on calm paper. */
.anp-voice-parent {
  font-size: var(--anp-fs-base);
  color: var(--anp-ink-soft);
}
.anp-voice-child {
  font-size: var(--anp-fs-child-line);
  font-weight: 700;
  color: var(--anp-ink);
  margin: 0.6em 0;
  padding-left: 0.6em;
  border-left: 6px solid var(--anp-world-accent);
  border-radius: 3px;
}

/* ------------------------------------------------------------
   6. WORLD CHROME  (the vibrant layer)
   ------------------------------------------------------------ */
.anp-chrome {
  background:
    radial-gradient(120% 90% at 85% -10%, var(--anp-world-glow), transparent 60%),
    linear-gradient(160deg, var(--anp-world-base), var(--anp-world-deep));
  color: var(--anp-world-on-base);
  border-radius: var(--anp-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.anp-chrome h1, .anp-chrome h2, .anp-chrome h3 {
  font-family: var(--anp-font-display);
  margin: 0 0 0.35em;
  line-height: 1.15;
}
.anp-chrome .anp-accent-text { color: var(--anp-world-accent); font-weight: 600; }

/* ------------------------------------------------------------
   7. BUTTONS  — every target ≥ 44px
   ------------------------------------------------------------ */
.anp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--anp-tap);
  min-width: var(--anp-tap);
  padding: 0.65em 1.5em;
  font-family: var(--anp-font-ui);
  font-size: var(--anp-fs-base);
  font-weight: 600;
  border: none;
  border-radius: calc(var(--anp-radius-sm) + 4px);
  cursor: pointer;
  text-decoration: none;
  background: var(--anp-violet);
  color: #FFFFFF;
  transition: transform var(--anp-dur) var(--anp-ease), box-shadow var(--anp-dur) var(--anp-ease);
}
.anp-btn:hover { transform: translateY(-2px); box-shadow: var(--anp-shadow-lift); }
.anp-btn:active { transform: translateY(0); }
.anp-btn--world { background: var(--anp-world-accent); color: var(--anp-world-accent-ink); }
.anp-btn--gold  { background: var(--anp-gold); color: var(--anp-gold-ink); }
.anp-btn--ghost {
  background: transparent;
  color: var(--anp-violet);
  box-shadow: inset 0 0 0 2px var(--anp-violet);
}
.anp-chrome .anp-btn--ghost { color: var(--anp-world-on-base); box-shadow: inset 0 0 0 2px var(--anp-world-on-base); }
.anp-btn--success { background: var(--anp-success); color: #FFFFFF; }
.anp-btn--danger  { background: var(--anp-danger);  color: #FFFFFF; }
.anp-btn--big { font-size: var(--anp-fs-lg); padding: 0.8em 2em; }

/* ------------------------------------------------------------
   8. TILES  (home grid, world pickers, solo games)
   ------------------------------------------------------------ */
.anp-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: var(--anp-tap);
  padding: 1.25rem;
  background: #FFFFFF;
  border-radius: var(--anp-radius);
  box-shadow: var(--anp-shadow);
  border-top: 6px solid var(--anp-world-accent);
  color: var(--anp-ink);
  text-decoration: none;
  transition: transform var(--anp-dur) var(--anp-ease), box-shadow var(--anp-dur) var(--anp-ease);
}
.anp-tile:hover { transform: translateY(-3px); box-shadow: var(--anp-shadow-lift); }
.anp-tile h3 { font-family: var(--anp-font-display); margin: 0; font-size: var(--anp-fs-lg); }
.anp-tile p { margin: 0; color: var(--anp-ink-soft); font-size: var(--anp-fs-sm); }
.anp-tile--world {
  background:
    radial-gradient(100% 80% at 90% 0%, var(--anp-world-glow), transparent 55%),
    linear-gradient(155deg, var(--anp-world-base), var(--anp-world-deep));
  color: var(--anp-world-on-base);
  border-top: none;
}
.anp-tile--world p { color: var(--anp-world-accent); }

/* ------------------------------------------------------------
   9. POWER CARDS  (mastered patterns as evolving cards)
   ------------------------------------------------------------ */
.anp-power-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.25rem 1rem 1rem;
  background: #FFFFFF;
  border-radius: var(--anp-radius);
  box-shadow: var(--anp-shadow);
  border: 2px solid transparent;
  text-align: center;
}
.anp-power-card .anp-power-glyph {
  font-family: var(--anp-font-display);
  font-size: var(--anp-fs-2xl);
  font-weight: 700;
  line-height: 1.4;
  min-width: 2.2em;
  padding: 0 0.3em;
  border-radius: var(--anp-radius-sm);
  background: var(--anp-world-base);
  color: var(--anp-world-on-base);
}
.anp-power-card .anp-power-name { font-weight: 700; font-size: var(--anp-fs-base); }
.anp-power-card .anp-power-level { font-size: var(--anp-fs-xs); color: var(--anp-ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }
.anp-power-card--earned { border-color: var(--anp-world-accent); }
.anp-power-card--evolved {
  border-color: var(--anp-world-accent);
  box-shadow: 0 0 0 4px var(--anp-world-glow), var(--anp-shadow);
}
.anp-power-card--locked { opacity: 0.55; filter: grayscale(0.7); }
.anp-power-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

/* ------------------------------------------------------------
   10. ARTIFACT CARDS  (story-meaningful collectibles — never currency)
   ------------------------------------------------------------ */
.anp-artifact-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: #FFFFFF;
  border-radius: var(--anp-radius);
  box-shadow: var(--anp-shadow);
  border-left: 8px solid var(--anp-world-accent);
}
.anp-artifact-card .anp-artifact-art {
  flex: none;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--anp-world-glow), transparent 70%),
    var(--anp-world-base);
  color: var(--anp-world-on-base);
}
.anp-artifact-card h4 { margin: 0 0 0.2em; font-family: var(--anp-font-display); font-size: var(--anp-fs-lg); }
.anp-artifact-card p { margin: 0; color: var(--anp-ink-soft); font-size: var(--anp-fs-sm); }
.anp-artifact-card--unfound { border-left-color: #C9C2B4; }
.anp-artifact-card--unfound .anp-artifact-art { background: #E8E2D4; color: #8B8475; }

/* ------------------------------------------------------------
   11. STREAK FLAME  (streak-with-grace; milestones award artifacts)
   ------------------------------------------------------------ */
.anp-streak-flame {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--anp-tap);
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFF3DC, #FFE3B8);
  color: #6B3A00; /* 7+ on this gradient's lightest stop */
  font-weight: 700;
}
.anp-streak-flame .anp-flame-icon {
  font-size: 1.5rem;
  transform-origin: 50% 85%;
  animation: anp-flicker 1.6s ease-in-out infinite;
}
.anp-streak-flame .anp-streak-count { font-size: var(--anp-fs-lg); }
.anp-streak-flame--grace { background: linear-gradient(135deg, #EAF3FF, #D8E8FF); color: #1D3F73; }
.anp-streak-flame--grace .anp-flame-icon { animation: none; opacity: 0.85; }
@keyframes anp-flicker {
  0%, 100% { transform: scale(1) rotate(-1deg); }
  50%      { transform: scale(1.08) rotate(1.5deg); }
}

/* ------------------------------------------------------------
   12. JOURNEY TRAIL  (season map: episode nodes on a path)
   ------------------------------------------------------------ */
.anp-journey-trail {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1rem 0.5rem;
  overflow-x: auto;
}
.anp-trail-node {
  flex: none;
  width: var(--anp-tap);
  height: var(--anp-tap);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-family: var(--anp-font-display);
  background: #FFFFFF;
  color: var(--anp-ink-soft);
  border: 3px solid #D8D2C4;
}
.anp-trail-link {
  flex: 1 1 2.5rem;
  min-width: 1.5rem;
  height: 6px;
  background: #D8D2C4;
  border-radius: 3px;
}
.anp-trail-node--done {
  background: var(--anp-world-base);
  color: var(--anp-world-on-base);
  border-color: var(--anp-world-base);
}
.anp-trail-link--done { background: var(--anp-world-accent); }
.anp-trail-node--now {
  background: var(--anp-world-accent);
  color: var(--anp-world-accent-ink);
  border-color: var(--anp-world-accent);
  box-shadow: 0 0 0 6px var(--anp-world-glow);
  animation: anp-pulse 2s var(--anp-ease) infinite;
}
.anp-trail-node--finale { border-style: dashed; border-color: var(--anp-world-accent); }
@keyframes anp-pulse {
  0%, 100% { box-shadow: 0 0 0 6px var(--anp-world-glow); }
  50%      { box-shadow: 0 0 0 10px var(--anp-world-glow); }
}

/* ------------------------------------------------------------
   13. CLIFFHANGER CARD  (end-of-episode hook + art reveal)
   ------------------------------------------------------------ */
.anp-cliffhanger-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--anp-radius);
  background:
    radial-gradient(130% 100% at 50% 115%, var(--anp-world-glow), transparent 60%),
    linear-gradient(180deg, var(--anp-world-deep), var(--anp-world-base));
  color: var(--anp-world-on-base);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  box-shadow: var(--anp-shadow-lift);
}
.anp-cliffhanger-card .anp-cliff-kicker {
  font-size: var(--anp-fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--anp-world-accent);
  font-weight: 700;
}
.anp-cliffhanger-card h2 {
  font-family: var(--anp-font-display);
  font-size: var(--anp-fs-2xl);
  margin: 0.3em 0 0.5em;
}
.anp-cliffhanger-card p { color: var(--anp-world-on-base); opacity: 0.92; max-width: 46ch; margin: 0 auto 1.25rem; }

/* ------------------------------------------------------------
   14. CHOICE CARDS  (the child steers the story — big targets)
   ------------------------------------------------------------ */
.anp-choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.anp-choice-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: calc(var(--anp-tap) * 1.6);
  padding: 1.1rem 1.25rem;
  background: #FFFFFF;
  color: var(--anp-ink);
  border: 3px solid var(--anp-world-base);
  border-radius: var(--anp-radius);
  font-family: var(--anp-font-ui);
  font-size: var(--anp-fs-base);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform var(--anp-dur) var(--anp-ease), box-shadow var(--anp-dur) var(--anp-ease), border-color var(--anp-dur) var(--anp-ease);
}
.anp-choice-card:hover { transform: translateY(-3px); border-color: var(--anp-world-accent); box-shadow: var(--anp-shadow-lift); }
.anp-choice-card .anp-choice-letter {
  font-family: var(--anp-font-display);
  font-weight: 700;
  color: #FFFFFF;
  background: var(--anp-world-base);
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.anp-choice-card[aria-pressed="true"] {
  border-color: var(--anp-world-accent);
  box-shadow: 0 0 0 4px var(--anp-world-glow);
}

/* ------------------------------------------------------------
   15. PARENT SURFACES  (warm-expert-clean; first-person expert voice)
   ------------------------------------------------------------ */
.anp-parent-card {
  background: #FFFFFF;
  border-radius: var(--anp-radius);
  box-shadow: var(--anp-shadow);
  padding: 1.5rem 1.75rem;
  color: var(--anp-ink);
  border-top: 5px solid var(--anp-violet);
}
.anp-parent-card h3 { font-family: var(--anp-font-ui); font-weight: 700; margin: 0 0 0.4em; font-size: var(--anp-fs-xl); }
.anp-parent-card p  { color: var(--anp-ink-soft); margin: 0 0 1em; line-height: 1.6; }
.anp-parent-card .anp-next-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--anp-cream);
  border-radius: var(--anp-radius-sm);
  padding: 0.9rem 1.1rem;
  font-weight: 600;
}
.anp-parent-kicker {
  font-size: var(--anp-fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--anp-violet);
  font-weight: 700;
}

/* Semantic notes — color + icon + label, never hue alone */
.anp-note { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.9rem 1.1rem; border-radius: var(--anp-radius-sm); font-size: var(--anp-fs-sm); }
.anp-note strong { display: block; }
.anp-note--success { background: var(--anp-success); color: #FFFFFF; }
.anp-note--danger  { background: var(--anp-danger);  color: #FFFFFF; }
.anp-note--info    { background: var(--anp-info);    color: #FFFFFF; }
.anp-note--warn    { background: var(--anp-warn-bg); color: var(--anp-warn-ink); }

/* ------------------------------------------------------------
   16. MOTION DISCIPLINE
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------
   17. PRINT  (journal pages, artifacts, reports)
   ------------------------------------------------------------ */
@media print {
  .anp-page, .anp-read, .anp-read--cream { background: #FFFFFF !important; color: #000000 !important; }
  .anp-chrome, .anp-tile--world, .anp-cliffhanger-card {
    background: #FFFFFF !important;
    color: #000000 !important;
    box-shadow: none !important;
    border: 2px solid #000000 !important;
  }
  .anp-tile, .anp-power-card, .anp-artifact-card, .anp-parent-card { box-shadow: none !important; border: 1px solid #777777; }
  .anp-btn, .anp-streak-flame .anp-flame-icon { animation: none !important; }
  .anp-btn { box-shadow: none !important; }
}