/* ============================================================
   Contract Intelligence — dashboard design system
   Light, warm-neutral interface · deep navy-slate ink · teal accent
   8px spacing grid · system fonts · no external assets
   NOTE: the CSP is `style-src 'self'`; templates must never use
   inline style attributes — express all presentation here.
   ============================================================ */

:root {
  color-scheme: light;

  /* palette */
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #f2f4f4;
  --ink: #1b2a38;
  --ink-2: #3d4f60;
  --muted: #5c6f81;
  --line: #e4e6e3;
  --line-2: #cfd6d5;

  --accent: #0c6b74;
  --accent-deep: #08525a;
  --accent-soft: #e1efef;
  --accent-wash: #f3f8f8;

  --ok: #17714a;
  --ok-soft: #e2f2e9;
  --warn: #7c5300;
  --warn-soft: #f9efd8;
  --danger: #a92e42;
  --danger-deep: #8d2536;
  --danger-soft: #f9ebee;

  /* Soft borders paired with the *-soft fills above. Variables, not
     literals, so the dark theme restates them instead of leaving
     pale hairlines on a dark surface. */
  --accent-line: #c8e0e1;
  --ok-line: #c6e5d4;
  --warn-line: #eddcae;
  --danger-line: #efccd3;
  --warn-strong: #c98a00;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(27, 42, 56, 0.05);
  --shadow-2: 0 1px 2px rgba(27, 42, 56, 0.04), 0 10px 28px -14px rgba(27, 42, 56, 0.14);

  /* shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* type */
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas,
          "Liberation Mono", monospace;

  --focus-ring: 0 0 0 3px rgba(12, 107, 116, 0.26);
  --sidebar-w: 246px;
}

/* ---------- dark theme ----------
   Only the palette changes; every rule below reads these variables, so the
   two themes cannot drift apart. Applied when the viewer asks for dark and
   has not explicitly chosen light, or when they pick dark outright -- the
   attribute always wins over the media query, in both directions. */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #10161c;
  --surface: #172029;
  --surface-2: #1f2a34;
  --ink: #e8edf1;
  --ink-2: #c2cdd7;
  --muted: #93a3b1;
  --line: #253039;
  --line-2: #33414c;

  --accent: #3fb6bf;
  --accent-deep: #6ad0d7;
  --accent-soft: #17323a;
  --accent-wash: #14262c;

  --ok: #6bd39c;
  --ok-soft: #16302a;
  --warn: #e8bd6a;
  --warn-soft: #33290f;
  --danger: #f0899a;
  --danger-deep: #f7a7b4;
  --danger-soft: #3a1c23;

  --accent-line: #22454c;
  --ok-line: #24503f;
  --warn-line: #4d3d16;
  --danger-line: #5a2a34;
  --warn-strong: #e8bd6a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.6);

  --focus-ring: 0 0 0 3px rgba(63, 182, 191, 0.38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #10161c;
    --surface: #172029;
    --surface-2: #1f2a34;
    --ink: #e8edf1;
    --ink-2: #c2cdd7;
    --muted: #93a3b1;
    --line: #253039;
    --line-2: #33414c;

    --accent: #3fb6bf;
    --accent-deep: #6ad0d7;
    --accent-soft: #17323a;
    --accent-wash: #14262c;

    --ok: #6bd39c;
    --ok-soft: #16302a;
    --warn: #e8bd6a;
    --warn-soft: #33290f;
    --danger: #f0899a;
    --danger-deep: #f7a7b4;
    --danger-soft: #3a1c23;

    --accent-line: #22454c;
    --ok-line: #24503f;
    --warn-line: #4d3d16;
    --danger-line: #5a2a34;
    --warn-strong: #e8bd6a;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.6);

    --focus-ring: 0 0 0 3px rgba(63, 182, 191, 0.38);
  }
}

/* The toggle shows the theme you would switch TO, so only one icon is ever
   visible; the other is removed from the tree rather than merely hidden. */
.theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-dark { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-light { display: none; }
  :root[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; }
  :root[data-theme="light"] .theme-toggle .theme-icon-light { display: block; }
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.25; }
h1 { font-size: 1.45rem; letter-spacing: -0.015em; }
h2 { font-size: 1.05rem; letter-spacing: -0.008em; }
h3 { font-size: 0.95rem; }

p { margin: 0.5rem 0; }
small { font-size: 0.8rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }

code { font-family: var(--mono); font-size: 0.86em; word-break: break-all; }

svg { flex-shrink: 0; }

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

.muted { color: var(--muted); }
.lead { font-size: 1.05rem; color: var(--ink-2); }

.eyebrow {
  margin: 0 0 0.25rem;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

a, button, .badge, .chip, input, select, textarea, progress, .side-nav a {
  transition: background-color 120ms ease, border-color 120ms ease,
              color 120ms ease, box-shadow 120ms ease;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 50;
  padding: 0.5rem 0.85rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-sm);
}
.skip-link:focus { top: 0.75rem; color: var(--bg); }

