/* Tenra Voice Console.
 *
 * Light ground, white panels, one indigo accent, semantic colour reserved for state.
 * The console used to be dark-first because it is a tool you stare at; it is now
 * light-first because it is also a tool a client sees. Dark is still here and still
 * complete - every colour below is a token, and the dark block swaps the tokens rather
 * than restating the rules.
 *
 * The palette, the radii and the component anatomy were read off the reference design
 * rather than guessed: the accent is the indigo sampled from its active nav pill and
 * transcript speaker labels (#6366F1 family, tint #F1F0FE), the call ring is the
 * blue-to-cyan sweep sampled at #4566FC and #4DCDFC, and a delta is plain coloured text
 * with an arrow, never a filled chip.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  color-scheme: light;

  --ground: #F7F8FB;
  --panel: #FFFFFF;
  --panel-2: #F6F7FA;
  --line: #ECEEF3;
  --line-soft: #F3F4F8;
  --ink: #101828;
  --ink-2: #5B6472;
  --ink-3: #98A0AE;

  --accent: #6366F1;
  --accent-strong: #4F46E5;
  --accent-ink: #4F46E5;
  --accent-bg: #F1F0FE;
  --accent-line: #DDDBFB;
  --on-accent: #FFFFFF;
  --cool: #38BDF8;          /* the second chart line, and the cyan end of the ring */

  --ok: #16A34A;      --ok-bg: #E7F8EE;
  --warn: #D97706;    --warn-bg: #FEF3E2;
  --danger: #EF4444;  --danger-bg: #FEECEC;
  --info: #2563EB;    --info-bg: #E8F1FE;


  /* --- type scale ------------------------------------------------------------------
     Ten steps, no half-pixels. This file previously carried twenty-three distinct font
     sizes between 8 and 32px, six of them fractional - which is an accumulation rather
     than a scale, and fractional sizes round differently between browsers.

     13px is the interface default: dense enough for an operations console that shows
     hundreds of call rows, and the size Linear and Vapi settle on for the same reason.
     Anything a person reads as prose rather than scans as data starts at 14px. */
  --t-2xs: 11px;   /* uppercase micro-labels only */
  --t-xs:  12px;   /* badges, table meta */
  --t-sm:  13px;   /* secondary and helper text */
  --t-base:14px;   /* interface default */
  --t-md:  15px;   /* prose, card titles */
  --t-lg:  17px;   /* section headings */
  --t-xl:  20px;
  --t-2xl: 24px;   /* modal titles */
  --t-3xl: 28px;   /* page titles */
  --t-4xl: 36px;   /* the number on a stat card */
  --t-5xl: 44px;   /* figure heroes */

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 6px 18px -6px rgba(16, 24, 40, .12), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lg: 0 26px 64px -20px rgba(16, 24, 40, .30);

  /* Categorical series, assigned in fixed pipeline order and never cycled, so a
     component keeps its colour whichever one happens to dominate a given call. */
  --series-1: #3987e5;   /* speech to text  */
  --series-2: #d95926;   /* language model  */
  --series-3: #199e70;   /* text to speech  */
  --series-4: #c98500;   /* infrastructure  */
  --series-5: #d55181;   /* telephony       */

  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

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

  --ground: #0B1014;
  --panel: #131B21;
  --panel-2: #1A242C;
  --line: #24323C;
  --line-soft: #1B252D;
  --ink: #E7EEF3;
  --ink-2: #9BABB8;
  --ink-3: #6C7C89;

  --accent: #818CF8;
  --accent-strong: #6366F1;
  --accent-ink: #A5B4FC;
  --accent-bg: #1E2140;
  --accent-line: #343A6B;
  --on-accent: #0B0A1F;

  --ok: #5FC98C;      --ok-bg: #10291D;
  --warn: #E0A94F;    --warn-bg: #2B2110;
  --danger: #EC7F76;  --danger-bg: #2E1917;
  --info: #7EB0F5;    --info-bg: #101F35;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 22px -8px rgba(0, 0, 0, .65);
  --shadow-lg: 0 28px 70px -20px rgba(0, 0, 0, .8);

  --series-1: #6BA8F0; --series-2: #F08A5D; --series-3: #4FCBA0;
  --series-4: #E8BC5B; --series-5: #F08AAE;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1;   /* the single-storey l, which is what the reference uses */
}
::selection { background: var(--accent-bg); color: var(--accent-ink); }

/* =================================================================== app shell */

body.app {
  display: grid;
  /* minmax(0, 1fr) not 1fr: a grid track defaults to min-content width, so a wide
     table makes the whole page scroll sideways instead of inside its own container. */
  grid-template-columns: 264px minmax(0, 1fr);
  /* The window does not scroll; the two panes do, independently. Sticky positioning was
     not enough - on a long page the rail scrolled away with the content and stopped dead
     partway down, leaving bare ground beneath it. Giving each pane its own scroller means
     the rail is always exactly the height of the window. */
  height: 100vh;
  overflow: hidden;
  /* The rail's width lives on this track, not on .sidebar - the sidebar is a grid
     item and stretches to whatever the track gives it. Animating the sidebar's own
     width would slide it out from under the column and leave a gap. */
  transition: grid-template-columns 240ms cubic-bezier(.16, 1, .3, 1);
}
:root.rail-collapsed body.app { grid-template-columns: 72px minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) {
  body.app, .sidebar *, .side-toggle svg { transition: none !important; }
}
/* Scoped to the app shell. The sign-in page is also a <main>, and unscoped these rules
   applied its padding to the artwork panel and stopped it short of the right edge.
   No max-width: this is a control surface, and a 1460px column on a wide monitor wasted
   the space a dense table most wants. */
body.app main { padding: 32px 36px 64px; min-width: 0; height: 100%; overflow-y: auto; }

/* =================================================================== sidebar */

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
  padding: 20px 12px 16px;
  height: 100%; overflow-y: auto; min-height: 0;
}

/* The Tenra house mark. One file, drawn through a CSS mask rather than inlined, so the
   brand geometry exists in exactly one place and still takes its colour from context -
   white on the sidebar chip, ink on the light login card. An <img> could not do the
   second part. The mark is 83x68, so height comes from aspect-ratio: setting both
   dimensions square letterboxes it and makes it look smaller than it is. */
.tenra-mark {
  display: block; aspect-ratio: 83 / 68; background-color: currentColor;
  -webkit-mask: url("/static/img/tenra-mark.svg") no-repeat center / contain;
          mask: url("/static/img/tenra-mark.svg") no-repeat center / contain;
}

/* The client's mark alone. The product name was a second piece of branding in a rail
   that belongs to the client, and the words "The First Group" were already in the logo. */
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; }
.brand-tfg { display: block; height: 26px; width: auto; }
.brand-tfg-mark { display: none; height: 26px; width: auto; }

/* "Voice" set against the logo. The logo is a stacked three-line wordmark, so this is
   optically centred on it rather than baseline-aligned, and the tracking is opened up
   to match the airiness of the mark's own letterforms. The hairline is what stops two
   wordmarks reading as one run-on phrase. */
.brand-voice {
  font-size: var(--t-md); font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink); line-height: 1; white-space: nowrap;
  padding-left: 12px; margin-left: 2px; position: relative;
}
.brand-voice::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--line);
}
:root[data-theme="dark"] .brand-tfg,
:root[data-theme="dark"] .brand-tfg-mark { filter: invert(1) brightness(1.8); }
.side-toggle {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  border: 0; background: var(--panel-2); color: var(--ink-3);
  cursor: pointer; padding: 0;
  transition: color 160ms ease, background 160ms ease;
}
.side-toggle:hover { background: var(--panel-2); color: var(--ink); }
.side-toggle svg { width: 15px; height: 15px; display: block;
                   transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
:root.rail-collapsed .side-toggle svg { transform: rotate(180deg); }
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, #818CF8, var(--accent-strong));
  color: #FFF; display: grid; place-items: center;
}
/* 22px, not 20: the real mark is a 3-unit stroke where the old approximation was
   6.5, so it needs slightly more room to carry the same weight in the chip. */
.brand .mark .tenra-mark { width: 22px; }
.brand .who { min-width: 0; }
.brand .who b { display: block; font-size: var(--t-md); font-weight: 650; letter-spacing: -.02em;
                line-height: 1.25; }
.brand .who span { display: block; font-size: var(--t-2xs); letter-spacing: .11em;
                   text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

.nav-item {
  /* justify-content is spelled out because the base `button` rule centres its content.
     Items that carry a count hid the bug - the count's `margin-left: auto` pushed
     everything else left - so only the four without one looked wrong. */
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 9px 14px; border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer; border: 0; background: none; box-shadow: none;
  font-family: var(--sans); font-size: var(--t-base); font-weight: 500;
  text-align: left; width: 100%;
}
.nav-item svg { width: 18px; height: 18px; flex: none; }
/* The label carries its own left margin rather than riding the flex gap, so the icon
   can glide to centre as the rail folds instead of the text snapping out from under it.
   Width, margin and opacity animate together. */
.nav-item > span:not(.count) {
  margin-left: 0; max-width: 150px; overflow: hidden; white-space: nowrap;
  transition: max-width 260ms cubic-bezier(.16, 1, .3, 1),
              opacity 140ms ease;
}
.nav-item:hover { background: var(--panel-2); color: var(--ink); border: 0; }
.nav-item.active { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.nav-item .count {
  margin-left: auto; font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; font-weight: 500;
}
/* Empty counts render an empty <span>, which still eats the `margin-left: auto` and
   shoves the label. Nothing to show means nothing in the box. */
.nav-item .count:empty { display: none; }
.nav-item.active .count { color: var(--accent-ink); opacity: .75; }

.nav-sep {
  font-size: var(--t-2xs); letter-spacing: .11em; text-transform: uppercase; font-weight: 650;
  color: var(--ink-3); padding: 16px 12px 8px; white-space: nowrap;
}
:root.rail-collapsed .nav-sep { display: none; }
:root.rail-collapsed #nav { display: flex; flex-direction: column; gap: 3px; }

.side-foot { margin-top: auto; padding-top: 12px; }
.health { display: flex; flex-direction: column; gap: 5px; padding: 0 12px 12px; }
.health .row { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--ink-3); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--danger); }
.dot.warn { background: var(--warn); }

