/* Qoridex Design System — QDS-01 tokens, QDS-03 components.
 *
 * Every colour, size and radius below comes from the frozen specification.
 * Nothing here is invented: where QDS gives a range (6–8px radius, 40–44px
 * button height) a value inside that range is chosen and used consistently.
 */

:root {
  /* QDS-01 §2 — colour system */
  --qds-navy: #102A43;
  --qds-navy-dark: #0B1F33;
  --qds-teal: #0E8F7A;
  --qds-teal-light: #DDF4EF;
  --qds-cyan: #2AA7C9;
  --qds-background: #F7F9FB;
  --qds-surface: #FFFFFF;
  --qds-text: #172B3A;
  --qds-text-secondary: #607180;
  --qds-border: #D8E0E7;

  /* QDS-01 §2 — functional status */
  --qds-success: #15803D;
  --qds-warning: #B7791F;
  --qds-error: #C2413B;
  --qds-info: #2563A6;

  /* QDS-03 §1 — spacing scale */
  --qds-space-1: 4px;
  --qds-space-2: 8px;
  --qds-space-3: 12px;
  --qds-space-4: 16px;
  --qds-space-6: 24px;
  --qds-space-8: 32px;
  --qds-space-12: 48px;
  --qds-space-16: 64px;
  --qds-space-24: 96px;

  /* QDS-01 §6 — radius; QDS-03 §1 — layout */
  --qds-radius: 8px;
  --qds-radius-sm: 6px;
  --qds-sidebar: 240px;
  --qds-topbar: 64px;
  --qds-content-max: 1280px;

  /* QDS-03 §18 — restrained motion */
  --qds-motion: 180ms;
}

/* QDS-01 §3 — Inter. A system stack follows it so the interface degrades to a
 * comparable grotesque rather than a serif if Inter is unavailable offline. */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;            /* QDS-01 §3 UI body */
  line-height: 1.5;
  color: var(--qds-text);
  background: var(--qds-background);
}

h1 { font-size: 32px; font-weight: 600; margin: 0 0 var(--qds-space-4); }
h2 { font-size: 24px; font-weight: 600; margin: 0 0 var(--qds-space-3); }
h3 { font-size: 18px; font-weight: 600; margin: 0 0 var(--qds-space-2); }
label { font-size: 14px; font-weight: 600; display: block; margin-bottom: var(--qds-space-1); }
.qds-helper { font-size: 12px; color: var(--qds-text-secondary); }
.qds-secondary { color: var(--qds-text-secondary); }

a { color: var(--qds-info); }

/* QDS-01 §8 — visible focus on every interactive control. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--qds-cyan);
  outline-offset: 2px;
}

.qds-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--qds-space-2);
  background: var(--qds-surface);
  padding: var(--qds-space-2) var(--qds-space-4);
  border-radius: var(--qds-radius-sm);
  z-index: 100;
}
.qds-skip-link:focus { left: var(--qds-space-4); }

/* ---------------------------------------------------------------------------
 * QDS-03 §2 — navigation. Dark navy sidebar for Operations.
 * ------------------------------------------------------------------------- */
.qds-shell { display: flex; min-height: 100vh; }

.qds-sidebar {
  width: var(--qds-sidebar);
  flex: 0 0 var(--qds-sidebar);
  background: var(--qds-navy);
  color: #FFFFFF;
  padding: var(--qds-space-4) 0;
}

.qds-logo {
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  padding: 0 var(--qds-space-4) var(--qds-space-6);
  display: block;
  text-decoration: none;
}
.qds-logo span { color: var(--qds-teal); }

