/* CSOA IMS design system.
   Palette and geometry follow the shadcn-admin references named in
   PROJECT_CSOA_IMS.md: Tailwind slate ramp, 0.625rem radius, hairline borders,
   light rail, inset content panel. Written by hand — the engine enforces a
   strict CSP and must run fully offline, so there is no Tailwind, no CDN and
   no webfont. */

:root {
  color-scheme: light;

  /* Slate ramp — the single source of every surface and text colour. */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  --color-canvas: var(--slate-50);
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-muted: var(--slate-100);
  --color-surface-inset: var(--slate-50);
  --color-text: var(--slate-950);
  --color-text-muted: var(--slate-500);
  --color-border: var(--slate-200);
  --color-border-strong: var(--slate-300);
  --color-ring: var(--slate-400);

  /* Chrome is neutral; primary actions are near-black, as in the references. */
  --color-primary: var(--slate-900);
  --color-primary-hover: var(--slate-800);
  --color-primary-text: var(--slate-50);
  --color-secondary: var(--slate-100);
  --color-secondary-hover: var(--slate-200);

  /* The rail is a distinct surface token so it can diverge from the canvas. */
  /* The sidebar follows the theme (primary) colour, and its text and icons follow
     the primary's own readable text colour, so a dark theme gives a dark sidebar
     with white text and a light one gives dark text. Configuration > Appearance >
     Sidebar overrides all of it with a colour of the administrator's choosing. */
  --color-sidebar: var(--color-primary);
  --color-sidebar-text: var(--color-primary-text);
  --color-sidebar-muted: color-mix(in srgb, var(--color-sidebar-text) 68%, var(--color-sidebar));
  --color-sidebar-hover: color-mix(in srgb, var(--color-sidebar-text) 10%, var(--color-sidebar));
  --color-sidebar-current: color-mix(in srgb, var(--color-sidebar-text) 16%, var(--color-sidebar));
  --color-sidebar-border: color-mix(in srgb, var(--color-sidebar-text) 16%, var(--color-sidebar));

  /* Body links stay blue: conventional for a public service, and independently
     contrast-checked rather than inherited from the neutral chrome.
     Contrast rationale: #93c5fd is 9.84:1 on #111827 and 8.11:1 on #1e293b. */
  --color-link: #2563eb;
  --color-link-hover: #1d4ed8;
  --color-card-accent: var(--color-link);
  --card-tint: 12%;

  --color-danger: #b42318;
  --color-danger-bg: #fef3f2;
  --color-danger-border: #fecdca;
  --color-success: #067647;
  --color-success-bg: #ecfdf3;
  --color-success-border: #abefc6;
  --color-warning: #b54708;
  --color-warning-bg: #fffaeb;
  --color-warning-border: #fedf89;
  --color-info: #175cd3;
  --color-info-bg: #eff8ff;
  --color-info-border: #b2ddff;
  /* What a reviewer has asked for: yellow, to catch the eye on a returned form.
     Configuration > Appearance > Reviewer comments changes it. */
  --color-attention: #854d0e;
  --color-attention-bg: #fef6cf;
  --color-attention-border: #f5d547;

  /* Legacy aliases retained so older markup keeps rendering. */
  /* Chart series. Four hues that stay distinguishable in greyscale and to the
     most common colour vision deficiencies; order is by luminance, not hue. */
  --chart-1: #1e40af;
  --chart-2: #0891b2;
  --chart-3: #b45309;
  --chart-4: #94a3b8;

  --color-brand-900: var(--slate-900);
  --color-brand-800: var(--slate-800);
  --color-brand-700: var(--slate-700);
  --color-brand-100: var(--slate-100);
  --color-accent-600: var(--color-primary);
  --color-accent-100: var(--color-info-bg);

  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-lg: .75rem;
  --radius-pill: 99rem;

  --shadow-xs: 0 1px 2px rgb(2 6 23 / 5%);
  --shadow-sm: 0 1px 3px rgb(2 6 23 / 8%), 0 1px 2px rgb(2 6 23 / 4%);
  --shadow-md: 0 12px 30px rgb(2 6 23 / 12%);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-ring);

  /* ONE typeface for the whole application. This used to be the system stack,
     which meant the public site was set in Hanken Grotesk and the workspace
     an operator spends the day in was set in Segoe UI -- two different
     products wearing the same colours. The register now reads as one thing
     from the landing page to the configuration screen.

     "DDC Uchen" leads every stack in this file and is never used for Latin:
     its @font-face is bounded to U+0F00-0FFF, so the browser rules it out
     before it reaches the file. Naming it first is what makes a Dzongkha
     character render in the Commission's own face wherever it appears --
     including text an operator types into the CMS -- without a single
     element having to opt in. See pb_public/assets/fonts/fonts.css. */
  font-family: "DDC Uchen", "EB Garamond", Garamond, "Palatino Linotype", Palatino, Georgia, serif;
  /* Lining figures: Garamond's default old-style numerals do not line up in a
     table of amounts or dates. */
  font-feature-settings: "lnum", "kern";
  font-variant-numeric: lining-nums;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: var(--slate-950);
    --color-surface: #0b1220;
    --color-surface-raised: #0b1220;
    --color-surface-muted: var(--slate-800);
    --color-surface-inset: var(--slate-950);
    --color-text: var(--slate-50);
    --color-text-muted: var(--slate-400);
    --color-border: #1e293b;
    --color-border-strong: #334155;
    --color-ring: var(--slate-600);
    --color-primary: var(--slate-200);
    --color-primary-hover: #ffffff;
    --color-primary-text: var(--slate-900);
    --color-secondary: var(--slate-800);
    --color-secondary-hover: var(--slate-700);
    --color-sidebar: var(--slate-950);
    --color-sidebar-text: var(--slate-50);
    --color-sidebar-muted: var(--slate-400);
    --color-sidebar-hover: var(--slate-800);
    --color-sidebar-current: var(--slate-800);
    --color-sidebar-border: #1e293b;
    --chart-1: #60a5fa;
    --chart-2: #22d3ee;
    --chart-3: #fbbf24;
    --chart-4: #64748b;
    --color-link: #93c5fd;
    --color-link-hover: #bfdbfe;
    --card-tint: 14%;
    --color-danger: #fda29b;
    --color-danger-bg: #2a1512;
    --color-danger-border: #55201b;
    --color-success: #75e0a7;
    --color-success-bg: #0d2318;
    --color-success-border: #16452c;
    --color-warning: #fec84b;
    --color-warning-bg: #2a1c05;
    --color-warning-border: #55380c;
    --color-info: #84caff;
    --color-info-bg: #0b1e35;
    --color-info-border: #123a63;
    --color-brand-100: var(--slate-800);
    --color-accent-100: var(--color-info-bg);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: var(--slate-950);
  --color-surface: #0b1220;
  --color-surface-raised: #0b1220;
  --color-surface-muted: var(--slate-800);
  --color-surface-inset: var(--slate-950);
  --color-text: var(--slate-50);
  --color-text-muted: var(--slate-400);
  --color-border: #1e293b;
  --color-border-strong: #334155;
  --color-ring: var(--slate-600);
  --color-primary: var(--slate-200);
  --color-primary-hover: #ffffff;
  --color-primary-text: var(--slate-900);
  --color-secondary: var(--slate-800);
  --color-secondary-hover: var(--slate-700);
  --color-sidebar: var(--slate-950);
  --color-sidebar-text: var(--slate-50);
  --color-sidebar-muted: var(--slate-400);
  --color-sidebar-hover: var(--slate-800);
  --color-sidebar-current: var(--slate-800);
  --color-sidebar-border: #1e293b;
  --color-link: #93c5fd;
  --color-link-hover: #bfdbfe;
  --card-tint: 14%;
  --color-danger: #fda29b;
  --color-danger-bg: #2a1512;
  --color-danger-border: #55201b;
  --color-success: #75e0a7;
  --color-success-bg: #0d2318;
  --color-success-border: #16452c;
  --color-warning: #fec84b;
  --color-warning-bg: #2a1c05;
  --color-warning-border: #55380c;
  --color-info: #84caff;
  --color-info-bg: #0b1e35;
  --color-info-border: #123a63;
  --color-brand-100: var(--slate-800);
  --color-accent-100: var(--color-info-bg);
}

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

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 20rem; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-size: 1.0625rem;
}
img, svg { max-width: 100%; }
/* Icons carry their own fill/stroke as presentation attributes so the sprite can
   mix one solid brand mark with stroke icons. Do not set `fill` on `svg` here —
   a CSS rule outranks those attributes and would flood-fill every outline. */
button, input, select, textarea { color: inherit; font: inherit; }
button, a { touch-action: manipulation; }
hr { height: 1px; margin-block: var(--space-5); border: 0; background: var(--color-border); }

h1, h2, h3, h4 { margin-block: 0 var(--space-3); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin-block: 0 var(--space-3); }
p:last-child { margin-block-end: 0; }

a { color: var(--color-link); text-underline-offset: .18em; }
a:hover { color: var(--color-link-hover); }

:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

code, kbd, samp { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .8125em; }
code { padding: .1rem .3rem; background: var(--color-surface-muted); border-radius: var(--radius-sm); word-break: break-all; }

.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;
}
.skip-link {
  position: fixed; z-index: 100; top: var(--space-2); left: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.container { width: min(100% - 2rem, 75rem); margin-inline: auto; }

/* Layout utilities used across pages, so each page does not invent its own. */
/* One column that never grows past its container: an implicit grid column is
   sized to its widest child, so a wide table in a narrow column (a pay card's
   payment history) stretched the whole page sideways. With minmax(0, 1fr) the
   table scrolls inside its .table-shell instead. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.stack-tight { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block: 8px; }
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid-4 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.split { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
/* Where the right-hand column is an authoring form rather than a summary, the
   proportions invert: a body textarea in a third of the width is unusable. */
.split-authoring { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
/* The inverse of split-authoring, for a screen whose LIST is the main thing and
   whose forms are the sidebar. Authoring a page is the opposite case: there the
   editor is the work and the list of pages is the index. */
.split-listing { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
/* A side note that stays in view while the list beside it is scrolled. Only
   when it sits beside the list: stacked on a phone it is an ordinary card. */
@media (min-width: 64.01rem) {
  .card-sticky { position: sticky; top: 6rem; max-height: calc(100dvh - 7.5rem); overflow-y: auto; }
}
.split-note { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
/* Same weighting, form first. The media library puts the upload form on the
   left because uploading is the first thing done on an empty library. */
.split-listing-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.text-muted { color: var(--color-text-muted); }
.text-right { text-align: end; }
.text-numeric { font-variant-numeric: tabular-nums; }
.eyebrow { margin-block: 0 var(--space-2); color: var(--color-text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lede { color: var(--color-text-muted); font-size: 1rem; }
.metric-context, .caption-summary, .field-help { color: var(--color-text-muted); }

/* ------------------------------------------------------------- buttons --- */

.button, .icon-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.25rem; padding: .45rem .875rem;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: .875rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.button-lg { min-height: 2.75rem; padding: .65rem 1.15rem; font-size: .9375rem; }
.button-sm { min-height: 1.875rem; padding: .3rem .6rem; font-size: .8125rem; }
.button-primary { background: var(--color-primary); color: var(--color-primary-text); }
.button-primary:hover { background: var(--color-primary-hover); color: var(--color-primary-text); }
.button-secondary { background: var(--color-surface-raised); color: var(--color-text); border-color: var(--color-border); box-shadow: var(--shadow-xs); }
.button-secondary:hover { background: var(--color-surface-muted); color: var(--color-text); }
.button-quiet { background: transparent; color: var(--color-text); }
.button-quiet:hover { background: var(--color-surface-muted); color: var(--color-text); }
.button-danger { background: var(--color-danger); color: #fff; }
.button-danger:hover { filter: brightness(1.08); color: #fff; }
.button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* Mid-submit. The dimming above already says "not now"; the spinner is what
   distinguishes "working" from "unavailable", which is the difference between
   waiting and pressing it again. The icon is hidden rather than removed so the
   button keeps its width and the row does not jump. */
.button[data-pending] { cursor: progress; }
.button[data-pending] svg { display: none; }
.button[data-pending]::before {
  content: ""; width: .85em; height: .85em; flex: none;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: button-pending .7s linear infinite;
}
@keyframes button-pending { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .button[data-pending]::before { animation-duration: 0s; border-top-color: currentColor; opacity: .5; }
}
.icon-button {
  width: 2.25rem; padding: 0; flex: none;
  background: transparent; color: var(--color-text-muted); border-color: transparent;
}
.icon-button:hover { background: var(--color-surface-muted); color: var(--color-text); }
.icon-button svg, .button svg { width: 1rem; height: 1rem; flex: none; }
.nav-list svg { width: 1rem; height: 1rem; flex: none; }
.field-error svg { width: 1rem; height: 1rem; flex: none; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }

/* --------------------------------------------------------------- forms --- */

label, legend { display: block; font-size: .875rem; font-weight: 600; }
fieldset { margin: 0; padding: 0; border: 0; }
fieldset legend { margin-block-end: var(--space-2); }
/* `align-content: start` stops an input from stretching to match a taller
   neighbour whose help text made its cell longer. */
.field { display: grid; align-content: start; gap: var(--space-2); min-width: min(100%, 14rem); }
.field-help { font-size: .8125rem; }

/* A word count sits under the box it counts, and turns only when the limit is
   passed — a counter that is red from the first word teaches nothing. */
.word-limit { font-variant-numeric: tabular-nums; text-align: end; margin-block-start: calc(var(--space-2) * -0.5); }
/* Whether the answers have reached the server, beside Save answers. */
.autosave-status { margin: 0; align-self: center; }
.word-limit-over, .field-note.word-limit-over { color: var(--color-danger-text, var(--color-danger)); font-weight: 600; }

/* An answer the Authority did not return for correction. Shown as it stands,
   in the same place the input would have been, so the form still reads as one
   document rather than a page with holes in it. */
.locked-value {
  margin: 0; padding: .4rem .65rem;
  min-height: 2.25rem;
  background: var(--color-surface-sunken, var(--color-surface));
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text-muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

input, select, textarea {
  width: 100%; min-height: 2.25rem;
  padding: .4rem .65rem; font-size: .875rem; line-height: 1.3;
  background: var(--color-surface-raised); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
textarea { min-height: 6rem; padding-block: .55rem; resize: vertical; }
select { appearance: none; padding-inline-end: 2rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1rem top 55%, right .7rem top 55%; background-size: .3rem .3rem, .3rem .3rem; background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); }
input[type="checkbox"], input[type="radio"] { width: 1rem; min-height: 1rem; height: 1rem; accent-color: var(--color-primary); box-shadow: none; }
input[type="file"] { padding: .35rem; }
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { padding-block: .25rem; }

/* What each role may do: one bordered list per group, a row per action with the
   name and its help on the left and a single compact button on the right. */
.perm-group { display: grid; gap: var(--space-2); }
.perm-group h3 { margin: var(--space-3) 0 0; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.perm-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); overflow: hidden; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: .65rem .9rem; }
.perm-row + .perm-row { border-top: 1px solid var(--color-border); }
.perm-main { min-width: 0; flex: 1 1 auto; }
.perm-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.perm-help { margin: .15rem 0 0; color: var(--color-text-muted); font-size: .8125rem; }
.perm-action { flex: none; }
.perm-action form { margin: 0; }
@media (max-width: 36rem) { .perm-row { flex-direction: column; align-items: stretch; } .perm-action .button { width: 100%; } }
[aria-invalid="true"] { border-color: var(--color-danger); }
.form-page { max-width: 34rem; }
.form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-top: 1px solid var(--color-border); }
.inline-form { display: inline; }

.field-error { display: flex; align-items: center; gap: var(--space-2); margin-block: var(--space-1); color: var(--color-danger); font-size: .8125rem; font-weight: 600; }
.error-summary {
  position: relative;
  margin-block: var(--space-4); padding: var(--space-4); padding-inline-end: var(--space-6);
  background: var(--color-danger-bg); color: var(--color-text);
  border: 1px solid var(--color-danger-border); border-inline-start: .25rem solid var(--color-danger);
  border-radius: var(--radius-md);
}
.error-summary-close {
  position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; padding: 0;
  color: var(--color-text-muted); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.error-summary-close:hover { color: var(--color-text); background: var(--color-danger-border); }
.error-summary-close svg { width: 1rem; height: 1rem; }
.error-summary h2 { margin-block-start: 0; font-size: 1rem; color: var(--color-danger); }
.declaration label { display: flex; align-items: start; gap: var(--space-3); font-weight: 500; }
.declaration input { flex: none; margin-block-start: .2rem; }

/* ------------------------------------------------------------ surfaces --- */

.card, .metric-card, .empty-state, .error-page, .filter-bar, .declaration, .panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
/* A faint wash of the accent colour, so a page of cards is not a page of grey.
   --card-tint is the strength (Configuration > Appearance); 0% leaves a card
   exactly as it was. The tone variants below set their own background and win. */
.card, .panel, .metric-card {
  background: color-mix(in srgb, var(--color-card-accent) var(--card-tint), var(--color-surface-raised));
  border-color: color-mix(in srgb, var(--color-card-accent) calc(var(--card-tint) * 3), var(--color-border));
}
.card, .panel { padding: var(--space-5); }
.metric-card, .empty-state, .error-page, .declaration { padding: var(--space-5); }
.card-header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); }
.card-header h2, .card-header h3 { margin: 0; }
.card-header p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: .875rem; }
/* In the CSO portal a card is bluish unless it carries a warning of its own (amber
   or red, via data-tone). The blue is the Notice colour (Configuration >
   Appearance), so it follows the theme. */
body[data-shell="cso"] .metric-card:not([data-tone]) { background: var(--color-info-bg); border-color: var(--color-info-border); }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-header { padding: var(--space-5) var(--space-5) 0; margin-block-end: var(--space-4); }
.card-footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-surface-inset); font-size: .875rem; }

/* The theme button shows what a click will switch TO: a sun while the page is
   dark, a moon while it is light. With no choice stored the operating system's
   setting decides, which is what the media query below follows. */
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: inline; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: inline; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}

/* Rows are fixed so a two-line value or a missing context line cannot knock the
   card out of step with the others beside it. */
.metric-card { display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-2); }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.metric-label { margin: 0; color: var(--color-text-muted); font-size: .8125rem; font-weight: 600; }
.metric-head svg { width: 1rem; height: 1rem; color: var(--color-text-muted); }
.metric-value { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; font-variant-numeric: tabular-nums; }
.metric-value:empty::before { content: "—"; color: var(--color-text-muted); }
.metric-context { margin: 0; font-size: .75rem; }
.metric-card > .metric-context:last-child { align-self: end; }
.metric-card a { text-decoration: none; }
/* A figure that is itself a warning. Used sparingly: an accruing penalty is
   the case it exists for. */
.metric-card[data-tone="danger"] { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.metric-card[data-tone="danger"] .metric-value { color: var(--color-danger); }
.metric-card[data-tone="danger"] .metric-head svg { color: var(--color-danger); }
.metric-card[data-tone="warning"] { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.metric-card[data-tone="warning"] .metric-value { color: var(--color-warning); }
.metric-card[data-tone="warning"] .metric-head svg { color: var(--color-warning); }
.metric-card[data-tone="success"] { border-color: var(--color-success-border); background: var(--color-success-bg); }
.metric-card[data-tone="success"] .metric-value { color: var(--color-success); }
.metric-card[data-tone="success"] .metric-head svg { color: var(--color-success); }
.metric-card[data-tone="info"] { border-color: var(--color-info-border); background: var(--color-info-bg); }

.definition-list { display: grid; gap: 0; margin: 0; }
.definition-list > div { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--color-border); }
.definition-list > div:first-child { border-top: 0; padding-block-start: 0; }
.definition-list dt { color: var(--color-text-muted); font-size: .8125rem; font-weight: 600; }
.definition-list dd { margin: 0; }

.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: .5rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--color-border); }
.timeline li:first-child { border-top: 0; }
.timeline-marker { width: .5rem; height: .5rem; margin-block-start: .45rem; border-radius: 50%; background: var(--color-border-strong); }
.timeline-meta { color: var(--color-text-muted); font-size: .8125rem; }

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

.table-shell {
  max-width: 100%; overflow-x: auto;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
caption { padding: var(--space-4) var(--space-5); text-align: start; font-weight: 700; }
.caption-summary { display: block; margin-block-start: var(--space-1); font-size: .8125rem; font-weight: 400; }
th, td { padding: .7rem 1rem; text-align: start; vertical-align: middle; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--color-surface-inset); color: var(--color-text-muted);
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
tbody tr { border-top: 1px solid var(--color-border); }
tbody tr:first-child { border-top: 0; }
tbody tr:hover { background: var(--color-surface-inset); }
td .button { margin-block: -.15rem; }
.table-numeric { text-align: end; font-variant-numeric: tabular-nums; }

.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-block: var(--space-4); font-size: .875rem; }
.pagination-actions { display: flex; align-items: center; gap: var(--space-2); }
.pagination a, .pagination span { display: inline-flex; align-items: center; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-block-end: var(--space-4); padding: var(--space-4); }
.filter-bar .field { gap: var(--space-1); }
.filter-bar label { font-size: .75rem; color: var(--color-text-muted); }

/* -------------------------------------------------------------- status --- */

.status-badge, .badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .15rem .55rem;
  background: var(--color-surface-muted); color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.status-marker { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: none; }
