/* ==========================================================================
   LHBooking widget styles (pairs with booking.js). Everything is scoped to .lhb.

   THEMING
   The widget is themed ONLY through these custom properties. Defaults live on
   :where(:root) (zero specificity) and reach the card by inheritance, so they
   can be set on the card or on ANY ancestor, whatever the load order, e.g.

     .booking-wrap { --lhb-accent: #d4a24c; }        a wrapper around the mount
     #booking { --lhb-radius: 8px; }                 the section
     .lhb { --lhb-accent: #d4a24c; }                 every card on the site
     :root { --lhb-font-display: "Fraunces", serif; }

   or pass them at mount time: LHBooking.mount(el, { theme: { accent: '#d4a24c' } }).
   The nearest declaration wins: mount-time theme, then rules on .lhb itself,
   then the closest ancestor.

   --lhb-bg               card background                     #131215
   --lhb-surface          option tiles, inputs, chips         #1a191c
   --lhb-surface-2        icon wells, hover and focus fill    #232126
   --lhb-border           hairlines and resting borders       rgba(255,255,255,.085)
   --lhb-text             primary text                        #f3efe8
   --lhb-muted            helper text, labels (keep 4.5:1)    #a39e97
   --lhb-accent           progress, selection, primary button #ece3d3 (warm ivory)
   --lhb-accent-contrast  text/icons on top of the accent     #16140f
   --lhb-danger           validation and error banner         #ff8577
   --lhb-radius           card corners                        22px
   --lhb-radius-sm        tiles, inputs (buttons and chips
                          derive from it)                     14px
   --lhb-font-display     questions (serif display)           "Instrument Serif", Georgia, serif
   --lhb-font-body        everything else                     "Inter", system-ui, sans-serif
   --lhb-shadow           card elevation                      layered soft shadow
   --lhb-max-width        card width cap                      540px
   --lhb-max-height       card height cap; taller steps
                          scroll inside the card              min(720px, 100svh - 96px)

   Optional
   --lhb-accent-rgb       the accent as "r, g, b". Only used by browsers
                          without color-mix() (before Safari 16.2 / Chrome
                          111) to tint glows, borders and selected fills.
                          Set it with a custom accent, e.g. "224, 173, 85";
                          without it those browsers use ivory tints.   236, 227, 211

   The widget does not load fonts. The host page loads them (e.g. Google Fonts
   "Instrument Serif" and "Inter"); otherwise the fallbacks are used.
   ========================================================================== */

:where(:root) {
  --lhb-bg: #131215;
  --lhb-surface: #1a191c;
  --lhb-surface-2: #232126;
  --lhb-border: rgba(255, 255, 255, 0.085);
  --lhb-text: #f3efe8;
  --lhb-muted: #a39e97;
  --lhb-accent: #ece3d3;
  --lhb-accent-contrast: #16140f;
  --lhb-danger: #ff8577;
  --lhb-radius: 22px;
  --lhb-radius-sm: 14px;
  --lhb-font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --lhb-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lhb-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 18px 36px -18px rgba(0, 0, 0, 0.55);
  --lhb-max-width: 540px;
  --lhb-max-height: min(720px, calc(100vh - 96px));
}
@supports (height: 100svh) {
  :where(:root) { --lhb-max-height: min(720px, calc(100svh - 96px)); }
}

