/* ════════════════════════════════════════════════════════════════════
   DNA+ HUB  ·  Visual System
   Aligned 1:1 with the Card Capture app design tokens.
   Manrope + JetBrains Mono · gold gradient buttons · rounded surfaces
   ════════════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS  (matched exactly to Card Capture) ────────────────── */
:root {
  /* Surfaces */
  --bg:        #0a0a0a;
  --bg-soft:   #131313;
  --surface:   #181818;
  --surface2:  #202020;
  --surface3:  #282828;
  --border:    #2c2c2c;
  --border2:   #3a3a3a;

  /* Gold (DNA+ signature) — exact Card Capture values */
  --gold:      #b8962e;
  --gold-lt:   #d4ae52;
  --gold-dim:  #8a6e20;
  --gold-glow: rgba(184, 150, 46, 0.15);

  /* Text */
  --white:     #f5f5f5;
  --text:      #ededed;
  --muted:     #8a8a8a;
  --muted2:    #5e5e5e;

  /* Status */
  --green:     #6abf7b;
  --red:       #d96b6b;
  --yellow:    #c9922a;

  /* Type */
  --sans:      'Manrope', system-ui, -apple-system, sans-serif;
  --mono:      'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Spacing rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  /* Radii */
  --radius-sm:  6px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
}

/* ─── RESET ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Subtle SVG noise grain overlay (matches Card Capture) */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ─── Custom scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--bg); }
::-webkit-scrollbar-thumb        { background: var(--border2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover  { background: var(--gold-dim); }
* { scrollbar-width: thin; scrollbar-color: var(--border2) var(--bg); }

/* Color helpers */
.gold       { color: var(--gold); }
.gold-bold  { color: var(--gold-lt); font-weight: 800; }


/* ─── Reusable: gold dot with glow (matches Card Capture) ─────────── */
.gold-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  flex-shrink: 0;
  display: inline-block;
}

/* ─── Reusable: eyebrow pill (matches Card Capture) ───────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(184, 150, 46, 0.3);
  border-radius: 100px;
  background: rgba(184, 150, 46, 0.04);
  margin-bottom: 1.25rem;
}


/* ════════════════════════════════════════════════════════════════════
   PRIMARY BUTTON  (matches Card Capture exactly)
   ──────────────────────────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: linear-gradient(135deg, #c19a2c 0%, var(--gold-lt) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius);
  padding: 0.95rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 2px 16px rgba(184, 150, 46, 0.2);
  transition: all 0.35s ease;
  cursor: pointer;
}
.btn-primary:hover {
  background-position: 0% 0;
  box-shadow: 0 4px 28px rgba(184, 150, 46, 0.45);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ════════════════════════════════════════════════════════════════════
   LOGIN GATE  (matches Card Capture password gate)
   ──────────────────────────────────────────────────────────────────── */

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Top radial gold glow */
.login-glow {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(184, 150, 46, 0.09) 0%, transparent 65%);
  pointer-events: none;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: #141414;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.75rem 2.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Top hairline gold gradient line */
.login-card-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 40%, var(--gold-dim) 60%, transparent);
}

.login-logo {
  margin-bottom: 1.5rem;
  line-height: 0;
  display: flex;
  justify-content: center;
}
.login-logo img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 2px 14px rgba(184, 150, 46, 0.25));
}
.logo-fallback {
  display: none;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  color: var(--white);
}

.login-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.login-title {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.login-sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-input-wrap {
  position: relative;
}
.login-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.78rem 2.75rem 0.78rem 0.95rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}
.login-input:focus {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.login-input::placeholder { color: #3d3d3d; }

.login-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: #555;
  transition: color 0.15s;
  cursor: pointer;
  display: flex;
}
.login-eye-btn:hover { color: var(--gold-lt); }

.login-error {
  font-size: 0.76rem;
  color: var(--red);
  min-height: 1.1rem;
  margin: 0.25rem 0 0.25rem;
  text-align: left;
  padding-left: 0.25rem;
  visibility: hidden;
}
.login-error.show { visibility: visible; }

.login-footnote {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-top: 1.75rem;
}


/* ════════════════════════════════════════════════════════════════════
   HUB SHELL
   ──────────────────────────────────────────────────────────────────── */

.hub {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* ─── SIDEBAR ─────────────────────────────────────────────────────── */

.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 1.75rem 1rem;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 10;
}

.sidebar-top {
  padding: 0.5rem 0.75rem 2rem;
}
.sidebar-logo {
  display: block;
  line-height: 0;
  margin-bottom: 0.5rem;
  transition: opacity 0.2s;
}
.sidebar-logo:hover { opacity: 0.75; }
.sidebar-logo img {
  height: 30px;
  width: auto;
  filter: drop-shadow(0 1px 8px rgba(184, 150, 46, 0.2));
}
.sidebar-logo-fallback {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: -0.03em;
  color: var(--white);
}
.sidebar-tagline {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-top: 0.6rem;
}
.sidebar-tagline span {
  color: var(--gold-dim);
  margin: 0 0.4em;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}
/* [hidden] must beat the explicit display above, or hiding a nav item
   (e.g. Intake for non-staff) leaves it visible and clickable. Same
   cascade fix as intake-alerts.css:30 / styles.css:2059. */
.nav-item[hidden] { display: none; }
.nav-icon {
  display: flex;
  color: var(--muted2);
  transition: color 0.2s ease;
  flex-shrink: 0;
}
.nav-item:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}
.nav-item:hover .nav-icon { color: var(--gold); }

.nav-item.active {
  color: var(--white);
  background: var(--surface3);
  border-color: var(--border2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.nav-item.active .nav-icon { color: var(--gold); }

/* Partners nav unread chip — new client→team messages */
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--gold);
  color: #0a0a0a;
  font-size: 0.66rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px var(--gold-glow);
}

/* Header notification center — bell + dropdown of items needing follow-up */
.notif { position: relative; display: flex; align-items: center; margin-right: 0.75rem; }
.notif-btn {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; transition: all 0.15s ease;
}
.notif-btn:hover { color: var(--gold-lt); border-color: var(--gold-dim); }
.notif-btn svg { width: 17px; height: 17px; }
.notif-dot {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--gold); color: #0a0a0a;
  font-size: 0.6rem; font-weight: 800; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-width: 90vw;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 200; overflow: hidden;
  max-height: 80vh; overflow-y: auto;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 600;
}
.notif-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.notif-close:hover { color: var(--text); }
.notif-list { max-height: 45vh; overflow-y: auto; }
.notif-empty { padding: 1.6rem 1rem; text-align: center; color: var(--muted2); font-size: 0.82rem; }
.notif-item {
  display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; text-align: left;
  padding: 0.7rem 0.9rem; background: none; border: none;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.12s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface2); }
.notif-item-ic { display: flex; color: var(--gold-lt); flex-shrink: 0; margin-top: 1px; }
.notif-item-ic svg { width: 16px; height: 16px; }
.notif-item-body { min-width: 0; flex: 1; }
.notif-item-top { display: flex; align-items: center; gap: 0.4rem; }
.notif-item-top b { color: var(--text); font-size: 0.84rem; font-weight: 700; }
.notif-item-n {
  background: var(--gold); color: #0a0a0a; font-size: 0.6rem; font-weight: 800;
  border-radius: 8px; min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.notif-item-time { margin-left: auto; color: var(--muted2); font-size: 0.68rem; white-space: nowrap; }
.notif-item-snip {
  display: block; color: var(--muted); font-size: 0.78rem; margin-top: 0.15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-kind { color: var(--gold-lt); font-weight: 700; font-size: 0.7rem; }

.sidebar-bottom {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.btn-ghost-sidebar {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}
.btn-ghost-sidebar:hover {
  color: var(--text);
  border-color: var(--border2);
  background: var(--surface);
}
.sidebar-credit {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 0 0.85rem;
}


/* ─── MAIN CONTENT ────────────────────────────────────────────────── */

.main {
  padding: 2.25rem 3rem;
  max-width: 1400px;
  width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.25rem;
}
.breadcrumb {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.page-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--white);
}
.header-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-align: right;
}

/* Page transitions */
.page { animation: pageIn 0.3s ease; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─── HOME PAGE ───────────────────────────────────────────────────── */

.hero {
  margin-bottom: 3rem;
  max-width: 720px;
}
.hero-headline {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 1.25rem;
  color: var(--white);
}
.hero-sub {
  font-size: 1rem;
  color: var(--muted);
  max-width: 540px;
  line-height: 1.7;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.85rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

/* Top hairline gold gradient on hover (matches Card Capture .card pattern) */
.tile-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 40%, var(--gold-dim) 60%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tile:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}
.tile:hover .tile-line { opacity: 1; }

.tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.tile-num {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.tile-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 0.65rem;
}
.tile-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}
.tile-link {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.25s ease, gap 0.25s ease;
}
.tile:hover .tile-link {
  color: var(--gold-lt);
  gap: 0.7rem;
}


/* ─── INNER PAGE INTRO ────────────────────────────────────────────── */

.page-intro {
  margin-bottom: 1.75rem;
  max-width: 720px;
}
.intro-headline {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
  color: var(--white);
}
.intro-sub {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 560px;
  line-height: 1.65;
}


/* ─── EMBED FRAME ─────────────────────────────────────────────────── */

.embed-frame {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  height: calc(100vh - 320px);
  min-height: 580px;
  overflow: hidden;
}
.embed-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--surface);
}

.embed-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: var(--surface);
  z-index: 2;
  gap: 0.75rem;
}
.placeholder-title {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.placeholder-text {
  color: var(--muted);
  max-width: 480px;
  font-size: 0.9rem;
  line-height: 1.7;
}
.placeholder-text code {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: rgba(184, 150, 46, 0.08);
  color: var(--gold-lt);
  padding: 0.15em 0.45em;
  border-radius: 4px;
}


/* ─── KNOWLEDGE BASE CARD ─────────────────────────────────────────── */

.kb-card {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  min-height: 460px;
}
.kb-card-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 40%, var(--gold-dim) 60%, transparent 100%);
}
.kb-card-left {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-right: 1px solid var(--border);
}
.kb-icon {
  color: var(--gold);
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 12px rgba(184, 150, 46, 0.3));
}
.kb-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--white);
}
.kb-desc {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 460px;
  margin-bottom: 1.5rem;
}
.kb-launch {
  width: auto;
  padding: 0.95rem 1.75rem;
}
.kb-note {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted2);
  margin-top: 1rem;
}

.kb-card-right {
  padding: 2.5rem;
  background: var(--bg-soft);
}
.kb-suggestions-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.kb-suggestions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.kb-suggestions li {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0.6rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s ease;
  line-height: 1.4;
}
.kb-suggestions li:hover {
  color: var(--text);
  border-color: var(--gold-dim);
  background: var(--surface2);
}


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .main { padding: 1.75rem 1.75rem; }
  .kb-card { grid-template-columns: 1fr; }
  .kb-card-left { border-right: none; border-bottom: 1px solid var(--border); }
}

@media (max-width: 768px) {
  .hub { grid-template-columns: 1fr; }
  .sidebar {
    position: relative;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    padding: 0.75rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-top, .sidebar-bottom { display: none; }
  .sidebar-nav {
    flex-direction: row;
    flex: 1;
    gap: 4px;
  }
  .nav-item {
    padding: 0.55rem 0.85rem;
    white-space: nowrap;
    font-size: 0.78rem;
  }
  .nav-icon { display: none; }
  .main { padding: 1.25rem; }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .header-right { text-align: left; }
  .embed-frame { height: 70vh; min-height: 480px; }
  .tile { min-height: 200px; padding: 1.5rem; }
}


/* ════════════════════════════════════════════════════════════════════
   LIVE LEADERBOARD
   ──────────────────────────────────────────────────────────────────── */

.lb-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}
.lb-status-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.lb-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.lb-pulse::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  animation: lb-pulse-anim 2s ease-out infinite;
}
@keyframes lb-pulse-anim {
  0%   { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
.lb-status-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-weight: 500;
}
.lb-status-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.lb-status-right {
  display: flex;
  gap: 3rem;
}
.lb-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.lb-stat-value {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.03em;
}
.lb-stat-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 4px;
}

/* Filter row */
.lb-filter-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.lb-filter-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.lb-filter-select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 2.5rem 0.5rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  cursor: pointer;
  outline: none;
  min-width: 220px;
  transition: border-color 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b8962e' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}
.lb-filter-select:hover,
.lb-filter-select:focus { border-color: var(--gold-dim); }

/* Board */
.lb-board {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 200px;
}

/* Rows */
.lb-row {
  display: grid;
  grid-template-columns: 56px 1fr 180px 160px 80px;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
  gap: 1rem;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--surface2); }

.lb-rank-1 { background: linear-gradient(90deg, rgba(184,150,46,0.08) 0%, transparent 60%); }
.lb-rank-1 .lb-name { color: var(--gold-lt); }
.lb-rank-1 .lb-rank-num,
.lb-rank-2 .lb-rank-num,
.lb-rank-3 .lb-rank-num { color: var(--gold); }

.lb-rank-num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--muted2);
  letter-spacing: -0.03em;
}
.lb-name {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
}
.lb-name-id {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted2);
  display: block;
  margin-top: 2px;
}
.lb-location {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.lb-bar-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lb-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(184,150,46,0.1);
  border-radius: 99px;
  overflow: hidden;
}
.lb-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-lt));
  border-radius: 99px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.lb-count {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--white);
  text-align: right;
  letter-spacing: -0.03em;
  min-width: 40px;
}

/* Flash animation on new activity */
@keyframes lb-flash {
  0%   { background: rgba(184,150,46,0.15); }
  100% { background: transparent; }
}
.lb-just-updated { animation: lb-flash 1.5s ease-out; }

