/* GENERATED from core/design/nib.css by tools/sync-design.mjs. Do not edit this copy:
 * edit core/design/nib.css and run `node tools/sync-design.mjs`.
 * tests/design-sync.mjs fails when the two differ. */
/* Nib components.
 *
 * Plain class names, no framework, no build step. Built only from core/design/tokens.css:
 * this file holds no colour value of its own (tests/design-sync.mjs checks), so a colour
 * changes in one place.
 *
 * ONE STYLESHEET, TWO FACES. Put `nib-app` on the staff console's <body> and
 * `nib-public` on the public site's. Each sets a handful of "face" variables (text
 * sizes, control height, target size, padding) and every component reads them, so the
 * same `.nib-btn` is a 36px dense button in the console and a 52px button a person of
 * 80 can hit on a phone. Without either class a component takes the app's sizes.
 *
 * Load order: fonts.css, tokens.css, nib.css. See core/design/README.md.
 * Generated copies live in the apps (tools/sync-design.mjs). Edit THIS one.
 */

/* ==========================================================================
   Faces
   ========================================================================== */

:where(:root),
.nib-app {
  --fs-title: var(--app-title-md);
  --fs-heading: var(--app-title-sm);
  --fs-body: var(--app-text-base);
  --fs-small: var(--app-text-sm);
  --fs-meta: var(--app-text-xs);
  --fs-label: var(--app-text-sm);
  --fs-value: var(--app-text-md);
  --fs-control: var(--app-text-base);
  --fs-badge: var(--app-text-xs);
  --fs-doc: var(--doc-text-app);
  --lh-body: var(--app-leading);
  --control-h: var(--control-h-md);
  --target: var(--target-min);
  --pad-card: var(--space-5);
  --gap-field: var(--space-4);
}

.nib-public {
  --fs-title: var(--public-title-lg);
  --fs-heading: var(--public-title-md);
  --fs-body: var(--public-text-base);
  --fs-small: var(--public-text-hint);
  --fs-meta: var(--public-text-sm);
  --fs-label: var(--public-text-lg);
  --fs-value: var(--public-text-base);
  --fs-control: var(--public-text-base);
  --fs-badge: var(--public-text-badge);
  --fs-doc: var(--doc-text-public);
  --lh-body: var(--public-leading);
  --control-h: var(--control-h-lg);
  --target: var(--target-min-public);
  --pad-card: var(--space-6);
  --gap-field: var(--space-6);
}

/* ==========================================================================
   Base
   ========================================================================== */

:where(.nib-app, .nib-public),
:where(.nib-app, .nib-public) *,
:where(.nib-app, .nib-public) ::before,
:where(.nib-app, .nib-public) ::after { box-sizing: border-box; }

.nib-app,
.nib-public {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
.nib-app { background: var(--surface-canvas); }
/* Focus moved near the top must not land under the sticky bar (SC 2.4.11). */
html:has(> body.nib-app) { scroll-padding-top: calc(var(--layout-topbar-h) + var(--space-2)); }
.nib-public { background: var(--surface-page); }

:where(.nib-app, .nib-public) ::selection { background: var(--green-200); color: var(--text-strong); }

/* The one focus style. 3px green-700, 2px off the element: 3.5:1 on white. */
:where(.nib-app, .nib-public) :focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
/* A heading that receives focus after a route change is announced, not operated. */
:where(.nib-app, .nib-public) :where(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }

:where(.nib-app, .nib-public) :where(h1, h2, h3, h4, p, ul, ol, dl, figure) { margin: 0; }
:where(.nib-app, .nib-public) img { max-width: 100%; height: auto; }

.nib-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.nib-skip {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-9));
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-inverse); color: var(--text-on-dark);
  border-radius: var(--radius-pill); font-weight: var(--weight-bold);
  text-decoration: none;
}
.nib-skip:focus { top: var(--space-3); }

/* ==========================================================================
   Type
   ========================================================================== */

.nib-title,
.nib-heading,
.nib-display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--text-strong);
}
.nib-title {
  font-size: var(--fs-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.nib-heading {
  font-size: var(--fs-heading);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.nib-display em,
.nib-title em,
.nib-heading em { font-style: italic; }

.nib-subheading {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}

.nib-eyebrow {
  font-size: var(--fs-meta);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-link);
  line-height: var(--leading-normal);
}

.nib-lead { font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-normal); }
.nib-public .nib-lead { font-size: var(--public-text-lg); }

.nib-text { font-size: var(--fs-body); }
.nib-small { font-size: var(--fs-small); }
.nib-meta { font-size: var(--fs-meta); color: var(--text-muted); }
.nib-muted { color: var(--text-muted); }
.nib-strong { color: var(--text-strong); font-weight: var(--weight-semibold); }
.nib-mono { font-family: var(--font-mono); font-size: 0.92em; }
.nib-num { font-variant-numeric: tabular-nums; }

.nib-link,
:where(.nib-app, .nib-public) :where(p, li, dd, td, .nib-hint, .nib-banner__body) > a:not([class]) {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: 2px;
}
.nib-link:hover,
:where(.nib-app, .nib-public) :where(p, li, dd, td, .nib-hint, .nib-banner__body) > a:not([class]):hover {
  color: var(--green-900);
  text-decoration-thickness: 2px;
}

/* Meta lines with dot separators: "Matter 4233 · Open · Rowan Betteridge". */
.nib-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
.nib-meta-line > * + *::before { content: "\00B7"; margin-right: var(--space-2); color: var(--neutral-400); }

.nib-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5em; height: 1.5em; padding: 0 0.35em;
  font: var(--weight-semibold) var(--app-text-2xs) / 1 var(--font-body);
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
}

.nib-divider { border: 0; border-top: 1px solid var(--border-divider); margin: var(--space-5) 0; }

/* ==========================================================================
   Icon. Any icon token from tokens.css, drawn in currentColor.
   <span class="nib-icon nib-icon--crm" aria-hidden="true"></span>
   ========================================================================== */

