/* 01 · Workbench (Round 3 hero, polished for Round 4). Every rule scoped under #workbench. */
#workbench .small { font-size: 14px; line-height: 1.4; margin: 0; }
#workbench .btn.sm { min-height: 34px; padding: 0 10px; font-size: 13px; }

/* ---------- workbench ---------- */
#workbench.bench-sec { padding: 16px 0 56px; }
#workbench .bezel { background: var(--shell); border: 1.5px solid var(--ink); border-radius: 10px; padding: 0 12px 12px; box-shadow: var(--shadow-hard); }
#workbench .bezel-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 30px; color: var(--graphite); }
#workbench .bezel-screws { flex: 1; height: 6px; background: radial-gradient(circle, var(--rule-strong) 2.5px, transparent 3px) 0 0/48px 6px repeat-x; opacity: .7; }
#workbench .desk {
  position: relative; isolation: isolate; height: 744px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 4px;
  background-color: var(--white);
  background-image:
    linear-gradient(var(--cobalt-wash) 1px, transparent 1px), linear-gradient(90deg, var(--cobalt-wash) 1px, transparent 1px),
    linear-gradient(rgba(31, 79, 216, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 79, 216, .07) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}
#workbench .reading { position: absolute; left: 24px; top: 24px; bottom: 24px; width: 360px; display: flex; flex-direction: column; z-index: 1; }
#workbench .reading-label { margin: 0 0 14px; color: var(--orange-ink); }
#workbench .hero-h { font-size: 88px; line-height: .86; }
#workbench .hero-h .it { line-height: .8; font-size: 1.06em; color: var(--orange-ink); }
#workbench .hero-desc { font: 500 21px/1.3 var(--body); margin: 18px 0 6px; max-width: 30ch; }
#workbench .hero-pick { margin: 0; color: var(--graphite); }

#workbench .pet { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
#workbench .pet-gant { width: 92px; flex: none; }
#workbench .pet-gant svg { width: 100%; height: auto; display: block; }
#workbench .pet-say { position: relative; background: var(--white); border: 1.5px solid var(--ink); padding: 8px 10px; font-size: 14px; line-height: 1.35; min-height: 56px; flex: 1; }
#workbench .pet-say::before { content: ""; position: absolute; left: -8px; top: 18px; width: 12px; height: 12px; background: var(--white); border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
#workbench .pet-who { display: block; color: var(--graphite); margin-bottom: 3px; font-size: 11px; }

#workbench .rack-shelf { margin-top: auto; }
#workbench .rack-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#workbench .tidy { min-height: 32px; padding: 0 12px; font-size: 13px; box-shadow: none; }
#workbench .rack { list-style: none; margin: 0; padding: 0 6px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; border-bottom: 8px solid var(--ink); }
#workbench .spine {
  --s: var(--ink); width: 100%; height: 176px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 0 10px; background: var(--white); border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0;
  color: var(--ink); cursor: pointer; font: inherit; transition: transform .15s cubic-bezier(.2,.8,.2,1);
}
#workbench .spine.series-o { --s: var(--series-o); } #workbench .spine.series-g { --s: var(--series-g); } #workbench .spine.series-b { --s: var(--series-b); }
#workbench .spine-band { width: 100%; height: 18px; background: var(--s); border-bottom: 1.5px solid var(--ink); flex: none; }
#workbench .spine-no, #workbench .spine-name { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
#workbench .spine-no { font: 400 10px/1 var(--mono); color: var(--graphite); }
#workbench .spine-name { font: 800 13px/1 var(--display); font-stretch: 85%; letter-spacing: -.01em; }
#workbench .spine:hover { transform: translateY(-6px); }
#workbench .spine[aria-pressed="true"] { transform: translateY(-14px); box-shadow: 0 4px 0 var(--s), 3px 0 0 var(--ink); }
#workbench .spine[data-state="shelved"] .spine-name { color: var(--graphite); }
#workbench .spine[data-state="open"]:not([aria-pressed="true"])::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s); border: 1px solid var(--ink); margin-top: auto; }
#workbench .tidy-note { margin: 10px 0 0; min-height: 1.4em; font-size: 11px; }

