/* ---------------------------------------------------------------------------
   engine.css — layout and components. NOT the look.

   Every colour, radius and typeface in here is a var(--bs-*) token, and every
   one of those is defined in tenant/theme.css. Nothing in this file should
   ever need editing to put the configurator in front of a different shop; if
   you find yourself wanting to, the token is missing and belongs in the theme.

   Scoped to .bs-page and .bs-dialog throughout, so it can be dropped into a
   host page whose CSS you do not control and cannot restyle anything around
   it.
--------------------------------------------------------------------------- */



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

.bs-page, .bs-dialog {
  color: var(--bs-ink);
  font-family: var(--bs-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bs-page button, .bs-page input, .bs-page textarea, .bs-page select,
.bs-dialog button, .bs-dialog input, .bs-dialog textarea, .bs-dialog select {
  font: inherit; color: inherit; margin: 0;
}
.bs-page button, .bs-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. */
.bs-page [hidden], .bs-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.
-------------------------------------------------------------------------- */

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

/* The shop's name 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. */
.bs-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);
}
.bs-lede-text { max-width: 660px; }

/* a small live dot, then where the board gets made — sets the register
   before the heading has to do any work */
.bs-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(--bs-muted);
}
.bs-eyebrow i {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bs-accent);
}

.bs-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 */
.bs-brand { color: var(--bs-accent-ink); }

.bs-sub {
  margin: 0; color: var(--bs-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 */
.bs-sub strong { color: var(--bs-ink); font-weight: 600; }

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

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

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

.bs-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;
}

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

@media (max-width: 940px) {
  .bs-app { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bs-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(--bs-paper) 78%, rgba(250,247,242,0));
  }
}

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

.bs-stage {
  position: relative;
  background: var(--bs-stage);
  border-radius: var(--bs-radius);
  border: 1px solid var(--bs-line-2);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(34,30,26,0.04), 0 16px 38px -24px rgba(34,30,26,0.30);
}

.bs-viewport {
  position: relative;
  height: min(78vh, 860px);
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  outline: none;
  /* a wall, lit from the upper left, so the board has something to sit against */
  background:
    radial-gradient(120% 90% at 32% 8%, rgba(255,255,255,0.95), rgba(255,255,255,0) 62%),
    linear-gradient(168deg, #f3f3f2 0%, #e9e9e7 58%, #e2e2df 100%);
}
.bs-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--bs-accent); }
.bs-viewport.is-zoomed { cursor: grab; }
.bs-viewport.is-grabbing { cursor: grabbing; }

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

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

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

/* a single pass of light across the board when a render settles */
.bs-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%);
}
.bs-sheen.is-run { animation: bs-sweep 0.85s var(--bs-ease); }
@keyframes bs-sweep {
  0%   { opacity: 0; transform: translateX(-42%); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(42%); }
}

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

.bs-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;
}
.bs-seg-thumb {
  position: absolute; top: 3px; left: 3px; bottom: 3px;
  width: calc(50% - 3px);
  background: var(--bs-ink);
  border-radius: 999px;
  transition: transform 0.32s var(--bs-ease);
  z-index: 0;
}
.bs-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(--bs-ink-2);
  transition: color 0.26s var(--bs-ease);
}
.bs-seg-btn.is-on { color: #fff; }

.bs-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);
}
.bs-zbtn {
  width: 28px; height: 28px; border: 0; background: none; border-radius: 999px;
  font-size: 15px; line-height: 1; color: var(--bs-ink);
  display: grid; place-items: center;
  transition: background 0.18s var(--bs-ease);
}
.bs-zbtn:hover:not(:disabled) { background: rgba(34,30,26,0.07); }
.bs-zbtn:disabled { opacity: 0.32; cursor: default; }
.bs-zlabel {
  min-width: 44px; text-align: center; font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--bs-ink-2);
}

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

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

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

.bs-panel {
  display: flex; flex-direction: column;
  background: var(--bs-surface);
  border: 1px solid var(--bs-line-2);
  border-radius: var(--bs-radius);
  overflow: hidden;
  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). */
