/* GENERATED by design-system/build.mjs from tokens.css, components.css, pilot.css — edit the sources, not this file. */
/* Hompt design tokens (CR-09, direction A · Thread). Single source of truth: every other stylesheet uses var(--h-*) only.
   Daylight-first; dark follows the device setting. Meaning, not decoration:
   pine = Hompt and its actions · amber = your turn (only when Hompt reports a required action) · green = good outcome · red = failure. */
:root {
  color-scheme: light dark;
  --h-bg: #F4F6F3;
  --h-surface: #FFFFFF;
  --h-surface-sunk: #EBF0EC;
  --h-ink: #15201C;
  --h-ink-2: #34433D;
  --h-muted: #4D5C56;
  --h-line: #D9E1DC;
  --h-control-border: #7C8F86;
  --h-brand: #1F5A4D;
  --h-brand-hover: #174439;
  --h-brand-ink: #FFFFFF;
  --h-brand-soft: #DCE9E2;
  --h-thread-rail: #BCD0C5;
  --h-thread-future: #7C8F86;
  --h-turn: #8F4400;
  --h-turn-marker: #B35A00;
  --h-turn-surface: #FCECD6;
  --h-turn-border: #C9781F;
  --h-positive: #1B6235;
  --h-positive-surface: #E2F1E6;
  --h-danger: #9E2F1D;
  --h-danger-surface: #FBE5E0;
  --h-focus: #1F5A4D;
  --h-focus-halo: #FFFFFF;

  --h-font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", sans-serif;
  --h-font-display: "SF Pro Display", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --h-text-xs: 0.8125rem;   /* 13 */
  --h-text-s: 0.875rem;     /* 14 */
  --h-text-m: 1rem;         /* 16 body */
  --h-text-l: 1.125rem;     /* 18 */
  --h-text-xl: 1.375rem;    /* 22 */
  --h-text-headline: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem);   /* 28–36 */
  --h-text-outcome: clamp(2.75rem, 2rem + 3.6vw, 3.75rem);      /* 44–60: £20, 9:30 */
  --h-leading-tight: 1.12;
  --h-leading-body: 1.55;
  --h-tracking-display: -0.022em;
  --h-weight-display: 650;

  --h-space-1: 4px; --h-space-2: 8px; --h-space-3: 12px; --h-space-4: 16px; --h-space-5: 20px;
  --h-space-6: 24px; --h-space-8: 32px; --h-space-10: 40px; --h-space-14: 56px;
  --h-radius-control: 12px;
  --h-radius-sheet: 18px;
  --h-radius-pill: 999px;
  --h-target: 44px;
  --h-measure: 34rem;
  --h-shadow-lift: 0 1px 2px color-mix(in srgb, var(--h-ink) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--h-ink) 6%, transparent);
  --h-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --h-duration-quick: 140ms;
  --h-duration-reveal: 320ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --h-bg: #111614;
    --h-surface: #19201D;
    --h-surface-sunk: #151B18;
    --h-ink: #ECF1EE;
    --h-ink-2: #CBD5D0;
    --h-muted: #A5B2AC;
    --h-line: #2C3531;
    --h-control-border: #74857D;
    --h-brand: #8FCFB9;
    --h-brand-hover: #B1E0CF;
    --h-brand-ink: #0D1F19;
    --h-brand-soft: #22332C;
    --h-thread-rail: #3A4B44;
    --h-thread-future: #74857D;
    --h-turn: #F4BD6E;
    --h-turn-marker: #F4BD6E;
    --h-turn-surface: #352610;
    --h-turn-border: #9A6A27;
    --h-positive: #89D5A4;
    --h-positive-surface: #15301F;
    --h-danger: #F29C8B;
    --h-danger-surface: #3A1A15;
    --h-focus: #8FCFB9;
    --h-focus-halo: #111614;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --h-duration-quick: 0ms; --h-duration-reveal: 0ms; }
}

/* Hompt journey components (CR-09). Uses tokens only. Patterns: JOURNEY.md.
   Emphasis ladder: handling (quiet) < outcome (prominent, green numeral) < your turn (unmistakable, amber + action). */

