/* Human4Future — colour tokens from docs/color_schema.md §6 (light theme). */
:root {
  /* purple */
  --purple-50:#F6F1FB; --purple-100:#ECE1F6; --purple-200:#DBC7ED;
  --purple-300:#C2A1E0; --purple-400:#A675D1; --purple-500:#8E4FC7;
  --purple-600:#782CBC; --purple-700:#5E2294; --purple-800:#4C1A7A;
  --purple-900:#3C1464; --purple-950:#290C43;

  /* amber */
  --amber-50:#FEF7E9; --amber-100:#FDECCC; --amber-200:#FDDEA5;
  --amber-300:#FDD07C; --amber-400:#FFC65C; --amber-500:#F9BC4B;
  --amber-600:#EDA41D; --amber-700:#BC8215; --amber-800:#8F6414;
  --amber-900:#6F4F14; --amber-950:#48340F;

  /* neutral */
  --neutral-0:#FFFFFF; --neutral-50:#F9F8F9; --neutral-100:#F4F2F5;
  --neutral-200:#E8E6EA; --neutral-300:#D6D2DA; --neutral-400:#AEA7B4;
  --neutral-500:#8B8294; --neutral-600:#716779; --neutral-700:#57505E;
  --neutral-800:#413C46; --neutral-900:#2E2A32; --neutral-950:#1C1A1E;

  /* status */
  --success-100:#DCF2E6; --success-500:#2A9D63; --success-600:#1E7B4D; --success-700:#155F3B;
  --warning-100:#FDEBD3; --warning-500:#E07B18; --warning-600:#B45309; --warning-700:#8A3D06;
  --danger-100:#FBE3E3;  --danger-500:#E03B3B;  --danger-600:#C62828;  --danger-700:#9B1C1C;
  --info-100:#DDEEF9;    --info-500:#2C8ED6;    --info-600:#1F6FB2;    --info-700:#17548A;

  /* semantic — light */
  --color-bg:var(--neutral-0);
  --color-bg-subtle:var(--neutral-50);
  --color-surface:var(--neutral-0);
  --color-surface-sunken:var(--neutral-100);
  --color-surface-brand:var(--purple-900);
  --color-surface-brand-alt:var(--purple-700);
  --color-text:var(--neutral-800);
  --color-text-strong:var(--neutral-950);
  --color-text-muted:var(--neutral-600);
  --color-text-disabled:var(--neutral-400);
  --color-text-on-brand:#FFFFFF;
  --color-text-on-accent:var(--neutral-950);
  --color-link:var(--purple-700);
  --color-link-hover:var(--purple-800);
  --color-link-underline:var(--amber-400);
  --color-accent:var(--amber-400);
  --color-accent-hover:var(--amber-500);
  --color-accent-subtle:var(--amber-100);
  --color-border:var(--neutral-200);
  --color-border-strong:var(--neutral-500);
  --color-border-brand:var(--purple-700);
  --color-focus-ring:var(--purple-600);
  --color-selection-bg:var(--amber-400);
  --color-selection-text:var(--purple-900);
  --color-overlay:rgba(60,20,100,0.8);

  --shadow-sm:0 1px 2px rgba(0,0,0,0.03);
  --shadow-md:0 4px 12px rgba(0,0,0,0.15);
  --shadow-card:0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(60,20,100,0.05);
  --gradient-brand:linear-gradient(0deg,#3C1464 0%,#5E2294 100%);
  --gradient-brand-bar:linear-gradient(100deg,var(--purple-900) 0%,var(--purple-700) 100%);

  --topbar-height:56px;
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--color-bg-subtle); color:var(--color-text);
  font:15px/1.55 "Instrument Sans", system-ui, sans-serif;
}
::selection { background:var(--color-selection-bg); color:var(--color-selection-text); }
:focus-visible { outline:2px solid var(--color-focus-ring); outline-offset:2px; }
h1, h2, h3 { font-family:Outfit, system-ui, sans-serif; color:var(--color-text-strong); }
a { color:var(--color-link); text-decoration-color:var(--color-link-underline); text-underline-offset:3px; }
a:hover { color:var(--color-link-hover); }
pre { white-space:pre-wrap; background:var(--color-surface-sunken); padding:8px 10px; border-radius:4px; font-size:13px; }

