/* shared/brief-charts.css — the briefs' chart and dashboard standard (PR #40; PR40-Q1, Q3, Q12, Q13, Q25–Q29).
   Linked by Briefs 01, 02 and 04, and by every future brief with a chart or a dashboard act.

   Every width:
   - footnotes under a chart are .synthesis (Brief 04's rules, the shared standard: PR40-Q12);
   - a Gantt numbers each epic with a purple .gantt__stage-n span rendered from its index; the name key
     holds the name only (Brief 04's pattern, the shared standard: PR40-Q13).

   Phones (below 768), in a schedule act:
   - the Gantt, the "+" panels before it and the footnotes after it (.chart-aside) are hidden (PR38-Q27 (5),
     PR40-Q3);
   - the reader gets the act's editorial text, a vertical relay timeline (.relay--sched, styled in
     shared/relay.css with Brief 03's relay organism: PR #41, PR41-Q2) and the purple card pointing to the
     desktop view (Brief 03 Act 02's). RUN (core/decoration.js) already plays on every .relay; reduced motion =
     final frame.
   From 768 the Gantt renders as before and nothing phone-only shows.

   The dashboard act (PR40-Q25, Q26, Q28, Q29), every width: one panel in Brief 03 Act 05's relay pattern,
   "The figures" (.hlr__seg--figs) → purple baton "What it means" → the two insight statements (.ins) on the
   card surface, at the card text's size. Up to three .synthesis.chart-aside footnotes follow it.
   - Phones: each figure in solid white (.hl__n) above its label and line; no encodings, no footnotes, no card.
   - From 768: each figure is drawn as what it says (.viz): direction (small before, diagonal arrow, large
     after), share (split bar), completeness (full meter), count (the named items as chips), span (a seven-day
     strip), comparison (two bars on one scale). Static: no motion pattern is added. */

.synthesis { border-left: 3px solid var(--color-brand-purple); padding: .2rem 0 .2rem 1.15rem;
  margin-top: clamp(1.5rem, 2.5vw, 2rem); max-width: 52rem;
  font-size: .72rem; font-weight: var(--fw-light); color: var(--color-text-muted); }
.synthesis strong { color: var(--color-brand-white); font-weight: var(--fw-semibold); }
.synthesis + .synthesis { margin-top: .75rem; }

.gantt__stage-n { color: var(--color-brand-purple); margin-right: .35em; }

.desk-how { display: none; }

@media (max-width: 767px) {
  .gantt, .act .chart-aside { display: none; }

  /* where to see the full visual (Brief 03, WD-Q54): a laptop beside two lines, after the content it supplements */
  .desk-how { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; background: var(--color-brand-purple); color: var(--color-on-brand);
    padding: 1rem 1.2rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
  .desk-how__i { grid-row: 1 / 3; align-self: center; flex: none; width: 3rem; height: 2.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: miter; }
  .desk-how__t { font-size: .68rem; font-weight: var(--fw-bold); letter-spacing: .16em; text-transform: uppercase; }
  .desk-how__x { font-size: .92rem; line-height: 1.45; font-weight: var(--fw-regular, 400); margin-top: .3rem; }
}

/* ---- The dashboard act: shared/dashboard.css since PR #43 (PR43-Q30), shared with About ---- */

/* ---- Phone card scrollers (PR40-Q31…Q35): below 768 an act's main card set scrolls sideways in Brief 02 Act 02's
   pattern (snap, the next card peeks, no arrows: PR38-Q25). Each card shows its place as "01 / 04" (CSS counters,
   language-neutral; the alt text is empty so assistive tech skips it; on ::before, since the decoration RUN edge owns
   ::after); the purple detail CTAs inside the cards are
   hidden; a limit that lived only in a hidden panel is carried by a .swipe-note under the set. From 768 nothing changes. */
.swipe-note { display: none; }
@media (max-width: 767px) {
  .act .swipe { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc(100% - var(--peek-width));
    gap: clamp(1.25rem, 2vw, 2rem); align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem;
    scrollbar-width: none; counter-reset: swipe 0 swipen 3; }
  .act .swipe:has(> :nth-child(4)) { counter-reset: swipe 0 swipen 4; }
  .act .swipe::-webkit-scrollbar { display: none; }
  .act .swipe > * { margin-top: 0; scroll-snap-align: start; position: relative; counter-increment: swipe; }
  .act .swipe > *::before { content: counter(swipe, decimal-leading-zero) " / " counter(swipen, decimal-leading-zero) / "";
    position: absolute; top: clamp(1.3rem, 2.2vw, 1.9rem); right: clamp(1.3rem, 2.2vw, 1.9rem);
    font-size: .62rem; font-weight: var(--fw-bold); letter-spacing: .2em; color: var(--color-text-dim); }
  .act .swipe > * > :first-child { padding-right: 3.4rem; }
  .act .swipe .reveal { display: none; }
  .act .swipe .pcard__t::before { content: none; }
  .act .swipe-note { display: block; }
}

/* ---- Read time per breakpoint and language (PR #40 G7): the hero's .read__n holds four numbers, measured on the tip
   with rt.js's method (words the width shows, panels opened, ÷230, rounded up): EN/ES × phone (below 768) / from 768.
   One shows, chosen by html[lang] (set before first layout by the early i18n script and on every swap) and the width.
   No lang="es" (no script) reads as EN. No keys, no script. ---- */
.read__n .rt { display: none; }
html:not([lang="es"]) .read__n .rt--en.rt--d, html[lang="es"] .read__n .rt--es.rt--d { display: inline; }
@media (max-width: 767px) {
  html:not([lang="es"]) .read__n .rt--en.rt--d, html[lang="es"] .read__n .rt--es.rt--d { display: none; }
  html:not([lang="es"]) .read__n .rt--en.rt--m, html[lang="es"] .read__n .rt--es.rt--m { display: inline; }
}