/* ---------- app shell ---------- */

body.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100dvh;
  overflow-y: auto;
  padding: 1.25rem 1rem;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.5rem;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark { width: 27px; height: 27px; }
.brand-mark .bm-bg { fill: var(--accent); }
.brand-mark .bm-shield { fill: none; stroke: var(--bg); stroke-width: 1.8; stroke-linejoin: round; }
.brand-mark .bm-check { fill: none; stroke: var(--bg); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.side-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 0.75rem; flex: 1; }

.nav-group-label {
  margin: 1rem 0.55rem 0.3rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.side-nav .nav-group-label:first-child { margin-top: 0; }

.side-nav a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 38px;
  padding: 0.35rem 0.55rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 550;
}
.side-nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.side-nav a .nav-icon { width: 17px; height: 17px; color: var(--muted); }
.side-nav a:hover .nav-icon { color: var(--ink-2); }
.side-nav a.is-active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 650; position: relative; }
.side-nav a.is-active .nav-icon { color: var(--accent); }
/* A filled pill alone reads as a hover state; the marker makes the current
   section unambiguous, and survives forced-colours mode where the tint drops. */
.side-nav a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.15rem;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
@media (forced-colors: active) {
  .side-nav a.is-active::before { background: Highlight; }
}

.sidebar-foot {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-account {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 38px;
  padding: 0.35rem 0.55rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 550;
}
.side-account:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.side-account .nav-icon { width: 17px; height: 17px; color: var(--muted); }
.side-account[aria-current="page"] { background: var(--accent-soft); color: var(--accent-deep); font-weight: 650; }
.side-account[aria-current="page"] .nav-icon { color: var(--accent); }

.nav-toggle { display: none; }
.side-logout { margin: 0; }
/* Sign out is a link to a confirmation page and the theme control is a
   button; both sit in this row and must look identical. Selecting on the
   element alone left the link unstyled and its icon at full size. */
.side-logout button,
.side-logout a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: flex-start;
  width: 100%;
  min-height: 38px;
  padding: 0.35rem 0.55rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 550;
  text-decoration: none;
}
.side-logout button:hover,
.side-logout a:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); text-decoration: none; }
.side-logout button .nav-icon,
.side-logout a .nav-icon { width: 17px; height: 17px; color: var(--muted); }

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.55rem;
  border-radius: var(--r-sm);
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.8rem;
  font-weight: 700;
}

.user-meta { display: grid; min-width: 0; }
.user-meta strong {
  font-size: 0.84rem;
  font-weight: 640;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-meta small { color: var(--muted); font-size: 0.72rem; }

/* public (unauthenticated / guest-request) shell */

body.public { display: flex; flex-direction: column; min-height: 100dvh; }

.public-topbar {
  display: flex;
  align-items: center;
  padding: 0.9rem max(1.25rem, calc((100% - 1160px) / 2));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

main.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 2rem 2rem 3.5rem;
}
body.public main.container { max-width: 640px; padding-top: 2.5rem; }

/* ---------- messages & callouts ---------- */

.message,
.warning,
.alert {
  display: block;
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  background: var(--accent-wash);
  border: 1px solid var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
}

.warning,
.alert-warning {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  border-left-color: var(--warn-strong);
  color: var(--warn);
}
.alert-danger, .alert-error {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  border-left-color: var(--danger);
  color: var(--danger-deep);
}
.alert-success, .message.success { background: var(--ok-soft); border-color: var(--ok-line); border-left-color: var(--ok); color: var(--ok); }
.message.warning { background: var(--warn-soft); border-color: var(--warn-line); border-left-color: var(--warn-strong); color: var(--warn); }
.message.error { background: var(--danger-soft); border-color: var(--danger-line); border-left-color: var(--danger); color: var(--danger-deep); }

.live-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-left: 3px solid var(--warn-strong);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  color: var(--warn);
}
.live-banner[hidden] { display: none; }
.live-banner a { font-weight: 600; }

/* ---------- page heading ---------- */

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.page-heading-info { min-width: 0; }
.page-sub { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.92rem; max-width: 60ch; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  font-size: 0.84rem;
}
.breadcrumb .crumb-sep { color: var(--line-2); }
.breadcrumb [aria-current] { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; }

/* segmented period control */

.period-picker { display: grid; gap: 0.3rem; justify-items: end; }
.control-label { color: var(--muted); font-size: 0.72rem; font-weight: 700; }

.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
}
.segmented a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 0.75rem;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.segmented a:hover { color: var(--ink); text-decoration: none; }
.segmented a.is-active { background: var(--accent-soft); color: var(--accent-deep); }

