/* Shared look of every demo page. A customer's theme.css (served from
   /<slug>/brand/theme.css) overrides the variables, nothing else. */
:root {
  --brand: #2a5d6e;
  --brand-strong: #1f4652;
  --on-brand: #ffffff;
  --bg: #f5f7f8;
  --card: #ffffff;
  --text: #17252a;
  --muted: #5b6b70;
  --line: #dde4e6;
  --danger: #b3261e;
  --record: #c8372d;
  --focus: #6aa5b8;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font-body);
  --logo-height: 64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #6aa5b8;
    --brand-strong: #8cc0d1;
    --on-brand: #0f1719;
    --bg: #0f1719;
    --card: #172225;
    --text: #e6eef0;
    --muted: #9aaeb3;
    --line: #2a3a3e;
    --danger: #f2a39e;
    --record: #e2574c;
    --focus: #8cc0d1;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 17px/1.5 var(--font-body);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}
main { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 20px; }
header { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
header .logo { display: block; height: var(--logo-height); width: auto; max-width: 100%; }
header h1 { margin: 0; font: 700 28px/1.2 var(--font-head); }
header p { margin: 0; color: var(--muted); }
/* Logos are made for white paper: on a dark page they sit on a white plate. */
@media (prefers-color-scheme: dark) {
  header .logo { background: #fff; border-radius: 12px; padding: 8px 12px; box-sizing: content-box; }
}
.card, form.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
form.card { align-items: stretch; text-align: left; gap: 12px; }
label { font-weight: 600; }
input[type="email"], input[type="password"], textarea {
  width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; padding: 10px 14px;
}
textarea { resize: vertical; min-height: 120px; line-height: 1.45; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, .drop:focus-within {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
.field { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.hint { color: var(--muted); font-size: 14px; margin: 0; }
/* Only demos that mail the visitor (askEmail) talk about their inbox. */
body[data-ask-email="false"] .mail-hint { display: none; }

button.primary, button.secondary, a.button {
  min-height: 48px; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
button.primary { background: var(--brand); color: var(--on-brand); border: 0; }
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
button:disabled { opacity: .6; cursor: default; }
.actions { display: flex; gap: 12px; width: 100%; }
.actions button { flex: 1; white-space: nowrap; }
@media (max-width: 460px) { .actions { flex-direction: column-reverse; } }
.wide { width: 100%; }

/* Voice */
.record {
  width: 112px; height: 112px; border-radius: 50%;
  border: 0; background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform .1s ease, background .2s ease;
}
.record:active { transform: scale(.97); }
.record svg { width: 44px; height: 44px; }
body[data-state="recording"] .record { background: var(--record); color: #fff; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(200,55,45,.45); }
  100% { box-shadow: 0 0 0 22px rgba(200,55,45,0); }
}
@media (prefers-reduced-motion: reduce) { body[data-state="recording"] .record { animation: none; } }
.label { font-weight: 600; margin: 0; }
.timer { font-variant-numeric: tabular-nums; color: var(--muted); margin: 0; }
.timer:empty { display: none; }

/* Upload */
.drop {
  width: 100%; border: 2px dashed var(--line); border-radius: 14px; padding: 28px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  background: var(--bg); transition: border-color .15s ease, background .15s ease;
}
.drop.over { border-color: var(--brand); }
.drop svg { width: 40px; height: 40px; color: var(--muted); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop .file { font-weight: 600; overflow-wrap: anywhere; }
.drop .file:empty { display: none; }

/* States */
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 4px solid var(--line); border-top-color: var(--brand);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.done-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; }
.done-icon svg { width: 30px; height: 30px; }
.error { color: var(--danger); margin: 0; }
.error:empty { display: none; }
section { display: none; width: 100%; flex-direction: column; align-items: center; gap: 16px; }
body[data-state="idle"] #s-start,
body[data-state="recording"] #s-start,
body[data-state="transcribing"] #s-busy,
body[data-state="sending"] #s-busy,
body[data-state="review"] #s-review,
body[data-state="done"] #s-done { display: flex; }

/* Overview */
.tiles { display: flex; flex-direction: column; gap: 12px; }
.tile {
  display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; color: var(--text); text-decoration: none;
}
.tile strong { display: block; font: 700 19px/1.3 var(--font-head); }
.tile span { color: var(--muted); font-size: 15px; }
.tile:hover { border-color: var(--brand); }

footer { color: var(--muted); font-size: 14px; text-align: center; }
.wg-footer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wg-footer a { color: var(--text); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; text-decoration: none; border-radius: 8px; }
.wg-footer a:hover, .wg-footer a:focus-visible { text-decoration: underline; }
.wg-footer svg { display: block; }