/* ui/BlueprintBuilder — the blueprint editor: the way back, the banner that names the broken rule,
   the mirrored grid round the core, the rules readout, the grouped palette, a gun's weapon and
   heading, the name, Save / Publish / Fly it with a line under each, the build order, what the
   ship flies as. Contract: ./BlueprintBuilder.spec.md. Tokens only (ui/Theme C8).

   Three columns where the editor's own width allows (a container query): board | tools | ship.
   The board is as tall as the viewport leaves it (--sp-bpb-above: what stands over and under it),
   so a desktop sees the whole editor without scrolling. */

.sp-bpb {
  --sp-bpb-above: 356px;
  --sp-bpb-top: 204px;
  /* The board's width: what the viewport's height leaves for --cols by --rows, never under 300px. */
  --board-w: clamp(300px, calc((100dvh - var(--sp-bpb-above)) * var(--cols, 11) / var(--rows, 13)), 680px);
  container: sp-bpb / inline-size;
  display: grid;
  gap: 12px;
  width: min(100%, 1560px);
  margin: 0 auto;
  color: var(--sp-text);
  font: 400 15px/1.4 var(--sp-font-ui);
}

/* ------------------------------------------------------------- the bar --- */

.sp-bpb__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
}

.sp-bpb__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  color: var(--sp-text);
  font: 600 13px/1 var(--sp-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--sp-space-2) 70%, transparent);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
  transition: border-color var(--sp-dur-fast) var(--sp-ease-out), box-shadow var(--sp-dur-fast) var(--sp-ease-out);
}

.sp-bpb__back:hover {
  border-color: var(--sp-accent-2);
  box-shadow: 0 0 var(--sp-glow-sm) color-mix(in srgb, var(--sp-accent-2) 35%, transparent);
}

/* A chevron pointing back. */
.sp-bpb__back-glyph {
  width: 8px;
  height: 8px;
  border-bottom: 2px solid var(--sp-accent-2);
  border-left: 2px solid var(--sp-accent-2);
  transform: rotate(45deg);
}

.sp-bpb__bar-name {
  min-width: 0;
  overflow: hidden;
  font: 700 20px/1.2 var(--sp-font-display);
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-bpb__changed {
  font: 500 13px/1.2 var(--sp-font-ui);
  color: var(--sp-xp);
}

.sp-bpb__leave {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 0 0 14px;
  background: color-mix(in srgb, var(--sp-xp) 12%, var(--sp-space-1));
  border: 1px solid var(--sp-xp);
  border-radius: var(--sp-radius);
}

.sp-bpb__leave .sp-bpb__ask-text {
  flex: 1 1 220px;
  text-align: left;
}

.sp-bpb__leave .sp-bpb__action {
  width: auto;
  min-height: 44px;
  padding: 0 16px;
}

/* ------------------------------------------------------------ the frame --- */

.sp-bpb__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas: 'board ship' 'board tools';
  gap: 14px;
  align-items: start;
}

.sp-bpb__stage-area { grid-area: board; }
.sp-bpb__panel--tools { grid-area: tools; }
.sp-bpb__panel--ship { grid-area: ship; }

@container sp-bpb (min-width: 1040px) {
  .sp-bpb__main {
    grid-template-columns: calc(var(--board-w) + 26px) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'board tools ship';
  }

  /* Three columns: each panel is its own height at most, so the page itself never scrolls. */
  .sp-bpb:not([data-layout='phone']) .sp-bpb__panel {
    box-sizing: border-box;
    max-height: calc(100dvh - var(--sp-bpb-top));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sp-line-strong) transparent;
  }
}

.sp-bpb[data-layout='phone'] .sp-bpb__main {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'board' 'tools' 'ship';
  gap: 12px;
}

.sp-bpb__stage-area {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background:
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--sp-accent) 12%, transparent), transparent 64%),
    color-mix(in srgb, var(--sp-space-1) 70%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
}

/* A desktop: the board stays in view while a narrow editor's panels scroll beside it. */
.sp-bpb:not([data-layout='phone']) .sp-bpb__stage-area {
  position: sticky;
  top: 8px;
}

.sp-bpb__board {
  position: relative;
  /* As large as fits (--board-w). */
  width: min(100%, var(--board-w));
  aspect-ratio: var(--cols) / var(--rows);
  /* A finger on an empty cell may scroll the page (client/BlueprintStudio C26 places on release);
     a module is dragged, so it keeps the touch. */
  touch-action: pan-y;
}

.sp-bpb[data-layout='phone'] .sp-bpb__board {
  width: 100%;
}

.sp-bpb[data-layout='phone'] .sp-bpb__stage-area {
  padding: 8px;
}

.sp-bpb__cell[data-filled='true'] {
  touch-action: none;
}

.sp-bpb__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sp-bpb__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
}

.sp-bpb__cell {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--sp-line) 70%, transparent);
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--sp-dur-fast) var(--sp-ease-out), box-shadow var(--sp-dur-fast) var(--sp-ease-out);
}

.sp-bpb__cell[data-axis='true'] {
  border-color: color-mix(in srgb, var(--sp-accent) 30%, var(--sp-line));
}

.sp-bpb__cell[data-mirror='true'] {
  border-style: dashed;
}

.sp-bpb__cell:hover:not([disabled]) {
  background: color-mix(in srgb, var(--sp-accent-2) 12%, transparent);
}

.sp-bpb__cell[data-core='true'] {
  border-color: transparent;
  cursor: default;
}

.sp-bpb__cell[data-filled='true'] {
  border-color: transparent;
}

