/* ==========================================================================
   Daleel (Ikhlas Insurance Group) — design tokens
   --------------------------------------------------------------------------
   BRANDING: every color the app uses is declared in the two blocks below.
   To apply Ikhlas brand colors, change --brand-accent (and its dark step)
   and nothing else needs to be touched. The status colors are deliberately
   NOT themed — they carry meaning, not identity.
   ========================================================================== */

:root {
  color-scheme: light;

  --surface-page: #f9f9f7;
  --surface-1: #fcfcfb;
  --surface-2: #f2f1ed;
  --surface-raised: #ffffff;

  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;

  --line: #e1e0d9;
  --line-strong: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);

  /* Daleel green (Khalid, 2026-09-12: #007C64). Ink is the same hue, darker,
     for text on the wash; the status palette below is NOT rebranded, so the
     "good" green stays its own brighter shade and a badge never reads as a
     button. */
  --brand-accent: #007c64;
  --brand-accent-ink: #005a49;
  --brand-accent-wash: #e4f3ee;

  /* Status palette — fixed, never rebranded. Always paired with a text label. */
  --st-good: #0ca30c;
  --st-warning: #fab219;
  --st-serious: #ec835a;
  --st-critical: #d03b3b;
  --st-idle: #898781;
  --st-progress: #2a78d6;
  /* Green as *text* needs a darker step than green as a fill — #0ca30c only
     reaches 3.27:1 on the light surface, which is short for 12–13px labels. */
  --st-good-text: #006300;

  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 11, 11, 0.08);
  --shadow-lg: 0 12px 40px rgba(11, 11, 11, 0.16);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* The agent shell (2026-09-20). The hero band is dark in BOTH themes — it
     is the one loud thing on the page — so its ink is fixed white. --agent-spark
     is decoration on that dark band only (the best month, an up arrow); it is
     never a status and never appears on a light surface. */
  /* Chart series: seven carriers, in this fixed order, and grey for "Other".
     Validated for colour-blind separation on --surface-1 in both themes
     (dataviz validator, 2026-09-21). Identity only — never a status. */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-other: #898781;

  --agent-hero-a: #003a30;
  --agent-hero-b: #007c64;
  --agent-hero-c: #071a16;
  --agent-hero-ink: #ffffff;
  --agent-hero-muted: rgba(255, 255, 255, 0.74);
  --agent-hero-glass: rgba(255, 255, 255, 0.12);
  --agent-spark: #c8f56a;
  --agent-bar-bg: rgba(252, 252, 251, 0.86);
  --radius-xl: 20px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme='light'])) {
    color-scheme: dark;

    --surface-page: #0d0d0d;
    --surface-1: #1a1a19;
    --surface-2: #222221;
    --surface-raised: #232322;

    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;

    --line: #2c2c2a;
    --line-strong: #383835;
    --border: rgba(255, 255, 255, 0.1);

    --brand-accent: #14a083;
    --brand-accent-ink: #7fd6bf;
    --brand-accent-wash: #0f2a24;

    --st-progress: #3987e5;
    --st-good-text: #0ca30c;

    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9;

    --agent-hero-a: #00302a;
    --agent-hero-b: #0a6b58;
    --agent-hero-c: #050f0d;
    --agent-bar-bg: rgba(26, 26, 25, 0.86);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --surface-page: #0d0d0d;
  --surface-1: #1a1a19;
  --surface-2: #222221;
  --surface-raised: #232322;

  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;

  --line: #2c2c2a;
  --line-strong: #383835;
  --border: rgba(255, 255, 255, 0.1);

  --brand-accent: #14a083;
  --brand-accent-ink: #7fd6bf;
  --brand-accent-wash: #0f2a24;

  --st-progress: #3987e5;
  --st-good-text: #0ca30c;

  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9;

  --agent-hero-a: #00302a;
  --agent-hero-b: #0a6b58;
  --agent-hero-c: #050f0d;
  --agent-bar-bg: rgba(26, 26, 25, 0.86);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--brand-accent-ink); }

.boot {
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--text-muted);
}

/* ==========================================================================
   App shell
   ========================================================================== */

.app-root { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  height: 60px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.brand-mark {
  width: 32px; height: 32px;
  flex: none;
  display: block;
  object-fit: contain;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-title { font-weight: 650; font-size: 14px; white-space: nowrap; }
.brand-sub { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

.nav { display: flex; gap: 2px; margin-left: 8px; }

.nav-item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-item[aria-current='page'] { background: var(--brand-accent-wash); color: var(--brand-accent-ink); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px 5px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.user-chip-name { font-weight: 550; font-size: 13px; }
.user-chip-link { appearance: none; border: 0; background: none; padding: 0; color: inherit; font: inherit; font-weight: 550; cursor: pointer; text-align: left; }
.user-chip-link:hover { text-decoration: underline; }
/* The chip has to hold a long name on a phone without pushing the buttons
   off the screen: the name gets one line and an ellipsis, the buttons keep
   their size and drop to a second row if they must. */
.user-chip > div:first-child { min-width: 0; flex: 1 1 90px; }
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; }
  .topbar-right { min-width: 0; max-width: 100%; }
  .user-chip { min-width: 0; max-width: 100%; flex-wrap: wrap; row-gap: 6px; }
  .user-chip-name, .user-chip-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* The hat menu on the name at the top right (main.js, hatChip). */
.hat-wrap { position: relative; min-width: 0; }
.hat-button { display: inline-flex; align-items: center; gap: 4px; }
.hat-caret { font-size: 10px; color: var(--text-muted); }
.hat-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 220px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .13); padding: 6px;
}
.hat-option {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0;
  border-radius: 5px; background: none; color: var(--text-primary); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer;
}
.hat-option:hover { background: var(--surface-2); }
.hat-option[aria-current='true'] { font-weight: 600; }
.hat-mark { display: inline-block; width: 12px; color: var(--brand-accent-ink); }
/* Edit in place (contentInline.js): the controls staff see on the agent pages. */
.edit-controls { display: inline-flex; gap: 4px; align-items: center; margin-left: 8px; vertical-align: middle; }
.edit-controls .btn-icon { width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center; }
.edit-pencil svg { width: 13px; height: 13px; }
.editing-notice {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 14px;
  border: 1px dashed var(--brand-accent); border-radius: var(--radius); background: var(--brand-accent-wash);
  color: var(--text-secondary); font-size: 13px;
}
.editing-notice > span:first-child svg, .editing-notice > svg { width: 14px; height: 14px; color: var(--brand-accent-ink); flex: none; }
.is-hidden-content { opacity: .55; }
.is-hidden-content:hover { opacity: .85; }
.edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edit-row .btn { flex: none; }
.content-group { padding: 10px 12px; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.content-repeater { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.content-repeater-row { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.content-repeater-row.is-hidden { opacity: .6; }
.content-repeater-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.user-chip-role {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

.main { flex: 1; padding: 22px 20px 60px; max-width: 1440px; width: 100%; margin: 0 auto; }

.view-head { margin-bottom: 18px; }
.view-title { font-size: 21px; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.01em; }
.view-sub { color: var(--text-secondary); margin: 0; max-width: 76ch; }

/* ==========================================================================
   Buttons & controls
   ========================================================================== */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--surface-2); }
.btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-accent-ink); border-color: var(--brand-accent-ink); }

.btn-good {
  background: var(--st-good);
  border-color: var(--st-good);
  color: #fff;
}
.btn-good:hover { filter: brightness(0.92); }

/* The row-level Ready-to-Sell action. It appears on every row of a 4,000-row
   table, so it stays quiet until hovered — a column of solid green fills would
   out-shout the status badges that carry the actual information. */
.btn-rts {
  background: transparent;
  border-color: color-mix(in srgb, var(--st-good) 40%, var(--line-strong));
  color: var(--st-good-text);
  font-weight: 600;
}
.btn-rts:hover {
  background: var(--st-good);
  border-color: var(--st-good);
  color: #fff;
}

.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-icon { padding: 7px; width: 34px; height: 34px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--text-muted);
}

.input, .select, .textarea {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
  width: 100%;
  min-width: 0;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: -1px;
  border-color: var(--brand-accent);
}
.textarea { resize: vertical; min-height: 70px; }

.search-wrap { position: relative; flex: 1 1 260px; min-width: 200px; }
.search-wrap .input { padding-left: 32px; }
.search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: grid;
}

/* ==========================================================================
   Filter bar
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.filters .field { flex: 0 1 168px; }
.filters-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* On a phone the action row cannot sit to the right of the filters: it was
   pushing the page 20px wide on Agent contracts and Sale submissions
   (measured 2026-09-06). It wraps under them instead. */
@media (max-width: 640px) {
  .filters-actions { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: 8px; }
}

