/* Crown Caliber — css/workshop.css
   The assembly bench inside #workshop-root. tokens.css variables only.
   Token art is only ever drawn at whole multiples of its 192 px canvas
   (192 / 96 / 384 on desktop, 128 / 64 / 256 on a phone), and art plates
   carry no CSS border: outlines are box-shadows, so the art keeps its grid. */

#workshop-root .wk { color: var(--ink-2); font: var(--w-reg) var(--fs-md)/var(--lh-snug) var(--font-ui); }
#workshop-root .wk [hidden] { display: none !important; }
#workshop-root .wk p, #workshop-root .wk h3 { margin: 0; }
#workshop-root button:focus-visible { outline: none; box-shadow: var(--focus); }

#workshop-root .wk-k {
  font: var(--w-semi) var(--fs-label)/1.4 var(--font-ui);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brass-ink);
}

/* ---- layout: trays | station ---- */
#workshop-root .wk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-7); align-items: start; }
#workshop-root .wk-grid:not(.has-bench) { grid-template-columns: minmax(0, 480px); justify-content: center; }
#workshop-root .wk-grid:not(.has-bench) .wk-trays { display: none; }
#workshop-root .wk-trays { display: grid; gap: var(--s-6); min-width: 0; }

/* ---- a tray: one caliber ---- */
#workshop-root .wk-tray {
  padding: var(--s-5) var(--s-6) var(--s-6);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-1);
}
#workshop-root .wk-tray-quiet { background: var(--inset-bg); box-shadow: none; }
#workshop-root .wk-tray-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5); }
#workshop-root .wk-tray-name { font: var(--w-med) var(--fs-h3)/1.1 var(--font-display); color: var(--ink); }
#workshop-root .wk-tray-hint { font-size: var(--fs-sm); color: var(--ink-3); }
#workshop-root .wk-empty { padding: var(--s-6); background: var(--inset-bg); border: 1px dashed var(--line-2); border-radius: var(--r-1); color: var(--ink-3); font-size: var(--fs-md); }

#workshop-root .wk-tiles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-4); }
#workshop-root .wk-cell { margin: 0; }
#workshop-root .wk-tile {
  display: grid; gap: var(--s-2); justify-items: start;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
}
#workshop-root button.wk-tile { cursor: pointer; }
#workshop-root .wk-plate {
  display: block; position: relative; width: 192px; height: 192px;
  background: var(--plate); box-shadow: 0 0 0 1px var(--plate-line);
  transition: box-shadow var(--dur-1) var(--ease), opacity var(--dur-2) var(--ease);
}
#workshop-root .wk-img { display: block; width: 100%; height: 100%; image-rendering: var(--art-rendering); color: transparent; font-size: 0; }
#workshop-root .wk-img.is-missing { visibility: hidden; }
#workshop-root .wk-img-wait { background: var(--plate); }
#workshop-root button.wk-tile:hover .wk-plate { box-shadow: 0 0 0 1px var(--plate-line), 0 0 0 4px var(--brass-soft); }
#workshop-root .wk-tile.is-picked .wk-plate { box-shadow: 0 0 0 2px var(--brass), 0 0 0 6px var(--brass-soft); }
#workshop-root .wk-tile.is-face .wk-plate { box-shadow: 0 0 0 3px var(--brass-hi), 0 0 0 7px var(--brass-line); }
#workshop-root .wk-tile.is-dim { opacity: .38; }
#workshop-root .wk-cap {
  display: flex; align-items: center; gap: var(--s-2);
  font: var(--w-semi) var(--fs-xs)/1.2 var(--font-num); font-variant-numeric: var(--num);
  letter-spacing: .05em; color: var(--ink-3);
}
#workshop-root .wk-badge {
  padding: 3px var(--s-2); border-radius: var(--r-1);
  background: var(--act); color: var(--act-ink);
  font: var(--w-semi) var(--fs-label)/1 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase;
}
#workshop-root .wk-tile.is-picked:not(.is-face) .wk-badge { background: var(--brass-soft); color: var(--brass-ink); }

/* ---- the station: three slots and the one button ---- */
#workshop-root .wk-station {
  position: sticky; top: calc(var(--header-h) + var(--s-4)); z-index: 5;
  display: grid; gap: var(--s-4);
  padding: var(--panel-pad);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
