/* ==========================================================================
   Parable design system.

   Ported from the Parable style lookbook. The lookbook is plain HTML/CSS/SVG,
   so it maps directly onto this app's vanilla stack — no framework needed and
   the charts stay hand-rolled SVG.

   Rules this file enforces, from the handoff spec:
     - Ink on white does the talking. Colour never carries meaning in text.
     - Nothing is sharp: pills for interactive, 20px cards, 28px panels,
       14px nested media. No other radii.
     - Pastels are atmosphere. They appear only in the gradient mesh.
     - Full-strength brand orange is never a UI colour; the brand enters as
       peach only (mesh, paused chip, login eyebrow).
     - Lime is the single "moment" accent — one per view, always an action.
     - Status colour lives only in chips, never on whole rows or cards.
   ========================================================================== */

:root {
  /* Canvas & ink.
     `--canvas-base` is the page behind everything; `--canvas` is what sits on it
     (cards, sidebar, inputs). Identical in light — white on white, separated by
     the hairline — and pulled apart in dark, where a border alone reads flat. */
  --canvas-base: #FFFFFF;
  --canvas: #FFFFFF;
  --canvas-soft: #F7F7F8;
  --ink: #101013;
  --ink-secondary: #5E5E66;
  --ink-tertiary: #9A9AA3;
  /* Two tiers, because a card edge and an input border have different jobs.
     `--line` is structure — card edges, table rows, zone rules. `--line-strong`
     is anything you can interact with, which has to read as a control rather
     than as a suggestion. The old single #EBEBEE sat at 1.19:1 against white:
     technically present, practically invisible. */
  --line: #D6D6DE;
  --line-strong: #B4B4C0;
  /* Text on an `--ink` fill (primary button, active pill, toast). Flips with the
     theme, because in dark the ink fill is the light one. */
  --on-ink: #FFFFFF;
  /* Text on lime. Deliberately does NOT flip: lime is a fixed light colour in
     both themes, so what sits on it stays dark. */
  --on-accent: #101013;

  --canvas-blur: rgba(255, 255, 255, 0.85);
  --focus-ring: rgba(16, 16, 19, 0.08);
  --scrim: rgba(16, 16, 19, 0.35);
  --mesh-opacity: 0.45;

  /* Accents — mesh only, except lime (actions) and peach (paused chip) */
  --accent-lime: #D9F462;
  --accent-lilac: #C9B8FF;
  --accent-peach: #FFD9C2;
  --accent-sky: #BFE3FF;

  /* Chart-grade deepenings of the mesh pastels, so data feels native */
  --chart-lilac: #9B82F5;
  --chart-sky: #6CACE8;

  /* Status — semantic and fixed. Red exists ONLY for errors. */
  --status-active-bg: #D8F0DC;   --status-active-fg: #2E6B34;
  --status-paused-bg: #FFD9C2;   --status-paused-fg: #8A4A22;
  --status-off-bg:    #F7F7F8;   --status-off-fg:    #9A9AA3;
  --status-error-bg:  #FFDEDE;   --status-error-fg:  #B02E2E;

  --mesh:
    radial-gradient(60% 80% at 15% 20%, var(--accent-lilac) 0%, transparent 60%),
    radial-gradient(50% 70% at 85% 15%, var(--accent-sky) 0%, transparent 55%),
    radial-gradient(55% 75% at 70% 90%, var(--accent-peach) 0%, transparent 55%);

  /* Radii */
  --r-pill: 999px;
  --r-card: 20px;
  --r-card-lg: 28px;
  --r-media: 14px;

  --shadow-rest: 0 1px 2px rgba(16, 16, 19, 0.04);
  --shadow-hover: 0 12px 32px rgba(16, 16, 19, 0.10);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-display: clamp(2.25rem, 5vw, 3.25rem);
  --text-h2: clamp(1.5rem, 3vw, 2rem);
  --text-h3: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  --space-gutter: clamp(1rem, 3vw, 2rem);
  --sidebar-w: 236px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}

/* ── Dark theme ─────────────────────────────────────────────────────────────
   An operator preference, not a redesign. Light stays the default and the spec
   above still describes it; this only re-points the palette, so every rule below
   is written once and both themes inherit it.

   Not an inversion. Ink and canvas swap roles — so the primary button becomes a
   light fill with dark text, which is the same "ink does the talking" idea — but
   the pastels are held back, since a mesh tuned for white glows on black.

   Set by `data-theme` on <html>, written before first paint (see dashboard.html)
   so the page never flashes white. */