.nib-icon {
  --icon: var(--icon-dot);
  display: inline-block; flex: none;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.nib-icon--crm { --icon: var(--icon-crm); }
.nib-icon--derived { --icon: var(--icon-derived); }
.nib-icon--typed { --icon: var(--icon-typed); }
.nib-icon--edited { --icon: var(--icon-edited); }
.nib-icon--firm-policy { --icon: var(--icon-firm-policy); }
.nib-icon--unplaced { --icon: var(--icon-unplaced); }
.nib-icon--matched { --icon: var(--icon-matched); }
.nib-icon--check { --icon: var(--icon-check); }
.nib-icon--alert { --icon: var(--icon-alert); }
.nib-icon--info { --icon: var(--icon-info); }
.nib-icon--chevron-down { --icon: var(--icon-chevron-down); }
.nib-icon--chevron-right { --icon: var(--icon-chevron-right); }
.nib-icon--arrow-right { --icon: var(--icon-arrow-right); }
.nib-icon--arrow-left { --icon: var(--icon-arrow-left); }
.nib-icon--search { --icon: var(--icon-search); }
.nib-icon--clock { --icon: var(--icon-clock); }

/* ==========================================================================
   Buttons. Pills. Primary is green with black text.
   ========================================================================== */

.nib-btn {
  --btn-bg: var(--action-neutral-bg);
  --btn-fg: var(--text-strong);
  --btn-border: var(--action-neutral-border);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--control-h);
  min-width: var(--target);
  padding: 0 calc(var(--control-h) * 0.48);
  font-family: var(--font-body);
  font-size: var(--fs-control);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.nib-btn:hover { --btn-border: var(--action-neutral-hover-border); }
.nib-btn:active { transform: scale(0.97); }
.nib-btn .nib-icon { font-size: 1.15em; }
.nib-btn .nib-kbd { margin-left: var(--space-1); }

.nib-btn--primary { --btn-bg: var(--action-bg); --btn-fg: var(--action-fg); --btn-border: var(--action-bg); }
.nib-btn--primary:hover { --btn-bg: var(--action-bg-hover); --btn-border: var(--action-bg-hover); }
.nib-btn--primary:active { --btn-bg: var(--action-bg-press); --btn-border: var(--action-bg-press); }
.nib-btn--primary .nib-kbd { background: transparent; border-color: var(--green-700); color: var(--action-fg); }

/* Squiggle's secondary: a 2px black outline that inverts to solid black. */
.nib-btn--secondary {
  --btn-bg: transparent; --btn-fg: var(--action-secondary-fg); --btn-border: var(--action-secondary-border);
  box-shadow: inset 0 0 0 1px var(--btn-border);
}
.nib-btn--secondary:hover { --btn-bg: var(--action-dark-bg); --btn-fg: var(--text-on-dark); --btn-border: var(--action-dark-bg); }

.nib-btn--dark { --btn-bg: var(--action-dark-bg); --btn-fg: var(--text-on-dark); --btn-border: var(--action-dark-bg); }
.nib-btn--dark:hover { --btn-bg: var(--action-dark-hover-bg); --btn-border: var(--action-dark-hover-bg); }

.nib-btn--ghost { --btn-bg: transparent; --btn-fg: var(--action-ghost-fg); --btn-border: transparent; }
.nib-btn--ghost:hover { --btn-bg: var(--action-ghost-hover-bg); --btn-border: transparent; }

.nib-btn--danger { --btn-bg: var(--white); --btn-fg: var(--state-danger-fg); --btn-border: var(--state-danger-border); }
.nib-btn--danger:hover { --btn-bg: var(--state-danger-bg); --btn-border: var(--danger); }

/* An action that reads as a link, for the undo beside a thing ("Put the CRM value back"). */
.nib-btn--link {
  --btn-bg: transparent; --btn-fg: var(--text-link); --btn-border: transparent;
  min-height: var(--target); padding: 0 var(--space-1);
  font-weight: var(--weight-semibold);
  text-decoration: underline; text-underline-offset: 0.2em;
  border-radius: var(--radius-sm);
}
.nib-btn--link:hover { --btn-fg: var(--green-900); --btn-border: transparent; }
.nib-btn--link:active { transform: none; }

.nib-btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--fs-small); }
.nib-btn--xs { min-height: var(--control-h-xs); padding: 0 var(--space-2); font-size: var(--fs-meta); }
.nib-btn--lg { min-height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--text-md); }
.nib-btn--block { display: flex; width: 100%; }
.nib-btn--icon { padding: 0; width: var(--control-h); }
.nib-btn--icon.nib-btn--sm { width: var(--control-h-sm); }

.nib-btn:disabled,
.nib-btn[aria-disabled="true"] {
  --btn-bg: var(--neutral-100); --btn-fg: var(--text-disabled); --btn-border: var(--neutral-200);
  box-shadow: none; cursor: not-allowed; transform: none;
}

.nib-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nib-public .nib-btn-group { gap: var(--space-3); }

/* ==========================================================================
   Badges (status). Pills.
   ========================================================================== */

.nib-badge {
  --badge-bg: var(--state-neutral-bg); --badge-fg: var(--state-neutral-fg); --badge-border: var(--state-neutral-border);
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 1.6em; padding: 0 0.65em;
  font-size: var(--fs-badge); font-weight: var(--weight-bold); line-height: 1;
  white-space: nowrap;
  color: var(--badge-fg); background: var(--badge-bg);
  border: 1px solid var(--badge-border); border-radius: var(--radius-pill);
}
.nib-badge .nib-icon { font-size: 1.1em; }
.nib-badge--success { --badge-bg: var(--state-success-bg); --badge-fg: var(--state-success-fg); --badge-border: var(--state-success-border); }
.nib-badge--warning { --badge-bg: var(--state-warning-bg); --badge-fg: var(--state-warning-fg); --badge-border: var(--state-warning-border); }
.nib-badge--danger { --badge-bg: var(--state-danger-bg); --badge-fg: var(--state-danger-fg); --badge-border: var(--state-danger-border); }
.nib-badge--info { --badge-bg: var(--state-info-bg); --badge-fg: var(--state-info-fg); --badge-border: var(--state-info-border); }
.nib-badge--brand { --badge-bg: var(--surface-brand); --badge-fg: var(--action-fg); --badge-border: var(--surface-brand); }
.nib-badge--outline { --badge-bg: transparent; --badge-fg: var(--text-subtle); --badge-border: var(--border-default); }
.nib-badge--dark { --badge-bg: var(--surface-inverse); --badge-fg: var(--text-on-dark); --badge-border: var(--surface-inverse); }
/* A leading dot. Shape as well as colour, never colour alone: the word does the work. */
.nib-badge--dot::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: var(--radius-pill); background: currentColor; flex: none;
}

/* A count inside a tab or button: "3". */
.nib-count {
  display: inline-grid; place-items: center;
  min-width: 1.5em; height: 1.5em; padding: 0 0.4em;
  font-size: var(--fs-meta); font-weight: var(--weight-bold); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--state-neutral-fg); background: var(--state-neutral-bg);
  border-radius: var(--radius-pill);
}
.nib-count--danger { color: var(--prov-unplaced-fg); background: var(--prov-unplaced-bg); }
.nib-count--warning { color: var(--state-warning-fg); background: var(--amber-200); }

/* ==========================================================================
   Provenance chips. Where a value came from. Soft tags (6px), not pills, so a
   reader never mistakes provenance for status. Always icon + word.
   ========================================================================== */

.nib-chip {
  --chip-bg: var(--prov-typed-bg); --chip-fg: var(--prov-typed-fg);
  --chip-border: var(--prov-typed-border); --chip-icon: var(--icon-typed); --chip-icon-colour: currentColor;
  display: inline-flex; align-items: center; gap: 0.35em;
  min-height: 1.7em; padding: 0 0.55em 0 0.45em;
  font-size: var(--fs-badge); font-weight: var(--weight-semibold); line-height: 1;
  white-space: nowrap;
  color: var(--chip-fg); background: var(--chip-bg);
  border: 1px solid var(--chip-border); border-radius: var(--radius-sm);
}
.nib-chip::before {
  content: ""; flex: none; width: 1.05em; height: 1.05em;
  background-color: var(--chip-icon-colour);
  -webkit-mask: var(--chip-icon) center / contain no-repeat;
  mask: var(--chip-icon) center / contain no-repeat;
}
.nib-chip--typed { --chip-bg: var(--prov-typed-bg); --chip-fg: var(--prov-typed-fg); --chip-border: var(--prov-typed-border); --chip-icon: var(--icon-typed); }
.nib-chip--derived { --chip-bg: var(--prov-derived-bg); --chip-fg: var(--prov-derived-fg); --chip-border: var(--prov-derived-border); --chip-icon: var(--icon-derived); }
.nib-chip--crm { --chip-bg: var(--prov-crm-bg); --chip-fg: var(--prov-crm-fg); --chip-border: var(--prov-crm-border); --chip-icon: var(--icon-crm); }
.nib-chip--edited { --chip-bg: var(--prov-edited-bg); --chip-fg: var(--prov-edited-fg); --chip-border: var(--prov-edited-border); --chip-icon: var(--icon-edited); }
.nib-chip--matched { --chip-bg: var(--prov-edited-bg); --chip-fg: var(--prov-edited-fg); --chip-border: var(--prov-edited-border); --chip-icon: var(--icon-matched); }
.nib-chip--unplaced { --chip-bg: var(--prov-unplaced-bg); --chip-fg: var(--prov-unplaced-fg); --chip-border: var(--prov-unplaced-border); --chip-icon: var(--icon-unplaced); }
.nib-chip--firm-policy {
  --chip-bg: var(--prov-firm-policy-bg); --chip-fg: var(--prov-firm-policy-fg);
  --chip-border: var(--prov-firm-policy-border); --chip-icon: var(--icon-firm-policy);
  --chip-icon-colour: var(--prov-firm-policy-icon);
}