.me {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 8px 2px; border-top: 1px solid var(--line);
}
.me .who { min-width: 0; flex: 1; }
.me .who b { display: block; font-size: var(--t-sm); font-weight: 600;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .who span { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.me a.out { color: var(--ink-3); display: grid; place-items: center; width: 28px; height: 28px;
            border-radius: 7px; }
.me a.out svg { width: 15px; height: 15px; }
.me a.out:hover { background: var(--panel-2); color: var(--danger); }

/* ------------------------------------------------------------ collapsed rail */
/* Icons only, at 72px. Everything that carries text either folds its label away or
   keeps the label as a native `title`, so nothing in the rail becomes unreachable -
   the counts in particular are data the expanded rail shows and the folded one must
   not silently drop. */

.sidebar { transition: padding 240ms cubic-bezier(.16, 1, .3, 1); }
:root.rail-collapsed .sidebar { padding: 20px 8px 16px; }

/* Head stacks: mark above the toggle, both centred. */
:root.rail-collapsed .brand {
  flex-direction: column; gap: 12px; padding: 4px 0 20px;
}
/* A wordmark cannot read at 72px, so the folded rail shows the bar block instead. */
:root.rail-collapsed .brand-tfg,
:root.rail-collapsed .brand-voice { display: none; }
:root.rail-collapsed .brand-tfg-mark { display: block; height: 24px; }
:root.rail-collapsed .side-toggle { margin-left: 0; }

/* Items centre on their icon; the label folds to nothing rather than wrapping. */
:root.rail-collapsed .nav-item { justify-content: center; padding: 8px 0; }
:root.rail-collapsed .nav-item > span:not(.count) { max-width: 0; opacity: 0; }

/* A count cannot sit beside a centred icon at 72px, and dropping it would lose the
   only unread-style signal the rail has. It becomes a badge on the icon's corner. */
.nav-item { position: relative; }
:root.rail-collapsed .nav-item .count {
  position: absolute; top: 1px; right: 7px; margin-left: 0;
  min-width: 14px; padding: 0 3px; height: 14px; line-height: 14px;
  text-align: center; font-size: var(--t-2xs); font-weight: 650;
  border-radius: 7px; background: var(--accent-bg); color: var(--accent-ink);
  /* A ring in the rail's own colour, so the badge punches out of the icon instead of
     tangling with it. At 72px the badge has to sit ON the glyph - there is no clear
     space beside a centred 17px icon - so it has to read as deliberately on top. */
  box-shadow: 0 0 0 2px var(--panel);
}
:root.rail-collapsed .nav-item.active .count { opacity: 1; }

/* Health: the dots are the signal, the words are the explanation. Keep the dots,
   centre them, and move the words onto a `title` in app.js. */
:root.rail-collapsed .health { padding: 0 0 12px; align-items: center; gap: 8px; }
:root.rail-collapsed .health .row > span:not(.dot) { display: none; }

/* Identity: the avatar identifies, the address explains. Sign-out drops below it
   rather than disappearing - it is the one thing here that must stay clickable. */
:root.rail-collapsed .me {
  flex-direction: column; gap: 8px; padding: 12px 0 2px;
}
:root.rail-collapsed .me .who { display: none; }

/* =================================================================== page head */

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}
.page-head h1 { font-size: var(--t-3xl); font-weight: 680; letter-spacing: -.025em; margin: 0 0 6px; }
.page-head p { margin: 0; color: var(--ink-2); max-width: 68ch; font-size: var(--t-md); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.crumbs { display: flex; align-items: center; gap: 8px; font-size: var(--t-base);
          color: var(--ink-3); margin-bottom: 16px; flex-wrap: wrap; }
.crumbs button { border: 0; background: none; box-shadow: none; padding: 0; font-size: var(--t-base);
                 color: var(--ink-3); cursor: pointer; font-family: var(--sans); font-weight: 500; }
.crumbs button:hover { color: var(--accent-ink); background: none; border: 0; }
.crumbs svg { width: 14px; height: 14px; opacity: .55; }
.crumbs b { color: var(--ink); font-weight: 650; }

/* =================================================================== controls */

a.btn { text-decoration: none; }
button, .btn {
  font-family: var(--sans); font-size: var(--t-base); font-weight: 550;
  padding: 10px 18px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow); white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
button svg, .btn svg { width: 16px; height: 16px; flex: none; }
button:hover, .btn:hover { background: var(--panel-2); border-color: #DCE0E8; }
:root[data-theme="dark"] button:hover { border-color: var(--ink-3); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:disabled:hover { background: var(--panel); border-color: var(--line); }

button.primary, .btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  font-weight: 600; box-shadow: 0 1px 2px rgba(79, 70, 229, .28);
}
button.primary:hover, .btn.primary:hover {
  background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent);
}
button.tint {
  background: var(--accent-bg); border-color: transparent; color: var(--accent-ink);
  font-weight: 600; box-shadow: none;
}
button.tint:hover { background: var(--accent-line); border-color: transparent; }
button.done {
  background: var(--ok-bg); border-color: transparent; color: var(--ok);
  font-weight: 600; box-shadow: none;
}
button.done:hover { background: var(--ok-bg); border-color: transparent; }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
button.danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
button.solid-danger { background: var(--danger); border-color: var(--danger); color: #FFF; }
button.solid-danger:hover { background: #DC2626; border-color: #DC2626; color: #FFF; }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; }
button.ghost:hover { background: var(--panel-2); border-color: transparent; }
button.sm, .btn.sm { padding: 8px 14px; font-size: var(--t-base); }
button.xs { padding: 4px 8px; font-size: var(--t-xs); }
button.icon { padding: 0; width: 34px; height: 34px; }
button.icon.ghost { color: var(--ink-3); }
button.icon.ghost:hover { color: var(--ink); }
button.kebab { width: 28px; height: 28px; padding: 0; border: 0; background: none;
               box-shadow: none; color: var(--ink-3); }
button.kebab:hover { background: var(--panel-2); color: var(--ink); border: 0; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

input, select, textarea {
  font-family: var(--sans); font-size: var(--t-base); width: 100%;
  padding: 10px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type="range"], input[type="checkbox"], input[type="radio"], input[type="file"] {
  padding: 0; width: auto;
}
input[type="file"] { width: 100%; font-size: var(--t-sm); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent);
  width: 15px; height: 15px; }
textarea { resize: vertical; min-height: 78px; line-height: 1.55; }
input.mono, textarea.mono, select.mono { font-family: var(--mono); font-size: var(--t-sm); }
label { display: block; font-size: var(--t-sm); font-weight: 550; color: var(--ink-2); margin-bottom: 8px; }
.hint { font-size: var(--t-base); color: var(--ink-3); margin-top: 8px; line-height: 1.5; }
.hint.warn { color: var(--warn); }
.hint code, .sub code, p code, li code, .banner code {
  font-family: var(--mono); font-size: .9em; background: var(--panel-2);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px;
}

.field { margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }
.muted { color: var(--ink-3); }

.switch { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 0; }
.switch input { margin: 0; }
.switch span { font-size: var(--t-base); color: var(--ink); font-weight: 400; }

.search { position: relative; flex: 1; min-width: 170px; max-width: 440px; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
              width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.search input { padding-left: 36px; background: var(--panel-2); }
.search input:focus { background: var(--panel); }

/* =================================================================== cards */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px 28px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card.flat { padding: 0; overflow: hidden; }
.card > h2 { font-size: var(--t-lg); font-weight: 650; letter-spacing: -.02em; margin: 0 0 3px; }
.card > .sub { color: var(--ink-2); font-size: var(--t-md); margin: 0 0 16px; max-width: 68ch; }
.card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.card-head h2 { margin: 0 0 4px; font-size: var(--t-lg); font-weight: 650; letter-spacing: -.02em; }
.card-head .sub { margin: 0; color: var(--ink-2); font-size: var(--t-md); }
.card-head .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.list { display: flex; flex-direction: column; gap: 16px; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 16px; display: flex; align-items: center; gap: 16px;
  cursor: pointer; box-shadow: var(--shadow); text-align: left; width: 100%;
  transition: box-shadow .14s ease, border-color .14s ease;
}
.tile:hover { box-shadow: var(--shadow-md); border-color: var(--accent-line);
              background: var(--panel); }
.tile .title { font-weight: 620; font-size: var(--t-md); letter-spacing: -.01em; }
.tile .meta { font-size: var(--t-sm); color: var(--ink-3); }

/* =================================================================== stats */

.stats { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
         margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
        padding: 22px 24px; box-shadow: var(--shadow); }
.stat .k { font-size: var(--t-base); color: var(--ink-2); font-weight: 500; }
.stat .foot { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.stat .v { font-size: var(--t-4xl); font-weight: 700; letter-spacing: -.04em;
           font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .note { font-size: var(--t-sm); color: var(--ink-3); margin-left: auto; text-align: right; }

/* A movement is coloured text with an arrow, not a filled chip. The chip version reads
   as a status badge and competes with the number it is annotating. */
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-sm);
         font-weight: 600; color: var(--ink-3); margin-left: auto;
         font-variant-numeric: tabular-nums; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }

/* =================================================================== pills */

.pill {
  font-size: var(--t-xs); font-weight: 600; padding: 3px 8px; border-radius: 999px;
  background: var(--panel-2); color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-soft);
}
.pill.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pill.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.pill.accent { background: var(--accent-bg); color: var(--accent-ink); border-color: transparent; }
.pill.info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.pill .led { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.live .led { animation: led 1.4s ease-in-out infinite; }
@keyframes led { 50% { opacity: .25; } }

.tag { display: inline-block; font-size: var(--t-xs); padding: 2px 8px; margin: 0 4px 4px 0;
       border-radius: 999px; background: var(--accent-bg); color: var(--accent-ink);
       font-weight: 550; }
.tag.plain { background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); }

/* =================================================================== avatars */

/* The profile artefact. A soft tinted disc with a monogram, keyed off the name, so the
   same agent is the same colour on every screen and a new one never collides by
   accident. The reference uses illustrated portraits; a monogram is the honest stand-in
   - it identifies without implying a photograph of a person who does not exist. */
.avatar {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 680; font-size: var(--t-md); letter-spacing: -.02em; flex: none;
  position: relative; overflow: hidden;
}
.avatar.sq { border-radius: 13px; }
.avatar.sm { width: 36px; height: 36px; font-size: var(--t-sm); }
.avatar.xs { width: 26px; height: 26px; font-size: var(--t-2xs); }
.avatar.lg { width: 72px; height: 72px; font-size: var(--t-2xl); }
.avatar .ini { position: relative; z-index: 1; }

/* =================================================================== tables */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r);
              background: var(--panel); box-shadow: var(--shadow); }
.card .table-wrap { border: 0; border-radius: 0; box-shadow: none; }
table { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--panel); }
caption { text-align: left; padding: 16px 20px 2px; font-size: var(--t-md); font-weight: 650;
          letter-spacing: -.02em; }
th { text-align: left; font-size: var(--t-xs); color: var(--ink-3); font-weight: 500;
     padding: 12px 20px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th .sort { opacity: .5; font-size: var(--t-2xs); }
td { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2);
     font-size: var(--t-base); }
td b, td strong { color: var(--ink); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-2); }
td.mono, th.mono { font-family: var(--mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 650; color: var(--ink); border-top: 1px solid var(--line); }
td .link { color: var(--accent-ink); cursor: pointer; font-weight: 550; }
td .link:hover { text-decoration: underline; }
th.pick, td.pick { width: 18px; padding-right: 0; }
a.more { color: var(--accent-ink); font-weight: 600; font-size: var(--t-sm); text-decoration: none;
         cursor: pointer; display: inline-block; margin-top: 16px; }
a.more:hover { text-decoration: underline; }

/* An outcome reads as a coloured dot plus its word, never the colour alone. */
.state { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.state .led { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.state.ok .led { background: var(--ok); }
.state.warn .led { background: var(--warn); }
.state.bad .led { background: var(--danger); }
.state.accent .led { background: var(--accent); }
.state.info .led { background: var(--info); }

.pager { display: flex; align-items: center; gap: 8px; justify-content: center;
         margin-top: 20px; flex-wrap: wrap; }
.pager button { min-width: 34px; height: 34px; padding: 0 8px; font-size: var(--t-sm); }
.pager button.on { border-color: var(--accent); color: var(--accent-ink); font-weight: 650;
                   background: var(--panel); }
.pager .gap { color: var(--ink-3); padding: 0 2px; }
.pager .of { font-size: var(--t-sm); color: var(--ink-3); margin-right: auto; }

/* =================================================================== tabs & chips */

.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
        flex-wrap: wrap; }
.tab { padding: 12px 16px; border: 0; background: none; color: var(--ink-3);
       border-bottom: 2px solid transparent; border-radius: 0; font-size: var(--t-base);
       box-shadow: none; font-weight: 550; margin-bottom: -1px; }
.tab:hover { color: var(--ink); background: none; border-color: transparent;
             border-bottom-color: transparent; }
.tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 650; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 12px; font-size: var(--t-sm); background: var(--panel);
        border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px;
        box-shadow: var(--shadow); font-weight: 550; }
.chip:hover { background: var(--panel-2); border-color: #DCE0E8; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent);
           font-weight: 600; }
.chip .n { opacity: .7; font-variant-numeric: tabular-nums; }

.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line);
       border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; box-shadow: none; padding: 5px 12px;
              font-size: var(--t-sm); color: var(--ink-2); border-radius: 6px; }
.seg button:hover { background: var(--panel); border: 0; }
.seg button.on { background: var(--panel); color: var(--ink); font-weight: 620;
                 box-shadow: var(--shadow); }

/* =================================================================== record rows */

/* Agents and campaigns are the same object at different scales: an artefact, a name and
   some state, then three figures and an overflow menu. One component, used twice. */
.rec {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 120px) 32px;
  gap: 20px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 24px; box-shadow: var(--shadow); cursor: pointer; width: 100%;
  text-align: left; transition: box-shadow .14s ease, border-color .14s ease;
}
.rec:hover { box-shadow: var(--shadow-md); border-color: var(--accent-line);
             background: var(--panel); }
.rec-id { display: flex; align-items: center; gap: 20px; min-width: 0; }
.rec-id .nm { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: var(--t-lg);
              letter-spacing: -.015em; flex-wrap: wrap; }
.rec-id .sub { font-size: var(--t-sm); color: var(--ink-3); margin-top: 3px; }
.rec-id dl { margin: 8px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
             gap: 2px 12px; font-size: var(--t-xs); }
.rec-id dt { color: var(--ink-3); }
.rec-id dd { margin: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.metric { text-align: left; }
.metric b { display: block; font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.03em;
            font-variant-numeric: tabular-nums; }
.metric span { display: block; font-size: var(--t-sm); color: var(--ink-3); margin-top: 1px; }
@media (max-width: 940px) {
  .rec { grid-template-columns: repeat(3, 1fr); }
  .rec-id { grid-column: 1 / -1; }
  /* Decorative kebabs fold away on a narrow row; a real one is the only route to that
     record's actions, so it stays - lifted out of the grid and pinned to the corner,
     because as a grid item it claims a whole line to itself. */
  .rec > span.kebab { display: none; }
  .rec { position: relative; }
  .rec > button.kebab { position: absolute; top: 9px; right: 9px; }
}

/* =================================================================== charts */

.chart { width: 100%; display: block; overflow: visible; }
.chart .gridline { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--ink-3); font-size: var(--t-2xs); font-family: var(--sans); }
.chart .l1 { stroke: var(--accent); stroke-width: 2.2; fill: none;
             stroke-linecap: round; stroke-linejoin: round; }
