/* ---------------------------------------------------------------------------
   customiser.css

   This styles ONE PAGE inside handlaideggs.co.uk. It is not a site
   stylesheet and it must not behave like one.

   So there is nothing here that touches `html` or `body`, and no bare
   element or `*` selector: the reset, the type and the background are all
   scoped to `.hle-page` and `.hle-dialog`. Paste this into a template whose
   CSS you do not control and it cannot restyle the page around it.

   The stage stays light whatever the host does, because a board is judged
   against a neutral wall.
--------------------------------------------------------------------------- */

:root {
  /* Matched to the Stringer site: cream paper, espresso ink, one clay accent.
     The values are lifted from its site.css so the two read as one product —
     change them there and here together.

     THE STAGE IS THE EXCEPTION. It stays a neutral grey, because a customer
     is judging a resin tint against it and a warm ground would bias every
     colour they pick. It is warmed just enough not to read as blue next to
     the cream, and no further. */
  --hle-paper:   #fcfbf9;   /* st-canvas, lightened: near-white reads modern */
  --hle-surface: #fffdfa;   /* st-white  */
  --hle-stage:   #f4f3f2;   /* neutral ground — deliberately NOT cream */
  --hle-ink:     #221e1a;   /* st-ink    */
  --hle-ink-2:   #5a5249;   /* st-ink-2  */
  --hle-muted:   #8a8278;   /* between st-ink-3 and the paper */
  --hle-line:    rgba(34, 30, 26, 0.09);
  --hle-line-2:  rgba(34, 30, 26, 0.055);
  --hle-accent:  #b5573a;   /* st-accent — fills */
  /* the fill clay only reaches 4.4:1 as small text; this is the same hue a
     shade deeper, the way the site solves it */
  --hle-accent-ink: #a84c30;
  --hle-accent-2:#8f3f27;   /* st-accent-2, hover/pressed */
  --hle-tintbg:  rgba(181, 87, 58, 0.08);
  --hle-radius:  18px;      /* st-r */
  --hle-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Open Sans at its semi-condensed width. The face is loaded from Google
     Fonts in index.html with the width axis pinned to 87.5, and .hle-page
     sets font-stretch to match, so this is the instance that renders — not
     the regular width. The stack after it only covers the moment before the
     font arrives. */
  --hle-font:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hle-page, .hle-page *, .hle-page *::before, .hle-page *::after,
.hle-dialog, .hle-dialog *, .hle-dialog *::before, .hle-dialog *::after {
  box-sizing: border-box;
}

.hle-page, .hle-dialog {
  color: var(--hle-ink);
  font-family: var(--hle-font);
  font-stretch: 87.5%;   /* semi-condensed — the only width that is loaded */
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hle-page button, .hle-page input, .hle-page textarea, .hle-page select,
.hle-dialog button, .hle-dialog input, .hle-dialog textarea, .hle-dialog select {
  font: inherit; color: inherit; margin: 0;
}
.hle-page button, .hle-dialog button { cursor: pointer; }

/* Every conditional control is hidden by setting the `hidden` attribute. Most
   of them also carry an author `display` — flex, grid, contents — and an
   author rule beats the UA `[hidden] { display: none }`, so hiding them did
   nothing at all unless a matching guard happened to exist. One rule, once,
   rather than remembering to write a guard per class. */
.hle-page [hidden], .hle-dialog [hidden] { display: none !important; }

/* --- the page ----------------------------------------------------------
   One page inside their site, so this owns its own width and nothing else.
   No header, no nav, no footer — the site template supplies those.
-------------------------------------------------------------------------- */

.hle-page {
  max-width: 1680px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px);
  background: var(--hle-paper);
}

/* Max's brand carries the heading; the maker's mark sits out to the right in
   space the lede was never going to use. Wraps under on narrow screens. */
.hle-lede {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(16px, 4vw, 48px); flex-wrap: wrap;
  padding: clamp(24px, 4vw, 44px) 0 clamp(18px, 3vw, 28px);
}
.hle-lede-text { max-width: 660px; }

/* The page introduces itself once: the eyebrow, then the headline, then the
   note, each arriving just behind the one before. Short, and it only ever runs
   on load — nothing here re-animates as the board changes. */
@keyframes hle-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.hle-eyebrow,
.hle-lede h1,
.hle-sub,
.hle-mark {
  animation: hle-rise 0.62s var(--hle-ease) both;
}
.hle-eyebrow  { animation-delay: 0.02s; }
.hle-lede h1  { animation-delay: 0.10s; }
.hle-sub      { animation-delay: 0.20s; }
.hle-mark     { animation-delay: 0.28s; }

/* the board fades up under the words rather than snapping in */
.hle-app-stage { animation: hle-rise 0.72s var(--hle-ease) 0.24s both; }

/* a small live dot, then where the board gets made — sets the register
   before the heading has to do any work */
.hle-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 15px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--hle-muted);
}
.hle-eyebrow i {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hle-accent);
}

.hle-lede h1 {
  margin: 0 0 16px;
  /* bigger and tighter than before: display type, not a page title */
  font-size: clamp(32px, 5.2vw, 58px); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.0;
  text-wrap: balance;   /* ignored where unsupported, no fallback needed */
}
/* the shop's name is the one word in the line that should carry colour */
.hle-brand { color: var(--hle-accent-ink); }

.hle-sub {
  margin: 0; color: var(--hle-ink-2);
  font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.62; max-width: 50ch;
}
/* the sentence that has to land before anyone starts picking colours */
.hle-sub strong { color: var(--hle-ink); font-weight: 600; }

.hle-mark {
  flex: none; margin: 0; padding-top: 6px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  text-align: right;
}
.hle-mark-kicker {
  font-size: 10.5px; font-weight: 560; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--hle-muted);
}
.hle-mark-name {
  font-size: 15px; font-weight: 640; letter-spacing: -0.012em;
  color: var(--hle-accent-ink);
}

