/* ==========================================================================
   /accessibility/ - the measured-access page.

   The page is two big data tables and the honest margins around them, so the
   work here is table legibility on a dark ground: a sticky site column that
   survives a 390px viewport, sortable headings that look like controls, and
   a surface bar that never carries meaning by colour alone.

   Tokens only. Nothing here redefines a :root value or touches a shared
   component; everything is scoped to .a11y-* or to the two tables by id.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.a11y-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 36px;
  padding-bottom: 44px;
  background: radial-gradient(ellipse 900px 420px at 30% -10%, rgba(99, 180, 171, .09), rgba(99, 180, 171, 0) 62%);
}
.a11y-hero__text {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.a11y-hero__title {
  font-size: var(--text-h1);
  line-height: 1.06;
  color: var(--color-stone-bright);
  text-wrap: balance;
}
.a11y-hero .lede { font-size: 17.5px; }
.a11y-hero .chip-row { padding-top: 4px; }

.a11y-jump {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 22px;
  border-left: 1px solid rgba(99, 180, 171, .28);
}
.a11y-jump a {
  font: 400 var(--text-mono) var(--font-data);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-mono-dim);
  text-decoration: none;
  padding: 7px 0;
}
.a11y-jump a:hover { color: var(--color-glacier-bright); }

/* --------------------------------------------------------------------------
   Section furniture
   -------------------------------------------------------------------------- */
.a11y-band { padding-top: 0; padding-bottom: 66px; }
.a11y-band .section-head { margin-bottom: 18px; }

.a11y-prose {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 26px;
}
.a11y-prose--small { font-size: 14.5px; margin-top: 22px; margin-bottom: 0; }

.a11y-callout {
  max-width: 820px;
  margin-bottom: 26px;
  padding: 16px 20px;
  border-left: 3px solid var(--color-glacier-deep);
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
  background: rgba(29, 110, 103, .16);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-tertiary);
}
.a11y-callout strong { color: var(--color-stone-bright); }

.a11y-foot {
  max-width: 900px;
  margin-top: 18px;
  font: 400 11.5px/1.75 var(--font-data);
  color: var(--color-mono-faint);
}

/* --------------------------------------------------------------------------
   The three measured facts
   -------------------------------------------------------------------------- */
.a11y-facts { padding-top: 30px; padding-bottom: 20px; }
.a11y-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
}
.a11y-fact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 26px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(160deg, rgba(99, 180, 171, .1), rgba(99, 180, 171, 0) 50%),
    var(--color-pool);
  border: 1px solid rgba(99, 180, 171, .16);
}
.a11y-fact--flag {
  background:
    radial-gradient(ellipse 460px 260px at 90% -12%, rgba(200, 86, 63, .24), rgba(200, 86, 63, 0) 70%),
    var(--color-pool-deep);
  border-color: rgba(200, 86, 63, .3);
}
.a11y-fact__label {
  font: 400 var(--text-mono-label) var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-glacier);
}
.a11y-fact--flag .a11y-fact__label { color: var(--color-flag-tint); }
.a11y-fact__number {
  font: 700 var(--text-data-xl) var(--font-data);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-stone-bright);
}
.a11y-fact--flag .a11y-fact__number { color: var(--color-flag-tint-bright); }
.a11y-fact__sub {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}
.a11y-fact__quote {
  margin: 6px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--color-mercantile-dark);
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
  background: rgba(8, 16, 13, .34);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-tertiary);
}
.a11y-fact__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.a11y-fact__list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.a11y-fact__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(237, 233, 224, .1);
}
.a11y-fact__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.a11y-fact__list a {
  font: 600 14.5px var(--font-body);
  color: var(--color-stone-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(159, 224, 214, .35);
  align-self: flex-start;
}
.a11y-fact__list a:hover { color: var(--color-glacier-bright); }
.a11y-fact__list span {
  font: 400 11.5px/1.55 var(--font-data);
  color: var(--color-mono-faint);
}
.a11y-fact__link {
  margin-top: auto;
  padding-top: 12px;
  font: 400 var(--text-mono) var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-glacier-bright);
  text-decoration: none;
}
.a11y-fact__link:hover { color: var(--color-stone-bright); }
.a11y-fact--flag .a11y-fact__link { color: var(--color-flag-tint-bright); }

/* --------------------------------------------------------------------------
   Sort bar - only ever visible when the script behind it has run
   -------------------------------------------------------------------------- */
.sortbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  background: rgba(23, 51, 45, .5);
  border: 1px solid rgba(99, 180, 171, .14);
}
.sortbar[hidden] { display: none; }
.sortbar__hint {
  flex: 1 1 260px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.sortbar .btn { padding: 8px 16px; font-size: 13px; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.a11y-scroll {
  overflow-x: auto;
  /* the sticky first column needs a paint context that does not clip it */
  overflow-y: visible;
  border-radius: var(--radius-btn);
}
.a11y-scroll:focus-visible {
  outline: 3px solid var(--color-glacier);
  outline-offset: 2px;
}

.a11y-table { min-width: 1120px; }
/* Four yes/no columns against a name. Left to fill 1360 the name column takes
   half the page and the answers drift off to the right, so it is capped. */
.a11y-table--compact { min-width: 700px; max-width: 940px; }
.a11y-table--compact thead th:nth-child(1) { width: 232px; }
.a11y-table--compact thead th:nth-child(2) { width: 118px; }
.a11y-table--compact thead th:nth-child(n+3) { width: 116px; }
.a11y-table--compact tbody th[scope="row"] { padding-right: 20px; }

.a11y-table caption {
  /* The caption sits inside the scroll container at the table's left edge, so
     it has to fit the viewport or half of it is only readable after scrolling
     sideways. Capped to the visible column rather than to the table. */
  max-width: min(780px, calc(100vw - 2 * var(--space-gutter)));
  white-space: normal;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: .02em;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-mono-faint);
}
.a11y-table thead th {
  white-space: normal;
  vertical-align: bottom;
  padding-right: 16px;
  line-height: 1.4;
}
.a11y-table tbody th,
.a11y-table tbody td { vertical-align: top; }

.a11y-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 2;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  font: 400 var(--text-body) var(--font-body);
  color: var(--color-text);
  background: var(--color-spruce-black);
  border-right: 1px solid rgba(237, 233, 224, .12);
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid rgba(237, 233, 224, .09);
}
.a11y-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--color-spruce-black);
  border-right: 1px solid rgba(237, 233, 224, .12);
  padding-left: 0;
}
.a11y-table tbody th[scope="row"] a {
  display: block;
  font: 600 15px var(--font-body);
  color: var(--color-stone-bright);
  text-decoration: none;
}
.a11y-table tbody th[scope="row"] a:hover {
  color: var(--color-glacier-bright);
  text-decoration: underline;
}
.a11y-table__where {
  display: block;
  margin-top: 3px;
  font: 400 9.5px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
}
.a11y-table tbody tr:hover td { background: rgba(29, 64, 56, .38); }
/* The row header is sticky, so cells scroll underneath it. Its hover state has
   to stay opaque or the columns passing behind show through the site name. */
.a11y-table tbody tr:hover th[scope="row"] {
  background:
    linear-gradient(rgba(29, 64, 56, .38), rgba(29, 64, 56, .38)),
    var(--color-spruce-black);
}

.a11y-table td { font-size: 13.5px; line-height: 1.5; }
.a11y-table__type { color: var(--color-text-tertiary); }
.a11y-table__fork {
  font: 400 10px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-mono-dim);
}
.a11y-table .num { font-size: 13.5px; }

.a11y-table .is-yes { color: var(--color-glacier-bright); }
.a11y-table .is-no,
.a11y-table .is-none { color: var(--color-mono-faint); }
.a11y-table .is-flag { color: var(--color-flag-tint-bright); font-weight: 700; }
.a11y-table__flag {
  display: inline-block;
  margin-top: 4px;
  font: 400 9px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-flag-tint);
  border: 1px solid rgba(232, 167, 150, .34);
  border-radius: 3px;
  padding: 2px 5px;
}

/* Column sizing. Widths are minimums; the browser still balances the rest. */
#measured-table thead th:nth-child(1) { min-width: 152px; }
#measured-table thead th:nth-child(2) { min-width: 228px; }
#measured-table thead th:nth-child(3) { min-width: 138px; }
#measured-table thead th:nth-child(4) { min-width: 156px; }
#measured-table thead th:nth-child(n+5) { min-width: 92px; }

#observed-table { min-width: 1120px; }
#observed-table thead th:nth-child(1) { min-width: 152px; }
#observed-table thead th:nth-child(2) { min-width: 116px; }
#observed-table thead th:nth-child(3) { min-width: 176px; }
#observed-table thead th:nth-child(4) { min-width: 206px; }
#observed-table thead th:nth-child(5) { min-width: 104px; }
#observed-table thead th:nth-child(6) { min-width: 116px; }
#observed-table thead th:nth-child(7) { min-width: 104px; }
#observed-table thead th:nth-child(8) { min-width: 96px; }

