/* Cyberverso Compass stylesheet.
   Tokens and base follow the cyberverso.net theme (assets/css/cyberverso.css),
   converted for a 16 pixel root: a theme value of 1.6rem is 1rem here.
   docs/design-notes.md explains the choices.

   Contents
    1. Fonts
    2. cyber/verso tokens (--cv-*)
    3. Light mode
    4. Compass tokens (--cp-*)
    5. Base: reset, document, type roles, links, focus
    6. Frame: skip link, header, step navigation, working column, footer
    7. Type and prose
    8. Buttons
    9. Fields
   10. Choices
   11. Panels, questions and disclosures
   12. Lists, links and action rows
   13. Notes, warnings, alerts, empty states
   14. Asset picker and asset tabs
   15. Progress and numbers
   16. Badges, scenario cards, action cards
   17. Dialog, toast and download bar
   18. Narrow layouts
   19. Preferences: reduced motion, more contrast, forced colours
   20. Print
*/

/* 1. Fonts
   Served from site/fonts/, each family with its SIL Open Font License beside it.
   Fraunces is variable (weights 100 to 900); IBM Plex Mono has one file per weight. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/fraunces-roman.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/fraunces-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/plex-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/plex-mono-500.woff2') format('woff2');
}

/* 2. cyber/verso tokens (--cv-*)
   Same names and values as the site, dark by default. Sizes converted for a
   16 pixel root. The article body size is not carried over: Compass has no
   article body. */

:root {
  /* Surface */
  --cv-bg: #0c0a08;
  --cv-bg-elev: #14110d;
  --cv-bg-tag: #1a1815;
  --cv-border: #1f1d18;
  --cv-border-strong: #2a2820;

  /* Text */
  --cv-text: #e8e4d9;
  --cv-text-strong: #f4f0e3;
  --cv-text-muted: #b3afa3;
  --cv-text-dim: #8a857a;
  --cv-text-faint: #5a5650;

  /* Accent */
  --cv-accent: #ff8c42;
  --cv-accent-soft: #d97631;
  --cv-accent-hover: #ffb380;
  --cv-accent-bg: #2b1a0d;

  /* Font stacks */
  --cv-font-serif: 'Fraunces', 'EB Garamond', Georgia, Times, serif;
  --cv-font-mono: 'IBM Plex Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --cv-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale (theme rem / 1.6) */
  --cv-fs-xxs: 0.625rem;   /* 10px */
  --cv-fs-xs: 0.75rem;     /* 12px */
  --cv-fs-sm: 0.8125rem;   /* 13px */
  --cv-fs-base: 1rem;      /* 16px */
  --cv-fs-md: 1.125rem;    /* 18px */
  --cv-fs-lg: 1.375rem;    /* 22px */
  --cv-fs-xl: 1.75rem;     /* 28px */
  --cv-fs-2xl: 2.25rem;    /* 36px */
  --cv-fs-3xl: 3rem;       /* 48px */

  /* Line heights */
  --cv-lh-tight: 1.15;
  --cv-lh-snug: 1.3;
  --cv-lh-normal: 1.55;
  --cv-lh-relaxed: 1.7;

  /* Letter spacing */
  --cv-ls-tighter: -0.02em;
  --cv-ls-tight: -0.01em;
  --cv-ls-normal: 0;
  --cv-ls-wide: 0.04em;
  --cv-ls-wider: 0.08em;

  /* Font weights */
  --cv-fw-regular: 400;
  --cv-fw-medium: 500;
  --cv-fw-semi: 600;

  /* Spacing (theme rem / 1.6) */
  --cv-space-1: 0.25rem;   /* 4px */
  --cv-space-2: 0.5rem;    /* 8px */
  --cv-space-3: 0.75rem;   /* 12px */
  --cv-space-4: 1rem;      /* 16px */
  --cv-space-5: 1.375rem;  /* 22px */
  --cv-space-6: 2rem;      /* 32px */
  --cv-space-7: 3rem;      /* 48px */
  --cv-space-8: 4rem;      /* 64px */
  --cv-space-9: 6rem;      /* 96px */

  /* Layout */
  --cv-content-max: 43.75rem; /* 700px, the site's reading measure */
  --cv-header-h: 4.5rem;      /* 72px */
  --cv-header-h-sm: 3.75rem;  /* 60px */

  /* Border and radius */
  --cv-radius-sm: 2px;
  --cv-radius-md: 4px;
  --cv-radius-lg: 8px;
  --cv-border-w: 0.5px;

  /* Motion */
  --cv-transition-fast: 120ms ease-out;
  --cv-transition-base: 180ms ease-out;
  --cv-transition-slow: 320ms ease-out;

  color-scheme: dark;
}

/* 3. Light mode, opt-in through the class cv-light-mode on the root element.
   Values from the site. theme-init.js sets the class before first paint. */

:root.cv-light-mode {
  --cv-bg: #faf7f0;
  --cv-bg-elev: #f4f0e3;
  --cv-bg-tag: #ece8da;
  --cv-border: #ddd6c3;
  --cv-border-strong: #c4bca4;

  --cv-text: #1a1612;
  --cv-text-strong: #0a0805;
  --cv-text-muted: #4a463f;
  --cv-text-dim: #6b6759;
  --cv-text-faint: #8a857a;

  --cv-accent: #a04a14;
  --cv-accent-hover: #7a3810;
  --cv-accent-bg: #f5e6d6;

  color-scheme: light;
}

/* 4. Compass tokens (--cp-*)
   What the site has no vocabulary for: form fields, focus, overlays, errors
   and the four risk bands. Errors have tokens of their own, in a violet no
   band uses, so that an error is never read as a risk rating. Field borders
   and the focus ring reach 3:1 against the surfaces they sit on; every band
   foreground reaches 4.5:1 on its background.
   A band is always shown with its text label, so colour is never the only
   signal. Critical is a solid fill, the other three are tints. */

:root {
  --cp-field-bg: var(--cv-bg-elev);
  --cp-field-border: var(--cv-text-dim);
  --cp-field-border-focus: var(--cv-accent);
  --cp-focus-ring: var(--cv-accent);
  --cp-backdrop: #000000a6;
  --cp-measure-prose: var(--cv-content-max);
  --cp-measure-wide: 72rem;    /* 1152px: panels and result lists */
  --cp-header-offset: calc(var(--cv-header-h) + var(--cv-space-3));
  --cp-danger-fg: #c8a6ff;
  --cp-danger-bg: #1c1526;

  --cp-band-low-fg: #9cc59a;
  --cp-band-low-bg: #13201a;
  --cp-band-moderate-fg: #e6c35c;
  --cp-band-moderate-bg: #241d0b;
  --cp-band-high-fg: #ff6f86;
  --cp-band-high-bg: #2c1117;
  --cp-band-critical-fg: #fff1ee;
  --cp-band-critical-bg: #9c2323;
}