.status-success, .badge-success { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); }
.status-danger, .badge-danger { color: var(--color-danger); background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.status-warning, .badge-warning { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.status-info, .badge-info { color: var(--color-info); background: var(--color-info-bg); border-color: var(--color-info-border); }
.status-block { max-width: 24rem; }
.status-next { margin-block: var(--space-2) 0; color: var(--color-text-muted); font-size: .8125rem; }

.empty-state { display: grid; justify-items: center; gap: var(--space-2); padding-block: var(--space-7); text-align: center; }
.empty-state > svg { width: 2rem; height: 2rem; color: var(--color-text-muted); }
.empty-state h2 { margin: 0; font-size: 1rem; }
.empty-state p { max-width: 32rem; color: var(--color-text-muted); }

/* Sign out, beside the name of whoever is signed in. It used to exist only on
   /account, so leaving meant navigating somewhere first. */
/* The account menu, on the name at the foot of the sidebar.
   It opens UPWARD because it sits at the bottom of the column, and it is
   positioned rather than in flow so that opening it does not push the
   navigation above it. */
.account-menu { position: relative; }
.account-menu > summary { list-style: none; cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::marker { content: ""; }
.account-menu[open] > summary { background: var(--color-sidebar-hover); }
.account-menu-caret { width: .85rem; height: .85rem; flex: none; margin-inline-start: auto; color: var(--color-sidebar-muted); transition: transform .15s ease; }
.account-menu[open] .account-menu-caret { transform: rotate(180deg); }

.account-menu-panel {
  position: absolute; z-index: 30; inset-inline: 0; bottom: calc(100% + var(--space-2));
  display: grid; gap: 1px; padding: var(--space-1);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 8px 24px rgb(0 0 0 / .18));
}
.account-menu-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text); background: none; border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: .8125rem; text-align: start; text-decoration: none; cursor: pointer;
}
.account-menu-item:hover, .account-menu-item:focus-visible { background: var(--color-surface-muted); }
.account-menu-item svg { width: 1rem; height: 1rem; flex: none; color: var(--color-text-muted); }
.account-menu-signout { color: var(--color-danger, #b3261e); }
.account-menu-signout svg { color: currentColor; }

/* Processing history is a log, not a section of the page.
   A long-running file accumulates dozens of entries and the panel grew with
   them, dragging the whole column down so the decision and the assignment sat
   above a screenful of timestamps. It scrolls in place now, and is set at the
   size the rest of the application uses for metadata rather than for prose. */
.timeline-scroll { max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; }
.timeline-scroll .timeline { font-size: .8125rem; }
.timeline-scroll .timeline > li { padding-block: var(--space-2); }

/* The flash banner was replaced by the toast region above. */
.flash-message {
  margin: 0; padding: var(--space-3) var(--space-4);
  background: var(--color-info-bg); color: var(--color-text);
  border: 1px solid var(--color-info-border); border-inline-start: .25rem solid var(--color-info);
  border-radius: var(--radius-md); font-size: .875rem;
}
.contextual-help {
  max-width: 48rem; margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-info-bg); color: var(--color-text);
  border: 1px solid var(--color-info-border); border-inline-start: .25rem solid var(--color-info);
  border-radius: var(--radius-md); font-size: .875rem;
}
.contextual-help p { margin-block: var(--space-1) 0; }
.submit-bar {
  position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-block-start: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  box-shadow: 0 -4px 16px rgb(0 0 0 / 10%);
}
.submit-bar-note { margin: 0; font-size: .8125rem; color: var(--color-text-muted); flex: 1 1 18rem; }

/* The decision buttons on a file, each with its own colour so the choice is read
   at a glance and none of them looks like a link. Fixed shades, dark enough for
   white text in both light and dark mode. */
.button[data-decision] { color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 18%); }
.button[data-decision]:hover { color: #fff; filter: brightness(1.12); }
.button[data-decision="take_up"] { background: #1d4ed8; }
.button[data-decision="refer_legal"], .button[data-decision="return_from_legal"] { background: #6d28d9; }
.button[data-decision="return_for_comments"], .button[data-decision="return_to_reviewer"] { background: #b45309; }
.button[data-decision="forward_to_authority"] { background: #0369a1; }
.button[data-decision="approve"], .button[data-decision="authority_approve"] { background: #15803d; }
.button[data-decision="mark_inadequate"], .button[data-decision="authority_deny"] { background: #b91c1c; }
/* A reviewer's comment on a returned form: yellow, so it is the first thing seen. */
.contextual-help-attention, .review-note {
  background: var(--color-attention-bg); color: var(--color-text);
  border-color: var(--color-attention-border); border-inline-start-color: var(--color-attention);
}
.review-note { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-attention-border); border-inline-start: .25rem solid var(--color-attention); border-radius: var(--radius-md); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --color-attention: #facc15; --color-attention-bg: #2b2305; --color-attention-border: #7a5c0a; }
}
:root[data-theme="dark"] { --color-attention: #facc15; --color-attention-bg: #2b2305; --color-attention-border: #7a5c0a; }
.noscript-note { margin: 0; padding: var(--space-2) var(--space-4); background: var(--color-surface-muted); color: var(--color-text-muted); text-align: center; font-size: .8125rem; }

/* ------------------------------------------------------- public chrome --- */

.brand { min-width: 0; display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.brand-mark { width: 2.25rem; height: 2.25rem; flex: none; padding: .4rem; background: var(--color-primary); color: var(--color-primary-text); border-radius: var(--radius-md); }
/* The sidebar brand is an uploaded emblem rather than a glyph now. A seal
   drawn in its own colours is not legible on the brand plate, so it gets the
   white ground it is printed on everywhere else. */
img.brand-mark { padding: .25rem; background: #fff; object-fit: contain; }
.brand span { display: grid; min-width: 0; }
.brand strong { font-size: .9375rem; letter-spacing: -.01em; }
.brand small { color: var(--color-text-muted); font-size: .75rem; }
.nav-list, .breadcrumbs ol, .page-tabs ul { list-style: none; margin: 0; padding: 0; }
.public-main { min-height: 60vh; padding-block: var(--space-6) var(--space-7); }
/* The landing page is built from full-bleed bands that own their own spacing. */
.public-main[data-public-section="home"] { padding-block: 0; }

/* -------------------------------------------------------- portal shell --- */

.portal-shell { min-height: 100vh; display: grid; grid-template-columns: 16rem minmax(0, 1fr); background: var(--color-canvas); }
.portal-sidebar { background: var(--color-sidebar); color: var(--color-sidebar-text); border-inline-end: 1px solid var(--color-sidebar-border); }
/* The navigation is exactly one screen tall and scrolls inside itself. With only
   min-height it grew to its contents, and a menu longer than the screen (the
   staff menu on a laptop, any menu on a phone) had items below the edge that no
   scrolling could reach (26 Oct 2026). */
.sidebar-nav { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.sidebar-nav .brand { padding: var(--space-4) var(--space-4) var(--space-3); color: var(--color-sidebar-text); }
.sidebar-nav .brand small { color: var(--color-sidebar-muted); }
.sidebar-navigation-group { padding: var(--space-2) var(--space-3) var(--space-5); }
.sidebar-section-label { margin: var(--space-3) var(--space-3) var(--space-1); color: var(--color-sidebar-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; }
.nav-list { display: grid; gap: .125rem; }
.nav-list a {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 2.125rem; padding: .4rem .6rem;
  color: var(--color-sidebar-text); border-radius: var(--radius-md);
  font-size: .875rem; font-weight: 500; text-decoration: none;
}
.nav-list a:hover { background: var(--color-sidebar-hover); color: var(--color-sidebar-text); }
.nav-list a.current { background: var(--color-sidebar-current); color: var(--color-sidebar-text); font-weight: 600; }
.nav-list a svg { color: var(--color-sidebar-muted); }
.nav-list a.current svg { color: var(--color-sidebar-text); }
.nav-count { margin-inline-start: auto; padding: 0 .35rem; min-width: 1.25rem; background: var(--color-primary); color: var(--color-primary-text); border-radius: var(--radius-pill); font-size: .6875rem; font-weight: 700; text-align: center; }
.sidebar-footer { margin-block-start: auto; padding: var(--space-3); border-top: 1px solid var(--color-sidebar-border); }
.sidebar-identity { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); color: var(--color-sidebar-text); text-decoration: none; }
.sidebar-identity > span:nth-of-type(2) { flex: 1 1 auto; }
.sidebar-identity:hover { background: var(--color-sidebar-hover); color: var(--color-sidebar-text); }
.sidebar-identity span { display: grid; min-width: 0; }
.sidebar-identity strong { font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-identity small { color: var(--color-sidebar-muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: none; background: var(--color-surface-muted); color: var(--color-text); border-radius: var(--radius-pill); font-size: .75rem; font-weight: 700; }

.portal-body { min-width: 0; display: flex; flex-direction: column; }
.portal-topbar {
  position: sticky; z-index: 20; top: 0;
  min-height: 3.75rem; display: flex; align-items: center; gap: var(--space-3);
  padding-inline: var(--space-5);
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
}
.portal-heading { min-width: 0; }
.portal-name, .portal-context { margin: 0; }
.portal-name { overflow: hidden; font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.portal-context { color: var(--color-text-muted); font-size: .75rem; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
.topbar-search { position: relative; margin-inline-start: auto; width: min(20rem, 32vw); }
.topbar-search input { min-height: 2.125rem; padding-inline-start: 2rem; background: var(--color-surface-inset); font-size: .875rem; }
.topbar-search svg { position: absolute; inset-inline-start: .6rem; top: 50%; width: .9rem; height: .9rem; margin-block-start: -.45rem; color: var(--color-text-muted); pointer-events: none; }
.topbar-search + .topbar-actions { margin-inline-start: 0; }
.sidebar-toggle, .sidebar-close { display: none; }

.breadcrumbs { padding: var(--space-3) var(--space-5) 0; color: var(--color-text-muted); font-size: .8125rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-text); text-decoration: underline; }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--color-border-strong); }
.portal-main { flex: 1; width: 100%; max-width: 96rem; padding: var(--space-5); }
.utility-main { min-height: 60vh; padding-block: var(--space-6); }

/* -------------------------------------------------------- page headers --- */

/* A page header inside a .stack already gets the stack gap below it; its own
   bottom margin on top of that is what produced the oversized gap between a
   title and the first card. The margin stays for headers used on their own. */
.page-header { margin-block-end: var(--space-5); }
.stack > .page-header, .stack > * > .page-header { margin-block-end: 0; }
.page-header .breadcrumbs { padding: 0 0 var(--space-2); }
.page-header h1 { margin: 0; font-size: 1.5rem; }
/* The status badge belongs to the title, not to the far side of the page. */
.page-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.page-header-row { display: flex; align-items: start; justify-content: space-between; gap: var(--space-5); }
.page-header-row > div:first-child { min-width: 0; }
.page-header-row .lede { margin-block-start: var(--space-1); font-size: .875rem; }
.page-header-row .status-next { max-width: 60ch; }
.page-header-side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: none; }
.page-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* Segmented route tabs, as in the reference dashboards. */
.page-tabs { max-width: 100%; margin-block-start: var(--space-4); overflow-x: auto; }
.page-tabs ul { display: inline-flex; min-width: max-content; gap: var(--space-1); padding: .2rem; background: var(--color-surface-muted); border-radius: var(--radius-md); }
.page-tabs a { display: block; padding: .3rem .7rem; color: var(--color-text-muted); border-radius: var(--radius-sm); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.page-tabs a:hover { color: var(--color-text); }
.page-tabs a[aria-current="page"] { background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-xs); }

.section-progress { display: flex; justify-content: space-between; gap: var(--space-4); max-width: 30rem; margin-block: var(--space-3) 0; padding: var(--space-2) var(--space-3); background: var(--color-surface-muted); border-radius: var(--radius-md); font-size: .8125rem; }
.progress-track { height: .375rem; margin-block-start: var(--space-2); background: var(--color-surface-muted); border-radius: var(--radius-pill); overflow: hidden; }
.progress-value { height: 100%; background: var(--color-primary); }
.resume-link { display: inline-block; margin-block-start: var(--space-2); font-size: .875rem; font-weight: 600; }

.error-page { max-width: 42rem; margin-block: var(--space-6); }
.support-reference code { overflow-wrap: anywhere; }

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

@media (max-width: 64rem) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 50rem) {
  .public-header-inner, .footer-grid { align-items: flex-start; flex-direction: column; padding-block: var(--space-4); }
  .public-nav { flex-wrap: wrap; margin-inline-start: 0; }
  .portal-shell { display: block; }
  .portal-sidebar {
    position: fixed; z-index: 50; inset: 0 auto 0 0;
    width: min(16rem, 88vw); transform: none; transition: transform .18s ease;
    box-shadow: var(--shadow-md);
  }
  /* In the drawer the nav fills it and scrolls; nothing sticks inside a fixed
     panel. */
  .portal-sidebar .sidebar-nav { position: static; height: 100%; }
  .js .portal-sidebar:not([data-open="true"]) { transform: translateX(-105%); }
  .sidebar-toggle { display: inline-flex; }
  .sidebar-close { display: inline-flex; align-self: end; margin: var(--space-3) var(--space-3) 0; }
  .portal-main { padding: var(--space-4); }
  .portal-topbar, .breadcrumbs { padding-inline: var(--space-4); }
  .topbar-search { display: none; }
  .topbar-actions { margin-inline-start: auto; }
  .topbar-actions .button span, .portal-context { display: none; }
  .page-header-row { display: grid; }
  .page-header-side { align-items: start; }
  .page-header-actions { justify-content: flex-start; }
  .definition-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

@media (max-width: 22rem) {
  .container { width: min(100% - 1rem, 75rem); }
  .public-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .filter-bar, .filter-bar .field, .filter-bar .button { width: 100%; }
  .portal-main { padding-inline: var(--space-3); }
  .topbar-actions { gap: var(--space-1); }
  .page-tabs ul { gap: 0; }
  th, td { padding-inline: .6rem; }
}

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

/* ------------------------------------------------------ link treatments --- */

/* Prose links keep their underline; links that act as row or card titles do
   not, or a dense table turns into a wall of rules. Hover restores it. */
.table-shell a, .metric-card a, .card-header a, .sidebar-identity, .breadcrumbs a,
h1 a, h2 a, h3 a { text-decoration: none; }
.table-shell a:hover, .metric-card a:hover, .card-header a:hover,
h1 a:hover, h2 a:hover, h3 a:hover { text-decoration: underline; }

/* Metric labels wrap to two lines on long names; a fixed minimum keeps the
   numbers on one baseline across a row. */
.metric-head { min-height: 2.5rem; align-items: start; }

/* -------------------------------------------------------- auth screens --- */

.auth-page { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: start; padding-block: var(--space-6); }
.auth-card { padding: var(--space-6); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.auth-card h1 { margin-block-end: var(--space-2); }
.auth-card form { margin-block-start: var(--space-5); }
.auth-aside { max-width: 34rem; padding-block-start: var(--space-2); }
.auth-aside h2 { margin-block-start: var(--space-5); font-size: 1rem; }
.auth-aside h2:first-child { margin-block-start: 0; }

@media (max-width: 56rem) {
  .auth-page { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------- notification items --- */

.notification-unread { border-inline-start: .25rem solid var(--color-primary); }
.notification-item .card-header { margin-block-end: var(--space-2); }

/* ------------------------------------------------------- checkbox grids --- */

.checkbox-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.checkbox-row { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.checkbox-row input { flex: none; }

/* ----------------------------------------------------- application flow --- */

/* The action sits on its own row at the foot of the card, so a long title or a
   long description cannot push it out of line with its neighbours. `min-width:0`
   is what stops a grid item from being sized by its longest word and spilling
   over the card beside it. */
.start-card { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-2); min-width: 0; padding: var(--space-4); background: var(--color-surface-inset); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.start-card p { min-width: 0; font-size: .8125rem; overflow-wrap: anywhere; }
.start-card-head { display: flex; align-items: start; gap: var(--space-2); min-width: 0; }
.start-card-head svg { width: 1.125rem; height: 1.125rem; flex: none; margin-block-start: .1rem; color: var(--color-text-muted); }
.start-card-head strong { min-width: 0; overflow-wrap: anywhere; }
.start-card-action { align-self: end; margin-block-start: var(--space-2); }
.start-card-action .button { width: 100%; justify-content: center; }

.requirement-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.requirement-list > li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.requirement-list > li:first-child { border-top: 0; padding-block-start: 0; }
.requirement-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-block-start: .1rem; border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text-muted); }
.requirement-mark svg { width: .75rem; height: .75rem; }
.requirement-done .requirement-mark { background: var(--color-success-bg); color: var(--color-success); }
.requirement-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 600; }

/* A prompt and its action on one row. The action is a button because it is the
   point of the row; an underlined link inside a sentence reads as a footnote. */
.action-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.action-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.action-list > li:first-child { border-top: 0; padding-block-start: 0; }
.action-list > li > div { min-width: min(100%, 18rem); flex: 1; }
.action-list p { margin: var(--space-1) 0 0; font-size: .8125rem; }
.action-list .button { flex: none; }

/* Forms: a labelled group of fields on a card, with the actions on their own
   row at the foot so the primary action is never flush against the last field. */
.form-card { max-width: 46rem; }
.form-section { display: grid; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--color-border); }
.form-section:first-of-type { padding-block-start: 0; border-top: 0; }
.form-section-head { display: grid; gap: var(--space-1); }
.form-section-head h2, .form-section-head h3 { margin: 0; font-size: .9375rem; }
.form-section-head p { margin: 0; color: var(--color-text-muted); font-size: .8125rem; }
.field-wide { grid-column: 1 / -1; }

/* Downloads read as downloads: an icon, the name of the dataset, and a line
   saying what is in it. A row of identical small grey buttons did not. */
.download-list { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.download-list a { display: flex; align-items: start; gap: var(--space-3); height: 100%; padding: var(--space-3) var(--space-4); background: var(--color-surface-inset); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
.download-list a:hover { background: var(--color-surface-muted); color: var(--color-text); border-color: var(--color-border-strong); }
.download-list svg { width: 1.125rem; height: 1.125rem; flex: none; margin-block-start: .15rem; color: var(--color-text-muted); }
.download-list span { display: grid; gap: .15rem; min-width: 0; font-size: .75rem; color: var(--color-text-muted); }
.download-list strong { font-size: .875rem; color: var(--color-text); }

.table-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.table-actions form { display: inline-flex; align-items: center; gap: var(--space-2); }
.table-actions input[type="text"], .table-actions input:not([type]) { min-height: 1.875rem; max-width: 11rem; font-size: .8125rem; }

/* Website image slots: the current picture, then the controls that change it. */
.image-slot-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.charge-table td:last-child, .charge-table th:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.charge-total { font-weight: 700; }
.charge-total td { border-top: 2px solid var(--color-border-strong); }

/* ------------------------------------------------------------- bar chart --- */

/* Charts are drawn in CSS. The engine forbids external scripts and the app must
   run offline, so a charting library is not an option — and for a distribution
   a labelled bar with its own number beside it reads better than a canvas. */
.bar-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bar-list li { display: grid; grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr) minmax(4.5rem, auto); gap: var(--space-3); align-items: center; font-size: .8125rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: .625rem; background: var(--color-surface-muted); border-radius: var(--radius-pill); overflow: hidden; }
.bar-fill { display: block; height: 100%; min-width: .125rem; background: var(--color-primary); border-radius: var(--radius-pill); }
.bar-value { text-align: end; font-variant-numeric: tabular-nums; }

@media (max-width: 40rem) {
  .bar-list li { grid-template-columns: minmax(0, 1fr) minmax(4rem, auto); }
  .bar-track { grid-column: 1 / -1; order: 3; }
}


/* --------------------------------------------------------- content editor --- */

.editor-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-block-end: var(--space-2); padding: var(--space-1); background: var(--color-surface-inset); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.editor-toolbar .button { min-height: 1.75rem; padding: 0 .5rem; font-size: .75rem; }
[data-editor-body] { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.6; }

/* The position controls. Up and down are still in the rank column beside the
   row, because one place at a time is the common case; these are for the move
   that up and down make tedious. */
.record-move {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-inset); border-radius: var(--radius-sm);
}
.record-move-at { margin: 0; margin-inline-end: auto; font-size: .75rem; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.record-move-to { display: flex; align-items: center; gap: var(--space-2); }
.record-move-to label { font-size: .75rem; color: var(--color-text-muted); }
.record-move-to input { width: 4.5rem; min-height: 1.875rem; font-size: .8125rem; }

/* A group heading sits in the flow, plain. It has no background of its own: a
   plate behind it drew a second box inside the card around it. */
.record-group h3 { padding-block: var(--space-2); }

.media-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.media-grid li { display: grid; gap: var(--space-2); }
.media-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-surface-inset); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.media-grid strong { font-size: .8125rem; }
.media-snippet { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .6875rem; }
.media-grid > li { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); align-content: start; }
.media-grid .media-edit { display: grid; gap: var(--space-2); }
.media-grid .field { gap: var(--space-1); }
.media-usage { margin: 0; font-size: .75rem; color: var(--color-text-muted); }
.media-usage-active { color: var(--color-info); }

.media-more > summary { cursor: pointer; list-style: none; padding-block: var(--space-1); }
.media-more > summary::-webkit-details-marker { display: none; }
.media-more > summary:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.media-more-body { display: grid; gap: var(--space-3); padding-block-start: var(--space-2); margin-block-start: var(--space-2); border-top: 1px solid var(--color-border); }

/* A row that is a link rather than a disclosure -- the request forms list,
   where opening one means going to its own screen. */
.record-body-static > .record-summary { cursor: default; }
.record-body-static > .record-summary:hover { background: none; }

/* The add form at the foot of a list, laid out along the same line as the rows
   above it so a list and the way to extend it read as one control. */
.record-add {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3);
  margin-block-start: var(--space-3); padding: var(--space-3);
  background: var(--color-surface-inset); border-radius: var(--radius-md);
}
.record-add .field { flex: 1 1 11rem; min-width: 0; gap: var(--space-1); }
.record-add .field label { font-size: .75rem; color: var(--color-text-muted); }
.record-add .checkbox-row { font-size: .8125rem; }

.field-group { margin: 0 0 var(--space-4); padding: 0; border: 0; }
.field-group legend { padding: 0; margin-block-end: var(--space-2); font-size: .8125rem; font-weight: 600; }

/* JSON. Monospace, and it wraps rather than scrolling sideways, because the
   point of showing it is that it can be read and selected. */
.code-area {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .75rem; line-height: 1.55; white-space: pre; overflow: auto; tab-size: 2;
}

/* ---------------------------------------------------------- stage path --- */

/* The review path on an application, because the stages are configuration: a
   request form may have two steps or five, and the reviewer used to see only
   the name of the one they were standing on. Each step also says what it does
   -- recommends, or decides -- since that word is the authorization action the
   reviewer's own decision takes. */
.stage-path {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2);
  margin: 0 0 var(--space-4); padding: 0; list-style: none;
  counter-reset: stage;
}
.stage-step {
  flex: 1 1 8rem; min-width: 0;
  display: grid; gap: 2px; align-content: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-inset);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--color-border-strong);
}
.stage-step-name { font-size: .8125rem; font-weight: 600; }
.stage-step-role { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }

/* Done, here, and still to come read as three different things at a glance. */
.stage-step[data-done="true"] { border-inline-start-color: var(--color-success); }
.stage-step[data-done="true"] .stage-step-name { color: var(--color-text-muted); }
.stage-step[data-current="true"] {
  background: var(--color-info-bg); border-color: var(--color-info-border);
  border-inline-start-color: var(--color-info);
}
.stage-step[data-current="true"] .stage-step-name { color: var(--color-text); }
.stage-step[data-current="true"] .stage-step-role { color: var(--color-info); }

@media (max-width: 40rem) {
  .stage-path { flex-direction: column; }
  .stage-step { flex: 1 1 auto; }
}

/* ------------------------------------------------------------ dropzone --- */

/* Built by app.js around every file input on the site, so an upload can be
   dragged, pasted or clicked wherever one is asked for. None of this exists
   without scripting: the plain input is then the whole control, unchanged. */

.dropzone {
  display: grid; gap: var(--space-2); justify-items: center;
  padding: var(--space-4); text-align: center;
  background: var(--color-surface-inset);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
  transition: background-color .16s ease, border-color .16s ease;
}
.dropzone:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.dropzone[data-over="true"] { background: var(--color-info-bg); border-color: var(--color-info); border-style: solid; }
.dropzone[data-rejected="true"] { background: var(--color-danger-bg); border-color: var(--color-danger); }
.dropzone[data-rejected="true"] .dropzone-prompt strong::after {
  content: " — that kind of file is not accepted here"; font-weight: 400; color: var(--color-danger);
}

.dropzone-prompt { display: grid; gap: 2px; margin: 0; font-size: .8125rem; color: var(--color-text-muted); }
.dropzone-prompt strong { font-size: .875rem; color: var(--color-text); }
/* Once something is attached the invitation is redundant and the file itself
   is the thing worth reading. */
.dropzone[data-filled="true"] .dropzone-prompt { display: none; }

.dropzone input[type="file"] { max-width: 100%; font-size: .8125rem; }

.dropzone-files { display: grid; gap: var(--space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.dropzone-files:empty { display: none; }
.dropzone-files li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center;
  padding: var(--space-2); text-align: start;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: .8125rem;
}
.dropzone-files li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-files small { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.dropzone-files img { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface-inset); }
/* A file list of one has nothing to line up with, so it does not need the grid
   columns to be equal across rows. */
.dropzone-files li:only-child img { width: 3.5rem; height: 3.5rem; }

.media-dialog-search { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5) 0; }
.media-dialog-search label { font-size: .8125rem; font-weight: 600; }
.media-dialog-search p { margin: 0; min-height: 1.2em; }
.media-dialog-head > div { display: grid; gap: var(--space-1); }
.media-dialog-head .field-help { max-width: 46ch; }

/* .filter-bar itself is defined with the other form furniture above; these two
   only give it room to breathe when it sits inside a flush card. */
.filter-bar .field { min-width: 0; flex: 1 1 12rem; }
.filter-count { flex-basis: 100%; margin: 0; font-size: .75rem; color: var(--color-text-muted); }
.record-group > .filter-bar { padding: 0; margin-block-end: var(--space-3); }

/* --------------------------------------------------------- media picker --- */

/* The control every place on the site uses to choose a picture. It is a radio
   group inside the form it belongs to, so it works with scripting off; the
   thumbnails are the labels. */

/* The preview is a strip, not a panel. At 16/9 across a form column it was
   several hundred pixels of grey saying "no picture chosen", which pushed the
   fields that actually need filling in below the fold. A capped height keeps
   the picture recognisable and the form reachable. */
.media-picker { display: grid; gap: var(--space-3); margin-block-end: var(--space-4); }
.media-picker-current { display: grid; place-items: center; aspect-ratio: 16 / 9; max-height: 9rem; background: var(--color-surface-inset); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.media-picker-current img { width: 100%; height: 100%; object-fit: cover; }
.media-picker-empty { display: grid; justify-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: .8125rem; }
.media-picker-empty svg { width: 1.75rem; height: 1.75rem; }

.media-picker-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.media-picker-row select { flex: 1 1 10rem; min-width: 0; }

/* The library, rendered once for the page. Any picker opens this same dialog. */
.media-dialog { width: min(56rem, 92vw); max-height: 82vh; padding: 0; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.media-dialog::backdrop { background: rgb(2 6 23 / 55%); }
.media-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.media-dialog-head h2 { margin: 0; }
.media-dialog-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(45%, 8rem), 1fr)); max-height: 62vh; overflow-y: auto; margin: 0; padding: var(--space-5); list-style: none; }
.media-dialog-grid button { display: grid; gap: var(--space-1); width: 100%; padding: var(--space-1); background: none; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-align: start; font: inherit; color: inherit; }
.media-dialog-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface-muted); }
.media-dialog-grid span { font-size: .75rem; line-height: 1.3; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-dialog-grid button:hover { border-color: var(--color-border-strong); }
.media-dialog-grid button:focus-visible { box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------- record list --- */

/* ONE shape for every list an operator manages: slides, documents, people,
   the lists people are in, announcements, menu entries, pages and posts.
   Before this the Website tab had two habits and both were wrong.
   Slides, documents and people were CARDS, each holding its whole form open
   at all times -- eleven documents meant eleven stacked forms and a screen
   several thousand pixels tall with no way to see what was in it. Menus,
   pages, posts and announcements were TABLES, which read well but offered
   only Remove: there was no way to edit a page after writing it at all.
   A row here is a summary line you can scan, and the form is behind it in a
   <details>. Reorder and delete sit outside the disclosure so pressing them
   does not open the editor. Everything works with scripting off. */

/* .record-body is the group container inside a .card-flush: it carries the
   padding the flush card gives up, so a list can be grouped under headings
   (documents by category, people by list) without each group re-stating it. */
.record-group { padding: 0 var(--space-5) var(--space-5); }
.record-group + .record-group { padding-block-start: 0; }
.record-group h3 { margin: 0 0 var(--space-2); font-size: .875rem; }
.record-group > p { margin: 0 0 var(--space-3); }

.record-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.record-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) 0; align-items: start; }

/* A submenu under its parent, indented and ruled, so the two levels the header
   supports are visible as two levels rather than as a "Sits under" column. */
.record-children { grid-column: 2; margin-block-start: var(--space-2); padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--color-border); }
/* A child row is already indented and ruled; a plate on top of that is one
   marker too many, so the box goes and only the width is kept for alignment. */
.record-children .record-thumb { background: none; width: 1.25rem; }

/* The reorder pair. Outside the <details> so a mis-click on "down" does not
   also unfold a form, and stacked so the arrows read as one control. */
.record-rank { display: grid; gap: 2px; padding-block-start: .3rem; }
.record-rank button {
  display: grid; place-items: center; width: 1.75rem; min-height: 1.375rem;
  padding: 0; font-size: .625rem; line-height: 1;
}
.record-rank button[disabled] { opacity: .35; }

.record-body {
  min-width: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.record-body[open] { border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }

.record-summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-3);
  align-items: center; padding: var(--space-3); cursor: pointer; list-style: none;
}
.record-summary::-webkit-details-marker { display: none; }
.record-summary:hover { background: var(--color-surface-inset); border-radius: var(--radius-md); }
.record-body[open] .record-summary { border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom: 1px solid var(--color-border); }
.record-summary:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--radius-md); }