/* left-aligned under the lede once it has wrapped, rather than stranded right */
@media (max-width: 700px) {
  .hle-mark { align-items: flex-start; text-align: left; padding-top: 2px; }
}

/* --- app shell ---------------------------------------------------------- */

.hle-app {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding-bottom: 60px;
}

.hle-app-stage { position: sticky; top: 18px; }

@media (max-width: 940px) {
  .hle-app { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hle-app-stage {
    position: sticky; top: 0; z-index: 20;
    margin: 0 calc(clamp(16px, 4vw, 40px) * -1);
    padding: 0 clamp(16px, 4vw, 40px) 10px;
    background: linear-gradient(var(--hle-paper) 78%, rgba(250,247,242,0));
  }
}

/* --- stage -------------------------------------------------------------- */

/* No frame. The board is the thing being sold, so it sits on the page rather
   than inside a bordered, shadowed panel competing with the controls. */
.hle-stage {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.hle-viewport {
  position: relative;
  height: min(78vh, 860px);
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  outline: none;
  border-radius: 20px;
  /* barely there: a breath of light behind the board, not a wall */
  background:
    radial-gradient(110% 80% at 42% 6%, rgba(255,255,255,0.9), rgba(255,255,255,0) 66%),
    var(--hle-stage);
}
.hle-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--hle-accent); }
.hle-viewport.is-zoomed { cursor: grab; }
.hle-viewport.is-grabbing { cursor: grabbing; }

@media (max-width: 940px) {
  .hle-viewport { height: min(52vh, 480px); }
}

.hle-inner {
  position: relative;
  display: grid;
  place-items: center;
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.24s var(--hle-ease);
}
.hle-viewport.is-grabbing .hle-inner { transition: none; }

.hle-face {
  grid-area: 1 / 1;
  display: block;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.30s var(--hle-ease), transform 0.30s var(--hle-ease);
  pointer-events: none;
}
.hle-face.is-on { opacity: 1; transform: none; }

/* a single pass of light across the board when a render settles */
.hle-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg,
    rgba(255,255,255,0) 38%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0) 62%);
}
.hle-sheen.is-run { animation: hle-sweep 0.85s var(--hle-ease); }
@keyframes hle-sweep {
  0%   { opacity: 0; transform: translateX(-42%); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(42%); }
}

/* --- stage chrome ------------------------------------------------------- */

.hle-seg {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(255,253,250,0.80);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(34,30,26,0.08);
  border-radius: 999px; padding: 3px;
  box-shadow: 0 2px 12px -5px rgba(34,30,26,0.24);
  z-index: 3;
}
.hle-seg-thumb {
  position: absolute; top: 3px; left: 3px; bottom: 3px;
  width: calc(50% - 3px);
  background: var(--hle-ink);
  border-radius: 999px;
  transition: transform 0.32s var(--hle-ease);
  z-index: 0;
}
.hle-seg-btn {
  position: relative; z-index: 1;
  border: 0; background: none; border-radius: 999px;
  padding: 7px 20px; font-size: 12.5px; font-weight: 560;
  letter-spacing: 0.015em; color: var(--hle-ink-2);
  transition: color 0.26s var(--hle-ease);
}
.hle-seg-btn.is-on { color: #fff; }

.hle-zoom {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,253,250,0.80);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(34,30,26,0.08);
  border-radius: 999px; padding: 3px;
  box-shadow: 0 2px 12px -5px rgba(34,30,26,0.24);
}
.hle-zbtn {
  width: 28px; height: 28px; border: 0; background: none; border-radius: 999px;
  font-size: 15px; line-height: 1; color: var(--hle-ink);
  display: grid; place-items: center;
  transition: background 0.18s var(--hle-ease);
}
.hle-zbtn:hover:not(:disabled) { background: rgba(34,30,26,0.07); }
.hle-zbtn:disabled { opacity: 0.32; cursor: default; }
.hle-zlabel {
  min-width: 44px; text-align: center; font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--hle-ink-2);
}

.hle-hint {
  position: absolute; left: 14px; bottom: 18px; z-index: 3;
  font-size: 11px; letter-spacing: 0.03em; color: var(--hle-muted);
  opacity: 0; transition: opacity 0.3s var(--hle-ease); pointer-events: none;
}
.hle-stage:hover .hle-hint { opacity: 1; }
@media (max-width: 940px) { .hle-hint { display: none; } }

.hle-busy {
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4;
  overflow: hidden; opacity: 0; transition: opacity 0.2s var(--hle-ease);
}
.hle-stage.is-busy .hle-busy { opacity: 1; }
.hle-busy span {
  display: block; height: 100%; width: 34%;
  background: linear-gradient(90deg, transparent, var(--hle-accent), transparent);
  animation: hle-slide 1.1s linear infinite;
}
@keyframes hle-slide { from { transform: translateX(-100%); } to { transform: translateX(400%); } }

/* --- panel -------------------------------------------------------------- */

.hle-panel {
  display: flex; flex-direction: column;
  background: var(--hle-surface);
  border: 1px solid var(--hle-line-2);
  border-radius: var(--hle-radius);
  /* NOT overflow:hidden — the extras popover is positioned out of the flow
     and an overflow-clipped ancestor eats it whatever its z-index. The head
     rounds its own corners instead, which is all the clipping was for. */
  box-shadow: 0 1px 2px rgba(34,30,26,0.04), 0 18px 40px -30px rgba(34,30,26,0.28);
}

/* --- steps -------------------------------------------------------------- */

/* The two column wrappers are pure layout: below the card breakpoint they
   vanish and the steps become direct children of the panel again, stacked as
   one accordion. `order` puts them back into 1-2-3-4, since the columns
   interleave the sequence (1+3 in one, 2+4 in the other). */
