/* ADDLUX SURFACES · "Book a consultation" drawer (site v1.4; the sending is in js/book.js).
   A wide panel that slides in over the home page. It uses only the site's own tokens, type and buttons.
   The one bold place is the tap cards on step 1; everything else is ruled and quiet.
   Layout follows the panel's own width (container queries), so --book-w can be tuned between 640 and 760 px.
   Breakpoints are in rem, so enlarged text falls back to the stacked layout on its own.
   Type steps: 2rem, 1.625rem, 1.25rem, 1.0625rem, 1rem, 0.95rem. Gaps: 4, 8, 12, 16, 24, 32, 48. */

/* ---------- page behind: locked, dimmed ---------- */
html.bk-locked, html.bk-locked body { overflow: hidden; }

.bk-scrim {
  position: fixed; inset: 0; z-index: 105;   /* above the site's skip link (100) */
  background: rgba(28, 29, 31, 0.44);
  opacity: 0; transition: opacity .26s ease;
  -webkit-tap-highlight-color: transparent;
}
html.bk-open .bk-scrim { opacity: 1; }

/* ---------- the drawer ---------- */
.bk {
  --book-w: 720px;            /* the one width setting: anything from 640 to 760 holds */
  --bk-pad: 40px;
  --gap: 12px;
  position: fixed; top: 0; right: 0; z-index: 110;
  width: min(var(--book-w), 100% - 96px);
  height: 100%;                              /* fallback where dvh is not known */
  height: var(--bk-vvh, 100dvh);             /* JS sets --bk-vvh to the visible height when a phone keyboard is open */
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  container: book / inline-size;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  outline: none;
}
html.bk-open .bk { transform: none; }
/* the side-panel sketch's one copper hairline down the left edge (drawn over the edge, so the layout does not move) */
.bk::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 1px;
  background: var(--copper-line); pointer-events: none;
}
.bk.no-anim, .bk.no-anim *, html.bk-instant .bk-scrim { transition: none !important; animation: none !important; }

.bk :where(button, input, textarea) { font: inherit; }
.bk :where(h2, h3, p, dl, dd) { margin: 0; }
.bk h2, .bk h3 { overflow-wrap: break-word; }

/* ---------- head: title, close, intro, progress; the progress rule is the head's full-width bottom edge ---------- */
.bk-head { flex: none; position: relative; padding: 20px var(--bk-pad) 0; }
.bk-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.bk-title {
  font-weight: 300; font-size: 2rem; line-height: 1.1; letter-spacing: -0.025em; min-width: 0;
}
.bk-title:focus, .bk-step-title:focus { outline: none; }
.bk-title:focus-visible, .bk-step-title:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
.bk-close {
  flex: none; min-width: 44px; min-height: 44px; margin-right: -4px; padding: 8px 4px;
  background: none; border: 0; cursor: pointer; color: var(--ink); font-size: 0.95rem;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.bk-intro { margin-top: 4px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 46ch; text-wrap: balance; }
.bk-progress {
  margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 0.95rem; letter-spacing: var(--label-track);
}
.bk-now { font-weight: 500; }
.bk-next { color: var(--ink-2); text-align: right; }
.bk-rule { position: relative; margin: 12px calc(-1 * var(--bk-pad)) 0; height: 1px; background: var(--rule); }
.bk-rule span {
  /* the copper bar stays in the content column and ends flush with the rule's bottom edge */
  position: absolute; left: var(--bk-pad); top: -2px; height: 3px;
  width: calc((100% - 2 * var(--bk-pad)) * var(--bk-p, 0.3333));
  background: var(--copper-line); transition: width .3s ease;
}
.bk.is-sent .bk-progress, .bk.is-sending .bk-progress, .bk.is-failed .bk-progress { display: none; }
.bk.is-sent .bk-rule, .bk.is-sending .bk-rule, .bk.is-failed .bk-rule { margin-top: 16px; }
.bk.is-sending .bk-foot { display: none; }   /* nothing to press while the request is on its way */

/* ---------- body: the only part that scrolls ---------- */
.bk-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--bk-pad) 48px;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
/* a solid band of the panel's own colour under the head's edge: scrolled content goes under it, never flush to the bar */
.bk-body::before {
  content: ""; display: block; position: sticky; top: 0; z-index: 2; height: 12px;
  margin-inline: calc(-1 * var(--bk-pad)); background: var(--bg); pointer-events: none;
}
.bk-step.is-entering, .bk-done.is-entering { animation: bk-fade .2s ease both; }
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }

.bk-step-title {
  margin-top: 20px;
  font-weight: 300; font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance;
}
.bk-group { margin-top: 24px; }
.bk-group-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; }
.bk-q { display: block; font-weight: 500; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); }
.bk .hint { color: var(--ink-2); font-size: 0.95rem; line-height: 1.45; }
.bk .opt { color: var(--ink-2); font-weight: 400; }

/* ---------- the bold place: tap cards (consultation) and picture tiles (surfaces) ---------- */
.cards { margin-top: 12px; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.tiles { margin-top: 12px; display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tap, .pic {
  position: relative; display: flex; flex-direction: column; cursor: pointer;
  background: var(--paper); border: 1px solid var(--ink-2);
  transition: background-color .2s, color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.tap:active, .pic:active { transform: translateY(1px); }
.bk .tap input, .bk .pic input, .bk .chip input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.tap:has(input:focus-visible), .pic:has(input:focus-visible), .chip:has(input:focus-visible) {
  outline: 2px solid var(--copper); outline-offset: 3px;
}

.tap { gap: 8px; padding: 16px; }
.tap-title {
  display: block; padding-right: 40px;
  font-weight: 300; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.02em;
}
.tap-line { display: block; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; max-width: 34ch; text-wrap: pretty; transition: color .2s; }
.tap .mark { position: absolute; top: 19px; right: 20px; width: 18px; height: 18px; }
.tap .mark::after { width: 8px; height: 8px; }
.tap:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tap:has(input:checked) .tap-line { color: var(--bg-2); }

/* pick one = a diamond that fills; pick any = a square that gets a tick (both in ink, so they read as controls) */
.mark {
  flex-shrink: 0; display: grid; place-items: center;
  width: 15px; height: 15px; border: 1.5px solid currentColor; transform: rotate(45deg);
}
.mark::after { content: ""; width: 6px; height: 6px; background: currentColor; transform: scale(0); transition: transform .15s ease; }
input:checked ~ .mark::after { transform: scale(1); }
.mark--tick { width: 24px; height: 24px; transform: none; }
.mark--tick::after { display: none; }
.mark--tick svg { width: 14px; height: 14px; opacity: 0; transition: opacity .15s; }
input:checked ~ * .mark--tick { background: var(--paper); border-color: var(--paper); color: var(--ink); }
input:checked ~ * .mark--tick svg { opacity: 1; }

.pic-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-2); }
.pic-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.pic-media img.pic-desk { object-position: 90% 0%; }   /* the desk's top edge and its curved end in frame */
.pic-media--type {
  display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 16px 16px;
}
.pic-media--type::before { content: ""; width: 28px; height: 2px; background: var(--copper-line); margin-bottom: 12px; }
.pic-media--type span { font-weight: 300; font-size: 0.95rem; line-height: 1.3; letter-spacing: -0.005em; max-width: 17em; text-wrap: pretty; }
.pic-bar {
  flex: 1 0 auto;   /* a tile stretched by its neighbour stays solid to its bottom edge */
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px; padding: 8px 12px 8px 16px; border-top: 1px solid var(--ink-2);
  font-weight: 500; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.005em;
  transition: background-color .2s, color .2s;
}
.pic-bar .mark { width: 22px; height: 22px; }
.pic::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s; }
.pic:has(input:checked)::after { opacity: 1; }
.pic:has(input:checked) .pic-bar { background: var(--ink); color: var(--paper); border-top-color: var(--ink); }

/* ---------- ruled rows (step 2), in the manner of the site's contact rows ---------- */
.bk-rows { margin-top: 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.bk-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; }
.bk-row + .bk-row { border-top: 1px solid var(--rule); }
.bk-row-q .hint { margin-top: 4px; max-width: 36ch; text-wrap: pretty; }
.bk-row-a { min-width: 0; }
.bk-row-a.chips { align-content: start; align-items: stretch; }   /* chips keep their own height beside a two-line label */

/* --chip-min: the narrowest a chip may be before its words would wrap; rows with longer words set a wider one,
   so every chip stays one line and 48 px tall (they go one per line where two would not fit) */
