/* =============================================================================
   Design tokens — IHM CAT
   Extracted verbatim from the approved prototype. Colour values are the brand
   identity and must not be changed without design approval.
   ========================================================================== */

:root {
  /* Navy — primary brand scale */
  --navy-950: #06101f;
  --navy-900: #0a2351;
  --navy-800: #102d63;
  --navy-700: #1a57a8;

  --brand: #0a2351;
  --brand-secondary: #1a57a8;
  --brand-accent: #2d7dd2;
  --brand-highlight: #7db8f0;
  --brand-light: #eef4fb;

  /* Silver — neutral scale */
  --silver-50: #f8fafc;
  --silver-100: #f1f5f9;
  --silver-200: #e2e8f0;
  --silver-300: #cbd5e1;
  --silver-400: #94a3b8;
  --silver-500: #64748b;
  --silver-600: #475569;
  --silver-700: #334155;
  --silver-800: #1e293b;
  --silver-900: #0f172a;

  /* Status scales */
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-600: #059669;
  --emerald-800: #065f46;

  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-600: #d97706;
  --amber-800: #92400e;

  /* Classification label colours (four-category system) */
  --label-relevant-bg: #fee2e2;
  --label-relevant-fg: #991b1b;
  --label-not-bg: var(--emerald-100);
  --label-not-fg: var(--emerald-800);
  --label-review-bg: var(--amber-100);
  --label-review-fg: var(--amber-800);
  --label-additional-bg: #fef08a;
  --label-additional-fg: #854d0e;

  --danger: #dc2626;

  /* Shape and depth */
  --radius: 14px;
  --shadow-card: 0 1px 3px rgba(10, 35, 81, 0.08), 0 8px 24px rgba(10, 35, 81, 0.06);
  --shadow-hover: 0 4px 12px rgba(10, 35, 81, 0.12), 0 16px 40px rgba(10, 35, 81, 0.1);

  /* Focus ring — WCAG 2.4.7 (focus visible). Deliberately high-contrast. */
  --focus-ring: 0 0 0 3px #fff, 0 0 0 6px var(--brand-accent);
  --focus-ring-dark: 0 0 0 3px var(--navy-950), 0 0 0 6px var(--brand-highlight);

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =============================================================================
   Base — reset, typography, containers, accessibility primitives
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--silver-700);
  line-height: 1.6;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  color: var(--navy-900);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
}

a {
  color: var(--brand-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

/* -----------------------------------------------------------------------------
   Keyboard focus.

   The prototype had no visible focus states, which fails WCAG 2.4.7 and makes
   the site unusable by keyboard. `:focus-visible` shows the ring for keyboard
   users without putting a ring on every mouse click.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

/* On dark backgrounds the white inner ring would disappear. */
.hero :focus-visible,
footer :focus-visible,
.stats :focus-visible {
  box-shadow: var(--focus-ring-dark);
}

/* -----------------------------------------------------------------------------
   `hidden` means hidden.

   The browser's own `[hidden] { display: none }` sits in the user-agent
   stylesheet, so ANY author rule that sets `display` beats it — `.btn` declares
   `display: inline-flex`, which means a button with the `hidden` attribute was
   still on screen and still clickable. Found on the enquiries screen, where
   "Reopen enquiry" appeared next to "Close enquiry" on an open enquiry and
   offered an action the server would refuse.

   `!important` because the whole point is to win against a component's own
   `display`. Anything that needs to be laid out must not be marked `hidden`.
   -------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   Screen-reader-only text and the skip link.
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  font-size: 14px;
  transition: top 0.15s ease-in-out;
}

.skip-link:focus {
  top: 0;
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Reduced motion.

   The page uses smooth scrolling, hover transforms and a fade animation. Honour
   the user's system preference — vestibular motion disorders are a real
   accessibility concern (WCAG 2.3.3).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Spacing helpers retained from the prototype. */
.mt-s {
  margin-top: 18px;
}
.mt-m {
  margin-top: 28px;
}
.mt-l {
  margin-top: 40px;
}

.prose p {
  margin-bottom: 14px;
}
/* `h2.h-as-h3` is a heading promoted from h3 to close a gap in the document
   outline. It must keep the size and spacing it had — see components.css. */
.prose h3,
.prose h2.h-as-h3 {
  margin: 22px 0 8px;
  font-size: 18px;
}
/* Terms of service uses ordered lists where the numbering is part of the
   meaning: the contract-formation steps and the order of precedence. */
.prose ul,
.prose ol {
  margin: 0 0 14px 20px;
}
.prose li {
  margin-bottom: 7px;
}

/* Marks unresolved legal text awaiting counsel — see docs/LEGAL_CONTENT_REVIEW.md */
.placeholder {
  color: #b45309;
  background: #fffbeb;
  padding: 0 4px;
  border-radius: 3px;
  font-style: italic;
  font-size: 0.95em;
}

/* =============================================================================
   Layout — header, navigation, hero, sections, stats, footer
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--silver-200);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo:hover {
  text-decoration: none;
}

.logo-mark {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.logo-name {
  font-weight: 800;
  font-size: 16px;
  color: var(--navy-900);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
  list-style: none;
}

.nav-links-wrap {
  min-width: 0;
}

.nav-links a {
  display: block;
  color: var(--silver-600);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 9px;
  border-radius: 8px;
  transition: 0.15s;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--navy-900);
  background: var(--silver-100);
  text-decoration: none;
}

/* aria-current="page" is the accessible source of truth; the class is cosmetic. */
.nav-links a[aria-current='page'] {
  color: var(--brand-secondary);
  background: var(--brand-light);
}

/* -----------------------------------------------------------------------------
   The `More` group — administrator-created pages.

   A disclosure, not a hover menu. There is deliberately no `:hover` rule that
   opens it: a hover menu cannot be opened from a keyboard and cannot be opened
   at all by touch. `<details open>` is the only thing that shows the list, and
   that state comes from a click, from Enter or Space, or from the script.

   The panel is absolutely positioned so opening it cannot push the header wider
   and cannot introduce a horizontal scrollbar. `right: 0` anchors it to the end
   of the row, which is where the group sits.
   -------------------------------------------------------------------------- */
.nav-more {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-more-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  color: var(--silver-600);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 9px;
  border-radius: 8px;
  transition: 0.15s;
  white-space: nowrap;
}

.nav-more-disclosure > summary::-webkit-details-marker {
  display: none;
}

.nav-more-disclosure > summary:hover,
.nav-more-disclosure[open] > summary {
  color: var(--navy-900);
  background: var(--silver-100);
}

.nav-more-disclosure > summary:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}

.nav-more-disclosure[data-current='true'] > summary {
  color: var(--brand-secondary);
  background: var(--brand-light);
}

.nav-more-disclosure[open] > summary span {
  transform: rotate(180deg);
}

.nav-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--silver-200);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 27, 45, 0.12);
  padding: 6px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-more-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--silver-700);
  font-size: 13.5px;
  white-space: normal;
}