/* Empty state */
.lb-empty {
  padding: 4rem 2rem;
  text-align: center;
}
.lb-empty-title {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.lb-empty-text {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Mobile */
@media (max-width: 768px) {
  .lb-status { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .lb-status-right { width: 100%; justify-content: space-between; }
  .lb-row { grid-template-columns: 40px 1fr 60px; gap: 0.5rem; padding: 0.85rem 1rem; }
  .lb-location, .lb-bar-cell { display: none; }
}

/* ── Leaderboard controls (tabs + filter) ── */
.lb-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.lb-tabs {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}
.lb-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.45rem 0.9rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.lb-tab:hover { color: var(--text); background: var(--surface2); }
.lb-tab.active {
  background: var(--gold);
  color: var(--bg);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   CONVERSIONS PAGE
   ──────────────────────────────────────────────────────────────────── */

/* Stat bar */
.cv-status {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.cv-stat {
  background: var(--surface);
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cv-stat-value {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.03em;
}
.cv-stat-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}

/* Date controls */
.cv-controls {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.cv-date-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.cv-date-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.875rem;
  padding: 0.55rem 0.85rem;
  outline: none;
  transition: border-color 0.2s ease;
  color-scheme: dark;
  min-width: 160px;
}
.cv-date-input:focus { border-color: var(--gold-dim); }
.cv-refresh {
  width: auto;
  padding: 0.6rem 1.25rem;
  font-size: 0.72rem;
  margin-left: auto;
}

/* Section headers */
.cv-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.85rem;
  padding: 0 0.25rem;
}
.cv-section-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.cv-chart-meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  color: var(--muted);
}

/* Chart wrapper */
.cv-chart-wrap {
  margin-bottom: 1.5rem;
}
.cv-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  min-height: 280px;
  position: relative;
}
.cv-chart svg { width: 100%; height: 240px; display: block; }
.cv-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted2);
}

/* Chart elements */
.cv-line { fill: none; stroke: url(#cvGradient); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cv-area { fill: url(#cvAreaGradient); opacity: 0.8; }
.cv-axis-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; fill: var(--muted); letter-spacing: 0.05em; }
.cv-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.cv-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 2; transition: r 0.2s ease; }
.cv-dot:hover { r: 6; }
.cv-tooltip { fill: var(--bg); stroke: var(--gold-dim); stroke-width: 1; }
.cv-tooltip-text { font-family: 'Manrope', sans-serif; font-size: 11px; fill: var(--white); }

/* Table */
.cv-table-wrap { margin-bottom: 1rem; }
.cv-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cv-table-row {
  display: grid;
  grid-template-columns: 28px 1.6fr 80px 80px 80px 70px 70px 80px 1fr;
  align-items: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  gap: 0.6rem;
  transition: background 0.2s ease;
  cursor: pointer;
}
.cv-table-row:last-child { border-bottom: none; }
.cv-table-row.cv-table-head {
  background: rgba(0,0,0,0.2);
  padding: 0.6rem 1rem;
  cursor: default;
}
.cv-table-row.cv-table-head .cv-cell {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
}
.cv-table-row:not(.cv-table-head):hover { background: var(--surface2); }
.cv-cell { font-family: var(--sans); font-size: 0.9rem; color: var(--text); }
.cv-cell-loc { font-weight: 600; color: var(--white); }
.cv-cell-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-cell-rate { font-weight: 700; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.cv-cell-bar { display: flex; align-items: center; }
.cv-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(184,150,46,0.1);
  border-radius: 99px;
  overflow: hidden;
}
.cv-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-lt));
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cv-empty {
  padding: 4rem 2rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted2);
}

/* Top 3 highlight */
.cv-table-row.cv-rank-1 .cv-cell-loc { color: var(--gold-lt); }

/* Mobile */
@media (max-width: 768px) {
  .cv-status { grid-template-columns: repeat(2, 1fr); }
  .cv-controls { flex-direction: column; align-items: stretch; }
  .cv-refresh { margin-left: 0; }
  .cv-table-row { grid-template-columns: 2fr 60px 70px; gap: 0.5rem; padding: 0.7rem 1rem; }
  .cv-table-row .cv-cell:nth-child(2),
  .cv-table-row .cv-cell:nth-child(5) { display: none; }
}

/* ── Conversion type tabs (in date controls bar) ── */
.cv-tabs {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
  margin-left: 0.75rem;
}
.cv-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.45rem 0.8rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.cv-tab:hover { color: var(--text); background: var(--surface2); }
.cv-tab.active {
  background: var(--gold);
  color: var(--bg);
  font-weight: 700;
}

/* ── Expandable row caret ── */
.cv-cell-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted2);
  transition: transform 0.25s ease, color 0.2s ease;
}
.cv-table-row:hover .cv-cell-caret { color: var(--gold); }
.cv-table-row.is-expanded .cv-cell-caret { transform: rotate(90deg); color: var(--gold); }

/* ── Expandable details row ── */
.cv-details-row {
  display: none;
  padding: 0.85rem 1rem 1rem 3rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.cv-details-row.is-open { display: block; }
.cv-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
}
.cv-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.6rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cv-detail-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.cv-detail-value {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.cv-detail-value.cv-detail-gold { color: var(--gold-lt); }

/* New cell types */
.cv-cell-warn { color: #d96b6b; font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-cell-muted { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Update mobile styles for new columns — collapse to essentials */
@media (max-width: 768px) {
  .cv-status { grid-template-columns: repeat(2, 1fr); }
  .cv-table-row { grid-template-columns: 24px 1.5fr 60px 70px; gap: 0.5rem; padding: 0.7rem 0.85rem; }
  /* hide bad leads, dnc, disq, bar columns on mobile */
  .cv-table-row > .cv-cell:nth-child(4),
  .cv-table-row > .cv-cell:nth-child(5),
  .cv-table-row > .cv-cell:nth-child(6),
  .cv-table-row > .cv-cell:nth-child(7),
  .cv-table-row > .cv-cell:nth-child(9) { display: none; }
  .cv-details-row { padding: 0.85rem 1rem 1rem 1.5rem; }
}

/* ── Conversions: Location filter chip row ────────────────────────── */
.cv-loc-filter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.cv-loc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cv-loc-count {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.cv-loc-actions {
  display: flex;
  gap: 0.4rem;
}
.cv-loc-mini {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cv-loc-mini:hover {
  color: var(--text);
  border-color: var(--gold-dim, var(--gold));
}
.cv-loc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cv-loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cv-loc-chip:hover {
  color: var(--text);
  border-color: var(--gold-dim, var(--gold));
}
.cv-loc-chip.active {
  background: linear-gradient(135deg, #b8962e 0%, #d4ae52 100%);
  border-color: #d4ae52;
  color: var(--bg);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(184, 150, 46, 0.3);
}
.cv-loc-chip-check {
  font-size: 0.7rem;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.15s ease, width 0.15s ease;
}
.cv-loc-chip.active .cv-loc-chip-check {
  opacity: 1;
  width: 0.75rem;
}
.cv-loc-empty {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════
   CONNECT ROADMAP PAGE
   Append to bottom of styles.css.
   All selectors scoped under .roadmap-page so the Hub's existing
   .page / .header / .item / .legend / .breadcrumb classes are unaffected.
   Design tokens (--gold, --surface, etc.) reused from :root above.
   ════════════════════════════════════════════════════════════════════ */

/* Wrapper — gives every roadmap rule a scope */
.roadmap-page {
  max-width: 1100px;
}

/* ─── Header / hero block (sits below the standard Hub .page-header) ─── */
.roadmap-page .rmp-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: end;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}

.roadmap-page .rmp-hero-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 0.85rem;
}
.roadmap-page .rmp-hero-title .gold { color: var(--gold-lt); }

.roadmap-page .rmp-hero-sub {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.65;
}

.roadmap-page .rmp-hero-meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-align: right;
  line-height: 2;
}
.roadmap-page .rmp-hero-meta strong { color: var(--white); font-weight: 600; }
.roadmap-page .rmp-hero-meta .rmp-status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  margin-right: 0.4rem;
  transform: translateY(-1px);
}

/* ─── Legend ─────────────────────────────────────────── */
.roadmap-page .rmp-legend {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  position: relative;
  overflow: hidden;
}
.roadmap-page .rmp-legend::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 40%, var(--gold-dim) 60%, transparent 100%);
}
.roadmap-page .rmp-legend-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 0.65rem;
}
.roadmap-page .rmp-legend-row {
  display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center;
}
.roadmap-page .rmp-legend-item {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.82rem; color: var(--text); font-weight: 500;
}
.roadmap-page .rmp-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.roadmap-page .rmp-dot.foundation   { background: #c98a4b; box-shadow: 0 0 6px rgba(201,138,75,0.6); }
.roadmap-page .rmp-dot.productivity { background: var(--gold-lt); box-shadow: 0 0 6px rgba(212,174,82,0.6); }
.roadmap-page .rmp-dot.knowledge    { background: #7fa8c0; box-shadow: 0 0 6px rgba(127,168,192,0.6); }

.roadmap-page .rmp-scope-letter {
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(184,150,46,0.06);
  border: 1px solid var(--border);
}
.roadmap-page .rmp-scope-letter.s  { color: var(--green); border-color: rgba(106,191,123,0.3); }
.roadmap-page .rmp-scope-letter.m  { color: var(--gold-lt); border-color: rgba(212,174,82,0.3); }
.roadmap-page .rmp-scope-letter.l  { color: #d68b5a; border-color: rgba(214,139,90,0.3); }
.roadmap-page .rmp-scope-letter.xl { color: var(--red); border-color: rgba(217,107,107,0.3); }

/* ─── Timeline structure ─────────────────────────────── */
.roadmap-page .rmp-timeline {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  position: relative;
}
.roadmap-page .rmp-rail { position: relative; }
.roadmap-page .rmp-rail::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%, var(--border2) 6%, var(--border2) 94%, transparent 100%);
}
.roadmap-page .rmp-phase-marker {
  position: sticky;
  top: 2rem;
  padding: 1.5rem 1.5rem 1.5rem 0;
  text-align: right;
}
.roadmap-page .rmp-phase-num {
  font-family: var(--mono);
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 0.5rem;
}
.roadmap-page .rmp-phase-name {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 0.65rem;
}
.roadmap-page .rmp-phase-marker.foundation   .rmp-phase-name { color: #c98a4b; }
.roadmap-page .rmp-phase-marker.productivity .rmp-phase-name { color: var(--gold-lt); }
.roadmap-page .rmp-phase-marker.knowledge    .rmp-phase-name { color: #7fa8c0; }
.roadmap-page .rmp-phase-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
}

.roadmap-page .rmp-phase-block {
  position: relative;
  padding: 1.5rem 0 3rem 2.75rem;
}
.roadmap-page .rmp-phase-block::before {
  content: '';
  position: absolute;
  left: -6px; top: 2.25rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid #c98a4b;
  box-shadow: 0 0 12px rgba(201,138,75,0.5);
}
.roadmap-page .rmp-phase-block.productivity::before {
  border-color: var(--gold-lt);
  box-shadow: 0 0 12px rgba(212,174,82,0.5);
}
.roadmap-page .rmp-phase-block.knowledge::before {
  border-color: #7fa8c0;
  box-shadow: 0 0 12px rgba(127,168,192,0.5);
}

/* ─── Parallel pair marker ──────────────────────────── */
.roadmap-page .rmp-pair-marker {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
  margin-top: 0.5rem;
  display: flex; align-items: center; gap: 0.85rem;
}
.roadmap-page .rmp-pair-marker .rmp-pm-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold-dim) 0%, transparent 100%);
}
.roadmap-page .rmp-stack { display: grid; gap: 1.25rem; }
.roadmap-page .rmp-stack + .rmp-pair-marker { margin-top: 1.5rem; }

/* ─── Item card ─────────────────────────────────────── */
.roadmap-page .rmp-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.85rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.roadmap-page .rmp-item-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 40%, var(--gold-dim) 60%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.roadmap-page .rmp-item:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}
.roadmap-page .rmp-item:hover .rmp-item-line { opacity: 1; }

.roadmap-page .rmp-item-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.85rem; gap: 1rem;
}
.roadmap-page .rmp-item-code {
  font-family: var(--mono);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold);
}
.roadmap-page .rmp-item-scope {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.roadmap-page .rmp-item-scope strong { color: var(--white); font-weight: 700; }
.roadmap-page .rmp-item-scope.s strong  { color: var(--green); }
.roadmap-page .rmp-item-scope.m strong  { color: var(--gold-lt); }
.roadmap-page .rmp-item-scope.l strong  { color: #d68b5a; }
.roadmap-page .rmp-item-scope.xl strong { color: var(--red); }

.roadmap-page .rmp-item-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 0.85rem;
}
.roadmap-page .rmp-item-purpose {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.roadmap-page .rmp-item-supersedes {
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
  background: rgba(127, 168, 192, 0.06);
  border-left: 2px solid #7fa8c0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.roadmap-page .rmp-item-supersedes strong {
  color: #7fa8c0;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.roadmap-page .rmp-deps {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.roadmap-page .rmp-deps-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-right: 0.25rem;
}
.roadmap-page .rmp-dep-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.roadmap-page .rmp-dep-pill.hard {
  background: rgba(184, 150, 46, 0.08);
  color: var(--gold-lt);
  border: 1px solid rgba(184, 150, 46, 0.3);
}
.roadmap-page .rmp-dep-pill.hard::before { content: '→'; font-size: 0.85rem; line-height: 1; }
.roadmap-page .rmp-dep-pill.soft {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border2);
}
.roadmap-page .rmp-dep-pill.soft::before { content: '⤳'; font-size: 0.85rem; line-height: 1; }
.roadmap-page .rmp-dep-pill.none {
  background: transparent;
  color: var(--muted2);
  font-style: italic;
  padding-left: 0;
  border: none;
}

/* ─── Footer rationale ─────────────────────────────── */
.roadmap-page .rmp-rationale {
  margin-top: 3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2.75rem;
  position: relative;
  overflow: hidden;
}
.roadmap-page .rmp-rationale-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, #c98a4b 25%, var(--gold-lt) 50%, #7fa8c0 75%, transparent 100%);
}
.roadmap-page .rmp-rationale-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(184, 150, 46, 0.3);
  border-radius: 100px;
  background: rgba(184, 150, 46, 0.04);
  margin-bottom: 1.25rem;
}
.roadmap-page .rmp-rationale h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.roadmap-page .rmp-rationale h2 .gold { color: var(--gold-lt); }
.roadmap-page .rmp-rationale p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 800px;
  margin-bottom: 2rem;
}
.roadmap-page .rmp-rationale p em {
  color: var(--text);
  font-style: normal;
  font-weight: 600;
}

