/* Frame 1 — Operations Risk Console shell.
 * --------------------------------------------------------------------------
 * Structural primitives for the 3-col left-rail shell, sticky audit strip,
 * trust-chip + mono numerics primitives, and the dense-table issue board.
 *
 * Paired with web/templates/layout.html (overridden to use .frame1-shell),
 * _frame1_rail.html, _frame1_audit_strip.html, and the rewritten
 * issue_board.html dense table.
 *
 * Tokens mirror design-references/design_handoff_tenuris_console/colors_and_type.css
 * (identical accent #1F5EFF, border #E5E9EE, ink #0F1720, severity stack).
 * --------------------------------------------------------------------------
 */

/* ==========================================================================
 * Shell grid — left rail + main + sticky audit strip
 * ========================================================================== */

body.frame1-shell {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  min-height: 100vh;
}

.app-grid {
  display: grid;
  grid-template-columns: var(--rail-w, 220px) 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "rail main"
    "rail audit";
  min-height: 100vh;
}

.app-grid > .rail   { grid-area: rail; }
.app-grid > .main   { grid-area: main; }
.app-grid > .audit-strip { grid-area: audit; }

body.frame1-shell.rail-collapsed {
  --rail-w: 56px;
}

/* ==========================================================================
 * Left rail
 * ========================================================================== */

.rail {
  background: var(--paper, #fff);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: var(--z-nav, 40);
}

.rail-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.rail-brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

/* Bundle spec (kit.css .rail-mark): 22px square, 1px ink border, 2px radius,
 * mono 11px/700. Earlier 28px/4px-radius was too chunky and broke the
 * ledger-dense rhythm that the rest of the rail sets up. */
.rail-brand-mark {
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink, #0F1720);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink, #0F1720);
  letter-spacing: 0;
  flex-shrink: 0;
}

.rail-brand-wordmark {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink, #0F1720);
}

.rail-collapsed .rail-brand-wordmark,
.rail-collapsed .rail-item-label,
.rail-collapsed .rail-item-count,
.rail-collapsed .rail-cmd-label,
.rail-collapsed .rail-cmd-kbd,
.rail-collapsed .rail-identity-body {
  display: none;
}

.rail-collapse-toggle {
  background: transparent;
  border: 1px solid transparent;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 120ms, border-color 120ms;
}
.rail-collapse-toggle:hover {
  background: var(--surface-inset);
  border-color: var(--border);
}

.rail-collapse-icon {
  font-size: 14px;
  line-height: 1;
  transition: transform 180ms ease;
}
.rail-collapsed .rail-collapse-icon { transform: rotate(180deg); }

/* Nav list — bundle density (kit.css .rail-nav / .rail-item):
 *   30px row / 12px label / 2px radius / 1px gap between items.
 *   Active = accent-tint wash + accent color (no left-bar indicator and
 *   no font-weight bump — the wash does the signalling). Counts are plain
 *   mono 11px, no pill chrome. Pill counts + left-bar indicators were an
 *   earlier Tailwind-adjacent tic that broke the ledger rhythm. */
.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.rail-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 8px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--text-secondary, #334155);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  transition: background 120ms, color 120ms;
  position: relative;
}

