/* =====================================================================
   ADL RESPONSIVE HARDENING · adl-responsive.css

   Two classes of bug are fixed here.

   1. GRID MAX-CONTENT BLOWOUT
      A grid container with no explicit grid-template-columns places its
      items in an implicit `auto` track. An `auto` track resolves toward
      max-content, and a grid item's default min-width is `auto` (its
      min-content), so any wide descendant — a table with a min-width, a
      long unbroken string, a fixed-width media block — drags the whole
      track past the viewport. Because the base stylesheet sets
      `overflow-x: hidden` on body, the result is not a scrollbar. It is
      silent clipping: the page looks fine to an automated scrollWidth
      check while a third of every heading is cut off on a phone.

      The fix is to pin single-column grids to minmax(0, 1fr) and to set
      min-width: 0 on grid and flex children so they are permitted to be
      narrower than their content.

   2. WIDE TABLES ON SMALL SCREENS
      A horizontally scrolling table inside a vertically scrolling page
      is a poor interaction on a phone. Below 760px the tables become
      stacked cards, one row per card, with each cell labelled from its
      column header. Labels are applied at runtime by adl-responsive.js
      so dynamically rendered tables get the same treatment.
   ===================================================================== */

/* ---------- 1. grid / flex min-width ---------- */
.cmd-main { grid-template-columns: minmax(0, 1fr); }

.cmd-main > *,
.cmd-hero > *,
.cols-2 > *,
.cols-3 > *,
.console-layout > *,
.readout-grid > *,
.field-row > * {
  min-width: 0;
}

/* Pill rows are the opposite case. These items carry non-wrapping labels,
   so allowing them to shrink below min-content collapses the border and
   background while the text runs straight out of the control. They must
   keep their content width and the row must wrap instead. */
.console-tools > *,
.toggle-row > *,
.assess-meta > * {
  flex: 0 0 auto;
  min-width: max-content;
}
.killchain > * { min-width: 0; }

.cmd-panel, .cmd-hero, .cols-2, .cols-3, .console-layout, .cmd-main > section {
  max-width: 100%;
}

/* Long tokens (model ids, seeds, coordinates) must be allowed to wrap
   rather than setting the min-content width of their whole column. */
.cmd-panel h1, .cmd-panel h2, .cmd-panel h3,
.cmd-lede, .hint, .callout, .assess-claim, .assess dd,
.rule-name, .rule-auth, .track-name, .track-sub, .status-line {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cmd-kicker { overflow-wrap: anywhere; white-space: normal; }

/* ---------- 2. tables ---------- */
.cmd-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 760px) {
  .cmd-table-wrap { overflow-x: visible; border: none; border-radius: 0; }

  table.cmd-table { min-width: 0; width: 100%; display: block; }
  table.cmd-table thead { display: none; }
  table.cmd-table tbody, table.cmd-table tr, table.cmd-table td { display: block; width: 100%; }

  table.cmd-table tbody tr {
    border: 1px solid var(--grid-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.022);
    padding: 4px 2px;
    margin-bottom: 10px;
  }
  table.cmd-table tbody tr:hover { background: rgba(102, 228, 255, 0.05); }

  table.cmd-table td {
    border-bottom: 1px solid var(--grid-line);
    padding: 9px 12px;
    text-align: left;
  }
  table.cmd-table tr td:last-child { border-bottom: none; }

  /* Column header injected by adl-responsive.js */
  table.cmd-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--subtle);
    margin-bottom: 4px;
  }
  table.cmd-table td.num { text-align: left; }
}

/* ---------- 3. readouts ---------- */
@media (max-width: 620px) {
  .readout-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .readout { padding: 9px 10px; }
  .readout strong { font-size: 16px; overflow-wrap: anywhere; }
  .readout span { font-size: 9px; letter-spacing: 0.05em; }
}
@media (max-width: 430px) {
  .readout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 4. hero and panel padding ---------- */
@media (max-width: 620px) {
  .cmd-panel { padding: 15px 14px; border-radius: 16px; }
  .cmd-panel h1 { font-size: clamp(21px, 6.4vw, 28px); }
  .cmd-panel h2 { font-size: clamp(17px, 5vw, 21px); }
  .cmd-lede { font-size: 13.5px; }
  .cmd-hero { gap: 14px; }
  .cmd-main { gap: 14px; }
}

/* ---------- 5. console furniture ---------- */
@media (max-width: 620px) {
  .scrub { gap: 9px; padding: 10px; }
  .scrub input[type=range] { flex: 1 1 100%; order: 3; }
  .scrub-clock { font-size: 15px; }
  .globe-tools .gt { flex: 1 1 auto; font-size: 11px; padding: 8px 9px; }
  .killchain { gap: 4px; padding: 8px; }
  .kc-step { flex: 1 1 calc(33.333% - 4px); min-width: 0; padding: 7px 6px; }
  .kc-step b { font-size: 10px; }
  .kc-step span { font-size: 9px; }
  .track-list { max-height: 320px; }
  .rule { grid-template-columns: minmax(0, 1fr) auto; }
  .rule-p { font-size: 13px; }
  .assess { padding: 13px; }
  .tl-bar { height: 26px; }
}

/* ---------- 6. charts ---------- */
.chart-frame svg { max-width: 100%; height: auto; }

/* ---------- 7. legacy surfaces ----------
   The pre-existing pages predate the token system and carry their own
   fixed-width media blocks. Same class of bug, same remedy. */
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.hero-grid > *, .integration-grid > *, .surface-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hero-copy, .hero-media-block, .hero-product-row, .hero-asset-row,
  .pitch-deck-actions, .hero-logo-plate { max-width: 100%; min-width: 0; }
  .hero-graphic-expand, .hero-graphic-expand img { max-width: 100%; height: auto; }
  .pitch-deck-actions { flex-wrap: wrap; }
  .pitch-deck-actions .button { flex: 1 1 100%; }
}
img, svg, video, canvas { max-width: 100%; }

/* ---------- 8. version stamp ---------- */
.build-stamp {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--grid-line);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--subtle);
}
.build-stamp a { color: var(--subtle); text-decoration: none; border-bottom: 1px dotted currentColor; }
.build-stamp a:hover { color: var(--cyan); }
.build-stamp b { color: var(--muted); font-weight: 600; }

/* ---------- 9. genuine small-screen offenders in the legacy surfaces ----------
   These are distinct from the deliberate horizontal scroll strips
   (.hero-actions, .globe-tools, the wide data table) which are supposed
   to exceed the viewport inside a scrolling parent. The rules below fix
   containers that overflow their panel with nowhere to scroll. */

/* Track list scrolls vertically only; a name that needs two lines should
   wrap, not push the row sideways into a hidden scroll axis. */
.track-list { overflow-y: auto; overflow-x: hidden; }
.track-row > * { min-width: 0; }
.track-name, .track-sub { overflow-wrap: anywhere; white-space: normal; }

@media (max-width: 720px) {
  /* Two chart columns at phone width leaves ~180px per card. */
  .data-charts-grid { grid-template-columns: minmax(0, 1fr); }
  /* 140 + 160 + 52 + gaps exceeds the available panel width. */
  .bar-row { grid-template-columns: minmax(0, 1fr) 46px; row-gap: 5px; }
  .bar-row .bar-track,
  .bar-row > div:nth-child(2) { grid-column: 1 / -1; }
  .field-control.wide { min-width: 0; }
}

@media (max-width: 620px) {
  .data-select-grid, .data-controls { grid-template-columns: minmax(0, 1fr); }
  .mini-badge { min-width: 0; }
}