:root.cv-light-mode {
  --cp-backdrop: #1a161266;
  --cp-danger-fg: #6236a8;
  --cp-danger-bg: #efe7f8;

  --cp-band-low-fg: #2f5f37;
  --cp-band-low-bg: #e2eedb;
  --cp-band-moderate-fg: #6a5000;
  --cp-band-moderate-bg: #f5e9bd;
  --cp-band-high-fg: #a3153c;
  --cp-band-high-bg: #f9dde2;
  --cp-band-critical-fg: #fff7f5;
  --cp-band-critical-bg: #8e1b1b;
}

/* The space the sticky header takes, plus a small gap, one value per header
   layout: one row, status on a second row, narrow, narrowest. Focus moves
   and in-page jumps stop below it, and the narrow toast sits under it. */

@media (max-width: 1023px) {
  :root {
    --cp-header-offset: calc(5rem + var(--cv-space-3));
  }
}

@media (max-width: 720px) {
  :root {
    --cp-header-offset: 8rem;
  }
}

@media (max-width: 359px) {
  :root {
    --cp-header-offset: 10rem;
  }
}

/* On a short viewport (a landscape phone, or 200 to 400 percent zoom) the
   header scrolls with the page, so nothing needs to clear it. */
@media (max-height: 30rem) {
  :root {
    --cp-header-offset: var(--cv-space-3);
  }
}

/* 5. Base: reset, document, type roles, links, focus
   Reading text is serif; interface chrome (labels, navigation, metadata,
   buttons, badges) is mono. */

* {
  box-sizing: border-box;
}

html {
  background-color: var(--cv-bg);
  color: var(--cv-text);
  font-synthesis: none;
  scroll-padding-top: var(--cp-header-offset);
}

body {
  margin: 0;
  background-color: var(--cv-bg);
  color: var(--cv-text);
  font-family: var(--cv-font-serif);
  font-size: var(--cv-fs-base);
  line-height: var(--cv-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea {
  font: inherit;
}

button, a, input, select, textarea {
  touch-action: manipulation;
}

button {
  cursor: pointer;
  border: 0;
}

h1, h2, h3 {
  font-family: var(--cv-font-serif);
  color: var(--cv-text-strong);
  letter-spacing: var(--cv-ls-tight);
  line-height: var(--cv-lh-tight);
}

.label, .eyebrow, .step-meta, .asset-icon, .asset-tab, .badge, .button,
.text-button, .tiny-links, .skip, .site-header, .step-nav, .site-footer {
  font-family: var(--cv-font-mono);
}

a {
  color: var(--cv-accent);
  transition: color var(--cv-transition-fast);
}

a:hover, a:focus-visible {
  color: var(--cv-accent-hover);
}

::selection {
  background: var(--cv-accent);
  color: var(--cv-bg);
}

:focus-visible {
  outline: 3px solid var(--cp-focus-ring);
  outline-offset: 3px;
}

/* Hidden stays hidden: !important because component rules set display
   (flex, grid, block) with equal or higher specificity. */

[hidden] {
  display: none !important;
}

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

/* 6. Frame: skip link, header, step navigation, working column, footer */

.skip {
  position: absolute;
  top: -100px;
  left: var(--cv-space-4);
  z-index: 60;
  padding: var(--cv-space-2) var(--cv-space-3);
  background: var(--cv-accent);
  color: var(--cv-bg);
  font-size: var(--cv-fs-sm);
  letter-spacing: var(--cv-ls-wide);
  text-decoration: none;
  border-radius: var(--cv-radius-sm);
}

.skip:focus {
  top: var(--cv-space-2);
}

.skip:hover, .skip:focus-visible {
  color: var(--cv-bg);
  outline-color: var(--cv-text-strong);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cv-bg);
  border-bottom: var(--cv-border-w) solid var(--cv-border);
  font-size: var(--cv-fs-sm);
}

/* A sticky header would take most of a short viewport, up to three quarters
   of it at 400 percent zoom; there it scrolls away with the page. */
@media (max-height: 30rem) {
  .site-header {
    position: static;
  }
}

.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "identity status actions lang";
  align-items: center;
  column-gap: var(--cv-space-5);
  min-height: var(--cv-header-h);
  max-width: var(--cp-measure-wide);
  margin: 0 auto;
  padding: 0 var(--cv-space-5);
}

.identity {
  grid-area: identity;
  display: flex;
  align-items: baseline;
  gap: var(--cv-space-3);
  white-space: nowrap;
}

/* The wordmark is set as text: lower case, Plex Mono Medium, slash in the
   text colour, no effects. The accent belongs to the label's slash. */

.wordmark {
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-md);
  font-weight: var(--cv-fw-medium);
  letter-spacing: 0;
  color: var(--cv-text-strong);
  text-decoration: none;
}

.wordmark:hover, .wordmark:focus-visible {
  color: var(--cv-text-strong);
}

.tool-label {
  font-size: var(--cv-fs-sm);
  letter-spacing: var(--cv-ls-wide);
  color: var(--cv-text-dim);
  text-decoration: none;
}

.tool-label:hover, .tool-label:focus-visible {
  color: var(--cv-accent);
}

.label-slash {
  color: var(--cv-accent);
}

.save-status {
  grid-area: status;
  min-width: 0;
  margin: 0;
  font-size: var(--cv-fs-xs);
  line-height: var(--cv-lh-snug);
  letter-spacing: var(--cv-ls-wide);
  color: var(--cv-text-dim);
  overflow-wrap: anywhere;
}

.header-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--cv-space-4);
}

.header-link {
  background: none;
  padding: var(--cv-space-1) 0;
  font-size: var(--cv-fs-sm);
  letter-spacing: var(--cv-ls-wide);
  text-transform: lowercase;
  color: var(--cv-text-muted);
  transition: color var(--cv-transition-fast);
}

.header-link:hover, .header-link:focus-visible {
  color: var(--cv-accent);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  font-size: var(--cv-fs-md);
  line-height: 1;
  color: var(--cv-text-muted);
  transition: color var(--cv-transition-fast);
}

.theme-toggle:hover, .theme-toggle:focus-visible {
  color: var(--cv-accent);
}

/* The text beside the glyph shows only inside the open narrow menu. */

.theme-label {
  display: none;
}

.header-lang {
  grid-area: lang;
}

#language-select {
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: var(--cv-space-1) var(--cv-space-2);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
}

