/* Tenra Voice Console.
 *
 * A warm near-white page, white panels on hairline borders, a four-step ink ramp, TFG navy
 * for the one main action on each screen, and colour otherwise kept for state. The look is
 * the sidebar concept approved in October 2026 (docs/ui-redesign-2026-10.md); its layout
 * system - sidebar 240, page edge 32, 16px gaps, panels with 48px heads and a 20px inner
 * edge, 48px rows, 32px controls - is the last section of this file and wins over anything
 * older above it.
 *
 * Dark is complete: every colour is a token, and the dark block swaps the tokens rather
 * than restating the rules.
 *
 * Shadow stacks (now used only for things that float): shadow-plugin, copyright (c)
 * Florian Kiem, MIT licence.
 */

/* Geist (and Geist Mono) are linked from index.html and login.html rather than imported
   here, where the font's request waited for this whole file before it could start. */

/* October 2026: the console takes the look of the approved sidebar concept
   (docs/ui-redesign-2026-10.md). Warm neutrals, hairline panels with no shadow, TFG's navy
   as the one colour for the main action, Geist at 13px with tabular figures. The token
   names are unchanged, so every rule below still reads the same; the values moved. */
:root {
  color-scheme: light;

  /* surfaces */
  --canvas: #F6F6F4;      /* the page, and the sidebar beside it */
  --ground: #F6F6F4;
  --panel: #FFFFFF;       /* panels, tables, dialogs */
  --panel-2: #FAFAF8;     /* table heads, inset areas */
  --hover: #F2F2EF;
  --hover-2: #EBEBE7;

  --line: #E5E5E0;
  --line-strong: #D5D5CF;
  --line-soft: #EEEEEA;

  /* Four steps of ink. Every step used for text passes 4.5:1 on white and on --panel-2;
     --ink-4 is for icons and placeholder text only. */
  --ink: #141519;
  --ink-2: #42444C;
  --ink-3: #62656D;
  --ink-4: #8F929A;

  /* The main action is TFG navy. It is the only filled button on a screen. */
  --navy: #1F2A5C;
  --navy-2: #172048;
  --primary: var(--navy);
  --on-primary: #FFFFFF;

  --accent: #3A4C9C;           /* focus rings, chart lines, the call ring */
  --accent-strong: #2E3D85;
  --accent-ink: #28336D;       /* links and selected text */
  --accent-bg: #EEF0F8;        /* selected rows, counts */
  --accent-line: #C7CDE5;
  --on-accent: #FFFFFF;
  --cool: #6E9BC8;             /* the second chart line */

  --ok: #19693F;       --ok-bg: #E7F2EA;
  --warn: #8F4E05;     --warn-bg: #F9EFE1;
  --danger: #AC3326;   --danger-bg: #FBEBE8;
  --info: var(--accent-ink);   --info-bg: var(--accent-bg);

  /* Type: 13px is the interface; 20px the page title; nothing in between shouts. */
  --t-2xs: 11px;
  --t-xs:  12px;
  --t-sm:  12px;
  --t-base:13px;
  --t-md:  13px;
  --t-lg:  15px;
  --t-xl:  16px;
  --t-2xl: 20px;
  --t-3xl: 20px;
  --t-4xl: 22px;
  --t-5xl: 32px;

  --r-chip: 4px;
  --r-sm: 6px;       /* buttons, fields */
  --r: 8px;          /* panels */
  --r-lg: 10px;      /* dialogs */
  --r-pill: 999px;   /* status tags only */

  /* Panels are hairlines, not shadows. Shadows are for things that float. */
  --shadow-xs: 0 1px 2px rgba(20, 21, 25, .05);
  --shadow: none;
  --shadow-md: 0 4px 16px rgba(20, 21, 25, .08);
  --shadow-lg: 0 16px 40px rgba(20, 21, 25, .14), 0 2px 6px rgba(20, 21, 25, .06);
  --shadow-field: none;
  --scrim: rgba(20, 21, 25, .32);

  --ease-out: cubic-bezier(.23, 1, .32, 1);

  /* Categorical series, in fixed pipeline order. */
  --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: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* The layout grid: sidebar, page edge, gaps, the inner edge of a panel, row height. */
  --side: 240px; --pad: 32px; --gap: 16px; --in: 20px; --row: 48px;
}

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

  --canvas: #121317;
  --ground: #121317;
  --panel: #1A1B20;
  --panel-2: #1E1F25;
  --hover: #23242B;
  --hover-2: #2A2C33;

  --line: #2A2C33;
  --line-strong: #3A3C45;
  --line-soft: #23252B;

  --ink: #ECECEF;
  --ink-2: #C3C5CC;
  --ink-3: #9A9DA6;
  --ink-4: #737680;

  --navy: #4757A8;
  --navy-2: #5565B8;
  --accent: #8A9BE6;
  --accent-strong: #A3B1EE;
  --accent-ink: #AEBBF2;
  --accent-bg: rgba(138, 155, 230, .14);
  --accent-line: rgba(138, 155, 230, .38);
  --cool: #8DB6DE;

  --ok: #5CC88A;       --ok-bg: rgba(92, 200, 138, .14);
  --warn: #E2A458;     --warn-bg: rgba(226, 164, 88, .14);
  --danger: #EE7B6C;   --danger-bg: rgba(238, 123, 108, .14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
  --scrim: rgba(0, 0, 0, .55);

  --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: 20px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-bg); color: var(--ink); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

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

body.app {
  background: var(--canvas);
  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: 248px 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: 64px 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: 28px 32px 56px; min-width: 0; overflow-y: auto; }
/* The page is a window on the canvas: one hairline, the window radius, and the rail
   sitting beside it on the canvas itself rather than in a panel of its own. */
body.app main {
  margin: 10px 10px 10px 0; height: calc(100% - 20px);
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-lg);
}

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

.sidebar {
  background: transparent;
  display: flex; flex-direction: column; gap: 1px;
  padding: 18px 8px 12px;
  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 18px; }
.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-sm); font-weight: 700; 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-strong);
}
:root[data-theme="dark"] .brand-tfg,
:root[data-theme="dark"] .brand-tfg-mark { filter: invert(1) brightness(1.8); }
/* The dev console marks itself (paintEnvironment in app.js, and the sign-in page): a
   warning-coloured strip across the top of every page and a tag beside the logo. */
:root[data-env] body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000;
  background: var(--warn); pointer-events: none;
}
.env-tag {
  flex: none; margin-left: 10px; padding: 2px 7px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--warn); background: var(--warn-bg); border: 1px solid currentColor; line-height: 1.3;
}
:root.rail-collapsed .env-tag { display: none; }
.env-note {
  margin: 0 0 14px; padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--warn); background: var(--warn-bg); font-weight: 600; font-size: var(--t-sm);
}
.side-toggle {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 0; background: transparent; color: var(--ink-3); box-shadow: none;
  cursor: pointer; padding: 0;
  transition: color 150ms ease, background 150ms ease;
}
.side-toggle:hover { background: var(--hover-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: var(--primary);
  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: 600; 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: 10px;
  height: 32px; padding: 0 10px; 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; line-height: 1;
  text-align: left; width: 100%;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-item svg { width: 17px; height: 17px; 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(--hover-2); color: var(--ink); border: 0; }
/* Where you are is the neutral highlight and full ink, not the accent: the rail is on
   every page, and an accent that is always on screen stops meaning anything. */
.nav-item.active { background: var(--hover-2); color: var(--ink); }
.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(--ink-2); }

.nav-sep {
  font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-3); padding: 16px 10px 6px; white-space: nowrap;
}
:root.rail-collapsed .nav-sep { display: none; }
:root.rail-collapsed #nav { display: flex; flex-direction: column; gap: 1px; }

.side-foot { margin-top: auto; padding-top: 12px; }
.health { display: flex; flex-direction: column; gap: 5px; padding: 0 10px 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-strong);
}
.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(--hover-2); color: var(--danger); }

/* ------------------------------------------------------------ collapsed rail */
/* Icons only, at 64px. 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: 18px 8px 12px; }

/* 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: 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: -2px; right: 3px; margin-left: 0;
  min-width: 14px; padding: 0 3px; height: 14px; line-height: 14px;
  text-align: center; font-size: 10px; font-weight: 600;
  border-radius: 7px; background: var(--line-strong); color: var(--ink-2);
  /* 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(--canvas);
}
:root.rail-collapsed .nav-item.active .count { color: var(--ink); }

/* 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-2xl); font-weight: 600; letter-spacing: -.025em; margin: 0 0 6px; }
.page-head p { margin: 0; color: var(--ink-2); max-width: 68ch; font-size: var(--t-base); }
.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: 600; }

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

a.btn { text-decoration: none; }
/* Pill-shaped: the console's one button shape. Padding rather than a fixed height, so
   the space above and below the label is always equal. Anything built on a <button>
   that is not a button to look at (a card, a row, a tab) sets its own radius. */
