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

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

:root {
  color-scheme: light;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px 12px 14px;
  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: 10px; padding: 4px 8px 20px; }
.brand-tfg { display: block; height: 26px; width: auto; }
.brand-tfg-mark { display: none; height: 26px; width: auto; }

/* "Voice" set against the logo. The logo is a stacked three-line wordmark, so this is
   optically centred on it rather than baseline-aligned, and the tracking is opened up
   to match the airiness of the mark's own letterforms. The hairline is what stops two
   wordmarks reading as one run-on phrase. */
.brand-voice {
  font-size: 15px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink); line-height: 1; white-space: nowrap;
  padding-left: 13px; margin-left: 2px; position: relative;
}
.brand-voice::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--line);
}
:root[data-theme="dark"] .brand-tfg,
:root[data-theme="dark"] .brand-tfg-mark { filter: invert(1) brightness(1.8); }
.side-toggle {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  border: 0; background: var(--panel-2); color: var(--ink-3);
  cursor: pointer; padding: 0;
  transition: color 160ms ease, background 160ms ease;
}
.side-toggle:hover { background: var(--panel-2); color: var(--ink); }
.side-toggle svg { width: 15px; height: 15px; display: block;
                   transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
:root.rail-collapsed .side-toggle svg { transform: rotate(180deg); }
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, #818CF8, var(--accent-strong));
  color: #FFF; display: grid; place-items: center;
}
/* 22px, not 20: the real mark is a 3-unit stroke where the old approximation was
   6.5, so it needs slightly more room to carry the same weight in the chip. */
.brand .mark .tenra-mark { width: 22px; }
.brand .who { min-width: 0; }
.brand .who b { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -.02em;
                line-height: 1.25; }
.brand .who span { display: block; font-size: 9.5px; 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: 11px;
  padding: 7px 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: 13px; font-weight: 500;
  text-align: left; width: 100%;
}
.nav-item svg { width: 16px; height: 16px; flex: none; }
/* The label carries its own left margin rather than riding the flex gap, so the icon
   can glide to centre as the rail folds instead of the text snapping out from under it.
   Width, margin and opacity animate together. */
.nav-item > span:not(.count) {
  margin-left: 0; max-width: 150px; overflow: hidden; white-space: nowrap;
  transition: max-width 260ms cubic-bezier(.16, 1, .3, 1),
              opacity 140ms ease;
}
.nav-item:hover { background: var(--panel-2); color: var(--ink); border: 0; }
.nav-item.active { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.nav-item .count {
  margin-left: auto; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; font-weight: 500;
}
/* Empty counts render an empty <span>, which still eats the `margin-left: auto` and
   shoves the label. Nothing to show means nothing in the box. */
.nav-item .count:empty { display: none; }
.nav-item.active .count { color: var(--accent-ink); opacity: .75; }

.nav-sep {
  font-size: 10px; letter-spacing: .11em; text-transform: uppercase; font-weight: 650;
  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: 3px; }

.side-foot { margin-top: auto; padding-top: 12px; }
.health { display: flex; flex-direction: column; gap: 5px; padding: 0 11px 12px; }
.health .row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; 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: 10px; width: 100%;
  padding: 10px 8px 2px; border-top: 1px solid var(--line);
}
.me .who { min-width: 0; flex: 1; }
.me .who b { display: block; font-size: 12.5px; font-weight: 600;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .who span { display: block; font-size: 11px; color: var(--ink-3); }
.me a.out { color: var(--ink-3); display: grid; place-items: center; width: 28px; height: 28px;
            border-radius: 7px; }
.me a.out svg { width: 15px; height: 15px; }
.me a.out:hover { background: var(--panel-2); color: var(--danger); }

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

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

/* 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: 9px 0; }
:root.rail-collapsed .nav-item > span:not(.count) { max-width: 0; opacity: 0; }

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

/* Health: the dots are the signal, the words are the explanation. Keep the dots,
   centre them, and move the words onto a `title` in app.js. */
:root.rail-collapsed .health { padding: 0 0 12px; align-items: center; gap: 7px; }
: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: 10px 0 2px;
}
:root.rail-collapsed .me .who { display: none; }

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

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-head h1 { font-size: 20px; font-weight: 680; letter-spacing: -.025em; margin: 0 0 4px; }
.page-head p { margin: 0; color: var(--ink-2); max-width: 82ch; font-size: 12.5px; }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

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

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

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

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

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