/* Sortable headings ------------------------------------------------------- */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.th-sort:hover { color: var(--color-glacier-bright); }
.th-sort__arrow::after {
  content: '\2195';
  font-size: 11px;
  opacity: .4;
}
.a11y-table th.is-sorted .th-sort { color: var(--color-glacier-bright); }
.a11y-table th[aria-sort="ascending"] .th-sort__arrow::after { content: '\2191'; opacity: 1; }
.a11y-table th[aria-sort="descending"] .th-sort__arrow::after { content: '\2193'; opacity: 1; }

/* Surface breakdown ------------------------------------------------------- */
.surfbar {
  display: flex;
  width: 132px;
  height: 9px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(237, 233, 224, .1);
}
.surfbar__seg { display: block; height: 100%; background: var(--color-mono-dim); }
.surfbar__seg--hard { background: var(--color-glacier); }
.surfbar__seg--firm { background: var(--color-glacier-deep); }
.surfbar__seg--paved { background: #93A8A2; }
.surfbar__seg--gravel { background: #B0A99A; }
.surfbar__seg--soft { background: #C8A87C; }
.surfbar__key {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin-top: 6px;
  font: 400 9.5px var(--font-data);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
}
.surfbar__key b { color: var(--color-stone-bright); font-weight: 700; }

/* --------------------------------------------------------------------------
   Definition cards
   -------------------------------------------------------------------------- */
.a11y-defs { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.a11y-def { padding: 22px 24px; gap: 8px; }
.a11y-def h3 { font-size: 18px; color: var(--color-stone-bright); }
.a11y-def p { font-size: 14px; line-height: 1.6; color: var(--color-text-tertiary); }

/* --------------------------------------------------------------------------
   Coverage gaps
   -------------------------------------------------------------------------- */
.a11y-gaps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-card);
  margin-bottom: 34px;
}
.a11y-gap { padding: 28px 30px; gap: 12px; }
.a11y-gap h3 { font-size: 20px; color: var(--color-stone-bright); }
.a11y-gap__lede { font-size: 14.5px; line-height: 1.65; color: var(--color-text-secondary); }
.a11y-gap__list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.a11y-gap__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid rgba(237, 233, 224, .1);
}
.a11y-gap__list li:last-child { border-bottom: 0; }
.a11y-gap__list a {
  font: 600 15px var(--font-body);
  color: var(--color-stone-bright);
  text-decoration: none;
}
.a11y-gap__list a:hover { color: var(--color-glacier-bright); text-decoration: underline; }
.a11y-gap__note {
  font: 400 10px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Audio index
   -------------------------------------------------------------------------- */
.a11y-audio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: var(--gap-card);
}
.a11y-audio {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 17px 19px;
  border-radius: var(--radius-band);
  background: var(--color-pool);
  border: 1px solid transparent;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.a11y-audio:hover {
  border-color: rgba(159, 224, 214, .35);
  transform: translateY(-2px);
}
.a11y-audio__where {
  font: 400 var(--text-mono-label) var(--font-data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-glacier-bright);
}
.a11y-audio__name { font: 600 16px var(--font-body); color: var(--color-stone-bright); }

/* --------------------------------------------------------------------------
   Commitments
   -------------------------------------------------------------------------- */
.a11y-commits {
  max-width: 780px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.a11y-commits li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-text-tertiary);
}
.a11y-commits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-glacier);
}
.a11y-contact { margin-top: 20px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .a11y-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 26px;
  }
  .a11y-jump {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 22px;
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid rgba(99, 180, 171, .28);
  }
  .a11y-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a11y-gaps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .a11y-fact-grid { grid-template-columns: minmax(0, 1fr); }
  .a11y-fact { padding: 24px 22px; }
  .a11y-fact__number { font-size: 40px; }
  .a11y-band { padding-bottom: 50px; }
  .a11y-audio-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 560px) {
  .a11y-hero__title { font-size: 34px; }
  .a11y-hero .lede { font-size: 16px; }
  /* The sticky site column keeps a name against every row while the rest of
     the table scrolls under it, which is the only way nine columns stay
     usable on a phone. It has to shrink to leave room for the data. */
  .a11y-table tbody th[scope="row"],
  .a11y-table thead th:first-child { min-width: 118px; max-width: 118px; }
  .a11y-table tbody th[scope="row"] a { font-size: 14px; }
  .a11y-table tbody th[scope="row"] { padding-right: 12px; }
  .a11y-table thead th { font-size: 9.5px; }
  .a11y-table td { font-size: 12.5px; }
  .a11y-table .num { font-size: 12.5px; }
  .surfbar { width: 108px; }
  .a11y-gap { padding: 22px 20px; }
  .a11y-gap__list li { flex-direction: column; gap: 3px; }
  .a11y-gap__note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-audio { transition: none; }
  .a11y-audio:hover { transform: none; }
}