:root[data-theme="dark"] {
  --canvas-base: #0E0E11;
  --canvas: #17171B;
  --canvas-soft: #212127;
  --ink: #F2F2F5;
  --ink-secondary: #9E9EAA;
  --ink-tertiary: #6B6B78;
  --line: #3A3A45;
  --line-strong: #4A4A58;
  --on-ink: #0E0E11;

  --canvas-blur: rgba(14, 14, 17, 0.85);
  --focus-ring: rgba(242, 242, 245, 0.16);
  --scrim: rgba(0, 0, 0, 0.6);
  --mesh-opacity: 0.22;

  /* Deepened so the mesh reads as atmosphere rather than neon. */
  --accent-lilac: #6B5AA8;
  --accent-peach: #A87355;
  --accent-sky: #5A87A8;

  /* Lifted instead: a line has to carry over a dark ground. */
  --chart-lilac: #B49CFF;
  --chart-sky: #7FC0F5;

  /* Same semantics, re-tuned: tinted dark fills with a legible foreground.
     Contrast is what changes, never which colour means what. */
  --status-active-bg: #17321F;   --status-active-fg: #7ED694;
  --status-paused-bg: #3A2416;   --status-paused-fg: #F0B183;
  --status-off-bg:    #212127;   --status-off-fg:    #8A8A96;
  --status-error-bg:  #3A1A1A;   --status-error-fg:  #F08A8A;

  /* Black, and heavier — a light-mode shadow is invisible on a dark ground. */
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Both themes are authored, so tell the browser: form controls, scrollbars and
   the like follow instead of staying stubbornly light. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--canvas-base);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

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

/* Motion is decoration — remove it entirely when asked. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .kpi-card:hover, .btn:hover { transform: none !important; }
}

/* ── Typography ─────────────────────────────────────────────────────────── */

h1, h2, h3 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
h1 { font-size: var(--text-h2); }
h2 { font-size: var(--text-h3); letter-spacing: -0.02em; }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

.muted { color: var(--ink-secondary); }
.tertiary { color: var(--ink-tertiary); }
.small { font-size: var(--text-small); }
.micro { font-size: var(--text-micro); }
.num { font-variant-numeric: tabular-nums; }

/* ── App shell ──────────────────────────────────────────────────────────── */

.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--canvas);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-logo {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  padding: 6px 12px 18px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item:hover { background: var(--canvas-soft); color: var(--ink); }
.nav-item.active { background: var(--canvas-soft); color: var(--ink); font-weight: 600; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--canvas-blur);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 12px var(--space-gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}
.main { min-width: 0; }
.content { padding: 28px var(--space-gutter) 72px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    border-right: none; border-bottom: 1px solid var(--line); align-items: center;
  }
  .sidebar-logo { padding: 0 10px 0 4px; }
  .nav-item { width: auto; }
}

/* ── Buttons — always pills ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--text-small);
  padding: 11px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }

.btn-secondary { background: var(--canvas); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink-tertiary); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--ink-secondary); }
.btn-ghost:hover { background: var(--canvas-soft); color: var(--ink); }

/* The one "money action" per view. Never a status, never decoration. */
.btn-accent { background: var(--accent-lime); color: var(--on-accent); }
.btn-accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }

.btn-danger { background: var(--canvas); color: var(--status-error-fg); border-color: var(--line-strong); }
.btn-danger:hover { border-color: var(--status-error-fg); }

.btn-sm { padding: 7px 16px; font-size: var(--text-micro); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--canvas);
  cursor: pointer; display: grid; place-items: center;
  color: var(--ink-secondary);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--canvas-soft); color: var(--ink); }

/* ── Inputs ─────────────────────────────────────────────────────────────── */

.input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 11px 20px;
  font-size: var(--text-small);
  color: var(--ink);
  background: var(--canvas);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea.input { border-radius: var(--r-card); padding: 14px 18px; line-height: 1.5; resize: vertical; }
.input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.input::placeholder { color: var(--ink-tertiary); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-tertiary);
}
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row > .field { flex: 1; min-width: 180px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
}
.card-pad { padding: 22px; }
.card-list { display: flex; flex-direction: column; gap: 12px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ── Status chips — the only place status colour appears ────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-micro); font-weight: 600;
  border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-active { background: var(--status-active-bg); color: var(--status-active-fg); }
