/* ============================================================================
   nanoSCF - nanoT family UI kit (product accent: Flow Teal)
   ----------------------------------------------------------------------------
   One design system across every nanoT product (nanoCRM, nanoLOS, nanoSCF):
   same tokens, chrome, type scale, buttons, cards, badges; each product
   swaps only the accent variables below. Decision states keep the family
   semantic palette: Signal Green = APPROVE, Alert Amber = REFER,
   Decline Red = DECLINE. Runtime override: branding.yaml accent_color is
   injected as a :root variable by base.html, so white-labelling never edits
   this file.
   ============================================================================ */

:root {
  /* product accent (the ONLY product-specific layer) */
  --accent: #0D9488;          /* Flow Teal */
  --accent-dark: #0F766E;
  --accent-soft: #F0FDFA;

  /* nanoT master layer */
  --ink: #13233b;
  --muted: #52637a;
  --line: #e4eaf3;
  --bg: #f5f7fc;
  --white: #ffffff;

  /* semantic decision states (brand-locked) */
  --approve: #16A34A;  --approve-soft: #e6f6ec;
  --refer:   #D97706;  --refer-soft:   #fdf3e3;
  --decline: #DC2626;  --decline-soft: #fdeaea;

  --radius: 14px; --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(20,60,158,.08), 0 1px 4px rgba(20,60,158,.04);
  --shadow-md: 0 8px 40px rgba(20,60,158,.11), 0 2px 8px rgba(20,60,158,.05);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --brand: 'Plus Jakarta Sans', var(--font);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font); background: var(--bg); margin: 0; color: var(--ink);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; font-weight: 500; }
a:hover { color: var(--accent-dark); }
h1, h2, h3 { font-family: var(--brand); letter-spacing: -.02em; }

/* ─── Family chrome: left sidebar shell (nanoCRM reference pattern) ─── */
/* Menu on a fixed left panel, product version at the bottom of the panel,
   a slim top strip for the page title + identity. Collapses to a hamburger
   below 900px (CSS-only: the .nav-toggle checkbox). */
