/* ---------- the workshop bench ----------
   Where a character is founded, fitted, cast, painted and auditioned.
   public/rooms/bench.js draws it.

   104 style attributes to one, and the one that stays is the documented data
   exception: a fit swatch's colour comes out of FIT_SWATCH per option, so it
   rides as a scoped custom property the way mono()'s colour does.

   EVERY SIZE HERE WAS READ OFF THE GLASS. The bridge at the foot of
   components.css moves most of what this room typed, so the attribute and the
   pixel disagree and the attribute is the wrong one to copy:

     written 30   -> 30  --t-display     written 13.5 -> 14  --t-small
     written 21   -> 22  --t-head        written 13   -> 14  --t-small
     written 17   -> 18  --t-sub         written 12.5 -> 13  --t-tiny
     written 16   -> 16  --t-lead        written 12   -> 13  --t-tiny
     written 15   -> 16  --t-lead        mono 8-9     -> 11  --t-label
     written 14.5 -> 15  --t-body        mono 10/10.5 -> 13  --t-tiny
     written 14   -> 15  --t-body

   Written 15 and written 16 both land on 16, so `.bench-lead` wears both.
   Written 13 and written 13.5 both land on 14, so `.bench-chip` wears both.
   Copying the attributes would have made four classes where there are two.

   TWO SIZES ARE OFF THE SCALE BY NAME. The 52px ghost initial behind an empty
   pedestal and the 34px initial in a roster circle are the size of a THING, not
   a step of a rhythm, and components.css already names the 52 as an exclusion.
   So are the 99px roster circle, the 42px assistant disc, the 28px and 30px and 32px
   control discs, the 18px hear-it dot, the 104px chip input and the 520px tile
   grid cap.

   Corners: written 19 and 17 are --r-xl (18), written 16 and 13 are --r-lg (14),
   written 12 and 10 are --r-md (11), 100px is --r-pill. The two say-bubbles keep
   their asymmetric 14px 14px 4px 14px written out, because snapping it would
   flatten the tail that makes it a bubble.

   SPACING IS NOT SWEPT: every gap and padding below is the plain number the
   room already had.

   The two panel shadows ARE named, and only because they are exactly the token:
   `0 16px 38px var(--shad)` is --sh-card to the pixel. The stage's
   `0 22px 50px` is not any step, so it stays written out. */

/* base.css suppresses a room's entrance animation on an UPDATE render by
   matching [style*="animation:fadeUp"]. The moment the fade is a class that
   selector stops reaching it, so the class is named here. Third room in a row
   this has caught. */
[data-render-phase="update"] .bench{animation:none!important;}

.bench{display:flex; flex-direction:column; gap:18px; padding:8px 0 0;
  animation:fadeUp .35s ease both;}
.bench-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:12px; padding:0 18px;}
/* -.026em to --ls-head, the same snap the Council's headings and Mission's
   title took. The name field below is the other one, -.02em. */
.bench-title{font-size:var(--t-display); font-weight:var(--w-semi); letter-spacing:var(--ls-head);}
.bench-tag{padding:7px 11px; border:var(--bd) dashed var(--edge); border-radius:var(--r-md);}

/* ---------- shared shapes ---------- */
/* TWO ROWS THAT LOOK THE SAME AND ARE NOT. The head's button pair is a bare
   flex row; the import row centres its items. Folding them into one class gave
   fifteen elements an align-items they never had, and the probe caught it. */