.menu-toggle {
  grid-area: menu;
  display: none;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--cv-space-3);
  background: none;
  border: 1px solid var(--cp-field-border);
  border-radius: var(--cv-radius-sm);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  text-transform: lowercase;
  color: var(--cv-text-muted);
}

.site-header.menu-open .menu-toggle {
  color: var(--cv-accent);
  border-color: var(--cv-accent);
}

/* Step navigation: numbered and horizontal on wide screens, a compact
   previous / current / next control on narrow ones. */

.step-nav {
  border-bottom: var(--cv-border-w) solid var(--cv-border);
}

.step-list {
  display: flex;
  gap: var(--cv-space-6);
  max-width: var(--cp-measure-wide);
  margin: 0 auto;
  padding: 0 var(--cv-space-5);
  list-style: none;
}

.nav-step {
  display: flex;
  align-items: baseline;
  gap: var(--cv-space-2);
  padding: var(--cv-space-3) 0;
  background: none;
  border-bottom: 2px solid transparent;
  font-size: var(--cv-fs-sm);
  letter-spacing: var(--cv-ls-wide);
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--cv-text-dim);
  transition: color var(--cv-transition-fast);
}

.nav-step:hover {
  color: var(--cv-accent);
}

.nav-step.active {
  color: var(--cv-accent);
  border-bottom-color: var(--cv-accent);
}

.step-compact {
  display: none;
}

.step-prev, .step-next {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  background: none;
  font-size: var(--cv-fs-md);
  color: var(--cv-accent);
}

.step-prev:disabled, .step-next:disabled {
  cursor: default;
  opacity: 1;
  color: var(--cv-text-faint);
}

.step-current {
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  text-align: center;
  color: var(--cv-text-muted);
}

/* Working column. Prose keeps the site's reading measure; panels and
   result lists use the wider cap. A container that only receives focus
   from script draws no outline; controls inside keep theirs. */

main {
  max-width: var(--cp-measure-wide);
  min-height: 60vh;
  margin: 0 auto;
  padding: var(--cv-space-7) var(--cv-space-5) var(--cv-space-8);
}

main:focus, main:focus-visible {
  outline: none;
}

.intro, .hint, .note, .question-help, .panel > p {
  max-width: var(--cp-measure-prose);
}

.site-footer {
  border-top: var(--cv-border-w) solid var(--cv-border);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  color: var(--cv-text-dim);
}

.footer-inner {
  display: grid;
  gap: var(--cv-space-2);
  max-width: var(--cp-measure-wide);
  margin: 0 auto;
  padding: var(--cv-space-5);
}

.site-footer p {
  margin: 0;
  line-height: var(--cv-lh-normal);
}

.local-note strong {
  font-weight: var(--cv-fw-medium);
  color: var(--cv-text-muted);
}

.site-footer .sep {
  color: var(--cv-text-faint);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cv-space-2) var(--cv-space-4);
}

.footer-links .text-button {
  padding: 0;
  font-size: inherit;
  color: var(--cv-text-muted);
}

.site-footer a {
  color: var(--cv-text-muted);
}

.site-footer a:hover, .site-footer a:focus-visible, .footer-links .text-button:hover, .footer-links .text-button:focus-visible {
  color: var(--cv-accent);
}

@media (max-width: 1023px) {
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "identity actions lang" "status status status";
    row-gap: var(--cv-space-1);
    padding-top: var(--cv-space-3);
    padding-bottom: var(--cv-space-3);
  }
  .header-actions {
    justify-self: end;
  }
}

@media (max-width: 720px) {
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity menu" "actions actions" "status lang";
    column-gap: var(--cv-space-3);
    row-gap: var(--cv-space-2);
    min-height: var(--cv-header-h-sm);
    padding: var(--cv-space-2) var(--cv-space-4);
  }
  .identity {
    flex-wrap: wrap;
    column-gap: var(--cv-space-2);
    min-width: 0;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .header-actions {
    display: none;
    justify-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-top: var(--cv-border-w) solid var(--cv-border);
  }
  .site-header.menu-open .header-actions {
    display: flex;
  }
  .header-link {
    min-height: 2.75rem;
    padding: var(--cv-space-2) 0;
  }
  .theme-toggle {
    width: auto;
    height: auto;
    min-height: 2.75rem;
    gap: var(--cv-space-2);
    padding: var(--cv-space-2) 0;
  }
  .theme-label {
    display: inline;
    font-size: var(--cv-fs-sm);
    letter-spacing: var(--cv-ls-wide);
    text-transform: lowercase;
  }
  .step-list {
    display: none;
  }
  .step-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-space-3);
    padding: 0 var(--cv-space-2);
  }
  main {
    padding: var(--cv-space-6) var(--cv-space-4) var(--cv-space-7);
  }
  .footer-inner {
    padding: var(--cv-space-4);
  }
}

/* 7. Type and prose
   Headings take the site's serif at its sizes; reading text keeps the
   body's relaxed line height. */

h1 {
  font-size: var(--cv-fs-2xl);
  font-weight: var(--cv-fw-medium);
  letter-spacing: var(--cv-ls-tighter);
  line-height: var(--cv-lh-tight);
  margin: var(--cv-space-2) 0 var(--cv-space-4);
  max-width: var(--cp-measure-prose);
}

h2 {
  font-size: var(--cv-fs-xl);
  font-weight: var(--cv-fw-medium);
  margin: 0 0 var(--cv-space-3);
}

h3 {
  font-size: var(--cv-fs-md);
  font-weight: var(--cv-fw-medium);
  line-height: var(--cv-lh-snug);
  margin: 0 0 var(--cv-space-2);
}

p {
  line-height: var(--cv-lh-normal);
}

.eyebrow {
  display: block;
  font-size: var(--cv-fs-xs);
  font-weight: var(--cv-fw-regular);
  letter-spacing: var(--cv-ls-wider);
  line-height: var(--cv-lh-snug);
  text-transform: uppercase;
  color: var(--cv-accent);
}

.intro {
  color: var(--cv-text-muted);
  font-size: var(--cv-fs-md);
  line-height: var(--cv-lh-normal);
  margin: 0 0 var(--cv-space-6);
}