.roadmap-page .rmp-sequence {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
}
.roadmap-page .rmp-seq-step {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: rgba(184, 150, 46, 0.08);
  border: 1px solid rgba(184, 150, 46, 0.25);
  border-radius: var(--radius-sm);
  color: var(--gold-lt);
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.04em;
}
.roadmap-page .rmp-seq-arrow { color: var(--muted2); font-size: 0.95rem; }
.roadmap-page .rmp-seq-plus { color: var(--gold); font-weight: 700; margin: 0 0.15rem; }

/* ─── Animations ───────────────────────────────────── */
@keyframes rmpFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.roadmap-page .rmp-item,
.roadmap-page .rmp-phase-marker,
.roadmap-page .rmp-rationale {
  animation: rmpFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.roadmap-page .rmp-phase-block.foundation   .rmp-item:nth-child(1) { animation-delay: 0.10s; }
.roadmap-page .rmp-phase-block.foundation   .rmp-item:nth-child(2) { animation-delay: 0.18s; }
.roadmap-page .rmp-phase-block.productivity .rmp-stack:nth-of-type(2) .rmp-item:nth-child(1) { animation-delay: 0.28s; }
.roadmap-page .rmp-phase-block.productivity .rmp-stack:nth-of-type(2) .rmp-item:nth-child(2) { animation-delay: 0.36s; }
.roadmap-page .rmp-phase-block.productivity .rmp-stack:nth-of-type(4) .rmp-item:nth-child(1) { animation-delay: 0.44s; }
.roadmap-page .rmp-phase-block.productivity .rmp-stack:nth-of-type(4) .rmp-item:nth-child(2) { animation-delay: 0.52s; }
.roadmap-page .rmp-phase-block.knowledge    .rmp-item:nth-child(1) { animation-delay: 0.62s; }
.roadmap-page .rmp-phase-block.knowledge    .rmp-item:nth-child(2) { animation-delay: 0.70s; }

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .roadmap-page .rmp-hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .roadmap-page .rmp-hero-meta { text-align: left; }
  .roadmap-page .rmp-legend { grid-template-columns: 1fr; gap: 1rem; }
  .roadmap-page .rmp-timeline { grid-template-columns: 1fr; }
  .roadmap-page .rmp-rail::after { display: none; }
  .roadmap-page .rmp-phase-marker {
    position: static; text-align: left;
    padding: 1.25rem 0 0 0;
    border-top: 1px solid var(--border);
    margin-top: 1.5rem;
  }
  .roadmap-page .rmp-phase-block { padding: 1rem 0 2rem 0; }
  .roadmap-page .rmp-phase-block::before { display: none; }
  .roadmap-page .rmp-rationale { padding: 1.5rem 1.25rem; }
  .roadmap-page .rmp-item { padding: 1.5rem; }
  .roadmap-page .rmp-item-title { font-size: 1.2rem; }
}

/* ─── Sidebar bottom: separator above Sign out ─────── */
.sidebar-bottom .nav-item-meta {
  margin-bottom: 0.5rem;
}
/* ════════════════════════════════════════════════════════════════════
   CONVERSIONS PAGE — SOURCE TOGGLE + ZENOTI VIEW (added May 2026)
   ════════════════════════════════════════════════════════════════════
   The conversions page has two views, switched by a toggle pill at the
   top. The Zenoti view (default) shows qualification-aware data from
   the dna-zenoti-conversions-sync workflow. The GHL view is the legacy
   pipeline-stage measurement preserved as an alternate. Both views
   share location-filter UX patterns; data structures differ. */

/* ─── Source toggle ───────────────────────────────────── */
.cv-source-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin: 0 0 24px;
  gap: 2px;
}
/* [hidden] must beat the explicit display above (May 20, 2026 —
   legacy view toggle hidden). Without this the bar still renders. */