/* ---------- badges, chips, statuses ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.badge-accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.badge-ok      { background: var(--ok-soft);     border-color: var(--ok-line); color: var(--ok); }
.badge-warn    { background: var(--warn-soft);   border-color: var(--warn-line); color: var(--warn); }
.badge-danger  { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-deep); }

/* pipeline / verification states, applied on top of .badge */
.status-ok, .status-successful, .status-published, .status-confirmed,
.status-active, .status-resolved, .status-approved {
  background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok);
}
.status-failed, .status-error, .status-declined, .status-revoked, .status-expired {
  background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-deep);
}
.status-unknown, .status-pending, .status-awaiting, .status-awaiting-verification,
.status-awaiting_verification,
.status-unverified, .status-open, .status-warning, .status-partial, .status-degraded {
  background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn);
}

/* confidence levels */
.conf-high { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
.conf-mid  { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.conf-low  { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-deep); }
.conf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.conf-mid .conf-dot { background: var(--warn-strong); }
.conf-low .conf-dot { background: var(--danger); }

.status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--warn-strong);
}
.status-dot.status-ok, .status-dot.status-successful, .status-dot.status-published { background: var(--ok); }
.status-dot.status-failed, .status-dot.status-error { background: var(--danger); }

.chip {
  display: inline-block;
  padding: 0.06rem 0.45rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-2);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
a.chip:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash); text-decoration: none; }

.missing { color: var(--muted); }

.money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- buttons & forms ---------- */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.45rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--bg);
  font: 600 0.88rem/1.2 var(--font);
  cursor: pointer;
}
button:hover, .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--bg); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

button.secondary, .btn-secondary, .btn-info, .btn-warning {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink-2);
}
button.secondary:hover, .btn-secondary:hover, .btn-info:hover, .btn-warning:hover {
  background: var(--surface-2);
  border-color: var(--muted);
  color: var(--ink);
}

button.danger, .btn-danger {
  background: var(--surface);
  border-color: var(--danger-line);
  color: var(--danger-deep);
}
button.danger:hover, .btn-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--bg); }

.btn-link { background: none; border-color: transparent; color: var(--accent); padding: 0.45rem 0.5rem; }
.btn-link:hover { background: var(--accent-wash); color: var(--accent-deep); }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 32px; padding: 0.25rem 0.7rem; font-size: 0.8rem; }
.float-right { float: right; }

label { font-size: 0.8rem; font-weight: 650; color: var(--ink-2); }

input, textarea, select {
  max-width: 100%;
  min-height: 38px;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: 400 0.9rem/1.4 var(--font);
}
textarea { min-height: 5rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:hover, textarea:hover, select:hover { border-color: var(--muted); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c6f81' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}

input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

/* rendered by form.as_p on public/auth pages */
form p { display: grid; gap: 0.3rem; margin: 0 0 0.9rem; }
form p label { margin: 0; }

/* forms rendered with as_table (django-two-factor pages): stack the rows and
   strip the data-table chrome */
form table, form table tbody, form table tr, form table th, form table td { display: block; }
form table th, form table td { padding: 0; border: 0; background: none; }
form table th {
  color: var(--ink-2);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  padding-bottom: 0.25rem;
}
form table td { padding-bottom: 0.9rem; }
form table td input:not([type="checkbox"]):not([type="radio"]),
form table td select, form table td textarea { width: 100%; }
.errorlist { margin: 0 0 0.75rem; padding: 0; list-style: none; }
.errorlist li {
  padding: 0.5rem 0.75rem;
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-sm);
  color: var(--danger-deep);
  font-size: 0.84rem;
}
.helptext { color: var(--muted); font-size: 0.78rem; font-weight: 400; }

/* six-digit verification code */
#id_code {
  max-width: 12rem;
  font-family: var(--mono);
  font-size: 1.3rem;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- cards / panels ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-1);
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.panel .section-heading { margin-bottom: 1rem; }
.section-heading > a, .section-heading .heading-note { font-size: 0.84rem; white-space: nowrap; }
.section-heading .heading-note { color: var(--muted); }

/* KPI cards */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}

.kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-height: 118px;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
/* The cards are links now; keep them looking like cards rather than text. */
a.kpi { color: inherit; text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; }
a.kpi:hover { border-color: var(--accent); box-shadow: var(--shadow-2, var(--shadow-1)); text-decoration: none; }
a.kpi:active { transform: translateY(1px); }
a.kpi:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kpi-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kpi-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--line-2);
}
.kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.kpi-note { color: var(--muted); font-size: 0.78rem; }

.accent-card { border-color: var(--accent-line); background: linear-gradient(180deg, var(--surface), var(--accent-wash)); }
.accent-card .kpi-label::before { background: var(--accent); }
.accent-card .kpi-value { color: var(--accent-deep); }

.risk-card { border-color: var(--danger-line); background: linear-gradient(180deg, var(--surface), var(--danger-soft)); }
.risk-card .kpi-label::before { background: var(--danger); }
.risk-card .kpi-value { color: var(--danger-deep); }

/* pipeline run strip */

