:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  /* Brand accent: the palette's deep orange (user's pick over the site's
     lighter amber #e8a33d). Blue fallback: #2a78d6 / soft #e8f1fc. */
  --accent: #eb6834;
  --accent-soft: #fdeae3;
  --good: #006300;
  --bad: #d03b3b;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(11,11,11,.05), 0 4px 14px rgba(11,11,11,.05);
}

* { box-sizing: border-box; margin: 0; }
:root { accent-color: var(--accent); }
select:focus, button:focus-visible, input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.filter select:focus { border-color: var(--accent); color: var(--accent); }
body {
  background: var(--bg);
  color: var(--ink);
  /* DM Sans: the open equivalent of Google Sans (which is Google-proprietary) */
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}

/* ── header ─────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 28px;
  padding: 10px 28px; background: var(--surface);
  border-bottom: 1px solid var(--grid);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 14px; }
/* the StorPro wordmark (vector, from the brand kit); "Growth" is the product
   name set in the UI face beside it */
.brand-logo { height: 26px; width: auto; display: block; }
.brand-name { font-weight: 700; letter-spacing: .08em; font-size: 15px; }
.brand-name span { color: var(--accent); letter-spacing: 0; font-weight: 600; font-size: 17px; }
.brand-sub { font-size: 11.5px; color: var(--muted); font-style: italic; }

