@font-face {
  font-family: 'Zilla Slab';
  font-weight: 600;
  font-style: normal;
  src: url('/static/fonts/zilla-slab-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Zilla Slab';
  font-weight: 700;
  font-style: normal;
  src: url('/static/fonts/zilla-slab-700.woff2') format('woff2');
}

:root {
  --ink: #1c1917;
  --ink-soft: #6b6258;
  --paper: #fefdfb;
  --paper-raised: #ffffff;
  --line: #e7e0d4;
  --brand: #a6791f;
  --brand-soft: #f6ecd3;
  --sage: #157f4a;
  --sage-bg: #dcf5e6;
  --rust: #c23b2b;
  --rust-bg: #fbe4df;
  --neutral: #78716c;
  --neutral-bg: #efe9e0;
  --info: #1d6fa5;
  --info-bg: #dcecf5;
  --warning: #c1560a;
  --warning-bg: #fae3d2;
  --purple: #7b3fa0;
  --purple-bg: #f1e5f8;
  --shadow: rgba(28, 25, 23, 0.08);
  --brand-shine: linear-gradient(135deg, #f3d488 0%, #d9a53e 45%, #b3781f 100%);
  --on-brand: #ffffff;
  --on-sage: #ffffff;
  --font-display: 'Zilla Slab', ui-serif, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5f0e6; --ink-soft: #b8ad9c; --paper: #17140f; --paper-raised: #211c15;
    --line: #3a3226; --brand: #d9ae42; --brand-soft: #4a3a15;
    --sage: #4fd88a; --sage-bg: #163826; --rust: #ef7a68; --rust-bg: #3d1f18;
    --neutral: #a89c8a; --neutral-bg: #322b21;
    --info: #6db8e8; --info-bg: #1c3548;
    --warning: #e08a3c; --warning-bg: #4a2c10;
    --purple: #cb98e8; --purple-bg: #3a2148;
    --shadow: rgba(0, 0, 0, 0.45);
    --brand-shine: linear-gradient(135deg, #ffe9ad 0%, #f0c25c 45%, #d9ae42 100%);
  }
}
:root[data-theme="dark"] {
  --ink: #f5f0e6; --ink-soft: #b8ad9c; --paper: #17140f; --paper-raised: #211c15;
  --line: #3a3226; --brand: #d9ae42; --brand-soft: #4a3a15;
  --sage: #4fd88a; --sage-bg: #163826; --rust: #ef7a68; --rust-bg: #3d1f18;
  --neutral: #a89c8a; --neutral-bg: #322b21;
  --info: #6db8e8; --info-bg: #1c3548;
  --warning: #e08a3c; --warning-bg: #4a2c10;
  --purple: #cb98e8; --purple-bg: #3a2148;
  --shadow: rgba(0, 0, 0, 0.45);
  --brand-shine: linear-gradient(135deg, #ffe9ad 0%, #f0c25c 45%, #d9ae42 100%);
}
:root[data-theme="light"] {
  --ink: #1c1917; --ink-soft: #6b6258; --paper: #fefdfb; --paper-raised: #ffffff;
  --line: #e7e0d4; --brand: #a6791f; --brand-soft: #f6ecd3;
  --sage: #157f4a; --sage-bg: #dcf5e6; --rust: #c23b2b; --rust-bg: #fbe4df;
  --neutral: #78716c; --neutral-bg: #efe9e0;
  --info: #1d6fa5; --info-bg: #dcecf5;
  --warning: #c1560a; --warning-bg: #fae3d2;
  --purple: #7b3fa0; --purple-bg: #f1e5f8;
  --shadow: rgba(28, 25, 23, 0.08);
  --brand-shine: linear-gradient(135deg, #f3d488 0%, #d9a53e 45%, #b3781f 100%);
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
code { font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; background: var(--brand-soft); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* ---------- Top bar ---------- */

/* The very top bar (logo and the Lead Generation / Account Onboarding toggle) stays pinned while the page scrolls; the tab row under it is
   simply part of the page and scrolls away. (The wrapper adds no box of its own, so the bar sticks against the whole page.) */
.app-header { display: contents; }
.topbar {
  display: grid;
  /* Side columns never shrink below their content (toggle / icons), so on
     tablet widths the wordmark slides over instead of overlapping them. */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 10px 24px;
  background: var(--paper-raised);
  position: sticky;
  top: 0;
  /* Above .nav-scrim (25) so the account-menu it contains stays clickable
     while the scrim is open — z-index only competes within this element's
     own stacking context otherwise, no matter what z-index the menu itself has. */
  z-index: 26;
}

.topbar-spacer { min-width: 1px; justify-self: start; }
/* The grey line under the bar runs from the left edge up to the side rail and stops there, so it never cuts through the rail. */
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--chrome-line, var(--line)); pointer-events: none; }
@media (min-width: 900px) { body.has-rail .topbar::after { right: var(--rail-w); } }

.mode-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.mode-toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.mode-toggle-option.active {
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.mode-toggle-option.mode-toggle-locked { cursor: not-allowed; opacity: 0.55; }

.topbar-right { display: flex; align-items: center; justify-self: end; gap: 8px; position: relative; }

.wordmark {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  text-decoration: none;
  cursor: pointer;
}
.wordmark em, .wordmark-rx {
  font-style: normal;
  background: var(--brand-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wordmark-rx { font-size: 0.72em; vertical-align: super; margin-left: 0.05em; }
.wordmark-icon { height: 1.2em; width: auto; display: block; }

/* itsthebridge logo: black art on light themes, white art on dark. */
.bridge-logo { height: 0.95em; width: auto; display: block; }
.bridge-mark { height: 1.75em; width: auto; display: block; margin-right: 0.2em; }
.bridge-logo-for-dark { display: none; }
:root[data-theme="dark"] .bridge-logo-for-light { display: none; }
:root[data-theme="dark"] .bridge-logo-for-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bridge-logo-for-light { display: none; }
  :root:not([data-theme="light"]) .bridge-logo-for-dark { display: block; }
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }

.hamburger {
  flex-direction: column;
  gap: 4px;
}
.hamburger span {
  display: block;
  width: 16px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
}

.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: block; }
}

/* ---------- Tab bar ---------- */

.tabbar {
  display: flex;
  align-items: stretch;
  padding: 0;
  /* the strip behind the tabs is a shade darker than the tabs, so the slanted gaps between them are filled, never white */
  background: color-mix(in srgb, #000 15%, var(--paper-raised));
  position: relative;
  z-index: 19;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
/* Tabs are chevron shapes that lock into each other (see the sketch): from the middle of the row the joins point outward, so the outer tabs
   have notches cut into them and the inner tabs have points. A small script gives each tab its edge classes from its place in the row. */
.tab {
  --p: 20px;
  --lt: 0 0; --lm: 0 50%; --lb: 0 100%;
  --rt: 100% 0; --rm: 100% 50%; --rb: 100% 100%;
  flex: 1 1 0;
  min-width: max-content;
  display: grid;
  place-items: center;
  height: 46px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  background: color-mix(in srgb, #000 8%, var(--paper-raised));
  clip-path: polygon(var(--lt), var(--rt), var(--rm), var(--rb), var(--lb), var(--lm));
  margin-left: 3px;
  transition: background 0.12s, color 0.12s;
}
.tab:first-child { margin-left: 0; }
/* left edge */
.tab.l-point { --lt: var(--p) 0; --lm: 0 50%; --lb: var(--p) 100%; margin-left: calc(3px - var(--p)); padding-left: calc(var(--p) + 10px); }
.tab.l-notch { --lt: 0 0; --lm: var(--p) 50%; --lb: 0 100%; margin-left: calc(3px - var(--p)); padding-left: calc(var(--p) + 10px); }
/* right edge */
.tab.r-point { --rt: calc(100% - var(--p)) 0; --rm: 100% 50%; --rb: calc(100% - var(--p)) 100%; padding-right: calc(var(--p) + 10px); }
.tab.r-notch { --rt: 100% 0; --rm: calc(100% - var(--p)) 50%; --rb: 100% 100%; padding-right: calc(var(--p) + 10px); }
.tab:hover { color: var(--ink); background: var(--paper-raised); }
.tab.active {
  color: var(--brand);
  background: linear-gradient(var(--paper) calc(100% - 3px), var(--brand) 0);
  position: relative;
  z-index: 1;
}

.lead-subnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.lead-subnav-tab {
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
}
.lead-subnav-tab:hover { color: var(--ink); }
.lead-subnav-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.lead-subnav-tab-disabled { color: var(--ink-soft); opacity: 0.5; cursor: not-allowed; }

/* ---------- Account menu ---------- */

.account-wrap { position: relative; }
.account-menu {
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 190px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
}
.account-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.account-whoami {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
}
.account-item:hover { background: var(--brand-soft); color: var(--brand); }

/* ---------- Drawer nav ---------- */

.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 25;
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 250px;
  background: var(--paper-raised);
  border-left: 1px solid var(--line);
  box-shadow: -4px 0 16px var(--shadow);
  padding: 70px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 30;
}
.drawer.open { transform: translateX(0); }

.drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.drawer-link::-webkit-details-marker { display: none; }
.drawer-link:hover { background: var(--brand-soft); }
.drawer-link.active { background: var(--brand); color: var(--on-brand); }
.drawer-link.secondary { color: var(--ink-soft); font-size: 13px; }
.drawer-link-sub { padding-left: 34px; font-size: 13px; color: var(--ink-soft); }
.drawer-link-sub.active { color: var(--on-brand); }
.drawer-icon { font-size: 15px; }
.drawer-badge { margin-left: auto; font-size: 11px; padding: 1px 7px; }
.drawer-divider { height: 1px; background: var(--line); margin: 8px 4px; }
.drawer-section-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 4px 12px 2px;
}

.drawer-team-members {
  display: flex;
  flex-direction: column;
  padding: 2px 4px 4px 16px;
  gap: 2px;
}
.drawer-team-members .drawer-link { font-size: 13px; padding: 8px 10px; }

.drawer-user-menu {
  display: flex;
  flex-direction: column;
  padding: 2px 12px 6px 34px;
  gap: 2px;
}
.drawer-sublink {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
}
.drawer-sublink:hover { background: var(--brand-soft); color: var(--brand); }

/* ---------- Page layout ---------- */

.wrap { max-width: 1120px; margin: 0 auto; padding: 32px 24px 80px; }

.page-head { position: relative; margin-bottom: 22px; text-align: center; }
.page-head-action {
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--on-sage);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--shadow);
}
.page-head-action:hover { filter: brightness(1.06); }
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 4px;
  text-wrap: balance;
}
.tagline { color: var(--ink-soft); font-size: 13.5px; margin: 0; }

.notice {
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 20px;
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}
.empty-state p { margin: 4px 0; }
.empty-state a.btn-primary { display: inline-block; margin-top: 12px; text-decoration: none; }

/* ---------- Stat tiles ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px var(--shadow);
}
.stat { background: var(--paper-raised); padding: 16px 18px; }
.stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 6px; }
.stat .value { font-family: var(--font-display); font-weight: 600; font-size: 25px; font-variant-numeric: tabular-nums; }
.stat .value small { font-family: ui-sans-serif, sans-serif; font-size: 12px; font-weight: 500; color: var(--ink-soft); margin-left: 2px; }
.stat.accent .value { color: var(--brand); }

/* ---------- Search ---------- */

.search-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.search-row input[type="search"] {
  flex: 0 1 420px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 13.5px;
}
.search-row input[type="search"]:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.clear-search { font-size: 12.5px; color: var(--ink-soft); text-decoration: underline; }

/* ---------- Filter panel ---------- */

.filter-wrap { position: relative; }
.filter-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.filter-btn:hover { border-color: var(--brand); color: var(--brand); }

.sort-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
}
.sort-label select { margin: 0; }
.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--brand);
  color: var(--paper-raised);
  font-size: 10.5px;
  font-weight: 700;
}

.filter-panel {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 15;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  text-align: left;
}
.filter-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.filter-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 8px;
}
.filter-radio-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; margin-bottom: 6px; }
.filter-radio-row label, .filter-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.filter-checkbox-list { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }

.filter-state-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.filter-state-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  border-radius: 6px;
}
.filter-state-group summary:hover { background: var(--brand-soft); }
.filter-state-group summary::-webkit-details-marker { display: none; }
.filter-state-label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.filter-count { font-size: 11px; color: var(--ink-soft); }
.filter-city-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px 8px 26px;
  font-size: 12.5px;
}
.filter-city-item { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-soft); }

.filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.filter-actions .btn-primary { padding: 8px 16px; font-size: 13px; }

.row-disp-pill { display: block; margin-bottom: 6px; }

/* ---------- Table ---------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px var(--shadow);
}
table { border-collapse: collapse; width: 100%; min-width: 920px; background: var(--paper-raised); }
thead th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }

.pricing-table { min-width: 640px; table-layout: fixed; }
.pricing-table thead th {
  font-size: 12px; font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--line) 55%, var(--ink) 25%);
  /* The base thead th rule sets white-space: nowrap, fine on desktop where
     there's room, but this table's fixed narrow columns (e.g. 12% of a
     560px min-width table) are too narrow for a label like "STRENGTH" to
     fit on one line — nowrap then lets it overflow sideways into the next
     header cell instead of wrapping, visually colliding on any narrow
     viewport. Tighter padding than the base thead th rule's 14px since a
     short uppercase label doesn't need as much breathing room as a data
     cell, and every bit matters at these column widths. */
  white-space: normal;
  padding: 12px 6px;
}
.pricing-table tbody td { border-bottom: 1.5px solid color-mix(in srgb, var(--line) 65%, var(--ink) 20%); overflow-wrap: break-word; }
.pricing-table tbody td:first-child { font-weight: 700; }
/* Product, Strength, Form/Vol., Total MG, Notes, Base Price, Tier — the
   generic 7-column layout lead_pricing.html's bare .pricing-table uses.
   .catalog-table and .comp-calc-table below carry their own full set of
   nth-child overrides for their own (different) column counts, which
   win by source order since both combine with .pricing-table on the
   same <table> rather than replacing it. */
.pricing-table th:nth-child(1), .pricing-table td:nth-child(1) { width: 22%; }
.pricing-table th:nth-child(2), .pricing-table td:nth-child(2) { width: 10%; }
.pricing-table th:nth-child(3), .pricing-table td:nth-child(3) { width: 11%; }
.pricing-table th:nth-child(4), .pricing-table td:nth-child(4) { width: 10%; }
.pricing-table th:nth-child(5), .pricing-table td:nth-child(5) { width: 19%; }
.pricing-table th:nth-child(6), .pricing-table td:nth-child(6) { width: 13%; text-align: right; }
.pricing-table th:nth-child(7), .pricing-table td:nth-child(7) { width: 15%; text-align: right; }
/* Lead pricing sheet: the same columns plus a narrow one for the reset
   (🔄) button after the price field — widths re-balanced so the extra
   column doesn't squeeze the rest. */
.lead-pricing-table th:nth-child(1), .lead-pricing-table td:nth-child(1) { width: 21%; }
.lead-pricing-table th:nth-child(2), .lead-pricing-table td:nth-child(2) { width: 10%; }
.lead-pricing-table th:nth-child(3), .lead-pricing-table td:nth-child(3) { width: 11%; }
.lead-pricing-table th:nth-child(4), .lead-pricing-table td:nth-child(4) { width: 9%; }
.lead-pricing-table th:nth-child(5), .lead-pricing-table td:nth-child(5) { width: 15%; }
.lead-pricing-table th:nth-child(6), .lead-pricing-table td:nth-child(6) { width: 12%; text-align: right; }
.lead-pricing-table th:nth-child(7), .lead-pricing-table td:nth-child(7) { width: 17%; text-align: right; }
.lead-pricing-table th:nth-child(8), .lead-pricing-table td:nth-child(8) { width: 5%; text-align: center; padding-left: 0; padding-right: 6px; }
.pricing-reset-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent;
  font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.75; transition: background 0.15s ease, opacity 0.15s ease;
}
.pricing-reset-btn:hover { background: var(--brand-soft); opacity: 1; }
/* Only rows whose price differs from the original get a reset button —
   hidden (not removed) otherwise so the column stays put. */
.pricing-reset-cell .pricing-reset-btn { visibility: hidden; }
.pricing-row-changed .pricing-reset-cell .pricing-reset-btn { visibility: visible; }
.pricing-base-price { color: var(--rust); font-weight: 700; font-variant-numeric: tabular-nums; }
.pricing-total-mg { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.comp-total { font-size: 34px; font-weight: 700; font-family: var(--font-display); color: var(--sage); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }

.comp-plan-pharmacy-list { display: flex; flex-direction: column; gap: 10px; }
.comp-plan-pharmacy-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.comp-plan-pharmacy-row:last-child { border-bottom: none; }
.comp-plan-pharmacy-name { flex: 1 1 auto; font-weight: 600; font-size: 13.5px; }
.comp-plan-pharmacy-row select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); font-size: 13px; min-width: 170px;
}
.comp-plan-pharmacy-row input {
  width: 70px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); font-size: 13px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.comp-calc-table .comp-qty-input { width: 60px; text-align: center; }
.comp-calc-table .comp-line-total { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* Product, Strength, Form/Vol., Total MG, Price, Base Price, Qty, Commission. */
.comp-calc-table { min-width: 760px; }
.comp-calc-table th:nth-child(1), .comp-calc-table td:nth-child(1) { width: 20%; }
.comp-calc-table th:nth-child(2), .comp-calc-table td:nth-child(2) { width: 11%; }
.comp-calc-table th:nth-child(3), .comp-calc-table td:nth-child(3) { width: 11%; }
.comp-calc-table th:nth-child(4), .comp-calc-table td:nth-child(4) { width: 10%; }
.comp-calc-table th:nth-child(5), .comp-calc-table td:nth-child(5) { width: 18%; text-align: right; }
.comp-calc-table th:nth-child(6), .comp-calc-table td:nth-child(6) { width: 12%; text-align: right; }
/* Price field + its reset (🔄) button, in the Compensation Insights Tool
   where prices are editable. The button only shows on edited rows
   (hidden, not removed, so the field doesn't shift). */
.comp-price-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.comp-price-wrap .comp-price-input { flex: 1 1 auto; min-width: 0; }
.comp-price-wrap .pricing-reset-btn { visibility: hidden; }
.pricing-row-changed .comp-price-wrap .pricing-reset-btn { visibility: visible; }
.comp-calc-table th:nth-child(7), .comp-calc-table td:nth-child(7) { width: 8%; text-align: center; }
.comp-calc-table th:nth-child(8), .comp-calc-table td:nth-child(8) { width: 10%; text-align: right; }

/* Product, Strength, Form/Vol., Total MG, Notes, Base Price, Tier 1/2/3, delete button. */
.catalog-table { min-width: 1060px; }
.catalog-table th:nth-child(1), .catalog-table td:nth-child(1) { width: 21%; }
.catalog-table th:nth-child(2), .catalog-table td:nth-child(2) { width: 8%; }
.catalog-table th:nth-child(3), .catalog-table td:nth-child(3) { width: 8%; }
.catalog-table th:nth-child(4), .catalog-table td:nth-child(4) { width: 8%; }
.catalog-table th:nth-child(5), .catalog-table td:nth-child(5) { width: 12%; }
.catalog-table th:nth-child(6), .catalog-table td:nth-child(6) { width: 10%; text-align: right; }
.catalog-table th:nth-child(7), .catalog-table td:nth-child(7),
.catalog-table th:nth-child(8), .catalog-table td:nth-child(8),
.catalog-table th:nth-child(9), .catalog-table td:nth-child(9) { width: 9%; text-align: right; }
.catalog-table th:nth-child(10), .catalog-table td:nth-child(10) { width: 7%; text-align: center; }

.catalog-add-here-row { margin: 2px 0 10px; }
.catalog-input {
  width: 100%;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
}
.catalog-input:hover { border-color: var(--line); }
.catalog-input:focus-visible { outline: none; border-color: var(--brand); background: var(--paper); }
.catalog-input-price { text-align: right; font-variant-numeric: tabular-nums; }
.catalog-input-error { border-color: var(--rust); background: var(--rust-bg); }
.catalog-input-base { color: var(--rust); font-weight: 700; }
.catalog-input-base:hover { border-color: var(--rust); }
.catalog-input-base:focus-visible { border-color: var(--rust); background: var(--rust-bg); }
.catalog-delete-btn {
  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 4px 9px; border-radius: 6px;
}
.catalog-delete-btn:hover { background: var(--rust-bg); color: var(--rust); }

.csv-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  border: 2px dashed var(--line); border-radius: 10px; padding: 26px 16px;
  cursor: pointer; color: var(--ink-soft); font-size: 13.5px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.csv-dropzone:hover { border-color: var(--brand); color: var(--ink); }
.csv-dropzone.dragover { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); }
.csv-dropzone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-size: 16px;
}
.pricing-notes { color: var(--ink-soft); font-size: 12px; max-width: 220px; }
.pricing-input {
  width: 90px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
}
.pricing-input:hover { border-color: var(--line); }
.pricing-input:focus-visible { outline: none; border-color: var(--brand); background: var(--paper); }
.pricing-input-overridden { background: var(--brand-soft); border-color: var(--brand); font-weight: 600; }
.price-changed { background: var(--brand-soft); color: var(--brand); font-weight: 700; padding: 2px 6px; border-radius: 5px; }
.pricing-row-changed td { background: var(--brand-soft); }
.pricing-row-changed .pricing-input-overridden { background: var(--paper-raised); }

.onboarding-agreement {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 4px;
}
.onboarding-agreement p { margin: 0 0 8px; }
.onboarding-agreement ol { margin: 0; padding-left: 20px; }
.onboarding-agreement li { margin-bottom: 8px; }

.onboarding-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 13.5px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.onboarding-dropzone:hover, .onboarding-dropzone-active {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.onboarding-dropzone-icon { font-size: 22px; }
.onboarding-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.onboarding-attachment-current {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Bulk actions ---------- */

.bulk-bar {
  position: sticky;
  bottom: 16px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow);
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.bulk-bar.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bulk-bar select {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--ink-soft);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
}
.bulk-bar .btn-primary { padding: 7px 14px; font-size: 13px; }
.bulk-bar .btn-undo { background: transparent; border: 1px solid var(--ink-soft); color: var(--paper); }

.fav-form { display: inline-block; float: right; margin-left: 8px; }
.fav-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  color: var(--line);
  opacity: 0.7;
}
.fav-star:hover { color: var(--warning); opacity: 1; }
.fav-star.active { color: var(--warning); opacity: 1; }

.biz-name { font-weight: 600; display: block; text-decoration: none; color: var(--ink); }
.biz-name:hover { color: var(--brand); text-decoration: underline; }
.biz-addr { color: var(--ink-soft); font-size: 12px; margin-top: 2px; display: block; }
.franchise-pill { margin-top: 4px; text-decoration: none; }
.franchise-pill:hover { opacity: 0.8; }
.contact-name { font-weight: 600; display: block; }
.contact-title { color: var(--ink-soft); font-size: 12px; }
.empty-cell { color: var(--ink-soft); font-size: 12.5px; }
.mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; font-variant-numeric: tabular-nums; font-size: 12.5px; }

.contact-links { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.link-pill {
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--sage-bg);
  color: var(--sage);
  white-space: nowrap;
}
.link-pill:hover { filter: brightness(0.95); }
.link-pill.muted-pill { background: var(--neutral-bg); color: var(--ink-soft); }
.link-pill .muted { opacity: 0.7; font-family: ui-sans-serif, sans-serif; }
button.link-pill { border: none; cursor: pointer; }
.link-pill-quiet { background: var(--neutral-bg); color: var(--ink-soft); }

.settings-row-actions { display: flex; align-items: center; gap: 8px; }

.score { display: flex; align-items: center; gap: 8px; }
.score-bar { width: 46px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; flex-shrink: 0; }
.score-bar span { display: block; height: 100%; background: var(--brand); }
.score-num { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; min-width: 20px; }

/* ---------- Row actions / forms ---------- */

/* Keep this a real table cell (display:flex on a <td> detaches it from the
   row, so its bottom border stopped mid-row and read as stray lines). The
   buttons stack with margins instead. */
.row-actions { white-space: nowrap; }
.row-actions > * { display: block; width: fit-content; }
.row-actions > * + * { margin-top: 9px; }

