:root {
  --caption-size: 46px;
  /* The code shares the screen with the subtitles, so its width is also the
     width of the column reserved for it on the right. */
  --qr-size: clamp(240px, 20vw, 340px);
  --qr-gap: 3vw;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.idle-cursor { cursor: none; }

/* --- transcript ------------------------------------------------------ */
#scroller {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2a323c transparent;
  -webkit-overflow-scrolling: touch;
}

#stage {
  min-height: 100%;
  padding: 4vh 4vw calc(4vh + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.55em;
}

/* Keep the text clear of the code instead of running underneath it. */
body.qr-column #stage { padding-right: calc(var(--qr-size) + var(--qr-gap) * 2); }

.line {
  font-size: var(--caption-size);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  transition: opacity .35s ease;
}

/* At the live edge only the newest lines stay bright; scrolled back, the whole
   transcript is meant to be read, so nothing is dimmed. */
#scroller.at-live .line:nth-last-of-type(n+4) { opacity: .42; }
#scroller.at-live .line:nth-last-of-type(n+7) { opacity: .18; }

.line.live { color: #cfe6ff; }
.line .ru {
  display: block;
  font-size: .52em;
  color: #7d8794;
  margin-top: .35em;
  font-weight: 400;
}

#older {
  display: grid;
  place-items: center;
  padding: 18px 0;
  color: #4b535d;
  font-size: 15px;
}
#older[hidden] { display: none; }

/* --- jump back to live ----------------------------------------------- */
#jump {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid #2f6ea8;
  border-radius: 999px;
  background: #12324f;
  color: #dceaff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 3;
}
#jump.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#jump:hover { background: #17436a; }
#jump .arrow { font-size: 17px; line-height: 1; }

/* --- placeholder ----------------------------------------------------- */
#placeholder {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  text-align: center;
  color: #4b535d;
  font-size: 22px;
  padding: 0 4vw;
  pointer-events: none;
  transition: opacity .4s;
  z-index: 2;
}
#placeholder.hidden { opacity: 0; }
#placeholder b { font-size: 30px; color: #6c7581; font-weight: 600; }
body.qr-column #placeholder { padding-right: calc(var(--qr-size) + var(--qr-gap) * 2); }

/* --- QR -------------------------------------------------------------- */
#qrbox {
  position: fixed;
  top: 3vh;
  right: var(--qr-gap);
  width: var(--qr-size);
  margin: 0;
  padding: 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .6);
  z-index: 12;
}
#qrbox[hidden] { display: none; }
#qrbox svg { display: block; width: 100%; height: auto; }
#qrbox figcaption {
  margin-top: 10px;
  text-align: center;
  color: #0b0d10;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

#qrbackdrop { display: none; }

/* --- controls -------------------------------------------------------- */
#bar {
  position: fixed;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0));
  transition: opacity .3s;
  font-size: 13px;
  color: #98a2ae;
  z-index: 15;
}
#bar.hidden { opacity: 0; pointer-events: none; }

#bar button {
  font: inherit;
  min-width: 34px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid #2a323c;
  background: #141a21;
  color: #d7dee6;
  cursor: pointer;
}
#bar button:hover { border-color: #4da3ff; }
#bar button[aria-pressed="true"] { background: #1d4e80; border-color: #4da3ff; color: #fff; }

#conn {
  width: 9px; height: 9px; border-radius: 50%;
  background: #e05c5c; margin-right: 6px;
}
#conn.ok { background: #35c07a; }
#conn.warn { background: #e0a33e; }

/* --- phones ---------------------------------------------------------- */
/* No reserved column: the code is something you hand to the person next to
   you, so it opens over the text and then gets out of the way. */
@media (max-width: 700px) {
  body.qr-column #stage,
  body.qr-column #placeholder { padding-right: 4vw; }

  #fullscreen { display: none; }

  #qrbackdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(3px);
    z-index: 18;
  }
  #qrbackdrop[hidden] { display: none; }

  #qrbox {
    top: 50%;
    left: 50%;
    right: auto;
    width: min(78vw, 360px);
    transform: translate(-50%, -50%);
    padding: 18px;
    z-index: 19;
  }
  #qrbox figcaption { font-size: 15px; }

  #bar { font-size: 15px; }
  #bar button { padding: 9px 13px; min-width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  #jump, .line, #placeholder { transition: none; }
}