/* =============================================================================
   ecomexsaas — Claude-style warm design system.

   Rules:
     - Warm cream surfaces (#FAF9F5), warm near-black text. Dark mode = warm
       charcoal. Clay/rust brand accent (--color-brand #D97757) for links,
       active nav, the send button, and focus rings.
     - Primary button is warm near-black (--color-accent). Dark-mode inverts.
     - DM Sans for UI/body; --font-serif (Source Serif 4) for the chat greeting.
       Tabular nums on numeric table cols (.num).
     - Radius scale: 4 / 6 / 8 / 16 (xl, for the chat composer + welcome icon).
     - Semantic colors carry meaning only:
         success #0F7B6C  warning #CB912F  error #EB5757
   ============================================================================= */

/* ---------- Tokens (light) ----------------------------------------------- */
:root {
  --color-bg:           #FAF9F5;
  --color-bg-subtle:    #F0EEE6;
  --color-bg-muted:     #E9E6DC;
  --color-surface:      #FFFFFF;   /* elevated cards / composer on the cream bg */
  --color-text:         #2A2722;
  --color-text-muted:   #6B6862;
  --color-text-subtle:  #93908A;
  --color-border:       #E6E3D9;
  --color-border-strong:#D6D2C6;

  --color-accent:       #2A2722;
  --color-accent-hover: #3D3A33;
  --color-accent-text:  #FAF9F5;

  /* Claude clay/rust brand accent — links, active nav, send button, focus. */
  --color-brand:        #D97757;
  --color-brand-hover:  #C2613F;
  --color-brand-text:   #FFFFFF;

  --color-success: #0F7B6C;
  --color-warning: #CB912F;
  --color-error:   #EB5757;

  --color-success-bg: rgba(15, 123, 108, 0.08);
  --color-warning-bg: rgba(203, 145, 47, 0.10);
  --color-error-bg:   rgba(235, 87, 87, 0.08);

  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;   /* Claude chat composer + welcome icon */

  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 6px 24px rgba(0, 0, 0, 0.10);  /* sidebar hover-overlay + composer lift */

  --sidebar-w:           260px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            48px;
  --content-max:         1200px;
  --chat-max:            740px;   /* Juno message column + composer width */
  --content-pad-y: 32px;
  --content-pad-x: 24px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Read by JS via getComputedStyle so charts auto-darken in dark mode. */
  --chart-grid: var(--color-border);
  --chart-axis: var(--color-text-muted);

  /* Height of the impersonation banner when active. Defaults to 0 so the
     topbar's `top: var(--impersonation-banner-h)` is harmless when not
     impersonating. Bumped via the body[data-impersonating] selector below. */
  --impersonation-banner-h: 0px;
}

body[data-impersonating="true"] {
  --impersonation-banner-h: 40px;
}

/* ---------- Tokens (dark) ------------------------------------------------ */
[data-theme="dark"] {
  --color-bg:           #262624;
  --color-bg-subtle:    #1F1E1C;
  --color-bg-muted:     #30302C;
  --color-surface:      #2F2E2B;
  --color-text:         #ECEAE3;
  --color-text-muted:   #9A968C;
  --color-text-subtle:  #6E6B62;
  --color-border:       #3A3833;
  --color-border-strong:#4A473F;

  --color-accent:       #ECEAE3;
  --color-accent-hover: #DAD7CE;
  --color-accent-text:  #262624;

  --color-brand:        #E08A6B;
  --color-brand-hover:  #C2613F;
  --color-brand-text:   #FFFFFF;

  --color-success-bg: rgba(15, 123, 108, 0.18);
  --color-warning-bg: rgba(203, 145, 47, 0.18);
  --color-error-bg:   rgba(235, 87, 87, 0.16);
}

/* ---------- Reset / base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 6px 12px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
  user-select: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn-secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-bg-muted); }

.btn-ghost { background: transparent; color: var(--color-text); }
.btn-ghost:hover { background: var(--color-bg-muted); }

.btn-danger {
  background: transparent;
  color: var(--color-error);
  border-color: var(--color-border-strong);
}
.btn-danger:hover { background: var(--color-error-bg); border-color: var(--color-error); }

.btn-sm { height: 26px; padding: 4px 10px; font-size: var(--fs-xs); }
.btn-lg { height: 38px; padding: 8px 16px; font-size: var(--fs-md); }
.btn-block { display: flex; width: 100%; }

/* ---------- Cards -------------------------------------------------------- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body { padding: var(--space-5); }
.card-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ---------- Forms -------------------------------------------------------- */
.form-group { margin-bottom: var(--space-4); }
.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
textarea,
select {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--fs-md);
  padding: 7px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 80ms ease, box-shadow 80ms ease;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(25, 25, 25, 0.08);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.form-help  { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 4px; }
.form-error { font-size: var(--fs-xs); color: var(--color-error); margin-top: 4px; }
.form-control[aria-invalid="true"],
.form-control.is-invalid,
input.is-invalid { border-color: var(--color-error); }

.checkbox-row { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.checkbox-row input { width: auto; }

.form-control-sm { padding: 4px 8px; font-size: var(--fs-xs); height: 28px; }
.form-control-num { width: 88px; }
.form-label-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.form-label-inline input[type="number"],
.form-label-inline select {
  width: auto;
}

/* ---------- Tables ------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table thead th {
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-bg-subtle); }
/* Currently drilled-into row (e.g. selected country/state in Order Analysis). */
.table tbody tr.row-active { background: var(--color-bg-muted); }
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------- Badges ------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error   { background: var(--color-error-bg);   color: var(--color-error);   }
.badge-neutral { background: var(--color-bg-muted);   color: var(--color-text-muted); }

/* ---------- Alerts ------------------------------------------------------- */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  background: var(--color-bg-muted);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.alert-success { background: var(--color-success-bg); color: var(--color-success); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.alert-error   { background: var(--color-error-bg);   color: var(--color-error);   }
.alert-info    { background: var(--color-bg-subtle); color: var(--color-text); border: 1px solid var(--color-border); }

.row-dismissed td { opacity: 0.55; }
.table th.col-check, .table td.col-check { width: 32px; }

/* ---------- Tabs --------------------------------------------------------- */
.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.tab:hover { color: var(--color-text); text-decoration: none; }
.tab.active { color: var(--color-text); border-bottom-color: var(--color-accent); }

/* ---------- Modal -------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  padding: var(--space-4);
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-sm);
}
.modal-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-body   { padding: var(--space-5); }
.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ---------- Toasts ------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 1100;
  pointer-events: none;
}
.toast {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  min-width: 260px;
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  animation: toast-in 200ms ease;
}
.toast-success { border-left: 3px solid var(--color-success); }
.toast-warning { border-left: 3px solid var(--color-warning); }
.toast-error   { border-left: 3px solid var(--color-error); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Toggle switch ----------------------------------------------- */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 32px; height: 18px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch-slider {
  position: absolute; inset: 0;
  background: var(--color-border-strong);
  border-radius: 999px;
  transition: background 120ms ease;
  cursor: pointer;
}
.toggle-switch-slider::before {
  content: "";
  position: absolute;
  height: 14px; width: 14px;
  left: 2px; top: 2px;
  background: var(--color-bg);
  border-radius: 50%;
  transition: transform 120ms ease;
}
.toggle-switch input:checked + .toggle-switch-slider { background: var(--color-accent); }
.toggle-switch input:checked + .toggle-switch-slider::before { transform: translateX(14px); }

/* ---------- Empty state ------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-muted);
}
.empty-state-title {
  font-size: var(--fs-md);
  color: var(--color-text);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
}
.empty-state-hint {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ---------- Avatar ------------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-bg-muted);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: 0;
}
.avatar-lg { width: 40px; height: 40px; font-size: var(--fs-md); }
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }

/* ---------- Layout: app shell ------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}
.app-sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  display: flex;
  flex-direction: column;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}
.app-sidebar-header {
  height: var(--topbar-h);
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.app-sidebar-brand {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sidebar-collapse-toggle { flex: 0 0 auto; }
.sidebar-collapse-toggle .icon { transition: transform 0.15s ease; transform: rotate(180deg); }
@media (max-width: 900px) { .sidebar-collapse-toggle { display: none; } }
.app-sidebar-nav { flex: 1; padding: var(--space-3) var(--space-2); }
.nav-section {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  padding: var(--space-3) var(--space-3) var(--space-2);
}
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.nav-link:hover { background: var(--color-bg-muted); color: var(--color-text); text-decoration: none; }
.nav-link.active { background: var(--color-bg-muted); color: var(--color-text); font-weight: var(--fw-medium); }
.nav-link .icon { color: var(--color-text-subtle); }
.nav-link.active .icon { color: var(--color-text); }

/* Claude-style sidebar: New-chat button + collapsible module groups +
   a recent-chats list. Reuses .nav-link / .nav-section / .btn tokens. */
.sidebar-new-chat {
  width: 100%;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.sidebar-group { border: none; }
.sidebar-group-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sidebar-group-summary::-webkit-details-marker { display: none; }
.sidebar-group-summary:hover { color: var(--color-text-muted); }
.sidebar-group-summary .icon {
  flex: 0 0 auto;
  color: var(--color-text-subtle);
  transition: transform 0.12s ease-in-out;
}
.sidebar-group[open] > .sidebar-group-summary .icon { transform: rotate(90deg); }
.sidebar-group-body { display: flex; flex-direction: column; gap: 1px; }
/* The recent-chats list flows in the scrolling sidebar (the sidebar owns
   the scroll), unlike the old fixed-height rail. */
.app-sidebar .sidebar-chats { flex: 0 0 auto; overflow: visible; }

.app-sidebar-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.app-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.app-sidebar-user-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-user-email { font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Sidebar: Claude clay active accent + collapsible icon rail -------- */
.app-shell { position: relative; }   /* anchor for the hover-peek overlay */
.nav-link.active .icon { color: var(--color-brand); }
.assistant-convo-row.active { box-shadow: inset 2px 0 0 var(--color-brand); }

@media (min-width: 901px) {
  /* Collapsed: the grid reserves only the slim rail; the sidebar fills it. */
  body[data-sidebar-collapsed="true"] .app-shell {
    grid-template-columns: var(--sidebar-w-collapsed) 1fr;
  }
  /* Rail (collapsed + not hovered): show only the New-chat icon, the toggle
     and the account avatar — labels, groups and chats hide. */
  body[data-sidebar-collapsed="true"] .app-sidebar:not(:hover) .app-sidebar-brand,
  body[data-sidebar-collapsed="true"] .app-sidebar:not(:hover) .nav-section,
  body[data-sidebar-collapsed="true"] .app-sidebar:not(:hover) .sidebar-group,
  body[data-sidebar-collapsed="true"] .app-sidebar:not(:hover) .sidebar-chats,
  body[data-sidebar-collapsed="true"] .app-sidebar:not(:hover) .app-sidebar-user,
  body[data-sidebar-collapsed="true"] .app-sidebar:not(:hover) .app-sidebar-footer form {
    display: none;
  }
  body[data-sidebar-collapsed="true"] .app-sidebar:not(:hover) .sidebar-new-chat {
    font-size: 0;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  body[data-sidebar-collapsed="true"] .app-sidebar:not(:hover) .app-sidebar-header {
    justify-content: center;
    padding: 0;
  }
  body[data-sidebar-collapsed="true"] .app-sidebar:not(:hover) .app-sidebar-footer {
    justify-content: center;
  }
  /* Hover-peek: float the full sidebar out over the content (no reflow —
     the 56px grid track stays reserved). */
  body[data-sidebar-collapsed="true"] .app-sidebar:hover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-w);
    box-shadow: var(--shadow-md);
    z-index: 30;
  }
  /* Toggle chevron points right (expand) when collapsed. */
  body[data-sidebar-collapsed="true"] .sidebar-collapse-toggle .icon { transform: rotate(0deg); }
}

.app-topbar {
  grid-area: topbar;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  /* Honor the iPhone notch when launched as a standalone PWA. */
  padding-left:  max(var(--space-5), env(safe-area-inset-left));
  padding-right: max(var(--space-5), env(safe-area-inset-right));
  gap: var(--space-3);
  position: sticky;
  /* Sits below the impersonation banner when one is shown. */
  top: var(--impersonation-banner-h);
  z-index: 10;
}
.topbar-left  { flex: 1; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: var(--space-2); }

/* Store / workspace switcher — native <details> dropdown in the topbar. */
.ws-switcher { position: relative; }
.ws-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 4px 10px;
  max-width: 220px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  list-style: none;            /* hide the native disclosure triangle */
}
.ws-switcher-trigger::-webkit-details-marker { display: none; }
.ws-switcher-trigger:hover,
.ws-switcher[open] .ws-switcher-trigger { background: var(--color-bg-muted); }
.ws-switcher-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-switcher-trigger svg:last-child { transition: transform 120ms ease; }
.ws-switcher[open] .ws-switcher-trigger svg:last-child { transform: rotate(180deg); }
.ws-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1200;
  min-width: 220px;
  max-width: 280px;
  padding: var(--space-1);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.ws-switcher-heading {
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.ws-switcher-form { margin: 0; }
.ws-switcher-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 6px var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
.ws-switcher-item:hover { background: var(--color-bg-muted); text-decoration: none; }
.ws-switcher-item.is-current { font-weight: var(--fw-medium); cursor: default; }
.ws-switcher-item.is-current:hover { background: transparent; }
.ws-switcher-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-switcher-tick { width: 14px; height: 14px; flex: none; }   /* aligns rows under the check icon */
.ws-switcher-sep { height: 1px; margin: var(--space-1) 0; background: var(--color-border); }
.ws-switcher-action { color: var(--color-text-muted); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  min-width: 0;
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb-current { color: var(--color-text); font-weight: var(--fw-medium); }
.breadcrumb-sep { color: var(--color-text-subtle); }

.icon-button {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}
.icon-button:hover { background: var(--color-bg-muted); color: var(--color-text); }
.icon-button .icon { display: block; }
.icon-button-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 6px; height: 6px;
  background: var(--color-error);
  border-radius: 50%;
  border: 2px solid var(--color-bg);
}

/* Show only the relevant icon for the current theme — used by the dark-mode
   toggle to swap between moon (light theme) and sun (dark theme). */
body[data-theme="light"] [data-theme-only="dark"]  { display: none; }
body[data-theme="dark"]  [data-theme-only="light"] { display: none; }

/* ---------- Impersonation banner ---------------------------------------- */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 1200;          /* above topbar, below modal */
  height: var(--impersonation-banner-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  background: var(--color-warning-bg);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-warning);
  font-size: var(--fs-sm);
}
.impersonation-banner .badge-warning {
  background: var(--color-warning);
  color: var(--color-bg);
}

.app-main {
  grid-area: main;
  padding: var(--content-pad-y) var(--content-pad-x);
  /* Bottom inset for the iPhone home indicator when running standalone. */
  padding-bottom: max(var(--content-pad-y), calc(var(--content-pad-y) + env(safe-area-inset-bottom)));
  width: 100%;
  background: var(--color-bg);
  min-width: 0;
}
.app-main-inner { max-width: var(--content-max); margin: 0 auto; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}
.page-title    { font-size: var(--fs-2xl); }
.page-subtitle { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: 4px; }

/* ---------- Auth screens (no sidebar) ----------------------------------- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: var(--color-bg-subtle);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.auth-brand {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-6);
  letter-spacing: -0.01em;
}
.auth-title    { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.auth-subtitle { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.auth-footer   { margin-top: var(--space-6); font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; }

/* ---------- Stat tiles --------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.stat-tile {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.stat-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.stat-value { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.stat-value.stat-value-sm { font-size: var(--fs-md); }
.stat-hint  { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------- Mobile sidebar ---------------------------------------------- */
.topbar-mobile-toggle { display: none; }
.app-sidebar-overlay  { display: none; }

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .app-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    /* Drawer respects the home-indicator inset so the footer never gets
       clipped on a standalone PWA launched on iPhone. */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .app-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-sm); }
  .app-sidebar-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .app-sidebar-overlay.is-open { opacity: 1; pointer-events: auto; }
  .topbar-mobile-toggle { display: inline-flex; }
  .app-main {
    padding: var(--space-5) var(--space-4);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  }
  /* Bigger touch targets on mobile — feels native, hits Apple/Google a11y guidance. */
  .icon-button { width: 40px; height: 40px; }
  .nav-link    { padding: 10px 12px; }
}