/* Private, derived tokens (not part of the theming API). */
.lhb {
  --_ease: cubic-bezier(0.16, 1, 0.3, 1);
  --_spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --_btn-radius: calc(var(--lhb-radius-sm) * 2);
  --_accent-06: color-mix(in srgb, var(--lhb-accent) 6%, transparent);
  --_accent-10: color-mix(in srgb, var(--lhb-accent) 10%, transparent);
  --_accent-16: color-mix(in srgb, var(--lhb-accent) 16%, transparent);
  --_accent-35: color-mix(in srgb, var(--lhb-accent) 35%, transparent);
  --_accent-55: color-mix(in srgb, var(--lhb-accent) 55%, transparent);
  --_tile-on: color-mix(in srgb, var(--lhb-accent) 7%, var(--lhb-surface));
  --_hair: color-mix(in srgb, var(--lhb-text) 10%, transparent);
  --_danger-12: color-mix(in srgb, var(--lhb-danger) 12%, transparent);
  --_danger-40: color-mix(in srgb, var(--lhb-danger) 40%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .lhb {
    --_accent-06: rgba(var(--lhb-accent-rgb, 236, 227, 211), 0.06);
    --_accent-10: rgba(var(--lhb-accent-rgb, 236, 227, 211), 0.1);
    --_accent-16: rgba(var(--lhb-accent-rgb, 236, 227, 211), 0.16);
    --_accent-35: rgba(var(--lhb-accent-rgb, 236, 227, 211), 0.35);
    --_accent-55: rgba(var(--lhb-accent-rgb, 236, 227, 211), 0.55);
    --_tile-on: var(--lhb-surface-2);
    --_hair: rgba(255, 255, 255, 0.1);
    --_danger-12: rgba(255, 133, 119, 0.12);
    --_danger-40: rgba(255, 133, 119, 0.4);
  }
}

/* ----------------------------------------------------------------- reset */
/* Host rules such as `label { text-transform: uppercase }`, `h3 { letter-spacing }` or
   `section span { font-size: 22px }` must not reach inside the card. This reset is (0,1,1);
   the component rules below are (0,2,0) or more, so they still win. */
.lhb, .lhb *, .lhb *::before, .lhb *::after { box-sizing: border-box; }
.lhb [hidden] { display: none !important; }
.lhb :is(h1, h2, h3, h4, h5, h6, p, label, legend, span, dl, dt, dd, em, b, strong, a) {
  text-transform: inherit; letter-spacing: inherit; font-size: inherit; font-family: inherit;
  font-weight: inherit; line-height: inherit; color: inherit; text-shadow: inherit;
}
.lhb :is(h1, h2, h3, h4, h5, h6, p, dl, dt, dd, fieldset, legend, figure) { margin: 0; padding: 0; }
.lhb :is(em) { font-style: italic; }
.lhb :is(b, strong) { font-weight: 600; }
.lhb :is(button, input, textarea) { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; margin: 0; }
.lhb button { background: none; border: 0; padding: 0; cursor: pointer; text-transform: none; min-width: 0; }
.lhb svg { display: block; flex: none; overflow: visible; }
.lhb a { color: inherit; }
.lhb label { display: block; margin: 0; font-weight: inherit; }

/* ------------------------------------------------------------------ card */
.lhb {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: var(--lhb-max-width);
  margin-inline: auto;
  overflow: hidden;
  color: var(--lhb-text);
  font-family: var(--lhb-font-body);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  white-space: normal;
  background-color: var(--lhb-bg);
  background-image: radial-gradient(130% 70% at 50% -12%, var(--_accent-06), transparent 62%);
  border: 1px solid var(--lhb-border);
  border-radius: var(--lhb-radius);
  box-shadow: var(--lhb-shadow);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
/* faint film grain */
.lhb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lhb .lhb-in {
  container: lhb / inline-size;
  display: flex;
  flex-direction: column;
  max-height: var(--lhb-max-height);
  margin: 0;
}

/* ---------------------------------------------------------------- header */
.lhb .lhb-head { position: relative; z-index: 2; flex: none; padding: 20px 28px 0; }
.lhb .lhb-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--lhb-border); opacity: 0; transition: opacity 0.25s;
}
.lhb.is-scrolled .lhb-head::after { opacity: 1; }
.lhb .lhb-head__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; }
.lhb .lhb-overline {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lhb-muted);
}
.lhb .lhb-dot {
  position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--lhb-accent);
}
.lhb .lhb-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lhb-accent);
  opacity: 0; animation: lhb-ping 3.2s var(--_ease) infinite;
}
.lhb .lhb-count {
  font-size: 12.5px; color: var(--lhb-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lhb .lhb-count b { display: inline-block; color: var(--lhb-text); font-weight: 600; }
.lhb .lhb-progress {
  position: relative; margin-top: 14px; height: 3px; border-radius: 3px; overflow: hidden; background: var(--_hair);
}
.lhb .lhb-progress__fill {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--_accent-55), var(--lhb-accent));
  transition: transform 0.7s var(--_ease);
}

/* ------------------------------------------------------------ body/stage */
/* Scroll chaining stays on: a thumb swipe that starts on the card must still scroll the page
   once the card has nothing left to scroll (or never had anything to scroll). Containment is
   only used with a mouse or trackpad, and only when the card really scrolls. */
.lhb .lhb-body {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--_hair) transparent;
}
@media (hover: hover) and (pointer: fine) {
  .lhb.is-scrollable .lhb-body { overscroll-behavior-y: contain; }
}
.lhb .lhb-body::-webkit-scrollbar { width: 8px; }
.lhb .lhb-body::-webkit-scrollbar-thumb { background: var(--_hair); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.lhb .lhb-stage { position: relative; overflow: hidden; transition: height 0.46s var(--_ease); }
.lhb.lhb-instant .lhb-stage, .lhb .lhb-stage.is-snap { transition: none; }
.lhb .lhb-step { padding: 24px 28px 18px; }
.lhb .lhb-step.is-leaving { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }

/* -------------------------------------------------------------- question */
.lhb .lhb-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.lhb .lhb-legend { float: left; width: 100%; padding: 0; margin: 0; }
.lhb .lhb-legend + * { clear: both; }
/* Clearance swallows the help text's margin under a floated legend, so the gap lives on the
   legend instead: 9px on every step, floated legend or not. */
.lhb .lhb-fs:not(.lhb-fs--chips) > .lhb-legend { padding-bottom: 9px; }
.lhb .lhb-fs > .lhb-help { margin-top: 0; }
.lhb .lhb-q {
  font-family: var(--lhb-font-display);
  font-weight: 400;
  font-size: clamp(26px, 4.4cqi + 9px, 34px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--lhb-text);
  text-wrap: balance;
  outline: none;
}
.lhb .lhb-q em {
  font-style: italic;
  color: color-mix(in srgb, var(--lhb-accent) 80%, var(--lhb-text));
}
.lhb .lhb-help { margin-top: 9px; font-size: 14.5px; line-height: 1.5; color: var(--lhb-muted); text-wrap: pretty; }
.lhb .lhb-sublabel {
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lhb-muted);
  margin-bottom: 10px;
}

/* ----------------------------------------------------------- option tiles */
.lhb .lhb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin-top: 22px; }
.lhb .lhb-grid > .lhb-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Equal rows (above) keep 2x2 grids even. With three tiles there is one paired row, which is
   even anyway, and the full-width tile shouldn't be stretched to match it. */
