/* HelpThisWay design tokens — direction A "Wayfinding notice", palette revision 3 "signboard yellow" (docs/frontend/design-brief.md §3, 2026-09-26).
   Shared by all six applications. Semantic meaning never changes with theme or density. */

:root {
  /* White paper by default; the dark palette applies only when data-theme="dark" is set explicitly. */
  color-scheme: light;

  /* colour: base — white paper and one cool near-black ink (16:1); the page stays quiet */
  --htw-paper: #ffffff;
  --htw-surface: #ffffff;
  --htw-surface-sunken: #f3f3f0;
  --htw-ink: #1d2126;
  --htw-ink-muted: #525961; /* 7:1 on white, 6.4:1 on the sunken panel */
  --htw-line: #dcdcd7;
  --htw-line-strong: #7d8189; /* 3:1 on white and on the sunken panel (WCAG 1.4.11) */

  /* colour: action — primary controls are solid ink with white text; links are ink and underlined */
  --htw-action: #1d2126;
  --htw-action-strong: #3a414a;
  --htw-action-soft: #fdf0c4; /* selected / hover fill: a pale wash of the logo yellow */
  --htw-on-action: #ffffff;

  /* colour: accent — the logo's yellow, the one bold colour: the home signboard band and small
     marks. Always a fill behind ink (10.8:1); never the only edge of a control on white (1.5:1). */
  --htw-accent: #ffcd35;
  --htw-accent-soft: #fdf0c4;
  --htw-on-accent: #1d2126;
  --htw-on-accent-muted: #4a4122; /* secondary text on the yellow, 6.8:1 */

  /* colour: semantic status (always paired with a glyph and words; never used as decoration) */
  --htw-ok: #1a6b3c;
  --htw-ok-bg: #e3f2e8;
  --htw-confirm: #8a4b00;
  --htw-confirm-bg: #fdf0dc;
  --htw-stop: #a8262c;
  --htw-stop-bg: #fbe5e6;
  --htw-stale: #5c6370;
  --htw-stale-bg: #ebedf0;
  --htw-focus: #1a5fd0; /* 5.9:1 on white, 3.9:1 on the yellow band */

  /* colour: urgent — the one red surface, reserved for the door to urgent and human help */
  --htw-urgent: #b3261e;
  --htw-urgent-strong: #8f1d17;
  --htw-on-urgent: #ffffff;

  /* type */
  --htw-font: system-ui, "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  /* Display: the same device sans set heavy, like a street sign (revision 3; no download, UX-035). */
  --htw-font-display: var(--htw-font);
  --htw-font-mono: ui-monospace, "Cascadia Mono", "Consolas", "Noto Sans Mono", monospace;
  /* Reading scale (plan §19 "large text"): the default for every public page. Body 17px, the
     smallest text 15px; 1.2-ish steps above. Everything is rem, so browser text size and zoom
     scale it. The compact workspace scale below is opt-in (data-density="compact"). */
  --htw-fs-1: 0.9375rem;
  --htw-fs-2: 1.0625rem;
  --htw-fs-3: 1.25rem;
  --htw-fs-4: 1.5rem;
  --htw-fs-5: 1.75rem;
  --htw-fs-6: 2.125rem;
  --htw-fs-body: var(--htw-fs-2);
  --htw-lh-body: 1.55;
  --htw-lh-heading: 1.25;
  --htw-measure: 64ch;

  /* space (4px base) */
  --htw-s1: 0.25rem;
  --htw-s2: 0.5rem;
  --htw-s3: 0.75rem;
  --htw-s4: 1rem;
  --htw-s5: 1.5rem;
  --htw-s6: 2rem;
  --htw-s7: 2.5rem;
  --htw-s8: 3rem;

  /* shape — softened corners by rank: controls 6px, panels 10px, floating layers 12px (no pills) */
  --htw-r-control: 6px;
  --htw-r-card: 10px;
  --htw-r-floating: var(--htw-s3);
  --htw-border: 1px;
  --htw-border-strong: 2px;
  --htw-shadow-floating: 0 var(--htw-s1) var(--htw-s3) color-mix(in srgb, var(--htw-ink) 6%, transparent), 0 var(--htw-s3) var(--htw-s7) color-mix(in srgb, var(--htw-ink) 12%, transparent);
  --htw-layer-popover: 60;

  /* interaction — 44×44 CSS px targets on every public page, desktop included (plan §19 "big buttons") */
  --htw-target: 44px;
  --htw-gutter: 16px;
  --htw-motion: 120ms;
  --htw-focus-ring: 3px solid var(--htw-focus);
  --htw-focus-offset: 2px;
  --htw-link-underline: 1px;

  /* layout */
  --htw-content-max: 72rem;
  --htw-column-rail: 18rem;
  --htw-column-aside: 22rem;
  --htw-safe-top: env(safe-area-inset-top, 0px);
  --htw-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Wider gutters once there is room (tablet and up); phones keep 16px. */
@media (min-width: 48em) {
  :root {
    --htw-gutter: 24px;
  }
}

/* Compact density: the provider and admin desktop workspaces only (dense tables and diffs).
   Spec §5 lets density differ; 44px stays the product target for primary actions, 40px still
   exceeds WCAG 2.2 target size (minimum) 24px. Public pages never use it. */
:root[data-density="compact"] {
  --htw-target: 40px;
  --htw-gutter: 24px;
  --htw-fs-1: 0.875rem;
  --htw-fs-2: 1rem;
  --htw-fs-3: 1.2rem;
  --htw-fs-4: 1.44rem;
  --htw-fs-5: 1.728rem;
  --htw-fs-6: 2.074rem;
}


:root[data-theme="dark"] {
  color-scheme: dark;
  --htw-urgent: #c62828;
  --htw-urgent-strong: #9f1f1a;
  --htw-on-urgent: #ffffff;
  --htw-paper: #141619;
  --htw-surface: #1b1e22;
  --htw-surface-sunken: #23272c;
  --htw-ink: #ecebe7;
  --htw-ink-muted: #a8aeb6;
  --htw-line: #343940;
  --htw-line-strong: #6e757e;
  --htw-action: #ffcd35;
  --htw-action-strong: #ffd766;
  --htw-action-soft: #332c14;
  --htw-on-action: #141619;
  --htw-accent: #2e2914;
  --htw-accent-soft: #332c14;
  --htw-on-accent: #ecebe7;
  --htw-on-accent-muted: #c9bf9a;
  --htw-ok: #7fd39a;
  --htw-ok-bg: #143324;
  --htw-confirm: #ffc772;
  --htw-confirm-bg: #3a2a08;
  --htw-stop: #ff9a9a;
  --htw-stop-bg: #451618;
  --htw-stale: #aeb6c4;
  --htw-stale-bg: #262c37;
  --htw-focus: #7fb0ff;
}

/* Higher contrast when the system asks for it (plan §19): darker secondary text, rules that
   read as lines rather than tints, thicker link underlines. Meaning and layout do not change. */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) {
    --htw-ink: #0e1114;
    --htw-ink-muted: #2f353c;
    --htw-line: #6b7078;
    --htw-line-strong: #3b4047;
    --htw-action: #0e1114;
    --htw-action-strong: #2f353c;
    --htw-action-soft: #f7e3a0;
    --htw-on-accent-muted: #2e2810;
    --htw-ok: #0f4d29;
    --htw-confirm: #663700;
    --htw-stop: #8a1a20;
    --htw-stale: #3a414c;
    --htw-focus: #0b3f9e;
    --htw-urgent: #9c1f18;
    --htw-urgent-strong: #7a1712;
  }

  :root[data-theme="dark"] {
    --htw-ink: #ffffff;
    --htw-ink-muted: #d9dde2;
    --htw-line: #8a9099;
    --htw-line-strong: #b9bfc7;
    --htw-action: #ffd766;
    --htw-action-strong: #ffe59a;
    --htw-ok: #a6e6bb;
    --htw-confirm: #ffd89e;
    --htw-stop: #ffc0c0;
    --htw-stale: #d0d6e0;
    --htw-focus: #a8c8ff;
  }

  :root {
    --htw-border: 2px;
    --htw-link-underline: 2px;
  }
}

