/* Build tab: the layout builder (Screen A), the bet slip and the bet list.
   Modernist site language: ink rules, square corners, Archivo, red accent.
   The felt alone keeps real table colours. */

/* — panel header — */
.lab-build { padding: 20px 20px 16px; }
.lab-build-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding-bottom: 14px; border-bottom: 2px solid var(--color-text); margin-bottom: 14px; }
.lab-build-title { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
.lab-build-head-r { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.lab-badge {
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px 9px;
  border: 1px solid var(--color-text); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  font-feature-settings: 'tnum' 1;
}

/* — segmented controls (wheel, tools) — */
.lab-bseg { display: inline-flex; border: 1px solid var(--color-text); margin: 0; padding: 0; min-width: 0; background: #fff; }
.lab-bseg-opt {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--color-text); background: transparent; border: 0; white-space: nowrap;
}
.lab-bseg-opt + .lab-bseg-opt { border-left: 1px solid var(--color-text); }
.lab-bseg-opt[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }
.lab-bseg-opt:not([aria-pressed="true"]):not([aria-disabled="true"]):hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.lab-bseg-opt[aria-disabled="true"] { cursor: not-allowed; color: var(--lab-muted); }
.lab-bseg-opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; z-index: 1; }

/* — chip rack — */
.lab-rack { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lab-rack-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lab-muted); }
.lab-rack-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lab-rack-chip {
  appearance: none; display: inline-grid; place-items: center; width: 50px; height: 50px; padding: 0; cursor: grab;
  background: transparent; border: 2px solid transparent; border-radius: 50%; touch-action: none;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.lab-rack-chip:hover:not(:disabled) { transform: translateY(-2px); }
.lab-rack-chip[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px #fff inset; }
.lab-rack-chip:focus-visible { outline: 2px solid var(--color-text); outline-offset: 1px; }
.lab-rack-chip:disabled { cursor: not-allowed; opacity: 0.32; filter: grayscale(1); }
.lab-rack-chip svg { display: block; pointer-events: none; }
.lab-rack-otherwrap { display: inline-flex; }
.lab-rack-other { width: 86px; min-height: 40px; text-align: center; font-feature-settings: 'tnum' 1; }
.lab-rack-other.is-active { border: 2px solid var(--color-accent); }
.lab-rack-help { margin: 6px 0 0; }
.lab-drag-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35)); }