.cv-source-toggle[hidden],
.cv-source-btn[hidden] {
  display: none !important;
}
.cv-source-btn {
  background: transparent;
  border: 0;
  color: var(--text-dim, #888);
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cv-source-btn:hover:not(.active) {
  color: var(--text, #e8e8e8);
}
.cv-source-btn.active {
  background: linear-gradient(180deg, #b8962e 0%, #8a6e20 100%);
  color: #1a1a1a;
  box-shadow: 0 0 14px rgba(184, 150, 46, 0.18);
}
.cv-source-badge {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0;
  font-weight: 700;
}

/* ─── Snapshot banner (Zenoti view) ──────────────────── */
.cv-snapshot-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(184, 150, 46, 0.06);
  border: 1px dashed rgba(184, 150, 46, 0.4);
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--text-dim, #888);
  letter-spacing: 0.02em;
}
.cv-snapshot-banner strong {
  color: #d4ae52;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.cv-snapshot-icon {
  color: #d4ae52;
  font-size: 8px;
  animation: cv-pulse 2.4s ease-in-out infinite;
}
@keyframes cv-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1;   }
}
.cv-snapshot-window {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: 0.7;
}

/* ─── Headline stat treatment (Zenoti view) ──────────── */
.cv-stat-headline {
  position: relative;
  border-color: rgba(184, 150, 46, 0.4) !important;
  box-shadow: 0 0 20px rgba(184, 150, 46, 0.12);
}
.cv-stat-headline .cv-stat-value {
  color: #d4ae52 !important;
}

/* ─── Methodology disclosure ─────────────────────────── */
.cv-methodology {
  margin-top: 32px;
  background: var(--surface, #181818);
  border: 1px dashed var(--border, #2c2c2c);
  border-radius: 10px;
  padding: 14px 20px;
}
.cv-methodology summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #888);
  font-weight: 700;
  list-style: none;
}
.cv-methodology summary::-webkit-details-marker {
  display: none;
}
.cv-methodology summary::before {
  content: '▸ ';
  color: #8a6e20;
}
.cv-methodology[open] summary::before {
  content: '▾ ';
}
.cv-methodology-body {
  margin-top: 14px;
  color: var(--text-dim, #888);
  font-size: 13px;
  line-height: 1.6;
}
.cv-methodology-body p {
  margin: 0 0 10px;
}
.cv-methodology-body strong {
  color: #d4ae52;
  font-weight: 600;
}

/* ─── Responsive: snapshot banner stacks on narrow screens ── */
@media (max-width: 800px) {
  .cv-snapshot-banner {
    flex-wrap: wrap;
  }
  .cv-snapshot-window {
    margin-left: 0;
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CONVERSIONS — ZENOTI VIEW (Module 11 dashboard)
   Append to bottom of styles.css. All selectors prefixed .cvz-
   to avoid conflicts with the legacy .cv- (GHL) view.
   ════════════════════════════════════════════════════════════════════ */

/* ── Date range + source filter row ───────────────────────────────── */
.cvz-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.cvz-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.cvz-tab {
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cvz-tab:not(:last-child) { border-right: 1px solid var(--border); }
.cvz-tab:hover { color: var(--text); background: var(--bg); }
.cvz-tab.active {
  background: linear-gradient(135deg, #b8962e 0%, #d4ae52 100%);
  color: var(--bg);
  box-shadow: 0 0 12px rgba(184, 150, 46, 0.35);
}
.cvz-filter-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cvz-filter-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.cvz-filter-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.82rem;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  min-width: 180px;
}
.cvz-filter-select:hover { border-color: var(--gold); }

/* ── Trend chart ──────────────────────────────────────────────────── */
.cvz-chart-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem 1.5rem;
  margin-bottom: 1.25rem;
}
.cvz-chart {
  position: relative;
  width: 100%;
  height: 240px;
  margin-top: 1rem;
}
.cvz-chart svg { width: 100%; height: 100%; display: block; }
.cvz-chart-grid line {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.cvz-chart-axis-label {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cvz-chart-line-leads {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.cvz-chart-line-bookings {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
}
.cvz-chart-dot {
  fill: var(--gold);
  stroke: var(--bg);
  stroke-width: 1.5;
}
.cvz-chart-legend {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cvz-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.cvz-chart-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 2px;
}
.cvz-chart-legend-swatch.leads {
  background: var(--muted);
  background-image: linear-gradient(90deg, var(--muted) 60%, transparent 60%);
  background-size: 5px 2px;
}
.cvz-chart-legend-swatch.bookings { background: var(--gold); }

/* ── Attribution mix ──────────────────────────────────────────────── */
.cvz-attr-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem 1.5rem;
  margin-bottom: 1.25rem;
}
.cvz-attr {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cvz-attr-row {
  display: grid;
  grid-template-columns: 160px 1fr 60px 50px;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sans);
  font-size: 0.82rem;
}
.cvz-attr-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text);
  text-transform: lowercase;
}
.cvz-attr-bar-track {
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.cvz-attr-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, #d4ae52 100%);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.cvz-attr-bar-fill.muted    { background: var(--muted); opacity: 0.5; }
.cvz-attr-bar-fill.warn     { background: linear-gradient(90deg, #8a6a1f, #b8962e); opacity: 0.7; }
.cvz-attr-pct {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.cvz-attr-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
}

/* ── Mobile collapse ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cvz-controls { flex-direction: column; align-items: stretch; }
  .cvz-filter-group { justify-content: space-between; }
  .cvz-chart { height: 200px; }
  .cvz-attr-row {
    grid-template-columns: 110px 1fr 50px;
    gap: 0.6rem;
  }
  .cvz-attr-count { display: none; }
}

/* ── Conversion Report: live data banner ──────────────────────────── */
.cvz-live-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.cvz-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(184, 150, 46, 0.6);
  animation: cvz-pulse 1.8s ease-in-out infinite;
}
@keyframes cvz-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.cvz-live-text strong { color: var(--text); }
.cvz-live-meta { margin-left: auto; color: var(--muted); }

/* ── Conversion Report: Email Report button ──────────────────────── */
.cvr-email-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cvr-email-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.cvr-email-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cvr-email-btn svg { width: 12px; height: 12px; }

.cvr-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
}

.cvr-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Conversion Report: Performance table v2 ─────────────────────── */
/* New per-location table with expandable detail panel + UTM breakdown.
   Replaces the older 9-column flat layout. */

/* Grid columns: Location · Leads · Conv · Rate · Bad · DNC · Disq% · bar */
.cvr-perf-head,
.cvr-perf-main {
  display: grid;
  grid-template-columns:
    minmax(160px, 1.8fr) /* location */
    64px                 /* leads */
    64px                 /* in-mo */
    72px                 /* in-mo % */
    84px                 /* carryover */
    72px                 /* l2p % */
    56px                 /* bad */
    56px                 /* dnc */
    72px                 /* disq% */
    minmax(90px, 1fr);   /* bar */
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
}

.cvr-perf-head {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.cvr-perf-row {
  border-bottom: 1px solid var(--border);
}
.cvr-perf-row:last-child { border-bottom: none; }

.cvr-perf-main {
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.cvr-perf-main:hover {
  background-color: rgba(255, 255, 255, 0.025);
}
.cvr-perf-open .cvr-perf-main {
  background-color: rgba(184, 150, 46, 0.04);
}

.cvr-perf-cell {
  font-size: 0.88rem;
  color: var(--text);
}
.cvr-perf-cell.num   { text-align: right; font-variant-numeric: tabular-nums; }
.cvr-perf-cell.loc   { display: flex; align-items: center; gap: 0.5rem; }
.cvr-perf-cell.bar   { padding-left: 0.5rem; }

/* Caret rotates when row is open */
.cvr-perf-caret {
  display: inline-block;
  color: var(--muted);
  font-size: 0.9rem;
  transition: transform 0.15s ease;
  width: 0.8rem;
}
.cvr-perf-open .cvr-perf-caret {
  transform: rotate(90deg);
  color: var(--gold);
}

/* Rate / Bad / DNC / Disq% color tones */
.cvr-perf-rate { color: var(--gold); font-weight: 600; }
.cvr-perf-bad  { color: #d96666; }
.cvr-perf-dnc  { color: var(--muted); }
.cvr-perf-disq { color: #d96666; font-weight: 600; }

/* Horizontal bar visualizing rate */
.cvr-perf-cell.bar { position: relative; height: 4px; }
.cvr-perf-barline {
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), rgba(184, 150, 46, 0.4));
  border-radius: 2px;
}

/* ── Expanded detail panel ───────────────────────────────────────── */
.cvr-perf-detail {
  padding: 1rem 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.015);
  border-top: 1px solid var(--border);
}

/* 8-tile KPI grid */
.cvr-perf-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 800px) {
  .cvr-perf-tiles { grid-template-columns: repeat(2, 1fr); }
}

.cvr-perf-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem 0.8rem;
}
.cvr-perf-tile-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.cvr-perf-tile-value {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
}
.cvr-perf-tile-strong { color: var(--gold); font-weight: 600; }
.cvr-perf-tile-bad    { color: #d96666; }
.cvr-perf-tile-dnc    { color: var(--muted); }
.cvr-perf-tile-disq   { color: #d96666; font-weight: 600; }

/* ── UTM breakdown table ─────────────────────────────────────────── */
.cvr-perf-utm {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}
.cvr-perf-utm-title {
  padding: 0.6rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  border-bottom: 1px solid var(--border);
}

.cvr-perf-utm-head,
.cvr-perf-utm-row {
  display: grid;
  grid-template-columns:
    minmax(120px, 1fr)   /* source */
    minmax(160px, 2fr)   /* campaign */
    80px                 /* leads */
    80px                 /* booked */
    80px;                /* rate */
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  align-items: center;
}
.cvr-perf-utm-head {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.cvr-perf-utm-row {
  border-bottom: 1px solid rgba(42, 42, 49, 0.5);
  font-size: 0.82rem;
}
.cvr-perf-utm-row:last-child { border-bottom: none; }
.cvr-perf-utm-cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.cvr-perf-utm-cell.src,
.cvr-perf-utm-cell.camp {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cvr-perf-utm-muted { opacity: 0.55; }
.cvr-perf-utm-muted .cvr-perf-utm-cell { color: var(--muted); }

/* ── Cohort status: excluded-leads + dedupe spans ────────────────── */
.cvr-excluded {
  color: #d96666;
}
.cvr-dedupe {
  color: var(--muted);
  cursor: help;
  border-bottom: 1px dotted var(--muted);
}

/* ── Conversion Report: KPI grid — three-bucket model (5 cells) ───── */
#cv-view-report .cv-status,
#cv-view-report .cv-status-5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) {
  #cv-view-report .cv-status,
  #cv-view-report .cv-status-5 { grid-template-columns: repeat(2, 1fr); }
}
/* L2P cell — subtle gold tint to flag the franchisor headline metric */
.cv-stat-l2p {
  background: rgba(184, 150, 46, 0.06);
  border-radius: var(--radius);
}
.cv-stat-carryover .cv-stat-value { color: #d4ae52; }

/* ── Conversion Report: control row containment ───────────────────── */
#cv-view-report .cvz-controls {
  width: 100%;
}
#cv-view-report .cvz-filter-group {
  flex-shrink: 0;
}

/* ── Conversion Report: new trend chart (rate line + lead bars) ───── */
.cvr-trend-bar {
  fill: var(--muted);
  opacity: 0.18;
}
.cvr-trend-line {
  fill: none;
  stroke: url(#cvr-line-grad);
  stroke: #d4ae52;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(184, 150, 46, 0.4));
}
.cvr-trend-dot {
  fill: #d4ae52;
  stroke: var(--bg);
  stroke-width: 1.5;
}

/* ── Conversion Report: cohort status banner ──────────────────────── */
.cvr-cohort-status {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.cvr-cohort-status strong {
  color: var(--text);
  font-weight: 600;
  text-transform: uppercase;
}
.cvr-cohort-status-text { color: var(--muted); }
.cvr-mature-pending {
  color: #d4ae52;
  font-weight: 600;
}
.cvr-mature-done {
  color: #9bd49b;
  font-weight: 600;
}
.cvr-orphans {
  color: var(--muted);
  font-style: italic;
}
/* ── Three-bucket model: cell + status-note colors ────────────────── */
.cvr-perf-carry   { color: #d4ae52; }
.cvr-perf-l2p     { color: var(--text); font-weight: 600; }
.cvr-perf-direct {
  font-size: 0.78em;
  color: var(--muted);
  margin-left: 0.3rem;
}
.cvr-carryover-note { color: #d4ae52; }
.cvr-direct-note    { color: var(--muted); font-style: italic; }

/* ── Conversion Report: footnote on KPI cell (e.g., "30d window") ── */
#cv-view-report .cv-stat-value .cvr-stat-foot {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 0.25rem;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
   RESTORED — Zenoti Snapshot legacy table styles
   These were incorrectly removed during cleanup. Required because
   app.js's fetchConversionsZenoti renders .cvz-row / .cvz-cell markup.
   ════════════════════════════════════════════════════════════════════ */

.cvz-table {
  display: flex;
  flex-direction: column;
}
.cvz-row {
  display: grid;
  grid-template-columns: 2fr 0.9fr 0.7fr 1fr 1fr 0.9fr 1.2fr 1.2fr 1fr;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #2c2c2c);
  cursor: pointer;
  transition: background 0.12s ease;
  align-items: center;
}
.cvz-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.cvz-row-header {
  cursor: default;
  background: transparent;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #888);
  font-weight: 700;
}
.cvz-row-header:hover { background: transparent; }
.cvz-cell {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text, #e8e8e8);
}
.cvz-cell-name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cvz-cell-num { text-align: right; }
.cvz-cell-rate { font-weight: 600; }
.cvz-cell-gap { color: var(--text-dim, #888); }
.cvz-tier-top    { color: #6abf7b; }
.cvz-tier-mid    { color: #d4ae52; }
.cvz-tier-bottom { color: #d96b6b; }

.cvz-expand-icon {
  display: inline-block;
  color: #b8962e;
  font-size: 9px;
  width: 12px;
  transition: transform 0.15s ease;
}
.cvz-row.is-expanded .cvz-expand-icon { transform: rotate(90deg); }

.cvz-detail {
  display: none;
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid var(--border, #2c2c2c);
  padding: 14px 24px 18px;
}
.cvz-detail.is-open { display: block; }
.cvz-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cvz-detail-cell {
  background: var(--surface, #181818);
  border: 1px solid var(--border, #2c2c2c);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cvz-detail-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim, #888);
  font-weight: 600;
}
.cvz-detail-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #d4ae52;
  font-weight: 600;
}
.cvz-detail-mono { font-size: 12px; }

@media (max-width: 1100px) {
  .cvz-row {
    grid-template-columns: 1.6fr 0.7fr 0.7fr 1fr 1fr 0.9fr 1.1fr 1.1fr;
  }
  .cvz-cell-gap, .cvz-row-header .cvz-cell-gap { display: none; }
  .cvz-detail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .cvz-row {
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    grid-auto-flow: row;
  }
  .cvz-row > :nth-child(n+5),
  .cvz-row-header > :nth-child(n+5) { display: none; }
}

/* ── Conversions: base layout for each toggleable view ────────────── */
.cv-view {
  display: block;
  width: 100%;
}
.cv-view[hidden] {
  display: none !important;
}
/* ════════════════════════════════════════════════════════════════════
   DNA+ KB · Client Reference  (#/knowledge)
   Sidebar clinic list + detail pane. Rep read-view + admin editor.
   ════════════════════════════════════════════════════════════════════ */

.kb-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; min-height: 580px; }

/* ── Sidebar ── */
.kb-sidebar { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.kb-search-wrap { padding: 14px; border-bottom: 1px solid var(--border); }
.kb-search { width: 100%; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; padding: 9px 12px; color: var(--text); font-family: var(--sans); font-size: .85rem; outline: none; }
.kb-search:focus { border-color: var(--gold-dim); }
.kb-list { overflow-y: auto; flex: 1; padding: 8px; }
.kb-loc { width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 10px 12px; margin-bottom: 2px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: var(--sans); }
.kb-loc:hover { background: var(--surface); }
.kb-loc.active { background: var(--surface2); border-color: var(--gold-dim); }
.kb-loc-main { display: flex; flex-direction: column; gap: 2px; }
.kb-loc-name { font-weight: 600; font-size: .88rem; color: var(--text); }
.kb-loc-region { font-family: var(--mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted2); }
.kb-loc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex-shrink: 0; }
.kb-loc-dot.empty { background: var(--border2); box-shadow: none; }

/* ── Detail pane ── */
.kb-detail { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px; overflow-y: auto; }
.kb-empty, .kb-empty-inline { color: var(--muted); font-size: .88rem; padding: 20px 0; }
.kb-empty-inline { padding: 4px 0; font-style: italic; }
.kb-detail-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.kb-detail-name { font-size: 1.5rem; font-weight: 800; color: var(--white); }
.kb-detail-sub { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-top: 4px; }
.kb-edit-btn, .kb-save-btn { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; padding: 7px 13px; border-radius: 7px; cursor: pointer; }
.kb-edit-btn { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); }
.kb-edit-btn:hover { border-color: var(--gold-dim); color: var(--gold-lt); }
.kb-save-btn { background: linear-gradient(135deg, #b8962e 0%, #d4ae52 100%); border: none; color: #1a1407; font-weight: 600; }
.kb-save-btn:disabled { opacity: .6; cursor: default; }
.kb-edit-actions { display: flex; gap: 8px; }

/* ── Sections ── */
.kb-section { margin-bottom: 24px; }
.kb-section-title { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 11px; display: flex; align-items: center; gap: 8px; }
.kb-section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ── Scheduling rules ── */
.kb-note-item { background: var(--surface); border-left: 2px solid var(--gold); border-radius: 0 8px 8px 0; padding: 11px 14px; font-size: .85rem; color: var(--text); margin-bottom: 8px; }

/* ── Promo banner ── */
.kb-promo { display: flex; align-items: center; gap: 12px; background: var(--gold-glow); border: 1px solid var(--gold-dim); border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; }
.kb-promo-tag { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-lt); background: rgba(0,0,0,.25); padding: 4px 9px; border-radius: 5px; flex-shrink: 0; }
.kb-promo-text { font-size: .9rem; font-weight: 600; color: var(--white); }

/* ── Contact / glance ── */
.kb-glance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kb-glance-cell { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.kb-glance-label { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); margin-bottom: 5px; }
.kb-glance-val { font-size: .92rem; font-weight: 600; color: var(--text); }
.kb-address { font-size: .85rem; color: var(--muted); margin-top: 10px; }

/* ── Pricing ── */
.kb-price-group { margin-bottom: 14px; }
.kb-price-group-title { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.kb-price-row { display: flex; justify-content: space-between; font-size: .85rem; padding: 6px 0; border-bottom: 1px solid var(--border); }
.kb-price-row:last-child { border-bottom: none; }
.kb-price-name { color: var(--text); }
.kb-price-val { font-family: var(--mono); font-weight: 500; color: var(--gold-lt); }
.kb-price-val.muted { color: var(--muted2); }
.kb-typical { font-family: var(--mono); font-size: .74rem; color: var(--muted2); font-style: italic; }

/* ── Hours ── */
.kb-hours { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
.kb-hours-row { display: flex; justify-content: space-between; font-size: .85rem; padding: 4px 0; }
.kb-hours-day { color: var(--muted); }
.kb-hours-time { font-family: var(--mono); font-size: .78rem; }
.kb-hours-time.closed { color: var(--red); }

/* ── Editor inputs ── */
.kb-input { background: var(--surface); border: 1px solid var(--border2); border-radius: 7px; padding: 8px 11px; color: var(--text); font-family: var(--sans); font-size: .84rem; outline: none; width: 100%; }
.kb-input:focus { border-color: var(--gold-dim); }
.kb-field { margin-bottom: 10px; }
.kb-field label, .kb-hours-edit label, .kb-price-edit label { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 4px; }
.kb-hours-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.kb-price-edit { margin-bottom: 9px; }
.kb-note-edit { display: flex; gap: 6px; margin-bottom: 6px; }
.kb-note-del { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); border-radius: 7px; padding: 0 11px; cursor: pointer; flex-shrink: 0; }
.kb-note-del:hover { border-color: var(--red); color: var(--red); }
.kb-prov-edit { display: grid; grid-template-columns: 1.1fr 1fr 1.6fr auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.kb-prov-del { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); border-radius: 7px; padding: 0 11px; cursor: pointer; flex-shrink: 0; align-self: stretch; }
.kb-prov-del:hover { border-color: var(--red); color: var(--red); }
.kb-add-btn { background: none; border: 1px dashed var(--border2); color: var(--muted); border-radius: 7px; padding: 7px 13px; font-size: .78rem; cursor: pointer; margin-top: 4px; }
.kb-add-btn:hover { border-color: var(--gold-dim); color: var(--gold-lt); }
.kb-hint { font-size: .76rem; color: var(--muted2); margin-bottom: 10px; }
.kb-save-msg { font-size: .8rem; padding: 9px 12px; border-radius: 7px; margin-bottom: 16px; }
.kb-save-msg.error { background: rgba(217, 107, 107, .12); border: 1px solid var(--red); color: var(--red); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .kb-layout { grid-template-columns: 1fr; }
  .kb-sidebar { max-height: 240px; }
  .kb-glance, .kb-hours, .kb-hours-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   WORKSPACE QUEUES — home-page operator working queues
   ─────────────────────────────────────────────────────────────────── */
.ws-section { margin-bottom: 2.75rem; }
/* home page: workspace grid now sits at the top (hero removed) */
.ws-section-top { margin-top: 0.25rem; }

/* "Connect" wordmark in the page header (replaces breadcrumb) */
.header-wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

.ws-eyebrow,
.tm-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold, #d4ae52);
  margin-bottom: 1rem;
}
.ws-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.ws-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.3rem 0.95rem;
  min-height: 118px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

/* gold top-accent hairline */
.ws-tile .ws-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 40%, var(--gold-dim) 60%, transparent 100%);
  opacity: 0.7;
  transition: opacity 0.2s ease;
  z-index: 2;
}

/* carbon-fiber texture — Option B (subtle, approved) */
.ws-tile .ws-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px),
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.025) 0%, transparent 70%);
}

.ws-tile .ws-head,
.ws-tile .ws-foot { position: relative; z-index: 1; }

.ws-tile .ws-head {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* icon + title on one row */
.ws-titlerow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.ws-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--gold-glow);
  border: 1px solid var(--gold-dim);
  color: var(--gold-lt);
}
.ws-icon svg { width: 16px; height: 16px; }

.ws-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: var(--white);
}

.ws-sub {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}

.ws-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}

.ws-count {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold-lt);
  background: var(--gold-glow);
  border: 1px solid var(--gold-dim);
  border-radius: 99px;
  padding: 0.2rem 0.6rem;
}

.ws-arrow { color: var(--muted2); transition: color 0.2s ease, transform 0.2s ease; }

.ws-tile:hover {
  border-color: var(--gold-dim);
  transform: translateY(-3px);
}
.ws-tile:hover .ws-accent { opacity: 1; }
.ws-tile:hover .ws-arrow { color: var(--gold-lt); transform: translateX(3px); }
.ws-tile:focus-visible {
  outline: 2px solid var(--gold-lt);
  outline-offset: 2px;
}

/* ─── KPI STRIP — queue volume below the workspace tiles ─── */
.ws-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 1.1rem;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ws-kpi {
  background: var(--surface);
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ws-kpi-value {
  font-family: var(--mono);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--gold-lt);
  line-height: 1.1;
}

.ws-kpi-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--white);
}

.ws-kpi-note {
  font-size: 0.74rem;
  color: var(--muted2);
}

/* ═══════════════════════════════════════════════════════════════════
   TEAM METRIC HIGHLIGHTS — home-page placeholders
   ─────────────────────────────────────────────────────────────────── */
.tm-section { margin-bottom: 2.5rem; }

.tm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.tm-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
}

.tm-card-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 40%, var(--gold-dim) 60%, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tm-card:not(.is-placeholder) .tm-card-line { opacity: 0.7; }

.tm-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.tm-value {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 0.35rem;
}
/* placeholder: dimmed until real data is wired */
.tm-card.is-placeholder .tm-value { color: var(--muted2); }

.tm-foot {
  font-size: 0.74rem;
  color: var(--muted2);
}

/* ═══════════════════════════════════════════════════════════════════
   QUICK LINKS — compact secondary nav row on home
   ─────────────────────────────────────────────────────────────────── */
.ql-section { margin-bottom: 1rem; }

.ql-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.ql-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ql-icon { display: flex; color: var(--muted2); transition: color 0.18s ease; }

.ql-link:hover {
  color: var(--text);
  border-color: var(--gold-dim);
  background: var(--surface2);
}
.ql-link:hover .ql-icon { color: var(--gold-lt); }

/* ─── responsive collapse ─── */
@media (max-width: 1100px) {
  .ws-grid,
  .ws-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .tm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ws-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════
   MODULE 15 — CONVERT TRIAGE PAGE  (all classes prefixed .ct-)
   Page section lives in index.html as #page-convert-triage.
   ════════════════════════════════════════════════════════════════════ */
/* ─── header ─── */
/* ─── header ─── */
.ct-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

/* icon tile + title block — matches Intake's .ip-hero / .ip-logo */
.ct-head-titleblock {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ct-head-icon {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: var(--gold-glow);
  border: 1px solid var(--gold-dim);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--gold-lt);
}
.ct-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.ct-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1.05;
}
.ct-title .gold { color: var(--gold-lt); }
.ct-sub {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* live status chip */
.ct-live {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.5rem 0.95rem;
}
.ct-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px var(--green);
  animation: ct-pulse 2s ease-in-out infinite;
}
@keyframes ct-pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

/* ─── stat strip ─── */
.ct-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.ct-stat {
  background: var(--surface);
  padding: 1.15rem 1.35rem;
  position: relative;
}
.ct-stat-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0.8;
}
.ct-stat[data-tone="red"]    .ct-stat-line { background: var(--red); }
.ct-stat[data-tone="gold"]   .ct-stat-line { background: var(--gold); }
.ct-stat[data-tone="neutral"].ct-stat-line,
.ct-stat[data-tone="neutral"] .ct-stat-line { background: var(--border2); }
.ct-stat-value {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.05;
}
.ct-stat[data-tone="red"]  .ct-stat-value { color: var(--red); }
.ct-stat[data-tone="gold"] .ct-stat-value { color: var(--gold-lt); }
.ct-stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 0.2rem;
}
.ct-stat-note {
  font-size: 0.73rem;
  color: var(--muted2);
  margin-top: 0.1rem;
}

/* ─── filter row ─── */
.ct-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin-bottom: 1.25rem;
}
.ct-filter-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.ct-filter-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted2);
  margin-right: 0.15rem;
}
.ct-chip {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.34rem 0.8rem;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.ct-chip:hover { color: var(--text); border-color: var(--border2); }
.ct-chip.is-active {
  color: var(--gold-lt);
  background: var(--gold-glow);
  border-color: var(--gold-dim);
}
.ct-chip.is-disabled {
  color: var(--muted2);
  cursor: not-allowed;
  opacity: 0.5;
}
.ct-chip.is-disabled:hover { color: var(--muted2); border-color: var(--border); }

/* ─── Module 18: Spanish chip — extra-visible reminder ─── */
.ct-chip.ct-chip-spanish {
  color: #b3e0c2;
  border-color: rgba(106,191,123,.55);
  font-weight: 700;
}
.ct-chip.ct-chip-spanish:hover {
  color: #b3e0c2;
  border-color: rgba(106,191,123,.85);
  background: rgba(74,158,99,0.08);
}
.ct-chip.ct-chip-spanish.is-active {
  color: #b3e0c2;
  background: rgba(74,158,99,0.22);
  border-color: #4a8c5e;
}
.ct-chip-count {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  margin-left: 4px;
  opacity: 0.85;
  letter-spacing: 0.04em;
}
.ct-btn-spanish-go {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #b3e0c2;
  background: rgba(74,158,99,0.14);
  border: 1px solid rgba(106,191,123,.55);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  transition: .12s;
}
.ct-btn-spanish-go:hover {
  background: rgba(74,158,99,0.24);
  border-color: rgba(106,191,123,.85);
}
.ct-filter-sep {
  width: 1px;
  height: 22px;
  background: var(--border2);
  margin: 0 0.35rem;
}

/* ─── queue table (Layout A) ─── */
.ct-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ct-table {
  width: 100%;
  border-collapse: collapse;
}
.ct-table thead th {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted2);
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  white-space: nowrap;
}
.ct-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
  vertical-align: middle;
}
.ct-table tbody tr:last-child td { border-bottom: none; }
.ct-table tbody tr {
  position: relative;
  transition: background .12s;
}
.ct-table tbody tr:hover { background: var(--surface2); }