/* 8. Buttons
   Mono, medium weight, small radius. The primary carries the accent and
   appears once per view; secondary and destructive are outlined; the text
   button is quiet. Disabled and busy states change the border and the text,
   not only the opacity. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cv-space-2);
  min-height: 2.5rem;
  padding: var(--cv-space-2) var(--cv-space-4);
  background: var(--cv-accent);
  color: var(--cv-bg);
  border: 1px solid var(--cv-accent);
  border-radius: var(--cv-radius-sm);
  font-size: var(--cv-fs-sm);
  font-weight: var(--cv-fw-medium);
  letter-spacing: var(--cv-ls-wide);
  line-height: var(--cv-lh-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--cv-transition-fast), border-color var(--cv-transition-fast), color var(--cv-transition-fast);
}

.button:hover {
  background: var(--cv-accent-hover);
  border-color: var(--cv-accent-hover);
}

.button.secondary {
  background: transparent;
  color: var(--cv-text-strong);
  border-color: var(--cp-field-border);
}

.button.secondary:hover {
  background: transparent;
  color: var(--cv-accent);
  border-color: var(--cv-accent);
}

.button.small {
  min-height: 2rem;
  padding: var(--cv-space-1) var(--cv-space-3);
  font-size: var(--cv-fs-xs);
}

.button.danger {
  background: transparent;
  color: var(--cp-danger-fg);
  border-color: var(--cp-danger-fg);
}

.button.danger:hover {
  background: var(--cp-danger-bg);
}

.button:disabled, .button:disabled:hover {
  cursor: not-allowed;
  background: transparent;
  color: var(--cv-text-dim);
  border-style: dashed;
  border-color: var(--cv-text-dim);
}

/* Busy: the export button while the workbook is prepared. A turning ring
   before the label, still visible as a broken ring without motion. */

.button.busy, .button.busy:hover {
  cursor: progress;
  color: var(--cv-text-strong);
  border-color: var(--cv-accent);
}

.button.busy::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--cv-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.text-button {
  min-height: 2.5rem;
  padding: var(--cv-space-2) 0;
  background: none;
  color: var(--cv-text-muted);
  font-size: var(--cv-fs-sm);
  letter-spacing: var(--cv-ls-wide);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--cv-accent);
  text-underline-offset: 0.25em;
  transition: color var(--cv-transition-fast);
}

.text-button:hover {
  color: var(--cv-accent);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--cv-radius-sm);
  color: var(--cv-text-muted);
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-lg);
  line-height: 1;
  transition: color var(--cv-transition-fast), border-color var(--cv-transition-fast);
}

.icon-button:hover {
  color: var(--cv-text-strong);
  border-color: var(--cp-field-border);
}

/* Touch widths: every control reaches 44 by 44 pixels. */

@media (max-width: 720px), (pointer: coarse) {
  .button, .button.small, .text-button {
    min-height: 2.75rem;
  }
  .icon-button {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* 9. Fields
   A mono label above, the control on the field surface, help below in the
   muted colour, errors in their own colour (never a band's). The date and
   file inputs stay native; color-scheme on the root gives their pickers the
   current mode. */

.label {
  display: block;
  margin: 0 0 var(--cv-space-2);
  font-size: var(--cv-fs-xs);
  font-weight: var(--cv-fw-medium);
  letter-spacing: var(--cv-ls-wide);
  line-height: var(--cv-lh-snug);
  color: var(--cv-text-muted);
}

input, select, textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--cv-space-2) var(--cv-space-3);
  background: var(--cp-field-bg);
  color: var(--cv-text);
  border: 1px solid var(--cp-field-border);
  border-radius: var(--cv-radius-sm);
  line-height: var(--cv-lh-snug);
  transition: border-color var(--cv-transition-fast);
}

input:hover, select:hover, textarea:hover {
  border-color: var(--cv-text-muted);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--cp-field-border-focus);
}

input::placeholder, textarea::placeholder {
  color: var(--cv-text-dim);
  opacity: 1;
}

textarea {
  min-height: 5rem;
  line-height: var(--cv-lh-normal);
  resize: vertical;
}

input:disabled, select:disabled {
  cursor: not-allowed;
  color: var(--cv-text-dim);
  border-style: dashed;
}

input[type=date] {
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-sm);
  letter-spacing: var(--cv-ls-wide);
}

input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

input[type=file] {
  padding: var(--cv-space-1);
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-xs);
  color: var(--cv-text-muted);
}

input[type=file]::file-selector-button {
  min-height: 2.25rem;
  margin-right: var(--cv-space-3);
  padding: var(--cv-space-1) var(--cv-space-3);
  background: transparent;
  color: var(--cv-text-strong);
  border: 1px solid var(--cp-field-border);
  border-radius: var(--cv-radius-sm);
  font: inherit;
  letter-spacing: var(--cv-ls-wide);
  cursor: pointer;
}

input[type=file]::file-selector-button:hover {
  color: var(--cv-accent);
  border-color: var(--cv-accent);
}

input[type=checkbox], input[type=radio] {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--cv-accent);
}

.field {
  max-width: var(--cp-measure-prose);
  margin: var(--cv-space-4) 0;
}

.field-row {
  max-width: var(--cp-measure-prose);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--cv-space-4);
}

.alias-input {
  max-width: 26rem;
}

.hint {
  margin: var(--cv-space-2) 0;
  font-size: var(--cv-fs-sm);
  line-height: var(--cv-lh-normal);
  color: var(--cv-text-muted);
}

.status-line {
  font-size: var(--cv-fs-sm);
  line-height: var(--cv-lh-normal);
  color: var(--cv-text-muted);
}

.error, .hint.error {
  font-size: var(--cv-fs-sm);
  line-height: var(--cv-lh-normal);
  color: var(--cp-danger-fg);
}

.inline-status {
  min-height: 1.25rem;
}

/* 10. Choices
   Each answer and each checkbox is a full-width row. The native
   input stays visible, in the accessibility tree, and draws its own focus
   ring. Selected rows take a heavier accent border and the input's own mark,
   so the state does not rest on colour. Options are serif: they are short
   sentences, and in English several pass thirty characters. */

.option-set {
  display: grid;
  gap: var(--cv-space-2);
  max-width: var(--cp-measure-prose);
}

.option, .check-label {
  display: flex;
  align-items: center;
  gap: var(--cv-space-3);
  min-height: 2.75rem;
  padding: var(--cv-space-2) var(--cv-space-3);
  border: 1px solid var(--cp-field-border);
  border-radius: var(--cv-radius-sm);
  cursor: pointer;
  transition: border-color var(--cv-transition-fast);
}

.option span {
  font-size: var(--cv-fs-base);
  line-height: var(--cv-lh-snug);
}

.option:hover, .check-label:hover {
  border-color: var(--cv-text-muted);
}

.option input:checked + span {
  color: var(--cv-text-strong);
}

.option:has(input:checked), .check-label:has(input:checked) {
  padding: calc(var(--cv-space-2) - 1px) calc(var(--cv-space-3) - 1px);
  border: 2px solid var(--cv-accent);
  background: var(--cv-accent-bg);
  color: var(--cv-text-strong);
}

.check-label {
  max-width: var(--cp-measure-prose);
  font-size: var(--cv-fs-sm);
  line-height: var(--cv-lh-snug);
}