/* A thumbnail where the row is about a picture, and the same box holding the
   position number where it is not, so every row in a list lines up. */
.record-thumb {
  display: grid; place-items: center; width: 3rem; height: 2.25rem; overflow: hidden;
  background: var(--color-surface-inset); border-radius: var(--radius-sm);
  font-size: .625rem; font-weight: 700; color: var(--color-text-muted);
}
.record-thumb img { width: 100%; height: 100%; object-fit: cover; }
.record-thumb svg { width: 1.125rem; height: 1.125rem; }

.record-title { min-width: 0; display: grid; gap: 1px; }
.record-title strong { font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-title span { font-size: .75rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The affordance. A caret rather than a word, because the row is already
   dense and "Edit" repeated down a column is noise. */
.record-open { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--color-text-muted); }
.record-open::after { content: "▾"; transition: transform .18s ease; }
.record-body[open] .record-open::after { transform: rotate(180deg); }

.record-editor { display: grid; gap: var(--space-3); padding: var(--space-4); }
.record-editor .field { gap: var(--space-1); }
.record-editor .form-actions { margin-block-start: var(--space-3); padding-block-start: var(--space-3); }

/* Marking an answer for correction, on the answer itself.

   The reviewer reads the file and marks what is wrong with it as they go, so
   the control lives on the row rather than in a second copy of the whole file
   in the sidebar — which is what it used to be, and which meant every answer
   appeared on the page twice. Closed it is one line; open it is a full-width
   field with its action on its own row, because it is a sentence somebody has
   to compose and a one-line box invites one word. */
.review-comment { margin-block-start: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-inset); }
.review-comment > summary { padding: var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: .8125rem; font-weight: 600; cursor: pointer; list-style: none; }
.review-comment > summary::-webkit-details-marker { display: none; }
.review-comment > summary::before { content: "+ "; }
.review-comment[open] > summary::before { content: "- "; }
.review-comment > summary:hover { color: var(--color-text); }
.review-comment[open] { border-color: var(--color-border-strong); }
.review-comment > form { padding: 0 var(--space-3) var(--space-3); }
.review-comment textarea { width: 100%; }
.review-comment .form-actions { margin-block-start: var(--space-3); padding-block-start: var(--space-3); }

/* What the reviewer has already said about this item, shown against it. */
.review-note { margin-block-start: var(--space-2); padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--color-warning-border); background: var(--color-warning-bg); color: var(--color-text); font-size: .8125rem; }

/* Two columns of fields once there is room, because most of these forms are
   short text inputs and one per line wastes the width. */
.record-fields { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.record-fields > .field-wide { grid-column: 1 / -1; }

/* Plain text with line breaks, shown as the author wrote it. */
.prose-lines { white-space: pre-line; overflow-wrap: anywhere; margin: 0; line-height: 1.65; }
.feedback-message { white-space: pre-wrap; padding: var(--space-4); background: var(--color-surface-inset); border-radius: var(--radius-md); font-size: .875rem; line-height: 1.6; }

@media (max-width: 48rem) {
  .record-summary { grid-template-columns: auto minmax(0, 1fr); }
  .record-summary > .status-badge, .record-summary > .record-open { grid-column: 2; justify-self: start; }
}

/* ------------------------------------------------------ performance marks --- */

/* One criterion per row: what it is on the left, the mark on the right. The
   same shape is used for entering a mark and for reading one back, so the
   self-appraisal and the reviewed version line up when compared. */
.criteria-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.criteria-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--color-border); }
.criteria-list > li:first-child { border-top: 0; padding-block-start: 0; }
.criteria-list > li > div { min-width: min(100%, 16rem); flex: 1; }
.criteria-list label, .criteria-list strong { font-weight: 600; }
.criteria-list p { margin: var(--space-1) 0 0; }
.criteria-list input { max-width: 6rem; text-align: end; }

