/* Landfall prototype v3 · layout and components. All colors, fonts, radii and durations come from /tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-base)/1.55 var(--font-ui);
  transition: background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--focus); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-tight); }
button, input, select { font: inherit; color: inherit; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* ---------- preview controls (not product UI) ---------- */
.preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px dashed var(--rule-strong);
  background: var(--paper-sunk);
  font: 400 var(--text-xs)/1.4 var(--font-gloss);
  color: var(--ink-2);
}
.preview__tag { text-transform: uppercase; letter-spacing: 0.08em; }
.preview__field { display: inline-flex; align-items: center; gap: var(--space-2); }
.preview select {
  min-height: 36px; padding: 0 var(--space-2);
  background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-tight);
  font: inherit; color: var(--ink);
}
.preview__toggle input { width: 18px; height: 18px; accent-color: var(--focus); }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 1fr; min-height: calc(100dvh - 53px); }
.side { display: none; }
.main { padding: var(--space-5) var(--space-4) calc(var(--space-7) + 72px); outline: none; min-width: 0; }
.tabs {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in oklab, var(--paper-raised) 94%, transparent);
  border-top: 1px solid var(--rule);
  backdrop-filter: blur(8px);
}
.tabs .nav__item { flex-direction: column; gap: 2px; justify-content: center; min-height: 60px; font-size: var(--text-xs); }
body[data-flow="start"] .tabs { display: none; }
body[data-flow="start"] .main { padding-bottom: var(--space-7); }
.nav__item {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--hit); padding: 0 var(--space-3);
  color: var(--ink-2); text-decoration: none; border-radius: var(--radius-tight);
}
.nav__item:hover { color: var(--ink); }
.nav__item.is-active { color: var(--ink); }
.nav__item.is-active .icon { color: var(--focus); }

@media (min-width: 900px) {
  .shell { grid-template-columns: 232px minmax(0, 1fr); }
  .side {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 0; align-self: start; height: 100dvh;
    padding: var(--space-5) var(--space-3);
    border-right: 1px solid var(--rule);
  }
  .side__brand { font: 600 1.35rem/1 var(--font-read); padding: 0 var(--space-3) var(--space-5); }
  .side__rule { border: 0; border-top: 1px solid var(--rule); margin: var(--space-3) var(--space-3); }
  .side .nav__item.is-active { background: var(--paper-raised); box-shadow: inset 2px 0 0 var(--focus); }
  .tabs { display: none; }
  .main { padding: var(--space-6) var(--space-6) var(--space-7); }
}

/* ---------- screen rhythm ---------- */
.screen { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.screen--wide { max-width: 1120px; }
.screen--hero { min-height: 70dvh; justify-content: center; gap: var(--space-5); }
.kicker { font: 500 var(--text-xs)/1.4 var(--font-gloss); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.display { font: 500 var(--text-display)/1.08 var(--font-read); letter-spacing: -0.015em; max-width: 14ch; }
.title { font: 500 var(--text-title)/1.2 var(--font-read); letter-spacing: -0.01em; }
.lede { font-size: 1.0625rem; color: var(--ink-2); max-width: 58ch; }
.h-md { font: 500 1.125rem/1.3 var(--font-read); margin-top: var(--space-5); }
.h-sm { display: flex; align-items: center; gap: var(--space-2); font: 600 var(--text-sm)/1.3 var(--font-ui); }
.meta { font-size: var(--text-sm); color: var(--ink-3); }
.quiet { margin-top: var(--space-5); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; }
.endonym { font-family: var(--font-read); color: var(--ink-2); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--hit); padding: 0 var(--space-4);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--paper-raised); color: var(--ink);
  font-weight: 500; text-decoration: none; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.btn:hover { border-color: var(--ink-2); }
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--ink) 86%, var(--focus)); }
.btn--small { min-height: var(--hit); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn--quiet { border-color: transparent; background: transparent; }
.btn--quiet:hover { border-color: var(--rule-strong); }
.icon-btn {
  display: inline-grid; place-items: center; width: var(--hit); height: var(--hit);
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--paper-sunk); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.actions--split { justify-content: space-between; margin-top: var(--space-5); }

.seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-sunk); width: fit-content; max-width: 100%; }
.seg--wide { width: 100%; }
.seg--wide .seg__opt { flex: 1; }
.seg--scroll { overflow-x: auto; scrollbar-width: none; }
.seg__opt { position: relative; display: flex; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__opt span {
  display: grid; place-items: center; flex: 1;
  min-width: var(--hit); min-height: var(--hit); padding: 0 var(--space-3);
  border-radius: 999px; font-size: var(--text-sm); color: var(--ink-2); white-space: nowrap;
}
.seg__opt input:checked + span { background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow); font-weight: 600; }
.seg__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }

.switch { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--hit); cursor: pointer; font-weight: 500; }
.switch input { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--rule-strong); position: relative; cursor: pointer; transition: background var(--duration-fast); margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper-raised); transition: transform var(--duration-fast) var(--ease-out); }
.switch input:checked { background: var(--focus); }
.switch input:checked::after { transform: translateX(18px); }

.note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-2); }
.note .icon { margin-top: 1px; color: var(--ink-3); }
.note--ok .icon { color: var(--ok); }

/* ---------- cards ---------- */
.card { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow); }
.card h3 { font: 500 1.125rem/1.3 var(--font-read); }

/* onboarding */
.stepper { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--ink-3); font-family: var(--font-gloss); }
.stepper__bar { flex: 1; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.stepper__bar span { display: block; height: 100%; background: var(--ink); }
.lang-card { display: flex; flex-direction: column; gap: var(--space-3); }
.lang-card--target { border-color: color-mix(in oklab, var(--focus) 45%, var(--rule)); }
.lang-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.lang-card__head .meta { margin-left: auto; }
.skill { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.skill legend { font-size: var(--text-sm); color: var(--ink-2); padding: 0; margin-bottom: var(--space-1); }
.skill__label { color: var(--ink); font-weight: 500; margin-left: var(--space-2); }
.skill .seg { width: 100%; }
.skill .seg__opt { flex: 1; }
.search { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4); border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper-raised); color: var(--ink-3); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; min-height: 46px; color: var(--ink); }
.lang-results { list-style: none; display: flex; flex-direction: column; }
.lang-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; border-bottom: 1px solid var(--rule); }
.lang-row .endonym { color: var(--ink-3); }
.lang-row .btn { margin-left: auto; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label { font-size: var(--text-xs); color: var(--ink-3); font-family: var(--font-gloss); text-transform: uppercase; letter-spacing: 0.05em; }
.field__value { min-height: var(--hit); display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.field select, .inspector select, .inspector input[type="number"] {
  min-height: var(--hit); padding: 0 var(--space-3);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-tight); background: var(--paper-raised); color: var(--ink);
}
.ideas { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.ideas li { padding: var(--space-3) var(--space-4); border: 1px dashed var(--rule-strong); border-radius: var(--radius-card); }

/* ticket */
.ticket { position: relative; background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-ticket); box-shadow: var(--shadow); overflow: hidden; }
.ticket__top { position: relative; padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-1); border-bottom: 1px dashed var(--rule-strong); }
.ticket__top::before, .ticket__top::after { content: ""; position: absolute; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule-strong); }
.ticket__top::before { left: -10px; }
.ticket__top::after { right: -10px; }
.ticket__dest { font: 500 1.375rem/1.25 var(--font-read); padding-right: 5.5rem; }
.ticket__code { position: absolute; top: var(--space-4); right: var(--space-5); font: 500 var(--text-xs)/1 var(--font-gloss); color: var(--focus); border: 1px solid currentColor; border-radius: var(--radius-tight); padding: 5px 6px; }
.ticket__tasks { list-style: none; padding: var(--space-3) var(--space-5) 0; display: grid; gap: var(--space-1); }
.ticket__tasks li { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.ticket__tasks li .icon { width: 18px; height: 18px; color: var(--ink-3); }
.ticket__tasks li.is-done { color: var(--ink-3); }
.ticket__tasks li.is-done .icon { color: var(--ok); }
.ticket__progress { padding: var(--space-2) var(--space-5) var(--space-4); }
.ticket--compact .ticket__dest { font-size: 1.125rem; }

/* plan */
.minutes { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.minutes legend { font-size: var(--text-sm); color: var(--ink-2); padding: 0; margin-bottom: var(--space-2); }
.balance { margin: 0; display: grid; gap: var(--space-2); }
.balance__bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--paper-sunk); }
.balance__seg--input, .sw--input { background: var(--strand-input); }
.balance__seg--output, .sw--output { background: var(--strand-output); }
.balance__seg--form, .sw--form { background: var(--strand-form); }
.balance__seg--fluency, .sw--fluency { background: var(--strand-fluency); }
.balance__legend { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.balance__legend b { font-weight: 600; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
@media (min-width: 640px) { .balance__legend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.strand { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--text-xs)/1 var(--font-gloss); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.strand::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--strand-color, var(--ink-3)); }
.strand--input { --strand-color: var(--strand-input); }
.strand--output { --strand-color: var(--strand-output); }
.strand--form { --strand-color: var(--strand-form); }
.strand--fluency { --strand-color: var(--strand-fluency); }

.method-card { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.method-card__head { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.method-card__min { font: 500 var(--text-sm)/1 var(--font-gloss); color: var(--ink-2); }
.method-card h3 a, .method-row h3 a { text-decoration: none; }
.method-card h3 a:hover, .method-row h3 a:hover { text-decoration: underline; }
.why summary { cursor: pointer; font-size: var(--text-sm); color: var(--ink-2); min-height: 32px; display: flex; align-items: center; }
.why p { font-size: var(--text-sm); color: var(--ink-2); padding: 0 0 var(--space-2); }
.alts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.alts .btn { border: 1px dashed var(--rule-strong); }

/* today */
.steps { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.step__n { font: 500 1.25rem/1 var(--font-read); color: var(--ink-3); }
.step__name { font-weight: 500; }
.step .meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* speak */
.interlinear { display: grid; gap: var(--space-1); }
.interlinear__label { font: 500 var(--text-xs)/1.3 var(--font-gloss); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: var(--space-3); }
.interlinear__label:first-child { margin-top: 0; }
.interlinear__line { font: 400 var(--text-read)/1.55 var(--font-read); }
.interlinear__target { color: var(--ink); border-left: 3px solid var(--focus); padding-left: var(--space-3); }
.interlinear__gloss { font: 400 var(--text-sm)/1.4 var(--font-gloss); color: var(--ink-3); padding-left: calc(var(--space-3) + 3px); }
.mark del { text-decoration-thickness: 1.5px; color: var(--ink-3); }
.mark ins { text-decoration: none; margin-left: 4px; padding: 0 3px; border-radius: 3px; }
.mark--error ins { color: var(--alert); box-shadow: inset 0 -2px 0 var(--alert); }
.mark--error ins::before { content: "‸"; margin-right: 2px; }
.mark--natural del { text-decoration-style: dotted; }
.mark--natural ins { color: var(--ink); box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--focus) 60%, transparent); }
.notes { display: grid; gap: var(--space-2); }
.notes__list { padding-left: var(--space-5); display: grid; gap: var(--space-1); color: var(--ink-2); }
.notes__list--error li::marker { color: var(--alert); }
.bridge-from { display: inline-flex; align-items: center; gap: 6px; }
.bridge-from::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.capture { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3); border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-raised); }
.capture .btn:last-child { justify-self: end; }
.capture .btn:first-child { justify-self: start; }
.mic { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); display: grid; place-items: center; cursor: pointer; }
.mic .icon { width: 28px; height: 28px; }