/* ==========================================================================
   Form fields
   ========================================================================== */

.nib-field { display: grid; gap: var(--space-2); margin: 0 0 var(--gap-field); min-width: 0; }
.nib-field:last-child { margin-bottom: 0; }

.nib-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}
.nib-label .nib-meta { font-weight: var(--weight-regular); }
.nib-public .nib-label { font-weight: var(--weight-bold); }

.nib-hint { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--leading-normal); max-width: 60ch; }

.nib-error-message {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--fs-small); font-weight: var(--weight-bold); color: var(--state-danger-fg);
}
.nib-error-message::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em; margin-top: 0.15em;
  background-color: var(--state-danger-icon);
  -webkit-mask: var(--icon-unplaced) center / contain no-repeat;
  mask: var(--icon-unplaced) center / contain no-repeat;
}

.nib-input,
.nib-select,
.nib-textarea {
  display: block; width: 100%; min-width: 0;
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-control);
  line-height: var(--leading-normal);
  color: var(--text-strong);
  background: var(--white);
  border: var(--border-width-strong) solid var(--border-control);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.nib-public :is(.nib-input, .nib-select, .nib-textarea) { padding: 0 var(--space-4); }
.nib-textarea { padding-top: var(--space-2); padding-bottom: var(--space-2); min-height: calc(var(--control-h) * 2.4); resize: vertical; }
.nib-public .nib-textarea { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.nib-input::placeholder,
.nib-textarea::placeholder { color: var(--text-placeholder); opacity: 1; }
.nib-input:hover,
.nib-select:hover,
.nib-textarea:hover { border-color: var(--border-hover); }
.nib-input:focus-visible,
.nib-select:focus-visible,
.nib-textarea:focus-visible,
.nib-input:focus,
.nib-select:focus,
.nib-textarea:focus {
  border-color: var(--border-selected);
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--focus-glow);
}
.nib-select {
  appearance: none; -webkit-appearance: none;
  padding-right: calc(var(--space-3) + 1.5em);
  background-image: var(--icon-select);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1.1em;
}
.nib-input--sm, .nib-select--sm { min-height: var(--control-h-sm); font-size: var(--fs-small); }
.nib-input--short { max-width: 10em; }
.nib-input--tiny { max-width: 5em; }

.nib-input:disabled,
.nib-select:disabled,
.nib-textarea:disabled { background: var(--neutral-100); border-color: var(--neutral-300); color: var(--text-disabled); cursor: not-allowed; }

.nib-input[aria-invalid="true"],
.nib-select[aria-invalid="true"],
.nib-textarea[aria-invalid="true"],
.nib-field--error :is(.nib-input, .nib-select, .nib-textarea) { border-color: var(--danger); }
.nib-field--error { position: relative; }
.nib-public .nib-field--error {
  padding-left: var(--space-4);
  border-left: 4px solid var(--danger); /* GOV.UK's error edge: the one place an edge carries meaning */
}

/* Three boxes for a date. Never a picker. */
.nib-date { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.nib-date__part { display: grid; gap: var(--space-1); }
.nib-date__part .nib-label { font-size: var(--fs-small); font-weight: var(--weight-semibold); }
.nib-date__part .nib-input { width: 4.5em; }
.nib-date__part--year .nib-input { width: 6.5em; }

.nib-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.nib-legend { padding: 0; margin: 0 0 var(--space-2); width: 100%; }

/* --- checkbox and radio ------------------------------------------------- */

.nib-checkbox,
.nib-radio {
  appearance: none; -webkit-appearance: none;
  flex: none; display: inline-grid; place-content: center;
  width: 1.25em; height: 1.25em; margin: 0;
  background: var(--white);
  border: var(--border-width-strong) solid var(--border-control);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.nib-public :is(.nib-checkbox, .nib-radio) { width: 1.6em; height: 1.6em; }
.nib-checkbox { border-radius: var(--radius-sm); }
.nib-radio { border-radius: var(--radius-pill); }
.nib-checkbox:hover, .nib-radio:hover { border-color: var(--border-hover); }
.nib-checkbox::before {
  content: ""; width: 0.8em; height: 0.8em; background-color: var(--action-fg);
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
  transform: scale(0); transition: transform var(--duration-fast) var(--ease-enter);
}
.nib-checkbox:checked { background: var(--action-bg); border-color: var(--border-selected); }
.nib-checkbox:checked::before { transform: scale(1); }
.nib-radio::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: var(--radius-pill); background: var(--action-fg);
  transform: scale(0); transition: transform var(--duration-fast) var(--ease-enter);
}
.nib-radio:checked { background: var(--action-bg); border-color: var(--border-selected); }
.nib-radio:checked::before { transform: scale(1); }
.nib-checkbox:disabled, .nib-radio:disabled { background: var(--neutral-100); border-color: var(--neutral-300); cursor: not-allowed; }

.nib-check {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--target);
  font-size: var(--fs-body); color: var(--text-strong); cursor: pointer;
}
.nib-public .nib-check { gap: var(--space-3); }

/* --- radio cards (public questions; also staff choices) ----------------- */

.nib-radio-cards { display: grid; gap: var(--space-3); }
.nib-radio-cards--inline { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

.nib-radio-card {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-1) var(--space-3);
  min-height: var(--target);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.nib-public .nib-radio-card { padding: var(--space-4) var(--space-5); gap: var(--space-1) var(--space-4); border-radius: var(--radius-lg); }
.nib-radio-card > :is(.nib-radio, .nib-checkbox) { grid-row: 1 / span 2; margin-top: 0.1em; }
.nib-radio-card__title { font-size: var(--fs-label); font-weight: var(--weight-semibold); color: var(--text-strong); line-height: var(--leading-snug); align-self: center; }
.nib-public .nib-radio-card__title { font-weight: var(--weight-bold); }
.nib-radio-card__desc { grid-column: 2; font-size: var(--fs-small); color: var(--text-muted); }
.nib-radio-card:hover { border-color: var(--border-hover); }
.nib-radio-card:has(:checked) {
  background: var(--surface-selected);
  border-color: var(--border-selected);
  box-shadow: var(--shadow-inset-selected);
}
.nib-radio-card:has(:focus-visible) { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.nib-radio-card:has(:focus-visible) :focus-visible { outline: none; }
.nib-radio-card:has(:disabled) { background: var(--neutral-50); color: var(--text-disabled); cursor: not-allowed; box-shadow: none; }
.nib-radio-cards--error .nib-radio-card { border-color: var(--danger); }

/* "or" between the answers and a "None of these" answer. */
.nib-radio-cards__or { font-size: var(--fs-small); color: var(--text-muted); padding: 0 var(--space-1); }

/* --- segmented control (the console's Yes / No) ------------------------- */

.nib-segmented {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--neutral-100);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}
.nib-segmented__option { position: relative; display: inline-flex; }
.nib-segmented__option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nib-segmented__option span {
  display: inline-flex; align-items: center; gap: 0.35em;
  min-height: calc(var(--control-h-sm) - 4px); padding: 0 var(--space-3);
  font-size: var(--fs-small); font-weight: var(--weight-semibold); color: var(--text-subtle);
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.nib-segmented__option:hover span { color: var(--text-strong); background: var(--white); }
.nib-segmented__option input:checked + span { background: var(--action-bg); color: var(--action-fg); font-weight: var(--weight-bold); }
.nib-segmented__option input:checked + span::before {
  content: ""; width: 0.9em; height: 0.9em; background-color: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
.nib-segmented__option input:focus-visible + span { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }

/* ==========================================================================
   Cards
   ========================================================================== */

.nib-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--pad-card);
  min-width: 0;
}
.nib-card--flat { box-shadow: none; }
.nib-card--sunken { background: var(--surface-sunken); border-color: transparent; box-shadow: none; }
.nib-card--tint { background: var(--surface-tint); border-color: transparent; box-shadow: none; }
.nib-card--inverse { background: var(--surface-inverse); color: var(--text-on-dark); border-color: var(--surface-inverse); }
.nib-card--inverse :is(.nib-title, .nib-heading, .nib-subheading) { color: var(--text-on-dark); }
.nib-card--interactive { transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.nib-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--neutral-300); }
.nib-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.nib-card__header > :last-child:not(:first-child) { margin-left: auto; }
.nib-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-divider); }

