/* ─────────────────────────────────────────────────────────────
 * THRED Realty — Portal design system.
 *
 * Pure white. Crisp 1px borders. Manrope. Single accent #0096ff.
 * No emojis. No colored icons. No gradients (except apex hero).
 * No shadows on chrome. Shadows only on lifted surfaces (modals).
 *
 * Tokens are intentionally tight — pick from the scale, don't invent
 * in-between values.
 * ───────────────────────────────────────────────────────────── */

:root {
  /* ── Surface ── */
  --p-bg:               #ffffff;
  --p-surface:          #ffffff;
  --p-surface-alt:      #f8f9fa;
  --p-surface-hover:    #f1f3f5;

  /* ── Text ── */
  --p-text:             #0a0e14;
  --p-text-strong:      #050810;
  --p-text-muted:       #64748b;
  --p-text-on-accent:   #ffffff;

  /* ── Lines ── */
  --p-border:           #e5e7eb;
  --p-border-strong:    #cbd5e1;
  --p-divider:          #eef0f2;

  /* ── Accent (single) ── */
  --p-accent:           #0096ff;
  --p-accent-hover:     #0077cc;
  --p-accent-soft:      #e8f4ff;

  /* ── Status (used sparingly — solid fills only) ── */
  --p-ok:               #16a34a;
  --p-ok-soft:          #ecfdf5;
  --p-warn:             #d97706;
  --p-warn-soft:        #fef3c7;
  --p-danger:           #dc2626;
  --p-danger-soft:      #fef2f2;

  /* ── Type ── */
  --p-font:             'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --p-fs-12:            12px;
  --p-fs-13:            13px;
  --p-fs-14:            14px;
  --p-fs-16:            16px;
  --p-fs-18:            18px;
  --p-fs-22:            22px;
  --p-fs-28:            28px;
  --p-fs-36:            36px;
  --p-fs-48:            48px;

  /* ── Spacing rhythm ── */
  --p-s-4:              4px;
  --p-s-8:              8px;
  --p-s-12:             12px;
  --p-s-16:             16px;
  --p-s-24:             24px;
  --p-s-32:             32px;
  --p-s-48:             48px;
  --p-s-64:             64px;

  /* ── Radius ── */
  --p-r-input:          6px;
  --p-r-card:           8px;
  --p-r-pill:           999px;

  /* ── Layout ── */
  --p-sidebar-w:        260px;
  --p-topbar-h:         56px;
  --p-content-max:      1280px;

  /* ── Motion ── */
  --p-ease:             cubic-bezier(.2,.7,.2,1);
  --p-dur-fast:         100ms;
  --p-dur:              150ms;
}

/* ── Dark mode token overrides ───────────────────────────── */
:root[data-theme="dark"] {
  /* Surface */
  --p-bg:              #0e1116;
  --p-surface:         #161b22;
  --p-surface-alt:     #1c2230;
  --p-surface-hover:   #232b3a;

  /* Text */
  --p-text:            #e7eaef;
  --p-text-strong:     #f6f8fb;
  --p-text-muted:      #9aa4b2;
  --p-text-on-accent:  #ffffff;

  /* Lines */
  --p-border:          #2a313c;
  --p-border-strong:   #3a4350;
  --p-divider:         #232831;

  /* Accent */
  --p-accent:          #3aa0ff;
  --p-accent-hover:    #5fb3ff;
  --p-accent-soft:     rgba(58,160,255,.15);

  /* Status */
  --p-ok:              #34d399;
  --p-ok-soft:         rgba(52,211,153,.15);
  --p-warn:            #fbbf24;
  --p-warn-soft:       rgba(251,191,36,.16);
  --p-danger:          #f87171;
  --p-danger-soft:     rgba(248,113,113,.16);
}

/* Dark: alert border tints use the dark soft tokens */
:root[data-theme="dark"] .alert--ok     { border-color: rgba(52,211,153,.25); }
:root[data-theme="dark"] .alert--warn   { border-color: rgba(251,191,36,.25); }
:root[data-theme="dark"] .alert--danger { border-color: rgba(248,113,113,.25); }
:root[data-theme="dark"] .alert--info   { border-color: rgba(58,160,255,.25); }