/* Shell and story header */
.h-shell { min-height: 100%; background: var(--h-bg); color: var(--h-ink); font-family: var(--h-font-sans); font-size: var(--h-text-m); line-height: var(--h-leading-body); -webkit-font-smoothing: antialiased; }
.h-wordmark { display: block; height: 26px; width: calc(26px * 321 / 152); color: var(--h-brand); }
.h-context { margin: 0; font-size: var(--h-text-s); color: var(--h-muted); }
.h-headline { margin: 0; font-family: var(--h-font-display); font-weight: var(--h-weight-display); font-size: var(--h-text-headline); line-height: var(--h-leading-tight); letter-spacing: var(--h-tracking-display); max-width: var(--h-measure); text-wrap: balance; }
.h-lede { margin: 0; color: var(--h-ink-2); max-width: var(--h-measure); }
.h-story { display: flex; flex-direction: column; gap: var(--h-space-3); }

/* Journey thread: one continuous line from done → now → next */
.h-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.h-step { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: var(--h-space-4); padding-bottom: var(--h-space-4); }
.h-step:last-child { padding-bottom: 0; }
.h-step::before { content: ""; grid-column: 1; grid-row: 1; justify-self: center; margin-top: 7px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--h-thread-future); background: var(--h-surface); }
.h-step::after { content: ""; position: absolute; left: 6px; top: 21px; bottom: 0; width: 2px; background: var(--h-line); }
.h-step:last-child::after { display: none; }
.h-step__body { grid-column: 2; grid-row: 1; }
.h-step__title { font-weight: 600; }
.h-step__meta { font-size: var(--h-text-s); color: var(--h-muted); }
.h-step--done::before { border-color: var(--h-brand); background: var(--h-brand); }
.h-step--done::after { background: var(--h-thread-rail); }
.h-step--now::before { width: 14px; height: 14px; margin-top: 5px; border: 3px solid var(--h-brand); }
.h-step--now .h-step__title { color: var(--h-brand); }
.h-step--you::before { width: 14px; height: 14px; margin-top: 5px; border: 3px solid var(--h-turn-marker); background: var(--h-turn-surface); }
.h-step--you .h-step__title { color: var(--h-turn); }
.h-step--good::before { width: 14px; height: 14px; margin-top: 5px; border: 3px solid var(--h-positive); }
.h-step--good .h-step__title { color: var(--h-positive); }
.h-step--next .h-step__title { font-weight: 500; color: var(--h-muted); }
.h-thread--compact .h-step { padding-bottom: var(--h-space-2); }

/* Your turn: unmistakable, only when Hompt reports a required human action */
.h-turn-marker { display: inline-flex; align-items: center; gap: var(--h-space-2); align-self: flex-start; padding: 5px 12px 5px 10px; border-radius: var(--h-radius-pill); background: var(--h-turn-surface); color: var(--h-turn); font-size: var(--h-text-s); font-weight: 700; }
.h-turn-marker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--h-turn-marker); }
.h-turn { display: flex; flex-direction: column; gap: var(--h-space-4); padding: var(--h-space-5); border-radius: var(--h-radius-sheet); background: var(--h-surface); border: 2px solid var(--h-turn-border); box-shadow: var(--h-shadow-lift); }

/* Good-outcome marker: restrained payoff for confirmed and completed moments */
.h-good-marker { display: inline-flex; align-items: center; gap: var(--h-space-2); align-self: flex-start; padding: 5px 12px 5px 10px; border-radius: var(--h-radius-pill); background: var(--h-positive-surface); color: var(--h-positive); font-size: var(--h-text-s); font-weight: 700; }
.h-good-marker::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }

/* Terms sheet: the agreed/current facts */
.h-terms { margin: 0; padding: var(--h-space-1) var(--h-space-4); background: var(--h-surface); border: 1px solid var(--h-line); border-radius: var(--h-radius-sheet); }
.h-terms__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--h-space-4); padding: var(--h-space-3) 0; border-bottom: 1px solid var(--h-line); }
.h-terms__row:last-child { border-bottom: 0; }
.h-terms__row dt { color: var(--h-muted); }
.h-terms__row dd { margin: 0; text-align: right; }
.h-terms--stacked .h-terms__row { flex-direction: column; gap: 2px; }
.h-terms--stacked .h-terms__row dd { text-align: left; }