.rail-item:hover {
  background: var(--surface-hover, #F8FAFC);
  color: var(--ink, #0F1720);
}

.rail-item.is-active {
  background: var(--accent-tint, var(--primary-soft, #EBF1FF));
  color: var(--primary, #1F5EFF);
  font-weight: 500;
}

.rail-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.9;
}
.rail-item-icon svg { width: 16px; height: 16px; }

.rail-item-label {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.rail-item-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted, #64748B);
  background: transparent;
  padding: 0;
  border-radius: 0;
  min-width: 0;
  text-align: right;
  line-height: 1;
}

.rail-item.is-active .rail-item-count {
  background: transparent;
  color: var(--primary, #1F5EFF);
}

/* Search / Cmd-K trigger */
.rail-cmd {
  padding: 0 10px 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
}

.rail-cmd-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper, #fff);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.rail-cmd-btn:hover {
  border-color: var(--primary, #1F5EFF);
  color: var(--primary, #1F5EFF);
}

.rail-cmd-label { text-align: left; }

.rail-cmd-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  display: inline-flex;
  gap: 2px;
}
.rail-cmd-kbd span {
  padding: 1px 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-inset);
}

/* Reviewer identity card pinned bottom */
.rail-identity {
  padding: 10px;
  border-top: 1px solid var(--border);
}

.rail-identity-card {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--paper, #fff);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 120ms;
  text-align: left;
}
.rail-identity-card:hover {
  border-color: var(--primary, #1F5EFF);
}

.rail-identity-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink, #0F1720);
  color: var(--paper, #fff);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.rail-identity-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #0F1720);
  line-height: 1.2;
}
.rail-identity-name.is-unset { color: var(--text-muted); font-weight: 500; font-style: italic; }

.rail-identity-role {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Collapsed state — icons only */
.rail-collapsed .rail-item {
  grid-template-columns: 22px;
  padding: 8px 0;
  justify-content: center;
  justify-items: center;
}
.rail-collapsed .rail-brand {
  padding: 14px 8px 12px;
  justify-content: center;
}
.rail-collapsed .rail-cmd {
  padding: 10px 8px;
}
.rail-collapsed .rail-cmd-btn {
  grid-template-columns: 16px;
  padding: 8px 0;
  justify-content: center;
  justify-items: center;
}
.rail-collapsed .rail-identity {
  padding: 8px;
}
.rail-collapsed .rail-identity-card {
  grid-template-columns: 32px;
  justify-content: center;
  padding: 4px;
}

/* ==========================================================================
 * Main content area
 * ========================================================================== */

.frame1-shell .main {
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-topstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 24px;
  background: var(--paper, #fff);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

.main-topstrip .demo-banner {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-size: inherit;
}

/* Pass-2 topstrip bundle primitives (kit.css parity: .ts-crumbs / .ts-right /
 * .ts-sep / .ts-crumb / .ts-crumb-last / .chip / .ts-presence). 1px hairline,
 * 2px radius, single #1F5EFF accent. #22C55E presence dot is the only
 * semantic-success accent permitted in Frame 1 chrome. */
.main-topstrip .ts-crumbs { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary, #334155); min-width: 0; }
.main-topstrip .ts-right  { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted, #64748B); }
.main-topstrip .ts-sep    { color: var(--border-strong, #CBD5E1); }
.main-topstrip .ts-crumb      { color: var(--text-muted, #64748B); }
.main-topstrip .ts-crumb-last { color: var(--ink, #0F1720); font-weight: 500; }
.main-topstrip .chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface, #fff); color: var(--text-secondary, #334155); font-size: 11px; }
.main-topstrip .chip-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.main-topstrip .ts-presence { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; flex-shrink: 0; }

.main-content {
  flex: 1;
  padding: 28px 32px 48px;
  min-width: 0;
}

/* ==========================================================================
 * Audit strip (sticky bottom) — light-surface hairline footer (bundle parity).
 *
 * Bundle spec (kit.css .audit-bar): 28px tall, white surface, 1px top
 * hairline, mono 11px ink-2, green status dot. Replaces the prior dark-
 * inverted strip — the bundle's ambient-identity chrome is deliberately
 * quiet, not a floorboard stripe. Values stay tabular-nums mono so the
 * eye can scan live metrics without shifting gears.
 * ========================================================================== */

.audit-strip {
  position: sticky;
  bottom: 0;
  background: var(--surface, #fff);
  color: var(--text-secondary, #334155);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 28px;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 11px;
  border-top: 1px solid var(--border, #E5E9EE);
  z-index: var(--z-sticky, 10);
}

.audit-strip::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  margin-right: 2px;
  flex-shrink: 0;
}

.audit-strip-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.audit-strip-cell--right {
  margin-left: auto;
}

.audit-strip-label {
  color: var(--text-muted, #64748B);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audit-strip-value {
  color: var(--text-secondary, #334155);
  font-weight: 500;
}

.audit-strip-value.trust-chip {
  border-bottom: 1px dotted var(--border-strong, #CBD5E1);
  padding-bottom: 1px;
}
.audit-strip-value.trust-chip:hover {
  border-bottom-color: var(--primary, #1F5EFF);
  color: var(--primary, #1F5EFF);
}

/* Subtle vertical separators between cells, bundle "·" rhythm. */
.audit-strip-cell + .audit-strip-cell::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--border, #E5E9EE);
  margin-right: 6px;
}
.audit-strip-cell--right::before { display: none; }

/* ==========================================================================
 * Trust-chip + mono primitives (shared across all Frame X surfaces)
 * ========================================================================== */

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.trust-chip {
  border-bottom: 1px dotted var(--primary, #1F5EFF);
  padding-bottom: 1px;
  cursor: help;
}

/* Trust-chip popover — paired with web/static/js/trust_chip_popover.js.
 * Activates when a chip carries a JSON `data-trust` attribute. Hairline
 * card, 2px radius, mono data rows — mirrors the bundle Trust component. */
.trust-popover {
  position: absolute;
  min-width: 220px;
  max-width: 320px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-secondary, #334155);
  z-index: var(--z-popover, 1300);
  pointer-events: auto;
  line-height: 1.45;
}

.trust-popover-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 4px;
}

.trust-popover-row {
  display: contents;
}

.trust-popover-key {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #64748B);
  white-space: nowrap;
}

.trust-popover-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink, var(--text));
  word-break: break-word;
}

/* Severity text-color utilities — mirror the badge set.
 * `.severity-critical` fills the tier added when the dense issue table
 * started bucketing score>=85 as its own row class. */
.severity-critical { color: var(--severity-critical, #B91C1C); }

/* ==========================================================================
 * Dense issue table — Frame 1 center pane
 * ========================================================================== */

/* Bundle spec (kit.css .tbl): border-top + border-bottom hairlines only,
 * no outer border, no radius. Header row 28px, body 40px. Rounded-6px
 * framed tables were a materialist-SaaS habit; the governed console
 * wants hairlines, not cards. */
.issue-dense-table {
  width: 100%;
  /* `table-layout: fixed` is required — without it, `white-space: nowrap`
   * on the td lets the browser grow the table beyond its 800px column
   * to fit the longest row (1300px+), visually invading the sidebar.
   * Fixed layout pins the table to container width and honors the
   * `width:10%/18%/12%/9%/12%` hints on the <th> row for proportional
   * columns. The row-level `display: table-row` reset above ensures the
   * legacy `.issue-row { display: flex }` from style.css doesn't break it. */
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  overflow: visible;
  font-size: 12px;
  /* Lineage-thread geometry tokens (Pass-3 #5). Overridable per-surface if
   * a column-width tweak shifts the severity rail or the right edge. */
  --lineage-inset-start: 120px;  /* clears severity rail + first-cell padding */
  --lineage-inset-end: 28px;     /* leaves a gutter before the stub zone */
  --lineage-stub-width: 14px;    /* row-to-panel connector length */
}

.issue-dense-table thead th {
  background: var(--surface-inset, #EEF1F5);
  color: var(--text-muted, #64748B);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 12px;
  height: 28px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.issue-dense-table thead th.num { text-align: right; }

.issue-dense-table tbody tr {
  cursor: pointer;
  transition: background 80ms;
  position: relative;
  height: 40px;  /* Frame 1 spec: 40px row heights, density over whitespace */
  /* Restore table-row semantics. Legacy `style.css .issue-row { display:flex }`
   * was built for the pre-Pass-1 card list and bleeds onto these <tr>s because
   * the class name was reused. Without this reset, the flex rule collapses
   * every row into a 50px-wide, 18px-tall flex container and the cells render
   * as if the table were broken. Reset border/padding/bg/radius for the same
   * reason — the legacy rule sets all four for card chrome we don't want. */
  display: table-row;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.issue-dense-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--border-subtle, #e7edf2);
}

.issue-dense-table tbody tr:hover {
  background: var(--surface-hover, #F8FAFC);
}

.issue-dense-table tbody tr.is-selected,
.issue-dense-table tbody tr.is-selected:hover {
  background: var(--primary-soft, #EDF3FF);
}

.issue-dense-table tbody tr[data-kbd-focused] {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.issue-dense-table td {
  padding: 8px 12px;
  vertical-align: middle;
  font-family: var(--font-sans);
  color: var(--ink, #0F1720);
}

.issue-dense-table td.num,
.issue-dense-table td.mono,
.issue-dense-table th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 12px;
  color: var(--ink);
}

.issue-dense-table td.severity-cell {
  padding-left: 16px;
  position: relative;
}

.issue-dense-table td.severity-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}

.issue-dense-table tr.sev-critical td.severity-cell::before { background: var(--severity-critical, #B91C1C); }
.issue-dense-table tr.sev-high td.severity-cell::before     { background: var(--severity-high, #DC2626); }
.issue-dense-table tr.sev-medium td.severity-cell::before   { background: var(--severity-medium, #D97706); }
.issue-dense-table tr.sev-low td.severity-cell::before      { background: var(--severity-low-stripe, var(--border)); }

.issue-dense-table .issue-title {
  font-weight: 500;
  color: var(--ink);
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* inline-block (not block): keeps the severity dot + "Also affects" chip
   * on the same visual line as the title. `display: block` forced those
   * siblings onto new lines, which the 40px row clipped — producing the
   * overlap where chips rendered on top of the row below. */
  display: inline-block;
  vertical-align: middle;
}

/* Single-line cells — required because the row is locked to 40px and
 * any wrap would re-introduce the chip-overlap bug. `overflow: hidden`
 * clips content to the cell's column boundary so long asset names don't
 * visually escape into the sidebar column to the right. `text-overflow:
 * ellipsis` handles text-node content in cells without a dedicated
 * inner span (e.g. Asset / Reviewer cells). */
.issue-dense-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.issue-dense-table .issue-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.issue-dense-table .issue-related-inline {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: 3px;
  vertical-align: middle;
}

.issue-dense-table .issue-related-fix {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-soft);
}

.issue-dense-table .severity-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.issue-dense-table tr.sev-critical .severity-dot { background: var(--severity-critical, #B91C1C); }
.issue-dense-table tr.sev-high .severity-dot     { background: var(--severity-high, #DC2626); }
.issue-dense-table tr.sev-medium .severity-dot   { background: var(--severity-medium, #D97706); }
.issue-dense-table tr.sev-low .severity-dot      { background: var(--text-muted); }

/* ==========================================================================
 * Issue board 2-col split override for Frame 1
 * ========================================================================== */

.frame1-shell .issue-board-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  margin-top: 16px;
  align-items: start;
}

.frame1-shell .issue-board-list {
  min-width: 0;
}

.frame1-shell .issue-board-sidebar {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: var(--paper, #fff);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
}

/* ==========================================================================
 * Evidence-chain timeline (right context panel signature move)
 * ========================================================================== */

.evidence-chain {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.evidence-chain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.evidence-chain-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.evidence-chain-list {
  display: grid;
  gap: 6px;
}

.evidence-chain-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-size: 11.5px;
  line-height: 1.5;
}

.evidence-chain-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid var(--border);
  text-align: center;
  color: var(--text-secondary);
  background: var(--surface-inset);
}
.evidence-chain-chip.type-telemetry { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.evidence-chain-chip.type-wo        { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }
.evidence-chain-chip.type-ack       { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.evidence-chain-chip.type-ai        { border-color: var(--signal); color: var(--signal); background: var(--signal-soft); }
.evidence-chain-chip.type-queue     { border-color: var(--text-muted); color: var(--text-muted); background: var(--surface-inset); }

.evidence-chain-when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

/* Suggested next action panel */
.next-action-panel {
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
}

.next-action-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.next-action-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.next-action-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.next-action-ribbon {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.next-action-ribbon .mono { color: var(--ink); }

.next-action-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.next-action-actions .btn {
  font-size: 11.5px;
  padding: 5px 10px;
}

/* ==========================================================================
 * Print + fallbacks
 * ========================================================================== */

/* ==========================================================================
 * Pass-3 #5 — Hairline lineage threads on row hover.
 *
 * Mirrors the bundle signature from kit.css (`.tbl .r.col-issues .lin-seg` +
 * `.lin-to-panel`) and the Pass-2 Frame 3 pattern (`.diff-lineage-thread`
 * with stroke-dasharray: 3 3). Pure CSS, no JS, no DOM changes — pseudo-
 * elements ride the existing `position: relative` row. Neutral muted token
 * only (never the #1F5EFF accent). Intentionally ambient: opacity 0.55 so
 * reviewers read it as a provenance cue, not an attention effect.
 * ========================================================================== */

/* Row-hover lineage thread — rendered as a <tr> background-image rather than
 * a pseudo-element. The pseudo approach was load-bearing through two bugs:
 *
 *   (1) `::before`/`::after` on a `display:table-row` element gets promoted
 *       to an implicit table-cell by Chromium, which silently inserted a
 *       phantom column and shifted every real <td> one column right.
 *   (2) Re-homing the pseudo to `td.severity-cell::after` required a fragile
 *       `right: calc(... - 700%)` magic number derived from the 9% first-
 *       column width (Gemini on PR #32 flagged this — if column widths
 *       change the thread no longer reaches the row's right inset).
 *
 * The background-image approach sidesteps both: no pseudo means no column
 * promotion, and `background-size` / `background-position` use only the
 * existing `--lineage-inset-start` / `--lineage-inset-end` tokens — no
 * column-width coupling.
 *
 * The repeating-linear-gradient mirrors the Frame 3 SVG `stroke-dasharray:
 * 3 3` in CSS-only form (2px ink · 3px gap ≈ the same visual cadence),
 * using only the neutral `--text-muted` token (never the #1F5EFF accent —
 * the hairline is intentionally ambient, not attention-grabbing).
 *
 * Trade-off: CSS can't crossfade between two background-images, so the
 * 140ms opacity fade of the previous pseudo approach is dropped. The
 * row-background-color transition (line ~599) still provides the primary
 * hover affordance; the thread is an ambient layer beneath it. Because
 * there is no transition on background-image, reduced-motion users are
 * covered automatically — no media query needed. */
.issue-dense-table tbody tr:hover {
  background-image: repeating-linear-gradient(
    to right,
    var(--text-muted, #708095) 0 2px,
    transparent 2px 5px
  );
  background-position: var(--lineage-inset-start, 120px) 50%;
  background-size:
    calc(100% - var(--lineage-inset-start, 120px) - var(--lineage-inset-end, 28px))
    1px;
  background-repeat: no-repeat;
}

/* Selected rows use the `background` shorthand (line ~613) which already
 * wipes background-image, so they don't need an explicit reset. */

@media print {
  .rail, .audit-strip, .main-topstrip, .rail-cmd { display: none; }
  .app-grid { display: block; }
  .main-content { padding: 0; }
  /* Ambient provenance cue stays out of hard copy. */
  .issue-dense-table tbody tr:hover { background-image: none; }
}

@media (max-width: 900px) {
  .app-grid { grid-template-columns: 56px 1fr; }
  .rail-brand-wordmark,
  .rail-item-label,
  .rail-item-count,
  .rail-cmd-label,
  .rail-cmd-kbd,
  .rail-identity-body { display: none; }
  .rail-item { grid-template-columns: 22px; padding: 8px 0; justify-content: center; }
  .rail-cmd-btn { grid-template-columns: 16px; padding: 8px 0; justify-content: center; }
  .rail-identity-card { grid-template-columns: 32px; justify-content: center; padding: 4px; }
  .audit-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .audit-strip-cell--right { margin-left: 0; }
  .frame1-shell .issue-board-split { grid-template-columns: 1fr; }
  .frame1-shell .issue-board-sidebar { position: static; max-height: none; }
}