/* Dark: modal overlay + card shadows */
:root[data-theme="dark"] .pm-overlay { background: rgba(0,0,0,.65); }
:root[data-theme="dark"] .pm-card    { box-shadow: 0 24px 60px rgba(0,0,0,.55); }

/* Dark: mobile sidebar shadow */
@media (max-width: 900px) {
  :root[data-theme="dark"] .sidebar {
    box-shadow: 0 12px 40px -8px rgba(0,0,0,.5);
  }
}

/* Dark: placeholder text */
:root[data-theme="dark"] .field input::placeholder,
:root[data-theme="dark"] .field textarea::placeholder,
:root[data-theme="dark"] .pm-input::placeholder { color: var(--p-text-muted); }

/* Dark: agent-action panels — border reads clearly */
:root[data-theme="dark"] .agent-action { border-color: var(--p-border); }

/* ── Reset + base ────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.portal {
  font-family: var(--p-font);
  color: var(--p-text);
  background: var(--p-bg);
  font-size: var(--p-fs-14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--p-accent); text-decoration: none; transition: color var(--p-dur) var(--p-ease); }
a:hover { color: var(--p-accent-hover); }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: var(--p-fs-14); }

h1, h2, h3, h4, h5, h6 { color: var(--p-text-strong); margin: 0; font-weight: 700; letter-spacing: -.015em; }
.h1 { font-size: var(--p-fs-36); line-height: 1.15; }
.h2 { font-size: var(--p-fs-28); line-height: 1.2; }
.h3 { font-size: var(--p-fs-22); line-height: 1.25; }
.h4 { font-size: var(--p-fs-18); line-height: 1.3; font-weight: 600; }
.eyebrow { font-size: var(--p-fs-12); font-weight: 600; color: var(--p-text-muted); text-transform: uppercase; letter-spacing: .04em; }

p { margin: 0; }
.muted { color: var(--p-text-muted); }
.num { font-variant-numeric: tabular-nums; }

/* ── App layout (sidebar + content) ──────────────────────────
   .app is locked to the viewport so the topbar stays anchored at
   the top and only .sidebar / .content scroll inside their own
   columns. Without this, long pages cause the document body to
   scroll the whole grid (topbar disappears, layout "jumps" on
   page change). Mobile (<= 900px) drops back to display:block
   below so natural document scroll works on phones. */
.app {
  display: grid;
  grid-template-columns: var(--p-sidebar-w) 1fr;
  grid-template-rows: var(--p-topbar-h) 1fr;
  height: 100vh;
  overflow: hidden;
}
body.has-impersonation-banner .app { height: calc(100vh - 40px); }

.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--p-s-24);
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-border);
}
.topbar-brand {
  display: flex; align-items: center; gap: var(--p-s-8);
  font-weight: 800; font-size: var(--p-fs-16); color: var(--p-text-strong);
}
.topbar-brand .dot { color: var(--p-accent); }
.topbar-context { color: var(--p-text-muted); font-size: var(--p-fs-13); }
.topbar-user {
  display: flex; align-items: center; gap: var(--p-s-12);
  font-size: var(--p-fs-13);
}
.topbar-user .avatar {
  width: 28px; height: 28px; border-radius: var(--p-r-pill);
  background: var(--p-accent-soft); color: var(--p-accent);
  display: grid; place-items: center; font-weight: 700; font-size: var(--p-fs-13);
}
.topbar-user a { color: var(--p-text-muted); }
.topbar-user a:hover { color: var(--p-text); }