.btn-mark, .btn-undo, .note-form button {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
}
.btn-mark { border-color: var(--sage); color: var(--sage); }
.btn-mark:hover { background: var(--sage-bg); }
.btn-undo { border-color: var(--rust); color: var(--rust); margin-top: 6px; }
.btn-undo:hover { background: var(--rust-bg); }
.row-actions > .btn-undo { margin-top: 0; }

.note-toggle { margin-top: 6px; font-size: 12px; }
.note-toggle summary {
  cursor: pointer;
  color: var(--ink-soft);
  list-style: none;
}
.note-toggle summary::-webkit-details-marker { display: none; }
.note-toggle summary:hover { color: var(--brand); }
.note-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 200px; }
.note-form textarea {
  font-family: inherit;
  font-size: 12.5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  min-height: 50px;
}
.note-form button { align-self: flex-start; }
.note-preview {
  font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; width: 210px; max-width: 100%;
  /* Long notes clamp to five lines so one chatty note can't stretch the whole
     row; the Notes button above opens the full thread. */
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

.book-form { flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; }
.book-form input[type="date"], .book-form input[type="time"] {
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}

.invite-link-row { display: flex; gap: 8px; }
.invite-link-row input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
}

/* ---------- Decision-maker edit + front desk contact ---------- */

.front-desk-line { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.dm-edit-toggle { margin-top: 4px; }
.dm-edit-form { min-width: 220px; }
.dm-edit-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.dm-edit-label input, .dm-edit-label select, .dm-edit-label textarea {
  font-family: ui-sans-serif, sans-serif;
  text-transform: none;
  letter-spacing: normal;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.dm-edit-label textarea { min-height: 120px; resize: vertical; margin: 0; }
.dm-edit-form .btn-undo { margin-top: 4px; }

/* ---------- Business hours ---------- */

.hours-status {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 14px;
}
.hours-status-open { color: var(--sage); }
.hours-status-closed { color: var(--warning); }

.hours-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
}
.hours-mini::before {
  content: "●";
  font-size: 9px;
}
.hours-mini-open { color: var(--sage); }
.hours-mini-closed { color: var(--warning); }
.hours-mini-range { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

.hours-status::before {
  content: "●";
  margin-right: 6px;
  font-size: 10px;
}
.hours-grid { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.hours-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.hours-day-label { width: 34px; color: var(--ink-soft); flex-shrink: 0; }
.hours-time-input {
  font-family: ui-sans-serif, sans-serif;
  font-size: 12.5px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.hours-time-input:disabled { opacity: 0.4; }
.hours-dash { color: var(--ink-soft); }
.hours-closed-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- Edit history bubble (admin only) ---------- */

.history-toggle { margin-top: 6px; }
.history-toggle summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 11px;
  list-style: none;
}
.history-toggle summary::-webkit-details-marker { display: none; }
.history-toggle summary:hover { border-color: var(--brand); }
.history-panel {
  margin-top: 6px;
  min-width: 220px;
  max-width: 280px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-entry { font-size: 11.5px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.history-entry:last-child { border-bottom: none; padding-bottom: 0; }
.history-field { font-weight: 600; color: var(--ink); }
.history-change { color: var(--ink-soft); word-break: break-word; }
.history-meta { color: var(--ink-soft); opacity: 0.8; margin-top: 2px; }

/* ---------- Disposition control (Leads page) ---------- */

.disp-toggle { display: inline-block; font-size: 12px; }
.disp-toggle summary { list-style: none; cursor: pointer; }
.disp-toggle summary::-webkit-details-marker { display: none; }
.disp-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  min-width: 140px;
}
.disp-btn {
  width: 100%;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}
.disp-btn.disp-positive { background: var(--sage-bg); color: var(--sage); }
.disp-btn.disp-neutral { background: var(--neutral-bg); color: var(--neutral); }
.disp-btn.disp-negative { background: var(--rust-bg); color: var(--rust); }
.disp-btn.disp-info { background: var(--info-bg); color: var(--info); }
.disp-btn.disp-warning { background: var(--warning-bg); color: var(--warning); }
.disp-btn.disp-success { background: var(--sage); color: var(--paper-raised); }
.disp-btn.disp-purple { background: var(--purple-bg); color: var(--purple); }
.disp-btn:hover { filter: brightness(0.95); }

/* ---------- Disposition pills (Contacted page) ---------- */

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.pill-positive { background: var(--sage-bg); color: var(--sage); }
.pill-neutral { background: var(--neutral-bg); color: var(--neutral); }
.pill-negative { background: var(--rust-bg); color: var(--rust); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-warning { background: var(--warning-bg); color: var(--warning); }
.pill-purple { background: var(--purple-bg); color: var(--purple); }
.pill-success { background: var(--sage); color: var(--paper-raised); }

.disp-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* ---------- Search row select (Contacted filter) ---------- */

.search-row select {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 13px;
}

/* ---------- Pagination ---------- */

.pagination-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  text-align: center;
}
.page-info { font-size: 12.5px; color: var(--ink-soft); }
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid transparent;
}
a.page-btn:hover { border-color: var(--line); color: var(--ink); }
.page-btn.current {
  background: var(--brand);
  color: var(--on-brand);
}
.page-ellipsis {
  color: var(--ink-soft);
  font-size: 12.5px;
  padding: 0 2px;
}

/* ---------- Notices ---------- */

.notice-success { background: var(--sage-bg); border-color: var(--sage); color: var(--sage); }
.notice-error { background: var(--rust-bg); border-color: var(--rust); color: var(--rust); }
.notice a { color: inherit; text-decoration: underline; font-weight: 600; }

.duplicate-match-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.duplicate-match {
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--rust);
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
}
.duplicate-match .biz-name { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.duplicate-match .biz-addr { color: var(--ink-soft); font-size: 12px; }
.notice-error .settings-note { color: inherit; opacity: 0.85; margin: 0; }

/* ---------- Discover page ---------- */

.discover-form {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
}
.add-user-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.field select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  min-width: 220px;
}
.field input {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  min-width: 200px;
}
.field-state input { min-width: 70px; text-align: center; }
.field-credits input { width: 130px; min-width: 0; box-sizing: border-box; }
.field input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

.onboarding-form { max-width: none; margin: 0; }
.onboarding-form .settings-card { width: 100%; }
.onboarding-form .field { margin-bottom: 16px; }
.onboarding-form .lead-detail-field-row { margin-bottom: 16px; }
.onboarding-form .lead-detail-field-row .field { margin-bottom: 0; }
.onboarding-form .settings-note { margin-bottom: 18px; }

.btn-primary {
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  background: var(--brand-shine);
  color: var(--on-brand, var(--paper-raised));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary.btn-small { padding: 6px 13px; font-size: 12.5px; }

.pharmacy-save-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.save-status { font-size: 12.5px; color: var(--sage); opacity: 0; transition: opacity 0.2s; }
.save-status.visible { opacity: 1; }
.portal-sync-status { font-size: 12.5px; color: var(--sage); }
.portal-sync-status.portal-sync-pending { color: var(--rust); font-weight: 600; }

.active-pharmacy-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 16px; margin: 14px 0;
}
.active-pharmacy-option, .sheet-supplier-option { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }

/* ---------- Discover: already-searched state groups ---------- */

.state-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.template-group-list { padding: 0 14px 14px; margin-bottom: 0; border-top: 1px solid var(--line); padding-top: 14px; }

/* ---------- Day-planner agenda sections (My Tasks / Leads in Sequence / Upcoming Appointments) ---------- */

.agenda-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.agenda-header:first-of-type { margin-top: 0; }
.agenda-day-header { text-transform: none; font-size: 13.5px; color: var(--ink); font-weight: 700; }

.task-range-toggle { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.task-range-option {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--brand-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.task-range-option:hover { color: var(--ink); }
.task-range-option.active { background: var(--brand); color: var(--on-brand); }
/* Overdue/Past Appointments reads as a warning even when not the active
   tab — it's the one tab that means "this needed attention already",
   so it shouldn't blend in with the plain date tabs next to it. */
.task-range-overdue { background: var(--rust-bg); color: var(--rust); }
.task-range-overdue:hover { color: var(--rust); }
.task-range-overdue.active { background: var(--rust); color: white; }

.task-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: opacity 0.15s ease;
}
.task-card.task-overdue { border-color: var(--rust); }
.task-card.task-today { border-color: var(--warning); }
.task-card.task-done { opacity: 0.6; }
.task-list-inline .task-card { align-items: center; }
.task-delete-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  border: none; background: transparent; color: var(--ink-soft);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.task-delete-btn:hover { background: var(--rust-bg); color: var(--rust); }
.task-delete-btn:disabled { opacity: 0.5; cursor: default; }
.task-done-btn { flex-shrink: 0; padding: 8px 16px; font-size: 13px; }
.task-checkbox {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.task-checkbox:hover { border-color: var(--brand); }
.task-checkbox-mark {
  width: 14px;
  height: 14px;
  stroke: white;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.task-card.task-done .task-checkbox { background: var(--brand); border-color: var(--brand); }
.task-card.task-done .task-checkbox .task-checkbox-mark { opacity: 1; transform: scale(1); }
.task-card.task-done .task-body { text-decoration: line-through; }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.task-body { font-size: 14px; color: var(--ink); margin: 0; white-space: pre-wrap; word-break: break-word; }
.task-lead-link { font-size: 12.5px; font-weight: 600; }
.task-contact-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.task-edit-toggle { font-size: 12px; }
.task-due { font-size: 11.5px; color: var(--ink-soft); }
.task-due-overdue { color: var(--rust); font-weight: 600; }

@media (max-width: 600px) {
  .task-list-inline .task-card { flex-wrap: wrap; }
}

.task-create-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.task-create-input {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
}
.task-create-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task-create-row input[type="date"], .task-create-row input[type="time"], .task-create-row select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  color-scheme: light dark;
}
.task-list-inline { margin-bottom: 0; }

.sequence-card { text-decoration: none; cursor: pointer; transition: border-color 0.15s; }
.sequence-card:hover { border-color: var(--gold, var(--brand)); }

.seq-lead-card { padding: 16px; }
.seq-lead-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.seq-step-row { display: flex; align-items: flex-start; gap: 0; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.seq-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 66px; text-align: center; flex-shrink: 0; }
.seq-step-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 2px solid var(--line);
  color: var(--ink-soft);
  background: var(--paper);
}
.seq-step-label { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }
.seq-step-date { display: block; font-size: 9.5px; font-weight: 500; color: var(--ink-soft); }
.seq-step-done .seq-step-icon, .seq-step-sent .seq-step-icon { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.seq-step-done .seq-step-label, .seq-step-sent .seq-step-label { color: var(--ink); }
.seq-step-pending .seq-step-icon { border-color: var(--warning); color: var(--warning); }
.seq-step-skipped { opacity: 0.5; }
.seq-step-skipped .seq-step-icon { border-style: dashed; }
.seq-step-connector { width: 18px; height: 2px; background: var(--line); flex-shrink: 0; margin-top: 12px; }

.access-picker-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }

.merge-field-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.merge-field-btn { font-size: 12.5px; padding: 6px 12px; cursor: pointer; }

.template-sort-row { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.access-picker-item { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink); }

.sequence-step-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--paper-raised);
}
.sequence-step-row .field { min-width: 160px; }
.sequence-step-row select, .sequence-step-row input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
}
.remove-step-btn { flex-shrink: 0; padding: 8px 12px; font-size: 12.5px; }

.step-new-template-form {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-top: 4px;
  background: var(--paper);
}
.step-new-template-form input, .step-new-template-form textarea {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 13.5px;
  width: 100%;
}
.step-new-template-form textarea { min-height: 90px; resize: vertical; }
.step-new-template-form .notice { margin: 0; }

.range-filter-row, .range-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.range-filter-pill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.range-filter-pill.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

.stat-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.perf-stat-card { display: flex; flex-direction: column; gap: 6px; }
.perf-stat-num { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--ink); }
@media (max-width: 640px) { .stat-cards-row { grid-template-columns: 1fr; } }

.perf-row { gap: 8px; }
.perf-bar { width: 100%; height: 7px; margin-top: 2px; }

.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
}
.kanban-column { flex: 0 0 240px; display: flex; flex-direction: column; gap: 8px; }
.kanban-column-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px; }
.kanban-count { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-faint, var(--ink-soft)); }
.kanban-drop-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  padding: 8px;
  border-radius: 10px;
  background: var(--paper-raised);
  border: 1px dashed transparent;
}
.kanban-drop-zone-over { border-color: var(--brand); background: var(--brand-soft); }
.kanban-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: grab;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card-name { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.kanban-card-name:hover { text-decoration: underline; }
.kanban-card-meta { font-size: 11px; color: var(--ink-soft); }
.kanban-empty { font-size: 12px; color: var(--ink-faint, var(--ink-soft)); text-align: center; padding: 10px 0; margin: 0; }

@media (max-width: 640px) {
  .kanban-column { flex-basis: 200px; }
}

.state-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  overflow: hidden;
}
.state-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}
.state-summary::-webkit-details-marker { display: none; }
.state-summary-left { display: flex; align-items: center; gap: 8px; }
.state-summary-left::before {
  content: "▸";
  color: var(--ink-soft);
  font-size: 12px;
  transition: transform 0.15s ease;
}
.state-group[open] .state-summary-left::before { transform: rotate(90deg); }
.state-name { font-weight: 600; font-size: 14.5px; }
.state-abbr { font-size: 11.5px; color: var(--ink-soft); }
.state-meta { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.state-summary-right { display: flex; align-items: center; gap: 10px; }

.state-group .table-scroll { border: none; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.state-table { min-width: 0; }

/* A network's pharmacies, grouped under its own collapsible heading on
   the Supplier Management catalog list (above any standalone, un-
   networked pharmacy) — same .state-group rows as always nested inside,
   just gathered under a bigger, independently collapsible heading so it
   reads as "these all belong to this one supplier relationship" and can
   be tucked away once you've got more than a couple of networks. Mirrors
   .state-group/.state-summary's own box + chevron treatment rather than
   reusing those classes directly, since the bigger name text and the
   extra network-level trash button don't fit that pattern as-is. */
.pharmacy-network-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  overflow: hidden;
  margin-bottom: 16px;
}
.pharmacy-network-group-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
}
.pharmacy-network-group-header::-webkit-details-marker { display: none; }
.pharmacy-network-group-name-wrap { display: flex; align-items: center; gap: 8px; }
.pharmacy-network-group-name-wrap::before {
  content: "▸"; color: var(--ink-soft); font-size: 13px; transition: transform 0.15s ease;
}
.pharmacy-network-group[open] .pharmacy-network-group-name-wrap::before { transform: rotate(90deg); }
.pharmacy-network-group-name { font-weight: 700; font-size: 17px; }
.pharmacy-network-group-actions { display: flex; align-items: center; gap: 10px; }
.pharmacy-network-group-list { padding: 14px; border-top: 1px solid var(--line); }

.catalog-trash-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px;
  border: none; background: transparent; color: var(--ink-soft);
  font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.catalog-trash-btn:hover { background: var(--rust-bg); color: var(--rust); }

@media (max-width: 600px) {
  .pharmacy-network-group-name { font-size: 15.5px; }
}

.category-group { border-top: 1px solid var(--line); }
.category-group:first-of-type { border-top: none; }
.category-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 4px; cursor: pointer; list-style: none;
}
.category-summary::-webkit-details-marker { display: none; }
.category-summary-left { display: flex; align-items: center; gap: 8px; }
.category-summary-left::before {
  content: "▸"; color: var(--ink-soft); font-size: 11px; transition: transform 0.15s ease;
}
.category-group[open] .category-summary-left::before { transform: rotate(90deg); }
.category-name { font-weight: 600; font-size: 14px; }
.category-meta { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.category-group .table-scroll { margin: 4px 0 14px; }

.us-map-label {
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.us-map {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin-bottom: 28px;
}
.us-map-state {
  stroke: var(--paper);
  stroke-width: 1.5;
  transition: opacity 0.1s ease;
  cursor: pointer;
  /* Each state is a role="button" path, which Safari/WebKit gives its own
     default rectangular :focus ring on a plain mouse click regardless of
     :focus-visible — the same "outline draws around the bounding box, not
     the actual shape" problem noted below, just via a different pseudo-
     class our old fix didn't cover. Killed unconditionally here so a
     click never shows it, on any browser. */
  outline: none;
}
/* outline on an SVG shape draws around its rectangular bounding box, not
   the actual path — looks like a stray box floating over an irregularly
   shaped state. Mobile Safari also shows :focus-visible on a plain tap
   (most browsers reserve it for real keyboard nav), so without the media
   query below, every tap would show this ring — scoped to devices that
   actually have a mouse/keyboard so touch just gets the color-change +
   label update, and real keyboard tabbing still gets a visible (but
   shape-tracing, not box-shaped) ring via stroke. */
@media (hover: hover) and (pointer: fine) {
  .us-map-state:focus-visible { stroke: var(--brand); stroke-width: 3; }
}
.us-map-state:hover { opacity: 0.8; }
.us-map-state-searched { fill: var(--sage); }
.us-map-state-empty { fill: var(--neutral-bg); }

.discover-category-block { margin-bottom: 8px; }
.discover-category-summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none; padding: 10px 0;
}
.discover-category-summary::-webkit-details-marker { display: none; }
.discover-category-summary::before {
  content: "▸"; color: var(--ink-soft); font-size: 16px; transition: transform 0.15s ease;
}
.discover-category-block[open] > .discover-category-summary::before { transform: rotate(90deg); }
.discover-category-summary h2 { margin: 0; }
.discover-category-body { margin: 4px 0 24px; }

.job-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  padding: 18px;
  margin-bottom: 22px;
}
.job-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.job-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  flex-shrink: 0;
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.job-log {
  max-height: 220px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin: 0;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* ---------- Settings page ---------- */

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 720px) {
  .settings-grid { grid-template-columns: 1fr; }
}
.settings-grid .settings-card { margin-bottom: 0; }
/* Grid items default to min-width: auto, which means a 1fr track won't
   shrink below its content's own intrinsic minimum — a card holding a
   wide table (e.g. the generic <table> 920px min-width) blows its whole
   column out far past its fair 1fr share, squeezing or overflowing the
   other column instead of just letting that one card scroll internally.
   min-width: 0 here is what actually lets the 1fr sizing hold. */
.settings-grid > .settings-card { min-width: 0; }
/* The pending-invites table only ever holds Role/Created/Status — the
   generic <table> rule's 920px min-width (sized for real data tables
   elsewhere) was massively overkill here and, combined with the grid
   blowout above, is what made this whole card sprawl most of the way
   across the page with a big empty gap on the right. */
.invite-table { min-width: 0; width: 100%; }
.invite-table th:nth-child(1), .invite-table td:nth-child(1) { width: 30%; }
.invite-table th:nth-child(2), .invite-table td:nth-child(2) { width: 35%; }
.invite-table th:nth-child(3), .invite-table td:nth-child(3) { width: 35%; }

/* A network's CSV template column-mapping review (Supplier Management) —
   same min-width: 0 fix as .invite-table above, since this table's select
   dropdowns have no intrinsic width of their own to blow the layout out,
   but the base `table` rule's 920px min-width would still force an
   unnecessary horizontal scrollbar on a plain two-column mapping table. */
.csv-mapping-table { min-width: 0; width: 100%; }
.csv-mapping-table th:nth-child(1), .csv-mapping-table td:nth-child(1) { width: 55%; }
.csv-mapping-table th:nth-child(2), .csv-mapping-table td:nth-child(2) { width: 45%; }
.csv-mapping-table select { width: 100%; }

.settings-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px var(--shadow);
}
.settings-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.settings-card h2.create-lead-section { flex-basis: 100%; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.settings-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
  background: var(--brand-soft); font-size: 14px; line-height: 1;
}
.settings-note { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 14px; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.settings-row:first-of-type { border-top: none; }

.settings-danger-zone {
  margin-top: 18px;
  padding: 14px 14px 4px;
  border: 1px solid var(--rust);
  border-radius: 8px;
  background: var(--rust-bg);
}
.settings-danger-zone .settings-note { color: var(--ink); }

/* Small breakdown list above the hours-backfill picker, so it's clear
   at a glance where the gaps actually are before choosing a category. */
.backfill-breakdown {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 16px; padding: 4px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.backfill-breakdown-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 2px; font-size: 13px;
}
.backfill-form { align-items: flex-end; }

@media (max-width: 600px) {
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 0;
  }
  .settings-row-actions { flex-wrap: wrap; }
  .settings-card { padding: 16px; }
  .backfill-breakdown-row { font-size: 12.5px; }
}

/* ---------- Team page ---------- */

.team-stats { grid-template-columns: repeat(2, 1fr); max-width: 320px; margin-bottom: 14px; }

.team-member-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team-member-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.team-member-meta { font-size: 12.5px; color: var(--ink-soft); margin-left: auto; }
.team-member-edit-form, .user-edit-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.team-member-edit-form select, .user-edit-form input {
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light dark;
}
.user-edit-form input { width: 120px; }
.user-edit-form input[name="username"] { width: 140px; }
.team-lead-toggle {
  border: none;
  background: none;
  padding: 0;
}
.team-lead-toggle summary { padding: 8px 4px; }
.team-lead-toggle .table-scroll { margin-top: 6px; }

/* ---------- Calendar page ---------- */

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 18px;
}
.cal-month-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  min-width: 190px;
  text-align: center;
}
.cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: 18px;
  text-decoration: none;
  line-height: 1;
}
.cal-nav-btn:hover { border-color: var(--brand); color: var(--brand); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px var(--shadow);
  margin-bottom: 20px;
}
.cal-weekday {
  padding: 10px 4px;
  background: var(--paper-raised);
  text-align: center;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
}
.cal-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--paper-raised);
  border: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  padding: 4px;
}
.cal-day:hover { background: var(--brand-soft); }
.cal-day-out { color: var(--ink-soft); opacity: 0.4; }
.cal-day-today .cal-day-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}
.cal-day-has-bookings { font-weight: 600; }
.cal-day-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 10px;
  font-weight: 700;
}
.cal-day-selected { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }

.cal-detail {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  padding: 20px;
  min-height: 120px;
}
.cal-detail-placeholder { color: var(--ink-soft); font-size: 13.5px; text-align: center; margin: 30px 0; }
.cal-day-panel h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 12px;
}

@media (max-width: 640px) {
  .cal-day { font-size: 12px; }
  .cal-day-num { font-size: 12px; }
}

@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .wrap { padding: 24px 16px 60px; }
  .discover-form { flex-direction: column; align-items: stretch; }
  .field input { min-width: 0; }
  /* The desktop topbar is a 3-column "toggle | logo | icons" grid sized so
     the two 1fr side columns balance around a centered logo — fine when
     the toggle's two full-length labels fit in ~1/3 of the bar, but on a
     phone that content is wider than its own grid track and spills over
     the logo instead of shrinking (grid tracks don't shrink-wrap content).
     Below this width the toggle moves to its own full-width row under a
     left-aligned logo + right-aligned icons row instead of fighting for
     the same row. */
  .topbar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "wordmark . right" "toggle toggle toggle";
    row-gap: 10px;
    padding: 9px 16px;
  }
  .topbar-spacer { grid-area: toggle; justify-self: stretch; min-width: 0; }
  .topbar .wordmark { grid-area: wordmark; justify-self: start; font-size: 19px; gap: 0.2em; }
  .wordmark-rx { font-size: 0.68em; }
  .topbar-right { grid-area: right; }
  .mode-toggle { width: 100%; }
  .mode-toggle-option { flex: 1 1 0; justify-content: center; text-align: center; padding: 7px 6px; font-size: 11px; }
  .search-row input[type="search"] { flex: 1 1 100%; }
  .filter-panel { width: min(320px, calc(100vw - 48px)); }
  /* A centered title plus an absolutely-positioned corner button risks
     overlap once the title wraps to two lines at narrow widths — drop it
     into normal flow below the title instead. */
  .page-head-action { position: static; display: inline-flex; margin-top: 12px; }
  /* Bottom-right collides with .bulk-bar, which spans full width at this
     size (unlike the narrower centered bar on desktop) — float below the
     sticky tabbar instead, clear of both nav chrome and the bulk-bar. */
  .list-loading-spinner { bottom: auto; top: 166px; right: 14px; }
  /* Three side-by-side text inputs plus a Save button (386px) are wider
     than the screen inside a Manage Users member card — stack them
     instead of letting the card force horizontal scroll. */
  .user-edit-form { flex-direction: column; align-items: stretch; }
  /* Same overflow shape as the account-management row above: a fixed
     170px select + 70px input + a long pharmacy name in one row is wider
     than the screen. */
  .comp-plan-pharmacy-row { flex-wrap: wrap; }
  .comp-plan-pharmacy-row select { min-width: 0; flex: 1 1 140px; }
  /* Count text + a select + two buttons in one unwrapping row is wider
     than a phone screen — let it wrap to a second line instead of
     pushing the page into horizontal scroll. */
  .bulk-bar { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
}