.chart .l2 { stroke: var(--cool); stroke-width: 2; fill: none; stroke-dasharray: 4 5;
             stroke-linecap: round; stroke-linejoin: round; }
.chart .d1 { fill: var(--accent); }
.chart .d2 { fill: var(--cool); }
.chart .barfill { fill: url(#g-bar); }
.chart .hit { fill: transparent; cursor: pointer; }
.chart-legend { display: flex; gap: 20px; align-items: center; font-size: var(--t-sm);
                color: var(--ink-2); }
.chart-legend .k { display: flex; align-items: center; gap: 8px; }
.chart-legend .sw { width: 8px; height: 8px; border-radius: 50%; }

.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut { flex: none; position: relative; }
.donut .mid { position: absolute; inset: 0; display: grid; place-content: center;
              text-align: center; }
.donut .mid b { display: block; font-size: var(--t-2xl); font-weight: 680; letter-spacing: -.03em;
                font-variant-numeric: tabular-nums; }
.donut .mid span { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.donut path { transition: opacity .12s ease; }
.donut path:hover { opacity: .82; }

.keys { display: flex; flex-direction: column; gap: 12px; min-width: 168px; flex: 1; }
.keys .k { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); }
.keys .k .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.keys .k .p { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink);
              font-weight: 600; }

.ranks { display: flex; flex-direction: column; gap: 16px; }
.rank { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 12px; align-items: center; font-size: var(--t-base); }
.rank .ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
             background: var(--accent-bg); color: var(--accent-ink); flex: none; }
.rank .ico svg { width: 14px; height: 14px; }
.rank .nm { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; }
.rank .vl { font-weight: 650; font-variant-numeric: tabular-nums; }

/* The overview: a wide chart beside a narrow rank list, then a wide table beside the
   donut. Collapses to one column before the chart gets too narrow to read. */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 1140px) { .ov-grid { grid-template-columns: 1fr; } }

/* =================================================================== diagrams */

/* A flowchart is wide and fixed-aspect. Let it scroll inside its own box rather than
   squashing the type, which is the failure mode of scaling an SVG to a narrow column. */
.flow-wrap { overflow-x: auto; padding: 4px 0 2px; }
.flow { display: block; max-width: 100%; height: auto; font-family: var(--sans); }
.flow text { font-family: var(--sans); }

/* =================================================================== live call */

.call-shell { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 16px;
              align-items: start; }
@media (max-width: 940px) { .call-shell { grid-template-columns: 1fr; } }

.stage {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 36px 24px 28px; box-shadow: var(--shadow); text-align: center;
  position: relative; overflow: hidden;
}

/* The ring is three stacked layers: a blurred colour bloom that reads as glow, a conic
   gradient clipped to a thin annulus, and a plain disc so the middle stays panel-white
   rather than a washed-out gradient centre. Measured off the reference: the hole sits
   at 87% of the radius, which makes the band about an eighth of it - a hair, not a
   donut. Static, because that is how the reference reads; the only motion is a slow
   breath while a call is actually up. */
.ring { position: relative; width: 208px; height: 208px; margin: 0 auto 24px;
        transition: transform .1s ease-out; }