.hle-col { display: contents; }
.hle-step[data-step="1"] { order: 1; }
.hle-step[data-step="2"] { order: 2; }
.hle-step[data-step="3"] { order: 3; }
.hle-step[data-step="4"] { order: 4; }
.hle-bar { order: 5; }

/* phone only; hidden by default so the card grid and the accordion never
   see any of it — the sheet is `contents`, so it costs the grid nothing */
.hle-nav   { display: none; }
.hle-sheet { display: contents; }
.hle-pills { display: none; }

.hle-step { border-bottom: 1px solid var(--hle-line-2); }
/* keyed to the sequence, not :last-of-type — that resolves per column wrapper
   and would drop the rule under step 3 rather than the last one shown */
.hle-step[data-step="4"] { border-bottom: 0; }

.hle-step-head {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 20px 26px; border: 0; background: none; text-align: left;
  transition: background 0.18s var(--hle-ease);
}
.hle-step-head:hover { background: rgba(34,30,26,0.022); }
/* the head sat flush in a clipped card; now it rounds itself */
.hle-step .hle-step-head { border-radius: var(--hle-radius) var(--hle-radius) 0 0; }

.hle-step-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 640; font-variant-numeric: tabular-nums;
  background: rgba(34,30,26,0.06); color: var(--hle-muted);
  transition: background 0.22s var(--hle-ease), color 0.22s var(--hle-ease);
}
.hle-step.is-open .hle-step-n { background: var(--hle-accent); color: #fff; }

.hle-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hle-step-title {
  font-size: 21px; font-weight: 640; letter-spacing: -0.024em; color: var(--hle-ink);
}
.hle-step-value {
  font-size: 12px; color: var(--hle-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hle-step.is-open .hle-step-value { color: var(--hle-accent-ink); }

/* the actual colours on the closed Finish step, so the build reads at a glance */
.hle-step-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-left: 5px; vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgba(34,30,26,0.14);
}
.hle-step-dot:first-of-type { margin-left: 7px; }

.hle-step-chev {
  flex: none; width: 9px; height: 9px; margin-right: 3px;
  border-right: 1.8px solid var(--hle-muted);
  border-bottom: 1.8px solid var(--hle-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.28s var(--hle-ease);
}
.hle-step.is-open .hle-step-chev { transform: rotate(225deg) translate(-2px, -2px); }

.hle-step-body { display: none; padding: 4px 26px 28px; }
.hle-step.is-open .hle-step-body { display: block; animation: hle-open 0.26s var(--hle-ease); }
@keyframes hle-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* --- wide screens: one card per step ------------------------------------
   A laptop at full screen has room to stand all four steps open beside the
   board, which is the whole reason the accordion existed — hunting through a
   long scroll. Two columns rather than one grid, so the tall Finish card can
   run past Board without leaving a hole under it.

   Breakpoint shared with isWide() in ui.js — change both together. */
@media (min-width: 1180px) {
  /* One board, as tall as the screen allows. A board is bound by height, so
     the stage takes only the width one needs and the rest goes to a single
     generous column of controls — two cramped columns is what made this feel
     tight in the first place. */
  .hle-app { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .hle-viewport { height: min(92vh, 1100px); }
  .hle-lede { padding: clamp(20px, 2.4vw, 32px) 0 clamp(14px, 1.8vw, 22px); }

  /* the panel stops being a card and becomes the frame the cards sit in */
  .hle-panel {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 22px; align-items: start;
    background: none; border: 0; border-radius: 0;
    box-shadow: none; overflow: visible;
  }
  /* The panel is one column now, so the two column wrappers must get out of
     the way — otherwise their contents stack as 1,3 then 2,4. `contents` drops
     them from the box tree and lets the order rules above sequence the steps
     1-2-3-4 as written. */
  .hle-col { display: contents; }

  /* Flat sections, not cards. Four bordered boxes stacked in a column read as
     four competing panels; a hairline and real space between them reads as one
     document you move down. This is the single biggest reason the old panel
     felt tight. */
  .hle-step {
    border: 0; border-radius: 0; background: none;
    box-shadow: none; overflow: visible;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--hle-line-2);
  }
  .hle-step:last-of-type { border-bottom: 0; padding-bottom: 8px; }
  .hle-step-head { padding: 0 0 18px; }
  .hle-step-body { padding: 0; }
  .hle-step[data-step="4"] { border-bottom: 1px solid var(--hle-line-2); }

  /* every step is open; its header is a caption, not a control */
  .hle-step-body { display: block; animation: none; }
  .hle-step-chev { display: none; }
  .hle-step-head { cursor: default; }
  .hle-step-head:hover { background: none; }

  /* the price and the send button run the width of both columns */
  .hle-bar {
    grid-column: 1 / -1;
    border: 1px solid var(--hle-line-2);
    border-radius: var(--hle-radius);
  }
}

/* sections inside a step are just labelled groups now, not cards */
.hle-sec { padding: 22px 0 0; }
.hle-sec:first-child { padding-top: 4px; }
.hle-sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 11px;
}
.hle-sec-title {
  margin: 0; font-size: 10.5px; font-weight: 650;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--hle-muted);
}
.hle-sec-note { font-size: 11.5px; color: var(--hle-muted); }
.hle-sec-body { display: flex; flex-direction: column; gap: 18px; }

.hle-mode-block { display: contents; }

/* --- the bar that stays put --------------------------------------------- */

.hle-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--hle-line);
  background: rgba(255,253,250,0.90);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
/* The price is the thing that must never be squeezed out — it gets a floor
   wide enough for the figure itself, and the buttons work round it. */