/* ---------- Login page ---------- */

body.login-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}

.login-wrap { width: 100%; padding: 24px; }

.login-card {
  max-width: 360px;
  margin: 0 auto;
  padding: 36px 32px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 24px var(--shadow);
  text-align: center;
}

.login-card .tagline { margin-bottom: 24px; }

.booking-card { max-width: 560px; text-align: left; }
.booking-card .hero-logo { display: flex; justify-content: center; }
.booking-title { font-family: var(--font-display); font-size: 22px; text-align: center; margin: 4px 0 6px; }
.booking-card .tagline { text-align: center; }
.booking-card .add-user-form { flex-direction: column; align-items: stretch; }
.booking-day-groups { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.booking-day-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px; }
.booking-slot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.booking-slot-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.booking-slot-btn:hover { border-color: var(--brand); }
.booking-slot-btn.active { background: var(--brand); color: #ffffff; border-color: var(--brand); }

.booking-link-code { font-size: 11.5px; word-break: break-all; max-width: 220px; }
.home-purpose { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 10px; }

/* The logo art assumes a light backdrop (dark "ScriptBridge" text baked
   into the image) — this chip stays a fixed light color regardless of
   the app's own light/dark theme so the logo always reads correctly. */
.hero-logo {
  display: block;
  width: fit-content;
  background: #fefdfb;
  padding: 14px 22px;
  border-radius: 12px;
  margin: 0 auto 12px;
}
.hero-logo img { display: block; height: 72px; width: auto; }

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.login-submit { width: 100%; margin-top: 4px; }
.login-footnote { margin: 20px 0 0; text-align: center; }

.legal-card {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 44px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 24px var(--shadow);
  text-align: left;
}
.legal-card .tagline { text-align: center; }
.legal-updated { color: var(--ink-soft); font-size: 12.5px; text-align: center; margin: 0 0 28px; }
.legal-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 28px 0 8px;
}
.legal-card p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.legal-back { margin-top: 28px; text-align: center; font-size: 13.5px; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--ink-soft);
  font-size: 13px;
}
.login-divider::before, .login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s;
}
.btn-google:hover { background: var(--neutral-bg); box-shadow: 0 1px 4px var(--shadow); }

/* ---------- Lead detail page ---------- */

.lead-detail-back {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 14px;
}
.lead-detail-back:hover { color: var(--brand); }

.ajax-swappable { transition: opacity 0.15s ease; }
.ajax-swappable.lead-detail-loading { opacity: 0.6; pointer-events: none; }
.list-loading-spinner {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 4px 14px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.list-loading-spinner.visible { opacity: 1; }
.list-loading-spinner::after {
  content: "";
  width: 16px; height: 16px;
  border: 2.5px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .list-loading-spinner::after { animation-duration: 2.4s; }
}

.lead-detail-head { text-align: center; margin-bottom: 24px; }
.lead-detail-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  margin: 0 0 4px;
  text-wrap: balance;
}
.lead-detail-head-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.lead-detail-fav { display: inline-flex; }
.lead-detail-fav .fav-star { font-size: 22px; }

.lead-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
.lead-detail-main, .lead-detail-side { display: flex; flex-direction: column; gap: 18px; }

.lead-detail-dm-name { font-size: 17px; font-weight: 600; margin: 0; }
.lead-detail-dm-name .contact-title { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.lead-detail-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.lead-detail-field-row { display: flex; gap: 10px; }
.lead-detail-field-row .dm-edit-label { flex: 1; }
.lead-detail-edit-form .dm-edit-label input { font-size: 13.5px; padding: 8px 10px; }
.lead-detail-edit-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lead-detail-original { font-size: 11.5px; }

.lead-detail-contact-links { display: flex; flex-wrap: wrap; gap: 8px; }

.lead-detail-notes {
  width: 100%;
  min-height: 160px;
  font-family: inherit;
  font-size: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  margin-bottom: 10px;
}

.lead-detail-history { display: flex; flex-direction: column; gap: 10px; }
.lead-detail-history .history-entry { font-size: 12.5px; }

.activity-note-form { margin-bottom: 16px; }
.activity-feed { display: flex; flex-direction: column; gap: 12px; }
.activity-entry { display: flex; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.activity-entry:last-child { border-bottom: none; padding-bottom: 0; }
.activity-icon { flex-shrink: 0; font-size: 14px; line-height: 1.4; opacity: 0.85; }
.activity-body { min-width: 0; flex: 1; }
.activity-text { font-size: 13px; color: var(--ink); margin: 0 0 3px; white-space: pre-wrap; word-break: break-word; }
.activity-meta { font-size: 11px; color: var(--ink-soft); opacity: 0.8; margin: 0; }
.activity-history .activity-text { color: var(--ink-soft); }
.activity-open-pill { font-size: 10.5px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }

.lead-detail-score { gap: 12px; }
.lead-detail-score .score-bar { flex: 1 1 auto; width: auto; height: 8px; }
.lead-detail-score .score-num { font-size: 18px; flex-shrink: 0; }

.lead-detail-btn-list { display: flex; flex-direction: column; gap: 6px; }
.lead-detail-btn-list .disp-btn { width: 100%; text-align: left; font-size: 13px; padding: 9px 12px; }
.lead-detail-btn-active { box-shadow: inset 0 0 0 2px currentColor; }
.lead-detail-clear-form { margin-top: 10px; }

.lead-detail-book-form { display: flex; flex-direction: column; gap: 8px; }
.lead-detail-book-form input {
  padding: 8px 10px;
  font-size: 13.5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light dark;
}

@media (max-width: 760px) {
  .lead-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .lead-detail-field-row { flex-direction: column; }
}

/* ---------- Book / Note popups ---------- */

.lead-modal {
  border: none;
  border-radius: 12px;
  padding: 22px;
  width: min(380px, calc(100vw - 40px));
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.lead-modal::backdrop { background: rgba(0, 0, 0, 0.6); }
.lead-modal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 2px;
}
.lead-modal-subtitle { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 16px; }
.lead-modal-thread {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding-right: 4px;
}
.note-entry { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.note-entry:last-child { border-bottom: none; padding-bottom: 0; }
.note-entry-text { font-size: 13px; color: var(--ink); margin: 0 0 3px; white-space: pre-wrap; word-break: break-word; }
.note-entry-meta { font-size: 11px; color: var(--ink-soft); opacity: 0.8; margin: 0; }
.lead-detail-notes-thread { margin-bottom: 14px; }
.lead-modal-form { display: flex; flex-direction: column; gap: 12px; }
.lead-modal-form input, .lead-modal-form select {
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light dark;
  width: 100%;
}
.lead-modal-notes { min-height: 110px; margin-bottom: 0; }
.lead-modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.lead-modal-unbook { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.lead-modal-unbook .btn-undo { margin-top: 0; }
.email-compose-modal { width: min(640px, calc(100vw - 40px)); max-height: calc(100vh - 60px); overflow-y: auto; }
.stripe-modal { width: min(640px, calc(100vw - 40px)); max-height: calc(100vh - 60px); overflow-y: auto; }
#stripeModalMount { min-height: 320px; }

#searchSettingsModal { width: min(560px, calc(100vw - 40px)); max-height: calc(100vh - 60px); overflow-y: auto; }
.settings-category-group { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.settings-category-group summary { cursor: pointer; font-weight: 600; }
.keyword-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.keyword-list li {
  display: flex; align-items: center; gap: 6px;
  background: var(--neutral-bg); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12.5px;
}
.keyword-remove-btn {
  border: none; background: none; cursor: pointer; color: var(--ink-soft);
  font-size: 14px; line-height: 1; padding: 2px 4px;
}
.keyword-remove-btn:hover { color: var(--rust); }
.keyword-add-form { display: flex; gap: 8px; }
.keyword-add-form input { flex: 1; }

/* ---------- Fire Sale Mode ---------- */
.fire-sale-filter-form { max-width: 520px; margin: 0 auto; }
.fire-sale-filter-panel {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px; margin-bottom: 18px; text-align: left;
}
.fire-sale-start-btn { display: block; width: 100%; padding: 14px; font-size: 16px; }

.fire-sale-session { max-width: 460px; margin: 0 auto; }
.fire-sale-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fire-sale-progress { font-size: 13px; color: var(--ink-soft); font-weight: 600; }

/* touch-action: none on the stack used to block ALL touch gestures inside
   it, including the page's own vertical scroll — pan-y on the card itself
   (the only element pointer-drag listeners actually attach to) lets the
   browser keep handling vertical scrolling/panning natively; the JS drag
   logic only takes over (and only then calls setPointerCapture) once it's
   confirmed a gesture is more horizontal than vertical. pinch-zoom was
   tried here too (to stop a second finger from disturbing the drag) but
   caused a worse bug: once the page was actually zoomed out, the drag
   math (computed in unzoomed layout pixels) no longer matched on-screen
   finger movement and the card went haywire. A second touch is instead
   ignored directly in JS (isPrimary/pointerId checks below), so pinch-zoom
   is left off the card entirely — this is a single-purpose swipe surface
   with no real use for zooming anyway. */
.fire-sale-stack { position: relative; height: 62vh; min-height: 380px; }
.fire-sale-card {
  position: absolute; inset: 0;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 8px 28px var(--shadow);
  display: flex; flex-direction: column;
  cursor: grab; user-select: none; overflow: hidden;
  touch-action: pan-y;
}
.fire-sale-card:active { cursor: grabbing; }
.fire-sale-card-scroll {
  flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y;
  padding: 24px 24px 12px; display: flex; flex-direction: column; gap: 10px;
}
.fire-sale-card-category {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 600;
}
.fire-sale-card-name { font-family: var(--font-display); font-size: 26px; margin: 0; }
.fire-sale-card-address { color: var(--ink-soft); font-size: 14px; margin: 0; }
.fire-sale-card-contact { font-size: 14px; font-weight: 600; }
.fire-sale-edit-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.fire-sale-edit-fields .lead-detail-field-row { display: flex; gap: 8px; }
.fire-sale-notes-thread { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.fire-sale-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px; flex-shrink: 0; }
.fire-sale-card-score { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding: 0 24px 14px; flex-shrink: 0; }

.fire-sale-overlay {
  position: absolute; top: 24px; font-size: 44px; font-weight: 800;
  border: 4px solid currentColor; border-radius: 12px; padding: 4px 14px;
  opacity: 0; pointer-events: none; transform: rotate(-12deg);
}
.fire-sale-overlay-right { right: 20px; color: var(--sage); }
.fire-sale-overlay-left { left: 20px; color: var(--rust); transform: rotate(12deg); }

.fire-sale-buttons { display: flex; justify-content: center; gap: 28px; margin-top: 22px; }
.fire-sale-btn {
  width: 64px; height: 64px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 26px; font-weight: 700; box-shadow: 0 4px 14px var(--shadow);
}
.fire-sale-btn-left { background: var(--rust-bg); color: var(--rust); }
.fire-sale-btn-right { background: var(--sage-bg); color: var(--sage); }
.fire-sale-btn:hover { filter: brightness(0.96); }

.fire-sale-skip-row { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
.fire-sale-skip-row button:disabled { opacity: 0.4; cursor: default; }

.fire-sale-done { text-align: center; padding: 60px 20px; font-size: 16px; }
.fire-sale-disposition-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.fire-sale-disposition-btn { width: 100%; text-align: center; padding: 12px; font-size: 14.5px; }

/* ==========================================================================
   Public marketing site (logged-out home, about, partners, insights,
   careers) — everything below themes through the same :root custom
   properties as the CRM so light/dark stays consistent, but the layout
   classes are all new: the CRM's base.html shell (drawer, account menu,
   mode toggle) doesn't apply to a logged-out visitor.
   ========================================================================== */

.public-body { background: var(--paper); color: var(--ink); margin: 0; position: relative; }

/* Scroll-reveal: elements start hidden/offset and the IntersectionObserver
   in public_base.html adds .is-visible the first time each one crosses
   into the viewport — a one-way reveal (never re-hides on scroll back up),
   matching the "things pop in as you scroll" feel of reuprx.com/
   verifiedrxsolutions.com without pulling in an animation library for it. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * { transition-delay: calc(var(--reveal-i, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.public-gradient-text {
  background: linear-gradient(120deg, var(--brand), var(--sage) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.public-nav-wrap { position: sticky; top: 16px; z-index: 20; padding: 0 20px; }
.public-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px 12px 12px 22px; max-width: 1080px; margin: 0 auto;
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: 0 10px 30px var(--shadow);
}
.public-nav-links { display: flex; align-items: center; gap: 28px; }
.public-nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 600; }
.public-nav-links a:hover, .public-nav-links a.active { color: var(--brand); }
.public-nav-right { display: flex; align-items: center; gap: 10px; }
.public-rep-login { padding: 10px 20px; font-size: 13.5px; white-space: nowrap; border-radius: 999px; }
/* Client Login sits beside Rep Login as the quieter outlined option; on
   phones (<=860px) it moves into the hamburger menu instead, where
   .public-nav-client-link (hidden on desktop) takes over. */
.public-client-login {
  padding: 9px 18px; font-size: 13.5px; font-weight: 600; white-space: nowrap; border-radius: 999px;
  color: var(--ink); text-decoration: none; border: 1.5px solid var(--line);
  background: transparent; transition: border-color 0.15s ease, color 0.15s ease;
}
.public-client-login:hover { border-color: var(--brand); color: var(--brand); }
.public-nav-links .public-nav-client-link { display: none; }
.public-nav-toggle { display: none; background: none; border: none; color: var(--ink); cursor: pointer; padding: 6px; }

@media (max-width: 860px) {
  .public-nav-wrap { top: 12px; padding: 0 14px; }
  .public-nav-links {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper-raised); border: 1px solid var(--line);
    border-radius: 20px; box-shadow: 0 10px 30px var(--shadow);
    padding: 8px; overflow: hidden;
  }
  .public-nav-links.open { display: flex; }
  .public-nav-links a { padding: 12px 18px; border-radius: 12px; }
  .public-nav-links a:hover, .public-nav-links a.active { background: var(--brand-soft); }
  .public-nav-toggle { display: block; }
  .public-client-login { display: none; }
  .public-nav-links .public-nav-client-link { display: block; }
  /* The wordmark + Rep Login button + theme toggle + hamburger alone (no
     nav links visible at this width) still don't fit a narrow phone at
     full desktop size — shrink them the same way the CRM's own topbar
     shrinks .wordmark on mobile (static/css/style.css, .topbar .wordmark). */
  .public-nav { gap: 4px; padding: 8px 8px 8px 16px; }
  .public-nav .wordmark { font-size: 17px; gap: 0.2em; }
  .public-nav-right { gap: 4px; }
  .public-rep-login { padding: 8px 10px; font-size: 12px; }
}

@media (max-width: 360px) {
  /* Still doesn't fit on the smallest real phones (iPhone SE-width, 320px)
     even shrunk — drop the wordmark's text entirely and keep just the logo
     mark as a compact home link, same idea as an app favicon standing in
     for a full logo at the smallest sizes. */
  .public-nav .wordmark span { display: none; }
  .public-nav .icon-btn, .public-nav-toggle { width: 28px; height: 28px; }
  .public-rep-login { padding: 7px 9px; font-size: 11.5px; }
}

.public-main { max-width: 1080px; margin: 0 auto; padding: 0 44px; }
.public-main > .public-section:first-child,
.public-main > .public-hero:first-child { margin-top: 8px; }

.public-hero { padding: 88px 0 56px; max-width: 720px; }
.public-hero-split { max-width: none; display: flex; align-items: center; gap: 40px; }
.public-hero-content { flex: 1; min-width: 0; max-width: 640px; }

/* The homepage hero's animated "hub" visual: a big centered version of the
   logo mark with soft pulse rings and four orbiting solution-icon nodes,
   each gently bobbing on its own offset timer so the motion reads as
   organic rather than perfectly synced. Every node/hub is split into a
   static positioning wrapper (left/top via margin, never transform) plus
   an inner element that owns the animation's transform exclusively, so
   the fixed layout position and the animated offset never fight over the
   same CSS property. */
.public-hero-visual { display: none; position: relative; width: 380px; height: 380px; flex-shrink: 0; }
.public-hero-visual-ring {
  position: absolute; top: 50%; left: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px;
  border-radius: 50%; border: 1px solid var(--line); pointer-events: none;
}
.public-hero-visual-ring-2 { width: 330px; height: 330px; margin: -165px 0 0 -165px; opacity: 0.6; }
.public-hero-visual-hub-wrap { position: absolute; top: 50%; left: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; }
.public-hero-visual-hub {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--paper-raised); border: 2px solid var(--line); box-shadow: 0 20px 50px var(--shadow);
  display: flex; align-items: center; justify-content: center;
  animation: public-bob-hub 5s ease-in-out infinite;
}
.public-hero-visual-hub img { width: 58%; height: auto; }
.public-hero-visual-node { position: absolute; width: 52px; height: 52px; }
.public-hero-visual-node-top { top: 0; left: 50%; margin-left: -26px; }
.public-hero-visual-node-right { top: 50%; right: 0; margin-top: -26px; }
.public-hero-visual-node-bottom { bottom: 0; left: 50%; margin-left: -26px; }
.public-hero-visual-node-left { top: 50%; left: 0; margin-top: -26px; }
.public-hero-visual-node-float {
  width: 100%; height: 100%; border-radius: 14px;
  background: var(--paper-raised); border: 1px solid var(--line); box-shadow: 0 8px 20px var(--shadow);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  animation: public-bob 4s ease-in-out infinite;
}
.public-hero-visual-node-right .public-hero-visual-node-float { animation-delay: 0.7s; }
.public-hero-visual-node-bottom .public-hero-visual-node-float { animation-delay: 1.4s; }
.public-hero-visual-node-left .public-hero-visual-node-float { animation-delay: 2.1s; }
.public-hero-visual-line { position: absolute; background: var(--line); }
.public-hero-visual-line-top { top: 52px; left: 190px; width: 1px; height: 53px; }
.public-hero-visual-line-right { top: 190px; left: 275px; width: 53px; height: 1px; }
.public-hero-visual-line-bottom { top: 275px; left: 190px; width: 1px; height: 53px; }
.public-hero-visual-line-left { top: 190px; left: 52px; width: 53px; height: 1px; }

@keyframes public-bob-hub {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes public-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .public-hero-visual-hub, .public-hero-visual-node-float { animation: none; }
}
@media (min-width: 980px) {
  .public-hero-visual { display: block; }
}
.public-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; font-weight: 700;
  color: var(--ink-soft); margin: 0 0 24px; padding: 8px 18px 8px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper-raised);
}
.public-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.public-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 60px; line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 22px;
}
.public-hero-sub { font-size: 17px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 32px; max-width: 560px; }
.public-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }

.public-cta, .public-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 28px; font-size: 15px; font-weight: 700; border-radius: 999px;
  text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.public-cta {
  background: linear-gradient(120deg, var(--brand), var(--sage) 160%);
  color: #1c1408; border: none; box-shadow: 0 10px 24px var(--shadow);
}
.public-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px var(--shadow); }
.public-cta-secondary { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); }
.public-cta-secondary:hover { transform: translateY(-2px); border-color: var(--brand); }

.public-trust-row { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.public-trust-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.public-trust-item::before { content: "✓"; display: inline-flex; color: var(--sage); font-weight: 700; }

.public-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.public-stat { display: flex; flex-direction: column; gap: 6px; text-align: center; padding: 0 16px; border-left: 1px solid var(--line); }
.public-stat:first-child { border-left: none; }
.public-stat-num { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--ink); line-height: 1; }
.public-stat-label { font-size: 13px; color: var(--ink-soft); }

.public-section { padding: 72px 0; }

/* Full-bleed version of the glow wash, for the contact section — same
   idea as .public-section-dark below (edge-to-edge, not capped to the
   1080px content column) but keeping the light glossy gradient instead
   of solid black. Contained glow only colored roughly the right half
   of the section here (the gradient anchors near one corner, and the
   section's own box was the narrow content column), leaving the left
   half looking like plain white next to it with a visible seam right
   where the form sits — this spans the gradient the full width instead
   so the whole section reads as one consistent surface. */
.public-section-glow-bleed {
  position: relative; isolation: isolate;
  padding: 0; margin: 0 calc(50% - 50vw); overflow: hidden;
}
.public-section-glow-bleed .public-main { padding-top: 72px; padding-bottom: 72px; }
.public-section-glow-bleed::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 140% at 90% 0%, color-mix(in srgb, var(--sage) 15%, transparent), transparent 65%),
    radial-gradient(70% 140% at 10% 100%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 65%),
    var(--brand-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .public-section-glow-bleed::before {
    background:
      radial-gradient(70% 140% at 90% 0%, color-mix(in srgb, var(--sage) 22%, transparent), transparent 65%),
      radial-gradient(70% 140% at 10% 100%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 65%),
      var(--brand-soft);
  }
}
:root[data-theme="dark"] .public-section-glow-bleed::before {
  background:
    radial-gradient(70% 140% at 90% 0%, color-mix(in srgb, var(--sage) 22%, transparent), transparent 65%),
    radial-gradient(70% 140% at 10% 100%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 65%),
    var(--brand-soft);
}
@media (max-width: 720px) {
  .public-section-glow-bleed .public-main { padding-top: 48px; padding-bottom: 48px; }
}

/* Full-bleed dark band — brought back deliberately for just this one
   homepage section, not site-wide, after the softer .public-section-glow
   treatment above replaced it everywhere else. Kept to a single section
   so the page still has variety (most sections stay the light glow
   wash) instead of the wall-to-wall alternating dark/tint blocks that
   got flagged as ugly before. The side DNA rail continues visibly
   through this band via .public-dna-rail-inline below, instead of just
   vanishing behind a solid color where the band starts/ends. */
.public-section-dark {
  /* Deliberately literal colors, not the --ink/--paper tokens: those
     flip meaning between light and dark site themes (that's what makes
     the rest of the page invert), which would turn this into a pale
     box in the middle of an otherwise dark-themed page — the opposite
     of "smooth, not weird." This band stays the same dark regardless
     of the site's own light/dark toggle. */
  --sd-bg: #17140f; --sd-fg: #f5f0e6; --sd-brand: #d9ae42; --sd-sage: #4fd88a;
  position: relative; isolation: isolate; color: var(--sd-fg);
  padding: 0; margin: 0 calc(50% - 50vw); background: var(--sd-bg); overflow: hidden;
}
.public-section-dark .public-main { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; }
.public-section-dark .public-eyebrow {
  background: color-mix(in srgb, var(--sd-fg) 10%, transparent);
  border-color: color-mix(in srgb, var(--sd-fg) 20%, transparent); color: var(--sd-fg);
}
.public-section-dark .public-section-sub { color: color-mix(in srgb, var(--sd-fg) 70%, transparent); }
.public-section-dark .public-badge {
  background: color-mix(in srgb, var(--sd-fg) 8%, transparent);
  border-color: color-mix(in srgb, var(--sd-fg) 20%, transparent); color: var(--sd-fg);
}
.public-section-dark .public-badge::before { background: var(--sd-brand); }
.public-section-dark .public-marquee-item {
  background: color-mix(in srgb, var(--sd-fg) 8%, transparent);
  border-color: color-mix(in srgb, var(--sd-fg) 22%, transparent); color: var(--sd-fg);
}
.public-section-dark .public-marquee-item em { color: var(--sd-brand); }
.public-section-dark .public-eyebrow::before { background: var(--sd-brand); }
.public-section-dark .public-icon-card, .public-section-dark .public-solution-card,
.public-section-dark .public-value-card, .public-section-dark .public-team-card {
  background: color-mix(in srgb, var(--sd-fg) 8%, transparent);
  border-color: color-mix(in srgb, var(--sd-fg) 16%, transparent);
}
.public-section-dark .public-icon-card p, .public-section-dark .public-solution-card p,
.public-section-dark .public-value-card p, .public-section-dark .public-team-card p {
  color: color-mix(in srgb, var(--sd-fg) 65%, transparent);
}
.public-section-dark .public-faq-item { border-color: color-mix(in srgb, var(--sd-fg) 18%, transparent); }
.public-section-dark .public-faq-item p { color: color-mix(in srgb, var(--sd-fg) 70%, transparent); }

