/* Talentgum Analytics Studio — Phase 5.5 design system.
   SIMPLE BUSINESS UI: light, calm, generous spacing. The normal screen is a
   builder strip + a big readable report. The technical surface of Phases 3–5
   (hierarchy/matrix controls, replay scenario, view JSON, targets) still works
   — it lives inside Advanced Settings and keeps its own class names so the
   proven renderers stay untouched. */

:root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --ink: #1e2438;
  --ink-2: #555d78;
  --ink-3: #8b92ab;
  --line: #e3e7f0;
  --line-soft: #edf0f7;

  --brand: #0f766e;          /* teal — primary actions */
  --brand-soft: #e6f5f3;
  --accent: #7c6cf6;         /* violet — selection */
  --accent-soft: #efedfe;

  --violet: #7c6cf6;         /* marketing family */
  --amber: #d98a12;          /* time family */
  --teal: #14b8a6;           /* product family */
  --blue: #3d7bfd;           /* geo family */
  --rose: #e9496d;           /* lead family */
  --purple: #a855f7;         /* cohort family */

  --ok: #128a5e;
  --warn-bg: #fff7e8;
  --warn-line: #f0dcae;
  --err-bg: #fdeef1;
  --err-line: #f3c1cc;
  --err-ink: #a3123c;

  --radius: 12px;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(30, 36, 56, .05), 0 4px 14px rgba(30, 36, 56, .04);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
.hidden { display: none !important; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 28px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 34px; height: 34px; }
.brand-text h1 {
  margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .1px;
  color: var(--ink);
}
.brand-sub { font-size: 11.5px; color: var(--ink-3); }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.run-state { font-size: 12px; color: var(--amber); min-width: 70px; }

/* buttons */
.btn {
  font: inherit; font-size: 12.5px; padding: 7px 14px; border-radius: 9px;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { filter: brightness(1.06); }
.btn.ghost {
  background: var(--card); color: var(--ink-2); border-color: var(--line);
}
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); }
.linklike {
  background: none; border: none; color: var(--brand); cursor: pointer;
  font: inherit; padding: 2px 4px; text-decoration: underline dotted;
}

/* ---------------------------------------------------------------- builder */
.builder {
  padding: 18px 28px 6px;
  position: sticky; top: 59px; z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.builder-grid {
  display: grid; grid-template-columns: 1.35fr 1fr 1.2fr 1.35fr 1.1fr;
  gap: 12px; align-items: start;
}
.bcard-host { min-width: 0; }
.bcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 12px; position: relative;
  min-height: 86px;
}
.bcard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.bcard-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.bcard-add {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--brand);
  background: var(--brand-soft); border: 1px solid transparent; cursor: pointer;
  border-radius: 99px; padding: 3px 11px; white-space: nowrap;
}
.bcard-add:hover { border-color: var(--brand); }
.bcard-body { display: flex; flex-direction: column; gap: 5px; }
.bcard-empty { font-size: 12px; color: var(--ink-3); padding: 3px 2px 6px; }

/* compact horizontal chips (§10 of the 5.5B brief) */
.entry-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; }
.entry-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 99px;
  padding: 2px 3px 2px 8px;
}
.entry-chip .e-label { font-size: 12px; max-width: 130px; }
.entry-chip .icon-btn { width: 18px; height: 18px; font-size: 10px; }

.place-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
.place-label { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.place-seg { flex: 1; }
.place-seg .seg-btn { font-size: 11.5px; padding: 3px 6px; }
.e-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.e-dot.e-metric { background: var(--brand); }
.fam-time { background: var(--amber); }
.fam-product { background: var(--teal); }
.fam-marketing { background: var(--violet); }
.fam-geo { background: var(--blue); }
.fam-lead { background: var(--rose); }
.fam-cohort { background: var(--purple); }
.e-label {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.e-btns { display: flex; gap: 2px; }
.icon-btn {
  font: inherit; width: 21px; height: 21px; line-height: 1; font-size: 11px;
  border-radius: 6px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink-2); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; flex: none;
}
.icon-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-btn.danger:hover:not(:disabled) { border-color: var(--rose); color: var(--rose); }

/* picker dropdown */
.bmenu {
  position: absolute; left: 8px; right: 8px; top: calc(100% - 4px);
  z-index: 60; max-height: 380px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(30, 36, 56, .14); padding: 8px;
}
.bmenu-group {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin: 8px 4px 3px; font-weight: 700;
}
.bmenu-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink);
}
.bmenu-item:hover:not(.disabled) { background: var(--accent-soft); }
.bmenu-item.disabled { color: var(--ink-3); cursor: not-allowed; }
.bmenu-item-metric .bmenu-label { font-weight: 600; }
.bmenu-reason { font-size: 11px; color: var(--amber); margin-left: auto; }
.bmenu-close { display: block; margin: 6px auto 0; }