.hle-bar-price {
  flex: 1 1 auto; min-width: 74px;
  display: flex; flex-direction: column; gap: 1px;
}
.hle-bar-price strong {
  font-size: 19px; font-weight: 640; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hle-bar-price span {
  font-size: 11px; color: var(--hle-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hle-bar .hle-cta { width: auto; margin: 0; flex: none; padding: 12px 22px; }
.hle-bar-reset, .hle-bar-save { flex: none; }
/* armed: says what it is about to do rather than looking like a second CTA */
.hle-bar-reset.is-armed {
  border-color: var(--hle-accent); color: var(--hle-accent-ink); font-weight: 560;
}
/* the price can give up its room before the buttons do */
@media (max-width: 420px) {
  .hle-bar { gap: 8px; padding: 12px 14px; }
  .hle-bar { gap: 8px; padding: 12px 14px; }
  .hle-bar .hle-cta { padding: 12px 14px; font-size: 13.5px; }
  .hle-bar-reset, .hle-bar-save { padding: 7px 10px; font-size: 12.5px; }
}

.hle-note {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--hle-muted);
}

.hle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* --- models ------------------------------------------------------------- */

.hle-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 10px; }
/* the description of whichever model is selected, under the row */
.hle-model-desc {
  margin: 14px 0 0; font-size: 14px; line-height: 1.55;
  color: var(--hle-ink-2); max-width: 62ch;
}
@media (max-width: 460px) { .hle-models { grid-template-columns: 1fr; } }

.hle-model {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 16px 15px;
  border: 1px solid var(--hle-line); border-radius: 13px;
  background: transparent;
  transition: border-color 0.18s var(--hle-ease), background 0.18s var(--hle-ease),
              box-shadow 0.18s var(--hle-ease), transform 0.18s var(--hle-ease);
}
.hle-model:hover {
  border-color: rgba(34,30,26,0.24); transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px rgba(60,44,30,0.45);
}
/* Chosen means filled. A tinted background and a coloured border is a hint;
   solid ink is an answer, and it reads across the panel at a glance. */
.hle-model.is-on {
  border-color: var(--hle-ink); background: var(--hle-ink); color: #fff;
  box-shadow: none;
}
.hle-model.is-on .hle-model-fam { color: rgba(255,255,255,0.62); }
.hle-model.is-on .hle-model-name { color: #fff; }
.hle-model-fam {
  font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hle-muted);
}
.hle-model-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; }
.hle-model-blurb {
  font-size: 11.5px; line-height: 1.4; color: var(--hle-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- sizes -------------------------------------------------------------- */

.hle-sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.hle-size {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 20px 14px; min-width: 104px;
  border: 1px solid var(--hle-line); border-radius: 12px; background: transparent;
  transition: border-color 0.18s var(--hle-ease), background 0.18s var(--hle-ease);
}
.hle-size:hover { border-color: rgba(34,30,26,0.26); }
.hle-size.is-on { border-color: var(--hle-ink); background: var(--hle-ink); color: #fff; }
.hle-size-len { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hle-size-dim { font-size: 10.5px; color: var(--hle-muted); }
.hle-size.is-on .hle-size-dim { color: rgba(255,255,255,0.66); }

/* --- choices ------------------------------------------------------------ */

.hle-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.hle-chip {
  padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--hle-line); background: transparent;
  font-size: 13.5px; font-weight: 540; color: var(--hle-ink-2);
  transition: all 0.18s var(--hle-ease);
}
.hle-chip:hover { border-color: rgba(34,30,26,0.26); color: var(--hle-ink); }
.hle-chip.is-on { background: var(--hle-ink); border-color: var(--hle-ink); color: #fff; }

/* Primary choices fill the row and split it evenly, so the targets are big and
   the options read as a set rather than a huddle of pills at one end. */
.hle-choice.is-wide { gap: 6px; }
.hle-choice.is-wide .hle-chip {
  flex: 1 1 0; min-width: 0; text-align: center;
  padding: 11px 10px; font-size: 13px; font-weight: 540;
}

/* One line: caption on the left, its buttons filling the rest. Beats a stacked
   caption above every little segmented control. */
.hle-mini { display: flex; align-items: center; gap: 12px; }
.hle-mini + .hle-mini { margin-top: 8px; }
.hle-mini-cap {
  font-size: 11px; font-weight: 620; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--hle-muted);
  flex: none; min-width: 44px;
}
.hle-mini .hle-choice { flex: 1; }
.hle-mini .hle-chip { flex: 1 1 0; text-align: center; padding: 7px 8px; }

.hle-choice.is-mode { gap: 4px; padding: 4px; background: rgba(34,30,26,0.045); border-radius: 999px; }
.hle-choice.is-mode .hle-chip { flex: 1; border-color: transparent; text-align: center; }
.hle-choice.is-mode .hle-chip.is-on { background: var(--hle-surface); color: var(--hle-ink);
  border-color: var(--hle-line); box-shadow: 0 1px 3px rgba(60,44,30,0.10); }

/* --- the extras menu ------------------------------------------------------
   Rail band, racing stripes and a raw stringer are things most boards do not
   have. Three permanent switches for them cost three rows on every build; one
   line that says what has been added costs one, and opens when it is wanted. */

.hle-menu { position: relative; }
/* This box holds the things a customer would never find otherwise, and as a
   hairline outline on a transparent ground it read as a label rather than a
   control — people looked straight past it. The accent wash says "open me". */
.hle-menu-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--hle-line); border-radius: 12px;
  background: var(--hle-tintbg); text-align: left;
  transition: border-color 0.18s var(--hle-ease), background 0.18s var(--hle-ease);
}
.hle-menu-btn:hover,
.hle-menu.is-open .hle-menu-btn { border-color: var(--hle-accent); }
.hle-menu-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--hle-accent); }
.hle-menu-sum { flex: 1; font-size: 14.5px; font-weight: 540; }
/* still quieter than a real answer, but on the accent ground rather than
   greyed out of sight */