/* top bar: brand gradient, logo, main nav (amber underline marks the current section), quiet user group */
.topbar {
  position:sticky; top:0; z-index:10; height:var(--topbar-height);
  display:flex; align-items:center; gap:8px 28px; padding:0 24px;
  background:var(--gradient-brand-bar); color:var(--color-text-on-brand); box-shadow:var(--shadow-md);
}
.topbar-brand {
  display:flex; align-items:center; gap:12px; flex:none;
  color:var(--color-text-on-brand); font:600 17px Outfit, system-ui, sans-serif; text-decoration:none;
}
.topbar-brand:hover { color:var(--color-text-on-brand); }
.topbar-nav { display:flex; align-self:stretch; gap:4px; }
.topbar-nav-link {
  position:relative; display:flex; align-items:center; padding:0 12px;
  color:var(--purple-100); font-size:15px; font-weight:500; text-decoration:none;
}
.topbar-nav-link:hover { color:var(--color-text-on-brand); background:var(--purple-800); }
.topbar-nav-link[aria-current="page"] { color:var(--color-text-on-brand); font-weight:600; }
.topbar-nav-link[aria-current="page"]::after {
  content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--color-accent);
}
.topbar-nav-link:focus-visible, .topbar-link:focus-visible, .btn-on-brand:focus-visible { outline-color:var(--color-accent); }
.topbar-user { display:flex; align-items:center; gap:16px; margin-left:auto; font-size:14px; }
.topbar-user form { margin:0; }
.topbar-name { color:var(--purple-100); }
.topbar-link { color:var(--color-text-on-brand); font-size:14px; text-decoration:none; }
.topbar-link:hover, .topbar-link[aria-current="page"] {
  color:var(--color-text-on-brand); text-decoration:underline; text-decoration-color:var(--color-accent);
}
@media (max-width:640px) {
  :root { --topbar-height:100px; }
  .topbar { flex-wrap:wrap; padding:0 16px; row-gap:0; }
  .topbar-brand { height:56px; }
  .topbar-nav { order:3; width:100%; height:44px; margin:0 -12px; border-top:1px solid var(--purple-700); }
  .topbar-name { display:none; }
  .topbar-user { gap:12px; }
}

/* Human4Future logo (inline SVG; the wordmark uses currentColor) */
.logo-mark { display:block; width:auto; }
.logo-topbar { height:32px; }
.logo-login { height:64px; }

/* login screen: brand gradient, one centred card, no top bar */
.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.login-page { min-height:100vh; background:var(--gradient-brand); }
.login-shell {
  flex:1 0 auto; box-sizing:border-box; padding:48px 16px 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
}
.login-card {
  width:100%; max-width:400px; box-sizing:border-box; padding:36px 32px 32px;
  background:var(--color-surface); border-radius:12px; box-shadow:var(--shadow-md);
}
.login-logo { display:flex; justify-content:center; color:var(--color-text-strong); }
.login-subtitle { margin:14px 0 20px; text-align:center; color:var(--color-text-muted); font-size:14px; }
.login-form label:first-of-type { margin-top:0; }
.login-form .btn-block { display:block; width:100%; margin-top:24px; padding-top:10px; padding-bottom:10px; }

/* demo deployment badge: top bar and login card only (H4F_DEPLOYMENT=demo) */
.demo-badge {
  display:inline-block; flex:none; padding:2px 10px; border-radius:999px; white-space:nowrap;
  background:var(--color-accent-subtle); color:var(--amber-900); border:1px solid var(--color-accent);
  font-size:12px; font-weight:600; line-height:18px;
}
.topbar .demo-badge { background:var(--color-accent); color:var(--color-text-on-accent); border-color:transparent; }
.login-demo { margin:12px 0 0; text-align:center; }
.login-demo-note { margin:6px 0 0; text-align:center; color:var(--color-text-muted); font-size:13px; }

/* page shells */
.page { max-width:1120px; margin:0 auto; padding:32px 24px 72px; }
.page-medium { max-width:980px; }
.page-form { max-width:600px; }
.page-wide { max-width:1280px; }
.card {
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px;
  padding:20px 24px; margin:16px 0; box-shadow:var(--shadow-card);
}
.muted { color:var(--color-text-muted); font-size:14px; }

