:root {
  /* ---- Cool neutrals (ink / paper) ---- */
  --ink: #171b26;
  --ink-soft: #3d4456;
  --paper: #f6f7fb;
  --panel: #ffffff;
  --panel-2: #f9fafe;
  --line: #e9ebf3;
  --line-strong: #d6dae6;
  --muted: #6b7280;

  /* ---- Indigo accent ---- */
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-strong: #4338ca;
  --accent-dim: #eef0fe;
  --accent-tint: #f5f6ff;
  --accent-contrast: #ffffff;

  /* ---- Dark navy console shell ---- */
  --shell: #0f1222;
  --shell-raise: #171a2e;
  --shell-line: rgba(255, 255, 255, .08);
  --shell-text: #c3c8e0;
  --shell-text-dim: #8b91b3;
  --shell-text-strong: #ffffff;
  --shell-active: rgba(99, 102, 241, .18);
  --shell-active-line: #818cf8;
  --brand-accent: #a5b4fc;

  /* ---- Status ---- */
  --good: #0f9d6b;
  --good-dim: #e6f6ef;
  --warn: #c2740d;
  --warn-dim: #fbf0dc;
  --bad: #dc2626;
  --bad-dim: #fdecec;

  /* ---- Geometry ---- */
  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-pill: 999px;
  --sidebar-w-open: 236px;
  --sidebar-w-collapsed: 68px;
  --sidebar-w: var(--sidebar-w-open);
  --sidebar-pad-x: 14px;

  /* ---- Elevation (cool-tinted, layered) ---- */
  --shadow-sm: 0 1px 2px rgba(16, 18, 34, .04), 0 1px 3px rgba(16, 18, 34, .05);
  --shadow: 0 1px 3px rgba(16, 18, 34, .05), 0 10px 26px -12px rgba(16, 18, 34, .18);
  --shadow-lg: 0 16px 40px -14px rgba(16, 18, 34, .28);
  --ring: 0 0 0 3px rgba(99, 102, 241, .30);
  --tab-nums: tabular-nums;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ================= App shell: dark sidebar + content ================= */
/* The sidebar is fixed rather than sticky: a sticky sidebar can only travel
   inside its own grid area, so any stray page overflow (a chart tooltip left
   at a page offset, say) lets the document scroll out from under it. Fixed,
   it always spans exactly the viewport. */
.app-shell {
  min-height: 100vh;
  padding-left: var(--sidebar-w);
  transition: padding-left .18s ease;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 20;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--shell);
  background-image: radial-gradient(120% 60% at 0% 0%, rgba(99, 102, 241, .16), transparent 60%);
  border-right: 1px solid var(--shell-line);
  color: var(--shell-text);
  display: flex;
  flex-direction: column;
  padding: 18px var(--sidebar-pad-x);
  gap: 6px;
  transition: width .18s ease, padding .18s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px 16px;
}
.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .45);
}
.brand-text {
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--shell-text-strong);
  line-height: 1.1;
}
.brand-text .brand-sub {
  display: block;
  color: var(--brand-accent);
  font-size: 10.5px;
  letter-spacing: .22em;
}

.sidebar-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--shell-text-dim);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.sidebar-toggle svg { width: 15px; height: 15px; }
.sidebar-toggle:hover {
  color: var(--shell-text-strong);
  background: var(--shell-raise);
  border-color: var(--shell-line);
}

.sidenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.sidenav a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--shell-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  position: relative;
  transition: color .15s, background .15s;
}
.sidenav a svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .8; }
.sidenav a:hover { color: var(--shell-text-strong); background: rgba(255, 255, 255, .05); }
.sidenav a.active {
  color: var(--shell-text-strong);
  background: var(--shell-active);
  font-weight: 600;
}
.sidenav a.active svg { opacity: 1; color: var(--brand-accent); }
.sidenav a.active::before {
  content: "";
  position: absolute;
  left: calc(var(--sidebar-pad-x) * -1);
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--shell-active-line);
}