/* A panel is a card's quieter cousin: the workspace's columns. */
.nib-panel {
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.nib-panel__header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-divider);
}
.nib-panel__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.nib-panel__footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-divider); }

/* ==========================================================================
   Tabs (product tabs, view tabs). Current is bold with a 3px bar: not colour alone.
   ========================================================================== */

.nib-tabs {
  display: flex; align-items: stretch; gap: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto; scrollbar-width: none;
}
.nib-tabs::-webkit-scrollbar { display: none; }
.nib-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.75rem; padding: 0 var(--space-1);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--weight-semibold);
  color: var(--text-muted);
  background: none; border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.nib-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.nib-tab:hover { color: var(--text-strong); }
.nib-tab:hover::after { background: var(--neutral-300); }
.nib-tab[aria-current="page"],
.nib-tab[aria-selected="true"] { color: var(--text-strong); font-weight: var(--weight-bold); }
.nib-tab[aria-current="page"]::after,
.nib-tab[aria-selected="true"]::after { background: var(--focus-ring); }
.nib-tab:focus-visible { outline-offset: -2px; }
.nib-tabs__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* ==========================================================================
   Stepper (the workspace's step list) and progress (the public site)
   ========================================================================== */

.nib-stepper { min-width: 0; }
.nib-stepper__title { padding: 0 var(--space-3) var(--space-2); font-size: var(--fs-meta); font-weight: var(--weight-bold); color: var(--text-muted); }
.nib-stepper__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nib-stepper__item { position: relative; }
/* The thread between the marks: a quiet line, broken at the current step's halo. */
.nib-stepper__item:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--space-3) + 0.625rem - 1px); top: 2.25rem; bottom: -0.5rem;
  width: 2px; background: var(--neutral-200); border-radius: 2px; pointer-events: none;
}
.nib-stepper__item[data-status="done"]:not(:last-child)::after { background: var(--green-300); }

.nib-step {
  position: relative; z-index: var(--z-raised);
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; gap: 0 var(--space-3);
  width: 100%; min-height: var(--target);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body); text-align: left;
  color: var(--text-body); background: transparent;
  border: 0; border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.nib-step:hover { background: var(--surface-hover); }
.nib-step__mark {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem; margin-top: 0.05rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: var(--border-width-strong) solid var(--border-control);
  font-size: var(--app-text-2xs); font-weight: var(--weight-bold); color: var(--text-muted);
}
.nib-step__mark::before {
  content: none; width: 0.7rem; height: 0.7rem; background-color: currentColor;
  -webkit-mask: var(--step-icon, none) center / contain no-repeat; mask: var(--step-icon, none) center / contain no-repeat;
}
.nib-step__label { font-size: var(--fs-body); font-weight: var(--weight-medium); color: var(--text-strong); line-height: var(--leading-snug); }
.nib-step__meta { grid-column: 2; font-size: var(--fs-meta); color: var(--text-muted); margin-top: 2px; }

[data-status="done"] > .nib-step .nib-step__mark::before,
[data-status="todo"] > .nib-step .nib-step__mark::before,
[data-status="blocks"] > .nib-step .nib-step__mark::before { content: ""; }
[data-status="done"] > .nib-step .nib-step__mark { --step-icon: var(--icon-check); background: var(--action-bg); border-color: var(--action-bg); color: var(--action-fg); }
[data-status="todo"] > .nib-step .nib-step__mark { --step-icon: var(--icon-dot); color: var(--amber-600); border-color: var(--amber-600); }
[data-status="todo"] > .nib-step .nib-step__meta { color: var(--state-warning-fg); font-weight: var(--weight-semibold); }
[data-status="blocks"] > .nib-step .nib-step__mark { --step-icon: var(--icon-alert-solid); background: var(--prov-unplaced-bg); border-color: var(--prov-unplaced-bg); color: var(--prov-unplaced-fg); }
[data-status="blocks"] > .nib-step .nib-step__meta { color: var(--state-danger-fg); font-weight: var(--weight-bold); }
[data-status="empty"] > .nib-step .nib-step__mark { border-style: dashed; border-color: var(--neutral-400); }

.nib-step[aria-current="step"] { background: var(--surface-selected); box-shadow: inset 0 0 0 1px var(--green-200); }
.nib-step[aria-current="step"] .nib-step__label { font-weight: var(--weight-bold); }
.nib-step[aria-current="step"] .nib-step__mark { box-shadow: 0 0 0 3px var(--green-200); }

.nib-stepper__foot { margin-top: var(--space-4); padding: var(--space-4) var(--space-3) 0; border-top: 1px solid var(--border-divider); display: grid; gap: var(--space-2); }

/* Public progress: "Part 3 of 14" in words, a bar for the eye. The words carry it. */
.nib-progress { display: grid; gap: var(--space-2); }
.nib-progress__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); font-size: var(--fs-small); color: var(--text-muted); }
.nib-progress__label b { color: var(--text-strong); font-weight: var(--weight-bold); }
.nib-progress__bar { position: relative; height: 0.5rem; background: var(--neutral-200); border-radius: var(--radius-pill); overflow: hidden; }
.nib-progress__bar > span { position: absolute; inset: 0 auto 0 0; min-width: 0.5rem; background: var(--action-bg); border-radius: var(--radius-pill); transition: width var(--duration-slow) var(--ease-standard); }

/* Saved indicator: "Saved 2 minutes ago". */
.nib-saved { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
.nib-saved::before {
  content: ""; width: 1em; height: 1em; background-color: var(--green-700);
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}

/* Back and Next under a section. */
.nib-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--border-divider);
}
.nib-pager > :last-child { margin-left: auto; }
.nib-public .nib-pager { border-top: 0; padding-top: 0; margin-top: var(--space-7); justify-content: flex-start; }
.nib-public .nib-pager > :last-child { margin-left: 0; }

/* ==========================================================================
   Banners
   ========================================================================== */

.nib-banner {
  --banner-bg: var(--state-info-bg); --banner-fg: var(--state-info-fg);
  --banner-border: var(--state-info-border); --banner-icon-colour: var(--state-info-icon); --banner-icon: var(--icon-info);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-body); background: var(--banner-bg);
  border: 1px solid var(--banner-border); border-radius: var(--radius-md);
}
.nib-public .nib-banner { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); }
.nib-banner::before {
  content: ""; grid-row: 1 / span 3; width: 1.25rem; height: 1.25rem; margin-top: 0.1em;
  background-color: var(--banner-icon-colour);
  -webkit-mask: var(--banner-icon) center / contain no-repeat; mask: var(--banner-icon) center / contain no-repeat;
}
.nib-banner__title { font-weight: var(--weight-bold); color: var(--banner-fg); line-height: var(--leading-snug); padding-top: 0.1em; }
.nib-banner__body { font-size: var(--fs-small); color: var(--text-body); }
.nib-public .nib-banner__body { font-size: var(--fs-body); }
.nib-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