.nav-more-menu a:hover {
  background: var(--silver-100);
  color: var(--navy-900);
  text-decoration: none;
}

.nav-more-menu a[aria-current='page'] {
  color: var(--brand-secondary);
  background: var(--brand-light);
}

/* Inside the mobile menu the group is part of the column, so the panel is in
   the flow rather than floating over it. */
.nav-more-mobile {
  display: block;
}

.nav-more-mobile .nav-more-disclosure > summary {
  padding: 10px 12px;
  font-size: 14.5px;
  color: var(--silver-700);
  justify-content: space-between;
}

.nav-more-mobile .nav-more-menu {
  position: static;
  border: none;
  box-shadow: none;
  padding: 2px 0 2px 12px;
  min-width: 0;
  max-width: none;
  background: transparent;
}

.nav-cta {
  display: flex;
  gap: 8px;
  align-items: center;
  /* Never squeezed out by a long link row: sign out must always be reachable. */
  flex: none;
}

.nav-cta .btn {
  padding: 9px 15px;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--navy-900);
}

.menu-toggle svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  display: block;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--silver-200);
  list-style: none;
}

.mobile-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--silver-700);
  font-size: 14.5px;
}

.mobile-menu a:hover {
  background: var(--silver-100);
  text-decoration: none;
}

.mobile-menu.is-open {
  display: flex;
}

/* -----------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
  padding: 72px 0;
}
.section-sm {
  padding: 48px 0;
}
.bg-white {
  background: #fff;
}
.bg-silver {
  background: var(--silver-50);
}
.bg-light {
  background: var(--brand-light);
}

.sec-head {
  max-width: 680px;
  margin-bottom: 14px;
}
.sec-head.center {
  margin: 0 auto 14px;
  text-align: center;
}
.sec-head h2 {
  font-size: clamp(24px, 3.5vw, 34px);
}
.sec-head p {
  margin-top: 14px;
  color: var(--silver-600);
  font-size: 16px;
}

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(
    135deg,
    var(--navy-950) 0%,
    var(--navy-900) 55%,
    var(--brand-secondary) 130%
  );
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 80px rgba(255, 255, 255, 0.03),
    0 0 0 160px rgba(255, 255, 255, 0.02);
  pointer-events: none;
}

.hero .container,
.hero .container-narrow {
  position: relative;
  z-index: 1;
}

.hero h1 {
  color: #fff;
  font-size: clamp(30px, 5vw, 54px);
}

.hero p.lead {
  color: var(--silver-300);
  font-size: clamp(16px, 2vw, 20px);
  margin-top: 18px;
  max-width: 640px;
}

.hero-pad {
  padding: 84px 24px;
}
.hero-pad-sm {
  padding: 60px 24px;
}

.highlight {
  color: var(--brand-highlight);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 44px;
}

.hero-text {
  min-width: 0;
  max-width: 660px;
}

.hero-logo img {
  width: 340px;
  max-width: 34vw;
  height: auto;
  display: block;
  background: #fff;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.33);
}

.hero-note {
  color: var(--silver-400);
  font-size: 12.5px;
  margin-top: 18px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* -----------------------------------------------------------------------------
   Stats bar
   -------------------------------------------------------------------------- */
.stats {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 16, 31, 0.5);
}

.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.stat {
  text-align: center;
}
.stat b {
  display: block;
  font-size: 26px;
  color: #fff;
  font-weight: 800;
}
.stat span {
  display: block;
  font-size: 11.5px;
  color: var(--silver-400);
  margin-top: 2px;
}
.stat em {
  display: block;
  font-size: 11px;
  color: var(--silver-500);
  font-style: normal;
}

/* -----------------------------------------------------------------------------
   Grid helpers
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 22px;
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* -----------------------------------------------------------------------------
   Server-rendered listings

   The news and resource listings come from the database, so the number of
   cards is not known when this stylesheet is written. `auto-fill` with a
   minimum track width lets the row decide for itself, which is what the fixed
   .grid-2/3/4 helpers cannot do.

   These were used by the news listing before they existed here, which meant the
   cards stacked as plain blocks and the pager had no layout. Found while
   building the resources listing on the same shell.
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  font-size: 13px;
  color: var(--silver-600);
}

/* -----------------------------------------------------------------------------
   CTA strip
   -------------------------------------------------------------------------- */
.cta-strip {
  background: var(--brand-light);
  border-top: 1px solid var(--silver-200);
  border-bottom: 1px solid var(--silver-200);
}

.cta-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 36px;
  padding-bottom: 36px;
}

/* -----------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-950);
  color: #c6d4e7;
  padding: clamp(52px, 6vw, 72px) 0 28px;
}

/* A stable brand column and a separate horizontal navigation grid. The
   optional CMS-managed group joins the inner grid without pushing one lonely
   column onto a new desktop row. */
.foot-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) repeat(auto-fit, minmax(150px, 1fr));
  align-items: start;
  gap: clamp(32px, 4vw, 56px);
  margin-bottom: 44px;
}

/* Current builds wrap the link groups in a semantic navigation region. Keep
   the direct-child fallback above until every long-running server image has
   been rebuilt with the shared renderer. */
.foot-grid:has(> .foot-navigation) {
  grid-template-columns: minmax(260px, 1.15fr) minmax(0, 2.85fr);
  gap: clamp(48px, 7vw, 96px);
}

.foot-navigation {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px clamp(28px, 4vw, 56px);
  min-width: 0;
}