/* page header: quiet breadcrumb, h1 + muted subtitle, the page's single primary action on the right */
.page-header { margin:0 0 24px; }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 6px; font-size:13px; }
.breadcrumb a { color:var(--color-text-muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--color-link); text-decoration:underline; text-decoration-color:var(--color-link-underline); }
.breadcrumb-sep { color:var(--color-text-disabled); }
.page-header-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; }
.page-header-text { min-width:0; }
.page-header h1 { margin:0; font-size:28px; line-height:1.2; font-weight:600; overflow-wrap:anywhere; }
.page-subtitle { margin:6px 0 0; color:var(--color-text-muted); font-size:15px; }
.page-header-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.title-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }

/* buttons: amber is reserved for the one primary action per view */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:inherit; font-size:14px; font-weight:600; line-height:1.2; white-space:nowrap;
  padding:8px 14px; border-radius:8px; border:1px solid var(--neutral-300);
  background:var(--color-surface); color:var(--color-link); cursor:pointer; text-decoration:none;
}
.btn:hover { background:var(--purple-50); color:var(--color-link-hover); }
.btn-primary { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-text-on-accent); }
.btn-primary:hover { background:var(--color-accent-hover); border-color:var(--color-accent-hover); color:var(--color-text-on-accent); }
.btn-secondary { background:var(--purple-700); border-color:var(--purple-700); color:var(--color-text-on-brand); }
.btn-secondary:hover { background:var(--purple-800); border-color:var(--purple-800); color:var(--color-text-on-brand); }
.btn-danger { background:var(--danger-600); border-color:var(--danger-600); color:#FFFFFF; }
.btn-danger:hover { background:var(--danger-700); border-color:var(--danger-700); color:#FFFFFF; }
.btn-ghost { background:transparent; border-color:transparent; color:var(--color-link); padding-left:10px; padding-right:10px; }
.btn-ghost:hover { background:var(--purple-50); border-color:transparent; }
.btn-ghost-danger { color:var(--danger-600); }
.btn-ghost-danger:hover { background:var(--danger-100); color:var(--danger-700); }
.btn-on-brand { background:transparent; color:var(--color-text-on-brand); border-color:var(--purple-400); padding:6px 12px; }
.btn-on-brand:hover { background:var(--purple-800); color:var(--color-text-on-brand); }
.btn:disabled, .btn[aria-disabled="true"] {
  background:var(--neutral-100); border-color:transparent; color:var(--color-text-disabled); cursor:not-allowed;
}

/* forms: login-style card, consistent width, hints, Anuluj + primary on the right */
.form label { display:block; font-weight:600; font-size:14px; margin:18px 0 6px; color:var(--color-text-strong); }
.form label:first-of-type { margin-top:0; }
.form input, .form textarea, .form select {
  width:100%; font:inherit; border:1px solid var(--color-border-strong); border-radius:8px;
  padding:9px 12px; background:var(--color-surface); color:var(--color-text);
}
.form input:focus, .form textarea:focus, .form select:focus { outline:2px solid var(--color-focus-ring); outline-offset:1px; }
.form-card { padding:28px 32px; box-shadow:var(--shadow-md); border-color:transparent; }
.form-card-inline { margin-top:24px; }
.form-lead { margin:0 0 16px; }
.field-hint { margin:6px 0 0; font-size:13px; color:var(--color-text-muted); }
.field-error { color:var(--danger-600); font-size:14px; margin:6px 0 0; }
.form .checkbox-row { display:flex; align-items:center; gap:8px; margin-top:22px; font-weight:600; }
.form .checkbox-row input { width:auto; margin:0; accent-color:var(--color-focus-ring); }
.form-actions {
  display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--color-border);
}
.form-card .banner:first-child { margin-top:0; }
.summary { margin:0 0 20px; padding:14px 16px; background:var(--color-bg-subtle); border-radius:8px; display:grid; gap:8px; }
.summary div { display:flex; flex-wrap:wrap; gap:4px 12px; }
.summary dt { width:140px; color:var(--color-text-muted); font-size:14px; }
.summary dd { margin:0; }

/* banners: colour is never the only carrier — each banner also says what it is */
.banner { border-radius:8px; padding:12px 16px; margin:12px 0; border:1px solid transparent; }
.banner-error { background:var(--danger-100); color:var(--danger-700); border-color:var(--danger-600); }
.banner-ok { background:var(--success-100); color:var(--success-700); border-color:var(--success-600); }
.banner-info { background:var(--info-100); color:var(--info-700); border-color:var(--info-600); }
.banner-warning { background:var(--warning-100); color:var(--warning-700); border-color:var(--warning-600); }

/* panels (dashboard groups, lists): white card, title + count badge */
.panel {
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px;
  box-shadow:var(--shadow-card); margin:0 0 24px; overflow:hidden;
}
.panel-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:16px 20px; border-bottom:1px solid var(--color-border); }
.panel-head h2 { margin:0; font-size:18px; font-weight:600; }
.panel-meta { margin-left:auto; font-size:13px; color:var(--color-text-muted); }
.panel-banner { margin:12px 20px; }
.count-badge {
  display:inline-block; min-width:24px; padding:1px 8px; border-radius:999px; text-align:center;
  font-size:12px; font-weight:600; background:var(--purple-50); color:var(--purple-700);
}
.empty-state { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:20px; }
.empty { margin:0; color:var(--color-text-muted); }
.empty-hint { font-size:13px; color:var(--color-text-muted); }