/* ── Side rail ───────────────────────────────────────────── */
.sidebar {
  grid-column: 1;
  grid-row: 2;
  background: var(--p-surface);
  border-right: 1px solid var(--p-border);
  padding: var(--p-s-16) 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* keep sidebar scroll inside sidebar */
}
.nav-section { padding: var(--p-s-8) 0 var(--p-s-16); }
.nav-section + .nav-section { border-top: 1px solid var(--p-divider); padding-top: var(--p-s-16); }
.nav-section-label {
  padding: 0 var(--p-s-24) var(--p-s-8);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--p-text-muted);
}
.nav-item {
  display: flex; align-items: center; gap: var(--p-s-12);
  padding: var(--p-s-8) var(--p-s-24);
  color: var(--p-text); font-size: var(--p-fs-14);
  position: relative;
  transition: background var(--p-dur-fast) var(--p-ease), color var(--p-dur-fast) var(--p-ease);
}
.nav-item:hover { background: var(--p-surface-alt); color: var(--p-text); }
.nav-item--active {
  background: var(--p-accent-soft);
  color: var(--p-accent);
  font-weight: 600;
}
.nav-item--active::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; background: var(--p-accent); border-radius: 0 2px 2px 0;
}
.nav-item svg { width: 16px; height: 16px; stroke: currentColor; flex: 0 0 16px; }
.nav-badge {
  margin-left: auto;
  background: var(--p-accent); color: var(--p-text-on-accent);
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--p-r-pill);
  min-width: 18px; text-align: center;
}
.nav-item--active .nav-badge { background: var(--p-accent); }

/* ── Content ─────────────────────────────────────────────── */
.content {
  grid-column: 2;
  grid-row: 2;
  background: var(--p-bg);
  overflow-y: auto;
  overscroll-behavior: contain;   /* keep content scroll inside content */
}
.content-inner {
  max-width: var(--p-content-max);
  padding: var(--p-s-32) var(--p-s-48);
}
.page-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: var(--p-s-24); gap: var(--p-s-16); }
.page-head h1 { font-size: var(--p-fs-28); }
.page-head p { color: var(--p-text-muted); margin-top: var(--p-s-4); font-size: var(--p-fs-14); }
.page-actions { display: flex; gap: var(--p-s-8); }

/* ── Card primitive ──────────────────────────────────────── */
.card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-card);
  padding: var(--p-s-24);
}
.card + .card { margin-top: var(--p-s-16); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--p-s-16); gap: var(--p-s-16);
}
.card-head h2 { font-size: var(--p-fs-18); font-weight: 600; }
.card-foot { margin-top: var(--p-s-16); padding-top: var(--p-s-16); border-top: 1px solid var(--p-divider); display: flex; justify-content: space-between; align-items: center; }
.card-empty {
  padding: var(--p-s-48) var(--p-s-24);
  text-align: center; color: var(--p-text-muted);
}
.card-empty .h4 { color: var(--p-text); margin-bottom: var(--p-s-8); }

/* Visual grouping inside a card — soft surface-alt panel with an
   uppercase label. Used by the home Quick-actions card so related
   buttons read as a group instead of a wall of pills. */
.card__group {
  background: var(--p-surface-alt);
  border-radius: var(--p-r-input);
  padding: var(--p-s-12);
  margin-top: var(--p-s-8);
}
.card__group:first-of-type { margin-top: 0; }
.card__group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--p-text-muted);
  margin: 0 0 var(--p-s-8);
}