/* SLA left-edge accent */
.ct-row-sla {
  width: 3px;
  padding: 0 !important;
}
.ct-row-sla span {
  display: block;
  width: 3px;
  height: 100%;
  min-height: 48px;
}
.ct-sla-green  span { background: var(--green); }
.ct-sla-yellow span { background: var(--yellow); }
.ct-sla-red    span {
  background: var(--red);
  animation: ct-sla-pulse 1.6s ease-in-out infinite;
}
@keyframes ct-sla-pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.ct-name {
  font-weight: 600;
  color: var(--white);
}
.ct-loc {
  color: var(--text);
}
.ct-age {
  font-family: var(--mono);
  font-size: 0.82rem;
}
.ct-age.green  { color: var(--green); }
.ct-age.yellow { color: var(--yellow); }
.ct-age.red    { color: var(--red); }

/* status pill */
.ct-status {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.22rem 0.55rem;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
}
.ct-status.unread  { color: var(--gold-lt); border-color: var(--gold-dim); background: var(--gold-glow); }
.ct-status.claimed { color: var(--muted);   border-color: var(--border2);  background: var(--surface2); }
.ct-status.handled { color: var(--green);   border-color: #2f5d3c;         background: rgba(76,175,107,0.1); }

.ct-claimed-by {
  font-size: 0.78rem;
  color: var(--muted);
}

/* channel icon */
.ct-channel {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.ct-channel svg { color: var(--muted2); }

/* ─── row action buttons ─── */
.ct-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  white-space: nowrap;
}
.ct-btn {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.ct-btn:hover { border-color: var(--muted); background: var(--surface3); }

.ct-btn-claim {
  border-color: var(--gold-dim);
  color: var(--gold-lt);
  background: var(--gold-glow);
}
.ct-btn-claim:hover {
  background: var(--gold);
  color: #1a1407;
  border-color: var(--gold);
}
.ct-btn-book {
  border-color: #2bb8a3;
  color: #3fd4bd;
  background: rgba(43, 184, 163, 0.10);
}
.ct-btn-book:hover {
  background: rgba(43, 184, 163, 0.20);
  border-color: #3fd4bd;
  color: #5ee3d0;
}
.ct-btn-actions {
  border-color: var(--gold);
  color: #1a1407;
  background: linear-gradient(135deg, #c19a2c 0%, var(--gold-lt) 50%, var(--gold) 100%);
  font-weight: 700;
}
.ct-btn-actions:hover {
  filter: brightness(1.08);
}
.ct-btn-ghl {
  border-color: var(--border2);
  color: var(--muted);
}
.ct-btn-ghl:hover {
  border-color: var(--gold-dim);
  color: var(--gold-lt);
  background: var(--surface3);
}
.ct-btn-unclaim {
  border-color: var(--border2);
  color: var(--muted);
  background: var(--surface2);
}
.ct-btn-unclaim:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--surface3);
}
/* Handled — green confirm action */
.ct-btn-handled {
  border-color: #2f5d3c;
  color: var(--green);
  background: rgba(76, 175, 107, 0.10);
}
.ct-btn-handled:hover {
  background: var(--green);
  color: #0c1a10;
  border-color: var(--green);
}
/* Un-handle — neutral revert, like Unclaim */
.ct-btn-unhandle {
  border-color: var(--border2);
  color: var(--muted);
  background: var(--surface2);
}
.ct-btn-unhandle:hover {
  border-color: var(--gold-dim);
  color: var(--gold-lt);
  background: var(--surface3);
}
/* Spanish toggle button — off = muted, on = solid teal-ish flag */
.ct-btn-es {
  border-color: var(--border2);
  color: var(--muted2);
  background: var(--surface2);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.55rem;
}
.ct-btn-es:hover {
  border-color: var(--muted);
  color: var(--text);
}
.ct-btn-es.is-on {
  border-color: #4a8c5e;
  color: #b3e0c2;
  background: rgba(74, 158, 99, 0.22);
}
/* Clear Handled — neutral housekeeping button in the page header */
.ct-btn-purge {
  border-color: var(--border2);
  color: var(--muted);
  background: var(--surface2);
  align-self: center;
}
.ct-btn-purge:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--surface3);
}
/* Spanish badge shown next to the contact name */
.ct-es-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #b3e0c2;
  background: rgba(74, 158, 99, 0.22);
  border: 1px solid #4a8c5e;
  border-radius: 99px;
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
}
.ct-esc-badge { display:inline-block; font-family:var(--mono); font-size:.54rem; font-weight:700; letter-spacing:.06em;
  padding:1px 5px; border-radius:3px; background: rgba(220, 76, 76, .18); color:#ffb4b4; margin-left:4px; }
.ct-chip-esc.is-active { background: rgba(220, 76, 76, .28); }
.ct-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ct-btn:disabled:hover { background: var(--surface2); border-color: var(--border2); }

/* ─── empty + loading states ─── */
.ct-empty {
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--muted);
}
.ct-empty-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
}

/* ===== ANCHOR: Convert two-pane (Layout B — Module 18 Phase 3B) ===== */
#page-convert-triage .ct-layout{display:grid;grid-template-columns:270px 1fr;gap:14px;
  height:calc(100vh - 360px);min-height:440px}
#page-convert-triage .ct-worklist{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;min-height:0}
#page-convert-triage #ct-wl-list{overflow-y:auto;flex:1;min-height:0}
#page-convert-triage .ct-wl-head{padding:11px 15px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--border);display:flex;justify-content:space-between}
#page-convert-triage .ct-wl-head b{color:var(--gold-lt)}
#page-convert-triage .ct-wl-item{padding:11px 15px;border-bottom:1px solid var(--border);
  cursor:pointer;display:flex;flex-direction:column;gap:4px;
  border-left:3px solid transparent;transition:.12s}
#page-convert-triage .ct-wl-item:hover{background:var(--surface2)}
#page-convert-triage .ct-wl-item.active{background:var(--surface2);border-left-color:var(--gold)}
#page-convert-triage .ct-wl-item .nm{font-size:.9rem;font-weight:600;color:var(--text)}
#page-convert-triage .ct-wl-item .meta{font-family:var(--mono);font-size:.64rem;color:var(--muted2);
  display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#page-convert-triage .ct-wl-loc{font-family:var(--mono);font-size:.58rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
#page-convert-triage .ct-wl-due{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em}
#page-convert-triage .ct-wl-due.green{color:var(--green)}
#page-convert-triage .ct-wl-due.yellow{color:var(--gold-lt)}
#page-convert-triage .ct-wl-due.red{color:var(--red)}
#page-convert-triage .ct-wl-empty{padding:20px 15px;font-family:var(--mono);font-size:.72rem;
  color:var(--muted2);text-align:center}
#page-convert-triage .ct-wl-pill{font-family:var(--mono);font-size:.56rem;font-weight:700;
  padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.05em}
#page-convert-triage .ct-wl-pill.unread{background:var(--surface3);color:var(--muted)}
#page-convert-triage .ct-wl-pill.claimed{background:var(--gold-glow);color:var(--gold-lt)}
#page-convert-triage .ct-wl-pill.handled{background:rgba(106,191,123,.14);color:var(--green)}
#page-convert-triage .ct-es-badge{font-family:var(--mono);font-size:.54rem;font-weight:700;
  padding:1px 5px;border-radius:3px;background:rgba(74,158,99,.16);color:#b3e0c2}

/* card */
#page-convert-triage .ct-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow-y:auto;max-height:100%;min-height:0}
#page-convert-triage .ct-card-empty{padding:60px 30px;text-align:center;color:var(--muted2);
  font-family:var(--mono);font-size:.8rem}
#page-convert-triage .ct-card-head{padding:15px 20px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:flex-start}
#page-convert-triage .ct-card-head .nm{font-size:1.2rem;font-weight:700;color:var(--white)}
#page-convert-triage .ct-card-head .loc{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted2)}
#page-convert-triage .ct-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#page-convert-triage .ct-ctx{display:flex;border-bottom:1px solid var(--border)}
#page-convert-triage .ct-ctx div{padding:10px 20px;border-right:1px solid var(--border);flex:1}
#page-convert-triage .ct-ctx div:last-child{border-right:none}
#page-convert-triage .ct-ctx .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted2)}
#page-convert-triage .ct-ctx .v{font-family:var(--mono);font-size:.8rem;color:var(--text);margin-top:2px}
#page-convert-triage .ct-ctx .v.red{color:var(--red);font-weight:700}
#page-convert-triage .ct-ctx .v.yellow{color:var(--gold-lt)}
#page-convert-triage .ct-ctx .v.green{color:var(--green)}
#page-convert-triage .ct-card-body{padding:18px 20px}

/* thread (mirrors engage .eng-thread / .msg-*) */
#page-convert-triage .ct-thread{background:var(--bg);border:1px solid var(--border2);
  border-radius:var(--radius);padding:12px;margin-bottom:18px;
  height:340px;min-height:200px;max-height:70vh;
  overflow-y:auto;resize:vertical;display:flex;flex-direction:column;gap:8px}
#page-convert-triage .ct-thread-ph{text-align:center;padding:24px 12px;font-family:var(--mono);
  font-size:.72rem;color:var(--muted2)}
