/* CallQA app. Same tokens as the landing (callqa.dev). No framework, CSP friendly. */
:root {
  --bg: #0a0e0d; --bg-alt: #0c1210; --surface: #121e1b; --surface-hover: #1a2e29;
  --border: #1d3d36; --text: #e2efeb; --muted: #85a29a; --dim: #587069;
  --primary: #1d7c70; --primary-hover: #2aa396; --accent: #5eead4; --secondary: #60a5fa;
  --success: #2aa396; --warning: #fbbf24; --danger: #f87171; --danger-strong: #dc2626;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
  --radius: 8px; --radius-lg: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --wave-caller: #2aa396; --wave-target: #60a5fa; --wave-played: #5eead4;
  color-scheme: dark;
}
/* light theme: same teal identity, opt-in with the toggle (dark is the default) */
[data-theme="light"] {
  --bg: #f5f8f7; --bg-alt: #edf3f1; --surface: #ffffff; --surface-hover: #e6f0ed;
  --border: #d3e1dd; --text: #0f1f1b; --muted: #4a635c; --dim: #72877f;
  --primary: #1d7c70; --primary-hover: #17665c; --accent: #0f766e; --secondary: #2563eb;
  --success: #17806f; --warning: #b45309; --danger: #dc2626; --danger-strong: #dc2626;
  --shadow: 0 10px 30px rgba(15,31,27,.14);
  --wave-caller: #1d7c70; --wave-target: #3b82f6; --wave-played: #0f766e;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.55;
       font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--primary-hover); text-decoration: none; }
a:hover { color: var(--accent); }
code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
h1 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; color: var(--muted); }
p { margin: 0 0 10px; }

/* layout: sidebar (main sections, docs) + top bar (theme, Organization / Developer menus) */
.shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.shell-noorg { grid-template-columns: minmax(0, 1fr); }
.shell-body { min-width: 0; display: flex; flex-direction: column; }
.sidebar { background: var(--bg-alt); border-right: 1px solid var(--border); padding: 14px 12px 12px;
           display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0;
           height: 100vh; overflow-y: auto; }
.logo { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700;
        font-size: 15px; padding: 4px 8px 10px; }
.logo svg { flex: none; }
/* the current organization: a plain label, not a control (switching is in the Organization menu) */
.org-chip { display: flex; flex-direction: column; line-height: 1.25; font-size: 13px;
            font-weight: 600; color: var(--text); padding: 2px 10px; margin: 0 0 12px; cursor: default; }
.org-chip .org-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-chip .dim { font-size: 11px; font-weight: 500; }
.mainnav, .subnav, .docnav { display: flex; flex-direction: column; gap: 2px; }
.mainnav a, .docnav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
                        border-radius: var(--radius); color: var(--muted); font-weight: 500; }
.mainnav a:hover, .docnav a:hover { background: var(--surface); color: var(--text); }
.mainnav a.active { background: var(--surface-hover); color: var(--text); }
.mainnav a.active .nav-ico { color: var(--accent); }
.nav-ico { flex: none; }
.subnav { margin: 2px 0 8px 0; padding-left: 26px; }
.subnav a { padding: 5px 10px 5px 12px; border-left: 2px solid var(--border); color: var(--muted);
            font-size: 13px; }
.subnav a:hover { color: var(--text); border-left-color: var(--dim); }
.subnav a.active { color: var(--text); border-left-color: var(--primary-hover); }
.sidebar .spacer { flex: 1; }
.docnav { padding-top: 10px; border-top: 1px solid var(--border); }
.docnav a { font-size: 12.5px; padding: 6px 10px; }
.docnav .goto { margin-left: auto; }
.goto { color: var(--dim); font-size: 12px; font-weight: 400; }
a:hover .goto { color: inherit; }
.topbar { position: sticky; top: 0; z-index: 30; background: var(--bg-alt);
          border-bottom: 1px solid var(--border); }
.topbar-inner { display: flex; align-items: center; gap: 12px; padding: 8px 24px; min-height: 52px; }
.topbar .logo { padding: 0; }
.topbar-title { font-weight: 600; color: var(--muted); }
.topbar .nav-toggle { display: none; } /* only where the sidebar is hidden (below 900px) */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px;
            height: 34px; border-radius: var(--radius); border: 1px solid var(--border);
            background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--surface); color: var(--text); }
[data-theme="dark"] .i-sun, [data-theme="light"] .i-moon { display: none; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; padding: 7px 12px; border-radius: var(--radius);
                  color: var(--muted); font-weight: 500; display: inline-flex; align-items: center;
                  gap: 6px; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
                         border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
                         margin: -3px 0 0 2px; }
.menu-user > summary::after { display: none; }
.menu > summary:hover, .menu[open] > summary { background: var(--surface); color: var(--text); }
.menu > summary.active { color: var(--text); background: var(--surface-hover); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; z-index: 40;
              background: var(--surface); border: 1px solid var(--border);
              border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 6px; }
.menu-panel a, .menu-panel button { display: block; width: 100%; text-align: left; padding: 7px 10px;
                                    border-radius: 6px; color: var(--text); background: none; border: 0;
                                    font: 500 13px var(--sans); cursor: pointer; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-hover); color: var(--text); }
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-head { padding: 6px 10px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff;
          display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
          font-size: 12px; }
.menu-user > summary { padding: 4px; }
.main { padding: 28px 36px 60px; max-width: 1240px; width: 100%; margin: 0 auto; flex: 1; }
.app-foot { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 36px 24px; }
.app-foot .legal-links { padding: 8px 0; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50; height: 100vh;
             transform: translateX(-100%); transition: transform .18s; box-shadow: var(--shadow); }
  body[data-nav-open] .sidebar { transform: none; }
  .topbar .nav-toggle { display: inline-flex; }
  .topbar-inner { padding: 8px 16px; gap: 8px; }
  .main { padding: 20px 16px; }
  .app-foot { padding: 0 16px 20px; }
}
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
             margin-bottom: 22px; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.page-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-head .actions .sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
/* "go to" links of a page head: related pages, one step aside (Tags from Scenarios...) */
.goto-links { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.goto-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; font-size: 13px;
             font-weight: 500; color: var(--muted); border-radius: var(--radius); white-space: nowrap; }
