/*
  Sophie's admin page: the one stylesheet.

  Served from /static/style.css; no fonts, icons or scripts from elsewhere, so
  the page works offline. Icons are inline SVG symbols in base.html.
  Mobile first: a top bar under 60rem, a sidebar from 60rem up.
  The colours are tokens on :root, redefined for dark mode at the end: when
  the Mac is dark (System) and when Dark is chosen on the page, which sets
  data-theme on <html>; Light chosen on the page keeps the light tokens.
  Note for the test tab: the run button's inactive state is styled with
  :not(:enabled), so the stylesheet never names that state in words.
  The call page (call.html with call.js) shows and hides its parts with the
  hidden attribute, which the rule under "base" makes win over display.
*/

/* --- tokens ---------------------------------------------------------------- */

:root {
  color-scheme: light;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #f5f2ec;            /* linen */
  --surface: #ffffff;
  --surface-sunk: #f9f7f3;
  --line: #e5dfd5;
  --line-strong: #8f877b;   /* input borders, 3.5:1 on white */
  --text: #1f1c18;
  --muted: #5d564c;
  --placeholder: #6f675c;

  --accent: #1d5b5f;        /* deep petrol */
  --accent-hover: #164a4d;
  --accent-soft: #e4efed;
  --accent-ink: #164a4d;
  --on-accent: #ffffff;
  --ring: rgba(29, 91, 95, 0.22);

  --ok-bg: #e9f4ec;     --ok-line: #b7d8c0;      --ok-ink: #1d5e33;      --ok-icon: #2e7d46;
  --bad-bg: #fbecea;    --bad-line: #efc0bb;     --bad-ink: #8f1d1d;     --bad-icon: #b42318;
  --warn-bg: #fdf4de;   --warn-line: #ecd39a;    --warn-ink: #6b4a00;    --warn-icon: #a15c00;
  --plain-bg: #efebe5;  --plain-line: #dbd4c9;   --plain-ink: #3d3830;   --plain-icon: #6b6358;

  --log-bg: #1c1e1f;
  --log-text: #e6e2da;
  --log-line: #2e3133;

  --shadow: 0 1px 2px rgba(31, 28, 24, 0.05), 0 2px 8px rgba(31, 28, 24, 0.04);
  --shadow-bar: 0 6px 24px rgba(31, 28, 24, 0.10);

  /* Details that differ in dark mode, as tokens so the dark block covers them. */
  --mark-bg: var(--accent);
  --mark-ink: var(--on-accent);
  --tint-code: rgba(255, 255, 255, 0.6);   /* code inside a banner or note */
  --tint-pre: rgba(255, 255, 255, 0.55);   /* a block of text inside a banner */
  --spinner-track: var(--line);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d564c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --radius: 12px;
  --radius-sm: 8px;
  --gutter: 1rem;
  --measure: 46rem;         /* the content column */
}

/* --- base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft); color: var(--accent-ink); }

h1, h2, h3 { line-height: 1.25; margin: 0; }

h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.85rem;
  letter-spacing: -0.01em;
}

h2 { font-size: 1.08rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }

p { margin: 0; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.link-out .icon { width: 1rem; height: 1rem; margin-left: 0.3rem; vertical-align: -0.15em; }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.08em 0.38em;
  border-radius: 5px;
  background: var(--plain-bg);
  color: var(--plain-ink);
  overflow-wrap: anywhere;
}

pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* hidden always hides, also on elements this sheet gives a display. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 1rem; color: var(--on-accent); }

/* --- the shell: top bar, then sidebar on wide screens ------------------------ */

.sidebar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0.85rem var(--gutter) 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.brand:hover { color: var(--text); }

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 11px;
  background: var(--mark-bg);
  color: var(--mark-ink);
  flex: none;
}
.brand-mark .icon { width: 1.45rem; height: 1.45rem; stroke-width: 1.7; }

.brand-text { display: flex; flex-direction: column; min-width: 0; }

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.005em;
}

.brand-tagline {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.3;
}

.nav { margin-top: 0.75rem; }

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 550;
  font-size: 0.94rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface);
}
.nav a:hover { color: var(--text); background: var(--surface-sunk); }

.nav a[aria-current="page"] {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: transparent;
  font-weight: 650;
}
.nav a[aria-current="page"] .icon { color: var(--accent); }

.sidebar-note { display: none; }

