/* ═══════════════════════════════════════════════════════
   Utrecht Holdings — Invention Management System
   Styled to match the Utrecht Holdings Datahub, so the two
   internal tools read as one system: black header, editorial
   type scale, small uppercase section labels over black rules.
   ═══════════════════════════════════════════════════════

   Where this and the Brand Book (v1, July 2026) appear to differ —
   uppercase nav and section labels, against ch. 09's "sentence case, no
   added tracking" — the book's own exception is being used: full caps
   are allowed for "very small functional labels", which is exactly what
   these are (10–11px). Everything a person actually reads stays in
   sentence case.

   The pathway colours (ch. 07) are kept for the things that encode a
   stage — dossier status, the progress rail — since those carry meaning
   the greyscale cannot.
*/

@font-face {
  font-family: 'Precious Sans';
  src: url('/static/fonts/precioussans-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Precious Sans is licensed to us in one weight (the 500 face above),
   and browsers will not synthesise a heavier one from it — Chrome
   renders font-weight: 700 at exactly the same width and colour, so
   every <strong> in the app was emphasis that never appeared. Thickening
   the outline is the only faux bold available until a real bold face is
   licensed; when one is, add its @font-face and delete the stroke. */
strong, b {
  font-weight: 700;
  -webkit-text-stroke: 0.035em currentColor;
}

:root {
  color-scheme: light;

  --black:    #000000;
  --white:    #ffffff;
  --gray-50:  #fafafa;
  --gray-100: #f2f2f2;
  --gray-200: #d9d9d9;
  --gray-400: #999999;
  --gray-600: #666666;
  --gray-700: #444444;
  --gray-800: #222222;
  --rule:     #e2e2e2;

  --uh-blue:       #1a3a6b;
  --uh-blue-light: #edf2fb;
  --green:        #166534;
  --green-bg:     #f0fdf4;
  --green-border: #86efac;
  --red:          #991b1b;
  --red-bg:       #fff5f5;
  --red-border:   #fca5a5;
  --amber:        #92400e;
  --amber-bg:     #fffbeb;

  /* Brand Book ch. 06/07 — kept for stage meaning, not decoration. */
  --uh-deep-blue: #0065ae;
  --uh-cyan:      #0097c4;
  --uh-sky:       #00aec6;
  --uh-teal:      #57af9f;
  --uh-sage:      #a0bd73;
  --uh-yellow:    #fec800;
  --uh-grey:      #706f6f;

  --font: 'Precious Sans', Georgia, "Times New Roman", serif;

  /* Aliases so older rules keep meaning something. */
  --text: var(--black);
  --muted: var(--gray-600);
  --border: var(--rule);
  --action: var(--black);
  --uh-soft: var(--gray-400);
  --uh-line: var(--rule);
  --uh-faint: var(--gray-50);
  --uh-ink: var(--black);
  --danger: var(--red);
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.65;
  color: var(--black);
  background: var(--white);
  min-height: 100vh;
}

a { color: var(--uh-blue); text-underline-offset: 2px; }
a:hover { color: var(--black); }

:focus-visible { outline: 2px solid var(--uh-blue); outline-offset: 2px; }

/* ── Header ───────────────────────────────────────────── */

.site-header {
  background: var(--black);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--black);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  padding: 8px 0;
}

.header-logo-img { height: 36px; width: auto; display: block; }

.header-wordmark-fallback {
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--white);
}

.header-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.nav-link {
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  font-family: var(--font);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.nav-link:hover { color: var(--white); }
.nav-link.active { color: var(--white); border-bottom-color: var(--white); }
.nav-logout { display: inline; }

/* ── Layout ───────────────────────────────────────────── */

.container { max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem; }

.site-footer {
  text-align: center;
  color: var(--gray-400);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
}

/* ── Typography ───────────────────────────────────────── */

h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid var(--black);
}

h2 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-800);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--black);
  margin: 2.5rem 0 1.25rem;
}

h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 1.5rem 0 0.75rem;
}

p { margin-bottom: 1rem; max-width: 70ch; }

.field-help, .muted {
  color: var(--gray-600);
  font-size: 13px;
}

/* A field's description belongs to the field, so it runs to the same
   width. The 70ch prose measure left it visibly narrower than the input
   it describes, which read as a ragged second column. */
.field-help { max-width: none; }

/* ── Buttons ──────────────────────────────────────────── */

.btn,
.button-link,
.secondary-button,
button[type="submit"],
button[type="button"],
.auth-form button,
.profile-picture-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 2px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  background: var(--black);
  color: var(--white);
  transition: opacity 0.15s;
  white-space: nowrap;
}