.check-label:has(input:disabled) {
  cursor: not-allowed;
  border-style: dashed;
  border-color: var(--cv-text-dim);
  color: var(--cv-text-dim);
}

.verification {
  margin-top: var(--cv-space-4);
  font-size: var(--cv-fs-sm);
  color: var(--cv-text-muted);
}

.evidence-fields {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0 var(--cv-space-4);
  margin-top: var(--cv-space-2);
}

/* 11. Panels, questions and disclosures
   One surface: a panel is a region under a hairline,
   with no fill, shadow or radius. A heading that introduces a group of
   panels or questions is a mono section label with the site's slash. */

.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cv-space-6);
}

.intro-hero {
  padding: var(--cv-space-4) 0 0;
}

/* The step number beside the first step's heading: decoration only. */

.hero-aside {
  flex: none;
  margin-top: var(--cv-space-5);
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-3xl);
  font-weight: var(--cv-fw-regular);
  line-height: 1;
  color: var(--cv-border-strong);
}

.panel {
  margin: var(--cv-space-7) 0 0;
  padding: var(--cv-space-5) 0 0;
  background: transparent;
  border: 0;
  border-top: var(--cv-border-w) solid var(--cv-border-strong);
  border-radius: 0;
}

.panel-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cv-space-2) var(--cv-space-4);
  margin-bottom: var(--cv-space-4);
}

.panel-title h2 {
  margin: 0;
}

.panel p:last-child {
  margin-bottom: 0;
}

.question-group-title, #view > h2 {
  margin: var(--cv-space-7) 0 var(--cv-space-2);
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-xs);
  font-weight: var(--cv-fw-regular);
  letter-spacing: var(--cv-ls-wide);
  line-height: var(--cv-lh-snug);
  text-transform: lowercase;
  color: var(--cv-text-dim);
}

.question-group-title::before, #view > h2::before {
  content: "/ ";
  content: "/ " / "";
  color: var(--cv-accent);
}

#view > h2 + .panel {
  margin-top: var(--cv-space-3);
}

.panel-title + .question-group-title {
  margin-top: var(--cv-space-2);
}

.intro-steps {
  max-width: var(--cp-measure-prose);
  padding-left: var(--cv-space-5);
  line-height: var(--cv-lh-normal);
}

.intro-steps li {
  margin: var(--cv-space-2) 0;
}

.intro-steps li::marker {
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-sm);
  color: var(--cv-accent);
}

.question {
  padding: var(--cv-space-6) 0;
  border-bottom: var(--cv-border-w) solid var(--cv-border-strong);
}

.question:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.question h3 {
  max-width: var(--cp-measure-prose);
}

.question-help {
  margin: 0 0 var(--cv-space-4);
  font-size: var(--cv-fs-sm);
  color: var(--cv-text-muted);
}

/* The questions that describe how an AI tool is used sit behind a hairline
   at the left, apart from the controls that follow. */

.context-question {
  padding-left: var(--cv-space-4);
  border-left: 2px solid var(--cv-border-strong);
}

/* Disclosures. One marker for every details element: the site's mono
   triangle in the accent, turned when open. */

details {
  margin: var(--cv-space-4) 0;
}

summary {
  display: flex;
  align-items: baseline;
  gap: var(--cv-space-2);
  min-height: 2.5rem;
  padding: var(--cv-space-2) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-sm);
  letter-spacing: var(--cv-ls-wide);
  line-height: var(--cv-lh-snug);
  color: var(--cv-accent);
  transition: color var(--cv-transition-fast);
}

@media (max-width: 720px), (pointer: coarse) {
  summary {
    min-height: 2.75rem;
  }
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "\25B8";
  content: "\25B8" / "";
  flex: none;
  width: 1ch;
}

details[open] > summary::before {
  content: "\25BE";
  content: "\25BE" / "";
}

summary:hover {
  color: var(--cv-text-strong);
}

.control-family {
  margin: 0;
  padding-top: var(--cv-space-2);
  border-top: var(--cv-border-w) solid var(--cv-border-strong);
}

.control-family > summary {
  font-family: var(--cv-font-serif);
  font-size: var(--cv-fs-lg);
  letter-spacing: var(--cv-ls-tight);
  color: var(--cv-text-strong);
}

.control-family > summary::before {
  font-family: var(--cv-font-mono);
  color: var(--cv-accent);
}

.control-family > summary:hover {
  color: var(--cv-accent);
}

details.panel > summary {
  font-size: var(--cv-fs-sm);
}

.review-area {
  margin-top: var(--cv-space-2);
  padding-top: var(--cv-space-4);
  border-top: var(--cv-border-w) solid var(--cv-border-strong);
}

.definition-list {
  max-width: var(--cp-measure-prose);
  margin: var(--cv-space-2) 0 var(--cv-space-4);
  font-size: var(--cv-fs-sm);
  line-height: var(--cv-lh-normal);
}

.definition-list dt {
  margin-top: var(--cv-space-3);
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  color: var(--cv-text-dim);
}

.definition-list dd {
  margin: 0;
  color: var(--cv-text);
}

/* Rule traces and identifiers are reference material: small and quiet. */

.rule-trace .hint {
  font-size: var(--cv-fs-xs);
}

.rule-trace details {
  margin: var(--cv-space-1) 0;
}

.rule-trace summary, .rule-trace details .hint {
  font-size: var(--cv-fs-xs);
  color: var(--cv-text-dim);
}

.rule-trace details .hint {
  font-family: var(--cv-font-mono);
  overflow-wrap: anywhere;
}

/* 12. Lists, links and action rows */

.tiny-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-space-1) var(--cv-space-4);
  margin-top: var(--cv-space-3);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  line-height: var(--cv-lh-snug);
  color: var(--cv-text-muted);
}

.tiny-links a, .document-downloads a {
  color: var(--cv-text-muted);
  text-decoration-color: var(--cv-accent);
  text-underline-offset: 0.2em;
}

.tiny-links a:hover, .document-downloads a:hover {
  color: var(--cv-accent);
}

.source-list {
  padding-left: var(--cv-space-5);
  font-size: var(--cv-fs-sm);
  line-height: var(--cv-lh-normal);
  overflow-wrap: anywhere;
}

.source-list li {
  margin: var(--cv-space-2) 0;
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cv-space-3);
  margin-top: var(--cv-space-6);
}

.actions-row.between {
  justify-content: space-between;
}

#view > .actions-row.between {
  padding-top: var(--cv-space-5);
  border-top: var(--cv-border-w) solid var(--cv-border-strong);
}

#view > .button {
  margin-top: var(--cv-space-5);
}

.document-downloads {
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-sm);
}

.document-downloads h3 {
  margin-top: var(--cv-space-4);
  font-family: var(--cv-font-serif);
}

