/* ==========================================================================
   THE FLOOR'S COMPONENTS — the development floor's generated pages (status,
   atlas, evidence), in the one design system.

   Same contract as style.css: only the owner's tokens (generated into
   assets/css/tokens.css), no custom property, no theme block, no colour or
   duration literal. A dashboard here is a ledger: a heavy rule where it
   starts, hairlines between entries, mono for every measured value, and a
   state written as a word in its state ink, never a coloured pill alone.
   ========================================================================== */

/* A generated region: it holds its own states (loading, empty, error, ready). */
.floor-status,
.atlas {
  margin-block: var(--sp-5);
}

/* ── A snapshot's facts: a definition grid on hairlines ─────────────────── */

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: var(--sp-5) 0 var(--sp-6);
  border-top: var(--rule-w) solid var(--ink-1);
}

.status-grid > div {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: var(--hairline-w) solid var(--line-1);
}

.status-grid dt {
  margin-bottom: var(--sp-1);
  color: var(--ink-2);
  font-size: var(--f-micro-size);
  font-weight: var(--f-micro-weight);
}

.status-grid dd {
  margin: 0;
  color: var(--ink-1);
  font-family: var(--face-mono);
  font-size: var(--f-data-size);
  overflow-wrap: anywhere;
}

/* ── Generated tables: the ledger table, denser ─────────────────────────── */

.floor-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.status-table,
.atlas-table {
  display: table;
  width: 100%;
  margin: var(--sp-4) 0;
  font-size: var(--f-micro-size);
}

.status-table th,
.status-table td,
.atlas-table th,
.atlas-table td {
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
}

.status-table td,
.atlas-table td {
  color: var(--ink-1);
  overflow-wrap: anywhere;
}

/* ── The atlas: its filters, then its count ─────────────────────────────── */

.atlas-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}

.atlas-controls p {
  margin: 0;
}

.atlas-controls label {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--ink-2);
  font-size: var(--f-micro-size);
  font-weight: var(--f-micro-weight);
}

.atlas-controls input,
.atlas-controls select,
.atlas-controls button {
  width: 100%;
  min-height: var(--hit-min);
  padding: 0 var(--sp-3);
  border: var(--hairline-w) solid var(--ink-2);
  border-radius: var(--radius-card);
  background: var(--ground-2);
  color: var(--ink-1);
  font: inherit;
  font-size: var(--f-micro-size);
}

.atlas-controls button {
  cursor: pointer;
}

.atlas-controls button:hover {
  background: var(--layer-hover);
}

.atlas-meta,
.atlas-count,
.floor-empty {
  margin: var(--sp-2) 0 0;
  color: var(--ink-2);
  font-size: var(--f-micro-size);
}

.atlas-count {
  font-family: var(--face-mono);
}

/* ── A state, written by the page script (floor.js) ─────────────────────── */

.floor-pill {
  color: var(--ink-2);
  font-family: var(--face-mono);
  font-size: var(--f-nano-size);
  font-weight: 600;
  white-space: nowrap;
}

.floor-pill[data-state="pass"],
.floor-pill[data-state="success"],
.floor-pill[data-state="ready"] {
  color: var(--ok);
}

.floor-pill[data-state="fail"],
.floor-pill[data-state="failure"],
.floor-pill[data-state="blocked"] {
  color: var(--alarm);
}

.floor-pill[data-state="unknown"],
.floor-pill[data-state="not-run"] {
  color: var(--warn);
}

/* A floor page's opening paragraph (the claims page's promise among them). */
.floor-lede {
  max-width: var(--page-measure);
  color: var(--ink-2);
  font-size: var(--f-lede-size);
  line-height: var(--f-page-lh);
}

/* The claims page (engine/scripts/brand/render.ts): every claim with its verdict.
   A retracted claim is struck through until its check passes again. DESIGN owns this layer. */
.floor-claims {
  max-width: var(--page-max);
}

.floor-claims-table td {
  vertical-align: top;
}

.floor-claims .floor-facts {
  font-family: var(--face-mono);
  font-size: var(--f-data-size);
  color: var(--ink-2);
}

.floor-claims .floor-gap {
  color: var(--warn);
}

.floor-claim {
  font-weight: 600;
  width: 38%;
}

.floor-claims-table tr[data-verdict="retracted"] .floor-claim {
  text-decoration: line-through;
  text-decoration-color: var(--alarm);
}

.floor-state {
  padding: 1px var(--sp-2);
  border: var(--hairline-w) solid currentColor;
  border-radius: var(--radius-card);
}

.floor-state[data-status="holds"],
.floor-state[data-status="pass"] {
  color: var(--ok);
}

.floor-state[data-status="retracted"],
.floor-state[data-status="fail"] {
  color: var(--alarm);
}

.floor-state[data-status="designed"],
.floor-state[data-status="not-run"],
.floor-state[data-status="unchecked"],
.floor-state[data-status="unknown"] {
  color: var(--warn);
}

.floor-state[data-status="not-claimed"] {
  color: var(--ink-2);
}