.chip-paused { background: var(--status-paused-bg); color: var(--status-paused-fg); }
.chip-off    { background: var(--status-off-bg);    color: var(--status-off-fg); }
.chip-error  { background: var(--status-error-bg);  color: var(--status-error-fg); }
.chip-plain  { background: var(--canvas-soft); color: var(--ink-secondary); }
.chip-plain::before { display: none; }

/* Why a lead isn't moving. Sits beside its status rather than replacing it: the
   status is what the lead *is*, this is what is standing in the way, and the two
   are different questions.

   The pair is an explicit flex row. Left as two inline boxes they came apart onto
   separate lines once the column was narrow — a chip is `inline-flex` and the
   marker is a second one, so the cell was free to lay them out however it liked.
   Cursor is `help` because the reason is the tooltip. */
.cell-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.blocked-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--status-paused-bg); color: var(--status-paused-fg);
  font-size: 11px; font-weight: 700; cursor: help;
}

/* ── Filter pills & segmented tabs ──────────────────────────────────────── */

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
  border: 1px solid var(--line); background: var(--canvas); color: var(--ink-secondary);
  border-radius: var(--r-pill); padding: 8px 16px;
  font-size: var(--text-small); font-weight: 500; cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.filter-pill:hover { border-color: var(--ink-tertiary); color: var(--ink); }
.filter-pill.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 600; }
.filter-pill .count { opacity: 0.6; margin-left: 4px; }

.seg-tabs { display: inline-flex; background: var(--canvas-soft); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.seg-tab {
  border: none; background: transparent; cursor: pointer;
  font-size: var(--text-small); font-weight: 600; color: var(--ink-secondary);
  padding: 8px 18px; border-radius: var(--r-pill);
  transition: all var(--dur) var(--ease);
}
.seg-tab:hover { color: var(--ink); }
.seg-tab.active { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-rest); }


/* ── Ring stat & charts ─────────────────────────────────────────────────── */