.sp-bpb__cell[data-selected='true'] {
  box-shadow: inset 0 0 0 2px var(--sp-accent-2);
}

.sp-bpb__cell[data-invalid='true'] {
  position: relative;
  background: color-mix(in srgb, var(--sp-danger) 22%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sp-danger) 70%, transparent), inset 0 0 0 2px var(--sp-danger);
  animation: sp-bpb-pulse 1.2s var(--sp-ease-out) infinite alternate;
}

/* A red cell is marked with a sign too, never by its colour alone: a small warning corner. */
.sp-bpb__cell[data-invalid='true']::after {
  content: '!';
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--sp-space-0);
  font: 800 11px/1 var(--sp-font-mono);
  background: var(--sp-danger);
  border-radius: 50%;
}

@keyframes sp-bpb-pulse {
  from { box-shadow: 0 0 6px color-mix(in srgb, var(--sp-danger) 50%, transparent), inset 0 0 0 2px var(--sp-danger); }
  to { box-shadow: 0 0 16px color-mix(in srgb, var(--sp-danger) 80%, transparent), inset 0 0 0 2px var(--sp-danger); }
}

.sp-bpb__cell:focus-visible {
  outline: 2px solid var(--sp-accent-2);
  outline-offset: -2px;
}

/* -------------------------------------------- the banner: the broken rule --- */

.sp-bpb__why {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 8px 14px;
  text-align: left;
  border: 1px solid var(--sp-line);
  border-left-width: 4px;
  border-radius: var(--sp-radius-sm);
}

.sp-bpb__why[data-ok='true'] {
  color: var(--sp-text-dim);
  background: color-mix(in srgb, var(--sp-space-2) 50%, transparent);
  border-left-color: var(--sp-up);
}

.sp-bpb__why[data-ok='false'] {
  color: var(--sp-text);
  background: color-mix(in srgb, var(--sp-danger) 16%, var(--sp-space-1));
  border-color: var(--sp-danger);
  box-shadow: 0 0 var(--sp-glow-sm) color-mix(in srgb, var(--sp-danger) 35%, transparent);
}

.sp-bpb__why-mark {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font: 800 17px/1 var(--sp-font-mono);
  border-radius: 50%;
}

.sp-bpb__why[data-ok='false'] .sp-bpb__why-mark {
  color: var(--sp-space-0);
  background: var(--sp-danger);
}

.sp-bpb__why[data-ok='false'] .sp-bpb__why-mark::before {
  content: '!';
}

/* Nothing broken: a tick. */
.sp-bpb__why[data-ok='true'] .sp-bpb__why-mark {
  border: 1.5px solid var(--sp-up);
}

.sp-bpb__why[data-ok='true'] .sp-bpb__why-mark::before,
.sp-bpb__tick::before {
  content: '';
  width: 5px;
  height: 10px;
  margin-top: -3px;
  border-right: 2px solid var(--sp-up);
  border-bottom: 2px solid var(--sp-up);
  transform: rotate(45deg);
}

.sp-bpb__why-title {
  font: 700 13px/1.2 var(--sp-font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-danger);
}

.sp-bpb__why-text {
  font: 500 14px/1.35 var(--sp-font-ui);
}

.sp-bpb__why[data-ok='true'] .sp-bpb__why-text {
  grid-row: 1 / span 2;
}

/* ------------------------------------------------------------ the panels --- */

.sp-bpb__panel {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--sp-space-1) 86%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
}

.sp-bpb__label {
  font: 600 12px/1 var(--sp-font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-text-faint);
}

.sp-bpb__hint {
  margin: 0;
  font: 400 13px/1.4 var(--sp-font-ui);
  color: var(--sp-text-dim);
}

/* ------------------------------------------------------ the rules readout --- */

.sp-bpb__rules {
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sp-line);
}

.sp-bpb__rule-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-bpb__rule {
  --rule: var(--sp-accent-2);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 6px;
  align-items: center;
  min-height: 22px;
  padding-bottom: 4px;
  font: 500 12.5px/1.2 var(--sp-font-ui);
  color: var(--sp-text-dim);
}

.sp-bpb__rule[data-state='full'] { --rule: var(--sp-xp); }

.sp-bpb__rule[data-state='over'] {
  --rule: var(--sp-danger);
  color: var(--sp-danger);
  font-weight: 700;
}

/* A long rule name takes a second line (Blaster barrels), never an ellipsis. */
.sp-bpb__rule-name {
  min-width: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.sp-bpb__rule-value {
  font: 600 11.5px/1 var(--sp-font-mono);
  letter-spacing: -0.02em;
  color: var(--sp-text);
  white-space: nowrap;
}

.sp-bpb__rule[data-state='over'] .sp-bpb__rule-value {
  color: var(--sp-danger);
}

/* A dot for a budget, a tick for a check that holds, a cross for a broken rule. */
.sp-bpb__rule-mark {
  position: relative;
  width: 10px;
  height: 10px;
}

.sp-bpb__rule[data-kind='budget'] .sp-bpb__rule-mark::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--rule);
  border-radius: 50%;
}

.sp-bpb__rule[data-kind='check'][data-state='ok'] .sp-bpb__rule-mark::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 3px;
  width: 3px;
  height: 7px;
  border-right: 2px solid var(--sp-up);
  border-bottom: 2px solid var(--sp-up);
  transform: rotate(45deg);
}