/* Windows High Contrast / forced colours: the browser substitutes system colours, so every state
   that was carried by a background or a tint gets a border, outline or system highlight instead.
   Borders declared "transparent" in components become visible here by design. */
@media (forced-colors: active) {
  :root {
    --htw-focus-ring: 3px solid Highlight;
  }

  :focus-visible {
    outline-color: Highlight;
  }

  /* Selected / current / pressed must not depend on a background tint. */
  [aria-pressed="true"],
  [aria-current]:not([aria-current="false"]),
  [aria-selected="true"] {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }

  :disabled,
  [aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --htw-motion: 0ms;
  }

  /* Safety net for any animation a component forgets to gate (plan §19 "minimal animation"). */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Low-data mode (html[data-low-data]; set from the Save-Data header or the "Low data" choice).
   Components must not render non-essential media in this mode; this rule is only the backstop. */
:root[data-low-data] img:not([data-essential]),
:root[data-low-data] picture:not([data-essential]),
:root[data-low-data] video,
:root[data-low-data] iframe {
  display: none !important;
}

/* Base: only element defaults, no layout. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--htw-font);
  font-size: 100%;
  line-height: var(--htw-lh-body);
  background: var(--htw-paper);
  color: var(--htw-ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-size: var(--htw-fs-body);
  background: var(--htw-paper);
  color: var(--htw-ink);
  overflow-wrap: anywhere;
}

/* Older browsers without dynamic viewport units (the build drops plain duplicate fallbacks). */
@supports not (min-height: 100dvh) {
  body {
    min-height: 100vh;
  }
}

h1,
h2,
h3,
h4 {
  line-height: var(--htw-lh-heading);
  margin: 0 0 var(--htw-s3);
  font-weight: 700;
  max-width: var(--htw-measure);
}

/* Headings are the device sans set heavy and a little tight (revision 3), like signage. */
h1,
h2,
h3 {
  font-family: var(--htw-font-display);
  letter-spacing: 0;
  line-height: 1.15;
}

h1 {
  font-size: var(--htw-fs-6);
  font-weight: 800;
}

h2 {
  font-size: var(--htw-fs-4);
}

h3 {
  font-size: var(--htw-fs-3);
}

h4 {
  font-size: var(--htw-fs-2);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--htw-s4);
  max-width: var(--htw-measure);
}

