/* teletext.css — a Ceefax/teletext-style full-screen menu that REPLACES the two
 * gray modals (channels + settings) with all their actions, keyboard-navigable.
 * Solid bright OSD blue, white monospace OSD (Bedstead) pixel text, a header row,
 * cursor-highlighted menu rows, and a bottom row of coloured "fastext" hints.
 * Sits at z40 — above the page modals (z20/z25) — and is hidden by default. */

#teletext {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  background: var(--osd-blue);
  color: var(--osd-fg);
  font-family: "OSD", "Courier New", monospace;
  /* teletext is a fixed 40x25 character grid; we approximate with a uniform cell */
  font-size: clamp(15px, 2.4vw, 26px);
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: var(--osd-glow);
  /* a little CRT softening to match the OSD bars */
  filter: url(#osdBlur);
  -webkit-font-smoothing: none;
  overflow: hidden;
  /* the page leaves it hidden; .open flips it on */
}
#teletext.open { display: flex; }

/* the fixed-width "page" centered like a 4:3 teletext screen */
#teletext .ttpage {
  width: min(96vw, 900px);
  margin: 0 auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 2.2vh, 26px) 0;
  box-sizing: border-box;
  min-height: 0;
}

/* header row: "BOOMSURF  P100  TELETEXT" — page label in cyan, clock in white */
#teletext .tthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 1ch;
  flex: none;
  white-space: nowrap;
}
#teletext .tthead .tt-page { color: #ffff00; }   /* yellow page number */
#teletext .tthead .tt-name { color: #00ffff; }   /* cyan service name  */
#teletext .tthead .tt-clock { color: var(--osd-fg); }

/* the page title (big yellow band, teletext "double-height" feel) */
#teletext .tttitle {
  flex: none;
  padding: 0 1ch;
  margin: 0.4em 0 0.5em;
  color: #ffff00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#teletext .ttsub { color: #00ff00; }   /* green sub-label after the title */

/* scrollable body of menu rows */
#teletext .ttbody {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 1ch;
  min-height: 0;
  scrollbar-width: none;
}
#teletext .ttbody::-webkit-scrollbar { display: none; }

/* a menu row: a number/key in cyan, a label, and (optionally) a right-aligned value */
#teletext .ttrow {
  display: flex;
  align-items: center;
  gap: 1ch;
  padding: 0 0.5ch;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
}
#teletext .ttrow .tt-k { color: #00ffff; flex: none; }      /* leading number/key */
/* channel list: reserve a 3-digit-wide number column so 1-, 2- and 3-digit channels all align names.
   +4px covers the 1px letter-spacing per digit (ch = glyph advance only, excludes letter-spacing). */
#teletext .ttrow.tt-chan .tt-k { min-width: calc(3ch + 4px); text-align: left; }
#teletext .ttrow .tt-l { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
#teletext .ttrow .tt-v { color: #00ff00; flex: none; }       /* right-side value (green) */
#teletext .ttrow .tt-del { cursor: pointer; }
#teletext .ttrow .tt-del.tt-delsel { color: #000; background: #ffd23f; font-weight: bold; }  /* [DEL] keyboard-selected */
#teletext .ttrow .tt-del.tt-armed { color: #ff3b30; font-weight: bold; }   /* [SURE?] — delete is armed */
#teletext .ttrow.tt-dim { color: #9fb8ff; }                  /* hint/disabled text */
#teletext .ttrow.tt-blank { cursor: default; }
/* keybind cheat-sheet row: a yellow key column + a white description. */
#teletext .ttrow.tt-keybind .tt-k { min-width: 11ch; color: #ffd23f; flex: none; text-align: left; }
#teletext .ttrow.tt-keybind .tt-l { color: var(--osd-fg); }
/* non-interactive HTML row (the LINK A DEVICE QR). The QR sits on a white card with a quiet zone so it
   scans reliably off the blue teletext background. */
#teletext .ttrow.tt-html { display: block; padding: 6px 0; }
#teletext .tt-qr {
  width: min(56vw, 300px);
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  line-height: 0;
}
#teletext .tt-qr svg { width: 100%; height: auto; display: block; }

/* sign-in / save-id forms (password-manager friendly). Styled to read as teletext rows; the submit
   button looks like a selectable teletext action. */
#teletext .tt-form { display: block; margin: 0; }
#teletext .tt-formrow { display: flex; align-items: baseline; gap: 0.6ch; }
#teletext .tt-submit {
  display: inline-block;
  margin: 4px 0 2px;
  background: var(--osd-fg);
  color: var(--osd-blue);
  border: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  padding: 2px 14px;
  cursor: pointer;
}
#teletext .tt-submit:hover, #teletext .tt-submit:focus { outline: 2px solid var(--osd-fg); outline-offset: 1px; }

/* the readable subscriber id on the "you're subscribed" screen — selectable, wraps, stands out so the
   user can copy/write it down even without a password manager. */
/* loading screen (loading.js): the connect→start screen. `.loading` lifts the teletext ABOVE the
   standby black overlay (z75) so it's the visible off-state, and centres its one/two lines. */