.nano-shell { display: flex; min-height: 100vh; align-items: stretch; }
.nano-sidebar {
  width: 230px; flex: 0 0 230px;
  position: sticky; top: 0; height: 100vh; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--white); border-right: 1px solid var(--line);
  padding: 16px 12px 14px;
}
.nano-brand { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.nano-sidebar .nano-brand { padding: 4px 10px 14px; }
.nano-brand .wordmark { font-family: var(--brand); font-weight: 800; font-size: 19px; color: var(--ink); }
.nano-brand .wordmark b { color: var(--accent); font-weight: 800; }
.nano-brand .byline { font-size: 11px; color: var(--muted); letter-spacing: .05em; }
.sidenav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.sidenav a {
  color: var(--muted); font-size: 13.5px; font-weight: 600;
  padding: 9px 12px; border-radius: var(--radius-sm); white-space: nowrap;
  transition: background .15s, color .15s;
}
.sidenav a:hover { color: var(--ink); background: rgba(19,35,59,.06); }
.sidenav a.active { color: var(--accent-dark); background: var(--accent-soft); }
/* Version block at the sidebar bottom: lockup / Version X.Y.Z / edition,
   centre-aligned (owner spec, common to every nanoT product). */
.sidebar-version {
  border-top: 1px solid var(--line); margin-top: 12px; padding: 12px 10px 2px;
  font-size: 11.5px; color: var(--muted); line-height: 1.6; text-align: center;
}
.sidebar-version span { display: block; }
.sidebar-version .v-product { font-weight: 800; color: var(--ink); font-family: var(--brand); font-size: 14px; }
.sidebar-version .v-product b { color: var(--accent); }
.sidebar-version .v-number { font-variant-numeric: tabular-nums; }
.sidebar-version .v-edition { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.nano-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nano-main .nano-footer { margin-top: auto; width: 100%; } /* footer sits low on short pages */

/* Top strip: page title + identity. Solid background on purpose: translucent
   backdrop-filter on a sticky bar can blank out scrolled content in some
   browser compositors. */
.nano-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; padding: 0 22px; height: 56px;
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-title { font-family: var(--brand); font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nano-topbar .who { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.nano-topbar .who form { margin: 0; }
.nano-topbar .who button { padding: 6px 14px; font-size: 13px; }
.who .user-id { font-weight: 600; color: var(--ink); }
.help-fab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-weight: 800; font-size: 13px;
}
.help-fab:hover { background: var(--accent); color: #fff; }

/* Hamburger (narrow screens only) */
.nav-toggle { display: none; }
.nav-burger { display: none; cursor: pointer; padding: 6px 4px; flex-direction: column; gap: 4px; }
.nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); }
@media (max-width: 900px) {
  .nano-shell { display: block; }
  .nano-sidebar {
    position: static; width: 100%; height: auto;
    border-right: none; border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav-toggle:checked ~ .nano-sidebar { display: flex; }
  .nav-burger { display: inline-flex; }
  .sidenav { overflow-y: visible; }
}
.role-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}

/* ─── Buttons (family system) ─── */
button, .btn {
  font-family: var(--font); font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--white); color: var(--ink);
  cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button.primary, .btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
button.primary:hover, .btn-primary:hover {
  background: var(--accent-dark); border-color: var(--accent-dark); color: #fff;
  box-shadow: 0 4px 16px rgba(13,148,136,.25);
}
button.approve { background: var(--approve); border-color: var(--approve); color: #fff; }
button.approve:hover { filter: brightness(1.06); color: #fff; box-shadow: 0 4px 14px rgba(22,163,74,.3); }
button.deny { background: var(--decline); border-color: var(--decline); color: #fff; }
button.deny:hover { filter: brightness(1.06); color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,.3); }

input[type="text"], input[type="password"], input.reason {
  font-family: var(--font); font-size: 14px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; background: var(--white);
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,148,136,.14); }

/* ─── Layout ─── */
.wrap { max-width: 940px; margin: 0 auto; padding: 26px 18px 36px; }
.nano-footer {
  max-width: 940px; margin: 0 auto; padding: 16px 18px 26px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  color: var(--muted); font-size: 12px;
}
.header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.header h1 { font-size: 21px; margin: 0; }

/* ─── Status / decision chips (semantic palette) ─── */
.chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.chip.status-decided, .chip.status-approve, .chip.status-approved { background: var(--approve-soft); color: var(--approve); }
.chip.status-needs_review, .chip.status-refer, .chip.status-recommended { background: var(--refer-soft); color: var(--refer); }
.chip.status-failed, .chip.status-decline, .chip.status-declined, .chip.status-extraction_failed { background: var(--decline-soft); color: var(--decline); }
.chip.status-received, .chip.status-extracting, .chip.status-extracted, .chip.status-deciding { background: var(--accent-soft); color: var(--accent); }

.error-banner { background: var(--decline-soft); color: #7a1f1a; padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 16px; border: 1px solid #f6c9c7; }

/* ─── Storage / ops cards (admin panel) ─── */
.storage-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 18px; }
.storage-card {
  flex: 1; min-width: 150px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow);
}
.storage-card .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.storage-card .big { font-size: 21px; font-weight: 800; font-family: var(--brand); font-variant-numeric: tabular-nums; }
.storage-card .sub { font-size: 12px; color: var(--muted); }
.storage-card.storage-amber { background: var(--refer-soft); border-color: var(--refer); }
.storage-card.storage-amber .big { color: var(--refer); }
.storage-card.storage-red { background: var(--decline-soft); border-color: var(--decline); }
.storage-card.storage-red .big { color: var(--decline); }

/* ─── System configuration (read-only settings console) ─── */
table.settings { width: 100%; border-collapse: collapse; }
table.settings th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 8px 8px; border-bottom: 1.5px solid var(--line); }
table.settings td { padding: 9px 8px; border-bottom: 1px solid #f0f3f8; font-size: 13.5px; vertical-align: top; }
table.settings td.src { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
table.settings td.val { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.settings-note { margin-top: 1.2rem; color: var(--muted); font-size: 12.5px; }

/* ─── Cards / sections ─── */
details.section {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow);
}
details.section > summary {
  padding: 13px 18px; font-weight: 650; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; font-family: var(--brand);
}
details.section > summary::-webkit-details-marker { display: none; }
.section-body { padding: 4px 18px 15px; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #f0f3f8; }
.field-row:first-child { border-top: none; }
.field-label { color: var(--muted); font-size: 14px; flex: 1; }
.field-row input { width: 190px; text-align: right; padding: 6px 10px; }
.readonly-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--ink); }
.readonly-row .v { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ─── The decision dashboard ─── */
.dashboard {
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 18px 20px; margin-top: 22px; box-shadow: var(--shadow-md);
}
.dashboard h2 { margin-top: 0; font-size: 15px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.conf-row { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.conf-box { flex: 1; min-width: 128px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
/* Clamp so a long figure shrinks before it ever escapes the card. */
.conf-box .big {
  font-size: clamp(16px, 1.1vw + 9px, 23px); font-weight: 800;
  font-family: var(--brand); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; line-height: 1.3;
}
.conf-box .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.reason-codes { margin: 10px 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
.reason-codes li { margin: 3px 0; }
.actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
input.reason { flex: 1; min-width: 220px; }
.disposition-banner {
  background: var(--accent-soft); border: 1px solid #dfe3fb; color: var(--accent-dark);
  border-radius: var(--radius-sm); padding: 11px 15px; margin-top: 12px; font-weight: 600;
}

/* ─── Worklist ─── */
.worklist-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 18px 14px; margin-top: 20px; }
table.worklist { width: 100%; border-collapse: collapse; }
table.worklist th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 8px 8px; border-bottom: 1.5px solid var(--line); }
table.worklist td { padding: 11px 8px; border-bottom: 1px solid #f0f3f8; font-size: 14px; }
/* Money cells carry the raw figure in title=; keep the display value on one line. */
table.worklist td[title] { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.worklist tr:last-child td { border-bottom: none; }
.empty-note { margin-top: 1.4rem; color: var(--muted); }

/* ─── Journey ribbon (NT-SUITE-UX pattern 2: done ticked, current in accent,
   ahead dimmed, failed and referred states shown honestly, next action under
   the strip). Ported verbatim from the nanoLOS UI kit so the two consoles
   read identically. ─── */
.journey {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 18px 12px; margin-bottom: 16px; margin-top: 14px;
}
.journey-strip { list-style: none; display: flex; margin: 0; padding: 0; flex-wrap: wrap; }
.journey-strip .stage { flex: 1; min-width: 88px; text-align: center; position: relative; padding-top: 2px; }
.journey-strip .stage::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.journey-strip .stage:first-child::before { display: none; }
.journey-strip .stage .dot {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  background: var(--bg); border: 2px solid var(--line); color: var(--muted);
}
.journey-strip .stage-label { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.3; padding: 0 4px; }
.journey-strip .stage.done .dot { background: var(--approve-soft); border-color: var(--approve); color: var(--approve); }
.journey-strip .stage.done.referred .dot { background: var(--refer-soft); border-color: var(--refer); color: var(--refer); }
.journey-strip .stage.done.referred .stage-label { color: var(--refer); }
.journey-strip .stage.current .dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.journey-strip .stage.current .stage-label { color: var(--accent-dark); font-weight: 700; }
.journey-strip .stage.current.referred .dot { background: var(--refer); border-color: var(--refer); box-shadow: 0 0 0 4px var(--refer-soft); }
.journey-strip .stage.current.referred .stage-label { color: var(--refer); }
.journey-strip .stage.failed .dot { background: var(--decline); border-color: var(--decline); color: #fff; }
.journey-strip .stage.failed .stage-label { color: var(--decline); font-weight: 700; }
.journey-strip .stage.tone-approve .dot { background: var(--approve); border-color: var(--approve); color: #fff; }
.journey-strip .stage.tone-approve .stage-label { color: var(--approve); font-weight: 700; }
.journey-strip .stage.tone-decline .dot { background: var(--decline); border-color: var(--decline); color: #fff; }
.journey-strip .stage.tone-decline .stage-label { color: var(--decline); font-weight: 700; }
.journey-next {
  margin: 12px 0 0; font-size: 13.5px; color: var(--ink);
  background: var(--accent-soft); border-radius: var(--radius-sm); padding: 9px 13px;
}

/* ─── Role dashboard (NT-SUITE-UX pattern 1) ─── */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 4px; }
.dash-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 16px; box-shadow: var(--shadow);
}
.dash-card .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dash-card .big { font-size: 25px; font-weight: 800; font-family: var(--brand); font-variant-numeric: tabular-nums; }
.dash-card.dash-amber { background: var(--refer-soft); border-color: var(--refer); }
.dash-card.dash-amber .big { color: var(--refer); }
.dash-card.dash-red { background: var(--decline-soft); border-color: var(--decline); }
.dash-card.dash-red .big { color: var(--decline); }
.dash-card.dash-green { background: var(--approve-soft); border-color: var(--approve); }
.dash-card.dash-green .big { color: var(--approve); }
.dash-cta { margin-top: 16px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.dash-cta .btn-primary {
  display: inline-block; padding: 11px 22px; font-weight: 700; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; text-decoration: none; border: none; font-size: 14px;
}
.dash-cta .btn-primary:hover { background: var(--accent-dark); }
.dash-note { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.age-warn { color: var(--refer); font-weight: 700; }   /* waiting 1-3 days */
.age-late { color: var(--decline); font-weight: 700; } /* waiting over 3 days */

/* ─── Registry filters + pager ─── */
.registry-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 6px; }
.registry-filters input[type="text"] { min-width: 260px; }
.registry-filters select { padding: 8px 10px; font-size: 13.5px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); font-family: var(--font); background: var(--white); }
.pager { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; color: var(--muted); font-size: 13px; }

/* ─── Login ─── */
.login-shell { min-height: 100vh; display: grid; place-items: center; background:
  radial-gradient(900px 480px at 85% -10%, var(--accent-soft) 0, transparent 60%),
  radial-gradient(700px 420px at 0% 100%, #e7f7f5 0, transparent 55%), var(--bg); }
.login-box {
  width: min(380px, 92vw); background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 34px 32px 28px;
}
.login-box .nano-brand { margin-bottom: 6px; }
.login-box .nano-brand .wordmark { font-size: 24px; }
.login-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; }
.login-box label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.login-box input { width: 100%; margin-top: 5px; }
.login-box button { width: 100%; padding: 11px; margin-top: 4px; }
.login-foot { text-align: center; color: var(--muted); font-size: 11.5px; margin-top: 18px; }
.error { background: var(--decline-soft); color: #7a1f1a; border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 14px; font-size: 13.5px; }

/* ─── Help centre (NT-SUITE-UX wave 3: searchable topics + walkthroughs) ─── */
.help-search { display: flex; gap: 10px; margin-bottom: 14px; }
.help-search input[type="text"] { flex: 1; }
.help-rolebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; font-size: 12.5px; color: var(--muted); }
.role-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
a.role-chip.active, a.role-chip:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.help-group { margin-bottom: 22px; }
.help-group h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.topic-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 14px; margin-bottom: 8px; transition: border-color .15s, box-shadow .15s;
}
.topic-row:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.topic-row-hot { border-color: var(--accent); background: var(--accent-soft); }
.topic-title { font-weight: 700; color: var(--ink); flex: 0 0 auto; min-width: 200px; }
.topic-sub { color: var(--muted); font-size: 13px; flex: 1 1 260px; }
.role-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.cmd-chip {
  font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--accent-dark);
  background: var(--accent-soft); border-radius: 999px; padding: 2px 9px;
}
.help-empty { color: var(--muted); background: var(--bg); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px; }
.help-empty code { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.help-context { margin-bottom: 22px; }
.help-context h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.help-context-note { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.help-topic-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }
.help-meta-lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; }
.help-meta-screen code { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size: 12.5px; }
.help-summary { color: var(--muted); font-size: 14.5px; margin: 0 0 16px; }
.help-body h3 { font-size: 15px; margin: 18px 0 8px; }
.help-body h4 { font-size: 13.5px; margin: 14px 0 6px; }
.help-body ul { padding-left: 20px; margin: 8px 0; }
.help-body li { margin: 3px 0; }
.help-steps-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 8px; }
.help-steps { padding-left: 22px; margin: 0; }
.help-steps li { margin: 10px 0; line-height: 1.6; }
.help-step-text code { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.help-shot { display: block; max-width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.help-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
.help-related { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; }

/* Export governance watermark (module 11): on-screen/printable report views
   only. Machine CSV/JSON downloads are never touched by this - the banner
   is markup rendered around the HTML page, not written into any export
   file. Visible on screen (subdued) and reinforced at print time. */
.report-watermark { display: flex; align-items: center; gap: 10px; background: #FEF3C7; color: #92400E;
  border: 1px solid #FDE68A; border-radius: var(--radius-sm); padding: 8px 14px; margin-bottom: 16px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.report-watermark .rw-tag { text-transform: uppercase; letter-spacing: .08em; }
@media print {
  .nano-sidebar, .nano-topbar, .nano-footer, form, button, .help-fab { display: none !important; }
  .report-watermark { position: static; border: 1.5px dashed #92400E; background: none; }
  body::after {
    content: "CONFIDENTIAL"; position: fixed; top: 45%; left: 10%; font-size: 72px;
    color: rgba(146, 64, 14, 0.12); transform: rotate(-28deg); z-index: 9999; pointer-events: none;
  }
}
.help-related h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }