/* Vivly design system v0.1. Source: docs/design/DESIGN.md (brandbook 2025 +
   existing web/mobile apps). Shared by the SPA (frontend/public/index.html)
   and the login pages (app/login_pages/*.html) - both are served from the
   same origin, so a single stylesheet keeps them visually consistent
   without a build step. No inline <style>, no style="" attributes anywhere
   (CSP style-src 'self', docs/design/DESIGN.md §9). */

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-VF-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("/assets/fonts/Syne-VF-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand (brandbook 2025, p. 8) */
  --brand-green: #1B442F;        /* Kaitoke Green */
  --brand-coral: #FA4750;        /* Neon Coral: accent only, never under text */
  --brand-blue: #C0D6DF;         /* Columbia Blue */
  --brand-mercury: #EFEFEF;      /* Mercury */
  --brand-white: #FAFAFA;        /* Web White */

  /* Surfaces */
  --surface-page: #FAFAFA;
  --surface-card: #FFFFFF;
  --surface-muted: #EFEFEF;
  --surface-brand: #C0D6DF;
  --surface-brand-soft: #E8F1F4;
  --surface-inverse: #1B442F;

  /* Text */
  --text: #1B442F;
  --text-muted: #4B5A52;
  --text-inverse: #FAFAFA;
  --text-inverse-muted: #C0D6DF;
  --text-disabled: #7D8A83;

  /* Lines */
  --border: #E6E8EA;
  --border-strong: #7D8A83;
  --border-inverse: rgb(192 214 223 / 0.3);  /* divider on --surface-inverse */

  /* Interactive */
  --action: #1B442F;
  --action-hover: #2D5A42;
  --action-pressed: #12301F;
  --action-soft-hover: #D4E8DC;   /* secondary button hover (= success-bg) */
  --action-soft-pressed: #C2DCCC; /* secondary button pressed */
  --accent: #FA4750;
  --focus-ring: #1B442F;
  --focus-ring-inverse: #C0D6DF;

  /* Semantic */
  --success-ink: #1B442F;  --success-bg: #D4E8DC;
  --warning-ink: #8A5300;  --warning-bg: #FFF4E0;
  --danger-ink:  #B91C1C;  --danger-bg:  #FDECEC;  --danger-bg-pressed: #F8D7D7;
  --info-ink:    #2F5D6E;  --info-bg:    #E8F1F4;

  /* Typography */
  --font-display: "Syne", "Avenir Next", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-display: -0.025em;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows: cards use border, not shadow; shadows only for floating layers */
  --shadow-float: 0 4px 20px -4px rgb(27 68 47 / 0.12);
  --shadow-overlay: 0 12px 40px -12px rgb(27 68 47 / 0.20);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-progress: 400ms;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* Layout */
  --width-flow: 36rem;
  --width-content: 45rem;
  --width-wide: 75rem;
  --gutter: 1.25rem;
  --tap-min: 2.75rem;
  --bottom-bar-h: 4rem;
}

@media (min-width: 37.5em) { :root { --gutter: 1.5rem; } }
@media (min-width: 64em)   { :root { --gutter: 2rem; } }

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-progress: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* --- Reset --- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

/* Native controls follow the brand: green checks, readable placeholders,
   a brand-tinted text selection. */
:root { accent-color: var(--action); }
::placeholder { color: var(--text-muted); opacity: 1; }
::selection { background: var(--surface-brand); color: var(--text); }

p { margin: 0 0 var(--space-4); max-width: 36rem; }

a { color: var(--action); }

img, svg { display: block; max-width: 100%; }


/* --- Focus --- */

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.surface-inverse :focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* --- Buttons (§4.1) --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* M-7 (fix round): min-height, not a fixed height - a button must be
     able to grow (e.g. a long organisation name wrapping the confirm
     button's label onto two lines) without clipping its own text. */
  min-height: 3rem;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-pill);
  border: none;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.button-primary {
  background: var(--action);
  color: var(--text-inverse);
}
.button-primary:hover { background: var(--action-hover); }
.button-primary:active { background: var(--action-pressed); transform: scale(0.98); }

.button-secondary {
  background: transparent;
  color: var(--action);
  border: 1.5px solid var(--action);
}
.button-secondary:hover { background: var(--action-soft-hover); }
.button-secondary:active { background: var(--action-soft-pressed); }

/* M2c2 (DESIGN.md §4.1 "Danger"): irreversible actions only ("Data
   verwijderen"), always behind a second confirmation step. */
