/* aaoo — base styles: the navy token system, buttons, and components shared by
   the landing and call pages. Flat CSS, no preprocessor — matches the website
   repo philosophy. Every recurring value lives in :root so it changes in one
   place. Call-stage-specific rules live in call.css.
   Tokens are the v1 design pass (design_handoff_aaoo), derived from the
   Samizdat ring gradient #4966fd → #10185e. Colors/buttons are FINAL; layout
   is mid-fi. RTL-safe: logical properties only, no left/right hardcoding. */
:root {
  /* --- Surfaces --- */
  --bg: #0A0D2B;            /* page background (deepest navy) */
  --panel: #10143A;         /* cards, sheets, list rows */
  --surface: #1E2452;       /* chips, round call controls, inner boxes */
  --border: #2B3272;        /* all borders */

  /* --- Text --- */
  --text: #f2f5f5;          /* primary */
  --muted: #9BA1C9;         /* secondary */
  --muted-2: #767CA8;       /* tertiary / fine print */

  /* --- Accents --- */
  --accent: #7C91FF;        /* links, link-URL text, live status */
  --accent-strong: #5772FF; /* focused input borders, selection */
  --btn-primary-bg: #C7CCE8;
  --btn-primary-text: #1C267A;

  /* --- Status --- */
  --danger: #BA1A1A;        /* End-call fills */
  --danger-text: #FF5449;   /* destructive text links */
  --success: #119366;       /* ✓ states, toasts */
  --warning: #B36B00;       /* amber pills: mic-off, free-cap countdown */

  /* --- Geometry --- */
  --radius: 6px;            /* buttons, inputs, cards */
  --radius-pill: 999px;
  --gap: 16px;
  --maxw: 460px;            /* every dialog-type screen centers at this width */
  --tap: 44px;              /* min touch-target (iOS HIG) */
  --btn-h: 46px;            /* primary button height (design: 44–46) */
  --no-zoom-fs: 16px;       /* iOS auto-zooms inputs with font-size < 16px */

  /* --- Type --- */
  /* Lean assets: system stacks only (throttled/censored connections). */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Safe-area insets, floored at --gap so every edge keeps breathing room. */
  --inset-top: max(var(--gap), env(safe-area-inset-top));
  --inset-right: max(var(--gap), env(safe-area-inset-right));
  --inset-bottom: max(var(--gap), env(safe-area-inset-bottom));
  /* Small-screen breakpoint = 480px, desktop split = 720px; CSS can't read a
     var inside @media, so those literals live only in the media queries. */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

/* --- Centered dialog column ----------------------------------------------
   Every dialog-type state (landing, getting ready, errors, waiting, ended,
   paywall) is the same centered column on the navy canvas, max-width 460. */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
}
.screen[hidden] { display: none; }
.screen-body {
  width: 100%;
  max-width: var(--maxw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.screen-body > * { margin: 0; }

.logo { display: block; }
.brand { font-size: 26px; font-weight: 700; }
.title { font-size: 17px; font-weight: 700; line-height: 1.35; }
.lede { font-size: 14px; color: var(--muted); line-height: 1.5; }
.fine { font-size: 12px; color: var(--muted-2); line-height: 1.5; }
.mono { font-family: var(--font-mono); }

/* --- Buttons --------------------------------------------------------------
   Secondary/ghost is the default .btn; primary is the light-fill navy-label
   inversion of the website's Donate button. Shapes/fills are FINAL. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  min-height: var(--tap);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--surface); }

.btn-primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: 700;
  min-height: var(--btn-h);
}
.btn-primary:hover { filter: brightness(1.06); background: var(--btn-primary-bg); }

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover { background: var(--danger); filter: brightness(1.15); }

.btn-block { width: 100%; }

/* Quiet text actions ("or join with mic only", "Call again free"). */
.link-quiet {
  background: none;
  border: none;
  padding: 10px;
  min-height: var(--tap);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted-2);
  cursor: pointer;
  text-decoration: none;
}
.link-quiet:hover { color: var(--muted); }
.link-accent { color: var(--accent); }
.link-accent:hover { color: var(--accent-strong); }
.link-danger { color: var(--danger-text); }

/* --- Link field + inputs --------------------------------------------------- */
.link-row { display: flex; gap: 8px; width: 100%; }
.link-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--accent);          /* the link itself reads as a link */
  font-family: var(--font-mono);
  font-size: 13px;
}
.link-input:focus { border-color: var(--accent-strong); outline: none; }

/* --- Inner panel (instructions, paywall bullets) --------------------------- */
.inner-panel {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--surface);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  color: var(--btn-primary-bg);
  line-height: 1.7;
  text-align: start;
}

/* --- Toast ------------------------------------------------------------------
   One toast pattern app-wide: green pill, top-center, transient. */
.toast {
  position: fixed;
  top: var(--inset-top);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--success);
  color: #fff;
  font-size: 13px;
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  z-index: 30;
  pointer-events: none;
}
[dir="rtl"] .toast { transform: translateX(50%); }
.toast[hidden] { display: none; }

/* --- Checklist ("Getting ready…") ------------------------------------------ */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  width: 100%;
  max-width: 200px;
  text-align: start;
}
.checklist .step { color: var(--muted-2); }
.checklist .step.active { color: var(--accent); }
.checklist .step.done { color: var(--success); }

/* --- Error icon circle ------------------------------------------------------ */
.error-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--danger-text);
  font-size: 20px;
  font-weight: 700;
}
.error-icon.warn { color: var(--warning); }
.error-icon.ok { color: var(--success); }

/* --- First-run explainer (S0) trust list ---------------------------------- */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  text-align: start;
}
.check-list li { display: flex; align-items: center; gap: 8px; }
.check-list li::before { content: "✓"; color: var(--success); font-weight: 700; }

/* --- Test-call waveform (S0b) --------------------------------------------- */
/* Bars are driven from the LIVE mic level in landing.mjs (setBars) — a flat wave
   means no mic input, which is the actual "is my microphone working" signal. */
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 72px;
}
.wave span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: height 90ms ease-out;
}

/* --- Test-call self-view (S0b) -------------------------------------------- */
/* The echoed-back video, shown when a camera track is present. Hidden (no
   camera) it still plays the echoed audio. Stage stays pure #000 per the design
   (video content is never themed). */
.test-video {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: #000;
  object-fit: cover;
  transform: scaleX(-1); /* mirror the self-view by default, like a front camera */
}
/* The swap button removes the mirror to show the true orientation (how the other
   person sees you). */
.test-video.unmirror { transform: none; }

/* --- Test-call mic picker (S0b) ------------------------------------------- */
.mic-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.mic-select {
  flex: 1;
  min-width: 0;
  max-width: 260px;
  /* Reserve inline-end room for the custom chevron so the device name can't run
     under it; long names truncate with an ellipsis instead. */
  padding-block: 8px;
  padding-inline: 10px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--no-zoom-fs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Drop the native arrow (inconsistent width, overlaps text) for a chevron we
     position ourselves clear of the text. */
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--panel);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239BA1C9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 4.5 6 8 9.5 4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.mic-select:focus { border-color: var(--accent-strong); outline: none; }

/* --- Connecting dots -------------------------------------------------------- */
.dots { display: flex; gap: 6px; }
.dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-pulse 1.2s infinite ease-in-out;
}
.dots span:nth-child(2) { background: var(--accent-strong); animation-delay: 0.2s; }
.dots span:nth-child(3) { background: #304EDC; animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* --- Small screens ----------------------------------------------------------- */
@media (max-width: 480px) {
  .link-input { font-size: var(--no-zoom-fs); }
}