.hle-menu-sum.is-empty { color: var(--hle-accent-ink); font-weight: 520; }
.hle-menu-chev {
  flex: none; width: 7px; height: 7px;
  border-right: 1.6px solid var(--hle-accent);
  border-bottom: 1.6px solid var(--hle-accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s var(--hle-ease);
}
.hle-menu.is-open .hle-menu-chev { transform: rotate(225deg) translateY(-1px); }

.hle-menu-pop {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  padding: 4px 16px;
  border: 1px solid var(--hle-line); border-radius: 14px;
  background: var(--hle-surface);
  box-shadow: 0 2px 6px rgba(34,30,26,0.06), 0 22px 44px -22px rgba(34,30,26,0.34);
}
.hle-menu.is-open .hle-menu-pop { display: block; }
/* The card holding an open menu comes forward, so the popover is inside
   something already above its neighbours. Guards against the next transform
   anyone puts on a card quietly re-trapping it. */
.hle-step.has-menu-open { position: relative; z-index: 40; }
/* opened upward, when there is no room below the button */
.hle-menu.is-up .hle-menu-pop { top: auto; bottom: calc(100% + 6px); }

/* --- toggle ------------------------------------------------------------- */

.hle-toggle {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 48px; padding: 4px 0;
  border: 0; background: none; text-align: left;
}
.hle-toggle .hle-toggle-label { flex: 1; font-size: 14.5px; font-weight: 540; }
.hle-row > .hle-toggle { width: 100%; }
.hle-toggle-label { font-size: 13px; color: var(--hle-ink-2); }
.hle-toggle-track {
  width: 38px; height: 22px; border-radius: 999px; flex: none;
  background: rgba(34,30,26,0.16); position: relative;
  transition: background 0.22s var(--hle-ease);
}
.hle-toggle-track span {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(60,44,30,0.28);
  transition: transform 0.22s var(--hle-ease);
}
.hle-toggle.is-on .hle-toggle-track { background: var(--hle-accent); }
.hle-toggle.is-on .hle-toggle-track span { transform: translateX(16px); }
.hle-toggle.is-on .hle-toggle-label { color: var(--hle-ink); }

/* --- swatches ----------------------------------------------------------- */

.hle-sw { display: flex; flex-direction: column; gap: 10px; }
.hle-sw-current { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.hle-sw-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(34,30,26,0.16), 0 1px 2px rgba(60,44,30,0.14);
}
.hle-sw-dot.is-clear {
  background-image: linear-gradient(135deg, rgba(0,0,0,0.10) 25%, transparent 25%,
    transparent 50%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.10) 75%, transparent 75%);
  background-size: 6px 6px;
}
.hle-sw-name { font-size: 13px; font-weight: 540; letter-spacing: -0.005em; }
.hle-sw-name-empty { font-weight: 500; color: var(--hle-muted); }
.hle-sw-cap {
  font-size: 10.5px; font-weight: 620; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--hle-muted);
  flex: none; min-width: 52px;
}
.hle-sw-dot.is-empty {
  box-shadow: inset 0 0 0 1.5px var(--hle-line);
  background: transparent !important;
}

.hle-sw-tools { display: flex; }
.hle-sw-search {
  width: 100%; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--hle-line); background: rgba(34,30,26,0.025);
  font-size: 13px; outline: none;
  transition: border-color 0.18s var(--hle-ease), background 0.18s var(--hle-ease);
}
.hle-sw-search:focus { border-color: var(--hle-accent); background: var(--hle-surface); }

.hle-sw-tabs {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 3px;
  scrollbar-width: none;
}
.hle-sw-tabs::-webkit-scrollbar { display: none; }
.hle-sw-tab {
  flex: none; border: 0; background: none; padding: 4px 9px; border-radius: 7px;
  font-size: 11.5px; color: var(--hle-muted); white-space: nowrap;
  transition: all 0.16s var(--hle-ease);
}
.hle-sw-tab:hover { color: var(--hle-ink); background: rgba(34,30,26,0.05); }
.hle-sw-tab.is-on { color: var(--hle-ink); background: rgba(34,30,26,0.085); font-weight: 560; }

.hle-sw-grid {
  display: grid;
  /* Full width of the column. A colour range is easier to scan across than
     down, and the wider grid means fewer rows before the scroll starts. */
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 10px;
  max-height: 272px; overflow-y: auto;
  padding: 2px; margin: -2px;
  scrollbar-width: thin;
}
.hle-sw-grid.is-compact { max-height: 168px; }

/* The extras keep the narrow, taller picker: a rail band and a pair of stripes
   are trim, and a full-width sweep of 194 colours for them reads louder than
   the base coat it sits under. */
.hle-sw.is-narrow .hle-sw-grid,
.hle-sw.is-narrow .hle-sw-tools,
.hle-sw.is-narrow .hle-sw-tabs { max-width: 252px; }
.hle-sw.is-narrow .hle-sw-grid {
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 8px; max-height: 140px;
}
.hle-sw-grid::-webkit-scrollbar { width: 8px; }
.hle-sw-grid::-webkit-scrollbar-thumb { background: rgba(34,30,26,0.16); border-radius: 8px; }

.hle-sw-item {
  aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(34,30,26,0.13);
  transition: transform 0.15s var(--hle-ease), box-shadow 0.15s var(--hle-ease);
}
.hle-sw-item:hover { transform: scale(1.14); z-index: 1; }
.hle-sw-item.is-on {
  box-shadow: inset 0 0 0 1px rgba(34,30,26,0.13),
              0 0 0 3px var(--hle-paper), 0 0 0 5px var(--hle-ink);
  transform: none;
}
.hle-sw-item.is-clear {
  background-image: linear-gradient(135deg, rgba(0,0,0,0.10) 25%, transparent 25%,
    transparent 50%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.10) 75%, transparent 75%);
  background-size: 7px 7px;
}
.hle-sw-empty { grid-column: 1 / -1; margin: 4px 0; font-size: 12.5px; color: var(--hle-muted); }