/* ── KPI cards row ───────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--p-s-16);
  margin-bottom: var(--p-s-24);
}
.kpi {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-card);
  padding: var(--p-s-16) var(--p-s-24);
}
.kpi-label { font-size: var(--p-fs-13); color: var(--p-text-muted); font-weight: 500; }
.kpi-value { font-size: var(--p-fs-28); font-weight: 700; margin-top: var(--p-s-4); letter-spacing: -.02em; color: var(--p-text-strong); }
.kpi-sub { font-size: var(--p-fs-12); color: var(--p-text-muted); margin-top: var(--p-s-4); }

/* ── Status pill ─────────────────────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--p-fs-12); font-weight: 600;
  padding: 2px 10px; border-radius: var(--p-r-pill);
  background: var(--p-surface-alt); color: var(--p-text);
}
.status--ok     { background: var(--p-ok-soft);     color: var(--p-ok); }
.status--warn   { background: var(--p-warn-soft);   color: var(--p-warn); }
.status--danger { background: var(--p-danger-soft); color: var(--p-danger); }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--p-s-8);
  height: 40px; padding: 0 var(--p-s-16);
  border: 1px solid transparent; border-radius: var(--p-r-input);
  font-family: inherit; font-size: var(--p-fs-14); font-weight: 600;
  cursor: pointer; transition: background var(--p-dur) var(--p-ease), border-color var(--p-dur) var(--p-ease), color var(--p-dur) var(--p-ease);
  text-decoration: none;
}
.btn--sm { height: 32px; padding: 0 var(--p-s-12); font-size: var(--p-fs-13); }
.btn--lg { height: 48px; padding: 0 var(--p-s-24); font-size: var(--p-fs-16); }
.btn--block { width: 100%; justify-content: center; }
.btn-primary {
  background: var(--p-accent); color: var(--p-text-on-accent); border-color: var(--p-accent);
}
.btn-primary:hover { background: var(--p-accent-hover); border-color: var(--p-accent-hover); color: var(--p-text-on-accent); }
.btn-secondary {
  background: var(--p-surface); color: var(--p-text); border-color: var(--p-border);
}
.btn-secondary:hover { background: var(--p-surface-alt); border-color: var(--p-border-strong); color: var(--p-text); }
.btn-tertiary {
  background: transparent; color: var(--p-accent); border-color: transparent; padding: 0 4px;
  height: auto;
}
.btn-tertiary:hover { color: var(--p-accent-hover); text-decoration: underline; }
.btn-danger {
  background: var(--p-danger); color: var(--p-text-on-accent); border-color: var(--p-danger);
}
.btn-danger:hover { filter: brightness(.95); color: var(--p-text-on-accent); }

/* ── Form primitives ─────────────────────────────────────── */
.field { margin-bottom: var(--p-s-16); }
.field label { display: block; font-size: var(--p-fs-13); font-weight: 500; color: var(--p-text); margin-bottom: var(--p-s-4); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"],
.field input[type="password"], .field input[type="search"], .field input[type="number"],
.field select, .field textarea {
  width: 100%; height: 40px; padding: 0 var(--p-s-12);
  background: var(--p-surface);
  border: 1px solid var(--p-border); border-radius: var(--p-r-input);
  color: var(--p-text); font-size: var(--p-fs-14);
  transition: border-color var(--p-dur) var(--p-ease), box-shadow var(--p-dur) var(--p-ease);
}
.field textarea { height: auto; min-height: 100px; padding: var(--p-s-12); resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--p-accent);
  box-shadow: 0 0 0 3px var(--p-accent-soft);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-s-12); }
.field-help { font-size: var(--p-fs-12); color: var(--p-text-muted); margin-top: var(--p-s-4); }
.field-error { font-size: var(--p-fs-12); color: var(--p-danger); margin-top: var(--p-s-4); }

/* ── Alert / notice ──────────────────────────────────────── */
.alert {
  padding: var(--p-s-12) var(--p-s-16);
  border-radius: var(--p-r-input);
  font-size: var(--p-fs-13);
  border: 1px solid transparent;
  margin-bottom: var(--p-s-16);
}
.alert--ok     { background: var(--p-ok-soft);     color: var(--p-ok);     border-color: rgba(22,163,74,.2); }
.alert--warn   { background: var(--p-warn-soft);   color: var(--p-warn);   border-color: rgba(217,119,6,.2); }
.alert--danger { background: var(--p-danger-soft); color: var(--p-danger); border-color: rgba(220,38,38,.2); }
.alert--info   { background: var(--p-accent-soft); color: var(--p-accent); border-color: rgba(0,150,255,.2); }