@media (max-width: 720px) {
  .public-section-dark .public-main { padding-top: 48px; padding-bottom: 48px; }
}

.public-main h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 34px; line-height: 1.12; letter-spacing: -0.005em; margin: 0 0 16px; max-width: 640px;
}
.public-section-sub { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; max-width: 640px; margin: 0 0 24px; }

.public-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.public-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink);
  font-size: 12.5px; font-weight: 600; padding: 8px 16px 8px 14px; border-radius: 999px;
}
.public-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }

.public-icon-grid, .public-solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.public-icon-card, .public-solution-card, .public-value-card, .public-team-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; box-shadow: 0 4px 14px var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.public-icon-card:hover, .public-solution-card:hover, .public-value-card:hover, .public-team-card:hover {
  transform: translateY(-4px); box-shadow: 0 14px 30px var(--shadow);
}
.public-icon-card-mark {
  width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px;
}
.public-solution-card h3, .public-icon-card h3 { font-size: 16.5px; margin: 0 0 8px; }
.public-solution-card p, .public-icon-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* Infinite "marquee" strip of chips, continuously sliding right to left,
   never stopping — a quiet way to fill a wide section's empty horizontal
   space with motion instead of blank background. Pure CSS: the track
   holds the chip list twice back to back, and animating exactly -50% of
   its own width loops seamlessly since the second copy picks up right
   where the first one's translation "resets." A soft edge mask keeps
   chips from clipping abruptly as they enter/exit. Purely decorative
   (the same info is already in the paragraph above it), so the whole
   thing is hidden from assistive tech rather than read out twice. */
.public-marquee {
  margin-top: 32px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.public-marquee-track { display: flex; gap: 12px; width: max-content; animation: public-marquee-scroll 34s linear infinite; }
.public-marquee-item {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; flex-shrink: 0;
  padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper-raised); font-size: 13px; font-weight: 600; color: var(--ink);
}
.public-marquee-item em { font-style: normal; font-weight: 700; font-size: 11.5px; color: var(--brand); }
@keyframes public-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .public-marquee-track { animation: none; } }

/* Horizontally scrolling solutions carousel: auto-advances slowly and
   loops, with manual arrows that nudge it one card at a time. The
   scrolling itself is native horizontal scroll (not a transform
   animation) so it stays perfectly in sync with the arrow buttons and
   any manual drag/trackpad scroll a visitor does themselves. */
.public-carousel-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.public-carousel-nav { display: flex; gap: 10px; flex-shrink: 0; margin-bottom: 6px; }
.public-carousel-arrow {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.public-carousel-arrow:hover { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.public-carousel { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-top: 28px; }
.public-carousel::-webkit-scrollbar { display: none; }
.public-carousel-track { display: flex; gap: 18px; }
.public-carousel-track .public-solution-card { flex: 0 0 300px; scroll-snap-align: start; }

.public-contact-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.public-contact-form .lead-detail-field-row { gap: 16px; }
.public-checkbox-group { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.public-checkbox-group legend { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); padding: 0 4px; }
.public-checkbox-group label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.public-form-fineprint { font-size: 12px; color: var(--ink-soft); margin: 0; }

.public-team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.public-team-card h3 { margin: 0 0 4px; font-size: 15px; }
.public-team-card .public-team-role { font-size: 12px; color: var(--brand); font-weight: 600; margin: 0 0 10px; }
.public-team-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

.public-insights-list { display: flex; flex-direction: column; gap: 0; }
.public-insight-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.public-insight-source { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand); }
.public-insight-title { font-size: 14.5px; margin: 4px 0 0; }
.public-insight-date { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

.public-value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.public-value-card h3 { font-size: 15px; margin: 0 0 8px; }
.public-value-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.public-qualifications-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.public-qualifications-list li { font-size: 14px; padding-left: 22px; position: relative; }
.public-qualifications-list li::before { content: "✓"; position: absolute; left: 0; color: var(--sage); font-weight: 700; }

@media (max-width: 720px) {
  .public-main { padding: 0 22px; }
  .public-hero { padding: 56px 0 40px; }
  .public-hero h1 { font-size: 38px; }
  .public-section { padding: 48px 0; }
  .public-section h2 { font-size: 26px; }
  .public-stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .public-stat:nth-child(2n+1) { border-left: none; }
  .public-icon-grid, .public-solutions-grid, .public-team-grid, .public-value-grid { grid-template-columns: 1fr; }
  .public-contact-form .lead-detail-field-row { flex-direction: column; }
  .public-insight-row { flex-direction: column; gap: 4px; }
  .public-carousel-track .public-solution-card { flex-basis: 250px; }
  .public-marquee-item { padding: 8px 14px; font-size: 12px; }
}

/* No margin-top here — every section above it (.public-section,
   .public-section-dark, .public-section-glow-bleed) already ends in its
   own generous bottom padding, so stacking another 40px on top of that
   left an oversized, purposeless-looking gap before the footer starts,
   most noticeable right after a full-bleed section's own color block
   fades out (e.g. Careers' apply form). */
.public-footer {
  --pf-bg: #17140f; --pf-fg: #f5f0e6; --pf-brand: #d9ae42;
  background: var(--pf-bg); color: var(--pf-fg);
}
.public-footer-inner { max-width: 1160px; margin: 0 auto; padding: 56px 32px 28px; }
.public-footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.public-footer-about { max-width: 320px; }
.public-footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--pf-fg); }
.public-footer-brand em { font-style: normal; color: var(--pf-brand); }
.public-footer-tagline { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--pf-fg) 65%, transparent); }
.public-footer-col h4 {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--pf-fg) 55%, transparent);
}
.public-footer-col { display: flex; flex-direction: column; gap: 10px; }
.public-footer-col a {
  font-size: 13.5px; color: color-mix(in srgb, var(--pf-fg) 82%, transparent); text-decoration: none; width: fit-content;
}
.public-footer-col a:hover { color: var(--pf-brand); }
.public-footer-bottom {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--pf-fg) 14%, transparent);
}
.public-footer-copy { font-size: 12px; margin: 0; color: color-mix(in srgb, var(--pf-fg) 55%, transparent); }
@media (max-width: 800px) {
  .public-footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .public-footer-about { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 480px) {
  .public-footer-top { grid-template-columns: 1fr; }
}

.public-thesis {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1.35; max-width: 760px; margin: 0;
}

.public-faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.public-faq-item {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px;
  padding: 4px 22px;
}
.public-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-size: 15.5px; font-weight: 600; cursor: pointer; list-style: none;
}
.public-faq-item summary::-webkit-details-marker { display: none; }
.public-faq-item summary::after {
  content: "+"; font-size: 22px; font-weight: 400; color: var(--brand); flex-shrink: 0;
  transition: transform 0.2s ease;
}
.public-faq-item[open] summary::after { transform: rotate(45deg); }
.public-faq-item p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px; }

@media (max-width: 720px) {
  .public-thesis { font-size: 22px; }
}

/* Decorative DNA-helix rail filling the empty side margins on wide
   screens, echoing the double-helix in the logo. Absolutely positioned
   against .public-body (spanning the full document height, not just
   the viewport) so it scrolls along with the page at the same rate as
   everything else — it was `position: fixed` before, which pinned it
   to the viewport while the page (including the full-bleed dark band)
   scrolled past it; the two moving at different rates looked jarring
   right where the dark band's edges crossed the rail. A full,
   multi-strand column (several helices tiled side by side, repeating
   top to bottom the whole page) rather than one thin line, so the
   margin actually reads as intentional decoration instead of empty
   space — but it stays a two-tone brand/sage gradient at a restrained
   opacity so it never competes with the page content. A CSS mask (not
   a plain background-image) so the shape tints with the gradient and
   adapts automatically between light and dark mode — dark mode gets a
   touch more opacity since the same gold reads fainter against
   near-black. Width is fluid (the actual gutter outside .public-main's
   1080px column, minus a small inset so it never touches the content),
   not a fixed pixel value — on a very wide monitor a fixed width left
   a big plain strip of nothing between the rail and the content, which
   is exactly the dead space this rail exists to avoid. Capped so it
   doesn't become absurdly wide on an ultrawide display. Only shown
   once the viewport is wide enough for a real gutter to exist. It
   paints behind everything, including the full-bleed dark band later
   in the page — that band's own solid background naturally covers it
   for its own height, the same way any other opaque section content
   already does, rather than a separate rail needing to be drawn again. */
.public-dna-rail {
  display: none; position: absolute; top: 0; bottom: 0; z-index: -1; pointer-events: none;
  width: min(calc((100vw - 1080px) / 2 - 24px), 420px);
  background: linear-gradient(165deg, var(--brand), var(--sage)); opacity: 0.13;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: 52px 112px; mask-size: 52px 112px;
  -webkit-mask-position: top left; mask-position: top left;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 100'%3E%3Cpath d='M9,0 C9,17 27,33 27,50 C27,67 9,83 9,100' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M27,0 C27,17 9,33 9,50 C9,67 27,83 27,100' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='8' r='2.2'/%3E%3Ccircle cx='27' cy='8' r='2.2'/%3E%3Ccircle cx='9' cy='42' r='2.2'/%3E%3Ccircle cx='27' cy='42' r='2.2'/%3E%3Ccircle cx='9' cy='58' r='2.2'/%3E%3Ccircle cx='27' cy='58' r='2.2'/%3E%3Ccircle cx='9' cy='92' r='2.2'/%3E%3Ccircle cx='27' cy='92' r='2.2'/%3E%3Cline x1='9' y1='8' x2='27' y2='8' stroke='black' stroke-width='2.5'/%3E%3Cline x1='9' y1='42' x2='27' y2='42' stroke='black' stroke-width='2.5'/%3E%3Cline x1='9' y1='58' x2='27' y2='58' stroke='black' stroke-width='2.5'/%3E%3Cline x1='9' y1='92' x2='27' y2='92' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 100'%3E%3Cpath d='M9,0 C9,17 27,33 27,50 C27,67 9,83 9,100' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M27,0 C27,17 9,33 9,50 C9,67 27,83 27,100' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='8' r='2.2'/%3E%3Ccircle cx='27' cy='8' r='2.2'/%3E%3Ccircle cx='9' cy='42' r='2.2'/%3E%3Ccircle cx='27' cy='42' r='2.2'/%3E%3Ccircle cx='9' cy='58' r='2.2'/%3E%3Ccircle cx='27' cy='58' r='2.2'/%3E%3Ccircle cx='9' cy='92' r='2.2'/%3E%3Ccircle cx='27' cy='92' r='2.2'/%3E%3Cline x1='9' y1='8' x2='27' y2='8' stroke='black' stroke-width='2.5'/%3E%3Cline x1='9' y1='42' x2='27' y2='42' stroke='black' stroke-width='2.5'/%3E%3Cline x1='9' y1='58' x2='27' y2='58' stroke='black' stroke-width='2.5'/%3E%3Cline x1='9' y1='92' x2='27' y2='92' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
}
.public-dna-rail-left { left: 0; }
.public-dna-rail-right { right: 0; transform: scaleX(-1); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .public-dna-rail { opacity: 0.27; }
}
:root[data-theme="dark"] .public-dna-rail { opacity: 0.27; }

@media (min-width: 1500px) {
  .public-dna-rail { display: block; }
}

/* Client portal (public site, signed-in client) — the account info cards
   and the read-only pricing table. */
.client-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 10px; }
.client-info-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--paper-raised); }
.client-info-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 8px; }
.client-info-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.client-pricing-table { min-width: 0; width: 100%; }
.client-pricing-table .client-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  .client-info-grid { grid-template-columns: 1fr; }
  .client-pricing-table thead th, .client-pricing-table tbody td { padding: 10px 8px; font-size: 12.5px; }
}

/* ======================================================================
   Partner portal (the Bridge ordering side). Built on the app's own theme
   variables, so it follows the light/dark toggle like everything else:
   header + quick-link rail + Main Menu sidebar + a tile dashboard.
   ====================================================================== */
.portal-body { min-height: 100vh; }
.portal-topbar {
  position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 14px;
  padding: 0 18px; background: var(--paper-raised); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 8px var(--shadow);
}
.portal-wordmark { justify-self: auto; font-size: 24px; flex-shrink: 0; }
.portal-menu-toggle { display: none; flex-shrink: 0; }
.portal-search { flex: 1 1 auto; max-width: 520px; margin: 0 auto; display: flex; }
.portal-search input {
  flex: 1; min-width: 0; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-right: none; border-radius: 8px 0 0 8px;
}
.portal-search input:focus { outline: none; border-color: var(--brand); }
.portal-search-btn {
  width: 42px; border: 1px solid var(--brand); background: var(--brand-shine); color: #1c1917;
  border-radius: 0 8px 8px 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.portal-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.portal-cart-link {
  position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 34px;
  color: var(--ink); text-decoration: none; border-radius: 8px;
}
.portal-cart-link:hover { color: var(--brand); }
.portal-cart-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--brand); color: var(--paper-raised); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.portal-shell { display: flex; min-height: calc(100vh - 60px); }

.portal-chip {
  display: block; padding: 7px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.portal-main { flex: 1; min-width: 0; padding: 26px 32px 60px; max-width: 1180px; margin: 0 auto; }
.portal-preview-note { margin-bottom: 18px; }
.portal-welcome, .portal-pagehead { margin-bottom: 22px; }
.portal-eyebrow { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.portal-welcome h1, .portal-pagehead h1 { font-family: var(--font-display); font-size: 30px; margin: 0 0 6px; }
.portal-sub { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.portal-fine { font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 0; }
.portal-count { font-size: 13px; color: var(--ink-soft); margin: 4px 0 12px; }

.portal-section { margin-bottom: 30px; scroll-margin-top: 80px; }
.portal-section-title { font-family: var(--font-display); font-size: 20px; margin: 0 0 12px; }
.portal-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.portal-tile {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px; text-decoration: none; color: inherit;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.portal-tile:hover { border-color: var(--brand); box-shadow: 0 6px 18px var(--shadow); transform: translateY(-1px); }
.portal-tile-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.portal-tile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.portal-tile-title { font-weight: 700; font-size: 15px; color: var(--brand); }
.portal-tile-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.portal-tile-soon { opacity: 0.8; }
.portal-soon-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); background: var(--neutral-bg); border-radius: 999px; vertical-align: middle;
}

.portal-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.portal-filters input, .portal-filters select {
  padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: 8px;
}
.portal-filters input[type=search] { flex: 1 1 240px; min-width: 0; }
.portal-filters select { max-width: 220px; }
.portal-clear { font-size: 13px; color: var(--ink-soft); }

.portal-cat { padding: 4px 14px 14px; }
.portal-cat .category-name { margin: 12px 0 8px; font-size: 14px; }
.portal-table { min-width: 0; width: 100%; }
.portal-table tbody td { padding: 10px 12px; font-size: 13.5px; vertical-align: middle; }
.portal-table thead th { padding: 10px 12px; }
.portal-product { font-weight: 700; }
.portal-col-price { text-align: right; white-space: nowrap; }
.portal-col-qty { width: 92px; text-align: center; }
.portal-col-star { width: 40px; text-align: center; padding-right: 0; }
.portal-col-add { width: 150px; text-align: right; white-space: nowrap; }
.portal-qty-input {
  width: 52px; padding: 6px 4px; font: inherit; font-size: 13.5px; text-align: center; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 7px; font-variant-numeric: tabular-nums;
}
.portal-qty-input:focus { outline: none; border-color: var(--brand); }
.portal-fav-btn { border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink-soft); opacity: 0.45; padding: 2px 4px; }
.portal-fav-btn:hover { color: var(--brand); opacity: 1; }
.portal-fav-btn.on { color: var(--brand); opacity: 1; }
.portal-fav-btn:disabled, .portal-add-btn:disabled { opacity: 0.5; cursor: default; }
.portal-remove-btn { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 20px; line-height: 1; padding: 2px 8px; border-radius: 6px; }
.portal-remove-btn:hover { background: var(--rust-bg); color: var(--rust); }
.portal-line-total { font-weight: 700; font-variant-numeric: tabular-nums; }

.portal-cart-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 18px; flex-wrap: wrap; }
.portal-cart-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.portal-inline-form { display: flex; gap: 8px; }
.portal-inline-form input {
  padding: 7px 10px; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: 8px; width: 220px; max-width: 100%;
}
.portal-cart-summary { min-width: 280px; max-width: 360px; padding: 18px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px var(--shadow); }
.portal-subtotal-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.portal-subtotal { font-family: var(--font-display); font-size: 32px; font-weight: 700; margin: 2px 0 10px; font-variant-numeric: tabular-nums; }
.portal-order-btn { width: 100%; opacity: 0.55; cursor: not-allowed; }

.portal-saved-cart { align-items: flex-start; }
.portal-saved-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.portal-saved-actions form { margin: 0; }

.portal-soon-card { max-width: 520px; padding: 36px 30px; text-align: center; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; }
.portal-soon-icon { font-size: 40px; margin-bottom: 8px; }
.portal-soon-card h2 { font-family: var(--font-display); margin: 0 0 8px; }
.portal-soon-card p { color: var(--ink-soft); }

.portal-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; z-index: 60;
  background: var(--ink); color: var(--paper); transition: opacity 0.2s ease, transform 0.2s ease;
}
.portal-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.portal-toast.error { background: var(--rust); color: #fff; }

@media (max-width: 1000px) {
  .portal-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .portal-menu-toggle { display: flex; }
  .portal-main { padding: 20px 16px 50px; }
  .portal-topbar { gap: 8px; padding: 0 12px; }
  .portal-wordmark { font-size: 20px; }
}
/* The portal uses the same right-hand icon rail as the rep side; its top bar is 60px tall. */
body.portal-body { --rail-top: 60px; }
@media (min-width: 900px) {
  body.portal-body.has-rail .portal-topbar { margin-right: calc(-1 * var(--rail-w)); }
  body.portal-body .portal-shell { min-height: calc(100vh - 60px); }
}
@media (max-width: 600px) {
  .portal-tiles { grid-template-columns: 1fr; }
  .portal-col-add { width: auto; }
  .portal-table thead th, .portal-table tbody td { padding: 8px 6px; font-size: 12.5px; }
  .portal-add-btn { padding: 6px 10px; font-size: 12px; }
  .portal-cart-summary { max-width: none; width: 100%; }
}
.portal-link-btn { border: none; background: transparent; padding: 6px 2px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.portal-link-btn:hover { color: var(--brand); }
.portal-product-sub { display: none; font-weight: 400; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 860px) {
  .portal-search { min-width: 0; margin: 0; flex: 1 1 0; }
  .portal-topbar-right { gap: 4px; }
  .portal-topbar-right .icon-btn { width: 32px; height: 32px; }
}
@media (max-width: 600px) {
  /* Cart on a phone: product (with its details underneath), qty, total, remove. */
  .portal-cart-table th:nth-child(2), .portal-cart-table td:nth-child(2),
  .portal-cart-table th:nth-child(3), .portal-cart-table td:nth-child(3),
  .portal-cart-table th:nth-child(4), .portal-cart-table td:nth-child(4),
  .portal-cart-table th:nth-child(5), .portal-cart-table td:nth-child(5) { display: none; }
  .portal-cart-table .portal-product-sub { display: block; }
  .portal-qty-input { width: 56px; }
}


/* ---- Portal polish: stepper, in-cart badge, live filters, cart groups ---- */
.portal-main { animation: portal-fade 0.18s ease-out; }
@keyframes portal-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .portal-main { animation: none; } .portal-tile, .portal-toast { transition: none; } }
.portal-body a:focus-visible, .portal-body button:focus-visible, .portal-body input:focus-visible, .portal-body select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

.portal-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.portal-stepper .portal-qty-input { border: none; border-radius: 0; width: 46px; background: transparent; -moz-appearance: textfield; padding: 6px 2px; }
.portal-stepper .portal-qty-input::-webkit-outer-spin-button, .portal-stepper .portal-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.portal-step { width: 28px; border: none; background: transparent; color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.portal-step:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.portal-step:disabled { opacity: 0.4; cursor: default; }
.portal-col-qty { width: 128px; }

.portal-in-cart { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: var(--sage); background: var(--sage-bg); border-radius: 999px; vertical-align: middle; }
.portal-in-cart[hidden] { display: none; }
.portal-add-btn { min-width: 74px; transition: filter 0.15s ease, transform 0.1s ease; }
.portal-add-btn:active:not(:disabled) { transform: scale(0.97); }
.portal-add-btn.is-added { filter: saturate(0.6) brightness(1.05); }
.portal-table tbody tr { transition: background 0.2s ease, opacity 0.2s ease; }
.portal-table tbody tr:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.portal-row-flash { background: var(--sage-bg) !important; }
.portal-row-out { opacity: 0; }
.portal-table tbody td.portal-col-price { font-weight: 700; font-variant-numeric: tabular-nums; }

.portal-sticky { position: sticky; top: 60px; z-index: 5; padding: 10px 0; background: var(--paper); margin-bottom: 4px; }
.portal-filter-tools { margin-left: auto; display: flex; gap: 12px; }
.portal-count { min-height: 18px; }

.portal-product-sub { display: none; }
.portal-product-sub-always { display: block; }
.portal-quick-table td { padding: 10px 12px; }

/* Cart: supplier groups + a summary that stays in view */
.portal-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.portal-cart-group { margin-bottom: 18px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px var(--shadow); }
.portal-cart-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.portal-cart-group-head h2 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.portal-cart-group-sub { font-size: 13px; color: var(--ink-soft); }
.portal-cart-group-sub b { color: var(--ink); font-variant-numeric: tabular-nums; }
.portal-cart-group .table-scroll { border: none; border-radius: 0; box-shadow: none; }
.portal-cart-summary { position: sticky; top: 84px; min-width: 0; max-width: none; }
.portal-cart-tools { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.portal-cart-tools .portal-inline-form { width: 100%; }
.portal-cart-tools .portal-inline-form input { flex: 1; min-width: 0; width: auto; }

/* Home: at a glance */
.portal-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
.portal-stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; text-decoration: none; color: inherit; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px var(--shadow); transition: border-color 0.15s ease, transform 0.15s ease; }
.portal-stat:hover { border-color: var(--brand); transform: translateY(-1px); }
.portal-stat-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.portal-stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.15; }
.portal-stat-value small { font-family: ui-sans-serif, -apple-system, system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.portal-stat-note { font-size: 12.5px; color: var(--ink-soft); }
.portal-section-title .portal-section-link { margin-left: 10px; font-family: ui-sans-serif, -apple-system, system-ui, sans-serif; font-size: 13px; font-weight: 600; }

/* Quieter "coming soon" tiles */
.portal-tile-soon { border-style: dashed; box-shadow: none; opacity: 0.75; }
.portal-tile-soon .portal-tile-icon { filter: grayscale(0.6); }

.portal-toast { display: flex; align-items: center; gap: 14px; }
.portal-toast.has-action { pointer-events: auto; }
.portal-toast-action { border: none; background: transparent; color: var(--brand-soft); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }

@media (max-width: 1000px) {
  .portal-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-cart-layout { grid-template-columns: 1fr; }
  .portal-cart-summary { position: static; }
}
@media (max-width: 860px) {
  .portal-sticky { top: 60px; }
}
@media (max-width: 600px) {
  /* Shop/favorites on a phone: product (details underneath), price, stepper, Add. */
  .portal-table .portal-col-strength, .portal-table .portal-col-form, .portal-table .portal-col-mg { display: none; }
  .portal-table thead th:nth-child(3), .portal-table thead th:nth-child(4), .portal-table thead th:nth-child(5) { display: none; }
  .portal-table-price thead th:nth-child(2), .portal-table-price thead th:nth-child(3), .portal-table-price thead th:nth-child(4) { display: none; }
  .portal-product-sub { display: block; font-weight: 400; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  .portal-col-qty { width: auto; }
  .portal-stepper .portal-qty-input { width: 36px; }
  .portal-step { width: 26px; }
  .portal-glance { gap: 10px; }
  .portal-stat { padding: 12px 14px; }
  .portal-stat-value { font-size: 22px; }
  .portal-filter-tools { margin-left: 0; width: 100%; }
}

/* Phones: shop/favorites/quick-reorder rows become small cards — name on
   top, then price · stepper · Add on one line — instead of a table that has
   to scroll sideways to reach the Add button. */
@media (max-width: 600px) {
  .portal-table-shop thead, .portal-quick-table thead { display: none; }
  .portal-table-shop, .portal-quick-table { display: block; }
  .portal-table-shop tbody, .portal-quick-table tbody { display: block; }
  .portal-table-shop tbody tr, .portal-quick-table tbody tr {
    display: grid; align-items: center; gap: 6px 10px; padding: 12px 10px; border-bottom: 1px solid var(--line);
  }
  .portal-table-shop tbody tr {
    grid-template-columns: 26px 1fr auto auto;
    grid-template-areas: "star name name name" ". price qty add";
  }
  .portal-quick-table tbody tr {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "name name name" "price qty add";
  }
  .portal-table-shop tbody td, .portal-quick-table tbody td { display: block; padding: 0; border: none; width: auto; }
  .portal-table-shop .portal-col-star { grid-area: star; align-self: start; }
  .portal-table-shop .portal-product, .portal-quick-table .portal-product { grid-area: name; }
  .portal-table-shop .portal-col-price, .portal-quick-table .portal-col-price { grid-area: price; text-align: left; font-size: 15px; }
  .portal-table-shop .portal-col-qty, .portal-quick-table .portal-col-qty { grid-area: qty; }
  .portal-table-shop .portal-col-add, .portal-quick-table .portal-col-add { grid-area: add; }
  .portal-table-shop .portal-col-strength, .portal-table-shop .portal-col-form, .portal-table-shop .portal-col-mg { display: none; }
  .portal-add-btn { min-width: 0; padding: 7px 14px; }
}


/* ---- Onboarding tab: one aligned column ---- */
.onboarding-page { max-width: 780px; margin: 0 auto; }
.onboarding-page > .notice { margin-bottom: 14px; }
.onboarding-page .settings-card { margin-bottom: 18px; }

/* Attachment: file name and Remove in one bar */
.onboarding-attachment-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
}
.onboarding-attachment-bar form { margin: 0; }
.onboarding-attachment-link { color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-attachment-link:hover { color: var(--brand); text-decoration: underline; }
.onboarding-dropzone { border-width: 1.5px; border-radius: 10px; padding: 24px 16px; }

/* Client portal card: sections separated by a hairline, not stacked paragraphs */
.portal-card .settings-note { margin-bottom: 14px; }
.portal-card-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.portal-card-section h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 15px; }
.portal-card-section .settings-note { margin: 0 0 12px; }
.portal-invite-form { display: flex; flex-direction: column; gap: 12px; }
.portal-invite-form .field { margin: 0; }
.portal-invite-form input, .portal-login-form input { width: 100%; }
.portal-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.portal-accounts { margin-bottom: 4px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.portal-account-row { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.portal-account-row:last-child { border-bottom: none; }
.portal-account-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.portal-account-name { font-weight: 700; font-size: 14px; }
.portal-account-meta { font-size: 12.5px; color: var(--ink-soft); }
.portal-account-pw { margin-top: 8px; }
.portal-account-pw summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); list-style: none; display: inline-block; }
.portal-account-pw summary::-webkit-details-marker { display: none; }
.portal-account-pw summary:hover { color: var(--brand); text-decoration: underline; }
.portal-pw-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.portal-pw-form .portal-pw-input { flex: 1 1 220px; min-width: 0; }
.portal-pw-input { padding: 9px 11px; font: inherit; font-size: 14px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; }
.portal-pw-input:focus { outline: none; border-color: var(--brand); }
.portal-pw-field { display: flex; align-items: center; gap: 10px; }
.portal-pw-field .portal-pw-input { flex: 1; min-width: 0; }

.portal-manual > summary { cursor: pointer; list-style: none; }
.portal-manual > summary::-webkit-details-marker { display: none; }
.portal-manual > summary h3::before { content: "▸"; display: inline-block; margin-right: 8px; font-size: 12px; color: var(--ink-soft); transition: transform 0.15s ease; }
.portal-manual[open] > summary h3::before { transform: rotate(90deg); }
.portal-manual > summary h3 { display: inline; }
.portal-manual .settings-note { margin-top: 8px; }
.portal-login-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal-login-form .field { margin: 0; }
.portal-login-form .portal-form-actions { grid-column: 1 / -1; }

.portal-credentials { margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--sage); background: var(--sage-bg); border-radius: 10px; }
.portal-credentials-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; color: var(--sage); }
.portal-credentials-head span { font-size: 12.5px; opacity: 0.9; }
.portal-credentials-list { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0 0 12px; font-size: 14px; }
.portal-credentials-list dt { color: var(--ink-soft); }
.portal-credentials-list dd { margin: 0; color: var(--ink); font-weight: 600; word-break: break-all; }
.portal-credentials-list code { font-size: 15px; letter-spacing: 0.02em; padding: 2px 8px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; }