.bench-row-8{display:flex; gap:8px;}
.bench-row-8-mid{display:flex; align-items:center; gap:8px;}
.bench-row-between{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.bench-row-base{display:flex; align-items:baseline; justify-content:space-between;}
.bench-row-base-10{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.bench-wrap-6{display:flex; flex-wrap:wrap; gap:6px;}
.bench-wrap-6-mid{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.bench-wrap-7{display:flex; flex-wrap:wrap; gap:7px;}
.bench-stack-2{display:flex; flex-direction:column; gap:2px;}
.bench-stack-2-min{display:flex; flex-direction:column; gap:2px; min-width:0;}
.bench-field{display:flex; flex-direction:column; gap:7px;}
.bench-field-6{display:flex; flex-direction:column; gap:6px;}
.bench-field-8{display:flex; flex-direction:column; gap:8px;}
.bench-self-start{align-self:flex-start;}
.bench-none{flex:none;}
.bench-push-right{margin-left:auto; flex:none;}
.bench-clip{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bench-hidden{display:none;}
/* both written sizes that render at 16 */
.bench-lead{font-size:var(--t-lead); font-weight:var(--w-semi);}
/* a disabled control keeps its shape and loses its strength */
.bench-dim{opacity:.5;}
.bench-off{opacity:.35;}

/* ---------- the roster strip ---------- */
.bench-roster{display:flex; gap:9px; overflow-x:auto; padding:0 18px 2px;}
.bench-card{flex:none; display:flex; flex-direction:column; align-items:center; gap:7px; width:112px;}
/* 99px is the size of the circle and 2px is the ring around it: neither is a step */
.bench-card-face{display:flex; align-items:center; justify-content:center;
  width:99px; height:99px; overflow:hidden; border-radius:var(--r-round);
  border:2px solid var(--edge); font-size:34px; font-weight:var(--w-semi); color:var(--ink4);}
.bench-card-face-on{border-color:var(--accent);}

/* ---------- the stage: the character, large, always ---------- */
.bench-stage{position:relative; overflow:hidden; border:var(--bd) solid var(--edge);
  border-radius:var(--r-xl); box-shadow:0 22px 50px var(--shad);
  background:radial-gradient(90% 60% at 50% 8%, var(--glow), transparent 70%), var(--panel);}
.bench-plate{position:relative; min-height:300px; display:flex; align-items:center; justify-content:center;}
.bench-empty{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;}
/* the size of a letter behind a pedestal, named as an exclusion in components.css */
.bench-ghost{font-size:52px; font-weight:var(--w-semi); color:var(--ink5);}
.bench-base-img{position:relative; display:block; width:100%; height:auto;}
.bench-sweep{position:absolute; inset:0; pointer-events:none; width:45%;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);
  animation:sweep 1.2s linear infinite;}
.bench-ident{display:flex; flex-direction:column; gap:2px; padding:13px 15px 14px;
  border-top:var(--bd) solid var(--edge);}
.bench-name{font-size:var(--t-head); font-weight:var(--w-semi); letter-spacing:var(--ls-head);}
.bench-rel{margin-top:4px;}
.bench-peek-link{text-decoration:underline;}
.bench-peek{margin-top:8px; padding:10px 12px; border:var(--bd) dashed var(--edge);
  border-radius:var(--r-md); background:var(--inset);}
.bench-peek-body{margin-top:6px; font-size:var(--t-tiny); line-height:1.55;
  color:var(--ink2); white-space:pre-wrap;}

.bench-tools{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.bench-paint{padding:13px 14px; border-radius:var(--r-lg); background:var(--accent); text-align:center;}
.bench-refit{display:flex; align-items:center; gap:6px; padding:4px 4px 4px 12px;
  border:var(--bd) dashed var(--edge); border-radius:var(--r-md);}
.bench-refit-input{flex:1; font-size:var(--t-tiny); color:var(--ink2);}
.bench-refit-go{display:flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border-radius:var(--r-round);
  border:var(--bd) solid var(--edge); color:var(--muted);}
.bench-painters{display:flex; justify-content:center; gap:5px;}
.bench-painter{padding:6px 12px; border-radius:var(--r-pill);}

/* ---------- the assistant's parlor, and the panel the hand drawer shares ---------- */
.bench-panel{padding:17px 16px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-xl); background:var(--panel); box-shadow:var(--sh-card);}
.bench-panel-col{display:flex; flex-direction:column; gap:13px;}
.bench-assistant-head{display:flex; align-items:center; gap:11px;}
/* 42px is the size of the disc */
.bench-assistant-face{display:flex; align-items:center; justify-content:center; flex:none;
  width:42px; height:42px; border-radius:var(--r-round);
  border:var(--bd-thick) solid var(--accent); color:var(--accent);
  font-size:var(--t-sub); font-weight:var(--w-semi);
  background:radial-gradient(120% 120% at 30% 20%, var(--sel), transparent);}
.bench-log{display:flex; flex-direction:column; gap:11px; max-height:380px; overflow-y:auto;}
.bench-log-empty{font-size:var(--t-small); line-height:1.6; color:var(--ink2);}
.bench-log-empty-mono{line-height:1.7;}
.bench-quote{color:var(--muted);}
.bench-thinking{animation:pulse 1.2s ease-in-out infinite;}
/* the corner is asymmetric on purpose — the 4px is the tail */
.bench-say-you{align-self:flex-end; max-width:88%; padding:9px 12px;
  border:var(--bd) solid var(--edge); border-radius:14px 14px 4px 14px;
  background:var(--inset); font-size:var(--t-small); line-height:1.45;}
/* the mirror sits on --inset, so its own bubbles rise to --panel instead */
.bench-say-you-panel{background:var(--panel);}
.bench-say{display:flex; flex-direction:column; gap:3px;}
.bench-say-who{display:flex; align-items:center; gap:7px;}
.bench-say-name{font-size:var(--t-tiny); font-weight:var(--w-semi); color:var(--accent);}
.bench-say-body{font-size:var(--t-small); line-height:1.5; color:var(--ink2);}
/* 18px is the size of the dot you tap to hear a line */
.bench-hear{display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:var(--r-round);
  border:var(--bd) solid var(--edge); color:var(--muted);}
.bench-suggest{padding:7px 12px; border-radius:var(--r-pill);
  border:var(--bd) dashed var(--edge); color:var(--muted); font-size:var(--t-tiny);}
.bench-composer{display:flex; align-items:center; gap:8px; padding:6px 6px 6px 13px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);}
.bench-composer-panel{background:var(--panel);}
.bench-composer-input{font-size:var(--t-small);}
.bench-mic{display:flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:var(--r-round);
  border:var(--bd) solid var(--edge); color:var(--muted);}
.bench-mic-on{border-color:var(--accent); color:var(--accent);
  animation:pulse 1.1s ease-in-out infinite;}
.bench-send{display:flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:var(--r-round);
  background:var(--accent); color:var(--onAccent);}

/* ---------- the hand drawer ---------- */
.bench-col{display:flex; flex-direction:column; gap:12px; min-width:0;}
.bench-step{display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:var(--r-pill);}
.bench-body-12{display:flex; flex-direction:column; gap:12px;}
.bench-body-14{display:flex; flex-direction:column; gap:14px;}
.bench-body-16{display:flex; flex-direction:column; gap:16px;}
.bench-body-18{display:flex; flex-direction:column; gap:18px;}
.bench-body-20{display:flex; flex-direction:column; gap:20px;}
.bench-nav{display:flex; justify-content:space-between; gap:10px; padding-top:2px;}
/* the border is NOT in the base here. The DONE button has no border at all in
   this room, and a base that carried one would have grown its box by two
   pixels — a class must never change a size. */
.bench-nav-btn{padding:11px 16px; border-radius:var(--r-md);}
.bench-nav-back{border:var(--bd) solid var(--edge);}
.bench-nav-next{border:var(--bd) solid var(--accent);}
.bench-nav-done{background:var(--accent);}

/* the fit chips: both written sizes land on 14 */
.bench-chip{padding:8px 13px; border-radius:var(--r-pill);
  font-size:var(--t-small); font-weight:var(--w-semi);}
.bench-chip-add{width:104px; padding:8px 13px; border-radius:var(--r-pill);
  border:var(--bd) dashed var(--edge); background:transparent;
  font-size:var(--t-tiny); color:var(--ink2);}
/* THE ONE INLINE STYLE LEFT IN THIS ROOM, and it is the documented kind: the
   dot's colour is the fit option's own swatch out of FIT_SWATCH, per option, so
   it rides as a scoped custom property exactly the way mono() carries a label's
   colour. The rgba edge is a raw colour that came with the markup and is not a
   theme decision: it is a hairline that must read on a pale swatch and a dark
   one alike, so a token would erase it on one of them. */
.bench-swatch{display:inline-block; width:11px; height:11px; margin-right:7px;
  vertical-align:-1px; border-radius:var(--r-round);
  border:var(--bd) solid rgba(0,0,0,.35); background:var(--bench-swatch);}
.bench-big-chip{padding:11px 18px; border-radius:var(--r-lg);
  font-size:var(--t-body); font-weight:var(--w-semi);}
.bench-import{flex:1; padding:12px 14px; border:var(--bd) dashed var(--edge);
  border-radius:var(--r-lg); text-align:center;}
.bench-roll{padding:9px 16px; border:var(--bd) dashed var(--accent); border-radius:var(--r-pill);}
.bench-line{width:100%; padding:11px 14px; border-radius:var(--r-md);
  border:var(--bd) dashed var(--edge); background:transparent;
  font-size:var(--t-small); color:var(--ink2);}
.bench-words{width:100%; resize:vertical; padding:12px 14px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  background:var(--inset); color:var(--ink2); font-size:var(--t-small); line-height:1.55;}
.bench-next{align-self:flex-start; padding:12px 18px; border-radius:var(--r-lg);
  border:var(--bd) solid var(--accent);}
.bench-draw{align-self:flex-start; padding:12px 18px; border-radius:var(--r-lg);
  background:var(--accent);}
.bench-model{padding:10px 16px; border-radius:var(--r-lg);}

/* the face step — two pairs, a day card and a night card */
.bench-faces{display:flex; flex-wrap:wrap; align-items:flex-start; gap:28px; max-width:560px;}
.bench-face-pair{flex:1; min-width:220px; display:flex; flex-direction:column; gap:8px;}
.bench-face-row{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.bench-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:9px; max-width:520px;}
.bench-tile{display:flex; flex-direction:column; gap:6px;}
.bench-tile-img{position:relative; width:100%; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--r-md); border:2px solid var(--edge); cursor:pointer;}
.bench-tile-on{border-color:var(--accent);}
.bench-tile-label{text-align:center;}
.bench-refine{display:flex; align-items:center; gap:9px; padding:6px 6px 6px 14px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);}
.bench-refine-go{display:flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:var(--r-round);
  background:var(--accent); color:var(--onAccent);}