/* ── Tables ──────────────────────────────────────────────── */
.table {
  width: 100%; border-collapse: collapse;
  background: var(--p-surface);
  border: 1px solid var(--p-border); border-radius: var(--p-r-card); overflow: hidden;
}
.table th, .table td { padding: var(--p-s-16) var(--p-s-16); text-align: left; vertical-align: middle; }
.table th {
  background: var(--p-surface-alt);
  font-size: var(--p-fs-12); font-weight: 600; color: var(--p-text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--p-border);
  position: sticky; top: 0;
}
.table td { border-bottom: 1px solid var(--p-divider); font-size: var(--p-fs-14); height: 56px; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--p-surface-alt); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-empty { padding: var(--p-s-48); text-align: center; color: var(--p-text-muted); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Login surface (centered card) ───────────────────────── */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--p-bg); padding: var(--p-s-32);
}
.login-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-card);
  padding: var(--p-s-48); width: 100%; max-width: 420px;
}
.login-brand {
  display: flex; align-items: center; gap: var(--p-s-8);
  font-weight: 800; font-size: var(--p-fs-22); color: var(--p-text-strong);
  margin-bottom: var(--p-s-32);
}
.login-brand .dot { color: var(--p-accent); }
.login-card h1 { font-size: var(--p-fs-22); margin-bottom: var(--p-s-8); }
.login-card .login-sub { color: var(--p-text-muted); font-size: var(--p-fs-14); margin-bottom: var(--p-s-24); }
.login-foot { margin-top: var(--p-s-24); padding-top: var(--p-s-16); border-top: 1px solid var(--p-divider); text-align: center; }
.login-foot a { font-size: var(--p-fs-13); color: var(--p-text-muted); }

/* ── 404 inside portal ───────────────────────────────────── */
.portal-404 { padding: var(--p-s-64) var(--p-s-24); text-align: center; }
.portal-404 .h1 { color: var(--p-text-muted); font-size: var(--p-fs-48); font-weight: 800; letter-spacing: -.04em; }
.portal-404 .h2 { margin: var(--p-s-8) 0 var(--p-s-16); }

/* ── Honeypot ────────────────────────────────────────────── */
.field-hp { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }

/* ── Impersonation banner ────────────────────────────────────
   Emitted by tr_render_impersonation_banner() near the top of <body>
   on every page during a broker→agent impersonation session. Fixed
   at the very top, displaces the topbar down via .app--imp padding. */
.impersonation-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; gap: var(--p-s-12);
  padding: 8px var(--p-s-24);
  background: #d97706;   /* warn ~ amber 600 */
  color: #ffffff; font-size: var(--p-fs-13); font-weight: 500;
}
.impersonation-banner__label {
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 11px;
  background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 3px;
}
.impersonation-banner__as { opacity: .85; }
.impersonation-banner__form { margin-left: auto; display: inline-flex; }
.impersonation-banner__exit {
  background: rgba(255,255,255,.15); color: #ffffff;
  border: 1px solid rgba(255,255,255,.4);
  font-family: inherit; font-size: var(--p-fs-12); font-weight: 700;
  padding: 4px 12px; border-radius: var(--p-r-pill);
  cursor: pointer;
  transition: background .15s var(--p-ease);
}
.impersonation-banner__exit:hover { background: rgba(255,255,255,.25); }

/* Body padding to clear the banner when present. Add class manually
   in the shell when banner is rendered, or rely on the natural layout
   shift since the banner is fixed and ~40px tall. */
body.has-impersonation-banner { padding-top: 40px; }
body.has-impersonation-banner .topbar { top: 40px; }