.btn:hover,
.button-link:hover,
button[type="submit"]:hover,
.auth-form button:hover { opacity: 0.8; color: var(--white); }

.btn-primary { background: var(--black); color: var(--white); }

/* The call to action, in UH Sky. Declared after .btn-primary: both are
   single-class selectors, so whichever comes last wins.

   White on this cyan is 2.7:1, below what WCAG asks for text this size.
   Kept at the user's explicit choice — it reads more clearly than the
   sage alternative did — and noted here so it isn't mistaken for an
   oversight. Dark text on the same cyan would reach 5.3:1. */
.btn-on-dark,
.btn-on-dark:hover {
  background: var(--uh-sky);
  border-color: var(--uh-sky);
  color: var(--white);
  font-weight: 700;
}

.btn-on-dark:hover { opacity: 0.85; }

/* In the header it needs separating from the nav links that follow. */
.header-nav .btn-on-dark { margin-right: 0.75rem; }

.secondary-button,
.btn-secondary,
.form-actions .secondary-button,
.profile-picture-actions .secondary-button,
.dossier-search .secondary-button,
.role-form .secondary-button,
.invite-row .secondary-button,
.attachment-upload .secondary-button {
  background: var(--white);
  color: var(--black);
  border-color: var(--gray-200);
}

.secondary-button:hover,
.form-actions .secondary-button:hover,
.dossier-search .secondary-button:hover,
.role-form .secondary-button:hover,
.invite-row .secondary-button:hover,
.attachment-upload .secondary-button:hover {
  background: var(--gray-50);
  color: var(--black);
  opacity: 1;
}

button[disabled],
.btn[disabled] {
  background: var(--gray-200);
  border-color: var(--gray-200);
  color: var(--gray-600);
  cursor: not-allowed;
  opacity: 1;
}

/* Qualified with `button` so these beat the base button[type="submit"]
   rule on specificity, not just on source order — otherwise a text
   button that happens to submit renders as a solid primary one. */
button.link-button,
button.text-button,
.link-button,
.text-button {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--gray-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

button.link-button:hover, button.text-button:hover,
.link-button:hover, .text-button:hover {
  background: none;
  color: var(--black);
  opacity: 1;
}

button.text-button[disabled],
.text-button[disabled] {
  background: none;
  border: none;
  color: var(--gray-400);
  text-decoration: none;
  cursor: not-allowed;
}

/* Irreversible actions. `button.` qualified for the same reason as the
   text buttons above: the base button[type="submit"] rule would
   otherwise win on specificity and paint these like any other submit. */
button.danger-button,
.danger-button {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

button.danger-button:hover,
.danger-button:hover { background: #7f1616; border-color: #7f1616; }

/* Discontinue sits among ordinary form buttons, so it stays quiet — a
   text button in the warning colour. Two classes to beat the plain
   button.text-button colour above. */
button.text-button.danger-button,
.text-button.danger-button {
  background: none;
  border: none;
  color: var(--danger);
}

button.text-button.danger-button:hover,
.text-button.danger-button:hover { background: none; color: #7f1616; }

/* ── Forms ────────────────────────────────────────────── */

.auth-form { max-width: 640px; }
.auth-form form { display: flex; flex-direction: column; gap: 0.85rem; }

.auth-form label,
.invite-form label,
.yesno legend {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-800);
  margin-bottom: -0.35rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 2px;
  background: var(--white);
  color: var(--black);
  width: 100%;
}

textarea { resize: vertical; line-height: 1.6; }

/* A date is a fixed, short value — at full column width the picker was
   mostly empty space. */
input[type="date"] { width: auto; max-width: 13rem; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--black);
}

input:disabled { background: var(--gray-100); color: var(--gray-600); }

.auth-form form > button, .auth-form form > .btn { align-self: flex-start; margin-top: 0.5rem; }

/* Scoped past `.auth-form label`, which is the uppercase field-label
   rule — an answer the person reads ("Yes"/"No") is not a field label,
   and inherited its caps, tracking and negative margin. */
.radio-label, .checkbox-label,
.auth-form .radio-label, .auth-form .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--black);
  margin-bottom: 0;
  padding: 1px 0;
}

.radio-label input, .checkbox-label input { width: auto; accent-color: var(--black); }

.yesno { border: none; }
.yesno legend { padding: 0; }

.char-counter {
  margin: -0.5rem 0 0;
  max-width: none;
  font-size: 11px;
  color: var(--gray-400);
  text-align: right;
  letter-spacing: 0.04em;
}

.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.form-actions-footer { margin-top: 2rem; align-items: center; }
.form-actions-footer .danger-button { margin-right: auto; }
.cancel-form { margin-top: 2rem; }
.auth-form > .field-help { margin: 0.75rem 0 1.25rem; }