/* windows on the desk */
#workbench .windows { position: absolute; inset: 0; pointer-events: none; }
#workbench .windows:focus { outline: none; }
#workbench .windows .win { position: absolute; pointer-events: auto; }
#workbench .win[hidden] { display: none !important; }
#workbench .win.is-drag { box-shadow: 10px 10px 0 rgba(20, 22, 27, .35); cursor: grabbing; }
#workbench .desk.is-tidying .win { transition: left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1); }
#workbench .win-bar { cursor: grab; }
#workbench .win-grip { border: 0; padding: 0; color: inherit; flex: none; }
#workbench .win-grip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
#workbench .win-link { flex: none; white-space: nowrap; font: 500 11px/1 var(--mono); text-transform: uppercase; color: inherit; }
/* narrow windows drop the cassette icon so the title and the build kit link both fit */
#workbench .win[data-w="13"] .deck { display: none; }
#workbench .win:not(.is-focused) .win-bar { background: var(--shell); color: var(--ink); }
#workbench .deck { width: 40px; flex: none; }
#workbench .deck .cassette { border-radius: 4px; padding: 3px 3px 5px; border-width: 1px; }
#workbench .deck .cassette-label { border-radius: 2px; }
#workbench .deck .cassette-window { height: 48%; }
#workbench .deck .cassette-reel { width: 30%; }
#workbench .status { margin: 0; font: 400 12px/1.4 var(--mono); color: var(--graphite); min-height: 1.4em; }
#workbench .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px; }
#workbench .actions .status { flex: 1 1 100%; }
#workbench .field { display: grid; gap: 4px; }
#workbench .field input[type="text"], #workbench .field textarea, #workbench .hooks input {
  width: 100%; border: 1.5px solid var(--ink); border-radius: 0; background: var(--white); padding: 8px 10px; font: 400 15px/1.35 var(--body); color: var(--ink);
}
#workbench .field textarea { resize: vertical; font-size: 14px; }
#workbench .code { margin: 10px 0 0; padding: 8px 10px; background: var(--paper); border: 1px solid var(--rule-strong); font: 400 12px/1.5 var(--mono); white-space: pre-wrap; }

/* 001 Palette Pull */
#workbench .pp-top { display: grid; grid-template-columns: 150px auto 1fr; gap: 16px; align-items: center; }
#workbench .pp-src { margin: 0; }
#workbench .pp-src img { width: 150px; aspect-ratio: 3/2; object-fit: cover; border: 1.5px solid var(--ink); }
#workbench .pp-src figcaption { margin-top: 4px; font-size: 10px; }
#workbench .pp-in { display: grid; gap: 6px; justify-items: start; }
#workbench .drop-hint { margin: 0; font-size: 13px; }
#workbench .win.is-over { outline: 3px dashed var(--orange); outline-offset: 4px; }
#workbench .chips { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); border: 1.5px solid var(--ink); }
#workbench .chip { display: grid; grid-template-rows: 72px auto auto auto; min-width: 0; }
#workbench .chip + .chip { border-left: 1.5px solid var(--ink); }
#workbench .chip-c { border-bottom: 1.5px solid var(--ink); }
#workbench .chip-hex { font: 500 12px/1 var(--mono); padding: 8px 6px 2px; }
#workbench .chip-share { font: 400 11px/1 var(--mono); color: var(--graphite); padding: 2px 6px 6px; }
#workbench .chip-copy { border: 0; border-top: 1px solid var(--rule); background: var(--white); font: 500 11px/1 var(--mono); text-transform: uppercase; padding: 7px 6px; text-align: left; cursor: pointer; color: var(--cobalt-ink); }
#workbench .chip-copy:hover { background: var(--cobalt-wash); }

/* 003 Safe Crop */
#workbench .sc-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#workbench .plates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#workbench .plate { margin: 0; display: grid; gap: 4px; }
#workbench .plate-frame { height: 104px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--rule-strong); }
#workbench .plate canvas { max-width: 100%; max-height: 100px; width: auto; height: auto; cursor: crosshair; border: 1px solid var(--ink); }
#workbench .plate figcaption { display: grid; gap: 4px; }
#workbench .plate .label { font-size: 10px; }
#workbench .plate .btn.sm { min-height: 30px; font-size: 12px; width: 100%; }

/* 002 Type Tighter */
#workbench .tt-stage { margin: 10px 0; height: 150px; overflow: hidden; border: 1px solid var(--rule-strong); background: var(--paper); padding: 10px 12px; }
#workbench #tt-preview { margin: 0; font-family: var(--display); font-weight: 900; font-stretch: 88%; }
#workbench .dials { display: flex; justify-content: space-around; gap: 8px; }

/* 004 Contrast Pair */
#workbench .cp-in { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
#workbench .pair { display: flex; }
#workbench .pair input[type="color"] { width: 40px; height: 40px; padding: 2px; border: 1.5px solid var(--ink); border-right: 0; background: var(--white); }
#workbench .pair input[type="text"] { font-family: var(--mono); font-size: 14px; min-width: 0; }
#workbench .cp-sample { margin: 12px 0; padding: 14px; border: 1.5px solid var(--ink); font-size: 16px; }
#workbench .cp-out { display: flex; gap: 16px; align-items: center; }
#workbench .cp-ratio { margin: 0; white-space: nowrap; }
#workbench .cp-ratio .num { font-size: 46px; }
#workbench .cp-grades { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font: 400 12px/1.2 var(--mono); }
#workbench .cp-grades b { display: inline-block; width: 38px; padding: 2px 0; text-align: center; border: 1px solid var(--ink); margin-right: 6px; font-weight: 500; }
#workbench .cp-grades .pass b { background: var(--green); color: var(--ink); }
#workbench .cp-grades .fail b { background: var(--white); color: var(--ink); text-decoration: line-through; }
#workbench .cp-fix { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
#workbench .cp-fix .small { flex: 1; }
#workbench .fix-sw { width: 28px; height: 28px; border: 1.5px solid var(--ink); flex: none; }