.qds-nav a {
  display: block;
  padding: var(--qds-space-3) var(--qds-space-4);
  color: #C9D6E2;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--qds-motion), color var(--qds-motion);
}
.qds-nav a:hover { background: var(--qds-navy-dark); color: #FFFFFF; }

/* QDS-03 §2 — active state: teal indicator on a lighter navy surface. */
.qds-nav a[aria-current="page"] {
  background: #17395A;
  color: #FFFFFF;
  border-left-color: var(--qds-teal);
  font-weight: 600;
}

.qds-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.qds-topbar {
  height: var(--qds-topbar);
  background: var(--qds-surface);
  border-bottom: 1px solid var(--qds-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--qds-space-6);
}

.qds-breadcrumb { font-size: 13px; color: var(--qds-text-secondary); }
.qds-breadcrumb strong { color: var(--qds-text); font-weight: 600; }

.qds-content {
  padding: var(--qds-space-6);
  max-width: var(--qds-content-max);
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * QDS-03 §4 — cards
 * ------------------------------------------------------------------------- */
.qds-card {
  background: var(--qds-surface);
  border: 1px solid var(--qds-border);
  border-radius: var(--qds-radius);
  padding: var(--qds-space-4);
  margin-bottom: var(--qds-space-4);
}
.qds-card h3 { margin-top: 0; }

.qds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--qds-space-4);
}

.qds-metric { font-size: 32px; font-weight: 600; color: var(--qds-navy); }
.qds-metric-label { font-size: 13px; color: var(--qds-text-secondary); }
.qds-metric-unknown { font-size: 14px; font-weight: 500; color: var(--qds-text-secondary); }

/* ---------------------------------------------------------------------------
 * QDS-03 §3 — buttons
 * ------------------------------------------------------------------------- */
