/* ==========================================================================
   tables.css — the comparison spine.
   Desktop: a real ledger table. Narrow: the SAME table element restacks into
   dimension cards (one card per dimension, the three generations listed inside)
   so the comparison relationship survives instead of scrolling sideways.
   Semantics are preserved across the display change by explicit ARIA roles in
   the markup and by keeping <thead> visually hidden rather than display:none.
   ========================================================================== */

.tablewrap { position: relative; }

table.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.cmp caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.5;
}
.cmp caption b { color: var(--ink-2); font-weight: 700; }

/* --- Head --- */
.cmp thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  text-align: left;
  vertical-align: bottom;
  padding: var(--s-3) var(--s-3);
  background: var(--card-2);
  border-bottom: 2px solid var(--rule-strong);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-sm);
  line-height: 1.3;
}
.cmp thead th[data-gen] {
  border-bottom-color: var(--gen);
  box-shadow: inset 0 -3px 0 -1px var(--gen);
}
.cmp thead th:first-child { border-top-left-radius: var(--r-2); }
.cmp thead th:last-child  { border-top-right-radius: var(--r-2); }

.cmp__genhead { display: grid; gap: 2px; }
.cmp__genhead .name { font-size: var(--t-base); font-family: var(--font-display); font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.cmp__genhead .sub  { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); letter-spacing: 0.02em; }

/* --- Group rows --- */
.cmp .grouprow th {
  padding: var(--s-3) var(--s-3);
  background: var(--sunk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
}
.cmp .grouprow .grouptoggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 40px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.cmp .grouprow .grouptoggle::before {
  content: "\2212";               /* minus when open */
  display: inline-grid;
  place-items: center;
  width: 1.35em; height: 1.35em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  background: var(--card);
  font-weight: 800;
  line-height: 1;
}
.cmp .grouprow .grouptoggle[aria-expanded="false"]::before { content: "\002b"; }
.cmp .grouprow .grouptoggle:hover::before { border-color: var(--ink-2); color: var(--ink); }
.cmp .grouprow .grouptoggle .count { margin-left: auto; font-weight: 700; color: var(--ink-3); letter-spacing: 0.04em; }

/* --- Body cells --- */
.cmp tbody th[scope="row"] {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3);
  width: 22%;
  min-width: 11rem;
  background: var(--card-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--ink);
}
.cmp tbody th[scope="row"] .dimnote {
  display: block;
  font-weight: 450;
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.4;
}

.cmp tbody td {
  vertical-align: top;
  padding: var(--s-3);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  line-height: 1.45;
  transition: background-color var(--d-2) var(--e-out), opacity var(--d-2) var(--e-out);
}
.cmp tbody tr:nth-child(even of :not([hidden])) td { background: color-mix(in srgb, var(--card-2) 45%, transparent); }
.cmp tbody tr:hover td { background: color-mix(in srgb, var(--g3-soft) 40%, transparent); }

.cell__v { display: block; font-weight: 640; color: var(--ink); }
.cell__v .num { font-size: 1.06em; letter-spacing: -0.01em; }
.cell__x { display: block; margin-top: 3px; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45; }
.cell__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em; margin-top: 6px; }
.cell-key { display: none; }
.cell--na .cell__v { color: var(--ink-3); font-weight: 500; font-style: italic; }

/* Contested cell: both readings shown, never merged. */
.cell__alt {
  display: block;
  margin-top: 5px;
  padding: 4px 7px;
  border-left: 3px solid var(--bad);
  background: var(--bad-soft);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: var(--t-xs);
  color: var(--ink-2);
  line-height: 1.45;
}
.cell__alt b { color: var(--ink); }

/* --- Column highlight / dim --- */
.cmp col.is-hi + col {}                     /* colgroup is layout-only */
.cmp td.is-hi, .cmp thead th.is-hi { background: var(--gen-soft) !important; }
.cmp td.is-hi { box-shadow: inset 2px 0 0 var(--gen), inset -2px 0 0 var(--gen); }
.cmp thead th.is-hi { box-shadow: inset 2px 0 0 var(--gen), inset -2px 0 0 var(--gen), inset 0 -3px 0 -1px var(--gen); }
.cmp td.is-dim { opacity: 0.42; }
.cmp td.is-dim:hover { opacity: 1; }

