/* ============================================
   Timeline Scan: /accuracy/ (page-scoped)

   Loaded after styles.css. Every selector is acc- prefixed so nothing
   here can be clobbered by (or clobber) the generic phone blocks in
   styles.css, which re-declare .hero / .section / .page-header near
   lines 5050 and 5170.

   Structure:
     .acc-glance   the short answer under the h1: three tiles, one big number each
     .acc-tile     one tile (dated / bare / faces tagged) with its meter
     .acc-controls series legend + the "show ranges" toggle
     .acc-table    the five-row benchmark matrix, one bar chart per cell
     .acc-bar      one arm inside one chart (none / roster / faces)
     .acc-tip      the single shared hover/focus tooltip
     .acc-decide   the "should I add family information?" cards
     .acc-method   how we measured it, with an icon tile per point
     .acc-orient   the orientation figure as one stat beside its story
     .acc-limits   honest limitations
   ============================================ */

.acc-page {
  --acc-good: var(--green);
  --acc-flat: var(--text-muted);
  --acc-paper: #FFFDF8;
  --acc-paper-edge: rgba(61, 43, 31, 0.18);
  /* Three series, one ordinal ramp: the more the archive was told, the
     deeper the bar. Position is fixed (none, roster, faces) and every bar
     carries a 1px edge, so the palette never has to carry meaning alone. */
  --acc-s1: #D9C08A;
  --acc-s2: #B08A2A;
  --acc-s3: #7A5807;
  --acc-edge: rgba(61, 43, 31, 0.4);
  --acc-hatch: rgba(255, 253, 248, 0.85);
  --acc-axis: #CFC4B0;
  --acc-whisk: #3D2B1F;
  --acc-whisk-halo: rgba(255, 253, 248, 0.8);
  --acc-wave-line: rgba(61, 43, 31, 0.5);
}

[data-theme="dark"] .acc-page {
  --acc-paper: #E8E1D4;
  --acc-paper-edge: rgba(0, 0, 0, 0.5);
  --acc-s1: #8A7647;
  --acc-s2: #B4913D;
  --acc-s3: #D4A843;
  --acc-edge: rgba(245, 240, 232, 0.35);
  --acc-hatch: rgba(28, 25, 23, 0.8);
  --acc-axis: #4A423A;
  --acc-whisk: #F5F0E8;
  --acc-whisk-halo: rgba(28, 25, 23, 0.8);
  --acc-wave-line: rgba(245, 240, 232, 0.55);
}

/* Wider than the site default so five rows x four columns still breathe. */
.acc-page .acc-wide {
  max-width: 1200px;
}

/* ---------- Shared print treatment ---------- */
.acc-print {
  display: block;
  background: var(--acc-paper);
  padding: 4px;
  box-shadow: 0 2px 10px var(--acc-paper-edge);
  line-height: 0;
}

.acc-print img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 1. At a glance ---------- */
.acc-glance {
  max-width: 1100px;
  margin: 0 auto;
}

.acc-glance__verdict {
  max-width: 780px;
  margin: 0 auto 1.8rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.acc-glance__verdict strong {
  display: block;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}

/* Three tiles: the photo shows its date / it does not / same photos, faces
   tagged. One big number each; everything else on the page is detail. */
.acc-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.acc-tile {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1.1rem 1.2rem 1.25rem;
}

.acc-tile--tagged {
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-light) 0, var(--card-bg) 60%);
}

.acc-tile__print {
  position: relative;
  display: block;
  background: var(--acc-paper);
  padding: 4px;
  box-shadow: 0 2px 10px var(--acc-paper-edge);
  line-height: 0;
  margin: 0 0 0.95rem;
}

.acc-tile__print img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* The camera date sits in the bottom-right corner; crop from the left. */
.acc-tile[data-tile="dated"] .acc-tile__print img {
  object-position: right center;
}

.acc-tile__chip {
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #FFFDF8;
  background: rgba(38, 28, 20, 0.82);
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
}

.acc-tile__chip--none {
  right: 0.45rem;
  left: auto;
}

.acc-tile__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 0.35rem;
  color: var(--text-primary);
}

.acc-tile__what {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 1rem;
  min-height: 2.55em;
}

.acc-tile__big {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: auto 0 0.5rem;
}

.acc-tile__big b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.9rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.acc-tile--tagged .acc-tile__big b {
  color: var(--accent);
}