.document-downloads a {
  display: inline-block;
  margin: var(--cv-space-1) var(--cv-space-4) var(--cv-space-3) 0;
}

.export-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0 var(--cv-space-7);
}

.export-file {
  margin: var(--cv-space-4) 0;
  padding: var(--cv-space-1) var(--cv-space-4);
  border-left: 2px solid var(--cv-border-strong);
}

.file-name {
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  color: var(--cv-text-muted);
  overflow-wrap: anywhere;
}

.result-list {
  padding-left: var(--cv-space-5);
  font-size: var(--cv-fs-sm);
  line-height: var(--cv-lh-relaxed);
  color: var(--cv-text-muted);
}

hr {
  margin: var(--cv-space-6) 0;
  border: 0;
  border-top: var(--cv-border-w) solid var(--cv-border-strong);
}

/* 13. Notes, warnings, alerts, empty states
   A note is a muted aside behind a
   left hairline. A warning adds a mono label and the accent, not a filled
   box. The alert for an unreadable save is the one strong treatment. */

.note {
  max-width: var(--cp-measure-prose);
  margin: var(--cv-space-5) 0;
  padding: var(--cv-space-1) 0 var(--cv-space-1) var(--cv-space-4);
  border-left: 1px solid var(--cv-border-strong);
  font-size: var(--cv-fs-sm);
  line-height: var(--cv-lh-normal);
  color: var(--cv-text-muted);
}

.note.warning {
  border-left: 2px solid var(--cv-accent);
  color: var(--cv-text);
}

.note.warning::before {
  content: "attenzione";
  display: block;
  margin-bottom: var(--cv-space-1);
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wider);
  line-height: var(--cv-lh-snug);
  color: var(--cv-accent);
}

:lang(en) .note.warning::before {
  content: "attention";
}

.alert {
  max-width: var(--cp-measure-prose);
  margin: var(--cv-space-5) 0;
  padding: var(--cv-space-4) var(--cv-space-5);
  background: var(--cp-danger-bg);
  color: var(--cv-text-strong);
  border: 1px solid var(--cp-danger-fg);
  border-left-width: 4px;
  border-radius: var(--cv-radius-sm);
  line-height: var(--cv-lh-normal);
}

.alert p {
  margin-top: 0;
}

.alert .actions-row {
  margin-top: var(--cv-space-4);
}

.empty {
  max-width: var(--cp-measure-prose);
  margin: var(--cv-space-6) 0;
  padding: var(--cv-space-6);
  border: 1px dashed var(--cv-border-strong);
  border-radius: var(--cv-radius-sm);
  color: var(--cv-text-muted);
}

.empty h2 {
  margin: 0;
}

.empty p {
  margin: var(--cv-space-2) 0 var(--cv-space-4);
}

.proof-notice {
  margin-top: var(--cv-space-2);
}

/* 14. Asset picker and asset tabs
   A quiet grid: the kind as a small mono tag, the name in
   mono, the hint in serif beneath. Selected tiles take the heavier accent
   border and a check mark, as answer rows do. */

.asset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cv-space-3);
}

.asset-choice {
  position: relative;
  display: block;
  min-height: 5.5rem;
  padding: var(--cv-space-3) var(--cv-space-6) var(--cv-space-3) var(--cv-space-4);
  background: transparent;
  color: var(--cv-text);
  border: 1px solid var(--cp-field-border);
  border-radius: var(--cv-radius-sm);
  text-align: left;
  transition: border-color var(--cv-transition-fast);
}

.asset-choice:hover {
  border-color: var(--cv-accent);
}

.asset-choice.selected {
  padding: calc(var(--cv-space-3) - 1px) calc(var(--cv-space-6) - 1px) calc(var(--cv-space-3) - 1px) calc(var(--cv-space-4) - 1px);
  background: var(--cv-accent-bg);
  border: 2px solid var(--cv-accent);
}

.asset-choice.selected::after {
  content: "\2713";
  content: "\2713" / "";
  position: absolute;
  top: var(--cv-space-2);
  right: var(--cv-space-3);
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-sm);
  color: var(--cv-accent);
}

.asset-icon {
  display: block;
  margin-bottom: var(--cv-space-1);
  font-size: var(--cv-fs-xxs);
  letter-spacing: var(--cv-ls-wider);
  line-height: var(--cv-lh-snug);
  color: var(--cv-text-dim);
}

.asset-choice strong {
  display: block;
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-sm);
  font-weight: var(--cv-fw-medium);
  letter-spacing: var(--cv-ls-wide);
  line-height: var(--cv-lh-snug);
  color: var(--cv-text-strong);
}

.asset-choice small {
  display: block;
  margin-top: var(--cv-space-1);
  font-size: var(--cv-fs-sm);
  line-height: var(--cv-lh-snug);
  color: var(--cv-text-muted);
}

.asset-row {
  display: grid;
  grid-template-columns: 11rem minmax(6rem, 1fr) auto;
  align-items: center;
  gap: var(--cv-space-3);
  max-width: var(--cp-measure-prose);
  padding: var(--cv-space-2) 0;
  border-top: var(--cv-border-w) solid var(--cv-border-strong);
}

.asset-row:first-of-type {
  border-top: 0;
}

.asset-kind {
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  color: var(--cv-text-muted);
}

/* Asset tabs on step 2. Mono labels on one line under a hairline; the
   selected tab is marked by a heavier underline and the strong text colour.
   The row scrolls sideways on its own, never the page. */

.asset-tabs {
  display: flex;
  gap: var(--cv-space-5);
  margin: var(--cv-space-4) 0 0;
  padding: var(--cv-space-1) var(--cv-space-1) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-bottom: var(--cv-border-w) solid var(--cv-border-strong);
  scrollbar-width: thin;
}

.asset-tab {
  flex: none;
  min-height: 2.75rem;
  padding: var(--cv-space-2) 0;
  background: none;
  border-bottom: 2px solid transparent;
  font-size: var(--cv-fs-sm);
  letter-spacing: var(--cv-ls-wide);
  white-space: nowrap;
  color: var(--cv-text-muted);
  transition: color var(--cv-transition-fast), border-color var(--cv-transition-fast);
}

.asset-tab:hover {
  color: var(--cv-accent);
}

.asset-tab.active {
  color: var(--cv-text-strong);
  border-bottom-color: var(--cv-accent);
}

.asset-tab:focus-visible {
  outline-offset: -3px;
}

/* 15. Progress and numbers
   A thin line for progress and mono figures over
   serif captions, divided by hairlines rather than set in tiles. */

.step-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cv-space-2) var(--cv-space-4);
  margin-bottom: var(--cv-space-4);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  color: var(--cv-text-muted);
}

