/* ============================================================
   Campaigns Console — component styles.
   Uses ONLY design-system --ds- tokens (vendored in ds-*.css).
   Built to docs/designs/campaigns-console-mockup.html (frozen specimen)
   and DESIGN.md patterns. No color or size is invented here.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-txt-2);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: var(--ds-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.mono { font-family: var(--ds-font-mono); }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
h1, h2, h3, h4 { color: var(--ds-txt); text-wrap: balance; }

/* ---------- top bar ---------- */
.topbar {
  height: 56px; display: flex; align-items: center; gap: var(--ds-space-xs);
  padding: 0 var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-border-2); background: var(--ds-bg-elevated);
  position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: var(--ds-space-md); margin-right: var(--ds-space-lg); color: var(--ds-txt); }
.brand svg { display: block; height: 26px; width: auto; }
.brand .divider { width: 1px; height: 20px; background: var(--ds-border-2); }
.brand .name { font-weight: 600; font-size: var(--ds-text-xs); color: var(--ds-txt-2); letter-spacing: 0; white-space: nowrap; }
.brand a { color: inherit; display: flex; align-items: center; }
.brand a:hover { text-decoration: none; }
.topbar .mapchip {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-3xs); letter-spacing: -0.02em;
  background: var(--ds-bg-3); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); padding: 3px 8px; color: var(--ds-txt-3);
  margin-right: var(--ds-space-sm); cursor: pointer;
}
.topbar .mapchip:hover { color: var(--ds-txt-2); }
.topbar nav { display: flex; gap: var(--ds-space-2xs); }
.topbar nav a {
  font-size: var(--ds-text-xs); font-weight: 500; color: var(--ds-txt-3);
  min-height: 36px; display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: var(--ds-radius-sm); line-height: 1.3;
}
.topbar nav a:hover { color: var(--ds-txt); background: var(--ds-bg-hover); text-decoration: none; }
.topbar nav a[aria-current] { color: var(--ds-txt); background: var(--ds-bg-3); font-weight: 600; }
.topbar .grow { flex: 1; }
.topbar .version { font-size: var(--ds-text-3xs); color: var(--ds-txt-4); font-family: var(--ds-font-mono); margin-right: var(--ds-space-sm); }
.theme-toggle {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: none; border-radius: var(--ds-radius-sm);
  color: var(--ds-txt-3); cursor: pointer;
}
.theme-toggle:hover { color: var(--ds-txt); background: var(--ds-bg-3); }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }

@media (max-width: 640px) {
  .topbar { padding: 0 var(--ds-space-base); gap: var(--ds-space-xs); }
  .brand { gap: var(--ds-space-sm); margin-right: var(--ds-space-sm); }
  .brand .name, .brand .divider, .topbar .version { display: none; }
  .topbar nav a { padding: 6px 10px; }
  .theme-toggle { flex: none; }
}

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 248px minmax(0,1fr); min-height: calc(100vh - 57px); width: 100%; }