.sp-bpb__rule[data-state='over'] .sp-bpb__rule-mark::before,
.sp-bpb__rule[data-state='over'] .sp-bpb__rule-mark::after {
  content: '';
  position: absolute;
  inset: auto;
  top: 4px;
  left: -1px;
  width: 12px;
  height: 2px;
  background: var(--sp-danger);
  border: 0;
  border-radius: 1px;
  transform: rotate(45deg);
}

.sp-bpb__rule[data-state='over'] .sp-bpb__rule-mark::after {
  transform: rotate(-45deg);
}

.sp-bpb__rule-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(to right, var(--rule) 0 calc(var(--share, 0) * 100%), color-mix(in srgb, var(--sp-text-dim) 26%, transparent) calc(var(--share, 0) * 100%) 100%);
  border-radius: 1px;
}

/* ------------------------------------------------------------ the palette --- */

.sp-bpb__palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.sp-bpb__group {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.sp-bpb__group[data-group='weapons'],
.sp-bpb__group[data-group='special'],
.sp-bpb__group[data-group='modules'] {
  grid-column: 1 / -1;
}

.sp-bpb__group--tools {
  grid-row: 2;
  grid-column: 4;
}

.sp-bpb__group-name {
  min-height: 12px;
  font-size: 11px;
  white-space: nowrap;
}

.sp-bpb__group-kinds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.sp-bpb__group[data-group='weapons'] .sp-bpb__group-kinds,
.sp-bpb__group[data-group='special'] .sp-bpb__group-kinds,
.sp-bpb__group[data-group='modules'] .sp-bpb__group-kinds {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sp-bpb__kind {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 62px;
  padding: 3px 1px 2px;
  align-content: start;
  color: var(--sp-text);
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
  transition: border-color var(--sp-dur-fast) var(--sp-ease-out), background var(--sp-dur-fast) var(--sp-ease-out);
}

.sp-bpb__kind:hover:not([disabled]) {
  border-color: var(--sp-line-strong);
}

.sp-bpb__kind:focus-visible,
.sp-bpb__weapon:focus-visible,
.sp-bpb__heading:focus-visible,
.sp-bpb__step:focus-visible,
.sp-bpb__play:focus-visible,
.sp-bpb__back:focus-visible,
.sp-bpb__skin-mode:focus-visible,
.sp-bpb__code:focus-visible,
.sp-bpb__name:focus-visible,
.sp-bpb__action:focus-visible {
  outline: 2px solid var(--sp-accent-2);
  outline-offset: 2px;
}

.sp-bpb__kind[aria-pressed='true'] {
  border-color: var(--sp-accent);
  background: color-mix(in srgb, var(--sp-accent) 18%, var(--sp-space-1));
  box-shadow: 0 0 var(--sp-glow-sm) color-mix(in srgb, var(--sp-accent) 35%, transparent);
}

.sp-bpb__kind[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
}

.sp-bpb__kind-icon {
  width: 32px;
  height: 32px;
}

/* A name of two words takes two lines (Reactive Plating), never an ellipsis. */
.sp-bpb__kind-name {
  display: -webkit-box;
  max-width: 100%;
  min-height: 24px;
  overflow: hidden;
  font: 500 10.5px/1.12 var(--sp-font-ui);
  letter-spacing: -0.01em;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.sp-bpb__kind-name[data-long='true'] {
  font-size: 9px;
  letter-spacing: -0.03em;
}

.sp-bpb[data-layout='phone'] .sp-bpb__kind-name {
  font-size: 12px;
}

.sp-bpb[data-layout='phone'] .sp-bpb__kind-name[data-long='true'] {
  font-size: 11px;
}

/* The stage a special module flies from: a numeral in the corner (the line below says it in words). */
.sp-bpb__kind-stage {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  color: var(--sp-xp);
  font: 700 10px/1 var(--sp-font-mono);
  border: 1px solid color-mix(in srgb, var(--sp-xp) 60%, transparent);
  border-radius: 3px;
}

.sp-bpb__erase-glyph {
  position: relative;
  width: 36px;
  height: 36px;
}

.sp-bpb__erase-glyph::before,
.sp-bpb__erase-glyph::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 20%;
  width: 60%;
  height: 3px;
  background: var(--sp-danger);
  border-radius: 2px;
  transform: rotate(45deg);
}

.sp-bpb__erase-glyph::after {
  transform: rotate(-45deg);
}

.sp-bpb__about {
  grid-column: 1 / -1;
  min-height: 36px;
  margin: 0;
  padding: 6px 10px;
  font: 400 12.5px/1.4 var(--sp-font-ui);
  color: var(--sp-text-dim);
  background: color-mix(in srgb, var(--sp-space-0) 60%, transparent);
  border-left: 2px solid var(--sp-accent);
  border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
}

.sp-bpb__about-name {
  color: var(--sp-text);
  font-weight: 700;
}

/* ---------------------------------------------------------------- a gun --- */

.sp-bpb__gun {
  display: grid;
  gap: 8px;
}

.sp-bpb__weapons,
.sp-bpb__headings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-bpb__weapon {
  --weapon: var(--sp-ship-laser);
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  font: 600 14px/1 var(--sp-font-ui);
  color: var(--sp-text);
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
}

.sp-bpb__weapon[data-weapon='scatter'] { --weapon: var(--sp-ship-scatter); }
.sp-bpb__weapon[data-weapon='rocket'] { --weapon: var(--sp-ship-rocket); }

.sp-bpb__weapon[aria-pressed='true'] {
  border-color: var(--weapon);
  background: color-mix(in srgb, var(--weapon) 16%, var(--sp-space-1));
}

.sp-bpb__weapon-dot {
  width: 10px;
  height: 10px;
  background: var(--weapon);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--weapon);
}

.sp-bpb__heading {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-height: 44px;
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
}

.sp-bpb__heading[aria-pressed='true'] {
  border-color: var(--sp-accent-2);
  background: color-mix(in srgb, var(--sp-accent-2) 14%, var(--sp-space-1));
}

.sp-bpb__heading[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

/* The arrow points where the gun fires: 0° is up (the nose), 90° is out to the right. A head on a
   stem, so a diagonal reads as a direction and not as a tilted triangle. */
.sp-bpb__arrow {
  width: 16px;
  height: 20px;
  background: var(--sp-text);
  clip-path: polygon(50% 0, 100% 46%, 64% 46%, 64% 100%, 36% 100%, 36% 46%, 0 46%);
  transform: rotate(var(--turn));
}

.sp-bpb__heading[aria-pressed='true'] .sp-bpb__arrow {
  background: var(--sp-accent-2);
}

/* --------------------------------------------------------- the build order --- */

.sp-bpb__order {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--sp-line);
}

.sp-bpb__order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-bpb__play {
  display: grid;
  place-items: center;
  width: 44px;
  height: 36px;
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
}

.sp-bpb__play-glyph {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid var(--sp-accent-2);
}

.sp-bpb__play[aria-pressed='true'] .sp-bpb__play-glyph {
  width: 10px;
  height: 12px;
  border: 0;
  border-right: 3px solid var(--sp-accent-2);
  border-left: 3px solid var(--sp-accent-2);
}

.sp-bpb__steps {
  display: flex;
  min-width: 0;
  gap: 4px;
  margin: 0;
  padding: 2px 0 6px;
  overflow-x: auto;
  list-style: none;
  touch-action: pan-x;
}

.sp-bpb__step {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  padding: 0;
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  cursor: grab;
  touch-action: none;
}

.sp-bpb__step[data-invalid='true'] {
  border-color: var(--sp-danger);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sp-danger) 60%, transparent);
}

