/* natalka/app/static/reading.css — the reading block system (board 2026-09-26, CHAIR §1).
   One rule for every block: yellow (--voice) holds only the point of a unit, at its top, at most
   one per 844px view; it is never a container. Everything else is --bg or a white card.
   Each worktree edits ONLY its own marked section below (plan 2026-09-26 §0.4). */

/* shared components (foundation) */
.read-p, .read p.read-p { font: var(--t-read); font-variation-settings: var(--flar-ui); color: var(--text);
  margin: var(--gap-l) 0 0; text-wrap: pretty; }
.field { margin-top: var(--gap-l); background: var(--voice); color: var(--voice-ink);
  border-radius: var(--r-field); padding: 14px 16px; }
.field .field-text { margin: 0; font: var(--t-voice-field); font-variation-settings: var(--flar-voice); text-wrap: pretty; }   /* production size: FIELD_MAX_CHARS is measured on it */
.field .vf-link { color: var(--voice-ink); }
.voice-strong { margin: var(--gap-l) 0 0; font: var(--t-voice-strong); font-variation-settings: var(--flar-voice);
  color: var(--text); text-wrap: pretty; }
.voice-strong + .vf-link { color: var(--accent); }   /* not on a voice field here — same override as app.css:335 */
.head { margin-top: var(--gap-xl); }
.head .head-title { margin: 0; font: var(--t-display); letter-spacing: var(--ls-display); color: var(--text); }
.head .head-title.screen-title { font: var(--t-screen); }
.meta { margin: var(--gap-xs) 0 0; font: var(--t-meta); color: var(--muted); }
.read-note { margin-top: var(--gap-l); color: var(--muted); font: var(--t-read); text-wrap: pretty; }
.read-note p { margin: var(--gap-s) 0 0; }
.read-note p:first-child { margin-top: 0; }
.portrait-pointer { margin: var(--gap-m) 0 var(--gap-s); }                 /* №247: the quiet pointer back to the portrait - a link under the note, with air above it (polish 2026-10-12) */
.portrait-pointer .vf-link { color: var(--accent); }                       /* not on a voice field here - same override as .chart-section .vf-link */
.part { margin-top: var(--gap-part); }
.part-h2 { margin: 0; font: var(--t-h2); font-variation-settings: var(--flar-ui); color: var(--text); text-wrap: balance; }
.part p { margin: var(--gap-l) 0 0; font: var(--t-read); text-wrap: pretty; }
/* scoped under .part so they outrank `.part p` above (final review: captions rendered at body size) */
.part .part-sub { margin: var(--gap-hair) 0 0; font: var(--t-caption); color: var(--muted); }
.part .part-lead { font-weight: 600; }
.trait-list { list-style: none; margin: var(--gap-l) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-s); }
.trait-list li { font: var(--t-read); color: var(--text); text-wrap: pretty; }
.trait-list .lead-in { font-weight: 600; }
.surface-card { margin-top: var(--gap-l); background: var(--surface); border-radius: var(--r-card); padding: 16px; }
.scene-card .scene-label { margin: 0 0 var(--gap-xs); font: var(--t-section); color: var(--muted); }
.scene-card .scene-text p { margin: var(--gap-s) 0 0; font: var(--t-voice); font-variation-settings: var(--flar-voice); text-wrap: pretty; }
.scene-card .scene-text p:first-child { margin-top: 0; }
.grouped-label { margin: var(--gap-xl) 0 0; font: var(--t-section); color: var(--muted); }
.chart-section .grouped-label { margin-top: 0; }
.grouped { list-style: none; margin: var(--gap-s) 0 0; padding: 0 16px; background: var(--surface); border-radius: var(--r-card); }
.g-row { min-height: 56px; padding: 14px 0; display: flex; gap: var(--gap-m); align-items: flex-start; }
.g-row + .g-row { border-top: 1px solid var(--line); }       /* inset divider: the card pads 16px */
.g-row .g-main { flex: 1; min-width: 0; }
.g-row .g-label { margin: 0; font: var(--t-title); color: var(--text); }   /* №125: a label is never smaller than the body under it */
.g-row .g-term { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.g-row .g-body { margin: var(--gap-label-body) 0 0; font: var(--t-read); color: var(--text); text-wrap: pretty; }
.g-row .g-body:first-child { margin-top: 0; }
.g-row .g-body p { margin: 0; }
.g-row .g-body p + p { margin-top: var(--gap-s); }
.g-row .g-end { flex: none; align-self: center; font: var(--t-meta); color: var(--muted); display: flex; gap: var(--gap-xs); align-items: center; }
.icon { flex: none; width: var(--icon-s); height: var(--icon-s); margin-top: 6px; color: var(--muted); }
.check-card { margin-top: var(--gap-l); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 14px 16px; }
.check-card .check-label { margin: 0 0 var(--gap-xs); font: var(--t-title); }
.check-card p { margin: 0; font: var(--t-read); text-wrap: pretty; }
.steps-label { margin: var(--gap-section) 0 0; font: var(--t-section); color: var(--muted); }
.steps { list-style: none; margin: var(--gap-s) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-m); }
.step { background: var(--surface); border-radius: var(--r-card); padding: 16px; display: grid;
  grid-template-columns: var(--step-disc) 1fr; column-gap: var(--gap-m); }
