/* Manrope is self-hosted: the CSP's font-src 'self' blocks fonts.gstatic.com,
   so a Google Fonts <link> silently fell back to the system font in
   production. Variable font (wght 200-800), split by script the way Google
   serves it; the browser fetches only the subsets a page actually uses. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Tokens per the AMLKit redesign spec — cool-neutral base, single blue
     accent, muted semantic hues at similar chroma/lightness. */
  --bg:          oklch(96%   0.004 250);
  --surface:     oklch(99.4% 0.002 250);
  --line:        oklch(91%   0.005 250);
  --line-soft:   oklch(94.5% 0.004 250);
  --ink:         oklch(19%   0.012 250);
  --ink-2:       oklch(46%   0.012 250);
  --ink-3:       oklch(64%   0.01  250);
  --accent:      oklch(52%   0.15  250);
  --accent-soft: oklch(94%   0.035 250);

  --danger:      oklch(53%   0.16  25);
  --danger-soft: oklch(95%   0.035 25);
  --warn:        oklch(62%   0.13  70);
  --warn-soft:   oklch(95%   0.04  70);
  --good:        oklch(52%   0.12  150);
  --good-soft:   oklch(95%   0.035 150);
  --violet:      oklch(54%   0.14  290);
  --violet-soft: oklch(95%   0.03  290);
  /* Terrorism is not in the source design tokens (only sanction/pep/
     proliferation are) but the app has five real alert categories, and
     terrorism financing carries its own distinct legal obligation from
     ordinary sanctions -- collapsing it into --danger would blur a
     distinction the rest of the app is careful to keep. Same chroma/
     lightness family as the rest of the semantic set, hue between
     danger's red and warn's amber so it reads as "related but distinct".
     See below in the design-review notes for why this exists. */
  --terrorism:      oklch(53% 0.16 45);
  --terrorism-soft: oklch(95% 0.035 45);

  --brand-orange: oklch(40% 0.1 45);
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --radius-lg: 20px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}
body {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: oklch(88% 0.05 250); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: oklch(45% 0.16 250); text-decoration: underline; }

input, select, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: oklch(72% 0.008 250); }

[dir="auto"], .name-ar { font-family: 'Manrope', "Tahoma", "Arial", sans-serif; }
.name-ar { font-size: 1.05em; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------- shell/layout */
.shell { display: flex; min-height: 100vh; }

/* The column to the right of the sidebar; main is centred inside it. */
.content-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar {
  width: 224px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding: 28px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar .brand-block { padding: 8px 12px 26px; }
.sidebar .brand-block img { height: 38px; width: auto; display: block; }
.sidebar .brand-block .product { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin-top: 8px; color: var(--ink-2); }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  display: block;
}
.sidebar nav a:hover { color: var(--ink); text-decoration: none; background: var(--line-soft); }
.sidebar nav a.on { background: var(--accent-soft); color: var(--accent); }

.sidebar .spacer { flex: 1; }
.sidebar .operator-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}
.sidebar .operator-box .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.sidebar .operator-box .who { flex: 1; overflow: hidden; }
.sidebar .operator-box .who .op-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .operator-box .who .op-role { font-size: 11px; color: var(--ink-3); }
.sidebar .operator-box button { border: none; background: none; color: var(--ink-3); font-size: 11.5px; cursor: pointer; font-weight: 600; padding: 4px; }
.sidebar .operator-box button:hover { color: var(--ink); }

#nav-toggle { display: none; }
.nav-hamburger { display: none; }

/* Avatar menu in the top-right corner of the canvas (desktop and tablet).
   Replaces the old full-width .desktop-topnav strip, which cost a 68px
   band above every page. Phones use .mobile-header instead. */
.canvas-corner {
  position: absolute;
  top: 32px;
  right: 48px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Compliance-state chip beside the canvas avatar. Only rendered when there is
   something to say (single-operator mode); the four-eyes default is the
   norm and does not need a badge. */
.mode-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; white-space: nowrap;
  border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
}
.mode-chip--warn {
  color: oklch(42% 0.12 65); background: oklch(96% 0.05 85); border: 1px solid oklch(85% 0.1 85);
}
.mode-chip--warn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: oklch(70% 0.17 65); }

.canvas-corner .user-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: box-shadow 120ms;
}