.sp-bpb__step-icon {
  width: 30px;
  height: 30px;
}

.sp-bpb__step-n {
  font: 600 12px/1 var(--sp-font-mono);
  color: var(--sp-text-dim);
}

/* ------------------------------------------- the name, Save, Publish, Fly it --- */

.sp-bpb__save {
  display: grid;
  gap: 10px;
}

.sp-bpb__name-label {
  display: grid;
  gap: 6px;
}

.sp-bpb__name {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  font: 600 17px/1 var(--sp-font-display);
  letter-spacing: 0.04em;
  color: var(--sp-text);
  background: var(--sp-space-0);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-sm);
}

.sp-bpb__name::placeholder {
  color: var(--sp-text-faint);
}

.sp-bpb__name[data-invalid='true'] {
  border-color: var(--sp-danger);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sp-danger) 50%, transparent);
}

/* Each action with its own line under it: two to a row, the second a little wider (Publish is
   the longer word in most languages). */
.sp-bpb__actions {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: 10px 12px;
  align-items: start;
}

.sp-bpb__act {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

/* Appeal and what it does, side by side. */
.sp-bpb__act--wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: 12px;
  align-items: center;
}

.sp-bpb__action {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 6px;
  font-family: var(--sp-font-display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-indent: 0;
  text-transform: uppercase;
  /* A long word (Veröffentlichen) wraps inside its button; it never runs out of it. */
  overflow-wrap: anywhere;
  color: var(--sp-text);
  background: color-mix(in srgb, var(--sp-space-2) 70%, transparent);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-sm);
}

.sp-bpb__action.sp-button--primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sp-action) 22%, var(--sp-space-2)), var(--sp-space-2));
  border-color: var(--sp-action);
}

/* The brackets of the primary button would run over the line under it: Publish keeps its glow. */
.sp-bpb__action.sp-button--primary::before {
  display: none;
}

.sp-bpb__action:disabled {
  color: var(--sp-text-faint);
  border-color: var(--sp-line);
  box-shadow: none;
  background: color-mix(in srgb, var(--sp-space-2) 40%, transparent);
}

/* Something to save: Save is lit. */
.sp-bpb__action--save[data-ready='true'] {
  border-color: var(--sp-up);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sp-up) 22%, var(--sp-space-2)), var(--sp-space-2));
  box-shadow: 0 0 var(--sp-glow-sm) color-mix(in srgb, var(--sp-up) 35%, transparent);
}

.sp-bpb__action--fly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sp-bpb__action--fly:not(:disabled) {
  border-color: color-mix(in srgb, var(--sp-accent-2) 70%, var(--sp-line));
}

.sp-bpb__fly-glyph {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--sp-accent-2);
}

.sp-bpb__action--fly:disabled .sp-bpb__fly-glyph {
  border-left-color: var(--sp-text-faint);
}

.sp-bpb__action--danger {
  color: var(--sp-danger);
}

.sp-bpb__ask-text {
  grid-column: 1 / -1;
  font: 600 14px/1.4 var(--sp-font-ui);
  text-align: center;
}

/* The line under a button: what just happened, or why it is off. */
.sp-bpb__status {
  min-height: 34px;
  margin: 0;
  font: 500 12.5px/1.35 var(--sp-font-ui);
  color: var(--sp-text-dim);
}

.sp-bpb__status--short {
  min-height: 0;
}

.sp-bpb__status[data-tone='bad'] {
  color: var(--sp-danger);
  font-weight: 600;
}

.sp-bpb__status[data-tone='ok'] {
  color: var(--sp-up);
  font-weight: 600;
  animation: sp-bpb-saved 900ms var(--sp-ease-out) 1 both;
}