.step-disc { width: var(--step-disc); height: var(--step-disc); border-radius: 50%; background: var(--accent);
  color: var(--accent-ink); font: var(--t-meta); display: flex; align-items: center; justify-content: center; }
.step-do { margin: 0; font: var(--t-row); color: var(--text); text-wrap: pretty; }
.step-why { margin: var(--gap-xs) 0 0; font: var(--t-sub); color: var(--muted); text-wrap: pretty; }
/* P2.11 (№352): the take-this-step button under a paid step - the secondary chip; the taken one is pressed (app.css .chip[aria-pressed]) */
.step-take { margin-top: var(--gap-s); }
.step-card { cursor: pointer; margin: 0 0 var(--gap-m); }
.step-card .scene-label { margin: 0 0 var(--gap-xs); }
.quiet-line { display: block; margin: var(--gap-m) 0 0; }
.lock-list .build-line { display: flex; gap: var(--gap-m); align-items: center; }
.lock-list .build-line .g-body { flex: 1; min-width: 0; }
.build-line .g-end { flex: none; display: flex; align-items: center; color: var(--muted); }
.build-line .icon { margin-top: 0; }
.lock-list .build-line::before { content: none; }
/* polish B2: ONE row spec for every list of tappable / titled rows - primary --t-row, optional secondary
   --t-row-sub muted, --row-h minimum, 1px dividers inset by the card's 16px padding */
.mn-lock-row .g-row, .mn-list .g-row, .mn-set .g-row, .full-contents .contents-row, .full-portraits .contents-row, .lock-list .build-line, .place-results li {
  min-height: var(--row-h); padding: 10px 0; align-items: center; }
.lock-list .build-line + .build-line { border-top: 1px solid var(--line); }
.mn-lock-row .g-label, .mn-list .g-label, .mn-set .g-label, .full-contents .g-label, .full-portraits .contents-row .g-label, .lock-list .build-line .g-body, .place-results .place-name,
.grouped .g-row:not(:has(.g-body)) .g-label, .ah-subblock-rows .g-label {   /* P4.1 (row 41): every title-only row of a list, tappable or read-only (chosen by the list, not by role), and every locked row */
  font: var(--t-row); color: var(--text); }
.mn-list .g-term, .full-contents .g-term, .place-results .place-meta { margin: 0; font: var(--t-row-sub); color: var(--muted); }
/* P4.1 (row 41, round-2 A2): ONE status icon, at the row end - the lock of the forecast block and the sub / year offer rows moves after the label
   (it is aria-hidden, so only the picture changes) */