input, select, textarea {
  font-family: var(--sans); font-size: 13px; width: 100%;
  padding: 9px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type="range"], input[type="checkbox"], input[type="radio"], input[type="file"] {
  padding: 0; width: auto;
}
input[type="file"] { width: 100%; font-size: 12.5px; }
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: 12.5px; }
label { display: block; font-size: 12px; font-weight: 550; color: var(--ink-2); margin-bottom: 6px; }
.hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
.hint.warn { color: var(--warn); }
.hint code, .sub code, p code, li code, .banner code {
  font-family: var(--mono); font-size: .9em; background: var(--panel-2);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px;
}

.field { margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.row { display: flex; gap: 10px; 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: 9px; cursor: pointer; margin-bottom: 0; }
.switch input { margin: 0; }
.switch span { font-size: 13px; 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: 35px; 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: 16px 18px; margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.card.flat { padding: 0; overflow: hidden; }
.card > h2 { font-size: 14px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 3px; }
.card > .sub { color: var(--ink-2); font-size: 12.5px; margin: 0 0 16px; max-width: 78ch; }
.card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.card-head h2 { margin: 0 0 2px; font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
.card-head .sub { margin: 0; color: var(--ink-2); font-size: 12.5px; }
.card-head .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }

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

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

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

.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
         margin-bottom: 14px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
        padding: 14px 16px; box-shadow: var(--shadow); }
.stat .k { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.stat .foot { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.stat .v { font-size: 23px; font-weight: 680; letter-spacing: -.035em;
           font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .note { font-size: 11.5px; 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: 12px;
         font-weight: 600; color: var(--ink-3); margin-left: auto;
         font-variant-numeric: tabular-nums; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }

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

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

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

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

/* The profile artefact. A soft tinted disc with a monogram, keyed off the name, so the
   same agent is the same colour on every screen and a new one never collides by
   accident. The reference uses illustrated portraits; a monogram is the honest stand-in
   - it identifies without implying a photograph of a person who does not exist. */
.avatar {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 680; font-size: 15px; letter-spacing: -.02em; flex: none;
  position: relative; overflow: hidden;
}
.avatar.sq { border-radius: 13px; }
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.avatar.xs { width: 22px; height: 22px; font-size: 9px; }
.avatar.lg { width: 60px; height: 60px; font-size: 20px; }
.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 18px 2px; font-size: 15px; font-weight: 650;
          letter-spacing: -.02em; }
th { text-align: left; font-size: 11.5px; color: var(--ink-3); font-weight: 500;
     padding: 9px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th .sort { opacity: .5; font-size: 9px; }
td { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2);
     font-size: 12.5px; }
td b, td strong { color: var(--ink); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-2); }
td.mono, th.mono { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 650; color: var(--ink); border-top: 1px solid var(--line); }
td .link { color: var(--accent-ink); cursor: pointer; font-weight: 550; }
td .link:hover { text-decoration: underline; }
th.pick, td.pick { width: 18px; padding-right: 0; }
a.more { color: var(--accent-ink); font-weight: 600; font-size: 12.5px; text-decoration: none;
         cursor: pointer; display: inline-block; margin-top: 14px; }
a.more:hover { text-decoration: underline; }

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

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

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

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

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

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

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

/* Agents and campaigns are the same object at different scales: an artefact, a name and
   some state, then three figures and an overflow menu. One component, used twice. */
.rec {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 94px) 28px;
  gap: 18px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 16px; box-shadow: var(--shadow); cursor: pointer; width: 100%;
  text-align: left; transition: box-shadow .14s ease, border-color .14s ease;
}
.rec:hover { box-shadow: var(--shadow-md); border-color: var(--accent-line);
             background: var(--panel); }
.rec-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rec-id .nm { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 14.5px;
              letter-spacing: -.015em; flex-wrap: wrap; }
.rec-id .sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.rec-id dl { margin: 6px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
             gap: 2px 12px; font-size: 11.5px; }
.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: 16px; font-weight: 680; letter-spacing: -.03em;
            font-variant-numeric: tabular-nums; }
.metric span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
@media (max-width: 940px) {
  .rec { grid-template-columns: repeat(3, 1fr); }
  .rec-id { grid-column: 1 / -1; }
  .rec > .kebab { display: none; }
}

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

.chart { width: 100%; display: block; overflow: visible; }
.chart .gridline { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--ink-3); font-size: 10px; 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: 18px; align-items: center; font-size: 12px;
                color: var(--ink-2); }