.hle-swirl-block, .hle-fade-block { display: flex; flex-direction: column; gap: 12px; }

.hle-ghost {
  border: 1px solid var(--hle-line); background: transparent;
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; color: var(--hle-ink-2);
  transition: all 0.18s var(--hle-ease);
}
.hle-ghost:hover:not(:disabled) { border-color: var(--hle-ink); color: var(--hle-ink); }
.hle-ghost:disabled { opacity: 0.36; cursor: default; }

/* --- summary ------------------------------------------------------------ */

.hle-sum { margin: 0; display: flex; flex-direction: column; gap: 0; }
.hle-sum-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--hle-line-2);
}
.hle-sum-row:last-child { border-bottom: 0; }
.hle-sum dt { font-size: 12px; color: var(--hle-muted); }
.hle-sum dd { margin: 0; font-size: 13px; font-weight: 520; }
.hle-sum-dim { color: var(--hle-muted); font-weight: 400; }
.hle-sum code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.02em;
}
.hle-sum-chip { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.hle-sum-chip i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(34,30,26,0.18);
}

.hle-cta {
  width: 100%; margin-top: 4px;
  padding: 17px 26px; border: 0; border-radius: 999px; white-space: nowrap;
  font-size: 15px; font-weight: 620; letter-spacing: -0.005em;
  background: var(--hle-accent); color: #fff;
  font-size: 14px; font-weight: 570; letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(143,63,39,0.28), 0 8px 18px -10px rgba(143,63,39,0.5);
  transition: background 0.2s var(--hle-ease), transform 0.14s var(--hle-ease);
}
.hle-cta:hover { background: var(--hle-accent-2); transform: translateY(-1px); }
.hle-cta:active { transform: none; }

/* --- dialog ------------------------------------------------------------- */

.hle-dialog {
  border: 0; padding: 0; border-radius: 16px;
  width: min(600px, calc(100vw - 28px));
  max-height: min(88vh, 880px);
  background: var(--hle-surface); color: var(--hle-ink);
  box-shadow: 0 30px 80px -30px rgba(60,44,30,0.55);
}
.hle-dialog::backdrop { background: rgba(34,30,26,0.46); backdrop-filter: blur(3px); }

.hle-form { display: flex; flex-direction: column; max-height: inherit; overflow-y: auto; padding: 24px; gap: 18px; }
.hle-form-head { position: relative; padding-right: 34px; }
.hle-form-head h2 { margin: 0 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.hle-form-head p { margin: 0; font-size: 13.5px; color: var(--hle-ink-2); }
.hle-form-close {
  position: absolute; top: -4px; right: -4px;
  width: 30px; height: 30px; border: 0; background: none; border-radius: 50%;
  font-size: 22px; line-height: 1; color: var(--hle-muted);
  display: grid; place-items: center;
}
.hle-form-close:hover { background: rgba(34,30,26,0.06); color: var(--hle-ink); }

.hle-form-spec {
  background: rgba(34,30,26,0.030); border-radius: 11px; padding: 14px 16px;
}
.hle-form-est {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--hle-line-2);
  font-size: 13px;
}
.hle-form-est strong { font-size: 15px; }
.hle-form-est span { display: block; color: var(--hle-muted); font-size: 11.5px; margin-top: 2px; }

.hle-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .hle-form-grid { grid-template-columns: 1fr; } }
.hle-field { display: flex; flex-direction: column; gap: 5px; }
.hle-field.is-wide { grid-column: 1 / -1; }
.hle-field-label { font-size: 11.5px; color: var(--hle-muted); letter-spacing: 0.01em; }
.hle-field input, .hle-field textarea {
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--hle-line);
  background: rgba(34,30,26,0.022); font-size: 14px; outline: none; resize: vertical;
  transition: border-color 0.18s var(--hle-ease), background 0.18s var(--hle-ease);
}
.hle-field input:focus, .hle-field textarea:focus {
  border-color: var(--hle-accent); background: var(--hle-surface);
}

.hle-form-error {
  margin: 0; font-size: 13px; color: #9c2b1e;
  background: rgba(156,43,30,0.07); padding: 9px 12px; border-radius: 9px;
}
.hle-form-foot { display: flex; gap: 10px; align-items: center; }
.hle-form-foot .hle-cta { width: auto; flex: 1; margin: 0; }

.hle-form-done { text-align: center; padding: 26px 10px 14px; }
.hle-form-done h2 { margin: 16px 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.hle-form-done p { margin: 0 auto 22px; max-width: 40ch; font-size: 13.5px; color: var(--hle-ink-2); }
.hle-form-done .hle-cta { width: auto; padding-left: 30px; padding-right: 30px; }
.hle-tick {
  width: 46px; height: 46px; margin: 0 auto; border-radius: 50%;
  background: var(--hle-accent); position: relative;
}
.hle-tick::after {
  content: ''; position: absolute; left: 16px; top: 12px;
  width: 12px; height: 20px; border: solid #fff; border-width: 0 2.4px 2.4px 0;
  transform: rotate(42deg);
}

/* --- page foot ---------------------------------------------------------- */

.hle-foot {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(30px, 4vw, 46px) 0;
  border-top: 1px solid var(--hle-line-2);
}
.hle-foot h2 {
  margin: 0 0 7px; font-size: 11px; font-weight: 640;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--hle-muted);
}
.hle-foot p { margin: 0; font-size: 13.5px; color: var(--hle-ink-2); max-width: 42ch; }