/* period card */
.period-wrap { display: flex; flex-direction: column; gap: 6px; }
.period-select, .free-values, .period-range input {
  width: 100%; font: inherit; font-size: 13px; padding: 6px 9px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink);
}
.period-range { display: flex; gap: 6px; }
.period-caption { font-size: 11.5px; color: var(--ink-3); }

/* run / clear */
.builder-actions {
  display: flex; align-items: center; gap: 10px; padding: 12px 2px 14px;
}
.btn-run {
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  padding: 9px 26px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
}
.btn-run:hover:not(:disabled) { filter: brightness(1.07); }
.btn-run:disabled { opacity: .45; cursor: not-allowed; }
.btn-clear {
  font: inherit; font-size: 12.5px; padding: 8px 16px; border-radius: 10px;
  cursor: pointer; background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn-clear:hover { border-color: var(--rose); color: var(--rose); }
.builder-hint { font-size: 12px; color: var(--amber); }

/* ---------------------------------------------------------- advanced panel */
.advanced {
  margin: 0 28px 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px 18px; box-shadow: var(--shadow);
}
.adv-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.adv-sub { font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.adv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.adv-cell { min-width: 0; }
.adv-cell-wide { grid-column: 1 / -1; }
.adv-side-title {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.adv-session { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.adv-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.adapter-chip {
  font-size: 11px; padding: 3px 10px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--bg);
}
.scenario-select {
  font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--ink); max-width: 100%;
}

/* legacy control blocks (Advanced) — restyled light */
.side-section { margin-bottom: 14px; }
.side-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.side-title {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.side-hint { font-size: 10.5px; color: var(--ink-3); }
.ctl { margin-bottom: 10px; }
.ctl-label {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-3); margin-bottom: 4px;
}
.ctl-row { display: flex; gap: 6px; }
.ctl-row > * { flex: 1; min-width: 0; }
.ctl-note { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.segmented {
  display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
}
.seg-btn {
  flex: 1; font: inherit; font-size: 12px; padding: 5px 4px; border: none;
  background: var(--card); color: var(--ink-2); cursor: pointer;
}
.seg-btn.active { background: var(--accent); color: #fff; font-weight: 600; }
.display-controls .display-btns { display: flex; gap: 6px; margin-top: 8px; }
.display-controls .display-btns .btn { flex: 1; padding: 5px 4px; font-size: 11px; }
.display-note { font-size: 10.5px; color: var(--amber); margin-top: 6px; }
.advanced select, .advanced input, .advanced input.free-values {
  font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  max-width: 100%;
}

/* rail + metric lists inside Advanced */
.rail-rows { display: flex; flex-direction: column; gap: 2px; }
.rail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 8px;
}
.rail-chip { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rail-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rail-state {
  font-size: 10px; color: var(--ink-3); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 99px; white-space: nowrap;
}
.rail-btns { display: flex; gap: 3px; }
.rail-empty { font-size: 11.5px; color: var(--ink-3); padding: 6px 2px; }
.add-menu {
  position: relative; z-index: 30; margin: 6px 0; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.add-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin: 6px 4px 2px;
}
.add-item {
  display: flex; align-items: center; gap: 7px; padding: 5px 6px;
  border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--ink);
}
.add-item:hover:not(.disabled) { background: var(--accent-soft); }
.add-item.disabled { color: var(--ink-3); cursor: not-allowed; }
.add-reason { font-size: 10px; color: var(--amber); margin-left: auto; }
.fam-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.fam-chip {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 99px;
  padding: 0 6px; white-space: nowrap;
}
.insert-slot { display: flex; justify-content: center; height: 14px; }
.insert-btn {
  visibility: hidden; font-size: 10px; padding: 0 8px; height: 14px;
  border-radius: 99px; border: 1px dashed var(--ink-3); background: var(--card);
  color: var(--ink-3); cursor: pointer;
}
.insert-slot:hover .insert-btn { visibility: visible; }

/* filters inside Advanced */
.filter-row { margin-bottom: 8px; }
.filter-head { display: flex; justify-content: space-between; align-items: center; }
.filter-dim { font-size: 12px; font-weight: 650; color: var(--ink); }
.chip-set { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip {
  font: inherit; font-size: 11.5px; padding: 2px 9px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  cursor: pointer;
}
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.filter-add { margin-top: 6px; }

/* filter blocks (builder card) */
.filter-block { border-top: 1px dashed var(--line-soft); padding-top: 6px; }

/* ---- runtime "Filter results" bar (2026-09-17): Dates + Campaigns first,
   everything else behind the More expander ------------------------------- */
.filter-dates .dates-row { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-top: 4px; }
.filter-dates input[type="date"] { border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12px;
  color: var(--ink-2); background: #fff; }
.dates-arrow { color: var(--ink-3); font-weight: 600; }
.dates-current { font-size: 11.5px; color: var(--ink-3); font-weight: 550; }
.dates-reset { margin-left: 2px; }
.filter-dates .dates-note { margin-top: 4px; }
.more-wrap .more-toggle { border: none; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 650; color: var(--brand);
  padding: 2px 0; }
.more-wrap .more-toggle:hover { text-decoration: underline; }
.more-body { margin-top: 6px; }
.more-body .more-add { margin: 2px 0 8px; }
.rf-footer { display: flex; gap: 14px; justify-content: flex-end;
  border-top: 1px dashed var(--line-soft); padding-top: 8px; margin-top: 4px; }
.filter-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.filter-block-title { font-size: 12px; font-weight: 650; color: var(--ink); }
.filter-block .free-values { font-size: 12px; padding: 4px 8px; margin-top: 4px; }

/* metric chips inside Advanced */
.metric-selected { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.metric-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 8px;
}
.metric-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.metric-tag {
  font-size: 9px; color: var(--ink-3); border: 1px solid var(--line);
  padding: 0 5px; border-radius: 99px;
}
.metric-btns { display: flex; gap: 3px; }
.metric-avail {
  max-height: 300px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 4px;
}
.metric-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 7px;
  border-radius: 7px; cursor: pointer; font-size: 12px; color: var(--ink-2);
}
.metric-item:hover:not(.disabled) { background: var(--accent-soft); }
.metric-item.active { color: var(--accent); background: var(--accent-soft); }
.metric-item.disabled { color: var(--ink-3); cursor: not-allowed; }

/* ------------------------------------------------------------------ report */
.report { padding: 14px 28px 60px; min-width: 0; }

.report-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 9px 14px; margin-bottom: 12px;
  font-size: 12.5px; color: var(--ink-2);
}
.report-bar .rb-note { color: var(--ink-2); }
.report-bar .rb-note strong { color: var(--ink); font-weight: 650; }
.report-bar .rb-tag {
  background: var(--brand-soft); color: var(--brand); font-weight: 650;
  border-radius: 99px; padding: 2px 10px; font-size: 11.5px; white-space: nowrap;
}
.rb-spacer { flex: 1; }
.rb-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rb-toggle input { accent-color: var(--brand); width: 14px; height: 14px; }
.rb-btn {
  font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  cursor: pointer;
}
.rb-btn:hover { border-color: var(--brand); color: var(--brand); }

/* empty state */
.empty-state {
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 70px 30px; text-align: center; color: var(--ink-2);
}
.empty-state h2 { margin: 0 0 8px; font-size: 19px; color: var(--ink); }
.empty-state p { margin: 4px 0; font-size: 13.5px; }
.empty-state .es-example {
  margin-top: 18px; display: inline-block; text-align: left;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 12px 18px; font-size: 12.5px; color: var(--ink-2);
}
.empty-state .es-example b { color: var(--ink); font-weight: 650; }

/* view + saved views + target panels */
.views-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 14px;
}
.views-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px;
}
.view-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 14px;
}
/* run-time filters panel (owner, 2026-09-10) — same card language, sits
   directly above the results so a finished report can be re-filtered */