.result-count { color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.result-count strong { color: var(--text-primary); font-weight: 650; }

/* ==========================================================================
   Stat tiles
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stat {
  padding: 14px 15px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.stat-value { font-size: 25px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.stat-note { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

.stat-hero { grid-column: span 2; background: var(--brand-accent-wash); border-color: transparent; }
.stat-hero .stat-value { font-size: 48px; }
.stat-hero .stat-label { color: var(--brand-accent-ink); font-weight: 600; }

@media (max-width: 640px) { .stat-hero { grid-column: span 2; } }

/* ==========================================================================
   Badges — status is dot + label, never color alone
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2.5px 9px 2.5px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--badge-color, var(--st-idle));
}

.badge[data-kind='good'] { --badge-color: var(--st-good); background: color-mix(in srgb, var(--st-good) 12%, transparent); }
.badge[data-kind='warning'] { --badge-color: var(--st-warning); background: color-mix(in srgb, var(--st-warning) 16%, transparent); }
.badge[data-kind='serious'] { --badge-color: var(--st-serious); background: color-mix(in srgb, var(--st-serious) 16%, transparent); }
.badge[data-kind='critical'] { --badge-color: var(--st-critical); background: color-mix(in srgb, var(--st-critical) 13%, transparent); }
.badge[data-kind='progress'] { --badge-color: var(--st-progress); background: color-mix(in srgb, var(--st-progress) 12%, transparent); }
.badge[data-kind='idle'] { --badge-color: var(--st-idle); }

.badge-plain { background: var(--surface-2); }
.badge-plain::before { display: none; }
.badge-plain { padding-left: 9px; }

/* --------------------------------------------------------------------------
   Stage badges — one color per contracting stage.

   Twelve stages is more than a categorical palette should carry as pure hue,
   so two things keep this readable: every badge always shows its text label
   (color is never the only channel), and hue families still track meaning —
   greens good, reds bad, blues/violets in flight, ambers waiting.

   The text stays in primary ink on a tinted ground rather than being coloured
   itself; several of these hues are illegible as small text on the light
   surface.
   -------------------------------------------------------------------------- */

.badge[data-stage] {
  background: color-mix(in srgb, var(--stage-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--stage-color) 30%, transparent);
}
.badge[data-stage]::before { background: var(--stage-color); }

.badge[data-stage='not-started']     { --stage-color: #898781; }
.badge[data-stage='invitation-sent'] { --stage-color: #4a3aa7; }
.badge[data-stage='agent-action']    { --stage-color: #eb6834; }
.badge[data-stage='submitted']       { --stage-color: #1baf7a; }
.badge[data-stage='carrier-review']  { --stage-color: #2a78d6; }
.badge[data-stage='more-info']       { --stage-color: #e87ba4; }
.badge[data-stage='approved']        { --stage-color: #008300; }
.badge[data-stage='cert-pending']    { --stage-color: #eda100; }
.badge[data-stage='rts-pending']     { --stage-color: #fab219; }
.badge[data-stage='declined']        { --stage-color: #d03b3b; }
.badge[data-stage='closed']          { --stage-color: #52514e; }
.badge[data-stage='unknown']         { --stage-color: #898781; }

/* Ready to Sell is the terminal success state and the number the whole system
   reports on — it gets weight as well as hue so it never blurs into Approved. */
.badge[data-stage='ready'] {
  --stage-color: #0ca30c;
  background: var(--st-good);
  border-color: var(--st-good);
  color: #fff;
  font-weight: 650;
}
.badge[data-stage='ready']::before { background: #fff; }

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme='light'])) {
    --stage-violet-d: #9085e9;
  }
  :root:where(:not([data-theme='light'])) .badge[data-stage='invitation-sent'] { --stage-color: #9085e9; }
  :root:where(:not([data-theme='light'])) .badge[data-stage='agent-action']    { --stage-color: #d95926; }
  :root:where(:not([data-theme='light'])) .badge[data-stage='submitted']       { --stage-color: #199e70; }
  :root:where(:not([data-theme='light'])) .badge[data-stage='carrier-review']  { --stage-color: #3987e5; }
  :root:where(:not([data-theme='light'])) .badge[data-stage='more-info']       { --stage-color: #d55181; }
  :root:where(:not([data-theme='light'])) .badge[data-stage='cert-pending']    { --stage-color: #c98500; }
  :root:where(:not([data-theme='light'])) .badge[data-stage='closed']          { --stage-color: #a3a29c; }
  :root:where(:not([data-theme='light'])) .badge[data-stage] {
    background: color-mix(in srgb, var(--stage-color) 22%, transparent);
    border-color: color-mix(in srgb, var(--stage-color) 40%, transparent);
  }
  :root:where(:not([data-theme='light'])) .badge[data-stage='ready'] {
    background: var(--st-good);
    border-color: var(--st-good);
  }
}

:root[data-theme='dark'] .badge[data-stage='invitation-sent'] { --stage-color: #9085e9; }
:root[data-theme='dark'] .badge[data-stage='agent-action']    { --stage-color: #d95926; }
:root[data-theme='dark'] .badge[data-stage='submitted']       { --stage-color: #199e70; }
:root[data-theme='dark'] .badge[data-stage='carrier-review']  { --stage-color: #3987e5; }
:root[data-theme='dark'] .badge[data-stage='more-info']       { --stage-color: #d55181; }
:root[data-theme='dark'] .badge[data-stage='cert-pending']    { --stage-color: #c98500; }
:root[data-theme='dark'] .badge[data-stage='closed']          { --stage-color: #a3a29c; }
:root[data-theme='dark'] .badge[data-stage] {
  background: color-mix(in srgb, var(--stage-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--stage-color) 40%, transparent);
}
:root[data-theme='dark'] .badge[data-stage='ready'] {
  background: var(--st-good);
  border-color: var(--st-good);
}

/* Marks a value an agent reported about themselves, as opposed to one the
   contracting team confirmed. Both are legitimate; they are not the same claim. */
.badge-agent-reported {
  --stage-color: #4a3aa7;
  background: color-mix(in srgb, #4a3aa7 12%, transparent);
}

/* ==========================================================================
   Empty / unknown values
   ========================================================================== */

.blank {
  color: var(--text-muted);
  font-style: italic;
}

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.empty-state h3 { margin: 0 0 6px; font-size: 15px; color: var(--text-primary); }
.empty-state p { margin: 0; }

/* ==========================================================================
   Carrier cards
   ========================================================================== */

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

.carrier-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.carrier-card[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

.carrier-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.carrier-summary::-webkit-details-marker { display: none; }
.carrier-summary:hover { background: var(--surface-2); }

.carrier-chevron { color: var(--text-muted); transition: transform 0.15s ease; flex: none; display: grid; }
.carrier-card[open] .carrier-chevron { transform: rotate(90deg); }

.carrier-ident { min-width: 0; flex: 1 1 auto; }
.carrier-name { font-weight: 600; letter-spacing: -0.005em; }
.carrier-meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }

.carrier-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.state-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.carrier-body { padding: 4px 15px 16px; border-top: 1px solid var(--line); }

.detail-section { margin-top: 16px; }
.detail-section-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px 20px;
}

.detail-item { min-width: 0; }
.detail-key {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.detail-val { overflow-wrap: anywhere; }
.detail-val.is-steps { white-space: pre-line; }

.detail-item-wide { grid-column: 1 / -1; }

.editable {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.editable .detail-val { flex: 1; }
.edit-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  opacity: 0;
  flex: none;
  display: grid;
}
.detail-item:hover .edit-btn, .edit-btn:focus-visible { opacity: 1; }
.edit-btn:hover { color: var(--brand-accent); background: var(--surface-2); }

/* ==========================================================================
   Commission level cards
   ========================================================================== */

.tier-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.tier-head { display: flex; align-items: flex-start; gap: 14px; }
.tier-name { font-weight: 650; font-size: 15px; }
.tier-pct {
  margin-left: auto;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.tier-meta { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); gap: 6px; }

/* ==========================================================================
   Commission schedule (agent view)
   ========================================================================== */

.lob-group { margin-bottom: 12px; }

.lob-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lob-summary::-webkit-details-marker { display: none; }
.lob-summary:hover { background: var(--surface-2); }
.lob-group[open] .lob-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.lob-group[open] .carrier-chevron { transform: rotate(90deg); }

.lob-title { font-weight: 650; }
.lob-count { color: var(--text-muted); font-size: 12.5px; }

.lob-body {
  border: 1px solid var(--line);
  border-top: 0;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  overflow: hidden;
}


/* Rates are the point of this table — give them weight and align the digits. */
.rate-value {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rate-street {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

table.data.rates td:first-child { min-width: 200px; }
table.data.rates td { vertical-align: top; }
.applies-to { font-size: 12.5px; color: var(--text-secondary); max-width: 320px; }

/* ==========================================================================
   Table
   ========================================================================== */

.table-wrap {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.table-scroll { overflow-x: auto; }
/* A data table is almost always wider than a phone. Two things make that
   usable rather than merely survivable: the first column stays put while the
   rest scrolls, so the row keeps its name; and the wrapper says so, because
   a cut-off column looks like a bug until you know it moves. */
@media (max-width: 640px) {
  .table-scroll table.data th:first-child,
  .table-scroll table.data td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface-1);
    box-shadow: 1px 0 0 var(--line);
  }
  .table-scroll table.data thead th:first-child { background: var(--surface-2); }
  .table-wrap::after {
    content: 'Swipe sideways to see the other columns';
    display: block;
    padding: 6px 10px 0;
    font-size: 11.5px;
    color: var(--text-muted);
  }
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.data th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.data td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }

/* Carrier and product names are long but shouldn't wrap to three lines and
   triple the row height — let the wide free-text column absorb the space instead. */
table.data.commission td:nth-child(1),
table.data.commission td:nth-child(2),
table.data.commission td:nth-child(3) { white-space: nowrap; }
table.data.commission td:nth-child(4) { min-width: 340px; }

.cell-name { font-weight: 550; }
.cell-sub { font-size: 12px; color: var(--text-muted); }
.cell-num { font-variant-numeric: tabular-nums; }
.cell-actions { text-align: right; white-space: nowrap; }

.row-verified { box-shadow: inset 3px 0 0 var(--st-good); }
/* Agent-reported but not yet confirmed by the team — deliberately a different
   marker from confirmed, because they are different claims. */
.row-reported { box-shadow: inset 3px 0 0 #4a3aa7; }

/* The tracker carries ten columns; let it scroll rather than crushing them. */
table.data.tracker-table { min-width: 1180px; }
table.data.tracker-table td:nth-child(3),
table.data.tracker-table td:nth-child(4) { min-width: 150px; }

.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-1);
}
.pagination-info { color: var(--text-secondary); font-size: 13px; }
.pagination-controls { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.page-label { font-size: 13px; color: var(--text-secondary); padding: 0 4px; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Drawer (record detail)
   ========================================================================== */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 11, 0.42);
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}

.drawer {
  width: min(560px, 100%);
  background: var(--surface-page);
  height: 100%;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.drawer-head {
  position: sticky;
  top: 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
  padding: 15px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  z-index: 1;
}
.drawer-title { font-size: 16px; font-weight: 650; margin: 0; }
.drawer-sub { color: var(--text-secondary); font-size: 13px; margin: 2px 0 0; }
.drawer-body { padding: 4px 18px 28px; }

.drawer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 0 4px;
}

.callout {
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--badge-color, var(--st-idle));
  font-size: 13px;
  margin-top: 14px;
}
.callout[data-kind='warning'] { --badge-color: var(--st-warning); }
.callout[data-kind='critical'] { --badge-color: var(--st-critical); }
.callout[data-kind='good'] { --badge-color: var(--st-good); }
.callout[data-kind='progress'] { --badge-color: var(--st-progress); }
.callout strong { font-weight: 650; }

/* ==========================================================================
   Audit trail
   ========================================================================== */

.audit-role {
  display: inline-block;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}
.audit-role-staff { background: color-mix(in srgb, var(--st-progress) 16%, transparent); color: var(--text-secondary); }
.audit-role-agent { background: color-mix(in srgb, #4a3aa7 18%, transparent); color: var(--text-secondary); }

.audit-list { display: flex; flex-direction: column; gap: 0; }
.audit-entry {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.audit-entry:last-child { border-bottom: 0; }
.audit-when { color: var(--text-muted); font-size: 12px; }
.audit-change { margin-top: 2px; }
.audit-from { color: var(--text-muted); text-decoration: line-through; }
.audit-to { font-weight: 550; }

/* ==========================================================================
   Login
   ========================================================================== */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--surface-page);
}

.login-card {
  width: min(430px, 100%);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.login-brand-logo { flex-direction: column; gap: 2px; margin-bottom: 14px; }
.login-logo { display: block; width: 220px; height: auto; margin: -12px auto 0; border-radius: 12px; }
/* The logo's tagline is black, so in dark mode it sits on a white plate — the
   logo as printed, rather than black lettering lost on a dark card. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme='light'])) .login-logo { background: #fff; padding: 6px 10px; margin-top: 0; }
}
:root[data-theme='dark'] .login-logo { background: #fff; padding: 6px 10px; margin-top: 0; }
.login-brand-sub { letter-spacing: 0.02em; }
.login-title { font-size: 18px; font-weight: 650; margin: 0 0 5px; }
.login-sub { color: var(--text-secondary); margin: 0 0 20px; font-size: 13.5px; }

.login-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--st-critical) 12%, transparent);
  border-left: 3px solid var(--st-critical);
  font-size: 13px;
}

.login-hint {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.login-hint-title { font-weight: 650; color: var(--text-primary); margin-bottom: 7px; }
/* A neutral, non-alarming panel on the sign-in and set-password screens: the
   name a link belongs to, or the reason a session ended. Deliberately NOT
   .login-error — "you were signed out after four hours" is information, and
   colouring it like a failure makes ordinary use feel like something broke. */
.login-notice {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--brand-accent);
  font-size: 13px;
  line-height: 1.45;
}

.security-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ==========================================================================
   Misc
   ========================================================================== */

.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--text-muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }

.section-title {
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 10px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--surface-1);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 550;
  box-shadow: var(--shadow-lg);
  z-index: 80;
  pointer-events: none;
  animation: toast-in 0.18s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
  .main { padding: 16px 14px 48px; }
  .brand-sub { display: none; }
}

/* ==========================================================================
   Column picker
   ========================================================================== */

.col-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px 14px;
}

.col-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
}
.col-option:hover { background: var(--surface-2); }
.col-option.is-locked { cursor: default; opacity: 0.75; }
.col-option.is-locked:hover { background: transparent; }
.col-option .muted { margin-left: auto; }

/* The tracker's width now depends on how many columns are switched on, so the
   fixed min-width from the earlier fixed-column version has to go. */
table.data.tracker-table { min-width: 0; }
table.data.tracker-table th, table.data.tracker-table td { white-space: nowrap; }
table.data.tracker-table td .applies-to { white-space: normal; }

/* ==========================================================================
   Agent portal tabs
   ========================================================================== */

.subtabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.subtab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 15px;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.subtab:hover { color: var(--text-primary); background: var(--surface-2); }
.subtab[aria-current='page'] {
  color: var(--brand-accent-ink);
  border-bottom-color: var(--brand-accent);
}
/* Your Team's three tabs (Khalid, 2026-09-17: "a little bigger and more
   visible"). A variant, so the tab strips on the commission screens keep
   their size: larger type, more room, and the open tab filled in the brand
   wash with a heavier underline rather than only a change of colour. */
.subtabs-large {
  gap: 6px;
  border-bottom-width: 2px;
  margin-bottom: 22px;
}
.subtabs-large .subtab {
  font-size: 16px;
  font-weight: 600;
  padding: 13px 22px;
  gap: 9px;
  border-bottom-width: 3px;
  margin-bottom: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.subtabs-large .subtab .subtab-icon { width: 18px; height: 18px; }
.subtabs-large .subtab[aria-current='page'] {
  background: var(--brand-accent-wash);
  color: var(--brand-accent-ink);
  border-bottom-color: var(--brand-accent);
}
@media (max-width: 640px) {
  .subtabs-large .subtab { font-size: 15px; padding: 11px 14px; }
}

.subtab-soon {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ==========================================================================
   Planned-section placeholder
   ========================================================================== */

.planned {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.planned-title { font-size: 17px; font-weight: 650; margin: 0 0 6px; }
.planned-lead { color: var(--text-secondary); margin: 0 0 18px; max-width: 70ch; }
.planned-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.planned-list { margin: 0; padding-left: 18px; }
.planned-list li { margin-bottom: 5px; color: var(--text-secondary); }
.planned-list li strong { color: var(--text-primary); font-weight: 600; }

.subtab-divider {
  display: inline-flex;
  align-items: center;
  padding: 0 14px 0 18px;
  margin-left: 4px;
  border-left: 1px solid var(--line);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  align-self: center;
  height: 20px;
}

/* ==========================================================================
   Annual certifications
   ========================================================================== */

.cert-group-title { font-size: 15px; font-weight: 650; margin: 26px 0 4px; }

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.cert-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Marks the certifications that apply to carriers this agent actually holds.
   Everything else stays visible — a new contract needs its cert beforehand. */
.cert-card.is-relevant { border-color: color-mix(in srgb, var(--st-good) 40%, var(--line)); }

.cert-head { display: flex; align-items: flex-start; gap: 10px; }
.cert-name { font-weight: 650; font-size: 15px; }
.cert-badge { font-size: 12.5px; color: var(--st-good-text); font-weight: 600; margin-top: 2px; }
.cert-prereq {
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
}
.cert-portal { align-self: flex-start; }

.cert-links { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }

/* Certifications read as tables now: names line up, links line up, and "does
   this apply to me" is a column to scan rather than a badge to hunt for on each
   card. Rows the agent is contracted for keep the same green edge the tracker
   uses for a confirmed record. */
.cert-table td { vertical-align: top; }
.cert-table .cert-badge { font-weight: 600; }

.cert-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  text-decoration: none;
  color: var(--brand-accent-ink);
  padding: 3px 0;
}
.cert-link:hover { text-decoration: underline; }
.cert-link.is-submit { font-weight: 600; }
.cert-link.is-pending { color: var(--text-muted); cursor: default; }
.cert-link.is-pending:hover { text-decoration: none; }

/* Carrier eligibility notes — distinct from the section headers they used to
   share a class with, which made them look like sub-sections. */
.rate-note {
  padding: 8px 15px;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}

/* Long carrier names ("UnitedHealthcare", "HealthSpring (Cigna)") were colliding
   with the contracted badge, which is nowrap by design. Let the head wrap and
   let the name shrink rather than overflow its own card. */
.cert-head { flex-wrap: wrap; gap: 8px; }
.cert-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.cert-name { overflow-wrap: anywhere; }

/* auto-fill rather than auto-fit: with two cards in a row, auto-fit stretched
   them to half the page each while the rows above stayed card-width. */
.cert-grid { grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); }

/* Numbered steps in the contracting guide. */
.steps-list { margin: 0; padding-left: 20px; }
.steps-list li { margin-bottom: 6px; color: var(--text-secondary); }
.steps-list li::marker { color: var(--text-muted); font-weight: 650; }

/* ==========================================================================
   Sidebar navigation
   --------------------------------------------------------------------------
   Replaces the staff top nav and the agent tab strip with one pattern. Both
   roles now navigate identically, and vertical space means the section list can
   grow without competing for the width the content needs.
   ========================================================================== */

.app-root { flex-direction: row; align-items: stretch; }

.app-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar {
  flex: none;
  width: 232px;
  background: var(--surface-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width 0.14s ease;
}
.sidebar[data-collapsed='true'] { width: 60px; }
.sidebar[data-collapsed='true'] .sidebar-label,
.sidebar[data-collapsed='true'] .sidebar-heading,
.sidebar[data-collapsed='true'] .brand-text,
.sidebar[data-collapsed='true'] .subtab-soon { display: none; }
.sidebar[data-collapsed='true'] .sidebar-item,
.sidebar[data-collapsed='true'] .sidebar-collapse { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar[data-collapsed='true'] .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar[data-collapsed='true'] .sidebar-group + .sidebar-group { margin-top: 6px; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
  min-height: 0;
}

.sidebar-group + .sidebar-group { margin-top: 14px; }

.sidebar-heading {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0 8px 5px;
}

.sidebar-item {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 550;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
}
.sidebar-item:hover { background: var(--surface-2); color: var(--text-primary); }
.sidebar-item[aria-current='page'] {
  background: var(--brand-accent-wash);
  color: var(--brand-accent-ink);
}
.sidebar-item:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }

.sidebar-icon { display: grid; flex: none; }
.sidebar-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-item .subtab-soon { flex: none; }

.sidebar-collapse {
  appearance: none;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 17px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  flex: none;
}
.sidebar-collapse:hover { background: var(--surface-2); color: var(--text-primary); }

/* The header keeps only the account controls now that navigation moved out. */
.topbar { justify-content: flex-end; gap: 8px; }

.sidebar-mobile-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  margin-left: auto;
}
.sidebar-mobile-toggle-label { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Below 860px the sidebar collapses to just the brand bar plus a toggle
   button. Opening it drops the full grouped, vertical menu down as a panel
   rather than the old single-line horizontal strip — at a phone width there
   was no way to fit ~12 items across one row without most of them scrolling
   off-screen unlabeled, which meant sections like Commission Rates or
   Downlines were effectively undiscoverable on a phone. */
@media (max-width: 860px) {
  .app-root { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
  }
  .sidebar[data-collapsed='true'] { width: 100%; }
  .sidebar-brand { border-bottom: 0; padding: 10px 12px; }
  .sidebar-mobile-toggle { display: flex; }
  .sidebar-nav {
    display: none;
    flex-direction: column;
    max-height: 70vh;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    padding: 10px 8px;
  }
  .sidebar[data-mobile-nav-open='true'] .sidebar-nav { display: flex; }
  .sidebar-group { display: block; }
  .sidebar-group + .sidebar-group { margin-top: 14px; margin-left: 0; padding-left: 0; border-left: 0; }
  .sidebar-heading { display: block; }
  .sidebar-item { width: 100%; white-space: normal; }
  .sidebar-collapse { display: none; }
}

/* Measured, not guessed: "Commission Tracking" plus its SOON badge is the
   longest item in either role's menu, and at 232px it truncated. The last few
   pixels come from the gap and the nav padding rather than from making the
   sidebar wider still — the content column needs that width more. A test
   asserts no label's scrollWidth exceeds its clientWidth, because a screenshot
   at one window size will not catch three pixels of overflow.
   This is a desktop-only measurement — below 860px the sidebar is full width
   by design, so the fixed 272px must not apply there. */
@media (min-width: 861px) {
  .sidebar { width: 272px; }
}
.sidebar-item .subtab-soon { padding: 0 4px; font-size: 9px; letter-spacing: 0.03em; }
.sidebar-item { gap: 9px; }
.sidebar-nav { padding-left: 6px; padding-right: 6px; }

/* The carrier name sits directly above its own column header, which made it
   ambiguous where one carrier's rates ended and the next began. A rule above it
   was too quiet to read as a divider at a glance, so the band is filled instead:
   the accent wash reads as a heading rather than as another table row, and it
   is the same tint the active nav item uses, so it stays on-palette in both
   light and dark. Text uses the darker accent step, which clears 4.5:1 on that
   wash in both themes: 5.9:1 light, 7.2:1 dark. */
.rate-carrier {
  background: var(--brand-accent-wash);
  border-bottom: 1px solid var(--line);
  padding: 10px 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 13px;
  color: var(--brand-accent-ink);
}
.rate-note { background: var(--surface-1); font-style: italic; }

.portal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 550;
  text-decoration: none;
  color: var(--brand-accent-ink);
}
.portal-link:hover { text-decoration: underline; }
.portal-phone { color: var(--text-primary); white-space: nowrap; text-decoration: none; }
.portal-phone:hover { text-decoration: underline; }

/* Tool cards: the card title is the link, so it has to read as one. */
.tool-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--brand-accent-ink);
}
.tool-link:hover { text-decoration: underline; }

.tier-note { margin-top: 6px; font-style: italic; }

/* ---------------------------------------------------------------------------
   Numbered steps, checklists and a term glossary (Missing commissions)
   --------------------------------------------------------------------------- */

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step-item {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step-num {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 650;
  background: var(--brand-accent-wash);
  color: var(--brand-accent-ink);
}
.step-body { min-width: 0; }
.step-title { font-weight: 650; font-size: 15px; margin-bottom: 4px; }
.step-detail { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.step-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 11px;
  border-left: 2px solid var(--line-strong);
}

.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px 20px;
}
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.checklist-tick {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 2px;
  color: var(--brand-accent-ink);
}

.term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.term-card {
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.term-name { font-weight: 650; font-size: 14px; margin-bottom: 5px; }
.term-what { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }

/* The route links on that page are buttons; strip the button chrome. */
button.tool-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

/* A portal can cover several states; the codes read better as a row of pills
   than as a comma-separated string, and they wrap rather than widening the
   column past the portal link beside them. */
.state-pills { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------------------------------------------------------------------------
   Content editor
   --------------------------------------------------------------------------- */

/* A document nests four levels deep in places, so the editor drills in one
   level at a time. The breadcrumb is the only way back up, which makes it
   load-bearing rather than decorative. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
.crumb {
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 0;
  font: inherit;
  font-size: 13px;
  color: var(--brand-accent-ink);
  cursor: pointer;
}
.crumb:hover { text-decoration: underline; }
.crumb.is-current { color: var(--text-primary); font-weight: 650; cursor: default; }
.crumb.is-current:hover { text-decoration: none; }
.crumb-sep { color: var(--text-muted); font-size: 12px; }

.content-form { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.content-row { display: flex; flex-direction: column; gap: 4px; }
.content-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.content-help { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); max-width: 70ch; }

.content-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.content-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.content-item-actions { margin-left: auto; display: flex; gap: 4px; }

.content-drill {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-accent-ink);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.content-drill:hover { text-decoration: underline; }
.content-drill-label { font-weight: 550; overflow: hidden; text-overflow: ellipsis; }

/* Fields tied to something else in the app — the carrier match that drives the
   "already contracted" flag — are shown but not editable here. */
.is-locked-field { background: var(--surface-2); color: var(--text-muted); }

.rate-preview {
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--brand-accent-wash);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.table-foot { padding: 10px 16px; border-top: 1px solid var(--line); }

/* The draft marker. Editing here is deliberately not autosaved, so the state
   has to be visible rather than inferred. */
.unsaved {
  align-self: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--st-warning);
}

/* Content that exists but is not being shown to agents. Dimmed rather than
   removed, because the point of hiding is that it comes back. */
.content-item.is-hidden .content-drill-label { color: var(--text-muted); }
.content-item.is-hidden { background: var(--surface-2); }

/* A logo tile for a link card. Fixed size so a row of cards lines up whether
   the mark is a real logo or generated initials. */
.tool-mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.tool-mark-img {
  object-fit: contain;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  padding: 3px;
}
.tool-card-head { display: flex; align-items: center; gap: 11px; min-width: 0; }

/* The certification matrix: agents down, certifications across. Cells are
   buttons because every one of them is a thing you might need to record. */
.cert-matrix th { vertical-align: bottom; }
.cert-matrix td { vertical-align: top; }
.cert-cell {
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.cert-cell.is-empty { color: var(--text-muted); }
/* The staff drawer's certificate section, while "Remove the file" is armed. */
.detail-section.is-removing a[data-field="download-file"] { text-decoration: line-through; opacity: 0.6; }
.cert-cell:hover { opacity: 0.75; }

/* ---------------------------------------------------------------------------
   Attachments on contracting instructions
   --------------------------------------------------------------------------- */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 14px 0 4px;
}
.media-figure { margin: 0; }
.media-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
}
/* 16:9, held by padding rather than by an aspect-ratio the iframe would ignore. */
.media-video {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.media-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.media-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
  text-decoration: none;
  color: var(--brand-accent-ink);
  font-weight: 550;
}
.media-link:hover { background: var(--surface-2); }
.media-caption {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   Commission reporting — bar charts, lens/mode toggles, leaderboard
   ---------------------------------------------------------------------------
   Deliberately CSS-only charts. This project has no dependencies and no build
   step (see CLAUDE.md); a horizontal bar list answers "who/what is biggest"
   as well as a charting library would, reads fine on a phone, and adds
   nothing to maintain. */

.chart-rows { display: flex; flex-direction: column; gap: 2px; }

.chart-row {
  display: grid;
  grid-template-columns: minmax(120px, 210px) 1fr minmax(96px, auto);
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border-radius: 6px;
}
.chart-row:hover { background: var(--surface-2); }

.chart-row-label {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-row-track {
  height: 20px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}

.chart-row-fill {
  height: 100%;
  /* The brand colour, not the "in progress" status blue: a bar's length is
     the message, and the status palette stays reserved for status. */
  background: var(--brand-accent);
  border-radius: 4px;
  min-width: 2px;
  transition: width .18s ease;
}
.chart-row-fill[data-lens='revenue'] { background: var(--st-good); }
.chart-row-fill[data-lens='margin']  { background: var(--st-warning); }

.chart-row-value {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Segmented toggles — lens ($ / revenue / margin) and mode ($ / # policies) */
.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface-1);
}
.segmented button {
  border: 0;
  background: transparent;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-secondary);
  cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--border); }
.segmented button[aria-pressed='true'] {
  background: var(--st-progress);
  color: #fff;
}

.report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.report-toolbar-spacer { margin-left: auto; }

.leaderboard-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
}
.leaderboard-rank[data-top='1'] { background: color-mix(in srgb, var(--st-warning) 30%, transparent); color: var(--text-primary); }
.leaderboard-rank[data-top='2'] { background: color-mix(in srgb, var(--st-idle) 26%, transparent); }
.leaderboard-rank[data-top='3'] { background: color-mix(in srgb, var(--st-serious) 18%, transparent); }

@media (max-width: 720px) {
  .chart-row { grid-template-columns: 1fr minmax(80px, auto); }
  .chart-row-track { display: none; }
}

/* ---------------------------------------------------------------------------
   Reporting filter bar and line chart — the layout Khalid approved from the
   design pass. Compact dropdown chips rather than tall multi-select boxes,
   but they still open a CHECKBOX list: multi-select was a settled decision
   (COMMISSIONS-PLAN.md) and this changes how it looks, not what it does.
   --------------------------------------------------------------------------- */

.filter-bar {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: flex-end;
}

.filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 132px; }
.filter-field-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.filter-drop { position: relative; }

.filter-drop-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-0, #fff);
  font-size: 13.5px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.filter-drop-button:hover { border-color: var(--text-muted); }
.filter-drop-button[aria-expanded='true'] { border-color: var(--st-progress); }
.filter-drop-caret { color: var(--text-muted); font-size: 10px; flex: none; }

.filter-drop-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .13);
  padding: 6px;
}
.filter-drop-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-drop-option:hover { background: var(--surface-2); }
.filter-drop-option input { margin: 0; }

.filter-bar-actions { margin-left: auto; align-self: flex-end; }

/* Segmented control — a small set of mutually exclusive ranges.
   A row of .btn reads as several separate actions; this reads as one control
   with one of its options chosen, which is what a range picker is. */
.seg {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-raised);
}
.seg-btn {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.seg-btn.is-on {
  background: var(--accent, var(--st-progress));
  color: #fff;
}
.seg-btn:focus-visible { outline: 2px solid var(--st-progress); outline-offset: -2px; }

@media (max-width: 860px) {
  .seg { flex-wrap: wrap; }
}

/* Line chart */
/* --- charts ------------------------------------------------------------
   The forecast chart's y-axis does NOT start at zero (Khalid, 2026-08-26):
   the book runs at $220k-$250k a month and a zero-based axis pressed every
   line into the top fifth of the frame. A truncated axis overstates
   differences, so the floor is drawn as a solid labelled line rather than
   left implied — `.line-chart-baseline` is deliberately heavier than the
   gridlines above it, and that weight is the honesty. */
.line-chart { width: 100%; height: 300px; display: block; overflow: visible; }

/* The one bordered panel every page uses. `.card` had no rule of its own —
   nine views used the class and each looked different (Khalid, 2026-09-13:
   the Leaderboard charts had no border while the Reports charts did). */
.card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  padding: 14px 16px;
}
.chart-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  padding: 14px 16px 6px;
}
.chart-panel .line-chart-legend { margin: 0 0 6px; }
.chart-panel { position: relative; }
.chart-tip {
  position: absolute; z-index: 3; pointer-events: none; white-space: nowrap;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 7px 10px; font-size: 12px; color: var(--text-primary);
}
.chart-tip[hidden] { display: none; }
.chart-tip-title { font-weight: 600; margin-bottom: 4px; }
.chart-tip-row { display: flex; align-items: center; gap: 6px; }
.chart-tip-row strong { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
.line-chart-hit { cursor: crosshair; }

.line-chart-baseline { stroke: var(--line-strong); stroke-width: 1.25; }
.line-chart-band { fill: var(--st-progress); opacity: 0.08; stroke: none; }
.line-chart-divider {
  stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3;
}
.line-chart-marker {
  fill: var(--text-muted); font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.line-chart-dot { stroke: var(--surface-1); stroke-width: 1.5; }

/* --- dashboards --------------------------------------------------------
   Both landing pages are a stack of cards. Each card answers one question and
   carries the button to the page that answers it properly, so a figure is
   never a dead end. */
.dashboard .dash-card { margin-bottom: 18px; }

.dash-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}

.dash-update + .dash-update { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.dash-update-title { font-weight: 600; font-size: 14px; }

.dash-decision {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 12px 0;
}
.dash-decision + .dash-decision { border-top: 1px solid var(--line); }
.dash-decision-body { min-width: 0; }
.dash-decision-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 550; font-size: 14px;
}

.dash-links {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.dash-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-1); color: inherit; font: inherit;
}
.dash-link:hover { border-color: var(--line-strong); background: var(--surface-2); }
.dash-link-label { font-weight: 600; font-size: 14px; }
.dash-link-note { font-size: 12.5px; color: var(--text-muted); }

.filters-inline {
  display: contents;   /* the selects lay out as if still direct children */
}

.forecast-card-head {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.line-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 2px 0 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.line-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.line-chart-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.line-chart-grid { stroke: var(--border); stroke-width: 1; }
.line-chart-axis { fill: var(--text-muted); font-size: 10.5px; }

/* The 2x2 analysis grid */
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.report-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.report-card h3 { margin: 0 0 2px; font-size: 15px; }
.report-card-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }

@media (max-width: 760px) {
  .report-grid { grid-template-columns: 1fr; }
  .filter-field { min-width: 0; flex: 1 1 140px; }
}

/* Shared filter bar bits used by ui.js filterBar() */
.filter-drop-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-drop-button[data-active='true'] {
  border-color: var(--st-progress);
  background: color-mix(in srgb, var(--st-progress) 8%, transparent);
  font-weight: 550;
}
.filter-drop-clear {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-size: 12px;
  color: var(--st-progress);
  cursor: pointer;
}
.filter-drop-clear:hover { background: var(--surface-2); }
.filter-field-wide { min-width: 190px; flex: 1 1 190px; }

/* Sortable table headers */
table.data th[data-sortable] { cursor: pointer; user-select: none; white-space: nowrap; }
table.data th[data-sortable]:hover { color: var(--text-primary); }
table.data th[data-sort-dir]::after {
  content: '▲';
  font-size: 8px;
  margin-left: 5px;
  color: var(--st-progress);
}
table.data th[data-sort-dir='desc']::after { content: '▼'; }

/* Column picker */
.column-picker { position: relative; display: inline-block; }
.column-picker-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .13);
  padding: 6px;
}
.ledger-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ledger-toolbar-spacer { margin-left: auto; }

/* Commission tracking grid — policies down, months across */
table.data.tracking-grid th.tracking-month {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 10.5px;
  white-space: nowrap;
}
table.data.tracking-grid td.tracking-cell {
  text-align: center;
  padding: 5px 4px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  border-left: 1px solid var(--surface-1);
}
table.data.tracking-grid td.tracking-month.is-open { color: var(--text-muted); font-style: italic; }
.tracking-cell.is-empty.is-open { background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--surface-2) 4px, var(--surface-2) 8px); }
.line-chart-open { opacity: 0.85; }
.tracking-cell.is-empty {
  /* A gap should read as absence, not as a zero someone recorded. */
  background: repeating-linear-gradient(
    45deg, transparent, transparent 3px,
    color-mix(in srgb, var(--text-muted) 9%, transparent) 3px,
    color-mix(in srgb, var(--text-muted) 9%, transparent) 6px);
}
table.data.tracking-grid td.tracking-cell.is-negative { font-weight: 600; }
table.data.tracking-grid tbody tr:hover { background: transparent; }
table.data.tracking-grid tbody tr:hover td:not(.tracking-cell) { background: var(--surface-2); }

/* Agent picker — chips plus a search box, replacing the datalist that made
   selecting more than one agent impossible. */
.agent-picker { position: relative; min-width: 230px; }
.agent-picker .input { width: 100%; }
.agent-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.agent-chips:empty { display: none; }
.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  background: color-mix(in srgb, var(--st-progress) 14%, transparent);
  color: var(--text-primary);
}
.agent-chip-x {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  color: var(--text-muted);
}
.agent-chip-x:hover { color: var(--st-critical); }
.agent-picker .filter-drop-option { justify-content: space-between; width: 100%; border: 0; background: transparent; cursor: pointer; }

/* ---------------------------------------------------------------------------
   Viewing the app as an agent
   ---------------------------------------------------------------------------
   Deliberately the loudest thing on the page, because every other pixel below
   it is the agent's own view and there is otherwise nothing to say so. Used on
   screen shares, where two people are looking at an account that is not the
   one signed in.

   Built from the reserved status tokens rather than a new colour: this is a
   warning state, and inventing a seventh accent for it would be the start of
   the palette meaning nothing. */
.view-as-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--st-warning) 16%, var(--surface-1));
  border-bottom: 1px solid color-mix(in srgb, var(--st-warning) 45%, transparent);
  color: var(--text-primary);
  font-size: 0.92rem;
  position: sticky;
  top: 0;
  z-index: 40;
}

.view-as-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--st-warning);
  flex: none;
}

.view-as-text { flex: 1 1 auto; }
.view-as-npn { color: var(--text-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .view-as-bar { flex-wrap: wrap; font-size: 0.86rem; }
}

/* ---------------------------------------------------------------------------
   The agent's commission statement
   ---------------------------------------------------------------------------
   A document, not a screen: it is printed and sent, so it reads top to bottom
   with the arithmetic before the detail, and it uses the page's own tokens
   rather than a second palette. Nothing here is a new colour. */
.statement {
  max-width: 1040px;
  margin: 18px auto 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 30px 22px;
}

.statement-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.statement-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--text-primary);
}

.statement-agency {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.statement-title {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-top: 2px;
}

.statement-period { text-align: right; }
.statement-period-month { font-size: 1.05rem; font-weight: 600; }
.statement-period-sub { color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; }

.statement-who {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0 20px;
}

.statement-who-name { font-size: 1.05rem; font-weight: 600; }
.statement-who-sub { color: var(--text-muted); font-size: 0.86rem; margin-top: 3px; }

/* Four figures across, wrapping to two on a narrow screen rather than
   shrinking until the money is unreadable. */
.statement-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 26px;
}

.statement-figure { background: var(--surface-1); padding: 14px 16px; }
.statement-figure-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.statement-figure-value {
  font-size: 1.3rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 3px;
}
.statement-figure-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.35; }

.statement-section-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 26px 0 12px;
}

.statement-carrier { margin-bottom: 22px; }

.statement-carrier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
}