.site-footer h2 {
  color: #f8fbff;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}

.foot-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.foot-links a {
  color: #dbe7f6;
  font-size: 14px;
  line-height: 1.5;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition:
    color 160ms ease,
    text-decoration-color 160ms ease;
}

.foot-links a:hover,
.foot-links a:focus-visible {
  color: #fff;
  text-decoration-line: underline;
  text-decoration-color: #69a7ff;
}

.foot-brand p {
  font-size: 14px;
  line-height: 1.65;
  color: #c6d4e7;
  margin-top: 16px;
  max-width: 340px;
}

.foot-logo-chip {
  display: inline-flex;
  background: #fff;
  border-radius: 12px;
  padding: 6px 8px;
  flex-shrink: 0;
}

.foot-logo-chip img {
  height: 44px;
  width: auto;
  display: block;
}

.foot-brand .foot-ai {
  font-size: 12.5px;
  color: #d6e2f0;
  background: rgba(125, 184, 240, 0.08);
  border: 1px solid rgba(125, 184, 240, 0.28);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 20px;
  max-width: 340px;
}

.foot-bottom {
  border-top: 1px solid rgba(185, 211, 239, 0.18);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  line-height: 1.5;
  color: #adbed4;
}

/* -----------------------------------------------------------------------------
   Responsive.

   The navigation needs ~1120px for its full desktop layout, so it collapses to
   the hamburger EARLIER than the content grids, which only need to stack below
   880px. Using one breakpoint for both caused the header to overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
  .nav-links,
  .nav-cta .btn-ghost {
    display: none;
  }

  .menu-toggle {
    display: block;
  }
}

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

  .hero-logo {
    display: none;
  }
}

@media (max-width: 880px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .stats .container,
  .cta-strip .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .foot-grid,
  .foot-grid:has(> .foot-navigation) {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .foot-brand p,
  .foot-brand .foot-ai {
    max-width: 620px;
  }

  .foot-navigation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats .container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .logo-name {
    display: none;
  }

  .nav-cta .btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  /* One column at 375px keeps long legal and CMS-managed labels readable
     without pushing the page sideways. */
  .foot-navigation {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .foot-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =============================================================================
   Components — buttons, badges, cards, labels, notices, steps, tables, forms,
   FAQ disclosure, output rows
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  padding: 10px 18px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--brand-secondary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 35, 81, 0.2);
}

.btn-primary:hover:not(:disabled) {
  background: var(--navy-800);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #fff;
  color: var(--navy-900);
  border-color: var(--silver-300);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--brand-accent);
  color: var(--brand-secondary);
}

.btn-ghost {
  background: transparent;
  color: var(--silver-600);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--navy-900);
  background: var(--silver-100);
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-white:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 15px;
}

.btn-block {
  width: 100%;
}

/* -----------------------------------------------------------------------------
   Badges and pills
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-secondary);
  margin-bottom: 16px;
}

.badge-light {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-600);
}

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.pill-em {
  background: var(--emerald-100);
  color: var(--emerald-800);
}
.pill-am {
  background: var(--amber-100);
  color: var(--amber-800);
}

/* -----------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: 0.2s;
  padding: 26px;
}

.card-hover:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  border-color: var(--silver-300);
}

.card-icon {
  font-size: 30px;
  line-height: 1;
  display: block;
}

/* -----------------------------------------------------------------------------
   Classification labels — the four-category output system.
   Colour alone must never carry the meaning (WCAG 1.4.1), so the label always
   contains its text.
   -------------------------------------------------------------------------- */
.label {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border-radius: 7px;
  white-space: nowrap;
}

.label-relevant {
  background: var(--label-relevant-bg);
  color: var(--label-relevant-fg);
}
.label-not {
  background: var(--label-not-bg);
  color: var(--label-not-fg);
}
.label-review {
  background: var(--label-review-bg);
  color: var(--label-review-fg);
}
.label-additional {
  background: var(--label-additional-bg);
  color: var(--label-additional-fg);
}

/* -----------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */
.notice {
  border-radius: 11px;
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.6;
}

.notice-info {
  background: var(--brand-light);
  border: 1px solid #cfe0f5;
  color: var(--navy-800);
}

.notice-ai {
  background: var(--silver-100);
  border: 1px dashed var(--silver-400);
  color: var(--silver-600);
  font-size: 13px;
}

.notice-legal {
  background: var(--amber-50);
  border: 1px solid var(--amber-100);
  color: var(--amber-800);
}

.notice-legal strong {
  color: #7c2d12;
}

.notice-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.notice-success {
  background: var(--emerald-50);
  border: 1px solid var(--emerald-100);
  color: var(--emerald-800);
}

/* -----------------------------------------------------------------------------
   Check lists
   -------------------------------------------------------------------------- */
.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 8px;
}

.check-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--silver-700);
}

.check-ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--emerald-100);
  color: var(--emerald-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px;
}

/* -----------------------------------------------------------------------------
   Process steps
   -------------------------------------------------------------------------- */
.step {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.step-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: var(--shadow-card);
}

.step-body {
  flex: 1;
  min-width: 0;
}

.step-phase {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-secondary);
}

.step-body h3,
.step-body h2.h-as-h3 {
  font-size: 18px;
  margin-top: 3px;
}

.step-detail {
  margin-top: 13px;
  background: var(--silver-50);
  border: 1px solid var(--silver-200);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 13.5px;
  color: var(--silver-600);
}

/* -----------------------------------------------------------------------------
   Tables. Wide tables scroll inside their own container so the page body never
   scrolls horizontally.
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

thead tr {
  background: var(--navy-900);
  color: #fff;
}

th {
  text-align: left;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 13px;
}

td {
  padding: 13px 18px;
  border-top: 1px solid var(--silver-100);
  color: var(--silver-700);
}

tbody tr:nth-child(even) {
  background: var(--silver-50);
}

td.aspect {
  font-weight: 700;
  color: var(--navy-800);
}

/* -----------------------------------------------------------------------------
   Illustrative output rows
   -------------------------------------------------------------------------- */
.out-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border-radius: 9px;
  background: var(--silver-50);
  border: 1px solid var(--silver-100);
  margin-bottom: 9px;
}

.out-row .meta {
  min-width: 0;
}

