/* =========================================================================
   The builder (briefs/builder-redesign). Look: the approved boards, "Builder
   Redesign" - deep blue gradient, the graded stairs photo dissolving into it,
   five isometric plates stacked on the left, a slim settings panel on the right.
   Plates, labels, panel and bar are positioned by public/build.js (it measures
   the box); this file owns every colour, size and motion.
   Inter Tight (headline), Inter (labels, values), JetBrains Mono (caps, chips,
   selector) are self-hosted under /fonts (CSP: font-src 'self').
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/inter-tight-var-latin.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.page--build { background: #03070f; }

.bx {
  --bx-ink: #03070f;
  --bx-text: #eaf1fb;
  --bx-blue: #4f93ff;
  --bx-run: #2f6fe4;
  --bx-amber: #ffb547;
  --bx-dim: #6f86ad;
  --bx-faint: #4a5b7a;
  --bx-line: #1d2f52;
  --bx-ease: var(--m-quint);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* clip, not just hidden: a clipped box cannot be scrolled sideways by focus or scrollIntoView. */
  overflow: clip;
  height: max(640px, calc(100svh - var(--bx-nav, 64px)));
  background: var(--bx-ink);
  color: var(--bx-text);
  font-family: 'Inter', var(--body, system-ui), sans-serif;
}
.bx *, .bx *::before, .bx *::after { box-sizing: border-box; }