.goto-link:hover { color: var(--text); background: var(--surface); }
.goto-link .goto { color: var(--dim); }
.goto-link:hover .goto { color: var(--accent); }
.crumbs { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.crumbs a { color: var(--muted); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .card > table.table { display: block; overflow-x: auto; }
}

/* surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
        padding: 18px 20px; }
.card + .card { margin-top: 16px; }
.stat .label { color: var(--muted); font-size: 12px; }
.stat .value { font-size: 26px; font-weight: 700; margin-top: 4px; }
.stat .hint { color: var(--dim); font-size: 12px; }
.placeholder { border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 28px;
               color: var(--dim); text-align: center; }
.empty { color: var(--muted); padding: 28px; text-align: center; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border);
       background: var(--surface); color: var(--text); border-radius: var(--radius);
       padding: 7px 14px; font: 500 13px var(--sans); cursor: pointer; line-height: 1.3; }
.btn:hover { background: var(--surface-hover); color: var(--text); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-danger { background: var(--danger-strong); border-color: var(--danger-strong); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-plus { width: 36px; height: 36px; justify-content: center; font-size: 20px; padding: 0;
            border-radius: 50%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; }

/* tables */
table.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
            color: var(--dim); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table tr.link:hover td { background: var(--surface-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* badges */
.badge { display: inline-block; font: 600 11px var(--mono); padding: 2px 7px; border-radius: 5px;
         border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.badge-pass, .badge-verified, .badge-completed, .badge-active, .badge-success { color: var(--success); border-color: rgba(42,163,150,.4); }
.badge-fail, .badge-error, .badge-rejected, .badge-revoked, .badge-failed, .badge-locked, .badge-suspended { color: var(--danger); border-color: rgba(248,113,113,.4); }
.badge-warn, .badge-pending, .badge-past_due, .badge-blocked, .badge-queued, .badge-unverified, .badge-expired { color: var(--warning); border-color: rgba(251,191,36,.4); }
.badge-running, .badge-in_progress, .badge-dialing, .badge-ringing, .badge-dispatching, .badge-judging { color: var(--secondary); border-color: rgba(96,165,250,.4); }
.badge-auto { color: var(--secondary); }
.badge-manual { color: var(--accent); }

/* forms */
.form { display: grid; gap: 14px; max-width: 640px; }
.field label { display: block; font-weight: 500; margin-bottom: 5px; }
.field .help { color: var(--dim); font-size: 12px; margin-top: 4px; }
.field .errors { color: var(--danger); font-size: 12px; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url],
input[type=tel], input[type=search], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 10px; font: 14px var(--sans); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
textarea.code { font-family: var(--mono); font-size: 13px; min-height: 420px; line-height: 1.5;
                tab-size: 2; }
.checkbox { display: flex; gap: 8px; align-items: flex-start; }
.checkbox input { margin-top: 3px; }
.form-actions { display: flex; gap: 8px; align-items: center; }

/* messages */
.messages { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.messages li { padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border);
               background: var(--surface); }
.messages .error { border-color: rgba(248,113,113,.5); color: var(--danger); }
.messages .success { border-color: rgba(42,163,150,.5); color: var(--success); }
.messages .warning { border-color: rgba(251,191,36,.5); color: var(--warning); }
/* toasts (web/_toasts.html + app.js): bottom of the screen, newest last, dismissed after a
   few seconds (errors stay until closed). Without JS they simply stay. */
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80;
          display: flex; flex-direction: column; align-items: center; gap: 8px;
          width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 100%;
         padding: 11px 12px 11px 14px; border-radius: var(--radius-lg);
         background: var(--surface); color: var(--text); border: 1px solid var(--border);
         border-left: 4px solid var(--primary-hover); box-shadow: var(--shadow);
         font-size: 13.5px; line-height: 1.45; animation: toast-in .18s ease-out; }
.toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-ico { flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
             display: inline-flex; align-items: center; justify-content: center;
             font-size: 11px; font-weight: 700; color: #fff; background: var(--primary-hover); }
.toast-ico::before { content: "\2713"; }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-ico { background: var(--danger); }
.toast-error .toast-ico::before { content: "!"; }
.toast-warning { border-left-color: var(--warning); }
.toast-warning .toast-ico { background: var(--warning); color: #1a1405; }
.toast-warning .toast-ico::before { content: "!"; }
.toast-info { border-left-color: var(--secondary); }
.toast-info .toast-ico { background: var(--secondary); }
.toast-info .toast-ico::before { content: "i"; }
.toast-close { flex: none; background: none; border: 0; color: var(--dim); cursor: pointer;
               font-size: 18px; line-height: 1; padding: 0 2px; }
.toast-close:hover { color: var(--text); }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.leaving { transition: none; } }
/* an in-place action is running: the form dims, no double submit */
form.htmx-request { opacity: .6; pointer-events: none; }
.alert { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border);
         background: var(--bg-alt); margin-bottom: 14px; }
.alert-danger { border-color: rgba(248,113,113,.5); }
.alert-warning { border-color: rgba(251,191,36,.5); }
.alert-ok { border-color: rgba(42,163,150,.5); }

/* scenario editor: the assistant on top, then the human view (cards) and the YAML side by
   side, one form. The textarea grows in height only and never leaves its column. */
.editor-assist { margin-bottom: 16px; }
.editor-assist .slot:empty { display: none; }
.editor-assist > .card + .slot > .card { margin-top: 16px; }
.editor-dual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
               align-items: start; }
.editor-dual .card + .card { margin-top: 16px; }
.editor-human, .editor-yaml { min-width: 0; }
.view-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px 4px; }
.view-head h2 { margin: 0; }
.editor-main { min-width: 0; }
.editor-dual textarea.code { display: block; max-width: 100%; resize: vertical; min-height: 560px; }
.editor-foot { grid-column: 1 / -1; }
.cheat { margin: 0; white-space: pre-wrap; word-break: break-word; }
.human-view .field + .field { margin-top: 12px; }
.human-view textarea { resize: vertical; }
.human-row { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-top: 8px; }
.human-row .field { flex: 1; min-width: 140px; margin: 0; }
.human-row label.inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.human-rows { display: grid; gap: 6px; }
.human-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px;
              border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.human-item input[type=text] { flex: 1; min-width: 120px; }
.human-item .select-inline { padding: 6px 8px; }
.human-item .sev { margin-left: auto; }
.human-item .num-short { width: 90px; }
.human-item .checkbox.inline { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px;
                               color: var(--muted); }
.human-item.variant input[name=v_goal] { flex: 1.4; }
.human-item.variant .btn-remove { margin-left: auto; }
.human-label { color: var(--muted); }
.btn-remove { color: var(--dim); font-size: 16px; padding: 0 8px; line-height: 1.4; }
.btn-remove:hover { color: var(--danger); }
@media (max-width: 1100px) {
  .editor-dual { grid-template-columns: 1fr; }
}

/* validation panel */
.validation { font-size: 13px; }
.validation .ok { color: var(--success); }
.validation ul { margin: 6px 0 0; padding-left: 18px; color: var(--danger); }

/* call timeline & transcript */
.timeline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.timeline li { display: grid; grid-template-columns: 70px 120px 1fr; gap: 10px; padding: 6px 0;
               border-bottom: 1px dashed var(--border); }
.timeline .t { color: var(--dim); font-family: var(--mono); font-size: 12px; }
.timeline .type { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.timeline .data { color: var(--muted); font-family: var(--mono); font-size: 12px; word-break: break-word; }
.transcript { display: grid; gap: 10px; }
.bubble { max-width: 80%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); }
.bubble .who { font-size: 11px; color: var(--dim); margin-bottom: 2px; font-family: var(--mono); }
.bubble.target { background: var(--bg-alt); justify-self: start; }
.bubble.caller { background: rgba(29,124,112,.18); justify-self: end; }
/* messaging style conversation of the call page */
.chat { gap: 8px; max-width: 820px; margin: 0 auto; }
.chat .bubble { max-width: 72%; line-height: 1.5; font-size: 14px; }
.chat .bubble.target { border-radius: 4px 14px 14px 14px; }
.chat .bubble.caller { border-radius: 14px 4px 14px 14px; border-color: rgba(42,163,150,.35); }
.chat .who { font-family: var(--sans); font-weight: 600; font-size: 11.5px; color: var(--muted); }
.chat .who .t { font-family: var(--mono); font-weight: 400; color: var(--dim); margin-left: 4px; }
.chat .bubble.caller .who { text-align: right; }
/* keypad digits pressed by either side, in the flow of the conversation */
.chat .bubble.dtmf { padding: 7px 12px; font-size: 13px; color: var(--muted);
                     border-style: dashed; background: transparent; }
.chat .bubble.dtmf .keys { display: inline-flex; align-items: center; gap: 5px; }
.chat .bubble.dtmf kbd { font: 700 12.5px var(--mono); color: var(--text); background: var(--surface-hover);
                         border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
                         padding: 1px 7px; min-width: 24px; text-align: center; }
/* alerts sent */
.alerts-sent .nowrap { white-space: nowrap; }
.alert-subject { font-weight: 500; }
.alert-reasons { margin-top: 3px; }
.alert-text { margin-top: 4px; font-size: 12px; }
.alert-text summary { cursor: pointer; }
.alert-text pre { margin: 6px 0 0; padding: 8px 10px; background: var(--bg-alt); border: 1px solid var(--border);
                  border-radius: var(--radius); white-space: pre-wrap; word-break: break-word; }
.alert-error { font-size: 12px; max-width: 220px; }
.channel-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
/* the run a call belongs to, with its sibling calls */
.run-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
             padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg);
             background: var(--surface); }
