/* Family screen share.
   Design brief: the person sharing is often the least technical one in the
   room and may be reading the screen over a phone call. Big targets, one
   decision per screen, no jargon.

   Mobile-first. Phones can only ever watch (no getDisplayMedia on iOS, and
   patchy on Android), so the watch form comes first in the source order and
   the viewer is where the layout effort goes: a desktop screen rendered on a
   phone is unreadable without zoom and pan. */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --line: #e3e6ea;
  --ink: #14181d;
  --ink-soft: #5b6672;
  --accent: #2f6bff;
  --accent-ink: #ffffff;
  --danger: #c8321f;
  --warn-bg: #fff6e6;
  --warn-ink: #7a4a00;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(20 24 29 / .06), 0 8px 24px rgb(20 24 29 / .06);
  --bar-h: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116;
    --surface: #171c23;
    --line: #262d37;
    --ink: #e9edf2;
    --ink-soft: #9aa6b4;
    --accent: #5b8cff;
    --accent-ink: #0b0f14;
    --danger: #ff6a52;
    --warn-bg: #2b2211;
    --warn-ink: #f0c675;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .3);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  padding: max(1.25rem, env(safe-area-inset-top))
           max(1rem, env(safe-area-inset-right))
           max(1.5rem, env(safe-area-inset-bottom))
           max(1rem, env(safe-area-inset-left));
  display: grid;
  place-items: start center;
}

#app { width: 100%; max-width: 30rem; }

/* Views swap via [data-active]; only one is ever in flow. */
.view { display: none; }
.view[data-active] { display: block; }
body:has(.view-wide[data-active]) #app { max-width: min(96rem, 100%); }

/* The viewer wants the whole screen - drop body padding when it's active. */
body:has(#view-viewing[data-active]) {
  padding: max(.5rem, env(safe-area-inset-top)) .5rem
           max(.5rem, env(safe-area-inset-bottom)) .5rem;
}

/* ── type ─────────────────────────────────────────────────── */

.masthead { margin-bottom: 1.5rem; text-align: center; }
h1 { margin: 0 0 .35rem; font-size: clamp(1.4rem, 5vw, 1.6rem); letter-spacing: -.02em; }
.sub { margin: 0; color: var(--ink-soft); }
.hint { margin: .5rem 0 0; font-size: .85rem; color: var(--ink-soft); }

.fineprint {
  margin: 1.5rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

.fineprint.warn {
  background: var(--warn-bg);
  color: var(--warn-ink);
  padding: .75rem .9rem;
  border-radius: 10px;
  text-align: left;
}

/* ── buttons ──────────────────────────────────────────────── */

.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  width: 100%;
  min-height: 3rem;              /* comfortable touch target */
  padding: .9rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;    /* kills the 300ms tap delay */
  transition: transform .06s ease, filter .15s ease, background .15s ease;
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.btn-primary:hover:not([disabled]) { filter: brightness(1.06); }

.btn-secondary {
  width: auto;
  flex-shrink: 0;
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost {
  width: auto;
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
  font-weight: 500;
}

.btn-danger { background: transparent; color: var(--danger); border-color: currentColor; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }

.btn-sm {
  min-height: 2.25rem;
  padding: .4rem .75rem;
  font-size: .85rem;
  border-radius: 9px;
}

.btn-title { font-size: 1.05rem; }
.btn-note { font-size: .8rem; font-weight: 400; opacity: .85; }

/* ── home ─────────────────────────────────────────────────── */

.stack { display: grid; gap: 1.1rem; }

.card {
  padding: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  color: var(--ink-soft);
  font-size: .8rem;
}
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); }

.join label { display: block; font-weight: 600; margin-bottom: .5rem; }
.join-row { display: flex; gap: .6rem; }

#input-code {
  flex: 1;
  min-width: 0;
  padding: .85rem 1rem;
  /* 16px minimum or iOS Safari zooms the whole page on focus. */
  font: 600 max(16px, 1.15rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#input-code::placeholder { color: var(--ink-soft); opacity: .5; letter-spacing: .18em; }
#input-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.notice {
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9rem;
}
.notice strong { display: block; margin-bottom: .3rem; }
.notice p { margin: 0; color: var(--ink-soft); font-size: .85rem; }

/* ── sharing ──────────────────────────────────────────────── */

.code-card {
  display: grid;
  gap: .9rem;
  justify-items: center;
  padding: 1.4rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.code {
  font: 700 clamp(2rem, 11vw, 2.6rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .22em;
  text-indent: .22em;      /* offset trailing letter-space so it reads centred */
  user-select: all;        /* one tap selects the whole code */
}

.code-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

.status { margin: 1rem 0; text-align: center; color: var(--ink-soft); font-size: .92rem; }
.status.good { color: var(--accent); font-weight: 600; }

.preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 1.1rem;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: contain;
}

/* ── viewing ──────────────────────────────────────────────── */

.viewer-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: var(--bar-h);
  margin-bottom: .5rem;
}

/* .btn is width:100% by default (correct for the stacked buttons elsewhere).
   In this bar every control sits inline, so shrink them to their content -
   otherwise Leave expands to fill the row and squeezes the status to "Conn…". */
.viewer-bar .btn { width: auto; flex: 0 0 auto; }

.viewer-bar .status {
  margin: 0;
  min-width: 0;            /* lets the flex item shrink instead of overflowing */
  text-align: left;
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spacer { flex: 1 1 auto; min-width: 0; }

.stage-wrap {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--bar-h) - 2rem);
  overflow: hidden;               /* zoomed video must not push the page around */
  background: #000;
  border-radius: var(--radius);
  touch-action: none;             /* we handle pinch and drag ourselves */
}

.stage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 0 0;
  will-change: transform;
  /* No CSS transition: it fights the gesture handler and feels laggy. */
}

.stage-hint {
  position: absolute;
  left: 50%;
  bottom: .75rem;
  transform: translateX(-50%);
  margin: 0;
  padding: .4rem .8rem;
  background: rgb(0 0 0 / .6);
  color: #fff;
  border-radius: 999px;
  font-size: .75rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s ease;
}
.stage-hint[hidden] { display: block; opacity: 0; }

/* Pointer-precise devices don't need the touch hint. */
@media (hover: hover) and (pointer: fine) {
  .stage-hint { display: none; }
}

/* Phone landscape: the bar eats scarce vertical space, so shrink it. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --bar-h: 2.5rem; }
  .viewer-bar { margin-bottom: .25rem; }
  body:has(#view-viewing[data-active]) { padding: .25rem; }
  .stage-wrap { height: calc(100dvh - var(--bar-h) - 1rem); }
}

/* ── toast ────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: .7rem 1.1rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: .88rem;
  text-align: center;
  box-shadow: var(--shadow);
  z-index: 10;
}
.toast[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}