.chart-legend .k { display: flex; align-items: center; gap: 7px; }
.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: 20px; font-weight: 680; letter-spacing: -.03em;
                font-variant-numeric: tabular-nums; }
.donut .mid span { display: block; font-size: 11px; color: var(--ink-3); }
.donut path { transition: opacity .12s ease; }
.donut path:hover { opacity: .82; }

.keys { display: flex; flex-direction: column; gap: 11px; min-width: 168px; flex: 1; }
.keys .k { display: flex; align-items: center; gap: 9px; font-size: 12.5px; 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: 14px; }
.rank { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 10px; align-items: center; font-size: 13px; }
.rank .ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
             background: var(--accent-bg); color: var(--accent-ink); flex: none; }
.rank .ico svg { width: 14px; height: 14px; }
.rank .nm { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; }
.rank .vl { font-weight: 650; font-variant-numeric: tabular-nums; }

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

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

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

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

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

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

/* The ring is three stacked layers: a blurred colour bloom that reads as glow, a conic
   gradient clipped to a thin annulus, and a plain disc so the middle stays panel-white
   rather than a washed-out gradient centre. Measured off the reference: the hole sits
   at 87% of the radius, which makes the band about an eighth of it - a hair, not a
   donut. Static, because that is how the reference reads; the only motion is a slow
   breath while a call is actually up. */
.ring { position: relative; width: 208px; height: 208px; margin: 0 auto 22px;
        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: 32px; font-weight: 680; letter-spacing: -.04em;
                        color: var(--ink); }
.ring .core .initials.small { font-size: 20px; letter-spacing: -.02em; }
.ring.live { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.018); } }
@media (prefers-reduced-motion: reduce) { .ring.live { animation: none; } }

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

.call-acts { display: flex; justify-content: center; gap: 14px; margin-top: 26px; 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: 11px; color: var(--ink-3); font-weight: 500; }
.rbtn i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
          background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
          box-shadow: var(--shadow); transition: all .13s ease; }