.run-strip-head { display: inline-flex; align-items: center; gap: 8px; color: var(--text);
                  font-weight: 600; }
.run-strip-head .run-status { padding: 3px 8px; }
.run-strip-head .dim { font-weight: 400; }
.run-strip-calls { display: flex; flex-wrap: wrap; gap: 4px; }
.pill { font: 600 11.5px var(--mono); padding: 3px 8px; border-radius: 999px; color: var(--muted);
        border: 1px solid var(--border); }
.pill:hover { color: var(--text); background: var(--surface-hover); }
.pill.pass { color: var(--success); }
.pill.fail, .pill.error { color: var(--danger); }
.pill.warn { color: var(--warning); }
.pill.current { border-color: var(--accent); background: var(--surface-hover); }
.stack, .stack + .card, .player + .stack { margin-top: 16px; }
pre.resolved { max-height: 340px; overflow: auto; margin: 0; background: var(--bg-alt);
               border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.bubble.seekable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.bubble.seekable:hover, .bubble.seekable:focus { border-color: var(--primary-hover); outline: none; }
.bubble.playing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* call audio player */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.card-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.player { margin-bottom: 16px; }
.player audio { width: 100%; display: block; margin: 4px 0 10px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg label { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12px;
             color: var(--muted); cursor: pointer; border-right: 1px solid var(--border); }
.seg label:last-child { border-right: 0; }
/* visually hidden but focusable and announced (a 0x0 input loses its focus ring in some screen readers) */
.seg input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
             overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.seg label:has(input:checked) { background: var(--surface-hover); color: var(--text); }
.seg label:has(input:focus-visible) { outline: 1px solid var(--accent); }
/* custom controls + waveform (the native <audio> stays as the no-JS fallback) */
.pl { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.pl-play { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--primary);
           color: #fff; display: inline-flex; align-items: center; justify-content: center;
           cursor: pointer; flex: none; }
.pl-play:hover { background: var(--primary-hover); }
.pl-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-play .i-pause, .pl-play.playing .i-play { display: none; }
.pl-play.playing .i-pause { display: block; }
.pl-time { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pl-rate { margin-left: auto; font-family: var(--mono); }
.player.enhanced audio { display: none; }
.wave { position: relative; height: 96px; cursor: pointer; }
.wave-canvas { display: block; width: 100%; height: 100%; }
.wave-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px;
             background: var(--text); opacity: .7; pointer-events: none; }
.marker { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; padding: 0;
          border: 0; border-radius: 2px; cursor: pointer; opacity: .85; }
.marker:hover, .marker:focus { transform: scaleX(2); opacity: 1; outline: none; }
.marker-interruption, .dot-interruption { background: var(--danger); }
.marker-dtmf, .dot-dtmf { background: var(--warning); }
.legend { font-size: 12px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.dot-caller { background: var(--primary-hover); }
.dot-target { background: var(--secondary); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.verdicts .row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0;
                 border-bottom: 1px solid var(--border); }
.verdicts .criterion { font-weight: 500; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.danger-zone { border-color: rgba(248,113,113,.4); }
/* organization without an active plan: what to do next (web/_no_plan.html) */
.no-plan { border-color: rgba(251,191,36,.5); }
.no-plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
                flex-wrap: wrap; }
.no-plan-head h2 { margin-bottom: 6px; }
.no-plan-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.no-plan-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
                 margin-top: 12px; }
.no-plan-plan { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px;
                background: var(--bg-alt); font-size: 13px; }
@media (max-width: 900px) { .no-plan-plans { grid-template-columns: 1fr; } }
/* Delete call history (compliance/purge.html) */
.purge-warning { margin-bottom: 16px; }
.purge-choice { border: 0; padding: 0; margin: 0 0 14px; }
.purge-choice legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.purge-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px;
                border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px;
                cursor: pointer; font-weight: normal; }
.purge-option:has(input:checked), .purge-range:has(input:checked) {
  border-color: var(--danger); background: rgba(248,113,113,.06); }
.purge-option input, .purge-range input { margin-top: 3px; accent-color: var(--danger-strong); }
.purge-ranges { display: flex; flex-wrap: wrap; gap: 6px; }
.purge-range { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px;
               border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
               font-weight: normal; }
.purge-choice .purge-range, .purge-choice .purge-option { margin-bottom: 0; }
.purge-choice .purge-option + .purge-option { margin-top: 6px; }
.purge-preview { border: 1px dashed rgba(248,113,113,.5); border-radius: var(--radius);
                 padding: 10px 14px; margin: 4px 0 14px; }
.purge-preview ul { margin: 4px 0 0; padding-left: 18px; }
.purge-preview-title { font-weight: 600; }
.purge-metadata { flex-wrap: wrap; }
.purge-metadata label { flex: 1; min-width: 0; }
.purge-metadata .help { flex-basis: 100%; padding-left: 24px; }
.purge-form:has(input[name=kind][value=audio]:checked) .purge-metadata { opacity: .5; }
.secret { font-family: var(--mono); background: var(--bg-alt); padding: 10px; border-radius: var(--radius);
          border: 1px solid var(--primary); word-break: break-all; }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* auth pages */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card form p { margin: 0 0 12px; }
.auth-card label { display: block; margin-bottom: 4px; font-weight: 500; }
.auth-card button, .auth-card input[type=submit] { background: var(--primary); color: #fff;
  border: 0; border-radius: var(--radius); padding: 9px 16px; font: 600 14px var(--sans); cursor: pointer; }
.auth-card ul.errorlist { color: var(--danger); padding-left: 18px; margin: 4px 0; }
.mt { margin-top: 16px; }
.select-inline { width: auto; display: inline-block; padding: 4px 8px; }
.form-actions select { width: auto; }
.grid > .card + .card { margin-top: 0; }
.grid + .card, .card + .grid { margin-top: 16px; }
.swatch { vertical-align: -1px; margin-right: 4px; }
[hidden] { display: none !important; }

/* developer docs (/docs/, rendered Markdown) */
.docs-nav { display: flex; flex-direction: column; gap: 1px; }
.docs-nav a { display: block; padding: 5px 10px; border-radius: var(--radius); color: var(--muted);
              font-size: 13px; line-height: 1.35; }
.docs-nav a:hover { background: var(--surface); color: var(--text); }
.docs-nav a.active { background: var(--surface-hover); color: var(--text); font-weight: 500; }
.nav-section { padding: 14px 10px 4px; color: var(--dim); font-size: 11px; font-weight: 600;
               letter-spacing: .06em; text-transform: uppercase; }
.docs-nav .nav-section:first-child, .doc-toc .nav-section { padding-top: 0; }
.doc-files { columns: 2 220px; }
.listen-keys { margin: 6px 0 0; font-family: var(--mono); font-size: 13px; color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.docs-search { margin: 10px 0 4px; }
.docs-search input { padding: 6px 10px; font-size: 13px; }
.docs-search-page { display: flex; gap: 8px; margin: 0 0 16px; max-width: 640px; }
.search-results { padding-left: 20px; }
.search-results li { margin: 0 0 14px; }
.search-results p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.search-results mark { background: var(--surface-hover); color: var(--text); padding: 0 1px; }
/* phones: the docs have no top bar to open the sidebar, so it sits above the page, compact */
@media (max-width: 900px) {
  .docs-shell .sidebar { position: static; transform: none; width: auto; height: auto;
                         box-shadow: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .docs-shell .docs-nav { flex-direction: row; flex-wrap: wrap; gap: 2px 4px; }
  .docs-shell .docs-nav .nav-section { width: 100%; padding: 8px 10px 2px; }
  .docs-shell .docs-nav a { padding: 3px 8px; font-size: 12.5px; }
  .docs-shell .sidebar .spacer { display: none; }
}
.doc-main { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px;
            max-width: 1240px; }
.doc { grid-column: 1; grid-row: 1; min-width: 0; font-size: 15px; line-height: 1.65; }
.doc-toc { grid-column: 2; grid-row: 1; position: sticky; top: 20px; align-self: start;
           font-size: 12.5px; max-height: calc(100vh - 40px); overflow-y: auto; }
.doc-toc a { display: block; padding: 3px 8px; color: var(--muted); }
.doc-toc a:hover { color: var(--text); }
.doc h1 { font-size: 28px; margin: 0 0 18px; }
.doc h2 { font-size: 20px; margin: 34px 0 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.doc h3 { font-size: 16px; margin: 24px 0 8px; color: var(--text); }
.doc h4 { font-size: 14px; margin: 18px 0 6px; color: var(--muted); }
.doc p, .doc ul, .doc ol { margin: 0 0 12px; }
.doc li { margin: 3px 0; }
.doc code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
            padding: 1px 5px; }
.doc pre { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
           padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; line-height: 1.5; }
.doc pre code { background: none; border: 0; padding: 0; }
.doc table { margin: 0 0 16px; display: block; overflow-x: auto; }
.doc th[align=center], .doc td[align=center] { text-align: center; }
.doc th[align=right], .doc td[align=right] { text-align: right; }
.doc blockquote { margin: 0 0 12px; padding: 4px 14px; border-left: 3px solid var(--primary);
                  color: var(--muted); }
.doc .offsite { color: var(--muted); border-bottom: 1px dotted var(--dim); }
.doc h2[id], .doc h3[id] { scroll-margin-top: 16px; }
@media (max-width: 1100px) {
  .doc-main { grid-template-columns: 1fr; }
  .doc-toc { display: none; }
}

/* number verification */
.verify-code { font-family: var(--mono); font-size: 34px; letter-spacing: .25em; text-align: center;
               padding: 18px; margin-bottom: 16px; border: 1px dashed var(--primary);
               border-radius: var(--radius); background: var(--bg-alt); }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row .secret { flex: 1; }
/* Developer > MCP: install snippets */
.snippet { margin: 14px 0; }
.snippet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px;
                margin-bottom: 4px; }
.snippet-code { margin: 6px 0 0; padding: 10px 12px; background: var(--bg-alt);
                border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto;
                white-space: pre; }
.steps { margin: 0 0 14px; padding-left: 20px; color: var(--muted); }
.verify-live { display: flex; gap: 8px; align-items: center; border-color: rgba(96,165,250,.5); }
.verify-hint, .verify-attempts { margin: 6px 0 0; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--secondary);
         animation: pulse 1.2s ease-in-out infinite; flex: none; }
@keyframes pulse { 50% { opacity: .25; } }

/* onboarding checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist li { display: flex; gap: 10px; align-items: baseline; }
.checklist .mark { width: 18px; flex: none; text-align: center; color: var(--dim); }
.checklist .done .mark { color: var(--success); }
.checklist .done .label { color: var(--muted); text-decoration: line-through; }
.progress { width: 100%; height: 6px; margin: 8px 0 14px; border: 0; border-radius: 3px;
            background: var(--bg-alt); appearance: none; overflow: hidden; }
.progress::-webkit-progress-bar { background: var(--bg-alt); }
.progress::-webkit-progress-value { background: var(--primary); }
.progress::-moz-progress-bar { background: var(--primary); }

/* legal links (page footer and auth pages) */
.legal-links { font-size: 12px; color: var(--dim); padding: 8px 12px; line-height: 1.8; }
.legal-links a { color: var(--dim); }
.legal-links a:hover { color: var(--text); }

/* honeypot of the public abuse report form: hidden from humans, filled by bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* filters bar (Monitoring) */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filters select { width: auto; max-width: 200px; padding: 6px 10px; font-size: 13px; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
        font-size: 12.5px; font-weight: 500; }
.chip:hover { color: var(--text); background: var(--surface); }
.chip.active { background: var(--surface-hover); color: var(--text); border-color: var(--primary); }
.row-actions { white-space: nowrap; }

/* status pill shared by run lists */
.run-status { font: 700 11px var(--mono); padding: 3px 0; border-radius: 5px; text-align: center;
              background: var(--bg-alt); color: var(--dim); }
.run-status.pass { background: rgba(42,163,150,.15); color: var(--success); }
.run-status.fail { background: rgba(248,113,113,.15); color: var(--danger); }
.run-status.warn { background: rgba(251,191,36,.15); color: var(--warning); }
.run-status.running, .run-status.queued { background: rgba(96,165,250,.12); color: var(--secondary); }

/* Monitoring: runs unfolding on their calls */
.runs { padding: 6px; }
.runs-head, .run-sum { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 14px 64px minmax(0, 1fr) 80px 60px 50px 64px 96px; }
.runs-head { padding: 6px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
             color: var(--dim); font-weight: 600; border-bottom: 1px solid var(--border); }
.runs-head .num, .run-sum .num { text-align: right; font-variant-numeric: tabular-nums; }
.run { border-bottom: 1px solid var(--border); }
.run:last-child { border-bottom: 0; }
.run-sum { list-style: none; cursor: pointer; padding: 9px 10px; border-radius: var(--radius); }
.run-sum::-webkit-details-marker { display: none; }
.run-sum:hover { background: var(--surface-hover); }
.run-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-name .dim { font-weight: 400; }
.chev { width: 7px; height: 7px; border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim);
        transform: rotate(-45deg); transition: transform .15s; }