.canvas-corner .user-menu-btn:hover,
.canvas-corner .user-menu-btn:focus-visible,
.canvas-corner .user-menu-wrap.open .user-menu-btn {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.canvas-corner .user-menu-btn .avatar--sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

.canvas-corner .user-dropdown {
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
}

/* Keep the first row of the canvas clear of the avatar. Phones hide the
   avatar (the mobile header carries it), so they keep the full width. */
@media (min-width: 681px) {
  main > .page-head, main > .home-head { padding-right: 64px; }
  .canvas-corner + .banner { margin-right: 64px; }
  /* The single-operator chip widens the corner to roughly 240px. */
  main:has(.mode-chip) > .page-head, main:has(.mode-chip) > .home-head { padding-right: 250px; }
  .canvas-corner:has(.mode-chip) + .banner { margin-right: 250px; }
}

/* Phone bottom tab bar -- hidden by default (desktop/tablet keep the
   sidebar); swapped in at the phone breakpoint below. */
.mobile-tabbar { display: none; }

main {
  flex: 1;
  min-width: 0;
  max-width: 1180px;
  padding: 40px 60px 48px;
  margin: 0 auto;
  /* Auto margins stop a flex item stretching across the column, so without
     an explicit width main shrinks to its content and short pages render
     narrower (and further right) than long ones. */
  width: 100%;
  position: relative;
}

/* ------------------------------------------------------------- page header */
.page-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: 36px;
}
/* Header with a right-aligned action (e.g. Freeze Obligations on the
   dashboard). Wraps under the title on narrow screens. */
.page-head--with-actions {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
}
.page-head__actions { flex-shrink: 0; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; transition: box-shadow 120ms;
}
.btn-outline:hover, .btn-outline:focus-visible {
  color: var(--ink); text-decoration: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.count-badge {
  display: inline-block; min-width: 20px; padding: 2px 6px;
  border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center;
}
.count-badge--warn { color: var(--warn); background: var(--warn-soft); }

.page-head .eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--ink-3); text-transform: uppercase;
}
.page-head h1, .page-head .title {
  font-size: 36px; font-weight: 800; letter-spacing: -0.02em;
  margin: 4px 0 0;
}
.page-head .sub {
  font-size: 14px; color: var(--ink-2); margin-top: 10px; max-width: 640px; line-height: 1.5;
}
.page-head .status-line {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.page-head .status-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex-shrink: 0; }
.page-head .status-line.bad .dot { background: var(--danger); }
.page-head .status-line span.text { font-size: 13.5px; color: var(--ink-2); }

.back-link {
  font-size: 13px; color: var(--ink-3); cursor: pointer; font-weight: 600;
  margin-bottom: 16px; display: inline-block;
}
.back-link:hover { color: var(--ink); text-decoration: none; }

/* Section label -- the small uppercase heading over a flat list */
.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-3); text-transform: uppercase; margin-bottom: 14px;
}

/* ------------------------------------------------------------------ panels */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 24px;
}
.panel > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 700; margin: 0 0 14px;
}
.panel h3, .panel > h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }

/* Hero stat card -- dashboard "needs a decision" */
.hero-stat {
  background:
    radial-gradient(circle at 100% 0%, oklch(40% 0.1 45 / 0.85), transparent 55%),
    var(--ink);
  color: white;
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 200px;
}
.hero-stat .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.hero-stat .n { font-size: 68px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero-stat .l { font-size: 14px; opacity: 0.7; margin-top: 8px; }

/* Bordered panel of label/value rows -- dashboard secondary stats */
.stat-list { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 6px 28px; display: flex; flex-direction: column; }
.stat-list .row-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.stat-list .row-item:last-child { border-bottom: none; }
.stat-list .row-item .label { font-size: 14px; color: var(--ink-2); }
.stat-list .row-item .value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

.dashboard-hero { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-bottom: 36px; }
@media (max-width: 860px) { .dashboard-hero { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- home page */
.home-head h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 0; }
.home-head .sub { font-size: 14.5px; color: var(--ink-2); margin-top: 12px; max-width: 620px; line-height: 1.6; }
.home-head .status-line { margin-top: 18px; }

/* "3D floating" action cards -- layered shadow (not just a border) plus a
   hover lift, so these three read as tappable objects rather than more
   flat-list rows; deliberately distinct from .panel for that reason. */
.home-quick-screen {
  display: flex; align-items: center; gap: 8px;
  max-width: 580px; margin: 20px 0 4px;
  padding: 6px 6px 6px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.home-quick-screen:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.home-quick-screen input[type="text"] {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font: inherit; font-size: 15px; color: var(--ink); padding: 6px 0;
}
.home-quick-screen button { border-radius: 999px; flex-shrink: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.action-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
@media (max-width: 860px) {
  .action-cards { grid-template-columns: 1fr; }
}
.action-card {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  row-gap: 16px; column-gap: 12px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 22px 24px;
  box-shadow: 0 1px 2px oklch(19% 0.012 250 / 0.04), 0 10px 26px -12px oklch(19% 0.012 250 / 0.18);
  color: var(--ink); text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.action-card:hover {
  text-decoration: none; color: var(--ink); border-color: var(--line);
  transform: translateY(-3px);
  box-shadow: 0 2px 4px oklch(19% 0.012 250 / 0.05), 0 18px 34px -14px oklch(19% 0.012 250 / 0.26);
}
.action-card:active { transform: translateY(-1px); }
.action-card__icon {
  grid-column: 1; grid-row: 1;
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1.5px solid var(--line);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.action-card__icon svg { width: 21px; height: 21px; }
.action-card__body { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.action-card__title { display: block; font-size: 16px; font-weight: 700; }
.action-card__sub { display: block; font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }

/* Floating alerts bar. This was position:sticky, chosen (per the original
   comment here) specifically to avoid a manual sidebar width/offset calc.
   In practice, sticky's "stuck" position is a fixed viewport-relative
   coordinate the instant the element's natural static position exceeds it
   -- which happens on page LOAD, not only after scrolling, on any page
   whose content is taller than the viewport (true on every phone almost
   always, given the footer text below this pill). It then renders pinned
   there regardless of how much content precedes it, permanently
   overlapping whatever sits at that coordinate. Confirmed empirically:
   adding margin/padding before a sticky element already past its
   threshold does not move its rendered position at all.
   Fixed instead, with .alerts-float-wrap doing the sidebar-offset math the
   original comment wanted to avoid -- it mirrors main's own box model
   (max-width, centering margin, horizontal padding) exactly, offset by the
   sidebar's width, so the pill lines up with the cards above it. This
   keeps the "always reachable without scrolling" intent sticky was going
   for, without the overlap. */
.alerts-float-wrap {
  position: fixed;
  left: 224px; right: 0; bottom: 20px; z-index: 5;
  max-width: 1180px; margin: 0 auto; padding: 0 60px;
  pointer-events: none; /* positioning box only; let clicks through to
    whatever's underneath except where the pill itself actually is */
}
.alerts-float-wrap > .alerts-float { pointer-events: auto; }
.alerts-float {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: 999px; padding: 16px 24px; margin-top: 8px;
  text-decoration: none;
  box-shadow: 0 1px 2px oklch(19% 0.012 250 / 0.06), 0 16px 32px -10px var(--glow-shadow, oklch(19% 0.012 250 / 0.3));
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.alerts-float:hover { text-decoration: none; transform: translateY(-2px); }
.alerts-float.is-pending {
  /* Same brand glow as the sign-in button, at the same physical size --
     this pill is much wider than that button, so the radius is a fixed
     px value rather than a %, which would dilute the color across the
     whole width and read as pitch black past the first sliver. */
  color: white;
  background: radial-gradient(circle 340px at 100% 0%, oklch(40% 0.1 45 / 0.85), var(--ink) 100%);
  --glow-shadow: oklch(19% 0.012 250 / 0.35);
}
.alerts-float.is-pending:hover { color: white; }
.alerts-float.is-clear {
  /* White, matching the floating action cards above it -- nothing left
     to act on, so this reads as calm rather than needing attention. */
  color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-soft);
  --glow-shadow: oklch(19% 0.012 250 / 0.16);
}
.alerts-float.is-clear:hover { color: var(--ink); }
.alerts-float__text { display: flex; flex-direction: column; gap: 2px; }
.alerts-float__text strong { font-size: 14.5px; font-weight: 700; }
.alerts-float__text span { font-size: 12.5px; opacity: 0.8; }

/* ------------------------------------------------------------- flat lists */
/* A scannable list row, divided by hairlines -- used for alerts-on-dashboard,
   customers-due-for-review, transactions, notes, audit, admin rows, etc. */
.flat-list { display: flex; flex-direction: column; }
.list-row {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 4px; border-bottom: 1px solid var(--line-soft);
}
.list-row:last-child { border-bottom: none; }
a.list-row, .list-row.clickable { cursor: pointer; }
a.list-row:hover, .list-row.clickable:hover { text-decoration: none; background: var(--line-soft); border-radius: 8px; }
.list-row .primary { font-size: 14.5px; font-weight: 600; }
.list-row .secondary { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .num { font-family: var(--mono); font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.list-row .side { font-size: 13px; color: var(--ink-3); }

.list-head {
  display: grid; padding: 12px 4px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}

/* ------------------------------------------------------------ tag / dot ui */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: none; padding: 0; border-radius: 0;
}
.tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.tag.proliferation { color: var(--violet); }
.tag.terrorism      { color: var(--terrorism); }
.tag.sanction        { color: var(--danger); }
.tag.pep             { color: var(--warn); }
.tag.other           { color: var(--ink-3); }
.tag.high            { color: var(--danger); }
.tag.medium          { color: var(--warn); }
.tag.low             { color: var(--good); }

/* --------------------------------------------------------------- tables */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 700; border-bottom: 1px solid var(--line);
  padding: 10px 8px;
}
td { padding: 12px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--line-soft); }

/* ------------------------------------------------------------------ alert cards */
.alert-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 16px;
}
.alert-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.alert-head h3 { margin: 0; font-size: 18px; font-weight: 700; }

/* Plain-text obligation line: dot marker + ink-2 text, no filled box */
.obligation {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0 0; padding: 0;
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
  background: none; border: none; border-radius: 0;
}
.obligation::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  margin-top: 7px; flex-shrink: 0; background: var(--ink-3);
}
.obligation.proliferation::before { background: var(--violet); }
.obligation.terrorism::before      { background: var(--terrorism); }
.obligation.sanction::before        { background: var(--danger); }
.obligation.pep::before             { background: var(--warn); }

/* ------------------------------------------------------------------ buttons */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px; border-radius: var(--radius-xs);
  font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em;
  cursor: pointer; border: 1px solid transparent; outline: none; text-decoration: none;
  background: var(--ink); color: white;
}
button:hover, .btn:hover { background: oklch(28% 0.012 250); text-decoration: none; color: white; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button.ghost, .btn.ghost, button.secondary, .btn.secondary {
  background: none; color: var(--ink); border-color: var(--line);
}
button.ghost:hover, .btn.ghost:hover, button.secondary:hover, .btn.secondary:hover {
  background: var(--line-soft); color: var(--ink);
}

button.danger, .btn.danger { background: var(--danger); border-color: var(--danger); color: white; }
button.danger:hover, .btn.danger:hover { background: oklch(46% 0.17 25); border-color: oklch(46% 0.17 25); }

button.small, .btn.small { padding: 6px 13px; font-size: 12.5px; }

.btn-pair { display: flex; gap: 10px; }

/* Sign-in / primary action button with the brand radial glow */
.btn-glow {
  background: radial-gradient(circle at 100% 0%, oklch(40% 0.1 45 / 0.85), transparent 55%), var(--ink);
  color: white; border: none; border-radius: var(--radius-sm);
  padding: 15px; font-size: 14.5px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
  width: 100%;
}
.btn-glow:hover { filter: brightness(1.08); color: white; }

/* --------------------------------------------------------------------- forms */
label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14.5px; background: var(--surface); color: var(--ink); outline: none;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 80px; }
.field { margin-bottom: 18px; }

/* Underline variant: chromeless hero inputs (login, register, search, screen-a-name) */
.input-underline {
  border: none !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; padding: 10px 2px !important; background: transparent !important;
  box-shadow: none !important;
}
.input-underline:focus { border-bottom-color: var(--accent) !important; }

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 18px; align-items: end; margin-bottom: 4px; }

/* --------------------------------------------------------------------- banners */
.banner {
  border-radius: var(--radius-sm); padding: 13px 16px; margin-bottom: 18px;
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--line); font-size: 13.5px;
}
.banner.err, .banner.error { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.banner.warn, .banner.warning { background: var(--warn-soft); color: oklch(45% 0.13 70); border-color: transparent; }
.banner.ok, .banner.success { background: var(--good-soft); color: var(--good); border-color: transparent; }
.banner .dismiss { cursor: pointer; opacity: 0.6; background: transparent; border: none; color: inherit; padding: 4px; font-size: 18px; line-height: 1; }
.banner .dismiss:hover { opacity: 1; background: transparent; }

/* --------------------------------------------------------------------- misc */
.breakdown {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 14px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6;
}
.breakdown code, code.mono {
  font-family: var(--mono); background: var(--line-soft); padding: 2px 6px; border-radius: 4px;
  font-size: 12px; color: var(--ink);
}
.score { font-variant-numeric: tabular-nums; font-weight: 700; font-family: var(--mono); color: var(--ink-2); }
.pair { display: inline-block; margin: 2px 6px 2px 0; }

details.evidence { margin-top: 14px; }
details.evidence summary {
  cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 700; user-select: none; list-style: none;
}
details.evidence summary::-webkit-details-marker { display: none; }
details.evidence summary::before { content: 'Why this matched'; }
details.evidence[open] summary::before { content: 'Hide evidence'; }
details.evidence summary * { display: none; }

.review-note {
  border: 1px solid var(--warn); background: var(--warn-soft); color: oklch(40% 0.12 70);
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin: 10px 0;
}

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 24px; text-align: center; color: var(--ink-3);
}
.empty-state__icon { font-size: 28px; margin-bottom: 12px; opacity: 0.6; }
.empty-state__title { color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.empty-state__text { margin: 0; }

.toggle-switch { display: flex; align-items: flex-start; gap: 12px; }
.toggle-switch input { width: 18px; height: 18px; margin: 2px 0 0; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.toggle-switch label { text-transform: none; font-size: 14px; color: var(--ink-2); font-weight: 400; letter-spacing: 0; margin: 0; cursor: pointer; }
.toggle-switch label strong { color: var(--ink); }

.ocr-upload-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; margin-bottom: 8px; background: var(--line-soft);
}

.step-indicator {
  width: 26px; height: 26px; border-radius: 50%; background: var(--ink);
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-bottom: 14px;
}

/* Tab-underline status filter (replaces the old segmented pill control) */
.tab-filter { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; flex-wrap: wrap; }
.tab-filter a {
  padding: 0 0 12px; font-size: 13.5px; font-weight: 700; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-filter a:hover { color: var(--ink); text-decoration: none; }
.tab-filter a.on { color: var(--ink); border-bottom-color: var(--ink); }

.progress-track { height: 4px; background: var(--line); border-radius: 999px; width: 100%; position: relative; }
.progress-track__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 150ms ease; }

.narrative-block {
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px 16px;
  margin: 10px 0; background: var(--surface); color: var(--ink-2); line-height: 1.6;
}

/* ------------------------------------------------------------------- utility */
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }
.ml-4 { margin-left: 16px; }
.mr-4 { margin-right: 16px; }
.mr-6 { margin-right: 24px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.text-decoration-none { text-decoration: none; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.right-0 { right: 0; }
.top-24 { top: 24px; }
.w-180 { width: 180px; }
.cursor-pointer { cursor: pointer; }

.stack > * + * { margin-top: 12px; }
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --------------------------------------------------------- customers table */
.customers-head, .customers-row {
  display: grid;
  grid-template-columns: 110px 1.6fr 1fr 0.8fr 70px 110px 90px;
  align-items: center;
}

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-5 { margin-top: 20px !important; }
.mt-6 { margin-top: 24px !important; }

.fade-in { animation: fadeIn 0.3s ease-in-out; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 100; background: var(--surface);
    transform: translateX(-100%); transition: transform 180ms ease; box-shadow: 0 0 0 2000px rgba(0,0,0,0);
  }
  #nav-toggle:checked ~ .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.15); }
  .nav-hamburger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 16px; left: 16px; z-index: 101;
    width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line);
    background: var(--surface); cursor: pointer; font-size: 16px;
  }
  /* The fixed hamburger (top-left) and the canvas avatar (top-right) share
     the first 68px; content starts below them. */
  main { padding: 76px 20px 40px; max-width: 100%; }
  .canvas-corner { top: 12px; right: 20px; }
  /* Sidebar is off-canvas here, not a persistent column -- mirror main's
     own left offset (none) and horizontal padding (20px) at this width. */
  .alerts-float-wrap { left: 0; padding: 0 20px; }
  .grid.two { grid-template-columns: 1fr; }
  .dashboard-hero { grid-template-columns: 1fr; }
  .panel { padding: 18px; }
  .table-responsive { margin: 0 -16px; padding: 0 16px; }
}