.ring .bloom {
  position: absolute; inset: -14px; border-radius: 50%;
  background: conic-gradient(#4A7BFC 0deg, #4DCDFC 90deg, rgba(140,190,255,.25) 175deg,
                             rgba(120,140,250,.30) 205deg, #4566FC 275deg, #4A7BFC 360deg);
  filter: blur(17px); opacity: .5;
}
.ring .band {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#4A7BFC 0deg, #4DCDFC 90deg, rgba(150,195,255,.30) 175deg,
                             rgba(125,145,250,.35) 205deg, #4566FC 275deg, #4A7BFC 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 86.5%, #000 87.5%);
  mask: radial-gradient(circle, transparent 0 86.5%, #000 87.5%);
}
.ring .core {
  position: absolute; inset: 13px; border-radius: 50%;
  background: linear-gradient(170deg, #FFFFFF, #F4F6FB);
  box-shadow: inset 0 -8px 22px rgba(16, 24, 40, .05);
  display: grid; place-items: center;
}
:root[data-theme="dark"] .ring .core {
  background: linear-gradient(170deg, #1B242C, #131B21);
  box-shadow: inset 0 -8px 22px rgba(0, 0, 0, .5);
}
.ring .core .initials { font-size: var(--t-5xl); font-weight: 680; letter-spacing: -.04em;
                        color: var(--ink); }
.ring .core .initials.small { font-size: var(--t-2xl); letter-spacing: -.02em; }
.ring.live { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.018); } }
@media (prefers-reduced-motion: reduce) { .ring.live { animation: none; } }

.stage .nm { font-size: var(--t-lg); font-weight: 650; letter-spacing: -.025em; }
.stage .no { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-3); margin-top: 3px; }

.call-acts { display: flex; justify-content: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.rbtn { display: flex; flex-direction: column; align-items: center; gap: 8px;
        border: 0; background: none; box-shadow: none; padding: 0; width: 62px;
        font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; }
.rbtn i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
          background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
          box-shadow: var(--shadow); transition: all .13s ease; }
.rbtn svg { width: 19px; height: 19px; }
.rbtn:hover { background: none; border: 0; }
.rbtn:hover i { border-color: #D6DAE3; color: var(--ink); }
.rbtn.on i { background: var(--accent-bg); border-color: var(--accent-line);
             color: var(--accent-ink); }
.rbtn.end i { background: var(--danger); border-color: var(--danger); color: #FFF;
              box-shadow: 0 4px 12px -3px rgba(239, 68, 68, .5); }
.rbtn.end:hover i { background: #DC2626; border-color: #DC2626; }
.rbtn:disabled { opacity: .4; }
.rbtn:disabled:hover i { border-color: var(--line); color: var(--ink-2); }

.timer { font-family: var(--mono); font-size: var(--t-lg); font-weight: 500; color: var(--ink);
         font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* The contact panel: a stack of labelled facts with hairline rules between groups. */
.facts { display: flex; flex-direction: column; }
.facts .grp { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.facts .grp:first-child { padding-top: 0; }
.facts .grp:last-child { border-bottom: 0; padding-bottom: 0; }
.facts h3 { margin: 0 0 12px; font-size: var(--t-base); font-weight: 650; letter-spacing: -.015em; }
.facts .f { margin-bottom: 12px; }
.facts .f:last-child { margin-bottom: 0; }
.facts .f dt { font-size: var(--t-xs); color: var(--ink-3); margin-bottom: 2px; }
.facts .f dd { margin: 0; font-size: var(--t-base); color: var(--ink); overflow-wrap: anywhere; }
.facts .f dd.mono { font-family: var(--mono); font-size: var(--t-sm); }

/* =================================================================== transcript */

.transcript { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
              height: 480px; overflow-y: auto; padding: 16px; display: flex;
              flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.transcript.tall { height: 520px; }
.turn { background: var(--panel-2); border-radius: 10px; padding: 12px 12px; }
.turn .who { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.turn .who .avatar { width: 17px; height: 17px; font-size: var(--t-2xs); }
.turn .who b { font-size: var(--t-sm); font-weight: 650; color: var(--accent-ink); }
.turn .who .at { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3); }
.turn .body { font-size: var(--t-base); line-height: 1.55; color: var(--ink-2); }
.turn.user .who b { color: var(--ink); }
.turn[dir="rtl"] { direction: rtl; }
.turn[dir="rtl"] .body { text-align: right; }

/* =================================================================== integrations */

.integ { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
         padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column;
         gap: 16px; text-align: left; align-items: stretch;
         transition: box-shadow .14s ease, border-color .14s ease; }
.integ:hover { box-shadow: var(--shadow-md); border-color: var(--accent-line);
               background: var(--panel); }
.integ .top { display: flex; gap: 12px; align-items: center; }
.integ .logo { width: 36px; height: 36px; flex: none; display: grid; place-items: center;
               border-radius: 9px; overflow: hidden; }
.integ .logo img { width: 36px; height: 36px; object-fit: contain; display: block; }
.integ .logo.letter { font-weight: 700; font-size: var(--t-md); color: #FFF; letter-spacing: -.02em; }
.integ .nm { font-weight: 650; font-size: var(--t-base); letter-spacing: -.01em; }
.integ .cat { font-size: var(--t-xs); color: var(--ink-3); margin-top: 1px; }
.integ .why { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; flex: 1; }
.integ .act { display: flex; }
.integ .act button { min-width: 116px; }

/* =================================================================== knowledge */

.doc { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto 28px;
       gap: 16px; align-items: center; padding: 16px 20px;
       border-bottom: 1px solid var(--line-soft); }
.doc:last-child { border-bottom: 0; }
.doc:hover { background: var(--panel-2); }
.doc .ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
            background: var(--panel-2); color: var(--ink-3); border: 1px solid var(--line); }
.doc .ico svg { width: 17px; height: 17px; }
.doc .nm { font-weight: 620; font-size: var(--t-base); letter-spacing: -.01em; }
.doc .meta { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }
.doc .sz { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 780px) { .doc { grid-template-columns: 36px 1fr auto; }
                            .doc .sz { display: none; } }

.drop { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 28px;
        text-align: center; color: var(--ink-3); font-size: var(--t-base); background: var(--panel-2); }
.drop.over { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink); }
.drop b { color: var(--ink); }

/* =================================================================== flow studio */

/* The Builder tab: a canvas of steps with the branches drawn between them, an inspector
   for the selected step, a dry run, and the paths real calls took. Step families keep a
   fixed tint so the shape of a script is legible before the text is read: speech blue,
   questions cyan, branching grey, side effects amber, endings red. */
.node-type { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
             flex: none; }
.node-type svg { width: 14px; height: 14px; }
.t-say { background: #E8F0FE; color: #2563EB; }
.t-ask { background: #E3F6FD; color: #0891B2; }
.t-decide { background: #EEF0F4; color: #64748B; }
.t-tool { background: #FDF1E3; color: #C2410C; }
.t-handoff, .t-transfer { background: var(--accent-bg); color: var(--accent-ink); }
.t-hangup { background: #FEECEC; color: #DC2626; }
:root[data-theme="dark"] .t-say { background: #10233F; color: #7EB0F5; }
:root[data-theme="dark"] .t-ask { background: #0B2A33; color: #4FC7E0; }
:root[data-theme="dark"] .t-decide { background: #202A33; color: #9BABB8; }
:root[data-theme="dark"] .t-tool { background: #2E2011; color: #E8A45B; }
:root[data-theme="dark"] .t-hangup { background: #2E1917; color: #EC7F76; }

.edge { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.edge .arrow { color: var(--ink-3); flex: none; }

.studio { display: flex; flex-direction: column; gap: 12px; }
.studio-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.studio-main { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px;
               height: clamp(520px, calc(100vh - 340px), 900px); min-height: 0; }
@media (max-width: 1100px) {
  .studio-main { grid-template-columns: 1fr; height: auto; }
  .studio-canvas { height: 520px; }
  .studio-side { max-height: 60vh; }
}
.studio-canvas { position: relative; overflow: hidden; border: 1px solid var(--line);
                 border-radius: var(--r); background: var(--panel-2);
                 background-image: radial-gradient(var(--line) 1.1px, transparent 1.1px);
                 background-size: 18px 18px; cursor: grab; outline: none; touch-action: none; }
.studio-canvas:focus-visible { box-shadow: 0 0 0 3px var(--accent-line); }
.studio-canvas.panning { cursor: grabbing; }
.studio-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.studio-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible;
                pointer-events: none; }
.studio-edges path { fill: none; stroke: var(--ink-3); stroke-width: 1.6; }
.studio-edges path.then { stroke-dasharray: 5 5; }
.studio-edges path.from-selected { stroke: var(--accent); }
.studio-edges path.on-path { stroke: var(--cool); stroke-width: 2.6; }
.studio-edges path.temp { stroke: var(--accent); stroke-dasharray: 4 4; }
.studio-edges .arrow { fill: var(--ink-3); }
.studio-edges .arrow.on { fill: var(--cool); }
.sedge-label { position: absolute; transform: translate(-50%, -50%); font-size: var(--t-xs);
               background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
               padding: 2px 9px; cursor: pointer; white-space: nowrap; max-width: 190px;
               display: flex; gap: 6px; align-items: center; color: var(--ink-2); }
.sedge-label span { overflow: hidden; text-overflow: ellipsis; }
.sedge-label b { color: var(--accent-ink); }
.sedge-label.next { color: var(--ink-3); font-style: italic; }
.sedge-label.on-path { border-color: var(--cool); color: var(--ink); }
.sedge-label:hover { border-color: var(--accent); color: var(--ink); }

.snode { position: absolute; width: 236px; background: var(--panel); border: 1px solid var(--line);
         border-radius: 12px; box-shadow: var(--shadow-md); padding: 10px 12px; cursor: grab;
         user-select: none; box-sizing: border-box; }
.snode:hover { border-color: color-mix(in srgb, var(--ink-3) 50%, var(--line)); }
.snode.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line), var(--shadow-md); }
.snode.on-path { border-color: var(--cool); }
.snode.current { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cool) 35%, transparent), var(--shadow-md); }
.snode.has-error { border-color: var(--danger); }
.snode.drop-target { border-color: var(--accent); background: var(--accent-bg); }
.snode-head { display: flex; align-items: center; gap: 8px; }
.snode-id { font-family: var(--mono); font-size: var(--t-sm); font-weight: 600; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.snode-flag { font-size: var(--t-2xs); font-weight: 650; border-radius: 999px; padding: 1px 7px; flex: none; }
.snode-flag.bad { background: var(--danger-bg); color: var(--danger); }
.snode-flag.warn { background: var(--warn-bg); color: var(--warn); }
.snode-body { margin-top: 8px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4;
              display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
              overflow-wrap: anywhere; }
.snode-foot { margin-top: 8px; display: flex; gap: 8px; align-items: center; font-size: var(--t-2xs);
              text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.snode-foot .mono { text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.snode-stat { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.snode-stat b { color: var(--danger); }
.snode .port { position: absolute; right: -8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
               border-radius: 50%; background: var(--accent); border: 2px solid var(--panel);
               cursor: crosshair; opacity: .35; transition: opacity .15s, transform .15s; }
.snode:hover .port, .snode.selected .port { opacity: 1; }
.snode .port:hover { transform: scale(1.3); }
.studio-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 4px;
               background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.studio-anywhere { position: absolute; left: 12px; top: 12px; max-width: 60%; }
.studio-anywhere button { white-space: normal; text-align: left; }
.studio-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
                color: var(--ink-2); padding: 24px; }
.studio-empty[hidden] { display: none; }    /* display:grid above would beat the hidden attribute */
.studio-empty b { display: block; color: var(--ink); font-size: var(--t-lg); margin-bottom: 6px; }

.studio-side { overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r);
               background: var(--panel); padding: 16px; min-height: 0; }
.studio-side h3 { margin: 0 0 6px; font-size: var(--t-lg); }
.studio-side h4 { margin: 18px 0 6px; font-size: var(--t-2xs); text-transform: uppercase;
                  letter-spacing: .06em; color: var(--ink-3); }
.studio-side-head { display: flex; align-items: center; gap: 8px; }
.studio-side-head input { flex: 1; min-width: 0; }
.studio-side-head select { max-width: 130px; }
.studio-side .field { margin-bottom: 12px; }
.studio .edge.srow input, .studio .edge.srow select { min-width: 0; }
.studio .edge.srow input:first-child { flex: 2; }
.studio .edge.srow select { flex: 1; max-width: 150px; }
.studio .chip { cursor: pointer; }
.studio .chip input { display: none; }
.studio .chip.on { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-ink); }
.studio-help { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
               padding: 8px 12px; font-size: var(--t-sm); color: var(--ink-2); }
.studio-help summary { cursor: pointer; color: var(--ink); font-weight: 550; }
.studio-help p { margin: 8px 0; }
.studio-help pre.code { margin: 8px 0; white-space: pre-wrap; max-height: 320px; overflow: auto; }
.studio-tpl { display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 12px 14px; }
.studio-tpl b { display: block; margin-bottom: 3px; }
.studio-tpl span { font-size: var(--t-sm); color: var(--ink-2); font-weight: 400; white-space: normal; }
.studio-steplist { display: flex; flex-direction: column; gap: 4px; }
.studio-steplist button { display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 8px; }
.studio-steplist .node-type { width: 22px; height: 22px; }

.studio-drawer { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.studio-drawer-tabs { display: flex; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid var(--line); }
.studio-drawer-tabs button { border: 0; background: none; padding: 8px 12px; color: var(--ink-3);
                             border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; }
.studio-drawer-tabs button.active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 650; }
.studio-drawer-tabs button.bad:not(.active) { color: var(--danger); }
.studio-drawer-body { padding: 12px 14px; max-height: 280px; overflow-y: auto; }
.studio-problems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
                   font-size: var(--t-sm); }
.studio-problems li { display: flex; align-items: baseline; gap: 8px; }
.studio-problems .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none;
                        position: relative; top: -1px; }
.studio-problems li.error .dot { background: var(--danger); }
.studio .link { background: none; border: 0; padding: 0; color: var(--accent-ink); font-weight: 550;
                cursor: pointer; font-family: var(--mono); font-size: inherit; box-shadow: none; }
.studio-calls { display: flex; flex-direction: column; gap: 4px; }
.studio-call { display: grid; grid-template-columns: 150px 1fr auto auto auto; gap: 12px; align-items: center;
               padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--t-sm); }
.studio-call:hover { background: var(--panel-2); }
.studio-call.on { background: var(--accent-bg); }

.studio-menu { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line);
               border-radius: var(--r); box-shadow: var(--shadow-md); padding: 6px; min-width: 240px;
               max-width: 340px; }
.studio-menu button { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: center;
                      width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px;
                      border-radius: var(--r-sm); box-shadow: none; }
.studio-menu button:hover:not(:disabled) { background: var(--panel-2); }
.studio-menu button svg { width: 14px; height: 14px; color: var(--ink-3); }
.studio-menu button small { grid-column: 2; display: block; color: var(--ink-3); font-size: var(--t-xs);
                            white-space: normal; font-weight: 400; }
.studio-menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }

.wl-log { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; max-height: 38vh;
          overflow-y: auto; padding-right: 4px; }
.wl { font-size: var(--t-sm); line-height: 1.45; }
.wl.agent { background: var(--accent-bg); color: var(--ink); border-radius: 12px 12px 12px 4px;
            padding: 8px 12px; max-width: 92%; }
.wl.agent small { display: block; color: var(--ink-3); font-size: var(--t-2xs); margin-top: 3px; }
.wl.caller { background: var(--panel-2); border-radius: 12px 12px 4px 12px; padding: 8px 12px;
             align-self: flex-end; max-width: 92%; color: var(--ink-2); }
.wl.step { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.wl.step .node-type { width: 20px; height: 20px; flex: none; }
.wl.step b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.wl.end { color: var(--ink); font-weight: 550; display: flex; gap: 6px; align-items: center; padding: 6px 0; }
.wl.end svg, .wl.bad svg { width: 14px; height: 14px; }
.wl.bad { color: var(--danger); display: flex; gap: 6px; align-items: center; }
.wl-stop { border-top: 1px solid var(--line); padding-top: 12px; }
.wl-vars { display: flex; flex-direction: column; gap: 6px; }
.wl-vars > div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: center; }
.wl-branches { display: flex; flex-direction: column; gap: 6px; }
.wl-branches button { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.wl-branches button span { font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; white-space: normal; }
.wl-branches button.anywhere { border-style: dashed; }

/* The path a call took, on its record. */
.path-chain { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.path-chain code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.path-chain code.forced { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.path-chain .arrow { color: var(--ink-3); }

/* =================================================================== leads */

.leads-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 24px; }
@media (max-width: 980px) { .leads-layout { grid-template-columns: 1fr; } }

.group-rail { display: flex; flex-direction: column; gap: 2px; align-content: start; }
.group-rail .hd { font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase;
                  color: var(--ink-3); font-weight: 600; padding: 4px 12px 8px; }
.grp { display: flex; justify-content: space-between; align-items: center; gap: 8px;
       width: 100%; text-align: left; background: transparent; border: 1px solid transparent;
       padding: 8px 12px; font-size: var(--t-sm); color: var(--ink-2); border-radius: var(--r-sm);
       box-shadow: none; font-weight: 500; }
.grp:hover { background: var(--panel-2); color: var(--ink); border-color: transparent; }
.grp.on { background: var(--accent-bg); color: var(--accent-ink); font-weight: 620;
          border-color: transparent; }
.grp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-count { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.grp.on .grp-count { color: var(--accent-ink); }
.grp-count em { font-style: normal; opacity: .65; }

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sel-actions { display: flex; gap: 8px; align-items: center; }
/* A class that sets `display` outranks the UA rule for [hidden], so it must be spelled
   out or the attribute silently stops working. */
.sel-actions[hidden] { display: none; }
.sel-count { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* A cleared lead is marked three ways at once - a word, a colour and a stripe - because
   colour alone is not a signal every reader receives, and this row means "do not call". */
tr.cleared td { color: var(--ink-3); }
tr.cleared td:first-child { box-shadow: inset 2px 0 0 var(--warn); }
.cleared-flag { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .05em;
                font-weight: 700; background: var(--warn-bg); color: var(--warn);
                padding: 2px 8px; border-radius: 4px; }

.pickers { display: flex; flex-wrap: wrap; gap: 8px; }
.picker { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: var(--t-sm);
          border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
          background: var(--panel); margin-bottom: 0; font-weight: 500; color: var(--ink-2); }
.picker:has(input:checked) { border-color: var(--accent); background: var(--accent-bg);
                             color: var(--accent-ink); }
.picker b { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.picker input { margin: 0; }

/* =================================================================== misc */

.banner { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px;
          margin-bottom: 16px; font-size: var(--t-base); color: var(--ink-2); display: flex;
          gap: 12px; align-items: flex-start; background: var(--panel); }
.banner.warn { background: var(--warn-bg); border-color: transparent; color: var(--ink); }
.banner.bad { background: var(--danger-bg); border-color: transparent; color: var(--ink); }
.banner.ok { background: var(--ok-bg); border-color: transparent; color: var(--ink); }
.banner b { color: var(--ink); }
.banner ul { margin: 8px 0 0; padding-left: 20px; }
.banner li { margin: 3px 0; }

.empty { border: 1px dashed var(--line); border-radius: var(--r); padding: 48px 24px;
         text-align: center; color: var(--ink-3); font-size: var(--t-base); background: var(--panel); }
.empty b { display: block; color: var(--ink); font-size: var(--t-md); margin-bottom: 8px;
           letter-spacing: -.02em; }
.empty .row { justify-content: center; margin-top: 16px; }

pre.code { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
           padding: 16px 16px; overflow-x: auto; font-family: var(--mono); font-size: var(--t-sm);
           line-height: 1.55; color: var(--ink-2); white-space: pre-wrap;
           word-break: break-word; max-height: 380px; overflow-y: auto; }

.field-row { display: grid; grid-template-columns: 1fr 1.4fr 120px 1fr 34px;
             gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 900px) {
  .field-row { grid-template-columns: 1fr; padding-bottom: 12px;
               border-bottom: 1px solid var(--line-soft); }
  .field-row.hdr { display: none; }   /* column labels make no sense once rows stack */
}

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; background: var(--panel);
         border: 1px solid var(--line); border-left: 3px solid var(--accent);
         border-radius: var(--r-sm); padding: 12px 16px; max-width: 420px; font-size: var(--t-base);
         box-shadow: var(--shadow-lg); color: var(--ink); }
.toast.bad { border-left-color: var(--danger); }
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }

.modal-back { position: fixed; inset: 0; background: rgba(16, 24, 40, .42); z-index: 50;
              display: flex; align-items: center; justify-content: center; padding: 24px;
              backdrop-filter: blur(2px); }
.modal { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-lg);
         width: min(820px, 100%); max-height: 88vh; overflow-y: auto; padding: 32px 36px;
         box-shadow: var(--shadow-lg); }
.modal.wide { width: min(1120px, 100%); }
.modal h3 { margin: 0 0 8px; font-size: var(--t-2xl); font-weight: 680; letter-spacing: -.025em; }
.modal > .sub { color: var(--ink-2); font-size: var(--t-base); margin: 0 0 20px; }

/* =================================================================== cost figures */

.figure { display: flex; flex-direction: column; gap: 16px; }
.figure-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.figure-head .hero { font-size: var(--t-5xl); font-weight: 680; letter-spacing: -.035em; line-height: 1;
                     font-variant-numeric: tabular-nums; }
.figure-head .hero-sub { font-size: var(--t-sm); color: var(--ink-3); font-family: var(--mono); }
.figure-label { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
                color: var(--ink-3); display: flex; justify-content: space-between;
                gap: 12px; font-weight: 600; margin-bottom: 8px; }

/* Stacked bar. Segments are separated by a 2px gap in the surface colour rather than a
   border, so the boundary reads as space and never as an extra colour. */
.bar { display: flex; width: 100%; height: 30px; border-radius: 6px; overflow: hidden;
       background: var(--panel-2); gap: 2px; }
.bar .sg { position: relative; min-width: 2px; display: flex; align-items: center;
           justify-content: center; overflow: hidden; cursor: default;
           transition: filter .12s ease; }
.bar .sg:first-child { border-radius: 6px 0 0 6px; }
.bar .sg:last-child { border-radius: 0 6px 6px 0; }
.bar .sg:hover { filter: brightness(1.1); }
/* Dark ink on every segment, both themes. Computed rather than guessed: against the ten
   palette steps it wins nine, and on the tenth it is 4.29:1 against white's 4.42:1 -
   close enough that one rule beats ten tokens. */
.bar .sg b { font-family: var(--mono); font-size: var(--t-2xs); font-weight: 600;
             color: #06121A; white-space: nowrap; padding: 0 8px; }

.bar-tip { position: fixed; z-index: 70; pointer-events: none; background: var(--panel);
           border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px;
           font-size: var(--t-sm); box-shadow: var(--shadow-lg); max-width: 280px; color: var(--ink); }
.bar-tip .k { color: var(--ink-3); font-size: var(--t-2xs); font-family: var(--mono);
              letter-spacing: .06em; text-transform: uppercase; }
.bar-tip .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legend .item { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend .amt { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.legend .pct { font-family: var(--mono); color: var(--ink-3); font-size: var(--t-xs); }

.kv { display: flex; flex-direction: column; gap: 12px; }
.kv .item, .kv > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-sm); }
.kv .item span:first-child, .kv > div > span { color: var(--ink-3); }
.kv .item span:last-child, .kv > div > b { font-family: var(--mono); text-align: right;
                                           color: var(--ink); font-weight: 500;
                                           overflow-wrap: anywhere; }
.kv > div > b.ok { color: var(--ok); }
.kv > div > b.bad { color: var(--danger); }

.meter { display: flex; align-items: center; gap: 3px; height: 22px; }
.meter i { display: block; width: 3px; background: var(--accent); border-radius: 2px;
           height: 4px; transition: height .08s linear; opacity: .5; }

/* =================================================================== sign in */

.auth-body { background: var(--panel); }
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } }

.auth-pane { display: grid; place-items: center; padding: 40px 32px; background: var(--panel); }
.auth-card { width: 100%; max-width: 372px; }

.lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; }
.lockup-tenra { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.lockup-tenra .tenra-mark { width: 34px; }
.lockup-tenra b { font-size: var(--t-lg); font-weight: 680; letter-spacing: -.04em; }
.lockup-x { color: var(--ink-3); font-size: var(--t-md); }
.lockup-tfg { display: block; height: 25px; width: auto; }
:root[data-theme="dark"] .lockup-tfg { filter: invert(1) brightness(1.7); }

.auth-h1 { font-size: var(--t-4xl); font-weight: 680; letter-spacing: -.04em; margin: 0 0 8px; }
.auth-sub { color: var(--ink-2); font-size: var(--t-base); margin: 0 0 28px; }

.auth-error { background: var(--danger-bg); color: #B42318; border-radius: var(--r-sm);
              padding: 12px 12px; font-size: var(--t-sm); margin-bottom: 20px; font-weight: 500; }
.auth-label { font-size: var(--t-sm); font-weight: 550; color: var(--ink-2); margin: 0 0 8px; }
.auth-input { width: 100%; padding: 12px 12px; font-size: var(--t-md); border-radius: 10px;
              border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
              margin-bottom: 16px; }
.auth-input:focus { background: var(--panel); border-color: var(--accent); }
.auth-reveal { position: relative; }
.auth-eye { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; padding: 0;
            border: 0; background: none; box-shadow: none; color: var(--ink-3);
            border-radius: 8px; }
.auth-eye:hover { background: var(--line-soft); border: 0; color: var(--ink-2); }
.auth-eye.on { color: var(--accent-ink); }
.auth-eye svg { width: 18px; height: 18px; }

.auth-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 24px;
              font-size: var(--t-base); color: var(--ink-2); cursor: pointer; font-weight: 400; }
.auth-check input { width: 16px; height: 16px; }

.auth-submit { width: 100%; padding: 12px; font-size: var(--t-md); font-weight: 650; border-radius: 10px;
               background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.auth-submit:hover { background: var(--accent-strong); border-color: var(--accent-strong);
                     color: var(--on-accent); }
.auth-foot { margin: 32px 0 0; font-size: var(--t-2xs); letter-spacing: .13em; font-weight: 600;
             color: var(--ink-3); }

.auth-art { position: relative; overflow: hidden;
            background: #C9964A url("/static/img/tower.jpg") center/cover no-repeat; }
.auth-art-shade { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,25,0) 42%, rgba(10,14,25,.74) 100%); }
.auth-art-copy { position: absolute; left: 46px; right: 46px; bottom: 44px; color: #FFF; }
.auth-art-kicker { display: block; font-size: var(--t-2xs); letter-spacing: .16em;
                   text-transform: uppercase; font-weight: 600; opacity: .85; margin-bottom: 12px; }
.auth-art-line { margin: 0; font-size: var(--t-3xl); font-weight: 620; letter-spacing: -.03em;
                 line-height: 1.28; max-width: 16ch; text-shadow: 0 2px 20px rgba(0,0,0,.35); }

/* =================================================================== choice cards */

/* Used by the new-agent dialog. A choice a person has to make in order to get anything
   at all - market, mode, voice - is a card they can read, not an option in a select.
   Selects are for the settings you change later; these are the ones you cannot skip. */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel); cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
  min-width: 0;
}
.choice:hover { border-color: var(--accent-line); background: var(--panel-2); }
.choice b { font-size: var(--t-base); font-weight: 620; letter-spacing: -.015em; color: var(--ink); }
.choice span { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }

/* These cards are <button>s, and the base button rule sets white-space: nowrap so a
   label never breaks mid-word. A card carries a sentence rather than a label, so it has
   to opt back out - otherwise the paragraph sizes the card to its own max-content and
   the dialog grows a horizontal scrollbar. align-items: flex-start shrink-wraps every
   child too, hence the stretch. */
.choice { white-space: normal; }
.choice > * { max-width: 100%; }
.choice.tall span { align-self: stretch; }
.choice.tall { padding: 16px 16px; gap: 8px; }
.choice.sm { padding: 8px 12px; }
.choice.sm span { font-size: var(--t-xs); color: var(--ink-3); }

/* Selected state carries the accent on the border and the ground, never on the text:
   the label has to stay as readable selected as it is unselected. */
.choice.on {
  border-color: var(--accent); background: var(--accent-bg);
  box-shadow: 0 0 0 1px var(--accent);
}
.choice.on:hover { background: var(--accent-bg); }

.choice .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.choice .tags i {
  font-style: normal; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; background: var(--panel-2);
  color: var(--ink-2); border: 1px solid var(--line);
}
.choice.on .tags i { background: var(--panel); border-color: var(--accent-line); }

/* One row of controls that belong to a single decision: pick, type, audition. */
.row-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-inline select { flex: 0 1 200px; }
.row-inline input { flex: 1 1 220px; min-width: 0; }

.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
}

/* A short list of actions on one record. */
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; justify-content: flex-start;
  padding: 12px 12px; border: 0; background: transparent; border-radius: var(--r-sm);
  font-size: var(--t-base); color: var(--ink); cursor: pointer;
}
.menu button:hover:not(:disabled) { background: var(--panel-2); }
.menu button:disabled { color: var(--ink-3); cursor: default; }
.menu button svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.menu button.danger { color: var(--danger); }
.menu button.danger svg { color: var(--danger); }
.menu button.danger:hover { background: var(--danger-bg); }

.empty .primary { margin-top: 16px; }

/* A destructive primary. Same weight as any other primary button, so it is not harder
   to press than it should be - only unmistakable about what it does. */
button.primary.danger, .btn.primary.danger {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
button.primary.danger:hover, .btn.primary.danger:hover { background: #DC2626; border-color: #DC2626; }

/* =================================================================== waveform player */

/* A call is two people, and the recording is stereo for exactly that reason. Drawing the
   agent above the centre line and the caller below turns "who was speaking" into shape
   rather than something you have to play the audio to find out. */
.wave-card .sub { max-width: 68ch; }

.wave {
  position: relative; height: 150px; margin: 4px 0 12px; cursor: pointer;
  border-radius: var(--r); background: var(--panel-2);
  padding: 0 12px; overflow: hidden;
  transition: background .14s ease;
}
.wave:hover { background: var(--line-soft); }
.wave canvas { display: block; width: 100%; height: 100%; }
.wave.wave-flat { opacity: .5; cursor: default; }

.wave-bar { display: flex; align-items: center; gap: 16px; }

.wave-play {
  width: 42px; height: 42px; border-radius: 50%; padding: 0; flex: none;
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  box-shadow: 0 6px 16px -6px var(--accent);
}
.wave-play:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.wave-play svg { width: 17px; height: 17px; }
.wave-play .i-pause, .wave-play.on .i-play { display: none; }
.wave-play.on .i-pause { display: block; }

.wave-time {
  font-family: var(--mono); font-size: var(--t-base); font-variant-numeric: tabular-nums;
  color: var(--ink-2); letter-spacing: -.01em;
}

.wave-key { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs);
            color: var(--ink-3); margin-left: 4px; }
.wave-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.wave-key i.k-agent { background: var(--accent); }
.wave-key i.k-caller { background: var(--cool); margin-left: 8px; }

.wave-rates { margin-left: auto; display: flex; gap: 4px; }
.wave-rate { padding: 5px 12px; font-size: var(--t-xs); font-family: var(--mono);
             box-shadow: none; }
.wave-rate.on { background: var(--accent-bg); border-color: var(--accent-line);
                color: var(--accent-ink); font-weight: 650; }

/* --- transcript turns, told apart ------------------------------------------------- */

/* Both speakers used to be the same grey box with a small label, which in a bilingual
   RTL transcript is genuinely hard to read. The agent now carries the accent and sits
   left; the caller is neutral and sits right. The bubble is .turn itself. */
.turn { border: 1px solid transparent; transition: border-color .12s ease, box-shadow .12s ease; }
.turn.assistant {
  margin-right: 12%; background: var(--accent-bg); border-color: var(--accent-line);
  border-radius: 12px 12px 12px 3px;
}
.turn.user {
  margin-left: 12%; background: var(--panel-2); border-color: var(--line);
  border-radius: 12px 12px 3px 12px;
}
.turn.assistant .body { color: var(--ink); }

.turn.seekable { cursor: pointer; }
.turn.seekable:hover { border-color: var(--accent); }

/* The turn being spoken right now, while the recording plays. */
.turn.now { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.turn.now .who b { color: var(--accent-ink); }

/* =================================================================== overview hero */

/* One image, on the page everyone opens first. Dubai at dusk, held well back so the
   greeting stays the loudest thing on the page - it is orientation, not decoration. */
.page-head.hero {
  position: relative; isolation: isolate;
  border-radius: var(--r-lg); padding: 36px 32px; margin-bottom: 20px;
  min-height: 168px; background: #141a35;
  align-items: flex-end;
}
/* The skyline sits in the lower half of the source image, so the band is framed near
   its foot. The wash is heavy on the left, where the greeting is, and clears by the
   two-thirds mark so the towers are actually visible rather than implied. */
.page-head.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: url("/static/img/gen/hero-skyline.jpg") center 78% / cover no-repeat;
  opacity: .92;
}
.page-head.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background:
    linear-gradient(97deg, #141a35 2%, rgba(20,26,53,.90) 26%,
                    rgba(20,26,53,.44) 58%, rgba(20,26,53,.10) 100%),
    linear-gradient(to top, rgba(20,26,53,.55), rgba(20,26,53,0) 55%);
}
.page-head.hero h1 { color: #fff; }
.page-head.hero p { color: rgba(255,255,255,.72); }
                                color: rgba(255,255,255,.82); box-shadow: none; }

/* =================================================================== stat sparkline */

.stat { position: relative; overflow: hidden; }
.stat .note { font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; }
.spark { display: block; width: 100%; height: 34px; margin: 12px -2px -8px; }

/* =================================================================== chart fill */

.chart .area { fill: url(#lc-fill); stroke: none; }

/* =================================================================== empty states */

.empty-hero {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 40px 44px; box-shadow: var(--shadow); margin-top: 4px;
}
.empty-art { width: 230px; height: 230px; object-fit: contain; flex: none;
             filter: drop-shadow(0 18px 30px rgba(99,102,241,.16)); }
.empty-copy { flex: 1 1 380px; min-width: 0; }
.empty-copy h3 { margin: 0 0 8px; font-size: var(--t-xl); font-weight: 680; letter-spacing: -.028em; }
.empty-copy p { margin: 0; color: var(--ink-2); font-size: var(--t-md); line-height: 1.65; max-width: 62ch; }
.empty-do { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.empty-aside {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; max-width: 62ch;
}
.empty-aside b { display: block; font-size: var(--t-xs); letter-spacing: .06em; font-weight: 650;
                 text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.empty-aside .cols { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.empty-aside code { background: var(--panel-2); border: 1px solid var(--line);
                    border-radius: 5px; padding: 3px 8px; font-size: var(--t-xs); }

/* =================================================================== theme toggle */

.theme-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; justify-content: flex-start;
  padding: 8px 12px; margin-bottom: 12px; border: 0; background: transparent;
  border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--ink-2); box-shadow: none;
}
.theme-toggle:hover { background: var(--panel-2); border: 0; color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; flex: none; }
.theme-toggle .i-moon, .theme-toggle.on .i-sun { display: none; }
.theme-toggle.on .i-moon { display: block; }
.rail-collapsed .theme-toggle span { display: none; }
.rail-collapsed .theme-toggle { justify-content: center; }


/* =================================================================== new agent dialog */

/* Decisions on the left, the thing being made on the right. The preview is not
   decoration: the opening line is the only part of an agent a caller actually hears, so
   it belongs next to the choices that change it rather than at the bottom of a scroll. */
.na { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .95fr);
      gap: 28px; align-items: start; }
@media (max-width: 900px) { .na { grid-template-columns: 1fr; } }

.na-form { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* A numbered step, with the rule running down beside it so four questions read as one
   sequence instead of four unrelated fields. */
.na-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px;
           position: relative; }
.na-step::before {
  content: ""; position: absolute; left: 12.5px; top: 30px; bottom: -22px;
  width: 1px; background: var(--line);
}
.na-step:last-child::before { display: none; }
.na-num {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent-ink); font-size: var(--t-sm);
  font-weight: 680; font-variant-numeric: tabular-nums; position: relative; z-index: 1;
}
.na-body { min-width: 0; }
.na-h { display: block; font-size: var(--t-base); font-weight: 650; letter-spacing: -.015em;
        color: var(--ink); margin-bottom: 4px; }
.na-why { margin: 0 0 12px; font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; }
.na-body > input { margin-top: 4px; }

/* --- the preview column ----------------------------------------------------------- */

.na-preview {
  position: sticky; top: 0; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; min-width: 0;
}
.na-plabel { display: block; font-size: var(--t-2xs); letter-spacing: .07em; font-weight: 650;
             text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.na-plabel + .na-say, .na-spec + .na-plabel { margin-top: 20px; }

.na-card { display: flex; align-items: center; gap: 12px; background: var(--panel);
           border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; }
.na-cardtext { min-width: 0; }
.na-cardtext b { display: block; font-size: var(--t-base); font-weight: 650; letter-spacing: -.015em;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-cardtext span { font-size: var(--t-xs); color: var(--ink-3); }

.na-spec { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0 0; }
.na-spec dt { font-size: var(--t-xs); color: var(--ink-3); }
.na-spec dd { margin: 0; font-size: var(--t-xs); color: var(--ink); text-align: right;
              font-family: var(--mono); overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }

.na-say { position: relative; }
.na-say textarea { min-height: 96px; font-size: var(--t-base); line-height: 1.6; background: var(--panel); }
.na-say button { margin-top: 8px; }

.na-rules { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.na-rules b { display: block; font-size: var(--t-2xs); letter-spacing: .07em; font-weight: 650;
              text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.na-rules ul { margin: 0; padding-left: 16px; }
.na-rules li { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.55; margin-bottom: 5px; }

/* =================================================================== agent marks */

/* The agent's voice as a shape, in the market's colour. The bars are an SVG path drawn
   by markSvg(); the ring behind them is a tint of the same colour so a mark reads as
   one object rather than a sparkle over nothing. */
.mark {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone, var(--accent)) 12%, var(--panel));
}
.mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark svg path { stroke: var(--tone, var(--accent)); stroke-width: 4.6; stroke-linecap: round;
                 fill: none; transition: d .35s ease; }
.mark.pending svg path { opacity: .35; }
.mark b { position: relative; font-size: var(--t-sm); font-weight: 720; letter-spacing: -.02em;
          color: var(--tone, var(--accent)); }
.mark.sm { width: 40px; height: 40px; }
.mark.sm b { font-size: var(--t-xs); }
.mark.sm svg path { stroke-width: 5.5; }
.mark.lg { width: 100%; height: 100%; background: transparent; }
.mark.lg b { font-size: var(--t-2xl); }
.mark.lg svg path { stroke-width: 3.4; }

/* =================================================================== sidebar filler */

/* The rail ended at Integrations and left 150-250px of nothing above the footer on
   every page. Empty space is only useful when it separates things; this was space that
   separated nothing. It now carries the two numbers an operator would otherwise open
   Overview to read. */
.side-live {
  margin: auto 12px 16px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel-2);
}
.side-live .k {
  font-size: var(--t-2xs); letter-spacing: .07em; text-transform: uppercase;
  font-weight: 650; color: var(--ink-3); margin-bottom: 8px;
}
.side-live .row { display: flex; align-items: baseline; justify-content: space-between;
                  gap: 8px; margin-top: 4px; }
.side-live .row span { font-size: var(--t-xs); color: var(--ink-2); }
.side-live .row b { font-size: var(--t-base); font-weight: 680;
                    font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.side-live .row b.live { color: var(--accent-ink); }
.rail-collapsed .side-live { display: none; }

/* A slimmer hero for the agent builder, wearing the agent's own market. */
.page-head.hero.slim { min-height: 132px; padding: 26px 32px; }
.page-head.hero.mk-ksa::before       { background-image: url("/static/img/gen/market-ksa.jpg"); }
.page-head.hero.mk-africa_fr::before { background-image: url("/static/img/gen/market-africa_fr.jpg"); }
.page-head.hero.mk-africa_en::before { background-image: url("/static/img/gen/market-africa_en.jpg"); }
.page-head.hero .page-actions button { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18);
                                        color: #fff; box-shadow: none; }
.page-head.hero .page-actions button:hover { background: rgba(255,255,255,.18); }
.page-head.hero .page-actions button.primary { background: #fff; color: #101828; border-color: #fff; }
.page-head.hero .page-actions button.primary:hover { background: #EEF0FE; }
.page-head.hero .crumbs, .page-head.hero .crumbs button { color: rgba(255,255,255,.7); }

/* On a short window the live block is the first thing to go: the nav and the sign-out
   must always be reachable without scrolling the rail. */
@media (max-height: 820px) { .side-live { display: none; } }
@media (max-height: 720px) { .nav-item { padding: 7px 14px; } .nav-group { padding-top: 10px; } }

/* The segmented range picker, when it sits on the dark hero band. */
.page-head.hero .seg { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.page-head.hero .seg button { color: rgba(255,255,255,.78); }
.page-head.hero .seg button:hover { background: rgba(255,255,255,.14); }
.page-head.hero .seg button.on { background: #fff; color: #101828; }

/* =================================================================== page head, again */

/* Without a byline the head is one row: title left, actions right, aligned on centre.
   The paragraph that used to live here is behind the glyph beside the title. */
.page-head.tight { align-items: center; margin-bottom: 24px; }
.page-title { min-width: 0; }
.page-title h1 { display: flex; align-items: center; gap: 10px; }
.page-title .facts {
  margin: 4px 0 0; font-size: var(--t-sm); color: var(--ink-3); max-width: none;
  font-variant-numeric: tabular-nums;
}


/* =================================================================== popover */

.pop {
  position: fixed; z-index: 70; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 16px 18px;
  animation: pop-in .14s ease-out;
}
.pop-body { font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); }
.pop-body b, .pop-body strong { color: var(--ink); }
.pop-body code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px;
                 padding: 1px 6px; font-size: var(--t-sm); }
.pop-arrow {
  position: absolute; top: -7px; width: 13px; height: 13px; transform: rotate(45deg);
  background: var(--panel); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* =================================================================== the band */

/* Every page opens the same way now: the title, what is on the page, and what you can do
   to it, in one dark band - the same element Overview and the agent builder already had.
   The band is slimmer than Overview's and the skyline only shows at its right edge, so
   this reads as the working variant of the same family rather than a second hero. */
.page-head.hero.band { min-height: 0; padding: 24px 28px; align-items: center; margin-bottom: 24px; }
.page-head.hero.band::before { opacity: .42; background-position: right 74%; }
.page-head.hero.band::after {
  background:
    linear-gradient(97deg, #141a35 30%, rgba(20,26,53,.94) 52%, rgba(20,26,53,.55) 78%, rgba(20,26,53,.18) 100%);
}
.page-head.hero .page-title h1 { margin: 0; }
.page-head.hero .facts { color: rgba(255,255,255,.62); margin-top: 6px; }
.page-head.hero .page-title > p:not(.facts) { color: rgba(255,255,255,.74); margin-top: 8px; }
.page-head.hero .page-actions .btn,
.page-head.hero .page-actions label.btn,
.page-head.hero .page-actions a.btn { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18);
                                      color: #fff; box-shadow: none; }
.page-head.hero .page-actions .btn:hover,
.page-head.hero .page-actions a.btn:hover { background: rgba(255,255,255,.18); color: #fff; }

/* =================================================================== title cue */

/* The page title is the way into the paragraph about the page. At rest it is a title.
   Pointed at, it lifts a couple of pixels, gives one small nudge - a "here" rather than
   the side-to-side shake that means "wrong password" - and the speech-box glyph slides
   in beside it. Click, or Enter, opens the box. */
.page-title h1.has-about {
  cursor: pointer; user-select: none; outline: none;
  transition: transform .18s ease, text-shadow .18s ease;
}
.page-title h1.has-about .cue {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  margin-left: 2px; color: rgba(255,255,255,.55); background: rgba(255,255,255,0);
  opacity: 0; transform: translateX(-8px) scale(.85);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, 1.2, .3, 1), background .18s ease;
}
.page-title h1.has-about .cue svg { width: 20px; height: 20px; }
.page-title h1.has-about:hover,
.page-title h1.has-about:focus-visible,
.page-title h1.has-about[aria-expanded="true"] {
  transform: translateY(-2px);
  text-shadow: 0 0 22px rgba(255,255,255,.28);
  animation: title-nudge .55s ease;
}
.page-title h1.has-about:hover .cue,
.page-title h1.has-about:focus-visible .cue,
.page-title h1.has-about[aria-expanded="true"] .cue {
  opacity: 1; transform: none; color: #fff; background: rgba(255,255,255,.14);
}
.page-title h1.has-about[aria-expanded="true"] { animation: none; }
@keyframes title-nudge {
  0%   { transform: translateY(0) rotate(0); }
  22%  { transform: translateY(-3px) rotate(-1.3deg); }
  48%  { transform: translateY(-2px) rotate(1.1deg); }
  72%  { transform: translateY(-2px) rotate(-.5deg); }
  100% { transform: translateY(-2px) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-title h1.has-about, .page-title h1.has-about .cue { animation: none !important; transition: none; }
}

/* =================================================================== new agent: advanced */

.na-tabs { margin: 4px 0 20px; }
.na-chk { display: flex; align-items: center; gap: 10px; font-size: var(--t-base); color: var(--ink);
          padding: 8px 0; cursor: pointer; }
.na-chk input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.hint .warn { color: var(--warn); }

/* The verdict. Green means the same validator that gates Create said yes. */
.na-check { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r);
            font-size: var(--t-base); line-height: 1.45; }
.na-check svg { width: 18px; height: 18px; flex: none; }
.na-check.ok { background: var(--ok-bg); color: var(--ok); }
.na-check.bad { background: var(--danger-bg); color: var(--danger); }
.na-check.checking { background: var(--panel); color: var(--ink-3); border: 1px dashed var(--line); }
.na-check b { font-weight: 680; }
#na-report.checking { opacity: .6; }
.na-err, .na-warn { margin: 10px 0 0; padding-left: 18px; font-size: var(--t-sm); line-height: 1.5; }
.na-err li { color: var(--ink); margin-bottom: 6px; }
.na-err li::marker { color: var(--danger); }
.na-warn li { color: var(--ink-2); margin-bottom: 6px; }
.na-warn li::marker { color: var(--warn); }

/* =================================================================== experiments */

/* A variant's letter, in the colour it has everywhere: the table, the chart, the form. */
.vkey { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
        border-radius: 8px; font-weight: 700; font-size: var(--t-sm); color: #FFF;
        background: var(--vk, var(--accent)); vertical-align: middle; }

.xp-variants { display: flex; flex-direction: column; }
.xp-variant { display: grid; gap: 12px; align-items: end; padding: 12px 0;
              grid-template-columns: 26px minmax(170px, 1.5fr) minmax(150px, 1fr) 90px minmax(120px, 1fr) 34px;
              border-top: 1px solid var(--line-soft); }
.xp-variants > .xp-variant:first-child { border-top: 0; padding-top: 0; }
/* Level with the controls, not with their labels. */
.xp-variant > .vkey { margin-bottom: 7px; }
.xp-variant .field { margin-bottom: 0; }
@media (max-width: 940px) {
  .xp-variant { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr); }
}

details.xp-adv { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
                 padding: 14px 18px; margin: 0 0 16px; }
details.xp-adv > summary { cursor: pointer; font-weight: 620; color: var(--ink-2); }
details.xp-adv[open] > summary { margin-bottom: 16px; }

table.xp th, table.xp td { white-space: nowrap; vertical-align: top; }
table.xp td .muted { display: block; font-size: var(--t-xs); margin-top: 2px; }
table.xp td .vkey { margin-right: 6px; }
table.xp td button.xs { margin-left: 6px; }

.xp-intervals { width: 100%; height: auto; }

/* A record row's second line of prose: its own line, and allowed to wrap. */
.rec-id .sub.line { display: block; white-space: normal; }

/* =================================================================== guided builder */

/* The interview in the New agent dialog: questions and answers read down the left like a
   conversation, the current question is a card with its reason, and the right column
   keeps the answers so far within reach to change. */
.iv .iv-chat { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.iv-log { display: flex; flex-direction: column; gap: 6px; max-height: 34vh; overflow-y: auto;
          padding-right: 6px; }
.iv-q { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.015em;
        color: var(--ink); margin-top: 8px; }
.iv-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
        background: var(--accent-bg); color: var(--accent-ink); font-size: var(--t-sm); font-weight: 680;
        font-variant-numeric: tabular-nums; }
.iv-n svg { width: 14px; height: 14px; }
.iv-a { margin-left: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px;
        padding: 8px 12px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; max-width: 92%;
        overflow-wrap: anywhere; }
.iv-a.muted { color: var(--ink-3); font-style: italic; }
.iv-a small { display: block; color: var(--warn); margin-top: 4px; }
.iv-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
           padding: 18px 20px; box-shadow: var(--shadow-md); }
.iv-card.editing { border-color: var(--accent-line); }
.iv-card .iv-q { margin-top: 0; font-size: var(--t-md); }
.iv-why { margin: 8px 0 14px 36px; font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; }
.iv-widget { margin-left: 36px; }
.iv-widget textarea, .iv-widget input { font-size: var(--t-base); }
.iv-widget textarea { min-height: 84px; line-height: 1.55; }
.iv-problem { display: flex; gap: 8px; align-items: center; margin: 12px 0 0 36px; color: var(--danger);
              font-size: var(--t-sm); }
.iv-problem svg { width: 14px; height: 14px; flex: none; }
.iv-actions { display: flex; gap: 8px; align-items: center; margin: 16px 0 0 36px; flex-wrap: wrap; }
.iv-intro { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
.iv-intro b { display: block; font-size: var(--t-lg); font-weight: 650; letter-spacing: -.015em; margin-bottom: 6px; }
.iv-intro p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.55; }
.iv-intro .iv-actions { margin-left: 0; }
.iv-how { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; }
.iv-draft { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 10px 14px; }
.iv-draft b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-draft span { font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; }
.iv-draft.mine { border-color: var(--accent-line); }
.iv-chips .chip.fixed { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-ink);
                        opacity: 1; cursor: default; display: inline-flex; gap: 6px; align-items: center; }
.iv-chips .chip.fixed svg { width: 12px; height: 12px; }
.iv-chips .chip.custom { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-ink); }
.iv-bar { height: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.iv-bar span { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.iv-answers { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; }
.iv-answers button { display: block; width: 100%; text-align: left; padding: 8px 10px; background: var(--panel);
                     border-color: var(--line); }
.iv-answers button.on { border-color: var(--accent); }
.iv-answers b { display: block; font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; margin-bottom: 2px; }
.iv-answers span { display: block; font-size: var(--t-sm); color: var(--ink); font-weight: 400; white-space: normal;
                   overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.iv-review { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px;
             margin: 12px 0 16px 36px; }
.iv-say { background: var(--accent-bg); border-radius: 12px 12px 12px 4px; padding: 10px 14px; line-height: 1.6;
          color: var(--ink); }
.iv-list { margin: 0; padding-left: 18px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7; }
.iv-list code { font-size: var(--t-xs); }
.iv-steps { margin: 0; padding-left: 18px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }
.iv-steps li { margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; }
.iv-steps .node-type { width: auto; height: auto; padding: 1px 6px; border-radius: 6px; font-size: var(--t-2xs);
                       text-transform: uppercase; letter-spacing: .05em; flex: none; }
.iv-instr { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; white-space: pre-wrap; max-height: 180px;
            overflow-y: auto; }
.iv .na-check { margin: 8px 0 0 36px; }
.iv .na-err, .iv .na-warn { margin-left: 36px; }

/* --- studio additions: the + on a step, the branch popover, the hint strip ------------ */
.snode-add { position: absolute; right: -12px; bottom: -12px; width: 24px; height: 24px; border-radius: 50%;
             border: 1px solid var(--line); background: var(--panel); color: var(--accent-ink); font-size: 16px;
             line-height: 1; display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity .15s;
             box-shadow: var(--shadow-md); cursor: pointer; }
.snode:hover .snode-add, .snode.selected .snode-add { opacity: 1; }
.snode-add:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.studio-pop { position: fixed; z-index: 61; background: var(--panel); border: 1px solid var(--line);
              border-radius: var(--r); box-shadow: var(--shadow-md); padding: 12px; width: 360px; max-width: 92vw; }
.studio-pop label { display: block; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em;
                    color: var(--ink-3); margin-bottom: 6px; }
.studio-pop .row { margin-top: 8px; }
.studio-hints { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; gap: 12px;
                align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
                padding: 6px 8px 6px 14px; font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap;
                box-shadow: var(--shadow-md); max-width: calc(100% - 24px); overflow: hidden; }
.studio-hints b { color: var(--ink); font-weight: 600; }
.studio-hints button { padding: 2px 8px; }
.studio-outline { font-family: var(--mono); font-size: var(--t-xs); line-height: 1.7; white-space: pre-wrap;
                  color: var(--ink-2); margin: 0; }
.studio-outline b { color: var(--ink); }

/* =================================================================== add leads */

/* The flow from the approved concepts: four steps, three sources, every row checked
   before anything is written. Everything below uses the console's own tokens, so the
   dark theme follows without a second set of rules. */
.al-steps { display: flex; align-items: center; gap: 14px; list-style: none; margin: 0 0 22px; padding: 0; }
.al-steps li { display: flex; align-items: center; gap: 10px; color: var(--ink-3);
               font-size: var(--t-base); font-weight: 550; flex: 1; white-space: nowrap; }
.al-steps li:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--line); margin-left: 6px; min-width: 16px; }
.al-steps .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
                 border: 1px solid var(--line); background: var(--panel); font-size: var(--t-sm);
                 font-variant-numeric: tabular-nums; flex: none; }
.al-steps .dot svg { width: 15px; height: 15px; }
.al-steps li.on, .al-steps li.done { color: var(--accent-ink); }
.al-steps li.on .dot, .al-steps li.done .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.al-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.al-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
           padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column;
           align-items: flex-start; gap: 10px; min-width: 0; }
.al-card.pick { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line), var(--shadow); }
.al-card h3 { margin: 6px 0 0; font-size: var(--t-xl); font-weight: 650; letter-spacing: -.01em; }
.al-card p { margin: 0; color: var(--ink-2); font-size: var(--t-md); line-height: 1.5; }
.al-card > button, .al-card .al-inline { margin-top: auto; }
.al-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
          background: var(--accent-bg); color: var(--accent-ink); flex: none; }
.al-ico svg { width: 22px; height: 22px; }
.al-ico.ok { background: var(--ok-bg); color: var(--ok); }
.al-drop { width: 100%; min-height: 96px; margin: 4px 0 0; border: 1.5px dashed #CDD2DC; border-radius: var(--r-sm);
           display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
           color: var(--ink-2); font-size: var(--t-base); font-weight: 500; cursor: pointer;
           transition: border-color .12s ease, background .12s ease; }
.al-drop svg { width: 20px; height: 20px; color: var(--ink-3); }
.al-drop:hover, .al-drop.over { border-color: var(--accent); background: var(--accent-bg); }
.al-drop u { color: var(--accent-ink); text-decoration: none; }
.al-link { color: var(--accent-ink); font-weight: 550; font-size: var(--t-base); text-decoration: none; }
.al-link:hover { text-decoration: underline; }
button.link { background: none; border: 0; box-shadow: none; padding: 0; color: var(--accent-ink);
              font-weight: 550; font-size: var(--t-base); }
button.link:hover { background: none; text-decoration: underline; }
.al-inline { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; width: 100%; }
.al-inline select { max-width: 100%; }
.al-mini { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--t-xs); }
.al-mini input { width: 90px; }
.al-more { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 22px; }
.al-more .label { font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
                  font-weight: 600; margin-right: 6px; }
.al-more .chip { display: inline-flex; align-items: center; gap: 6px; }
.al-more .chip svg { width: 14px; height: 14px; }
.al-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
          background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
          padding: 14px 18px; box-shadow: var(--shadow); margin-top: 20px; }
.al-note { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: var(--t-base); flex-wrap: wrap; }
.al-note svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.al-do { display: flex; gap: 10px; }
.al-sql { margin-bottom: 20px; }
.al-sql .switch { margin: 0; }
.al-src { padding: 4px 20px; margin-bottom: 18px; }
.al-src .row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
               padding: 12px 0; font-size: var(--t-base); }
.al-src .row + .row { border-top: 1px solid var(--line-soft); }
.al-src .k { color: var(--ink-3); }
.al-src .v { color: var(--ink); overflow-wrap: anywhere; }
table.al-map td { vertical-align: middle; }
table.al-map select { min-width: 220px; }
.al-ex { color: var(--ink-2); font-family: var(--mono); font-size: var(--t-sm); }
.al-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.al-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px;
           box-shadow: var(--shadow); }