a {
  color: var(--htw-action);
  text-underline-offset: 0.18em;
  text-decoration-thickness: var(--htw-link-underline);
}

a:hover {
  color: var(--htw-action-strong);
}

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

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

/* Focus ring. The :focus rule is the fallback for browsers without :focus-visible (older phones);
   those browsers drop the whole :not(:focus-visible) rule and keep the ring on every focus. */
:focus {
  outline: var(--htw-focus-ring);
  outline-offset: var(--htw-focus-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: var(--htw-focus-ring);
  outline-offset: var(--htw-focus-offset);
}

[hidden] {
  display: none !important;
}

bdi {
  unicode-bidi: isolate;
}

time,
.htw-tabular {
  font-variant-numeric: tabular-nums;
}

@media print {
  :root {
    --htw-paper: #ffffff;
    --htw-surface: #ffffff;
    --htw-ink: #000000;
  }

  nav,
  header,
  footer,
  button,
  form,
  .htw-no-print {
    display: none !important;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

/* Server-rendered HelpThisWay pages: shared frame, forms and states.
   Mirrors the frontend primitives (Button, Field, Notice, Disclosure, masthead) so pages rendered by
   the backend read as the same site as the six Next.js applications (docs/frontend/design-brief.md §3).
   Tokens are prepended from web_tokens.css. Element rules use :where() so a page's own stylesheet
   can override them without specificity contests; rules that must beat the token base's element
   defaults (link and button colours) use plain class or element selectors. */

/* ---- frame --------------------------------------------------------------------------------- */

.htw-skip {
  position: absolute;
  inset-inline-start: var(--htw-gutter);
  top: -100px;
  z-index: 100;
  padding: var(--htw-s2) var(--htw-s3);
  background: var(--htw-action);
  color: var(--htw-on-action);
  border-radius: var(--htw-r-control);
}

.htw-skip:focus {
  top: var(--htw-s2);
}

:where(.htw-masthead) {
  border-bottom: 3px solid var(--htw-ink);
  background: var(--htw-surface);
  padding-top: var(--htw-safe-top);
}

:where(.htw-masthead-bar) {
  max-width: var(--htw-content-max);
  margin: 0 auto;
  padding: var(--htw-s2) var(--htw-gutter);
  min-height: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--htw-s3) var(--htw-s5);
}

.htw-brand {
  margin: 0;
  min-height: var(--htw-target);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 0 var(--htw-s2);
  font-family: var(--htw-font-display);
  font-size: var(--htw-fs-4);
  font-weight: 700;
  color: var(--htw-ink);
  text-decoration: none;
}

a.htw-brand:hover {
  color: var(--htw-ink);
}

/* The logo (symbol + wordmark) at the frontend mastheads' height: capitals match the serif name. */
.htw-brand-logo {
  display: block;
  flex: none;
  width: auto;
  height: 2.5rem;
}

.htw-brand-sub {
  font-family: var(--htw-font);
  font-size: var(--htw-fs-2);
  font-weight: 500;
  color: var(--htw-ink-muted);
}

:where(.htw-masthead-tools) {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--htw-s4);
}

:where(main) {
  display: block;
  width: 100%;
  max-width: var(--htw-content-max);
  margin: 0 auto;
  padding: var(--htw-s5) var(--htw-gutter) var(--htw-s8);
}

:where(main):focus {
  outline: none;
}

:where(.htw-page-footer) {
  max-width: var(--htw-content-max);
  margin: 0 auto;
  padding: var(--htw-s4) var(--htw-gutter) calc(var(--htw-s5) + var(--htw-safe-bottom));
}

:where(.htw-page-footer) > :where(p) {
  margin: 0;
  padding-top: var(--htw-s3);
  border-top: var(--htw-border) solid var(--htw-line);
  font-size: var(--htw-fs-1);
  color: var(--htw-ink-muted);
}

/* Lead sentence under a page title: ink serif, not grey (design brief, type revision). */
:where(.htw-lead) {
  font-family: var(--htw-font-display);
  font-size: var(--htw-fs-3);
  color: var(--htw-ink);
}

:where(.htw-hint) {
  margin: 0;
  font-size: var(--htw-fs-1);
  color: var(--htw-ink-muted);
}

/* Groups are ruled headings, not boxes. */
:where(main > section, main > article) {
  margin-block: var(--htw-s6) 0;
  padding-top: var(--htw-s3);
  border-top: var(--htw-border-strong) solid var(--htw-ink);
}

:where(main section section, main article section) {
  margin-block: var(--htw-s4) 0;
  padding-top: var(--htw-s2);
  border-top: var(--htw-border) solid var(--htw-line);
}

:where(nav) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--htw-s2) var(--htw-s5);
  margin-block: var(--htw-s3) var(--htw-s5);
}

