/* ═══════════════════════════════════════════════════════════════
   NOW, drawn to the Version 12 mockup (Stage 1, PR 2b; the binding design language, ruled 2026-10-05). The mockup
   governs look, layout and form; the tokens and the legibility floor govern exact values, and the grading names each
   difference. Weights 400/500 only; sentence case; no purple.
   © 2026 VeriPass AI, Inc. All rights reserved.
   ═══════════════════════════════════════════════════════════════ */
.now { max-width: 1080px; display: flex; flex-direction: column; gap: 22px; }
.now-head { display: flex; flex-direction: column; gap: 4px; }
.now-headline { margin: 0; font: 500 30px/1.25 var(--sans); color: var(--text); }
.now-headline-count { font: inherit; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent-border); text-underline-offset: 6px; }
.now-fixed { font: 400 13px var(--sans); color: var(--text-muted); }

/* the four 24-hour tiles */
.now-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.now-tile { text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 2px; color: var(--text); cursor: pointer; font-family: var(--sans);
  transition: border-color var(--transition-fast), background-color var(--transition-fast); }
/* hover moves the border only: the accent tint drops red text to 4.17:1, under the floor (measured 2026-10-06) */
.now-tile:hover { border-color: var(--accent-hover); }
.now-tile:focus-visible, .now-bar:focus-visible, .now-item:focus-visible, .now-panel-close:focus-visible, .now-headline-count:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.now-tile-label { font: 500 14px var(--sans); color: var(--text-secondary); }
.now-tile-value { font: 500 36px/1.15 var(--mono); color: var(--text); }
.now-tile-value.is-absent { font: 500 20px/1.6 var(--sans); color: var(--text-muted); }
.now-tile-sub { font: 500 13px var(--sans); color: var(--text-secondary); }
.now-ink-certified { color: var(--certified); }
.now-ink-flagged { color: var(--flagged); }
.now-ink-failed { color: var(--red-soft); }

/* the seismograph: the last 24 hours, one bar an hour */
.now-seismo { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.now-seismo-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.now-seismo-title { font: 500 16px var(--sans); color: var(--text); }
.now-legend { display: flex; flex-wrap: wrap; gap: 14px; font: 500 13px var(--sans); color: var(--text-secondary); }
.now-legend span { display: flex; align-items: center; gap: 6px; }
.now-swatch { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); opacity: .55; }
.now-dot { width: 9px; height: 9px; border-radius: 50%; }
.now-dot-flagged { background: var(--flagged); }
.now-dot-failed { background: var(--red-soft); }
.now-bars { display: flex; align-items: flex-end; gap: 3px; height: 136px; border-bottom: 1px solid var(--border-light); }
.now-bar { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 3px; cursor: pointer; }
.now-bar-fill { display: block; width: 100%; max-width: 24px; background: var(--accent); opacity: .55; border-radius: 4px 4px 0 0; }
.now-bar:hover .now-bar-fill { opacity: 1; }
.now-bar-mark { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.now-bar-mark.flagged { background: var(--flagged); }
.now-bar-mark.failed { background: var(--red-soft); }
.now-axis { display: flex; justify-content: space-between; font: 500 12px var(--mono); color: var(--text-muted); }
.now-absence { font: 400 14px var(--sans); color: var(--text-secondary); }

/* the list: what needs you, at most five */
.now-list { display: flex; flex-direction: column; gap: 12px; }
.now-item { text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 22px;
  display: flex; gap: 16px; align-items: center; color: var(--text); cursor: pointer; font-family: var(--sans);
  transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.now-item:hover { border-color: var(--accent-hover); }
.now-item.is-absent { cursor: default; }
.now-item.is-absent:hover { border-color: var(--border); background: var(--card); }
.now-kind { flex: 0 0 auto; font: 500 12px var(--mono); letter-spacing: 1px; border-radius: var(--radius-sm); padding: 4px 8px; }
/* the chips are outlined, never filled: red on a 14% red fill measured 4.15:1, under the floor (2026-10-06); on the card it is 4.71:1 */
.now-kind.failed { color: var(--red-soft); background: transparent; border: 1px solid rgba(239, 68, 68, .45); }
.now-kind.escalation { color: var(--red-soft); background: transparent; border: 1px solid rgba(239, 68, 68, .45); }
.now-kind.flagged { color: var(--flagged); background: transparent; border: 1px solid rgba(217, 119, 6, .45); }
.now-kind.gap { color: var(--accent-hover); background: var(--accent-dim); border: 1px solid var(--accent-border); }
.now-kind.weekly { color: var(--text-secondary); background: rgba(148, 163, 184, .1); border: 1px solid var(--border-light); }
.now-item-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.now-item-title { font: 500 17px var(--sans); color: var(--text); }
.now-item-summary { font: 400 15px var(--sans); color: var(--text-secondary); }
.now-chev { flex: 0 0 auto; color: var(--text-muted); }

/* a read that failed says so, beside where its number would be */
.now-failed-read { font: 400 14px var(--sans); color: var(--red-soft); }

/* the panel: what a number counts, opened */
.now-panel-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 300; }
.now-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--bg); border-left: 1px solid var(--border-light);
  z-index: 301; display: flex; flex-direction: column; }