.button-danger {
  background: transparent;
  color: var(--danger-ink);
  border: 1.5px solid var(--danger-ink);
}
.button-danger:hover { background: var(--danger-bg); }
.button-danger:active { background: var(--danger-bg-pressed); }

.button[disabled], .button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.button-block { width: 100%; }

/* --- Text field (§4.2) --- */

.field { display: block; margin-top: var(--space-4); }

.field-label {
  display: block;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--text);
  margin-bottom: var(--space-2);
}

.field-hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.field-hint + .field-input { margin-top: var(--space-2); }

.field-input {
  display: block;
  width: 100%;
  height: 3rem;
  padding: 0 var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
}

.field-input:focus-visible {
  border-color: var(--action);
}

.field-input:disabled {
  background: var(--surface-muted);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.field-input[aria-invalid="true"] {
  border-color: var(--danger-ink);
  color: var(--danger-ink);
}

/* --- Card (§4.3) --- */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* --- Notice / alert (§4.4) --- */

.notice {
  display: block;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-base);
  margin: var(--space-4) 0 0;
  overflow-wrap: anywhere;
}

/* B8d review L4: an empty notice stays rendered (a live region removed
   with display: none is dropped from the accessibility tree, so text put
   into it later may not be announced); it just takes no space. */
.notice:empty,
.notice[data-variant]:empty {
  padding: 0;
  margin: 0;
  background: none;
}

.notice[data-variant="info"]    { background: var(--info-bg);    color: var(--info-ink); }
.notice[data-variant="success"] { background: var(--success-bg); color: var(--success-ink); }
.notice[data-variant="warning"] { background: var(--warning-bg); color: var(--warning-ink); }
.notice[data-variant="danger"]  { background: var(--danger-bg);  color: var(--danger-ink); }

/* --- Confirmation pages: login, login/confirm, email-change/confirm (§4.9) --- */

.confirm-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-brand);
  padding: var(--space-6) var(--gutter);
}

/* Wraps the card plus the login-only reassurance line (§4.9 "Warmth") so
   both stack and centre together inside .confirm-page's flex box - used
   only on /login, not on the other two confirmation pages. */
.confirm-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 26rem;
}

.confirm-card {
  width: 100%;
  max-width: 26rem;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-float);
}

@media (max-width: 37.4em) {
  .confirm-card { padding: var(--space-6); }
}

.confirm-logo {
  height: 2rem;
  width: auto;
  margin: 0 auto var(--space-6);
}

.confirm-card h1 {
  font-size: var(--text-xl);
  text-align: left;
}

.confirm-card p { max-width: none; }

/* The bold new-address line (email-change) and the two-part sentence with
   <strong> (login/confirm) - both share the same overflow behaviour: a
   long address must wrap onto a new line, never overflow the card. */
.confirm-address {
  font-weight: var(--weight-semibold);
  margin: var(--space-4) 0 0;
  overflow-wrap: anywhere;
}

.confirm-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Small, muted reassurance line under the login card only (§4.9 "Warmth") -
   not a footer link list, just one sentence. */
.confirm-reassurance {
  margin: 0;
  max-width: 26rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Language switch on the login pages: a quiet group of text buttons under the
   card, the current language marked with aria-pressed. Buttons are generated
   from the active languages in js/login.js (no language named here). */
.lang-switch {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
}

.lang-switch[hidden] { display: none; }

.lang-switch-button {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.lang-switch-button:hover { background: var(--surface-brand-soft); }

.lang-switch-button[aria-pressed="true"] {
  background: var(--surface-card);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-float);
  cursor: default;
}

/* --- App shell / skeleton (B8b placeholders; B8c/B8d fill the screens) --- */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) calc(var(--bottom-bar-h) + var(--space-6));
}

.skeleton {
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  min-height: 3rem;
}

/* ==========================================================================
   B8c: employee screens (trust cards, intake/check-in, closing, safety,
   home, help, "Er speelt iets"). docs/design/DESIGN.md §4-§5.
   ========================================================================== */

/* --- Frame --- */

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app-main-flow { max-width: var(--width-flow); }

@media (min-width: 64em) {
  .app-main { padding-top: var(--space-10); }
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.app-header-home {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.app-logo {
  height: 2rem;
  width: auto;
}

.app-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}

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

/* --- Type helpers --- */

.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lead { font-size: var(--text-md); }
.muted { color: var(--text-muted); }

.display-title { font-size: var(--text-2xl); }

.section-title {
  font-size: var(--text-lg);
  margin: var(--space-8) 0 var(--space-3);
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--action);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-thickness: 2px; }
.app-footer .text-link { min-width: var(--tap-min); }