/* tables: small uppercase muted headers, row hover, right-aligned actions */
.table-wrap { overflow-x:auto; }
.rows { width:100%; border-collapse:collapse; background:var(--color-surface); }
.rows th {
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-text-muted); padding:10px 16px; white-space:nowrap; border-bottom:1px solid var(--color-border);
}
.rows td { padding:12px 16px; border-top:1px solid var(--color-border); vertical-align:middle; }
.rows tbody tr:first-child td { border-top:0; }
.rows tbody tr:hover { background:var(--color-bg-subtle); }
.rows th:first-child, .rows td:first-child { padding-left:20px; }
.rows th:last-child, .rows td:last-child { padding-right:20px; }
.rows .col-actions { text-align:right; }
.cell-strong { font-weight:600; color:var(--color-text-strong); }
.cell-num { font-variant-numeric:tabular-nums; white-space:nowrap; }
.cell-muted { color:var(--color-text-muted); font-size:14px; white-space:nowrap; }
.actions { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.col-actions .actions { justify-content:flex-end; }
.rows td.cell-strong { min-width:150px; }
.cell-sub { display:block; font-weight:400; font-size:13px; color:var(--color-text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cell-owner { min-width:120px; }
.col-actions .actions { flex-wrap:nowrap; }
form.inline { display:inline; margin:0; }

/* progress: thin bar + "x / 125" */
.rows td.progress { white-space:nowrap; }
.progress-cell { display:flex; align-items:center; gap:10px; min-width:140px; }
.meter {
  -webkit-appearance:none; appearance:none; width:96px; height:6px; border:0; border-radius:3px;
  background:var(--neutral-200); overflow:hidden;
}
.meter::-webkit-progress-bar { background:var(--neutral-200); border-radius:3px; }
.meter::-webkit-progress-value { background:var(--purple-600); border-radius:3px; }
.meter::-moz-progress-bar { background:var(--purple-600); border-radius:3px; }
.meter-text { font-size:13px; color:var(--color-text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* status pills: tinted, never colour alone (the label says the state) */
.status {
  display:inline-block; font-size:12px; font-weight:600; line-height:1.4; padding:2px 10px; border-radius:999px;
  background:var(--purple-50); color:var(--purple-700); white-space:nowrap;
}
.status-draft { background:var(--purple-50); color:var(--purple-700); }
.status-completed { background:var(--info-100); color:var(--info-700); }
.status-report_queued { background:var(--warning-100); color:var(--warning-700); }
.status-report_ready { background:var(--success-100); color:var(--success-700); }
.status-report_failed { background:var(--danger-100); color:var(--danger-700); }
.job-note { margin:6px 0 0; font-size:13px; color:var(--color-text-muted); }
.job-failed { color:var(--danger-600); }
.error-tail { max-height:8em; overflow:auto; margin:6px 0 0; }

/* message pages: centred card with an icon, the message and a clear way back */
.message-shell { max-width:560px; padding-top:56px; }
.message-card {
  background:var(--color-surface); border-radius:12px; box-shadow:var(--shadow-md);
  padding:36px 32px 32px; text-align:center;
}
.message-card h1 { margin:16px 0 8px; font-size:24px; font-weight:600; }
.message-icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; }
.message-icon-error { background:var(--danger-100); color:var(--danger-700); }
.message-icon-warning { background:var(--warning-100); color:var(--warning-700); }
.message-icon-info { background:var(--purple-50); color:var(--purple-700); }
.message-text { margin:0 auto; max-width:420px; color:var(--color-text-muted); }
.message-links {
  margin:20px 0 0; padding:8px 0; list-style:none; text-align:left; max-height:320px; overflow:auto;
  border:1px solid var(--color-border); border-radius:8px; font-size:14px;
}
.message-links li a { display:block; padding:6px 14px; text-decoration:none; }
.message-links li a:hover { background:var(--purple-50); }
.message-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:24px; }

/* survey page: content tree + one scrolling page (layout of the survey preview) */
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-height) + 16px); }
.survey-layout { display:flex; }
.tree {
  position:sticky; top:var(--topbar-height); height:calc(100vh - var(--topbar-height)); overflow:auto;
  width:300px; flex:none; padding:20px 12px 96px; background:var(--color-surface); border-right:1px solid var(--color-border);
}
.tree a {
  display:block; padding:6px 12px; margin:1px 0; color:var(--color-text); text-decoration:none; font-size:14px;
  border-radius:6px; border-left:3px solid transparent;
}
.tree a:hover { background:var(--color-bg-subtle); }
.tree a.active { background:var(--purple-50); color:var(--purple-700); border-left-color:var(--color-accent); font-weight:600; }
.tree-sec { font-weight:600; color:var(--purple-900); margin-top:12px !important; }
.tree a.tree-fld { padding-left:24px; color:var(--color-text-muted); }
.tree a.tree-fld.active { color:var(--purple-700); }
.gap-count { display:inline-block; font-size:11px; font-weight:600; padding:0 7px; border-radius:999px;
  background:var(--warning-100); color:var(--warning-700); }