.sp-bpb__status[data-tone='busy'] {
  color: var(--sp-accent-2);
}

.sp-bpb__tick {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  border: 1.5px solid var(--sp-up);
  border-radius: 50%;
}

.sp-bpb__tick::before {
  width: 3px;
  height: 7px;
  margin-top: -2px;
}

/* A save confirmed: the line arrives with a glow that settles. */
@keyframes sp-bpb-saved {
  from { text-shadow: 0 0 14px var(--sp-up); transform: translateY(-3px); opacity: 0.2; }
  to { text-shadow: none; transform: none; opacity: 1; }
}

/* Sharing: this blueprint's code (a tap copies it). */
.sp-bpb__share {
  display: grid;
  gap: 8px;
}

.sp-bpb__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--sp-text-dim);
  font: 600 13px/1 var(--sp-font-ui);
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px dashed var(--sp-line-strong);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
}

.sp-bpb__code-value {
  color: var(--sp-accent-2);
  font: 700 18px/1 var(--sp-font-mono);
  letter-spacing: 0.18em;
  user-select: all;
}

.sp-bpb__code[data-copied='true'] {
  color: var(--sp-up);
  border-color: var(--sp-up);
}

/* ---------------------------------------- Skinned / Skeleton (docs/blueprints.md §7.2) --- */

.sp-bpb__skin {
  display: flex;
  justify-content: center;
  gap: 0;
}

.sp-bpb__skin-mode {
  min-width: 96px;
  min-height: 44px;
  padding: 0 14px;
  color: var(--sp-text-dim);
  font: 600 13px/1 var(--sp-font-ui);
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px solid var(--sp-line);
  cursor: pointer;
}

.sp-bpb__skin-mode:first-child { border-radius: var(--sp-radius-sm) 0 0 var(--sp-radius-sm); }
.sp-bpb__skin-mode:last-child { border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0; border-left: 0; }

.sp-bpb__skin-mode[aria-pressed='true'] {
  color: var(--sp-text);
  border-color: var(--sp-accent);
  background: color-mix(in srgb, var(--sp-accent) 18%, var(--sp-space-1));
}

/* ----------------------------------------------------------------- a phone --- */

.sp-bpb[data-layout='phone'] .sp-bpb__panel {
  padding: 12px;
}

/* A desktop: a gun's weapon and heading are a little lower than a thumb's target. */
.sp-bpb:not([data-layout='phone']) .sp-bpb__weapon,
.sp-bpb:not([data-layout='phone']) .sp-bpb__heading {
  min-height: 40px;
}

/* A phone: every control a full touch target. */
.sp-bpb[data-layout='phone'] .sp-bpb__play {
  height: 44px;
}

.sp-bpb[data-layout='phone'] .sp-bpb__kind {
  min-height: 68px;
}

.sp-bpb[data-layout='phone'] .sp-bpb__kind-icon {
  width: 36px;
  height: 36px;
}

.sp-bpb[data-layout='phone'] .sp-bpb__bar-name {
  flex: 1 1 100%;
  order: 3;
  font-size: 18px;
}

.sp-bpb[data-layout='phone'] .sp-bpb__why-text {
  font-size: 13.5px;
}

/* ----------------------------------------------------------- Design for --- */

.sp-bpb__goal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.sp-bpb__goal-list {
  display: flex;
  gap: 0;
}

.sp-bpb__goal-pick {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 66px;
  min-height: 44px;
  padding: 5px 8px;
  color: var(--sp-text-dim);
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px solid var(--sp-line);
  border-left-width: 0;
  cursor: pointer;
  transition: border-color var(--sp-dur-fast) var(--sp-ease-out), background var(--sp-dur-fast) var(--sp-ease-out);
}

.sp-bpb__goal-pick:first-child { border-left-width: 1px; border-radius: var(--sp-radius-sm) 0 0 var(--sp-radius-sm); }
.sp-bpb__goal-pick:last-child { border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0; }

.sp-bpb__goal-stage {
  font: 600 11px/1 var(--sp-font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sp-bpb__goal-tier {
  font: 700 12px/1 var(--sp-font-mono);
  white-space: nowrap;
}

.sp-bpb__goal-pick[aria-pressed='true'] {
  color: var(--sp-text);
  background: color-mix(in srgb, var(--sp-accent-2) 16%, var(--sp-space-1));
  border-color: var(--sp-accent-2);
  border-left-width: 1px;
  box-shadow: 0 0 var(--sp-glow-sm) color-mix(in srgb, var(--sp-accent-2) 35%, transparent);
}

.sp-bpb__goal-pick[aria-pressed='true'] .sp-bpb__goal-tier {
  color: var(--sp-accent-2);
}

.sp-bpb__goal-pick:focus-visible,
.sp-bpb__tier:focus-visible,
.sp-bpb__order-mode:focus-visible,
.sp-bpb__viewing:focus-visible {
  outline: 2px solid var(--sp-accent-2);
  outline-offset: 2px;
}

/* ------------------------------------- the meter: the goal, in plain words --- */

.sp-bpb__why[data-ok='true'] {
  position: relative;
  color: var(--sp-text);
  border-left-color: var(--sp-accent-2);
}

.sp-bpb__why[data-ok='true'] .sp-bpb__why-mark {
  border-color: var(--sp-accent-2);
}

.sp-bpb__why[data-ok='true'] .sp-bpb__why-mark::before {
  border-color: var(--sp-accent-2);
}

.sp-bpb__meter-bar {
  grid-column: 2;
  height: 4px;
  margin-top: 4px;
  background: linear-gradient(to right, var(--sp-accent-2) 0 calc(var(--share, 0) * 100%), color-mix(in srgb, var(--sp-text-dim) 26%, transparent) calc(var(--share, 0) * 100%) 100%);
  border-radius: 2px;
}

.sp-bpb__why[data-ok='true']:has(.sp-bpb__meter-bar) .sp-bpb__why-text {
  grid-row: auto;
}

/* ------------------------------------------------------------- the ladder --- */

.sp-bpb__panel--ship {
  gap: 10px;
}

.sp-bpb__ladder {
  display: grid;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px solid var(--sp-line);
}

.sp-bpb__ladder-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
}

.sp-bpb__ladder-note {
  font: 500 11.5px/1.3 var(--sp-font-ui);
  color: var(--sp-text-faint);
}

.sp-bpb__ladder-note[data-state='server'] { color: var(--sp-up); }
.sp-bpb__ladder-note[data-state='failed'],
.sp-bpb__ladder-note[data-state='none'] { color: var(--sp-xp); }

.sp-bpb__idea {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--sp-text);
}