/* Outcome: high-confidence numerals for the moments that matter (confirmed time, price, saving, completion) */
.h-outcome { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--h-space-4); padding: var(--h-space-5); background: var(--h-surface); border: 1px solid var(--h-line); border-radius: var(--h-radius-sheet); }
.h-outcome__label { display: block; font-size: var(--h-text-s); color: var(--h-muted); }
.h-outcome__value { display: block; font-family: var(--h-font-display); font-size: var(--h-text-outcome); line-height: 1; font-weight: 650; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--h-ink); }
.h-outcome--good { background: var(--h-positive-surface); border-color: transparent; }
.h-outcome--good .h-outcome__value { color: var(--h-positive); }
.h-outcome__was { text-align: right; color: var(--h-muted); }
.h-outcome__was s { font-size: var(--h-text-xl); font-variant-numeric: tabular-nums; }
.h-outcome__note { font-size: var(--h-text-s); font-weight: 650; color: var(--h-positive); }
.h-list__item .h-outcome__note { white-space: nowrap; }
.h-sheet { padding: var(--h-space-1) var(--h-space-4); background: var(--h-surface); border: 1px solid var(--h-line); border-radius: var(--h-radius-sheet); }
@media (prefers-reduced-motion: no-preference) {
  .h-outcome--reveal .h-outcome__value { animation: h-settle var(--h-duration-reveal) var(--h-ease) both; }
}
@keyframes h-settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Actions: one primary only when a human action is genuinely required */
.h-actions { display: flex; flex-direction: column; gap: var(--h-space-1); }
.h-btn { min-height: var(--h-target); padding: 0 var(--h-space-5); border-radius: var(--h-radius-control); border: 1px solid transparent; font: inherit; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background-color var(--h-duration-quick) var(--h-ease); }
.h-btn--primary { min-height: 52px; background: var(--h-brand); color: var(--h-brand-ink); font-size: var(--h-text-l); }
.h-btn--primary:hover { background: var(--h-brand-hover); }
.h-btn--secondary { background: var(--h-surface); color: var(--h-brand); border-color: var(--h-control-border); }
.h-btn--quiet { background: transparent; color: var(--h-brand); }
.h-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.h-link { color: var(--h-brand); font-weight: 600; text-decoration: none; min-height: var(--h-target); display: inline-flex; align-items: center; }
.h-link:hover { text-decoration: underline; }
:where(.h-btn, .h-link, .h-field input, .h-field select, .h-field textarea, .h-handoff a):focus-visible { outline: 3px solid var(--h-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--h-focus-halo); }

/* Fields */
.h-field { display: flex; flex-direction: column; gap: var(--h-space-1); font-weight: 600; }
.h-field input, .h-field select, .h-field textarea { min-height: var(--h-target); padding: var(--h-space-2) var(--h-space-3); border: 1px solid var(--h-control-border); border-radius: var(--h-radius-control); background: var(--h-surface); color: var(--h-ink); font: inherit; font-weight: 400; }
.h-field__hint { font-size: var(--h-text-s); font-weight: 400; color: var(--h-muted); }

/* External handoff (e.g. navigation): provider-neutral, notice always visible */
.h-handoff { display: flex; flex-direction: column; gap: var(--h-space-2); }
.h-handoff__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--h-space-2); }
.h-handoff__options a { min-height: var(--h-target); display: flex; align-items: center; justify-content: center; border: 1px solid var(--h-control-border); border-radius: var(--h-radius-control); color: var(--h-brand); font-weight: 600; font-size: var(--h-text-s); text-decoration: none; background: var(--h-surface); }
.h-handoff__notice { margin: 0; font-size: var(--h-text-xs); color: var(--h-muted); }

/* Lists and history */
.h-list { list-style: none; margin: 0; padding: 0; }
.h-list__item { display: flex; justify-content: space-between; gap: var(--h-space-4); padding: var(--h-space-3) 0; border-bottom: 1px solid var(--h-line); }
.h-list__item:last-child { border-bottom: 0; }
.h-list__meta { color: var(--h-muted); white-space: nowrap; }
.h-num { font-variant-numeric: tabular-nums; }