.nib-banner--success { --banner-bg: var(--state-success-bg); --banner-fg: var(--state-success-fg); --banner-border: var(--state-success-border); --banner-icon-colour: var(--state-success-icon); --banner-icon: var(--icon-check); }
.nib-banner--warning { --banner-bg: var(--state-warning-bg); --banner-fg: var(--state-warning-fg); --banner-border: var(--state-warning-border); --banner-icon-colour: var(--state-warning-icon); --banner-icon: var(--icon-alert); }
.nib-banner--danger { --banner-bg: var(--state-danger-bg); --banner-fg: var(--state-danger-fg); --banner-border: var(--state-danger-border); --banner-icon-colour: var(--state-danger-icon); --banner-icon: var(--icon-unplaced); }
.nib-banner--neutral { --banner-bg: var(--surface-sunken); --banner-fg: var(--text-strong); --banner-border: transparent; --banner-icon-colour: var(--text-muted); }

/* BLOCKING. Something stops the document being made. Stronger than danger: a solid
 * mark, a ring, and the action that clears it, in the banner itself. */
.nib-banner--blocking {
  --banner-bg: var(--state-danger-bg); --banner-fg: var(--state-danger-fg); --banner-border: var(--state-danger-border);
  --banner-icon: var(--icon-alert-solid); --banner-icon-colour: var(--prov-unplaced-bg);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--space-4);
  box-shadow: 0 0 0 3px var(--red-100);
}
.nib-banner--blocking::before { width: 1.75rem; height: 1.75rem; margin-top: 0; }
.nib-banner--blocking > * { grid-column: 2; }
.nib-banner--blocking > .nib-banner__side { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
.nib-banner--blocking .nib-banner__title { font-size: var(--fs-body); padding-top: 0.2em; }
@media (max-width: 40rem) {
  .nib-banner--blocking { grid-template-columns: auto minmax(0, 1fr); }
  .nib-banner--blocking > .nib-banner__side { grid-column: 2; grid-row: auto; justify-self: start; margin-top: var(--space-2); }
}

/* A full-width strip under the top bar: "Specimen data". */
.nib-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-small); color: var(--state-warning-fg); background: var(--state-warning-bg);
  border-bottom: 1px solid var(--state-warning-border);
}

/* GOV.UK's error summary, in Squiggle's shape: at the top, focused, linking to each field. */
.nib-error-summary {
  padding: var(--space-5);
  background: var(--white);
  border: var(--border-width-strong) solid var(--danger);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 4px var(--red-100);
}
.nib-error-summary__title { font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--weight-bold); color: var(--state-danger-fg); margin-bottom: var(--space-2); }
.nib-error-summary ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); }
.nib-error-summary a { color: var(--state-danger-fg); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 0.2em; }

/* ==========================================================================
   Disclosure ("Why we're asking", "Technical details")
   ========================================================================== */

.nib-disclosure > summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--target);
  list-style: none; cursor: pointer;
  font-weight: var(--weight-semibold); color: var(--text-link);
  border-radius: var(--radius-sm);
}
.nib-disclosure > summary::-webkit-details-marker { display: none; }
.nib-disclosure > summary::before {
  content: ""; width: 1em; height: 1em; background-color: currentColor; flex: none;
  -webkit-mask: var(--icon-chevron-right) center / contain no-repeat; mask: var(--icon-chevron-right) center / contain no-repeat;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.nib-disclosure[open] > summary::before { transform: rotate(90deg); }
.nib-disclosure > summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.nib-disclosure__body {
  margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken); border-radius: var(--radius-md);
  font-size: var(--fs-small); color: var(--text-body);
}
.nib-public .nib-disclosure__body { padding: var(--space-4) var(--space-5); font-size: var(--fs-body); }
.nib-disclosure--quiet > summary { color: var(--text-muted); font-weight: var(--weight-medium); font-size: var(--fs-meta); }
.nib-disclosure--quiet .nib-disclosure__body { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted); overflow-wrap: anywhere; }

/* ==========================================================================
   Tables
   ========================================================================== */

.nib-table-wrap {
  overflow-x: auto;
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.nib-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.nib-table th,
.nib-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-divider); }
.nib-table thead th {
  position: sticky; top: 0; z-index: var(--z-raised);
  font-size: var(--fs-meta); font-weight: var(--weight-semibold); color: var(--text-muted);
  background: var(--neutral-50); white-space: nowrap;
}
.nib-table tbody tr:last-child > * { border-bottom: 0; }
.nib-table tbody tr { transition: background-color var(--duration-instant) var(--ease-standard); }
.nib-table tbody tr:hover { background: var(--surface-hover); }
.nib-table tbody tr[aria-selected="true"],
.nib-table tbody tr[aria-current="true"] { background: var(--surface-selected); }
.nib-table tbody tr[aria-current="true"] > :first-child { box-shadow: inset 3px 0 0 var(--focus-ring); }
.nib-table__primary { font-weight: var(--weight-semibold); color: var(--text-strong); text-decoration: none; }
.nib-table__primary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.nib-table__num { text-align: right; }
.nib-table__shrink { width: 1%; white-space: nowrap; }
.nib-table--dense th, .nib-table--dense td { padding: var(--space-2) var(--space-3); }
/* A clickable row: the primary link stretches over the row; other controls sit above it. */
.nib-table--rows-link tbody tr { position: relative; }
.nib-table--rows-link .nib-table__primary::after { content: ""; position: absolute; inset: 0; }
.nib-table--rows-link :is(button, input, select, .nib-btn) { position: relative; z-index: var(--z-raised); }

/* ==========================================================================
   Edit rows. One answer: its label, its value, where it came from, Edit.
   ========================================================================== */

.nib-rows { list-style: none; margin: 0; padding: 0; }
.nib-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-top: 1px solid var(--border-divider);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.nib-rows > .nib-row:first-child { border-top-color: transparent; }
.nib-row:hover { background: var(--surface-hover); }
.nib-row:hover + .nib-row { border-top-color: transparent; }
.nib-row__label { font-size: var(--fs-small); color: var(--text-muted); font-weight: var(--weight-medium); }
.nib-row__value { grid-column: 1; font-size: var(--fs-value); font-weight: var(--weight-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
.nib-row__value--empty { font-weight: var(--weight-regular); color: var(--text-muted); font-style: italic; }
.nib-row__prov { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--fs-meta); color: var(--text-muted); margin-top: var(--space-1); }
.nib-row__actions { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: flex; gap: var(--space-1); }
.nib-row__edit { grid-column: 1 / -1; display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.nib-row__edit .nib-btn-group { margin-top: var(--space-1); }

/* A question still to answer: the label leads, the control sits right. */
.nib-row--ask .nib-row__label { font-size: var(--fs-body); font-weight: var(--weight-semibold); color: var(--text-strong); }
.nib-row--ask .nib-row__actions { align-self: center; }

/* Being edited: lifted onto white with a ring, so the eye knows which one is open. */
.nib-row--editing,
.nib-row--editing:hover { background: var(--white); box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-md); border-top-color: transparent; }
.nib-row--editing + .nib-row { border-top-color: transparent; }

/* A value the document needs and nobody has given. */
.nib-row--gap .nib-row__value { color: var(--state-danger-fg); font-style: normal; font-weight: var(--weight-semibold); }

/* The row the document pane (or the address) pointed to. */
.nib-row[aria-current="true"] { background: var(--surface-selected); box-shadow: inset 0 0 0 2px var(--border-selected); }

/* ==========================================================================
   The document. A legal document on paper: serif, numbered, gaps drawn.
   ========================================================================== */

.nib-doc-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-desk); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.nib-doc-pane__header {
  display: grid; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border-subtle);
}
.nib-doc-pane__titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.nib-doc-pane__titlebar > .nib-btn-group, .nib-doc-pane__titlebar > :last-child:not(:first-child) { margin-left: auto; }
.nib-doc-pane__summary { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nib-doc-pane__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-5); scroll-padding: var(--space-5); }

