/* ==========================================================================
   11 COVERAGE MATRIX — a trade artifact turned into UI. Sixteen surfaces down,
   four packages across, three cell states. It sits directly under the ledger
   because it is what makes the ledger's four rows mean something concrete.

   At 390 a 16x4 grid does not fit. It stays a matrix and scrolls horizontally
   with the surface column pinned — degrading it into four stacked lists would
   destroy the one thing the artifact does, which is let you read across a row
   and compare. The rail already exists as a device on this page (§8 jobs), so
   the affordance is learned rather than new. 0 images.
   ========================================================================== */

.matrix { background: var(--surface-alt); }

.matrix__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
}

.matrix__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-end: var(--space-stack);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (min-width: 1024px) { .matrix__hint { display: none; } }

.matrix__scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  border: var(--border-width-hair) solid var(--border-strong);
  clip-path: var(--chamfer-clip);
  background: var(--chamfer-edge), var(--surface-page);
}
.matrix__scroll::-webkit-scrollbar { height: var(--space-3xs); }
.matrix__scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }

.matrix__table {
  width: 100%;
  min-width: var(--width-prose);
  border-collapse: collapse;
  font-family: var(--font-mono);
}

.matrix__table th,
.matrix__table td {
  padding: var(--space-2xs) var(--space-xs);
  text-align: center;
  border-block-end: var(--border-width-hair) solid var(--border-hairline);
}

/* .matrix__table th is (0,1,1) and would win over a lone class, so the row
   header alignment is raised to match */
.matrix__table .matrix__corner,
.matrix__table .matrix__surface {
  position: sticky;
  inset-inline-start: 0;
  z-index: var(--z-raised);
  /* --card-min (300px) left 32px for the data in a 332px scrollport, i.e. the
     whole point of the artifact off-screen. The cell floor is the right token:
     150px at 390 leaves the surface column plus two and a half packages. */
  min-width: var(--cell-min-w);
  padding-inline-start: var(--space-md);
  text-align: start;
  background: var(--surface-page);
  border-inline-end: var(--border-width-hair) solid var(--border-strong);
}

/* Horizontal stickiness only. A vertically sticky thead inside a container
   that scrolls horizontally but not vertically sticks to the PAGE scrollport,
   so the header row detaches and rides over the body rows mid-scroll. The
   pinned surface column is the one that carries the artifact; the column
   headers scroll with the table. */
.matrix__pkg,
.matrix__corner {
  padding-block: var(--space-sm);
  background: var(--surface-page);
  border-block-end: var(--border-width-hair) solid var(--border-strong);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.matrix__surface {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  white-space: nowrap;
}

.matrix__row:hover td { background: var(--surface-raised); }
.matrix__row:hover .matrix__surface { background: var(--surface-raised); color: var(--text-primary); }

/* --------------------------------------------------------------------------
   THE THREE CELL STATES. Film and coating are different products, not
   different amounts of one, so they are different shapes as well as
   different inks: a filled disc for a bonded coating, a hollow triangle for
   urethane laid over the paint. A matrix marker is a marker, so the accent
   ink rule permits both.
   -------------------------------------------------------------------------- */
.matrix__cell { line-height: var(--leading-flat); }

.matrix__mark {
  display: inline-grid;
  place-items: center;
  width: var(--icon-md);
  height: var(--icon-md);
}
.matrix__mark svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  fill: currentColor;
  stroke: none;
}
.matrix__mark--yes { color: var(--text-accent); }
.matrix__mark--film { color: var(--text-accent); }
.matrix__mark--film svg { fill: none; stroke: currentColor; stroke-width: var(--border-width-medium); }
.matrix__mark--no { color: var(--text-faint); }

.matrix__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-block-start: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.matrix__legend-item { display: flex; align-items: center; gap: var(--space-2xs); }

.matrix__note {
  margin-block-start: var(--space-sm);
  max-width: var(--width-measure);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}