/* ---------- sidebar ---------- */
.side {
  border-right: 1px solid var(--ds-border-2);
  background: var(--ds-bg);
  padding: var(--ds-space-lg) var(--ds-space-base) var(--ds-space-md);
  display: flex; flex-direction: column; gap: var(--ds-space-xl);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side .campaign h2 { font-size: var(--ds-text-lg); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.side .campaign h2.muted { color: var(--ds-txt-3); }
.side .campaign .meta {
  margin-top: var(--ds-space-sm); display: flex; align-items: center; gap: var(--ds-space-sm);
  font-size: var(--ds-text-2xs); color: var(--ds-txt-3);
}
.stages { display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.stage {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 12px; border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-xs); font-weight: 500; color: var(--ds-txt-2);
  background: none; border: none; font-family: inherit; cursor: pointer; text-align: left; width: 100%;
  line-height: 1.3;
}
.stage:hover { background: var(--ds-bg-hover); color: var(--ds-txt); }
.stage[aria-current] { background: var(--ds-primary-muted); color: var(--ds-txt); font-weight: 600; }
.stage.gated { opacity: 0.45; pointer-events: none; }
.stage .state { margin-left: auto; font-size: var(--ds-text-3xs); }
.state.done { color: var(--ds-green); }
.state.warn { color: var(--ds-yellow); font-variant-numeric: tabular-nums; }
.state.err  { color: var(--ds-red); font-variant-numeric: tabular-nums; }
.state.idle { color: var(--ds-txt-3); }
.side .foot {
  position: sticky; bottom: 0; background: var(--ds-bg); border-top: 1px solid var(--ds-border);
  padding-top: var(--ds-space-md); margin-top: auto;
  display: flex; flex-direction: column; gap: var(--ds-space-sm);
}
/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 var(--ds-space-base);
  font-family: inherit; font-size: var(--ds-text-sm); font-weight: 600; line-height: 1.3;
  border-radius: var(--ds-radius-md); cursor: pointer;
  background: none; border: 1px solid var(--ds-border-2); color: var(--ds-txt);
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 100ms ease-out;
  white-space: normal; text-align: center; max-width: 100%;
}
.btn:hover:not(:disabled) { background: var(--ds-bg-hover); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary:disabled {
  background: var(--ds-bg-3);
  border-color: var(--ds-border);
  color: var(--ds-txt-4);
}
.btn.primary { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-primary-foreground); }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ds-primary) 88%, black); }
.btn.ghost { border-color: transparent; color: var(--ds-txt-2); }
.btn.ghost:hover:not(:disabled) { background: var(--ds-bg-hover); }
.btn.success { background: var(--ds-green); border-color: var(--ds-green); color: var(--ds-primary-foreground); }
.btn.success:hover:not(:disabled) { background: color-mix(in srgb, var(--ds-green) 88%, black); }
.btn.sm { min-height: 40px; padding: 0 var(--ds-space-md); font-size: var(--ds-text-2xs); }
.btn.xs {
  min-height: 36px; padding: 0 12px;
  font-size: var(--ds-text-2xs); border-radius: var(--ds-radius-sm);
}
.btn.danger { border-color: var(--ds-red-border); color: var(--ds-red); }
.btn.danger:hover:not(:disabled) { background: var(--ds-red-bg); }
.linklike {
  background: none; border: none; padding: 0; font-family: inherit;
  font-size: var(--ds-text-2xs); font-weight: 500; color: var(--ds-primary); cursor: pointer;
}
.linklike:hover { text-decoration: underline; }
.linklike:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: none; }

/* ---------- main ---------- */
.main { padding: var(--ds-space-xl) var(--ds-space-xl) var(--ds-space-2xl); min-width: 0; }
.pagehead { display: flex; align-items: center; gap: var(--ds-space-base); margin-bottom: var(--ds-space-lg); flex-wrap: wrap; }
.pagehead h1 { font-size: var(--ds-text-xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.pagehead .actions { display: flex; align-items: center; gap: var(--ds-space-sm); margin-left: auto; flex: none; flex-wrap: wrap; justify-content: flex-end; }

.panel { display: none; }
.panel.active { display: block; animation: panel-in 150ms ease-out; }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }

.card {
  background: var(--ds-bg-elevated); border: 1px solid var(--ds-border-2);
  border-radius: var(--ds-radius-md); margin-bottom: var(--ds-space-lg);
  box-shadow: var(--ds-shadow-sm);
}
.card-h {
  display: flex; align-items: center; gap: var(--ds-space-md); min-height: 58px;
  padding: var(--ds-space-base) var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-border-2);
}
.card-h h3 { font-size: var(--ds-text-md); font-weight: 600; }
.card-h .sub { font-size: var(--ds-text-2xs); color: var(--ds-txt-3); }
.card-h .end { margin-left: auto; display: flex; align-items: center; gap: var(--ds-space-sm); }
.card-b { padding: var(--ds-space-lg); }