.lhb .lhb-grid:has(> .lhb-tile:nth-child(3):last-child) { grid-auto-rows: auto; }
.lhb .lhb-tile { position: relative; min-width: 0; cursor: pointer; }
.lhb .lhb-radio {
  position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none; appearance: none; -webkit-appearance: none;
}
.lhb .lhb-tile__face {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  height: 100%;
  padding: 16px 16px 17px;
  border-radius: var(--lhb-radius-sm);
  background: var(--lhb-surface);
  border: 1px solid var(--lhb-border);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.03) inset;
  transition: transform 0.28s var(--_ease), border-color 0.2s, background-color 0.2s, box-shadow 0.28s var(--_ease);
  user-select: none; -webkit-user-select: none;
}
.lhb .lhb-tile__icon {
  flex: none;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: calc(var(--lhb-radius-sm) - 3px);
  color: var(--lhb-text); background: var(--lhb-surface-2); border: 1px solid var(--lhb-border);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.lhb .lhb-tile__icon .lhb-ico { width: 24px; height: 24px; }
.lhb .lhb-grid[data-group="placement"] .lhb-tile__icon .lhb-ico { width: 32px; height: 32px; }
.lhb .lhb-grid[data-group="size"] .lhb-tile__icon .lhb-ico { width: 28px; height: 28px; }
.lhb .lhb-tile__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 4px; }
.lhb .lhb-tile__label { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--lhb-text); text-wrap: balance; }
.lhb .lhb-tile__sub { font-size: 13px; line-height: 1.4; color: var(--lhb-muted); text-wrap: pretty; }
.lhb .lhb-tile__key {
  position: absolute; top: 12px; right: 12px;
  display: none; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; border: 1px solid var(--lhb-border); background: color-mix(in srgb, var(--lhb-bg) 60%, transparent);
  font-size: 12px; font-weight: 500; line-height: 1; color: var(--lhb-muted); font-variant-numeric: tabular-nums;
  transition: opacity 0.2s, transform 0.25s var(--_ease);
}
.lhb .lhb-tile__check {
  position: absolute; top: 11px; right: 11px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  color: var(--lhb-accent-contrast); background: var(--lhb-accent);
  box-shadow: 0 4px 14px -4px var(--_accent-55);
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.18s, transform 0.4s var(--_spring);
}
.lhb .lhb-tile__check .lhb-ico { width: 14px; height: 14px; stroke-width: 2.4; }

@media (hover: hover) and (pointer: fine) {
  .lhb .lhb-tile__key { display: grid; }
  .lhb .lhb-tile:hover .lhb-tile__face {
    transform: translateY(-2px);
    border-color: var(--_accent-35);
    box-shadow: 0 0 0 4px var(--_accent-06), 0 16px 32px -20px rgba(0, 0, 0, 0.9), 0 1px 0 0 rgba(255, 255, 255, 0.04) inset;
  }
  .lhb .lhb-tile:hover .lhb-tile__icon { border-color: var(--_accent-35); }
}
.lhb .lhb-tile:active .lhb-tile__face { transform: translateY(0) scale(0.985); transition-duration: 0.1s; }

.lhb .lhb-radio:checked + .lhb-tile__face {
  background: var(--_tile-on);
  border-color: var(--lhb-accent);
  box-shadow: 0 0 0 1px var(--lhb-accent), 0 0 0 6px var(--_accent-10), 0 18px 36px -22px var(--_accent-55);
}
.lhb .lhb-radio:checked + .lhb-tile__face .lhb-tile__icon { color: var(--lhb-accent); background: var(--_accent-10); border-color: var(--_accent-35); }
.lhb .lhb-radio:checked + .lhb-tile__face .lhb-tile__check { opacity: 1; transform: none; }
.lhb .lhb-radio:checked + .lhb-tile__face .lhb-tile__key { opacity: 0; transform: scale(0.6); }
.lhb .lhb-radio:focus-visible + .lhb-tile__face { outline: 2px solid var(--lhb-accent); outline-offset: 3px; }

.lhb .lhb-tile.is-pulsing .lhb-tile__face::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1.5px solid var(--lhb-accent);
  animation: lhb-pulse 0.65s var(--_ease) forwards;
}

/* compact tiles: icon left, label right (placement, and every grid on narrow cards) */
.lhb .lhb-grid--compact .lhb-tile__face {
  flex-direction: row; align-items: center; gap: 14px; min-height: 68px; padding: 11px 44px 11px 11px;
}
.lhb .lhb-grid--compact .lhb-tile__key,
.lhb .lhb-grid--compact .lhb-tile__check { top: 50%; margin-top: -11px; }
.lhb .lhb-grid--compact .lhb-tile__check { margin-top: -12px; }
.lhb .lhb-grid--compact .lhb-radio:checked + .lhb-tile__face .lhb-tile__key { transform: scale(0.6); }

/* icon parts */
.lhb .lhb-ico-base { opacity: 0.5; }
.lhb .lhb-ico-ghost { opacity: 0.28; stroke-dasharray: 1.4 2; }
.lhb .lhb-ico-hl { stroke: var(--lhb-accent); stroke-width: 2.6; }
.lhb .lhb-ico-fill { fill: var(--_accent-35); stroke: var(--lhb-accent); }
.lhb .lhb-ico-soft { fill: color-mix(in srgb, currentColor 16%, transparent); }
.lhb .lhb-ico-dot { fill: var(--lhb-accent); stroke: none; }
.lhb .lhb-ico-cut { stroke: var(--lhb-accent-contrast); stroke-width: 1.2; }

