/* ── icon-only button tooltips (prototype 2) ── */
.ovtip {
  position: fixed; z-index: 9999; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: 272px; padding: 4px 8px;
  border-radius: 6px;
  background: #292929; color: #fff;
  font: 500 12px/1.4 "Inter", "Nunito Sans", system-ui, sans-serif;
  box-shadow: 0 2px 8px 0 rgba(26, 26, 26, 0.24);
  opacity: 0; transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.ovtip.is-show { opacity: 1; transform: translateY(0); }
.ovtip__txt { white-space: normal; }
.ovtip__caret {
  position: absolute; bottom: -5px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid #292929;
}
.ovtip.is-below .ovtip__caret {
  bottom: auto; top: -5px; border-top: 0; border-bottom: 6px solid #292929;
}

/* ============================================================================
   Owner View — MAX Workspace (Titan Go look & feel)
   Light, airy, floating white cards on a soft grey ground. Anvil2 tokens.
   Left: Atlas chat (chief-of-staff briefing). Right: owner business content.
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--a2-font-family-base);
  color: var(--a2-color-neutral-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* soft card shadow + light hairline */
  --ov-card-shadow: 0 1px 8px 0 rgba(42,42,42,.12);
  --ov-card-border: 1px solid #E6E6E6;
  /* softer, calmer blue than the saturated brand blue-600 */
  --ov-blue: #3f7ddb;
  --ov-blue-hover: #356fc6;
  --ov-grad: linear-gradient(150deg, #5a93f0, #3f7ddb);
}

/* shared display heading — Sofia Pro ships bold-only, so headings that need a
   lighter weight use the variable base family (Nunito Sans) instead. */
.dpl { font-family: var(--a2-font-family-base); letter-spacing: -0.015em; }

/* eyebrow + time-pill primitives (reference style) */
.eyebrow { font: 600 12px/1 var(--a2-font-family-base); letter-spacing: .08em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.time-pill { font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); background: var(--a2-color-neutral-30); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }

/* status tokens */
.s-green  { --st: var(--a2-color-green-700);  --st-bg: color-mix(in srgb, var(--a2-color-green-500) 16%, #fff); --st-bd: color-mix(in srgb, var(--a2-color-green-500) 36%, #fff); }
.s-yellow { --st: var(--a2-color-yellow-800); --st-bg: color-mix(in srgb, var(--a2-color-yellow-500) 28%, #fff); --st-bd: color-mix(in srgb, var(--a2-color-yellow-600) 48%, #fff); }
.s-red    { --st: var(--a2-color-red-700);    --st-bg: color-mix(in srgb, var(--a2-color-red-600) 15%, #fff); --st-bd: color-mix(in srgb, var(--a2-color-red-600) 36%, #fff); }

/* ───────────────────────── App shell (ServiceTitan frame) ───────────────────────── */
:root { --rail-w: 168px; --topbar-h: 48px; --rail-bg: #0c1118; --rail-fg: #fff; }
.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "topbar topbar" "rail content";
  background: #fff;
}
.topbar {
  grid-area: topbar; background: #fff;
  border-bottom: 1px solid var(--a2-color-neutral-80);
  display: grid; grid-template-columns: var(--rail-w) 1fr 220px;
  align-items: center; padding: 0 16px 0 0; gap: 16px; z-index: 7;
}
.topbar__brand { display: inline-flex; align-items: center; gap: 8px; padding-left: 16px; }
.topbar__brand img { height: 20px; width: auto; display: block; }
.topbar__search {
  display: flex; align-items: center; gap: 8px; height: 32px;
  background: #fff; border: 1px solid var(--a2-color-neutral-80);
  border-radius: 6px; padding: 0 10px 0 12px; max-width: 460px; width: 100%;
  justify-self: center; color: var(--a2-color-neutral-500);
}
.topbar__search-text { flex: 1; font: 400 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.topbar__search-kbd {
  font: 400 11px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500);
  background: var(--a2-color-neutral-20); border: 1px solid var(--a2-color-neutral-80);
  border-radius: 4px; padding: 3px 7px;
}
.topbar__search-kbd b { color: var(--a2-color-neutral-700); font-weight: 600; }
.topbar__utils { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.topbar__utils img { height: 36px; width: auto; display: block; }

.rail { grid-area: rail; background: var(--rail-bg); color: var(--rail-fg); display: flex; flex-direction: column; z-index: 6; }
.rail__nav { flex: 1; padding: 6px 6px 5px; display: flex; flex-direction: column; gap: 0px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.rail__nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rail__item {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 9px; margin: 0; padding: 6px 9px; border-radius: 7px;
  color: rgba(255,255,255,.82); cursor: pointer; text-decoration: none; border: 0; background: transparent;
  transition: background 120ms ease, color 120ms ease;
}
.rail__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail__item.is-active { background: rgba(255,255,255,.10); color: #fff; }
.rail__icon { width: 20px; height: 20px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.rail__icon .material-icons-round { font-size: 18px; }
.rail__label { font-size: 12.5px; line-height: 1.2; white-space: nowrap; font-weight: 600; flex: 1; text-align: left; }
.rail__item--atlas { color: #fff; }
.rail__item--atlas:hover { background: transparent; }
.rail__atlas-badge {
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.rail__atlas-badge img { width: 22px; height: 22px; display: block; }
.rail__foot { padding: 8px 6px 12px; }
.rail__collapse {
  width: 100%; height: 38px; border: 0; cursor: pointer; border-radius: 8px;
  background: transparent; color: rgba(255,255,255,.62);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.rail__collapse:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail__collapse .material-icons-round { font-size: 22px; }

/* expandable Workspace group — inline submenu */
.rail__group { margin: 0; }
button.rail__item { -webkit-appearance: none; appearance: none; font-family: inherit; }
.rail__group > .rail__item { width: 100%; margin: 0; }
.rail__item--parent.is-active { background: transparent; color: #fff; }
.rail__item--parent.is-active:hover { background: rgba(255,255,255,.06); }
.rail__chev { margin-left: auto; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.10); color: rgba(255,255,255,.78); transition: transform 160ms ease; }
.rail__chev .material-icons-round { font-size: 16px; }
.rail__group.is-open .rail__chev { transform: rotate(180deg); }
.rail__submenu { display: none; flex-direction: column; gap: 1px; padding: 1px 0 3px; }
.rail__group.is-open .rail__submenu { display: flex; }
.rail__sub { position: relative; display: flex; align-items: center; height: 28px; padding: 0 12px 0 38px; border-radius: 7px; color: rgba(255,255,255,.7); font: 600 12px/1 var(--a2-font-family-base); text-decoration: none; transition: background 120ms ease, color 120ms ease; }
.rail__sub:hover { background: rgba(255,255,255,.07); color: #fff; }
.rail__sub.is-active { color: var(--a2-color-blue-400); background: transparent; }
.rail__sub--disabled { cursor: default; pointer-events: none; }
.rail__sub.is-active:hover { background: rgba(255,255,255,.07); }
.rail__sub.is-active::before { content: ""; position: absolute; left: 26px; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 999px; background: var(--a2-color-blue-500); }
.content { grid-area: content; overflow: hidden; position: relative; min-width: 0; }

/* ───────────────────────── Stage / columns ───────────────────────── */
.ov-stage {
  height: 100%;
  display: grid;
  grid-template-columns: var(--ov-left, calc(50% - 8px)) 16px minmax(0, 1fr);
  padding: 16px;
}
.ov-divider { align-self: stretch; display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; }
.ov-grip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 999px; transition: background 120ms ease; }
.ov-grip i { width: 4px; height: 4px; border-radius: 50%; background: var(--a2-color-neutral-300); display: block; transition: background 120ms ease; }
.ov-divider:hover .ov-grip, .ov-divider.is-dragging .ov-grip { background: var(--a2-color-neutral-20); }
.ov-divider:hover .ov-grip i, .ov-divider.is-dragging .ov-grip i { background: var(--a2-color-neutral-500); }
.card {
  background: #fff;
  border: 1px solid #E6E6E6;
  box-shadow: none;
  border-radius: 16px;
  min-height: 0;
}

/* ═══════════════════════════ Left — Atlas chat ═══════════════════════════ */
.chat { display: flex; flex-direction: column; overflow: hidden; position: relative; background: linear-gradient(135deg, #DBEDFF 0%, #DCF2F0 50%, #D4F6EB 100%); }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--a2-color-neutral-70); }
.chat__badge { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.chat__badge img { width: 32px; height: 32px; display: block; }
.chat__id { display: flex; flex-direction: column; gap: 2px; }
.chat__name { font: 600 16px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.chat__role { font: 400 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.chat__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-green-700); }
.chat__live .d { width: 7px; height: 7px; border-radius: 50%; background: var(--a2-color-green-500); }

.chat__thread { flex: 1; min-height: 0; overflow: auto; padding: 22px 22px 112px; display: flex; flex-direction: column; gap: 18px; }

/* two-mode body: briefing view + conversation view share the panel */
.chat__body { flex: 1; min-height: 0; position: relative; }
.brief-view, .convo-view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.brief-view { overflow: auto; padding: 24px 22px 150px; }
.brief-view[hidden], .convo-view[hidden] { display: none; }

/* briefing greeting head */
.bv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.bv-greet { margin: 0; font: 600 24px/1.25 var(--a2-font-family-base); letter-spacing: -0.02em; color: var(--a2-color-neutral-900); }
.bv-sub { margin: 4px 0 0; font: 400 14px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.bv-brief-btn { display: none; flex: 0 0 auto; align-items: center; gap: 6px; border: 1px solid var(--a2-color-neutral-200); border-radius: 999px; background: #fff; padding: 7px 13px; cursor: pointer; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.bv-brief-btn:hover { background: var(--a2-color-neutral-20); }
.bv-more { flex: 0 0 auto; width: 34px; height: 34px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--a2-color-neutral-600); display: inline-flex; align-items: center; justify-content: center; }
.bv-more:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-900); }
.bv-more svg { width: 20px; height: 20px; }
.bv-brief-btn svg { width: 13px; height: 13px; }

/* task list — compact rows */
/* tabbed sections in the briefing — underlined text tabs with count pills */
.bv-tabs { display: flex; gap: 22px; margin-bottom: 18px; border-bottom: 1px solid var(--a2-color-neutral-70); }
.bv-tab { display: inline-flex; align-items: center; gap: 7px; padding: 0 0 11px; border: 0; background: transparent; cursor: pointer; font: 600 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 120ms ease, border-color 120ms ease; }
.bv-tab:hover { color: var(--a2-color-neutral-900); }
.bv-tab.is-active { color: var(--a2-color-neutral-900); border-bottom-color: var(--a2-color-neutral-900); }
.bv-tab__count { font: 700 11px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); background: var(--a2-color-neutral-100); border-radius: 999px; padding: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-variant-numeric: tabular-nums; transition: background 120ms ease, color 120ms ease; }
.bv-tab.is-active .bv-tab__count { background: var(--a2-color-neutral-900); color: #fff; }
.bv-panel { display: none; }
.bv-panel.is-active { display: block; }

/* meetings — compact card rows, button on the right */
.mtg { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-top: 1px solid var(--a2-color-neutral-70); }
.mtg:first-child { border-top: 0; }
.mtg__bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--st); flex: 0 0 auto; }
.mtg__main { flex: 1; min-width: 0; }
.mtg__title { font: 600 13.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.mtg__meta { margin-top: 3px; font: 400 12px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.mtg__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); text-decoration: none; padding: 7px 12px; border: 1px solid var(--a2-color-neutral-100); border-radius: 999px; background: #fff; transition: background 120ms ease, border-color 120ms ease; }
.mtg__cta:hover { background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-200); }
.mtg__cta svg { width: 14px; height: 14px; }

/* messages — compact card rows, reply button on the right */
.msgrow { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-top: 1px solid var(--a2-color-neutral-70); }
.msgrow:first-child { border-top: 0; }
.msgrow .avatar { width: 32px; height: 32px; font-size: 12px; }
.msgrow__main { flex: 1; min-width: 0; }
.msgrow__top { display: flex; align-items: baseline; gap: 8px; }
.msgrow__name { font: 700 13px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.msgrow__time { font: 400 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-400); flex: 0 0 auto; }
.msgrow__snip { margin-top: 3px; font: 400 12.5px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgrow__reply { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); text-decoration: none; padding: 7px 12px; border: 1px solid var(--a2-color-neutral-100); border-radius: 999px; background: #fff; transition: background 120ms ease, border-color 120ms ease; }
.msgrow__reply:hover { background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-200); }
.msgrow__reply svg { width: 13px; height: 13px; }

/* prototype 2: drop the Show-peers control; keep default funnel-panel header alignment */
.ov-stage .rf__peers { display: none; }
.ov-stage .rf__cmp-row { display: inline-flex; align-items: center; gap: 8px; }
.ov-stage .rf__cmp-label { white-space: nowrap; }

/* ════════ Atlas deep-dive: structured recommendation card (prototype 2) ════════ */
/* minimal action card (refined) */
.rc--min { padding: 16px 18px 14px; }
.rc--min .rc__head { padding: 0 0 12px; }
.rc--min .rc__action { background: var(--a2-background-color-success-faint); border: 1px solid color-mix(in srgb, var(--a2-color-green-600) 18%, transparent); border-radius: 12px; padding: 14px 16px; }
.rc--min .rc__lbl { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--a2-font-family-base); letter-spacing: .06em; text-transform: uppercase; color: var(--a2-color-green-700); margin-bottom: 10px; }
.rc--min .rc__lbl img { width: 14px; height: 14px; }
.rc--min .rc__act-title { font: 700 16px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.rc--min .rc__act-sub { margin-top: 4px; font: 400 13px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.rc--min .rc__impact { margin-top: 11px; font: 700 13.5px/1.4 var(--a2-font-family-base); color: var(--a2-color-green-700); }
.rc--min .rc__social { display: flex; align-items: flex-start; gap: 7px; margin: 13px 2px 0; font: 400 12.5px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rc--min .rc__social svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--a2-color-neutral-400); }
.rc--min .rc__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 0 0; border-top: 0; }
.rc__toggles { margin-top: 10px; }
.rc__t { border-top: 1px solid var(--a2-color-neutral-70); }
.rc__t-btn { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 12px 0; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); text-align: left; font-family: var(--a2-font-family-base); }
.rc__t-pm { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px; border: 1px solid var(--a2-color-neutral-200); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--a2-color-neutral-600); }
.rc__t-body { display: none; padding: 0 0 13px 27px; }
.rc__t.is-open .rc__t-body { display: block; }
.rc--min .rc__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rc--min .rc__facts li { position: relative; padding-left: 16px; font: 400 13px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.rc--min .rc__facts li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--a2-color-neutral-400); }
.rc--min .rc__opts { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--a2-color-neutral-80); border-radius: 9px; overflow: hidden; }
.rc--min .rc__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--a2-color-neutral-70); }
.rc--min .rc__opt:first-child { border-top: 0; }
.rc--min .rc__opt-name { font: 500 12.5px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.rc--min .rc__opt-val { font: 700 13px/1 var(--a2-font-family-base); color: var(--a2-color-green-700); font-variant-numeric: tabular-nums; }

/* panel hero + show-all */
.dp2-hero__row { display: flex; align-items: baseline; gap: 10px; }
.dp2-hero__num { font: 800 32px/0.9 var(--a2-font-family-base); letter-spacing: -0.02em; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.dp2-hero__lbl { font: 600 11px/1 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.dp2-hero__goal { margin-left: auto; font: 400 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.dp2-hero__delta { margin-top: 8px; font: 700 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-red-600); }
.dp2-bar--hero { margin-top: 11px; }
.dp2-focus { display: inline-flex; align-items: center; font: 700 9px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; color: var(--a2-color-red-700); background: var(--a2-background-color-danger-faint); border-radius: 999px; padding: 3px 6px; margin-left: 6px; vertical-align: 1px; }
.dp2-extra { display: none; }
.dp2-sec.is-expanded .dp2-extra { display: block; }
.dp2-showall { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; border: 0; background: transparent; cursor: pointer; font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); padding: 0; font-family: var(--a2-font-family-base); }
.dp2-showall:hover { color: var(--a2-color-neutral-900); }
.dp2-showall__pm { width: 17px; height: 17px; flex: 0 0 auto; border-radius: 5px; border: 1px solid var(--a2-color-neutral-200); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.dp2-extra .dp2-row:first-child { margin-top: 14px; }

/* legacy deep-dive card styles below (no longer used in minimal layout) */
.rc { background: #fff; border: 1px solid var(--a2-color-neutral-80); border-radius: 16px; box-shadow: var(--ov-card-shadow); overflow: hidden; }
.rc__head { display: flex; align-items: center; gap: 8px; padding: 16px 18px 0; }
.rc__title { padding: 10px 18px 14px; font: 700 19px/1.3 var(--a2-font-family-base); letter-spacing: -0.01em; color: var(--a2-color-neutral-950); }
.rc__sec { padding: 16px 18px; border-top: 1px solid var(--a2-color-neutral-70); }
.rc__lbl { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--a2-font-family-base); letter-spacing: .06em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin-bottom: 12px; }
.rc__lbl img { width: 14px; height: 14px; }

/* situation metric header */
.rc__metric { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rc__num { font: 800 32px/0.9 var(--a2-font-family-base); letter-spacing: -0.02em; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.rc__unit { font: 600 12px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.rc__delta { display: inline-flex; align-items: center; gap: 3px; font: 700 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-red-600); }
.rc__delta svg { width: 12px; height: 12px; }
.rc__goal { margin-left: auto; font: 400 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rc__goal b { color: var(--a2-color-neutral-900); font-weight: 700; }
.rc__bar { position: relative; height: 7px; border-radius: 999px; background: var(--a2-color-neutral-100); margin-top: 12px; }
.rc__bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--a2-color-yellow-500); }
.rc__bar-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--a2-color-neutral-600); }
.rc__support { margin: 11px 0 0; font: 400 13px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.rc__support b { color: var(--a2-color-red-600); font-weight: 700; }

/* why facts */
.rc__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rc__facts li { position: relative; padding-left: 18px; font: 400 13.5px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.rc__facts li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--a2-color-neutral-400); }

/* recommended action (primary block) */
.rc__action { background: var(--a2-background-color-success-faint); }
.rc__act-title { font: 700 16px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.rc__act-sub { margin-top: 4px; font: 400 13px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.rc__impact { margin-top: 12px; font: 700 13.5px/1.4 var(--a2-font-family-base); color: var(--a2-color-green-700); }
.rc__social { margin-top: 6px; font: 400 12.5px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rc__more { margin-top: 13px; }
.rc__more-toggle { display: inline-flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 4px 0; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); text-align: left; font-family: var(--a2-font-family-base); }
.rc__more-pm { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px; border: 1px solid var(--a2-color-neutral-200); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--a2-color-neutral-600); }
.rc__opts { display: none; margin-top: 9px; flex-direction: column; gap: 0; border: 1px solid var(--a2-color-neutral-80); border-radius: 9px; overflow: hidden; background: #fff; }
.rc__more.is-open .rc__opts { display: flex; }
.rc__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--a2-color-neutral-70); }
.rc__opt:first-child { border-top: 0; }
.rc__opt--chosen { background: var(--a2-background-color-success-faint); }
.rc__opt-name { font: 500 12.5px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.rc__opt-tag { font: 700 9px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; color: var(--a2-color-green-700); background: #fff; border: 1px solid color-mix(in srgb, var(--a2-color-green-600) 30%, #fff); border-radius: 999px; padding: 2px 6px; margin-left: 5px; vertical-align: 1px; }
.rc__opt-val { font: 700 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); font-variant-numeric: tabular-nums; }
.rc__opt-val--top { color: var(--a2-color-green-700); }
.rc__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--a2-color-neutral-70); }

/* ════════ Atlas deep-dive: clean insights panel (prototype 2) ════════ */
.dp2-sec { padding: 0 0 18px; border-bottom: 1px solid var(--a2-color-neutral-70); margin-bottom: 18px; }
.dp2-sec:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.dp2-h { font: 700 11px/1 var(--a2-font-family-base); letter-spacing: .06em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin-bottom: 14px; }
.dp2-row { margin-bottom: 14px; }
.dp2-row:last-child { margin-bottom: 0; }
.dp2-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.dp2-row__name { font: 600 13px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.dp2-row__name.is-focus { color: var(--a2-color-red-600); }
.dp2-row__cmp { font: 400 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp2-row__cmp b { color: var(--a2-color-neutral-900); font-weight: 700; }
.dp2-bar { position: relative; height: 7px; border-radius: 999px; background: var(--a2-color-neutral-100); }
.dp2-bar__fill { display: block; height: 100%; border-radius: 999px; }
.dp2-bar__fill.is-low { background: var(--a2-color-red-600); }
.dp2-bar__fill.is-ok { background: var(--a2-color-green-500); }
.dp2-bar__tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--a2-color-neutral-600); }
.dp2-trend { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
.dp2-tbar { flex: 1; background: var(--a2-color-green-300, #93d3ad); border-radius: 3px 3px 0 0; min-height: 6px; }
.dp2-tbar.is-now { background: var(--a2-color-red-600); }
.dp2-cap { margin-top: 10px; font: 400 11.5px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-400); }
.dp2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp2-tile { background: var(--a2-color-neutral-10); border: 1px solid var(--a2-color-neutral-70); border-radius: 10px; padding: 12px 13px; }
.dp2-tile__n { font: 700 19px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.dp2-tile__n--risk { color: var(--a2-color-red-600); }
.dp2-tile__l { margin-top: 5px; font: 400 11.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }

/* ── AR Collection — right panel ── */
.arf-overview { --arf-red: #BF5A50; }
.arf-hero { font: 700 28px/1.1 var(--a2-font-family-base); letter-spacing: -0.02em; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.arf-hero__sub { font: 500 14px/1 var(--a2-font-family-base); letter-spacing: 0; color: var(--a2-color-neutral-500); margin-left: 5px; }
.arf-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-top: 18px; background: var(--a2-color-neutral-100); }
.arf-bar__ok { background: var(--a2-color-neutral-800); }
.arf-bar__risk { background: #BF5A50; }
.arf-stats { display: flex; gap: 20px; margin-top: 12px; }
.arf-stat { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); font-variant-numeric: tabular-nums; }
.arf-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.arf-dot--ok { background: var(--a2-color-neutral-800); }
.arf-dot--risk { background: #BF5A50; }
/* past due by business unit — rounded solid bars on a track (Satoshi values) */
.arf-busec .ivp-sec__k { margin-bottom: 16px; }
.arf-tblsec .ivp-sec__k { margin-bottom: 16px; }
/* Receivables coverage breakdown — summary strip + donut + aging */
.arf-summary { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.arf-sum__item { position: relative; background: #fff; box-shadow: var(--ov-card-shadow); border-radius: 16px; padding: 16px; min-width: 0; }
.arf-sum__ask { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--a2-color-neutral-200); background: #fff; color: var(--a2-color-blue-600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(-2px); transition: opacity 140ms var(--a2-transition-ease, ease), transform 140ms var(--a2-transition-ease, ease), background 140ms ease; box-shadow: 0 1px 3px rgba(42,42,42,.12); }
.arf-sum__item:hover .arf-sum__ask, .arf-sum__ask:focus-visible { opacity: 1; transform: translateY(0); }
.arf-sum__ask:hover { background: var(--a2-background-color-primary-faint, #EAF2FE); border-color: var(--a2-color-blue-200); }
.arf-sum__ask svg { width: 14px; height: 14px; }
.arf-sum__k { font: 600 11px/1.2 var(--a2-font-family-base); letter-spacing: .03em; text-transform: uppercase; color: var(--a2-color-neutral-500); white-space: nowrap; }
.arf-sum__v { margin-top: 7px; font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: normal; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.arf-sum__v--pos { color: var(--a2-color-green-700); }
.arf-sum__v--neg { color: var(--a2-color-red-600); }

.arf-viz__k { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: var(--a2-color-neutral-900); margin-bottom: 16px; }
.arf-vizgrid { display: flex; align-items: center; gap: 24px; }
.arf-donut { position: relative; width: 168px; flex: none; aspect-ratio: 1; }
.arf-donut__svg { width: 100%; height: 100%; display: block; }
.arf-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; pointer-events: none; }
.arf-donut__k { font: 400 11px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.arf-donut__v { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 20px; font-weight: 500; line-height: 1; color: var(--a2-color-neutral-950); }

.arf-legend2 { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.arf-leg2 { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--a2-color-neutral-50); }
.arf-leg2:first-child { border-top: 0; }
.arf-leg2__sw { width: 12px; height: 12px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.arf-leg2__name { font: 400 14px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arf-leg2__val { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.arf-leg2__pct { min-width: 66px; text-align: right; font: 400 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arf-leg2__sw--pale { background: #3E8EF0; }
.arf-leg2__sw--mid { background: #EAF2FE; background-image: repeating-linear-gradient(135deg, transparent 0 2px, #5B9BF0 2px 3.4px); box-shadow: inset 0 0 0 1px #BBD2F5; }
.arf-leg2__sw--dark { background: #173EA8; }
.arf-legend2--age { margin-top: 16px; }

.arf-age { display: flex; gap: 3px; }
.arf-age__seg { min-width: 0; flex-grow: 1; flex-shrink: 1; flex-basis: 0; height: 46px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.arf-age__seg:first-child { border-radius: 9px 4px 4px 9px; }
.arf-age__seg:last-child { border-radius: 4px 9px 9px 4px; }
.arf-age__seg--pale { background: #3E8EF0; }
.arf-age__seg--mid { background-color: #EAF2FE; background-image: repeating-linear-gradient(135deg, transparent 0 4px, #5B9BF0 4px 5.6px); box-shadow: inset 0 0 0 1px #BBD2F5; }
.arf-age__seg--dark { background: #173EA8; }
.arf-age__pill { background: #fff; border-radius: 999px; padding: 3px 10px; font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 11.5px; font-weight: 500; color: var(--a2-color-neutral-950); white-space: nowrap; box-shadow: 0 1px 3px rgba(42,42,42,.14); }

/* By business unit + By days: hover elevation on each pie segment / bar */
.arf-don__seg { cursor: pointer; transform-box: view-box; transform-origin: 120px 120px; transition: transform 160ms var(--a2-transition-ease, ease), filter 160ms var(--a2-transition-ease, ease); }
.arf-don__seg:hover { transform: scale(1.05); filter: drop-shadow(0 3px 7px rgba(20,40,90,.30)); }
.arf-age__seg { cursor: pointer; position: relative; transition: transform 160ms var(--a2-transition-ease, ease), box-shadow 160ms var(--a2-transition-ease, ease); }
.arf-age__seg:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(20,40,90,.20); z-index: 2; }

/* hover detail card (tooltip) for both data viz */
.arf-tip { position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 120ms ease; background: #fff; border: 1px solid var(--a2-color-neutral-100); box-shadow: var(--a2-shadow-large, 0 10px 30px rgba(15,17,24,.18)); border-radius: 11px; padding: 11px 13px; min-width: 148px; }
.arf-tip.is-show { opacity: 1; transform: translateY(0); }
.arf-tip__head { display: flex; align-items: center; gap: 8px; }
.arf-tip__sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.arf-tip__sw--hatch { background: #EAF2FE; background-image: repeating-linear-gradient(135deg, transparent 0 2px, #5B9BF0 2px 3.4px); }
.arf-tip__name { font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.arf-tip__val { margin-top: 8px; font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 18px; font-weight: 500; line-height: 1; color: var(--a2-color-neutral-950); }
.arf-tip__sub { margin-top: 4px; font: 400 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.arf-overview--noborder { margin-bottom: 0 !important; }
/* AR breakdown panel: no dividers, 16px title→content, 24px between sections */
.dd2.ar-breakdown .dd2__panel-body { gap: 24px; }
.dd2.ar-breakdown .dp2-sec { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.arf-bu__row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 14px; }
.arf-bu__row + .arf-bu__row { margin-top: 14px; }
.arf-bu__lbl { text-align: left; font: 400 14px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.arf-bu__barwrap { min-width: 0; }
.arf-bu__fill { display: flex; align-items: center; justify-content: flex-end; min-width: 72px; height: 40px; border-radius: 10px; background: #BF5A50; }
.arf-bu__val { background: #fff; color: var(--a2-color-neutral-950); font: 500 13px/1 "Satoshi", "Nunito Sans", system-ui, sans-serif; border-radius: 999px; padding: 6px 12px; margin-right: 7px; box-shadow: 0 1px 2px rgba(42,42,42,.12); font-variant-numeric: tabular-nums; }
.arf-urgency { margin-top: 16px; font: 400 12.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.arf-tbl { display: flex; flex-direction: column; }
.arf-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 15px 0; border-top: 1px solid var(--a2-color-neutral-50); }
.arf-row:first-child { border-top: 0; }
.arf-row__name { font: 700 14px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.arf-row__bu { margin-top: 3px; font: 400 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.arf-row__age { display: inline-flex; align-items: center; gap: 7px; }
.arf-rowdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.arf-row__days { font: 400 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); font-variant-numeric: tabular-nums; }
.arf-row__amt { position: relative; min-width: 96px; display: flex; justify-content: flex-end; align-items: center; padding: 7px 9px; border-radius: 6px; overflow: hidden; }
.arf-row__track { position: absolute; right: 0; top: 0; bottom: 0; background: var(--a2-color-neutral-50); border-radius: 6px; }
.arf-row__num { position: relative; font: 700 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
/* customers-with-unpaid-balances table: standard table UI, no divider above, fits the panel */
.arf-overview--noborder { border-bottom: 0 !important; margin-bottom: 8px !important; padding-bottom: 0 !important; }
.arf-tblsec .ivp-sec__k, .arf-busec .ivp-sec__k, .arf-agesec .ivp-sec__k { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--a2-color-neutral-900); margin-bottom: 16px; }
.arf-custtbl { min-width: 0 !important; }
.arf-custtbl .arf-row__name { font-size: 14px; }
.arf-custtbl .arf-row__age { display: inline-flex; align-items: center; gap: 7px; }
.arf-custtbl td { vertical-align: middle !important; }

/* AR breakdown sections presented as Revenue-Pipeline-style cards */
.dd2.ar-breakdown .dp2-sec.arf-cardsec { background: #fff; box-shadow: var(--ov-card-shadow); border-radius: 16px; padding: 20px !important; }
.arf-cardsec .arf-viz__k, .arf-cardsec .ivp-sec__k { margin-bottom: 16px; }
/* customer table sits flush inside its card (no doubled border) */
.arf-tblsec.arf-cardsec .ivp-litbl-wrap { border: 0; border-radius: 0; overflow: visible; }
/* hatched legend swatch (matches donut Plumbing segment) */
.arf-leg2__sw--hatch { background: #EAF2FE; background-image: repeating-linear-gradient(135deg, transparent 0 2px, #5B9BF0 2px 3.4px); box-shadow: inset 0 0 0 1px #BBD2F5; }

/* ── AR Collection — center thread (plan flow) ── */
/* one Atlas turn (situation text + intro line + plan card) is spaced 8px internally;
   24px separates one Atlas turn from the previous message */
body .dd2__threadinner { gap: 24px; }
.ar-transition { margin-top: 8px; font-weight: 600; color: var(--a2-color-neutral-900); }
.ar-plan-wrap { margin-top: 8px; }
.ar-manual__acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.arpc { border: 1px solid #E6E6E6; border-radius: 16px; background: #fff; padding: 16px; box-shadow: var(--ov-card-shadow); }
.arpc__title { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 20px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: var(--a2-color-neutral-950); }
.arpc__sub { margin-top: 5px; font: 400 14px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.arpc__list { margin: 16px 0 4px; display: flex; flex-direction: column; gap: 24px; }
.arpc__item { display: flex; align-items: flex-start; gap: 12px; padding: 0; border-top: none; }
.arpc__cb-wrap { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; padding-top: 1px; cursor: pointer; }
.arpc__cb { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.arpc__cb-box { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 2px; border: 1.5px solid var(--a2-color-neutral-400); background: var(--a2-background-color-default); transition: background-color var(--a2-duration-fast) var(--a2-transition-ease), border-color var(--a2-duration-fast) var(--a2-transition-ease); }
.arpc__cb-box::after { content: ""; width: 4px; height: 8px; border: solid var(--a2-foreground-color-on-primary); border-width: 0 1.5px 1.5px 0; transform: translate(-0.5px, -0.5px) rotate(45deg); opacity: 0; transition: opacity var(--a2-duration-fast) var(--a2-transition-ease); }
.arpc__cb:checked ~ .arpc__cb-box { background: var(--a2-color-neutral-900); border-color: var(--a2-color-neutral-900); }
.arpc__cb:checked ~ .arpc__cb-box::after { opacity: 1; }
.arpc__cb-wrap:hover .arpc__cb-box { border-color: var(--a2-color-neutral-600); }
.arpc__cb:checked ~ .arpc__cb-box:hover, .arpc__cb-wrap:hover .arpc__cb:checked ~ .arpc__cb-box { border-color: var(--a2-color-neutral-900); }
.arpc__cb:focus-visible ~ .arpc__cb-box { outline: var(--a2-focus-ring-width) solid var(--a2-focus-ring-color); outline-offset: 2px; }
.arpc__item.is-disabled { opacity: .5; }
.arpc__item.is-disabled .arpc__cb, .arpc__item.is-disabled .arpc__cb-wrap { cursor: not-allowed; }
.arpc__item.is-unchecked .arpc__name { color: var(--a2-color-neutral-500); }
.arpc__item:first-child { border-top: 0; padding-top: 2px; }
.arpc__main { flex: 1; min-width: 0; }
.arpc__name { font: 600 14px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.arpc__bolt { width: 15px; height: 15px; flex: 0 0 auto; margin-right: 6px; vertical-align: -2px; color: var(--a2-color-yellow-700); }
.arpc__desc { margin-top: 3px; font: 400 13px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.arpc__impact { margin-top: 5px; font: 600 12.5px/1.4 var(--a2-font-family-base); color: var(--a2-color-green-700); }
.arpc__state { flex: none; min-width: 22px; height: 22px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--a2-color-green-600); }
.arpc__status { font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-green-700); white-space: nowrap; }
.arpc__state svg { width: 18px; height: 18px; }
.arpc__spin { width: 16px; height: 16px; border: 2px solid var(--a2-color-neutral-200); border-top-color: var(--a2-color-neutral-700); border-radius: 50%; animation: arspin .7s linear infinite; }
@keyframes arspin { to { transform: rotate(360deg); } }
.arpc__item.is-done .arpc__name { color: var(--a2-color-neutral-500); }
.arpc__foot { display: flex; gap: 12px; margin-top: 16px; }
/* Assign button — secondary, sits right after Approve plan */
.arpc-assign.is-assigned { border-color: transparent; box-shadow: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.arpc-assign__av { width: 30px; height: 30px; font: 700 12px/1 var(--a2-font-family-base); }
/* Draft review-message card */
.iv-card.asg-msgcard { display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 20px; gap: 0; }
.asg-msg__title { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 20px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: var(--a2-color-neutral-950); text-align: left; width: 100%; }
.asg-msg__to { margin-top: 4px; font: 400 14px/1.4 "Satoshi", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-500); text-align: left; width: 100%; }
.asg-msg__lbl { margin-top: 18px; color: var(--a2-color-neutral-950); font-family: var(--a2-typography-label-font-family, "Nunito Sans"); font-size: var(--a2-typography-label-size-default, 14px); font-style: normal; font-weight: var(--a2-typography-label-font-weight, 600); line-height: 16px; text-align: left; width: 100%; }
.asg-msg__ta { margin-top: 10px; width: 100%; box-sizing: border-box; resize: none; overflow: hidden; border: 1px solid var(--a2-color-neutral-200); border-radius: 12px; padding: 14px 15px; font: 400 14.5px/1.6 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-900); background: #fff; }
.asg-msg__ta:focus { outline: none; border-color: var(--a2-color-blue-600); }
.asg-msg__ta[readonly] { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-700); }
.asg-msgcard .asg-msg__foot { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 16px; width: 100%; }
.asg-msgcard .asg-msg__foot .btn { width: auto; display: inline-flex; justify-content: center; box-sizing: border-box; }
.iv-status--muted { color: var(--a2-color-neutral-500); justify-content: center; }
/* unified text-field / textarea value typography — 16px regular Satoshi */
.dd2 input[type="text"], .dd2 input[type="password"], .dd2 input[type="email"], .dd2 input[type="search"], .dd2 input:not([type]), .dd2 textarea,
.intuit-pop input, .asg-msg__ta {
  color: #040404 !important;
  font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
/* dismiss → run-yourself choice: standalone buttons (no card wrapper) */
.asg-runchoice { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
/* approved state: ghost button with a black check, no hover fill, no spinner */
.arpc__foot .ar-takeaction.is-approved { color: var(--a2-color-neutral-950); cursor: default; font-weight: 600; }
.arpc__foot .ar-takeaction.is-approved:hover { background: transparent; }
.arpc__check { display: inline-flex; align-items: center; color: var(--a2-color-neutral-950); }
.arpc__check svg { width: 16px; height: 16px; }
.ar-btnspin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: arspin .7s linear infinite; }

/* ── AR Collection — processing / thinking message (Claude-style, one animating icon) ── */
.arproc-msg { display: flex; flex-direction: column; gap: 8px; }
.arproc-content { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* movable Atlas icon — animates only while Atlas is processing (speaking / thinking) */
.arproc-ic { flex: none; display: inline-flex; }
.arproc-ic img { width: 18px; height: 18px; display: block; }
.arproc-msg.is-processing .arproc-ic { animation: arbreath 1.5s ease-in-out infinite; transform-origin: center; }
@keyframes arbreath { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .arproc-msg.is-processing .arproc-ic { animation: none; } }
/* lead line Atlas "speaks" — icon adjacent to the streaming text */
.arproc__lead-row { display: flex; align-items: flex-start; gap: 9px; }
.arproc__lead-txt { font: 400 14.5px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-800); transition: opacity .2s ease; }
/* while Atlas is working, the same line is muted and cross-fades through its activity */
.arproc__lead-txt.is-thinking { color: var(--a2-color-neutral-500); }
.arproc__rich p { margin: 0; }
/* icon-adjacent skeleton while Atlas is creating a card */
.arproc-skelrow { display: flex; align-items: flex-start; gap: 9px; }
.arproc-skelrow .ar-skelwrap { flex: 1; min-width: 0; }
.arproc-skelrow .arproc-ic { animation: arbreath 1.5s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .arproc-skelrow .arproc-ic { animation: none; } }
/* thinking line: animating icon adjacent to the dynamically-changing activity text */
.arproc__think { display: flex; align-items: center; gap: 9px; }
.arproc__live-txt { font: 400 14.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-500); transition: opacity .2s ease; }
/* smooth entrances: word-by-word fade, card/skeleton/foot fade-in */
.ar-word { animation: arwordin .26s ease both; }
@keyframes arwordin { from { opacity: 0; } to { opacity: 1; } }
.ar-cardin { animation: arfadein .34s var(--a2-transition-ease, ease) both; }
.arproc-skelrow, .arproc-foot { animation: arfadein .28s ease both; }
@keyframes arfadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ar-word, .ar-cardin, .arproc-skelrow, .arproc-foot { animation: none; } .arproc__live-txt { transition: none; } }
/* skeleton card shimmer while the real card "loads" */
.ar-skelcard { display: flex; align-items: center; gap: 12px; border: 1px solid #E6E6E6; border-radius: 16px; background: #fff; box-shadow: var(--ov-card-shadow); padding: 14px 16px; }
.ar-skelcard__ico { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.ar-skelcard__main { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.ar-skelcard__l1 { height: 13px; width: 42%; border-radius: 6px; }
.ar-skelcard__l2 { height: 11px; width: 68%; border-radius: 6px; }
.ar-skelcard__ico, .ar-skelcard__l1, .ar-skelcard__l2 { background: linear-gradient(90deg, #ececec 25%, #f6f6f6 37%, #ececec 63%); background-size: 400% 100%; animation: arshimmer 1.2s ease infinite; }
@keyframes arshimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ar-skelcard__ico, .ar-skelcard__l1, .ar-skelcard__l2 { animation: none; } }
/* inline confirmation Atlas adds once an item completes */
.arproc__confirm { margin: 0; font: 400 14.5px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
/* lead confirmation line at the start of an item (icon is never above the content) */
.arproc__lead { margin: 0; font: 400 14.5px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
/* Atlas never sits on top of a message — the icon only appears at the bottom of its latest turn */
.dd2 .dd2msg__head { display: none; }
/* invoice-flow messages: 8px between the intro text, cards, skeleton, steps, and the Atlas icon */
.dd2 .dd2msg__body > p { margin: 0; }
/* invoice review: the tabs label the panel, so the redundant "Invoice review" header row is hidden */
.dd2.inv-review .dd2__panel-head { display: none; }
.dd2.inv-review .dd2__panel-body { padding-top: 22px; }
.dd2.ar-breakdown .dd2__panel-head { border-bottom: 0; padding: 18px 24px 8px; }
.dd2.ar-breakdown .dd2__panel-body { padding: 10px 24px 24px; }
.dd2.ar-breakdown .dd2__panel-title { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 20px; line-height: 1.1; font-weight: 500; letter-spacing: -0.01em; color: var(--a2-color-neutral-900); }
.dd2 .dd2msg__body > .iv-card,
.dd2 .dd2msg__body > .iv-plan,
.dd2 .dd2msg__body > .iv-skelwrap,
.dd2 .dd2msg__body > .iv-steps,
.dd2 .dd2msg__body > .arproc-foot { margin-top: 8px; }
/* QuickBooks / automation action cards in the plan flow */
.arproc-content .iv-card { margin-top: 0; }
.ar-actcard[data-ar-qb] { cursor: pointer; }
.ar-actcard__ico--qb { background: #2CA01C !important; color: #fff !important; font: 800 13px/1 var(--a2-font-family-base); }
/* completed-state card button — ghost + black check, non-interactive look */
.ar-donebtn { color: var(--a2-color-neutral-950) !important; cursor: default; gap: 6px; font-weight: 600 !important; }
.ar-donebtn:hover { background: transparent !important; }
.ar-donebtn .ar-donebtn__chk { display: inline-flex; align-items: center; color: var(--a2-color-neutral-950); }
.ar-donebtn .ar-donebtn__chk svg { width: 15px; height: 15px; }
.ar-actcard__ico--ok { background: var(--a2-background-color-success-faint, #e4f6ee) !important; color: var(--a2-color-green-600, #077e50) !important; }
.ar-actcard__ico--ok svg { width: 20px; height: 20px; }
.ar-actcard__badge { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-green-700, #077e50); background: var(--a2-background-color-success-faint, #e4f6ee); border-radius: 999px; padding: 6px 11px 6px 8px; }
.ar-actcard__badge svg { width: 14px; height: 14px; }
/* completed: the Atlas icon sits at the bottom-left of its latest response */
.arproc-foot { display: flex; }
.arproc-foot img { width: 18px; height: 18px; display: block; }
.arproc__intro { margin: 0; font: 400 14.5px/1.6 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.arproc { margin: 0; }
.arproc__toggle { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer; padding: 0; font: 500 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.arproc__toggle:hover { color: var(--a2-color-neutral-800); }
.arproc__toggle svg { width: 13px; height: 13px; transition: transform .2s var(--a2-transition-ease, ease); }
.arproc.is-collapsed .arproc__toggle svg { transform: rotate(180deg); }
.arproc__steps { margin-top: 16px; display: flex; flex-direction: column; gap: 22px; }
.arproc.is-collapsed .arproc__steps { display: none; }
/* one step: thin gray rail (blockquote) + dot at top-left; status indicator on the RIGHT */
.arproc-step { display: grid; grid-template-columns: 12px 1fr; gap: 14px; }
.arproc-step__rail { position: relative; }
.arproc-step__rail::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: -8px; width: 1.5px; background: var(--a2-color-neutral-200); }
.arproc-step:last-child .arproc-step__rail::before { bottom: 2px; }
.arproc-step__dot { position: absolute; left: 1.25px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--a2-color-neutral-300); }
.arproc-step.is-active .arproc-step__dot { background: var(--a2-color-blue-600, #0265dc); }
.arproc-step.is-done .arproc-step__dot { background: var(--a2-color-green-500, #0aa86c); }
.arproc-step__head { display: flex; align-items: center; gap: 12px; min-height: 18px; }
.arproc-step__name { flex: 1; min-width: 0; font: 400 14px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-800); transition: color .2s var(--a2-transition-ease, ease); }
.arproc-step.is-active .arproc-step__name { font-weight: 700; color: var(--a2-color-neutral-950); }
.arproc-step.is-done .arproc-step__name { font-weight: 400; color: var(--a2-color-neutral-500); }
.arproc-step__status { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; }
/* active: blue→purple half-circle loader */
.arproc-loader { width: 17px; height: 17px; border-radius: 50%; background: conic-gradient(from 0deg, #7b61ff, #0265dc 150deg, transparent 180deg, transparent 360deg); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64%); mask: radial-gradient(closest-side, transparent 62%, #000 64%); animation: arspin .85s linear infinite; }
/* pending: dashed circle */
.arproc-pending { width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--a2-color-neutral-300); }
/* done: green checkmark */
.arproc-check { display: inline-grid; place-items: center; color: var(--a2-color-green-600, #077e50); }
.arproc-check svg { width: 18px; height: 18px; }
.arproc-step__body { margin: 8px 0 0; font: 400 13px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.arproc-step.is-pending .arproc-step__body { color: var(--a2-color-neutral-500); }
.arproc-step__details { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer; padding: 0; margin-top: 9px; font: 500 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-400); }
.arproc-step__details span { text-decoration: underline; text-underline-offset: 2px; }
.arproc-step__details:hover { color: var(--a2-color-neutral-700); }
.arproc-step__details svg { width: 12px; height: 12px; transition: transform .2s var(--a2-transition-ease, ease); }
.arproc-step__more { margin: 8px 0 0; padding-left: 12px; border-left: 1.5px solid var(--a2-color-neutral-100); font: 400 12.5px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.arproc-step:not(.is-open) .arproc-step__more { display: none; }
.arproc-step.is-open .arproc-step__details svg { transform: rotate(180deg); }
/* live status line replaced by the spinning-star progression line above */
.arproc__result { margin: 0; }
.arproc__result > p { margin: 0; font: 400 14.5px/1.6 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.arproc__result .iv-card { margin-top: 8px; }
.arproc__result .iv-steps { margin-top: 8px; }

/* mocked Intuit-hosted sign-in popup */
.intuit-pop { position: fixed; inset: 0; z-index: 220; background: color-mix(in srgb, var(--a2-color-neutral-950) 46%, transparent); display: flex; align-items: center; justify-content: center; padding: 24px; }
.intuit-card { width: min(380px, 100%); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--a2-shadow-xlarge, 0 24px 64px rgba(15,17,24,.3)); }
.intuit-card__bar { display: flex; align-items: center; gap: 9px; padding: 14px 18px; background: #2CA01C; }
.intuit-close { margin-left: auto; flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; display: inline-grid; place-items: center; }
.intuit-close:hover { background: rgba(255,255,255,.28); }
.intuit-close svg { width: 16px; height: 16px; }
.intuit-field input.is-autofill { background: #FBF6DD; box-shadow: inset 0 0 0 1px #E7DEB0; }
.intuit-forgot { display: inline-block; margin: -2px 0 2px; font: 600 13px/1.3 var(--a2-font-family-base); color: #2CA01C; text-decoration: none; }
.intuit-forgot:hover { text-decoration: underline; }
.intuit-card__qb { width: 26px; height: 26px; border-radius: 6px; background: #fff; color: #2CA01C; font: 800 12px/1 var(--a2-font-family-base); display: inline-grid; place-items: center; }
.intuit-card__brand { font: 700 15px/1 var(--a2-font-family-base); color: #fff; }
.intuit-card__body { padding: 22px 22px 18px; }
.intuit-card__title { font: 700 20px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.intuit-card__sub { margin: 6px 0 18px; font: 400 13px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.intuit-field { display: block; margin-bottom: 14px; }
.intuit-field span { display: block; font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); margin-bottom: 6px; }
.intuit-field input { width: 100%; padding: 11px 12px; border: 1px solid var(--a2-color-neutral-200); border-radius: 8px; font: 400 14px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.intuit-field input:focus-visible { outline: 2px solid #2CA01C; outline-offset: 1px; border-color: #2CA01C; }
.intuit-signin { width: 100%; margin-top: 4px; padding: 12px; border: 0; border-radius: 999px; background: #2CA01C; color: #fff; font: 700 14px/1 var(--a2-font-family-base); cursor: pointer; }
.intuit-signin:hover { background: #258A18; }
.intuit-signin:disabled { opacity: .7; cursor: default; }
.intuit-card__foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font: 400 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.intuit-card__foot svg { width: 13px; height: 13px; }

/* inline invoice review — right panel + chat checklist */
.arv__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.arv-step { font: 700 11px/1 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.arv-dots { display: inline-flex; gap: 6px; }
.arv-d { width: 7px; height: 7px; border-radius: 50%; background: var(--a2-color-neutral-200); }
.arv-d.is-done { background: var(--a2-color-green-500, #0aa86c); }
.arv-d.is-cur { background: var(--a2-color-neutral-900); }
.arv__cust { font: 700 18px/1.25 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.arv__meta { margin-top: 3px; font: 400 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.arv__fields { margin-top: 18px; }
.arv-fld { margin-bottom: 16px; }
.arv-fld__label { font: 600 11px/1 var(--a2-font-family-base); text-transform: uppercase; letter-spacing: .05em; color: var(--a2-color-neutral-600); margin-bottom: 6px; }
.arv-fld__val { font: 400 14px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.arv-fld__old { font: 400 11px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); text-decoration: line-through; text-decoration-color: var(--a2-color-neutral-400); margin-bottom: 5px; }
.arv-fld__input { width: 100%; max-width: 320px; font: 600 14px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-900); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--a2-color-green-300, #6dd29c); background: var(--a2-color-green-50); }
.arv-fld__input:focus-visible { outline: 2px solid var(--a2-color-green-500, #0aa86c); outline-offset: 1px; }
.arv-checklist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.arv-sug { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--a2-color-neutral-100); background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.arv-sug__box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--a2-color-neutral-300); background: #fff; display: inline-grid; place-items: center; }
.arv-sug__box svg { width: 13px; height: 13px; opacity: 0; color: #fff; }
.arv-sug.is-on .arv-sug__box { background: var(--a2-color-neutral-900); border-color: var(--a2-color-neutral-900); }
.arv-sug.is-on .arv-sug__box svg { opacity: 1; }
.arv-sug__name { flex: 1; font: 600 13px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.arv-sug:not(.is-on) .arv-sug__name { opacity: .5; }
.arv-sug__delta { font: 700 10.5px/1 var(--a2-font-family-base); color: var(--a2-color-green-700); background: var(--a2-color-green-50); border-radius: 999px; padding: 4px 7px; }

.ar-auth { background: #fff; border: 1px solid #E6E6E6; border-radius: 16px; box-shadow: var(--ov-card-shadow); padding: 16px; }
.ar-auth__head { display: flex; align-items: flex-start; gap: 12px; }
.ar-auth__logo { flex: none; width: 36px; height: 36px; border-radius: 8px; background: #2CA01C; color: #fff; font: 800 14px/1 var(--a2-font-family-base); display: inline-grid; place-items: center; }
.ar-auth__title { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 20px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: var(--a2-color-neutral-950); }
.ar-auth__sub { margin-top: 4px; font: 400 14px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.ar-auth__foot { margin-top: 16px; display: flex; justify-content: flex-start; }
.ar-auth__ok { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-color-green-700); }
.ar-auth__ok svg { width: 16px; height: 16px; }

/* New-tab compact cards (Prototype 3 style, stacked) */
/* ════════ Daily Brief story ════════ */
.bv-brief-btn { position: relative; }
.bv-brief-ring { display: none; }
.bv-brief-btn.has-unread { border-color: var(--a2-color-neutral-200); box-shadow: none; }
.bv-brief-btn.has-unread .bv-brief-ring { display: none; }e; pointer-events: none; }
@keyframes bsRing { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.story { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: rgba(15,17,24,.62); }
.story.is-open { display: flex; }
.story__card { position: relative; width: 380px; max-width: calc(100vw - 32px); height: 680px; max-height: calc(100vh - 48px); border-radius: 22px; overflow: hidden; background: #0c1118; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.story__bars { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 8; display: flex; gap: 5px; }
.story__bar { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.32); overflow: hidden; }
.story__bar-fill { display: block; height: 100%; width: 0; background: #fff; border-radius: 999px; }
.story__close { position: absolute; top: 22px; right: 14px; z-index: 8; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.story__close svg { width: 16px; height: 16px; }
.story__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 0; }
.story__nav--prev { left: 8px; }
.story__nav--next { right: 8px; }
.story__arrow { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: background 120ms ease; }
.story__arrow:hover { background: rgba(255,255,255,.32); }
.story__arrow svg { width: 18px; height: 18px; }

.story__seg { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; padding: 64px 30px 36px; color: #fff; animation: bsIn 360ms var(--a2-transition-ease); }
.story__seg.bs-seg-0 { background: #0c1118; }
.story__seg.bs-seg-1 { background: #0c1118; }
.story__seg.bs-seg-2 { background: #0c1118; }
.story__seg.bs-seg-3 { background: #0c1118; }
@keyframes bsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bs-inner { width: 100%; }

.bs-eyebrow { font: 700 12px/1 var(--a2-font-family-base); letter-spacing: .08em; text-transform: uppercase; color: #7fe6b6; margin-bottom: 16px; }
.bs-big { font-family: var(--a2-font-family-base); font-weight: 800; font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.bs-big2 { font-family: var(--a2-font-family-base); font-weight: 800; font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; color: #fff; }
.bs-h { font-family: var(--a2-font-family-base); font-weight: 700; font-size: 26px; line-height: 1.18; letter-spacing: -0.015em; color: #fff; }
.bs-sub { margin: 16px 0 0; font: 500 16px/1.5 var(--a2-font-family-base); color: rgba(255,255,255,.88); }
.bs-note { margin: 12px 0 0; font: 500 14.5px/1.5 var(--a2-font-family-base); color: rgba(255,255,255,.62); }

.bs-stat { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; }
.bs-stat__n { font: 800 36px/1 var(--a2-font-family-base); letter-spacing: -0.02em; color: #7fe6b6; font-variant-numeric: tabular-nums; }
.bs-stat__l { font: 600 13.5px/1.3 var(--a2-font-family-base); color: rgba(255,255,255,.78); }
.bs-stat--hero { margin-top: 24px; }
.bs-stat--hero .bs-stat__n { font-size: 44px; }

.bs-levers { display: flex; gap: 12px; margin-top: 22px; }
.bs-lever { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.bs-lever__bar { width: 100%; height: 56px; border-radius: 8px; }
.bs-lever__bar--ok { background: #0e9d6e; }
.bs-lever__bar--warn { background: #e8a93a; }
.bs-lever__lbl { font: 700 11px/1 var(--a2-font-family-base); color: #fff; }
.bs-lever__val { font: 500 10.5px/1 var(--a2-font-family-base); color: rgba(255,255,255,.65); }

.bs-mtgs { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.bs-mtg { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.14); border-radius: 10px; padding: 12px 14px; font: 600 14px/1.2 var(--a2-font-family-base); color: #fff; }
.bs-mtg__t { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bs-cta { position: relative; z-index: 7; pointer-events: auto; margin-top: 24px; width: 100%; border: 0; border-radius: 12px; background: #0e9d6e; color: #fff; cursor: pointer; padding: 11px 12px; font: 700 15px/1 var(--a2-font-family-base); }
.bs-cta:hover { background: #0c8a60; }

/* New-tab compact cards (Prototype 3 style, stacked) */
.dd2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dd2-chip { border: 1px solid var(--a2-color-neutral-100); background: #fff; border-radius: 999px; padding: 8px 13px; cursor: pointer; font: 500 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); box-shadow: var(--ov-card-shadow); }
.dd2-chip:hover { background: var(--a2-color-neutral-10); border-color: var(--a2-color-neutral-200); }
.acbody .acomp { margin-top: 4px; }

/* ════════ contextual Ask Atlas hover trigger + popover ════════ */
.aa-spark { position: fixed; z-index: 70; width: 28px; height: 28px; border: 1px solid var(--a2-color-neutral-80); border-radius: 50%; background: #fff; box-shadow: none; display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.aa-spark.show { display: inline-flex; }
.aa-spark svg { width: 19px; height: 19px; display: block; }
.aa-spark:hover { box-shadow: none; background: var(--a2-color-neutral-10); }
.aa-pop { position: fixed; z-index: 75; width: 264px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--a2-color-neutral-80); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,17,24,.2), 0 2px 8px rgba(15,17,24,.08); padding: 12px; }
.aa-pop__head { display: flex; align-items: center; gap: 7px; font: 700 10px/1.2 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin-bottom: 10px; }
.aa-pop__mark { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.aa-pop__mark svg { width: 17px; height: 17px; }
.aa-x { margin-left: auto; width: 22px; height: 22px; border: 0; background: transparent; color: var(--a2-color-neutral-400); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.aa-x:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-900); }
.aa-x svg { width: 13px; height: 13px; }
.aa-pop__chips { display: flex; flex-direction: column; gap: 6px; }
.aa-chip { width: 100%; text-align: left; border: 1px solid var(--a2-color-neutral-100); background: #fff; border-radius: 999px; padding: 8px 12px; cursor: pointer; font: 500 12.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.aa-chip:hover { background: var(--a2-color-neutral-10); border-color: var(--a2-color-neutral-200); }
.aa-q { font: 600 12.5px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-900); margin-bottom: 7px; }
.aa-a { font: 400 12.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.aa-pop__foot { margin-top: 11px; }
.aa-view { width: 100%; border: 0; border-radius: 9px; background: var(--a2-color-neutral-900); color: #fff; cursor: pointer; padding: 9px 12px; font: 600 12.5px/1 var(--a2-font-family-base); }
.aa-view:hover { background: var(--a2-color-neutral-950); }
.aa-pop__input { display: flex; align-items: center; gap: 6px; margin-top: 10px; height: 38px; border: 1px solid var(--a2-color-neutral-100); border-radius: 999px; padding: 0 5px 0 13px; }
.aa-pop__input:focus-within { border-color: var(--a2-color-neutral-400); }
.aa-pop__input input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.aa-send { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--a2-color-neutral-900); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.aa-send svg { width: 15px; height: 15px; }
.dcard, .dt__row, .fseg-chip { position: relative; }
.nw-list { display: flex; flex-direction: column; gap: 10px; }
.nw-eyebrow { font: 700 11px/1 var(--a2-font-family-base); letter-spacing: .08em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin: 6px 2px 1px; }
.nw-eyebrow:first-child { margin-top: 0; }
.nwcard { position: relative; background: #fff; border: var(--ov-card-border); box-shadow: var(--ov-card-shadow); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 0px; transition: opacity 200ms ease, transform 200ms ease; }
.nwcard.is-leaving { overflow: hidden; opacity: 0; transform: translateY(-4px); max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: -10px; pointer-events: none; transition: max-height 320ms var(--a2-transition-ease), opacity 200ms ease, transform 240ms var(--a2-transition-ease), padding 320ms var(--a2-transition-ease), margin-bottom 320ms var(--a2-transition-ease); }
/* subtle unseen indicator on the Assigned tab */
.bv-tab__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a2-color-blue-600); display: none; }
.bv-tab.has-unseen .bv-tab__dot { display: inline-block; animation: tabDotIn 240ms var(--a2-transition-ease); }
@keyframes tabDotIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* status line: severity + metric chips left, timing far right */
.nwcard__status { display: flex; align-items: flex-start; gap: 8px; }
.nwcard__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.nwcard__status .sev { display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 var(--a2-font-family-base); letter-spacing: 0; text-transform: none; padding: 4px 8px; border-radius: 999px; }
.nwcard__status .sev--critical { background: #FCE9E6; color: #C53A28; }
.nwcard__status .sev--important { background: #FBEFD8; color: #9A6B0E; }
.mchip { display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 var(--a2-font-family-base); padding: 4px 8px; border-radius: 999px; background: #EEF1EE; color: #4B524C; }
.bchip { display: inline-flex; align-items: center; gap: 4px; font: 600 11px/1 var(--a2-font-family-base); padding: 4px 8px; border-radius: 999px; background: #FBEFD8; color: #9A6B0E; }
.bchip svg { width: 12px; height: 12px; flex: 0 0 auto; }
.nwcard__timing { margin-left: auto; flex: 0 0 auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; padding-top: 5px; }
.nwcard__timing svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* headline */
.nwcard__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nwcard__titlerow .nwcard__headline { margin-top: 0; padding-right: 0; }
.nwcard__titlerow .nwcard__timing { margin-left: 0; flex: 0 0 auto; padding-top: 1px; }
.nwcard__headline { margin-top: 8px; font: 700 15px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }

/* cause line: info icon + grey clause */
.nwcard__cause { margin-top: 4px; display: flex; align-items: center; gap: 6px; font: 400 12px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.nwcard__cause svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--a2-color-neutral-400); }

/* outcome line: colored dollar + grey descriptor */
.nwcard__outcome { margin-top: 8px; font: 400 13px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.nwcard__hero { font-weight: 700; }
.nwcard__hero.is-loss { color: #C53A28; }
.nwcard__hero.is-gain { color: var(--a2-color-green-700); }
.nwcard__hero.is-warn { color: #9A6B0E; }

/* eyebrow KPI + trend label, moved into the card's top row */
.nwcard__toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nwcard__toprow .nwcard__timing { margin-left: 0; flex: 0 0 auto; align-self: center; }
.nwcard__toprow .nwcard__outcome { margin: 0 !important; }
.nwcard__outcome { display: inline-flex; align-items: center; gap: 6px; }
.nwcard__trend { width: 14px; height: 14px; flex: 0 0 auto; color: #C53A28; }
.nwcard__trend--msg { color: #0C447C; }
.nwcard__trend--task { color: #3C3489; }
.nwcard__trend--auto { color: var(--a2-color-green-700); }
.nwcard__trend--warn { color: #9A6B0E; }
.rd__headicon { width: 16px; height: 16px; flex: 0 0 auto; color: #C53A28; }
.rd__headicon--auto { color: var(--a2-color-green-700); }
/* "View Recommendations" disclosure on AI recommendation cards */
.nwc-rec { margin-top: 14px; }
.nwc-rec__toggle { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 0; cursor: pointer; font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.nwc-rec__pm { flex: 0 0 auto; width: 22px; height: 22px; border: 1px solid var(--a2-color-neutral-200); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; font: 500 16px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.nwc-rec__toggle:hover .nwc-rec__pm { border-color: var(--a2-color-neutral-300); background: var(--a2-color-neutral-20); }
.nwc-rec__body { margin-top: 10px; }
.nwc-rec__list { margin: 0; padding-left: 31px; display: flex; flex-direction: column; gap: 7px; }
.nwc-rec__list li { font: 400 13.5px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.nwc-rec__list li::marker { color: var(--a2-color-neutral-400); }
.nwcard__eyekpi { color: var(--a2-color-neutral-700); }

/* fix-type chips (hidden in Needs Attention cards) */
.fixchip { display: none; }
.fixchip-legacy { position: relative; display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--a2-font-family-base); padding: 5px 9px; border-radius: 999px; white-space: nowrap; cursor: default; }
.fixchip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.fixchip--auto { background: #E7F0FB; color: #1A5DA0; }
.fixchip--human { background: #FBEFD8; color: #8A5A0B; }
.fixchip--config { background: #E7F3EC; color: #2C7A4B; }
.fixchip:focus-visible { outline: var(--a2-focus-ring-width) solid var(--a2-focus-ring-color); outline-offset: 2px; }
/* tooltip above the chip on hover/focus */
.fixchip__tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); width: 220px; max-width: 240px; background: var(--a2-color-neutral-950); color: #fff; font: 400 11.5px/1.45 var(--a2-font-family-base); padding: 8px 10px; border-radius: 8px; box-shadow: var(--a2-shadow-medium); opacity: 0; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; z-index: 40; text-align: left; white-space: normal; }
.fixchip__tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--a2-color-neutral-950); }
.fixchip:hover .fixchip__tip, .fixchip:focus .fixchip__tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* action row: buttons left */
.nwcard__action { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 16px; }
.nwcard__action-btns { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nw-skip { display: inline-flex; height: 40px; padding: 8px 12px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border-radius: 16px; border: 1px solid #E9EEF2; background: var(--background-color, #fff); box-shadow: 0 1px 2px 0 rgba(42, 42, 42, 0.06); cursor: pointer; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.nw-skip:hover { color: var(--a2-color-neutral-900); background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-200); }
.nw-assign { display: inline-flex; height: 40px; padding: 8px 12px; align-items: center; justify-content: center; border-radius: 16px; border: 1px solid #E9EEF2; background: var(--background-color, #fff); box-shadow: 0 1px 2px 0 rgba(42, 42, 42, 0.06); color: var(--a2-color-neutral-800); font: 600 13px/1 var(--a2-font-family-base); cursor: pointer; }
.nw-assign:hover { background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-200); color: var(--a2-color-neutral-900); }-neutral-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.nw-assign:hover { background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-200); color: var(--a2-color-neutral-900); }
.nw-assign svg { width: 17px; height: 17px; }


/* quick-assign popover */
.asg-pop { position: fixed; z-index: 80; width: 248px; background: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(15,17,24,.2), 0 2px 8px rgba(15,17,24,.08); border: 1px solid var(--a2-color-neutral-80); padding: 8px; }
.asg-pop__head { font: 700 10px/1.2 "Inter", "Nunito Sans", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--a2-color-neutral-500); padding: 6px 8px 8px; }
.asg-pop__list { display: flex; flex-direction: column; }
.asg-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 8px; border-radius: 9px; }
.asg-opt:hover { background: var(--a2-color-neutral-10); }
.asg-opt__av { width: 30px; height: 30px; flex: 0 0 auto; font-size: 12px; }
.asg-opt__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.asg-opt__name { font: 600 13px/1.2 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-900); }
.asg-opt__role { font: 400 11.5px/1.2 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-500); }

/* ════════ Assigned tab ════════ */
.atgroup { margin-bottom: 18px; }
.atgroup:last-child { margin-bottom: 0; }
.atgroup .nw-eyebrow { margin: 0 2px 10px; }
.atcard { display: flex; flex-direction: column; gap: 10px; }
.atask { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: #fff; border: var(--ov-card-border); box-shadow: var(--ov-card-shadow); border-radius: 16px; }
.atask--alert { background: #FCF4EF; }
.atask .avatar { width: 34px; height: 34px; flex: 0 0 auto; font: 700 12.5px/1 var(--a2-font-family-base); color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-top: 1px; }
.atask__main { flex: 1 1 auto; min-width: 0; }
.atask__title { font: 700 15px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.atask__person { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.atask__who { font: 400 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.atask__stakes { margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atask__atrisk { font: 600 12px/1.3 var(--a2-font-family-base); color: #C53A28; }
.atask__result { font: 400 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.atask__right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.atask__due { font: 600 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; }
.atask__due--over { color: #C53A28; }
.atask__actions { display: flex; align-items: center; gap: 6px; }
.atbtn { display: inline-flex; height: 40px; padding: 8px 12px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border-radius: 16px; border: 1px solid #E9EEF2; background: var(--background-color, #fff); box-shadow: 0 1px 2px 0 rgba(42, 42, 42, 0.06); cursor: pointer; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.atbtn:hover { color: var(--a2-color-neutral-900); background: var(--a2-color-neutral-20); }
.atmore { width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; color: var(--a2-color-neutral-400); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.atmore:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-700); }
.atmore svg { width: 16px; height: 16px; }
/* pills reused on the person/stakes lines */
.apill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font: 600 11px/1 var(--a2-font-family-base); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.apill svg { width: 12px; height: 12px; flex: 0 0 auto; }
.apill--scheduled { background: #EEF1EE; color: #5C615C; }
.apill--neutral { background: #EEF1EE; color: #5C615C; }
.apill--ok { background: #E7F3EC; color: #2C7A4B; }
.apill--over { background: #FCE9E6; color: #C53A28; }
.atask.is-new-row { animation: nwrowin 380ms var(--a2-transition-ease); }
.task.is-bounced { opacity: .6; }
.bounce-tag { display: inline-block; margin-left: 8px; font: 700 9.5px/1 var(--a2-font-family-base); letter-spacing: .03em; text-transform: uppercase; color: var(--a2-color-red-700); background: var(--a2-background-color-danger-faint); border-radius: 999px; padding: 3px 7px; vertical-align: 1px; }
.task.is-new-row { animation: nwrowin 380ms var(--a2-transition-ease); }
@keyframes nwrowin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* task list — compact rows */
.tasks { background: #fff; border: var(--ov-card-border); box-shadow: var(--ov-card-shadow); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.trow { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--a2-color-neutral-70); padding: 11px 13px; cursor: pointer; font-family: var(--a2-font-family-base); transition: background 120ms ease; }
.trow:first-child { border-top: 0; }
.trow:hover { background: var(--a2-color-neutral-10); }
.trow__bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--st); flex: 0 0 auto; }
.trow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trow__title { display: flex; align-items: center; gap: 7px; font: 600 13.5px/1.25 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.trow__badge { flex: 0 0 auto; font: 700 9.5px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; color: var(--st); background: var(--st-bg); border: 1px solid var(--st-bd); border-radius: 999px; padding: 3px 6px; }
.trow__ctx { font: 400 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow__arrow { flex: 0 0 auto; color: var(--a2-color-neutral-300); display: inline-flex; transition: color 120ms ease, transform 120ms ease; }
.trow__arrow svg { width: 16px; height: 16px; display: block; }
.trow:hover .trow__arrow { color: var(--a2-color-neutral-600); transform: translateX(2px); }

/* prompt chips pinned above the composer (brief mode only) */
.brief-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-bottom: 10px; }
.chat.is-convo .brief-chips { display: none; }
.convo-view .chat__thread { padding-top: 4px; padding-bottom: 124px; }
.chat.is-convo.has-sugg .convo-view .chat__thread { padding-bottom: 178px; }
.convo__back { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; flex: 0 0 auto; margin: 0; padding: 16px 22px 10px; border: 0; background: transparent; cursor: pointer; font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.convo__back:hover { color: var(--a2-color-neutral-900); }
.convo__back svg { width: 16px; height: 16px; }

/* daily-brief opener — neutral monochrome card (Carto) */
.brief { border-radius: 18px; padding: 20px; background: var(--a2-color-neutral-20); border: 1px solid var(--a2-color-neutral-70); }
.brief__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.brief__h { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.25; color: var(--a2-color-neutral-900); }
.brief__h b { color: var(--a2-color-neutral-900); font-weight: 600; }
.brief__p { margin: 10px 0 0; font: 400 14px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.brief__p b { color: var(--a2-color-neutral-900); font-weight: 600; }

/* brief action items — scannable, tappable rows */
.brief__items { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.bitem { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--a2-color-neutral-70); border-left: 3px solid var(--st); border-radius: 10px;
  padding: 11px 11px 11px 13px; transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; font-family: var(--a2-font-family-base); }
.bitem:hover { background: var(--a2-color-neutral-10); box-shadow: var(--a2-shadow-xsmall); }
.bitem.is-active { background: #fff; border-color: var(--a2-color-neutral-300); border-left-color: var(--st); box-shadow: 0 0 0 1px var(--st) inset, 0 0 0 1px var(--st); }
.bitem__ico { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--st-bg); color: var(--st); margin-top: 1px; }
.bitem__ico svg { width: 15px; height: 15px; }
.bitem__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bitem__label { font: 600 13.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.bitem__ctx { font: 400 12px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.bitem__arrow { flex: 0 0 auto; color: var(--a2-color-neutral-300); margin-top: 4px; transition: color 120ms ease, transform 120ms ease; }
.bitem__arrow svg { width: 16px; height: 16px; display: block; }
.bitem:hover .bitem__arrow { color: var(--a2-color-neutral-600); transform: translateX(2px); }
.brief__more { margin-top: 12px; border: 0; background: transparent; padding: 0; cursor: pointer; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.brief__more:hover { color: var(--a2-color-neutral-900); }

/* ── Carto chat: user = grey bubble, Atlas = hexagon label + plain text ── */
.umsg { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding-left: 24px; }
.umsg__bubble { background: var(--a2-color-neutral-30); color: var(--a2-color-neutral-900); padding: 11px 16px; border-radius: 18px; font: 400 14px/1.5 var(--a2-font-family-base); max-width: 100%; }
.umsg__meta { display: inline-flex; align-items: center; gap: 7px; font: 400 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-400); }
.umsg__meta button { border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--a2-color-neutral-400); display: inline-flex; }
.umsg__meta button:hover { color: var(--a2-color-neutral-700); }
.umsg__meta svg { width: 13px; height: 13px; }

.amsg { display: flex; flex-direction: column; gap: 8px; }
.amsg__head { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.amsg__logo { width: 18px; height: 18px; flex: 0 0 auto; }
.amsg__logo img { width: 100%; height: 100%; display: block; }
.btn__ico { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.act__ico { width: 14px; height: 14px; flex: 0 0 auto; display: block; }
.amsg__body { font: 400 14px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.amsg__body b { font-weight: 600; color: var(--a2-color-neutral-900); }
.amsg__body p { margin: 0; }
.amsg__body p + p { margin-top: 9px; }

/* tiny inline stat strip inside an Atlas answer */
.minibars { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.minibar { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 9px; }
.minibar__l { font: 600 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); display: inline-flex; align-items: center; gap: 5px; }
.minibar__l .dot { width: 8px; height: 8px; border-radius: 2px; }
.minibar__t { height: 9px; border-radius: 999px; background: var(--a2-color-neutral-60); overflow: hidden; }
.minibar__f { display: block; height: 100%; border-radius: 999px; }
.minibar__v { font: 600 12px/1 var(--a2-font-family-base); text-align: right; color: var(--a2-color-neutral-800); font-variant-numeric: tabular-nums; }

/* suggestion chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 40px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); background: var(--a2-color-neutral-30); border: 1px solid var(--a2-color-neutral-100); border-radius: 999px; padding: 9px 15px; cursor: pointer; box-shadow: 0 1px 2px rgba(15,17,24,.05); transition: background 120ms ease, box-shadow 120ms ease; }
.chip:hover { background: var(--a2-color-neutral-50); box-shadow: 0 2px 6px rgba(15,17,24,.10); }
.chip svg { width: 14px; height: 14px; }

/* input — floating, centered command bar */
.sugg-chips { display: none; margin-bottom: 10px; }
.sugg__lead { font: 600 12px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-500); margin-bottom: 8px; }
.sugg__row { display: flex; flex-wrap: wrap; gap: 8px; }
/* revealed only when the bar is hovered or focused */
.chat__input:hover .sugg-chips, .chat__input:focus-within .sugg-chips, .chat__input.is-open .sugg-chips { display: block; animation: suggIn 200ms var(--a2-transition-ease); }
@keyframes suggIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat__input { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; width: min(680px, 52vw); padding: 0; border-top: 0; background: none; z-index: 50; }

/* ── PromptBar (carto) ───────────────────────────────────────────────────────
   Rounded container that reshapes idle → draft: in idle all four controls sit
   on one row; once there's text the editor lifts to its own full-width row and
   the controls anchor to a bottom row. Tokens mapped from carto prompt-bar:
   radius.generous=18 · padding=spacing.base=16 · gap=spacing.condensed=8 ·
   elevation=shadow.raised.resting. Floating placement gets a slightly stronger
   ambient shadow so it separates from scrolling content behind it. */
.promptbar { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.promptbar__bar {
  box-sizing: border-box; padding: 16px; background: #fff;
  border: 1px solid var(--a2-color-neutral-100); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15,17,24,.14), 0 2px 8px rgba(15,17,24,.08);
  transition: border-color 200ms cubic-bezier(0,0,.4,1);
}
.promptbar__bar:focus-within { border-color: var(--a2-color-neutral-300); }
.promptbar__body {
  display: grid; align-items: center; column-gap: 8px; row-gap: 8px; min-width: 0;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "attach editor mic primary";
}
/* draft: editor on its own top row, controls anchored on a bottom row */
.promptbar__bar[data-mode="draft"] .promptbar__body {
  grid-template-areas:
    "editor editor editor editor"
    "attach spacer  mic    primary";
}
.pb__attach { grid-area: attach; }
.pb__editor { grid-area: editor; display: flex; align-items: center; min-width: 0; }
.pb__mic    { grid-area: mic; }
.pb__send   { grid-area: primary; }
/* pull the leading control left in draft so its icon optically aligns with the editor above */
.promptbar__bar[data-mode="draft"] .pb__attach { margin-inline-start: -8px; }

.pb__editor input {
  width: 100%; min-width: 0; height: 24px; border: 0; outline: 0; background: transparent;
  font: 400 16px/1.5 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-900);
}
.pb__editor input::placeholder { color: var(--a2-color-neutral-400); }

.pb__btn {
  width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: background-color 200ms cubic-bezier(0,0,.4,1), color 200ms cubic-bezier(0,0,.4,1);
}
.pb__btn svg { width: 20px; height: 20px; display: block; }
.pb__btn--ghost { background: transparent; color: var(--a2-color-neutral-600); }
.pb__btn--ghost:hover { background: color-mix(in srgb, var(--a2-color-neutral-950) 6%, transparent); color: var(--a2-color-neutral-900); }
.pb__btn--primary { background: var(--a2-color-blue-600); color: #fff; }
.pb__btn--primary:hover:not(:disabled) { background: var(--a2-color-blue-700); }
.pb__btn--primary:active:not(:disabled) { background: var(--a2-color-blue-800); }
.pb__btn--primary:disabled { background: var(--a2-color-neutral-50); color: var(--a2-color-neutral-300); cursor: not-allowed; }
.pb__btn:focus-visible { outline: 2px solid var(--a2-color-blue-600); outline-offset: 2px; }

.promptbar__disclaimer { margin: 0; padding-inline: 8px; text-align: center; font: 400 12px/1.4 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-500); }
.promptbar__disclaimer a { color: inherit; text-decoration: underline; }

/* ═══════════════════════════ Right — owner content ═══════════════════════════ */
.main { overflow-y: auto; overflow-x: hidden; padding: 24px 24px 96px; scrollbar-width: none; -ms-overflow-style: none; position: relative; min-width: 0; }
.main::-webkit-scrollbar { width: 0; height: 0; display: none; }
.chat__thread, .brief-view { scrollbar-width: none; -ms-overflow-style: none; }
.chat__thread::-webkit-scrollbar, .brief-view::-webkit-scrollbar { width: 0; height: 0; display: none; }
.main__greet { margin-bottom: 26px; }
.main__h { margin: 0; font-size: 36px; font-weight: 500; line-height: 1.04; color: var(--a2-color-neutral-900); }
.main__sub { margin: 12px 0 0; font: 400 16px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-600); max-width: 64ch; }
.main__sub b { color: var(--a2-color-neutral-900); font-weight: 600; }

.sec { margin-top: 30px; }
.sec--sankey { margin-top: 24px; }
.sec:first-child { margin-top: 0; }
.ah-sec { margin-top: 24px; }

/* ── automation health ── */
.ah-card { background: transparent; border-radius: 0; box-shadow: none; padding: 0; }
.ah-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ah-title { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; color: var(--a2-color-neutral-900); display: inline-flex; align-items: baseline; gap: 12px; }
.ah-seeall { font: 500 13px/1 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-600); text-decoration: none; letter-spacing: 0; }
.ah-seeall:hover { color: var(--a2-color-neutral-900); text-decoration: underline; }
.ah-range { font: 400 12.5px/1 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-500); }
.ah-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ah-tile { border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #fff; box-shadow: var(--ov-card-shadow); text-align: left; border: 1px solid transparent; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; font-family: inherit; }
.ah-tile:hover { box-shadow: 0 2px 12px rgba(42,42,42,.16); }
.ah-tile.is-active { border-color: #2E7BF0; background: #EAF2FE; box-shadow: 0 0 0 1px #2E7BF0; }

/* automation table */
.ah-table { margin-top: 16px; background: #fff; border: 1px solid var(--a2-color-neutral-80); border-radius: 10px; box-shadow: none; overflow: hidden; }
.ah-table[hidden] { display: none; }
.aht__cols, .aht__row { display: grid; grid-template-columns: 1.1fr 1.8fr 0.7fr; gap: 16px; align-items: center; padding: 11px 12px; }
.aht--watch .aht__cols, .aht--watch .aht__row { grid-template-columns: 1fr 1.4fr 1.6fr; }
.aht__cols--watch span:last-child, .aht--watch .aht__action { text-align: right; justify-content: flex-end; }
.aht__why { font: 400 13px/1.4 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-600); }
.aht__suggest { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--a2-color-neutral-200); background: #fff; color: var(--a2-color-neutral-800); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease; }
.aht__suggest:hover { background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-300); }
.aht__suggest svg { width: 16px; height: 16px; }
.aht__cols { background: var(--a2-color-neutral-30); font: 700 11px/1 "Inter", "Nunito Sans", system-ui, sans-serif; letter-spacing: normal; text-transform: none; color: var(--a2-color-neutral-800); border-bottom: 1px solid var(--a2-color-neutral-70); }
.aht__row { border-top: 1px solid var(--a2-color-neutral-50); }
.aht__row:first-of-type { border-top: 0; }
.aht__cols span:last-child { text-align: right; }
.aht__cols--watch span:last-child { text-align: left; }
.aht__name { font: 500 12.5px/1.4 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-900); }
.aht__desc { font: 400 12.5px/1.4 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-600); }
.aht__run { font: 400 12.5px/1.4 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-500); text-align: right; font-variant-numeric: tabular-nums; }
.aht__action { display: flex; justify-content: flex-end; }
.aht__activate { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--a2-color-neutral-200); background: #fff; color: var(--a2-color-neutral-800); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.aht__activate:hover { background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-300); }
.aht__activate svg { width: 15px; height: 15px; }
.aht__activate.is-done { background: #E9F6EF; border-color: #1B8A5A; color: #1B8A5A; cursor: default; }
.ah-tile__num { font: 700 20px/1.25 var(--a2-font-family-base); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #1B1B1A; }
.ah-tile__lbl { font: 700 10px/1.2 "Inter", "Nunito Sans", system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--a2-color-neutral-500); display: inline-flex; align-items: center; gap: 6px; }
.ah-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.ah-dot--good { background: #1B8A5A; }
.ah-dot--watch { background: #E08A1E; }
.ah-dot--ready { background: var(--a2-color-neutral-400); }
.ah-tile--good { background: #fff; }
.ah-tile--watch { background: #fff; }
.ah-tile--error { background: #fff; }
.ah-tile--ready { background: #fff; }
.ah-note { margin: 16px 0 0; font: 400 14px/1.45 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-600); }
.ah-note b { color: #C53A28; font-weight: 700; }
@media (max-width: 560px) { .ah-tiles { grid-template-columns: 1fr; } }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec__title { font-family: var(--a2-font-family-base); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--a2-color-neutral-900); }
.sec__note { font: 500 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }

/* ═══════════════════════ revenue pipeline funnel ═══════════════════════ */
.rf { width: 100%; container-type: inline-size; container-name: rfwrap; }
.rf__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.rf__topl { display: inline-flex; align-items: center; gap: 12px; }
.seeall-btn { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--a2-color-neutral-700); font: 600 12.5px/1 "Inter", "Nunito Sans", system-ui, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--a2-duration-fast) var(--a2-transition-ease), color var(--a2-duration-fast) var(--a2-transition-ease); }
.seeall-btn:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-900); }
.seeall-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.seeall-btn:focus-visible { outline: 2px solid var(--a2-color-blue-600); outline-offset: 2px; }
.rf__foot { display: flex; justify-content: flex-end; align-items: center; gap: 0; margin-top: 14px; }
.rf__viewwrap { display: inline-flex; align-items: center; gap: 0; }
.rf__togtoggle { width: 22px; height: 22px; border: 0; background: transparent; color: var(--a2-color-neutral-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto; }
.rf__togtoggle:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-700); }
.rf__togtoggle svg { width: 15px; height: 15px; transition: transform 200ms var(--a2-transition-ease); }
.rf__foot.is-open .rf__togtoggle svg, .rf__viewwrap.is-open .rf__togtoggle svg { transform: rotate(180deg); }
.rf__viewtog { display: inline-flex; gap: 2px; padding: 2px; background: var(--a2-color-neutral-20); border: 1px solid var(--a2-color-neutral-70); border-radius: 999px; max-width: 0; overflow: hidden; opacity: 0; padding: 0; border-width: 0; margin-left: 0; transition: max-width 240ms var(--a2-transition-ease), opacity 180ms var(--a2-transition-ease), margin-left 200ms var(--a2-transition-ease); }
.rf__foot.is-open .rf__viewtog, .rf__viewwrap.is-open .rf__viewtog { max-width: 180px; opacity: 1; padding: 2px; border-width: 1px; margin-left: 8px; }
.rf__vtab { border: 0; background: transparent; cursor: pointer; padding: 3px 9px; border-radius: 999px; font: 600 10px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); white-space: nowrap; }
.rf__vtab:hover { color: var(--a2-color-neutral-900); }
.rf__vtab.is-active { background: #fff; color: var(--a2-color-neutral-900); box-shadow: 0 1px 2px rgba(15,17,24,.08); }
.rf__title { font: 600 17px/1.1 var(--a2-font-family-base); letter-spacing: -0.01em; color: var(--a2-color-neutral-900); display: inline-flex; align-items: baseline; gap: 12px; }
.rf__sub { margin-top: 4px; font: 400 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rf__controls { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.rf__configure { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; background: transparent; cursor: pointer; font: 500 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); white-space: nowrap; transition: background 140ms ease; }
.rf__configure:hover { background: var(--a2-color-neutral-20); }
.rf__configure:focus-visible { outline: var(--a2-focus-ring-width) solid var(--a2-focus-ring-color); outline-offset: var(--a2-focus-ring-offset); }
.rf__configure svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--a2-color-neutral-500); }
.rf__configure-ic { width: 16px !important; height: 16px !important; color: var(--a2-color-neutral-900); }
.rf__configure .material-icons-round { font-size: 16px; flex: 0 0 auto; color: var(--a2-color-neutral-500); }
.rf__peers[hidden] { display: none; }
.rf__cmp-label { font: 500 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; }
.rf__filter { position: relative; display: inline-flex; align-items: center; }
.rf__select { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; appearance: none; -webkit-appearance: none; cursor: pointer; font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); background: var(--background-color, #fff); border: 1px solid #E9EEF2; box-shadow: 0 1px 2px 0 rgba(42, 42, 42, 0.06); border-radius: 999px; }
.rf__select:hover { background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-200); color: var(--a2-color-neutral-900); }
.rf__select-chev { width: 14px; height: 14px; color: var(--a2-color-neutral-500); transition: transform 160ms ease; flex: 0 0 auto; }
.rf__select[aria-expanded="true"] .rf__select-chev { transform: rotate(180deg); }
.rf__menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 100%; background: #fff; border: 1px solid var(--a2-color-neutral-80); border-radius: 12px; box-shadow: var(--ov-card-shadow); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.rf__menu[hidden] { display: none; }
.rf__opt { border: 0; background: transparent; cursor: pointer; text-align: left; white-space: nowrap; font: 500 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); padding: 9px 12px; border-radius: 8px; }
.rf__opt:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-900); }
.rf__opt.is-sel { background: var(--a2-background-color-primary-faint); color: var(--a2-color-neutral-900); font-weight: 600; }
.rf__select:focus-visible { outline: 2px solid var(--a2-color-neutral-300); outline-offset: 1px; }
.rf__pill { border: 0; background: transparent; cursor: pointer; padding: 6px 12px; border-radius: 999px; font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); white-space: nowrap; transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease; }
.rf__pill:hover { color: var(--a2-color-neutral-900); }
.rf__pill.is-active { background: #fff; color: var(--a2-color-neutral-900); box-shadow: 0 1px 2px rgba(15,17,24,.08); }

.rf__body { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }

/* ═══════════════════════ formula cards ═══════════════════════ */
.formula { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; }
.fcard { position: relative; background: #fff; border: var(--ov-card-border); box-shadow: var(--ov-card-shadow); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; min-width: 0; }
.fcard--result { background: var(--a2-background-color-success-faint); }
.fop { display: flex; align-items: center; justify-content: center; width: 30px; font: 400 18px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-300); }
.fcard__top { display: flex; align-items: center; gap: 6px; }
.fcard__name { font: 500 14px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.fcard__info { width: 15px; height: 15px; border-radius: 50%; background: var(--a2-color-neutral-700); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 9px/1 var(--a2-font-family-base); cursor: help; flex: 0 0 auto; }
.fcard__valrow { display: flex; align-items: baseline; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.fcard__val { font: 700 30px/1 var(--a2-font-family-base); letter-spacing: -0.02em; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.fcard--result .fcard__val { color: var(--a2-color-green-700); }
.fcard__delta { display: inline-flex; align-items: center; gap: 2px; font: 700 12.5px/1 var(--a2-font-family-base); font-variant-numeric: tabular-nums; }
.fcard__delta svg { width: 12px; height: 12px; }
.fcard__delta--up { color: var(--a2-color-green-600); }
.fcard__delta--down { color: var(--a2-color-red-600); }
.fcard__desc { margin-top: 7px; font: 400 12px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.fcard__bench { margin-top: auto; padding-top: 14px; }
.fbar { position: relative; height: 5px; border-radius: 999px; background: var(--a2-color-neutral-100); overflow: visible; }
.fbar__fill { display: block; height: 100%; border-radius: 999px; }
.fbar__fill--green { background: var(--a2-color-green-500); }
.fbar__fill--amber { background: var(--a2-color-yellow-500); }
.fbar__fill--red { background: var(--a2-color-red-500, #f0432a); }
.fbar__tick { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--a2-color-neutral-600); }
.fbench { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.fbench__peer { font: 500 11px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.fbench__gap { font: 700 11.5px/1 var(--a2-font-family-base); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fbench__gap--ahead { color: var(--a2-color-green-600); }
.fbench__gap--behind { color: var(--a2-color-red-600); }
/* tooltip */
.tip { position: relative; }
.tip__pop { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: 230px; background: var(--a2-color-neutral-950); color: #fff; font: 400 11.5px/1.45 var(--a2-font-family-base); letter-spacing: 0; text-transform: none; padding: 9px 11px; border-radius: 8px; box-shadow: var(--a2-shadow-medium); opacity: 0; visibility: hidden; transition: opacity 120ms ease; z-index: 30; pointer-events: none; text-align: left; font-weight: 400; }
.tip__pop::before { content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px; background: var(--a2-color-neutral-950); }
.tip:hover .tip__pop { opacity: 1; visibility: visible; }
@media (max-width: 1180px) {
  .formula { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fop { display: none; }
}

/* ── vertical funnel (one continuous SVG) ── */
.rf__chart { display: flex; flex-direction: column; gap: 0; }
.rf__grid { display: grid; grid-template-columns: 1fr 188px; align-items: stretch; gap: 14px; }
.rf__labels { display: flex; flex-direction: column; }
.frow__label { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.frow__name { display: inline-flex; align-items: center; font: 700 11px/1.2 var(--a2-font-family-base); letter-spacing: .06em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.frow__info { width: 15px; height: 15px; border-radius: 50%; background: var(--a2-color-neutral-300); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 9px/1 var(--a2-font-family-base); flex: 0 0 auto; }
.frow__rule { height: 1px; background: var(--a2-color-neutral-70); margin: 6px 0; }
.frow__delta { display: inline-flex; align-items: center; gap: 5px; font: 700 14px/1 var(--a2-font-family-base); }
.frow__delta svg { width: 14px; height: 14px; }
.frow__delta--up { color: var(--a2-color-green-600); }
.frow__delta--down { color: var(--a2-color-red-600); }
.frow__lead { flex: 1; min-width: 14px; height: 0; align-self: center; border-top: 1px dotted var(--a2-color-neutral-200); margin-left: 2px; }
.rf__grid { column-gap: 0; }
.rf__funnel { position: relative; }
.rf-funnel-svg { display: block; width: 100%; height: 100%; }
.rf-funnel-svg .fseg { cursor: pointer; transition: opacity 200ms ease; }
.fseg-chip { position: absolute; left: 50%; transform: translate(-50%, -50%); min-width: 48px; height: 28px; padding: 0 9px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(15,17,24,.16); display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--a2-font-family-base); color: var(--a2-color-blue-900); font-variant-numeric: tabular-nums; cursor: pointer; transition: opacity 200ms ease; }
.rf__chart.has-sel .is-dim { opacity: .3; }
.fitem { transition: opacity 200ms ease; }
.rf__caption { margin: 14px 0 0; text-align: center; font: 400 12px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rf__caption b { color: var(--a2-color-neutral-800); font-weight: 700; }

/* ───────────── Drivers view ───────────── */
/* peers toggle */
.rf__peers { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); padding: 4px 2px; }
.rf__peers-sw { width: 30px; height: 18px; border-radius: 999px; background: var(--a2-color-neutral-200); position: relative; transition: background 140ms ease; flex: 0 0 auto; }
.rf__peers-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform 140ms ease; }
.rf__peers.is-on { color: var(--a2-color-neutral-900); }
.rf__peers.is-on .rf__peers-sw { background: var(--a2-color-green-600); }
.rf__peers.is-on .rf__peers-knob { transform: translateX(12px); }

/* four horizontal metric cards (container-query responsive: 4-up, then 2-up) */
.dcards { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; background: var(--a2-background-color-default, #fff); border: 1px solid #E6E6E6; box-shadow: none; border-radius: 16px; padding: 16px; }
/* when the panel narrows, metrics wrap 2-up and the formula operators hide */
@container rfwrap (max-width: 600px) {
  .dcards { row-gap: 20px; }
  .dcards .dcard { flex: 1 1 40%; }
  .dcards .dcard-op { display: none; }
}
@container rfwrap (max-width: 600px) { .dcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dcard__name, .dcard__val, .dcard__bar .pbar__lbl { white-space: nowrap; }
.dcard-op { display: none; }
.dcard { flex: 1 1 120px; min-width: 0; text-align: left; background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; cursor: default; display: flex; flex-direction: column; gap: 0; font-family: var(--a2-font-family-base); }
.dcards > .dcard:last-child { padding-right: 0; }
.dcard { min-height: 178px; }
.dcard:hover { border-color: transparent; }
.dcard.is-active { border: 0; background: transparent; box-shadow: none; }
.dcard--focus { border: none; }
.dcard--focus.is-active { border: 0; background: transparent; box-shadow: none; }
.dcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dcard__name { font: 700 10px/1.2 "Inter", "Nunito Sans", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--a2-color-neutral-500); display: inline-flex; align-items: center; gap: 6px; }
.dcard__delta { font: 400 12px/1 var(--a2-font-family-base); font-variant-numeric: tabular-nums; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; }
.dcard__delta svg { width: 13px; height: 13px; }
.dcard__delta--up { color: #2C7A4B; }
.dcard__delta--down { color: #C53A28; }
.dcard__val { font: 700 20px/1.25 var(--a2-font-family-base); letter-spacing: -0.02em; color: #1B1B1A; font-variant-numeric: tabular-nums; }
.dcard__valrow { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.dcard__chiprow { display: flex; margin-top: 8px; }
.dcard__valrow .dcard__val { flex: 0 0 auto; }
.dcard__valrow .dcard__delta { white-space: nowrap; }
.dcard__val small { font-size: 14px; font-weight: 400; color: #9AA09A; margin-left: 5px; letter-spacing: 0; }
.dcard__gap { font: 500 11.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); margin-top: 6px; }
.dcard__divider { height: 0; background: transparent; margin: auto 0 10px; }
.dcard__stats { display: flex; align-items: stretch; }
.dcard__stat { flex: 1 1 0; min-width: 0; }
.dcard__stat + .dcard__stat { border-left: 0.5px solid var(--a2-border-color-subdued); padding-left: 12px; }
.dcard__stat-lbl { font: 500 9px/1.3 var(--a2-font-family-base); letter-spacing: 0.04em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin-bottom: 2px; }
.dcard__stat-val { font: 500 12px/1.3 var(--a2-font-family-base); font-variant-numeric: tabular-nums; }
.dcard__stat-val--up { color: var(--a2-color-green-700); }
.dcard__stat-val--down { color: var(--a2-color-red-600); }
.dcard--focus .dcard__gap { color: var(--a2-color-neutral-500); }
.dcard__bar { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 8px; }
.dhelp { display: flex; align-items: center; gap: 6px; font: 500 11.5px/1.3 var(--a2-font-family-base); color: #6E726F; margin-bottom: 12px; }
.dhelp svg { width: 14px; height: 14px; min-width: 14px; flex: 0 0 auto; color: var(--a2-color-neutral-400); }
.dcard__bar .pbar { min-width: 0; width: 100%; height: 10px; background: #EEEEEE; border: 0; border-radius: 999px; flex: 0 0 auto; position: relative; }
.dcard__bar .pbar__fill { background: #0265DC; border-radius: 999px; top: 2px; bottom: 2px; left: 2px; }
.dcard__bar .pbar--green .pbar__fill,
.dcard__bar .pbar--amber .pbar__fill,
.dcard__bar .pbar--orange .pbar__fill { background: #0265DC; }
.dcard__bar .pbar__goal { position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 0; background: #000; transform: translateX(-50%); z-index: 2; }
.dcard__bar .pbar__lbl { font-size: 12px; font-weight: 400; color: #6E726F; margin-top: 2px; }
.dcard-op { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; align-self: center; font: 400 18px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-400); }
/* "% of goal" chip on the value row */
.dcard__goalchip { flex: 0 0 auto; align-self: center; padding: 3px 8px; border-radius: 999px; font: 600 11px/1.3 var(--a2-font-family-base); white-space: nowrap; }
.dcard__goalchip--success { background: #e6f4ed; color: #1a7a4a; }
.dcard__goalchip--warning { background: #fef3dc; color: #8a5c00; }
.dcard__goalchip--danger  { background: #fde8e8; color: #9b1c1c; }
/* "Goal [value] · [gap] to go" bottom label */
.dcard__goalrow { margin-top: 8px; font: 400 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); text-align: left; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px 5px; }
.dcard__goalpart { white-space: nowrap; }
.dcard__goalsep { color: var(--a2-color-neutral-400); }
.dcard__reached { color: var(--a2-color-green-700); font-weight: 600; }
/* gap text colored by status tone */
.dcard__gap--green { color: #1a7a4a; }
.dcard__gap--amber { color: #8a5c00; }
.dcard__gap--red   { color: #9b1c1c; }
.dcard__gap--gray  { color: var(--a2-color-neutral-500); }

/* percentile bar */
.pbar { position: relative; flex: 1; min-width: 90px; height: 7px; border-radius: 999px; background: var(--a2-color-neutral-100); display: inline-block; }
.pbar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #2EA56F; }
.pbar--focus .pbar__fill { background: #E0683C; }
.pbar__tick { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--a2-color-neutral-500); border-radius: 2px; }
.pbar__lbl { font: 600 11px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; font-variant-numeric: tabular-nums; }

.dtag { display: inline-flex; align-items: center; font: 700 9px/1 var(--a2-font-family-base); letter-spacing: 0; text-transform: none; padding: 3px 6px; border-radius: 999px; }
.dtag--focus { color: #c44a26; background: color-mix(in srgb, #e8623a 14%, #fff); border: 1px solid color-mix(in srgb, #e8623a 32%, #fff); }

/* driver table (drivers view) — horizontally scrollable, pinned Driver column */
.dt__scroll { overflow-x: visible; }
.dt__inner { min-width: 0; }
.dt__cols { grid-template-columns: 1.4fr 0.9fr 0.7fr 0.7fr 1.1fr; }
.dt__row { grid-template-columns: 1.4fr 0.9fr 0.7fr 0.7fr 1.1fr; align-items: center; }
.dt__cols > span:first-child, .dt__drv { position: sticky; left: 0; z-index: 1; background: #fff; }
.dt__cols { background: var(--a2-color-neutral-30); }
.dt__cols > span:first-child { background: var(--a2-color-neutral-30); }
.dt__row--focus { background: color-mix(in srgb, #e8623a 5%, #fff); }
.dt__row--focus .dt__drv { background: color-mix(in srgb, #e8623a 5%, #fff); }
.dt__you, .dt__peers { font: 600 12.5px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.dt__peers { color: var(--a2-color-neutral-500); }
.dt__pct { display: flex; align-items: center; gap: 7px; }
.dt__status { display: flex; align-items: center; }
.dt__help { display: flex; flex-direction: column; gap: 3px; }
.dh { font: 400 11px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.dh__t { display: inline-block; font: 700 8.5px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; margin-right: 4px; vertical-align: 1px; }
.dh__t--core { color: var(--a2-color-neutral-600); background: var(--a2-color-neutral-100); }
.dh__t--pro { color: var(--a2-color-green-700); background: color-mix(in srgb, var(--a2-color-green-500) 16%, #fff); }
.dh__t--max { color: #fff; background: var(--a2-color-green-600); }
.dt__req { font: 400 11.5px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }

/* ── table ── */
.rf__tabletitle { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: var(--a2-color-neutral-900); margin: 8px 0 16px; display: flex; align-items: center; gap: 8px; }
.rf__tabletitle[hidden] { display: none; }
.rf__table { border: 1px solid var(--a2-color-neutral-80); box-shadow: none; border-radius: 10px; overflow: hidden; background: #fff; }
.rf__table:empty { display: none; }
.rft__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--a2-color-neutral-70); }
.rft__headl { display: inline-flex; align-items: center; gap: 10px; }
.rft__title { font: 600 15px/1.25 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rft__back { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-foreground-color-primary); padding: 4px 6px; border-radius: 6px; }
.rft__back:hover { background: var(--a2-background-color-primary-faint); }
.rft__back svg { width: 14px; height: 14px; }
.rft__cols { display: grid; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--a2-color-neutral-70); background: var(--a2-color-neutral-30); font: 700 11px/1 "Inter", "Nunito Sans", system-ui, sans-serif; letter-spacing: normal; text-transform: none; color: var(--a2-color-neutral-800); }
.rft__row { display: grid; gap: 12px; padding: 11px 12px; border-top: 1px solid var(--a2-color-neutral-50); align-items: center; }
.rft__row:first-of-type { border-top: 0; }
.rft__row--click { cursor: pointer; }
.rft__row--click:hover { background: var(--a2-color-neutral-10); }
.rft__row--weak { background: var(--a2-background-color-danger-faint); }
.rft-ov { grid-template-columns: 1.1fr 0.8fr 1.2fr 1.3fr auto; }
.rftc--go { display: flex; align-items: center; justify-content: flex-end; }
.rft__go { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--a2-color-neutral-400); transition: background 120ms ease, color 120ms ease; }
.rft__go svg { width: 15px; height: 15px; }
.rft__row--click:hover .rft__go { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-700); }
.rft-dd { grid-template-columns: 1.6fr auto auto; }
.rftc { min-width: 0; }
.rftc__main { font: 600 12.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rftc__convrow { display: flex; align-items: baseline; gap: 8px; }
.rftc__sub { font: 600 11px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rftc--num { text-align: right; font-variant-numeric: tabular-nums; }
.rftc__val { font: 700 12.5px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rftc__val--loss { color: var(--a2-color-red-600); }
.rft__delta { display: inline-flex; align-items: center; gap: 3px; font: 700 12px/1 var(--a2-font-family-base); justify-content: flex-end; font-variant-numeric: tabular-nums; }
.rft__delta--up { color: var(--a2-color-green-600); }
.rft__delta--down { color: var(--a2-color-red-600); }
.rft__delta--flat { color: var(--a2-color-neutral-400); }
.rft__tag { display: inline-flex; align-items: center; font: 700 9.5px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; color: var(--a2-color-red-700); background: color-mix(in srgb, var(--a2-color-red-600) 15%, #fff); border: 1px solid color-mix(in srgb, var(--a2-color-red-600) 36%, #fff); border-radius: 999px; padding: 3px 6px; margin-left: 7px; }
.rft__risk { font: 600 11.5px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.rft__risk b { color: var(--a2-color-red-600); font-weight: 700; }
.frow__name--crit { color: var(--a2-color-red-700); }
.fseg-crit { pointer-events: none; }
.rft__row--crit { background: var(--a2-background-color-danger-faint); cursor: pointer; }
.rft__row--crit:hover { background: color-mix(in srgb, var(--a2-color-red-600) 12%, #fff); }
.rft__tag--weak { color: var(--a2-color-neutral-700); background: var(--a2-color-neutral-50); border-color: var(--a2-color-neutral-200); }
.rft__tag--risk { color: var(--a2-color-yellow-800); background: color-mix(in srgb, var(--a2-color-yellow-500) 28%, #fff); border-color: color-mix(in srgb, var(--a2-color-yellow-600) 48%, #fff); }
.rftc__val--risk { color: var(--a2-color-yellow-700); }
.attn-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-left: 2px; }
.rft__nav { display: inline-flex; align-items: center; gap: 8px; }
.rft__collapse { width: 26px; height: 26px; border: 0; background: transparent; color: var(--a2-color-neutral-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: transform 160ms ease, background 120ms ease; }
.rft__collapse:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-700); }
.rft__collapse svg { width: 18px; height: 18px; }
.rf__table.is-collapsed .rft__collapse { transform: rotate(-90deg); }
.rf__table.is-collapsed .rft__cols, .rf__table.is-collapsed .rft__row { display: none; }
.rf__table.is-collapsed .rft__head { border-bottom: 0; }
.rft__navpos { font: 600 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); font-variant-numeric: tabular-nums; }
.rft__arrow { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--a2-color-neutral-100); background: #fff; color: var(--a2-color-neutral-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rft__arrow:hover { background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-200); }
.rft__arrow svg { width: 13px; height: 13px; }

/* ── Voice Intelligence recommendation in chat ── */
.vi-rec { margin-top: 12px; border: 1px solid var(--a2-color-neutral-80); border-radius: 12px; padding: 13px 15px; background: var(--a2-color-neutral-10); }
.vi-rec__label { display: inline-flex; align-items: center; gap: 6px; font: 700 10px/1 var(--a2-font-family-base); letter-spacing: .07em; text-transform: uppercase; color: var(--a2-color-blue-700); }
.vi-rec__logo { width: 14px; height: 14px; }
.vi-rec__title { margin-top: 9px; font: 600 14px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.vi-rec__desc { margin-top: 6px; font: 400 12.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.vi-rec__value { margin-top: 11px; padding: 10px 12px; border-radius: 9px; background: var(--a2-background-color-success-faint); font: 400 12.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-green-800); }
.vi-rec__value b { font-weight: 700; }
.vi-rec__value-k { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.vi-rec__conf { color: var(--a2-color-green-700); font-weight: 700; }
.vi-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── Assign-task composer ── */
.acomp { margin-top: 12px; border: 1px solid var(--a2-color-neutral-80); border-radius: 14px; background: #fff; padding: 18px; box-shadow: var(--a2-shadow-xsmall); }
.acomp__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.acomp__title { font: 600 16px/1.1 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.acomp__badge { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px/1 var(--a2-font-family-base); color: var(--a2-color-blue-700); background: var(--a2-background-color-primary-faint); border-radius: 999px; padding: 5px 9px; }
.acomp__badge svg { width: 12px; height: 12px; }
.acomp__lbl { display: flex; align-items: center; gap: 6px; font: 700 11px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin: 16px 0 8px; }
.acomp__lbl:first-of-type { margin-top: 0; }
.acomp__lbl-ico { width: 14px; height: 14px; display: inline-flex; }
.acomp__lbl-ico img { width: 100%; height: 100%; display: block; }

.ac-assignee { position: relative; }
.ac-field { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--a2-color-neutral-100); border-radius: 10px; padding: 9px 11px; cursor: pointer; font-family: var(--a2-font-family-base); }
.ac-field:hover { border-color: var(--a2-color-neutral-200); }
.ac-field__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-field__name { font: 700 13px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.ac-field__role { font: 400 11.5px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.ac-field__chev { color: var(--a2-color-neutral-400); display: inline-flex; }
.ac-field__chev svg { width: 16px; height: 16px; }
.ac-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--a2-color-neutral-100); border-radius: 10px; box-shadow: var(--a2-shadow-medium); padding: 5px; z-index: 20; }
.ac-menu[hidden] { display: none; }
.ac-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 8px 9px; cursor: pointer; font-family: var(--a2-font-family-base); }
.ac-opt:hover { background: var(--a2-color-neutral-20); }
.ac-opt__meta { display: flex; flex-direction: column; gap: 1px; }
.ac-opt__name { font: 700 12.5px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.ac-opt__role { font: 400 11px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.ac-opt__av, .aconf__av { width: 28px; height: 28px; font-size: 11px; }

.ac-task { border: 1px solid var(--a2-color-neutral-80); border-radius: 10px; padding: 11px 12px; background: var(--a2-color-neutral-10); }
.ac-task__title { font: 600 13px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.ac-task__impact { margin-top: 6px; font: 600 11.5px/1.4 var(--a2-font-family-base); color: var(--a2-color-green-700); }

.ac-msg { width: 100%; resize: vertical; border: 1px solid var(--a2-color-neutral-100); border-radius: 10px; padding: 11px 12px; font: 400 13px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-800); background: #fff; }
.ac-msg:focus-visible { outline: 2px solid var(--a2-color-neutral-300); outline-offset: 1px; border-color: transparent; }

.acomp__due { display: flex; flex-wrap: wrap; gap: 7px; }
.ac-due { border: 1px solid var(--a2-color-neutral-100); background: #fff; border-radius: 999px; padding: 7px 12px; cursor: pointer; font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.ac-due:hover { background: var(--a2-color-neutral-20); }
.ac-due[aria-pressed="true"] { background: var(--a2-color-neutral-900); color: #fff; border-color: var(--a2-color-neutral-900); }
.ac-date { margin-top: 8px; }

.acomp__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* confirmation */
.acomp--conf { padding: 16px 18px; }
.aconf__say { display: flex; gap: 11px; }
.aconf__logo { width: 26px; height: 26px; flex: 0 0 auto; }
.aconf__logo img { width: 100%; height: 100%; display: block; }
.aconf__atlas { font: 600 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); margin-bottom: 5px; }
.aconf__text { margin: 0; font: 400 13.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.aconf__text b { color: var(--a2-color-neutral-950); font-weight: 700; }
.aconf__lbl { font: 700 10.5px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin: 16px 0 8px; }
.aconf__row { display: flex; align-items: center; gap: 11px; border: 1px solid var(--a2-color-neutral-80); border-radius: 10px; padding: 11px 12px; }
.aconf__ico { width: 20px; height: 20px; flex: 0 0 auto; }
.aconf__ico img { width: 100%; height: 100%; display: block; }
.aconf__main { flex: 1; min-width: 0; }
.aconf__title { font: 600 13px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.aconf__who { margin-top: 5px; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.aconf__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.aconf__due { font: 700 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; }
.aconf__remind { flex: 0 0 auto; }
.aconf__edit { margin-top: 12px; border: 0; background: transparent; cursor: pointer; font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-foreground-color-primary); padding: 4px 2px; }
.aconf__edit:hover { text-decoration: underline; }

/* launcher */
.ac-launch { display: inline-flex; height: 40px; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; border: 1px solid #E9EEF2; background: var(--background-color, #fff); border-radius: 16px; padding: 8px 12px; box-shadow: 0 1px 2px 0 rgba(42, 42, 42, 0.06); cursor: pointer; font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.ac-launch:hover { background: var(--a2-color-neutral-20); }
.ac-launch svg { width: 15px; height: 15px; }

.vi-btn { display: inline-flex; height: 40px; align-items: center; justify-content: center; gap: 6px; border: 1px solid #E9EEF2; background: var(--background-color, #fff); border-radius: 16px; padding: 8px 12px; box-shadow: 0 1px 2px 0 rgba(42, 42, 42, 0.06); cursor: pointer; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.vi-btn:hover { background: var(--a2-color-neutral-20); }
.vi-btn--primary { background: var(--primitive-color-neutral-800, #292929); color: #fff; border-color: #292929; box-shadow: none; }
.vi-btn--primary:hover { background: #1a1a1a; }
.vi-btn:disabled { background: var(--a2-background-color-success-faint); color: var(--a2-color-green-700); border-color: transparent; cursor: default; }
.atlas-opts { margin: 8px 0 0; padding-left: 18px; font: 400 12.5px/1.6 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.atlas-opts b { color: var(--a2-color-neutral-950); font-weight: 700; }

/* ── delegated tasks awaiting resolution ── */
.dtask-list { display: flex; flex-direction: column; border: var(--ov-card-border); box-shadow: var(--ov-card-shadow); border-radius: 16px; overflow: hidden; background: #fff; }
.dtask { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--a2-color-neutral-70); }
.dtask:first-child { border-top: 0; }
.dtask__main { flex: 1; min-width: 0; }
.dtask__title { font: 600 13.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.dtask__meta { margin-top: 3px; font: 400 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.dtask__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.dtask__due { font: 700 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; }

@media (max-width: 1180px) {
  .rf__chart .frow__seg { width: 188px; }
}

/* ── metric cards (5-up, progress vs goal) ── */
.ws-title { margin: 0 0 18px; font-family: var(--a2-font-family-base); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--a2-color-neutral-900); }
.metrics-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mcard { background: #fff; border: var(--ov-card-border); box-shadow: var(--ov-card-shadow); border-radius: 16px; padding: 16px 16px 15px; display: flex; flex-direction: column; gap: 0; }
.mcard__name { font: 600 12px/1 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.mcard__val { margin-top: 10px; font: 600 26px/1 var(--a2-font-family-base); letter-spacing: -0.02em; color: var(--a2-color-neutral-900); font-variant-numeric: tabular-nums; }
.mcard__bar { margin-top: 13px; height: 7px; border-radius: 999px; background: var(--a2-color-neutral-60); overflow: hidden; }
.mcard__fill { display: block; height: 100%; border-radius: 999px; background: var(--st); }
.mcard__goal { margin-top: 9px; font: 400 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.formula-note { margin: 12px 2px 0; text-align: right; font: 400 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-400); }

/* ── revenue formula bar ── */
.formula { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; background: #fff; border: var(--ov-card-border); box-shadow: var(--ov-card-shadow); border-radius: 18px; padding: 8px; }
.fmetric { padding: 16px 18px; border-radius: 14px; display: flex; flex-direction: column; gap: 9px; }
.fmetric--out { background: var(--a2-color-neutral-20); }
.fmetric__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fmetric__name { font: 600 12px/1 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.fmetric__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--st); flex: 0 0 auto; }
.fmetric__valrow { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fmetric__val { font: 600 28px/0.98 var(--a2-font-family-base); letter-spacing: -0.02em; color: var(--a2-color-neutral-900); font-variant-numeric: tabular-nums; }
.fmetric--out .fmetric__val { color: var(--a2-color-neutral-900); }
.trend { display: inline-flex; align-items: center; gap: 3px; font: 600 13px/1 var(--a2-font-family-base); font-variant-numeric: tabular-nums; }
.trend svg { width: 11px; height: 11px; }
.trend--up { color: var(--a2-color-green-600); }
.trend--down { color: var(--a2-color-red-600); }
.trend--warn { color: var(--a2-color-yellow-700); }
.fmetric__goal { display: flex; align-items: center; gap: 7px; font: 400 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.fmetric__goal .pill { font: 600 10.5px/1 var(--a2-font-family-base); letter-spacing: .03em; text-transform: uppercase; color: var(--st); background: var(--st-bg); border-radius: 999px; padding: 4px 8px; }
.fconn { display: flex; align-items: center; justify-content: center; color: var(--a2-color-neutral-300); font-size: 22px; font-weight: 300; padding: 0 2px; }
.fconn svg { width: 18px; height: 18px; }

/* ── insight cards ── */
.insights { display: flex; flex-direction: column; gap: 14px; }
.icard { background: #fff; border: var(--ov-card-border); box-shadow: var(--ov-card-shadow); border-radius: 16px; padding: 18px 20px; }
.icard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sev { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; color: var(--st); background: var(--st-bg); border-radius: 999px; padding: 5px 10px; }
.sev .d { width: 7px; height: 7px; border-radius: 50%; background: var(--st); }
.icard__when { margin-left: auto; font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-400); }
.icard__problem { font: 600 16px/1.32 var(--a2-font-family-base); letter-spacing: -0.005em; color: var(--a2-color-neutral-900); }
.icard__context { margin: 8px 0 0; font: 400 13.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-600); display: flex; gap: 8px; align-items: flex-start; }
.icard__context svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--a2-color-neutral-400); }
.icard__context b { font-weight: 600; }
.icard__actions { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }

.btn { font: 600 13px/1 var(--a2-font-family-base); border-radius: 16px; border: 1px solid transparent; padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.btn svg { width: 15px; height: 15px; }
.btn--primary { display: inline-flex; height: 40px; padding: 8px 12px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border-radius: 16px; background: var(--primitive-color-neutral-800, #292929); box-shadow: 0 1px 10px 0 rgba(42, 42, 42, 0.24); color: #fff; }
.btn--primary:hover { background: #1a1a1a; }
.btn--outline { display: inline-flex; height: 40px; padding: 8px 12px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border-radius: 16px; border: 1px solid #E9EEF2; background: var(--background-color, #fff); box-shadow: 0 1px 2px 0 rgba(42, 42, 42, 0.06); color: var(--a2-color-neutral-800); }
.btn--outline:hover { background: var(--a2-color-neutral-20); }
.btn--ghost { background: transparent; color: var(--a2-color-neutral-800); padding: 10px 12px; }
.btn--ghost:hover { background: var(--a2-color-neutral-20); }
.btn--sm { padding: 8px 13px; font-size: 12.5px; }
.btn--danger { background: var(--a2-color-red-600); color: #fff; border-color: var(--a2-color-red-600); }
.btn--danger:hover { background: var(--a2-color-red-700); }

/* ── recommendations ── */
.recs .sec__head { align-items: flex-start; }
.recs__desc { margin: 7px 0 0; max-width: 60ch; font: 400 13px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.recs__desc b { color: var(--a2-color-neutral-900); font-weight: 600; }
.recs__stack { position: relative; }

/* carousel: horizontal sliding track (peek of next card) */
.recs__stack { overflow: hidden; touch-action: pan-y; }
.recs__track { display: flex; gap: 12px; transition: transform 300ms var(--a2-transition-ease); will-change: transform; }
.recs__track.is-grabbing { transition: none; }
.rec { flex: 0 0 88%; display: flex; flex-direction: column; background: #fff; border: var(--ov-card-border); box-shadow: var(--ov-card-shadow); border-radius: 16px; overflow: hidden; padding: 18px 20px; }

/* header row */
.rec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rec__pills { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rectag { display: inline-flex; align-items: center; gap: 5px; font: 700 9.5px/1 var(--a2-font-family-base); letter-spacing: 0; text-transform: none; padding: 3px 7px; border-radius: 999px; border: 1px solid transparent; }
.rectag--urgent { color: var(--a2-color-red-700); background: color-mix(in srgb, var(--a2-color-red-600) 15%, #fff); border-color: color-mix(in srgb, var(--a2-color-red-600) 36%, #fff); }
.rectag .d { display: none; }
.rectag--watch { color: var(--a2-color-yellow-800); background: color-mix(in srgb, var(--a2-color-yellow-500) 28%, #fff); border-color: color-mix(in srgb, var(--a2-color-yellow-600) 48%, #fff); }
.rectag--ok { color: var(--a2-color-green-700); background: color-mix(in srgb, var(--a2-color-green-500) 20%, #fff); border-color: color-mix(in srgb, var(--a2-color-green-600) 40%, #fff); }
/* KPI table chips: small; On track is a light-grey chip (only Watch/Critical are colored) */
.rectag--sm { font-size: 10.5px; padding: 3px 8px; }
.rectag--ontrack { color: var(--a2-color-neutral-600); background: var(--a2-color-neutral-100); border-color: var(--a2-color-neutral-200); }
/* Revenue Pipeline KPI content tables: stacked title + table blocks, 24px apart */
.rf__table--stack { display: flex; flex-direction: column; gap: 16px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.rf-kpiblock .rf__tabletitle { margin: 0 0 16px; }
.rf__table--inner { border: 1px solid var(--a2-color-neutral-80); border-radius: 10px; overflow: hidden; background: #fff; }
.rft__row.rft-total { background: var(--a2-color-neutral-20); }
.rf-tabs { display: flex; gap: 28px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--a2-color-neutral-100); border-radius: 0; }
.rf-tab { border: 0; background: transparent; cursor: pointer; padding: 0 0 10px; border-radius: 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 500 14px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rf-tab.is-active { color: var(--a2-color-neutral-950); border-bottom-color: var(--a2-color-neutral-950); font-weight: 600; }
.rf-tab:hover:not(.is-active) { color: var(--a2-color-neutral-900); }
.rft__row.rft-total .rftc__main, .rft__row.rft-total .rftc__val { font-weight: 700; color: var(--a2-color-neutral-950); }
.rft-total__dash { color: var(--a2-color-neutral-400); }
/* KPI content tables: three equal columns, all left-aligned */
.rft-kpi { grid-template-columns: 1fr 1fr 1fr; }
.rft-kpi .rftc { justify-content: flex-start; text-align: left; }
.rft-kpi.rft__cols > span { text-align: left; }
/* cell values match the Suggested Changes card table (13px, base font, regular) */
.rft-kpi.rft__cols { font-size: 13px; }
.rft-kpi .rftc__main { font: 400 13px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rft-kpi .rftc__val { font: 400 13px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rft-kpi .rftc__sub { font: 400 13px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rectag--from { color: var(--a2-color-neutral-700); background: var(--a2-color-neutral-50); border-color: var(--a2-color-neutral-200); text-transform: none; letter-spacing: 0; font-weight: 600; }
.rec__flag { text-align: right; flex: 0 0 auto; }
.rec__flag-main { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.rec__flag-main svg { width: 13px; height: 13px; }
.rec__flag-sub { margin-top: 4px; font: 400 11px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-400); }

.rec__title { font: 700 16px/1.3 var(--a2-font-family-base); letter-spacing: -0.01em; color: var(--a2-color-neutral-950); margin-top: 12px; }

/* metric block — tight group under the title */
.rec__metric { margin-top: 10px; }
.rec__metric-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rec__metric-l { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.rec__metric-num { font: 700 26px/0.9 var(--a2-font-family-base); letter-spacing: -0.02em; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.rec__metric-lab { font: 700 10px/1 var(--a2-font-family-base); letter-spacing: .07em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.rec__delta { display: inline-flex; align-items: center; gap: 2px; font: 700 11px/1 var(--a2-font-family-base); color: var(--a2-color-red-600); }
.rec__delta svg { width: 11px; height: 11px; }
.rec__goal { font: 400 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; }
.rec__goal b { color: var(--a2-color-neutral-800); font-weight: 700; }
.rec__bar { position: relative; height: 6px; border-radius: 999px; background: var(--a2-color-neutral-100); margin-top: 8px; }
.rec__bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--a2-color-yellow-500); }
.rec__bar-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--a2-color-neutral-500); }
.rec__sub { margin: 8px 0 0; font: 400 12px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rec__sub b { color: var(--a2-color-neutral-900); font-weight: 700; }

.rec__div { height: 1px; background: var(--a2-color-neutral-70); margin: 14px 0; }

/* recommendation block — tight internal group */
.rec__reclabel { display: inline-flex; align-items: center; gap: 6px; color: var(--a2-color-blue-700); font: 700 10px/1 var(--a2-font-family-base); letter-spacing: .07em; text-transform: uppercase; }
.rec__reclabel img { width: 13px; height: 13px; }
.rec__rectitle { margin-top: 8px; font: 600 14px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rec__recsub { margin-top: 3px; font: 400 12px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rec__impact { margin-top: 9px; font: 400 12px/1.4 var(--a2-font-family-base); }
.rec__impact-lab { font: 700 10px/1 var(--a2-font-family-base); letter-spacing: .07em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.rec__impact-val { color: var(--a2-color-green-700); font-weight: 700; font-variant-numeric: tabular-nums; }

/* options expander */
.rec__more { margin-top: 14px; }
.rec__more-toggle { display: inline-flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 4px 0; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); text-align: left; font-family: var(--a2-font-family-base); }
.rec__more-pm { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px; border: 1px solid var(--a2-color-neutral-200); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--a2-color-neutral-600); font-size: 13px; line-height: 1; }
.rec__opts { display: none; margin-top: 8px; flex-direction: column; gap: 0; border: 1px solid var(--a2-color-neutral-80); border-radius: 9px; overflow: hidden; }
.rec__more.is-open .rec__opts { display: flex; }
.rec__opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-top: 1px solid var(--a2-color-neutral-70); background: #fff; cursor: pointer; text-align: left; width: 100%; font-family: var(--a2-font-family-base); transition: background 120ms ease; }
.rec__opt:first-child { border-top: 0; }
.rec__opt:hover { background: var(--a2-color-neutral-10); }
.rec__opt--head { cursor: default; background: var(--a2-color-neutral-20); padding: 6px 11px; }
.rec__opt--head .rec__opt-name, .rec__opt--head .rec__opt-val { font: 700 9.5px/1 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.rec__opt-name { flex: 1; min-width: 0; font: 500 12.5px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.rec__opt-name b { color: var(--a2-color-neutral-900); font-weight: 700; }
.rec__opt-val { flex: 0 0 auto; font: 700 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-green-700); font-variant-numeric: tabular-nums; }
.rec__opt-val--top { font-size: 13px; }
.rec__opt--chosen { background: var(--a2-background-color-success-faint); cursor: default; }
.rec__opt-tag { display: inline-block; font: 700 9px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; color: var(--a2-color-green-700); background: color-mix(in srgb, var(--a2-color-green-500) 16%, transparent); border-radius: 999px; padding: 3px 6px; margin-left: 4px; vertical-align: 1px; }dth: 100%; font-family: var(--a2-font-family-base); transition: border-color 120ms ease, background 120ms ease; }
.rec__opt:hover { background: var(--a2-color-neutral-10); }
.rec__social { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font: 400 12px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rec__social svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--a2-color-neutral-400); }
.rec__opt-arrow { flex: 0 0 auto; color: var(--a2-color-neutral-400); display: inline-flex; }
.rec__opt-arrow svg { width: 15px; height: 15px; }

/* footer */
.rec__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.rec__dismiss { border: 0; background: transparent; cursor: pointer; font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); padding: 8px 4px; }
.rec__dismiss:hover { color: var(--a2-color-neutral-900); }
.rec__foot-r { display: flex; gap: 8px; }
.recs .btn { font-size: 12.5px; padding: 9px 14px; }
.nwcard .btn { padding: 7px 13px; }
/* primary keeps its full button box everywhere */
.recs .btn--primary, .nwcard .btn--primary { height: 40px; padding: 8px 12px; }
.recs .btn--outline, .nwcard .btn--outline { height: 40px; padding: 8px 12px; }
/* primary "Review" gets a trailing right arrow */
.btn--primary.nw-view, .btn--primary.nw-mon { flex-direction: row; gap: 6px; padding-right: 10px; }
.nw-view__arr { width: 15px; height: 15px; flex: 0 0 auto; }
.nw-view__bolt { width: 15px; height: 15px; flex: 0 0 auto; }

/* ghost "Open in Atlas" button — pinned to the right of the action row */
.nwcard .nw-atlas { margin-left: auto; height: 40px; padding: 8px 12px; gap: 6px; color: var(--a2-color-neutral-700); flex: 0 0 auto; }
.nwcard .nw-atlas:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-900); }
.nw-atlas__icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* carousel: swipeable track */
.recs__stack { overflow: hidden; touch-action: pan-y; }
.recs__stack.is-grabbing { cursor: grabbing; }
.recs__nav { display: flex; align-items: center; justify-content: center; margin-top: 14px; }
.recs__dots { display: flex; align-items: center; gap: 8px; }
.rdot { width: 8px; height: 8px; border-radius: 999px; background: var(--a2-color-neutral-200); border: 0; padding: 0; cursor: pointer; transition: width 160ms ease, background 160ms ease; }
.rdot.is-active { width: 22px; background: var(--a2-color-neutral-900); }

/* monitoring (applied) state */
.rec__monitor { display: none; padding: 15px 17px; }
.rec.is-monitoring { background: var(--a2-color-neutral-10); border-color: var(--a2-color-neutral-70); }
.rec.is-monitoring.is-active .rec__detail { display: none; }
.rec.is-monitoring .rec__monitor { display: block; }
.rec__monitor-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.rec__title--mon { color: var(--a2-color-neutral-700); font-weight: 600; }
.rec__mon-line { margin: 8px 0 0; font: 400 13px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.rec__mon-line b { color: var(--a2-color-green-700); font-weight: 700; }
.rec__mon-bar { position: relative; height: 7px; border-radius: 999px; background: var(--a2-color-neutral-100); margin-top: 12px; overflow: hidden; }
.rec__mon-fill { display: block; height: 100%; border-radius: 999px; background: var(--a2-color-green-500); }
.rec__mon-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font: 500 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); font-variant-numeric: tabular-nums; }

/* ── accountability rollup ── */
.roll { background: #fff; border: var(--ov-card-border); box-shadow: var(--ov-card-shadow); border-radius: 16px; overflow: hidden; }
.task { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--a2-color-neutral-70); }
.task:first-child { border-top: 0; }
.task--over { background: #fdf6f5; }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--a2-font-family-base); color: #fff; }
.task__main { flex: 1; min-width: 0; }
.task__title { font: 600 14px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.task__meta { margin-top: 4px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.task__who { font: 500 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.sbadge { font: 700 9.5px/1 var(--a2-font-family-base); letter-spacing: 0; text-transform: none; padding: 3px 7px; border-radius: 999px; border: 1px solid transparent; }
.sbadge--prog { background: var(--a2-color-neutral-100); color: var(--a2-color-neutral-800); border-color: var(--a2-color-neutral-200); }
.sbadge--ontrack { background: color-mix(in srgb, var(--a2-color-green-500) 16%, #fff); color: var(--a2-color-green-700); border-color: color-mix(in srgb, var(--a2-color-green-500) 36%, #fff); }
.sbadge--over { background: color-mix(in srgb, var(--a2-color-red-600) 15%, #fff); color: var(--a2-color-red-700); border-color: color-mix(in srgb, var(--a2-color-red-600) 36%, #fff); }
.sbadge--todo { background: color-mix(in srgb, var(--a2-color-yellow-500) 28%, #fff); color: var(--a2-color-yellow-800); border-color: color-mix(in srgb, var(--a2-color-yellow-600) 48%, #fff); }
.task.is-new { animation: taskin 380ms var(--a2-transition-ease); }
@keyframes taskin { from { opacity: 0; transform: translateY(-6px); background: var(--a2-background-color-primary-faint); } to { opacity: 1; transform: none; } }
.task__activity { margin-top: 7px; display: flex; align-items: center; gap: 6px; font: 400 12px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.task__activity svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--ov-blue); }
.task__due { font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; }
.task__due--over { color: var(--a2-color-red-600); }
.task__right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex: 0 0 auto; }

/* ════════ Ara's metrics (below the Sankey) ════════ */
.ov-atlasmetrics { margin-top: 26px; }
.aram-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.aram-head__id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.aram-head__title { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 17px; line-height: 1.1; font-weight: 500; letter-spacing: -0.01em; color: var(--a2-color-neutral-900); }
.aram-head__desc { font: 400 14px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-500); text-wrap: pretty; }
.aram-head__all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); text-decoration: none; white-space: nowrap; transition: background 140ms ease; }
.aram-head__all:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-900); }
.aram-head__all svg { width: 15px; height: 15px; }
.aram-badge { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.aram-badge svg { width: 22px; height: 22px; display: block; }
.aram-head__title { font: 600 16px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.aram-head__sub { font: 400 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); padding-left: 9px; border-left: 1px solid var(--a2-color-neutral-100); }

.aram-cards { display: none; }
.aram-tabs { display: flex; gap: 22px; margin: 14px 0 0; border-bottom: 1px solid var(--a2-color-neutral-80); }
.aram-tab { display: inline-flex; align-items: center; gap: 7px; padding: 0 0 10px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; font: 400 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; }
.aram-tab:hover { color: var(--a2-color-neutral-900); }
.aram-tab.is-active { color: var(--a2-color-neutral-900); font-weight: 500; border-bottom-color: var(--a2-color-neutral-900); }
.aram-tab__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.aram-digest { margin: 16px 0 0; font: 400 12.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-500); text-wrap: pretty; }
.aram-secs { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* 3 stacked sections, each its own independent horizontal scroll row */
.aram-sec { display: block; min-width: 0; }
.aram-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.aram-sec__name { font: 500 11px/1.2 var(--a2-font-family-base); letter-spacing: 0.06em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.aram-sec__count { font: 500 11px/1.2 var(--a2-font-family-base); letter-spacing: 0.06em; text-transform: uppercase; color: var(--a2-color-neutral-500); white-space: nowrap; }
.aram-srow { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.aram-srow::-webkit-scrollbar { display: none; }
.aram-srow .agc--slide { flex: 0 0 248px; box-sizing: border-box; }
.aram-sec__head { display: flex; align-items: center; gap: 8px; margin: 16px 0 12px; font: 700 11px/1.2 var(--a2-font-family-base); letter-spacing: .07em; text-transform: uppercase; color: var(--a2-color-neutral-600); }
.aram-sec__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
/* stacked-deck carousel of agent cards per section */
.aram-grid { display: flex; flex-direction: column; gap: 12px; }
.aram-sec__nav { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.aram-sec:first-child .aram-sec__head { margin-top: 0; }
.aram-sec__count { font: 500 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-400); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.aram-deck { position: relative; padding-bottom: 12px; }
.aram-deck::before, .aram-deck::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 14px; background: var(--a2-background-color-default, #fff); border: 1px solid var(--a2-color-neutral-80); border-radius: 0 0 14px 14px; border-top: 0; z-index: 0; }
.aram-deck::after { left: 20px; right: 20px; bottom: 0; }
.aram-deck__stack { position: relative; z-index: 1; }
.aram-deck__nav { display: none; }
/* expanded (a funnel selected): stack all cards vertically with 16px gap */
.aram-stack { display: flex; flex-direction: column; gap: 16px; }
.aram-stack .agc { width: 100%; }
.aram-sec__nav .aram-arrow { width: 24px; height: 24px; }
.aram-arrow { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--a2-color-neutral-200); border-radius: 999px; background: #fff; color: var(--a2-color-neutral-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.aram-arrow:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-900); }
.aram-arrow svg { width: 16px; height: 16px; }
.aram-dots { display: inline-flex; align-items: center; gap: 7px; }
.aram-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--a2-color-neutral-200); cursor: pointer; transition: background 140ms ease, width 140ms ease; }
.aram-dot.is-active { width: 20px; background: var(--a2-color-neutral-900); }
.agc { width: 100%; background: var(--a2-background-color-default, #fff); border: 1px solid #E6E6E6; box-shadow: 0 1px 8px 0 rgba(42, 42, 42, 0.12); border-radius: 16px; padding: 14px; }
.agc__name { font: 500 13px/1.25 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.agc__desc { margin: 4px 0 0; font: 400 11px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-500); text-wrap: pretty; }
.agc__rows { margin-top: 10px; }
.agc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--a2-color-neutral-70); }
.agc-row__label { font: 400 11px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-600); min-width: 0; }
.agc-row__val { font: 500 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.agc-row__att { display: inline-flex; align-items: center; gap: 1px; font: 500 11px/1 var(--a2-font-family-base); font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: end; min-width: 42px; justify-content: flex-end; }
.agc-row__att svg { width: 12px; height: 12px; }
.agc-row__att--up { color: #2a9060; }
.agc-row__att--down { color: #c0392b; }
.aram-mgrid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aram-m { border: 1px solid var(--a2-color-neutral-80); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.aram-m__label { font: 400 11px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.aram-m__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.aram-m__val { font: 500 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aram-row__att { display: inline-flex; align-items: center; gap: 1px; font: 500 11px/1 var(--a2-font-family-base); font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: end; }
.aram-row__att svg { width: 13px; height: 13px; }
.aram-row__att--up { color: #2a9060; }
.aram-row__att--down { color: #c0392b; }
@media (max-width: 1080px) {
  .content { overflow: auto; }
  .ov-stage { grid-template-columns: 1fr; grid-auto-rows: minmax(0, auto); gap: 16px; height: auto; min-height: 100%; }
  .ov-divider { display: none; }
  .chat { height: 70vh; }
}
@media (max-width: 760px) {
  .formula { grid-template-columns: 1fr; }
  .fconn { transform: rotate(90deg); padding: 4px 0; }
  .main__h { font-size: 30px; }
}

/* ── Revenue Pipeline driver tables: View details column + drawer ── */
.rft-kpi { grid-template-columns: 1fr 1fr 1fr 112px; }
.rft-kpi .rftc--vd { justify-content: flex-end; text-align: right; }
.rft-vd { font: 500 12.5px/1 "Inter", "Nunito Sans", system-ui, sans-serif; color: var(--a2-foreground-color-primary); cursor: pointer; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.rft-vd:hover { color: var(--a2-foreground-color-primary-hover); text-decoration: underline; }

.rfd-ov { position: fixed; inset: 0; background: rgba(28,28,28,.28); opacity: 0; pointer-events: none; transition: opacity 220ms var(--a2-transition-ease, ease); z-index: 120; }
.rfd-ov.is-open { opacity: 1; pointer-events: auto; }
.rfd { position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 94vw; background: #fff; border-left: 1px solid #E6E6E6; display: flex; flex-direction: column; z-index: 121; transform: translateX(100%); transition: transform 240ms cubic-bezier(.4,0,.2,1); }
.rfd.is-open { transform: translateX(0); }
.rfd__head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 18px; border-bottom: 1px solid var(--a2-color-neutral-80); }
.rfd__headtxt { flex: 1; min-width: 0; }
.rfd__title { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--a2-color-neutral-950); }
.rfd__sub { margin-top: 5px; font: 400 13px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rfd__close { width: 32px; height: 32px; flex: 0 0 auto; border: 0; background: transparent; border-radius: 8px; color: var(--a2-color-neutral-500); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rfd__close:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-900); }
.rfd__close svg { width: 18px; height: 18px; }
.rfd__body { flex: 1; overflow: auto; padding: 20px 24px 28px; }
.rfd-tbl { border: 1px solid var(--a2-color-neutral-80); border-radius: 10px; overflow: hidden; background: #fff; }
.rfd-tbl__head { display: grid; gap: 10px; padding: 11px 14px; background: var(--a2-color-neutral-30); border-bottom: 1px solid var(--a2-color-neutral-70); font: 700 11px/1.2 "Inter", "Nunito Sans", system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--a2-color-neutral-600); }
.rfd-tbl__row { display: grid; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--a2-color-neutral-50); align-items: center; }
.rfd-tbl__row:first-of-type { border-top: 0; }
.rfd-tbl__row--total { background: var(--a2-color-neutral-20); }
.rfd-tbl__r { text-align: right; }
.rfd-tbl__c { min-width: 0; font: 400 13px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rfd-tbl__c--name { font-weight: 500; }
.rfd-tbl__row--total .rfd-tbl__c { font-weight: 600; }
.rfd-tbl__v { font-variant-numeric: tabular-nums; }

/* ── Automations panel: stacked cards ── */
.ah-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.ahx { display: flex; flex-direction: column; gap: 12px; }
.ahx__statrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.dcard--stat { cursor: default; flex: none; }
.dcard--stat:hover { border-color: #E6E6E6; }
.ahx__statcard { background: #fff; border-radius: 12px; box-shadow: var(--ov-card-shadow); padding: 14px 16px; min-width: 0; }
.ahx__card { background: #fff; border-radius: 12px; box-shadow: var(--ov-card-shadow); padding: 14px 16px; }
.ahx__lbl { font: 700 10px/1.2 "Inter", "Nunito Sans", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.ahx__metric { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.ahx__big { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: #1B1B1A; font-variant-numeric: tabular-nums; }
.ahx__delta { font: 500 12px/1 var(--a2-font-family-base); color: var(--a2-color-green-600); }
.ahx__cap { margin-top: 6px; font: 400 12px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.ahx__bar { display: flex; gap: 2px; height: 7px; margin-top: 16px; }
.ahx__seg { height: 7px; border-radius: 999px; }
.ahx__seg--g { background: #1B8A5A; }
.ahx__seg--a { background: #E08A1E; }
.ahx__seg--n { background: var(--a2-color-neutral-200); }
.ahx__legend { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.ahx__leg { display: inline-flex; align-items: center; gap: 6px; font: 400 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.ahx__dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.ahx__dot--g { background: #1B8A5A; }
.ahx__dot--a { background: #E08A1E; }
.ahx__dot--n { background: var(--a2-color-neutral-300); }
.ahx__sv { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; color: #1B1B1A; font-variant-numeric: tabular-nums; }
.ahx__sl { margin-top: 3px; font: 400 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.ahx__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: var(--ov-card-shadow); }
.ahx__cta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ahx__cta-1 { font: 600 12.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.ahx__cta-2 { font: 400 11.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.ahx__cta-btn { flex: 0 0 auto; }

/* ── Lead → Cash flow Sankey (standalone, light) ── */
.ov-sankey { width: 100%; margin-left: auto; margin-right: auto; }
.ov-sankey svg { display: block; width: 100%; height: auto; font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; }
.ov-sk-ribbon { transition: opacity 180ms ease; }
.ov-sk-node { cursor: pointer; transition: opacity 180ms ease; }
.ov-sk-node rect { transition: opacity 180ms ease; }
.ov-sk-collabel { fill: var(--a2-color-neutral-700); font-family: var(--a2-font-family-base); font-size: 18px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.ov-sk-colsub { fill: var(--a2-color-neutral-500); font-family: var(--a2-font-family-base); font-size: 14px; font-weight: 400; }
.ov-sk-inlabel { fill: #fff; font-weight: 600; }
.ov-sk-leaklabel { font-size: 11px; font-weight: 700; }
.ov-sk-leakout { fill: var(--a2-color-neutral-800); font-family: var(--a2-font-family-base); font-size: 12px; font-weight: 700; }
.ov-sk-leakout__sub { fill: var(--a2-color-neutral-500); font-family: var(--a2-font-family-base); font-size: 11px; font-weight: 400; }
.ov-sk-lead { stroke: var(--a2-color-neutral-300); stroke-width: 1; }
.ov-sk-conv__box { fill: #fff; stroke: var(--a2-color-neutral-200); stroke-width: 1; }
.ov-sk-conv__rate { fill: var(--a2-color-neutral-900); font-family: var(--a2-font-family-base); font-size: 15px; font-weight: 700; }
.ov-sk-conv__cap { fill: var(--a2-color-neutral-500); font-family: var(--a2-font-family-base); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ov-sk-insub { fill: rgba(255,255,255,.85); }
.ov-sk-inleak { fill: #fff; font-weight: 600; }
.ov-sk-leak { cursor: pointer; transition: opacity 180ms ease; }
.ov-sk-node { pointer-events: bounding-box; }
.ov-sankey__foot { margin-top: 8px; text-align: center; font: 500 14px/1.5 "Satoshi", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-500); }
.ov-sk-tip { position: fixed; z-index: 9999; pointer-events: none; min-width: 200px; max-width: 260px; background: #fff; border: 1px solid #E6E6E6; border-radius: 12px; box-shadow: 0 8px 28px rgba(42,42,42,.18); padding: 12px 14px; font-family: var(--a2-font-family-base); }
.ov-sk-tip__head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--a2-color-neutral-80); }
.ov-sk-tip__title { font: 600 14px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.ov-sk-tip__hsub { font: 400 12px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.ov-sk-tip__rows { display: flex; flex-direction: column; gap: 9px; }
.ov-sk-tip__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ov-sk-tip__name { font: 500 13px/1.25 var(--a2-font-family-base); color: var(--a2-color-neutral-800); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ov-sk-tip__sub { font: 400 11px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.ov-sk-tip__val { font: 600 13px/1.25 var(--a2-font-family-base); color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* interactive hover card with CTAs */
.ov-sk-tip--card { pointer-events: auto; }
.ov-sk-tip__acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ov-sk-tip__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 16px; border: 1px solid transparent; cursor: pointer; font: 600 13px/1 var(--a2-font-family-base); transition: background 120ms ease, border-color 120ms ease; }
.ov-sk-tip__btn--primary { background: var(--primitive-color-neutral-800, #292929); color: #fff; }
.ov-sk-tip__btn--primary:hover { background: #1a1a1a; }
.ov-sk-tip__btn--ghost { background: #fff; color: var(--a2-color-neutral-800); border-color: var(--a2-color-neutral-200); }
.ov-sk-tip__btn--ghost:hover { background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-300); }
.ov-sk-tip__atlas { width: 16px; height: 16px; flex: 0 0 auto; }
.ov-sk-tip__spark { width: 16px; height: 16px; flex: 0 0 auto; }

/* right panel: lighter card shadow than the left briefing column */
.ov-stage .main { --ov-card-shadow: 0 1px 3px 0 rgba(42,42,42,.06); }

/* ════════ Recommendation Detail — right-panel takeover ════════ */
.main.rd-open { overflow: hidden; }
.rd {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #F7F7F7;
  transform: translateX(100%); opacity: 0; pointer-events: none;
  transition: transform 220ms var(--a2-transition-ease, cubic-bezier(.4,0,.2,1)), opacity 220ms var(--a2-transition-ease, cubic-bezier(.4,0,.2,1));
  z-index: 6;
}
.rd.is-open { transform: none; opacity: 1; pointer-events: auto; }
.rd.rd-hidden { display: none; }

/* header */
.rd__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 24px 16px; border-bottom: 0; }
.rd__headleft { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.rd__back { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; padding: 7px; border-radius: 10px; color: var(--a2-color-neutral-700); flex: 0 0 auto; }
.rd__back svg { width: 20px; height: 20px; }
.rd__back:hover { color: var(--a2-color-neutral-900); background: var(--a2-color-neutral-20); }
.rd__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.rd__headtitle { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; margin: 0; font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--a2-color-neutral-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd__atlas-ic { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.rd__dismiss { border: 0; background: transparent; color: var(--a2-color-neutral-500); }
.rd__dismiss:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-900); }
.rd__actions .btn { height: 38px; flex-direction: row; gap: 6px; }
.rd--assign .rd__assign { display: none; }
.rd__assign svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* body */
.rd__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 24px 64px; scrollbar-width: none; }
.rd__body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rd__primary { gap: 6px; flex-direction: row; }
.rd__primary svg { flex: 0 0 auto; }
.rd-spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: arspin .7s linear infinite; flex: 0 0 auto; }
.rd__title { margin: 0 0 10px; font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--a2-color-neutral-950); text-wrap: pretty; }
.rd__problem { margin: 0 0 40px; font: 400 14.5px/1.6 var(--a2-font-family-base); color: var(--a2-color-neutral-700); text-wrap: pretty; }
/* assign composer */
.rd-asg__field { margin-bottom: 18px; }
.rd-asg__lbl { display: flex; align-items: center; gap: 6px; font: 600 11px/1.2 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin-bottom: 8px; }
.rd-asg__lbl .rd-rec__spark { width: 15px; height: 15px; flex: 0 0 auto; }
.rd-asg__task { font: 500 15px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
/* header shows Cancel + primary (top right) */
.rd__cancelbtn { display: inline-flex; }
.rd-asg__plan { margin-top: 0; }
/* assign-to custom dropdown */
.rd-asg__dd { position: relative; }
.rd-asg__ddbtn { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--a2-color-neutral-200); border-radius: 12px; background: #fff; cursor: pointer; }
.rd-asg__ddbtn:hover { background: var(--a2-color-neutral-20); }
.rd-asg__ddbtn .rd-asg__selchev { margin-left: auto; width: 16px; height: 16px; color: var(--a2-color-neutral-500); flex: 0 0 auto; }
.rd-asg__ddmenu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: #fff; border: 1px solid var(--a2-color-neutral-100); border-radius: 12px; box-shadow: 0 16px 40px rgba(15,17,24,.16), 0 2px 8px rgba(15,17,24,.06); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.rd-asg__ddmenu[hidden] { display: none; }
.rd-asg__ddopt { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.rd-asg__ddopt:hover { background: var(--a2-color-neutral-20); }
.rd-asg__ddopt.is-sel { background: var(--a2-color-neutral-20); }
.rd-asg__reco { display: flex; flex-direction: column; gap: 12px; }
.rd-asg__recoitem { display: flex; align-items: flex-start; gap: 10px; }
.rd-asg__reconum { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--a2-color-neutral-100); color: var(--a2-color-neutral-700); font: 700 11px/1 var(--a2-font-family-base); margin-top: 1px; }
.rd-asg__recotext { min-width: 0; }
.rd-asg__reconame { font: 600 13.5px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rd-asg__recodesc { font: 400 13px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-600); margin-top: 2px; text-wrap: pretty; }
.rd-asg__people { display: flex; flex-direction: column; gap: 8px; }
.rd-asg__person { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--a2-color-neutral-80); border-radius: 12px; background: #fff; cursor: pointer; }
.rd-asg__person:hover { background: var(--a2-color-neutral-20); }
.rd-asg__person.is-sel { border-color: var(--a2-color-neutral-900); background: var(--a2-color-neutral-20); }
.rd-asg__av { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 700 12px/1 var(--a2-font-family-base); }
.rd-asg__pmeta { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rd-asg__pname { font: 600 13.5px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rd-asg__prole { font: 400 12px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rd-asg__check { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--a2-color-neutral-300); position: relative; }
.rd-asg__person.is-sel .rd-asg__check { border-color: var(--a2-color-neutral-900); background: var(--a2-color-neutral-900); }
.rd-asg__person.is-sel .rd-asg__check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rd-asg__sev { display: flex; gap: 8px; }
.rd-asg__sevchip { flex: 1 1 0; padding: 9px 0; border: 1px solid var(--a2-color-neutral-80); border-radius: 999px; background: #fff; cursor: pointer; font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.rd-asg__sevchip:hover { background: var(--a2-color-neutral-20); }
.rd-asg__sevchip.is-sel { border-color: transparent; }
.rd-asg__sevchip--high.is-sel { background: var(--a2-background-color-danger-subdued); color: var(--a2-color-red-800); }
.rd-asg__sevchip--med.is-sel { background: var(--a2-background-color-warning-subdued); color: var(--a2-color-yellow-800); }
.rd-asg__sevchip--low.is-sel { background: var(--a2-color-neutral-100); color: var(--a2-color-neutral-800); }
.rd-asg__msg { width: 100%; box-sizing: border-box; min-height: 92px; resize: vertical; border: 1px solid var(--a2-color-neutral-100); border-radius: 12px; padding: 12px 14px; font: 400 13.5px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-800); outline: none; }
.rd-asg__msg:focus { border-color: var(--a2-color-neutral-300); }

/* metric strip */
.rd-kpis, .rd__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px 24px; margin-bottom: 40px; }
/* AR breakdown reused in the detail panel — no section dividers */
.rd__body .dp2-sec { border-bottom: 0; padding-bottom: 0; margin-bottom: 24px; }
.rd__body .dp2-sec:last-child { margin-bottom: 0; }
.rd__body .arf-vizsec .arf-viz__k { margin-bottom: 16px; }
.rd-metric { padding: 0; min-width: 0; }
.rd-metric__l { font: 600 10.5px/1.3 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin-bottom: 7px; }
.rd-metric__v { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.1; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.rd-metric__v--good { color: var(--a2-color-green-600); }
.rd-metric__v--loss { color: var(--a2-color-red-600); }

/* section */
.rd__sec { margin-bottom: 40px; }
.rd__seclbl { font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); margin-bottom: 12px; }

/* aging bar */
.rd-aging { display: flex; height: 40px; border-radius: 10px; overflow: hidden; }
.rd-aging__seg { display: block; height: 100%; }
.rd-aging__labs { display: flex; margin-top: 12px; gap: 8px; }
.rd-aging__lab { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.rd-aging__sw { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; margin-top: 2px; }
.rd-aging__lt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-aging__name { font: 600 12.5px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rd-aging__sub { font: 400 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }

/* bar chart */
.rd-bars { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 132px; padding-bottom: 18px; border-bottom: 1px solid var(--a2-color-neutral-70); }
.rd-bars__col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.rd-bars__bar { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: #3E73C9; transition: height 220ms ease; }
.rd-bars__bar--over { background: var(--a2-color-red-500); }
.rd-bars__x { position: absolute; bottom: -16px; font: 500 10.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; }
.rd-bars__cap { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--a2-color-neutral-400); pointer-events: none; }
.rd-bars__cap-lbl { position: absolute; right: 0; top: -8px; font: 600 10.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); background: var(--a2-background-color-default, #fff); padding: 0 4px; }

/* predicted outcome */
.rd__outcome { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--a2-background-color-success-faint, #e7f6ef); }
.rd__outcome-lbl { font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.rd__outcome-val { display: inline-flex; align-items: baseline; gap: 7px; text-align: right; }
.rd__outcome-rec { font: 700 14px/1.3 var(--a2-font-family-base); color: var(--a2-color-green-600); }
.rd__outcome-conf { font: 500 12.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }

/* recommendation card (reuses full-screen .arpc) */
.rd__plan { margin: 0 0 40px; }
/* recommendation view: eyebrow label + one card per recommendation */
.rd-recs__eyebrow { display: flex; align-items: center; gap: 7px; font: 700 11px/1.2 var(--a2-font-family-base); letter-spacing: .06em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin: 0 0 12px; }
.rd-recs__eyebrow .rd-rec__spark { width: 16px; height: 16px; }
.rd-recs__list { display: flex; flex-direction: column; gap: 12px; }
.rd-reccard { border: 0; border-radius: var(--semantic-radius-moderate, 16px); background: var(--semantic-background-color-standard-resting, #FFF); padding: 16px; box-shadow: 0 0 8px 0 rgba(41, 41, 41, 0.09); overflow: hidden; transition: max-height .3s ease, opacity .2s ease, margin .3s ease, padding .3s ease, border-width .3s ease; }
.rd-reccard--leaving { opacity: 0; max-height: 0 !important; padding-top: 0; padding-bottom: 0; margin-top: -12px; border-width: 0; }
.rd-reccard__name { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--a2-color-neutral-950); }
.rd-reccard__desc { margin-top: 4px; font: 400 14px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rd-reccard__impact { margin-top: 6px; font: 600 12.5px/1.4 var(--a2-font-family-base); color: var(--a2-color-green-700); }
.rd-reccard__cta { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.rd-reccard__cta .btn { height: 36px; }
.rd-reccard__applied { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.rd-reccard__applied svg { width: 16px; height: 16px; }
/* divider between recommended actions and the Context section */
.rd__divider { height: 1px; background: var(--a2-color-neutral-100); margin: 0 0 24px; }
.rd__ctxtitle { margin: 0 0 12px; font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--a2-color-neutral-900); }
/* AR Collection: full Atlas breakdown reused inside the rec detail Context section */
.rd-arctx { display: flex; flex-direction: column; gap: 40px; }
.rd-arctx .dp2-sec { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
/* section titles match the "Context" heading style */
.rd-arctx .arf-viz__k, .rd-arctx .ivp-sec__k, .rd__sec .arf-viz__k, .rd__sec .ivp-sec__k { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: normal !important; color: var(--a2-color-neutral-900) !important; }
.rd-arctx .arf-cardsec { background: #fff; box-shadow: var(--ov-card-shadow); border-radius: 16px; padding: 20px !important; }
/* Context breakdown: title sits outside, its data viz is enclosed in a card (16px between) */
.rd-arctx .dp2-sec > .arf-viz__k, .rd-arctx .dp2-sec > .ivp-sec__k { margin-bottom: 16px !important; }
.rd-vizcard { background: #fff; border-radius: 16px; box-shadow: 0 0 8px 0 rgba(41, 41, 41, 0.09); padding: 16px; }
.rd-vizcard .ivp-litbl-wrap { border: 0; border-radius: 0; overflow: visible; }
.rd-vizcard .arf-age { margin-bottom: 0; }
/* KPI strip becomes one card; the grid moves onto the inner card */
.rd-arctx .rd__metrics { display: block; margin-bottom: 0 !important; }
.rd-arctx .rd__metrics .rd-vizcard { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px 24px; margin-top: 0; }
/* Context → KPIs: only 16px between the problem paragraph and the first card */
.rd__problem:has(+ .rd-arctx) { margin-bottom: 16px; }
/* By business unit: smaller donut so the card hugs its content (no extra top/bottom whitespace) */
.rd-arctx .arf-vizsec .arf-donut { width: 128px; }
/* customers table: white surface against the grey panel */
.rd-arctx .arf-tblsec .ivp-litbl-wrap { background: #fff; }
.rd-rec__title { display: flex; align-items: center; gap: 9px; }
.rd-rec__spark { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; }
.rd-rec__spark svg { width: 100%; height: 100%; display: block; }

/* message detail */
.rd-msg__sender { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.rd-msg__av { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; display: inline-grid; place-items: center; background: #E6F1FB; color: #0C447C; font: 700 12px/1 var(--a2-font-family-base); }
.rd-msg__name { font: 600 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rd-msg__org { font: 400 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rd-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.rd-bub { background: var(--a2-color-neutral-20); border-radius: 12px; padding: 12px 14px; }
.rd-bub__meta { font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); margin-bottom: 6px; }
.rd-bub__txt { font: 400 14px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.rd-reply__lbl { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); margin-bottom: 8px; }
.rd-reply__lbl .rd-rec__spark { width: 18px; height: 18px; }
.rd-reply { border: 1px solid var(--a2-color-neutral-100); border-radius: var(--a2-radius-4, 12px); padding: 14px 16px; margin: 0 0 24px; }
.rd-reply__ta { width: 100%; box-sizing: border-box; border: 0; resize: none; background: transparent; font: 400 14px/1.6 var(--a2-font-family-base); color: var(--a2-color-neutral-800); outline: none; padding: 0; overflow: hidden; min-height: 80px; }
.rd-reply__foot { margin-top: 12px; display: flex; }
/* message thread (chat) */
.rd-chat { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; max-height: 300px; overflow-y: auto; padding: 16px; border: 1px solid var(--a2-color-neutral-100); border-radius: var(--a2-radius-4, 12px); background: #f7f7f5; box-shadow: inset 0 2px 6px rgba(42,42,42,0.07), inset 0 -1px 3px rgba(42,42,42,0.04); scrollbar-width: thin; }
.rd-chat__row { display: flex; gap: 11px; }
.rd-chat__av { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; display: inline-grid; place-items: center; font: 700 11px/1 var(--a2-font-family-base); color: #fff; }
.rd-chat__av--them { background: #4A3B2E; }
.rd-chat__av--me { background: #2E7D5B; }
.rd-chat__main { flex: 1 1 auto; min-width: 0; }
.rd-chat__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.rd-chat__name { font: 600 13.5px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rd-chat__time { font: 400 12px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rd-chat__txt { font: 400 14px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-800); text-wrap: pretty; }

/* task detail */
.rd-task__meta { display: flex; align-items: center; gap: 7px; margin: 0 0 16px; font: 500 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.rd-task__meta svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--a2-color-neutral-400); }

/* assign modal */
.rd-modal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(41,41,41,.42); }

/* draft-message popup */
.rd-draft__card { width: min(380px, 90%); box-sizing: border-box; background: #fff; border-radius: 16px; box-shadow: var(--a2-shadow-xlarge); padding: 20px; }
.rd-draft__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--a2-color-neutral-900); }
.rd-draft__x { border: 0; background: transparent; cursor: pointer; color: var(--a2-color-neutral-500); width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 8px; }
.rd-draft__x svg { width: 16px; height: 16px; }
.rd-draft__x:hover { background: var(--a2-color-neutral-20); }
.rd-draft__field { margin-bottom: 14px; }
.rd-draft__lbl { font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); margin-bottom: 7px; }
.rd-draft__dd { position: relative; }
.rd-draft__ddbtn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border: 1px solid var(--a2-color-neutral-200); border-radius: 12px; background: #fff; cursor: pointer; }
.rd-draft__ddbtn:hover { background: var(--a2-color-neutral-20); }
.rd-draft__chev { margin-left: auto; width: 16px; height: 16px; color: var(--a2-color-neutral-500); flex: 0 0 auto; }
.rd-draft__chip { display: inline-flex; align-items: center; gap: 8px; background: var(--a2-color-neutral-20); border-radius: 999px; padding: 4px 6px 4px 4px; }
.rd-draft__av { width: 24px; height: 24px; font-size: 10px; }
.rd-draft__cname { font: 600 13.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rd-draft__chipx { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--a2-color-neutral-500); border-radius: 50%; }
.rd-draft__chipx svg { width: 12px; height: 12px; }
.rd-draft__chipx:hover { background: var(--a2-color-neutral-100); color: var(--a2-color-neutral-800); }
.rd-draft__msg { width: 100%; box-sizing: border-box; min-height: 64px; overflow: hidden; resize: none; border: 1px solid var(--a2-color-neutral-200); border-radius: 12px; padding: 12px 14px; font: 400 14px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.rd-draft__msg:focus { border-color: var(--a2-color-neutral-300); outline: none; }
.rd-draft__priobtn { gap: 0; }
.rd-draft__priolabel { font: 600 13.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rd-draft__prioopt { font: 500 13.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); padding: 9px 12px; }
.rd-draft__acts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.rd-draft__acts .btn { width: 100%; height: 44px; flex-direction: row; justify-content: center; }
.rd-modal__card { width: min(340px, 86%); background: #fff; border-radius: var(--a2-radius-4, 12px); box-shadow: var(--a2-shadow-xlarge); overflow: hidden; }
.rd-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font: 600 15px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); border-bottom: 1px solid var(--a2-color-neutral-70); }
.rd-modal__x { border: 0; background: transparent; cursor: pointer; color: var(--a2-color-neutral-500); width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 8px; }
.rd-modal__x svg { width: 16px; height: 16px; }
.rd-modal__x:hover { background: var(--a2-color-neutral-20); }
.rd-modal__list { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.rd-opt { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; }
.rd-opt:hover { background: var(--a2-color-neutral-20); }
.rd-opt__av { width: 34px; height: 34px; border-radius: 999px; display: inline-grid; place-items: center; color: #fff; font: 700 12px/1 var(--a2-font-family-base); flex: 0 0 auto; }
.rd-opt__meta { display: flex; flex-direction: column; gap: 2px; }
.rd-opt__name { font: 600 13.5px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.rd-opt__role { font: 400 12px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
/* right panel: give the metric / automation cards the same hairline stroke as the panel */
.ov-stage .main .ahx__card,
.ov-stage .main .ahx__statcard,
.ov-stage .main .ahx__cta { border: 1px solid #E6E6E6; }

/* ════════ Needs Attention — section header + filters ════════ */
.nw-secthead { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 12px; }
.nw-secthead__title { margin: 0; font-size: 15px; line-height: 1.25; font-weight: 600; color: var(--a2-color-neutral-900); }
.nw-secthead__count { color: var(--a2-color-neutral-500); font-weight: 500; font-variant-numeric: tabular-nums; }
.nw-filters { display: flex; align-items: center; gap: 8px; }

/* pill filter button — default: outline + label + chevron; active: blue highlight + count badge */
.flt-wrap { position: relative; display: inline-flex; }
.flt { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border: 1px solid #E9EEF2; border-radius: 999px; background: var(--background-color, #fff); box-shadow: 0 1px 2px 0 rgba(42, 42, 42, 0.06); cursor: pointer; font: 600 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); white-space: nowrap; transition: background var(--a2-duration-fast) var(--a2-transition-ease), border-color var(--a2-duration-fast) var(--a2-transition-ease), color var(--a2-duration-fast) var(--a2-transition-ease); }
.flt:hover { background: var(--a2-color-neutral-20); border-color: var(--a2-color-neutral-200); color: var(--a2-color-neutral-900); }
.flt.is-open { border-color: var(--a2-color-neutral-200); }
.flt__chev { width: 14px; height: 14px; flex: 0 0 auto; transition: transform var(--a2-duration-default) var(--a2-transition-ease); }
.flt.is-open .flt__chev { transform: rotate(180deg); }
.flt__count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--a2-color-blue-600); color: #fff; font: 700 11px/1 var(--a2-font-family-base); font-variant-numeric: tabular-nums; }
.flt__count[hidden] { display: none; }
/* active (1+ selections) — blue highlight treatment */
.flt.is-active { background: var(--a2-background-color-primary-faint); border-color: var(--a2-color-blue-600); color: var(--a2-color-blue-700); }
.flt.is-active:hover { background: color-mix(in srgb, var(--a2-color-blue-600) 14%, #fff); }
.flt:focus-visible { outline: 2px solid var(--a2-color-blue-600); outline-offset: 2px; }

/* Type filter — single-select, dark active fill */
.flt--type.is-active { background: var(--a2-color-neutral-900); border-color: var(--a2-color-neutral-900); color: #fff; }
.flt--type.is-active:hover { background: #1a1a1a; }
.flt-menu--type { width: 250px; }
.flt-trow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; font: 500 13.5px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.flt-trow:hover { background: var(--a2-color-neutral-20); }
.flt-trow__ic { flex: 0 0 auto; width: 18px; height: 18px; color: var(--a2-color-neutral-500); display: inline-flex; }
.flt-trow__ic svg { width: 100%; height: 100%; display: block; }
.flt-trow__lbl { flex: 1 1 auto; }
.flt-trow__count { flex: 0 0 auto; font: 500 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-400); font-variant-numeric: tabular-nums; }
.flt-trow__check { flex: 0 0 auto; width: 16px; height: 16px; color: var(--a2-color-blue-600); opacity: 0; display: inline-flex; }
.flt-trow__check svg { width: 100%; height: 100%; }
.flt-trow.is-sel { color: var(--a2-color-neutral-950); }
.flt-trow.is-sel .flt-trow__count { color: var(--a2-color-neutral-500); }
.flt-trow.is-sel .flt-trow__check { opacity: 1; }

/* Message / Task feed cards (shared shell) */
.nc2__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.nc2__icon { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; }
.nc2__icon svg { width: 100%; height: 100%; display: block; }
.nc2__icon--msg { color: #0C447C; }
.nc2__icon--task { color: #3C3489; }
.nc2__badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font: 600 11px/1.3 var(--a2-font-family-base); }
.nc2__badge--msg { background: #E6F1FB; color: #0C447C; }
.nc2__badge--task { background: #EEEDFE; color: #3C3489; }
.nc2__cat { font: 700 10.5px/1 var(--a2-font-family-base); letter-spacing: .06em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.nc2__time { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.nc2__time svg { width: 13px; height: 13px; }
.nc2__title { font: 500 18px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-950); margin-bottom: 10px; text-wrap: pretty; }
.nc2__sender { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.nc2__av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: inline-grid; place-items: center; font: 700 10.5px/1 var(--a2-font-family-base); }
.nc2__av--msg { background: #E6F1FB; color: #0C447C; }
.nc2__sender-name { font: 500 13.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.nc2__sender-org { font: 400 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.nc2__body { font: 400 14px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-600); text-wrap: pretty; }
.nc2__body--msg { font-style: italic; }
.nc2__meta { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 400 12px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.nc2__meta svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--a2-color-neutral-400); }

/* dropdown card */
.flt-menu { position: absolute; top: calc(100% + 6px); left: 0; right: auto; z-index: 60; width: 232px; padding: 8px; background: #fff; border: 1px solid var(--a2-color-neutral-100); border-radius: 12px; box-shadow: var(--a2-shadow-medium); }
.flt-menu[hidden] { display: none; }
.flt-menu__search { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; margin-bottom: 6px; border: 1px solid var(--a2-color-neutral-200); border-radius: 8px; color: var(--a2-color-neutral-400); }
.flt-menu__search:focus-within { border-color: var(--a2-color-blue-600); }
.flt-menu__search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.flt-menu__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.flt-menu__list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.flt-opt { display: flex; align-items: center; gap: 9px; padding: 8px 8px; border-radius: 8px; cursor: pointer; font: 500 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.flt-opt:hover { background: var(--a2-color-neutral-20); }
.flt-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.flt-opt__box { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; border: 1.5px solid var(--a2-color-neutral-300); border-radius: 5px; color: #fff; background: #fff; transition: background var(--a2-duration-fast) var(--a2-transition-ease), border-color var(--a2-duration-fast) var(--a2-transition-ease); }
.flt-opt__box svg { width: 14px; height: 14px; opacity: 0; }
.flt-opt input:checked + .flt-opt__box { background: var(--a2-color-blue-600); border-color: var(--a2-color-blue-600); }
.flt-opt input:checked + .flt-opt__box svg { opacity: 1; }
.flt-opt input:focus-visible + .flt-opt__box { outline: 2px solid var(--a2-color-blue-600); outline-offset: 2px; }
.flt-menu__empty { padding: 10px 8px; font: 400 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.flt-menu__empty[hidden] { display: none; }

/* clear-all button — sits adjacent to the filter buttons */
.nw-clear { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.nw-clear[hidden] { display: none; }
.nw-clear:hover { color: var(--a2-color-neutral-900); background: var(--a2-color-neutral-20); }
.nw-clear:focus-visible { outline: 2px solid var(--a2-color-blue-600); outline-offset: 2px; }

/* filtered-out cards + empty state */
.nwcard.is-filtered-out { display: none; }
.nw-empty { padding: 28px 16px; text-align: center; border: 1px dashed var(--a2-color-neutral-200); border-radius: 16px; }
.nw-empty[hidden] { display: none; }
.nw-empty__txt { font: 400 13.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.nw-empty__clear { margin-top: 10px; height: 32px; padding: 0 14px; border: 1px solid var(--a2-color-neutral-200); border-radius: 999px; background: #fff; cursor: pointer; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.nw-empty__clear:hover { background: var(--a2-color-neutral-20); }

/* ════════ Toast notifications ════════ */
.ovt-wrap { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ovt { pointer-events: auto; display: flex; align-items: flex-start; gap: 11px; min-width: 280px; max-width: 360px; padding: 14px 16px; background: #fff; border: 2px solid #0265dc; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); opacity: 0; transform: translateX(20px); transition: opacity 200ms ease-out, transform 200ms ease-out; }
.ovt.is-in { opacity: 1; transform: translateX(0); }
.ovt.is-out { opacity: 0; transform: translateX(20px); transition: opacity 150ms ease-in, transform 150ms ease-in; }
.ovt__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.ovt__icon svg { width: 20px; height: 20px; display: block; }
.ovt__main { flex: 1 1 auto; min-width: 0; }
.ovt__title { font: 700 15px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.ovt__desc { margin-top: 2px; font: 400 13px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.ovt__undo { border: 0; background: none; padding: 0; margin-left: 4px; font: 600 13px/1.4 var(--a2-font-family-base); color: var(--a2-foreground-color-primary, #0265dc); cursor: pointer; }
.ovt__undo:hover { text-decoration: underline; }
.ovt__close { flex: 0 0 auto; width: 20px; height: 20px; border: 0; background: none; padding: 0; color: var(--a2-color-neutral-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ovt__close:hover { color: var(--a2-color-neutral-700); }
.ovt__close svg { width: 16px; height: 16px; }

/* ═══════════ Alternate compact navigation (toggled by the rail switch) ═══════════ */
/* view switch in the rail foot */
.rail__foot { display: flex; flex-direction: column; gap: 4px; }
.rail__viewtoggle { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 8px 9px; border-radius: 8px; color: rgba(255,255,255,.82); transition: background 120ms ease, color 120ms ease; }
.rail__viewtoggle:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail__viewtoggle-sw { width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.22); position: relative; flex: 0 0 auto; transition: background 160ms ease; }
.rail__viewtoggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 160ms ease; }
.rail__viewtoggle.is-on .rail__viewtoggle-sw { background: var(--a2-color-blue-500); }
.rail__viewtoggle.is-on .rail__viewtoggle-thumb { transform: translateX(14px); }
.rail__viewtoggle-lbl { font: 600 12.5px/1 var(--a2-font-family-base); white-space: nowrap; }

/* desk panel hidden in the default (full) view */
.deskpanel { display: none; }

/* ── compact view ── */
body[data-nav="compact"] .app-shell {
  grid-template-columns: 76px 196px 1fr;
  grid-template-areas: "topbar topbar topbar" "rail nav2 content";
}
body[data-nav="compact"] .topbar { grid-template-columns: 272px 1fr 220px; }

/* compact rail: icon over label, vertically stacked (same colors + icons) */
body[data-nav="compact"] .rail__nav { padding: 10px 6px; gap: 4px; }
body[data-nav="compact"] .rail__item { flex-direction: column; gap: 5px; padding: 9px 4px; justify-content: center; }
body[data-nav="compact"] .rail__label { font-size: 10px; line-height: 1.18; font-weight: 600; text-align: center; white-space: normal; flex: none; }
body[data-nav="compact"] .rail__icon { width: 24px; height: 24px; }
body[data-nav="compact"] .rail__icon .material-icons-round { font-size: 22px; }
body[data-nav="compact"] .rail__atlas-badge { width: 24px; height: 24px; }
body[data-nav="compact"] .rail__atlas-badge img { width: 24px; height: 24px; }
body[data-nav="compact"] .rail__group > .rail__item { width: 100%; }
body[data-nav="compact"] .rail__chev { display: none; }
body[data-nav="compact"] .rail__submenu { display: none !important; }
body[data-nav="compact"] .rail__item.is-active { background: transparent; color: var(--a2-color-blue-400); }
body[data-nav="compact"] .rail__item.is-active:hover { background: rgba(255,255,255,.06); }
/* switch in the narrow rail: stack the label under the toggle */
body[data-nav="compact"] .rail__viewtoggle { flex-direction: column; gap: 5px; padding: 8px 4px; }
body[data-nav="compact"] .rail__viewtoggle-lbl { font-size: 10px; }

/* desk panel — shown only in compact view */
body[data-nav="compact"] .deskpanel { display: block; grid-area: nav2; background: #F7F7F7; padding: 16px 0 16px 16px; min-width: 0; box-sizing: border-box; }
.deskpanel__inner { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid #E6E6E6; box-shadow: none; border-radius: 16px; padding: 16px 10px 12px; box-sizing: border-box; }
.deskpanel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 0 4px 0 7px; }
.deskpanel__headtxt { min-width: 0; }
.deskpanel__name { font-family: "Satoshi", "Nunito Sans", system-ui, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--a2-color-neutral-950); }
.deskpanel__role { margin-top: 2px; font: 400 12.5px/1.4 "Satoshi", "Nunito Sans", system-ui, sans-serif; color: var(--a2-color-neutral-500); }
.dp-hr { height: 1px; background: var(--a2-color-neutral-100); margin: 12px 4px; }
.deskpanel__nav { display: flex; flex-direction: column; gap: 1px; }
.dp-nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--a2-color-neutral-800); text-decoration: none; font: 400 14px/1.2 "Satoshi", "Nunito Sans", system-ui, sans-serif; }
.dp-nav:hover { background: var(--a2-color-neutral-20); }
.dp-nav.is-active { background: var(--a2-color-neutral-50); color: var(--a2-color-neutral-950); font-weight: 400; }
.dp-nav__ic { width: 19px; height: 19px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--a2-color-neutral-400); }
.dp-nav__ic .material-icons-round { font-size: 18px; }
.dp-nav.is-active .dp-nav__ic { color: var(--a2-color-neutral-500); }
.dp-collapse { flex: 0 0 auto; margin-top: -2px; display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 8px; color: var(--a2-color-neutral-500); cursor: pointer; }
.dp-collapse:hover { background: var(--a2-color-neutral-20); color: var(--a2-color-neutral-800); }
.dp-collapse .material-icons-round { font-size: 20px; }
/* collapsed strip: thin column with a centered expand chevron */
.dp-expand { display: none; }
body[data-nav="compact"][data-desk="collapsed"] .app-shell { grid-template-columns: 76px 24px 1fr; }
body[data-nav="compact"][data-desk="collapsed"] .topbar { grid-template-columns: 100px 1fr 220px; }
body[data-nav="compact"][data-desk="collapsed"] .deskpanel { padding: 16px 0; }
body[data-nav="compact"][data-desk="collapsed"] .deskpanel__inner { display: none; }
body[data-nav="compact"][data-desk="collapsed"] .dp-expand { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 0; background: transparent; border-radius: 8px; color: var(--a2-color-neutral-600); cursor: pointer; }
body[data-nav="compact"][data-desk="collapsed"] .dp-expand:hover { background: var(--a2-color-neutral-100); }
body[data-nav="compact"][data-desk="collapsed"] .dp-expand .material-icons-round { font-size: 18px; }
.dp-expand::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #2b2b2b; color: #fff; font: 500 12px/1 var(--a2-font-family-base); padding: 7px 10px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms ease; z-index: 30; }
.dp-expand:hover::after { opacity: 1; }