.out-row .meta b {
  display: block;
  font-size: 12.5px;
  color: var(--navy-800);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.out-row .meta span {
  font-size: 11.5px;
  color: var(--silver-500);
}

/* -----------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

.flbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
}

.flbl .req {
  color: var(--danger);
}

.input,
select,
textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--silver-300);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--silver-800);
  background: #fff;
  transition: 0.15s;
}

.input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.12);
}

/* Invalid fields are marked with aria-invalid, so style from that attribute —
   the visual state and the accessible state can then never disagree. */
.input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

textarea {
  resize: vertical;
  min-height: 96px;
}

.hint {
  font-size: 12px;
  color: var(--silver-500);
}

.field-error {
  font-size: 12px;
  color: var(--danger);
  font-weight: 500;
}

/* -----------------------------------------------------------------------------
   Headings promoted from h3 to h2.

   Six pages went straight from h1 to h3, which leaves a hole in the document
   outline: someone navigating by heading hears a level that has no parent. The
   sections were always peers, so they are h2 now.

   The LEVEL is what assistive technology announces; the SIZE is what everyone
   else sees, and that must not move. `1.17em` is the browser's default h3 size,
   which is what these headings rendered at before — the stylesheet sets colour,
   weight and spacing for headings but no per-level size. Any inline size on an
   individual heading still wins, as it did.
   -------------------------------------------------------------------------- */
.h-as-h3 {
  font-size: 1.17em;
}

.chk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--silver-600);
}

.chk input {
  margin-top: 3px;
  flex-shrink: 0;
}

/* Honeypot. Hidden from people, reachable by naive bots. `display:none` is
   avoided because some bots skip such fields; this keeps it off-screen instead. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Contact page: details card beside the form.

   `minmax(0, …)` on both tracks rather than the bare `1fr 2fr` this replaced.
   A default `1fr` track is `minmax(auto, 1fr)`, whose floor is the content's
   own minimum width — so a long unbroken string such as an email address can
   push a track wider than its share and take the page with it.
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px;
  align-items: start;
}

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

  /* One column, and the details card first — a visitor on a phone should be
     able to call or email without scrolling past the whole form. */
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* -----------------------------------------------------------------------------
   FAQ disclosure.

   Built on <button> + hidden panel so it is keyboard operable and announced
   correctly. The prototype used a div with an onclick handler, which was
   unreachable by keyboard.
   -------------------------------------------------------------------------- */
.faq-item {
  border: 1px solid var(--silver-200);
  border-radius: 11px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}

.faq-q {
  width: 100%;
  padding: 16px 20px;
  font-weight: 600;
  font-family: inherit;
  color: var(--navy-900);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  font-size: 14.5px;
  text-align: left;
  background: none;
  border: none;
}

.faq-q:hover {
  background: var(--silver-50);
}

.faq-q .tw {
  flex-shrink: 0;
  transition: 0.2s;
  color: var(--brand-secondary);
  font-size: 20px;
  line-height: 1;
}

.faq-q[aria-expanded='true'] .tw {
  transform: rotate(45deg);
}

.faq-a {
  padding: 0 20px 18px;
  color: var(--silver-600);
  font-size: 14px;
}

.faq-a[hidden] {
  display: none;
}

/* --------------------------------------------------- legal page helpers ----
   Used by the privacy policy. These have no prototype counterpart: that page
   was owner-supplied boilerplate carved into the site later, so the styling
   below follows the existing design system rather than copying anything.

   Both classes were referenced in the markup and defined nowhere, so the
   table of contents rendered as an unstyled bullet list and the statutory
   references were indistinguishable from body copy. */

/* Table of contents for a long legal document. `.privacy-toc` came first and is
   kept so the privacy page is untouched; `.legal-toc` is the same treatment
   under a name that does not claim to belong to one page. */
.privacy-toc,
.legal-toc {
  background: var(--silver-50);
  border: 1px solid var(--silver-200);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 32px;
}

.privacy-toc h2,
.legal-toc h2 {
  font-size: 16px;
  margin-bottom: 12px;
}

.privacy-toc ul,
.legal-toc ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 28px;
}

.privacy-toc li,
.legal-toc li {
  font-size: 13.5px;
  line-height: 1.7;
}

