/* ==========================================================================
   f-before-you-go.css — CAT-08 only. Tokens only: no colour literals, no
   radii, no fonts that are not already declared in tokens.css.
   ========================================================================== */

.byg-head { padding: var(--s-6) var(--gutter) var(--s-4); }
.byg-head h1 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  font-weight: var(--w-regular);
}
.byg-head p { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure); }

.byg-block { padding: var(--s-5) var(--gutter); border-top: 1px solid var(--hairline); }
.byg-block > * + * { margin-top: var(--s-4); }
.byg-foot { padding: var(--s-5) var(--gutter) var(--s-8); }
.byg-foot > * + * { margin-top: var(--s-2); }

.byg-frame { border: 1px solid var(--hairline); padding: var(--s-4); }
.byg-frame > * + * { margin-top: var(--s-3); }

.byg-strip {
  padding: var(--s-3) var(--gutter);
  background: var(--wash);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-small);
  line-height: var(--lh-body);
}
.byg-strip-alert { border-left: 3px solid var(--ink-alarm); }

.byg-ops { padding: var(--s-3) var(--gutter) var(--s-4); }
.byg-ops > * + * { margin-top: var(--s-2); }

/* ---- the marks ----------------------------------------------------------- */

.byg-mark {
  display: inline-block;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  border: 1px solid var(--ink-alarm);
  color: var(--ink-alarm);
  padding: 1px var(--s-2);
  white-space: nowrap;
}
.byg-mark-line { color: var(--ink-alarm); max-width: var(--measure); }

/* ---- ledger -------------------------------------------------------------- */

