/* Chapter 8 (C08). All rules scoped under [data-chapter="time-dilation"]; colors from tokens only. */
[data-chapter="time-dilation"] .td-habit {
  position: relative;
  margin-block: var(--s-6);
  padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 6px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  box-shadow: var(--shadow);
}
[data-chapter="time-dilation"] .td-habit::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 10px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(var(--c-inv), var(--c-inv)) left / 1.5px 100% no-repeat,
              linear-gradient(var(--c-inv), var(--c-inv)) right / 1.5px 100% no-repeat;
}
[data-chapter="time-dilation"] .td-habit-title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-inv);
}
[data-chapter="time-dilation"] .td-habit p:last-child { margin-bottom: 0; }
[data-chapter="time-dilation"] .td-habit-note { font-size: .88rem; color: var(--ink-muted); }
[data-chapter="time-dilation"] .td-table {
  width: auto;
  min-width: min(100%, 420px);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
[data-chapter="time-dilation"] .td-table caption {
  text-align: left;
  font-size: .8rem;
  color: var(--ink-muted);
  padding-bottom: var(--s-2);
}
[data-chapter="time-dilation"] .td-table td,
[data-chapter="time-dilation"] .td-table th { padding: .35em .9em .35em 0; text-align: left; }
[data-chapter="time-dilation"] .callout .table-scroll { margin-block: var(--s-3); }
/* Orientation card, lab key line, "show the result" buttons (docs/redesign/time-dilation.md 2.4, 4.3, 4.8) */
[data-chapter="time-dilation"] .td-orient { max-width: 40rem; margin: var(--s-6) 0; }
[data-chapter="time-dilation"] .td-orient ol { margin: var(--s-3) 0 0; padding-left: 1.5em; }
[data-chapter="time-dilation"] .td-orient li + li { margin-top: var(--s-2); }
[data-chapter="time-dilation"] .td-orient > :is(p, ol) + :is(p, ol) { margin-top: var(--s-3); }
[data-chapter="time-dilation"] .td-orient > :last-child { margin-bottom: 0; }
[data-chapter="time-dilation"] .td-labkey { font-family: var(--font-sans); font-size: .9rem; color: var(--ink-muted); }
/* Lab 1: the widget's in-lab "Nature" box printed the measured 408 before the reveal and a fixed "about 421" that
   went stale off v = 0.995. The same facts live in "What just happened?" (#reconcile). Request S5(e). */
[data-chapter="time-dilation"] #lab-time-dilation-1 .stx-mu-nature { display: none; }
[data-chapter="time-dilation"] .td-after-btn { margin-block: var(--s-3); background: var(--surface); border-color: var(--rule); }
/* Lab 2: three clocks, two frames (/js/widgets/time-dilation-three-clocks.js) */
[data-chapter="time-dilation"] .td-tc-checks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
[data-chapter="time-dilation"] .td-tc-checks .btn { background: var(--surface); border-color: var(--rule); }
[data-chapter="time-dilation"] .td-tc-checks [aria-pressed="true"] { background: var(--tint-lab); border-color: var(--c-lab); color: var(--ink); font-weight: 600; }
@media (pointer: coarse) { [data-chapter="time-dilation"] .td-tc-checks .btn { min-height: 44px; } }
[data-chapter="time-dilation"] .td-tc-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
@container (min-width: 640px) { [data-chapter="time-dilation"] .td-tc-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); } }
[data-chapter="time-dilation"] .td-tc-ov text { font: 600 12px var(--font-sans); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
[data-chapter="time-dilation"] .td-tc-ov text.is-lab { fill: var(--c-lab); }
[data-chapter="time-dilation"] .td-tc-ov text.is-rkt { fill: var(--c-rocket); }
[data-chapter="time-dilation"] .td-tc-ov .td-tc-flag { font-variant-numeric: tabular-nums; }
[data-chapter="time-dilation"] .td-tc-ov .is-faint { opacity: .45; }
[data-chapter="time-dilation"] .td-tc-leader { stroke-width: 1; opacity: .7; }
[data-chapter="time-dilation"] .td-tc-leader.is-lab { stroke: var(--c-lab); }
[data-chapter="time-dilation"] .td-tc-leader.is-rkt { stroke: var(--c-rocket); }
[data-chapter="time-dilation"] .td-tc-now { fill: none; stroke-width: 1.5; stroke-dasharray: 6 4; }
[data-chapter="time-dilation"] .td-tc-now.is-lab { stroke: var(--c-lab); }
[data-chapter="time-dilation"] .td-tc-now.is-rkt { stroke: var(--c-rocket); }
[data-chapter="time-dilation"] .td-tc-span { stroke: var(--c-inv); stroke-width: 9; stroke-linecap: round; opacity: .4; }
[data-chapter="time-dilation"] .td-tc-panel.is-rkt :is(.stx-layer-axes, .stx-axis-text) .stx-lab { display: none; }
[data-chapter="time-dilation"] .td-tc-card { padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-left: 4px solid var(--c-inv); border-radius: var(--r-m); background: var(--surface); font-size: .92rem; line-height: 1.5; }
[data-chapter="time-dilation"] .td-tc-card p { margin: 0; }
[data-chapter="time-dilation"] .td-tc-card-title { font-weight: 700; }
[data-chapter="time-dilation"] .td-tc-card ul { margin: var(--s-2) 0; padding-left: 1.2em; }
[data-chapter="time-dilation"] .td-tc-card li + li { margin-top: var(--s-1); }
[data-chapter="time-dilation"] .td-tc-card .is-inv { color: var(--c-inv); list-style: none; margin-left: -1.2em; }
[data-chapter="time-dilation"] .td-tc-gloss { font-size: .85em; font-weight: 400; color: var(--ink-muted); }
[data-chapter="time-dilation"] .td-tc-last { color: var(--ink-muted); }
[data-chapter="time-dilation"] :is(.td-tc-status, .td-tc-hint) { margin: 0; font-size: .85rem; color: var(--ink-muted); }
[data-chapter="time-dilation"] .td-tc-caption { caption-side: top; text-align: left; padding: 4px 8px; font-size: .75rem; color: var(--ink-muted); }
/* Pre-mount height reservations (shared --lab-reserve mechanism in widgets.css: dropped once the lab is .is-mounted). */
[data-chapter="time-dilation"] #lab-time-dilation-1 { --lab-reserve: 690px; }
[data-chapter="time-dilation"] #lab-time-dilation-2 { --lab-reserve: 1190px; }
[data-chapter="time-dilation"] #lab-time-dilation-3 { --lab-reserve: 715px; }
@media (max-width: 899px) {
  [data-chapter="time-dilation"] #lab-time-dilation-1 { --lab-reserve: 1060px; }
  [data-chapter="time-dilation"] #lab-time-dilation-2 { --lab-reserve: 1160px; }
}
@media (max-width: 722px) {
  [data-chapter="time-dilation"] #lab-time-dilation-2 { --lab-reserve: 1900px; }
}
@media (max-width: 520px) {
  [data-chapter="time-dilation"] #lab-time-dilation-1 { --lab-reserve: 1190px; }
  [data-chapter="time-dilation"] #lab-time-dilation-2 { --lab-reserve: 1760px; }
  [data-chapter="time-dilation"] #lab-time-dilation-3 { --lab-reserve: 860px; }
}
[data-chapter="time-dilation"] .td-gauge-chart { width: 100%; overflow: hidden; }
[data-chapter="time-dilation"] .td-gauge-svg { display: block; max-width: 100%; height: auto; margin: 0 auto; touch-action: pan-y; }
[data-chapter="time-dilation"] .td-gauge-cmp { display: block; max-width: 100%; height: auto; margin: var(--s-2) auto 0; }
[data-chapter="time-dilation"] .td-gauge-bar-exact { stroke: var(--c-lab); stroke-width: 1.25; }
[data-chapter="time-dilation"] .td-gauge-bar-short { stroke: var(--ink-muted); stroke-width: 1.25; stroke-dasharray: 4 3; }
[data-chapter="time-dilation"] .td-gauge-cmp-title { font-size: 11px; letter-spacing: .04em; }
[data-chapter="time-dilation"] .td-gauge-tag { font-weight: 600; font-variant-numeric: tabular-nums; }
[data-chapter="time-dilation"] :is(.td-gauge-ylab,.td-gauge-xlab,.td-gauge-lm) { font-size: 11px; }
[data-chapter="time-dilation"] .td-gauge-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block: var(--s-3);
}
[data-chapter="time-dilation"] .td-gauge-preset {
  min-height: 36px;
  padding: .3em .75em;
  font-size: .8rem;
}
[data-chapter="time-dilation"] .td-gauge-preset[aria-pressed="true"] {
  background: var(--tint-lab);
  border-color: var(--c-lab);
  color: var(--ink);
}
[data-chapter="time-dilation"] .td-gauge-key {
  display: inline-grid;
  place-items: center;
  min-width: 1.35em;
  height: 1.35em;
  margin-right: .4em;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
[data-chapter="time-dilation"] .td-gauge .readouts { flex-wrap: wrap; }
[data-chapter="time-dilation"] .td-payoff {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--c-you);
  border-radius: var(--r-m);
  background: var(--tint-you);
  font-family: var(--font-sans);
  font-size: .9rem;
}
[data-chapter="time-dilation"] .td-payoff-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-weight: 700;
  color: var(--ink);
}
[data-chapter="time-dilation"] .td-payoff-wait { margin: 0; color: var(--ink-muted); }
[data-chapter="time-dilation"] .td-payoff-svg { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; margin-block: var(--s-3); }
[data-chapter="time-dilation"] .td-payoff-you { stroke: var(--c-you); stroke-width: 1.5; }
[data-chapter="time-dilation"] .td-payoff-text { margin: var(--s-2) 0 0; line-height: 1.55; }
[data-chapter="time-dilation"] .td-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}
[data-chapter="time-dilation"] .td-pair > svg {
  display: block;
  max-width: 100%;
  height: auto;
  font-family: var(--font-sans);
  overflow: visible;
}
[data-chapter="time-dilation"] .td-chip-line { font-family: var(--font-sans); font-size: .85rem; color: var(--ink-muted); }