.nib-doc {
  max-width: var(--layout-doc-measure);
  margin: 0 auto;
  padding: var(--space-7) clamp(var(--space-5), 6%, var(--space-7));
  font-family: var(--font-document);
  font-size: var(--fs-doc);
  line-height: var(--doc-leading);
  color: var(--doc-text);
  background: var(--surface-paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  font-variant-numeric: oldstyle-nums;
  hyphens: auto;
  overflow-wrap: break-word;
}
.nib-doc__head { text-align: center; margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--doc-rule); }
.nib-doc__kind { font-size: 0.78em; letter-spacing: 0.22em; text-transform: uppercase; color: var(--doc-muted); }
.nib-doc__title { font-family: var(--font-document); font-size: 1.55em; font-weight: var(--weight-regular); line-height: 1.25; margin-top: var(--space-2); letter-spacing: 0.01em; color: var(--doc-text); }
.nib-doc__subtitle { font-style: italic; color: var(--doc-muted); margin-top: var(--space-1); }

.nib-doc__clause {
  position: relative;
  display: grid; grid-template-columns: 2.25em minmax(0, 1fr); column-gap: 0.5em;
  margin: 0 calc(-1 * var(--space-4)) var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.nib-doc__clause--preamble { grid-template-columns: minmax(0, 1fr); }
.nib-doc__num {
  grid-row: 1 / span 9;
  justify-self: start;
  font-weight: var(--weight-bold); font-variant-numeric: lining-nums tabular-nums;
}
.nib-doc__heading {
  font-family: var(--font-body);
  font-size: 0.72em; font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--doc-muted);
  line-height: 1.4; margin: 0.35em 0 0.4em;
}
.nib-doc__clause p { margin: 0 0 0.6em; }
.nib-doc__clause p:last-child { margin-bottom: 0; }
.nib-doc__sub { list-style: none; margin: 0.4em 0 0.6em; padding: 0; display: grid; gap: 0.35em; }
.nib-doc__sub > li { display: grid; grid-template-columns: 2em minmax(0, 1fr); }
.nib-doc__sub > li > :first-child { font-style: italic; }
.nib-doc__name { font-variant: small-caps; letter-spacing: 0.04em; }

/* Reachable: a clause another section decides. Click goes there. */
.nib-doc__clause--reachable { cursor: pointer; }
.nib-doc__clause--reachable:hover { background: var(--neutral-50); }
.nib-doc__goto {
  position: absolute; top: var(--space-2); right: var(--space-2);
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard);
}
.nib-doc__clause--reachable:hover .nib-doc__goto,
.nib-doc__goto:focus-visible { opacity: 1; }

/* Current: the clauses this section's questions decide. A tinted band and the number
 * set in a green pill: two signals, so it is not colour alone. */
.nib-doc__clause--current { background: var(--doc-current-bg); box-shadow: inset 0 0 0 1px var(--green-200); }
.nib-doc__clause--current .nib-doc__num {
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; margin-top: 0.1em;
  font-family: var(--font-body); font-size: 0.8em;
  background: var(--action-bg); color: var(--action-fg); border-radius: var(--radius-pill);
}
.nib-doc__here {
  grid-column: 2;
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-body); font-size: 0.7em; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide); color: var(--green-900);
}
.nib-doc__here::before {
  content: ""; width: 0.55em; height: 0.55em; border-radius: var(--radius-pill); background: var(--doc-current-mark);
}

/* A GAP: a value the words need and nobody has given. Drawn in the reading face, not
 * the document's, so nobody mistakes it for the will's own words. A button in the
 * console (it takes you to the question), a span on the public site. */
.nib-doc__gap {
  display: inline; margin: 0 0.1em; padding: 0.05em 0.45em;
  font-family: var(--font-body); font-size: 0.78em; font-weight: var(--weight-semibold); font-style: normal;
  line-height: 1.6; letter-spacing: 0; text-transform: none;
  color: var(--doc-gap-fg); background: var(--doc-gap-bg);
  border: 1.5px dashed var(--doc-gap-border); border-radius: var(--radius-sm);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  white-space: normal;
}
button.nib-doc__gap { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
button.nib-doc__gap:hover { background: var(--red-100); border-style: solid; }

/* PENDING: a clause that waits on answers still to come. A heading in muted words, a
 * line saying what it waits for, and three grey lines where the words will go. */
.nib-doc__pending {
  grid-column: 2;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body); font-size: 0.82em; line-height: var(--leading-normal);
  color: var(--doc-pending-fg);
  background: var(--doc-pending-bg);
  border: 1.5px dashed var(--doc-pending-border);
  border-radius: var(--radius-md);
}
.nib-doc__clause--preamble .nib-doc__pending { grid-column: 1; }
.nib-doc__pending-title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--text-subtle); }
.nib-doc__pending-title::before {
  content: ""; width: 1.1em; height: 1.1em; background-color: currentColor; flex: none;
  -webkit-mask: var(--icon-clock) center / contain no-repeat; mask: var(--icon-clock) center / contain no-repeat;
}
.nib-doc__ghost { display: grid; gap: 0.55em; margin-top: var(--space-3); }
.nib-doc__ghost::before,
.nib-doc__ghost::after,
.nib-doc__ghost > span { content: ""; display: block; height: 0.5em; border-radius: var(--radius-pill); background: var(--neutral-200); }
.nib-doc__ghost::after { width: 62%; }
.nib-doc__clause--pending .nib-doc__heading { color: var(--doc-pending-fg); }
.nib-doc__clause--pending .nib-doc__num { color: var(--doc-pending-fg); }

.nib-doc__signature { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--doc-rule); display: grid; gap: var(--space-5); }
.nib-doc__sigline { display: grid; gap: var(--space-1); font-size: 0.85em; color: var(--doc-muted); }
.nib-doc__sigline::before { content: ""; display: block; height: 1px; background: var(--doc-text); width: min(100%, 18em); margin-bottom: var(--space-1); }

.nib-doc-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-meta); color: var(--text-muted); }
.nib-doc-key > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.nib-doc-key__swatch { display: inline-block; width: 1.4em; height: 0.95em; border-radius: var(--radius-sm); }
.nib-doc-key__swatch--gap { background: var(--doc-gap-bg); border: 1.5px dashed var(--doc-gap-border); }
.nib-doc-key__swatch--pending { background: var(--doc-pending-bg); border: 1.5px dashed var(--doc-pending-border); }
.nib-doc-key__swatch--current { background: var(--doc-current-bg); border: 1px solid var(--green-300); }

/* ==========================================================================
   The staff shell: top bar, page head, workspace
   ========================================================================== */

.nib-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.nib-shell__main { flex: 1 0 auto; width: 100%; max-width: var(--layout-app-max); margin: 0 auto; padding: var(--space-5) var(--layout-gutter-app) var(--space-8); }