.al-tile b { display: block; font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.03em;
             font-variant-numeric: tabular-nums; }
.al-tile span { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--t-base); margin-top: 4px; }
.al-tile i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.al-tile.ok b, .al-tile.ok i { color: var(--ok); }
.al-tile.accent b, .al-tile.accent i { color: var(--accent); }
.al-tile.warn b, .al-tile.warn i { color: var(--warn); }
.al-tile.bad b, .al-tile.bad i { color: var(--danger); }
.al-listpick { display: flex; flex-direction: column; gap: 10px; }
.al-radio { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--line);
            border-radius: var(--r-sm); font-size: var(--t-base); color: var(--ink); cursor: pointer; }
.al-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.al-radio > span { display: flex; align-items: center; gap: 14px; flex: 1; flex-wrap: wrap; }
.al-radio b { min-width: 140px; font-weight: 600; }
.al-radio input:not([type=radio]), .al-radio select { flex: 1; min-width: 220px; }
.al-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px; }
.al-done h2 { margin: 6px 0 0; }
@media (max-width: 1100px) { .al-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .al-cards { grid-template-columns: 1fr; }
  .al-steps li span:last-child { display: none; }
  .al-steps li.on span:last-child { display: inline; }
  .al-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-src .row { grid-template-columns: 1fr auto; }
  .al-src .k { grid-column: 1 / -1; }
}