/* --- entrance -----------------------------------------------------------
   One pass as the page comes up: the masthead reads in, the board arrives,
   then the cards deal out behind it. Everything moves on transform and
   opacity alone, so nothing reflows — which also means the iframe's height
   never changes mid-animation and embed.js has nothing to chase.

   `both` fill matters here: the end state is the visible one, so if these
   never run the page is simply there.
-------------------------------------------------------------------------- */

@keyframes hle-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.hle-eyebrow, .hle-lede h1, .hle-sub, .hle-mark,
.hle-stage, .hle-step, .hle-bar {
  animation: hle-rise 0.62s var(--hle-ease) both;
}

.hle-eyebrow { animation-delay: 0.02s; }
.hle-lede h1 { animation-delay: 0.08s; }
.hle-sub     { animation-delay: 0.15s; }
.hle-mark    { animation-delay: 0.22s; }
/* the board is the point of the page, so it lands before the controls */
.hle-stage   { animation-delay: 0.16s; }
.hle-step[data-step="1"] { animation-delay: 0.26s; }
.hle-step[data-step="2"] { animation-delay: 0.32s; }
.hle-step[data-step="3"] { animation-delay: 0.38s; }
.hle-step[data-step="4"] { animation-delay: 0.44s; }
.hle-bar     { animation-delay: 0.50s; }

/* --- focus and motion --------------------------------------------------- */