/* ------------------------------------------------------------------ chips */
.lhb .lhb-fs--chips { margin-top: 22px; }
.lhb .lhb-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lhb .lhb-chip { position: relative; cursor: pointer; min-width: 0; }
.lhb .lhb-chip__face {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 12px;
  border-radius: var(--_btn-radius);
  border: 1px solid var(--lhb-border);
  background: var(--lhb-surface);
  font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--lhb-text); white-space: nowrap;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.25s var(--_ease), transform 0.2s var(--_ease);
  user-select: none; -webkit-user-select: none;
}
.lhb .lhb-chip__face .lhb-ico { width: 17px; height: 17px; color: var(--lhb-muted); transition: color 0.2s; }
@media (hover: hover) and (pointer: fine) {
  .lhb .lhb-chip:hover .lhb-chip__face { border-color: var(--_accent-35); }
}
.lhb .lhb-chip:active .lhb-chip__face { transform: scale(0.97); }
.lhb .lhb-radio:checked + .lhb-chip__face {
  border-color: var(--lhb-accent); background: var(--_tile-on);
  box-shadow: 0 0 0 1px var(--lhb-accent), 0 0 0 5px var(--_accent-06);
}
.lhb .lhb-radio:checked + .lhb-chip__face .lhb-ico { color: var(--lhb-accent); }
.lhb .lhb-radio:focus-visible + .lhb-chip__face { outline: 2px solid var(--lhb-accent); outline-offset: 3px; }

/* ----------------------------------------------------------------- fields */
.lhb .lhb-field { position: relative; }
.lhb .lhb-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; }
.lhb .lhb-input,
.lhb .lhb-textarea {
  display: block; width: 100%; margin: 0;
  border-radius: var(--lhb-radius-sm);
  border: 1px solid var(--lhb-border);
  background: var(--lhb-surface);
  color: var(--lhb-text);
  font-size: 16px; line-height: 1.5;
  outline: none; box-shadow: none;
  appearance: none; -webkit-appearance: none;
  transition: border-color 0.2s, box-shadow 0.25s var(--_ease), background-color 0.2s;
}
.lhb .lhb-input { height: 58px; padding: 23px 42px 7px 16px; }
.lhb .lhb-input:hover, .lhb .lhb-textarea:hover { border-color: color-mix(in srgb, var(--lhb-text) 18%, transparent); }
.lhb .lhb-input:focus,
.lhb .lhb-textarea:focus {
  border-color: var(--_accent-55);
  background: var(--lhb-surface-2);
  box-shadow: 0 0 0 4px var(--_accent-10);
}
.lhb .lhb-label {
  position: absolute; left: 17px; top: 18px; max-width: calc(100% - 60px);
  font-size: 15.5px; line-height: 1.4; color: var(--lhb-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; transform-origin: 0 0;
  transition: transform 0.22s var(--_ease), color 0.2s;
}
.lhb .lhb-input:focus + .lhb-label,
.lhb .lhb-input:not(:placeholder-shown) + .lhb-label { transform: translateY(-10px) scale(0.76); }
.lhb .lhb-input:focus + .lhb-label { color: color-mix(in srgb, var(--lhb-accent) 75%, var(--lhb-muted)); }
.lhb .lhb-input::placeholder { color: transparent; }
.lhb .lhb-input:-webkit-autofill,
.lhb .lhb-input:-webkit-autofill:hover,
.lhb .lhb-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lhb-text);
  caret-color: var(--lhb-text);
  box-shadow: 0 0 0 1000px var(--lhb-surface-2) inset;
  transition: background-color 99999s;
}
.lhb .lhb-input:-webkit-autofill + .lhb-label { transform: translateY(-10px) scale(0.76); }
.lhb .lhb-ok {
  position: absolute; right: 14px; top: 17px; width: 24px; height: 24px; display: grid; place-items: center;
  color: var(--lhb-accent); opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.35s var(--_spring);
  pointer-events: none;
}
.lhb .lhb-ok .lhb-ico { width: 16px; height: 16px; stroke-width: 2.2; }
.lhb .lhb-field.is-valid .lhb-ok { opacity: 1; transform: none; }
.lhb .lhb-field.is-invalid .lhb-input,
.lhb .lhb-field.is-invalid .lhb-textarea { border-color: var(--lhb-danger); box-shadow: 0 0 0 4px var(--_danger-12); }
.lhb .lhb-field.is-invalid .lhb-label { color: var(--lhb-danger); }

/* email typo suggestion (never blocks sending) */
.lhb .lhb-suggest {
  display: block; margin-top: 8px;
  font-size: 13px; line-height: 1.5; color: var(--lhb-muted); animation: lhb-rise 0.3s var(--_ease);
}
.lhb .lhb-suggest__btn {
  display: inline; padding: 6px 1px; margin: -6px 0; /* bigger hit area, same line box */
  font-size: inherit; line-height: inherit; font-weight: 500; color: var(--lhb-text); overflow-wrap: anywhere; text-align: left;
  text-decoration: underline; text-decoration-color: var(--_accent-55); text-underline-offset: 3px;
}
.lhb .lhb-suggest__btn:hover { text-decoration-color: var(--lhb-accent); }
.lhb .lhb-suggest__btn:focus-visible { outline: 2px solid var(--lhb-accent); outline-offset: 2px; border-radius: 4px; }

.lhb .lhb-err {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 8px;
  font-size: 13px; line-height: 1.4; color: var(--lhb-danger);
  animation: lhb-rise 0.3s var(--_ease);
}
.lhb .lhb-err .lhb-ico { width: 15px; height: 15px; margin-top: 1px; }
.lhb .lhb-fs > .lhb-err { margin-top: 12px; }