/* =================================================================== review fixes (Oct 2026) */

/* A <label> styled as a button kept the form label's 8px bottom margin, so it sat 4px
   above the real button beside it in every page header. */
label.btn { margin-bottom: 0; }

/* Record rows are <button>s, and buttons do not wrap: the campaign settings line ran on
   underneath the Targets figure. */
.rec { white-space: normal; }
.rec-id .sub { display: block; }
.rec > span.kebab { color: var(--ink-2); display: grid; place-items: center; }
.rec > span.kebab svg { width: 18px; height: 18px; }

td.when { white-space: nowrap; }

/* The market's rules fold into one line in the agent builder: one click from the text,
   no longer 160px above every tab. */
details.banner.rules { display: block; padding: 12px 16px; }
details.banner.rules summary { display: flex; align-items: center; justify-content: space-between;
                               gap: 12px; cursor: pointer; list-style: none; }
details.banner.rules summary::-webkit-details-marker { display: none; }
details.banner.rules .show { font-size: var(--t-sm); color: var(--warn); font-weight: 600; }
details.banner.rules[open] .show { font-size: 0; }
details.banner.rules[open] .show::after { content: "Hide"; font-size: var(--t-sm); }
details.banner.rules ul { margin: 10px 0 0; }

/* Integration cards: the button sits at the bottom of every card, and a long note
   opens on request instead of stretching one card past its neighbours. */