.acc-tile__big span {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* The measurement window is the one thing that differs between the three
   tiles (within a year vs within five years), so lift it out of the caption
   and keep it the same weight in all three: the eye compares them directly. */
.acc-tile__big em {
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

/* A plain meter under the big number: the fill is the score, a lighter band
   is the range across rows, and a tick is the untagged score it moved from. */
.acc-meter {
  --v: 0;
  --hi: var(--v);
  --was: -1;
  position: relative;
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--border-light);
  overflow: hidden;
  margin: 0 0 1rem;
}

.acc-meter__fill,
.acc-meter__band,
.acc-meter__was {
  position: absolute;
  top: 0;
  bottom: 0;
}

.acc-meter__fill {
  left: 0;
  width: calc(var(--v) * 100%);
  background: var(--acc-s2);
  border-radius: 999px;
}

.acc-tile--tagged .acc-meter__fill {
  background: var(--accent);
}

.acc-meter__band {
  left: calc(var(--v) * 100%);
  width: calc((var(--hi) - var(--v)) * 100%);
  background: var(--acc-s1);
}

.acc-meter__was {
  left: calc(var(--was) * 100% - 1px);
  width: 2px;
  background: var(--acc-whisk);
}

.acc-tile__more {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.acc-tile__more li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.acc-tile__more b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--text-primary);
}