/* forms */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-base) var(--ds-space-lg); }
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--ds-space-base) var(--ds-space-lg); }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
label.f {
  display: block; font-size: var(--ds-text-3xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-txt-3);
  margin-bottom: 6px;
}
label.f .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ds-txt-3); }
label.f .req { color: var(--ds-red); font-weight: 600; text-transform: none; letter-spacing: 0; }
input.f, select.f, textarea.f {
  width: 100%; font-family: inherit; font-size: var(--ds-text-sm); color: var(--ds-txt);
  background: var(--ds-bg-3); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); min-height: 42px; padding: 8px 12px;
}
textarea.f { min-height: 96px; resize: vertical; }
input.f.mono, select.f.mono, textarea.f.mono { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); }
input.f:focus, select.f:focus, textarea.f:focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 2px var(--ds-primary-ring); }
input.f.invalid, textarea.f.invalid { border-color: var(--ds-red); }
input.f:read-only { color: var(--ds-txt-2); }
.checkline { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--ds-text-2xs); color: var(--ds-txt-2); }
.checkline input { accent-color: var(--ds-primary); width: 16px; height: 16px; }
.help { font-size: var(--ds-text-2xs); color: var(--ds-txt-3); margin-top: var(--ds-space-xs); line-height: 1.5; }
.help.warn { color: var(--ds-yellow); }
.url-input { display: flex; align-items: stretch; width: 100%; }
.url-input .prefix {
  display: inline-flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--ds-border); border-right: 0;
  border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
  background: var(--ds-bg-3); color: var(--ds-txt-3);
  font-size: var(--ds-text-xs); font-family: var(--ds-font-mono); white-space: nowrap;
}
.url-input input.f { border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0; min-width: 0; }
.url-input.invalid .prefix, .url-input.invalid input.f { border-color: var(--ds-red); }

/* tables */
table.t { width: 100%; border-collapse: collapse; font-size: var(--ds-text-xs); }
table.t th {
  background: var(--ds-bg-3); color: var(--ds-txt); font-weight: 600;
  font-size: var(--ds-text-3xs); letter-spacing: 0.05em; text-transform: uppercase;
  text-align: left; padding: 9px var(--ds-space-base);
}
table.t td { padding: 11px var(--ds-space-base); border-top: 1px solid var(--ds-border); color: var(--ds-txt-2); }
table.t tr:hover td { background: var(--ds-bg-hover); }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); }
table.t td b { color: var(--ds-txt); font-weight: 600; }
.strike { color: var(--ds-txt-4); text-decoration: line-through; }
.tbl-scroll { overflow-x: auto; }

/* pills (status badges) */
.pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: var(--ds-text-3xs); font-weight: 600; line-height: 1.3;
  padding: 2px 9px; border-radius: var(--ds-radius-full); border: 1px solid;
}
.pill.green { color: var(--ds-green); background: var(--ds-green-bg); border-color: var(--ds-green-border); }
.pill.yellow { color: var(--ds-yellow); background: var(--ds-yellow-bg); border-color: var(--ds-yellow-border); }
.pill.red { color: var(--ds-red); background: var(--ds-red-bg); border-color: var(--ds-red-border); }
.pill.orange { color: var(--ds-orange); background: var(--ds-orange-bg); border-color: var(--ds-orange-border); }
.pill.blue { color: var(--ds-primary-light); background: var(--ds-primary-muted); border-color: var(--ds-primary-border); }
.pill.mute { color: var(--ds-txt-3); background: var(--ds-bg-3); border-color: var(--ds-border); }

/* notice (icon + title + description, full border — per DESIGN.md) */
.notice {
  display: flex; gap: var(--ds-space-md); align-items: flex-start;
  border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius-md);
  padding: var(--ds-space-md) var(--ds-space-base); margin-bottom: var(--ds-space-md);
  font-size: var(--ds-text-xs); background: var(--ds-bg-elevated);
}
.notice svg { flex: none; margin-top: 1px; }
.notice .t { font-weight: 600; color: var(--ds-txt); }
.notice .d { color: var(--ds-txt-3); margin-top: 1px; line-height: 1.5; }
.notice.warn { background: var(--ds-yellow-bg); border-color: var(--ds-yellow-border); }
.notice.warn svg { color: var(--ds-yellow); }
.notice.ok { background: var(--ds-green-bg); border-color: var(--ds-green-border); }
.notice.ok svg { color: var(--ds-green); }
.notice.err { background: var(--ds-red-bg); border-color: var(--ds-red-border); }
.notice.err svg { color: var(--ds-red); }

