/* Canticle app shell (M2 skeleton) — design system inherited from the engine (UX-SPEC §0). Self-hosted fonts (SIL OFL), candle-lit palette, ≥44px targets, reduced-motion path. */ /* THE TYPE SPINE (DESIGN-ELEVATION C1, 2026-07-07) — the two faces the design docs unanimously endorsed: Fraunces (variable, optical-size serif — the candle-lit display voice) + Atkinson Hyperlegible Next (variable — the Braille Institute's low-vision body face: disambiguated I/l/1, 0/O, rn/m, large x-height). Self-hosted (INV-03), OFL notices ship beside the files; latin + latin-ext subsets (the German door). */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Fraunces-VF-roman-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Fraunces-VF-roman-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/Fraunces-VF-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/Fraunces-VF-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/AtkinsonHyperlegibleNext-VF-roman-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/AtkinsonHyperlegibleNext-VF-roman-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('fonts/AtkinsonHyperlegibleNext-VF-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('fonts/AtkinsonHyperlegibleNext-VF-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================================ THEME SYSTEM (AURORA-THEMES drive). One token contract, three singer-selectable looks: aurora (default) · candle (the calm dark base) · paper (warm-paper day). A theme = a [data-theme] attribute on swapping ONE token block — every shell component already reads var(--…), so all screens theme cohesively for free. The accents (gold/teal/green/blue, INV-08) live in the theme-INVARIANT spine, so a theme can never recolour target/home/voice away. The engine iframe is sealed: the sing-screen INTERIOR keeps the locked candle-lit note look in every theme (by design — calm holds where you sing). high-contrast (body.high-contrast) stays an orthogonal a11y override that wins over any theme. See SETTINGS-ARCHITECTURE.md. ============================================================================ */ :root { /* ── SPINE — theme-invariant ── */ /* INV-08 semantic accents (gold = target, teal = home/tonic, green = success, blue = voice). Never red. */ --gold:#b07d2a; --gold-bright:#d9a44a; --teal:#2f827a; --teal-bright:#62bc9f; --green:#3f9d5a; --green-bright:#52b06f; --blue:#1f6ad6; /* VISUAL-2: green finally gets the bright dark-theme twin gold+teal always had — small green TEXT (.prec-praise, .dv-spark-n, .traj-fact b, .sv-ic) measured 3.3-3.9:1 via --ink-green=--green; the twin clears AA on bg/panel/panel-2 (7.05/5.82/5.23). Fills/large text keep --green (hue unchanged). */ --teal-rgb:47,130,122; --green-rgb:63,157,90; /* teal warmed 2026-07-06 (Nick device note: teal read too contrasty on the warm ground) — rgb tracks --teal; the 6x teal + 7x green alpha-washes follow the tokens */ /* AA-safe ink twins for accent TEXT on light grounds (the two-token rule) */ --gold-ink:#8a5e14; --green-ink:#2a6e3c; --teal-ink:#2f6d61; /* VISUAL-2: green-ink 2f7a43->2a6e3c — 4.17:1 on the report vellum, now 4.9+ on every paper ground; teal-ink warmed 1a6675->2f6d61 (5.1:1 on cream) 2026-07-06 */ /* text-accent tokens — resolve to BRIGHT on dark themes, to the dark inks on paper (set per theme) */ --ink-gold:var(--gold-bright); --ink-green:var(--green-bright); --ink-teal:var(--teal); --ink-blue:var(--blue); --serif:'Fraunces','Hoefler Text',Baskerville,'Palatino Linotype',Palatino,Georgia,'Times New Roman',serif; --sans:'Atkinson Hyperlegible Next','Avenir Next',Avenir,'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif; /* ── THE TYPE SCALE (DESIGN-ELEVATION C4) — one named ramp, 26 ad-hoc px retired into 9 steps. BLV-first: the sub-legible tier (9.5–11.5px) is gone; captions rise to 14; body reads at 18 (the documented floor), verses at --fs-lead. Weight-led hierarchy carries the rest. ── */ --fs-micro:12.5px; /* chips, badges, kbd — the hard floor (was 9.5–12) */ --fs-caption:14px; /* metadata, captions, footnotes (was 12.5–13.5) */ --fs-small:15.5px; /* secondary UI: buttons, links, meta rows (was 14–15.5) */ --fs-body:18px; /* reading text — the low-vision floor (was 16–17) */ --fs-lead:19px; /* verses + card titles (was 18–19) */ --fs-h3:21px; /* section heads (was 20–21) */ --fs-h2:24px; /* view heads (was 22–24) */ --fs-h1:28px; /* page heads (was 26–28) */ --fs-display:34px; /* the wordmark tier */ --lh-tight:1.15; --lh-base:1.5; --lh-loose:1.65; --atmos:1; /* Aurora atmosphere multiplier (Calm 0 · Soft .6 · Vivid 1); DEFAULT = Vivid (Nick's call); inert in other themes */ /* ── DEFAULT GROUND = AURORA (so the app is fully themed even before/without JS) ── */ --bg:#13100b; --panel:#2a2218; --panel-2:#332a1d; --cream:#f4ead4; --muted:#ac9a78; --line:#3a2f22; --edge-light:rgba(244,234,212,.07); /* elevation fallback = the aurora recipe (the per-theme blocks below override) */ --elev-1: inset 0 1px 0 var(--edge-light), 0 2px 6px rgba(0,0,0,.32), 0 10px 28px rgba(0,0,0,.22); --elev-2: inset 0 1px 0 var(--edge-light), 0 4px 10px rgba(0,0,0,.38), 0 16px 40px rgba(0,0,0,.28); --elev-3: 0 12px 48px rgba(0,0,0,.55); --elev-sheet: 0 -8px 40px rgba(0,0,0,.5); } /* ── SHELL-POLISH — SHAPE-LANGUAGE SCALE ── Name every corner radius so the front door reads from ONE source, the same value-keyed way the engine does (--r-N = N px; --r-pill/--r-circle the two round ends). Each token = today's EXACT value — this is a VALUE-PRESERVING fold (nothing shifts; the render is byte- identical), the same display-only token discipline as the engine's radius scale + the polish-2 --edge-sheen fold. --gold-bright-rgb names the gold-bright channel triple so the alpha washes that already equal --gold-bright (#d9a44a) stop being a floating magic number. */ :root { --r-2:2px; --r-3:3px; --r-6:6px; --r-8:8px; --r-10:10px; --r-11:11px; --r-12:12px; --r-13:13px; --r-14:14px; --r-16:16px; --r-18:18px; --r-40:40px; --r-pill:999px; --r-circle:50%; --ink-on-gold:#1b140a; /* C9-a: the highest-frequency un-tokened color, written two ways (1b140a/1a1305) — ONE ink for text on gold fills */ --gold-bright-rgb:217,164,74; --gold-rgb:176,125,42; /* VISUAL-AURORA-1: --r-13 + the base-gold channel twin join the scale (same value-preserving principle) */ } /* ── THEME TOKEN BLOCKS — the ONLY thing a theme swaps ── */ /* ELEVATION (DESIGN-ELEVATION C2): one light source, three steps, tuned PER THEME so every theme gets appropriate depth — aurora = lit top-edge + deep warm ambient; candle = the same physics, dimmer; paper = a soft sepia letterpress cast + the hairline (NEVER a bright top-highlight on a light ground). Decorative and behind content: no contrast or colour-semantics impact (INV-08). */ html[data-theme="aurora"] { /* C — living light, the default dark */ --bg:#13100b; --panel:#2a2218; --panel-2:#332a1d; --cream:#f4ead4; --muted:#ac9a78; --line:#3a2f22; --edge-light:rgba(244,234,212,.07); --elev-1: inset 0 1px 0 var(--edge-light), 0 2px 6px rgba(0,0,0,.32), 0 10px 28px rgba(0,0,0,.22); --elev-2: inset 0 1px 0 var(--edge-light), 0 4px 10px rgba(0,0,0,.38), 0 16px 40px rgba(0,0,0,.28); --elev-3: 0 12px 48px rgba(0,0,0,.55); --elev-sheet: 0 -8px 40px rgba(0,0,0,.5); } html[data-theme="candle"] { /* A — Illuminated Quires: the current candle-lit dark look */ --bg:#15110c; --panel:#2a2218; --panel-2:#332a1d; --cream:#f3e9d6; --muted:#a5947a; --line:#3a2f22; /* VISUAL-2: muted 9c8a6e->a5947a — was 4.21:1 on panel-2 (.set-theme-desc), now 4.78 */ --edge-light:transparent; --elev-1: 0 2px 6px rgba(0,0,0,.28), 0 10px 28px rgba(0,0,0,.18); --elev-2: 0 4px 10px rgba(0,0,0,.34), 0 16px 40px rgba(0,0,0,.24); --elev-3: 0 12px 48px rgba(0,0,0,.55); --elev-sheet: 0 -8px 40px rgba(0,0,0,.5); } html[data-theme="paper"] { /* B — Hymnal Leaf: warm-paper day. --cream holds the dark text ink here. */ --bg:#f4ecd8; --panel:#fbf6e9; --panel-2:#efe6cf; --cream:#2a2218; --muted:#6b5e47; --line:#ddd0ad; --edge-light:transparent; --ink-gold:var(--gold-ink); --ink-green:var(--green-ink); --ink-teal:var(--teal-ink); --green-rgb:47,122,67; --elev-1: 0 1px 2px rgba(74,58,32,.10), 0 6px 18px rgba(74,58,32,.08); --elev-2: 0 2px 4px rgba(74,58,32,.14), 0 12px 30px rgba(74,58,32,.12); --elev-3: 0 12px 40px rgba(74,58,32,.28); --elev-sheet: 0 -8px 32px rgba(74,58,32,.22); } * { box-sizing: border-box; } html, body { margin: 0; } /* a11y: skip link (keyboard) + high-contrast palette variant (UX-SPEC §7.2, D4) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold-bright); color: var(--ink-on-gold); font-weight: 600; padding: 10px 16px; border-radius: 0 0 var(--r-10) 0; } .skip-link:focus { left: 0; } body.high-contrast { --bg: #0a0805; --panel: #241d14; --panel-2: #2f2517; --cream: #fdf8ee; --muted: #d2c099; --gold: #e0ad52; --gold-bright: #f3c873; --line: #6a583c; /* VISUAL-2: HC forces a near-black ground but never overrode the INK trio — a paper-theme user tapping High contrast (the exact low-vision overlap persona) got paper's DARK inks on black (2.47-3.52:1 measured). The inks now follow the forced ground. */ --ink-gold: var(--gold-bright); --ink-teal: var(--teal-bright); --ink-green: var(--green-bright); /* C2: high-contrast wins over theme — depth is decorative; HC gets clean strong edges, no casts */ --elev-1: none; --elev-2: none; } body { background: var(--bg); color: var(--cream); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.5; -webkit-text-size-adjust: 100%; min-height: 100dvh; } .view { min-height: 100dvh; } .view[hidden] { display: none; } /* A862 SAFE-AREA (non-trainer pages): clear the device status bar / notch in PORTRAIT so the top content (e.g. the song page's "‹ Library" button) is never under the phone chrome. env(safe-area-inset-top) is 0 on desktop AND in landscape (status bar hidden), so this is a no-op there — landscape song-details + the trainer are unchanged. */ .wrap { max-width: 760px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 48px; } /* buttons / links / a11y baseline — NEVER a white underline anywhere (FIX A) */ button { font-family: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } /* SHELL-POLISH: a 3px gold focus ring to match the engine's (stronger, more visible — better a11y, one hand). */ :focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; border-radius: var(--r-6); } .link { background: none; border: none; color: var(--ink-gold); font-size: var(--fs-small); text-decoration: none; padding: 8px; min-height: 44px; } .link:hover { color: var(--cream); } /* ════════════════════════════════════════════════════════════════════════════ SHELL-POLISH — ICON HAND. One line-icon vocabulary lifted from the engine (A984/A985) so the front door and the trainer read from the SAME hand: 24-grid, 2px round stroke, currentColor (themes correctly + never red, INV-08). Display- only; em-sized so each icon scales with its label. .bic = inline-before-a-label (carries its own gap); .nic = margin-free (spacing from the parent's flex gap); .nicf = the few genuinely-filled marks. Mirrors the engine's .bic/.nic/.nicf. */ .bic, .nic, .nicf { flex: 0 0 auto; overflow: visible; } .bic { width: 1.06em; height: 1.06em; vertical-align: -.17em; margin-right: .44em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bic.warn { stroke: var(--gold-bright); } .nic { width: 1.2em; height: 1.2em; vertical-align: -.2em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .nicf { width: 1.06em; height: 1.06em; vertical-align: -.17em; fill: currentColor; stroke: none; } /* the feeling-pulse faces (Nick's pick: line-SVG, one hand across the whole shell) — same 24-grid/2px-round/ currentColor convention; the smile/flat/frown carry the meaning, the aria-label carries it to a screen reader. */ .face { width: 1.12em; height: 1.12em; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* C7 iconography unification (ORDER 5): line-SVG twins that replaced the former text-glyph/emoji icons. All decorative + aria-hidden beside real text labels; currentColor only (INV-08 — theme + high-contrast safe). */ .back { display: inline-flex; align-items: center; } /* seat the chevron-left beside the label */ .wpath-ic svg { display: block; width: 1.2em; height: 1.2em; } /* welcome-hero marks (mic / book / flame) */ .sg-caret svg { width: .9em; height: .9em; vertical-align: middle; } /* the profile dropdown caret, caret-sized */ /* icon-only buttons — center the mark, size it off the button box (not its font-size). */ .set-mv, .set-rm, .set-bar-exit, .sheet-x { display: inline-flex; align-items: center; justify-content: center; } .set-mv svg, .set-rm svg, .set-bar-exit svg, .sheet-x svg { width: 20px; height: 20px; } /* Phase 2 durability (RL-141): calm Export/Restore + A2HS nudge — no red, ≥44px targets, token colors. */ .backup-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 2px; } .link-btn { background: none; border: none; color: var(--muted); font: inherit; font-size: var(--fs-caption); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px 4px; min-height: 44px; } .link-btn:hover { color: var(--ink-gold); } .a2hs-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 10px; padding: 10px 14px; border-radius: var(--r-12); background: var(--panel); border: 1px solid var(--line, #6a583c); color: var(--cream); font-size: var(--fs-small); } .a2hs-nudge button { background: var(--gold-bright); color: var(--ink-on-gold); border: none; border-radius: var(--r-8); padding: 8px 14px; font-weight: 600; min-height: 44px; cursor: pointer; } /* RL-142/144/145: the "Start here" on-ramp + More disclosure — calm, text-first, no red, ≥44px targets. */ .rail-rec { font-size: var(--fs-caption); font-weight: 400; color: var(--ink-gold); letter-spacing: .02em; } /* Two-column on-ramp (RL-145): a CSS GRID that fills left→right top→down (grid-auto-flow: row), so DOM order = reading order = focus order (WCAG 1.3.2) and the easiest∩most-loved stays first DOM node AND top-left. auto-fit + minmax gives TWO columns where there's room and ONE on narrow phones / large text / high zoom (WCAG 1.4.10 reflow) — automatically, no media query, no order:/flex/multi-column reordering. max-width caps it at 2 columns (3 × 14rem > the cap); 14rem keeps long titles ("Great Is Thy Faithfulness") from cramping. */ .onramp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); grid-auto-flow: row; gap: 8px 14px; max-width: 40rem; } .onramp-item { margin: 0; } .onramp-link { display: block; padding: 12px 14px; min-height: 44px; border-radius: var(--r-12); background: var(--panel); border: 1px solid var(--line, #6a583c); color: var(--cream); text-decoration: none; } .onramp-link:hover { border-color: var(--gold-bright); } .onramp-title { display: block; font-family: var(--serif, Georgia, serif); font-size: var(--fs-body); font-weight: 600; } .onramp-first { display: block; font-size: var(--fs-caption); color: var(--muted); margin-top: 1px; } .onramp-diff { display: block; font-size: var(--fs-micro); color: var(--muted); margin-top: 4px; } .onramp-tier { color: var(--ink-gold); font-weight: 600; } .more-btn { background: none; border: none; color: var(--ink-gold); font: inherit; font-size: var(--fs-lead); font-weight: 600; cursor: pointer; padding: 6px 0; min-height: 44px; } .more-btn:hover { color: var(--cream); } .rail-sub { font-size: var(--fs-small); color: var(--muted); margin: 6px 0 8px; font-weight: 600; } [hidden] { display: none !important; } /* RL-97: hidden content is removed from layout AND the tab order */ .back { background: transparent; border: 1px solid var(--line); color: var(--cream); font-size: var(--fs-small); padding: 0 14px; min-height: 44px; border-radius: var(--r-10); margin-bottom: 14px; } .back:hover { color: var(--ink-gold); border-color: var(--gold); } /* ===== HOME / SEARCH ===== */ .home-head { max-width: 700px; margin: 0 auto; padding: calc(26px + env(safe-area-inset-top, 0px)) 18px 8px; } .wordmark { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 9vw, 52px); letter-spacing: .01em; margin: 0; line-height: 1; color: var(--cream); } .tagline { font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); color: var(--muted); margin: 6px 0 18px; } /* A862: the sticky search must also stick BELOW the status bar in portrait (env=0 in landscape/desktop → unchanged). */ .search-row { position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 5; } .search { width: 100%; font-family: var(--sans); font-size: var(--fs-body); color: var(--cream); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-12); padding: 0 16px; min-height: 48px; -webkit-appearance: none; } .search::placeholder { color: var(--muted); } .search:focus { border-color: var(--gold); } .count { color: var(--muted); font-size: var(--fs-caption); margin: 10px 2px 4px; } .cards { max-width: 700px; margin: 0 auto; padding: 4px 18px 40px; display: grid; gap: 12px; } @media (min-width: 560px) { .cards { grid-template-columns: 1fr 1fr; } } /* two columns; each box only as wide as the difficulty row needs */ .card { display: block; width: 100%; min-width: 0; text-align: left; min-height: 44px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-14); padding: 14px 16px; color: var(--cream); transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); } .card:hover { border-color: var(--gold); background: var(--panel-2); } .card .title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3); line-height: 1.15; } .card .firstline { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: var(--fs-small); margin-top: 2px; padding-left: 1.6em; text-indent: -0.4em; text-wrap: pretty; } /* clean opening line; wraps within the box, never forces width */ .card .meta { display: flex; align-items: center; gap: 8px 10px; margin-top: 9px; flex-wrap: wrap; } .card .meta .diff { flex-basis: 100%; } /* difficulty on its own row; key/range/tune chips stack underneath */ /* VISUAL-2: the earlier duplicate .noresults def removed — the fuller rule below always won the cascade */ /* difficulty marker (FIX B) — LABELED "Difficulty" + a worded tier + a segmented meter + N/5. Deliberately NOT stars (stars read as a quality rating). Gold/neutral only — never red (INV-08). The tier word + N/5 carry the meaning so it's never color-only. */ .diff { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--cream); } .diff-lab { color: var(--muted); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; } .diff-tier { font-weight: 500; } .diff-meter { display: inline-flex; gap: 3px; } .diff-seg { width: 13px; height: 6px; border-radius: var(--r-2); background: var(--line); } .diff-seg.on { background: var(--gold); } .diff-n { color: var(--muted); font-size: var(--fs-micro); } /* chips (color is never the only signal — chips carry text) */ .chip { font-size: var(--fs-micro); color: var(--cream); background: rgba(var(--teal-rgb),.16); border: 1px solid rgba(var(--teal-rgb),.5); border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; } .chip.key { background: rgba(var(--gold-rgb),.14); border-color: rgba(var(--gold-rgb),.5); } /* ===== SONG PAGE ===== */ .song-title { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 8vw, 40px); line-height: 1.1; margin: 4px 0 0; } .song-first { font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); color: var(--muted); margin: 6px 0 14px; } .song-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 6px; } .song-byline { color: var(--muted); font-size: var(--fs-small); margin: 10px 0 18px; } .song-byline .bl-row { display: block; } /* each part (Words / Music / Tune) its own short line */ .song-byline .bl-lab { color: var(--muted); } /* label visually quiet */ .song-byline .bl-val { color: var(--cream); } /* value regular — hierarchy carried by colour, not weight */ .sing { display: block; width: 100%; min-height: 54px; margin: 4px 0 24px; background: var(--gold); color: var(--ink-on-gold); font-family: var(--sans); font-weight: 600; font-size: var(--fs-h3); letter-spacing: .04em; border: none; border-radius: var(--r-14); transition: background var(--dur-2) var(--ease-out); } .sing:hover { background: var(--gold-bright); } .verses h2 { font-family: var(--sans); font-size: var(--fs-caption); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; } /* POLISH M1 — responsive lyric lines that fit the viewport in both orientations, with clean (hanging-indent) wrapping so a long line never merges into a wall of prose. clamp() = the shell's responsive idiom (cf .wordmark): smaller on a narrow phone, capped at the original 19px, floor 16px (never tiny). */ .verse { font-family: var(--serif); font-size: clamp(16px, 4.3vw, 19px); line-height: 1.5; color: var(--cream); margin: 0 0 18px; display: flex; gap: 8px; align-items: baseline; } .verse .vn { color: var(--ink-gold); font-weight: 600; flex: none; } .verse .vlines { flex: 1; min-width: 0; } .verse .vl { display: block; padding-left: 1.15em; text-indent: -1.15em; } /* hanging indent: a wrapped phrase reads as one indented continuation, not a new line */ .verse .vl + .vl { margin-top: 3px; } /* faint separation so each hymn line is distinct */ /* ===== TRAINER ===== */ .trainer { display: flex; flex-direction: column; height: 100dvh; } .trainer-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); } .trainer-bar .back { margin: 0; } .trainer-title { font-family: var(--serif); font-size: var(--fs-lead); color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trainer-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--bg); } /* C8a THE THRESHOLD (DESIGN-ELEVATION): a brief warm veil over the sing screen while the engine paints — the flash-cut becomes an arrival. Shell layer only (wraps the iframe; the sealed staff untouched). pointer-events:none so it can never gate a tap (P-ii); lifts on the frame's load + a hard 800ms ceiling so it can never wedge; reduced-motion never shows it at all. */ .trainer { position: relative; } .trainer-veil { position: absolute; inset: 0; z-index: 4; background: var(--bg); opacity: 1; pointer-events: none; transition: opacity .22s var(--ease-out); } .trainer-veil.lift { opacity: 0; } @media (prefers-reduced-motion: reduce) { .trainer-veil { display: none; } } html.rm .trainer-veil { display: none; } /* §4.2 landscape immersive lives INSIDE the engine (header→thin strip, roll fills, controls→one pausing drawer, Play/Mic pinned). Collapse the shell's own bar so the engine gets the full screen; the engine's own back/library control + browser-back return to the shell. */ @media (orientation: landscape) and (max-height: 600px) { .trainer-bar { display: none; } } /* ===== HOME TOOLBAR (Filters + Sort) ===== */ .toolbar { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .tool { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-10); color: var(--cream); font-size: var(--fs-small); font-family: var(--sans); } .tool:hover { border-color: var(--gold); } .tool .tool-ic { color: var(--ink-gold); font-size: var(--fs-body); } .tool.sort { gap: 8px; color: var(--muted); } .tool.sort select { background: transparent; color: var(--cream); border: none; font-family: var(--sans); font-size: var(--fs-small); min-height: 44px; } /* Theme the native dropdown popup where the browser honours it (Chrome/Firefox/Android) so the option list matches paper/candle/aurora instead of the OS default; the closed select stays transparent. Ignored on iOS wheel pickers. */ .tool.sort select option { background: var(--panel); color: var(--cream); } .badge { background: var(--gold); color: var(--ink-on-gold); font-size: var(--fs-micro); font-weight: 600; border-radius: var(--r-pill); padding: 1px 7px; } /* ===== RAILS + COLLECTIONS ===== */ .rail { max-width: 760px; margin: 22px auto 0; padding: 0 18px; } .rail-h { font-family: var(--serif); font-weight: 600; font-size: var(--fs-h2); color: var(--cream); margin: 0 0 10px; } .rail-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } /* Top hymns: a responsive WRAPPING grid — everything visible at a glance, never a horizontal scrollbar */ .rail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 2px 0 12px; } .rail-grid .rcard { width: auto; } .rail-scroll::-webkit-scrollbar { height: 6px; } .rail-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); } .rcard { display: block; /* load-bearing since the quick-add wrap: an inline paints its card background as broken line-boxes */ flex: 0 0 auto; width: 210px; scroll-snap-align: start; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-14); padding: 13px 15px; color: var(--cream); transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); } .rcard:hover { border-color: var(--gold); background: var(--panel-2); } .rcard-title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-lead); line-height: 1.15; } .rcard-first { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: var(--fs-caption); margin-top: 3px; } .rcard-meta { color: var(--muted); font-size: var(--fs-micro); margin-top: 8px; } .rail-empty { color: var(--muted); font-size: var(--fs-small); } .collections { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (min-width: 560px) { .collections { grid-template-columns: 1fr 1fr 1fr; } } .ccard { display: flex; flex-direction: column; justify-content: center; min-height: 76px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-14); padding: 13px 15px; color: var(--cream); transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); } .ccard:hover { border-color: var(--gold); background: var(--panel-2); } .ccard-label { font-family: var(--serif); font-weight: 600; font-size: var(--fs-lead); } .ccard-n { color: var(--muted); font-size: var(--fs-micro); margin-top: 3px; } /* RL-154 By-season / By-theme browse rails — a real