/* The deck: side panels and their latching buttons. */

/* Bottom aligned, NOT stretched: every column keeps its own height and they
   line up on the desk. The terminal column is the tallest and sets the
   height; the side panels are shorter and that is fine. */
#stage{display:flex;gap:14px;align-items:flex-end;justify-content:center;flex:0 0 auto;}

/* The paper and the keyboard are one machine, so they are one column with
   nothing between them. */
#column{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;}

#side{display:flex;flex-direction:column;gap:14px;flex:0 0 auto;}

/* align-self overrides #stage's flex-end, so the tape unit alone runs the
   full height of the terminal column. */
#tape{
  align-self:stretch;width:196px;flex:0 0 auto;
  display:flex;flex-direction:column;gap:14px;
}
/* Two units in one case, punch above reader, as on the machine. Both wells
   share the remaining height so neither tape looks like the important one. */
.tape-unit{display:flex;flex-direction:column;flex:1 1 0;min-height:0;gap:6px;}

/* The well is the dark inside of the machine. The tape is drawn on the
   canvas; the holes are transparent, so what shows through them is this. */
.tape-well{
  flex:1 1 auto;min-height:40px;width:100%;display:block;
  border-radius:2px;
  background:var(--inside);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.6);
}

.tape-row{display:flex;gap:5px;}
.tape-row .pbtn{flex:1 1 0;padding:0;}
.pbtn.tiny{height:26px;font-size:9.5px;letter-spacing:.06em;}

/* The strap is not a control. It is drawn recessed into the case, without
   the raised keycap body the real switches have, so a glance can tell them
   apart: ON/OFF is a thing the operator throws, this is a thing a technician
   set once with a wire. */
.strap{
  display:flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:4px 5px;border-radius:3px;
  background:rgba(0,0,0,.13);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
.strap-lb{
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:8px;letter-spacing:.1em;font-weight:700;line-height:1;
  color:#5C5443;flex:0 0 auto;white-space:nowrap;
}
.pbtn.strapbtn{
  flex:1 1 0;height:17px;padding:0;
  font-size:8px;letter-spacing:.06em;
  border-radius:2px;
  background:#4E4D43;box-shadow:none;color:#8C8676;
}
.pbtn.strapbtn:active:not(:disabled){transform:none;}
.pbtn.strapbtn.on{
  transform:none;background:#3A3931;color:var(--amber);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);text-shadow:none;
}

/* What is threaded into the reader. Set in the paper's own face rather than
   the panel's, because it is a label on a tape and not a legend on the
   machine -- somebody wrote it there. */
.tape-label{
  flex:0 0 auto;height:20px;line-height:20px;
  font-family:'Courier New',Courier,monospace;
  font-size:10.5px;letter-spacing:.1em;
  color:var(--amber);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;
  opacity:.9;
}
.tape-label:empty::before{content:'---';opacity:.25;color:var(--legend);}
.case{
  background:linear-gradient(180deg,var(--deck) 0%,var(--deck-dark) 100%);
  border-radius:6px;
  padding:14px 12px 16px;
  box-shadow:0 18px 40px -6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.panel{position:relative;flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-between;}
.cols{display:flex;gap:10px;}
.col2{display:flex;flex-direction:column;gap:7px;width:112px;}

/* Fixed height AND line-height:1. Both, not one: a CJK glyph is taller than
   a Latin one, and an auto-height label grows on a language change and
   pushes the whole panel down. */
.lbl{
  height:24px;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.16em;
  color:#463E2E;
  padding-bottom:4px;
  border-bottom:1px solid rgba(70,60,40,.38);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
}

/* Set apart from the buttons above it: the language switch is the one
   control on the deck that belongs to the website rather than to the
   machine. */
.langrow{display:flex;gap:6px;margin-top:24px;}
.langrow .pbtn{flex:1 1 0;padding:0;}

.pbtn{
  height:34px;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;line-height:1;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:10.5px;letter-spacing:.04em;font-weight:600;
  color:var(--legend);
  background:linear-gradient(180deg,#6E6D5F 0%, var(--keycap) 42%, var(--keycap-lo) 100%);
  border:none;border-radius:4px;padding:0 8px;cursor:pointer;
  box-shadow:0 3px 0 #35342D, 0 4px 7px rgba(0,0,0,.42), inset 0 1px 1px rgba(255,255,255,.18);
  transition:transform .06s ease-out, box-shadow .06s ease-out, color .12s, filter .12s;
}
.pbtn:hover:not(:disabled){filter:brightness(1.1);}
.pbtn:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 0 0 #35342D, inset 0 2px 4px rgba(0,0,0,.5);
}
/* Latched: the button stays down, as a mechanical switch would. */
.pbtn.on{
  transform:translateY(3px);
  box-shadow:0 0 0 #35342D, inset 0 2px 5px rgba(0,0,0,.6);
  background:linear-gradient(180deg,#4A493F 0%, #55544A 100%);
  color:var(--amber);
  text-shadow:0 0 6px rgba(232,163,60,.5);
}
/* .pbtn.primary was the illuminated REVEAL button -- the one the blind test
   was played with. REVEAL is gone (CLAUDE.md section 4) and nothing on this
   deck is a primary action, so the style went with it. */

.pbtn:disabled{opacity:.34;cursor:not-allowed;filter:grayscale(.6);}
.pbtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

#vol{width:100%;accent-color:var(--amber);height:16px;margin:4px 0 0;flex:0 0 auto;}