:root{
  --bg:#f7f7f5; --panel:#ffffff;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;
  --line:#e5e7eb; --line-2:#eef0ec;
  --accent:#0f7a3f; --accent-soft:#e8f5ec; --accent-ink:#064e2a;
  --danger:#b91c1c; --warn:#7a4a00;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.loading{padding:40px; text-align:center; color:var(--ink-3);}

/* ===== Login ===== */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:radial-gradient(800px 400px at 80% -10%, #eef7f0 0%, transparent 60%), var(--bg);
}
.login-card{
  width:100%; max-width:380px; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:28px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 12px 30px rgba(15,23,42,0.05);
}
.login-card h1{font-size:22px; font-weight:700;}
.login-card .muted{color:var(--ink-2); font-size:13.5px;}
.login-card label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2); font-weight:600;}
.login-card input{
  padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font:inherit; color:var(--ink); background:#fff;
}
.login-card input:focus{outline:none; border-color:var(--accent);}
.form-error{color:var(--danger); font-size:13px; min-height:18px;}

/* ===== Layout ===== */
.layout{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
.sidebar{
  background:#0f172a; color:#cbd5e1;
  display:flex; flex-direction:column;
  padding:18px 14px;
}
.sidebar .brand{
  font-weight:800; color:#fff; font-size:15px; letter-spacing:-0.01em;
  padding:8px 10px 14px; border-bottom:1px solid #1e293b; margin-bottom:10px;
}
.sidebar nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.sidebar nav a{
  color:#cbd5e1; text-decoration:none; padding:9px 12px; border-radius:8px;
  font-size:14px; font-weight:600; letter-spacing:-0.005em;
  transition:background .15s, color .15s;
}
.sidebar nav a:hover{background:#1e293b; color:#fff;}
.sidebar nav a.active{background:var(--accent); color:#fff;}
.sidebar-footer{
  border-top:1px solid #1e293b; padding:10px; display:flex; flex-direction:column; gap:8px;
  font-size:13px;
}
.sidebar-footer .docs-link{
  display:block; padding:8px 10px; border-radius:8px;
  background:#1e293b; color:#cbd5e1; text-decoration:none;
  font-size:12.5px; font-weight:600; letter-spacing:-0.005em;
  transition:background .15s, color .15s;
}
.sidebar-footer .docs-link:hover{ background:#243248; color:#fff; }
.sidebar-footer-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 4px;
}
.sidebar-footer a{color:#94a3b8; text-decoration:none;}
.sidebar-footer a:hover{color:#fff;}
.btn-link{
  background:transparent; border:0; color:#94a3b8; cursor:pointer; font:inherit; padding:0;
}
.btn-link:hover{color:#fff;}

/* ===== Main / Views ===== */
.main{padding:28px 32px; max-width:1200px;}
.view-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.view-head h2{font-size:24px; font-weight:700;}
.view-head .actions{display:flex; gap:8px;}

.btn{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:8px 14px; border-radius:10px; font:inherit; font-weight:600; font-size:13.5px;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s;
  display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{background:#f9fafb; border-color:#cbd5e1;}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn.primary:hover{background:#0b6634;}
.btn.danger{background:#fff; color:var(--danger); border-color:#fecaca;}
.btn.danger:hover{background:#fef2f2;}
.btn:disabled{opacity:0.6; cursor:not-allowed;}

/* ===== Search input in list-view header ===== */
.search-input{
  appearance:none;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:8px 12px; border-radius:10px; font:inherit; font-size:13.5px;
  min-width:280px;
  transition:border-color .12s, box-shadow .12s;
}
.search-input::placeholder{ color:var(--ink-3); }
.search-input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(15,122,63,0.12);
}

/* ===== Tables ===== */
.table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
table{width:100%; border-collapse:collapse;}
thead{background:#fafafa;}
th, td{
  padding:12px 14px; text-align:left; font-size:13.5px;
  border-bottom:1px solid var(--line-2);
}
th{font-weight:700; color:var(--ink-2); font-size:12px; text-transform:uppercase; letter-spacing:.06em;}

/* Sortable column header — clickable label + small arrow indicator. */
th.sortable{
  cursor:pointer; user-select:none;
  transition:background .12s, color .12s;
}
th.sortable:hover{ background:#f1f5f9; color:var(--ink); }
th.sortable .sort-arrow{
  display:inline-block; margin-left:6px;
  font-size:11px; color:var(--ink-3); transition:color .12s, opacity .12s;
  opacity:0.5;
}
th.sortable:hover .sort-arrow{ opacity:1; color:var(--ink-2); }
th.sortable.sorted{ color:var(--accent-ink); background:var(--accent-soft); }
th.sortable.sorted .sort-arrow{ color:var(--accent); opacity:1; }
td.actions{text-align:right; white-space:nowrap;}
tbody tr:hover{background:#fafafa;}
.empty{padding:32px; text-align:center; color:var(--ink-3);}

/* ===== Load more / show less pager ===== */
.list-pager{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px;
  background:#fff; border:1px solid var(--line); border-top:0;
  border-radius:0 0 14px 14px;
  margin-top:-1px;   /* tuck under the table-wrap's bottom border */
}
.list-pager-count{
  font-size:12.5px; color:var(--ink-3);
  letter-spacing:.01em;
}
.list-pager-count strong{ color:var(--ink); font-weight:700; }
.list-pager-actions{ display:flex; align-items:center; gap:10px; }
.list-pager .btn-link{
  font-size:12.5px; font-weight:600; color:var(--ink-3);
  background:transparent; border:0; cursor:pointer; padding:6px 10px; border-radius:6px;
  transition:background .12s, color .12s;
}
.list-pager .btn-link:hover{ background:#f1f5f9; color:var(--ink); }
.btn.pg-more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; padding:7px 14px;
}
.btn.pg-more .pg-arrow{
  font-size:11px; transition:transform .15s ease;
}
.btn.pg-more:hover .pg-arrow{ transform:translateY(2px); }

/* ===== Pills / chips ===== */
.pill-tag{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:#f1f5f9; color:var(--ink-2);
}
.pill-tag.active{background:var(--accent-soft); color:var(--accent-ink);}
.pill-tag.warn{background:#fff7ec; color:var(--warn);}
.pill-tag.muted{background:#eef1f5; color:var(--ink-3);}

/* ===== Offer list row states =====
   Unassigned offers (no campaign / deleted campaign) get a warm tint so
   they stand out for triage; archived offers are muted + struck through.
   Placed after the base `tbody tr:hover` rule so equal-specificity hover
   handling resolves in source order. */
tbody tr.row-unassigned{ background:#fff7ec; }
tbody tr.row-unassigned:hover{ background:#fdefd6; }
tbody tr.row-archived{ opacity:.5; }
tbody tr.row-archived:hover{ opacity:.75; background:#fafafa; }
tbody tr.row-archived td strong{ text-decoration:line-through; text-decoration-color:var(--ink-3); }

/* ===== Vertical-status badge =====
   Renders the live trkreach status next to a campaign — both in the
   Campaigns list column AND inside the Campaign edit form's banner.
   Five states with distinct color signals so the operator can scan
   a long list and immediately spot suppressed campaigns. */
.vstat-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  cursor:help; white-space:nowrap;
  border:1px solid transparent;
}
.vstat-badge.vstat-active   { background:var(--accent-soft); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 20%, transparent); }
.vstat-badge.vstat-paused   { background:#fff4e0; color:#8a5400; border-color:#f5d49a; }
.vstat-badge.vstat-inactive { background:#fff4e0; color:#8a5400; border-color:#f5d49a; }
.vstat-badge.vstat-missing  { background:#fde7e7; color:#9b1c1c; border-color:#f5b7b7; }
.vstat-badge.vstat-unknown  { background:#f1f5f9; color:var(--ink-3); border-color:#e2e8f0; }

/* Banner inside Campaign edit form. Lives directly below the
   Priority+verticalId row and surfaces what the suppression rule is
   currently doing for this campaign. Color-bar on the left matches
   the badge state. */
.vstat-banner{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  background:#fff; border:1px solid var(--line); border-left-width:4px;
  font-size:13px; line-height:1.45;
}
.vstat-banner.is-live{
  border-left-color:var(--accent);
  background:color-mix(in srgb, var(--accent-soft) 50%, #fff);
}
.vstat-banner.is-suppressed{
  border-left-color:#d97706;
  background:#fffbf2;
}
.vstat-banner-text{ color:var(--ink-2); }
.vstat-banner-text strong{ color:var(--ink); }

/* ===== Modal / form panel ===== */
.modal-bg{
  position:fixed; inset:0; background:rgba(15,23,42,0.45);
  display:flex; align-items:flex-start; justify-content:center; z-index:50;
  padding:40px 16px; overflow-y:auto;
}
.modal{
  background:var(--panel); border-radius:14px; width:100%; max-width:980px;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  display:flex; flex-direction:column;
}
.modal-head{
  padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-radius:14px 14px 0 0;
}
.modal-head h3{font-size:18px; font-weight:700;}
.modal-body{
  /* Tinted background so the white section cards stand out as discrete units. */
  padding:18px; display:flex; flex-direction:column; gap:12px;
  background:#f6f6f3;
}
.modal-foot{
  padding:14px 22px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:flex-end; gap:10px;
  background:#fff; border-radius:0 0 14px 14px;
}
/* Counter the display:flex above so [hidden] actually hides the
   brand-tiles name row (#catTilesRow) — same fix as .trk-filter-row
   and the picker popovers below. */
.modal-foot[hidden]{ display:none; }
/* "✓ Saved" toast — shown inline in the modal-foot after a successful
   save. Modal stays open; the toast auto-fades after ~1.4s. */
.modal-saved-msg{
  display:inline-flex; align-items:center;
  margin-right:auto;                 /* push to left, away from buttons */
  font-size:12.5px; font-weight:600; letter-spacing:0.01em;
  color:var(--accent-ink);
  background:var(--accent-soft);
  border:1px solid #cfe7d6;
  padding:6px 10px; border-radius:999px;
  transition:opacity .9s ease;
}
.modal-saved-msg.fading{ opacity:0; }
.modal-saved-msg[hidden]{ display:none; }

label.field{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2); font-weight:600;}
.field-label-row{display:flex; align-items:center; gap:8px;}

/* AI copy-gen ✨ button — sits in the field label, next to Headline / Body */
.ai-gen{
  appearance:none; border:1px solid #d8c98a; background:linear-gradient(180deg,#fffbf0,#fff5d6);
  color:#7a4a00; font:inherit; font-size:11px; font-weight:700;
  padding:3px 8px 3px 6px; border-radius:999px;
  display:inline-flex; align-items:center; gap:4px;
  cursor:pointer; user-select:none;
  transition:transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.ai-gen:hover{ background:linear-gradient(180deg,#fff5d6,#ffe9a8); border-color:#c9b56e; transform:translateY(-1px); box-shadow:0 4px 10px rgba(180,140,0,0.15); }
.ai-gen:active{ transform:translateY(0); }
.ai-gen:disabled{ opacity:0.6; cursor:wait; transform:none; }
.ai-gen-icon{ font-size:13px; line-height:1; display:inline-block; }
.ai-gen-label{ letter-spacing:.04em; }
.ai-gen.loading .ai-gen-icon{ animation:aiSpin 1s linear infinite; }
@keyframes aiSpin{ to { transform:rotate(360deg); } }

/* Larger AI generate button used at the top of the Question form. */
.ai-gen.ai-gen-lg{
  font-size:13.5px; padding:8px 16px 8px 12px; border-radius:10px;
}
.ai-gen.ai-gen-lg .ai-gen-icon{ font-size:16px; }
.ai-gen.ai-gen-lg .ai-gen-label{ letter-spacing:.01em; text-transform:none; }

/* Generate-button row — holds the big Generate button, the Strict
   mode checkbox, and the status text on one line (wrapping on narrow
   admin viewports). */
.ai-gen-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
}
.ai-strict{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink-2); font-weight:600;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  padding:6px 10px; border-radius:8px;
  border:1px solid transparent;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.ai-strict:hover{ background:#fffaeb; border-color:#e8d4a6; color:var(--ink); }
.ai-strict input{ margin:0; cursor:pointer; }
.ai-strict input:checked + span{ color:var(--ink); }
.ai-strict:has(input:checked){
  background:#fff5d6; border-color:#c9b56e; color:#6b4f00;
}

/* AI panel — the "Generate with AI" card sits at the top of the
   Question form with a soft amber accent so admins notice the
   shortcut without it competing with the actual form fields. */
.ai-panel{
  background:linear-gradient(180deg,#fffdf4,#fff8e1);
  border:1px solid #e7d99c;
  box-shadow:0 1px 2px rgba(180,140,0,0.08);
}
.ai-panel h4{ color:#5b4205; }
.ai-panel h4 .hint{ color:#7a5e1e; }

.ai-intent-chips{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px; padding:6px 0;
}
.ai-intent-chip{
  align-items:flex-start;
  padding:10px 12px;
  border-radius:10px;
  line-height:1.35;
  cursor:pointer;
}
.ai-intent-chip input[type=radio]{ margin-top:2px; flex-shrink:0; }
.ai-intent-chip span{ display:block; }
.ai-intent-chip .hint{ font-size:11.5px; margin-top:2px; line-height:1.35; }
.ai-intent-chip:has(input:checked){
  background:#fff5d6; border-color:#c9b56e;
  color:#3d2a00;
}
.ai-intent-chip:has(input:checked) .hint{ color:#6a4f00; }

/* Optional steering input under each AI-enabled field. Slim + muted so
   it reads as a supporting control, not a primary form input. The
   value persists between regenerations so admins can iterate on the hint. */
.ai-hint{
  margin-top:-2px;
  padding:6px 10px !important;
  border:1px dashed #d8c98a !important;
  background:#fffbf0 !important;
  border-radius:8px !important;
  font:inherit; font-size:12px !important;
  color:var(--ink-2) !important;
  font-style:italic;
}
.ai-hint::placeholder{ color:#a89868; font-style:italic; }
.ai-hint:focus{
  outline:none !important;
  border-color:#c9b56e !important;
  background:#fff5d6 !important;
  font-style:normal;
}
.field input[type=text], .field input[type=number], .field input[type=url], .field textarea, .field select{
  padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; color:var(--ink); background:#fff; font-size:13.5px;
}
.field textarea{font-family:'SF Mono','Menlo',ui-monospace,monospace; font-size:12.5px; min-height:80px; resize:vertical;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--accent);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;}
.field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:start;}
.field-row-4{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; align-items:start;}
/* Asymmetric rows — for "small toggle + wide URL" or "two small + one
   wide". Use when a checkbox or short field would otherwise eat 50%
   of a row that wants to give a URL/text the breathing room. */
.field-row-asym{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:end;}
.field-row-asym-3{display:grid; grid-template-columns:auto auto 1fr; gap:14px; align-items:end;}
.field-row-name{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:end;}
.field-row-name-3{display:grid; grid-template-columns:2fr 1fr auto auto; gap:14px; align-items:end;}
/* When a .field-check (checkbox) lives inside any *-asym or *-name row,
   strip its grid stretch and shrink to its natural pill width so it
   doesn't waste horizontal real estate. */
.field-row-asym .field-check,
.field-row-asym-3 .field-check,
.field-row-name .field-check,
.field-row-name-3 .field-check{
  white-space:nowrap; padding-bottom:9px;   /* align baseline with sibling inputs */
}
/* …but a hint INSIDE such a pill must still wrap — otherwise nowrap forces
   the whole grid column wide and crushes sibling controls. */
.field-row-asym .field-check .hint,
.field-row-asym-3 .field-check .hint,
.field-row-name .field-check .hint,
.field-row-name-3 .field-check .hint{ white-space:normal; }
.hint{ color:var(--ink-3); font-size:12.5px; line-height:1.5; font-weight:400; }
.hint code{ background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:11.5px; }
.field .hint{font-weight:400; color:var(--ink-3); font-size:11.5px; line-height:1.4;}
.field-check{
  flex-direction:row; align-items:center; gap:8px;
  /* Compact pill — so a checkbox doesn't claim a full grid column */
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; cursor:pointer;
  font-weight:600; color:var(--ink-2); font-size:13.5px;
  transition:border-color .12s, background .12s;
}
.field-check:hover{ border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.field-check input{width:auto; cursor:pointer; margin:0;}
/* Hint inside a checkbox pill — render below as a small subtitle */
.field-check .hint{
  display:block; width:100%; margin-top:4px;
  font-size:11.5px; font-weight:400; color:var(--ink-3);
}

.repeater{display:flex; flex-direction:column; gap:8px; border:1px dashed var(--line); border-radius:10px; padding:10px;}
.repeater-row{display:grid; gap:8px; grid-template-columns:1fr 1fr 1fr 1fr auto; align-items:center;}
.repeater-row input, .repeater-row select{
  padding:7px 10px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:13px; background:#fff;
}
.repeater-row .x{
  background:transparent; border:0; color:var(--ink-3); cursor:pointer; padding:6px;
}
.repeater-row .x:hover{color:var(--danger);}
.section{
  background:#fff;
  border:1px solid var(--line); border-radius:12px;
  padding:14px 18px 16px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}

/* Section header: bigger, sentence-case, numbered pill prefix, separator line.
   Numbering is automatic via CSS counter so admins can navigate by index. */
.section h4{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:700;
  letter-spacing:-0.005em; color:var(--ink);
  text-transform:none;
  margin:0; padding:0 0 8px;
  border-bottom:1px solid var(--line-2);
}
.section h4::before{
  content: '';
  width:4px; height:16px;
  border-radius:2px;
  background:var(--accent);
  flex-shrink:0;
}
/* Right-aligned slot inside a section header — use for section-level
   ON/OFF toggles so a single checkbox doesn't waste a whole row.
       <h4>Assist dialog <span class="section-toggle">…checkbox…</span></h4>
   The toggle sits flush-right of the title with consistent baseline. */
.section h4 .section-toggle{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--bg-soft, #f6f6f3);
  border:1px solid var(--line);
  padding:4px 10px; border-radius:99px;
  cursor:pointer; user-select:none;
}
.section h4 .section-toggle input{ width:auto; margin:0; cursor:pointer; }
.section h4 .section-toggle:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* Inline hint span inside the h4 (e.g. "Targeting — leave any group empty…")
   gets a softer treatment so it reads as a subtitle not a heading. */
.section h4 > .hint,
.section h4 > span{
  font-size:12.5px; font-weight:400;
  color:var(--ink-3); letter-spacing:0;
  text-transform:none;
}
.section h4 .ai-gen{
  margin-left:auto;          /* push the auto-fill button to the right edge */
}

/* ===== Chip selectors (used in targeting + segment-rule editor) ===== */
.chip-row{
  display:flex; flex-wrap:wrap; gap:6px; padding:6px 0;
}
label.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:13px; font-weight:500; color:var(--ink-2);
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
  user-select:none;
}
label.chip input{ width:auto; margin:0; }
label.chip:hover{ background:#f9fafb; border-color:#cbd5e1; }
label.chip:has(input:checked){
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);
}

.answer-block{
  border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; margin-bottom:8px;
  background:#fafafa;
}
.answer-q{ font-size:13px; color:var(--ink-2); margin-bottom:4px; }

/* ===== Segment rule editor ===== */
.seg-rule{
  border:1px solid var(--line); border-radius:12px; padding:12px;
  background:#fff; display:flex; flex-direction:column; gap:10px;
}
.seg-rule.fallback{
  border-style:dashed; background:#fbfaf7;
}
.seg-rule-head{
  display:flex; align-items:center; gap:10px;
}
.seg-rule-head .rm-rule{
  margin-left:auto; color:var(--ink-3);
}
.seg-rule-head .rm-rule:hover{ color:var(--danger); }

.badge{
  display:inline-block; padding:3px 8px; border-radius:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.badge.when{ background:var(--accent-soft); color:var(--accent-ink); }
.badge.then{ background:#eef2ff; color:#3730a3; }
.badge.fallback{ background:#fff7ec; color:var(--warn); }

.seg-conds{
  display:flex; flex-direction:column; gap:8px;
  background:#fafafa; border-radius:8px; padding:10px;
}
.seg-cond{
  background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:10px;
  display:flex; flex-direction:column; gap:8px;
}
.seg-cond-row{
  display:flex; align-items:flex-end; gap:10px;
}
.seg-cond-row .field{ flex:1; }
.seg-cond-row .rm-cond{
  margin-bottom:8px; color:var(--ink-3);
}
.seg-cond-row .rm-cond:hover{ color:var(--danger); }

.add-cond{ align-self:flex-start; }

/* ===== Icon picker (searchable grid popover) ===== */
.icon-picker{ position:relative; }
.icon-picker-trigger{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:7px 11px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.icon-picker-trigger:hover{ border-color:#cbd5e1; }
.icon-picker-trigger[aria-expanded=true]{ border-color:var(--accent); }
.icon-picker-svg{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-picker-trigger .icon-picker-svg svg{ width:20px; height:20px; color:var(--ink-2); }
.icon-picker-trigger .icon-picker-name{ flex:1; }
.icon-picker-caret{ color:var(--ink-3); font-size:10px; }

.icon-picker-pop{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.04);
  padding:10px;
  display:flex; flex-direction:column; gap:8px;
  max-height:340px;
}
/* The display:flex above otherwise overrides the user-agent's
   `display: none from [hidden]`, leaving the popover always visible. */
.icon-picker-pop[hidden]{ display:none !important; }
.icon-picker-search{
  padding:7px 10px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:13px; background:#fafafa;
  flex-shrink:0;
}
.icon-picker-search:focus{ outline:none; border-color:var(--accent); background:#fff; }
.icon-picker-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
  overflow-y:auto;
}
.icon-picker-cell{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px;
  border:1px solid transparent; border-radius:8px; background:transparent;
  cursor:pointer; font:inherit;
  transition:background .1s, border-color .1s, transform .08s;
}
.icon-picker-cell:hover{ background:#f8f9fb; border-color:var(--line); }
.icon-picker-cell.selected{ background:var(--accent-soft); border-color:var(--accent); }
.icon-picker-cell .icon-picker-svg svg{ width:22px; height:22px; color:var(--ink); }
.icon-picker-cell.selected .icon-picker-svg svg{ color:var(--accent-ink); }
.icon-picker-cell-name{
  font-size:9.5px; color:var(--ink-3); letter-spacing:-0.01em;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden; max-width:100%;
}
.icon-picker-cell.selected .icon-picker-cell-name{ color:var(--accent-ink); font-weight:600; }

/* ===== Vertical picker (searchable MULTI-SELECT list popover) =====
   Used in the Question form's AI panel to set domain hint(s)
   (Auto Insurance, Debt Relief, Medicare, etc.). Rows toggle on
   click; popover stays open until the admin clicks outside or
   hits Escape. The footer shows live count + Clear-all button. */
.vertical-picker{ position:relative; }
.vertical-picker-trigger{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 12px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.vertical-picker-trigger:hover{ border-color:#cbd5e1; }
.vertical-picker-trigger[aria-expanded=true]{ border-color:var(--accent); }
.vertical-picker-name{
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vertical-picker-name.placeholder{ color:var(--ink-3); font-style:italic; }
.vertical-picker-caret{ color:var(--ink-3); font-size:10px; }

.vertical-picker-pop{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.04);
  padding:10px;
  display:flex; flex-direction:column; gap:8px;
  max-height:420px;
}
/* Counter display:flex above so [hidden] actually hides the popover. */
.vertical-picker-pop[hidden]{ display:none !important; }
.vertical-picker-search{
  padding:8px 11px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:13px; background:#fafafa;
  flex-shrink:0;
}
.vertical-picker-search:focus{ outline:none; border-color:var(--accent); background:#fff; }
.vertical-picker-list{
  display:flex; flex-direction:column; gap:1px;
  overflow-y:auto;
  flex:1; min-height:0;
}
.vertical-picker-row{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px;
  border:1px solid transparent; border-radius:6px; background:transparent;
  cursor:pointer; font:inherit; font-size:13px; color:var(--ink);
  text-align:left;
  transition:background .1s, border-color .1s;
}
.vertical-picker-row:hover{ background:#f3f6fa; }
.vertical-picker-row.selected{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.vertical-picker-row.selected:hover{ background:var(--accent-soft); }
.vertical-picker-row .vertical-picker-row-label{ flex:1; }
.vertical-picker-row.selected .vertical-picker-row-label{ font-weight:600; }

/* Checkbox-style indicator drawn entirely in CSS. */
.vertical-picker-row-check{
  width:16px; height:16px; flex-shrink:0;
  border:1.5px solid var(--line); border-radius:4px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s, border-color .1s;
}
.vertical-picker-row.selected .vertical-picker-row-check{
  background:var(--accent); border-color:var(--accent);
}
/* CSS-drawn checkmark using a rotated rectangle inset shadow trick. */
.vertical-picker-row.selected .vertical-picker-row-check::after{
  content:''; display:block;
  width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-2px;
}

.vertical-picker-pop-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:6px; border-top:1px solid var(--line);
  flex-shrink:0;
  font-size:12.5px; color:var(--ink-3);
}
.vertical-picker-count{ font-variant-numeric:tabular-nums; }
.vertical-picker-clear-all{
  padding:4px 10px;
  background:transparent; border:1px solid transparent;
  border-radius:6px; font:inherit; font-size:12.5px;
  color:var(--ink-2); cursor:pointer;
  transition:background .1s, color .1s, border-color .1s;
}
.vertical-picker-clear-all:hover:not(:disabled){
  background:#fff5f3; color:var(--danger); border-color:#fce6e0;
}
.vertical-picker-clear-all:disabled{ opacity:0.4; cursor:default; }

/* ===== Generic multi-select picker (msPicker) =====
   Same chrome as the vertical picker, parameterized for any list of
   { value, label, meta? } items. Used for flow include/exclude
   campaign filters and the Question form "+ Add questions" picker. */
.ms-picker{ position:relative; }
.ms-picker-trigger{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 12px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.ms-picker-trigger:hover{ border-color:#cbd5e1; }
.ms-picker-trigger[aria-expanded=true]{ border-color:var(--accent); }
.ms-picker-name{
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ms-picker-name.placeholder{ color:var(--ink-3); font-style:italic; }
.ms-picker-caret{ color:var(--ink-3); font-size:10px; }

.ms-picker-pop{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.04);
  padding:10px;
  display:flex; flex-direction:column; gap:8px;
  max-height:420px;
}
.ms-picker-pop[hidden]{ display:none !important; }
.ms-picker-search{
  padding:8px 11px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:13px; background:#fafafa;
  flex-shrink:0;
}
.ms-picker-search:focus{ outline:none; border-color:var(--accent); background:#fff; }
.ms-picker-list{
  display:flex; flex-direction:column; gap:1px;
  overflow-y:auto;
  flex:1; min-height:0;
}
.ms-picker-row{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px;
  border:1px solid transparent; border-radius:6px; background:transparent;
  cursor:pointer; font:inherit; font-size:13px; color:var(--ink);
  text-align:left;
  transition:background .1s, border-color .1s;
}
.ms-picker-row:hover{ background:#f3f6fa; }
.ms-picker-row.selected{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.ms-picker-row.selected:hover{ background:var(--accent-soft); }
.ms-picker-row-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ms-picker-row-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-picker-row-meta{ font-size:11.5px; color:var(--ink-3); }
.ms-picker-row.selected .ms-picker-row-label{ font-weight:600; }
.ms-picker-row.selected .ms-picker-row-meta{ color:var(--accent-ink); opacity:0.75; }

.ms-picker-row-check{
  width:16px; height:16px; flex-shrink:0;
  border:1.5px solid var(--line); border-radius:4px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s, border-color .1s;
}
.ms-picker-row.selected .ms-picker-row-check{
  background:var(--accent); border-color:var(--accent);
}
.ms-picker-row.selected .ms-picker-row-check::after{
  content:''; display:block;
  width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-2px;
}

.ms-picker-pop-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:6px; border-top:1px solid var(--line);
  flex-shrink:0;
  font-size:12.5px; color:var(--ink-3);
}
.ms-picker-count{ font-variant-numeric:tabular-nums; }
.ms-picker-clear-all{
  padding:4px 10px;
  background:transparent; border:1px solid transparent;
  border-radius:6px; font:inherit; font-size:12.5px;
  color:var(--ink-2); cursor:pointer;
  transition:background .1s, color .1s, border-color .1s;
}
.ms-picker-clear-all:hover:not(:disabled){
  background:#fff5f3; color:var(--danger); border-color:#fce6e0;
}
.ms-picker-clear-all:disabled{ opacity:0.4; cursor:default; }

/* ===== Audience profile tree picker (hierarchical multi-select) =====
   Uses the same chrome as the vertical picker but the body is a
   collapsible tree. Groups have a caret toggle + a checkbox tag
   button on the header row. Indentation is created by the nested
   .profile-group-items padding — no JS depth calculations needed. */
.profile-picker{ position:relative; }
.profile-picker-trigger{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 12px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.profile-picker-trigger:hover{ border-color:#cbd5e1; }
.profile-picker-trigger[aria-expanded=true]{ border-color:var(--accent); }
.profile-picker-name{
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.profile-picker-name.placeholder{ color:var(--ink-3); font-style:italic; }
.profile-picker-caret{ color:var(--ink-3); font-size:10px; }

.profile-picker-pop{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.04);
  padding:10px;
  display:flex; flex-direction:column; gap:8px;
  max-height:520px;
}
.profile-picker-pop[hidden]{ display:none !important; }
.profile-picker-search{
  padding:8px 11px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:13px; background:#fafafa;
  flex-shrink:0;
}
.profile-picker-search:focus{ outline:none; border-color:var(--accent); background:#fff; }
.profile-picker-tree{
  display:flex; flex-direction:column; gap:1px;
  overflow-y:auto;
  flex:1; min-height:0;
  padding-right:4px;
}

/* Group rows — depth 0 is bold; deeper levels are quieter. */
.profile-group{ display:flex; flex-direction:column; gap:1px; }
.profile-group-header{
  display:flex; align-items:stretch; gap:4px;
}
.profile-group-toggle{
  width:22px; flex-shrink:0;
  background:transparent; border:1px solid transparent; border-radius:5px;
  color:var(--ink-3); font:inherit; font-size:9px;
  cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s, color .1s;
}
.profile-group-toggle:hover{ background:#eef2f6; color:var(--ink); }
.profile-group-toggle .profile-caret{ display:block; line-height:1; }

.profile-tag-btn{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:9px;
  padding:7px 10px;
  background:transparent; border:1px solid transparent; border-radius:6px;
  font:inherit; font-size:13px; color:var(--ink);
  text-align:left; cursor:pointer;
  transition:background .1s, border-color .1s;
}
.profile-tag-btn:hover{ background:#f3f6fa; }
.profile-tag-btn.selected{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.profile-tag-btn.selected:hover{ background:var(--accent-soft); }
.profile-tag-btn .profile-tag-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.profile-tag-btn.selected .profile-tag-name{ font-weight:600; }

/* Top-level category headers get slightly heavier type so the
   hierarchy reads even when collapsed. */
.profile-group[data-depth="0"] > .profile-group-header > .profile-tag-btn .profile-tag-name{
  font-weight:600; font-size:13.5px;
}

/* Checkbox indicator — same visual as vertical picker. */
.profile-check{
  width:16px; height:16px; flex-shrink:0;
  border:1.5px solid var(--line); border-radius:4px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s, border-color .1s;
}
.profile-tag-btn.selected .profile-check{
  background:var(--accent); border-color:var(--accent);
}
.profile-tag-btn.selected .profile-check::after{
  content:''; display:block;
  width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-2px;
}

/* Nested children get a soft indent + a vertical guide-line. */
.profile-group-items{
  padding-left:22px;
  border-left:1px dashed #eef2f6;
  margin-left:11px;
  display:flex; flex-direction:column; gap:1px;
}

.profile-picker-pop-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:6px; border-top:1px solid var(--line);
  flex-shrink:0;
  font-size:12.5px; color:var(--ink-3);
}
.profile-picker-count{ font-variant-numeric:tabular-nums; }
.profile-picker-clear-all{
  padding:4px 10px;
  background:transparent; border:1px solid transparent;
  border-radius:6px; font:inherit; font-size:12.5px;
  color:var(--ink-2); cursor:pointer;
  transition:background .1s, color .1s, border-color .1s;
}
.profile-picker-clear-all:hover:not(:disabled){
  background:#fff5f3; color:var(--danger); border-color:#fce6e0;
}
.profile-picker-clear-all:disabled{ opacity:0.4; cursor:default; }

/* ===== Color picker (native swatch + hex text input) ===== */
.color-picker{ display:flex; align-items:stretch; gap:8px; }
.color-picker-swatch{
  width:38px; height:38px; padding:2px; flex-shrink:0;
  border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer;
}
.color-picker-swatch::-webkit-color-swatch{ border-radius:6px; border:none; }
.color-picker-swatch::-moz-color-swatch{ border-radius:6px; border:none; }
.color-picker-swatch[data-empty="1"]{ background:repeating-linear-gradient(45deg,#fff,#fff 4px,#f1f5f9 4px,#f1f5f9 8px); }
.color-picker-hex{
  flex:1; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; font-family:'SF Mono','Menlo',ui-monospace,monospace;
  background:#fff; color:var(--ink); text-transform:lowercase;
}
.color-picker-hex:focus{ outline:none; border-color:var(--accent); }

/* ===== Catalog import picker modal ===== */
.catalog-modal{ max-width:760px; }
.catalog-modal .modal-body{
  display:flex; flex-direction:column; gap:10px;
  /* Cap the height so the inner list scrolls inside the modal rather
     than the modal growing past the viewport. */
  max-height:70vh;
}
/* Status filter pills for the campaign-import modal. Shown above the
   verticals list once a catalog has been loaded. */
.trk-filter-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:4px 0;
  font-size:12.5px;
}
.trk-filter-row[hidden]{ display:none; }
.trk-filter-label{ color:var(--ink-3); font-weight:600; letter-spacing:0.02em; }
.chip.trk-filter{
  padding:5px 11px; font-size:12.5px; font-weight:600;
}
.chip.trk-filter:has(input:checked){
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);
}
.trk-filter-count{
  margin-left:auto; color:var(--ink-3); font-variant-numeric:tabular-nums;
}

/* Imported routing URL block — shown at the top of the assigned-offers
   section on campaigns created via the trkreach import. Reminds the
   admin of the source URL and that it'll be pre-filled on Add new offer. */
.imported-url-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; margin:6px 0 10px;
  background:#fbf7e8; border:1px solid #e8d4a6; border-radius:8px;
  font-size:12.5px;
}
.imported-url-label{
  font-weight:600; color:#6b4f00; letter-spacing:0.01em;
  text-transform:uppercase; font-size:11px;
  flex-shrink:0;
}
.imported-url-value{
  font-family:'SF Mono','Menlo',ui-monospace,monospace;
  font-size:12px; color:var(--ink);
  background:#fff; padding:3px 7px; border-radius:4px;
  border:1px solid #ead9ad;
  user-select:all;
  word-break:break-all; flex:1; min-width:200px;
}
.imported-url-row .hint{ flex-basis:100%; color:#6b4f00; opacity:0.75; }
.catalog-list{
  flex:1; min-height:0;
  overflow-y:auto;
  border:1px solid var(--line); border-radius:10px;
  background:#fff;
  display:flex; flex-direction:column;
}
.catalog-row{
  appearance:none; border:0; background:transparent; text-align:left;
  display:flex; align-items:center; gap:14px;
  padding:12px 14px;
  border-bottom:1px solid var(--line-2);
  cursor:pointer; font:inherit;
  transition:background .12s;
}
.catalog-row:last-child{ border-bottom:0; }
.catalog-row:hover,.catalog-row:focus-visible{
  background:var(--accent-soft); outline:none;
}
/* Selected-state for campaign-import rows. Drives the visual fill of
   the .ms-picker-row-check checkbox span when aria-pressed=true. */
.catalog-row[aria-pressed="true"]{
  background:var(--accent-soft);
}
.catalog-row[aria-pressed="true"] .ms-picker-row-check{
  background:var(--accent); border-color:var(--accent);
}
.catalog-row[aria-pressed="true"] .ms-picker-row-check::after{
  content:''; display:block;
  width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-2px;
}
.catalog-row[aria-pressed="true"] .catalog-row-name{ color:var(--accent-ink); }
.catalog-row-main{ flex:1; min-width:0; }
.catalog-row-name{
  font-weight:700; font-size:14px; color:var(--ink);
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.catalog-row-meta{
  font-size:11.5px; color:var(--ink-3); margin-top:3px;
  display:flex; align-items:center; gap:10px;
}
.catalog-row-meta code{
  background:#f1f5f9; padding:1px 6px; border-radius:4px;
  font-size:10.5px; font-family:'SF Mono','Menlo',ui-monospace,monospace;
}
.catalog-row-url{
  flex:1; min-width:0;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  font-family:'SF Mono','Menlo',ui-monospace,monospace; font-size:10.5px;
}
.catalog-row-side{
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  flex-shrink:0;
}
.catalog-row-epc{
  font-size:10.5px; font-weight:700; color:var(--ink-2);
  letter-spacing:.04em; text-transform:uppercase;
}

/* ===== Master Catalog picker additions =====
   Richer rows for the rebuilt campaign-import modal: banner thumbnail,
   pool badge (lead-gen vs ecom), editorial headline preview, parent
   slug tag on ecom rows and a dimmed already-imported state. */
.catalog-status-select{
  padding:5px 10px; font:inherit; font-size:12.5px; font-weight:600;
  border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink-2); cursor:pointer;
}
.catalog-status-select:focus{ outline:none; border-color:var(--accent); }
.catalog-row-thumb{
  width:72px; height:48px; object-fit:cover; flex-shrink:0;
  border-radius:6px; border:1px solid var(--line-2); background:#f1f5f9;
}
.catalog-row-headline{
  font-size:12px; color:var(--ink-2); margin-top:2px;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.catalog-pool-badge{
  font-size:10px; font-weight:800; padding:2px 7px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
}
.catalog-pool-badge.pool-v{ background:#eef2ff; color:#3730a3; }
.catalog-pool-badge.pool-e{ background:#fdf2f8; color:#9d174d; }
.catalog-parent-tag{
  background:#f1f5f9; color:var(--ink-3);
  padding:1px 6px; border-radius:4px;
  font-size:10.5px; font-weight:600; white-space:nowrap;
}
.catalog-imported-tag{
  color:var(--ink-3); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.catalog-row.imported{ opacity:.55; }
.catalog-row.imported:hover,
.catalog-row.imported[aria-pressed="true"]{ opacity:.9; }

/* ===== Per-offer chips picker (third import mode) =====
   Expander tag inside the row <button> (span — rows can't nest
   buttons) + per-offer checkbox sub-list rendered as a SIBLING
   element right after the row. */
.catalog-offers-expander{
  display:inline-flex; align-items:center; gap:4px;
  background:#f1f5f9; color:var(--ink-2);
  padding:1px 7px; border-radius:4px;
  font-size:10.5px; font-weight:700; white-space:nowrap;
  cursor:pointer; user-select:none;
}
.catalog-offers-expander:hover{ background:#e2e8f0; color:var(--ink); }
.catalog-offer-sublist{
  border-bottom:1px solid var(--line-2);
  background:#fafcff;
  padding:4px 14px 10px 46px;
  display:flex; flex-direction:column; gap:2px;
}
/* Counter the display:flex above so [hidden] actually collapses the
   sub-list (same pattern as .modal-foot[hidden] etc.). */
.catalog-offer-sublist[hidden]{ display:none; }
.catalog-offer-sublist:last-child{ border-bottom:0; }
.catalog-offer-line{
  display:flex; align-items:center; gap:8px;
  padding:4px 6px; border-radius:6px;
  font-size:12.5px; color:var(--ink);
  cursor:pointer;
}
.catalog-offer-line:hover{ background:var(--accent-soft); }
.catalog-offer-line input[type=checkbox]{ accent-color:var(--accent); flex-shrink:0; }
.catalog-offer-name{
  flex:1; min-width:0; font-weight:600;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.catalog-offer-type{
  font-size:9.5px; font-weight:800; padding:1px 6px; border-radius:4px;
  background:#eef2ff; color:#3730a3;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
}
.catalog-offer-weight{
  font-size:10.5px; color:var(--ink-3); white-space:nowrap;
  font-family:'SF Mono','Menlo',ui-monospace,monospace;
}
.catalog-offer-payout{
  font-size:11px; font-weight:700; color:#065f46; white-space:nowrap;
}

/* ===== Brand chips list inside the Campaign form (offer-group only) ===== */
.brand-list{
  display:flex; flex-direction:column; gap:8px; margin-bottom:10px;
}
.brand-list-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background:#fafafa; border:1px solid var(--line-2); border-radius:10px;
}
.brand-list-item .brand-mark{
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:800; letter-spacing:-0.02em;
  flex-shrink:0;
}
.brand-list-body{ flex:1; min-width:0; }
.brand-list-name{ font-weight:700; font-size:14px; color:var(--ink); }
.brand-list-url{
  font-size:11.5px; color:var(--ink-3);
  font-family:'SF Mono','Menlo',ui-monospace,monospace;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  margin-top:2px;
}
.brand-list-edit{ flex-shrink:0; }

/* ===== Add-style question picker (Flow form) ===== */
.picked-list{
  display:flex; flex-direction:column; gap:8px; margin-bottom:12px;
}
.picked-row{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; transition:border-color .12s, box-shadow .12s;
}
.picked-row:hover{ border-color:#cbd5e1; box-shadow:0 1px 3px rgba(15,23,42,0.04); }
.picked-num{
  width:24px; height:24px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; flex-shrink:0;
}
.picked-body{ flex:1; min-width:0; }
.picked-title{ font-weight:600; font-size:14px; color:var(--ink); }
.picked-meta{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.picked-meta code{ background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:11.5px; }
.picked-actions{ display:flex; gap:4px; flex-shrink:0; }
.picked-empty{
  background:#fafafa; border:1px dashed var(--line); border-radius:10px;
  padding:16px; text-align:center; color:var(--ink-3); font-size:13.5px;
  margin-bottom:12px;
}

.btn-icon{
  width:30px; height:30px; border-radius:6px;
  border:1px solid var(--line); background:#fff; color:var(--ink-2);
  cursor:pointer; font-size:14px; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s, border-color .12s;
}
.btn-icon:hover:not(:disabled){
  background:#f9fafb; color:var(--ink); border-color:#cbd5e1;
}
.btn-icon:disabled{ opacity:.35; cursor:not-allowed; }
.btn-icon.danger:hover:not(:disabled){ color:var(--danger); border-color:#fecaca; background:#fef2f2; }

.picker-add{
  display:flex; flex-direction:column; gap:8px;
  padding:12px; background:#fafafa; border:1px dashed var(--line);
  border-radius:10px;
}
.picker-add-label{
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  letter-spacing:0.01em;
}
.picker-add select{
  padding:8px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; background:#fff; min-width:240px; flex:1;
  cursor:pointer;
}
.picker-add select:focus{ outline:none; border-color:var(--accent); }
.picker-new{
  font-size:12.5px; color:var(--accent); text-decoration:none; font-weight:600;
  align-self:flex-end;
}
.picker-new:hover{ text-decoration:underline; }

/* AND/OR mode selector at the top of each rule */
.seg-mode{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink-2); font-weight:600;
}
.seg-mode select{
  padding:5px 8px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:12.5px; font-weight:600; background:#fff;
}
.seg-mode select:focus{ outline:none; border-color:var(--accent); }

/* AND/OR separator chip between conditions — clickable to flip mode */
.seg-sep{
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.seg-sep::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--line-2);
}
.seg-sep-label{
  position:relative; z-index:1;
  background:#fafafa; padding:2px 10px; border:1px solid var(--line);
  border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  color:var(--ink-2); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.seg-sep-label:hover{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }

/* Tint the rule card subtly so AND vs OR is visually distinguishable */
.seg-rule[data-mode="any"]{
  border-color:#dbe2f0; background:#fbfcff;
}
.seg-rule[data-mode="any"] .badge.when{
  background:#eef2ff; color:#3730a3;
}

.seg-then{
  display:flex; align-items:center; gap:10px;
}
.seg-then input{
  flex:1; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13.5px;
}
.seg-then input:focus{ outline:none; border-color:var(--accent); }

/* ===== Dashboard cards ===== */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:24px;}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px;
}
.card .label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700;}
.card .value{font-size:26px; font-weight:700; margin-top:6px; letter-spacing:-0.01em;}
.card .sub{font-size:12px; color:var(--ink-3); margin-top:4px;}

@media (max-width:780px){
  .layout{grid-template-columns:1fr;}
  .sidebar{flex-direction:row; padding:10px; gap:8px; align-items:center; overflow-x:auto;}
  .sidebar .brand{border-bottom:0; padding:8px; flex-shrink:0;}
  .sidebar nav{flex-direction:row; flex-wrap:nowrap; flex:1; overflow-x:auto;}
  .sidebar nav a{flex-shrink:0; padding:8px 10px;}
  .sidebar-footer{display:none;}
  .main{padding:16px;}
  .field-row, .field-row-3{grid-template-columns:1fr;}
  .repeater-row{grid-template-columns:1fr 1fr;}
}

/* ===== Reports view ===== */
.reports-filters{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin-bottom:16px;
  display:flex; flex-direction:column; gap:10px;
}
.rf-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.rf-field{ display:flex; flex-direction:column; gap:4px; min-width:140px; flex:0 1 auto; }
.rf-field input[type=text], .rf-field input[type=date], .rf-field select{
  padding:8px 10px; border:1px solid var(--line); border-radius:9px;
  font:inherit; font-size:14px; background:#fff;
}
.rf-field input:focus, .rf-field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,122,63,0.10); }
.rf-label{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
.rf-quick{ display:flex; gap:4px; align-items:center; margin-left:auto; padding-bottom:6px; }
.rf-quick .btn-link{
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.rf-quick .btn-link:hover{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
/* Resolved query window — what UTC range the API actually sees,
   given the local-time From/To inputs. Makes timezone-driven
   discrepancies (the "5/30 EDT vs 5/30 UTC" bug) impossible to miss. */
.rf-window{
  font-size:12px; color:var(--ink-3); margin-top:10px;
  padding:8px 10px; background:var(--surface-2, #f6f7f8); border-radius:8px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:0.01em;
}
.rf-window strong{ color:var(--ink-1); font-weight:700; }
.rf-window .muted{ color:var(--ink-3); }

/* Assist responses view — chips + table cells */
.assist-chip-row{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;
}
.assist-chip{
  appearance:none; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--ink-2); transition:background .12s, color .12s, border-color .12s;
  display:inline-flex; align-items:center; gap:6px;
}
.assist-chip:hover{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
.assist-chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.assist-chip-n{ font-size:11px; opacity:0.7; font-weight:500; }
.assist-chip.active .assist-chip-n{ opacity:0.9; }
.assist-cat-badge{
  display:inline-block; padding:3px 9px; font-size:12px; font-weight:600;
  background:var(--accent-soft); color:var(--accent-ink); border-radius:999px;
}
.assist-fb-badge{
  display:inline-block; padding:2px 7px; font-size:10px; font-weight:700;
  background:#fef3c7; color:#92400e; border-radius:999px; margin-left:4px;
  text-transform:uppercase; letter-spacing:0.05em;
}
.assist-text-cell{ max-width:420px; }
.assist-open-link{
  color:var(--accent-ink); font-weight:600; font-size:13px; text-decoration:none;
}
.assist-open-link:hover{ text-decoration:underline; }

.reports-kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px; margin-bottom:18px;
}
.kpi-card{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:4px;
}
.kpi-label{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
.kpi-value{ font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:26px; line-height:1.1; letter-spacing:-0.01em; color:var(--ink); }
.kpi-hint{ font-size:11.5px; color:var(--ink-3); }

/* Warning variant of the KPI card. Renders only when a Reports query
   hits the server-side scan cap (20k events / 5k sessions). Amber
   palette tells the user the displayed numbers are truncated and
   they should narrow the window. */
.kpi-card.kpi-warn{
  background:#fef3c7; border-color:#fbbf24;
}
.kpi-card.kpi-warn .kpi-label{ color:#92400e; }
.kpi-card.kpi-warn .kpi-value{ color:#7c2d12; }
.kpi-card.kpi-warn .kpi-hint { color:#7c2d12; }

.reports-section{ margin-bottom:22px; }
.reports-section h3{
  font-size:15px; font-weight:700; letter-spacing:-0.005em;
  margin:0 0 8px; color:var(--ink);
  display:flex; align-items:baseline; gap:8px;
}
.reports-section .table-wrap{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.reports-section table th.sortable{ cursor:pointer; user-select:none; }
.reports-section table th.sortable:hover{ background:#eef2ee; }
.reports-section table th.sorted-asc::after { content:' ↑'; opacity:0.6; font-size:11px; }
.reports-section table th.sorted-desc::after{ content:' ↓'; opacity:0.6; font-size:11px; }

/* ===========================================================
   Analytics lenses — tabbed dashboard at /analytics
   ===========================================================
   Layout primitives shared across all lens renderers. Reuses
   .kpi-card (defined above for Reports) where shapes match.
   =========================================================== */

/* Filter bar — sits below the view head, above the tabs. */
.lens-filter-bar{
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  padding:14px 16px; background:#fff;
  border:1px solid var(--line); border-radius:12px;
  margin-bottom:14px;
}
.lens-filter-group{ display:flex; flex-direction:column; gap:4px; }
.lens-filter-label{
  font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3);
}
.lens-filter-sel{
  padding:6px 10px; border-radius:8px; border:1px solid var(--line);
  font:inherit; font-size:13.5px; background:#fff; min-width:140px;
}
.lens-filter-sel:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,122,63,0.10); }
.lens-filter-group .rf-quick{ margin:0; padding:0; }
.lens-filter-group .rf-chip{
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.lens-filter-group .rf-chip:hover{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
.lens-filter-group .rf-chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* Cache-state tag in the view-head actions area. */
.analytics-cache{
  font-size:12px; color:var(--ink-3); padding:4px 10px; border-radius:8px;
  background:#f1f5f9; font-weight:600;
}
.analytics-cache.hit  { background:#dcfce7; color:#166534; }
.analytics-cache.fresh{ background:#dbeafe; color:#1e3a8a; }

/* Tab strip. */
.lens-tabs{
  display:flex; gap:4px; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.lens-tab{
  background:transparent; border:0; border-bottom:2px solid transparent;
  padding:10px 16px 12px; font:inherit; font-size:14px; font-weight:600;
  color:var(--ink-2); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .12s, border-color .12s, background .12s;
}
.lens-tab:hover{ color:var(--ink); background:#f8fafc; }
.lens-tab.active{
  color:var(--accent-ink); border-bottom-color:var(--accent);
}
.lens-tab-tag{
  font-size:9.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  background:#e2e8f0; color:#475569; padding:2px 6px; border-radius:999px;
}
.lens-tab.active .lens-tab-tag{ background:var(--accent-soft); color:var(--accent-ink); }

/* Lens content shell. */
.lens-content{ min-height:200px; }
.lens-section{ margin-bottom:26px; }
/* Scope bar — a control strip, not a content section, so it reads as chrome:
   tighter, boxed, and set apart from the data below it. Wraps rather than
   overflowing so the narrow-viewport case never pushes the page sideways. */
.lens-scopebar{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;
  padding:10px 12px; margin-bottom:18px;
  background:var(--surface-2, #f8fafc); border:1px solid var(--border, #e2e8f0);
  border-radius:8px;
}
.lens-scopebar .hint{ margin:0; }
.lens-section > h3{
  font-size:15px; font-weight:700; letter-spacing:-0.005em;
  margin:0 0 10px; color:var(--ink);
  display:flex; align-items:baseline; gap:8px;
}

/* Audience lens KPI strip — 3 small stat cards above each question's
   bucket table. Reuses .lens-* tone but compact. */
.aud-kpi-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:8px; margin:0 0 10px;
}
.aud-kpi{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px;
}
.aud-kpi-label{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3);
}
.aud-kpi-value{
  font-family:'Fraunces', Georgia, serif;
  font-size:21px; font-weight:600; color:var(--ink);
  line-height:1.1; margin-top:2px;
}
.aud-kpi-hint{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }

/* Highlight the top-EPUU row + the "top" pill that flags it. */
.lens-table tr.is-top-bucket td{
  background:color-mix(in srgb, var(--accent-soft) 65%, transparent);
}

/* Slot-performance heatmap — per-offer × slot CTR matrix. Empty cells
   render as a muted dash so the eye glides past them; populated cells
   carry a tooltip with the underlying imps/clicks/conv/rev counters
   (set via the title attr on the <td>). */
.slot-heatmap td.slot-empty{ color:var(--ink-3); opacity:.55; }
.slot-heatmap td.slot-cell{ font-variant-numeric:tabular-nums; cursor:help; }
.slot-heatmap td.slot-cell:hover{ background:color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.aud-top-pill{
  display:inline-block; padding:1px 7px; margin-left:4px;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent); color:#fff; border-radius:999px;
  vertical-align:1px;
}

/* ===== Audience Sort tab (P1 — observe only) ===== */
.audsort-kpi-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:10px; margin-bottom:10px;
}
.audsort-kpi{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px;
}
.audsort-kpi-label{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3);
}
.audsort-kpi-value{
  font-family:'Fraunces', Georgia, serif;
  font-size:21px; font-weight:600; color:var(--ink);
  line-height:1.1; margin-top:2px;
}
.audsort-kpi-hint{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }

.audsort-actions{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin:8px 0 18px;
}

.audsort-explorer{ display:flex; flex-direction:column; gap:12px; }
.audsort-picker{
  display:flex; flex-direction:column; gap:4px;
  min-width:200px;
}
.audsort-picker-label{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3);
}
.audsort-picker select{
  padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; background:#fff; color:var(--ink);
}
.audsort-picker select:focus{ outline:none; border-color:var(--accent); }
.audsort-sig-totals{
  font-size:13px; color:var(--ink-2); margin:6px 0 10px;
}

/* Heatmap — sigs × campaigns. Each cell shows smoothed EPUU $;
   color indicates sample confidence, hover for full metrics. */
.audsort-heatmap-wrap{
  overflow-x:auto; margin-top:10px;
  border:1px solid var(--line); border-radius:10px;
  background:#fff;
}
.audsort-heatmap{
  border-collapse:collapse; width:100%;
  font-size:11.5px;
}
.audsort-heatmap th, .audsort-heatmap td{
  border:1px solid var(--line); padding:6px 8px;
  text-align:right; white-space:nowrap;
}
.audsort-rowhdr{
  position:sticky; left:0; z-index:1; background:#f6f6f3;
  text-align:left; font-weight:600; color:var(--ink-2);
  min-width:120px;
}
.audsort-rowhdr-n{
  display:block; font-size:10px; font-weight:500; color:var(--ink-3); margin-top:1px;
}
.audsort-colhdr{
  background:#f6f6f3; font-weight:600; color:var(--ink-2);
  text-align:center !important; min-width:74px;
}
.audsort-colhdr-id{
  display:block; font-size:11px; color:var(--ink); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; max-width:80px;
}
.audsort-colhdr-net{
  display:block; font-size:10px; color:var(--ink-3); font-weight:500;
}
.audsort-cell{ cursor:help; font-variant-numeric:tabular-nums; }
.audsort-cell-confident{ background:color-mix(in srgb, var(--accent-soft) 80%, transparent); color:var(--accent-ink); font-weight:600; }
.audsort-cell-weak     { background:#fff4e0; color:#8a5400; }
.audsort-cell-empty    { background:#fafafa; color:var(--ink-3); }

.audsort-legend{
  display:inline-block; padding:1px 8px; border-radius:99px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
  margin:0 2px;
}
.audsort-legend-confident{ background:color-mix(in srgb, var(--accent-soft) 80%, transparent); color:var(--accent-ink); }
.audsort-legend-weak     { background:#fff4e0; color:#8a5400; }
.audsort-legend-empty    { background:#fafafa; color:var(--ink-3); border:1px solid var(--line); }

/* Simulator picker row */
.audsort-sim-row{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:12px;
}
.audsort-sim-result{ margin-top:10px; }
.audsort-sim-summary{ font-size:13px; color:var(--ink-2); margin-bottom:8px; }

/* Lift indicators */
.audsort-lift-up   { color:var(--accent-ink); font-weight:700; }
.audsort-lift-down { color:#9b1c1c; font-weight:600; }

/* Small monospace UUID prefix under the campaign name in tables —
   kept visible (not hidden) so the operator can cross-reference
   against Firestore docs / debug logs. */
.audsort-cell-id{
  font-family:'SF Mono', ui-monospace, Menlo, monospace;
  font-size:10.5px; color:var(--ink-3); font-weight:500;
  letter-spacing:0.01em; margin-top:1px;
}
.lens-section-sub{
  font-size:12.5px; font-weight:500; color:var(--ink-3);
}
.lens-section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:10px;
}
.lens-section-head h3{ margin:0; font-size:15px; font-weight:700; }
.lens-warn{
  font-size:11.5px; font-weight:700; color:#92400e;
  background:#fef3c7; padding:3px 9px; border-radius:999px; border:1px solid #fbbf24;
}
.lens-subhead{
  font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:6px;
}

.lens-grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.lens-grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
@media (max-width: 1000px){
  .lens-grid-2, .lens-grid-3{ grid-template-columns:1fr; }
}

.lens-empty{
  padding:14px; background:#fafafa; border:1px dashed var(--line); border-radius:10px;
  color:var(--ink-3); font-size:13px; text-align:center;
}
.lens-note{
  padding:10px 14px; background:#f8fafc; border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:8px;
  color:var(--ink-2); font-size:12.5px; line-height:1.5;
  margin-bottom:10px;
}
.lens-banner{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; background:#eff6ff; border:1px solid #bfdbfe;
  border-radius:10px; color:#1e3a8a; font-size:13px;
  margin-bottom:14px;
}
.lens-banner-icon{ font-size:16px; }
.lens-banner-meta{ color:#475569; font-size:12px; margin-left:6px; }
.lens-banner strong{ color:#1e40af; font-weight:700; }

/* 4-column KPI grid used by Quality + Attribution lens summaries. */
.kpi-grid-4{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px; margin-bottom:16px;
}
@media (max-width: 900px){ .kpi-grid-4{ grid-template-columns:repeat(2, 1fr); } }

/* Stacked horizontal bars (Quality lens — profile completeness). */
.qual-stack-row{
  display:grid; grid-template-columns:140px 1fr 160px; align-items:center;
  gap:10px; padding:5px 0; font-size:13px;
}
.qual-stack-label{ color:var(--ink-2); font-weight:600; }
.qual-stack-bar{
  background:#f1f5f9; border-radius:999px; height:10px; overflow:hidden;
  border:1px solid var(--line);
}
.qual-stack-fill{
  display:block; height:100%; background:var(--accent);
  border-radius:999px; transition:width .2s;
}
.qual-stack-pct{ font-variant-numeric:tabular-nums; color:var(--ink); font-size:12.5px; }
.qual-stack-pct .muted{ color:var(--ink-3); font-size:11.5px; }

/* Funnel visualization (Funnel lens — overall stages). */
.funnel-viz{
  display:flex; flex-direction:column; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:18px 20px;
}
.funnel-stage{ display:flex; flex-direction:column; gap:4px; }
.funnel-stage-label{
  font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-2);
}
.funnel-stage-bar{
  background:#f1f5f9; border-radius:8px; height:32px;
  border:1px solid var(--line); overflow:hidden;
  position:relative;
}
.funnel-stage-fill{
  background:linear-gradient(90deg, var(--accent), #0b6634);
  height:100%; border-radius:8px;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 12px; min-width:fit-content;
  transition:width .3s;
}
.funnel-stage-count{
  color:#fff; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.funnel-stage-meta{
  display:flex; gap:14px; font-size:12px; color:var(--ink-3);
}
.funnel-stage-retain{ font-weight:600; color:var(--ink-2); }
.funnel-stage-drop  { color:#b45309; }

/* Trends sparkline + heatmap. */
.trend-spark-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 900px){ .trend-spark-grid{ grid-template-columns:1fr; } }
.trend-spark{
  color:var(--accent); display:block;
  width:100%; height:60px; margin-top:4px;
}
.trend-total{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:18px;
  margin-top:4px; color:var(--ink);
}
.trend-total .muted{ font-family:inherit; font-size:11px; color:var(--ink-3); font-weight:400; letter-spacing:0.04em; text-transform:uppercase; }
.trend-delta{
  display:inline-block; font-variant-numeric:tabular-nums; font-weight:600;
  padding:1px 7px; border-radius:5px; font-size:11.5px;
}
.trend-delta.up  { color:#15803d; background:#dcfce7; }
.trend-delta.down{ color:#b91c1c; background:#fee2e2; }
.trend-delta.flat{ color:var(--ink-3); background:#f1f5f9; }

/* Hour×day heatmap (Trends lens). */
.heatmap{
  border-collapse:collapse; font-size:11px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  overflow:hidden;
}
.heatmap th, .heatmap td{ padding:0; }
.heatmap thead th{
  background:#fafafa; color:var(--ink-3); font-weight:600;
  padding:6px 4px; min-width:24px; text-align:center;
  font-size:10.5px; font-variant-numeric:tabular-nums;
}
.heatmap-row-label{
  background:#fafafa; padding:4px 10px; color:var(--ink-2); font-weight:700;
  font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase;
  white-space:nowrap; border-right:1px solid var(--line);
}
.heatmap-cell{
  height:22px; min-width:24px; border:1px solid #fff;
  cursor:default;
}
.heatmap-cell:hover{ outline:2px solid var(--accent); position:relative; }
.lens-note code{
  background:#e2e8f0; padding:1px 5px; border-radius:4px;
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11.5px;
}
.lens-error{
  padding:14px; background:#fee2e2; border:1px solid #fca5a5; border-radius:10px;
  color:#7f1d1d; font-size:13px; font-weight:600;
}

/* Sortable lens tables. Compact, monospace-style numerics.
   Wrapper allows horizontal scroll so wide tables (9+ cols) never
   clip the rightmost columns — Revenue / RPM always visible. */
.lens-content .table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  overflow-x:auto;
}
.lens-table{ width:100%; border-collapse:collapse; min-width:680px; }
.lens-table th, .lens-table td{
  padding:8px 10px; font-size:13px;
  border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
.lens-table th{
  background:#fafafa; text-align:left;
  font-weight:700; color:var(--ink-2); font-size:11px;
  text-transform:uppercase; letter-spacing:0.06em;
}
.lens-table th.sortable{ cursor:pointer; user-select:none; }
.lens-table th.sortable:hover{ background:#f1f5f9; color:var(--ink); }
.lens-table th .sort-label{ display:inline-block; }
.lens-table th .sort-arrow{ display:inline-block; margin-left:5px; opacity:.6; font-size:10px; }
.lens-table tbody tr:hover{ background:#fafafa; }
.lens-table td.cell-r{ text-align:right; font-variant-numeric:tabular-nums; }
.lens-table td.cell-l{ text-align:left; }
.lens-table td:first-child{ font-weight:600; color:var(--ink); }

/* Pulse KPI variant — wider card, sparkline, delta line.
   .kpi-grid-7 (Sessions, Unique users, Impressions, Clicks, Conversions,
   Revenue, RPUU) is the current Pulse layout. .kpi-grid-6 kept as an
   alias in case any other view still uses the old name — both share
   the same responsive breakpoints. */
.kpi-grid-7, .kpi-grid-6{
  display:grid;
  gap:10px; margin-bottom:16px;
}
.kpi-grid-7{ grid-template-columns:repeat(7, minmax(0, 1fr)); }
.kpi-grid-6{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
@media (max-width: 1440px){ .kpi-grid-7{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width: 1280px){ .kpi-grid-6, .kpi-grid-7{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 720px) { .kpi-grid-6, .kpi-grid-7{ grid-template-columns:repeat(2, 1fr); } }
.kpi-pulse{ position:relative; }
.kpi-pulse-label{
  font-size:11px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.kpi-pulse-value{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:24px; line-height:1.1;
  letter-spacing:-0.01em; color:var(--ink); margin-top:2px;
}
.kpi-pulse-spark{
  color:var(--accent); margin-top:6px; display:block;
}
.kpi-pulse-delta{
  font-size:11.5px; font-weight:600; margin-top:4px;
}
.kpi-pulse-delta.up  { color:#15803d; }
.kpi-pulse-delta.down{ color:#b91c1c; }
.kpi-pulse-delta.flat{ color:var(--ink-3); }

/* System health chips. */
.health-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.health-chip{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; display:flex; flex-direction:column; gap:3px;
  border-left-width:4px;
}
.health-chip.tone-good{ border-left-color:#22c55e; }
.health-chip.tone-warn{ border-left-color:#f59e0b; }
.health-chip.tone-bad { border-left-color:#ef4444; }
.health-chip-label{
  font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3);
}
.health-chip-value{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:18px; line-height:1.1; color:var(--ink);
}
.health-chip-sub{ font-size:11.5px; color:var(--ink-3); }

/* Coming-soon placeholder. */
.lens-placeholder{
  padding:48px 24px; text-align:center; background:#fafafa;
  border:1px dashed var(--line); border-radius:12px;
}
.lens-placeholder-icon{ font-size:42px; line-height:1; margin-bottom:12px; }
.lens-placeholder h3{ font-size:18px; font-weight:700; margin-bottom:8px; }
.lens-placeholder p{ color:var(--ink-3); font-size:13.5px; max-width:520px; margin:0 auto; }

/* =========================================================
   Data Segments page
   ---------------------------------------------------------
   List view: status banner, segments table.
   Builder: two-column form + preview panel.
   Rule rows are inline grids so kind/field/op/value all line
   up horizontally and feel like one composed expression.
   ========================================================= */

/* Snapshot status banner at top of list view. */
.data-status{
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px; padding:10px 14px;
  background:#f8fafc; border:1px solid var(--line); border-radius:10px;
  font-size:13px;
}
.data-status-dot{
  width:8px; height:8px; border-radius:50%; background:#cbd5e1;
}
.data-status-dot.ok{ background:#22c55e; }
.data-status-dot.warn{ background:#f59e0b; }
.data-status-label{ font-weight:600; color:var(--ink-2); }
.data-status-value{ color:var(--ink); }
.data-status-sep{ color:var(--ink-3); }

/* Segments list table. */
.data-list{
  width:100%; border-collapse:collapse; font-size:14px;
  background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.data-list thead{ background:#f8fafc; }
.data-list th, .data-list td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
}
.data-list th.cell-r, .data-list td.cell-r{ text-align:right; font-variant-numeric:tabular-nums; }
.data-list tbody tr:last-child td{ border-bottom:0; }
.data-list tbody tr:hover{ background:#fafafa; }
.data-list-name{
  font-weight:600; color:var(--ink); text-decoration:none;
}
.data-list-name:hover{ color:var(--accent); }
.data-list-desc{
  font-size:12px; color:var(--ink-3); margin-top:2px;
}
.data-tag{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; padding:2px 7px; border-radius:5px;
  background:#f1f5f9; color:#475569;
}
.empty-state{
  text-align:center; padding:60px 24px;
  background:#fafafa; border:1px dashed var(--line); border-radius:12px;
}
.empty-state h3{ font-size:18px; margin-bottom:8px; }
.empty-state p{
  color:var(--ink-3); max-width:480px; margin:0 auto 16px; font-size:14px;
}

/* Builder layout. */
.data-builder{
  display:grid; grid-template-columns:1fr; gap:16px;
}
.data-builder .card{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:18px;
}
.data-builder .card h3{
  font-size:15px; font-weight:700; margin-bottom:12px;
}
/* Two-up name+tag, description spans both. */
.form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-bottom:14px;
}
.form-grid label{
  display:flex; flex-direction:column; gap:4px;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.form-grid label.span2{ grid-column:span 2; }
.form-grid label small{
  font-weight:400; color:var(--ink-3);
}
.form-grid input[type=text]{
  padding:8px 10px; border:1px solid var(--line); border-radius:6px;
  font-size:14px; color:var(--ink);
}
.form-grid input[type=text]:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Mode (ALL / ANY) toggle row. */
.data-mode{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 12px; background:#f8fafc; border-radius:8px;
  margin-bottom:14px;
}
.data-mode .form-label{
  font-size:12.5px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em;
}
.data-mode .radio{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; color:var(--ink-2); cursor:pointer;
}
.data-mode .radio strong{ color:var(--ink); }

/* Rules list. */
.data-rules{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.data-rule{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 12px; background:#fafafa;
  border:1px solid var(--line); border-radius:8px;
}
.data-rule-main{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.data-rule select, .data-rule input[type=text], .data-rule input[type=number]{
  padding:6px 9px; font-size:13.5px;
  border:1px solid var(--line); border-radius:6px; background:#fff;
}
.data-rule select[multiple]{
  min-width:180px; padding:4px;
}
.data-rule-sep{ color:var(--ink-3); font-size:13px; }
.data-rule-hint{ color:var(--ink-3); font-size:13px; font-style:italic; }
.data-rule-remove{
  margin-left:auto; padding:4px 8px; font-size:14px;
  color:var(--ink-3);
}
.data-rule-remove:hover{ color:#dc2626; }
/* Per-campaign scope sub-row (event rules only). Indented to read
   as a refinement of the rule above, with a soft top border so it's
   visually grouped with its parent rule. */
.data-rule-scope{
  display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
  margin-top:2px; padding:8px 0 2px 4px;
  border-top:1px dashed var(--line);
}
.data-rule-scope-label{
  display:flex; flex-direction:column; gap:2px;
  min-width:120px; padding-top:4px;
}
.data-rule-scope-label > span{
  font-size:12px; font-weight:600; color:var(--ink-2); letter-spacing:.02em;
}
.data-rule-scope-sum{
  font-size:11px; color:var(--ink-3); font-weight:500;
}
.data-rule-scope select[multiple]{
  flex:1; min-width:220px; max-width:380px;
}
.data-rule-scope-clear{
  align-self:flex-start; padding:4px 8px;
  font-size:12px; color:var(--ink-3);
}
.data-rule-scope-clear:hover{ color:var(--accent); }

/* Continuous toggle — bigger touch target, descriptive sublabel. */
.data-toggle{
  display:flex; align-items:flex-start; gap:10px; margin-top:14px;
  padding:12px 14px; background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px;
  cursor:pointer;
}
.data-toggle input[type=checkbox]{
  margin-top:3px; width:16px; height:16px; cursor:pointer;
}
.data-toggle span{ display:flex; flex-direction:column; gap:3px; }
.data-toggle strong{ font-size:13.5px; color:var(--ink); }
.data-toggle small{ color:var(--ink-3); font-size:12px; line-height:1.45; }

/* Preview panel — KPI cards + sample table. */
.data-preview-stats{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px;
}
.data-preview-stat{
  padding:12px 14px; background:#f8fafc; border:1px solid var(--line); border-radius:8px;
  text-align:center;
}
.data-preview-stat .num{
  font-size:22px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;
}
.data-preview-stat .lbl{
  font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;
}
.data-sample td code{
  font-size:12px; color:var(--ink-2);
}
.data-sample h4{
  font-size:13px; font-weight:700; margin:14px 0 8px; color:var(--ink-2);
}

/* Status pill in segments table. */
.badge.ok{
  display:inline-block; padding:2px 8px; font-size:11.5px; font-weight:700;
  color:#166534; background:#dcfce7; border-radius:99px; letter-spacing:.04em; text-transform:uppercase;
}
.muted{ color:var(--ink-3); }

/* Preview-flow icon link in the slug column of the Flows list.
   Opens a new tab to smrt.resourcesify.com/f/<slug>?u=<sample-u> so
   the operator can eyeball the rendered flow with real DMP state
   without leaving the admin. Sits inline with the slug <code>,
   small, muted, brightens to the accent on hover. */
.flow-preview-link{
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:6px; vertical-align:middle;
  width:20px; height:20px; border-radius:5px;
  color:var(--ink-3); text-decoration:none;
  transition:color .15s ease, background .15s ease;
}
.flow-preview-link:hover,
.flow-preview-link:focus-visible{
  color:var(--accent);
  background:var(--accent-soft);
  outline:none;
}
.flow-preview-link svg{ display:block; }

/* ════════════════════════════════════════════════════════════════
   DMP → Profile mapping editor (flow form section)
   ──────────────────────────────────────────────────────────────
   Phase 1 admin UI for building + testing DMP-to-profile value
   maps. Runtime is read-only — the rules persist on the flow doc
   but no live request consumes them yet.
   ════════════════════════════════════════════════════════════════ */
.dpm-buttons{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:4px 0 2px; }
.dpm-rules-wrap{ display:flex; flex-direction:column; gap:14px; margin:14px 0; }
.dpm-empty{ padding:14px; border:1px dashed var(--line-2); border-radius:8px; }
.dpm-rule{
  border:1px solid var(--line-2); border-radius:10px;
  padding:14px 16px; background:#fafbfc;
}
.dpm-rule-header{
  display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
}
.dpm-rule-grid{
  display:grid; grid-template-columns:1fr 1.5fr; gap:12px; flex:1;
}
.dpm-rule-grid .field{ margin:0; }
.dpm-rule-del{
  flex:0 0 auto; color:var(--ink-3); font-size:16px; line-height:1;
  padding:6px 8px;
}
.dpm-rule-del:hover{ color:#dc2626; }
.dpm-vmap{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line-2); }
.dpm-vmap-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}
.dpm-vmap-empty{ font-style:italic; padding:6px 0; }
.dpm-vmap-row{
  display:grid; grid-template-columns:1fr auto 1fr auto;
  gap:8px; align-items:center; margin-bottom:6px;
}
.dpm-vmap-row input{
  width:100%; padding:6px 10px; font-size:13px;
  border:1px solid var(--line-2); border-radius:6px;
  font-family:'SF Mono', Menlo, Consolas, monospace;
}
.dpm-vmap-arrow{ color:var(--ink-3); font-weight:700; }
.dpm-vmap-del{ color:var(--ink-3); padding:4px 8px; }
.dpm-vmap-del:hover{ color:#dc2626; }

/* Sample-call tester */
.dpm-tester{
  margin-top:16px; padding:14px 16px;
  background:#f8fafc; border:1px solid var(--line-2); border-radius:10px;
}
.dpm-tester-row{
  display:flex; gap:8px; align-items:center; margin-top:8px;
}
.dpm-test-input{
  flex:1; padding:8px 12px; font-size:13px;
  border:1px solid var(--line-2); border-radius:6px;
  font-family:'SF Mono', Menlo, Consolas, monospace;
}
.dpm-test-result{ margin-top:12px; }
.dpm-test-result.is-loading{ opacity:.6; }
.dpm-test-result:empty{ display:none; }
.dpm-test-error{
  padding:10px 14px; background:#fef2f2; border:1px solid #fecaca;
  border-radius:8px; color:#991b1b; font-size:13px;
}
.dpm-test-error code{ background:#fff; padding:1px 4px; border-radius:3px; }
.dpm-test-ok{ font-size:13px; }
.dpm-test-mapped{
  display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 4px;
}
.dpm-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:99px;
  background:#dcfce7; color:#166534; font-size:12.5px;
}
.dpm-pill code{ background:rgba(255,255,255,.7); padding:1px 5px; border-radius:3px; }
.dpm-perrule-table{ margin-top:6px; }
.dpm-status-chip{
  display:inline-block; padding:1px 8px; border-radius:99px;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background:#e2e8f0; color:#475569;
}
.dpm-status-chip.dpm-status-mapped{ background:#dcfce7; color:#166534; }
.dpm-status-chip.dpm-status-no-valueMap-entry,
.dpm-status-chip.dpm-status-no-valueMap{ background:#fef3c7; color:#92400e; }
.dpm-status-chip.dpm-status-missing-in-dmp{ background:#e2e8f0; color:#64748b; }
.dpm-misses{
  margin-top:10px; padding:10px 14px;
  background:#fef3c7; border:1px solid #fde68a; border-radius:8px;
  color:#92400e; font-size:13px;
}
.dpm-misses ul{ margin:6px 0 0 18px; padding:0; }
.dpm-test-raw{ margin-top:10px; }
.dpm-test-raw summary{
  cursor:pointer; font-size:12.5px; color:var(--ink-2);
  padding:4px 0;
}
.dpm-test-raw pre{
  background:#0f172a; color:#e2e8f0; padding:10px;
  border-radius:6px; font-size:11.5px; line-height:1.5;
  overflow-x:auto; max-height:340px;
}

/* past_conversions multi-checkbox picker (proxy rule value editor) */
.pc-multi{
  border:1px solid var(--line); border-radius:8px; background:#fff;
  padding:6px; min-width:240px; max-width:340px;
}
.pc-multi-search{
  width:100%; box-sizing:border-box; padding:5px 8px; margin-bottom:4px;
  border:1px solid var(--line); border-radius:6px; font-size:12.5px;
}
.pc-multi-count{ font-size:11px; color:var(--ink-2); padding:0 2px; }
.pc-multi-list{
  max-height:170px; overflow-y:auto; margin-top:4px;
  display:flex; flex-direction:column; gap:1px;
}
.pc-multi-item{
  display:flex; align-items:center; gap:7px; padding:3px 5px;
  font-size:12.5px; border-radius:5px; cursor:pointer;
}
.pc-multi-item:hover{ background:var(--line-2); }
.pc-multi-item input{ margin:0; flex:0 0 auto; }
.pc-multi-sub{ color:var(--ink-2); font-style:normal; font-size:11px; }

/* =========================================================
   Reports v2 — dashboard canvas (.rpt-*)
   =========================================================
   Uses ONLY the existing :root tokens. Nothing here is scoped to a
   view other than #rptRoot / .rpt-*, so the classic Reports page and
   every other view are untouched.

   The core fix for "everything stacked on each other": the old page
   emitted 5-6 identical full-width table blocks separated only by
   margin, so the eye had no hierarchy and the operator scrolled ~6
   screens while half of a wide monitor sat empty. Here the vertical
   budget goes to a KPI hero + a horizontal chart grid, and the dense
   tables live in ONE card behind a segmented control.
   ========================================================= */

/* Reclaim the horizontal space the old layout wasted. `.main` is
   max-width:1200px with no centering, so on a wide screen everything
   hugged the left edge. Only widen for the Reports v2 root — every
   other view keeps its current measure. Uses :has(), supported in all
   current evergreen browsers; if unsupported the page simply stays
   1200px, which is the present behavior (graceful, not broken). */
.main:has(#rptRoot){ max-width:1680px; }

#rptRoot{ display:flex; flex-direction:column; gap:14px; }
.rpt-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rpt-head h2{ font-size:24px; font-weight:700; }
.rpt-head .actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rpt-fresh{ font-size:12px; font-weight:400; color:var(--ink-3); }

/* ---- query bar ---------------------------------------------------
   One persistent bay for every filter, so the operator always knows
   what slice they're looking at. Sticky because the charts below are
   tall enough that the filters would otherwise scroll away. */
.rpt-querybar{
  position:sticky; top:0; z-index:20;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; display:flex; flex-direction:column; gap:8px;
  box-shadow:0 1px 2px rgba(15,23,42,0.03);
}
.rpt-qb-row{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.rpt-qb-window{ margin-left:auto; font-size:12px; color:var(--ink-3); align-self:center; }
.rpt-qb-sep{ width:1px; align-self:stretch; background:var(--line); margin:0 2px; }

/* The proxy filter gets its own accented bay — it is the axis the
   operator asked for, not a seventh identical dropdown. */
.rpt-qb-proxy{
  display:flex; gap:8px; align-items:flex-end;
  background:var(--accent-soft); border:1px solid var(--accent);
  border-radius:10px; padding:6px 10px 8px;
}
.rpt-qb-proxy .rf-label{ color:var(--accent-ink); }
.rpt-proxy-meta{ display:flex; gap:4px; align-items:center; padding-bottom:2px; flex-wrap:wrap; }

.rpt-qb-chips{ gap:6px; align-items:center; }
.rpt-chip{
  font:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
  background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid var(--accent); border-radius:999px; padding:3px 9px;
}
.rpt-chip:hover{ background:#fff; }
.rpt-chip-clear{ background:transparent; color:var(--ink-2); border-color:var(--line); }
.rpt-chip-clear:hover{ background:var(--line-2); color:var(--ink); }

/* ---- KPI hero ----------------------------------------------------
   Three sizes carry the hierarchy: lead (34px) answers "is today
   good?", compact (26px) is supporting, and .aud-kpi (21px, existing)
   is detail. Same Fraunces face as .kpi-value so it reads as one
   family, not a new design language. */
.rpt-hero{ display:flex; flex-direction:column; gap:10px; }
.rpt-lead-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; }
.rpt-lead{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; display:flex; flex-direction:column; gap:4px;
}
.rpt-lead-value{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:34px;
  line-height:1.05; letter-spacing:-0.015em; color:var(--ink);
}
.rpt-lead .kpi-label{ color:var(--ink-3); }
.rpt-lead-spark{ margin-top:6px; color:var(--accent); height:26px; }

/* ---- chart canvas ------------------------------------------------
   12-column grid so charts sit SIDE BY SIDE instead of stacking. */
.rpt-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:12px; align-items:start; }
.rpt-span-4 { grid-column:span 4; }
.rpt-span-6 { grid-column:span 6; }
.rpt-span-8 { grid-column:span 8; }
.rpt-span-12{ grid-column:span 12; }

.rpt-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 16px 14px; display:flex; flex-direction:column; gap:8px;
  min-width:0;   /* lets a chart/table shrink inside a grid track */
}
.rpt-card > h4{
  font-size:13px; font-weight:700; letter-spacing:0.02em; color:var(--ink);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding-bottom:8px; border-bottom:1px solid var(--line-2);
}
.rpt-card > h4 .hint{ font-weight:400; font-size:11.5px; color:var(--ink-3); }

/* Charts inherit their series colour from `color` and paint with
   currentColor. This is deliberate: fill="var(--accent)" as an SVG
   PRESENTATION ATTRIBUTE does not resolve, which is why hand-rolled
   charts elsewhere hardcode hex. currentColor always works. */
.rpt-chart{ color:var(--accent); width:100%; }
.rpt-chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.rpt-chart .rpt-axis{ fill:var(--ink-3); font-size:9.5px; font-family:inherit; }
.rpt-chart .rpt-grid-line{ stroke:var(--line); stroke-width:1; }
.rpt-chart-legend{ display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--ink-2); }
.rpt-legend-key{ display:inline-flex; align-items:center; gap:5px; }
.rpt-legend-dot{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; }

/* Horizontal share bars for a ranked dimension. */
.rpt-bars{ display:flex; flex-direction:column; gap:7px; }
.rpt-bar-row{ display:grid; grid-template-columns:minmax(90px,1.4fr) 1fr auto; gap:9px; align-items:center; font-size:12px; }
.rpt-bar-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.rpt-bar-track{ background:var(--line-2); border-radius:999px; height:8px; overflow:hidden; }
.rpt-bar-fill{ background:var(--accent); height:100%; border-radius:999px; min-width:2px; }
.rpt-bar-val{ font-variant-numeric:tabular-nums; color:var(--ink-2); font-size:11.5px; }

/* ---- segmented control (replaces 5 stacked tables) -------------- */
.rpt-seg{ display:inline-flex; background:var(--line-2); border-radius:9px; padding:2px; gap:2px; flex-wrap:wrap; }
.rpt-seg button{
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  background:transparent; color:var(--ink-2); border:0;
  border-radius:7px; padding:5px 11px;
}
.rpt-seg button:hover{ color:var(--ink); }
.rpt-seg button.active{ background:var(--panel); color:var(--accent-ink); box-shadow:0 1px 2px rgba(15,23,42,0.08); }

/* ---- inert panels ------------------------------------------------
   When a proxy scope is active, panels with no proxy dimension in the
   data are dimmed and labelled — the honest alternative to showing
   window-wide numbers under a proxy heading. */
.rpt-inert{ opacity:0.55; }
.rpt-inert-note{
  font-size:11px; font-weight:600; color:var(--warn);
  background:#fff8ec; border:1px solid #f0d9a8; border-radius:7px;
  padding:3px 8px; align-self:flex-start;
}

.rpt-empty{ padding:18px 0; text-align:center; color:var(--ink-3); font-size:12.5px; }

@media (max-width: 1100px){
  .rpt-span-4, .rpt-span-6, .rpt-span-8{ grid-column:span 12; }
  .rpt-querybar{ position:static; }
}

/* =========================================================
   Defect fixes (standalone — each repairs something already shipped)
   ========================================================= */

/* 1. The Analytics → Proxies lens renders ~15 "Distribution" cells
      using .proxy-mini-bar / .proxy-mini-bar-fill, and a timeline via
      .proxy-timeline*. NONE of those classes had a single CSS rule, so
      those columns render BLANK today. Six lines fixes that page. */
.proxy-mini-bar{
  background:var(--line-2); border-radius:999px; height:8px;
  overflow:hidden; min-width:60px;
}
.proxy-mini-bar-fill{ background:var(--accent); height:100%; border-radius:999px; min-width:2px; }
.proxy-timeline{ color:var(--accent); width:100%; }
.proxy-timeline svg{ display:block; width:100%; height:auto; }
.proxy-timeline-legend{ display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--ink-2); margin-top:4px; }

/* 2. The date-range quick buttons had :hover but no .active rule, so
      the SELECTED range was invisible. */
.rf-quick .btn-link.active{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.rf-quick .btn-link.active:hover{ background:var(--accent-ink); color:#fff; }

/* 3. Native controls follow the light palette this admin is designed
      for, so a browser in dark mode doesn't render dark <select> and
      <input type=date> widgets on white cards. */
:root{ color-scheme:light; }

/* Unapplied-filter affordance. renderReportsV2 adds .is-dirty to the Apply
   button when a server-side filter changes, to say "the numbers on screen do
   not reflect these dropdowns yet". There was no rule for it, so the signal
   was invisible and the operator could read a stale slice as current. */
.btn.primary.is-dirty{
  box-shadow:0 0 0 3px var(--accent-soft);
  position:relative;
}
.btn.primary.is-dirty::after{
  content:''; position:absolute; top:-3px; right:-3px;
  width:8px; height:8px; border-radius:50%;
  background:var(--warn); border:2px solid #fff;
}

/* =========================================================
   Mobile / home-screen app (Add to Home Screen → TaskPilot)
   =========================================================
   The existing 780px block collapses the sidebar into a horizontal strip
   and HIDES .sidebar-footer — which also hid "Log out" and now
   "Sign out all devices", i.e. the only way to revoke a lost phone's
   90-day session was unreachable from a phone. Restore them as compact
   inline actions instead of hiding the footer outright. */
@media (max-width:780px){
  /* Give the footer its OWN wrapped row. Putting it in the nav row with
     margin-left:auto starved the nav links (they collapsed to "Das…" and
     the other views became unreachable on a phone). */
  /* overflow-x must stay CONTAINED here: the nav's 13 links are nowrap, so
     letting the sidebar grow to fit them widens .layout and the whole page
     scrolls sideways (the Send button ends up off-screen). The nav keeps its
     own horizontal scroll; min-width:0 is what actually allows a flex/grid
     child to shrink below its content width. */
  .sidebar{ flex-wrap:wrap; overflow-x:hidden; max-width:100%; }
  /* flex-basis, not width: the base rule sets `flex:1` (basis 0%), and for a
     flex item the basis wins over width — so width:100% was ignored and the
     nav stayed squeezed on the first row, clipped to "Das…". */
  .sidebar nav{ order:2; flex:1 1 100%; min-width:0; overflow-x:auto; }
  .layout{ min-width:0; max-width:100%; overflow-x:hidden; }
  .main{ min-width:0; }
  .sidebar-footer{
    display:flex; flex-direction:row; align-items:center; gap:12px;
    order:1; width:auto; margin-left:auto; flex-shrink:0;
    border-top:0; padding:0 4px;
  }
  /* The docs link is the one genuinely space-hungry item — drop just that. */
  .sidebar-footer .docs-link{ display:none; }
  .sidebar-footer-row{ gap:12px; }
  .sidebar-footer-row a{ display:none; }          /* "Open router" — not a phone task */
  .sidebar-footer .btn-link{ font-size:12px; white-space:nowrap; }

  /* Standalone launches paint into the notch/home-indicator area
     (viewport-fit=cover), so pad for it. */
  .layout{ padding-top:env(safe-area-inset-top); }
  .main{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }
  /* Tables are the least phone-friendly thing in here; let them scroll
     inside their wrapper rather than widening the page. */
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* "Keep me signed in" on the login card. */
.login-remember{
  flex-direction:row !important; align-items:flex-start; gap:8px;
  font-weight:500; color:var(--ink-2); font-size:12.5px; line-height:1.4;
}
.login-remember input{ margin-top:2px; flex:0 0 auto; width:auto; }
.login-remember small{ display:block; color:var(--ink-3); font-size:11px; margin-top:2px; }

/* One-time-code sign-in on the login card (phone enrollment). */
.login-code{ margin-top:2px; }
.login-code > summary{
  cursor:pointer; font-size:12.5px; color:var(--ink-2); font-weight:600;
  padding:4px 0; list-style:none;
}
.login-code > summary::-webkit-details-marker{ display:none; }
.login-code > summary::before{ content:'▸ '; color:var(--ink-3); }
.login-code[open] > summary::before{ content:'▾ '; }
.login-code > summary:hover{ color:var(--accent-ink); }
.login-code-form{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.login-code-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2); font-weight:600; }
.login-code-form input{
  padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  /* 16px so iOS doesn't auto-zoom, tabular + tracking so a typed code is
     easy to proof-read on a phone. */
  font-size:16px; letter-spacing:0.14em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; text-align:center;
}
.login-code-form input:focus{ outline:none; border-color:var(--accent); }

/* =========================================================
   TaskPilot on mobile — real height chain (no magic numbers)
   =========================================================
   The chat panel needs to fill exactly the space left under the (two-row)
   mobile nav so the composer sits at the bottom of the VISIBLE area. It used
   to guess with calc(100dvh - 132px), which under-measured the wrapped nav and
   pushed the composer past the bottom edge — it looked jammed and crooked.

   Scoped with :has(.tp-wrap) so ONLY TaskPilot gets a fixed-height,
   internally-scrolling shell. Every other view keeps normal page scrolling —
   important, because `overflow:hidden` on .main would otherwise clip the
   Reports tables instead of letting the page scroll. */
@media (max-width:780px){
  .layout:has(.tp-wrap){
    height:100dvh;                 /* dvh tracks the collapsing URL bar */
    min-height:0;
    grid-template-rows:auto 1fr;   /* nav strip, then the panel */
  }
  .main:has(.tp-wrap){
    min-height:0; overflow:hidden;
    display:flex; flex-direction:column;
    padding-top:12px; padding-bottom:0;   /* composer owns the bottom inset */
  }
  /* #view is the shared mount point, so this must stay :has()-scoped too. */
  #view:has(.tp-wrap){ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
}

/* ── Audit view ───────────────────────────────────────────────
   Severity is encoded in a left stripe AND a chip, never colour alone —
   the page is read fast and scanned for "what is red", so the shape has to
   carry the signal too. Caveats and blind spots deliberately get the same
   visual weight as findings: an audit whose limitations are styled as fine
   print is an audit that will be over-trusted. */
.audit-summary{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:12px 14px; margin-bottom:14px;
  background:var(--surface-2,#f8fafc); border:1px solid var(--border,#e2e8f0); border-radius:8px;
}
.audit-summary .hint{ margin-left:auto; }
.audit-chip{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  background:var(--surface-3,#eef2f7); color:var(--ink-2,#475569);
}
.audit-chip.audit-sev-critical{ background:#fee2e2; color:#991b1b; }
.audit-chip.audit-sev-high    { background:#ffedd5; color:#9a3412; }
.audit-chip.audit-sev-medium  { background:#fef9c3; color:#854d0e; }

.audit-caveats{
  border:1px solid #fbbf24; background:#fffbeb; color:#78350f;
  border-radius:8px; padding:12px 14px; margin-bottom:16px;
}
.audit-caveats ul{ margin:6px 0 0 18px; }
.audit-caveats li{ margin:3px 0; }
.audit-clean{
  border:1px solid var(--border,#e2e8f0); background:var(--surface-2,#f8fafc);
  border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:13px; color:var(--ink-2,#475569);
}

.audit-finding{
  border:1px solid var(--border,#e2e8f0); border-left-width:4px; border-radius:8px;
  padding:12px 14px; margin-bottom:10px; background:var(--surface,#fff);
}
.audit-finding.audit-sev-critical{ border-left-color:#dc2626; }
.audit-finding.audit-sev-high    { border-left-color:#ea580c; }
.audit-finding.audit-sev-medium  { border-left-color:#ca8a04; }
.audit-finding-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.audit-lvl{ font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--ink-3,#64748b); }
.audit-id{ font-size:11px; color:var(--ink-3,#64748b); margin-left:auto; }
.audit-rule{ font-size:14px; line-height:1.45; margin-bottom:8px; }
.audit-obs-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.audit-obs{
  font-size:12px; padding:2px 7px; border-radius:5px;
  background:var(--surface-2,#f1f5f9); color:var(--ink-2,#475569);
  font-variant-numeric:tabular-nums;
}
.audit-obs b{ color:var(--ink-3,#64748b); font-weight:600; margin-right:4px; }
.audit-evidence{ font-size:12px; color:var(--ink-2,#475569); font-variant-numeric:tabular-nums; }
.audit-cite{ font-size:11px; color:var(--ink-3,#94a3b8); margin-top:4px; word-break:break-word; }
.audit-sup, .audit-blind{ margin:0 0 0 18px; font-size:13px; line-height:1.6; }
.audit-sup code{ font-size:12px; }
.audit-blind li{ color:var(--ink-2,#475569); }

@media (prefers-color-scheme: dark){
  .audit-caveats{ background:#2a1f05; border-color:#a16207; color:#fde68a; }
  .audit-chip.audit-sev-critical{ background:#450a0a; color:#fca5a5; }
  .audit-chip.audit-sev-high    { background:#431407; color:#fdba74; }
  .audit-chip.audit-sev-medium  { background:#3f2d04; color:#fde047; }
}

/* Scope chip — the first thing read on the Audit page. An unscoped run must
   be impossible to mistake for a scoped one, so this is always present and
   visually distinct, never merely implied by the absence of a label. */
.audit-scope-chip{
  display:inline-block; padding:3px 10px; border-radius:6px;
  font-size:12px; font-weight:700; letter-spacing:0.01em;
  background:var(--line-2,#eef2f7); color:var(--ink-2,#475569);
  border:1px solid var(--border,#e2e8f0);
}
.audit-scope-chip.scoped{
  background:var(--accent-soft,#dcfce7); color:var(--accent-ink,#166534);
  border-color:var(--accent,#16a34a);
}

/* ---- Audit controls on a phone ------------------------------
   The Audit page is opened from the home-screen app, where the header row
   (scope picker + range preset + two date inputs + Re-run) measured 538px
   against a 375px viewport: the date inputs and the Re-run button sat off
   the right edge, unreachable, with no horizontal scroll to reveal them.
   A half-visible control row is worse than a stacked one — you cannot tell
   that a scope picker exists, which makes an unscoped run look like the
   only option. Wrap and let each control take a sensible share. */
@media (max-width: 780px){
  .view-head{ flex-wrap:wrap; gap:8px; }
  .view-head .actions{
    display:flex; flex-wrap:wrap; gap:8px; width:100%; margin-left:0;
  }
  /* Scope is the most important control here, so it gets its own full row. */
  #auditScope{ flex:1 1 100%; min-width:0; }
  #auditDays{ flex:1 1 auto; min-width:0; }
  #auditFrom, #auditTo{ flex:1 1 calc(50% - 4px); min-width:0; }
  #auditRerun{ flex:1 1 100%; }
  /* Findings carry long ids and cite strings; let them wrap rather than
     widen the page. */
  .audit-finding-head{ gap:6px; }
  .audit-id{ margin-left:0; flex:1 1 100%; }
  .audit-obs{ max-width:100%; overflow-wrap:anywhere; }
  .audit-cite{ overflow-wrap:anywhere; }
}

/* A/B experiment blocks on the flow form. The body collapses when its
   toggle is off so an unused axis doesn't add noise to an already long
   form, and an active test reads as visibly "on". */
.ab-exp{ border:1px solid var(--border,#e2e8f0); border-radius:8px; padding:12px 14px; background:var(--surface-2,#f8fafc); }
.ab-exp-body{ margin-top:10px; padding-left:12px; border-left:3px solid var(--accent,#16a34a); }
.ab-exp-body[hidden]{ display:none; }

/* Collapse an experiment body unless its own toggle is checked.
   Done in CSS rather than JS because the form is rendered as a string and
   re-inserted wholesale — any JS that binds on a timer races the render and
   silently leaves both bodies open, which reads as "the toggle does nothing".
   The checkbox and the body share the .ab-exp container, so :has() expresses
   the relationship directly and cannot get out of sync. */
.ab-exp:not(:has(input[type="checkbox"]:checked)) .ab-exp-body{ display:none; }

/* Audit: idle + running states.
   The page no longer auto-runs — opening it fired a ~70s full-setup scan
   before the operator had said what they wanted, and showed a bare loading
   line with no controls for the whole minute, which reads as hung. */
.audit-idle{
  border:1px dashed var(--border,#e2e8f0); border-radius:8px;
  padding:18px 20px; margin:14px 0; background:var(--surface-2,#f8fafc);
}
.audit-idle p{ margin:0 0 6px; }
.audit-idle .hint{ margin:0; max-width:70ch; }
.audit-running{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--accent,#16a34a); border-radius:8px;
  padding:12px 14px; margin:14px 0;
  background:var(--accent-soft,#dcfce7); color:var(--accent-ink,#166534);
  font-size:13.5px;
}
.audit-running #auditElapsed{ font-variant-numeric:tabular-nums; opacity:.75; }