.privacy-toc a,
.legal-toc a {
  color: var(--silver-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.privacy-toc a:hover,
.legal-toc a:hover {
  color: var(--brand-secondary);
  border-bottom-color: var(--brand-secondary);
}

/* Legal boilerplate quotes third-party policy URLs in full, and a bare URL is
   one unbreakable token. At 390px the longest is 408px wide and pushed the
   whole page sideways — a horizontal scrollbar on the privacy policy.
   Pre-existing in the owner-supplied text; fixed here rather than by rewording,
   because that copy is authoritative (docs/DECISIONS.md D-005). */
.prose a,
.prose p,
.prose li {
  overflow-wrap: anywhere;
}

/* Statutory citations sitting under a heading. Set apart from the body copy
   they qualify, without becoming a heading themselves. */
.legal-reference {
  font-size: 12.5px;
  color: var(--silver-500);
  font-style: italic;
  margin-top: -2px;
  margin-bottom: 6px;
}

@media (max-width: 880px) {
  .privacy-toc,
  .legal-toc {
    padding: 18px 20px;
  }
  .privacy-toc ul,
  .legal-toc ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================================
   Signed-in screens — portal and administrator
   Reuses the public design system; adds only what the application needs.
   ========================================================================== */

.app-main {
  min-height: 70vh;
  background: var(--silver-50);
  padding-bottom: 64px;
}

.app-head {
  background: linear-gradient(
    135deg,
    var(--navy-950) 0%,
    var(--navy-900) 70%,
    var(--brand-secondary) 140%
  );
  color: #fff;
  padding: 36px 0 30px;
}

.app-head h1 {
  color: #fff;
  font-size: clamp(24px, 3.5vw, 34px);
}

.app-lead {
  color: var(--silver-300);
  margin-top: 8px;
  max-width: 620px;
}

.app-main > .container > [data-status],
.app-main [data-status] {
  margin: 20px auto 0;
}

/* -----------------------------------------------------------------------------
   Administrator sign-in — the isolated shell on admin.ihm-cat.com

   One centred panel and nothing else. There is no site navigation, no footer,
   no registration link and no route back to the company portal on this page,
   because that host serves none of them. The panel keeps the product's own
   colours and type so an administrator can see at a glance that they are on the
   right system.

   Sized in `clamp()` and capped by `max-width`, so the same markup is a centred
   card at 1280px and a full-width panel at 375px with no horizontal overflow
   and no separate mobile layout to maintain.
   -------------------------------------------------------------------------- */
/* The shared `.app-main` reserves space under the signed-in screens' content.
   This page centres itself in the viewport instead, and that 64px would put the
   panel permanently off-centre and add a scrollbar to a page that fits. */
[data-shell='admin-auth'] .app-main {
  padding-bottom: 0;
}

.auth-panel-wrap {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  /* 68px is the header above it, so the panel is centred in what is left. */
  min-height: calc(100vh - 68px);
  padding: clamp(24px, 6vw, 72px) 20px;
}

.auth-panel {
  background: #fff;
  border: 1px solid var(--silver-200);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  max-width: 460px;
  overflow: hidden;
  width: 100%;
}

.auth-panel-head {
  background: linear-gradient(
    135deg,
    var(--navy-950) 0%,
    var(--navy-900) 70%,
    var(--brand-secondary) 140%
  );
  color: #fff;
  padding: 28px clamp(20px, 5vw, 30px) 26px;
}

.auth-panel-head h1 {
  color: #fff;
  font-size: clamp(21px, 4vw, 26px);
  margin: 0;
}

.auth-lead {
  color: var(--silver-300);
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 10px;
}

.auth-panel-body {
  padding: 26px clamp(20px, 5vw, 30px) 30px;
}

/* The header is the product mark alone: no navigation, nothing to space it
   against, so it sits at the start rather than being pushed apart. */
.app-header-admin-auth .app-topbar {
  justify-content: flex-start;
}

/* Signed-in application header. The area and the person are separate facts. */
.app-topbar {
  height: 68px;
}

.app-area-name {
  border-left: 1px solid var(--silver-300);
  color: var(--navy-700);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  padding: 5px 0 5px 14px;
  white-space: nowrap;
}

.app-header-nav {
  border-top: 1px solid var(--silver-200);
}

.app-nav-links {
  gap: 8px;
  padding: 7px 0 8px;
  width: 100%;
}

.app-header-admin .app-nav-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.app-nav-direct > a,
.app-nav-group summary {
  border-radius: 8px;
  color: var(--silver-600);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  padding: 8px 12px;
  text-align: center;
  user-select: none;
}

.app-nav-direct > a:hover,
.app-nav-group summary:hover,
.app-nav-group details[open] > summary {
  background: var(--silver-100);
  color: var(--navy-900);
  text-decoration: none;
}

.app-nav-direct > a[aria-current='page'],
.app-nav-group details[data-current='true'] > summary {
  background: var(--brand-light);
  color: var(--brand-secondary);
}

.app-nav-group {
  min-width: 0;
  position: relative;
}

.app-nav-group summary {
  align-items: center;
  gap: 7px;
  list-style: none;
}

.app-nav-group summary::-webkit-details-marker {
  display: none;
}

.app-nav-group details[open] summary span {
  transform: rotate(180deg);
}

.app-nav-menu {
  background: #fff;
  border: 1px solid var(--silver-200);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  left: 0;
  list-style: none;
  min-width: 220px;
  padding: 7px;
  position: absolute;
  top: calc(100% + 5px);
  z-index: 60;
}

.app-nav-menu a {
  display: block;
  padding: 9px 11px;
}

.app-nav-group:last-child .app-nav-menu {
  left: auto;
  right: 0;
}

.signed-in {
  align-items: baseline;
  color: var(--silver-500);
  display: flex;
  font-size: 12px;
  gap: 5px;
  white-space: nowrap;
}

.who {
  font-size: 13px;
  color: var(--navy-800);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A long company name is 200px of unwrappable text. On a narrow screen that,
   plus the logo, Sign out and the menu button, is wider than the viewport and
   pushed the whole page sideways. The name is not needed to operate the app —
   it is confirmation of who is signed in — so it goes first. */
@media (max-width: 560px) {
  .signed-in {
    display: none;
  }
}

@media (max-width: 1120px) {
  .app-header-nav {
    display: none;
  }

  .mobile-nav-group details {
    border-bottom: 1px solid var(--silver-200);
  }

  .mobile-nav-group summary {
    justify-content: space-between;
    padding: 10px 12px;
    text-align: left;
  }

  .mobile-nav-group .app-nav-menu {
    background: var(--silver-50);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    min-width: 0;
    padding: 4px 8px 9px 18px;
    position: static;
  }
}

/* Dashboard tiles. */
.stat-card {
  text-align: center;
  padding: 20px;
}
.stat-card b {
  display: block;
  font-size: 30px;
  color: var(--navy-900);
  font-weight: 800;
}
.stat-card span {
  display: block;
  font-size: 12.5px;
  color: var(--silver-500);
  margin-top: 4px;
}

.card-title {
  font-size: 15px;
  margin-bottom: 10px;
}

/* Definition grid used on both detail screens. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 28px;
  background: #fff;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.detail-grid dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--silver-500);
  font-weight: 700;
}
.detail-grid dd {
  margin-top: 4px;
  color: var(--silver-800);
  font-size: 14.5px;
}

/* Status pills. Colour never carries the meaning alone — the text is the label. */
.pill-ok {
  background: var(--emerald-100);
  color: var(--emerald-800);
}
.pill-bad {
  background: #fee2e2;
  color: #991b1b;
}
.pill-busy {
  background: var(--brand-light);
  color: var(--brand-secondary);
}
.pill-wait {
  background: var(--silver-200);
  color: var(--silver-700);
}

.btn-sm {
  padding: 5px 11px;
  font-size: 12.5px;
}

.action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

td.empty {
  color: var(--silver-500);
  font-style: italic;
}

/* Released result versions. */
.version-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.version-head h3 {
  font-size: 16px;
}

.file-list {
  list-style: none;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.file-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--silver-50);
  border: 1px solid var(--silver-100);
  border-radius: 9px;
}
.file-name {
  font-weight: 600;
  color: var(--navy-800);
  font-size: 13.5px;
}
.checksum {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--silver-500);
  margin-left: auto;
}

/* Human-review queue. */
.review-item {
  border: 1px solid var(--silver-200);
  border-radius: 11px;
  padding: 16px;
  margin-top: 12px;
  background: var(--silver-50);
}
.review-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.review-controls select {
  max-width: 220px;
}
.review-controls .input {
  flex: 1;
  min-width: 220px;
}

.radio-desc {
  display: block;
  font-size: 12.5px;
  color: var(--silver-600);
  margin-top: 2px;
}

@media (max-width: 880px) {
  .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .checksum {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ messages
   The thread is the official record of correspondence about a request. Message
   bodies are inserted with textContent, so `pre-wrap` is what preserves the
   line breaks the author typed, and `overflow-wrap` stops a long unbroken
   string from widening the page. */

.thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 460px;
  overflow-y: auto;
  padding: 4px 2px;
}

.msg {
  border: 1px solid var(--silver-200);
  border-radius: var(--radius);
  padding: 10px 13px;
  max-width: 46em;
}

.msg-mine {
  background: var(--brand-light);
  border-color: #d6e4f6;
  align-self: flex-end;
}

.msg-theirs {
  background: #fff;
  align-self: flex-start;
}

.msg-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 4px;
}

.msg-author {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--navy-900);
}

.msg-when {
  font-size: 12px;
  color: var(--silver-500);
  white-space: nowrap;
}

.msg-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--silver-800);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.unread-list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.unread-list li {
  margin-top: 2px;
}