/* textarea + rotating placeholder */
.lhb .lhb-field--area { margin-top: 22px; }
.lhb .lhb-textarea {
  min-height: 132px; max-height: 300px; padding: 15px 16px 30px; resize: none; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--_hair) transparent;
}
.lhb .lhb-ph {
  position: absolute; left: 17px; right: 17px; top: 16px;
  font-size: 16px; line-height: 1.5; color: var(--lhb-muted); opacity: 0.8;
  pointer-events: none; overflow: hidden; transition: opacity 0.15s;
}
.lhb .lhb-ph__t { display: block; }
.lhb .lhb-ph.is-hidden { opacity: 0; }
/* Sits in the textarea's reserved 30px bottom padding, so it never covers what's typed. */
.lhb .lhb-area-hint {
  position: absolute; right: 9px; top: auto; bottom: 7px; display: none; align-items: center; gap: 4px;
  padding: 1px 3px 1px 6px; border-radius: 6px; background: var(--lhb-surface-2);
  font-size: 12px; line-height: 1.5; color: var(--lhb-muted); opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.lhb .lhb-field--area.is-invalid .lhb-area-hint { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .lhb .lhb-area-hint { display: flex; }
  .lhb .lhb-field--area:focus-within .lhb-area-hint { opacity: 0.85; }
}
.lhb kbd {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px; border-radius: 5px; border: 1px solid var(--lhb-border); background: var(--lhb-surface-2);
  font: 500 12px/1.4 var(--lhb-font-body); color: var(--lhb-text);
}
.lhb kbd .lhb-ico { width: 11px; height: 11px; }

/* ----------------------------------------------------------- upload/drop */
.lhb .lhb-upload { margin-top: 12px; }
.lhb .lhb-drop {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px;
  padding: 12px 16px 12px 12px; text-align: left;
  border-radius: var(--lhb-radius-sm);
  border: 1px dashed color-mix(in srgb, var(--lhb-text) 22%, transparent);
  background: transparent;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.25s var(--_ease);
}
.lhb .lhb-drop__icon {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: calc(var(--lhb-radius-sm) - 4px); background: var(--lhb-surface-2); color: var(--lhb-text);
  transition: transform 0.3s var(--_spring), color 0.2s, background-color 0.2s;
}
.lhb .lhb-drop__icon .lhb-ico { width: 22px; height: 22px; }
.lhb .lhb-drop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lhb .lhb-drop__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--lhb-text); }
.lhb .lhb-drop__idle { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lhb .lhb-drop__hint { font-size: 12.5px; line-height: 1.45; color: var(--lhb-muted); }
.lhb .lhb-tag {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lhb-muted);
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--lhb-border);
}
.lhb .lhb-when-coarse { display: none; }
@media (pointer: coarse) {
  .lhb .lhb-when-fine { display: none; }
  .lhb .lhb-when-coarse { display: inline; }
}
@media (hover: hover) and (pointer: fine) {
  .lhb .lhb-drop:hover { border-color: var(--_accent-55); background: var(--_accent-06); }
  .lhb .lhb-drop:hover .lhb-drop__icon { transform: translateY(-2px); color: var(--lhb-accent); }
}
.lhb .lhb-drop__drag { display: none; }
.lhb.is-drag .lhb-drop {
  border-style: solid; border-color: var(--lhb-accent); background: var(--_accent-10);
  box-shadow: 0 0 0 5px var(--_accent-06);
}
/* (0,4,0) and later than the :hover rule, so a file dragged under the mouse keeps the icon visible */
.lhb.is-drag .lhb-drop .lhb-drop__icon { transform: scale(1.08); color: var(--lhb-accent-contrast); background: var(--lhb-accent); }
.lhb.is-drag .lhb-drop .lhb-drop__idle { display: none; }
.lhb.is-drag .lhb-drop .lhb-drop__drag { display: inline; }
.lhb .lhb-drop:focus-visible { outline: 2px solid var(--lhb-accent); outline-offset: 3px; }

.lhb .lhb-refnote {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 8px;
  font-size: 13px; line-height: 1.4; color: var(--lhb-muted); animation: lhb-rise 0.3s var(--_ease);
}
.lhb .lhb-refnote .lhb-ico { width: 15px; height: 15px; margin-top: 1px; }
.lhb .lhb-preview.is-busy .lhb-preview__size { animation: lhb-breathe 1.2s ease-in-out infinite; }

.lhb .lhb-preview {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 10px 10px 10px;
  border-radius: var(--lhb-radius-sm); border: 1px solid var(--lhb-border); background: var(--lhb-surface);
  animation: lhb-rise 0.35s var(--_ease);
}
.lhb .lhb-thumb {
  position: relative; flex: none; width: 52px; height: 52px; overflow: hidden;
  border-radius: calc(var(--lhb-radius-sm) - 5px); background: var(--lhb-surface-2); color: var(--lhb-muted);
  display: grid; place-items: center;
}
.lhb .lhb-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s;
}
.lhb .lhb-thumb.is-loaded img { opacity: 1; }
.lhb .lhb-thumb .lhb-ico { width: 22px; height: 22px; }
.lhb .lhb-thumb.is-fallback img { display: none; }
.lhb .lhb-preview__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.lhb .lhb-preview__name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lhb .lhb-preview__size { font-size: 12.5px; color: var(--lhb-muted); font-variant-numeric: tabular-nums; }
.lhb .lhb-remove {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--lhb-muted); transition: color 0.2s, background-color 0.2s;
}
.lhb .lhb-remove .lhb-ico { width: 18px; height: 18px; }
.lhb .lhb-remove:hover { color: var(--lhb-text); background: var(--lhb-surface-2); }
.lhb .lhb-remove:focus-visible { outline: 2px solid var(--lhb-accent); outline-offset: 1px; }