.g-row > .ic-lock, .hero-map .g-row > .icon:first-child { order: 1; }
/* Polish: a city suggestion is a column of two lines: left-aligned like every list (the shared row spec centres the cross axis), the pair centred in the row height */
.place-results li { align-items: flex-start; justify-content: center; }
/* Polish: while a gift's chart builds its rows are not locked (she owns them): a neutral dot, until the row ends on its mark; the row that waits for the hour keeps its real lock */
.reveal-gift .build-line:not(.stays-locked):not(.tick) .ic-lock { display: inline-block; width: var(--gap-s); height: var(--gap-s); border-radius: 50%; background: var(--line-strong); }
.reveal-gift .build-line:not(.stays-locked):not(.tick) .ic-lock svg { display: none; }
.build-line .ic-check { display: none; }
.build-line.tick .ic-lock { display: none; }
.build-line.tick .ic-check { display: inline-flex; }
/* P1.4: the reveal rows (full_building.html) end on the approved `full.contents.open_mark` mark once they tick - a check means read and nothing else */
.build-line .ic-open { display: none; font: var(--t-meta); color: var(--muted); }
.build-line.tick .ic-open { display: inline-flex; }

/* ---------------------------------------------------------------- */
/* == chart (B) == free-chart sections, chart top, together, not_you */
/* (worktree reading-chart edits only between this marker and the next) */

.chart-section .head { margin-top: 0; }
.chart-section { margin-top: var(--gap-section); }
.chart-section .vf-link { color: var(--accent); }
.chart-section .field .vf-link { color: var(--voice-ink); }
/* review fix (Group B): a single-row card (e.g. a sign section's strength/cost card when the
   ledger has only one of the two for it) has no `.g-row + .g-row` divider to carry any bottom
   breathing room, so it reads as cut off right under the text -- give a lone row its own extra
   bottom padding. */
.grouped:has(> .g-row:only-child) { padding-bottom: var(--gap-s); }

/* ---------------------------------------------------------------- */
/* == chapter (A) == chapter screen, chapter-end state, contents */
/* (worktree reading-chapter edits only between this marker and the next) */

.full-contents .contents-row, .full-portraits .contents-row { cursor: pointer; align-items: center; }
.full-contents .contents-row.locked .g-label { color: var(--muted); }
.full-contents .g-end .icon, .full-portraits .contents-row .g-end .icon { margin-top: 0; }
/* packaging A (№247): a portrait on the buyer's portraits screen closes with the real row of the chapter that answers it
   (the same row spec as the contents), where the free chart has the muted sale hook line */
.full-portraits .portrait-row { margin-top: var(--gap-m); }
.chapter-end .ending { margin-top: var(--gap-l); }

/* ---------------------------------------------------------------- */
/* == ending (C) == deck cards, building screen */
/* (worktree reading-ending edits only below this marker) */
.ending-card .surface-card:first-child, .ending-card .field:first-child, .ending-card > .pair-rest { margin-top: 0; }
.ending-card .surface-card .read-p:first-child { margin-top: 0; }
/* №244: the white part of the invite card is one <p> per paragraph of the copy, on the people tab and on card G alike: ONE gap between them */
.mn-invite .surface-card .read-p + .read-p, .pair-rest .read-p + .read-p { margin-top: var(--gap-l); }

/* ---------------------------------------------------------------- */
/* == style D1 (canon №230/№231) == one rhythm and one inner spec across the app; every value is a token */
.btn-primary, .chip { transition: transform var(--press-ms) var(--ease-out); }
.btn-primary:active, .chip:active { transform: scale(var(--press-scale)); }
.g-row .g-label + .g-body, .g-row .g-term + .g-body, .g-row .g-label + .g-term { margin-top: var(--gap-label-body); }
.sign-block .run-label, .check-card .check-label, .scene-card .scene-label, .mn-card .scene-label { margin-bottom: var(--gap-label-body); }

/* time options (onboarding step «time»): three full-width option rows on the city-suggestion row spec; the selection is a ring that fills */
.chips[data-role="time-chips"] { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0 16px; background: var(--surface); border-radius: var(--r-card); }
.chips[data-role="time-chips"] .chip { position: relative; height: auto; min-height: var(--row-h); width: 100%; padding: 0 calc(var(--opt-ring) + var(--gap-m)) 0 0;
  border: 0; border-radius: 0; background: none; color: var(--text); font: var(--t-row); justify-content: flex-start; text-align: left; }