@media (max-width: 640px) {
  .portal-login-form { grid-template-columns: 1fr; }
  .portal-credentials-list { grid-template-columns: 1fr; gap: 2px; }
  .portal-credentials-list dd { margin-bottom: 8px; }
}

/* Partner portal: change password */
.portal-password-form { max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.portal-password-form .field { margin: 0; }
.portal-password-form input { width: 100%; padding: 9px 11px; font: inherit; font-size: 14px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; }
.portal-password-form input:focus { outline: none; border-color: var(--brand); }

/* ======================================================================
   itsthebridge sign-in shell: every rep / partner sign-in screen.
   Always dark (it doesn't follow the CRM light/dark toggle): a black card
   on a charcoal backdrop, bridge artwork left, form right, neon-green accent.
   ====================================================================== */
body.bx-body {
  --bx-green: #30f37d;
  --bx-green-ink: #04180b;
  --ink: #f5f6f5;
  --ink-soft: #9ea5a1;
  --line: #262a28;
  --paper: #000;
  --paper-raised: #121413;
  --brand: var(--bx-green);
  --rust: #ff8173;
  --rust-bg: rgba(255, 96, 76, 0.1);
  --sage: var(--bx-green);
  --sage-bg: rgba(48, 243, 125, 0.09);
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    radial-gradient(120% 120% at 8% 0%, #6b6b6b 0%, #4a4a4a 45%, #333 100%);
  background-attachment: fixed;
}
.bx-stage { width: 100%; padding: 32px 24px; display: flex; justify-content: center; }
.bx-shell {
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  background: #000;
  border-radius: 30px;
  padding: 10px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.bx-visual { position: relative; border-radius: 22px; overflow: hidden; min-height: 620px; background: #050805; }
.bx-visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bx-visual::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); pointer-events: none; }
.bx-visual-tag { position: absolute; z-index: 1; left: 36px; bottom: 36px; margin: 0; font-size: 44px; font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; color: #fff; }
.bx-visual-tag strong { display: block; font-weight: 700; }
.bx-visual-tag span { color: var(--bx-green); }
.bx-visual-logo { position: absolute; top: 30px; left: 32px; height: 26px; width: auto; display: block; }

.bx-panel { display: flex; align-items: center; justify-content: center; padding: 44px 40px 30px; }
.bx-panel-inner { width: 100%; max-width: 390px; }
.bx-brand-mobile { display: none; }

.bx-eyebrow { margin: 0 0 14px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bx-green); }
.bx-eyebrow:empty { display: none; }
.bx-title { margin: 0 0 10px; text-align: center; font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
.bx-lede { margin: 0 auto 30px; text-align: center; font-size: 15px; line-height: 1.55; letter-spacing: 0.01em; color: var(--ink-soft); text-wrap: balance; }
.bx-title + .login-form, .bx-title + .notice { margin-top: 26px; }

.bx-body a { color: var(--bx-green); text-decoration: none; }
.bx-body a:hover { text-decoration: underline; }

.bx-body .login-form { gap: 18px; }
.bx-body .field { margin: 0; gap: 8px; }
.bx-body .field label { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #fff; }
.bx-body .field .muted { font-weight: 400; color: var(--ink-soft); }
.bx-body .field input {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px;
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: #1b1c1b;
  border: 1px solid transparent;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bx-body .field input::placeholder { color: #6d7370; }
.bx-body .field input:focus { border-color: var(--bx-green); background: #202221; outline: none; }
.bx-body .field input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0 1000px #1b1c1b inset;
  caret-color: #fff;
}
.bx-row-end { display: flex; justify-content: flex-end; margin-top: -8px; font-size: 14px; }

.bx-body .btn-primary.login-submit {
  width: 100%;
  margin-top: 6px;
  padding: 15px 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--bx-green-ink);
  background: var(--bx-green);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: none;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.bx-body .btn-primary.login-submit:hover { filter: brightness(1.08); }
.bx-body .btn-primary.login-submit:active { transform: translateY(1px); }

.bx-body .login-divider { margin: 20px 0; color: var(--ink-soft); }
.bx-body .btn-google {
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #1b1c1b;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
}
.bx-body .btn-google:hover { background: #242625; border-color: #333735; text-decoration: none; box-shadow: none; }

.bx-body .notice { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; text-align: left; }
.bx-body .bridge-auth-lede { margin: 0 0 22px; text-align: center; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.bx-body .bridge-auth-note { margin: 22px 0 0; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.bx-body .bridge-auth-aside { margin: 18px 0 0; text-align: center; font-size: 14px; }
.bx-body .bridge-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.bx-foot { margin: 30px 0 0; text-align: center; font-size: 12.5px; color: #6f7773; }
.bx-foot a { color: #8a928e; }
.bx-foot a:hover { color: var(--bx-green); text-decoration: none; }

/* Front door: Rep / Partner chooser */
.bx-choices { display: flex; flex-direction: column; gap: 12px; }
.bx-choice {
  display: flex; align-items: center; gap: 16px; padding: 18px 18px;
  background: #121413; border: 1px solid #232725; border-radius: 12px;
  color: inherit; text-decoration: none !important;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.bx-choice:hover { border-color: var(--bx-green); background: #151816; transform: translateY(-1px); }
.bx-choice:focus-visible { outline: 2px solid var(--bx-green); outline-offset: 2px; }
.bx-choice-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; background: rgba(48, 243, 125, 0.1); color: var(--bx-green); display: flex; align-items: center; justify-content: center; }
.bx-choice-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bx-choice-title { font-size: 17px; font-weight: 600; color: #fff; }
.bx-choice-desc { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.bx-choice-arrow { font-size: 18px; color: #5d6460; transition: transform 0.15s ease, color 0.15s ease; }
.bx-choice:hover .bx-choice-arrow { color: var(--bx-green); transform: translateX(3px); }
.bx-note { margin: 22px 0 0; text-align: center; font-size: 13px; color: #6f7773; }

@media (max-width: 880px) {
  .bx-stage { padding: 16px 12px; }
  .bx-shell { grid-template-columns: 1fr; border-radius: 24px; padding: 8px; max-width: 520px; }
  .bx-visual { min-height: 0; height: 250px; border-radius: 18px; }
  .bx-visual-img { object-position: center 40%; }
  .bx-visual-tag { display: none; }
  .bx-visual-logo { top: 18px; left: 20px; height: 19px; }
  .bx-panel { padding: 30px 14px 22px; }
  .bx-title { font-size: 28px; }
}
@media (max-width: 420px) {
  .bx-body .bridge-auth-row { grid-template-columns: 1fr; }
  .bx-visual { height: 215px; }
}

/* ======================================================================
   Bridge app theme (CRM + partner portal): the sign-in screen's look carried
   inside: near-black surfaces, neon-green accent, Outfit type. Scoped to
   body.bridge-app so the ScriptBridge public site keeps its own palette.
   Dark is the default; the light variant keeps the same green on cool white.
   ====================================================================== */
body.bridge-app { --font-display: 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif; font-family: var(--font-display); }
:root[data-theme="dark"] body.bridge-app {
  --ink: #f2f4f3; --ink-soft: #98a09b; --paper: #0a0b0a; --paper-raised: #131514;
  --line: #232725; --brand: #30f37d; --brand-soft: #112a1b;
  --sage: #3ddc84; --sage-bg: #10281b; --rust: #ff7a6b; --rust-bg: #2e1714;
  --neutral: #98a09b; --neutral-bg: #1c1f1d;
  --info: #5bb8ff; --info-bg: #12263a;
  --warning: #ffb454; --warning-bg: #33240e;
  --purple: #c59bff; --purple-bg: #2a1d3d;
  --shadow: rgba(0, 0, 0, 0.55);
  --brand-shine: linear-gradient(135deg, #5bff9f 0%, #30f37d 50%, #1fd968 100%);
  --on-brand: #04180b; --on-sage: #04180b;
  --chrome-line: #2e3431;
}
:root[data-theme="light"] body.bridge-app {
  --ink: #0e1210; --ink-soft: #5b6560; --paper: #f3f5f4; --paper-raised: #ffffff;
  --line: #dde3e0; --brand: #0a8a43; --brand-soft: #e0f6e9;
  --sage: #0d7a3f; --sage-bg: #dcf5e6; --rust: #c23b2b; --rust-bg: #fbe4df;
  --neutral: #66706b; --neutral-bg: #e9eeeb;
  --info: #1d6fa5; --info-bg: #dcecf5;
  --warning: #b5560a; --warning-bg: #fae3d2;
  --purple: #7b3fa0; --purple-bg: #f1e5f8;
  --shadow: rgba(14, 18, 16, 0.08);
  --brand-shine: linear-gradient(135deg, #5bff9f 0%, #30f37d 50%, #22d970 100%);
  --on-brand: #04180b; --on-sage: #ffffff;
  --chrome-line: #aeb7b2;   /* the line along the top bar and the side rail: a shade darker than the ordinary lines */
}
:root[data-theme="dark"]:has(body.bridge-app) { background: #0a0b0a; }
:root[data-theme="light"]:has(body.bridge-app) { background: #f3f5f4; }
body.bridge-app code { background: var(--brand-soft); color: var(--ink); }
body.bridge-app ::selection { background: var(--brand); color: var(--on-brand); }
body.bridge-app button, body.bridge-app input, body.bridge-app select, body.bridge-app textarea { font-family: inherit; }

/* --- Bridge app: whole-app polish (native controls, bars, editors) --- */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
body.bridge-app { accent-color: var(--brand); }
body.bridge-app .fav-star { color: var(--ink-soft); opacity: 0.45; }
body.bridge-app .fav-star:hover, body.bridge-app .fav-star.active { color: var(--warning); opacity: 1; }
/* The floating bulk-action bar sits on the raised surface instead of inverting. */
body.bridge-app .bulk-bar { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--brand); }
body.bridge-app .bulk-bar select { background: var(--paper); color: var(--ink); border-color: var(--line); }
body.bridge-app .bulk-bar .btn-undo { color: var(--ink); border-color: var(--line); }
/* HTML-email editors show the email as the recipient will see it: dark text on white. */
body.bridge-app #emailBodyEditable, body.bridge-app #signatureEditableArea { background: #fff; color: #1c1917; }
.task-body.task-body-flow { white-space: normal; }
body.bridge-app .btn-primary:disabled, body.bridge-app .btn-primary[disabled] { background: var(--neutral-bg); color: var(--ink-soft); filter: none; cursor: not-allowed; opacity: 1; }
/* Discover map: states with nothing pulled yet need to stay visible. */
:root[data-theme="light"] body.bridge-app .us-map-state-empty { fill: #c3ccc7; }
:root[data-theme="dark"] body.bridge-app .us-map-state-empty { fill: #2d3330; }
/* Long scraped emails ellipsize instead of stretching the Contact column
   (which pushed the action buttons out of view). */
.contact-links .link-pill { max-width: 195px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: fit-content; }
.note-preview { width: 190px; }

/* Supplier Management: business-category grouping */
.supplier-cat-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); white-space: nowrap; }
.supplier-cat-chip-none { background: var(--rust-bg); color: var(--rust); }
.supplier-cat-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.supplier-cat-option { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--ink); }
.state-summary-right { flex-wrap: wrap; justify-content: flex-end; gap: 6px 8px; }
.field .supplier-cat-option { font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500; }
.field .supplier-cat-option input[type="checkbox"] { width: auto; min-width: 0; margin: 0; padding: 0; }
.network-cat-bar { padding: 12px 18px 14px; border-bottom: 1px solid var(--line); }
.network-cat-title { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.network-cat-title .muted { font-weight: 400; color: var(--ink-soft); }

/* The mark is dark-on-dark by nature (black body, thin green outline), so on
   the dark theme it gets lifted: brighter greens plus a soft glow. */
:root[data-theme="dark"] .bridge-mark { filter: brightness(1.5) saturate(1.2) drop-shadow(0 0 5px rgba(48, 243, 125, 0.5)); }
/* Partner portal header on phones: the bigger logo would squeeze the search box to nothing. */
@media (max-width: 600px) {
  .portal-wordmark { font-size: 14px; }
  .portal-wordmark .bridge-logo { display: none !important; }  /* mark only, as before; the wordmark text lives on the sign-in and CRM */
}

/* Partner portal menu: grouped real-page links with icons and a current-page highlight. */
.portal-logout-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Cart: eight columns now (with Total MG) — tighter cells so it fits beside the summary on laptop widths. */
.portal-cart-table thead th, .portal-cart-table tbody td { padding-left: 8px; padding-right: 8px; }
@media (min-width: 601px) and (max-width: 1500px) {
  .portal-cart-table th:nth-child(2), .portal-cart-table td:nth-child(2),
  .portal-cart-table th:nth-child(3), .portal-cart-table td:nth-child(3) { display: none; }  /* strength + form move into the product line */
  .portal-cart-table .portal-product-sub { display: block; }
}
@media (min-width: 601px) { .portal-cart-table .portal-sub-phone { display: none; } }

/* ---- Orders & checkout (partner portal) ---- */
.portal-order-btn { display: block; box-sizing: border-box; text-align: center; text-decoration: none; opacity: 1; cursor: pointer; }
.portal-order-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.portal-subtabs { display: flex; gap: 6px; margin: 0 0 16px; }
.portal-subtabs a { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink-soft); border: 1px solid var(--line); }
.portal-subtabs a.active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.portal-pay-options { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 4px; }
.portal-pay-option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.portal-pay-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.portal-pay-option input { margin-top: 4px; }
.portal-pay-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.portal-pay-text span { color: var(--ink-soft); font-size: 13px; }
.portal-pay-disabled { opacity: 0.5; cursor: not-allowed; }
.portal-note-field { display: block; padding: 12px 18px 18px; font-size: 13px; font-weight: 600; }
.portal-note-field textarea { display: block; width: 100%; margin-top: 6px; padding: 9px 11px; font: inherit; font-weight: 400; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; resize: vertical; box-sizing: border-box; }
.portal-wire-box { margin: 0; padding: 14px 18px; font: inherit; font-size: 14px; line-height: 1.55; white-space: pre-wrap; background: var(--paper); border-radius: 8px; margin: 14px 18px 4px; }
.portal-pay-card .portal-fine { padding: 0 18px 14px; }
.portal-timeline-title { margin: 20px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.portal-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.portal-timeline li { display: flex; flex-direction: column; border-left: 2px solid var(--brand); padding-left: 10px; }
.portal-timeline time { color: var(--ink-soft); font-size: 12px; }

/* ---- Orders & Payment Settings (CRM side) ---- */
.orders-table { min-width: 0; width: 100%; }
.order-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .order-detail-grid { grid-template-columns: minmax(0, 1fr); } .order-detail-grid > * { min-width: 0; } }
.order-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.order-timeline li { display: flex; flex-direction: column; border-left: 2px solid var(--brand); padding-left: 10px; }
.order-timeline li.is-note { border-left-color: var(--neutral); }
.order-timeline time { color: var(--ink-soft); font-size: 12px; }
body.bridge-app .login-form textarea, body.bridge-app .field textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; resize: vertical;
}
body.bridge-app .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Admin preview: a compact header chip instead of a banner; click it for the details. */
.portal-preview { position: relative; }
.portal-preview-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 280px; padding: 6px 12px; font: inherit; font-size: 12.5px;
  color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 999px; cursor: pointer;
}
.portal-preview-chip svg { flex-shrink: 0; }
.portal-preview-chip .portal-preview-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-preview-chip b { font-weight: 700; }
.portal-preview-chip.open { background: var(--brand); color: var(--on-brand); }
.portal-preview-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 300px; padding: 14px 16px; font-size: 13px; line-height: 1.5;
  color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px var(--shadow);
}
.portal-preview-panel p { margin: 0 0 8px; }
.portal-preview-links { display: flex; gap: 14px; margin-top: 10px; font-weight: 600; }
.portal-preview-links a { color: var(--brand); }
@media (max-width: 700px) {
  .portal-preview-chip { padding: 6px 9px; }
  .portal-preview-chip .portal-preview-text { display: none; }
  .portal-preview-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}
@media (max-width: 700px) { .portal-logout-btn { display: none; } }  /* Sign out stays in the menu; the search box needs the room */

/* Team & Users: tabs, find-a-person, and tidier person cards */
.team-tabs { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.team-tab { padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.team-tab:hover { color: var(--ink); }
.team-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.team-tab-count { margin-left: 4px; padding: 1px 7px; font-size: 11px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.team-search { margin: 0 0 14px; }
.team-search input { width: 100%; max-width: 360px; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; }
.team-group-count { font-size: 13px; font-weight: 400; }
.person-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 4px; }
.person-actions .person-more { flex: 1 1 100%; order: 3; }
.person-actions .person-more summary { display: inline-block; cursor: pointer; list-style: none; }
.person-actions .person-more summary::-webkit-details-marker { display: none; }
.person-actions .person-more .user-edit-form { margin-top: 8px; }
.person-remove { margin-left: auto; }

/* Eye toggle: hide base prices when a client is looking over your shoulder */
.base-eye-row { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.base-eye-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.base-eye-toggle:hover { color: var(--ink); border-color: var(--brand); }
.base-eye-toggle .eye-closed { display: none; }
.base-eye-toggle.is-hidden { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.base-eye-toggle.is-hidden .eye-open { display: none; }
.base-eye-toggle.is-hidden .eye-closed { display: inline; }
html.hide-base .base-col { display: none; }
.comp-plan-pharmacy-row { flex-wrap: wrap; }
.comp-plan-sep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; }

/* Team & Users: sortable user list + team dropdowns */
.people-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; }
.people-toolbar input[type="search"] { flex: 1 1 260px; max-width: 360px; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; }
.people-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.people-sort select { padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; }
.person-row .team-member-edit-form { margin-top: 10px; }
.person-row .person-edit { margin-top: 8px; }
.person-row .person-edit summary { display: inline-block; cursor: pointer; list-style: none; }
.person-row .person-edit summary::-webkit-details-marker { display: none; }
.person-row .person-edit .user-edit-form { margin-top: 8px; }
.person-row .person-remove-row { margin-top: 8px; }
.team-drops { display: flex; flex-direction: column; gap: 10px; }
.team-drop { border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); }
.team-drop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.team-drop-head::-webkit-details-marker { display: none; }
.team-drop-head::before { content: "▸"; color: var(--ink-soft); transition: transform 0.15s ease; }
.team-drop[open] > .team-drop-head::before { transform: rotate(90deg); }
.team-drop-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.team-drop-head .team-member-meta { margin-left: auto; }
.team-drop-body { padding: 4px 18px 18px; border-top: 1px solid var(--line); }
.team-drop-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0; }
.person-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.person-controls .team-member-edit-form { margin: 0; }
.person-controls .person-edit { margin: 0; }
.person-controls .person-edit[open] { flex: 1 1 100%; order: 3; }
.person-controls .person-remove-row { margin: 0 0 0 auto; }

/* Comp plans: set-many-at-once bar, standard plan pickers */
.cp-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; margin: 0 0 14px; background: var(--brand-soft); border: 1px solid var(--line); border-radius: 10px; }
.cp-bulk select, .cp-bulk input[type="text"] { padding: 7px 9px; font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.cp-bulk input[type="text"] { width: 90px; text-align: right; }
.cp-bulk-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.cp-bulk-label { font-size: 13px; color: var(--ink-soft); }
.cp-bulk-note { flex: 1 1 100%; font-size: 12px; color: var(--ink-soft); }
.cp-row-select { display: inline-flex; align-items: center; }
.cp-row-select input { width: auto; padding: 0; }
.cp-row-flash { background: var(--brand-soft); transition: background 0.6s ease; }
.cp-apply-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.cp-apply-row:first-of-type { border-top: none; }
.cp-apply-cat { min-width: 140px; font-weight: 600; font-size: 14px; }
.cp-apply-row select { padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; min-width: 240px; }

/* Per-supplier column names (Supplier Management) */
.supplier-cols-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.supplier-cols-row .supplier-col-input { flex: 1 1 140px; max-width: 200px; min-width: 110px; }
.supplier-cols-row .supplier-cols-status { margin-left: 4px; }

/* Platform admin viewing another company */
.org-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 8px 16px; background: #3a2a05; color: #ffd98a; font-size: 13.5px; border-bottom: 1px solid rgba(255, 217, 138, 0.35); }
.org-banner form { margin: 0; }

/* Field rows that should wrap in narrow cards (commissions, companies) */
.lead-detail-field-row.wrap-row { flex-wrap: wrap; }
.lead-detail-field-row.wrap-row > .field { flex: 1 1 160px; min-width: 140px; }

/* Companies page: mine vs customer */
.org-section-title { margin: 22px 0 10px; font-size: 18px; }
.org-card-mine { border-left: 4px solid #8a8f98; }
.org-card-customer { border-left: 4px solid var(--brand, #30f37d); }

/* "Who is this company for?" — two clean choice cards */
.kind-choice-group { border: 0; padding: 0; margin: 4px 0 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.kind-choice-group legend { padding: 0; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.kind-choice { display: flex; align-items: center; gap: 12px; flex: 0 1 340px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: transparent; }
.kind-choice input[type="radio"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--brand, #30f37d); }
.kind-choice-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.kind-choice-text b { font-size: 15px; }
.kind-choice-text span { font-size: 13px; color: var(--ink-soft); }
.kind-choice:has(input:checked) { border-color: var(--brand, #30f37d); box-shadow: 0 0 0 1px var(--brand, #30f37d) inset; }

/* Phones: stacked field rows must not use the desktop flex-basis (it becomes a tall gap in a column) */
@media (max-width: 720px) {
  .lead-detail-field-row.wrap-row { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
  .lead-detail-field-row.wrap-row > .field { flex: 0 0 auto; width: 100%; min-width: 0; }
  .lead-detail-field-row.wrap-row > .field input,
  .lead-detail-field-row.wrap-row > .field select,
  .lead-detail-field-row.wrap-row > .field textarea { width: 100%; box-sizing: border-box; }
}
/* A field row inside an inline form takes the whole line (not just the width of its contents) */
.add-user-form > .lead-detail-field-row { flex: 1 1 100%; min-width: 0; }

/* Company cards: labeled edit fields that wrap neatly on any width */
.org-edit-form { flex: 0 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; margin-top: 12px; }
.org-edit-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.org-edit-field > span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.org-edit-field input, .org-edit-field select { width: 100%; min-width: 0; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 14px; }
.org-edit-name { grid-column: 1 / -1; }
.org-edit-wide { grid-column: 1 / -1; }
.org-options { flex: 0 0 auto; margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--paper); }
.org-options > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.org-options .org-edit-form { margin-top: 12px; }
.org-hint { font-size: 12px; line-height: 1.35; color: var(--ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
.org-edit-save { justify-self: start; }
@media (max-width: 720px) { .org-edit-form { grid-template-columns: 1fr 1fr; } .org-edit-save { grid-column: 1 / -1; justify-self: stretch; } }

/* Phones: .stack-table turns each row into a labeled card (no sideways scrolling) */
@media (max-width: 720px) {
  table.stack-table, table.stack-table tbody, table.stack-table tr, table.stack-table td { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
  table.stack-table thead { display: none; }
  table.stack-table tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--paper-raised, transparent); }
  table.stack-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0 !important; border: 0 !important; text-align: right; }
  table.stack-table td::before { content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); text-align: left; flex: none; }
  table.stack-table td:not([data-label])::before { content: none; }
  table.stack-table td:not([data-label]) { justify-content: flex-end; }
  table.stack-table td[colspan] { display: flex; justify-content: space-between; }
  .table-scroll:has(table.stack-table) { overflow: visible; }
  /* an odd stat tile out (e.g. 3 tiles in a 2-column grid) spans the row */
  .stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  table.stack-table .cell-v { flex: 1 1 auto; min-width: 0; text-align: right; }
  table.stack-table td[colspan] .cell-v { text-align: left; }
  .table-scroll:has(table.stack-table) { border: 0; background: none; box-shadow: none; padding: 0; }
}
@media (max-width: 720px) {
  table.stack-table td, table.stack-table th { width: 100% !important; max-width: none !important; min-width: 0 !important; }
}
@media (max-width: 720px) {
  /* Column / tier name editors: tidy full-width grid instead of ragged inline inputs */
  .supplier-cols-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
  .supplier-cols-row .supplier-col-input, .supplier-cols-row .tier-name-input { max-width: none; width: 100%; min-width: 0; box-sizing: border-box; flex: none; }
  .supplier-cols-row .btn-secondary { grid-column: 1 / -1; width: 100%; }
  .supplier-cols-row .save-status { grid-column: 1 / -1; margin: 0; text-align: center; }
}
@media (max-width: 720px) {
  .supplier-cols-row .supplier-col-input:nth-child(3), .supplier-cols-row .tier-name-input:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  /* Lead sub-tabs: scroll sideways inside their own row instead of widening the whole page */
  .lead-subnav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lead-subnav::-webkit-scrollbar { display: none; }
  .lead-subnav-tab { flex: none; white-space: nowrap; }
}

/* dd/mm/yy date fields: a text box with a small calendar button; the real (hidden) field stays YYYY-MM-DD */
.dmy-date { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.field .dmy-date, .dm-edit-label .dmy-date { display: flex; width: 100%; }
.dmy-date .dmy-input { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; }
.dmy-cal { flex: none; border: 1px solid var(--line); background: transparent; border-radius: 8px; padding: 7px 9px; cursor: pointer; line-height: 1; font-size: 15px; }
.dmy-cal:hover { border-color: var(--brand); }
.dmy-calwrap { position: relative; flex: none; display: inline-flex; }
.dmy-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
.dmy-input:invalid:not(:placeholder-shown) { outline: 2px solid #e0556a; outline-offset: 1px; }

/* Payroll mode choice cards */
.payroll-modes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.payroll-mode { flex: none; max-width: none; align-items: flex-start; }
.payroll-mode input[type="radio"] { margin-top: 3px; }

/* ---------- Money dashboard ---------- */
.range-card { display: grid; gap: 0; margin-bottom: 18px; padding: 6px 18px; }
.range-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px 0; }
.range-row + .range-row { border-top: 1px solid var(--line); }
.range-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.range-custom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.range-custom input[type="date"] { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.range-to { color: var(--ink-soft); font-size: 13px; }
.range-go { height: 34px; padding: 0 16px; border: 1px solid var(--brand); border-radius: 9px; background: transparent; color: var(--brand); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.range-go:hover, .range-go.on { background: var(--brand); color: var(--on-brand); }
.range-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.range-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.range-chip { padding: 7px 4px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; text-align: center; white-space: nowrap; color: var(--ink); text-decoration: none; background: transparent; }
.range-chip:hover { border-color: var(--brand); }
.range-chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.range-year-nav { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; }
.range-year-nav b { font-size: 15px; color: var(--ink); }
.range-year-nav a { font-size: 20px; line-height: 1; color: var(--ink); text-decoration: none; padding: 0 4px; }
@media (max-width: 760px) {
  .range-row { grid-template-columns: 1fr; gap: 8px; }
  .range-custom input[type="date"] { flex: 1 1 100%; min-width: 0; }
  .range-to { display: none; }
  .range-quick { grid-template-columns: repeat(6, 1fr); }
  .range-quick .range-chip { grid-column: span 2; }
  .range-quick .range-chip:nth-child(n+4) { grid-column: span 3; }
  .range-go { flex: 1 1 100%; }
  .range-months { grid-template-columns: repeat(4, 1fr); }
}
.money-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.money-side { min-width: 0; padding: 0 18px; }
.money-side:first-child { padding-left: 0; }
.money-side:last-child { padding-right: 0; border-left: 1px solid var(--line); }
.money-side .link-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 14px 0 0; }
.money-card h2 { margin-top: 0; }
.ring-wrap { position: relative; width: min(100%, 230px); margin: 8px auto 14px; }
.ring { width: 100%; height: auto; transform: none; display: block; }
.ring-track { stroke: var(--line); opacity: 0.55; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.ring-center b { font-size: 20px; }
.ring-center span { font-size: 12px; color: var(--ink-soft); }
.legend-group { margin-top: 12px; }
.legend-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.legend-head b { color: var(--ink); }
.legend-row { display: grid; grid-template-columns: 12px 1fr auto 40px; gap: 2px 8px; align-items: center; padding: 7px 0; font-size: 14px; }
.legend-bar { grid-column: 2 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.legend-bar i { display: block; height: 100%; border-radius: 2px; }
.legend-amt { font-weight: 600; }
.legend-row small { color: var(--ink-soft); }
.legend-label { overflow-wrap: anywhere; }
.legend-pct { text-align: right; color: var(--ink-soft); font-size: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.money-foot { font-size: 12px; color: var(--ink-soft); margin: 14px 0 0; }
.link-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 24px; }
.link-card { display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); color: var(--ink); }
.link-card-main { display: grid; gap: 2px; color: var(--ink); text-decoration: none; }
.link-card-amount { font-size: 15px; font-weight: 600; color: var(--brand); }
.link-card-sub { font-size: 12px; color: var(--brand); text-decoration: none; padding-top: 6px; border-top: 1px solid var(--line); }
.link-card-sub:hover { text-decoration: underline; }
.link-card:hover { border-color: var(--brand); }
.link-card small { color: var(--ink-soft); font-size: 12px; }
.link-card .drawer-icon { font-size: 20px; }
@media (max-width: 760px) {
  .money-split { grid-template-columns: 1fr; }
  .money-side, .money-side:first-child, .money-side:last-child { padding: 0; }
  .money-side:last-child { border-left: 0; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 22px; }
}
.ring-seg { cursor: pointer; outline: none; transition: opacity 0.12s; }
.ring-seg.dim { opacity: 0.45; }
.ring-tip { position: absolute; z-index: 5; transform: translateX(-50%); display: grid; gap: 1px; padding: 8px 11px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.3; text-align: center; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.ring-tip[hidden] { display: none; }
.ring-tip small { font-size: 11px; opacity: 0.75; }

/* ---------- Settings tabs ---------- */
.set-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.set-tab { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink); text-decoration: none; background: var(--paper-raised); }
.set-tab:hover { border-color: var(--brand); }
.set-tab.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }

/* ---------- Money: balance hero and activity ---------- */
.balance { text-align: center; padding: 22px 16px 18px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-raised); }
.balance-label { font-size: 13px; color: var(--ink-soft); }
.balance-amount { font-size: 40px; font-weight: 700; letter-spacing: -0.01em; margin: 2px 0 14px; color: var(--brand); }
.balance-amount.neg { color: var(--rust); }
.balance-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; margin: 0 auto; }
.balance-chip { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; text-align: left; border: 1px solid var(--line); }
.balance-chip span { font-size: 12px; color: var(--ink-soft); }
.balance-chip b { font-size: 18px; }
.balance-chip.in b { color: var(--brand); }
.balance-chip.out b { color: var(--rust); }
.activity { margin-top: 8px; }
.activity h2 { margin-top: 0; }
.activity-day { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); padding: 12px 0 4px; }
.activity-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.activity-day + .activity-row { border-top: 0; }
.activity-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--line); font-size: 17px; }
.activity-text { display: grid; gap: 1px; min-width: 0; }
.activity-text b { font-size: 14px; overflow-wrap: anywhere; }
.activity-text small { color: var(--ink-soft); font-size: 12px; }
.activity-amt { font-weight: 600; font-size: 15px; white-space: nowrap; }
.activity-amt.in { color: var(--brand); }
.activity-amt.out { color: var(--ink); }
.by-company { margin-top: 8px; }
.by-company h2 { margin-top: 0; }
.by-company td.pos { color: var(--brand); }
.by-company td.neg { color: var(--rust); }
.by-company tfoot td { border-top: 2px solid var(--line); padding-top: 10px; }

/* ---------- Product pictures ---------- */
.portal-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #fff; vertical-align: middle; margin-right: 12px; cursor: zoom-in; }
.portal-product-text { display: inline-block; vertical-align: middle; max-width: calc(100% - 72px); }
.portal-product .portal-thumb + .portal-product-text { max-width: calc(100% - 72px); }
.portal-lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 720px); max-height: 92vh; overflow: visible; text-align: center; color: #fff; }
.portal-lightbox::backdrop { background: rgba(0, 0, 0, 0.72); }
.portal-lightbox img { max-width: 100%; max-height: 78vh; border-radius: 14px; background: #fff; display: block; margin: 0 auto; }
.portal-lightbox p { margin: 10px 0 0; font-weight: 600; }
.portal-lightbox-close { position: absolute; top: -14px; right: -6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 20px; line-height: 1; cursor: pointer; }
.catalog-product-cell { white-space: nowrap; }
.catalog-product-cell .catalog-input { width: calc(100% - 42px); vertical-align: middle; }
.catalog-photo { position: relative; display: inline-block; vertical-align: middle; margin-right: 6px; }
.catalog-photo-btn { width: 34px; height: 34px; padding: 0; border: 1px dashed var(--line); border-radius: 8px; background: transparent; cursor: pointer; font-size: 15px; display: grid; place-items: center; overflow: hidden; }
.catalog-photo-btn:hover { border-color: var(--brand); }
.catalog-photo.has-photo .catalog-photo-btn { border-style: solid; }
.catalog-photo-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalog-photo-remove { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 0; background: #b4532a; color: #fff; font-size: 11px; line-height: 16px; cursor: pointer; }
.catalog-photo-remove[hidden] { display: none; }
.catalog-photo.is-uploading { opacity: 0.5; pointer-events: none; }
@media (max-width: 760px) { .portal-thumb { width: 48px; height: 48px; margin-right: 10px; } }
.task-repeat { color: var(--brand); font-weight: 600; white-space: nowrap; }
@media (hover: hover) { .catalog-photo-remove { opacity: 0; } .catalog-photo:hover .catalog-photo-remove, .catalog-photo-remove:focus { opacity: 1; } }
.portal-thumb-empty { display: inline-block; cursor: default; background: var(--line); opacity: 0.35; }


/* ---------- Money: chart boxes and transaction logs (same size, side by side) ---------- */
@media (min-width: 761px) {
  .money-card, .log-card { height: 560px; box-sizing: border-box; }
  .money-card { display: flex; flex-direction: column; margin-bottom: 14px; }
  .money-card .legend { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .money-card .money-foot { flex: none; }
}
.log-card { display: flex; flex-direction: column; margin-bottom: 14px; }
.log-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.log-tab { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.log-tab:hover { border-color: var(--brand); }
.log-tab.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.log-pane { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.log-pane[hidden] { display: none; }
.log-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 6px; font-size: 13px; color: var(--ink-soft); }
.log-total b { font-size: 18px; color: var(--ink); }
.log-total b.in { color: var(--brand); }
.log-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 760px) { .log-list { max-height: 420px; } }
.log-day { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); padding: 12px 0 4px; }
.log-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.log-day + .log-row { border-top: 0; }
.log-text { display: grid; gap: 1px; min-width: 0; }
.log-text b { font-size: 14px; overflow-wrap: anywhere; }
.log-text small { color: var(--ink-soft); font-size: 12px; }
.log-amt { font-weight: 600; font-size: 15px; white-space: nowrap; }
.log-amt.in { color: var(--brand); }
.log-empty { color: var(--ink-soft); margin: 14px 0 0; }

.page-head-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.page-head-actions .page-head-action { position: static; margin: 0; }
.page-head-action-quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.page-head-action-quiet:hover { border-color: var(--brand); filter: none; }

/* ---------- Side menu: an always-present icon rail with pop-out panels ---------- */
:root { --rail-w: 64px; }
@media (min-width: 900px) {
  /* The rail sits on the right edge under the top bar; the page (tab bar and content) stops at the rail, so every line meets cleanly. */
  body.has-rail { padding-right: var(--rail-w); }
  body.has-rail .topbar { margin-right: calc(-1 * var(--rail-w)); }
  body.has-rail .hamburger { display: none; }
  .sidebar { position: fixed; right: 0; top: var(--rail-top, var(--topbar-h, 69px)); bottom: 0; width: var(--rail-w); background: var(--paper-raised); border-left: 1px solid var(--chrome-line, var(--line)); z-index: 24; }
  .sidebar-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0; height: 100%; overflow: visible; }
  /* The hover area runs the full width of the rail (no gap between the icon and the pop-out), so the pointer can travel across. */
  .side-cat { position: relative; width: var(--rail-w); display: flex; justify-content: center; }
  .side-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-soft); cursor: pointer; padding: 0; transition: background 0.12s, color 0.12s; }
  .side-icon .side-label { display: none; }
  .side-cat:hover .side-icon, .side-cat.is-open .side-icon { background: var(--brand-soft); color: var(--brand); }
  .side-cat.active .side-icon { background: var(--brand); color: var(--on-brand); }
  /* One panel at a time: a panel is simply shown or not shown (script decides which), and it fades in. Nothing fades out, so two
     panels can never overlap when you move quickly from one icon to the next. */
  .side-panel { display: none; position: fixed; right: var(--rail-w); top: 80px; width: 270px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 14px 10px 12px;
    background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 36px var(--shadow); z-index: 40; }
  .side-cat.is-open .side-panel { display: block; animation: side-pop 0.12s ease-out; }
  @keyframes side-pop { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
}
.side-title { font-size: 16px; font-weight: 700; padding: 2px 10px 10px; }
.side-rule { height: 1px; background: var(--line); margin: 8px 10px; }
.side-heading { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); padding: 10px 10px 2px; }
.side-link { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.25; }
.side-link:hover { background: var(--brand-soft); color: var(--brand); }
.side-link.active { background: var(--brand); color: var(--on-brand); }
.side-link.side-sub { padding-left: 26px; font-size: 13px; color: var(--ink-soft); }
.side-link.side-soon { color: var(--ink-soft); cursor: default; opacity: 0.8; }
.side-link.side-soon:hover { background: transparent; color: var(--ink-soft); }
.side-pill { margin-left: auto; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); }
.side-badge { margin-left: auto; font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--brand); color: var(--on-brand); }
@media (max-width: 899px) {
  .sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); background: var(--paper-raised); border-left: 1px solid var(--line);
    box-shadow: -4px 0 16px var(--shadow); padding: 70px 12px 14px; overflow-y: auto; transform: translateX(100%); transition: transform 0.2s ease; z-index: 30; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-inner { display: flex; flex-direction: column; gap: 2px; }
  .side-icon { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; text-align: left; }
  .side-cat.open > .side-icon, .side-cat.active > .side-icon { background: var(--brand-soft); color: var(--brand); }
  .side-panel { display: none; padding: 2px 0 8px 12px; }
  .side-cat.open .side-panel { display: block; }
  .side-title { display: none; }
}

/* Settings sits at the bottom of the rail, apart from the work categories. */
@media (min-width: 900px) { .side-cat[data-cat="settings"] { margin-top: auto; } }
.side-identity { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 8px; font-size: 13px; }
.side-identity .side-pill { margin-left: 0; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* Sequences: two big tabs, Leads in Sequence on the left and Sequence Settings on the right. */
.seq-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 20px; }
.seq-tab { display: grid; gap: 1px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); color: var(--ink); text-decoration: none; text-align: left; }
.seq-tab b { font-size: 15px; }
.seq-tab small { color: var(--ink-soft); font-size: 12px; }
.seq-tab:hover { border-color: var(--brand); }
.seq-tab.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.seq-tab.on small { color: color-mix(in srgb, var(--on-brand) 78%, transparent); }

/* A direct link on the rail (Log Out): same icon size as the rest, with a small label that appears beside it on hover. */
@media (min-width: 900px) {
  .side-direct { margin-bottom: 10px; }
  .side-direct .side-icon { text-decoration: none; }
  .side-direct .side-icon::after { content: attr(data-tip); position: fixed; right: calc(var(--rail-w) + 6px); margin-top: 0; padding: 6px 10px; border-radius: 8px;
    background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 20px var(--shadow); font-size: 13px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.12s; }
  .side-direct:hover .side-icon::after { opacity: 1; }
}
@media (max-width: 899px) { .side-direct .side-icon { text-decoration: none; } }

/* The button at the top right sits right above the rail's icon column (centred on it). */
/* On wide screens the top bar is exactly as thick as the side rail is wide (a square corner where they meet). */
@media (min-width: 900px) { body.has-rail .topbar { height: var(--rail-w); box-sizing: border-box; padding-top: 0; padding-bottom: 0; padding-right: calc((var(--rail-w) - 34px) / 2); } }

/* ---------- Notifications bell ---------- */
.bell-wrap { position: relative; }
.bell-wrap .icon-btn { position: relative; }
.bell-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--rust, #c23b2b); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-sizing: border-box; border: 2px solid var(--paper-raised); }
.bell-badge[hidden] { display: none; }
.bell-panel { position: absolute; top: calc(100% + 10px); right: -48px; width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 520px); display: flex; flex-direction: column;
  background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 36px var(--shadow); z-index: 40; overflow: hidden; }
.bell-panel[hidden] { display: none; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.bell-markall { border: 0; background: transparent; color: var(--brand); font: inherit; font-size: 12.5px; cursor: pointer; padding: 2px 4px; }
.bell-markall:hover { text-decoration: underline; }
.bell-list { overflow-y: auto; }
.bell-empty { margin: 0; padding: 22px 16px; color: var(--ink-soft); font-size: 13.5px; text-align: center; }
.bell-item { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--brand-soft); }
.bell-item.unread { background: color-mix(in srgb, var(--brand) 7%, var(--paper-raised)); }
.bell-item.unread b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: 6px; vertical-align: middle; }
.bell-ico { font-size: 18px; text-align: center; }
.bell-text { display: grid; gap: 1px; min-width: 0; }
.bell-text b { font-size: 13.5px; }
.bell-item .bell-link { color: inherit; text-decoration: none; }
.bell-item .bell-link:hover { text-decoration: underline; color: var(--brand); }
.bell-item.unread { cursor: pointer; }
.bell-text small { color: var(--ink-soft); font-size: 12.5px; overflow-wrap: anywhere; }
.bell-text em { color: var(--ink-soft); font-size: 11.5px; font-style: normal; opacity: 0.85; }
@media (max-width: 899px) { .bell-panel { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; } }

/* ---------- Calls ---------- */
.call-form { display: grid; gap: 8px; margin-bottom: 14px; }
.call-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.call-row select, .call-row input[type="number"], .call-row input[type="date"], .call-form textarea { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; box-sizing: border-box; }
.call-row select { flex: 1 1 150px; min-width: 0; }
.call-row input[type="number"] { width: 100px; }
.call-form textarea { width: 100%; resize: vertical; }
.call-follow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin-right: auto; }
.call-list { display: grid; gap: 0; }
.call-item { padding: 10px 0; border-top: 1px solid var(--line); }
.call-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.call-item-head form { margin-left: auto; }
.call-del { border: 0; background: transparent; color: var(--ink-soft); font-size: 18px; cursor: pointer; line-height: 1; }
.call-del:hover { color: var(--rust, #c23b2b); }
.call-notes { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.call-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.call-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.call-filters select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 14px; }
.range-quick-row { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
@media (max-width: 760px) { .call-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Person profile ---------- */
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 4px 0 20px; }
.profile-avatar { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-size: 24px; font-weight: 700; flex: none; }
.profile-id h1 { margin: 0 0 6px; font-size: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.set-tab small { opacity: 0.7; margin-left: 3px; }
.profile-stats { margin-bottom: 16px; grid-template-columns: repeat(3, 1fr); }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.profile-grid h2 { margin-top: 0; }
.funnel-row { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; margin-bottom: 6px; border-radius: 8px; overflow: hidden; background: var(--paper); font-size: 14px; }
.funnel-row span, .funnel-row b { position: relative; z-index: 1; }
.funnel-row i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--brand) 28%, transparent); }
.profile-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.profile-line:first-of-type { border-top: 0; }
@media (max-width: 760px) { .profile-grid { grid-template-columns: 1fr; } .profile-stats { grid-template-columns: repeat(2, 1fr); } .profile-actions { margin-left: 0; } }

.person-link { text-decoration: none; color: inherit; }
.person-link:hover { text-decoration: underline; color: var(--brand); }

/* Teams list in the side menu: people read like normal links (not greyed), each with a small initial badge */
.side-link.side-person { padding-left: 10px; font-size: 14px; color: var(--ink); }
.side-avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--brand-soft); color: var(--brand); }
.side-link.active .side-avatar { background: var(--on-brand); color: var(--brand); }
/* Selected link in a side-menu panel: readable text, tag and initial badge on the green highlight (light and dark) */
.side-link.active, .side-link.side-person.active { color: #fff; }
:root[data-theme="dark"] .side-link.active, :root[data-theme="dark"] .side-link.side-person.active { color: #04180b; }
.side-link.active .side-pill { color: inherit; border-color: currentColor; background: transparent; }
.side-link.active .side-avatar { background: var(--paper-raised); color: var(--brand); }

/* ---------- Leaderboard page ---------- */
.lb-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-team select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 14px; }
.lb-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.lb-card { grid-column: span 5; min-width: 0; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: 0 6px 24px var(--shadow); }
.lb-card.lb-wide { grid-column: span 7; }
.lb-card.lb-half { grid-column: span 6; }
.lb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.lb-head h2 { margin: 0; font-size: 17px; }
.lb-figures { display: flex; gap: 18px; }
.lb-figures span { display: flex; flex-direction: column; text-align: right; }
.lb-figures small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.lb-figures b { font-size: 17px; font-variant-numeric: tabular-nums; }
.lb-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.lb-tabs a { padding: 5px 12px; border-radius: 999px; font-size: 13px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.lb-tabs a:hover { color: var(--ink); }
.lb-tabs a.on { background: var(--brand); color: var(--on-brand); font-weight: 600; }
.lb-row { display: grid; grid-template-columns: 28px 34px minmax(110px, 1.1fr) minmax(70px, 1.6fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.lb-row:hover { background: var(--brand-soft); }
.lb-row.is-me { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.lb-rank { font-weight: 700; color: var(--ink-soft); text-align: center; font-variant-numeric: tabular-nums; }
.lb-row.top .lb-rank { color: var(--brand); }
.lb-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--line); }
.lb-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.lb-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lb-name em { flex: 0 0 auto; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 7px; border-radius: 999px; background: var(--brand); color: var(--on-brand); }
.lb-name small { color: var(--ink-soft); font-size: 12px; }
.lb-bar { height: 9px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.lb-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand-shine, var(--brand)); min-width: 3px; }
.lb-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 56px; }
.lb-gap { text-align: center; color: var(--ink-soft); letter-spacing: 0.3em; padding: 2px 0; }
.lb-funnel-row { display: grid; grid-template-columns: 44px 1fr 96px; align-items: center; gap: 10px; margin-bottom: 8px; }
.lb-step { font-size: 13px; font-weight: 700; color: var(--brand); text-align: right; font-variant-numeric: tabular-nums; }
.lb-funnel-bar { display: flex; align-items: center; justify-content: flex-end; min-width: 44px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--brand-shine, var(--brand)); color: var(--on-brand); }
.lb-funnel-bar b { font-size: 16px; font-variant-numeric: tabular-nums; }
.lb-funnel-label { font-size: 14px; }
.lb-outcome { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.lb-outcome div { display: flex; flex-direction: column; }
.lb-outcome small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.lb-outcome b { font-size: 17px; font-variant-numeric: tabular-nums; }
.lb-outcome span { font-size: 12px; color: var(--ink-soft); }
.lb-chart { width: 100%; height: auto; display: block; }
.lb-chart-short { max-height: 190px; }
.lb-axis { stroke: var(--line); stroke-width: 1; }
.lb-col { fill: var(--brand); opacity: 0.85; }
.lb-col:hover { opacity: 1; }
.lb-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.8; }
.lb-dot { fill: var(--paper-raised); stroke: var(--ink); stroke-width: 2; }
.lb-month { font-size: 11px; fill: var(--ink-soft); }
.lb-val-label { font-size: 10.5px; fill: var(--ink); font-weight: 600; }
.lb-key { display: inline-block; vertical-align: middle; margin: 0 4px 0 8px; }
.lb-key-col { width: 12px; height: 12px; border-radius: 3px; background: var(--brand); }
.lb-key-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); }
.lb-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lb-ring { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lb-ring svg { width: 100%; max-width: 120px; }
.lb-ring-bg { fill: none; stroke: var(--brand-soft); stroke-width: 4; }
.lb-ring-fg { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; }
.lb-ring b { position: absolute; top: 38%; font-size: 18px; font-variant-numeric: tabular-nums; }
.lb-ring span { font-weight: 600; margin-top: 4px; }
.lb-ring small { color: var(--ink-soft); font-size: 12px; }
.lb-pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; }
.lb-pipe-col { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.lb-pipe-n { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.lb-pipe-track { width: 100%; max-width: 64px; height: 130px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: flex-end; overflow: hidden; }
.lb-pipe-col small { font-size: 12px; color: var(--ink-soft); min-height: 15px; }
.lb-pipe-label { font-size: 12px; line-height: 1.2; }
@media (max-width: 1100px) { .lb-card, .lb-card.lb-wide, .lb-card.lb-half { grid-column: span 12; } }
@media (max-width: 600px) {
  .lb-row { grid-template-columns: 22px 30px minmax(0, 1fr) auto; gap: 8px; }
  .lb-bar { display: none; }
  .lb-card { padding: 14px; }
  .lb-funnel-row { grid-template-columns: 38px 1fr 80px; }
  .lb-pipe { gap: 6px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lb-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.lb-sum { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; box-shadow: 0 6px 24px var(--shadow); }
.lb-sum small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.lb-sum b { font-size: 24px; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.lb-delta { font-size: 12px; font-weight: 600; }
.lb-delta i { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.lb-delta.up { color: var(--sage); }
.lb-delta.down { color: var(--rust); }
.lb-delta.flat { color: var(--ink-soft); font-weight: 400; }
.lb-funnel { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.lb-fstage { fill: var(--brand); stroke: var(--paper-raised); stroke-width: 2; }
.lb-fstage-1 { opacity: 1; } .lb-fstage-2 { opacity: 0.85; } .lb-fstage-3 { opacity: 0.7; } .lb-fstage-4 { opacity: 0.55; }
.lb-fnum { font-size: 17px; font-weight: 700; fill: var(--on-brand); font-variant-numeric: tabular-nums; }
.lb-flabel { font-size: 14px; fill: var(--ink); font-weight: 600; }
.lb-fstep { font-size: 11px; fill: var(--ink-soft); }
.lb-pipe-track { position: relative; justify-content: center; }
.lb-pipe-value { position: absolute; bottom: 0; left: 0; right: 0; background: var(--brand-soft); border-top: 2px solid var(--brand); border-radius: 8px 8px 0 0; }
.lb-pipe-count { position: absolute; bottom: 0; left: 22%; right: 22%; background: var(--brand-shine, var(--brand)); border-radius: 8px 8px 0 0; display: flex; align-items: flex-start; justify-content: center; }
.lb-pipe-count b { font-size: 12px; color: var(--on-brand); padding-top: 3px; }
.lb-key-soft { background: var(--brand-soft); border: 1px solid var(--brand); }
.lb-two { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 18px; align-items: center; }
.lb-legend p { margin: 0 0 8px; }
@media (max-width: 900px) { .lb-summary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lb-two { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.lb-grid-line { stroke-dasharray: 3 4; opacity: 0.7; }

.range-row .lb-team { margin-left: auto; }
.lb-switch { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.lb-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; border: 1px solid transparent; color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.lb-switch a i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-soft); background: transparent; }
.lb-switch a.on { color: var(--ink); border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.lb-switch a.on i { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 2px var(--paper-raised); }

/* Soft page swaps (static/js/softnav.js): a gentle fade instead of the whole screen reloading */
main.wrap { transition: opacity 0.14s ease; }
main.wrap.soft-loading { opacity: 0.55; }
main.wrap.soft-in { animation: soft-in 0.2s ease-out; }
@keyframes soft-in { from { opacity: 0.55; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main.wrap, main.wrap.soft-in { transition: none; animation: none; } }
/* Leaderboard: all rankings are already on the page; switching just shows one */
.lb-board { display: none; }
.lb-board.on { display: block; animation: lb-fade 0.22s ease-out; }
.lb-tabs[data-group] { display: none; }
.lb-tabs[data-group].on { display: flex; }
@keyframes lb-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lb-bar i { transition: width 0.3s ease; }

/* ---------- Leaderboard: modern toolbar, date menu and cards ---------- */
.lb-controls { position: relative; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-start; margin: 4px 0 18px; }
.lb-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--paper-raised); border: 1px solid var(--line); box-shadow: 0 1px 2px var(--shadow); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lb-seg::-webkit-scrollbar { display: none; }
.lb-seg a { padding: 7px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.lb-seg a:hover { color: var(--ink); background: var(--brand-soft); }
.lb-seg a.on { background: var(--brand); color: var(--on-brand); font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent); }
.lb-pop-wrap { position: relative; }
.lb-datebtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px var(--shadow); transition: border-color 0.15s, background 0.15s; }
.lb-datebtn:hover, .lb-datebtn[aria-expanded="true"] { border-color: var(--brand); }
.lb-datebtn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.lb-datebtn svg { flex: none; opacity: 0.85; }
.lb-datebtn .lb-caret { opacity: 0.6; transition: transform 0.15s; }
.lb-datebtn[aria-expanded="true"] .lb-caret { transform: rotate(180deg); }
.lb-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 330px; max-width: calc(100vw - 32px); padding: 16px; border-radius: 18px; background: var(--paper-raised); border: 1px solid var(--line); box-shadow: 0 18px 48px var(--shadow), 0 2px 8px var(--shadow); animation: lb-fade 0.16s ease-out; }
.lb-pop[hidden] { display: none; }
.lb-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lb-pop-head b { font-size: 15px; font-variant-numeric: tabular-nums; }
.lb-pop-head a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--ink-soft); text-decoration: none; font-size: 18px; line-height: 1; }
.lb-pop-head a:hover { background: var(--brand-soft); color: var(--brand); }
.lb-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lb-months a { padding: 8px 0; text-align: center; border-radius: 10px; font-size: 13.5px; color: var(--ink); text-decoration: none; transition: background 0.12s; }
.lb-months a:hover { background: var(--brand-soft); color: var(--brand); }
.lb-months a.on { background: var(--brand); color: var(--on-brand); font-weight: 600; }
.lb-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.lb-custom label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lb-custom label > span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.lb-custom .dmy-date { width: 100%; gap: 4px; }
.lb-custom .dmy-input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; }
.lb-custom .dmy-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.lb-custom .dmy-cal { font-size: 0; width: 34px; height: 34px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--paper) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8782' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E"); }
.lb-apply { grid-column: 1 / -1; padding: 10px; border: 0; border-radius: 11px; background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 600; cursor: pointer; transition: filter 0.15s; }
.lb-apply:hover { filter: brightness(1.06); }
.lb-controls .lb-team { margin-left: auto; }
.lb-controls .lb-team select { padding: 9px 34px 9px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 500; box-shadow: 0 1px 2px var(--shadow); }
/* cards: softer, roomier, a hint of the brand colour */
.lb-card { border-radius: 22px; padding: 22px 24px; border-color: color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 1px 2px var(--shadow), 0 10px 30px color-mix(in srgb, var(--shadow) 70%, transparent); }
.lb-head h2 { font-size: 16px; letter-spacing: 0.01em; }
.lb-sum { border-radius: 20px; padding: 18px 20px; position: relative; overflow: hidden; box-shadow: 0 1px 2px var(--shadow), 0 10px 30px color-mix(in srgb, var(--shadow) 70%, transparent); }
.lb-sum::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 10%, transparent), transparent); pointer-events: none; }
.lb-sum b { font-size: 28px; letter-spacing: -0.01em; }
.lb-tabs { border-radius: 14px; background: var(--paper); }
.lb-tabs a { border-radius: 10px; }
.lb-row { border-radius: 14px; }
.lb-switch a { border-radius: 12px; }
@media (max-width: 600px) { .lb-pop { position: fixed; left: 16px; right: 16px; top: auto; width: auto; max-width: none; } }
/* Teams list in the side menu: the person's role sits under their name, so long role names fit */
.side-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.side-who b { font-weight: 500; }
.side-who small { font-size: 11px; opacity: 0.7; }
.side-link.active .side-who small { opacity: 0.85; }

/* ---------- Money page: same modern look and colours as the Leaderboard ---------- */
.money-page .settings-card, .money-page .balance { border-radius: 22px; border-color: color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 1px 2px var(--shadow), 0 10px 30px color-mix(in srgb, var(--shadow) 70%, transparent); }
.money-page .settings-card { padding: 22px 24px; }
.money-page .money-split { gap: 18px; }
.money-page .money-side, .money-page .money-side:first-child, .money-page .money-side:last-child { padding: 0; border: 0; }
.money-page .money-side { display: flex; flex-direction: column; gap: 14px; }
.money-page .money-card h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: 0.01em; margin-bottom: 4px; }
.money-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.money-ico.out { background: color-mix(in srgb, var(--rust) 14%, transparent); color: var(--rust); }
.money-page .balance { position: relative; overflow: hidden; padding: 26px 20px 22px; margin-bottom: 18px; }
.money-page .balance::before { content: ""; position: absolute; left: 50%; top: -90px; width: 380px; height: 220px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 14%, transparent), transparent); pointer-events: none; }
.money-page .balance > * { position: relative; }
.money-page .balance-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.money-page .balance-amount { font-size: 48px; letter-spacing: -0.02em; color: var(--brand); }
.money-page .balance-amount.neg { color: var(--rust); }
.money-page .balance-split { gap: 12px; max-width: 520px; }
.money-page .balance-chip { border-radius: 16px; padding: 12px 16px; background: var(--paper); border-color: var(--line); }
.money-page .balance-chip span { display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
.money-page .balance-chip.in b { color: var(--brand); }
.money-page .balance-chip.in span svg { color: var(--brand); }
.money-page .balance-chip.out span svg { color: var(--rust); }
.money-page .balance-chip b { font-size: 22px; letter-spacing: -0.01em; }
.money-page .legend-head { font-weight: 600; }
.money-page .legend-bar { height: 5px; border-radius: 999px; background: var(--paper); border: 0; }
.money-page .legend-bar i { border-radius: 999px; }
.money-page .ring-track { stroke: var(--brand-soft); opacity: 1; }
.money-page .ring-center b { font-size: 24px; letter-spacing: -0.01em; }
.money-page .ring-tip { background: #0d1a12; color: #eaf7ef; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.money-page .log-tabs { gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); width: fit-content; max-width: 100%; margin-bottom: 8px; }
.money-page .log-tab { padding: 6px 14px; border: 0; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.money-page .log-tab:hover { color: var(--ink); background: var(--brand-soft); }
.money-page .log-tab.on { background: var(--brand); color: var(--on-brand); font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent); }
.money-page .log-total b.in, .money-page .log-amt.in { color: var(--brand); }
.money-page .log-row { border-top-color: color-mix(in srgb, var(--line) 70%, transparent); }
.money-page .log-day { letter-spacing: 0.08em; }
.money-page .link-card-amount, .money-page .link-card-sub { color: var(--brand); }
.money-page .link-card:hover { border-color: var(--brand); }
@media (max-width: 760px) { .money-page .balance-amount { font-size: 38px; } .money-page .settings-card { padding: 16px; } }

/* ---------- Requests ---------- */
.rq-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rq-top .lb-seg small { opacity: 0.7; margin-left: 4px; font-size: 11px; }
.rq-new { white-space: nowrap; }
.rq-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rq-filters input[type="search"] { flex: 1 1 240px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); color: var(--ink); font: inherit; }
.rq-filters select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 14px; }
.rq-subject { color: var(--ink-soft); font-size: 13px; }
.rq-overdue { color: var(--rust); font-weight: 600; }
.rq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; }
.rq-wide { grid-column: 1 / -1; }
.rq-form textarea, .portal-request-form textarea, .rq-compose textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; resize: vertical; box-sizing: border-box; }
.rq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.rq-side .settings-card { margin-bottom: 16px; }
.rq-side h2 { margin-top: 0; font-size: 15px; }
.rq-props { display: grid; gap: 10px; }
.rq-links { display: grid; grid-template-columns: 80px 1fr; gap: 8px 10px; margin: 0; font-size: 14px; }
.rq-links dt { color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.rq-links dd { margin: 0; overflow-wrap: anywhere; }
.rq-compose { margin-bottom: 16px; }
.rq-kind { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); margin-bottom: 10px; }
.rq-kind label { padding: 6px 12px; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink-soft); }
.rq-kind label.off { opacity: 0.4; cursor: not-allowed; }
.rq-kind input { position: absolute; opacity: 0; pointer-events: none; }
.rq-kind label:has(input:checked) { background: var(--brand); color: var(--on-brand); font-weight: 600; }
.rq-compose-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; }
.rq-compose-foot select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 13.5px; }
.rq-thread { display: grid; gap: 10px; }
.rq-event { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-raised); }
.rq-event header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; }
.rq-event header time { margin-left: auto; color: var(--ink-soft); font-size: 12px; }
.rq-event p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rq-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.rq-event.internal { background: color-mix(in srgb, var(--warning-bg) 70%, var(--paper-raised)); border-style: dashed; }
.rq-event.from-customer { border-left: 3px solid var(--brand); }
.rq-event.rq-status, .rq-event.rq-assign, .rq-event.rq-field { padding: 8px 14px; background: transparent; border-style: dashed; color: var(--ink-soft); }
.rq-statusline { margin: 0; text-align: center; font-size: 12px; color: var(--ink-soft); }
.rq-portal .rq-event.from-team { border-left: 3px solid var(--ink-soft); }
.portal-request-form { display: grid; gap: 14px; max-width: 640px; margin-top: 18px; }
@media (max-width: 900px) { .rq-grid { grid-template-columns: 1fr; } .rq-form { grid-template-columns: 1fr; } }