/* 005 Thread Cutter */
#workbench .tc-top { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
#workbench .posts { list-style: none; margin: 12px 0 0; padding: 0; max-height: 180px; overflow: auto; border: 1px solid var(--rule-strong); counter-reset: p; }
#workbench .posts li { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
#workbench .posts li + li { border-top: 1px dashed var(--rule-strong); }
#workbench .posts .label { font-size: 10px; color: var(--graphite); white-space: nowrap; }
#workbench .posts .label.ok { color: var(--green-ink); }

/* 006 Hook Bench */
#workbench .hooks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
#workbench .hooks li { display: grid; grid-template-columns: 1fr 96px; gap: 8px; align-items: center; }
#workbench .hooks input { font-size: 14px; padding: 6px 8px; }
#workbench .meter { position: relative; height: 26px; border: 1.5px solid var(--ink); background: var(--paper); }
#workbench .meter i { position: absolute; inset: 0 auto 0 0; background: var(--cobalt-wash); border-right: 1.5px solid var(--cobalt); transition: width .25s; }
#workbench .meter b { position: relative; display: block; text-align: right; padding-right: 6px; font: 500 13px/23px var(--mono); }
#workbench .hooks li.best .meter i { background: var(--cobalt); }
#workbench .hooks li.best .meter b { color: var(--white); }
#workbench .hooks li.best input { border-color: var(--cobalt); box-shadow: inset 4px 0 0 var(--cobalt); }

/* hand-drawn desk annotations (wide desk only; placed by workbench-4-annos.js next to live targets) */
#workbench .bench-annos { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
#workbench .bench-anno { position: absolute; left: 0; top: 0; margin: 0; color: var(--ink); white-space: nowrap; }
#workbench .bench-anno[hidden] { display: none; }
#workbench .bench-anno .anno { display: inline-block; padding: 2px 4px; background: var(--white); }
#workbench .bench-anno .anno .it { font-size: 1.3em; line-height: 1; letter-spacing: 0; color: var(--orange-ink); }
#workbench .bench-anno-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--ink); }

/* ---------- below 1200: no dragging; loaded tape inline under the rack ---------- */
@media (max-width: 1199.98px) {
  #workbench .bench-annos { display: none; }
  #workbench .desk { height: auto; overflow: visible; padding: 20px; }
  #workbench .reading { position: static; width: auto; bottom: auto; }
  #workbench .hero-h { font-size: clamp(56px, 13vw, 96px); }
  #workbench .pet { max-width: 480px; }
  #workbench .rack-shelf { margin-top: 24px; }
  #workbench .rack { display: flex; overflow-x: auto; padding: 16px 6px 0; scroll-snap-type: x mandatory; }
  #workbench .rack li { flex: 0 0 64px; scroll-snap-align: start; }
  #workbench .windows { position: static; pointer-events: auto; margin-top: 16px; }
  #workbench .windows .win { position: relative; left: auto !important; top: auto !important; width: auto !important; z-index: auto !important; display: none; }
  #workbench .windows .win.is-current { display: flex; }
  #workbench .win-bar { cursor: default; }
  #workbench .win-grip, #workbench .win .min { display: none; }
  #workbench .tidy { display: none; }
  #workbench .tidy-note { display: none; }
}
@media (max-width: 760px) {
  #workbench.bench-sec { padding-top: 12px; }
  #workbench.bench-sec .wrap { padding: 0 10px; }
  #workbench .bezel { padding: 0 6px 6px; }
  #workbench .bezel-strip #bench-clock { display: none; }
  #workbench .desk { padding: 16px 12px; }
  #workbench .win-body { padding: 12px; }
  #workbench .win-link { display: none; }
  #workbench .pp-top { grid-template-columns: 1fr auto; }
  #workbench .pp-src img { width: 100%; }
  #workbench .pp-in { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; }
  #workbench .chip { grid-template-rows: 56px auto auto auto; }
  #workbench .chip-hex { font-size: 11px; padding: 6px 4px 2px; letter-spacing: -.02em; }
  #workbench .chip-share, #workbench .chip-copy { padding-left: 4px; padding-right: 4px; }
  #workbench .cp-in { grid-template-columns: 1fr 1fr; }
  #workbench .cp-in .btn { grid-column: 1 / -1; }
  #workbench .tc-top { grid-template-columns: 1fr; justify-items: center; }
  #workbench .tc-field { justify-self: stretch; }
  #workbench .hooks li { grid-template-columns: 1fr 64px; }
}