.run-strip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  font-size: 0.88rem;
}
.run-strip .muted { font-variant-numeric: tabular-nums; }
/* Liveness of the polling worker, which the run timestamp cannot convey: runs
   are only recorded when a generation changes, so a healthy-but-quiet worker
   and a dead one leave the same trace. */
.live-beat {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-deep);
  white-space: nowrap;
}
.live-beat-failing { background: var(--warn-soft); color: var(--warn); }
.live-beat-stale { background: var(--danger-soft); color: var(--danger-deep); }
.run-strip-link { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; font-size: 0.84rem; }

/* ---------- overview panels ---------- */

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}
.dashboard-grid.halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bar-chart { display: grid; gap: 0.5rem; align-content: start; }
.bar-row {
  display: grid;
  grid-template-columns: 52px 1fr 30px;
  gap: 0.7rem;
  align-items: center;
  font-size: 0.78rem;
}
.bar-row time { color: var(--muted); white-space: nowrap; }
.bar-row strong { text-align: right; font-variant-numeric: tabular-nums; }

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  border: 0;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.bar-line { height: 8px; }
.coverage-bar { height: 8px; }

.coverage-item { margin-bottom: 1.1rem; }
.coverage-item > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
}
.coverage-item strong { font-variant-numeric: tabular-nums; }

.action-list { border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: 0.35rem; }
.action-list a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 40px;
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--surface-2);
  border-radius: 4px;
  color: var(--ink-2);
  font-size: 0.88rem;
}
.action-list a:last-child { border-bottom: 0; }
.action-list a:hover { background: var(--accent-wash); color: var(--ink); text-decoration: none; }
.action-list .count {
  margin-left: auto;
  min-width: 1.9rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.action-list .chev { color: var(--line-2); }
.action-list a:hover .chev { color: var(--accent); }

.rankings { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.rankings li { border-bottom: 1px solid var(--surface-2); }
.rankings li:last-child { border-bottom: 0; }
.rankings li > a, .rankings .rank-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.25rem;
  border-radius: 4px;
  color: inherit;
}
.rankings li > a:hover { background: var(--accent-wash); text-decoration: none; }
.rankings .rank-index {
  width: 1.4rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rankings .rank-label { display: grid; min-width: 0; }
.rankings .rank-label strong {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rankings .rank-label small { color: var(--muted); }
.rankings b { margin-left: auto; font-size: 0.88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.recent-heading { margin: 2rem 0 0.75rem; }

/* ---------- filters toolbar ---------- */

.filters-panel {
  margin: 1.25rem 0 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.85rem 1rem;
  margin: 0;
}
.filters .field { display: grid; gap: 0.3rem; }
.filters .field-search { flex: 1 1 240px; }
.search-field { position: relative; display: flex; }
.search-field input { width: 100%; padding-left: 2.1rem; }
.search-field .search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 38px;
  padding: 0 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--ink-2);
  cursor: pointer;
}
.check-field:hover { border-color: var(--muted); }

.filter-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }

.export-actions { display: grid; gap: 0.3rem; justify-items: end; }
.export-buttons { display: flex; gap: 0.5rem; }
.reset-link { font-size: 0.84rem; color: var(--muted); }
.reset-link:hover { color: var(--danger-deep); }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.filter-chips .chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent-deep);
  font-weight: 600;
}
.filter-chips .chip-filter span { font-weight: 450; }

/* ---------- tables ---------- */

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

table { width: 100%; border-collapse: collapse; }
.table-wrap table { min-width: 820px; }

th, td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--surface-2);
  text-align: left;
  vertical-align: top;
}
th {
  padding-top: 0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--accent-wash); }
tbody tr.row-empty:hover td { background: transparent; }

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.cell-date { color: var(--muted); font-size: 0.82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.cell-date time { display: block; color: var(--ink-2); }
td.cell-subject { max-width: 420px; }
td.cell-winner { max-width: 300px; color: var(--ink-2); font-size: 0.88rem; }
.cell-ada a { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; }

.table-empty {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 2.5rem 1rem;
  text-align: center;
}
.table-empty svg { width: 30px; height: 30px; color: var(--line-2); }
.table-empty strong { font-size: 0.95rem; }
.table-empty span { color: var(--muted); font-size: 0.85rem; }

/* ---------- pagination ---------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.page-status { color: var(--muted); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.page-controls { display: flex; gap: 0.5rem; }
.page-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.3rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.84rem;
  font-weight: 600;
}
a.page-btn:hover { border-color: var(--accent); color: var(--accent-deep); text-decoration: none; background: var(--accent-wash); }
span.page-btn { opacity: 0.45; }

/* ---------- detail pages ---------- */

.detail-header { margin-bottom: 1.25rem; }
.detail-header h1 { max-width: 56ch; overflow-wrap: anywhere; }
.detail-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}
.detail-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 1rem;
  align-items: start;
}
.detail-main { display: grid; gap: 1rem; min-width: 0; }
.detail-aside { min-width: 0; display: grid; gap: 1rem; }
.facts dt code { font-size: 0.78rem; }