/* ── Stripe test-mode banner ─────────────────────────────── */
.stripe-test-banner {
  width: 100%;
  background: #fef3c7;   /* amber-100 */
  color: #92400e;         /* amber-800 */
  font-size: var(--p-fs-13);
  font-weight: 500;
  padding: 7px var(--p-s-24);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid #fde68a;
  flex-shrink: 0;
}
.stripe-test-banner a {
  color: #92400e;
  text-decoration: underline;
  font-weight: 700;
}
.stripe-test-banner a:hover { color: #78350f; }
@media (max-width: 600px) {
  .stripe-test-banner { font-size: var(--p-fs-12); padding: 6px var(--p-s-12); }
}

@media (max-width: 600px) {
  .impersonation-banner { padding: 6px var(--p-s-12); font-size: var(--p-fs-12); gap: var(--p-s-8); }
  .impersonation-banner__as { display: none; }
}

/* ── Topbar hamburger (shown only at mobile via @media below) ── */
.topbar-burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer;
  padding: 0;
}
.topbar-burger span {
  display: block; width: 20px; height: 2px;
  background: var(--p-text); margin: 4px auto;
  transition: transform .15s var(--p-ease), opacity .15s var(--p-ease);
}
.app--nav-open .topbar-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.app--nav-open .topbar-burger span:nth-child(2) { opacity: 0; }
.app--nav-open .topbar-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Responsive ─────────────────────────────────────────────
   Two tiers:
     <= 900px  .app drops the grid entirely → topbar / content
               stack as block-level children. Sidebar becomes a
               fixed off-canvas drawer. This single rule replaces
               the grid-column placement bug that was offsetting
               .content into an implicit column at narrow widths.
     <=  600px Phone: iOS-Safari zoom prevention on inputs, 44px
               touch targets, .field-row stacks, .card padding
               tightens, tables get a horizontal scroll wrap.
   The portal primitives (.card .btn .field .kpi .table) are
   already fluid — they fill their parent, so very little needs
   to change at small widths beyond what's here.
   ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Drop the grid + viewport lock. Mobile uses natural document
     scroll; topbar + content stack as block children, sidebar is
     position:fixed below and out of flow. */
  .app          { display: block; height: auto; overflow: visible; }
  body.has-impersonation-banner .app { height: auto; }
  .topbar       { padding: 0 var(--p-s-16); gap: var(--p-s-8); }
  .topbar-burger{ display: grid; place-items: center; }
  .topbar-context { display: none; }
  .content      { overflow-y: visible; overscroll-behavior: auto; }

  .sidebar {
    position: fixed; top: var(--p-topbar-h); left: 0; bottom: 0;
    width: 288px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .25s var(--p-ease);
    z-index: 60;
    box-shadow: 0 12px 40px -8px rgba(0,0,0,.15);
    overscroll-behavior: contain;
  }
  .app--nav-open .sidebar { transform: translateX(0); }
  .app--nav-open::after {
    content: ''; position: fixed; inset: var(--p-topbar-h) 0 0 0;
    background: rgba(0,0,0,.35); z-index: 50;
  }

  /* Drawer nav items — taller tap target. */
  .nav-item { min-height: 44px; padding: var(--p-s-12) var(--p-s-24); }

  .content-inner { padding: var(--p-s-24); }
  .page-head     { flex-direction: column; align-items: flex-start; gap: var(--p-s-12); }
}

@media (max-width: 768px) {
  /* Collapse two-column field rows at tablet width (was phone-only at 600px).
     Prevents cramped paired inputs on tablets and landscape phones. */
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* iOS Safari auto-zooms on focus when font-size < 16px. */
  .field input, .field select, .field textarea { font-size: 16px; height: 44px; }
  .field textarea { height: auto; min-height: 96px; }

  .btn       { min-height: 44px; }
  .btn--sm   { min-height: 36px; }

  .topbar    { padding: 0 var(--p-s-12); }
  .topbar-user-name { display: none; }   /* keep avatar only on phones */

  .content-inner { padding: var(--p-s-16); }
  .page-head h1  { font-size: var(--p-fs-22); }

  .card      { padding: var(--p-s-16); }
  .card-head { flex-direction: column; align-items: flex-start; gap: var(--p-s-8); }

  .field-row { grid-template-columns: 1fr; }

  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table      { min-width: 540px; }
  .table th, .table td { padding: var(--p-s-12); font-size: var(--p-fs-13); }

  /* Stack page-action buttons full-width on phones. */
  .page-actions { flex-direction: column; align-items: stretch; }
  .page-actions .btn { width: 100%; justify-content: center; }

  /* Collapse inline-grid add-forms (e.g. profile.php link/doc add row) to single column. */
  form[style*="grid"] { grid-template-columns: 1fr !important; }

  /* Agent action panels: stack controls vertically, override fixed inline widths. */
  .agent-action__row { flex-direction: column; align-items: stretch; }
  .agent-action__row input,
  .agent-action__row select,
  .agent-action__row .field,
  .agent-action__row form { width: 100%; }
  .agent-action__row input[type=text],
  .agent-action__row input[type=email],
  .agent-action__row input[type=number],
  .agent-action__row select { width: 100% !important; }

  .login-card { padding: var(--p-s-24); }
}

@media (max-width: 520px) {
  /* Free up topbar space at ultra-narrow widths.
     Hide the decorative avatar initials; shrink the brand wordmark.
     Sign-out link and theme toggle remain fully reachable. */
  .topbar-user .avatar { display: none; }
  .topbar-brand { font-size: var(--p-fs-14); }
}