/* ------------------------------------------------------- request form ------
   Choice cards, consent panel and upload box.
   Values taken verbatim from the approved prototype
   (docs/source/ihm-tool-preview-original.html); the markup differs because
   these are real controls rather than a click-through mock. */

/* A native radio wrapped in its own label, so the whole card is a click target
   and a screen reader announces the control with its description — no JS, and
   no `onclick` on a div as the prototype had. */
.radio-card {
  border: 1px solid var(--silver-300);
  border-radius: 11px;
  padding: 15px;
  cursor: pointer;
  transition: 0.15s;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.radio-card:hover {
  border-color: var(--brand-accent);
}

/* `.sel` is applied by script to mirror the checked state, because a parent
   cannot be selected from a child in CSS everywhere we support. `:has()` does
   the same thing natively where available — both are listed so the card is
   never left looking unselected. */
.radio-card.sel,
.radio-card:has(input:checked) {
  border-color: var(--brand-secondary);
  background: var(--brand-light);
  box-shadow: 0 0 0 1px var(--brand-secondary);
}

/* The ring goes on the card, because the radio itself is only 13px and its
   focus outline is easy to miss against the border. */
.radio-card:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.radio-card input {
  margin-top: 3px;
}

.radio-card b {
  color: var(--navy-900);
  font-size: 14px;
}

.radio-card p {
  font-size: 12.5px;
  color: var(--silver-600);
  margin-top: 2px;
}

.consent-box {
  border: 1px solid var(--amber-100);
  background: var(--amber-50);
  border-radius: 11px;
  padding: 16px;
  margin-top: 6px;
}

/* ---------------------------------------------------------- upload box ----
   The prototype's dashed drop area, driven by a real `<label for>` instead of
   an inline onclick. The input stays in the accessibility tree and keeps
   keyboard focus; it is only visually removed, never `display: none`, which
   would make it unreachable by keyboard. */
.upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.upload {
  display: block;
  border: 2px dashed var(--silver-300);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: 0.15s;
  background: var(--silver-50);
}

.upload:hover {
  border-color: var(--brand-accent);
  background: var(--brand-light);
}

/* Focus lands on the hidden input, so the visible ring must be drawn on the
   label that follows it. Without this the box would be operable by keyboard
   with no indication of where focus is. */
.upload-input:focus-visible + .upload {
  border-color: var(--brand-accent);
  background: var(--brand-light);
  box-shadow: var(--focus-ring);
}

.upload svg {
  width: 34px;
  height: 34px;
  stroke: var(--brand-secondary);
  margin-bottom: 8px;
}

.upload-primary {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy-900);
}

.upload-hint {
  display: block;
  font-size: 12.5px;
  color: var(--silver-600);
  margin-top: 4px;
}

/* Set once a file is chosen. Colour alone does not carry the meaning — the
   filename itself is the signal. */
.upload.has-file {
  border-style: solid;
  border-color: var(--brand-secondary);
  background: var(--brand-light);
}

@media (prefers-reduced-motion: reduce) {
  .radio-card,
  .upload {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   Quota meter.

   A real <meter>-role element rather than a decorative bar: the numbers live in
   aria-valuenow/valuemax/valuetext and are repeated in visible text beneath it,
   so the figure is never carried by the fill width alone.
   -------------------------------------------------------------------------- */
.quota-meter {
  margin-top: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--silver-200);
  overflow: hidden;
}

.quota-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--brand-secondary);
  transition: width 200ms ease;
}