.filters-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 14px;
}
.filters-panel .bcard {
  border: none; box-shadow: none; padding: 0; background: transparent;
}
.filters-panel .bcard-head { margin-bottom: 6px; }
.view-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: var(--ink-2); margin-bottom: 8px; gap: 8px;
}
.view-panel textarea {
  width: 100%; font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; color: var(--ink); background: #fbfcff;
}
.target-panel-host {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 12px;
}
.target-panel-host.hidden { display: none; }
.target-form .ctl { margin-bottom: 8px; }
.target-form input, .target-form select {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 8px; color: var(--ink); font: inherit;
}
.rows-editor { border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.rows-head, .rows-row {
  display: grid; grid-template-columns: 1.4fr 1.4fr .7fr 28px; gap: 6px;
  margin-bottom: 4px; align-items: center;
}
.rows-head { font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); }
.rows-row input { width: 100%; box-sizing: border-box; }
.target-verdict { margin: 8px 0; font-size: 12px; }
.target-verdict.good { color: var(--ok); }
.target-verdict.bad { color: #c0264c; white-space: pre-wrap; }
.view-name { text-align: left; flex: 1; }
.icon-btn.star.on { color: var(--amber); }
.rail-row .linklike.view-name { background: none; border: none; cursor: pointer;
  padding: 2px 4px; color: var(--ink); }

/* ----------------------------------------------------------- banners */
.error-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--err-bg); border: 1px solid var(--err-line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
}
.error-code {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: #fff;
  background: var(--err-ink); border-radius: 6px; padding: 3px 8px;
  white-space: nowrap; margin-top: 1px;
}
.error-title { font-weight: 650; color: var(--err-ink); }
.error-hint { color: var(--ink-2); margin-top: 2px; }
.error-path { color: var(--ink-3); font-size: 11px; margin-top: 2px; }

