.wb { display: flex; flex-direction: column; gap: .75rem; max-width: 100%; }
.wb-metrics { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; padding: .6rem .9rem; }
.wb-metrics b { display: block; font-size: 1.15rem; line-height: 1.1; }
.wb-metrics span { font-size: .75rem; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.wb-toolbar { display: flex; flex-wrap: wrap; gap: .4rem; }
.wb-status { min-height: 1.4rem; font-size: .9rem; }
.wb-status.err { color: #dc3545; }
.wb-status.ok { color: #198754; }
.wb-status ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.wb-main { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 14rem; gap: .75rem; align-items: start; }
@media (max-width: 991px) { .wb-main { grid-template-columns: minmax(0, 1fr); } .wb-palette { flex-direction: row !important; flex-wrap: wrap; } }
.wb-palette { display: flex; flex-direction: column; gap: .35rem; }
.wb-palette h6 { margin: .5rem 0 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; width: 100%; }
.wb-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; border: 1px solid var(--bs-border-color, #ccc); border-radius: .4rem;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; background: var(--bs-body-bg, #fff); font-size: .85rem; }
.wb-swatch { width: 1rem; height: 1rem; border-radius: 3px; flex: none; }
.wb-ghost { position: fixed; z-index: 2000; pointer-events: none; opacity: .75; border: 2px dashed #333; border-radius: 3px; }
.wb-stage { overflow: auto; max-width: 100%; border: 1px solid var(--bs-border-color, #ccc); border-radius: .4rem; background: var(--bs-tertiary-bg, #f4f4f4); }
.wb-stage svg { display: block; user-select: none; -webkit-user-select: none; }
.wb-el { touch-action: none; cursor: move; }
.wb-el rect.body { stroke-width: 1.5; }
.wb-el.sel rect.body { stroke: #0d6efd; stroke-width: 3; }
.wb-el.bad rect.body { fill: rgba(220, 53, 69, .55); stroke: #dc3545; stroke-width: 3; }
.wb-el text { pointer-events: none; font: 600 11px system-ui, sans-serif; fill: #111; }
.wb-handle { fill: #0d6efd; stroke: #fff; stroke-width: 1.5; touch-action: none; }
.wb-props { padding: .75rem; font-size: .9rem; }
.wb-props label { display: block; font-size: .75rem; margin-top: .5rem; opacity: .75; }
.wb-props .none { opacity: .65; }
.wb-props .why { color: #dc3545; font-size: .8rem; margin-top: .6rem; }

/* Tablet and phone: the numbers stay in view, pieces and buttons are big enough for a finger. */
.wb-metrics { position: sticky; top: 0; z-index: 20; }
@media (max-width: 991px) {
  .wb-item { padding: .65rem .85rem; font-size: 1rem; min-height: 2.75rem; }
  .wb-toolbar .btn { min-height: 2.5rem; }
  .wb-swatch { width: 1.25rem; height: 1.25rem; }
}
.wb-bay { font-family: system-ui, sans-serif; font-weight: 700; fill: #111; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 2px; }

/* Test run overlay */
.tr-overlay { position: fixed; inset: 0; z-index: 1080; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: .5rem; }
.tr-box { background: #fff; border-radius: .5rem; padding: .75rem; width: min(100%, 1100px); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: .5rem; }
.tr-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tr-bar select { display: inline-block; width: auto; }
.tr-canvas { width: 100%; max-width: 100%; height: auto; background: #f4f4f4; }

.wb-savehelp { margin: .25rem 0; }
.wb-signup { padding: 1rem; border: 2px solid var(--bs-primary, #0d6efd); }
.wb-signup-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wb-signup-actions .btn { min-height: 2.5rem; }
.wb-start { display: grid; gap: 1rem; margin-bottom: 1rem; }
.wb-start-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.wb-start-choices .ui-panel { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; padding: 1rem; }
.wb-start-choices .ui-panel p { margin: 0; opacity: .8; }
.wb-size { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-top: .5rem; }
.wb-size input { width: 6rem; }
@media (max-width: 575px) {
  .wb-toolbar .btn { flex: 1 1 calc(33% - .4rem); white-space: nowrap; padding-left: .35rem; padding-right: .35rem; }
  .wb-toolbar .btn[data-act="save"] { flex-basis: 100%; order: 99; }
  .wb-toolbar .ms-auto { margin-left: 0 !important; }
}
.wb-start[hidden], .wb-signup[hidden] { display: none !important; }