/* components.css — page frame, rule, tile, table, pill, drop-cap
 *
 * Editorial / magazine. The Rule (horizontal line under section
 * heads) is structural, not decorative. Tiles use a gold corner
 * flag instead of a left-bar — magazine-style state indicator.
 */

/* ============ The page header (masthead) ============ */

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-9);
  padding-bottom: var(--sp-4);
  border-bottom: var(--rule-w) solid var(--border);
}
.page-header__left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.page-header__right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  text-align: right;
}

/* ============ The Rule (section divider) ============ */

.rule {
  border-top: var(--rule-w) solid var(--border);
  margin: 0;
}
.rule.thick {
  border-top-width: 2px;
}

/* ============ Sections ============ */

.section {
  margin-top: var(--sp-9);
}
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: var(--rule-w) solid var(--border);
}
.section__head .h1 + .eyebrow {
  /* eyebrow placed to the RIGHT of section title */
  text-align: right;
}

/* ============ Tile grid + tile ============ */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 960px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tile-grid { grid-template-columns: 1fr; }
}

.tile {
  position: relative;
  background: var(--bg-2);
  padding: var(--sp-5);
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.tile:hover {
  border-color: var(--border-h);
}

/* Gold corner flag — editorial state marker */
.tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 24px;
  background: var(--acc);
}
.tile[data-state="warn"]::before { background: var(--high); }
.tile[data-state="crit"]::before { background: var(--crit); }
.tile[data-state="ok"]::before { background: var(--ok); }
.tile[data-state="muted"]::before { background: var(--tx-4); }

.tile__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.tile__title {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-smcp);
  text-transform: uppercase;
  color: var(--tx-3);
}
.tile__count {
  font-family: var(--mono);
  font-size: var(--fs-num-l);
  font-weight: 400;
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1;
  color: var(--tx-1);
}
.tile__divider {
  border-top: var(--rule-w) solid var(--border);
  margin: var(--sp-2) 0;
}
.tile__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.tile__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
}
.tile__row .k {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  color: var(--tx-2);
}
.tile__row .v {
  font-family: var(--mono);
  font-size: var(--fs-ui);
  font-feature-settings: "tnum" 1;
  color: var(--tx-1);
}
.tile__foot {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: var(--rule-w) solid var(--border);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-smcp);
  text-transform: uppercase;
}
.tile__foot a {
  color: var(--acc);
  text-decoration: none;
}
.tile__foot a:hover {
  color: var(--acc-h);
}

/* ============ Pills (severity, state, source) ============ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  font-family: var(--mono);
  font-size: var(--fs-pill);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  font-feature-settings: "tnum" 1;
  background: var(--bg-1);
  color: var(--tx-2);
  border-radius: var(--radius-sm);
}
.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tx-3);
}
.pill-c { background: var(--crit-bg);  color: var(--crit);  }
.pill-c .dot { background: var(--crit); }
.pill-h { background: var(--high-bg);  color: var(--high);  }
.pill-h .dot { background: var(--high); }
.pill-m { background: var(--med-bg);   color: var(--med);   }
.pill-m .dot { background: var(--med); }
.pill-l { background: var(--low-bg);   color: var(--low);   }
.pill-l .dot { background: var(--low); }
.pill-i { background: var(--info-bg);  color: var(--tx-2);  }
.pill-ok { background: var(--ok-bg);   color: var(--ok);    }
.pill-ok .dot { background: var(--ok); }
.pill-st { background: var(--stale-bg); color: var(--stale);}
.pill-st .dot { background: var(--stale); }

/* ============ Filter chips ============ */

.chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.chips__axis {
  font-family: var(--mono);
  font-size: var(--fs-pill);
  letter-spacing: var(--track-smcp);
  color: var(--tx-3);
  margin-right: var(--sp-2);
  text-transform: lowercase;
}
.chip {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  padding: 4px 10px;
  background: var(--bg-1);
  color: var(--tx-2);
  border: var(--rule-w) solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.chip:hover {
  border-color: var(--border-h);
  color: var(--tx-1);
}
.chip.on {
  background: var(--acc-tint);
  color: var(--acc);
  border-color: var(--acc);
}

/* ============ Tables (data, dense) ============ */

.tbl {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  border-collapse: collapse;
}
.tbl thead th {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-smcp);
  text-transform: uppercase;
  color: var(--tx-3);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--rule-w) solid var(--border);
}
.tbl tbody td {
  padding: var(--sp-3);
  border-bottom: var(--rule-w) solid var(--border);
  color: var(--tx-1);
  vertical-align: top;
}
.tbl tbody tr:hover td {
  background: var(--bg-1);
}
.tbl .num,
.tbl .id {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--tx-2);
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.tbl .id {
  color: var(--tx-1);
}
.tbl tbody tr {
  transition: background var(--duration) var(--ease);
}

/* Table density variants */
.tbl--compact tbody td {
  padding: var(--sp-2) var(--sp-3);
}

/* ============ Definition list (key-value pairs, editorial) ============ */

.dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-ui);
}
.dl dt {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-smcp);
  text-transform: lowercase;
  color: var(--tx-3);
  align-self: baseline;
}
.dl dd {
  color: var(--tx-1);
  margin: 0;
}
.dl dd .num,
.dl dd .id {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--tx-1);
  font-feature-settings: "tnum" 1;
}