.tabs { display: flex; gap: 8px; flex: 1; justify-content: center; flex-wrap: wrap; }
.tab {
  border: 1px solid var(--grid); background: var(--surface); color: var(--ink);
  padding: 9px 22px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.freshness { font-size: 12px; color: var(--muted); text-align: right; min-width: 170px; }
.tab[hidden] { display: none; }

/* ── account chip + menu ────────────────────────────── */
.topright { display: flex; align-items: center; gap: 14px; }
.user { position: relative; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--grid);
  background: var(--accent-soft) center/cover no-repeat; color: var(--accent);
  font-weight: 700; font-size: 13px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.avatar:hover { border-color: var(--accent); }
.user-menu { right: 0; top: 42px; min-width: 240px; }
.user-menu .who { padding: 8px 12px 10px; border-bottom: 1px solid var(--grid); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.user-menu .who b { font-size: 13.5px; }
.user-menu .who span { font-size: 12px; color: var(--muted); }
.role-pill {
  display: inline-block; width: fit-content; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; background: var(--accent-soft); color: var(--accent) !important;
}
.role-pill.member { background: #f0efec; color: var(--ink-2) !important; }
.role-pill.uploader { background: #fdf0e6; color: #a34e12 !important; }

/* ── buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--grid); background: var(--surface); color: var(--ink);
  padding: 9px 16px; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(.94); color: #fff; }
.btn.link { border: none; background: none; color: var(--accent); padding: 6px 0; font-weight: 550; }
.btn:disabled { opacity: .5; cursor: default; }

/* ── sign-in gate: brand panel + sign-in panel ──────── */
.gate {
  position: fixed; inset: 0; z-index: 100; background: var(--surface);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.gate[hidden] { display: none; }
.gate-brand {
  position: relative; overflow: hidden; color: #fff;
  padding: 40px 56px; display: flex; flex-direction: column;
  /* brand navy (#00152d from the logo kit) so the white wordmark and its
     orange mark read as designed; the orange lives in the chips and bars */
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(249,161,36,.28), transparent 60%),
    radial-gradient(700px 600px at -20% 110%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(160deg, #00152d 0%, #0a2647 60%, #143a66 130%);
}
/* faint dot grid gives the panel texture without competing with the copy */
.gate-brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%);
}
.gb-head { display: flex; align-items: center; gap: 12px; position: relative; }
.gb-head .brand-logo { height: 30px; }
.gb-head .brand-name span { color: #f9a124; font-size: 19px; }
.gb-body { position: relative; margin: auto 0; max-width: 520px; }
.gb-body h1 { font-size: clamp(26px, 2.75vw, 38px); font-weight: 750; line-height: 1.12; letter-spacing: -.01em; margin-bottom: 18px; }
.gb-body p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 460px; }
.gb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding: 0; }
.gb-chips li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 20px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(4px);
}
/* a quiet bar chart along the foot of the panel: the product, in silhouette */
.gb-bars { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-top: 32px; }
.gb-bars i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12)); }
.gate-panel { display: flex; align-items: center; justify-content: center; padding: 40px 32px; background: var(--surface); }
.gate-card { width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }
.gate-card h2 { font-size: 26px; font-weight: 750; letter-spacing: -.01em; margin-bottom: 6px; }
.gate-sub { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 14px; }
.gate-sub b { color: var(--ink); }
.btn.google { width: 100%; padding: 13px 16px; font-size: 14.5px; border-color: #d9d7cf; box-shadow: 0 1px 2px rgba(11,11,11,.05); }
.btn.google:hover { border-color: var(--accent); color: var(--ink); box-shadow: 0 4px 14px rgba(235,104,52,.18); }
.gate-foot { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 10px; }
.gate-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 2px 0; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; border-top: 1px solid var(--grid); }
.gate-email { display: flex; flex-direction: column; gap: 8px; }
.gate-note { font-size: 12px; color: var(--muted); line-height: 1.45; }
#gate-sent-back { align-self: flex-start; }
.gate-email input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid #d9d7cf; border-radius: 8px; font: inherit; font-size: 14px; }
.gate-email input:focus { outline: none; border-color: var(--accent); }
.gate-email .btn { white-space: nowrap; padding: 11px 14px; font-size: 13.5px; margin-top: 2px; }
.gate-msg.ok { color: var(--good); background: #e7f4e7; }
#gate-switch { align-self: flex-start; }
@media (max-width: 900px) {
  .gate { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: auto; }
  .gate-brand { padding: 24px 28px; }
  .gb-body { margin: 22px 0 0; }
  .gb-body h1 { font-size: 24px; }
  .gb-body p, .gb-bars { display: none; }
  .gb-chips { margin-top: 16px; }
}
.acc-form input, .acc-form select {
  border: 1px solid var(--grid); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 13.5px;
  background: var(--surface); color: var(--ink); width: 100%;
}
.acc-form input:focus, .acc-form select:focus { border-color: var(--accent); outline: none; }
.gate-msg { font-size: 12.5px; color: var(--bad); line-height: 1.5; padding: 10px 12px; border-radius: 8px; background: #fdecec; }
.gate-msg.ok { color: var(--good); }

/* ── access page (no tab of its own — opened from the account menu) ── */
.page-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.page-head h2 { font-size: 18px; font-weight: 700; }
.acc-table { max-height: max(220px, calc(100vh - 340px)); }
.acc-table td { vertical-align: top; }
.acc-table .who b { display: block; font-weight: 650; }
.acc-table .who span { font-size: 12px; color: var(--muted); }
.acc-table .scope { font-size: 12.5px; color: var(--ink-2); }
.acc-table .scope .via { display: block; font-size: 11.5px; color: var(--muted); }
.acc-table .acts { white-space: nowrap; text-align: right; }
.acc-table .acts button {
  border: none; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; padding: 2px 6px;
}
.acc-table .acts button.danger { color: var(--bad); }
.acc-table .acts button:disabled { color: var(--muted); cursor: default; }
.acc-table .dim { color: var(--muted); font-size: 12px; white-space: nowrap; }
.acc-table .disabled td { opacity: .55; }

.modal {
  position: fixed; inset: 0; z-index: 90; background: rgba(11,11,11,.32);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal[hidden] { display: none; }
.modal-card {
  width: 560px; max-width: 100%; max-height: 92vh; overflow: auto;
  background: var(--surface); border-radius: 14px; padding: 22px 26px 20px;
  box-shadow: 0 10px 40px rgba(11,11,11,.18);
}
.modal-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.acc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.acc-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.acc-form label[hidden] { display: none; }
.acc-scope { margin-top: 16px; padding: 12px 14px; background: var(--bg); border-radius: 10px; }
.acc-scope-head { font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; margin-right: 18px; cursor: pointer; }
.chk input { margin: 0; }
.chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 10px; padding-left: 4px; }
.chk-grid[hidden] { display: none; }
.chk-grid .chk { font-size: 12.5px; margin: 0; }
.chk-grid .grp { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
#acc-disabled-wrap { margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.acc-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.acc-msg { font-size: 12.5px; color: var(--bad); margin-left: auto; }
.acc-msg.ok { color: var(--good); }

/* ── filter bar ─────────────────────────────────────── */
.filterbar {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 28px; background: var(--surface);
  border-bottom: 1px solid var(--grid); min-height: 48px;
}
.filters { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* custom chevron: the native select arrow hugs the box edge — draw our own,
   inset from the right, with padding so the label never runs under it */
.filter select, select.tbl-filter {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898781' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 12px;
}
.filter select {
  padding: 7px 30px 7px 10px; border: 1px solid var(--grid);
  border-radius: 7px; background-color: var(--surface); color: var(--ink-2); font-size: 12.5px;
  font-weight: 550; cursor: pointer;
}
select.tbl-filter { padding-right: 28px; }
#f-facility { min-width: 190px; } /* options arrive with the data — hold the width meanwhile */
.filter select:hover { border-color: var(--accent); color: var(--accent); }
.reset {
  border: none; background: none; color: var(--accent);
  font-size: 13px; cursor: pointer; padding: 9px 4px; font-weight: 550;
}
.hint { margin-left: auto; font-size: 12px; color: var(--muted); }

/* ── layout ─────────────────────────────────────────── */
#main { padding: 20px 28px 24px; max-width: 1500px; margin: 0 auto; }
.page { display: none; }
.page.active { display: block; }

/* ── fill the screen ────────────────────────────────────
   The body is a flex column one viewport tall; main takes what the topbar
   and filter strip (when shown) leave, the active page and subpage take all
   of main, and the block marked .grow takes the leftover height with its
   charts stretching into it — so no view ends in a band of grey. Designed
   chart heights become minimums (flex-basis auto, no shrink); on a short
   screen the page simply scrolls as before. */
body { min-height: 100vh; display: flex; flex-direction: column; }
#main { flex: 1; display: flex; flex-direction: column; width: 100%; }
.page.active { display: flex; flex-direction: column; flex: 1; }
.subpage.fill.active { display: flex; flex-direction: column; flex: 1; }
.fill.active > .grow { flex: 1; }
.fill.active > :last-child { margin-bottom: 0; }
.grow.card, .grow > .card { display: flex; flex-direction: column; }
.grow > .card { margin-bottom: 0; }
.grow .chart { flex: 1 0 auto; }
#camp-fleet:not([hidden]) { display: flex; flex-direction: column; flex: 1; }
#camp-fleet .chart { flex: 1 0 auto; }

/* pre-paint routing: a <head> script stamps the URL's tab/sub on <html>
   before the body parses, and these rules route the very first paint; the
   body-end script sets the real .active classes and removes the stamps */
html[data-boottab] .page.active { display: none; }
html[data-boottab="outreach"] #page-outreach,
html[data-boottab="facilities"] #page-facilities,
html[data-boottab="web"] #page-web,
html[data-boottab="social"] #page-social { display: block !important; }
html[data-bootsub] .subpage.active { display: none; }
html[data-bootsub="campaigns"] #sub-campaigns, html[data-bootsub="list"] #sub-list,
html[data-bootsub="traffic"] #sub-traffic, html[data-bootsub="sources"] #sub-sources,
html[data-bootsub="paid"] #sub-paid, html[data-bootsub="ai"] #sub-ai,
html[data-bootsub="journey"] #sub-journey,
html[data-bootsub="linkedin"] #sub-linkedin, html[data-bootsub="facebook"] #sub-facebook,
html[data-bootsub="instagram"] #sub-instagram { display: block !important; }
html[data-boottab] .tab.active { background: var(--surface); border-color: var(--grid); color: var(--ink); }
html[data-boottab="outreach"] .tab[data-tab="outreach"],
html[data-boottab="facilities"] .tab[data-tab="facilities"],
html[data-boottab="web"] .tab[data-tab="web"],
html[data-boottab="social"] .tab[data-tab="social"] { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-boottab="outreach"] #outreach-subtabs { display: flex !important; }
html[data-boottab="web"] #web-subtabs { display: flex !important; }
/* …and the filter widgets, which otherwise show Overview's set until app.js
   runs (mirrors updateFilters(): channel+tip only on Overview, status only
   on campaigns, facility only on Facilities, nothing on the email list) */
html[data-boottab] #filterbar .hint, html[data-boottab] #fw-channel { display: none !important; }
html[data-boottab]:not([data-boottab="outreach"]) #fw-status { display: none !important; }
html[data-bootsub="list"] #fw-status, html[data-bootsub="list"] #fw-period,
html[data-bootsub="list"] #f-reset { display: none !important; }
html[data-boottab="facilities"] #fw-facility { display: block !important; }

/* inner tabs — deliberately quieter than the boxed primary tabs: plain
   text with an accent underline marks the second navigation level */
.subtabs { display: flex; gap: 22px; align-self: stretch; }
.subtab {
  border: none; background: none; padding: 0 2px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; border-bottom: 2.5px solid transparent;
  transition: color .15s;
}
.subtab:hover { color: var(--accent); }
.subtab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.subpage { display: none; }
.subpage.active { display: block; }

/* bounce-rate health spectrum (green -> orange -> red, 0-10% scale) */
.spectrum {
  position: relative; height: 6px; border-radius: 3px; margin: 8px 0 5px;
  background: linear-gradient(90deg, #1baf7a 0%, #1baf7a 18%, #eda100 38%, #eb6834 62%, #d03b3b 100%);
}
.spectrum .mark {
  position: absolute; top: -3px; width: 3px; height: 12px;
  background: var(--ink); border-radius: 2px; transform: translateX(-50%);
}

/* in-card chart filter (funnel icon + popover) */
.card { position: relative; }
.card-head { display: flex; align-items: center; gap: 6px; }
.chart-filter-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--grid); background: var(--surface); color: var(--ink-2);
  padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 550;
  cursor: pointer; transition: all .15s;
}
.chart-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.gran-toggle {
  margin-left: auto; display: inline-flex; gap: 2px;
  background: var(--grid); border-radius: 8px; padding: 2px;
}
.gran {
  border: none; background: none; color: var(--ink-2); cursor: pointer;
  font-size: 11.5px; font-weight: 550; padding: 3px 10px; border-radius: 6px;
}
.gran.on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.10); }
/* tighter pills for crowded card headers */
.gran-toggle.mini .gran { font-size: 10.5px; padding: 2px 7px; white-space: nowrap; }
/* fleet-health view inside the campaign card: compact stat strip over the chart */
.fleet-strip { display: flex; align-items: flex-end; gap: 38px; padding: 6px 6px 12px; }
.fleet-strip .n { font-size: 23px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.fleet-strip .l { font-size: 12px; color: var(--muted); }
.fleet-strip .asof { margin-left: auto; font-size: 12px; color: var(--muted); }
.chart-filter-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chart-filter-menu {
  position: absolute; right: 18px; top: 44px; z-index: 20; min-width: 220px;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 9px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: 6px;
}
.chart-filter-menu .opt {
  padding: 8px 12px; border-radius: 6px; font-size: 13px; color: var(--ink-2);
  cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.chart-filter-menu .opt:hover { background: var(--accent-soft); color: var(--accent); }
.chart-filter-menu .opt.sel { color: var(--accent); font-weight: 600; }
.chart-filter-menu .opt .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ── journey funnel (pure CSS — crisper than the echarts trapezoids) ── */
.funnel { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 8px 6px; }
.fstage .fmeta {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  font-size: 13px; margin-bottom: 7px;
}
.fstage .fname { font-weight: 650; }
.fstage .fnums { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.fstage .fnums b { color: var(--ink); font-size: 15px; font-weight: 700; }
.fstage .ffill {
  height: 38px; border-radius: 9px; min-width: 26px; margin: 0 auto;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.fdrop {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 4px; font-size: 12px; color: var(--muted);
}
.fdrop .arrow {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--bg); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.fdrop b { color: var(--ink-2); font-weight: 650; }

/* ── journey pipeline (stages on a track, stat chips between) ── */
/* the journey pipeline centres in whatever height its card is given */
#pipeline { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 6px; }
/* the watchlist has seven fixed rows — let them breathe in the taller card */
#tbl-ai td { padding: 11px 12px; }
.pipe { position: relative; }
/* the loop: up from the first stage, across behind the summary card,
   down into the last stage — same weight as the stage track */
.pipe::before {
  content: ""; position: absolute; z-index: 0;
  left: 52px; right: 52px; top: 44px; height: 96px;
  border: 8px solid var(--bg); border-bottom: none;
  border-radius: 16px 16px 0 0;
}
.pipe-summary {
  position: relative; z-index: 1;
  width: 320px; max-width: 100%; margin: 6px auto 30px; text-align: center;
  border: 1px solid var(--grid); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow); background: var(--surface);
}
.pipe-summary .head { background: var(--accent); color: #fff; font-weight: 650; font-size: 13px; padding: 7px; }
.pipe-summary .body { padding: 12px 10px; display: flex; justify-content: center; gap: 26px; }
.pipe-summary .m .n { font-size: 22px; font-weight: 700; }
.pipe-summary .m .l { font-size: 11px; color: var(--muted); }
.pipe-row { display: flex; align-items: flex-start; }
.pnode { flex: none; width: 112px; text-align: center; position: relative; z-index: 1; }
.pnode .ic {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 8px;
  background: var(--surface); box-shadow: 0 0 0 6px var(--bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.pnode .n { font-size: 21px; font-weight: 700; }
.pnode .l { font-size: 12px; font-weight: 650; color: var(--ink-2); line-height: 1.25; }
.pnode .s { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.pconn { flex: 1; position: relative; padding-top: 46px; min-width: 96px; }
.pconn::before {
  content: ""; position: absolute; top: 25px; left: -22px; right: -22px;
  height: 8px; border-radius: 4px; background: var(--bg);
}
.pconn.seam::before {
  height: 0; top: 29px;
  border-top: 3px dashed var(--grid); background: none;
}
.pchip {
  position: relative; z-index: 1; width: fit-content; max-width: 96%;
  margin: 0 auto; padding: 8px 12px; text-align: center;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 9px;
  box-shadow: var(--shadow); font-size: 11.5px; color: var(--ink-2); line-height: 1.55;
}
.pchip b { font-size: 13.5px; color: var(--ink); }
.pchip .pd {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin: 0 4px 0 2px; vertical-align: baseline;
}
/* ── insight nuggets: computed from the window's data, they change as
      the data does and vanish when their evidence does ── */
.nuggets { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; margin-bottom: 18px; }
/* where a surfaced signal comes from (Overview pulls one from each tab) */
.ntag { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-right: 8px; }
.nugget {
  display: flex; gap: 13px; align-items: flex-start;
  background: linear-gradient(135deg, #fffaf7, #fdeade);
  border: 1px solid #f0a883; border-radius: var(--radius);
  padding: 15px 17px; box-shadow: var(--shadow);
}
.nugget .nick {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; display: flex; align-items: center;
  justify-content: center;
}
.nugget h4 { font-size: 13px; font-weight: 700; color: #a34e12; margin: 1px 0 3px; }
.nugget p { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.nugget p b { color: var(--ink); }

/* hoverable ⓘ — context that shouldn't spend screen space */
.info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; margin-left: 4px;
  border: 1.5px solid var(--muted); color: var(--muted);
  font-size: 11px; font-weight: 650; font-style: normal; cursor: help;
  vertical-align: text-bottom;
}
.info:hover { border-color: var(--accent); color: var(--accent); }
.info .tip {
  display: none; position: absolute; top: calc(100% + 9px); left: -12px;
  width: 380px; max-width: 82vw; z-index: 40; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 9px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  font-size: 12px; font-weight: 400; color: var(--ink-2); line-height: 1.55; text-align: left;
}
.info .tip b { color: var(--ink); }
.info .tip code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.info:hover .tip { display: block; }
/* tips on right-hand cards open leftwards so they stay on screen */
.grid-2 > .card:last-child .info .tip { left: auto; right: -12px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-2.wide-left { grid-template-columns: 3fr 2fr; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px 18px 12px; margin-bottom: 16px;
}
.card h3 { font-size: 14.5px; font-weight: 650; margin-bottom: 10px; }
.card h3 .muted { color: var(--muted); font-weight: 450; font-size: 12px; }

.chart { height: 320px; }
.chart.tall { height: 356px; }
/* the Facilities page carries a signal strip above its two charts; a lower
   minimum keeps it on one 900px screen when a signal fires (charts still grow) */
#page-facilities .chart { height: 280px; }

/* ── KPI cards ──────────────────────────────────────── */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 14px; }
/* reserve the row's height before data lands so the cards below don't jump */
.kpi-row:empty { min-height: 92px; }
.kpi {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 13px 16px; position: relative;
}
.kpi .kico {
  position: absolute; top: 13px; right: 13px; width: 30px; height: 30px;
  border-radius: 8px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
/* the card's ⓘ: hover the icon for what the number counts. Same popout as
   the chart tips, opening leftwards from the icon so the rightmost card
   stays on screen */
.kpi .kico.has-tip { cursor: help; }
.kpi .kico.has-tip:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.kpi .kico .tip {
  display: none; position: absolute; top: calc(100% + 9px); right: -4px;
  width: 320px; max-width: 82vw; z-index: 40; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 9px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  font-size: 12px; font-weight: 400; color: var(--ink-2); line-height: 1.55; text-align: left;
}
.kpi .kico .tip b { color: var(--ink); }
.kpi .kico:hover .tip { display: block; }
.kpi:hover { z-index: 5; }
.ai-fav { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 9px; }
.ai-fav.dim { filter: grayscale(1); opacity: .5; }
.kpi .t { font-size: 12px; color: var(--ink-2); font-weight: 550; }
.kpi .v { font-size: 25px; font-weight: 700; color: var(--accent); margin: 3px 0 2px; }
.kpi .d { font-size: 12px; }
.kpi .d.up { color: var(--good); }
.kpi .d.down { color: var(--bad); }
.kpi .d.flat, .kpi .s { color: var(--muted); font-size: 11.5px; }

/* in-card table controls */
.tbl-search, .tbl-filter {
  border: 1px solid var(--grid); border-radius: 7px; background: var(--surface);
  color: var(--ink-2); font-size: 12px; font-weight: 550; padding: 5px 9px;
  font-family: inherit;
}
.tbl-search { margin-left: auto; width: 160px; }
.tbl-search:hover, .tbl-filter:hover { border-color: var(--accent); }
/* the sources table owns its scroll so the page never does */
/* the source table gets the height the KPIs and any signal row leave it;
   --sig-h is the measured height of #sources-nuggets, set when it renders */
.table-wrap.src-table { max-height: max(200px, calc(100vh - 352px - var(--sig-h, 0px))); }
.nuggets:empty { display: none; }

/* ── table ──────────────────────────────────────────── */
/* ~10 rows visible, the rest scroll inside the table under a sticky header */
.table-wrap { overflow-x: auto; overflow-y: auto; max-height: 460px; }
/* the campaign table fits its page whole — no internal scroller */
#camp-table-wrap { max-height: none; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-weight: 650; color: var(--ink-2); font-size: 12.5px;
  padding: 8px 12px; border-bottom: 2px solid var(--grid); white-space: nowrap;
  cursor: pointer; user-select: none;
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td { padding: 8px 12px; border-bottom: 1px solid var(--grid); }
tr:hover td { background: var(--accent-soft); }
.status { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.status.PAUSED { background: #fdf1e2; color: #9a6a1b; }
.status.COMPLETED { background: #e7f4e7; color: var(--good); }
.status.ACTIVE, .status.START { background: var(--accent-soft); color: var(--accent); }
.status.STOPPED, .status.DRAFTED { background: #f0efec; color: var(--muted); }

.banner {
  background: #fdf1e2; border: 1px solid #f3ddb5; color: #7a5410;
  border-radius: var(--radius); padding: 12px 16px; font-size: 13px; margin-bottom: 18px;
}

/* ── social tab ─────────────────────────────────────── */
.grid-2.wide-right { grid-template-columns: 2fr 3fr; }
/* the table takes whatever height its (stretched) card gives it, never the reverse */
.posts-table { flex: 1 1 0; min-height: 180px; max-height: none; }
.posts-table td { vertical-align: top; }
.posts-table .net { white-space: nowrap; }
.posts-table .net .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
/* fixed layout: the numeric columns take a set width, the post text takes
   whatever is left and ellipsises — so the table can never push the page
   wider than the window. Cards may shrink below their content's width. */
.grid-2 > .card { min-width: 0; }
.posts-table table { table-layout: fixed; width: 100%; }
.posts-table th { font-size: 11px; vertical-align: bottom; line-height: 1.2; }
.posts-table th.num, .posts-table td.num { padding-left: 8px; padding-right: 8px; }
.posts-table th.num { width: 82px; }   /* fits "Interactions" at 11px */
.posts-table th.w-date { width: 66px; }
.posts-table th.w-net { width: 96px; }
.posts-table td.post { max-width: none; }
.posts-table .post a { color: var(--ink); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posts-table .post a:hover { color: var(--accent); }
.posts-table .post .kind { font-size: 11px; color: var(--muted); text-transform: lowercase; }
.posts-table .dim { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* ── upload page: the weekly Cubby exports ─────────── */
.drop {
  border: 2px dashed var(--grid); border-radius: 12px; padding: 34px 20px; margin: 4px 0 12px;
  text-align: center; color: var(--ink-2); background: var(--bg); cursor: pointer; transition: all .15s;
}
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop .big { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.drop .small { font-size: 12.5px; color: var(--muted); }
.btn.primary {
  width: 100%; padding: 11px; border: none; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn.primary:disabled { opacity: .5; cursor: default; }
.up-results { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.up-results .ok { color: var(--good); }
.up-results .bad { color: var(--bad); }
.up-results .warn { color: #a34e12; padding-left: 18px; }
.upchip { display: inline-block; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.upchip.ok { background: #e7f4e7; color: var(--good); }
.upchip.due { background: #fdf0e6; color: #a34e12; }
.upchip.never { background: #f0efec; color: var(--muted); }
.upchip.stale { background: #fdecec; color: var(--bad); }
/* five squares in the card header, one per report, filling in as files land */
.upsquares { display: inline-flex; gap: 3px; vertical-align: -1px; margin-right: 4px; }
.upsq { width: 9px; height: 9px; border-radius: 2px; background: #e6e4dd; }
.upsq.uploaded { background: var(--good); }
.upsq.due { background: #eda100; }
.upsq.stale { background: var(--bad); }
#tbl-upload-status td { vertical-align: top; }
#tbl-upload-status .rep b { display: block; }
#tbl-upload-status .rep .dim, #tbl-upload-status .last .dim { font-size: 11.5px; color: var(--muted); }

/* the in-app SOP: scrolls inside its card so the page stays one screen */
.up-sop { overflow-y: auto; max-height: calc(100vh - 236px); padding-right: 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.up-sop h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; }
.up-sop h4:first-child { margin-top: 2px; }
.up-sop p { margin: 0 0 8px; }
.up-sop ul, .up-sop ol { margin: 0 0 8px 18px; padding: 0; }
.up-sop li { margin-bottom: 5px; }
.up-sop .sop-reports li { margin-bottom: 10px; }
.up-sop b { color: var(--ink); }
.up-sop code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.up-sop .sop-table { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: 12.5px; }
.up-sop .sop-table th { text-align: left; vertical-align: top; width: 34%; padding: 6px 10px 6px 0; font-weight: 650; color: var(--ink); position: static; background: none; border-bottom: 1px solid var(--grid); font-size: 12.5px; cursor: default; white-space: normal; }
.up-sop .sop-table td { padding: 6px 0; border-bottom: 1px solid var(--grid); }