.sidenav-secondary {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--shell-line);
}
.sidebar-footer {
  padding-top: 14px;
  border-top: 1px solid var(--shell-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* A native <select> can't have its open popup styled cross-browser (Chrome
   on macOS ignores color/background on <option> entirely and renders the OS
   picker), which is why the market switcher is a real button + listbox
   instead, built and driven from sidebar.js. */
.market-select { position: relative; }
.market-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--shell-text-strong);
  background: var(--shell-raise);
  border: 1px solid var(--shell-line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.market-select-trigger:hover { border-color: rgba(255, 255, 255, .22); }
.market-select-trigger svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--shell-text-dim);
  transition: transform .15s;
}
.market-select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.market-select-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  background: var(--shell-raise);
  border: 1px solid var(--shell-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 30;
}
.market-select-option {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  color: var(--shell-text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  cursor: pointer;
}
.market-select-option:hover,
.market-select-option:focus-visible {
  color: var(--shell-text-strong);
  background: rgba(255, 255, 255, .08);
  outline: none;
}
.market-select-option.is-selected { color: var(--shell-text-strong); font-weight: 700; }
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--shell-text-dim);
  padding: 2px 4px;
}
.sidebar-user .user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #4338ca);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.sidebar-user .user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The signed-in identity and its sign-out control, one row at the foot of the
   rail. `min-width: 0` on the chip is what lets the email ellipsis instead of
   pushing the button out of the sidebar. */
.sidebar-account {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sidebar-account .sidebar-user { flex: 1 1 auto; min-width: 0; }
.sidebar-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--shell-text-dim);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar-signout svg { width: 16px; height: 16px; }
.sidebar-signout:hover { background: var(--shell-raise); color: var(--shell-text-strong); }
.sidebar-signout:focus-visible { outline: none; box-shadow: var(--ring); }

/* Shown only when collapsed: the market switcher is a <select>, which cannot
   shrink to an icon, so the rail shows the market code and expands on click. */
.market-compact {
  display: none;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  align-items: center;
  justify-content: center;
  height: 30px;
  color: var(--shell-text-strong);
  background: var(--shell-raise);
  border: 1px solid var(--shell-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.market-compact:hover { border-color: rgba(255, 255, 255, .22); }

/* ---------- Collapsed rail: icons only ---------- */
:root.sidebar-collapsed {
  --sidebar-w: var(--sidebar-w-collapsed);
  --sidebar-pad-x: 10px;
}
:root.sidebar-collapsed .sidebar-brand {
  flex-direction: column;
  gap: 8px;
  padding: 0 0 14px;
}
:root.sidebar-collapsed .brand-text,
:root.sidebar-collapsed .sidenav a span,
:root.sidebar-collapsed .market-select,
:root.sidebar-collapsed .sidebar-user .user-email { display: none; }
:root.sidebar-collapsed .sidebar-toggle {
  margin-left: 0;
  width: 100%;
}
:root.sidebar-collapsed .sidebar-toggle svg { transform: scaleX(-1); }
:root.sidebar-collapsed .sidenav a {
  justify-content: center;
  padding: 10px 0;
}
:root.sidebar-collapsed .market-compact { display: inline-flex; }

/* Rail tooltip: positioned in JS (sidebar.js) via getBoundingClientRect
   rather than an ::after on the link itself, because .sidebar has
   overflow-x: hidden (needed to keep the width transition scrollbar-free)
   which would otherwise clip anything hanging outside its bounds. */
.rail-tooltip {
  position: fixed;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--shell-raise);
  border: 1px solid var(--shell-line);
  color: var(--shell-text-strong);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.rail-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}
:root.sidebar-collapsed .sidebar-user { justify-content: center; padding: 2px 0; }
/* Collapsed, there is no room for the chip and the button side by side, so
   they stack: avatar over sign-out, both centred on the rail. */
:root.sidebar-collapsed .sidebar-account { flex-direction: column; gap: 6px; }

.app-main { min-width: 0; }

/* ---------- Page shell ---------- */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 34px 80px;
}

/* Mobile: sidebar collapses to a horizontal top bar (the icon rail is a
   desktop affordance, so the collapsed state is ignored here) */