.sp-bpb__ladder-rows {
  display: grid;
  gap: 4px;
}

.sp-bpb__ladder-stage {
  display: grid;
  grid-template-columns: 58px repeat(7, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}

.sp-bpb__ladder-name {
  font: 600 10.5px/1 var(--sp-font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sp-text-faint);
  white-space: nowrap;
}

.sp-bpb__ladder-stage[data-goal='true'] .sp-bpb__ladder-name {
  color: var(--sp-accent-2);
}

.sp-bpb__tier {
  min-width: 0;
  height: 24px;
  padding: 0;
  font: 700 12px/1 var(--sp-font-mono);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color var(--sp-dur-fast) var(--sp-ease-out), background var(--sp-dur-fast) var(--sp-ease-out);
}

/* Offered: lit and solid. A gap: hollow and dashed (a shape as well as a colour). */
.sp-bpb__tier[data-state='offered'] {
  color: var(--sp-space-0);
  background: var(--sp-accent-2);
  border: 1px solid var(--sp-accent-2);
}

.sp-bpb__tier[data-state='gap'] {
  color: var(--sp-text-faint);
  background: transparent;
  border: 1px dashed var(--sp-line-strong);
}

.sp-bpb__tier[data-state='unknown'] {
  color: var(--sp-text-faint);
  background: color-mix(in srgb, var(--sp-space-2) 50%, transparent);
  border: 1px solid var(--sp-line);
  cursor: default;
  opacity: 0.55;
}

.sp-bpb__tier[aria-pressed='true'] {
  box-shadow: 0 0 0 2px var(--sp-space-0), 0 0 0 4px var(--sp-text);
}

.sp-bpb__tier[data-state='gap'][aria-pressed='true'] {
  color: var(--sp-xp);
  border-color: var(--sp-xp);
}

.sp-bpb__tier-view {
  display: grid;
  gap: 6px;
  min-height: 52px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--sp-space-0) 60%, transparent);
  border-left: 2px solid var(--sp-accent-2);
  border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
}

.sp-bpb__tier-view[data-state='gap'] {
  border-left-color: var(--sp-xp);
}

.sp-bpb__tier-text {
  margin: 0;
  font: 500 12.5px/1.35 var(--sp-font-ui);
  color: var(--sp-text);
}

.sp-bpb__tier-view[data-state='whole'] .sp-bpb__tier-text {
  color: var(--sp-text-dim);
}

.sp-bpb__tier-view .sp-bpg__stats {
  margin-top: 0;
}

/* Under the board: the tier it is showing (the way back to the whole ship), and the look toggle. */
.sp-bpb__under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: 100%;
}

.sp-bpb__viewing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--sp-text);
  font: 600 13px/1.2 var(--sp-font-ui);
  background: color-mix(in srgb, var(--sp-accent-2) 14%, var(--sp-space-1));
  border: 1px solid var(--sp-accent-2);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
}

.sp-bpb__viewing-x {
  position: relative;
  width: 12px;
  height: 12px;
}

.sp-bpb__viewing-x::before,
.sp-bpb__viewing-x::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
  background: var(--sp-accent-2);
  border-radius: 1px;
  transform: rotate(45deg);
}

.sp-bpb__viewing-x::after {
  transform: rotate(-45deg);
}

/* --------------------------------------------- the build order's two modes --- */

.sp-bpb__order-head {
  gap: 8px;
}

.sp-bpb__order-modes {
  display: flex;
  margin-left: auto;
}

.sp-bpb__order-mode {
  min-height: 36px;
  padding: 0 10px;
  color: var(--sp-text-dim);
  font: 600 12px/1 var(--sp-font-ui);
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px solid var(--sp-line);
  cursor: pointer;
}

.sp-bpb__order-mode:first-child { border-radius: var(--sp-radius-sm) 0 0 var(--sp-radius-sm); }
.sp-bpb__order-mode:last-child { border-left: 0; border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0; }

.sp-bpb__order-mode[aria-pressed='true'] {
  color: var(--sp-text);
  border-color: var(--sp-accent);
  background: color-mix(in srgb, var(--sp-accent) 18%, var(--sp-space-1));
}

/* A phone: Design for takes its own row, and everything on the ladder is a thumb's target. */
.sp-bpb[data-layout='phone'] .sp-bpb__goal {
  flex: 1 1 100%;
  order: 4;
  flex-wrap: wrap;
  margin-left: 0;
}

.sp-bpb[data-layout='phone'] .sp-bpb__goal-list {
  flex: 1 1 100%;
}