#page-convert-triage .ct-thread-ph.err{color:var(--red)}
#page-convert-triage .ct-msg{max-width:80%;display:flex;flex-direction:column;gap:3px}
#page-convert-triage .ct-msg.in{align-self:flex-start}
#page-convert-triage .ct-msg.out{align-self:flex-end}
#page-convert-triage .ct-msg-meta{font-family:var(--mono);font-size:.54rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted2)}
#page-convert-triage .ct-msg.out .ct-msg-meta{text-align:right}
#page-convert-triage .ct-msg-body{font-family:var(--sans);font-size:.84rem;line-height:1.5;
  padding:8px 11px;border-radius:var(--radius-sm);overflow-wrap:anywhere;word-break:break-word}
#page-convert-triage .ct-msg.in .ct-msg-body{background:var(--surface2);color:var(--text);
  border:1px solid var(--border2);border-top-left-radius:3px}
#page-convert-triage .ct-msg.out .ct-msg-body{background:var(--gold-glow);color:var(--gold-lt);
  border:1px solid rgba(184,150,46,.3);border-top-right-radius:3px}
#page-convert-triage .ct-msg-link{color:var(--gold-lt);text-decoration:underline;font-weight:600}
#page-convert-triage .ct-msg.in .ct-msg-link{color:#8fb6cc}

/* action bar */
#page-convert-triage .ct-actionbar{display:flex;gap:8px;flex-wrap:wrap}
#page-convert-triage .ct-abtn{font-family:var(--mono);font-size:.7rem;font-weight:500;padding:9px 15px;
  border-radius:var(--radius-sm);border:1px solid var(--border2);background:var(--surface2);
  color:var(--text);cursor:pointer;transition:.12s;letter-spacing:.03em}
#page-convert-triage .ct-abtn:hover{border-color:var(--muted)}
#page-convert-triage .ct-abtn.gold{background:linear-gradient(145deg,var(--gold-lt),var(--gold));
  color:#1a1407;border-color:var(--gold);font-weight:700}
#page-convert-triage .ct-abtn.gold:hover{filter:brightness(1.08)}
#page-convert-triage .ct-abtn.ok{border-color:rgba(106,191,123,.5);color:var(--green)}
#page-convert-triage .ct-abtn.warn{border-color:rgba(217,107,107,.5);color:var(--red)}
#page-convert-triage .ct-abtn.es{border-color:rgba(106,191,123,.55);color:#b3e0c2;
  background:rgba(74,158,99,.10);font-weight:700}
#page-convert-triage .ct-abtn.es:hover{border-color:rgba(106,191,123,.85);background:rgba(74,158,99,.18)}
#page-convert-triage .ct-abtn.actions{border-color:var(--gold-dim);color:var(--gold-lt);
  background:rgba(184,150,46,.08);font-weight:700}
#page-convert-triage .ct-abtn.actions:hover{border-color:var(--gold);background:rgba(184,150,46,.16)}
#page-convert-triage .ct-abtn:disabled{opacity:.4;cursor:not-allowed}
#page-convert-triage .ct-compose{display:flex;gap:8px;align-items:flex-end;margin-bottom:14px}
#page-convert-triage .ct-msgbox{flex:1;background:var(--bg);color:var(--text);
  border:1px solid var(--border2);border-radius:var(--radius-sm);padding:9px 11px;
  font-family:var(--sans);font-size:.88rem;resize:vertical;min-height:40px;outline:none}
#page-convert-triage .ct-msgbox:focus{border-color:var(--gold-dim)}
#page-convert-triage .ct-compose .ct-abtn{white-space:nowrap}

/* responsive */
@media (max-width:880px){
  #page-convert-triage .ct-layout{grid-template-columns:1fr;height:auto}
  #page-convert-triage .ct-worklist{max-height:300px}
}

/* Convert worklist — per-row GHL deep link */
.ct-wl-item .nm{ display:flex; align-items:center; }
.ct-wl-ghl{
  margin-left:auto;            /* pin to right edge of the name line */
  font:600 11px/1 'JetBrains Mono', monospace;
  color:#b8962e;
  border:1px solid rgba(184,150,46,.45);
  border-radius:4px;
  padding:3px 6px;
  text-decoration:none;
  white-space:nowrap;
}
.ct-wl-ghl:hover{ background:rgba(184,150,46,.12); border-color:#b8962e; }

/* ─── toast ─── */
.ct-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 0.75rem 1.15rem;
  font-size: 0.86rem;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
}
.ct-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ct-toast.err { border-color: var(--red); }

/* ─── responsive ─── */
@media (max-width: 900px) {
  .ct-stats { grid-template-columns: repeat(2, 1fr); }
  .ct-table-wrap { overflow-x: auto; }
  .ct-table { min-width: 760px; }
}

/* ════════════════════════════════════════════════════════════════
   B1 — QUEUE ASSIGNMENTS
   ──────────────────────────────────────────────────────────────── */
.asg-wrap {
  margin-top: 1.5rem;
}

.asg-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.asg-grid {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.asg-row {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.asg-row:last-child { border-bottom: none; }
.asg-row:not(.asg-row-head):hover { background: var(--surface2); }

.asg-row-head {
  background: var(--surface2);
}
.asg-row-head > div {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted2);
  padding: 0.85rem 1rem;
}
.asg-row-head .asg-cell-ws { text-align: center; }

.asg-cell-name {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  font-weight: 600;
  color: var(--white);
  font-size: 0.9rem;
}
.asg-email {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted2);
}
.asg-role-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-lt);
  border: 1px solid var(--gold-dim);
  background: var(--gold-glow);
  border-radius: 99px;
  padding: 0.1rem 0.4rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  align-self: flex-start;
}

.asg-chip {
  justify-self: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.asg-chip:hover {
  border-color: var(--muted);
  color: var(--text);
}
.asg-chip.is-on {
  border-color: var(--gold);
  background: linear-gradient(135deg, #c19a2c 0%, var(--gold-lt) 50%, var(--gold) 100%);
  color: #1a1407;
}
.asg-chip.is-on:hover { filter: brightness(1.08); }
.asg-chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* toast — mirrors .ct-toast */
.asg-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 0.75rem 1.15rem;
  font-size: 0.86rem;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
}
.asg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.asg-toast.err { border-color: var(--red); }

@media (max-width: 700px) {
  .asg-row { grid-template-columns: 1.4fr repeat(4, 1fr); }
  .asg-chip { width: 30px; height: 30px; font-size: 0.9rem; }
  .asg-cell-name { font-size: 0.82rem; }
}

/* ════════════════════════════════════════════════════════════
   PHASE 2 · TEAM SCHEDULE  (#/schedule)
   ════════════════════════════════════════════════════════════ */
.sched-wrap { margin-top: 8px; }

.sched-board {
  display: grid;
  gap: 18px;
}

.sched-day {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

/* Day banner — carbon-fiber texture matching home ws-tile cards */
.sched-day-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--gold-lt);
  background-color: var(--surface2);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px),
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.025) 0%, transparent 70%);
}

.sched-rotate {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sched-rotate:hover {
  border-color: var(--gold);
  color: var(--gold-lt);
}

.sched-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 150px;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.sched-row:last-child { border-bottom: none; }

.sched-cell-name { font-weight: 500; font-size: 14px; color: var(--text); }
.sched-cell-time { font-size: 13px; color: var(--muted); }

.sched-pod {
  width: 100%;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--sans);
  cursor: pointer;
}
.sched-pod:disabled { opacity: 0.5; cursor: wait; }

.sched-nomatch {
  font-size: 12px;
  color: var(--muted2);
  font-style: italic;
}

/* Pod color accents — left border per assigned pod */
.sched-row.pod-intake    { border-left-color: #5b9bd5; }
.sched-row.pod-engage    { border-left-color: var(--gold); }
.sched-row.pod-convert   { border-left-color: var(--green); }
.sched-row.pod-reconnect { border-left-color: #b57edc; }

.sched-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* Toast — matches asg-toast behavior */
.sched-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface2);
  border: 1px solid var(--gold);
  color: var(--text);
  padding: 10px 18px;
  border-radius: var(--radius-md, 10px);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 9999;
}
.sched-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sched-toast.err { border-color: var(--red); }

/* Restricted clinics (admin-only panel, Schedule page) */
.rl-panel {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.rl-panel-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
  border: none;
  color: var(--gold-lt);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 16px;
  cursor: pointer;
}
.rl-panel-caret { transition: transform .15s; color: var(--muted); }
.rl-panel-toggle.is-open .rl-panel-caret { transform: rotate(180deg); }
/* compact card grid — clinics flow several-across; a restricted card (with its
   rep checklist) spans two tracks instead of hogging the full page width */
.rl-panel-body { padding: 10px; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.rl-loc {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  background: var(--bg-soft);
  min-width: 0;
}
.rl-loc.is-restricted { border-color: var(--gold-dim); grid-column: span 2; }
@media (max-width: 700px) { .rl-loc.is-restricted { grid-column: span 1; } }

.rl-loc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rl-loc-name { font-size: 14px; font-weight: 500; color: var(--text); }

.rl-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.rl-switch input { opacity: 0; width: 0; height: 0; }
.rl-switch-track {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--surface3); border: 1px solid var(--border2);
  border-radius: 99px; transition: background .15s, border-color .15s;
}
.rl-switch-track::before {
  content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px;
  background: var(--muted); border-radius: 50%; transition: transform .15s, background .15s;
}
.rl-switch input:checked + .rl-switch-track { background: var(--gold-glow); border-color: var(--gold); }
.rl-switch input:checked + .rl-switch-track::before { transform: translateX(16px); background: var(--gold); }
.rl-switch input:disabled + .rl-switch-track { opacity: 0.5; cursor: wait; }

.rl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rl-chip {
  font-family: var(--mono); font-size: 0.7rem; color: var(--gold-lt);
  border: 1px solid var(--gold-dim); background: var(--gold-glow);
  border-radius: 99px; padding: 0.15rem 0.55rem;
}
.rl-chips-empty { font-size: 12px; color: var(--muted2); font-style: italic; }

.rl-reps {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px 12px;
}
.rl-rep { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; min-width: 0; }
/* long names/emails truncate instead of overlapping the neighbor column */
.rl-rep span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-rep input { flex: none; }
.rl-rep input:disabled { opacity: 0.5; }

@media (max-width: 640px) {
  .sched-row {
    grid-template-columns: 1fr 110px;
    grid-template-areas: "name pod" "time pod";
    gap: 4px 10px;
  }
  .sched-cell-name { grid-area: name; }
  .sched-cell-time { grid-area: time; }
  .sched-cell-pod  { grid-area: pod; }
}

/* ════════════════════════════════════════════════════════════
   PHASE 3 · HOME POD CARDS — assigned rep pills
   ════════════════════════════════════════════════════════════ */
.ws-pods {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}
.ws-pod-rep {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--gold-lt);
  background: var(--gold-glow);
  border: 1px solid var(--gold-dim);
  border-radius: 20px;
  padding: 2px 9px;
}
/* Support assignment — grey, outlined, subordinate to primary */
.ws-pod-rep.support {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
}
/* Answer pod chips — purple (primary faint-fill, support outlined) */
.ws-pod-rep.answer {
  color: #f2ecfb;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.6);
}
.ws-pod-rep.answer.support {
  color: #a877f0;
  background: rgba(124, 58, 237, 0.07);
  border: 1px solid rgba(124, 58, 237, 0.4);
}
/* Team Schedule — primary + support dropdown pair */
.sched-pod-pair {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sched-pod-pair .sched-pod[data-role="support"] {
  font-size: 0.78rem;
  opacity: 0.85;
}
/* Engage A|B list toggle — only rendered when primary pod = Engage */
.sched-ab {
  display: flex;
  gap: 4px;
}
.sched-ab-btn {
  flex: 1;
  background: var(--bg-soft);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.sched-ab-btn:hover { border-color: var(--gold-dim); color: var(--gold-lt); }
.sched-ab-btn.on {
  background: var(--gold-glow);
  border-color: var(--gold);
  color: var(--gold-lt);
}
.sched-ab-btn:disabled { opacity: 0.5; cursor: wait; }

/* Engage live-banner inline roster — "A · Name    |    B · Name" */
.eng-roster-inline {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
}
.eng-roster-inline b {
  color: var(--gold-lt);
  font-weight: 700;
  margin-right: 3px;
}
.eng-roster-sep { color: var(--border2); margin: 0 16px; }

.ws-pods-empty {
  font-size: 0.68rem;
  color: var(--muted2);
  font-style: italic;
  flex: 1;
}

/* ════════════════════════════════════════════════════════════════════
   DNA+ KB Phase 2b · Pending submissions, review, providers
   ════════════════════════════════════════════════════════════════════ */

/* Sidebar pending badge */
.kb-loc.has-pending { border-left: 2px solid var(--gold); }
.kb-pending-badge {
  display: inline-block;
  color: var(--gold);
  font-size: .6rem;
  margin-left: 6px;
  vertical-align: middle;
  text-shadow: 0 0 6px var(--gold-glow);
}

/* Pending CTA banner on rep card */
.kb-pending-cta {
  display: flex; align-items: center; gap: 12px;
  background: var(--gold-glow);
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
}
.kb-pending-cta-tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-lt); background: rgba(0,0,0,.25);
  padding: 4px 9px; border-radius: 5px; flex-shrink: 0;
}
.kb-pending-cta-text { font-size: .88rem; color: var(--text); flex: 1; }