.bs-col { display: contents; }
.bs-step[data-step="1"] { order: 1; }
.bs-step[data-step="2"] { order: 2; }
.bs-step[data-step="3"] { order: 3; }
.bs-step[data-step="4"] { order: 4; }
.bs-bar { order: 5; }

.bs-step { border-bottom: 1px solid var(--bs-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 */
.bs-step[data-step="4"] { border-bottom: 0; }

.bs-step-head {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 17px 20px; border: 0; background: none; text-align: left;
  transition: background 0.18s var(--bs-ease);
}
.bs-step-head:hover { background: rgba(34,30,26,0.022); }

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

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

/* the actual colours on the closed Finish step, so the build reads at a glance */
.bs-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);
}
.bs-step-dot:first-of-type { margin-left: 7px; }

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

.bs-step-body { display: none; padding: 2px 20px 22px; }
.bs-step.is-open .bs-step-body { display: block; animation: bs-open 0.26s var(--bs-ease); }
@keyframes bs-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) {
  /* A board is tall and narrow, so the stage is bound by its height, not its
     width — giving width back to the controls costs the render nothing and
     keeps two columns of model cards from going cramped. */
  .bs-app { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
  .bs-viewport { height: min(84vh, 940px); }
  .bs-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 */
  .bs-panel {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 18px; align-items: start;
    background: none; border: 0; border-radius: 0;
    box-shadow: none; overflow: visible;
  }
  .bs-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

  .bs-step {
    border: 1px solid var(--bs-line-2);
    border-radius: var(--bs-radius);
    background: var(--bs-surface);
    box-shadow: 0 1px 2px rgba(34,30,26,0.04), 0 18px 40px -30px rgba(34,30,26,0.28);
    overflow: hidden;
  }
  .bs-step[data-step="4"] { border-bottom: 1px solid var(--bs-line-2); }

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

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

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

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

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

.bs-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--bs-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. */
.bs-bar-price {
  flex: 1 1 auto; min-width: 74px;
  display: flex; flex-direction: column; gap: 1px;
}
.bs-bar-price strong {
  font-size: 19px; font-weight: 640; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.bs-bar-price span {
  font-size: 11px; color: var(--bs-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bs-bar .bs-cta { width: auto; margin: 0; flex: none; padding: 12px 22px; }
.bs-bar-reset { flex: none; }
/* armed: says what it is about to do rather than looking like a second CTA */
.bs-bar-reset.is-armed {
  border-color: var(--bs-accent); color: var(--bs-accent-ink); font-weight: 560;
}
/* the price can give up its room before the buttons do */
@media (max-width: 420px) {
  .bs-bar { gap: 8px; padding: 12px 14px; }
  .bs-bar .bs-cta { padding: 12px 16px; }
  .bs-bar-reset { padding: 7px 10px; }
}

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

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

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

.bs-models { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 460px) { .bs-models { grid-template-columns: 1fr; } }

.bs-model {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 11px 13px 12px;
  border: 1px solid var(--bs-line); border-radius: 11px;
  background: transparent;
  transition: border-color 0.18s var(--bs-ease), background 0.18s var(--bs-ease),
              box-shadow 0.18s var(--bs-ease), transform 0.18s var(--bs-ease);
}
.bs-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);
}
.bs-model.is-on {
  border-color: var(--bs-accent); background: var(--bs-tintbg);
  box-shadow: inset 0 0 0 1px var(--bs-accent);
}
.bs-model-fam {
  font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--bs-muted);
}
.bs-model-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; }
.bs-model-blurb {
  font-size: 11.5px; line-height: 1.4; color: var(--bs-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

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

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

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

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

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

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

.bs-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; background: none; padding: 0; text-align: left;
}
.bs-toggle-label { font-size: 13px; color: var(--bs-ink-2); }
.bs-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(--bs-ease);
}
.bs-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(--bs-ease);
}
.bs-toggle.is-on .bs-toggle-track { background: var(--bs-accent); }
.bs-toggle.is-on .bs-toggle-track span { transform: translateX(16px); }
.bs-toggle.is-on .bs-toggle-label { color: var(--bs-ink); }

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