.sp-bpb[data-layout='phone'] .sp-bpb__goal-pick {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 2px;
}

.sp-bpb[data-layout='phone'] .sp-bpb__ladder-stage {
  grid-template-columns: repeat(7, minmax(44px, 1fr));
  gap: 4px;
}

.sp-bpb[data-layout='phone'] .sp-bpb__ladder-name {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.sp-bpb[data-layout='phone'] .sp-bpb__tier {
  height: 44px;
  font-size: 14px;
}

.sp-bpb[data-layout='phone'] .sp-bpb__order-mode {
  min-height: 44px;
  padding: 0 12px;
}

/* The share code in the bar: a compact button. */
.sp-bpb__bar .sp-bpb__code,
.sp-bpb__under .sp-bpb__code {
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
}

.sp-bpb__bar .sp-bpb__code-value,
.sp-bpb__under .sp-bpb__code-value {
  font-size: 15px;
  letter-spacing: 0.14em;
}

/* A phone: the tier's ship, by the ladder. */
.sp-bpb__tier-art {
  width: 100%;
  height: 150px;
}

/* ===================================================== Build and Grow (2026-10-04) ===
   One switch in the bar. Build: the whole ship, editable, with its tools. Grow: the board as a
   viewer over one timeline of the thirty tiers, a handle on it, and Play. */

.sp-bpb__modes {
  display: flex;
  gap: 0;
}

.sp-bpb__mode {
  min-width: 84px;
  min-height: 44px;
  padding: 0 18px;
  color: var(--sp-text-dim);
  font: 700 13px/1 var(--sp-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px solid var(--sp-line-strong);
  cursor: pointer;
}

.sp-bpb__mode:first-child { border-radius: var(--sp-radius-sm) 0 0 var(--sp-radius-sm); }
.sp-bpb__mode:last-child { border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0; border-left: 0; }

.sp-bpb__mode[aria-pressed='true'] {
  color: var(--sp-text);
  border-color: var(--sp-accent);
  background: color-mix(in srgb, var(--sp-accent) 26%, var(--sp-space-1));
}

.sp-bpb__mode:focus-visible,
.sp-bpb__hist:focus-visible,
.sp-bpb__seg:focus-visible {
  outline: 2px solid var(--sp-accent-2);
  outline-offset: 2px;
}

/* Undo and Redo, under the board. */
.sp-bpb__history {
  display: flex;
  gap: 6px;
}

.sp-bpb__hist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--sp-text);
  font: 600 13px/1 var(--sp-font-ui);
  background: color-mix(in srgb, var(--sp-space-2) 60%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
}

.sp-bpb__hist:disabled {
  color: var(--sp-text-faint);
  cursor: default;
  opacity: 0.55;
}

.sp-bpb__hist-glyph {
  width: 12px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  position: relative;
}

.sp-bpb__hist-glyph::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: -6px;
  border: 5px solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
}

.sp-bpb__hist-glyph[data-dir='redo']::after {
  left: auto;
  right: -6px;
}

/* The rules as one quiet line; the list under it only holds what is broken or at its limit. */
.sp-bpb__rules-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 500 13px/1.35 var(--sp-font-ui);
  color: var(--sp-text-dim);
}

.sp-bpb__rules-line[data-ok='false'] { color: var(--sp-danger); }
.sp-bpb__rules-line[data-ok='true'] .sp-bpb__rule-mark { background: var(--sp-up); }
.sp-bpb__rules-line[data-ok='false'] .sp-bpb__rule-mark { background: var(--sp-danger); }
.sp-bpb__rules-line .sp-bpb__rule-mark { flex: none; width: 8px; height: 8px; border-radius: 50%; }

.sp-bpb__note,
.sp-bpb__notice {
  margin: 0;
  padding: 6px 10px;
  font: 500 12.5px/1.35 var(--sp-font-ui);
  color: var(--sp-text);
  background: color-mix(in srgb, var(--sp-xp) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sp-xp) 45%, var(--sp-line));
  border-radius: var(--sp-radius-sm);
}

.sp-bpb__palette .sp-bpb__note { grid-column: 1 / -1; }

.sp-bpb__notice {
  background: color-mix(in srgb, var(--sp-up) 12%, transparent);
  border-color: color-mix(in srgb, var(--sp-up) 45%, var(--sp-line));
}

/* Build's summary: where the ship flies, in words, and its bars. */
.sp-bpb__summary {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--sp-line);
}

.sp-bpb__flies {
  margin: 0;
  font: 600 14px/1.35 var(--sp-font-ui);
  color: var(--sp-text);
}

/* Grow: the board is a viewer, and the timeline stands under it. */
.sp-bpb[data-mode='grow'] { --sp-bpb-above: 452px; }
.sp-bpb__board[data-view='true'] { cursor: default; }

.sp-bpb__timeline {
  display: grid;
  gap: 4px;
  width: 100%;
}

.sp-bpb__stages {
  display: flex;
  gap: 0;
}