/* When launched from the home screen we're in display-mode: standalone.
   Hide things that obviously belong in a web context (e.g. "Log in" links
   on landing) and tighten the layout so the app feels native, not like a
   page in a browser. */
@media (display-mode: standalone) {
  /* Reserved hook — keep selectors minimal here for now. */
}

/* ---------- Utilities --------------------------------------------------- */
.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error   { color: var(--color-error); }

/* Weekly Report — analysis bullet lists (takeaways, health-at-a-glance). */
.report-list { margin: 0; padding-left: 1.2rem; list-style: disc; }
.report-list li { margin: 0.25rem 0; line-height: 1.5; }
.text-xs  { font-size: var(--fs-xs); }
.text-sm  { font-size: var(--fs-sm); }
.text-md  { font-size: var(--fs-md); }
.text-lg  { font-size: var(--fs-lg); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-mono     { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }
.min-w-0         { min-width: 0; }
.no-underline    { text-decoration: none; }
.truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-inline        { display: inline; }
.align-middle    { vertical-align: middle; }
.cursor-pointer  { cursor: pointer; }

/* Max-width helpers — closed set; used by auth cards, modals, dialogs. */
.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 400px; }
.max-w-md { max-width: 520px; }
.max-w-lg { max-width: 580px; }
.max-w-xl { max-width: 640px; }

/* "Eyebrow" label style — small uppercase letter-spaced text used as a
   section header above grouped content (capability categories, scope picker, etc.). */
.label-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Two-column grids used by template editors and member-edit.
   1-2 ratio → "narrow form, wide content"; 1-1 → equal halves. */
.grid-2col-1-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
}
.grid-3col-1-1-1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.flex-spacer { flex: 1 1 auto; }
.tr-clickable { cursor: pointer; }
.border-l-success { border-left: 3px solid var(--color-success); }
.border-l-accent  { border-left: 3px solid var(--color-accent); }
.border-l-warning { border-left: 3px solid var(--color-warning); }

/* Drag-and-drop reorder helpers (catalogue template builder, image gallery). */
.drag-handle {
  display: inline-flex;
  align-items: center;
  cursor: grab;
  color: var(--color-text-muted);
}
.drag-handle:active { cursor: grabbing; }
.drag-source { opacity: 0.4; }

/* Image gallery card. Reused by product + A+ galleries. */
.image-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.image-card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

/* Diff view — added/removed/modified row colors. */
.diff-row-added    { background: var(--color-success-bg); }
.diff-row-removed  { background: var(--color-error-bg); }
.diff-row-modified { background: var(--color-warning-bg); }
.diff-text-before  { text-decoration: line-through; color: var(--color-text-muted); }

/* Auto-save indicator pill (entry editor). */
.autosave-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}

/* Marketplace preview frames — emulate Amazon's product detail page. */
.preview-desktop, .preview-mobile {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: var(--content-max);
  margin: 0 auto;
}
.preview-mobile { max-width: 420px; }
.preview-title    { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.preview-bullets  { list-style: disc inside; padding-left: 0; margin: var(--space-3) 0; }
.preview-bullets li { margin-bottom: var(--space-2); }

.grid-2col-1-1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}

/* Scrollable bordered box — used by the scope picker for long checklists. */
.scrollbox {
  max-height: 200px;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.scrollbox-sm { max-height: 160px; }

/* Multi-line button variant — used by the workspace-picker buttons in
   tenant select, where the row is taller than the standard btn height. */
.btn-multiline { height: auto; padding: 12px 16px; }

/* Singletons that come up enough to deserve a class */
.m-0  { margin: 0; }
.ml-2 { margin-left: var(--space-2); }
.mr-2 { margin-right: var(--space-2); }
.tracking-tight { letter-spacing: -0.02em; }

/* Marketing-headline size used on landing only. Beyond the standard fs scale
   on purpose — landing is the only place we want a 32px display heading. */
.text-display { font-size: var(--fs-3xl); letter-spacing: -0.02em; }

.gap-xs { gap: var(--space-1); }
.gap-sm { gap: var(--space-2); }
.gap-md { gap: var(--space-3); }
.gap-lg { gap: var(--space-4); }
.gap-xl { gap: var(--space-6); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.w-full { width: 100%; }
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Catalog (products) module — Phase 1
   --------------------------------------------------------------------------- */

/* Hub: clickable count tiles. */
.grid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 80ms ease, background 80ms ease;
}
.tile:hover { border-color: var(--color-text); }
.tile-icon  { color: var(--color-text-muted); }
.tile-label { font-size: var(--fs-sm); color: var(--color-text-muted); }
.tile-value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; }

/* Filter bar above list pages — search box + selects + apply button on one row.
   Compactness rules:
     - Selects + date inputs: fixed width, no grow.
     - Search / text inputs: grow to fill remaining space (still capped
       by the row).
     - Buttons + checkboxes never stretch.
   Form widgets carry `class="input"` so these rules apply even when
   Django's default block-level styling would otherwise force them to
   full width. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}
.filter-bar select,
.filter-bar select.input { flex: 0 0 auto; width: auto; min-width: 140px; max-width: 220px; }
.filter-bar input[type="date"],
.filter-bar input[type="date"].input { flex: 0 0 auto; width: auto; min-width: 130px; max-width: 160px; }
.filter-bar input[type="number"],
.filter-bar input[type="number"].input { flex: 0 0 auto; width: auto; min-width: 90px; max-width: 120px; }
.filter-bar input[type="search"],
.filter-bar input[type="text"],
.filter-bar input[type="search"].input,
.filter-bar input[type="text"].input {
  flex: 1 1 220px; min-width: 0; max-width: 320px;
}
.filter-bar .input { min-width: 0; }
.filter-bar .btn { flex-shrink: 0; }
.filter-bar label { flex: 0 0 auto; white-space: nowrap; }

/* Vertical form scaffolding — used by all catalog forms. */
.form-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row   { display: flex; flex-direction: column; gap: var(--space-1); }
.form-row-narrow { max-width: 280px; }
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Pagination row at the bottom of long lists. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.text-danger { color: var(--color-error); }

/* Catalog phase 2 — variation chips, dimension grid, image thumbnails. */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.chip-sm { font-size: 11px; padding: 1px 6px; }
.chip-x {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.chip-x:hover { color: var(--color-error); }

.grid-4col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
}

.thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: block;
}
.thumb-empty { background: var(--color-bg-muted); }
.thumb-lg { width: 80px; height: 80px; }
.cell-thumb { width: 48px; }

/* Recipe builder column widths (BOM table). */
.col-qty    { width: 120px; }
.col-action { width: 60px; }

/* Reports phase 1 — Stock Statement table.
   Pinned header + sticky first column + indent levels + tiny trend arrows. */
.stock-table-wrap {
  overflow: auto;
  max-height: 70vh;
}
.stock-table thead th {
  position: sticky; top: 0;
  background: var(--color-bg);
  z-index: 2;
}
.stock-table .sticky-col {
  position: sticky; left: 0;
  background: var(--color-bg);
  z-index: 1;
}
.stock-table thead th.sticky-col { z-index: 3; }
.stock-table .indent-1 { padding-left: var(--space-4); }
.stock-table .indent-2 { padding-left: calc(var(--space-4) * 2); }
.stock-table .indent-3 { padding-left: calc(var(--space-4) * 3); }
.stock-table .lvl-3 td { font-size: var(--fs-xs); }
.stock-table .grand-total td {
  border-top: 2px solid var(--color-border);
  background: var(--color-bg-subtle);
}
.hierarchy-toggle {
  appearance: none; border: 0; background: transparent;
  cursor: pointer; padding: 0 6px 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-family: monospace;
}
.hierarchy-toggle:hover { color: var(--color-text); }
.trend-up   { color: var(--color-success); margin-left: 4px; font-size: 10px; }
.trend-down { color: var(--color-error);   margin-left: 4px; font-size: 10px; }
.btn.active { background: var(--color-bg-muted); color: var(--color-text); }
.datahub-card-grid-narrow { display: flex; gap: var(--space-2); }

/* Reports phase 2 — sparklines, line charts, coverage strip. */
.sparkline { color: var(--color-text); display: inline-block; vertical-align: middle; }
.line-chart { width: 100%; height: auto; max-width: 100%; }
.line-chart .chart-grid { stroke: var(--color-border); stroke-dasharray: 2 4; }
.line-chart .chart-axis-text { fill: var(--color-text-muted); font-size: 11px; }
.line-chart .chart-line.series-primary { stroke: var(--color-text); }
.line-chart .chart-line.series-secondary { stroke: var(--color-text-muted); stroke-dasharray: 4 3; }
.line-chart .chart-line.series-accent { stroke: var(--color-success); }

.coverage-strip {
  display: flex;
  gap: 1px;
  height: 16px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.coverage-day {
  flex: 1 1 auto;
  min-width: 2px;
  background: var(--color-success);
}
.coverage-missing { background: var(--color-error); }
.coverage-present { background: var(--color-success); }

.reports-subnav,
.catalog-subnav { gap: var(--space-1); flex-wrap: wrap; }
.reports-subnav-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--color-border);
  margin: 0 var(--space-1);
}

/* P&L builder — toggleable lines, excluded rows, custom-cost name input. */
.builder-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.is-excluded { opacity: 0.45; }
.is-excluded .font-mono { text-decoration: line-through; }
.pnl-name-input { min-width: 240px; }

/* Sales pivot grid — sticky first column + horizontal scroll. */
.pivot-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.pivot-table { min-width: max-content; }
.pivot-table th.pivot-row-header,
.pivot-table td.pivot-row-header {
  position: sticky;
  left: 0;
  background: var(--color-bg);
  z-index: 1;
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
}
.pivot-table th.pivot-row-total,
.pivot-table td.pivot-row-total {
  border-left: 1px solid var(--color-border);
  font-weight: 600;
}
.pivot-table tfoot th { background: var(--color-bg-muted); }

/* Integration credential status pill (Amazon Settings page). */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}
.status-badge.status-valid {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success);
}
.status-badge.status-invalid {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}
.status-badge.status-pending {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning);
}
.status-badge.status-approved,
.status-badge.status-completed {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success);
}
.status-badge.status-rejected {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}
.status-badge.status-cancelled {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}
.status-badge.status-in_progress {
  background: var(--color-bg-muted);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Account Health metric statuses — green/yellow/orange/red severity
   ladder matching Amazon's own Account Health colour cues. Reuses
   the semantic-color variables so dark mode + brand changes
   propagate from the :root block. */
.status-badge.status-good {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success);
}
.status-badge.status-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning);
}
.status-badge.status-at_risk {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning);
}
.status-badge.status-critical {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}
.status-badge.status-unknown {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
/* Snapshot lifecycle statuses on history + detail pages. */
.status-badge.status-pending_review {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning);
}
.status-badge.status-extracted {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success);
}
.status-badge.status-failed {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}
.status-badge.status-discarded {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* ---------------------------------------------------------------- */
/* Account Health — Amazon-style 3-section card layout.              */
/* Mirrors the seller-central Account Health page: Customer Service  */
/* / Policy Compliance / Shipping Performance side-by-side, each     */
/* with a status pill in the header, per-channel sub-columns where   */
/* Amazon shows them, and a horizontal AHR gauge with coloured bands.*/
/* ---------------------------------------------------------------- */
.health-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (min-width: 1024px) {
  .health-sections {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
  }
}

.health-section-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.health-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.health-section-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}

.health-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.health-metric:last-child { border-bottom: 0; padding-bottom: 0; }
.health-metric-label {
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-weight: 500;
}
.health-metric-target {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.health-metric-meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.health-metric-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.health-metric-channel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}
.health-metric-channel-name {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.health-metric-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.health-metric-value.is-na {
  color: var(--color-text-muted);
  font-weight: 400;
}

.health-submetrics-head {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* AHR gauge — horizontal bar with the Amazon score-band colors. */
.ahr-gauge {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}
.ahr-score {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ahr-score-na {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: var(--color-text-muted);
}
.ahr-bar {
  position: relative;
  height: 10px;
  border-radius: var(--radius-sm);
  /* 0-100 red, 100-200 amber, 200-1000 green. */
  background: linear-gradient(
    to right,
    var(--color-error)   0%,
    var(--color-error)   10%,
    var(--color-warning) 10%,
    var(--color-warning) 20%,
    var(--color-success) 20%,
    var(--color-success) 100%
  );
  border: 1px solid var(--color-border);
}
.ahr-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  background: var(--color-text);
  border-radius: 1px;
  transform: translateX(-50%);
}
.ahr-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.ahr-scale span {
  position: relative;
  flex: 0 0 auto;
}

/* Account Health — structural classes that replace one-off inline styles.
   The centralized-styling rule forbids style="..."; everything visual
   lives here. */

/* Two-column page grid used by detail.html + intake.html. Mirrors
   `grid-2col-1-1` but with a tighter 16px gap. */
.health-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-3);
}
@media (max-width: 768px) {
  .health-detail-grid { grid-template-columns: 1fr; }
}

/* Screenshot preview image — used in detail.html + intake.html. */
.health-screenshot-img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Subtle row highlight on a metric the user has manually overridden
   on the preview/edit page. */
.health-row-overridden {
  background: var(--color-success-bg);
}

/* Per-metric annotation summary (the "Add note" / "Edit note" toggle).
   Cursor + muted color without inline style. */
.health-note-summary {
  cursor: pointer;
  color: var(--color-text-muted);
}

/* Settings page — frequency + warning + active row, flex-wrap. */
.health-settings-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Notifications list row — the body column flexes to fill. */
.health-notification-body { flex: 1; }
/* Badge to the right of the title in a notification row. */
.health-notification-kind-badge { margin-left: var(--space-1); }

/* AHR gauge — SVG version (no inline styles). Bands + marker + scale
   labels are SVG primitives whose colors come from these CSS rules. */
.ahr-gauge-svg {
  width: 100%;
  height: 30px;
  display: block;
  margin: var(--space-2) 0;
}
.ahr-gauge-svg .ahr-band-red    { fill: var(--color-error); }
.ahr-gauge-svg .ahr-band-amber  { fill: var(--color-warning); }
.ahr-gauge-svg .ahr-band-green  { fill: var(--color-success); }
.ahr-gauge-svg .ahr-marker-line {
  stroke: var(--color-text);
  stroke-width: 3;
  stroke-linecap: round;
  /* Keep stroke pixel-width constant regardless of viewBox scale. */
  vector-effect: non-scaling-stroke;
}