.statement-carrier-name { font-weight: 600; }
.statement-carrier-total { font-weight: 650; font-variant-numeric: tabular-nums; }

.statement-table { font-size: 0.86rem; }
.statement-table .right { text-align: right; }
.statement-table .mono { font-variant-numeric: tabular-nums; }
.statement-client { font-weight: 550; }
.statement-table tfoot td { font-weight: 600; background: var(--surface-2); }

.statement-foot {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.84rem;
}

/* The payouts table's rows open a statement, so they say so. */
.statement-row { cursor: pointer; }
.statement-row:hover { background: var(--surface-2); }
.statement-link { text-decoration: underline; text-decoration-style: dotted; }

@media (max-width: 780px) {
  .statement { padding: 18px 16px 16px; }
  .statement-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statement-head, .statement-who { flex-direction: column; align-items: flex-start; }
  .statement-period { text-align: left; }
}

/* Printing. The statement is the page; everything that only makes sense on a
   screen goes away, and the figures keep their borders because a printer will
   not render a background tint. */
@media print {
  .sidebar, .topbar, .view-head, .no-print, .view-as-bar { display: none !important; }
  .app-column, .main { padding: 0 !important; margin: 0 !important; }
  .statement {
    max-width: none;
    border: none;
    border-radius: 0;
    padding: 0;
    background: #fff;
  }
  .statement-figure { background: #fff; }
  .statement-carrier { break-inside: avoid; }
  .statement-table { font-size: 0.78rem; }
  a[href]::after { content: ''; }
}


/* A screen's frame while its data loads, and an explanation kept out of the way (2026-09-05). */
.view-loading .boot { margin-top: 8px; }
.help-note { margin: 10px 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); }
.help-note > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; list-style: none; }
.help-note > summary::-webkit-details-marker { display: none; }
.help-note > summary::after { content: '+'; margin-left: auto; color: var(--text-muted); font-weight: 400; }
.help-note[open] > summary::after { content: '−'; }
.help-note > summary:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; border-radius: var(--radius); }
.help-note-body { padding: 0 12px 12px; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.help-note-body p:first-child { margin-top: 0; }
.help-note-icon { width: 14px; height: 14px; }

/* The import target (2026-09-05). */
.drop-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px; margin: 4px 0 18px; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-1); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.drop-zone:hover, .drop-zone.is-over { border-color: var(--brand-accent); background: var(--brand-accent-wash); }
.drop-zone:focus-within { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.drop-zone-icon { width: 28px; height: 28px; color: var(--brand-accent-ink); }
.drop-zone-title { font-weight: 600; font-size: 16px; }
.drop-zone-sub { font-size: 13px; color: var(--text-secondary); max-width: 46ch; }
.drop-zone-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
/* The upload as one tile in a .stats row (Licenses page, 2026-09-10): the
   drop-zone's dashed border and hover, at a stat's size and spacing. */
.stat-drop { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 15px; margin: 0; text-align: left; }
.stat-drop-action { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--brand-accent-ink); }
.stat-drop-icon { width: 16px; height: 16px; color: var(--brand-accent-ink); }
.help-note.fold > summary { font-size: 14px; color: var(--text-primary); }