/* Outside the happy path: polish never disappears */
.h-notice { display: flex; flex-direction: column; gap: var(--h-space-2); padding: var(--h-space-4) var(--h-space-5); border-radius: var(--h-radius-sheet); background: var(--h-surface-sunk); color: var(--h-ink); }
.h-notice__title { font-weight: 650; }
.h-notice--success { background: var(--h-positive-surface); }
.h-notice--success .h-notice__title { color: var(--h-positive); }
.h-notice--failure { background: var(--h-danger-surface); }
.h-notice--failure .h-notice__title { color: var(--h-danger); }
.h-notice--turn { background: var(--h-turn-surface); }
.h-notice--turn .h-notice__title { color: var(--h-turn); }
.h-skeleton { display: block; height: 1em; border-radius: 6px; background: var(--h-surface-sunk); }
@media (prefers-reduced-motion: no-preference) {
  .h-skeleton { animation: h-breathe 1.6s var(--h-ease) infinite alternate; }
}
@keyframes h-breathe { from { opacity: 0.55; } to { opacity: 1; } }
.h-empty { color: var(--h-muted); }

/* Reference-only marker for synthetic examples of future capabilities */
.h-future { display: flex; flex-direction: column; gap: var(--h-space-2); padding: var(--h-space-4); border: 1px dashed var(--h-control-border); border-radius: var(--h-radius-sheet); }
.h-future__tag { font-size: var(--h-text-xs); color: var(--h-muted); }

/* Pilot application of the Hompt design system (CR-09). Presentation only: same markup, same actions.
   Maps existing pilot elements onto tokens and journey components; no colour literals here. */