.rbtn svg { width: 19px; height: 19px; }
.rbtn:hover { background: none; border: 0; }
.rbtn:hover i { border-color: #D6DAE3; color: var(--ink); }
.rbtn.on i { background: var(--accent-bg); border-color: var(--accent-line);
             color: var(--accent-ink); }
.rbtn.end i { background: var(--danger); border-color: var(--danger); color: #FFF;
              box-shadow: 0 4px 12px -3px rgba(239, 68, 68, .5); }
.rbtn.end:hover i { background: #DC2626; border-color: #DC2626; }
.rbtn:disabled { opacity: .4; }
.rbtn:disabled:hover i { border-color: var(--line); color: var(--ink-2); }

.timer { font-family: var(--mono); font-size: 17px; 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: 14px 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: 13.5px; font-weight: 650; letter-spacing: -.015em; }
.facts .f { margin-bottom: 11px; }
.facts .f:last-child { margin-bottom: 0; }
.facts .f dt { font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; }
.facts .f dd { margin: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.facts .f dd.mono { font-family: var(--mono); font-size: 12.5px; }

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

.transcript { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
              height: 420px; overflow-y: auto; padding: 16px; display: flex;
              flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.transcript.tall { height: 520px; }
.turn { background: var(--panel-2); border-radius: 10px; padding: 11px 13px; }
.turn .who { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.turn .who .avatar { width: 17px; height: 17px; font-size: 8px; }
.turn .who b { font-size: 12px; font-weight: 650; color: var(--accent-ink); }
.turn .who .at { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.turn .body { font-size: 13.5px; 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: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column;
         gap: 14px; text-align: left; align-items: stretch;
         transition: box-shadow .14s ease, border-color .14s ease; }
.integ:hover { box-shadow: var(--shadow-md); border-color: var(--accent-line);
               background: var(--panel); }
.integ .top { display: flex; gap: 13px; align-items: center; }
.integ .logo { width: 36px; height: 36px; flex: none; display: grid; place-items: center;
               border-radius: 9px; overflow: hidden; }
.integ .logo img { width: 36px; height: 36px; object-fit: contain; display: block; }
.integ .logo.letter { font-weight: 700; font-size: 14px; color: #FFF; letter-spacing: -.02em; }
.integ .nm { font-weight: 650; font-size: 13.5px; letter-spacing: -.01em; }
.integ .cat { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.integ .why { font-size: 12px; 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: 14px; align-items: center; padding: 14px 18px;
       border-bottom: 1px solid var(--line-soft); }
.doc:last-child { border-bottom: 0; }
.doc:hover { background: var(--panel-2); }
.doc .ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
            background: var(--panel-2); color: var(--ink-3); border: 1px solid var(--line); }
.doc .ico svg { width: 17px; height: 17px; }
.doc .nm { font-weight: 620; font-size: 13.5px; letter-spacing: -.01em; }
.doc .meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.doc .sz { font-family: var(--mono); font-size: 12px; 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: 13px; background: var(--panel-2); }
.drop.over { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink); }
.drop b { color: var(--ink); }

/* =================================================================== flow canvas */

/* The script editor, dressed as the builder canvas it is on its way to becoming. The
   dotted ground and the node cards are real; there is no drag-and-drop behind them yet
   and nothing here pretends otherwise. */
.canvas { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r);
          background-image: radial-gradient(var(--line) 1.1px, transparent 1.1px);
          background-size: 18px 18px; padding: 20px; }
.node { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
        box-shadow: var(--shadow-md); padding: 16px 18px; margin-bottom: 14px; }
.node-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.node-type { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
             flex: none; }
.node-type svg { width: 14px; height: 14px; }
.node-head .id { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }

/* Node families carry 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. */
.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: 9px; align-items: center; margin-bottom: 8px; }
.edge .arrow { color: var(--ink-3); flex: none; }

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

.leads-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 22px; }
@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: 10.5px; letter-spacing: .1em; text-transform: uppercase;
                  color: var(--ink-3); font-weight: 600; padding: 4px 10px 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 10px; font-size: 12.5px; color: var(--ink-2); border-radius: var(--r-sm);
       box-shadow: none; font-weight: 500; }
.grp:hover { background: var(--panel-2); color: var(--ink); border-color: transparent; }
.grp.on { background: var(--accent-bg); color: var(--accent-ink); font-weight: 620;
          border-color: transparent; }
.grp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-count { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.grp.on .grp-count { color: var(--accent-ink); }
.grp-count em { font-style: normal; opacity: .65; }

.toolbar { display: flex; align-items: center; gap: 10px; 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: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

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

.pickers { display: flex; flex-wrap: wrap; gap: 8px; }
.picker { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12.5px;
          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: 11px; 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: 14px 16px;
          margin-bottom: 16px; font-size: 13px; 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: 6px 0 0; padding-left: 18px; }
.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: 13.5px; background: var(--panel); }
.empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 6px;
           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: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 12px;
           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: 10px;
               border-bottom: 1px solid var(--line-soft); }
  .field-row.hdr { display: none; }   /* column labels make no sense once rows stack */
}

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

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

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

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

/* 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: 10.5px; 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: 9px 12px;
           font-size: 12px; box-shadow: var(--shadow-lg); max-width: 280px; color: var(--ink); }
.bar-tip .k { color: var(--ink-3); font-size: 10.5px; font-family: var(--mono);
              letter-spacing: .06em; text-transform: uppercase; }
.bar-tip .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.legend .item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; 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: 11.5px; }

.kv { display: flex; flex-direction: column; gap: 10px; }
.kv .item, .kv > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.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: 14px; margin-bottom: 36px; }
.lockup-tenra { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.lockup-tenra .tenra-mark { width: 34px; }
.lockup-tenra b { font-size: 17px; font-weight: 680; letter-spacing: -.04em; }
.lockup-x { color: var(--ink-3); font-size: 15px; }
.lockup-tfg { display: block; height: 25px; width: auto; }
:root[data-theme="dark"] .lockup-tfg { filter: invert(1) brightness(1.7); }

.auth-h1 { font-size: 30px; font-weight: 680; letter-spacing: -.04em; margin: 0 0 8px; }
.auth-sub { color: var(--ink-2); font-size: 13.5px; margin: 0 0 26px; }

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

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

.auth-submit { width: 100%; padding: 12px; font-size: 14px; font-weight: 650; border-radius: 10px;
               background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.auth-submit:hover { background: var(--accent-strong); border-color: var(--accent-strong);
                     color: var(--on-accent); }
.auth-foot { margin: 32px 0 0; font-size: 10.5px; 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: 10.5px; letter-spacing: .16em;
                   text-transform: uppercase; font-weight: 600; opacity: .85; margin-bottom: 10px; }
.auth-art-line { margin: 0; font-size: 25px; font-weight: 620; letter-spacing: -.03em;
                 line-height: 1.28; max-width: 16ch; text-shadow: 0 2px 20px rgba(0,0,0,.35); }