#teletext.loading { z-index: 80; }
#teletext.loading .ttbody {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
#teletext.loading .ttrow { font-size: 1.3em; }
.ld-blink { animation: ld-blink 1.1s steps(1, end) infinite; }
@keyframes ld-blink { 50% { opacity: 0; } }

#teletext .tt-id {
  color: #ffd23f;
  background: rgba(0, 0, 0, 0.22);
  padding: 6px 10px;
  border-radius: 4px;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
}

/* the cursor row — classic teletext inverse video (white box, blue text) */
#teletext .ttrow.tt-cursor {
  background: var(--osd-fg);
  color: var(--osd-blue);
}
#teletext .ttrow.tt-cursor .tt-k,
#teletext .ttrow.tt-cursor .tt-l,
#teletext .ttrow.tt-cursor .tt-v { color: var(--osd-blue); }

/* a selectable segmented value: the chosen option boxed (inverse) inline */
#teletext .tt-seg { display: inline; }
#teletext .tt-seg .opt { padding: 0 0.4ch; opacity: 0.7; }
#teletext .tt-seg .opt.on { opacity: 1; text-decoration: underline; }
/* on the cursor row, the chosen option gets a cyan box so it stands out on white */
#teletext .ttrow.tt-cursor .tt-seg .opt.on { color: #b00; text-decoration: underline; }

/* an inline text-entry row (new channel / API key) */
#teletext .tt-input {
  flex: 1 1 auto;
  min-width: 4ch;
  background: transparent;
  border: 0;
  outline: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  caret-color: #ffff00;
  caret-shape: block;   /* Commodore-style flashing BLOCK cursor instead of the thin line (CSS UI4;
                           falls back to the line caret on browsers that don't support it yet) */
}
#teletext .tt-input::placeholder { color: #9fb8ff; opacity: 1; text-transform: uppercase; }
/* when the input's row is the cursor, the caret/text read as blue-on-white */
#teletext .ttrow.tt-cursor .tt-input { color: var(--osd-blue); caret-color: var(--osd-blue); }
#teletext .ttrow.tt-cursor .tt-input::placeholder { color: #3a52a8; }

/* a status / message line above the fastext bar */
#teletext .ttmsg {
  flex: none;
  padding: 0.2em 1ch 0;
  min-height: 1.5em;
  color: #00ff00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the bottom "fastext" row: four coloured labels mapped to actions */
#teletext .ttfast {
  flex: none;
  display: flex;
  gap: 0;
  padding: 0.3em 1ch 0;
  white-space: nowrap;
}
#teletext .ttfast .fx {
  flex: 1 1 25%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  padding-left: 1.2ch;
  position: relative;
}
/* the coloured block that precedes each fastext label */
#teletext .ttfast .fx::before {
  content: "\25A0";   /* ■ */
  position: absolute;
  left: 0;
}
#teletext .ttfast .fx.red::before    { color: #ff3030; }
#teletext .ttfast .fx.green::before  { color: #00ff00; }
#teletext .ttfast .fx.yellow::before { color: #ffff00; }
#teletext .ttfast .fx.cyan::before   { color: #00ffff; }

/* ─── QUICK ACTIONS popup (double-tap ENTER) ────────────────────────────────────
   A small centred teletext-style card: a d-pad shortcut menu for one-button TV remotes. z45 so it sits
   just above the full teletext menu; hidden by default. */
#quickmenu {
  position: fixed; inset: 0; z-index: 45;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
#quickmenu.open { display: flex; }
#quickmenu .qmbox {
  pointer-events: auto;
  background: var(--osd-blue);
  color: var(--osd-fg);
  font-family: "OSD", "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(14px, 2.2vw, 24px);
  text-shadow: var(--osd-glow);
  padding: 20px 30px 16px;
  border-radius: 7px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  min-width: 300px;
}
#quickmenu .qmt { color: #ffff00; letter-spacing: 3px; margin-bottom: 14px; }   /* same yellow as the menu titles */
#quickmenu .qmmid { display: flex; justify-content: space-between; gap: 28px; margin: 6px 0; }
#quickmenu .qmrow { padding: 4px 2px; cursor: pointer; white-space: nowrap; }
#quickmenu .qmrow:hover { color: #ffff00; }
#quickmenu .qmf { margin-top: 14px; color: #9fb8ff; font-size: 0.78em; letter-spacing: 2px; }   /* dim footer */

/* ADD CHANNEL — playlist search picker: a checkbox, the title (truncated with …), and the uploader +
   video count to the right (dim). No thumbnails. */
#teletext .ttrow.tt-pick .tt-k { min-width: 3ch; color: #9fb8ff; flex: none; }   /* [ ] / [x] */
#teletext .ttrow.tt-pick.tt-picked .tt-k { color: #00ff00; }                     /* checked */
#teletext .ttrow.tt-pick .tt-pickmeta {
  color: #9fb8ff; flex: none; max-width: 42%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}