/* Deliberately plain. This is an app chrome, not a document, so it does not use
   the DocTemplate system — but it keeps that system's monochrome rule, because
   any colour here would be competing with the shared screen for attention. */

:root {
  --bg: #16150f;
  --ink: #ece8dd;
  --ink-soft: #a9a291;
  --line: #35322a;
  --raised: #211f18;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* dvh, not vh: on mobile browsers vh includes the retracting toolbar, so a
     full-height layout sits permanently a toolbar's worth off the bottom. */
  min-height: 100dvh;
}

main { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }

.view { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: 0.85rem; align-items: stretch; }
.view[hidden] { display: none; }

h1 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.sub { margin: 0 0 0.5rem; color: var(--ink-soft); }
.label { margin: 0; color: var(--ink-soft); font-size: 0.85rem; }
.msg { margin: 0; color: var(--ink-soft); font-size: 0.85rem; min-height: 1.2em; }
.msg:empty { min-height: 0; }

button {
  font: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--ink-soft); }
button:disabled { opacity: 0.5; cursor: default; }

.big { padding: 1.1rem; font-size: 1.05rem; font-weight: 600; }

.opt { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); font-size: 0.9rem; cursor: pointer; }

.linkrow { display: flex; gap: 0.5rem; }
.linkrow input {
  flex: 1; min-width: 0;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.row { display: flex; gap: 0.5rem; }
.row button { flex: 1; }

#preview { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #000; aspect-ratio: 16 / 9; object-fit: contain; }

/* The viewer is the only full-bleed screen: the shared image is the entire
   point, so nothing else is allowed to take space from it. */
.watch { max-width: none; height: 100dvh; position: relative; gap: 0; }
#video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.centered { position: absolute; inset: auto 0 50% 0; text-align: center; padding: 0 1.5rem; }
.unmute { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); }