/* shared line/route primitives */
.line { display: flex; align-items: center; gap: var(--ds-space-sm); padding: 8px 0; font-size: var(--ds-text-xs); }
.line + .line { border-top: 1px solid var(--ds-border); }
.line .nm { color: var(--ds-txt); font-weight: 500; }
.line .nm.mute { color: var(--ds-txt-3); font-weight: 400; }
.line .end { margin-left: auto; font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ds-txt-2); }
.line .end.plain { font-family: inherit; display: flex; gap: var(--ds-space-sm); align-items: center; }
.saved-map__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.saved-map__id { color: var(--ds-txt-3); font-size: var(--ds-text-3xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* code box */
.codebox {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); letter-spacing: -0.02em;
  background: var(--ds-bg-3); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); padding: 10px 12px; color: var(--ds-txt-2);
  overflow-x: auto; white-space: nowrap;
  display: flex; align-items: center; gap: var(--ds-space-md);
}
.codebox .linklike { margin-left: auto; flex: none; }
.codeblock {
  background: var(--ds-bg-3); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
  padding: var(--ds-space-base); overflow: auto; max-height: 520px; position: relative;
}
.codeblock pre { margin: 0; white-space: pre-wrap; font-size: var(--ds-text-2xs); line-height: 1.7; font-family: var(--ds-font-mono); color: var(--ds-txt-2); }

/* key-value cells (handoff) */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--ds-space-sm); margin-bottom: var(--ds-space-base); }
.kv .cell { border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius-sm); padding: 10px 12px; background: var(--ds-bg-elevated); }
.kv .cell.warn { border-color: var(--ds-yellow-border); background: var(--ds-yellow-bg); }
.kv .cell .k { font-size: var(--ds-text-4xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ds-txt-3); }
.kv .cell .v { font-size: var(--ds-text-2xs); font-weight: 500; margin-top: 3px; font-family: var(--ds-font-mono); letter-spacing: -0.03em; color: var(--ds-txt); overflow-wrap: anywhere; }
.kv .cell .v.mute { color: var(--ds-txt-3); }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius-md); overflow: hidden; }
.seg button {
  font-family: inherit; font-size: var(--ds-text-2xs); font-weight: 500;
  min-height: 40px; padding: 8px 16px; border: none; background: none; color: var(--ds-txt-3); cursor: pointer;
}
.seg button[aria-current] { background: var(--ds-bg-3); color: var(--ds-txt); font-weight: 600; }

/* ---------- funnel canvas ---------- */
.canvas {
  background: var(--ds-bg);
  background-image: linear-gradient(var(--ds-bg-2) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ds-bg-2) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--ds-border);
  padding: var(--ds-space-xl) var(--ds-space-base); overflow-x: auto;
}

/* SVG funnel map (FunnelMapView), promoted to primary navigation in Phase 2.
   The topology-computed node positions are absolute inside .map-inner; the
   .map-canvas is the scroll viewport. Node geometry is normalized (uniform
   box, fixed anatomy: type kicker → label → optional url → meta). */