details[open] > summary .chev { transform: rotate(45deg); }
.run-calls { padding: 2px 10px 10px 36px; display: grid; gap: 2px; }
.call-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 76px 56px 36px; gap: 12px;
            align-items: center; padding: 6px 8px; border-radius: 6px; color: var(--text); font-size: 13px; }
.call-row:hover { background: var(--surface-hover); color: var(--text); }
.call-row .st { font-weight: 700; text-align: center; color: var(--dim); }
.call-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-row .nm .dim { font-size: 12px; }
.call-row .lat { font-size: 12px; text-align: right; white-space: nowrap; }
.call-row .sc { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.call-row.pass .st, .call-row.pass .sc { color: var(--success); }
.call-row.fail .st, .call-row.fail .sc, .call-row.error .st { color: var(--danger); }
.call-row.warn .st, .call-row.warn .sc { color: var(--warning); }
.call-empty { padding: 6px 8px; }
.run-foot { padding: 6px 8px 0; font-size: 12.5px; }
@media (max-width: 900px) {
  .runs-head { display: none; }
  .run-sum { grid-template-columns: 14px 60px minmax(0, 1fr) 50px; }
  .run-sum > :nth-child(4), .run-sum > :nth-child(6), .run-sum > :nth-child(7),
  .run-sum > :nth-child(8) { display: none; }
  .run-calls { padding-left: 10px; }
  .call-row { grid-template-columns: 18px minmax(0, 1fr) 36px; }
  .call-row .badge, .call-row .lat { display: none; }
}

/* collapsible "Advanced" blocks: <details class="card advanced"><summary><h2>..</h2></summary> */
details.advanced > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline;
                             gap: 10px; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary h2 { margin: 0; }
details.advanced > summary::before { content: ""; width: 7px; height: 7px; align-self: center;
  border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim);
  transform: rotate(-45deg); transition: transform .15s; flex: none; }