.qds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 var(--qds-space-4);
  border-radius: var(--qds-radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--qds-motion), border-color var(--qds-motion);
}
.qds-btn-primary { background: var(--qds-teal); color: #FFFFFF; }
.qds-btn-primary:hover { background: #0B7867; }
.qds-btn-secondary {
  background: var(--qds-surface);
  color: var(--qds-navy);
  border-color: var(--qds-navy);
}
.qds-btn-secondary:hover { background: #EEF2F6; }
.qds-btn-destructive { background: var(--qds-error); color: #FFFFFF; }
.qds-btn[disabled], .qds-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.qds-btn-row { display: flex; gap: var(--qds-space-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
 * QDS-03 §5 — status chips. Text + icon + colour, never colour alone.
 * ------------------------------------------------------------------------- */
.qds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--qds-space-1);
  padding: 2px var(--qds-space-2);
  border-radius: var(--qds-radius-sm);
  border: 1px solid var(--qds-border);
  font-size: 13px;
  font-weight: 500;
  background: var(--qds-surface);
}
.qds-chip .qds-chip-icon { font-weight: 700; }
.qds-chip-verified { color: var(--qds-success); border-color: var(--qds-success); }
.qds-chip-progress { color: var(--qds-info); border-color: var(--qds-info); }
.qds-chip-qa { color: var(--qds-warning); border-color: var(--qds-warning); }
.qds-chip-blocked { color: var(--qds-error); border-color: var(--qds-error); }
.qds-chip-pending { color: var(--qds-text-secondary); }

/* ---------------------------------------------------------------------------
 * QDS-03 §6 — tables
 * ------------------------------------------------------------------------- */
.qds-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.qds-table th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--qds-text-secondary);
  border-bottom: 1px solid var(--qds-border);
  padding: var(--qds-space-2) var(--qds-space-3);
}
.qds-table td {
  height: 46px;
  padding: var(--qds-space-2) var(--qds-space-3);
  border-bottom: 1px solid var(--qds-border);
}
.qds-table tbody tr:hover { background: #F2F6F9; }
.qds-table .qds-actions { text-align: right; }

/* ---------------------------------------------------------------------------
 * QDS-03 §7 — evidence panel (signature component)
 * ------------------------------------------------------------------------- */
.qds-evidence {
  background: var(--qds-teal-light);
  border: 1px solid #B9E4DB;
  border-radius: var(--qds-radius);
  padding: var(--qds-space-4);
}
.qds-evidence dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--qds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qds-evidence dd { margin: 0 0 var(--qds-space-3); font-size: 14px; }

/* ---------------------------------------------------------------------------
 * QDS-03 §8 — field comparison (signature component)
 * ------------------------------------------------------------------------- */
.qds-comparison {
  border: 1px solid var(--qds-border);
  border-radius: var(--qds-radius);
  overflow: hidden;
}
.qds-comparison-field {
  background: var(--qds-navy);
  color: #FFFFFF;
  padding: var(--qds-space-2) var(--qds-space-4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qds-comparison-body { display: flex; flex-wrap: wrap; }
.qds-comparison-side {
  flex: 1 1 200px;
  padding: var(--qds-space-4);
  border-right: 1px solid var(--qds-border);
}
.qds-comparison-side:last-child { border-right: none; }
.qds-comparison-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--qds-text-secondary);
  text-transform: uppercase;
}
.qds-comparison-value { font-size: 18px; font-weight: 600; }
.qds-comparison-change { font-size: 13px; color: var(--qds-warning); font-weight: 600; }
.qds-comparison-unchanged { font-size: 13px; color: var(--qds-success); font-weight: 600; }

/* ---------------------------------------------------------------------------
 * QDS-03 §9 — verified data path (operational: compact and factual)
 * ------------------------------------------------------------------------- */
.qds-path { display: flex; flex-wrap: wrap; gap: var(--qds-space-4); }
.qds-path-step { font-size: 13px; display: flex; align-items: center; gap: var(--qds-space-1); }
.qds-path-done { color: var(--qds-success); font-weight: 600; }
.qds-path-active { color: var(--qds-info); font-weight: 600; }
.qds-path-todo { color: var(--qds-text-secondary); }

/* ---------------------------------------------------------------------------
 * QDS-03 §13 §16 — forms, validation, banners
 * ------------------------------------------------------------------------- */
.qds-field { margin-bottom: var(--qds-space-4); }
.qds-input, .qds-select, .qds-textarea {
  width: 100%;
  min-height: 42px;
  padding: var(--qds-space-2) var(--qds-space-3);
  border: 1px solid var(--qds-border);
  border-radius: var(--qds-radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: var(--qds-surface);
  color: var(--qds-text);
}
.qds-textarea { min-height: 96px; }
.qds-required { color: var(--qds-error); }
.qds-error-text { color: var(--qds-error); font-size: 13px; margin-top: var(--qds-space-1); }

.qds-banner {
  border-radius: var(--qds-radius-sm);
  padding: var(--qds-space-3) var(--qds-space-4);
  margin-bottom: var(--qds-space-4);
  border: 1px solid;
  font-size: 14px;
}
.qds-banner-error { background: #FBEBEA; border-color: var(--qds-error); color: #8A2F2A; }
.qds-banner-success { background: #E9F6EE; border-color: var(--qds-success); color: #12622F; }
.qds-banner-info { background: #EAF1F9; border-color: var(--qds-info); color: #1C4C7E; }

.qds-empty {
  text-align: center;
  padding: var(--qds-space-12) var(--qds-space-4);
  color: var(--qds-text-secondary);
}

/* ---------------------------------------------------------------------------
 * Worker workspace — QDS-01 §7 mobile-first, QDS-03 §10
 * ------------------------------------------------------------------------- */
.qds-worker { max-width: 640px; margin: 0 auto; padding: var(--qds-space-4); }
.qds-worker-header {
  background: var(--qds-navy);
  color: #FFFFFF;
  padding: var(--qds-space-3) var(--qds-space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qds-worker-header a { color: #C9D6E2; }

.qds-decisions { display: grid; gap: var(--qds-space-3); }
.qds-decision {
  display: flex;
  align-items: flex-start;
  gap: var(--qds-space-3);
  border: 1px solid var(--qds-border);
  border-radius: var(--qds-radius);
  padding: var(--qds-space-4);
  background: var(--qds-surface);
  cursor: pointer;
}
.qds-decision:has(input:checked) {
  border-color: var(--qds-teal);
  background: var(--qds-teal-light);
}
.qds-decision input { margin-top: 3px; width: 20px; height: 20px; }
.qds-decision-title { font-weight: 600; }

/* QDS-03 §10 — mobile sticky submit is permitted. */
.qds-sticky-submit {
  position: sticky;
  bottom: 0;
  background: var(--qds-surface);
  border-top: 1px solid var(--qds-border);
  padding: var(--qds-space-3);
  margin-top: var(--qds-space-6);
}
.qds-sticky-submit .qds-btn { width: 100%; }

/* ---------------------------------------------------------------------------
 * QA workspace — QDS-03 §11, three contexts on desktop
 * ------------------------------------------------------------------------- */
.qds-qa-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--qds-space-4); }
.qds-immutable {
  border-left: 3px solid var(--qds-border);
  padding-left: var(--qds-space-3);
}
.qds-immutable-note { font-size: 12px; color: var(--qds-text-secondary); font-style: normal; }

/* ---------------------------------------------------------------------------
 * QDS-03 §17 — responsive breakpoints
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* QA stacks its columns on narrow screens. */
  .qds-qa-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .qds-shell { flex-direction: column; }
  .qds-sidebar {
    width: 100%;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--qds-space-2);
  }
  .qds-logo { padding: var(--qds-space-2); }
  .qds-nav { display: flex; flex-wrap: wrap; }
  .qds-nav a { border-left: none; border-bottom: 3px solid transparent; padding: var(--qds-space-2); }
  .qds-nav a[aria-current="page"] { border-left: none; border-bottom-color: var(--qds-teal); }
  .qds-content { padding: var(--qds-space-4); }

  /* Operations tables become compact stacked lists for essential mobile use. */
  .qds-table thead { display: none; }
  .qds-table, .qds-table tbody, .qds-table tr, .qds-table td { display: block; width: 100%; }
  .qds-table tr {
    border: 1px solid var(--qds-border);
    border-radius: var(--qds-radius);
    margin-bottom: var(--qds-space-3);
    background: var(--qds-surface);
  }
  .qds-table td { height: auto; border-bottom: none; padding: var(--qds-space-2) var(--qds-space-3); }
  .qds-table td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--qds-text-secondary);
  }
  .qds-table .qds-actions { text-align: left; }
  .qds-comparison-side { border-right: none; border-bottom: 1px solid var(--qds-border); }
}

/* QDS-01 §8 — respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ==========================================================================
   Worker & QA shell — QDS-01 §7 (worker mobile-first), QDS-02 §14
   ========================================================================== */
.qds-worker {
  min-height: 100vh;
  background: var(--qds-background);
}

.qds-worker-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qds-space-4);
  min-height: 64px;                  /* QDS-03 §1; grows when the links wrap */
  flex-wrap: wrap;
  padding: 0 var(--qds-space-4);
  background: var(--qds-navy);       /* QDS-03 §2 — dark navy navigation */
  color: #fff;
}
.qds-worker-bar .qds-logo { color: #fff; }
/* W8: the worker's own pages. Wraps under the logo on a narrow phone. */
.qds-worker-links { display: flex; gap: var(--qds-space-4); flex-wrap: wrap; }
.qds-worker-links a { color: #fff; text-decoration: none; font-size: 14px; opacity: .85; }
.qds-worker-links a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.qds-reveal { font-family: ui-monospace, monospace; letter-spacing: .04em; }

.qds-worker-main {
  max-width: 720px;                  /* single readable column on any device */
  margin: 0 auto;
  padding: var(--qds-space-5) var(--qds-space-4) 96px;
}

.qds-back {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
.qds-back:hover { text-decoration: underline; }
/* On the page itself (light background) the back link uses the link colour; in the dark bar it stays white. */
.qds-worker-main .qds-back { color: var(--qds-info); }

/* Task list cards — a list, not a table, because the worker case is narrow. */
.qds-task-card {
  display: block;
  background: var(--qds-surface);
  border: 1px solid var(--qds-border);
  border-radius: 8px;                /* QDS-01 §6 */
  padding: var(--qds-space-4);
  margin-bottom: var(--qds-space-3);
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease;   /* QDS-03 §18 — 150–220ms */
}
.qds-task-card:hover { border-color: var(--qds-teal); }
.qds-task-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qds-space-3);
  margin-bottom: var(--qds-space-2);
}
.qds-task-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qds-space-3);
}
.qds-task-cta { color: var(--qds-teal); font-weight: 600; font-size: 14px; }

/* Key/value metadata — QDS-01 §3, 13–14px table/metadata */
.qds-kv {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: var(--qds-space-2) var(--qds-space-3);
  margin: 0;
  font-size: 14px;
}
.qds-kv dt { color: var(--qds-text-secondary); font-weight: 500; }
.qds-kv dd { margin: 0; }

.qds-value { font-size: 18px; font-weight: 600; margin: var(--qds-space-1) 0; }
.qds-field-name { font-size: 16px; font-weight: 600; margin: 0 0 var(--qds-space-3); }
.qds-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }

/* Field comparison — QDS-03 §8 */
.qds-compare-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qds-space-5);
}

/* Evidence panel — QDS-03 §7, light teal-tinted surface */
.qds-evidence {
  background: var(--qds-teal-light);
  border: 1px solid var(--qds-border);
  border-radius: 8px;
  padding: var(--qds-space-4);
  margin-bottom: var(--qds-space-4);
}
.qds-evidence-item + .qds-evidence-item {
  margin-top: var(--qds-space-3);
  padding-top: var(--qds-space-3);
  border-top: 1px solid var(--qds-border);
}

/* Decision / outcome controls */
.qds-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--qds-space-1) var(--qds-space-3);
  padding: var(--qds-space-3);
  border: 1px solid var(--qds-border);
  border-radius: 8px;
  margin-bottom: var(--qds-space-2);
  cursor: pointer;
  min-height: 44px;                  /* QDS-01 §8 — sensible touch targets */
}
.qds-choice:hover { border-color: var(--qds-teal); }
.qds-choice input { margin-top: 3px; }
.qds-choice:has(input:checked) {
  border-color: var(--qds-teal);
  background: var(--qds-teal-light);
}
.qds-choice input:focus-visible { outline: 2px solid var(--qds-cyan); outline-offset: 2px; }
.qds-choice-label { font-weight: 600; font-size: 14px; }
.qds-choice-help {
  grid-column: 2;
  color: var(--qds-text-secondary);
  font-size: 12px;                   /* QDS-01 §3 — helper text */
}