button, .btn {
  font-family: var(--sans); font-size: var(--t-base); font-weight: 500; line-height: 1;
  letter-spacing: inherit;
  padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow-xs); white-space: nowrap; user-select: none;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out,
              opacity .15s ease-out;
}
button svg, .btn svg { width: 16px; height: 16px; flex: none; }
button:hover, .btn:hover { background: var(--hover); border-color: var(--line-strong); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:disabled:hover { background: var(--panel); border-color: var(--line-strong); }

button.primary, .btn.primary {
  background: var(--primary); border-color: transparent; color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
button.primary:hover, .btn.primary:hover {
  background: var(--primary); border-color: transparent; color: var(--on-primary); opacity: .9;
}
button.primary:disabled:hover { background: var(--primary); border-color: transparent; opacity: .5; }
button.tint {
  background: var(--hover-2); border-color: transparent; color: var(--ink);
  box-shadow: none;
}
button.tint:hover { background: var(--line-strong); 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: var(--danger); border-color: var(--danger); color: #FFF;
                             filter: brightness(.94); }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; }
button.ghost:hover { background: var(--hover); border-color: transparent; }
button.sm, .btn.sm { padding: 7px 12px; font-size: var(--t-sm); gap: 6px; }
button.xs { padding: 5px 10px; font-size: var(--t-xs); gap: 4px; }
button.icon { padding: 0; width: 32px; height: 32px; }
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(--hover); color: var(--ink); border: 0; }

/* Built on a <button>, but a card or a row to look at: prose line height, a control
   radius where the rule below does not set one, and no press-scale on a large surface. */
.tile, .rec, .choice, .integ, .studio-tpl, .iv-draft, .iv-answers button, .wl-branches button,
.studio-menu button, .menu button, .studio-steplist button { line-height: 1.45; }
.studio-tpl, .iv-draft, .iv-answers button, .wl-branches button, .studio-steplist button {
  border-radius: var(--r-sm);
}
.choice:active:not(:disabled), .integ:active:not(:disabled), .studio-tpl:active:not(:disabled),
.iv-draft:active:not(:disabled), .nav-item:active:not(:disabled), .grp:active:not(:disabled),
.rbtn:active:not(:disabled) { transform: none; }

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

/* A field shows focus on its own edge: the border takes the accent and a soft ring
   opens around it, so nothing jumps and a row of fields does not grow outlines. */
input, select, textarea {
  font-family: var(--sans); font-size: var(--t-base); letter-spacing: inherit; width: 100%;
  padding: 8px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg);
}
input[type="range"]:focus, input[type="checkbox"]:focus, input[type="radio"]:focus,
input[type="file"]:focus { box-shadow: none; }
input[type="range"]:focus-visible, input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
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: 500; color: var(--ink-2); margin-bottom: 6px; }
.hint { font-size: var(--t-sm); 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: .88em; background: var(--panel-2);
  border: 0; border-radius: var(--r-chip); padding: 2px 6px; color: var(--ink-2);
}

.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: 20px 24px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card.flat { padding: 0; overflow: hidden; }
.card > h2 { font-size: var(--t-md); font-weight: 600; letter-spacing: -.015em; margin: 0 0 3px; }
.card > .sub { color: var(--ink-2); font-size: var(--t-base); 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-md); font-weight: 600; letter-spacing: -.015em; }
.card-head .sub { margin: 0; color: var(--ink-2); font-size: var(--t-base); }
.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(--line-strong);
              background: var(--panel); }
.tile:active:not(:disabled) { transform: none; }
.tile .title { font-weight: 600; font-size: var(--t-md); letter-spacing: -.01em; }
.tile .meta { font-size: var(--t-sm); color: var(--ink-3); }

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

.stats { display: grid; gap: 16px; 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: 18px 20px; box-shadow: var(--shadow); }
.stat .k { font-size: var(--t-sm); 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: 600; letter-spacing: -.035em;
           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 */

/* A status pill: a tint, its colour as the text, and no edge. */
.pill {
  font-size: var(--t-xs); font-weight: 500; line-height: 1; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--hover); color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; border: 0;
}
.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: var(--r-chip); background: var(--accent-bg); color: var(--accent-ink);
       font-weight: 500; }
.tag.plain { background: var(--hover); color: var(--ink-2); }

/* =================================================================== 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: 600; font-size: var(--t-md); letter-spacing: -.02em; flex: none;
  position: relative; overflow: hidden;
}
.avatar.sq { border-radius: var(--r); }
.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: 600;
          letter-spacing: -.02em; }
th { text-align: left; font-size: var(--t-xs); color: var(--ink-3); font-weight: 500;
     padding: 10px 20px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th .sort { opacity: .5; font-size: var(--t-2xs); }
td { padding: 12px 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: 500; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
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: 600; color: var(--ink); border-top: 1px solid var(--line); }
td .link { color: var(--accent-ink); cursor: pointer; font-weight: 500; }
td .link:hover { text-decoration: underline; }
th.pick, td.pick { width: 18px; padding-right: 0; }
a.more { color: var(--accent-ink); font-weight: 500; 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: 6px; height: 6px; 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: 32px; height: 32px; padding: 0 8px; font-size: var(--t-sm);
                border-radius: var(--r-sm); }
.pager button.on { border-color: var(--ink); color: var(--ink); font-weight: 600;
                   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: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
        flex-wrap: wrap; }
.tab { padding: 10px 12px; 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: 500; margin-bottom: -1px; }
.tab:hover { color: var(--ink-2); background: none; border-color: transparent;
             border-bottom-color: transparent; }
.tab:active:not(:disabled) { transform: none; }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 7px 12px; font-size: var(--t-sm); background: var(--panel);
        border: 1px solid var(--line-strong); color: var(--ink-2); border-radius: var(--r-pill);
        box-shadow: var(--shadow-xs); font-weight: 500; }
.chip:hover { background: var(--hover); border-color: var(--line-strong); color: var(--ink); }
.chip.on { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.chip .n { opacity: .7; font-variant-numeric: tabular-nums; }

/* Segmented control: a pill track, and the chosen segment is a white thumb with a
   hairline round it. */
.seg { display: inline-flex; background: color-mix(in srgb, var(--line) 60%, transparent); border: 0;
       border-radius: var(--r-pill); padding: 2px; gap: 0; }
.seg button { border: 0; background: none; box-shadow: none; padding: 7px 12px;
              font-size: var(--t-sm); color: var(--ink-3); border-radius: var(--r-pill); }
.seg button:hover { background: none; border: 0; color: var(--ink-2); }
.seg button:active:not(:disabled) { transform: none; }
.seg button.on { background: var(--panel); color: var(--ink);
                 box-shadow: 0 0 0 1px var(--line); }

/* =================================================================== 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: 16px 20px; box-shadow: var(--shadow); cursor: pointer; width: 100%;
  text-align: left; line-height: 1.5; transition: box-shadow .14s ease, border-color .14s ease;
}
.rec:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong);
             background: var(--panel); }
.rec:active:not(:disabled) { transform: none; }
.rec-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.rec-id .nm { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--t-md);
              letter-spacing: -.015em; flex-wrap: wrap; line-height: 1.3; }
.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-xl); font-weight: 600; 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: 600; 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: 600; 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. */
.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: 600; letter-spacing: -.04em;
                        color: var(--ink); }
.ring .core .initials.small { font-size: var(--t-2xl); letter-spacing: -.02em; }

/* A fixed box for the live wave. Without it the canvas took its height from its own pixel
   size, which the drawing code set to that height times the screen's scaling: at 150%
   (most Windows laptops) it grew half again every frame until the browser gave up and
   drew a broken image, pushing the name and the call buttons off the bottom. */
.stage .live-wave { display: block; width: 100%; height: 44px; margin: 6px 0 4px; }
.stage .nm { font-size: var(--t-lg); font-weight: 600; 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-strong); color: var(--ink-2);
          box-shadow: var(--shadow-xs); transition: all .13s ease; }
.rbtn svg { width: 19px; height: 19px; }
.rbtn:hover { background: none; border: 0; }
.rbtn:hover i { border-color: var(--line-strong); 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: var(--shadow-xs); }
.rbtn.end:hover i { filter: brightness(.94); }
.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: 600; 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: 600; 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(--line-strong);
               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: var(--r-sm); overflow: hidden; }
.integ .logo img { width: 36px; height: 36px; object-fit: contain; display: block; }
.integ .logo.letter { font-weight: 600; font-size: var(--t-md); color: #FFF; letter-spacing: -.02em; }
.integ .nm { font-weight: 600; 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(--hover); }
.doc .ico { width: 36px; height: 36px; border-radius: var(--r-sm); 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: 600; 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: var(--r); 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: 600; 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; }
.snode:hover .port, .snode.selected .port { opacity: 1; }
.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: 500; }
.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: 600; }
.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: 500;
                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(--hover); }
.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(--hover); }
.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: 500; 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(--hover-2); color: var(--ink); border-color: transparent; }
.grp.on { background: var(--hover-2); color: var(--ink); 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(--ink-2); }
.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; }

.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 */
}

/* A toast says what kind it is with a dot beside the words, not a stripe down its edge. */
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 60; background: var(--panel);
         border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px 12px 32px;
         max-width: 420px; font-size: var(--t-base); box-shadow: var(--shadow-lg); color: var(--ink); }
.toast::before { content: ""; position: absolute; left: 14px; top: 19px; width: 6px; height: 6px;
                 border-radius: 50%; background: var(--accent); }
.toast.bad::before { background: var(--danger); }
.toast.ok::before { background: var(--ok); }
.toast.warn::before { background: var(--warn); }

.modal-back { position: fixed; inset: 0; background: var(--scrim); z-index: 50;
              display: flex; align-items: center; justify-content: center; padding: 24px; }
.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: 28px 32px;
         box-shadow: var(--shadow-lg); }