/* ── Messages ─────────────────────────────────────────── */

.form-error, .form-success {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-size: 13px;
  margin-bottom: 1.25rem;
  max-width: 70ch;
}

.form-error { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }
/* A standing warning about what the page does, not a report of
   something gone wrong — so it takes the danger colour as a rule rather
   than as a filled box, which would be indistinguishable from the
   .form-error that can appear directly below it. */
.warning-notice {
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--danger);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 1.5rem;
  max-width: 70ch;
}
.form-success { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.form-error p, .form-success p { margin: 0; color: inherit; }
.outstanding { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.outstanding li { margin: 0.2rem 0; }

/* ── Tables ───────────────────────────────────────────── */

.table-scroll { overflow-x: auto; }

.dossier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--white);
  border: 1px solid var(--rule);
}

.dossier-table th {
  text-align: left;
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--gray-50);
  border-bottom: 2px solid var(--black);
  white-space: nowrap;
}

.dossier-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  white-space: nowrap;
}

/* The second column is the title (or, in User Management, the email):
   the one field long enough to need wrapping, and the one worth giving
   the leftover width to. Everything else stays on one line, so dates
   and numbers don't break in half. */
.dossier-table th:nth-child(2),
.dossier-table td:nth-child(2) {
  white-space: normal;
  min-width: 15rem;
}

.dossier-table tr:last-child td { border-bottom: none; }
.dossier-table tbody tr:hover td { background: var(--gray-50); }
.dossier-table a { font-weight: 600; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Status pills ─────────────────────────────────────── */

/* A neutral pill carrying a pathway-coloured marker: the shape matches
   the Datahub's badges, while the hue stays the Brand Book's own colour
   rather than a tint of it (ch. 06 forbids tints as new brand colours). */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--gray-100);
  color: var(--gray-800);
  font-size: 12px;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--uh-grey);
  flex-shrink: 0;
}

.status-draft::before { background: var(--uh-deep-blue); }
.status-reach-out-completed::before { background: var(--uh-cyan); }
.status-ready-for-full-submission::before { background: var(--uh-sky); }

/* Not statuses — a contributor's role and an access state — but they
   share the marker language. Named in their own right so a change to a
   status label can't silently strip their colour. */
.status-lead::before,
.status-granted::before { background: var(--uh-sky); }
.status-submission-completed::before { background: var(--uh-teal); }
.status-cancelled::before { background: var(--gray-400); }
/* Darker than cancelled: a decision that was taken, not a draft that was
   abandoned. */
.status-discontinued::before { background: var(--uh-grey); }

.status-invited::before { background: var(--uh-deep-blue); }
.status-pending-verification::before { background: var(--uh-cyan); }
.status-active::before { background: var(--uh-teal); }
.status-deactivated::before { background: var(--gray-400); }

/* ── Facts list ───────────────────────────────────────── */

.facts {
  margin: 0 0 1.5rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding: 0.35rem 0;
}

.facts dt {
  flex: 0 0 9rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-600);
  padding-top: 2px;
}

.facts dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 13px; }
.facts .field-help { margin: 0; }

/* ── Dashboard controls ───────────────────────────────── */

.bd-filter-form { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
.bd-filter-form label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-600); }
.bd-filter-form select { width: auto; min-width: 11rem; }
.assignment-form select { width: auto; min-width: 9rem; font-size: 12px; padding: 5px 8px; }

.dossier-search { display: flex; align-items: center; gap: 8px; margin-bottom: 1.25rem; max-width: 28rem; }
.dossier-search input[type="search"] { flex: 1; }

.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem 0 0; }
.empty-state p { color: var(--gray-600); }

/* ── Invite form ──────────────────────────────────────── */

.invite-form { margin: 0 0 2rem; max-width: 34rem; }
.invite-row { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-row input[type="email"] { flex: 1 1 18rem; }
.invite-form .field-help { margin-top: 0.5rem; }

/* ── Profile ──────────────────────────────────────────── */

.profile-picture { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.avatar-large, .avatar-placeholder-large { width: 72px; height: 72px; border-radius: 50%; color: var(--gray-400); flex-shrink: 0; }
.avatar-large { object-fit: cover; }
.profile-picture-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.profile-picture-actions form { display: flex; align-items: center; gap: 0.6rem; }
.profile-picture-actions input[type="file"] { width: auto; font-size: 12px; border: none; padding: 0; }

/* ── Read-only content ────────────────────────────────── */

.readonly-field { margin: 0 0 1.5rem; }
.readonly-field h3 { margin: 0 0 0.3rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-600); }
.readonly-value { margin: 0; white-space: pre-wrap; max-width: 70ch; }
.readonly-empty { margin: 0; color: var(--gray-400); font-style: italic; }

.stage-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--gray-50);
  border: 1px solid var(--rule);
}