@media (max-width: 860px) {
  .app-shell { padding-left: 0; }
  .sidebar,
  :root.sidebar-collapsed .sidebar {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 16px;
    border-right: none;
    border-bottom: 1px solid var(--shell-line);
  }
  .sidebar-brand,
  :root.sidebar-collapsed .sidebar-brand {
    flex-direction: row;
    gap: 11px;
    padding: 0 8px 0 0;
  }
  .sidebar-toggle,
  .market-compact,
  :root.sidebar-collapsed .market-compact { display: none; }
  :root.sidebar-collapsed .brand-text,
  :root.sidebar-collapsed .sidenav a span { display: inline; }
  :root.sidebar-collapsed .market-select { display: block; }
  .sidenav { flex-direction: row; margin-top: 0; flex-wrap: wrap; }
  .sidenav-secondary { padding-top: 0; border-top: none; }
  :root.sidebar-collapsed .sidenav a { justify-content: flex-start; padding: 9px 11px; }
  .sidenav a.active::before { display: none; }
  .sidebar-footer {
    margin-top: 0;
    margin-left: auto;
    padding-top: 0;
    border-top: none;
    flex-direction: row;
    align-items: center;
  }
  .market-select { width: auto; }
  .sidebar-user .user-email { display: none; }
  .page { padding: 24px 18px 64px; }
}

h1 {
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 4px;
}
.subtitle {
  color: var(--muted);
  font-size: .9rem;
  margin: 0 0 22px;
}

/* ---------- Strategy pills ---------- */
.strategy-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.strategy-pill {
  display: inline-block;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 15px;
  font-variant-numeric: var(--tab-nums);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.strategy-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.strategy-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(99, 102, 241, .5);
}

/* ---------- Layout grids ---------- */
.home-grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 960px) {
  .home-grid { grid-template-columns: 1fr; }
}
.home-main, .home-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .charts-row { grid-template-columns: 1fr !important; }
}