/* ---------- Saved Lists ---------- */
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sl-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper-raised); color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px var(--shadow); transition: border-color 0.15s, transform 0.15s; }
.sl-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.sl-top { display: flex; gap: 6px; }
.sl-card h2 { margin: 8px 0 0; font-size: 17px; }
.sl-size { margin: 0; color: var(--ink-soft); } .sl-size b { color: var(--brand); font-size: 22px; margin-right: 4px; }
.sl-desc { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.sl-meta { margin: auto 0 0; padding-top: 8px; font-size: 12px; color: var(--ink-soft); }
.sl-form { display: grid; gap: 16px; max-width: 900px; }
.sl-basics { display: grid; gap: 14px; }
.sl-choice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sl-choice-label { width: 70px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.sl-opt { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; font-size: 14px; }
.sl-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.sl-opt input { margin-top: 3px; }
.sl-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.sl-fields .field input, .sl-fields .field select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.sl-checks { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px 12px; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sl-checks legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); padding: 0 6px; }
.sl-checks label { font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.sl-detail-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; }
.sl-rules-view ul { margin: 6px 0 10px; padding-left: 18px; }
.sl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.sl-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.sl-inline label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); min-width: 90px; }
.sl-inline select, .sl-inline input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.sl-task input[name="body"] { flex: 1 1 200px; }