:where(button, input, textarea, a):focus-visible {
  outline: 2px solid var(--hle-accent); outline-offset: 2px; border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .hle-eyebrow, .hle-lede h1, .hle-sub, .hle-mark, .hle-app-stage {
    animation: none !important;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    /* the delay has to go too, or a staggered entrance leaves the page
       blank for half a second before snapping in */
    animation-delay: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- embedded -----------------------------------------------------------
   Iframed rather than pasted in. The host page already has a heading above
   the frame, so drop ours and let the tool start at the top.
-------------------------------------------------------------------------- */

body.is-embedded .hle-lede { display: none; }

body.is-embedded .hle-page { background: transparent; }
body.is-embedded .hle-page { padding-top: 8px; }
body.is-embedded .hle-app { padding-bottom: 28px; }
body.is-embedded .hle-app-stage { top: 8px; }
body.is-embedded .hle-viewport { height: min(72vh, 780px); }

/* --- the phone walk -------------------------------------------------------
   Ported from the base config. Below this width the steps stop being a list
   and become one screen at a time, with the board pinned above and Back/Next
   in the bar. Tablet and desktop are untouched: everything here is inside
   the query, and it sits at the end of the file so it wins the tablet rules
   above it on equal specificity.
-------------------------------------------------------------------------- */

@media (max-width: 700px) {
  /* one step in the document at a time */
  .hle-step { display: none; border-bottom: 0; }
  .hle-step.is-current { display: block; }

  /* the header is a caption now — it says where you are, not what to click */
  .hle-step-head { cursor: default; padding-bottom: 12px; }
  .hle-step-head:hover { background: none; }
  .hle-step-chev { display: none; }

  /* A shorter board. It stays pinned while you walk, so it is competing with
     the controls for the same screen — and on a phone the controls need to
     win. Still tall enough to judge a colour on. */
  .hle-viewport { height: min(34vh, 280px); }

  /* The lede was written for a desktop column and on a phone it pushed the
     board and the first question most of a screen down. Same words, a lot
     less room. */
  .hle-lede { padding: 18px 0 14px; gap: 10px; }
  .hle-lede h1 { font-size: 27px; margin: 0 0 10px; letter-spacing: -0.028em; }
  .hle-eyebrow { margin: 0 0 9px; font-size: 10px; }
  .hle-sub { font-size: 14px; line-height: 1.5; }
  .hle-mark { padding-top: 0; }
  .hle-mark-kicker { font-size: 9.5px; }
  .hle-mark-name { font-size: 13.5px; }

  /* the bar carries the walk, so it takes a second row for it — kept tight,
     because every pixel here is a pixel off the step above it */
  .hle-bar { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .hle-bar-price strong { font-size: 17px; }
  .hle-nav {
    display: flex; align-items: center; gap: 12px;
    width: 100%; order: 9;
  }
  .hle-nav-count {
    flex: 1; text-align: center;
    font-size: 12px; font-weight: 560; color: var(--hle-muted);
    font-variant-numeric: tabular-nums;
  }
  .hle-nav-back { flex: none; }
  /* Next and the send button share the slot on the right — one or the other
     is hidden, never both showing */
  .hle-nav-next, .hle-bar .hle-cta { flex: none; padding: 12px 20px; }
  .hle-bar-price { flex: 1 1 auto; }
  .hle-bar-reset, .hle-bar-save { flex: none; }
}

/* --- the phone shell -----------------------------------------------------
   The board is the centrepiece. It fills the screen; the steps live behind
   pills at its corners and come up as a sheet over the lower half, so you
   watch the board change while you pick. Step one is the exception: there is
   no board worth showing until a model and a size exist, so it gets the
   screen to itself.

   All of this is gated on .is-phone-shell, set by syncLayout, so tablet and
   desktop never see it.
-------------------------------------------------------------------------- */

@media (max-width: 700px) {
  /* Heights come from measured pixels, not vh. On a phone browser `vh`
     counts the chrome that slides away, so a 100vh shell is taller than the
     screen and the bar ends up below the fold. syncLayout publishes the real
     visible height instead. */
  .is-phone-shell, .is-phone-shell body { overflow: hidden; height: 100%; }
  .is-phone-shell .hle-app { height: var(--hle-shell-h, 100%); }

  /* the page furniture is preamble — off screen once the board is the point */
  .is-phone-shell .hle-lede,
  .is-phone-shell .hle-foot { display: none; }

  .is-phone-shell .hle-page { padding: 0; max-width: none; }

  /* A flex column does the arithmetic. The panel takes what the sheet asks
     for and the stage takes the rest, so opening the sheet shrinks the board
     to fit what is left — no measured offsets to keep in step. */
  .is-phone-shell .hle-app {
    position: fixed; inset: 0; padding: 0;
    height: var(--hle-shell-h, 100%);
    display: flex; flex-direction: column;
  }
  /* A flex item's `min-width: auto` lets its content push it wider than the
     container — and the panel's content is a 194-colour grid. Block children
     never did this, so the flex column has to say so explicitly. */
  .is-phone-shell .hle-app > *,
  .is-phone-shell .hle-panel { min-width: 0; width: 100%; }

  /* THE BOARD, as big as the screen allows. With the sheet up the stage gives
     up the bottom of the screen to it, rather than staying full height and
     letting the sheet cover half the board. The stage fits the board to its
     own box, so shrinking the box re-fits the board into what is actually
     visible — and the pills live inside the stage, so they come up with it
     instead of hiding behind the sheet. */
  .is-phone-shell .hle-app-stage {
    position: relative; inset: auto; margin: 0; padding: 0; z-index: 1;
    flex: 1 1 auto; min-height: 0;
    background: none;
  }
  .is-phone-shell .hle-stage {
    height: 100%; border: 0; border-radius: 0; box-shadow: none;
  }
  .is-phone-shell .hle-viewport { height: 100%; border-radius: 0; }

  /* the intro has no board behind it */
  .is-intro .hle-app-stage { display: none; }

  /* --- the pills ------------------------------------------------------- */
  .is-phone-shell .hle-pills { display: block; position: absolute; inset: 0; pointer-events: none; }
  .is-intro .hle-pills { display: none; }

  .hle-pill {
    position: absolute; z-index: 6; pointer-events: auto;
    padding: 8px 12px; border-radius: 999px;
    border: 1px solid rgba(34,30,26,0.10);
    background: rgba(255,253,250,0.86);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 2px 12px -5px rgba(34,30,26,0.30);
    font-size: 12px; font-weight: 560; color: var(--hle-ink);
    max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hle-pill.is-on {
    background: var(--hle-accent); border-color: var(--hle-accent); color: #fff;
  }
  /* Model and size read first, so they take the top left corner. Finish sits
     opposite with its own extras stacked under it, and the two remaining
     corners take the rest — the side switch keeps the bottom centre.

     The board pill carries a model name of unknown length, so it is capped
     short of Finish rather than trusting the text to behave. */
  .hle-pill-board {
    top: 12px; left: 12px;
    max-width: calc(100% - 140px);
  }
  .hle-pill-tr { top: 12px; right: 12px; }
  .hle-pill-r2 { top: 54px; right: 12px; }
  .hle-pill-bl { bottom: 12px; left: 12px; }
  .hle-pill-br { bottom: 12px; right: 12px; }

  /* The base moved Deck/Bottom to the foot of the stage on every width so
     the top corners are free for pills. Desktop here keeps it at the top,
     so on a phone alone the switch drops to the bottom centre and the zoom
     pill — which collided with the corners — gives up its place. The board
     pinch-zooms and drags on a phone anyway. */
  .is-phone-shell .hle-seg  { top: auto; bottom: 14px; }
  .is-phone-shell .hle-zoom { display: none; }
  /* and the switch shrinks to fit between the two bottom pills — at full
     desktop size it ran under the Hardware pill */
  .is-phone-shell .hle-seg-btn { padding: 7px 14px; font-size: 13px; }

  /* --- the sheet ------------------------------------------------------- */
  .is-phone-shell .hle-app-panel { flex: none; }
  .is-phone-shell .hle-panel {
    position: relative; z-index: 20;
    border-radius: 18px 18px 0 0;
    border: 1px solid var(--hle-line-2); border-bottom: 0;
    box-shadow: 0 -8px 40px -12px rgba(34,30,26,0.30);
    background: var(--hle-surface);
    display: flex; flex-direction: column;
  }
  .is-phone-shell .hle-sheet {
    display: block;
    max-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transition: max-height 0.28s var(--hle-ease);
  }
  .is-sheet-open .hle-sheet { max-height: var(--hle-sheet-max, 50%); }
  /* the intro has no board above it, so the sheet takes the whole column */
  .is-intro .hle-sheet { max-height: none; flex: 1 1 auto; min-height: 0; }
  .is-intro .hle-panel { border-radius: 0; border: 0; flex: 1 1 auto; min-height: 0; }
  .is-intro .hle-app-panel { flex: 1 1 auto; min-height: 0; display: flex; }

  /* steps inside the sheet want the card padding back, not the flat desktop */
  .is-phone-shell .hle-step-head { padding: 16px 20px 10px; }
  .is-phone-shell .hle-step-body { padding: 0 20px 22px; }

  /* the bar is the sheet's SIBLING, so it stays put while the sheet moves */
  .is-phone-shell .hle-bar { position: static; }

  .is-phone-shell .hle-hint { display: none; }

  /* THE EXTRAS LIST GOES INLINE HERE. The sheet has to scroll, and a scroll
     container clips an absolutely-positioned child — so a popover inside it
     can only ever show its first row. It does not need to be a popover on a
     phone anyway: the sheet already scrolls, so the switches just sit in it,
     with the summary line above them as a heading rather than a button. */
  .is-phone-shell .hle-menu-pop {
    display: block; position: static; inset: auto;
    border: 0; box-shadow: none; background: none;
    padding: 2px 0 0;
  }
  .is-phone-shell .hle-menu-btn {
    pointer-events: none; border-color: transparent;
    background: none; padding-left: 0;
  }
  .is-phone-shell .hle-menu-chev { display: none; }
}