/* ---- background: gradient, photo, shade, grain --------------------------- */
.bx__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(1100px 760px at 82% 62%, #0d2148 0%, #071330 38%, #03070f 78%);
}
.bx__photo {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: min(720px, 58%);
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 72% 55%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 85% at 72% 55%, #000 35%, transparent 100%);
  pointer-events: none;
  user-select: none;
}
.bx__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(3, 7, 15, 0.7) 0%, rgba(3, 7, 15, 0.15) 45%, transparent 70%);
  pointer-events: none;
}
.bx__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---- top: brand, segmented control, headline ------------------------------ */
.bx__brand {
  position: absolute;
  z-index: 6;
  left: 56px;
  top: 42px;
  font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 3px;
  color: #5a7bb0;
  text-decoration: none;
}
.bx__seg {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  display: flex;
  border: 1px solid var(--bx-line);
  background: rgba(6, 12, 26, 0.6);
  backdrop-filter: blur(6px);
}
/* ?template=ce50: where the build started from, with the way out. */
.bx__tpl {
  position: absolute;
  z-index: 7;
  left: 56px;
  top: 66px;
  margin: 0;
  font: 500 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: #9ab3d8;
}
.bx__tpl b { color: #e2efff; font-weight: 500; }
/* the gross note under "Started from": its own lines, with the costs one tap away */
.bx__gross { display: block; margin-top: 2px; color: #9ab3d8; }
.bx__grossbtn { display: inline-block; padding: 15px 4px; margin: -15px 0; border: 0; background: none; color: #6fb1ff; font: inherit; letter-spacing: inherit; text-decoration: underline; cursor: pointer; }
/* a library start ("Started from: ... (CE strategy library) · Longs only") is longer: it wraps inside the left column, clear of the market bar and the Import button */
.bx__tpl--src { max-width: 500px; line-height: 1.5; }
.bx__tpl a { display: inline-block; padding: 8px 6px; margin: -8px 0 -8px 2px; color: #6fb1ff; }
.bx__chip {
  padding: 9px 16px;
  border: 0;
  border-right: 1px solid var(--bx-line);
  background: none;
  color: #e2efff;
  font: 500 11px/1.2 'JetBrains Mono', ui-monospace, monospace;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease;
}
.bx__chip:last-of-type { border-right: 0; }
.bx__chip:hover, .bx__chip[aria-expanded='true'] { background: rgba(79, 147, 255, 0.14); }
.bx__headline {
  position: absolute;
  z-index: 5;
  margin: 0;
  font: 700 40px/1.02 'Inter Tight', 'Inter', sans-serif;
  letter-spacing: -1px;
  color: #f4f8ff;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.bx__headline em { font-style: normal; color: var(--bx-blue); }
/* build.js positions the headline and the bar in layout(); until its first pass they sit at their unplaced spots, and showing them there is the jump on the way in. */
.bx:not(.bx--laid) :is(.bx__headline, .bx__foot) { visibility: hidden; }

/* menus under the segmented control */
.bx__menu {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 12;
  min-width: 230px;
  padding: 8px;
  border: 1px solid var(--bx-line);
  background: rgba(3, 8, 18, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bx__menu--markets { width: min(340px, calc(100vw - 32px)); gap: 8px; }
.bx__menuitem {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: #e7ecf5;
  font: 500 13px 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
}
.bx__menuitem:hover, .bx__menuitem--on { background: rgba(79, 147, 255, 0.16); }
.bx__menunote { margin: 6px 8px 4px; font-size: 12px; line-height: 1.45; color: #9ab3d8; }
.bx__menunote a { color: var(--bx-blue); }
.bx__mkt { border: 1px solid var(--bx-line); }
.bx__mkt--on { border-color: rgba(79, 147, 255, 0.6); background: rgba(79, 147, 255, 0.08); }
.bx__mkthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: #e7ecf5;
  font: 600 14px 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
}
.bx__mktsub { font-size: 12px; font-weight: 400; color: #9ab3d8; }
.bx__mktopts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 8px; }
.bx__mktopt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--bx-line);
  background: none;
  color: #e7ecf5;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bx__mktopt--on { border-color: rgba(79, 147, 255, 0.8); background: rgba(79, 147, 255, 0.16); }
.bx__mktsym { font-size: 12px; font-weight: 600; }
.bx__mktfee { font-size: 12px; color: #9ab3d8; }

/* ---- the stack: plates, lead lines, labels ---------------------------------- */
.bx__svg { position: absolute; z-index: 4; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.bx__labels { position: absolute; z-index: 5; inset: 0; pointer-events: none; }

.bx-pl { transition: transform 0.6s var(--bx-ease); cursor: pointer; outline: none; }
.bx-pl polygon, .bx-pl polyline, .bx-pl path, .bx-lead path, .bx-lead circle { transition: fill 0.5s ease, stroke 0.5s ease, opacity 0.5s ease; }
.bx-lead { transition: transform 0.6s var(--bx-ease); }
.bx-glow { opacity: 0; }
.bx-fe { opacity: 0; }

/* empty: faint dashed outline, no sides */
.bx-pl--empty .bx-face { fill: rgba(5, 10, 20, 0.5); stroke: #24365a; stroke-dasharray: 4 4; }
.bx-pl--empty .bx-side { fill: rgba(5, 10, 20, 0); stroke: rgba(5, 10, 20, 0); }
.bx-pl--empty .bx-fe { stroke: #24365a; opacity: 0; }
.bx-pl--empty .bx-ico { stroke: #2c3e60; }
.bx-lead--empty path { stroke: #1c2a46; }
.bx-lead--empty circle { fill: #1c2a46; }
/* filled: dark blue face, blue edge, lit front edge, no glow */
.bx-pl--filled .bx-face { fill: #0f1d38; stroke: #3f74d4; stroke-dasharray: none; }
.bx-pl--filled .bx-sideL { fill: #0a1428; stroke: #1d3768; }
.bx-pl--filled .bx-sideR { fill: #08101f; stroke: #1d3768; }
.bx-pl--filled .bx-fe { stroke: #9ccdff; opacity: 0.6; }
.bx-pl--filled .bx-ico { stroke: #7cb8ff; }
.bx-lead--filled path { stroke: #3f74d4; }
.bx-lead--filled circle { fill: #3f74d4; }
/* editing: bright white face, soft white glow, slides out */
.bx-pl--editing .bx-face { fill: #fff; stroke: #fff; stroke-dasharray: none; }
.bx-pl--editing .bx-sideL { fill: #c9d3e0; stroke: #fff; }
.bx-pl--editing .bx-sideR { fill: #9faabb; stroke: #fff; }
.bx-pl--editing .bx-glow { opacity: 1; }
.bx-pl--editing .bx-fe { stroke: #fff; opacity: 1; }
.bx-pl--editing .bx-ico { stroke: #06080c; }
.bx-lead--editing path { stroke: #fff; }
.bx-lead--editing circle { fill: #fff; }
.bx-pl:focus-visible .bx-face { stroke: var(--bx-blue); stroke-width: 2.4; }

.bx-link { fill: none; stroke: #fff; stroke-dasharray: 2 4; transition: opacity 0.4s ease; }

.bx__lab {
  position: absolute;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  text-shadow: 0 1px 12px rgba(3, 7, 15, 0.9);
  cursor: pointer;
  pointer-events: auto;
  transition: top 0.6s var(--bx-ease);
}
.bx__lab:focus-visible { outline: 2px solid var(--bx-blue); outline-offset: 4px; }
.bx__lab-cap { font: 500 10px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 2.2px; color: #3c4c6a; transition: color 0.4s ease; }
.bx__lab-val { font: 600 14px/1.3 'Inter', sans-serif; overflow-wrap: anywhere; color: #4c5c7a; transition: color 0.4s ease; }
.bx__lab--filled .bx__lab-cap { color: var(--bx-dim); }
.bx__lab--filled .bx__lab-val { color: #dfe9f8; }
.bx__lab--editing .bx__lab-cap, .bx__lab--editing .bx__lab-val { color: #fff; }
.bx__lab--todo .bx__lab-cap::after { content: ' · REQUIRED'; color: var(--bx-amber); letter-spacing: 1.4px; }

/* ---- the settings panel -------------------------------------------------------- */
.bx__panel {
  position: absolute;
  z-index: 9;
  width: 396px;
  max-width: calc(100% - 24px);
  padding: 16px 18px 16px 20px;
  background: rgba(3, 8, 18, 0.82);
  border-left: 1px solid #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #24365a transparent;
  transition: top 0.6s var(--bx-ease), opacity 0.4s ease;
}
.bx__panel[hidden] { display: none; }
.bx__panel--ft { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
.bx__panel--fb { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 26px); mask-image: linear-gradient(to top, transparent 0, #000 26px); }
.bx__panel--ft.bx__panel--fb { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); }
.bx-body { display: flex; flex-direction: column; gap: 11px; }
.bx-body--in { animation: bx-fade 0.45s var(--bx-ease) both; }
@keyframes bx-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bx-hint { font: 500 9.5px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 2px; color: #7d8fae; }
.bx-sec {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid #16233d;
  font: 500 9px/1.2 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 2px;
  color: var(--bx-faint);
}
.bx-opts { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 7px; }
.bx-r { display: flex; align-items: baseline; gap: 10px; }
.bx-k {
  flex: 0 0 96px;
  font: 500 9.5px/1.35 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 1px;
  color: var(--bx-dim);
  transition: color 0.3s ease;
}
.bx-r--todo > .bx-k { color: var(--bx-amber); }
.bx-vals { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 11px; row-gap: 5px; min-width: 0; }
.bx-t {
  padding: 0 0 2px;
  border: 0;
  background: linear-gradient(#fff, #fff) left bottom / 0 1px no-repeat;
  color: #8a9bba;
  font: 500 12px/1.35 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease, background-size 0.35s var(--bx-ease);
}
.bx-opts .bx-t { font-size: 12.5px; }
.bx-t:hover { color: #cdd9ee; }
.bx-t[aria-pressed='true'], .bx-t[aria-checked='true'] { color: #fff; background-size: 100% 1px; }
.bx-t[aria-disabled='true'] { color: #3c4c6a; cursor: default; }
.bx-t:focus-visible, .bx-in:focus-visible, .bx-ta:focus-visible, .bx-more:focus-visible, .bx__cl:focus-visible, .bx__run:focus-visible, .bx__reset:focus-visible, .bx__chip:focus-visible {
  outline: 2px solid var(--bx-blue);
  outline-offset: 2px;
}
.bx-in {
  width: 62px;
  padding: 1px 4px 2px;
  border: 0;
  border-bottom: 1px solid #3f74d4;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: 500 12px/1.3 'Inter', sans-serif;
}
.bx-in--time { width: 68px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
.bx-in--bad { border-bottom-color: var(--bx-amber); }
.bx-unit { font: 500 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 1px; color: var(--bx-dim); }
.bx-ta {
  width: 100%;
  min-height: 68px;
  padding: 8px 10px;
  border: 1px solid var(--bx-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bx-text);
  font: 400 12.5px/1.45 'Inter', sans-serif;
  resize: vertical;
}
.bx-ta::placeholder, .bx-in::placeholder { color: #4a5b7a; }
.bx-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: #9ab3d8; }
.bx-note--warn { color: #ffd9a0; }
.bx-note b { color: #fff; font-weight: 600; }
.bx-more {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px solid #16233d;
  background: none;
  color: #7d8fae;
  font: 500 12px/1.4 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
}
.bx-more span { color: var(--bx-blue); font-size: 14px; }
.bx-conf {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0 2px 9px;
  border-left: 2px solid var(--bx-amber);
}
.bx-conf p { margin: 0; font-size: 11.5px; line-height: 1.45; color: #ffd9a0; }
.bx-preset { font: 500 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.5px; }
.bx-tip { flex: 0 0 100%; margin: 2px 0 0; }
.bx-r--col { flex-direction: column; align-items: stretch; gap: 5px; }
.bx-r--col > .bx-k { flex: none; }
.bx-live { display: flex; flex-direction: column; gap: 9px; }
.bx-live:empty { display: none; }
.bx-rwrap, .bx-grp { display: flex; flex-direction: column; gap: 9px; }
/* Presets for a time field stay on screen (a row that changes height on blur would eat the click that caused it). */
.bx-times { display: flex; flex: 0 0 100%; flex-wrap: wrap; gap: 3px 10px; }

/* ---- bottom bar ------------------------------------------------------------------ */
.bx__foot {
  position: absolute;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bx__sentence {
  margin: 0;
  min-height: 34px;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 12px rgba(3, 7, 15, 0.9);
}
.bx__cl {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s ease;
}
.bx__cl:hover { text-decoration-color: #fff; }
.bx__cl--open { text-decoration-color: var(--bx-blue); }
.bx__dim { color: #9ab3d8; }
.bx__actions { display: flex; gap: 8px; }
.bx__reset {
  height: 40px;
  padding: 0 14px;
  border: 1px solid #1d2a44;
  background: transparent;
  color: #7d8fae;
  font: 500 14px 'Inter', sans-serif;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.bx__reset:hover { color: #fff; border-color: #3f74d4; }
.bx__run {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  background: #0d1526;
  color: #6f7f9c;
  font: 600 13px/1.2 'Inter', sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: default;
  transition: background 0.5s ease, color 0.5s ease, transform 200ms var(--m-quint), box-shadow 200ms var(--m-quint);
}
/* Depth hover/press (brief A section 4): only once the button is live. */
@media (hover: hover) { .bx__run--ready:hover, a.bx__run:hover { transform: translateY(-2px); } }
.bx__run--ready:active, a.bx__run:active { transform: scale(0.97); transition-duration: 70ms; }
.bx__run--ready { background: var(--bx-run); color: #fff; cursor: pointer; animation: bx-ring 1.4s ease-out 1; }
a.bx__run { cursor: pointer; }
.bx__run--pay { width: 100%; height: 48px; flex: none; background: var(--bx-run); color: #fff; cursor: pointer; animation: none; }
/* Ready to run: the foot's summary card (build.js showCard). The sentence it replaces stays in the DOM for the form's copy of it. */
.bx__foot--card .bx__sentence { display: none; }
.bx__card { padding: 14px 16px; border-radius: 14px; text-shadow: none; }
.bx__card .summary__rows { margin: 0; padding: 0; border: 0; gap: 8px; font-size: 13px; line-height: 1.45; }
.bx__card .summary__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.bx__card .summary__row dt { color: #9ab3d8; }
.bx__card .summary__row dd { margin: 0; text-align: left; color: #fff; overflow-wrap: anywhere; }
.bx__alt { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(126, 164, 255, 0.14); font-size: 12.5px; color: #9ab3d8; text-decoration: underline; text-decoration-color: rgba(154, 179, 216, 0.35); text-underline-offset: 3px; }
.bx__alt:hover { color: #fff; }
/* Saved row: under the sentence while building, the card's last line once the card shows (build.js moves it). */
.bx__saved { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 1.4; color: #9ab3d8; text-shadow: 0 1px 12px rgba(3, 7, 15, 0.9); }
.bx__saved[hidden] { display: none; }
.bx__saved-btns { display: flex; gap: 14px; flex: none; }
.bx__saved-btn { padding: 0; border: 0; background: none; color: #7ea4ff; font: inherit; cursor: pointer; }
.bx__saved-btn:hover { color: #fff; }
.bx__saved-btn[hidden] { display: none; }
.bx__saved-btn:focus-visible { outline: 2px solid #7ea4ff; outline-offset: 2px; }
.bx__saved-txt { min-width: 0; }
/* The card's last line: saved row left, Standard link right, one line (it wraps only below 360px). On a phone "to your account" is dropped to make room. */
.bx__cardfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 8px; padding-top: 8px; line-height: 1.3; border-top: 1px solid rgba(126, 164, 255, 0.14); }
.bx__cardfoot .bx__alt { margin: 0 0 0 auto; padding: 0; border: 0; font-size: 12px; white-space: nowrap; flex: none; }
.bx__cardfoot .bx__saved { text-shadow: none; white-space: nowrap; }
/* A phone from 380px up keeps both on one line, so the longer words go ("to your account", "versions"); on a desktop the card is as narrow, so there the line wraps instead of clipping. */
/* While "Start over" asks, the row needs the whole line. */
.bx__cardfoot:has([data-saved-ask]:not([hidden])) .bx__alt { display: none; }
@media (max-width: 640px) { .bx__acct, .bx__alt-v { display: none; } }
@media (min-width: 380px) and (max-width: 640px) { .bx__cardfoot { flex-wrap: nowrap; } }
.bx__alt[hidden] { display: none; }
.bx__notice { margin: 0; font-size: 11.5px; line-height: 1.45; color: #ffd9a0; text-shadow: 0 1px 12px rgba(3, 7, 15, 0.9); }

/* ---- the run sheet additions ---------------------------------------------------------- */
.bld__math { margin: 0; font-size: var(--t-xs, 13px); line-height: 1.5; color: #cfe0ff; }
.bld__math--warn { color: #ffd9a0; }
.bld__costtoggle { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs, 13px); }
.bld__previews { display: flex; flex-wrap: wrap; gap: 10px; }
.bld__previews:empty { display: none; }
.bld__preview { display: flex; flex-direction: column; gap: 4px; width: 112px; font-size: 12px; color: #9ab3d8; overflow-wrap: anywhere; }
.bld__preview img { width: 112px; height: 80px; object-fit: cover; border: 1px solid var(--bx-line); }

/* ---- phone: accordion under the plate, full-width bar ------------------------------------ */
@media (max-width: 640px) {
  /* Fallback = what build.js layout() computes for a normal phone (viewport minus the 69px bar, 640 at least), so the box does not jump when the script sets --bx-h. */
  .bx { height: var(--bx-h, max(640px, calc(100svh - var(--bx-nav, 69px)))); min-height: 0; }
  .bx__photo { right: -70px; top: auto; bottom: 0; width: 340px; height: 470px; opacity: 0.8; object-position: center; -webkit-mask-image: radial-gradient(ellipse 65% 70% at 55% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 65% 70% at 55% 50%, #000 30%, transparent 100%); }
  .bx__bg { background: radial-gradient(520px 700px at 90% 78%, #0d2148 0%, #071330 40%, #03070f 80%); }
  .bx__shade { display: none; }
  .bx__brand { left: 20px; top: 20px; }
  .bx__tpl { left: 20px; top: 74px; }
  .bx__tpl--src { right: 20px; max-width: none; font-size: 10px; line-height: 1.4; }
  .bx__seg { left: 20px; right: 20px; top: 42px; transform: none; justify-content: space-between; }
  .bx__chip { flex: 1; padding: 8px 0; text-align: center; font-size: 10.5px; }
  .bx__headline { font-size: 27px; }
  .bx__lab { width: 230px; }
  .bx__lab-cap { font-size: 9px; }
  .bx__lab-val { font-size: 13px; }
  .bx__panel { left: 20px; width: calc(100% - 40px); max-width: none; padding: 12px 12px 12px 14px; overflow: visible; }
  .bx-body { gap: 9px; }
  .bx-k { flex-basis: 82px; }
  .bx-t, .bx-opts .bx-t { font-size: 11.5px; }
  .bx-note { font-size: 11px; }
  .bx__foot { left: 20px; right: 20px; }
  .bx__sentence { font-size: 11px; }
  .bx__menu { left: 0 !important; right: 0; min-width: 0; width: auto; }
}
/* Phones and small tablets: the stairs photo is a viewport-sized fixed layer behind the panel, not a box that scrolls with it
   (background-attachment: fixed is ignored on iOS). clip-path keeps it inside .bx; the shade and .bx::after fade every edge to ink. */
@media (max-width: 900px) {
  .bx { clip-path: inset(0); }
  /* The site's fixed ground is a blue-to-ink gradient; under the builder it is plain ink, so .bx meets the page (nav, footer) with no seam. */
  body:has(.page--build) .ce-ground { background: #03070f; }
  /* Both fixed layers are sized to the large viewport (100lvh), not the dynamic one, so the address bar collapsing on phone Chrome never resizes or re-crops them. */
  .bx__photo { position: fixed; top: 0; left: 0; right: auto; bottom: auto; width: 100vw; height: 100vh; height: 100lvh; opacity: 0.85; object-fit: cover; object-position: center top; will-change: transform; transform: translateZ(0); -webkit-mask-image: radial-gradient(ellipse 90% 60% at 72% 68%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 90% 60% at 72% 68%, #000 25%, transparent 100%); }
  .bx__shade { display: block; position: fixed; top: 0; left: 0; right: auto; bottom: auto; width: 100vw; height: 100vh; height: 100lvh; will-change: transform; transform: translateZ(0); background: linear-gradient(180deg, var(--bx-ink) 0%, transparent 24%, transparent 58%, var(--bx-ink) 100%), linear-gradient(90deg, rgba(3, 7, 15, 0.6) 0%, transparent 65%); }
  .bx::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, var(--bx-ink) 0, transparent 56px, transparent calc(100% - 180px), var(--bx-ink) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .bx-pl, .bx-lead, .bx__lab, .bx__panel, .bx-t, .bx__run { transition: none !important; }
  .bx-body, .bx__run--ready { animation: none !important; }
  .bx__run--ready:hover, a.bx__run:hover, .bx__run--ready:active, a.bx__run:active { transform: none; }
}
/* Back from paying $19 with no strategy yet (build.tsx paidCard): a closable glass card above the sentence and Run button, on the right. */
.bx__paid {
  position: absolute;
  z-index: 8;
  right: 44px;
  bottom: 150px;
  width: 340px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 12px 14px 16px;
  border-radius: 14px;
  text-shadow: none;
}
.bx__paid-title { margin: 0 0 4px; font: 600 14px/1.3 'Inter', sans-serif; color: #fff; }
.bx__paid-body { margin: 0; font-size: 13px; line-height: 1.45; color: #cfdcf2; }
.bx__paid-x { width: 28px; height: 28px; margin: -4px 0 0; padding: 0; border: 0; background: none; color: #9ab3d8; font-size: 20px; line-height: 1; cursor: pointer; }
.bx__paid-x:hover { color: #fff; }
/* Once all five layers are set the ready card grows up from the foot into this spot: the notice has done its job. */
.bx:has(.bx__foot--card) .bx__paid { display: none; }
@media (max-width: 900px) {
  .bx__paid { left: 20px; right: 20px; width: auto; bottom: 118px; }
}
/* Start-here pulse on the Bias plate (2026-10-20). Only while every layer is empty; gone after the first click/focus on Bias. */
.bx-ring { fill: none; stroke: #2F7BFF; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.bx--start .bx-ring { animation: bx-ring 2.7s var(--m-quint) infinite; }
.bx--start .bx-ring:nth-child(2) { animation-delay: .9s; }
.bx--start .bx-ring:nth-child(3) { animation-delay: 1.8s; }
@keyframes bx-ring { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.3); opacity: 0; } }
.bx--start .bx-pl[data-layer="bias"] .bx-face { stroke: #2F7BFF; stroke-dasharray: none; stroke-width: 1.6; fill: rgba(47,123,255,.07); }
.bx--start .bx-pl[data-layer="bias"] .bx-ico { stroke: #4FA3FF; }
.bx--start .bx-lead--start path { stroke: #2F7BFF; }
.bx--start .bx-lead--start circle { fill: #2F7BFF; }
.bx--start .bx__lab[data-layer="bias"] .bx__lab-cap { color: #4FA3FF; }
.bx--start .bx__lab[data-layer="bias"] .bx__lab-val { color: #c9d6ee; }
@media (prefers-reduced-motion: reduce) {
  .bx--start .bx-ring { animation: none; }
  .bx--start .bx-ring:first-child { opacity: .55; transform: scale(1.1); }
}

/* Hover preview: pointing at a layer (plate or its label) lights the plate white, the same look as an open layer. Mouse only. */
.bx[data-hov="bias"] .bx-pl[data-layer="bias"] .bx-face, .bx[data-hov="filters"] .bx-pl[data-layer="filters"] .bx-face, .bx[data-hov="entry"] .bx-pl[data-layer="entry"] .bx-face,
.bx[data-hov="stop"] .bx-pl[data-layer="stop"] .bx-face, .bx[data-hov="target"] .bx-pl[data-layer="target"] .bx-face { fill: #fff; stroke: #fff; stroke-dasharray: none; }
.bx[data-hov="bias"] .bx-pl[data-layer="bias"] .bx-sideL, .bx[data-hov="filters"] .bx-pl[data-layer="filters"] .bx-sideL, .bx[data-hov="entry"] .bx-pl[data-layer="entry"] .bx-sideL,
.bx[data-hov="stop"] .bx-pl[data-layer="stop"] .bx-sideL, .bx[data-hov="target"] .bx-pl[data-layer="target"] .bx-sideL { fill: #c9d3e0; stroke: #fff; }
.bx[data-hov="bias"] .bx-pl[data-layer="bias"] .bx-sideR, .bx[data-hov="filters"] .bx-pl[data-layer="filters"] .bx-sideR, .bx[data-hov="entry"] .bx-pl[data-layer="entry"] .bx-sideR,
.bx[data-hov="stop"] .bx-pl[data-layer="stop"] .bx-sideR, .bx[data-hov="target"] .bx-pl[data-layer="target"] .bx-sideR { fill: #9faabb; stroke: #fff; }
.bx[data-hov="bias"] .bx-pl[data-layer="bias"] .bx-ico, .bx[data-hov="filters"] .bx-pl[data-layer="filters"] .bx-ico, .bx[data-hov="entry"] .bx-pl[data-layer="entry"] .bx-ico,
.bx[data-hov="stop"] .bx-pl[data-layer="stop"] .bx-ico, .bx[data-hov="target"] .bx-pl[data-layer="target"] .bx-ico { stroke: #06080c; }
.bx[data-hov="bias"] .bx__lab[data-layer="bias"] :is(.bx__lab-cap, .bx__lab-val), .bx[data-hov="filters"] .bx__lab[data-layer="filters"] :is(.bx__lab-cap, .bx__lab-val),
.bx[data-hov="entry"] .bx__lab[data-layer="entry"] :is(.bx__lab-cap, .bx__lab-val), .bx[data-hov="stop"] .bx__lab[data-layer="stop"] :is(.bx__lab-cap, .bx__lab-val),
.bx[data-hov="target"] .bx__lab[data-layer="target"] :is(.bx__lab-cap, .bx__lab-val) { color: #fff; }


/* Import chart from Lab (mock 2026-10-20). Button under the segmented control; picker in the empty space between the layers and the headline. */
.bx-imp { position: absolute; z-index: 8; left: 50%; top: 76px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--bx-blue, #2F7BFF); background: rgba(47,123,255,.14); color: #e2efff;
  font: 500 11px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .4px; white-space: nowrap; cursor: pointer; }
.bx-imp:hover, .bx-imp[aria-expanded="true"] { background: rgba(47,123,255,.28); }
.bx-imp:focus-visible { outline: 2px solid #4FA3FF; outline-offset: 3px; }
.bx-imp svg { width: 13px; height: 13px; stroke: #4FA3FF; fill: none; stroke-width: 1.8; }
.bx-imp__s { display: none; }
.bx-imp__n { background: #2F7BFF; color: #fff; border-radius: 9px; padding: 1px 6px; font-size: 10px; }
.bx-imp__n[hidden] { display: none; }

.bx-got { position: absolute; z-index: 8; display: flex; flex-direction: column; gap: 6px; }
.bx-got__h { font: 500 9.5px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 2px; color: #7d8fae; text-transform: uppercase; margin: 0 0 2px; }
.bx-got[hidden] { display: none; }
.bx-got__c { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border: 1px solid var(--bx-line, #1d2f52); background: rgba(6,12,26,.75); font: 500 10px/1.2 'JetBrains Mono', ui-monospace, monospace; color: #c9d6ee; }
.bx-got__c img { width: 96px; height: 43px; display: block; background: #060d1c; }
.bx-got__c span { flex: 1; min-width: 0; }
.bx-got__x { border: 0; background: none; color: #6f86ad; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.bx-got__x:hover { color: #fff; }

.bx-pick { position: absolute; z-index: 9; padding: 16px 18px 14px 20px; background: rgba(3,8,18,.86); border-left: 1px solid #fff; backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 10px; animation: bx-fade .45s var(--bx-ease, ease) both; }
.bx-pick[hidden] { display: none; }
.bx-pick__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bx-pick__t { font: 600 15px/1.2 'Inter', sans-serif; color: #fff; margin: 0; }
.bx-pick__c { font: 500 9.5px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 2px; color: #7d8fae; text-transform: uppercase; }
.bx-pick__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.bx-pick__row { display: grid; grid-template-columns: 18px 96px minmax(0,1fr); gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--bx-line, #1d2f52); cursor: pointer; }
.bx-pick__row:hover { border-color: #2a4677; }
.bx-pick__row:has(input:checked) { border-color: #2F7BFF; background: rgba(47,123,255,.1); }
.bx-pick__row input { accent-color: #2F7BFF; width: 15px; height: 15px; margin: 0; }
.bx-pick__row img { width: 96px; height: 40px; display: block; background: #060d1c; }
.bx-pick__what { min-width: 0; font: 500 12px/1.35 'Inter', sans-serif; color: #dfe9f8; }
.bx-pick__meta { display: block; font: 500 10px/1.4 'JetBrains Mono', ui-monospace, monospace; color: #7d8fae; letter-spacing: .3px; }
.bx-pick__note { display: block; color: #9fb0cc; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-pick__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bx-pick__go { padding: 9px 14px; border: 0; background: #2F7BFF; color: #fff; font: 600 13px 'Inter', sans-serif; cursor: pointer; }
.bx-pick__go:disabled { background: #16243f; color: #6f86ad; cursor: default; }
.bx-pick__cancel { border: 0; background: none; color: #a3b0c6; font: 500 13px 'Inter', sans-serif; cursor: pointer; }
.bx-pick__msg { margin: 0; font: 500 12.5px/1.45 'Inter', sans-serif; color: #9fb0cc; }
.bx-pick__msg a { color: #4FA3FF; }
.bx-pick__lab { margin-left: auto; color: #4FA3FF; font: 500 12px 'Inter', sans-serif; text-decoration: none; }
.bx-pick__lab:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .bx-imp { left: auto; right: 20px; top: 14px; transform: none; padding: 5px 7px; gap: 6px; font-size: 9.5px; letter-spacing: 0; }
  .bx-imp__l { display: none; }
  .bx-imp__s { display: inline; }
  .bx-got { display: none; }
  .bx-pick { left: 12px !important; right: 12px; width: auto !important; padding: 12px 12px 10px 14px; gap: 8px; }
  .bx-pick__row { grid-template-columns: 18px 80px minmax(0,1fr); }
  .bx-pick__row img { width: 80px; height: 33px; }
}

/* "+ New strategy" asks first when the strategy on screen has picks (public/build.js askNew). */
.bx-ask { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(3, 7, 15, 0.72); }
.bx-ask__card { width: min(420px, 100%); padding: 20px 20px 18px; border: 1px solid #24365a; background: #07101f; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.bx-ask__t { margin: 0 0 8px; color: var(--bx-text); font: 600 17px/1.3 'Inter', sans-serif; }
.bx-ask__d { margin: 0 0 16px; color: #9ab3d8; font: 400 14px/1.5 'Inter', sans-serif; }
.bx-ask__row { display: flex; flex-wrap: wrap; gap: 10px; }
.bx-ask__row button { min-height: 40px; padding: 0 16px; border: 1px solid #24365a; background: transparent; color: #cdd9ee; font: 500 14px 'Inter', sans-serif; cursor: pointer; }
.bx-ask__row .bx-ask__yes { border-color: var(--bx-run); background: var(--bx-run); color: #fff; }
.bx-ask__row button:focus-visible { outline: 2px solid var(--bx-blue); outline-offset: 2px; }

/* Touch: each chip's tap target reaches past its text (the unit, the gaps) and a unit and a row name are tappable too; nothing moves. */
.bx-unit--tap, .bx-k { cursor: pointer; }
@media (pointer: coarse) {
  .bx-t { padding: 5px 6px 7px; margin: -5px -6px; background-position: left bottom 5px; }
  .bx-unit--tap { padding: 5px 4px; margin: -5px -4px; }
}