/* Month close (2026-09-05). */
.month-close-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
/* Collect statements (collectStatements.js): the steps under a source, and the channel mark. */
.collect-steps { white-space: pre-line; font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; max-width: 46ch; }
.collect-channel { display: inline-flex; align-items: center; gap: 6px; }
tr.collect-row.is-overdue td:first-child { box-shadow: inset 4px 0 0 var(--st-critical); }
tr.collect-row.is-due td:first-child { box-shadow: inset 4px 0 0 var(--st-warning); }
tr.collect-row.is-complete td:first-child { box-shadow: inset 4px 0 0 var(--st-good); }
tr.collect-row.is-skipped td, tr.collect-row.is-inactive td { opacity: .6; }
.month-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.month-step { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); border-left-width: 4px; }
.month-step-panel { grid-column: 1 / -1; padding-top: 6px; }
.month-step-panel .stats { margin-bottom: 12px; }
.month-step.is-done { border-left-color: var(--st-good); }
.month-step.is-attention { border-left-color: var(--st-warning); }
.month-step.is-todo { border-left-color: var(--line-strong); }
.month-step-n { font-size: 22px; font-weight: 600; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; }
.month-step-title { font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.month-step-detail { color: var(--text-secondary); font-size: 14px; margin-top: 3px; }
@media (max-width: 640px) { .month-step { grid-template-columns: 30px 1fr; } .month-step > .btn { grid-column: 2; justify-self: start; } }

/* An agent's three views of the same commission, as tabs (2026-09-05). */
.view-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.view-tab { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.view-tab.is-active { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.view-tab:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; }

/* Folding menu groups (2026-09-06). */
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.sidebar-heading:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.sidebar-heading-mark { color: var(--text-muted); font-weight: 400; padding-right: 6px; }
.sidebar-group.is-folded { margin-bottom: 4px; }


/* ==========================================================================
   The agent shell (2026-09-20) — views/agentShell.js, agentHome.js,
   sellFinder.js. Everything here hangs on [data-shell='agent'] or on a class
   only those files use, so none of it can reach a staff screen.
   ========================================================================== */

.app-root[data-shell='agent'] { flex-direction: column; }
.ashell { display: flex; flex-direction: column; min-height: 100vh; width: 100%; }

/* --- the search box in the STAFF sidebar (2026-09-21) ----------------------- */
.sidebar-search { padding: 10px 10px 2px; }
.sidebar[data-collapsed='true'] .sidebar-search { padding: 10px 8px 2px; }
.sidebar[data-collapsed='true'] .asearch-button { justify-content: center; padding: 0; }
.sidebar[data-collapsed='true'] .asearch-button-text,
.sidebar[data-collapsed='true'] .asearch-kbd { display: none; }
@media (max-width: 860px) {
  .sidebar-search { display: none; padding: 0 12px 8px; }
  .sidebar[data-mobile-nav-open='true'] .sidebar-search { display: block; }
}

/* --- the side menu --------------------------------------------------------- */
.ashell-body { display: flex; align-items: stretch; flex: 1; min-height: 0; }
.ashell-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aside {
  position: sticky; top: 0; align-self: flex-start; flex: none;
  width: 256px; height: 100vh; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 10px; padding: 16px 12px 12px;
  background: var(--surface-1); border-right: 1px solid var(--line);
}
.aside > * { flex-shrink: 0; }
.aside-top { display: flex; align-items: center; justify-content: space-between; }
.aside-close { display: none; border: 0; background: none; cursor: pointer; padding: 8px; color: var(--text-secondary); }
.aside-brand {
  display: flex; align-items: center; gap: 10px; padding: 2px 6px; min-width: 0;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.aside-brand .brand-title { font-size: 15.5px; font-weight: 720; letter-spacing: -0.01em; }

.asearch-button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 38px; padding: 0 10px 0 12px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface-raised); color: var(--text-muted); cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.asearch-button:hover { border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-accent-wash); }
.asearch-button-text { flex: 1; text-align: left; font-size: 13.5px; }
.asearch-kbd, .apalette-foot kbd {
  font: inherit; font-size: 11px; font-weight: 600; color: var(--text-secondary);
  padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface-2);
}