/* ── Branded modal (portalModal) ───────────────────────────── */
.pm-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:rgba(5,8,16,.55); padding:24px; opacity:0; transition:opacity .16s ease; }
.pm-overlay.pm-open{ opacity:1; }
.pm-card{ width:100%; max-width:440px; background:var(--p-surface,#fff); color:var(--p-text,#0a0e14);
  border:1px solid var(--p-border,#e5e7eb); border-radius:var(--p-r-card,8px);
  box-shadow:0 24px 60px rgba(5,8,16,.28); padding:24px; transform:translateY(8px) scale(.98);
  transition:transform .16s ease; }
.pm-overlay.pm-open .pm-card{ transform:none; }
.pm-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.pm-mark{ width:10px; height:10px; border-radius:3px; background:var(--p-accent,#0096ff); display:inline-block; }
.pm-brand{ font-size:var(--p-fs-12,12px); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--p-text-muted,#64748b); }
.pm-title{ margin:0 0 6px; font-size:var(--p-fs-18,18px); font-weight:700; color:var(--p-text-strong,#050810); }
.pm-msg{ margin:0; font-size:var(--p-fs-14,14px); color:var(--p-text,#0a0e14); line-height:1.5; white-space:pre-line; }
.pm-input{ width:100%; margin-top:14px; padding:10px 12px; font-size:var(--p-fs-14,14px);
  border:1px solid var(--p-border-strong,#cbd5e1); border-radius:var(--p-r-input,6px); background:var(--p-bg,#fff); color:var(--p-text,#0a0e14); }
.pm-input:focus{ outline:none; border-color:var(--p-accent,#0096ff); box-shadow:0 0 0 3px var(--p-accent-soft,#e8f4ff); }
.pm-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
@media (max-width:520px){ .pm-actions{ flex-direction:column-reverse; } .pm-actions .btn{ width:100%; } }

/* ── Tab-bar navigation: brief dim while the content swaps ──── */
.content--loading{ opacity:.45; transition:opacity .12s ease; pointer-events:none; }

/* ═══════════════════════════════════════════════════════════════
 * THRED Brand Auth Shell — login / set-password / onboarding
 *
 * Scoped entirely to .login-wrap so the authenticated portal
 * chrome is completely untouched.
 *
 * Brand palette sourced from apex style.css :root:
 *   --ink     #0c0c0d   (near-black editorial bg)
 *   --accent  #0096ff   (brand blue — matches --p-accent, kept)
 *   --paper   #faf8f3   (warm off-white)
 *   --line    #e4e2dc
 * ═══════════════════════════════════════════════════════════════ */

/* 1 — Backdrop: THRED ink (near-black), full-screen */
.login-wrap {
  background: #0c0c0d;                       /* --ink */
  background-image:
    radial-gradient(ellipse at 60% 0%, rgba(0,150,255,.08) 0%, transparent 65%),
    radial-gradient(ellipse at 10% 100%, rgba(0,150,255,.05) 0%, transparent 55%);
}

/* 2 — Card: clean warm-white, generous padding, premium shadow */
.login-card {
  background: #ffffff;
  border: none;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(12,12,13,.08),
    0 24px 64px rgba(12,12,13,.55),
    0 4px 16px rgba(12,12,13,.25);
  padding: 48px;
  max-width: 440px;
  /* Thin brand-accent bar along the top of the card */
  border-top: 3px solid #0096ff;
}

/* 3 — Logo mark + wordmark row */
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #0c0c0d;
  margin-bottom: 28px;
}
.login-brand .dot { color: #0096ff; }
.login-logo {
  flex-shrink: 0;
  color: #0c0c0d;           /* icon inherits currentColor via stroke */
}

/* 4 — Tagline (optional .login-tagline under the logo) */
.login-tagline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #64748b;
  margin-top: -22px;        /* pulls up under the brand row */
  margin-bottom: 28px;
}

/* 5 — Headings inside the card */
.login-card h1 {
  font-size: 20px;
  font-weight: 700;
  color: #0c0c0d;
  margin-bottom: 6px;
}

/* 6 — Subheading */
.login-card .login-sub {
  color: #54565a;
  font-size: 14px;
  margin-bottom: 24px;
}

/* 7 — Primary button: keep brand blue (matches --p-accent), already correct.
   Add a scoped override just in case a future token change drifts it. */
.login-card .btn-primary {
  background: #0096ff;
  border-color: #0096ff;
}
.login-card .btn-primary:hover {
  background: #0077cc;
  border-color: #0077cc;
}

/* 8 — Footer link inside the card */
.login-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e4e2dc;
  text-align: center;
}
.login-foot a {
  font-size: 13px;
  color: #54565a;
}
.login-foot a:hover { color: #0c0c0d; }

/* 9 — Mobile: full-width card with comfortable edge padding */
@media (max-width: 520px) {
  .login-wrap { padding: 24px 16px; align-items: flex-start; padding-top: 48px; }
  .login-card { padding: 32px 24px; max-width: 100%; border-radius: 12px; }
  .login-tagline { margin-top: -16px; }
}

/* ── Agent Home — micro-site status body layout ──────────────
 * Two-column inside the micro-site card: info on the left, QR on
 * the right. Collapses to single column on phones. */
.tr-agent-home-site-body {
  display: flex;
  align-items: flex-start;
  gap: var(--p-s-24);
}
.tr-agent-home-site-info {
  flex: 1 1 0;
  min-width: 0;
}
.tr-agent-home-qr {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 480px) {
  .tr-agent-home-site-body { flex-direction: column; }
  .tr-agent-home-qr { flex-direction: row; align-items: center; gap: var(--p-s-8); }
  .tr-agent-home-qr > div { margin-top: 0; }
}

/* ── Agent Home — profile completeness bar ────────────────── */
.tr-profile-bar-track {
  height: 6px;
  background: var(--p-surface-alt);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-pill);
  overflow: hidden;
}
.tr-profile-bar-fill {
  height: 100%;
  background: var(--p-accent);
  border-radius: var(--p-r-pill);
  transition: width .3s var(--p-ease);
  min-width: 4px;
}

/* ── Agent Actions panel ──────────────────────────────────────
 * Vertical stack of labeled action rows inside the Agents table
 * <details> disclosure. One .agent-action per control.
 * ──────────────────────────────────────────────────────────── */
.agent-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 0;
  max-width: 560px;
}
.agent-action {
  background: var(--p-surface-alt);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-input, 8px);
  padding: 12px 14px;
}
.agent-action__head {
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
  margin: 0 0 2px;
}
.agent-action__desc {
  font-size: 12px;
  color: var(--p-text-muted);
  margin: 0 0 10px;
  line-height: 1.4;
}
.agent-action__row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.agent-action__row select,
.agent-action__row input[type=text],
.agent-action__row input[type=email] {
  min-width: 0;
}

/* ── Theme toggle button (topbar) ───────────────────────── */
.topbar-theme-toggle {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--p-r-input);
  color: var(--p-text-muted);
  cursor: pointer;
  padding: 0;
  transition: background var(--p-dur) var(--p-ease), border-color var(--p-dur) var(--p-ease), color var(--p-dur) var(--p-ease);
  flex-shrink: 0;
}
.topbar-theme-toggle:hover {
  background: var(--p-surface-alt);
  border-color: var(--p-border);
  color: var(--p-text);
}
.topbar-theme-toggle svg { width: 16px; height: 16px; }

/* Show the right icon for the current theme (scoped so they beat the svg rule) */
.topbar-theme-toggle .icon-sun  { display: none; }
.topbar-theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .topbar-theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .topbar-theme-toggle .icon-moon { display: none; }

/* ── Profile headshot preview (Profile → Headshot) ── */
.profile-headshot-preview {
  width: 96px; height: 96px; flex: 0 0 96px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--p-border);
  background: var(--p-surface-alt);
  display: grid; place-items: center;
}
.profile-headshot-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-headshot-preview span { font-weight: 800; font-size: 28px; color: var(--p-text-muted); letter-spacing: -.02em; }