details.advanced[open] > summary::before { transform: rotate(45deg); }
details.advanced[open] > summary { margin-bottom: 12px; }

/* scenario page: recent trend, settings (number, schedule, tags) */
.trend { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.trend-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding-bottom: 2px;
              border-bottom: 1px solid var(--border); }
.tb { display: block; width: 14px; border-radius: 3px 3px 0 0; background: var(--dim); opacity: .85; }
.tb:hover { opacity: 1; outline: 1px solid var(--text); }
.tb.pass { background: var(--success); } .tb.fail { background: var(--danger); }
.tb.warn { background: var(--warning); } .tb.running, .tb.queued { background: var(--secondary); }
.tb.s0 { height: 4px; } .tb.s1 { height: 8px; } .tb.s2 { height: 12px; } .tb.s3 { height: 17px; }
.tb.s4 { height: 22px; } .tb.s5 { height: 27px; } .tb.s6 { height: 32px; } .tb.s7 { height: 37px; }
.tb.s8 { height: 42px; } .tb.s9 { height: 48px; } .tb.s10 { height: 54px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.trend-sum { color: var(--muted); padding-bottom: 4px; }
.trend-sum b { color: var(--text); }
.issue { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius);
         border: 1px solid rgba(251,191,36,.35); background: rgba(251,191,36,.06); }
.issue.fail { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.06); }
.issue strong { color: var(--text); }
.issue blockquote { margin: 6px 0; padding-left: 10px; border-left: 2px solid var(--border);
                    color: var(--muted); font-style: italic; }