:where(nav a) {
  min-height: var(--htw-target);
  display: inline-flex;
  align-items: center;
}

/* ---- form controls (frontend Field) ---------------------------------------------------------- */

:where(label) {
  display: block;
  margin-block: var(--htw-s4) var(--htw-s1);
  font-weight: 600;
}

:where(label:has(> input[type="checkbox"], > input[type="radio"])) {
  display: flex;
  align-items: flex-start;
  gap: var(--htw-s2);
  min-height: var(--htw-target);
  font-weight: 400;
}

:where(input[type="checkbox"], input[type="radio"]) {
  width: 1.25rem;
  height: 1.25rem;
  margin: calc((var(--htw-target) - 1.25rem) / 2) 0;
  flex: none;
  accent-color: var(--htw-action);
}

:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
  display: block;
  width: 100%;
  max-width: 36rem;
  min-height: var(--htw-target);
  padding: var(--htw-s2) var(--htw-s3);
  border: var(--htw-border-strong) solid var(--htw-line-strong);
  border-radius: var(--htw-r-control);
  background: var(--htw-surface);
  color: var(--htw-ink);
  font-size: max(16px, 1rem);
}

:where(textarea) {
  max-width: var(--htw-measure);
  min-height: 7rem;
  resize: vertical;
}

:where(input, select, textarea):focus-visible {
  border-color: var(--htw-action);
}