/* Providers card */
.kb-provider {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.kb-provider-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.kb-provider-name { font-weight: 700; color: var(--white); font-size: .95rem; }
.kb-provider-cred {
  font-family: var(--mono); font-size: .68rem;
  color: var(--gold-lt); background: rgba(0,0,0,.25);
  padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .08em;
}
.kb-provider-row { display: flex; gap: 10px; font-size: .82rem; color: var(--text); margin-bottom: 3px; }
.kb-provider-label {
  font-family: var(--mono); font-size: .68rem;
  color: var(--muted2); text-transform: uppercase; letter-spacing: .08em;
  min-width: 80px;
}
.kb-provider-note {
  font-size: .8rem; color: var(--muted);
  font-style: italic; margin-top: 6px;
  padding-top: 6px; border-top: 1px solid var(--border);
}

/* Review mode — diff layout */
.kb-diff-headers, .kb-diff-row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  gap: 12px;
  align-items: center;
}
.kb-diff-headers {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted2);
  padding: 6px 0; border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.kb-diff-row { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.kb-diff-row:last-child { border-bottom: none; }
.kb-diff-row.changed .kb-diff-cell:last-child {
  color: var(--gold-lt); font-weight: 600;
  background: rgba(184, 150, 46, .08);
  padding: 6px 9px; border-radius: 6px;
}
.kb-diff-label {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.kb-diff-cell { color: var(--text); }
.kb-diff-empty { color: var(--muted2); font-style: italic; }

/* Reject button — distinct from cancel */
.kb-reject-btn { color: var(--red) !important; }
.kb-reject-btn:hover { border-color: var(--red) !important; }

@media (max-width: 720px) {
  .kb-diff-headers, .kb-diff-row { grid-template-columns: 1fr; }
  .kb-diff-headers div:first-child { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   DNA+ KB Phase 2c · Intake-link copy buttons + toast
   ════════════════════════════════════════════════════════════════════ */

/* Per-clinic "Copy intake form link" button (in read-view contact section) */
.kb-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s ease;
}
.kb-link-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold-lt);
  background: rgba(184, 150, 46, .06);
}
.kb-link-icon { font-size: .85rem; }

/* "Copy all links" button in sidebar */
.kb-copy-all-btn {
  width: 100%;
  margin-top: 10px;
  background: none;
  border: 1px dashed var(--border2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s ease;
}
.kb-copy-all-btn:hover {
  border-color: var(--gold-dim);
  border-style: solid;
  color: var(--gold-lt);
}

/* Toast notification */
.kb-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-soft);
  border: 1px solid var(--gold-dim);
  color: var(--gold-lt);
  font-family: var(--mono);
  font-size: .8rem;
  padding: 11px 18px;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.kb-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.kb-toast.error {
  border-color: var(--red);
  color: var(--red);
}
/* ════════════════════════════════════════════════════════════════
   MODULE 18 — Shared Actions Modal (.am-*)
   Used by Engage, Convert, and later Reconnect.
   Visually mirrors Call Queue's .qa-* modal, namespaced separately
   so the two coexist during migration.
   ──────────────────────────────────────────────────────────────── */

.am-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
}
.am-backdrop.open { display: flex; }

.am-modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  font-family: var(--sans);
}

.am-close {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  width: 30px; height: 30px;
  font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .12s;
}
.am-close:hover { color: var(--text); border-color: var(--muted); }

/* ─── header ─── */
.am-header { padding: 1.1rem 1.25rem 0.85rem; }
.am-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 0.35rem;
}
.am-title {
  font-size: 1.25rem; font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.am-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* ─── body / sections ─── */
.am-body { padding: 0.5rem 1.25rem 1.1rem; }

.am-section { margin-top: 0.9rem; }
.am-section-l {
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin: 0 0 0.55rem 0;
}

.am-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.am-btn {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.86rem; font-weight: 600;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: .12s;
}
.am-btn:hover {
  border-color: var(--gold-dim);
  background: var(--surface3);
  color: var(--gold-lt);
}
.am-btn:active { transform: translateY(1px); }

/* custom note input */
.am-note-input {
  width: 100%;
  margin-top: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.86rem;
  padding: 0.7rem 0.85rem;
  outline: none;
  transition: .12s;
}
.am-note-input:focus { border-color: var(--gold-dim); }
.am-note-input::placeholder { color: var(--muted2); }

/* ─── footer ─── */
.am-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
}

/* ─── confirm overlay (inside modal) ─── */
.am-confirm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
  border-radius: var(--radius-lg);
}
.am-confirm-backdrop.open { display: flex; }
.am-confirm {
  background: var(--surface);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  max-width: 380px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
}
.am-confirm-title {
  font-size: 0.98rem; font-weight: 700;
  color: var(--white);
  margin-bottom: 0.4rem;
}
.am-confirm-body {
  font-size: 0.82rem; color: var(--muted); line-height: 1.5;
  margin-bottom: 0.85rem;
}
.am-confirm-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.am-confirm-btn {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: .12s;
}
.am-confirm-btn:hover { border-color: var(--muted); }
.am-confirm-btn.danger {
  background: var(--red);
  border-color: var(--red);
  color: #1a0707;
}
.am-confirm-btn.danger:hover { filter: brightness(1.08); }

/* ─── toast ─── */
.am-toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 0.7rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 220;
}
.am-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.am-toast[data-kind="err"] { border-color: var(--red); color: var(--red); }
.am-toast[data-kind="ok"]  { border-color: rgba(106,191,123,0.5); color: var(--green); }

/* ─── responsive ─── */
@media (max-width: 640px) {
  .am-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Stage picker — one group per pipeline, below the curated buttons. */
.am-pipe { margin-bottom: 10px; }
.am-pipe:last-child { margin-bottom: 0; }
.am-pipe-name {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 0 0 4px;
}
.am-pipelines { max-height: 220px; overflow-y: auto; }

/* ════════════════════════════════════════════════════════════════
   MODULE 18 — Spanish Queue page (.sp-*)
   Standalone #/spanish view. Reads public.spanish_queue directly.
   ──────────────────────────────────────────────────────────────── */

/* ─── header ─── */
.sp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.sp-head-titleblock { display: flex; flex-direction: column; gap: 0.2rem; }
.sp-title {
  font-size: 2rem; font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
}
.sp-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.sp-head-live {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.4rem 0.85rem;
}
.sp-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

/* ─── filter chips ─── */
.sp-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.sp-filter-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-right: 0.35rem;
}
.sp-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: .12s;
}
.sp-chip:hover { color: var(--text); border-color: var(--border2); }
.sp-chip.is-active {
  color: var(--gold-lt);
  background: var(--gold-glow);
  border-color: var(--gold-dim);
}
/* Spanish chip — always green to match the rest of the Spanish UI */
.sp-chip.sp-chip-spanish {
  color: #b3e0c2;
  border-color: rgba(106,191,123,.55);
}
.sp-chip.sp-chip-spanish:hover {
  border-color: rgba(106,191,123,.85);
  background: rgba(74,158,99,0.08);
}
.sp-chip.sp-chip-spanish.is-active {
  color: #b3e0c2;
  background: rgba(74,158,99,0.22);
  border-color: #4a8c5e;
}

/* ─── table ─── */
.sp-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}
.sp-table thead {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.sp-table th {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
  text-align: left;
  padding: 0.85rem 1rem;
}
.sp-table th.sp-th-actions { text-align: right; }
.sp-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: .12s;
}
.sp-table tbody tr:last-child { border-bottom: none; }
.sp-table tbody tr:hover { background: var(--surface2); }
.sp-table td {
  padding: 0.85rem 1rem;
  font-size: 0.86rem;
  color: var(--text);
  vertical-align: middle;
}
.sp-row.is-resolved { opacity: 0.55; }
.sp-row.is-resolved .sp-name { text-decoration: line-through; }

.sp-name { font-weight: 600; color: var(--white); }
.sp-flagged-by {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
}

