/* Gearworks: the bench and its surround. Layout and the stage only; every colour and face is an artifact variable (--gwa-*) set by gearworks-artifact.css, so
   nothing here uses a cabinet component. Buttons and the specimen label are the works' own gw-btn and gw-specimen.
   Every colour on the bench is read from these tokens by gearworks.js. */

.gw { margin: 0 0 var(--space-12); }
body:has(.gw) .site-title { padding-top: var(--space-6); }
body:has(.gw) .site-content { padding-top: var(--space-4); }
body:has(.gw) main h1 { font: var(--type-heading); }
@media (min-width: 48rem) {
  body:has(.gw) main h1 { font: var(--type-display); }
}

.gw-stage {
  --gw-bezel-w: 9px;
  --gw-rivet: var(--gw-outline, var(--gwa-ink));
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: clamp(calc(var(--space-16) * 5), 62svh, calc(var(--space-16) * 9));
  overflow: hidden;
  /* A riveted brass bezel: a band of brass with an ink line inside it and rivets at the corners, mid-edges and quarter points, all painted as backgrounds under a transparent
     border. The --gw-* colours are set by the script from palette.js (decisions/026); the design tokens are the fallback before it runs. */
  border: var(--gw-bezel-w) solid transparent;
  background:
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 0 0 / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 25% 0 / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 50% 0 / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 75% 0 / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 100% 0 / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 0 100% / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 25% 100% / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 50% 100% / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 75% 100% / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 100% 100% / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 0 25% / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 0 50% / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 0 75% / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 100% 25% / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 100% 50% / 9px 9px no-repeat border-box,
    radial-gradient(circle at center, var(--gw-rivet) 0 28%, transparent 32%) 100% 75% / 9px 9px no-repeat border-box,
    linear-gradient(var(--gw-walnut, var(--gwa-plate)), var(--gw-walnut, var(--gwa-plate))) padding-box,
    linear-gradient(var(--gw-bezel, var(--gwa-brass)), var(--gw-bezel, var(--gwa-brass))) border-box;
  box-shadow: var(--gwa-shadow);
  touch-action: none;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
.gw-stage canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.gw-stage canvas:focus-visible { outline: var(--stroke-block) solid var(--gwa-focus); outline-offset: calc(var(--stroke-block) * -1); }
/* The ink line inside the band, over the canvas. */
.gw-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border: var(--stroke-ink) solid var(--gw-outline, var(--gwa-ink)); }

.gw-prompt {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  box-sizing: border-box;
  width: min(calc(100% - var(--space-6)), calc(var(--space-16) * 6));
  display: none;
  gap: var(--space-3);
  justify-items: center;
  padding: var(--space-6);
  text-align: center;
  background: var(--gwa-plate);
  border: var(--stroke-ink) solid var(--gwa-edge);
  border-radius: var(--radius-md);
  box-shadow: var(--gwa-shadow);
  z-index: 3;
}
.gw-prompt:has(.gw-message:not(:empty)), .gw-prompt:has([data-gw-start]:not([hidden])) { display: grid; }
.gw-message { margin: 0; font: var(--gwa-text); color: var(--gwa-ink); }
.gw-message:empty { display: none; }
@media (scripting: none) { [data-gw-message] { display: none; } }
.gw-message[data-kind="error"] { color: var(--gwa-danger); font-weight: 700; }
.gw-start { margin: 0; }
.gw-start[hidden], .gw-start:has([hidden]) { display: none; }

.gw-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.gw-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 var(--space-1);
  font: var(--gwa-small);
  color: var(--gwa-ink);
  background: var(--gwa-plate);
  border: var(--stroke-hair) solid var(--gwa-edge);
  white-space: nowrap;
}
.gw-label[hidden] { display: none; }

.gw-jam {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  font: var(--gwa-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gwa-danger);
  background: var(--gwa-plate);
  border: var(--stroke-block) solid var(--gwa-danger);
  border-radius: var(--radius-sm);
  rotate: -4deg;
  pointer-events: none;
  z-index: 2;
}
.gw-jam[hidden] { display: none; }
.gw-jam-note {
  position: absolute;
  top: calc(var(--space-16) + var(--space-2));
  left: var(--space-4);
  max-width: min(calc(100% - var(--space-8)), calc(var(--space-16) * 6));
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font: var(--gwa-small);
  color: var(--gwa-ink);
  background: var(--gwa-plate);
  border: var(--stroke-ink) solid var(--gwa-danger);
  pointer-events: none;
  z-index: 2;
}
.gw-jam-note[hidden] { display: none; }
.gw-reason {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font: var(--gwa-small);
  font-weight: 700;
  color: var(--gwa-danger);
  background: var(--gwa-plate);
  border: var(--stroke-ink) solid var(--gwa-danger);
  pointer-events: none;
  z-index: 2;
}
.gw-reason[hidden] { display: none; }