/* Headings get programmatic focus on every screen change (tabindex=-1,
   dom.js focusHeading) so screen readers start at the top. They are not
   interactive, so no focus ring on them. */
h1[tabindex="-1"]:focus-visible { outline: none; }
/* B8d: the same for other non-interactive elements that receive focus
   programmatically (the step-up heading, a confirmation that replaced the
   button the user just pressed). */
h2[tabindex="-1"]:focus-visible,
h3[tabindex="-1"]:focus-visible,
p[tabindex="-1"]:focus-visible { outline: none; }

/* --- Buttons: quiet variant (§4.1) and layout --- */

.button-quiet {
  background: transparent;
  color: var(--action);
}
.button-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.button-quiet:active { background: var(--surface-muted); }

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.actions-flow { margin-top: var(--space-8); }

/* --- Loading skeleton: fixed heights, so no layout jump --- */

.skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: calc(var(--tap-min) + var(--space-6));
}

.skeleton {
  animation: skeleton-pulse 1.4s var(--ease-in-out) infinite alternate;
}
.skeleton-line-sm { min-height: 0; height: 0.875rem; width: 30%; }
.skeleton-title   { min-height: 0; height: 2.5rem; width: 80%; }
.skeleton-card    { min-height: 0; height: 9rem; border-radius: var(--radius-lg); }
.skeleton-scale   { min-height: 0; height: 3.5rem; max-width: 30rem; }
.skeleton-button  { min-height: 0; height: 3rem; border-radius: var(--radius-pill); }

@keyframes skeleton-pulse {
  from { opacity: 1; }
  to { opacity: 0.55; }
}

/* --- Trust cards (INT-01, INT-02) --- */

.steps {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.step {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background-color var(--duration-base) var(--ease-out);
}
.step-done { background: var(--action); }

.trust-card {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
}

.trust-card p { color: var(--text-inverse); font-size: var(--text-md); }

.trust-title {
  font-size: var(--text-2xl);
  color: var(--text-inverse);
  margin-bottom: var(--space-5);
}

.trust-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  letter-spacing: 0;
  line-height: var(--leading-snug);
  color: var(--text-inverse-muted);
  margin: var(--space-6) 0 var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-inverse);
}

/* The first subheading sits right under the card title: no divider. */
.trust-title + .trust-subtitle {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.trust-inline-link {
  color: var(--text-inverse);
  text-underline-offset: 3px;
}

.trust-privacy-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--text-inverse);
  font-weight: var(--weight-medium);
  text-underline-offset: 3px;
}

/* --- Check-in flow (CHK-02, CHK-06, CHK-08; DESIGN §4.5-§4.7) --- */

.flow { padding-top: var(--space-2); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  margin: 0 calc(-1 * var(--space-2));
}

.topbar-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--action);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-decoration: none;
  cursor: pointer;
}
.topbar-action:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar-action:disabled { opacity: 0.6; cursor: not-allowed; text-decoration: none; }

.progress-wrap { margin: var(--space-3) 0 var(--space-8); }

.progress-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.progress {
  display: block;
  width: 100%;
  height: 6px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--border);
  color: var(--action);
  appearance: none;
  overflow: hidden;
}
.progress::-webkit-progress-bar { background: var(--border); border-radius: var(--radius-pill); }
.progress::-webkit-progress-value {
  background: var(--action);
  border-radius: var(--radius-pill);
  transition: width var(--duration-progress) var(--ease-out);
}
.progress::-moz-progress-bar { background: var(--action); border-radius: var(--radius-pill); }

.question {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-8);
  max-width: 36rem;
}

.scale { max-width: 30rem; }

.scale-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

/* The real radio sits invisibly on top of its box: native arrow-key and
   screen-reader behaviour, with the visible state on the sibling span. */
.scale-option {
  position: relative;
  display: block;
}

.scale-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.scale-number {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
  transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
  pointer-events: none;
}

.scale-input:hover + .scale-number { border-color: var(--action); background: var(--surface-brand-soft); }