/* ---------- Scorecards ---------- */
.scorecards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.scorecards.two-up { grid-template-columns: repeat(2, 1fr); }
.scorecards.five-up { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 560px) {
  .scorecards, .scorecards.five-up { grid-template-columns: repeat(2, 1fr); }
}
.scorecard {
  background: var(--panel);
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.scorecard-value {
  font-size: 1.75rem;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.025em;
  font-variant-numeric: var(--tab-nums);
}
.scorecard-label {
  font-size: .7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

/* ---------- Bar charts (home dashboard) ---------- */
.bar-chart { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 78px 1fr 40px; align-items: center; gap: 10px; font-size: .8rem; }
.bar-label { color: var(--ink-soft); font-weight: 500; }
.bar-track { background: var(--paper); border-radius: var(--radius-pill); height: 8px; overflow: hidden; }
.bar-fill {
  background: linear-gradient(90deg, #818cf8, var(--accent));
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width .3s ease;
}
.bar-fill.strategy { background: linear-gradient(90deg, #fbbf24, var(--warn)); }
.bar-value { text-align: right; font-variant-numeric: var(--tab-nums); font-weight: 600; color: var(--ink); }

/* ---------- Charts (ECharts containers) ---------- */
.echart { width: 100%; height: 220px; padding: 6px 10px; }

table.activations.overlap td:last-child, table.activations td:nth-child(2) {
  text-align: left;
  font-variant-numeric: var(--tab-nums);
}

/* ---------- Profile unification: Venn + breakdown (venn.js) ---------- */
.profile-unify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 16px 16px;
}
#profile-venn-chart { flex: 0 0 auto; width: 200px; }
#profile-venn-chart .venn-area path { fill-opacity: .35; stroke-width: 1.5; }
#profile-venn-chart text { pointer-events: none; }
.unify-table {
  flex: 1 1 150px;
  font-size: .82rem;
  color: var(--ink-soft);
}
.unify-table .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-variant-numeric: var(--tab-nums);
}
.unify-table .row span:last-child { white-space: nowrap; }
.unify-table .row-strong { color: var(--ink); font-weight: 700; }
.unify-table hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 6px 0;
}
.venn-tooltip {
  text-align: center;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  pointer-events: none;
  font-variant-numeric: var(--tab-nums);
  z-index: 50;
}

/* ---------- Filters ---------- */
.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: .85rem;
  color: var(--muted);
}
.filters select,
select,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea {
  font-family: inherit;
  font-size: .88rem;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.filters select:focus,
select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.list-search {
  display: block;
  width: calc(100% - 36px);
  margin: 12px 18px;
}
/* Inside the journal's filter bar, the search box sits beside the date
   field rather than full-bleed inside a panel. */
.filters form { display: contents; }
.filters .list-search { width: 220px; margin: 0; }

/* Field documentation page: one search box above a stack of per-category
   panels (top-level, not nested in .filters), so it keeps the default
   full-bleed .list-search sizing. */
.field-docs-panel { margin-bottom: 16px; }
.field-doc-row { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.field-doc-row:last-child { border-bottom: none; }
.field-doc-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.field-doc-label { font-weight: 600; color: var(--ink); font-size: .88rem; }
.field-doc-name {
  font-size: .74rem;
  color: var(--accent-strong);
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}
.field-doc-type {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.field-doc-type.is-jp { color: var(--accent-strong); }
.field-doc-desc { font-size: .84rem; color: var(--ink); margin: 0; }

/* Category panels are <details> -- same disclosure convention as the
   customer profile's journey timeline, styled to match this app's SVG icons
   rather than a text-character arrow. */
.field-docs-panel > .panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background .12s;
}
.field-docs-panel > .panel-header:hover { background: var(--accent-tint); }
.field-docs-panel > .panel-header::-webkit-details-marker { display: none; }
.field-docs-panel-title { display: inline-flex; align-items: center; gap: 8px; }
.field-docs-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform .15s ease;
}
.field-docs-panel[open] > .panel-header .field-docs-chevron { transform: rotate(90deg); }
.field-docs-panel > .panel-header .panel-note {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  white-space: nowrap;
}
.field-doc-desc.is-empty { color: var(--muted); font-style: italic; }

/* ---------- Two-pane ---------- */
.two-pane {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) {
  .two-pane { grid-template-columns: 1fr; }
}
/* Define/create-segment: give the rule builder the room, keep the audience
   readout as a slim sidebar. */
.two-pane.define-pane { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 860px) {
  .two-pane.define-pane { grid-template-columns: 1fr; }
}

/* ---------- Panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--panel-2);
}

/* ---------- Segment list ---------- */
.segment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 640px;
  overflow-y: auto;
}
.segment-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  font-size: .88rem;
  transition: background .12s, border-color .12s;
}
.segment-list li:last-child a { border-bottom: none; }
.segment-list li a:hover { background: var(--accent-tint); }
.segment-list li a.active {
  background: var(--accent-dim);
  border-left-color: var(--accent);
  font-weight: 600;
}
.segment-list .strategy-label {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.panel-actions { padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.panel-actions .btn-secondary { width: 100%; text-align: center; }
.segment-detail-actions { padding-top: 16px; border-top: 1px solid var(--line); }

.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); text-decoration: none; margin-bottom: 10px; }
.back-link:hover { color: var(--accent); }

/* ---------- Empty state ---------- */
.empty-state {
  padding: 48px 24px;
  color: var(--muted);
  text-align: center;
  font-size: .9rem;
}

/* ---------- Segment detail ---------- */
.segment-detail { padding: 18px 20px 20px; }
.segment-detail h2 { font-size: 1.12rem; margin: 0 0 3px; letter-spacing: -.01em; }
.segment-detail h3 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
}
.criteria-box {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
}

/* ---------- Tables ---------- */
table.activations {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
table.activations th {
  text-align: left;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 600;
  padding: 6px 16px 10px;
  border-bottom: 1px solid var(--line-strong);
}
table.activations td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.activations tbody tr:last-child td { border-bottom: none; }
table.activations tbody tr { transition: background .12s; }
table.activations tbody tr:hover td { background: var(--panel-2); }
table.activations a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color .12s, border-color .12s;
}
table.activations a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* side-panel key/value tables read as plain, slightly tighter rows */
.home-side table.activations td,
.segment-detail table.activations td { padding: 11px 16px; }