.gw-tools { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.gw-tools[hidden] { display: none; }
.gw-bar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.gw-trayBox { display: grid; gap: var(--space-2); }
.gw-trayH { margin: 0; font: var(--gwa-small); color: var(--gwa-muted); }
.gw-tray { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.gw-part { touch-action: none; user-select: none; -webkit-user-select: none; }

/* The parts cabinet: a row of drawer fronts, each with a brass label holder and a picture of a typical part, and the open drawer below it. Pictures are
   drawn from the part meshes on the server (decisions/045). Their path classes are filled here, in the sprite sheet where the paths live, from the metal
   colour each picture's own svg sets: a `use` instance inherits it. The selectors are single classes, because a descendant selector does not
   reach the instance. */
.gw-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.gw-fronts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) {
  .gw-fronts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.gw-front {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-1);
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-1) var(--space-2);
  color: var(--gwa-ink);
  background: var(--gw-walnut, var(--gwa-plate));
  border: var(--stroke-hair) solid var(--gwa-edge);
  border-radius: 3px;
  box-shadow: inset 0 var(--stroke-ink) 0 var(--gwa-gloss), 0 var(--stroke-ink) 0 var(--gwa-edge);
  cursor: pointer;
  touch-action: manipulation;
}
.gw-front .gw-pic { width: 100%; max-width: calc(var(--space-16) + var(--space-4)); height: auto; aspect-ratio: 3 / 2; }
.gw-holder {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font: var(--gwa-label);
  letter-spacing: .04em;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--gwa-on-brass);
  background: var(--gwa-brass);
  border: var(--stroke-hair) solid var(--gwa-edge);
  border-radius: 2px;
}
@media (max-width: 47.99rem) {
  .gw-holder { letter-spacing: 0; padding-inline: var(--space-1); }
}
.gw-front[aria-expanded="true"] { border-width: var(--stroke-block); box-shadow: inset 0 var(--stroke-ink) 0 var(--gwa-gloss), 0 0 0 var(--stroke-hair) var(--gwa-edge); transform: translateY(var(--stroke-ink)); }
.gw-front[aria-expanded="true"] .gw-holder { background: var(--gwa-brass-d); color: var(--gwa-plate); }
.gw-front:hover .gw-holder { background: var(--gwa-brass-d); color: var(--gwa-plate); }
.gw-drawers { display: grid; }
.gw-drawer { display: flex; flex-wrap: wrap; align-items: start; gap: var(--space-2) var(--space-4); max-height: calc(var(--space-16) * 4); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2); background: var(--gwa-plate); border: var(--stroke-ink) solid var(--gwa-edge); border-radius: 3px; }
.gw-drawer[hidden] { display: none; }
.gw-compartment { display: grid; gap: var(--space-1); }
.gw-tile {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-content: start;
  gap: var(--space-1);
  box-sizing: border-box;
  width: calc(var(--space-16) + var(--space-8));
  min-height: 2.75rem;
  padding: var(--space-1);
  font: var(--gwa-label);
  letter-spacing: .02em;
  text-align: center;
  color: var(--gwa-ink);
  background: var(--gwa-paper);
  border: var(--stroke-hair) solid var(--gwa-edge);
  border-radius: 3px;
  cursor: pointer;
  touch-action: none;
}
.gw-tile:hover { border-color: var(--gwa-brass-d); box-shadow: 0 0 0 var(--stroke-hair) var(--gwa-brass-d); }
.gw-tile[aria-pressed="true"] { border-width: var(--stroke-block); background: var(--gwa-brass); color: var(--gwa-on-brass); }
.gw-pic { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; shape-rendering: crispEdges; }
.gw-pname { overflow-wrap: anywhere; }
.gw-pno { font: var(--gwa-label); letter-spacing: .04em; color: var(--gwa-muted); }
.gw-tile[aria-pressed="true"] .gw-pno { color: var(--gwa-on-brass); }
.gwp-m { fill: currentColor; }
.gwp-s1 { fill: var(--gwa-sink); opacity: .5; }
.gwp-s2 { fill: var(--gwa-sink); }
.gwp-hl { fill: var(--gwa-gloss); }
.gwp-ol { fill: var(--gwa-edge); }
.gw-metal-brass { color: var(--gw-brass, var(--gwa-brass)); }
.gw-metal-copper { color: var(--gw-copper, var(--gwa-brass-d)); }
.gw-metal-steel { color: var(--gw-steel, var(--gwa-muted)); }
.gw-metal-blued { color: var(--gw-blued, var(--gwa-brass)); }
.gw-metal-dark-brass { color: var(--gw-dark-brass, var(--gwa-brass-d)); }
@media (prefers-reduced-motion: reduce) {
  .gw-front, .gw-tile { transition: none; }
  .gw-front[aria-expanded="true"] { transform: none; }
}
.gw-panel {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  max-height: 58%;
  overflow-y: auto;
  z-index: 2;
  touch-action: pan-y;
  cursor: default;
}
.gw-panel[hidden] { display: none; }
.gw-panel .gw-specimen { max-width: none; margin: 0; padding: var(--space-3); background: var(--gwa-plate); }
.gw-panel .gw-specimen-name { margin: 0; }
@media (min-width: 48rem) {
  .gw-panel { right: auto; width: calc(var(--space-16) * 5); max-height: calc(100% - var(--space-6)); }
}
.gw-stage:has(.gw-reason:not([hidden])) .gw-panel { bottom: calc(var(--space-12) + var(--space-3)); }
.gw-panel-controls { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.gw-panel-field { display: flex; align-items: center; gap: var(--space-2); font: var(--gwa-small); }
/* A driving ring's places, top to bottom, as one row of buttons: the pressed one is where the ring is (decisions/048). */
.gw-segmented { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.gw-segmented .gw-btn { min-height: calc(var(--space-12) - var(--space-1)); } /* 44 px: a ring is shifted by finger as often as by mouse */
.gw-segmented .gw-btn[aria-pressed="true"]::before { content: "\25CF\00A0"; }
.gw-panel-field input { min-width: calc(var(--space-16) * 2); accent-color: var(--gwa-brass-d); }
.gw-status { margin: 0; min-height: var(--space-6); font: var(--gwa-small); color: var(--gwa-muted); }
.gw-status:empty { display: none; }
.gw-status[data-kind="error"] { color: var(--gwa-danger); font-weight: 700; }

.gw-table { width: 100%; border-collapse: collapse; font: var(--gwa-small); margin: var(--space-3) 0 var(--space-8); }
.gw-table :is(th, td) { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: var(--stroke-hair) solid var(--gwa-rule); }
.gw-table thead th { font: var(--gwa-label); letter-spacing: .08em; text-transform: uppercase; color: var(--gwa-muted); }
.gw-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gw-key { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.gw-key li { display: flex; align-items: baseline; gap: var(--space-2); font: var(--gwa-text); }
.gw-swatch { display: inline-block; flex: none; width: var(--space-4); height: var(--space-4); border: var(--stroke-ink) solid var(--gwa-edge); translate: 0 var(--space-1); }
.gw-swatch-motor { background: var(--gw-copper, var(--gwa-brass-d)); }
.gw-swatch-driven { background: var(--gw-brass, var(--gwa-brass-d)); }
.gw-swatch-idle { background: var(--gw-steel, var(--gwa-muted)); }
.gw-swatch-rack { background: var(--gw-blued, var(--gwa-brass)); }
.gw-swatch-attach { background: var(--gw-dark-brass, var(--gwa-brass-d)); }
.gw-swatch-locked { background: var(--gw-axle, var(--gwa-edge)); }
.gw-swatch-bad { background: var(--gw-jam, var(--gwa-plate)); border-color: var(--gwa-danger); }
@media (max-width: 47.99rem) {
  .gw-panel { max-height: 50%; }
  .gw-panel .gw-specimen-cat { display: none; }
  .gw-panel .gw-specimen-name { font: var(--gwa-label); }
  .gw-panel-controls { gap: var(--space-2); margin-top: var(--space-2); }
  .gw-table { display: block; overflow-x: auto; }
}