/* -------------------------------------------------------------- checkbox */
.lhb .lhb-field--check { margin-top: 16px; }
.lhb .lhb-check {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding-right: 8px;
  cursor: pointer; font-size: 14.5px; color: var(--lhb-text); user-select: none; -webkit-user-select: none;
}
.lhb .lhb-check__box {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: calc(var(--lhb-radius-sm) / 2);
  border: 1.5px solid color-mix(in srgb, var(--lhb-text) 32%, transparent);
  background: var(--lhb-surface);
  color: var(--lhb-accent-contrast);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.25s var(--_ease), transform 0.3s var(--_spring);
}
.lhb .lhb-check__box .lhb-ico { width: 14px; height: 14px; stroke-width: 2.6; }
.lhb .lhb-check__box .lhb-ico path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.3s var(--_ease) 0.05s; }
.lhb .lhb-check:hover .lhb-check__box { border-color: var(--_accent-55); }
.lhb .lhb-radio:checked + .lhb-check__box { background: var(--lhb-accent); border-color: var(--lhb-accent); transform: scale(1.04); }
.lhb .lhb-radio:checked + .lhb-check__box .lhb-ico path { stroke-dashoffset: 0; }
.lhb .lhb-radio:focus-visible + .lhb-check__box { outline: 2px solid var(--lhb-accent); outline-offset: 3px; }
.lhb .lhb-field--check.is-invalid .lhb-check__box { border-color: var(--lhb-danger); box-shadow: 0 0 0 4px var(--_danger-12); }
.lhb .lhb-field--check .lhb-err { margin-top: 2px; }

.lhb .lhb-fine {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--lhb-muted);
}
.lhb .lhb-fine .lhb-ico { width: 14px; height: 14px; }

/* ----------------------------------------------------------------- banner */
.lhb .lhb-banner {
  display: flex; gap: 12px; margin-top: 18px; padding: 14px 16px 15px 14px;
  border-radius: var(--lhb-radius-sm);
  border: 1px solid var(--_danger-40);
  background: linear-gradient(0deg, var(--_danger-12), var(--_danger-12)), var(--lhb-surface);
  animation: lhb-rise 0.35s var(--_ease);
}
.lhb .lhb-banner { outline: none; }
.lhb .lhb-banner:focus-visible { outline: 2px solid var(--_danger-40); outline-offset: 3px; }
.lhb .lhb-banner__icon { color: var(--lhb-danger); padding-top: 1px; }
.lhb .lhb-banner__icon .lhb-ico { width: 20px; height: 20px; }
.lhb .lhb-banner__body { min-width: 0; flex: 1 1 auto; }
.lhb .lhb-banner__title { font-size: 14.5px; font-weight: 600; color: var(--lhb-text); }
.lhb .lhb-banner__text { margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--lhb-muted); }
.lhb .lhb-banner__action { margin: 4px 0 -6px -4px; color: var(--lhb-text); text-decoration-color: var(--_accent-55); }
.lhb .lhb-banner__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 6px; padding: 4px 0;
  font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--lhb-text); text-decoration: none;
}
.lhb .lhb-banner__linktext { display: flex; flex-direction: column; min-width: 0; }
.lhb .lhb-banner__linktext > span:first-child {
  text-decoration: underline; text-decoration-color: var(--_accent-35); text-underline-offset: 4px;
}
.lhb .lhb-banner__addr { display: block; font-size: 12.5px; font-weight: 400; color: var(--lhb-muted); overflow-wrap: break-word; }
.lhb .lhb-banner__link .lhb-ico { width: 17px; height: 17px; color: var(--lhb-accent); }
.lhb .lhb-banner__link:hover .lhb-banner__linktext > span:first-child { text-decoration-color: var(--lhb-accent); }
.lhb .lhb-banner__link:focus-visible { outline: 2px solid var(--lhb-accent); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------------- footer */
.lhb .lhb-foot-wrap { position: relative; z-index: 2; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.46s var(--_ease); }
.lhb.is-done .lhb-foot-wrap { grid-template-rows: 0fr; }
.lhb .lhb-foot-clip { min-height: 0; overflow: hidden; }
.lhb .lhb-foot { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 28px 20px; min-height: 78px; }
.lhb .lhb-foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--lhb-border);
  opacity: 0; transition: opacity 0.25s;
}
.lhb .lhb-foot-wrap::before {
  content: ""; position: absolute; left: 0; right: 8px; bottom: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(to top, var(--lhb-bg), transparent); opacity: 0; transition: opacity 0.25s;
}
.lhb.has-more .lhb-foot::before, .lhb.has-more .lhb-foot-wrap::before { opacity: 1; }
.lhb.is-done .lhb-foot-wrap::before { opacity: 0; }

.lhb .lhb-note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lhb-muted); white-space: nowrap; }
.lhb .lhb-note .lhb-ico { width: 16px; height: 16px; }
.lhb .lhb-enter { display: none; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--lhb-muted); }
@media (hover: hover) and (pointer: fine) {
  .lhb[data-lhb-kind="idea"] .lhb-enter { display: inline-flex; margin-left: auto; }
  .lhb[data-lhb-kind="idea"] .lhb-next { margin-left: 0; }
}
.lhb[data-lhb-step="1"] .lhb-back { display: none; }
.lhb:not([data-lhb-step="1"]) .lhb-note { display: none; }