.map-legend {
  display: flex; flex-wrap: wrap; gap: var(--ds-space-lg);
  align-items: center; margin-bottom: var(--ds-space-base);
  font-size: var(--ds-text-2xs); color: var(--ds-txt-3);
}
.map-legend__item { display: inline-flex; align-items: center; gap: var(--ds-space-xs); }
.map-canvas {
  background: var(--ds-bg);
  background-image: linear-gradient(var(--ds-bg-2) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ds-bg-2) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius-md);
  max-height: 60vh; overflow: auto;
  padding: var(--ds-space-sm);
}
.map-inner { position: relative; }
.map-node {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  box-sizing: border-box; text-align: left; font-family: inherit;
  background: var(--ds-bg-elevated); border: 1px solid var(--ds-border-2);
  border-radius: var(--ds-radius-md); padding: 14px 14px 12px; position: relative;
  box-shadow: var(--ds-shadow-sm); color: var(--ds-txt); overflow: hidden;
  transition: border-color 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out;
}
.map-node--clickable { cursor: pointer; }
.map-node--clickable:hover { border-color: var(--ds-txt-4); transform: translateY(-1px); box-shadow: var(--ds-shadow-md); }
.map-node--clickable:active { transform: scale(0.99); }
.map-node--clickable:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.map-node--selected, .map-node[aria-current] {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 1px var(--ds-primary), var(--ds-shadow-md);
}
.map-node-wrap { position: absolute; }
.map-node--entry { border-color: var(--ds-orange-border); }
.map-node__entry {
  position: absolute; top: 8px; right: 10px;
  font-size: var(--ds-text-4xs); font-weight: 600; letter-spacing: 0.08em;
  color: var(--ds-orange); background: var(--ds-bg); border: 1px solid var(--ds-orange-border);
  border-radius: var(--ds-radius-full); padding: 1px 7px; z-index: 2; pointer-events: none;
}
.map-node__topline {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px; min-height: 14px;
}
.map-node--entry .map-node__topline { padding-right: 54px; }
.map-node__flags {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--ds-text-4xs); font-weight: 700; letter-spacing: 0.04em;
  color: var(--ds-primary-light);
}
.map-node__label {
  font-size: var(--ds-text-sm); font-weight: 600; line-height: 1.3; color: var(--ds-txt);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.map-node__url {
  font-size: var(--ds-text-2xs); color: var(--ds-txt-3); margin-top: 5px;
  font-family: var(--ds-font-mono); letter-spacing: -0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-node__meta {
  font-size: var(--ds-text-2xs); color: var(--ds-txt-3); margin-top: auto;
  padding-top: 4px; font-family: var(--ds-font-mono); letter-spacing: -0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-node__dot { margin: 0 4px; }
/* Type kicker (badge) inside nodes — colored by page type, mockup .ptype scale. */
.map-node .badge {
  font-size: var(--ds-text-3xs); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 0; background: none; border: none;
}
.page-type--presell { color: var(--ds-orange); }
.page-type--landing { color: var(--ds-primary-light); }
.page-type--checkout { color: var(--ds-green); }
.page-type--upsell { color: var(--ds-yellow); }
.page-type--downsell { color: var(--ds-red); }
.page-type--thankyou { color: var(--ds-txt-3); }

/* ---------- inspector workspace (PageCard reorg lands in Phase 2) ---------- */
.iband { display: grid; gap: var(--ds-space-xl) var(--ds-space-2xl); padding: var(--ds-space-xl) var(--ds-space-lg); }
.iband + .iband { border-top: 1px solid var(--ds-border-2); }
.iband.cols2 { grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); }
@media (max-width: 860px) { .iband.cols2 { grid-template-columns: 1fr; } }
.icol { display: flex; flex-direction: column; gap: var(--ds-space-xl); min-width: 0; }
.igroup { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.igroup > .k {
  font-size: var(--ds-text-3xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ds-txt-3);
  padding-bottom: var(--ds-space-xs); border-bottom: 1px solid var(--ds-border-2);
}

/* Inspector header title — inline-editable label (replaces PageCard's label
   input). Reads as an h3 until focused. */
.inspector-title {
  flex: 1; min-width: 0; font-family: inherit;
  font-size: var(--ds-text-md); font-weight: 600; color: var(--ds-txt);
  background: none; border: 1px solid transparent; border-radius: var(--ds-radius-sm);
  padding: 3px 8px; margin: -3px 0;
}
.inspector-title:hover { border-color: var(--ds-border); }
.inspector-title:focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 2px var(--ds-primary-ring); background: var(--ds-bg-3); }

/* Route <select> validity coloring (mirrors PageCard's accept/decline/invalid). */
select.f--accept { border-color: var(--ds-green-border); }
select.f--decline { border-color: var(--ds-red-border); }
select.f--invalid { border-color: var(--ds-red); }

.linklike.danger { color: var(--ds-red); }

/* Package rows inside the inspector Packages group. Scoped to the inspector
   bands so the differently-structured legacy PageCard .pkg-row (7-8 children,
   ?legacy-pages=1) is not mangled by this grid. */
.iband .pkg-row {
  display: grid; grid-template-columns: minmax(0,240px) 64px minmax(112px,max-content) minmax(72px,max-content) minmax(128px,max-content);
  gap: var(--ds-space-md); align-items: center;
  min-width: 0; overflow: hidden;
  padding: 10px 0; font-size: var(--ds-text-xs); line-height: 1.4;
}
.iband .pkg-row + .pkg-row { border-top: 1px solid var(--ds-border-2); }
.iband .pkg-row .nm { color: var(--ds-txt); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iband .pkg-row .qty { min-height: 32px; padding: 4px 8px; text-align: center; }
.iband .pkg-row .pr {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); color: var(--ds-txt-2);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: block;
}
.iband .pkg-row__actions {
  display: inline-flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--ds-space-sm);
  min-width: 128px;
}
.iband .pkg-row__upsell-slot { min-width: 72px; }
.pkg-upsell-toggle {
  min-height: 30px; padding: 0 10px;
  border-radius: var(--ds-radius-full); border: 1px solid var(--ds-border-2);
  background: var(--ds-bg-3); color: var(--ds-txt-3);
  font-family: var(--ds-font-sans); font-size: var(--ds-text-3xs); font-weight: 700;
  cursor: pointer; line-height: 1.2;
}
.pkg-upsell-toggle:hover { color: var(--ds-txt); border-color: var(--ds-txt-4); }
.pkg-upsell-toggle.is-on {
  color: var(--ds-primary-light);
  background: var(--ds-primary-muted);
  border-color: var(--ds-primary-border);
}
.pkg-upsell-toggle:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
@media (max-width: 720px) {
  .iband .pkg-row { grid-template-columns: minmax(0,1fr) 64px; }
  .iband .pkg-row .pr, .iband .pkg-upsell-toggle, .iband .pkg-row__upsell-slot, .iband .pkg-row__actions { grid-column: 1 / -1; }
  .iband .pkg-row__actions { min-width: 0; }
  .iband .pkg-row__upsell-slot { min-width: 0; }
}

/* Legacy ?legacy-pages=1 parachute — minimal legibility for its one-release
   life (these classes were never styled post-split; see PR #240 review). */
.page-card .pkg-row { display: flex; align-items: center; gap: var(--ds-space-md); padding: 6px 0; font-size: var(--ds-text-xs); }
.pkg-thumb { max-width: 44px; height: auto; border-radius: var(--ds-radius-sm); flex: none; }
.page-card .pkg-meta { min-width: 0; }
.page-card .qty-input { width: 56px; min-height: 30px; text-align: center; }

/* ── Reused leaf-component classes (ItemPicker, OfferSurfacesPanel,
   DesignSourcePanel, CustomFieldsPanel, PromoCodesPanel) — styled with --ds-
   tokens so the inspector and the legacy stacked PageCard share one look. ── */
.form-label {
  display: block; font-size: var(--ds-text-3xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-txt-3);
  margin-bottom: 6px;
}
.form-input, .form-select, .form-textarea {
  width: 100%; font-family: inherit; font-size: var(--ds-text-sm); color: var(--ds-txt);
  background: var(--ds-bg-3); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); min-height: 36px; padding: 6px 12px;
}
.form-input--sm { min-height: 36px; font-size: var(--ds-text-xs); }
.form-input--mono { font-family: var(--ds-font-mono); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 2px var(--ds-primary-ring); }
.form-input--invalid { border-color: var(--ds-red); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--ds-text-3xs); font-weight: 600; padding: 2px 8px;
  border-radius: var(--ds-radius-full); border: 1px solid var(--ds-border);
  background: var(--ds-bg-3); color: var(--ds-txt-2);
}
.badge--info { color: var(--ds-primary-light); background: var(--ds-primary-muted); border-color: var(--ds-primary-border); }
.badge--warning { color: var(--ds-yellow); background: var(--ds-yellow-bg); border-color: var(--ds-yellow-border); }
.badge--success { color: var(--ds-green); background: var(--ds-green-bg); border-color: var(--ds-green-border); }
.badge--neutral { color: var(--ds-txt-3); }