/* — chips (SVG) — */
.lab-chip .lab-chip-disc { fill: var(--chip-fill); }
.lab-chip .lab-chip-edge { fill: none; stroke: var(--chip-edge); }
.lab-chip .lab-chip-face { fill: var(--chip-fill); stroke: var(--chip-edge); stroke-width: 0.9; stroke-opacity: 0.75; }
.lab-chip .lab-chip-text { fill: var(--chip-text); font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; font-feature-settings: 'tnum' 1; }
.lab-chip--t0 { --chip-fill: #f6f4ef; --chip-edge: #201e1d; --chip-text: #201e1d; }
.lab-chip--t1 { --chip-fill: #d8341a; --chip-edge: #ffffff; --chip-text: #ffffff; }
.lab-chip--t2 { --chip-fill: #201e1d; --chip-edge: #f3f2f2; --chip-text: #ffffff; }
.lab-chip--t3 { --chip-fill: #2b5c8f; --chip-edge: #ffffff; --chip-text: #ffffff; }
.lab-chip--t4 { --chip-fill: #8f5c06; --chip-edge: #fff7e3; --chip-text: #ffffff; }  /* white on it 5.7:1 */
.lab-chip--t5 { --chip-fill: #5b3b8c; --chip-edge: #ffffff; --chip-text: #ffffff; }
.lab-chip .lab-chip-disc { stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.8; }

/* — modes and tools — */
.lab-modes-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.lab-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-mode {
  appearance: none; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  min-height: 34px; padding: 5px 11px; color: var(--color-text); background: #fff; border: 1px solid var(--lab-line-strong);
}
.lab-mode:hover { border-color: var(--color-text); }
.lab-mode[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.lab-mode:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lab-tools .lab-bseg-opt { min-height: 34px; padding: 5px 12px; }
[data-tool="remove"] .lab-tools [data-tool="remove"][aria-pressed="true"] { background: var(--color-accent-700); }
.lab-build-hint { font-size: 13px; line-height: 19px; color: var(--lab-muted); margin: 10px 0 10px; min-height: 19px; }
[data-tool="remove"] .lab-build-hint { color: var(--lab-loss); font-weight: 600; }

/* — felt — */
.lab-felt-frame { position: relative; }
.lab-felt-scroll {
  overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  background: var(--felt-edge); border: 1px solid var(--color-text); padding: 8px;
}
.lab-felt-scroll:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lab-felt-stage { display: flex; justify-content: center; min-width: min-content; }
.lab-felt-svg { display: block; flex: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.lab-felt-bg { fill: var(--felt); }
.lab-felt-outline { fill: none; stroke: var(--felt-line); stroke-width: 2; }
.lab-felt-street { stroke: var(--felt-line); stroke-width: 2; }
.lab-cell rect { stroke: var(--felt-line); stroke-width: 1.2; }
.lab-cell--red rect { fill: var(--pocket-red); }
.lab-cell--black rect { fill: var(--pocket-black); }
.lab-cell--green rect { fill: var(--pocket-green); }
.lab-cell text { fill: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 19px; font-feature-settings: 'tnum' 1; pointer-events: none; }
.lab-box rect { fill: transparent; stroke: var(--felt-line); stroke-width: 1.2; }
.lab-box--red rect { fill: var(--pocket-red); }
.lab-box--black rect { fill: var(--pocket-black); }
.lab-box-text { fill: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.lab-box-text--sm { font-size: 12px; }
.lab-box-text--col { font-size: 14px; letter-spacing: 0.02em; }
.lab-hl-dim { fill: rgba(6, 22, 14, 0.5); pointer-events: none; }
.lab-felt-hl .lab-cell { pointer-events: none; }
.lab-hl-cell { fill: rgba(255, 255, 255, 0.12); stroke: #fff; stroke-width: 3; pointer-events: none; }
.lab-hl-target { fill: none; stroke: #ffd24a; stroke-width: 3; stroke-dasharray: 5 3; pointer-events: none; }
.lab-felt-hit { fill: transparent; cursor: copy; }
[data-tool="remove"] .lab-felt-hit { cursor: not-allowed; }
[data-tool="edit"] .lab-felt-hit { cursor: pointer; }
.lab-felt-chips { pointer-events: none; }
.lab-felt-chips .lab-chip { outline: none; }
.lab-chip-shadow { fill: rgba(0, 0, 0, 0.38); }
.lab-chip-ring { fill: none; stroke: transparent; stroke-width: 2.5; }
.lab-felt-chips .lab-chip:focus-visible .lab-chip-ring, .lab-felt-chips .lab-chip:focus .lab-chip-ring { stroke: #ffd24a; }
.lab-felt-ghost { opacity: 0.6; pointer-events: none; }
[data-tool="remove"] .lab-felt-ghost, [data-tool="edit"] .lab-felt-ghost { display: none; }

/* explicit-mode halos: easy, generous targets */
.lab-halo { fill: rgba(255, 255, 255, 0.16); stroke: rgba(255, 255, 255, 0.92); stroke-width: 1.6; pointer-events: none; }
.lab-halo--cell { fill: rgba(255, 255, 255, 0.08); stroke-dasharray: 4 3; stroke-width: 1.2; }
.lab-halo--box { fill: rgba(255, 255, 255, 0.08); stroke-dasharray: 5 4; }
.lab-halo.is-hover { fill: rgba(255, 210, 74, 0.5); stroke: #ffd24a; stroke-width: 2.4; stroke-dasharray: none; }

.lab-felt-tip {
  position: absolute; z-index: 6; max-width: min(320px, calc(100% - 8px)); pointer-events: none;
  background: var(--color-text); color: var(--color-bg); font-size: 12.5px; line-height: 17px; font-weight: 600;
  padding: 6px 9px; box-shadow: var(--shadow-md);
}

/* — board bar, zoom, undo — */
.lab-board-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 10px; }
.lab-zoom { display: inline-flex; align-items: center; gap: 4px; }
.lab-zoom-val { min-width: 46px; text-align: center; font-size: 13px; font-weight: 700; }
.lab-bicon {
  appearance: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
  font: inherit; font-size: 18px; font-weight: 700; line-height: 1; color: var(--color-text); background: #fff; border: 1px solid var(--lab-line-strong);
}
.lab-bicon:hover:not(:disabled) { border-color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, #fff); }
.lab-bicon:disabled { opacity: 0.4; cursor: not-allowed; }
.lab-bicon:focus-visible, .lab-textbtn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lab-textbtn { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; min-height: 34px; padding: 0 6px; }
.lab-zoom .lab-textbtn { min-width: 44px; padding: 0 8px; }
.lab-board-tip { flex: 1 1 200px; margin: 0; font-size: 12.5px; color: var(--lab-muted); text-align: center; }
.lab-undo .btn { min-width: 64px; }
.lab-tip-coarse { display: none; }
.lab-board-bar:not([data-pans]) .lab-tip-swipe { display: none; }
@media (pointer: coarse), (max-width: 560px) {
  .lab-tip-fine { display: none; }
  .lab-tip-coarse { display: inline; }
}

/* — messages and toolbar — */
.lab-build-msg { margin: 10px 0 0; }
.lab-build-msg ul { margin: 0; padding-left: 18px; }
.lab-build-msg ul li:first-child { list-style: none; margin-left: -18px; }
.lab-build-info { font-size: 13px; line-height: 19px; color: var(--color-text); border-left: 3px solid var(--color-text); padding: 4px 0 4px 10px; }
.lab-build-info:empty, .lab-build-msg:empty { display: none; }
.lab-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lab-line); }

/* — saved layouts — */
.lab-saved { margin-top: 14px; border: 1px solid var(--color-text); background: #fff; padding: 14px; }
.lab-saved-title { font-size: 16px; margin: 0 0 2px; }
.lab-saved-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-top: 10px; }
.lab-saved-form .lab-field { flex: 1 1 200px; margin: 0; }
.lab-saved-list { list-style: none; margin: 12px 0 0; padding: 0; }
.lab-saved-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--lab-line); }
.lab-saved-main { display: flex; flex-direction: column; min-width: 0; }
.lab-saved-name { font-weight: 700; overflow-wrap: anywhere; }
.lab-saved-meta, .lab-saved-empty { font-size: 12.5px; color: var(--lab-muted); }
.lab-saved-empty { padding: 8px 0; }

/* — popovers on the felt — */
.lab-pop {
  position: absolute; z-index: 8; width: min(300px, calc(100% - 12px)); background: var(--color-bg); color: var(--color-text);
  border: 2px solid var(--color-text); box-shadow: var(--shadow-lg); padding: 14px 14px 12px;
}
.lab-pop-x { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--color-text); }
.lab-pop-x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.lab-pop-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lab-muted); margin: 0 36px 4px 0; }
.lab-pop-title { font-size: 18px; line-height: 1.2; margin: 0 36px 4px 0; }
.lab-pop-meta { font-size: 12.5px; line-height: 18px; color: var(--lab-muted); margin: 0 0 10px; }
.lab-pop-total { font-size: 13px; margin: 6px 0 10px; }
.lab-pop-actions .btn { flex: 1 1 auto; }
.lab-pop-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lab-line); }
.lab-pop-del { color: var(--lab-loss); padding-inline: 0; text-decoration: underline; text-underline-offset: 3px; }
.lab-pop-del:disabled { opacity: 0.4; }
.lab-stepper { display: flex; align-items: stretch; }
.lab-stepper .lab-bicon { flex: none; height: auto; min-height: 40px; width: 40px; }
.lab-stepper .input { flex: 1 1 auto; min-width: 0; text-align: center; border-left: 0; border-right: 0; font-feature-settings: 'tnum' 1; }
.lab-choose { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lab-choose-btn {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 44px;
  padding: 7px 10px; cursor: pointer; text-align: left; font: inherit; color: var(--color-text);
  background: #fff; border: 1px solid var(--lab-line-strong);
}
.lab-choose-btn:hover, .lab-choose-btn:focus-visible { border-color: var(--color-text); background: color-mix(in srgb, var(--color-text) 5%, #fff); outline: none; box-shadow: inset 3px 0 0 var(--color-accent); }
.lab-choose-name { font-weight: 700; font-size: 14.5px; }
.lab-choose-meta { font-size: 12px; color: var(--lab-muted); }

/* — KPI strip / empty state — */
.lab-build-kpis { margin-top: 16px; }
.lab-build-kpis-cap { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--lab-muted); margin: 0 0 8px; }
.lab-exact { display: inline-block; padding: 2px 7px; background: var(--color-text); color: var(--color-bg); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.lab-build-kpis .lab-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--color-text); }
.lab-build-kpis .lab-kpi { border: 0; border-right: 1px solid var(--lab-line); background: var(--lab-panel); }
.lab-build-kpis .lab-kpi:last-child { border-right: 0; }
.lab-build-empty {
  display: flex; align-items: center; gap: 22px; padding: 22px 24px;
  border: 2px dashed var(--lab-line-strong); background: var(--lab-panel);
}
.lab-build-empty-art { display: flex; flex: none; }
.lab-build-empty-art svg + svg { margin-left: -14px; }
.lab-build-empty-title { font-size: 19px; line-height: 1.25; margin: 0 0 6px; }
.lab-build-empty-body { font-size: 14px; line-height: 21px; color: var(--lab-muted); margin: 0 0 12px; max-width: 58ch; }
.lab-build-jump { display: none; }
.lab-build-steps { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 4px 0 12px; padding: 0; }
.lab-build-step { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.lab-build-step-n {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  background: var(--color-text); color: var(--color-bg); font-size: 13px; font-feature-settings: 'tnum' 1;
}
.lab-build-step:last-child .lab-build-step-n { background: var(--color-accent-700); }

/* — board view: Table | Wheel — */
.lab-build-wheelview:not([hidden]) { display: block; margin-top: 14px; }
.lab-wheel-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  margin: 0 0 12px; padding: 8px 0 8px 12px; border-left: 3px solid var(--color-text);
}
.lab-wheel-note-text { flex: 1 1 260px; margin: 0; font-size: 13.5px; line-height: 20px; }
.lab-board-wheel { min-height: 120px; }

/* — guided flow: first-chip nudge and the next-step bar — */
.lab-nudge { margin: 10px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.lab-nudge[hidden] { display: none; }
.lab-nudge .lab-textbtn { font-size: 14px; padding: 0 2px; color: var(--color-accent-700); }
/* The bar itself is the shared .lab-nextstep (survival-lab.css); only its hidden state here. */
.lab-next[hidden], .lab-next-sub[hidden] { display: none; }
.lab-next-sub { font-feature-settings: 'tnum' 1; }
/* Chips go on the table, so the "add more bets" nudge has nothing to say on the wheel view. */
#lab-panel-build[data-view="wheel"] .lab-nudge { display: none; }

/* — bet list — */
.lab-betlist { margin-top: 16px; border: 1px solid var(--color-text); background: var(--lab-panel); }
.lab-betlist > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; list-style: none;
  padding: 14px 18px; min-height: 48px;
}
.lab-betlist > summary::-webkit-details-marker { display: none; }
.lab-betlist > summary::before { content: "+"; font-family: var(--font-heading); font-weight: 800; font-size: 18px; width: 14px; }
.lab-betlist[open] > summary::before { content: "−"; }
.lab-betlist > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; }
.lab-betlist-summary { font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.lab-betlist-hint { font-size: 12.5px; color: var(--lab-muted); }
.lab-betlist-body { padding: 0 18px 16px; border-top: 1px solid var(--lab-line); }
.lab-betlist-search { margin: 14px 0 4px; max-width: 420px; }
.lab-betlist-count { margin: 0 0 8px; }
.lab-betlist-groups { max-height: 560px; overflow: auto; border-top: 2px solid var(--color-text); }
.lab-betlist-head { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 0 6px; background: var(--lab-panel); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--lab-line-strong); }
.lab-betlist-odds { font-weight: 500; color: var(--lab-muted); text-transform: none; letter-spacing: 0; }
.lab-betlist-rows { list-style: none; margin: 0 0 10px; padding: 0; }
.lab-betlist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 6px 4px; border-bottom: 1px solid var(--lab-line); }
.lab-betlist-row:hover, .lab-betlist-row:focus-within { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.lab-betlist-row.is-placed { box-shadow: inset 3px 0 0 var(--color-accent); }
.lab-betlist-main { display: flex; flex-direction: column; min-width: 0; }
.lab-betlist-name { appearance: none; align-self: flex-start; background: none; border: 0; padding: 2px 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; color: var(--color-text); text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.lab-betlist-name:hover { text-decoration-color: currentColor; }
.lab-betlist-name:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lab-betlist-meta { font-size: 12px; line-height: 17px; color: var(--lab-muted); overflow-wrap: anywhere; }
.lab-betlist-stake { font-weight: 700; font-size: 13.5px; min-width: 52px; text-align: right; }
.lab-betlist-btns { display: inline-flex; gap: 4px; }
.lab-betlist-btns .btn { min-height: 34px; padding: 4px 8px; font-size: 12.5px; white-space: nowrap; }

/* — bet slip — */
.lab-slip { padding: 18px 16px 16px; }
.lab-slip-title { font-size: 20px; }
.lab-slip-title:focus { outline: none; }
.lab-slip-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-text); }
.lab-slip-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "chip info x" "ctrl ctrl ctrl" "err err err";
  column-gap: 10px; row-gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--lab-line);
}
.lab-slip-row:hover, .lab-slip-row:focus-within { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.lab-slip-chip { grid-area: chip; padding-top: 2px; }
.lab-slip-chip svg { display: block; }
.lab-slip-info { grid-area: info; min-width: 0; }
.lab-slip-name { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 800; font-family: var(--font-heading); font-size: 14.5px; line-height: 1.25; color: var(--color-text); text-align: left; overflow-wrap: anywhere; }
.lab-slip-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.lab-slip-name:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lab-slip-meta { font-size: 12px; line-height: 16px; color: var(--lab-muted); margin: 2px 0 0; }
.lab-slip-pockets { font-size: 12px; line-height: 16px; margin: 2px 0 0; font-feature-settings: 'tnum' 1; overflow-wrap: anywhere; }
.lab-slip-x { grid-area: x; appearance: none; width: 32px; height: 32px; border: 1px solid transparent; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--color-text); align-self: start; }
.lab-slip-x:hover { border-color: var(--lab-loss); color: var(--lab-loss); }
.lab-slip-x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.lab-slip-ctrl { grid-area: ctrl; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-left: 48px; }
.lab-stepper--sm { width: 148px; }
.lab-stepper--sm .lab-bicon { min-height: 34px; width: 34px; font-size: 16px; }
.lab-stepper--sm .input { min-height: 34px; padding: 4px 6px; font-size: 13.5px; }
.lab-slip-grouprow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lab-muted); }
.lab-slip-group { width: auto; min-height: 34px; padding: 4px 6px; font-size: 13px; }
.lab-slip-err { grid-area: err; margin: 0; padding-left: 48px; }
.lab-slip-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--color-text); }
.lab-slip-total-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lab-slip-total-value { font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.lab-slip-lines { margin: 6px 0 12px; }
.lab-slip-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--lab-line); font-size: 13.5px; }
.lab-slip-line dt { color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.lab-slip-line dd { margin: 0; font-weight: 700; }
.lab-slip-key { margin: 0 0 14px; }
.lab-slip-actions { display: grid; gap: 8px; }
.lab-slip-go { width: 100%; }
.lab-slip-emptybox { border: 2px dashed var(--lab-line-strong); padding: 16px; text-align: center; }
.lab-slip-emptybox p { margin: 0 0 4px; font-size: 14px; }
.lab-slip-emptybox .lab-slip-example { margin: 10px 0 0; font-weight: 600; }
.lab-slip-example .lab-textbtn { font-size: 14px; font-weight: 700; color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }

/* — responsive — */
@media (max-width: 1180px) {
  .lab-build-kpis .lab-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-build-kpis .lab-kpi:nth-child(2) { border-right: 0; }
  .lab-build-kpis .lab-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--lab-line); }
}
@media (max-width: 860px) {
  .lab-build { padding: 16px 14px 14px; }
  .lab-rack-chip { width: 48px; height: 48px; }
  .lab-rack-other { min-height: 44px; width: 96px; }
  .lab-mode, .lab-bseg-opt, .lab-tools .lab-bseg-opt { min-height: 44px; }
  .lab-bicon, .lab-stepper--sm .lab-bicon { width: 44px; min-height: 44px; height: 44px; }
  .lab-stepper--sm { width: 176px; }
  .lab-stepper--sm .input, .lab-slip-group { min-height: 44px; font-size: 16px; }
  .lab-slip-x { width: 44px; height: 44px; }
  .lab-textbtn { min-height: 44px; }
  .lab-wheel-note .btn { min-height: 44px; }
  .lab-betlist-btns .btn, .lab-betlist-name { min-height: 44px; }
  .lab-board-tip { order: 3; flex-basis: 100%; text-align: left; }
  .lab-build-jump {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; min-height: 48px;
    padding: 10px 14px; background: var(--color-text); color: var(--color-bg); font-weight: 700; font-size: 14px; text-decoration: none;
  }
  .lab-build-jump[hidden] { display: none; }
  .lab-build-jump:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
}
@media (max-width: 560px) {
  .lab-build-head { align-items: flex-start; }
  .lab-build-head-r { width: 100%; justify-content: space-between; }
  .lab-modes-row { align-items: stretch; }
  .lab-mode { flex: 1 1 auto; }
  .lab-tools { width: 100%; }
  .lab-tools .lab-bseg-opt { flex: 1 1 0; }
  .lab-build-empty { flex-direction: column; align-items: flex-start; padding: 18px; }
  .lab-betlist-row { grid-template-columns: minmax(0, 1fr) auto; }
  .lab-betlist-btns { grid-column: 1 / -1; }
  .lab-betlist-btns .btn { flex: 1 1 0; }
  .lab-betlist > summary, .lab-betlist-body { padding-left: 14px; padding-right: 14px; }
  .lab-toolbar .lab-btn-row { width: 100%; }
  .lab-toolbar .btn { flex: 1 1 auto; }
}
@media (max-width: 400px) {
  .lab-build-kpis .lab-kpi { padding: 10px; }
  .lab-build-kpis .lab-kpi-value { font-size: 20px; }
  .lab-wheel-seg .lab-bseg-opt, .lab-view-seg .lab-bseg-opt { padding: 6px 8px; font-size: 12.5px; }
}
/* Windows High Contrast / forced colours drop the background fills that mark
   the pressed option: paint it in the system selection colours instead, which
   leaves the outline free for the focus ring. */