/* tablet: customers grid — collapse Type/Evidence columns to save width */
@media (max-width: 860px) {
  .customers-head, .customers-row {
    grid-template-columns: 100px 1fr 80px 60px 100px;
  }
  .cust-col-type, .cust-col-evidence { display: none; }
  /* grid-tables with fixed pixel columns: allow horizontal scroll instead
     of wrapping prematurely (phone breakpoint stacks them entirely) */
  .grid-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .grid-table .list-head,
  .grid-table .flat-list { min-width: 500px; }
}

/* ---------------------------------------------------------------- mobile header */
/* Visible only on phone; desktop/tablet use the sidebar. */
.mobile-header { display: none; }

/* ----------------------------------------------------------------- user dropdown */
/* Shared between desktop operator-box hover and the mobile user menu. */
.user-menu-wrap { position: relative; }
.user-dropdown {
  display: none;
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 200px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px oklch(19% 0.012 250 / 0.12);
  z-index: 200; overflow: hidden;
}
.user-menu-wrap.open .user-dropdown { display: block; }
.user-dropdown__header {
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 2px;
}
.user-dropdown__header strong { font-size: 13.5px; font-weight: 700; }
.user-dropdown__role { font-size: 11px; color: var(--ink-3); text-transform: capitalize; }
.user-dropdown__item {
  display: block; width: 100%; padding: 11px 16px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  text-decoration: none; background: none; border: none;
  text-align: left; cursor: pointer; font-family: inherit;
}
.user-dropdown__item:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.user-dropdown__divider { border-top: 1px solid var(--line-soft); margin: 4px 0; }
.user-dropdown__logout { color: var(--danger); }
.user-dropdown__logout:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------- audit log error rows */
.audit-row--error { background: var(--danger-soft); }
.audit-row--error .audit-action { color: var(--danger); }