/* the casting sheet */
.bench-voices{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px;}
.bench-voice{display:flex; align-items:center; gap:11px; padding:12px 13px;
  border-radius:var(--r-lg); border:var(--bd) solid var(--edge); background:var(--inset);}
.bench-voice-on{border-color:var(--accent); background:var(--sel);}
/* a voice another body already holds: dashed and dimmed, and it stays taken */
.bench-voice-taken{border-style:dashed; opacity:.45;}
.bench-voice-play{display:flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border-radius:var(--r-round);
  border:var(--bd) solid var(--edge); color:var(--text);}
.bench-voice-play-on{border-color:var(--accent); color:var(--accent);}
.bench-voice-name{display:flex; align-items:center; gap:6px;
  font-size:var(--t-body); font-weight:var(--w-semi); color:var(--text);}
.bench-voice-name-on{color:var(--accent);}

/* the soul step, and the mirror */
.bench-input{width:100%; padding:11px 14px; border:var(--bd) solid var(--edge);
  border-radius:var(--r-md); background:var(--inset);
  font-size:var(--t-small); color:var(--ink2);}
.bench-area{width:100%; resize:vertical; padding:12px 14px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-md);
  background:var(--inset); color:var(--ink2); font-size:var(--t-body); line-height:1.5;}
.bench-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px;}
.bench-mirror{display:flex; flex-direction:column; gap:11px; padding:15px;
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset);}
.bench-mirror-log{display:flex; flex-direction:column; gap:11px; max-height:300px; overflow-y:auto;}