remote-control.css

/* CABLE 82 remote control: a page of the board, in your hand.
   Identity: the station's own. The header band with the reversed bug, four
   full-bleed color pages as keys in the broadcast palette, the VGA face for
   every word, hard white rules between the bands, and the LATEST crawl band
   carrying the status line. Flat color, no gradients, no shadows: the
   remote is drawn by the same character generator as the channel. Sized in
   viewport units so a phone held upright gets one screen, no scrolling. */

@font-face {
  font-family: "VGA";
  src: url("fonts/webplus-ibm-vga-8x16.woff") format("woff");
  font-display: swap;
}

:root {
  --blue: #2038C8;
  --cyan: #20A8B8;
  --green: #18A038;
  --red: #C03028;
  --white: #F0F0EC;
  --ink: #101018;
  --rule: 5px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--blue);
  color: var(--white);
  font-family: "VGA", ui-monospace, monospace;
  text-transform: uppercase;
  -webkit-text-size-adjust: 100%;
}

#remote {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------------------------------------------------------- the header band */

#band {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: max(18px, env(safe-area-inset-top)) 20px 14px;
  background: var(--blue);
  border-bottom: var(--rule) solid var(--white);
}
#bug {
  background: var(--white);
  color: var(--blue);
  font-size: clamp(26px, 8vw, 34px);
  line-height: 1;
  padding: 6px 14px 3px;
  letter-spacing: 2px;
  white-space: nowrap;
}
#sub {
  font-size: 13px;
  letter-spacing: 3px;
  padding-bottom: 4px;
  white-space: nowrap;
}

/* ---------------------------------------------------------- the keys */

#keys {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.key {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  text-transform: inherit;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 150px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: background 90ms var(--ease), color 90ms var(--ease);
}
.k-up { background: var(--green); }
.k-down { background: var(--blue); border-left: var(--rule) solid var(--white); }
.k-vol { background: var(--cyan); color: var(--ink); border-top: var(--rule) solid var(--white); }
.k-power { background: var(--red); border-top: var(--rule) solid var(--white); border-left: var(--rule) solid var(--white); }

.glyph {
  font-size: clamp(56px, 17vw, 80px);
  line-height: 1;
}
.label {
  font-size: 15px;
  letter-spacing: 3px;
}

/* The volume key's glyph: four bars stepping up, the way every set drew
   volume. It is a picture of the key, not of the level: the remote holds
   no state and the set draws the real meter on screen. */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: clamp(44px, 13vw, 60px);
}
.bars i {
  display: block;
  width: clamp(12px, 3.6vw, 16px);
  background: currentColor;
}
.bars i:nth-child(1) { height: 30%; }
.bars i:nth-child(2) { height: 55%; }
.bars i:nth-child(3) { height: 78%; }
.bars i:nth-child(4) { height: 100%; }

/* Pressed: the page inverts, the way the board's station bug is drawn
   reversed. Held down by the pointer, released when it lifts. */
.key.down,
.key:active {
  background: var(--white);
  color: var(--ink);
}
.key:focus { outline: none; }
.key:focus-visible { outline: 4px solid var(--white); outline-offset: -10px; }

/* ---------------------------------------------------------- the crawl band */

#crawl {
  display: flex;
  align-items: stretch;
  background: var(--ink);
  border-top: var(--rule) solid var(--white);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 58px;
}
#flag {
  display: flex;
  align-items: center;
  background: var(--red);
  color: var(--white);
  padding: 0 16px;
  font-size: 17px;
  letter-spacing: 2px;
  border-right: 4px solid var(--white);
  flex: 0 0 auto;
}
#status {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px 14px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-transform: none;
  font-size: 15px;
  line-height: 1.35;
  color: var(--white);
}
#status.warn { color: #F0C860; }
#room, #install {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--white);
  text-decoration: none;
  border-left: 1px solid rgba(240, 240, 236, 0.35);
  flex: 0 0 auto;
}
#install {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  border-left: 1px solid rgba(240, 240, 236, 0.35);
  background: none;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
}
#install[hidden] { display: none; }
#room:hover, #room:focus-visible, #install:hover, #install:focus-visible { background: var(--blue); outline: none; }

/* When the browser offers to install, the crawl band grows a second line:
   the flag and the status stay on the first, INSTALL and CONTROL ROOM share
   the second at full width, so neither the status nor the links get
   squeezed on a phone. Browsers without :has() keep the one-line band. */
#crawl:has(#install:not([hidden])) {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
}
#crawl:has(#install:not([hidden])) #flag { grid-row: 1; grid-column: 1; }
#crawl:has(#install:not([hidden])) #status { grid-row: 1; grid-column: 2 / 4; }
#crawl:has(#install:not([hidden])) #install,
#crawl:has(#install:not([hidden])) #room {
  grid-row: 2;
  justify-content: center;
  padding: 14px;
  border-left: 0;
  border-top: 1px solid rgba(240, 240, 236, 0.35);
}
#crawl:has(#install:not([hidden])) #install { grid-column: 1 / 3; background: var(--blue); }
#crawl:has(#install:not([hidden])) #room { grid-column: 3; border-left: 1px solid rgba(240, 240, 236, 0.35); }
#crawl:has(#install:not([hidden])) #install:hover,
#crawl:has(#install:not([hidden])) #install:focus-visible { background: var(--white); color: var(--ink); }

/* A wide screen (a laptop trying the remote) keeps the phone's proportions
   in the middle rather than stretching the keys across the whole window. */
@media (min-width: 600px) {
  body { background: var(--ink); }
  #remote { min-height: 0; height: 100vh; max-height: 900px; margin: max(0px, calc((100vh - 900px) / 2)) auto; border-left: var(--rule) solid var(--white); border-right: var(--rule) solid var(--white); }
}

@media (prefers-reduced-motion: reduce) {
  .key { transition: none; }
}