@media (max-width: 35.99rem) {
  .nav a { font-size: 0.875rem; padding: 0.45rem 0.6rem; gap: 0.45rem; }
}

.main { padding: 1.5rem var(--gutter) 0; }

.page { max-width: var(--measure); margin: 0 auto; }

@media (min-width: 36rem) {
  :root { --gutter: 1.5rem; }
  .nav ul { display: flex; flex-wrap: wrap; }
  .nav a { border-color: transparent; background: transparent; }
}

@media (min-width: 60rem) {
  .shell {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    min-height: 100vh;
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding: 1.6rem 1rem 1.25rem;
  }

  .brand { padding: 0 0.5rem; }

  .nav { margin-top: 2rem; }
  .nav ul { display: flex; flex-direction: column; gap: 0.2rem; }
  .nav a { padding: 0.55rem 0.75rem; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }

  .sidebar-note {
    display: block;
    margin-top: auto;
    padding: 0.85rem 0.75rem 0;
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.45;
  }

  .main { padding: 2.75rem 3rem 0; }
}

/* --- who is signed in: under the tabs, at the sidebar's foot on wide screens --- */

.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}
.account-name { min-width: 0; overflow-wrap: anywhere; }
.account-name strong { color: var(--text); font-weight: 600; }
/* Accounts (owners) and My password, beside the name. */
.account-links { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.account-links a { color: var(--muted); }
.account-links a:hover, .account-links a[aria-current="page"] { color: var(--accent); }

/* Light / Dark / System: a row of its own above the name. */
.theme-switch {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}
.segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.segmented button {
  min-height: 2rem;
  padding: 0.25rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.segmented button:hover { background: var(--surface); color: var(--text); }
.segmented button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
}

@media (min-width: 60rem) {
  .account { margin-top: 0.85rem; padding: 0 0.75rem; border-top: 0; }
}

/* --- page header -------------------------------------------------------------- */

.page-head { margin-bottom: 1.5rem; }

.source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.source .icon { width: 1rem; height: 1rem; }
.source code { background: transparent; padding: 0; color: inherit; }

.lead {
  margin-top: 0.45rem;
  max-width: 40rem;
  color: var(--muted);
  font-size: 1.02rem;
}

/* --- cards ---------------------------------------------------------------------- */

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

@media (min-width: 36rem) {
  .card { padding: 1.4rem 1.5rem 1.5rem; margin-bottom: 1.25rem; }
}

.card-head { margin-bottom: 1rem; }
.card-head .hint { margin-top: 0.25rem; }

.card-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.card > h2 { margin-bottom: 0.75rem; }

.card > p + p,
.card > p + .banner,
.card > .banner + p { margin-top: 0.75rem; }
.card > textarea + .hint { margin-top: 0.4rem; }
.card > .field + .banner,
.card > .block-problems + .banner,
.card > .check + .banner { margin-top: 1.25rem; }

.field-after { margin-top: 0.75rem; }

/* --- form fields ------------------------------------------------------------------ */

label {
  display: block;
  font-weight: 600;
  font-size: 0.94rem;
  margin-bottom: 0.35rem;
}

.optional { font-weight: 400; color: var(--muted); }

.label-title {
  font-size: 1.08rem;
  font-weight: 650;
  margin-bottom: 0.75rem;
}

.hint {
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 38rem;
}

.field + .field { margin-top: 1.1rem; }
.field .hint { margin-top: 0.35rem; }

input, textarea, select, button { font: inherit; color: inherit; }

input:not([type="checkbox"]), textarea, select {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

textarea {
  resize: vertical;
  min-height: 6rem;
  field-sizing: content;  /* grows with the text where the browser supports it */
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1rem;
  text-overflow: ellipsis;
}

::placeholder { color: var(--placeholder); opacity: 1; }

input:not([type="checkbox"]):hover, textarea:hover, select:hover { border-color: var(--muted); }

input:not([type="checkbox"]):focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--ring);
}

/* A field with a problem: red edge, and the message hangs from the input. */
[aria-invalid="true"] { border-color: var(--bad-icon) !important; }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--bad-icon), 0 0 0 4px var(--bad-line) !important; }

