@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
/* Cadence brand layer: the marketing site's design language (cadence-ai-draft.netlify.app) applied to the
   dashboard. It loads after the component stylesheet, tokens.css and app.css, and wins over them.
   One typeface, Instrument Sans, for everything you read; Geist Mono only for timestamps, IDs and counts;
   Caveat only for the odd handwritten note. The site's pastels, ink bands and soft glow bring the colour. */

:root {
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;

  /* the site's palette */
  --orange: #e8400d;
  --indigo: #10054d;
  --blue: #2d72f0;
  --canvas: #f6f5f3;
  --surface: #ffffff;
  --surface-subtle: #fbfaf9;
  --line: #11111114;
  --line-strong: #1111111f;
  --band: #111111;
  --band-card: #272625;
  --band-line: #ffffff14;
  --band-ink: #fbfaf9;
  --band-muted: #ffffff99;
  --glass: #f6f5f3d9;
  --tone: 0.55;

  /* the site's shadows */
  --sh-label: 0 0 1px #1111110d, 1px 1px 1px #1111110a, 2px 3px 2px #11111108, 4px 4px 2px #11111103;
  --sh-btn: inset 0 1px 1px #fff3, inset 0 6px 12px #fff3, 0 0 1px #1111111f, 0 1px 1px #11111117, 0 3px 2px #1111110d, 0 6px 2px #11111103;
  --sh-nav: 0 1px 3px #1111110d, 0 6px 6px #1111110a, 0 13px 8px #11111108, 0 24px 9px #11111103;
  --sh-screen: 0 1px 1px -.5px #1922230a, 0 6px 6px -3px #1922230a, 0 18px 18px -14px #19222305, 0 16px 40px -6px #1922231f;
  --shadow-raised: var(--sh-label);
  --shadow-menu: var(--sh-nav);
  --radius-lg: 14px;
  --radius-md: 9px;
  --sidebar-width: 228px;
  --control-md: 34px;
  --control-lg: 40px;
  --row-height: 46px;
  --side-bg: var(--canvas);
  --side-line: transparent;
  --side-active: var(--surface);
}
:root[data-theme="dark"] {
  --canvas: #111111;
  --surface: #1b1a19;
  --surface-subtle: #201f1e;
  --line: #ffffff14;
  --line-strong: #ffffff1f;
  --band: #272625;
  --band-card: #33322f;
  --glass: #111111d9;
  --sh-label: 0 0 0 1px #ffffff0f;
  --sh-nav: 0 8px 24px #00000080;
  /* the sidebar sits on its own, slightly lifted surface with a hairline, so it reads apart from the page */
  --side-bg: #1a1918;
  --side-line: #ffffff1f;
  --side-active: #2c2b29;
}

/* ---------- type: one family, the site's scale and tracking ---------- */
body, .cd-root { font-family: var(--font-ui); letter-spacing: -0.01em; }
.app-tone { opacity: var(--tone); }
.app-hand { font-family: var(--font-hand); }

/* labels that were monospace capitals become quiet sentence-case Instrument Sans */
.cd-side-sec-l, .cd-ph-eyebrow, .cd-infotip-t, .cd-modal-eyebrow, .cd-table thead th, .cd-callout-eyebrow, .cd-callrow-group,
.cd-drawer-eyebrow, .cd-drawer-fields-r dt, .cd-outcome-eyebrow, .cd-metric-l, .cd-followup-head .cd-followup-in, .cd-timeline-date,
.cd-intent-l, .eyebrow, .app-menu-label, .cd-viz-tip-t, .cd-badge-live {
  font-family: var(--font-ui) !important; text-transform: none !important; letter-spacing: -0.005em !important;
}
.cd-delta-v, .cd-tbar-val, .cd-tbar-pv, .cd-bars-y, .cd-bars-x, .cd-heat-cl, .cd-heat-rl, .cd-kanban-v, .cd-leadcard-intl b,
.cd-askai-src, .cd-field-suffix, .cd-field-range-v, .cd-talkwave-legend b, .cd-followup-cadline {
  font-family: var(--font-ui) !important; font-variant-numeric: tabular-nums;
}