/* buttons */
.lhb .lhb-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--_btn-radius);
  border: 1px solid transparent;
  font-family: var(--lhb-font-body); font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.25s var(--_ease), background-color 0.2s, color 0.2s, box-shadow 0.25s var(--_ease), opacity 0.25s, visibility 0.25s;
}
.lhb .lhb-btn .lhb-ico { width: 18px; height: 18px; }
.lhb .lhb-btn:focus-visible { outline: 2px solid var(--lhb-accent); outline-offset: 3px; }
.lhb .lhb-btn--primary {
  color: var(--lhb-accent-contrast); background: var(--lhb-accent);
  box-shadow: 0 10px 28px -12px var(--_accent-55), 0 1px 0 0 rgba(255, 255, 255, 0.25) inset;
}
@media (hover: hover) and (pointer: fine) {
  .lhb .lhb-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px var(--_accent-55), 0 1px 0 0 rgba(255, 255, 255, 0.25) inset; }
  .lhb .lhb-btn--primary:hover .lhb-next__icon { transform: translateX(3px); }
}
.lhb .lhb-btn--primary:active { transform: translateY(0) scale(0.98); }
.lhb .lhb-btn--ghost { padding: 0 16px 0 12px; margin-left: -12px; color: var(--lhb-muted); }
.lhb .lhb-btn--ghost:hover { color: var(--lhb-text); background: var(--lhb-surface); }
.lhb .lhb-btn--ghost:hover .lhb-ico { transform: translateX(-2px); }
.lhb .lhb-btn--ghost .lhb-ico { transition: transform 0.25s var(--_ease); }
.lhb .lhb-btn--block { width: 100%; }
.lhb .lhb-btn:disabled, .lhb .lhb-btn[aria-disabled="true"] { cursor: default; }
.lhb .lhb-next { margin-left: auto; min-width: 136px; }
.lhb .lhb-next__icon { transition: transform 0.25s var(--_ease); }
/* Hidden Continue (nothing picked yet, or a pick is auto-advancing) is taken out of the flow so
   it doesn't squeeze the footer note. */
.lhb[data-lhb-kind="choice"]:not(.is-ready) .lhb-next,
.lhb[data-lhb-kind="choice"].is-advancing .lhb-next { position: absolute; right: 28px; opacity: 0; visibility: hidden; }
.lhb[data-lhb-kind="choice"]:not(.is-ready) .lhb-next { transform: translateX(8px); }
.lhb .lhb-spinner {
  display: none; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: lhb-spin 0.7s linear infinite;
}
.lhb.is-sending .lhb-spinner { display: block; }
.lhb.is-sending .lhb-next__icon { display: none; }
.lhb.is-sending .lhb-next { cursor: progress; }
.lhb.is-sending .lhb-back { opacity: 0.4; pointer-events: none; }