.aside-goal {
  display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 10px 12px; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, transparent); border-radius: 12px;
  background: var(--brand-accent-wash); color: var(--brand-accent-ink);
}
.aside-goal:hover { border-color: var(--brand-accent); }
.aside-goal.is-empty { flex-direction: row; align-items: center; gap: 8px; font-weight: 650; font-size: 13px; }
.aside-goal.is-empty span:nth-child(2) { flex: 1; }
.aside-goal-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.aside-goal-top strong { font-size: 13px; }
.aside-goal-track { display: block; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--brand-accent) 18%, transparent); overflow: hidden; }
.aside-goal-fill { display: block; height: 100%; border-radius: 99px; background: var(--brand-accent); transition: width 0.5s ease; }
.aside-goal-note { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: 0.85; }

.aside-nav { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.aside-group { display: flex; flex-direction: column; gap: 1px; }
.aside-heading {
  padding: 6px 10px 3px; font-size: 10.5px; font-weight: 750; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.aside-link {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; min-height: 32px;
  border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left;
  color: var(--text-secondary); font-weight: 560; font-size: 13.5px;
  transition: background 0.12s ease, color 0.12s ease;
}
.aside-link:hover { background: var(--surface-2); color: var(--text-primary); }
.aside-link[aria-current='page'] { background: var(--text-primary); color: var(--surface-page); font-weight: 650; }
.aside-icon { display: inline-flex; flex: none; }
.aside-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aside-badge {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 750;
  background: var(--st-serious); color: #fff;
}
.aside-badge[hidden] { display: none; }

.aside-account { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.aavatar {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; cursor: pointer; text-align: left;
  border: 0; border-radius: 10px; background: none; font-weight: 600; font-size: 13.5px;
}
.aavatar:hover { background: var(--surface-2); }
.aavatar-dot {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--agent-hero-b), var(--agent-hero-a));
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.aavatar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.aavatar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aavatar-text .user-chip-role { font-size: 9.5px; }
.amenu { min-width: 0; left: 0; right: 0; top: auto; bottom: calc(100% + 6px); border-radius: 12px; }

.amain { max-width: 1280px; padding-top: 26px; }
[data-shell='agent'] .view-title { font-size: 25px; font-weight: 700; letter-spacing: -0.022em; }
[data-shell='agent'] .view-sub { font-size: 14.5px; }

/* --- a phone: the menu is a sheet behind a bottom bar ---------------------- */
.aphone-top, .atabbar { display: none; }
@media (max-width: 860px) {
  .aside {
    position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%;
    padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
    transform: translateY(100%); visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .aside[data-open='true'] { transform: none; visibility: visible; transition: transform 0.22s ease; }
  .aside-close { display: inline-flex; }
  .aside-link { min-height: 44px; font-size: 15.5px; }
  .asearch-kbd { display: none; }
  .aphone-top {
    position: sticky; top: 0; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: 52px; padding: 0 14px; background: var(--agent-bar-bg);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .aphone-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .amain { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .atabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--agent-bar-bg);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line);
  }
  .atab {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px;
    border: 0; border-radius: 12px; background: none; cursor: pointer;
    color: var(--text-secondary); font-size: 10.5px; font-weight: 650;
  }
  .atab[aria-current='page'] { color: var(--brand-accent-ink); background: var(--brand-accent-wash); }
  .atab-icon { display: inline-flex; }
  /* The toast is attached to <body>, outside the frame. */
  body:has([data-shell='agent']) .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* --- search everything ---------------------------------------------------- */
.apalette {
  position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start;
  padding: 11vh 16px 16px; background: rgba(8, 12, 11, 0.5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: afade 0.12s ease;
}
.apalette-panel {
  width: min(660px, 100%); max-height: 74vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg);
  animation: apop 0.14s ease;
}
.apalette-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text-muted); }
.apalette-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; }
.apalette-close {
  border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: 6px;
  font-size: 11px; font-weight: 600; padding: 2px 7px; cursor: pointer; color: var(--text-secondary);
}
.apalette-list { overflow-y: auto; padding: 6px; }
.apalette-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.apalette-row[aria-selected='true'] { background: var(--brand-accent-wash); }
.apalette-icon { display: inline-flex; color: var(--text-muted); flex: none; }
.apalette-text { flex: 1; min-width: 0; }
.apalette-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apalette-hint { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apalette-kind {
  flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.apalette-copy {
  flex: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-raised); border-radius: 8px;
  font-size: 12px; font-weight: 600; padding: 4px 9px;
}
.apalette-copy:hover { border-color: var(--brand-accent); color: var(--brand-accent-ink); }
.apalette-empty { padding: 26px; text-align: center; color: var(--text-muted); }
.apalette-foot {
  display: flex; gap: 16px; flex-wrap: wrap; padding: 9px 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-muted); background: var(--surface-1);
}
.apalette-foot kbd { margin-right: 3px; }
@media (max-width: 640px) {
  .apalette { padding: 0; }
  .apalette-panel { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .apalette-foot, .apalette-kind { display: none; }
}
@keyframes afade { from { opacity: 0; } }
@keyframes apop { from { opacity: 0; transform: translateY(-8px) scale(0.985); } }

/* --- buttons and links the shell uses ------------------------------------ */
.abtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: 13.5px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.abtn:active { transform: scale(0.97); }
.abtn-primary { background: var(--brand-accent); color: #fff; }
.abtn-primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-accent) 38%, transparent); }
.abtn-line { background: var(--surface-raised); border-color: var(--line-strong); color: var(--text-primary); }
.abtn-line:hover { border-color: var(--brand-accent); color: var(--brand-accent-ink); }
.abtn-light { background: #fff; color: #06352c; }
.abtn-light:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); }
.abtn-ghost { background: var(--agent-hero-glass); color: var(--agent-hero-ink); border-color: rgba(255, 255, 255, 0.22); }
.abtn-ghost:hover { background: rgba(255, 255, 255, 0.2); }
.alink {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--brand-accent-ink); font-weight: 650; font-size: 13px;
}
.alink:hover { text-decoration: underline; }
.acheck { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 550; align-self: end; padding-bottom: 9px; cursor: pointer; }