.qds-conditional[hidden] { display: none; }
.qds-req { color: var(--qds-error); }
.qds-help { color: var(--qds-text-secondary); font-size: 12px; margin: var(--qds-space-1) 0 0; }

/* Submit button of the worker forms. It sits in the page, below the answers, at
 * every window width. It used to be pinned to the bottom edge of the window
 * (QDS-03 §10 permits that on a phone, it does not require it), and there it
 * covered an answer option until the worker scrolled. */
.qds-sticky-submit {
  position: static;
  padding: var(--qds-space-3) 0;
  margin-top: 0;
  background: none;
  border-top: 0;
}
.qds-sticky-submit .qds-btn { width: 100%; }

.qds-inline-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--qds-space-3);
  padding-bottom: var(--qds-space-3);
  margin-bottom: var(--qds-space-3);
  border-bottom: 1px solid var(--qds-border);
}
.qds-revision-form { padding-top: var(--qds-space-2); }

.qds-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qds-space-3);
  margin-bottom: var(--qds-space-4);
}
.qds-stat {
  flex: 1 1 140px;
  background: var(--qds-surface);
  border: 1px solid var(--qds-border);
  border-radius: 8px;
  padding: var(--qds-space-4);
}
.qds-stat-value { display: block; font-size: 24px; font-weight: 600; }

.qds-row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qds-space-3);
  padding: var(--qds-space-3) 0;
  border-bottom: 1px solid var(--qds-border);
}
.qds-row-link:last-child { border-bottom: 0; }