#workshop-root .wk-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 96px); justify-content: space-between; gap: var(--s-3); }
#workshop-root .wk-slot { display: grid; gap: var(--s-2); justify-items: center; margin: 0; }
#workshop-root .wk-slot-plate {
  display: block; width: 96px; height: 96px;
  background: var(--paper-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
#workshop-root .wk-slot.is-set .wk-slot-plate { background: var(--plate); box-shadow: 0 0 0 1px var(--plate-line); }
#workshop-root .wk-slot.is-face.is-set .wk-slot-plate { box-shadow: 0 0 0 2px var(--brass-hi), 0 0 0 5px var(--brass-line); }
#workshop-root .wk-slot-k {
  font: var(--w-semi) var(--fs-label)/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); text-align: center; font-variant-numeric: var(--num);
}
#workshop-root .wk-slot.is-face .wk-slot-k { color: var(--brass-ink); }
#workshop-root .wk-slot-id { min-height: 1.2em; margin-top: calc(-1 * var(--s-1)); font: var(--w-med) var(--fs-xs)/1.2 var(--font-num); font-variant-numeric: var(--num); color: var(--ink-2); }
#workshop-root .wk-swap {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--w-med) var(--fs-xs)/1.2 var(--font-ui); color: var(--brass-ink);
  text-decoration: underline; text-underline-offset: 3px;
}

#workshop-root .wk-state {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--inset-bg); border: 1px solid var(--inset-line); border-radius: var(--r-1);
  font-size: var(--fs-md); line-height: 1.45;
}
#workshop-root .wk-state b { color: var(--ink); font-weight: var(--w-med); font-variant-numeric: var(--num); }
#workshop-root .wk-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); transform: translateY(-1px); }
#workshop-root .wk-state[data-tone="ok"]   { border-color: var(--ok-line);   background: var(--ok-soft); }
#workshop-root .wk-state[data-tone="warn"] { border-color: var(--warn-line); background: var(--warn-soft); }
#workshop-root .wk-state[data-tone="bad"]  { border-color: var(--bad-line);  background: var(--bad-soft); }
#workshop-root .wk-state[data-tone="wait"] { border-color: var(--wait-line); background: var(--wait-soft); }
#workshop-root .wk-state[data-tone="ok"] .wk-dot   { background: var(--ok); }
#workshop-root .wk-state[data-tone="warn"] .wk-dot { background: var(--warn); }
#workshop-root .wk-state[data-tone="bad"] .wk-dot  { background: var(--bad); }
#workshop-root .wk-state[data-tone="wait"] .wk-dot { background: var(--wait); animation: wk-beat 1.4s var(--ease) infinite; }
@keyframes wk-beat { 50% { opacity: .25; } }

#workshop-root .wk-go {
  width: 100%; min-height: var(--control-h); padding: 0 var(--s-5);
  border-radius: var(--r-1); cursor: pointer;
  font: var(--w-semi) var(--fs-btn)/1 var(--font-ui); letter-spacing: var(--track-btn); text-transform: uppercase;
  background: var(--act); color: var(--act-ink); border: 1px solid var(--act-line);
  transition: background-color var(--dur-1) var(--ease);
}
#workshop-root .wk-go:hover:not(:disabled) { background: var(--act-hover); }
#workshop-root .wk-go[data-look="wait"] { background: var(--wait-soft); color: var(--wait); border-color: var(--wait-line); cursor: default; }
#workshop-root .wk-go[data-look="dead"],
#workshop-root .wk-go:disabled:not([data-look="wait"]) { background: var(--act-dead); color: var(--act-dead-ink); border-color: var(--act-dead-line); cursor: default; }
#workshop-root .wk-clear {
  justify-self: center; padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--w-med) var(--fs-sm)/1.2 var(--font-ui); color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
#workshop-root .wk-msg { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-3); }
#workshop-root .wk-msg:empty { display: none; }
#workshop-root .wk-msg b { color: inherit; font-weight: var(--w-semi); }
#workshop-root .wk-msg[data-tone="ok"] { color: var(--ok); }
#workshop-root .wk-msg[data-tone="bad"] { color: var(--bad); }
#workshop-root .wk-tx { font: var(--w-semi) var(--fs-xs)/1.4 var(--font-num); letter-spacing: .04em; color: var(--ink-3); overflow-wrap: anywhere; }
#workshop-root .wk-tx a { color: var(--brass-ink); }