.modal.wide { width: min(1120px, 100%); }
.modal h3 { margin: 0 0 8px; font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; }
.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: 600; 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; }
.bar-tip .d { margin-top: 3px; line-height: 1.45; }
/* A measure's name: its definition from docs/call-metrics.md shows on hover or focus. */
.term { cursor: help; text-decoration: underline dotted var(--ink-3); text-decoration-thickness: 1px;
        text-underline-offset: 3px; }

.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: 600; 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: 600; 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: var(--danger); 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: 500; color: var(--ink-2); margin: 0 0 8px; }
.auth-input { width: 100%; padding: 11px 12px; font-size: var(--t-md); border-radius: var(--r-sm);
              border: 1px solid var(--line-strong); background: var(--panel); 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: var(--r-sm); }
.auth-eye:hover { background: var(--hover); 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: 13px; font-size: var(--t-md); font-weight: 500;
               background: var(--primary); border-color: transparent; color: var(--on-primary);
               box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.auth-submit:hover { background: var(--primary); border-color: transparent;
                     color: var(--on-primary); opacity: .9; }
.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: 600; 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(--line-strong); background: var(--hover); }
.choice b { font-size: var(--t-base); font-weight: 600; 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(--hover); }
.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: var(--danger); border-color: var(--danger);
                                                          opacity: 1; filter: brightness(.94); }

/* =================================================================== 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(--primary); border-color: transparent; color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.wave-play:hover { background: var(--primary); border-color: transparent; opacity: .9; }
.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: 600; }

/* --- 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: block;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; box-shadow: var(--shadow); margin-top: 4px;
}
.empty-copy { flex: 1 1 380px; min-width: 0; }
.empty-copy h3 { margin: 0 0 8px; font-size: var(--t-xl); font-weight: 600; 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: 600;
                 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(--hover-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: 600; 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: 600; 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: 600;
             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: 600; 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: 600;
              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 */

/* Agent initials, in the market colour. */
.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 b { position: relative; font-size: var(--t-sm); font-weight: 600; letter-spacing: -.02em;
          color: var(--tone, var(--accent)); }
.mark.sm { width: 40px; height: 40px; }
.mark.sm b { font-size: var(--t-xs); }
.mark.lg { width: 100%; height: 100%; background: transparent; }
.mark.lg b { font-size: var(--t-2xl); }

/* =================================================================== 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 8px 12px; padding: 12px; border: 1px solid var(--line-strong);
  border-radius: var(--r); background: var(--ground);
}
.side-live .k {
  font-size: var(--t-2xs); letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; 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: 600;
                    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: #fff; opacity: .9; }
.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: 940px) { .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;
}
.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);
}

/* =================================================================== 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 brightens and the speech-box glyph shows beside it; nothing moves. Click,
   or Enter, opens the box. */
.page-title h1.has-about {
  cursor: pointer; user-select: none; outline: none;
}
.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;
}
.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"] {
  text-shadow: 0 0 22px rgba(255,255,255,.28);
}
.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; color: #fff; background: rgba(255,255,255,.14);
}

/* =================================================================== 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: 600; }
#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: 600; 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: 600; 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: 600; 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: 600;
        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: 600; 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: 500; 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(--ink); }
.al-steps li.on .dot, .al-steps li.done .dot { background: var(--primary); border-color: transparent; color: var(--on-primary); }

.al-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
/* A file is the only source now, so the one card keeps a readable width rather than filling the row. */
.al-cards.one { grid-template-columns: minmax(0, 560px); }
.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-lg); font-weight: 600; letter-spacing: -.015em; }
.al-card p { margin: 0; color: var(--ink-2); font-size: var(--t-base); line-height: 1.5; }
.al-card > button, .al-card .al-inline { margin-top: auto; }
.al-ico { width: 44px; height: 44px; border-radius: var(--r); 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 var(--line-strong); 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: 500; 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: 500; 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: 600; 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: 500; 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(--hover); color: var(--ink-2); border-radius: var(--r-sm); }
.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: 40px; height: 40px; padding: 0; border-radius: var(--r-sm); }
  .menu-btn svg { width: 20px; height: 20px; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim);
               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; margin: 0; height: 100%; border: 0; border-radius: 0; }
  .sidebar { background: var(--canvas); }
  .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; }
/* A fixed box is its own stacking layer, so the z-index of a dialog inside it only ranks
   it against its siblings. The layer itself has to sit above the page's floating parts. */
#overlay { z-index: 50; }
#toast-host { z-index: 60; }

/* --- 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: var(--line-strong); 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: 600; letter-spacing: -.02em; }

.ctl-cname { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctl-cname b { font-weight: 600; color: var(--ink); 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); }
/* The countries table: every country, one line each. */
.ctl-ctable td { vertical-align: middle; }
.ctl-ctable .ctl-cname { display: inline; }
.ctl-ctable { min-width: 780px; }
.ctl-ctable .ctl-cnow .state { white-space: nowrap; }
.ctl-ctabs { margin-bottom: 12px; max-width: 100%; overflow-x: auto; }
.ctl-ctable .ctl-cmore { display: inline-flex; align-items: center; gap: 4px; }
.ctl-ctable .ctl-cmore svg { width: 14px; height: 14px; }

.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: 600; 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: 500; }
.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-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); }
/* One step per line, top to bottom in ladder order. The mark, the step and its count share
   one line, so a long count never pushes a mark off its step. */