.nib-topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--layout-topbar-h);
  padding: 0 var(--layout-gutter-app);
  background: var(--surface-topbar);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: var(--shadow-topbar);
}
.nib-topbar__brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text-strong); border-radius: var(--radius-sm); flex: none; }
.nib-topbar__logo { display: block; height: 1.625rem; width: auto; }
.nib-topbar__product {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  padding-left: var(--space-3); border-left: 1px solid var(--border-subtle);
  font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; color: var(--text-strong);
}
.nib-topbar__product small { font-family: var(--font-body); font-size: var(--app-text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); letter-spacing: 0; }
.nib-topbar__nav { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-3); }
.nib-topbar__link {
  display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--space-3);
  font-size: var(--fs-body); font-weight: var(--weight-semibold); color: var(--text-muted);
  text-decoration: none; border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.nib-topbar__link:hover { color: var(--text-strong); background: var(--neutral-100); }
.nib-topbar__link[aria-current="page"] { color: var(--text-strong); background: var(--neutral-100); }
.nib-topbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* Looks like a search field, is a button that opens the command palette. */
.nib-topbar__search {
  display: inline-flex; align-items: center; gap: var(--space-2);
  width: clamp(12rem, 22vw, 20rem); min-height: var(--control-h-sm);
  padding: 0 var(--space-2) 0 var(--space-3);
  font: var(--weight-medium) var(--fs-small) / 1 var(--font-body);
  color: var(--text-muted); background: var(--neutral-50);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  cursor: pointer; text-align: left;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.nib-topbar__search:hover { border-color: var(--neutral-400); background: var(--white); }
.nib-topbar__search > .nib-icon { font-size: 1.05em; }
.nib-topbar__search > .nib-kbd { margin-left: auto; }

.nib-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: var(--radius-pill);
  font-size: var(--app-text-xs); font-weight: var(--weight-bold); letter-spacing: 0.02em;
  color: var(--green-900); background: var(--green-100);
  box-shadow: var(--shadow-xs);
}

/* The matter's header: breadcrumb, title, meta, actions, product tabs. */
.nib-pagehead { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.nib-pagehead__top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); }
.nib-pagehead__top > .nib-btn-group { margin-left: auto; }
.nib-pagehead .nib-tabs { margin-top: var(--space-3); }

.nib-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--fs-small); color: var(--text-muted); list-style: none; margin: 0; padding: 0; }
.nib-breadcrumb a { color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); }
.nib-breadcrumb a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 0.2em; }
.nib-breadcrumb li + li::before {
  content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: var(--space-2); vertical-align: -0.1em;
  background-color: var(--neutral-400);
  -webkit-mask: var(--icon-chevron-right) center / contain no-repeat; mask: var(--icon-chevron-right) center / contain no-repeat;
}
.nib-breadcrumb [aria-current="page"] { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* THE WORKSPACE. Steps | questions | the document so far. */
.nib-workspace {
  display: grid; align-items: start;
  grid-template-columns: var(--layout-workspace-columns);
  gap: var(--layout-workspace-gap);
}
.nib-workspace__rail { position: sticky; top: calc(var(--layout-topbar-h) + var(--space-4)); max-height: calc(100vh - var(--layout-topbar-h) - var(--space-6)); overflow: auto; padding: var(--space-2) 0; }
.nib-workspace__main { min-width: 0; }
.nib-workspace__doc { position: sticky; top: calc(var(--layout-topbar-h) + var(--space-4)); height: calc(100vh - var(--layout-topbar-h) - var(--space-6)); min-height: 28rem; }
.nib-workspace__doc > .nib-doc-pane { height: 100%; }

@media (max-width: 75rem) {
  .nib-workspace { grid-template-columns: var(--layout-rail) minmax(0, 1fr); }
  .nib-workspace__doc { grid-column: 1 / -1; position: static; height: auto; }
  .nib-workspace__doc .nib-doc-pane__scroll { max-height: 80vh; }
}
@media (max-width: 47.5rem) {
  .nib-workspace { grid-template-columns: minmax(0, 1fr); }
  .nib-workspace__rail { position: static; max-height: none; }
  .nib-topbar__nav, .nib-topbar__product small { display: none; }
  .nib-topbar__search { width: auto; }
  .nib-topbar__search > span:not(.nib-icon) { display: none; }
}

/* ==========================================================================
   Command palette and dialog (native <dialog>)
   ========================================================================== */

.nib-dialog,
.nib-palette {
  padding: 0; margin: auto;
  color: var(--text-body); background: var(--surface-panel);
  border: 0; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  width: calc(100% - 2 * var(--space-4));
}
.nib-dialog { max-width: var(--layout-dialog); padding: var(--space-6); }
.nib-dialog::backdrop,
.nib-palette::backdrop { background: var(--surface-overlay); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.nib-dialog[open],
.nib-palette[open] { animation: nib-rise var(--duration-base) var(--ease-enter); }
.nib-dialog__title { font-family: var(--font-display); font-size: var(--fs-heading); font-weight: var(--weight-regular); color: var(--text-strong); margin-bottom: var(--space-2); }
.nib-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }

.nib-palette { max-width: var(--layout-palette); margin-top: 12vh; overflow: hidden; }
.nib-palette__search { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5); border-bottom: 1px solid var(--border-divider); }
.nib-palette__search > .nib-icon { color: var(--text-muted); font-size: 1.15rem; }
.nib-palette__input {
  flex: 1; min-width: 0; min-height: 3.5rem;
  font: var(--weight-medium) var(--text-md) / 1.2 var(--font-body); color: var(--text-strong);
  background: transparent; border: 0; outline: none;
}
.nib-palette__input::placeholder { color: var(--text-placeholder); }
.nib-palette:has(.nib-palette__input:focus-visible) .nib-palette__search { box-shadow: inset 0 -2px 0 var(--focus-ring); }
.nib-palette__list { list-style: none; margin: 0; padding: var(--space-2); max-height: min(24rem, 50vh); overflow: auto; }
.nib-palette__group { padding: var(--space-3) var(--space-3) var(--space-1); font-size: var(--fs-meta); font-weight: var(--weight-semibold); color: var(--text-muted); }
.nib-palette__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3);
  min-height: 2.75rem; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); cursor: pointer;
}
.nib-palette__item:hover { background: var(--surface-hover); }
.nib-palette__item[aria-selected="true"] { background: var(--neutral-100); box-shadow: inset 0 0 0 1px var(--neutral-200); }
.nib-palette__item-title { font-weight: var(--weight-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nib-palette__item-meta { font-size: var(--fs-meta); color: var(--text-muted); }
.nib-palette__item .nib-kbd { visibility: hidden; }
.nib-palette__item[aria-selected="true"] .nib-kbd { visibility: visible; }
.nib-palette__foot { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5); font-size: var(--fs-meta); color: var(--text-muted); background: var(--neutral-50); border-top: 1px solid var(--border-divider); }
.nib-palette__foot > span { display: inline-flex; align-items: center; gap: var(--space-1); }

@keyframes nib-rise { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Public site: header, page, question, split, "your will so far", picker, footer
   ========================================================================== */

.nib-public-header { background: var(--white); border-bottom: 1px solid var(--border-subtle); }
.nib-public-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  max-width: var(--layout-public-max); margin: 0 auto;
  min-height: 4.5rem; padding: var(--space-3) var(--layout-gutter-public);
}
.nib-public-header__logo { display: block; height: 2.25rem; width: auto; }
.nib-public-header__tag { font-size: var(--fs-small); color: var(--text-muted); padding-left: var(--space-5); border-left: 1px solid var(--border-subtle); }
.nib-public-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }

.nib-container { width: 100%; max-width: var(--layout-public-max); margin: 0 auto; padding: 0 var(--layout-gutter-public); }
.nib-container--narrow { max-width: calc(var(--layout-measure) + 2 * var(--layout-gutter-public)); }
.nib-page { padding-top: var(--space-6); padding-bottom: var(--space-8); }