.sp-bpb__stage-name {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 2px 2px;
  overflow: hidden;
  font: 700 10.5px/1.2 var(--sp-font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  text-overflow: clip;
  color: var(--sp-text-faint);
  border-left: 1px solid var(--sp-line-strong);
}

.sp-bpb__stage-name:first-child { border-left-color: transparent; }
.sp-bpb__stage-name[data-here='true'] { color: var(--sp-text); }
.sp-bpb__stage-name[data-goal='true'] { color: var(--sp-accent-2); }

.sp-bpb__track {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 44px;
  touch-action: none;
  cursor: pointer;
  border-radius: var(--sp-radius-sm);
}

.sp-bpb__seg {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 12px 1px;
  padding: 0;
  background: color-mix(in srgb, var(--sp-space-2) 80%, transparent);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}

.sp-bpb__seg[data-state='offered'] { background: var(--sp-accent-2); }

/* A gap: hatched, never colour alone (its name says why). */
.sp-bpb__seg[data-state='gap'] {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sp-xp) 70%, transparent) 0 2px, transparent 2px 5px);
  outline: 1px solid color-mix(in srgb, var(--sp-xp) 55%, transparent);
  outline-offset: -1px;
}

/* A stage's first tier: its boundary mark. */
.sp-bpb__seg[data-boundary='true']::before {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -2px;
  width: 2px;
  background: var(--sp-line-strong);
}

.sp-bpb__seg[aria-pressed='true'] { margin-top: 6px; margin-bottom: 6px; }

.sp-bpb__handle {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 50%;
  width: 14px;
  margin-left: -7px;
  background: var(--sp-text);
  border: 2px solid var(--sp-space-0);
  border-radius: 7px;
  box-shadow: 0 0 0 1px var(--sp-accent-2);
  pointer-events: none;
}

.sp-bpb__ends {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 11px/1.2 var(--sp-font-mono);
  color: var(--sp-text-faint);
}

.sp-bpb__stage-note {
  margin: 0;
  padding: 8px 10px;
  font: 500 13px/1.4 var(--sp-font-ui);
  color: var(--sp-text);
  background: color-mix(in srgb, var(--sp-accent) 14%, transparent);
  border-left: 3px solid var(--sp-accent);
  border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
}

/* Play is Grow's main button. */
.sp-bpb .sp-bpb__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 140px;
  height: auto;
  min-height: 44px;
  padding: 0 22px;
}

.sp-bpb .sp-bpb__play .sp-bpb__play-glyph { border-left-color: currentColor; }
.sp-bpb .sp-bpb__play[aria-pressed='true'] .sp-bpb__play-glyph { border-right-color: currentColor; border-left-color: currentColor; }

.sp-bpb__flight {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--sp-line);
}

.sp-bpb__share { display: flex; }
.sp-bpb__share .sp-bpb__code { min-height: 40px; }

/* ============================================= Stage designs (2026-10-04) ===
   The bar's five buttons are the stage tabs: each carries a mark for empty, designed or broken.
   An empty stage shows its choices where the board would stand. */

.sp-bpb__stage-mark {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border: 1px solid var(--sp-text-faint);
  border-radius: 50%;
  vertical-align: 1px;
}

.sp-bpb__stage-mark[data-state='designed'] { background: var(--sp-up); border-color: var(--sp-up); }
.sp-bpb__stage-mark[data-state='broken'] { background: var(--sp-danger); border-color: var(--sp-danger); }
.sp-bpb__goal-pick[data-state='empty']:not([aria-pressed='true']) .sp-bpb__goal-tier { color: var(--sp-text-faint); }

.sp-bpb__empty {
  display: grid;
  justify-items: start;
  gap: 12px;
  max-width: 640px;
  padding: 20px;
  background: color-mix(in srgb, var(--sp-space-1) 70%, transparent);
  border: 1px dashed var(--sp-line-strong);
  border-radius: var(--sp-radius);
}

.sp-bpb__empty-title {
  margin: 0;
  font: 700 18px/1.25 var(--sp-font-display);
  color: var(--sp-text);
}

.sp-bpb__empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sp-bpb__empty-actions .sp-bpb__action { min-height: 44px; padding: 0 18px; }
.sp-bpb__empty .sp-bpb__save { width: 100%; padding-top: 12px; border-top: 1px solid var(--sp-line); }
.sp-bpb__timeline .sp-bpb__order-modes { justify-self: center; }

/* The stage tabs stand on a row of their own under the bar's first, so the bar never wraps by chance. */
.sp-bpb:not([data-layout='phone']) .sp-bpb__goal { flex-basis: 100%; margin-left: 0; }
.sp-bpb { --sp-bpb-above: 408px; --sp-bpb-top: 256px; }
.sp-bpb[data-mode='grow'] { --sp-bpb-above: 548px; }

/* A tier offered a little under its strength. */
.sp-bpb__seg[data-state='offered'][data-light='true'] { background: color-mix(in srgb, var(--sp-accent-2) 50%, var(--sp-space-2)); }

/* Grow: the viewer has no Skinned / Skeleton choice (it is Build's), and its line stands with the tier. */
.sp-bpb[data-mode='grow'] .sp-bpb__skin { display: none; }
.sp-bpb[data-mode='grow'] { --sp-bpb-above: 462px; }

/* A phone: five tabs across, so each one's two lines are small and may not push the row wide. */
.sp-bpb[data-layout='phone'] .sp-bpb__goal-list { min-width: 0; max-width: 100%; }
.sp-bpb[data-layout='phone'] .sp-bpb__goal-pick { overflow: hidden; }
.sp-bpb[data-layout='phone'] .sp-bpb__goal-stage { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
.sp-bpb[data-layout='phone'] .sp-bpb__goal-tier { font-family: var(--sp-font-ui); font-size: 9.5px; letter-spacing: -0.02em; white-space: nowrap; }
.sp-bpb[data-layout='phone'] .sp-bpb__goal-pick { padding-left: 2px; padding-right: 2px; }
.sp-bpb[data-layout='phone'] .sp-bpb__stage-mark { width: 6px; height: 6px; margin-right: 3px; }