/* --- Home: the scoreboard --------------------------------------------------- */
.ahome { display: flex; flex-direction: column; gap: 18px; }
.ascore-hello { margin: 0 0 10px; }
.ascore-kicker { border: 0; padding: 0; margin: 0 0 8px; }
.ascore { display: grid; grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)); gap: 12px; }
.ascore-tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; text-align: left;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); color: inherit; font: inherit;
}
button.ascore-tile { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
button.ascore-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.ascore-label { font-size: 12px; font-weight: 650; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ascore-value {
  display: flex; align-items: center; gap: 8px; min-height: 40px;
  font-size: clamp(20px, 1.95vw, 27px); font-weight: 750; letter-spacing: -0.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ascore-note { font-size: 12.5px; color: var(--text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ascore-ring { display: inline-flex; }
.ascore-tile.is-hero {
  position: relative; overflow: hidden; isolation: isolate; color: var(--agent-hero-ink); border-color: transparent;
  background:
    radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--agent-spark) 24%, transparent), transparent 58%),
    linear-gradient(135deg, var(--agent-hero-a) 0%, var(--agent-hero-b) 62%, var(--agent-hero-c) 140%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--agent-hero-a) 32%, transparent);
}
.ascore-tile.is-hero .ascore-label, .ascore-tile.is-hero .ascore-note { color: var(--agent-hero-muted); }
.ascore-tile.is-hero .ascore-value { font-size: clamp(28px, 3.1vw, 40px); }
.ascore-delta { font-weight: 700; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--agent-hero-glass); color: var(--agent-hero-ink); }
.ascore-delta.is-up { background: var(--agent-spark); color: #12300a; }
.ascore-draft { margin: 10px 2px 0; font-size: 12.5px; color: var(--text-muted); }
.ascore-draft:empty { display: none; }
.askel-score { width: 70%; height: 28px; margin: 0; }

.abars-plot { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 4px; }
.abar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; min-width: 0; }
.abar-amount { font-size: 11px; font-weight: 650; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.abar-fill {
  width: 100%; max-width: 54px; border-radius: 8px 8px 3px 3px;
  background: color-mix(in srgb, var(--brand-accent) 26%, var(--surface-2));
  transform-origin: bottom; animation: agrow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.abar-col:hover .abar-fill { background: color-mix(in srgb, var(--brand-accent) 50%, var(--surface-2)); }
.abar-col.is-best .abar-fill { background: var(--brand-accent); }
.abar-col.is-best .abar-amount { color: var(--brand-accent-ink); }
.abar-tick { font-size: 11px; color: var(--text-muted); }
.abars-foot { margin-top: 10px; }
@keyframes agrow { from { transform: scaleY(0); } }

/* --- the staff dashboard: this month by carrier, as one bar ------------------ */
.acbar {
  display: flex; align-items: stretch; gap: 2px; height: 34px; padding: 0; overflow: hidden;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
}
.acbar-seg {
  flex: none; min-width: 3px; padding: 0; border: 0; border-radius: 4px; cursor: default;
  transition: filter 0.12s ease;
}
.acbar-seg:first-child { border-radius: 9px 4px 4px 9px; }
.acbar-seg:hover, .acbar-seg:focus-visible { filter: brightness(1.12) saturate(1.1); outline: none; }
.acbar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13.5px; }
.acbar-head strong { font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.acbar-readout { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); min-height: 1.5em; font-variant-numeric: tabular-nums; }
.acbar-details { margin-top: 14px; }
.acbar-details > summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--brand-accent-ink); }
.acbar-details[open] > summary { margin-bottom: 10px; }