.acc-tile__more span {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.acc-tile__more em {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

/* Side by side, the three tiles share one set of rows (subgrid), so the
   titles, the big numbers, the meters and the two small stats each sit on a
   shared line. Without it, a caption that wraps to an extra line in one tile
   drags that tile's number out of step with the other two by ~20 to 40px. */
@media (min-width: 901px) {
  .acc-tiles {
    grid-template-rows: repeat(6, auto);
  }
  .acc-tile {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  /* The shared rows already do the pushing down, so the big number starts at
     the top of its row: three numbers on one line even if a caption wraps. */
  .acc-tile__big {
    margin-top: 0;
  }
}

.acc-glance__cta {
  text-align: center;
  margin: 1.5rem 0 0;
}

.acc-glance__jump {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.acc-glance__jump:hover,
.acc-glance__jump:focus-visible {
  background: var(--accent);
  color: #FFFDF8;
}

[data-theme="dark"] .acc-glance__jump:hover,
[data-theme="dark"] .acc-glance__jump:focus-visible {
  color: #241F1B;
}

.acc-glance__claim {
  max-width: 880px;
  margin: 1.5rem auto 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.acc-page .acc-intro {
  max-width: 720px;
  margin: 0 auto 2rem;
}

/* ---------- 2. Controls ---------- */
.acc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 1.4rem;
}

/* Which bar is which. Sits next to the ranges toggle, above the matrix. */
.acc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
}

.acc-key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.acc-key i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-color: var(--acc-s, var(--acc-s1));
  box-shadow: inset 0 0 0 1px var(--acc-edge);
}

.acc-key--none i {
  --acc-s: var(--acc-s1);
}

.acc-key--roster i {
  --acc-s: var(--acc-s2);
}

.acc-key--faces i {
  --acc-s: var(--acc-s3);
}

.acc-key--same i {
  --acc-s: var(--acc-s2);
  background-image: repeating-linear-gradient(
    135deg,
    var(--acc-hatch) 0 2px,
    rgba(0, 0, 0, 0) 2px 5px
  );
}

.acc-ranges {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  cursor: pointer;
}

.acc-ranges::before {
  content: '\002B';
  margin-right: 0.4rem;
  color: var(--accent);
  font-weight: 700;
}

.acc-ranges[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--text-primary);
}

.acc-ranges[aria-pressed="true"]::before {
  content: '\2212';
}

/* ---------- 3. The matrix ---------- */
.acc-tablewrap {
  /* Sideways scrolling for the band where the 900px floor stops fitting
     (821 to 979px). Above that the wrap drops its overflow entirely, because
     a scroll container here would capture the sticky column headers and pin
     them to this box instead of to the viewport. See the 980px block. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.acc-table {
  width: 100%;
  /* Six charts across need a floor; under it the wrap scrolls sideways
     rather than crushing the bars. Below 820px the table stops being a
     table altogether and the floor is lifted. */
  min-width: 900px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* `clip` (not `hidden`) keeps the rounded corners without turning the table
     into a scroll container, so the sticky column headers resolve against the
     viewport. */
  overflow: clip;
}

.acc-tablenote {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0.9rem 0 0;
}

.acc-table thead th {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  text-align: center;
  vertical-align: bottom;
  padding: 0.9rem 0.7rem;
  background: var(--bg-accent);
  border-bottom: 1px solid var(--border);
}

.acc-table thead th:first-child {
  text-align: left;
  width: 25%;
}

.acc-table thead th[data-m] {
  width: 12.5%;
  padding: 0.9rem 0.35rem;
}

.acc-table thead th small {
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.acc-table thead th[data-m="mae_years"] small {
  color: var(--accent);
}

.acc-grouprow th {
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--bg-warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.acc-group--bare .acc-grouprow th {
  background: var(--accent-light);
}

.acc-grouprow__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
}

.acc-grouprow__sub {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.acc-row + .acc-row .acc-rowhead,
.acc-row + .acc-row .acc-cell {
  border-top: 1px solid var(--border-light);
}

.acc-rowhead {
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  padding: 1.1rem 1rem;
}

.acc-rowhead__badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  margin-bottom: 0.4rem;
}

.acc-rowhead__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.acc-rowhead__def {
  display: block;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0.3rem 0 0.75rem;
}

.acc-rowhead__meta {
  display: block;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 0.7rem;
}

/* One print, optionally flippable (rows 1 to 3). */
.acc-example {
  margin: 0;
  max-width: 300px;
}

.acc-example__print {
  position: relative;
  display: block;
  background: var(--acc-paper);
  padding: 4px;
  box-shadow: 0 2px 10px var(--acc-paper-edge);
  line-height: 0;
}

.acc-example__print[hidden] {
  display: none;
}

.acc-example__img {
  display: block;
  width: 100%;
  height: auto;
}

.acc-example__chip {
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #FFFDF8;
  background: rgba(38, 28, 20, 0.82);
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
}

.acc-example__flip {
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

.acc-example__flip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* Four bare prints in a strip (rows 4 and 5). */
.acc-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin: 0;
  max-width: 300px;
}

.acc-strip__print {
  position: relative;
  display: block;
  background: var(--acc-paper);
  padding: 3px;
  box-shadow: 0 2px 8px var(--acc-paper-edge);
  line-height: 0;
}

.acc-strip__print img {
  display: block;
  width: 100%;
  height: auto;
}

.acc-strip__pos {
  position: absolute;
  right: -3px;
  top: -6px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.6rem;
  line-height: 1;
  color: #FFFDF8;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.22rem 0.35rem;
}

[data-theme="dark"] .acc-strip__pos {
  color: #241F1B;
}

.acc-strip__note {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ---------- 3b. One benchmark cell = one three-bar chart ---------- */
.acc-cell {
  text-align: center;
  vertical-align: middle;
  padding: 1.1rem 0.35rem;
}

.acc-cell[data-m="mae_years"] {
  background: var(--accent-light);
}

.acc-chart {
  /* --plot is the height of the value axis; every bar height is a share of
     it. --max is the top of the axis in the metric's own units: the five
     percentage charts share 0 to 1, the typical miss shares 0 to 3.5 years
     (its widest 95% interval reaches 3.3). */
  --plot: 108px;
  --bw: 30px;
  --gap: 6px;
  --numh: 0.95rem;
  --footh: 0.85rem;
  --max: 1;
  display: block;
}

.acc-chart[data-scale="years"] {
  --max: 3.5;
}

.acc-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--gap);
  height: calc(var(--plot) + var(--numh) + var(--footh));
}

/* The shared baseline every bar stands on. */
.acc-bars::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--footh);
  height: 1px;
  background: var(--acc-axis);
}

.acc-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: var(--bw);
  cursor: default;
}

.acc-bar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.acc-bar__num {
  font-family: var(--font-ui);
  font-size: 0.63rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
  margin-bottom: 3px;
  transition: margin-bottom 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.acc-bar__num-own {
  display: none;
}

.acc-table.is-ranges .acc-bar__num-same {
  display: none;
}

.acc-table.is-ranges .acc-bar__num-own {
  display: inline;
}

.acc-bar__col {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--v) / var(--max) * var(--plot));
  min-height: 4px;
  border-radius: 2px 2px 0 0;
  background-color: var(--acc-s);
  box-shadow: inset 0 0 0 1px var(--acc-edge);
  transition: height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.acc-bar--none {
  --acc-s: var(--acc-s1);
}

.acc-bar--roster {
  --acc-s: var(--acc-s2);
}

.acc-bar--faces {
  --acc-s: var(--acc-s3);
}

/* Not an independent measurement: with ranges off this bar is drawn level
   with the no-family-information bar and repeats its number, so it is
   hatched and carries an equals sign under the baseline. */
