/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* playfair-display-cyrillic-wght-normal */
@font-face {
  font-family: 'Playfair Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/assets/playfair-display-cyrillic-wght-normal-5WvUvBgz.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* playfair-display-vietnamese-wght-normal */
@font-face {
  font-family: 'Playfair Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/assets/playfair-display-vietnamese-wght-normal-Cabi7G8-.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* playfair-display-latin-ext-wght-normal */
@font-face {
  font-family: 'Playfair Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/assets/playfair-display-latin-ext-wght-normal-CT1r92Rl.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* playfair-display-latin-wght-normal */
@font-face {
  font-family: 'Playfair Display Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/assets/playfair-display-latin-wght-normal-BOwq7MWX.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Page titles use the editorial serif everywhere, by default - no page needs
   to opt in. More specific selectors (.ProseMirror h1 etc.) still win on
   size/weight for embedded rich-text content, same as before. */
h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}
.targets-layout { display: flex; gap: 0; align-items: flex-start; }
.policy-body ul, .policy-body ol { padding-left: 24px; margin: 8px 0; }
.policy-body li { margin: 4px 0; }
.policy-editor ul, .policy-editor ol { padding-left: 24px; margin: 8px 0; }
.policy-editor li { margin: 4px 0; }
@keyframes navDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
select {
  appearance: none;
  background-color: var(--bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 8px 30px 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.4;
}
select:focus { outline: none; border-color: var(--accent); }
select:hover { border-color: var(--text-muted); }
select option { background: var(--bg-card); color: var(--text-primary); }

.info-tip:hover > .info-tip-box { display: block !important; }
.info-tip:hover { color: var(--text-secondary) !important; border-color: var(--text-faint) !important; }

.recharts-wrapper, .recharts-wrapper *, .recharts-surface { outline: none !important; }

/* Text selection — warm accent tint, not the old cool blue */
::selection { background: var(--accent-tint); color: var(--text-primary); }
::-moz-selection { background: var(--accent-tint); color: var(--text-primary); }
input::selection, textarea::selection { background: var(--accent-tint); color: var(--text-primary); }
input::-moz-selection, textarea::-moz-selection { background: var(--accent-tint); color: var(--text-primary); }

/* System page sidebar - desktop defaults */
.targets-sidebar {
  width: 180px;
  flex-shrink: 0;
  position: sticky;
  top: 68px;
}
.targets-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.targets-sidebar-btn {
  width: 100%;
}

:root {
  font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  /* Playfair Display, not Fraunces (2026-07-30). The brand sheet's page-title
     specimen is a high-contrast Didone - fine hairline serifs, strong
     thick/thin modulation, ball terminals. Fraunces is a soft, low-contrast
     serif, a different category, which is what read as unelegant next to the
     sheet. Applies to every serif moment: page titles and primary stat
     numbers alike. */
  --font-serif: 'Playfair Display Variable', 'Playfair Display', Georgia, serif;
  /* NOTE on figures: Playfair defaults to OLD-STYLE numerals (varying
     heights, descenders on 3/4/5/7/9) - wrong for metrics, so every serif
     number must set `font-variant-numeric: lining-nums`. It also has no
     `tnum` feature, so `tabular-nums` is silently a no-op on serif text.
     Keep any column of stacked, right-aligned figures on the SANS stack,
     where tabular actually works. Verified in-browser, not assumed. */
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;

  /* ═══ Design Tokens (retuned 2026-07-29 to the "Dashboard Style Guide -
     Ref Client Portal" reference — supersedes the original Design Specs.docx
     hex values; single theme, no dark mode) ═══ */
  color-scheme: light;
  /* 2026-07-29: retuned to more closely match the reference mockup's
     actual sampled card/canvas tones (~#FBF8F7-#FDFAF7 across several
     cards) - was #FFFFFD (near-true-white), a shared David-supplied
     value from an earlier pass that read flatter/whiter than the mockup. */
  --bg-canvas: #FCFAF8;
  /* Page background: flat #FCFAF8 for the first 4/5 of the width, easing
     into #FFF8F3 over the last 1/5 on the right, with the vertical
     branching-line illustration (bg-vertical.png) layered on top, right-
     anchored and vertically centered - replaced the earlier generated
     concentric-circle SVG with the real brand illustration David supplied.
     --bg-canvas itself stays a flat color for consumers that need a plain
     value (text-color contrast swaps, the style-guide swatch) - a gradient
     isn't valid there. Curved lines: denser spacing (42px steps vs. the
     previous 85px) per David's "circles too far apart" note.
     2026-07-29: stroke color corrected to #F0DDD0 (a muted warm tan, same
     family as --border-highlight) - it was literally #FFF9F6, identical to
     the canvas gradient's own right-side stop it's drawn on top of, so the
     lines were rendering perfectly invisible. Then bumped once more to
     #E3C9B5 (darker) with the box scaled up (800x700 -> 920x805) per
     David's "slightly larger, ever so slightly darker" follow-up.
     2026-07-29: circle center moved from cy=40 (top-anchored) to cy=600
     (dead center of the 1200-tall viewBox) and the background-position
     switched top right -> right center, so the pattern now sits at the
     vertical middle of the page instead of hugging the top - per David's
     "midway down the page" follow-up. Centering the box alone wouldn't
     have done this: the circles need to be centered *within* the SVG's
     own viewBox for a centered box position to actually land them at
     the page's vertical middle.
     2026-07-29: fixed a hard rectangular "cutoff" - the largest circles
     (radius up to 880) exceeded the old 1200-tall viewBox's half-height
     (600 from center), so they got clipped flat by the box's own top/
     bottom edge instead of closing into a full ring. ViewBox grown to
     1600x1800 (cy=900, safely > 880) so every circle closes fully;
     background-size recomputed to 920x1035 to keep the box's aspect
     ratio matching the viewBox (the old 920x805 box didn't match
     1600x1200's ratio either, which was quietly rendering the "circles"
     as slightly squashed ellipses). Horizontal clipping at the right
     edge (cx=1500 sits only 100 units from the viewBox's right edge)
     is unchanged and intentional - that's the "bursting off-canvas"
     look, not a bug. */
  /* body has background-attachment:fixed, so the painting area is the
     viewport - "100%" height here stretches the illustration edge-to-edge
     top to bottom rather than the shorter auto-height crop. */
  --bg-canvas-gradient: url("/bg-vertical.png") no-repeat right top / 630px 100%, linear-gradient(90deg, #FCFAF8 0%, #FCFAF8 80%, #FFF8F3 100%);
  --bg-card: #FCFAF8;
  --bg-card-alt: #F6F3F0;
  --bg-card-hover: #F6F3F0;
  --bg-input: #FCFAF8;
  --bg-modal: rgba(15, 15, 15, 0.45);
  /* "Highlighted" surface cards (elevated/gradient hero-style moments) -
     distinct from the plain --bg-card/--border-card pair below. */
  --bg-card-highlight: #FFF8F2;
  --border-highlight: #F5E0D3;
  /* Midpoint between --bg-card (#FCFAF8) and --bg-card-highlight (#FFF8F2) -
     for cards that should read as a step warmer than plain white without
     competing with the hero card's own highlight tone. */
  --bg-card-tinted: #FEF9F5;

  /* Sidebar/topbar — Phase 2 shell reskin: warm cream sidebar, terracotta active state. */
  --bg-sidebar: #FFFCF7;
  /* Warm-to-light transition completes within the top third; the bottom
     two-thirds stay flat at the light stop (per David's 1/3 warm : 2/3
     light proportion note - was a smooth 0%->100% blend across the full
     rail before). Light stop corrected to #FFFCF7 to match the mockup's
     actual lightest sidebar value (was #FFFEF9, slightly too light). */
  --bg-sidebar-gradient: linear-gradient(180deg, #FFF6F1 0%, #FFFCF7 33%, #FFFCF7 100%);
  --bg-sidebar-hover: #F7F6F4;
  --bg-topbar: #FFFFFC;
  --topbar-search-bg: #FDF9F6;
  --sidebar-text: #4B4844;
  --sidebar-text-hover: #0F0F0F;
  --sidebar-text-active: #0F0F0F;
  --sidebar-text-faint: #7D7974;
  --sidebar-border: #E7E3DF;
  --accent-lime: #E9734A;
  --nav-active-bg: #FEE8D6;
  --nav-active-border: #FCE2CE;

  --border: #E7E3DF;
  --border-subtle: #F0EDEA;
  --border-strong: #D8D3CF;
  --border-active: rgba(233, 115, 74, 0.35);
  /* Was #FAF5F3 - only ~2-5 RGB units off --bg-card (#FCFAF8), i.e.
     imperceptible as an actual border on every plain Card (Agency Revenue
     Trend, Revenue Composition, StatGroup, etc. - most cards site-wide).
     Matched to --border so cards read as bordered without a shadow-only look. */
  --border-card: #E7E3DF;

  --text-primary: #0F0F0F;
  --text-secondary: #4B4844;
  --text-muted: #7D7974;
  --text-dim: #7D7974;
  /* Darkened #A6A29D -> #8F8B85 (contrast on --bg-card: 2.53:1 -> 3.38:1).
     Still fails strict AA-normal (4.5:1) for small text - genuinely can't
     fix that without also darkening past --text-muted (#7D7974, itself
     only 4.32:1) and inverting the intended faint < muted ordering. This
     is the ceiling for this token without a hierarchy rework; anything
     read as truly essential shouldn't use --text-faint at all. */
  --text-faint: #8F8B85;
  --text-ghost: #C7C3BE;
  --text-on-card: #0F0F0F;

  --brand: #CC5D39;
  --brand-dark: #A8472A;
  --accent: #E9734A;
  --accent-hover: #CC5D39;
  --accent-soft: #F9E6E1;
  --accent-tint: #F9E6E1;
  /* Deliberately NOT set to the reference's literal "#FFFFFF" - that entry
     describes text-on-filled-accent (buttons already hardcode #fff for that).
     This token's real job is accent-colored text ON light surfaces (Alert,
     KpiTile negative delta, PreviewRoleSwitcher, hero shortfall text) and
     needs to stay dark enough to read - a darkened shade of the new accent. */
  --accent-text: #A8472A;

  --positive: #16A34A;
  --positive-bg: #E8F7EC;
  --positive-tint: #E8F7EC;
  --negative: #EF4444;
  --negative-bg: #FEE2E2;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --info: #4F8EF7;
  --live: #EF4444;

  /* Ordered data-viz palette — multi-hue categorical, per the retuned spec
     (was all-warm; the newer reference explicitly widens this).
     --chart-5/6 added when DonutChart's 4-color palette was found silently
     cycling (5th/6th slice reusing chart-1/2's colors, making two different
     categories look identical in the legend) - real categorical data can
     have more than 4 slices (e.g. Revenue Breakdown's 6 categories). */
  --chart-1: #E9734A;
  --chart-2: #4F8EF7;
  --chart-3: #22C55E;
  --chart-4: #A855F7;
  --chart-5: #14B8A6;
  --chart-6: #D97706;

  /* Real visible elevation (was near-flat/whisper-only; retuned per spec) */
  --shadow-card: 0 1px 2px rgba(15, 15, 15, 0.04), 0 8px 24px rgba(15, 15, 15, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(15, 15, 15, 0.08), 0 20px 40px rgba(15, 15, 15, 0.10);
  --shadow-dropdown: 0 8px 24px rgba(15, 15, 15, 0.12);
  /* Neutral grey, matching the Command Center Mockup's actual hero-card
     shadow - was an accent-orange glow (rgba(233,115,74,.20)) per an
     earlier reference's caption; the mockup itself just uses a stronger
     version of the same neutral shadow every other card gets. */
  --shadow-hero: 0 8px 20px rgba(15, 15, 15, 0.08), 0 24px 56px rgba(15, 15, 15, 0.12);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-card: 16px;
  --radius-full: 9999px;
}

body {
  background: var(--bg-canvas-gradient, var(--bg-canvas));
  background-attachment: fixed;
  color: var(--text-primary);
  transition: background 200ms ease, color 200ms ease;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
}

#root {
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
}

button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; }
input { font-family: inherit; font-size: inherit; }
input[type="checkbox"], input[type="radio"] { cursor: pointer; }
a { cursor: pointer; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.nav-hamburger { display: none !important; }

/* Sidebar nav layout: desktop shows the sidebar, mobile shows the drawer bar. */
.sidebar-desktop { display: flex; }
.mobile-nav-bar { display: none !important; }
@media (max-width: 768px) {
  .sidebar-desktop { display: none !important; }
  .mobile-nav-bar { display: flex !important; }
}

/* Heatmap fade in */
.heatmap-panel { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Heatmap border flash on new transaction — 5 pulses in 1.5s */
@keyframes borderFlash {
  0% { stroke-opacity: 0; }
  10% { stroke-opacity: 1; }
  20% { stroke-opacity: 0.1; }
  30% { stroke-opacity: 1; }
  40% { stroke-opacity: 0.1; }
  50% { stroke-opacity: 1; }
  60% { stroke-opacity: 0.1; }
  70% { stroke-opacity: 1; }
  80% { stroke-opacity: 0.1; }
  90% { stroke-opacity: 0.8; }
  100% { stroke-opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET (≤1200px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  main { padding: 20px 16px 40px !important; }
  .dash-layout { flex-direction: column-reverse !important; }
  .dash-sidebar { width: 100% !important; position: static !important; max-height: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE (≤768px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Nav ── */
  .nav-hamburger { display: flex !important; }
  .nav-desktop { display: none !important; }
  .nav-hide-mobile { display: none !important; }
  .main-nav { padding: 0 12px !important; height: 48px !important; }

  /* ── Main ── */
  main {
    padding: 12px 10px 32px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ── Live page: KPI header stacks on mobile ── */
  .live-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .live-header-stats {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .live-header-stats::-webkit-scrollbar { display: none; }
  .live-header-stats > div {
    flex-shrink: 0;
  }
  .live-header-stats > div > span:first-child {
    font-size: 15px !important;
  }

  /* ── Heatmap ── */
  .heatmap-panel {
    max-width: 100% !important;
    overflow: visible !important;
  }
  .heatmap-panel .recharts-responsive-container {
    min-width: 0 !important;
  }

  /* ── Live page: filter sidebar + heatmap stack vertically ── */
  .live-chart-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .filter-sidebar {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    align-self: auto !important;
    box-sizing: border-box !important;
  }
  .filter-sidebar::-webkit-scrollbar { display: none; }
  .filter-sidebar > div {
    flex-direction: row !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .filter-sidebar + div {
    width: 100% !important;
  }

  /* ── Charts on mobile ── */
  .heatmap-panel {
    max-width: 100% !important;
    overflow: visible !important;
    flex: none !important;
  }
  .live-chart-row > div:last-child {
    width: 100% !important;
    flex: none !important;
    display: block !important;
  }

  /* ── Account page header ── */
  .acct-header h1 { font-size: 17px !important; }

  /* ── Account page: show mobile dropdown, hide desktop sidebar ── */
  .acct-mobile-tabs { display: block !important; }
  .acct-sidebar-desktop { display: none !important; }
  .acct-layout { gap: 0 !important; }

  /* ── Account content area ── */
  .acct-layout > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── Targets/System page sidebar ── */
  .targets-layout { flex-direction: column !important; }
  .targets-sidebar {
    width: 100% !important;
    flex-shrink: 1 !important;
    position: static !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .targets-sidebar::-webkit-scrollbar { display: none; }
  .targets-sidebar-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: max-content !important;
    min-width: 100% !important;
  }
  .targets-sidebar-btn {
    width: auto !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-left: none !important;
    border-bottom: none !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
  /* System page content area - prevent overflow on mobile */
  .targets-layout > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
  }
  .targets-layout table {
    font-size: 11px !important;
  }
  .targets-layout table th,
  .targets-layout table td {
    padding: 6px 8px !important;
  }
  .targets-layout input[type="number"] {
    width: 65px !important;
  }

  /* ── Accounts page ── */
  .accounts-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .accounts-header-stats {
    width: 100% !important;
  }
  .accounts-header-stats > div {
    flex: 1;
    min-width: 0;
  }
  .accounts-mobile-filters {
    display: block !important;
  }
  .accounts-mobile-filters div::-webkit-scrollbar { display: none; }
  .accounts-layout {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .accounts-sidebar {
    display: none !important;
  }

  /* ── TopHeader: hidden on mobile (MobileNav handles chrome) ── */
  .top-header { display: none !important; }

  /* ── Home page ── */
  .home-quicklinks { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .home-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .home-grid { grid-template-columns: 1fr !important; }
  .home-rps { grid-template-columns: repeat(3, 1fr) !important; }
  .home-rps-charts { grid-template-columns: 1fr !important; }

  /* ── HomeExecutive ── */
  .home-exec-canvas { margin: 0 !important; padding: 12px 4px !important; }
  .home-exec-hero  { grid-template-columns: 1fr !important; gap: 10px !important; }
  .home-exec-kpis  { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .home-exec-rps   { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .home-exec-2col  { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* ── Chat Manager stats on mobile ── */
  .chat-mgr-stats {
    gap: 8px !important;
  }
  .chat-mgr-stats > div:nth-child(3) {
    display: none !important;
  }

  /* ── Swap Analysis detail sidebar ── */
  div[style*="width: '420px'"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── All inline grids: collapse ── */
  div[style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  div[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; }
  div[style*="grid-template-columns: repeat(5"] { grid-template-columns: 1fr 1fr !important; }
  div[style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(3, 1fr) !important; }
  div[style*="grid-template-columns: repeat(12"] { grid-template-columns: repeat(6, 1fr) !important; }

  /* ── AI Creators: hub diagram ── */
  .ai-hub-main-row { flex-wrap: wrap !important; gap: 10px !important; }
  .ai-hub-main-row > div { flex-basis: calc(50% - 5px) !important; flex-grow: 1 !important; }
  .ai-hub-conn { display: none !important; }
  .ai-hub-denied-row { display: none !important; }
  .ai-hub-topbar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .ai-pipeline-sets-grid { grid-template-columns: 1fr !important; }
  .ai-grid-3col { grid-template-columns: 1fr 1fr !important; }
  .ai-grid-4col { grid-template-columns: 1fr 1fr !important; }
  .ai-upload-types { grid-template-columns: 1fr 1fr !important; }
  /* Content modal: stack image + info pane vertically */
  .ai-modal-2col { flex-direction: column !important; }
  .ai-modal-info-pane { width: 100% !important; border-left: none !important; border-top: 1px solid var(--border) !important; max-height: 55vh !important; }

  /* ── Charts ── */
  .recharts-responsive-container { min-width: 0 !important; }

  /* ── Typography ── */
  h1 { font-size: 18px !important; }
  h2 { font-size: 16px !important; }

  /* Page title treatment: the brand sheet says stack the weave below the
     title and center align on mobile, rather than letting it shrink beside
     a wrapped two-line title. */
  .page-title { flex-direction: column !important; align-items: center !important; gap: 12px !important; text-align: center; }
  .page-title > div { text-align: center !important; }
  .page-title-row { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .page-title-weave { margin-bottom: 0 !important; }

  /* ── Reports page ── */
  .report-charts-grid { grid-template-columns: 1fr !important; }
  .report-table-desktop { display: none !important; }
  .report-cards-mobile { display: flex !important; }
  .report-scores > div { padding: 12px 16px !important; }
  .report-scores > div > div:first-child { font-size: 28px !important; }
  .report-header-badges { display: none !important; }

  /* ── All popups: bottom sheet on mobile ── */
  .mobile-bottom-sheet {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .mobile-bottom-sheet-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
    animation: slideUp 0.2s ease-out;
  }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* ── Mobile popup (dashboard account) ── */
  .dash-mobile-popup > div {
    animation: slideUp 0.2s ease-out;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SMALL PHONE (≤480px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  main { padding: 10px 8px 28px !important; }

  .home-quicklinks { grid-template-columns: 1fr !important; }
  .home-stats { grid-template-columns: 1fr !important; }
  .home-rps { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VERY SMALL (≤380px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  :root { font-size: 13px; }
  .main-nav { height: 44px !important; }
}

/* ── Mobile table scroll wrapper ─────────────────────────────────────────── */
/* Wrap any overflow table in <div className="table-scroll"> */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.table-scroll table { min-width: 480px; }

/* ── Global mobile polish ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tooltips/popovers: never wider than screen */
  [class*="tooltip"], [class*="popover"] { max-width: calc(100vw - 20px) !important; }

  /* Cards with inline padding: reduce on phone */
  .card-padded { padding: 12px !important; }

  /* Modal backdrops: full-bleed padding so content reaches edge-to-edge */
  [class*="modal-backdrop"], [class*="ai-modal-backdrop"] { padding: 8px !important; }

  /* Button rows: allow wrapping so buttons don't clip off-screen */
  .btn-row { flex-wrap: wrap !important; gap: 8px !important; }

  /* Header right side: shrink gaps on small screens */
  header > div:last-child { gap: 8px !important; }

  /* Stat boxes with minWidth: let them shrink */
  [class*="stat-box"] { min-width: 0 !important; }
}

/* TipTap rich text editor */
.ProseMirror {
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.6;
}
.ProseMirror p { margin: 0 0 0.4em 0; }
.ProseMirror p:last-child { margin-bottom: 0; }
.ProseMirror ul, .ProseMirror ol { padding-left: 1.4em; margin: 0.2em 0; }
.ProseMirror li { margin: 2px 0; }
.ProseMirror strong { color: var(--text-primary); }
.ProseMirror h1 { font-size: 18px; font-weight: 800; color: var(--text-primary); margin: 0.6em 0 0.3em; }
.ProseMirror h2 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0.5em 0 0.25em; }
.ProseMirror blockquote { border-left: 3px solid #8b5cf640; padding: 4px 12px; color: var(--text-secondary); margin: 0.4em 0; background: var(--bg-card-hover); border-radius: 0 4px 4px 0; }
.ProseMirror code { background: var(--bg-card-hover); color: var(--accent); border-radius: 3px; padding: 1px 5px; font-size: 12px; font-family: monospace; }
.ProseMirror pre { background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; margin: 0.4em 0; overflow-x: auto; white-space: pre; }
.ProseMirror pre code { background: none; padding: 0; color: var(--accent); font-size: 12px; font-family: monospace; white-space: pre; }
.ProseMirror a { color: var(--accent); text-decoration: underline; cursor: pointer; }
.ProseMirror table { border-collapse: collapse; width: 100%; margin: 0.5em 0; }
.ProseMirror th, .ProseMirror td { border: 1px solid var(--border); padding: 5px 10px; font-size: 12px; vertical-align: top; line-height: 1.5; }
.ProseMirror th { background: var(--bg-card-alt); color: var(--text-secondary); font-weight: 700; text-align: left; }
.ProseMirror td { background: var(--bg-card); color: var(--text-secondary); }
.ProseMirror .selectedCell { background: #8b5cf610 !important; outline: 2px solid #8b5cf640; }
.ProseMirror img { max-width: 100%; border-radius: 4px; margin: 4px 0; }
.tiptap-eom .ProseMirror { outline: none; }
.tiptap-eom .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--text-ghost); pointer-events: none; float: left; height: 0; }

/* Rich text display (read-only rendered HTML) */
.rich-text-display p { margin: 0 0 0.4em 0; }
.rich-text-display p:last-child { margin-bottom: 0; }
.rich-text-display ul, .rich-text-display ol { padding-left: 1.4em; margin: 0.2em 0; }
.rich-text-display li { margin: 2px 0; }
.rich-text-display strong { color: var(--text-primary); }
.rich-text-display h1 { font-size: 18px; font-weight: 800; color: var(--text-primary); margin: 0.6em 0 0.3em; }
.rich-text-display h2 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0.5em 0 0.25em; }
.rich-text-display blockquote { border-left: 3px solid #8b5cf640; padding: 4px 12px; color: var(--text-secondary); margin: 0.4em 0; background: var(--bg-card-hover); border-radius: 0 4px 4px 0; }
.rich-text-display table { border-collapse: collapse; width: 100%; margin: 0.5em 0; }
.rich-text-display th, .rich-text-display td { border: 1px solid var(--border); padding: 5px 10px; font-size: 12px; vertical-align: top; line-height: 1.5; }
.rich-text-display th { background: var(--bg-card-alt); color: var(--text-secondary); font-weight: 700; text-align: left; }
.rich-text-display td { background: var(--bg-card); color: var(--text-secondary); }
.rich-text-display code { background: var(--bg-card-hover); color: var(--accent); border-radius: 3px; padding: 1px 5px; font-size: 12px; font-family: monospace; }
.rich-text-display pre { background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; margin: 0.4em 0; overflow-x: auto; white-space: pre; }
.rich-text-display pre code { background: none; padding: 0; color: var(--accent); font-size: 12px; font-family: monospace; white-space: pre; }
.rich-text-display a { color: var(--accent); text-decoration: underline; }

/* Playbook content (imported from BookStack HTML) */
.playbook-content { color: var(--text-secondary) !important; }
.playbook-content * { color: inherit !important; background-color: transparent !important; }

/* Typography */
.playbook-content h1, .playbook-content h2, .playbook-content h3, .playbook-content h4 { color: var(--text-primary) !important; margin: 20px 0 8px; font-weight: 800; }
.playbook-content h1 { font-size: 20px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.playbook-content h2 { font-size: 17px; }
.playbook-content h3 { font-size: 15px; }
.playbook-content h4 { font-size: 13px; color: var(--text-secondary) !important; }
.playbook-content p { margin: 6px 0; line-height: 1.7; }
.playbook-content strong, .playbook-content b { color: var(--text-primary) !important; font-weight: 700; }

/* Lists */
.playbook-content ul, .playbook-content ol { padding-left: 22px; margin: 8px 0; }
.playbook-content li { margin: 4px 0; line-height: 1.6; }
.playbook-content li::marker { color: var(--text-faint); }

/* Links */
.playbook-content a { color: var(--accent) !important; text-decoration: none; }
.playbook-content a:hover { text-decoration: underline; }

/* Tables */
.playbook-content table { width: 100%; border-collapse: collapse; margin: 14px 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.playbook-content th, .playbook-content td { padding: 10px 14px; border: 1px solid var(--border); font-size: 12px; text-align: left; line-height: 1.5; }
.playbook-content th { background: var(--bg-card-hover) !important; color: var(--text-secondary) !important; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.playbook-content td { color: var(--text-secondary) !important; }
.playbook-content tr:nth-child(even) td { background: var(--bg-input) !important; }
.playbook-content tr:hover td { background: var(--bg-card-hover) !important; }

/* Images - proper sizing, not squished */
.playbook-content img { max-width: 100%; height: auto !important; border-radius: 8px; margin: 10px 0; display: block; }
.playbook-content img[src*="slack-edge.com"], .playbook-content img[src*="emoji.slack"] { display: inline; height: 20px !important; width: 20px !important; border-radius: 0; margin: 0 2px; vertical-align: middle; }

/* Blocks */
.playbook-content blockquote { border-left: 3px solid #8b5cf630; padding: 8px 14px; color: var(--text-secondary) !important; margin: 10px 0; background: var(--bg-input) !important; border-radius: 0 6px 6px 0; }
.playbook-content pre, .playbook-content code { background: var(--bg-input) !important; color: var(--text-secondary) !important; border-radius: 4px; padding: 2px 6px; font-size: 12px; }
.playbook-content pre { padding: 12px; margin: 10px 0; overflow-x: auto; }
.playbook-content hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* Slack emoji spans */
.playbook-content .c-emoji img { display: inline !important; height: 20px !important; width: 20px !important; margin: 0 2px; vertical-align: middle; border-radius: 0; }

/* Override any BookStack inline styles */
.playbook-content span[style], .playbook-content div[style], .playbook-content p[style] { color: inherit !important; background: transparent !important; }
.playbook-content font { color: inherit !important; }

/* Alert items (converted from ALL CAPS) */
.playbook-content .pb-alert-item { background: #f59e0b08; border: 1px solid #f59e0b25; border-radius: 6px; padding: 8px 12px; margin: 6px 0; list-style: none; color: #f59e0b !important; font-weight: 700; font-size: 12px; letter-spacing: 0.3px; }
.playbook-content .pb-highlight { color: #f59e0b !important; font-weight: 800; letter-spacing: 0.2px; }
.playbook-content .pb-alert { background: #ef444408; border: 1px solid #ef444420; border-radius: 6px; padding: 10px 14px; margin: 8px 0; color: #ef4444 !important; font-weight: 700; font-size: 12px; }

/* ── Sidebar item (nav row) ──────────────────────────────────────────────── */
.sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: 7px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sidebar-text);
  background: transparent;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sidebar-item.collapsed {
  padding: 9px 0;
  justify-content: center;
}
.sidebar-item-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 120ms ease;
}
.sidebar-item:hover {
  background: var(--bg-sidebar-hover);
  color: var(--sidebar-text-hover);
}
.sidebar-item:hover .sidebar-item-icon {
  transform: translateX(2px);
}
.sidebar-item.active {
  color: var(--sidebar-text-active);
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  font-weight: 600;
}
.sidebar-item.active.collapsed .sidebar-item-icon::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-lime);
}

.sidebar-item.ancestor {
  color: var(--sidebar-text-hover);
  border-color: var(--border-subtle);
  background: var(--bg-sidebar-hover);
  font-weight: 500;
}

/* Section header toggle (LIVE OPS / ACCOUNTS / CURES etc.) — hover state
   makes the expand/collapse affordance obvious instead of a near-invisible
   9px chevron on transparent. */
.sidebar-section-toggle:hover {
  background: var(--bg-sidebar-hover);
  color: var(--sidebar-text-hover);
}
.sidebar-section-toggle:hover .sidebar-section-chevron {
  background: var(--accent-tint);
  color: var(--accent);
}

/* Collapsible card-section header (Revenue Breakdown, RPS Metrics, Portfolio,
   RPS Performance on the exec Home page) - was clickable with zero hover
   feedback. */
.home-section-toggle:hover {
  background: var(--bg-card-hover);
}

/* Global keyboard-focus ring. Documented on /dev-styleguide's Accessibility
   notes for a while ("Focus rings use --border-active on all interactive
   elements") but never actually implemented - this is that rule, applied
   once instead of per-component. Mouse/touch clicks don't get the ring
   (:focus-visible), only real keyboard navigation does. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Two-column section split (Revenue Breakdown, Portfolio, RPS Performance
   on the exec Home page, and anywhere else this shape is reused) - a
   vertical divider between the two halves, matching the Command Center
   Mockup's Revenue Breakdown layout (a rule between "By Category" and
   "Chat Split"). Desktop only; the mobile stacked layout drops it. */
@media (min-width: 769px) {
  .home-exec-2col > *:first-child {
    border-right: 1px solid var(--border);
    padding-right: 16px;
  }
  .home-exec-2col > *:last-child {
    padding-left: 16px;
  }
}

/* Top bar responsive rules */
@media (max-width: 768px) {
  .topbar-search-pill { width: 36px !important; padding: 7px 0 !important; justify-content: center !important; }
  .topbar-search-pill-label { display: none !important; }
  .topbar-search-pill-kbd { display: none !important; }
}
@media (max-width: 640px) {
  .topbar-breadcrumb { display: none !important; }
}

/* Announcements blog layout: stack sidebar above grid on narrow viewports. */
@media (max-width: 860px) {
  .ann-layout { flex-direction: column !important; }
  .ann-sidebar { width: 100% !important; position: static !important; }
}

/* ── AI Creator pages: mobile responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Modal backdrop: less padding so content has room */
  .ai-modal-backdrop { padding: 8px !important; }

  /* Two-column modals (item detail, set item): stack vertically */
  .ai-modal-2col { flex-direction: column !important; max-height: 95vh !important; overflow-y: auto !important; }
  .ai-modal-info-pane { width: 100% !important; border-left: none !important; border-top: 1px solid var(--border) !important; max-height: none !important; }

  /* Hide prev/next arrow buttons outside modals — use swipe or keyboard */
  .ai-modal-arrow { display: none !important; }

  /* Hub pipeline: wrap cards, hide animated connectors */
  .ai-hub-main-row { flex-wrap: wrap !important; gap: 10px !important; }
  .ai-hub-main-row > * { flex: 1 1 140px !important; min-width: 0 !important; }
  .ai-hub-conn { display: none !important; }
  .ai-hub-denied-row { display: none !important; }

  /* Distribution view: stack columns vertically */
  .ai-dist-layout { flex-direction: column !important; }
  .ai-dist-left { flex: 1 1 100% !important; }
  .ai-dist-right { flex: 1 1 100% !important; }

  /* Grids: collapse to 2 columns */
  .ai-grid-3col { grid-template-columns: repeat(2, 1fr) !important; }
  .ai-grid-4col { grid-template-columns: repeat(2, 1fr) !important; }
  .ai-upload-types { grid-template-columns: repeat(2, 1fr) !important; }
  .ai-content-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Page padding reduction */
  .ai-detail-list { padding: 14px 12px !important; }

  /* Status header: wrap tabs below icon+title on mobile */
  .ai-content-header { flex-wrap: wrap !important; }
  .ai-content-tabs { margin-left: 0 !important; width: 100% !important; flex-wrap: wrap !important; }

  /* Gallery (pending/ready/denied etc): stack sidebar above content */
  .ai-gallery-layout { flex-direction: column !important; }
  /* Sidebar becomes a horizontal scrollable chip strip */
  .ai-gallery-sidebar {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
    align-items: flex-start !important;
  }
  .ai-gallery-sidebar::-webkit-scrollbar { display: none; }
  /* Hide section labels; make filter button groups horizontal rows */
  .ai-filter-label { display: none !important; }
  .ai-filter-btns { flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px !important; }
  .ai-filter-btns button { white-space: nowrap !important; padding: 5px 10px !important; font-size: 11px !important; }

  /* Creator grid on listing page */
  .ai-creators-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Pending review: request button + stat pills stack */
  .ai-hub-topbar { flex-wrap: wrap !important; gap: 8px !important; }
}

/* Shared Table: row hover for clickable rows. Kept in CSS rather than inline
   state so it costs nothing per row on large tables. */
.table-zebra tbody tr:nth-child(even) { background: var(--bg-card-alt); }
/* Ordered by specificity so hover beats zebra, and selected beats both. */
.table-zebra tbody tr.table-row-clickable:hover,
.table-row-clickable:hover { background: var(--bg-card-hover); }
.table-zebra tbody tr.table-row-selected,
tbody tr.table-row-selected { background: var(--accent-tint); }

/* Account Overview: the 58/42 analytical rows stack on tablet and below,
   per the page spec. */
@media (max-width: 1100px) {
  .acct-ov-main { grid-template-columns: 1fr !important; }
}