/* School C «Жива співрозмовниця» — tokens. One family (Commissioner), two voices via the FLAR axis. */
/* Fonts load from base.html / pay.html (<link rel=preconnect> + stylesheet), with no CSS import: no serial CSS round-trip. */
/* Noto Sans Symbols: chart glyphs only (U+2609, U+263D-2653), always followed by U+FE0E; the wheel and the sign line in the free chart's head (№318 row 36). */

:root {
  /* type */
  --font: 'Commissioner', system-ui, -apple-system, sans-serif;
  --flar-ui: "FLAR" 0;        /* interface: labels, titles, chips */
  --flar-voice: "FLAR" 100;   /* Natalka speaking: flared, human */

  --t-display: 700 20px/26px var(--font);   /* card / section headings */
  --t-title:   700 20px/26px var(--font);   /* card title */
  --t-reply:   600 17px/24px var(--font);   /* the reader's answer bubble */
  --t-voice:   600 19px/26px var(--font);   /* Natalka's lines (with --flar-voice); D1 asked 21/28, but a 3-line field at 375px needs <=19 (gate №143) */
  --t-voice-strong: 700 19px/26px var(--font);
  --t-voice-field: 500 17px/24px var(--font);   /* the yellow reading field (.field) keeps its production size: its 106-char limit is measured on it (gate №143) */
  --t-body:    400 17px/26px var(--font);   /* row text, chart text */
  --t-label:   600 15px/20px var(--font);   /* row labels */
  --t-chip:    600 17px/24px var(--font);
  --t-meta:    500 13px/18px var(--font);   /* progress, speaker name, «Перше, що я бачу:» */
  --t-sub:     500 14px/20px var(--font);   /* «Сонце в Леві» */
  --ls-display: -0.025em;
  --t-screen:  700 34px/38px var(--font);   /* product screen title (X1-X3); 700 is the heaviest loaded Commissioner weight */
  --t-section: 600 13px/18px var(--font);   /* section header above a card, muted */
  --t-read:    400 18px/29px var(--font);   /* reading prose — CHAIR 2026-09-26 §1, FLAR 0 */
  --t-h2:      700 20px/26px var(--font);   /* part subhead — CHAIR §1, FLAR 0 */
  --t-caption: 500 13px/18px var(--font);   /* quiet grey line under a block */
  --t-tab:     600 12px/14px var(--font);   /* tab label, small name under a disc */
  --t-note:    400 15px/22px var(--font);   /* the opened «why» explanation */
  --t-row:     600 17px/24px var(--font);   /* ONE list-row primary line (B2) */
  --t-row-sub: 500 14px/20px var(--font);   /* ONE list-row secondary line */
  --font-glyph: 'Noto Sans Symbols', sans-serif;

  /* spacing / shape */
  --pad-x: 16px;
  --gap-xs: 4px; --gap-s: 8px; --gap-m: 12px; --gap-l: 16px; --gap-xl: 24px;
  --gap-2xl: 32px; --gap-3xl: 56px;         /* between parts / before the steps (CHAIR §1) */
  --step-disc: 24px;                        /* numbered disc of a step card */
  --icon-s: 14px;                           /* line icons, stroke 1.75 */
  --r-card: 24px;
  --r-field: 28px;                          /* Natalka's yellow field (voice) */
  --r-voice: 8px 28px 28px 28px;   /* tail corner = top-left, points at the speaker row */
  --r-reply: 22px 22px 6px 22px;   /* user's answer, right-aligned */
  --r-chip: 26px;
  --tap-min: 44px;                          /* smallest touch target (chips, links, rows) */
  --row-h: 60px;                            /* ONE list-row height: contents, lists, option rows, suggestions */
  --opt-ring: 22px;                         /* the option row's selection ring */
  --opt-tick-w: 5px; --opt-tick-h: 9px; --opt-tick-x: 7px;   /* the tick inside a selected ring */
  --pill-h: 60px; --pill-r: 30px; --pill-pad: 6px;   /* the floating tab pill */
  --gap-section: 32px; --gap-part: 40px;    /* between sections of a screen / before a chapter part */
  --gap-label-body: 8px;                    /* label -> body inside a card */
  --gap-hair: 6px;                          /* a caption right under its line */
  --bw-state: 1.5px;                        /* borders that carry state: selected segment, option ring, invalid input */
  --btn-h-s: 32px;                          /* the small in-card button (the pay stage's drawn «open» button) */
  --btn-h: 52px;                            /* the primary button / input height, the twin of the native MainButton */
  --tap-pad: calc((var(--tap-min) - 20px) / 2);        /* vertical padding that lifts a 20px-line link to --tap-min */
  --tap-pad-meta: calc((var(--tap-min) - 16px) / 2);   /* the same for a 16px-line link */
  --avatar: 36px;   /* her face (canon №326) — 28px lost the chart halo */
  --avatar-l: 56px; --avatar-m: 44px; --avatar-s: 40px;   /* person discs: pair head, sky, list rows */
  --wheel-max: 334px;                       /* the chart wheel; smaller on narrow phones (reveal.css) */
  --wheel-pay: 240px;                       /* the pay landing's hero wheel (200px on phones <= 380px, below) */
  --t-price:   600 28px/32px var(--font);   /* the pay landing's amount in the sticky bar: stronger than --t-title, calmer than --t-screen */
  --col-max: 480px;                         /* the pay pages' one column on a wide screen */
  --spin-size: 20px; --bw-spin: 2px; --spin-ms: 800ms;   /* the pressed pay button's spinner */
  --r-media: 12px;                          /* pictures */
  --r-hair: 2px; --r-small: 4px; --r-tag: 8px;   /* hairline bars and dashes, small marks and bars, the small pill tag */
  --r-bubble: 18px 18px 18px 6px;           /* the drawn Telegram message on the gift pay page: tail corner bottom-left */
  --shadow-float: 0 6px 20px rgba(20, 19, 23, 0.10);   /* the floating tab pill */
  --shadow-raise: 0 1px 4px rgba(20, 19, 23, 0.16);    /* the selected segment of a segmented control */
  --seg-track: #DEDCD6;     /* segmented control: the track ... */
  --seg-on: #FFFFFF;        /* ... and the raised selected segment (its ink border carries the >= 3:1 state) */

  /* palette — light */
  --bg: #F5F4F1;            /* app bg = setBackgroundColor */
  --header: #F5F4F1;        /* setHeaderColor */
  --surface: #FFFFFF;
  --line: #ECEAE4;
  --placeholder: #767580;   /* a field's hint words: >= 4.5:1 on --surface (WCAG 1.4.3), lighter than typed --text */
  --line-strong: #85848F;   /* borders that carry state (chip, input, inactive progress): >= 3:1 on --bg */
  --frame: var(--line);     /* the 1px frame of a picture on a card (the share pictures); --line-strong in the dark theme, where --line is ~1.2:1 */
  --text: #141317;
  --muted: #6B6A72;
  --voice: #FFDD4A;         /* sunflower field: the ONE thing Natalka is saying now */
  --voice-ink: #141317;
  --accent: #141317;        /* ink: links, selected chip, progress fill */
  --accent-ink: #FFFFFF;
  --marker: #FFDD4A;        /* highlighter behind opened row labels */
  --progress-off: #DEDCD6;
  --main-btn: #141317;      /* MainButton.setParams color */
  --main-btn-text: #FFDD4A; /* MainButton.setParams text_color */
  --sec-btn: #FFFFFF;       /* SecondaryButton color */
  --sec-btn-text: #141317;
  --blur: 6px;
  --blur-opacity: 0.5;
  --nm-tile: #141317;       /* monogram tile */
  --nm-ink: #FFDD4A;        /* monogram letters */
  --loader-bg: #FFDD4A;
  --loader-text: #141317;
  /* charts */
  --chart-ink: #141317;     /* outer ring, angles, planet outlines + glyphs */
  --chart-line: #85848F;    /* sign dividers, house cusps: >= 3:1 on --bg and --surface (wheel-check 2026-10-11, was #DAD8D2 at 1.4:1) */
  --chart-mute: #6B6A72;    /* sign glyphs, house numbers: >= 4.5:1 (was #8A8994 at 3.4:1) */
  --chart-mark: #FFDD4A;    /* the ONE linked highlight */

  /* the ink card of the pay pages (cover, chat stage, band): a dark card on the light page, and the drawn Telegram bubble on it */
  --ink-card: #141317;
  --ink-card-text: #F4F3F0;
  --ink-card-mute: #9D9CA6;
  --ink-card-line: #6A6975;
  --ink-card-rule: rgba(244, 243, 240, .14);
  --ink-card-soft: rgba(255, 255, 255, .14);
  --bubble: #FFFFFF;
  --bubble-ink: #141317;

  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-voice: cubic-bezier(.22, 1, .36, 1);   /* D1: voice enter, tab capsule, screen push */
  --enter-ms: 320ms;        /* the voice field enters */
  --stagger-ms: 60ms;       /* voice lines settle one by one */
  --tab-ms: 260ms;          /* the tab capsule slides */
  --push-in-ms: 280ms; --push-out-ms: 200ms;   /* screen push */
  --push-x: 24px;
  --unblur-ms: 420ms;
  --marker-ms: 360ms;
  --marker-delay: 200ms;
  --state-ms: 240ms;        /* a progress segment lights, a segmented selection changes */
  --press-ms: 120ms; --press-scale: .97;   /* button / chip press */
  --nav-clear-ms: 340ms;    /* after a push or back enters (280ms / 200ms) #screen drops its motion attribute */
}