.ring-wrap { position: relative; width: 132px; height: 132px; flex: none; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-track { stroke: var(--canvas-soft); }
.ring-value { stroke: var(--chart-lilac); stroke-linecap: round; }
.ring-value.secondary { stroke: var(--chart-sky); }
.ring-center {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.kpi-card { padding: 22px; display: flex; align-items: center; gap: 22px; }
.kpi-card .big { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-card .sub { font-size: var(--text-small); color: var(--ink-secondary); margin-top: 6px; font-weight: 500; }

.chart-card { padding: 24px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.legend { display: flex; gap: 16px; font-size: var(--text-small); color: var(--ink-secondary); font-weight: 500; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .grid-line { stroke: var(--line); stroke-width: 1; }
.chart-svg .axis-label { font-size: 11px; fill: var(--ink-tertiary); font-family: var(--font-sans); }
.series-primary { stroke: var(--chart-lilac); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.series-secondary { stroke: var(--chart-sky); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* A third series steps *between* the two chart tones rather than introducing a
   hue (rule 6). Ink here read as a third colour and competed with the axes. */
.series-tertiary { stroke: color-mix(in oklab, var(--chart-lilac) 50%, var(--chart-sky));
  stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── Data table ─────────────────────────────────────────────────────────── */

.table-card { overflow: hidden; }
.table-toolbar {
  display: flex; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center;
}
.table-toolbar .input { max-width: 320px; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.data-table th {
  text-align: left; font-size: var(--text-micro); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-tertiary);
  padding: 13px 20px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table td { padding: 13px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--dur) var(--ease); }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr:hover { background: var(--canvas-soft); }
.cell-person { display: flex; align-items: center; gap: 12px; font-weight: 600; min-width: 0; }
/* The name/role block truncates rather than widening its column. A LinkedIn
   headline can run to a full sentence, and with the cell unable to either wrap or
   clip it pushed Status, Due and the row's own actions off the right edge behind
   a horizontal scrollbar — the columns you need in order to act on the row. The
   avatar is an <img> or <span>, so `> div` is the text block in every table that
   uses this. Full text stays one click away in the lead panel. */
.cell-person > div { min-width: 0; max-width: 38ch; }
.cell-person > div > div {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell-muted { color: var(--ink-secondary); }
/* A free-text column that must not be allowed to set the table's width. Same
   reasoning as `.cell-person` above: the row's actions have to stay reachable. */
.cell-clip { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-action {
  color: var(--ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line);
  cursor: pointer; white-space: nowrap; background: none; border: none; padding: 0;
  font-size: inherit;
  transition: text-decoration-color var(--dur) var(--ease);
}
.link-action:hover { text-decoration-color: var(--ink); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--canvas-soft); display: grid; place-items: center;
  font-size: var(--text-micro); font-weight: 700; color: var(--ink-tertiary);
}
.avatar-lg { width: 56px; height: 56px; font-size: var(--text-small); }

/* ── Side panel (slide-over) ────────────────────────────────────────────── */

.scrim {
  position: fixed; inset: 0; background: var(--scrim);
  z-index: 60; opacity: 0; animation: fade var(--dur) var(--ease) forwards;
}
@keyframes fade { to { opacity: 1; } }

.side-panel {
  position: fixed; top: 16px; right: 16px; bottom: 16px; width: 420px; max-width: calc(100vw - 32px);
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow-hover);
  padding: 24px; z-index: 61; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  animation: slide-in 260ms var(--ease);
}
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }

@media (max-width: 640px) {
  .side-panel {
    top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: none;
    max-height: 88vh; border-radius: var(--r-card-lg) var(--r-card-lg) 0 0;
    animation: sheet-up 260ms var(--ease);
  }
  @keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
}

.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp-identity { display: flex; gap: 14px; align-items: center; }
.sp-identity .name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.015em; }
.sp-identity .headline { font-size: var(--text-small); color: var(--ink-secondary); line-height: 1.4; }
.sp-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.context-tile {
  background: var(--canvas-soft); border-radius: var(--r-media);
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.context-tile .k { font-size: var(--text-micro); color: var(--ink-tertiary); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.context-tile .v { font-weight: 600; font-size: var(--text-small); margin-top: 2px; }

.info-rows { display: flex; flex-direction: column; }
.info-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: var(--text-small); align-items: baseline;
}
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--ink-tertiary); font-weight: 500; }
.info-row .v { font-weight: 500; }
.no-data {
  background: var(--canvas-soft); color: var(--ink-tertiary); border-radius: var(--r-pill);
  padding: 2px 10px; font-size: var(--text-micro); font-weight: 500;
}

/* ── Sequence flow (steps with live counts) ─────────────────────────────── */

.flow { display: flex; flex-direction: column; gap: 0; }
.flow-step { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.flow-dot {
  width: 36px; height: 36px; border-radius: 50%; background: var(--canvas-soft);
  display: grid; place-items: center; flex: none; font-size: 0.95rem;
}
.flow-body { flex: 1; min-width: 0; }
.flow-title { font-weight: 600; font-size: var(--text-small); }
.flow-meta { font-size: var(--text-micro); color: var(--ink-tertiary); }
.flow-count {
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.flow-rail { width: 1px; height: 16px; background: var(--line); margin-left: 18px; }

/* ── Page furniture ─────────────────────────────────────────────────────── */

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .spacer { flex: 1; }

.empty { text-align: center; padding: 56px 24px; color: var(--ink-secondary); }
.empty-icon { font-size: 1.75rem; margin-bottom: 10px; opacity: 0.5; }

.loading { padding: 48px; text-align: center; color: var(--ink-tertiary); font-size: var(--text-small); }

/* A wait long enough to need explaining. `.loading` is a line of text, which is
   right for the half-second fetches everywhere else and not for one that runs to
   several seconds against a paginated endpoint. The count is the real signal —
   it climbs, so the screen is visibly working rather than merely claiming to. */
.load-panel { padding: 56px 24px; text-align: center; }
.load-panel .load-title { font-weight: 600; color: var(--ink-secondary); }
.load-panel .load-count {
  font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.02em; margin-top: 4px;
}
.load-track {
  height: 6px; border-radius: var(--r-pill); background: var(--canvas-soft);
  overflow: hidden; max-width: 260px; margin: 18px auto 0;
}
/* Lilac, the same as `.meter-fill`: this is that idea with its denominator
   missing — nobody knows the total until the last page lands — so it sweeps
   instead of filling rather than becoming a different kind of thing. */
/* `linear`, deliberately, where everything else in this file uses `--ease`. That
   curve is a hard ease-out: it puts the bar across the track in the first fifth
   of the cycle and parks it off the right-hand end for the other four, so the
   panel flashes once and then sits dead — which is exactly the "is this thing
   working" the count is here to answer. Indeterminate motion has to be even.

   The two offsets are tied to the 40% width: the element's own width is 0.4 of
   the track, so the track is 250% of it. -100% puts the bar's trailing edge on
   the left end, 250% puts its leading edge on the right one. Change the width
   and these change with it. */
.load-sweep {
  height: 100%; width: 40%; border-radius: var(--r-pill);
  background: var(--chart-lilac); animation: load-sweep 1.15s linear infinite;
}
@keyframes load-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

@media (prefers-reduced-motion: reduce) {
  /* Motion is decoration in the rule near the top of this file, and load-bearing
     here: stopping the sweep at its start position leaves an empty track that
     reads as stalled. A static fill says the same thing without moving. */
  .load-sweep { width: 100%; transform: none !important; opacity: 0.45; }
}

.banner {
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--r-card); padding: 14px 18px; margin-bottom: 18px;
  font-size: var(--text-small);
  background: var(--status-error-bg); color: var(--status-error-fg);
  border: 1px solid rgba(176, 46, 46, 0.25);
}
.banner-notice { background: var(--canvas-soft); color: var(--ink-secondary); border-color: var(--line); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--on-ink); padding: 12px 22px;
  border-radius: var(--r-pill); font-size: var(--text-small); font-weight: 500;
  box-shadow: var(--shadow-hover); z-index: 80;
}

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--text-small); color: var(--ink-tertiary); margin-bottom: 8px; }
.breadcrumb button { background: none; border: none; color: var(--ink-secondary); cursor: pointer; font-size: inherit; padding: 0; }
.breadcrumb button:hover { color: var(--ink); text-decoration: underline; }

/* ── Mesh stages (login only in the app) ────────────────────────────────── */

.mesh-stage { position: relative; overflow: hidden; }
.mesh-stage::before {
  content: ''; position: absolute; inset: -20%;
  background: var(--mesh); opacity: var(--mesh-opacity); filter: blur(40px); pointer-events: none;
}
.mesh-stage > * { position: relative; }

/* ==========================================================================
   Account-centric shell — components added with the layout rebuild.

   The organising idea: an account owns the daily budget, and its campaigns
   compete for it. Anything that can only be judged against siblings (the
   allocation split) or against a clock (today's schedule) gets a real component
   here rather than being squeezed into a generic table.
   ========================================================================== */


/* ── Modal ──────────────────────────────────────────────────────────────── */

.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px);
  overflow-y: auto; background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow-hover);
  padding: 26px; z-index: 70; animation: modal-in 200ms var(--ease);
}
@keyframes modal-in { from { transform: translate(-50%, -46%); opacity: 0; } }
.modal-fields { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* The only solid-red control in the product, and only inside a confirmation the
   operator opened deliberately. Status colour still never leaks onto a page. */
/* `--on-ink` and not a literal white: the error fill lightens to #F08A8A in
   dark, where white text on it is unreadable. Rule 8 names this exact case. */
.btn-danger-solid { background: var(--status-error-fg); color: var(--on-ink); }
.btn-danger-solid:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }

/* ── Meters ─────────────────────────────────────────────────────────────── */

.meter + .meter { margin-top: 12px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.meter-head .k { font-size: var(--text-small); color: var(--ink-secondary); font-weight: 500; }
.meter-head .v { font-weight: 700; letter-spacing: -0.02em; }
.meter-track {
  height: 6px; border-radius: var(--r-pill); background: var(--canvas-soft);
  margin-top: 8px; overflow: hidden;
}
.meter-fill {
  height: 100%; border-radius: var(--r-pill); background: var(--chart-lilac);
  transition: width var(--dur) var(--ease);
}
.meter-warn .meter-fill { background: var(--status-error-fg); }

/* ── Today's schedule ───────────────────────────────────────────────────── */

/* One day, left to right — a calendar's day column on its side. The track is
   the account's sending window; pins sit where the send falls within it.
   Kind is carried by the ring colour (the two chart tones, which is where
   non-status colour is allowed); state is carried by opacity and a badge, so
   status colour stays in the chips where it belongs. */
.tl-scroll { overflow-x: auto; padding: 6px 0 12px; }
.tl-day { min-width: 620px; }

.tl-axis { position: relative; height: 20px; }
.tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.tl-tick-label {
  position: absolute; top: 0; left: 4px;
  font-size: var(--text-micro); color: var(--ink-tertiary); white-space: nowrap;
}
/* The closing hour sits on the right edge — its label turns inward, and the
   rule itself shifts a pixel so it doesn't hang past the track and raise a
   scrollbar over nothing. */
.tl-tick-end { transform: translateX(-1px); }
.tl-tick-end .tl-tick-label { left: auto; right: 4px; }

.tl-lanes {
  position: relative;
  height: calc(var(--lanes) * 40px + 8px);
  border-top: 1px solid var(--line-strong);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 39px, var(--canvas-soft) 39px 40px);
}