.has-problem > .control > input[aria-invalid="true"],
.has-problem > .control > select[aria-invalid="true"],
.has-problem > .control > textarea[aria-invalid="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.field-problems {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bad-icon);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--bad-bg);
  color: var(--bad-ink);
  font-size: 0.9rem;
}
.field-problems p { display: flex; gap: 0.45rem; align-items: flex-start; }
.field-problems p + p { margin-top: 0.3rem; }
.field-problems .icon { width: 1.05rem; height: 1.05rem; margin-top: 0.15em; color: var(--bad-icon); }

/* Problems that belong to a block (the rooms table), not one input. */
.block-problems {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--bad-icon);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bad-bg);
  color: var(--bad-ink);
  font-size: 0.9rem;
}
.block-problems p { display: flex; gap: 0.45rem; align-items: flex-start; }
.block-problems p + p { margin-top: 0.3rem; }
.block-problems .icon { width: 1.05rem; height: 1.05rem; margin-top: 0.15em; color: var(--bad-icon); }

/* A warning that belongs to one field (an unknown placeholder, the AI notice). */
.field-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--warn-icon);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 0.9rem;
}
.field-note .icon { width: 1.05rem; height: 1.05rem; margin-top: 0.15em; color: var(--warn-icon); }
.field-note code { background: var(--tint-code); color: inherit; }

/* Labels beside inputs, on the facts tab, where labels are short. */
@media (min-width: 40rem) {
  .fields-aligned .field {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
  }
  .fields-aligned .field > label { padding-top: 0.62rem; margin-bottom: 0; }
  .fields-aligned .optional { display: block; font-size: 0.8rem; line-height: 1.3; }
}

/* A dropdown with an "Other id" box under it (voice tab). */
.other {
  margin-top: 0.4rem;
  min-height: 2.4rem !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  font-size: 0.9rem !important;
  border-style: dashed !important;
  background: var(--surface-sunk) !important;
}
.other:focus { border-style: solid !important; background: var(--surface) !important; }

.has-problem .field-problems + .other { margin-top: 0.5rem; }

/* The checkbox as an option row. */
.check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  font-weight: 400;
  cursor: pointer;
}
.check:hover { border-color: var(--line-strong); }
.check input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.15rem 0 0;
  flex: none;
  accent-color: var(--accent);
}
.check strong { display: block; font-weight: 600; }
.check .hint { display: block; margin-top: 0.15rem; }

/* --- the rooms grid ------------------------------------------------------------------ */

.grid-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.grid-wrap.has-problem { border-color: var(--bad-icon); }

.grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.grid .col-type { width: 48%; }
.grid .col-guests { width: 20%; }
.grid .col-price { width: 32%; }

.grid th {
  padding: 0.55rem 0.6rem;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  vertical-align: bottom;
}

.grid td {
  padding: 0.4rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.grid tbody tr:last-child td { border-bottom: 0; }
.grid td + td, .grid th + th { border-left: 1px solid var(--line); }

.grid input:not([type="checkbox"]) {
  min-height: 2.5rem;
  padding: 0.45rem 0.55rem;
  border-color: transparent;
  background: transparent;
}
.grid input:not([type="checkbox"]):hover { border-color: var(--line-strong); background: var(--surface); }
.grid input:not([type="checkbox"]):focus { border-color: var(--accent); background: var(--surface); }

.grid tr.new-row td { background: var(--surface-sunk); }
.grid tr.new-row input:not([type="checkbox"]) { border: 1px dashed var(--line-strong); }

.money { position: relative; display: block; }
.money > span {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.grid .money input:not([type="checkbox"]) { padding-left: 1.5rem; }

@media (min-width: 36rem) {
  .grid th { font-size: 0.8rem; padding: 0.6rem 0.75rem; }
  .grid td { padding: 0.35rem 0.45rem; }
}

/* --- buttons and the action bar -------------------------------------------------------- */

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
button:hover, .button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
  text-decoration: none;
}
button:focus-visible, .button:focus-visible { outline-offset: 3px; border-radius: var(--radius-sm); }
button .icon, .button .icon { width: 1.1rem; height: 1.1rem; }

.button-secondary {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--line-strong);
}
.button-secondary:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }

/* A button that should not draw the eye: Sign out. */
.button-quiet {
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  background: transparent;
  color: var(--muted);
  border-color: var(--line-strong);
  font-size: 0.85rem;
}
.button-quiet:hover { background: var(--surface-sunk); color: var(--text); border-color: var(--muted); }