[data-theme="dark"] {
  --shadow-float: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-raise: 0 1px 4px rgba(0, 0, 0, 0.5);
  --seg-track: #26262B;
  --seg-on: #3C3C44;        /* lighter than the track: raised, not pressed in */
  --bg: #101012;
  --header: #101012;
  --surface: #1C1C20;
  --line: #29292E;
  --line-strong: #6A6975;
  --placeholder: #85848F;
  --frame: var(--line-strong);
  --text: #F4F3F0;
  --muted: #9D9CA6;
  --voice: #F7D743;
  --voice-ink: #141317;
  --accent: #F4F3F0;
  --accent-ink: #141317;
  --marker: rgba(247, 215, 67, 0.34);
  --progress-off: #34343C;
  --main-btn: #F4F3F0;       /* №318 row 30: the dark MainButton is light; yellow stays on the voice field and the price */
  --main-btn-text: #141317;
  --sec-btn: #1C1C20;
  --sec-btn-text: #F4F3F0;
  --blur-opacity: 0.45;
  --nm-tile: #F7D743;
  --nm-ink: #141317;
  --loader-bg: #101012;
  --loader-text: #F4F3F0;
  --chart-ink: #F4F3F0;
  --chart-line: #6A6975;     /* >= 3:1 on --bg and --surface (was #34343C at 1.4:1) */
  --chart-mute: #9D9CA6;     /* >= 4.5:1 */
  --chart-mark: #F7D743;
  --ink-card: #1C1C20;
  --bubble: #2B2B31;
  --bubble-ink: #F4F3F0;
}

/* every motion in the app stands still when the phone asks for reduced motion: one rule over every element, pseudo-elements included
   (the voice enter and stagger, screen push, tab capsule, progress segments, press scale, segmented control, card-in, spinner).
   Elements whose resting state differs from their animated start carry their own final state next to their animation. */
/* narrow phones (375px class): the 106-char yellow field still fits 3 lines (gate №143) */
@media (max-width: 380px) {
  :root { --t-voice-field: 500 16px/23px var(--font); --wheel-pay: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}