.fin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  margin: 0;
}
.fin-item { display: grid; gap: 0.1rem; padding: 1rem 1.25rem; border-left: 1px solid var(--surface-2); }
.fin-item:first-child { border-left: 0; }
.fin-item dt { color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.fin-item dd { margin: 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fin-item.fin-total { background: var(--accent-wash); }
.fin-item.fin-total dd { color: var(--accent-deep); }

.facts { margin: 0; }
.facts > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--surface-2);
}
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); font-size: 0.8rem; font-weight: 650; padding-top: 0.1rem; }
.facts dd { margin: 0; font-size: 0.88rem; min-width: 0; overflow-wrap: anywhere; }
.facts dd .badge { margin: 0 0.2rem 0.2rem 0; }

.doc-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1rem; width: 100%; }

/* winners / ownership entity cards */

.entity-list { display: grid; gap: 0.75rem; }
.entity-card {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.entity-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.95rem;
  font-weight: 700;
}
.entity-body { display: grid; gap: 0.4rem; min-width: 0; flex: 1; }
.entity-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}
.entity-title strong { overflow-wrap: anywhere; }
.entity-title .entity-amount { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.entity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.entity-row .sep { color: var(--line-2); }

.path-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.path-chain .path-arrow { color: var(--line-2); font-size: 0.8rem; }

.note-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.note-list li {
  padding: 0.6rem 0.9rem;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-sm);
  color: var(--warn);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.detail-section { margin-top: 1.75rem; }
.detail-section > h2 { margin-bottom: 0.75rem; }
.detail-section .section-count { color: var(--muted); font-weight: 500; }

/* ---------- reviews & access queues ---------- */

.queue-section + .queue-section { margin-top: 2rem; }
.queue { display: grid; gap: 1rem; margin-top: 1rem; }

.case-card { padding: 1.25rem; }
.case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.case-head h2, .case-head h3 { font-size: 1rem; overflow-wrap: anywhere; }
.case-subject { margin: 0.25rem 0 0.75rem; color: var(--ink-2); font-size: 0.92rem; max-width: 75ch; overflow-wrap: anywhere; }

.reason-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.reason-tags li {
  padding: 0.15rem 0.6rem;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: 999px;
  color: var(--warn);
  font-size: 0.78rem;
  font-weight: 600;
}

.correction-form {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 0;
  border-top: 1px solid var(--surface-2);
}
.correction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.correction-grid .field { display: grid; gap: 0.3rem; }
.correction-grid .field-wide { grid-column: span 2; }
.correction-grid .field-full { grid-column: 1 / -1; }
/* A grid item's automatic minimum size is its content's min-content width, and
   an <input> contributes its intrinsic `size` width (~180px) regardless of
   `max-width: 100%`. In the narrow right-hand review pane the four tracks are
   thinner than that, so without this the fields overflowed their own tracks and
   painted on top of each other. */
.correction-grid .field { min-width: 0; }
.correction-grid input,
.correction-grid textarea { width: 100%; min-width: 0; }
/* The winners row lives in that same narrow pane, so give it tracks that fit
   the control rather than a fixed four-column split: name takes a full row,
   then AFM and the amount share one and stack when the pane gets tight. */
.winner-fieldset .correction-grid {
  /* Two equal halves, not auto-fit: with auto-fit the AFM and amount fields
     landed in two of three fitted tracks, leaving a ragged gap beside them.
     align-items: start stops the AFM field's hint from stretching its
     neighbour to match. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 640px) {
  .winner-fieldset .correction-grid { grid-template-columns: minmax(0, 1fr); }
}
.winner-fieldset .correction-grid .field-wide { grid-column: 1 / -1; }
.field-hint { overflow-wrap: anywhere; }
.correction-form textarea { min-height: 4.25rem; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}
/* A submit button and a .page-btn link sit side by side here (the sign-out
   confirmation). They carry different min-heights, so without this the pair
   is a couple of pixels out of line. */
.form-actions .page-btn { min-height: 38px; }

.decision-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-2);
}
.decision-form .field { display: grid; gap: 0.3rem; flex: 1 1 260px; }
.decision-form input[name="note"] { width: 100%; }

/* ---------- single-case review detail ---------- */