/* The run button while a run goes. */
button:not(:enabled) {
  background: var(--plain-bg);
  border-color: var(--plain-line);
  color: var(--muted);
  cursor: progress;
}

.actions {
  position: sticky;
  bottom: 0.6rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  margin-bottom: max(0rem, env(safe-area-inset-bottom));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-bar), var(--shadow);
}
.actions-note { font-size: 0.85rem; color: var(--muted); flex: 1 1 14rem; }
.actions button { flex: 1 1 100%; }

@media (min-width: 36rem) {
  .actions { bottom: 1rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; }
  .actions button { flex: 0 0 auto; }
}

.page-end { height: 2rem; }

/* A form's button, under its fields (the account pages). */
.form-end { margin-top: 1.25rem; }

/* For what cannot be undone: removing an account, hanging up. */
.button-danger, .call-hangup {
  background: var(--bad-bg);
  border-color: var(--bad-icon);
  color: var(--bad-ink);
}
.button-danger:hover, .call-hangup:hover {
  background: var(--bad-line);
  border-color: var(--bad-icon);
  color: var(--bad-ink);
}

/* The accounts on /accounts: name, then role. */
.account-list { list-style: none; margin: 0; padding: 0; }
.account-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.account-list li:last-child { border-bottom: 0; }
.account-list-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }

/* --- banners ------------------------------------------------------------------------------ */

.banner {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1.5;
}
.banner > .icon { margin-top: 0.08rem; }
.banner-body { min-width: 0; flex: 1; }
.banner-title { font-weight: 650; }
.banner-title + p, .banner-body p + p { margin-top: 0.2rem; }
.banner pre {
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  background: var(--tint-pre);
  color: var(--text);
  max-height: 14rem;
  overflow: auto;
}
.banner code { background: var(--tint-code); color: inherit; }

.banner-saved   { background: var(--ok-bg);    border-color: var(--ok-line);    color: var(--ok-ink); }
.banner-problem { background: var(--bad-bg);   border-color: var(--bad-line);   color: var(--bad-ink); }
.banner-notice  { background: var(--warn-bg);  border-color: var(--warn-line);  color: var(--warn-ink); }
.banner-changed { background: var(--plain-bg); border-color: var(--plain-line); color: var(--plain-ink); }
.banner-tip     { background: var(--accent-soft); border-color: transparent;    color: var(--accent-ink); }

.banner-saved   > .icon { color: var(--ok-icon); }
.banner-problem > .icon { color: var(--bad-icon); }
.banner-notice  > .icon { color: var(--warn-icon); }
.banner-changed > .icon { color: var(--plain-icon); }
.banner-tip     > .icon { color: var(--accent); }

.card .banner { margin-bottom: 0; }
.card .banner + .banner { margin-top: 0.6rem; }

/* --- character tab --------------------------------------------------------------------- */

.tokens code { white-space: nowrap; }

.preview {
  padding: 0;
  overflow: hidden;
}

details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker { display: none; }

.disclosure {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}
.disclosure::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  margin: 0 0.15rem;
}
details[open] > .disclosure::before { transform: rotate(45deg) translate(-2px, -1px); }

.preview > summary {
  padding: 1rem 1.25rem;
  color: var(--text);
}
.preview > summary:hover { background: var(--surface-sunk); }
.preview > summary .tag { margin-left: auto; }

.tag {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--plain-bg);
  color: var(--plain-ink);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.preview pre {
  margin: 0;
  padding: 1.1rem 1.25rem 1.3rem;
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
  max-height: 34rem;
  overflow: auto;
  font-size: 0.82rem;
}

/* --- try and test tab ------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
  border: 1px solid;
}
.pill .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.pill-on  { background: var(--ok-bg);    border-color: var(--ok-line);    color: var(--ok-ink); }
.pill-on .dot { background: var(--ok-icon); box-shadow: 0 0 0 3px var(--ok-line); }
.pill-off { background: var(--plain-bg); border-color: var(--plain-line); color: var(--plain-ink); }
.pill-off .dot { background: transparent; border: 2px solid var(--plain-icon); }
.pill-busy { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.pill-busy .dot { background: var(--warn-icon); animation: pulse 1.2s ease-in-out infinite; }
.pill-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }
.pill-bad .dot { background: var(--bad-icon); }

.try-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

.run-form { margin-top: 1rem; }

/* Demo links: the form, then one entry per link with its URL and QR code. */
.demo-form { margin-top: 1rem; }
.demo-form > button { margin-top: 1.1rem; }