.chips[data-role="time-chips"] .chip + .chip { border-top: 1px solid var(--line); }
.chips[data-role="time-chips"] .chip::after { content: ""; position: absolute; right: 0; top: 50%; width: var(--opt-ring); height: var(--opt-ring); margin-top: calc(var(--opt-ring) / -2);
  border-radius: 50%; border: var(--bw-state) solid var(--line-strong); box-sizing: border-box; }
.chips[data-role="time-chips"] .chip.selected, .chips[data-role="time-chips"] .chip[aria-pressed="true"] { font-weight: 700; }
.chips[data-role="time-chips"] .chip.selected::after, .chips[data-role="time-chips"] .chip[aria-pressed="true"]::after {
  background: var(--accent); border-color: var(--accent); }
.chips[data-role="time-chips"] .chip.selected::before, .chips[data-role="time-chips"] .chip[aria-pressed="true"]::before {
  content: ""; position: absolute; right: var(--opt-tick-x); top: 50%; width: var(--opt-tick-w); height: var(--opt-tick-h); margin-top: calc(var(--opt-tick-h) * -.67); z-index: 1;
  border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* the people tab: the question above the invite is a section label; the yellow field, its card and its button read as one block */
.mn-root .voice-strong[data-role="mn-empty"] { margin-top: var(--gap-l); margin-bottom: var(--gap-2xl); font: var(--t-section); color: var(--muted); }   /* Polish: it asks about the list above, so it hugs it and leaves a clear gap before the gift rows (it read as their heading) */
/* Polish (Impeccable typeset, №143: no yellow here): the hand-added person's opening block was a 10-line 20/700 wall - it is reading text */
.screen-friend-chart .voice-strong[data-role="summary"] { font: var(--t-read); font-variation-settings: var(--flar-ui); color: var(--text); }
.mn-invite .field { margin-top: 0; }
.mn-invite .surface-card { margin-top: var(--gap-s); }
.mn-invite .surface-card .read-p { font: var(--t-note); }   /* the invite pitch is a quiet note: the button must rest above the pill fade (390x844) */

/* chapter: the meta line with the chevron is a full-width row with a 44px hit area */
.head .meta-link { display: flex; width: 100%; justify-content: space-between; }

/* ---------------------------------------------------------------- */
/* == №318 P14b == reading visuals: rows 28, 32, 33, 36 (no word changes) */

/* row 28: a paid chapter reads like the free chart. A paragraph takes the `.read-p` spec (font, body colour, rhythm), its first clause (the `.lead-in` span) the 600 weight
   of the free traits' lead-in, and the intro note under the yellow field is body colour, not muted. The closing words (data-role="outro") stay quiet. */
.full-chapter [data-role="part"] > p:not(.part-sub):not(.part-lead) { font: var(--t-read); font-variation-settings: var(--flar-ui); color: var(--text);
  margin: var(--gap-l) 0 0; text-wrap: pretty; }
.full-chapter [data-role="part"] > p .lead-in { font-weight: 600; }          /* the lead-in span is made in chart_view._lead_p, as in the free traits */
.full-chapter [data-role="chapter-note"] { color: var(--text); font: var(--t-read); }


/* row 36: the head of the free chart: her name and where the Sun, the Moon and the Ascendant stand, as sign glyphs + the section lines' own words; no wheel (№150) */
.chart-id { margin-top: var(--gap-m); }
.chart-name { margin: 0; font: var(--t-h2); font-variation-settings: var(--flar-ui); color: var(--text); overflow-wrap: anywhere; }
.chart-signs { margin: var(--gap-xs) 0 0; font: var(--t-sub); color: var(--text); }
.chart-sign { white-space: nowrap; }
.chart-glyph { font-family: var(--font-glyph); margin-right: var(--gap-xs); color: var(--chart-mute); }