/* A full allowance is a state worth noticing, not just a longer bar. */
.quota-meter[aria-valuenow][aria-valuemax]:not([aria-valuemax='0']) .quota-meter-fill {
  background: var(--brand-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .quota-meter-fill {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   Gates (Task 9B.3)

   Cards rather than a table row, because a gate carries two independent states
   plus health evidence plus what it is currently running, and a row wide enough
   for all of it stops being readable on a phone. The grid collapses to one
   column below 720px; nothing scrolls sideways.
   -------------------------------------------------------------------------- */
.gate-family {
  margin-top: 26px;
}
.gate-family h3 {
  margin-bottom: 4px;
}

.gate-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.gate-card {
  padding: 18px 20px;
  /* Long codes and references must wrap rather than widen the grid track. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.gate-title {
  font-size: 15.5px;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.gate-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--silver-100);
  border: 1px solid var(--silver-200);
  border-radius: 6px;
  padding: 2px 7px;
}

/*
   The two badges. Health and occupancy are separate facts and are shown as
   separate badges — colour is reinforcement, never the message, because each
   badge's text IS its state.
*/
.gate-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.gate-facts {
  margin-top: 12px;
}
.gate-facts dt {
  font-size: 11.5px;
}
.gate-facts dd {
  font-size: 13.5px;
}

.gate-actions {
  margin-top: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

/* An amber notice for something that needs a decision but is not an error. */
.notice-warn {
  background: var(--amber-50);
  border: 1px solid var(--amber-100);
  color: var(--amber-800);
}

@media (max-width: 720px) {
  .gate-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Client status timeline (Task 9C.2)

   Wraps rather than scrolls: on a 375px screen eight steps cannot sit on one
   line, and a horizontally scrolling progress indicator hides the end of its
   own sequence. Flex-wrap keeps every step visible and keeps the page free of
   horizontal overflow.
   --------------------------------------------------------------------------- */
.status-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.timeline-step {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, #d8dee6);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--muted, #5b6672);
  background: transparent;
}

.timeline-done {
  border-color: var(--ok-line, #b7d9c0);
  background: var(--ok-bg, #eef7f0);
  color: var(--ok-text, #1f5130);
}

.timeline-current {
  border-color: var(--accent, #1f4f82);
  background: var(--accent-bg, #eaf1f9);
  color: var(--accent, #1f4f82);
  font-weight: 600;
}

/* A request that ended without reaching "Result ready" — Rejected, Failed,
   Cancelled or Result expired. Marked distinctly so it does not read as a step
   still to come. */
.timeline-ended {
  border-color: var(--warn-line, #e2c9a0);
  background: var(--warn-bg, #fdf5e7);
  color: var(--warn-text, #7a5312);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Statistics dashboards (Task 10B)

   Hand-drawn inline SVG, no charting library and no CDN request — the site
   ships no third-party runtime and the privacy notice depends on that staying
   true.

   Everything below wraps rather than scrolls the page. A dashboard is the
   easiest place to introduce horizontal overflow at 375px, so every grid is
   `auto-fit` with a minimum column and every table sits in its own
   `overflow-x: auto` wrapper.
   --------------------------------------------------------------------------- */

.filter-bar fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* Figures. `minmax(0, …)` on the column so a long value cannot push the grid
   wider than its container. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px 20px;
  margin: 0 0 12px;
}

.stat-grid dt {
  font-size: 0.82rem;
  color: var(--muted, #5b6672);
  margin: 0;
}

.stat-grid dd {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  /* A long "Not available (0 of 0)" must wrap, not widen the page. */
  overflow-wrap: anywhere;
}

.statistics-dashboard .stat-grid {
  gap: 12px;
}

.statistics-dashboard .stat-metric {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line, #e3e8ee);
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff 0%, #f7f9fc 100%);
}

.statistics-dashboard .stat-metric dd {
  margin: 4px 0 0;
  color: var(--navy, #0c2c55);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.stats-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.stats-chart-grid > .card {
  min-width: 0;
  margin-top: 0 !important;
}

.stats-chart-card {
  overflow: hidden;
}

.definition-list dt {
  font-weight: 600;
  margin-top: 10px;
}

.definition-list dd {
  margin: 2px 0 0;
  color: var(--muted, #5b6672);
  font-size: 0.9rem;
}

.chart-wrap {
  margin: 12px 0;
  /* The SVG scales to this box; nothing inside it is a fixed pixel width. */
  max-width: 100%;
}

.chart {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.chart-label {
  fill: var(--muted, #5b6672);
}

.chart-value {
  fill: var(--ink, #1c2530);
  font-weight: 600;
}

.chart-bar {
  fill: var(--accent, #1f4f82);
}

/* The second series is HATCHED as well as tinted, so the two stay
   distinguishable in greyscale and to a colour-blind reader — colour is never
   the only signal. */
.chart-bar-secondary {
  stroke: var(--accent, #1f4f82);
  stroke-width: 0.3;
}

.chart-hatch-bg {
  fill: var(--ok-bg, #eef7f0);
}

.chart-hatch-line {
  fill: var(--accent, #1f4f82);
}

.chart-legend {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--muted, #5b6672);
}

.chart-empty {
  margin: 12px 0;
  font-style: italic;
}

/* The two quantities have different units and therefore different scales. */
.trend-chart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.trend-panel {
  min-width: 0;
  padding: 14px 14px 6px;
  border: 1px solid var(--line, #e3e8ee);
  border-radius: 12px;
  background: #fbfcfe;
}

.trend-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.trend-panel-heading h3 {
  margin: 0;
  color: var(--ink, #1c2530);
  font-size: 0.95rem;
  text-transform: capitalize;
}

.trend-panel-heading span {
  color: var(--muted, #5b6672);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.trend-plot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 4px;
}

.trend-grid-line {
  stroke: #dbe3ec;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.trend-axis-label {
  fill: var(--muted, #5b6672);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.trend-area {
  stroke: none;
  opacity: 0.14;
}

.trend-area-primary {
  fill: #1f5b91;
}

.trend-area-secondary {
  fill: #16736b;
}

.trend-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.trend-line-primary,
.trend-point-primary {
  stroke: #1f5b91;
}

.trend-line-secondary,
.trend-point-secondary {
  stroke: #16736b;
}

.trend-point {
  fill: #ffffff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Compact part-to-whole chart. The text legend carries the actual meaning. */
.donut-chart {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 190px;
}

.donut-plot {
  display: block;
  width: 100%;
  height: auto;
  max-width: 180px;
  margin: auto;
}

.donut-track,
.donut-segment {
  fill: none;
  stroke-width: 16;
}

.donut-track {
  stroke: #e8edf3;
}

.donut-segment {
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  stroke-linecap: butt;
}

.donut-total {
  fill: var(--navy, #0c2c55);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.donut-total-label {
  fill: var(--muted, #5b6672);
  font-size: 8px;
  text-transform: uppercase;
}

.donut-legend {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.donut-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.86rem;
}

.donut-key {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.donut-key-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.donut-legend strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.donut-segment-1 {
  stroke: #174f83;
}
.donut-segment-2 {
  stroke: #16736b;
}
.donut-segment-3 {
  stroke: #b86f12;
}
.donut-segment-4 {
  stroke: #a7445b;
}
.donut-segment-5 {
  stroke: #6a59a3;
}
.donut-segment-6 {
  stroke: #3d79b4;
}
.donut-segment-7 {
  stroke: #5d7d39;
}
.donut-segment-8 {
  stroke: #6b7580;
}
.donut-key-1 {
  background: #174f83;
}
.donut-key-2 {
  background: #16736b;
}
.donut-key-3 {
  background: #b86f12;
}
.donut-key-4 {
  background: #a7445b;
}
.donut-key-5 {
  background: #6a59a3;
}
.donut-key-6 {
  background: #3d79b4;
}
.donut-key-7 {
  background: #5d7d39;
}
.donut-key-8 {
  background: #6b7580;
}

/* The horizontal bar chart. HTML rather than SVG, so labels wrap instead of
   overrunning their column — see the note on barChart in charts.ts. */
.bar-chart {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr auto;
  align-items: center;
  gap: 10px;
}

.bar-label {
  font-size: 0.85rem;
  /* Wraps rather than overflows; the row grows to fit. */
  overflow-wrap: anywhere;
}

.bar-track {
  display: block;
  height: 14px;
  min-width: 0;
  border-radius: 3px;
  background: var(--line, #e3e8ee);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--accent, #1f4f82);
}

.bar-value {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  font-weight: 600;
}

/* At 375px the label column would squeeze the bar to nothing, so the row
   becomes two lines: label and value together, bar beneath. */
@media (max-width: 480px) {
  .bar-row {
    grid-template-columns: 1fr auto;
  }

  .bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 900px) {
  .stats-chart-grid,
  .trend-chart {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .donut-chart {
    grid-template-columns: 1fr;
  }

  .donut-plot {
    max-width: 160px;
  }
}

.chart-data {
  margin-top: 8px;
}

.chart-data summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--accent, #1f4f82);
  /* This is the only way to reach a chart's underlying numbers, so it has to
     be comfortably tappable. The text alone measured 23px tall on a 375px
     viewport; the padding brings the target to a usable size without changing
     how the line reads. */
  display: inline-block;
  padding: 8px 4px;
  min-height: 24px;
}

.progress {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: var(--line, #e3e8ee);
  overflow: hidden;
  margin: 6px 0;
}

.progress-fill {
  display: block;
  height: 100%;
  background: var(--accent, #1f4f82);
}

/* The live-snapshot card is visually distinct from the historical cards, so
   nobody reads a current gate count as a period average. */
.card-snapshot {
  border-left: 4px solid var(--accent, #1f4f82);
}

/* Tables scroll inside their own box; the PAGE never scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}

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

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
  .filter-row {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   Pages — the content-management screen.

   Two presentations of one list. The table is the desktop view; below the
   tablet breakpoint it is replaced by stacked cards carrying the same facts,
   because a ten-column table on a phone is either unreadable or a sideways
   scroll through the whole page. Neither presentation ever makes the PAGE
   scroll horizontally: wide content scrolls inside its own box.
   ========================================================================== */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: #fff;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--silver-600);
  font-weight: 600;
}

.kpi-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--navy-900);
  line-height: 1.15;
  margin: 4px 0 2px;
}

.kpi-note {
  font-size: 12px;
  color: var(--silver-600);
}

.cms-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 8px;
}

.cms-toolbar .field {
  margin: 0;
  min-width: 0;
}

.cms-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* The table scrolls inside its own box; the page body never scrolls sideways. */
.cms-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
  border-radius: var(--radius);
}

.cms-table {
  min-width: 100%;
}

.cms-table td {
  vertical-align: top;
}

.cms-page-name {
  display: block;
  font-weight: 600;
  color: var(--navy-900);
}

.cms-page-template {
  display: block;
  font-size: 12px;
  color: var(--silver-600);
}

.action-row-tight {
  gap: 6px;
  flex-wrap: wrap;
}

/* Cards replace the table below the tablet breakpoint. */
.cms-card-list {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.cms-card {
  background: #fff;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.cms-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.cms-card-head h3 {
  font-size: 15px;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cms-card-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 4px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

.cms-card-facts dt {
  color: var(--silver-600);
}

.cms-card-facts dd {
  color: var(--navy-900);
  overflow-wrap: anywhere;
}

/* ---- detail: editing column and publication panel ---------------------- */

.cms-detail {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 16px;
}

.cms-main {
  min-width: 0;
}

.cms-side {
  min-width: 0;
  position: sticky;
  top: 16px;
}

.cms-panel {
  background: #fff;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-card);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.cms-panel h3 {
  margin-top: 0;
}

.cms-panel h4 {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--silver-200);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--silver-600);
}

.cms-editor-actions {
  margin-top: 20px;
}

.cms-history-heading {
  margin-top: 32px;
}

.cms-preview-frame {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--silver-300);
  background: #fff;
  max-width: 100%;
}

/* ---- the structured block editor --------------------------------------- */

.block-card {
  border: 1px solid var(--silver-200);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}

.block-card-invalid {
  border-color: #b3261e;
  box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.12);
}

.block-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--silver-100);
  border-bottom: 1px solid var(--silver-200);
}

.block-toggle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 7px;
  text-align: left;
  min-width: 0;
}

.block-toggle:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}

.block-type {
  font-weight: 700;
  color: var(--navy-900);
  font-size: 14px;
}

.block-position {
  font-size: 12px;
  color: var(--silver-600);
}

.block-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.block-body {
  padding: 14px 12px 4px;
}

.repeater {
  border: 1px solid var(--silver-200);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 8px;
}

.repeater-item + .repeater-item {
  border-top: 1px solid var(--silver-200);
  padding-top: 12px;
  margin-top: 12px;
}

.repeater-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--silver-600);
}

.add-block {
  position: relative;
}

.add-block-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--silver-200);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 27, 45, 0.14);
  padding: 6px;
  list-style: none;
}

.add-block-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--navy-900);
}

.add-block-item:hover,
.add-block-item:focus-visible {
  background: var(--silver-100);
}

/* ---- the confirmation dialog ------------------------------------------- */

.btn-danger {
  background: #b3261e;
  color: #fff;
  border-color: #8f1d17;
}

.btn-danger:hover:not(:disabled) {
  background: #8f1d17;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 22, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.modal {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(10, 22, 40, 0.35);
}

.modal h2 {
  margin-top: 0;
  font-size: 19px;
}

.modal p {
  font-size: 14px;
  color: var(--silver-700);
  margin-bottom: 10px;
}

.modal-subject {
  font-size: 13.5px;
  background: var(--silver-100);
  border: 1px solid var(--silver-200);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--navy-900);
  overflow-wrap: anywhere;
}

.modal-form {
  margin-top: 12px;
}

.modal-actions {
  margin-top: 18px;
}

.slug-preview {
  display: block;
  font-size: 14px;
  background: var(--silver-100);
  border: 1px solid var(--silver-200);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--navy-900);
}

/* The page behind a modal neither scrolls nor can be reached. */
body[data-modal-open] {
  overflow: hidden;
}

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

@media (max-width: 1100px) {
  .cms-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .cms-side {
    position: static;
  }

  .cms-panel {
    max-height: none;
  }
}

@media (max-width: 880px) {
  .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cms-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Below the tablet breakpoint the table is replaced, not squeezed. */
  .cms-table-wrap {
    display: none;
  }

  .cms-card-list {
    display: flex;
  }
}

@media (max-width: 480px) {
  .kpi-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .cms-card-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .cms-card-facts dd {
    margin-bottom: 6px;
  }

  .modal {
    padding: 18px;
  }
}