.bs-sw { display: flex; flex-direction: column; gap: 10px; }
.bs-sw-current { display: flex; align-items: center; gap: 9px; min-height: 20px; }
.bs-sw-dot {
  width: 18px; height: 18px; 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);
}
.bs-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;
}
.bs-sw-name { font-size: 13px; font-weight: 540; letter-spacing: -0.005em; }
.bs-sw-name-empty { font-weight: 500; color: var(--bs-muted); }
.bs-sw-cap {
  font-size: 10.5px; font-weight: 620; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--bs-muted);
  flex: none; min-width: 52px;
}
.bs-sw-dot.is-empty {
  box-shadow: inset 0 0 0 1.5px var(--bs-line);
  background: transparent !important;
}

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

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

.bs-sw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 6px;
  max-height: 214px; overflow-y: auto;
  padding: 2px; margin: -2px;
  scrollbar-width: thin;
}
.bs-sw-grid.is-compact { max-height: 128px; }
.bs-sw-grid::-webkit-scrollbar { width: 8px; }
.bs-sw-grid::-webkit-scrollbar-thumb { background: rgba(34,30,26,0.16); border-radius: 8px; }

.bs-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(--bs-ease), box-shadow 0.15s var(--bs-ease);
}
.bs-sw-item:hover { transform: scale(1.14); z-index: 1; }
.bs-sw-item.is-on {
  box-shadow: inset 0 0 0 1px rgba(34,30,26,0.13),
              0 0 0 2px var(--bs-surface), 0 0 0 4px var(--bs-accent);
  transform: scale(1.06);
}
.bs-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;
}
.bs-sw-empty { grid-column: 1 / -1; margin: 4px 0; font-size: 12.5px; color: var(--bs-muted); }

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

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

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

.bs-sum { margin: 0; display: flex; flex-direction: column; gap: 0; }
.bs-sum-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--bs-line-2);
}
.bs-sum-row:last-child { border-bottom: 0; }
.bs-sum dt { font-size: 12px; color: var(--bs-muted); }
.bs-sum dd { margin: 0; font-size: 13px; font-weight: 520; }
.bs-sum-dim { color: var(--bs-muted); font-weight: 400; }
.bs-sum code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.02em;
}
.bs-sum-chip { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.bs-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);
}

.bs-cta {
  width: 100%; margin-top: 4px;
  padding: 13px 20px; border: 0; border-radius: 11px;
  background: var(--bs-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(--bs-ease), transform 0.14s var(--bs-ease);
}
.bs-cta:hover { background: var(--bs-accent-2); transform: translateY(-1px); }
.bs-cta:active { transform: none; }

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

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

.bs-form { display: flex; flex-direction: column; max-height: inherit; overflow-y: auto; padding: 24px; gap: 18px; }
.bs-form-head { position: relative; padding-right: 34px; }
.bs-form-head h2 { margin: 0 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.bs-form-head p { margin: 0; font-size: 13.5px; color: var(--bs-ink-2); }
.bs-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(--bs-muted);
  display: grid; place-items: center;
}
.bs-form-close:hover { background: rgba(34,30,26,0.06); color: var(--bs-ink); }

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

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

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

.bs-form-done { text-align: center; padding: 26px 10px 14px; }
.bs-form-done h2 { margin: 16px 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.bs-form-done p { margin: 0 auto 22px; max-width: 40ch; font-size: 13.5px; color: var(--bs-ink-2); }
.bs-form-done .bs-cta { width: auto; padding-left: 30px; padding-right: 30px; }
.bs-tick {
  width: 46px; height: 46px; margin: 0 auto; border-radius: 50%;
  background: var(--bs-accent); position: relative;
}
.bs-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 ---------------------------------------------------------- */

.bs-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(--bs-line-2);
}
.bs-foot h2 {
  margin: 0 0 7px; font-size: 11px; font-weight: 640;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--bs-muted);
}
.bs-foot p { margin: 0; font-size: 13.5px; color: var(--bs-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 bs-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  *, *::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 .bs-lede { display: none; }

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