/* ---- the reveal ---- */
#workshop-root .wk-reveal {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-8);
  margin-bottom: var(--s-7); padding: var(--s-7);
  background: var(--panel-bg); border: 1px solid var(--brass-line); border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
#workshop-root .wk-reveal-plate {
  display: grid; place-items: center; width: 384px; height: 384px;
  background: var(--plate); box-shadow: 0 0 0 1px var(--plate-line), 0 0 0 9px var(--paper), 0 0 0 10px var(--line);
}
#workshop-root .wk-reveal-wait { font: italic var(--w-reg) var(--fs-lg)/1.3 var(--font-display); color: var(--bench-ink-2); padding: var(--s-6); text-align: center; }
#workshop-root .wk-reveal-plate.is-waiting .wk-reveal-wait { animation: wk-beat 1.8s var(--ease) infinite; }
#workshop-root .wk-reveal-text { display: grid; gap: var(--s-4); justify-items: start; }
#workshop-root .wk-reveal-name { font: var(--w-med) var(--fs-h2)/var(--lh-tight) var(--font-display); color: var(--ink); }
#workshop-root .wk-reveal-from { font-size: var(--fs-lg); line-height: var(--lh); color: var(--ink-2); max-width: 46ch; }
#workshop-root .wk-reveal-from b { color: var(--ink); font-weight: var(--w-med); font-variant-numeric: var(--num); }
#workshop-root .wk-reveal-note { font-size: var(--fs-sm); color: var(--ink-3); }
#workshop-root .wk-back {
  min-height: var(--control-h); padding: 0 var(--s-6); border-radius: var(--r-1); cursor: pointer;
  font: var(--w-semi) var(--fs-btn)/1 var(--font-ui); letter-spacing: var(--track-btn); text-transform: uppercase;
  background: var(--act-2); color: var(--act-2-ink); border: 1px solid var(--act-2-line);
}
#workshop-root .wk-back:hover { background: var(--act-2-hover); }

/* ---- narrower screens ---- */
@media (max-width: 1099px) {
  #workshop-root .wk-grid { grid-template-columns: minmax(0, 1fr) 336px; gap: var(--s-6); }
  #workshop-root .wk-reveal { gap: var(--s-6); padding: var(--s-6); }
}
@media (max-width: 899px) {
  #workshop-root .wk-grid,
  #workshop-root .wk-grid:not(.has-bench) { grid-template-columns: minmax(0, 1fr); }
  /* after the trays in the page, pinned to the screen's bottom edge while
     the trays scroll past, so the button is never a long way off */
  #workshop-root .wk-station { position: static; }
  #workshop-root .wk-grid.is-live .wk-station { position: sticky; top: auto; bottom: 0; }
  #workshop-root .wk-reveal { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  #workshop-root .wk-reveal-text { justify-items: center; }
}
@media (max-width: 700px) {
  #workshop-root .wk-tray { padding: var(--s-4) var(--s-4) var(--s-5); }
  #workshop-root .wk-tiles { gap: var(--s-4) var(--s-3); }
  #workshop-root .wk-plate { width: 128px; height: 128px; }
  #workshop-root .wk-tray-name { font-size: var(--fs-xl); }
  #workshop-root .wk-station { gap: var(--s-3); padding: var(--s-4); }
  #workshop-root .wk-station > .wk-k { display: none; }
  #workshop-root .wk-slots { grid-template-columns: repeat(3, 64px); justify-content: center; gap: var(--s-6); }
  #workshop-root .wk-slot-plate { width: 64px; height: 64px; }
  #workshop-root .wk-swap { font-size: var(--fs-label); }
  #workshop-root .wk-state { font-size: var(--fs-sm); padding: var(--s-2) var(--s-3); }
  #workshop-root .wk-reveal { padding: var(--s-5) var(--s-4); gap: var(--s-5); }
  #workshop-root .wk-reveal-plate { width: 256px; height: 256px; }
  #workshop-root .wk-reveal-name { font-size: var(--fs-h3); }
  #workshop-root .wk-reveal-from { font-size: var(--fs-md); }
}

@media (prefers-reduced-motion: reduce) {
  #workshop-root .wk-state[data-tone="wait"] .wk-dot,
  #workshop-root .wk-reveal-plate.is-waiting .wk-reveal-wait { animation: none; }
}