progress {
  appearance: none;
  width: 10rem;
  height: 0.25rem;
  background: var(--cv-border-strong);
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: var(--cv-border-strong);
}

progress::-webkit-progress-value {
  background: var(--cv-accent);
}

progress::-moz-progress-bar {
  background: var(--cv-accent);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cv-space-5);
  margin: var(--cv-space-6) 0;
}

.summary-cell {
  padding-top: var(--cv-space-3);
  border-top: var(--cv-border-w) solid var(--cv-border-strong);
}

.summary-cell .number {
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-2xl);
  font-weight: var(--cv-fw-regular);
  letter-spacing: var(--cv-ls-tight);
  line-height: var(--cv-lh-tight);
  color: var(--cv-text-strong);
}

.summary-cell span {
  display: block;
  margin-top: var(--cv-space-1);
  font-size: var(--cv-fs-sm);
  line-height: var(--cv-lh-snug);
  color: var(--cv-text-muted);
}

/* 16. Badges, scenario cards, action cards
   Mono tags with a hairline edge. "To confirm" is neutral, with a
   dashed edge, never a band colour. The four bands use their tokens, a one
   pixel border in the band's text colour and always their word. A rating
   due for review keeps its band and adds a marker and the text suffix. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cv-space-1);
  padding: 0.125rem var(--cv-space-2);
  background: transparent;
  color: var(--cv-text-muted);
  border: 1px solid var(--cv-border-strong);
  border-radius: var(--cv-radius-sm);
  font-size: var(--cv-fs-xs);
  font-weight: var(--cv-fw-regular);
  letter-spacing: var(--cv-ls-wide);
  line-height: var(--cv-lh-snug);
  white-space: nowrap;
}

.badge.verify {
  color: var(--cv-text-muted);
  border: 1px dashed var(--cv-text-dim);
}

.badge.low {
  background: var(--cp-band-low-bg);
  color: var(--cp-band-low-fg);
  border-color: var(--cp-band-low-fg);
}

.badge.moderate {
  background: var(--cp-band-moderate-bg);
  color: var(--cp-band-moderate-fg);
  border-color: var(--cp-band-moderate-fg);
}

.badge.high {
  background: var(--cp-band-high-bg);
  color: var(--cp-band-high-fg);
  border-color: var(--cp-band-high-fg);
}

.badge.critical {
  background: var(--cp-band-critical-bg);
  color: var(--cp-band-critical-fg);
  border-color: var(--cp-band-critical-fg);
  font-weight: var(--cv-fw-medium);
}

.badge.due {
  border-style: dashed;
}

.badge.due::before {
  content: "\21BB";
  content: "\21BB" / "";
}

/* Scenario cards: asset as a mono eyebrow, the scenario as a serif heading,
   the band, then identifiers and the ordering reason as quiet metadata.
   The reason is prose, so it never reads as a score. */

.risk-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cv-space-2);
}

.risk-header h3 {
  max-width: var(--cp-measure-prose);
  margin: var(--cv-space-1) 0 0;
  font-size: var(--cv-fs-lg);
}

.risk-header .badge {
  max-width: 100%;
  white-space: normal;
}

.risk-ids {
  margin: var(--cv-space-3) 0 0;
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  color: var(--cv-text-dim);
  overflow-wrap: anywhere;
}

.risk-reason {
  margin: var(--cv-space-1) 0 var(--cv-space-2);
}

/* Action cards: a numbered short list. The number is a quiet mono figure,
   not a tile. */

.action-card {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--cv-space-3);
  padding: var(--cv-space-5) 0;
  border-top: var(--cv-border-w) solid var(--cv-border-strong);
}

.action-card:first-of-type {
  border-top: 0;
}

.action-card h3 {
  max-width: var(--cp-measure-prose);
  margin-top: var(--cv-space-1);
}

.action-card p {
  max-width: var(--cp-measure-prose);
  margin: var(--cv-space-1) 0;
  font-size: var(--cv-fs-sm);
  color: var(--cv-text-muted);
}

.action-card .check-label {
  margin-top: var(--cv-space-3);
}

.action-rank {
  padding-top: var(--cv-space-1);
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-md);
  line-height: var(--cv-lh-snug);
  color: var(--cv-text-dim);
}

.recovery-card {
  position: relative;
}

/* The heading leaves room for the remove button beside it. */
.recovery-card > h2 {
  padding-right: 3rem;
}

.recovery-card > .icon-button {
  position: absolute;
  top: var(--cv-space-4);
  right: 0;
}

.recovery-card > .hint:first-of-type {
  margin-top: 0;
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  color: var(--cv-text-dim);
}

/* 17. Dialog, toast and download bar
   The dialog sits on the page surface with
   a strong border over a dimmed backdrop; the native modal keeps focus
   inside it. Its head stays in view while the body scrolls. The toast and
   the download bar share one fixed column at the bottom, so they never
   overlap; on narrow screens the toast moves under the header. */

dialog {
  width: min(40rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0 var(--cv-space-6) var(--cv-space-6);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 5rem;
  background: var(--cv-bg);
  color: var(--cv-text);
  border: 1px solid var(--cv-text-muted);
  border-radius: var(--cv-radius-sm);
}

dialog::backdrop {
  background: var(--cp-backdrop);
}

.dialog-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cv-space-3);
  margin: 0 0 var(--cv-space-4);
  padding: var(--cv-space-5) 0 var(--cv-space-3);
  background: var(--cv-bg);
  border-bottom: var(--cv-border-w) solid var(--cv-border-strong);
}

dialog h2 {
  margin: 0;
  font-size: var(--cv-fs-lg);
}

dialog h3 {
  margin-top: var(--cv-space-6);
}

dialog p {
  font-size: var(--cv-fs-sm);
  color: var(--cv-text-muted);
}

dialog .actions-row {
  margin-top: var(--cv-space-4);
}

dialog > div > .button.danger {
  margin-top: var(--cv-space-5);
}

.overlays {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--cv-space-2);
  padding: var(--cv-space-4);
  pointer-events: none;
}

.overlays > * {
  pointer-events: auto;
}

#toast {
  max-width: min(36rem, 100%);
  padding: var(--cv-space-3) var(--cv-space-4);
  background: var(--cv-bg);
  color: var(--cv-text-strong);
  border: 1px solid var(--cv-text-dim);
  border-left: 2px solid var(--cv-accent);
  border-radius: var(--cv-radius-sm);
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-sm);
  letter-spacing: var(--cv-ls-wide);
  line-height: var(--cv-lh-snug);
}