.demo-links {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.demo-link {
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.demo-link.is-new { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.demo-link-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.demo-link-head h3 { overflow-wrap: anywhere; }
.demo-link > .hint { margin-top: 0.2rem; }
.tag-new { background: var(--accent-soft); color: var(--accent-ink); }
input.link-url {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  user-select: all;
  -webkit-user-select: all;
}
.demo-link-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 0.75rem;
}
.qr-box > summary { padding: 0.45rem 0; color: var(--accent); font-size: 0.92rem; }
/* The QR code keeps its white square in dark mode too, so a phone reads it. */
.qr-frame { margin-top: 0.4rem; line-height: 0; }
.qr { display: block; border-radius: 4px; }  /* drawn at its own size: it has no viewBox */
.demo-none { margin-top: 1rem; }

.log-box {
  margin-top: 1.25rem;
  border: 1px solid var(--log-line);
  border-radius: var(--radius-sm);
  background: var(--log-bg);
  color: var(--log-text);
  overflow: hidden;
}
.log-box > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: var(--log-text);
}
.log-box > summary .pill { margin-left: auto; }
.log-box[open] > summary { border-bottom: 1px solid var(--log-line); }

/* column-reverse keeps the newest lines in view after each refresh. */
.log-scroll {
  display: flex;
  flex-direction: column-reverse;
  max-height: 22rem;
  overflow: auto;
}
.log-scroll .log { padding: 0.8rem 0.9rem; color: var(--log-text); font-size: 0.8rem; }

.running-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.spinner {
  width: 1rem;
  height: 1rem;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .spinner, .pill-busy .dot { animation: none; }
  * { transition: none !important; }
}

.results { margin-top: 1.75rem; }
.results > h2 { margin-bottom: 0.75rem; }

.tally {
  display: flex;
  gap: 0.3rem;
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}
.tally li { flex: 1; height: 0.4rem; border-radius: 999px; }
.tally .ok { background: var(--ok-icon); }
.tally .bad { background: var(--bad-icon); }

.scenario { padding: 0; overflow: hidden; }

.scenario-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 1rem 1.1rem 0;
}
.scenario-head h3 { flex: 1 1 14rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid;
}
.badge .icon { width: 0.95rem; height: 0.95rem; stroke-width: 2.4; }
.badge-pass { background: var(--ok-bg);  border-color: var(--ok-line);  color: var(--ok-ink); }
.badge-fail { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }

.judge {
  margin: 0.85rem 1.1rem 0;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-sunk);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
}
.scenario.is-fail .judge { border-left-color: var(--bad-icon); }
.scenario.is-pass .judge { border-left-color: var(--ok-icon); }
.judge-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.transcript { margin-top: 0.85rem; border-top: 1px solid var(--line); }
.transcript > summary {
  padding: 0.75rem 1.1rem;
  font-size: 0.92rem;
  color: var(--accent);
}
.transcript > summary:hover { background: var(--surface-sunk); }
.transcript > summary .count { font-weight: 400; color: var(--muted); }