/* Questions on the left, the document so far on the right, from 64rem. Below that one
 * column, and "your will so far" folds under the questions behind a disclosure. */
.nib-split { display: grid; gap: var(--space-7); }
@media (min-width: 64rem) {
  .nib-split { grid-template-columns: var(--layout-public-columns); align-items: start; gap: var(--space-8); }
  .nib-split__aside { position: sticky; top: var(--space-5); }
}
.nib-split__main { min-width: 0; max-width: var(--layout-measure); }

.nib-section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.nib-section-head .nib-progress { margin-bottom: var(--space-3); }

.nib-question { padding: var(--space-6) 0; border-top: 1px solid var(--border-divider); }
.nib-question:first-of-type { border-top: 0; padding-top: 0; }
.nib-question__title { font-family: var(--font-display); font-size: var(--fs-heading); font-weight: var(--weight-regular); line-height: var(--leading-snug); letter-spacing: -0.01em; color: var(--text-strong); text-wrap: balance; }
.nib-question > legend { float: left; width: 100%; padding: 0; }
.nib-question > legend + * { clear: both; }
.nib-question__hint { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); max-width: 60ch; }
.nib-question__if { margin-top: var(--space-2); font-weight: var(--weight-semibold); color: var(--text-strong); }
.nib-question__control { margin-top: var(--space-4); }
.nib-question .nib-disclosure { margin-top: var(--space-4); }

/* "Your will so far". A disclosure on a phone, an open pane from 64rem. */
.nib-sofar { background: var(--surface-desk); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.nib-sofar > summary {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--target-min-public); padding: var(--space-4) var(--space-5);
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--public-title-sm); color: var(--text-strong);
  background: var(--white);
}
.nib-sofar > summary::-webkit-details-marker { display: none; }
.nib-sofar > summary::after {
  content: ""; margin-left: auto; width: 1.25rem; height: 1.25rem; background-color: var(--text-strong);
  -webkit-mask: var(--icon-chevron-down) center / contain no-repeat; mask: var(--icon-chevron-down) center / contain no-repeat;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.nib-sofar[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.nib-sofar[open] > summary::after { transform: rotate(180deg); }
.nib-sofar__head { display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-4); background: var(--white); border-bottom: 1px solid var(--border-subtle); }
.nib-sofar__title { font-family: var(--font-display); font-size: var(--public-title-sm); font-weight: var(--weight-regular); color: var(--text-strong); line-height: var(--leading-snug); }
.nib-sofar__note { font-size: var(--fs-meta); color: var(--text-muted); }
.nib-sofar__body { padding: var(--space-5); max-height: 75vh; overflow: auto; }
.nib-sofar .nib-doc { padding: var(--space-6) var(--space-5); }
@media (max-width: 63.99rem) {
  .nib-sofar__title { display: none; } /* the summary says it on a phone */
}
@media (min-width: 64rem) {
  .nib-sofar__body { max-height: calc(100vh - 14rem); }
}
/* Always open in the wide layout, with no script: the summary is hidden and the
 * content shown. A browser without ::details-content keeps a working disclosure. */
@supports selector(::details-content) {
  @media (min-width: 64rem) {
    .nib-sofar > summary { display: none; }
    .nib-sofar::details-content { content-visibility: visible; display: block; height: auto; }
  }
}

/* "What do you need?": one card per document. The whole card is the link. */
.nib-picker { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.nib-choice {
  position: relative;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.nib-choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--neutral-300); }
.nib-choice:has(.nib-choice__link:focus-visible) { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.nib-choice__icon {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--text-strong);
  font-size: 1.6rem;
}
.nib-choice__icon img { width: 3rem; height: 3rem; }
.nib-choice__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-regular); line-height: var(--leading-snug); color: var(--text-strong); }
.nib-choice__link { color: inherit; text-decoration: none; outline: none; }
.nib-choice__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nib-choice__desc { color: var(--text-body); }
.nib-choice__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-body); }
.nib-choice__list li { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); gap: var(--space-2); }
.nib-choice__list li::before {
  content: ""; width: 1.1em; height: 1.1em; margin-top: 0.2em; background-color: var(--green-700);
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
.nib-choice__cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-weight: var(--weight-bold); color: var(--text-strong); }
.nib-choice__go {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill);
  background: var(--action-bg); color: var(--action-fg);
  transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.nib-choice:hover .nib-choice__go { transform: translateX(3px); background: var(--action-bg-hover); }

@media (max-width: 40rem) {
  .nib-public-header__tag { display: none; }
  .nib-choice { padding: var(--space-5); }
  .nib-question { padding: var(--space-5) 0; }
}

/* Summary list for "Check your answers". */
.nib-dl { display: grid; margin: 0; }
.nib-dl__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: var(--space-2) var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-divider); }
.nib-dl dt { font-weight: var(--weight-semibold); color: var(--text-strong); }
.nib-dl dd { margin: 0; color: var(--text-body); overflow-wrap: anywhere; }
@media (max-width: 30rem) { .nib-dl__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

.nib-help { margin-top: var(--space-9); padding: var(--space-7) 0; background: var(--surface-subtle); border-top: 1px solid var(--border-subtle); }
.nib-help__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.nib-help__title { font-family: var(--font-display); font-size: var(--public-title-sm); font-weight: var(--weight-regular); color: var(--text-strong); margin-bottom: var(--space-3); }
.nib-help ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.nib-help li { min-height: var(--target-min); }
.nib-help__legal { margin-top: var(--space-6); font-size: var(--fs-meta); color: var(--text-muted); }

/* ==========================================================================
   Layout helpers. Few on purpose.
   ========================================================================== */

.nib-stack { display: grid; gap: var(--stack-gap, var(--space-4)); align-content: start; }
.nib-stack--sm { --stack-gap: var(--space-2); }
.nib-stack--lg { --stack-gap: var(--space-6); }
.nib-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
.nib-spacer { margin-left: auto; }

/* ==========================================================================
   Accessibility media
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :where(.nib-app, .nib-public) *,
  :where(.nib-app, .nib-public) ::before,
  :where(.nib-app, .nib-public) ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .nib-btn:active,
  .nib-card--interactive:hover,
  .nib-choice:hover,
  .nib-choice:hover .nib-choice__go { transform: none; }
}

/* Windows high contrast: masks draw in the system text colour, and every state that
 * was a fill gets an edge. */
@media (forced-colors: active) {
  .nib-icon, .nib-chip::before, .nib-banner::before, .nib-step__mark::before,
  .nib-checkbox::before, .nib-error-message::before, .nib-saved::before,
  .nib-disclosure > summary::before, .nib-doc__pending-title::before { forced-color-adjust: none; background-color: CanvasText; }
  .nib-chip, .nib-badge, .nib-doc__gap, .nib-doc__pending { border: 1px solid CanvasText; }
  .nib-step[aria-current="step"], .nib-row[aria-current="true"], .nib-radio-card:has(:checked) { outline: 2px solid Highlight; }
  .nib-tab[aria-current="page"]::after, .nib-tab[aria-selected="true"]::after { background: Highlight; }
}

@media print {
  .nib-topbar, .nib-workspace__rail, .nib-workspace__main, .nib-public-header, .nib-help, .nib-strip { display: none !important; }
  .nib-workspace { display: block; }
  .nib-workspace__doc { position: static; height: auto; }
  .nib-doc-pane, .nib-sofar { border: 0; background: none; }
  .nib-doc-pane__scroll, .nib-sofar__body { max-height: none; overflow: visible; padding: 0; }
  .nib-doc { box-shadow: none; max-width: none; padding: 0; }
}