/* spine.css — THE BRASS SPINE (Tom 2026-09-01 AM: the elevator moves to
   the left edge and folds; Mira's board A. Re-dressed 5:36 PM on Tom's
   word: "more steampunk elevator" — riveted brass frame, cap rails,
   porthole lamps, engraved plate lettering; same bones, same fold).
   Comms-local dress over the kit's own .deckpips DOM — General Quarters
   and any later-appended pips keep working untouched. DECK_CSS is inline
   at the END of body, so these selectors carry a body prefix to win the
   cascade — specificity does the work here, no importance flags anywhere.
   spine.js adds .vt-open on floor arrival (~3s); hover holds it open. */

/* upper-left corner (Tom 2026-09-01 7:03 AM) — the corner is free because
   the ship's floating badges are exempt from this room (room_chrome.py).
   The plate: lacquered iron in a brass frame, rivet lines down both
   edges (the two repeat-y radial layers), a cable groove behind the
   lamps (the vertical strip layer). */
body .deckpips{right:auto;left:10px;top:10px;
  padding:16px 8px 14px;gap:7px;border-radius:9px;
  background:
    radial-gradient(circle 1.4px at 4px 7px,#E8CE8F 0 1.1px,#00000000 1.6px) left top/8px 16px repeat-y,
    radial-gradient(circle 1.4px at 4px 7px,#E8CE8F 0 1.1px,#00000000 1.6px) right top/8px 16px repeat-y,
    linear-gradient(90deg,#00000000 14px,#00000055 16px,#C8A15B22 17px,#00000055 19px,#00000000 21px),
    linear-gradient(180deg,#241A0E,#151009 14%,#100C07 86%,#241A0E);
  border:2px solid #8F6B33;
  box-shadow:inset 0 0 0 1px #C8A15B44,inset 0 0 16px #000D,
    0 10px 30px #000A,0 0 10px #C8A15B22}
/* brass cap rails, top and bottom — the car's crown and sill */
body .deckpips::before,body .deckpips::after{content:"";position:absolute;
  left:3px;right:3px;height:6px;border-radius:3px;
  background:linear-gradient(180deg,#E8CE8F,#A87F3C 55%,#6B4E22);
  box-shadow:0 1px 3px #000B,inset 0 1px 0 #FFF3}
body .deckpips::before{top:-4px}
body .deckpips::after{bottom:-4px}
/* dot first, label growing rightward — the kit's row-reverse suits its
   right-edge home, not this one */
body .deckpips .pip{flex-direction:row;justify-content:flex-start;
  padding:3px 4px;gap:0;border-radius:6px}
body .deckpips .pip:hover{background:#C8A15B1E;border-color:#C8A15B55}
/* the floor lamps: brass-ringed portholes, dark glass until you arrive */
body .deckpips .pip i{width:13px;height:13px;flex:none;border-radius:7px;
  background:radial-gradient(circle at 35% 30%,#3E3325,#141008 72%);
  border:2px solid #8F6B33;
  box-shadow:inset 0 0 3px #000C,0 1px 2px #000A,0 0 0 1px #241A0E}
body .deckpips .pip.on i{
  background:radial-gradient(circle at 38% 32%,#FFF3C4,#F0B94A 58%,#B97E1E);
  border-color:#C8A15B;
  box-shadow:0 0 10px #F0B94ACC,0 0 22px #F0B94A55,inset 0 -1px 2px #7A5B2E}
/* folded at rest: the labels collapse, the lamps remain — the shaft in
   miniature. max-width (not display) so the fold animates. */
body .deckpips .pip span{max-width:0;opacity:0;overflow:hidden;
  white-space:nowrap;margin-left:0;
  font-family:Georgia,"Times New Roman",serif;font-size:10.5px;
  letter-spacing:.22em;color:#D8B96A;
  text-shadow:0 1px 1px #000C,0 0 8px #C8A15B22;
  transition:max-width .35s ease,opacity .28s ease,margin-left .35s ease}
body .deckpips.vt-open .pip span,body .deckpips:hover .pip span{
  max-width:220px;opacity:.92;margin-left:10px}
body .deckpips .pip.on span{color:#F0D48A}
body .deckpips.vt-open .pip.on span,body .deckpips:hover .pip.on span{opacity:1}
/* GENERAL QUARTERS folds to its red emergency lamp (title attr keeps the
   tooltip); the full dark plate returns whenever the spine stands open. */
body .deckpips .pip.gq{margin-top:9px;padding:3px 4px;
  justify-content:flex-start;background:none;border-color:transparent}
body .deckpips .pip.gq i{border-color:#8F3B2A;
  background:radial-gradient(circle at 35% 30%,#F0654A,#7A1E10 75%)}
body .deckpips.vt-open .pip.gq,body .deckpips:hover .pip.gq{
  background:#2A0F0AE8;border-color:#F0654A;padding:5px 8px}
/* the unfolded spine IS the arrival cue — the kit's center-screen toast on
   top of it is two announcements per ride. Quieted in this room only. */
body #decktoast{display:none}
@media (prefers-reduced-motion: reduce){
  body .deckpips .pip span{transition:none}}