/* 3RDS Legacy Whiteboard — 3RDS look: dark, structured, one glow at a time. */
.wb3 {
  --ink: #F4EFE6; --ink-soft: rgba(244,239,230,0.66); --ink-faint: rgba(244,239,230,0.38);
  --black: #070908; --forest: #071D17; --panel: rgba(9,20,16,0.82);
  --orange: #F26A1B; --orange-hot: #FF8B45; --gold: #E1B457; --blue: #61AEE6; --green: #8DBB73; --red: #E35F5F;
  --edge: rgba(244,239,230,0.14);
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(1280px, calc(100vw - 24px));
  box-sizing: border-box;
  margin: 12px 0 28px;
  padding: 18px;
  background: radial-gradient(120% 100% at 50% 0%, #0A211A 0%, var(--black) 62%);
  border: 1px solid var(--edge); border-radius: 14px;
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wb3 *, .wb3 *::before, .wb3 *::after { box-sizing: border-box; }

.wb3__hero { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.wb3__brand { display: flex; gap: 12px; align-items: flex-start; min-width: 0; flex: 1 1 320px; }
.wb3__logo { display: block; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; object-fit: contain; }
@media (max-width: 560px) { .wb3__logo { width: 36px; height: 36px; flex-basis: 36px; } }
.wb3__where { font-size: 12px; color: var(--gold); min-height: 1em; }
.wb3__legal { font-size: 12px; line-height: 1.45; border-radius: 8px; padding: 8px 9px; border: 1px solid var(--edge); color: var(--ink-soft); }
.wb3__legal:empty { display: none; }
.wb3__legal strong { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 3px; }
.wb3__legal.is-ok strong { color: var(--green); }
.wb3__legal.is-bad { border-color: rgba(227,95,95,0.55); }
.wb3__legal.is-bad strong { color: var(--red); }
.wb3__legal ul { margin: 0; padding-left: 16px; }
.wb3__legal li + li { margin-top: 3px; }
.wb3__legalline.is-bad { color: var(--red); }
.wb3__credit { display: block; margin-top: 4px; font-size: 12px; color: var(--gold); }
.wb3__eyebrow { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-hot); font-weight: 700; }
.wb3 h2 { margin: 6px 0 4px; font-family: "Arial Narrow", Impact, Inter, sans-serif; font-weight: 700; font-size: clamp(26px, 4vw, 40px); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.01em; }
.wb3 p { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 62ch; }
.wb3__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.wb3__chip { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--edge); border-radius: 999px; color: var(--ink-soft); }
.wb3__chip.is-quiet { color: var(--gold); border-color: rgba(225,180,87,0.4); }

.wb3__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .wb3__grid { grid-template-columns: 1fr; } }