/* QA three-context layout — QDS-03 §11 */
.qds-qa-main { max-width: 1280px; }
.qds-qa-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--qds-space-4);
  align-items: start;
}
.qds-decision-block {
  padding: var(--qds-space-3) 0;
  border-bottom: 1px solid var(--qds-border);
}
.qds-decision-block:last-child { border-bottom: 0; }
.qds-immutable-note { font-size: 12px; }

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

/* QDS-03 §17 — QA stacks on narrow screens; tables become labelled cards. */
@media (max-width: 1024px) {
  .qds-qa-columns { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .qds-kv { grid-template-columns: 1fr; gap: var(--qds-space-1); }
  .qds-kv dt { margin-top: var(--qds-space-2); }
  .qds-table thead { display: none; }
  .qds-table tr {
    display: block;
    border: 1px solid var(--qds-border);
    border-radius: 8px;
    padding: var(--qds-space-3);
    margin-bottom: var(--qds-space-3);
  }
  .qds-table td { display: flex; justify-content: space-between; gap: var(--qds-space-3); border: 0; }
  .qds-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--qds-text-secondary);
  }
  .qds-table td.qds-actions::before { content: ""; }
}

/* ==========================================================================
   Public website — QDS-02 §2, QDS-03 §1/§2/§3/§4/§17
   Reuses the QDS-01 tokens declared above; no new colour or typeface.
   ========================================================================== */

.qds-public-container {
  max-width: var(--qds-content-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--qds-space-24, 24px);
}

.qds-narrow { max-width: 720px; }

/* Header ---------------------------------------------------------------- */
.qds-public-header {
  background: var(--qds-surface);
  border-bottom: 1px solid var(--qds-border);
}

.qds-public-bar {
  display: flex;
  align-items: center;
  gap: var(--qds-space-24, 24px);
  min-height: var(--qds-topbar, 64px);
  flex-wrap: wrap;
}

.qds-wordmark {
  font-size: 20px;
  font-weight: 600;
  color: var(--qds-navy);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.qds-public-nav { flex: 1 1 auto; }

.qds-public-nav ul {
  display: flex;
  gap: var(--qds-space-24, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.qds-public-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--qds-text-secondary);
  text-decoration: none;
  padding: var(--qds-space-8, 8px) 0;
  border-bottom: 2px solid transparent;
}

.qds-public-nav a:hover { color: var(--qds-text); }

/* Active state is underline + colour + aria-current, never colour alone. */
.qds-public-nav a[aria-current="page"] {
  color: var(--qds-navy);
  border-bottom-color: var(--qds-teal);
}

.qds-public-actions {
  display: flex;
  gap: var(--qds-space-12, 12px);
  align-items: center;
}

/* Hero ------------------------------------------------------------------ */
.qds-hero {
  background: var(--qds-navy);
  color: #fff;
  padding: var(--qds-space-64, 64px) 0;
}

.qds-hero-headline {
  font-size: 52px;
  line-height: 1.1;
  font-weight: 600;
  margin: 0 0 var(--qds-space-16, 16px);
  max-width: 20ch;
}

.qds-hero-subhead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86); /* Surface white at reduced opacity, not a new hue */
  max-width: 64ch;
  margin: 0 0 var(--qds-space-32, 32px);
}

.qds-hero-cta { display: inline-block; }

/* Sections and cards ---------------------------------------------------- */
.qds-public-main { padding-bottom: var(--qds-space-64, 64px); }

.qds-page-title {
  font-size: 32px;
  font-weight: 600;
  margin: var(--qds-space-48, 48px) 0 var(--qds-space-12, 12px);
}

.qds-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--qds-text-secondary);
  max-width: 72ch;
  margin: 0 0 var(--qds-space-32, 32px);
}

.qds-section-heading {
  font-size: 24px;
  font-weight: 600;
  margin: var(--qds-space-48, 48px) 0 var(--qds-space-16, 16px);
}

.qds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--qds-space-16, 16px);
}

.qds-stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--qds-space-12, 12px);
}

.qds-status-note {
  margin-top: var(--qds-space-32, 32px);
  color: var(--qds-text-secondary);
  font-size: 14px;
}