.rq-new, .rq-top a.btn-primary, .sl-detail-top a.btn-primary { text-decoration: none; }

/* ---------- Messages ---------- */
.ms-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-left: 6px; vertical-align: middle; flex: none; }
.ms-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.ms-list { border: 1px solid var(--line); border-radius: 18px; background: var(--paper-raised); overflow: hidden; max-height: 76vh; overflow-y: auto; }
.ms-search { padding: 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper-raised); z-index: 1; }
.ms-search input { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.ms-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); color: var(--ink); text-decoration: none; }
.ms-row:hover { background: var(--brand-soft); }
.ms-row.on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.ms-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--line); }
.ms-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.ms-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.ms-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ms-row.unread .ms-top b, .ms-row.unread .ms-subject { font-weight: 700; }
.ms-top time { color: var(--ink-soft); font-size: 12px; flex: none; }
.ms-subject { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-preview { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-empty { padding: 20px; color: var(--ink-soft); }
.ms-pane { border: 1px solid var(--line); border-radius: 18px; background: var(--paper-raised); padding: 18px 20px; min-width: 0; }
.ms-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ms-head h2 { margin: 0 0 4px; font-size: 18px; }
.ms-sub { margin: 0; color: var(--ink-soft); font-size: 13px; }
.ms-props { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.ms-props label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.ms-props select, .ms-props input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.ms-link-request { margin-left: auto; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ms-thread { display: grid; gap: 10px; margin: 14px 0; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.ms-msg { max-width: 82%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.ms-msg.customer { justify-self: start; border-bottom-left-radius: 4px; }
.ms-msg.staff { justify-self: end; border-bottom-right-radius: 4px; background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.ms-msg.comment { justify-self: stretch; max-width: none; background: color-mix(in srgb, var(--warning-bg) 70%, var(--paper-raised)); border-style: dashed; }
.ms-msg header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12.5px; }
.ms-msg header time { margin-left: auto; color: var(--ink-soft); font-size: 11.5px; }
.ms-msg p { margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-event { margin: 0; text-align: center; font-size: 12px; color: var(--ink-soft); }
.ms-compose textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; resize: vertical; }
.ms-blank { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.ms-blank h2 { color: var(--ink); margin-top: 0; }
.ms-channels { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; }
@media (max-width: 900px) { .ms-grid { grid-template-columns: 1fr; } .ms-list { max-height: 40vh; } .ms-msg { max-width: 94%; } }

/* ---------- Meeting Notes ---------- */
.mt-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; }
.mt-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.rq-form select[multiple] { padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; }
.rq-form input:not([type="checkbox"]):not([type="hidden"]), .rq-form select:not([multiple]) { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }

/* ---------- Call Scripts ---------- */
.cs-form { display: grid; gap: 16px; max-width: 880px; }
.cs-wide { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; resize: vertical; }
.cs-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 10px; background: var(--paper); }
.cs-item-head { display: flex; gap: 6px; align-items: center; } .cs-item-head .cs-grip { color: var(--ink-soft); margin-right: auto; letter-spacing: -2px; }
.cs-item-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-item input, .cs-item select, .cs-item textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 14px; }
.cs-preview { padding-left: 20px; display: grid; gap: 10px; }
.cs-answers { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 8px 16px; margin: 0; }
.cs-answers dt { color: var(--ink-soft); font-size: 13.5px; } .cs-answers dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.sr-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; color: var(--ink-soft); }
.sr-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; } .sr-bar i { display: block; height: 100%; background: var(--brand-shine, var(--brand)); transition: width 0.25s; }
.sr-step[hidden] { display: none; }
.sr-say { font-size: 20px; line-height: 1.4; margin: 8px 0; font-weight: 500; }
.sr-help { color: var(--ink-soft); margin: 0 0 12px; font-size: 14px; }
.sr-step textarea, .sr-step input[type="number"], .sr-step input:not([type]), .sr-step select, .sr-task input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; }
.sr-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-choices label { cursor: pointer; } .sr-choices input { position: absolute; opacity: 0; pointer-events: none; }
.sr-choices span { display: inline-block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 15px; }
.sr-choices input:checked + span { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: 600; }
.sr-choices input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.sr-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sr-nav-mid { display: flex; gap: 6px; }
.sr-nav .link-pill:disabled { opacity: 0.4; cursor: default; }
.sr-msg { color: var(--rust); margin: 8px 0 0; }
.sr-task { display: grid; grid-template-columns: 170px 1fr; gap: 8px; margin: 8px 0; }
.sr-side .settings-card { margin-bottom: 14px; } .sr-side h2 { margin-top: 0; font-size: 15px; }
.sr-obj { border-top: 1px solid var(--line); padding: 8px 0; } .sr-obj summary { cursor: pointer; font-weight: 500; } .sr-obj p { margin: 8px 0 0; color: var(--ink-soft); white-space: pre-wrap; }
@media (max-width: 900px) { .sr-layout { grid-template-columns: 1fr; } .sr-task { grid-template-columns: 1fr; } .cs-item-row { grid-template-columns: 1fr; } .cs-answers { grid-template-columns: 1fr; } }

/* ---------- Quick Replies ---------- */
.qr-btn { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-raised); color: var(--ink-soft); font: inherit; font-size: 12.5px; cursor: pointer; }
.qr-btn:hover { border-color: var(--brand); color: var(--brand); } .qr-btn small { opacity: 0.65; margin-left: 2px; }
.qr-panel { position: fixed; z-index: 2000; width: 330px; max-height: 260px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-raised); box-shadow: 0 18px 48px var(--shadow), 0 2px 8px var(--shadow); }
.qr-search { width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.qr-item { padding: 8px 10px; border-radius: 10px; cursor: pointer; display: grid; gap: 2px; } .qr-item.on, .qr-item:hover { background: var(--brand-soft); }
.qr-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; } .qr-top code { color: var(--brand); font-size: 12px; }
.qr-prev { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-empty { padding: 12px; color: var(--ink-soft); font-size: 13.5px; }
.qr-code { color: var(--brand); font-size: 13px; }
.qr-import { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.qr-vars { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; } .qr-vars code { color: var(--brand); }
.qr-vars-btns { gap: 6px; }

.pf-access { margin-bottom: 16px; } .pf-access h2 { margin-top: 0; font-size: 15px; }
.pf-access-form { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.pf-access-select { display: flex; flex-direction: column; gap: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.pf-access-select select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; }
.lead-list-add { display: inline-flex; gap: 6px; align-items: center; } .lead-list-add select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 13px; max-width: 160px; }

.ms-head-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ms-file { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); color: var(--ink); text-decoration: none; max-width: 100%; }
.ms-file img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; } .ms-file span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .ms-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .ms-file small { color: var(--ink-soft); font-size: 11.5px; }
.ms-attach { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--ink-soft); } .ms-attach input { max-width: 240px; }
.ms-msg.is-deleted { opacity: 0.65; border-style: dashed; } .ms-deleted-note { color: var(--rust); font-size: 12px; margin: 4px 0 0; }
.ms-item-admin { margin-top: 6px; text-align: right; }
.rq-bad { color: var(--rust); font-weight: 700; } .sl-opt.off { opacity: 0.55; cursor: not-allowed; }
.qr-pending { padding: 8px 0; border-top: 1px solid var(--line); margin-top: 8px; } .qr-pending form { margin-left: 6px; }
.dnc-banner { font-size: 15px; }

