/* ==========================================================================
   chord.css — the Oh a Chord world: the same charcoal-and-cream palette as
   Oh a Synth (the app's own DesignTokens.Colour is sourced from it), plus
   its own wood cheeks — same recipe as .synth-stage's, since the real app
   has actual walnut cheeks down each edge of the panel, not a decorative
   nod to one. See ../oh-a-chord/CLAUDE.md for the source values.
   ========================================================================== */

body.world-chord {
  --bg: #141416;
  --surface: #232327;       /* app panelSecondary */
  --surface-2: #2b2b30;     /* app panel */
  --rule: #38383e;
  --paper: #ece5d5;         /* app cream */
  --muted: #b9b2a2;         /* app creamDim */
  --accent: #e0a33b;        /* app accentLit (orange) — Chord Type selection */
  --accent-ink: #1a1a1d;

  /* the app's section accents, same swatches as Oh a Synth's world */
  --sec-red: #c8413b;
  --sec-orange: #e0a33b;
  --sec-yellow: #e6d06b;
  --sec-blue: #4f9ed9;
  --sec-green: #9bba5e;

  /* the app's own wood.base (#6B4425), lightened/darkened the same way
     WoodTexture.swift derives its grain and edge tones */
  --walnut-hi: #8a5a37;
  --walnut-lo: #4a2e19;
}

.world-chord .hero h1 {
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.world-chord .hero .kicker::after {
  content: "";
  display: inline-block;
  vertical-align: baseline;
  margin-inline-start: 0.75em;
  width: 26px; height: 12px;
  background: linear-gradient(to right,
    var(--sec-red) 0 5px, transparent 5px 7px,
    var(--sec-orange) 7px 12px, transparent 12px 14px,
    var(--sec-yellow) 14px 19px, transparent 19px 21px,
    var(--sec-blue) 21px 26px);
}

/* ---- the stage: the panel screenshot, framed by wood cheeks --------------- */
.chord-stage .container { position: relative; }
/* The hero is the real App Store screenshot, and the app draws its own walnut
   cheeks inside it — so the stage no longer adds a second pair around the
   outside, which read as a frame inside a frame. Just a quiet mount now. */
.chord-stage .media-slot { margin: 0; }
.chord-stage .frame {
  background: #232327;
  border-color: #1a1a1d;
  border-radius: 8px;
}

/* ---- features: each section wears its app accent -------------------------- */
.world-chord .feature h3 { letter-spacing: 0.22em; }
.world-chord .feature:nth-of-type(1) h3 { border-color: var(--sec-orange); } /* Chord Type + Modifiers */
.world-chord .feature:nth-of-type(2) h3 { border-color: var(--sec-blue); }   /* Key Mode */
.world-chord .feature:nth-of-type(3) h3 { border-color: var(--sec-red); }    /* Strum, Harp, Arp */
.world-chord .feature:nth-of-type(4) h3 { border-color: var(--sec-green); }  /* Synth underneath */
.world-chord .feature:nth-of-type(5) h3 { border-color: var(--sec-yellow); } /* Save presets */

.world-chord .feature .media-slot .frame {
  background: var(--surface);
  border-color: #1a1a1d;
}

.world-chord .spec-table th[scope="row"] { color: var(--muted); }
.world-chord .spec-table tr { border-color: #38383e; }
.world-chord .spec-table td { max-width: 60ch; }

/* ---- privacy page: quieter, no stage, no feature grid ---------------------- */
.world-chord-privacy .hero { padding-block: clamp(3rem, 10vh, 7rem) var(--space-4); }
.world-chord-privacy .hero h1 { font-style: normal; max-width: 20ch; }
.world-chord-privacy .kicker a { color: var(--muted); text-decoration: none; }
.world-chord-privacy .kicker a:hover { color: var(--accent); }
.privacy-body h2 {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--rule);
}
.privacy-body h2:first-child { margin-block-start: 0; padding-block-start: 0; border: 0; }
.privacy-body p { color: var(--muted); }

.privacy-note { color: var(--muted); font-size: var(--step--1); margin-block-start: var(--space-2); }
.privacy-note a { color: var(--paper); }
.privacy-note a:hover { color: var(--accent); }