.review-nav { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.case-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.case-meta .reason-tags { margin: 0; }

.review-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.review-pdf-pane, .review-form-pane { min-width: 0; }
.review-pdf-pane h2, .review-form-pane h2 { margin: 0 0 0.75rem; font-size: 1rem; }
.review-form-pane h3 { margin: 1.1rem 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.review-form-pane h3:first-of-type { margin-top: 0; }
.review-pdf-frame {
  width: 100%;
  height: 78vh;
  max-height: 78vh;
  border: 1px solid var(--surface-2);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.winner-fieldset {
  border: 1px solid var(--surface-2);
  border-radius: var(--r-sm);
  padding: 0.75rem 0.85rem 0.4rem;
  margin: 0 0 0.75rem;
}
.winner-fieldset legend { padding: 0 0.4rem; font-size: 0.8rem; color: var(--muted); }
.winner-fieldset-new { border-style: dashed; }
.winner-add-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: -0.25rem 0 0.9rem;
}
.winner-row-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0.35rem 0 0.15rem;
}
.field-hint { color: var(--muted); font-size: 0.75rem; }
.required-mark { color: var(--danger); }

@media (max-width: 960px) {
  .review-split { grid-template-columns: 1fr; }
  .review-pdf-frame { height: 60vh; }
}

/* ---------- 24h listed-winners widget ---------- */

.recent-listed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.recent-listed-card { padding: 1.1rem; display: grid; gap: 0.6rem; align-content: start; }
.recent-listed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.expandable-field summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.expandable-field summary::-webkit-details-marker { color: var(--muted); }
.expandable-field p, .expandable-field ul { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.expandable-field ul { padding-left: 1.1rem; }
.expandable-field + .expandable-field { margin-top: 0.1rem; }

.grant-actions { display: flex; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--surface-2); }

.request-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.5rem 0 0.9rem; color: var(--muted); font-size: 0.8rem; }
.request-note {
  margin: 0.75rem 0;
  padding: 0.6rem 0.9rem;
  background: var(--surface-2);
  border-left: 3px solid var(--line-2);
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

/* ---------- empty states ---------- */

.empty-state {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 2.25rem 1rem;
  text-align: center;
  color: var(--muted);
}
.empty-state svg { width: 30px; height: 30px; color: var(--line-2); }
.empty-state strong { color: var(--ink-2); font-size: 0.95rem; }
.empty-state span { font-size: 0.85rem; }
li.empty-state { padding: 1.5rem 0; }

/* ---------- narrow public / auth pages ---------- */

.narrow {
  max-width: 460px;
  margin: 1.5rem auto;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.narrow h1 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.narrow > p { color: var(--ink-2); font-size: 0.92rem; }
.narrow form { margin-top: 1.25rem; }
.narrow button[type="submit"], .narrow form > button { width: 100%; margin-top: 0.5rem; }
.narrow .cf-turnstile { margin: 0.75rem 0; }

.auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.9rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.auth-icon svg { width: 22px; height: 22px; }
.auth-icon.ok { background: var(--ok-soft); color: var(--ok); }

/* two-factor package pages inherit the shell; keep their headings calm */
body.public main.container h1 { font-size: 1.25rem; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid, .dashboard-grid.halves { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside { order: -1; }
}

@media (max-width: 960px) {
  body.shell { grid-template-columns: minmax(0, 1fr); }

  /* A top bar with the navigation collapsed behind a button. The previous
     treatment kept every link visible in a horizontally scrolling strip,
     which on a phone meant swiping a nav to reach the page you wanted and
     no room for the labels. */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-1);
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-height: 38px;
    min-width: 38px;
    padding: 0.3rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-2);
  }
  .nav-toggle:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }

  .side-nav, .sidebar-foot { display: none; width: 100%; }
  body.nav-open .side-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; margin-top: 0.25rem; }
  body.nav-open .sidebar-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
  }
  /* The panel has room for words, unlike the strip it replaces. */
  .side-nav a { min-height: 40px; }

  main.container { padding: 1.5rem 1rem 3rem; }
  .page-heading { flex-direction: column; align-items: stretch; }
  .period-picker, .export-actions { justify-items: start; }
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .kpi { min-height: 0; }
  .fin-grid { grid-template-columns: 1fr; }
  .fin-item { border-left: 0; border-top: 1px solid var(--surface-2); }
  .fin-item:first-child { border-top: 0; }
  .run-strip { flex-wrap: wrap; }
  .run-strip-link { margin-left: 0; width: 100%; }
  .filters .field, .filters .field-search { flex: 1 1 100%; }
  .filter-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .filter-actions button { flex: 1; }
  .pagination { flex-direction: column; align-items: stretch; text-align: center; }
  .page-controls { justify-content: space-between; }
  .correction-grid { grid-template-columns: 1fr; }
  .correction-grid .field-wide,
  .correction-grid .field-full { grid-column: auto; }
  .form-actions { justify-content: stretch; }
  .form-actions button { width: 100%; }
  .decision-form { align-items: stretch; flex-direction: column; }
  .decision-form .field { flex: 0 0 auto; }
  .narrow { padding: 1.5rem 1.25rem; margin-top: 0.5rem; }
  .segmented { width: 100%; }
  .segmented a { flex: 1; justify-content: center; }
  .entity-card { flex-direction: column; }
  .entity-title .entity-amount { margin-left: 0; }
  .facts > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .review-pdf-frame { height: 60vh; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Language switcher on the public page, which has no sidebar to host it. */
.public-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.public-lang { margin: 0; }

/* The public pages carry the same theme and language controls as the shell. */
.public-controls { display: flex; align-items: center; gap: 0.5rem; }
.public-controls .theme-toggle { min-height: 36px; padding: 0.3rem 0.6rem; }
.public-controls .theme-toggle .nav-icon,
.public-lang .nav-icon { width: 17px; height: 17px; }
/* Same shape as the sidebar controls: icon, then label. */
.public-lang .page-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; }