.wb3__call { display: flex; flex-direction: column; gap: 10px; }
.wb3__block { background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.wb3__block--edit { display: none; }
.wb3[data-editing="on"] .wb3__block--edit { display: flex; }
.wb3__label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.wb3 label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.wb3 select, .wb3 input[type="text"] {
  background: #0B1713; color: var(--ink); border: 1px solid var(--edge); border-radius: 8px;
  padding: 8px 9px; font-size: 14px; font-family: inherit; text-transform: none; letter-spacing: 0; width: 100%;
}
.wb3 select:focus-visible, .wb3 input:focus-visible, .wb3 button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wb3__selected { font-size: 15px; color: var(--gold); }
.wb3__hint { color: var(--ink-faint); font-size: 12px; letter-spacing: 0; text-transform: none; }

.wb3__btn {
  appearance: none; border: 1px solid var(--edge); background: #0E1A15; color: var(--ink);
  font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 12px; border-radius: 9px; cursor: pointer; transition: background .15s, border-color .15s, transform .05s;
}
.wb3__btn:hover { border-color: rgba(244,239,230,0.35); }
.wb3__btn:active { transform: translateY(1px); }
.wb3__btn.is-primary { background: var(--orange); border-color: var(--orange); color: #14120E; box-shadow: 0 6px 22px rgba(242,106,27,0.25); }
.wb3__btn.is-primary:hover { background: var(--orange-hot); }
.wb3__btn.is-ghost { background: transparent; color: var(--ink-soft); }
.wb3__btn.is-small { padding: 8px 10px; font-size: 11px; }
.wb3__btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }

.wb3__board { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wb3__stage { position: relative; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: #08130F; line-height: 0; }
.wb3__stage canvas { display: block; width: 100%; touch-action: none; }
.wb3[data-editing="on"] .wb3__stage { border-color: rgba(225,180,87,0.55); cursor: crosshair; }
.wb3__hud { position: absolute; top: 10px; left: 12px; font: 600 12px/1 "SF Mono", Consolas, monospace; color: var(--ink-soft); background: rgba(7,9,8,0.55); padding: 5px 8px; border-radius: 6px; }

.wb3__deck { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; padding: 10px; }
.wb3__deck input[type="range"] { flex: 1 1 180px; accent-color: var(--orange); min-width: 140px; }
.wb3__inline { flex-direction: row !important; align-items: center; gap: 6px !important; }
.wb3__inline select { width: auto; padding: 6px 8px; font-size: 12px; }

.wb3__result { background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--orange); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.wb3__result strong { font-size: 20px; font-family: "Arial Narrow", Impact, Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }
.wb3__result small { color: var(--ink-faint); font-size: 12px; }

.wb3__lower { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1100px) { .wb3__lower { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .wb3__lower { grid-template-columns: 1fr; } }
.wb3__panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.wb3__batch { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink-soft); }
.wb3__batch strong { font-size: 19px; color: var(--ink); font-family: "Arial Narrow", Impact, Inter, sans-serif; text-transform: uppercase; }
.wb3__log { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; font-size: 13px; color: var(--ink-soft); }
.wb3__log li { padding: 4px 0; border-bottom: 1px solid rgba(244,239,230,0.06); }
.wb3__log span { color: var(--gold); font-family: "SF Mono", Consolas, monospace; font-size: 11px; margin-right: 8px; }

@media (max-width: 560px) {
  .wb3 { padding: 12px; width: calc(100vw - 16px); }
  .wb3__deck { gap: 6px; }
  .wb3__btn { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .wb3__btn { transition: none; } }

/* 0.7.0: the theme's content column (645px on 3RDS) was capping the board and shoving it right.
   Break out of it so the board gets the room the rest of the page gives it. */
.is-layout-constrained > .wb3, .wp-block-post-content > .wb3, .entry-content > .wb3 {
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}

/* 0.8.0: search, the ball panel, chalk by side, exports */
.wb3__search { position: relative; margin: 0 0 14px; }
.wb3__search input { width: 100%; box-sizing: border-box; background: #0B1713; color: var(--ink); border: 1px solid var(--edge); border-radius: 10px; padding: 11px 13px; font: 15px/1.2 Inter, system-ui, sans-serif; }
.wb3__search input::placeholder { color: var(--ink-faint); }
.wb3__results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: #0A1611; border: 1px solid rgba(244,239,230,0.22); border-radius: 12px; padding: 6px; max-height: 420px; overflow: auto; box-shadow: 0 18px 40px rgba(0,0,0,0.55); }
.wb3__results[hidden] { display: none; }
.wb3__hit { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: transparent; border: 0; color: var(--ink); padding: 9px 10px; border-radius: 8px; cursor: pointer; font: 14px/1.3 Inter, system-ui, sans-serif; }
.wb3__hit:hover, .wb3__hit:focus-visible { background: rgba(244,239,230,0.07); outline: none; }
.wb3__hit small { color: var(--ink-faint); font-size: 12px; }
.wb3__hit .wb3__kind { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-hot); font-weight: 700; }
.wb3__term { padding: 10px; border-top: 1px solid rgba(244,239,230,0.08); display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-soft); }
.wb3__term strong { color: var(--ink); font-size: 14px; }
.wb3__term a { color: var(--gold); font-size: 12px; }
.wb3__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wb3 input[type="number"] { background: #0B1713; color: var(--ink); border: 1px solid var(--edge); border-radius: 8px; padding: 8px 9px; font-size: 14px; font-family: inherit; width: 100%; box-sizing: border-box; }
.wb3__only-o, .wb3__only-d { display: none; flex-direction: column; gap: 9px; }
.wb3[data-sel-side="O"] .wb3__only-o { display: flex; }
.wb3[data-sel-side="D"] .wb3__only-d { display: flex; }
.wb3__exports { display: flex; flex-wrap: wrap; gap: 8px; }
.wb3 select optgroup { color: var(--ink-faint); }

/* 0.8.1 — one search, Offense | Defense, live results */
.wb3__searchbar { display: flex; gap: 8px; align-items: stretch; }
.wb3__searchbar input { flex: 1 1 auto; min-width: 0; }
.wb3__sidepick { display: flex; flex: 0 0 auto; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
.wb3__sidepick button { background: transparent; color: var(--ink-faint); border: 0; padding: 0 14px; font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.14em; cursor: pointer; }
.wb3__sidepick button[aria-pressed="true"] { background: var(--orange-hot); color: #14120E; }
.wb3__resulthead { padding: 6px 10px 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.wb3__resulthead small { text-transform: none; letter-spacing: 0; }
.wb3__hit.is-hi { background: rgba(244,239,230,0.09); box-shadow: inset 3px 0 0 var(--orange-hot); }
.wb3__hit.is-on .wb3__kind { color: var(--gold); }
.wb3__resultnav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 6px 4px; border-top: 1px solid rgba(244,239,230,0.08); color: var(--ink-faint); font-size: 12px; }
.wb3__linkbtn { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) {
  .wb3__sidepick button { padding: 0 9px; font-size: 10px; letter-spacing: 0.08em; }
  .wb3__results { max-height: 60vh; }
}
@media (max-width: 560px) {
  .wb3__hit { padding: 7px 8px; font-size: 13px; }
  .wb3__hit small { font-size: 11px; }
}

/* 0.8.2 — pick, fold, flip; the held side */
.wb3__lockbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 2px 0; font-size: 13px; color: var(--ink-soft); }
.wb3__lockbar[hidden] { display: none; }
.wb3__lockside { font: 700 10px/1 Inter, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #14120E; background: var(--gold); border-radius: 999px; padding: 5px 9px; }
.wb3__lockname { color: var(--ink); min-width: 0; }
.wb3__block.is-locked { box-shadow: inset 0 0 0 1px rgba(225,180,87,0.55); }
.wb3__block.is-locked .wb3__label::after { content: ' · HELD'; color: var(--gold); }
.wb3__block.is-locked select, .wb3__block.is-locked input { opacity: 0.55; cursor: not-allowed; }
.wb3__sidepick button.is-locked:not([aria-pressed="true"]) { color: var(--gold); }

/* 0.9.0: the big book. Plays coming to the board, the Playbook (system) menus. */
.wb3__hit.is-coming .wb3__kind { color: #8fc3ea; }
.wb3.is-diagram .wb3__result { border-left-color: #61AEE6; }
.wb3__result .wb3__note { color: var(--gold); }
.wb3__result .wb3__linkbtn { align-self: flex-start; margin-top: 4px; }
.wb3__btn:disabled { opacity: 0.4; cursor: not-allowed; }
[data-system-note]:empty, [data-dsystem-note]:empty { display: none; }

/* 1.1.0: route shaping, jobs from where he stands, the tests */
.wb3__twin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wb3__twin .wb3__btn { width: 100%; }
.wb3__btn[aria-pressed="true"].is-ghost[data-snap] { border-color: var(--gold); color: var(--gold); }
.wb3__test { font-size: 12px; color: var(--ink-soft); }
.wb3__test:empty { display: none; }
.wb3__test strong { display: block; color: var(--ink); font-size: 13px; margin: 6px 0 4px; }
.wb3__test table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wb3__test th, .wb3__test td { text-align: right; padding: 4px 5px; border-bottom: 1px solid rgba(244,239,230,0.08); white-space: nowrap; }
.wb3__test th:first-child, .wb3__test td:first-child { text-align: left; white-space: normal; }
.wb3__test th { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.wb3__test tr.is-low td:first-child { color: var(--red); }
.wb3__test tr.is-high td:first-child { color: var(--green); }
.wb3__test .wb3__who { margin-top: 6px; }
.wb3__scroll { overflow-x: auto; }
@media (min-width: 861px) { .wb3__lower > .wb3__panel:first-child { grid-column: 1 / -1; } }
.wb3__test td small { display: block; color: var(--ink-faint); font-size: 10px; }
.wb3__reviewlist { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--ink-soft); }
.wb3__reviewlist:empty { display: none; }
.wb3__reviewlist li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(244,239,230,0.08); }
.wb3__reviewlist b { font-weight: 600; color: var(--ink); }
.wb3__reviewlist .is-book { color: var(--green); } .wb3__reviewlist .is-tossed { color: var(--red); } .wb3__reviewlist .is-wait { color: var(--gold); }

/* 1.3.1: the free-side card */
.wb3--closed .wb3__hero > div { max-width: 78ch; }
.wb3--closed p { margin: 8px 0 0; line-height: 1.5; }
.wb3__free { color: var(--cream, #f4efe6); }
.wb3__free b { color: var(--orange-hot, #ff8b45); font-weight: 800; }
.wb3__doors { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px !important; }
.wb3__plans { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--orange-hot, #ff8b45); color: #140a04 !important; font-weight: 800; letter-spacing: .04em; text-decoration: none !important; }
.wb3__plans:hover { filter: brightness(1.08); }
.wb3__gm { align-self: center; color: inherit !important; font-weight: 700; text-decoration: none !important; opacity: .8; }
.wb3__gm:hover { opacity: 1; }

/* =====================================================================================
   1.4.0 — the board is the hero. Three looks (Whiteboard is standard · Chalkboard · Notebook),
   the call on one rail in tabs, the workbench under the field, and a clear split between
   SECTIONS (colored condensed titles) and TOOLS (the buttons you press).
   ===================================================================================== */
.wb3 {
  --bg: #0B0D11; --bg2: #11141A; --card: #13161D; --card2: #181C24; --well: #0E1116;
  --ink: #F2EEE6; --ink-soft: rgba(242,238,230,0.70); --ink-faint: rgba(242,238,230,0.44);
  --edge: rgba(242,238,230,0.10); --edge2: rgba(242,238,230,0.18);
  --c-o: #4F9BFF; --c-d: #FF5A52; --c-b: #F2B84B; --c-e: #FF8B45; --c-s: #3FD0B6; --c-p: #6BD48A; --c-k: #B28CFF; --c-t: #9BC8F0; --c-l: #A9A39A;
  --sec-font: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --tool-font: "SF Mono", ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;
  width: min(1640px, calc(100vw - 32px));
  margin: 14px 0 34px;
  padding: 22px 22px 26px;
  background:
    radial-gradient(90% 60% at 20% -10%, rgba(79,155,255,0.07), transparent 60%),
    radial-gradient(80% 60% at 100% 0%, rgba(255,139,69,0.06), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  border: 1px solid var(--edge); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
/* the page around the board: no more white bands on a wide screen */
body.wb3-page, body:has(.wb3[data-wb3]) { background: #07080B !important; }
body.wb3-page .site, body.wb3-page .site-content, body.wb3-page #page, body.wb3-page .wp-site-blocks,
body.wb3-page main, body.wb3-page .entry-content, body.wb3-page .content-bg, body.wb3-page article { background: transparent !important; }

/* ---------- hero ---------- */
.wb3__hero { align-items: center; margin-bottom: 18px; }
.wb3 h2 { font-family: var(--sec-font); letter-spacing: 0.02em; }
.wb3__eyebrow { color: var(--c-e); }
.wb3__heroside { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.wb3__skins { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--edge2); border-radius: 12px; background: var(--well); }
.wb3__skinlabel { font: 700 10px/1 var(--tool-font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); padding: 0 8px 0 6px; }
.wb3__skins button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--ink-soft); padding: 7px 11px 7px 8px; border-radius: 9px; font: 600 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.wb3__skins button:hover { color: var(--ink); background: rgba(242,238,230,0.05); }
.wb3__skins button[aria-pressed="true"] { background: var(--ink); color: #101216; }
.wb3__swatch { width: 18px; height: 13px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
.wb3__swatch.is-whiteboard { background: linear-gradient(135deg, #fff, #dde2e6); box-shadow: 0 0 0 2px #9aa4ad; }
.wb3__swatch.is-chalkboard { background: #1E3A2D; box-shadow: 0 0 0 2px #7a5634; }
.wb3__swatch.is-notebook { background: repeating-linear-gradient(180deg, #fbf8ee 0 3px, #9cb8e0 3px 4px); box-shadow: 0 0 0 2px #d9d2bf; }
.wb3__chip.is-quiet { font-family: var(--tool-font); }

/* ---------- search: its own instrument, not another box ---------- */
.wb3__search { margin: 0 0 18px; }
.wb3__searchbar { gap: 10px; }
.wb3__searchfield { flex: 1 1 auto; min-width: 0; display: flex !important; flex-direction: row !important; align-items: center; gap: 0 !important;
  background: var(--card2); border: 1px solid var(--edge2); border-radius: 14px; padding: 0 6px 0 0; text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.25); }
.wb3__searchfield:focus-within { border-color: var(--c-e); box-shadow: 0 0 0 3px rgba(255,139,69,0.18), 0 8px 24px rgba(0,0,0,0.25); }
.wb3__searchtag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; align-self: stretch; padding: 0 14px; margin-right: 4px;
  border-right: 1px solid var(--edge2); font: 700 11px/1 var(--tool-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-e); }
.wb3__searchtag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.wb3__search input[type="search"] { background: transparent; border: 0; border-radius: 0; padding: 14px 10px; font-size: 15.5px; box-shadow: none; outline: none; }
.wb3__search input[type="search"]:focus-visible { outline: none; }
.wb3__sidepick { align-items: center; background: var(--well); border-color: var(--edge2); border-radius: 14px; padding: 4px; gap: 3px; }
.wb3__sidelabel { font: 700 10px/1 var(--tool-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding: 0 8px 0 6px; white-space: nowrap; }
.wb3__sidepick button { border-radius: 10px; padding: 0 14px; height: 38px; font-family: var(--tool-font); }
.wb3__sidepick button[data-side-pick="offense"][aria-pressed="true"] { background: var(--c-o); color: #06101f; }
.wb3__sidepick button[data-side-pick="defense"][aria-pressed="true"] { background: var(--c-d); color: #1f0606; }
.wb3__results { background: #10131A; border-color: var(--edge2); }

/* ---------- the layout: rail | field, then the workbench ---------- */
.wb3__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
@media (max-width: 1180px) { .wb3__grid { grid-template-columns: 268px minmax(0, 1fr); } }
@media (max-width: 860px) { .wb3__grid { grid-template-columns: 1fr; } }
.wb3__call { gap: 12px; position: sticky; top: 64px; }
@media (max-width: 860px) { .wb3__call { position: static; } }

/* SECTIONS: colored condensed titles with a marker stroke under them */
.wb3__label { font: 700 14.5px/1.1 var(--sec-font) !important; letter-spacing: 0.07em !important; text-transform: uppercase; color: var(--ink) !important;
  display: flex; align-items: center; gap: 8px; padding-bottom: 7px; margin-bottom: 2px; border-bottom: 2px solid var(--sec, var(--edge2)); }
.wb3__label::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--sec, var(--ink-faint)); flex: 0 0 8px; }
.wb3__label.is-o { --sec: var(--c-o); } .wb3__label.is-d { --sec: var(--c-d); } .wb3__label.is-b { --sec: var(--c-b); } .wb3__label.is-e { --sec: var(--c-e); }
.wb3__label.is-s { --sec: var(--c-s); } .wb3__label.is-p { --sec: var(--c-p); } .wb3__label.is-k { --sec: var(--c-k); } .wb3__label.is-t { --sec: var(--c-t); } .wb3__label.is-l { --sec: var(--c-l); }
.wb3__block.is-locked .wb3__label::after { margin-left: auto; font-family: var(--tool-font); font-size: 10px; }

/* FIELDS: quiet sentence-case labels, so they never read like a section */
.wb3 label { font: 500 12px/1.2 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink-soft) !important; }
.wb3 select, .wb3 input[type="text"], .wb3 input[type="number"] { background: var(--well); border-color: var(--edge2); border-radius: 9px; }
.wb3 select:hover, .wb3 input[type="text"]:hover, .wb3 input[type="number"]:hover { border-color: rgba(242,238,230,0.3); }

/* the call card with its tabs */
.wb3__card { background: var(--card); border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; }
.wb3__tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--well); border-bottom: 1px solid var(--edge); }
.wb3__tabs button { position: relative; border: 0; background: transparent; color: var(--ink-faint); padding: 13px 4px 12px; cursor: pointer;
  font: 700 13px/1 var(--sec-font); letter-spacing: 0.08em; text-transform: uppercase; }
.wb3__tabs button::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.wb3__tabs button:hover { color: var(--ink-soft); }
.wb3__tabs button[aria-selected="true"] { color: var(--ink); background: var(--card); }
.wb3__tabs button.is-o[aria-selected="true"]::after { background: var(--c-o); }
.wb3__tabs button.is-d[aria-selected="true"]::after { background: var(--c-d); }
.wb3__tabs button.is-b[aria-selected="true"]::after { background: var(--c-b); }
.wb3__card .wb3__block { background: transparent; border: 0; border-radius: 0; padding: 14px 14px 10px; }
.wb3__pane[hidden] { display: none !important; }
.wb3__callsum { margin: 0; padding: 10px 14px 12px; border-top: 1px dashed var(--edge2); display: grid; gap: 5px; }
.wb3__callsum > div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: baseline; }
.wb3__callsum dt { font: 700 10px/1 var(--tool-font); letter-spacing: 0.14em; text-transform: uppercase; }
.wb3__callsum dd { margin: 0; font-size: 12.5px; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb3__callsum .is-o dt { color: var(--c-o); } .wb3__callsum .is-d dt { color: var(--c-d); } .wb3__callsum .is-b dt { color: var(--c-b); }

/* TOOLS: the things you press. Monospace caps, tactile, one primary. */
.wb3__btn { font: 700 11.5px/1 var(--tool-font); letter-spacing: 0.1em; background: linear-gradient(180deg, #1D222B, #161A21); border-color: var(--edge2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 0 rgba(0,0,0,0.5); border-radius: 10px; }
.wb3__btn:hover { border-color: rgba(242,238,230,0.38); }
.wb3__btn.is-ghost { background: transparent; box-shadow: none; }
.wb3__btn.is-primary { font-size: 13.5px; padding: 16px 12px; letter-spacing: 0.14em; background: linear-gradient(180deg, #FF8B45, #F26A1B); border-color: #F26A1B;
  box-shadow: 0 10px 26px rgba(242,106,27,0.30), inset 0 1px 0 rgba(255,255,255,0.35); }
.wb3__actions { display: grid; gap: 8px; }
.wb3__actions .wb3__twin { grid-template-columns: 1fr 1fr; }
.wb3__block--edit { background: var(--card); border: 1px solid rgba(255,139,69,0.45); border-radius: 14px; }

/* ---------- the field in its frame ---------- */
.wb3__frame { position: relative; border-radius: 16px; padding: 12px; }
.wb3__stage { border: 0; border-radius: 6px; background: transparent; }
.wb3__hud { font-family: var(--tool-font); }
/* Whiteboard: brushed aluminum frame and a marker tray */
.wb3[data-skin="whiteboard"] .wb3__frame {
  background: linear-gradient(180deg, #d9dde1, #aab2b9 48%, #c9ced3); padding: 10px 10px 22px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #8d959c, 0 18px 40px rgba(0,0,0,0.45); }
.wb3[data-skin="whiteboard"] .wb3__frame::after { content: ''; position: absolute; left: 6%; width: min(240px, 40%); bottom: 5px; height: 12px; border-radius: 3px;
  background:
    linear-gradient(90deg, #1d5fc2 0 34px, #e9edf0 34px 42px, transparent 42px) 16px 2px / 60px 5px no-repeat,
    linear-gradient(90deg, #c62828 0 34px, #e9edf0 34px 42px, transparent 42px) 76px 2px / 60px 5px no-repeat,
    linear-gradient(90deg, #22262b 0 34px, #e9edf0 34px 42px, transparent 42px) 136px 2px / 60px 5px no-repeat,
    linear-gradient(180deg, #aeb6bd, #8b949c);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.5); }
.wb3[data-skin="whiteboard"] .wb3__stage { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.wb3[data-skin="whiteboard"] .wb3__hud { background: rgba(255,255,255,0.85); color: #243448; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
/* Chalkboard: a wooden frame and a chalk ledge */
.wb3[data-skin="chalkboard"] .wb3__frame {
  background: linear-gradient(90deg, #6b4526, #8a5a33 30%, #6e4727 60%, #8f5e36); padding: 12px 12px 22px;
  box-shadow: inset 0 1px 0 rgba(255,220,180,0.25), inset 0 -2px 0 rgba(0,0,0,0.35), 0 18px 40px rgba(0,0,0,0.5); }
.wb3[data-skin="chalkboard"] .wb3__frame::after { content: ''; position: absolute; left: 10%; bottom: 7px; width: 34px; height: 7px; border-radius: 3px; background: #f1efe6;
  box-shadow: 46px 0 0 0 #f5d76e, 88px 0 0 -1px #9ad0f5; }
.wb3[data-skin="chalkboard"] .wb3__hud { background: rgba(10,24,18,0.7); color: rgba(240,240,230,0.85); }
/* Notebook: a spiral across the top, paper edge */
.wb3[data-skin="notebook"] .wb3__frame { background: #efe9d8; padding: 26px 10px 10px;
  box-shadow: 0 1px 0 #fff inset, 0 18px 40px rgba(0,0,0,0.45); }
.wb3[data-skin="notebook"] .wb3__frame::before { content: ''; position: absolute; left: 18px; right: 18px; top: 6px; height: 16px;
  background: radial-gradient(circle at 50% 70%, #2a2a30 0 3px, transparent 3.5px) 0 0 / 22px 16px repeat-x,
              linear-gradient(90deg, transparent 0 7px, #9aa0a8 7px 9px, transparent 9px) 0 0 / 22px 12px repeat-x; }
.wb3[data-skin="notebook"] .wb3__hud { background: rgba(251,248,238,0.9); color: #3a3a42; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.wb3[data-editing="on"] .wb3__frame { box-shadow: 0 0 0 2px var(--c-e), 0 18px 40px rgba(0,0,0,0.45); }

/* the transport under the field */
.wb3__deck { background: var(--card); border-color: var(--edge); border-radius: 14px; padding: 10px 12px; gap: 8px; }
.wb3__deck input[type="range"] { accent-color: var(--c-e); }
.wb3__deckgap { flex: 0 0 4px; height: 26px; border-left: 1px solid var(--edge2); margin: 0 4px; }
.wb3__btn.is-toggle { background: transparent; box-shadow: none; color: var(--ink-faint); padding-left: 26px; position: relative; }
.wb3__btn.is-toggle::before { content: ''; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; border: 1.5px solid currentColor; }
.wb3__btn.is-toggle[aria-pressed="true"] { color: var(--c-s); border-color: rgba(63,208,182,0.5); }
.wb3__btn.is-toggle[aria-pressed="true"]::before { background: var(--c-s); border-color: var(--c-s); box-shadow: 0 0 8px rgba(63,208,182,0.6); }
.wb3__result { background: var(--card); border-color: var(--edge); border-left: 4px solid var(--c-e); border-radius: 14px; padding: 14px 16px; }
.wb3__result strong { font-family: var(--sec-font); }

/* ---------- the workbench under the field ---------- */
.wb3__bench { display: grid; gap: 16px; margin-top: 18px; }
.wb3__benchrow { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; }
.wb3__panel { background: var(--card); border: 1px solid var(--edge); border-radius: 14px; padding: 14px; gap: 10px; }
.wb3__panel[hidden] { display: none !important; }
.wb3__panel--study { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center; }
.wb3__panel--study > .wb3__label { grid-column: 1 / -1; }
.wb3__panel--study > .wb3__batch, .wb3__panel--study > .wb3__test { grid-column: 1 / -1; }
.wb3__panel--study > .wb3__hint { max-width: 70ch; }
.wb3__trio { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.wb3__trio .wb3__btn { white-space: nowrap; }
.wb3__saverow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.wb3__saverow .wb3__btn { height: 38px; }
.wb3__log { max-height: 190px; }
@media (max-width: 900px) {
  .wb3__panel--study { grid-template-columns: 1fr; }
  .wb3__trio { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .wb3 { width: calc(100vw - 12px); padding: 12px 10px 18px; border-radius: 14px; }
  .wb3__heroside { justify-content: flex-start; width: 100%; }
  .wb3__skins { width: 100%; justify-content: space-between; }
  .wb3__skins button { padding: 7px 8px; font-size: 12px; }
  .wb3__skinlabel { display: none; }
  .wb3__searchbar { flex-direction: column; }
  .wb3__searchtag { padding: 0 10px; font-size: 10px; letter-spacing: 0.1em; }
  .wb3__sidepick { align-self: stretch; }
  .wb3__sidepick button { flex: 1; }
  .wb3__frame { padding: 7px 7px 18px; }
  .wb3[data-skin="notebook"] .wb3__frame { padding: 22px 7px 7px; }
  .wb3__deckgap { display: none; }
}
/* leave room for the 3RDS bar at the bottom of the screen */
html.tl3-r3bar .wb3 { margin-bottom: 96px; }
/* phone: the board first, RUN right under it, then the transport, the result and the call */
@media (max-width: 860px) {
  .wb3__grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .wb3__call, .wb3__board { display: contents; }
  .wb3__frame { order: 1; } .wb3__actions { order: 2; } .wb3__deck { order: 3; } .wb3__result { order: 4; }
  .wb3__block--edit { order: 5; } .wb3__card--call { order: 6; }
}

/* ======================= 1.5.0 — the play buttons, the edit rack, icons on every tool ======================= */
.wb3 svg { flex: none; }
.wb3__btn svg, .wb3__act svg, .wb3__tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* the big button: one icon for what it will do */
.wb3__btn.is-primary { display: flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase; }
.wb3__btn.is-primary .wb3__ico { width: 19px; height: 19px; display: none; }
.wb3__btn.is-primary .wb3__ico.is-run { fill: currentColor; stroke: none; }
.wb3__btn.is-primary[data-state="run"] .is-run, .wb3__btn.is-primary[data-state="pause"] .is-pause, .wb3__btn.is-primary[data-state="replay"] .is-replay { display: block; }
.wb3__btn.is-primary .wb3__ico.is-pause { stroke-width: 3; }
/* the three next moves: tiles, icon over words */
.wb3__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wb3__act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 66px; padding: 10px 6px 9px;
  border-radius: 12px; border: 1px solid var(--edge2); background: linear-gradient(180deg, #1D222B, #161A21); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 0 rgba(0,0,0,0.5); cursor: pointer;
  font: 700 10.5px/1.15 var(--tool-font); letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  transition: border-color .15s, color .15s, transform .08s, background .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.wb3__act svg { width: 22px; height: 22px; color: var(--c-e); }
.wb3__act:hover { border-color: rgba(242,238,230,0.38); }
.wb3__act:active { transform: translateY(1px) scale(0.99); }
.wb3__act:disabled { opacity: 0.4; cursor: not-allowed; }
.wb3__act[data-edit] svg { color: var(--c-b); }
.wb3__act[data-pick-new] svg { color: var(--c-o); }
.wb3__act[aria-pressed="true"] { border-color: var(--c-e); color: var(--c-e); }
.wb3__act:focus-visible, .wb3__tool:focus-visible { outline: 2px solid var(--c-e); outline-offset: 2px; }
/* "Pick new play": the call card lights up for a moment so the eye goes straight to it */
@keyframes wb3call { 0% { box-shadow: 0 0 0 0 rgba(79,155,255,0.0); } 25% { box-shadow: 0 0 0 3px rgba(79,155,255,0.75), 0 0 28px rgba(79,155,255,0.35); } 100% { box-shadow: 0 0 0 0 rgba(79,155,255,0); } }
.wb3__card--call.is-calling { animation: wb3call 1.5s ease-out 1; }

/* ---------- the edit rack: it takes the run buttons' place, so nothing below it moves ---------- */
.wb3__block--edit { display: none !important; }
.wb3__rack { display: none; gap: 10px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid rgba(255,139,69,0.5);
  box-shadow: 0 0 0 1px rgba(255,139,69,0.12), 0 10px 26px rgba(0,0,0,0.3); }
.wb3[data-editing="on"] .wb3__rack { display: grid; }
.wb3[data-editing="on"] .wb3__actions { display: none; }
.wb3__rackbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.wb3__tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--edge2); background: linear-gradient(180deg, #1D222B, #161A21); color: var(--ink-soft); cursor: pointer;
  font: 700 10.5px/1 var(--tool-font); letter-spacing: 0.08em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .15s, color .15s, background .15s; }
.wb3__tool:hover { border-color: rgba(242,238,230,0.38); color: var(--ink); }
.wb3__tool[aria-pressed="true"] { border-color: var(--c-b); color: var(--c-b); }
.wb3__tool.is-done { background: linear-gradient(180deg, #FF8B45, #F26A1B); border-color: #F26A1B; color: #14120E; padding: 8px 14px; }
.wb3__tool.is-done:hover { color: #14120E; filter: brightness(1.06); }
.wb3__legalchip { justify-self: center; font: 700 10.5px/1 var(--tool-font); letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px 6px 22px; border-radius: 999px; position: relative; border: 1px solid var(--edge2); color: var(--ink-faint); white-space: nowrap; }
.wb3__legalchip::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: currentColor; }
.wb3__legalchip.is-ok { color: var(--c-p); border-color: rgba(107,212,138,0.45); }
.wb3__legalchip.is-bad { color: var(--c-d); border-color: rgba(255,90,82,0.5); }
.wb3__who { font: 600 14px/1.3 var(--sec-font); letter-spacing: 0.02em; color: var(--c-b); min-height: 1.3em; }
.wb3:not([data-has-sel]) .wb3__who { color: var(--ink-faint); font-weight: 500; }
.wb3__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wb3__tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wb3__tools .wb3__tool { flex-direction: column; gap: 5px; min-height: 54px; padding: 8px 4px; }
.wb3__tools .wb3__tool svg { width: 19px; height: 19px; }
.wb3__tools .wb3__tool:disabled { opacity: 0.35; cursor: not-allowed; }
.wb3__rack .wb3__legal { font-size: 12px; }
.wb3__rack .wb3__only-o, .wb3__rack .wb3__only-d { gap: 8px; }

/* on the board itself: a two-line tip while editing, the live spot of whatever you're dragging */
.wb3__tip, .wb3__where { position: absolute; pointer-events: none; font: 600 11.5px/1.2 var(--tool-font); letter-spacing: 0.04em; border-radius: 8px; padding: 6px 9px;
  background: rgba(10,12,16,0.72); color: #F2EEE6; box-shadow: 0 2px 8px rgba(0,0,0,0.25); opacity: 0; transition: opacity .2s; }
.wb3__tip { top: 10px; right: 12px; }
.wb3__where { left: 12px; bottom: 12px; color: var(--c-b); }
.wb3[data-editing="on"]:not([data-has-sel]) .wb3__tip { opacity: 1; }
.wb3__where { display: none; }   /* the spot is written right next to the man on the board */
.wb3__stage { position: relative; }

/* the transport: icons on the tools */
.wb3__deck .wb3__btn { display: inline-flex; align-items: center; gap: 6px; }
.wb3__deck .wb3__btn svg { width: 15px; height: 15px; }
.wb3__btn.is-toggle { padding-left: 10px; }
.wb3__btn.is-toggle::before { display: none; }
.wb3__btn.is-toggle svg { opacity: 0.75; }
.wb3__btn.is-toggle[aria-pressed="true"] svg { opacity: 1; filter: drop-shadow(0 0 6px rgba(63,208,182,0.55)); }

@media (max-width: 860px) {
  .wb3__rack { order: 2; }
  .wb3__act { min-height: 62px; }
}
@media (max-width: 420px) {
  .wb3__act { font-size: 9.5px; letter-spacing: 0.05em; padding: 9px 4px 8px; }
  .wb3__tools .wb3__tool { font-size: 9.5px; }
  .wb3__deck .wb3__btn span { display: none; }            /* phone transport: icons only (they have titles) */
  .wb3__deck .wb3__btn.is-toggle { padding: 8px 9px; }
}
@media (prefers-reduced-motion: reduce) { .wb3__card--call.is-calling { animation: none; box-shadow: 0 0 0 2px rgba(79,155,255,0.7); } .wb3__act, .wb3__tool, .wb3__tip, .wb3__where { transition: none; } }

/* overnight round (Oct 1 2026): the feature's own picture behind the card — a light crop of the room render */
.wb3--closed .wb3__hero.has-ul{position:relative;overflow:hidden;isolation:isolate}
.wb3--closed .wb3__hero.has-ul::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(6,9,8,.97) 0%,rgba(6,9,8,.84) 40%,rgba(6,9,8,.34) 100%),var(--tl3-ul) center/cover no-repeat;opacity:.92;transition:opacity .16s ease,transform .22s ease}
.wb3--closed .wb3__hero.has-ul:hover::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.wb3--closed .wb3__hero.has-ul::after{transition:none;transform:none!important}}
.wb3--closed .wb3__hero.has-ul{padding:18px;border-radius:16px}