:where(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]) {
  border-color: var(--htw-stop);
}

:where(fieldset) {
  min-width: 0;
  margin: 0 0 var(--htw-s4);
  padding: 0;
  border: 0;
}

:where(legend) {
  display: block;
  width: 100%;
  padding: var(--htw-s2) 0 0;
  margin: 0 0 var(--htw-s3);
  border-top: var(--htw-border-strong) solid var(--htw-ink);
  font-weight: 700;
  font-size: var(--htw-fs-3);
}

/* ---- buttons (frontend Button): outlined by default, filled for a form's submit ----------------
   Plain selectors on purpose: the token base sets `color: inherit` on buttons and an action colour
   on links, so zero-specificity rules would lose and leave dark text on the filled button. */

button,
.htw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--htw-s2);
  min-height: var(--htw-target);
  min-width: var(--htw-target);
  margin-block: var(--htw-s3) 0;
  margin-inline: 0 var(--htw-s2);
  padding: var(--htw-s2) var(--htw-s4);
  border: var(--htw-border-strong) solid var(--htw-action);
  border-radius: var(--htw-r-control);
  background: var(--htw-surface);
  color: var(--htw-action);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--htw-motion) ease, border-color var(--htw-motion) ease;
}

button:hover,
.htw-button:hover {
  background: var(--htw-action-soft);
  color: var(--htw-action);
}

form button:not([type="button"], [type="reset"]),
.htw-button-primary {
  background: var(--htw-action);
  color: var(--htw-on-action);
}

form button:not([type="button"], [type="reset"]):hover,
.htw-button-primary:hover {
  background: var(--htw-action-strong);
  border-color: var(--htw-action-strong);
  color: var(--htw-on-action);
}

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

/* ---- states (frontend Notice) ---------------------------------------------------------------- */

:where(.htw-notice) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--htw-s3);
  max-width: var(--htw-measure);
  margin-block: var(--htw-s4);
  padding: var(--htw-s3) var(--htw-s4);
  border-inline-start: 4px solid var(--htw-action);
  border-radius: var(--htw-r-control);
  background: var(--htw-surface-sunken);
  color: var(--htw-ink);
}

:where(.htw-notice) > :where(p) {
  margin: 0;
}

:where(.htw-notice-glyph) {
  font-size: 0.9em;
  line-height: var(--htw-lh-body);
  color: var(--htw-ink-muted);
}

:where(.htw-notice--stop) {
  background: var(--htw-stop-bg);
  border-inline-start-color: var(--htw-stop);
}

:where(.htw-notice--stop .htw-notice-glyph) {
  color: var(--htw-stop);
}

:where(.htw-notice--confirm) {
  background: var(--htw-confirm-bg);
  border-inline-start-color: var(--htw-confirm);
}

:where(.htw-notice--confirm .htw-notice-glyph) {
  color: var(--htw-confirm);
}