/* ============ Muted content ============ */

.muted {
  color: var(--tx-3);
}
.dim {
  color: var(--tx-4);
}
.dim-em {
  color: var(--tx-3);
  font-family: var(--mono);
  font-size: var(--fs-meta);
}

/* ============ Aside / sidebar (used on detail pages) ============ */

.layout--detail {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-7);
}
@media (max-width: 960px) {
  .layout--detail { grid-template-columns: 1fr; }
}

.sidebar {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-top: var(--sp-2);
}
.sidebar__block .eyebrow {
  margin-bottom: var(--sp-2);
}

/* ============ Footer ============ */

.page-footer {
  margin-top: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: var(--rule-w) solid var(--border);
  font-family: var(--mono);
  font-size: var(--fs-pill);
  color: var(--tx-3);
  letter-spacing: var(--track-mono);
  display: flex;
  justify-content: space-between;
}

/* ============ Group view — cross-vertical maturity matrix (Decision 060) ====== */

/* Visually-hidden: text equivalents for the dot meters + table caption. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.group-matrix { table-layout: fixed; }
.group-matrix thead th { vertical-align: bottom; }
.group-matrix .th-src {
  display: block;
  margin-top: var(--sp-1);
  font-size: 9.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tx-4);
  font-weight: 400;
}
.group-matrix .gm-vertical {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--tx-1);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  vertical-align: top;
  padding-top: var(--sp-3);
}
.group-matrix .gm-cell { padding: var(--sp-3); }

/* Dot meter — reuses the pill colour tokens; text equivalent is in a sibling .vh span.
   D6 fix: the states were low-discriminability at 9px (warn-amber vs muted-gold were
   nearly the same hue). Each state now carries a distinct hue AND a shape cue, so the
   meter survives both small size and colour-vision deficiency. */
.gm-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-bottom: var(--sp-2);
  background: var(--tx-3);
}
.gm-dot--ok    { background: var(--ok); }          /* sage — filled circle */
.gm-dot--warn  { background: var(--high); }        /* amber — filled circle */
/* Scaffold (conditionally-approved Tier-3) — gold RING, not a solid dot, so it
   reads as "approved with conditions / not booked" at a glance. */
.gm-dot--scaffold {
  background: transparent;
  border: 2px solid var(--med);
}
/* Muted — desaturated grey (was --med gold, indistinguishable from warn-amber). */
.gm-dot--muted { background: #6a6a64; }
/* Not wired — hollow DASHED SQUARE (distinct shape, not just colour). */
.gm-dot--none  {
  background: transparent;
  border: 1px dashed var(--tx-3);
  border-radius: 2px;
}

.gm-headline {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--tx-1);
  line-height: 1.1;
}
.gm-unit {
  font-family: var(--sans);
  font-size: var(--fs-pill);
  font-weight: 400;
  color: var(--tx-3);
}
.gm-support {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-pill);
  color: var(--tx-3);
  line-height: 1.45;
}
.gm-support--muted { font-style: italic; color: var(--tx-4); }
.gm-na {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-ui);
  color: var(--tx-3);
}
.gm-drill {
  display: inline-block;
  margin-top: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--fs-pill);
  letter-spacing: var(--track-mono);
  color: var(--low);
}
.gm-foot {
  margin-top: var(--sp-4);
  font-size: var(--fs-pill);
  color: var(--tx-4);
  line-height: 1.5;
}

/* ============ D5: wide-table horizontal scroll container ============
   Wraps .tbl on findings / models-index so a wide data table reflows to a
   horizontal scroll on narrow screens instead of crushing its columns. */
.tbl-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============ D3: Group matrix → cards at ≤640px ============
   At narrow widths the 4-column matrix crushes. Reflow each row into a stacked
   card: the vertical label is the card header, then the three lens cells stack
   as labelled blocks (data-lens supplies the heading via ::before). */
@media (max-width: 640px) {
  .group-matrix,
  .group-matrix thead,
  .group-matrix tbody,
  .group-matrix tr,
  .group-matrix th,
  .group-matrix td {
    display: block;
    width: 100%;
  }
  /* hide the column header row — each cell now carries its own label */
  .group-matrix thead { position: absolute; left: -9999px; }
  .group-matrix tbody tr {
    border: var(--rule-w) solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
  }
  .group-matrix tbody tr:hover td { background: transparent; }
  .group-matrix .gm-vertical {
    padding: var(--sp-2) 0 var(--sp-3);
    border-bottom: var(--rule-w) solid var(--border);
    margin-bottom: var(--sp-3);
    white-space: normal;
  }
  .group-matrix .gm-cell {
    padding: var(--sp-3) 0;
    border-bottom: var(--rule-w) solid var(--border);
  }
  .group-matrix tbody tr td.gm-cell:last-child { border-bottom: none; }
  /* lens label header inside each stacked cell */
  .group-matrix .gm-cell[data-lens]::before {
    content: attr(data-lens);
    display: block;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--track-smcp);
    text-transform: uppercase;
    color: var(--tx-3);
    margin-bottom: var(--sp-2);
  }
}