.toggle-btn {
  font-family: inherit; font-size: var(--ds-text-2xs); font-weight: 600;
  padding: 5px 12px; border-radius: var(--ds-radius-md); cursor: pointer;
  border: 1px solid var(--ds-border-2); background: var(--ds-bg-3); color: var(--ds-txt-2);
}
.toggle-btn--on { color: var(--ds-primary); border-color: var(--ds-primary); background: var(--ds-primary-muted); }
.toggle-btn--off { color: var(--ds-txt-3); }

/* ItemPicker */
.pkg-picker { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.pkg-picker__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-sm); }
.pkg-picker__search { flex: 1 1 180px; }
.pkg-picker__bulk-btn {
  font-family: inherit; font-size: var(--ds-text-3xs); font-weight: 500;
  min-height: 36px; padding: 6px 10px; border-radius: var(--ds-radius-sm); cursor: pointer;
  border: 1px solid var(--ds-border-2); background: var(--ds-bg-3); color: var(--ds-txt-2);
}
.pkg-picker__bulk-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pkg-picker__counts { font-size: var(--ds-text-3xs); color: var(--ds-txt-3); margin-left: auto; }
.pkg-picker__pinned { display: flex; flex-direction: column; gap: 6px; }
.pkg-picker__section-label, .pkg-picker__pinned-label { font-size: var(--ds-text-3xs); color: var(--ds-txt-3); font-weight: 600; }
.pkg-picker__pinned-pills, .pkg-picker__results { display: flex; flex-wrap: wrap; gap: 6px; }
.pkg-picker__results { max-height: 220px; overflow-y: auto; padding: 2px; border-top: 1px solid var(--ds-border); }
.pkg-picker__empty { font-size: var(--ds-text-2xs); color: var(--ds-txt-3); padding: 6px 2px; }
.pkg-toggle {
  font-family: inherit; font-size: var(--ds-text-2xs); font-weight: 500;
  min-height: 36px; padding: 6px 10px; border-radius: var(--ds-radius-sm); cursor: pointer;
  border: 1px solid var(--ds-border-2); background: var(--ds-bg-3); color: var(--ds-txt-2);
  display: inline-flex; align-items: center; gap: 5px; text-align: left;
}
.pkg-toggle--on { color: var(--ds-primary); border-color: var(--ds-primary); background: var(--ds-primary-muted); }
.pkg-toggle__icon { opacity: 0.7; }

