/* DNEG AI Roadmap: css/views/matrix.css
   The Matrix lens (.lens-matrix): the view toggle, the heatmap table (sticky first column, header and totals row, scrolling
   inside its card), the legend and the "gaps" list. Cell shade is the accent token at --p percent over the card. Tokens only.
   The head, the brief and the folded blocks (lk-*) are the shared kit; the grid and its controls sit in the first block, open. */

.lens-matrix .mx-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.lens-matrix .mx-segs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lens-matrix .mx-segs .lk-label { margin-right: 4px; }
.lens-matrix .mx-seg { padding: 4px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: .84rem; text-decoration: none; white-space: nowrap; }
.lens-matrix .mx-seg:hover { border-color: var(--accent); color: var(--fg); }
.lens-matrix .mx-seg.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--accent2); }
.lens-matrix .mx-seg.swap { margin-left: 6px; }
.lens-matrix .mx-checks { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--muted); font-size: .86rem; }
.lens-matrix .mx-check { display: inline-flex; align-items: center; gap: .55em; cursor: pointer; }
.lens-matrix .mx-check:hover { color: var(--fg); }
.lens-matrix .mx-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.lens-matrix .mx-checks { align-items: center; }

/* the card holds a scrolling table: both header and first column stay in view */
.lens-matrix .mx-card { margin-top: 1rem; padding: 0; overflow: hidden; }
.lens-matrix .mx-scroll { overflow: auto; max-height: calc(100vh - var(--topbar-h) - 96px); min-height: 300px; scrollbar-width: thin; }
.lens-matrix .mx-scroll:focus-visible { outline-offset: -3px; }
.lens-matrix table.mx { --mx-h1: 30px; width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
.lens-matrix .mx th, .lens-matrix .mx td { padding: 0; border-right: 1px solid color-mix(in srgb, var(--line) 40%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }

.lens-matrix .mx thead th { position: sticky; top: 0; z-index: 3; background: var(--panel2); }
.lens-matrix .mx.has-cgroups .mx-hrow2 th { top: var(--mx-h1); }
.lens-matrix .mx .mx-cgrp { height: var(--mx-h1); padding: 0 10px; color: var(--accent2); font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.lens-matrix .mx .mx-cgrp span { position: sticky; left: 12.4rem; display: inline-block; }
.lens-matrix .mx .mx-colh { min-width: 3.5rem; height: 36px; font-size: .74rem; font-weight: 500; text-align: center; }
.lens-matrix .mx .mx-colh a { display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px 6px; color: var(--muted); text-decoration: none; }
.lens-matrix .mx .mx-colh a:hover { color: var(--accent2); text-decoration: underline; }
.lens-matrix .mx.rot .mx-colh { min-width: 2.2rem; height: 6.4rem; vertical-align: bottom; }
.lens-matrix .mx.rot .mx-colh a { align-items: flex-end; padding: 8px 4px; }
.lens-matrix .mx.rot .mx-colh a span { display: inline-block; transform: rotate(180deg); writing-mode: vertical-rl; white-space: nowrap; }

.lens-matrix .mx .mx-corner, .lens-matrix .mx .mx-rowh { position: sticky; left: 0; z-index: 2; min-width: 11.5rem; max-width: 15rem; padding: 0 14px; background: var(--panel); text-align: left; border-right: 1px solid var(--line); }
.lens-matrix .mx .mx-corner { top: 0; z-index: 4; background: var(--panel2); vertical-align: bottom; padding-bottom: 8px; }
.lens-matrix .mx .mx-corner span { display: block; color: var(--fg); font-size: .8rem; font-weight: 600; }
.lens-matrix .mx .mx-corner small { color: var(--muted); font-size: .72rem; font-weight: 400; }
.lens-matrix .mx .mx-rowh { font-weight: 500; white-space: nowrap; }
.lens-matrix .mx .mx-rowh a { display: block; padding: 6px 0; overflow: hidden; color: var(--fg); text-decoration: none; text-overflow: ellipsis; }
.lens-matrix .mx .mx-rowh a:hover { color: var(--accent2); text-decoration: underline; }

.lens-matrix .mx .mx-grp th { position: static; padding: 6px 14px; background: color-mix(in srgb, var(--panel2) 75%, var(--panel)); border-right: 0; color: var(--accent2); font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.lens-matrix .mx .mx-grp th span { position: sticky; left: 14px; }

.lens-matrix .mx .mx-cell { min-width: 3.5rem; height: 32px; text-align: center; background: color-mix(in srgb, var(--accent) var(--p, 0%), transparent); }
.lens-matrix .mx.rot .mx-cell { min-width: 2.2rem; }
.lens-matrix .mx .mx-cell a { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 32px; color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 500; text-decoration: none; }
.lens-matrix .mx .mx-cell.hi a { color: var(--on-accent); }
:root[data-theme="light"] .lens-matrix .mx .mx-cell.hi a { color: var(--fg); }
.lens-matrix .mx .mx-cell a:hover, .lens-matrix .mx .mx-cell a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent2); outline: none; }
.lens-matrix .mx .mx-cell.zero { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.lens-matrix .mx .mx-row:hover .mx-rowh, .lens-matrix .mx .mx-row:hover .mx-cell.zero { background-color: var(--panel2); }

.lens-matrix .mx .mx-total, .lens-matrix .mx .mx-totalh { min-width: 3.6rem; padding: 0 8px; background: var(--panel); color: var(--muted); font-size: .8rem; text-align: center; }
.lens-matrix .mx .mx-totalh { background: var(--panel2); font-weight: 500; }
.lens-matrix .mx tfoot th, .lens-matrix .mx tfoot td { position: sticky; bottom: 0; z-index: 3; height: 32px; background: var(--panel2); border-top: 1px solid var(--line); border-bottom: 0; color: var(--fg); font-weight: 500; }
.lens-matrix .mx tfoot th.mx-rowh { z-index: 4; left: 0; }
.lens-matrix .mx tfoot .mx-grand { color: var(--accent2); }

/* legend */
.lens-matrix .mx-legend { gap: 6px 16px; margin-top: .8rem; align-items: center; }
.lens-matrix .mx-legend .mx-sw { width: 22px; height: 14px; margin-right: 6px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 3px; vertical-align: middle; background: color-mix(in srgb, var(--accent) var(--p, 0%), transparent); }
.lens-matrix .mx-legend .mx-sw.zero { background: transparent; border-style: dashed; border-color: var(--line); }
.lens-matrix .mx-legend .mx-key { font-family: var(--mono); font-size: .9em; }
.lens-matrix .mx-legend .mx-note { margin-left: auto; font-size: 1em; }

.lens-matrix .mx-facts { display: grid; gap: .5rem; max-width: 86ch; margin: 0; padding-left: 1.1rem; color: var(--muted); }
.lens-matrix .mx-facts b { color: var(--fg); font-weight: 600; }
.lens-matrix .mx-facts a { color: var(--accent2); }
.lens-matrix .mx-facts .dim { font-size: .88rem; }

@media (max-width: 700px) {
  .lens-matrix .mx .mx-corner, .lens-matrix .mx .mx-rowh { min-width: 7.5rem; max-width: 9rem; padding: 0 8px; font-size: .78rem; }
  .lens-matrix .mx-legend .mx-note { margin-left: 0; flex-basis: 100%; }
}
@media print {
  .lens-matrix .mx-toolbar { display: none; }
  .lens-matrix .mx-card { overflow: visible; }
  .lens-matrix .mx { font-size: .72rem; }
  .lens-matrix .mx .mx-corner, .lens-matrix .mx .mx-rowh { min-width: 8rem; max-width: 10rem; padding: 0 8px; }
  .lens-matrix .mx .mx-cell, .lens-matrix .mx .mx-colh, .lens-matrix .mx .mx-total, .lens-matrix .mx .mx-totalh { min-width: 0; }
  .lens-matrix .mx-scroll { max-height: none; overflow: visible; }
  .lens-matrix .mx thead th, .lens-matrix .mx tfoot th, .lens-matrix .mx tfoot td, .lens-matrix .mx .mx-corner, .lens-matrix .mx .mx-rowh { position: static; }
  .lens-matrix .mx-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lens-matrix .mx-row, .lens-matrix .mx-grp { break-inside: avoid; }
}

/* the empty state (nothing matches) stands where the brief would be, above the block that holds the controls */
.lens-matrix > .empty { margin-bottom: 1.4rem; }