.criteria-marks { display: flex; gap: var(--space-4); }
.criteria-mark { display: grid; justify-items: end; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.criteria-mark small { color: var(--color-text-muted); font-size: .6875rem; }
/* A mark the Authority moved. Colour alone would not say so, hence the label. */
.criteria-mark-changed { color: var(--color-warning); }
.criteria-mark-changed small { color: var(--color-warning); }

/* ----------------------------------------------------------------- charts --- */

/* Charts are CSS. The engine forbids external scripts and the application must
   run offline, so a charting library is not an option. Every chart is also
   published as a visually hidden table, which is what a screen reader reads and
   what makes the figures copyable. */
.chart, .donut { margin: 0; }

.chart-legend, .donut-key { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: .75rem; color: var(--color-text-muted); }
.chart-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-swatch { width: .625rem; height: .625rem; flex: none; border-radius: 2px; background: var(--chart-1); }
.chart-swatch-2 { background: var(--chart-2); }
.chart-swatch-3 { background: var(--chart-3); }
.chart-swatch-4 { background: var(--chart-4); }

.chart-plot { display: flex; align-items: end; gap: var(--space-2); height: 11rem; padding-block-start: var(--space-2); border-bottom: 1px solid var(--color-border); }
.chart-column { display: flex; flex-direction: column; justify-content: end; flex: 1; min-width: 0; height: 100%; gap: var(--space-2); }
.chart-bars { display: flex; align-items: end; justify-content: center; gap: 2px; flex: 1; }
/* A zero value paints nothing. A hairline would read as a real, small figure. */
.chart-bar { display: block; width: .5rem; min-height: 0; background: var(--chart-1); border-radius: 2px 2px 0 0; }
.chart-bar-2 { background: var(--chart-2); }
.chart-bar-3 { background: var(--chart-3); }
.chart-bar-4 { background: var(--chart-4); }
.chart-tick { overflow: hidden; color: var(--color-text-muted); font-size: .625rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.donut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.donut-ring { position: relative; display: grid; place-items: center; width: 9rem; height: 9rem; flex: none; }
.donut-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track { stroke: var(--color-surface-muted); }
.donut-slice { stroke: var(--chart-1); }
.donut-slice-2 { stroke: var(--chart-2); }
.donut-slice-3 { stroke: var(--chart-3); }
.donut-slice-4 { stroke: var(--chart-4); }
.donut-hole { position: absolute; display: grid; place-items: center; width: 6rem; height: 6rem; text-align: center; }
.donut-hole strong { font-size: 1.5rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.donut-hole span { color: var(--color-text-muted); font-size: .6875rem; }
.donut-key { flex-direction: column; gap: var(--space-2); flex: 1; min-width: min(100%, 11rem); margin: 0; }
.donut-key li { display: grid; grid-template-columns: .625rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); font-size: .8125rem; color: var(--color-text); }
.donut-key-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-key-value { font-variant-numeric: tabular-nums; }

/* A row of chart cards that keeps every chart the same height. */
.chart-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.chart-grid > .card { display: grid; grid-template-rows: auto 1fr; align-content: start; }

@media (max-width: 48rem) {
  .chart-plot { height: 8rem; }
  .chart-bar { width: .375rem; }
}

/* ========================================================================== */
/* PUBLIC WEBSITE                                                              */
/* ========================================================================== */

/* Built to the measurements taken off iwcf.org, the accreditation body the
   Authority chose as the reference. Every value below was read from that site's
   computed styles rather than estimated:

     container      1440px wide, 80px side padding
     section        80px top and bottom
     hero           100vh, contents vertically centred
     hero heading   65px / 65px, weight 400, letter-spacing normal, max 770px
     hero subtitle  20px / 28px, centred, max 700px
     section label  18px / 25.2px with a 25x1px #3b7cff rule and 10px of gap
     big heading    60px / 60px, weight 400
     block heading  50px / 50px, weight 400, column capped at 600px
     stat number    50px / 55px      stat label 20px / 22px, row gap 40px
     two-column     flex, 80px gap, text column capped at 500px
     button         50px tall, 0 20px, 15px radius, #3b7cff

   The one deliberate departure is photography. The reference carries a video
   hero and photographs behind every band; the Authority has supplied none and
   the engine CSP forbids loading any from elsewhere, so each image slot is a
   tonal plate occupying the exact box a photograph will fill. Setting
   `--site-photo: url(...)` on a plate drops the real image in unchanged. */

.site-top, .site-header, .site-footer, .site-hero, .site-band, .site-announcement {
  /* One navy, one accent, one neutral ramp. The earlier set mixed three
     unrelated blues across the plates, an amber banner and a lime chip, which
     is what made the combinations read as arbitrary. */
  /* The two brand colours are the Authority's, fixed by the brief:
     #137aa8 for the header band, #aad4e6 for the Updates cards. Everything
     else is a tonal ramp built around them. */
  --site-brand: #137aa8;
  --site-brand-hover: #0f6288;
  --site-brand-soft: #aad4e6;
  --site-navy: #0c3b52;
  --site-navy-deep: #082b3c;
  --site-blue: #137aa8;
  --site-blue-hover: #0f6288;
  --site-link: #137aa8;

  /* Warm white rather than pure white, and a tonal ramp rather than borders:
     zones are separated by a shift in surface, which is quieter than a rule
     and is what makes the whole page read as one material. */
  --site-paper: #ffffff;
  --site-surface: #faf9f7;
  --site-surface-low: #f4f3f1;
  --site-surface-tint: #efeeec;
  --site-ink: #14181d;
  --site-muted: #4a5560;
  --site-hairline: #e3e2e0;
  --site-tint: #f4f3f1;

  /* Soft (level 1): a small radius on controls, a larger one on anything
     framing a photograph. Sharp corners read as clinical at this scale. */
  --site-radius: 4px;
  --site-radius-lg: 8px;

  /* Depth comes from diffused shadow in the brand hue, never from a border. */
  --site-shadow: 0 18px 40px rgb(12 59 82 / 10%);
  --site-shadow-lift: 0 26px 60px rgb(12 59 82 / 18%);

  /* EB Garamond for display, Hanken Grotesk for everything else, both served
     from this host. The fallbacks are ordinary system faces, so a reader who
     blocks webfonts still gets the serif/sans pairing the design rests on.
     "DDC Uchen" is first in both and applies only to the Tibetan block. */
  --site-display-font: "DDC Uchen", "EB Garamond", Garamond, "Palatino Linotype", Palatino, Georgia, serif;
  --site-body-font: "DDC Uchen", "EB Garamond", Garamond, "Palatino Linotype", Palatino, Georgia, serif;

  --site-shell: 1440px;
  --site-gutter: clamp(24px, 5vw, 80px);
  /* Vertical rhythm. Sections breathe; that space is the design. */
  --site-band-space: clamp(64px, 8vw, 120px);
}

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

.site-shell { width: 100%; max-width: var(--site-shell); margin-inline: auto; padding-inline: var(--site-gutter); }

.site-top, .site-header, .site-footer, .site-hero, .site-band, .site-strip, .site-announcement {
  font-family: var(--site-body-font);
  font-size: calc(18px * var(--site-scale-body, 1));
  line-height: 1.7;
}

/* Display: EB Garamond, 64/72 at the top of the scale with the tight tracking
   that gives a serif at this size its editorial weight. Everything steps down
   from there; the clamp does the responsive work so there is one rule per
   level rather than one per breakpoint. */
.site-display {
  margin: 0;
  font-family: var(--site-display-font);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.4vw, 64px);
  line-height: 1.12;
  text-wrap: balance;
}
/* 48/56 — the heading that opens a band. */
.site-display-md { font-size: clamp(1.75rem, 3.2vw, 48px); line-height: 1.16; letter-spacing: -0.015em; }
/* 32/40 — a heading inside a column, and the footer brand. */
.site-display-sm { font-size: clamp(1.5rem, 2.4vw, 32px); line-height: 1.25; font-weight: 400; letter-spacing: normal; }
/* 24/32 — card titles. */
.site-display-xs { font-size: clamp(1.15rem, 1.5vw, 24px); line-height: 1.33; font-weight: 400; letter-spacing: normal; }

/* Body large: 18/32. The generous leading is what makes the page feel unhurried. */
.site-lede { margin: 0; font-size: calc(18px * var(--site-scale-body, 1)); line-height: 1.78; }

/* Label caps: 12px, 700, 0.1em tracking, uppercase. Used for section labels,
   metadata and column headings — a small structural rhythm running through the
   page. No decorative rule: the tracking is the signal. */
.site-rule-label {
  display: block;
  margin: 0 0 16px; padding: 0;
  color: var(--site-link);
  font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; line-height: 1.35;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.site-rule-label-center { text-align: center; }
.site-band-dark .site-rule-label, .site-footer .site-rule-label, .site-hero .site-rule-label { color: var(--site-brand-soft); }
.site-rule-label-center { justify-content: center; }

/* Button: 50px tall, 15px radius, flat blue. */
/* Button text: 14/20, 600, 0.05em.
   Padding rather than a fixed height. A fixed height with `line-height: 1`
   centres the LINE BOX, not the glyphs -- the descender space below the
   baseline is counted as part of the text, so the visible letters sit a couple
   of pixels low. Symmetrical padding around a normal line box centres what the
   eye actually sees. */
.site-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 13px 28px;
  background: var(--site-blue); color: #fff;
  border: 0; border-radius: var(--site-radius);
  font-family: var(--site-body-font);
  font-size: calc(17px * var(--site-scale-body, 1)); font-weight: 600; line-height: 20px; letter-spacing: 0.05em;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}
/* The secondary of a pair. Same shape and same size, so the two sit together,
   with only the weight telling them apart. */
.site-pill-quiet {
  background: transparent; color: var(--site-blue);
  box-shadow: inset 0 0 0 1px currentColor;
}
.site-pill-quiet:hover { background: var(--site-blue); color: #fff; }
.site-pill:hover { background: var(--site-blue-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--site-shadow); }
.site-pill:active { transform: translateY(0); }
.site-pill svg { width: 1rem; height: 1rem; flex: none; }

/* Ghost: a hairline instead of a fill, for the second action beside a primary. */
.site-pill-quiet { background: transparent; color: var(--site-navy); box-shadow: inset 0 0 0 1px var(--site-hairline); }
.site-pill-quiet:hover { background: var(--site-surface-low); color: var(--site-navy); box-shadow: inset 0 0 0 1px var(--site-hairline); }

/* On a photograph or a dark band, the button is the pale tone rather than the
   brand: brand-on-dark loses too much contrast against the image behind it. */
.site-pill-soft { background: var(--site-brand-soft); color: var(--site-navy-deep); }
.site-pill-soft:hover { background: #fff; color: var(--site-navy-deep); }

/* ------------------------------------------------------------- header --- */

/* The brief asks for a "liquid screen" header so the felicitation photograph
   can be seen in the entire screen, on the model of absbhutan.org. On the
   landing page the band is therefore transparent and floats over the picture;
   everywhere else it is the solid #137aa8 the brief specifies.

   Legibility over an unknown photograph is handled by a scrim: a dark gradient
   at the top of the hero, under the header and above the image. That is a
   softer instrument than a translucent panel and it does not tint the picture
   below the fold. Once the reader scrolls past the hero the band fills in and
   picks up a backdrop blur.

   Text on the band is pure white rather than the 80%-opacity grey the earlier
   navy header used: #fff on #137aa8 is 4.85:1, and dimming it to 80% drops it
   to 3.7:1, under AA for body text. */

.site-top { position: sticky; top: 0; z-index: 40; background: var(--site-brand); transition: background-color .35s ease; }

.site-top[data-over-hero="true"] { position: absolute; inset-inline: 0; background: transparent; }
.js .site-top[data-over-hero="true"] { position: fixed; }
.js .site-top[data-over-hero="true"][data-stuck="true"] {
  background: color-mix(in srgb, var(--site-brand) 90%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 12%);
}
.site-top[data-over-hero="true"] .site-announcement { background: rgb(8 43 60 / 55%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.site-header { color: #fff; }
.site-header a { color: inherit; }

/* One row: brand at the start, menu and national emblem at the end. 72px is
   the whole of it, against 136px for the two-row lockup this replaced -- and
   because the band is sticky on every page but the landing page, that 64px
   was coming out of the reading area on every scroll. */
/* Full width, not the 1440px page shell (9 Nov 2026): the brand sits at the
   window's start and the emblem at its end however wide the screen. */
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 100%; min-height: 72px; padding-block: 10px; }
.site-header-end { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }

.site-header-title { display: grid; gap: 1px; min-width: 0; }
/* Uchen hangs its vowel signs above the head line and its subjoined letters
   below, so it needs more leading than a Latin face at the same size before
   the two lines of the lockup start to collide. */
.site-title-dzongkha { font-size: 15px; line-height: 1.6; opacity: .95; }
.site-title-en { font-size: clamp(11px, 1.05vw, 13px); font-weight: 700; letter-spacing: .09em; line-height: 1.25; text-transform: uppercase; }

/* The white plate. Both emblems are transparent PNGs carrying black Dzongkha
   lettering, which over a photograph or over #137aa8 all but disappeared.
   `contain` inside the padding means a mark that is not square is letterboxed
   rather than cropped. */
.site-emblem {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--logo-header-size, 72px); height: var(--logo-header-size, 72px); flex: none; padding: 5px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgb(8 43 60 / 22%);
}
.site-emblem img { width: 100%; height: 100%; object-fit: contain; }
/* In the header the emblems sit straight on the band: no white plate and no
   shadow, on either side. The footer keeps its plate (.site-footer .site-emblem
   is left as it was). */
.site-header .site-emblem { padding: 0; background: none; border-radius: 0; box-shadow: none; }
.site-brand { min-width: 0; display: inline-flex; align-items: center; gap: .875rem; text-decoration: none; }
.site-brand-mark { width: 100%; height: 100%; color: var(--site-brand); }

.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.site-nav-list { display: flex; align-items: center; gap: 1.375rem; margin: 0; padding: 0; list-style: none; }
.site-nav-item { position: relative; }
.site-nav a, .site-nav summary { white-space: nowrap; font-size: 16px; text-decoration: none; color: #fff; }
.site-nav a:hover, .site-nav summary:hover { color: #fff; text-decoration: underline; text-underline-offset: .35em; }
.site-nav a[aria-current="page"], .site-nav summary[data-current="true"] { font-weight: 700; }

/* A disclosure, not a hover menu: reachable from the keyboard, usable with
   scripting off, and it does not close because the pointer crossed a gap. */
.site-nav-menu > summary { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; list-style: none; }
.site-nav-menu > summary::-webkit-details-marker { display: none; }
.site-nav-menu > summary svg { width: .8rem; height: .8rem; transform: rotate(90deg); transition: transform .2s ease; }
.site-nav-menu[open] > summary svg { transform: rotate(-90deg); }
.site-nav-submenu {
  position: absolute; inset-inline-start: -14px; top: calc(100% + 10px); z-index: 5;
  display: grid; gap: 2px; min-width: 15rem; margin: 0; padding: 8px; list-style: none;
  background: var(--site-brand); border-radius: var(--site-radius);
  box-shadow: 0 18px 40px rgb(8 43 60 / 38%);
}
.site-nav-submenu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.site-nav-submenu a:hover { background: rgb(255 255 255 / 16%); text-decoration: none; }

.site-nav-actions { display: flex; align-items: center; gap: .5rem; }
.site-nav-actions .site-pill { padding: 8px 16px; font-size: 14px; line-height: 16px; background: #fff; color: var(--site-brand); }
.site-nav-actions .site-pill:hover { background: var(--site-brand-soft); color: var(--site-navy); }

.site-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; color: inherit; border: 1px solid rgb(255 255 255 / 45%); border-radius: 50%; cursor: pointer; }
.site-icon-button:hover { background: rgb(255 255 255 / 12%); }
.site-icon-button svg { width: 1rem; height: 1rem; }

.site-menu-button { display: none; align-items: center; gap: .5rem; height: 34px; padding-inline: 14px; background: transparent; color: inherit; border: 1px solid rgb(255 255 255 / 45%); border-radius: var(--site-radius); font-size: 15px; cursor: pointer; }
.site-menu-button svg { width: 1.1rem; height: 1.1rem; }

/* --------------------------------------------------------------- hero --- */

/* Full screen, so the felicitation photograph is seen whole. 100svh rather
   than 100vh: on a phone the dynamic toolbar makes 100vh taller than the
   visible viewport, which would push the scroll cue off the bottom of the very
   screen it is meant to sit on. */
/* `grid-template-rows: minmax(0, 1fr)` is not decoration. Without it the single
   row is auto-sized, a percentage height on the child resolves against an
   indefinite size and falls back to auto, and the slider ends up as tall as the
   photograph's natural aspect -- 960px for a 3:2 image at 1440 wide, inside a
   720px hero. The hero clips, so the picture still looked right, but the slide
   caption is anchored to the SLIDE's bottom edge and that edge was 240px below
   the fold: the heading and the button an operator had set were simply cut off,
   and the scroll cue collided with what was left. A definite row means the
   slider, the track and each slide are exactly the height of the hero. */
.site-hero { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); background: var(--site-navy); color: #fff; isolation: isolate; height: 100svh; min-height: 560px; max-height: 1000px; overflow: hidden; }
.site-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.site-hero-inner > .site-hero-cards { justify-self: stretch; }

/* The scrim. Dark at the top so white chrome reads over any photograph, clear
   through the middle so the picture is unobstructed, and a short lift at the
   foot to seat the scroll cue and the dots. */
.site-hero::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 42%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgb(6 30 42 / 62%) 0%, rgb(6 30 42 / 28%) 45%, transparent 100%);
}
.site-hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 24%; z-index: 3; pointer-events: none;
  background: linear-gradient(0deg, rgb(6 30 42 / 45%) 0%, transparent 100%);
}

/* A quiet cue that the page continues, which a full-screen hero needs or the
   reader does not know there is anything below it. */
.site-hero-cue {
  position: absolute; inset-inline: 0; bottom: clamp(20px, 4vh, 44px); z-index: 6;
  display: grid; justify-items: center; gap: 10px;
  color: rgb(255 255 255 / 82%);
  font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.site-hero-cue:hover { color: #fff; }
.site-hero-cue svg { width: 1.1rem; height: 1.1rem; }
.js .site-hero-cue svg { animation: site-cue 2.4s ease-in-out infinite; }
@keyframes site-cue {
  0%, 100% { transform: translateY(0); opacity: .65; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* The opening statement sits below the photograph rather than on it, so the
   felicitation image is seen whole and the headline is set on the page's own
   surface where a serif at 64px can actually be read. */
.site-band.site-band-intro { padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 88px); background: var(--site-surface); color: var(--site-ink); }
.site-band-intro .site-hero-sub { max-width: 60ch; margin-block-start: 24px; color: var(--site-muted); font-size: calc(18px * var(--site-scale-body, 1)); line-height: 1.78; opacity: 1; }
.site-band-intro .site-hero-title { max-width: none; }
.site-hero-inner .site-rule-label { margin: 0 0 20px; }
.site-hero-title { max-width: none; margin: 0; }
.site-hero-sub { max-width: 62ch; margin: 14px 0 0; font-size: calc(17px * var(--site-scale-body, 1)); line-height: 1.65; opacity: .88; }
.site-hero-inner .site-search { margin-block-start: 26px; }

/* Image plates. See the note at the top of this block. */
.site-plate {
  position: absolute; inset: 0; z-index: -1; display: block;
  background-color: var(--site-navy);
  background-image:
    var(--site-photo, none),
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 8%) 1px, transparent 0),
    linear-gradient(148deg, #1a7ba6 0%, #0c3b52 46%, #082b3c 100%);
  background-size: cover, 22px 22px, cover;
  background-position: center, 0 0, center;
}
/* When the Authority has uploaded a photograph the plate carries it; the tonal
   field stays behind as the colour the image is matted against while it loads. */
.site-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The hero is the one band that is meant to feel like an entrance rather than
   a section: a vignette to hold the eye in the centre, and a deeper foot so it
   resolves into the page instead of stopping at a hard edge. */
.site-plate-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 38%, rgb(12 59 82 / 20%) 0%, rgb(12 59 82 / 72%) 100%),
    linear-gradient(180deg, rgb(12 59 82 / 55%) 0%, rgb(12 59 82 / 28%) 42%, #0c3b52 100%);
}
.site-plate-a, .site-plate-b, .site-plate-c,
.site-plate-d, .site-plate-e, .site-plate-f { background-size: cover; background-position: center; }
.site-plate-a { background-image: var(--site-photo, none), linear-gradient(155deg, #17709b, #0c3b52); }
.site-plate-b { background-image: var(--site-photo, none), linear-gradient(155deg, #135f83, #082b3c); }
.site-plate-c { background-image: var(--site-photo, none), linear-gradient(155deg, #1a86b8, #0f4d69); }
.site-plate-d { background-image: var(--site-photo, none), linear-gradient(150deg, #17709b, #0c3b52); }
.site-plate-e { background-image: var(--site-photo, none), linear-gradient(150deg, #1e8ec2, #082b3c); }
.site-plate-f { background-image: var(--site-photo, none), linear-gradient(150deg, #135f83, #0c3b52); }

/* An underline field rather than a boxed one, which is the drafting-table
   shape the rest of the system uses. The button keeps its own fill. */
.site-search {
  position: relative; display: flex; align-items: center; gap: .75rem;
  width: min(100%, 560px); padding: 0 0 0 30px;
  background: transparent; border-radius: 0;
  border-bottom: 1px solid var(--site-hairline);
  transition: border-color .25s ease;
}
/* Both controls are 50px; pinning the shell height and centring each child
   stops a stray baseline from stretching the field into a 92px box. */
.site-search > * { align-self: center; }
.site-search-icon { position: absolute; inset-inline-start: 2px; width: 17px; height: 17px; color: var(--site-muted); pointer-events: none; }
.site-search input {
  flex: 1; width: auto; min-width: 0; min-height: 0; height: 52px; padding: 0;
  /* The portal input rule also sets a radius and a shadow. Clearing only the
     border left those behind, which is what drew a second box inside the
     field. Anything the portal sets on `input` has to be undone here. */
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  color: var(--site-ink); font-size: calc(18px * var(--site-scale-body, 1)); font-family: inherit;
}
.site-search input::placeholder { color: var(--site-muted); }
.site-search input:focus, .site-search input:focus-visible { outline: 0; box-shadow: none; }
.site-search:focus-within { border-color: var(--site-brand); }
.site-search .site-pill { margin-block: 6px; }
.site-search-light { border-bottom-color: var(--site-hairline); }

/* Three photographic cards, the label set over the foot of the picture. The
   image scales inside a fixed frame on hover, which is the one piece of motion
   that makes a photograph feel like a door rather than a decoration. */
.site-hero-cards { display: grid; width: 100%; gap: clamp(16px, 2vw, 32px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: clamp(40px, 5vw, 72px); }
.site-quick-card {
  position: relative; display: flex; align-items: end;
  aspect-ratio: 4 / 3; padding: clamp(20px, 2vw, 28px);
  border-radius: var(--site-radius-lg); overflow: hidden;
  color: #fff; text-decoration: none; isolation: isolate;
}
.site-quick-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 30%, rgb(6 30 42 / 78%) 100%); }
/* The label is lifted above the scrim; the plate is NOT touched here. A
   `> *` rule would give the plate `position: relative` and take it out of the
   absolute fill it needs, which blanks every photograph on the row. */
.site-quick-label { position: relative; z-index: 2; }
.site-quick-card .site-plate { z-index: 0; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.site-quick-card:hover .site-plate { transform: scale(1.06); }
.site-quick-card:hover { color: #fff; }
.site-quick-label {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  font-family: var(--site-display-font); font-size: clamp(1.15rem, 1.5vw, 24px); font-weight: 400; line-height: 1.3;
}
.site-quick-label svg { width: 1.1rem; height: 1.1rem; flex: none; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.site-quick-card:hover .site-quick-label svg { transform: translate(.25rem, -.25rem); }

/* -------------------------------------------------------------- bands --- */

/* Vertical space is the design. A band that breathes at 120px reads as
   considered; the same content at 52px reads as a brochure. */
.site-band { padding-block: var(--site-band-space); background: var(--site-surface); color: var(--site-ink); }
.site-band-dark { background: var(--site-navy); color: #fff; }
.site-band-tint { background: var(--site-surface-low); }
.site-band-center { text-align: center; }
.site-band-plate { position: relative; isolation: isolate; }
.site-band-plate .site-shell { position: relative; }
.site-plate-wide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(12 59 82 / 94%) 0%, rgb(12 59 82 / 74%) 55%, rgb(12 59 82 / 38%) 100%); }

/* A band opens on a centred label, then the heading, then its content, with
   real air between the heading and what follows. */
/* `justify-items: center` makes every child shrink to its content, which is
   right for the label and the heading and wrong for a grid of figures -- the
   stats row collapsed into a single column because its width was max-content.
   The children are centred by their own text-align instead. */
.site-band-top { display: grid; justify-items: stretch; text-align: center; margin-block-end: clamp(40px, 5vw, 72px); }
.site-band-top > * { justify-self: center; max-width: 100%; }
.site-band-top > .site-stats { justify-self: stretch; width: 100%; }
.site-band-top .site-lede { max-width: 62ch; margin-block-start: 20px; color: var(--site-muted); }
.site-band-dark .site-band-top .site-lede { color: rgb(255 255 255 / 82%); }

/* Figures set in the display serif, at display size, in the brand colour: the
   number is the thing worth looking at, so it is given the largest type on the
   page and the label under it is reduced to a caps line. */
.site-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.site-stats li { text-align: center; padding-block: 8px; }
.site-stat-value {
  margin: 0 0 10px; color: var(--site-link);
  font-family: var(--site-display-font); font-weight: 500;
  font-size: clamp(2.25rem, 4vw, 64px); line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.site-stat-value span { color: inherit; }
.site-stat-label { margin: 0; color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.site-band-dark .site-stat-value { color: var(--site-brand-soft); }
.site-band-dark .site-stat-label { color: rgb(255 255 255 / 78%); }
.site-band-tint .site-lede { color: var(--site-muted); }

/* Two columns, the text column capped so a line never runs past a comfortable
   measure however wide the screen gets. */
.site-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(40px, 5vw, 80px); }
.site-split-media { flex: 1 1 400px; min-width: 0; }
.site-split-body { flex: 0 1 500px; max-width: 500px; min-width: 0; }
.site-split-body .site-lede { margin-block: 20px 0; color: var(--site-muted); }
.site-band-dark .site-split-body .site-lede, .site-band-plate .site-split-body .site-lede { color: rgb(255 255 255 / 85%); }
/* Direct child only. As a descendant selector this also caught the button
   inside the verification search field, pushing it 20px below its own
   input -- which is the misalignment that looked like a stray margin. */
.site-split-body > .site-pill { margin-block-start: 28px; }
.site-band-dark .site-split-body .site-lede { opacity: .85; }
.site-split-reverse { flex-direction: row-reverse; }

/* Two overlapping plates instead of one flat image, which gives the column a
   little depth without a border or a drop shadow. */
.site-collage { position: relative; min-height: clamp(300px, 34vw, 420px); }
.site-collage .site-plate { position: absolute; z-index: 0; border-radius: var(--site-radius-lg); overflow: hidden; box-shadow: var(--site-shadow); }
.site-collage .site-plate-d { inset: 0 22% 25% 0; }
.site-collage .site-plate-e { inset: 28% 0 0 22%; }

/* A content column capped so the measure stays readable. */
.site-column { max-width: 620px; }
.site-column .site-lede { margin-block-start: 20px; }

/* Cards are borderless: a tonal surface and generous padding, not a rule. */
.site-card-row { display: grid; gap: clamp(16px, 2vw, 32px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: clamp(32px, 4vw, 56px); }
.site-card {
  display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
  padding: clamp(24px, 2.4vw, 36px); background: var(--site-surface-low); border-radius: var(--site-radius-lg);
  color: var(--site-ink); text-decoration: none;
  transition: background-color .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}
.site-card:hover { background: var(--site-surface-tint); transform: translateY(-4px); box-shadow: var(--site-shadow); }
.site-band-dark .site-card, .site-band-plate .site-card { background: rgb(255 255 255 / 96%); }
.site-band-dark .site-card:hover, .site-band-plate .site-card:hover { background: var(--site-paper); }
.site-card .site-tag {
  justify-self: start; padding: 5px 12px; border: 0; border-radius: var(--site-radius);
  background: var(--site-brand-soft); color: var(--site-navy-deep);
  font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.site-card p { margin: 0; color: var(--site-muted); font-size: calc(18px * var(--site-scale-body, 1)); line-height: 1.75; }
.site-card .site-card-cta {
  display: inline-flex; align-items: center; gap: .5rem; color: var(--site-link);
  font-size: calc(17px * var(--site-scale-body, 1)); font-weight: 600; letter-spacing: .05em; text-decoration: none;
}
.site-card .site-card-cta svg { width: 1rem; height: 1rem; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.site-card:hover .site-card-cta svg { transform: translate(.25rem, -.25rem); }

/* Heading on the left, jump links on the right, then the content beneath. */
.site-band-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; margin-block-end: clamp(32px, 4vw, 56px); }
.site-jump { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; padding: 0; list-style: none; }
.site-jump a { display: inline-flex; align-items: center; gap: .4rem; color: var(--site-link); font-size: calc(17px * var(--site-scale-body, 1)); font-weight: 600; letter-spacing: .05em; text-decoration: none; }
.site-jump a:hover { text-decoration: underline; text-underline-offset: .3em; }
.site-jump svg { width: 1rem; height: 1rem; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.site-jump a:hover svg { transform: translate(.2rem, -.2rem); }
.site-band-dark .site-jump a, .site-hero .site-jump a { color: var(--site-brand-soft); }
.site-meta { color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); }

/* The composition strip that closes the page before the footer. */
.site-strip { padding-block: clamp(32px, 4vw, 56px); background: var(--site-surface); }
.site-strip ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: clamp(24px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.site-strip li { display: grid; justify-items: center; gap: 8px; text-align: center; }
.site-highlights { padding-block: clamp(48px, 6vw, 88px); }
/* The highlights band sits on the soft brand blue, and its titles take the brand blue. */
.site-strip.site-highlights { background: var(--site-brand-soft); }
.site-strip.site-highlights .site-highlights-head h2,
.site-strip.site-highlights strong { color: var(--site-blue); }
.site-strip.site-highlights span { color: var(--site-navy-deep, var(--site-ink)); }
.site-highlights-head { margin-block-end: clamp(28px, 3.5vw, 48px); text-align: center; }
.site-highlights-head h2 { margin: 0; }
.site-highlights-head .site-lede { margin: 12px auto 0; max-width: 46rem; color: var(--site-muted); }
.site-highlights ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; }
.site-strip.site-highlights strong { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.site-strip.site-highlights span { max-width: 18rem; font-size: calc(17px * var(--site-scale-body, 1)); font-weight: 400; letter-spacing: normal; line-height: 1.5; text-transform: none; }
.prose-list { margin: 0 0 16px; padding-inline-start: 22px; color: var(--site-muted); line-height: 1.7; }
.prose-list li { margin-block-end: 6px; }
.site-strip strong { font-family: var(--site-display-font); font-size: clamp(1.75rem, 2.6vw, 40px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--site-link); }
.site-strip span { color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------------- footer --- */

/* Deep tone rather than the brand blue: a full-width band of #137aa8 under a
   page that already opens on it makes the whole document feel like one blue
   box. The deep tone is the same hue three steps down, so it still reads as
   the Authority's colour without competing with the header. */

.site-footer { padding-block: clamp(56px, 7vw, 96px) 32px; background: var(--site-navy); color: #fff; font-size: 18px; }
.site-footer a { color: rgb(255 255 255 / 82%); text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: rgb(255 255 255 / 40%); }
/* A button is not a link in a list. `.site-footer a` outranks `.site-pill-soft`
   on specificity, which painted near-white text on the pale blue fill and made
   the label all but disappear. */
.site-footer a.site-pill-soft, .site-footer a.site-pill-soft:hover { color: var(--site-navy-deep); text-decoration: none; }

.site-footer-columns { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; }
.site-footer-columns ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.site-footer-columns li { line-height: 1.5; }

.site-footer-brand { display: grid; justify-items: start; gap: 20px; max-width: 46ch; }
.site-footer-brand .site-display { color: #fff; }
.site-footer-brand p { margin: 0; color: rgb(255 255 255 / 78%); font-size: 18px; line-height: 1.7; }
/* The emblem beside the name, as in the header. The white plate the mark is
   printed on is what makes it legible here too: the footer band is dark and
   the emblem's Dzongkha lettering is black. */
.site-footer-lockup { display: flex; align-items: center; gap: 20px; }
/* The seal is the larger of the two: the name beside it is sized to the seal,
   not the seal to the name. */
.site-footer .site-emblem { width: var(--logo-footer-size, 104px); height: var(--logo-footer-size, 104px); padding: 7px; }
.site-footer-name .site-display { font-size: clamp(1.125rem, calc(var(--logo-footer-size, 104px) * .15), 1.5rem); line-height: 1.3; }
.site-footer-name { display: grid; gap: 2px; min-width: 0; }
.site-footer-name .site-display { margin: 0; }
.site-footer-lockup .site-title-dzongkha { color: rgb(255 255 255 / 78%); }

.site-footer address { margin: 0 0 16px; font-style: normal; line-height: 1.7; color: rgb(255 255 255 / 78%); }
.site-footer-external a { display: inline-flex; align-items: baseline; gap: .4rem; }
.site-footer svg { width: .8rem; height: .8rem; flex: none; align-self: center; opacity: .8; }

/* A single hairline before the legal line, which is the only rule in the whole
   footer -- everything above it is separated by space alone. */
.site-footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-block-start: clamp(40px, 5vw, 72px); padding-block-start: 24px;
  border-top: 1px solid rgb(255 255 255 / 14%);
  font-size: 16px; color: rgb(255 255 255 / 70%);
}
.site-footer-legal p { margin: 0; max-width: 68ch; }
.site-footer-legal nav { display: flex; gap: 28px; }

/* Error pages build their own header and footer, because the components that
   normally draw them need navigation data that an error template never gets. */
.site-header-plain .site-menu-button { display: none; }
.site-footer-plain { padding-block: 26px; opacity: .9; }
.site-footer-plain p { margin: 0; }

/* ----------------------------------------------------- authored content --- */

/* Rendered from the Markdown subset in lib/site.js. Every element here is one
   the renderer can produce; nothing else can reach the page. */
.site-rich h2 { margin: 40px 0 14px; font-family: var(--site-display-font); font-size: calc(30px * var(--site-scale-reading, 1)); font-weight: 400; line-height: 1.2; color: var(--site-ink); }
.site-rich h3 { margin: 32px 0 12px; font-family: var(--site-display-font); font-size: calc(25px * var(--site-scale-reading, 1)); font-weight: 400; line-height: 1.25; color: var(--site-ink); }
.site-rich h4 { margin: 26px 0 10px; font-size: calc(20px * var(--site-scale-reading, 1)); font-weight: 700; color: var(--site-ink); }
.site-rich > :first-child { margin-block-start: 0; }
.site-rich ul, .site-rich ol { margin: 0 0 16px; padding-inline-start: 26px; color: var(--site-muted); font-size: calc(20px * var(--site-scale-reading, 1)); line-height: 1.7; }
.site-rich li { margin-block-end: 8px; }
.site-rich blockquote { margin: 20px 0; padding: 2px 0 2px 16px; border-inline-start: 2px solid var(--site-blue); }
.site-rich blockquote p { margin: 0; color: var(--site-ink); }
.site-rich code { padding: 2px 5px; background: var(--site-tint); border-radius: 4px; font-size: .9em; }
.site-rich hr { height: 1px; margin: 28px 0; background: var(--site-hairline); border: 0; }
.site-rich a { color: var(--site-link); }
.site-rich img { max-width: 100%; height: auto; border-radius: 8px; }
.site-rich figure { margin: 24px 0; }
.site-rich figcaption { margin-block-start: 8px; color: var(--site-muted); font-size: calc(17px * var(--site-scale-reading, 1)); }

/* ------------------------------------------------------------------ blog --- */

.post-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin-block-start: 32px; }
.post-card { display: grid; gap: 0; border: 1px solid var(--site-hairline); border-radius: var(--site-radius); overflow: hidden; color: inherit; text-decoration: none; transition: border-color .2s ease, transform .25s ease; }
.post-card:hover { border-color: var(--site-blue); transform: translateY(-2px); color: inherit; }
.post-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--site-tint); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-media .site-plate { position: absolute; inset: 0; z-index: 0; }
.post-card-body { display: grid; gap: 8px; padding: 18px; }
.post-card-date { color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); }
.post-card-body strong { font-family: var(--site-display-font); font-size: calc(18px * var(--site-scale-body, 1)); font-weight: 400; line-height: 1.3; }
.post-card-excerpt { color: var(--site-muted); font-size: calc(17px * var(--site-scale-body, 1)); line-height: 1.6; }
.post-lead { margin: 28px 0 0; }
.post-lead img { width: 100%; border-radius: var(--site-radius); }

/* --------------------------------------------------------- error suggestions --- */

.error-suggestions { display: grid; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.error-suggestions a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--site-hairline); border-radius: 10px; color: inherit; text-decoration: none; }
.error-suggestions a:hover { border-color: var(--site-blue); color: inherit; }
.error-suggestions strong { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: calc(17px * var(--site-scale-body, 1)); }
.error-suggestions svg { width: 13px; height: 13px; }
.error-suggestions span { color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); }

/* ------------------------------------------------- announcement banner --- */

.site-announcement { padding-block: 8px; background: #082b3c; color: #fff; font-size: calc(16px * var(--site-scale-small, 1)); }
.site-announcement-warning { background: #55401a; }
.site-announcement-danger { background: #5c2222; }
.site-announcement p { margin: 0; text-align: center; }
.site-announcement a { color: inherit; text-underline-offset: .2em; }

.site-prose { max-width: min(100%, var(--site-reading-width, 58rem)); margin-block-start: 32px; }
.site-prose p { margin: 0 0 20px; font-size: calc(20px * var(--site-scale-reading, 1)); line-height: 1.7; color: var(--site-muted); }
.site-prose p:last-child { margin-block-end: 0; }


/* ------------------------------------------- the rest of the public site --- */

/* The landing page is built from `site-` sections, but every other public page
   is assembled from the portal's components: a page header, cards, tables,
   filter bars, pagination. Left alone they arrive wearing portal chrome, which
   is why the directory and the notices looked like a different product from the
   home page.

   Rather than rewrite nine pages, the components are restated here in the
   site's terms, scoped to `.public-main` so the portal itself is untouched. A
   public page added later inherits this for free. */

.public-main, .utility-main {
  --site-brand: #137aa8;
  --site-brand-hover: #0f6288;
  --site-brand-soft: #aad4e6;
  --site-navy: #0c3b52;
  --site-blue: #137aa8;
  --site-blue-hover: #0f6288;
  --site-ink: #1a1a1a;
  --site-muted: #4a5561;
  --site-hairline: #d7dee6;
  --site-paper: #ffffff;
  --site-surface-low: #f4f6f8;
  /* Body links are their own token. The button keeps the brand blue, which
     needs white ON it; a link needs contrast AGAINST the page, and in dark the
     two pull in opposite directions. */
  --site-link: #137aa8;
  --site-radius: 15px;
  --site-display-font: "DDC Uchen", "EB Garamond", Garamond, "Palatino Linotype", Palatino, Georgia, serif;
  --site-gutter: clamp(1.25rem, 5.5vw, 80px);
  background: var(--site-paper);
  color: var(--site-ink);
}
/* ------------------------------------------- the public site in dark --- */

/* NOTE THE :is(). A comma-separated selector list does not distribute its
   prefix: `:root[data-theme="dark"] .site-top, .site-header` means
   "(:root[data-theme=dark] .site-top)" OR "(.site-header)", so every selector
   after the first would apply the dark tokens in LIGHT mode as well. Written
   this way the condition governs all seven. */

/* The control in the header used to change the stored preference and nothing
   else on any public page. Dark mode redefined the --color-* tokens, which
   belong to the WORKSPACE; every public surface is built on --site-*, and
   those had no dark values at all.

   Declared twice on purpose, as the workspace tokens above are: once behind
   the media query for a reader who has never touched the control, and once on
   the explicit attribute for one who has. The attribute must win in both
   directions -- a reader on a dark system who asks for light gets light. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.site-top, .site-header, .site-footer, .site-hero, .site-band, .site-strip, .site-announcement) {
    /* The two brand colours do not move: #137aa8 still carries the band and
       #aad4e6 still carries the Updates cards, because the brief fixes them
       and they are the Authority's identity in either theme. What changes is
       the paper underneath. The tonal ramp inverts direction -- in light a
       card is lighter than its band, in dark it is lighter still, so "raised"
       keeps meaning the same thing. */
    --site-paper: #131b21;
    --site-surface: #0e151a;
    --site-surface-low: #18222a;
    --site-surface-tint: #202c35;
    --site-tint: #18222a;
    --site-ink: #eef3f6;
    --site-muted: #a2b3c0;
    --site-hairline: #253239;
    --site-link: #5cb3d9;
    --site-shadow: 0 18px 40px rgb(0 0 0 / 45%);
    --site-shadow-lift: 0 26px 60px rgb(0 0 0 / 58%);
  }
  :root:not([data-theme="light"]) :is(.public-main, .utility-main) {
    --site-paper: #131b21;
    --site-surface-low: #18222a;
    --site-tint: #18222a;
    --site-ink: #eef3f6;
    --site-muted: #a2b3c0;
    --site-hairline: #253239;
    --site-link: #5cb3d9;
  }
}

:root[data-theme="dark"] :is(.site-top, .site-header, .site-footer, .site-hero, .site-band, .site-strip, .site-announcement) {
    /* The two brand colours do not move: #137aa8 still carries the band and
       #aad4e6 still carries the Updates cards, because the brief fixes them
       and they are the Authority's identity in either theme. What changes is
       the paper underneath. The tonal ramp inverts direction -- in light a
       card is lighter than its band, in dark it is lighter still, so "raised"
       keeps meaning the same thing. */
    --site-paper: #131b21;
    --site-surface: #0e151a;
    --site-surface-low: #18222a;
    --site-surface-tint: #202c35;
    --site-tint: #18222a;
    --site-ink: #eef3f6;
    --site-muted: #a2b3c0;
    --site-hairline: #253239;
    --site-link: #5cb3d9;
    --site-shadow: 0 18px 40px rgb(0 0 0 / 45%);
    --site-shadow-lift: 0 26px 60px rgb(0 0 0 / 58%);
}
:root[data-theme="dark"] :is(.public-main, .utility-main) {
    --site-paper: #131b21;
    --site-surface-low: #18222a;
    --site-tint: #18222a;
    --site-ink: #eef3f6;
    --site-muted: #a2b3c0;
    --site-hairline: #253239;
    --site-link: #5cb3d9;
}

/* The landing page owns its own bands and must not take page padding. */
.public-main:not([data-home]), .utility-main { padding-block: 40px 56px; }
.public-main:not([data-home]) > .container,
.public-main:not([data-home]) > * > .container {
  width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--site-gutter);
}

/* ---- page header ---- */

.public-main .page-header, .utility-main .page-header { margin-block-end: 32px; }
.public-main .page-header .eyebrow, .utility-main .page-header .eyebrow {
  display: flex; align-items: center;
  margin: 0 0 12px; color: var(--site-ink);
  font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 400; letter-spacing: normal; text-transform: none;
}
.public-main .page-header .eyebrow::before, .utility-main .page-header .eyebrow::before { content: ""; width: 25px; height: 1px; flex: none; margin-inline-end: 10px; background: var(--site-blue); }
.public-main .page-header h1, .utility-main .page-header h1 {
  margin: 0; font-family: var(--site-display-font);
  font-size: clamp(1.5rem, 2.2vw, 30px); font-weight: 400; line-height: 1.1; letter-spacing: normal;
}
.public-main .page-header .lede, .utility-main .page-header .lede { max-width: 72ch; margin-block-start: 12px; color: var(--site-muted); font-size: calc(17px * var(--site-scale-body, 1)); line-height: 1.6; }
.public-main .page-title-row, .utility-main .page-title-row { gap: 20px; }

/* ---- headings and body copy ---- */

/* Element-level rules are deliberately kept off the landing page: it styles its
   own sections completely, and a blanket link colour here turned the white
   labels on the hero cards blue. */
.public-main:not([data-home]) h2, .utility-main h2 { font-family: var(--site-display-font); font-size: calc(24px * var(--site-scale-heading, 1)); font-weight: 400; line-height: 1.25; letter-spacing: normal; }
.public-main:not([data-home]) h3, .utility-main h3 { font-family: var(--site-display-font); font-size: calc(18px * var(--site-scale-body, 1)); font-weight: 400; line-height: 1.3; letter-spacing: normal; }
.public-main:not([data-home]) p, .utility-main p { font-size: calc(18px * var(--site-scale-body, 1)); line-height: 1.7; }
.public-main:not([data-home]) .text-muted, .utility-main .text-muted { color: var(--site-muted); }
.public-main:not([data-home]) a, .utility-main a { color: var(--site-link); text-underline-offset: .2em; }
.public-main:not([data-home]) a:hover, .utility-main a:hover { color: var(--site-blue-hover); }
/* The rule above is for links in prose. A pill is a button that happens to be
   an anchor, and letting the link colour reach it painted blue text on a blue
   button - the label simply disappeared. */
.public-main:not([data-home]) a.site-pill, .utility-main a.site-pill { color: #fff; }
.public-main:not([data-home]) a.site-pill:hover, .utility-main a.site-pill:hover { color: #fff; }
.public-main:not([data-home]) a.site-pill-quiet, .utility-main a.site-pill-quiet { color: var(--site-navy); }
.public-main:not([data-home]) a.site-pill-quiet:hover, .utility-main a.site-pill-quiet:hover { color: var(--site-navy); }

/* ---- surfaces ---- */

.public-main .card,
.public-main .panel,
.public-main .empty-state,
.public-main .filter-bar,
.public-main .table-shell,
.public-main .declaration,
.public-main .contextual-help, .utility-main .contextual-help {
  background: var(--site-paper); border: 1px solid var(--site-hairline); border-radius: var(--site-radius); box-shadow: none;
}
.public-main .card, .utility-main .card, .public-main .panel, .utility-main .panel { padding: 22px; }
.public-main .card-header, .utility-main .card-header { margin-block-end: 16px; }
.public-main .card-header h2, .utility-main .card-header h2, .public-main .card-header h3, .utility-main .card-header h3 { margin: 0; }
.public-main .card-header p, .utility-main .card-header p { margin-block-start: 6px; color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); }
.public-main .contextual-help, .utility-main .contextual-help { border-inline-start: 3px solid var(--site-blue); }

/* ---- controls ---- */

.public-main:not([data-home]) .button, .utility-main .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 42px; padding: 0 18px;
  border: 0; border-radius: var(--site-radius); box-shadow: none;
  font-size: calc(18px * var(--site-scale-body, 1)); font-weight: 400; line-height: 1;
}
.public-main:not([data-home]) .button-lg, .utility-main .button-lg { min-height: 38px; padding: 0 16px; font-size: calc(17px * var(--site-scale-body, 1)); }
.public-main:not([data-home]) .button-sm, .utility-main .button-sm { min-height: 32px; padding: 0 12px; font-size: calc(16px * var(--site-scale-small, 1)); }
.public-main:not([data-home]) .button-primary, .utility-main .button-primary { background: var(--site-blue); color: #fff; }
.public-main:not([data-home]) .button-primary:hover, .utility-main .button-primary:hover { background: var(--site-blue-hover); color: #fff; }
.public-main:not([data-home]) .button-secondary, .utility-main .button-secondary { background: var(--site-paper); color: var(--site-ink); border: 1px solid var(--site-hairline); }
.public-main:not([data-home]) .button-secondary:hover, .utility-main .button-secondary:hover { background: var(--site-tint); color: var(--site-ink); }
.public-main:not([data-home]) .button-quiet, .utility-main .button-quiet { background: transparent; color: var(--site-ink); }
.public-main:not([data-home]) .button-quiet:hover, .utility-main .button-quiet:hover { background: var(--site-tint); color: var(--site-ink); }

.public-main:not([data-home]) input, .utility-main input,
.public-main:not([data-home]) select, .utility-main select,
.public-main:not([data-home]) textarea, .utility-main textarea {
  min-height: 42px; padding: 0 12px;
  background: var(--site-paper); color: var(--site-ink);
  border: 1px solid var(--site-hairline); border-radius: 8px; box-shadow: none;
  font-size: calc(17px * var(--site-scale-body, 1));
}
.public-main:not([data-home]) textarea, .utility-main textarea { padding-block: 10px; }
.public-main:not([data-home]) input:focus-visible, .utility-main input:focus-visible,
.public-main:not([data-home]) select:focus-visible, .utility-main select:focus-visible,
.public-main:not([data-home]) textarea:focus-visible, .utility-main textarea:focus-visible {
  outline: 0; border-color: var(--site-blue); box-shadow: 0 0 0 3px rgb(59 124 255 / 25%);
}
.public-main:not([data-home]) label, .utility-main label { font-size: calc(16px * var(--site-scale-small, 1)); }
.public-main:not([data-home]) .field-help, .utility-main .field-help { color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); }
.public-main .filter-bar, .utility-main .filter-bar { gap: 14px; padding: 14px; margin-block-end: 22px; }
/* The bar aligns its items to the baseline of the fields, so the action has
   to be exactly the height of an input or it stands proud of the row. */
/* ...and the same type size, which it was not: the base .button rule sets 16px
   while every input in the bar is 14px, so the action read a size larger than
   the fields it belonged to. */
.public-main .filter-bar .button, .utility-main .filter-bar .button {
  min-height: 46px; height: 46px; padding-inline: 18px; font-size: calc(17px * var(--site-scale-body, 1));
}
.public-main .filter-bar label, .utility-main .filter-bar label { color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); }

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

.public-main .table-shell, .utility-main .table-shell { overflow: hidden; }
.public-main table, .utility-main table { font-size: calc(17px * var(--site-scale-body, 1)); }
.public-main thead th, .utility-main thead th {
  padding: 10px 14px; background: var(--site-tint);
  color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 400; letter-spacing: normal; text-transform: none;
}
.public-main tbody td, .utility-main tbody td { padding: 12px 14px; border-top: 1px solid var(--site-hairline); }
.public-main tbody tr:hover, .utility-main tbody tr:hover { background: var(--site-tint); }
.public-main caption, .utility-main caption { padding: 14px 14px 0; text-align: start; }
.public-main .caption-summary, .utility-main .caption-summary { color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); }

/* ---- badges, pagination, empty states ---- */

.public-main .status-badge, .utility-main .status-badge, .public-main .badge, .utility-main .badge {
  padding: 3px 10px; border-radius: 99rem; font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 400; letter-spacing: normal; text-transform: none;
}
.public-main .pagination, .utility-main .pagination { margin-block-start: 20px; font-size: calc(16px * var(--site-scale-small, 1)); }
.public-main .empty-state, .utility-main .empty-state { padding: 44px 24px; }
.public-main .empty-state h2, .utility-main .empty-state h2 { font-size: calc(24px * var(--site-scale-heading, 1)); }
.public-main .empty-state p, .utility-main .empty-state p { max-width: 62ch; color: var(--site-muted); font-size: calc(17px * var(--site-scale-body, 1)); }

.public-main .definition-list > div, .utility-main .definition-list > div { grid-template-columns: minmax(1rem, 1fr) minmax(2rem, 2fr); gap: 20px; padding-block: 12px; border-top-color: var(--site-hairline); }
.public-main .definition-list dt, .utility-main .definition-list dt { color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 400; }
.public-main .definition-list dd, .utility-main .definition-list dd { font-size: calc(17px * var(--site-scale-body, 1)); }

/* ---- page tabs ---- */

.public-main .page-tabs ul, .utility-main .page-tabs ul { gap: 22px; padding: 0; background: transparent; border-radius: 0; }
.public-main .page-tabs a, .utility-main .page-tabs a { padding: 0 0 8px; border-bottom: 2px solid transparent; border-radius: 0; color: var(--site-muted); font-size: calc(17px * var(--site-scale-body, 1)); font-weight: 400; }
.public-main .page-tabs a:hover, .utility-main .page-tabs a:hover { color: var(--site-ink); }
.public-main .page-tabs a[aria-current="page"], .utility-main .page-tabs a[aria-current="page"] { background: transparent; box-shadow: none; color: var(--site-ink); border-bottom-color: var(--site-ink); }

/* ---- sign-in and the other guest screens ---- */

.public-main .auth-page, .utility-main .auth-page { gap: 56px; padding-block: 0; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
.public-main .auth-card, .utility-main .auth-card { padding: 28px; background: var(--site-paper); border: 1px solid var(--site-hairline); border-radius: var(--site-radius); box-shadow: none; }
.public-main .auth-card h1, .utility-main .auth-card h1 { font-family: var(--site-display-font); font-size: calc(26px * var(--site-scale-heading, 1)); font-weight: 400; line-height: 1.1; letter-spacing: normal; }
.public-main .auth-aside h2, .utility-main .auth-aside h2 { font-size: calc(17px * var(--site-scale-body, 1)); }
.public-main .flash-message, .utility-main .flash-message, .public-main .error-summary, .utility-main .error-summary { border-radius: 8px; font-size: calc(17px * var(--site-scale-body, 1)); }

@media (max-width: 68rem) {
  .public-main .auth-page { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}


/* ---------------------------------------------------------------- toasts --- */

/* A confirmation used to be a block at the top of the document, which pushed
   the whole page down the moment it appeared. These sit above the page instead,
   and stay until they are dismissed by hand. */
.toast-region {
  position: fixed; z-index: 60; inset-block-end: 20px; inset-inline-end: 20px;
  display: grid; gap: 10px; width: min(100% - 32px, 420px);
  pointer-events: none;
}
.toast {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px;
  padding: 12px 12px 12px 14px;
  background: #001f3c; color: #fff;
  border-radius: 10px; box-shadow: 0 12px 32px rgb(0 12 26 / 32%);
  font-size: 13px; line-height: 1.5;
  opacity: 0; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: auto;
}
.toast-stack { display: grid; gap: 10px; }
/* The list of problems with a submission, as a toast that stays. It used to be a
   block at the top of the document, which pushed the form the reader had to fix
   down the screen and away from them. Like every message here it stays until
   the reader dismisses it. Long lists scroll inside it rather than off the
   screen. */
.toast-region .error-summary {
  margin: 0; pointer-events: auto;
  max-height: min(60vh, 28rem); overflow-y: auto;
  box-shadow: 0 12px 32px rgb(0 12 26 / 24%);
  font-size: 14px; line-height: 1.5;
  animation: toast-in .22s ease;
}
.toast-region .error-summary h2 { margin-block-end: .5rem; }
.toast-region .error-summary ul { margin: 0; padding-inline-start: 1.1rem; }
.toast-region .error-summary li + li { margin-block-start: .35rem; }
.toast-region .error-summary .support-reference { margin: .6rem 0 0; font-size: 12px; color: var(--color-text-muted); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast[data-shown="true"] { opacity: 1; transform: none; }
.toast[data-leaving="true"] { opacity: 0; transform: translateY(6px); }
.toast p { margin: 0; }
/* Neutral: the region carries refusals too. See layout.html. */
.toast-icon { width: 16px; height: 16px; margin-block-start: 1px; color: #cbd5e1; }
.toast-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; color: inherit; border: 0; border-radius: 6px;
  opacity: .7; cursor: pointer;
}
.toast-close:hover { background: rgb(255 255 255 / 14%); opacity: 1; }
.toast-close svg { width: 12px; height: 12px; }

/* Without scripting they never animate in, so they must start visible. */
html:not(.js) .toast { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; opacity: 1; transform: none; }
  .toast-region .error-summary { animation: none; }
}

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

.pagination-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pagination-pages li { display: flex; }
.pagination-pages a, .pagination-pages [aria-current="page"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 8px; font-size: 13px; text-decoration: none;
}
.pagination-pages a { color: var(--color-text); }
.pagination-pages a:hover { background: var(--color-surface-muted); }
.pagination-pages [aria-current="page"] { background: var(--color-primary); color: var(--color-primary-text); font-weight: 600; }
.pagination-gap { padding-inline: 2px; color: var(--color-text-muted); font-size: 13px; }
.pagination-step { font-size: 13px; }
.pagination [aria-disabled="true"] { opacity: .45; }

.public-main .pagination-pages a, .utility-main .pagination-pages a { color: var(--site-ink); }
.public-main .pagination-pages a:hover, .utility-main .pagination-pages a:hover { background: var(--site-tint); }
.public-main .pagination-pages [aria-current="page"], .utility-main .pagination-pages [aria-current="page"] { background: var(--site-navy); color: #fff; }

/* A paged section is scrolled to by the pagination links; leave room above it
   so the heading is not tucked under a sticky header. */
section[id], #paged-table { scroll-margin-block-start: 90px; }

/* ------------------------------------------------- portal page transitions --- */

/* Each portal page fades its content in on arrival. It is a load animation, not
   a route animation: the engine renders whole pages, so there is no in-between
   state to animate and nothing here can leave a page half-drawn. */
/* `backwards`, not `both`. With `both` the element keeps the animation's final
   frame forever, and an element holding an animated `transform` is a
   containing block for every `position: fixed` descendant — even when that
   final value is `transform: none`. So the reference-data modal, which is
   fixed, was being measured against the page wrapper instead of the viewport:
   its backdrop covered only the main column and its panel centred on the
   middle of a scrolling page rather than the middle of the screen. `backwards`
   applies the opening frame before the animation starts and lets the element
   fall back to its own styles when it finishes, so the transform is gone by
   the time anybody clicks anything. */
.js .portal-main > *, .js .utility-main > * { animation: portal-enter .32s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes portal-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .portal-main > *, .js .utility-main > * { animation: none; }
}

/* ------------------------------------------------------------- slider --- */

/* A scroll-snap track, not a JavaScript carousel. Every slide is in the
   document, the arrows are same-page anchors that live inside the slide they
   act from, and the whole thing steps with scripting off. The script upgrades
   the arrows to a smooth scroll and adds the timer, and the timer is off under
   prefers-reduced-motion. */

.site-slider { position: relative; height: 100%; }
.site-slider-track {
  display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.site-slider-track::-webkit-scrollbar { display: none; }
/* Dragging is handled in app.js so a mouse can swipe as well as a finger:
   pan-y leaves vertical scrolling to the page and hands every horizontal move
   to the script. While a drag is live the snap and the smooth scroll are off,
   or the track fights the pointer. */
.site-slider-track { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.site-slider-track[data-dragging] { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.site-slide img { -webkit-user-drag: none; user-drag: none; }
@media (prefers-reduced-motion: reduce) { .site-slider-track { scroll-behavior: auto; } }

/* The slide fills the hero, which fills the screen. A fixed height rather than
   the picture's own: slides of different proportions would otherwise make the
   page jump by a few hundred pixels as the track scrolls between them. */
.site-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; height: 100%; overflow: hidden; }
.site-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.site-slide-caption {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 5;
  display: grid; justify-items: center; gap: 16px;
  /* Bottom padding clears the dots, which clear the cue. */
  padding: 140px var(--site-gutter) clamp(132px, 18vh, 176px); text-align: center; color: #fff;
  background: linear-gradient(180deg, rgb(8 43 60 / 0%), rgb(8 43 60 / 76%));
}
.site-slide-caption p { margin: 0; text-shadow: 0 2px 24px rgb(6 30 42 / 50%); }
.site-slide-caption .site-display { max-width: 22ch; }
.site-slide-caption > p + p { max-width: 58ch; font-size: calc(18px * var(--site-scale-body, 1)); line-height: 1.7; color: rgb(255 255 255 / 92%); }
.site-slide-caption .site-pill { margin-block-start: 10px; }

.site-slider-arrow {
  position: absolute; top: 50%; z-index: 6;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-block-start: -26px;
  background: rgb(255 255 255 / 16%); color: #fff;
  border-radius: 50%; text-decoration: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.site-slider-arrow:hover { background: rgb(255 255 255 / 32%); color: #fff; transform: scale(1.06); }
.site-slider-arrow svg { width: 1.35rem; height: 1.35rem; }
.site-slider-prev { inset-inline-start: clamp(12px, 2vw, 32px); }
.site-slider-next { inset-inline-end: clamp(12px, 2vw, 32px); }

.site-slider-dots {
  /* Three things share the foot of the hero and they stack, bottom up: the
     scroll cue, the dots, then the caption's last line. The cue is about 44px
     tall on top of its own offset, so the dots have to clear roughly 90px --
     the previous 66px put them straight through the word "Scroll". */
  position: absolute; inset-inline: 0; bottom: clamp(96px, 12vh, 120px); z-index: 6;
  display: flex; justify-content: center; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.site-slider-dots a { display: block; padding: 6px; }
.site-slider-dots span[aria-hidden] { display: block; width: 8px; height: 8px; background: rgb(255 255 255 / 50%); border-radius: 50%; transition: background-color .25s ease, transform .25s ease, width .25s ease; }
.site-slider-dots a:hover span[aria-hidden] { background: #fff; }
.site-slider-dots a[data-current="true"] span[aria-hidden] { background: #fff; width: 26px; border-radius: 99rem; }

/* ------------------------------------------------------------ updates --- */

/* The Authority's light blue, #aad4e6, as the brief specifies. Ink on it is
   11.2:1, so nothing inside these cards needs to be muted to be legible. */

.site-band-updates { background: var(--site-surface-low); }
.site-update-row { display: grid; gap: clamp(16px, 2vw, 32px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.site-update a {
  display: grid; gap: 18px; height: 100%; padding: clamp(24px, 2.4vw, 36px);
  background: var(--site-brand-soft); color: var(--site-ink);
  border-radius: var(--site-radius-lg); text-decoration: none;
  align-content: start;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, background-color .3s ease;
}
.site-update a:hover { color: var(--site-ink); background: #bcdeed; transform: translateY(-4px); box-shadow: var(--site-shadow-lift); }
.site-update-image { display: block; margin: calc(-1 * clamp(24px, 2.4vw, 36px)) calc(-1 * clamp(24px, 2.4vw, 36px)) 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--site-radius-lg) var(--site-radius-lg) 0 0; }
.site-update-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.site-update a:hover .site-update-image img { transform: scale(1.04); }
/* A notice has no picture: the Authority emblem, centred on white, stands in.
   White in dark mode too -- the emblem's lettering is black. */
.site-update-emblem { display: flex; align-items: center; justify-content: center; background: #ffffff; }
.site-update-emblem img { width: auto; height: 62%; max-width: 80%; object-fit: contain; }
.site-update-date {
  display: flex; align-items: baseline; gap: .4rem; flex: none;
  color: var(--site-navy-deep);
  font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.site-update-date strong { font-family: var(--site-body-font); font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; }
.site-update-body { display: grid; gap: 12px; min-width: 0; }
.site-update-title { font-family: var(--site-display-font); font-size: clamp(1.15rem, 1.5vw, 24px); font-weight: 400; line-height: 1.33; }
.site-update-summary { font-size: calc(18px * var(--site-scale-body, 1)); line-height: 1.7; color: var(--site-navy-deep); }
.site-update-more { display: inline-flex; align-items: center; gap: .5rem; font-size: calc(17px * var(--site-scale-body, 1)); font-weight: 600; letter-spacing: .05em; color: var(--site-navy-deep); }
.site-update-more svg { width: 1rem; height: 1rem; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.site-update a:hover .site-update-more svg { transform: translateX(.35rem); }

/* -------------------------------------------------------- download shelf --- */

.site-band-shelf { background: var(--site-surface); }
.site-shelf {
  display: grid; gap: clamp(12px, 1.6vw, 24px); grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none;
}
.site-shelf a {
  display: grid; justify-items: center; gap: 16px; padding: clamp(24px, 2.4vw, 36px) 12px;
  border-radius: var(--site-radius-lg); text-decoration: none; text-align: center;
  color: var(--site-ink);
  font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
  transition: background-color .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.site-shelf a:hover { background: var(--site-surface-low); color: var(--site-ink); transform: translateY(-4px); }
.site-shelf svg { width: 2.5rem; height: 2.5rem; color: var(--site-link); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.site-shelf a:hover svg { transform: translateY(-2px); }

/* --------------------------------------------------------------- people --- */

/* Anchor tabs rather than scripted ones: the menu links straight at one of the
   two lists, so both have to be in the document and reachable by address. */
.site-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.site-tabs a {
  padding: 11px 22px; border-radius: 99rem; text-decoration: none;
  background: var(--site-surface-low); color: var(--site-ink);
  font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}
.site-tabs a:hover, .site-tabs a:target { background: var(--site-brand); color: #fff; }

.site-people { margin-block-start: clamp(48px, 6vw, 88px); scroll-margin-top: 9rem; }
.site-people-head h2 { margin: 0; }
.site-people-head p { margin: 10px 0 0; color: var(--site-muted); }
.site-person-grid {
  display: grid; gap: clamp(16px, 2vw, 28px); margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
/* A large portrait with the name and designation along its foot. Hover or
   keyboard focus lays a brand-coloured backdrop over the portrait and shows the
   rest. The backdrop is built from the theme's own colour, so a recoloured site
   recolours this too. */
.site-person {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; isolation: isolate;
  background: var(--site-brand-soft); border-radius: var(--site-radius-lg);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}
.site-person:hover, .site-person:focus-within { transform: translateY(-4px); box-shadow: var(--site-shadow); outline: none; }
.site-person:focus-visible { outline: 3px solid var(--site-brand); outline-offset: 3px; }
.site-person-portrait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--site-navy-deep); }
.site-person-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.site-person:hover .site-person-portrait img, .site-person:focus-within .site-person-portrait img { transform: scale(1.05); }
.site-person-initials { font-family: var(--site-display-font); font-size: clamp(48px, 6vw, 72px); font-weight: 500; }
.site-person-caption, .site-person-more { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 4px; min-width: 0; color: #fff; }
.site-person-caption {
  padding: 56px 20px 18px; z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  transition: opacity .3s ease;
}
.site-person-more {
  inset: 0; z-index: 2; align-content: end; gap: 8px; padding: 24px 20px 20px; overflow-y: auto;
  background: color-mix(in srgb, var(--site-navy-deep) 90%, transparent);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.site-person:hover .site-person-more, .site-person:focus-within .site-person-more,
.site-person:focus .site-person-more { opacity: 1; visibility: visible; }
.site-person:hover .site-person-caption, .site-person:focus-within .site-person-caption,
.site-person:focus .site-person-caption { opacity: 0; }
.site-person-name { font-family: var(--site-display-font); font-size: calc(21px * var(--site-scale-heading, 1)); font-weight: 400; line-height: 1.25; }
.site-person-role { font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.site-person-unit { font-size: calc(17px * var(--site-scale-body, 1)); line-height: 1.5; opacity: .9; }
.site-person-contact { font-size: calc(17px * var(--site-scale-body, 1)); overflow-wrap: anywhere; color: #fff; }
a.site-person-contact { text-decoration: underline; text-underline-offset: 3px; }
/* The Executive Director on a CSO's own page: one who-is-who card, not a grid. */
.director-card { width: 100%; max-width: 20rem; }

/* -------------------------------------------------------- accountability --- */

/* Chart.js draws into the canvas and takes its colours from the site tokens
   (assets/home-chart.js), so nothing here is a fixed colour. */
.site-chart-layout { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.site-chart-copy .site-lede { margin-block: 20px 0; color: var(--site-muted); }
.site-chart-copy .site-pill { margin-block-start: 32px; }
.site-chart { margin: 0; padding: clamp(16px, 2.4vw, 32px); background: var(--site-surface-low, #f4f2ee); border-radius: var(--site-radius-lg, 12px); }
.site-chart-canvas { position: relative; height: clamp(240px, 32vw, 340px); }
.site-chart figcaption { display: flex; align-items: center; justify-content: center; gap: 10px; margin-block-start: 12px; font-size: calc(17px * var(--site-scale-body, 1)); font-weight: 700; color: var(--site-ink, inherit); }
.site-chart-key { width: 28px; height: 4px; border-radius: 2px; background: var(--site-brand, #137aa8); }
@media (max-width: 860px) { .site-chart-layout { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ year menu --- */

/* A year picker that reads as part of the page: no frame of its own, a soft
   tint like the site's other pills, and a list that appears in the same paper
   and shadow as the cards. A <details>, so it opens from the keyboard and with
   scripting off; the header menus' script (data-site-submenu) closes it on
   Escape or a click elsewhere. */
.year-select { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-block: 8px 28px; }
.year-select-label { color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); }
.year-menu { position: relative; }
.year-menu > summary {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 20px; cursor: pointer; list-style: none;
  background: var(--site-surface-low); color: var(--site-ink); border-radius: 99rem;
  font-family: var(--site-display-font); font-size: calc(18px * var(--site-scale-body, 1)); line-height: 1.2;
  transition: background-color .25s ease;
}
.year-menu > summary::-webkit-details-marker { display: none; }
.year-menu > summary:hover, .year-menu[open] > summary { background: var(--site-brand-soft); }
.year-menu > summary:focus-visible { outline: 3px solid var(--site-brand); outline-offset: 2px; }
.year-menu > summary svg { width: 18px; height: 18px; flex: none; transition: transform .25s ease; }
.year-menu[open] > summary svg { transform: rotate(180deg); }
.year-menu-list {
  position: absolute; inset-inline-start: 0; top: calc(100% + 8px); z-index: 30; min-width: 100%; max-height: 20rem; overflow-y: auto;
  margin: 0; padding: 8px; list-style: none; background: var(--site-paper, #fff); border: 1px solid var(--site-hairline); border-radius: var(--site-radius-lg); box-shadow: 0 16px 36px rgb(12 59 82 / 20%);
}
.year-menu-list a {
  display: block; padding: 10px 16px; border-radius: var(--site-radius); white-space: nowrap; text-decoration: none;
  color: var(--site-ink); font-family: var(--site-display-font); font-size: calc(18px * var(--site-scale-body, 1));
}
.public-main:not([data-home]) .year-menu-list a { color: var(--site-ink); }
.year-menu-list a:hover { background: var(--site-surface-low); }
.year-menu-list a[aria-current="page"] { background: var(--site-brand-soft); color: var(--site-navy-deep); font-weight: 600; }

/* ------------------------------------------------------------- stories --- */

/* Photographs first. A story card is its picture with the words laid over a
   darkening at the foot; on the home page they sit in a dark band, on the stories
   page on the light one. Every colour comes from the site tokens. */
.stories-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-block-end: clamp(28px, 3.5vw, 48px); }
.stories-head .site-column { max-width: 46rem; }
.stories-head h2 { margin: 0; }
.stories-intro { max-width: 46rem; margin: 18px auto 0; color: var(--site-muted); text-align: center; }
.site-band-dark .site-pill-light, .site-pill-light { background: #fff; color: var(--site-navy-deep); }
.site-band-dark .site-pill-light:hover { background: var(--site-brand-soft); color: var(--site-navy-deep); }

.story-grid { display: grid; gap: clamp(14px, 1.8vw, 24px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-grid-1 { grid-template-columns: minmax(0, 1fr); }
.story-grid-3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.story-grid-3 .story-card:first-child { grid-row: span 2; }
.story-grid-4, .story-grid-5, .story-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-list { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

.story-card { position: relative; min-width: 0; overflow: hidden; border-radius: var(--site-radius-lg); background: var(--site-navy-deep); box-shadow: 0 10px 30px rgb(0 0 0 / 22%); isolation: isolate; }
.story-card-link { position: relative; display: block; height: 100%; min-height: 20rem; color: #fff; text-decoration: none; }
.story-grid-3 .story-card:first-child .story-card-link { min-height: 34rem; }
.story-card-media { position: absolute; inset: 0; z-index: -2; background: linear-gradient(140deg, var(--site-brand), var(--site-navy-deep)); }
.story-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.story-card-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(5 20 30 / 88%) 0%, rgb(5 20 30 / 55%) 38%, rgb(5 20 30 / 0%) 72%); transition: background .4s ease; }
.story-card-link:hover .story-card-media img, .story-card-link:focus-visible .story-card-media img { transform: scale(1.06); }
.story-card-link:hover::before { background: linear-gradient(to top, rgb(5 20 30 / 94%) 0%, rgb(5 20 30 / 66%) 48%, rgb(5 20 30 / 10%) 82%); }
.story-card-link:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.story-card-body { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 8px; padding: clamp(18px, 2.2vw, 30px); }
.story-card-cso { justify-self: start; padding: 5px 12px; border-radius: 99rem; background: rgb(255 255 255 / 18%); backdrop-filter: blur(6px); font-size: calc(14px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.story-card-title { font-family: var(--site-display-font); font-size: calc(24px * var(--site-scale-heading, 1)); line-height: 1.2; }
.story-grid-3 .story-card:first-child .story-card-title { font-size: calc(34px * var(--site-scale-heading, 1)); }
.story-card-excerpt { max-width: 38rem; color: rgb(255 255 255 / 88%); font-size: calc(17px * var(--site-scale-body, 1)); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Hover must not recolour the whole card: only "Read the story" changes, and only to a soft tint. */
a.story-card-link, a.story-card-link:hover, a.story-card-link:focus-visible { color: #fff; }
.story-card-link:hover .story-card-more, .story-card-link:focus-visible .story-card-more { color: #bfe3f5; }
.story-card-more { transition: color .25s ease; display: inline-flex; align-items: center; gap: 8px; margin-block-start: 6px; font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.story-card-more svg { width: 18px; height: 18px; transition: transform .3s ease; }
.story-card-link:hover .story-card-more svg { transform: translateX(5px); }
.story-card-light { box-shadow: var(--site-shadow); }
.story-card-light .story-card-link { min-height: 24rem; }

/* The story page: a full-bleed photograph with the title laid over its foot. */
.story-hero { position: relative; display: flex; align-items: end; min-height: clamp(380px, 68vh, 680px); overflow: hidden; color: #fff; background: var(--site-navy-deep); isolation: isolate; }
.story-hero-plain { min-height: clamp(280px, 40vh, 420px); background: linear-gradient(140deg, var(--site-brand), var(--site-navy-deep)); }
.story-hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.story-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(5 20 30 / 92%) 0%, rgb(5 20 30 / 58%) 42%, rgb(5 20 30 / 18%) 78%, rgb(5 20 30 / 30%) 100%); }
.story-hero-inner { width: 100%; padding-block: clamp(28px, 5vw, 64px); display: grid; gap: 14px; justify-items: start; }
.story-back { display: inline-flex; align-items: center; gap: 6px; color: rgb(255 255 255 / 88%); font-size: calc(16px * var(--site-scale-small, 1)); text-decoration: none; }
.story-back:hover { color: #fff; text-decoration: underline; }
.story-back svg { width: 18px; height: 18px; }
/* Stories sit on photographs, so the public link colour must not reach them. */
.public-main:not([data-home]) a.story-card-link, .public-main:not([data-home]) a.story-card-link:hover { color: #fff; text-decoration: none; }
.public-main:not([data-home]) a.story-back { color: rgb(255 255 255 / 88%); }
.public-main:not([data-home]) a.story-back:hover { color: #fff; }
.public-main[data-public-section="stories"] { padding-block-start: 0; }
.story-hero-kicker { margin: 0; padding: 6px 14px; border-radius: 99rem; background: rgb(255 255 255 / 18%); backdrop-filter: blur(6px); font-size: calc(15px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.story-hero-title { margin: 0; max-width: 22ch; font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: 1.08; font-weight: 400; color: #fff; }
.story-hero-lede { max-width: 48rem; margin: 0; font-size: calc(21px * var(--site-scale-body, 1)); line-height: 1.55; color: rgb(255 255 255 / 90%); }
.story-hero-meta { margin: 0; color: rgb(255 255 255 / 75%); font-size: calc(16px * var(--site-scale-small, 1)); }
.story-body-band { padding-block: clamp(40px, 6vw, 88px); }
.story-body { margin-inline: auto; }
.story-body > p:first-of-type::first-letter { float: left; padding: 6px 12px 0 0; font-family: var(--site-display-font); font-size: 4.2em; line-height: .8; color: var(--site-link); }

/* The gallery: a masonry of the photographs at their own proportions. */
.story-gallery-band { padding-block: clamp(40px, 6vw, 88px); }
.story-gallery-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-block-end: 28px; }
.story-gallery-head h2 { margin: 0; }
.story-gallery-head p { margin: 0; color: var(--site-muted); font-size: calc(17px * var(--site-scale-body, 1)); }
.story-gallery { columns: 3 18rem; column-gap: clamp(12px, 1.6vw, 22px); }
.story-photo { position: relative; display: block; margin: 0 0 clamp(12px, 1.6vw, 22px); overflow: hidden; border-radius: var(--site-radius-lg); break-inside: avoid; background: var(--site-surface-low); cursor: zoom-in; box-shadow: 0 6px 18px rgb(12 59 82 / 12%); }
.story-photo img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.story-photo:hover img, .story-photo:focus-visible img { transform: scale(1.05); }
.story-photo:focus-visible { outline: 3px solid var(--site-brand); outline-offset: 3px; }
.story-photo-zoom { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(5 20 30 / 0%); transition: background .3s ease; }
.story-photo-zoom svg { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: rgb(255 255 255 / 92%); color: var(--site-navy-deep); opacity: 0; transform: scale(.8); transition: opacity .3s ease, transform .3s ease; }
.story-photo:hover .story-photo-zoom, .story-photo:focus-visible .story-photo-zoom { background: rgb(5 20 30 / 28%); }
.story-photo:hover .story-photo-zoom svg, .story-photo:focus-visible .story-photo-zoom svg { opacity: 1; transform: none; }
.stories-more { padding-block: clamp(40px, 6vw, 88px); }

/* The lightbox. */
.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgb(3 12 18 / 95%); color: #fff; }
.lightbox::backdrop { background: rgb(3 12 18 / 80%); }
.lightbox[open] { display: grid; place-items: center; animation: lightbox-in .25s ease; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox-figure { display: grid; justify-items: center; gap: 14px; margin: 0; max-width: min(94vw, 1500px); touch-action: pan-y; }
.lightbox-image { display: block; max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto; border-radius: 6px; box-shadow: 0 20px 60px rgb(0 0 0 / 55%); user-select: none; }
.lightbox-caption { max-width: 60rem; text-align: center; font-size: 18px; line-height: 1.5; color: rgb(255 255 255 / 88%); }
.lightbox-count { position: absolute; inset-inline: 0; bottom: 18px; margin: 0; text-align: center; font-size: 15px; letter-spacing: .12em; color: rgb(255 255 255 / 65%); }
.lightbox-button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 12%); color: #fff; cursor: pointer; transition: background-color .2s ease; }
.lightbox-button:hover { background: rgb(255 255 255 / 26%); }
.lightbox-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lightbox-button svg { width: 26px; height: 26px; }
.lightbox-close { top: 18px; inset-inline-end: 18px; }
.lightbox-previous { inset-inline-start: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { inset-inline-end: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-button[hidden] { display: none; }

@media (max-width: 900px) {
  .story-grid, .story-grid-3, .story-grid-4, .story-grid-5, .story-grid-6 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .story-grid-3 .story-card:first-child { grid-row: auto; }
  .story-grid-3 .story-card:first-child .story-card-link { min-height: 26rem; }
  .story-card-link { min-height: 18rem; }
  .lightbox-previous, .lightbox-next { top: auto; bottom: 14px; transform: none; }
  .lightbox-previous { inset-inline-start: 14px; }
  .lightbox-next { inset-inline-end: 14px; }
  .lightbox-image { max-height: calc(100dvh - 12rem); }
}
@media (prefers-reduced-motion: reduce) {
  .story-card-media img, .story-photo img, .story-card-more svg, .lightbox[open] { animation: none; transition: none; }
}

/* Organisation logos: drawn only where one is held and approved. */
.org-logo { display: block; flex: none; width: auto; height: 3.5rem; max-width: 9rem; object-fit: contain; border-radius: var(--radius-sm); }
.org-logo-sm { display: inline-block; height: 2.25rem; max-width: 4rem; margin-inline-end: var(--space-2); vertical-align: middle; }
.org-logo-lg { height: 6rem; max-width: 14rem; }

/* The gallery picker in the story editor: library thumbnails you tick. */
.gallery-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.gallery-picker legend { padding: 0; margin-block-end: var(--space-2); font-weight: 600; }
.gallery-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-2); max-height: 18rem; overflow-y: auto; padding: var(--space-1); }
.gallery-pick { position: relative; display: grid; gap: 4px; cursor: pointer; font-size: .75rem; line-height: 1.25; color: var(--color-text-muted); }
.gallery-pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); outline: 2px solid transparent; outline-offset: 1px; }
.gallery-pick input { position: absolute; top: 6px; inset-inline-start: 6px; z-index: 1; width: 1.1rem; height: 1.1rem; margin: 0; }
.gallery-pick:has(input:checked) img { outline-color: var(--color-primary); }
.gallery-pick span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ------------------------------------------------------------- thematic --- */

.site-thematic-grid { display: grid; gap: clamp(16px, 2vw, 32px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
/* A solid brand card with white text, no border (9 Nov 2026). The colour is
   Configuration > Appearance > Thematic group cards (lib/theme.js writes
   --site-thematic and the text colour that reads on it); the fallbacks here are
   the shipped #137aa8 and white, 4.8:1. Fixed in dark mode, like the band. */
.site-thematic { padding: clamp(24px, 2.4vw, 36px); background: var(--site-thematic, #137aa8); color: var(--site-thematic-text, #ffffff); border-radius: var(--site-radius-lg); }
.site-thematic h2 { margin: 0; color: inherit; }
/* A numbered list of names, no count and no registration number (9 Nov 2026),
   so the card is only as tall as its names. */
.site-thematic ol { display: grid; gap: 8px; margin: 16px 0 0; padding-inline-start: 1.6em; }
.site-thematic li::marker { font-weight: 600; }
/* .public-main in front: the public page link colour (.public-main:not([data-home]) a)
   would otherwise turn these blue on blue. */
.public-main .site-thematic li a { color: inherit; font-size: calc(18px * var(--site-scale-body, 1)); font-weight: 600; text-decoration: none; }
.public-main .site-thematic li a:hover, .public-main .site-thematic li a:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.public-main .site-thematic li a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.site-thematic-empty { margin: 16px 0 0; color: inherit; font-size: calc(17px * var(--site-scale-body, 1)); }

/* ------------------------------------------------------------ downloads --- */

.site-download-group { margin-block-start: clamp(48px, 6vw, 80px); scroll-margin-top: 9rem; }
.site-download-head { display: flex; align-items: start; gap: 18px; }
.site-download-head svg { width: 2.25rem; height: 2.25rem; flex: none; color: var(--site-link); }
.site-download-head h2 { margin: 0; }
.site-download-head p { margin: 8px 0 0; color: var(--site-muted); }
.site-download-list { display: grid; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; }
.site-download-list a {
  display: flex; align-items: start; gap: 18px; padding-block: 22px;
  border-top: 1px solid var(--site-hairline); color: inherit; text-decoration: none;
  transition: padding-inline-start .3s cubic-bezier(.16, 1, .3, 1), background-color .25s ease;
}
.site-download-list li:first-child a { border-top: 0; }
.site-download-list a:hover { padding-inline-start: 16px; background: var(--site-surface-low); color: inherit; }
.site-download-list svg { width: 1.35rem; height: 1.35rem; flex: none; margin-block-start: 3px; color: var(--site-link); }
.site-download-list span { display: grid; gap: 6px; min-width: 0; }
.site-download-title { font-family: var(--site-display-font); font-size: calc(24px * var(--site-scale-heading, 1)); line-height: 1.35; }
.site-download-summary { color: var(--site-muted); font-size: calc(17px * var(--site-scale-body, 1)); line-height: 1.6; }
.site-download-empty { margin: 24px 0 0; color: var(--site-muted); font-size: calc(17px * var(--site-scale-body, 1)); }

/* --------------------------------------------------- reading and forms --- */

/* A reading column. The authored pages, the contact details and the feedback
   form all use it; without it they run the full 1440px of the shell. */
.site-band-narrow { max-width: 62rem; }

.site-contact-list { display: grid; gap: 0; margin: 36px 0 0; }
.site-contact-list > div { display: grid; gap: 6px; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); padding-block: 18px; border-top: 1px solid var(--site-hairline); }
.site-contact-list > div:first-child { border-top: 0; }
.site-contact-list dt { color: var(--site-muted); font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.site-contact-list dd { margin: 0; font-size: calc(17px * var(--site-scale-body, 1)); line-height: 1.6; }

/* Underline fields, which is the drafting-table shape the rest of the system
   uses. A boxed input on a page this open reads as a form bolted on. */
.site-form { display: grid; gap: 28px; max-width: 44rem; margin-block-start: clamp(36px, 4vw, 56px); }
.site-form .field { display: grid; gap: 8px; }
.site-form label { font-size: calc(16px * var(--site-scale-small, 1)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--site-muted); }
.site-form input, .site-form textarea {
  padding: 12px 2px; background: transparent; color: var(--site-ink);
  border: 0; border-bottom: 1px solid var(--site-hairline); border-radius: 0; box-shadow: none;
  font-size: calc(17px * var(--site-scale-body, 1)); font-family: inherit; line-height: 1.6;
  transition: border-color .25s ease;
}
.site-form textarea { min-height: 11rem; resize: vertical; }
.site-form input:focus-visible, .site-form textarea:focus-visible { outline: 0; border-bottom-color: var(--site-brand); }
.site-form .field-help { margin: 0; color: var(--site-muted); font-size: calc(17px * var(--site-scale-body, 1)); }
.site-form .form-actions { margin-block-start: 8px; }

.site-figure { margin: clamp(32px, 4vw, 56px) 0 0; }
.site-figure img { width: 100%; height: auto; border-radius: var(--site-radius-lg); box-shadow: var(--site-shadow); }
.site-figure figcaption { margin-block-start: 14px; color: var(--site-muted); font-size: calc(17px * var(--site-scale-body, 1)); }
.site-organogram img { background: #fff; }

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

/* Both reference sites bring their sections in as they are scrolled to, and
   count their headline figures up from zero. Everything here is additive: the
   markup is fully readable with the animation removed, which is exactly what
   happens when scripting is off (no `.js` class) or when the visitor has asked
   for reduced motion. Nothing animates layout -- only opacity and transform --
   so none of it can cause reflow while reading. */

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

@media (max-width: 68rem) {
  .site-card-row, .site-hero-cards, .site-update-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .site-footer-columns { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .site-shelf { grid-template-columns: repeat(auto-fit, minmax(min(45%, 9rem), 1fr)); }
  .site-aside-grid { grid-template-columns: minmax(0, 1fr); }
  .site-collage { min-height: 20rem; }
}

/* The menu collapses earlier than it used to: five top-level entries, the
   theme control, the log-in pill, the brand lockup and the national emblem now
   share ONE row, so they run out of width sooner than when the menu had a
   strip of its own. 72rem is where the last entry starts to crowd the pill. */
@media (max-width: 72rem) {
  .site-menu-button { display: inline-flex; }
  .site-header-inner { position: relative; min-height: 64px; }
  .site-nav {
    position: absolute; inset-inline: 0; top: 100%; z-index: 5;
    display: none; flex-direction: column; align-items: stretch; gap: 1.25rem;
    padding: 1.5rem var(--site-gutter) 2rem; background: var(--site-brand);
  }
  /* Over the hero the open menu needs its own surface: the scrim is a gradient
     that has faded out by the time the panel reaches this far down. */
  .site-top[data-over-hero="true"] .site-nav {
    background: color-mix(in srgb, var(--site-brand) 94%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .site-nav[data-open="true"] { display: flex; }
  /* The error header has no menu button to open, so its single link stays put. */
  .site-nav-static { position: static; display: flex; flex-direction: row; padding: 0; background: none; }
  .site-nav-list { flex-direction: column; align-items: stretch; gap: 1rem; }
  .site-nav a, .site-nav summary { font-size: 1.0625rem; }
  /* Stacked, the submenu is a plain indented list rather than a popover: there
     is no room for one and nothing to hover with. */
  .site-nav-submenu { position: static; min-width: 0; margin-block-start: .5rem; padding: 0 0 0 1rem; background: none; box-shadow: none; border-inline-start: 1px solid rgb(255 255 255 / 30%); border-radius: 0; }
  .site-nav-actions .site-pill { font-size: calc(17px * var(--site-scale-body, 1)); line-height: 20px; padding: 11px 22px; }
  .site-emblem { width: 44px; height: 44px; }
  .site-title-en { font-size: calc(16px * var(--site-scale-small, 1)); }
  .site-band-head { align-items: start; }
}

/*Logo specific adjustment custom change*/
.site-emblem img {
  margin-bottom: 1px;
}
.site-emblem-national img {
  margin-top: 4px;
  margin-left: 2px;
}

/*Custom css fixes */
.definition-list > dd {
  line-break: anywhere;
}

@media (max-width: 40rem) {
  .site-header-inner { gap: .75rem; min-height: 60px; }
  .site-brand { gap: .625rem; }
  .site-emblem { width: 40px; height: 40px; padding: 4px; }
  .site-footer .site-emblem { width: min(var(--logo-footer-size, 104px), 72px); height: min(var(--logo-footer-size, 104px), 72px); padding: 5px; }
  .site-title-dzongkha { font-size: calc(16px * var(--site-scale-small, 1)); }
  .site-title-en { font-size: calc(10px * var(--site-scale-small, 1)); letter-spacing: .07em; }
  .site-emblem-national { display: none; }
  .site-slider-arrow { width: 38px; height: 38px; margin-block-start: -19px; }
  .site-slider-prev { inset-inline-start: 8px; }
  .site-slider-next { inset-inline-end: 8px; }
  .site-search { padding-inline-start: 26px; }
  .site-search input { height: 46px; font-size: calc(17px * var(--site-scale-body, 1)); }
  .site-search .site-pill { padding-inline: 18px; }
  .site-card-row, .site-hero-cards, .site-update-row, .site-shelf { grid-template-columns: minmax(0, 1fr); }
  .site-quick-card { aspect-ratio: 16 / 10; }
  .site-footer-legal { flex-direction: column; align-items: start; }
  .site-slide-caption { padding-block: 90px clamp(124px, 18vh, 160px); }
}

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

/* One rule governs all of it: motion is a stated preference, so everything
   below is scoped to `.js` and switched off wholesale at the foot of this
   block. Nothing here carries meaning that is lost when it is off. */

.js .site-reveal { opacity: 0; transform: translateY(28px); }
.js .site-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}
/* Children of a revealed group follow it in sequence rather than all at once,
   which reads as the page composing itself rather than flashing. */
.js .site-reveal-group > * { opacity: 0; transform: translateY(28px); }
.js .site-reveal-group.is-visible > * {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}
.js .site-reveal-group.is-visible > *:nth-child(2) { transition-delay: .12s; }
.js .site-reveal-group.is-visible > *:nth-child(3) { transition-delay: .24s; }
.js .site-reveal-group.is-visible > *:nth-child(4) { transition-delay: .36s; }
.js .site-reveal-group.is-visible > *:nth-child(5) { transition-delay: .48s; }
.js .site-reveal-group.is-visible > *:nth-child(6) { transition-delay: .6s; }

/* The hero is above the fold, so it plays on load rather than on scroll -- and
   it plays AGAIN on every step of the slider. Whatever the operator set on a
   slide arrives in reading order: the heading, then the line under it, then the
   button. Keyed on the slide rather than the page because the earlier rule ran
   once at load, which meant slide two onwards simply appeared with its caption
   already in place.

   `data-current` is written by app.js and only when it changes, so a scroll in
   flight does not restart the sequence sixty times a second. Without scripting
   there is no `.js` class, nothing is hidden, and every caption is just there. */
.js .site-slide-caption > * { opacity: 0; }
.js .site-slide[data-current="true"] .site-slide-caption > * { animation: site-rise 1s cubic-bezier(.16, 1, .3, 1) forwards; }
.js .site-slide[data-current="true"] .site-slide-caption > *:nth-child(1) { animation-delay: .18s; }
.js .site-slide[data-current="true"] .site-slide-caption > *:nth-child(2) { animation-delay: .34s; }
.js .site-slide[data-current="true"] .site-slide-caption > *:nth-child(3) { animation-delay: .5s; }
.js .site-hero-cue { opacity: 0; animation: site-rise 1s cubic-bezier(.16, 1, .3, 1) .8s forwards; }

@keyframes site-rise {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}

/* A very slow drift on the hero photograph. Twenty seconds and six percent is
   below the threshold at which it reads as an effect; it reads as the picture
   being alive. */
.js .site-slide img { animation: site-drift 24s ease-in-out infinite alternate; }
@keyframes site-drift {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* The plate behind an empty hero drifts in, so a flat colour field does not
   read as a failed image load. */
.js .site-plate-hero { animation: site-plate-in 1.4s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes site-plate-in {
  from { opacity: .55; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

/* Counting up is the one animation on this page carrying meaning: it says the
   number is a total that accumulated. The final value is in the markup, so a
   reader who never sees the animation still gets the figure. */
.site-stat-value [data-count-to] { font-variant-numeric: tabular-nums; }

/* Interaction feedback. */
.site-pill svg, .site-jump svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.site-pill:hover svg { transform: translate(.2rem, -.2rem); }
.site-collage .site-plate { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.site-split-media:hover .site-collage .site-plate-d { transform: translate(-6px, -6px); }
.site-split-media:hover .site-collage .site-plate-e { transform: translate(6px, 6px); }
.site-tab-panel[data-current="true"] { animation: site-fade .45s ease; }
@keyframes site-fade { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

/* One switch turns the whole layer off. Anything hidden for animation is
   restored to its resting state rather than left invisible. */
@media (prefers-reduced-motion: reduce) {
  .js .site-reveal,
  .js .site-reveal-group > *,
  .js .site-slide-caption > *,
  /* The per-slide selector is carried over verbatim. A media query adds no
     specificity, so without this the four-class rule above would outrank the
     two-class one here and the caption would still animate. */
  .js .site-slide[data-current="true"] .site-slide-caption > *,
  .js .site-hero-cue { opacity: 1; transform: none; animation: none; transition: none; }
  .js .site-plate-hero, .js .site-slide img, .js .site-hero-cue svg { animation: none; transform: none; }
  .site-card:hover, .site-update a:hover, .site-shelf a:hover, .site-pill:hover { transform: none; }
  .site-quick-card:hover .site-plate, .site-split-media:hover .site-collage .site-plate { transform: none; }
  .site-pill:hover svg, .site-jump a:hover svg, .site-card:hover .site-card-cta svg,
  .site-update a:hover .site-update-more svg, .site-quick-card:hover .site-quick-label svg { transform: none; }
  .site-tab-panel[data-current="true"] { animation: none; }
}

/* ==========================================================================
   Fixes to seven screens, 7 September
   ========================================================================== */

/* A .split with only one child had a phantom second column, so a list sat in
   two thirds of the page with a third of it empty. That happens whenever the
   side panel is behind a permission the viewer does not hold. */
.split:has(> :only-child),
.split-listing:has(> :only-child),
.split-listing-reverse:has(> :only-child),
.split-authoring:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------- a row that is not a
   disclosure ---
   .record-body draws the plate and .record-summary supplies the padding,
   which works when the body IS a <details> and everything inside is the
   summary. Where the body is a plain block with paragraphs after the summary
   line, those paragraphs sat hard against the border. This is the same plate
   with its own padding, for a row you read rather than open. */
.static-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.static-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4);
  align-items: start; padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.static-row:hover { border-color: var(--color-border-strong); }
.static-row > .table-actions { justify-content: flex-end; }

.static-body { min-width: 0; display: grid; gap: var(--space-2); }
.static-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.static-head strong { font-size: .9375rem; }
.static-body p { margin: 0; font-size: .875rem; line-height: 1.55; }
.static-body p.text-muted { font-size: .8125rem; }
.static-body .field { margin-block-start: var(--space-2); }

.static-list-flush { padding: 0 var(--space-5) var(--space-5); }
/* The notices list carries the same 1.25rem the rows use between them, so a
   row is not tighter to the edge of its card than to its neighbour. */
.notice-list.static-list-flush { padding: 0 1.25rem 1.25rem; }

@media (max-width: 48rem) {
  .static-row { grid-template-columns: minmax(0, 1fr); }
  .static-row > .table-actions { justify-content: flex-start; }
}

/* ------------------------------------------------------- schedule cards ---
   The fee and penalty schedules were two five-column tables side by side, so
   each had half the width for five columns and ran down the page instead. A
   rule is four short facts; four short facts are a card. */
.schedule-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.schedule-card {
  display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.schedule-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }
.schedule-name { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.schedule-amount { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.schedule-amount small { font-size: .75rem; font-weight: 600; color: var(--color-text-muted); }
.schedule-meta { display: grid; gap: var(--space-1); margin: 0; font-size: .75rem; color: var(--color-text-muted); }
.schedule-meta > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-2); }
.schedule-meta dt { font-weight: 600; }
.schedule-meta dd { margin: 0; overflow-wrap: anywhere; }
.schedule-unmapped { color: var(--color-warning, #b45309); font-weight: 600; }

/* ------------------------------------------------------------ the filter
   bar ---
   .filter-bar aligns to the bottom edge, so one field carrying help text
   underneath made the bar as tall as that field and pushed every other input
   down to meet it. Help beside the label instead of below the input. */
.filter-bar .field > .field-help { display: none; }
.filter-hint { font-weight: 400; color: var(--color-text-muted); }

/* ----------------------------------------------------- a CSS-only modal ---
   Opened by :target, so it needs no script and cannot leave a row unreachable
   when scripting is off. The backdrop is a link covering the viewport: a click
   anywhere outside returns to the page. */
.modal { display: none; }
/* The layer centres the panel; the panel does not place itself. A panel that
   positions itself with inset:50% and a translate is measured against whatever
   containing block it lands in, and lands below the fold the moment that block
   is a scrolling page rather than the viewport. */
.modal:target {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 40; padding: var(--space-4);
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgb(2 6 23 / 55%); backdrop-filter: blur(2px);
}
.modal-panel {
  position: relative; z-index: 1;
  width: min(32rem, 100%); max-height: min(38rem, calc(100dvh - 3rem)); overflow: auto;
  padding: var(--space-5);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); }
.modal-head h3 { margin: 0; font-size: 1rem; }
.modal-head p { margin: var(--space-1) 0 0; font-size: .8125rem; color: var(--color-text-muted); }
.modal-close {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
  color: var(--color-text-muted); border-radius: var(--radius-sm); text-decoration: none; font-size: 1.125rem; line-height: 1;
}
.modal-close:hover { background: var(--color-surface-inset); color: var(--color-text); }
.modal-panel .form-actions { margin-block-start: var(--space-4); display: flex; gap: var(--space-2); justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) { .modal-backdrop { backdrop-filter: none; } }

/* Roles: a wide table and a narrow form, in that order. split-listing gives
   the table 1.45fr, which is not enough for six columns and an inline revoke
   reason. */
.split-roles { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* The actions column of a static row is a button or two. Cap it so a
   disclosure holding a textarea — withdrawing a notice — cannot take the
   width away from what the row is about. */
.static-row > .table-actions { max-width: min(100%, 18rem); }
.static-row .record-editor { padding: var(--space-3) 0 0; }
.static-row .record-editor textarea { min-width: 0; }

@media (max-width: 64rem) {
  .split-roles { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Tweaks, 7 September — holidays, notices, notifications, the bell
   ========================================================================== */

/* --------------------------------------------------------- holiday cards ---
   Name, date, then the tags and Remove on ONE line. As four separate grid rows
   a card holding two facts ran to five lines deep. */
.holiday-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.holiday-card {
  display: grid; gap: var(--space-1); align-content: start; padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.holiday-card:hover { border-color: var(--color-border-strong); }
.holiday-date { font-size: .8125rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.holiday-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-block-start: var(--space-2);
}
.holiday-foot form { margin-inline-start: auto; }

/* -------------------------------------------------------------- notices ---
   The row had no route out of it: to find out who a notice named you went to
   Organizations and searched for the name you had just read. The heading and
   the organization are both links to that record now, and the particulars are
   labelled pairs rather than a sentence of values joined by middots, which is
   how the rest of the portal states a record's facts. */
.notice-list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

.notice-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4);
  align-items: start; padding: 1.25rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); transition: border-color .15s ease, box-shadow .15s ease;
}
.notice-row:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }

.notice-body { min-width: 0; display: grid; gap: var(--space-2); }
.notice-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.notice-link { display: grid; gap: 1px; min-width: 0; text-decoration: none; color: inherit; }
.notice-link:hover strong { text-decoration: underline; }
.notice-link strong { font-size: .9375rem; }
.notice-ref { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }

.notice-org { margin: 0; font-size: .8125rem; }
.notice-org a { color: var(--color-text-muted); }
.notice-org a:hover { color: var(--color-text); }
.notice-text { margin: 0; font-size: .875rem; line-height: 1.55; }

.notice-meta {
  display: grid; gap: var(--space-2) var(--space-4); margin: var(--space-1) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  padding-block-start: var(--space-3); border-top: 1px solid var(--color-border);
}
.notice-meta > div { display: grid; gap: 1px; min-width: 0; }
.notice-meta dt { font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.notice-meta dd { margin: 0; font-size: .8125rem; overflow-wrap: anywhere; }
.notice-letter { margin: 0; }

.notice-row > .table-actions { max-width: min(100%, 12rem); }
.notice-row .record-editor { padding: var(--space-3) 0 0; }

@media (max-width: 48rem) {
  .notice-row { grid-template-columns: minmax(0, 1fr); }
  .notice-row > .table-actions { justify-content: flex-start; max-width: none; }
}

/* -------------------------------------------------- the notification list ---
   Each item was a .card with an h2, a header rule and a row of buttons below
   it, so four notifications filled a laptop screen. */
.notification-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.notification-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3);
  align-items: start; padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.notification-row:hover { border-color: var(--color-border-strong); }

/* The unread marker. A dot in the gutter rather than a tinted plate, so a
   screen of unread notifications is not a screen of coloured boxes. */
.notification-dot { width: .5rem; height: .5rem; margin-block-start: .45rem; border-radius: 50%; background: transparent; }
.notification-unread { border-inline-start: 3px solid var(--color-primary); }
.notification-unread .notification-dot { background: var(--color-primary); }
.notification-unread .notification-subject { font-weight: 700; }

.notification-body { min-width: 0; display: grid; gap: var(--space-1); }
.notification-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.notification-subject { font-size: .875rem; font-weight: 600; color: var(--color-text); text-decoration: none; }
a.notification-subject:hover { text-decoration: underline; }
.notification-text { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--color-text-muted); }
.notification-when { margin-inline-start: auto; font-size: .75rem; color: var(--color-text-muted); white-space: nowrap; }
.notification-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }

@media (max-width: 48rem) {
  .notification-row { grid-template-columns: auto minmax(0, 1fr); }
  .notification-actions { grid-column: 2; justify-content: flex-start; }
}

/* ------------------------------------------------------- the bell badge ---
   .nav-count is a flex child of a full-width sidebar row and pushes itself to
   the end with margin-inline-start:auto. On the 2.25rem topbar button that
   left it about 1.25rem, so a three-digit count was clipped: 163 unread drew
   as "16". Positioned on the corner, sized to its content, and capped at 99+
   in the template with the full figure kept in the accessible name. */
.icon-button.bell { position: relative; overflow: visible; }
.bell-count {
  position: absolute; inset-block-start: -.125rem; inset-inline-end: -.25rem;
  display: grid; place-items: center; min-width: 1.05rem; height: 1.05rem;
  padding-inline: .25rem;
  background: var(--color-primary); color: var(--color-primary-text);
  border: 2px solid var(--color-surface-raised); border-radius: var(--radius-pill);
  font-size: .625rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Configuration > Certificates: the template editor. The coloured text is a
   copy drawn under a transparent textarea, so both must use exactly the same
   box, font and wrapping or the colours drift off the letters. */
.template-editor { display: grid; gap: var(--space-4); }
.te-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); position: sticky; top: 0; z-index: 5; padding: var(--space-3) var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.te-actions { display: flex; gap: var(--space-2); }
.te-state { font-size: .875rem; color: var(--color-text-muted); }
.te-state[data-state="dirty"] { color: var(--color-warning); font-weight: 600; }
.te-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-4); align-items: start; }
.te-main { display: grid; gap: var(--space-3); min-width: 0; }
.te-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); height: 70vh; min-height: 24rem; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; }
.te-gutter, .te-highlight, .te-input { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.6; tab-size: 2; letter-spacing: 0; }
.te-gutter { display: flex; flex-direction: column; padding: .75rem .6rem; overflow: hidden; text-align: right; color: var(--color-text-muted); background: var(--color-surface-muted); border-inline-end: 1px solid var(--color-border); user-select: none; }
.te-gutter span { display: block; }
.te-gutter .te-bad-line { color: var(--color-danger); font-weight: 700; }
.te-surface { position: relative; min-width: 0; }
.te-highlight, .te-input { position: absolute; inset: 0; margin: 0; padding: .75rem 1rem; border: 0; white-space: pre; overflow: auto; }
.te-highlight { pointer-events: none; color: var(--color-text); background: transparent; }
.te-highlight code { font: inherit; }
.te-input { resize: none; color: transparent; background: transparent; caret-color: var(--color-text); outline: none; -webkit-text-fill-color: transparent; }
.te-input::selection { background: color-mix(in srgb, var(--color-link) 28%, transparent); -webkit-text-fill-color: transparent; }
.te-editor:focus-within { border-color: var(--color-link); box-shadow: var(--focus-ring); }
.te-tag { color: var(--color-link); }
.te-attr { color: var(--color-warning); }
.te-value { color: var(--color-success); }
.te-punct { color: var(--color-text-muted); }
.te-comment { color: var(--color-text-muted); font-style: italic; }
.te-css { color: var(--color-info); }
.te-ph { color: #fff; background: var(--color-primary); border-radius: 3px; box-shadow: 0 0 0 1px var(--color-primary); }
.te-ph-unknown { color: var(--color-danger); text-decoration: underline wavy var(--color-danger); }
.te-checks { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.te-checks li { display: flex; gap: var(--space-2); padding: .3rem .6rem; border-radius: var(--radius-sm); }
.te-ok { color: var(--color-success); background: var(--color-success-bg); }
.te-bad { color: var(--color-danger); background: var(--color-danger-bg); }
.te-warn { color: var(--color-warning); background: var(--color-warning-bg); }
.te-side { position: sticky; top: 4.5rem; display: grid; gap: var(--space-3); min-width: 0; }
.te-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; background: var(--color-surface-muted); border-radius: var(--radius-md); }
.te-tabs button { padding: .4rem; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-weight: 600; color: var(--color-text-muted); }
.te-tabs button[aria-selected="true"] { background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-xs); }
.te-filter { width: 100%; margin-bottom: var(--space-2); }
.te-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; max-height: 60vh; overflow: auto; }
.te-list li[hidden] { display: none; }
.te-ph-item { display: grid; width: 100%; gap: 0; padding: .35rem .5rem; text-align: left; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
.te-ph-item:hover, .te-ph-item:focus-visible { background: var(--color-surface-muted); border-color: var(--color-border); }
.te-ph-item code { font-size: .8125rem; color: var(--color-link); }
.te-ph-item span { font-size: .75rem; color: var(--color-text-muted); }
.te-preview-box { position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #e5e7eb; }
.te-preview { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
@media (max-width: 70rem) { .te-layout { grid-template-columns: minmax(0, 1fr); } .te-side { position: static; } }

/* Configuration > Appearance */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-4); }
.theme-picker { display: flex; align-items: center; gap: var(--space-3); }
.theme-picker input[type="color"] { width: 3.25rem; height: 2.25rem; padding: .125rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; }

/* ------------------------------------------------- workspace and portals --- */

/* The public site is read, so it is set in Garamond. The workspace and the
   portals are worked in, all day, over dense tables and small labels, where a
   book face at 14px is hard to scan. They get the platform's own interface face
   and a step more size. Most sizes in this file are rem, so the step is taken
   on the root: every label, table cell and badge in the portal grows with it,
   not just the body text. The public pages are untouched (data-shell public and
   guest are not listed). */
body[data-shell="cso"], body[data-shell="csoa"], body[data-shell="utility"], body[data-shell="restricted"] {
  --portal-font: "DDC Uchen", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--portal-font);
  font-size: .8rem;
  font-feature-settings: normal;
  font-variant-numeric: normal;
}
/* Weight and colour in the workspace and the portals. 700 over dense tables and
   forms shouts; 600 for headings and 500 for labels is enough to rank them. The
   colours come from Configuration > Appearance, so they follow the chosen theme:
   headings take the primary colour, small caps labels and the kickers over a
   heading take the link (accent) colour, and running text sits one step softer
   than the headings so the headings lead. */
body[data-shell="cso"], body[data-shell="csoa"], body[data-shell="utility"], body[data-shell="restricted"] {
  --portal-heading: var(--color-primary);
  --portal-label: var(--color-link, var(--color-text-muted));
  --portal-body: color-mix(in srgb, var(--color-text) 82%, var(--color-canvas));
  color: var(--portal-body);
}
body[data-shell="cso"] :is(h1, h2, h3, h4), body[data-shell="csoa"] :is(h1, h2, h3, h4),
body[data-shell="utility"] :is(h1, h2, h3, h4), body[data-shell="restricted"] :is(h1, h2, h3, h4) { font-weight: 600; color: var(--portal-heading); }
body[data-shell="cso"] :is(strong, b, th, caption, .metric-value, .schedule-amount, .charge-total),
body[data-shell="csoa"] :is(strong, b, th, caption, .metric-value, .schedule-amount, .charge-total),
body[data-shell="utility"] :is(strong, b, th, caption, .metric-value, .schedule-amount, .charge-total),
body[data-shell="restricted"] :is(strong, b, th, caption, .metric-value, .schedule-amount, .charge-total) { font-weight: 600; }
body[data-shell="cso"] :is(.eyebrow, .notice-ref), body[data-shell="csoa"] :is(.eyebrow, .notice-ref),
body[data-shell="utility"] :is(.eyebrow, .notice-ref), body[data-shell="restricted"] :is(.eyebrow, .notice-ref) { font-weight: 600; color: var(--portal-label); }
body[data-shell="cso"] label, body[data-shell="csoa"] label, body[data-shell="utility"] label, body[data-shell="restricted"] label { font-weight: 500; color: var(--portal-heading); }
body[data-shell="cso"] :is(.text-muted, .field-help), body[data-shell="csoa"] :is(.text-muted, .field-help) { color: var(--color-text-muted); }
html:has(body[data-shell="cso"], body[data-shell="csoa"], body[data-shell="utility"], body[data-shell="restricted"]) { font-size: var(--portal-root-size, 106.25%); }
/* Pages in the account area are drawn with the public site's components, whose
   headings take --site-display-font. */
body[data-shell="utility"] :is(.public-main, .utility-main),
body[data-shell="restricted"] :is(.public-main, .utility-main) {
  --site-display-font: var(--portal-font);
  --site-body-font: var(--portal-font);
}

/* A section or article that is a card in the workspace or a portal is held by its tint and
   shadow, not a rule. The rows inside it already carry their own border, and a
   second one around the card made every list look boxed twice. */
body[data-shell="cso"] :is(section, article).card, body[data-shell="csoa"] :is(section, article).card { border: 0; }

/* -------------------------------------------------- hints, where the work is --- */

/* A form in the workspace used to carry a line of grey explanation under almost
   every field, which made every screen read like a manual. The explanation is
   still there for the person who needs it, and for a screen reader always: it
   is held out of sight until the field is focused, and then appears beside it. A
   statement of fact -- "locked", "in use on three pages" -- is not a hint and is
   always shown: that is .field-note, below. */
body[data-shell="cso"] .field, body[data-shell="csoa"] .field { position: relative; }
body[data-shell="cso"] .field > .field-help, body[data-shell="csoa"] .field > .field-help {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body[data-shell="cso"] .field:focus-within > .field-help, body[data-shell="csoa"] .field:focus-within > .field-help {
  inset-inline-start: 0; top: 100%; z-index: 30; width: max-content; max-width: min(28rem, 100%); height: auto;
  margin: .25rem 0 0; padding: .5rem .75rem; overflow: visible; clip: auto; white-space: normal;
  background: var(--color-text); color: var(--color-canvas); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  font-size: .8125rem; line-height: 1.45;
}
body[data-shell="cso"] .field:focus-within > .field-help a, body[data-shell="csoa"] .field:focus-within > .field-help a { color: inherit; text-decoration: underline; }
.field-note { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: .8125rem; }
.status-line { margin: 0; color: var(--color-text-muted); }
.status-line strong { color: var(--color-text); }

/* ---------------------------------------------------------- BIRMS test console --- */

.bt-connection { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.bt-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; }
.bt-facts div { display: grid; gap: 2px; }
.bt-facts dt { font-size: .75rem; color: var(--color-text-muted); }
.bt-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bt-connection-actions, .bt-button-row, .bt-exchange-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bt-layout { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.bt-controls { display: grid; gap: var(--space-4); }
.bt-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); max-height: 18rem; overflow: auto; }
.bt-kind { display: grid; gap: 2px; padding: .5rem .6rem; text-align: left; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.bt-kind:hover { border-color: var(--color-border-strong); }
.bt-kind[aria-pressed="true"] { border-color: var(--color-link); background: var(--color-accent-100); box-shadow: 0 0 0 1px var(--color-link); }
.bt-kind-group { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.bt-kind-label { font-weight: 600; font-size: .875rem; line-height: 1.25; }
.bt-kind-meta { font-size: .75rem; color: var(--color-text-muted); }
.bt-lines { display: grid; gap: var(--space-2); margin-bottom: var(--space-2); }
.bt-line { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 6.5rem auto; gap: var(--space-2); }
.bt-add { justify-self: start; }
.bt-total { display: flex; justify-content: space-between; margin: 0 0 var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.bt-raw { margin: var(--space-3) 0; }
.bt-raw textarea { width: 100%; margin: var(--space-2) 0; white-space: pre; }
.bt-confirm { display: flex; gap: var(--space-2); align-items: center; padding: .5rem .75rem; margin-bottom: var(--space-3); border-radius: var(--radius-md); background: var(--color-warning-bg); color: var(--color-warning); font-weight: 600; }
.bt-exchange { display: grid; gap: var(--space-3); min-width: 0; }
.bt-exchange-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bt-exchange-bar h2 { margin: 0; }
.bt-runs { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bt-empty { color: var(--color-text-muted); }
.bt-run { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); min-width: 0; }
.bt-run-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bt-muted { color: var(--color-text-muted); font-size: .8125rem; }
.bt-reading { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; }
.bt-reading div { display: grid; gap: 1px; }
.bt-reading dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.bt-reading dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bt-reading-pane { padding: var(--space-3); background: var(--color-surface-muted); border-radius: var(--radius-md); }
.bt-pane h4 { margin: 0 0 var(--space-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.bt-step { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.bt-step summary { display: flex; gap: var(--space-3); align-items: baseline; cursor: pointer; }
.bt-step-meta { font-size: .8125rem; color: var(--color-text-muted); }
.bt-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.bt-url { margin: 0 0 var(--space-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; overflow-wrap: anywhere; }
.bt-method { display: inline-block; padding: 0 .4rem; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-primary-text); font-weight: 700; }
.bt-code { margin: 0 0 var(--space-2); padding: .6rem .75rem; max-height: 22rem; overflow: auto; background: var(--color-surface-inset); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.bt-line-ok { margin: var(--space-2) 0 0; color: var(--color-success); font-weight: 600; }
.bt-line-bad { margin: var(--space-2) 0 0; color: var(--color-danger); font-weight: 600; }
@media (max-width: 75rem) { .bt-layout { grid-template-columns: minmax(0, 1fr); } .bt-columns { grid-template-columns: minmax(0, 1fr); } }


/* The pop-up for a message to read before going on (data-notice in app.js). */
.notice-dialog {
  max-width: 28rem; width: calc(100% - 2rem); padding: var(--space-5);
  background: var(--color-surface-raised); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgb(0 0 0 / 28%);
}
.notice-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.notice-dialog h2 { margin: 0 0 var(--space-3); font-size: 1.125rem; }
.notice-dialog-text { margin: 0 0 var(--space-4); }


/* The Back link at the top of a post. */
.site-back { display: inline-flex; align-items: center; gap: 6px; margin-block-end: 12px; color: var(--site-ink, inherit); font-size: calc(16px * var(--site-scale-small, 1)); text-decoration: none; }
.site-back:hover { text-decoration: underline; }
.site-back svg { width: 18px; height: 18px; }

/* The office name above the address on the contact page, and the optional map. */
.site-location-name { margin-block: 8px 20px; }
.site-map { margin-block-start: 24px; border: 1px solid var(--site-line, var(--color-border)); border-radius: 12px; overflow: hidden; }
.site-map iframe { display: block; width: 100%; height: 22rem; border: 0; }

/* Back and All updates side by side at the end of a post. */
.post-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.notice-dialog .button { margin-inline-end: var(--space-2); }

/* The processing history, opened to fill the screen for an investigation. */
.history-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.history-card.is-fullscreen {
  position: fixed; inset: 0; z-index: 1000; margin: 0; border-radius: 0; overflow: auto;
  background: var(--color-surface, #fff); padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
}
.history-card.is-fullscreen .timeline-scroll { max-height: none; overflow: visible; }
.history-card.is-fullscreen .timeline { max-width: 60rem; }
body.history-open { overflow: hidden; }
.timeline [hidden] { display: none; }

/* The pop-up's way-out link is hidden until a trigger gives it a destination; a
   class that sets display must not override the hidden attribute. */
.notice-dialog .notice-dialog-go[hidden] { display: none; }

/* ------------------------------------------------------ coloured cards --- */

/* Every card carries colour. A neutral card is bluish: the accent (Configuration >
   Appearance) mixed into the surface at --card-tint, so the theme still drives it.
   A card that reports a status takes the colour of its severity (data-tone:
   danger, warning, success, info), and a note (.contextual-help) takes the same
   from a modifier class. Text on a tinted card uses a darker muted colour than on
   plain white, so small print keeps its contrast (WCAG AA). */
.card, .panel, .metric-card, .start-card, .empty-state {
  --color-text-muted: color-mix(in srgb, var(--color-text) 72%, var(--color-surface-raised));
}
.start-card, .empty-state {
  background: color-mix(in srgb, var(--color-card-accent) var(--card-tint), var(--color-surface-raised));
  border-color: color-mix(in srgb, var(--color-card-accent) calc(var(--card-tint) * 2.5), var(--color-border));
}
.card-footer { background: color-mix(in srgb, var(--color-card-accent) calc(var(--card-tint) * 1.5), var(--color-surface-raised)); }

/* Severity on any card, not only a figure. */
.card[data-tone="danger"], .panel[data-tone="danger"] { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.card[data-tone="warning"], .panel[data-tone="warning"] { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.card[data-tone="success"], .panel[data-tone="success"] { background: var(--color-success-bg); border-color: var(--color-success-border); }
.card[data-tone="info"], .panel[data-tone="info"] { background: var(--color-info-bg); border-color: var(--color-info-border); }
.card[data-tone="danger"] .card-header h2, .card[data-tone="danger"] .card-header h3 { color: var(--color-danger); }
.card[data-tone="warning"] .card-header h2, .card[data-tone="warning"] .card-header h3 { color: var(--color-warning); }
.card[data-tone="success"] .card-header h2, .card[data-tone="success"] .card-header h3 { color: var(--color-success); }
.metric-card[data-tone="info"] .metric-value { color: var(--color-info); }
.metric-card[data-tone="info"] .metric-head svg { color: var(--color-info); }
.metric-card:not([data-tone]) .metric-head svg { color: var(--color-link); }

/* Notes: blue by default (above); amber, red and green by modifier. */
.contextual-help-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); border-inline-start-color: var(--color-warning); }
.contextual-help-danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); border-inline-start-color: var(--color-danger); }
.contextual-help-success { background: var(--color-success-bg); border-color: var(--color-success-border); border-inline-start-color: var(--color-success); }

/* The portals' cards are held by their tint, not a rule (see the shell rule
   above), so a tone's border is dropped there too. */
body[data-shell="cso"] :is(section, article).card[data-tone], body[data-shell="csoa"] :is(section, article).card[data-tone] { border: 0; }

/* The public site keeps bordered cards; their wash is the site's own blue. */
.public-main .card:not([data-tone]), .public-main .panel:not([data-tone]), .public-main .metric-card:not([data-tone]),
.utility-main .card:not([data-tone]), .utility-main .panel:not([data-tone]), .public-main .start-card, .public-main .empty-state {
  background: color-mix(in srgb, var(--site-blue) 7%, var(--site-paper));
  border-color: color-mix(in srgb, var(--site-blue) 24%, var(--site-hairline));
}

/* Comments and the processing history sit side by side above the long answers and documents. */
.priority-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 52rem) { .priority-row { grid-template-columns: minmax(0, 1fr); } }

/* Upcoming events on the home page. */
.site-event-list { display: grid; gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; }
.site-event { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.site-event-date { display: grid; justify-items: center; min-width: 4.25rem; padding: 10px 8px; border-radius: 10px; background: var(--site-blue); color: #fff; line-height: 1.1; }
.site-event-date strong { font-family: var(--site-display-font); font-size: 1.75rem; font-weight: 500; color: #fff; }
.site-event-date span { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.site-event-body { display: grid; gap: 4px; }
.site-event-title { font-weight: 700; font-size: 1.0625rem; color: var(--site-ink); }
.site-event-meta { color: var(--site-muted); font-size: .9375rem; }
.site-event-summary { color: var(--site-ink); line-height: 1.55; }
.site-event-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--site-link); }
.site-event-link svg { width: 1em; height: 1em; }

/* The tagline under the opening line. */
.site-hero-tagline { margin: 10px 0 0; font-family: var(--site-display-font); font-size: calc(19px * var(--site-scale-body, 1)); font-style: italic; color: var(--site-blue); }
.site-register-intro { max-width: 46rem; margin: 14px auto 0; text-align: center; color: var(--site-muted); }

/* Stacked photographs: a click fans them out so each is seen whole, and another
   click (or Escape) slides them back. They are two photographs laid over each
   other in the closed state; open, they sit one above the other at full width. */
.site-collage { transition: min-height .6s cubic-bezier(.16, 1, .3, 1); }
.site-collage .site-plate { transition: inset .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease; }
.site-collage-toggle { position: absolute; inset: 0; z-index: 3; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: var(--site-radius-lg); }
.site-collage-toggle:focus-visible { outline: 3px solid var(--site-blue); outline-offset: 4px; }
.site-collage[data-open="true"] { min-height: clamp(520px, 64vw, 760px); }
.site-collage[data-open="true"] .site-plate-d { inset: 0 0 52% 0; transform: none; }
.site-collage[data-open="true"] .site-plate-e { inset: 52% 0 0 0; transform: none; }
.site-collage[data-open="true"] .site-collage-toggle { cursor: zoom-out; }
.site-split-media:hover .site-collage[data-open="true"] .site-plate { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .site-collage, .site-collage .site-plate { transition: none; }
}

/* The fundraising event whose certificate was just scanned. */
.scan-highlight { border-inline-start: .25rem solid var(--color-success, #1a7f4b); padding-inline-start: var(--space-3); }

/* A class that sets display must not override the hidden attribute: a hidden
   button stays hidden. (An upload button hidden by script had stayed on screen.) */
.button[hidden], .icon-button[hidden] { display: none; }

/* A refusal, flashed with the refusal mark, is shown as an error. */
.toast[data-tone="error"] { background: var(--color-danger, #b42318); color: #fff; }

/* ------------------------------------------------------------- tutorials ---
   Short silent "how to" videos (lib/tutorials): a card per video, and a player
   with its numbered steps beside it on a wide screen, below it on a narrow one.
   Portal tokens throughout, so the same markup sits in the public site and in
   the CSO workspace. */
.tutorial-cso-note { display: flex; gap: var(--space-4); align-items: flex-start; margin-block: var(--space-6) 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-info-border); border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--color-text); }
.tutorial-cso-note svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--color-info); }
.tutorial-cso-note p { margin: 0; }
.tutorial-cso-note a { display: inline-block; margin-inline-start: .25rem; font-weight: 600; }
.tutorial-group { margin-block-start: var(--space-7); scroll-margin-top: 9rem; }
.tutorial-group > h2 { margin: 0 0 var(--space-4); }
.tutorial-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.tutorial-card { display: flex; }
.tutorial-card-link { display: flex; flex-direction: column; width: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); text-decoration: none; box-shadow: var(--shadow-xs); transition: box-shadow .2s ease, transform .2s ease; }
.tutorial-card-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tutorial-card-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tutorial-card-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--color-surface-muted); }
.tutorial-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tutorial-card-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.tutorial-card-play svg { width: 3.25rem; height: 3.25rem; padding: .35rem; border-radius: 50%; background: rgb(2 6 23 / 55%); }
.tutorial-card-duration { position: absolute; inset-block-end: .5rem; inset-inline-end: .5rem; padding: .1rem .45rem; border-radius: var(--radius-sm); background: rgb(2 6 23 / 75%); color: #fff; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tutorial-card-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.tutorial-card-title { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.tutorial-card-text { color: var(--color-text-muted); font-size: .9375rem; }
.tutorial-card-more { margin-block-start: auto; color: var(--color-link); font-weight: 600; font-size: .9375rem; }
.tutorial-back { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; font-weight: 600; }
.tutorial-back svg { width: 1rem; height: 1rem; }
.tutorial-lede { max-width: 60rem; }
.tutorial-draft { padding: var(--space-2) var(--space-3); border-inline-start: 4px solid var(--color-warning); background: var(--color-warning-bg); }
.tutorial-player { display: grid; gap: var(--space-5); margin-block-start: var(--space-5); }
@media (min-width: 64rem) { .tutorial-player { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; } }
.tutorial-player-media { overflow: hidden; border-radius: var(--radius-lg); background: #000; }
.tutorial-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.tutorial-unavailable { margin: 0; padding: var(--space-6); color: #fff; text-align: center; }
.tutorial-steps { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.tutorial-steps h2 { margin: 0; font-size: 1.125rem; }
.tutorial-steps-help { margin: var(--space-2) 0 var(--space-3); color: var(--color-text-muted); font-size: .9375rem; }
.tutorial-step-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tutorial-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-text); font: inherit; text-align: start; cursor: pointer; }
.tutorial-step:hover { background: var(--color-surface-muted); }
.tutorial-step:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tutorial-step-number { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-surface-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.tutorial-step-time { color: var(--color-text-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.tutorial-step[aria-current="step"] { border-color: var(--color-primary); background: var(--color-info-bg); }
.tutorial-step[aria-current="step"] .tutorial-step-number { background: var(--color-primary); color: var(--color-primary-text); }
.tutorial-admin-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.tutorial-admin-row img { width: 6rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface-muted); }
.tutorial-report { margin: var(--space-2) 0 0; padding-inline-start: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .tutorial-card-link { transition: none; } .tutorial-card-link:hover { transform: none; } }

/* Printing a workspace page -- the CSO's history above all, which is kept as
   proof (26 Oct 2026). The page alone, on white: no menu, top bar, breadcrumbs
   or buttons, and no card split across a page break where it can be avoided. */
@media print {
  .portal-sidebar, .portal-topbar, .breadcrumbs, [data-no-print], .toast-region, [data-toast] { display: none !important; }
  .portal-shell, .portal-body, .portal-main { display: block !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .card, .table-shell { box-shadow: none !important; border-color: #bbb !important; background: #fff !important; }
  .card { break-inside: avoid; }
  .table-shell { overflow: visible !important; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  /* The page's entrance fade must not be caught half way in the PDF. */
  .portal-main, .portal-main * { animation: none !important; transition: none !important; opacity: 1 !important; }
}