.download-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cv-space-4);
  width: min(36rem, 100%);
  padding: var(--cv-space-3) var(--cv-space-3) var(--cv-space-3) var(--cv-space-4);
  background: var(--cv-bg);
  border: 1px solid var(--cv-text-dim);
  border-radius: var(--cv-radius-sm);
  font-family: var(--cv-font-mono);
  font-size: var(--cv-fs-xs);
  letter-spacing: var(--cv-ls-wide);
  line-height: var(--cv-lh-snug);
}

.download-result strong {
  display: block;
  margin-bottom: var(--cv-space-1);
  font-weight: var(--cv-fw-medium);
  color: var(--cv-text-strong);
}

.download-result a {
  display: block;
  overflow-wrap: anywhere;
}

/* While the bar is shown the page can scroll past it, so it never hides the
   last controls of a step for good. */

body:has(.download-result:not([hidden])) {
  padding-bottom: 7rem;
}

/* Focus moves and in-page jumps also stop above the bar: its height
   (about 5rem with the margin around it) plus a gap. */

html:has(.download-result:not([hidden])) {
  scroll-padding-bottom: 6.5rem;
}

@media (max-width: 720px) {
  .overlays {
    padding: var(--cv-space-2);
  }
  #toast {
    position: fixed;
    top: var(--cp-header-offset);
    right: var(--cv-space-2);
    left: var(--cv-space-2);
    max-width: none;
  }
  .download-result {
    width: 100%;
  }
  body:has(.download-result:not([hidden])) {
    padding-bottom: 9rem;
  }
  dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 0 var(--cv-space-4) var(--cv-space-5);
  }
}

/* 18. Narrow layouts */

@media (max-width: 1050px) {
  .asset-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .export-grid {
    grid-template-columns: 1fr;
  }
  .hero-aside {
    display: none;
  }
}

@media (max-width: 720px) {
  .panel {
    margin-top: var(--cv-space-6);
  }
  .context-question {
    padding-left: var(--cv-space-3);
  }
  .field-row {
    grid-template-columns: 1fr;
  }
  .asset-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cv-space-1) var(--cv-space-2);
  }
  .asset-kind {
    grid-column: 1 / -1;
  }
  .summary-grid {
    gap: var(--cv-space-3);
  }
  .summary-cell .number {
    font-size: var(--cv-fs-xl);
  }
  .summary-cell span {
    font-size: var(--cv-fs-xs);
  }
  .evidence-fields {
    grid-template-columns: 1fr;
  }
  .risk-header h3 {
    font-size: var(--cv-fs-md);
  }
  .badge {
    white-space: normal;
  }
  .action-card {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--cv-space-2);
  }
  .actions-row.between {
    align-items: stretch;
  }
  .intro {
    font-size: var(--cv-fs-base);
  }
  h1, .hero h1 {
    font-size: var(--cv-fs-xl);
  }
}

/* 19. Preferences: reduced motion, more contrast, forced colours */

/* Without motion every transition and animation stops, the busy ring
   included; it stays visible as a still, broken ring. !important because a
   preference must win over every component's own transition. */

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

/* More contrast: hairlines become full lines in the dim text colour, the
   muted and dim text move one step towards the strong text. */

@media (prefers-contrast: more) {
  :root:not(.cv-light-mode) {
    --cv-border: #8a857a;
    --cv-border-strong: #b3afa3;
    --cv-text-muted: #e8e4d9;
    --cv-text-dim: #b3afa3;
    --cv-border-w: 1px;
  }
  :root.cv-light-mode {
    --cv-border: #6b6759;
    --cv-border-strong: #4a463f;
    --cv-text-muted: #1a1612;
    --cv-text-dim: #4a463f;
    --cv-border-w: 1px;
  }
}

/* Forced colours: the system palette replaces ours. Selected and current
   states keep their heavier borders in Highlight, disabled controls use
   GrayText, every badge keeps an edge and its word, and the progress line
   is drawn with system colours. */

@media (forced-colors: active) {
  .badge, .badge.low, .badge.moderate, .badge.high, .badge.critical {
    border-color: CanvasText;
  }
  .option:has(input:checked), .check-label:has(input:checked), .asset-choice.selected {
    border-color: Highlight;
  }
  .nav-step, .asset-tab {
    border-bottom-color: Canvas;
  }
  .nav-step.active, .asset-tab.active {
    border-bottom-color: Highlight;
  }
  .button:disabled, .check-label:has(input:disabled), .step-prev:disabled, .step-next:disabled {
    color: GrayText;
    border-color: GrayText;
  }
  progress {
    forced-color-adjust: none;
    background: Canvas;
    border: 1px solid CanvasText;
  }
  progress::-webkit-progress-bar {
    background: Canvas;
  }
  progress::-webkit-progress-value {
    background: Highlight;
  }
  progress::-moz-progress-bar {
    background: Highlight;
  }
}

/* 20. Print
   Made for step 4: scenarios and the chosen actions on a light
   surface, without navigation, forms or controls. Bands print as words in
   an outlined tag, since backgrounds are usually not printed. The hidden
   parts use !important because component rules set display with higher
   specificity. */

@media print {
  :root, :root.cv-light-mode {
    --cv-bg: #ffffff;
    --cv-bg-elev: #ffffff;
    --cv-border: #8a857a;
    --cv-border-strong: #4a463f;
    --cv-text: #1a1612;
    --cv-text-strong: #0a0805;
    --cv-text-muted: #3a362f;
    --cv-text-dim: #4a463f;
    --cv-accent: #7a3810;
    --cv-border-w: 1px;
    color-scheme: light;
  }
  @page {
    margin: 16mm 14mm;
  }
  body {
    font-size: 10.5pt;
  }
  .skip, .site-header, .step-nav, .site-footer, .overlays, .hero-aside,
  .button, .text-button, .icon-button, .review-area, .actions-row,
  .tiny-links, .rule-trace details, details.panel, #view > .note,
  .action-card .check-label, .action-card .field-row, .action-card .hint:not(.risk-reason) {
    display: none !important;
  }
  /* Only the actions the reader chose. */
  .action-card:not(:has(input[type=checkbox]:checked)) {
    display: none;
  }
  main {
    max-width: none;
    padding: 0;
  }
  details:not([open]) {
    display: none;
  }
  summary {
    display: none !important;
  }
  .panel {
    margin-top: 6mm;
    padding-top: 3mm;
  }
  .risk-header, .action-card {
    break-inside: avoid;
  }
  .badge, .badge.low, .badge.moderate, .badge.high, .badge.critical {
    background: none;
    color: var(--cv-text-strong);
    border: 1px solid var(--cv-text-strong);
  }
  .badge.critical {
    font-weight: var(--cv-fw-medium);
    border-width: 2px;
  }
  .summary-grid {
    margin: 4mm 0;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
}