.acc-bar--same .acc-bar__col {
  background-image: repeating-linear-gradient(
    135deg,
    var(--acc-hatch) 0 2px,
    rgba(0, 0, 0, 0) 2px 5px
  );
}

/* Ranges on: every bar moves to its own measured mean, the number follows,
   and the 95% interval and five-run spread are drawn on top of it. */
.acc-table.is-ranges .acc-bar__col {
  height: calc(var(--vr) / var(--max) * var(--plot));
}

.acc-table.is-ranges .acc-bar__num {
  margin-bottom: calc((var(--top) - var(--vr)) / var(--max) * var(--plot) + 4px);
}

.acc-bar__wave,
.acc-bar__ci {
  display: none;
}

.acc-table.is-ranges .acc-bar__wave,
.acc-table.is-ranges .acc-bar__ci {
  display: block;
}

/* The five runs landed between these two dashed rules. Lines rather than a
   filled band: a block sitting on top of the bar reads as part of it. */
.acc-bar__wave {
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: calc(var(--wlo) / var(--max) * var(--plot));
  height: calc((var(--whi) - var(--wlo)) / var(--max) * var(--plot));
  min-height: 1px;
  border-top: 1px dashed var(--acc-wave-line);
  border-bottom: 1px dashed var(--acc-wave-line);
  box-sizing: content-box;
}

/* The 95% interval, capped top and bottom. */
.acc-bar__ci {
  position: absolute;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  bottom: calc(var(--lo) / var(--max) * var(--plot));
  height: calc((var(--hi) - var(--lo)) / var(--max) * var(--plot));
  background: var(--acc-whisk);
  box-shadow: 0 0 0 1px var(--acc-whisk-halo);
}

.acc-bar__ci::before,
.acc-bar__ci::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 11px;
  height: 2px;
  margin-left: -5.5px;
  background: var(--acc-whisk);
  box-shadow: 0 0 0 1px var(--acc-whisk-halo);
}

.acc-bar__ci::before {
  top: 0;
}

.acc-bar__ci::after {
  bottom: 0;
}

/* Under the baseline: the change against no family information. */
.acc-bar__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--footh);
  margin-top: 1px;
}

.acc-bar__mark {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--acc-good);
}

.acc-bar--down .acc-bar__mark {
  color: var(--red);
}

.acc-bar__mark--same {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.acc-table.is-ranges .acc-bar__mark--same {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .acc-bar__col,
  .acc-bar__num {
    transition: none;
  }
}

/* ---------- 3c. The shared tooltip ---------- */
.acc-tip {
  position: fixed;
  z-index: 90;
  display: none;
  max-width: 250px;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  line-height: 1.45;
  text-align: left;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

.acc-tip.is-on {
  display: block;
}

.acc-tip b {
  display: block;
  font-size: 0.78rem;
  color: var(--text-primary);
}

.acc-tip__score {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0.1rem 0 0.15rem;
}

.acc-tip__where {
  display: block;
}

.acc-tip__delta {
  display: block;
  font-weight: 600;
  color: var(--acc-good);
  margin-top: 0.25rem;
}

.acc-tip__delta--flat {
  font-weight: 400;
  color: var(--acc-flat);
}

.acc-tip__delta--down {
  color: var(--red);
}

.acc-tip__range,
.acc-tip__wave {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.acc-tip__range {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
}

/* ---------- 4. Definitions under the table ---------- */
.acc-defs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.acc-def {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
}

.acc-def__term {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.acc-def__body {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- 5. Should I add family information? ---------- */
.acc-decide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-bottom: 2.2rem;
}

.acc-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem;
}

.acc-card--lever {
  border-color: var(--accent);
  border-width: 2px;
}

.acc-card__verdict {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-warm);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  margin-bottom: 0.6rem;
}

.acc-card--lever .acc-card__verdict {
  color: var(--accent);
  background: var(--accent-light);
}

.acc-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 0.45rem;
  color: var(--text-primary);
}

.acc-card__body {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 0.8rem;
}

.acc-card__list {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  line-height: 1.5;
}

.acc-card__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.acc-card__list li:first-child {
  border-top: 0;
}

.acc-card__list b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.acc-card__foot {
  margin: auto 0 0;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Side by side, the three cards share one set of rows, the way the tiles at
   the top of the page do. The four benchmarks are there to be read across the
   cards, so a body paragraph that runs to an extra line in one card must not
   shift its numbers out of line with the other two. */
@media (min-width: 901px) {
  /* verdict, title, body, four benchmark rows, foot. */
  .acc-decide {
    grid-template-rows: repeat(8, auto);
  }
  .acc-card {
    display: grid;
    grid-row: span 8;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  /* The four benchmarks take a row each, so a label that wraps in one card
     leaves the benchmarks under it where they are in the other two. */
  .acc-card__list {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  /* The pill keeps its shrink-to-fit width, which flex gave it for free. */
  .acc-card__verdict {
    justify-self: start;
  }
}

/* The two demos: typed roster form, and the same bare print with faces. */
.acc-demos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.4rem;
}

.acc-demo {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem;
}

.acc-demo__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0;
  color: var(--text-primary);
}

.acc-demo__note {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.acc-form {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
}

.acc-form__title {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 0.6rem;
  color: var(--text-primary);
}

.acc-form__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  background: var(--card-bg);
}

.acc-form__name {
  color: var(--text-primary);
  font-weight: 600;
}

.acc-form__year {
  color: var(--text-muted);
}

.acc-form__hint {
  margin: 0.5rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.acc-faces {
  position: relative;
  display: block;
  background: var(--acc-paper);
  padding: 5px;
  box-shadow: 0 2px 12px var(--acc-paper-edge);
  line-height: 0;
}

.acc-faces img {
  display: block;
  width: 100%;
  height: auto;
}

.acc-facebox {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 253, 248, 0.55);
}

.acc-facebox i {
  position: absolute;
  left: 50%;
  top: -0.35rem;
  transform: translate(-50%, -100%);
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.66rem;
  line-height: 1.1;
  white-space: nowrap;
  color: #FFFDF8;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.24rem 0.5rem;
}

[data-theme="dark"] .acc-facebox i {
  color: #241F1B;
}

/* The boy sits low and centre; his chip would collide with the mother's,
   so it hangs below his box instead of above it. */
.acc-facebox--below i {
  top: auto;
  bottom: -0.35rem;
  transform: translate(-50%, 100%);
}

.acc-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  margin-top: 1.6rem;
}

.acc-order__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
  color: var(--text-primary);
}