.now-panel-head { padding: 22px 24px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
.now-panel-titles { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.now-panel-kicker { font: 500 12px var(--mono); letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; }
.now-panel-title { margin: 0; font: 500 20px/1.3 var(--sans); color: var(--text); }
.now-panel-close { background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); border-radius: var(--radius-sm); min-height: 34px; padding: 5px 12px; font: 400 13px var(--sans); cursor: pointer; }
.now-panel-body { padding: 16px 24px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.now-panel-count { font: 400 14px var(--sans); color: var(--text-secondary); }
.now-rec { display: grid; grid-template-columns: 100px 72px 56px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 400 14px var(--sans); color: var(--text); }
.now-rec-time, .now-rec-score { font: 400 13px var(--mono); color: var(--text-secondary); white-space: nowrap; }
.now-rec-verdict { font: 500 12px var(--mono); letter-spacing: 1px; }
.now-rec-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-rec a, .now-panel a { color: var(--accent-hover); }
/* the doors sit under the system's name, so the name keeps the row's width: one row crushed it to its first letter (PR 2b shot 04) */
.now-rec-doors { grid-column: 4; display: flex; gap: 14px; white-space: nowrap; }

/* the Now badge on the rail: the measured count of what needs you */
.rail-badge { margin-left: auto; font: 500 12px var(--mono); background: var(--accent); color: var(--bg); border-radius: 4px; padding: 1px 7px; }
.rail-badge[hidden] { display: none; }

/* the recorded alerts on the Alert list (ACT-alert-ack): the level word, coloured by class so the floor can read it */
.rec-level-critical { color: var(--red-soft); }
.rec-level-warning, .rec-level-info { color: var(--flagged); }

/* THE ALERT LIST (NOW's second tab), held to the legibility floor (UI-LEGIBILITY-FLOOR-1; the founder's screenshot verdict,
   2026-10-06): 12px minimum at weight 500, 13px body, 4.5:1, colours from tokens. The cards were inline-styled at 10-12px. */
.al-filter .tr-btn { font-size: 13px; }
.al-card { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border-light); border-radius: var(--radius-md);
  padding: 16px 18px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color var(--transition-fast); }
.al-card:hover { border-color: var(--accent-hover); }
.al-card.sev-critical, .al-card.sev-high { border-left-color: var(--red-soft); }
.al-card.sev-medium { border-left-color: var(--flagged); }
.al-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.al-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.al-chip { font: 500 12px var(--mono); letter-spacing: 1px; border-radius: 4px; padding: 3px 8px; background: transparent; border: 1px solid var(--border-light); color: var(--text-muted); }
.al-chip.sev-critical, .al-chip.sev-high { color: var(--red-soft); border-color: rgba(239, 68, 68, .45); }
.al-chip.sev-medium { color: var(--flagged); border-color: rgba(217, 119, 6, .45); }
.al-name { font: 500 15px var(--sans); color: var(--text); }
.al-verdict { font: 500 13px var(--mono); letter-spacing: 1px; }
.al-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 13px var(--mono); color: var(--text-muted); }
.al-bcs { color: var(--text); }
.al-desc { font: 400 14px/1.5 var(--sans); color: var(--text-secondary); }
.al-more { font: 500 13px var(--sans); color: var(--accent-hover); }
.al-empty { text-align: center; padding: 60px 0; }
.al-empty-title { font: 500 15px var(--sans); color: var(--text); }
.al-empty-sub { font: 400 14px var(--sans); color: var(--text-muted); margin-top: 4px; }

/* THE DEMO MARKER (ruled 2026-10-06): demo only, shown by the shell when /api/env answers "demo". The floor: 12px at 500. */
.demo-marker { position: sticky; top: 0; z-index: 9999; text-align: center; padding: 5px 12px; background: var(--accent-dim);
  border-bottom: 1px solid var(--accent-border); color: var(--accent-hover); font: 500 12px var(--mono); letter-spacing: 1px; }
.demo-marker[hidden] { display: none; }

/* THE CERTIFICATE ROW (dashboard/v3/js/certrow.js, V3CertRow; canon rule 2, ruled 2026-10-06): one row, two doors, every host. */
.cert-row { display: grid; grid-template-columns: 92px 72px 56px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 400 14px var(--sans); color: var(--text); }
.cert-row-time, .cert-row-score { font: 400 13px var(--mono); color: var(--text-secondary); }
.cert-row-verdict { font: 500 12px var(--mono); letter-spacing: 1px; }
.cert-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cert-row a { color: var(--accent-hover); }
.cert-row-doors { grid-column: 4; display: flex; gap: 14px; white-space: nowrap; }