/* AHR scale labels below the SVG — positioned at the band thresholds
   (10% = 100, 20% = 200, 100% = 1000) so they line up with the
   coloured bands above. */
.ahr-scale-row {
  position: relative;
  height: 14px;
  font-size: 10px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.ahr-scale-row span { position: absolute; }
.ahr-scale-row .ahr-tick-0    { left: 0; }
.ahr-scale-row .ahr-tick-100  { left: 10%; transform: translateX(-50%); }
.ahr-scale-row .ahr-tick-200  { left: 20%; transform: translateX(-50%); }
.ahr-scale-row .ahr-tick-1000 { right: 0; }

/* Variant on .health-submetrics-head — drops the top border + spacing
   when it's used as the first child of a section card. */
.health-submetrics-head.is-first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Generic visibility utility — used by the intake dropzone to swap
   between empty + preview states. */
.is-hidden { display: none !important; }

/* Intake dropzone — paste / drop / click target on the new-intake
   start page. Big neutral border with hover + drag-over states. */
.intake-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  background: var(--color-bg-subtle);
}
.intake-dropzone:hover {
  border-color: var(--color-text);
}
.intake-dropzone.is-drag-over {
  border-color: var(--color-text);
  background: var(--color-bg-muted);
}
.intake-dropzone-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.intake-dropzone-headline {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}
.intake-dropzone-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
#intake-preview-img {
  max-width: 100%;
  max-height: 240px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.intake-preview-filename {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0;
}

/* Trend delta chip — small "↑ 0.3pp" / "↓ 12%" badge next to a metric
   value, color-coded green when the change is "good for this KPI"
   (lower-is-better semantics flip the green/red sense) and red when
   it's worse. */
.delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  margin-left: 6px;
}
.delta-chip.is-good {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success);
}
.delta-chip.is-bad {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}
.delta-chip.is-flat {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* Sparkline cell next to each metric value. Inherits currentColor. */
.health-metric-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--color-text-muted);
}
.health-metric-trend .sparkline {
  width: 90px;
  height: 18px;
}

/* Drilldown link under a metric — "See returns →" style. */
.health-metric-drill {
  font-size: var(--fs-xs);
  margin-top: 2px;
}
.health-metric-drill a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.health-metric-drill a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* User note (improvement #7) — small italic box under a metric row. */
.health-metric-note {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--color-bg-subtle);
  border-left: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Notifications list page. */
.health-notification-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.health-notification-row:last-child { border-bottom: 0; }
.health-notification-row.is-unread {
  background: var(--color-bg-subtle);
  margin-left: -8px;
  padding-left: 8px;
  border-left: 3px solid var(--color-warning);
}
.health-notification-meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Snapshot diff table — two columns + delta, mirrors the Amazon
   layout's tabular numeric style. */
.health-diff-table { width: 100%; border-collapse: collapse; }
.health-diff-table th,
.health-diff-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.health-diff-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
}
.health-diff-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.health-diff-table td.delta-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.health-diff-section-head td {
  padding-top: var(--space-3);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-border);
}

/* Policy issues list — Amazon shows each policy item as a flat row
   with the label on the left and a count on the right. */
.health-policy-issues {
  display: flex;
  flex-direction: column;
}
.health-policy-issue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.health-policy-issue:last-child { border-bottom: 0; }
.health-policy-issue-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text);
}
.health-policy-issue-count.is-zero {
  color: var(--color-text-muted);
  font-weight: 400;
}
.health-policy-issue-count.is-flagged {
  color: var(--color-error);
}

/* Chat-thread layout (Approvals + Work updates). One stream of
   alternating system rows + message bubbles. Reused across both
   modules; do not duplicate inside a per-module CSS file. */
.thread-stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.thread-system {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-1) var(--space-2);
}
.thread-system-approve { color: var(--color-success); }
.thread-system-reject  { color: var(--color-error); }

/* AI polish bar — sits between the chat textarea and the Post
   button. Shared by Approvals + Work Updates; do not duplicate. */
.polish-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.polish-banner {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.polish-banner-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.polish-banner-error {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.thread-message {
  align-self: flex-start;
  max-width: 70%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.thread-message.thread-message-mine {
  align-self: flex-end;
  background: var(--color-bg-subtle);
}
.thread-message-head {
  font-size: var(--fs-xs);
  margin-bottom: var(--space-1);
}
.thread-message-body { white-space: pre-wrap; }
.thread-message-file { margin-top: var(--space-1); }

/* Data-freshness signal (used on Reports / Orders / Returns pages). */
.freshness-signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* AI narrative card — distinguishable from data cards via subtle
   left accent. Stays monochrome to match the design system. */
.ai-narrative-card {
  border-left: 2px solid var(--color-text);
}
.ai-narrative-card .filter-bar { justify-content: space-between; }

/* Compact key/value table — used on the Orders customer-service page
   for the ship-to + metadata cards. Reused across modules that need a
   skinny two-column "label : value" layout inside a card. */
.table-kv th {
  width: 38%;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  vertical-align: top;
  white-space: nowrap;
}
.table-kv td { word-break: break-word; }

/* Status pill variants for Orders customer-service cases. Compose
   from existing semantic-color variables (no new colors). */
.status-badge.status-open {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning);
}
.status-badge.status-resolved {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success);
}

/* Product group member-search dropdown. */
.member-search-wrap { position: relative; }
.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  overflow: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.search-dropdown-row {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.search-dropdown-row:hover { background: var(--color-bg-muted); }

/* Bulk-action toolbar — appears above list tables when ≥1 row selected. */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-top: var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.bulk-bar .bulk-count {
  font-weight: 600;
  font-size: var(--fs-sm);
}
.bulk-bar .spacer { flex: 1; }
.col-checkbox { width: 28px; }

/* DataHub — category-coded cards on the hub. Six categories, six pill
   accents — kept monochrome-friendly (no rainbow) per the design rules. */
.datahub-category { }
.datahub-category-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.datahub-cat-pill {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.datahub-cat-inventory       { background: var(--color-bg-subtle); }
.datahub-cat-operational     { background: var(--color-bg-muted);  }
.datahub-cat-sp              { background: var(--color-bg-subtle); border-style: dashed; }
.datahub-cat-sb              { background: var(--color-bg-subtle); border-style: dashed; }
.datahub-cat-sd              { background: var(--color-bg-subtle); border-style: dashed; }
.datahub-cat-brand_analytics { background: var(--color-bg-muted);  border-style: dotted; }
.datahub-cat-subscribe_save  { background: var(--color-bg-subtle); }
.datahub-cat-health_reviews  { background: var(--color-bg-muted);  }

.datahub-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.datahub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 80ms ease, transform 80ms ease;
}
.datahub-card:hover { border-color: var(--color-text); }
.datahub-card-soon { opacity: 0.7; }
.datahub-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}
.datahub-card-desc {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.datahub-card-stats {
  font-size: var(--fs-xs);
  color: var(--color-text);
  margin-top: var(--space-1);
}

/* ===== DataHub intake — dropzone + Inbox + Health Cockpit ============== */
.dh-file-input { display: none; }
.dh-dropzone {
  position: relative;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  transition: border-color 80ms ease, background 80ms ease;
}
.dh-dropzone.is-dragover { border-color: var(--color-text); background: var(--color-bg-muted); }
.dh-dropzone.is-busy { opacity: 0.6; pointer-events: none; }
.dh-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.dh-dropzone-icon { color: var(--color-text-muted); }
.dh-dropzone-title { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--color-text); }
.dh-dropzone-sub { font-size: var(--fs-sm); color: var(--color-text-muted); }
.dh-link {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--color-text); text-decoration: underline;
}

/* Inbox */
.dh-inbox { margin-top: var(--space-4); }
.dh-inbox-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.dh-inbox-list { display: flex; flex-direction: column; gap: var(--space-2); }
.intake-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg);
}
.intake-row-amber { border-color: var(--color-warning); background: var(--color-warning-bg); }
.intake-row-main { flex: 1 1 auto; min-width: 0; }
.intake-row-file {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.intake-row-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; flex-wrap: wrap; }
.intake-row-bits { font-size: var(--fs-xs); color: var(--color-text-muted); }
.intake-row-reason { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.intake-row-guess { color: var(--color-text-subtle); }
.intake-row-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); }

/* Status dots (fresh / stale / missing) — reuse semantic tokens */
.dh-status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 auto; background: var(--color-text-subtle);
}
.dh-status-fresh   { background: var(--color-success); color: var(--color-success); }
.dh-status-stale   { background: var(--color-warning); color: var(--color-warning); }
.dh-status-missing { background: var(--color-error);   color: var(--color-error); }
span.dh-status { background: none; font-weight: var(--fw-medium); text-transform: capitalize; }

/* Cockpit */
.dh-blocked { display: flex; gap: var(--space-2); align-items: flex-start; }
.dh-blocked-list { margin: var(--space-1) 0 0; padding-left: var(--space-4); font-size: var(--fs-sm); }
.dh-tile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3); margin-top: var(--space-2);
}
.dh-tile {
  border: 1px solid var(--color-border); border-left-width: 3px;
  border-radius: var(--radius-md); background: var(--color-bg);
  padding: var(--space-3);
}
.dh-tile-fresh   { border-left-color: var(--color-success); }
.dh-tile-stale   { border-left-color: var(--color-warning); }
.dh-tile-missing { border-left-color: var(--color-error); }
.dh-tile-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.dh-tile-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.dh-tile-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dh-tile-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  font: inherit;
  font-size: var(--fs-xs);
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dh-tile-item:hover { background: var(--color-bg-muted); }
.dh-tile-item-label {
  flex: 1 1 auto; min-width: 0; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-tile-item-age { color: var(--color-text-subtle); }

/* Manual per-report upload form (report detail page + cockpit modal). */
.upload-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  text-align: center;
  cursor: pointer;
}
.upload-dropzone.is-dragover { border-color: var(--color-brand); background: var(--color-bg-muted); }
.upload-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-dropzone-icon { color: var(--color-text-muted); }
.upload-dropzone-text { font-size: var(--fs-sm); color: var(--color-text); }
.upload-dropzone-hint { font-size: var(--fs-xs); color: var(--color-text-subtle); }

