/* The television screen of issue #30.

   Its own file rather than a block in styles.css because two very different pages
   need it: the console, where /#/tv is a route, and the Cast receiver, which is a
   separate document on a device that should download as little as possible.

   Picture first, no app chrome, everything else in one thin strip — the same
   language as the touch cockpit, at the distance a sofa is from a television.
   Inside a 5% margin because older sets still overscan, and a reading in the
   cropped border is a reading nobody gets. */

body[data-route="tv"] {
  margin: 0;
  background: #000;
  overflow: hidden;
}

#tv {
  position: fixed;
  inset: 0;
  color: #fff;
  font-size: 22px;
}

.tv-screen {
  position: absolute;
  inset: 0;
}

#tv-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* One strip, bottom left to bottom right, over the picture. No panel, no border: the
   picture is the page and this sits on it. */
.tv-strip {
  position: absolute;
  left: 5vw;
  right: 5vw;
  bottom: 4vh;
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.tv-place { font-weight: 600; }
.tv-speed, .tv-extra { color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }

/* Never a large warning: a small notice that something is true, at the far end of the
   strip where a reader's eye ends rather than where the picture is. */
.tv-badge {
  margin-left: auto;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #e3b341;
  font-size: 0.85em;
}

.tv-badge[hidden] { display: none; }

/* The pairing QR, shown only while no phone holds the sticks. */
/* Sized in vh, for the same reason the minimap below is: it should be the same share of
   a television whatever shape the set is. Unsized, the canvas rendered at its own 320px
   bitmap on a viewport a Cast device reports as 960x540 — a third of the screen's width,
   which on a 55-inch set is about 40 cm of QR code sitting over the picture somebody is
   flying a drone by (issue #42).

   A fifth of the height is roughly 15 cm on that same set, which a phone reads from across
   a room; a QR only has to be scannable from where the person holding the phone is
   standing. The padding stays in px and outside the code: it is the quiet zone a scanner
   needs, not decoration, so it must not scale away to nothing on a small screen. */
.tv-qr {
  position: absolute;
  right: 5vw;
  top: 5vh;
  width: 20vh;
  height: 20vh;
  box-sizing: content-box;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
}

.tv-qr[hidden] { display: none; }

/* The minimap (lib/tvmap.ts). Bottom right, one size, and there either way — the
   cockpit's Map control now turns it on and off rather than growing it (issue #42).

   Bottom right is the cockpit's own corner, so a pilot glancing from the phone to the
   television looks the same way twice. It sits directly above the bottom strip rather than
   in the corner proper, which is how it shares that side of the screen with the readings
   instead of covering the notice badge at the strip's right-hand end — the one thing on a
   television that may never be hidden. Flush with the strip's right edge at 5vw, so the
   map, the badge and the readings all line up on the same two margins.

   A quarter of the screen's height, square, and sized in vh so it is the same share of a
   television whatever shape the set is. Square because the ground it covers is square:
   lib/tvmap.ts holds the view at 100 m across whatever this box's pixel size works out to
   on the set it lands on, so the scale is a fact about the map rather than a side effect
   of the screen.

   Slightly transparent, which is only possible now that it is not a thing being grown
   over the picture: the streets are dimmed to let the picture through, while the canvas
   over them keeps the drone, the dock and the red boundary at full strength. What the
   transparency is for is the picture, and what the picture must not cost is the reading of
   the map, so the two layers do not fade together. */
.tv-map {
  position: absolute;
  right: 5vw;
  bottom: calc(4vh + 2.2em);
  width: 25vh;
  height: 25vh;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(11, 15, 20, 0.45);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

.tv-map[hidden] { display: none; }

.tv-map-tiles,
.tv-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Transparent background and dimmed streets: this is the half of the map the picture
   shows through (issue #42). The canvas above is left alone. */
.tv-map-tiles { background: transparent; cursor: default; opacity: 0.68; }

/* Over the streets, and never in the way: there is no pointer in a living room, and the
   map is read rather than pressed. */
.tv-map-canvas { pointer-events: none; z-index: 500; }

/* The same quietened streets the cockpit's minimap draws, so the drone, the dock and the
   red boundary over them are what the eye lands on. */
.tv-map .leaflet-tile-pane { filter: grayscale(.85) brightness(.7) contrast(1.05); }

.tv-map .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

.tv-map .leaflet-control-attribution a { color: rgba(255, 255, 255, 0.6); }

.tv-join {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 5vh 5vw;
  text-align: center;
}

.tv-join h1 { margin: 0; font-size: 2.2rem; font-weight: 600; }
.tv-join p { margin: 0; color: rgba(255, 255, 255, 0.7); }

.tv-join form { display: flex; gap: 0.8rem; margin-top: 1.2rem; }

#tv-code {
  width: 7em;
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font: inherit;
  font-size: 2rem;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.tv-join button {
  padding: 0.5rem 1.4rem;
  border-radius: 10px;
  border: 0;
  background: #1f6feb;
  color: #fff;
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

.tv-join-error { color: #e3b341; margin-top: 1rem; }
.tv-join-error[hidden] { display: none; }


/* The drawing of the controls (lib/tvhelp.ts, issue #42), asked for from the cockpit.

   A card over a dimmed picture rather than a page instead of it. A drone is in the air
   while this is up and the person reading it is watching this screen — the cockpit lets go
   of the controls on the press, the way it does for its own sheet, but letting go is not
   landing, and a pilot who can still see the drone around the card is in a better place
   than one looking at an opaque page. So the picture stays, darkened enough to read over.

   Sized for the room, not the hand: the card is a share of the screen rather than a pixel
   width, and every word on it is a multiple of this screen's own 22px. Inside the 5%
   margin older sets overscan away, like everything else here. */
.tv-help {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
  background: rgba(2, 4, 8, 0.72);
}

.tv-help[hidden] { display: none; }

/* Two columns, because a television is wide and short. Stacked — drawing above the lines
   — the card needed 573 px of a 540-line Chromecast and quietly clipped the last line off
   the bottom, which on this screen is the line that says how to put the page away. Side by
   side it is the shape of the set it is on: the drawing beside the words it explains, and
   the whole thing well inside the height even on the shortest screen this runs on.

   A set narrower than it is tall is not a television, but the Cast receiver has landed on
   stranger things, so the columns collapse back to one there. */
.tv-help-card {
  width: min(86vw, 160vh);
  max-height: 86vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "title   title"
    "lead    lead"
    "picture rows";
  column-gap: 1.6em;
  align-content: start;
  overflow: hidden;
}

@media (max-aspect-ratio: 1 / 1) {
  .tv-help-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "lead" "picture" "rows";
  }
}

.tv-help-title { grid-area: title; margin: 0; font-size: 1.6em; font-weight: 600; }
.tv-help-lead {
  grid-area: lead;
  margin: 0.2em 0 0.8em;
  color: rgba(255, 255, 255, 0.72);
}

/* The drawing is the explanation and the words beside it are the confirmation, so it gets
   a column of its own — and a ceiling, so it can never grow into the lines it explains. */
.tv-help-picture { grid-area: picture; display: grid; place-items: center; }
.tv-help-picture svg { width: 100%; max-height: 42vh; height: auto; }
.tv-help-craft { fill: none; stroke: #f2f5f8; stroke-width: 3; stroke-linecap: round; }
.tv-help-craft rect { fill: rgba(255, 255, 255, 0.12); }
.tv-help-craft circle:last-of-type { fill: #4a9eff; stroke: none; }
.tv-help-arrow { color: #4a9eff; stroke: #4a9eff; stroke-width: 4; stroke-linecap: round; }
.tv-help-tag text { fill: #f2f5f8; font: 700 22px/1 ui-monospace, monospace; }

.tv-help-rows { grid-area: rows; display: grid; gap: 0.35em; align-content: center; }

/* The control, then what it does. One column wide enough for the pad's own names — "Right
   stick" is not a key cap — so both kinds of row line up on the same edge. */
.tv-help-row {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 1em;
  align-items: center;
}

.tv-help-controls { display: flex; gap: 0.3em; flex-wrap: wrap; }

.tv-help-key {
  padding: 0.15em 0.5em;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  font: 600 0.8em/1.4 ui-monospace, monospace;
  white-space: nowrap;
}

.tv-help-what { color: rgba(255, 255, 255, 0.9); font-size: 0.8em; }


/* How far behind the picture is, when the Location asks for it (issue #30). Just above
   the strip and in the strip's own quiet register: this is for an administrator judging
   a television, not something anybody flies by. */
.tv-latency {
  position: absolute;
  left: 5vw;
  right: 5vw;
  bottom: calc(4vh + 2.2em);
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  font-size: 0.8em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.tv-latency[hidden] { display: none; }