.chips { --chip-min: 8.5rem; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--chip-min)), 1fr)); }
.chips--long { --chip-min: 11.5rem; }
.chip {
  position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0;
  min-height: 48px; padding: 8px 12px;
  background: var(--paper); border: 1px solid var(--ink-2); font-size: 1rem; line-height: 1.3;
  transition: background-color .2s, color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.chip .mark { width: 12px; height: 12px; margin-inline: 2px; }
.chip .mark::after { width: 5px; height: 5px; }
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.bk .text {
  display: block; width: 100%; min-height: 52px; padding: 12px 16px; margin: 0;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink-2); border-radius: 0;
  -webkit-appearance: none; appearance: none;
  font-size: 1.0625rem; line-height: 1.4; transition: border-color .2s;
}
.bk .text:focus { border-color: var(--ink); }
.bk .text:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.bk textarea.text { min-height: 6.5rem; resize: none; overflow: hidden; field-sizing: content; }
.bk .text[aria-invalid="true"] { border-color: var(--copper); box-shadow: inset 0 0 0 1px var(--copper); }
.field-hint { margin-top: 8px; color: var(--ink-2); font-size: 0.95rem; }
.field-hint:focus { outline: none; }

/* photos: a hairline button like the site's header button; thumbnails read in the page, never uploaded */
.add-photos {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px;
  border: 1px solid var(--ink); font-size: 0.95rem; font-weight: 500; cursor: pointer; color: var(--ink);
  transition: background-color .2s, color .2s, border-color .2s;
}
.add-photos input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.add-photos:has(input:focus-visible) { outline: 2px solid var(--copper); outline-offset: 3px; }
.add-photos:has(input:disabled) { cursor: default; background: none; color: var(--ink-2); border-color: var(--ink-2); }
.add-photos svg { width: 14px; height: 14px; }
.photo-list { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.photo-list:empty { display: none; }
.photo-list li { width: 104px; }
.photo-list img { width: 104px; height: 78px; object-fit: cover; background: var(--bg-2); }
.photo-name { display: block; margin-top: 8px; font-size: 0.85rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-list .linkish { font-size: 0.9rem; min-height: 44px; padding: 8px 0; }

/* errors: what to fix, in copper, under the field */
.bk .err { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; color: var(--copper); font-size: 0.95rem; font-weight: 500; line-height: 1.45; }
.bk .err::before { content: ""; flex-shrink: 0; width: 12px; height: 2px; background: var(--copper-line); transform: translateY(-0.3em); }
/* cards and tiles in error get the inputs' 2 px copper edge */
.bk-group.has-error .tap, .bk-group.has-error .pic { border-color: var(--copper); box-shadow: inset 0 0 0 1px var(--copper); }
.bk-group.has-error .pic-bar { border-color: var(--copper); }

/* ---------- step 3: your choices beside the fields ---------- */
.bk-s3 { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.bk-choices .sum { margin-top: 8px; }      /* the same gap as a field's label to its box */
.bk-fields .field + .field { margin-top: 24px; }
.bk-fields .bk-q { margin-bottom: 8px; }
.bk-fields .hint { margin: -4px 0 8px; }

.sum { border-top: 1px solid var(--ink); }
.sum-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px;
  padding: 8px 0 12px; border-bottom: 1px solid var(--rule);
}
.sum-row dt { grid-column: 1; grid-row: 1; font-size: 0.95rem; color: var(--ink-2); letter-spacing: var(--label-track); }
.sum-row dd { grid-column: 1; grid-row: 2; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; line-height: 1.45; }
.sum-row dd span { display: block; }
.sum-row .edit { grid-column: 2; grid-row: 1; align-self: center; margin-block: -8px; }

.linkish {
  background: none; border: 0; padding: 8px 4px; min-height: 44px; min-width: 44px; cursor: pointer; color: var(--ink);
  font-size: 0.95rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}

/* the privacy line: in the bar beside "Send request"; on phones, short screens and large text it sits at the end of step 3 */
.bk-body .bk-privacy { display: block; margin-top: 32px; max-width: 46ch; font-size: 0.95rem; }
.bk-body .bk-privacy[hidden] { display: none; }

/* spam trap: off screen, never seen or reached by a person */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- sent ---------- */
.bk-done-lead { margin-top: 24px; font-size: 1.0625rem; color: var(--ink-2); max-width: 40ch; text-wrap: balance; }
.bk-done-block { margin-top: 32px; }
.bk-done-block > .hint { margin-top: 4px; }
.sum--sent { margin-top: 12px; }
.sum--sent .sum-row { padding: 12px 0; }
.sum--sent dd.sum-note { white-space: pre-line; }   /* the note keeps the visitor's own line breaks */
.bk-done-note { margin-top: 16px; max-width: 46ch; font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
/* sending: a thin copper line that runs along the rule */
.bk-wait { position: relative; margin-top: 32px; max-width: 24rem; height: 3px; overflow: hidden; background: var(--rule); }
.bk-wait span { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--copper-line); animation: bk-wait 1.4s ease-in-out infinite; }
@keyframes bk-wait { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.bk .bk-talk { margin-top: 12px; }
.bk .bk-talk .contact-row { padding: 16px 0; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
.bk .bk-talk .row-label { grid-column: 1 / -1; }
.bk .bk-talk .row-value { font-size: 1.25rem; }

/* ---------- foot: the action bar, fixed to the panel's bottom ---------- */
.bk-foot {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding: 12px var(--bk-pad) calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule); background: var(--bg);
}
.bk-back { margin-left: -4px; text-align: left; }   /* "Back" starts on the content edge */
.bk-privacy { flex: 1 1 14rem; min-width: 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.bk .bk-go { margin-left: auto; }
.bk .cta-primary {
  border: 0; cursor: pointer; min-height: 56px; padding: 15px 32px; line-height: 1.65; text-align: center;
}
.bk .cta-primary::after { bottom: -4px; }

/* ---------- hover only where there is a real pointer (a tap must not leave it stuck on) ---------- */
@media (hover: hover) {
  .bk-close:hover, .linkish:hover { color: var(--copper); }
  .tap:hover, .pic:hover, .chip:hover { border-color: var(--ink); }
  .bk .text:hover { border-color: var(--ink); }
  .add-photos:hover { background: var(--copper); border-color: var(--copper); color: var(--paper); }
  .add-photos:has(input:disabled):hover { background: none; color: var(--ink-2); border-color: var(--ink-2); }
  .bk-group.has-error .tap:hover, .bk-group.has-error .pic:hover { border-color: var(--copper); }
}

/* ---------- wider panel (every --book-w from 640 to 760): cards across, label-left rows, two columns ---------- */
@container book (min-width: 37.5rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the diamond has its own top row, so each title has the card's full width and sits on one line */
  .tap { justify-content: flex-start; gap: 16px; min-height: 10.5rem; padding: 16px 16px 24px; }
  .tap .mark { position: static; align-self: flex-end; margin: 4px 4px 0 0; }
  /* capped by the panel's width, so the longest title stays inside its card at 100 to 106 % text */
  .tap-title { padding-right: 0; white-space: nowrap; font-size: min(1.25rem, 3.15cqi); }
  .tap-line { margin-top: -4px; }

  .pic-media { aspect-ratio: 2 / 1; }
  .pic-media img.pic-desk { object-position: 50% 0%; }
  .pic-media--type { padding: 16px; }
  .pic-media--type::before { width: 36px; margin-bottom: 12px; }
  .pic-media--type span { font-size: 1.25rem; line-height: 1.3; }
  .pic-bar { min-height: 56px; padding: 8px 16px; }

  .bk-row { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 32px; padding: 24px 0; }
  .bk-row-a.chips { --chip-min: 10rem; }   /* two across, no wrapped chips */
  .bk-row-a.chips--long { --chip-min: 11.5rem; }
  .bk-row-q { padding-top: 12px; }

  .bk-s3 { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 40px; align-items: start; }

  .sum--sent .sum-row { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 32px; }
  .sum--sent .sum-row dt, .sum--sent .sum-row dd { grid-row: 1; }
  .sum--sent .sum-row dd { grid-column: 2; }
  .bk .bk-talk .contact-row { grid-template-columns: 11rem minmax(0, 1fr) auto; column-gap: 32px; }
  .bk .bk-talk .row-label { grid-column: auto; }
  .bk-done-block { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 32px; }
  .bk-done-block > .bk-q { grid-column: 1 / -1; }
  .bk-done-block > .hint { grid-column: 1 / -1; }
  .bk-done-block > .sum, .bk-done-block > .bk-talk { grid-column: 1 / -1; }
}

/* a very narrow panel (or very large text): one tile across */
@container book (max-width: 19.99rem) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .pic-media { aspect-ratio: 2 / 1; }
}
/* a small phone (a panel under 22 rem): step 2 chips one per line, so no chip's words break */
@container book (max-width: 21.99rem) {
  .bk-row-a.chips { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- under 720 px of screen, or a short screen (a phone on its side): a full-screen sheet that rises ---------- */
@media (max-width: 719px), (max-height: 500px) {
  .bk { --bk-pad: 20px; width: 100%; transform: translateY(100%); transition-duration: .3s; }
  .bk::before { display: none; }
  .bk-head { padding-top: 8px; }
  .bk-title { font-size: min(1.625rem, 8.4cqi); }
  .bk-intro { font-size: 0.95rem; }
  .bk-progress { margin-top: 12px; }
  .bk-step-title { margin-top: 12px; font-size: 1.45rem; }
  .bk-group { margin-top: 24px; }
  .bk-body { padding-bottom: 32px; }
  .bk-foot { padding-top: 12px; gap: 8px 16px; }
}
@media (max-height: 500px) {
  .tap { min-height: 0; }
}
@media (max-width: 599px) {
  .bk-next { display: none; }
  .bk .bk-go { flex: 1 1 auto; }
}

/* ---------- reduced motion: no slide, no fade ---------- */
@media (prefers-reduced-motion: reduce) {
  .bk, .bk-scrim, .bk-rule span { transition: none !important; }
  .bk-step.is-entering, .bk-done.is-entering { animation: none !important; }
  .bk-wait span { animation: none; width: 100%; opacity: 0.6; }
}

/* ---------- short screens or large text (JS sets .bk-tight: under 36 rem of height): a compact head ---------- */
.bk.bk-tight .bk-head { padding-top: 4px; }
.bk.bk-tight .bk-intro, .bk.bk-tight .bk-next { display: none; }
.bk.bk-tight .bk-progress { margin-top: 4px; }
.bk.bk-tight .bk-rule { margin-top: 8px; }
.bk.bk-tight .bk-step-title { margin-top: 8px; }
.bk.bk-tight .bk-foot { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.bk.bk-tight .cta-primary { min-height: 48px; padding-block: 8px; }

/* ---------- a phone keyboard is open (JS sets .bk-kb): only the title row and a slim bar stay ---------- */
.bk.bk-kb .bk-head { padding-top: 0; }
.bk.bk-kb .bk-head-row { min-height: 44px; }
.bk.bk-kb .bk-title { font-size: 1.25rem; }
.bk.bk-kb .bk-intro, .bk.bk-kb .bk-progress { display: none; }
.bk.bk-kb .bk-rule { margin-top: 0; }
.bk.bk-kb .bk-body::before { height: 8px; }
/* the note fits in the little space beside the keyboard and scrolls inside itself to the line being typed */
.bk.bk-kb textarea.text {
  min-height: 52px; overflow-y: auto;
  max-height: max(52px, min(5.5rem, calc(var(--bk-vvh, 100dvh) - 106px)));   /* the visible height less the slim head and bar */
}
.bk.bk-kb .bk-step-title { margin-top: 4px; }
.bk.bk-kb .bk-foot { padding-top: 0; padding-bottom: 0; }
.bk.bk-kb .cta-primary { min-height: 44px; padding-block: 4px; }

/* ---------- forced colours (Windows contrast themes): edges and the chosen state stay visible ---------- */
@media (forced-colors: active) {
  .bk { border-left: 1px solid CanvasText; }
  .bk::before { display: none; }
  .bk .cta-primary { border: 1px solid ButtonText; }
  .bk .mark { forced-color-adjust: none; color: CanvasText; }
  .tap:has(input:checked) .mark, .chip:has(input:checked) .mark { color: HighlightText; }
  .bk-rule { forced-color-adjust: none; background: CanvasText; }
  .bk-rule span { forced-color-adjust: none; background: Highlight; }
  .tap:has(input:checked), .chip:has(input:checked), .pic:has(input:checked) .pic-bar {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
  }
  .tap:has(input:checked) .tap-line { color: HighlightText; }
  .pic:has(input:checked)::after { border-color: Highlight; }
  .bk input:checked ~ * .mark--tick { background: HighlightText; border-color: HighlightText; color: Highlight; }
  .tap:has(input:focus-visible), .pic:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 2px solid CanvasText; }
}