:root { font-family: var(--h-font-sans); color: var(--h-ink); background: var(--h-bg); font-synthesis: none; line-height: var(--h-leading-body); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--h-bg); }
header { background: var(--h-bg); padding: var(--h-space-5) max(var(--h-space-5), calc((100% - 1080px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: var(--h-space-4); }
.brand { display: inline-flex; flex-direction: column; gap: var(--h-space-1); text-decoration: none; color: var(--h-brand); }
.brand__wordmark { display: block; height: 30px; width: auto; color: var(--h-brand); }
.brand span { display: block; font-family: var(--h-font-sans); font-size: var(--h-text-xs); letter-spacing: 0; font-weight: 500; color: var(--h-muted); }
main { max-width: 1120px; padding: var(--h-space-6) var(--h-space-5) var(--h-space-14); margin: auto; min-height: 70vh; }
h1 { font-family: var(--h-font-display); font-weight: var(--h-weight-display); font-size: var(--h-text-headline); line-height: var(--h-leading-tight); letter-spacing: var(--h-tracking-display); margin: 0 0 var(--h-space-3); max-width: var(--h-measure); text-wrap: balance; }
h2 { font-family: var(--h-font-display); font-weight: 650; font-size: var(--h-text-xl); line-height: 1.25; letter-spacing: -0.012em; margin: 0 0 var(--h-space-4); }
h3 { font-size: var(--h-text-l); font-variant-numeric: tabular-nums; margin: var(--h-space-2) 0; }
p { margin: var(--h-space-2) 0 var(--h-space-4); max-width: 42rem; }
.muted, small { color: var(--h-muted); }
.eyebrow { font-size: var(--h-text-s); font-weight: 600; color: var(--h-muted); letter-spacing: 0; text-transform: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--h-space-5); margin: var(--h-space-6) 0; }
.card { padding: var(--h-space-5) var(--h-space-6); border: 1px solid var(--h-line); border-radius: var(--h-radius-sheet); background: var(--h-surface); min-width: 0; }
.card article { padding: var(--h-space-4) 0; border-top: 1px solid var(--h-line); }
.card article:first-of-type { border-top: 0; padding-top: 0; }
.hero { background: var(--h-surface); color: var(--h-ink); border: 1px solid var(--h-line); padding: var(--h-space-6); border-radius: var(--h-radius-sheet); margin: var(--h-space-4) 0; }
.hero .muted { color: var(--h-muted); }
.status { display: inline-flex; align-items: center; gap: var(--h-space-2); background: var(--h-brand-soft); color: var(--h-brand); border-radius: var(--h-radius-pill); padding: 4px 12px; font-weight: 650; font-size: var(--h-text-s); margin: var(--h-space-2) 0; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--h-space-3); }
.actions { display: flex; gap: var(--h-space-2); flex-wrap: wrap; margin-top: var(--h-space-4); }
label { display: block; font-weight: 600; font-size: var(--h-text-s); margin: var(--h-space-4) 0 var(--h-space-1); }
input, textarea, select { display: block; width: 100%; font: inherit; color: var(--h-ink); background: var(--h-surface); border: 1px solid var(--h-control-border); border-radius: var(--h-radius-control); padding: var(--h-space-3); min-height: var(--h-target); }
textarea { min-height: 120px; resize: vertical; }
input[type=checkbox] { display: inline-block; min-height: auto; width: auto; margin-right: var(--h-space-2); accent-color: var(--h-brand); }
button, .button { font: inherit; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--h-brand); background: var(--h-brand); color: var(--h-brand-ink); border-radius: var(--h-radius-control); padding: var(--h-space-2) var(--h-space-5); min-height: var(--h-target); cursor: pointer; text-decoration: none; text-align: center; transition: background-color var(--h-duration-quick) var(--h-ease); }
button:hover, .button:hover { background: var(--h-brand-hover); border-color: var(--h-brand-hover); }
button.secondary, .button.secondary { background: var(--h-surface); color: var(--h-brand); border-color: var(--h-control-border); }
button.secondary:hover, .button.secondary:hover { background: var(--h-brand-soft); }
button.danger { border-color: var(--h-danger); background: var(--h-surface); color: var(--h-danger); }
button:disabled { opacity: 0.55; cursor: wait; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--h-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--h-focus-halo); }
form > h2 { margin-bottom: var(--h-space-2); }
form button[type=submit] { margin-top: var(--h-space-5); min-height: 52px; font-size: var(--h-text-l); }
.navigation { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--h-space-2); margin-top: var(--h-space-3); }
.navigation p { grid-column: 1 / -1; margin: 0; font-size: var(--h-text-xs); }
.navigation .button { padding: var(--h-space-2) var(--h-space-3); font-size: var(--h-text-s); white-space: nowrap; }
.login { max-width: 440px; margin: var(--h-space-10) auto; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--h-space-3); margin: var(--h-space-4) 0; }
.metric { border: 1px solid var(--h-line); border-radius: var(--h-radius-control); padding: var(--h-space-4); background: var(--h-surface); }
.metric strong { font-family: var(--h-font-display); font-size: 1.75rem; font-variant-numeric: tabular-nums; display: block; }
.metric span { font-size: var(--h-text-xs); color: var(--h-muted); }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--h-text-s); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--h-space-3); border-bottom: 1px solid var(--h-line); vertical-align: top; overflow-wrap: anywhere; }
th { font-size: var(--h-text-xs); font-weight: 650; color: var(--h-muted); }
details { background: var(--h-surface); border: 1px solid var(--h-line); border-radius: var(--h-radius-control); padding: var(--h-space-4); margin: var(--h-space-4) 0; }
summary { cursor: pointer; font-weight: 650; color: var(--h-brand); min-height: 24px; }
code { font-size: var(--h-text-xs); overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--h-surface-sunk); border-radius: var(--h-radius-control); padding: var(--h-space-4); font-size: var(--h-text-xs); }
#message:not(:empty) { position: fixed; bottom: var(--h-space-4); left: 50%; transform: translateX(-50%); width: min(92%, 640px); background: var(--h-surface); color: var(--h-ink); border: 2px solid var(--h-danger); border-radius: var(--h-radius-sheet); padding: var(--h-space-4) var(--h-space-5); box-shadow: var(--h-shadow-lift); z-index: 10; }
#message:not(:empty) { display: flex; align-items: center; gap: var(--h-space-3); }
#message .h-notice-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#message .h-notice-close { flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--h-ink); border: 1px solid var(--h-line); border-radius: var(--h-radius-control); font-size: 24px; }
footer { padding: var(--h-space-8) var(--h-space-5); color: var(--h-muted); text-align: center; font-size: var(--h-text-xs); }
.skip { position: absolute; left: -10000px; }
.skip:focus { left: var(--h-space-4); top: var(--h-space-4); background: var(--h-surface); color: var(--h-ink); padding: var(--h-space-4); z-index: 20; }
.empty { padding: var(--h-space-4); border-radius: var(--h-radius-control); background: var(--h-surface-sunk); color: var(--h-muted); }
hr { border: 0; border-top: 1px solid var(--h-line); margin: var(--h-space-5) 0; }
@media(max-width:600px){
  header { align-items: flex-start; }
  main { padding-top: var(--h-space-4); }
  .card { padding: var(--h-space-4) var(--h-space-5); }
  button { width: 100%; }
  .row button { width: auto; }
  .grid { grid-template-columns: 1fr; }
  .metric { padding: var(--h-space-3); }
  header button { font-size: var(--h-text-s); width: auto; }
}