.stage-action p { margin: 0; }
.stage-action form { margin: 0; }

/* ── Attachments ──────────────────────────────────────── */

.supporting-files { margin-top: 2rem; }

.attachments {
  margin: 0.5rem 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--gray-50);
  border: 1px solid var(--rule);
}

.attachments h3 { margin: 0 0 0.25rem; }

.attachment-list { list-style: none; margin: 0 0 0.85rem; padding: 0; }

.attachment-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}

.attachment-list li:last-child { border-bottom: none; }

/* Scoped past `.auth-form form`, which lays the main form out as a
   centred column — an upload form nested in that section inherited the
   column direction and centred the file control on the page. */
.attachment-upload,
.auth-form .attachment-upload {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.attachment-upload input[type="file"] {
  width: auto;
  max-width: 20rem;
  font-size: 12px;
  border: none;
  padding: 0;
  color: var(--gray-600);
}

/* The browser's own "Choose file" button, brought into line with the
   page's other secondary actions. */
.attachment-upload input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 6px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 2px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}

.attachment-upload input[type="file"]::file-selector-button:hover {
  background: var(--gray-50);
}

.role-form { display: inline; }
.role-form .secondary-button { padding: 4px 10px; font-size: 10px; }

/* ── Submission process rail ──────────────────────────── */

.with-rail {
  display: grid;
  grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.rail { position: sticky; top: 76px; font-size: 13px; }
.rail-steps, .rail-screens { list-style: none; margin: 0; padding: 0; }

.rail-step { position: relative; padding: 0 0 1.75rem 2.5rem; }
.rail-step:last-child { padding-bottom: 0; }

.rail-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 1.6rem;
  bottom: 0.2rem;
  width: 2px;
  background: var(--rule);
}

.rail-step-done:not(:last-child)::before { background: var(--stage); }

.rail-step-hue-input      { --stage: var(--uh-deep-blue); --stage-ink: #fff; }
.rail-step-hue-activities { --stage: var(--uh-cyan);      --stage-ink: var(--black); }
.rail-step-hue-outputs    { --stage: var(--uh-teal);      --stage-ink: var(--black); }
.rail-step-hue-outcomes   { --stage: var(--uh-sage);      --stage-ink: var(--black); }
.rail-step-hue-impact     { --stage: var(--uh-yellow);    --stage-ink: var(--black); }

.rail-marker {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--stage, var(--gray-200));
  background: var(--white);
  box-sizing: border-box;
}

.rail-step-done .rail-marker,
.rail-step-current .rail-marker { background: var(--stage); color: var(--stage-ink); }
.rail-step-current .rail-marker { box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage) 22%, transparent); }

.rail-check { width: 0.85rem; height: 0.85rem; }

.rail-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.6rem;
  color: var(--gray-400);
}

.rail-step-done .rail-label, .rail-step-current .rail-label { color: var(--black); }

.rail-hint { margin: 0.35rem 0 0; max-width: none; font-size: 12px; line-height: 1.45; color: var(--gray-600); }

.rail-screens { margin: 0.6rem 0 0; padding: 0 0 0 0.25rem; border-left: 1px solid var(--rule); }

.rail-screen {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0 0.28rem 1rem;
  font-size: 12.5px;
  line-height: 1.4;
}

.rail-dot {
  position: absolute;
  left: -0.34rem;
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  border: 1px solid var(--gray-400);
  background: var(--white);
  box-sizing: border-box;
}

.rail-screen-done .rail-dot { border-color: var(--stage); border-width: 2px; }
.rail-screen-current .rail-dot {
  border-color: var(--stage);
  border-width: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage) 20%, transparent);
}

.rail-screen-label { color: var(--gray-600); }
a.rail-screen-label { color: var(--gray-600); text-decoration: none; }
a.rail-screen-label:hover { color: var(--black); text-decoration: underline; }
.rail-screen-current .rail-screen-label { color: var(--black); font-weight: 600; }

.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;
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 60rem) {
  .with-rail { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .rail { position: static; }
}

@media (max-width: 40rem) {
  .header-inner { padding: 0.5rem 1.25rem; }
  .container { padding: 1.75rem 1.25rem; }
  .header-nav { width: 100%; }
}

/* "Show:" sits with the filter it labels, not above it. */
.show-filters { margin-top: -1rem; gap: 1rem; }

.filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-600);
}

/* These name the statuses they filter, so they read like the pills in
   the table — sentence case — rather than inheriting the uppercase
   field-label styling from .bd-filter-form label. */
.show-filters .checkbox-label {
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--black);
}