/* --- Home: active clients, a wide card of small ones ------------------------ */
.aclients { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.aclient {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1);
  min-width: 0;
}
.aclient[data-line='ACA'] { background: var(--brand-accent-wash); border-color: color-mix(in srgb, var(--brand-accent) 30%, transparent); }
.aclient-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.aclient-change { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aclient-change.is-up { color: var(--st-good-text); }
.aclient-change.is-down { color: var(--st-critical); }
.aclient-num { font-size: clamp(22px, 2.2vw, 30px); font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.aclient-label { font-size: 12.5px; font-weight: 650; color: var(--text-secondary); margin-top: 2px; }

/* --- Home: cards ----------------------------------------------------------- */
.ahome-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ahome-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.acard {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.acard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.acard-title { margin: 0; border: 0; padding: 0; font-size: 12px; }

.askel {
  height: 16px; border-radius: 8px; margin: 6px 0;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: ashimmer 1.3s ease infinite;
}
.askel-short { width: 55%; }
@keyframes ashimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.amoves { display: flex; flex-direction: column; gap: 10px; }
.amove {
  display: flex; align-items: center; gap: 14px; padding: 13px 14px 13px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1);
  border-left: 4px solid var(--st-idle);
}
.amove[data-kind='critical'] { border-left-color: var(--st-critical); }
.amove[data-kind='serious'] { border-left-color: var(--st-serious); }
.amove[data-kind='warning'] { border-left-color: var(--st-warning); }
.amove[data-kind='progress'] { border-left-color: var(--st-progress); }
.amove-text { flex: 1; min-width: 0; }
.amove-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.amove-title { font-weight: 650; }
.amove-detail { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.amoves-summary { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); }
.amoves-clear { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.amoves-clear-mark {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: color-mix(in srgb, var(--st-good) 16%, transparent); color: var(--st-good-text);
}
.amoves-clear-title { font-weight: 650; font-size: 15px; }

.asell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.asell {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; min-width: 0;
}
.asell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.asell-name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asell-product { font-size: 12px; color: var(--text-muted); margin-bottom: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asell-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.asell-number {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; cursor: pointer;
  border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface-raised);
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.asell-number:hover { border-color: var(--brand-accent); color: var(--brand-accent-ink); }
.asell-number.is-empty { border-style: solid; border-color: var(--line); color: var(--text-muted); font-weight: 500; cursor: default; }
.asell-portal { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; font-size: 13px; text-decoration: none; }
.asell-portal:hover { text-decoration: underline; }

.ateam-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* The staff dashboard's agency card: the same three numbers, each a way in. */
.astats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.astat {
  padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-1); color: inherit; font: inherit; min-width: 0;
}
button.astat { cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
button.astat:hover { border-color: var(--line-strong); transform: translateY(-1px); }
@media (max-width: 640px) { .astats { grid-template-columns: minmax(0, 1fr); } }
.ateam-num { font-size: 26px; font-weight: 740; letter-spacing: -0.02em; }
.ateam-label { font-size: 12px; color: var(--text-muted); }

/* --- Statements: an agent's months ---------------------------------------- */
.amonths { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.amonth {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 148px; padding: 12px 16px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.amonth:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.amonth[aria-pressed='true'] {
  border-color: var(--brand-accent); background: var(--brand-accent-wash);
  box-shadow: 0 0 0 1px var(--brand-accent);
}
.amonth-name { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.amonth-amount { font-size: 20px; font-weight: 740; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.amonth-note { font-size: 11.5px; color: var(--text-muted); }

/* --- What can I sell? ------------------------------------------------------ */
.asheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-top: 14px; }
.asheet {
  display: flex; flex-direction: column; gap: 12px; padding: 18px 20px;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); min-width: 0;
}
.asheet.is-ready { border-top: 3px solid var(--brand-accent); }
.asheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.asheet-name { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.asheet-product { font-size: 12.5px; color: var(--text-muted); }
.asheet-key { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 5px; }
.asheet-numbers { display: flex; flex-wrap: wrap; gap: 6px; }
.asheet-fine { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.asheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.asheet-actions .abtn { height: 34px; padding: 0 13px; font-size: 13px; }

@media (max-width: 1180px) {
  .ascore { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ascore-tile { grid-column: span 2; }
  .ascore-tile.is-hero { grid-column: span 6; }
}
@media (max-width: 700px) {
  .ascore-tile { grid-column: span 3; }
  .ascore-tile:last-child { grid-column: span 6; }
  .aclients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ascore-tile { padding: 14px; }
  .amove { flex-direction: column; align-items: stretch; }
  .asheet-grid { grid-template-columns: minmax(0, 1fr); }
  .asell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abars-plot { gap: 5px; height: 140px; }
  .abar-amount { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .abar-fill, .apalette, .apalette-panel, .askel { animation: none; }
  .asell, .ashortcut, .abtn { transition: none; }
}
@media print {
  .aside, .aphone-top, .atabbar { display: none !important; }
}