.scale-input:focus-visible + .scale-number {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.scale-input:checked + .scale-number {
  background: var(--action);
  border-color: var(--action);
  color: var(--text-inverse);
}

/* Selected is never colour alone (CHK-08): a small check mark as well. */
.scale-input:checked + .scale-number::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.scale-anchors {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.scale-anchors span { max-width: 45%; }
.scale-anchors span:last-child { text-align: right; }

.field-textarea {
  height: auto;
  min-height: 10rem;
  padding: var(--space-3) var(--space-4);
  line-height: var(--leading-body);
  resize: vertical;
}

.field .field-hint:first-child { margin: 0 0 var(--space-2); }

.field-counter {
  display: block;
  margin-top: var(--space-2);
  text-align: right;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Closing (CHK-05, AI-09) --- */

.closing { padding-top: var(--space-6); }

.closing-mark {
  display: block;
  width: 1.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: var(--space-6);
}

.help-offer { margin-top: var(--space-2); }

/* --- Safety (SAF-02..04): server text as-is, calm card --- */

.safety {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
}

.safety-text {
  margin: 0;
  max-width: none;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* B8d review L6: room for the 44 px tel: targets, so they reach into the
   neighbouring lines' leading, not onto their text. Only a text that has such a link needs it. */
.safety-text:has(.safety-tel) { line-height: 2; }

/* Inline tel: links get a 44px target through padding. They stay inline
   (B8d): vertical padding on an inline box widens the hit area without
   moving the line, the negative side margins cancel the horizontal
   padding, and there is no break opportunity before the punctuation that
   follows ("Bel 112."), which inline-block did introduce. */
.safety-tel {
  display: inline;
  /* Exactly enough to reach 44 px around the glyph box (about 1.34em in DM
     Sans), and no more, so it stays within the neighbouring lines' leading. */
  padding: max(10px, calc((44px - 1.34em) / 2)) 0.75rem;
  margin: 0 -0.75rem;
  font-weight: var(--weight-semibold);
  text-underline-offset: 3px;
  white-space: nowrap;
}


/* --- Help routes --- */

.route-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.route {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.route-name {
  margin: 0;
  font-weight: var(--weight-semibold);
}

.route-description {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
}

.route-contact {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  font-weight: var(--weight-medium);
  color: var(--action);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
span.route-contact { color: var(--text); }

/* --- Home (PRD §10.1, CHK-07) --- */

.home-band {
  background: var(--surface-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-4);
}

.greeting {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.home-band-text { margin: 0; }

.card-title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}

.card-muted {
  background: var(--surface-muted);
  border-color: transparent;
}
.card-muted p:last-child { margin-bottom: 0; }

.home-checkin .button { margin-top: var(--space-2); }

.home-signal { margin-top: var(--space-6); }
.home-signal .field-hint { margin-top: var(--space-2); }

.card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.card-link:hover { border-color: var(--border-strong); }
.card-link:active { transform: scale(0.99); }
.card-link .card-title { margin: 0; }

.card-link-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.chevron {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: var(--space-2);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ==========================================================================
   B8d: account screen and private-address advice (CH-40).
   ========================================================================== */

.app-header-account { padding: 0 var(--space-1); }

.actions-tight { margin-top: var(--space-4); }

/* The advice is information, not an alarm: the soft brand tint, no border. */
.card-advice {
  margin-top: var(--space-4);
  background: var(--surface-brand-soft);
  border-color: transparent;
}
.card-advice p { margin-bottom: 0; }

.account-section + .account-section { margin-top: var(--space-4); }
.account-section p:last-child { margin-bottom: 0; }

.account-value {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.account-email { overflow-wrap: anywhere; }

.account-form { margin-top: var(--space-5); }

.field-hint-top { margin: 0 0 var(--space-2); }

.field-error {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--danger-ink);
}

.account-reauth {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.account-reauth-title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  letter-spacing: 0;
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}

.account-logout { margin-top: var(--space-8); }

.safety-no-routes { margin-top: var(--space-4); line-height: 2.1; }

/* --- Privacy statement (static page, concept) --- */

.prose h2 {
  font-size: var(--text-lg);
  margin: var(--space-8) 0 var(--space-3);
}
.prose ul { padding-left: var(--space-5); margin: 0 0 var(--space-4); max-width: 36rem; }
.prose li { margin-bottom: var(--space-2); }

/* ==========================================================================
   M2c2: privacy screens - "wat Vivly onthoudt" (memories.js) and "mijn
   data" (export.js). docs/specs/M2-begrijpen.md, M2c2.
   ========================================================================== */

.account-privacy-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.memory-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.memory-text {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
}

.memory-age {
  margin: 0;
  font-size: var(--text-sm);
}

.memory-themes {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.memory-theme {
  background: var(--surface-brand-soft);
  color: var(--info-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.memories-clear { margin-top: var(--space-6); }

/* Inline second-confirmation step for an irreversible action (DESIGN.md
   §4.1 "Bevestig in een tweede stap"): memories.js's "Alles wissen" and
   export.js's "Account verwijderen". */
.confirm-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--danger-bg);
  border-radius: var(--radius-md);
}

.confirm-panel-title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
  color: var(--danger-ink);
}

/* ==========================================================================
   M3j1 to M3j3 (docs/specs/M3-handelen.md): the employee's next step, offers,
   sharing, Mijn stappen, Historie, follow-up and the bottom bar (DESIGN.md
   §4.3, §4.4, §4.7). Tokens only.
   ========================================================================== */

/* --- Bottom bar (§4.7): Home, Mijn stappen, Historie, Privacy. Fixed on
   mobile; from 64em a plain row of links under the header. --- */

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface-card);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-float);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--bottom-bar-h);
  padding: var(--space-2) var(--space-1);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-decoration: none;
  text-align: center;
}

.bottom-nav-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.bottom-nav-icon-home { -webkit-mask-image: url("/assets/icons/nav-home.svg"); mask-image: url("/assets/icons/nav-home.svg"); }
.bottom-nav-icon-steps { -webkit-mask-image: url("/assets/icons/nav-steps.svg"); mask-image: url("/assets/icons/nav-steps.svg"); }
.bottom-nav-icon-history { -webkit-mask-image: url("/assets/icons/nav-history.svg"); mask-image: url("/assets/icons/nav-history.svg"); }
.bottom-nav-icon-privacy { -webkit-mask-image: url("/assets/icons/nav-privacy.svg"); mask-image: url("/assets/icons/nav-privacy.svg"); }

.bottom-nav-item[aria-current="page"] {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.bottom-nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5rem;
  height: 3px;
  margin-left: -0.75rem;
  border-radius: 2px;
  background: var(--accent);
}

@media (min-width: 64em) {
  .bottom-nav {
    position: static;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    padding-bottom: 0;
    box-shadow: none;
    border-top: 0;
    border-bottom: 1px solid var(--border);
    background: none;
  }
  .bottom-nav-item {
    flex-direction: row;
    min-height: var(--tap-min);
    padding: 0;
    font-size: var(--text-base);
  }
  .bottom-nav-icon { display: none; }
  .bottom-nav-item[aria-current="page"]::before {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    margin-left: 0;
  }
}

/* --- Lists, facts and tags --- */

.card-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.facts { margin: 0 0 var(--space-3); }

.fact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-1) 0;
}

.fact-label {
  min-width: 8rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.fact-value {
  margin: 0;
  overflow-wrap: anywhere;
}

.status-line {
  margin: 0 0 var(--space-3);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.tag-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.tag-note {
  background: var(--info-bg);
  color: var(--info-ink);
}

/* --- Radio choices: a closed list, nothing preselected --- */

.choice-group {
  min-width: 0;
  margin: var(--space-5) 0 0;
  padding: 0;
  border: 0;
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.choice:hover { border-color: var(--action); }
.choice:has(.choice-input:checked) {
  border-color: var(--action);
  background: var(--surface-brand-soft);
}

/* The real radio fills the whole choice (a 44 px target, native keyboard
   and screen reader behaviour); the visible circle is drawn on the label. */
.choice-input {
  position: absolute;
  z-index: 1;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-label {
  position: relative;
  padding-left: calc(1.25rem + var(--space-3));
  overflow-wrap: anywhere;
}

.choice-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-card);
}

.choice-input:checked + .choice-label::before {
  border-color: var(--action);
  background: var(--action);
  box-shadow: inset 0 0 0 4px var(--surface-card);
}

.choice-input:focus-visible + .choice-label::before {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.choice-group > .field-input { margin-top: var(--space-2); }

/* --- The step card and its parts --- */

.step-card, .step-decline, .share-preview { margin-top: var(--space-4); }

.step-description {
  max-width: none;
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.step-description:focus-visible { outline: none; }

.step-fact { margin-bottom: var(--space-3); }
.step-fact p { margin: 0; }

.step-fact-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--text-muted);
}

.step-item .button { margin-top: var(--space-2); }

.offer-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.offer-card .card-title { overflow-wrap: anywhere; }
.offer-card .offer-description { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }

/* --- Sharing: the content block is the one shape both sides show --- */

.shared-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.shared-text {
  max-width: none;
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.shared-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.shared-topic {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-brand-soft);
  color: var(--info-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.share-not-shared {
  margin: var(--space-4) 0 var(--space-3);
  font-weight: var(--weight-medium);
}

.share-ai-notice { margin: 0 0 var(--space-3); }

.share-text-block { margin-top: var(--space-3); }

.share-actions { margin-top: var(--space-3); }
.share-actions .two-step + .two-step { margin-top: var(--space-3); }

.history-summary {
  max-width: none;
  overflow-wrap: anywhere;
}

/* M3 polish: more room between the question groups of the follow-up; a hidden group takes no gap. */
.followup-questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

.followup-question[hidden] { display: none; }

/* --- Toast (§4.4): one confirmation, five seconds --- */

.toast-region {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom) + var(--space-3));
  z-index: 20;
  max-width: var(--width-flow);
  margin: 0 auto;
}
.toast-region:empty { display: none; }

.toast-visible {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  box-shadow: var(--shadow-float);
}

/* ==========================================================================
   M2c1: the conversation with the coach (coach.js), the hypothesis
   (confirm.js) and the memory-consent card (memory-consent.js).
   docs/specs/M2-begrijpen.md, M2c1. No chat gimmicks: calm lines on the
   page, the coach's in the soft brand tint, the employee's own as plain
   cards; three dots while a turn runs.
   ========================================================================== */

.topbar-end { justify-content: flex-end; }

.chat-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.chat-intro { margin-bottom: var(--space-3); }

/* CH-53: the "AI" label next to the conversation title (text, never colour only). */
.chat-ai-badge { vertical-align: middle; }

/* CH-56: "Meer info" with the "not a care provider" text. */
.chat-not-care { margin-bottom: var(--space-6); }
.chat-not-care summary { cursor: pointer; }
.chat-not-care p { margin-top: var(--space-2); }

.chat-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chat-line {
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  max-width: 100%;
}

.chat-text {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-line-coach {
  background: var(--surface-brand-soft);
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  margin-right: var(--space-6);
  border-bottom-left-radius: var(--radius-sm);
}

.chat-line-user {
  background: var(--surface-card);
  border: 1px solid var(--border);
  margin-left: var(--space-6);
  border-bottom-right-radius: var(--radius-sm);
}

/* Three dots while a turn runs (no streaming). Purely visual: the
   screen-reader text lives in a separate status region. */
.typing {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
  background: var(--surface-brand-soft);
}

.typing-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-pulse 1.2s var(--ease-in-out) infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-pulse {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

.composer { margin-top: var(--space-6); }
.composer .field-label { font-size: var(--text-base); }
.chat-input { min-height: 8rem; }

/* --- Speech input (M2c3): the microphone button below a text field --- */

.speech { margin-top: var(--space-4); }
.speech .field-hint { display: block; margin-bottom: var(--space-2); }
.speech-timer {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.speech-status {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.speech-status:empty { display: none; }

.hypothesis {
  margin-top: var(--space-6);
  background: var(--surface-brand-soft);
  border-color: transparent;
  padding: var(--space-6) var(--space-5);
}

.hypothesis-text {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-5);
  max-width: none;
  overflow-wrap: anywhere;
}
.hypothesis-text:focus-visible { outline: none; }

.correction .actions { margin-top: var(--space-4); }

.home-consent { margin-top: var(--space-4); }
.home-consent .text-link { margin-top: var(--space-2); }

/* ==========================================================================
   M3k + M3l: manager, HR recipient and HR admin screens (Aandacht, Gesprek,
   Opvolging, Aanvragen, Aanbod). docs/design/DESIGN.md §4.7 (desktop
   navigation: text links, 3 px underline on the active route), §5 (HR and
   manager content in --width-wide). Tokens only.
   ========================================================================== */

.app-main-wide { max-width: var(--width-wide); }

/* Header with the role navigation: logo and account on the first row, the
   links below on a phone, all on one row from 1024 px. */
.app-header-nav { flex-wrap: wrap; }
.role-nav { flex: 1 1 100%; order: 3; }
.role-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.role-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-1);
  border-bottom: 3px solid transparent;
  color: var(--text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.role-nav-link:hover { border-bottom-color: var(--border-strong); }
.role-nav-link[aria-current="page"] { border-bottom-color: var(--accent); font-weight: var(--weight-semibold); }

@media (min-width: 64em) {
  .role-nav { flex: 1 1 auto; order: 0; margin-left: var(--space-8); }
}

/* On a phone the routes are one scrolling row; role-ui.js keeps the active route in view and sets
   role-nav-more-start / -end, which show as a soft fade at the edge where more routes are. The list pads and bleeds
   by the focus ring (3 px + 2 px offset) so scrolling does not clip it. */
@media (max-width: 63.99em) {
  .role-nav { min-width: 0; }
  .role-nav-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: -0.3125rem;
    padding: 0.3125rem;
    scroll-padding-inline: var(--space-10);
    scrollbar-width: none;
  }
  .role-nav-list::-webkit-scrollbar { display: none; }
  .role-nav-list > li { flex: none; }
  .role-nav-more-end .role-nav-list {
    -webkit-mask-image: linear-gradient(to right, var(--text) calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, var(--text) calc(100% - 2.5rem), transparent);
  }
  .role-nav-more-start .role-nav-list {
    -webkit-mask-image: linear-gradient(to left, var(--text) calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to left, var(--text) calc(100% - 2.5rem), transparent);
  }
  .role-nav-more-start.role-nav-more-end .role-nav-list {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--text) 2.5rem, var(--text) calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, var(--text) 2.5rem, var(--text) calc(100% - 2.5rem), transparent);
  }
}

/* Lists of items and requests. */
.attention-group { margin-top: var(--space-6); }
.attention-group .section-title { margin-top: 0; }
.attention-list, .request-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.attention-item { margin-top: 0; }
.attention-facts, .attention-next { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.attention-next-label { font-weight: var(--weight-medium); color: var(--text); }
.attention-none, .attention-empty { margin-top: var(--space-6); }
.attention-empty p, .attention-none p { max-width: 36rem; }

@media (min-width: 64em) {
  .attention-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

/* Status badge: always text, the colour only supports it. */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--surface-muted);
  color: var(--text);
}
.badge[data-variant="success"] { background: var(--success-bg); color: var(--success-ink); }
.badge[data-variant="info"] { background: var(--info-bg); color: var(--info-ink); }
.badge[data-variant="warning"] { background: var(--warning-bg); color: var(--warning-ink); }
.badge-row { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }

/* Gesprek: content left, actions right from 1024 px. */
.manager-gate .actions { max-width: 24rem; }
.manager-grid { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.manager-main, .manager-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.manager-grid .card-title { margin-bottom: var(--space-3); }

@media (min-width: 64em) {
  .manager-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
}

.prep-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  margin: var(--space-4) 0 var(--space-1);
}
.prep-label:first-child { margin-top: 0; }
.prep p, .prep-questions { margin: 0 0 var(--space-2); }
.prep-questions { padding-left: var(--space-5); }
.plan-done { margin: 0; font-weight: var(--weight-medium); }
.plan-done:focus-visible { outline: none; }

/* A choice in a group: the real radio or checkbox fills the box (native keyboard
   and screen reader behaviour, 44 px target), the visible state is the span. */
.choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-group legend { padding: 0; }
.choice-group .scale-option + .scale-option, .choice-group .field-hint + .scale-option { margin-top: var(--space-2); }
.choice-box {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: var(--space-2) var(--space-10) var(--space-2) var(--space-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text);
  transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
  pointer-events: none;
}
.scale-input:hover + .choice-box { border-color: var(--action); background: var(--surface-brand-soft); }
.scale-input:focus-visible + .choice-box { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.scale-input:checked + .choice-box { background: var(--action); border-color: var(--action); color: var(--text-inverse); }
.scale-input:checked + .choice-box::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 11px;
  height: 6px;
  margin-top: -5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
/* A lone checkbox in this box style shows its unchecked state too: an empty box where the check mark appears. */
.scale-input[type="checkbox"] + .choice-box::before {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-card);
}
.scale-input[type="checkbox"]:checked + .choice-box::before { border-color: var(--text-inverse); background: transparent; }
.scale-input[type="checkbox"] + .choice-box::after { right: calc(var(--space-4) + 4px); }
.feedback-form .notice:empty, .decide-panel .notice:empty { margin: 0; }

/* HR: requests and offerings. */
.request-region, .offering-region { display: flex; flex-direction: column; gap: var(--space-2); }
.request-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.request-head .card-title { margin: 0; }
.request-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0;
}
.request-facts dt { color: var(--text-muted); font-size: var(--text-sm); padding-top: 2px; }
.request-facts dd { margin: 0; overflow-wrap: anywhere; }
.request-actions { flex-direction: row; flex-wrap: wrap; margin-top: var(--space-4); }
/* M4k: masked login address; the shown one keeps its length visible. */
.user-list { margin-top: var(--space-4); }
.user-email-value { font-variant-numeric: tabular-nums; }
.user-email-value[data-revealed] { font-weight: var(--weight-medium); }
.decide-panel, .offering-form {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-md);
}
.decide-panel .confirm-panel-title, .offering-form .confirm-panel-title { color: var(--text); }
.decide-note { min-height: 6rem; }
.start-info { min-height: 6rem; }
.offering-theme { margin-top: var(--space-4); }
.offering-theme-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.offering-theme-head .section-title { margin: 0; }
.offering-form-slot:empty { display: none; }
.offering-row .field-hint:empty { display: none; }
.button.is-blocked { color: var(--text-muted); cursor: not-allowed; }
.button.is-blocked:hover { text-decoration: none; }

@media (min-width: 64em) {
  .request-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
}

/* HR: reports (Overzicht, Thema's, the budget card). Tokens only; bars are <progress>, values are always text. */
.report-toolbar { margin-top: var(--space-6); max-width: 24rem; }
.report-toolbar .field-label { margin-bottom: var(--space-2); }
.report-region { margin-top: var(--space-6); }
.report-loading { color: var(--text-muted); margin: 0; }
.report-layout { display: grid; gap: var(--space-4); }
.report-main, .report-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.report-card .card-title { margin-bottom: var(--space-2); }
.report-intro { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.report-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  margin: var(--space-6) 0 var(--space-3);
}
.report-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-4); }
.report-figure-value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.report-figure-label { color: var(--text-muted); }
.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.report-row { display: block; }
.report-row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-2); }
.report-label { font-weight: var(--weight-medium); }
.report-value { font-weight: var(--weight-semibold); white-space: nowrap; }
.report-value-note { color: var(--text-muted); font-weight: var(--weight-medium); }
.report-trend { margin-left: var(--space-2); color: var(--text-muted); }
.report-hint { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.report-row-quiet { padding: var(--space-3) var(--space-4); background: var(--surface-muted); border-radius: var(--radius-md); }
.report-row-quiet .report-row-head { margin-bottom: 0; }
.report-bar {
  display: block;
  width: 100%;
  height: 0.75rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--border);
  color: var(--action);
  appearance: none;
  overflow: hidden;
}
.report-bar::-webkit-progress-bar { background: var(--border); border-radius: var(--radius-pill); }
.report-bar::-webkit-progress-value { background: var(--action); border-radius: var(--radius-pill); }
.report-bar::-moz-progress-bar { background: var(--action); border-radius: var(--radius-pill); }
.report-calm { margin: 0; padding: var(--space-4); background: var(--surface-brand-soft); color: var(--text); border-radius: var(--radius-md); }
.report-footnote { color: var(--text-muted); font-size: var(--text-sm); margin: var(--space-3) 0 0; }
.report-how p { color: var(--text); }
.report-how p:last-child { margin-bottom: 0; }
.report-empty { margin-top: var(--space-6); }
.report-empty p { max-width: 36rem; }
.report-budget-region:not(:empty) { margin-bottom: var(--space-4); }
.report-budget .report-bar { margin: 0 0 var(--space-4); }
.report-facts { margin-bottom: var(--space-2); }
.report-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.report-table th, .report-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: left; border-bottom: 1px solid var(--border); }
.report-table thead th { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.report-table tbody th { font-weight: var(--weight-medium); }

@media (min-width: 64em) {
  .report-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
}

/* CH-59: the COPSOQ block and the employee's own results. The source line sits quietly under the block; the
   "does not apply" choice is set apart from the five official answers. The results are plain text: no colour, no
   bar, no total (spec §0.9). */
.copsoq-header { margin: 0 0 var(--space-2); color: var(--text-muted); }
.copsoq-source { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }
.copsoq-not-applicable { margin-top: var(--space-3); }
.copsoq-topics { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.copsoq-topic { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.copsoq-topic-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.copsoq-topic-name { margin: 0; font-size: var(--text-md); }
.copsoq-score { font-weight: 600; white-space: nowrap; }
.copsoq-score-none { font-weight: 400; color: var(--text-muted); }
.copsoq-topic-note { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-muted); }

/* The `hidden` attribute is how every state-toggle in this codebase works
   (app/login_pages/login.js, docs/design/DESIGN.md §4.9 "Techniek"). Every
   component rule above (.button, .notice, ...) has the same specificity as
   a plain [hidden] selector, so without `!important` a later same-
   specificity component rule (e.g. `.button { display: inline-flex }`)
   would win the cascade over an earlier [hidden] rule and a hidden button
   would still render. Kept last and `!important` on purpose: this is the
   one, well-known exception to "no !important" - `hidden` must always win,
   regardless of which component class is also present on the element. */
[hidden] { display: none !important; }