/* --- Delta column --- */
.cmp .delta {
  background: color-mix(in srgb, var(--g3-soft) 55%, var(--card));
  border-left: 2px solid var(--g3);
  font-size: var(--t-xs);
}
.cmp thead th.delta { background: color-mix(in srgb, var(--g3-soft) 70%, var(--card-2)); }
.delta__verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  font-weight: 750;
  font-size: var(--t-xs);
  padding: 0.08rem 0.4rem;
  border-radius: var(--r-1);
  border: 1px solid;
}
.delta__verdict[data-dir="better"] { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: var(--good-soft); }
.delta__verdict[data-dir="worse"]  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 45%, transparent);  background: var(--bad-soft); }
.delta__verdict[data-dir="mixed"]  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-soft); }
.delta__verdict[data-dir="same"]   { color: var(--ink-3); border-color: var(--rule-strong); background: var(--sunk); }
.delta__note { display: block; margin-top: 4px; color: var(--ink-2); line-height: 1.45; }

/* --- Sort buttons --- */
.sortbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: none;
  border: 0;
  padding: 2px 4px;
  margin-left: -4px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--r-1);
}
.sortbtn:hover { background: var(--sunk); }
.sortbtn::after { content: "\2195"; font-size: 0.85em; color: var(--ink-3); }
[aria-sort="ascending"] .sortbtn::after  { content: "\2191"; color: var(--g3); }
[aria-sort="descending"] .sortbtn::after { content: "\2193"; color: var(--g3); }

/* --- Toolbar --- */
.tbar { display: grid; gap: var(--s-3); }
.tbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.tbar__label {
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: -0.25rem;
}
.field {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-2);
  padding: 0 var(--s-3);
  min-height: 42px;
}
.field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 26%, transparent); }
.field input, .field select {
  border: 0; background: none; color: var(--ink);
  font: inherit; font-size: var(--t-sm);
  min-height: 40px; min-width: 8rem; padding: 0;
}
.field input:focus, .field select:focus { outline: none; }
.field__glyph { color: var(--ink-3); }

.rowcount { font-size: var(--t-xs); color: var(--ink-3); font-weight: 650; }

/* ==========================================================================
   Narrow layout — the restack. Same DOM, no horizontal scrolling.
   ========================================================================== */
@media (max-width: 860px) {
  table.cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }

  /* A table-caption inside a block-level table collapses to shrink-to-fit and
     renders one word per line. Make it an ordinary block. */
  .cmp caption { display: block; width: 100%; }

  /* Kept in the accessibility tree, removed from view. */
  .cmp thead {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
  }

  .cmp .grouprow th {
    border-radius: var(--r-2);
    margin: var(--s-5) 0 var(--s-3);
    padding: var(--s-2) var(--s-3);
  }
  .cmp .grouprow:first-child th { margin-top: 0; }

  .cmp tbody tr:not(.grouprow) {
    margin: 0 0 var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: var(--card);
    box-shadow: var(--sh-1);
    overflow: clip;
  }
  .cmp tbody tr:nth-child(even of :not([hidden])) td { background: transparent; }
  .cmp tbody tr:hover td { background: transparent; }

  .cmp tbody th[scope="row"] {
    width: auto; min-width: 0;
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-base);
    background: var(--card-2);
  }

  .cmp tbody td {
    border-left: 0;
    border-bottom: 1px dashed var(--rule);
    padding: var(--s-3);
    display: grid;
    grid-template-columns: 7.4rem 1fr;
    gap: var(--s-3);
    align-items: start;
  }
  .cmp tbody tr:not(.grouprow) td:last-child { border-bottom: 0; }

  .cell-key {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--t-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gen);
    padding-top: 2px;
    line-height: 1.35;
  }
  .cell-key::before {
    content: attr(data-glyph);
    display: inline-grid; place-items: center;
    width: 1.3em; height: 1.3em;
    border-radius: var(--r-1);
    background: var(--gen-soft);
    border: 1px solid color-mix(in srgb, var(--gen) 45%, transparent);
    font-size: 0.9em;
  }

  .cmp td.is-hi { box-shadow: inset 3px 0 0 var(--gen); }
  .cmp td.is-dim { opacity: 0.5; }
  .cmp .delta { border-left: 0; box-shadow: inset 3px 0 0 var(--g3); }
}

@media (max-width: 420px) {
  .cmp tbody td { grid-template-columns: 1fr; gap: var(--s-1); }
  .cell-key { padding-top: 0; }
}

/* Zoomed-in users hit the same restack even on a wide screen. */
@media (max-width: 1200px) and (min-resolution: 1.5dppx) { }