/* Phone width -- the sidebar (and its hamburger toggle) is replaced by a
   four-tab bottom bar plus a top header with user menu; same hairline/dot
   vocabulary as the rest of the app. */
@media (max-width: 680px) {
  .sidebar, .nav-hamburger, .canvas-corner { display: none !important; }
  :root { --tabbar-h: 62px; --mobile-header-h: 52px; }
  main { padding: calc(var(--mobile-header-h) + 16px) 18px calc(var(--tabbar-h) + 28px); }

  /* Reduce headline sizes so long names/titles don't overflow on small screens */
  .page-head h1, .page-head .title { font-size: 26px; }
  .home-head h1 { font-size: 26px; }
  .hero-stat .n { font-size: 48px; }

  /* Remove tablet min-width so phone grid-table stacking works correctly.
     The .grid-table .list-row { display: flex !important } rule below already
     overrides the customers-row display:grid, so no extra rule is needed. */
  .grid-table { overflow-x: visible; }
  .grid-table .list-head, .grid-table .flat-list { min-width: 0; }

  .mobile-header {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; height: var(--mobile-header-h);
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 0 16px; z-index: 50;
  }
  .mobile-header__logo {
    display: flex; align-items: center; gap: 8px;
    color: var(--ink); text-decoration: none; font-weight: 800; font-size: 15px;
  }
  .mobile-header__logo:hover { color: var(--ink); text-decoration: none; }
  .mobile-header__logo-img { height: 24px; width: auto; }
  .mobile-header .user-menu-wrap { position: relative; }
  .mobile-header .user-dropdown { right: 0; top: calc(100% + 4px); }
  .user-menu-btn {
    background: none; border: 1px solid var(--line); border-radius: 50%;
    width: 44px; height: 44px; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 13px;
  }
  .user-menu-btn .avatar--sm {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--ink); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
  }

  .mobile-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    border-top: 1px solid var(--line); background: var(--surface);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-tab {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 6px 2px; min-height: 44px;
    color: var(--ink-3); text-decoration: none;
  }
  .mobile-tab:hover { color: var(--ink-3); text-decoration: none; }
  .mobile-tab.on:hover { color: var(--ink); }
  .mobile-tab__icon {
    width: 9px; height: 9px; border-radius: 2px;
    border: 1.5px solid var(--ink-3); background: none;
  }
  .mobile-tab__icon--screen { border-radius: 50%; }
  .mobile-tab__label { font-size: 10.5px; font-weight: 600; }
  .mobile-tab.on { color: var(--ink); }
  .mobile-tab.on .mobile-tab__label { font-weight: 700; }
  .mobile-tab.on .mobile-tab__icon { background: var(--ink); border-color: var(--ink); }

  /* Keep the floating alerts pill above the tab bar instead of under it,
     and mirror main's own left offset (none) and horizontal padding (18px)
     at this width. Right padding is wider than the left: the feedback
     button (.feedback-btn, also fixed at tabbar-h+20px here) sits in that
     same bottom-right corner, so the pill's own right edge has to stop
     clear of the button's 56px circle instead of running full-width. */
  .alerts-float-wrap { left: 0; padding: 0 84px 0 18px; bottom: calc(var(--tabbar-h) + 20px); }

  /* Multi-field rows (screen-a-name, add-owner, transaction entry, etc.)
     stack one field per line instead of squeezing side by side. */
  .row { grid-template-columns: 1fr; }

  /* Column-labelled grid tables (screening history, audit trail, admin data
     sources, etc.) -- collapse into a label/value stack instead of
     squeezing fixed pixel columns into a ~380px viewport. Each cell needs
     a data-label attribute matching its column header. */
  .grid-table .list-head { display: none; }
  .grid-table .list-row {
    display: flex !important; flex-direction: column; gap: 6px;
    grid-template-columns: none !important;
    padding: 14px 4px;
  }
  .grid-table .list-row > * { display: flex; justify-content: space-between; gap: 12px; text-align: left !important; }
  .grid-table .list-row > [data-label]::before {
    content: attr(data-label); font-size: 11px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
    flex-shrink: 0;
  }

  /* Disposition button pairs (confirm/override, dismiss/confirm) split the
     full width evenly, same as the phone design -- within thumb reach as a
     single row rather than each at its default inline width. */
  .btn-pair button { flex: 1; }
  form.stack button[type="submit"]:only-of-type { width: 100%; }
}