.gap-count.is-complete { background:var(--success-100); color:var(--success-700); }
.survey-main { flex:1; min-width:0; max-width:920px; padding:28px 40px 30vh; }
.survey-head { padding-bottom:20px; border-bottom:1px solid var(--color-border); }
.survey-progress { display:flex; align-items:center; gap:12px; margin-top:16px; }
.survey-progress .meter { width:220px; max-width:50%; }
.survey-title { font-size:21px; font-weight:600; margin:28px 0 4px; }
.survey-section > h2 { font-size:21px; font-weight:600; margin:48px 0 6px; }
.survey-section > h2::before {
  content:""; display:block; width:40px; height:4px; margin-bottom:12px; border-radius:2px; background:var(--color-accent);
}
.field h3, #header h3 { font-size:17px; margin:0 0 4px; }
.key { font:12px ui-monospace, monospace; color:var(--purple-700); background:var(--purple-50); padding:1px 6px; border-radius:4px; }
details.hint { margin:6px 0; font-size:14px; }
details.hint summary, .instructions summary { cursor:pointer; color:var(--color-link); font-weight:600; }
details.hint div { background:var(--color-accent-subtle); border-radius:6px; padding:10px 12px; margin-top:6px; }
details.hint div p { margin:0 0 4px; }
.answer label { display:block; font-weight:600; margin:16px 0 6px; color:var(--color-text-strong); }
.answer:has(textarea:placeholder-shown) label::after { content:" · brak odpowiedzi"; font-weight:400; font-size:13px; color:var(--warning-700); }
.example { font-size:13px; color:var(--color-text-muted); font-style:italic; margin:2px 0 4px; }
.positions-section .example { white-space:pre-line; }  /* the example list keeps one position per line */
.answer textarea {
  width:100%; font:inherit; border:1px solid var(--color-border-strong); border-radius:8px; padding:9px 12px;
  background:var(--color-surface); color:var(--color-text); resize:vertical; min-height:2.6em;
}
.answer textarea:focus { outline:2px solid var(--color-focus-ring); outline-offset:1px; }
.answer textarea:not(:placeholder-shown) { border-color:var(--purple-400); background:var(--purple-50); }
.answer textarea[readonly] { background:var(--color-surface-sunken); border-color:var(--color-border); }
.conflict { background:var(--danger-100); color:var(--danger-700); border:1px solid var(--danger-600); border-radius:8px; padding:10px 12px; margin-top:6px; }
.conflict .btn { margin-right:6px; background:var(--color-surface); }
.survey-footer {
  position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 12px;
  padding:12px 40px 12px 340px; background:var(--color-surface); border-top:1px solid var(--color-border); box-shadow:var(--shadow-md);
}  /* full width (covers under the tree); left padding = tree width + content gutter */
.save-status { margin-right:auto; font-size:14px; color:var(--color-text-muted); }
.save-status.is-ok { color:var(--success-700); }
.save-status.is-error { color:var(--danger-700); font-weight:600; }
.status-banner p { margin:0 0 8px; }
.status-banner .actions { margin-top:8px; }
@media (max-width:860px) {
  .survey-layout { display:block; }
  .tree { position:static; width:auto; height:auto; max-height:40vh; padding:12px 12px 16px; border-right:0; border-bottom:1px solid var(--color-border); }
  .survey-main { padding:24px 16px 30vh; }
  .survey-footer { padding:10px 16px; }
}