.platform-cell { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.platform-logo { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }

/* .panel clips (overflow: hidden) for its rounded corners, so a wide table
   needs its own scroll container rather than relying on the page to scroll. */
.table-scroll { overflow-x: auto; }

/* Audience sizes (activations/_audience_*.html): one line each, digits aligned. */
table.activations .audience-count { white-space: nowrap; font-variant-numeric: var(--tab-nums); }

/* ---------- A segment's three readings: size, setup, criteria ----------
   One rhythm for all of them -- a small title, then a block on the same grid
   -- so the panel reads as one thing rather than three stacked drafts. The
   size cards carry the weight; setup and criteria stay quiet. */
.segment-block { margin: 16px 0 0; }
.segment-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}
.segment-block-head h3 { margin: 0; }
.segment-block-meta {
  font-size: .7rem;
  color: var(--muted);
  font-variant-numeric: var(--tab-nums);
  white-space: nowrap;
}
.segment-block-empty { margin: 0; font-size: .82rem; color: var(--muted); }
.segment-block-note { margin: 6px 0 0; font-size: .74rem; color: var(--muted); }
.segment-detail > .segment-block-head { margin-top: 18px; }

.scorecards.audience-figures {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  border: 1px solid var(--line);
}
.audience-figures .scorecard { padding: 11px 14px; gap: 3px; }
.audience-figures .scorecard-value { font-size: 1.25rem; }
.audience-figures .scorecard-label { font-size: .64rem; }

/* The hold-out split, directly under the counted figures. Two columns and a
   dashed frame: these are derived from the total and the configured share
   (activations/services.py:hold_out_split), not counted like the cards above,
   and the panel should not present them as if CDP_p had reported them. */
.scorecards.audience-split {
  grid-template-columns: repeat(2, 1fr);
  border: 1px dashed var(--line);
  margin-top: 8px;
}
.audience-split .scorecard { padding: 11px 14px; gap: 3px; }
.audience-split .scorecard-value { font-size: 1.25rem; }
.audience-split .scorecard-label { font-size: .64rem; }

/* Same columns as the size cards, without the frame: these are settings, not
   figures, and giving them equal weight would flatten the panel. */
.segment-setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 2px 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.segment-setup > div { background: var(--panel-2); padding: 9px 14px; }
.segment-setup dt {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--muted);
}
.segment-setup dd {
  margin: 2px 0 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: var(--tab-nums);
  overflow-wrap: anywhere;
}

/* Sortable headers + Excel export, added by js/data-table.js. The header
   button inherits the <th>'s type treatment so enhanced tables look unchanged
   until hovered. */
.th-sort {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 3px;
  transition: color .12s;
}
.th-sort:hover, th[aria-sort] .th-sort { color: var(--ink); }
.th-sort:focus-visible { box-shadow: var(--ring); }
.th-sort-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 4px solid currentColor;
  opacity: 0;
  transition: opacity .12s, transform .12s;
}
.th-sort:hover .th-sort-icon { opacity: .35; }
th[aria-sort] .th-sort-icon { opacity: 1; }
th[aria-sort="descending"] .th-sort-icon { transform: rotate(180deg); }

