body { font: 16px/1.4 system-ui, sans-serif; margin: 1.5rem; max-width: 64rem; }
header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; }
/* states are words first; border style is a second, non-colour cue */
#link { padding: .2rem .6rem; border: 2px solid; font-weight: 600; }
#link[data-state="unreachable"], #link[data-state="signed-out"] { border-style: dashed; }
#notice { padding: .4rem .6rem; border: 2px dotted; }
#offer { border: 3px double; padding: .6rem 1rem; margin: 1rem 0; }
#offer dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; }
.urgency { font-weight: 700; text-transform: uppercase; }
.slots { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin: 1rem 0; }
.slot { border: 1px solid; padding: .5rem; min-height: 5rem; }
#slot-video { grid-row: span 2; min-height: 14rem; }
li { margin: .3rem 0; }
.video-wrap { position: relative; }
#video { width: 100%; background: #000; aspect-ratio: 4 / 3; }
/* a dead link never looks like a live frame: the overlay covers it, in words */
#video-overlay { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; font-weight: 700; font-size: 1.2rem; background: rgba(0, 0, 0, .75); color: #fff; border: 4px dashed #fff; }
#video-overlay[hidden] { display: none; }   /* the display: flex above would otherwise beat [hidden] */
#link-state { font-weight: 600; border: 2px solid; padding: .1rem .4rem; }
#link-state[data-state="reconnecting"], #link-state[data-state="closed"] { border-style: dashed; }
#slot-arm { margin: 1rem 0; }
#arm-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
#arm-view { width: 100%; height: 24rem; border: 1px solid; margin: .5rem 0; }
#arm-move { font-weight: 700; border: 2px solid; padding: .1rem .4rem; }
#arm-move[data-moving="1"] { border-style: double; }
#arm-hold { font-size: 1.1rem; padding: .5rem 1.2rem; }
#arm-hold[aria-pressed="true"] { outline: 4px double; }
/* the arm's status lines keep their height: text changing length must not move the hold button under the pointer */
#arm-live, #arm-preview, #arm-move { min-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the handback question: four big targets, one tap each; words, never colour alone */
#handback-box { border: 3px double; padding: .6rem 1rem; margin: 1rem 0; }
#handback-box[hidden] { display: none; }
#causes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
#causes button { min-height: 4.5rem; font-size: 1.1rem; padding: .4rem; border: 2px solid; }
#causes button small { display: block; font-size: .8rem; }
#cause-none { margin-top: .6rem; font-size: .85rem; }
kbd { border: 1px solid; border-radius: .2rem; padding: 0 .25rem; font-size: .75rem; }