/* reports */
.note { font-size:13px; color:var(--color-text-muted); }
.coded { margin:20px 0 0; padding-top:14px; border-top:1px dashed var(--color-border); font-size:14px; }
.coded code { white-space:pre-wrap; background:var(--success-100); color:var(--success-700); padding:1px 6px; border-radius:4px; }
.contexts pre { max-height:24em; overflow:auto; }

/* admin panel: sub-nav as tabs with the same amber indicator as the top bar */
.admin-nav { display:flex; gap:4px; margin:-8px 0 24px; border-bottom:1px solid var(--color-border); font-size:14px; }
.admin-nav-link { position:relative; padding:10px 12px; color:var(--color-text-muted); font-weight:500; text-decoration:none; }
.admin-nav-link:hover { color:var(--color-link); }
.admin-nav-link[aria-current="page"] { color:var(--color-text-strong); font-weight:600; }
.admin-nav-link[aria-current="page"]::after {
  content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--color-accent);
}
.rows tr.is-inactive td { color:var(--color-text-muted); }
.badge-inactive, .badge-active { display:inline-block; font-size:12px; font-weight:600; padding:2px 10px; border-radius:999px; white-space:nowrap; }
.badge-inactive { background:var(--neutral-200); color:var(--neutral-700); }
.badge-active { background:var(--success-100); color:var(--success-700); }
.toolbar {
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; box-shadow:var(--shadow-card);
  padding:16px 20px; margin:0 0 20px;
}
.filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; }
.filters label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; color:var(--color-text-muted); }
.filters select, .filters input {
  font:inherit; font-size:14px; font-weight:400; border:1px solid var(--color-border-strong); border-radius:8px;
  padding:8px 12px; background:var(--color-surface); color:var(--color-text); max-width:100%;
}
.filter-search { flex:1; min-width:180px; }
.filter-actions { display:flex; gap:4px; margin-left:auto; }
.pager { display:flex; justify-content:center; gap:8px; margin-top:4px; }

@media (max-width:640px) {
  .page { padding:24px 16px 56px; }
  .page-header h1 { font-size:24px; }
  .form-card { padding:22px 18px; }
  .message-card { padding:28px 20px 24px; }
  .message-shell { padding-top:32px; }
  .filters label, .filter-actions { width:100%; }
  .filter-actions { margin-left:0; }
}