.integ { display: flex; flex-direction: column; }
.integ .act { margin-top: auto; padding-top: 12px; }
.integ details.more { display: inline; }
.integ details.more summary { display: inline; cursor: pointer; color: var(--accent-ink);
                              font-weight: 550; list-style: none; margin-left: 4px; }
.integ details.more summary::-webkit-details-marker { display: none; }
.integ details.more[open] summary { display: none; }
.integ .logo.glyph { background: var(--accent-bg); color: var(--accent-ink); border-radius: 10px; }
.integ .logo.glyph svg { width: 20px; height: 20px; }

/* =================================================================== phone width */

/* Below 900px the 264px rail left the page a strip about 120px wide. The rail becomes a
   menu that slides in over the page instead, opened from a button in the corner. */
.menu-btn, .nav-scrim { display: none; }
@media (max-width: 900px) {
  body.app, :root.rail-collapsed body.app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 60;
             transform: translateX(-104%); transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
             box-shadow: var(--shadow-md); }
  :root.nav-open .sidebar { transform: none; }
  .side-toggle { display: none; }
  .menu-btn { display: inline-flex; position: fixed; top: 12px; left: 12px; z-index: 50;
              width: 42px; height: 42px; padding: 0; border-radius: 12px; }
  .menu-btn svg { width: 20px; height: 20px; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(16, 24, 40, .38);
               opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
  :root.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.app main { padding: 66px 16px 48px; }
  .page-head.hero { padding: 22px 20px; flex-wrap: wrap; gap: 14px; }
  .page-head.hero h1 { font-size: var(--t-2xl); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .stats { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sidebar, .nav-scrim { transition: none; } }
/* Grid items default to min-width: auto, so on a narrow screen the leads table pushed its
   column wider than the screen and the list panel's button ran off the edge. */
.leads-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .al-steps { gap: 8px; }
  .al-steps li { flex: none; }
  .al-steps li:not(:last-child)::after { display: none; }
}
/* Overview's grid items and Analytics' wide tables held the page wider than a phone. */
.ov-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  body.app main .card { overflow-x: auto; }
}
@media (max-width: 1100px) {
  .al-steps li span:last-child { display: none; }
  .al-steps li.on span:last-child { display: inline; }
}
/* The share beside each cost was 10px light grey: readable only up close. */
.legend .pct { color: var(--ink-2); font-size: var(--t-xs); }

