/* control.html only. Built from the tokens in site.css; nothing here is shared. */

/* Hero coverage map: the summary counts read as one line, the clause rows keep their four columns. */
.c-coverage .m-count span { max-width: 18rem; }
.c-coverage .m-clause .m-by { min-width: 0; }
/* "guidance only" is not a pill word: an icon and a word, placed where the pill sits. */
.c-coverage .m-clause .m-mark { justify-self: end; white-space: nowrap; }
@container (max-width: 620px) { .c-coverage .m-clause .m-mark { grid-column: 2; grid-row: 1; } }

/* Review gaps: the rows sit in a padded list (the kit pads them through its columns), and the fix card shows its role chip beside the AI label. */
.c-gaps .m-rows { padding: 6px 18px 8px; }
.c-gaps .m-fix .m-exc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.c-gaps .m-foot .m-actions { align-items: center; }

/* Rule tables beside the copy: no fixed minimum width, cells wrap instead of scrolling. */
.c-rules .m-table { min-width: 0; }
.c-rules .m-table th, .c-rules .m-table td { padding: 9px 10px; }
.c-rules .m-table caption .m-head { display: block; }
@container (max-width: 520px) {
  .c-rules .m-table th, .c-rules .m-table td { padding: 9px 8px; font-size: 13px; }
}

/* Tables with a note under the row title: matrix, ledger, registry. The note is secondary text, one line of its own. */
.c-matrix .m-table th[scope="row"] .m-sub,
.c-registry .m-table th[scope="row"] .m-sub,
.c-registry .m-table td .m-sub,
.c-ledger .m-table td .m-sub { display: block; font-weight: 400; margin-top: 3px; line-height: 1.4; }
.c-matrix .m-table th[scope="row"] .m-sub, .c-registry .m-table th[scope="row"] .m-sub { font-size: 12.5px; }

/* The approval matrix: five columns, a wide first column. Scrolls sideways inside its own box on a phone. */
.c-matrix .m-table { min-width: 960px; }
.c-matrix .m-table th[scope="row"] { width: 30%; }
.c-matrix .m-table th, .c-matrix .m-table td { padding: 11px 14px; }
.c-matrix .m-table td { width: 17.5%; }
/* A row nobody can do, and the row that says the AI never approves: a dashed edge and a pink mark, not a hue. */
.c-matrix .c-blocked th, .c-matrix .c-blocked td { border-top-style: dashed; border-top-color: var(--soft); }
.c-matrix .c-never { background: var(--m-2); box-shadow: inset 3px 0 0 var(--pink); }
.c-matrix .c-never td:last-child { font-weight: 600; }
.c-matrix .m-foot { justify-content: space-between; }

/* The held letter: the explanation and the proposed fix stack with even spacing. */
.c-hold .c-fix { display: grid; gap: 10px; }
.c-hold .m-gates li { font-size: 13.5px; }
.c-hold .m-foot { justify-content: flex-start; }

/* The ledger: a plain mono word for the stages that are not one of the status pills. It is deliberately not a capsule, and carries no icon: pills are for states. */
.c-ledger .m-table { min-width: 760px; }
.c-ledger .m-table th[scope="row"] { width: 140px; white-space: nowrap; }
.c-ledger .m-table td:nth-child(2) { min-width: 18rem; }
.c-ledger .m-table .m-clause-id { margin: 0 4px 2px 0; }
.c-stage { font: 500 12px/1.5 var(--mono); }
.c-ledger-pkg .m-table { min-width: 0; }
.c-ledger-pkg .m-table td:nth-child(2) { min-width: 0; }
@container (max-width: 640px) {
  .c-ledger-pkg .m-table { min-width: 560px; }
}
.c-ledger .m-foot { justify-content: flex-start; }

/* A second split under the first in one section. */
.c-second { margin-top: clamp(56px, 8vw, 104px); }
.c-second h3 { margin-bottom: 12px; }
.c-second .note { margin-top: 20px; max-width: 34rem; }

/* The registry: evaluation and authority are text-heavy, so the columns have room. */
.c-registry .m-table { min-width: 1040px; }
.c-registry .m-table th[scope="row"] { width: 24%; }
.c-registry .m-table td:nth-child(2) { width: 14%; }
.c-registry .m-table td:nth-child(3) { width: 26%; }
.c-registry .m-table td:nth-child(4) { width: 11%; }
.c-registry .m-table td { padding: 12px 14px; }
.c-pass { display: block; margin-top: 4px; font-weight: 500; white-space: nowrap; }
.c-pass i { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 4px; border: 1.5px solid var(--soft); border-radius: 50%; font-size: 10px; line-height: 1; }
.c-registry .m-foot { justify-content: flex-start; }

/* Table captions sit above the scroll box, so a phone never scrolls them away. */
.c-cap { margin: 0 0 10px; }
.c-cap .m-head { margin-right: 4px; }

/* "open-weight model . self-hosted" is one phrase: it never breaks in the middle. */
.c-bind { white-space: nowrap; }

/* On a phone the first column gives way, so the second column shows beside it. */
@container (max-width: 560px) {
  .c-matrix .m-table { min-width: 820px; }
  .c-matrix .m-table th[scope="row"] { width: 150px; min-width: 150px; font-size: 13px; }
  .c-matrix .m-table th[scope="row"] .m-sub { font-size: 12px; }
  .c-matrix .m-table td { width: auto; }
  .c-ledger .m-table th[scope="row"] { width: 92px; }
  .c-ledger .m-table td:nth-child(2) { min-width: 13rem; }
  .c-ledger-pkg .m-table { min-width: 520px; }
  .c-registry .m-table { min-width: 960px; }
  .c-registry .m-table th[scope="row"] { width: 150px; min-width: 150px; font-size: 13px; }
  .c-registry .m-table th[scope="row"] .m-sub { font-size: 12px; }
}