.tl-pin {
  position: absolute; top: calc(var(--lane) * 40px + 6px);
  transform: translateX(-50%);
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 2px solid var(--chart-lilac);
  background: var(--canvas);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tl-pin.tl-message { border-color: var(--chart-sky); }
.tl-pin .avatar { width: 100%; height: 100%; font-size: 9px; }
.tl-pin:hover { transform: translateX(-50%) scale(1.15); z-index: 3; }
.tl-pin.on {
  transform: translateX(-50%) scale(1.4); z-index: 4;
  box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-hover);
}
/* Already gone: present, but no longer something to act on. */
.tl-pin.tl-s-sent, .tl-pin.tl-s-skipped { opacity: 0.45; }
.tl-pin.tl-s-failed { border-style: dashed; }
.tl-badge {
  position: absolute; right: -4px; bottom: -4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--status-error-bg); color: var(--status-error-fg);
  font-size: 9px; font-weight: 700; line-height: 14px;
}

.tl-now { position: absolute; top: -16px; bottom: 0; border-left: 2px solid var(--ink); }
.tl-now::before {
  content: ''; position: absolute; top: -3px; left: -4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
}

.tl-person { display: flex; align-items: center; gap: 10px; min-width: 0; }

.slot-detail {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 12px;
}
.sd-time { font-size: var(--text-h3); font-weight: 800; letter-spacing: -0.02em; }
.sd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ── Allocation editor ──────────────────────────────────────────────────── */

.alloc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.alloc-table th, .alloc-table td { padding-left: 0; }
.alloc-table th:last-child, .alloc-table td:last-child { padding-right: 0; }
.alloc-input { max-width: 90px; padding: 7px 14px; text-align: right; }
.input-sm { padding: 7px 14px; font-size: var(--text-small); }

/* ── Day picker ─────────────────────────────────────────────────────────── */

.day-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.day-toggle {
  border: 1px solid var(--line-strong); background: var(--canvas); color: var(--ink-secondary);
  border-radius: var(--r-pill); padding: 7px 14px; cursor: pointer;
  font-size: var(--text-micro); font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.day-toggle.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.day-toggle:disabled { cursor: not-allowed; opacity: 0.55; }

/* ── Calendar (blackout dates) ──────────────────────────────────────────── */

/* Selection is ink-on-canvas like .day-toggle, not a status colour: a blackout
   is a choice, not a state the system got into. */
.calendar {
  border: 1px solid var(--line-strong); border-radius: var(--r-media);
  padding: 12px; max-width: 300px; background: var(--canvas);
}
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-small); font-weight: 600; margin-bottom: 10px;
}
.cal-nav {
  border: none; background: none; cursor: pointer; color: var(--ink-secondary);
  font-size: 18px; line-height: 1; padding: 2px 8px; border-radius: var(--r-pill);
}
.cal-nav:hover { background: var(--canvas-soft); color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
  text-align: center; font-size: var(--text-micro); font-weight: 600;
  color: var(--ink-tertiary); padding-bottom: 4px;
}
.cal-cell {
  aspect-ratio: 1; border: none; background: none; cursor: pointer;
  border-radius: var(--r-pill); font-size: var(--text-micro); font-weight: 500;
  color: var(--ink); transition: background var(--dur) var(--ease);
}
.cal-cell:hover:not(:disabled) { background: var(--canvas-soft); }
.cal-cell.on { background: var(--ink); color: var(--on-ink); font-weight: 700; }
.cal-cell:disabled { cursor: default; color: var(--ink-tertiary); opacity: 0.4; }
.cal-cell.on:disabled { background: var(--ink-tertiary); color: var(--on-ink); opacity: 1; }
.cal-blank { visibility: hidden; }
.chip-x {
  border: none; background: none; cursor: pointer; color: inherit;
  font-size: 14px; line-height: 1; padding: 0 0 0 2px; opacity: 0.6;
}
.chip-x:hover { opacity: 1; }

/* ── Account cards ──────────────────────────────────────────────────────── */