/* ===== Public legal pages (privacy / terms / refund / cookies) ========= */
.legal-wrap { display: flex; flex-direction: column; min-height: 100vh; background: var(--color-bg); }
.legal-container { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 var(--space-5); }
.legal-topbar { border-bottom: 1px solid var(--color-border); }
.legal-topbar .legal-container { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.legal-brand { font-weight: var(--fw-semibold); font-size: var(--fs-lg); color: var(--color-text); text-decoration: none; letter-spacing: -0.02em; }
.legal-back { font-size: var(--fs-sm); color: var(--color-text-muted); text-decoration: none; }
.legal-back:hover { color: var(--color-text); }
.legal-main { flex: 1 1 auto; padding-top: var(--space-10); padding-bottom: var(--space-12); }
.legal-h1 { font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: var(--fw-normal); letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.legal-meta { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0 0 var(--space-8); }
.legal-page { font-size: var(--fs-md); line-height: 1.7; color: var(--color-text); }
.legal-page h2 { font-size: var(--fs-xl); margin: var(--space-8) 0 var(--space-3); }
.legal-page h3 { font-size: var(--fs-lg); margin: var(--space-5) 0 var(--space-2); }
.legal-page p { margin: 0 0 var(--space-3); }
.legal-page ul, .legal-page ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.legal-page li { margin-bottom: var(--space-1); }
.legal-page a { color: var(--color-brand); text-decoration: underline; }
.legal-page strong { font-weight: var(--fw-semibold); }
.legal-page table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: var(--fs-sm); }
.legal-page th, .legal-page td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.legal-page th { background: var(--color-bg-subtle); font-weight: var(--fw-semibold); }
.legal-footer { border-top: 1px solid var(--color-border); padding: var(--space-6) 0; }
.legal-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.legal-footer-links a { font-size: var(--fs-sm); color: var(--color-text-muted); text-decoration: none; }
.legal-footer-links a:hover { color: var(--color-text); }
.legal-fineprint { font-size: var(--fs-xs); color: var(--color-text-subtle); margin: 0; }
.public-chat-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.public-chat-legal a { font-size: var(--fs-xs); color: var(--color-text-subtle); text-decoration: none; }
.public-chat-legal a:hover { color: var(--color-text); text-decoration: underline; }

.input-sm { padding: 4px 8px; font-size: var(--fs-xs); }

/* ---------- Calendar grid (Promotions, future scheduling pages) -------- */
/* Generic 7-column month view: weekday header + 6 weeks of day cells.
   Uses existing tokens — no calendar-specific colors. */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cal-weekday {
  background: var(--color-bg-subtle);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.cal-day {
  background: var(--color-bg);
  min-height: 96px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-day-out  { background: var(--color-bg-subtle); }
.cal-day-today .cal-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-text);
}
.cal-day-num {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}
.cal-day-out .cal-day-num { color: var(--color-text-subtle); }
.cal-bar {
  display: block;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.cal-bar:hover { text-decoration: none; border: 0; }

/* ---------------------------------------------------------------- *
 * Tasks module — chat thread, briefing, bell badge, kanban board.
 * Uses existing tokens; no module-specific colors.
 * ---------------------------------------------------------------- */

/* Conversation thread on the task detail page. */
.chat-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.chat-row { display: flex; flex-direction: column; gap: 2px; }
.chat-bubble {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  white-space: pre-wrap;
}
.chat-row-ai_message .chat-bubble {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

/* Daily AI briefing — bullets read like a calm executive update. */
.briefing-bullets {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.briefing-bullets li { line-height: 1.4; }

/* Bell-icon unread badge. Sits on top of the bell glyph. */
.badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 10px;
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Topbar uses .icon-button — make it positional so the badge anchors. */
.app-topbar .icon-button { position: relative; }

/* Inline form helper — used inside table cells / filter-bars where
 * a default block-level <form> would push siblings to the next row.
 * Replaces inline style="display:inline" so the no-inline-style hook
 * stays clean.
 */
.form-inline { display: inline; }

/* Narrow icon-only table column — 24px wide. */
.col-icon { width: 24px; }

/* filter-bar variant: stretch children apart. The base .filter-bar is
 * left-aligned with gap; this modifier lets a header sit on the left
 * and an action button on the right. */
.filter-bar-between { justify-content: space-between; }

/* Kanban board — 5-column horizontal scroller for narrow screens. */
.kanban-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
  overflow-x: auto;
}
.kanban-column { min-height: 200px; }
.kanban-column h3 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kanban-card {
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
}
.kanban-card:hover { border-color: var(--color-border-strong); }
.kanban-card-title { font-weight: var(--fw-medium); }
.kanban-card-meta {
  display: flex;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* AI Memory module — topic tile grid + entry detail layout.
   Composes existing tokens; no new colors, no new radii. */
.ai-memory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.ai-memory-tile {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.12s ease;
}
.ai-memory-tile:hover { border-color: var(--color-border-strong); }
.ai-memory-tile-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.ai-memory-tile-body { flex: 1; min-width: 0; }
.ai-memory-tile-title {
  font-weight: var(--fw-medium);
  margin-bottom: 2px;
}
.ai-memory-tile-desc {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.ai-memory-tile-count {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.ai-memory-body {
  white-space: pre-wrap;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin: 0;
}
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: 0;
}
.meta-grid dt { margin-bottom: 2px; }
.meta-grid dd { margin: 0; font-size: var(--fs-sm); }

/* Seller Support — Claude-style chat layout.
   Two-pane on desktop (chat + context aside); single column on mobile.
   All tokens composed from existing variables. */
.chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .chat-layout { grid-template-columns: 1fr; }
}
.chat-main {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  min-width: 0;
}
.chat-aside { min-width: 0; }

.chat-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
}

.chat-stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-height: 50vh;
  max-height: 70vh;
  overflow-y: auto;
}
.chat-stream-empty { min-height: 0; }

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 85%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.chat-msg-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
}
.chat-msg-head strong { font-weight: var(--fw-medium); }
.chat-msg-text {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.chat-msg-body { min-width: 0; }
.chat-msg-file { font-size: var(--fs-xs); display: flex; align-items: center; gap: 4px; }

/* User messages — right-aligned, accented border. */
.chat-msg-user {
  align-self: flex-end;
  background: var(--color-bg-muted, var(--color-bg));
  border-color: var(--color-border-strong, var(--color-border));
}

/* AI messages — left-aligned. */
.chat-msg-ai { align-self: flex-start; }

/* The actual support draft — emphasised with a subtle accent. */
.chat-msg-draft {
  border-color: var(--color-text);
  background: var(--color-surface);
}
.chat-msg-placeholder-warn {
  margin-top: var(--space-2);
  padding: 4px 8px;
  font-size: var(--fs-xs);
  color: var(--color-text);
  background: var(--color-warning-bg, rgba(203, 145, 47, 0.12));
  border: 1px solid var(--color-warning, #CB912F);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* AI brief — collapsible, plain. */
.chat-msg-thinking {
  align-self: flex-start;
  border: 1px dashed var(--color-border);
  background: transparent;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-xs);
  max-width: 85%;
}
.chat-msg-thinking summary { cursor: pointer; color: var(--color-text-muted); }
.chat-msg-thinking pre { margin-top: var(--space-2); }

/* System events + notes — quiet, full-width, no border. */
.chat-msg-system {
  align-self: stretch;
  background: transparent;
  border: none;
  padding: 0;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}
.chat-msg-note {
  align-self: stretch;
  background: var(--color-bg-muted, var(--color-bg));
  border-style: dashed;
}

/* Composer — sticky-feeling textarea pinned under the stream. */
.chat-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.chat-composer textarea,
.chat-composer .chat-composer-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  resize: vertical;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}
.chat-composer textarea:focus { outline: 2px solid var(--color-text); outline-offset: 0; }
.chat-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.chat-copy-btn { margin-left: auto; }

/* Seller Support — status panel "promote to playbook" toggle. */
.resolve-promote-label { margin-right: 4px; }

/* Public front-door chat (/chat/, and ecomex.app/) — a native-app-style
   full-height chat with a Claude-like centered welcome. No app chrome.
   Reuses .chat-msg* bubbles; everything else composed from existing tokens. */
.public-chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;            /* mobile: tracks the visible viewport */
  background: var(--color-bg);
}
.public-chat-bar {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top));
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.public-chat-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
}
.public-chat-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Scrollable message area — fills all space between the bar and the dock. */
.public-chat-main {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Claude-style centered welcome — shown until the first message. */
.public-chat-welcome {
  margin: auto;
  max-width: 600px;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.public-chat-welcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-muted);
  color: var(--color-text);
}
.public-chat-welcome-title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--color-text);
}
.public-chat-welcome-sub {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.public-chat-welcome-link { font-size: var(--fs-sm); }

/* Message stream — centered column of .chat-msg bubbles. */
.public-chat-stream {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
}
.public-chat-stream .chat-msg { max-width: 100%; }

/* Bottom dock — composer pinned above the home indicator. */
.public-chat-dock {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}
.public-chat-counter {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 var(--space-2);
}
.public-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: 720px;
  margin: 0 auto;
}
.public-chat-input {
  flex: 1 1 auto;
  resize: none;
  max-height: 160px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  background: var(--color-surface);
  color: var(--color-text);
}
.public-chat-input:focus { outline: 2px solid var(--color-text); outline-offset: 0; }
.public-chat-send {
  flex: 0 0 auto;
  height: 40px;
  width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.public-chat-foot {
  max-width: 720px;
  margin: var(--space-2) auto 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}
@media (max-width: 600px) {
  .public-chat-welcome-title { font-size: var(--fs-xl); }
}

/* Assistant — Claude-style chat inside the app shell. The shell fills
   the viewport below the topbar: a slim conversation rail on the left,
   and a chat column that shows a centered welcome + composer until the
   first message (`.assistant-empty`), then a scrolling thread with the
   composer docked at the bottom. Bubble overrides are scoped under
   .assistant-stream so the generic .chat-msg* classes used by other
   modules are untouched. */
.assistant-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h) - (2 * var(--content-pad-y)));
  height: calc(100dvh - var(--topbar-h) - (2 * var(--content-pad-y)));
  min-height: 420px;
}

/* Recent-chats list. Lives in the global sidebar now (the rail was
   merged in); the .assistant-convo-* classes are shared so the
   live-prepend JS and styling carry across. */
.assistant-convo-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.assistant-convo-row {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: background 0.08s ease-in-out;
}
.assistant-convo-row:hover,
.assistant-convo-row.active { background: var(--color-bg-muted, var(--color-bg)); }
.assistant-convo-row.active { box-shadow: inset 2px 0 0 var(--color-text); }
.assistant-convo-link {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px var(--space-2);
  color: inherit;
  text-decoration: none;
}
.assistant-convo-link:hover { text-decoration: none; }
.assistant-convo-title {
  display: block;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.assistant-convo-delete {
  flex: 0 0 auto;
  margin-right: 2px;
  opacity: 0;
  transition: opacity 0.08s ease-in-out;
}
.assistant-convo-row:hover .assistant-convo-delete,
.assistant-convo-delete:focus-within { opacity: 1; }
.assistant-convo-delete .icon-button { width: 24px; height: 24px; }
.assistant-rail-empty { padding: var(--space-2) var(--space-2); }

/* Chat column — fills the single-column shell. */
.assistant-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.assistant-chat-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
}
.assistant-chat-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.assistant-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Centered welcome — shown until the first message. */
.assistant-welcome {
  margin: auto;
  max-width: 560px;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.assistant-welcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: var(--color-bg-muted);
  color: var(--color-brand);
}
.assistant-welcome-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: var(--fw-normal);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.assistant-welcome-sub {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* New-chat state: pull the welcome + composer together into the middle
   of the column, Claude-style. JS drops .assistant-empty on first send
   and the dock falls back to the bottom. */
.assistant-empty .assistant-scroll { flex: 0 0 auto; margin-top: auto; }
.assistant-empty .assistant-dock { margin-bottom: auto; }

/* Message thread — a centered reading column. AI turns are plain text
   on the background (no bubble); user turns get a soft right-aligned
   bubble. */
.assistant-stream {
  width: 100%;
  max-width: var(--chat-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-3);
}
.assistant-stream .chat-msg {
  max-width: 100%;
  border: none;
  background: transparent;
  padding: 0;
}
.assistant-stream .chat-msg-user {
  align-self: flex-end;
  max-width: 75%;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-muted);
}
.assistant-stream .chat-msg-ai { align-self: stretch; }
.assistant-stream .chat-msg-text {
  font-size: var(--fs-lg);
  line-height: 1.65;
}
.assistant-msg-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 0.12s ease-in-out;
}
.assistant-stream .chat-msg-ai:hover .assistant-msg-meta,
.assistant-msg-meta:focus-within { opacity: 1; }