/* The modal and toast hosts are empty containers whose children are position: fixed. Left
   in the flow they became a second, implicit row of the body grid and lifted the whole
   shell about 14px off the bottom of the window. */
#overlay, #toast-host { position: fixed; top: 0; left: 0; width: 0; height: 0; }

/* --- phone lines --------------------------------------------------------------------
   The add flow reuses the Add leads parts (.al-steps, .al-cards, .al-bar), so the two
   set-up flows look like one product. What is new: the checks ladder, the settings
   sheet for the client's IT, and the provider tiles. */
.pl-checks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.pl-checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--line-soft); }
.pl-checks li:first-child { border-top: 0; }
.pl-checks li > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-checks li b { font-weight: 600; color: var(--ink); font-size: var(--t-md); }
.pl-checks li > span:nth-child(2) span { color: var(--ink-3); font-size: var(--t-sm); line-height: 1.45; }
.pl-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); color: var(--ink-3); border: 1px solid var(--line); }
.pl-mark svg { width: 13px; height: 13px; }
.pl-checks li.ok .pl-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.pl-checks li.bad .pl-mark { background: var(--danger); border-color: var(--danger); color: #fff; }
.pl-sheet { list-style: none; margin: 4px 0 0; padding: 0; }
.pl-sheet li { display: grid; grid-template-columns: auto 220px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-sm); }
.pl-sheet li:first-child { border-top: 0; }
.pl-sheet li > span { color: var(--ink-3); }
.pl-sheet li > b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.pl-sheet li:not(:has(input)) { grid-template-columns: 220px minmax(0, 1fr); }
.pl-providers { margin-top: 4px; }
.pl-nums td.pick, .pl-nums th.pick { width: 36px; }
.pl-give .kv .item span:last-child { white-space: normal; overflow-wrap: anywhere; max-width: 62%; }
.pl-row .metric b { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@media (max-width: 900px) {
  .pl-sheet li, .pl-sheet li:not(:has(input)) { grid-template-columns: 1fr; gap: 4px; }
}
.pl-route .item span:last-child { font-family: inherit; display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* ------------------------------------------------------------------ control panel */
input[type="checkbox"].tg { appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  border: 0; padding: 0; box-shadow: none;
  width: 40px; height: 24px; border-radius: 999px; background: #D5D9E2; cursor: pointer;
  transition: background .15s ease; }
input[type="checkbox"].tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .25);
  transition: transform .15s ease; }
input[type="checkbox"].tg:checked { background: var(--ok); }
input[type="checkbox"].tg:checked::after { transform: translateX(16px); }
input[type="checkbox"].tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"].tg:disabled { opacity: .5; cursor: not-allowed; }
input[type="checkbox"].tg.big { width: 52px; height: 30px; }
input[type="checkbox"].tg.big::after { width: 24px; height: 24px; }
input[type="checkbox"].tg.big:checked::after { transform: translateX(22px); }

.ctl-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; margin-bottom: 20px; }
.ctl-top .card { margin: 0; }
.ctl-stop .hint { margin: 10px 0 0; }
.ctl-master { display: flex; align-items: center; }
.ctl-master.off { background: var(--danger-bg); border-color: transparent; }
.ctl-master h2 { margin: 0 0 6px; font-size: var(--t-lg); font-weight: 650; letter-spacing: -.02em; }

.ctl-countries { display: flex; flex-direction: column; }
.ctl-country { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(170px, 1.4fr) minmax(150px, 1fr) 120px auto;
  gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.ctl-country:first-child { border-top: 0; }
.ctl-cname { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctl-cname b { font-weight: 620; color: var(--ink); font-size: var(--t-md); }
.ctl-cname span { color: var(--ink-3); font-size: var(--t-sm); }
.ctl-cname:hover b { color: var(--accent-ink); }
.ctl-cnow { font-size: var(--t-sm); color: var(--ink-2); min-width: 0; }
.ctl-cnow .state { white-space: normal; }
.ctl-ctoggle { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.ctl-country button.ghost { display: inline-flex; align-items: center; gap: 4px; }
.ctl-country button.ghost svg { width: 14px; height: 14px; }
.ctl-more { margin-top: 14px; }
.ctl-more summary { cursor: pointer; color: var(--ink-2); font-size: var(--t-sm); padding: 6px 0; }

.ctl-rules, .ctl-switches { display: flex; flex-direction: column; }
.ctl-rule, .ctl-switch { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-top: 1px solid var(--line-soft); }
.ctl-rule:first-child, .ctl-switch:first-child { border-top: 0; padding-top: 4px; }
.ctl-rule b, .ctl-switch b { font-weight: 620; color: var(--ink); font-size: var(--t-md); }
.ctl-rule p, .ctl-switch p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; max-width: 720px; }
.ctl-rule .pill { margin-left: 6px; vertical-align: 1px; }
.ctl-rule.loose { background: linear-gradient(90deg, var(--warn-bg), transparent 60%); padding-left: 12px;
  margin-left: -12px; border-radius: var(--r-sm); }
.ctl-rule .seg { flex: none; }
.ctl-switch.big { border: 0; padding: 0; width: 100%; }
.ctl-switch.big p { font-size: var(--t-base); }
.ctl-locked { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 600; }
.ctl-locked svg { width: 15px; height: 15px; }
.ctl-caps, .ctl-sub { margin-top: 8px; font-size: var(--t-sm); color: var(--ink-2); line-height: 2; }
.ctl-caps input, .ctl-sub input { width: 56px; padding: 3px 6px; margin: 0 4px; text-align: center; }
.ctl-num { width: 76px; flex: none; text-align: center; }
.ctl-warn { display: flex; align-items: center; gap: 6px; color: var(--warn) !important; font-weight: 550; }
.ctl-warn svg { width: 15px; height: 15px; flex: none; }
.checks-off { margin-bottom: 16px; }

@media (max-width: 900px) {
  .ctl-top { grid-template-columns: 1fr; }
  .ctl-country { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .ctl-cnow, .ctl-cstate { grid-column: 1 / -1; }
  .ctl-country button.ghost { display: none; }
  .ctl-rule { flex-direction: column; align-items: flex-start; }
}
.ctl-kv .item span:last-child { font-family: var(--sans); text-align: right; }

.pl-howto { margin: 6px 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 12px;
  font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; }
.pl-howto b { color: var(--ink); font-weight: 600; }
.pl-howto button.ghost svg { width: 13px; height: 13px; }
.pl-login { margin-top: 8px; padding: 10px 12px; background: var(--panel-2); border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ call ladder */
.ladder { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.ladder .rungs { display: inline-flex; gap: 2px; }
.ladder .rungs i { width: 6px; height: 14px; border-radius: 2px; background: var(--line); display: block; }
.ladder .rungs i.on { background: var(--ink-3); }
.ladder.warn .rungs i.on { background: var(--warn); }
.ladder.ok .rungs i.on { background: var(--ok); }
.ladder-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 16px; }
.ladder-list li { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: var(--t-base); }
.ladder-list li.on { color: var(--ink); }
.ladder-list li .pl-mark { width: 22px; height: 22px; }
.ladder-list li.on .pl-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel .row-f { display: grid; grid-template-columns: 190px minmax(0, 1fr) 120px; gap: 12px; align-items: center; font-size: var(--t-sm); }
.funnel .bar { height: 22px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.funnel .bar b { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.funnel .row-f.success .bar b { background: var(--ok); }
.funnel .row-f .n { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.funnel .row-f .n b { color: var(--ink); }
@media (max-width: 700px) { .funnel .row-f { grid-template-columns: 1fr 70px; } .funnel .bar { grid-column: 1 / -1; grid-row: 2; } }

/* ------------------------------------------------------------------ data tab */
.dt-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.dt-tools .search { flex: 0 1 320px; }
.dt-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.dt-selbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px;
  background: var(--accent-bg); border-radius: var(--r-sm); font-size: var(--t-sm); }
.dt-wrap { overflow: auto; max-height: calc(100vh - 330px); min-height: 280px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel); }
table.dt { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: var(--t-sm); }
table.dt th, table.dt td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; text-align: start; }
table.dt thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); color: var(--ink-2);
  font-weight: 600; cursor: pointer; user-select: none; }
table.dt th.ai, table.dt td.ai { background: color-mix(in srgb, var(--accent-bg) 55%, transparent); }
table.dt thead th.ai { background: var(--accent-bg); color: var(--accent-ink); }
table.dt tbody tr { cursor: pointer; }
table.dt tbody tr:hover td { background: var(--panel-2); }
table.dt tr.gone td { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line); }
table.dt .pick { width: 36px; position: sticky; left: 0; background: var(--panel); z-index: 1; }
table.dt thead .pick { z-index: 2; background: var(--panel-2); }
.dt-pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 10px; font-size: var(--t-sm); }
.dt-pager .muted { margin-right: auto; }
.dt-colpick { max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.dt-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.dt-row .card { margin: 0 0 16px; }
.dt-fields .item span:first-child { flex: 0 0 42%; }
.dt-fields .item span:last-child { text-align: end; overflow-wrap: anywhere; }
.dt-edit { cursor: text; border-radius: 6px; padding: 1px 4px; }
.dt-edit:hover { background: var(--accent-bg); }
.dt-edit input { width: 70%; padding: 3px 6px; }
.dt-history { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--t-sm); }
.dt-history li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.dt-history .when { color: var(--ink-3); }
.dt-history li.call b, .dt-history li.campaign b { color: var(--accent-ink); }
.dt-diff { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--t-sm); }
details.c-more { margin: 4px 0 12px; }
details.c-more summary { cursor: pointer; color: var(--ink-2); font-size: var(--t-sm); padding: 6px 0; }
@media (max-width: 900px) { .dt-row { grid-template-columns: 1fr; } .dt-wrap { max-height: none; } }
/* The grid's sticky header and column must stay inside the grid, under any modal. */
.dt-wrap { isolation: isolate; }
.dt-fields .item span:last-child { font-family: var(--sans); }