/* OfferSurfacesPanel */
.offer-surfaces { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.offer-surface-row { display: flex; align-items: center; gap: var(--ds-space-md); }
.offer-surface-row--spaced { margin-top: var(--ds-space-sm); }
.offer-surface-warning { font-size: var(--ds-text-3xs); color: var(--ds-yellow); }
.offer-surface-panel {
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-md); background: var(--ds-bg-3);
}
.offer-surface-summary { font-size: var(--ds-text-3xs); color: var(--ds-txt-3); margin-top: 4px; }
.offer-surface-summary code { font-family: var(--ds-font-mono); color: var(--ds-primary-light); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.mb-8 { margin-bottom: 8px; }

/* CustomFieldsPanel + PromoCodesPanel (details/summary) */
.custom-field-row { display: flex; align-items: center; gap: var(--ds-space-sm); }
.btn--icon { background: none; border: none; color: var(--ds-txt-3); cursor: pointer; font-size: 16px; padding: 0 4px; }
.btn--ghost { background: none; border: 1px solid var(--ds-border-2); color: var(--ds-txt-2); border-radius: var(--ds-radius-sm); cursor: pointer; padding: 4px 10px; font-family: inherit; }
.btn--sm { font-size: var(--ds-text-3xs); }
.btn--danger { color: var(--ds-red); border: 1px solid var(--ds-red-border); background: none; border-radius: var(--ds-radius-sm); cursor: pointer; padding: 4px 10px; font-family: inherit; }
.page-advanced { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); }
.page-advanced__summary { display: flex; align-items: center; gap: var(--ds-space-sm); padding: 8px 12px; cursor: pointer; font-size: var(--ds-text-2xs); font-weight: 600; color: var(--ds-txt-2); }
.page-advanced__body { display: flex; flex-direction: column; gap: var(--ds-space-md); padding: var(--ds-space-md); border-top: 1px solid var(--ds-border); }

/* InfoBubble */
.info-bubble { position: relative; display: inline-flex; margin-left: 4px; cursor: help; }
.info-bubble__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-weight: 700;
  background: var(--ds-bg-3); border: 1px solid var(--ds-border-2); color: var(--ds-txt-3);
}
.info-bubble__tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: 240px; z-index: 20; font-size: var(--ds-text-3xs); font-weight: 400;
  text-transform: none; letter-spacing: 0; line-height: 1.5;
  background: var(--ds-bg-elevated); border: 1px solid var(--ds-border-2);
  border-radius: var(--ds-radius-sm); padding: 8px 10px; color: var(--ds-txt-2);
  box-shadow: var(--ds-shadow-md);
}