/* Composer dock. */
.assistant-dock { flex: 0 0 auto; padding-top: var(--space-3); }
.assistant-composer {
  max-width: var(--chat-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.assistant-composer:focus-within { border-color: var(--color-brand); }
.assistant-input {
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  padding: 0;
  max-height: 200px;
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--color-text);
}
.assistant-input:focus { outline: none; border: none; box-shadow: none; }
.assistant-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
/* Composer controls: attach (left) + skill-level picker & send (right). */
.composer-attach {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.08s ease, color 0.08s ease;
}
.composer-attach:hover { background: var(--color-bg-muted); color: var(--color-text); }
.composer-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Skill-level picker — custom dropdown so each option shows the name (bigger)
   over its capability (small). Opens upward (composer sits at the bottom). */
.model-picker { position: relative; }
.model-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.model-picker-trigger::-webkit-details-marker { display: none; }
.model-picker-trigger:hover { background: var(--color-bg-muted); color: var(--color-text); }
.model-picker-current { font-weight: var(--fw-medium); }
.model-picker-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
}
.model-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.model-option:hover,
.model-option.is-selected { background: var(--color-bg-muted); }
.model-option-name { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--color-text); }
.model-option.is-selected .model-option-name { color: var(--color-brand); }
.model-option-desc { font-size: var(--fs-xs); color: var(--color-text-muted); }
.assistant-send {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-brand-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.assistant-send:hover { background: var(--color-brand-hover); }

/* Suggestion chips under the composer on the welcome screen. */
.assistant-suggest {
  max-width: var(--chat-max);
  margin: var(--space-3) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.assistant-chip {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.08s ease-in-out;
}
.assistant-chip:hover { background: var(--color-bg-muted, var(--color-bg)); color: var(--color-text); }
.assistant-foot {
  max-width: var(--chat-max);
  margin: var(--space-2) auto 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 900px) {
  .assistant-stream .chat-msg-user { max-width: 90%; }
  .assistant-welcome-title { font-size: var(--fs-xl); }
}

/* Tasks 2.0 — My Day homepage. */
.my-day-section { margin-top: var(--space-4); }
.my-day-section-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.my-day-briefing {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.my-day-briefing li { margin-bottom: 4px; }
.my-day-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.my-day-row {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: background 0.08s ease-in-out;
}
.my-day-row:hover {
  background: var(--color-bg-muted, var(--color-bg));
  text-decoration: none;
}
.my-day-row-priority {
  width: 4px;
  height: 100%;
  min-height: 28px;
  border-radius: 2px;
  background: var(--color-border);
}
.my-day-row-urgent .my-day-row-priority { background: var(--color-error, #EB5757); }
.my-day-row-high   .my-day-row-priority { background: var(--color-warning, #CB912F); }
.my-day-row-medium .my-day-row-priority { background: var(--color-text-muted); }
.my-day-row-low    .my-day-row-priority { background: var(--color-border-strong, var(--color-border)); }
.my-day-row-main { min-width: 0; }
.my-day-row-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-day-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
  flex-wrap: wrap;
}
.my-day-row-due { white-space: nowrap; }
.my-day-row-overdue .my-day-row-title { color: var(--color-error, #EB5757); }
.my-day-row-done {
  opacity: 0.6;
}
.my-day-row-done .my-day-row-title {
  text-decoration: line-through;
}
.my-day-row-check {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-success, #0F7B6C);
}
.my-day-upcoming-day { margin-bottom: var(--space-3); }
.my-day-upcoming-date {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-1);
  color: var(--color-text);
}

/* Tasks 2.0 — Linear-style label chips. */
.task-label {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  background: var(--color-bg-muted, #f5f5f4);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.task-label-gray   { background: #f4f4f5; color: #52525b; border-color: #e4e4e7; }
.task-label-red    { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.task-label-orange { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.task-label-yellow { background: #fefce8; color: #854d0e; border-color: #fde68a; }
.task-label-green  { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.task-label-teal   { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }
.task-label-blue   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.task-label-indigo { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.task-label-purple { background: #faf5ff; color: #7c3aed; border-color: #ddd6fe; }
.task-label-pink   { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
[data-theme="dark"] .task-label-gray   { background: #27272a; color: #d4d4d8; border-color: #3f3f46; }
[data-theme="dark"] .task-label-red    { background: #450a0a; color: #fecaca; border-color: #7f1d1d; }
[data-theme="dark"] .task-label-orange { background: #431407; color: #fed7aa; border-color: #7c2d12; }
[data-theme="dark"] .task-label-yellow { background: #422006; color: #fde68a; border-color: #713f12; }
[data-theme="dark"] .task-label-green  { background: #052e16; color: #bbf7d0; border-color: #14532d; }
[data-theme="dark"] .task-label-teal   { background: #042f2e; color: #99f6e4; border-color: #134e4a; }
[data-theme="dark"] .task-label-blue   { background: #172554; color: #bfdbfe; border-color: #1e3a8a; }
[data-theme="dark"] .task-label-indigo { background: #1e1b4b; color: #c7d2fe; border-color: #312e81; }
[data-theme="dark"] .task-label-purple { background: #2e1065; color: #ddd6fe; border-color: #4c1d95; }
[data-theme="dark"] .task-label-pink   { background: #500724; color: #fbcfe8; border-color: #831843; }

/* Tasks 2.0 — priority badge chips for the intake summary + board. */
.task-priority-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border: 1px solid var(--color-border);
}
.task-priority-urgent {
  background: #fef2f2; color: #b91c1c; border-color: #fecaca;
}
.task-priority-high {
  background: #fff7ed; color: #c2410c; border-color: #fed7aa;
}
.task-priority-medium {
  background: var(--color-bg-muted, #f5f5f4); color: var(--color-text-muted);
}
.task-priority-low {
  background: transparent; color: var(--color-text-muted);
}
[data-theme="dark"] .task-priority-urgent {
  background: #450a0a; color: #fecaca; border-color: #7f1d1d;
}
[data-theme="dark"] .task-priority-high {
  background: #431407; color: #fed7aa; border-color: #7c2d12;
}

/* Tasks 2.0 — label admin color picker. */
.label-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.label-color-swatch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
}
.label-color-swatch input { display: none; }
.label-color-swatch input:checked + .task-label {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Tasks 2.0 — drag-and-drop kanban board hooks. */
.kanban-card.kanban-card-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.kanban-column.kanban-column-dropzone {
  background: var(--color-bg-muted, #f5f5f4);
  outline: 2px dashed var(--color-text-muted);
  outline-offset: -2px;
}
.kanban-card { cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.kanban-card-link:hover { text-decoration: none; }
.kanban-card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.kanban-column-body {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kanban-column-empty { padding: var(--space-2); }

/* DoD confirmation dialog for drag-to-in-review. */
.dod-dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  max-width: 480px;
  width: 92%;
  background: var(--color-surface);
  color: var(--color-text);
}
.dod-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.dod-dialog-text {
  white-space: pre-wrap;
  background: var(--color-bg-muted, var(--color-bg));
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}

/* Client-side home dashboard ( / ) — comprehensive snapshot. */
.dash-grid {
  display: grid;
  gap: var(--space-3);
}
.dash-grid-2 { grid-template-columns: 1fr 1fr; }
.dash-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .dash-grid-2, .dash-grid-3 { grid-template-columns: 1fr; }
}

.dash-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-card-tall { min-height: 200px; }
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.dash-card-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.dash-card-value {
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.dash-card-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.dash-card-divider {
  border-top: 1px solid var(--color-border);
  margin: var(--space-2) 0;
}
.dash-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.dash-card-text {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.dash-card-mini-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.dash-card-mini-value {
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.dash-card-mini-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Inventory tile grid (4-6 columns of mini-cards). */
.dash-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.dash-inv-tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: var(--color-bg-muted, var(--color-bg));
}
.dash-inv-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 600px) {
  .dash-inv-summary { grid-template-columns: 1fr; }
}

/* Workload + PO tile grid — clickable mini cards. */
.dash-workload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.dash-workload-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: var(--color-bg-muted, var(--color-bg));
  color: inherit;
  text-decoration: none;
  transition: background 0.1s ease-in-out;
}
.dash-workload-tile:hover {
  background: var(--color-surface);
  text-decoration: none;
}

.dash-tile-accent { border-color: var(--color-text); }
.dash-tile-danger { border-color: var(--color-error, #EB5757); }
.dash-tile-warning { border-color: var(--color-warning, #CB912F); }

/* P&L card — 5 micro stats in a row, gross margin emphasised. */
.dash-pnl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.dash-pnl-margin .dash-card-mini-value {
  font-weight: var(--fw-bold, 600);
}

/* Account Health AHR display + summary line. */
.dash-ahr-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-2);
}
.dash-ahr-score {
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted, var(--color-bg));
  min-width: 84px;
}
.dash-ahr-value {
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.dash-ahr-sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.dash-ahr-meta { flex: 1 1 auto; }

.empty-state-inline {
  text-align: left;
  padding: var(--space-3) 0;
}

/* 7-day sparkline bars. */
.dash-sparkline {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: var(--space-2);
  height: 70px;
}
.dash-spark-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.dash-spark-fill {
  width: 60%;
  background: var(--color-text-muted);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: background 0.15s ease-in-out;
}
.dash-spark-bar:hover .dash-spark-fill { background: var(--color-text); }
.dash-spark-label {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Dashboard 2.1 additions — alerts strip, AI brief, delta badges,
   goal bar, sales-event countdown, returns sparkline. */
.dash-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning, #CB912F);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg, rgba(203, 145, 47, 0.08));
}
.dash-alerts-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.dash-alert {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.dash-alert:hover { background: var(--color-bg-muted, var(--color-bg)); text-decoration: none; }
.dash-alert-danger { color: var(--color-error, #EB5757); border-color: var(--color-error, #EB5757); }
.dash-alert-warning { color: var(--color-warning, #CB912F); border-color: var(--color-warning, #CB912F); }
.dash-alert-info { color: var(--color-text); }

.dash-ai-brief { border-color: var(--color-text); }
.dash-ai-bullets {
  list-style: none;
  margin: var(--space-2) 0 0 0;
  padding: 0;
}
.dash-ai-bullets li {
  position: relative;
  padding-left: 18px;
  padding-bottom: 6px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.dash-ai-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text-muted);
}
.dash-ai-bullets li:last-child { padding-bottom: 0; }

.dash-delta {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.dash-delta-up   { color: var(--color-success, #0F7B6C); }
.dash-delta-down { color: var(--color-error, #EB5757); }
.dash-delta-flat { color: var(--color-text-muted); }

.dash-goal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-goal-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
}
.dash-goal-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg-muted, var(--color-bg));
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.dash-goal-fill {
  height: 100%;
  transition: width 0.4s ease-out;
  background: var(--color-text-muted);
}
.dash-goal-on-pace { background: var(--color-success, #0F7B6C); }
.dash-goal-behind  { background: var(--color-warning, #CB912F); }
.dash-goal-set summary { padding: 4px 0; }
.dash-goal-input {
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  flex: 1 1 auto;
  max-width: 200px;
}

.dash-sales-event { border-color: var(--color-text); }
.dash-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.dash-event-name {
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
}
.dash-event-countdown {
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted, var(--color-bg));
  min-width: 72px;
}
.dash-event-days {
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  line-height: 1;
}

.dash-returns-spark {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: var(--space-2);
  height: 48px;
}
.text-success { color: var(--color-success, #0F7B6C); }
.text-warning { color: var(--color-warning, #CB912F); }

/* My Account / Profile pages. */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .profile-layout { grid-template-columns: 1fr; }
}
.profile-main  { min-width: 0; }
.profile-aside { min-width: 0; }
.profile-name {
  margin-top: var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.profile-memberships {
  list-style: none;
  margin: 0;
  padding: 0;
}
.profile-memberships li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-2);
}
.profile-memberships li:last-child { border-bottom: none; }

.prefs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.prefs-list li {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) 0;
}
.prefs-list li:last-child { border-bottom: none; }
.prefs-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-2);
  align-items: start;
  cursor: pointer;
  margin: 0;
}
.prefs-row input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
}

/* Avatar links — preserve underline-free hover, keep focus ring. */
.topbar-avatar-link,
.app-sidebar-user-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.topbar-avatar-link:hover,
.app-sidebar-user-link:hover { text-decoration: none; }
.app-sidebar-user-link {
  flex: 1 1 auto;
  min-width: 0;
}

/* Approvals + WorkUpdates intake — chat-first "new" page. */
.intake-attach-label { cursor: pointer; }
.intake-summary {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.intake-summary dt {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.intake-summary dd {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
  word-break: break-word;
}
.intake-summary dd:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* =============================================================================
   Marketing landing (ecomex.app / )

   The public-facing surface. Reuses every token from above — no new
   colors, no new radii, no new shadows. Slightly larger type for the
   marketing voice; mobile composed as a native-app home (sticky top +
   bottom bars, app-tile cards, horizontal carousels).
   ============================================================================= */

/* ---- Page chrome --------------------------------------------------------- */
.lp-page {
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}
.lp-container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
@media (max-width: 720px) {
  .lp-container { padding: 0 var(--space-4); }
}

/* Top nav — sticky, hairline-bordered, matches in-app topbar height */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
[data-theme="dark"] .lp-nav {
  background: rgba(25, 25, 25, 0.85);
}
.lp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--space-4);
}
@media (max-width: 720px) {
  .lp-nav-inner { height: 56px; }
}

/* Wordmark — eCOMeX. Two-tone (lowercase 'e' chars muted, "COM" / "X"
   in full strength) so the casing reads visually. A small black square
   to the left serves as a logo mark. */
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1;
  font-feature-settings: "ss01";   /* tighter geometry where DM Sans supports it */
}
.lp-brand:hover { text-decoration: none; }
.lp-brand-mark {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--color-text);
  border-radius: 4px;
  position: relative;
  flex: 0 0 auto;
}
.lp-brand-mark::after {
  /* Tiny 'X' notch — a thin diagonal in the corner of the mark so it
     reads as a brand symbol, not just a filled square. */
  content: "";
  position: absolute;
  inset: 6px;
  border-top: 2px solid var(--color-bg);
  border-right: 2px solid var(--color-bg);
  border-radius: 0 4px 0 0;
}
.lp-brand-word {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-feature-settings: "ss01", "cv11";
}
@media (max-width: 720px) {
  .lp-brand-word { font-size: 22px; }
  .lp-brand-mark { width: 22px; height: 22px; }
}
.lp-brand-mute {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Dark-mode: invert the mark's inner notch color. */
[data-theme="dark"] .lp-brand-mark::after {
  border-top-color: var(--color-bg);
  border-right-color: var(--color-bg);
}
.lp-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.lp-nav-links a {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.lp-nav-links a:hover { color: var(--color-text); text-decoration: none; }
.lp-nav-cta { margin-left: var(--space-2); }

.lp-nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
@media (max-width: 720px) {
  .lp-nav-links { display: none; }
  .lp-nav-burger { display: inline-flex; }
  .lp-nav-cta-desktop { display: none; }
}

/* .lp-mobile-drawer base style now defined in the marketing-landing block
   below (positioned fixed, slides in from right). The old desktop
   accordion-style fallback is removed — burger is never visible on
   desktop, so the drawer is mobile-only and managed via @media. */
.lp-mobile-drawer {
  display: none;
}

/* ---- Section rhythm ------------------------------------------------------ */
.lp-section {
  padding: 96px 0;
}
@media (max-width: 720px) {
  .lp-section { padding: 56px 0; }
}
.lp-section-dark {
  background: #0F0F0F;
  color: #EDEDEC;
}
.lp-section-dark h1,
.lp-section-dark h2,
.lp-section-dark h3 { color: #FFFFFF; }
.lp-section-muted { background: var(--color-bg-subtle); }

.lp-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.lp-h1 {
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
  margin: 0;
}
.lp-h2 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4) 0;
}
.lp-h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-3) 0;
}
.lp-lede {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 640px;
}
@media (max-width: 720px) {
  .lp-h1 { font-size: 36px; line-height: 1.1; }
  .lp-h2 { font-size: 26px; line-height: 1.2; }
  .lp-h3 { font-size: var(--fs-lg); }
  .lp-lede { font-size: var(--fs-md); }
}

/* ---- Hero — chat is the hero ------------------------------------------- */
.lp-hero {
  padding-top: 72px;
  padding-bottom: 56px;
}
@media (max-width: 720px) {
  .lp-hero { padding-top: 32px; padding-bottom: 24px; }
}
.lp-hero-copy {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-8) auto;
}
.lp-hero-copy .lp-h1 { margin-bottom: var(--space-4); }
.lp-hero-copy .lp-lede { margin: 0 auto; }
.lp-hero-actions {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-6) auto 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.lp-hero-trust {
  margin: var(--space-3) auto 0 auto;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---- Hero chat panel ----------------------------------------------------- */
.lp-chat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 360px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  transition: height 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp-chat.expanded { height: 580px; }
@media (max-width: 720px) {
  .lp-chat { height: 320px; }
  .lp-chat.expanded { height: 460px; }
}
.lp-chat.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: auto;
  border-radius: 0;
  border: 0;
}
.lp-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}
.lp-chat-head-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.lp-chat-head-title .lp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-success);
}
.lp-chat-close {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  padding: 4px;
  display: none;
}
.lp-chat.fullscreen .lp-chat-close { display: inline-flex; }

.lp-chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg);
}
.lp-chat-empty {
  margin: auto;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.lp-chat-empty strong {
  display: block;
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
}

.lp-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: var(--fs-md);
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.lp-msg-user {
  align-self: flex-end;
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-bottom-right-radius: 4px;
}
.lp-msg-ai {
  align-self: flex-start;
  background: var(--color-bg-muted);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}
.lp-msg-typing {
  align-self: flex-start;
  padding: 12px 16px;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.lp-msg-typing .lp-dots span {
  display: inline-block;
  width: 6px; height: 6px;
  margin: 0 1px;
  background: var(--color-text-subtle);
  border-radius: 50%;
  animation: lp-typing 1.2s infinite ease-in-out;
}
.lp-msg-typing .lp-dots span:nth-child(2) { animation-delay: 0.15s; }
.lp-msg-typing .lp-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lp-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1.0; }
}

/* Inline mini-CTA card after AI replies */
.lp-msg-cta {
  align-self: flex-start;
  width: 100%;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: var(--fs-sm);
}
.lp-msg-cta-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.lp-msg-cta-row strong { font-weight: var(--fw-medium); color: var(--color-text); }

.lp-chat-foot {
  border-top: 1px solid var(--color-border);
  padding: 10px 12px;
  background: var(--color-bg);
}
.lp-chat-composer {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}
.lp-chat-composer textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 40px;
  max-height: 120px;
  outline: none;
  transition: border-color 80ms ease;
}
.lp-chat-composer textarea:focus {
  border-color: var(--color-text-muted);
}
.lp-chat-composer textarea:disabled { opacity: 0.6; }
.lp-chat-send {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-text);
  border: 1px solid var(--color-accent);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
}
.lp-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

.lp-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 10px;
}
.lp-chat-chip {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: var(--fs-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background 80ms ease;
}
.lp-chat-chip:hover { background: var(--color-bg-muted); }
.lp-chat-suggestions.hidden { display: none; }

/* ---- Inline signup card (after AI reply, or from chip) ------------------ */
.lp-signup-card {
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: var(--space-2);
  align-self: stretch;
}
.lp-signup-card h4 {
  margin: 0 0 4px 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.lp-signup-card p {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.lp-signup-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 540px) {
  .lp-signup-fields { grid-template-columns: 1fr; }
}
.lp-signup-card input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font: inherit;
  font-size: var(--fs-md);
  background: var(--color-bg);
  color: var(--color-text);
}
.lp-signup-card input:focus { outline: none; border-color: var(--color-text-muted); }
.lp-signup-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: 10px;
  align-items: center;
}
.lp-signup-error {
  color: var(--color-error);
  font-size: var(--fs-sm);
  margin-top: 8px;
}

/* ---- Roles replaced cards ----------------------------------------------- */
.lp-roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 960px) { .lp-roles { grid-template-columns: 1fr; } }
.lp-role {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 100ms ease, transform 100ms ease;
}
.lp-role:hover { border-color: var(--color-text-muted); transform: translateY(-2px); }
.lp-role-icon {
  width: 40px; height: 40px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text);
}
.lp-role-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
}
.lp-role-salary {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.lp-role-list {
  margin: var(--space-2) 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-role-list li {
  font-size: var(--fs-sm);
  color: var(--color-text);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.lp-role-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-text-muted);
  margin-top: 8px;
}

/* ---- Capability tile grid ------------------------------------------------ */
.lp-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 960px) { .lp-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lp-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }
.lp-tile {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  transition: border-color 100ms ease;
}
.lp-tile:hover { border-color: var(--color-text-muted); }
.lp-tile-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text);
}
.lp-tile-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin: 4px 0 0 0;
}
.lp-tile-body {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ---- Math band ----------------------------------------------------------- */
.lp-math {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 720px) { .lp-math { grid-template-columns: 1fr; } }
.lp-math-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--color-bg);
}
.lp-math-card.bad {
  background: var(--color-bg-subtle);
}
.lp-math-card.good {
  border-color: var(--color-text);
}
.lp-math-cost {
  font-size: 40px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.lp-math-label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.lp-math-list {
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-sm);
}
.lp-math-list li {
  display: flex; gap: 8px; align-items: flex-start;
  color: var(--color-text);
}
.lp-math-list li .lp-math-mark {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
}

/* ---- "Ask anything" example conversation -------------------------------- */
.lp-qa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 960px) { .lp-qa { grid-template-columns: 1fr; } }
.lp-qa-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: var(--color-bg);
}
.lp-qa-q {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0 0 10px 0;
}
.lp-qa-a {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ---- Reports cycle ------------------------------------------------------- */
.lp-reports {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 720px) { .lp-reports { grid-template-columns: 1fr; } }
.lp-report-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--color-bg);
}
.lp-report-kind {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

/* ---- Advertising deep-dive ---------------------------------------------- */
.lp-ad-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-4);
  align-items: center;
}
@media (max-width: 960px) {
  .lp-ad-flow {
    grid-template-columns: 1fr;
  }
  .lp-ad-flow .lp-arrow { transform: rotate(90deg); justify-self: center; }
}
.lp-ad-step {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: var(--color-bg);
}
.lp-ad-step-count {
  font-size: 28px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.lp-arrow {
  color: var(--color-text-muted);
}

/* ---- Methodology --------------------------------------------------------- */
.lp-meth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
@media (max-width: 960px) { .lp-meth { grid-template-columns: 1fr; gap: var(--space-5); } }
.lp-meth-block h3 { margin-bottom: 8px; }
.lp-meth-block p {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ---- Trust band ---------------------------------------------------------- */
.lp-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 720px) {
  .lp-trust { grid-template-columns: 1fr; gap: 10px; }
}
.lp-trust-chip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: var(--fs-sm);
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--color-text);
}
.lp-trust-chip .icon { color: var(--color-text-muted); flex: 0 0 auto; }

/* ---- Pricing ------------------------------------------------------------- */
.lp-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 820px) { .lp-pricing { grid-template-columns: 1fr; } }
.lp-plan {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  background: var(--color-bg);
  display: flex; flex-direction: column;
}
.lp-plan-popular {
  border-color: var(--color-text);
  position: relative;
}
.lp-plan-popular::before {
  content: "Most popular";
  position: absolute;
  top: -12px; left: 24px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: var(--fw-medium);
}
.lp-plan-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.lp-plan-tagline {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Dual pricing options inside one plan card */
.lp-plan-options {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
.lp-plan-option {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--color-bg);
  text-align: center;
}
.lp-plan-popular .lp-plan-option {
  background: var(--color-bg-subtle);
}
.lp-plan-option-amount {
  font-size: 30px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: 1;
}
.lp-plan-option-amount .per {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  margin-left: 2px;
}
.lp-plan-option-note {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.lp-plan-option-or {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media (max-width: 540px) {
  .lp-plan-options {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .lp-plan-option-or { padding: 4px 0; }
}
.lp-plan-list {
  margin: var(--space-5) 0 0 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  gap: 10px;
  font-size: var(--fs-sm);
}
.lp-plan-list li {
  display: flex; gap: 10px; align-items: flex-start;
}
.lp-plan-list li .icon {
  color: var(--color-success);
  flex: 0 0 auto;
}
.lp-plan-cta { margin-top: var(--space-5); }

/* ---- FAQ ----------------------------------------------------------------- */
.lp-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}
.lp-faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  background: var(--color-bg);
}
.lp-faq summary {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+";
  font-size: 22px;
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
  line-height: 1;
}
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq-body {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* ---- Final close --------------------------------------------------------- */
.lp-close {
  text-align: center;
  padding: 120px 0;
}
@media (max-width: 720px) { .lp-close { padding: 72px 0; } }
.lp-close h2 {
  font-size: 60px;
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-5) 0;
}
@media (max-width: 720px) { .lp-close h2 { font-size: 36px; } }
.lp-close p {
  font-size: var(--fs-lg);
  color: #C9C9C8;
  margin: 0 auto var(--space-6) auto;
  max-width: 520px;
}
.lp-close .btn-lg {
  background: #FFFFFF;
  color: #0F0F0F;
  border-color: #FFFFFF;
  padding: 14px 28px;
  height: auto;
  font-size: var(--fs-lg);
}
.lp-close .btn-lg:hover { background: #EDEDEC; border-color: #EDEDEC; }

/* ---- Footer -------------------------------------------------------------- */
.lp-footer {
  border-top: 1px solid var(--color-border);
  padding: 40px 0 64px 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.lp-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.lp-footer-links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.lp-footer-links a { color: var(--color-text-muted); }
.lp-footer-links a:hover { color: var(--color-text); text-decoration: none; }

/* ---- Mobile sticky CTA bar ---------------------------------------------- */
.lp-sticky-cta {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  padding: 10px 14px;
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-md);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  z-index: 80;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.lp-sticky-cta-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.lp-sticky-cta-text small {
  display: block;
  font-weight: var(--fw-normal);
  opacity: 0.7;
  font-size: var(--fs-xs);
}
.lp-sticky-cta .btn {
  background: #FFFFFF;
  color: #0F0F0F;
  border-color: #FFFFFF;
}
@media (max-width: 720px) {
  .lp-sticky-cta.active { display: flex; }
  body.lp-has-sticky { padding-bottom: 80px; }
}

/* Section CTA helper — contextual button row */
.lp-section-cta {
  margin-top: var(--space-8);
  text-align: center;
}
@media (max-width: 720px) { .lp-section-cta { margin-top: var(--space-6); } }

/* ---- Landing utility classes (replace inline style= attributes) -------- */
.lp-section-lede   { margin-bottom: var(--space-8); }
.lp-section-mt     { margin-top: var(--space-8); }
.lp-section-mt-sm  { margin-top: var(--space-6); }
.lp-text-center    { text-align: center; }
.lp-card-muted     {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.lp-card-muted-mt  {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.lp-pricing-fine {
  text-align: center;
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
}
.lp-footer-brand {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: 8px;
}
.lp-footer-fineprint {
  margin-top: 24px;
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}

/* Inline mini-CTA muted hint (rendered by landing_chat.js after AI replies) */
.lp-msg-cta-hint {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
/* Signup card starts hidden — toggled visible by JS when the user clicks "Start free trial". */
.lp-signup-card { display: none; }
.lp-signup-card.lp-open { display: block; }
/* Inline-link variant used inside the signup card footer */
.lp-signup-link {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.lp-signup-error { display: none; }
.lp-signup-error.lp-open { display: block; }

/* =============================================================================
   Mobile-first NATIVE-APP polish
   ============================================================================
   Below 720px the landing page reads as an app screen, not a responsive
   web page. Bigger radii (12-16px), full-width touch targets, slide-in
   drawer, bottom-anchored composer, safe-area padding, snappy press
   states. Everything composes from existing tokens — no new colors.
   ============================================================================= */

/* Page-level safety net — clip any accidental overflow on narrow viewports
   so a single rogue element can't cause horizontal page scroll. */
.lp-page { overflow-x: hidden; }

@media (max-width: 720px) {

  /* --- Native chrome -------------------------------------------------- */
  .lp-nav {
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--color-border);
    /* Honor iOS top safe area so the brand isn't under the camera notch. */
    padding-top: env(safe-area-inset-top);
  }
  .lp-nav-inner {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  /* Container padding on mobile — 20px on each side gives content a
     proper breathing strip from both edges. Bumped from 16px after
     user feedback that text/cards still felt cramped against the
     viewport. iOS-style apps typically use 16-20px gutters. */
  .lp-container { padding: 0 20px; }

  /* Mobile drawer — base sliding-panel styles. The drawer + backdrop
     are direct children of .lp-page (NOT inside .lp-nav) so they
     escape any backdrop-filter / transform containing-block traps
     and reliably position relative to the viewport. The legacy
     CSS-only `body:has(.lp-mobile-drawer.open)::before` backdrop
     was removed — the .lp-drawer-backdrop element handles it now. */
  .lp-mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 86%;
    max-width: 380px;
    z-index: 80;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    transform: translateX(105%);
    transition: transform 280ms cubic-bezier(0.2, 0.85, 0.25, 1);
    padding: calc(env(safe-area-inset-top) + 20px) 22px env(safe-area-inset-bottom);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lp-mobile-drawer.open {
    transform: translateX(0);
  }

  /* --- Hero — chat-dominant, app-screen layout ----------------------- */
  .lp-hero {
    padding: 12px 0 16px 0;
    /* No min-height — let content size naturally. The chat is generously
       tall on its own (60svh), which already makes this feel like an app
       home screen. */
  }
  .lp-hero-copy {
    text-align: left;
    margin-bottom: 14px;
  }
  .lp-hero-copy .lp-eyebrow {
    font-size: 11px;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
  }
  .lp-h1 {
    font-size: 26px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
  }
  /* Hide the hero lede on mobile — the chat panel IS the lede.
     Keeping a long paragraph above a 60svh chat just steals room from
     the actually-useful interactive element. */
  .lp-hero-copy .lp-lede { display: none; }
  /* But ledes in OTHER sections stay (they're not in .lp-hero-copy). */
  .lp-lede {
    font-size: 15px;
    line-height: 1.5;
  }
  .lp-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 14px;
    gap: 10px;
  }
  .lp-hero-actions .btn {
    width: 100%;
    padding: 14px 18px;
    height: auto;
    font-size: 16px;
    border-radius: 12px;
  }
  .lp-hero-actions .btn-secondary {
    /* On mobile the secondary reads as a "skip" — keep visible but light. */
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
  }
  .lp-hero-trust {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
  }

  /* --- Chat panel = app's main surface ------------------------------
     On mobile the chat dominates: ~60% of the viewport height. That's
     the focal point of the page, not a side panel. The container has
     reduced padding (12px) so the chat feels closer to edge-to-edge,
     like a real mobile app screen. */
  .lp-chat {
    border-radius: 16px;
    height: 60svh;
    min-height: 460px;
    max-height: 600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    width: 100%;
    max-width: none;
  }
  .lp-chat.expanded {
    height: 70svh;
    min-height: 520px;
    max-height: 700px;
  }

  .lp-chat-head {
    padding: 14px 18px;
    border-bottom-color: var(--color-border);
  }
  .lp-chat-head-title { font-size: 14px; }

  .lp-chat-empty {
    padding: 24px 20px;
    font-size: 15px;
  }
  .lp-chat-empty strong { font-size: 17px; }

  .lp-chat-stream {
    padding: 16px;
    gap: 10px;
  }
  .lp-msg {
    font-size: 15px;
    padding: 11px 14px;
    border-radius: 18px;          /* iMessage-style */
    max-width: 86%;
  }
  .lp-msg-user {
    border-bottom-right-radius: 6px;
  }
  .lp-msg-ai {
    border-bottom-left-radius: 6px;
  }

  .lp-chat-foot {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 12px;
  }
  .lp-chat-composer textarea {
    font-size: 16px;              /* iOS won't zoom on focus at 16+ */
    padding: 12px 14px;
    border-radius: 12px;
    min-height: 44px;
  }
  .lp-chat-send {
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 15px;
  }

  /* Chips: scroll horizontally like an iOS pill row */
  .lp-chat-suggestions {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 10px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lp-chat-suggestions::-webkit-scrollbar { display: none; }
  .lp-chat-chip {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 14px;
  }

  /* Chat in fullscreen mode (after first submit) honors safe areas */
  .lp-chat.fullscreen {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lp-chat.fullscreen .lp-chat-head {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  .lp-chat.fullscreen .lp-chat-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  /* --- Section cards = app cards ----------------------------------- */
  .lp-section { padding: 40px 0; }
  .lp-section-muted {
    background: transparent;
  }
  .lp-section-muted .lp-container > * {
    /* Inside muted sections on mobile, wrap content in card aesthetic. */
  }
  /* Wrap most major elements in card-like containers on mobile.
     Every card gets `min-width: 0` so a long word or wide child can't
     stretch the card past the viewport. */
  .lp-roles .lp-role,
  .lp-math-card,
  .lp-qa-card,
  .lp-report-card,
  .lp-ad-step,
  .lp-tile,
  .lp-plan,
  .lp-trust-chip {
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .lp-plan { padding: 20px; }

  /* Tap feedback — subtle scale-down on press for cards + buttons. */
  .lp-role:active,
  .lp-tile:active,
  .lp-math-card:active,
  .lp-qa-card:active,
  .lp-report-card:active,
  .lp-plan:active,
  .btn:active {
    transform: scale(0.985);
    transition: transform 80ms ease;
  }

  /* Capability tiles — strict 2-col with 1fr so they never force a
     wider-than-viewport row (minmax(180px, 1fr) on 2 cols + gap + page
     padding exceeded 360px-wide phones). */
  .lp-tiles {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .lp-tile { padding: 14px; min-height: 100px; min-width: 0; }
  .lp-tile-title { font-size: 14px; }
  .lp-tile-body { font-size: 12px; line-height: 1.4; }

  /* Section CTAs become full-width pills */
  .lp-section-cta .btn {
    width: 100%;
    padding: 14px 18px;
    height: auto;
    font-size: 16px;
    border-radius: 12px;
  }

  /* FAQ summaries: bigger tap targets */
  .lp-faq details { padding: 18px 20px; border-radius: 14px; }
  .lp-faq summary { padding: 4px 0; font-size: 16px; }
  .lp-faq-body { font-size: 15px; }

  /* --- Plan cards ---------------------------------------------------- */
  .lp-plan-cta .btn {
    width: 100%;
    padding: 14px 18px;
    height: auto;
    font-size: 16px;
    border-radius: 12px;
  }
  .lp-plan-options { gap: 8px; }
  .lp-plan-option { padding: 12px; border-radius: 12px; }
  .lp-plan-option-amount { font-size: 26px; }

  /* --- Sticky bottom CTA bar — bigger, more visible -------------- */
  .lp-sticky-cta {
    left: 12px; right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  }
  .lp-sticky-cta .btn {
    padding: 10px 16px;
    height: auto;
    font-size: 14px;
    border-radius: 10px;
  }
  .lp-sticky-cta-text { font-size: 14px; }
  .lp-sticky-cta-text small { font-size: 11px; }

  body.lp-has-sticky { padding-bottom: 96px; }

  /* --- Close section — native CTA card ----------------------------- */
  .lp-close { padding: 56px 16px; }
  .lp-close h2 { font-size: 32px; }
  .lp-close p  { font-size: 15px; }
  .lp-close .btn-lg {
    width: 100%;
    padding: 16px 20px;
    font-size: 17px;
    border-radius: 14px;
  }

  /* --- Math cards: stack with bigger cost numbers --------------- */
  .lp-math-cost {
    font-size: 36px;
  }

  /* --- Smooth scrolling between sections (subtle native feel) --- */
  html { scroll-behavior: smooth; }

  /* --- Hide desktop-only details on mobile to declutter ---------- */
  .lp-footer-row { gap: 16px; }
  .lp-footer-links {
    gap: 20px;
    width: 100%;
  }
}

/* iOS PWA standalone mode: remove the browser-padding subtleties */
@media all and (display-mode: standalone) and (max-width: 720px) {
  .lp-nav { padding-top: env(safe-area-inset-top); }
}

/* ---- Admin form utilities (super-admin landing-* pages) -------------- */
.adm-w-200 { max-width: 200px; }
.adm-w-240 { max-width: 240px; }
.adm-w-360 { max-width: 360px; }
.adm-pre-wrap { white-space: pre-wrap; }
.adm-ml-auto { margin-left: auto; }
.adm-inline-form { display: inline; }
.adm-label-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.adm-stack-col-2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* =============================================================================
   Marketing visual palette + redesign
   ----------------------------------------------------------------------------
   The in-app rule is Notion-style monochrome. The marketing site is a
   different surface — Notion's own marketing site uses warm cream
   backgrounds and orange/amber accents. The tokens below are scoped to
   marketing classes (lp-*, mkt-*); they don't bleed into the in-app UI.
   ============================================================================= */
:root {
  --mkt-cream:        #FAF7F2;
  --mkt-cream-2:      #F2EDE3;
  --mkt-amber:        #C9893F;
  --mkt-amber-hover:  #B5772E;
  --mkt-amber-bg:     #FDF4E5;
  --mkt-amber-border: #EDD5A6;
  --mkt-mint:         #1B8A5A;
  --mkt-mint-bg:      #E7F5E0;
  --mkt-rose:         #B73E3E;
  --mkt-rose-bg:      #FCE6E0;
  --mkt-slate:        #2C2A26;
  --mkt-ink:          #1A1814;
}
[data-theme="dark"] {
  --mkt-cream:        #1F1D1A;
  --mkt-cream-2:      #25221E;
  --mkt-amber-bg:     #2D2418;
  --mkt-amber-border: #4D3E22;
  --mkt-mint-bg:      #1B2A1D;
  --mkt-rose-bg:      #2C1A1A;
}

/* ---- Mobile drawer fix — proper close UX --------------------------------
   Add a backdrop element that catches taps outside the drawer, a real
   close button at the top, and the body-scroll-lock behavior so the
   page doesn't scroll behind the drawer. */
.lp-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  display: none;   /* off on desktop entirely */
}
@media (max-width: 720px) {
  .lp-drawer-backdrop { display: block; }
}
.lp-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.lp-drawer-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}
.lp-drawer-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.lp-drawer-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
}
.lp-drawer-link {
  /* override the global a styling inside the drawer */
}
.lp-drawer-cta {
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}
body.lp-drawer-open {
  overflow: hidden;
  /* Prevent layout shift when scroll bar disappears (desktop). */
}

/* ---- Hero: chat + product preview pane (desktop two-pane) -------------- */
.lp-hero-stage {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: stretch;
  margin-top: 12px;
}
@media (max-width: 960px) {
  .lp-hero-stage { grid-template-columns: 1fr; gap: 20px; }
}

.lp-preview {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-bg);
  overflow: hidden;
  height: 360px;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.18),
              0 1px 0 rgba(0, 0, 0, 0.04);
}
.lp-preview-frame-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.lp-preview-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border-strong);
}
.lp-preview-dot:nth-child(2) { background: var(--mkt-amber); }
.lp-preview-dot:nth-child(3) { background: var(--mkt-mint); }
.lp-preview-url {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.lp-preview-stage {
  position: relative;
  height: calc(360px - 38px);
}
.lp-preview-screen {
  position: absolute;
  inset: 0;
  padding: 20px 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms ease, transform 480ms ease;
  background: var(--color-bg);
}
.lp-preview-screen.is-active {
  opacity: 1;
  transform: translateY(0);
}
.lp-preview-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mkt-amber);
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}
.lp-preview-title {
  font-weight: var(--fw-semibold);
  font-size: 17px;
  margin: 0 0 14px 0;
  color: var(--color-text);
}
.lp-preview-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.lp-preview-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: background 200ms ease, width 200ms ease;
}
.lp-preview-dots span.is-active {
  background: var(--mkt-amber);
  width: 18px;
  border-radius: 4px;
}

/* Mock dashboard row (used in Preview screen + showcase bands) */
.lp-mock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.lp-mock-row:last-child { border-bottom: 0; }
.lp-mock-row-sku {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  flex: 0 0 auto;
  font-size: 12px;
}
.lp-mock-row-name {
  flex: 1;
  color: var(--color-text);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lp-mock-row-num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  flex: 0 0 auto;
}
.lp-mock-row-num.pos { color: var(--mkt-mint); }
.lp-mock-row-num.neg { color: var(--mkt-rose); }
.lp-mock-bullet {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.lp-mock-bullet-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 8px;
  background: var(--mkt-amber);
}
.lp-mock-bullet-dot.mint { background: var(--mkt-mint); }
.lp-mock-bullet-dot.rose { background: var(--mkt-rose); }

/* Sparkline SVG used in dashboards */
.lp-mock-spark {
  width: 100%;
  height: 80px;
  display: block;
}

/* AHR gauge (Account Health) */
.lp-mock-gauge {
  position: relative;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(90deg,
              var(--mkt-rose-bg) 0%,
              var(--mkt-rose-bg) 10%,
              var(--mkt-amber-bg) 10%,
              var(--mkt-amber-bg) 20%,
              var(--mkt-mint-bg) 20%,
              var(--mkt-mint-bg) 100%);
  border: 1px solid var(--color-border);
}
.lp-mock-gauge-marker {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 3px;
  background: var(--color-text);
  border-radius: 2px;
  left: 78%;   /* AHR = 780 / 1000 — example */
}
.lp-mock-gauge-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.lp-mock-row-spaced { margin-top: 14px; }

/* ---- Methodology — numbered accordion cards
   Desktop: summary row + body stacked vertically inside the card.
   Mobile: summary row only by default; body collapses behind a tap.
   Both layouts share HTML — CSS swaps display modes per breakpoint. */
.lp-meth-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lp-meth-block-summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: default;
  color: inherit;
}
.lp-meth-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  color: var(--mkt-amber);
  line-height: 1;
}
.lp-meth-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--mkt-amber-bg);
  color: var(--mkt-amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lp-meth-block-summary .lp-h3 {
  flex: 1;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  min-width: 0;
}
.lp-meth-block-toggle {
  flex: 0 0 auto;
  display: none;             /* desktop: no toggle, body is always open */
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 22px;
  font-weight: var(--fw-normal);
  line-height: 1;
  transition: transform 240ms ease;
}
.lp-meth-block-body {
  padding: 0 22px 22px 22px;
}
.lp-meth-block-body-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-meth-block-body p {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* Visual hint at the bottom of each block — pills, arrows, silos, or a
   small SVG sparkline. Concrete imagery that ties the abstract concept
   to the product. */
.lp-meth-visual {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px dashed var(--color-border);
}
.lp-meth-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text);
  white-space: nowrap;
}
.lp-meth-pill.lp-meth-pill-amber {
  background: var(--mkt-amber-bg);
  border-color: var(--mkt-amber-border);
  color: var(--mkt-amber);
  font-family: var(--font-mono);
  font-size: 12px;
}
.lp-meth-pill.lp-meth-pill-mint {
  background: var(--mkt-mint-bg);
  border-color: rgba(27, 138, 90, 0.3);
  color: var(--mkt-mint);
  font-weight: var(--fw-medium);
}
.lp-meth-arrow {
  color: var(--color-text-subtle);
  font-size: 16px;
  font-weight: var(--fw-semibold);
}
.lp-meth-isolation {
  flex-wrap: nowrap;
  justify-content: space-between;
}
.lp-meth-silo {
  flex: 1 1 auto;
  text-align: center;
  padding: 8px 6px;
  border-radius: 8px;
  background: var(--mkt-cream);
  border: 1px solid var(--mkt-cream-2);
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}
.lp-meth-silo + .lp-meth-silo {
  position: relative;
  margin-left: 4px;
}
.lp-meth-silo + .lp-meth-silo::before {
  content: "│";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-border-strong);
  font-size: 16px;
}
.lp-meth-spark {
  margin-top: auto;
  width: 100%;
  height: 56px;
  color: var(--color-text-muted);
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}

/* ---- Trust card grid — bigger icons, real body text --------------- */
.lp-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 960px) {
  .lp-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 540px) {
  .lp-trust-grid { grid-template-columns: 1fr; }
}
.lp-trust-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-trust-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lp-trust-card-icon.icon-bubble-blue   { background: rgba(74, 123, 211, 0.14); color: #4A7BD3; }
.lp-trust-card-icon.icon-bubble-amber  { background: var(--mkt-amber-bg); color: var(--mkt-amber); }
.lp-trust-card-icon.icon-bubble-mint   { background: var(--mkt-mint-bg); color: var(--mkt-mint); }
.lp-trust-card-icon.icon-bubble-purple { background: rgba(138, 86, 196, 0.14); color: #8A56C4; }
.lp-trust-card-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 4px 0 0 0;
  color: var(--color-text);
}
.lp-trust-card-body {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Mobile overhaul: methodology + trust + FAQ ---------------------
   On mobile, sections that originally read as 4 stacked text cards
   are reshaped into compact, app-feeling lists:
     - Methodology becomes a stack of tap-to-expand <details> rows
       with the number + icon + title visible always; body + visual
       hint reveal on tap.
     - Trust collapses to a 2×2 compact icon grid even on narrow
       phones (was a single column at < 540px).
     - FAQ tightens up: 12/14 padding, 14px text, 10px radius. Reads
       like a native iOS settings page, not a marketing accordion.

   Desktop styles above are unchanged. */
@media (max-width: 720px) {

  /* --- Methodology accordion ----
     On mobile, body collapses behind the summary row. Tap the
     summary to expand. Toggle icon rotates 45° on open. */
  .lp-meth {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lp-meth-block { border-radius: 14px; }
  .lp-meth-block-summary {
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    gap: 12px;
  }
  .lp-meth-block-summary:active { background: var(--color-bg-subtle); }
  .lp-meth-num { font-size: 18px; }
  .lp-meth-icon { width: 30px; height: 30px; border-radius: 8px; }
  .lp-meth-block-summary .lp-h3 {
    font-size: var(--fs-md);
    line-height: 1.3;
  }
  .lp-meth-block-toggle { display: inline-flex; }
  .lp-meth-block-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    transition: max-height 320ms ease, padding 320ms ease;
  }
  .lp-meth-block.is-open .lp-meth-block-body {
    max-height: 800px;
    padding: 0 16px 16px 16px;
  }
  .lp-meth-block.is-open .lp-meth-block-toggle {
    transform: rotate(45deg);
  }
  .lp-meth-block.is-open {
    background: var(--mkt-amber-bg);
    border-color: var(--mkt-amber-border);
  }
  .lp-meth-block-body p {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-text);
  }
  .lp-meth-block-body .lp-meth-visual {
    border-top: 0;
    padding-top: 0;
  }

  /* --- Trust — compact 2x2 icon grid ----------------------------- */
  .lp-trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .lp-trust-card {
    padding: 16px 14px;
    border-radius: 14px;
    gap: 8px;
  }
  .lp-trust-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .lp-trust-card-icon .icon { width: 18px; height: 18px; }
  .lp-trust-card-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.25;
  }
  .lp-trust-card-body {
    font-size: 12px;
    line-height: 1.45;
  }

  /* --- FAQ — tight modern accordion -------------------------------- */
  .lp-faq { gap: 0; max-width: 100%; }
  .lp-faq details {
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 14px 4px;
    background: transparent;
  }
  .lp-faq details:first-child { border-top: 1px solid var(--color-border); }
  .lp-faq summary { font-size: var(--fs-md); padding: 2px 0; }
  .lp-faq summary::after {
    font-size: 18px;
    line-height: 1;
  }
  .lp-faq-body {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 8px;
  }
}

/* Campaign bid arrow row (Ad audit mock) */
.lp-mock-bid-up   { color: var(--mkt-mint); }
.lp-mock-bid-down { color: var(--mkt-rose); }

/* ---- Stat marquee ------------------------------------------------------
   Anchor between hero and capabilities: "60-day trial · No card · 19
   marketplaces · 14 currencies · Multi-brand · Multi-tenant isolated".
   Marquee animates on desktop; static on mobile (less motion). */
.lp-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 36px;
  justify-content: center;
  align-items: center;
  padding: 18px 24px;
  background: var(--mkt-cream);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--mkt-slate);
}
.lp-stat-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-medium);
}
.lp-stat-strip .lp-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mkt-amber);
}

/* ---- Marketplace flag/region strip ------------------------------------
   Each chip is a flag emoji + a 2-3 letter country code. On desktop the
   chips wrap into 1-2 rows centered. On mobile they're a horizontal
   carousel that auto-scrolls slowly (with a duplicate set for seamless
   loop) — feels like a native app's "supported regions" rail. */
.lp-mkt-strip {
  padding: 18px 0 0 0;
  display: flex;
  justify-content: center;
}
.lp-mkt-strip-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.lp-mkt-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  white-space: nowrap;
}
/* Each chip carries a tiny CSS-gradient flag — universal rendering
   (no platform emoji-font dependency) plus the actual country code.
   The flags are simplified to dominant stripe colors per country;
   visitors immediately read them as a flag (recognizable colors +
   stripe orientation) without us needing 19 inline SVGs.
   Complex flags (US / UK / JP / IN / BR) approximated to the most
   recognizable color/shape combination. */
.lp-mkt-flag-icon {
  width: 22px;
  height: 14px;
  border-radius: 2px;
  flex: 0 0 auto;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* North America */
.flag-us { background: linear-gradient(to bottom,
            #B22234 0 23%, #FFFFFF 23% 46%,
            #3C3B6E 46% 100%); }
.flag-ca { background: linear-gradient(to right,
            #D52B1E 0 30%, #FFFFFF 30% 70%, #D52B1E 70% 100%); }
.flag-mx { background: linear-gradient(to right,
            #006847 0 33.3%, #FFFFFF 33.3% 66.7%, #CE1126 66.7% 100%); }
/* Europe */
.flag-uk { background:
            linear-gradient(to bottom, transparent 40%, #C8102E 40% 60%, transparent 60%),
            linear-gradient(to right, transparent 40%, #C8102E 40% 60%, transparent 60%),
            #012169; }
.flag-de { background: linear-gradient(to bottom,
            #000000 0 33.3%, #DD0000 33.3% 66.7%, #FFCE00 66.7% 100%); }
.flag-fr { background: linear-gradient(to right,
            #002654 0 33.3%, #FFFFFF 33.3% 66.7%, #ED2939 66.7% 100%); }
.flag-it { background: linear-gradient(to right,
            #008C45 0 33.3%, #F4F5F0 33.3% 66.7%, #CD212A 66.7% 100%); }
.flag-es { background: linear-gradient(to bottom,
            #AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75% 100%); }
.flag-nl { background: linear-gradient(to bottom,
            #AE1C28 0 33.3%, #FFFFFF 33.3% 66.7%, #21468B 66.7% 100%); }
.flag-pl { background: linear-gradient(to bottom,
            #FFFFFF 0 50%, #DC143C 50% 100%); }
.flag-tr { background:
            radial-gradient(circle at 28% 50%, #FFFFFF 0 22%, transparent 22%),
            #E30A17; }
/* Middle East / Africa */
.flag-uae { background:
            linear-gradient(to bottom,
              #00732F 0 33.3%, #FFFFFF 33.3% 66.7%, #000000 66.7% 100%),
            linear-gradient(to right, #FF0000 0 24%, transparent 24%);
            background-blend-mode: normal;
            background-size: 100% 100%, 100% 100%; }
.flag-sa { background: linear-gradient(to bottom,
            #006C35 0 100%); }
.flag-eg { background: linear-gradient(to bottom,
            #CE1126 0 33.3%, #FFFFFF 33.3% 66.7%, #000000 66.7% 100%); }
/* Asia-Pacific */
.flag-in { background: linear-gradient(to bottom,
            #FF9933 0 33.3%, #FFFFFF 33.3% 66.7%, #138808 66.7% 100%); }
.flag-jp { background:
            radial-gradient(circle at center, #BC002D 0 32%, #FFFFFF 32% 100%); }
.flag-au { background:
            radial-gradient(circle at 22% 26%, #FFFFFF 0 12%, transparent 12%),
            #012169; }
.flag-sg { background: linear-gradient(to bottom,
            #ED2939 0 50%, #FFFFFF 50% 100%); }
/* South America */
.flag-br { background:
            radial-gradient(circle at center, #002776 0 14%, transparent 14%),
            radial-gradient(ellipse 40% 60% at center, #FEDD00 0 60%, transparent 60%),
            #009B3A; }

.lp-mkt-flag-code {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.lp-mkt-strip-caption {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Mobile: turn the flag strip into a horizontal carousel that
   continuously auto-scrolls. The wrap-flex becomes a single-row no-wrap
   flex with overflow:hidden, and the chips animate via translateX(-50%).
   JS (landing_chat.js) clones the track contents at runtime so the
   translateX(-50%) lands exactly at the start of the duplicated set
   for a seamless loop. */
@media (max-width: 720px) {
  .lp-mkt-section { padding: 28px 0; overflow: hidden; }
  .lp-mkt-strip {
    padding: 14px 0 0 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg,
                  transparent 0,
                  black 36px,
                  black calc(100% - 36px),
                  transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
                  transparent 0,
                  black 36px,
                  black calc(100% - 36px),
                  transparent 100%);
  }
  .lp-mkt-strip-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: lp-mkt-marquee 35s linear infinite;
  }
  .lp-mkt-flag {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    flex: 0 0 auto;
    gap: 7px;
  }
  .lp-mkt-flag-icon {
    width: 18px;
    height: 12px;
  }
}
@keyframes lp-mkt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-mkt-strip-track { animation: none; }
}

/* ---- Bento grid for capabilities --------------------------------------
   Mixed-size cards on a 4-col grid (desktop) collapsing to 2-col (mobile).
   Replaces the old 4×3 uniform tile grid with real visual variety. */
.lp-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(160px, auto);
  gap: 14px;
  /* Backfill empty cells with later tiles that fit. Without this, a
     span-2 tile that doesn't fit at the current cursor position leaves
     an empty cell behind it (which is what made an awkward gap appear
     after "Seller Support" on mobile, since the next tile —
     Advertising span-2 — couldn't fit beside it). With dense, later
     small tiles fill the gap. */
  grid-auto-flow: dense;
}
@media (max-width: 960px) {
  .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.lp-bento-tile {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  transition: border-color 120ms ease, transform 120ms ease;
}
.lp-bento-tile:hover { border-color: var(--color-text-muted); }
.lp-bento-tile.tile-amber { background: var(--mkt-amber-bg); border-color: var(--mkt-amber-border); }
.lp-bento-tile.tile-cream { background: var(--mkt-cream); border-color: var(--mkt-cream-2); }
.lp-bento-tile.tile-dark  { background: var(--mkt-ink);  border-color: #2A2826; color: #EDEDEC; }
.lp-bento-tile.tile-dark .lp-bento-tile-title,
.lp-bento-tile.tile-dark .lp-bento-tile-num { color: #FFFFFF; }
.lp-bento-tile.tile-dark .lp-bento-tile-body { color: #C9C9C8; }

/* span helpers */
.tile-span-2 { grid-column: span 2; }
.tile-row-2  { grid-row: span 2; }
@media (max-width: 960px) {
  .tile-span-2 { grid-column: span 2; }   /* full width on 2-col mobile */
  .tile-row-2  { grid-row: auto; }
}
/* Mobile-only span-2 — added to the LAST small tile so the 2-col
   mobile grid packs evenly. Without this, with 7 small tiles and
   3 span-2 tiles, the grid has an odd cell count and leaves one
   empty cell somewhere. */
@media (max-width: 720px) {
  .tile-mobile-span-2 { grid-column: span 2; }
}

.lp-bento-tile-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--color-bg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text);
}
.lp-bento-tile.tile-amber .lp-bento-tile-icon { background: rgba(201, 137, 63, 0.18); color: var(--mkt-amber); }
.lp-bento-tile.tile-cream .lp-bento-tile-icon { background: var(--mkt-cream-2); }
.lp-bento-tile.tile-dark  .lp-bento-tile-icon { background: #2A2826; color: #FFFFFF; }
.lp-bento-tile-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 4px 0 0 0;
  color: var(--color-text);
}
.lp-bento-tile-body {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.lp-bento-tile-num {
  font-size: 36px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  margin-top: auto;
}
.lp-bento-tile-mock { margin-top: auto; }

/* Big AI Q&A tile — faux chat exchange */
.lp-bento-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.lp-bento-chat-msg {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  max-width: 90%;
}
.lp-bento-chat-msg.user {
  align-self: flex-end;
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-bottom-right-radius: 4px;
}
.lp-bento-chat-msg.ai {
  align-self: flex-start;
  background: var(--color-bg-muted);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}
.lp-bento-tile.tile-dark .lp-bento-chat-msg.user {
  background: var(--mkt-amber);
  color: #1A1814;
}
.lp-bento-tile.tile-dark .lp-bento-chat-msg.ai {
  background: #2A2826;
  color: #EDEDEC;
}

/* ---- Product showcase bands -------------------------------------------
   Two-layer structure so the background is full-bleed but content
   aligns to the same 1120px content rail as every other section:

     <section class="lp-band cream">       (full-bleed background)
       <div class="lp-container">          (constrained 1120px)
         <div class="lp-band-inner">       (2-col grid)
           <div class="lp-band-prose">…</div>
           <div class="lp-band-visual">…</div>
         </div>
       </div>
     </section>
*/
.lp-band {
  padding: 80px 0;
}
@media (max-width: 960px) {
  .lp-band { padding: 56px 0; }
}
.lp-band.cream { background: var(--mkt-cream); }
.lp-band.cream-deep { background: var(--mkt-cream-2); }
.lp-band.dark  { background: var(--mkt-ink); color: #EDEDEC; }
.lp-band.dark .lp-h2,
.lp-band.dark .lp-eyebrow,
.lp-band.dark p { color: inherit; }
.lp-band.dark .lp-eyebrow { color: var(--mkt-amber); }
.lp-band-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 960px) {
  .lp-band-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.lp-band.alt .lp-band-inner > .lp-band-prose { order: 2; }
.lp-band.alt .lp-band-inner > .lp-band-visual { order: 1; }
@media (max-width: 960px) {
  .lp-band.alt .lp-band-inner > .lp-band-prose { order: 1; }
  .lp-band.alt .lp-band-inner > .lp-band-visual { order: 2; }
}
.lp-band-prose .lp-eyebrow { margin-bottom: 14px; }
.lp-band-prose .lp-h2 { font-size: 38px; line-height: 1.15; margin-bottom: 14px; }
.lp-band-prose p {
  color: inherit;
  font-size: var(--fs-lg);
  line-height: 1.55;
  margin: 0;
  opacity: 0.85;
}
@media (max-width: 960px) {
  .lp-band-prose .lp-h2 { font-size: 28px; }
  .lp-band-prose p { font-size: var(--fs-md); }
}
.lp-band-visual {
  position: relative;
}

/* Card frame for mock screenshots inside bands */
.lp-mock-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.22),
              0 1px 0 rgba(0, 0, 0, 0.04);
}
.lp-band.dark .lp-mock-card {
  background: #25221E;
  border-color: #3A3633;
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.5);
}
.lp-mock-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lp-band.dark .lp-mock-card-head {
  background: #2D2A26;
  border-bottom-color: #3A3633;
  color: #EDEDEC;
}
.lp-mock-card-body {
  padding: 16px 18px;
}
.lp-mock-card-stat {
  font-size: 14px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.lp-band.dark .lp-mock-card-stat { color: #A9A6A0; }
.lp-band.dark .lp-mock-row { border-color: #2F2C28; }
.lp-band.dark .lp-mock-row-name { color: #EDEDEC; }
.lp-band.dark .lp-mock-row-sku { color: #9A968F; }

/* ---- Pricing redesign — visually distinct popular plan ---------------- */
.lp-plan-popular {
  border: 0;
  padding-top: 32px;
  position: relative;
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(135deg, var(--mkt-amber) 0%, var(--color-text) 100%) border-box;
  border: 1.5px solid transparent;
}
.lp-plan-popular::before {
  content: "Most popular";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mkt-amber);
  color: #1A1814;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: var(--fw-semibold);
}

/* ---- Scroll-reveal animation ----------------------------------------- */
.lp-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.lp-reveal.lp-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .lp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Section accent background variants ------------------------------ */
.lp-section.lp-section-cream { background: var(--mkt-cream); }
.lp-section.lp-section-cream-deep { background: var(--mkt-cream-2); }
/* Compact cream band used right after the hero for the marketplace strip. */
.lp-mkt-section {
  background: var(--mkt-cream);
  padding: 32px 0;
  border-bottom: 1px solid var(--color-border);
}

/* ---- Hero subtle gradient blob backdrop ------------------------------ */
.lp-hero {
  position: relative;
  isolation: isolate;
}
.lp-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120px;
  right: -120px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--mkt-amber-bg) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}
@media (max-width: 720px) {
  .lp-hero::before {
    width: 320px;
    height: 320px;
    top: -80px;
    right: -80px;
  }
}

/* ---- Drawer (mobile) overrides — link styles + close head visible --- */
@media (max-width: 720px) {
  .lp-drawer-head { display: flex; }
  .lp-mobile-drawer .lp-drawer-link {
    display: block;
    padding: 16px 0;
    font-size: 17px;
    font-weight: var(--fw-medium);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
  }
  .lp-mobile-drawer .lp-drawer-link:last-of-type { border-bottom: 0; }
  .lp-mobile-drawer .lp-drawer-cta {
    margin-top: 16px;
    width: 100%;
    padding: 14px 18px;
    height: auto;
    font-size: 16px;
    border-radius: 12px;
  }
}

/* ---- Math section — cost-bar visual comparison -----------------------
   Replaces the side-by-side bullet cards with a single horizontal
   bar chart. The "team" bar is 6x wider than the "eCOMeX" bar — that's
   the whole story, told visually. */
.lp-math-bars {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 32px;
}
@media (max-width: 720px) {
  .lp-math-bars { padding: 22px; gap: 18px; }
}
.lp-math-bar-row {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 18px;
  align-items: center;
}
@media (max-width: 720px) {
  .lp-math-bar-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.lp-math-bar-label {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: 1.35;
}
.lp-math-bar-label small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
  font-size: var(--fs-sm);
}
.lp-math-bar-track {
  position: relative;
  height: 44px;
  background: var(--color-bg-subtle);
  border-radius: 10px;
  overflow: hidden;
}
.lp-math-bar-fill {
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  white-space: nowrap;
  transition: width 1200ms cubic-bezier(0.2, 0.85, 0.2, 1);
}
.lp-math-bar-fill.bad {
  width: 100%;
  background: linear-gradient(90deg, #2C2A26 0%, #4A4642 100%);
  color: #FFFFFF;
}
.lp-math-bar-fill.good {
  width: 16.6%;   /* 499 / 3000 */
  background: linear-gradient(90deg, var(--mkt-amber) 0%, #E0A857 100%);
  color: #1A1814;
}
/* Pre-reveal state: bars start narrow + animate to width when revealed. */
.lp-reveal .lp-math-bar-fill.bad { width: 0; }
.lp-reveal .lp-math-bar-fill.good { width: 0; }
.lp-reveal.lp-revealed .lp-math-bar-fill.bad  { width: 100%; }
.lp-reveal.lp-revealed .lp-math-bar-fill.good { width: 16.6%; }
.lp-math-bar-tag {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.lp-math-bar-tag.up { color: var(--mkt-rose); font-weight: var(--fw-medium); }
.lp-math-bar-tag.down { color: var(--mkt-mint); font-weight: var(--fw-medium); }

.lp-math-takeaway {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding: 18px 22px;
  background: var(--mkt-cream);
  border: 1px dashed var(--mkt-amber-border);
  border-radius: 14px;
  font-size: var(--fs-md);
  color: var(--mkt-slate);
}
.lp-math-takeaway-num {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: var(--fw-semibold);
  color: var(--mkt-amber);
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.lp-math-takeaway-text {
  flex: 1;
  line-height: 1.4;
}
.lp-math-takeaway-text strong { color: var(--color-text); }
@media (max-width: 720px) {
  .lp-math-takeaway { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lp-math-takeaway-num { font-size: 28px; }
}

/* Role-card mini mocks — small visual proof at the bottom of each card */
.lp-role-mock {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.lp-role-mock-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mkt-amber);
  font-weight: var(--fw-semibold);
  margin-bottom: 8px;
}
.lp-role-mock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-border);
}
.lp-role-mock-row:last-child { border-bottom: 0; }
.lp-role-mock-row .lp-role-mock-key {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  font-size: 11px;
  flex: 0 0 auto;
}
.lp-role-mock-row .lp-role-mock-text {
  flex: 1;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lp-role-mock-row .lp-role-mock-tail {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}
.lp-role-mock-row .lp-role-mock-tail.up { color: var(--mkt-mint); }
.lp-role-mock-row .lp-role-mock-tail.down { color: var(--mkt-rose); }
.lp-role-mock-bullet {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.lp-role-mock-bullet::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-top: 8px;
  background: var(--mkt-amber);
}

/* On mobile, role cards stay tight: hide the verbose bullet list by
   default — the mini mock at the bottom is the visual proof. A
   "Show full breakdown" details toggle reveals the bullets when the
   visitor wants more. */
@media (max-width: 720px) {
  .lp-role .lp-role-list { display: none; }
  .lp-role-details {
    margin-top: var(--space-2);
  }
  .lp-role-details[open] .lp-role-list { display: block; margin-top: 8px; }
  .lp-role-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--color-bg-subtle);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .lp-role-details > summary::-webkit-details-marker { display: none; }
  .lp-role-details > summary::after {
    content: "+";
    font-size: 18px;
    font-weight: var(--fw-normal);
    color: var(--color-text-muted);
    line-height: 1;
  }
  .lp-role-details[open] > summary::after { content: "−"; }
}
@media (min-width: 721px) {
  /* Desktop: <details> shouldn't add any visual chrome; the bullet list
     is always visible regardless of details' open state. We disable
     summary, force the contained list to show via the parent rule
     above (which only hides on mobile). */
  .lp-role-details > summary { display: none; }
}

/* ===================================================================== */
/* Order Analysis — geographic choropleth (apps/reports/geo_maps.py)     */
/* Self-contained monochrome ramp (light → accent) with a dark-mode      */
/* inversion, same pattern as the task-label palette. Region fill is set */
/* by quantile class; the table beside the map carries exact numbers.    */
/* ===================================================================== */
.geo-map-wrap { overflow: hidden; }
.geo-map {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
}
.geo-region {
  stroke: var(--color-bg, #fff);
  stroke-width: 0.4;
  transition: opacity 0.1s ease;
}
.geo-region:hover { opacity: 0.78; cursor: default; }
.geo-q-none { fill: #efeeec; }
.geo-q0     { fill: #dcdbd8; }
.geo-q1     { fill: #b8b7b3; }
.geo-q2     { fill: #88877f; }
.geo-q3     { fill: #4d4c47; }
.geo-q4     { fill: #191919; }

[data-theme="dark"] .geo-region { stroke: var(--color-bg, #191919); }
[data-theme="dark"] .geo-q-none { fill: #2a2a2a; }
[data-theme="dark"] .geo-q0     { fill: #3a3a3a; }
[data-theme="dark"] .geo-q1     { fill: #5c5c59; }
[data-theme="dark"] .geo-q2     { fill: #8a8a86; }
[data-theme="dark"] .geo-q3     { fill: #c4c4c0; }
[data-theme="dark"] .geo-q4     { fill: #ffffff; }

/* Legend — a row of swatches under the map. */
.geo-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.geo-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.geo-legend-swatch {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid var(--color-border);
  display: inline-block;
}