.account-card {
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.account-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.account-blocked { border-color: var(--status-error-fg); }
.account-quota { min-height: 32px; }
.account-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.account-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--canvas-soft); border: none; border-radius: var(--r-media);
  padding: 10px 14px; cursor: pointer; font-size: var(--text-small); font-weight: 600;
  color: var(--ink); text-align: left;
}
.account-chip .tertiary { font-size: var(--text-micro); font-weight: 500; }
.account-chip:hover { background: var(--line); }

/* ── Home metric tiles ──────────────────────────────────────────────────── */

/* Buttons, not divs: every headline number on the landing page goes somewhere. */
.metric-tile {
  text-align: center; cursor: pointer; border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.metric-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.metric-tile .value {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ── Sequence editor ────────────────────────────────────────────────────── */

.step-card {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 18px; margin-bottom: 14px; background: var(--canvas);
}
.step-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.step-index {
  width: 26px; height: 26px; border-radius: 50%; background: var(--canvas-soft);
  display: grid; place-items: center; font-size: var(--text-micro);
  font-weight: 700; flex: none; margin-bottom: 8px;
}
.variants { display: flex; flex-direction: column; gap: 12px; }
.variant { background: var(--canvas-soft); border-radius: var(--r-media); padding: 12px; }
.variant .input { background: var(--canvas); }
.variant-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* Live worst-case character count. Turns red before the save is rejected, not
   after — the cap is validated against expanded placeholders, not raw text. */
[data-count].over { color: var(--status-error-fg); font-weight: 700; }
[data-perf].leader { color: var(--status-active-fg); font-weight: 700; }

.ab-stats:empty { display: none; }
.ab-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}

/* ── Layout utilities ───────────────────────────────────────────────────── */

.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* A fixed rail beside a table — collapses rather than crushing the table, which
   an inline grid-template on the element could never do. */
.split-rail { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .split-rail { grid-template-columns: 1fr; } }

.head-facts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager { border-top: 1px solid var(--line); border-bottom: none; }
.sp-section { display: flex; flex-direction: column; gap: 10px; }

.flow-step {
  width: 100%; border: none; background: none; cursor: pointer; text-align: left;
  border-radius: var(--r-media); padding: 14px 8px;
  transition: background var(--dur) var(--ease);
}
.flow-step:hover { background: var(--canvas-soft); }
.flow-step.active { background: var(--canvas-soft); }

.reply-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reply-text { font-size: var(--text-small); margin: 10px 0 12px; white-space: pre-wrap; }

@media (max-width: 720px) { .hide-narrow { display: none; } }

/* The sidebar becomes a horizontal bar on narrow screens; scope rides with it
   rather than stacking above and eating vertical space. */

/* ── Bulk selection ─────────────────────────────────────────────────────── */

/* Hidden until something is selected, so the table isn't carrying a permanent
   empty toolbar for an action most visits never take. */
.bulk-bar {
  display: none; align-items: center; gap: 12px; padding: 12px 20px;
  background: var(--canvas-soft); border-bottom: 1px solid var(--line);
}
.bulk-bar.visible { display: flex; }
.check-col { width: 44px; }
.check-col input {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--ink);
}

.media-row + .media-row { margin-top: 10px; }

/* ── Dropdown ───────────────────────────────────────────────────────────── */

/* Replaces <select>, whose popup is drawn by the OS and cannot be styled. The
   menu is portalled into a fixed-position host so nothing clips it — a native
   one escapes its container, and anything nested would be cut off by the modal's
   scroll, the sidebar, or a table's overflow. */

#dropdown-host { position: relative; z-index: 90; }

.dd { position: relative; display: inline-block; min-width: 0; }
.dd-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--canvas); color: var(--ink); cursor: pointer;
  padding: 10px 16px; font-size: var(--text-small); font-weight: 600;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dd-toggle:hover:not(:disabled) { border-color: var(--ink-tertiary); }
.dd-toggle[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-ring); }
.dd-toggle:disabled { opacity: 0.55; cursor: not-allowed; }
.dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-placeholder { color: var(--ink-tertiary); font-weight: 500; }
.dd-caret { flex: none; color: var(--ink-tertiary); }

.dd-menu {
  position: fixed; z-index: 90; max-height: 320px; overflow-y: auto;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-media); box-shadow: var(--shadow-hover);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  animation: dd-in 140ms var(--ease);
}
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } }

.dd-option {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer; color: var(--ink);
  border-radius: var(--r-media); padding: 9px 12px;
  font-size: var(--text-small); font-weight: 500; white-space: nowrap;
}
.dd-option:hover, .dd-option:focus-visible { background: var(--canvas-soft); outline: none; }
.dd-option.selected { font-weight: 700; background: var(--canvas-soft); }
/* A dot rather than a tick: status colour never appears outside a chip, so the
   marker has to carry meaning by position instead. */