@media (forced-colors: active) {
  .lab-bseg-opt[aria-pressed="true"], .lab-mode[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .lab-rack-chip[aria-pressed="true"] { border: 3px solid Highlight; }
  .lab-rack-other.is-active { border-color: Highlight; }
  .lab-bseg-opt[aria-disabled="true"] { color: GrayText; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-rack-chip { transition: none; }
  .lab-rack-chip:hover:not(:disabled) { transform: none; }
}

/* — layout per level (optional): level tabs above the felt, prompt, read-only felt — */
.lab-lvl[hidden] { display: none; }
.lab-lvl { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--color-text); background: var(--lab-panel); }
.lab-lvl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 8px; }
.lab-lvl-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lab-lvl-help { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--lab-muted); }
.lab-lvl-tabs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lab-lvl-tab, .lab-lvl-more {
  appearance: none; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 44px; min-width: 76px; padding: 5px 10px; cursor: pointer; font: inherit; text-align: left;
  color: var(--color-text); background: #fff; border: 1px solid var(--lab-line-strong);
}
.lab-lvl-tab:hover, .lab-lvl-more:hover { border-color: var(--color-text); }
.lab-lvl-tab:focus-visible, .lab-lvl-more:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lab-lvl-name { font-weight: 700; font-size: 13.5px; line-height: 17px; white-space: nowrap; }
.lab-lvl-cap { font-size: 11.5px; line-height: 15px; color: var(--lab-muted); white-space: nowrap; font-feature-settings: 'tnum' 1; }
.lab-lvl-tab.is-custom { box-shadow: inset 0 3px 0 var(--color-accent-700); }
.lab-lvl-tab.is-custom .lab-lvl-cap { color: var(--color-accent-700); font-weight: 700; }
.lab-lvl-tab[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.lab-lvl-tab[aria-pressed="true"] .lab-lvl-cap { color: var(--color-bg); }
.lab-lvl-more { align-items: center; font-size: 13px; font-weight: 700; }
.lab-lvl-more[hidden] { display: none; }
/* Wide screens show every level; the "more" control is for phones only. */
@media (min-width: 561px) { .lab-lvl-more { display: none; } }
@media (max-width: 560px) {
  .lab-lvl-tabs:not(.is-expanded) .lab-lvl-tab[data-overflow] { display: none; }
  .lab-lvl-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .lab-lvl-tab, .lab-lvl-more { min-width: 0; padding: 5px 8px; }
  .lab-lvl-cap { white-space: normal; overflow-wrap: anywhere; }
  .lab-lvl-name { font-size: 13px; }
  .lab-lvl { padding: 10px; }
}
.lab-lvl-note { margin: 10px 0 0; }
.lab-lvl-text { margin: 0; font-size: 13.5px; line-height: 20px; }
[data-level-source="scaled"] .lab-lvl-text { font-weight: 600; }
.lab-lvl-actions { margin-top: 8px; }
.lab-lvl-actions[hidden] { display: none; }
.lab-lvl-actions .btn { min-height: 44px; }
/* A scaled level is shown, not edited: dashed frame, no "place" cursor, no ghost chip. */
[data-level-source="scaled"] .lab-felt-scroll { border-style: dashed; border-width: 2px; padding: 7px; }
.lab-felt-svg.is-readonly .lab-felt-hit { cursor: default; }
.lab-lvl-kpis-empty p { margin: 0; }
.lab-betlist-level { margin: 12px 0 0; padding: 6px 0 6px 10px; border-left: 3px solid var(--color-text); font-size: 13px; line-height: 19px; }
.lab-betlist-level[hidden] { display: none; }

/* slip: the active level's rows and the all-levels summary */
.lab-slip-levelsub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.lab-slip-lvltag { display: inline-block; padding: 1px 7px; background: var(--color-text); color: var(--color-bg); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lab-slip-lvlnote { margin: 0 0 10px; padding: 8px 0 8px 10px; border-left: 3px solid var(--color-text); font-size: 13px; line-height: 19px; }
.lab-slip-lvlnote p { margin: 0 0 8px; }
.lab-slip-customize { min-height: 44px; }
.lab-slip-row--ro { grid-template-areas: "chip info x"; }
.lab-slip-name--ro { margin: 0; cursor: default; }
.lab-slip-name--ro:hover { text-decoration: none; }
.lab-slip-ro-stake { grid-area: x; margin: 0; align-self: start; font-weight: 700; font-size: 14px; }
.lab-slip-levels { margin: 4px 0 14px; }
.lab-slip-levels-h { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lab-slip-lvllist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lab-line); }
.lab-slip-lvlline { padding: 4px 0; border-bottom: 1px solid var(--lab-line); font-size: 12.5px; line-height: 18px; font-feature-settings: 'tnum' 1; }
.lab-slip-lvlline.is-active { font-weight: 700; box-shadow: inset 3px 0 0 var(--color-text); padding-left: 8px; }
.lab-slip-lvlarrow { color: var(--lab-muted); }
.lab-slip-lvlname { font-weight: 700; }
.lab-slip-lvlsrc { color: var(--color-accent-700); font-weight: 700; }

/* layout per level, review round: unfunded levels, coverage drop, fallback note, felt level strip */
.lab-lvl-tab.is-unfunded:not([aria-pressed="true"]) { background: repeating-linear-gradient(135deg, #f3f2f2 0 6px, #ebe9e8 6px 12px); border-style: dashed; }
.lab-lvl-tab.is-unfunded:not([aria-pressed="true"]) .lab-lvl-name { color: var(--lab-muted); }
.lab-lvl-drop { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--lab-caution); white-space: nowrap; }
.lab-lvl-tab[aria-pressed="true"] .lab-lvl-drop { color: var(--color-bg); }
.lab-lvl-fund { margin: 8px 0 0; font-size: 12.5px; line-height: 18px; color: var(--lab-muted); }
.lab-lvl-fund[hidden] { display: none; }
@media (max-width: 560px) { .lab-lvl-fund.is-folded { display: none; } }
.lab-lvl-fall { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; padding: 8px 10px; background: var(--lab-caution-bg); border-left: 3px solid var(--lab-caution); }
.lab-lvl-fall[hidden] { display: none; }
.lab-lvl-fall-text { flex: 1 1 260px; margin: 0; font-size: 13px; line-height: 19px; }
.lab-lvl-fall-btn { min-height: 44px; }
.lab-felt-lvl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 6px; padding: 6px 8px; border: 1px solid var(--lab-line-strong); background: #fff; }
.lab-felt-lvl[hidden] { display: none; }
.lab-felt-lvl[data-source="scaled"] { border-style: dashed; }
.lab-felt-lvl.is-alert { border: 2px solid var(--lab-caution); background: var(--lab-caution-bg); }
.lab-felt-lvl-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 13px; line-height: 19px; min-width: 0; }
.lab-felt-lvl-tag { display: inline-block; padding: 1px 7px; background: var(--color-text); color: var(--color-bg); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lab-felt-lvl[data-source="override"] .lab-felt-lvl-tag { background: var(--color-accent-700); }
.lab-felt-lvl-btn { min-height: 44px; }
.lab-felt-lvl-btn[hidden] { display: none; }
/* A read-only (scaled) level: no gold "place here" hover on the felt. */
.lab-felt-svg.is-readonly .lab-hl-target { stroke: #fff; }
.lab-felt-svg.is-readonly .lab-halo.is-hover { fill: rgba(255, 255, 255, 0.16); stroke: rgba(255, 255, 255, 0.92); stroke-width: 1.6; stroke-dasharray: 4 3; }
.lab-clear-why { margin: 6px 0 0; }
.lab-clear-why[hidden] { display: none; }
.lab-slip-basenote { margin: 0 0 8px; font-size: 12.5px; line-height: 18px; color: var(--lab-muted); }
.lab-slip-awaynote { margin: 0 0 10px; padding: 8px 0 8px 10px; border-left: 3px solid var(--color-text); font-size: 13px; line-height: 19px; }
.lab-slip-awaynote p { margin: 0 0 8px; }
.lab-slip-awaybtn { min-height: 44px; }
.lab-slip-lvlline.is-unfunded { color: var(--lab-muted); }
.lab-slip-lvlnf { font-weight: 700; }
.lab-slip-lvlmore-btn { min-height: 44px; margin-top: 4px; }
/* Level tabs on the plain loss ladder say when each level is played: "Level 2 · after 1 loss". */
.lab-lvl-top { display: block; white-space: nowrap; }
.lab-lvl-sep, .lab-lvl-when { font-size: 12.5px; line-height: 17px; font-weight: 600; }
/* "+ Add level": the last control of the tab group. */
.lab-lvl-add {
  appearance: none; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 44px; min-width: 76px; padding: 5px 10px; cursor: pointer; font: inherit; text-align: left;
  color: var(--color-text); background: transparent; border: 1px dashed var(--color-text);
}
.lab-lvl-add:hover { background: #fff; }
.lab-lvl-add:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lab-lvl-add-name { font-weight: 700; font-size: 13.5px; line-height: 17px; white-space: nowrap; }
.lab-lvl-add-cap { font-size: 11.5px; line-height: 15px; color: var(--lab-muted); white-space: nowrap; }
@media (max-width: 560px) {
  .lab-lvl-top { white-space: normal; }
  .lab-lvl-sep { display: none; }
  .lab-lvl-when { display: block; font-size: 11.5px; line-height: 15px; }
  .lab-lvl-add { min-width: 0; padding: 5px 8px; }
  .lab-lvl-add-name { font-size: 13px; }
}
/* "Layouts by level" bar: shown while the option is off and Level 1 has a chip. */
.lab-lvl-find { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0 0 10px; padding: 2px 2px 2px 12px; border: 1px solid var(--lab-line-strong); border-left: 3px solid var(--color-text); background: #fff; overflow-anchor: none; }
.lab-lvl-find[hidden] { display: none; }
.lab-lvl-find-text { flex: 1 1 260px; margin: 0; font-size: 13.5px; line-height: 20px; }
.lab-lvl-find-btns { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.lab-lvl-find .lab-lvl-find-go { min-height: 44px; white-space: nowrap; }
.lab-lvl-find-x, .lab-lvl-guide-x {
  appearance: none; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 22px; line-height: 1; cursor: pointer; color: var(--color-text);
}
.lab-lvl-find-x:focus-visible, .lab-lvl-guide-x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
@media (max-width: 560px) {
  .lab-lvl-find { padding: 6px 2px 2px 10px; }
  .lab-lvl-find-text { flex-basis: 100%; padding-right: 8px; }
}
/* The guide after "Build up coverage". */
.lab-lvl-guide { display: flex; align-items: flex-start; gap: 4px; margin: 10px 0 0; padding: 8px 0 2px 12px; background: #fff; border: 1px solid var(--lab-line-strong); border-left: 3px solid var(--color-accent-700); }
.lab-lvl-guide[hidden] { display: none; }
.lab-lvl-guide-main { flex: 1 1 auto; min-width: 0; }
.lab-lvl-guide-text { margin: 0; font-size: 14px; line-height: 21px; font-weight: 600; }
.lab-lvl-guide-how { font-size: 13px; line-height: 19px; }
.lab-lvl-guide-how > summary { display: list-item; min-height: 44px; padding: 12px 0 0; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lab-lvl-guide-how > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lab-lvl-guide-rules { margin: 0 0 6px; padding-left: 18px; }
.lab-lvl-guide-rules li { margin: 0 0 2px; }
.lab-lvl-guide-edit { margin: 0 0 6px; }
.lab-lvl-guide-set { min-height: 44px; padding: 0; text-align: left; }
.lab-lvl-note[hidden] { display: none; }
/* Level 3 still a copy of Level 1 while Level 2 changed: "Start from Level 2's bets". */
.lab-lvl-guide-prev { margin: 10px 0 0; min-height: 44px; }
.lab-lvl-guide-prev[hidden] { display: none; }
/* A custom level that still repeats a lower one: "Same as L1 · not edited yet". */
.lab-lvl-tab.is-same:not([aria-pressed="true"]) .lab-lvl-cap { color: var(--color-text); font-weight: 600; }
.lab-lvl-cap-more { white-space: nowrap; }
.lab-lvl-when-short { display: none; }
/* Phones fold a custom level's copy / reset buttons behind "Level N options". */
.lab-lvl-actions-toggle { display: none; min-height: 44px; margin-top: 8px; }
.lab-lvl-actions-toggle::after { content: ' ▾'; }
.lab-lvl-actions-toggle[aria-expanded="true"]::after { content: ' ▴'; }
@media (max-width: 560px) {
  .lab-lvl-when.has-short { display: none; }
  .lab-lvl-when-short { display: block; font-size: 11.5px; line-height: 15px; font-weight: 600; }
  .lab-lvl-cap-more { display: none; }
  /* The guide says what the help line says: one less line between the tabs and the table. */
  .lab-lvl.has-guide .lab-lvl-help { display: none; }
  .lab-lvl.has-guide .lab-lvl-head { margin-bottom: 6px; }
  .lab-lvl.is-foldable .lab-lvl-actions-toggle { display: inline-flex; }
  .lab-lvl.is-foldable .lab-lvl-actions:not(.is-open) { display: none; }
}
/* Phones: Level 1-3 and + Add level on one row (from 360px; narrower phones wrap). */
@media (min-width: 360px) and (max-width: 560px) {
  .lab-lvl-tabs.is-row { gap: 4px; }
  .lab-lvl-tabs.is-row[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-lvl-tabs.is-row[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lab-lvl-tabs.is-row[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lab-lvl-tabs.is-row .lab-lvl-tab, .lab-lvl-tabs.is-row .lab-lvl-add { padding: 5px 6px; }
  .lab-lvl-tabs.is-row .lab-lvl-add-name, .lab-lvl-tabs.is-row .lab-lvl-add-cap { white-space: normal; }
}
@media (max-width: 560px) {
  /* "↓ fewer numbers" wraps inside a narrow tab instead of spilling into the next one. */
  .lab-lvl-drop { white-space: normal; overflow-wrap: anywhere; }
}
@media (forced-colors: active) {
  .lab-lvl-tab[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .lab-lvl-tab[aria-pressed="true"] .lab-lvl-cap { color: HighlightText; }
}