.byg-ledger { display: grid; gap: var(--s-2); }
.byg-ledger-row {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.byg-ledger-row dd { text-align: right; }

/* ---- fact rows ----------------------------------------------------------- */

.byg-fact {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-4) var(--gutter);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  text-align: left;
  color: inherit;
  font: inherit;
}
.byg-fact:first-of-type { border-top: 1px solid var(--hairline); }
.byg-fact-q { display: block; font-size: var(--t-small); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); }
.byg-fact-a { display: block; margin-top: var(--s-2); max-width: var(--measure); }
.byg-fact-meta { display: block; margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-muted); }
.byg-fact.is-focused { outline: 2px solid var(--accent); outline-offset: -2px; }
.is-focused { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- bars ---------------------------------------------------------------- */

.byg-bars { display: grid; gap: var(--s-3); }
.byg-bar {
  display: block; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--hairline);
  background: transparent; color: inherit; font: inherit;
  padding: var(--s-3) 0 var(--s-4);
  min-height: var(--tap);
}
.byg-bar-head { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.byg-bar-track {
  display: block;
  position: relative;
  height: 10px;
  margin-top: var(--s-3);
  background: var(--wash);
  border: 1px solid var(--hairline);
}
.byg-bar-fill { position: absolute; top: 0; bottom: 0; background: var(--ink); }
.byg-bar-fill[data-loud="true"] { background: var(--ink-alarm); }
.byg-bar-scale { display: flex; justify-content: space-between; font-size: var(--t-label); color: var(--ink-muted); margin-top: var(--s-1); }
.byg-bar-detail { padding: var(--s-3) 0 0; }
.byg-bar-detail > * + * { margin-top: var(--s-2); }

/* ---- grids --------------------------------------------------------------- */

.byg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.byg-grid { border-collapse: collapse; width: 100%; font-size: var(--t-small); }
.byg-grid th, .byg-grid td {
  border: 1px solid var(--hairline);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.byg-grid th { font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); font-weight: var(--w-regular); }
.byg-grid td[data-empty="true"] { color: var(--ink-muted); }

/* ---- cards and tiles ----------------------------------------------------- */

.byg-card { border: 1px solid var(--hairline); padding: var(--s-4); }
.byg-card > * + * { margin-top: var(--s-3); }
.byg-cards { display: grid; gap: var(--s-4); }

.byg-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.byg-tile { border: 1px solid var(--hairline); padding: var(--s-2); }
.byg-tile > * + * { margin-top: var(--s-2); }
.byg-tile-alt { font-size: var(--t-small); color: var(--ink-muted); padding: var(--s-3); border: 1px dashed var(--hairline); }
.byg-badge {
  display: inline-block; font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; border: 1px solid var(--hairline); padding: 1px var(--s-2);
  color: var(--ink-muted);
}

/* ---- legs ---------------------------------------------------------------- */

.byg-legs { display: grid; gap: var(--s-4); counter-reset: leg; }
.byg-leg { display: grid; gap: var(--s-2); }
.byg-leg-fig { max-width: 100%; }
.byg-leg-meta { font-size: var(--t-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---- steps --------------------------------------------------------------- */

.byg-steps { display: grid; gap: var(--s-4); list-style: none; counter-reset: step; }
.byg-step { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); align-items: start; }
.byg-step-n { font-variant-numeric: tabular-nums; color: var(--ink-muted); font-size: var(--t-small); }

/* ---- prose and read-aloud ------------------------------------------------ */

.byg-prose { max-width: var(--measure); }
.byg-prose p { margin-top: var(--s-3); line-height: var(--lh-body); }
.byg-sentence { transition: background var(--d-state) var(--ease-out); }
.byg-sentence[data-speaking="true"] { background: var(--scrim-soft); }
@media (prefers-reduced-motion: reduce) {
  .byg-sentence { transition: none; }
}
.byg-progress {
  height: 3px; background: var(--wash); border: 1px solid var(--hairline); position: relative;
}
.byg-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width var(--d-state) linear; }
@media (prefers-reduced-motion: reduce) {
  .byg-progress-fill { transition: none; }
}

/* ---- switches ------------------------------------------------------------ */

.byg-switch {
  display: flex; width: 100%; gap: var(--s-3); align-items: center; justify-content: space-between;
  min-height: var(--tap); padding: var(--s-3) 0;
  border: 0; border-bottom: 1px solid var(--hairline);
  background: transparent; color: inherit; font: inherit; text-align: left;
}
.byg-switch-main { display: flex; flex-direction: column; gap: 2px; }
.byg-switch-state {
  border: 1px solid var(--hairline); padding: var(--s-1) var(--s-3);
  text-transform: uppercase; letter-spacing: var(--tr-label); min-width: 52px; text-align: center;
}
.byg-switch[aria-pressed="true"] .byg-switch-state { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- panorama ------------------------------------------------------------ */

.byg-pano { position: relative; border: 1px solid var(--hairline); overflow: hidden; touch-action: pan-y; }
.byg-pano canvas { display: block; width: 100%; height: 220px; }
.byg-compass {
  display: flex; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-top: 1px solid var(--hairline);
  font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted);
}
.byg-compass b { color: var(--ink); font-weight: var(--w-bold); }
.byg-strip-frames { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; }
.byg-strip-frames > * { flex: 0 0 82%; scroll-snap-align: start; }

/* ---- chit ---------------------------------------------------------------- */

.byg-chit-lines { list-style: none; display: grid; gap: var(--s-2); padding-left: 0; }
.byg-chit-lines li { padding-left: var(--s-3); border-left: 2px solid var(--hairline); }

/* ---- verdicts ------------------------------------------------------------ */

.byg-verdict { border: 1px solid var(--ink); padding: var(--s-4); }
.byg-verdict > * + * { margin-top: var(--s-3); }
.byg-verdict-word {
  font-family: var(--font-display); font-size: var(--t-sub); font-weight: var(--w-regular);
}
.byg-verdict[data-verdict="no"] { border-color: var(--ink-alarm); }

/* ---- misc ---------------------------------------------------------------- */

.byg-count { font-variant-numeric: tabular-nums; }
.byg-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.byg-jsonld-note { font-size: var(--t-label); color: var(--ink-muted); letter-spacing: var(--tr-label); text-transform: uppercase; }

.byg-na-list { list-style: none; padding-left: 0; display: grid; gap: var(--s-2); }
.byg-na-list li { padding-left: var(--s-3); border-left: 2px solid var(--hairline); max-width: var(--measure); }

.byg-picture { max-width: 100%; }
.byg-figure { margin: 0; }
.byg-figure > * + * { margin-top: var(--s-2); }