/* ─── source pod badges ─── */
.sp-pod {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border2);
  background: var(--surface3);
  color: var(--muted);
}
.sp-pod-engage    { color: var(--gold-lt); border-color: rgba(184,150,46,.4); background: var(--gold-glow); }
.sp-pod-convert   { color: #8fb6cc;        border-color: rgba(127,168,192,.4); background: rgba(127,168,192,.12); }
.sp-pod-reconnect { color: #c8a8e0;        border-color: rgba(180,140,220,.4); background: rgba(180,140,220,.10); }
.sp-pod-intake    { color: #b3e0c2;        border-color: rgba(106,191,123,.4); background: rgba(74,158,99,.10); }

/* ─── status pills ─── */
.sp-status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 99px;
}
.sp-status-active   { color: #b3e0c2; background: rgba(74,158,99,0.18); border: 1px solid rgba(106,191,123,.45); }
.sp-status-resolved { color: var(--muted2); background: var(--surface3); border: 1px solid var(--border2); }

/* ─── action buttons ─── */
.sp-actions {
  text-align: right;
  white-space: nowrap;
}
.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: .12s;
  margin-left: 0.4rem;
}
.sp-btn:hover { border-color: var(--muted); }
.sp-btn-ghl {
  color: var(--gold-lt);
  border-color: var(--gold-dim);
  background: var(--gold-glow);
}
.sp-btn-ghl:hover {
  filter: brightness(1.1);
  border-color: var(--gold);
}
.sp-btn-resolve {
  color: #b3e0c2;
  border-color: rgba(106,191,123,.55);
  background: rgba(74,158,99,0.10);
}
.sp-btn-resolve:hover {
  border-color: rgba(106,191,123,.85);
  background: rgba(74,158,99,0.18);
}
.sp-btn-reflag {
  color: var(--muted);
  background: var(--surface2);
}

/* ─── empty state ─── */
.sp-empty {
  padding: 3.5rem 1rem !important;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ─── toast ─── */
.sp-toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 0.7rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
}
.sp-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sp-toast.err { border-color: var(--red); color: var(--red); }

/* ─── responsive ─── */
@media (max-width: 900px) {
  .sp-table-wrap { overflow-x: auto; }
  .sp-table { min-width: 760px; }
}


/* ── Speed to Lead — home eyebrow link (matches .tm-eyebrow) ── */
.tm-eyebrow-link { display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer; transition:color .15s; }
.tm-eyebrow-link:hover { color:#e3c061; }
.tm-eyebrow-arrow { font-size:13px; opacity:.7; transition:transform .15s; }
.tm-eyebrow-link:hover .tm-eyebrow-arrow { transform:translateX(3px); }
/* make the S2L tm-cards behave as links without losing card styling */
#s2l-home-grid a.tm-card { text-decoration:none; cursor:pointer; transition:transform .12s, border-color .15s; }
#s2l-home-grid a.tm-card:hover { transform:translateY(-2px); border-color:#d4ae52; }

/* ── S2L home cards: 4-across, compact, gold values ── */
#s2l-home-grid { grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:900px){ #s2l-home-grid { grid-template-columns:repeat(2,1fr); } }
#s2l-home-grid a.tm-card { padding:16px 18px; }
#s2l-home-grid .tm-label { font-size:0.72rem; margin-bottom:6px; }
#s2l-home-grid .tm-value { font-size:1.6rem; line-height:1.1; color:var(--gold,#d4ae52); margin:0 0 6px; }
#s2l-home-grid .tm-foot { font-size:0.7rem; }


/* ───────────────────────────────────────────────────────────
   Queue Activity panel (P3d) — per-rep handled counts by queue.
   All classes namespaced .qa- to avoid collision.
   ─────────────────────────────────────────────────────────── */
.qa-section { margin-top: var(--space-5); }
.qa-head { margin-bottom: var(--space-3); }
.qa-eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold-dim); border-radius: 999px; padding: 5px 14px; margin-bottom: 10px;
}
.qa-sub { color: var(--muted); font-size: 0.9rem; }

.qa-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.qa-table { width: 100%; border-collapse: collapse; }
.qa-table thead th {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  text-align: left; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.qa-table thead th.qa-num { text-align: right; }
.qa-th-rank { width: 46px; }
.qa-total-th { color: var(--text); }
.qa-soon-th { color: var(--muted2); }
.qa-soon-badge {
  font-size: 0.5rem; border: 1px solid var(--border2); border-radius: 4px;
  padding: 1px 5px; margin-left: 6px; color: var(--muted2); letter-spacing: 0.08em;
}
.qa-table tbody td {
  padding: 14px 18px; border-bottom: 1px solid #1d1d1d; vertical-align: middle; font-size: 0.95rem;
}
.qa-table tbody tr:last-child td { border-bottom: none; }
.qa-table tbody tr:hover { background: var(--surface2); }
.qa-rank { font-family: var(--mono); color: var(--muted); }
.qa-rep { font-weight: 600; }
.qa-row-top .qa-rank, .qa-row-top .qa-rep { color: var(--gold-lt); }
.qa-cell { text-align: right; font-family: var(--mono); }
.qa-cell-zero { color: var(--muted2); }
.qa-cell-soon { text-align: right; color: var(--muted2); font-family: var(--mono); font-size: 0.85rem; }
.qa-total { text-align: right; font-family: var(--mono); font-weight: 600; color: var(--text); }
.qa-row-top .qa-total { color: var(--gold-lt); }
.qa-empty { padding: 40px 18px; text-align: center; }
.qa-empty-title { color: var(--gold-lt); font-weight: 600; margin-bottom: 6px; }
.qa-empty-text { color: var(--muted); font-size: 0.85rem; }

/* ── Score column + name-click breakdown modal + admin panel (compute_scoreboard) ── */
.qa-rep-link { cursor: pointer; }
.qa-rep-link:hover { color: #b8962e; }
.qa-score { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; color: #b8962e; font-variant-numeric: tabular-nums; text-align: right; }
.qa-row-top .qa-score { color: #e0bd55; }
.qa-score-n { display:inline-block; min-width: 1.4em; }
.qa-trend { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; margin-left: 7px; vertical-align: middle; }
.qa-trend.up { color: #4caf6b; }
.qa-trend.down { color: #d96b6b; }
.qa-trend.flat { color: #5c5c5c; }
.qa-m-help { font-size: 11px; line-height: 1.55; color: #8a8a8a; margin-top: 12px; }
.qa-m-help b { color: #ececec; font-weight: 700; }

.qa-admin{background:#121212;border:1px solid #262626;border-radius:12px;padding:14px;margin-bottom:16px}
.qa-admin-h{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;cursor:pointer;padding:0;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a8a8a}
.qa-admin.open .qa-admin-h{margin-bottom:14px}
.qa-admin-chev{transition:transform .15s;font-size:11px;color:#b8962e}
.qa-admin.open .qa-admin-chev{transform:rotate(180deg)}
.qa-admin-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:#b8962e;border:1px solid rgba(184,150,46,.25);border-radius:5px;padding:3px 7px}
.qa-admin-row{margin-bottom:16px}
.qa-admin-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.qa-admin-label{font-size:13px;font-weight:600}
.qa-admin-val{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#e0bd55}
.qa-admin input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:#181818;border:1px solid #262626}
.qa-admin input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#b8962e;border:3px solid #0a0a0a;box-shadow:0 0 0 1px #b8962e;cursor:pointer}
.qa-admin-save{width:100%;background:#b8962e;color:#1a1400;border:none;border-radius:9px;padding:12px;font-weight:700;font-size:14px;cursor:pointer}
.qa-admin-note{font-family:'JetBrains Mono',monospace;font-size:11px;color:#8a8a8a;margin-top:9px}

.qa-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:flex-end;justify-content:center;z-index:1000}
.qa-modal-overlay.show{display:flex}
.qa-modal{background:#121212;border:1px solid #262626;border-top:2px solid #b8962e;border-radius:16px 16px 0 0;width:100%;max-width:480px;padding:20px 18px 30px;max-height:90vh;overflow-y:auto}
@media(min-width:520px){.qa-modal-overlay{align-items:center}.qa-modal{border-radius:16px}}
.qa-m-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:3px}
.qa-m-name{font-size:21px;font-weight:800}
.qa-m-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:#8a8a8a;margin-bottom:6px}
.qa-m-close{background:#181818;border:1px solid #262626;color:#8a8a8a;border-radius:8px;width:34px;height:34px;font-size:18px;cursor:pointer}
.qa-m-assign{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.qa-chip{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#8a8a8a;background:#181818;border:1px solid #262626;border-radius:6px;padding:4px 8px}
.qa-chip b{color:#ececec}
.qa-m-sect{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5c5c5c;margin:16px 0 10px}
.qa-m-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.qa-m-stat,.qa-m-call{background:#181818;border:1px solid #262626;border-radius:9px;padding:11px 8px;text-align:center}
.qa-m-stat .v,.qa-m-call .v{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700}
.qa-m-stat .k,.qa-m-call .k{font-size:10px;color:#8a8a8a;margin-top:2px}
.qa-m-calls{display:flex;gap:8px}
.qa-m-break{background:#181818;border:1px solid #262626;border-radius:11px;padding:14px;margin-top:8px}
.qa-m-bd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12.5px;font-weight:600}
.qa-m-bd .sub{color:#5c5c5c;font-weight:400;font-size:11px}
.qa-m-bd .num{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700}
.qa-m-eq{border-top:1px dashed #262626;padding-top:12px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#8a8a8a;text-align:center;line-height:1.7}
.qa-m-eq .s{color:#e0bd55;font-size:15px;font-weight:700}
.sb-range-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a}

.s2l-stub { opacity:.6; }

/* Module 18 merge: centered "Pod Source" label in the Spanish card header */
.ct-card-head { position: relative; }
.ct-pod-source {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(184,150,46,.14);
  color: #d4ae52;
  border: 1px solid rgba(184,150,46,.35);
}

/* Module 18 merge: Active/Handled sub-toggle inside the ES view */
/* [hidden] must win over display:flex, or a sub-tab bar stays on screen after leaving its view. */
.ct-es-sub[hidden] { display: none; }
.ct-es-sub {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #2a2a2a;
}
.ct-es-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  background: #141414;
  color: #8a8a8a;
  border: 1px solid #2a2a2a;
}
.ct-es-tab.is-active {
  background: rgba(95,191,127,.16);
  color: #5fbf7f;
  border-color: rgba(95,191,127,.5);
}
/* Convert Fell off queue */
/* Fell off sub-tabs: a 2x2 grid of tiles (label left, count right) so four tabs fit the 270px worklist. */
#page-convert-triage .ct-fo-sub{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 12px}
#page-convert-triage .ct-fo-sub[hidden]{display:none}
#page-convert-triage .ct-fo-sub .ct-es-tab{display:flex;align-items:center;justify-content:space-between;gap:6px;
  min-width:0;padding:7px 9px;border-radius:8px;font-size:11px;line-height:1.2;text-align:left;white-space:nowrap}
#page-convert-triage .ct-fo-lbl{overflow:hidden;text-overflow:ellipsis}
#page-convert-triage .ct-fo-n{flex:none;min-width:22px;padding:1px 6px;border-radius:999px;text-align:center;
  font-size:10px;background:#1f1f1f;color:#bdbdbd}
#page-convert-triage .ct-fo-sub .ct-es-tab.is-active .ct-fo-n{background:rgba(95,191,127,.25);color:#5fbf7f}
#page-convert-triage .ct-wl-pill.fo{background:var(--surface3);color:var(--gold-lt)}
.ct-fo-reason{font-size:12px;color:#8a8a8a;padding:6px 14px;border-top:1px solid #2a2a2a}
.ct-fo-skip{font-family:'JetBrains Mono',monospace;font-size:12px;background:#141414;color:#cfcfcf;border:1px solid #2a2a2a;border-radius:7px;padding:6px 8px}

/* Call Queue assignment on Schedule page */
.sched-day-actions{display:flex;gap:8px;align-items:center}
.sched-cq-assign{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:rgba(212,174,82,.1);color:var(--gold-lt,#d4ae52);border:1px solid rgba(212,174,82,.3);border-radius:7px;padding:7px 12px;cursor:pointer;transition:.12s}
.sched-cq-assign:hover{background:var(--gold,#b8962e);color:#0a0a0a}
.sched-cq-assign.assigned{background:rgba(59,167,118,.12);color:#3ba776;border-color:rgba(59,167,118,.35)}

/* First-4-day emphasis vs. the later look-ahead days */
.sched-day.sched-focus{border-color:rgba(212,174,82,.3)}
.sched-day:not(.sched-focus){opacity:.72}
.sched-today-tag{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#0a0a0a;background:var(--gold-lt,#d4ae52);padding:2px 7px;border-radius:4px;margin-left:6px}
.sched-day-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted,#8a8a8a);margin-left:8px;font-weight:500}

/* Thin-day coverage flag */
.sched-day.sched-thin .sched-day-head{background:rgba(200,144,46,.08)}
.sched-day.sched-thin .sched-day-count{color:#c8902e}

/* ── Call Queue assignment modal (Schedule page) ── */
.cq-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;overflow-y:auto}
.cq-backdrop[hidden]{display:none}
.cq-modal{width:100%;max-width:780px;background:var(--panel,#181818);border:1px solid var(--border,#2c2c2c);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.cq-modal-head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--border,#2c2c2c)}
.cq-modal-title{font-size:19px;font-weight:800}
.cq-modal-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold-lt,#d4ae52);margin-top:2px}
.cq-modal-x{margin-left:auto;background:transparent;border:0;color:var(--muted,#8a8a8a);font-size:24px;cursor:pointer;line-height:1}
.cq-modal-body{padding:20px 24px;max-height:62vh;overflow-y:auto}
.cq-auto-row{display:flex;align-items:center;gap:12px;padding:14px;background:var(--panel-2,#141414);border:1px solid var(--border,#2c2c2c);border-radius:11px}
.cq-auto-txt{flex:1}
.cq-auto-h{font-weight:700;font-size:14px}
.cq-auto-d{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted,#8a8a8a);margin-top:3px}
.cq-sched-banner{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted,#8a8a8a);margin:16px 0 10px}
.cq-who{color:var(--gold-lt,#d4ae52)}
.cq-grid{display:grid;grid-template-columns:1fr 220px;border:1px solid var(--border,#2c2c2c);border-radius:11px;overflow:hidden}
.cq-loc{padding:11px 16px;border-bottom:1px solid rgba(44,44,44,.5);display:flex;align-items:center;gap:8px;font-weight:600}
.cq-lock{font-size:10px;color:var(--amber,#c8902e)}
.cq-sel{border-bottom:1px solid rgba(44,44,44,.5);border-left:1px solid rgba(44,44,44,.5);padding:7px 12px}
.cq-sel select{width:100%;background:var(--panel-2,#141414);border:1px solid var(--border,#2c2c2c);color:var(--txt,#ececec);font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;padding:8px 10px;border-radius:7px;cursor:pointer}
.cq-sel select.filled{border-color:rgba(212,174,82,.4);color:var(--gold-lt,#d4ae52)}
.cq-grid > .cq-loc:last-of-type,.cq-grid > .cq-sel:last-of-type{border-bottom:0}
.cq-modal-foot{display:flex;align-items:center;gap:12px;padding:18px 24px;border-top:1px solid var(--border,#2c2c2c)}
.cq-foot-spread{margin-left:auto;display:flex;gap:12px}
.cq-clear{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted,#8a8a8a);background:none;border:0;cursor:pointer;text-decoration:underline}
.cq-btn-primary{font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;background:var(--gold,#b8962e);color:#0a0a0a;border:0;border-radius:9px;padding:11px 18px;cursor:pointer}
.cq-btn-primary:hover{background:var(--gold-lt,#d4ae52)}
.cq-btn-ghost{font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;background:var(--panel-2,#141414);color:var(--txt,#ececec);border:1px solid var(--border,#2c2c2c);border-radius:9px;padding:10px 16px;cursor:pointer}
.cq-btn-ghost:hover{border-color:var(--gold,#b8962e)}

/* ══ Team Schedule — 2-day paged card redesign ══ */
.sched-pager-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sched-range{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted,#8a8a8a);letter-spacing:.03em}
.sched-pager-dots{display:flex;gap:5px}
.sched-pager-dots i{width:6px;height:6px;border-radius:50%;background:var(--border,#2c2c2c);display:block}
.sched-pager-dots i.on{background:var(--gold-lt,#d4ae52)}

.sched-stage{display:flex;align-items:stretch;gap:0}
.sched-arrow{flex:0 0 44px;align-self:center;height:120px;display:flex;align-items:center;justify-content:center;background:var(--panel,#181818);border:1px solid var(--border,#2c2c2c);border-radius:12px;cursor:pointer;color:var(--gold-lt,#d4ae52);font-size:22px;user-select:none;transition:.12s}
.sched-arrow:hover{background:var(--gold,#b8962e);color:#0a0a0a;border-color:var(--gold,#b8962e)}
.sched-arrow.disabled{opacity:.25;pointer-events:none}

.sched-viewport{flex:1;overflow:hidden;margin:0 14px}
.sched-track{display:grid;grid-template-columns:1fr 1fr;gap:16px;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .32s ease}
.sched-track.sliding-left{transform:translateX(-30px);opacity:0}
.sched-track.sliding-right{transform:translateX(30px);opacity:0}
@media(max-width:760px){.sched-track{grid-template-columns:1fr}}

.sched-day{background:var(--panel,#181818);border:1px solid var(--border,#2c2c2c);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;align-self:start}
.sched-day.today{border-color:rgba(212,174,82,.4)}
.sched-day.sched-thin .sched-day-head{background:rgba(200,144,46,.08)}
.sched-day-head{padding:15px 18px;border-bottom:1px solid var(--border,#2c2c2c);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sched-day-label{font-weight:800;font-size:16px}
.sched-today-tag{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#0a0a0a;background:var(--gold-lt,#d4ae52);padding:2px 7px;border-radius:4px;margin-left:6px}
.sched-day-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted,#8a8a8a)}
.sched-day.sched-thin .sched-day-count{color:var(--amber,#c8902e)}
.sched-day-actions{margin-left:auto;display:flex;gap:8px}
.sched-rotate,.sched-cq-assign{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:7px;padding:8px 11px;cursor:pointer;border:1px solid var(--border,#2c2c2c);background:var(--panel-2,#141414);color:var(--muted,#8a8a8a);transition:.12s}
.sched-rotate:hover{border-color:var(--gold,#b8962e);color:var(--gold-lt,#d4ae52)}
.sched-cq-assign{border-color:rgba(212,174,82,.3);background:rgba(212,174,82,.08);color:var(--gold-lt,#d4ae52)}
.sched-cq-assign:hover{background:var(--gold,#b8962e);color:#0a0a0a}
.sched-cq-assign.assigned{border-color:rgba(59,167,118,.35);background:rgba(59,167,118,.12);color:#3ba776}

.sched-day-body{padding:12px;display:flex;flex-direction:column;gap:9px}
.sched-rep{background:var(--panel-2,#141414);border:1px solid var(--border,#2c2c2c);border-radius:10px;padding:13px 14px;position:relative;display:grid;grid-template-columns:1fr 190px;gap:14px;align-items:center}
@media(max-width:900px){.sched-rep{grid-template-columns:1fr}}
.sched-rep::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--border,#2c2c2c)}
.sched-rep.pod-intake::before{background:#5b8fd4}
.sched-rep.pod-engage::before{background:#d4ae52}
.sched-rep.pod-convert::before{background:#3ba776}
.sched-rep.pod-reconnect::before{background:#c87e3e}
.sched-rep.pod-answer::before{background:#a878d4}
.sched-rep-id{padding-left:10px}
.sched-rep-name{font-weight:700;font-size:14px}
.sched-rep-time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold-lt,#d4ae52);margin-top:3px}
.sched-rep-pods{display:flex;flex-direction:column;gap:5px}
.sched-rep-pods .sched-pod,.sched-rep-pods .sched-queue{width:100%;background:var(--panel,#181818);border:1px solid var(--border,#2c2c2c);color:var(--muted,#8a8a8a);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;padding:6px 9px;border-radius:6px;cursor:pointer}
.sched-rep-pods .sched-ab{display:flex;align-items:center;gap:5px}
.sched-ab-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted-2,#666);margin-right:2px}
.sched-rep-pods .sched-ab-btn{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;background:var(--panel,#181818);border:1px solid var(--border,#2c2c2c);color:var(--muted,#8a8a8a);border-radius:6px;padding:5px 11px;cursor:pointer}
.sched-rep-pods .sched-ab-btn.on{background:var(--gold,#b8962e);color:#0a0a0a;border-color:var(--gold,#b8962e)}
.sched-nomatch{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2,#666);font-style:italic}