/*
 * Self-host the official brand fonts so report typography cannot drift or fail
 * when a third-party font URL changes. The licensed source files are shared
 * with the canonical PDF renderer in amazon_sp_api_platform/assets/fonts.
 */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/fonts/Montserrat-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Roboto-Bold.ttf") format("truetype");
}

:root {
  /* Workspace / shell */
  --bg: #edf2f8;
  --workspace-header-h: 63px;
  --workspace-bg: #edf2f8;
  --workspace-grid: rgba(110, 132, 164, 0.08);
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-muted: #eef3f9;
  --line: #d9e2ef;
  --line-soft: #eef1f6;
  --line-strong: #bfccde;
  --ink: #15273f;
  --ink-muted: #62738d;
  --ink-soft: #66758f; /* was #7c8aa0 (~3.0:1, failed AA); now ~4.6:1 */

  /* Brand */
  --brand: #85bbda;
  --brand-deep: #5e9fc4;
  --brand-soft: #e6f2f8;
  --brand-navy: #2e6eb2;
  --brand-navy-soft: #5b94d1;
  --brand-navy-hover: #245f9f;
  --navy: #12233f;

  /* Sidebar / menu */
  --sidebar-bg: #f9f7f3;
  --sidebar-bg-deep: #f2ece3;
  --sidebar-line: rgba(120, 100, 72, 0.16);
  --sidebar-ink: #24344a;
  --sidebar-muted: rgba(36, 52, 74, 0.64);
  --menu-popout-bg: #fcfaf6;
  --menu-popout-border: rgba(174, 156, 126, 0.24);
  --menu-popout-ink: #24344a;
  --menu-popout-muted: #6c7684;
  --menu-popout-active: rgba(133, 187, 218, 0.12);
  --menu-popout-shadow: 0 24px 48px rgba(75, 62, 45, 0.16);

  /* Alerts / semantic */
  --accent: #f0a85d;
  --accent-soft: #fff0de;
  --positive: #2d9c67;
  --positive-ink: #197a4d;
  --positive-soft: #e7f5ee;
  --negative: #d75c58;
  --negative-soft: #ffecea;
  --warning: #b98530;
  --warning-soft: #fff4df;
  --info: #2e6eb2;
  --info-soft: #e6f2f8;

  /* Chart palette */
  --chart-blue: #85bbda;
  --chart-blue-soft: #d7ebf6;
  --chart-slate: #7b8798;
  --chart-slate-soft: #d6dee7;
  --chart-yellow: #f1c453;
  --chart-yellow-soft: #fbefc5;
  --chart-orange: #f39b51;
  --chart-orange-soft: #fde3ca;
  --chart-magenta: #c55db8;
  --chart-magenta-soft: #efd6ec;
  --chart-green: #4caf7a;
  --chart-green-soft: #d8f0e3;
  --chart-red: #d75c58;
  --chart-red-soft: #f7d5d3;
  --chart-neutral: #d9dee6;
  --chart-neutral-soft: #eef2f7;
  --chart-track: #e8eef6;
  --chart-grid: #dce5f1;
  --chart-label: #8192a9;

  --shadow-sidebar: 10px 0 24px rgba(80, 57, 26, 0.1);
  --shadow-panel: 0 1px 0 rgba(20, 39, 63, 0.04), 0 4px 12px rgba(20, 39, 63, 0.04);
  /* Typography — brand fonts (Montserrat for headings, Roboto for body) */
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Roboto", sans-serif;

  /* Typography scale */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-heading-sm: 18px;
  --text-heading: 20px;
  --text-display-sm: 24px;
  --text-display: 32px;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --gap-widget: 14px;
  --gap-page: 20px;

  /* Border radius — cards (14px), panels/inputs (12px), buttons/chips (8px), small (6px) */
  --radius-lg: 14px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --transition-fast: 140ms ease;

  /* Shared layer contract. Local stacking contexts can use small values, but
     viewport overlays and floating controls use these named global layers. */
  --layer-header: 320;
  --layer-popover: 1200;
  --layer-scrim: 9498;
  --layer-overlay: 9499;
  --layer-overlay-control: 9500;

  /* Spotlight is a single global operator surface. These component tokens
     preserve Anata's navy hierarchy while making the panel, not the page
     backdrop, carry the glass material. */
  --command-palette-scrim: rgba(10, 24, 45, 0.34);
  --command-palette-scrim-blur: 3px;
  --command-palette-surface: rgba(17, 39, 70, 0.74);
  --command-palette-edge: rgba(214, 233, 249, 0.42);
  --command-palette-inner-highlight: rgba(255, 255, 255, 0.12);
  --command-palette-open-duration: 160ms;
  --command-palette-close-duration: 120ms;
  --command-palette-easing: cubic-bezier(0.2, 0.7, 0.25, 1);

  /* Chart palette — role-grouped aliases (Clarity audit §6).
     The 16-color palette above stays for backwards compatibility, but
     widgets should reach for these named roles instead so users learn
     "navy = current, gray = prior, red = bad" once and have it
     transfer everywhere. */
  --chart-series-1: var(--brand-navy);   /* primary categorical */
  --chart-series-2: var(--brand);        /* secondary categorical */
  --chart-series-3: var(--chart-slate);  /* tertiary categorical */
  --chart-now: var(--ink);               /* current period */
  --chart-prior: var(--line-strong);     /* prior period */
  --chart-good: var(--positive);
  --chart-warn: var(--warning);
  --chart-bad: var(--negative);

  /* Overlay — semi-transparent scrim used behind modals, drawers, and popovers. */
  --overlay: rgba(0, 0, 0, 0.25);

  /* Brand wordmark colors — for logo/auth lockup contexts ONLY (e.g. the
     "anata"/"intelligence" wordmark on dark auth screens). Never use these
     in general UI surfaces, buttons, or text. */
  --brand-wordmark-anata: #F4F1E8;
  --brand-wordmark-intelligence: #BFD3DE;

  /* Monospace stack — SKU/ASIN/ID/code contexts only (raw identifiers,
     fixed-width numeric columns). Body/heading text stays Roboto/Montserrat. */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(63, 143, 229, 0.04) 0%, rgba(237, 242, 248, 0) 120px),
    linear-gradient(180deg, #f4f7fb 0%, #edf2f8 100%);
  color: var(--ink);
  font-family: var(--font-body);
  /* Clarity audit (2026-04): 13 → 14px. Less squint at hour 6.
     All rem-based sizes throughout the sheet scale proportionally. */
  font-size: 14px;
  line-height: 1.5;
}

body {
  padding: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared scroll treatment — subtle, neutral, and consistent across the app's
   intentional scroll containers. */
:where(
  body,
  .sidebar-scroll-area,
  .workspace,
  .main-panel,
  .detail-table-wrap,
  .data-table-scroll,
  .data-table-filter-options,
  .data-table-column-options,
  .data-table-popover,
  .channel-tree-panel,
  .asin-drawer-panel
) {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

:where(
  body,
  .sidebar-scroll-area,
  .workspace,
  .main-panel,
  .detail-table-wrap,
  .data-table-scroll,
  .data-table-filter-options,
  .data-table-column-options,
  .data-table-popover,
  .channel-tree-panel,
  .asin-drawer-panel
)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:where(
  body,
  .sidebar-scroll-area,
  .workspace,
  .main-panel,
  .detail-table-wrap,
  .data-table-scroll,
  .data-table-filter-options,
  .data-table-column-options,
  .data-table-popover,
  .channel-tree-panel,
  .asin-drawer-panel
)::-webkit-scrollbar-track {
  background: transparent;
}

:where(
  body,
  .sidebar-scroll-area,
  .workspace,
  .main-panel,
  .detail-table-wrap,
  .data-table-scroll,
  .data-table-filter-options,
  .data-table-column-options,
  .data-table-popover,
  .channel-tree-panel,
  .asin-drawer-panel
)::-webkit-scrollbar-thumb {
  background: rgba(191, 204, 222, 0.9);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

:where(
  body,
  .sidebar-scroll-area,
  .workspace,
  .main-panel,
  .detail-table-wrap,
  .data-table-scroll,
  .data-table-filter-options,
  .data-table-column-options,
  .data-table-popover,
  .channel-tree-panel,
  .asin-drawer-panel
)::-webkit-scrollbar-thumb:hover {
  background: rgba(98, 115, 141, 0.92);
  border: 2px solid transparent;
  background-clip: padding-box;
}

body,
button,
input,
select,
table,
thead,
tbody,
tr,
td,
th,
div,
span,
p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: anywhere;
}

/* Table cells must NOT inherit `overflow-wrap: anywhere` from the rule above.
   overflow-wrap/word-break are inherited properties, so without this reset the
   `anywhere` value cascades into every <td>/<th> (and their <code> children),
   shattering identifiers like ASINs one character per line whenever a column is
   squeezed (e.g. a table in a 1/3-width widget). Resetting to normal keeps
   prose wrapping at spaces while long unbreakable tokens stay whole and the
   table's overflow-x wrapper scrolls instead. This is the app-wide root fix;
   per-table min-width/overflow wrappers are the belt-and-suspenders. */
table th,
table td,
table th *,
table td * {
  overflow-wrap: normal;
  word-break: normal;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  --sidebar-expanded-width: 214px;
  --sidebar-collapsed-width: 72px;
  --sidebar-control-size: 40px;
  --sidebar-brand-size: 40px;
  --sidebar-nav-icon-size: 24px;
  --sidebar-nav-glyph-size: 20px;
  --sidebar-row-height: 40px;
  --sidebar-icon-center: 36px;
  --sidebar-brand-leading: 6px;
  --sidebar-nav-leading: 14px;
  --sidebar-account-leading: 11px;
  --sidebar-motion: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  display: grid;
  grid-template-columns: var(--sidebar-expanded-width) minmax(0, 1fr);
  gap: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: var(--surface);
  transition: grid-template-columns var(--sidebar-motion);
}

.app-shell.sidebar-is-collapsed {
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  height: 100vh;
  max-height: 100vh;
  position: sticky;
  top: 0;
  z-index: 30;
  overflow-y: hidden;
  overflow-x: hidden;
  isolation: isolate;
  padding: 12px 10px 12px;
  background:
    linear-gradient(180deg, rgba(133, 187, 218, 0.12) 0%, rgba(249, 247, 243, 0) 180px),
    linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%);
  color: var(--sidebar-ink);
  border-right: 1px solid var(--sidebar-line);
  box-shadow: var(--shadow-sidebar);
  transition:
    padding var(--sidebar-motion),
    background var(--sidebar-motion),
    border-color var(--sidebar-motion),
    box-shadow var(--sidebar-motion);
}

.sidebar.collapsed {
  padding-left: 10px;
  padding-right: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(133, 187, 218, 0.1) 0%, rgba(249, 247, 243, 0) 180px),
    linear-gradient(180deg, #f7f5f0 0%, #eee8df 100%);
  border-right-color: rgba(120, 100, 72, 0.22);
}

/* Popouts must escape the sidebar's normal stacking level so account and
   favorites menus remain above the workspace content instead of disappearing
   behind the page header. */
.sidebar:has(.sidebar-account.is-open),
.sidebar:has(#sidebar-collapsed-favorites-button[aria-expanded="true"]) {
  z-index: var(--layer-popover);
}

.sidebar.collapsed .brand-lockup h1,
.sidebar.collapsed .brand-wordmark-image,
.sidebar.collapsed .sidebar-panel .input-label,
.sidebar.collapsed .sidebar-panel .panel-label-row,
.sidebar.collapsed .sidebar-panel .sidebar-button-row,
.sidebar.collapsed .sidebar-panel .status-banner,
.sidebar.collapsed .favorites-list,
.sidebar.collapsed .sidebar-favorites,
.sidebar.collapsed .sidebar-footer-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sidebar.collapsed .sidebar-favorites {
  max-height: 0;
  margin: 0;
  overflow: hidden;
}

.sidebar.collapsed .sidebar-nav {
  gap: 2px;
  padding-right: 0;
}

.sidebar.collapsed .sidebar-header {
  align-items: center;
}

.sidebar.collapsed .brand-lockup {
  justify-content: center;
  width: var(--sidebar-control-size);
  min-height: var(--sidebar-control-size);
  padding: 0;
  border-radius: 999px;
}

.sidebar.collapsed .sidebar-brand-row {
  grid-template-columns: 1fr;
  justify-items: center;
}

.sidebar.collapsed .sidebar-panel {
  padding: 6px 0 0;
}

.sidebar.collapsed .nav-group-title,
.sidebar.collapsed .nav-page-button {
  justify-content: center;
  gap: 0;
  width: var(--sidebar-control-size);
  min-width: var(--sidebar-control-size);
  height: var(--sidebar-control-size);
  min-height: var(--sidebar-control-size);
  margin: 0 auto;
  padding: 0;
  border-radius: 999px;
}

.sidebar.collapsed .nav-group-title .nav-group-name,
.sidebar.collapsed .nav-page-label {
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sidebar.collapsed .nav-group-title .nav-group-meta {
  display: none;
}

/* ── Collapsed rail (72px) — icon-only cleanup ── */

/* Standalone nav buttons (Overview, workspace items): hide label, center icon */
.sidebar.collapsed .nav-standalone,
.sidebar.collapsed .nav-group { display: flex; justify-content: center; }
.sidebar.collapsed .nav-group-title-main { flex: 0 0 auto; gap: 0; }
.sidebar.collapsed .nav-group-icon,
.sidebar.collapsed .nav-page-icon { width: var(--sidebar-nav-icon-size); min-width: var(--sidebar-nav-icon-size); height: var(--sidebar-nav-icon-size); }
.sidebar.collapsed .nav-page-icon svg,
.sidebar.collapsed .nav-group-icon svg {
  width: var(--sidebar-nav-glyph-size);
  height: var(--sidebar-nav-glyph-size);
}
.sidebar.collapsed .nav-page-button,
.sidebar.collapsed .nav-group-title { color: #536b86; }
.sidebar.collapsed .nav-page-icon,
.sidebar.collapsed .nav-group-icon { color: #5f7fa3; }
.sidebar.collapsed .nav-page-icon,
.sidebar.collapsed .nav-group-icon {
  flex: 0 0 var(--sidebar-nav-icon-size);
}
.sidebar.collapsed .nav-page-button.active,
.sidebar.collapsed .nav-group-title.active {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 0 0 1px rgba(46, 110, 178, 0.24), 0 3px 10px rgba(46, 110, 178, 0.10);
}

/* Favorite stars take up space and are unreachable in the 72px rail */
.sidebar.collapsed .nav-favorite-mark { display: none; }

/* Lock indicator: no room in the 72px rail */
.sidebar.collapsed .nav-lock-icon { display: none; }

/* Suppress zone text but keep the expanded slots so channel rows do not jump. */
.sidebar.collapsed .nav-zone-header.nav-zone-header-divider {
  border-top-color: rgba(0, 0, 0, 0.07);
}
.sidebar.collapsed .nav-zone-label {
  display: none;
}

.sidebar.collapsed .sidebar-account {
  padding: 8px 0 0;
}

.sidebar.collapsed .sidebar-account-button {
  display: flex;
  grid-template-columns: none;
  gap: 0;
  width: var(--sidebar-control-size);
  margin-inline: auto;
  justify-content: center;
  height: 46px;
  min-height: 46px;
  padding: 7px 0;
}

.sidebar.collapsed .sidebar-account-button .session-avatar {
  width: 30px;
  height: 30px;
  transform: none;
}

.sidebar.collapsed .sidebar-account-copy,
.sidebar.collapsed .sidebar-account-caret {
  display: none;
}

/* Shared sticky-footer contract for the canonical workspace and compatibility
   shells. Each shell owns vertical scrolling so the footer cannot overlap
   content or depend on the document scroll model. */
.workspace,
.main-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

.workspace {
  padding: 0 12px 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%),
    radial-gradient(circle at top left, rgba(63, 143, 229, 0.05), transparent 22%);
  position: relative;
  z-index: 1;
}

.workspace > #page-body {
  flex: 1 0 auto;
}

.site-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-top: auto;
  padding: 8px 2px 0;
  color: #5d6979;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.site-footer a {
  color: #3c4d63;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-footer > :first-child {
  justify-self: start;
}

.site-footer > :nth-child(2) {
  justify-self: center;
}

.site-footer > :last-child {
  justify-self: end;
}

.site-footer a:hover {
  color: #274e75;
}

.utility-shell .sidebar {
  box-shadow: 8px 0 20px rgba(80, 57, 26, 0.08);
}

.utility-workspace {
  padding: 0 16px 20px;
}

.utility-workspace .workspace-header {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.utility-workspace .workspace-title-block {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.utility-workspace .workspace-title-row {
  margin-bottom: 0;
}

.utility-workspace .workspace-header h2 {
  max-width: 100%;
}

.utility-page-body {
  display: block;
  width: 100%;
  padding-top: 16px;
}

.empty-state {
  display: grid;
  gap: 14px;
  max-width: 560px;
}

.empty-state p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.6;
}

.floating-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--layer-popover);
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15, 24, 48, 0.96);
  color: #f4f7fb;
  font-size: 0.78rem;
  line-height: 1.4;
  box-shadow: 0 16px 32px rgba(7, 14, 27, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 80ms ease, transform 80ms ease;
}

.floating-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#modal-root {
  position: relative;
  z-index: var(--layer-overlay);
}

.workspace::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--workspace-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--workspace-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 28%);
}

.workspace > * {
  position: relative;
  z-index: 1;
}

.sidebar-header,
.sidebar-panel,
.workspace-header,
.filter-bar,
.group-tabs,
.panel,
.metric-card,
.snapshot-list,
.detail-table-wrap {
  min-width: 0;
}

.sidebar-header {
  display: grid;
  gap: 8px;
  flex: 0 0 auto;
  margin-bottom: 12px;
}

#react-sidebar,
.sidebar-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.sidebar-scroll-area {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0;
  margin-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.scroll-affordance {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.scroll-affordance.is-sticky {
  position: sticky;
  top: var(--workspace-sticky-header-h, 63px);
  z-index: var(--layer-header);
  background: var(--surface);
}

.scroll-affordance-viewport {
  min-width: 0;
  min-height: 0;
}

.scroll-affordance-horizontal > .scroll-affordance-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-affordance-horizontal > .scroll-affordance-viewport::-webkit-scrollbar {
  display: none;
}

.scroll-affordance-vertical {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.scroll-affordance-vertical > .scroll-affordance-viewport {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-affordance-vertical > .scroll-affordance-viewport::-webkit-scrollbar {
  display: none;
}

.scroll-affordance-shadow {
  position: absolute;
  z-index: var(--layer-header);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.scroll-affordance-horizontal .scroll-affordance-shadow {
  top: 0;
  bottom: 0;
  width: 18px;
}

.scroll-affordance-horizontal .scroll-affordance-shadow-start {
  left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 14%, transparent), transparent);
}

.scroll-affordance-horizontal .scroll-affordance-shadow-end {
  right: 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--ink) 14%, transparent), transparent);
}

.scroll-affordance-vertical .scroll-affordance-shadow {
  left: 0;
  right: 0;
  height: 18px;
}

.scroll-affordance-vertical .scroll-affordance-shadow-start {
  top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 12%, transparent), transparent);
}

.scroll-affordance-vertical .scroll-affordance-shadow-end {
  bottom: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 12%, transparent), transparent);
}

.scroll-affordance[data-scroll-start="true"] .scroll-affordance-shadow-start,
.scroll-affordance[data-scroll-end="true"] .scroll-affordance-shadow-end {
  opacity: 1;
}

.sidebar-scroll-affordance {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.sidebar-scroll-area::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.admin-subtab-scroll {
  position: relative;
  overflow: hidden;
}

.admin-subtab-scroll-viewport {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}

.admin-subtab-scroll-viewport::-webkit-scrollbar {
  display: none;
}

.legacy-scroll-affordance::before,
.legacy-scroll-affordance::after,
.admin-subtab-scroll::before,
.admin-subtab-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 4px;
  z-index: var(--layer-header);
  width: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.legacy-scroll-affordance::before,
.admin-subtab-scroll[data-scroll-start="true"]::before {
  left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 14%, transparent), transparent);
}

.legacy-scroll-affordance::after,
.admin-subtab-scroll[data-scroll-end="true"]::after {
  right: 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--ink) 14%, transparent), transparent);
}

.legacy-scroll-affordance[data-scroll-start="true"]::before,
.legacy-scroll-affordance[data-scroll-end="true"]::after,
.admin-subtab-scroll[data-scroll-start="true"]::before,
.admin-subtab-scroll[data-scroll-end="true"]::after {
  opacity: 1;
}

.react-mount[data-react-section^="admin-"]:empty::before {
  content: "Loading admin surface...";
  display: grid;
  min-height: 220px;
  place-items: center;
  padding: 48px 24px;
  color: var(--ink-muted);
  font-size: var(--text-lg, 18px);
}

.sidebar-brand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 6px;
}

.button,
.nav-page-button,
.nav-group-title,
.group-tab,
.star-button,
.favorite-link,
.toggle-button,
.utility-route-button,
.panel-collapse-button,
/* Page-header "?" help toggle — removed per request. Hidden (not deleted from
   markup) because it renders from both index.html and an app.js header
   re-render and carries a popover handler; a targeted hide is the zero-risk
   way to drop it everywhere at once. */
#page-help-toggle { display: none; }

.help-button,
.recommendation-link,
.recommendation-page-link {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 0 0 var(--sidebar-brand-leading);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  outline: none;
  transition:
    width var(--sidebar-motion),
    min-height var(--sidebar-motion),
    padding var(--sidebar-motion),
    border-radius var(--sidebar-motion);
}

/* The product mark is the collapse control. Keep the control surface quiet
   so the mark does not look like a separate floating button in the rail. */
.sidebar-brand-toggle {
  border-radius: 8px;
}

.sidebar-brand-toggle:focus-visible {
  outline: none;
}

.brand-mark-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--sidebar-brand-size);
  width: var(--sidebar-brand-size);
  height: var(--sidebar-brand-size);
  border-radius: 999px;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.brand-collapse-glyph {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-ink);
  font-size: 1.55rem;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.sidebar-brand-toggle:hover .brand-mark-shell,
.sidebar-brand-toggle:focus-visible .brand-mark-shell {
  background: rgba(133, 187, 218, 0.16);
  box-shadow: 0 0 0 3px rgba(133, 187, 218, 0.14);
}

.sidebar-brand-toggle:focus-visible .brand-mark-shell {
  box-shadow:
    0 0 0 2px var(--brand-deep),
    0 0 0 5px rgba(133, 187, 218, 0.18);
}

.sidebar-brand-toggle:hover .brand-mark-image,
.sidebar-brand-toggle:focus-visible .brand-mark-image {
  opacity: 0;
}

.sidebar-brand-toggle:hover .brand-collapse-glyph,
.sidebar-brand-toggle:focus-visible .brand-collapse-glyph {
  opacity: 1;
}

.brand-mark-image,
.brand-wordmark-image,
.brand-collapse-glyph {
  transition:
    opacity var(--sidebar-motion),
    transform var(--sidebar-motion);
}

.sidebar.collapsed .brand-mark-shell {
  flex-basis: var(--sidebar-brand-size);
  width: var(--sidebar-brand-size);
  height: var(--sidebar-brand-size);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sidebar.collapsed .sidebar-brand-toggle {
  border-radius: 8px;
}

.sidebar.collapsed .brand-mark-image {
  width: 30px;
  height: 30px;
  transform: none;
}

.sidebar.collapsed .brand-wordmark-image {
  display: none;
}

.sidebar.collapsed .brand-collapse-glyph {
  font-size: 1.75rem;
}

.brand-mark,
.workspace-title-row,
.panel-head,
.panel-label-row,
.sidebar-button-row,
.review-links,
.meta-chip,
.metric-header,
.compact-row,
.list-row,
.legend-item {
  display: flex;
  align-items: center;
}

.brand-mark {
  gap: 8px;
  width: 40px;
  height: 40px;
  justify-content: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(174, 156, 126, 0.16);
  box-shadow: 0 6px 14px rgba(76, 63, 43, 0.07);
}

.brand-word,
.workspace-header h2,
.panel-head h3,
.snapshot-title,
.headline-number,
.table-title {
  font-family: var(--font-heading);
  letter-spacing: -0.04em;
}

.brand-mark-image {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
}

.brand-mark-image-icon {
  width: 30px;
  height: 30px;
  border-radius: 0;
  box-shadow: none;
}

.brand-wordmark-image {
  display: block;
  width: 136px;
  max-width: calc(100% - 38px);
  height: auto;
  object-fit: contain;
}

.workspace-kicker,
.panel-kicker,
.panel-label,
.control-label,
.mini-label,
.table-caption,
.meta-label,
.panel-section-label {
  margin: 0;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.panel-section-label {
  color: var(--ink-muted);
}

.modal-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
}

.wizard-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-heading);
  font-weight: 700;
  color: var(--ink);
}

.sidebar-copy,
.panel-label,
.input-label,
.status-banner,
.nav-group-title,
.nav-page-button,
.favorite-link,
.meta-label {
  color: var(--sidebar-muted);
}

.brand-lockup h1 {
  margin: 0;
  font-size: 1.34rem;
  line-height: 1;
  color: var(--sidebar-ink);
}

.sidebar-copy {
  margin: 0;
  line-height: 1.55;
}

.sidebar-panel {
  display: grid;
  gap: 8px;
  padding: 8px 2px 0;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--sidebar-line);
  background: transparent;
}

#sidebar-utilities {
  margin-top: auto;
  padding-top: 12px;
}

.sidebar-utility-links {
  display: grid;
  gap: 6px;
}

.panel-label-row {
  justify-content: space-between;
  gap: 10px;
}

.sidebar-panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: #9aa7b8;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.sidebar-panel-toggle:hover {
  color: var(--sidebar-ink);
  background: rgba(20, 35, 60, 0.05);
}

.mini-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(133, 187, 218, 0.12);
  color: var(--sidebar-ink);
  font-size: 0.72rem;
  font-weight: 700;
}

.input-label {
  font-size: 0.76rem;
}

.text-input,
.select-input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}

.text-input {
  background: #fffdfa;
  border-color: rgba(174, 156, 126, 0.34);
  color: var(--sidebar-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.text-input::placeholder {
  color: rgba(36, 52, 74, 0.54);
}

.sidebar-button-row,
.review-links {
  gap: 8px;
}

.button {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  justify-content: center;
}

.button-primary {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(103, 75, 44, 0.18);
  color: var(--sidebar-ink);
}

.button-primary:hover {
  background: rgba(255, 255, 255, 0.9);
}

.button-secondary {
  background: transparent;
  border-color: rgba(174, 156, 126, 0.24);
  color: inherit;
}

.sidebar .button-secondary {
  border-color: rgba(174, 156, 126, 0.24);
}

.inline-edit-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  opacity: 0.4;
  vertical-align: middle;
}

.inline-edit-trigger:hover {
  opacity: 1;
}

.button-danger-outline {
  background: transparent;
  border-color: #c0392b;
  color: #c0392b;
  font-size: 12px;
  padding: 4px 10px;
}

.button-danger-outline:hover {
  background: #c0392b;
  color: #fff;
}

.session-summary {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.utility-nav {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.utility-nav-note {
  margin: -2px 0 2px;
  color: var(--sidebar-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.utility-route-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(174, 156, 126, 0.22);
  background: rgba(255, 251, 246, 0.78);
  color: var(--sidebar-ink);
  min-width: 0;
}

.utility-route-button:hover,
.utility-route-button.active {
  background: rgba(255, 255, 255, 0.34);
  border-color: rgba(103, 75, 44, 0.18);
}

.utility-route-icon {
  width: 16px;
  min-width: 16px;
  color: var(--sidebar-muted);
  text-align: center;
}

.utility-route-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  font-weight: 700;
}

.session-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 6px 2px 2px;
  border-radius: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.session-card-collapsed {
  padding-bottom: 0;
}

.session-card strong {
  color: var(--sidebar-ink);
  font-size: 0.9rem;
  min-width: 0;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.session-card p,
.session-card span {
  margin: 0;
  color: var(--sidebar-muted);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
}

.session-card-meta {
  min-width: 0;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.session-card-meta-sub {
  margin-top: 4px;
}

.session-workspace-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.session-workspace-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 5px;
  border: 1px solid rgba(96, 116, 143, 0.2);
  background: #fff;
  object-fit: cover;
}

/* Compact identity line: initials avatar + name/meta column. */
.session-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.session-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(46, 110, 178, 0.12);
  color: var(--brand-navy);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
}

.session-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.session-identity-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.session-identity-text strong {
  font-size: 0.85rem;
}

.sidebar-account {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--sidebar-line);
}

.sidebar-account-button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 7px 6px 7px var(--sidebar-account-leading);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sidebar-ink);
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.sidebar-account-button::-webkit-details-marker {
  display: none;
}

.sidebar-account-button:hover,
.sidebar-account.is-open .sidebar-account-button,
.sidebar-account-details[open] .sidebar-account-button {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(174, 156, 126, 0.18);
}

.sidebar-account-button:focus-visible,
.nav-page-button:focus-visible,
.nav-group-title:focus-visible,
.sidebar-panel-toggle:focus-visible {
  outline: 2px solid rgba(46, 110, 178, 0.58);
  outline-offset: 2px;
}

.sidebar-account-copy,
.sidebar-account-popout-head .session-identity-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sidebar-account-copy strong,
.sidebar-account-popout-head strong {
  color: var(--sidebar-ink);
  font-size: 0.85rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-copy span,
.sidebar-account-popout-head span span,
.sidebar-account-context {
  color: var(--sidebar-muted);
  font-size: 0.72rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-caret {
  color: #8a98aa;
  font-size: 0.72rem;
  text-align: center;
}

.sidebar-account-popout {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: var(--layer-popover);
  width: min(286px, calc(100vw - 28px));
  max-height: min(420px, calc(100dvh - 32px));
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--menu-popout-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 44px rgba(75, 62, 45, 0.18);
}

.sidebar-account.is-open {
  z-index: var(--layer-popover);
}

.sidebar-account-popout-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(174, 156, 126, 0.18);
}

.sidebar-account-context {
  margin: 0;
}

.sidebar-account-menu {
  display: grid;
  gap: 2px;
}

.sidebar-account-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--sidebar-ink);
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sidebar-account-menu-item:hover,
.sidebar-account-menu-item.active {
  background: rgba(133, 187, 218, 0.13);
  border-color: rgba(133, 187, 218, 0.22);
}

.sidebar-account-menu-item-danger {
  margin-top: 4px;
  border-top: 1px solid rgba(174, 156, 126, 0.18);
  color: #7b3f3a;
}

.status-banner {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(174, 156, 126, 0.22);
  color: var(--sidebar-ink);
  line-height: 1.45;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.status-banner.positive {
  background: rgba(45, 156, 103, 0.12);
  color: #1e6f49;
}

.status-banner.warning {
  background: rgba(185, 133, 48, 0.16);
  color: #8a5f18;
}

.favorites-list,
.sidebar-nav,
.nav-group {
  display: grid;
  gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .sidebar,
  .sidebar-scroll-area {
    transition-duration: 1ms;
    scroll-behavior: auto;
  }
}

.sidebar-nav {
  gap: 2px;
  align-content: start;
  min-height: 0;
  flex: 1 1 auto;
  overflow: visible;
  padding-right: 4px;
}

.sidebar-collapsed-favorites-anchor {
  position: relative;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 0 2px;
}

.sidebar:not(.collapsed) .sidebar-collapsed-favorites-anchor {
  display: none;
}

.sidebar:not(.collapsed) .sidebar-collapsed-favorites-popover {
  display: none;
}

.sidebar-collapsed-favorites-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sidebar-control-size);
  height: var(--sidebar-control-size);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.sidebar-collapsed-favorites-button:hover,
.sidebar-collapsed-favorites-button:focus-visible,
.sidebar-collapsed-favorites-button.is-open {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand-navy) 24%, transparent);
  color: var(--brand-navy);
}

.sidebar-collapsed-favorites-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-navy) 58%, transparent);
  outline-offset: 2px;
}

.sidebar-collapsed-favorites-popover {
  position: fixed;
  z-index: var(--layer-popover);
  width: min(286px, calc(100vw - 24px));
  max-height: min(520px, calc(100dvh - 24px));
  overflow: auto;
  border: 1px solid var(--menu-popout-border);
  border-radius: 14px;
  background: var(--menu-popout-bg);
  box-shadow: var(--menu-popout-shadow);
}

.sidebar.collapsed .sidebar-collapsed-favorites-popover .sidebar-favorites {
  display: grid;
  max-height: none;
  margin: 0;
  padding: 8px;
  border: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sidebar.collapsed .sidebar-collapsed-favorites-popover .sidebar-favorites-list,
.sidebar.collapsed .sidebar-collapsed-favorites-popover .panel-label-row,
.sidebar.collapsed .sidebar-collapsed-favorites-popover .sidebar-favorites-group,
.sidebar.collapsed .sidebar-collapsed-favorites-popover .favorite-link {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sidebar.collapsed .sidebar-collapsed-favorites-popover .sidebar-favorites .panel-label-row {
  display: flex;
}

.favorites-list .favorite-link,
.nav-page-button {
  width: 100%;
  min-height: var(--sidebar-row-height);
  border-radius: 8px;
  padding: 0 10px 0 var(--sidebar-nav-leading);
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Leading icon on every top-level nav item (standalones). Clean, no chip. */
.nav-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sidebar-nav-icon-size);
  min-width: var(--sidebar-nav-icon-size);
  height: var(--sidebar-nav-icon-size);
  color: #657f9d;
}

.nav-page-icon-subpage {
  color: #7890aa;
}

.nav-subpage-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.nav-page-icon svg {
  width: var(--sidebar-nav-glyph-size);
  height: var(--sidebar-nav-glyph-size);
}

.nav-page-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-favorite-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  color: rgba(45, 36, 24, 0.26);
  font-size: 0.92rem;
  line-height: 1;
}

.nav-favorite-mark.is-active {
  color: #7a5f37;
}

.favorite-link,
.nav-page-button {
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  color: #5d6b7e;
}

.favorite-link:hover,
.nav-page-button:hover {
  background: rgba(20, 35, 60, 0.05);
  border-color: transparent;
  color: var(--sidebar-ink);
}

/* Active = crisp white fill + navy inset accent bar + ink-500 label. */
.nav-page-button.active {
  background: #ffffff;
  border-color: transparent;
  color: #15273f;
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--brand-navy);
}