.qds-cta-band {
  margin-top: var(--qds-space-48, 48px);
  padding: var(--qds-space-32, 32px);
  background: var(--qds-teal-light);
  border: 1px solid var(--qds-border);
  border-radius: var(--qds-radius, 8px);
}

/* Verified Data Path ---------------------------------------------------- */
.qds-path-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--qds-space-12, 12px);
}

.qds-path-step {
  display: flex;
  gap: var(--qds-space-12, 12px);
  align-items: flex-start;
  background: var(--qds-surface);
  border: 1px solid var(--qds-border);
  border-left: 3px solid var(--qds-teal);
  border-radius: var(--qds-radius, 8px);
  padding: var(--qds-space-16, 16px);
}

.qds-path-marker {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--qds-teal-light);
  color: var(--qds-navy);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qds-path-body { display: block; }
.qds-path-name { display: block; font-weight: 600; font-size: 14px; }
.qds-path-detail { display: block; font-size: 14px; color: var(--qds-text-secondary); }

/* Footer ---------------------------------------------------------------- */
.qds-public-footer {
  border-top: 1px solid var(--qds-border);
  padding: var(--qds-space-32, 32px) 0;
  background: var(--qds-surface);
}

.qds-footer-note {
  font-size: 13px;
  color: var(--qds-text-secondary);
  margin: 0 0 var(--qds-space-12, 12px);
}

.qds-footer-nav {
  display: flex;
  gap: var(--qds-space-16, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  font-size: 13px;
}

.qds-helper {
  font-size: 12px;
  color: var(--qds-text-secondary);
  margin-top: var(--qds-space-24, 24px);
}

/* Responsive — QDS-03 §17: mobile <768px, tablet 768-1024, desktop >1024 */
@media (max-width: 768px) {
  .qds-public-bar { align-items: flex-start; padding-top: var(--qds-space-12, 12px); padding-bottom: var(--qds-space-12, 12px); }
  .qds-public-nav ul { gap: var(--qds-space-12, 12px); }
  .qds-hero { padding: var(--qds-space-48, 48px) 0; }
  .qds-hero-headline { font-size: 32px; }
  .qds-hero-subhead { font-size: 16px; }
  .qds-grid { grid-template-columns: 1fr; }
  .qds-public-actions { width: 100%; }
  .qds-public-actions .qds-button { flex: 1 1 auto; text-align: center; }
}

/* W8: label / value pairs on the worker's account page. */
.qds-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--qds-space-2) var(--qds-space-4); margin: 0 0 var(--qds-space-4); }
.qds-dl dt { color: var(--qds-text-secondary); }
.qds-dl dd { margin: 0; }
@media (max-width: 480px) { .qds-dl { grid-template-columns: 1fr; } .qds-dl dd { margin-bottom: var(--qds-space-2); } }

/* W22: utility classes replacing inline style attributes (the CSP forbids inline styles). */
.u-w-auto { width:auto !important; }
.u-mt-0 { margin-top:0 !important; }
.u-fs-24 { font-size:24px !important; }
.u-w-full { width:100% !important; }
.u-mt-12 { margin-top:12px !important; }
.u-row-end { display:flex !important; gap:8px !important; justify-content:flex-end !important; }
.u-page-520 { max-width:520px !important; margin:96px auto !important; padding:16px !important; }
.u-w-6em { width:6em !important; }
.u-py-8 { padding:8px 0 !important; }
.u-py-12-rule { padding:12px 0 !important; border-bottom:1px solid var(--qds-border) !important; }
.u-page-480 { max-width:480px !important; margin:48px auto !important; padding:16px !important; }
.u-page-420 { max-width:420px !important; margin:96px auto !important; padding:16px !important; }
.u-page-420-64 { max-width:420px !important; margin:64px auto !important; padding:16px !important; }
.u-my-6 { margin:6px 0 !important; }
.u-mt-8 { margin-top:8px !important; }
.u-inline { display:inline !important; }