/* --- ΚΗΜΔΗΣ registry pages ------------------------------------------------ */
/* Charts are server-rendered SVG: the CSP is script-src 'self' with no CDN
   reachable, so a charting library would have to be vendored and would still
   put the layout somewhere untestable. Colour lives here, geometry in
   charts.py, so both stay themeable and both stay tested. */
.stage { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
         padding: .12em .45em; border-radius: 3px; white-space: nowrap; }
.stage-award    { background: var(--accent-soft, #e7eff5); color: var(--accent, #0c6b74); }
.stage-contract { background: #e8eee6; color: #3f6b3d; }
.stage-payment  { background: #f1ecdf; color: #7a5c17; }
@media (prefers-color-scheme: dark) {
  .stage-contract { background: #1b2a1a; color: #8fc08c; }
  .stage-payment  { background: #2a2416; color: #d3b268; }
}

tr.is-fresh td { background: var(--accent-soft, #eef5f6); }
tr.is-muted td { opacity: .55; }
.badge-new { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
             background: var(--accent, #0c6b74); color: #fff;
             padding: .05em .35em; border-radius: 3px; margin-left: .35em; }


.stat-row { display: grid; gap: 1rem; margin: 1.2rem 0;
            grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat { border: 1px solid var(--rule, #d8dad6); border-radius: 8px; padding: .9rem 1rem; }
.stat-accent { border-color: var(--accent, #0c6b74); }
.stat-label { display: block; font-size: .74rem; text-transform: uppercase;
              letter-spacing: .08em; opacity: .7; }
.stat-value { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums;
              margin-top: .25rem; }
.stat-sub { display: block; font-size: .76rem; opacity: .6; margin-top: .2rem; }

.chart-scroll { overflow-x: auto; }
.chart, .network { max-width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--rule, #e2e4e0); stroke-width: 1; }
.chart .zero { stroke: var(--rule-strong, #b9bdb7); stroke-width: 1.2; }
.chart .axis { font-size: 10px; fill: currentColor; opacity: .65; }
.chart .axis-count { opacity: .5; }
.chart .bar-award    { fill: #0c6b74; }
.chart .bar-contract { fill: #4f8f52; }
.chart .bar-payment  { fill: #c08a2e; }
.chart .bar-negative { opacity: .55; }
.chart .count-line { fill: none; stroke: #8a5cc4; stroke-width: 1.6;
                     stroke-dasharray: 3 2; }
.chart .count-dot  { fill: #8a5cc4; }

.legend-inline { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none;
                 padding: 0; margin: .6rem 0 0; font-size: .8rem; }
.legend-inline .sw { display: inline-block; width: .75rem; height: .75rem;
                     border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.sw-award { background: #0c6b74; } .sw-contract { background: #4f8f52; }
.sw-payment { background: #c08a2e; } .sw-count { background: #8a5cc4; }

.network .edge { stroke: var(--rule-strong, #b9bdb7); opacity: .5; }
.network .edge-partner { stroke: #8a5cc4; opacity: .7; }
.network .edge-others  { stroke-dasharray: 4 3; opacity: .45; }
.network .node text { font-size: 8.2px; fill: currentColor; opacity: .82; }
.network .node-company circle  { fill: #0c6b74; }
.network .node-company text    { font-weight: 600; opacity: 1; }
.network .node-authority circle { fill: #6f9fb5; }
.network .node-partner circle   { fill: #8a5cc4; }
.network .node-others circle    { fill: none; stroke: var(--rule-strong, #b9bdb7);
                                  stroke-dasharray: 3 2; stroke-width: 1.4; }

.case-grid { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .case-grid { grid-template-columns: 1fr 1.1fr; } }
.doc-frame { width: 100%; height: 34rem; border: 1px solid var(--rule, #d8dad6);
             border-radius: 6px; background: #fff; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: 0; }
.facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }
.facts dd { margin: 0; }
.parties { list-style: none; padding: 0; margin: .3rem 0 0; }
.parties li { padding: .18rem 0; }
.notice { border-left: 3px solid var(--accent, #0c6b74); padding: .8rem 1rem;
          border-radius: 0 6px 6px 0; margin: 1rem 0; font-size: .9rem; }
.notice-warn { border-left-color: #c08a2e; }
.case-title { font-size: 1.4rem; line-height: 1.25; }

/* Interactive network. The static SVG keeps its own rules above; these only
   apply once network-graph.js has swapped in the live one. */
.network-live { touch-action: none; cursor: grab; }
.network-live .node { cursor: grab; }
.network-live .node.is-dragging { cursor: grabbing; }
.network-live .node circle { transition: r 120ms ease, filter 120ms ease; }
.network-live .node:hover circle,
.network-live .node:focus-visible circle { filter: brightness(1.15); }
.network-live .node:focus-visible { outline: none; }
.network-live .node:focus-visible circle {
  stroke: var(--accent, #0c6b74); stroke-width: 2.5;
}
.network-live .node:hover text { opacity: 1; font-weight: 600; }
.network-live .edge { transition: opacity 120ms ease; }
.graph-hint { font-size: .82rem; margin-top: .5rem; }
@media (prefers-reduced-motion: reduce) {
  .network-live .node circle, .network-live .edge { transition: none; }
}

/* Subsidiary provenance. A row under a listed parent may have been signed by
   a controlled subsidiary; unlabelled it would credit the parent with a
   contract it never signed. */
.badge-sub {
  display: inline-block; margin-left: .4rem; font-size: .68rem;
  padding: .08em .4em; border-radius: 3px; vertical-align: 1px;
  background: var(--signal-soft, #eef2f7); color: var(--muted, #5f6872);
  border: 1px solid var(--rule, #d8dad6); white-space: nowrap;
}
.network .node-subsidiary circle { fill: #6f9fb5; }
.network .node-subsidiary-idle circle {
  fill: none; stroke: var(--rule-strong, #b9bdb7); stroke-width: 1.4;
}
.network .node-subsidiary-idle text { opacity: .5; }
.network .edge-owns { stroke: var(--rule-strong, #9aa3ad); opacity: .65; }
.network .edge-owns-idle { stroke-dasharray: 3 3; opacity: .35; }
.sw-parent { background: #0c6b74; }
.sw-sub { background: #6f9fb5; }
.sw-sub-idle { background: transparent; border: 1px solid #b9bdb7; }



.scope-note { border-left: 3px solid var(--accent, #0c6b74);
              padding: .35rem .7rem; margin: .8rem 0; }

/* Subjects and authority names are shown in full and wrap. Truncating them
   removed the part that identifies the contract; a max-width keeps the column
   from swallowing the table instead. */
td.subject { max-width: 34rem; }
.data td { overflow-wrap: anywhere; }
.data td.nowrap, .data td.num { overflow-wrap: normal; }

/* Registry filter toolbars reuse the shared components (.filters-panel,
   .field, .check-field, .filter-actions) rather than defining a parallel set.
   Only what is genuinely new lives here. */
.check-field .count { font-variant-numeric: tabular-nums; color: var(--muted);
                      font-size: 0.78rem; }
.check-field input[type="checkbox"] { margin: 0; }
.filters .field-narrow { flex: 0 0 8rem; }
.year-picker { display: flex; align-items: end; gap: 0.5rem; margin-left: auto; }

/* Segmented control: one mutually-exclusive choice presented as one object,
   so the active option is legible and the pair reads as a single switch
   rather than as two unrelated buttons. */
.segmented {
  display: inline-flex;
  align-self: end;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}
.segmented a {
  padding: 0.4rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--ink-2);
  background: transparent;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.segmented a + a { border-left: 1px solid var(--line-2); }
.segmented a:hover { background: var(--accent-wash); color: var(--accent-deep); }
.segmented a.is-active {
  background: var(--accent); color: var(--bg); cursor: default;
}
.segmented a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.back-link { margin: 0 0 0.6rem; font-size: 0.84rem; }
.back-link a { display: inline-flex; align-items: center; gap: 0.35rem;
               color: var(--muted); text-decoration: none; }
.back-link a:hover { color: var(--accent-deep); }

/* Frame for the ownership graph.
   A graph sitting flush on the card background reads as a stray drawing; a
   frame makes it an object on the page, and the inset ground separates the
   diagram from the prose above and below it. Built from the existing tokens
   so it inherits both themes rather than needing a second definition. */
.graph-frame {
  position: relative;
  margin: 0.25rem 0 0.75rem;
  padding: 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 90% at 50% 0%,
                    var(--accent-wash) 0%, transparent 62%),
    var(--surface-2);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
/* A hairline highlight along the top edge, so the frame reads as inset
   rather than as a flat rectangle drawn over the card. */
.graph-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.graph-frame .chart-scroll { border-radius: calc(var(--r-md) - 5px); }
.graph-frame .network { display: block; margin: 0 auto; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .graph-frame {
    box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  :root:not([data-theme="light"]) .graph-frame::before {
    border-color: rgba(255, 255, 255, 0.06);
  }
}
:root[data-theme="dark"] .graph-frame {
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
:root[data-theme="dark"] .graph-frame::before {
  border-color: rgba(255, 255, 255, 0.06);
}