.lhb .lhb-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-size: 13.5px; color: var(--lhb-muted); text-decoration: underline; text-decoration-color: var(--lhb-border);
  text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s;
}
.lhb .lhb-link:hover { color: var(--lhb-text); text-decoration-color: currentColor; }
.lhb .lhb-link:focus-visible { outline: 2px solid var(--lhb-accent); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- success */
.lhb .lhb-step--done { padding-top: 28px; padding-bottom: 26px; }
.lhb .lhb-done { display: flex; flex-direction: column; align-items: flex-start; }
.lhb .lhb-tick { width: 52px; height: 52px; margin-bottom: 18px; overflow: visible; }
.lhb .lhb-tick__ring { fill: var(--_accent-10); stroke: var(--lhb-accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; }
.lhb .lhb-tick__mark { fill: none; stroke: var(--lhb-accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lhb .lhb-done.is-play .lhb-tick { animation: lhb-pop 0.7s var(--_spring) both; }
.lhb .lhb-done.is-play .lhb-tick__ring { animation: lhb-draw 0.75s cubic-bezier(0.65, 0, 0.35, 1) both; }
.lhb .lhb-done.is-play .lhb-tick__mark { animation: lhb-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.55s both; }
.lhb .lhb-done.is-play > :not(.lhb-tick) { animation: lhb-rise 0.6s var(--_ease) both; }
.lhb .lhb-done.is-play > :nth-child(2) { animation-delay: 0.25s; }
.lhb .lhb-done.is-play > :nth-child(3) { animation-delay: 0.33s; }
.lhb .lhb-done.is-play > :nth-child(4) { animation-delay: 0.42s; }
.lhb .lhb-done.is-play > :nth-child(5) { animation-delay: 0.5s; }
.lhb .lhb-done.is-play > :nth-child(6) { animation-delay: 0.56s; }
.lhb .lhb-done.is-play > :nth-child(7) { animation-delay: 0.62s; }
.lhb .lhb-done__msg { max-width: 46ch; font-size: 15px; color: color-mix(in srgb, var(--lhb-text) 78%, var(--lhb-muted)); }
.lhb .lhb-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: 100%; margin: 20px 0 18px;
  border-radius: var(--lhb-radius-sm); border: 1px solid var(--lhb-border); background: var(--lhb-border); overflow: hidden;
}
.lhb .lhb-summary > div { min-width: 0; padding: 10px 14px 11px; background: var(--lhb-surface); }
.lhb .lhb-summary > .is-wide { grid-column: 1 / -1; }
.lhb .lhb-summary dt {
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lhb-muted);
}
.lhb .lhb-summary dd {
  margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--lhb-text); overflow-wrap: anywhere;
}
.lhb .lhb-summary .lhb-idea {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line; color: color-mix(in srgb, var(--lhb-text) 85%, var(--lhb-muted));
}
.lhb .lhb-summary .lhb-ref {
  display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--lhb-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lhb .lhb-summary .lhb-ref .lhb-ico { width: 14px; height: 14px; }
.lhb .lhb-done__nudge { font-size: 13.5px; color: var(--lhb-muted); margin-bottom: 12px; }
.lhb .lhb-done__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; width: 100%; }
.lhb .lhb-done__actions .lhb-btn { flex: 0 0 auto; }
@container lhb (max-width: 440px) {
  .lhb .lhb-done__actions { flex-direction: column; align-items: stretch; }
  .lhb .lhb-done__actions .lhb-restart { align-self: center; }
}

/* ------------------------------------------------------------------ utils */
.lhb .lhb-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.lhb .lhb-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lhb .lhb-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------- responsive */
@container lhb (min-width: 500px) {
  .lhb .lhb-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lhb .lhb-fields > [data-field="name"] { grid-column: 1 / -1; }
  .lhb .lhb-chips--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lhb .lhb-chips--4 .lhb-chip__face { padding: 0 8px; gap: 7px; }
}
@container lhb (max-width: 440px) {
  .lhb .lhb-head { padding: 17px 20px 0; }
  .lhb .lhb-step { padding: 20px 20px 16px; }
  .lhb .lhb-foot { padding: 8px 20px 16px; min-height: 72px; }
  .lhb[data-lhb-kind="choice"]:not(.is-ready) .lhb-next,
  .lhb[data-lhb-kind="choice"].is-advancing .lhb-next { right: 20px; }
  .lhb .lhb-grid { margin-top: 20px; gap: 8px; }
  .lhb .lhb-tile__face { padding: 13px 12px 14px; gap: 12px; }
  /* compact tiles: fixed icon wells so labels line up; the check and key badge move to the
     top-right corner so short labels ("Upper arm") get the full width */
  .lhb .lhb-grid--compact .lhb-tile__face { min-height: 62px; padding: 9px 16px 9px 9px; gap: 11px; }
  .lhb .lhb-grid--compact .lhb-tile__icon { width: 38px; height: 38px; }
  .lhb .lhb-grid--compact .lhb-tile__check,
  .lhb .lhb-grid--compact .lhb-tile__key { top: 6px; right: 6px; margin-top: 0; }
  .lhb .lhb-grid--compact .lhb-tile__check { width: 20px; height: 20px; }
  .lhb .lhb-grid--compact .lhb-tile__check .lhb-ico { width: 12px; height: 12px; }
  .lhb .lhb-grid--compact .lhb-tile__key { min-width: 20px; height: 20px; padding: 0 4px; font-size: 12px; border-radius: 5px; }
  .lhb .lhb-tile__icon { width: 42px; height: 42px; }
  .lhb .lhb-tile__label { font-size: 14.5px; }
  .lhb .lhb-tile__sub { font-size: 12.5px; }
  .lhb .lhb-help { font-size: 14px; }
}
/* narrow cards (360px phones): tighter chips so "Next 1-3 months" keeps its padding */
@container lhb (max-width: 330px) {
  .lhb .lhb-chip__face { padding: 0 8px; gap: 6px; font-size: 13.5px; }
  .lhb .lhb-chips:not(.lhb-chips--4) .lhb-chip__face .lhb-ico { display: none; }
}
@container lhb (max-width: 290px) {
  .lhb .lhb-chip__face { padding: 0 6px; font-size: 13px; }
}
/* single column: under 380px viewports, or very narrow cards */
@media (max-width: 379.98px) {
  .lhb .lhb-grid { grid-template-columns: minmax(0, 1fr); }
}
@container lhb (max-width: 330px) {
  .lhb .lhb-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 379.98px) {
  .lhb .lhb-grid .lhb-tile__face { flex-direction: row; align-items: center; gap: 14px; min-height: 64px; padding: 10px 40px 10px 10px; }
  .lhb .lhb-grid .lhb-tile__check { top: 50%; margin-top: -12px; }
}
@container lhb (max-width: 330px) {
  .lhb .lhb-grid .lhb-tile__face { flex-direction: row; align-items: center; gap: 14px; min-height: 64px; padding: 10px 40px 10px 10px; }
  .lhb .lhb-grid .lhb-tile__check { top: 50%; margin-top: -12px; }
}
/* ...except placement: seven short answers stay in two columns of slim row tiles (small icon
   beside the label, check in the corner), so the whole step fits on a 360px phone. */
@media (max-width: 379.98px) {
  .lhb .lhb-grid.lhb-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__face { flex-direction: row; align-items: center; gap: 9px; min-height: 54px; padding: 8px 10px 8px 8px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__icon { width: 34px; height: 34px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__icon .lhb-ico { width: 26px; height: 26px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__label { font-size: 14px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__sub { font-size: 12px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__text { padding-right: 0; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__check,
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__key { top: 5px; right: 5px; margin-top: 0; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__check { width: 18px; height: 18px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__check .lhb-ico { width: 11px; height: 11px; }
}
@container lhb (max-width: 330px) {
  .lhb .lhb-grid.lhb-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__face { flex-direction: row; align-items: center; gap: 9px; min-height: 54px; padding: 8px 10px 8px 8px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__icon { width: 34px; height: 34px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__icon .lhb-ico { width: 26px; height: 26px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__label { font-size: 14px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__sub { font-size: 12px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__text { padding-right: 0; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__check,
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__key { top: 5px; right: 5px; margin-top: 0; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__check { width: 18px; height: 18px; }
  .lhb .lhb-grid.lhb-grid--compact .lhb-tile__check .lhb-ico { width: 11px; height: 11px; }
}

/* ------------------------------------------------------------- keyframes */
@keyframes lhb-pulse { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.07); } }
@keyframes lhb-ping { 0% { opacity: 0.45; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes lhb-spin { to { transform: rotate(360deg); } }
@keyframes lhb-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lhb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lhb-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes lhb-breathe { 50% { opacity: 0.45; } }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lhb *, .lhb *::before, .lhb *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .lhb .lhb-dot::after { display: none; }
  .lhb .lhb-spinner { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
  .lhb .lhb-tile:hover .lhb-tile__face, .lhb .lhb-btn--primary:hover { transform: none; }
}

/* ------------------------------------------------------- forced colours */
@media (forced-colors: active) {
  .lhb .lhb-radio:checked + .lhb-tile__face,
  .lhb .lhb-radio:checked + .lhb-chip__face { outline: 3px solid Highlight; }
  .lhb .lhb-progress__fill { background: Highlight; }
}