.ok-line { color: var(--success); margin: 12px 0 0; }
.last-run .run-status { padding: 1px 6px; font-size: 10.5px; }
.settings section + section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.settings h3 { margin-bottom: 8px; }
.settings p { margin-bottom: 8px; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form select, .inline-form input[type=text] { flex: 1; min-width: 0; }
.btn-plus-sm { width: 30px; justify-content: center; padding: 4px 0; font-size: 16px; }
.schedule-form { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.schedule-form label { color: var(--muted); font-size: 13px; }
.schedule-form .form-actions, .schedule-form .help { grid-column: 1 / -1; }
.schedule-form .help { font-size: 12px; }
.schedule-form .errors, .env-plan .errors { color: var(--danger); font-size: 12px; margin-top: 4px; }
.schedule-form > label { align-self: start; padding-top: 8px; }
input.invalid { border-color: var(--danger); }
.help-line { font-size: 12.5px; margin-top: -4px; }
/* one environment of the scenario: badge and "Run here", schedule and zone, window, save */
.env-plan { display: grid; gap: 8px; padding: 10px 0; }
.env-plan + .env-plan, .schedule-confirm + .env-plan { border-top: 1px dashed var(--border); }
.env-plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.env-plan-head .dim { font-size: 12px; }
.env-plan-run { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
                color: var(--muted); font-size: 13px; }
.env-plan-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.env-plan-fields .env-plan-window { grid-column: 1 / -1; }
/* a schedule read by the LLM, to confirm before it is saved */
.schedule-confirm { border: 1px solid rgba(96,165,250,.45); background: var(--bg-alt);
                    border-radius: var(--radius); padding: 10px 12px; margin: 4px 0 12px;
                    display: grid; gap: 8px; }
.schedule-confirm-text .dim { font-size: 12.5px; }
.schedule-confirm-reading { margin-top: 2px; }
.schedule-confirm-reading code { font-family: var(--mono); font-size: 12.5px; padding: 1px 6px;
                                 border-radius: 4px; background: var(--surface-hover); }
.schedule-confirm-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.schedule-confirm-actions .dim { font-size: 12.5px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
            border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 12.5px; }
.tag-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.tag-chip:has(input:checked) { color: var(--text); border-color: var(--primary-hover);
                               background: var(--surface-hover); }
.tag-chip:has(input:focus-visible) { outline: 2px solid var(--primary); }
.tag-chip .swatch { margin: 0; }
.mt-sm { margin-top: 10px; }
.last-run-cell .run-status { display: inline-block; min-width: 56px; padding: 2px 6px; }
.last-run-cell { white-space: nowrap; }
/* scenario list: what runs where (one chip per environment: color, version, last verdict) */
.scenario-name { font-weight: 500; }
.binds { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 420px; }
.bind { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; font-size: 12px;
        font-weight: 500; color: var(--text); border: 1px solid var(--border); border-radius: 999px;
        background: var(--bg-alt); white-space: nowrap; }
.bind:hover { border-color: var(--dim); color: var(--text); }
.bind .swatch { margin: 0; flex: none; }
.bind-ver { font: 500 11px var(--mono); color: var(--muted); }
.bind-mark { font-weight: 700; font-size: 11px; color: var(--dim); }
.bind.pass .bind-mark { color: var(--success); }
.bind.fail .bind-mark, .bind.error .bind-mark { color: var(--danger); }
.bind.warn .bind-mark { color: var(--warning); }
.bind.running .bind-mark, .bind.queued .bind-mark { color: var(--secondary); }
.bind-sched { flex-basis: 100%; display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
              color: var(--muted); padding-left: 2px; }
.tag-badge { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--sans);
             color: var(--muted); padding: 2px 8px 2px 6px; border: 1px solid var(--border);
             border-radius: 5px; white-space: nowrap; }
.tag-badge:hover { color: var(--text); background: var(--surface-hover); }
.tag-badge .swatch { margin: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
/* palette pick (environment and tag forms): a ring around the chosen swatch, centered */
.color-pick { border: 0; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.color-pick legend { font-weight: 500; margin-bottom: 5px; padding: 0; }
/* .field label (display: block, margin) must not win: the fieldset is also a .field */
.color-pick .color-swatch { position: relative; cursor: pointer; display: inline-flex;
                align-items: center; justify-content: center; box-sizing: border-box;
                width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%;
                border: 2px solid transparent; font-weight: normal; }
.color-pick .color-swatch svg { display: block; flex: none; }
.color-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.color-swatch:hover { border-color: var(--dim); }
.color-swatch:has(input:checked) { border-color: var(--text); }
.color-swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Versions and environments board: one column per environment, scenario cards to drag */
.board-tags { margin: 0; }
.board-version-tally { margin-top: 4px; font-weight: 600; }
.board-version-tally .ok, .version-tally .ok { color: var(--success); }
.board-version-tally .warn { color: var(--warning); }
.board-version-tally .bad, .version-tally .bad { color: var(--danger); }
.board-card.paused { opacity: .7; }
.trend-up { color: var(--success); } .trend-down { color: var(--danger); }
.version-tally { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px;
         overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; align-items: start; }
.board-col { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg);
             min-height: 260px; display: flex; flex-direction: column; transition: border-color .15s,
             box-shadow .15s; }
.board-col.drop-over { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.board-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--border); }
.board-env { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.board-env .swatch { margin: 0; }
.board-help { font-size: 12.5px; margin: -4px 0 12px; }
/* column actions: + Scenario (menu), + Version, Edit */
.board-col-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
                     font-weight: 500; font-size: 12px; }
.board-col-actions .btn-sm { padding: 3px 8px; }
.board-add { position: relative; }
.board-add > summary { list-style: none; cursor: pointer; }
.board-add > summary::-webkit-details-marker { display: none; }
.board-add-panel { min-width: 260px; max-height: 320px; overflow-y: auto; }
.board-add-panel form { margin: 0; }
/* tags of a card, edited in place */
.tag-edit { position: relative; display: inline-block; }
.tag-edit > summary { list-style: none; cursor: pointer; font-size: 11.5px; color: var(--dim);
                      padding: 1px 6px; border: 1px dashed var(--border); border-radius: 10px; }
.tag-edit > summary::-webkit-details-marker { display: none; }
.tag-edit > summary:hover, .tag-edit[open] > summary { color: var(--text); border-color: var(--dim); }
.tag-edit-panel { left: 0; right: auto; min-width: 250px; cursor: default; }
.tag-edit-panel .tag-chips { padding: 0 6px; }
.tag-edit-panel .inline-form { padding: 0 6px 4px; }
.tag-edit-panel .inline-form input[type=text] { padding: 5px 8px; font-size: 13px; }
.menu-panel .inline-form .btn { width: auto; display: inline-flex; flex: none;
                                border: 1px solid var(--border); padding: 4px 10px; }
.page-head .actions { justify-content: flex-end; }
.tag-edit-panel .tag-chip { width: auto; }
.board-version { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface);
                 border: 1px solid var(--border); font-size: 12.5px; }
.board-version-tag { font-size: 15px; font-weight: 600; color: var(--text); }
.board-version-links { margin-top: 4px; font-size: 12px; }
.board-version-none { border-style: dashed; }
.board-connector { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
                   color: var(--muted); padding: 4px 8px; border: 1px dashed var(--border); border-radius: 6px; }