/* read */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.reader__text { font: 400 calc(var(--text-read) * 1.15)/2.1 var(--font-read); }
.tok { font: inherit; background: none; border: 0; padding: 0 1px; margin: 0; cursor: pointer; color: var(--lens-known); border-radius: 3px; }
.tok:hover { background: var(--paper-sunk); }
.tok.is-selected { outline: 2px solid var(--focus); outline-offset: 1px; }
.tok--bridge, .tok--loan { color: var(--lens-transparent); text-decoration: underline dotted var(--focus) 2px; text-underline-offset: 5px; }
.tok--new { background: var(--lens-new-bg); color: var(--lens-new-ink); }
.tok--partial { color: var(--lens-partial); text-decoration: underline dashed var(--ink-2) 1.5px; text-underline-offset: 5px; }
.tok--false { text-decoration: underline wavy var(--lens-false) 1.5px; text-underline-offset: 5px; }
.tok--sample { font: 500 var(--text-sm)/1.6 var(--font-read); padding: 0 4px; cursor: default; }
.sidenote { min-height: 88px; padding: var(--space-3) var(--space-4); border-left: 2px solid var(--focus); display: grid; gap: var(--space-1); align-content: start; }
.sidenote__word { font: 500 1.25rem/1.3 var(--font-read); }
.sidenote__gloss { font: 400 var(--text-base)/1.4 var(--font-read); color: var(--ink-2); }
.bridges { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bridge-card { border-top: 3px solid var(--ink); display: grid; gap: var(--space-1); }
.bridge-card__strength { font-weight: 600; }
.empty { border-style: dashed; box-shadow: none; display: grid; gap: var(--space-2); }
.shelf { list-style: none; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.shelf__item { display: grid; gap: var(--space-2); }
.shelf__title { font: 500 1.0625rem/1.35 var(--font-read); }
.comp { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--paper-sunk); }
.comp__known { background: var(--ink-2); }
.comp__bridge { background: repeating-linear-gradient(135deg, var(--focus) 0 3px, transparent 3px 6px); }
.comp--unknown { background: repeating-linear-gradient(135deg, var(--rule-strong) 0 3px, transparent 3px 6px); }

/* methods */
.method-row { display: grid; gap: var(--space-2); }
.method-row.is-muted { background: transparent; box-shadow: none; border-style: dashed; }
.method-row.is-muted h3, .method-row.is-muted > p:not(.meta) { color: var(--ink-2); }
.method-row .meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.numbered { padding-left: var(--space-5); display: grid; gap: var(--space-2); }

/* me */
.passport { list-style: none; display: grid; gap: var(--space-3); }
.passport__row { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.passport__row.is-target .passport__name b { color: var(--focus); }
.passport__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.passport__skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.passport__skills dt { font-size: var(--text-xs); color: var(--ink-3); }
.passport__skills dd { margin: 0; }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 14px; height: 6px; border-radius: 2px; background: var(--rule); }
.meter i.on { background: var(--ink-2); }
.is-target .meter i.on { background: var(--focus); }
.facts { list-style: none; display: grid; }
.fact { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.fact--guess > div:first-child { border-left: 2px dashed var(--rule-strong); padding-left: var(--space-3); }
.fact__tag { font: 500 var(--text-xs)/1 var(--font-gloss); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.fact__actions { display: flex; flex: none; }

/* inspector */
.inspector { display: grid; gap: var(--space-5); }
.inspector__controls { display: grid; gap: var(--space-4); align-content: start; }
.inspector__controls fieldset { border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4) var(--space-4); margin: 0; display: grid; gap: var(--space-3); }
.inspector__controls legend { font: 500 var(--text-xs)/1 var(--font-gloss); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); padding: 0 var(--space-2); }
.inspector__controls label { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--ink-2); }
.inspector__controls label.row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--hit); }
.inspector__controls input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--focus); }
.inspector__out { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.inspector__out .h-md:first-child { margin-top: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tbl th { text-align: left; font: 500 var(--text-xs)/1.3 var(--font-gloss); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-2); border-bottom: 1px solid var(--rule-strong); }
.tbl td { padding: var(--space-2); border-bottom: 1px solid var(--rule); }
.trace { padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.trace code { font: 400 var(--text-xs)/1.5 var(--font-gloss); color: var(--ink-2); overflow-wrap: anywhere; }
@media (min-width: 1100px) { .inspector { grid-template-columns: 320px minmax(0, 1fr); } }
.frag { font-family: var(--font-read); font-style: italic; color: var(--ink); }

/* v0.4: bridge channels, head start, carry-over, inspector facts */
.channels { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--ink-3); }
.channels li { display: inline-flex; gap: var(--space-1); }
.channels li.is-on { color: var(--ink); }
.channels b { font-weight: 600; }
.bridge-card--start { border-top-style: double; border-top-width: 4px; }
.bullets { padding-left: 1.2em; display: grid; gap: var(--space-1); }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2); font-size: var(--text-sm); }
.fact-grid div { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--rule); }
.fact-grid dt { color: var(--ink-3); }
.fact-grid [data-value="true"] dd { font-weight: 600; }
.tbl-wrap { overflow-x: auto; }
[dir="rtl"].reader__text { text-align: right; }