.acc-order__body {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.acc-order__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  font-family: var(--font-ui);
  text-align: center;
}

.acc-order__side {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.6rem;
  background: var(--bg-secondary);
}

.acc-order__side--win {
  background: var(--accent-light);
  border-color: var(--accent);
}

.acc-order__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--text-primary);
}

.acc-order__lab {
  display: block;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-top: 0.3rem;
}

.acc-pin {
  margin-top: 1.4rem;
  padding: 0.95rem 1.15rem;
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* ---------- 6. Method, limits ---------- */
.acc-method {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.acc-method li {
  list-style: none;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.acc-method b {
  display: block;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.acc-limits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.acc-limits li {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.05rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.acc-limits b {
  color: var(--text-primary);
}

.acc-method__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--accent);
  margin-bottom: 0.7rem;
}

.acc-method__icon svg {
  width: 24px;
  height: 24px;
}

.acc-orient {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.5rem;
}

.acc-orient__stat {
  text-align: center;
}

.acc-orient__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.acc-orient__stat span {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-primary);
  margin-top: 0.45rem;
}

.acc-orient__stat small {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.acc-orient__text p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 0.7rem;
}

.acc-orient__text p:last-child {
  margin-bottom: 0;
}

.acc-compare {
  margin: 1.2rem 0 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ---------- Responsive ---------- */

/* From 972px up the table's 900px floor fits inside the container, so the wrap
   has nothing to scroll sideways and can drop its overflow. That is what lets
   the column headers stick: a scroll container on the wrap would anchor them to
   that box, which never scrolls vertically, and they would ride away with the
   rest of the table. Below this the wrap keeps its sideways scroll and the
   headers stay in the flow. */
@media (min-width: 980px) {
  .acc-tablewrap {
    overflow: visible;
  }
  /* The rows are tall (a print, a definition, six charts), so the benchmark
     names have to follow the reader down or the bars lose their labels. They
     park flush under the sticky nav: 4rem of it (root font-size is 18px) while
     the links sit behind the hamburger, 4.27rem once they lay out in a row at
     1024px up. The nav's higher z-index covers the hairline overlap, so no gap
     shows. */
  .acc-table thead th {
    position: sticky;
    top: 4rem;
    z-index: 3;
  }
}

@media (min-width: 1024px) {
  .acc-table thead th {
    top: 4.27rem;
  }
}

@media (max-width: 1120px) {
  .acc-example,
  .acc-strip {
    max-width: 240px;
  }
  .acc-chart {
    --plot: 96px;
    --bw: 28px;
    --gap: 5px;
  }
}

@media (max-width: 900px) {
  .acc-legend {
    width: 100%;
    border-radius: var(--radius-md);
    justify-content: center;
  }
  .acc-ranges {
    width: 100%;
  }
  /* One tile per row, laid out sideways: the print on the left, the
     numbers on the right, so a full-width 4:3 print never towers over them. */
  .acc-tiles {
    grid-template-columns: 1fr;
  }
  .acc-tile {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: start;
  }
  .acc-tile__print {
    grid-row: 1 / span 5;
    margin: 0;
  }
  .acc-tile__what {
    min-height: 0;
  }
  .acc-tile__big {
    margin-top: 0;
  }
  .acc-orient {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .acc-decide {
    grid-template-columns: 1fr;
  }
  .acc-demos {
    grid-template-columns: 1fr;
  }
  .acc-order {
    grid-template-columns: 1fr;
  }
}

/* Phone: the table stops being a table. Each row becomes a card, the row
   header sits on top, and the six charts fall into a grid under it, each
   with its benchmark named above it. Nothing scrolls sideways. */
@media (max-width: 820px) {
  .acc-tablewrap {
    overflow-x: visible;
  }
  .acc-table,
  .acc-table thead,
  .acc-table tbody,
  .acc-table tr,
  .acc-table th,
  .acc-table td {
    display: block;
    width: auto;
  }
  .acc-table {
    min-width: 0;
    table-layout: auto;
    border: 0;
    background: transparent;
    border-radius: 0;
  }
  .acc-table thead {
    display: none;
  }
  .acc-grouprow th {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin: 1.2rem 0 0.8rem;
  }
  .acc-group:first-of-type .acc-grouprow th {
    margin-top: 0;
  }
  .acc-table .acc-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
  }
  .acc-row + .acc-row .acc-rowhead,
  .acc-row + .acc-row .acc-cell {
    border-top: 0;
  }
  .acc-table .acc-rowhead {
    grid-column: 1 / -1;
    padding: 1rem 1rem 0.9rem;
  }
  .acc-example,
  .acc-strip {
    max-width: 260px;
  }
  .acc-table .acc-cell {
    padding: 0.75rem 0.3rem 0.85rem;
    border-top: 1px solid var(--border-light);
    width: auto;
  }
  .acc-table .acc-cell:nth-of-type(odd) {
    border-right: 1px solid var(--border-light);
  }
  .acc-table .acc-cell::before {
    content: attr(data-label);
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 0.45rem;
  }
  .acc-table .acc-cell[data-m="mae_years"]::after {
    content: 'years, lower is better';
    display: block;
    font-size: 0.66rem;
    line-height: 1.3;
    color: var(--accent);
    margin-top: 0.2rem;
  }
  .acc-chart {
    --plot: 92px;
    --bw: 30px;
    --gap: 8px;
  }
}

/* Tablet portrait: the card is wide enough for three charts abreast. */
@media (min-width: 601px) and (max-width: 820px) {
  .acc-table .acc-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .acc-table .acc-cell:nth-of-type(odd) {
    border-right: 0;
  }
  .acc-table .acc-cell:nth-of-type(3n + 1),
  .acc-table .acc-cell:nth-of-type(3n + 2) {
    border-right: 1px solid var(--border-light);
  }
  .acc-example,
  .acc-strip {
    max-width: 300px;
  }
}

@media (max-width: 640px) {
  .acc-glance__verdict {
    font-size: 1.15rem;
  }
  .acc-glance__verdict strong {
    font-size: 1.4rem;
  }
  .acc-tile__big b {
    font-size: 2.5rem;
  }
  .acc-legend {
    font-size: 0.74rem;
    gap: 0.35rem 0.8rem;
    padding: 0.5rem 0.7rem;
  }
  .acc-order__pair {
    grid-template-columns: 1fr;
  }
}

/* Narrow phones: the tile stacks again, print on top at a sensible width. */
@media (max-width: 520px) {
  .acc-tile {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  .acc-tile__print {
    grid-row: auto;
    max-width: 260px;
    margin: 0 0 0.85rem;
  }
}

/* Very narrow phones: shave the bars so two charts still sit side by side
   with their numbers legible. */
@media (max-width: 400px) {
  .acc-chart {
    --plot: 84px;
    --bw: 27px;
    --gap: 6px;
  }
}