.warnings {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px;
  max-height: 130px; overflow-y: auto;
}
.warnings.empty { display: none; }
.warn-title { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #946a12; margin-bottom: 4px; }
.warn-line { font-size: 11.5px; color: #7a5b14; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ tables */
.result-host { min-height: 200px; }
.table-scroll {
  overflow: auto; max-height: calc(100vh - 210px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.hier-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; }
.hier-table thead th {
  position: sticky; top: 0; z-index: 5;
  background: #f7f8fc; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); text-align: right; padding: 9px 14px; white-space: nowrap;
}
.hier-table thead th.hier-head { text-align: left; z-index: 6; }
.hier-head-inner { display: flex; align-items: center; gap: 6px; }
.hier-table td {
  padding: 6px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px;
  white-space: nowrap;
}
td.hier-cell {
  position: sticky; left: 0; z-index: 4; background: var(--card);
  text-align: left; min-width: 300px; max-width: 430px;
  padding-left: calc(12px + var(--indent, 0) * 18px);
  font-weight: 600; color: var(--ink);
}
tr.branch > td.hier-cell { background: #f8f9fd; }
tr.depth-1 > td.hier-cell { background: #f1f3fa; font-weight: 700; }
tr:hover > td, tr:hover > td.hier-cell { background: #f2f5ff !important; }
td.cell-metric { text-align: right; font-variant-numeric: tabular-nums; }
tr.leaf td.cell-metric { color: var(--ink); }
tr.branch td.cell-metric { font-weight: 650; }
.null-value { color: #b6bbcf; }
td.target-unavailable .null-value { color: var(--amber); }
.ta-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); margin-right: 5px; vertical-align: 1px;
}
.chevron {
  font: inherit; border: none; background: none; cursor: pointer;
  color: var(--brand); width: 18px; padding: 0; font-size: 12px;
}
.chevron-spacer { display: inline-block; width: 18px; }
.child-count { margin-left: 7px; font-size: 10.5px; color: var(--ink-3); font-weight: 500; }
.more-row td { padding: 4px 14px; background: #f8f9fd; }

/* ---- single label column + drill (2026-09-13 owner redesign) --------------
   ONE "Rows" column in the layers table: depth is indentation, not pad
   columns. Scoped under .layers-table — the Advanced matrix keeps its own
   multi-column label grid. */
.mrows-table.layers-table .rowlab-head.rows-col-head { text-align: left;
  min-width: 400px; max-width: 520px; }
.rows-col-main { font-weight: 700; }
.rows-col-crumb { font-weight: 500; color: var(--ink-3); font-size: 11px; }
.mrows-table.layers-table .rowlab-cell { left: 0;
  min-width: 400px; max-width: 520px; }
/* NOTE: do NOT set position here — the label cell must keep the base rule's
   position:sticky (it pins at left:0 while the table scrolls). An earlier
   `position:relative` silently un-pinned it and the label column scrolled
   out of view, leaving only metric numbers at the left edge (owner report
   2026-09-13). Sticky also forms the containing block for the absolute rail. */
.layers-table td.rowlab-drill {
  padding-left: calc(10px + var(--d, 0) * 24px);
  white-space: nowrap;
}
.mrows-table.layers-table td.rowlab-drill .lab-text {
  display: inline-block; max-width: 390px; overflow: hidden;
  text-overflow: ellipsis; vertical-align: bottom;
}
/* 2026-09-17: the label column was 320-380px with a 250px text cap — after
   the depth indent + disclosure button + dim tag consumed ~130px, most real
   campaign names (25-45 chars) truncated to "CAMPAIGN…" and the owner could
   not read them. 400-520px column + 390px text covers every live campaign
   name whole; deeper-than-3 levels and pathological names still ellipsize
   WITH the full value in the cell tooltip (fillLabel). */
.lab-rail { position: absolute; top: 7px; bottom: 7px; width: 2px;
  border-radius: 2px; left: calc(var(--d, 0) * 24px - 5px); background: var(--line); }
.lab-rail.r2 { background: #cfe9e5; }
.lab-rail.r3 { background: #e4e0fd; }
.dimtag { font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--ink-3); text-transform: uppercase; margin-right: 7px; vertical-align: 1px; }
button.disc { width: 19px; height: 19px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; font-size: 13px; font-weight: 700;
  line-height: 1; padding: 0; margin-right: 8px; vertical-align: -3px; }
button.disc:hover { border-color: var(--brand); background: var(--brand-soft); }
.mrows-table.layers-table .mrows-mlabel.after-rows-col { left: 520px; }

/* ---- "Other sources" bucket (2026-09-13) -------------------------------- */
tr.others-row td { background: var(--warn-bg); }
tr.others-row td.rowlab-cell {
  color: #8a5a00; font-weight: 700; position: sticky; left: 0; z-index: 2; }
tr.others-row td.total-col, tr.others-row td.m-cell { background: var(--warn-bg); }
.others-why { margin-left: 8px; font-size: 11px; font-weight: 500;
  color: #a97b1f; cursor: help; border-bottom: 1px dotted #c9a75c; }
tr.other-row td.rowlab-cell { color: var(--ink-2); }
.conflict-chip { display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; border-radius: 99px; padding: 1.5px 8px;
  margin-left: 8px; vertical-align: 1px; }
.conflict-utm_vs_name  { background: #fdeef1; color: #a3123c; }
.conflict-no_campaign  { background: #fff7e8; color: #8a5a00; }
.conflict-not_in_ads   { background: #efedfe; color: #5b4bc4; }
.conflict-non_ad_source{ background: #e8f1ff; color: #1d5fd2; }
.render-guard {
  position: sticky; left: 0; padding: 8px 14px; font-size: 11.5px;
  color: #946a12; background: var(--warn-bg); border-top: 1px solid var(--warn-line);
}

/* status bar (simple words only) */
.statusbar {
  position: sticky; bottom: 0; display: flex; gap: 8px; flex-wrap: wrap;
  padding: 8px 2px; background: var(--bg); border-top: 1px solid var(--line-soft);
}
.stat-chip {
  display: inline-flex; gap: 6px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 99px;
  padding: 3px 11px; font-size: 11.5px;
}
.stat-k { color: var(--ink-3); }
.stat-v { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-chip.replay { border-color: var(--amber); }
.stat-chip.replay .stat-v { color: #946a12; }
.stat-chip.demo { border-color: var(--amber); background: var(--warn-bg); }
.stat-chip.demo .stat-k { color: #946a12; font-weight: 700; }
.stat-chip.demo .stat-v { color: #946a12; }
.stat-chip.live { border-color: var(--brand); background: var(--brand-soft); }
.stat-chip.live .stat-k { color: var(--brand); font-weight: 700; }
.stat-chip.live .stat-v { color: var(--brand); }

/* ================================================ metrics-as-rows report */
.mrows-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.mrows-table th, .mrows-table td {
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 6px 12px; text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; font-size: 13px;
}
.mrows-table thead tr { position: sticky; z-index: 3; }
.mrows-table thead tr.band-0 { top: 0; }
.mrows-table thead tr.band-1 { top: 34px; }
.mrows-table thead tr.band-2 { top: 68px; }
.mrows-table thead th {
  background: #f7f8fc; font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-2); text-align: center; font-weight: 700;
}
.mrows-table .rowlab-head, .mrows-table .rowlab-cell {
  position: sticky; left: calc(var(--label-idx, 0) * 150px);
  min-width: 140px; max-width: 210px; overflow: hidden; text-overflow: ellipsis;
  text-align: left; background: var(--card); z-index: 2;
}
.mrows-table .rowlab-head { z-index: 5; background: #f7f8fc; }
.mrows-table .rowlab-cell { font-size: 13px; font-weight: 650; color: var(--ink); }
.mrows-table .mrows-mlabel {
  position: sticky; left: calc(var(--label-idx, 0) * 150px);
  min-width: 140px; max-width: 210px; overflow: hidden; text-overflow: ellipsis;
  text-align: left; background: #fbfcfe; z-index: 2;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.mrows-table tr:hover .mrows-mlabel, .mrows-table tr:hover .rowlab-cell { background: #f2f5ff; }
.mrows-table .colleaf-head { font-weight: 700; color: var(--ink); }
.mrows-table .layers-lab { font-weight: 650; }
.mrows-table tr.branch-row > td.layers-lab {
  background: #f8f9fd; font-weight: 700;
}
.mrows-table td.layers-lab.pad { background: #fbfcfe; }
.mrows-table .mrows-mlabel-head, .mrows-table .total-head { background: #f7f8fc; }
.mrows-table .mrows-mlabel-head {
  position: sticky; left: calc(var(--label-idx, 0) * 150px);
  min-width: 140px; max-width: 210px; text-align: left; z-index: 5;
}
.colleaf-tag {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .05em;
  color: var(--brand); text-transform: uppercase; margin-top: 1px;
}
.mrows-table .metric-head.ghost, .mrows-table .colleaf-head.ghost { opacity: .5; font-style: italic; }
.mrows-table td.group-col { background: #f8f9fd; }
.mrows-table td.st-zero .cell-value { color: var(--ink-2); }
.cell-change {
  font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  margin-top: 1px; font-weight: 600;
}
.mrows-table td.total-col, .mrows-table th.total-col {
  border-left: 1px solid var(--line); background: #f7f8fc; font-weight: 650;
}
.mrows-table tr.totals-row td { font-weight: 700; border-top: 2px solid var(--line); }
.mrows-table tr.totals-row .mrows-mlabel { background: #f7f8fc; }
.mrows-table td.grand-total { background: #eff4f3; }

/* =================================================== matrix mode (Advanced) */
.matrix-scroll { overflow: auto; max-height: calc(100vh - 210px); }
.matrix-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.matrix-table th, .matrix-table td {
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 4px 10px; text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; font-size: 12.5px;
}
.matrix-table thead tr { position: sticky; z-index: 3; }
.matrix-table thead tr.band-0 { top: 0; }
.matrix-table thead tr.band-1 { top: 30px; }
.matrix-table thead tr.band-2 { top: 60px; }
.matrix-table thead tr.band-3 { top: 90px; }
.matrix-table thead th {
  background: #f7f8fc; font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2); text-align: center;
}
.matrix-table .rowlab-head, .matrix-table .rowlab-cell {
  position: sticky; left: calc(var(--label-idx, 0) * 140px);
  min-width: 130px; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  text-align: left; background: var(--card); z-index: 2;
}
.matrix-table .rowlab-head { z-index: 5; background: #f7f8fc; }
.matrix-table .rowlab-cell { font-size: 12px; }
.matrix-table .metric-head.ghost { opacity: .45; font-style: italic; }
.matrix-table td.group-col { background: #f8f9fd; }
.matrix-table td.st-zero { color: var(--ink-2); }
.matrix-table td.st-unavailable .ta-dot { display: inline-block; margin-right: 4px; }
.matrix-table td.total-col, .matrix-table th.total-col {
  border-left: 2px solid var(--line); background: #f7f8fc; font-weight: 600;
}
.matrix-table tr.totals-row td { font-weight: 700; border-top: 2px solid var(--line); }
.matrix-table td.grand-total { background: #eff4f3; }
#colrail:empty { display: none; }

@media (max-width: 1180px) {
  .builder-grid { grid-template-columns: repeat(2, 1fr); }
  .adv-grid { grid-template-columns: 1fr; }
}

/* ================================= Final polish: collapse + sort + shares */
.builder-summary {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 28px 0; padding: 10px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.builder-summary .bs-text {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.builder-summary .bs-edit { flex: none; }

body.builder-collapsed .builder { display: none; }
body.builder-collapsed .table-scroll,
body.builder-collapsed .matrix-scroll { max-height: calc(100vh - 150px); }

.rb-select {
  font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.share-head {
  font-weight: 600; color: var(--brand);
  border-left: 1px dashed var(--line);
}
.mrows-table .share-mlabel { color: var(--brand); font-weight: 600; }
.mrows-table tr.share-row > td { background: #f6fbfa; }
.mrows-table td.share-cell { border-left: 1px dashed var(--line); }

/* ================================= Phase 6: Google Sheets export */
.export-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 28px 0; padding: 9px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.export-bar.hidden { display: none !important; }
.btn-export {
  font: inherit; font-size: 12.5px; font-weight: 650; padding: 6px 14px;
  border-radius: 9px; cursor: pointer;
  border: 1px solid var(--ok); background: #e8f5ef; color: var(--ok);
}
.btn-export:hover:not(:disabled) { filter: brightness(1.04); }
.btn-export:disabled { opacity: .5; cursor: wait; }
.export-state { font-size: 12px; color: var(--ink-2); }
.export-state.ok { color: var(--ok); font-weight: 600; }
.export-state.error { color: var(--err-ink); font-weight: 600; }
.export-link { font-size: 12.5px; color: var(--brand); font-weight: 600; }

/* live campaign option search (post-launch §A) */
.filter-block .campaign-search { width: 100%; }
.campaign-options { position: relative; margin-top: 6px; max-height: 220px;
  overflow: auto; border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  background: #fff; box-shadow: 0 8px 22px -12px rgba(16, 24, 40, .25); }
.campaign-options .bmenu-item { padding: 8px 10px; cursor: pointer; }
.campaign-options .bmenu-item:hover { background: #f3f4f6; }
.campaign-options .bmenu-reason { float: right; color: #6b7280; font-size: 11px; }


/* ---- 2026-09-06 reliability closure: explicit support states ---- */
.e-badge.e-unsupported { font-size: 10.5px; font-weight: 650; color: #8a3b00;
  background: #ffe9d6; border: 1px solid #f3c39a; border-radius: 999px; padding: 1px 7px;
  margin-left: 6px; white-space: nowrap; }
.views-error { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: #fdecec;
  border: 1px solid #f2b8b8; color: #8b1a1a; font-size: 12.5px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; }
.views-error .views-signin { font-weight: 650; color: #8b1a1a; text-decoration: underline; }
.views-unreadable { font-size: 11.5px; color: var(--ink-3); padding: 4px 2px; }
.mrows-table th.unserved-head, .matrix-table th.unserved-head { background: #fff4e8; color: #8a3b00; }
.mrows-table th.unserved-head .unserved-tag, .matrix-table th.unserved-head .unserved-tag {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.report-bar .rb-note.rb-clamped { color: #8a3b00; font-weight: 600; }
.report-bar .rb-note.rb-unserved { color: #8a3b00; }
.report-bar .rb-note.rb-provenance { cursor: help; color: var(--ink-3); border-bottom: 1px dotted var(--ink-3); }
.btn.needs-signin { color: #8a3b00; border-color: #f3c39a; background: #fff4e8; }
.views-signedout { font-size: 12px; color: var(--ink-2); padding: 6px 2px; display: flex; gap: 8px; align-items: center; }


/* ---- Excel/pivot metric blocks (owner requirement, 2026-09-07) ------------
   Group columns by metric ON: each metric owns a block of period columns.
   Thin rules INSIDE a block (the default cell borders); one strong rule
   BETWEEN blocks, drawn once as the block's right edge so adjacent blocks
   never double up; the same edge continues through the metric header band,
   the date header band, every body row and the Total row (identical cellCols
   indices, so the boundary is one straight line and header/body/total x
   positions stay within 1px). */
:root { --line-strong: #aab4cb; --mb-rule: 3px; }
.mrows-table th.mb-end, .mrows-table td.mb-end {
  border-right: var(--mb-rule) solid var(--line-strong);
}
.mrows-table thead th.group-head { border-bottom: 2px solid var(--line-strong); }
/* the pinned row-dimension boundary stays the strongest anchor on the left */
.mrows-table .rowlab-head:last-of-type, .mrows-table td.rowlab-cell.rowlab-last,
.mrows-table .mrows-mlabel-head, .mrows-table td.mrows-mlabel {
  border-right: 2px solid var(--line-strong);
}
.mrows-table tr.totals-row td.mb-end { border-right: var(--mb-rule) solid var(--line-strong); }
/* the Total block opens with the same single strong rule; inside it the
   per-metric rules stay thin, exactly like any other block */
.mrows-table th.mb-total, .mrows-table td.mb-total {
  border-left: var(--mb-rule) solid var(--line-strong);
}

/* Group columns by: Metric | Day | Week | Month */
.report-bar .rb-groupby { display: inline-flex; align-items: center; gap: 7px; }
.report-bar .rb-seg { height: 26px; }
.report-bar .rb-seg .seg-btn { font-size: 11.5px; padding: 2px 10px; }
/* a metric block's own Total column: bold, subtly shaded, part of its metric */
.mrows-table td.metric-total-col, .mrows-table th.metric-total-head {
  font-weight: 700; background: #f4f6fb;
}
.mrows-table td.metric-total-col.grand-total { background: #eff4f3; }
.mrows-table td.mb-total-col, .mrows-table th.mb-total-col {
  border-left: 2px solid var(--line);      /* separates Total from the periods */
}

/* the Google Sheet action lives in the header beside Saved Views / Save View;
   the tall standalone export bar is gone, so the report starts higher */
.topbar-right .export-state { font-size: 11.5px; color: var(--ink-2); }
.topbar-right .export-link { font-size: 11.5px; }

/* Workbook-layout export toggle (owner requirement 2026-09-07): always visible
   next to the export button when the current shape supports it, so the layout
   about to be produced is never a surprise. */
.export-opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted, #5a6070); cursor: pointer;
  margin-left: 10px; white-space: nowrap;
}
.export-opt input { cursor: pointer; }
.export-opt.hidden { display: none; }

/* ---------------------------------------------------------------- status toast
   Owner requirement 2026-09-07: "when we click run report, the status message
   running report is not visible so visiting viewers will get confused whether to
   wait or not ... make those status messages prominent and clearly visible".
   The topbar #run-state / #export-state spans are 11.5-12px and scroll away
   (Run Report sits below the builder), so every long-running action also raises
   this fixed toast. It never covers the report: it is pinned to the top centre,
   above everything, and clears itself on completion. */
.toast {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 22px; border-radius: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: .1px;
  color: #fff; background: #12224a;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 14px 40px -10px rgba(16, 24, 40, .55);
  max-width: min(92vw, 640px);
}
.toast.hidden { display: none; }
.toast .toast-text { white-space: normal; }
.toast.busy { background: #12224a; }
.toast.ok { background: #0f7b5f; }
.toast.error { background: #a32218; }
/* the spinner only exists while work is in flight */
.toast .toast-spinner { display: none; }
.toast.busy .toast-spinner {
  display: inline-block; width: 15px; height: 15px; flex: 0 0 15px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; border-radius: 50%;
  animation: toast-spin .8s linear infinite;
}
@keyframes toast-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .toast.busy .toast-spinner { animation: none; }
}

/* the inline topbar states stay as a secondary cue, but readable */
.topbar-right .export-state { font-size: 12.5px; font-weight: 600; }
.run-state { font-size: 12.5px; font-weight: 600; }


/* ---- compact plan reports (owner request, 2026-10-03) --------------------
   meta.ui.compactLabels: short column heads + tight cells so more of the report
   fits on one screen; the MTD-till-yesterday and Today blocks read as two
   tables (strong rule between them, tinted block heads). Display only. */
.mrows-table.compact-cols th, .mrows-table.compact-cols td { padding: 4px 6px; font-size: 12px; }
.mrows-table.compact-cols thead th { font-size: 10.5px; letter-spacing: 0; }
.mrows-table.compact-cols .rowlab-head, .mrows-table.compact-cols .rowlab-cell {
  min-width: 150px; max-width: 190px; }
.mrows-table.compact-cols th.mb-end, .mrows-table.compact-cols td.mb-end {
  border-right: 3px solid var(--line-strong); }
.mrows-table thead th.group-head.phase-mtd { background: #e8efff; color: #1f3a8a; font-size: 12.5px; }
.mrows-table thead th.group-head.phase-today { background: #fff1d6; color: #7a4a00; font-size: 12.5px; }
/* compact: narrower label column, no "COURSE / GEO REGION" tags (the header
   breadcrumb already names the levels) */
.mrows-table.layers-table.compact-cols .rowlab-head.rows-col-head,
.mrows-table.layers-table.compact-cols .rowlab-cell { min-width: 230px; max-width: 260px; }
.mrows-table.layers-table.compact-cols td.rowlab-drill .lab-text { max-width: 170px; }
.mrows-table.layers-table.compact-cols .dimtag { display: none; }
.mrows-table.layers-table.compact-cols td.rowlab-drill { padding-left: calc(12px + var(--d, 0) * 16px); }
.mrows-table.layers-table.compact-cols .lab-rail { left: calc(var(--d, 0) * 16px - 3px); }

/* ---- column-kind tints (owner request, 2026-10-03): plan (target_*) columns
   lavender, actual columns mint, % of target columns light slate — header and
   body — so target vs actual reads at a glance. Display only. */
.mrows-table thead th.k-target { background: #e6dcfa; color: #3d2a7a; }
.mrows-table thead th.k-actual { background: #d8f0e6; color: #0f5132; }
.mrows-table thead th.k-ach    { background: #dde4ee; color: #243447; }
.mrows-table tbody td.k-target, .mrows-table tfoot td.k-target { background: #f5f0fd; }
.mrows-table tbody td.k-actual, .mrows-table tfoot td.k-actual { background: #f0faf5; }
.mrows-table tbody td.k-ach,    .mrows-table tfoot td.k-ach    { background: #f1f4f9; }

/* ---- course boxes (owner request, 2026-10-03): meta.ui.courseBoxes draws a
   clear box around every Course block (course row + its open child rows). */
.mrows-table tr.cbox > td, .mrows-table tr.cbox > th { border-left: 0; }
.mrows-table tr.cbox > td:first-child { border-left: 2px solid #5b6b86; }
.mrows-table tr.cbox > td:last-child { border-right: 2px solid #5b6b86; }
.mrows-table tr.cbox-first > td { border-top: 2px solid #5b6b86; }
.mrows-table tr.cbox-last > td { border-bottom: 2px solid #5b6b86; }
.mrows-table tr.cbox-last + tr.cbox-first > td { border-top: 2px solid #5b6b86; }
.mrows-table tbody tr.cbox-first > td { box-shadow: none; }