.panel-header.has-table-export {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.table-toolbar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.table-export {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.table-export svg { width: 13px; height: 13px; }
.table-export:hover { color: var(--accent); border-color: var(--accent); }
.table-export:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Pills / status ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill.active, .pill.success { background: var(--good-dim); color: var(--good); }
.pill.paused, .pill.pending { background: var(--warn-dim); color: var(--warn); }
.pill.error, .pill.failed { background: var(--bad-dim); color: var(--bad); }
/* Not an outcome: the activation is never refreshed, so it is neither waiting
   nor failing. Neutral on purpose -- it must not read as a state to fix. */
.pill.create-only { background: var(--line); color: var(--muted); }

/* ---------- Wizard stepper ---------- */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.wizard-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
}
.wizard-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
}
.wizard-step + .wizard-step::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--line-strong);
  margin: 0 12px;
}
.wizard-step.active { color: var(--accent); }
.wizard-step.active .step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 3px 10px -3px rgba(99, 102, 241, .55);
}
.wizard-step.done { color: var(--ink-soft); }
.wizard-step.done .step-num {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: var(--accent);
}
@media (max-width: 640px) {
  .wizard-step .step-label { display: none; }
  .wizard-step + .wizard-step::before { width: 14px; margin: 0 6px; }
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary {
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn-primary {
  background: linear-gradient(135deg, #6d70f5, var(--accent-hover));
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(99, 102, 241, .55);
}
.btn-primary:hover { background: linear-gradient(135deg, #5b5ef0, var(--accent-strong)); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: var(--panel); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary:focus-visible, .btn-secondary:focus-visible { box-shadow: var(--ring); }

/* ---------- Forms in detail panes ---------- */
.segment-detail label { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.segment-detail input[type="text"],
.segment-detail input[type="number"],
.segment-detail select { margin-top: 5px; width: 100%; }

/* ---- Define/create segment form ----------------------------------------
   Three labelled sections down one panel -- details, rules, refinements --
   rather than a flat stack of controls: the middle one is a query builder tall
   enough to push everything else off screen, so the parts around it need to say
   what they are without being read in order.
*/
.define-form-body { padding: 0; }
.form-section { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.form-section:last-child { border-bottom: none; }
.form-section-head { margin-bottom: 14px; }
.form-section-title {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.form-section-hint {
  margin: 3px 0 0;
  font-size: .82rem;
  color: var(--muted);
  max-width: 62ch;
}

/* Two fields per row at most: the pane is ~half the page and four inputs across
   left each of them too narrow to read the value in. A third field (Lookalike's
   order-by) wraps onto its own row at half width rather than squeezing the row. */
.define-fields-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 860px) {
  .define-fields-row { grid-template-columns: 1fr; }
}

/* "Describe the segment" box, above the rule builder it fills in. Styled after
   the "AI mode" pattern search/assistant boxes use -- a slow-drifting, multi-
   hue gradient border with a soft blurred halo behind it, always live rather
   than only on hover, so it reads as generative before you've touched it.
   Widened past the single-hue accent used elsewhere in the app on purpose:
   the whole point is that this one box is the assisted/generative path,
   distinct from the plain builder it fills in below. */
.nl-generator {
  --ai-gradient: linear-gradient(115deg, #4f7cff, #8b5cf6, #ec4899, #4f7cff);
  /* Center of the cursor spotlight, in % of the box -- kept updated by
     define.js on mousemove and unset (falls back to centered) otherwise. */
  --mx: 50%;
  --my: 50%;
  position: relative;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--accent-tint), var(--accent-tint)) padding-box,
    var(--ai-gradient) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: ai-gradient-flow 9s ease infinite;
}
/* The halo: a blurred copy of the same gradient sitting behind the card. */
.nl-generator::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  background: var(--ai-gradient);
  background-size: 300% 300%;
  filter: blur(16px);
  opacity: .3;
  animation: ai-gradient-flow 9s ease infinite;
}
/* Hovering adds a bright spotlight that tracks the cursor, layered on top of
   the slow-drifting base gradient -- the "spotlight border" AI search/
   assistant UIs use. Only on the border layer (not the halo's own gradient
   size), so it reads as a highlight riding along the ring, not a repaint. */
.nl-generator:hover {
  background:
    linear-gradient(var(--accent-tint), var(--accent-tint)) padding-box,
    radial-gradient(220px circle at var(--mx) var(--my), rgba(255, 255, 255, .65), transparent 70%) border-box,
    var(--ai-gradient) border-box;
  background-size: 100% 100%, auto, 300% 300%;
}
.nl-generator:hover::before {
  background:
    radial-gradient(240px circle at var(--mx) var(--my), rgba(255, 255, 255, .7), transparent 70%),
    var(--ai-gradient);
  background-size: auto, 300% 300%;
  opacity: .5;
}
/* While a generation is in flight, both speed up and brighten -- the same
   cue as the spinner beside it, just legible out of the corner of the eye. */
.nl-generator.is-generating,
.nl-generator.is-generating::before {
  animation-duration: 2.4s;
}
.nl-generator.is-generating::before { opacity: .55; }
@keyframes ai-gradient-flow {
  0% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-generator, .nl-generator::before { animation: none; }
}
.nl-generator-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nl-generator-head label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.nl-generator-icon { display: inline-flex; flex-shrink: 0; }
.nl-generator-icon svg { display: block; width: 15px; height: 15px; }
.pill.ai {
  background: var(--ai-gradient);
  background-size: 300% 300%;
  color: #fff;
  animation: ai-gradient-flow 9s ease infinite;
}
.pill.ai::before { display: none; }
.nl-generator textarea {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 44px;
  margin-top: 8px;
}
.nl-generator-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
/* Same --ai-gradient as the card border (inherited from .nl-generator, a
   custom property, down onto this descendant) rather than a gradient of its
   own, so the button reads as part of the same surface, not a second color. */
.btn-ai {
  --mx: 50%;
  --my: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  color: #fff;
  background: var(--ai-gradient);
  background-size: 300% 300%;
  box-shadow: 0 4px 14px -4px rgba(139, 92, 246, .55);
  transition: box-shadow .15s, transform .05s;
  animation: ai-gradient-flow 9s ease infinite;
}
/* Same cursor-tracking spotlight as the card border above, scaled down to the
   button's own size -- set by the same mousemove handler in define.js. The
   spotlight replaces the drift for the moment the cursor is on it. */
.btn-ai:hover {
  background:
    radial-gradient(90px circle at var(--mx) var(--my), rgba(255, 255, 255, .4), transparent 70%) border-box,
    var(--ai-gradient) border-box;
  background-size: auto, 300% 300%;
}
.btn-ai:active { transform: translateY(1px); }
.btn-ai:focus-visible { box-shadow: var(--ring); }
.btn-ai:disabled { opacity: .7; cursor: default; transform: none; }

/* Exclusions and the opt-out switch, under the rule builder. */
.define-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* block, or the multi-select sits beside its own label text instead of under it
   -- these labels are full-width here, not grid cells like the fields above. */
.define-options select { display: block; max-width: 420px; }
.define-options select[multiple] { padding: 4px; }
.define-options select[multiple] option { padding: 5px 8px; border-radius: 5px; }
.define-options select[multiple] option:checked {
  background: var(--accent-dim) linear-gradient(var(--accent-dim), var(--accent-dim));
  color: var(--accent-strong);
  font-weight: 600;
}
.define-options .checkbox-row {
  max-width: 620px;
  background: var(--panel-2);
  transition: background .15s, border-color .15s;
}
.define-options .checkbox-row input { accent-color: var(--accent); }
/* Lit while on: this one changes who is contacted, so it should be visible as
   set from across the form rather than as one tick among the controls. */
.define-options .checkbox-row:has(input:checked) {
  background: var(--accent-tint);
  border-color: var(--accent);
}
.define-options .checkbox-row:has(input:checked) strong { color: var(--accent-strong); }

/* No frame of its own: the builder already draws a bordered group card per
   level, so a padded box around it was a second border and a lot of dead space
   between the two. The section padding is the only margin the tree needs. */
#rqb-root {
  border: 0;
  padding: 0;
  background: none;
}

/* Rules column: the form panel and the submit row, stacked. */
.define-main { min-width: 0; }

/* Action bar under the form panel. */
.define-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.define-actions .btn-secondary { text-decoration: none; display: inline-flex; align-items: center; }
.define-actions-hint { font-size: .82rem; color: var(--muted); }

/* ---- Live audience readout (right pane of the define form) ---- */
.define-preview { position: sticky; top: 18px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-head .loading-row { font-size: .72rem; font-weight: 600; color: var(--muted); }
.preview-head .spinner { width: 13px; height: 13px; border-width: 2px; }
.preview-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }

/* The two headline counts: master ids lead, emails follow at half the weight --
   they are read as one figure and its qualifier, not as two equal metrics. */
.preview-figures {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent-tint), var(--panel));
}
.preview-figure { display: flex; flex-direction: column; gap: 2px; }
.preview-figure-value {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: var(--tab-nums);
  color: var(--ink-soft);
}
.preview-figure.is-primary .preview-figure-value { font-size: 2rem; font-weight: 780; color: var(--ink); }
.preview-figure.is-primary { padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* The hold-out split, under the counted figures it is derived from. Dashed
   rather than solid, like the segment panel's .audience-split: these two are
   the share applied to the total above, not numbers BigQuery returned, and
   the panel should not dress them as measurements. */
.preview-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.preview-split[hidden] { display: none; }
.preview-split-group { display: flex; flex-direction: column; gap: 2px; }
.preview-split-value {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: var(--tab-nums);
  color: var(--ink-soft);
}

.preview-details { font-size: .8rem; }
.preview-details td { padding: 9px 2px; color: var(--ink-soft); }
.preview-details td:last-child { text-align: right; font-weight: 600; font-variant-numeric: var(--tab-nums); }
.preview-details tbody tr:hover td { background: transparent; }

.preview-chart .panel-header { padding: 10px 12px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.preview-error { margin: 0; font-size: .8rem; color: var(--bad); }
.preview-error:empty { display: none; }

/* ---- Loading feedback ----------------------------------------------------
   Several pages block on a BigQuery scan (a customer profile, a live Insights
   window, a report), so the browser can sit on the old page for seconds with
   nothing to show. The overlay is raised on navigation to say the click landed.
*/
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: var(--radius-pill);
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
.spinner-lg { width: 26px; height: 26px; border-width: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }

.loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .87rem;
}
/* Author CSS overrides the UA's [hidden]{display:none} regardless of
   specificity, so `display: flex` above would otherwise defeat `hidden`. */
.loading-row[hidden] { display: none; }

#route-loading {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  place-items: center;
  background: rgba(246, 247, 251, .72);
  backdrop-filter: blur(2px);
}
#route-loading.is-visible { display: grid; }
.route-loading-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* A progress sliver at the top edge, for the case where the overlay would be
   too heavy-handed (form filters that resubmit on change). */
#route-loading::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  background: var(--accent);
  animation: route-progress 8s ease-out forwards;
}
@keyframes route-progress {
  0%   { transform: scaleX(0); }
  40%  { transform: scaleX(.7); }
  100% { transform: scaleX(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
  #route-loading::before { animation: none; transform: scaleX(.6); }
}

/* Figures belonging to a query that is still running: visibly not current. */
.is-stale {
  opacity: .45;
  transition: opacity .15s ease;
}

/* ---------- Destructive actions, notices ---------- */
/* Used by the segment archive ("delete") flow and the Edit/Delete pair on the
   segment detail. Deliberately outlined rather than filled: the button sits
   next to Edit in a toolbar, where a solid red block reads as the primary
   action on the page, which it never is. */
.btn-danger {
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bad);
  background: var(--panel);
  color: var(--bad);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn-danger:hover { background: var(--bad); color: #fff; }
.btn-danger:active { transform: translateY(1px); }
.btn-danger:focus-visible { box-shadow: var(--ring); }

/* Toolbar-sized variants of the three buttons, for the segment detail head. */
.btn-sm {
  font-size: .78rem;
  padding: 6px 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 14px 0;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.notice p { margin: 0 0 6px; }
.notice p:last-child { margin-bottom: 0; }
.notice-bad { border-left-color: var(--bad); background: var(--bad-dim); color: var(--bad); }
.notice-warn { border-left-color: var(--warn); background: var(--warn-dim); color: var(--warn); }
.notice-muted { border-left-color: var(--line-strong); }

/* ---------- Segment detail head (title + Edit/Delete) ---------- */
.segment-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.segment-detail-tools { display: flex; align-items: center; gap: 8px; }
.segment-detail-tools form { margin: 0; }

/* ---------- Live / Archived switch above the segment list ---------- */
.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.panel-tabs a {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.panel-tabs a:hover { color: var(--ink); }
.panel-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Archive confirmation ---------- */
.consequence-list { list-style: none; padding: 0; margin: 0 0 16px; font-size: .85rem; line-height: 1.55; }
.consequence-list li { position: relative; padding-left: 24px; margin-bottom: 9px; color: var(--ink-soft); }
.consequence-list li::before { position: absolute; left: 0; top: -1px; font-weight: 700; }
.consequence-list li.yes::before { content: "✓"; color: var(--good); }
.consequence-list li.no::before { content: "✕"; color: var(--bad); }

.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
}
.checkbox-row input { margin-top: 3px; flex: none; }
.checkbox-row.is-disabled { opacity: .6; }
.unavailable-reason { display: block; margin-top: 6px; font-size: .78rem; color: var(--muted); }

.archive-form { margin-top: 4px; }
.confirm-row { display: block; margin: 16px 0 0; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.archive-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.archive-actions .btn-secondary { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- Edit-mode banner on the define form ---------- */
.field-note { display: block; margin-top: 5px; font-size: .76rem; font-weight: 400; color: var(--muted); }

/* Page title with an action beside it (Activations journal -> Manage segments). */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-head h1 { margin-bottom: 0; }