/* The Majic Toolbox (/toolbox/): a rolling tool chest of parts and a workbench where parts bolt together. */
.tb-stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; margin-top: var(--space-10); }
@media (max-width: 920px) { .tb-stage { grid-template-columns: minmax(0, 1fr); } }

/* The chest keeps its own paint in both themes: it is an object on the page, not page chrome. */
.chest { --paint: #2b1f66; --face: #3a2c8a; --edge: #171037; --chrome: #d9d2ff; --lit: #35e0cf;
  position: relative; background: var(--paint); border-radius: 22px 22px 12px 12px; padding: 14px 16px 34px;
  box-shadow: inset 0 -7px 0 var(--edge), 0 28px 48px -28px rgba(20, 10, 60, 0.6); }
.chest-lid { position: relative; height: 22px; margin: 0 6px 6px; border-radius: 10px; background: var(--edge); }
.chest-lid::after { content: ""; position: absolute; left: 50%; top: -16px; width: 120px; height: 22px; transform: translateX(-50%);
  border: 6px solid var(--chrome); border-bottom: 0; border-radius: 16px 16px 0 0; opacity: 0.9; }
.chest-name { position: absolute; right: 14px; top: 3px; font: 700 0.72rem/16px var(--font-display); color: var(--chrome); letter-spacing: 0.04em; }
.drawer { background: var(--face); border-radius: 9px; padding: 10px 12px 12px; margin-top: 9px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-label { font: 700 var(--text-sm)/1.2 var(--font-display); color: #f1edff; }
.drawer-pull { flex: 0 0 auto; width: 58px; height: 8px; border-radius: 99px; background: var(--chrome); opacity: 0.8; }
.parts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.part { font: 600 0.92rem/1.15 var(--font-body); color: #1a1240; background: #f3f0ff; border: 0; border-radius: 6px; padding: 8px 11px;
  cursor: pointer; box-shadow: 0 2px 0 #0d0830; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.part:hover { background: #ffffff; }
.part[aria-pressed="true"] { background: var(--lit); color: #04201c; }
.part:focus-visible { outline: 3px solid var(--lit); outline-offset: 2px; }
.part:active { transform: translateY(1px); box-shadow: 0 1px 0 #0d0830; }
.wheels { position: absolute; left: 22px; right: 22px; bottom: -14px; display: flex; justify-content: space-between; pointer-events: none; }
.wheels i { width: 28px; height: 28px; border-radius: 50%; background: #141414; box-shadow: inset 0 0 0 7px #3a3a3a, inset 0 0 0 10px #141414; }

/* The workbench */
.bench { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.bench h2 { font-size: var(--text-lg); margin: 0; }
.bench > p { color: var(--color-text-muted); margin-top: var(--space-2); }
.builds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }
.build-btn { font: 600 var(--text-sm)/1.2 var(--font-body); background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border);
  border-radius: 99px; padding: 8px 14px; cursor: pointer; }
.build-btn[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.build-btn:focus-visible, .bench-clear:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.rail { list-style: none; margin: var(--space-5) 0 0; padding: 0; min-height: 3rem; }
.rail li { position: relative; padding: 0 0 14px 34px; }
.rail li::before { content: ""; position: absolute; left: 7px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-teal); box-shadow: 0 0 0 4px var(--color-teal-highlight); }
.rail li::after { content: ""; position: absolute; left: 13px; top: 22px; bottom: 2px; width: 2px; background: var(--color-teal); opacity: 0.5; }
.rail li:last-child::after { display: none; }
.rail b { display: block; font-family: var(--font-display); }
.rail span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.rail .empty { padding-left: 0; color: var(--color-text-muted); }
.rail .empty::before, .rail .empty::after { display: none; }
.bench-out { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.bench-out p { margin: 0; }
.bench-out small { display: block; margin-top: var(--space-2); color: var(--color-text-faint); }
.bench-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: var(--space-4); }
.bench-clear { background: none; border: 0; color: var(--color-text-muted); text-decoration: underline; cursor: pointer; font: inherit; padding: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .rail li.in { animation: bolt 0.32s ease-out both; }
  @keyframes bolt { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
}

/* The parts catalog */
.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--space-8) var(--space-10); margin-top: var(--space-8); }
.catalog h3 { font-size: var(--text-lg); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-primary); }
.catalog dl { margin: 0; }
.catalog dt { font-family: var(--font-display); font-weight: 700; margin-top: var(--space-4); }
.catalog dd { margin: 4px 0 0; color: var(--color-text-muted); }
.catalog dd a { margin-right: var(--space-4); }