/* === Satsignal Disclosure Redaction Tool — shared stylesheet ===
   Loaded by BOTH:
     - the authed workspace page (customer/templates.py
       disclosure_builder_page(), rendered inside the dashboard _shell), and
     - the public standalone page (web/static/disclosure-builder/index.html).

   Design: every colour references a dashboard / apex design token by NAME,
   each with a literal fallback matching satsignal.cloud's dark theme. On the
   workspace page the live _APP_CSS :root tokens are inherited, so the tool
   tracks any future palette change automatically; standalone, the fallbacks
   render the same look. We deliberately DO NOT redeclare :root colour tokens
   (that would clobber the dashboard palette and create a new drift point), and
   every rule is scoped to .db-tool / body.db-standalone so nothing leaks onto
   the surrounding dashboard chrome.

   Layout (2026-06-05 workbench redesign): the tool is a two-pane redaction
   WORKBENCH, not a stacked form. The canvas is widened on both shells, the
   loaded file/proof collapse into two compact status tiles, and the selector +
   tabbed preview sit side-by-side in .redaction-workspace. */

/* Self-hosted brand faces — same-origin under /static/fonts (served on every
   notary vhost). Mirrors web/templates.py so the standalone page is on-brand;
   a harmless duplicate on the workspace page (same family + src). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("/static/fonts/Inter.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal;
  font-weight: 100 800; font-display: swap;
  src: url("/static/fonts/JetBrainsMono.woff2") format("woff2"); }

/* ---- Standalone page chrome (public index.html only) ------------------- */
body.db-standalone {
  margin: 0;
  background: var(--bg, #060709);
  color: var(--ink, #e9edf3);
  font-family: var(--sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.db-brandbar {
  display: flex; align-items: center; gap: 0.55em;
  max-width: 75rem; margin: 0 auto; padding: 1.05rem 1.6rem;
}
.db-brandbar img { width: 22px; height: 22px; display: block; }
.db-brandbar .db-wordmark {
  font-weight: 600; letter-spacing: -0.01em; font-size: 1.02rem;
  color: var(--ink, #e9edf3);
}
.db-brandbar .db-pill {
  margin-left: 0.4em; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-strong, #73c2ff);
  background: var(--accent-tint, #0f1d2b);
  border: 1px solid var(--accent-tint-strong, #15324b);
  padding: 0.18em 0.6em; border-radius: 999px;
}
/* Wide workbench canvas (public shell). Header prose stays reading-width via
   .db-lead's own max-width; the workspace grid uses the full width below. */
body.db-standalone main {
  max-width: 75rem; margin: 0 auto; padding: 1rem 1.6rem 4rem;
}
.db-head {
  border-top: 1px solid var(--line, #232b35); padding-top: 1.6rem;
  margin-bottom: 0.4rem;
}
.db-head h1 {
  margin: 0 0 0.3em; font-size: 1.75rem; letter-spacing: -0.02em;
  line-height: 1.15; color: var(--ink, #e9edf3);
}

/* ---- Authed shell: widen the workbench beyond the 760px reading column ---
   The dashboard `main.app-main` caps at 760px for prose pages. The two-pane
   redaction tool needs the wide canvas; scope the override to pages that
   actually contain a .db-tool so no other dashboard page is affected, and keep
   the intro lead at reading width. (:has is supported by every evergreen
   browser we target; a non-supporting browser keeps the 760px column —
   degraded but fully usable, since the workspace collapses to one column
   below 960px anyway.) */
main.app-main:has(.db-tool) { max-width: 1180px; }
main.app-main:has(.db-tool) .app-lead { max-width: 46em; }

/* ---- Shared tool content (both pages) --------------------------------- */
.db-tool { font-family: var(--sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); }

.db-lead {
  color: var(--ink-soft, #d3d9e2); font-size: 1rem; line-height: 1.55;
  margin: 0 0 1.5em; max-width: 46em;
}
.db-tool code, .db-lead code {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9em;
  background: var(--inset, #08090c);
  color: var(--ink-soft, #d3d9e2);
  padding: 0.08em 0.4em; border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--line, #232b35);
}

.db-tool section {
  /* faint top sheen over the surface token — sharpens the card edge without a
     new colour (the gradient is white at <3% alpha). */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0)),
    var(--surface, #141a22);
  border: 1px solid var(--line, #232b35);
  border-radius: var(--radius, 8px);
  padding: 1.25em 1.4em;
  margin: 0 0 1em;
  box-shadow: var(--shadow-sm, 0 1px 0 rgba(0,0,0,0.3), 0 18px 40px -18px rgba(0,0,0,0.55));
}
.db-tool section[hidden] { display: none; }
.db-tool h2 {
  margin: 0 0 0.7em; font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.005em; color: var(--ink, #e9edf3);
}

.db-tool label { display: block; margin: 0.5em 0 0; color: var(--ink-soft, #d3d9e2); }
.db-tool label > span { display: block; margin-bottom: 0.45em; font-size: 0.93rem; }

/* File pickers */
.db-tool input[type="file"] {
  display: block; width: 100%; box-sizing: border-box;
  color: var(--ink-soft, #d3d9e2); font-size: 0.9rem;
  background: var(--inset, #08090c);
  border: 1px solid var(--line-strong, #38434f);
  border-radius: var(--radius-sm, 4px);
  padding: 0.55em 0.6em; cursor: pointer;
}
.db-tool input[type="file"]:hover { border-color: var(--accent, #3aa0ff); }
.db-tool input[type="file"]::file-selector-button {
  margin-right: 0.9em; cursor: pointer; font-family: inherit;
  color: var(--ink, #e9edf3);
  background: var(--surface-3, #1b222c);
  border: 1px solid var(--line-strong, #38434f);
  border-radius: var(--radius-sm, 4px);
  padding: 0.45em 0.9em; font-weight: 600; font-size: 0.88rem;
}
.db-tool input[type="file"]::file-selector-button:hover {
  border-color: var(--accent, #3aa0ff); color: var(--accent, #3aa0ff);
}

/* Primary action button — mirrors the dashboard .btn.primary */
.db-tool button {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: var(--accent-strong, #73c2ff); color: #04121f;
  border: 1px solid var(--accent-strong, #73c2ff);
  border-radius: var(--radius-sm, 4px);
  padding: 0.7em 1.3em; font-size: 0.95rem; font-weight: 600;
  font-family: inherit; cursor: pointer; line-height: 1.2;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.db-tool button:hover:not(:disabled) {
  background: var(--accent, #3aa0ff); border-color: var(--accent, #3aa0ff);
  box-shadow: var(--glow, 0 0 0 1px #3aa0ff, 0 0 22px -4px rgba(58,160,255,.55));
}
.db-tool button:disabled { opacity: 0.45; cursor: not-allowed; }
.db-tool button:focus-visible {
  outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(58,160,255,0.35));
}
/* The .db-tool button { display:inline-flex } rule (author origin) defeats the
   UA [hidden]{display:none} rule, so a `hidden` button would still show.
   Restore hidden for buttons explicitly. */
.db-tool button[hidden] { display: none; }
/* Generate (primary) button gets a touch more presence on its own card. */
.db-tool button#build-mbnt { font-size: 1rem; padding: 0.8em 1.5em; }

/* Status lines */
.db-tool .status {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.84rem; min-height: 1.2em; margin: 0.6em 0 0;
  color: var(--ink-dim, #a6b0bd);
}
.db-tool .status:empty { min-height: 0; margin: 0; }
.db-tool .status.error { color: var(--danger, #ff6a6a); }
.db-tool .status.ok { color: var(--ok, #46d08a); }

/* Hints + links */
.db-tool .hint { color: var(--muted, #828d9c); font-size: 0.88rem; margin: 0.5em 0; }
.db-tool .hint a, .db-lead a { color: var(--accent, #3aa0ff); }

/* ---- Source card: supported-files line, two status tiles, alt bundle ---- */
.db-supported {
  margin: 0 0 1.2em; font-size: 0.9rem; color: var(--ink-dim, #a6b0bd);
}
/* "How auto-detection works" disclosure (authed shell only; decision 0034) —
   the fingerprint explainer lives here instead of always-on body text. */
.db-howfind { margin: 0.7em 0 0; }
.db-howfind > summary {
  cursor: pointer; font-size: 0.86rem; color: var(--ink-dim, #a6b0bd);
  user-select: none; list-style: none;
}
.db-howfind > summary::-webkit-details-marker { display: none; }
.db-howfind > summary::before { content: "▸ "; color: var(--muted, #828d9c); }
.db-howfind[open] > summary::before { content: "▾ "; }
.db-howfind > summary:hover { color: var(--accent, #3aa0ff); }
.db-howfind p {
  margin: 0.5em 0 0; font-size: 0.85rem; line-height: 1.5;
  color: var(--ink-dim, #a6b0bd);
}

/* Two compact status tiles (source file + proof bundle) + the change/swap
   actions on the right. Shown after a file loads; the picker is hidden. */
.db-tiles-row {
  display: flex; flex-wrap: wrap; gap: 0.7em; align-items: stretch;
  margin: 0.2em 0 0;
}
.db-tiles {
  flex: 1 1 26em; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em;
  min-width: 0;
}
.db-tile {
  background: var(--inset, #08090c);
  border: 1px solid var(--line-strong, #38434f);
  border-radius: var(--radius-sm, 4px);
  padding: 0.7em 0.85em; min-width: 0;
}
.db-tile.is-ok { border-color: var(--ok-line, #1f4a36); }
.db-tile.is-err { border-color: var(--danger-line, #5a2530); }
.db-tile-label {
  margin: 0 0 0.35em; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted, #828d9c);
}
.db-tile-name {
  font-weight: 600; color: var(--ink, #e9edf3); font-size: 0.95rem;
  word-break: break-all; line-height: 1.3;
}
.db-tile-meta {
  margin-top: 0.2em;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.76rem; color: var(--ink-dim, #a6b0bd); word-break: break-word;
}
.db-tile-state { margin-top: 0.45em; font-size: 0.82rem; color: var(--ink-dim, #a6b0bd); }
.db-tile-state.is-ok { color: var(--ok, #46d08a); }
.db-tile-state.is-warn { color: var(--warn, #f2b45a); }
.db-tile-state.is-err { color: var(--danger, #ff6a6a); }
.db-tile-actions {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.45em;
  justify-content: center;
}
@media (max-width: 620px) {
  .db-tiles { grid-template-columns: 1fr; }
  .db-tile-actions { flex-direction: row; flex-wrap: wrap; }
}

/* "Use a different proof bundle" — collapsed disclosure under the tiles. */
.db-altproof { margin: 0.85em 0 0; }
.db-altproof > summary {
  cursor: pointer; font-size: 0.88rem; color: var(--ink-dim, #a6b0bd);
  user-select: none; list-style: none;
}
.db-altproof > summary::-webkit-details-marker { display: none; }
.db-altproof > summary::before { content: "▸ "; color: var(--muted, #828d9c); }
.db-altproof[open] > summary::before { content: "▾ "; }
.db-altproof > summary:hover { color: var(--accent, #3aa0ff); }
.db-altproof[open] > summary { margin-bottom: 0.45em; color: var(--ink-soft, #d3d9e2); }

/* ---- Two-pane workbench: selector (left) + tabbed preview (right) ------- */
.redaction-workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1.1em; align-items: start;
}
/* Each pane is a card; the grid gap owns the spacing between them. */
.redaction-workspace > section { margin: 0; }
@media (max-width: 960px) {
  .redaction-workspace { grid-template-columns: 1fr; gap: 1em; }
  .redaction-workspace > section { margin: 0 0 1em; }
}

/* ---- Controls: quick actions + field search ---------------------------- */
.db-controls {
  display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center;
  justify-content: space-between; margin: 0 0 0.85em;
}
.db-quick-actions { display: flex; flex-wrap: wrap; gap: 0.4em; }
/* The .db-tool button { display:inline-flex } rule (author origin) defeats the
   UA [hidden]{display:none} rule, so a `hidden` button would still show. Restore
   hidden for buttons explicitly (e.g. the json-ast-only Reveal top-level /
   Expand all quick actions, which must stay hidden for csv/text/json-keypath). */
.db-tool button[hidden] { display: none; }
.db-tool button.db-qa {
  background: var(--surface-3, #1b222c); color: var(--ink-soft, #d3d9e2);
  border: 1px solid var(--line-strong, #38434f);
  padding: 0.34em 0.7em; font-size: 0.8rem; font-weight: 500; box-shadow: none;
}
.db-tool button.db-qa:hover:not(:disabled) {
  background: var(--surface-2, #11161d); border-color: var(--accent, #3aa0ff);
  color: var(--accent, #3aa0ff); box-shadow: none;
}
.db-search {
  flex: 0 1 14em; min-width: 9em;
  background: var(--inset, #08090c); color: var(--ink-soft, #d3d9e2);
  border: 1px solid var(--line-strong, #38434f);
  border-radius: var(--radius-sm, 4px); padding: 0.42em 0.6em;
  font-size: 0.85rem; font-family: inherit;
}
.db-search:focus-visible {
  outline: none; border-color: var(--accent, #3aa0ff);
  box-shadow: var(--ring, 0 0 0 3px rgba(58,160,255,0.35));
}

/* ---- Redaction-style toggle (#json-render-mode-row) -------------------- */
.db-tool #json-render-mode-row { margin: 0.3em 0 0.85em; }
.db-rstyle-label {
  display: inline-block; margin-right: 0.5em; font-size: 0.88rem;
  color: var(--ink-dim, #a6b0bd);
}
.db-tool #json-render-mode-row label {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin: 0.35em 1.2em 0 0; font-size: 0.9rem; cursor: pointer;
}
.db-tool input[type="checkbox"],
.db-tool input[type="radio"] { accent-color: var(--accent, #3aa0ff); }

/* Standard-mode "withheld content recoverable" warning (lives in the preview
   pane, above the tabs). */
.db-tool .warning-note {
  color: var(--ink-soft, #d3d9e2);
  background: var(--warn-tint, #2a1f0e);
  border: 1px solid var(--warn-line, #5a4a1f);
  border-left: 3px solid var(--warn, #f2b45a);
  padding: 0.8em 1em; border-radius: var(--radius-sm, 4px);
  font-size: 0.86rem; line-height: 1.5; margin: 0 0 0.9em;
}
.db-tool .warning-note strong { color: var(--warn, #f2b45a); }
.db-tool .warning-note code {
  background: var(--inset, #08090c); padding: 0.05em 0.35em; border-radius: 3px;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
}

/* ---- Selector table: json-ast tree + flat field/row/line list ----------
   Sans-serif for structure (field names, types, headers); MONOSPACE reserved
   for the data itself — the value pills (+ the leaf-hash reference table). */
.db-tool table {
  width: 100%; border-collapse: collapse; font-family: inherit;
  font-size: 0.88rem;
}
.db-tool table.db-selector { table-layout: auto; }
.db-tool table.db-selector thead th {
  text-align: left; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted, #828d9c);
  padding: 0.3em 0.55em; border-bottom: 1px solid var(--line-strong, #38434f);
}
.db-tool table.db-selector tbody tr { border-bottom: 1px solid var(--line, #232b35); }
.db-tool table.db-selector tbody tr:last-child { border-bottom: none; }
.db-tool table.db-selector tbody tr:hover td {
  /* faint accent wash on hover (accent-strong #73c2ff at ~6%) */
  background: rgba(115, 194, 255, 0.06);
}
.db-tool table.db-selector td {
  padding: 0.36em 0.55em; vertical-align: middle; color: var(--ink-soft, #d3d9e2);
}
.db-tool table.db-selector th.db-reveal,
.db-tool table.db-selector td.db-reveal { width: 3.4em; text-align: center; }
.db-tool table.db-selector td.db-field { white-space: nowrap; color: var(--ink, #e9edf3); }
.db-tool table.db-selector td.db-type {
  width: 5em; font-size: 0.78rem; color: var(--muted, #828d9c);
}
/* The value column greedily absorbs remaining width and clips its pill. */
.db-tool table.db-selector td.db-value {
  width: 99%; white-space: nowrap; overflow: hidden; color: var(--ink-soft, #d3d9e2);
}
.db-tool table.db-selector td.db-value-clip { cursor: pointer; }
.db-tool table.db-selector td.db-value-clip:hover .db-pillval { border-color: var(--accent, #3aa0ff); }
/* Monospace value pill (scalars) vs muted structural hint (containers). */
.db-pillval {
  display: inline-block; max-width: 100%; vertical-align: middle;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.8rem; color: var(--ink-soft, #d3d9e2);
  background: var(--inset, #08090c); border: 1px solid var(--line, #232b35);
  border-radius: 5px; padding: 0.05em 0.45em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-structval { color: var(--muted, #828d9c); font-style: italic; font-size: 0.85rem; }
/* Click-to-expand: a clipped value pill wraps to its full text. */
.db-tool table.db-selector td.db-value.db-value-open { white-space: normal; }
.db-tool table.db-selector td.db-value.db-value-open .db-pillval {
  max-width: none; white-space: normal; word-break: break-word;
}
.db-tool button.db-caret {
  background: none; border: none; box-shadow: none; cursor: pointer;
  color: var(--ink-dim, #a6b0bd); padding: 0 0.3em 0 0; margin: 0;
  font-size: 0.78rem; line-height: 1; width: auto; border-radius: 0;
}
.db-tool button.db-caret:hover:not(:disabled) {
  color: var(--accent, #3aa0ff); background: none; box-shadow: none;
}
.db-caret-spacer { display: inline-block; width: 1.05em; }
.db-fieldname { font-weight: 600; }
.db-tool table.db-selector input[type="checkbox"]:disabled {
  opacity: 0.65; cursor: default;
}

/* ---- CSV mini-spreadsheet selector (Phase 2: csv-row / csv-column) ------
   The pinned #row-list table is hidden in grid mode; the grid lives in a
   scroll wrapper inserted right after it (built in app.mjs). The grid doubles
   as the redacted-table view: withheld rows/columns render dimmed-but-legible
   (the user's own file, all client-side). The byte-exact "Redacted file"
   preview tab still shows the true downloaded output. */
.db-tool table#row-list[hidden] { display: none; }
.db-sheet-block { margin: 0; }
.db-sheet-wrap {
  overflow: auto; max-height: 30em;
  border: 1px solid var(--line-strong, #38434f);
  border-radius: var(--radius-sm, 4px);
  background: var(--inset, #08090c);
}
.db-tool table.db-sheet {
  table-layout: auto; border-collapse: separate; border-spacing: 0;
  width: max-content; min-width: 100%; font-size: 0.82rem;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
}
/* Sticky header so column controls stay visible while scrolling a tall grid. */
.db-tool table.db-sheet thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-3, #1b222c);
  border-bottom: 1px solid var(--line-strong, #38434f);
  text-align: left; text-transform: none; letter-spacing: 0;
  font-size: 0.8rem; font-weight: 600; color: var(--ink, #e9edf3);
  white-space: nowrap; padding: 0.45em 0.7em; vertical-align: bottom;
  font-family: var(--sans, "Inter", sans-serif);
}
.db-tool table.db-sheet thead th.db-reveal {
  text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--muted, #828d9c); text-align: center; width: 4.2em;
}
.db-tool table.db-sheet td {
  padding: 0.34em 0.7em; border-bottom: 1px solid var(--line, #232b35);
  max-width: 22em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--ink-soft, #d3d9e2);
  vertical-align: top;
}
.db-tool table.db-sheet td.db-reveal {
  width: 4.2em; text-align: center; overflow: visible;
}
/* Row-number gutter (both grids). */
.db-tool table.db-sheet td.db-rownum,
.db-tool table.db-sheet th.db-rownum-h {
  width: 3em; text-align: right; color: var(--muted, #828d9c);
  user-select: none; font-variant-numeric: tabular-nums; font-size: 0.78rem;
}
/* Column header carrying a Reveal checkbox (csv-column). */
.db-colhead-label {
  display: inline-flex; align-items: center; gap: 0.45em; cursor: pointer;
}
.db-colname {
  display: inline-block; max-width: 13em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
/* Withheld (redacted) units: dimmed-but-legible + a tint so the redacted set
   reads at a glance. (csv-row dims the whole row's data cells; csv-column dims
   the column's cells.) */
.db-tool table.db-sheet td.db-cell-out,
.db-tool table.db-sheet tr.db-row-out td.db-cell {
  color: var(--muted, #828d9c); font-style: italic;
  background: var(--surface-2, #11161d);
}
.db-tool table.db-sheet th.db-colhead-out .db-colname {
  color: var(--muted, #828d9c); font-weight: 500;
}
.db-sheet-note {
  color: var(--muted, #828d9c); font-size: 0.8rem; margin: 0.55em 0 0;
}
/* Keyboard focus on the scroll area (arrow-key panning of a wide grid). */
.db-sheet-wrap:focus-visible {
  outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(58,160,255,0.35));
}
/* Explicit focus ring for the selection checkboxes (grid + flat/tree), so the
   keyboard-focused unit is always visible on the dark theme (WCAG 2.4.7). */
.db-tool table.db-selector input[type="checkbox"]:focus-visible,
.db-tool table.db-sheet input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent, #3aa0ff); outline-offset: 1px;
}

/* ---- Disclosure summary cards (always-on, above the preview tabs) ------- */
.db-summary { margin: 0 0 0.9em; }
.db-stat-row { display: flex; gap: 0.6em; flex-wrap: wrap; }
.db-stat {
  flex: 1 1 0; min-width: 7.5em;
  background: var(--inset, #08090c); border: 1px solid var(--line, #232b35);
  border-radius: var(--radius-sm, 4px); padding: 0.55em 0.75em;
}
.db-stat-num { font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: var(--ink, #e9edf3); }
.db-stat.reveal .db-stat-num { color: var(--accent-strong, #73c2ff); }
.db-stat-label {
  margin-top: 0.1em; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted, #828d9c);
}
.db-summary-out {
  margin-top: 0.55em; font-size: 0.82rem; color: var(--ink-dim, #a6b0bd);
}
.db-summary-out code {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.92em; color: var(--ink-soft, #d3d9e2);
}
.db-summary-mode { margin-left: 0.15em; }
.db-summary-warn {
  margin-top: 0.5em; font-weight: 500; color: var(--warn, #f2b45a); font-size: 0.85rem;
}
.db-pillmode {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.08em 0.5em; border-radius: 999px;
  background: var(--accent-tint, #0f1d2b); color: var(--accent-strong, #73c2ff);
  border: 1px solid var(--accent-tint-strong, #15324b);
}

/* ---- Preview pane + tabs ------------------------------------------------ */
.db-tool pre {
  background: var(--inset, #08090c); color: var(--ink-soft, #d3d9e2);
  border: 1px solid var(--line, #232b35); border-radius: var(--radius-sm, 4px);
  padding: 0.9em 1em; overflow: auto; max-height: 30em;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.82rem; line-height: 1.5; margin: 0;
}
.db-tabs {
  display: flex; flex-wrap: wrap; gap: 0.15em; margin: 0 0 0.6em;
  border-bottom: 1px solid var(--line, #232b35);
}
.db-tool button.db-tab {
  background: none; border: none; box-shadow: none; cursor: pointer;
  color: var(--ink-dim, #a6b0bd); padding: 0.5em 0.85em; font-size: 0.86rem;
  font-weight: 500; border-bottom: 2px solid transparent; border-radius: 0;
}
.db-tool button.db-tab:hover:not(:disabled) {
  color: var(--ink, #e9edf3); background: none; box-shadow: none;
}
.db-tool button.db-tab[aria-selected="true"] {
  color: var(--accent-strong, #73c2ff);
  border-bottom-color: var(--accent-strong, #73c2ff);
}
/* The advanced "Raw proof details" tab is pushed to the far right and muted so
   it reads as a secondary/debug affordance, not a peer of the two normal tabs. */
.db-tool button.db-tab.db-tab-adv {
  margin-left: auto; color: var(--muted, #828d9c); font-size: 0.8rem;
}
.db-tool button.db-tab.db-tab-adv::before { content: "\2699"; margin-right: 0.35em; opacity: 0.85; }
.db-pane[hidden] { display: none; }
/* Raw-details: dense reference data → monospace; leaf-count note above it. */
.db-proof-leaves { margin: 0 0 0.7em; font-size: 0.82rem; color: var(--ink-dim, #a6b0bd); }
.db-proof-leaves strong { color: var(--ink, #e9edf3); }
.db-tool table#raw-details {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: 0.8rem;
}
.db-tool table#raw-details td { vertical-align: top; }

/* Keyboard focus ring for the secondary buttons. Their base rules set
   box-shadow:none, which (same specificity, later source order) would otherwise
   suppress the shared focus ring. Restore it for keyboard focus only. */
.db-tool button.db-qa:focus-visible,
.db-tool button.db-tab:focus-visible,
.db-tool button.db-caret:focus-visible {
  outline: none;
  box-shadow: var(--ring, 0 0 0 3px rgba(58,160,255,0.35));
}

@media (max-width: 560px) {
  body.db-standalone main, .db-brandbar { padding-left: 1rem; padding-right: 1rem; }
  .db-tool section { padding: 1.05em 1.05em; }
  .db-head h1 { font-size: 1.5rem; }
  .db-controls { flex-direction: column; align-items: stretch; }
  .db-search { flex: 1 1 auto; }
  /* Give controls + context more room on small screens (the grid is ~72% of a
     375×667 viewport at 30em otherwise). */
  .db-sheet-wrap { max-height: 20em; }
}