:where(.htw-notice--ok) {
  background: var(--htw-ok-bg);
  border-inline-start-color: var(--htw-ok);
}

:where(.htw-notice--ok .htw-notice-glyph) {
  color: var(--htw-ok);
}

/* ---- disclosure (frontend Disclosure) -------------------------------------------------------- */

:where(details) {
  margin-block: var(--htw-s4);
  border: var(--htw-border) solid var(--htw-line);
  border-radius: var(--htw-r-control);
  background: var(--htw-surface);
}

:where(details) > :where(:not(summary)) {
  margin-inline: var(--htw-s4);
}

:where(summary) {
  display: flex;
  align-items: center;
  gap: var(--htw-s2);
  min-height: var(--htw-target);
  padding: var(--htw-s2) var(--htw-s4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

:where(summary)::-webkit-details-marker {
  display: none;
}

:where(summary)::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: var(--htw-action);
}

:where(details[open] > summary)::before {
  content: "−";
}

/* ---- text details ---------------------------------------------------------------------------- */

:where(li) + :where(li) {
  margin-top: var(--htw-s2);
}

:where(code) {
  font-family: var(--htw-font-mono);
  font-size: 0.95em;
}

:where(pre, output) {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

:where(pre) {
  max-width: var(--htw-measure);
  padding: var(--htw-s3) var(--htw-s4);
  background: var(--htw-surface-sunken);
  font-family: var(--htw-font-mono);
  font-size: var(--htw-fs-1);
}

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

@media (max-width: 767px) {
  .htw-brand {
    font-size: var(--htw-fs-3);
  }

  .htw-brand-logo {
    height: 2rem;
  }

  :where(main) {
    padding-top: var(--htw-s4);
  }
}

/* Feedback and legacy provider forms (/feedback, /feedback/privacy, /provider/offerings/{id}/edit).
   Tokens and shared page rules are prepended by backend.platform.web_style. */

main > form {
  max-width: 40rem;
}

/* The line after the website form (how to report a wrong service record). */
main > form + .htw-hint {
  margin-top: var(--htw-s4);
}

/* Plan §15 quick choices: large, full-width one-tap answers (well above the 44px target). */
.choices {
  display: grid;
  gap: var(--htw-s2);
}

.choices > label.choice {
  display: flex;
  align-items: center;
  gap: var(--htw-s3);
  min-height: calc(var(--htw-target) + var(--htw-s3));
  margin: 0;
  padding: var(--htw-s2) var(--htw-s4);
  border: var(--htw-border-strong) solid var(--htw-line-strong);
  border-radius: var(--htw-r-control);
  background: var(--htw-surface);
  font-size: var(--htw-fs-3);
  font-weight: 600;
  cursor: pointer;
}

.choices > label.choice:has(input:checked) {
  border-color: var(--htw-action);
  background: var(--htw-action-soft);
}

.choices > label.choice:has(input:focus-visible) {
  outline: var(--htw-focus-ring);
  outline-offset: var(--htw-focus-offset);
}

.choices > label.choice > input {
  margin: 0;
}

.form-notice {
  max-width: var(--htw-measure);
  padding: var(--htw-s2) var(--htw-s3);
  border-inline-start: 4px solid var(--htw-confirm);
  background: var(--htw-confirm-bg);
}

.form-error {
  max-width: var(--htw-measure);
  padding: var(--htw-s2) var(--htw-s3);
  border-inline-start: 4px solid var(--htw-stop);
  background: var(--htw-stop-bg);
  font-weight: 600;
}

#status:empty,
output:empty {
  display: none;
}

#status {
  margin-top: var(--htw-s4);
}

output {
  margin-top: var(--htw-s4);
  padding: var(--htw-s3) var(--htw-s4);
  border-inline-start: 4px solid var(--htw-ok);
  background: var(--htw-ok-bg);
  max-width: var(--htw-measure);
}