/* ---------- Recurring orders ---------- */
.portal-col-repeat { min-width: 130px; }
.portal-repeat-select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 13px; }
.portal-recurring .portal-tile-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Teams menu: person dropdown ---------- */
.side-person-wrap { display: block; }
.side-person-wrap > .side-person { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.side-caret { margin-left: auto; font-size: 11px; opacity: 0.6; }
.side-person-menu { margin: 2px 0 6px 34px; display: grid; gap: 2px; border-left: 2px solid var(--line); padding-left: 8px; }
.side-person-menu[hidden] { display: none; }
.side-person-menu a, .side-person-menu button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.side-person-menu a:hover, .side-person-menu button:hover { background: var(--brand-soft); color: var(--brand); }

/* ---------- Chat box (direct messages), bottom-right ---------- */
.chat-dock { position: fixed; right: 80px; bottom: 0; z-index: 60; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 10px; pointer-events: none; }
.chat-box { pointer-events: auto; width: 300px; height: 380px; display: flex; flex-direction: column; background: var(--paper-raised); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 8px 30px var(--shadow); overflow: hidden; }
.chat-box.min { height: 44px; }
.chat-box.min .chat-msgs, .chat-box.min .chat-form { display: none; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--brand); color: var(--on-brand); cursor: pointer; flex: 0 0 auto; min-height: 44px; }
.chat-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--on-brand); color: var(--brand); flex: none; }
.chat-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; color: inherit; text-decoration: none; }
.chat-title:hover { text-decoration: underline; }
.chat-badge { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--rust); color: #fff; }
.chat-badge[hidden] { display: none; }
.chat-box.has-unread .chat-head { box-shadow: inset 0 -3px 0 var(--rust); }
.chat-btn { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
.chat-btn:hover { background: rgba(255, 255, 255, 0.2); }
.chat-msgs { flex: 1 1 auto; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; background: var(--paper); }
.chat-day { align-self: center; font-size: 11px; color: var(--ink-soft); margin: 6px 0 2px; }
.chat-row { display: flex; }
.chat-row.mine { justify-content: flex-end; }
.chat-bubble { max-width: 80%; padding: 7px 11px; border-radius: 16px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-row.theirs .chat-bubble { background: var(--neutral-bg); color: var(--ink); border-bottom-left-radius: 5px; }
.chat-row.mine .chat-bubble { background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 5px; }
.chat-error { align-self: center; font-size: 12px; color: var(--rust); }
.chat-form { display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--line); background: var(--paper-raised); flex: 0 0 auto; }
.chat-input { flex: 1 1 auto; resize: none; max-height: 90px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.3; }
.chat-send { border: 0; background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 16px; cursor: pointer; }
@media (max-width: 700px) {
  .chat-dock { right: 0; left: 0; }
  .chat-box { width: 100%; height: 70vh; border-radius: 14px 14px 0 0; }
  .chat-box.min { height: 44px; }
}

/* ---------- Team & Users: collapsible people, bulk bar ---------- */
.person-row > summary.person-summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.person-row > summary.person-summary::-webkit-details-marker { display: none; }
.person-caret { margin-left: auto; font-size: 13px; opacity: 0.6; transition: transform 0.15s; }
.person-row[open] .person-caret { transform: rotate(180deg); }
.person-body { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.person-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.people-selectall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); margin: 0 10px; }
.bulk-bar-users { flex-wrap: wrap; justify-content: center; row-gap: 8px; max-width: min(96vw, 1100px); }
.bulk-bar-users .bulk-group { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Person profile: settings gear and panel ---------- */
.profile-gear { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink-soft); cursor: pointer; }
.profile-gear:hover, .profile-gear.on { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.pf-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pf-set-block { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.pf-set-block h3 { margin: 0 0 8px; font-size: 14px; }
.pf-stack { display: grid; gap: 8px; }
.pf-stack label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.pf-stack select, .pf-stack input[type="text"] { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 14px; }
.pf-stack .mt-check { display: flex; align-items: flex-start; gap: 8px; }
.pf-danger { border-color: color-mix(in srgb, var(--rust) 45%, var(--line)); }
.chat-row { align-items: center; gap: 6px; }
.chat-bubble.unsent { background: transparent !important; color: var(--ink-soft) !important; border: 1px dashed var(--line); font-style: italic; }
.chat-unsend { opacity: 0; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 11px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.chat-row:hover .chat-unsend, .chat-unsend:focus { opacity: 1; }
.chat-unsend:hover { color: var(--rust); text-decoration: underline; }
@media (hover: none) { .chat-unsend { opacity: 0.7; } }
.chat-status { align-self: flex-end; font-size: 11px; color: var(--ink-soft); margin: -1px 4px 2px; }
.chat-status.seen { color: var(--brand); font-weight: 600; }
.bell-chat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; border-radius: 10px; }
.bell-chat:hover { background: var(--brand-soft); }
.bell-chat .bell-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--brand-soft); color: var(--brand); flex: none; }
.bell-chat .bell-text { min-width: 0; flex: 1; display: grid; gap: 1px; }
.bell-chat b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.bell-chat.unread b { font-weight: 700; }
.bell-chat small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: 12.5px; }
.bell-chat.unread small { color: var(--ink); font-weight: 600; }
.bell-chat em { font-style: normal; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.bell-chat .bell-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.bell-section { padding: 8px 14px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.pf-comp { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pf-comp > h3 { margin: 0 0 4px; font-size: 16px; }

/* ---------- Person settings page ---------- */
.us-wrap { max-width: 900px; margin: 0 auto; }
.us-top { display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; }
.us-top h1 { margin: 0 0 6px; font-size: 26px; }
.us-sub { font-weight: 400; color: var(--ink-soft); font-size: 18px; margin-left: 6px; }
.us-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px 32px; padding: 24px 26px; margin-bottom: 18px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 18px var(--shadow); }
.us-card.us-wide { grid-template-columns: 1fr; }
.us-head h2 { margin: 0 0 6px; font-size: 17px; }
.us-head p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.us-form { display: grid; gap: 16px; align-content: start; max-width: 460px; }
.us-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.us-form select, .us-form input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.us-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.us-form .us-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--ink); }
.us-form .us-check input { margin-top: 3px; flex: none; }
.us-form .us-check small { display: block; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
.us-temp-pass { font-family: ui-monospace, Menlo, monospace; font-size: 22px; font-weight: 700; letter-spacing: 0.06em; margin: 8px 0; user-select: all; }
.us-actions { display: flex; gap: 10px; align-items: center; }
.us-body { display: grid; gap: 16px; }
.us-sub-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.us-sub-card h3 { margin: 0 0 8px; font-size: 15px; }
.us-danger { border-color: color-mix(in srgb, var(--rust) 45%, var(--line)); }
@media (max-width: 760px) { .us-card { grid-template-columns: 1fr; padding: 18px; } .us-row { grid-template-columns: 1fr; } .us-form { max-width: none; } }

/* ---------- Leads: search / filter / sort in a card, Business | Residential tabs above ---------- */
.search-card { margin: 0 0 18px; padding: 16px 20px; overflow: visible; }
.search-card .search-row { margin: 0; }

/* ---------- Lead tables: Disposition | Appointment | Notes, each in its own column ---------- */
.cell-disp, .cell-appt, .cell-notes { vertical-align: top; white-space: nowrap; }
.cell-disp > *, .cell-appt > *, .cell-notes > * { display: block; width: fit-content; }
.cell-disp > * + *, .cell-appt > * + *, .cell-notes > * + * { margin-top: 8px; }
.cell-disp .row-disp-pill, .cell-appt .row-disp-pill { margin-bottom: 0; }

/* ---------- Lead tables: a tidier, narrower layout ---------- */
.leads-table { min-width: 0; }
.leads-table thead th { padding: 11px 9px; }
.leads-table tbody td { padding: 12px 9px; }
.leads-table th.th-biz, .leads-table td.cell-biz { position: sticky; left: 0; z-index: 1; background: var(--paper-raised); min-width: 170px; max-width: 230px; }
.leads-table tbody tr:hover td.cell-biz { background: color-mix(in srgb, var(--brand) 5%, var(--paper-raised)); }
.leads-table .contact-links .link-pill { max-width: 175px; }
.leads-table td.cell-disp { min-width: 112px; }
.leads-table td.cell-appt { min-width: 118px; }
.leads-table td.cell-notes { min-width: 84px; }
/* Appointment: a soft green card with the date and time, and one quiet button under it */
.cell-appt .appt-card { display: inline-grid; gap: 2px; padding: 7px 12px; border-radius: 10px; line-height: 1.25;
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line)); }
.cell-appt .appt-date { font-weight: 700; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cell-appt .appt-time { font-size: 12px; font-weight: 600; color: var(--brand); }
.cell-appt .appt-btn { font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.cell-appt .appt-btn.appt-edit { background: transparent; border-color: transparent; color: var(--ink-soft); padding-left: 2px; text-decoration: underline; text-underline-offset: 3px; }
.cell-appt .appt-btn.appt-edit:hover { color: var(--brand); background: transparent; }
.cell-appt .appt-btn.appt-new { border-style: dashed; }

/* Notes: the button stays one line, but the text under it wraps in a narrow column like before (it must never stretch the table) */
.cell-notes { white-space: normal; max-width: 230px; }
.cell-notes .note-preview { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; width: 200px; max-width: 200px; white-space: normal; overflow-wrap: anywhere; }
.cell-notes .btn-mark, .cell-notes .history-toggle { white-space: nowrap; }


/* Settings > Connections: a grid of service cards, grouped by purpose */
.conn-section { margin: 0 0 26px; }
.conn-h { margin: 0 0 2px; font-size: 18px; }
.conn-sub { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.conn-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px var(--shadow); min-width: 0; }
.conn-wide { grid-column: 1 / -1; }
.conn-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conn-top b { font-size: 15px; }
.conn-note { margin: 0; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.conn-actions { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; }
.conn-platform { margin: 8px 0 0; padding: 14px 18px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; }
.conn-platform > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.conn-platform > summary::-webkit-details-marker { display: none; }
.conn-platform-title { font-weight: 700; font-size: 15px; }
.conn-platform-title small { font-weight: 400; color: var(--ink-soft); margin-left: 8px; }
.conn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.conn-group { margin: 20px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 600px) { .conn-grid { grid-template-columns: 1fr; } }

.pp-supplier { margin: 0 0 14px; }
.pp-supplier > summary { cursor: pointer; padding: 8px 0; font-size: 15px; }
.pp-all { margin-left: 12px; font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.pp-row input[type=checkbox] { margin-right: 10px; }

/* Sortable column titles: click to sort, the arrows beside the title show it can be. */
.th-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.th-sort:hover { color: var(--brand); }
.th-sort.on { color: var(--brand); }
.th-sort-icon { flex-shrink: 0; opacity: 0.55; }
.th-sort-icon path { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.th-sort-icon path.lit { opacity: 1; stroke-width: 2.2; }
.th-sort:hover .th-sort-icon, .th-sort.on .th-sort-icon { opacity: 1; }

/* Settings > Wording */
.wording-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 18px; margin-top: 8px; }
.wording-row { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.wording-what { color: var(--ink-soft); }

/* Loan qualification sheet */
.q-progress-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.q-bar { height: 8px; border-radius: 999px; background: var(--line); margin: 12px 0 4px; overflow: hidden; }
.q-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.q-missing { margin-top: 8px; font-size: 13px; }
.q-missing summary { cursor: pointer; color: var(--ink-soft); }
.q-missing ul { margin: 6px 0 0 18px; padding: 0; columns: 2; }
.q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.q-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.q-full { grid-column: 1 / -1; }
.q-label { color: var(--ink-soft); }
.q-req { color: var(--rust); font-style: normal; margin-left: 3px; }
.q-field input, .q-field select, .q-field textarea { width: 100%; }
.q-secret { display: flex; align-items: center; gap: 8px; }
.q-secret input { flex: 1; }
.q-revealed { font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.q-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; padding: 4px 0; }
.q-docs { display: grid; gap: 4px; }
.q-doc { font-size: 14px; padding: 3px 0; }
@media (max-width: 700px) { .q-grid { grid-template-columns: 1fr; } .q-missing ul { columns: 1; } }

/* Small phones (375px): the logo plus the four icon buttons were 20px wider than the screen, which made every
   signed-in page scroll sideways and clipped the menu button. Slightly smaller logo and tighter icons fix it. */
@media (max-width: 420px) {
  .topbar .wordmark { font-size: 16px; }
  .topbar-right { gap: 4px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
}

/* Front door of the Bridge domain: a short "what is this" under the sign-in choices */
.bx-about { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.bx-about-title { margin: 0 0 6px; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: #fff; }
.bx-about-lede { margin: 0 0 14px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); text-wrap: balance; }
.bx-about-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bx-about-list li { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.bx-about-list strong { color: #fff; font-weight: 600; }
.bx-about-contact { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--ink-soft); }

/* Logos: a company's own logo in the top bar, and the preview + upload on the settings pages */
.brand-own-logo { height: 1.75em; width: auto; max-width: 190px; object-fit: contain; display: block; }
.logo-preview { display: inline-block; margin: 4px 0 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); }
.logo-preview img { display: block; height: 48px; width: auto; max-width: 260px; object-fit: contain; }
.logo-upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.logo-upload-form input[type="file"] { max-width: 100%; }

/* A company's own logo sits in the middle with its name; "Powered by itsthebridge" is small on the right */
.brand-own-name { margin-left: 0.45em; font-family: "Outfit", system-ui, sans-serif; font-weight: 600; font-size: 0.62em; letter-spacing: -0.005em; color: var(--ink); max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.powered-by { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding-right: 12px; border-right: 1px solid var(--line); font-size: 20px; text-decoration: none; opacity: 0.8; }
.powered-by:hover { opacity: 1; }
.powered-by-label { font-family: var(--font-body, inherit); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.powered-by .bridge-logo { height: 0.6em; }
.powered-by-foot { display: none; margin: 28px 0 8px; text-align: center; font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; }
.powered-by-foot strong { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  .powered-by { display: none; }
  .powered-by-foot { display: block; }
  .brand-own-name { max-width: 7em; }
}

/* Leads page on a phone: the closed (invisible) filter panel still stuck out past the screen edge and made the whole page scroll sideways.
   Closed = not there; open = fits inside the screen. */
@media (max-width: 640px) {
  .filter-panel:not(.open) { display: none; }
  .filter-wrap { position: static; }
  .filter-panel { position: absolute; left: 16px; right: 16px; top: auto; width: auto; max-width: none; margin-top: 6px; }
}

/* Company sign-in: which company you are signing in to, and the optional company code */
.company-banner { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; color: var(--ink-soft); }
.company-banner img { height: 34px; width: auto; max-width: 120px; object-fit: contain; }
.company-banner strong { color: var(--ink); }
.bx-body .company-banner { border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.7); }
.bx-body .company-banner strong { color: #fff; }
.company-code { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.company-code summary { cursor: pointer; width: max-content; }
.company-code .field { margin-top: 8px; }

/* Pricing tab: send the pricing sheet (download / email pop-up) */
.pricing-share { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pricing-share-btn { text-decoration: none; display: inline-block; }
.email-attachment-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 2px 0 4px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 13px; background: var(--paper-raised); color: var(--ink); }
.email-attachment-chip[hidden] { display: none; }
.email-attachment-chip a { font-size: 12px; }
.sheet-editor { margin: 4px 0 12px; }
.sheet-editor .state-group { margin-bottom: 8px; }
.sheet-price-input { width: 90px; font: inherit; font-variant-numeric: tabular-nums; text-align: right; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); }
.sheet-price-input.pricing-input-overridden { background: var(--brand-soft); border-color: var(--brand); font-weight: 600; }
.sheet-price-input:hover { border-color: var(--line); }
.sheet-price-input:focus-visible { outline: none; border-color: var(--brand); background: var(--paper); }
#sheetTierToggle .mode-toggle-option { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
#sheetTierToggle .mode-toggle-option.active { background: var(--paper-raised); }

/* Companies page: collapsible sections and company cards (closed by default) */
.org-section { margin-bottom: 8px; }
.org-section > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; user-select: none; }
.org-section > summary::-webkit-details-marker, .org-card > summary::-webkit-details-marker { display: none; }
.org-chevron { display: inline-block; font-size: 0.8em; color: var(--ink-soft); transition: transform 0.15s ease; }
details[open] > summary > .org-chevron { transform: rotate(90deg); }
.org-card { margin-bottom: 10px; padding-top: 0; padding-bottom: 0; }
.org-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 0; user-select: none; }
.org-card > summary h2 { font-size: 18px; }
.org-card[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.org-card-body { padding-bottom: 18px; }
.org-section > summary.org-section-title { font-weight: 700; }
.org-section > summary.org-section-title .muted { font-weight: 400; font-size: 15px; }

/* Supplier Management setup cards: closed by default, one line each (title + what it is for), open when needed */
.tool-card { padding: 0; margin-bottom: 10px; overflow: hidden; }
.tool-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.tool-card > summary::-webkit-details-marker { display: none; }
.tool-card > summary::after { content: "▸"; margin-left: auto; flex-shrink: 0; color: var(--ink-soft); transition: transform 0.15s; }
.tool-card[open] > summary::after { transform: rotate(90deg); }
.tool-card > summary:hover { background: var(--brand-soft); }
.tool-card > summary h2 { margin: 0; flex: 0 0 auto; }
.tool-card > summary .tool-hint { color: var(--ink-soft); font-size: 13px; min-width: 0; }
.tool-card[open] > summary { border-bottom: 1px solid var(--line); }
.tool-card > .tool-body { padding: 18px 20px 20px; }
@media (max-width: 760px) {
  .tool-card > summary { flex-wrap: wrap; gap: 4px 12px; padding-right: 40px; position: relative; }
  .tool-card > summary::after { position: absolute; right: 16px; top: 16px; }
  .tool-card > summary .tool-hint { flex-basis: 100%; padding-left: 37px; }
}

/* Supplier Management tabs. Without script every section simply shows; with it only the chosen tab does. */
.sm-tabs { margin-top: 4px; }
.sm-tabs .set-tab { font-family: inherit; cursor: pointer; }
.sm-tabs-ready .sm-panel:not(.active) { display: none; }
.sm-panel > .tool-card:first-child, .sm-panel > :first-child { margin-top: 0; }
@media (max-width: 640px) { .sm-tabs { gap: 4px; } .sm-tabs .set-tab { flex: 1 1 auto; padding: 8px 10px; font-size: 13px; text-align: center; } }

/* Platform pages: the same pill tabs as Settings and Supplier Management */
.platform-tabs { margin-top: 4px; }
@media (max-width: 640px) { .platform-tabs { gap: 4px; } .platform-tabs .set-tab { padding: 8px 12px; font-size: 13px; } }

/* Log call pop-up (the Outcome column on the lead lists) */
.log-call-modal { max-width: 560px; width: calc(100% - 32px); }
.lc-group { border: 0; padding: 0; margin: 0 0 14px; }
.lc-group legend { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); padding: 0; margin: 0 0 8px; }
.lc-options { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-chip { position: relative; cursor: pointer; }
.lc-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lc-chip span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; background: var(--paper-raised); color: var(--ink); transition: background 0.12s, border-color 0.12s; }
.lc-chip:hover span { border-color: var(--brand); }
.lc-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.lc-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.lc-row { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr; gap: 10px; margin-bottom: 4px; }
.lc-row .dm-edit-label { margin: 0; }
@media (max-width: 560px) { .lc-row { grid-template-columns: 1fr; } }
.sb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; padding: 11px 18px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 14px; box-shadow: 0 8px 24px var(--shadow); max-width: calc(100% - 32px); }
.sb-toast[hidden] { display: none; }

/* A company's own sign-in page: its picture, its logo (on a light plate so any logo reads) or name, and a small credit in the corner */
.bx-company-logo { height: auto; max-height: 46px; max-width: 200px; width: auto; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.93); object-fit: contain; }
.bx-visual-company { position: absolute; top: 30px; left: 32px; z-index: 1; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); max-width: calc(100% - 64px); }
.bx-powered { position: absolute; z-index: 1; right: 22px; bottom: 18px; margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.bx-powered img { height: 14px; width: auto; display: block; opacity: 0.85; }
.login-picture-preview img { height: 150px; max-width: 100%; border-radius: 8px; object-fit: cover; }
@media (max-width: 860px) {
  .bx-visual-branded .bx-company-logo { top: 16px; left: 18px; max-height: 38px; }
  .bx-visual-company { top: 18px; left: 20px; font-size: 18px; }
  .bx-powered { right: 14px; bottom: 12px; }
}

/* the tab groups on the platform pages: Companies / Support / Platform. Each group wraps as one unit, so rows never break mid-group. */
.platform-tabs { gap: 8px 18px; }
.platform-tabs .tab-group { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .platform-tabs { gap: 8px 12px; } .platform-tabs .tab-group { gap: 4px; } }

/* Companies: My companies / Customer companies sub-tabs */
.org-subtabs { margin-top: 6px; }
.org-tabs-ready .org-panel:not(.active) { display: none; }
.org-panel-note { margin: 0 0 12px; }