/* CR-10 Principal journey: one continuous story per request (no card grid for a transaction). */
.journey { display: flex; flex-direction: column; gap: var(--h-space-5); max-width: 40rem; padding: var(--h-space-6) 0 var(--h-space-8); border-bottom: 1px solid var(--h-line); }
.journey .h-turn .h-headline, .h-turn h2 { font-size: var(--h-text-xl); }
.h-turn form > h2 { margin-top: 0; }
.h-turn label input[type=checkbox] { margin-right: var(--h-space-2); }
.h-block { display: block; margin-top: var(--h-space-1); }
.h-outcome__until { font-size: var(--h-text-xl); color: var(--h-muted); }

/* CR19 production participation (OD19-6 premium mobile / accessibility). Tokens only; no colour literals. */
main > .card + .card, main > .card + section, main > section + .card, main > .h-turn + h1, main > .h-turn + .card { margin-top: var(--h-space-5); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h-account { display: inline-flex; align-items: center; gap: var(--h-space-3); flex-wrap: wrap; font-size: var(--h-text-s); color: var(--h-muted); }
.h-context-switch { margin: 0; }
.h-context-switch select { min-height: var(--h-target); padding: var(--h-space-2) var(--h-space-3); width: auto; font-weight: 650; color: var(--h-brand); border-radius: var(--h-radius-pill); }
.h-support { color: var(--h-brand); font-weight: 600; }
.h-check { display: flex; align-items: flex-start; gap: var(--h-space-2); font-weight: 500; font-size: var(--h-text-m); margin: var(--h-space-3) 0; min-height: var(--h-target); }
.h-check input[type=checkbox] { width: 22px; height: 22px; flex: none; margin: 2px 0 0; }
fieldset { border: 1px solid var(--h-line); border-radius: var(--h-radius-control); padding: var(--h-space-3) var(--h-space-4); margin: var(--h-space-4) 0; }
legend { font-weight: 650; font-size: var(--h-text-s); padding: 0 var(--h-space-1); }
.h-dialog { border: 0; border-radius: var(--h-radius-sheet); background: var(--h-surface); color: var(--h-ink); padding: var(--h-space-6); width: min(92vw, 520px); box-shadow: var(--h-shadow-lift); }
.h-dialog::backdrop { background: color-mix(in srgb, var(--h-ink) 45%, transparent); }
.h-dialog .h-actions { display: flex; flex-wrap: wrap; gap: var(--h-space-2); }
.h-auth { max-width: 960px; }
.h-auth > h1 { margin-bottom: var(--h-space-5); }
.h-results { margin-top: var(--h-space-3); }
.h-choices { list-style: none; padding: 0; margin: var(--h-space-3) 0; display: grid; gap: var(--h-space-2); }
.h-choices button { width: 100%; justify-content: flex-start; text-align: left; }
.h-contacts { list-style: none; padding: 0; margin: 0; font-size: var(--h-text-l); font-variant-numeric: tabular-nums; }
.h-contacts li { padding: var(--h-space-2) 0; border-bottom: 1px solid var(--h-line); }
.h-contacts a { color: var(--h-brand); font-weight: 650; }
.h-settings details { margin: var(--h-space-3) 0; }
.h-ops .h-actions { display: flex; flex-wrap: wrap; gap: var(--h-space-2); margin: var(--h-space-3) 0 var(--h-space-5); }
.h-ops .h-actions button { width: auto; }
.h-tabs { display: flex; gap: var(--h-space-2); flex-wrap: wrap; margin: var(--h-space-4) 0 var(--h-space-5); }
.h-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--h-brand-ink); }
@media(max-width:600px){
  .h-account { width: 100%; }
  .h-context-switch select { width: 100%; }
  .h-dialog { padding: var(--h-space-5); width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--h-radius-sheet) var(--h-radius-sheet) 0 0; }
  .h-tabs button { width: auto; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .h-dialog { transition: none; } }