.dd-option.selected::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: none;
}
.dd-option:not(.selected)::before { content: ''; width: 5px; flex: none; }

/* ── Sidebar zones ──────────────────────────────────────────────────────── */

/* Grouped by concept, not by permission: Platform sits above every client,
   Client is everything the switcher scopes. Ordered broad to narrow, which is
   what makes "where am I" answerable from the rail alone. */

.nav-zone { display: flex; flex-direction: column; gap: 2px; }
.nav-zone + .nav-zone { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.nav-zone-label {
  font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-tertiary);
  padding: 0 12px 8px;
}
/* The platform zone is used rarely — present, but not competing with the work. */
.nav-zone:first-child .nav-item { font-size: var(--text-small); color: var(--ink-tertiary); }
.nav-zone:first-child .nav-item:hover,
.nav-zone:first-child .nav-item.active { color: var(--ink); }

.scope { margin-bottom: 10px; }
.scope .dd, .scope .dd-toggle { width: 100%; }
.scope .dd-toggle { background: var(--canvas-soft); }
.scope-static {
  padding: 10px 16px; border-radius: var(--r-pill); background: var(--canvas-soft);
  font-size: var(--text-small); font-weight: 600; margin-bottom: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Topbar location ────────────────────────────────────────────────────── */

/* The topbar answers "where am I" and nothing else — facts and actions live in
   the page, so the two never disagree about what's authoritative. */
.page-title {
  display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.breadcrumb + .page-title { margin-top: 1px; }

.context-tile.clickable { cursor: pointer; transition: background var(--dur) var(--ease); }
.context-tile.clickable:hover { background: var(--line); }

@media (max-width: 860px) {
  .nav-zone + .nav-zone { margin-top: 0; padding-top: 0; border-top: none; }
  .nav-zone-label { display: none; }
  .nav-zone { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
  .scope { margin-bottom: 0; }
  .scope .dd, .scope .dd-toggle { width: auto; min-width: 150px; }
}

/* ── Allocation editor ──────────────────────────────────────────────────── */

/* The split is proportions of one whole thing, so it gets a donut rather than a
   bar: a bar here would read as a progress meter, which is what the quota rails
   on Schedule already mean. */

.alloc-body { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .alloc-body { grid-template-columns: 1fr; } }

.alloc-chart { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.donut { width: 148px; height: 148px; transform: rotate(-90deg); }
.donut circle { transition: stroke-dasharray var(--dur) var(--ease); }
.donut-empty { stroke: var(--canvas-soft); }

.alloc-legend { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.alloc-legend-row { display: flex; align-items: center; gap: 8px; font-size: var(--text-micro); }
.alloc-legend-row i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.alloc-legend-name {
  flex: 1; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.alloc-table tfoot td {
  border-top: 1px solid var(--line); border-bottom: none;
  font-weight: 700; padding-top: 14px;
}
.alloc-note { padding: 12px 0 0; }
.alloc-note p { margin: 0; }
.alloc-over { color: var(--status-error-fg); font-weight: 600; }

/* ── Form actions ───────────────────────────────────────────────────────── */

/* A save that looks identical whether or not there's anything to save can only
   be tested by pressing it. Outline while the form matches what was loaded,
   solid the moment it doesn't — `UI.watchForm` swaps the class. Discard appears
   only when there is something to discard. */
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.form-actions .btn:disabled { opacity: 1; color: var(--ink-tertiary); }
.form-actions .btn[hidden] { display: none; }

.banner-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: var(--text-small); }

/* ── Tooltips ───────────────────────────────────────────────────────────── */

/* Portalled and fixed, like the dropdown menu, so a toolbar's overflow or a
   modal's scroll container can't clip one. Ink-filled rather than a bordered
   card: it's an overlay on top of the page, not another surface in it. */
#tooltip-host { position: relative; z-index: 95; }

.tooltip {
  position: fixed; z-index: 95; max-width: 260px;
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-media); padding: 8px 12px;
  font-size: var(--text-micro); font-weight: 500; line-height: 1.45;
  box-shadow: var(--shadow-hover); pointer-events: none;
  animation: tip-in 120ms var(--ease);
}
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } }
.tooltip-below { animation-name: tip-in-below; }
@keyframes tip-in-below { from { opacity: 0; transform: translateY(-3px); } }