.nav-page-button.active .nav-page-icon {
  color: var(--brand-navy);
}

.nav-shell-button {
  min-height: 32px;
  font-size: 0.84rem;
  color: rgba(36, 52, 74, 0.84);
}

.favorites-section.is-hidden,
.is-hidden {
  display: none !important;
}

.nav-standalone {
  display: grid;
  gap: 2px;
  margin-bottom: 0;
}

.nav-group {
  position: relative;
}

.nav-group-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--sidebar-row-height);
  padding: 0 10px 0 var(--sidebar-nav-leading);
  border-radius: 8px;
  gap: 10px;
  color: #5d6b7e;
  background: transparent;
  border: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.nav-group-title:hover {
  background: rgba(20, 35, 60, 0.05);
  color: var(--sidebar-ink);
}

.nav-group-title-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.nav-group-name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Clean section icon — no circle chip, just the outline glyph. */
.nav-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sidebar-nav-icon-size);
  min-width: var(--sidebar-nav-icon-size);
  height: var(--sidebar-nav-icon-size);
  border-radius: 0;
  background: transparent;
  color: #657f9d;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.nav-group-title.active {
  color: #15273f;
  font-weight: 500;
  background: #ffffff;
  border-radius: 8px;
  /* Left accent bar matching .nav-page-button.active so the current section
     reads at a glance. */
  box-shadow: inset 3px 0 0 var(--brand-navy);
}

.nav-group-title.active .nav-group-icon {
  background: transparent;
  color: var(--brand-navy);
}

/* Section icons are inline SVG (Tabler outline). */
.nav-group-icon svg {
  width: var(--sidebar-nav-glyph-size);
  height: var(--sidebar-nav-glyph-size);
}

/* Zone headers (Workspace / Channel) that separate the always-on workspace
   pages from the channel-scoped block. The -divider variant draws one hairline
   above the channel zone. Their slots remain present when the rail collapses. */
.nav-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px 2px 10px;
  margin-top: 2px;
  height: 22px;
  box-sizing: border-box;
}

.nav-zone-header-divider {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #ebe4d8;
  height: 28px;
}

.nav-zone-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #9aa7b8;
}


#nav-popout-root {
  position: fixed;
  inset: 0;
  z-index: var(--layer-popover);
  pointer-events: none;
}

.nav-popout-portal {
  position: fixed;
  z-index: var(--layer-popover);
  width: 300px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--menu-popout-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(234, 243, 251, 0.98) 100%),
    var(--menu-popout-bg);
  box-shadow: var(--menu-popout-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav-popout-portal {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.nav-popout-head {
  display: grid;
  gap: 6px;
}

.nav-popout-head strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--menu-popout-ink);
}

.nav-popout-head p {
  margin: 0;
  color: var(--menu-popout-muted);
  line-height: 1.45;
}

.nav-group-items {
  display: grid;
  gap: 8px;
}

.nav-popout-portal .nav-page-button,
.nav-popout-portal .favorite-link {
  background: transparent;
  border-color: transparent;
  color: var(--menu-popout-ink);
}

.nav-popout-portal .nav-page-button:hover,
.nav-popout-portal .nav-page-button.active,
.nav-popout-portal .favorite-link:hover {
  background: var(--menu-popout-active);
  border-color: transparent;
}

.nav-popout-portal .nav-favorite-mark {
  color: rgba(23, 49, 77, 0.34);
}

.nav-popout-portal .nav-favorite-mark.is-active {
  color: var(--brand-navy);
}

.nav-page-button-standalone {
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Sprint C2 — React renders the header inside a #react-header wrapper.
   `display: contents` makes that wrapper invisible to layout, so its
   two children (.workspace-title-block + .workspace-controls) act as
   direct grid items in .workspace-header. Without this, both children
   collapse into column 1 and the chips squish to single-character
   columns. */
.workspace-header-react-mount {
  display: contents;
}

.workspace-header {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  margin: 0 -12px 12px;
  padding: 8px 12px;
  overflow: visible;
  position: sticky;
  top: 0;
  z-index: 320;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(133, 187, 218, 0.12) 0%, rgba(249, 247, 243, 0) 180px),
    linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sidebar-line);
  box-shadow: 0 4px 10px rgba(76, 63, 43, 0.08);
}

.workspace-title-block {
  min-width: 0;
  display: flex;
  align-items: center;
}

.workspace-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
}