/* page list (Funnel List view) */
.pagerows__head { align-items: center; flex-wrap: wrap; }
.pagerows { display: flex; flex-direction: column; }
.pagerow {
  display: flex; align-items: center; gap: var(--ds-space-md);
  padding: 10px var(--ds-space-lg); border-bottom: 1px solid var(--ds-border);
  font-size: var(--ds-text-xs); cursor: pointer; color: var(--ds-txt-2);
}
.pagerow:hover { background: var(--ds-bg-hover); }
.pagerow[aria-current] { background: var(--ds-primary-muted); }
.pagerow:last-child { border-bottom: none; }
.pagerow .ord { font-family: var(--ds-font-mono); font-size: var(--ds-text-3xs); color: var(--ds-txt-3); width: 18px; flex: none; }
.pagerow .route-note { margin-left: auto; font-size: var(--ds-text-3xs); color: var(--ds-txt-3); font-family: var(--ds-font-mono); letter-spacing: -0.03em; }
.pagerow b { color: var(--ds-txt); font-weight: 600; }
.pagerow--disabled { opacity: 0.5; }
.pagerow--disabled b { text-decoration: line-through; }
.pagerow__reorder { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pagerow .route-note + .pagerow__reorder { margin-left: var(--ds-space-md); }
.pagerow__reorder:first-of-type:not(:last-child) { margin-left: auto; }
.pagerow__reorder-label {
  color: var(--ds-txt-3); font-size: var(--ds-text-3xs); font-weight: 600;
}
.page-order-btn {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; cursor: pointer; color: var(--ds-txt-3);
  background: var(--ds-bg-3); border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius-sm);
}
.page-order-btn:hover:not(:disabled) { color: var(--ds-txt); border-color: var(--ds-txt-4); }
.page-order-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* + Add page menu */
.add-page { position: relative; }
.add-page__menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 140px; background: var(--ds-bg-elevated);
  border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-md); padding: 4px; display: flex; flex-direction: column;
}
.add-page__menu button {
  font-family: inherit; font-size: var(--ds-text-2xs); text-align: left; cursor: pointer;
  padding: 7px 10px; border: none; background: none; color: var(--ds-txt-2); border-radius: var(--ds-radius-sm);
}
.add-page__menu button:hover { background: var(--ds-bg-hover); color: var(--ds-txt); }

/* ---------- empty (first-visit) state ---------- */
.empty-hero { max-width: 560px; }
.empty-hero h1 { font-size: var(--ds-text-xl); font-weight: 700; letter-spacing: -0.015em; }
.empty-hero p { font-size: var(--ds-text-xs); color: var(--ds-txt-3); margin-top: var(--ds-space-xs); }
.or-rule {
  display: flex; align-items: center; gap: var(--ds-space-md);
  font-size: var(--ds-text-3xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ds-txt-3); margin: var(--ds-space-base) 0;
}
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--ds-border); }
.tmpl {
  display: flex; align-items: baseline; gap: var(--ds-space-md);
  padding: 11px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
  cursor: pointer; margin-bottom: var(--ds-space-sm); background: var(--ds-bg-2);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
  width: 100%; text-align: left; font-family: inherit;
}
.tmpl:hover { border-color: var(--ds-border-2); background: var(--ds-bg-hover); }
.tmpl .nm { font-size: var(--ds-text-xs); font-weight: 600; color: var(--ds-txt); flex: none; }
.tmpl .fl { font-size: var(--ds-text-2xs); color: var(--ds-txt-3); font-family: var(--ds-font-mono); letter-spacing: -0.02em; }

/* utilities used by ported markup */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--ds-space-sm); }
.gap-md { gap: var(--ds-space-md); }
.gap-base { gap: var(--ds-space-base); }
.grow-1 { flex: 1; }
.mt-sm { margin-top: var(--ds-space-sm); }
.mt-base { margin-top: var(--ds-space-base); }
.mt-md { margin-top: var(--ds-space-md); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- mobile: sidebar collapses to a top stage strip (<1024px) ---------- */
@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: static; height: auto; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ds-space-md);
    border-right: none; border-bottom: 1px solid var(--ds-border);
    padding: var(--ds-space-md) var(--ds-space-base);
  }
  .side .campaign { flex: 1 1 100%; }
  .side .campaign h2 { font-size: var(--ds-text-md); }
  .stages { flex-direction: row; flex-wrap: wrap; gap: var(--ds-space-xs); flex: 1 1 100%; }
  .stage { width: auto; }
  .side .foot { position: static; flex-direction: row; border-top: none; padding-top: 0; margin-top: 0; flex: 1 1 100%; }
  .side .foot .btn { flex: 1; }
}