/* ---------- buttons: the site's .btn (8px radius, 500 weight, inset highlight on hover) ---------- */
.cd-btn { border-radius: 8px; font-weight: 500; font-size: 13.5px; letter-spacing: -0.12px; height: 34px; padding: 0 14px; }
.cd-btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.cd-btn-lg { height: 40px; padding: 0 17px; font-size: 14.5px; }
.cd-btn-primary { background: var(--ink); color: var(--on-inverse); border-color: var(--ink); }
.cd-btn-primary:hover:not(:disabled) { background: #272625; border-color: #272625; box-shadow: var(--sh-btn); }
:root[data-theme="dark"] .cd-btn-primary:hover:not(:disabled) { background: #fbfaf9; border-color: #fbfaf9; }
.cd-btn-primary:active:not(:disabled) { box-shadow: inset 0 1px 1px #0006, inset 0 6px 12px #0003; }
.cd-btn-secondary { background: transparent; border-color: #1111114d; color: var(--ink); }
.cd-btn-secondary:hover:not(:disabled) { border-color: var(--ink); background: transparent; }
:root[data-theme="dark"] .cd-btn-secondary { border-color: #ffffff4d; }
:root[data-theme="dark"] .cd-btn-secondary:hover:not(:disabled) { border-color: var(--ink); }

/* ---------- sidebar: warm canvas, white pill for the active item, a coloured tile per section ---------- */
.cd-side { background: var(--side-bg); border-right: 1px solid var(--side-line); }
.cd-side-brand { padding: 18px 14px 10px 18px; gap: 6px; }
.cd-side-word { font-size: 19px; line-height: 20px; }
.cd-side-lockup .cd-mark { width: 19px; height: 19px; }
.cd-side-ws { display: inline-flex; padding: 3px 9px; border-radius: 8px; background: var(--surface-subtle); box-shadow: var(--sh-label), 0 0 0 1px var(--line); color: var(--ink-secondary); font-size: 12px; }
.cd-side-nav { padding: 4px 10px 10px; }
.cd-side-sec + .cd-side-sec { margin-top: 12px; }
.cd-side-sec-l { padding: 0 8px 4px; font-size: 11.5px !important; font-weight: 500; color: var(--ink-subtle); }
.cd-side-item { height: 31px; gap: 9px; border-radius: 9px; font-size: 13.5px; font-weight: 450; color: var(--ink-secondary); padding: 0 8px 0 5px; }
.cd-side-item .cd-icon { box-sizing: content-box; padding: 3px; border-radius: 6px; color: var(--ink-muted); transition: background-color .2s cubic-bezier(.23,1,.32,1), color .2s; }
.cd-side-item:hover { background: #1111110a; }
:root[data-theme="dark"] .cd-side-item:hover { background: #ffffff0d; }
.cd-side-item.is-active { background: var(--side-active); box-shadow: var(--sh-label), 0 0 0 1px var(--line); font-weight: 600; color: var(--ink); }
.cd-side-item.is-active::before { display: none; }
.cd-side-sec:is([aria-label="Briefing"], [aria-label="Business"]) .is-active .cd-icon { background: #e2ddfd; color: #3b2fa0; }
.cd-side-sec:is([aria-label="Floor"], [aria-label="Calls"]) .is-active .cd-icon { background: #dbe8ff; color: #1d4fc4; }
.cd-side-sec:is([aria-label="People"], [aria-label="Growth"]) .is-active .cd-icon { background: #b7efb2; color: #1c3c27; }
.cd-side-sec[aria-label="Pipeline"] .is-active .cd-icon { background: #ffeed8; color: #b8431c; }
.cd-side-sec:is([aria-label="Library"], [aria-label="My day"]) .is-active .cd-icon { background: #ffef99; color: #6a4a00; }
.cd-side-pinned .is-active .cd-icon { background: var(--surface-sunken); color: var(--ink); }
.cd-side-count { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #1111110a; color: var(--ink-muted); }
.cd-side-foot { padding: 0 10px 12px; }
.cd-side-user { margin-top: 6px; padding: 8px; border: 0; border-radius: 11px; background: var(--side-active); box-shadow: var(--sh-label), 0 0 0 1px var(--line); }
.cd-side-user.is-btn:hover { box-shadow: var(--sh-nav), 0 0 0 1px var(--line); }

/* ---------- top bar: the site's floating pill nav over the canvas ---------- */
.app-topbar { padding: 10px 24px 0; background: transparent; }
.app-topbar::before { content: ""; position: absolute; inset: 0 0 -12px; z-index: -1; background: linear-gradient(var(--canvas) 55%, transparent); pointer-events: none; }
.cd-topbar { height: 48px; padding: 0 8px 0 10px; border: 1px solid var(--surface); border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--sh-nav), 0 0 0 1px var(--line); }
:root[data-theme="dark"] .cd-topbar { border-color: #ffffff14; }
.cd-topbar-input { height: 34px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 13.5px; }
.cd-topbar-live { height: 28px; border-radius: 9px; background: var(--surface-subtle); border: 1px solid var(--surface); box-shadow: var(--sh-label), 0 0 0 1px var(--line); }
.cd-topbar-dot { background: var(--orange); }
@media (max-width: 639.98px) { .app-topbar { padding: 8px 12px 0; } }

/* ---------- page header: big light two-tone title, eyebrow as the site's pill ---------- */
.cd-ph { padding: 22px 0 12px; gap: 12px; }
.cd-ph-eyebrow { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; width: fit-content; margin-bottom: 10px; padding: 3px 10px 3px 4px; border: 1px solid var(--surface); border-radius: 9px; background: var(--surface-subtle); box-shadow: var(--sh-label), 0 0 0 1px var(--line); color: var(--ink); font-size: 12px !important; font-weight: 500; line-height: 16px; }
.cd-ph-eyebrow b { display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 6px; background: var(--ink); color: var(--on-inverse); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .01em; }
.cd-ph-eyebrow:not(:has(b)) { padding-left: 10px; }
.cd-ph-title { font-size: 32px; line-height: 1.1; letter-spacing: -1px; font-weight: 400; text-wrap: balance; }
.cd-ph-lead { max-width: 64ch; margin-top: 8px; font-size: 14.5px; line-height: 1.45; letter-spacing: -0.1px; color: var(--ink-muted); }
@media (max-width: 1023.98px) { .cd-ph-title { font-size: 28px; letter-spacing: -.8px; } }
@media (max-width: 639.98px) { .cd-ph-title { font-size: 24px; line-height: 1.15; letter-spacing: -.5px; } }

/* ---------- panels: white cards with the site's hairline ---------- */
.cd-panel { border-radius: 14px; border-color: var(--line); background: var(--surface); }
.cd-panel-head { padding: 14px 16px 0; }
.cd-panel-body { padding: 12px 16px 16px; }
.cd-panel-title { font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -0.15px; }
.cd-panel-sub { font-size: 12.5px; color: var(--ink-muted); }
.cd-panel-foot { background: var(--surface-subtle); border-top-color: var(--line); border-radius: 0 0 14px 14px; }
.cd-panel-link { font-weight: 500; }

/* ---------- KPI tiles: the site's pastel stat tiles ---------- */
.app-kpis > .cd-kpi { --tile: var(--tint-canary); background: var(--tile); border: 1px solid #1111110d; border-radius: 13px; min-height: 116px; padding: 14px 16px; gap: 6px; justify-content: space-between; }
.app-kpis > .cd-kpi:nth-child(6n+2) { --tile: var(--tint-mint); }
.app-kpis > .cd-kpi:nth-child(6n+3) { --tile: var(--tint-violet); }
.app-kpis > .cd-kpi:nth-child(6n+4) { --tile: var(--tint-pink); }
.app-kpis > .cd-kpi:nth-child(6n+5) { --tile: var(--tint-peach); }
.app-kpis > .cd-kpi:nth-child(6n+6) { --tile: var(--tint-aqua); }
/* A label too long for its tile wraps to a second line instead of being cut off (the kit's label is one line, with an
   ellipsis). Beside a status badge the label keeps at least 6em, so it wraps beside the badge (1180 to 1366 px wide);
   when even that doesn't fit (about 1024 px), the badge moves under the label. Labels that fit stay on one line. */
.app-kpis .cd-kpi-label { font-size: 13px; line-height: 17px; color: var(--ink); opacity: .7; white-space: normal; overflow-wrap: anywhere; }
.app-kpis .cd-kpi-head:has(> .cd-badge) { flex-wrap: wrap; row-gap: 4px; }
.app-kpis .cd-kpi-head:has(> .cd-badge) > .cd-kpi-label { flex: 1 1 0; min-width: 6em; }
.app-kpis .cd-kpi-value { font-size: 30px; line-height: 1.05; letter-spacing: -1px; font-weight: 400; }
.app-kpis .cd-delta-v { padding: 1px 6px; border-radius: 6px; background: #ffffffc2; font-weight: 600; }
:root[data-theme="dark"] .app-kpis .cd-delta-v { background: #0000004d; }
.app-kpis .cd-kpi-target, .app-kpis .cd-kpi-sub, .app-kpis .cd-delta-l { color: var(--ink-secondary); }
.app-kpis .cd-kpi.is-link:hover { border-color: #11111126; box-shadow: var(--sh-screen); }
.app-kpis .cd-kpi-go { color: var(--ink); opacity: .5; }
.cd-kpi { border-radius: 14px; }
.cd-kpi-value { font-weight: 400; }

/* ---------- badges, chips, segmented control, tabs ---------- */
.cd-badge { height: 22px; padding: 0 8px; border-radius: 7px; font-weight: 500; font-size: 12px; letter-spacing: -0.005em; }
.cd-badge-sm { height: 19px; padding: 0 6px; border-radius: 6px; font-size: 11px; }
.cd-badge-neutral { background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-secondary); }
.cd-badge-solid { background: var(--ink); color: var(--on-inverse); }
.cd-chip { border-radius: 9px; background: var(--surface-subtle); border-color: var(--line-strong); box-shadow: var(--sh-label); font-weight: 450; }
.cd-chip.is-on, .cd-chip[aria-checked="true"], .cd-chip[aria-pressed="true"] { background: var(--ink); color: var(--on-inverse); border-color: var(--ink); box-shadow: none; }
.cd-chip.is-on .cd-chip-count, .cd-chip[aria-checked="true"] .cd-chip-count, .cd-chip[aria-pressed="true"] .cd-chip-count { color: var(--on-inverse); opacity: .7; }
.cd-seg { border-radius: 11px; background: #1111110d; padding: 3px; }
:root[data-theme="dark"] .cd-seg { background: #ffffff12; }
.cd-seg-opt { border-radius: 8px; font-weight: 500; }
.cd-seg-opt.is-on { box-shadow: var(--sh-label), 0 0 0 1px var(--line); }
.cd-tab { font-weight: 500; }

/* ---------- tables: sentence-case headers on the soft surface ---------- */
.cd-table { border-radius: 14px; }
.cd-table thead th { background: var(--surface-subtle); font-size: 12.5px !important; font-weight: 500; color: var(--ink-muted); }
.cd-table tbody th, .cd-table tbody td { border-bottom-color: var(--line); }
.cd-table-row:hover > * { background: var(--surface-subtle); }

/* ---------- avatars: the site's gradient rounded squares ---------- */
.cd-avatar { border-radius: 9px; color: #fff; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 1px #0000002e; }
.cd-avatar-sm { border-radius: 7px; }
.cd-avatar-lg { border-radius: 14px; }
.cd-avatar.cd-tint-canary { background: linear-gradient(135deg, #e16540, #fbc768); }
.cd-avatar.cd-tint-aqua { background: linear-gradient(135deg, #2d72f0, #95d1fd); }
.cd-avatar.cd-tint-violet { background: linear-gradient(135deg, #10054d, #9999fe); }
.cd-avatar.cd-tint-mint { background: linear-gradient(135deg, #1c3c27, #47d096); }
.cd-avatar.cd-tint-pink { background: linear-gradient(135deg, #b8467e, #ff91be); }
.cd-avatar.cd-tint-peach { background: linear-gradient(135deg, #441a0d, #ffaa8e); }
.cd-avatar-ai { background: linear-gradient(135deg, #9999fe, #328efa) !important; color: #fff !important; }

/* ---------- Cadence's own voice: the site's violet-to-sky prompt card ---------- */
.cd-callout-ai, .cd-drawer-sec-ai { background: linear-gradient(135deg, #f3efff, #eef8ff) !important; box-shadow: inset 0 0 0 1px #e2ddfd; }
:root[data-theme="dark"] .cd-callout-ai, :root[data-theme="dark"] .cd-drawer-sec-ai { background: linear-gradient(135deg, #26223f, #1d2a44) !important; box-shadow: inset 0 0 0 1px #3a3466; }
.cd-callout { border-radius: 14px; }
.cd-callout:not(.cd-callout-ai):not(.cd-callout-positive):not(.cd-callout-warning):not(.cd-callout-critical) { background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); }
.cd-callout-positive { background: #e7f6ec; }
.cd-callout-warning { background: #fff6cc; }
:root[data-theme="dark"] .cd-callout-positive { background: var(--positive-soft); }
:root[data-theme="dark"] .cd-callout-warning { background: var(--warning-soft); }

/* ---------- drawer, modal, fields, toast ---------- */
.cd-drawer { border-radius: 18px 0 0 18px; }
.cd-drawer-title, .cd-modal-title { font-weight: 400; letter-spacing: -0.6px; }
.cd-drawer-eyebrow, .cd-modal-eyebrow { font-size: 12.5px !important; font-weight: 500; color: var(--ink-muted); }
.cd-modal { border-radius: 18px; }
.cd-field-input { border-radius: 9px; border-color: var(--line-strong); font-size: 13.5px; }
.cd-field-input:hover { border-color: #11111166; }
:root[data-theme="dark"] .cd-field-input:hover { border-color: #ffffff4d; }
.cd-field-label { font-weight: 500; }
.cd-toast { border-radius: 12px; box-shadow: var(--sh-btn), var(--shadow-float); }
.cd-metric { border-radius: 12px; background: var(--surface-subtle); }
.cd-callrow-group { font-size: 12.5px !important; font-weight: 500; }
.cd-empty-title { font-size: 19px; letter-spacing: -0.4px; }

/* ---------- account menu, skeleton and the prototype's own blocks, in the brand's shapes ---------- */
.app-menu { border-radius: 14px; border-color: var(--surface); }
.app-skel { border-radius: 8px; }
.app-pack, .app-champ { border-radius: 14px; }
.app-champ-icon { border-radius: 12px; color: #fff; box-shadow: inset 1px 1px 1px #ffffff59, inset 0 -2px 1px #00003814, 0 10px 22px -8px #000f4d47; }
.app-champ:nth-child(6n+1) .app-champ-icon { background: #ff4aa7; }
.app-champ:nth-child(6n+2) .app-champ-icon { background: #2d72f0; }
.app-champ:nth-child(6n+3) .app-champ-icon { background: #ff6a00; }
.app-champ:nth-child(6n+4) .app-champ-icon { background: #25b366; }
.app-champ:nth-child(6n+5) .app-champ-icon { background: #7b6ff0; }
.app-champ:nth-child(6n+6) .app-champ-icon { background: #e8b100; }

/* =========================================================================================
   Brand pieces (src/brand/Brand.tsx)
   ========================================================================================= */

/* folder tab: the site's chamfer path at tab size, a label between two mirrored joins */
.app-ftab { position: absolute; top: -21px; left: 18px; z-index: 2; display: flex; height: 22px; pointer-events: none; }
.app-ftab svg { width: 29.3px; height: 22px; flex: none; fill: var(--tab); transform: scaleY(-1); }
.app-ftab svg.r { transform: scale(-1, -1); }
.app-ftab b { display: flex; align-items: center; margin: 0 -1px; padding: 0 5px 1px; background: var(--tab); color: var(--tab-ink); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }

/* the dark folder band */
.app-folder { position: relative; margin-top: 26px; padding: 24px 22px 22px; border-radius: 16px; background: var(--band); color: var(--band-ink); isolation: isolate; overflow: visible; }
.app-folder::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 16px; background: radial-gradient(60% 80% at 15% 0%, #ffffff0d, transparent 70%); pointer-events: none; }
.app-folder-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 16px; }
.app-folder-title { margin: 0; font: 400 23px/1.1 var(--font-display); letter-spacing: -0.6px; color: #fff; }
.app-folder-lead { margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.4; color: var(--band-muted); }
.app-folder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1279.98px) { .app-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .app-folder { padding: 26px 16px 18px; } .app-folder-grid { grid-template-columns: minmax(0, 1fr); } .app-folder-title { font-size: 23px; } }

/* pastel-tabbed dark card */
.app-tabcard { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-top: 22px; padding: 18px 16px 14px; border-radius: 12px; border: 1px solid var(--band-line); border-top-left-radius: 0; background: linear-gradient(180deg, #ffffff08, transparent 55%), var(--band-card); color: var(--band-ink); }
.app-tabcard .app-ftab { left: -1px; }
.app-tabcard-value { margin: 0; font: 400 27px/1.05 var(--font-display); letter-spacing: -0.8px; color: #fff; font-variant-numeric: tabular-nums; }
.app-tabcard-title { margin: 0; font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: -0.16px; color: #fff; }
.app-tabcard-body { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--band-muted); }
.app-tabcard-action { margin-top: auto; padding-top: 10px; }
.app-tabcard-action .cd-btn-secondary { border-color: #ffffff4d; color: #fbfaf9; }
.app-tabcard-action .cd-btn-secondary:hover { border-color: #fbfaf9; }

/* handwritten doodle */
.app-doodle { position: absolute; display: block; color: var(--ink); pointer-events: none; font-family: var(--font-hand); font-weight: 500; line-height: .9; }
.app-doodle-text { display: inline-block; font-size: 25px; transform: rotate(-8deg); white-space: nowrap; }
.app-doodle svg { display: block; overflow: visible; }
.app-doodle.is-down-left svg { width: 92px; height: 78px; margin: -2px 0 0 -44px; }
.app-doodle.is-down svg { width: 110px; height: 76px; margin: 4px 0 0 22px; }
@media (max-width: 1023.98px) { .app-doodle { display: none; } }

/* line-drawn people (the site's .fig) */
.app-figure { display: inline-flex; flex: none; }
.app-figure svg { width: 100%; height: auto; }
.app-fig .o { stroke: var(--ink); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.app-fig .i { stroke: var(--surface); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.app-fig .ln { stroke: var(--ink); stroke-width: 1.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.app-fig .hd, .app-fig .fl { fill: var(--surface); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }

/* the soft glow behind a hero */
.app-glow { position: absolute; z-index: -1; left: 10%; right: 10%; top: 10%; bottom: -20%; border-radius: 50%; filter: blur(70px); opacity: .7; pointer-events: none;
  background:
    radial-gradient(40% 45% at 22% 40%, #d0b2ff, transparent 70%),
    radial-gradient(38% 42% at 78% 38%, #99fff9, transparent 70%),
    radial-gradient(45% 40% at 50% 70%, #ffeed8, transparent 72%),
    radial-gradient(30% 30% at 62% 20%, #ffb49a, transparent 70%);
  animation: app-shade 16s ease-in-out infinite alternate; }
:root[data-theme="dark"] .app-glow { opacity: .22; }
@keyframes app-shade { 50% { transform: translate3d(2%, -3%, 0) rotate(6deg) scale(1.05); } 100% { transform: translate3d(-2%, 2%, 0) rotate(-5deg) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .app-glow { animation: none; } }

/* friendly empty state */
.app-friendly { display: flex; flex-direction: column; align-items: center; padding-top: 28px; }
.app-friendly .app-figure { width: 80px; margin-bottom: -24px; }

/* ---------- the Overview's welcome hero ---------- */
.app-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: end; gap: 20px; margin-top: 14px; padding: 26px 28px 24px; border-radius: 18px; background: #ffffffa6; border: 1px solid #fff; box-shadow: var(--sh-screen); overflow: hidden; }
:root[data-theme="dark"] .app-hero { background: #1b1a19cc; border-color: #ffffff14; }
.app-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; min-width: 0; }
.app-hero .cd-ph-eyebrow { margin: 0; }
.app-hero-title { margin: 0; font: 400 35px/1.08 var(--font-display); letter-spacing: -1.2px; color: var(--ink); text-wrap: balance; }
.app-hero-lead { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.45; letter-spacing: -0.12px; color: var(--ink-secondary); }
.app-hero-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.app-hero-doodle { position: relative !important; display: inline-flex; flex-direction: column; align-items: flex-start; margin: -26px 0 0 4px; }
.app-hero-actions:has(.app-hero-doodle) { margin-top: 14px; }
@media (max-width: 1023.98px) { .app-hero-actions:has(.app-hero-doodle) { margin-top: 2px; } }
.app-hero-doodle .app-doodle-text { font-size: 22px; margin-left: 36px; }
.app-doodle.is-left svg { width: 88px; height: 44px; margin: 2px 0 0 -6px; }
.app-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.app-hero-art { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; }
.app-hero-art .app-figure { width: 118px; }
@media (max-width: 1023.98px) { .app-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; } .app-hero-art { display: none; } .app-hero-title { font-size: 29px; letter-spacing: -.9px; } }
@media (max-width: 639.98px) { .app-hero { padding: 18px 16px; border-radius: 16px; } .app-hero-title { font-size: 25px; letter-spacing: -.6px; } }

/* a figure beside a page header */
.app-ph-art { width: 88px; margin: -20px 0 -14px; }
@media (max-width: 1023.98px) { .app-ph-art { display: none; } }
.app-ph-doodle { position: relative; display: inline-block; }
.app-doodle-inline { position: absolute; right: 96px; top: -8px; }
.app-doodle-inline .app-doodle-text { font-size: 22px; }
@media (max-width: 1023.98px) { .app-hero-doodle, .app-doodle-inline { display: none !important; } }
@media (max-width: 639.98px) { .app-kpis > .cd-kpi { min-height: 0; } .app-kpis .cd-kpi-value { font-size: 26px; } }

/* ---------- page rhythm: tighter gutters and gaps ---------- */
.app-page { padding: 0 24px 40px; gap: 14px; }
.app-kpis, .app-grid { gap: 14px; }
.app-stack { gap: 14px; }
@media (max-width: 639.98px) { .app-page { padding: 0 16px 32px; } }

/* =========================================================================================
   Perspectives: the "Viewing as" switch in the sidebar, its menu, and Settings → Roles & access
   ========================================================================================= */
.is-founder { --persp-tint: #e2ddfd; --persp-ink: #3b2fa0; }
.is-manager { --persp-tint: #b7efb2; --persp-ink: #1c3c27; }
.is-telecaller { --persp-tint: #ffef99; --persp-ink: #6a4a00; }

.cd-side-ws.is-btn { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 6px 8px 6px 6px; border: 0; border-radius: 11px; background: var(--side-active); box-shadow: var(--sh-label), 0 0 0 1px var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .2s cubic-bezier(.23, 1, .32, 1); }
.cd-side-ws.is-btn:hover { box-shadow: var(--sh-nav), 0 0 0 1px var(--line); }
.cd-side-ws.is-btn > span:first-child { flex: 1; min-width: 0; }
.cd-side-ws.is-btn > .cd-icon { color: var(--ink-muted); }
.app-ws { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; }
.app-ws::before { content: ""; grid-row: 1 / 3; grid-column: 1; width: 28px; height: 28px; border-radius: 8px; background: var(--persp-tint); box-shadow: inset 0 0 0 1px #1111110d; }
.app-ws-l { font-size: 11px; line-height: 14px; color: var(--ink-muted); }
.app-ws-v { overflow: hidden; font-size: 13.5px; line-height: 17px; font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.app-ws-i { grid-row: 1 / 3; grid-column: 1; justify-self: center; color: var(--persp-ink); }

.app-persp-menu { width: 316px; gap: 12px; overflow-y: auto; }
.app-persp-list, .app-persp-reps { display: flex; flex-direction: column; gap: 2px; }
.app-persp-opt { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: start; gap: 10px; width: 100%; margin: 0; padding: 7px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .12s cubic-bezier(.23, 1, .32, 1); }
.app-persp-opt:hover { background: var(--surface-sunken); }
.app-persp-opt[aria-pressed="true"] { background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line-strong); }
.app-persp-opt > .cd-icon:last-child { margin-top: 7px; }
.app-persp-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--persp-tint); color: var(--persp-ink); box-shadow: inset 0 0 0 1px #1111110d; }
.app-persp-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-persp-t b { font-size: 13.5px; line-height: 18px; font-weight: 600; }
.app-persp-t span { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.app-persp-reps .app-menu-item { min-height: 32px; font-weight: 450; }
.app-persp-reps .app-menu-item[aria-pressed="true"] { background: var(--surface-sunken); font-weight: 600; }

.app-persp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.app-persp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 16px; border-radius: 14px; background: var(--persp-tint); border: 1px solid #1111110d; color: #111; }
.app-persp-card .app-persp-icon { background: #ffffffb3; }
.app-persp-card-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; font: 400 19px/1.2 var(--font-display); letter-spacing: -0.4px; color: #111; }
.app-persp-card .body-sm { margin: 0; color: #111111c7; }
.app-persp-card .caption { color: #1111119e; }
.app-persp-card .cd-btn { margin-top: 6px; color: #111; border-color: #11111159; }
.app-persp-card .cd-btn:hover:not(:disabled) { border-color: #111; }
.app-access-cell { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1023.98px) { .app-persp-cards { grid-template-columns: minmax(0, 1fr); } }

/* the post-call wrap-up: Cadence's draft sits on the violet-to-sky card until the telecaller saves it */
.app-wrapform { padding: 16px; border-radius: 12px; background: linear-gradient(135deg, #f6f3ff, #f0f8ff); box-shadow: inset 0 0 0 1px #e2ddfd; }
:root[data-theme="dark"] .app-wrapform { background: linear-gradient(135deg, #221f38, #1b2538); box-shadow: inset 0 0 0 1px #3a3466; }

/* =========================================================================================
   Take a tour: the page dims, the part being explained is lit, a card explains it
   ========================================================================================= */
.app-tour { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 5); pointer-events: none; }
.app-tour-block { position: fixed; inset: 0; pointer-events: auto; }
.app-tour-dim { position: fixed; inset: 0; background: #11111166; animation: app-tour-in .25s cubic-bezier(.23, 1, .32, 1); }
.app-tour-lit { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px #11111166, 0 0 0 2px #fff, 0 0 0 6px #9d8cff66; pointer-events: none; }
.app-tour-lit.is-moving { transition: top .35s cubic-bezier(.23, 1, .32, 1), left .35s cubic-bezier(.23, 1, .32, 1), width .35s cubic-bezier(.23, 1, .32, 1), height .35s cubic-bezier(.23, 1, .32, 1); }
:root[data-theme="dark"] .app-tour-dim { background: #000000a6; }
:root[data-theme="dark"] .app-tour-lit { box-shadow: 0 0 0 9999px #000000a6, 0 0 0 2px #b3abff, 0 0 0 6px #b3abff40; }

.app-tour-card { position: fixed; box-sizing: border-box; width: 360px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--surface); box-shadow: var(--sh-nav), 0 0 0 1px var(--line), 0 24px 48px -12px #11111140; color: var(--ink); pointer-events: auto; animation: app-tour-in .25s cubic-bezier(.23, 1, .32, 1); }
.app-tour-card.is-hidden { visibility: hidden; }
.app-tour-card.is-bookend { width: 420px; padding: 20px 22px 16px; }
.app-tour-card.is-bookend::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 16px; background: radial-gradient(60% 70% at 15% 0%, #e2ddfd, transparent 70%), radial-gradient(50% 60% at 95% 10%, #c6ece9, transparent 70%); opacity: .7; }
:root[data-theme="dark"] .app-tour-card.is-bookend::before { opacity: .18; }
.app-tour-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-tour-count { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ai); font-variant-numeric: tabular-nums; }
.app-tour-head-r { display: inline-flex; align-items: center; gap: 2px; }
.app-tour-skip { display: inline-flex; align-items: center; gap: 2px; height: 26px; margin: -4px 0; padding: 0 6px 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-secondary); font: 500 12.5px/1 var(--font-ui); cursor: pointer; }
.app-tour-skip:hover { background: var(--surface-sunken); color: var(--ink); }
.app-tour-skip:focus-visible { outline: 2px solid var(--focus, var(--blue)); outline-offset: 2px; }
.app-tour-btns { display: inline-flex; align-items: center; gap: 2px; }
.app-tour-x { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-muted); cursor: pointer; }
.app-tour-x:hover { background: var(--surface-sunken); color: var(--ink); }
.app-tour-x:focus-visible { outline: 2px solid var(--focus, var(--blue)); outline-offset: 2px; }
.app-tour-progress { height: 3px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.app-tour-progress i { display: block; height: 100%; border-radius: 3px; background: var(--ai); transition: width .3s cubic-bezier(.23, 1, .32, 1); }
.app-tour-title { margin: 2px 0 0; font: 400 20px/1.2 var(--font-display); letter-spacing: -0.4px; color: var(--ink); }
.is-bookend .app-tour-title { font-size: 24px; letter-spacing: -0.6px; }
.app-tour-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-secondary); }
.app-tour-body p + p { margin-top: 8px; }
.app-tour-tip { padding: 8px 10px; border-radius: 10px; background: var(--ai-soft); color: var(--ink) !important; font-size: 13px !important; }
.app-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.app-tour-nav { display: inline-flex; gap: 8px; margin-left: auto; }
.app-tour-end { margin-left: -10px; }
@keyframes app-tour-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .app-tour-card, .app-tour-dim { animation: none; } .app-tour-progress i { transition: none; } }
@media (max-width: 639.98px) { .app-tour-card, .app-tour-card.is-bookend { width: auto; padding: 16px; } .app-tour-title, .is-bookend .app-tour-title { font-size: 20px; } }

/* phones: page-header controls take the full row and wrap, instead of running off the side */
@media (max-width: 639.98px) {
  .cd-ph-actions { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .cd-ph-actions .cd-seg { max-width: 100%; overflow-x: auto; }
}