.board-stats { margin-top: 10px; font-size: 12.5px; font-weight: 600; }
.board-stats .ok { color: var(--success); } .board-stats .warn { color: var(--warning); }
.board-stats .bad { color: var(--danger); }
.board-cards { padding: 10px; display: grid; gap: 8px; flex: 1; align-content: start; }
.board-card[draggable=true] { cursor: grab; }
.board-card.dragging, .tray-item.dragging { opacity: .5; }
.board-card.pass { border-left-color: var(--success); } .board-card.fail, .board-card.error { border-left-color: var(--danger); }
.board-card.warn { border-left-color: var(--warning); } .board-card.running, .board-card.queued { border-left-color: var(--secondary); }
.board-card-name:hover { color: var(--accent); }
.board-mark { font-weight: 700; font-family: var(--mono); font-size: 13px; }
.board-mark.pass { color: var(--success); } .board-mark.fail, .board-mark.error { color: var(--danger); }
.board-mark.warn { color: var(--warning); } .board-mark.running, .board-mark.queued { color: var(--secondary); }
.board-sched { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
a.board-sched:hover { color: var(--accent); }
.board-col.drop-target { border-style: dashed; }
.board-col.drop-saving { opacity: .6; pointer-events: none; }
.board-tray .card-head { flex-wrap: wrap; gap: 10px; }
.board-tray .board-tray-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.board-tray input.board-tray-sched { width: 200px; flex: 0 0 200px; padding: 4px 8px; font-size: 12.5px; }
.board-tray button[disabled] { opacity: .45; cursor: not-allowed; }
.board-empty { padding: 18px 10px; color: var(--dim); text-align: center; border: 1px dashed var(--border);
               border-radius: var(--radius); font-size: 13px; }
.board-drop-form { display: none; }
.board-tray .board-tray-bar { gap: 10px; }
.tray-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tray-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border);
             border-radius: var(--radius); background: var(--bg-alt); cursor: grab; font-size: 13px; }
.tray-item:hover { border-color: var(--dim); }
.tray-item:has(input:checked) { border-color: var(--primary-hover); background: var(--surface-hover); }
.tray-item.unbound { border-style: dashed; }
.tray-name { font-weight: 500; }
.version-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.version-item { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
                padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; }
.version-name { font-weight: 600; color: var(--text); }
.version-envs { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.version-arrow { color: var(--dim); }
.version-when { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
@media (max-width: 900px) {
  .board { grid-auto-flow: row; grid-auto-columns: auto; }
  .version-item { grid-template-columns: 1fr; gap: 4px; }
  .version-when { text-align: left; max-width: none; }
}

/* board, one-line cards (founder review 2026-09-29): name, tag pills, compact schedule,
   verdict, a menu. Toolbar: search, tag filter, group by tag, compact mode. */
.board-toolbar { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.board-toolbar + .board-help { margin-top: 10px; }
.board-search { position: relative; display: flex; align-items: center; margin: 0; }
.board-search svg { position: absolute; left: 9px; color: var(--dim); pointer-events: none; }
.board-search input[type=search] { width: 240px; padding: 6px 10px 6px 28px; font-size: 13px; }
.board-tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.board-view { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius);
              overflow: hidden; margin-left: auto; }
.board-toggle { padding: 5px 11px; font-size: 12.5px; font-weight: 500; color: var(--muted);
                white-space: nowrap; border-right: 1px solid var(--border); }
.board-toggle:last-child { border-right: 0; }
.board-toggle:hover { color: var(--text); background: var(--surface); }
.board-toggle.on { color: var(--text); background: var(--surface-hover); }
.board-toggle.on::before { content: "\2713  "; color: var(--accent); white-space: pre; }
.board-env { min-width: 0; font-size: 14.5px; gap: 7px; }
.board-env-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.board-count { font: 600 11px var(--mono); color: var(--muted); background: var(--surface-hover);
               border-radius: 999px; padding: 1px 7px; flex: none; }
.board-col-actions { flex: none; gap: 4px; }
.board-dots { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
              justify-content: center; width: 26px; height: 26px; border-radius: 6px;
              color: var(--dim); border: 1px solid transparent; }
.board-dots::-webkit-details-marker { display: none; }
.board-dots:hover, details[open] > .board-dots { color: var(--text); background: var(--surface);
                                                 border-color: var(--border); }
.board-more, .board-card-menu { position: relative; }
.board-more .menu-panel { min-width: 230px; }
.board-cards { padding: 8px; gap: 4px; }
.board-card { display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px;
              padding: 0 4px 0 10px; background: var(--surface); border: 1px solid var(--border);
              border-left-width: 3px; border-radius: var(--radius); font-size: 12.5px; }
.board-card:hover { border-color: var(--dim); }
.board-card.pass { border-left-color: var(--success); }
.board-card.fail, .board-card.error { border-left-color: var(--danger); }
.board-card.warn { border-left-color: var(--warning); }
.board-card.running, .board-card.queued { border-left-color: var(--secondary); }
.board-card.paused, .board-card.unbound { opacity: .72; border-style: dashed; border-left-style: solid; }
.board-card-name { flex: 1 1 auto; min-width: 72px; font-weight: 600; font-size: 13px;
                   color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-card-tags { display: inline-flex; gap: 3px; flex: none; }
.board-col { container-type: inline-size; }
@container (max-width: 400px) {
  .board-card .tag-pill { padding: 0 2px; border: 0; } .board-card .tag-pill .tp-name, .board-card .tag-more { display: none; }
}
@container (max-width: 300px) { .board-sched-txt { display: none; } }
.tag-pill { display: inline-flex; align-items: center; gap: 4px; max-width: 76px; padding: 0 6px;
            height: 18px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
            font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.tag-pill .swatch { margin: 0; flex: none; }
.tag-more { color: var(--dim); }
.board-sched { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--muted);
               font-size: 11.5px; white-space: nowrap; }
.board-state { flex: none; font: 600 10.5px var(--mono); color: var(--warning); white-space: nowrap; }
.board-mark { flex: none; font-size: 11.5px; white-space: nowrap; min-width: 50px; text-align: right; }
.board-mark.none { color: var(--dim); }
.board-mark .trend-up, .board-mark .trend-down { margin-left: 2px; }
.board-card-panel { min-width: 260px; }
.board-card-panel form { margin: 0; }
.board-card-tags-form .tag-chips { padding: 0 6px; }
.board-card-tags-form .inline-form { padding: 0 6px 4px; }
.board-card-tags-form .inline-form input[type=text] { padding: 5px 8px; font-size: 13px; }
.board-card-panel .tag-chip { width: auto; }
.menu-panel .menu-danger { color: var(--danger); }
.menu-panel .menu-danger:hover { background: rgba(248,113,113,.12); color: var(--danger); }
.board-group { border-radius: var(--radius); }
.board-group + .board-group, .board-card + .board-group, .board-group + .board-card { margin-top: 4px; }
.board-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
                         padding: 4px 6px; font-size: 12px; font-weight: 600; color: var(--muted);
                         border-radius: 6px; }
.board-group > summary::-webkit-details-marker { display: none; }
.board-group > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--dim);
  border-bottom: 1.5px solid var(--dim); transform: rotate(-45deg); transition: transform .15s; }
.board-group[open] > summary::before { transform: rotate(45deg); }
.board-group > summary:hover { color: var(--text); background: var(--surface); }
.board-group-cards { display: grid; gap: 4px; padding: 2px 0 4px; }
.board-more-cards { margin-top: 4px; background: none; border: 1px dashed var(--border); color: var(--muted);
                    border-radius: var(--radius); padding: 6px; font: 500 12.5px var(--sans); cursor: pointer; }