/* ------------------------------------------------------------------- spinner / loading */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .6s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
.spinner--lg { width: 24px; height: 24px; border-width: 3px; }

form.is-submitting button[type="submit"] {
  pointer-events: none; opacity: 0.6;
}

/* ------------------------------------------------------------------ cookie notice */
/* Informational only -- every cookie amlkit sets is strictly necessary
   (see /privacy), so this is a one-time notice, not a consent gate. */
.cookie-notice {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 998;
  max-width: 640px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--ink); color: white;
  border-radius: var(--radius, 14px); padding: 14px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.cookie-notice p { flex: 1 1 320px; min-width: 0; font-size: 13px; line-height: 1.55; margin: 0; opacity: 0.92; }
.cookie-notice a { color: white; text-decoration: underline; }
.cookie-notice button {
  flex-shrink: 0; background: white; color: var(--ink); border: none;
  border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
}
@media (max-width: 680px) {
  .cookie-notice { bottom: calc(var(--tabbar-h, 0px) + 20px); }
}

/* ------------------------------------------------------------------- feedback */
.feedback-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: white;
  border: none; font-size: 24px;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
.feedback-btn:hover {
  transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
@media (max-width: 680px) {
  /* Fixed at bottom-right at every width, this landed directly on top of
     the tab bar's last tab (Customers) -- z-index 999 put it above the
     bar, blocking that tab entirely. Measured clearance: the tab bar is
     ~61px tall (--tabbar-h: 62px is the app's own estimate), so lift the
     button's own 56px box clear of it with a visible gap above. */
  .feedback-btn { bottom: calc(var(--tabbar-h) + 20px); right: 16px; }
}

.feedback-modal {
  display: none; position: fixed; z-index: 1000;
  left: 0; top: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
}
.feedback-modal-content {
  background: var(--surface); margin: 10% auto;
  padding: 24px; border-radius: var(--radius); max-width: 480px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2); position: relative;
}
.feedback-modal-close {
  position: absolute; right: 16px; top: 16px;
  font-size: 28px; font-weight: bold; color: var(--ink-3);
  cursor: pointer; line-height: 1;
}
.feedback-modal-close:hover { color: var(--ink); }
.feedback-modal h3 { margin: 0 0 8px 0; }
.feedback-modal textarea {
  width: 100%; padding: 10px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  font-family: inherit; font-size: 14px; resize: vertical;
}