.workspace-header h2 {
  margin: 0;
  min-width: 0;
  font-size: 1.42rem;
  line-height: 1;
  color: var(--sidebar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-summary {
  margin: 0;
  max-width: 620px;
  color: var(--sidebar-muted);
  line-height: 1.45;
}

.workspace-controls {
  /* Content-sized, right-aligned cluster. The previous grid gave the
     channel a 1fr track, so on wide screens it ballooned and left a band
     of dead space. Now every chip sizes to its content and they sit
     together at the right; the slack lives between the title and the
     cluster (normal header layout) instead of stretching one chip. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  overflow: visible;
}

.workspace-controls.is-hidden {
  display: none;
}

.meta-chip {
  min-height: 36px;
  min-width: 0;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(174, 156, 126, 0.22);
  background: rgba(255, 255, 255, 0.9);
  justify-content: center;
  overflow: visible;
}

.meta-chip.is-hidden {
  display: none !important;
}

#date-context-chip {
  background: rgba(133, 187, 218, 0.12);
  border-color: rgba(133, 187, 218, 0.24);
}

.title-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.meta-label {
  color: #677993;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.meta-chip strong {
  color: var(--sidebar-ink);
  font-weight: 700;
}

.control-chip {
  min-width: 0;
  align-items: center;
}

/* Channel chip: lay the "Channel" label inline to the LEFT of the select
   instead of stacked above it. Stacking made this chip ~64px tall — far
   taller than its 53px siblings — creating the "chunky / empty space"
   imbalance in the header. Higher specificity (.meta-chip prefix) is
   required to beat `.inline-chip-stack { display: grid }`, which is
   defined later in source order. */
.meta-chip .channel-chip-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-context-loading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.meta-chip .channel-chip-copy > .meta-label {
  flex: 0 0 auto;
}

.meta-chip .channel-chip-copy > .channel-select,
.meta-chip .channel-chip-copy > .channel-tree {
  flex: 0 1 auto;
  /* Shrinkable to 0 so a long client/channel label ellipsizes cleanly when
     the header is crowded (rather than overflowing into the next chip). A
     ceiling keeps it from stretching across the header on wide screens. */
  min-width: 0;
  max-width: 220px;
}

/* The multi-client switcher's trigger already reads "<Client> · <Channel>",
   so the inline "Client / Channel" caption is redundant and only steals the
   ~100px the trigger needs to render without truncation. Drop it ONLY for the
   tree variant; the flat single-workspace <select> keeps its "Channel"
   caption. */
#channel-chip .channel-chip-copy:has(> .channel-tree) > .meta-label {
  display: none;
}

.channel-select {
  min-width: 0;
}

.workspace-bootstrap-error {
  display: grid;
  gap: 4px;
  min-width: min(360px, 70vw);
  max-width: 440px;
  padding: 8px 10px;
  color: var(--color-text, #14263f);
}

.workspace-bootstrap-error-title {
  font-weight: 800;
}

.workspace-bootstrap-error-copy,
.workspace-bootstrap-diagnostic {
  font-size: 12px;
  line-height: 1.35;
}

.workspace-bootstrap-compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  white-space: nowrap;
}

.workspace-bootstrap-compact-label {
  color: var(--color-danger, #b42318);
  font-size: 12px;
  font-weight: 700;
}

.workspace-bootstrap-diagnostic {
  color: var(--color-text-muted, #5f7088);
}

.workspace-bootstrap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}

@media (max-width: 600px) {
  .workspace-bootstrap-error {
    min-width: 0;
    width: min(100%, 360px);
  }
}

/* ── Client / channel tree (multi-client agency switcher) ───────────────
   A caret-expandable dropdown: top level = client workspace, nested =
   that client's integrations/channels. Replaces the flat <select> only
   when the user belongs to more than one client. */
.channel-tree {
  position: relative;
  /* min-width:0 lets this flex item shrink so the trigger label below can
     ellipsize instead of overflowing the chip and painting over the next
     header chip (the "Connected / Last synced" status cluster). */
  min-width: 0;
  max-width: 100%;
}
.channel-tree-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  min-width: 0;
  max-width: 100%;
  padding: 4px 2px;
  font-size: 0.9rem;
  color: var(--ink);
}
.channel-tree-trigger::-webkit-details-marker { display: none; }
.channel-tree-trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.channel-tree-trigger-label-compact {
  display: none;
}
.channel-tree-trigger-caret {
  color: #60748f;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.channel-tree-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  display: none;
  flex-direction: column;
  gap: 4px;
  width: min(420px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-panel);
  z-index: var(--layer-popover);
}
.channel-tree[open] .channel-tree-panel { display: flex; }
.channel-tree[open] { z-index: var(--layer-popover); }

.channel-tree-search-wrap {
  position: sticky;
  top: -10px;
  z-index: 1;
  margin: -2px -2px 4px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.98);
}

.channel-tree-search {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(174, 156, 126, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  outline: none;
}

.channel-tree-search::placeholder {
  color: var(--ink-muted, #8da0b8);
}

.channel-tree-search:focus-visible {
  border-color: rgba(47, 111, 183, 0.55);
  box-shadow: 0 0 0 3px rgba(47, 111, 183, 0.12);
}

.channel-tree-client {
  border-radius: 8px;
}
.channel-tree-client.is-active-client {
  background: rgba(47, 111, 183, 0.04);
  box-shadow: inset 3px 0 0 rgba(47, 111, 183, 0.46);
}
.channel-tree-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 7px 8px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--ink);
}
.channel-tree-summary::-webkit-details-marker { display: none; }
.channel-tree-summary:hover { background: var(--surface-muted, #f3f4f6); }
/* React migration: <summary> replaced with <div> + <button>; reset browser button defaults */
.channel-tree-summary-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
}
.channel-tree-caret {
  font-size: 0.72rem;
  color: #60748f;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.channel-tree-client-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 7px;
  border: 1px solid rgba(96, 116, 143, 0.18);
  background: #fff;
  color: var(--brand-navy);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  overflow: hidden;
}
.channel-tree-client-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Support both the old <details>[open] pattern and the React .is-open class */
.channel-tree-client[open] > .channel-tree-summary .channel-tree-caret,
.channel-tree-client.is-open > .channel-tree-summary .channel-tree-caret {
  transform: rotate(90deg);
}
.channel-tree-client-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-tree-active-pill {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
.channel-tree-open-client {
  border: 1px solid rgba(47, 111, 183, 0.18);
  border-radius: 999px;
  background: rgba(47, 111, 183, 0.06);
  color: var(--brand-navy);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 9px;
  flex-shrink: 0;
}
.channel-tree-open-client:hover {
  background: rgba(47, 111, 183, 0.1);
}
.channel-tree-leaves {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0 6px 22px;
}
.channel-tree-leaf {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft, #374151);
}
.channel-tree-leaf:hover {
  background: var(--surface-muted, #f3f4f6);
  border-color: rgba(211, 223, 239, 0.8);
}
.channel-tree-leaf:focus-visible,
.channel-tree-summary-btn:focus-visible,
.channel-tree-open-client:focus-visible,
.channel-tree-add:focus-visible,
.channel-tree-view-all:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 111, 183, 0.16);
}
.channel-tree-leaf.is-selected {
  background: rgba(47, 111, 183, 0.08);
  border-color: rgba(47, 111, 183, 0.18);
  box-shadow: inset 3px 0 0 rgba(47, 111, 183, 0.58);
  color: var(--ink);
  font-weight: 600;
}
.channel-tree-leaf-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}
.channel-tree-leaf-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.channel-tree-leaf-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  font-weight: 700;
}
.channel-tree-leaf-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 500;
}
.channel-tree-leaf.is-selected .channel-tree-leaf-meta {
  color: var(--ink-muted, #64748b);
}
.channel-tree-leaf-action {
  margin-left: auto;
  color: var(--brand-navy);
  font-size: 0.74rem;
  font-weight: 700;
}
.channel-tree-empty {
  padding: 6px 8px 6px 8px;
  font-size: 0.8rem;
  color: var(--ink-muted, #9ca3af);
}
.channel-tree-add {
  margin-top: 4px;
  border: none;
  border-top: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  padding: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-navy);
  text-align: left;
  border-radius: 0 0 8px 8px;
}
.channel-tree-add:hover { background: var(--surface-muted, #f3f4f6); }

.header-action-cluster {
  display: flex;
  justify-content: flex-end;
  /* Never shrink the action cluster (status pill + buttons + gear). When the
     header is crowded, the channel chip absorbs the squeeze and ellipsizes
     instead — previously the action ROW overflowed its shrunken cluster and
     painted left over the channel chip (the "garbled switcher" bug). */
  flex: 0 0 auto;
  min-width: 0;
}

/* Collapse header chips, the action cluster, and the group-tabs strip
   when app.js has not populated them. Without this, empty chips render
   as 40px-tall empty pills and the group-tabs section still contributes
   a margin/gap even with no children. Applies only to empty containers;
   populated state is unaffected. */
.control-chip:empty,
.header-action-cluster:empty,
.group-tabs:empty {
  display: none;
}

.header-action-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.header-control-sep,
.header-sep {
  display: block;
  width: 1px;
  height: 18px;
  background: rgba(174, 156, 126, 0.35);
  flex: 0 0 auto;
}

/* Mobile drawer toggle + backdrop. Hidden on desktop; the ≤920px media
   query reveals the hamburger and turns the sidebar into an off-canvas
   drawer. */
.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  margin-right: 4px;
  border-radius: 10px;
  border: 1px solid rgba(174, 156, 126, 0.22);
  background: rgba(255, 255, 255, 0.9);
  color: var(--sidebar-ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-nav-toggle img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.sidebar-backdrop {
  display: none;
}

.header-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(174, 156, 126, 0.22);
  background: rgba(255, 255, 255, 0.9);
  color: var(--sidebar-ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.header-icon-button.is-active,
.header-icon-button:hover {
  background: rgba(133, 187, 218, 0.16);
}

.mobile-nav-toggle:focus-visible,
.date-context-summary:focus-visible,
.channel-tree-trigger:focus-visible,
.header-status-button:focus-visible,
.header-icon-button:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

.header-onboarding-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 11px 0 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(43, 104, 138, 0.3);
  background: linear-gradient(180deg, rgba(226, 242, 250, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
  color: var(--brand-navy);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(43, 104, 138, 0.08);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.header-onboarding-button:hover,
.header-onboarding-button.is-active {
  border-color: rgba(43, 104, 138, 0.5);
  box-shadow: 0 0 0 3px rgba(133, 187, 218, 0.16);
}

.header-onboarding-button.is-needed {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

.header-onboarding-button.is-ready {
  border-color: rgba(45, 156, 103, 0.28);
  background: linear-gradient(180deg, rgba(231, 245, 238, 0.9) 0%, rgba(255, 255, 255, 0.98) 100%);
  color: var(--positive-ink);
}

.header-onboarding-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.header-onboarding-icon.is-needed {
  color: var(--ink-muted);
}

.header-onboarding-icon.is-ready {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--positive);
  color: #fff;
}

.header-onboarding-icon.is-syncing.is-indeterminate {
  border-radius: 999px;
  background: var(--info-soft);
}

.header-onboarding-glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.header-onboarding-label {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Workspace onboarding popover: compact operator guidance, not a dashboard. */
.header-dropdown.header-onboarding-dropdown {
  right: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--workspace-header-h, 63px) - 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-color: rgba(128, 151, 180, 0.24);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 22px 50px rgba(15, 35, 64, 0.18), 0 2px 8px rgba(15, 35, 64, 0.06);
}

.onboarding-popover-head {
  flex: 0 0 auto;
  padding: 13px 14px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(145deg, rgba(230, 242, 248, 0.58), rgba(255, 255, 255, 0.98) 76%);
}

.onboarding-popover-title {
  min-width: 0;
}

.onboarding-popover-title > span,
.onboarding-section h3 {
  display: block;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.onboarding-popover-title > strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.3;
}

.onboarding-popover-title p {
  margin: 3px 0 0;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.onboarding-sections,
.onboarding-ready-layout {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 11px;
  padding: 11px 12px 12px;
}

.onboarding-section {
  display: grid;
  gap: 5px;
}

.onboarding-roadmap-list,
.onboarding-completed-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--surface);
}

.onboarding-roadmap-row {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 9px;
  gap: 7px;
  align-items: center;
  min-height: 40px;
  padding: 0 9px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.onboarding-roadmap-row:last-child {
  border-bottom: 0;
}

.onboarding-roadmap-row:hover {
  background: var(--info-soft);
}

.onboarding-roadmap-row.is-disabled {
  cursor: default;
  background: var(--surface-soft);
}

.onboarding-roadmap-title {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-roadmap-icon,
.onboarding-ready-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 1.4px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.onboarding-roadmap-row.is-verified .onboarding-roadmap-icon,
.onboarding-ready-check {
  border-color: var(--positive);
  background: var(--positive);
  color: #fff;
}

.onboarding-roadmap-row.is-visited .onboarding-roadmap-icon {
  border-color: var(--brand-navy);
  background: var(--info-soft);
  color: var(--brand-navy);
}

.onboarding-roadmap-row.is-unavailable .onboarding-roadmap-icon {
  border-color: var(--warning);
  background: var(--warning-soft);
  color: var(--warning);
}

.onboarding-roadmap-row.is-checking .onboarding-roadmap-icon {
  border-style: dashed;
  animation: onboarding-check-spin 1.1s linear infinite;
}

.onboarding-guidance-checking {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.3;
}

.onboarding-guidance-checking-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 1.5px dashed var(--brand-navy);
  border-radius: 999px;
  animation: onboarding-check-spin 1.1s linear infinite;
}

@keyframes onboarding-check-spin {
  to { transform: rotate(360deg); }
}

.onboarding-roadmap-status {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}

.onboarding-roadmap-row.is-verified .onboarding-roadmap-status {
  color: var(--positive-ink);
}

.onboarding-roadmap-arrow {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1;
}

.onboarding-next-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 11px 12px;
  border: 1px solid rgba(46, 110, 178, 0.3);
  border-left: 3px solid var(--brand-navy);
  border-radius: 10px;
  background: linear-gradient(105deg, var(--info-soft), var(--surface) 72%);
}

.onboarding-next-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--brand-navy);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-next-meta > span:last-child {
  color: var(--ink-soft);
  letter-spacing: 0;
}

.onboarding-next-meta > span.is-unavailable {
  color: var(--warning);
}

.onboarding-next-meta > span.is-verified {
  color: var(--positive);
}

.onboarding-next-step > h4 {
  align-self: end;
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.25;
}

.onboarding-next-step > p {
  grid-column: 1;
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.onboarding-next-action {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: center;
  min-height: 34px;
  padding: 0 10px;
  font-size: var(--text-xs);
  white-space: nowrap;
  text-decoration: none;
}

.onboarding-ready-card {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(45, 156, 103, 0.22);
  border-radius: 10px;
  background: var(--positive-soft);
}

.onboarding-ready-card strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-sm);
}

.onboarding-ready-card > div > span {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.onboarding-completed-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.onboarding-completed-details summary {
  padding: 10px 12px;
  color: var(--brand-navy);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.onboarding-completed-details[open] summary {
  border-bottom: 1px solid var(--line-soft);
}

.onboarding-completed-list {
  border: 0;
}

.onboarding-booking-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(46, 110, 178, 0.24);
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--brand-navy);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}

.onboarding-booking-link:hover {
  border-color: var(--brand-navy);
  background: var(--brand-soft);
}

.onboarding-booking-link:focus-visible,
.header-onboarding-button:focus-visible,
.onboarding-completed-details summary:focus-visible,
.onboarding-roadmap-row:focus-visible,
.onboarding-next-action:focus-visible,
.onboarding-popover-footer .btn:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

.onboarding-roadmap-row:focus-visible {
  outline-offset: -2px;
}

.onboarding-popover-footer {
  display: flex;
  flex: 0 0 auto;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

.onboarding-popover-footer > .btn {
  width: 100%;
}

.onboarding-completion-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--layer-overlay);
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 35, 64, 0.46);
  backdrop-filter: blur(3px);
}

.onboarding-completion-panel {
  width: min(520px, 96vw);
  overflow: hidden;
  border: 1px solid rgba(128, 151, 180, 0.3);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 28px 70px rgba(15, 35, 64, 0.24), 0 4px 12px rgba(15, 35, 64, 0.08);
}

.onboarding-completion-hero {
  padding: 28px;
  background: linear-gradient(145deg, rgba(230, 242, 248, 0.94), rgba(255, 255, 255, 0.99) 72%);
}

.onboarding-completion-hero h2 {
  margin: 14px 0 8px;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--text-heading);
  line-height: 1.25;
}

.onboarding-completion-hero > p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.onboarding-completion-proof {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.onboarding-completion-proof > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(45, 156, 103, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.onboarding-completion-proof strong {
  color: var(--positive);
}

.onboarding-completion-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 18px 28px 24px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

@media (max-width: 640px) {
  .header-dropdown.header-onboarding-dropdown {
    position: fixed;
    top: calc(var(--workspace-header-h, 63px) + 8px);
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - var(--workspace-header-h, 63px) - 20px);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .onboarding-popover-head,
  .onboarding-sections,
  .onboarding-ready-layout {
    padding-right: 14px;
    padding-left: 14px;
  }

  .onboarding-completion-hero {
    padding: 24px 20px;
  }

  .onboarding-completion-actions {
    padding: 16px 20px 20px;
  }

  .onboarding-roadmap-row {
    min-height: 44px;
  }
}

/* Brand Plan workspace --------------------------------------------------- */
.brand-plan-manager-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--layer-scrim);
  display: flex;
  justify-content: flex-end;
  background: var(--overlay);
}

.brand-plan-manager {
  width: min(1040px, calc(100vw - 48px));
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.brand-plan-manager-header {
  min-height: 112px;
  padding: 24px 28px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.brand-plan-manager-kicker,
.brand-plan-manager-mobile-title span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand-plan-manager-header h2 {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 1.2;
}

.brand-plan-manager-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.brand-plan-manager-meta > span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--line-strong);
}

.brand-plan-manager-meta .status-badge {
  text-transform: capitalize;
}

.brand-plan-manager-completion {
  min-width: 112px;
  text-align: right;
}

.brand-plan-manager-completion strong,
.brand-plan-manager-completion span {
  display: block;
}

.brand-plan-manager-completion strong {
  color: var(--brand);
  font-size: var(--text-xl);
}

.brand-plan-manager-completion span {
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.brand-plan-manager-progress {
  height: 3px;
  background: var(--surface-muted);
}

.brand-plan-manager-progress i {
  display: block;
  height: 100%;
  background: var(--brand);
  transition: width 180ms ease;
}

.brand-plan-manager-layout {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
}

.brand-plan-manager-nav {
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  background: var(--surface-muted);
  border-right: 1px solid var(--line);
}

.brand-plan-manager-nav button {
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  color: var(--ink-muted);
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.brand-plan-manager-nav button:hover {
  color: var(--ink);
  background: var(--surface);
}

.brand-plan-manager-nav button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.brand-plan-manager-nav button.is-active {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.brand-plan-manager-step {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.brand-plan-manager-nav .is-active .brand-plan-manager-step {
  color: var(--surface);
  border-color: var(--brand);
  background: var(--brand);
}

.brand-plan-manager-nav strong,
.brand-plan-manager-nav small {
  display: block;
}

.brand-plan-manager-nav strong {
  color: inherit;
  font-size: var(--text-sm);
}

.brand-plan-manager-nav small {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.brand-plan-manager-nav b {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--warning-ink);
  font-size: var(--text-xs);
  border-radius: 11px;
  background: var(--warning-soft);
}

.brand-plan-manager-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.brand-plan-manager-mobile-title { display: none; }

.brand-plan-manager-body {
  min-height: 0;
  flex: 1;
  padding: 30px 34px;
  overflow: auto;
}

.brand-plan-manager-body > div > h3 {
  margin: 0 0 8px;
  font-size: var(--text-xl);
}

.brand-plan-manager-body > div > h3::after {
  content: "";
  width: 40px;
  height: 3px;
  margin-top: 10px;
  display: block;
  border-radius: 2px;
  background: var(--brand);
}

.brand-plan-manager-body .form-grid {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.brand-plan-manager-body .field > span {
  margin-bottom: 7px;
  font-weight: 650;
}

.brand-plan-manager-body textarea.field-input {
  margin-bottom: 20px;
  line-height: 1.55;
  resize: vertical;
}

.brand-plan-manager-body .data-table {
  margin-top: 18px;
}

.brand-plan-manager-body .data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted);
}

.brand-plan-manager-body .data-table td {
  vertical-align: middle;
}

.brand-plan-manager-body .kpi-strip {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.brand-plan-manager-success {
  margin-top: 16px;
  padding: 12px 14px;
  color: var(--positive-ink);
  border: 1px solid var(--positive);
  border-radius: var(--radius-sm);
  background: var(--positive-soft);
}

.brand-plan-manager-footer {
  min-height: 72px;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.brand-plan-manager-footer-state span,
.brand-plan-manager-footer-state strong { display: block; }
.brand-plan-manager-footer-state span { color: var(--ink-muted); font-size: var(--text-xs); }
.brand-plan-manager-footer-state strong { margin-top: 2px; font-size: var(--text-sm); }
.brand-plan-manager-actions { display: flex; gap: 8px; align-items: center; }

@media (max-width: 760px) {
  .brand-plan-manager { width: 100%; max-width: 100%; }
  .brand-plan-manager-header { min-height: 96px; padding: 18px 20px 15px; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .brand-plan-manager-completion { display: none; }
  .brand-plan-manager-header h2 { font-size: var(--text-xl); }
  .brand-plan-manager-meta { flex-wrap: wrap; }
  .brand-plan-manager-layout { display: flex; flex-direction: column; }
  .brand-plan-manager-nav { padding: 9px 12px; flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-plan-manager-nav button { width: auto; min-width: max-content; min-height: 38px; padding: 6px 10px; display: flex; }
  .brand-plan-manager-nav small, .brand-plan-manager-nav b { display: none; }
  .brand-plan-manager-step { width: 22px; height: 22px; }
  .brand-plan-manager-mobile-title { padding: 12px 18px 0; display: block; }
  .brand-plan-manager-mobile-title span { margin: 0; }
  .brand-plan-manager-mobile-title strong { font-size: var(--text-sm); }
  .brand-plan-manager-body { padding: 18px; }
  .brand-plan-manager-body .form-grid { padding: 16px; grid-template-columns: minmax(0, 1fr); }
  .brand-plan-manager-footer { padding: 12px 16px; align-items: stretch; }
  .brand-plan-manager-footer-state { display: none; }
  .brand-plan-manager-actions { width: 100%; }
  .brand-plan-manager-actions .btn-primary, .brand-plan-manager-actions .btn-secondary { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-plan-manager-progress i { transition: none; }
}

@media (max-height: 700px) {
  .header-dropdown.header-onboarding-dropdown {
    height: calc(100dvh - var(--workspace-header-h, 63px) - 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-roadmap-row.is-checking .onboarding-roadmap-icon,
  .onboarding-guidance-checking-icon {
    animation: none;
  }
}

.header-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid rgba(174, 156, 126, 0.22);
  background: rgba(255, 255, 255, 0.9);
  color: var(--sidebar-ink);
  font-weight: 700;
}

/* Compact single-line status pill. Was a 3-row stacked block
   (label / freshness / detail) ~53px tall that ate ~250px of header
   width; now a one-line pill (dot/spinner + short label) with the full
   freshness + detail surfaced via the title tooltip. */
.header-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  min-height: 36px;
  /* Hard width cap so the status chip can NEVER overrun the header and
     bury the channel/actions — true regardless of markup version. An
     older cached app.js renders a verbose 3-span sync banner that would
     otherwise stretch to ~700px and cover everything during first sync. */
  max-width: clamp(120px, 20vw, 220px);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(174, 156, 126, 0.22);
  background: rgba(255, 255, 255, 0.92);
  color: var(--sidebar-ink);
  white-space: nowrap;
}

.header-status-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(174, 156, 126, 0.22);
  background: rgba(255, 255, 255, 0.92);
  color: var(--sidebar-ink);
  cursor: pointer;
}

.header-status-shell > .header-status-button {
  list-style: none;
}

.header-status-shell > .header-status-button::-webkit-details-marker {
  display: none;
}

.header-status-shell[open] > .header-status-button {
  box-shadow: 0 0 0 3px rgba(133, 187, 218, 0.16);
}

.header-status-shell {
  display: inline-flex;
}

.header-status-button:hover,
.header-status-button.is-active {
  box-shadow: 0 0 0 3px rgba(133, 187, 218, 0.16);
}

.header-status-text {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.header-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8ea0b6;
  flex: 0 0 auto;
}

.header-status-chip-positive .header-status-dot {
  background: #2d9c67;
}

.header-status-chip-warning .header-status-dot,
.header-status-button-warning .header-status-dot {
  background: #b98530;
}

.header-status-button-positive .header-status-dot {
  background: #2d9c67;
}

.header-status-button-neutral .header-status-dot {
  background: #8ea0b6;
}

.header-status-dot.is-syncing {
  background: #b98530;
  opacity: 1;
  animation: sync-dot-pulse 1.2s ease-in-out infinite;
}

.header-status-button-negative .header-status-dot,
.header-status-button-error .header-status-dot,
.header-status-button-danger .header-status-dot {
  background: #d75c58;
}

.header-status-chip-positive {
  border-color: rgba(45, 156, 103, 0.22);
  background: linear-gradient(180deg, rgba(231, 245, 238, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.header-status-chip-warning {
  border-color: rgba(185, 133, 48, 0.28);
  background: linear-gradient(180deg, rgba(255, 244, 223, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.header-status-button-positive {
  border-color: rgba(45, 156, 103, 0.22);
  background: linear-gradient(180deg, rgba(231, 245, 238, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.header-status-button-warning {
  border-color: rgba(185, 133, 48, 0.28);
  background: linear-gradient(180deg, rgba(255, 244, 223, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.header-status-button-negative,
.header-status-button-error,
.header-status-button-danger {
  border-color: rgba(215, 92, 88, 0.28);
  background: linear-gradient(180deg, rgba(255, 236, 234, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.header-status-chip-neutral {
  border-color: rgba(174, 156, 126, 0.22);
}

.header-help-body {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
  padding: 4px 0 8px;
}

.date-context-apply-wrap {
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
}

.header-dropdown-shell {
  position: relative;
}

.header-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 290px;
  display: none;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-panel);
  z-index: var(--layer-popover);
}

.header-dropdown.is-open {
  display: grid;
}

.header-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--sidebar-ink);
}

.header-dropdown-head div {
  display: grid;
  gap: 2px;
}

.header-dropdown-head strong {
  font-size: var(--text-sm);
  line-height: 1.2;
}

.header-dropdown-head span {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.header-notification-list {
  display: grid;
  gap: 8px;
}

.header-notification-row {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.header-notification-row strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.header-notification-row span,
.header-dropdown-empty {
  color: var(--ink-soft);
  line-height: 1.4;
}

.header-status-dropdown {
  right: 0;
  width: min(300px, calc(100vw - 24px));
}

.header-status-shell[open] .header-status-dropdown {
  display: grid;
}

.header-status-dropdown-cta {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: var(--navy, #0f172a);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.header-status-dropdown-cta:hover {
  opacity: 0.88;
}

/* ── Gear settings directory ─────────────────────────────────────────────── */
.header-gear-dropdown {
  width: min(340px, calc(100vw - 28px));
  max-height: calc(100vh - var(--workspace-header-h, 76px) - 20px);
  overflow-y: auto;
  padding: 12px;
  border-color: rgba(128, 151, 180, 0.24);
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 0 22px 50px rgba(15, 35, 64, 0.18), 0 2px 8px rgba(15, 35, 64, 0.06);
}

.header-gear-links {
  display: grid;
  gap: 2px;
}

.header-gear-group {
  margin: 9px 6px 3px;
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.header-gear-group:first-child {
  margin-top: 2px;
}

.header-gear-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.header-gear-link:hover,
.header-gear-link.is-active {
  border-color: rgba(88, 129, 168, 0.18);
  background: linear-gradient(180deg, rgba(241, 247, 252, 0.92), rgba(255, 255, 255, 0.98));
  box-shadow: inset 3px 0 0 var(--accent, #2f7fbf);
}

.header-gear-link:focus-visible {
  outline: 2px solid rgba(47, 127, 191, 0.35);
  outline-offset: 2px;
}

.header-gear-link-label {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-gear-link-meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.header-gear-link.is-help {
  border-color: rgba(47, 127, 191, 0.2);
  background: rgba(231, 243, 251, 0.78);
  color: var(--brand-navy);
}

.header-gear-link.is-help:hover,
.header-gear-link.is-help.is-active {
  background: rgba(220, 238, 249, 0.96);
}

.header-gear-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}

.header-gear-status-dot.is-warning {
  background: var(--warning, #c58a25);
  box-shadow: 0 0 0 3px rgba(197, 138, 37, 0.12);
}

.header-gear-status-dot.is-error {
  background: var(--negative, #dc2626);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.header-gear-count {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(197, 138, 37, 0.12);
  color: #8a5b12;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.header-gear-link.is-active {
  box-shadow: inset 3px 0 0 var(--accent, #2f7fbf);
}

/* ── Notifications unread badge + row states ─────────────────────────────── */
.header-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.9);
  pointer-events: none;
  line-height: 1;
}

.header-notification-row.is-unread {
  border-color: rgba(44, 95, 190, 0.28);
  background: rgba(44, 95, 190, 0.06);
}

.header-notif-body {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.header-notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #2c5fbe);
  flex-shrink: 0;
  margin-top: 5px;
}

.header-notif-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.header-notif-mark-unread {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-soft, #64748b);
  font-size: 0.72rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.header-notif-mark-unread:hover {
  color: var(--ink);
  text-decoration: underline;
}

.header-status-dropdown-secondary {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--navy, #0f172a);
  font-size: 0.83rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  opacity: 0.65;
}
.header-status-dropdown-secondary:hover {
  opacity: 1;
}

.header-status-error-raw {
  display: block;
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.06);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-family: ui-monospace, monospace;
  line-height: 1.4;
  word-break: break-word;
}

.group-tabs.is-hidden {
  display: none;
}

.route-tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px 0 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.route-tabs::-webkit-scrollbar {
  display: none;
}

.route-tabs .group-tab {
  flex: 0 0 auto;
}

.integration-directory {
  display: grid;
  gap: 10px;
}

.integration-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(180px, 0.9fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(174, 156, 126, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.integration-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.integration-provider-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(120, 91, 53, 0.1);
  color: var(--sidebar-ink);
  font-weight: 800;
}

.integration-row-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.integration-row-copy strong {
  color: var(--ink);
  font-size: 1rem;
}

.integration-row-copy p,
.integration-modal-copy,
.integration-row-detail {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.integration-row-status {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.integration-row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.integration-row-permission {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
}

.integration-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--layer-overlay);
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(20, 27, 38, 0.34);
  backdrop-filter: blur(8px);
}

/* Global navigation command palette. It deliberately uses the existing Anata
   navy and surface tokens rather than introducing a second menu visual system. */
.command-palette-overlay {
  position: fixed;
  inset: 0;
  /* Above non-interactive global chrome. Interactive drawers and dialogs
     block the shortcut before this layer is mounted. */
  z-index: var(--layer-overlay);
  display: grid;
  place-items: start center;
  padding: min(12vh, 132px) 20px 28px;
  background: var(--command-palette-scrim);
  backdrop-filter: blur(var(--command-palette-scrim-blur));
  opacity: 0;
  transition: opacity var(--command-palette-open-duration) var(--command-palette-easing);
}

.command-palette-overlay[data-command-palette-state="open"] {
  opacity: 1;
}

.command-palette-overlay[data-command-palette-state="closing"] {
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--command-palette-close-duration);
}

.command-palette {
  width: min(760px, 100%);
  max-height: min(72vh, 760px);
  overflow: hidden;
  border: 1px solid var(--command-palette-edge);
  border-radius: var(--radius-lg);
  /* The foreground, rather than the page behind it, owns the glass depth. */
  background: var(--command-palette-surface);
  backdrop-filter: blur(32px) saturate(148%);
  color: #f8fbff;
  box-shadow: 0 32px 82px rgba(7, 20, 39, 0.38), 0 0 0 1px rgba(5, 16, 32, 0.16), inset 0 1px 0 var(--command-palette-inner-highlight);
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity var(--command-palette-open-duration) var(--command-palette-easing), transform var(--command-palette-open-duration) var(--command-palette-easing);
  will-change: opacity, transform;
}

.command-palette-overlay[data-command-palette-state="open"] .command-palette {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.command-palette-overlay[data-command-palette-state="closing"] .command-palette {
  opacity: 0;
  transform: translateY(4px) scale(0.99);
  transition-duration: var(--command-palette-close-duration);
}

.command-palette-search-wrap {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(205, 225, 245, 0.18);
}

.command-palette-search-icon {
  color: #b9d7ee;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.command-palette-search-icon svg,
.command-palette-close svg {
  width: 20px;
  height: 20px;
  display: block;
}

.command-palette-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.command-palette-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: 600 22px/1.25 var(--font-body);
  letter-spacing: 0;
}

.command-palette-input::placeholder {
  color: rgba(220, 233, 247, 0.68);
}

.command-palette-search-wrap kbd,
.command-palette-footer span,
.command-palette-result-type {
  border: 1px solid rgba(205, 225, 245, 0.22);
  border-radius: var(--radius-xs);
  color: rgba(224, 236, 249, 0.78);
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0;
}

.command-palette-search-wrap kbd {
  padding: 5px 6px;
}

.command-palette-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(224, 236, 249, 0.82);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.command-palette-close:hover,
.command-palette-close:focus-visible {
  background: rgba(181, 214, 240, 0.14);
  color: #fff;
}

.command-palette-results {
  max-height: min(56vh, 580px);
  overflow-y: auto;
  padding: 8px;
}

.command-palette-group {
  padding: 7px 0;
}

.command-palette-group > p {
  margin: 0;
  padding: 0 10px 6px;
  color: rgba(195, 216, 238, 0.72);
  font: 700 11px/1.2 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-palette-group > div {
  display: grid;
  gap: 2px;
}

.command-palette-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #f8fbff;
  cursor: pointer;
  text-align: left;
}

.command-palette-result:hover,
.command-palette-result.is-active,
.command-palette-result:focus-visible {
  border-color: rgba(152, 198, 231, 0.35);
  background: rgba(125, 187, 222, 0.18);
  outline: none;
}

.command-palette-result-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(205, 225, 245, 0.18);
  border-radius: var(--radius-xs);
  color: #b9dff5;
}

.command-palette-result-icon svg {
  width: 18px;
  height: 18px;
}

.command-palette-result-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.command-palette-result-copy strong {
  overflow: hidden;
  color: #fff;
  font: 700 14px/1.25 var(--font-body);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette-result-copy span {
  overflow: hidden;
  color: rgba(207, 225, 243, 0.72);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette-result-type {
  padding: 4px 6px;
  white-space: nowrap;
}

.command-palette-empty {
  display: grid;
  gap: 4px;
  padding: 28px 18px;
  color: rgba(220, 233, 247, 0.78);
  text-align: center;
}

.command-palette-empty strong {
  color: #fff;
  font-family: var(--font-heading);
}

.command-palette-empty span {
  font-size: 13px;
}

.command-palette-footer {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid rgba(205, 225, 245, 0.15);
}

.command-palette-footer span {
  padding: 4px 6px;
}

@media (prefers-reduced-motion: reduce) {
  .command-palette-overlay,
  .command-palette {
    transition-duration: 1ms;
  }
}

.integration-modal-card {
  width: min(760px, 100%);
  max-height: min(82vh, 920px);
  overflow: auto;
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid rgba(174, 156, 126, 0.22);
  background: #fffdfa;
  box-shadow: 0 28px 60px rgba(29, 22, 13, 0.18);
}

.integration-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.integration-modal-head h3 {
  margin: 0;
}

.integration-manager-stack {
  display: grid;
  gap: 12px;
}

.integration-health-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.integration-health-hero strong {
  display: block;
  color: var(--ink);
}

.integration-health-hero p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.integration-modal-section {
  display: grid;
  gap: 12px;
}

.integration-modal-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
}

.integration-connection-list {
  display: grid;
  gap: 10px;
}

.integration-connection-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.8fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(174, 156, 126, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.integration-account-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.integration-account-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.integration-health-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: var(--surface-soft);
  color: var(--ink-muted);
}

.integration-health-pill.is-success {
  background: var(--positive-soft);
  color: var(--positive);
}

.integration-health-pill.is-info {
  background: var(--info-soft);
  color: var(--brand-navy);
}

.integration-health-pill.is-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.integration-health-pill.is-error {
  background: var(--negative-soft);
  color: var(--negative);
}

.integration-health-summary {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  background: var(--surface-soft);
}

.integration-health-summary strong {
  color: var(--ink);
  font-size: var(--text-sm);
}

.integration-health-summary span {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.integration-account-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.integration-account-facts div {
  min-width: 0;
}

.integration-account-facts span {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-soft);
  font-size: var(--text-xs);
}

.integration-account-facts strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.integration-sync-details {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.integration-sync-details summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--brand-navy);
  font-size: var(--text-sm);
  font-weight: 700;
}

.integration-sync-details summary span {
  color: var(--ink-muted);
  font-weight: 500;
}

.integration-sync-details-body {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface-soft);
}

.integration-sync-details-body p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.integration-sync-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.integration-sync-counts span {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.integration-sync-streams {
  display: grid;
  gap: 4px;
}

.integration-sync-streams div {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  gap: 8px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.integration-sync-streams strong {
  color: var(--ink-muted);
  font-weight: 500;
  white-space: nowrap;
}

.integration-connection-row-preview {
  border-style: dashed;
  background: rgba(247, 249, 252, 0.88);
}

.integration-connection-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.integration-connection-copy strong {
  color: var(--ink);
}

.integration-connection-copy p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.integration-connection-meta {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.integration-connection-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.compact-empty-state {
  padding: 18px 20px;
  text-align: left;
}

.settings-form,
.settings-stack {
  display: grid;
  gap: 12px;
}

.inline-insight-callout {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.inline-insight-callout.tone-warning {
  border-color: rgba(185, 133, 48, 0.28);
  background: var(--warning-soft);
}

.inline-insight-callout.tone-positive {
  border-color: rgba(45, 156, 103, 0.24);
  background: var(--positive-soft);
}

.inline-insight-copy {
  display: grid;
  gap: 6px;
}

.inline-insight-copy strong,
.structured-feed-copy strong,
.config-row strong,
.workflow-checklist-copy strong,
.audit-feed-copy strong {
  color: var(--ink);
}

.inline-insight-copy p,
.structured-feed-copy p,
.config-row p,
.workflow-checklist-copy p,
.audit-feed-copy p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.structured-feed,
.config-stack,
.workflow-checklist-rows,
.audit-feed {
  display: grid;
  gap: 10px;
}

.structured-feed-row,
.config-row,
.audit-feed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(21, 39, 63, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.structured-feed-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.structured-feed-meta,
.audit-feed-time,
.config-row span {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
}

.workflow-checklist {
  display: grid;
  gap: 12px;
}

.workflow-checklist-progress {
  display: grid;
  gap: 8px;
}

.workflow-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.workflow-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.workflow-checklist-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(21, 39, 63, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.workflow-checklist-row.is-complete {
  border-color: rgba(45, 156, 103, 0.24);
  background: var(--positive-soft);
}

.workflow-checklist-mark {
  color: var(--ink-soft);
  font-weight: 700;
}

.workflow-checklist-row.is-complete .workflow-checklist-mark {
  color: var(--positive);
}

.workflow-checklist-copy {
  display: grid;
  gap: 4px;
}

.audit-feed-row {
  grid-template-columns: 128px minmax(0, 1fr);
}

.settings-label {
  display: grid;
  gap: 8px;
}

.settings-label span {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.meta-value {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

.workspace-header .meta-value {
  color: var(--ink);
}

.inline-chip-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.inline-chip-copy-single {
  gap: 6px;
}

.inline-chip-stack {
  display: grid;
  gap: 3px;
  align-items: start;
}

.compact-select {
  height: 28px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.96);
}

.compact-inline-select {
  height: 28px;
  min-width: 0;
  padding: 0 24px 0 8px;
  border-radius: 9px;
  color: #14263f;
  font-weight: 700;
}

.star-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--warning);
  font-size: 1.05rem;
}

.help-button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(174, 156, 126, 0.22);
  background: rgba(255, 255, 255, 0.58);
  color: var(--sidebar-ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.help-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  width: min(320px, 72vw);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-panel);
  color: var(--ink-muted);
  line-height: 1.45;
  z-index: 120;
}

.title-actions:hover .help-popover,
.title-actions:focus-within .help-popover {
  display: block;
}

.scoped-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.scoped-filter-bar.is-hidden {
  display: none;
}

.filter-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.filter-group-wide {
  grid-column: span 1;
}

.date-input {
  appearance: none;
  min-height: 40px;
}

.date-context-shell {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.date-context-menu {
  position: relative;
  width: 100%;
  min-width: 0;
  align-self: center;
  z-index: 400;
}

.date-context-menu > summary {
  list-style: none;
}

.date-context-menu > summary::-webkit-details-marker {
  display: none;
}

.date-context-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.date-context-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  /* Text must never wrap: the spans inside default to white-space: normal,
     so a narrow column used to break "Last 30 days" character-by-character
     and grow the pill into a 5-line block. Pin nowrap + ellipsis instead. */
  white-space: nowrap;
}

.date-context-range {
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.date-context-label-medium,
.date-context-label-short {
  display: none;
}

.date-context-timezone {
  color: #60748f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.date-context-separator {
  color: #8ea0b6;
  font-size: 0.85rem;
}

.date-context-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  display: none;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
  width: min(460px, 78vw);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-panel);
  z-index: var(--layer-popover);
}

.date-context-menu[open] .date-context-panel {
  display: grid;
}

.date-context-menu[open] {
  z-index: var(--layer-popover);
}

.date-context-caret {
  margin-left: 6px;
  color: #60748f;
  font-size: 0.86rem;
}

.date-context-footer {
  grid-column: span 2;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* ── Styled dropdown (custom replacement for native <select>) ──────────
   The native <select> option list is OS-rendered and unstyleable (the
   dark system menu). This is a fully styled equivalent: a <details>
   trigger + an absolutely-positioned option menu. Used for the date
   range and comparison pickers in the date popover. */
.styled-select {
  position: relative;
  min-width: 0;
}

.styled-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.styled-select-trigger::-webkit-details-marker {
  display: none;
}

.styled-select-trigger:hover {
  border-color: rgba(133, 187, 218, 0.55);
}

.styled-select[open] .styled-select-trigger {
  border-color: rgba(133, 187, 218, 0.7);
  box-shadow: 0 0 0 3px rgba(133, 187, 218, 0.16);
}

.styled-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.styled-select-caret {
  flex: 0 0 auto;
  color: #60748f;
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.styled-select[open] .styled-select-caret {
  transform: rotate(180deg);
}

.styled-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 264px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.99);
  box-shadow: var(--shadow-panel);
  z-index: var(--layer-popover);
}

.styled-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.styled-select-option:hover {
  background: rgba(133, 187, 218, 0.14);
}

.styled-select-option.is-selected {
  background: rgba(133, 187, 218, 0.18);
  font-weight: 700;
}

.styled-select-check {
  flex: 0 0 auto;
  color: var(--brand-deep, #1f2a44);
  font-size: 0.8rem;
}

.styled-select-wrap {
  position: relative;
}

/* Clickable status chip (warning tone → navigates to Health & Risks) */
button.header-status-chip {
  cursor: pointer;
  border: 1px solid rgba(185, 133, 48, 0.28);
  font: inherit;
  text-align: left;
}
button.header-status-chip:hover {
  filter: brightness(0.96);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Provider icons inside channel tree leaves */
.channel-tree-leaf-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}
.channel-tree-leaf.is-selected .channel-tree-leaf-icon {
  opacity: 1;
}

#refresh-data-button {
  width: 36px;
  height: 36px;
  font-size: 1.05rem;
  border-radius: 999px;
  background: rgba(133, 187, 218, 0.18);
  border-color: rgba(133, 187, 218, 0.38);
  color: var(--brand-navy);
}

.icon-button.is-spinning {
  animation: sync-spin 0.9s linear infinite;
}

.icon-button.is-success {
  color: var(--positive);
}

.icon-button.is-error {
  color: var(--negative);
}

@keyframes sync-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.control-label {
  color: var(--ink-soft);
  white-space: nowrap;
}

.group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.group-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.group-tab.active {
  background: rgba(133, 187, 218, 0.1);
  border-color: rgba(133, 187, 218, 0.18);
  box-shadow: inset 3px 0 0 rgba(94, 159, 196, 0.9);
  color: var(--ink);
}

.group-tab:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.panel {
  min-width: 0;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(217, 226, 239, 0.88);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-panel);
}

.filter-bar {
  grid-column: span 12;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(217, 226, 239, 0.88);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-panel);
  font-size: 13px;
}

.filter-bar-group {
  display: inline-flex;
  border: 1px solid rgba(217, 226, 239, 0.88);
  border-radius: 8px;
  overflow: hidden;
}

.filter-bar-segment {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: inherit;
  font-weight: 400;
}

.filter-bar-segment + .filter-bar-segment {
  border-left: 1px solid rgba(217, 226, 239, 0.88);
}

.filter-bar-segment:hover {
  background: rgba(217, 226, 239, 0.35);
}

.filter-bar-active {
  font-weight: 700;
  background: rgba(217, 226, 239, 0.55);
}

.filter-bar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted, #5b6b85);
  display: block;
  margin-bottom: 2px;
}

.filter-bar-select {
  appearance: auto;
  background: transparent;
  border: 1px solid rgba(217, 226, 239, 0.88);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
  max-width: 180px;
}

.filter-bar-compare {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Portfolio sales-channel drill-in rows. Hover/focus reveal the row is
   clickable; the chevron slides right as a "go" cue. */
.portfolio-channel-row {
  transition: background var(--transition-fast);
}
.portfolio-channel-row:hover,
.portfolio-channel-row:focus-visible {
  background: rgba(46, 110, 178, 0.06);
  outline: none;
}
.portfolio-channel-chevron {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.portfolio-channel-row:hover .portfolio-channel-chevron,
.portfolio-channel-row:focus-visible .portfolio-channel-chevron {
  opacity: 1;
  transform: translateX(0);
}

.filter-bar-range {
  margin-left: auto;
  color: var(--color-muted, #5b6b85);
}

/* Inline filter group: label + control side-by-side (brand select, FC toggle). */
.filter-bar-inline-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filter-bar-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted, #5b6b85);
  white-space: nowrap;
}

.filter-bar-select {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(217, 226, 239, 0.88);
  border-radius: 6px;
  padding: 4px 24px 4px 8px;
  font-size: 13px;
  color: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6b85' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  max-width: 160px;
}

.filter-bar-select:hover {
  border-color: rgba(46, 110, 178, 0.4);
}

.span-full {
  grid-column: span 12;
}

/* Automation page zone divider — turns the flat ten-widget ads-engine stack
   into a legible four-step loop (Configure → Review → Discover & Build →
   Manage). Numbered badge + title + one-line "what you do here". */
.ads-zone-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}
/* The first zone sits flush under the page chrome — no top rule/extra space. */
.ads-zone-header:first-of-type {
  padding-top: 2px;
  margin-top: 0;
  border-top: 0;
}
.ads-zone-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.ads-zone-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ads-zone-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.ads-zone-sub {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.span-two-thirds {
  grid-column: span 8;
}

.span-one-third {
  grid-column: span 4;
}

.span-half {
  grid-column: span 6;
}

.span-quarter {
  grid-column: span 3;
}

.panel-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-head h3 {
  margin: 4px 0 0;
  font-size: 1.28rem;
  line-height: 1.1;
}

.panel-head p,
.panel-note,
.summary-text,
.insight-list li,
.table-note,
.detail-note,
.snapshot-note {
  color: var(--ink-muted);
}

.panel-head p,
.panel-note,
.summary-text,
.table-note,
.detail-note,
.snapshot-note {
  margin: 0;
  line-height: 1.5;
  font-size: 0.94rem;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  #widget-restock-forecast-by-sku .panel-head {
    flex-wrap: wrap;
  }

  #widget-restock-forecast-by-sku .panel-head-text {
    flex: 1 1 200px;
    min-width: 0;
  }

  #widget-restock-forecast-by-sku .panel-actions {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  #widget-restock-forecast-by-sku .panel-actions > div {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

.panel-inline-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.panel-inline-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 6px 0 0;
}

.panel-inline-control span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.panel-select {
  min-width: 126px;
  height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}

.panel-collapse-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

.panel-content {
  display: block;
}

.panel.collapsed .panel-content,
.panel.collapsed .section-divider,
.panel.collapsed .link-button {
  display: none;
}

.operator-priority-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.operator-priority-panel {
  min-height: 100%;
}

.operator-priority-panel .panel-head {
  margin-bottom: 12px;
}

.operator-priority-panel h3 {
  font-size: 1.06rem;
  line-height: 1.2;
}

.operator-priority-panel-state {
  background:
    linear-gradient(180deg, rgba(133, 187, 218, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.operator-priority-panel-next {
  background:
    linear-gradient(180deg, rgba(45, 156, 103, 0.05) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.operator-priority-copy {
  display: grid;
  gap: 8px;
}

.operator-priority-copy strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.3;
}

.operator-priority-copy p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.5;
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-navy);
  font-weight: 700;
}

.inline-link-button,
.link-button,
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-navy);
  font-size: inherit;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.inline-link-button:hover,
.link-button:hover,
.btn-link:hover {
  color: var(--navy);
}

.inline-link-button:focus-visible,
.link-button:focus-visible,
.btn-link:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   CANONICAL BUTTON SYSTEM — the target standard for all buttons.
   Rules:
   - NO gradients on buttons, ever.
   - NO browser-default button/select/input styling.
   - Always type="button" on non-submit buttons.
   - At most ONE .btn-primary per panel.
   - No full-width buttons except in modal/drawer footers.
   - .btn-sm for table rows and drawer footers.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  border-radius: var(--radius-sm); /* 8px */
  padding: 8px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), opacity var(--transition-fast);
}

.btn:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primary — solid navy fill. At most ONE per panel. */
.btn-primary {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--brand-navy-hover);
  border-color: var(--brand-navy-hover);
}

/* Secondary — outlined navy on surface. */
.btn-secondary {
  background: var(--surface);
  border-color: var(--brand-navy);
  color: var(--brand-navy);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--brand-soft);
}

/* Ghost — transparent, no border. */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--brand-navy);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--brand-soft);
}

/* Danger — outlined negative. Use .btn-danger-solid ONLY for confirm steps. */
.btn-danger {
  background: var(--surface);
  border-color: var(--negative);
  color: var(--negative);
}

.btn-danger:hover:not(:disabled) {
  background: var(--negative-soft);
}

.btn-danger-solid {
  background: var(--negative);
  border-color: var(--negative);
  color: #ffffff;
}

.btn-danger-solid:hover:not(:disabled) {
  opacity: 0.9;
}

/* Small variant — table rows and drawer footers. */
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

/* Segmented pill — mutually-exclusive option toggle (e.g. metric/view switches). */
.seg {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  gap: 4px;
  padding: 3px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.seg-btn {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-fast);
}

.seg::-webkit-scrollbar {
  height: 6px;
}

.seg::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}

.seg-btn.is-active {
  background: var(--navy);
  color: #fff;
}

.seg-btn:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

/* Filter chip — MULTI-select toggle (e.g. Priority/Status filter rows).
   Distinct from .seg (which is mutually-exclusive): chips use aria-pressed,
   several can be active at once, and they sit inline as a wrapping row. */
.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink-muted);
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.chip-toggle:hover {
  border-color: var(--brand-navy);
  color: var(--ink);
}

.chip-toggle.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.chip-toggle:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

/* Count badge inside an active chip — inverse fill so it reads on the navy. */
.chip-toggle .chip-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.chip-toggle:not(.is-active) .chip-count {
  background: var(--line);
  color: var(--ink-muted);
}

/* ============================================================
   CANONICAL FORM CONTROLS — inputs, selects, textareas.
   No browser-default styling; consistent radius/border/focus ring.
   ============================================================ */

.field-input,
.field-select,
.field-textarea {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.field-input:focus-visible,
.field-select:focus-visible,
.field-textarea:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 1px;
}

.field-input:disabled,
.field-select:disabled,
.field-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--ink-soft);
}

/* Select — custom chevron so it never looks browser-default. */
.field-select {
  padding-right: 30px;
  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='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2362738d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}

.field-textarea {
  min-height: 72px;
  resize: vertical;
}

.panel-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line-soft);
}

.section-tabs-tab {
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.section-tabs-tab.is-active {
  box-shadow: 0 1px 0 rgba(18, 35, 63, 0.06), 0 6px 14px rgba(46, 110, 178, 0.14);
}

.section-tabs-tab:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

.data-table-toolbar-button,
.data-table-page-button,
.data-table-filter-trigger {
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.data-table-toolbar-button:hover,
.data-table-page-button:hover,
.data-table-filter-trigger:hover {
  border-color: var(--brand-navy) !important;
  color: var(--brand-navy) !important;
}

.data-table-row.is-clickable:hover {
  background: linear-gradient(180deg, rgba(133, 187, 218, 0.06), rgba(133, 187, 218, 0.03));
}

.data-table-row.is-selected {
  background: rgba(230, 242, 248, 0.64);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(var(--metric-columns, 4), minmax(0, 1fr));
  gap: 14px;
}

.metric-grid.is-compact {
  gap: 10px;
}

.overview-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  min-width: 0;
}

.overview-kpi-label-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.overview-kpi-label-row > p {
  min-width: 0;
}

.overview-kpi-readiness-reason {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.35;
}

.metric-card {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(217, 226, 239, 0.8);
  background: rgba(247, 249, 252, 0.72);
}

.metric-grid.is-compact .metric-card {
  min-height: 72px;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.metric-card strong,
.headline-number {
  font-family: var(--font-heading);
  letter-spacing: -0.04em;
}

.metric-card strong {
  font-size: 1.46rem;
  line-height: 1.05;
}

.metric-delta {
  font-size: 0.82rem;
  font-weight: 700;
}

.tone-positive .metric-delta,
.positive {
  color: var(--positive);
}

.tone-negative .metric-delta,
.negative {
  color: var(--negative);
}

.tone-warning .metric-delta,
.warning {
  color: var(--warning);
}

.compact-grid {
  display: grid;
  gap: 10px;
}

.compact-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-card {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.compact-card strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 1.22rem;
  font-family: var(--font-heading);
}

.compact-card p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.5;
}

.headline-stat {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.headline-stat-grid .headline-stat {
  min-height: 0;
}

.headline-stat strong {
  font-size: 1.5rem;
  font-family: var(--font-heading);
}

.chart-shell {
  display: grid;
  gap: 10px;
}

.chart-frame {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(247, 249, 252, 0.8) 0%, rgba(255, 255, 255, 0.88) 100%);
  padding: 12px;
}

.chart-frame svg {
  display: block;
  width: 100%;
  height: auto;
}

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.legend-item {
  gap: 8px;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.chart-bar,
.chart-point {
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.chart-bar:hover,
.chart-point:hover {
  opacity: 0.82;
}

.split-body,
.split-body-reverse,
.chart-stack,
.stacked-stat-list,
.snapshot-list,
.insight-list,
.status-stack,
.notification-list,
.inventory-watch,
.breakdown-list,
.product-list,
.recommendation-list {
  display: grid;
  gap: 10px;
}

.split-body {
  grid-template-columns: minmax(0, 1fr) 220px;
}

.chart-stack {
  gap: 12px;
}

.split-body-reverse {
  grid-template-columns: 220px minmax(0, 1fr);
}

.snapshot-list,
.breakdown-list {
  gap: 8px;
}

.snapshot-row,
.breakdown-row,
.list-row,
.product-row,
.notification-row,
.inventory-row,
.status-pill-row {
  display: grid;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.snapshot-row strong,
.breakdown-row strong,
.list-row strong,
.product-row strong {
  font-size: 0.92rem;
}

.breakdown-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.list-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.badge-positive {
  background: var(--positive-soft);
  color: var(--positive);
}

.badge-negative {
  background: var(--negative-soft);
  color: var(--negative);
}

.badge-critical {
  background: var(--negative-soft);
  color: var(--negative);
}

.badge-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-neutral {
  background: var(--surface-muted);
  color: var(--ink-muted);
}

/* `.badge-info` (e.g. the "phrase" keyword-match badge in TopKeywords) was
   emitted in markup but had no rule — it fell back to a bare grey .badge.
   Same class of bug as the auth status-banner color (class referenced, no
   matching CSS). Give it a distinct informational blue. */
.badge-info {
  background: rgba(133, 187, 218, 0.18);
  color: #2c6688;
}

/* Owner/role chip in the team-members tables (IIFE `_renderTeamMembers` emits
   `status-badge status-positive`, the React twin self-styles inline). The
   class pair had no CSS rule, so the IIFE chip rendered as plain text. */
.status-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface-muted);
  color: var(--ink-muted);
}

.status-badge.status-positive {
  background: var(--positive-soft);
  color: var(--positive);
}

/* SP-API connect page sync rows (connect.tsx emits `stream-row` / `stream-status`
   with no matching CSS, so the per-stream status chips rendered unstyled). */
.stream-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.stream-status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--surface-muted);
  color: var(--ink-muted);
  text-transform: capitalize;
}

.stream-status.ok,
.stream-status.complete,
.stream-status.completed,
.stream-status.synced {
  background: var(--positive-soft);
  color: var(--positive);
}

.stream-status.error,
.stream-status.failed {
  background: var(--negative-soft);
  color: var(--negative);
}

.stream-status.pending,
.stream-status.running,
.stream-status.in_progress {
  background: var(--warning-soft);
  color: var(--warning);
}

.status-stack {
  gap: 12px;
}

.status-pill-row {
  grid-template-columns: 84px minmax(0, 1fr) auto;
  min-height: 62px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.status-count {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #17314d;
  font-weight: 800;
  font-family: var(--font-heading);
}

.status-body {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--ink);
}

.status-link {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--brand-navy);
  font-weight: 700;
}

.status-green .status-count {
  background: #bfe8d2;
}

.status-orange .status-count {
  background: #f7d5b6;
}

.status-red .status-count {
  background: #f1c7c9;
}

.status-green {
  background: linear-gradient(90deg, rgba(31, 177, 106, 0.1), rgba(31, 177, 106, 0.04));
}

.status-orange {
  background: linear-gradient(90deg, rgba(240, 138, 70, 0.12), rgba(240, 138, 70, 0.04));
}

.status-red {
  background: linear-gradient(90deg, rgba(207, 79, 81, 0.12), rgba(207, 79, 81, 0.04));
}

.donut-summary {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.donut-chart {
  width: 180px;
  height: 180px;
}

.donut-chart svg {
  width: 100%;
  height: 100%;
}

.donut-meta {
  display: grid;
  gap: 6px;
  width: 100%;
}

.donut-meta .list-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.product-list {
  gap: 10px;
}

.product-row {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.product-thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(63, 143, 229, 0.16);
  background:
    linear-gradient(135deg, rgba(63, 143, 229, 0.18) 0%, rgba(240, 168, 93, 0.22) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-navy);
  font-weight: 800;
  font-family: var(--font-heading);
}

.product-meta {
  min-width: 0;
}

.product-meta p,
.table-note,
.compact-note {
  margin: 4px 0 0;
}

.product-meta p,
.compact-note {
  color: var(--ink-muted);
}

.product-side {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.detail-table-wrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  /* Scroll horizontally instead of clipping/squishing when the table is wider
     than its container (e.g. a span-one-third subpage block). Keeps the
     rounded-corner vertical clip. Covers the IIFE detail/compact/decision
     tables that render server-driven blocks. */
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
}

.decision-table-wrap {
  display: grid;
  gap: 0;
}

.decision-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.decision-table-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.decision-table-summary strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.decision-table-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.decision-filter-group {
  min-width: 164px;
  margin: 0;
}

.decision-table-note {
  padding: 12px 12px 0;
}

.decision-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(133, 187, 218, 0.18);
  color: var(--brand-navy);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.decision-row {
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

/* Keep decision-table rows compact — full text is in the row tooltip */
.decision-table td.table-cell-text {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.decision-row td:first-child,
.decision-row th:first-child {
  background: transparent !important;
}

.decision-row-negative {
  box-shadow: inset 3px 0 0 rgba(215, 92, 88, 0.55);
}

.decision-row-warning {
  box-shadow: inset 3px 0 0 rgba(185, 133, 48, 0.55);
}

.decision-row-neutral {
  box-shadow: inset 3px 0 0 rgba(124, 138, 160, 0.42);
}

.decision-row-positive {
  box-shadow: inset 3px 0 0 rgba(45, 156, 103, 0.45);
}

.detail-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.detail-table thead {
  background: #eef4fb;
}

.detail-table th,
.detail-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.detail-table th {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(237, 244, 251, 0.88);
}

.detail-table .sticky-col {
  position: sticky;
  background: #ffffff;
  z-index: 1;
}
.detail-table thead .sticky-col {
  background: rgba(237, 244, 251, 0.96);
  z-index: 2;
}
.detail-table .sticky-col-img {
  left: 0;
}
.detail-table .sticky-col-title {
  left: 44px;
  border-right: 1px solid var(--line);
}
.detail-table tbody tr:nth-child(even) .sticky-col {
  background: #f6f9fd;
}

.detail-table tbody tr:last-child td {
  border-bottom: 0;
}

.detail-table td {
  color: var(--ink);
  line-height: 1.5;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.table-cell-numeric {
  text-align: right !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
}

.table-cell-text {
  text-align: left;
}

.metric-delta-cell {
  display: inline-grid;
  gap: 2px;
}

.metric-delta-cell strong {
  font-size: 0.9rem;
}

.metric-delta-cell span {
  font-size: 0.72rem;
  font-weight: 700;
}

/* Provider Health Workspace cell — stacks the customer workspace name
   (primary) with the seller/store account name (secondary chip). Pairs
   with formatValue("workspaceWithAccount") in app.js. */
.workspace-stack-cell {
  display: inline-grid;
  gap: 2px;
}

.workspace-stack-cell strong {
  font-size: 0.9rem;
}

.workspace-stack-cell .workspace-stack-chip {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted, #6b7280);
}

.detail-table tbody tr {
  transition: background var(--transition-fast);
}

.detail-table tbody tr:hover {
  background: rgba(133, 187, 218, 0.08);
}

.detail-table td:nth-child(even),
.detail-table th:nth-child(even) {
  background-image: linear-gradient(180deg, rgba(133, 187, 218, 0.03), rgba(133, 187, 218, 0.03));
}

.campaign-snapshot-table th:nth-child(1),
.campaign-snapshot-table td:nth-child(1) {
  width: 42%;
}

.campaign-snapshot-table th:nth-child(2),
.campaign-snapshot-table td:nth-child(2) {
  width: 10%;
}

.campaign-snapshot-table th:nth-child(3),
.campaign-snapshot-table td:nth-child(3),
.campaign-snapshot-table th:nth-child(4),
.campaign-snapshot-table td:nth-child(4),
.campaign-snapshot-table th:nth-child(5),
.campaign-snapshot-table td:nth-child(5) {
  width: 16%;
}

.campaign-snapshot-table td:nth-child(1),
.campaign-snapshot-table td:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-table-wrap {
  padding-top: 4px;
}

.summary-table td .positive,
.summary-table td .negative,
.action-table td .positive,
.action-table td .negative,
.detail-table td .positive,
.detail-table td .negative {
  font-weight: 700;
}

.table-caption {
  margin-bottom: 12px;
  color: var(--ink-soft);
}

.insight-list {
  margin: 0;
  padding-left: 18px;
}

.insight-list li {
  line-height: 1.55;
}

.recommendation-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.recommendation-list li {
  line-height: 1.55;
  color: var(--ink-muted);
}

.recommendation-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.recommendation-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(133, 187, 218, 0.18);
  color: var(--brand-navy);
  font-size: 0.78rem;
  font-weight: 800;
}

.recommendation-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.recommendation-copy strong {
  color: var(--ink);
}

.recommendation-impact {
  margin: 0;
  color: var(--ink);
  font-size: 0.81rem;
  font-weight: 600;
}

.recommendation-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recommendation-link {
  align-self: start;
}

.recommendation-copy .badge {
  justify-self: start;
}

.recommendation-copy p {
  margin: 0;
  color: var(--ink-muted);
}

.recommendation-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(133, 187, 218, 0.42);
  background: rgba(133, 187, 218, 0.16);
  color: var(--brand-navy);
  font-weight: 700;
  white-space: nowrap;
}

.insight-card-body,
.alert-card {
  display: grid;
  gap: 12px;
}

.insight-delta {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-navy);
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.alert-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.alert-card.severity-high {
  background: var(--negative-soft);
  border-color: rgba(215, 92, 88, 0.22);
}

.alert-card.severity-medium {
  background: var(--warning-soft);
  border-color: rgba(185, 133, 48, 0.22);
}

.alert-card.severity-low {
  background: var(--brand-soft);
  border-color: rgba(63, 143, 229, 0.18);
}

.action-table-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 0;
}

.action-table-toolbar-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.action-selection-state {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.action-selection-state strong {
  color: var(--ink);
}

.action-table-toolbar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.action-submit-button[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
}

.action-cell-input {
  width: 100%;
  min-width: 88px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
}

.action-cell-input::placeholder {
  color: var(--ink-soft);
}

.action-row {
  cursor: pointer;
}

.action-row.is-seeded-demo {
  background: rgba(242, 188, 71, 0.08);
}

.action-row td {
  vertical-align: top;
}

.workflow-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.workflow-badge.stage-connect {
  background: rgba(133, 187, 218, 0.16);
  border-color: rgba(133, 187, 218, 0.34);
  color: #24557d;
}

.workflow-badge.stage-discover {
  background: rgba(242, 188, 71, 0.18);
  border-color: rgba(242, 188, 71, 0.35);
  color: #8a6110;
}

.workflow-badge.stage-owner,
.workflow-badge.stage-team {
  background: rgba(226, 106, 97, 0.14);
  border-color: rgba(226, 106, 97, 0.28);
  color: #9b3832;
}

.workflow-badge.stage-sync {
  background: rgba(201, 104, 191, 0.14);
  border-color: rgba(201, 104, 191, 0.3);
  color: #8a2a80;
}

.workflow-badge.stage-operational {
  background: rgba(75, 180, 126, 0.15);
  border-color: rgba(75, 180, 126, 0.28);
  color: #1d6b45;
}

.workflow-badge.stage-default {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--ink);
}

.origin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.origin-badge.origin-live {
  background: rgba(75, 180, 126, 0.12);
  border-color: rgba(75, 180, 126, 0.24);
  color: #1d6b45;
}

.origin-badge.origin-seeded {
  background: rgba(242, 188, 71, 0.14);
  border-color: rgba(242, 188, 71, 0.3);
  color: #8a6110;
}

.next-step-copy {
  min-width: 180px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.section-divider {
  height: 1px;
  margin: 2px 0;
  background: var(--line);
}

.empty-state {
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  color: var(--ink-muted);
  background: var(--surface-soft);
}

@media (max-width: 1380px) {
  .filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filter-toggle-group {
    grid-column: span 3;
    justify-content: flex-start;
    min-width: 0;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recommendation-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .recommendation-link {
    grid-column: 2;
    justify-self: start;
  }
  /* Header at 1181–1380px is governed by the compact base grid
     (auto / minmax(170px,1fr) / auto) — no squeeze override needed now
     that the date pill and sync chip are compact. */
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 214px minmax(0, 1fr);
  }

  .action-table-toolbar {
    flex-direction: column;
  }

  .action-table-toolbar-buttons {
    justify-content: flex-start;
  }

  .workspace-header {
    grid-template-columns: minmax(130px, 1fr) auto;
  }

  .workspace-controls {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .date-context-label-long {
    display: none;
  }

  .date-context-label-medium {
    display: inline;
  }

  .channel-tree-trigger-label-full {
    display: none;
  }

  .channel-tree-trigger-label-compact {
    display: inline;
  }

  .meta-chip {
    padding-left: 8px;
    padding-right: 8px;
  }

  .header-action-row {
    gap: 6px;
  }

  .operator-priority-strip {
    grid-template-columns: 1fr;
  }

  .integration-row {
    grid-template-columns: 1fr;
  }

  .integration-row-actions {
    justify-content: flex-start;
  }

  .integration-connection-row {
    grid-template-columns: 1fr;
  }

  .integration-account-head,
  .integration-health-hero {
    flex-direction: column;
  }

  .integration-account-facts {
    grid-template-columns: 1fr;
  }

  .integration-connection-actions {
    justify-content: flex-start;
  }

  .workspace-controls > :last-child {
    grid-column: span 1;
  }

  .span-two-thirds,
  .span-one-third,
  .span-half {
    grid-column: span 12;
  }

  .split-body,
  .split-body-reverse {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  body {
    padding: 0;
  }

  .app-shell {
    grid-template-columns: 1fr;
    border-radius: 0;
    min-height: 100vh;
    height: auto;
  }

  .app-shell.sidebar-is-collapsed {
    grid-template-columns: 1fr;
  }

  /* Sidebar becomes an off-canvas drawer, hidden until the hamburger
     toggles `.mobile-nav-open` on `.app-shell`. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 286px;
    max-width: 86vw;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease;
    z-index: 400;
  }

  .app-shell.mobile-nav-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: 0 18px 48px rgba(31, 24, 12, 0.32);
  }

  .app-shell.mobile-nav-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(31, 24, 12, 0.42);
    z-index: 390;
  }

  .mobile-nav-toggle {
    display: inline-flex;
  }

  .sidebar-brand-toggle {
    display: none;
  }

  .workspace {
    padding: 16px;
  }

  .workspace-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .workspace-controls {
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: min(58vw, 440px);
    max-width: 58vw;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .workspace-controls > .control-chip {
    flex: 0 0 auto;
  }

  .workspace-controls .channel-select {
    min-width: 112px;
  }

  .workspace-controls::-webkit-scrollbar {
    display: none;
  }

  .header-action-row {
    width: max-content;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .header-onboarding-label {
    display: none;
  }

  .header-onboarding-button {
    width: 36px;
    padding: 0;
  }

  .date-context-label-medium {
    display: none;
  }

  .date-context-label-short {
    display: inline;
  }

  .header-control-sep {
    display: none;
  }

  .workspace-header h2 {
    font-size: 1.16rem;
  }

  .mobile-nav-toggle {
    width: 34px;
    height: 34px;
    margin-right: 0;
    border-radius: 999px;
  }

  .sidebar-nav {
    overflow: visible;
    padding-right: 0;
  }

  .integration-modal-overlay {
    padding: 14px;
  }

  .integration-modal-card {
    padding: 18px;
  }

  .nav-popout-portal {
    position: static;
    width: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    margin-top: 8px;
  }

  .filter-bar,
  .metric-grid,
  .compact-grid.two,
  .compact-grid.three {
    grid-template-columns: 1fr;
  }

  .overview-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .date-context-panel {
    grid-template-columns: 1fr;
  }

  .filter-toggle-group {
    grid-column: span 1;
    flex-wrap: wrap;
    min-width: 0;
  }

  .page-grid {
    gap: 12px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer > :first-child,
  .site-footer > :nth-child(2),
  .site-footer > :last-child {
    justify-self: center;
  }

  .status-pill-row,
  .snapshot-row,
  .product-row {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .status-count {
    min-height: 52px;
  }
}

/* Narrow screens use a deliberate two-level header: the title keeps a stable
   row and the controls become a single horizontal rail. This prevents the
   desktop two-column grid from squeezing labels into a second accidental
   line or letting the status controls overlap the page title. */
@media (max-width: 640px) {
  .workspace-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 6px 10px 8px;
  }

  .workspace-title-block,
  .workspace-controls {
    grid-column: 1;
    min-width: 0;
  }

  .workspace-title-row {
    min-height: 32px;
  }

  .workspace-header h2 {
    font-size: 1.08rem;
  }

  .workspace-controls {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .workspace-controls::-webkit-scrollbar {
    display: none;
  }

  .workspace-controls .meta-chip {
    min-height: 32px;
    flex: 0 0 auto;
    padding-inline: 8px;
  }

  /* The client tree is wider than its compact phone trigger. Anchor the
     popover to the viewport so right alignment cannot push most of the
     workspace list off-screen or make its rows impossible to activate. */
  .channel-tree-panel {
    position: fixed;
    top: calc(var(--workspace-header-h, 63px) + 6px);
    right: 12px;
    left: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - var(--workspace-header-h, 63px) - 18px);
    overscroll-behavior: contain;
  }

  .workspace-controls .header-action-row {
    flex: 0 0 auto;
    gap: 6px;
  }

  .workspace-controls .header-icon-button,
  .workspace-controls .mobile-nav-toggle {
    width: 32px;
    height: 32px;
  }

  .react-overview-grid .panel-head {
    flex-wrap: wrap;
  }

  .react-overview-grid .panel-head-text {
    flex: 1 1 200px;
    min-width: 0;
  }

  .react-overview-grid .panel-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
  }
}

/* At phone widths a two-column readiness row leaves too little room for even
   short KPI labels and details. Reflow before the content starts truncating. */
@media (max-width: 420px) {
  .overview-kpi-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Keep the shared channel trigger from consuming the space reserved for
     status, Settings, notifications, and page help. Its inner label already
     owns canonical ellipsis behavior, so constraining the chip preserves the
     full utility row without changing any destination or interaction. */
  #channel-chip {
    max-width: 124px;
  }
}

/* Keep every utility available without clipping on the narrowest supported
   phone width. The controls still remain one horizontal rail, but the icon
   targets and gaps compact just enough for the account switcher plus all four
   actions to fit at 320px. */
@media (max-width: 360px) {
  .workspace-controls {
    gap: 4px;
  }

  .workspace-controls .meta-chip {
    padding-inline: 5px;
  }

  .workspace-controls .channel-select {
    min-width: 104px;
  }

  .workspace-controls .header-action-row {
    gap: 4px;
  }

  .workspace-controls .header-icon-button {
    width: 30px;
    height: 30px;
  }
}

/* Review and connect page compatibility layer */

.main-panel {
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.96) 100%),
    radial-gradient(circle at top left, rgba(63, 143, 229, 0.05), transparent 28%);
}

/* Phase 1 A+ project workflow */

.aplus-project-library {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 16px;
}

.aplus-workspace-root {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.aplus-workspace-rail {
  position: sticky;
  top: clamp(63px, calc(var(--workspace-header-h, 63px) + 8px), 112px);
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 14px 18px 12px;
  border: 1px solid rgba(217, 226, 239, 0.88);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-panel);
  min-width: 0;
}

.aplus-workspace-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-bottom: 88px;
}

.aplus-masthead-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.aplus-masthead-title {
  flex: 1 1 auto;
  min-width: 0;
}

.aplus-masthead-title .aplus-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.aplus-card {
  padding: 20px;
  border: 1px solid rgba(217, 226, 239, 0.88);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-panel);
  min-width: 0;
}

.aplus-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.aplus-card-subhead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 10px;
}

.aplus-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.aplus-title {
  margin: 0;
  font-size: var(--text-display-sm, 1.5rem);
  font-family: var(--font-heading);
  color: var(--ink);
}

.aplus-title-sm {
  margin: 0;
  font-size: 1.15rem;
  font-family: var(--font-heading);
  color: var(--ink);
}

.aplus-copy,
.aplus-copy-sm,
.aplus-inline-note,
.aplus-table-subtle {
  color: var(--ink-muted);
  line-height: 1.6;
}

.aplus-copy {
  margin: 8px 0 0;
  font-size: 14px;
}

.aplus-copy-sm {
  font-size: 12px;
}

.aplus-inline-note,
.aplus-table-subtle {
  font-size: 12px;
}

.aplus-rail-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aplus-rail-badges,
.aplus-action-row,
.aplus-approver-list,
.aplus-module-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.aplus-rail-badges .badge,
.aplus-evidence-row .badge,
.aplus-approver-list .badge {
  max-width: 100%;
  height: auto !important;
  min-height: 20px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.aplus-rail-note {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}

.aplus-stage-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.aplus-stage-pill {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  min-height: 46px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.aplus-stage-pill > span {
  grid-row: 1 / span 2;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 11px;
}

.aplus-stage-pill small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.aplus-stage-pill.is-active {
  background: var(--brand-soft);
  color: var(--brand-navy);
  border-color: rgba(94, 159, 196, 0.32);
}

.aplus-stage-pill.is-complete > span {
  background: var(--positive-soft);
  color: var(--positive);
}

.aplus-stage-pill.is-locked {
  opacity: 0.68;
  cursor: not-allowed;
}

.aplus-stage-select {
  display: none;
}

.aplus-scope-grid,
.aplus-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.aplus-scope-grid {
  grid-template-columns: minmax(0, 1fr);
}

.aplus-stack,
.aplus-control-group,
.aplus-choice-stack,
.aplus-project-list,
.aplus-scope-list,
.aplus-comment-groups,
.aplus-bullet-list,
.aplus-module-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aplus-choice-card,
.aplus-project-list-row,
.aplus-scope-item,
.aplus-comment-group,
.aplus-approved-banner,
.aplus-bypass-box,
.aplus-validation-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.aplus-choice-card,
.aplus-inline-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.aplus-choice-card {
  padding: 10px 12px;
  cursor: pointer;
}

.aplus-choice-card:has(input:checked) {
  border-color: rgba(42, 111, 171, 0.55);
  background: rgba(42, 111, 171, 0.07);
}

.aplus-choice-card:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.58;
}

.aplus-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.aplus-choice-title,
.aplus-table-title,
.aplus-project-list-title,
.aplus-comment-group-title {
  color: var(--ink);
  font-weight: 700;
}

.aplus-choice-title,
.aplus-project-list-title {
  font-size: 14px;
}

.aplus-choice-copy {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.55;
}

.aplus-clamp-2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.aplus-project-list-row {
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

.aplus-project-list-row:hover {
  border-color: rgba(94, 159, 196, 0.32);
  background: rgba(133, 187, 218, 0.08);
}

.aplus-project-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.aplus-project-list-meta,
.aplus-project-list-subtle {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-muted);
}

.aplus-empty-state {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.aplus-empty-state .btn {
  margin-top: 12px;
}

.aplus-state-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.aplus-state-copy {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.aplus-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.aplus-field > span,
.aplus-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.aplus-field input,
.aplus-field select,
.aplus-field textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  box-sizing: border-box;
}

.aplus-field textarea {
  resize: vertical;
}

.aplus-table-wrap {
  overflow-x: auto;
}

.aplus-evidence-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 12px;
}

.aplus-evidence-table th,
.aplus-evidence-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.aplus-evidence-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.aplus-scope-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 12px 14px;
}

.aplus-scope-item.is-review {
  border-color: rgba(202, 141, 38, 0.42);
  background: linear-gradient(135deg, rgba(255, 248, 232, 0.82), var(--surface-soft));
}

.aplus-scope-item-main,
.aplus-scope-identity > div {
  min-width: 0;
}

.aplus-scope-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.aplus-title-expand {
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  color: var(--brand);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.aplus-title-expand:hover,
.aplus-title-expand:focus-visible {
  text-decoration: underline;
}

.aplus-scope-reason {
  margin-top: 8px;
  max-width: 78ch;
}

.aplus-scope-decision {
  min-width: 0;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.aplus-scope-decision legend {
  padding: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.aplus-scope-decision-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.aplus-scope-decision-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--surface);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.aplus-scope-decision-options label:has(input:checked) {
  border-color: rgba(42, 111, 171, 0.55);
  background: rgba(42, 111, 171, 0.08);
}

.aplus-scope-decision-options input {
  margin: 0;
}

.aplus-scope-keep-reason {
  max-width: 680px;
  margin-top: 10px;
}

.aplus-scope-row-actions {
  display: flex;
  justify-content: flex-end;
}

.aplus-scope-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 650;
}

.aplus-scope-summary span + span::before {
  content: "·";
  margin-right: 16px;
  color: var(--line-strong, var(--line));
}

.aplus-intake-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  align-items: start;
}

.aplus-evidence-readiness {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(202, 141, 38, 0.35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 248, 232, 0.95), rgba(255, 255, 255, 0.98));
}

.aplus-evidence-readiness.is-ready {
  border-color: rgba(38, 139, 94, 0.3);
  background: linear-gradient(135deg, rgba(237, 250, 243, 0.95), rgba(255, 255, 255, 0.98));
}

.aplus-evidence-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.aplus-readiness-issues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  margin: 12px 0 0;
  padding: 12px 12px 12px 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

.aplus-evidence-disclosure {
  margin-top: 12px;
  border-top: 1px solid rgba(217, 226, 239, 0.82);
}

.aplus-evidence-disclosure > summary,
.aplus-evidence-row > summary {
  cursor: pointer;
  color: var(--brand-navy);
  font-size: 12px;
  font-weight: 700;
}

.aplus-evidence-disclosure > summary {
  padding-top: 12px;
}

.aplus-evidence-rows {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.aplus-evidence-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
}

.aplus-evidence-row > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  list-style-position: inside;
}

.aplus-evidence-identity {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.aplus-evidence-identity > span {
  color: var(--ink-muted);
  font-weight: 500;
}

.aplus-evidence-row-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.aplus-evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0 12px 12px;
}

.aplus-evidence-grid > div {
  min-width: 0;
  padding: 10px;
  border-radius: 9px;
  background: var(--surface-soft);
}

.aplus-evidence-grid dt {
  margin-bottom: 6px;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aplus-evidence-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.aplus-evidence-grid .aplus-evidence-grid-wide {
  grid-column: span 4;
}

.aplus-bypass-box,
.aplus-validation-list,
.aplus-approval-box,
.aplus-inline-alert {
  margin-top: 14px;
  padding: 14px;
}

.aplus-bypass-box,
.aplus-approval-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aplus-inline-alert {
  border: 1px solid var(--warning);
  border-radius: 12px;
  background: var(--warning-soft);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
}

.aplus-inline-alert.is-positive {
  border-color: var(--positive);
  background: var(--positive-soft);
}

.aplus-validation-list {
  border: 1px solid var(--warning);
  border-radius: 12px;
  background: var(--warning-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aplus-validation-item {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
}

.aplus-affected-asins,
.aplus-warning-meta {
  display: block;
  margin-top: 5px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
}

.aplus-recovery-actions,
.aplus-member-resolution {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.aplus-member-resolution > span:not(.status-badge) {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

.aplus-drawer-availability {
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(42, 111, 171, 0.24);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(241, 247, 252, 0.96), rgba(255, 255, 255, 0.98));
}

.aplus-drawer-availability.is-ready_with_warnings {
  border-color: rgba(202, 141, 38, 0.4);
  background: linear-gradient(135deg, rgba(255, 248, 232, 0.96), rgba(255, 255, 255, 0.98));
}

.aplus-drawer-availability.is-blocked {
  border-color: rgba(184, 70, 55, 0.4);
  background: rgba(255, 248, 246, 0.98);
}

.aplus-drawer-availability-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.aplus-drawer-availability-item {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-left: 3px solid var(--negative);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

.aplus-drawer-availability-item strong {
  color: var(--ink);
  font-size: 12px;
}

.aplus-drawer-availability-item.is-warning {
  border-left-color: var(--warning);
}

.aplus-module-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

.aplus-module-card.is-excluded {
  opacity: 0.7;
}

.aplus-module-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(90deg, var(--surface-soft), var(--surface));
}

.aplus-module-summary::-webkit-details-marker {
  display: none;
}

.aplus-module-summary:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: -3px;
}

.aplus-module-summary-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--ink-muted);
  font-size: 11px;
  text-align: right;
}

.aplus-module-chevron {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-muted);
  font-size: 17px;
  transition: transform 160ms ease;
}

.aplus-module-card[open] .aplus-module-chevron {
  transform: rotate(180deg);
}

.aplus-module-content {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid var(--line-soft);
}

.aplus-module-head-left {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.aplus-module-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.aplus-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.aplus-brief-overview,
.aplus-module-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.aplus-module-review-data,
.aplus-module-advanced {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.aplus-module-review-data > summary,
.aplus-module-advanced > summary,
.aplus-structured-more > summary {
  cursor: pointer;
  color: var(--brand-navy);
  font-size: 12px;
  font-weight: 700;
}

.aplus-module-review-data > summary,
.aplus-module-advanced > summary {
  padding: 11px 12px;
}

.aplus-module-review-data[open] > summary,
.aplus-module-advanced[open] > summary {
  border-bottom: 1px solid var(--line);
}

.aplus-module-review-grid,
.aplus-module-advanced > .aplus-module-grid {
  padding: 12px;
}

.aplus-module-advanced > .aplus-module-actions {
  padding: 0 12px 12px;
}

.aplus-structured-list {
  display: grid;
  gap: 7px;
}

.aplus-structured-list article,
.aplus-empty-value {
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.aplus-structured-value {
  display: grid;
  gap: 6px;
  margin: 0;
}

.aplus-structured-value > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.38fr) minmax(0, 1fr);
  gap: 9px;
}

.aplus-structured-value dt {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.aplus-structured-value dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.aplus-structured-values {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.aplus-structured-more {
  margin-top: 7px;
}

.aplus-structured-more > summary {
  color: var(--ink-muted);
  font-size: 11px;
}

.aplus-structured-more > .aplus-structured-value,
.aplus-structured-more > .aplus-structured-values {
  margin-top: 7px;
}

.aplus-structured-note {
  margin: 0;
  padding: 0 12px 12px;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

.aplus-field-span-2 {
  grid-column: span 2;
}

.aplus-comment-group {
  padding: 14px;
}

.aplus-comment-row + .aplus-comment-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.aplus-comment-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.aplus-comment-action {
  display: inline-flex;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.aplus-approved-banner {
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.aplus-action-footer {
  position: sticky;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 13px 84px 13px 16px;
  border: 1px solid rgba(42, 111, 171, 0.24);
  border-radius: 14px;
  background: rgba(252, 254, 255, 0.97);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 36px rgba(29, 54, 83, 0.16);
}

.aplus-action-footer.has-error {
  border-color: rgba(184, 70, 55, 0.4);
  background: rgba(255, 248, 246, 0.98);
}

.aplus-action-footer-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.aplus-action-footer-copy strong {
  color: var(--ink);
  font-size: 13px;
}

.aplus-action-footer-copy span {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.aplus-action-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.aplus-action-footer-actions .btn {
  min-height: 38px;
  white-space: normal;
  text-align: center;
}

.aplus-concept-unlock,
.aplus-concept-loading,
.aplus-concept-cost,
.aplus-concept-lineage,
.aplus-concept-module-actions,
.aplus-concept-ready-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.aplus-concept-unlock {
  background:
    radial-gradient(circle at 88% 18%, rgba(90, 159, 196, 0.2), transparent 28%),
    linear-gradient(135deg, #f6fbff 0%, #ffffff 62%);
}

.aplus-concept-loading {
  min-height: 120px;
  justify-content: flex-start;
}

.aplus-concept-blocker {
  padding: 20px;
  border-left: 4px solid var(--negative);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 244, 242, 0.98), rgba(255, 255, 255, 0.98));
}

.aplus-concept-direction-grid,
.aplus-concept-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.aplus-concept-direction-card,
.aplus-concept-direction-column {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--surface-soft), var(--surface));
}

.aplus-concept-direction-card h4,
.aplus-concept-direction-column h4,
.aplus-concept-live-copy h4 {
  margin: 8px 0 5px;
  color: var(--ink);
}

.aplus-concept-direction-card p,
.aplus-concept-direction-column p {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.55;
}

.aplus-concept-direction-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aplus-concept-direction-column > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.aplus-concept-first-module {
  min-width: 0;
}

.aplus-concept-expanded-bundle {
  display: grid;
  gap: 14px;
  width: 100%;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(42, 111, 171, 0.28);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(29, 54, 83, 0.1);
  box-sizing: border-box;
}

.aplus-concept-expanded-bundle > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.aplus-concept-expanded-bundle > header h4 { margin: 4px 0 0; }

.aplus-concept-palette {
  display: flex;
  gap: 5px;
}

.aplus-concept-palette i {
  width: 24px;
  height: 7px;
  border: 1px solid rgba(15, 35, 58, 0.12);
  border-radius: 999px;
}

.aplus-concept-plan-table {
  display: grid;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
}

.aplus-concept-plan-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(110px, 0.7fr) minmax(160px, 1fr) minmax(120px, 0.7fr);
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-muted);
  font-size: 12px;
}

.aplus-concept-plan-row:first-child { border-top: 0; }
.aplus-concept-plan-row.is-head {
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.aplus-concept-plan-row > span { min-width: 0; }
.aplus-concept-plan-row strong { display: block; color: var(--ink); }
.aplus-concept-plan-row small { display: block; margin-top: 3px; }
.aplus-concept-plan-row select { width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 8px; }

.aplus-concept-warnings {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(202, 141, 38, 0.35);
  border-radius: 11px;
  background: var(--warning-soft);
  color: var(--ink);
  font-size: 12px;
}

.aplus-concept-cost {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--ink-muted);
  font-size: 12px;
}

.aplus-concept-progress {
  height: 8px;
  margin: 16px 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}

.aplus-concept-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-navy), #5e9fc4);
  transition: width 280ms ease;
}

.aplus-concept-jobs {
  display: grid;
  gap: 7px;
}

.aplus-concept-jobs > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  font-size: 12px;
}

.aplus-concept-upload-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.aplus-concept-upload-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(140px, .7fr) minmax(190px, 1fr) minmax(210px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-subtle, #f8fafc);
}

.aplus-concept-trust-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.aplus-concept-trust-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) auto;
  align-items: end;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--warning) 6%, var(--surface));
}

.aplus-concept-trust-card > div {
  display: grid;
  gap: 4px;
}

.aplus-concept-trust-card p,
.aplus-concept-trust-card span {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.aplus-concept-version-history {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.aplus-concept-version-history summary {
  cursor: pointer;
  font-weight: 700;
}

.aplus-concept-version-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.aplus-concept-version-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 900px) {
  .aplus-concept-trust-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .aplus-concept-version-list > div {
    align-items: stretch;
    flex-direction: column;
  }
}

.aplus-concept-upload-row > div,
.aplus-concept-upload-row > label {
  display: grid;
  gap: 5px;
}

.aplus-concept-upload-row > div > span,
.aplus-concept-upload-row > label > span {
  color: var(--ink-muted);
  font-size: 12px;
}

.aplus-concept-upload-row .aplus-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

@media (max-width: 1050px) {
  .aplus-concept-upload-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .aplus-concept-upload-row {
    grid-template-columns: 1fr;
  }
}

.aplus-concept-module {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}

.aplus-concept-preview-label {
  margin-bottom: 7px;
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aplus-concept-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr);
  min-height: 190px;
  overflow: hidden;
  border-radius: 9px;
  background: #e8eef3;
}

.aplus-concept-visual { min-height: 190px; }
.aplus-concept-visual img { display: block; width: 100%; height: 100%; min-height: 190px; object-fit: cover; }

.aplus-concept-visual-state {
  display: grid;
  place-content: center;
  gap: 4px;
  height: 100%;
  min-height: 190px;
  padding: 18px;
  color: #536b82;
  text-align: center;
  background: linear-gradient(145deg, #edf3f6, #dfe9ef);
}

.aplus-concept-visual-state.is-failed { color: var(--negative); background: var(--negative-soft); }
.aplus-concept-live-copy { padding: 20px; background: #fff; }
.aplus-concept-live-copy > span { color: #70849a; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.aplus-concept-live-copy h4 { font-family: var(--font-heading); font-size: 18px; line-height: 1.15; }
.aplus-concept-live-copy p { margin: 8px 0 0; color: #53677c; font-size: 12px; line-height: 1.55; }

.aplus-concept-lineage {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 9px;
  color: var(--ink-muted);
  font-size: 10px;
}

.aplus-concept-module-actions {
  justify-content: flex-start;
  margin-top: 9px;
  color: var(--ink-muted);
  font-size: 10px;
}

.aplus-concept-selected-layout {
  display: grid;
  grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.aplus-concept-selected-layout nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-self: start;
  position: sticky;
  top: 12px;
}

.aplus-concept-selected-layout nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font-size: 11px;
  text-decoration: none;
  background: var(--surface-soft);
}

.aplus-concept-selected-layout nav span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-navy);
}

.aplus-concept-selected-modules { display: grid; gap: 16px; min-width: 0; }
.aplus-concept-mixed-warning { margin: 14px 0; padding: 13px; border: 1px solid var(--warning); border-radius: 12px; background: var(--warning-soft); }
.aplus-concept-ready-check { align-items: stretch; flex-wrap: wrap; margin: 12px 0; }
.aplus-concept-ready-check span { flex: 1 1 210px; padding: 9px; border-radius: 9px; font-size: 11px; line-height: 1.45; }
.aplus-concept-ready-check span.is-ready { color: var(--positive); background: var(--positive-soft); }
.aplus-concept-ready-check span.is-checking { color: var(--ink-muted); background: var(--surface-muted); }
.aplus-concept-ready-check span.is-blocked { color: var(--negative); background: var(--negative-soft); }

.aplus-concept-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--layer-overlay);
  display: flex;
  justify-content: flex-end;
  background: rgba(9, 23, 39, 0.42);
}

.aplus-concept-drawer {
  width: min(520px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  box-sizing: border-box;
  background: var(--surface);
  box-shadow: -18px 0 50px rgba(9, 23, 39, 0.2);
}

.aplus-concept-reason-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 16px; }
.aplus-concept-reason-grid label { display: flex; gap: 7px; align-items: flex-start; padding: 9px; border: 1px solid var(--line); border-radius: 9px; font-size: 12px; }

.authenticated-concept-image {
  position: relative;
  display: grid;
  min-height: 190px;
  overflow: hidden;
  background: #e8eff3;
}

.authenticated-concept-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
}