/* admin-only contexts.json popup (native <dialog>) */
.contexts-dialog {
  width:min(760px, calc(100vw - 32px)); max-height:min(80vh, 760px); padding:0; border:0; border-radius:12px;
  background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-md);
}
.contexts-dialog[open] { display:flex; flex-direction:column; }
.contexts-dialog::backdrop { background:var(--color-overlay); }
.contexts-dialog-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 24px 8px;
}
.contexts-dialog-head h2 { margin:2px 0 0; font-size:20px; }
.contexts-dialog-kicker { margin:0; color:var(--color-text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.contexts-close { font-size:16px; line-height:1; }
.contexts-tabs { display:flex; gap:4px; padding:0 24px; border-bottom:1px solid var(--color-border); }
.contexts-tab {
  font:inherit; font-size:14px; font-weight:600; padding:10px 12px; background:transparent; border:0;
  border-bottom:3px solid transparent; color:var(--color-text-muted); cursor:pointer;
}
.contexts-tab[aria-selected="true"] { color:var(--color-text-strong); border-bottom-color:var(--color-accent); }
.contexts-status { margin:0; padding:0 24px; font-size:14px; color:var(--color-text-muted); }
.contexts-status:empty { display:none; }
.contexts-status.is-error { color:var(--danger-600); padding-top:12px; }
.contexts-status.is-ok { color:var(--success-600); padding-top:12px; }
.contexts-panel { overflow:auto; padding:12px 24px; flex:1 1 auto; }
.contexts-table { width:100%; border-collapse:collapse; font-size:14px; }
.contexts-table th, .contexts-table td { text-align:left; vertical-align:top; padding:7px 8px; border-bottom:1px solid var(--color-border); }
.contexts-table td { white-space:pre-wrap; }  /* joined Q&A values keep their line breaks */
.contexts-key { width:24%; font:600 13px ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--color-link); white-space:nowrap; }
.contexts-group { background:var(--color-surface-sunken); color:var(--color-text-strong); }
.contexts-nested { margin:0; font-size:13px; }
.contexts-nested th, .contexts-nested td { border-bottom:0; padding:3px 6px; }
.contexts-list { margin:0; padding-left:18px; }
.contexts-empty { color:var(--color-text-disabled); }
.contexts-json { margin:0; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.contexts-positions { margin:0 0 12px; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space:pre-wrap; }
.contexts-positions:empty { display:none; }
.contexts-positions-status { margin:0 0 12px; font-size:14px; color:var(--color-text-muted); }
.contexts-positions-status:empty { display:none; }
.contexts-positions-status.is-error { color:var(--danger-600); }
.contexts-dialog-foot {
  display:flex; justify-content:flex-end; gap:8px; padding:12px 24px 18px; border-top:1px solid var(--color-border);
}

/* bottom bar — mirrors the top bar: same height, gradient and logo height; always at the bottom of the viewport or page */
body { min-height:100vh; display:flex; flex-direction:column; }
.footbar {
  margin-top:auto; min-height:var(--topbar-height); display:flex; align-items:center; justify-content:space-between;
  gap:8px 24px; flex-wrap:wrap; padding:8px 24px; background:var(--gradient-brand-bar); color:var(--color-text-on-brand);
}
.footbar-copy { margin:0; font-size:13px; opacity:.8; }
.footbar-credit { display:inline-flex; align-items:center; gap:12px; color:var(--color-text-on-brand); text-decoration:none; font-size:13px; }
.footbar-credit:hover { color:var(--color-text-on-brand); }
.footbar-credit:hover .footbar-credit-text { text-decoration:underline; text-decoration-color:var(--color-accent); }
.footbar-credit-text { opacity:.8; }
.footbar-logo { display:block; height:32px; width:auto; }  /* same height as .logo-topbar */
@media (max-width:640px) { .footbar { padding:8px 16px; } }
@media print { .footbar { display:none; } }
.answer-date { font:inherit; padding:8px 10px; border:1px solid var(--color-border-strong); border-radius:8px; background:var(--color-surface); color:var(--color-text); }
.answer-date:focus { outline:2px solid var(--color-focus-ring); outline-offset:1px; }
.answer-date:disabled { background:var(--color-surface-sunken); color:var(--color-text-muted); }

/* region picker: the <dialog> on the dashboard and the same list rendered as a page */
.region-dialog {
  border:none; border-radius:var(--radius-lg); padding:24px; max-width:520px; width:calc(100% - 32px);
  background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-lg);
}
.region-dialog::backdrop { background:var(--color-overlay); }
.region-dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.region-dialog-head h2 { margin:2px 0 0; font-size:20px; }
.region-dialog-kicker { margin:0; color:var(--color-text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.region-dialog-lead { color:var(--color-text-muted); font-size:14px; }
.region-dialog-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.region-close { padding:4px 10px; line-height:1; font-size:16px; }
.region-form { margin-top:16px; display:flex; flex-direction:column; gap:6px; }
.region-form select { width:100%; }
.inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.link-quiet { color:var(--color-text-muted); font-size:13px; margin-left:8px; }
.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;
}