/* THE UNDER POLICY LANDING (dashboard/v3/js/underpolicy.js), drawn to the Version 12 mockup; tokens and the floor govern values:
   12px minimum at weight 500, 13px body, 4.5:1, weights 400/500, hover moves the border only (the accent tint fails red text). */
.up { display: flex; flex-direction: column; gap: 22px; }
.up-head { display: flex; flex-direction: column; gap: 6px; }
.up-title { margin: 0; font: 500 30px/1.25 var(--sans); color: var(--text); }
.up-sub { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--text-secondary); }
.up-sub a, .up-notlisted a, .up-row-fresh a { color: var(--accent-hover); }
.up-list { display: flex; flex-direction: column; gap: 10px; }
.up-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 18px; align-items: center;
  padding: 14px 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); text-decoration: none;
  transition: border-color var(--transition-fast); }
.up-row:hover { border-color: var(--accent-hover); }
.up-row:focus-visible, .up-tile:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.up-row-name { font: 500 15px var(--sans); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-row-count { font: 500 13px var(--mono); letter-spacing: 0.5px; }
.up-row-window { font: 400 13px var(--sans); color: var(--text-secondary); letter-spacing: 0; }
.up-row-fresh { display: flex; flex-direction: column; gap: 5px; }
.up-fresh { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.up-fresh-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.up-row-age, .up-fresh-unknown { font: 400 13px var(--sans); color: var(--text-secondary); }
.up-note { margin: 0; font: 400 13px var(--sans); color: var(--text-secondary); }
.up-notlisted-block { display: flex; flex-direction: column; gap: 6px; }
/* THE NOT-LISTED GRID (2026-10-07): columns, not prose; tabular figures so counts align on their digits */
/* sized to its content and anchored left (verdict 2026-10-07): each column hugs its content, with one 40px gutter between columns */
.up-nl { border-collapse: collapse; width: auto; align-self: flex-start; font: 400 14px var(--sans); color: var(--text-secondary); }   /* align-self: the block is a flex column, which would stretch it */
.up-nl-title { caption-side: top; text-align: left; font: 500 14px var(--sans); color: var(--text); padding: 0 0 8px; }
.up-nl-row { border-top: 1px solid var(--border); }
.up-nl-row:last-child { border-bottom: 1px solid var(--border); }
.up-nl th, .up-nl td { padding: 8px 0; vertical-align: baseline; }
.up-nl .up-nl-name { text-align: left; font: 500 14px var(--sans); color: var(--text); white-space: nowrap; padding-right: 40px; }
.up-nl-n, .up-nl-total { text-align: right; font: 500 14px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.up-nl .up-nl-of { text-align: center; padding: 8px 6px; color: var(--text-muted); white-space: nowrap; }
.up-nl .up-nl-total { padding-right: 40px; }
.up-nl .up-nl-verdict { text-align: left; font: 500 13px var(--mono); letter-spacing: 0.5px; white-space: nowrap; padding-right: 40px; }
.up-nl-unclassified { color: var(--text-muted); }
.up-nl-open { text-align: right; white-space: nowrap; }
.up-nl-open a { color: var(--accent-hover); }
.up-notlisted { font: 400 14px var(--sans); color: var(--text-secondary); }
.up-notlisted .up-row-name { font: 500 14px var(--sans); }
.up-absence { font: 400 14px var(--sans); color: var(--text-secondary); }
.up-pre { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.up-pre-head { display: flex; flex-direction: column; gap: 4px; }
.up-pre-title { margin: 0; font: 500 16px var(--sans); color: var(--text); }
.up-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.up-tile { text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
  color: var(--text); cursor: pointer; font-family: var(--sans); transition: border-color var(--transition-fast); }
.up-tile:hover { border-color: var(--accent-hover); }
.up-tile.is-absent, .up-tile.is-zero { cursor: default; }
.up-tile.is-absent:hover, .up-tile.is-zero:hover { border-color: var(--border); }
.up-tile-value { font: 500 36px/1.15 var(--mono); color: var(--text); }
.up-tile.is-absent .up-tile-value { font: 500 20px/1.6 var(--sans); color: var(--text-secondary); }
.up-tile-label { font: 500 14px var(--sans); color: var(--text-secondary); }
.up-tile-sub { font: 400 13px var(--sans); color: var(--text-secondary); }
.up-panel-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.up-panel-meta { font: 400 13px var(--mono); color: var(--text-secondary); }
.up-carried { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.up-carried-title { margin: 0; font: 500 14px var(--sans); color: var(--text-secondary); }