.ladder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ladder-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  color: var(--ink-3); font-size: var(--t-base); line-height: 22px; }
.ladder-list li > .muted { font-size: var(--t-sm); text-align: right; }
.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; }
/* The Overview's measures: a plain table, a definition beside each number. */
.ov-measures { min-width: 560px; }
.ov-measures tr.sec td { padding-top: 14px; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.ov-measures tbody tr.sec:hover td { background: none; }
.ov-measures td:first-child { color: var(--ink); white-space: nowrap; }
.tbl-thin.ov-measures th { white-space: nowrap; max-width: none; }
.ov-measures td.def { color: var(--ink-3); font-size: var(--t-xs); line-height: 1.4; white-space: normal; min-width: 280px; }

/* ------------------------------------------------------------------ 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(--hover); }
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); }

/* The Testing tab: thin rows, and a five-star rating in half marks. */
.tbl-thin th, .tbl-thin td { padding: 6px 10px; font-size: var(--t-sm); vertical-align: middle; }
.tbl-thin td .hint { font-size: var(--t-xs); }
.tbl-thin .sm { padding: 3px 9px; font-size: var(--t-xs); }
.tbl-thin .kebab { padding: 2px 4px; }
.stars { position: relative; display: inline-block; cursor: pointer; font-size: 17px; line-height: 1;
  letter-spacing: 1px; color: #C3C9D4; user-select: none; vertical-align: middle; }
.stars:hover { color: #AEB5C2; }
.stars::before { content: "★★★★★"; }
.stars-on { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #F5A623;
  pointer-events: none; }
.stars-on::before { content: "★★★★★"; }
.stars:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.stars-n { font-size: var(--t-xs); color: var(--ink-2); margin-left: 4px; min-width: 22px; display: inline-block; }
:root[data-theme="dark"] .stars { color: #5A6273; }
.tbl-thin tr.t-row { cursor: pointer; }
.tbl-thin tr.t-row:hover td { background: var(--accent-bg); }
.tbl-thin td { white-space: nowrap; }
.tbl-thin td.t-name { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.tbl-thin td.t-act { text-align: right; }
.tbl-thin .ico { padding: 3px 6px; }
.tbl-thin .ico svg { margin: 0; }
/* Hovering a row opens out its long cells instead of cutting them. */
.tbl-thin tr.t-row:hover td.t-name { white-space: normal; overflow: visible; text-overflow: clip; }
.tbl-thin th[data-sort] { cursor: pointer; user-select: none; }
.tbl-thin th[data-sort]:hover, .tbl-thin th.sorted { color: var(--ink); }
/* The Testing table fits a laptop: the set-up lives in the name, in full on hover, and the
   number columns have short headings that may wrap. */
.tbl-thin td.t-name { max-width: 420px; }
.tbl-thin .t-more { display: none; white-space: normal; font-size: var(--t-xs); color: var(--ink-2);
  margin-top: 4px; line-height: 1.45; max-width: 420px; }
.tbl-thin tr.t-row:hover .t-more { display: block; }
.tbl-thin th { white-space: normal; max-width: 96px; line-height: 1.25; vertical-align: bottom; }
.tbl-thin th[data-sort="name"] { max-width: none; }
/* Fit, 9 Oct 2026: a table cell ignores max-width for text that cannot wrap, so the name
   lives in its own box; cells sit at the top so opening a row never moves the stars. */
.tbl-thin td { vertical-align: top; }
.tbl-thin td.t-name { max-width: none; overflow: visible; }
.tbl-thin .t-nm { max-width: clamp(170px, 18vw, 360px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-thin .t-more { max-width: clamp(170px, 18vw, 360px); }
.tbl-thin th, .tbl-thin td { padding: 6px 6px; }
.tbl-thin td:first-child, .tbl-thin th:first-child { padding-left: 10px; }
/* The hover detail floats over the rows below instead of pushing them down: a row that
   grew on hover moved every row under it, so the next click landed on the wrong one. */
.tbl-thin td.t-name { position: relative; }
.tbl-thin .t-more { position: absolute; left: 6px; top: calc(100% - 4px); z-index: 6; width: min(460px, 70vw);
  max-width: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: 10px 12px; margin: 0; pointer-events: none; }

/* =================================================================== polish (Oct 2026) */

.nowrap { white-space: nowrap; }

/* A lead's lists: one by name, the rest as a count. */
td .tag { margin: 0 4px 0 0; white-space: nowrap; max-width: 220px; overflow: hidden;
          text-overflow: ellipsis; vertical-align: middle; }
td .tag.more { font-variant-numeric: tabular-nums; cursor: default; }

/* A stat's note reads under its number, from the same left edge, not pushed to the far
   corner where the eye never goes. */
.stat .note { margin-left: 0; text-align: left; }

/* Transcript turns, the Beautiful UI way: the caller is a soft grey bubble on the right,
   the agent is plain text on the left. Two tinted, bordered boxes made a call read as a
   stack of cards, which is hard going in a long right-to-left transcript. */
.turn.assistant {
  background: transparent; border-color: transparent; margin-right: 10%;
  padding: 6px 4px;
}
.turn.user {
  background: var(--hover); border-color: transparent; margin-left: 14%;
  border-radius: 14px 14px 4px 14px;
}
.turn .who b { color: var(--ink-2); font-weight: 500; }
.turn.assistant .who b { color: var(--accent-ink); }
.turn .who .avatar { display: none; }
.turn.seekable:hover { border-color: transparent; background: var(--hover); }
.turn.user.seekable:hover { background: var(--hover-2); }
.turn.now { box-shadow: none; border-color: transparent; background: var(--accent-bg); }
.transcript { gap: 6px; }


/* =================================================================== side panel */

/* A record opens on the right, over the page but not over the menu, and leaves the page
   beneath it clickable: the back is see-through and lets presses fall through to the
   page, which closes this panel and opens whatever was pressed. After gr8r Studio's task
   drawer. Confirmations raised from a panel are ordinary centred dialogs above it. */
.modal-back.side {
  background: transparent; pointer-events: none;
  display: block; padding: 0;
}
.modal-back.side > * { pointer-events: auto; }
.modal.drawer {
  position: fixed; top: 10px; right: 10px; bottom: 10px;
  width: min(600px, calc(100vw - 20px)); max-height: none; margin: 0;
  padding: 24px 28px 40px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--ground); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .02);
  overflow-y: auto; overscroll-behavior: contain;
}
.modal.drawer.wide { width: min(780px, calc(100vw - 20px)); }
/* The title must not run under the close button. */
.modal.drawer > h3:first-child { padding-right: 44px; }
.drawer-x {
  position: fixed; top: 22px; right: 24px; z-index: 2;
  width: 32px; height: 32px; color: var(--ink-3);
}
.drawer-x:hover { color: var(--ink); background: var(--hover-2); }
.drawer-x svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .modal.drawer, .modal.drawer.wide { inset: 0; width: 100%; border-radius: 0; border: 0;
                                      padding: 20px 16px 40px; }
  .drawer-x { top: 14px; right: 12px; }
}

/* Figures inside a panel sit in one row; seven cells in 640px are still readable. */
.modal.drawer .stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.modal.drawer .stats .stat { padding: 12px 14px; }
.modal.drawer .stats .stat .k { font-size: var(--t-xs); }
.modal.drawer .stats .stat .v { font-size: var(--t-xl); }
.modal.drawer .stats .spark { display: none; }
/* Names in a panel's tables stay on one line; the table scrolls inside its box instead. */
.modal.drawer td:first-child, .modal.drawer td.mono { white-space: nowrap; }
@media (max-width: 900px) {
  .modal.drawer .stats { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
}

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

/* A row of figures is one panel with hairlines between the cells, after gr8r Studio's
   stat row: four separate floating cards read as four separate things. The lines are
   drawn on each cell's right and bottom and the panel clips the outer ones, so a row
   that wraps still gets its lines in the right places. */
.stats {
  gap: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
}
.stats .stat {
  border: 0; border-radius: 0; background: transparent; padding: 16px 20px;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}

/* =================================================================== top bar */

/* The page's own bar, after gr8r Studio's: where you are, search, and New. It is the
   first child of the scrolling page and sticks to the top of it. */
.topbar {
  position: sticky; top: -28px; z-index: 20;
  display: flex; align-items: center; gap: 10px; height: 52px;
  margin: -28px -32px 24px; padding: 0 16px 0 32px;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.tb-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-sm);
             color: var(--ink-2); white-space: nowrap; }
.tb-crumbs b { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.tb-crumbs .sep { color: var(--line-strong); }
.tb-crumbs button.link { font-size: var(--t-sm); color: var(--ink-2); font-weight: 400; }
.tb-crumbs button.link:hover { color: var(--ink); text-decoration: none; }
.tb-search {
  width: 280px; justify-content: flex-start; gap: 8px; padding: 6px 6px 6px 10px;
  border-radius: var(--r-sm); background: var(--panel); color: var(--ink-3);
  font-size: var(--t-sm); font-weight: 400;
}
.tb-search:hover { color: var(--ink-2); background: var(--panel); border-color: var(--line-strong); }
.tb-search:active:not(:disabled) { transform: none; }
.tb-search svg { width: 15px; height: 15px; }
.tb-search kbd { margin-left: auto; }
kbd {
  font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--ink-3);
  background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 3px 5px; min-width: 18px; text-align: center; display: inline-block;
}
.pop .tb-menu { margin: -8px -10px; min-width: 260px; }
.tb-menu button { align-items: flex-start; padding: 9px 10px; }
.tb-menu button svg { margin-top: 2px; }
.tb-menu button span { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.tb-menu button b { font-weight: 500; }
.tb-menu button small { color: var(--ink-3); font-size: var(--t-xs); }
@media (max-width: 900px) {
  .topbar { margin: -66px -16px 16px; height: 66px; padding: 0 12px 0 64px; top: -66px; }
  .tb-crumbs { display: none; }
  .tb-search { width: auto; flex: 1; }
  .tb-search kbd { display: none; }
}

/* =================================================================== search */

.palette-back { align-items: flex-start; padding-top: 12vh; }
.palette {
  width: min(620px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.pal-in { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.pal-in svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.pal-in input, .pal-in input:focus { border: 0; box-shadow: none; padding: 15px 0; font-size: var(--t-md);
                                     background: transparent; }
.pal-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.pal-grp { font-size: var(--t-xs); color: var(--ink-3); padding: 10px 10px 4px; }
.pal-item {
  width: 100%; justify-content: flex-start; gap: 10px; border: 0; background: none; box-shadow: none;
  border-radius: var(--r-sm); padding: 8px 10px; font-weight: 400; color: var(--ink);
}
.pal-item:hover { background: none; }
.pal-item.on { background: var(--hover-2); }
.pal-item:active:not(:disabled) { transform: none; }
.pal-item svg { width: 16px; height: 16px; color: var(--ink-3); }
/* The result's name keeps its width; the grey hint beside it is what gives way. */
.pal-l { flex: 0 0 auto; max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-h { flex: 1 1 auto; min-width: 0; margin-left: auto; text-align: right; color: var(--ink-3); font-size: var(--t-xs);
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 12px; }
.pal-none { padding: 28px 16px; text-align: center; color: var(--ink-3); }
.pal-foot { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--line);
            font-size: var(--t-xs); color: var(--ink-3); background: var(--panel-2); }
.pal-foot kbd { margin-right: 3px; }

/* =================================================================== split view */

/* On a wide screen the page makes room for an open panel instead of sitting under it,
   so the list and the record are side by side, after gr8r Studio's Inbox.

   Both halves are shares of the room beside the rail, not of the window: the panel is 46% of
   it (480 to 760px) and the page has the rest, flush against it. --rail animates as the rail
   folds (see "shell" below), so folding gives both halves more room in the same motion and
   unfolding takes it back. --split runs 0 to 1 as a panel opens, so opening one slides the
   page aside rather than snapping it. What a list hides beside a panel depends on the room
   the page actually has, measured by a container query on #main, never on the window: at
   2560px a list keeps every column beside a panel, at 1280px it keeps the three that tell
   rows apart. */
@property --split { syntax: "<number>"; inherits: true; initial-value: 0; }
:root { --drawer-w: clamp(480px, calc((100vw - var(--rail, 240px)) * .46), 760px); }
#main { container: page / inline-size; }
@media (min-width: 1200px) {
  .modal.drawer, .modal.drawer.wide { width: var(--drawer-w); }
  :root.drawer-open { --split: 1; }
  /* Beside a panel a list keeps the columns that tell rows apart, each on one line. */
  :root.drawer-open #main table { min-width: 0; }
  :root.drawer-open #main th, :root.drawer-open #main td { white-space: nowrap; }
}
/* What the panel itself shows (the agent, the market, the lists) folds out of the list only
   when the page is too narrow to keep it. The page's content box: 940px holds a calls list's
   five columns, 900px the Leads page's list picker beside its table. */
@container page (max-width: 939px) {
  :root.drawer-open .opt { display: none; }
}
@container page (max-width: 900px) {
  :root.drawer-open .leads-layout { grid-template-columns: minmax(0, 1fr); }
  :root.drawer-open .leads-layout > .group-rail { display: none; }
}
/* A panel grid stacks when its page is narrow, whatever made it narrow: the window, the rail
   or a side panel. The window rule (max-width: 1100px, under "panels") stays for the case
   with no side panel and the rail open, where the two agree. */
@container page (max-width: 820px) {
  .grid12 > [class*="s"] { grid-column: span 12; }
}
/* A page title keeps its whole width and the actions wrap under it, in a narrow page as in a
   wide one: a short title like "Leads" no longer holds 320px and pushes them down. */
@container page (max-width: 760px) {
  #main .page-head .page-title { flex: 0 1 auto; min-width: 0; }
}

/* The row whose record is open. */
tbody tr.sel td { background: var(--accent-bg); }
tbody tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
tbody tr.sel:hover td { background: var(--accent-bg); }

.drawer-back { display: inline-flex; align-items: center; gap: 4px; margin: -6px 0 10px;
               font-size: var(--t-sm); color: var(--ink-3); font-weight: 400; }
.drawer-back:hover { color: var(--ink); text-decoration: none; }
.drawer-back svg { width: 14px; height: 14px; }

/* =================================================================== needs attention */

.attention .card-head h2 { display: flex; align-items: center; gap: 8px; }
.att-list { display: flex; flex-direction: column; margin: -4px -10px -8px; }
.att {
  width: 100%; justify-content: flex-start; gap: 12px; text-align: left; white-space: normal;
  line-height: 1.4; font-weight: 400; color: var(--ink);
  border: 0; background: none; box-shadow: none; border-radius: var(--r-sm); padding: 10px;
}
.att:hover { background: var(--hover); }
.att:active:not(:disabled) { transform: none; }
.att-ico { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center;
           flex: none; background: var(--warn-bg); color: var(--warn); }
.att.bad .att-ico { background: var(--danger-bg); color: var(--danger); }
.att-ico svg { width: 15px; height: 15px; }
.att-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-t b { font-weight: 500; }
.att-t span { font-size: var(--t-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.att-go { color: var(--ink-3); display: grid; }
.att-go svg { width: 15px; height: 15px; }
.att:hover .att-go { color: var(--ink); }
.att-none { display: flex; gap: 12px; align-items: center; color: var(--ink-2); font-size: var(--t-sm); }
.att-none svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
.att-none b { display: block; color: var(--ink); font-weight: 500; font-size: var(--t-base); }

/* =================================================================== menu: what is running */

.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 4px; }
.nav-sub:empty { display: none; }
.nav-subitem {
  width: 100%; justify-content: flex-start; gap: 15px; height: 28px; padding: 0 10px 0 16px;
  border: 0; background: none; box-shadow: none; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: var(--t-sm); font-weight: 400;
}
.nav-subitem > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nav-subitem:hover { background: var(--hover-2); color: var(--ink); }
.nav-subitem:active:not(:disabled) { transform: none; }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.nav-dot.live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); animation: led 1.6s ease-in-out infinite; }
:root.rail-collapsed .nav-sub { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-dot.live { animation: none; } }

/* A phone has less room than a docked list, so the same columns fold away there. */
@media (max-width: 900px) { #main .opt { display: none; } }

/* The menu list scrolls by itself and the foot stays put, so the running entries never
   push the name, sign-out and status off a laptop screen. */
#nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 8px; }
#nav::-webkit-scrollbar { display: none; }
.sidebar .side-foot { flex: none; margin-top: 0; }
.sidebar .side-live { flex: none; }

/* Beside an open panel the page is about as wide as a small laptop's, so it takes the
   layouts it already has for narrow screens. */
@media (min-width: 1200px) {
  :root.drawer-open .ov-grid, :root.drawer-open .ctl-top, :root.drawer-open .dt-row {
    grid-template-columns: minmax(0, 1fr);
  }
  :root.drawer-open .rec { grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
  :root.drawer-open .rec-id { grid-column: 1 / -1; }
  :root.drawer-open .rec > span.kebab { display: none; }
  :root.drawer-open .rec > button.kebab { position: absolute; top: 9px; right: 9px; }
  :root.drawer-open .page-head.hero .page-actions { flex-wrap: wrap; }
}

/* Engineering pages remain reachable without occupying the primary menu. */
#engineering-nav { margin-top: 8px; }
#engineering-nav summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  cursor: pointer; color: var(--ink-2); border-radius: var(--r-sm); font-size: var(--t-sm); }
#engineering-nav summary:hover { background: var(--hover); }
#engineering-nav summary svg { width: 16px; height: 16px; flex: none; }
#engineering-nav summary::after { content: "›"; margin-left: auto; }
#engineering-nav[open] summary::after { transform: rotate(90deg); }
.rail-collapsed #engineering-nav .engineering-label { display: none; }
@media (max-width: 900px) { .rail-collapsed #engineering-nav .engineering-label { display: inline; } }

.fixed-model { display: block; padding: 9px 0; color: var(--ink-2); }

.integration-options { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.integration-options > summary { cursor: pointer; padding: 12px 0; color: var(--ink); font-weight: 600; }
.integration-options > summary .count { margin-left: 8px; color: var(--ink-2); }
/* Rate this call (console/ratings.py): five 1-to-5 scales and failure tags. */
.rate-row { display: inline-flex; gap: 4px; }
.rate-pt { position: relative; cursor: pointer; }
.rate-pt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-pt span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--line); font-variant-numeric: tabular-nums; font-size: 13px; }
.rate-pt input:checked + span { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.rate-pt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.rate-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; font-size: 13px; }
.rate-tag { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* The judges on a call (console/judges.py): one question per row, its reason beneath. */
.judge-list { display: flex; flex-direction: column; }
.judge-item { padding: 10px 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 4px; }
.judge-item:first-child { border-top: 0; }
.judge-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.judge-marks { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.judge-quote { font-size: 13px; }

/* The caller's tone under the recording (app.js toneStrip): raised turns as a faint band,
   peaks as ticks you can click to hear. Same side padding as the wave, so times line up. */
.tone-strip { margin: -4px 0 12px; }
.tone-track { position: relative; height: 14px; margin: 0 12px; border-radius: 4px; background: var(--panel-2); }
.tone-turn { position: absolute; top: 0; bottom: 0; background: var(--warn-bg); border-radius: 3px; }
.tone-peak {
  position: absolute; top: 1px; bottom: 1px; width: 4px; min-width: 4px; padding: 0; margin-left: -2px;
  border: 0; border-radius: 2px; background: var(--warn); cursor: pointer;
}
.tone-peak.loud_high { background: var(--danger); }
.tone-peak:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tone-note { margin: 6px 12px 0; }

/* ---------------------------------------------------------------- agents: one list, grades */
.ag-filters { gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.ag-filters input { max-width: 300px; }
.alist { display: flex; flex-direction: column; gap: 10px; }
.arow {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 90px 36px 32px; gap: 18px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px;
  box-shadow: var(--shadow); cursor: pointer; transition: box-shadow .14s ease, border-color .14s ease;
}
.arow:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.arow.dim { opacity: .62; }
.arow .rec-id .nm { gap: 8px; }
.arow .rec-id .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-foot { margin-top: 14px; }
@media (max-width: 940px) { .arow { grid-template-columns: minmax(0, 1fr) 110px 36px 32px; } .arow .metric:not(.ag-grade) { display: none; } }

/* A grade out of 5: colour says at a glance, the number says how much. */
.grade { display: inline-block; min-width: 44px; text-align: center; padding: 3px 8px; border-radius: var(--r-chip);
         font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-md); letter-spacing: -.02em; }
.grade.big { font-size: 28px; padding: 4px 12px; }
.grade-n { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; }
.gcell { display: inline-block; min-width: 38px; text-align: center; padding: 2px 6px; border-radius: var(--r-chip);
         font-variant-numeric: tabular-nums; font-weight: 500; }
.g5, .gcell.g5 { background: var(--ok-bg); color: var(--ok); }
.g4, .gcell.g4 { background: color-mix(in srgb, var(--ok-bg) 55%, var(--panel)); color: var(--ok); }
.g3, .gcell.g3 { background: var(--warn-bg); color: var(--warn); }
.g2, .gcell.g2 { background: var(--danger-bg); color: var(--danger); }
.g0 { background: var(--hover); color: var(--ink-3); }

/* Build your agent */
.bp .field label .muted { font-weight: 400; }
.bp select { width: 100%; }
.bp .row select { flex: 1 1 auto; min-width: 0; }
.bp-grade { margin-top: 6px; padding: 14px 16px; }
.bp-grade .muted { font-size: var(--t-sm); }

/* Ratings grid */
.rt-filters { gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rt-filters select { max-width: 200px; font-size: var(--t-sm); }
.rt-active { gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.rt-grid td.n, .rt-grid th.n { text-align: right; }
.rt-grid td.bad { color: var(--danger); font-weight: 600; }
.rt-grid .t-name { max-width: 320px; }

/* =================================================================== design system, Oct 2026 */

/* The approved concept's layout system, applied to the whole console. It comes last so it
   wins over the older rules above without each of them being rewritten: sidebar 240, page
   edge 32, 16px gaps, panels with 48px heads and a 20px inner edge that every title, row
   and first column starts on, 48px rows, 32px controls. */

/* --- scrollbars: thin, quiet, and only a thumb ------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ink-4); }
::-webkit-scrollbar-corner { background: transparent; }

/* --- shell ------------------------------------------------------------------------------- */
/* The rail's width is one length, --rail, registered so it animates. The grid track, the side
   panel's width and the page's share beside it all read it, so folding the rail moves all of
   them together, frame by frame, and nothing keeps a width from before the fold. --split
   (split view, above) does the same for a side panel opening. */
@property --rail { syntax: "<length>"; inherits: true; initial-value: 240px; }
:root {
  --rail: var(--side);
  transition: --rail 240ms cubic-bezier(.16, 1, .3, 1), --split 260ms var(--ease-out);
}
:root.rail-collapsed { --rail: 64px; }
@media (max-width: 900px) { :root, :root.rail-collapsed { --rail: 0px; } }
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

body.app { background: var(--canvas); transition: none; }
body.app main {
  margin: 0 calc(var(--drawer-w) * var(--split)) 0 0; height: 100%; border: 0; border-radius: 0;
  background: var(--canvas); transition: none;
}
@media (min-width: 901px) {
  body.app, :root.rail-collapsed body.app { grid-template-columns: var(--rail) minmax(0, 1fr); }
  body.app main { padding: 24px var(--pad) var(--pad); }
}
/* On a phone the sidebar is the slide-in menu (see "phone width" above); the page keeps
   clear of the menu button and the head wraps its actions under the title. */
@media (max-width: 900px) {
  body.app main { padding: 64px 16px 32px; }
  .page-head, .page-head.tight { flex-wrap: wrap; }
  .page-actions { margin-left: 0; flex-wrap: wrap; }
  .grid12 { grid-template-columns: minmax(0, 1fr); }
}

.sidebar { padding: 12px; gap: 2px; border-right: 1px solid var(--line); background: var(--canvas); }
.brand { gap: 10px; height: 40px; padding: 0 8px; margin-bottom: 8px; }
.brand-tfg { height: 22px; }
.brand-voice { font-size: 14px; font-weight: 600; letter-spacing: -.01em; text-transform: none;
               padding-left: 10px; }
.brand-voice::before { height: 16px; }
.env-tag { margin-left: 4px; padding: 0 6px; height: 20px; display: inline-flex; align-items: center;
           border: 0; border-radius: 4px; font-size: 11px; letter-spacing: .04em; }

.side-search {
  display: flex; align-items: center; gap: 8px; height: 32px; width: 100%; flex: none;
  padding: 0 6px 0 10px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--ink-3); font-weight: 400; box-shadow: none; justify-content: flex-start;
}
.side-search:hover { border-color: var(--line-strong); background: var(--panel); color: var(--ink-2); }
.side-search:active:not(:disabled) { transform: none; }
.side-search svg { width: 14px; height: 14px; }
.side-search kbd { margin-left: auto; }
:root.rail-collapsed .side-search { justify-content: center; padding: 0; }
:root.rail-collapsed .side-search span, :root.rail-collapsed .side-search kbd { display: none; }

.nav-item {
  height: 32px; padding: 0 8px; gap: 10px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: var(--t-base); font-weight: 500;
}
.nav-item svg { width: 16px; height: 16px; color: var(--ink-4); }
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item.active {
  background: var(--panel); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(20, 21, 25, .05);
}
.nav-item.active svg { color: var(--navy); }
:root[data-theme="dark"] .nav-item.active svg { color: var(--accent); }
.nav-item .count {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; line-height: 18px; text-align: center;
  background: var(--accent-bg); color: var(--accent-ink); font-size: 11.5px; font-weight: 600;
}
.nav-item.active .count { color: var(--accent-ink); }
.nav-sep { font-size: var(--t-xs); line-height: 16px; font-weight: 500; color: var(--ink-4); padding: 16px 8px 6px; }

.side-foot { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.side-live {
  margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); display: flex; flex-direction: column; gap: 10px;
}
.side-live .live-line { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink);
                        background: none; border: 0; padding: 0; box-shadow: none; justify-content: flex-start; }
.side-live .live-line span:last-child { margin-left: auto; color: var(--ink-3); font-weight: 400; font-size: var(--t-xs); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); flex: none; }
.btn-stop { width: 100%; height: 32px; padding: 0; border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
            color: var(--danger); background: var(--panel); }
.btn-stop:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
@media (max-height: 940px) { .side-live { display: flex; } }
.side-live[hidden] { display: none; }
:root.rail-collapsed .side-live { display: none; }

.health { padding: 0 8px; gap: 4px; }
.health:empty { display: none; }
.me { gap: 10px; padding: 8px 8px 0; height: 52px; border-top: 1px solid var(--line); }
.me .who b { font-size: var(--t-base); font-weight: 500; line-height: 16px; }
.me .who span { font-size: var(--t-xs); line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .avatar.sm { width: 28px; height: 28px; font-size: 11px; flex: none; }
.me .me-btn { width: 28px; height: 28px; padding: 0; border: 0; background: none; box-shadow: none;
              color: var(--ink-3); border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.me .me-btn:hover { background: var(--hover-2); color: var(--ink); }
.me .me-btn svg { width: 15px; height: 15px; }
.me .me-btn .i-moon, .me .me-btn.on .i-sun { display: none; }
.me .me-btn.on .i-moon { display: block; }

/* --- the folded rail: 64px of icons ----------------------------------------------------------
   The same 12px top edge as the open rail, so the mark does not drop when it folds. The head
   stacks (mark, the Dev tag on the dev console, the arrow that opens it again) instead of
   keeping the open rail's 40px row, which pushed the arrow down over Search. Every row centres
   its icon: the label's gap goes with the label, or each icon sat 5px left of centre. */
:root.rail-collapsed .sidebar { padding: 12px 8px; }
:root.rail-collapsed .brand {
  flex-direction: column; justify-content: flex-start; gap: 8px; height: auto; padding: 4px 0 0; margin-bottom: 12px;
}
:root.rail-collapsed .brand-tfg-mark { height: 22px; }
:root.rail-collapsed .env-tag { display: inline-flex; margin: 0; padding: 0 5px; height: 18px; font-size: 10px; }
:root.rail-collapsed .nav-item, :root.rail-collapsed .side-search { gap: 0; justify-content: center; padding: 0; }
/* As it folds, a label fades at once and never spills past its row onto the page. */
.nav-item { overflow: hidden; }
:root.rail-collapsed .nav-item > span:not(.count) { transition: max-width 200ms cubic-bezier(.16, 1, .3, 1), opacity 60ms ease; }
/* A count is a badge on its icon's top-right corner, not on the row's edge. */
:root.rail-collapsed .nav-item .count {
  top: 2px; left: calc(50% + 3px); right: auto; min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px;
  font-size: 10px; border-radius: 8px; background: var(--accent-bg); color: var(--accent-ink);
  box-shadow: 0 0 0 2px var(--canvas);
}
:root.rail-collapsed .nav-item.active .count { box-shadow: 0 0 0 2px var(--panel); }
/* The account row stands up: avatar, light or dark, sign out. Its 52px row height went with
   it, or sign-out ended 49px below the window and the rail scrolled. */
:root.rail-collapsed .me { flex-direction: column; height: auto; gap: 4px; padding: 8px 0 0; }
/* While calls are live the folded rail keeps the signal: the pulse and the count, which open
   the live calls. Pause all campaigns is on the open rail and on Compliance. */
:root.rail-collapsed .side-live:not([hidden]) {
  display: flex; padding: 0; border: 0; background: none; gap: 0;
}
:root.rail-collapsed .side-live .live-line {
  height: 32px; justify-content: center; gap: 6px; border-radius: var(--r-sm); font-size: var(--t-xs);
}
:root.rail-collapsed .side-live .live-line:hover { background: var(--hover); }
:root.rail-collapsed .side-live .live-line span:nth-child(2), :root.rail-collapsed .side-live .btn-stop { display: none; }
:root.rail-collapsed .side-live .live-line span:last-child { margin-left: 0; color: var(--ink); font-weight: 600; }

/* On a phone the rail is the slide-in menu, and its arrow closes it: without one the only
   way out was a tap on the dimmed page. */
@media (max-width: 900px) {
  .sidebar .side-toggle { display: grid; }
}

/* --- page head: one line, the title and the screen's one main action ---------------------- */
.page-head, .page-head.tight {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  min-height: 40px; margin: 0 0 16px; padding: 0;
}
.page-title { min-width: 0; display: flex; align-items: center; gap: 8px; }
.page-head h1, .page-title h1 {
  margin: 0; font-size: var(--t-2xl); line-height: 28px; font-weight: 600; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-head .crumb { color: var(--ink-3); font-size: var(--t-2xl); line-height: 28px; font-weight: 500;
                    background: none; border: 0; padding: 0; box-shadow: none; letter-spacing: -.02em; }
.page-head .crumb:hover { color: var(--ink); background: none; }
.page-head .crumb-sep { color: var(--line-strong); font-size: var(--t-2xl); line-height: 28px; }
.page-actions { margin-left: auto; flex-wrap: nowrap; }

/* Section and page tabs: an underline row directly under the title. */
.ptabs { display: flex; gap: 20px; margin: -4px 0 16px; border-bottom: 1px solid var(--line);
         overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptab {
  height: 40px; padding: 0; margin-bottom: -1px; border: 0; border-radius: 0; background: none;
  box-shadow: none; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 6px; flex: none;
}
.ptab:hover { color: var(--ink); background: none; border-color: transparent; border-bottom-color: transparent; }
.ptab:active:not(:disabled) { transform: none; }
.ptab.active { color: var(--ink); border-bottom-color: var(--navy); }
:root[data-theme="dark"] .ptab.active { border-bottom-color: var(--accent); }
.ptab .n { color: var(--ink-3); font-weight: 500; }

/* --- controls ------------------------------------------------------------------------------ */
button, .btn {
  height: 32px; padding: 0 12px; gap: 6px; border-radius: var(--r-sm); line-height: 1;
  font-size: var(--t-base); font-weight: 500; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); box-shadow: none;
}
button:hover, .btn:hover { background: var(--hover); }
button svg, .btn svg { width: 15px; height: 15px; }
button:active:not(:disabled), .btn:active { transform: none; }
button.primary, .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: none; }
button.primary:hover, .btn.primary:hover { background: var(--navy-2); border-color: var(--navy-2); color: var(--on-primary); opacity: 1; }
button.primary:disabled:hover { background: var(--primary); border-color: var(--primary); }
button.sm, .btn.sm { height: 28px; padding: 0 10px; font-size: var(--t-base); }
button.xs { height: 24px; padding: 0 8px; font-size: var(--t-xs); }
button.icon, .btn.icon { width: 32px; padding: 0; }
button.icon.sm { width: 28px; }
button.ghost { border-color: transparent; background: none; color: var(--ink-2); }
button.ghost:hover { background: var(--hover); color: var(--ink); border-color: transparent; }
button.tint { background: var(--hover-2); }
button.solid-danger { background: var(--danger); border-color: var(--danger); }
button.link, .link { height: auto; padding: 0; border: 0; background: none; box-shadow: none;
                     color: var(--accent-ink); font-weight: 500; }
button.link:hover, .link:hover { background: none; text-decoration: underline; text-underline-offset: 2px; }
button.kebab { width: 28px; height: 28px; border-radius: var(--r-sm); }
/* Rows and cards built on a <button> keep their own height. */
.tile, .rec, .choice, .integ, .studio-tpl, .iv-draft, .nav-subitem, .pal-item, .tab, .seg button,
.chip, .grp, .rbtn, .studio-menu button, .menu button, .studio-steplist button, .wl-branches button,
.iv-answers button, .doc, .t-row button { height: auto; }

input, select, textarea {
  height: 32px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--t-base);
  border: 1px solid var(--line-strong); background: var(--panel); box-shadow: none;
}
textarea { height: auto; padding: 8px 10px; line-height: 20px; }
select { padding-right: 28px; }
input[type="range"], input[type="checkbox"], input[type="radio"] { height: auto; }
input[type="file"] { height: auto; padding: 6px 0; border: 0; background: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy); }
label { font-size: var(--t-xs); line-height: 16px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.hint { font-size: var(--t-xs); line-height: 16px; margin-top: 6px; }
.search { max-width: 320px; }
.search input { padding-left: 32px; background: var(--panel); }
.search svg { left: 10px; width: 14px; height: 14px; }
kbd { font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 16px; padding: 0 5px;
      border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--ink-3); }

/* --- panels -------------------------------------------------------------------------------- */
.card {
  border-radius: var(--r); border: 1px solid var(--line); box-shadow: none; background: var(--panel);
  padding: 16px var(--in); margin-bottom: var(--gap);
}
.card.flat { padding: 0; }
.card > h2, .card-head h2 { font-size: var(--t-base); line-height: 20px; font-weight: 600; letter-spacing: 0; margin: 0; }
.card-head { align-items: center; min-height: 32px; margin-bottom: 12px; }
.card > .sub, .card-head .sub { font-size: var(--t-xs); line-height: 16px; color: var(--ink-3); }

.panel { display: flex; flex-direction: column; min-width: 0; background: var(--panel);
         border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: var(--gap); }
.panel-head { display: flex; align-items: center; gap: 8px; height: 48px; flex: none; padding: 0 var(--in);
              border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: var(--t-base); line-height: 20px; font-weight: 600; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.panel-head .n { color: var(--ink-3); font-weight: 500; }
.panel-head .end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.panel-head .ptabs { margin: 0 0 -1px; border: 0; height: 47px; align-self: stretch; }
.panel-head .ptab { height: 47px; }
.panel-body { padding: 16px var(--in); min-width: 0; }
.panel-body.flush { padding: 0; }
.panel-foot { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 12px var(--in);
              border-top: 1px solid var(--line); }
.panel-foot .end { margin-left: auto; display: flex; gap: 8px; }
/* A long list scrolls inside its panel, never the whole page. On a laptop or larger the page
   gives it its height ("every page fits the window", below); on a phone, where the page
   scrolls, it stops at a window's height. */
.panel-scroll { overflow-y: auto; }
@media (max-width: 900px) { .panel-scroll { max-height: calc(100vh - 240px); } }

.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.grid12 > .panel, .grid12 > .card { margin-bottom: 0; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s9 { grid-column: span 9; } .s12 { grid-column: span 12; }
@media (max-width: 1100px) { .grid12 > [class*="s"] { grid-column: span 12; } }

/* --- figures ------------------------------------------------------------------------------- */
.stats { border-radius: var(--r); box-shadow: none; margin-bottom: var(--gap); }
.stats .stat { padding: 16px var(--in); box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.stat .k { font-size: var(--t-xs); line-height: 16px; color: var(--ink-3); font-weight: 400; white-space: nowrap; }
.stat .v { margin-top: 6px; font-size: var(--t-4xl); line-height: 28px; font-weight: 500; letter-spacing: -.02em; }
.stat .v small { margin-left: 6px; font-size: var(--t-base); font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.stat .note { font-size: var(--t-xs); line-height: 16px; }

/* --- tables -------------------------------------------------------------------------------- */
.table-wrap { border-radius: var(--r); box-shadow: none; }
table { min-width: 0; }
th { height: 36px; padding: 0 12px; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3);
     background: var(--panel-2); border-bottom: 1px solid var(--line); }
td { height: var(--row); padding: 6px 12px; font-size: var(--t-base); color: var(--ink-2); border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { padding-left: var(--in); }
th:last-child, td:last-child { padding-right: var(--in); }
tbody tr:hover td { background: var(--panel-2); }
tbody tr.sel td { background: var(--accent-bg); }
tbody tr.sel td:first-child { box-shadow: none; }
td b, td strong { font-weight: 500; }
td.mono, th.mono { font-family: var(--sans); font-size: var(--t-base); }

/* --- tags and states ------------------------------------------------------------------------ */
.pill { height: 22px; padding: 0 8px; border-radius: 11px; font-size: var(--t-xs); font-weight: 500; }
.tag { height: 22px; padding: 0 8px; border-radius: 11px; display: inline-flex; align-items: center; margin: 0 4px 0 0; }
.state { gap: 8px; color: var(--ink-2); }
.state .led { width: 6px; height: 6px; }
.chip { height: 28px; padding: 0 10px; border-radius: var(--r-sm); box-shadow: none; font-size: var(--t-base); }
.chip.on { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-line); }
.seg { border-radius: var(--r-sm); padding: 2px; background: var(--hover-2); }
/* 28px buttons in a 2px frame: 32px, the height of every other control beside it. */
.seg button { height: 28px; padding: 0 10px; border-radius: 4px; font-size: var(--t-base); }
.seg button.on { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(20, 21, 25, .05); }
.tabs { gap: 20px; margin-bottom: 16px; }
.tab { height: 40px; padding: 0; font-size: var(--t-base); }
.tab.active { border-bottom-color: var(--navy); }

/* --- dialogs, panels that slide in, notices ------------------------------------------------ */
.modal { background: var(--panel); border-radius: var(--r-lg); padding: 24px; width: min(640px, 100%); }
.modal.wide { width: min(960px, 100%); }
.modal h3 { font-size: var(--t-lg); line-height: 24px; margin: 0 0 16px; letter-spacing: -.01em; }
.modal > .sub { font-size: var(--t-base); color: var(--ink-3); margin: -10px 0 16px; }
.modal-foot { gap: 8px; }
.modal.drawer { top: 0; right: 0; bottom: 0; border-radius: 0; border: 0; border-left: 1px solid var(--line);
                background: var(--panel); padding: 20px var(--in) 32px; box-shadow: var(--shadow-lg); }
.drawer-x { top: 14px; right: 14px; }
.banner { border-radius: var(--r); padding: 12px 16px; font-size: var(--t-base); }
.empty { border-style: solid; padding: 40px 24px; }
.empty b { font-size: var(--t-base); font-weight: 600; letter-spacing: 0; }
.toast { border-radius: var(--r); font-size: var(--t-base); }
.pop { border-radius: var(--r); padding: 12px 14px; }
.pop-body { font-size: var(--t-base); line-height: 20px; }

/* The title keeps at least 320px: when the actions do not fit beside it, they wrap onto their
   own row instead of cutting the title short. On a phone they start on the left, and a long
   title wraps rather than ending in an ellipsis. */
.page-head { flex-wrap: wrap; row-gap: 8px; }
/* The title's basis is its whole width, so a long one (an agent's name) moves the actions down a
   row rather than ending in an ellipsis; it still keeps 320px when the row is that narrow. */
.page-head .page-title { flex: 1 1 auto; min-width: min(320px, 100%); }
.page-head .page-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) {
  .page-head .page-actions { margin-left: 0; justify-content: flex-start; width: 100%; }
  .page-head h1 { white-space: normal; }
}

/* =================================================================== tables that scroll

   A table keeps readable columns and scrolls sideways inside its card when they cannot all
   fit; tables.js gives each table the minimum width its columns need. These are the parts
   every table shares: the box it scrolls in, the fade on an edge that has more beyond it,
   the name column that stays in view, and the ring when the box has keyboard focus. */
.tscroll-new { overflow-x: auto; overflow-y: hidden; max-width: 100%; contain: inline-size; }
/* A header set to stick below a bar in the list around it (Agent checks) cannot reach that
   list from inside its own scroll box, so it sits at the top of the box instead. */
.tscroll-new > table > thead > tr > :is(th, td) { top: 0; }
/* Keyboard focus rings the card the table is in: a ring on the box itself would be drawn
   under the cells that stay in view. Outside a card, the box has the ring. */
.tscroll { overscroll-behavior-x: contain; isolation: isolate; }
.tscroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel:has(.tscroll:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel .tscroll:focus-visible { outline: none; }
/* The fade leaves the scrollbars clear (--sb-w, --sb-h are their widths, 0 where they float).
   --fade-l and --fade-r are as wide as what is hidden on that side, up to 40px. */
.tscroll.more-r {
  -webkit-mask: linear-gradient(to left, #000 var(--sb-w, 0px), transparent var(--sb-w, 0px), #000 calc(var(--sb-w, 0px) + var(--fade-r, 40px))),
                linear-gradient(#000, #000) bottom / 100% var(--sb-h, 0px) no-repeat;
          mask: linear-gradient(to left, #000 var(--sb-w, 0px), transparent var(--sb-w, 0px), #000 calc(var(--sb-w, 0px) + var(--fade-r, 40px))),
                linear-gradient(#000, #000) bottom / 100% var(--sb-h, 0px) no-repeat;
}
.tscroll.more-l:not(.stick, .stick2) {
  -webkit-mask: linear-gradient(to right, transparent, #000 var(--fade-l, 40px)), linear-gradient(#000, #000) bottom / 100% var(--sb-h, 0px) no-repeat;
          mask: linear-gradient(to right, transparent, #000 var(--fade-l, 40px)), linear-gradient(#000, #000) bottom / 100% var(--sb-h, 0px) no-repeat;
}
.tscroll.more-l.more-r:not(.stick, .stick2) {
  -webkit-mask: linear-gradient(to right, transparent, #000 var(--fade-l, 40px), #000 calc(100% - var(--sb-w, 0px) - var(--fade-r, 40px)), transparent calc(100% - var(--sb-w, 0px)), #000 calc(100% - var(--sb-w, 0px))),
                linear-gradient(#000, #000) bottom / 100% var(--sb-h, 0px) no-repeat;
          mask: linear-gradient(to right, transparent, #000 var(--fade-l, 40px), #000 calc(100% - var(--sb-w, 0px) - var(--fade-r, 40px)), transparent calc(100% - var(--sb-w, 0px)), #000 calc(100% - var(--sb-w, 0px))),
                linear-gradient(#000, #000) bottom / 100% var(--sb-h, 0px) no-repeat;
}
/* The row's name stays in view; with a tick box in front of it, both do. Cells keep the
   panel behind them so the columns slide under, and hover and selection still show. */
.tscroll.stick table > :is(thead, tbody, tfoot) > tr > :first-child:not([colspan]),
.tscroll.stick2 table > :is(thead, tbody, tfoot) > tr > :first-child:not([colspan]),
.tscroll.stick2 table > :is(thead, tbody, tfoot) > tr > :nth-child(2):not([colspan]) {
  position: sticky; left: 0; z-index: 1;
}
.tscroll.stick2 table > :is(thead, tbody, tfoot) > tr > :nth-child(2):not([colspan]) { left: var(--stick-1, 0px); }
.ts-hold { position: sticky; left: var(--in, 20px); display: inline-block; }
.tscroll td:has(> .ts-hold) { overflow: visible; }
.tscroll:is(.stick, .stick2) table > thead > tr > :is(th, td) { z-index: 2; }
.tscroll.stick table > thead > tr > :first-child:not([colspan]),
.tscroll.stick2 table > thead > tr > :is(:first-child, :nth-child(2)):not([colspan]) { z-index: 3; }
:where(.tscroll.stick, .tscroll.stick2) :where(tbody > tr > td:is(:first-child, :nth-child(2))) { background-color: var(--panel); }
.tscroll:is(.stick, .stick2) tbody tr.sel > td:is(:first-child, :nth-child(2)) {
  background: linear-gradient(var(--accent-bg), var(--accent-bg)) var(--panel);
}
.tscroll.stick.more-l table > :is(thead, tbody, tfoot) > tr > :first-child:not([colspan])::after,
.tscroll.stick2.more-l table > :is(thead, tbody, tfoot) > tr > :nth-child(2):not([colspan])::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -12px; width: 12px; pointer-events: none;
  background: linear-gradient(to right, rgb(0 0 0 / .09), transparent);
}
:root[data-theme="dark"] .tscroll.stick.more-l table > :is(thead, tbody, tfoot) > tr > :first-child:not([colspan])::after,
:root[data-theme="dark"] .tscroll.stick2.more-l table > :is(thead, tbody, tfoot) > tr > :nth-child(2):not([colspan])::after {
  background: linear-gradient(to right, rgb(0 0 0 / .35), transparent);
}

/* =================================================================== every page fits the window

   Div, 19 Oct 2026: "if one container is extremely longer you are not supposed to make the
   entire page scrollable only the containers internals".

   On a laptop or a desktop the page is a column as tall as the window. The head, the tabs and
   any bar keep their height, and the page's last part has the room left under them. When what
   it holds is taller than that room it shrinks to it and its long panel scrolls inside itself,
   so a long list ends on the same edge on every page, the page's padding above the window's
   foot. When it holds less it keeps its own height. A wrapper that holds a tab's body (an
   agent's, a campaign's, Compliance's, Results') hands the room on to its own last part. On a
   phone (900px and under) panels stack and the page scrolls.

   This takes over from the "calc(100vh - 248px)" heights each page used to guess: those
   stopped a list short of the window or ran it past, by a different amount on each page, and
   broke when the title's actions wrapped onto a second row. The selectors are wrapped in
   :where() so an area's own rule still wins over these. */
@media (min-width: 901px) {
  body.app main { display: flex; flex-direction: column; }
  body.app main > * { flex: none; }
  body.app main > :last-child { flex: 0 1 auto; min-height: 0; }
  :where(#tab-body, #cp-tab, #dt-body, .cmp) { display: flex; flex-direction: column; min-width: 0; }
  :where(#tab-body, #cp-tab, #dt-body, .cmp) > * { flex: none; }
  :where(#tab-body, #cp-tab, #dt-body, .cmp, .res, .ctl, .set-page) > :last-child { flex: 0 1 auto; min-height: 0; }
  :where(main, #tab-body, #cp-tab, #dt-body, .cmp, .res, .ctl, .set-page) > :where(.panel, .grid12):last-child { margin-bottom: 0; }

  /* A panel in the room: its head and foot stay and its body scrolls. A body that holds only
     a list (a table in its scroll box, a long text) hands the room on to that list instead,
     so a table's column heads stay in view while its rows scroll. */
  :where(:where(main, #tab-body, #cp-tab, #dt-body, .cmp, .res, .ctl, .set-page) > .panel:last-child,
         :where(main, #tab-body, #cp-tab, #dt-body, .cmp, .res) > .grid12:last-child > .panel,
         :where(main, #tab-body, #cp-tab, #dt-body, .cmp, .res) > .grid12:last-child > div > .panel) > .panel-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
  }
  :where(:where(main, #tab-body, #cp-tab, #dt-body, .cmp, .res, .ctl, .set-page) > .panel:last-child,
         :where(main, #tab-body, #cp-tab, #dt-body, .cmp, .res) > .grid12:last-child > .panel,
         :where(main, #tab-body, #cp-tab, #dt-body, .cmp, .res) > .grid12:last-child > div > .panel)
    > .panel-body:has(> :only-child:is(.tscroll, .table-wrap, .panel-scroll, pre)) {
    display: flex; flex-direction: column; overflow: hidden;
  }
  :where(.panel-body) > :only-child:where(.tscroll, .table-wrap, .panel-scroll, pre) { flex: 0 1 auto; min-height: 0; }
}

/* Panels side by side share their top and their bottom edge, as in the approved concept: the
   shorter one keeps its content at the top and its foot at the bottom. A grid cell that wraps
   a panel passes its height on to it. */
.grid12 { align-items: stretch; }
.grid12 > div { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.grid12 > div > .panel:last-child { flex: 1 1 auto; margin-bottom: 0; }
:where(.grid12 > .panel, .grid12 > div > .panel) > .panel-body { flex: 1 1 auto; }

/* A figure's label takes a second line when its tile is too narrow for it, rather than being
   cut; the label grows so every figure in the strip keeps the same baseline. */
.stats > .stat { display: flex; flex-direction: column; }
.stats > .stat > .k { flex: 1 0 auto; white-space: normal; }

/* On a phone a panel's title wraps rather than ending in an ellipsis, and what sits at the end
   of its head moves under it when there is no room; a choice list or a row of choices is never
   wider than the panel it is in (a long row of choices scrolls sideways inside itself). */
@media (max-width: 600px) {
  .panel-head:not(:has(> .ptabs)) { height: auto; min-height: 48px; flex-wrap: wrap; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .panel-head h2 { white-space: normal; }
  .panel-head .end { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  #main select { max-width: 100%; }
  #main .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #main .seg > button { flex: none; }
}

/* A side panel's row of actions (Close, Save, Remove) sits on the panel's foot, as the call and
   lead panels' do, rather than under its content, halfway down a short panel. */
.modal.drawer:has(> .modal-foot:last-child) { display: flex; flex-direction: column; }
.modal.drawer:has(> .modal-foot:last-child) > * { flex: none; }
.modal.drawer:has(> .modal-foot:last-child) > :nth-last-child(2) { margin-bottom: 24px; }
.modal.drawer > .modal-foot:last-child { margin-top: auto; }