/* ------------------------------------------- freeze obligations (TFS, CR 134/2025) */
/* Dashboard <details> panel. The <summary> renders its own chevron span, so the
   browser's native disclosure marker is suppressed -- otherwise the row shows
   both a native triangle and the chevron. The chevron rotates on [open]. */
.freeze-obligations-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.freeze-obligations-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; cursor: pointer; user-select: none; list-style: none;
}
.freeze-obligations-summary::-webkit-details-marker { display: none; }
.freeze-obligations-summary::marker { content: ''; }
.freeze-obligations-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.freeze-obligations-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 700;
}
.freeze-obligations-chevron { font-size: 11px; color: var(--ink-3); transition: transform 0.15s ease; }
.freeze-obligations-panel[open] .freeze-obligations-chevron { transform: rotate(180deg); }
.freeze-obligations-panel .freeze-obligations-content.panel {
  border: none; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: 0;
}

/* Count chips: dashboard panel (.stat-chip) and list page (.stats-bar .stat). */
.stat-chip, .stats-bar .stat {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.stat-chip strong, .stats-bar .stat strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.stats-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

/* Freeze list page */
.alert.alert-info {
  background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  padding: 14px 18px; margin-bottom: 20px; color: var(--ink-2);
}
.alert.alert-info strong { color: var(--ink); }
.filter-form { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.filter-form label { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0; }
.filter-form select { width: auto; }
.freeze-obligations-table th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
}
.freeze-obligations-table tr.status-pending_execution td       { background: var(--warn-soft); }
.freeze-obligations-table tr.status-pending_execution.overdue td { background: var(--danger-soft); font-weight: 700; }
.freeze-obligations-table tr.status-executed_pending_report td { background: var(--accent-soft); }
.freeze-obligations-table tr.status-reported td                { background: var(--good-soft); }
.freeze-obligations-table tr.status-resolved td                { background: var(--line-soft); color: var(--ink-2); }
.freeze-obligations-table .empty-row td { background: none; padding: 0; }
.overdue { color: var(--danger); }

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
}
.badge-critical { background: var(--danger-soft); color: var(--danger); }
.badge-high     { background: var(--warn-soft);   color: oklch(40% 0.12 70); }