.chat {
  list-style: none;
  margin: 0;
  padding: 0.25rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.msg {
  max-width: min(34rem, 88%);
  padding: 0.55rem 0.8rem 0.6rem;
  border-radius: 14px;
  font-size: 0.94rem;
  line-height: 1.45;
}
.msg .speaker {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.1rem;
}
.msg p { overflow-wrap: anywhere; }

.from-caller {
  align-self: flex-start;
  background: var(--plain-bg);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.from-caller .speaker { color: var(--muted); }

.from-agent {
  align-self: flex-end;
  background: var(--accent-soft);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
.from-agent .speaker { color: var(--accent-ink); }

.empty { padding: 0 1.1rem 1.1rem; font-size: 0.9rem; color: var(--muted); }

/* --- one narrow card in the middle: sign in, first account, try again ---------------------- */

.centred {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 2rem var(--gutter);
}
.centred-column { width: 100%; max-width: 25rem; margin: 0 auto; }
.centred-brand { margin-bottom: 1.25rem; padding: 0 0.25rem; }
.centred-card > * + * { margin-top: 1rem; }
.centred-card > h1 { font-size: 1.6rem; }
.centred-card > .lead { margin-top: 0.4rem; font-size: 0.97rem; }
.centred-card > .banner { margin-bottom: 0; }
.centred-card form > button, .centred-card > .button { width: 100%; }
.centred-card form > button { margin-top: 1.5rem; }
.centred-note { margin-top: 1rem; padding: 0 0.25rem; font-size: 0.85rem; color: var(--muted); }

/* --- the call page: Call, Hang up, the status and the transcript ------------------------- */

.centred-column.call-column { max-width: 34rem; }
.call-disclosure { margin-top: 1.25rem; }
.call-bar { display: flex; justify-content: center; margin-top: 1.25rem; }
.call-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.call-actions button { width: 100%; min-height: 3.25rem; font-size: 1.05rem; }
.call-actions .icon { width: 1.3rem; height: 1.3rem; }
.call-retry { margin-top: 0.75rem; }

.call-chat {
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
/* Words still being heard or said; they settle when the segment is final. */
.msg.is-interim p { color: var(--muted); }

/* --- dark mode ---------------------------------------------------------------------------

   The same dark tokens twice: for System while the Mac is dark (unless Light
   was chosen on the page), and for Dark chosen on the page. Keep the two
   blocks identical; tests/test_admin_app.py checks that they are. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #131210;
    --surface: #1c1b18;
    --surface-sunk: #171614;
    --line: #2f2d29;
    --line-strong: #79726a;
    --text: #ece8e1;
    --muted: #aaa398;
    --placeholder: #8f887d;

    --accent: #82c7c0;
    --accent-hover: #a0d8d2;
    --accent-soft: #1d3534;
    --accent-ink: #bfe6e1;
    --on-accent: #0c2220;
    --ring: rgba(130, 199, 192, 0.25);

    --ok-bg: #15261b;     --ok-line: #2c5539;     --ok-ink: #a6dcb4;     --ok-icon: #6cc287;
    --bad-bg: #2c1716;    --bad-line: #6a2e2a;    --bad-ink: #f4b0aa;    --bad-icon: #e5736a;
    --warn-bg: #2a2211;   --warn-line: #66511f;   --warn-ink: #f1d08a;   --warn-icon: #e4b04a;
    --plain-bg: #24221e;  --plain-line: #3a3731;  --plain-ink: #d8d2c8;  --plain-icon: #a8a196;

    --log-bg: #0e0f0f;
    --log-text: #e3dfd7;
    --log-line: #2a2c2d;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-bar: 0 6px 24px rgba(0, 0, 0, 0.45);

    --mark-bg: var(--accent-soft);
    --mark-ink: var(--accent);
    --tint-code: rgba(0, 0, 0, 0.3);
    --tint-pre: rgba(0, 0, 0, 0.3);
    --spinner-track: var(--line-strong);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa398' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #131210;
  --surface: #1c1b18;
  --surface-sunk: #171614;
  --line: #2f2d29;
  --line-strong: #79726a;
  --text: #ece8e1;
  --muted: #aaa398;
  --placeholder: #8f887d;

  --accent: #82c7c0;
  --accent-hover: #a0d8d2;
  --accent-soft: #1d3534;
  --accent-ink: #bfe6e1;
  --on-accent: #0c2220;
  --ring: rgba(130, 199, 192, 0.25);

  --ok-bg: #15261b;     --ok-line: #2c5539;     --ok-ink: #a6dcb4;     --ok-icon: #6cc287;
  --bad-bg: #2c1716;    --bad-line: #6a2e2a;    --bad-ink: #f4b0aa;    --bad-icon: #e5736a;
  --warn-bg: #2a2211;   --warn-line: #66511f;   --warn-ink: #f1d08a;   --warn-icon: #e4b04a;
  --plain-bg: #24221e;  --plain-line: #3a3731;  --plain-ink: #d8d2c8;  --plain-icon: #a8a196;

  --log-bg: #0e0f0f;
  --log-text: #e3dfd7;
  --log-line: #2a2c2d;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-bar: 0 6px 24px rgba(0, 0, 0, 0.45);

  --mark-bg: var(--accent-soft);
  --mark-ink: var(--accent);
  --tint-code: rgba(0, 0, 0, 0.3);
  --tint-pre: rgba(0, 0, 0, 0.3);
  --spinner-track: var(--line-strong);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa398' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}