/* CR19: the pilot's element-level button:hover must not override component buttons (quiet/secondary keep readable contrast on hover). */
button.h-btn--quiet:hover { background: var(--h-brand-soft); border-color: transparent; color: var(--h-brand); }
button.h-btn--secondary:hover { background: var(--h-brand-soft); border-color: var(--h-control-border); color: var(--h-brand); }
button.h-btn--primary:hover { color: var(--h-brand-ink); }

/* Phase 0 one-page secure form (approved design, 22 Oct 2026): a single, narrow, mobile-first page. */
.h-sf-mode main { max-width: 560px; margin-inline: auto; }
.h-sf-head { display: flex; justify-content: space-between; align-items: center; gap: var(--h-space-3); margin-bottom: var(--h-space-3); }
.h-sf-brand { font-size: var(--h-text-s); font-weight: 650; color: var(--h-brand); }
.h-sf-brand::before { content: "🔒 "; }
.h-sf-timer { font-size: var(--h-text-xs); color: var(--h-muted); }
.h-sf-form { display: flex; flex-direction: column; gap: var(--h-space-3); }
.h-sf-card { display: flex; flex-direction: column; gap: var(--h-space-3); }
.h-sf-card h1 { font-family: var(--h-font-display); font-size: var(--h-text-xl); line-height: var(--h-leading-tight); letter-spacing: var(--h-tracking-display); margin: 0; }
.h-sf-card h2 { display: flex; justify-content: space-between; align-items: center; gap: var(--h-space-2); font-size: var(--h-text-m); margin: 0; }
.h-sf-chip { font-size: 11px; font-weight: 650; border-radius: var(--h-radius-pill); padding: 1px 8px; white-space: nowrap; }
.h-sf-chip--need { background: var(--h-turn-surface); color: var(--h-turn); }
.h-sf-chip--done { background: var(--h-positive-surface); color: var(--h-positive); }
.h-sf-rows { margin: 0; }
.h-sf-rows div { display: flex; justify-content: space-between; gap: var(--h-space-3); padding: 7px 0; border-top: 1px solid var(--h-line); font-size: var(--h-text-s); }
.h-sf-rows div:first-child { border-top: 0; }
.h-sf-rows dt { color: var(--h-muted); }
.h-sf-rows dd { margin: 0; text-align: right; }
.h-sf-opt { display: flex; gap: var(--h-space-3); align-items: flex-start; border: 1px solid var(--h-line); border-radius: var(--h-radius-control); padding: var(--h-space-3); background: var(--h-surface); font-size: var(--h-text-s); cursor: pointer; }
.h-sf-opt input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--h-brand); }
.h-sf-opt b { display: block; font-weight: 600; }
.h-sf-opt small { display: block; color: var(--h-muted); font-size: var(--h-text-xs); }
.h-sf-other[hidden], .h-sf-error[hidden] { display: none; }
.h-sf-signin { display: flex; flex-direction: column; gap: var(--h-space-2); }
.h-sf-error { background: var(--h-danger-surface); color: var(--h-danger); border-radius: var(--h-radius-control); padding: var(--h-space-2) var(--h-space-3); font-size: var(--h-text-s); }
.h-sf-warn { background: var(--h-turn-surface); color: var(--h-turn); border: 1px solid var(--h-turn-border); border-radius: var(--h-radius-control); padding: var(--h-space-2) var(--h-space-3); font-size: var(--h-text-s); }
.h-sf-wide { width: 100%; min-height: 50px; }
.h-sf-done { width: 56px; height: 56px; border-radius: 50%; background: var(--h-positive-surface); color: var(--h-positive); display: grid; place-items: center; font-size: 24px; font-weight: 700; }
.h-sf-done--info { background: var(--h-turn-surface); color: var(--h-turn); }
/* Guests (22 Oct 2026): WhatsApp start card and invitation QR codes */
.h-qr{width:180px;max-width:60vw;height:auto;display:block;margin:8px 0;background:#fff}
.h-qr-box small,.h-invite-out p{display:block;overflow-wrap:anywhere}