.authenticated-concept-image-state {
  display: grid;
  place-content: center;
  gap: 8px;
  min-height: 190px;
  padding: 20px;
  color: #496276;
  text-align: center;
  background: linear-gradient(145deg, #edf3f6, #dfe9ef);
}

.authenticated-concept-image-state.is-unavailable {
  color: var(--negative);
  background: var(--negative-soft);
}

.authenticated-concept-image-state span { font-size: 12px; line-height: 1.45; }
.authenticated-concept-image-state .btn { justify-self: center; margin-top: 4px; }

.aplus-concept-bundle {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.aplus-bundle-readiness,
.aplus-bundle-toolbar,
.aplus-outdated-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.aplus-bundle-readiness {
  padding: 11px 13px;
  border: 1px solid rgba(42, 111, 171, 0.18);
  border-radius: 11px;
  color: #36566f;
  background: #f2f8fb;
  font-size: 11px;
}

.aplus-bundle-readiness strong { color: var(--ink); }
.aplus-bundle-readiness .is-negative { color: var(--negative); font-weight: 700; }

.aplus-outdated-plan {
  padding: 14px;
  border: 1px solid rgba(202, 141, 38, 0.42);
  border-left: 4px solid var(--warning);
  border-radius: 12px;
  background: var(--warning-soft);
}

.aplus-outdated-plan > div { display: grid; gap: 3px; flex: 1 1 420px; }
.aplus-outdated-plan span { color: var(--ink-muted); font-size: 12px; line-height: 1.5; }

.aplus-bundle-toolbar {
  padding: 12px 14px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(110deg, #102f46, #1e5f79);
}

.aplus-bundle-toolbar > div:first-child { display: grid; gap: 3px; }
.aplus-bundle-toolbar span { color: rgba(255,255,255,0.78); font-size: 11px; }

.aplus-device-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 9px;
  background: rgba(255,255,255,0.09);
}

.aplus-device-toggle button {
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  color: rgba(255,255,255,0.72);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

.aplus-device-toggle button[aria-pressed="true"] { color: #133a52; background: #fff; }

.aplus-assembled-bundle {
  display: grid;
  gap: 12px;
  width: min(970px, 100%);
  margin: 0 auto;
  transition: width 220ms ease;
}

.aplus-concept-bundle.is-mobile .aplus-assembled-bundle { width: min(390px, 100%); }

.aplus-bundle-module {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #cfdae1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17, 48, 69, 0.07);
}

.aplus-bundle-module > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.aplus-bundle-module > header > div:first-child { min-width: 0; }
.aplus-bundle-module > header span { color: #527087; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.aplus-bundle-module > header h3 { margin: 4px 0; color: #15364d; font-size: 17px; }
.aplus-bundle-module > header p { margin: 0; color: var(--ink-muted); font-size: 11px; line-height: 1.45; }

.aplus-module-contract {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 52%;
}

.aplus-module-contract code,
.aplus-module-contract span {
  padding: 4px 7px;
  border-radius: 999px;
  color: #36566f;
  background: #edf4f7;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.aplus-module-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.aplus-module-slots.is-image_text_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aplus-concept-bundle.is-mobile .aplus-module-slots { grid-template-columns: 1fr; }

.aplus-module-slot {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #d6e0e6;
  border-radius: 11px;
  background: #f8fafb;
}

.aplus-module-slot.is-optional { border-style: dashed; }
.aplus-slot-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.aplus-slot-meta > span:not(.status-badge) { margin-right: auto; color: var(--ink-muted); font-size: 10px; }
.aplus-slot-meta strong { color: var(--ink); font-size: 11px; }

.aplus-slot-state {
  display: grid;
  place-content: center;
  gap: 5px;
  min-height: 150px;
  padding: 18px;
  color: #516a7d;
  text-align: center;
  background: #eaf0f3;
}

.aplus-slot-state.is-unavailable { color: var(--negative); background: var(--negative-soft); }
.aplus-slot-state span { font-size: 11px; line-height: 1.45; }
.aplus-slot-lineage { display: flex; gap: 7px; flex-wrap: wrap; color: var(--ink-muted); font-size: 9px; }
.aplus-slot-validation { display: flex; gap: 6px; flex-wrap: wrap; }
.aplus-slot-finding { display: grid; gap: 2px; padding: 7px; border-radius: 7px; color: #704d14; background: var(--warning-soft); font-size: 10px; }

.aplus-module-copy-roles {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(210px, 0.6fr);
  gap: 10px;
}

.aplus-customer-copy,
.aplus-designer-direction {
  padding: 13px;
  border-radius: 10px;
}

.aplus-customer-copy { background: #f5f8fa; }
.aplus-customer-copy > span { color: #507085; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.aplus-customer-copy h4 { margin: 7px 0 4px; color: #15364d; font-size: 18px; }
.aplus-customer-copy p { margin: 0; color: #4e6576; font-size: 12px; line-height: 1.55; }
.aplus-customer-copy p.is-muted { font-style: italic; }

.aplus-designer-direction { border: 1px solid #d9e2e7; color: var(--ink-muted); background: #fff; font-size: 11px; }
.aplus-designer-direction summary { color: #294d65; cursor: pointer; font-weight: 800; }
.aplus-designer-direction p { margin: 8px 0 0; line-height: 1.5; }
.aplus-designer-direction ul { margin: 8px 0 0; padding-left: 18px; }

.aplus-deterministic-copy-module {
  padding: 24px;
  border-radius: 10px;
  color: #173a51;
  background: linear-gradient(135deg, #f5f9fa, #e6f0f2);
}

.aplus-deterministic-copy-module > span { color: #527087; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.aplus-deterministic-copy-module h4 { margin: 8px 0 6px; font-size: 20px; }
.aplus-deterministic-copy-module p { margin: 0; color: #4e6576; font-size: 12px; line-height: 1.6; }
.aplus-deterministic-table { display: grid; margin-top: 14px; border: 1px solid #cbd9df; border-radius: 8px; overflow: hidden; }
.aplus-deterministic-table > div { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 9px; border-top: 1px solid #d7e2e7; background: rgba(255,255,255,0.72); font-size: 11px; }
.aplus-deterministic-table > div:first-child { border-top: 0; }

.aplus-legacy-preview { display: grid; gap: 7px; }
.aplus-legacy-preview > span { color: var(--warning); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.aplus-review-identity { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.aplus-review-identity span { padding: 5px 8px; border-radius: 999px; color: #36566f; background: #edf4f7; font-size: 10px; }
.aplus-alternate-directions { margin-top: 14px; color: var(--ink-muted); font-size: 12px; }
.aplus-alternate-directions summary { color: var(--ink); cursor: pointer; font-weight: 700; }
.aplus-alternate-directions article { margin-top: 8px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; }
.aplus-alternate-directions p { margin: 4px 0 0; }
.aplus-review-controls { position: sticky; bottom: 10px; z-index: 8; box-shadow: 0 14px 42px rgba(12, 35, 51, 0.18); }
.aplus-review-blocked-note { margin-top: 10px; color: var(--negative); font-size: 11px; line-height: 1.45; }

.aplus-shared-load-failure {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: var(--ink-muted);
  text-align: center;
}

.aplus-shared-load-failure strong { color: var(--ink); font-size: 16px; }
.aplus-shared-load-failure > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 1279px) {
  .aplus-project-library,
  .aplus-workspace-root,
  .aplus-scope-grid,
  .aplus-two-col,
  .aplus-module-grid,
  .aplus-brief-overview,
  .aplus-module-review-grid {
    grid-template-columns: 1fr;
  }

  .aplus-field-span-2 {
    grid-column: span 1;
  }

  .aplus-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aplus-evidence-grid .aplus-evidence-grid-wide {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .aplus-workspace-main {
    padding-bottom: 132px;
  }

  .aplus-card {
    padding: 16px;
  }

  .aplus-workspace-rail {
    padding: 12px;
    border-radius: 12px;
  }

  .aplus-module-summary {
    align-items: flex-start;
  }

  .aplus-module-summary-meta > span:first-child {
    display: none;
  }

  .aplus-structured-value > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .aplus-masthead-main {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .aplus-masthead-main > .btn {
    width: 100%;
    justify-content: flex-start;
  }

  .aplus-masthead-title {
    flex-basis: 100%;
  }

  .aplus-stage-nav {
    display: none;
  }

  .aplus-stage-select {
    display: grid;
    gap: 5px;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .aplus-stage-select select {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--brand-navy);
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
  }

  .aplus-scope-item,
  .aplus-evidence-row > summary {
    grid-template-columns: 1fr;
  }

  .aplus-scope-identity {
    grid-template-columns: minmax(0, 1fr);
  }

  .aplus-scope-identity .status-badge {
    justify-self: start;
  }

  .aplus-scope-decision-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .aplus-scope-decision-options label,
  .aplus-scope-row-actions,
  .aplus-scope-row-actions .btn {
    width: 100%;
    box-sizing: border-box;
  }

  .aplus-scope-row-actions .btn {
    justify-content: center;
  }

  .aplus-scope-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aplus-scope-summary span + span::before {
    content: none;
  }

  .aplus-choice-grid,
  .aplus-readiness-issues,
  .aplus-evidence-grid {
    grid-template-columns: 1fr;
  }

  .aplus-evidence-grid .aplus-evidence-grid-wide {
    grid-column: span 1;
  }

  .aplus-evidence-summary,
  .aplus-evidence-row-status {
    justify-content: flex-start;
  }

  .aplus-evidence-summary {
    flex-direction: column;
  }

  .aplus-evidence-identity {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .aplus-action-footer {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 72px 12px 12px;
    bottom: max(6px, env(safe-area-inset-bottom));
  }

  .aplus-action-footer-actions,
  .aplus-action-footer-actions .btn {
    width: 100%;
  }

  .aplus-action-footer-actions { flex-wrap: wrap; }

  .aplus-concept-direction-grid,
  .aplus-concept-compare,
  .aplus-concept-selected-layout,
  .aplus-concept-preview,
  .aplus-concept-plan-row,
  .aplus-concept-reason-grid {
    grid-template-columns: 1fr;
  }

  .aplus-concept-plan-row.is-head { display: none; }
  .aplus-concept-selected-layout nav { position: static; flex-direction: row; overflow-x: auto; }
  .aplus-concept-selected-layout nav a { min-width: 132px; }
  .aplus-concept-unlock, .aplus-concept-lineage, .aplus-concept-module-actions { align-items: flex-start; flex-direction: column; }
  .aplus-concept-expanded-bundle > header { align-items: stretch; flex-direction: column; }

  .aplus-bundle-module > header,
  .aplus-bundle-toolbar,
  .aplus-outdated-plan { align-items: stretch; flex-direction: column; }
  .aplus-outdated-plan > div { flex: 0 1 auto; }
  .aplus-module-contract { justify-content: flex-start; max-width: none; }
  .aplus-module-slots.is-image_text_grid,
  .aplus-module-copy-roles { grid-template-columns: 1fr; }
  .aplus-review-controls {
    bottom: max(6px, env(safe-area-inset-bottom));
    max-height: min(62vh, 430px);
    overflow: auto;
    padding: 14px !important;
  }

  .aplus-review-controls textarea { max-height: 76px; }

  .aplus-action-row,
  .aplus-module-actions,
  .aplus-approved-banner {
    align-items: stretch;
  }

  .aplus-action-row .btn,
  .aplus-module-actions .btn,
  .aplus-approved-banner .btn,
  .aplus-approved-banner a.btn {
    width: 100%;
    justify-content: center;
  }
}

.brand-block {
  display: grid;
  gap: 12px;
}

.brand-block h1,
.hero h2,
.review-card h4,
.review-section h3 {
  margin: 0;
  font-family: var(--font-heading);
  letter-spacing: -0.04em;
}

.brand-block h1 {
  font-size: 1.7rem;
  line-height: 1.05;
}

.eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sidebar .eyebrow,
.sidebar .subtle,
.sidebar .foot-label {
  color: var(--sidebar-ink);
}

.subtle {
  margin: 0;
  line-height: 1.55;
  color: var(--ink-muted);
}

.sidebar-foot {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.foot-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.review-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.primary-button {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
  box-shadow: 0 1px 0 rgba(18, 35, 63, 0.06), 0 6px 16px rgba(46, 110, 178, 0.16);
}

.primary-button:hover {
  background: var(--navy);
  border-color: var(--navy);
}

.secondary-button {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.main-panel .secondary-button {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--ink);
}

.secondary-button:hover {
  border-color: var(--brand-navy);
  color: var(--brand-navy);
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0 18px;
}

.hero h2 {
  font-size: 2rem;
  line-height: 1.02;
  margin-bottom: 8px;
}

.hero-copy {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 860px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: 240px;
}

.review-grid,
.review-columns {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.review-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.review-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-card,
.review-section {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-panel);
}

.review-card h4,
.review-section h3 {
  margin-bottom: 10px;
  font-size: 1.06rem;
  color: var(--ink);
}

.review-card p,
.review-section p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.55;
}

.review-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  line-height: 1.55;
}

.inline-link {
  color: var(--brand-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   CS Banner
   --------------------------------------------------------------------------- */

.cs-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(90deg, #f0a85d 0%, #e8943a 100%);
  color: #15273f;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  z-index: var(--layer-header);
  position: relative;
}

.cs-banner-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.cs-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}

.cs-banner-end-button {
  flex-shrink: 0;
  appearance: none;
  border: 1px solid rgba(21, 39, 63, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.85);
  color: #15273f;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.cs-banner-end-button:hover {
  background: #ffffff;
  border-color: rgba(21, 39, 63, 0.5);
}

/* Write mode reads as elevated/dangerous: switch the banner to red. */
.cs-banner-write {
  background: linear-gradient(90deg, #e0623c 0%, #c8442a 100%);
  color: #fff;
}

.cs-banner-mode {
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 8px;
}

.cs-banner-mode-readonly {
  background: rgba(21, 39, 63, 0.18);
  color: #15273f;
}

.cs-banner-mode-write {
  background: rgba(255, 255, 255, 0.92);
  color: #c8442a;
}

.cs-banner-elevate-button {
  flex-shrink: 0;
  appearance: none;
  border: 1px solid rgba(21, 39, 63, 0.45);
  border-radius: var(--radius-sm);
  background: #15273f;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.cs-banner-elevate-button:hover {
  background: #0d1b30;
}

/* ---------------------------------------------------------------------------
   CS operator portal (/cs)
   --------------------------------------------------------------------------- */
.cs-portal-card {
  grid-column: 1 / -1;
  width: min(100%, 1100px);
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #e2e6ec);
  border-radius: var(--radius-md, 12px);
  padding: 24px;
  max-width: 1100px;
  margin-inline: auto;
  box-shadow: 0 14px 34px rgba(34, 56, 74, 0.07);
}

.cs-portal-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.cs-portal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 380px);
  margin-top: 16px;
}

.cs-portal-label {
  font-size: 0.78rem;
  font-weight: 600;
}

.cs-portal-input {
  appearance: none;
  border: 1px solid var(--border-subtle, #cdd4dd);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 12px;
  font-size: 0.9rem;
}

.cs-portal-input:focus {
  outline: 2px solid rgba(34, 96, 168, 0.4);
  border-color: #2260a8;
}

.cs-portal-status {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 8px 0;
}

.cs-portal-status-warning { color: #c8442a; }
.cs-portal-status-positive { color: #1f7a4d; }
.cs-portal-status-neutral { color: var(--text-muted, #5a6473); }

.cs-portal-columns {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 24px;
  margin-top: 16px;
}

@media (max-width: 720px) {
  .cs-portal-columns { grid-template-columns: 1fr; }
}

.cs-portal-ws-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-portal-ws-button {
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid var(--border-subtle, #e2e6ec);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-subtle, #f7f9fc);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.cs-portal-ws-button:hover { border-color: #2260a8; }
.cs-portal-ws-button.is-active {
  border-color: #2260a8;
  background: rgba(34, 96, 168, 0.08);
}

.cs-portal-ws-name { font-weight: 700; font-size: 0.86rem; }
.cs-portal-ws-meta { font-size: 0.72rem; color: var(--text-muted, #5a6473); }

.cs-portal-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.cs-portal-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.cs-portal-table th,
.cs-portal-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle, #e2e6ec);
}

.cs-portal-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #5a6473);
}

.cs-portal-actions-cell { text-align: right; }

/* ---------------------------------------------------------------------------
   Brand Switcher & Account Switcher
   --------------------------------------------------------------------------- */

.brand-switcher,
.account-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--sidebar-ink);
}

.brand-switcher-label,
.account-switcher-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  white-space: nowrap;
}

.brand-switcher-select,
.account-switcher-select {
  appearance: none;
  border: 1px solid var(--sidebar-line);
  border-radius: var(--radius-sm);
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 22px 3px 8px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2362738d'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.brand-switcher-select:hover,
.account-switcher-select:hover {
  border-color: var(--line-strong);
  background-color: var(--sidebar-bg-deep);
}

.brand-switcher-select:focus,
.account-switcher-select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   Locked Nav Items
   --------------------------------------------------------------------------- */

.nav-locked {
  opacity: 0.5;
  cursor: default;
  pointer-events: auto;
}

.nav-locked:hover {
  background: none;
}

.nav-lock-icon {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.65rem;
  opacity: 0.6;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Locked Section Interstitial
   --------------------------------------------------------------------------- */

.locked-interstitial-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--layer-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 24, 48, 0.45);
  backdrop-filter: blur(2px);
}

.locked-interstitial-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  max-width: 420px;
  width: 90vw;
  box-shadow: 0 24px 48px rgba(7, 14, 27, 0.18);
  text-align: center;
}

.locked-interstitial-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.locked-interstitial-card p {
  margin: 0 0 20px;
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

.locked-interstitial-cta {
  appearance: none;
  border: 1px solid var(--brand-deep);
  border-radius: var(--radius-sm);
  background: var(--brand-deep);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 20px;
  cursor: pointer;
  margin-right: 8px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.locked-interstitial-cta:hover {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}

.locked-interstitial-close {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.locked-interstitial-close:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
}

@media (max-width: 1100px) {
  .hero {
    display: grid;
    gap: 16px;
  }

  .review-grid,
  .review-columns {
    grid-template-columns: 1fr;
  }

  .hero-meta {
    justify-content: flex-start;
  }

  .action-table-toolbar {
    flex-direction: column;
  }

  .action-table-toolbar-buttons {
    justify-content: flex-start;
  }
}

/* ── Panel body sizing (React WidgetShell) ───────────────────── */
/* Default panel-body reserves chart-sized space. The compact variant is
   used when the body is a placeholder (unavailable / empty / error) so a
   grid of these tiles doesn't waste a screenful of vertical real estate.
   Compact wins via the more-specific `.panel-body.panel-body-compact`. */
.panel-body { min-height: 240px; }
.panel-body.panel-body-compact { min-height: 120px; }

/* Performance is a scan-first report: tables and signal cards should size to
   their content instead of inheriting the chart placeholder height. Charts
   already own their height through ECharts, so this removes the dead space
   visible below short widgets without changing other sections. */
.react-performance-grid > .panel .panel-body {
  min-height: 0;
}

.performance-kpi-strip {
  grid-column: 1 / -1;
  min-width: 0;
}

.performance-kpi-strip[data-readiness="partial"]::before,
.performance-kpi-strip[data-readiness="incomplete"]::before {
  content: attr(data-readiness) " data";
  display: inline-flex;
  margin: 0 0 8px auto;
  padding: 4px 9px;
  border: 1px solid rgba(185, 133, 48, 0.35);
  border-radius: 999px;
  background: var(--warning-soft, #fff4df);
  color: var(--warning, #a66d13);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Not-ready state system ──────────────────────────────────────────────
   ONE treatment for every loading / unavailable (coming-soon) / empty /
   error tile, shared by BOTH render paths: the React widgets (UnavailableTile,
   EmptyState, ErrorState → .widget-placeholder-body with its own SVG) AND the
   IIFE shell (panelState() + .gauge-placeholder, which emit a bare
   .mini-label). Design tokens keep it readable on the light panels and
   identical across both paths, instead of the old faint dark-theme greys. */
.widget-empty,
.widget-unavailable,
.widget-loading,
.gauge-placeholder,
.widget-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 120px;
  padding: var(--space-xl) var(--space-lg);
  color: var(--ink-muted);
  text-align: center;
}

.widget-error {
  color: #b3261e;
  background: rgba(220, 38, 38, 0.05);
  border-radius: var(--radius-sm);
}

/* Message text reads like guidance, not a field label — drop the uppercase
   + tracking that `.mini-label` carries elsewhere, and match the React
   headline size/weight so both paths look the same. */
.widget-empty .mini-label,
.widget-unavailable .mini-label,
.widget-error .mini-label,
.widget-loading .mini-label,
.gauge-placeholder .mini-label {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1.4;
  max-width: 320px;
  text-align: center;
}

/* React structured tile: icon + headline + optional next-step. */
.widget-placeholder-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  max-width: 320px;
  margin: 0 auto;
}
.widget-placeholder-icon {
  width: 26px;
  height: 26px;
  margin-bottom: var(--space-xs);
  opacity: 0.5;
  display: block;
}
.widget-placeholder-headline {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  margin: 0;
}
.widget-placeholder-nextstep {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

/* Icon parity: the IIFE / gauge bare placeholders (a lone .mini-label, no
   structured body) get a calm dashed-circle glyph above the text — echoing
   the React EmptyState icon — so both render paths look identical. React's
   own tiles already carry an SVG, so they're excluded via :not(:has()).
   Loading + error keep their own treatments, so no glyph there. */
.widget-unavailable:not(:has(.widget-placeholder-body))::before,
.widget-empty:not(:has(.widget-placeholder-body))::before,
.gauge-placeholder:not(:has(.widget-placeholder-body))::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px dashed currentColor;
  border-radius: 50%;
  opacity: 0.4;
}

/* ── Gauge widget (semicircle speedometer) ──────────────────── */
.gauge-widget { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.gauge-svg { width: 100%; max-width: 220px; height: auto; }
.gauge-readout { text-align: center; }
.gauge-readout .headline-number { font-size: 28px; line-height: 1; }
.gauge-readout .compact-note { margin-top: 4px; }

/* ── Product row rank chip (Top Sellers) ─────────────────────── */
.product-rank { font-weight: 700; color: #64748b; font-size: 13px; min-width: 28px; text-align: center; }
.badge-neutral { background: #f1f5f9; color: #475569; }

/* ── Overview loading overlay ──────────────────────────────── */
.overview-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: 16px; color: #64748b; }
.overview-loading p { font-size: 14px; }
.loading-spinner { width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   BARS LOADER — sound-meter cadence (Anata Loaders design).
   One mechanism (center-pulsing bars on a staggered delay),
   three sizes (xs / md / lg) chosen by surface:
     • bars-xs (16px, 3 bars, currentColor) — inline button / status
     • bars-md (48×32px, 5 bars, brand-navy) — panel-center widget
     • bars-lg (96×64px, 7 bars, gradient, slower) — app bootstrap
   All pulse from center via scaleY about 50% origin. Reduced
   motion fallback holds bars at full height with no animation.
   ============================================================ */
.bars {
  display: inline-flex;
  align-items: center;
}
.bars .b {
  background: currentColor;
  border-radius: 999px;
  transform-origin: 50% 50%;
  animation: bars-pulse 1.1s ease-in-out infinite;
}

@keyframes bars-pulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.55; }
  50%      { transform: scaleY(1);    opacity: 1;    }
}

/* Skeleton loading state — the dashboard shell materializing. Brand-toned
   shimmer; reused by renderRouteResolutionPage. */
.state-loading {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
  gap: var(--gap-widget, 14px);
  padding: 2px 0;
}
.state-loading-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.state-loading-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-widget, 14px);
}
.sk {
  position: relative;
  overflow: hidden;
  background: var(--brand-soft, #e6f2f8);
  border-radius: var(--radius-lg, 12px);
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: sk-shimmer 1.5s ease-in-out infinite;
}
@keyframes sk-shimmer {
  100% { transform: translateX(100%); }
}
.sk-title { height: 28px; width: 220px; border-radius: 8px; }
.sk-pill { height: 30px; width: 124px; border-radius: 999px; }
.sk-card { height: 150px; }
.sk-card-tall { height: 224px; }
.sk-card-wide { grid-column: 1 / -1; height: 120px; }
.state-loading-hint {
  text-align: center;
  color: var(--ink-soft, #7c8aa0);
  font-size: 0.85rem;
  margin: 6px 0 0;
}
@media (max-width: 720px) {
  .state-loading-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
}

/* On-brand message state page (restricted / access-gate / connect / error).
   It is a direct child of the 12-column page grid in the legacy shell, so it
   must explicitly span that grid before applying its readable card width. */
.state-page {
  grid-column: 1 / -1;
  width: min(100%, 680px);
  margin: clamp(28px, 7vh, 80px) auto 0;
  padding: clamp(28px, 4vw, 42px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.state-page-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft, #e6f2f8);
  color: var(--brand-navy, #2e6eb2);
}
.state-page-icon svg { width: 22px; height: 22px; }
.state-tone-warning .state-page-icon { background: #fbeede; color: #b07628; }
.state-tone-danger .state-page-icon { background: #fbe7e6; color: #c0433f; }
.state-page-kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-navy, #2e6eb2);
}
.state-tone-warning .state-page-kicker { color: #8f6320; }
.state-tone-danger .state-page-kicker { color: #b74440; }
.state-page-title {
  font-family: var(--font-heading, "Montserrat", sans-serif);
  max-width: 560px;
  font-size: clamp(1.6rem, 2.3vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 2px 0 0;
  color: var(--ink, #15273f);
}
.state-page-detail {
  color: var(--ink-muted, #62738d);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}
.state-page-note {
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  text-align: left;
}
.state-page-note-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft, #66758f);
}
.state-page-note p {
  margin: 0;
  color: var(--ink-muted, #62738d);
  font-size: 0.88rem;
  line-height: 1.55;
}
.state-page .button-row {
  margin-top: 4px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Missing-workspace access is a permission boundary, not an error sheet. */
.state-page.state-page-compact {
  width: min(100%, 480px);
  margin: clamp(40px, 11vh, 112px) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Keep the legacy access gate content-sized inside the flex-grown page body.
   Otherwise the page grid stretches its internal rows across the viewport. */
#page-body > .state-page.state-page-compact {
  align-self: start;
}

.state-page-compact .state-page-icon {
  grid-column: 1;
  grid-row: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}
.state-page-compact .state-page-icon svg {
  width: 16px;
  height: 16px;
}
.state-page-compact .state-page-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  max-width: none;
  margin: 0;
  font-size: clamp(1.35rem, 1.8vw, 1.55rem);
  line-height: 1.25;
}
.state-page-compact .state-page-detail {
  grid-column: 2;
  grid-row: 2;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.5;
}
.state-page-compact .state-page-kicker,
.state-page-compact .state-page-note {
  display: none;
}
.state-page-compact .button-row {
  grid-column: 2;
  grid-row: 3;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .state-page {
    width: 100%;
    margin: 12px 0 0;
    padding: 24px 20px;
    border-radius: var(--radius-md);
  }
  .state-page.state-page-compact {
    width: 100%;
    margin: 28px 0 0;
    padding: 0;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 10px;
    border-radius: 0;
  }
  .state-page-compact .state-page-icon {
    width: 28px;
    height: 28px;
  }
}

/* Full-page boot cover — shown over the whole app while auth + workspace
   resolve, so we never flash the pre-data shell. */
.app-boot-cover {
  position: fixed;
  inset: 0;
  z-index: var(--layer-overlay);
  background: var(--sidebar-bg, #f9f7f3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-boot-cover.is-hidden { display: none; }
.app-boot-cover-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(320px, 80vw);
}
.app-boot-mark { width: 44px; height: 44px; opacity: 0.96; }
.app-boot-wordmark {
  display: block;
  width: 164px;
  max-width: 70vw;
  height: auto;
  margin-bottom: 4px;
}
.app-boot-progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--brand-soft, #e6f2f8);
  overflow: hidden;
}
.app-boot-progress span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: var(--brand-navy, #2e6eb2);
  animation: boot-indeterminate 1.3s ease-in-out infinite;
}
@keyframes boot-indeterminate {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
.app-boot-hint {
  font-size: 0.84rem;
  color: var(--ink-soft, #7c8aa0);
  text-align: center;
  margin: 0;
  min-height: 1.2em;
}
body.is-booting .app-shell { display: none; }
@media (prefers-reduced-motion: reduce) {
  .app-boot-progress span { animation: none; width: 100%; opacity: 0.5; }
}

/* xs — 3 bars, 16 px tall. Inherits currentColor so it works
   in any button (white-on-navy, navy-on-white, ghost). */
.bars-xs { width: 16px; height: 16px; gap: 2px; }
.bars-xs .b { width: 2.5px; height: 100%; }
.bars-xs .b:nth-child(1) { animation-delay: 0s;     }
.bars-xs .b:nth-child(2) { animation-delay: 0.12s;  }
.bars-xs .b:nth-child(3) { animation-delay: 0.24s;  }

/* md — 5 bars, 32 px tall. */
.bars-md { width: 48px; height: 32px; gap: 4px; color: var(--brand-navy); }
.bars-md .b { width: 5px; height: 100%; }
.bars-md .b:nth-child(1) { animation-delay: 0s;     }
.bars-md .b:nth-child(2) { animation-delay: 0.10s;  }
.bars-md .b:nth-child(3) { animation-delay: 0.20s;  }
.bars-md .b:nth-child(4) { animation-delay: 0.30s;  }
.bars-md .b:nth-child(5) { animation-delay: 0.40s;  }

/* lg — 7 bars, 64 px tall. Slower cycle (1.4s vs 1.1s) so
   bootstrap feels ceremonial; bars use a 2-stop gradient
   (navy → soft navy at top) for depth. */
.bars-lg {
  width: 96px; height: 64px; gap: 6px;
  color: var(--brand-navy);
}
.bars-lg .b {
  width: 8px; height: 100%;
  background: linear-gradient(180deg, var(--brand-navy-soft) 0%, var(--brand-navy) 100%);
  animation-duration: 1.4s;
}
.bars-lg .b:nth-child(1) { animation-delay: 0s;     }
.bars-lg .b:nth-child(2) { animation-delay: 0.09s;  }
.bars-lg .b:nth-child(3) { animation-delay: 0.18s;  }
.bars-lg .b:nth-child(4) { animation-delay: 0.27s;  }
.bars-lg .b:nth-child(5) { animation-delay: 0.36s;  }
.bars-lg .b:nth-child(6) { animation-delay: 0.45s;  }
.bars-lg .b:nth-child(7) { animation-delay: 0.54s;  }

/* reduced motion — bars hold at full height */
@media (prefers-reduced-motion: reduce) {
  .bars .b { animation: none; transform: scaleY(1); opacity: 1; }
}

/* ── Onboarding v2: banner, access-requests, inbox ────────── */
.onboarding-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; margin: 12px 0; border-radius: 8px; background: #fef3c7; border: 1px solid #fcd34d; color: #78350f; }
.onboarding-banner-body { display: flex; flex-direction: column; gap: 2px; }
.onboarding-banner-title { font-size: 14px; }
.onboarding-banner-text { font-size: 13px; margin: 0; }
.onboarding-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.onboarding-banner-cta { padding: 8px 14px; border-radius: 6px; border: none; background: #b45309; color: #fff; font-weight: 600; cursor: pointer; }
.onboarding-banner-cta:hover { background: #92400e; }
.onboarding-banner-dismiss { width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: #92400e; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.7; }
.onboarding-banner-dismiss:hover { opacity: 1; background: rgba(0,0,0,0.06); }

.access-request-surface {
  grid-column: 1 / -1;
  width: min(100%, 960px);
  margin-inline: auto;
  padding: 22px;
  border: 1px solid rgba(217, 226, 239, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 34px rgba(34, 56, 74, 0.07);
}
.access-request-surface-header {
  margin-bottom: 14px;
}
.access-request-surface-header h3 { margin: 0 0 4px; font-size: 20px; color: var(--ink); }
.access-request-surface-hint { font-size: 13px; color: #64748b; margin: 0; max-width: 660px; }
.access-request-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.access-request-row { padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.access-request-row.is-pending { border-color: #fcd34d; background: #fffbeb; }
.access-request-row.is-approved { border-color: #a7f3d0; background: #ecfdf5; }
.access-request-row.is-denied { border-color: #fecaca; background: #fef2f2; }
.access-request-header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.access-request-target { color: #64748b; font-size: 12px; }
.access-request-verdict { color: #475569; font-size: 12px; margin-left: auto; }
.access-request-note { margin: 6px 0 0; font-size: 13px; color: #334155; }
.access-request-actions { margin-top: 8px; display: flex; gap: 8px; }
.access-request-actions .btn-approve { background: #059669; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.access-request-actions .btn-deny { background: #dc2626; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.access-request-waiting { font-size: 12px; color: #64748b; font-style: italic; }
.access-request-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.7);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.88);
  color: #64748b;
  font-size: 13px;
}
.access-request-history-title { margin: 16px 0 8px; font-size: 13px; color: #475569; }

.notifications-inbox { padding: 12px; }
.notifications-inbox-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.notifications-inbox-header h3 { margin: 0; font-size: 14px; }
.notifications-unread-badge { background: #dc2626; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.notifications-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.notification-item { padding: 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; }
.notification-item.is-unread { background: #eff6ff; border-color: #bfdbfe; }
.notification-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.notification-title { font-size: 13px; }
.notification-time { font-size: 11px; color: #64748b; white-space: nowrap; }
.notification-body { margin: 4px 0 0; font-size: 12px; color: #475569; }
.notification-mark-read { margin-top: 6px; background: none; border: 1px solid #cbd5e1; color: #475569; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; }
.notifications-empty { font-size: 13px; color: #64748b; margin: 8px 0; }

/* Anata support dock — temporary functional shell while the character asset
   and motion states are being designed. The dock stays above page content but
   remains compact, keyboard-accessible, and safe near mobile browser edges. */
.anata-support-dock {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: var(--layer-popover);
  display: grid;
  justify-items: end;
  gap: 8px;
  font-family: Roboto, sans-serif;
  transition: bottom 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.anata-support-dock[data-scroll-state="holding"] { transition: none; }
.anata-support-dock[data-scroll-state="receding"],
.anata-support-dock[data-scroll-state="returning"] { will-change: bottom; }
.anata-support-dock__tray {
  width: min(300px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel), 0 14px 32px rgba(20, 39, 63, 0.18), 0 4px 10px rgba(20, 39, 63, 0.08);
  animation: anata-support-dock-rise 160ms ease-out;
}
.anata-support-dock__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.anata-support-dock__option:hover,
.anata-support-dock__option:focus-visible {
  border-color: var(--line);
  background: var(--brand-soft);
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}
.anata-support-dock__option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.anata-support-dock__option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-navy);
  font-size: 14px;
}
.anata-support-dock__option strong,
.anata-support-dock__option small {
  display: block;
}
.anata-support-dock__option strong { font-size: var(--text-sm); }
.anata-support-dock__option small { margin-top: 2px; color: var(--ink-muted); font-size: var(--text-xs); line-height: 1.35; }
.anata-support-dock__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 8px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-panel), 0 10px 26px rgba(20, 39, 63, 0.18), 0 3px 8px rgba(20, 39, 63, 0.10);
}
.anata-support-dock__trigger:hover,
.anata-support-dock__trigger:focus-visible {
  border-color: var(--brand-navy);
  background: var(--brand-soft);
  box-shadow: var(--shadow-panel), 0 14px 32px rgba(20, 39, 63, 0.22), 0 4px 10px rgba(20, 39, 63, 0.12);
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}
.anata-support-dock__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--navy);
}
.anata-support-dock__avatar img { width: 30px; height: 30px; object-fit: contain; }
.anata-support-dock__label { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.anata-support-dock__caret { color: var(--ink-muted); font-size: 16px; line-height: 1; }
@keyframes anata-support-dock-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  .anata-support-dock { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
  .anata-support-dock__label { display: none; }
  .anata-support-dock__trigger { padding-right: 6px; }
}
@media (max-width: 360px) {
  .anata-support-dock__trigger {
    width: 48px;
    height: 48px;
    justify-content: center;
    padding: 6px;
  }
  .anata-support-dock__caret { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .anata-support-dock,
  .anata-support-dock__tray { animation: none; transition: none; }
}

/* Ask Anata is an above-page read surface. It is intentionally separate from
   the issue popup so Support keeps its screenshot/ClickUp workflow. */
.anata-ask-panel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(76px, calc(60px + env(safe-area-inset-bottom)));
  z-index: var(--layer-popover);
  width: min(400px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 104px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-panel), 0 18px 42px rgba(20, 39, 63, 0.2);
  animation: anata-ask-panel-rise 160ms ease-out;
  font-family: Roboto, sans-serif;
}
.anata-ask-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-soft);
}
.anata-ask-panel__head-actions { display: inline-flex; align-items: flex-start; gap: 6px; flex: 0 0 auto; }
.anata-ask-panel__kicker {
  display: block;
  color: var(--brand-navy);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.anata-ask-panel h2 { margin: 3px 0 0; font-family: Montserrat, sans-serif; font-size: var(--text-heading); }
.anata-ask-panel__head p { margin: 4px 0 0; color: var(--ink-muted); font-size: var(--text-xs); }
.anata-ask-panel__close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.anata-ask-panel__minimize {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.anata-ask-panel__minimize:hover,
.anata-ask-panel__minimize:focus-visible { border-color: var(--brand-navy); color: var(--ink); outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.anata-ask-panel__close:hover,
.anata-ask-panel__close:focus-visible { border-color: var(--brand-navy); color: var(--ink); outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.anata-ask-panel__body { min-height: 160px; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; padding: 16px; }
.anata-ask-panel__intro { margin: 0 0 12px; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.5; }
.anata-ask-panel__prompts { display: grid; gap: 8px; }
.anata-ask-panel__prompts button {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: left;
}
.anata-ask-panel__prompts button:hover,
.anata-ask-panel__prompts button:focus-visible { border-color: var(--brand-navy); background: var(--brand-soft); outline: 2px solid var(--brand-navy); outline-offset: 1px; }
.anata-ask-panel__thread { display: grid; gap: 12px; }
.anata-ask-panel__turn { display: grid; gap: 8px; }
.anata-ask-message { width: fit-content; max-width: 94%; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 14px; font-size: var(--text-sm); line-height: 1.5; }
.anata-ask-message--user { justify-self: end; border-color: var(--brand-navy); background: var(--brand-soft); }
.anata-ask-message--assistant { justify-self: start; background: var(--surface-soft); }
.anata-ask-message__label { display: block; margin-bottom: 3px; color: var(--ink-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
.anata-ask-message p { margin: 0; }
.anata-ask-message__body { min-height: 3.2em; color: var(--ink); contain: layout style; }
.anata-ask-message__body p { margin: 0 0 9px; }
.anata-ask-message__body p:last-child { margin-bottom: 0; }
.anata-ask-message__body h3 { margin: 0 0 8px; color: var(--ink); font-family: Montserrat, sans-serif; font-size: var(--text-sm); }
.anata-ask-message__body ul { margin: 0 0 9px; padding-left: 18px; }
.anata-ask-message__body li + li { margin-top: 4px; }
.anata-ask-panel__loading { display: flex; align-items: center; gap: 9px; min-height: 22px; color: var(--ink-muted); font-size: var(--text-sm); }
.anata-ask-panel__dots { display: inline-flex; align-items: center; gap: 3px; width: 18px; }
.anata-ask-panel__dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-navy); animation: anata-ask-dot 900ms ease-in-out infinite; }
.anata-ask-panel__dots span:nth-child(2) { animation-delay: 130ms; }
.anata-ask-panel__dots span:nth-child(3) { animation-delay: 260ms; }
.anata-ask-panel__evidence { display: grid; gap: 6px; min-width: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.anata-ask-panel__evidence strong { color: var(--ink); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.anata-ask-panel__evidence-item { display: grid; gap: 7px; min-width: 0; color: var(--ink-muted); font-size: var(--text-xs); }
.anata-ask-panel__evidence-source { display: flex; justify-content: space-between; gap: 8px; }
.anata-ask-panel__evidence small { white-space: nowrap; }
.anata-ask-panel__evidence-action { flex: 0 0 auto; padding: 2px 0; border: 0; background: transparent; color: var(--brand-navy); cursor: pointer; font: inherit; font-weight: 700; }
.anata-ask-panel__evidence-action:hover,
.anata-ask-panel__evidence-action:focus-visible { text-decoration: underline; outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.anata-ask-campaign-evidence { display: grid; box-sizing: border-box; gap: 8px; width: 100%; min-width: 0; max-width: 100%; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: color-mix(in srgb, var(--surface) 92%, var(--brand-navy) 8%); color: var(--ink); }
.anata-ask-campaign-evidence summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; cursor: pointer; font-weight: 700; }
.anata-ask-campaign-evidence summary > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anata-ask-campaign-evidence__label { font-weight: 700; }
.anata-ask-campaign-evidence__badge { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: var(--surface-muted); color: var(--ink-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.anata-ask-campaign-evidence__badge.is-complete { background: color-mix(in srgb, #1f9d68 16%, transparent); color: #16784f; }
.anata-ask-campaign-evidence__badge.is-partial,
.anata-ask-campaign-evidence__badge.is-maturing { background: color-mix(in srgb, #c98a13 18%, transparent); color: #8b5d08; }
.anata-ask-campaign-evidence__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.anata-ask-campaign-evidence__metrics span { display: grid; gap: 2px; min-width: 0; padding: 7px; border-radius: 7px; background: var(--surface); font-weight: 700; }
.anata-ask-campaign-evidence__metrics small { overflow: hidden; color: var(--ink-muted); font-size: 9px; text-overflow: ellipsis; text-transform: uppercase; }
.anata-ask-campaign-evidence__lifecycle { display: grid; gap: 4px; color: var(--ink-muted); line-height: 1.35; }
.anata-ask-campaign-evidence__choices { display: grid; gap: 6px; }
.anata-ask-campaign-evidence__choices button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.anata-ask-campaign-evidence__choices button:hover,
.anata-ask-campaign-evidence__choices button:focus-visible { border-color: var(--brand-navy); outline: 2px solid color-mix(in srgb, var(--brand-navy) 25%, transparent); }
.anata-ask-panel__issue { justify-self: start; margin-top: 2px; padding: 8px 12px; border: 1px solid var(--brand-navy); border-radius: var(--radius-sm); background: var(--brand-navy); color: #fff; cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.anata-ask-panel__issue:hover,
.anata-ask-panel__issue:focus-visible { background: var(--brand-navy-soft); outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.anata-ask-panel__error { color: var(--negative); font-size: var(--text-sm); line-height: 1.5; }
.anata-ask-panel__error button { border: 0; background: none; color: var(--brand-navy); cursor: pointer; padding: 0; text-decoration: underline; }
.anata-ask-panel__composer { padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.anata-ask-panel__composer label { display: block; margin-bottom: 6px; color: var(--ink-muted); font-size: var(--text-xs); }
.anata-ask-panel__composer div { display: flex; gap: 8px; }
.anata-ask-panel__composer input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font: inherit; font-size: var(--text-sm); }
.anata-ask-panel__composer input:focus { border-color: var(--brand-navy); outline: 2px solid rgba(46, 110, 178, 0.22); }
.anata-ask-panel__composer button { width: 38px; border: 1px solid var(--brand-navy); border-radius: var(--radius-sm); background: var(--brand-navy); color: #fff; cursor: pointer; font-size: 16px; }
.anata-ask-panel__composer button:disabled { cursor: not-allowed; opacity: 0.45; }
.anata-ask-panel__minimized {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(76px, calc(60px + env(safe-area-inset-bottom)));
  z-index: var(--layer-popover);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-panel), 0 18px 42px rgba(20, 39, 63, 0.2);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  animation: anata-ask-panel-rise 160ms ease-out;
}
.anata-ask-panel__minimized:hover,
.anata-ask-panel__minimized:focus-visible { border-color: var(--brand-navy); background: var(--brand-soft); outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.anata-ask-panel__minimized-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: var(--navy); }
.anata-ask-panel__minimized-avatar img { width: 30px; height: 30px; object-fit: contain; }
.anata-ask-panel__minimized-status { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-navy); animation: anata-ask-dot 900ms ease-in-out infinite; }
@keyframes anata-ask-panel-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes anata-ask-dot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 640px) {
  .anata-ask-panel { right: max(10px, env(safe-area-inset-right)); bottom: max(68px, calc(58px + env(safe-area-inset-bottom))); width: calc(100vw - 20px); max-height: calc(100vh - 88px); }
  .anata-ask-panel__minimized { right: max(10px, env(safe-area-inset-right)); bottom: max(68px, calc(58px + env(safe-area-inset-bottom))); }
}
@media (prefers-reduced-motion: reduce) {
  .anata-ask-panel, .anata-ask-panel__minimized, .anata-ask-panel__dots span, .anata-ask-panel__minimized-status { animation: none; }
}

/* Action layer — ExportButton (panel-actions slot). */
.export-button {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #d1d5db);
  color: var(--brand-navy, #1e3a8a);
  padding: 5px 11px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.export-button:hover { background: var(--surface-muted, #f8fafc); border-color: var(--brand-navy, #1e3a8a); }
.export-button:disabled { opacity: 0.4; cursor: not-allowed; }

body.shared-po-page,
body.shared-page {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  align-items: initial;
  background: var(--bg);
}

/* Action layer — AsinDrawer slide-over. */
.asin-drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: var(--layer-scrim);
  animation: asin-drawer-fade 160ms ease-out;
}
.asin-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 480px;
  max-width: 95vw;
  background: var(--surface);
  color: var(--ink);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
  z-index: var(--layer-overlay);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 200ms ease-out;
  animation: asin-drawer-slide 200ms ease-out;
}
.asin-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1;
}
.asin-drawer-close {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.asin-drawer-close:hover { background: rgba(15,23,42,0.06); }

/* Action Drawer = LIGHT panel. Its content is authored with --ink/--ink-muted
   text on light-tinted backgrounds, so on the shared dark-navy .asin-drawer-panel
   (used by the dark AsinDrawer) it was dark-on-dark and unreadable. Scope a light
   theme to the action drawer wrapper so it reads correctly and matches the
   dashboard's light surface. */
[data-react-drawer="action"] .asin-drawer-panel {
  background: #ffffff;
  color: var(--ink);
}
[data-react-drawer="action"] .asin-drawer-head {
  background: #ffffff;
  border-bottom-color: var(--line);
}
[data-react-drawer="action"] .asin-drawer-close { color: var(--ink-muted); }
[data-react-drawer="action"] .asin-drawer-close:hover { background: rgba(15,23,42,0.06); }

.asin-drawer-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #0b1220;
}
@keyframes asin-drawer-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes asin-drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* MetricExplain + AnomalyBadge — Decision Layer affordances */
.metric-explain-trigger { background: transparent; border: 1px solid rgba(255,255,255,0.16); color: var(--text-secondary, #cbd5e1); width: 18px; height: 18px; border-radius: 50%; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.metric-explain-trigger:hover { background: rgba(255,255,255,0.06); }
.metric-explain-trigger:disabled { cursor: not-allowed; opacity: 0.5; }
.metric-explain-popover { position: absolute; background: #0f172a; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 12px; min-width: 200px; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.metric-explain-popover h4 { margin: 0 0 8px 0; font-size: 12px; color: #cbd5e1; }
.metric-explain-driver { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.metric-explain-up { color: #4cb963; }
.metric-explain-down { color: #e15554; }
.anomaly-badge { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e15554; margin-left: 6px; vertical-align: middle; cursor: help; }

/* ── InfoTip (ⓘ next to a section title) ─────────────────────────────────
   Holds the "how/why" detail a header used to dump inline. Sits on the
   light panels, so it uses the light-theme tokens (not the dark
   metric-explain palette). */
.info-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}
.info-tip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.info-tip-trigger:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
  background: rgba(15, 23, 42, 0.04);
}
.info-tip-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: max-content;
  max-width: 280px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.99);
  box-shadow: var(--shadow-panel);
  font-size: var(--text-xs);
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  text-align: left;
}

.info-tip-popover,
.metric-explain-popover {
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  transform: translateX(var(--popover-shift-x, 0));
}

/* =====================================================================
   CLARITY AUDIT (2026-04)
   ---------------------------------------------------------------------
   Sourced from clarity-audit.html — 7 surfaces, all clarity (visual)
   tweaks, no logic / IA / widget structure changed.

   Rules in this section either:
     a) override an earlier selector with tightened values, or
     b) introduce a NEW class the React WidgetShell already emits
        (.kicker, .panel-title) but which had no rule before.

   Scoped at the bottom of the file so reverts are atomic — delete
   between the two markers and the dashboard returns to the prior look.
   ===================================================================== */

/* ─── §1 + §7: Widget shell — eyebrows, titles, type ────────────────── */
/* Widget eyebrow labels — title-case, not all-caps. The font-size here
   loses to .panel-head p (specificity 0,1,1 > 0,1,0) and renders at
   var(--text-sm)=13px in context, so we declare 13px explicitly. */
.kicker,
.panel-kicker,
.workspace-kicker,
.mini-label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-muted);
  margin: 0 0 6px;
}

/* Form and structural labels — keep uppercase compact treatment. */
.panel-label,
.control-label,
.table-caption,
.meta-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 6px;
}

/* Title bump 18→20px and tighter tracking. Applies to React's
   <h3 class="panel-title"> AND the IIFE's <h3> inside .panel-head. */
.panel-head h3,
.panel-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

.panel-note,
.panel-head p {
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 6px 0 0;
}

.panel-note-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.panel-note-row .panel-note {
  flex: 1 1 auto;
  min-width: 0;
}

.panel-note-row.is-truncated .panel-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.panel-note-row .info-tip {
  flex: 0 0 auto;
  margin-top: 5px;
}

.readiness-pill {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-muted);
  background: var(--surface-soft);
  white-space: normal;
}

.readiness-pill-partial {
  color: var(--warning);
  border-color: rgba(185, 133, 48, 0.28);
  background: var(--warning-soft);
}

.readiness-pill-incomplete {
  color: var(--negative);
  border-color: rgba(215, 92, 88, 0.28);
  background: var(--negative-soft);
}

/* Overview operator controls use the canonical button, link, and chip
   semantics while keeping the existing routes and component state. */
.overview-action-category {
  font: inherit;
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 10px var(--space-md);
  color: var(--ink);
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.overview-action-category:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}

.overview-action-category:focus-visible,
.overview-health-row.is-link:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

.overview-health-row {
  display: grid;
  grid-template-columns: 10px 56px minmax(0, 1fr) 16px;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) 10px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border-top: 1px solid var(--line);
}

.overview-health-row.tone-critical { background: var(--negative-soft); }
.overview-health-row.tone-warning { background: var(--warning-soft); }

.overview-health-row.is-link {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.overview-health-row.is-link:hover { background: var(--brand-soft); }

.overview-health-row-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
}

.overview-metric-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-md);
}

.overview-metric-controls-label,
.overview-metric-controls-help {
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.overview-metric-controls-label { margin-right: var(--space-xs); }
.overview-metric-controls-help { flex-basis: 100%; }

.overview-metric-swatch {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* Panel chrome — softer border color and shadow. Radius and padding are
   canonical in the base .panel rule above. */
.panel {
  border-color: #e3e9f1;
  box-shadow: 0 1px 0 rgba(20, 39, 63, 0.04), 0 4px 12px rgba(20, 39, 63, 0.04);
}

/* ─── §2: KPI cards — number is the point ───────────────────────────── */
/* metric-card strong is the headline number on every Overview KPI card
   AND every per-section KPI strip. Bump from 1.46rem (~20px) to 32px
   and add tabular-nums so digits align column-to-column. */
.metric-card strong,
.headline-number {
  font-size: clamp(var(--text-display-sm), 2.2vw, var(--text-display));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-heading);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Compact variant keeps a smaller headline so dense rows still read. */
.metric-grid.is-compact .metric-card strong {
  font-size: var(--text-display-sm);
  line-height: 1.1;
}

/* Drop the 0.14em SHOUT on KPI labels — they're meta, not headlines. */
.metric-card .metric-label,
.metric-card .label,
.headline-stat-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}

/* Bad-news cards: soft red edge + tinted gradient so red metrics
   feel red without screaming. Apply via `.tone-negative` (already
   emitted by panels) or explicit `.alarm` / `.win` opt-ins from new
   widgets. */
.metric-card.alarm,
.metric-card.tone-negative {
  border-color: rgba(215, 92, 88, 0.4);
  background: linear-gradient(180deg, #fff7f6, #fff);
}

.metric-card.win,
.metric-card.tone-positive {
  border-color: rgba(45, 156, 103, 0.3);
}

/* Tabular nums on every numeric field so digits line up vertically. */
.numeric,
.metric-delta,
.delta,
[data-numeric="true"] {
  font-variant-numeric: tabular-nums;
}

/* ─── §4: Alerts — severity on the edge, not in a corner chip ───────── */
.alert-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid #e3e9f1;
  border-left: 4px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
}

.alert-row + .alert-row {
  margin-top: 8px;
}

.alert-row .alert-glyph {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  background: var(--surface-muted);
  color: var(--ink);
}

.alert-row .alert-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.alert-row .alert-meta {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 3px;
  line-height: 1.45;
}

.alert-row.urgent,
.alert-row.severity-critical {
  border-left-color: var(--negative);
  background: linear-gradient(90deg, rgba(215, 92, 88, 0.06), #fff 40%);
}
.alert-row.urgent .alert-glyph,
.alert-row.severity-critical .alert-glyph {
  background: rgba(215, 92, 88, 0.12);
  color: #b1453f;
}

.alert-row.warn,
.alert-row.severity-high {
  border-left-color: var(--warning);
  background: linear-gradient(90deg, rgba(185, 133, 48, 0.06), #fff 40%);
}
.alert-row.warn .alert-glyph,
.alert-row.severity-high .alert-glyph {
  background: rgba(185, 133, 48, 0.12);
  color: #8a6116;
}

.alert-row.info,
.alert-row.severity-medium {
  border-left-color: var(--brand-navy);
}
.alert-row.info .alert-glyph,
.alert-row.severity-medium .alert-glyph {
  background: rgba(46, 110, 178, 0.12);
  color: #1f4f80;
}

/* ─── §5: Buttons — primary should look primary ─────────────────────── */
/* Override: existing .button-primary was white-on-warm-border (a
   ghost button by today's reading). Swap to solid ink so primary
   CTAs are unmistakably the loudest action. */
.button-primary,
.button.button-primary {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(18, 35, 63, 0.06), 0 6px 16px rgba(46, 110, 178, 0.16);
}

.button-primary:hover,
.button.button-primary:hover {
  background: var(--navy);
  border-color: var(--navy);
}

.button-primary:focus-visible,
.button.button-primary:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

/* Real outlined secondary — visually subordinate, still legible. */
.button-secondary,
.button.button-secondary {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-weight: 600;
  border-radius: 8px;
}

.button-secondary:hover,
.button.button-secondary:hover {
  border-color: var(--brand-navy);
  color: var(--brand-navy);
}

/* Ghost — transparent until hover. For tertiary actions. */
.button-ghost,
.button.button-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  font-weight: 600;
  border-radius: 8px;
}

.button-ghost:hover,
.button.button-ghost:hover {
  background: var(--brand-soft);
  color: var(--brand-navy);
}

/* Danger — solid negative. Reserved for destructive actions. */
.button-danger,
.button.button-danger {
  background: var(--negative);
  border-color: var(--negative);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
}

.button-danger:hover,
.button.button-danger:hover {
  background: #c14a47;
  border-color: #c14a47;
}

.button-compact,
.button.button-compact {
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: var(--text-xs);
}

/* Small — compact variant for dense tables. Composes with any
   .button-* variant (e.g. .button.button-primary.button-sm). */
.button-sm,
.button.button-sm {
  height: auto;
  padding: 4px 10px;
  font-size: var(--text-sm);
  line-height: 1.2;
}

/* ─── Modal — Create ASIN Strategy dialog ───────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--layer-overlay);
  padding: 24px;
}

.modal-dialog {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--text-heading-sm);
  color: var(--ink);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--ink-muted);
  line-height: 1;
  padding: 4px;
  border-radius: var(--radius-sm);
}

.modal-close:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.modal-close:focus-visible,
.asin-drawer-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-navy) 28%, transparent);
  outline-offset: 2px;
}

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

/* ─── §3: Widget states — unified family ────────────────────────────── */
/* tag glyph (mono pill + colored dot) shared across all 4 states so a
   widget in different moods reads as the same widget. */
.widget-state {
  padding: 18px 20px;
  display: grid;
  gap: 10px;
}

.widget-state .state-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.widget-state .state-tag .pip {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink-muted);
}

.widget-state.loading .state-tag .pip {
  background: var(--ink-muted);
  animation: clarity-state-pulse 1.4s ease-in-out infinite;
}

.widget-state.error .state-tag .pip {
  background: var(--negative);
}

.widget-state.empty .state-tag .pip {
  background: #c4cdd9;
}

.widget-state.unavailable .state-tag .pip {
  background: var(--warning);
}

.widget-state h4 {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.widget-state p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}

.widget-state .state-actions {
  margin-top: 12px;
  display: flex;
  gap: 6px;
}

@keyframes clarity-state-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Loading skeleton — shimmer that matches actual content shape. */
.skeleton-bar {
  background: linear-gradient(90deg, #eef2f7 0%, #f7f9fc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: clarity-skeleton-shimmer 1.6s linear infinite;
  border-radius: 6px;
}

@keyframes clarity-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Action table — horizontal scroll for wide column counts ─────── */
/* The "Seller account sync queue" table renders 17 columns. Inside
   .detail-table-wrap (overflow:hidden) those columns get squished to
   one or two characters per cell. New .action-table-scroll wraps just
   the <table> in a horizontally-scrollable container, leaving the
   toolbar at full visible width above it. */
.action-table-wrap {
  overflow: visible;
}

.action-table-wrap .action-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--line);
  /* Keep the bottom radius from the parent .detail-table-wrap visible —
     scrollable child needs its own border-radius treatment so the
     scrollbar doesn't sit on top of a sharp corner. */
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  /* Subtle shadow on the right edge hints "scrollable" without a
     dedicated chrome element. */
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 100% 0,
    linear-gradient(to right, rgba(20, 39, 63, 0.08), rgba(20, 39, 63, 0)),
    linear-gradient(to left, rgba(20, 39, 63, 0.08), rgba(20, 39, 63, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

.action-table-wrap .action-table {
  min-width: max-content;
  /* The default border-radius from .detail-table on a wider-than-wrap
     table looks weird — let the wrap handle radii. */
  border-radius: 0;
}

/* Make sure column cells don't wrap awkwardly; horizontal scroll is the
   point. Long text inside cells (notes, dates) can still wrap within
   the cell's natural width. */
.action-table-wrap .action-table th,
.action-table-wrap .action-table td {
  white-space: normal;
  vertical-align: top;
}

/* ─── Sidebar favorites (top section) ──────────────────────────────── */
/* Renders as a grouped quick-access area. Empty favorites keep a small
   prompt so the star affordance has somewhere to point. */

.sidebar-favorites {
  display: grid;
  gap: 4px;
  padding: 6px 4px 8px;
  border-bottom: 1px solid var(--sidebar-line);
  margin-bottom: 4px;
}

.sidebar-favorites .panel-label-row {
  padding: 0 6px;
  margin-bottom: 4px;
}

/* Sidebar panel labels (Favorites / Settings / Session) share the quiet,
   sentence-case treatment of the Workspace/Channel zone labels for one
   coherent left-rail voice. */
.sidebar-panel .panel-label,
.sidebar-favorites .panel-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #9aa7b8;
  text-transform: none;
}

.sidebar-favorites-list {
  display: grid;
  gap: 8px;
}

.sidebar-favorites-group {
  display: grid;
  gap: 2px;
}

.sidebar-favorites-group-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 8px 2px;
  color: #8a98aa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sidebar-favorites-group-icon {
  width: 14px;
  min-width: 14px;
  height: 14px;
  color: #8a97a8;
}

.sidebar-favorites-group-icon svg {
  width: 14px;
  height: 14px;
}

.sidebar-favorites-empty {
  margin: 1px 6px 2px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.34);
  color: var(--sidebar-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* Re-skin the existing .favorite-link class for grouped quick-access rows.
   The IIFE used .favorite-link for old DOM that's now dead; we own it. */
.sidebar-favorites .favorite-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 27px;
  padding: 5px 7px 5px 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sidebar-ink);
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.sidebar-favorites .favorite-link:hover {
  background: rgba(255, 255, 255, 0.46);
  border-color: rgba(174, 156, 126, 0.18);
}

.sidebar-favorites .favorite-link.active {
  background: rgba(255, 255, 255, 0.64);
  border-color: rgba(133, 187, 218, 0.26);
  color: var(--sidebar-ink);
}

.sidebar-favorites .favorite-link.is-dragging {
  opacity: 0.45;
  outline: 2px dashed rgba(133, 187, 218, 0.6);
}

.favorite-link-handle {
  font-size: 12px;
  color: var(--sidebar-muted);
  letter-spacing: -1px;
  cursor: grab;
  user-select: none;
}

.sidebar-favorites .favorite-link.is-dragging .favorite-link-handle,
.favorite-link-handle:active {
  cursor: grabbing;
}

.favorite-link-label {
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

/* ─── Clickable star (was a decorative span) ────────────────────────── */
/* The star next to each nav row is now a button. Hover/focus surfaces
   make the affordance visible without changing the layout. */

.nav-favorite-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 13px;
  border-radius: 4px;
  color: var(--sidebar-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
  /* Star is keyboard-focusable now (role=button + tabIndex=0).
     Remove the default outline; provide our own focus ring. */
  outline: none;
}

.nav-favorite-mark:hover,
.nav-favorite-mark:focus-visible {
  color: var(--sidebar-ink);
  background: rgba(133, 187, 218, 0.16);
}

.nav-favorite-mark.is-active {
  color: var(--brand-navy);
}

.nav-favorite-mark svg {
  display: block;
}

.nav-favorite-mark.is-active svg {
  fill: currentColor;
}

.nav-favorite-mark.is-active:hover,
.nav-favorite-mark.is-active:focus-visible {
  color: #d75c58; /* hint at "click to remove" without jumping straight to red */
  background: rgba(215, 92, 88, 0.12);
}

/* === END CLARITY AUDIT (2026-04) === */

/* === SYNC-STATE VISIBILITY (2026-06) ===
   Shared chip + spinner for per-account sync phase (syncing | live |
   attention). Used by the React clients grid, the header status chip,
   and the client/channel switcher tree. */

.sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.sync-chip-syncing {
  color: var(--brand-deep, #1f2a44);
  background: rgba(133, 187, 218, 0.18);
  border-color: rgba(133, 187, 218, 0.45);
}

.sync-chip-live {
  color: var(--positive);
  background: var(--positive-soft, #e7f5ee);
  border-color: rgba(45, 156, 103, 0.3);
}

.sync-chip-attention {
  color: var(--warning);
  background: var(--warning-soft, #fff4df);
  border-color: rgba(185, 133, 48, 0.35);
}

/* Channel-tree leaf dots pick up the account's sync phase. */
.channel-tree-leaf-dot.is-syncing {
  background: #3b82f6;
  opacity: 1;
  animation: sync-dot-pulse 1.2s ease-in-out infinite;
}

.channel-tree-leaf-dot.is-live {
  background: var(--positive);
  opacity: 1;
}

.channel-tree-leaf-dot.is-attention {
  background: var(--warning);
  opacity: 1;
}

@keyframes sync-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.55; }
}

/* Overview "still syncing" banner — dismissible, sits above the grid. */
.sync-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(133, 187, 218, 0.45);
  background: linear-gradient(180deg, rgba(231, 242, 248, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
  color: var(--ink, #1f2937);
  font-size: 0.88rem;
}

.sync-banner.is-attention {
  border-color: rgba(185, 133, 48, 0.4);
  background: linear-gradient(180deg, var(--warning-soft, #fff4df) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.sync-banner-copy { flex: 1 1 auto; min-width: 0; }

.sync-banner-copy strong { display: block; font-size: 0.9rem; }

.sync-banner-copy span { color: var(--ink-muted); font-size: 0.82rem; }

.sync-banner-dismiss {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ── Brand Performance Table ─────────────────────────────────────────────── */

.brand-perf-table-wrap {
  overflow-x: auto;
  width: 100%;
}

.brand-perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  table-layout: auto;
}

.brand-perf-table thead {
  background: rgba(237, 244, 251, 0.88);
}

.brand-perf-table th {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.brand-perf-table th.num,
.brand-perf-table td.num {
  text-align: right;
}

.brand-perf-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}

.brand-row--expandable {
  cursor: pointer;
}

.brand-row--expandable:hover td {
  background: rgba(59, 130, 246, 0.05);
}

.brand-row--open td {
  background: rgba(59, 130, 246, 0.07);
  font-weight: 600;
}
.brand-row--focused td {
  background: rgba(59, 130, 246, 0.14);
  outline: 2px solid rgba(59, 130, 246, 0.4);
  outline-offset: -2px;
}

.brand-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.expand-chevron {
  display: inline-block;
  font-size: 0.65rem;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.expand-chevron.open {
  transform: rotate(90deg);
}

/* Sub-table: top ASINs per brand */

.brand-asin-subrow td {
  padding: 0;
  background: rgba(248, 252, 255, 0.7);
  border-bottom: 2px solid var(--line);
}

.brand-asin-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.brand-asin-subtable th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 7px 16px 7px 32px;
  text-align: left;
  background: rgba(220, 235, 252, 0.4);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.brand-asin-subtable th.num,
.brand-asin-subtable td.num {
  text-align: right;
  padding-right: 16px;
}

.brand-asin-subtable td {
  padding: 8px 16px 8px 32px;
  border-bottom: 1px solid rgba(var(--line-rgb, 210, 225, 240), 0.5);
  color: var(--ink);
  vertical-align: middle;
}

.brand-asin-subtable tbody tr:last-child td {
  border-bottom: none;
}

.brand-asin-subtable tbody tr:hover td {
  background: rgba(59, 130, 246, 0.04);
}

.asin-code {
  display: inline-flex;
  width: fit-content;
  font-size: 0.8rem;
  background: rgba(59, 130, 246, 0.08);
  color: var(--brand-navy);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.asin-product-cell {
  min-width: 260px;
}

.asin-product-title {
  color: var(--ink-soft);
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.asin-title {
  color: var(--ink-soft);
  max-width: 280px;
}

.brand-perf-footer-note {
  font-size: 0.78rem;
  color: var(--ink-muted);
  padding: 10px 14px 0;
  margin: 0;
}

.sync-banner-dismiss:hover { background: rgba(15, 23, 42, 0.06); }

/* ── Content Optimization — stacked panel layout ─────────────────────────── */
.content-opt-split {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-column: 1 / -1;
}
.content-opt-table {
  width: 100%;
  min-width: 0;
  border-bottom: 1px solid var(--line, rgba(148,163,184,0.12));
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.content-opt-card { width: 100%; min-width: 0; }

/* ── Content Optimization (suggestion card + opportunity diff) ───────────── */
.content-card { display: flex; flex-direction: column; gap: var(--space-xl); }
.content-card-empty,
.content-text-placeholder {
  color: var(--ink-muted); font-size: var(--text-sm); padding: var(--space-md) 0;
}
.content-field {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-lg); background: var(--surface-soft);
}
.content-field-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl);
}
@media (max-width: 720px) { .content-field-grid { grid-template-columns: 1fr; } }
.content-col { min-width: 0; }
.content-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-muted); margin-bottom: var(--space-sm);
}
.content-text { font-size: var(--text-base); line-height: 1.5; color: var(--ink); }
.content-text-suggested { font-weight: 500; }
.content-diff-add {
  background: var(--positive-soft); color: var(--positive);
  border-radius: var(--radius-xs); padding: 0 2px; font-weight: 600;
}
.content-diff-remove {
  background: var(--negative-soft, #fee2e2); color: var(--negative, #ef4444);
  border-radius: var(--radius-xs); padding: 0 2px; font-weight: 600; opacity: 0.75;
}
.content-bullets { margin: 0; padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.content-bullets li { font-size: var(--text-sm); line-height: 1.5; color: var(--ink); }
.content-needs-fetch {
  font-size: var(--text-sm); color: var(--warning); background: var(--warning-soft);
  border: 1px dashed var(--warning); border-radius: var(--radius-sm);
  padding: var(--space-md); line-height: 1.45;
}
.content-evidence {
  margin-top: var(--space-md); padding: var(--space-md);
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); display: flex; flex-direction: column; gap: var(--space-sm);
}
.content-evidence-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.content-evidence-kw { font-weight: 700; color: var(--ink); font-size: var(--text-sm); }
.content-evidence-nums { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-xs); color: var(--ink-muted); }
.content-evidence-nums strong { color: var(--ink); }
.content-evidence-rule { font-size: var(--text-xs); color: var(--ink-muted); }
.content-evidence-warn { font-size: var(--text-xs); color: var(--warning); }
.content-kw-block-btn {
  font-size: 10px; padding: 1px 6px; border-radius: 3px; line-height: 1.6;
  border: 1px solid rgba(239,68,68,0.4); background: rgba(239,68,68,0.08);
  color: #ef4444; cursor: pointer; white-space: nowrap;
}
.content-kw-block-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.content-kw-block-btn:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; }
.content-banner {
  font-size: var(--text-sm); border-radius: var(--radius-sm); padding: var(--space-md);
  line-height: 1.45; border: 1px solid var(--line);
}
.content-banner-warn { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.content-banner-err { background: var(--negative-soft); border-color: var(--negative); color: var(--negative); }
.content-banner-info { background: var(--surface-muted); color: var(--ink-muted); border-color: var(--ink-muted, #64748b); }
/* Secondary action buttons (Copy all, Track in ClickUp, Create case, Apply in SC) */
.content-action-btn {
  font-size: var(--text-xs); font-weight: 600; padding: 0 10px;
  height: 30px; display: inline-flex; align-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer;
  white-space: nowrap; text-decoration: none; gap: 4px;
}
.content-action-btn:hover:not(:disabled) { background: var(--surface-muted); }
.content-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.content-action-btn:focus-visible { outline: 2px solid var(--brand-navy, #2e6eb2); outline-offset: 2px; }
.content-action-btn-success:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
.content-action-btn-warn:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.content-action-btn-success {
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.08);
  color: #10b981;
}
.content-action-btn-success:hover { background: rgba(16,185,129,0.14); }
.content-action-btn-warn {
  border-color: rgba(245,158,11,0.35);
  background: rgba(245,158,11,0.08);
  color: #f59e0b;
}
.content-action-btn-warn:hover { background: rgba(245,158,11,0.14); }

/* Seller Central login warning modal */
.content-sc-backdrop {
  position: fixed; inset: 0; z-index: var(--layer-overlay);
  background: rgba(0,0,0,0.55); display: flex;
  align-items: center; justify-content: center;
}
.content-sc-modal {
  background: var(--surface, #1e293b); border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 10px; padding: 24px 24px 20px; max-width: 400px; width: 90%;
  box-shadow: 0 12px 48px rgba(0,0,0,0.4);
}
.content-sc-modal-title {
  font-size: 15px; font-weight: 700; color: var(--text-primary, #e2e8f0);
  margin-bottom: 10px;
}
.content-sc-modal-body {
  font-size: 13px; color: var(--ink-muted, #94a3b8); line-height: 1.55;
  margin: 0 0 14px;
}
.content-sc-modal-check {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--ink-muted, #94a3b8); cursor: pointer; margin-bottom: 16px;
}
.content-sc-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}

.content-generate-btn {
  font-size: var(--text-sm); font-weight: 600; padding: 7px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--brand-navy, #2e6eb2);
  background: var(--brand-navy, #2e6eb2); color: #fff; cursor: pointer; white-space: nowrap;
}
.content-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.content-generate-btn:disabled:hover { filter: none; }
.content-generate-btn:not(:disabled):hover { filter: brightness(0.9); }
.content-generate-btn:focus-visible { outline: 2px solid var(--brand-navy, #2e6eb2); outline-offset: 2px; }
.content-generate-wrap { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
.content-generate-hint { font-size: var(--text-xs); color: var(--ink-muted); }
.content-copy-btn {
  font-size: var(--text-xs); font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-xs); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-muted); cursor: pointer;
}
.content-copy-btn:hover { background: var(--surface-muted); color: var(--ink); }
.content-copy-btn:focus-visible { outline: 2px solid var(--brand-navy, #2e6eb2); outline-offset: 2px; }

/* ── Content Compliance panel ────────────────────────────────────────────── */
.content-compliance { margin-top: var(--space-md); }
.content-compliance-pass {
  background: var(--positive-soft); border: 1px solid var(--positive);
  color: var(--positive); border-radius: var(--radius-sm);
  padding: var(--space-md); font-size: var(--text-sm); font-weight: 600;
}
.content-compliance-warn {
  background: var(--warning-soft); border: 1px solid var(--warning);
  color: var(--warning); border-radius: var(--radius-sm);
  padding: var(--space-md); font-size: var(--text-sm);
}
.content-compliance-critical {
  background: var(--negative-soft); border: 1px solid var(--negative);
  color: var(--negative); border-radius: var(--radius-sm);
  padding: var(--space-md); font-size: var(--text-sm);
}
.content-compliance-list {
  margin: var(--space-sm) 0 0; padding-left: var(--space-lg);
  display: flex; flex-direction: column; gap: 4px;
}
.content-compliance-item { font-size: var(--text-xs); line-height: 1.4; }

/* ─── Client Picker — auth-style standalone account selector ─────────────── */

/* Shell transform: hide dashboard chrome, show clean background */
body.is-picker-mode .sidebar { display: none !important; }
body.is-picker-mode .app-shell { grid-template-columns: 1fr !important; }
body.is-picker-mode .workspace {
  background-color: #f4f8fc;
  background-image:
    radial-gradient(circle at top left, rgba(133, 187, 218, 0.22), transparent 32%),
    linear-gradient(180deg, #f7fbff 0%, #f4f8fc 100%);
  background-repeat: no-repeat;
}
body.is-picker-mode .workspace-header { display: none !important; }
body.is-picker-mode .workspace-context-bar,
body.is-picker-mode .filter-bar,
body.is-picker-mode .group-tabs,
body.is-picker-mode .site-footer { display: none !important; }
/* Global banner slots live outside .app-shell (direct <body> children), so the
   sidebar/header hides above don't reach them. Suppress them in picker mode so
   the account selector stays a clean checkpoint (no onboarding/CS chrome). */
body.is-picker-mode #onboarding-banner-slot,
body.is-picker-mode #cs-banner-slot { display: none !important; }
body.is-picker-mode #page-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  grid-column: unset !important;
}

/* The React section fills the full viewport */
.client-picker-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Frosted header bar — identical to auth.css .auth-header so the picker
   reads as a continuation of the login flow. */
.client-picker-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(211, 223, 239, 0.6);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(1.2) blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.client-picker-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.client-picker-logo-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}

.client-picker-logo-wordmark {
  display: block;
  width: 166px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.client-picker-logo-lockup {
  display: block;
  width: 226px;
  max-width: min(226px, calc(100vw - 48px));
  height: auto;
  object-fit: contain;
}

/* Centered card area — mirrors auth.css .auth-main + .auth-card */
.client-picker-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px 64px;
}

.client-picker-card {
  width: min(480px, 100%);
  background: #fff;
  border: 1px solid #d3dfef;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(26, 48, 79, 0.08);
  overflow: hidden;
}

.client-picker-card-head {
  padding: 32px 32px 18px;
}
.client-picker-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7386a4;
  font-weight: 700;
}
.client-picker-card-head h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.1;
  color: var(--navy, #12233f);
  font-family: var(--font-heading);
}
.client-picker-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #5d708f;
}

/* Search — auth input style, slightly shorter */
.client-picker-search-wrap { padding: 0 32px 8px; }
.client-picker-search {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #d3dfef;
  padding: 0 14px;
  font-size: 15px;
  color: #20324d;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.client-picker-search:focus {
  outline: 0;
  border-color: #85bbda;
  box-shadow: 0 0 0 3px rgba(133, 187, 218, 0.25);
}

/* List + rows — channel-tree styling, scrolls when long (like channel panel) */
.client-picker-list {
  display: flex;
  flex-direction: column;
  padding: 6px 12px 14px;
  max-height: 56vh;
  overflow-y: auto;
}

.client-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #20324d;
  transition: background 100ms ease;
}
.client-picker-row:hover { background: #f3f4f6; }
/* Active/current row must out-contrast hover (CP-6): a navy left accent bar
   plus a stronger tint, so the row the user came from reads as selected at a
   glance rather than fainter than whatever is hovered. */
.client-picker-row.is-active {
  background: #e3eefb;
  box-shadow: inset 3px 0 0 var(--navy, #12233f);
}
.client-picker-row.is-active:hover { background: #d8e7f8; }
.client-picker-row:focus-visible { outline: 2px solid #85bbda; outline-offset: -2px; }

/* Trailing forward-navigation chevron (CP-8) — sits at the row's right edge. */
.client-picker-row-caret {
  display: inline-flex;
  align-items: center;
  color: #9aa9c0;
  flex-shrink: 0;
}
.client-picker-row:hover .client-picker-row-caret { color: #60748f; }
.client-picker-row-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 5px;
  overflow: hidden;
  color: #60748f;
  opacity: 0.75;
}
.client-picker-row-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.client-picker-row-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Current" pill — a LOCATION marker (where you are), not a status. It must be
   visually distinct from the green/amber sync-phase pills it can sit beside on
   the active row, so it's navy-on-pale-blue to echo the selected row's accent
   rather than collide with the green "Live" badge (H2). */
.client-picker-row-active {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--navy, #12233f);
  background: #d4e4f7;
  border: 1px solid #9fc0e6;
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Multi-channel client: expandable group. The client-name row toggles the
   channel list (it does not switch); switching is on a channel or the
   "Switch to {name}" button. */
.client-picker-group { display: flex; flex-direction: column; }
.client-picker-row-meta {
  font-size: 0.72rem;
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.client-picker-disclosure { transition: transform 140ms ease; }
.client-picker-disclosure.is-open { transform: rotate(90deg); }
.client-picker-channels {
  display: flex;
  flex-direction: column;
  padding: 2px 0 8px 0;
  background: #f7fafd;
  border-bottom: 1px solid #eef2f7;
}
.client-picker-channel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 9px 18px 9px 40px;
  font: inherit;
  color: var(--ink);
}
.client-picker-channel:hover { background: #eef4fa; }
.client-picker-channel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-navy); flex-shrink: 0;
}
.client-picker-channel-name {
  flex: 1; min-width: 0;
  font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.client-picker-channel-caret { color: #9fb0c6; flex-shrink: 0; display: inline-flex; }
.client-picker-channel:hover .client-picker-channel-caret { color: var(--brand-navy); }
.client-picker-switch-all {
  margin: 6px 18px 2px 40px;
  align-self: flex-start;
  border: 1px solid var(--brand-navy);
  background: transparent;
  color: var(--brand-navy);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
}
.client-picker-switch-all:hover { background: rgba(46,110,178,0.08); }

.client-picker-empty {
  padding: 18px 14px;
  font-size: 0.88rem;
  color: #5d708f;
  text-align: center;
}

/* Sync-phase status badge (CP-3) — small, neutral by default. */
.client-picker-row-phase {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
.client-picker-row-phase.is-ready {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.client-picker-row-phase.is-syncing {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.client-picker-row-phase.is-pending {
  color: #92600a;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.client-picker-row-phase.is-error {
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecaca;
}
/* "Attention" — failed/stale sync needing a human. Amber, matched to the
   canonical .sync-chip-attention so the picker, header chip and Clients table
   all read the same warning color (H1). */
.client-picker-row-phase.is-attention {
  color: var(--warning, #b98530);
  background: var(--warning-soft, #fff4df);
  border: 1px solid rgba(185, 133, 48, 0.35);
}
/* Unknown/unrecognized phase — neutral grey, never green (H1 safe default). */
.client-picker-row-phase.is-neutral {
  color: #5d708f;
  background: #f1f4f9;
  border: 1px solid #d8e0ec;
}

/* Error state with a retry control (CP-9) */
.client-picker-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 18px;
}
.client-picker-retry {
  border: 1px solid var(--navy, #12233f);
  background: transparent;
  color: var(--navy, #12233f);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.client-picker-retry:hover { background: var(--navy, #12233f); color: #fff; }

/* Cancel / "Back to {client}" footer — mid-session only (CP-1) */
.client-picker-foot {
  padding: 6px 32px 22px;
}
.client-picker-cancel {
  width: 100%;
  border: 1px solid #d3dfef;
  background: #fff;
  color: var(--navy, #12233f);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 12px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.client-picker-cancel:hover { background: #f3f6fb; border-color: #b9cbe6; }
.client-picker-cancel:focus-visible {
  outline: 2px solid #85bbda;
  outline-offset: 2px;
}

/* Channel tree "View all clients" footer button */
.channel-tree-footer {
  padding: 6px 8px;
  border-top: 1px solid rgba(211, 223, 239, 0.5);
  margin-top: 4px;
}
.channel-tree-view-all {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 0.78rem;
  color: var(--sidebar-ink-muted, #8da0b8);
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.channel-tree-view-all:hover {
  background: rgba(133, 187, 218, 0.12);
  color: var(--sidebar-ink, #e2eaf4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Strategy Section — Growth Plan + Channel Mix + Milestones
   ───────────────────────────────────────────────────────────────────────────── */

/* Slide-over panel */
.slide-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 50, 0.5);
  z-index: var(--layer-overlay);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.slide-panel {
  background: var(--surface);
  width: min(740px, 92vw);
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(15, 30, 50, 0.2);
}
.slide-panel-header {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
.slide-panel-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.strategy-panel-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.slide-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slide-panel-subtitle {
  font-size: 10px;
  color: var(--ink-muted);
  font-family: monospace;
}
.slide-panel-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.slide-panel-close:hover { background: var(--surface-muted); }
.slide-panel-body { padding: 20px; flex: 1; }
.slide-panel-loading,
.slide-panel-error {
  padding: 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}
.slide-panel-error { color: var(--negative); }

/* Growth-plan KPI strip */
.strategy-gp-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.strategy-gp-kpi {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.strategy-gp-kpi.is-delta {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.strategy-gp-kpi-lab {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.strategy-gp-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}
.strategy-gp-kpi-sub {
  font-size: 10px;
  color: var(--ink-muted);
  margin-top: 1px;
}

/* Section heading */
.strategy-gp-section-h {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.strategy-gp-section-h .desc {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
}

/* Growth ramp */
.strategy-gp-ramp {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}
.strategy-gp-ramp-step {
  display: grid;
  grid-template-columns: 48px 120px 80px auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.strategy-gp-ramp-step:last-child { border-bottom: none; }
.strategy-gp-ramp-step.is-today { opacity: 0.65; }
.strategy-gp-ramp-num {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  grid-column: 1;
  grid-row: 1;
}
.strategy-gp-ramp-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  grid-column: 2;
  grid-row: 1;
}
.strategy-gp-ramp-window {
  font-size: 10px;
  color: var(--ink-muted);
  grid-column: 3;
  grid-row: 1;
}
.strategy-gp-ramp-sessions {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  grid-column: 4;
  grid-row: 1;
}
.strategy-gp-ramp-delta {
  font-size: 10px;
  color: var(--brand-navy);
  font-weight: 600;
  grid-column: 5;
  grid-row: 1;
  white-space: nowrap;
}
.strategy-gp-ramp-bar-col {
  grid-column: 2 / 6;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.strategy-gp-ramp-bar-wrap {
  flex: 1;
  background: var(--line-soft);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
}
.strategy-gp-ramp-bar {
  height: 100%;
  background: var(--brand-navy);
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}
.strategy-gp-ramp-pct {
  font-size: 9px;
  color: var(--ink-muted);
  white-space: nowrap;
  min-width: 48px;
  text-align: right;
}
.strategy-gp-ramp-channels {
  grid-column: 2 / 6;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 3px;
}
.strategy-gp-ch-pill {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-navy);
  letter-spacing: 0.02em;
}
.strategy-gp-ch-pill.ch-organic      { background: var(--positive-soft); color: var(--positive); }
.strategy-gp-ch-pill.ch-on-paid      { background: var(--brand-soft); color: var(--brand-navy); }
.strategy-gp-ch-pill.ch-off-paid     { background: #f3e8ff; color: #7c3aed; }
.strategy-gp-ch-pill.ch-affiliate    { background: var(--accent-soft); color: #b45309; }
.strategy-gp-ch-pill.ch-retargeting  { background: var(--negative-soft); color: var(--negative); }

/* Channel cards */
.strategy-gp-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.strategy-gp-channel-card {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.strategy-gp-channel-card.ch-organic      { border-left-color: var(--positive); }
.strategy-gp-channel-card.ch-on-paid      { border-left-color: var(--brand-navy); }
.strategy-gp-channel-card.ch-off-paid     { border-left-color: #7c3aed; }
.strategy-gp-channel-card.ch-affiliate    { border-left-color: var(--accent); }
.strategy-gp-channel-card.ch-retargeting  { border-left-color: var(--negative); }

.strategy-gp-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}
.strategy-gp-card-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.strategy-gp-card-mix {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface-muted);
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.strategy-gp-card-activation {
  font-size: 10px;
  color: var(--ink-muted);
  font-style: italic;
}
.strategy-gp-card-cost {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.strategy-gp-card-outcome {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.strategy-gp-block-h {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 2px;
  margin-top: 4px;
}
.strategy-gp-card-desc,
.strategy-gp-card-why {
  font-size: 10px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}
.strategy-gp-card-directional {
  font-size: 9px;
  color: var(--warning);
  font-weight: 600;
  font-style: italic;
  margin-top: 4px;
}

/* Spend summary */
.strategy-gp-spend-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--surface-muted);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.strategy-gp-spend-item-lab {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 3px;
}
.strategy-gp-spend-item-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  display: block;
}

/* Milestones */
.strategy-milestone-phase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.strategy-milestone-phase {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}
.strategy-milestone-phase-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.strategy-milestone-phase-window {
  font-size: 10px;
  color: var(--ink-muted);
}
.strategy-milestone-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.strategy-milestone-item {
  font-size: 11px;
  color: var(--ink);
}
.strategy-milestone-item.is-done { color: var(--ink-muted); }
.strategy-milestone-label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  cursor: pointer;
  line-height: 1.45;
}
.strategy-milestone-check {
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--positive);
}
.strategy-milestone-item.is-done .strategy-milestone-label {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Progress footer */
.strategy-panel-progress-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}
.strategy-panel-progress-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.strategy-panel-progress-bar-fill {
  height: 100%;
  background: var(--positive);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.strategy-panel-progress-label {
  font-size: 10px;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Shortfall warning */
.strategy-panel-warning {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--warning);
  font-size: 12px;
  margin-bottom: 12px;
}

.experiment-monitoring-table {
  width: 100%;
  min-width: 1100px;
  table-layout: fixed;
  border-collapse: collapse;
}
.experiment-monitoring-table th,
.experiment-monitoring-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.experiment-monitoring-table th { background: var(--surface-muted); }
.experiment-monitoring-table p { margin: var(--space-sm) 0 0; }
.experiment-monitoring-scroll-hint { color: var(--ink-muted); font-size: 12px; }

/* Overview list */
.strategy-overview-inner { display: flex; flex-direction: column; gap: 16px; }
.strategy-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.strategy-kpi-tile {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.strategy-kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.strategy-kpi-value { font-size: 20px; font-weight: 700; color: var(--ink); }
.strategy-kpi-value--sm { font-size: 13px; font-weight: 600; }
.strategy-table-wrap { overflow-x: auto; }
.strategy-table { width: 100%; border-collapse: collapse; }

/* Standard data-table look for the ASIN Plans list — mirrors .detail-table
   header/cell padding + border treatment so the strategy table matches the
   rest of the platform's tables. */
.strategy-table thead {
  background: var(--surface-soft);
}
.strategy-table th,
.strategy-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.strategy-table th {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-soft);
}
.strategy-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Row-hover highlight for clickable ASIN Plan rows — matches the
   .detail-table tbody tr:hover transition convention, using --surface-soft
   for a clear, standard hover surface + pointer affordance. */
.strategy-table tbody tr.strategy-row {
  transition: background var(--transition-fast);
}
.strategy-table tbody tr.strategy-row.clickable-row {
  cursor: pointer;
}
.strategy-table tbody tr.strategy-row.clickable-row:hover {
  background: var(--surface-soft);
}

.strategy-product-cell { display: flex; align-items: center; gap: 8px; }
.strategy-asin-thumb {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.strategy-product-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.strategy-product-title {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.strategy-asin-badge {
  font-size: 9px;
  font-family: monospace;
  color: var(--ink-muted);
  background: var(--surface-muted);
  padding: 1px 4px;
  border-radius: 3px;
  width: fit-content;
}
.strategy-progress-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 90px;
}
.strategy-progress-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  min-width: 40px;
}
.strategy-progress-bar-fill { height: 100%; background: var(--positive); border-radius: 3px; }
.strategy-progress-text { font-size: 10px; color: var(--ink-muted); white-space: nowrap; }
.strategy-gap-negative { color: var(--warning); font-weight: 600; font-size: 12px; }
.strategy-gap-met { color: var(--positive); font-weight: 700; }
.strategy-actions-cell { display: flex; gap: 4px; }
.strategy-error-banner {
  background: var(--negative-soft);
  border: 1px solid var(--negative);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--negative);
  font-size: 12px;
}

/* Keyword Intelligence Uploader */
.ki-uploader-inner { display: flex; flex-direction: column; gap: 20px; }
.ki-inventory-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ki-inventory-tile {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ki-inventory-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.ki-inventory-value { font-size: 20px; font-weight: 700; color: var(--ink); }

.ki-upload-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 580px;
  padding: 20px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ki-form-title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0; }
.ki-form-desc { font-size: 11px; color: var(--ink-muted); margin: 0; line-height: 1.5; }
.ki-form-row { display: flex; flex-direction: column; gap: 4px; }
.ki-asin-input { max-width: 200px; }
.ki-dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--surface);
}
.ki-dropzone:hover, .ki-dropzone--over {
  border-color: var(--brand-navy);
  background: var(--brand-soft);
}
.ki-dropzone--has-file { border-color: var(--positive); border-style: solid; background: var(--positive-soft); }
.ki-dropzone-prompt { font-size: 12px; color: var(--ink-muted); }
.ki-dropzone-filename { font-size: 12px; font-weight: 600; color: var(--positive); }

.ki-format-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
.ki-format-hint-label { font-weight: 600; white-space: nowrap; }
.ki-columns-hint {
  font-family: monospace;
  font-size: 10px;
  background: var(--surface-muted);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  display: block;
  margin-top: 4px;
  line-height: 1.7;
}
.ki-template-btn { margin-top: 6px; }
.ki-upload-btn { align-self: flex-start; }
.ki-upload-error { max-width: 480px; }
.ki-upload-success {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--positive);
  background: var(--positive-soft);
  border: 1px solid var(--positive);
  border-radius: 6px;
  padding: 8px 12px;
}
.ki-rejected-note { color: var(--warning); }
.ki-history-table { width: 100%; }
.ki-filename-cell {
  font-family: monospace;
  font-size: 11px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 700px) {
  .strategy-gp-kpis { grid-template-columns: 1fr; }
  .strategy-gp-spend-summary { grid-template-columns: repeat(2, 1fr); }
  .strategy-gp-channel-grid { grid-template-columns: 1fr; }
  .strategy-milestone-phase-grid { grid-template-columns: 1fr; }
  .strategy-gp-ramp-step {
    grid-template-columns: 40px 1fr auto;
  }
  .strategy-kpi-strip { grid-template-columns: 1fr; }
  .ki-inventory-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Strategy ASIN full page ──────────────────────────────────────────────── */

.strategy-asin-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--surface);
  grid-column: 1 / -1;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.strategy-asin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.strategy-asin-page-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.strategy-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--brand-navy);
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  align-self: flex-start;
}
.strategy-back-btn:hover { color: var(--ink); }

.strategy-asin-page-product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.strategy-asin-page-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.strategy-asin-page-subtitle {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: monospace;
  margin-top: 2px;
}

.strategy-asin-page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.strategy-validate-note,
.strategy-share-note {
  font-size: 11px;
  color: var(--positive);
  font-weight: 500;
}

.strategy-asin-page-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (max-width: 640px) {
  .strategy-asin-page-header {
    flex-direction: column;
  }

  .strategy-asin-page-header-left,
  .strategy-asin-page-header-actions {
    width: 100%;
  }

  .strategy-asin-page-header-actions {
    justify-content: flex-start;
  }
}

.strategy-page-loading,
.strategy-page-error {
  padding: 24px;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  text-align: center;
}
.strategy-page-error { color: var(--negative); }

/* ── ASIN detail tab bar ──────────────────────────────────────────────────── */

.strategy-asin-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.strategy-asin-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.strategy-asin-tab:hover { color: var(--ink); }
.strategy-asin-tab.is-active {
  color: var(--accent, var(--navy));
  border-bottom-color: var(--accent, var(--navy));
}

.strategy-targets-manual {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--line);
}
.strategy-targets-manual-header h2 {
  margin: 0;
  font-size: var(--text-heading-sm);
  color: var(--ink);
}
.strategy-targets-manual-header p {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ── AsinKeywordsTab ──────────────────────────────────────────────────────── */

.asin-kw-tab {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.asin-kw-section {
  padding: 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.asin-kw-section:last-child { border-bottom: none; }

.asin-kw-section-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asin-kw-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.asin-kw-section-sub {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.asin-kw-dropzone {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--bg);
}
.asin-kw-dropzone:hover,
.asin-kw-dropzone.drag-over {
  border-color: var(--accent, var(--navy));
  background: color-mix(in srgb, var(--accent, var(--navy)) 4%, transparent);
}
.asin-kw-dropzone-hint {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.asin-kw-dropzone-link {
  color: var(--accent, var(--navy));
  text-decoration: underline;
}
.asin-kw-dropzone-files {
  font-size: var(--text-sm);
  color: var(--ink);
  font-weight: 500;
}

.asin-kw-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.asin-kw-upload-success {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--positive);
}
.asin-kw-rejected { color: var(--negative); }

.asin-kw-history {
  margin-top: 4px;
}
.asin-kw-run-history {
  border-bottom: 1px solid var(--line-soft);
}
.asin-kw-run-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
}
.asin-kw-run-history > summary::marker { color: var(--ink-muted); }
.asin-kw-run-history > summary span:last-child {
  font-size: var(--text-xs);
  font-weight: 400;
}
.asin-kw-run-history[open] > summary { color: var(--ink); }
.asin-kw-run-history[open] .asin-kw-subsection { padding-bottom: var(--space-lg); }
.asin-kw-history-table { width: 100%; }
.asin-kw-filename {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  max-width: 260px;
}

.asin-kw-subsection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asin-kw-subsection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.asin-kw-subsection-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.asin-kw-subsection-sub {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.asin-kw-subsection-description {
  display: block;
  margin-top: 2px;
}

.asin-kw-cta-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.intel-no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  text-align: center;
}
.intel-no-data-icon { font-size: 2rem; }

.intel-kw-phrase {
  font-size: var(--text-sm);
}
.intel-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
}
.intel-evidence-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}
.intel-evidence-table th,
.intel-evidence-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft, var(--line));
  vertical-align: middle;
}
.intel-evidence-table thead th {
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}
.intel-evidence-table tbody tr:last-child td { border-bottom: 0; }
.intel-evidence-table .num-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.intel-targets-table { min-width: 540px; }
.intel-targets-table th:first-child,
.intel-targets-table td:first-child { width: 32%; }
.intel-action-col { width: 1%; white-space: nowrap; text-align: right; }
.intel-kw-table { width: 100%; }
.intel-kw-table th:first-child,
.intel-kw-table td:first-child { min-width: 220px; }
.intel-plan-lane {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}
.intel-competitor-table { min-width: 760px; }
.intel-competitor-identity {
  min-width: 310px;
  max-width: 460px;
}
.intel-competitor-identity strong,
.intel-competitor-identity > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intel-competitor-identity strong { font-size: var(--text-sm); }
.intel-competitor-identity > span {
  min-height: 18px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
}
.intel-cell-sub {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}
.intel-rec-val { color: var(--positive); font-weight: 600; }

@media (max-width: 640px) {
  .intel-evidence-table th,
  .intel-evidence-table td { padding: 9px 10px; }
  .intel-competitor-identity { max-width: 280px; }
}

/* ── Competitive analysis table ───────────────────────────────────────────── */

.strategy-competitors-table { width: 100%; }

.strategy-competitor-title {
  font-size: var(--text-xs);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strategy-competitors-empty {
  padding: 20px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  background: var(--surface-muted, #f7f9fc);
  border-radius: var(--radius-sm, 8px);
  border: 1px dashed var(--line);
  margin-bottom: 24px;
}

/* Legacy alias retained during link-action normalization. */
.btn-link { font-weight: 700; }

/* ── Intelligence Hub ──────────────────────────────────────────── */
.intel-page { padding: var(--space-4, 16px); }
.intel-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-4, 16px); }
.intel-page-header-left { display: flex; flex-direction: column; gap: 4px; }
.intel-page-title { font-size: var(--text-xl, 1.25rem); font-weight: 600; color: var(--ink, #1a202c); margin: 0; }
.intel-page-desc { font-size: var(--text-sm, 0.875rem); color: var(--ink-muted, #6b7280); margin: 0; }
.intel-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border, #e5e7eb); margin-bottom: var(--space-4, 16px); }
.intel-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 8px 20px; font-size: var(--text-sm, 0.875rem); font-weight: 500; color: var(--ink-muted, #6b7280); cursor: pointer; margin-bottom: -2px; }
.intel-tab--active { color: var(--accent, #1a5fd0); border-bottom-color: var(--accent, #1a5fd0); }
.intel-tab:hover:not(.intel-tab--active) { color: var(--ink, #1a202c); }

.intel-asin-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4, 16px); }
.intel-asin-chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 20px; background: var(--surface, #fff); cursor: pointer; font-size: var(--text-sm, 0.875rem); color: var(--ink, #1a202c); }
.intel-asin-chip--active { border-color: var(--accent, #1a5fd0); background: var(--accent-light, #eff6ff); color: var(--accent, #1a5fd0); }
.intel-asin-chip-thumb { width: 24px; height: 24px; object-fit: contain; border-radius: 3px; }
.intel-asin-chip-badge { font-size: var(--text-xs, 0.75rem); color: var(--ink-muted, #6b7280); font-family: monospace; }
.intel-asin-chip--active .intel-asin-chip-badge { color: var(--accent, #1a5fd0); }

.intel-kpi-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--space-4, 16px); }
.intel-kpi-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 8px; min-width: 140px; flex: 1; }
.intel-kpi-label { font-size: var(--text-xs, 0.75rem); color: var(--ink-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; }
.intel-kpi-value { font-size: var(--text-xl, 1.25rem); font-weight: 700; color: var(--ink, #1a202c); }
.intel-kpi-sub { font-size: var(--text-xs, 0.75rem); color: var(--ink-muted, #6b7280); }

.intel-section { margin-bottom: var(--space-6, 24px); }
.intel-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.intel-section-title { font-size: var(--text-base, 1rem); font-weight: 600; color: var(--ink, #1a202c); }
.intel-section-sub { font-size: var(--text-xs, 0.75rem); color: var(--ink-muted, #6b7280); }
.intel-targets-table { width: 100%; }
.intel-rec-val { font-weight: 700; color: var(--accent, #1a5fd0); }
.intel-kw-table { width: 100%; }
.intel-kw-phrase { font-size: var(--text-sm, 0.875rem); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intel-sync-note { font-size: var(--text-xs, 0.75rem); color: var(--positive, #16a34a); }

.intel-loading { padding: 32px; text-align: center; color: var(--ink-muted, #6b7280); font-size: var(--text-sm, 0.875rem); }
.intel-error { padding: 16px; background: var(--negative-light, #fef2f2); border: 1px solid var(--negative, #ef4444); border-radius: 6px; color: var(--negative, #dc2626); font-size: var(--text-sm, 0.875rem); }
.intel-no-data { padding: 48px 24px; text-align: center; color: var(--ink-muted, #6b7280); font-size: var(--text-sm, 0.875rem); }
.intel-no-data-icon { font-size: 2rem; margin-bottom: 12px; }

.intel-brand-tab { display: flex; flex-direction: column; gap: 16px; }
.intel-brand-card { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 16px; background: var(--surface, #fff); }
.intel-brand-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.intel-brand-name { font-size: var(--text-base, 1rem); font-weight: 700; color: var(--ink, #1a202c); }
.intel-brand-asin-count { font-size: var(--text-xs, 0.75rem); background: var(--surface-raised, #f3f4f6); color: var(--ink-muted, #6b7280); padding: 2px 8px; border-radius: 12px; }
.intel-brand-metrics { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 12px; }
.intel-brand-metric { display: flex; flex-direction: column; gap: 2px; }
.intel-brand-metric-label { font-size: var(--text-xs, 0.75rem); color: var(--ink-muted, #6b7280); }
.intel-brand-metric-value { font-size: var(--text-lg, 1.125rem); font-weight: 700; color: var(--ink, #1a202c); }
.intel-brand-asins { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── SQP+ bridge styles ──────────────────────────────────────────── */
.content-ki-badge-link { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; }
.content-ki-manage-link { font-size: var(--text-xs, 0.75rem); color: var(--accent, #1a5fd0); text-decoration: underline; }
.content-ki-unlock-row { margin: 6px 0; }
.content-ki-unlock-text { font-size: var(--text-sm, 0.875rem); color: var(--ink-muted, #6b7280); }
.intel-asin-actions { display: flex; gap: 8px; margin-bottom: 12px; }

/* Profit-specific KPI ribbon: keep five compact desktop cards even when the
   shared metric grid collapses to two columns for other dashboard ribbons. */
.profit-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.profit-kpi-grid .metric-card {
  min-height: 104px;
  padding: 14px;
}

@media (max-width: 1100px) {
  .profit-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .profit-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Admin control surfaces ─────────────────────────────────────────────── */

.page-grid[data-react-section-root^="admin-"] {
  gap: 16px;
  align-content: start;
  padding: 6px 0 28px;
}

.page-grid[data-react-section-root^="admin-"] .panel {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-color: rgba(191, 205, 226, 0.96);
  background: var(--surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 18px 36px rgba(15, 23, 42, 0.07);
}

.page-grid[data-react-section-root^="admin-"] .panel-head {
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(211, 223, 239, 0.9);
}

.page-grid[data-react-section-root^="admin-"] .panel-head-text {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.page-grid[data-react-section-root^="admin-"] .panel-head .kicker,
.page-grid[data-react-section-root^="admin-"] .panel-head .panel-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  color: var(--ink-soft);
  letter-spacing: 0.12em;
}

.page-grid[data-react-section-root^="admin-"] .panel-title {
  font-size: clamp(1.12rem, 1rem + 0.35vw, 1.34rem);
  line-height: 1.08;
}

.page-grid[data-react-section-root^="admin-"] .panel-note {
  max-width: 72ch;
  color: #61748f;
}

.page-grid[data-react-section-root^="admin-"] .panel-actions {
  align-self: flex-start;
  margin-left: auto;
}

.page-grid[data-react-section-root^="admin-"] .panel-body {
  min-height: 0;
}

.page-grid[data-react-section-root^="admin-"] [data-kpi-strip] {
  gap: 10px !important;
}

.page-grid[data-react-section-root^="admin-"] .metric-card {
  position: relative;
  min-height: 96px;
  padding: 14px 15px;
  border-radius: var(--radius-sm);
  border-color: rgba(194, 208, 227, 0.94);
  background: var(--surface-muted);
  box-shadow: none;
}

.page-grid[data-react-section-root^="admin-"] .metric-card strong {
  font-size: 1.34rem;
}

.page-grid[data-react-section-root^="admin-"] .metric-card .label,
.page-grid[data-react-section-root^="admin-"] .metric-card .metric-label {
  color: #62758f;
}

.page-grid[data-react-section-root^="admin-"] .section-tabs-tab {
  border-radius: var(--radius-xs);
  border-color: rgba(196, 210, 229, 0.9);
  background: rgba(248, 250, 253, 0.88);
  min-height: 36px;
  padding-inline: 14px;
}

.page-grid[data-react-section-root^="admin-"] .section-tabs-tab.is-active {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
  box-shadow: 0 10px 18px rgba(30, 64, 108, 0.18);
}

.page-grid[data-react-section-root^="admin-"] .data-table {
  gap: 10px;
}

.page-grid[data-react-section-root^="admin-"] .data-table-toolbar {
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(219, 228, 239, 0.9);
}

.page-grid[data-react-section-root^="admin-"] .data-table-search,
.page-grid[data-react-section-root^="admin-"] .data-table-channel-filter {
  min-height: 36px;
  border-radius: var(--radius-xs) !important;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.page-grid[data-react-section-root^="admin-"] .data-table-toolbar-button,
.page-grid[data-react-section-root^="admin-"] .data-table-page-button,
.page-grid[data-react-section-root^="admin-"] .data-table-filter-trigger,
.page-grid[data-react-section-root^="admin-"] .data-table-page-size-option {
  min-height: 32px;
  border-radius: var(--radius-xs) !important;
  background: #fff;
  border-color: rgba(196, 210, 229, 0.94) !important;
}

.page-grid[data-react-section-root^="admin-"] .data-table-filter[data-active="true"] .data-table-filter-trigger {
  background: rgba(226, 236, 248, 0.9);
  color: var(--brand-navy) !important;
  border-color: rgba(94, 159, 196, 0.48) !important;
}

.page-grid[data-react-section-root^="admin-"] .data-table-scroll {
  border: 1px solid rgba(211, 223, 239, 0.96);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.page-grid[data-react-section-root^="admin-"] .data-table-table thead th,
.page-grid[data-react-section-root^="admin-"] .data-table-selection-header,
.page-grid[data-react-section-root^="admin-"] .data-table-expand-header {
  background: var(--surface-muted) !important;
}

.page-grid[data-react-section-root^="admin-"] .data-table-header-cell {
  font-size: 0.78rem !important;
}

.page-grid[data-react-section-root^="admin-"] .data-table-cell {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

.page-grid[data-react-section-root^="admin-"] .data-table-row.is-clickable:hover {
  background: var(--surface-muted);
}

[data-react-section-root="admin-agency-audit"] .agency-audit-filters {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(150px, 0.8fr) minmax(170px, 1fr) minmax(220px, 1.15fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

[data-react-section-root="admin-agency-audit"] .agency-audit-detail-summary {
  display: -webkit-box;
  max-width: 42ch;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.4;
  white-space: normal;
}

[data-react-section-root="admin-agency-audit"] .agency-audit-event-detail {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  background: var(--surface);
}

[data-react-section-root="admin-agency-audit"] .agency-audit-event-detail__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

[data-react-section-root="admin-agency-audit"] .agency-audit-event-detail__heading span {
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

[data-react-section-root="admin-agency-audit"] .agency-audit-event-detail__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

[data-react-section-root="admin-agency-audit"] .agency-audit-event-detail__meta div {
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
}

[data-react-section-root="admin-agency-audit"] .agency-audit-event-detail__meta dt {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

[data-react-section-root="admin-agency-audit"] .agency-audit-event-detail__meta dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font: 500 var(--text-xs)/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

[data-react-section-root="admin-agency-audit"] .agency-audit-event-detail pre {
  max-height: 320px;
  margin: 0;
  overflow: auto;
  color: var(--ink-soft);
  font: 500 var(--text-xs)/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}

.page-grid[data-react-section-root^="admin-"] .primary-button,
.page-grid[data-react-section-root^="admin-"] .secondary-button,
.page-grid[data-react-section-root^="admin-"] .button,
.page-grid[data-react-section-root^="admin-"] .button-primary,
.page-grid[data-react-section-root^="admin-"] .button-secondary {
  border-radius: var(--radius-xs);
}

.admin-workspaces__layout {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.admin-workspaces__detail {
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.page-grid[data-react-section-root^="admin-"] .secondary-button,
.page-grid[data-react-section-root^="admin-"] .button-secondary {
  background: rgba(248, 250, 253, 0.96);
}

@media (max-width: 1080px) {
  .admin-workspaces__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .admin-workspaces__detail {
    padding: 16px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .page-grid[data-react-section-root^="admin-"] {
    gap: 14px;
    padding-bottom: 20px;
  }

  .page-grid[data-react-section-root^="admin-"] .panel {
    padding: 16px;
  }

  .page-grid[data-react-section-root^="admin-"] .panel-head {
    gap: 10px;
    margin-bottom: 12px;
  }

  .page-grid[data-react-section-root^="admin-"] .metric-card {
    min-height: 88px;
  }

  [data-react-section-root="admin-agency-audit"] .agency-audit-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-react-section-root="admin-agency-audit"] .agency-audit-event-detail__meta {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* ── Traffic Conversion Scatter ────────────────────────────────────────────── */
.traffic-scatter-canvas {
  width: 100%;
  min-height: 320px;
  overflow-x: auto;
}

.traffic-scatter-svg {
  display: block;
  width: 100%;
  max-width: 860px;
  height: 300px;
}

.traffic-scatter-canvas .scatter-dot:hover {
  opacity: 0.9;
  stroke-width: 2.4;
}

/* Traffic insight cards ────────────────────────────────────────────────── */
.traffic-insight-card {
  flex: 1;
  min-width: 240px;
  max-width: 360px;
  background: #fff;
  border: 1px solid #D8E2EF;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.traffic-insight-warn { border-left: 3px solid #D97706; }
.traffic-insight-info { border-left: 3px solid #2563EB; }
.traffic-insight-good { border-left: 3px solid #059669; }
.tic-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.traffic-insight-warn .tic-type { color: #D97706; }
.traffic-insight-info .tic-type { color: #2563EB; }
.traffic-insight-good .tic-type { color: #059669; }
.tic-title { font-size: 13px; font-weight: 700; color: #0B1929; line-height: 1.3; }
.tic-body  { font-size: 13px; color: #5A6E87; line-height: 1.5; flex: 1; }
.tic-action {
  font-size: 12px;
  font-weight: 600;
  color: #2563EB;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.tic-action:hover { text-decoration: underline; }

/* Performance cohesion: the funnel owns an intentional hero row and a
   full-width source band instead of relying on content-sized auto-fit tracks. */
.react-performance-grid .performance-funnel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr);
  gap: 24px;
  align-items: start;
  width: 100%;
  min-height: 0;
}

/* Shared Performance shell rules. Headers must give copy a usable minimum
   before squeezing the action cluster into a narrow vertical column. */
.react-performance-grid .panel-head {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.react-performance-grid .panel-head-text {
  flex: 1 1 260px;
  min-width: 0;
}

.react-performance-grid .panel-title,
.react-performance-grid .panel-note {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty;
}

.react-performance-grid .panel-actions {
  flex: 0 1 auto;
  min-width: 0;
}

.react-performance-grid .performance-funnel-visual,
.react-performance-grid .performance-funnel-rates {
  min-width: 0;
  align-self: start;
}

.react-performance-grid .performance-funnel-lower {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}

.react-performance-grid .performance-funnel-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.react-performance-grid .performance-funnel-stage-track {
  min-width: 0;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.react-performance-grid .performance-funnel-segment {
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

.react-performance-grid .performance-funnel-segment:hover,
.react-performance-grid .performance-funnel-segment:focus-visible {
  filter: brightness(1.08) saturate(1.08);
  opacity: 0.92;
}

.react-performance-grid .performance-funnel-segment + .performance-funnel-segment {
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}

.react-performance-grid .traffic-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.react-performance-grid .traffic-insight-grid .traffic-insight-card {
  min-width: 0;
  max-width: none;
  width: auto;
}

.react-performance-grid .traffic-asin-table {
  min-width: 0;
}

.react-performance-grid .performance-funnel-segment:focus-visible {
  outline: 3px solid var(--brand-navy, #17365d);
  outline-offset: -3px;
  z-index: 3;
}

.react-performance-grid .performance-funnel-visual {
  min-width: 0;
}

.react-performance-grid .performance-funnel-visual > div {
  min-width: 0;
}

.react-performance-grid .performance-trend-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-color: var(--brand-navy) var(--surface-soft);
  scrollbar-width: thin;
}

.react-performance-grid .performance-trend-scroll::-webkit-scrollbar {
  height: 8px;
}

.react-performance-grid .performance-trend-scroll::-webkit-scrollbar-track {
  background: var(--surface-soft);
  border-radius: 999px;
}

.react-performance-grid .performance-trend-scroll::-webkit-scrollbar-thumb {
  background: var(--brand-navy);
  border-radius: 999px;
}

.react-performance-grid .product-performance-table-wrap {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

/* One radius/border owner per Performance table. Nested DataTable instances
   inherit the outer custom shell instead of producing double rounded edges. */
.react-performance-grid .detail-table-wrap,
.react-performance-grid .product-performance-table-wrap,
.react-performance-grid > .panel > .panel-body > .data-table {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.react-performance-grid .detail-table-wrap > .data-table,
.react-performance-grid .performance-ledger-table > .data-table {
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 0 !important;
}

.react-performance-grid .data-table-toolbar,
.react-performance-grid .product-performance-toolbar {
  min-width: 0;
  min-height: 54px;
  margin: 0;
  padding: 12px 14px;
  align-items: center;
}

.react-performance-grid .data-table > .data-table-toolbar {
  border-bottom: 1px solid var(--line);
}

.react-performance-grid .data-table-scroll,
.react-performance-grid .product-performance-scroll {
  max-width: 100%;
  overscroll-behavior-inline: contain;
}

.react-performance-grid .product-performance-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.react-performance-grid .product-performance-view-toggle {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}

.react-performance-grid .product-performance-toolbar .data-table-search {
  flex: 1 1 260px;
  min-width: 220px;
}

.react-performance-grid .product-performance-row-count {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.react-performance-grid .product-performance-scroll {
  width: 100%;
  overflow-x: auto;
}

.react-performance-grid .product-performance-table {
  width: 100%;
  min-width: 1000px;
  table-layout: auto;
}

.react-performance-grid .product-performance-table th,
.react-performance-grid .product-performance-table td {
  white-space: nowrap;
}

.react-performance-grid .product-performance-table th:first-child,
.react-performance-grid .product-performance-table td:first-child {
  width: 29%;
  min-width: 250px;
  white-space: normal;
}

.react-performance-grid .product-performance-table th:nth-child(2),
.react-performance-grid .product-performance-table td:nth-child(2) {
  width: 15%;
  min-width: 145px;
  white-space: normal;
}

.react-performance-grid .product-performance-table th:nth-child(10),
.react-performance-grid .product-performance-table td:nth-child(10) {
  min-width: 118px;
}

.react-performance-grid .product-performance-table th:last-child,
.react-performance-grid .product-performance-table td:last-child {
  width: 64px;
  min-width: 64px;
}

.react-performance-grid .product-performance-table th.num,
.react-performance-grid .product-performance-table td.num {
  text-align: right;
}

.react-performance-grid .product-performance-identity,
.react-performance-grid .product-performance-parent {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.react-performance-grid .product-performance-identity strong,
.react-performance-grid .product-performance-parent,
.react-performance-grid .product-performance-parent > strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.react-performance-grid .product-performance-identity strong,
.react-performance-grid .product-performance-parent > strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  line-height: 1.35;
}

.react-performance-grid .product-performance-identity strong.is-missing,
.react-performance-grid .product-performance-parent > strong.is-missing,
.react-performance-grid .asin-product-title.is-missing {
  color: var(--ink-muted);
  font-style: italic;
  font-weight: 600;
}

.react-performance-grid .product-performance-identity span,
.react-performance-grid .product-performance-parent small {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.react-performance-grid .product-performance-parent-row td {
  background: var(--surface-muted, #f7f9fc);
  font-weight: 650;
}

.react-performance-grid .product-performance-parent-row.is-expanded td {
  background: var(--brand-soft, #eef5ff);
}

.react-performance-grid .product-performance-child-row td:first-child {
  padding-left: 28px;
}

.react-performance-grid .product-performance-parent-count {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.react-performance-grid .product-performance-trend {
  color: var(--ink-muted);
}

.react-performance-grid .product-performance-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.react-performance-grid .product-performance-page-size {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}

.react-performance-grid .product-performance-page-size span {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  margin-right: 4px;
}

.react-performance-grid .performance-ledger-table {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.react-performance-grid .performance-ledger-table .data-table-scroll {
  border-radius: 0;
}

.react-performance-grid .brand-perf-table-wrap {
  border-radius: var(--radius-lg);
  border-color: var(--line);
  background: var(--surface);
}

.react-performance-grid .brand-perf-table th,
.react-performance-grid .brand-perf-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.react-performance-grid .brand-asin-subtable {
  min-width: 720px;
}

.react-performance-grid .data-table {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  gap: 0 !important;
}

.react-performance-grid .data-table > .data-table-toolbar {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.react-performance-grid .data-table > .data-table-scroll {
  border-radius: 0;
}

.react-performance-grid .data-table > .data-table-pagination {
  padding: 12px;
  border-top: 1px solid var(--line);
}

/* Performance Category / Brand / Over Time card grammar. Keep the header text
   flexible so half-width cards do not turn a note into a narrow prose column;
   keep the chart/table scroll owner inside the card instead of expanding the
   page viewport. */
.react-performance-grid > #performance-category-share-trend,
.react-performance-grid > #widget-top-categories-by-revenue,
.react-performance-grid > #performance-brand-performance,
.react-performance-grid > #performance-brand-share-trend,
.react-performance-grid > #performance-over-time-trend,
.react-performance-grid > #performance-daily-sales-ledger {
  min-width: 0;
}

.react-performance-grid > #performance-category-share-trend .panel-head,
.react-performance-grid > #widget-top-categories-by-revenue .panel-head,
.react-performance-grid > #performance-brand-performance .panel-head,
.react-performance-grid > #performance-brand-share-trend .panel-head,
.react-performance-grid > #performance-over-time-trend .panel-head,
.react-performance-grid > #performance-daily-sales-ledger .panel-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Half-width cards should not let a toggle/export cluster squeeze the
   heading into a tall prose column. Give the copy a full row, then keep the
   controls together underneath it. This is the same shell grammar for
   Category, Brand, and the other split Performance cards. */
.react-performance-grid > .span-half .panel-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.react-performance-grid > .span-half .panel-head-text {
  flex: 0 0 auto;
  width: 100%;
}

.react-performance-grid > .span-half .panel-actions {
  width: 100%;
  justify-content: flex-end;
}

.react-performance-grid .kpi-value {
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.05;
}

[data-kpi-strip] .metric-card {
  min-width: 0;
}

[data-kpi-strip] .kpi-value--text {
  display: block;
  max-width: 100%;
  font-size: clamp(var(--text-heading-sm), 2vw, var(--text-display-sm));
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.react-performance-grid .kpi-note {
  max-width: 28ch;
}

.react-performance-grid > #performance-category-share-trend .panel-head-text,
.react-performance-grid > #widget-top-categories-by-revenue .panel-head-text,
.react-performance-grid > #performance-brand-performance .panel-head-text,
.react-performance-grid > #performance-brand-share-trend .panel-head-text,
.react-performance-grid > #performance-over-time-trend .panel-head-text,
.react-performance-grid > #performance-daily-sales-ledger .panel-head-text {
  flex: 1 1 260px;
  min-width: 0;
}

.react-performance-grid > #performance-category-share-trend .panel-note,
.react-performance-grid > #widget-top-categories-by-revenue .panel-note,
.react-performance-grid > #performance-brand-performance .panel-note,
.react-performance-grid > #performance-brand-share-trend .panel-note,
.react-performance-grid > #performance-over-time-trend .panel-note,
.react-performance-grid > #performance-daily-sales-ledger .panel-note {
  max-width: 72ch;
}

.react-performance-grid .performance-trend-scroll,
.react-performance-grid .performance-time-chart {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
}

.react-performance-grid .performance-category-chart-scroll {
  scrollbar-gutter: stable;
}

.react-performance-grid .performance-ledger-table {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.react-performance-grid .performance-ledger-table > .data-table {
  gap: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.react-performance-grid .performance-ledger-table .data-table-scroll {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.react-performance-grid .performance-ledger-table .data-table-pagination {
  border-top: 1px solid var(--line);
}

.react-performance-grid .brand-lineup-coverage {
  margin: 0;
  padding: 8px 16px 10px 32px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.react-performance-grid .asin-parent-context {
  display: inline-block;
  margin-left: 6px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

@media (max-width: 720px) {
  .react-performance-grid > #performance-category-share-trend .panel-head-text,
  .react-performance-grid > #widget-top-categories-by-revenue .panel-head-text,
  .react-performance-grid > #performance-brand-performance .panel-head-text,
  .react-performance-grid > #performance-brand-share-trend .panel-head-text,
  .react-performance-grid > #performance-over-time-trend .panel-head-text,
  .react-performance-grid > #performance-daily-sales-ledger .panel-head-text {
    flex-basis: 100%;
  }

  .react-performance-grid > #performance-category-share-trend .panel-actions,
  .react-performance-grid > #widget-top-categories-by-revenue .panel-actions,
  .react-performance-grid > #performance-brand-performance .panel-actions,
  .react-performance-grid > #performance-brand-share-trend .panel-actions,
  .react-performance-grid > #performance-over-time-trend .panel-actions,
  .react-performance-grid > #performance-daily-sales-ledger .panel-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .react-performance-grid > .span-half,
  .react-performance-grid > .span-two-thirds,
  .react-performance-grid > .span-one-third,
  .react-performance-grid > .span-quarter {
    grid-column: 1 / -1;
  }

  .react-performance-grid .performance-funnel-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .react-performance-grid .performance-funnel-source-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .react-performance-grid .traffic-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .react-performance-grid .product-performance-toolbar .data-table-search {
    flex-basis: 100%;
    order: 3;
  }

  .react-performance-grid .product-performance-row-count {
    margin-left: 0;
  }

  .react-performance-grid .product-performance-pagination {
    justify-content: flex-start;
  }

  .react-performance-grid .traffic-insight-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Retained-data and funnel interaction states are intentionally compact so
   they explain provenance without pushing the primary metric below the fold. */
.react-performance-grid .widget-retained-state {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--warning, #c58a2b);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

.react-performance-grid .widget-retained-state strong {
  color: var(--ink);
}

.react-performance-grid .widget-retained-state span {
  flex: 1 1 220px;
}

.react-performance-grid .performance-funnel-stage-track-wrap {
  width: 100%;
}

.react-performance-grid .performance-funnel-tooltip {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
  max-width: min(280px, calc(100% - 16px));
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  background: rgba(15, 23, 42, 0.94);
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
}

.react-performance-grid .performance-funnel-tooltip span {
  display: block;
  margin-top: 2px;
  opacity: 0.82;
}

@media (max-width: 720px) {
  .react-performance-grid .performance-funnel-tooltip {
    max-width: 220px;
    font-size: 10px;
  }
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* Performance split-card grammar. Keep the title/copy column usable when a
   half-width card also carries a readiness badge and action controls. These
   rules live at the end of the canonical sheet so they win over legacy shell
   flex rules that otherwise collapse the copy to its min-content width. */
.react-performance-grid > .span-half .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "text state"
    "actions actions";
  align-items: start;
  gap: 10px 16px;
}

.react-performance-grid > .span-half .panel-head-text {
  grid-area: text;
  width: auto;
  min-width: 0;
  flex: none;
}

.react-performance-grid > .span-half .panel-head > .readiness-pill {
  grid-area: state;
  justify-self: end;
}

.react-performance-grid > .span-half .panel-actions {
  grid-area: actions;
  width: 100%;
  justify-content: flex-end;
}

.react-performance-grid > .span-half .panel-note {
  max-width: none;
}

.react-performance-grid .performance-trend-scroll,
.react-performance-grid .product-performance-scroll,
.react-performance-grid .detail-table-wrap,
.react-performance-grid .data-table-scroll {
  scrollbar-color: var(--brand-navy) var(--surface-soft);
  scrollbar-width: thin;
}

.react-performance-grid .performance-trend-scroll::-webkit-scrollbar,
.react-performance-grid .product-performance-scroll::-webkit-scrollbar,
.react-performance-grid .detail-table-wrap::-webkit-scrollbar,
.react-performance-grid .data-table-scroll::-webkit-scrollbar {
  height: 8px;
}

.react-performance-grid .performance-trend-scroll::-webkit-scrollbar-thumb,
.react-performance-grid .product-performance-scroll::-webkit-scrollbar-thumb,
.react-performance-grid .detail-table-wrap::-webkit-scrollbar-thumb,
.react-performance-grid .data-table-scroll::-webkit-scrollbar-thumb {
  background: var(--brand-navy);
  border-radius: 999px;
}

@media (max-width: 720px) {
  .brand-kit-editor-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .react-performance-grid > .span-half .panel-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "text"
      "state"
      "actions";
  }

  .react-performance-grid > .span-half .panel-head > .readiness-pill {
    justify-self: start;
  }

  .react-performance-grid > .span-half .panel-actions {
    justify-content: flex-start;
  }
}

/* Advertising navigation and builder containment. Jump rails stay on one line
   and use the shared stateful overflow shadows at every family instance. */
.react-marketing-grid .ads-widget-jump-scroll {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.react-marketing-grid .ads-widget-jump-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-width: 100%;
  padding: 8px 10px;
}

.react-marketing-grid .ads-widget-jump-label {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .react-marketing-grid .ads-engine-settings-layout,
  .react-marketing-grid .campaign-builder-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .react-marketing-grid .campaign-builder-gap-row {
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  .react-marketing-grid .campaign-builder-gap-identity {
    flex: 1 1 160px !important;
    min-width: 0 !important;
  }

  .react-marketing-grid .campaign-builder-gap-row > button {
    margin-left: auto;
  }
}

@media (max-width: 420px) {
  .react-marketing-grid .ads-performance-metric-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Advertising automation detail stays readable as a true phone drawer. */
@media (max-width: 600px) {
  .automation-detail-panel {
    width: 100vw !important;
    border-left: 0 !important;
  }

  .automation-detail-nav {
    overflow-x: visible !important;
  }

  .automation-detail-tabs.seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .automation-detail-tabs .seg-btn {
    min-width: 0;
    white-space: normal;
  }

  .automation-detail-scroll {
    padding-inline: var(--space-md) !important;
  }

  .automation-detail-coverage-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .automation-detail-coverage-lane,
  .automation-detail-logic-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .automation-detail-structure-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .automation-detail-structure-heading {
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  .automation-detail-campaign-name {
    flex: 1 1 100%;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
}
/* ASIN Plan bulk editor: keep scope choices and target rows usable when the
   modal becomes a narrow sheet. */
.bulk-target-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.bulk-target-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.bulk-target-field-row > label {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.bulk-target-field-row :is(.field-select, .field-input) {
  width: 100%;
}

@media (max-width: 640px) {
  .modal-backdrop:has(.bulk-targets-dialog) {
    align-items: stretch;
    padding: 0;
  }

  .bulk-targets-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0;
    box-sizing: border-box;
  }

  .bulk-target-scope-grid,
  .bulk-target-field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Brand Plan uses the canonical right-drawer shell and form primitives. */
.brand-plan-drawer-overlay {
  top: var(--workspace-header-h, 63px);
}

.brand-plan-drawer {
  top: var(--workspace-header-h, 63px);
  width: 600px;
  max-width: 100vw;
  height: calc(100dvh - var(--workspace-header-h, 63px));
  border-left: 1px solid var(--line);
  animation: asin-drawer-slide 200ms ease-out;
}

.brand-plan-drawer-head {
  padding: 16px 20px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  color: var(--surface);
  background: var(--brand-navy);
}

.brand-plan-drawer-head > div { min-width: 0; }
.brand-plan-drawer-head > div > span {
  display: block;
  margin-bottom: 3px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
}
.brand-plan-drawer-head h2 {
  margin: 0;
  overflow: hidden;
  font-size: var(--text-heading-sm);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-plan-drawer-head p {
  margin: 3px 0 0;
  font-size: var(--text-xs);
  opacity: .7;
}
.brand-plan-drawer-head .asin-drawer-close { color: var(--surface); flex-shrink: 0; }
.brand-plan-drawer-head .asin-drawer-close:hover { background: rgba(255,255,255,.12); }

.brand-plan-drawer-status {
  min-height: 38px;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}
.brand-plan-drawer-status .status-badge { text-transform: capitalize; }

.brand-plan-drawer-body {
  min-height: 0;
  flex: 1;
  padding: 18px 20px 28px;
  overflow-y: auto;
}

.brand-plan-readiness {
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
}
.brand-plan-readiness strong { font-size: var(--text-sm); }
.brand-plan-readiness p { margin: 3px 0 0; color: var(--ink-muted); font-size: var(--text-xs); line-height: 1.45; }

.brand-plan-accordion {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.brand-plan-accordion + .brand-plan-accordion { margin-top: 9px; }
.brand-plan-accordion.is-open { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.brand-plan-accordion-trigger {
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 18px;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  text-align: left;
  border: 0;
  background: var(--surface);
  cursor: pointer;
}
.brand-plan-accordion-trigger:hover { background: var(--surface-muted); }
.brand-plan-accordion-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.brand-plan-accordion-trigger > span:nth-child(2) { min-width: 0; }
.brand-plan-accordion-trigger strong,
.brand-plan-accordion-trigger small { display: block; }
.brand-plan-accordion-trigger strong { font-size: var(--text-sm); }
.brand-plan-accordion-trigger small { margin-top: 2px; color: var(--ink-muted); font-size: var(--text-xs); }
.brand-plan-accordion-number {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.brand-plan-accordion.is-open .brand-plan-accordion-number { color: var(--surface); border-color: var(--brand-navy); background: var(--brand-navy); }
.brand-plan-accordion-state { color: var(--ink-muted); font-size: var(--text-xs); white-space: nowrap; }
.brand-plan-accordion.is-open .brand-plan-accordion-trigger > span:last-child { transform: rotate(180deg); }
.brand-plan-accordion-content { padding: 16px; border-top: 1px solid var(--line); }
.brand-plan-section-intro { margin: 0 0 16px; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.5; }
.brand-plan-goal-context,
.brand-plan-pdf-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.brand-plan-goal-context > div,
.brand-plan-pdf-summary > span { padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.brand-plan-goal-context span,
.brand-plan-goal-context strong { display: block; }
.brand-plan-goal-context span { color: var(--ink-muted); font-size: var(--text-xs); }
.brand-plan-goal-context strong { margin-top: 3px; color: var(--ink); font-size: var(--text-base); }
.brand-plan-pdf-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0; }
.brand-plan-pdf-summary > span { color: var(--ink-muted); font-size: var(--text-xs); }
.brand-plan-pdf-summary b { display: block; margin-bottom: 2px; color: var(--ink); font-size: var(--text-sm); }
.brand-plan-readiness-list { display: grid; gap: 6px; margin-top: 10px; }
.brand-plan-readiness-list button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); text-align: left; cursor: pointer; }
.brand-plan-readiness-list button:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.brand-plan-readiness-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand-plan-readiness-list button > span:nth-child(2) { font-size: var(--text-xs); line-height: 1.4; }
.brand-plan-readiness-list .status-badge.status-negative { color: var(--negative); border-color: var(--negative); background: var(--negative-soft); }
.brand-plan-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; }
.brand-plan-form-field { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: 6px; }
.brand-plan-form-field > strong { display: block; color: var(--ink); font-size: var(--text-sm); font-weight: 700; line-height: 1.3; }
.brand-plan-form-field > small { display: block; min-height: 2.7em; color: var(--ink-muted); font-size: var(--text-xs); line-height: 1.35; }
.brand-plan-form-field > .field-input,
.brand-plan-form-field > .field-select { width: 100%; min-width: 0; margin: 0; box-sizing: border-box; }
.brand-plan-form-field textarea.field-input { min-height: 126px; line-height: 1.5; resize: vertical; }
.brand-plan-narrative-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.brand-plan-narrative-primary { grid-column: 1 / -1; }
.brand-plan-narrative-primary textarea.field-input { min-height: 168px; }
.brand-plan-lineup-summary { display: grid; gap: 8px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.brand-plan-lineup-summary > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.brand-plan-lineup-summary p,
.brand-plan-lineup-summary small { margin: 0; }
.brand-plan-lineup-summary p { color: var(--ink); font-size: var(--text-sm); }
.brand-plan-lineup-summary small { color: var(--ink-muted); font-size: var(--text-xs); line-height: 1.4; }
.brand-plan-lineup-summary .btn { justify-self: start; margin-top: 2px; }

.brand-plan-portfolio-tools { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
.brand-plan-assignment-count { margin: 10px 0; color: var(--ink-muted); font-size: var(--text-xs); font-weight: 650; }
.brand-plan-product-list { display: grid; gap: 8px; }
.brand-plan-product-row { padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.brand-plan-product-title { min-width: 0; }
.brand-plan-product-title strong { display: block; overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.brand-plan-product-title span { display: block; margin-top: 3px; color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.brand-plan-product-values { display: flex; gap: 14px; grid-column: 1; color: var(--ink-muted); font-size: var(--text-xs); }
.brand-plan-product-values strong { margin-left: 3px; color: var(--ink); }
.brand-plan-product-row > .field { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.brand-plan-review-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.brand-plan-review-kpis > div { padding: 11px; }
.brand-plan-review-kpis > div + div { border-left: 1px solid var(--line); }
.brand-plan-review-kpis span,
.brand-plan-review-kpis strong { display: block; }
.brand-plan-review-kpis span { color: var(--ink-muted); font-size: var(--text-xs); }
.brand-plan-review-kpis strong { margin-top: 3px; font-size: var(--text-base); }
.brand-plan-allocation-note { margin: 12px 0; padding: 9px 10px; color: var(--ink-muted); font-size: var(--text-xs); border-radius: var(--radius-sm); background: var(--surface-muted); }
.brand-plan-allocation-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.brand-plan-allocation-list > div { padding: 9px 10px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; font-size: var(--text-xs); }
.brand-plan-allocation-list > div + div { border-top: 1px solid var(--line); }
.brand-plan-allocation-list span { color: var(--ink-muted); }
.brand-plan-disclosure { margin-top: 12px; border-top: 1px solid var(--line); }
.brand-plan-disclosure summary { padding: 12px 0 4px; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.brand-plan-disclosure article,
.brand-plan-version { padding: 10px 0; }
.brand-plan-disclosure article + article,
.brand-plan-version + .brand-plan-version { border-top: 1px solid var(--line); }
.brand-plan-disclosure p { margin: 3px 0 0; color: var(--ink-muted); font-size: var(--text-xs); }
.brand-plan-version .status-badge { margin-left: 8px; }
.brand-plan-drawer-success { margin-top: 12px; padding: 10px 12px; color: var(--positive-ink); border: 1px solid var(--positive); border-radius: var(--radius-sm); background: var(--positive-soft); }
.brand-plan-pdf-review { display: grid; gap: 12px; margin-top: 14px; padding: 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-soft); }
.brand-plan-pdf-review > div:first-child > span { color: var(--brand-navy); font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.brand-plan-pdf-review h3 { margin: 3px 0; font-size: var(--text-base); }
.brand-plan-pdf-review p { margin: 0; color: var(--ink-muted); font-size: var(--text-xs); line-height: 1.45; }
.brand-plan-pdf-review > label { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); font-weight: 650; }
.brand-plan-pdf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.brand-plan-pdf-review > a { color: var(--brand-navy); font-size: var(--text-sm); font-weight: 700; }

.brand-plan-drawer-footer {
  min-height: 64px;
  padding: 11px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.brand-plan-drawer-footer > div { display: flex; gap: 8px; }

@media (max-width: 640px) {
  .brand-plan-drawer { top: var(--workspace-header-h, 63px); width: 100%; height: calc(100dvh - var(--workspace-header-h, 63px)); }
  .brand-plan-drawer-body { padding: 14px 12px 22px; }
  .brand-plan-field-grid,
  .brand-plan-portfolio-tools,
  .brand-plan-narrative-grid { grid-template-columns: minmax(0, 1fr); }
  .brand-plan-goal-context { grid-template-columns: minmax(0, 1fr); }
  .brand-plan-narrative-primary { grid-column: auto; }
  .brand-plan-form-field > small { min-height: 0; }
  .brand-plan-accordion-trigger { grid-template-columns: 28px minmax(0, 1fr) 18px; }
  .brand-plan-accordion-state { display: none; }
  .brand-plan-product-row { grid-template-columns: minmax(0, 1fr); }
  .brand-plan-product-values,
  .brand-plan-product-row > .field { grid-column: 1; grid-row: auto; }
  .brand-plan-review-kpis { grid-template-columns: minmax(0, 1fr); }
  .brand-plan-review-kpis > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .brand-plan-allocation-list > div { grid-template-columns: 1fr 1fr; }
  .brand-plan-drawer-footer { align-items: stretch; }
  .brand-plan-drawer-footer > div { flex: 1; }
  .brand-plan-drawer-footer > div .btn { flex: 1; }
}
/* Advertising term resolution inbox */
.term-resolution-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.term-resolution-evidence {
  min-width: 240px;
  margin-top: 8px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .term-resolution-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .term-resolution-tabs .btn {
    width: 100%;
  }

  .term-resolution-table {
    overflow: visible;
  }

  .term-resolution-table table,
  .term-resolution-table thead,
  .term-resolution-table tbody,
  .term-resolution-table tr,
  .term-resolution-table td {
    display: block;
    width: 100%;
  }

  .term-resolution-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .term-resolution-table tr {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
  }

  .term-resolution-table td {
    display: grid;
    grid-template-columns: minmax(92px, 0.35fr) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    border: 0;
  }

  .term-resolution-table td::before {
    content: attr(data-label);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
  }

  .term-resolution-evidence {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}
/* Amazon parent-family strategy review */
.strategy-family-controls{padding:16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft)}
.strategy-family-field{display:grid;gap:6px;font-weight:700}.strategy-family-field small{font-weight:400;color:var(--ink-muted)}.strategy-family-summary{display:grid;gap:3px;margin:18px 0 12px}.strategy-family-summary span,.strategy-family-summary small{color:var(--ink-muted)}
.strategy-family-goal-review{display:flex;align-items:center;gap:7px;font-size:var(--text-sm);font-weight:600;margin-top:2px}
.strategy-family-list{display:grid;gap:10px}.strategy-family-card{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);overflow:hidden}.strategy-family-card summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;list-style:none}.strategy-family-card summary::-webkit-details-marker{display:none}.strategy-family-card summary>span:nth-of-type(1){display:grid;gap:2px;min-width:0;flex:1}.strategy-family-card summary small{color:var(--ink-muted);font-weight:400}.strategy-family-state{font-size:var(--text-xs);font-weight:700;border-radius:999px;padding:4px 8px;background:var(--info-soft);color:var(--info)}.strategy-family-state.is-conflict{background:var(--warning-soft);color:var(--warning)}.strategy-family-state.is-already_grouped{background:var(--positive-soft);color:var(--positive)}
.strategy-family-card-body{border-top:1px solid var(--line);padding:16px;display:grid;gap:14px}.strategy-family-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.strategy-family-metrics>div{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm)}.strategy-family-metrics small{color:var(--ink-muted)}.strategy-family-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.strategy-family-note,.strategy-family-warning{margin:0;padding:10px 12px;border-radius:var(--radius-sm);font-size:var(--text-sm)}.strategy-family-note{background:var(--info-soft)}.strategy-family-warning{background:var(--warning-soft);color:var(--warning)}
.strategy-family-children{display:grid;max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}.strategy-family-children label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--line-faint)}.strategy-family-children label:last-child{border-bottom:0}.strategy-family-children span{display:grid;min-width:0}.strategy-family-children strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--text-sm)}.strategy-family-children b{font-size:var(--text-sm)}
.strategy-family-review{display:grid;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}.strategy-family-review span,.strategy-family-review small{color:var(--ink-muted)}.strategy-family-confirm{display:flex;gap:8px;margin:14px 0;font-weight:700}.strategy-family-success{padding:20px;border-radius:var(--radius-md);background:var(--positive-soft)}.strategy-family-success h3{margin-top:0}
.strategy-family-footer{justify-content:flex-end}.strategy-family-footer>span{margin-right:auto;color:var(--ink-muted);font-size:var(--text-sm)}
@media(max-width:640px){.strategy-family-grid{grid-template-columns:1fr}.strategy-family-card summary{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}.strategy-family-state{grid-column:2;margin-left:0;justify-self:start}.strategy-family-footer .btn{flex:1}.strategy-family-footer>span{display:none}}

/* Brand Plan competitive comparison: keep long titles readable inside a bounded table. */
.brand-competitor-comparison { min-width: 0; width: 100%; max-width: 100%; }
.brand-competitor-product { display: flex; flex-direction: column; gap: var(--space-xs); white-space: normal; min-width: 220px; max-width: 300px; line-height: 1.5; }
.brand-competitor-asin { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; }
.brand-competitor-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.brand-competitor-note { margin: var(--space-sm) 0; color: var(--ink-muted); font-size: var(--text-sm); }
.brand-competitor-evidence { display: flex; flex-direction: column; gap: var(--space-sm); white-space: normal; color: var(--ink-muted); }
.brand-competitor-evidence strong { color: var(--ink); }
@media (max-width: 600px) {
  /* The shared table's compact scroll arrows set a 32px inline minimum. */
  .brand-competitor-comparison button { min-width: 44px !important; min-height: 44px; }
}