/* Button variants spelled the Bootstrap way by the freeze templates; they map
   onto the existing .btn.small / .btn.secondary looks plus an accent primary. */
.btn.btn-sm { padding: 6px 13px; font-size: 12.5px; }
.btn.btn-primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn.btn-primary:hover { background: oklch(45% 0.16 250); border-color: oklch(45% 0.16 250); color: white; }
.btn.btn-secondary { background: none; color: var(--ink); border-color: var(--line); }
.btn.btn-secondary:hover { background: var(--line-soft); color: var(--ink); }

/* Freeze detail page */
.obligation-header {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px;
  padding: 20px 24px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 24px;
}
.obligation-header .field { margin: 0; }
.obligation-header .field label {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 700; margin-bottom: 4px;
}
.timeline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px;
}
.timeline-item {
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-2); line-height: 1.55;
}
.timeline-item strong { color: var(--ink); }
.timeline-item.completed { border-left-color: var(--good); }
.timeline-item.pending   { border-left-color: var(--warn); color: var(--ink-3); }
.section { margin-bottom: 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ------------------------------------------------------------- accessibility */
.skip-to-content {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
  z-index: 9999; padding: 8px 16px; background: var(--accent); color: #fff; font-weight: 600;
  text-decoration: none; border-radius: 4px;
}
.skip-to-content:focus {
  position: fixed; left: 16px; top: 16px; width: auto; height: auto; overflow: visible;
}
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Screen reader only content */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* ------------------------------------------------------------------- print */
@media print {
  body { background: #fff; color: #000; }
  .sidebar, .nav-hamburger, .mobile-tabbar, .no-print, button, .btn { display: none !important; }
  main { padding: 0; max-width: none; }
  .panel, .alert-card { border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; margin-bottom: 12px; }
  a { color: #000; text-decoration: underline; }
  details.evidence[open] summary { display: none; }
  details.evidence { display: block; }
}

/* Link-styled button (first-run guide) */
.link-button{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}