.board-more-cards:hover { color: var(--text); border-color: var(--dim); }
.board-card.cut, .board-card.filtered { display: none; }
.board-group.filtered { display: none; }
.board.compact .board-card { height: 28px; }
.board.compact .board-card-name { font-size: 12.5px; font-weight: 500; }
.board.compact .board-cards, .board.compact .board-group-cards { gap: 2px; }
.board.compact .board-version { margin-top: 6px; padding: 6px 10px; }
.board.compact .board-version-when, .board.compact .board-version-links { display: none; }
.board.compact .board-head { padding: 10px 12px 8px; }
.board.compact .board-stats { margin-top: 6px; }
.board-tray-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.board-tray-summary::-webkit-details-marker { display: none; }
.board-tray-summary h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.board-tray-summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--dim);
  border-bottom: 1.5px solid var(--dim); transform: rotate(-45deg); transition: transform .15s; }
.board-tray-fold[open] > .board-tray-summary { margin-bottom: 10px; }
.board-tray-fold[open] > .board-tray-summary::before { transform: rotate(45deg); }
.tray-item.filtered { display: none; }

/* scenario editor: sticky footer with the save state (Saved / Unsaved changes / Saving /
   not valid / waiting for Save) and the explicit Save, like a studio */
.editor-footer { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 20; display: flex;
                 align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
                 margin-top: 8px; padding: 10px 16px; background: var(--bg-alt);
                 border: 1px solid var(--border); border-bottom: 0;
                 border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
.editor-status { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; font-size: 13px; }
.editor-status .st-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--success); }
.editor-status .st-text { font-weight: 600; white-space: nowrap; }
.editor-status .st-detail { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                            min-width: 0; }
.editor-status .st-detail code { color: var(--danger); }
.editor-status.dirty .st-dot { background: var(--warning); }
.editor-status.saving .st-dot { background: var(--secondary); animation: pulse 1s ease-in-out infinite; }
.editor-status.invalid .st-dot, .editor-status.error .st-dot { background: var(--danger); }
.editor-status.invalid .st-text, .editor-status.error .st-text { color: var(--danger); }
.editor-status.held .st-dot { background: var(--warning); }
.editor-status.held .st-text { color: var(--warning); }
.editor-status.new .st-dot { background: var(--dim); }
.editor-footer .form-actions { flex: none; }
/* IVR steps: an ordered list, numbered by CSS, reordered with the arrows */
.step-rows { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.human-item.step { flex-wrap: nowrap; counter-increment: step; }
.step-num::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center;
                    width: 20px; height: 20px; border-radius: 50%; background: var(--surface-hover);
                    font: 600 11px var(--mono); color: var(--muted); }
.human-item.step .select-inline { width: 92px; flex: none; }
.human-item.step .step-value { flex: 1; min-width: 80px; }
.step-move { display: inline-flex; flex: none; }
.step-move .btn { padding: 2px 7px; color: var(--dim); }
.step-move .btn:hover { color: var(--text); }
.step-rows .human-item.step:first-child [data-move-row="up"],
.step-rows .human-item.step:last-child [data-move-row="down"] { visibility: hidden; }

/* page actions: Export menu (LLM report, downloads), a visible Edit next to Run now */
.export-menu > summary.btn { color: var(--text); padding: 7px 12px; }
.export-menu .menu-panel { min-width: 240px; }
.btn-edit { border-color: var(--primary-hover); color: var(--text); }
.btn-edit:hover { border-color: var(--accent); }
.run-now { display: inline-flex; align-items: center; gap: 6px; }

/* "Set up with your coding agent" tabs (web/_agent_setup.html and the quickstart): CSS only,
   one radio per tab, so they work under the strict CSP without a script */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 14px; }
.tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.tab-label { order: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius);
             color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 500; }
.tab-label:hover { color: var(--text); background: var(--surface-hover); }
.tab-radio:checked + .tab-label { color: #fff; background: var(--primary); border-color: var(--primary); }
.tab-radio:focus-visible + .tab-label { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-panel { order: 1; width: 100%; display: none; padding-top: 4px; }
.tab-radio:checked + .tab-label + .tab-panel { display: block; }
.snippet-prompt { white-space: pre-wrap; }
mark.key-placeholder { background: var(--warning); color: #111; padding: 0 3px; border-radius: 3px;
                       font-weight: 600; }
.agent-steps { margin: 6px 0 4px; padding-left: 20px; }
.agent-steps li { margin: 2px 0; }
.doc .tab-panel pre { margin: 6px 0 10px; }
.doc .tab-panel p { margin: 6px 0; }
/* docs: a Copy button on every code block */
.code-block { position: relative; }
.code-block .code-copy { position: absolute; top: 6px; right: 6px; opacity: .75; }
.code-block:hover .code-copy, .code-block .code-copy:focus-visible { opacity: 1; }
/* docs: back to the app, top right of every page */
.docs-back-app { position: fixed; top: 14px; right: 18px; z-index: 40; box-shadow: var(--shadow); }
.docs-shell .doc-toc { margin-top: 44px; top: 64px; }
.doc-callout { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px;
               padding: 12px 14px; border: 1px solid var(--primary); border-radius: var(--radius);
               background: var(--bg-alt); }
.doc-callout p { margin: 0; flex: 1 1 260px; }
/* the callout goes right under the page title (it comes first in the HTML) */
.doc.has-callout { display: flex; flex-direction: column; }
.doc.has-callout > * { order: 2; }
.doc.has-callout > h1 { order: 0; }
.doc.has-callout > .doc-callout { order: 1; }

/* Global rules (keep last). A button never wraps its label. Blocks of the main column never
   touch: a gap between any two of them, whatever their classes (a card after a KPI row, a
   danger zone after a report...); the breadcrumb stays close to the title under it and a
   stylesheet link (no box) does not count as a block. .flow does the same inside a wrapper. */
.btn, summary.btn, .goto-link, .chip, .env-chip, .tag-badge { white-space: nowrap; }
.main > * + *, .flow > * + * { margin-top: 16px; }
.main > .crumbs + *, .main > link:first-child + * { margin-top: 0; }

/* Support: unread count in the sidebar, ticket statuses, the thread */
.nav-count { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--accent); color: var(--bg); font: 700 11px var(--mono); text-align: center; }
.badge-open, .badge-waiting_customer { color: var(--warning); border-color: rgba(251,191,36,.4); }
.badge-answered { color: var(--success); border-color: rgba(42,163,150,.4); }
.badge-closed { color: var(--muted); }
.thread { display: flex; flex-direction: column; gap: 12px; }
.thread .msg { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
  background: var(--surface); }
.thread .msg-staff { border-color: var(--accent); }
.thread .msg-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.thread .msg-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: inherit; }