/* ===========================================================================
   Rilono Enterprise — Study-Abroad Consultancy CRM
   Premium light-theme dashboard design system
   =========================================================================== */

:root {
  --bg: #f5f6fb;
  --bg-2: #eef0f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e7e9f3;
  --border-strong: #d6d9ea;
  --text: #0f172a;
  --text-2: #475569;
  --muted: #94a3b8;
  --primary: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --violet: #8b5cf6;
  --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --grad-deep: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --sky: #0ea5e9;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.16);
  --radius: 16px;
  --radius-sm: 11px;
  --sidebar-w: 256px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* One gap for every dashboard row, and one ceiling for every scrolling feed card, so the
     grid keeps a single rhythm instead of the per-card inline margins it grew by accident. */
  --dash-gap: 20px;
  --dash-feed-h: 344px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd2e6; border-radius: 8px; border: 2px solid var(--bg); }
.hidden { display: none !important; }

/* ---------- Auth (login / signup) ---------- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}
.auth-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-deep);
  color: #fff;
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-hero::before, .auth-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
}
.auth-hero::before { width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); top: -120px; right: -120px; }
.auth-hero::after { width: 320px; height: 320px; background: radial-gradient(circle, rgba(14,165,233,.35), transparent 70%); bottom: -100px; left: -80px; }
.auth-hero-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.auth-hero-brand .logo-mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: #fff; display: block; object-fit: contain;
  border: 1px solid rgba(255,255,255,.45); box-shadow: 0 12px 28px rgba(15,23,42,.16);
}
.auth-hero-brand b { font-size: 19px; letter-spacing: -0.01em; }
.auth-hero-body { position: relative; z-index: 2; }
.auth-hero-body h1 { font-size: 40px; line-height: 1.1; margin: 0 0 18px; letter-spacing: -0.02em; }
.auth-hero-body p { font-size: 17px; opacity: 0.92; max-width: 440px; }
.auth-points { list-style: none; padding: 0; margin: 26px 0 0; position: relative; z-index: 2; }
.auth-points li { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 15px; opacity: 0.95; }
.auth-points li .tick { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 13px; flex: none; }
.auth-flags { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 2; font-size: 26px; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--surface); }
.auth-card { width: 100%; max-width: 412px; }
.auth-card h2 { font-size: 26px; margin: 0 0 6px; letter-spacing: -0.02em; }
.auth-card .sub { color: var(--text-2); margin: 0 0 26px; font-size: 15px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  /* font-family: inherit — without it browsers render textareas in monospace, which
     the note/stage/composer fields each had to fix on their own. */
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border-strong); font-family: inherit;
  border-radius: var(--radius-sm); font-size: 15px; background: var(--surface);
  color: var(--text); transition: border-color .15s, box-shadow .15s; outline: none;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,.14);
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.phone-input-group { display: flex; align-items: stretch; gap: 8px; }
.field .phone-input-group select { width: auto; flex: 0 0 auto; min-width: 92px; max-width: 150px; padding-left: 10px; padding-right: 8px; }
.field .phone-input-group input { flex: 1 1 auto; width: auto; min-width: 0; }
.consent-field { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; }
.consent-field input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 2px; flex: 0 0 16px;
  accent-color: var(--primary); cursor: pointer;
}
.consent-field label { font-size: 13px; line-height: 1.45; color: var(--text-2); font-weight: 500; cursor: pointer; }
.consent-field a { color: var(--primary-600); font-weight: 650; text-decoration: none; }
.consent-field a:hover { text-decoration: underline; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.subdomain-field { display: flex; align-items: stretch; }
.subdomain-field input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: none; }
.subdomain-field .suffix {
  display: flex; align-items: center; padding: 0 14px; background: var(--surface-2);
  border: 1.5px solid var(--border-strong); border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--muted); font-size: 14px; white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  font-size: 14.5px; font-weight: 650; transition: transform .08s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
/* A button that is disabled has to LOOK disabled, whatever its fill. Only .btn-primary
   used to say so, which left a disabled ghost/soft/danger button lighting up on hover and
   dipping on :active — reading as clickable while every click was silently dropped. Hence
   the base rule here and the :not(:disabled) on each variant's hover below. */
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(99,102,241,.32); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 10px 26px rgba(99,102,241,.42); }
.btn-primary:disabled { opacity: .6; }
.btn-block { width: 100%; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn-soft { background: rgba(99,102,241,.1); color: var(--primary-600); }
.btn-soft:hover:not(:disabled) { background: rgba(99,102,241,.18); }
.btn-danger { background: rgba(239,68,68,.1); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.18); }
.btn-sm { padding: 8px 13px; font-size: 13px; }
.btn-lg { padding: 14px 22px; font-size: 16px; }

.auth-switch { text-align: center; margin-top: 22px; font-size: 14px; color: var(--text-2); }
.auth-switch button { background: none; border: none; color: var(--primary-600); font-weight: 650; font-size: 14px; padding: 0; }
.auth-error { background: rgba(239,68,68,.08); color: #b91c1c; border: 1px solid rgba(239,68,68,.25); border-radius: 11px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 16px; }
.auth-success { background: rgba(16,185,129,.1); color: #047857; border: 1px solid rgba(16,185,129,.3); border-radius: 11px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
.enterprise-turnstile-wrap {
  margin: -2px 0 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.enterprise-turnstile-wrap p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* ---------- App shell ---------- */
.app { display: none; min-height: 100vh; }
.app.active { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }

.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.side-brand { padding: 20px 20px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); }
.side-brand img, .side-brand .logo-fallback {
  width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex: none;
  background: var(--grad); display: grid; place-items: center; color: #fff; font-weight: 800;
}
.side-brand .brand-text { overflow: hidden; }
.side-brand .brand-text b { display: block; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-brand .brand-text span { font-size: 11.5px; color: var(--muted); }
.side-nav { padding: 14px 12px; flex: 1; overflow-y: auto; }
.side-nav .nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 12px 12px 6px; font-weight: 700; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; background: none;
  border-radius: 11px; color: var(--text-2); font-size: 14.5px; font-weight: 550; margin-bottom: 2px; text-align: left;
}
.nav-item svg { width: 19px; height: 19px; flex: none; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: rgba(99,102,241,.12); color: var(--primary-700); font-weight: 650; }
.nav-item .badge { margin-left: auto; background: var(--bg-2); color: var(--text-2); font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 20px; }
.side-foot { padding: 14px; border-top: 1px solid var(--border); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; }
.user-chip .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.user-chip .meta { overflow: hidden; flex: 1; }
.user-chip .meta b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .meta span { font-size: 11.5px; color: var(--muted); }
.user-chip .signout { background: none; border: none; color: var(--muted); padding: 6px; border-radius: 8px; }
.user-chip .signout:hover { background: var(--surface-2); color: var(--danger); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; background: rgba(245,246,251,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); padding: 14px 28px; display: flex; align-items: center; gap: 16px;
}
.topbar h1 { font-size: 20px; margin: 0; letter-spacing: -0.02em; }
.topbar .spacer { flex: 1; }
.search-box { position: relative; }
.search-box input {
  width: 280px; max-width: 38vw; padding: 9px 38px 9px 38px; border: 1.5px solid var(--border-strong);
  border-radius: 30px; background: var(--surface); font-size: 14px; outline: none;
}
.search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.search-box svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: none; border-radius: 999px;
  background: var(--bg-2); color: var(--text-2); font-size: 18px; line-height: 1;
  display: grid; place-items: center; padding: 0;
}
.search-clear:hover { background: #e2e8f0; color: var(--text); }

/* ---------- Full-screen toggle (topbar) ----------
   Matches the bell so the two read as one control cluster. */
.fs-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.fs-btn:hover { border-color: var(--primary); color: var(--primary-600); }
.fs-btn svg { width: 17px; height: 17px; }
/* The topbar is a no-wrap flex row: below ~960px this button's 56px would squeeze
   "+ Add Client" onto two lines and then past the edge. Full screen is a big-window
   affordance anyway, so drop it well before that point rather than at the phone breakpoint. */
@media (max-width: 1024px) { .fs-btn { display: none; } }

/* ---------- Notification bell (topbar) ---------- */
.notif-wrap { position: relative; }
.notif-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.notif-btn:hover { border-color: var(--primary); color: var(--primary-600); }
.notif-btn svg { width: 18px; height: 18px; }
.notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface);
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 380px; max-width: 92vw; z-index: 60;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,.18); overflow: hidden;
}
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.notif-head h4 { margin: 0; font-size: 14.5px; }
/* "Mark all read" — a clean text action, not the browser's default button chrome. */
.notif-head .link {
  background: none; border: none; margin: 0; padding: 5px 10px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--primary-600); border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.notif-head .link:hover { background: rgba(99,102,241,.1); color: var(--primary); }
.notif-head .link:active { transform: translateY(.5px); }
.notif-head .link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-item { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; align-items: flex-start; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--bg-2); }
.notif-item.unread { background: rgba(99,102,241,.06); }
.notif-item.unread:hover { background: rgba(99,102,241,.1); }
.notif-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-2); display: grid; place-items: center; font-size: 16px; }
.notif-title { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.notif-body { font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.notif-time { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.notif-empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.notif-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-top: 6px; }

.content { padding: 28px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---------- Trial / plan banner ---------- */
.plan-banner {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: 14px; margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.12)); border: 1px solid rgba(99,102,241,.22);
}
.plan-banner.warn { background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(239,68,68,.1)); border-color: rgba(245,158,11,.3); }
.plan-banner .pb-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; font-size: 18px; }
.plan-banner.warn .pb-icon { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.plan-banner .pb-text { flex: 1; min-width: 0; font-size: 14px; }
.plan-banner .pb-text b { font-size: 14.5px; }
.plan-banner .pb-text span { color: var(--text-2); }
/* On a phone the two action buttons squeezed the message into a ~110px column that
   wrapped one or two words per line. Let the row wrap and give the text its own line. */
@media (max-width: 640px) {
  .plan-banner { flex-wrap: wrap; }
  .plan-banner .pb-text { flex: 1 1 calc(100% - 52px); }
  .plan-banner .btn { flex: 1 1 auto; }
}

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: var(--dash-gap); }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi .kpi-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 18px; }
.kpi .kpi-label { font-size: 13px; color: var(--text-2); margin: 14px 0 4px; font-weight: 550; }
.kpi .kpi-value { font-size: 30px; font-weight: 760; letter-spacing: -0.02em; line-height: 1; }
.kpi .kpi-sub { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* ---------- Generic cards / grids ---------- */
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.grid-2.even { grid-template-columns: 1fr 1fr; }
/* An fr track is floored at its content's min-content width, so a card that cannot shrink
   sizes the whole grid and pushes the page into a horizontal scroll. The cards inside are
   responsible for staying readable as their column narrows. */
.grid-2 > * { min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-head { padding: 18px 20px 0; display: flex; align-items: center; justify-content: space-between; }
.card-head h3 { font-size: 16px; margin: 0; letter-spacing: -0.01em; }
.card-head .link { font-size: 13px; color: var(--primary-600); font-weight: 600; background: none; border: none; }
.card-body { padding: 18px 20px 20px; }

/* pipeline bars */
.pipe-row { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
/* The label column is shared: it carries both the visa pipeline's stage names ("Offer
   Accepted & Deposit Paid") and the workstream cards' admissions / English-test options,
   which run longer still. Labels wrap rather than clip, and the two-line floor keeps every
   row the same height whether or not its label wrapped. The track keeps a flex basis of its
   own so a cramped row shrinks the label instead of collapsing the bar to nothing. */
.pipe-row .pl {
  flex: 0 1 224px; min-width: 0; display: flex; align-items: center; min-height: 2.7em;
  font-size: 13px; line-height: 1.35; color: var(--text-2); overflow-wrap: anywhere;
}
.pipe-row .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 8px; flex: none; }
.pipe-track { flex: 1 1 60px; height: 9px; background: var(--bg-2); border-radius: 6px; overflow: hidden; }
.pipe-fill { height: 100%; border-radius: 6px; transition: width .5s ease; }
.pipe-row .pv { width: 30px; text-align: right; font-size: 13px; font-weight: 700; flex: none; }

/* category chips */
/* Two chips per row while two fit, one below that: the 48% floor never leaves room for a
   third, and visa-type names are long enough that a half-width column of them is unreadable
   once this card's grid column drops under ~300px. */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(120px, 48%), 1fr)); gap: 12px; }
.cat-cell { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.cat-cell .ci { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.cat-cell > div { min-width: 0; }
.cat-cell .cv { font-size: 20px; font-weight: 750; line-height: 1; }
.cat-cell .cl { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }

/* country landmark cards */
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.country-card { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.country-art { position: relative; height: 96px; }
.country-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.country-art .flag { position: absolute; top: 9px; left: 10px; font-size: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.country-art .cnt { position: absolute; top: 8px; right: 10px; background: rgba(0,0,0,.35); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 20px; backdrop-filter: blur(3px); }
.country-meta { padding: 11px 13px; }
.country-meta b { font-size: 14px; display: block; }
.country-meta span { font-size: 11.5px; color: var(--muted); }

/* real landmark photo fill + legibility overlay */
.country-art .lk-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.country-art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.32), transparent 42%, transparent 70%, rgba(0,0,0,.16)); }
.country-art .flag, .country-art .cnt { z-index: 2; }

/* interactive dashboard cards */
.kpi.clickable { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.kpi.clickable:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(99, 102, 241, .16); }
.kpi-arrow { color: var(--muted); font-weight: 800; opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.kpi.clickable:hover .kpi-arrow { opacity: 1; transform: translateX(0); }
.country-card.clickable { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.country-card.clickable:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .16); }
.pipe-row.clickable { cursor: pointer; border-radius: 9px; transition: background .15s ease; }
.pipe-row.clickable:hover { background: var(--surface-2); }
.cat-cell.clickable { cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.cat-cell.clickable:hover { transform: translateY(-2px); border-color: rgba(99, 102, 241, .45); }
.scope-chip { background: rgba(99, 102, 241, .14) !important; color: var(--primary-600, #4f46e5) !important; border-color: rgba(99, 102, 241, .32) !important; }
.search-chip { background: rgba(14, 165, 233, .12) !important; color: #0369a1 !important; border-color: rgba(14, 165, 233, .28) !important; }
[role="button"]:focus-visible { outline: 2px solid var(--primary-600, #6366f1); outline-offset: 2px; border-radius: 12px; }

/* ---------- Clients toolbar + table ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 30px; border: 1.5px solid var(--border-strong);
  background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-2);
}
.chip:hover { border-color: var(--primary); color: var(--primary-600); }
.chip.active { background: var(--text); color: #fff; border-color: var(--text); }
/* Don't let a mouse-clicked filter chip keep a focus ring after it's no longer the active
   filter — but keep a visible ring for keyboard navigation (accessibility). */
.chip:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.chip:focus-visible { outline: 2px solid var(--primary-600, #6366f1); outline-offset: 2px; }
.chip .c-count { background: rgba(255,255,255,.18); padding: 0 7px; border-radius: 20px; font-size: 11.5px; }
.chip:not(.active) .c-count { background: var(--bg-2); color: var(--text-2); }
.toolbar .spacer { flex: 1; }
.select-mini { padding: 8px 12px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); font-size: 13.5px; color: var(--text); outline: none; }

.client-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.client-table thead th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 13px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 700; }
.client-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; cursor: pointer; }
.client-table tbody tr:last-child { border-bottom: none; }
.client-table tbody tr:hover { background: var(--surface-2); }
.client-table td { padding: 13px 16px; font-size: 14px; vertical-align: middle; }
.cl-name { display: flex; align-items: center; gap: 11px; }
.cl-avatar { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex: none; }
.cl-name b { font-size: 14.5px; display: block; }
.cl-name span { font-size: 12px; color: var(--muted); }
.cl-dest { display: flex; align-items: center; gap: 8px; }
.cl-dest .fl { font-size: 17px; }
.cl-dest small { display: block; color: var(--muted); font-size: 11.5px; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 30px; font-size: 12.5px; font-weight: 650; }
.status-pill .sd { width: 7px; height: 7px; border-radius: 50%; }
.prio { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 7px; text-transform: capitalize; }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty .emoji { font-size: 44px; margin-bottom: 12px; }
.empty h3 { color: var(--text); margin: 0 0 6px; font-size: 18px; }
.empty p { margin: 0 0 18px; font-size: 14px; }

/* ---------- Modal / drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.46); backdrop-filter: blur(3px); z-index: 80; display: none; }
.overlay.show { display: block; }
.modal {
  position: fixed; z-index: 90; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.97);
  width: min(560px, 94vw); max-height: 92vh; overflow-y: auto; background: var(--surface);
  border-radius: 20px; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .16s, transform .16s; display: none;
}
.modal.show { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Wide variant for data-entry forms (the client intake record). Same min() clamp as the
   base rule — that clamp plus max-height:92vh is the whole responsive story for modals. */
.modal.modal-wide { width: min(880px, 94vw); }

/* ---------- intake form grid (shared by the client modal and the in-page edit pane) ----------
   Row gap stays 0: .field already carries margin-bottom:16px for the vertical rhythm.
   minmax(0,1fr) so long option text in a select can't blow its track out. */
.mw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.mw-grid > .span2 { grid-column: span 2; }
.mw-grid > .span3 { grid-column: 1 / -1; }
.mw-sec + .mw-sec { margin-top: 8px; }
details.mw-fold { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px 2px; margin-bottom: 14px; background: var(--surface-2); }
details.mw-fold[open] { background: var(--surface); }
details.mw-fold > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--primary-600); list-style: none; }
details.mw-fold > summary::-webkit-details-marker { display: none; }
details.mw-fold > summary::before { content: "▸ "; }
details.mw-fold[open] > summary::before { content: "▾ "; }
details.mw-fold[open] > summary { margin-bottom: 14px; }
.mw-hint { font-size: 12px; color: var(--muted); margin: -8px 0 14px; line-height: 1.5; }
.mw-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -4px 0 14px; }
.mw-checks label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.mw-checks input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
@media (max-width: 900px) {
  .mw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-grid > .span2, .mw-grid > .span3 { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .mw-grid, .modal-wide .field-row { grid-template-columns: minmax(0, 1fr); }
  .mw-grid > .span2 { grid-column: auto; }
}
.modal-head { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--surface); border-radius: 20px 20px 0 0; z-index: 2; }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-head .x { background: var(--surface-2); border: none; width: 32px; height: 32px; border-radius: 9px; color: var(--text-2); font-size: 18px; }
.modal-head .x:hover { background: var(--bg-2); color: var(--text); }
.modal-body { padding: 22px 24px; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--surface); }

/* ---------------- confirm-dialog warning callout ----------------
   For a confirm that is allowed to go through but leaves something incomplete —
   moving a stage on with required case-record fields still empty. Run as another
   sentence in the body copy it reads as blank prose and gets clicked past, so it
   gets a bordered block, a coloured glyph and one chip per gap. Amber and not red on
   purpose — it is the same tone as the .jtrack-gap dot the tracker already puts on a
   stage with empty required fields, and nothing here has failed: the move still goes
   through. .danger is the red tone, for a confirm that is about to lose something. */
.cfm-warn {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 16px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 158, 11, .45); border-left: 3px solid var(--warning, #f59e0b);
  background: rgba(245, 158, 11, .09);
}
.cfm-warn-ic { font-size: 17px; line-height: 1.25; color: var(--warning, #f59e0b); flex-shrink: 0; }
.cfm-warn-main { min-width: 0; }
.cfm-warn-title { font-size: 13.5px; font-weight: 700; color: #92400e; line-height: 1.5; }
.cfm-warn-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cfm-warn-chip {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: rgba(245, 158, 11, .15); color: #92400e; border: 1px solid rgba(245, 158, 11, .34);
}
.cfm-warn-note { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-top: 8px; }
.cfm-warn.danger { border-color: rgba(239, 68, 68, .45); border-left-color: var(--danger, #ef4444); background: rgba(239, 68, 68, .08); }
.cfm-warn.danger .cfm-warn-ic { color: var(--danger, #ef4444); }
.cfm-warn.danger .cfm-warn-title { color: #991b1b; }
.cfm-warn.danger .cfm-warn-chip { background: rgba(239, 68, 68, .13); color: #991b1b; border-color: rgba(239, 68, 68, .3); }

/* drawer for client detail */
.drawer {
  position: fixed; z-index: 90; top: 0; right: 0; height: 100vh; width: min(620px, 96vw);
  background: var(--bg); box-shadow: var(--shadow-lg); transform: translateX(102%); transition: transform .24s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.drawer.show { transform: translateX(0); }
.drawer-hero { color: #fff; padding: 22px 26px 20px; position: relative; }
.drawer-hero .x { position: absolute; top: 18px; right: 20px; background: rgba(255,255,255,.18); border: none; color: #fff; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
.drawer-hero .dh-top { display: flex; align-items: center; gap: 14px; }
.drawer-hero .dh-avatar { width: 56px; height: 56px; border-radius: 15px; background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.35); display: grid; place-items: center; font-size: 22px; font-weight: 750; flex: none; }
.drawer-hero h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.drawer-hero .dh-sub { opacity: .92; font-size: 13.5px; margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px 40px; }
.drawer-tabs { display: flex; gap: 4px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 3; }
.drawer-tab { padding: 13px 14px; border: none; background: none; font-size: 14px; font-weight: 600; color: var(--text-2); border-bottom: 2.5px solid transparent; }
.drawer-tab.active { color: var(--primary-700); border-bottom-color: var(--primary); }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.detail-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.detail-item label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.detail-item div { font-size: 14.5px; margin-top: 3px; font-weight: 550; word-break: break-word; }
.detail-item.full { grid-column: 1 / -1; }

.stage-flow { display: flex; flex-wrap: wrap; gap: 7px; }
.stage-step { padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-2); }
.stage-step.done { color: #fff; border-color: transparent; }
.stage-step:hover { border-color: var(--primary); }

/* Visual journey tracker (client Overview) — connected stepper with done/current/upcoming.
   The pipeline is long (lead → shortlist → applications → offer → the whole visa run), so the
   track scrolls sideways whenever the pane cannot hold every step at a readable width. Two
   affordances say so: an always-drawn scrollbar (macOS overlay bars are invisible at rest, so
   the steps past the edge were unfindable) and an inner shadow on whichever edge still has
   track behind it — the shadow layers are scroll-attached and the cover layers local, so each
   side shows only while there is something to scroll to. */
/* padding-top clears the current/approved node's focus ring, which a scroll container clips. */
.jtrack {
  display: flex; align-items: flex-start; margin: 4px 0 2px; overflow-x: auto;
  padding: 6px 0;
  background-image:
    linear-gradient(to right, var(--surface) 62%, rgba(15, 23, 42, 0)),
    linear-gradient(to left, var(--surface) 62%, rgba(15, 23, 42, 0)),
    linear-gradient(to right, rgba(15, 23, 42, .22), rgba(15, 23, 42, 0)),
    linear-gradient(to left, rgba(15, 23, 42, .22), rgba(15, 23, 42, 0));
  background-position: left center, right center, left center, right center;
  background-size: 26px 100%, 26px 100%, 15px 100%, 15px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.jtrack::-webkit-scrollbar { height: 9px; }
.jtrack::-webkit-scrollbar-track { background: var(--bg-2); border-radius: 999px; }
.jtrack::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.jtrack::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* Same affordance for Firefox, which has no ::-webkit-scrollbar and would otherwise fall
   back to the invisible overlay bar. Gated: where the pseudo-element exists, the standard
   properties override it and take the reserved 9px track with them. */
@supports not selector(::-webkit-scrollbar) {
  .jtrack { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg-2); }
}
/* scroll-margin leaves a step's worth of context on either side when the current stage is
   scrolled into view, so it never lands flush against the edge gradient. */
.jtrack-step { flex: 1 0 72px; min-width: 72px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 2px; scroll-margin-inline: 76px; }
.jtrack-step[data-jkey] { cursor: pointer; }
/* Stage whose case-record panel is open */
.jtrack-step.panel-open .jtrack-node { box-shadow: 0 0 0 4px rgba(99, 102, 241, .18); }
.jtrack-step.panel-open .jtrack-label { color: var(--primary-600); font-weight: 700; }
/* Amber dot: a reached stage still missing required record fields */
.jtrack-gap { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; border: 2px solid var(--surface); }

/* ---- Per-stage case record panel (destination-aware fields) ---- */
.stage-panel { margin-top: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); padding: 16px 18px 14px; animation: stagePanelIn .16s ease; }
@keyframes stagePanelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.stage-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.stage-panel-head h4 { margin: 0; font-size: 15px; }
.stage-panel-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.stage-panel-tag { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
/* Dashed, to echo the dashed node the tracker drew for this same stage. */
.stage-panel-tag-skip { border-style: dashed; border-color: var(--border-strong); }
.stage-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stage-field { display: flex; flex-direction: column; gap: 5px; }
.stage-field label { font-size: 12px; font-weight: 700; color: var(--text); }
.stage-field input, .stage-field select, .stage-field textarea { width: 100%; box-sizing: border-box; min-height: 2.3rem; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.stage-field textarea { resize: vertical; }
.stage-field input:focus, .stage-field select:focus, .stage-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .13); }
.sf-req { color: #b45309; }
.sf-hint { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.stage-panel-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.stage-current-pill { font-size: 12px; font-weight: 700; color: #047857; background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .35); border-radius: 999px; padding: 4px 10px; }
@media (max-width: 720px) { .stage-fields { grid-template-columns: 1fr; } }
.jtrack-step:not(:first-child)::before {
  content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px;
  background: var(--border-strong); border-radius: 2px; z-index: 0;
}
.jtrack-step.done::before, .jtrack-step.current::before { background: var(--primary); }
.jtrack-node {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1;
  background: var(--surface); border: 2px solid var(--border-strong); color: var(--muted);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.jtrack-step.done .jtrack-node { background: var(--primary); border-color: var(--primary); color: #fff; }
.jtrack-step.current .jtrack-node { border-color: var(--primary); color: var(--primary-600); box-shadow: 0 0 0 4px rgba(99,102,241,.16); }
.jtrack-step.approved .jtrack-node { background: #10b981; border-color: #10b981; color: #fff; box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.jtrack-step[data-jkey]:hover .jtrack-node { border-color: var(--primary); }
.jtrack-label { margin-top: 8px; font-size: 11px; font-weight: 600; line-height: 1.28; color: var(--text-2); min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.jtrack-step.current .jtrack-label { color: var(--primary-600); font-weight: 700; }
.jtrack-step.done .jtrack-label, .jtrack-step.approved .jtrack-label { color: var(--text); }

/* Skipped: the case went PAST this stage without ever going through it. It is neither a
   tick (nobody did the work) nor an upcoming node (it is behind the case and will not come
   round again), so it gets its own reading — a hollow dashed node with a dash where the
   number or tick would sit, and a dashed rail leading into it. Scanning the track then shows
   what was actually worked instead of a solid row of ticks the case never earned. */
.jtrack-step.skipped::before {
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 10px);
}
.jtrack-step.skipped .jtrack-node { background: var(--bg-2); border-style: dashed; color: var(--muted); }
.jtrack-step.skipped .jtrack-label { color: var(--muted); }
.jtrack-skipnote { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.45; }
.jtrack-skipmark {
  flex: none; margin-top: 1px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--bg-2); border: 1.5px dashed var(--border-strong); color: var(--muted);
}

/* On Hold: the pipeline dims but the client's position stays visible; the paused
   node gets an amber ⏸ ring so "where were we?" is answerable at a glance. */
.jtrack-held .jtrack-node, .jtrack-held .jtrack-label { opacity: .62; }
.jtrack-held .jtrack-step.paused .jtrack-node,
.jtrack-held .jtrack-step.paused .jtrack-label { opacity: 1; }
.jtrack-step.paused .jtrack-node { background: #fffbeb; border-color: #f59e0b; color: #b45309; box-shadow: 0 0 0 4px rgba(245,158,11,.16); }
.jtrack-step.paused .jtrack-label { color: #b45309; font-weight: 700; }

.jtrack-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.jtrack-resume {
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  border: none; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  box-shadow: 0 4px 12px rgba(99,102,241,.28);
}
.jtrack-resume:hover { filter: brightness(1.06); }
.jtrack-hint { margin-top: 12px; }
.jtrack-alt-pill { padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text-2); cursor: default; }
.jtrack-alt-pill[data-jkey] { cursor: pointer; }
.jtrack-alt-pill[data-jkey]:hover { border-color: var(--text-2); }
.jtrack-alt-rej.active { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.45); color: #dc2626; }
.jtrack-alt-hold.active { background: rgba(156,163,175,.16); border-color: rgba(107,114,128,.5); color: #4b5563; }

.jtrack-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.jtrack-docs-count { font-size: 12.5px; font-weight: 700; color: var(--text); }
.jtrack-docchip { font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; }
.jtrack-docchip.more { color: var(--muted); }

@media (max-width: 640px) {
  .jtrack-step { flex-basis: 76px; min-width: 76px; }
}

/* notes timeline */
.note-add { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; margin-bottom: 16px; }
.tl-item::before { content: ""; position: absolute; left: -20px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--border); }
.tl-item .tl-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tl-item .tl-body { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; font-size: 14px; white-space: pre-wrap; }
/* Note delete — subtle until the note row is hovered (always visible on touch). */
.tl-del {
  margin-left: 8px; padding: 1px 7px; border: none; border-radius: 7px; cursor: pointer;
  font-size: 11px; line-height: 1.6; color: var(--muted); background: transparent;
  opacity: 0; transition: opacity .15s, background .15s, color .15s; vertical-align: 1px;
}
.tl-item:hover .tl-del, .tl-del:focus-visible { opacity: 1; }
.tl-del:hover { background: rgba(239, 68, 68, .12); color: var(--danger); }
.tl-del:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: none) { .tl-del { opacity: 1; } }

.email-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 12px; }
.email-item .ei-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.email-item .ei-subject { font-weight: 650; font-size: 14px; }
.email-item .ei-body { font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.email-item .ei-fail { color: var(--danger); font-size: 12px; font-weight: 600; }
.email-item .ei-meta { font-size: 12px; color: var(--muted); margin: -2px 0 5px; }
.email-item.inbound { border-left: 3px solid var(--primary); }
.email-item.inbound .ei-meta { color: var(--primary); font-weight: 600; }
.email-item .ei-unverified { color: var(--danger); font-weight: 600; }

/* ---------- Team ---------- */
.member-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: none; }
.member-row .m-av { width: 42px; height: 42px; border-radius: 12px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.member-row .m-meta { flex: 1; min-width: 0; }
.member-row .m-meta b { font-size: 14.5px; }
.member-row .m-meta span { font-size: 12.5px; color: var(--muted); display: block; }
.role-badge { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: capitalize; }
.role-admin { background: rgba(99,102,241,.14); color: var(--primary-700); }
.role-editor { background: rgba(14,165,233,.14); color: #0369a1; }
.role-viewer { background: var(--bg-2); color: var(--text-2); }

/* ---------- Billing ---------- */
.billing-toggle { display: inline-flex; background: var(--bg-2); border-radius: 30px; padding: 4px; margin: 0 auto 24px; }
.billing-toggle button { border: none; background: none; padding: 8px 20px; border-radius: 26px; font-size: 13.5px; font-weight: 650; color: var(--text-2); }
.billing-toggle button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.billing-toggle .save { color: var(--success); font-size: 11px; margin-left: 5px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.plan-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 24px; position: relative; display: flex; flex-direction: column; }
.plan-card.popular { border-color: var(--primary); box-shadow: 0 12px 36px rgba(99,102,241,.16); }
.plan-card .pop-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.plan-card h3 { margin: 0 0 3px; font-size: 18px; }
.plan-card .tagline { font-size: 13px; color: var(--text-2); margin-bottom: 16px; }
.plan-card .price { font-size: 32px; font-weight: 780; letter-spacing: -0.02em; }
.plan-card .price small { font-size: 14px; color: var(--muted); font-weight: 500; }
/* Sandbox countdown / cap-reached / migration-ramp notice, painted above the main views.
   Deliberately an inline strip rather than a modal: it must be impossible to miss and
   equally impossible for it to block work. */
.trial-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.trial-banner > span { flex: 1; min-width: 240px; }
.trial-banner b { color: var(--text); }
.trial-banner-warn {
  border-left-color: var(--warning, #f59e0b);
  background: color-mix(in srgb, var(--warning, #f59e0b) 8%, var(--surface));
}
.trial-banner-danger {
  border-left-color: var(--danger, #ef4444);
  background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--surface));
}

/* Tier prices are quoted EX-GST, so the card states the tax and the real charged total
   directly under the headline price. A buyer must never first meet the larger number
   inside the Razorpay modal. */
.price-tax { font-size: 12px; font-weight: 600; color: var(--text-2); margin-top: 4px; }
.price-note { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; }

/* The three numbers that actually differentiate the tiers: users, active clients and the
   monthly AI credit allowance. Sits between the price and the feature list so the
   comparison is one glance across cards rather than a read of four bullet lists. */
.plan-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.plan-caps > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-caps b { font-size: 17px; font-weight: 780; letter-spacing: -0.01em; }
.plan-caps span { font-size: 10.5px; color: var(--muted); font-weight: 600; line-height: 1.25; }

.plan-card ul { list-style: none; padding: 0; margin: 18px 0; flex: 1; }
.plan-card ul li { font-size: 13.5px; color: var(--text-2); padding: 6px 0 6px 24px; position: relative; }
.plan-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 800; }
.plan-card.current-plan { background: var(--surface-2); }
.plan-current-tag { font-size: 12px; font-weight: 700; color: var(--success); text-align: center; padding: 12px; }

/* Discount code applied at checkout */
.price-was { font-size: 16px; color: var(--muted); font-weight: 500; text-decoration: line-through; margin-left: 8px; }
.price-off { font-size: 12px; font-weight: 700; color: var(--success); margin-top: 2px; }
.coupon-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 460px; margin: 0 auto 18px; }
.coupon-bar .coupon-input {
  flex: 1; min-width: 200px; padding: 10px 13px; border: 1.5px solid var(--border-strong);
  border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14px;
}
.coupon-bar .coupon-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.coupon-bar.applied {
  justify-content: space-between; padding: 11px 14px; border: 1.5px solid var(--success);
  border-radius: 12px; background: rgba(16,185,129,.08);
}
.coupon-bar-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coupon-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 13px;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 3px 9px;
}
.coupon-msg { font-size: 13px; font-weight: 600; color: var(--success); }

/* ===========================================================================
   Credits & Billing — the wallet header, its two tabs (Plans & top-up /
   Usage analytics) and everything the analytics tab paints.
   =========================================================================== */
.cr-wallet { margin-bottom: 18px; }
.cr-wallet-body { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cr-wallet-main { flex: 1; min-width: 220px; }
.cr-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cr-balance { font-size: 38px; font-weight: 800; margin: 4px 0; line-height: 1.1; letter-spacing: -0.02em; }
.cr-balance span { font-size: 16px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.cr-worth { font-size: 13px; color: var(--text-2); }
.cr-lowbal { margin-top: 8px; font-size: 12px; color: var(--warning); font-weight: 600; }
.cr-wallet-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.cr-wallet-stats span { display: block; font-size: 12px; color: var(--muted); }
.cr-wallet-stats b { font-size: 18px; }
.cr-wallet-stats em { display: block; font-size: 11.5px; color: var(--muted); font-style: normal; }

.cr-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.cr-tab {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .15s ease; font-family: var(--font);
}
.cr-tab:hover { border-color: var(--border-strong); color: var(--text); }
.cr-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }

.cr-head-note { font-size: 12.5px; color: var(--text-2); }
.cr-sub { font-size: 12px; color: var(--muted); }
.cr-sub-inline { font-size: 12.5px; color: var(--text-2); }
.cr-table td { vertical-align: top; }
.cr-table tbody tr[style*="cursor:default"]:hover { background: transparent; }
.cr-link { color: var(--primary-600); cursor: pointer; }
.cr-link:hover { text-decoration: underline; }

/* --- Plans tab: free tier + price list --- */
.cr-free-card { margin-bottom: 18px; border-left: 4px solid var(--success); }
.cr-free-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }
.cr-free-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 22px; }
.cr-free-item { font-size: 13px; color: var(--text-2); padding-left: 22px; position: relative; line-height: 1.45; }
.cr-free-item::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 800; }
.cr-free-item b { color: var(--text); font-weight: 650; }
.cr-free-sub { display: block; font-size: 11.5px; color: var(--muted); }
.cr-price-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cr-price-row:last-child { border-bottom: none; }
.cr-price-desc { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.cr-price-amt { text-align: right; white-space: nowrap; }
.cr-price-amt div { font-size: 12px; color: var(--text-2); }

/* --- Analytics tab --- */
.cr-rangebar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.cr-rangelabel { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: 3px; }
.cr-range {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 9px; padding: 6px 13px; font-size: 12.5px; font-weight: 650; cursor: pointer;
  font-family: var(--font); transition: all .14s ease;
}
.cr-range:hover { border-color: var(--border-strong); color: var(--text); }
.cr-range.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Custom window pickers + the grouping switch. The spacer pushes "Group by" to the
   far end so the bar reads as two controls (which dates / how to slice them) rather
   than one long row of pills. */
.cr-rangespacer { flex: 1 1 auto; }
.cr-custom { display: inline-flex; align-items: center; gap: 6px; }
.cr-custom-sep { color: var(--muted); font-size: 12px; }
.cr-input.cr-date { min-width: 0; padding: 6px 9px; font-size: 12.5px; }
.cr-granwrap { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cr-gran {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 650; cursor: pointer;
  font-family: var(--font); transition: all .14s ease;
}
.cr-gran:hover { border-color: var(--border-strong); color: var(--text); }
.cr-gran.active { background: var(--text); border-color: var(--text); color: #fff; }

/* Spend timeline: a CSS bar chart, so it reflows with the card and needs no library. */
.cr-chart-wrap { display: flex; gap: 10px; align-items: stretch; }
.cr-chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--muted); padding: 2px 0 0; flex: none; }
/* The plot scrolls, the y-axis doesn't. A slot has a hard 2px floor, so a long
   day-by-day range needs more width than the card has; without this the bars
   painted over the page gutter instead of scrolling. */
.cr-chart-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.cr-chart {
  flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 168px;
  border-bottom: 1px solid var(--border); padding-bottom: 1px; min-width: 0;
}
.cr-bar-slot { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; align-items: flex-end; }
.cr-bar {
  width: 100%; border-radius: 4px 4px 2px 2px; background: var(--grad);
  transition: opacity .12s ease; min-height: 2px;
  /* Monthly buckets are few and wide — cap the bar so an "All time" chart with
     four months doesn't render as four slabs. Slots still span the full width. */
  max-width: 56px; margin: 0 auto;
}
.cr-bar-slot:hover .cr-bar { opacity: .72; }
/* A bar with spend behind it drills into that period, so it has to look pressable. */
.cr-bar-slot[data-crbar] { cursor: pointer; }
.cr-bar-slot[data-crbar]:focus-visible { outline: 2px solid rgba(99, 102, 241, .45); outline-offset: 1px; border-radius: 4px; }
.cr-bar-slot.active .cr-bar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); opacity: 1; }
/* Zero-spend bucket: a flat tick on the baseline, not a gap — a chart that skips
   quiet days reads as continuous usage. (Class is prefixed: a bare `.empty`
   collides with the global empty-state block and inherits its 60px padding.) */
.cr-bar.cr-bar-zero { background: var(--bg-2); height: 3px; border-radius: 2px; }
/* Inside .cr-chart-scroll the labels sit directly under the plot they name, so they
   need no y-axis offset of their own — the offset lives on the scroller's sibling. */
.cr-chart-x { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }

.cr-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-bottom: 24px; }
.cr-split-row { padding: 11px 0; border-bottom: 1px solid var(--border); }
.cr-split-row:last-child { border-bottom: none; }
.cr-split-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cr-split-amt { text-align: right; white-space: nowrap; }
.cr-split-amt span { color: var(--muted); font-size: 12px; }
.cr-member-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border); border-radius: 8px; }
.cr-member-row:last-child { border-bottom: none; }
.cr-member-row[data-crmember] { cursor: pointer; }
.cr-member-row[data-crmember]:hover { background: var(--surface-2); box-shadow: 0 0 0 8px var(--surface-2); }
.cr-member-row:focus-visible { outline: 2px solid rgba(99, 102, 241, .45); outline-offset: 2px; }
.cr-avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.cr-member-main { flex: 1; min-width: 0; }
.cr-member-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-chips { display: flex; gap: 5px; flex-wrap: wrap; max-width: 340px; }
.cr-chip { font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }

/* Period-by-period breakdown table */
.cr-day-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 0; }
.cr-day-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.cr-day-toggle input { accent-color: var(--primary); cursor: pointer; }
.cr-day-tools #crDayExport { margin-left: auto; }
.cr-day-warn {
  font-size: 12.5px; color: var(--text-2); background: rgba(245, 158, 11, .1);
  border-left: 3px solid var(--warning); border-radius: 0 8px 8px 0; padding: 9px 12px;
}
.cr-day-row { cursor: pointer; }
.cr-day-row.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--primary); }
.cr-day-share { min-width: 130px; }
.cr-day-share .cr-sub { display: block; margin-top: 3px; }

/* The ledger's "you are looking at one day inside the period" banner. */
.cr-drill { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 0; }
.cr-drill-chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650;
  background: rgba(99, 102, 241, .12); color: var(--primary-600);
  border-radius: 999px; padding: 5px 8px 5px 12px;
}
.cr-drill-chip button {
  border: none; background: rgba(99, 102, 241, .18); color: inherit; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%; line-height: 1; font-size: 13px;
  font-family: var(--font); display: grid; place-items: center;
}
.cr-drill-chip button:hover { background: var(--primary); color: #fff; }

/* Ledger filter bar */
.cr-filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.cr-input {
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface);
  color: var(--text); font-size: 13px; font-family: var(--font); padding: 8px 11px; min-width: 132px;
}
.cr-filters input.cr-input { flex: 1 1 170px; min-width: 150px; }
.cr-filters #crExport { margin-left: auto; }
.cr-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

@media (max-width: 720px) {
  .cr-wallet-body { align-items: flex-start; }
  .cr-wallet-stats { gap: 18px; }
  .cr-tab { flex: 1 1 auto; text-align: center; }
  .cr-chips { max-width: 200px; }
  .cr-filters .cr-input { flex: 1 1 100%; min-width: 0; }
  /* The spacer would otherwise strand "Group by" on the same wrapped line as a
     half-width date picker; zero-height, it forces a clean break instead. */
  .cr-rangespacer { flex-basis: 100%; height: 0; }
  .cr-custom { width: 100%; }
  .cr-custom .cr-input { flex: 1; min-width: 0; }
  .cr-day-tools #crDayExport { margin-left: 0; }
}

/* ---------- Credit checkout / order-review modal ---------- */
.co-modal { display: flex; flex-direction: column; gap: 16px; }
.co-item {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--surface-2);
}
.co-item-ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 22px; background: var(--grad); color: #fff;
}
.co-item-main { flex: 1; min-width: 0; }
.co-item-title { font-weight: 700; font-size: 15px; }
.co-item-sub { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.co-bonus { color: var(--success); font-weight: 600; }
.co-item-price { font-weight: 800; font-size: 17px; white-space: nowrap; }

.co-coupon {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 10px 12px;
}
.co-coupon .coupon-input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1.5px solid var(--border-strong);
  border-radius: 9px; background: var(--surface); color: var(--text); font-size: 14px;
}
.co-coupon .coupon-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.co-coupon.applied {
  justify-content: space-between; border-style: solid; border-color: var(--success); background: rgba(16,185,129,.08);
}
.co-coupon-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.co-coupon-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 13px;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 3px 9px;
}
.co-coupon-msg { font-size: 13px; font-weight: 600; color: var(--success); }
.co-coupon-err { font-size: 12.5px; color: var(--danger, #ef4444); font-weight: 600; margin: -8px 2px 0; }

.co-summary { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.co-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--text-2); gap: 12px; }
.co-line span:last-child { font-variant-numeric: tabular-nums; }
.co-discount { color: var(--success); font-weight: 600; }
.co-total {
  margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--border-strong);
  font-size: 16px; font-weight: 800; color: var(--text);
}
.co-total span:last-child { font-size: 19px; }
.co-free {
  color: var(--success); font-weight: 800; letter-spacing: .04em;
  background: rgba(16,185,129,.12); border-radius: 7px; padding: 2px 10px;
}
.co-note { font-size: 12.5px; color: var(--text-2); text-align: center; line-height: 1.5; }

.usage-bar { height: 8px; background: var(--bg-2); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.usage-fill { height: 100%; background: var(--grad); border-radius: 6px; }

/* ---------- Settings ----------
   Identity hero on top, then description/control section rows (a 260px explainer
   column beside the card that actually holds the inputs) so the page uses the
   width of .content instead of stranding a 640px column against 600px of blank. */
.settings-page { max-width: 1080px; }

.set-hero {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 26px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(99, 102, 241, .11), rgba(139, 92, 246, .09)), var(--surface);
  border: 1px solid rgba(99, 102, 241, .22);
  box-shadow: var(--shadow-sm);
}
.set-hero-main { flex: 1 1 260px; min-width: 0; }
.set-hero-main h2 {
  margin: 0; font-size: 25px; font-weight: 760; letter-spacing: -0.025em;
  line-height: 1.2; word-break: break-word;
}
.set-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: none; }
.set-hero-actions .btn { justify-content: flex-start; }
.set-hero-actions .set-hint { text-align: center; font-size: 11.5px; }

/* The logo tile doubles as the upload affordance for admins — a plain <img> gave no
   hint it was replaceable, so the only route was the button beside it. */
.set-logo {
  position: relative; width: 96px; height: 96px; flex: none; padding: 0; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}
.set-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.set-logo { cursor: pointer; }
/* The tile is itself an upload trigger, so it needs its own in-flight state — the
   spinner in the button beside it isn't where the user clicked. */
.set-logo.busy { opacity: .5; pointer-events: none; }
button.set-logo:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 3px; }
.set-logo-ov {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; background: rgba(15, 23, 42, .58); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  opacity: 0; transition: opacity .16s ease;
}
button.set-logo:hover .set-logo-ov, button.set-logo:focus-visible .set-logo-ov { opacity: 1; }
.set-logo-ov svg { width: 18px; height: 18px; }
/* On touch there is no hover, so the tile would read as a plain image — show a
   permanent bottom scrim instead of the full dimming panel. */
@media (hover: none) {
  button.set-logo .set-logo-ov {
    opacity: 1; justify-content: flex-end; padding-bottom: 7px;
    background: linear-gradient(to top, rgba(15, 23, 42, .7), transparent 58%);
  }
  button.set-logo .set-logo-ov svg { display: none; }
}

.set-url {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, .8); color: var(--text-2);
  font-size: 13px; font-weight: 650; font-family: inherit;
  transition: border-color .15s, color .15s;
}
.set-url svg { width: 14px; height: 14px; flex: none; }
button.set-url:hover { border-color: var(--primary); color: var(--primary-600); }

.set-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.set-fact {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, .75); color: var(--text-2);
  font-size: 12.5px; font-weight: 650;
}
.set-fact b { color: var(--text); font-weight: 750; }
.set-fact .sd { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }

.set-sec { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: start; margin-bottom: 20px; }
.set-sec-desc { padding-top: 4px; }
.set-sec-desc h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.set-sec-desc p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.set-sec .card-body > .field:last-of-type { margin-bottom: 16px; }
/* Cards here are ~700px wide; a full-bleed text input is wider than any other input
   in the product. The paired country/state fields are already halved by .field-row. */
.set-sec .field input, .set-sec .field select { max-width: 460px; }
.set-sec .field-row .field input, .set-sec .field-row .field select { max-width: none; }
.set-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.set-hint { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

.set-note {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  padding: 11px 13px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.set-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--primary); }
.set-note b { color: var(--text); }

.set-rows { display: flex; flex-direction: column; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.set-row:first-child { padding-top: 0; }
.set-row:last-child { padding-bottom: 0; border-bottom: none; }
.set-row-k { font-size: 13px; font-weight: 600; color: var(--text-2); flex: none; }
.set-row-v { font-size: 14px; font-weight: 650; text-align: right; min-width: 0; word-break: break-word; }
.set-row-v .link { font-size: 13px; color: var(--primary-600); font-weight: 650; background: none; border: none; padding: 0; }
.set-row-v .link:hover { text-decoration: underline; }

.set-sec-danger .card { border-color: rgba(239, 68, 68, .3); }
.set-sec-danger .card-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 1080px) {
  .set-sec { grid-template-columns: 1fr; gap: 12px; }
  .set-sec-desc { padding-top: 0; }
}
@media (max-width: 620px) {
  .set-hero { gap: 16px; padding: 18px; }
  .set-hero-main h2 { font-size: 21px; }
  /* .field-row is a fixed 1fr 1fr grid with no global collapse — two selects side by
     side on a phone leave no room for the country labels. */
  .set-sec .field-row { grid-template-columns: 1fr; }
  /* Side-by-side buttons with the file-type hint dropped onto its own full-width line —
     as a third flex sibling it took a third of 375px and wrapped to three lines. */
  .set-hero-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .set-hero-actions .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }
  .set-hero-actions .set-hint { flex: 1 0 100%; text-align: left; }
  .set-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .set-row-v { text-align: left; }
}

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--text); color: #fff; padding: 13px 18px; border-radius: 12px; font-size: 14px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: toastIn .22s ease; max-width: 360px; }
.toast.success { background: #065f46; }
.toast.error { background: #991b1b; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* spinner */
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner.dark { border-color: rgba(99,102,241,.25); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }
.center-load { display: grid; place-items: center; padding: 80px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .grid-2, .grid-2.even { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .app.active { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .22s; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: inline-grid !important; }
  /* Tighter topbar so the primary action never clips off-screen. */
  .topbar { padding: 12px 14px; gap: 10px; }
  .search-box { flex: 1 1 auto; min-width: 0; }
  .search-box input { width: 100%; min-width: 90px; max-width: none; }
  .topbar .btn { flex: none; white-space: nowrap; }
  .content { padding: 18px; }
  .detail-grid, .cat-grid { grid-template-columns: 1fr; }
  .client-table .hide-sm { display: none; }
}
.menu-btn { display: none; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--border-strong); background: var(--surface); }

/* ===================== AI Assistant (Rilono AI Assistant) ===================== */
.ai-pill { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; padding: 2px 6px; border-radius: 999px; margin-left: auto; }
.beta-pill { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(245, 158, 11, .12); color: #b45309; border: 1px solid rgba(245, 158, 11, .35); padding: 1px 6px; border-radius: 999px; margin-left: auto; }
.ai-wrap { display: flex; flex-direction: column; gap: 14px; height: calc(100vh - 142px); max-width: 880px; margin: 0 auto; }
.ai-head { display: flex; gap: 14px; align-items: center; }
.ai-head h2 { font-size: 18px; font-weight: 750; margin: 0; }
.ai-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.ai-head-actions { margin-left: auto; display: flex; gap: 8px; flex: none; align-self: flex-start; }

/* Saved-thread history (modal list shared by the full view and the dock) */
.ai-hist-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; }
.ai-hist-row { display: flex; align-items: stretch; gap: 6px; }
.ai-hist-main { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.ai-hist-main:hover { border-color: var(--primary); background: rgba(99, 102, 241, .06); }
.ai-hist-row.current .ai-hist-main { border-color: var(--primary); background: rgba(99, 102, 241, .08); }
.ai-hist-title { font-size: 13.5px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-hist-meta { font-size: 12px; color: var(--muted); }
.ai-hist-del { flex: none; width: 38px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: all .15s ease; }
.ai-hist-del svg { width: 15px; height: 15px; }
.ai-hist-del:hover { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, .07); }
.ai-hist-empty { padding: 26px 14px; text-align: center; font-size: 13px; color: var(--muted); }
.ai-hist-note { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }
.ai-orb { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 8px 22px rgba(99, 102, 241, .3); flex: none; }
.ai-orb.lg { width: 64px; height: 64px; font-size: 30px; border-radius: 18px; margin: 0 auto 14px; }
.ai-thread { flex: 1; overflow-y: auto; padding: 8px 4px; display: flex; flex-direction: column; gap: 14px; }
.ai-empty { margin: auto; text-align: center; max-width: 430px; }
.ai-empty h3 { margin: 0 0 6px; font-size: 18px; color: var(--text); }
.ai-empty p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.ai-msg { display: flex; gap: 10px; align-items: flex-start; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.bot .ai-av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 15px; flex: none; }
.ai-bubble { max-width: 76%; padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.6; word-wrap: break-word; }
.ai-msg.user .ai-bubble { background: linear-gradient(135deg, #6366f1, #7c3aed); color: #fff; border-bottom-right-radius: 5px; }
.ai-msg.bot .ai-bubble { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 5px; }
.ai-bubble p { margin: 0 0 8px; } .ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble ul { margin: 4px 0 8px; padding-left: 18px; } .ai-bubble li { margin: 3px 0; }
.ai-bubble strong { font-weight: 700; }
.ai-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: aiblink 1.2s infinite both; }
.ai-typing i:nth-child(2) { animation-delay: .2s; } .ai-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes aiblink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip { font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: all .15s ease; }
.ai-chip:hover { border-color: var(--primary); color: var(--primary-600); background: rgba(99, 102, 241, .06); }
.ai-input { display: flex; gap: 10px; align-items: flex-end; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 9px 9px 9px 16px; box-shadow: var(--shadow-sm); }
.ai-input textarea { flex: 1; border: none; outline: none; resize: none; background: transparent; font: inherit; font-size: 14.5px; color: var(--text); max-height: 160px; line-height: 1.5; padding: 7px 0; }
.ai-send { width: 40px; height: 40px; border-radius: 11px; border: none; background: linear-gradient(135deg, #6366f1, #7c3aed); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: filter .15s ease; }
.ai-send:hover { filter: brightness(1.08); } .ai-send:disabled { opacity: .5; cursor: not-allowed; }
.ai-disclaimer { text-align: center; font-size: 11.5px; color: var(--muted); }

/* ---------- Docked assistant (bottom-right bubble) ----------
   Same conversation as the full assistant view, reachable from every other
   view. Everything is `aidock-`-prefixed: the shared pieces it borrows are
   only the message primitives (.ai-thread/.ai-msg/.ai-bubble/.ai-chip), so
   a bubble looks identical in the dock and on the full page.
   Layering: the bubble sits under the modal/drawer overlay (80) so a dialog
   always wins; the panel sits just under it at 78, above table popovers. */
.aidock { position: fixed; right: 24px; bottom: 24px; z-index: 68; }
.aidock.aidock-off { display: none; }

/* --- launcher --- */
.aidock-fab {
  position: relative; width: 58px; height: 58px; border-radius: 50%; border: none;
  background: var(--grad); color: #fff; display: grid; place-items: center;
  box-shadow: 0 14px 32px rgba(79, 70, 229, .38), 0 2px 6px rgba(15, 23, 42, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.aidock-fab:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 40px rgba(79, 70, 229, .45); }
.aidock-fab:active { transform: translateY(0); }
.aidock-fab:focus-visible { outline: 3px solid rgba(99, 102, 241, .45); outline-offset: 3px; }
.aidock-ic { position: absolute; display: grid; place-items: center; transition: opacity .18s ease, transform .18s ease; }
.aidock-ic svg { width: 26px; height: 26px; display: block; }
.aidock-ic-down { opacity: 0; transform: scale(.7) rotate(-30deg); }
.aidock.is-open .aidock-ic-ai { opacity: 0; transform: scale(.7) rotate(30deg); }
.aidock.is-open .aidock-ic-down { opacity: 1; transform: none; }
/* Three quiet pulses on arrival, then it stops — a bubble that throbs forever
   is noise on a console people keep open all day. */
.aidock-fab-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary);
  opacity: 0; animation: aidockRing 2.6s ease-out 3;
}
.aidock.is-open .aidock-fab-ring { animation: none; }
@keyframes aidockRing {
  0% { opacity: .5; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.55); }
}
.aidock-dot {
  position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%;
  background: #f43f5e; border: 2.5px solid #fff; display: none;
}
.aidock-dot.on { display: block; }
.aidock-tip {
  position: absolute; right: 72px; bottom: 40px; white-space: nowrap;
  background: var(--text); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 9px; box-shadow: var(--shadow);
  opacity: 0; transform: translateX(6px); transition: opacity .16s ease, transform .16s ease; pointer-events: none;
}
.aidock:hover .aidock-tip { opacity: 1; transform: none; }
.aidock.is-open .aidock-tip { display: none; }

/* --- panel --- */
.aidock-panel {
  position: absolute; right: 0; bottom: 74px; z-index: 78;
  /* Tall as the viewport allows, but never up into the topbar — the console's
     search and "+ Add Client" stay clickable with the assistant open. */
  width: 396px; height: min(600px, calc(100vh - 158px));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .22); overflow: hidden;
  visibility: hidden; opacity: 0; transform: translateY(14px) scale(.98); transform-origin: 100% 100%;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.aidock.is-open .aidock-panel { visibility: visible; opacity: 1; transform: none; }
.aidock-head {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  background: var(--grad-deep); color: #fff; flex: none;
}
.aidock-orb { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); flex: none; }
.aidock-orb svg { width: 19px; height: 19px; }
.aidock-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.aidock-id b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.aidock-id small { font-size: 11.5px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aidock-acts { display: flex; gap: 4px; flex: none; }
.aidock-act {
  width: 30px; height: 30px; border-radius: 9px; border: none; background: rgba(255, 255, 255, .14);
  color: #fff; display: grid; place-items: center; transition: background .15s ease;
}
.aidock-act:hover { background: rgba(255, 255, 255, .28); }
.aidock-act:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.aidock-act svg { width: 15px; height: 15px; }
.aidock-thread { padding: 14px; gap: 12px; background: var(--bg); }
.aidock-thread .ai-bubble { max-width: 88%; font-size: 13.5px; padding: 10px 13px; }
.aidock-thread .ai-orb.lg { width: 52px; height: 52px; font-size: 25px; border-radius: 16px; margin-bottom: 12px; }
.aidock-thread .ai-empty h3 { font-size: 16px; }
.aidock-thread .ai-empty p { font-size: 12.5px; }
.aidock-suggest { padding: 0 14px 12px; background: var(--bg); }
.aidock-suggest:empty { display: none; }
.aidock-suggest .ai-chip { font-size: 11.5px; padding: 6px 11px; text-align: left; }
.aidock-form { margin: 0 12px; border-radius: 14px; padding: 7px 7px 7px 13px; flex: none; }
.aidock-form textarea { font-size: 13.5px; max-height: 110px; }
.aidock-form .ai-send { width: 34px; height: 34px; border-radius: 10px; }
.aidock-form .ai-send svg { width: 18px; height: 18px; }
.aidock-foot { padding: 8px 14px 11px; text-align: center; font-size: 10.5px; color: var(--muted); flex: none; }

/* Toasts share this corner — lift them clear of the bubble, and step them left
   of the panel while it's open so an error is never hidden behind the chat. */
body.has-ai-dock .toast-wrap { bottom: 96px; }
body.ai-dock-open .toast-wrap { right: 444px; }

@media (max-width: 560px) {
  .aidock { right: 16px; bottom: 16px; }
  .aidock-panel {
    position: fixed; right: 0; left: 0; bottom: 0; width: auto;
    height: min(88vh, 640px); border-radius: 20px 20px 0 0; border-bottom: none;
    transform: translateY(20px);
  }
  /* On a phone the panel owns the screen — the launcher underneath it would
     just be a stray button floating over the composer. */
  .aidock.is-open .aidock-fab, .aidock.is-open .aidock-tip { display: none; }
  body.ai-dock-open .toast-wrap { right: 16px; bottom: auto; top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .aidock-fab-ring { animation: none; }
  .aidock-panel { transition: visibility .18s, opacity .18s ease; transform: none; }
  .aidock.is-open .aidock-panel { transform: none; }
}

/* ---------- Full-page client profile ---------- */
.client-page { max-width: 1000px; margin: 0 auto; }
.cp-actionbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cp-back { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-sm); padding: 8px 14px; font-weight: 600; font-size: 14px; }
.cp-back:hover { background: var(--surface-2); color: var(--text); }
.cp-hero {
  --cp-accent: #7dd3fc;
  --cp-accent-glow: rgba(56, 189, 248, .28);
  --cp-hero-image: linear-gradient(135deg, transparent, transparent);
  --cp-hero-overlay: linear-gradient(90deg, rgba(5, 12, 28, .97) 0%, rgba(6, 17, 38, .91) 41%, rgba(5, 15, 34, .48) 70%, rgba(3, 9, 22, .16) 100%);
  --cp-hero-position: center;
  min-height: 194px;
  border-radius: 20px;
  padding: 30px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  background-color: #10172a;
  background-image: var(--cp-hero-overlay), var(--cp-hero-image), var(--cp-hero-fallback);
  background-size: cover, cover, cover;
  background-position: center, var(--cp-hero-position), center;
  background-repeat: no-repeat;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
}
.cp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 54%, var(--cp-accent-glow), transparent 28%),
    linear-gradient(118deg, transparent 0 47%, rgba(255, 255, 255, .08) 47.15%, transparent 47.4%);
  opacity: .72;
  pointer-events: none;
}
.cp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .24));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  pointer-events: none;
}
.cp-hero--us { --cp-hero-image: url('/static/assets/enterprise/client-banners/us.jpg'); --cp-accent: #7dd3fc; --cp-accent-glow: rgba(14, 165, 233, .30); }
.cp-hero--ca { --cp-hero-image: url('/static/assets/enterprise/client-banners/ca.jpg'); --cp-accent: #fda4af; --cp-accent-glow: rgba(244, 63, 94, .28); --cp-hero-overlay: linear-gradient(90deg, rgba(31, 7, 16, .97) 0%, rgba(48, 10, 21, .90) 41%, rgba(35, 9, 20, .46) 70%, rgba(20, 6, 15, .14) 100%); }
.cp-hero--uk { --cp-hero-image: url('/static/assets/enterprise/client-banners/uk.jpg'); --cp-accent: #c4b5fd; --cp-accent-glow: rgba(139, 92, 246, .28); --cp-hero-overlay: linear-gradient(90deg, rgba(6, 13, 39, .97) 0%, rgba(12, 21, 60, .90) 41%, rgba(12, 17, 48, .45) 70%, rgba(6, 10, 28, .14) 100%); }
.cp-hero--au { --cp-hero-image: url('/static/assets/enterprise/client-banners/au.jpg'); --cp-accent: #5eead4; --cp-accent-glow: rgba(20, 184, 166, .30); --cp-hero-overlay: linear-gradient(90deg, rgba(3, 27, 40, .97) 0%, rgba(4, 43, 57, .89) 41%, rgba(3, 31, 45, .43) 70%, rgba(3, 18, 30, .12) 100%); }
.cp-hero--de { --cp-hero-image: url('/static/assets/enterprise/client-banners/de.jpg'); --cp-accent: #fbbf24; --cp-accent-glow: rgba(245, 158, 11, .24); --cp-hero-overlay: linear-gradient(90deg, rgba(11, 13, 19, .97) 0%, rgba(24, 23, 27, .91) 41%, rgba(24, 20, 21, .45) 70%, rgba(12, 10, 12, .13) 100%); }
.cp-hero--ie { --cp-hero-image: url('/static/assets/enterprise/client-banners/ie.jpg'); --cp-accent: #86efac; --cp-accent-glow: rgba(34, 197, 94, .29); --cp-hero-overlay: linear-gradient(90deg, rgba(3, 28, 24, .97) 0%, rgba(5, 43, 34, .90) 41%, rgba(5, 34, 28, .44) 70%, rgba(3, 20, 18, .12) 100%); }
.cp-hero--fr { --cp-hero-image: url('/static/assets/enterprise/client-banners/fr.jpg'); --cp-accent: #bfdbfe; --cp-accent-glow: rgba(37, 99, 235, .30); --cp-hero-overlay: linear-gradient(90deg, rgba(4, 16, 46, .97) 0%, rgba(6, 28, 74, .90) 41%, rgba(6, 24, 62, .45) 70%, rgba(3, 14, 38, .13) 100%); }
.cp-hero--es { --cp-hero-image: url('/static/assets/enterprise/client-banners/es.jpg'); --cp-accent: #fdba74; --cp-accent-glow: rgba(185, 28, 28, .30); --cp-hero-overlay: linear-gradient(90deg, rgba(38, 8, 6, .97) 0%, rgba(60, 13, 9, .90) 41%, rgba(48, 11, 8, .45) 70%, rgba(28, 7, 5, .13) 100%); }
.cp-hero--nl { --cp-hero-image: url('/static/assets/enterprise/client-banners/nl.jpg'); --cp-accent: #bae6fd; --cp-accent-glow: rgba(14, 165, 233, .30); --cp-hero-overlay: linear-gradient(90deg, rgba(3, 20, 34, .97) 0%, rgba(4, 31, 51, .90) 41%, rgba(4, 25, 42, .45) 70%, rgba(2, 14, 26, .13) 100%); }
.cp-hero--ae { --cp-hero-image: url('/static/assets/enterprise/client-banners/ae.jpg'); --cp-accent: #fcd34d; --cp-accent-glow: rgba(217, 119, 6, .28); --cp-hero-overlay: linear-gradient(90deg, rgba(28, 15, 4, .97) 0%, rgba(45, 25, 7, .90) 41%, rgba(36, 20, 6, .45) 70%, rgba(20, 11, 3, .13) 100%); }
.cp-hero--pl { --cp-hero-image: url('/static/assets/enterprise/client-banners/pl.jpg'); --cp-accent: #fca5a5; --cp-accent-glow: rgba(239, 68, 68, .28); --cp-hero-overlay: linear-gradient(90deg, rgba(26, 6, 6, .97) 0%, rgba(45, 10, 10, .90) 41%, rgba(36, 9, 9, .45) 70%, rgba(20, 5, 5, .13) 100%); }
.cp-hero--nz { --cp-hero-image: url('/static/assets/enterprise/client-banners/nz.jpg'); --cp-accent: #6ee7b7; --cp-accent-glow: rgba(52, 211, 153, .30); --cp-hero-overlay: linear-gradient(90deg, rgba(2, 24, 18, .97) 0%, rgba(4, 38, 28, .90) 41%, rgba(3, 30, 23, .44) 70%, rgba(2, 17, 13, .13) 100%); }
.cp-hero--sg { --cp-hero-image: url('/static/assets/enterprise/client-banners/sg.jpg'); --cp-accent: #f9a8d4; --cp-accent-glow: rgba(236, 72, 153, .28); --cp-hero-overlay: linear-gradient(90deg, rgba(31, 4, 17, .97) 0%, rgba(50, 8, 27, .90) 41%, rgba(40, 7, 22, .45) 70%, rgba(22, 3, 12, .13) 100%); }
.cp-hero--it { --cp-hero-image: url('/static/assets/enterprise/client-banners/it.jpg'); --cp-accent: #fed7aa; --cp-accent-glow: rgba(249, 115, 22, .28); --cp-hero-overlay: linear-gradient(90deg, rgba(31, 10, 3, .97) 0%, rgba(52, 18, 6, .90) 41%, rgba(41, 14, 5, .45) 70%, rgba(23, 8, 3, .13) 100%); }
.cp-hero--se { --cp-hero-image: url('/static/assets/enterprise/client-banners/se.jpg'); --cp-accent: #fde047; --cp-accent-glow: rgba(234, 179, 8, .26); --cp-hero-overlay: linear-gradient(90deg, rgba(4, 18, 28, .97) 0%, rgba(7, 31, 46, .90) 41%, rgba(6, 25, 37, .45) 70%, rgba(3, 14, 21, .13) 100%); }
.cp-hero--intl { --cp-accent: #c4b5fd; --cp-accent-glow: rgba(139, 92, 246, .28); }
.cp-destination-seal {
  width: 76px;
  height: 82px;
  border-radius: 22px;
  flex: none;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  background: rgba(7, 12, 26, .44);
  border: 1px solid rgba(255, 255, 255, .30);
  border-top-color: var(--cp-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 12px 28px rgba(3, 7, 18, .18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cp-destination-seal > span {
  color: rgba(255, 255, 255, .68);
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-align: center;
}
/* "US" + flag as one centered, optically-aligned unit (was two split grid columns). */
.cp-seal-code { display: flex; align-items: center; justify-content: center; gap: 4px; }
.cp-destination-seal strong { font-size: 26px; line-height: 1; letter-spacing: -.03em; }
.cp-destination-seal small { font-size: 15px; line-height: 1; filter: saturate(.92); }
.cp-hmeta { position: relative; z-index: 1; flex: 1; min-width: 0; }
.cp-kicker { margin-bottom: 8px; color: var(--cp-accent); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.cp-hmeta h1 { margin: 0; font-size: 29px; line-height: 1.12; letter-spacing: -.025em; text-shadow: 0 2px 16px rgba(0, 0, 0, .24); }
.cp-hsub { max-width: 560px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .84); margin-top: 7px; text-wrap: balance; }
.cp-hstatus { position: relative; z-index: 1; flex: none; align-self: flex-start; margin-top: 4px; }
/* On the colored gradient hero the faint tinted pill is illegible, so use a frosted
   white badge (white text + the stage colour kept only on the dot). !important beats
   the inline background/color statusPill() sets for the light-background contexts. */
.cp-hstatus .status-pill {
    background: rgba(255, 255, 255, .20) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .38);
    padding: 7px 14px;
    font-weight: 700;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.cp-hstatus .status-pill .sd {
    width: 8px; height: 8px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
/* Case tabs. There are nine of them and they need ~1130px, so on any real screen they
   used to overflow into a horizontally scrolling strip — which hides tabs behind an
   affordance nobody sees. They wrap instead, and wrapping rules out the underline
   indicator (a second row's underline would float away from the container's bottom
   border), so the active tab is a raised pill inside a tinted track. */
.cp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 4px;
    margin: 22px 0 20px;
}
.cp-tab {
    flex: 0 1 auto;
    min-width: 0;
    background: none;
    border: none;
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text-2);
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cp-tab:hover { color: var(--text); background: rgba(99, 102, 241, .07); }
.cp-tab.active {
    color: var(--primary-600);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) {
    /* Narrow phones: let long labels share rows evenly rather than leaving ragged gaps. */
    .cp-tab { flex: 1 1 auto; text-align: center; padding: 9px 10px; }
}
.cp-body { padding-bottom: 44px; }
.cp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.cp-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cp-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.cp-assign { width: 100%; margin-top: 2px; }

/* Inline (in-pane) "Edit details" form. It renders the same .mw-grid intake form as the
   Add-client modal, which relies on .field's own margin for its row rhythm — so the
   margin reset only applies to the legacy .detail-grid layout. */
.cp-edit-form .detail-grid > .field { margin-bottom: 0; }
.cp-edit-form .cpe-full { grid-column: 1 / -1; }
.cp-edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.cpe-hint { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.stage-flow .stage-step[data-key] { cursor: pointer; }

/* documents */
.doc-up-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.doc-up-row .select-mini { min-width: 220px; }
.doc-file { flex: 1; min-width: 200px; font-size: 13px; color: var(--text-2); }
.doc-hint { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* Upload-time opt-in for the billed Rilono AI scan. Styled as a distinct panel, not a
   stray checkbox, because ticking it spends the agency's credits — the price sits on the
   same row as the choice so it can never be agreed to without being seen. */
.doc-scan-opt {
  display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; padding: 11px 13px;
  border: 1.5px solid rgba(99, 102, 241, .32); border-radius: 11px;
  background: rgba(99, 102, 241, .05); cursor: pointer;
}
.doc-scan-opt:hover { border-color: rgba(99, 102, 241, .5); background: rgba(99, 102, 241, .08); }
.doc-scan-opt.disabled { cursor: not-allowed; border-color: var(--border-strong); background: rgba(100, 116, 139, .06); }
.doc-scan-opt.disabled:hover { border-color: var(--border-strong); background: rgba(100, 116, 139, .06); }
.doc-scan-opt input[type="checkbox"] { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--primary); cursor: inherit; }
.doc-scan-opt-txt { flex: 1; min-width: 0; display: block; font-size: 13px; line-height: 1.45; color: var(--text); }
.doc-scan-opt-txt b { font-weight: 700; }
.doc-scan-opt-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.doc-scan-price {
  flex: none; align-self: center; white-space: nowrap; font-size: 11.5px; font-weight: 800;
  color: var(--primary-600, #4f46e5); background: rgba(99, 102, 241, .13);
  border: 1px solid rgba(99, 102, 241, .3); padding: 3px 10px; border-radius: 999px;
}
.doc-scan-opt.disabled .doc-scan-price { color: #475569; background: rgba(100, 116, 139, .12); border-color: rgba(100, 116, 139, .3); }
/* Per-document scan / re-scan action on the document card. */
.doc-scan-row { margin-top: 8px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.doc-scan-note { font-size: 11.5px; color: var(--muted); }

/* Searchable, destination-scoped document-type picker */
.docsel { position: relative; min-width: 300px; flex: 1; max-width: 420px; }
/* "Other" describe-it field — takes a full row under the picker (doc-up-row wraps). */
.docsel-other-wrap { flex-basis: 100%; margin-top: 2px; animation: docselOtherIn .18s ease; }
@keyframes docselOtherIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.docsel-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); font-size: 13.5px; color: var(--text); outline: none; }
.docsel-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.docsel-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 55; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 20px 50px rgba(15,23,42,.16); max-height: 320px; overflow-y: auto; }
.docsel-item { padding: 9px 13px; cursor: pointer; border-bottom: 1px solid var(--border); }
.docsel-item:last-child { border-bottom: 0; }
.docsel-item:hover { background: rgba(99,102,241,.07); }
.docsel-item.active { background: rgba(99,102,241,.12); }
/* Keep the mock-interview student picker's suggestions within the modal (scroll for long lists). */
#sendIvMenu { max-height: min(300px, 40vh); }
.docsel-line { display: flex; align-items: center; gap: 8px; }
.docsel-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.docsel-req { flex: none; margin-left: auto; font-size: 10.5px; font-weight: 800; color: #b45309; background: rgba(245,158,11,.14); padding: 2px 8px; border-radius: 999px; }
.docsel-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.docsel-empty { padding: 12px 13px; font-size: 12.5px; color: var(--muted); }

/* Doc-request modal: filter + required badge */
.docreq-filter { width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 9px 12px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); font-size: 13.5px; outline: none; }
.docreq-filter:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.docreq-req { font-size: 10.5px; font-weight: 800; color: #b45309; background: rgba(245,158,11,.14); padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.doc-list { display: grid; gap: 10px; }
.doc-card { display: flex; align-items: flex-start; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; box-shadow: var(--shadow-sm); }
.doc-ic { font-size: 26px; flex: none; line-height: 1; margin-top: 1px; }
.doc-meta { flex: 1; min-width: 0; }
.doc-name { display: block; font-weight: 650; color: var(--text); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-name:hover { color: var(--primary-600); text-decoration: underline; }
.doc-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Rilono AI per-document validation + profile auto-fill */
.doc-val { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; }
.doc-val-badge { padding: 2px 9px; border-radius: 999px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.doc-val.ok .doc-val-badge { background: rgba(16, 185, 129, .12); color: #047857; border-color: rgba(16, 185, 129, .4); }
.doc-val.warn .doc-val-badge { background: rgba(245, 158, 11, .14); color: #92400e; border-color: rgba(245, 158, 11, .45); }
.doc-accept-row { margin-top: 8px; }
.doc-val.muted .doc-val-badge { background: rgba(100, 116, 139, .12); color: #475569; border-color: rgba(100, 116, 139, .35); }
.doc-val.pending .doc-val-badge { background: rgba(99, 102, 241, .1); color: #4338ca; border-color: rgba(99, 102, 241, .35); }
/* Human override — cleared by staff, not by Rilono AI. Deliberately a different hue from
   the green AI badge so the two are never confused at a glance. */
.doc-val.manual .doc-val-badge { background: rgba(37, 99, 235, .1); color: #1d4ed8; border-color: rgba(37, 99, 235, .38); }
.doc-val-msg { color: var(--muted); font-size: 12px; }
.doc-af { margin-top: 6px; font-size: 12.5px; color: #047857; font-weight: 600; }
.doc-af b { font-weight: 700; }
.doc-cf { margin-top: 6px; font-size: 12px; color: #92400e; background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .3); border-radius: 8px; padding: 7px 10px; }
.doc-cf-item { font-weight: 500; margin-top: 3px; }
/* The same flags after a human override: kept for the audit trail, toned down so they
   don't read as an open issue. */
.doc-cf.overridden { color: #475569; background: rgba(100, 116, 139, .07); border-color: rgba(100, 116, 139, .28); }
.doc-act { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); flex: none; font-size: 14px; text-decoration: none; }
.doc-act:hover { background: var(--bg-2); color: var(--text); }
.doc-del:hover { background: rgba(239,68,68,.1); color: var(--danger); border-color: rgba(239,68,68,.3); }
@media (max-width: 720px) {
  .cp-hero {
    min-height: 238px;
    padding: 22px;
    flex-wrap: wrap;
    align-content: flex-end;
    gap: 14px;
    background-position: center, 68% center, center;
  }
  .cp-hero { --cp-hero-overlay: linear-gradient(112deg, rgba(5, 12, 28, .97) 0%, rgba(5, 12, 28, .88) 48%, rgba(5, 12, 28, .48) 100%); }
  .cp-destination-seal { width: 66px; height: 70px; border-radius: 18px; padding: 10px 11px 8px; }
  .cp-destination-seal strong { font-size: 23px; }
  .cp-destination-seal small { font-size: 14px; }
  .cp-kicker { margin-bottom: 6px; }
  .cp-hmeta h1 { font-size: 23px; }
  .cp-hsub { font-size: 12.5px; }
  .cp-hstatus { width: 100%; }
}

/* ---------- Client profile tab polish ---------- */
.cp-sub-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }

/* Secure document requests */
.doc-req-card { border-left: 3px solid var(--primary); }
.docreq-list { display: grid; gap: 7px; }
.docreq-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.docreq-item.done { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.06); }
.docreq-checks { display: grid; gap: 8px; max-height: 280px; overflow-y: auto; padding: 2px; }
.docreq-check { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 9px 12px; border: 1.5px solid var(--border-strong); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.docreq-check:hover { border-color: var(--primary); background: rgba(99,102,241,.05); }
.docreq-check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex: none; }

/* Note & email composers */
.note-add textarea,
.note-add input[type="text"],
.note-add input[type="email"],
.note-add input:not([type]) {
  width: 100%;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.note-add textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.note-add textarea:focus,
.note-add input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .14);
}
.note-add textarea::placeholder,
.note-add input::placeholder { color: var(--muted); }
.note-add .btn { align-self: flex-start; }
.note-add .email-to { font-size: 12.5px; color: var(--muted); }
.note-add .email-to b { color: var(--text-2); font-weight: 650; }

/* ===========================================================================
   Email composer (client profile → Emails tab)
   A mail-client-style card: recipient header, subject, formatting toolbar,
   rich-text body, attachment chips, action footer.
   =========================================================================== */
.emc {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s;
}
.emc:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow); }

.emc-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.emc-to-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.emc-recipient {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 5px 12px 5px 5px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; font-size: 13.5px;
}
.emc-recipient b { font-weight: 650; white-space: nowrap; }
.emc-av {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.emc-email {
  color: var(--muted); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px;
}

.emc-subject {
  width: 100%; border: none; border-bottom: 1px solid var(--border);
  padding: 15px 18px; font-family: var(--font);
  font-size: 16px; font-weight: 650; color: var(--text);
  background: transparent; outline: none;
}
.emc-subject::placeholder { color: var(--muted); font-weight: 500; }
.emc-subject:focus { background: rgba(99, 102, 241, .03); }

.emc-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.emc-tb {
  display: grid; place-items: center;
  min-width: 30px; height: 30px; padding: 0 7px;
  border: none; border-radius: 8px; background: transparent;
  color: var(--text-2); font-size: 14px; line-height: 1;
  transition: background .14s, color .14s;
}
.emc-tb:hover { background: rgba(99, 102, 241, .1); color: var(--primary-600); }
.emc-tb.active { background: rgba(99, 102, 241, .16); color: var(--primary-700); }
.emc-tb b, .emc-tb i, .emc-tb u { font-size: 14.5px; }
.emc-tb svg { display: block; }
.emc-tb-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 6px; }

.emc-editor {
  min-height: 168px; max-height: 460px; overflow-y: auto;
  padding: 16px 18px;
  font-size: 14.5px; line-height: 1.7; color: var(--text);
  outline: none;
}
.emc-editor.is-empty::before {
  content: attr(data-placeholder);
  color: var(--muted); pointer-events: none;
}
.emc-editor > *:first-child { margin-top: 0; }
.emc-editor p { margin: 0 0 12px; }
.emc-editor ul, .emc-editor ol { margin: 0 0 12px; padding-left: 24px; }
.emc-editor li { margin-bottom: 5px; }
.emc-editor h2, .emc-editor h3, .emc-editor h4 { margin: 16px 0 8px; line-height: 1.35; font-weight: 700; }
.emc-editor h3 { font-size: 16.5px; }
.emc-editor a { color: var(--primary-600); text-decoration: underline; }
.emc-editor blockquote {
  margin: 0 0 12px; padding: 4px 0 4px 14px;
  border-left: 3px solid rgba(99, 102, 241, .4); color: var(--text-2);
}
/* Pasted tables (fee breakdowns out of Excel/Word) — same look in the composer
   and in the sent-message thread. */
.emc-editor table, .em-msg-body table {
  border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: 13.5px;
}
.emc-editor th, .emc-editor td,
.em-msg-body th, .em-msg-body td {
  border: 1px solid var(--border); padding: 7px 10px; text-align: left;
}
.emc-editor th, .em-msg-body th { background: var(--surface-2); font-weight: 700; }

.emc-atts {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.emc-chip {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; padding: 7px 8px 7px 11px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; font-size: 12.5px;
}
.emc-chip-name {
  font-weight: 600; color: var(--text);
  max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.emc-chip-meta { color: var(--muted); font-variant-numeric: tabular-nums; }
.emc-chip-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--primary-600); background: rgba(99, 102, 241, .12);
  border-radius: 5px; padding: 2px 6px;
}
.emc-chip-x {
  border: none; background: transparent; color: var(--muted);
  font-size: 12px; line-height: 1; padding: 4px 5px; border-radius: 6px;
  transition: background .14s, color .14s;
}
.emc-chip-x:hover { background: rgba(239, 68, 68, .12); color: var(--danger); }
.emc-chip.is-uploading { border-style: dashed; }
.emc-chip.is-error { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .05); }
.emc-chip.is-error .emc-chip-meta { color: var(--danger); font-weight: 600; }
.emc-chip-bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--primary); transition: width .2s ease;
}

.emc-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.emc-foot-spacer { flex: 1; }
.emc-send { display: inline-flex; align-items: center; gap: 7px; }
.emc-send svg { display: block; }
.emc-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); font-size: 13px; font-weight: 600; font-family: var(--font);
  transition: border-color .15s, background .15s, color .15s;
}
.emc-tool:hover { border-color: var(--primary); color: var(--primary-600); background: rgba(99, 102, 241, .05); }
.emc-tool-sm { padding: 5px 11px; font-size: 12.5px; }
.emc-tool-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.emc-tool-ghost:hover { background: rgba(239, 68, 68, .08); border-color: transparent; color: var(--danger); }
.emc-att-note { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.emc-hint {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 0 16px 13px; font-size: 12px; color: var(--muted);
}
.emc-hint b { color: var(--text-2); font-weight: 650; }

/* Template / insert-detail dropdowns */
.emc-menu-wrap { position: relative; }
.emc-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: 288px; max-height: 320px; overflow-y: auto;
  padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 13px; box-shadow: var(--shadow-lg);
}
.emc-menu-right { left: auto; right: 0; }
.emc-menu-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 7px 10px 5px;
}
.emc-menu-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 9px;
  background: transparent; text-align: left; font-family: var(--font);
  transition: background .14s;
}
.emc-menu-item:hover { background: rgba(99, 102, 241, .08); }
.emc-menu-item b { display: block; font-size: 13.5px; font-weight: 650; color: var(--text); }
.emc-menu-item small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.emc-menu-item.is-compact small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px;
}
.emc-menu-ic { font-size: 16px; line-height: 1.35; flex: none; }

/* Drag & drop */
.emc-dropzone {
  position: absolute; inset: 0; z-index: 30;
  display: none; place-items: center;
  background: rgba(99, 102, 241, .09);
  backdrop-filter: blur(2px);
  border: 2px dashed var(--primary); border-radius: var(--radius);
}
.emc.is-dragging .emc-dropzone { display: grid; }
.emc-dropzone > div {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 13.5px; font-weight: 650; color: var(--primary-700);
}

/* ---------- Conversation thread ---------- */
.emt-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 4px 0 14px;
}
.emt-title { font-size: 13px; font-weight: 700; color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; }
.emt-count {
  min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-2); font-size: 11.5px; font-weight: 700;
}
.emt-filters { display: inline-flex; gap: 5px; }
.emt-chip {
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  font-family: var(--font); transition: border-color .15s, background .15s, color .15s;
}
.emt-chip:hover { border-color: var(--primary); color: var(--primary-600); }
.emt-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.emt-search {
  flex: 1; min-width: 180px; max-width: 320px; margin-left: auto;
  padding: 8px 13px; font-family: var(--font); font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.emt-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .13); }

.em-thread { display: flex; flex-direction: column; gap: 12px; }
.em-msg {
  display: flex; gap: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 17px;
  transition: box-shadow .18s, border-color .18s;
}
.em-msg:hover { box-shadow: var(--shadow-sm); }
.em-msg.is-inbound { border-left: 3px solid var(--primary); background: rgba(99, 102, 241, .025); }
.em-msg.is-failed { border-color: rgba(239, 68, 68, .38); background: rgba(239, 68, 68, .03); }
.em-av {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  color: #fff; font-size: 12.5px; font-weight: 700;
}
.em-msg-main { flex: 1; min-width: 0; }
.em-msg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.em-msg-who { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
.em-msg-who b { font-size: 13.5px; font-weight: 650; color: var(--text); }
.em-msg-when { font-size: 12px; color: var(--muted); white-space: nowrap; flex: none; }
.em-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 5px; padding: 2px 6px;
}
.em-tag.is-fail { color: var(--danger); background: rgba(239, 68, 68, .12); }
.em-msg-subject { margin: 6px 0 7px; font-size: 14.5px; font-weight: 650; color: var(--text); }
.em-msg-body { font-size: 13.5px; line-height: 1.7; color: var(--text-2); overflow-wrap: anywhere; }
.em-msg-body > *:first-child { margin-top: 0; }
.em-msg-body > *:last-child { margin-bottom: 0; }
.em-msg-body p { margin: 0 0 10px; }
.em-msg-body ul, .em-msg-body ol { margin: 0 0 10px; padding-left: 22px; }
.em-msg-body li { margin-bottom: 4px; }
.em-msg-body a { color: var(--primary-600); text-decoration: underline; }
.em-msg-body h2, .em-msg-body h3, .em-msg-body h4 { margin: 13px 0 6px; font-size: 14.5px; color: var(--text); }
.em-msg-body blockquote {
  margin: 0 0 10px; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--border-strong); color: var(--muted);
}
.em-msg-body.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.em-more {
  margin-top: 7px; padding: 0; border: none; background: none;
  color: var(--primary-600); font-family: var(--font); font-size: 12.5px; font-weight: 650;
}
.em-more:hover { text-decoration: underline; }
.em-msg-atts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.em-att {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; max-width: 100%;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface-2); font-size: 12.5px; color: var(--text-2);
  transition: border-color .15s, background .15s;
}
.em-att:hover { border-color: var(--primary); background: rgba(99, 102, 241, .06); }
.em-att b {
  font-weight: 600; color: var(--text);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-att-size { color: var(--muted); }

@media (max-width: 720px) {
  .emc-head { padding: 11px 13px; }
  .emc-subject { padding: 13px 14px; font-size: 15px; }
  .emc-editor { padding: 14px; min-height: 150px; }
  .emc-toolbar { padding: 6px 8px; }
  .emc-foot { padding: 11px 13px; }
  .emc-hint { padding: 0 13px 12px; }
  .emc-menu { width: min(288px, calc(100vw - 48px)); }
  .emc-email { max-width: 150px; }
  /* Without the spacer, Discard sits beside the other actions instead of alone on a row. */
  .emc-foot-spacer { display: none; }
  /* Stack the footnotes rather than wrapping mid-sentence around the separators. */
  .emc-hint { flex-direction: column; align-items: flex-start; gap: 3px; }
  .emc-hint-sep { display: none; }
  .emt-search { margin-left: 0; max-width: none; }
  .em-msg { padding: 13px; gap: 10px; }
  .em-msg-top { flex-direction: column; gap: 2px; }
}

/* Documents uploader */
.doc-up-row { gap: 12px; align-items: stretch; }
.doc-up-row .select-mini { min-width: 230px; padding: 11px 14px; font-size: 14px; }
.doc-file {
  flex: 1; min-width: 200px;
  font-size: 13px; color: var(--text-2);
  background: var(--surface-2);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  display: flex; align-items: center;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.doc-file:hover { border-color: var(--primary); background: rgba(99, 102, 241, .04); }
.doc-file::file-selector-button {
  font-family: var(--font); font-weight: 650; font-size: 13px;
  color: var(--primary-600);
  background: rgba(99, 102, 241, .1);
  border: 1px solid rgba(99, 102, 241, .22);
  border-radius: 9px; padding: 8px 14px; margin-right: 12px;
  cursor: pointer; transition: background .15s;
}
.doc-file::file-selector-button:hover { background: rgba(99, 102, 241, .2); }
.doc-hint { display: flex; align-items: center; gap: 7px; }

/* Document cards */
.doc-card { transition: border-color .15s, box-shadow .15s; }
.doc-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.doc-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 20px;
}
.doc-act { transition: background .15s, color .15s, border-color .15s; }
.doc-del:hover { background: rgba(239, 68, 68, .12); color: var(--danger); border-color: rgba(239, 68, 68, .25); }

/* ---------- Info tip (ⓘ) ----------
   The icon sits inline next to a heading; the bubble is a single body-level layer
   (#infoTipPop, positioned in JS) so cards that clip their overflow can't cut it off. */
.info-tip {
  flex: none;
  width: 17px; height: 17px; padding: 0; margin-left: 2px;
  display: inline-grid; place-items: center; vertical-align: middle;
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
  font: 800 11px/1 var(--font); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.info-tip:hover, .info-tip:focus-visible, .info-tip[aria-expanded="true"] {
  background: var(--primary-600); border-color: transparent; color: #fff; transform: scale(1.08);
}
.info-tip:focus-visible { outline: 2px solid rgba(99, 102, 241, .45); outline-offset: 2px; }
.info-tip-pop {
  position: fixed; top: 0; left: 0; z-index: 400;
  width: max-content; max-width: min(340px, calc(100vw - 24px));
  padding: 11px 13px; border-radius: 12px;
  background: #101828; color: #e2e8f0;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .3);
  font-size: 12.25px; font-weight: 500; line-height: 1.6; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.info-tip-pop.flip { transform: translateY(4px); }
.info-tip-pop.show { opacity: 1; visibility: visible; transform: translateY(0); }
.info-tip-pop b { color: #fff; font-weight: 750; }
.info-tip-pop::after {
  content: ""; position: absolute; top: -4px; left: var(--tip-arrow, 50%);
  width: 9px; height: 9px; margin-left: -4.5px; border-radius: 2px;
  background: #101828; transform: rotate(45deg);
}
.info-tip-pop.flip::after { top: auto; bottom: -4px; }

/* Deep Scan: animate the actual private document instead of a generic illustration. */
.deep-scan-card {
  padding: 0;
  overflow: hidden;
  border-color: rgba(99, 102, 241, .25);
  box-shadow: 0 12px 34px rgba(71, 65, 154, .08);
}
.deep-scan-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: linear-gradient(120deg, rgba(99, 102, 241, .055), rgba(139, 92, 246, .025) 55%, transparent);
}
.deep-scan-copy { flex: 1; min-width: 220px; }
.deep-scan-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 780; color: var(--text); }
.deep-scan-title-icon {
  width: 29px; height: 29px; display: grid; place-items: center; flex: none;
  border-radius: 9px; color: #fff; font-size: 20px; font-weight: 900;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
  box-shadow: 0 7px 16px rgba(99, 102, 241, .24);
}
.deep-scan-description { margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.deep-scan-title .info-tip { margin-left: 0; }  /* the title row already supplies the gap */
.deep-scan-btn { flex: none; min-width: 188px; }
.deep-scan-visualizer {
  position: relative;
  padding: 24px;
  border-top: 1px solid rgba(99, 102, 241, .17);
  background:
    radial-gradient(circle at 8% 12%, rgba(56, 189, 248, .11), transparent 31%),
    radial-gradient(circle at 96% 92%, rgba(139, 92, 246, .12), transparent 36%),
    linear-gradient(145deg, #0f172a 0%, #17203a 54%, #15152f 100%);
  animation: dsv-reveal .28s ease-out both;
}
.dsv-layout {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(270px, 350px) minmax(320px, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 62px);
}
.dsv-document-column { min-width: 0; }
.dsv-document-topline, .dsv-file-meta, .dsv-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dsv-document-topline { margin-bottom: 10px; color: #c7d2fe; font-size: 11px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.dsv-live { display: inline-flex; align-items: center; gap: 7px; }
.dsv-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22d3ee;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .13), 0 0 16px rgba(34, 211, 238, .75);
  animation: dsv-pulse 1.5s ease-in-out infinite;
}
.dsv-count { color: #94a3b8; }
.dsv-document {
  position: relative;
  width: min(100%, 330px);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid rgba(165, 180, 252, .38);
  background: #e8edf5;
  box-shadow: 0 22px 52px rgba(2, 6, 23, .42), 0 0 0 6px rgba(99, 102, 241, .08);
  isolation: isolate;
}
.dsv-preview, .dsv-preview-image, .dsv-preview-pdf, .dsv-pdf-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dsv-preview { z-index: 0; overflow: hidden; background: #eef2f7; }
.dsv-preview-image { display: block; object-fit: contain; background: #fff; }
.dsv-preview-pdf { z-index: 1; border: 0; background: #fff; pointer-events: none; }
.dsv-pdf-fallback { z-index: 0; }
.dsv-file-fallback {
  width: 100%; height: 100%; box-sizing: border-box; padding: 34px 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #334155;
  background: linear-gradient(160deg, #fff, #e9eef7);
}
.dsv-file-icon { font-size: 52px; filter: drop-shadow(0 8px 12px rgba(15, 23, 42, .12)); }
.dsv-file-name { max-width: 100%; margin-top: 17px; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.dsv-file-note { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: #64748b; }
.dsv-grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .32;
  background-image:
    linear-gradient(rgba(34, 211, 238, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .09) 1px, transparent 1px);
  background-size: 34px 34px;
  mix-blend-mode: multiply;
}
.dsv-scan-beam {
  position: absolute; z-index: 4; left: -3%; right: -3%; top: 5%; height: 3px;
  background: linear-gradient(90deg, transparent, #67e8f9 12%, #fff 50%, #67e8f9 88%, transparent);
  box-shadow: 0 0 9px #22d3ee, 0 0 25px rgba(34, 211, 238, .9);
  animation: dsv-sweep 2.5s cubic-bezier(.42, 0, .58, 1) infinite alternate;
  pointer-events: none;
}
.dsv-scan-beam::before {
  content: "";
  position: absolute; left: 2%; right: 2%; bottom: 0; height: 74px;
  background: linear-gradient(to top, rgba(34, 211, 238, .23), transparent);
  transform: translateY(100%);
  opacity: .7;
}
.dsv-scan-beam span {
  position: absolute; right: 8%; top: -12px; width: 5px; height: 26px; border-radius: 99px;
  background: #fff; box-shadow: 0 0 18px 5px rgba(34, 211, 238, .8);
}
.dsv-corner { position: absolute; z-index: 5; width: 24px; height: 24px; pointer-events: none; border-color: #67e8f9; }
.dsv-corner.top-left { top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; border-radius: 5px 0 0; }
.dsv-corner.top-right { top: 10px; right: 10px; border-top: 2px solid; border-right: 2px solid; border-radius: 0 5px 0 0; }
.dsv-corner.bottom-left { bottom: 10px; left: 10px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 5px; }
.dsv-corner.bottom-right { right: 10px; bottom: 10px; border-right: 2px solid; border-bottom: 2px solid; border-radius: 0 0 5px; }
.dsv-file-meta { margin-top: 13px; color: #fff; }
.dsv-file-meta-copy { min-width: 0; display: flex; flex-direction: column; }
.dsv-file-meta-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.dsv-file-meta-copy span { margin-top: 3px; color: #94a3b8; font-size: 10.5px; }
.dsv-lock {
  flex: none; color: #a7f3d0; border: 1px solid rgba(52, 211, 153, .28);
  background: rgba(16, 185, 129, .12); border-radius: 999px; padding: 4px 9px;
  font-size: 9.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
}
.dsv-analysis { color: #fff; }
.dsv-eyebrow { color: #67e8f9; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.dsv-analysis h3 { margin: 8px 0 9px; color: #fff; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; }
.dsv-analysis > p { max-width: 520px; margin: 0 0 22px; color: #aebbd0; font-size: 13px; line-height: 1.65; }
.dsv-steps { display: grid; gap: 9px; }
.dsv-step {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .14); border-radius: 11px;
  background: rgba(255, 255, 255, .035); color: #94a3b8;
  transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.dsv-step > span {
  flex: none; width: 27px; height: 27px; display: grid; place-items: center;
  border: 1px solid rgba(148, 163, 184, .3); border-radius: 50%; font-size: 11px; font-weight: 850;
}
.dsv-step div { display: flex; flex-direction: column; min-width: 0; }
.dsv-step b { font-size: 12.5px; color: #cbd5e1; }
.dsv-step small { margin-top: 2px; font-size: 10.5px; color: #7f8da3; }
.dsv-step.active { color: #fff; border-color: rgba(34, 211, 238, .52); background: rgba(34, 211, 238, .09); transform: translateX(4px); }
.dsv-step.active > span { color: #07111f; border-color: #67e8f9; background: #67e8f9; box-shadow: 0 0 16px rgba(34, 211, 238, .35); }
.dsv-step.active b { color: #fff; }
.dsv-step.done > span { color: transparent; border-color: #34d399; background: #10b981; position: relative; }
.dsv-step.done > span::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.dsv-progress-row { margin-top: 19px; }
.dsv-progress-track { position: relative; height: 5px; flex: 1; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, .18); }
.dsv-progress-track span {
  position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, #67e8f9, #a78bfa, transparent);
  animation: dsv-progress 1.7s ease-in-out infinite;
}
.dsv-elapsed { min-width: 38px; text-align: right; color: #cbd5e1; font-size: 11px; font-variant-numeric: tabular-nums; }
.dsv-trust-note { display: flex; align-items: center; gap: 7px; margin-top: 13px; color: #8fa0b8; font-size: 10.5px; line-height: 1.45; }
.dsv-trust-note span { width: 17px; height: 17px; display: grid; place-items: center; flex: none; border-radius: 50%; color: #052e25; background: #6ee7b7; font-size: 10px; font-weight: 900; }
.deep-scan-visualizer.is-complete .dsv-scan-beam { top: 50%; animation: none; background: #6ee7b7; box-shadow: 0 0 12px #10b981, 0 0 30px rgba(16, 185, 129, .7); }
.deep-scan-visualizer.is-complete .dsv-progress-track span { left: 0; width: 100%; animation: none; background: linear-gradient(90deg, #10b981, #6ee7b7); }
.deep-scan-visualizer.is-error .dsv-scan-beam { animation-play-state: paused; background: #fb7185; box-shadow: 0 0 12px rgba(244, 63, 94, .75); }

@keyframes dsv-reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dsv-sweep { 0% { top: 5%; } 100% { top: 95%; } }
@keyframes dsv-progress { 0% { left: -35%; } 100% { left: 100%; } }
@keyframes dsv-pulse { 50% { opacity: .48; transform: scale(.82); } }

@media (max-width: 760px) {
  .deep-scan-head { align-items: stretch; flex-direction: column; }
  .deep-scan-btn { width: 100%; }
  .deep-scan-visualizer { padding: 20px 16px; }
  .dsv-layout { grid-template-columns: 1fr; gap: 28px; }
  .dsv-document { max-width: 280px; }
  .dsv-analysis h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .deep-scan-visualizer, .dsv-live-dot, .dsv-scan-beam, .dsv-progress-track span { animation: none !important; }
  .dsv-scan-beam { top: 50%; }
  .dsv-step { transition: none; }
}

/* ---------- Mock interview ---------- */
.ai-h { font-weight: 700; font-size: 13.5px; margin: 13px 0 5px; color: var(--text); }
.iv-intro { text-align: center; padding: 32px 24px; }
.iv-orb { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-size: 30px; background: var(--grad); box-shadow: 0 10px 30px rgba(99,102,241,.32); }
.iv-intro h3 { margin: 0 0 8px; font-size: 19px; }
.iv-intro p { color: var(--text-2); max-width: 560px; margin: 0 auto 20px; line-height: 1.6; }
.iv-start-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.iv-mode-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.iv-seg { border: none; background: transparent; color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 650; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.iv-seg:hover { color: var(--text); }
.iv-seg.active { background: var(--surface); color: var(--primary-600); box-shadow: 0 1px 3px rgba(15,23,42,.14); }
.iv-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 20px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); line-height: 1.5; }
.iv-tag { margin-top: 16px; font-size: 12.5px; color: var(--muted); }
/* Mock interview — SEND is the hero, staff run is a compact preview. */
.iv-hero { background: linear-gradient(160deg, var(--surface), var(--surface-2)); border-color: rgba(99,102,241,.28); box-shadow: 0 12px 34px rgba(99,102,241,.10); }
.iv-hero-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.iv-hero-head h3 { margin: 2px 0 0; font-size: 19px; }
.iv-hero-head .iv-orb { margin: 0; width: 52px; height: 52px; font-size: 25px; flex: none; }
.iv-hero-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-600); background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.26); padding: 3px 9px; border-radius: 999px; }
.iv-hero-badge--opt { color: var(--muted); background: rgba(100,116,139,.10); border-color: rgba(100,116,139,.24); }
.iv-hero-note { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.iv-hero-sub { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.iv-hero .btn-block { padding: 13px; font-size: 14.5px; }
.iv-hero .iv-tag { margin-top: 14px; }
.iv-invite-status { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.iv-invite-status .row { display: flex; gap: 8px; flex-wrap: wrap; }

.iv-preview { background: var(--surface-2); }
.iv-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.iv-preview-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.iv-prev-note { font-size: 12px; }
.iv-prev-free { color: #047857; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.25); font-weight: 700; padding: 3px 9px; border-radius: 999px; }

/* Overview quick-send CTA */
.cp-iv-cta { margin-bottom: 18px; padding: 13px; font-size: 14.5px; }
@media (max-width: 640px) { .iv-preview-row { flex-direction: column; align-items: flex-start; } }

.iv-slist { display: grid; gap: 8px; }
.iv-srow { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.iv-srow:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.iv-sv { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.iv-sv.ok { background: rgba(16,185,129,.14); color: #047857; }
.iv-sv.mid { background: rgba(245,158,11,.16); color: #b45309; }
.iv-sv.bad { background: rgba(239,68,68,.12); color: #b91c1c; }
.iv-smeta { flex: 1; min-width: 0; }
.iv-smeta b { display: block; font-size: 13.5px; }
.iv-smeta span { font-size: 12px; color: var(--muted); }
.iv-sarrow { color: var(--muted); font-weight: 700; }

.iv-chat { padding: 0; overflow: hidden; }
.iv-chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.iv-ctitle { font-weight: 650; font-size: 14px; }
.iv-cactions { display: flex; gap: 8px; }
.iv-thread { padding: 18px; max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; background: var(--bg); }
.iv-inrow { display: flex; gap: 10px; align-items: flex-end; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.iv-inrow textarea { flex: 1; resize: none; font-family: var(--font); font-size: 14.5px; color: var(--text); background: var(--surface-2); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 11px 14px; outline: none; max-height: 140px; line-height: 1.5; }
.iv-inrow textarea:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px rgba(99,102,241,.14); }
.iv-mic { width: 46px; flex: none; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--surface-2); font-size: 17px; }
.iv-mic:hover { border-color: var(--primary); }
.iv-mic.rec { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); animation: ivpulse 1.2s infinite; }
@keyframes ivpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); } 50% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } }
.iv-done { padding: 14px 18px; text-align: center; color: var(--text-2); font-size: 13.5px; border-top: 1px solid var(--border); background: var(--surface-2); }
.iv-feedback { line-height: 1.6; }
.iv-feedback ul { margin: 6px 0; padding-left: 20px; }
.iv-feedback li { margin: 3px 0; }
.iv-feedback p { margin: 6px 0; }

/* ---- Deep Scan audit report ---- */
.ds-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; font-size: 12.5px; color: var(--text-2); }
.ds-risk { display: flex; gap: 14px; align-items: flex-start; border-radius: 14px; padding: 15px 17px; margin-bottom: 16px; border: 1px solid; }
.ds-risk .ds-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-content: center; font-size: 21px; flex: none; }
.ds-risk .lvl { font-weight: 800; font-size: 15px; }
.ds-risk .why { color: var(--text-2); font-size: 13.5px; margin-top: 3px; line-height: 1.55; }
.ds-risk.high { background: #fef2f2; border-color: #fecaca; } .ds-risk.high .ds-ic { background: #fee2e2; }
.ds-risk.medium { background: #fffbeb; border-color: #fde68a; } .ds-risk.medium .ds-ic { background: #fef3c7; }
.ds-risk.low { background: #ecfdf5; border-color: #a7f3d0; } .ds-risk.low .ds-ic { background: #d1fae5; }
.ds-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.ds-stat { flex: 1; min-width: 110px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; }
.ds-stat b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.ds-stat span { font-size: 11px; color: var(--text-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ds-sec { margin-bottom: 18px; }
.ds-sec-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text); margin: 0 0 10px; }
.ds-sec-h .n { background: var(--bg-2); color: var(--text-2); font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 800; }
.ds-list { display: grid; gap: 8px; }
.ds-item { display: flex; gap: 11px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.ds-item .b { width: 22px; height: 22px; border-radius: 7px; display: grid; place-content: center; font-size: 12px; font-weight: 800; flex: none; margin-top: 1px; }
.ds-item.err .b { background: #fee2e2; color: #dc2626; }
.ds-item.miss .b { background: #fef3c7; color: #b45309; }
.ds-item .tag { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 6px; margin-right: 7px; vertical-align: 1.5px; }
.ds-clear { display: flex; align-items: center; gap: 9px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; border-radius: 11px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; }

/* Deep Scan tab: structured findings + stored scan history */
.ds-item.note .b { background: #e0e7ff; color: #4338ca; }
.ds-item.ok .b { background: #d1fae5; color: #059669; }
.ds-item-body { flex: 1; min-width: 0; }
.ds-item-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.ds-item-top .tag { margin-right: 0; vertical-align: baseline; }
.ds-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.ds-item-title { font-weight: 700; margin: 2px 0; }
.ds-item-detail { color: var(--text-2); margin: 2px 0 4px; }
.ds-evidence { margin: 7px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.ds-ev { font-size: 12.5px; background: var(--bg-2); border-left: 3px solid var(--border); padding: 5px 10px; border-radius: 0 8px 8px 0; color: var(--text-2); }
.ds-fix { font-size: 13px; margin-top: 5px; }
.ds-fix b { color: #047857; }
.ds-coverage { margin: 8px 0 12px; padding: 9px 12px; border-radius: 9px; background: rgba(245, 158, 11, .12); color: #b45309; font-size: 12.5px; font-weight: 600; border: 1px solid rgba(245, 158, 11, .28); }
.ds-hrow { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px; cursor: pointer; }
.ds-hrow:hover { background: var(--bg-2); }
.ds-hrow.active { background: rgba(99, 102, 241, .08); }
.ds-hrow .iv-sv { flex: none; }
.ds-hmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ds-hmain b { font-size: 13.5px; }
.ds-hmain span { font-size: 12px; color: var(--muted); }
.ds-hcredits { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }

/* Verdict + readiness badge header on the interview feedback */
.iv-fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 14px; }
.iv-verdict { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 5px 13px; border-radius: 999px; border: 1px solid; }
.iv-verdict::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.iv-v-green { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.iv-v-amber { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.iv-v-red { color: #be123c; background: #fef2f2; border-color: #fecaca; }
.iv-ready { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.iv-ready b { color: var(--text); font-weight: 700; }
.iv-dots { display: inline-flex; gap: 4px; }
.iv-dot { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; }
.iv-dot.on { background: var(--primary); }
.iv-invite-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13.5px; }
.iv-invite-status .row { gap: 8px; }

/* ---- Portal share modal (client read-only link) ---- */
.ps-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.ps-lead b { color: var(--text); font-weight: 700; }
.ps-status { display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin: 0 0 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; }
.ps-status-ic { width: 36px; height: 36px; flex: none; display: grid; place-content: center; border-radius: 11px; font-size: 16px; font-weight: 800; background: var(--bg-2); color: var(--muted); }
.ps-status-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-status-txt > b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ps-meta { font-size: 12px; line-height: 1.5; color: var(--muted); }
.ps-status.is-open { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.28); }
.ps-status.is-open .ps-status-ic { background: rgba(16,185,129,.16); color: #047857; }
.ps-status.is-open .ps-status-txt > b { color: #047857; }
.ps-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
.ps-actions .btn { flex: none; }
.ps-actions .ps-revoke { margin-left: auto; }
@media (max-width: 480px) {
  .ps-actions .btn { flex: 1 1 100%; }
  .ps-actions .ps-revoke { margin-left: 0; }
}

/* ===================== Calendar ===================== */
.cal-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .cal-wrap { grid-template-columns: 1fr; } }
.cal-main { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.cal-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-title { font-size: 19px; font-weight: 760; }
.cal-period { display: inline-flex; gap: 8px; }
.cal-select {
    appearance: none; -webkit-appearance: none;
    font-size: 18px; font-weight: 750; color: var(--text); cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 6px 30px 6px 12px; line-height: 1.3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cal-select:hover { border-color: var(--border-strong); }
.cal-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.cal-select-year { font-variant-numeric: tabular-nums; }
.cal-navbtns { display: flex; gap: 6px; }
.cal-navbtns .btn { min-width: 38px; padding: 7px 12px; }
.cal-toolbar > .btn-primary { margin-left: auto; }
/* Inset "board" behind the grid so the white day-cells read as distinct tiles instead
   of blending into the white card (fixes the low-contrast "white on white" look). */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 2px 0 6px; }
.cal-cell { min-height: 92px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px; background: #ffffff; box-shadow: 0 1px 2px rgba(15,23,42,.04); display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; overflow: hidden; }
.cal-cell:hover { border-color: rgba(99,102,241,.6); background: #f8f9ff; box-shadow: 0 3px 8px rgba(99,102,241,.12); }
.cal-cell.muted { background: #eef0f6; opacity: .75; border-color: var(--border); box-shadow: none; }
.cal-cell.today { border-color: var(--primary); background: #f5f6ff; box-shadow: 0 0 0 1px var(--primary) inset, 0 2px 8px rgba(99,102,241,.15); }
.cal-daynum { font-size: 12px; font-weight: 700; color: var(--text); align-self: flex-end; line-height: 1; }
.cal-cell.today .cal-daynum { color: var(--primary); }
.cal-ev { font-size: 11.5px; line-height: 1.25; padding: 3px 6px; border-radius: 6px; border-left: 3px solid var(--primary); background: #eef1ff; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-ev:hover { filter: brightness(0.97); }
.cal-ev b { font-weight: 700; }
.cal-ev.done { text-decoration: line-through; opacity: .55; }
.cal-ev.overdue { background: #fef2f2; }
.cal-more { font-size: 11px; color: var(--muted); font-weight: 600; padding-left: 2px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
/* Sits apart from the type keys — it qualifies the grid's bare clock times, it isn't one more colour. */
.cal-legend-tz { margin-left: auto; font-size: 12px; color: var(--text-2); font-weight: 650; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.cal-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: 0 2px 10px rgba(15,23,42,.05); position: sticky; top: 16px; }
.cal-side h3 { margin: 0 0 12px; font-size: 15px; }
.cal-upcoming { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow-y: auto; }
.cal-up-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 4px; }
.cal-up-label.overdue { color: var(--danger); }
.cal-up-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s; }
.cal-up-item:hover { background: #f6f7fb; }
.cal-up-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cal-up-meta b { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-up-meta span { font-size: 11.5px; color: var(--muted); }
.cal-up-when { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cal-up-when.overdue { color: var(--danger); }
.cal-up-empty { font-size: 13px; color: var(--muted); padding: 16px 4px; text-align: center; }

/* ---------- Dashboard layout ----------
   Every dashboard row is a grid whose cards share a bottom edge. The generic .grid-2 aligns
   its tracks to the start, which is right for the form-beside-summary pairings elsewhere but
   left the dashboard stepping raggedly down the page: a three-row card next to an eleven-row
   one ended wherever its content ran out. Here the track stretches and .card-body takes the
   slack, so a row is always a rectangle and the eye has a straight edge to follow. */
.dash-row { display: grid; gap: var(--dash-gap); margin-bottom: var(--dash-gap); }
.dash-row.even { grid-template-columns: 1fr 1fr; }
/* See the .grid-2 note above: an fr track is floored at its content's min-content width. */
.dash-row > * { min-width: 0; }
.dash-row > .card { display: flex; flex-direction: column; }
.dash-row > .card > .card-body { flex: 1 1 auto; }
.dash-row:last-child { margin-bottom: 0; }
/* Tiles keep their natural size and let the slack fall to the bottom of the card. Stretching
   them to fill instead would make a four-tile card's rows swell to twice a six-tile card's. */
.dash-row .cat-grid, .dash-row .country-grid { align-content: start; }

/* The visa pipeline is a fixed eleven stages — a single column of them stands twice as tall
   as anything that can sit beside it, which is what made the old row so lopsided. Given the
   full width it runs in two columns instead: every stage stays visible, and the card no
   longer dictates the height of its neighbour. renderDashboard sets --pipe-rows to half the
   stage count so the funnel still reads top-to-bottom down each column rather than snaking
   across. Below ~1024px the columns would be too narrow for the labels, so it folds back. */
.pipe-grid {
  display: grid; gap: 0 28px;
  grid-template-rows: repeat(var(--pipe-rows, 6), auto);
  grid-auto-flow: column; grid-auto-columns: 1fr;
}
@media (max-width: 1023px) {
  .pipe-grid { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; }
}
@media (max-width: 900px) {
  .dash-row.even { grid-template-columns: 1fr; }
}

/* Feed cards scroll past a shared ceiling, so one busy workspace cannot stretch a row to
   three screens while the card beside it holds four rows. */
.dash-feed { max-height: var(--dash-feed-h); overflow-y: auto; }

/* Dashboard "What's next" — the same feed, in a card instead of the calendar's sticky rail.
   Shorter than the rail (it sits beside Recent clients) and topped by an overdue alert line. */
.dash-wn { max-height: var(--dash-feed-h); }
.dash-wn-more { font-size: 12px; font-weight: 700; color: var(--primary); cursor: pointer; padding: 8px; border-radius: var(--radius-sm); }
.dash-wn-more:hover { background: #f6f7fb; }
.dash-due {
    display: flex; align-items: center; gap: 14px; margin-bottom: var(--dash-gap); padding: 13px 18px; cursor: pointer;
    border-radius: var(--radius); border: 1px solid rgba(239, 68, 68, .28);
    background: linear-gradient(120deg, rgba(239, 68, 68, .10), rgba(249, 115, 22, .05));
    transition: border-color .15s, box-shadow .15s;
}
.dash-due:hover { border-color: rgba(239, 68, 68, .5); box-shadow: 0 8px 24px rgba(239, 68, 68, .12); }
.dash-due-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; color: #fff; background: linear-gradient(135deg, #ef4444, #f97316); }
.dash-due-txt { flex: 1; min-width: 0; }
.dash-due-txt b { display: block; font-size: 14px; font-weight: 750; color: var(--danger); }
.dash-due-txt span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-due-go { flex: none; font-size: 12.5px; font-weight: 700; color: var(--danger); white-space: nowrap; }
@media (max-width: 640px) { .dash-due { flex-wrap: wrap; } .dash-due-go { width: 100%; text-align: right; } }

/* Dashboard "Payments" roll-up and "Needs attention" list. */
.dash-money { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dash-money:hover { border-color: var(--border-strong); box-shadow: 0 8px 24px rgba(15, 23, 42, .07); }
.dash-money-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-money-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-money-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dash-money-val { font-size: 21px; font-weight: 750; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dash-money-val.is-good { color: #047857; }
.dash-money-val.is-bad { color: var(--danger); }
.dash-money-sub { font-size: 11.5px; color: var(--text-2); }
@media (max-width: 560px) { .dash-money-grid { grid-template-columns: 1fr; } }

/* Muted one-liner sitting opposite an <h3> in a .card-head. */
.dash-stale-hint, .dash-head-hint { font-size: 11.5px; color: var(--muted); }
@media (max-width: 560px) { .dash-head-hint { display: none; } }
/* .prio capitalizes (it normally carries "high"/"low"); "31d quiet" is a sentence, not a label. */
.dash-stale-age { background: #fff7ed; color: #c2410c; text-transform: none; }

.cal-form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .cal-form-row { grid-template-columns: 1fr; } }

/* @-mention client picker in the reminder title */
.cal-title-input-wrap { position: relative; }
.cal-title-hint { font-size: 11.5px; color: var(--text-muted, #94a3b8); margin-top: 5px; }
.cal-title-hint b { color: var(--primary); font-weight: 800; }
.cal-mention-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18); padding: 5px; max-height: 248px; overflow-y: auto;
}
.cal-mention-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    cursor: pointer; font-size: 14px; color: var(--text);
}
.cal-mention-item:hover, .cal-mention-item.active { background: rgba(99, 102, 241, .10); }
.cal-mention-avatar {
    flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center;
    font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.cal-mention-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-mention-noemail {
    flex: none; font-size: 10.5px; font-weight: 700; color: #b45309;
    background: #fef3c7; border-radius: 999px; padding: 2px 8px;
}
.cal-mention-empty { padding: 12px 10px; font-size: 13px; color: var(--text-muted, #94a3b8); text-align: center; }

/* "Notify this client" row */
.cal-notify-row {
    display: flex; align-items: center; gap: 10px; margin-top: 12px;
    background: rgba(99, 102, 241, .07); border: 1px solid rgba(99, 102, 241, .22);
    border-radius: 12px; padding: 11px 13px;
}
.cal-check { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; font-size: 13.5px; color: var(--text); }
.cal-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; flex: none; }
.cal-check input:disabled { cursor: not-allowed; }
.cal-check b { color: var(--primary); font-weight: 750; }
.cal-mention-clear {
    flex: none; background: transparent; border: none; color: var(--text-muted, #94a3b8);
    font-size: 15px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.cal-mention-clear:hover { background: rgba(15, 23, 42, .06); color: var(--text); }

/* Paperclip on a month-grid chip: this event carries reference files. */
.cal-ev-clip { font-size: 9.5px; opacity: .75; }

/* Reference files on an event — the appointment letter, the agenda, the checklist.
   Shaped like the support tray (.sup-drop / .sup-chip) because it is the same job: a compact
   in-form picker that also accepts a drop. Uploads are immediate, so chips carry live
   progress and error states of their own. */
.cal-att-drop {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.cal-att-drop:hover, .cal-att-drop:focus-visible { border-color: var(--primary); background: rgba(99,102,241,.05); outline: none; }
.cal-att-drop[disabled] { opacity: .55; cursor: not-allowed; }
.cal-att-field.is-dragging .cal-att-drop { border-style: solid; border-color: var(--primary); background: rgba(99,102,241,.10); }
.cal-att-drop-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(99,102,241,.12); color: var(--primary-600); font-size: 15px; }
.cal-att-drop-txt { min-width: 0; }
.cal-att-drop b { display: block; font-size: 13.2px; font-weight: 650; color: var(--text); }
.cal-att-drop-note { font-size: 11.8px; color: var(--muted); }
.cal-att-list { display: grid; gap: 8px; margin-top: 10px; }
.cal-att-chip {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); overflow: hidden;
}
.cal-att-ic {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); font-size: 15px;
}
.cal-att-name {
  flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
a.cal-att-name:hover { color: var(--primary-600); text-decoration: underline; }
.cal-att-meta { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-att-x {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: none;
  border-radius: 6px; background: transparent; color: var(--muted); font-size: 13px;
}
.cal-att-x:hover { background: rgba(239,68,68,.12); color: var(--danger); }
.cal-att-chip.is-uploading { border-style: dashed; }
.cal-att-chip.is-error { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.05); }
.cal-att-chip.is-error .cal-att-meta { color: var(--danger); font-weight: 600; }
/* Upload progress, drawn as a hairline along the bottom edge of the chip. */
.cal-att-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--primary); transition: width .2s; }

/* ---- Event details: the read-only card an event opens into, with Edit a click away.
   cal-dv- prefixed throughout — bare .title/.row/.chip names bleed across this stylesheet. ---- */
.cal-dv-hero { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cal-dv-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-dv-type {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
}
.cal-dv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.cal-dv-chip.done { background: rgba(16, 185, 129, .13); color: #047857; }
.cal-dv-chip.overdue { background: rgba(239, 68, 68, .12); color: var(--danger); }
.cal-dv-title {
  margin: 12px 0 9px; font-size: 20px; line-height: 1.32; letter-spacing: -.02em;
  font-weight: 700; color: var(--text); word-break: break-word;
}
.cal-dv-title.is-done { text-decoration: line-through; color: var(--text-2); }
.cal-dv-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.cal-dv-when b { color: var(--text); font-weight: 650; }
.cal-dv-when-ic { font-size: 12.5px; opacity: .75; }
.cal-dv-when.overdue b { color: var(--danger); }
.cal-dv-rel {
  font-size: 11.5px; font-weight: 700; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}
.cal-dv-when.overdue .cal-dv-rel { background: rgba(239, 68, 68, .12); border-color: transparent; color: var(--danger); }
.cal-dv-allday { font-size: 11.8px; color: var(--muted); }
.cal-dv-rows { margin-top: 14px; }
.cal-dv-row { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 12px; padding: 10px 0; font-size: 13.5px; align-items: start; }
.cal-dv-row + .cal-dv-row { border-top: 1px dashed var(--border); }
.cal-dv-k { color: var(--muted); font-size: 12.5px; font-weight: 650; padding-top: 1px; }
.cal-dv-v { color: var(--text); min-width: 0; word-break: break-word; line-height: 1.55; }
.cal-dv-v b { font-weight: 650; }
.cal-dv-empty { color: var(--muted); font-size: 13px; }
.cal-dv-link { background: none; border: none; padding: 0 0 0 2px; font: inherit; font-weight: 650; color: var(--primary-600); cursor: pointer; }
.cal-dv-link:hover { text-decoration: underline; }
.cal-dv-sec { margin-top: 18px; }
.cal-dv-sec-h { font-size: 11.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.cal-dv-notes {
  font-size: 13.8px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
}
.cal-dv-sec .cal-att-list { margin-top: 0; }
@media (max-width: 560px) { .cal-dv-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ===================== Help & Support =====================
   One composer with two modes (help / feature idea), self-serve answers in the
   rail beside it, and this org's request history underneath. Everything stays
   sup-prefixed — bare .card/.empty/.chip names bleed across this stylesheet. */

/* -- hero: who we are, where the reply lands -- */
.sup-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 20px 24px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(139,92,246,.06));
}
.sup-hero h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.02em; }
.sup-hero p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.sup-hero p b { color: var(--text); font-weight: 650; }
.sup-hero-side { display: flex; align-items: center; gap: 8px; flex: none; }
.sup-mail {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  font-size: 13.5px; font-weight: 650; color: var(--text); transition: border-color .15s, color .15s;
}
.sup-mail:hover { border-color: var(--primary); color: var(--primary-600); }
.sup-mail svg { color: var(--primary); flex: none; }
.sup-copy {
  width: 36px; height: 36px; display: grid; place-items: center; flex: none;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); box-shadow: var(--shadow-sm); transition: color .15s, border-color .15s;
}
.sup-copy:hover { color: var(--primary-600); border-color: var(--primary); }

/* -- page layout -- */
.sup-layout { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(288px, 1fr); gap: 18px; align-items: start; }
.sup-main, .sup-rail { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 1080px) { .sup-layout { grid-template-columns: 1fr; } }

/* -- composer -- */
.sup-card { padding: 0; }
.sup-card.is-dragging { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.sup-tabs { display: flex; gap: 5px; margin: 14px 16px 0; padding: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 13px; }
.sup-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent;
  font-size: 13.5px; font-weight: 650; color: var(--text-2);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.sup-tab:hover { color: var(--text); }
.sup-tab .ic { font-size: 15px; line-height: 1; }
.sup-tab[aria-selected="true"] { background: var(--surface); border-color: var(--border); color: var(--primary-700); box-shadow: var(--shadow-sm); }
.sup-tab:focus-visible { outline: 2px solid rgba(99,102,241,.5); outline-offset: 1px; }
.sup-body { padding: 4px 20px 20px; }
.sup-lead { margin: 12px 2px 16px; font-size: 13px; line-height: 1.6; color: var(--muted); }

.sup-field { margin-bottom: 14px; }
.sup-flabel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sup-flabel label { font-size: 13px; font-weight: 650; color: var(--text-2); }
.sup-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .15s; }
.sup-count.warn { color: var(--warning); font-weight: 650; }
.sup-count.over { color: var(--danger); font-weight: 700; }
.sup-field input, .sup-field textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-family: inherit; font-size: 14.5px; line-height: 1.55;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.sup-field textarea { display: block; resize: vertical; min-height: 132px; }
.sup-field input::placeholder, .sup-field textarea::placeholder { color: var(--muted); }
.sup-field input:focus, .sup-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,.14); }
.sup-field [aria-invalid="true"] { border-color: rgba(239,68,68,.7); }
.sup-field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(239,68,68,.14); }
.sup-err { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--danger); }
.sup-alert {
  margin: 2px 0 14px; padding: 10px 13px; border-radius: var(--radius-sm);
  background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.28);
  color: #b91c1c; font-size: 13px; font-weight: 600;
}

/* Deflection: quick answers that match what's being typed, before it becomes a ticket. */
.sup-sugg { margin: -4px 0 14px; border: 1px solid rgba(99,102,241,.26); background: rgba(99,102,241,.05); border-radius: var(--radius-sm); overflow: hidden; }
.sup-sugg-head { padding: 9px 12px 3px; font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--primary-600); }
.sup-sugg-item {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 12px;
  background: none; border: none; text-align: left; font-size: 13.2px; font-weight: 600; color: var(--text);
}
.sup-sugg-item:last-child { padding-bottom: 11px; }
.sup-sugg-item:hover { background: rgba(99,102,241,.09); }
.sup-sugg-item .arw { margin-left: auto; flex: none; color: var(--primary); }

/* Attachments — picked, pasted or dropped; uploaded with the request itself. */
.sup-drop {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 13px; text-align: left;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.sup-drop:hover, .sup-drop:focus-visible { border-color: var(--primary); background: rgba(99,102,241,.05); outline: none; }
.sup-card.is-dragging .sup-drop { border-style: solid; border-color: var(--primary); background: rgba(99,102,241,.10); }
.sup-drop-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(99,102,241,.12); color: var(--primary-600); }
.sup-drop-txt { min-width: 0; }
.sup-drop b { display: block; font-size: 13.2px; font-weight: 650; color: var(--text); }
.sup-drop-note { font-size: 11.8px; color: var(--muted); }
.sup-atts { display: grid; gap: 8px; margin-top: 10px; }
.sup-chip { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.sup-chip-th { width: 32px; height: 32px; flex: none; border-radius: 7px; object-fit: cover; border: 1px solid var(--border); background: #fff; }
.sup-chip-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); font-size: 15px; }
.sup-chip-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-chip-meta { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sup-chip-x { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: none; border-radius: 6px; background: transparent; color: var(--muted); font-size: 13px; }
.sup-chip-x:hover { background: rgba(239,68,68,.12); color: var(--danger); }

.sup-tech { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.sup-tech input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; flex: none; }
.sup-tech .info-tip { margin-left: 0; }

.sup-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.sup-foot-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.sup-kbd { padding: 2px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); font-size: 11px; font-weight: 650; }
.sup-draft { font-size: 11.8px; color: var(--muted); opacity: 0; transition: opacity .25s; }
.sup-draft.on { opacity: 1; }
.sup-draft button { background: none; border: none; padding: 0 0 0 4px; color: var(--primary-600); font-size: 11.8px; font-weight: 650; text-decoration: underline; }
.sup-send { margin-left: auto; min-width: 172px; }
.sup-send.feature { background: linear-gradient(135deg, #8b5cf6, #a855f7); box-shadow: 0 6px 18px rgba(139,92,246,.32); }
.sup-send.feature:hover { box-shadow: 0 10px 26px rgba(139,92,246,.42); }

/* Sent state — replaces the composer so the confirmation outlives the toast. */
.sup-sent { padding: 40px 24px 34px; text-align: center; animation: supPop .22s ease-out; }
@keyframes supPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sup-sent-ic { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: rgba(16,185,129,.13); color: #059669; }
.sup-sent h3 { margin: 0 0 7px; font-size: 17px; }
.sup-sent p { max-width: 430px; margin: 0 auto 18px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.sup-sent p b { color: var(--text); font-weight: 650; }

/* -- rail: quick answers + who you're writing as -- */
.sup-kb { padding: 6px 8px 10px; }
.sup-kb-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px; font-size: 13.5px; font-weight: 750; }
.sup-kb-head svg { color: var(--primary); }
.sup-kb-item + .sup-kb-item { border-top: 1px solid var(--border); }
.sup-kb-q {
  width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px;
  background: none; border: none; border-radius: 9px; text-align: left;
  font-size: 13.2px; font-weight: 620; line-height: 1.45; color: var(--text);
}
.sup-kb-q:hover { background: var(--surface-2); }
.sup-kb-q .chev { margin-left: auto; flex: none; color: var(--muted); transition: transform .18s; }
.sup-kb-item.open > .sup-kb-q { color: var(--primary-700); }
.sup-kb-item.open > .sup-kb-q .chev { transform: rotate(90deg); }
.sup-kb-a { padding: 0 10px 12px; font-size: 12.8px; line-height: 1.65; color: var(--text-2); }
.sup-kb-a b { color: var(--text); font-weight: 650; }
/* display:flex (not the .btn default inline-flex) so the CTA drops onto its own
   line instead of trailing the last sentence of the answer. */
.sup-kb-a .btn { display: flex; width: fit-content; margin-top: 10px; }
.sup-kb-item.flash { border-radius: 10px; animation: supFlash 1.2s ease; }
@keyframes supFlash { 0%, 100% { background: transparent; } 22% { background: rgba(99,102,241,.12); } }

.sup-side { padding: 16px 18px 18px; }
.sup-side-head { font-size: 13.5px; font-weight: 750; margin-bottom: 10px; }
.sup-side-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 12.8px; border-bottom: 1px dashed var(--border); }
.sup-side-row:last-of-type { border-bottom: none; }
.sup-side-row span { color: var(--muted); flex: none; }
.sup-side-row b { font-weight: 650; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.sup-side-note { margin: 10px 0 0; font-size: 11.8px; line-height: 1.55; color: var(--muted); }

/* -- history -- */
.sup-hcount { font-size: 12px; color: var(--muted); font-weight: 600; }
.sup-hist { padding: 8px 8px 10px; }
.sup-hist-item + .sup-hist-item { border-top: 1px solid var(--border); }
.sup-hist-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 10px; background: none; border: none; border-radius: 10px; text-align: left; }
.sup-hist-row:hover { background: var(--surface-2); }
.sup-hist-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; font-size: 15px; }
.sup-hist-ic.help { background: rgba(99,102,241,.12); }
.sup-hist-ic.feature { background: rgba(139,92,246,.12); }
.sup-hist-main { flex: 1 1 auto; min-width: 0; }
.sup-hist-main b { display: block; font-size: 13.4px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-hist-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.sup-pill { flex: none; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sup-pill.open { background: rgba(99,102,241,.12); color: var(--primary-600); }
.sup-pill.prog { background: rgba(245,158,11,.16); color: #b45309; }
.sup-pill.done { background: rgba(16,185,129,.15); color: #047857; }
.sup-pill.gray { background: var(--surface-2); color: var(--text-2); text-transform: capitalize; }
.sup-hist-row .chev { flex: none; color: var(--muted); transition: transform .18s; }
.sup-hist-item.open .chev { transform: rotate(90deg); }
.sup-hist-body { padding: 0 12px 14px 52px; font-size: 13px; line-height: 1.65; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-hist-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; white-space: normal; }
.sup-hist-file { padding: 4px 9px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-2); }
.sup-empty { padding: 26px 20px 30px; text-align: center; }
.sup-empty-ic { width: 44px; height: 44px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.sup-empty b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.sup-empty span { font-size: 12.5px; color: var(--muted); }

@media (max-width: 640px) {
  .sup-hero { padding: 16px 16px 18px; }
  .sup-hero-side { width: 100%; }
  .sup-mail { flex: 1 1 auto; justify-content: center; min-width: 0; overflow: hidden; }
  .sup-body { padding: 4px 14px 16px; }
  .sup-tabs { margin: 12px 14px 0; }
  .sup-foot { flex-direction: column-reverse; align-items: stretch; }
  .sup-foot-note { display: none; }  /* ⌘↵ means nothing on a touch keyboard */
  .sup-send { width: 100%; margin-left: 0; }
  .sup-hist-body { padding-left: 12px; }
}

/* ---- Client dossier: Payments tab (Finance Phase 2) ---- */
.btn-xs { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn-xs.danger { color: var(--danger); border-color: rgba(185, 28, 28, .35); }
.btn-xs.danger:hover:not(:disabled) { background: rgba(185, 28, 28, .06); }
.pay-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pay-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.pay-chip .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.pay-chip .v { font-size: 20px; font-weight: 800; margin-top: 4px; }
.pay-chip .v.ok { color: #047857; }
.pay-chip .v.warn { color: #b45309; }
.pay-gate-note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13px; margin-bottom: 14px; }
.pay-gate-note a { color: var(--primary-600); font-weight: 700; text-decoration: none; }
.pay-split-preview { font-size: 13px; color: var(--text-2); background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 2px; }
.pay-table tbody tr { cursor: default; }
.pay-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pay-acts { white-space: nowrap; text-align: right; }
.pay-acts .btn { margin-left: 6px; }
.pay-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pay-status.ok { background: #ecfdf5; color: #047857; }
.pay-status.pend { background: #eef2ff; color: #4338ca; }
.pay-status.warn { background: #fffbeb; color: #b45309; }
.pay-status.err { background: #fef2f2; color: #b91c1c; }
.pay-status.mut { background: var(--surface-2); color: var(--muted); }
@media (max-width: 720px) { .pay-chips { grid-template-columns: 1fr; } }

/* ---------- Universities tab (per-client shortlist) ---------- */
.uni-ai-card { background: linear-gradient(160deg, var(--surface), var(--surface-2)); border-color: rgba(99,102,241,.26); }
.uni-ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.uni-cost { flex: none; font-size: 12px; font-weight: 800; color: var(--primary-600); background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.26); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.uni-form { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
@media (max-width: 900px) { .uni-form { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .uni-form { grid-template-columns: 1fr; } }
.uni-ai-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.uni-ai-foot .muted { font-size: 12.5px; }

.uni-add-row { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; gap: 10px; margin-top: 10px; }
@media (max-width: 720px) { .uni-add-row { grid-template-columns: 1fr; } }
.uni-add-row input { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--surface-2); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 13px; outline: none; }
.uni-add-row input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px rgba(99,102,241,.14); }

.uni-suggest { position: relative; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; max-height: 230px; overflow-y: auto; }
.uni-sugg { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: none; background: none; font: inherit; color: var(--text); padding: 10px 13px; cursor: pointer; }
.uni-sugg:hover { background: var(--bg-2); }
.uni-sugg span { color: var(--muted); font-size: 12px; }

.uni-list { display: grid; gap: 9px; margin-top: 4px; }
.uni-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.uni-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.uni-main { flex: 1; min-width: 0; }
.uni-name { font-size: 14.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.uni-meta { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.uni-ranks { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.uni-why { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.55; }
.uni-reqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.uni-reqs span { font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; }
.uni-badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; }
.uni-badge-ai { font-size: 10px; font-weight: 800; background: rgba(124,58,237,.12); color: #6d28d9; padding: 2px 7px; border-radius: 6px; }
.uni-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.uni-status { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; font-weight: 700; padding: 6px 9px; cursor: pointer; font-family: var(--font); }
.uni-status-ro { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.uni-del { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.uni-del:hover { color: var(--danger, #dc2626); }
.uni-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 22px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); line-height: 1.55; }

.uni-sugg-list { display: grid; gap: 10px; }
.uni-sugg-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.uni-sugg-item:hover { border-color: var(--border-strong); }
.uni-sugg-item input { margin-top: 3px; flex: none; }

/* AI match results render INLINE (never a dismissable modal) — they cost credits,
   so a stray backdrop click must not be able to destroy them. */
.uni-sugg-card { border-color: rgba(16,185,129,.32); background: linear-gradient(160deg, var(--surface), rgba(16,185,129,.04)); }
.uni-sugg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.uni-sugg-saved { flex: none; font-size: 11.5px; font-weight: 800; color: #047857; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.28); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.uni-sugg-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.uni-head-right { display: flex; align-items: center; gap: 12px; }
.uni-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.uni-link { font-size: 12px; font-weight: 700; color: var(--primary-600); background: rgba(99,102,241,.09); border: 1px solid rgba(99,102,241,.22); border-radius: 7px; padding: 4px 9px; text-decoration: none; }
.uni-link:hover { background: rgba(99,102,241,.16); }

/* ============================================================
   COURSE FINDER
   ============================================================ */
.cf-hero {
  display: flex; gap: 24px; align-items: stretch; justify-content: space-between;
  background: var(--grad); border-radius: var(--radius); padding: 24px 26px;
  color: #fff; box-shadow: var(--shadow); margin-bottom: 16px; flex-wrap: wrap;
}
.cf-hero-main { max-width: 640px; }
.cf-hero h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.cf-hero p { margin: 0; font-size: 13.5px; line-height: 1.55; opacity: .92; }
.cf-hero p b { color: #fff; }
.cf-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cf-chip {
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600;
}
.cf-hero-stats { display: flex; gap: 10px; align-items: center; }
.cf-stat {
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-sm); padding: 12px 16px; text-align: center; min-width: 92px;
}
.cf-stat b { display: block; font-size: 20px; }
.cf-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

.cf-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cf-tab {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .15s ease; font-family: var(--font);
}
.cf-tab:hover { border-color: var(--border-strong); color: var(--text); }
.cf-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }

.cf-filters-card { margin-bottom: 14px; }
/* Same 12-column system as the shortlist form: four equal dropdowns on top, then the
   free-text search with its button — flex-wrap left items stranded at three different
   vertical offsets depending on the label lengths. `order` puts search last without
   reordering the DOM. */
.cf-filters { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; align-items: end; }
.cf-filters .cf-f { grid-column: span 3; }
.cf-filters .cf-f-grow { grid-column: span 10; order: 1; }
.cf-filters .btn { grid-column: span 2; order: 2; align-self: end; }
.cf-f { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.cf-f-grow { flex: 1 1 220px; }
.cf-f > span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.cf-f select, .cf-f input {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); padding: 9px 11px; font-size: 13.5px; font-family: var(--font); outline: none;
  /* Fields live in fixed-width grid/flex cells — without this they keep their intrinsic
     width and spill over the neighbouring column. */
  width: 100%; min-width: 0; box-sizing: border-box;
}
.cf-f select:focus, .cf-f input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
/* Must out-specify `.cf-f > span` above, or the helper text inherits the uppercase
   label treatment and reads like a stray field label. */
.cf-f > .cf-f-hint {
  font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: -1px;
  text-transform: none; letter-spacing: normal; font-weight: 500;
}

/* ---------- Advanced (deep) browse filters ----------
   A second tier under the always-visible row: collapsed by default so the common search
   stays a one-liner, with the active deep filters mirrored as removable chips on the bar
   itself — otherwise a filter set and then collapsed silently shapes every result. */
.cf-adv-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.cf-adv-toggle {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 6px 13px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: var(--font);
  transition: all .15s ease; white-space: nowrap;
}
.cf-adv-toggle:hover { border-color: var(--border-strong); color: var(--text); }
.cf-adv-toggle.open { background: rgba(99, 102, 241, .08); border-color: rgba(99, 102, 241, .35); color: var(--primary-600); }
.cf-adv-caret { display: inline-block; font-size: 10px; transition: transform .15s ease; }
.cf-adv-toggle.open .cf-adv-caret { transform: rotate(90deg); }
.cf-adv-count {
  background: var(--primary); color: #fff; border-radius: 999px; min-width: 18px; padding: 0 5px;
  font-size: 11px; line-height: 18px; text-align: center;
}
/* Plural on purpose — `.cf-chip` is the hero's country pill and must stay untouched. */
.cf-fchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cf-fchip {
  display: inline-flex; align-items: center; gap: 4px; background: var(--bg-2);
  border: 1px solid var(--border); color: var(--text-2); border-radius: 999px;
  padding: 3px 5px 3px 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.cf-fchip-sort { background: rgba(99, 102, 241, .07); border-color: rgba(99, 102, 241, .25); color: var(--primary-600); }
.cf-fchip-x {
  border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px;
  line-height: 1; padding: 1px 4px; border-radius: 50%; font-family: var(--font);
}
.cf-fchip-x:hover { background: rgba(239, 68, 68, .12); color: #dc2626; }
.cf-clear-all {
  border: 0; background: transparent; color: var(--primary-600); font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: var(--font); text-decoration: underline; padding: 2px 4px;
}
.cf-adv { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.cf-adv.open { display: block; }
.cf-adv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cf-adv-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cf-adv-group h4 { margin: 0; font-size: 12px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.cf-adv-group .cf-f { min-width: 0; }
.cf-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.35; cursor: pointer; }
.cf-check input { flex: none; width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--primary); cursor: pointer; }
.cf-adv-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.cf-adv-sort { min-width: 230px; }
.cf-adv-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1080px) { .cf-adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .cf-adv-grid { grid-template-columns: 1fr; gap: 14px; }
  .cf-adv-foot { flex-direction: column; align-items: stretch; }
  .cf-adv-sort { min-width: 0; }
  .cf-adv-foot-actions .btn { flex: 1 1 auto; }
}

.cf-uni { margin-bottom: 12px; }
.cf-count { font-size: 13px; color: var(--muted); margin: 0 0 12px 2px; }
.cf-more { display: flex; justify-content: center; padding: 6px 0 18px; }
.cf-uni-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.cf-uni-title h3 { margin: 0; font-size: 16.5px; letter-spacing: -.01em; }
.cf-uni-sub { color: var(--text-2); font-size: 12.5px; margin-top: 2px; text-transform: capitalize; }
.cf-uni-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cf-rank {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2);
  border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.cf-rank-nat { background: rgba(99, 102, 241, .08); color: var(--primary-600); border-color: rgba(99, 102, 241, .25); }
.cf-verified {
  background: rgba(16, 185, 129, .1); color: #059669; border: 1px solid rgba(16, 185, 129, .25);
  border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.cf-verified.cf-pending { background: rgba(245, 158, 11, .1); color: #b45309; border-color: rgba(245, 158, 11, .3); }
.cf-uni-summary { color: var(--text-2); font-size: 13px; line-height: 1.55; margin: 8px 0 0; }
.cf-uni-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 2px; font-size: 12.5px; color: var(--text-2); }
.cf-uni-facts a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.cf-uni-facts a:hover { text-decoration: underline; }
.cf-uni-toggle { margin-top: 10px; }
.cf-courses-wrap { display: none; overflow-x: auto; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cf-uni-open .cf-courses-wrap { display: block; }
.cf-courses { min-width: 860px; }
.cf-courses td { vertical-align: top; }
.cf-td-sub { color: var(--muted); font-size: 11.5px; font-weight: 500; margin-top: 2px; }
.cf-course-link { color: var(--primary-600); font-weight: 700; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.cf-course-link:hover { text-decoration: underline; }

/* Shortlist form: a 12-column grid so every field lands on a predictable column and
   rows stay aligned. Ordered by intent — who it's for / where / what, then the
   refinements, then free-form notes. align-items:start keeps the inputs on one line
   even when a cell carries a helper hint. */
.cf-ai-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 12px; align-items: start; }
.cf-ai-grid .cf-f { min-width: 0; grid-column: span 4; }
.cf-ai-grid .cf-f-full { grid-column: 1 / -1; }
/* The client typeahead is shared with the interview picker, where it sizes itself as a
   flex child. Inside a grid cell those constraints overflow onto the next column. */
.cf-ai-grid .docsel { min-width: 0; max-width: none; flex: none; width: 100%; }
.cf-ai-actions {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}
@media (max-width: 1080px) {
  .cf-ai-grid .cf-f { grid-column: span 6; }
  /* Re-assert: the rule above has equal specificity and comes later, so without this
     the full-width fields (Notes) would collapse to half a row. */
  .cf-ai-grid .cf-f-full { grid-column: 1 / -1; }
  .cf-filters .cf-f { grid-column: span 6; }
  .cf-filters .cf-f-grow { grid-column: span 8; }
  .cf-filters .btn { grid-column: span 4; }
}
@media (max-width: 620px) {
  .cf-ai-grid { gap: 12px; }
  .cf-ai-grid .cf-f, .cf-ai-grid .cf-f-full { grid-column: 1 / -1; }
  .cf-ai-actions .btn { width: 100%; }
  .cf-filters .cf-f, .cf-filters .cf-f-grow, .cf-filters .btn { grid-column: 1 / -1; }
}
.cf-rec-card { margin-bottom: 14px; border: 1px solid rgba(99, 102, 241, .3); }
.cf-rec-summary { color: var(--text-2); font-size: 13.5px; line-height: 1.6; margin: 0 0 12px; }
/* min(300px, 100%) keeps single-column phones (<~330px content width) from overflowing */
.cf-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.cf-rec-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 7px;
}
.cf-rec-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cf-rec-item h4 { margin: 2px 0 0; font-size: 15px; letter-spacing: -.01em; }
.cf-rec-uni { color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.cf-rec-item p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.55; }
.cf-rec-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.cf-rec-reqs { display: flex; flex-wrap: wrap; gap: 5px; }
.cf-rec-reqs span {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 9px; font-size: 11px; color: var(--text-2); font-weight: 600;
}
.cf-rec-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }

.cf-hist-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm);
  padding: 11px 14px; margin-bottom: 8px; cursor: pointer; text-align: left;
  font-family: var(--font); transition: all .15s ease;
}
.cf-hist-row:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.cf-hist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-hist-main b { font-size: 13.5px; color: var(--text); }
.cf-hist-main span { font-size: 12px; color: var(--text-2); }
.cf-hist-side { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }

@media (max-width: 720px) {
  .cf-hero { padding: 18px; gap: 14px; }
  .cf-hero-stats { width: 100%; justify-content: space-between; }
  .cf-stat { flex: 1; min-width: 0; padding: 10px 8px; }
  .cf-hist-side { flex-direction: column; gap: 2px; align-items: flex-end; }
  .cf-courses { min-width: 720px; }
}

/* ---------- Writing Studio (client tab: AI-drafted SOP & LOR) ----------
   The reader deliberately looks like paper — serif, generous leading, justified —
   because the counselor is judging prose they are about to hand to an admissions
   officer, and a UI font makes that judgement harder. */
.ws-card { padding: 0; overflow: hidden; border-color: rgba(99, 102, 241, .25); box-shadow: 0 12px 34px rgba(71, 65, 154, .08); }
.ws-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(120deg, rgba(99, 102, 241, .055), rgba(139, 92, 246, .025) 55%, transparent);
}
.ws-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 780; color: var(--text); }
.ws-title .info-tip { margin-left: 0; }
.ws-title-icon {
  width: 29px; height: 29px; display: grid; place-items: center; flex: none;
  border-radius: 9px; color: #fff; font-size: 15px;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
  box-shadow: 0 7px 16px rgba(99, 102, 241, .24);
}
.ws-newbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; }
.ws-blocked { margin: 0 22px 4px; font-size: 12.5px; color: var(--danger); }

/* Document-type switch — the first real decision, so it reads as a control, not a tab. */
.ws-seg { display: flex; gap: 6px; padding: 4px; margin: 4px 22px 0; background: var(--bg-2); border-radius: 12px; }
.ws-seg-btn {
  flex: 1; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent;
  font-size: 13px; font-weight: 680; color: var(--text-2); transition: all .15s ease;
}
.ws-seg-btn:hover { color: var(--text); }
.ws-seg-btn.active { background: var(--surface); color: var(--primary-700); box-shadow: var(--shadow-sm); }
.ws-doc-note { padding: 10px 22px 0; font-size: 12px; color: var(--muted); }
.ws-doc-note b { color: var(--text-2); }

.ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 22px 4px; }
.ws-lbl { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 650; color: var(--text-2); }
.ws-lbl-wide { grid-column: 1 / -1; }
/* Caption line: keeps the label text and its required/optional badge on ONE line. Without this
   wrapper the badge becomes a second item in the label's column flex and drops to its own row,
   making that field taller than its neighbour and knocking the two grid columns out of line. */
.ws-cap { display: block; }
.ws-req { color: var(--primary-600); font-weight: 700; font-size: 11px; }
.ws-opt { color: var(--muted); font-weight: 600; font-size: 11px; }
/* Bottom-align the controls so a caption that wraps to two lines (narrow widths, long labels)
   still leaves its input level with the one beside it. */
.ws-lbl .ws-in { margin-top: auto; }
.ws-in {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-family: var(--font); font-size: 13px;
  /* Pin the control height: <input> and <select> size themselves differently from the same
     padding (the browser forces line-height:normal on a select and ignores any override), so
     without this they differ by ~2px and sit visibly off-level side by side in the grid.
     min-height, not height, so the textarea below can still grow with its rows. */
  min-height: 38px;
}
.ws-in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .13); }
.ws-ta { resize: vertical; line-height: 1.55; }
.ws-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px 20px; }
.ws-actions .btn { flex: none; }
.ws-hint { font-size: 12px; color: var(--muted); }
.ws-hint-warn { color: var(--warning); font-weight: 650; }

/* Documents list */
.ws-hrow { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; cursor: pointer; }
.ws-hrow:hover { background: var(--bg-2); }
.ws-hrow.active { background: rgba(99, 102, 241, .08); }
.ws-hmain { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ws-hmain b { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-hmain span { font-size: 12px; color: var(--text-2); }
.ws-hcr { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ws-badge {
  flex: none; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; color: #fff;
}
.ws-badge.sop { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.ws-badge.lor { background: linear-gradient(135deg, #0e7490, #14b8a6); }

/* Reader */
.ws-reader { padding: 0; overflow: hidden; }
.ws-rhead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.ws-rtitle { font-size: 15px; font-weight: 780; color: var(--text); }
.ws-rmeta { margin-top: 3px; font-size: 12px; color: var(--text-2); }
.ws-rbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-del { color: var(--danger); }

.ws-notice {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 16px 22px 0; padding: 13px 15px;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.55; color: #78350f;
}
.ws-notice b { color: #713f12; }
.ws-notice-ic { flex: none; font-size: 15px; line-height: 1.3; }

.ws-versions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 14px 22px 0; }
.ws-vbtn {
  padding: 4px 11px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); font-size: 12px; font-weight: 700; color: var(--text-2);
  font-family: var(--font); transition: all .15s ease;
}
.ws-vbtn:hover { border-color: var(--primary); color: var(--primary-700); }
.ws-vbtn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ws-vnote { font-size: 12px; color: var(--muted); font-style: italic; min-width: 0; }

.ws-refine { margin: 14px 22px 0; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ws-refine .ws-actions { padding: 12px 0 0; }
.ws-refine-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ws-chip {
  padding: 5px 11px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text-2);
  font-family: var(--font); transition: all .15s ease;
}
.ws-chip:hover { border-color: var(--primary); color: var(--primary-700); background: rgba(99, 102, 241, .05); }

/* The document itself. */
.ws-paper {
  margin: 18px 22px 22px; padding: 30px 34px;
  background: #fefefe; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-size: 14.5px; line-height: 1.78; color: #1a2234;
  max-height: 620px; overflow-y: auto;
}
.ws-paper p { margin: 0 0 15px; text-align: justify; hyphens: auto; }
.ws-paper p.ws-line { text-align: left; }
.ws-paper p:last-child { margin-bottom: 0; }
.ws-paper h4 { margin: 22px 0 10px; font-family: var(--font); font-size: 13.5px; font-weight: 750; color: var(--text); }
.ws-paper ul { margin: 0 0 15px; padding-left: 22px; }
.ws-paper li { margin-bottom: 7px; }
.ws-paper .ws-hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
/* Every unresolved fact, impossible to miss. */
.ws-ph {
  background: #fef3c7; border-bottom: 1.5px solid #f59e0b; border-radius: 3px;
  padding: 0 3px; font-family: var(--font); font-size: 12.5px; font-weight: 650; color: #78350f;
}

.ws-notes { margin: 0 22px 22px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ws-notes-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 10px; }
.ws-notes ul { margin: 0; padding-left: 20px; }
.ws-notes li { font-size: 12.5px; line-height: 1.6; color: var(--text-2); margin-bottom: 6px; }
.ws-notes p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }

@media (max-width: 720px) {
  .ws-grid { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 4px; }
  .ws-head, .ws-rhead, .ws-newbar { padding: 16px; }
  .ws-seg { margin: 4px 16px 0; flex-direction: column; }
  .ws-doc-note, .ws-actions { padding-left: 16px; padding-right: 16px; }
  .ws-paper { margin: 14px 16px 16px; padding: 20px 18px; font-size: 14px; }
  .ws-paper p { text-align: left; }
  .ws-notice, .ws-versions, .ws-refine, .ws-notes { margin-left: 16px; margin-right: 16px; }
  .ws-rbtns { width: 100%; }
}

/* ===========================================================================
   FINANCE BOOKS (fin-)
   The consultancy's own P&L: tabbed shell, period bar, paired in/out chart,
   ledger table and the "Saved with Rilono" panel. Everything is prefixed —
   bare .card/.empty/.kpi names bleed across this stylesheet — and the chart
   is hand-rolled CSS like the credits one, so there is still no chart library.
   =========================================================================== */

/* Tabs (same pill recipe as .cr-tabs, duplicated under this prefix) */
.fin-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.fin-tab {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .15s ease; font-family: var(--font);
}
.fin-tab:hover { border-color: var(--border-strong); color: var(--text); }
.fin-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.fin-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); vertical-align: middle; }
.fin-tab.active .fin-dot { background: #fff; }

/* "Connect your bank" nudge above the tabs */
.fin-nudge {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
  background: var(--surface); border: 1px solid rgba(99, 102, 241, .28); border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(71, 65, 154, .08); padding: 16px 20px;
}
.fin-nudge-ic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6); font-size: 19px;
}
.fin-nudge-txt { flex: 1; min-width: 240px; line-height: 1.55; }
.fin-nudge-txt b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.fin-nudge-txt span { font-size: 13px; color: var(--text-2); }

/* Period bar + compact inputs */
.fin-rangebar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.fin-rangelabel { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: 2px; }
.fin-range {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 650; cursor: pointer;
  font-family: var(--font); transition: all .15s ease;
}
.fin-range:hover { border-color: var(--border-strong); color: var(--text); }
.fin-range.active { background: var(--text); border-color: var(--text); color: #fff; }
.fin-rangespacer { flex: 1 1 auto; }
.fin-custom { display: inline-flex; align-items: center; gap: 6px; }
.fin-custom-sep { color: var(--muted); font-size: 12px; }
.fin-input {
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface);
  color: var(--text); font-size: 13px; font-family: var(--font); padding: 8px 11px; min-width: 132px;
}
.fin-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.fin-filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.fin-filters input.fin-input { flex: 1 1 200px; min-width: 160px; }

/* Text scales */
.fin-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fin-head-note { font-size: 12.5px; color: var(--text-2); }
.fin-sub { font-size: 12px; color: var(--muted); }
.fin-sub-inline { font-size: 12.5px; color: var(--text-2); }
.fin-muted { color: var(--muted); }
.fin-link { color: var(--primary-600); cursor: pointer; font-weight: 600; }
.fin-link:hover { text-decoration: underline; }
.fin-link:focus-visible { outline: 2px solid rgba(99, 102, 241, .45); outline-offset: 2px; border-radius: 4px; }
.fin-bignum { font-size: 30px; font-weight: 780; letter-spacing: -0.02em; line-height: 1.1; }
.fin-bignum span { font-size: 15px; font-weight: 650; color: var(--muted); }
.fin-bignum.neg { color: var(--danger); }
.fin-delta { font-size: 12px; font-weight: 700; margin-left: 4px; }
.fin-delta.up { color: var(--success); }
.fin-delta.down { color: var(--danger); }

/* Accent card used by the savings panels (same recipe as Deep Scan / Writing Studio) */
.fin-accent { border-color: rgba(99, 102, 241, .25); box-shadow: 0 12px 34px rgba(71, 65, 154, .08); }
.fin-card { margin-bottom: 20px; }
.grid-2 + .fin-table, .fin-card + .grid-2 { margin-top: 0; }
.fin-tabs + #finPanel .grid-2 { margin-bottom: 20px; }

/* Key/value fact strip (cash position, collections, Rilono cost) */
.fin-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; margin-top: 16px; }
.fin-facts > div { display: flex; flex-direction: column; gap: 3px; }
.fin-facts span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; }
.fin-facts b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-facts b.ok { color: var(--success); }
.fin-facts b.warn { color: var(--warning); }

/* Money chips above a ledger */
.fin-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fin-moneychip {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 11px 16px; min-width: 150px;
}
.fin-moneychip span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; }
.fin-moneychip b { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.fin-moneychip b.ok { color: var(--success); }
.fin-moneychip b.warn { color: var(--danger); }

/* Paired in/out column chart */
.fin-chart-wrap { display: flex; gap: 10px; align-items: stretch; }
.fin-chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--muted); padding: 2px 0 0; flex: none; }
.fin-chart {
  flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 176px;
  border-bottom: 1px solid var(--border); padding-bottom: 1px; min-width: 0;
}
.fin-bar-slot { flex: 1 1 0; min-width: 4px; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 1px; }
.fin-bar { width: 46%; max-width: 22px; border-radius: 4px 4px 2px 2px; min-height: 2px; transition: opacity .12s ease; }
.fin-bar.in { background: linear-gradient(180deg, #34d399, #10b981); }
.fin-bar.out { background: linear-gradient(180deg, #fbbf24, #f97316); }
.fin-bar-slot:hover .fin-bar { opacity: .72; }
/* Zero bucket: a flat tick on the baseline, never a gap (a chart that skips
   quiet days reads as continuous trading). Prefixed for the same reason .cr-bar-zero is. */
.fin-bar.fin-bar-zero { background: var(--bg-2); height: 3px; border-radius: 2px; }
.fin-chart-x { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin: 8px 0 0 40px; }
.fin-key { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin: 0 4px 0 8px; vertical-align: middle; }
.fin-key.in { background: #10b981; margin-left: 0; }
.fin-key.out { background: #f97316; }

/* Two-tone mini bar inside the monthly trend table */
.fin-mini { display: flex; flex-direction: column; gap: 3px; min-width: 90px; }
.fin-mini-bar { height: 6px; border-radius: 4px; min-width: 2px; }
.fin-mini-bar.in { background: #10b981; }
.fin-mini-bar.out { background: #f97316; }

/* Share rows and member rows (mirrors the credits ledger vocabulary) */
.fin-split-row { padding: 11px 0; border-bottom: 1px solid var(--border); }
.fin-split-row:last-child { border-bottom: none; }
.fin-split-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fin-split-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-split-amt span { color: var(--muted); font-size: 12px; }
.fin-member-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.fin-member-row:last-child { border-bottom: none; }
.fin-avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.fin-member-main { flex: 1; min-width: 0; }
.fin-member-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ledger table: rows are not clickable, so cancel .client-table's pointer */
.fin-table tbody tr { cursor: default; }
.fin-table td { vertical-align: top; font-variant-numeric: tabular-nums; }
.fin-table tbody tr[data-finclient] { cursor: pointer; }
.fin-rowmeta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.fin-chip { font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.fin-lock { font-size: 11.5px; color: var(--muted); white-space: nowrap; cursor: help; }
.fin-status { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.fin-status.ok { background: #ecfdf5; color: #047857; }
.fin-status.pend { background: #eef2ff; color: #4338ca; }
.fin-status.warn { background: #fffbeb; color: #b45309; }
.fin-status.err { background: #fef2f2; color: #b91c1c; }

/* Savings hero */
.fin-hero { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.fin-hero-main { flex: 1 1 320px; min-width: 260px; }
.fin-hero-num { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 6px 0 8px; }
.fin-hero-num span { font-size: 18px; font-weight: 650; color: var(--muted); }
.fin-hero-side { display: flex; gap: 14px; flex-wrap: wrap; }
.fin-hero-stat {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 15px; min-width: 132px;
}
.fin-hero-stat span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; margin-bottom: 3px; }
.fin-hero-stat b { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.fin-hero-stat b.ok { color: var(--success); }
.fin-hero-stat b.warn { color: var(--danger); }

/* In-card empty state + notices (never the global .empty — it forces 60px padding) */
.fin-empty {
  text-align: center; color: var(--muted); font-size: 13px; padding: 22px 16px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2);
}
.fin-empty-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fin-notice {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 12.5px; margin-bottom: 16px; line-height: 1.55;
}

/* Entry form extras */
.fin-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 4px 0 14px; }
.fin-check input { margin-top: 2px; flex: none; }
.fin-check b { color: var(--text); }
.fin-minutes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; }
.fin-minute { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-2); }
.fin-minute em { color: var(--muted); font-style: normal; font-size: 12px; }
.fin-minute input {
  width: 86px; flex: none; border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 7px 9px; font-size: 13px; font-family: var(--font); color: var(--text); background: var(--surface);
  text-align: right;
}
.fin-minute input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }

@media (max-width: 900px) {
  .fin-hero-num { font-size: 32px; }
}
@media (max-width: 720px) {
  .fin-tab { flex: 1 1 auto; text-align: center; }
  .fin-rangebar { gap: 6px; }
  .fin-rangespacer { flex-basis: 100%; height: 0; }
  .fin-filters .fin-input { flex: 1 1 100%; min-width: 0; }
  .fin-custom { width: 100%; }
  .fin-custom .fin-input { flex: 1; min-width: 0; }
  .fin-moneychip { flex: 1 1 45%; min-width: 0; }
}
@media (max-width: 620px) {
  /* .field-row is a hard 1fr 1fr with no global phone collapse, so each form that
     uses it has to opt in — the entry and assumptions modals included. */
  #finPanel .field-row,
  #finEntryForm .field-row,
  #finSetForm .field-row { grid-template-columns: 1fr; }
  .fin-minutes { grid-template-columns: 1fr; }
}
/* Period-bar actions wrap as ONE group, so "Export book" never strands itself
   on a line of its own when the pills fill the row. */
.fin-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 720px) { .fin-actions { margin-left: 0; width: 100%; } .fin-actions .btn { flex: 1 1 auto; } }

/* ===========================================================================
   ACCESS CONTROL — Team shell, roles, capability matrix, offices, access log
   (tm-  rl-  cap-  br-  al-)

   Five prefixes, one feature. Bare generic names silently collide in this
   stylesheet — `.card` / `.empty` / `.kpi` / `.chip` / `.field` / `.role-badge`
   / `.member-row` are all global here, and `.client-table tbody tr` even hands
   out a `cursor: pointer` — so every selector below is feature-prefixed and
   nothing bare is restyled or shadowed:
     tm-    the Team shell: sub-tabs, toolbar, members table, row menu, bulk bar
     rl-    roles: the badge family, preset cards, the role picker rows
     cap-   the capability matrix (sections, rows, tri-state control)
     br-    offices/branches: the card grid, chips and pickers
     al-    the access log
   Modifiers are compounds (`.rl-badge.owner`, `.br-card.is-default`) or
   data/ARIA attributes (`.tm-tab[aria-selected]`, `.cap-state[data-state]`),
   so a modifier can never leak onto unrelated markup.

   Colour: structure (surface / border / text / muted / radius / shadow /
   gradient) is token-only, straight off the :root block at the top of this
   file, so this whole section follows a token flip instead of stranding a
   hand-picked hex. The four tinted-status inks (#047857 green, #b45309 amber,
   #b91c1c red, #0369a1 sky) are the exact values the rest of this stylesheet
   already uses for text on a tint — reused, not reinvented, so there stays one
   place to change them.
   =========================================================================== */

/* ---------- Team sub-tabs (Members / Roles / Offices / Access log / My access)
   Same pill recipe as .cr-tabs / .fin-tabs, but the selected state is driven by
   aria-selected rather than a class: these are real role="tab" buttons with
   arrow-key navigation (the .sup-tab pattern), so the attribute is the single
   source of truth for both assistive tech and paint. ---------- */
.tm-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tm-tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .15s ease; font-family: var(--font);
}
.tm-tab:hover { border-color: var(--border-strong); color: var(--text); }
.tm-tab .ic { font-size: 14px; line-height: 1; }
.tm-tab b { font-size: 11.5px; font-weight: 800; padding: 0 6px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); }
.tm-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.tm-tab[aria-selected="true"] b { background: rgba(255,255,255,.22); color: #fff; }
.tm-tab:focus-visible { outline: 2px solid rgba(99,102,241,.5); outline-offset: 2px; }

/* ---------- Members toolbar ---------- */
.tm-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.tm-toolbar .spacer { flex: 1 1 auto; }
.tm-input {
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface);
  color: var(--text); font-size: 13px; font-family: var(--font); padding: 8px 11px;
  flex: 1 1 190px; min-width: 150px; max-width: 320px; outline: none;
}
.tm-input::placeholder { color: var(--muted); }
.tm-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

/* ---------- Members table (rendered as `class="client-table tm-table"`) ----------
   The wrapper is what scrolls. A table cannot clip itself, and letting it push
   the layout wide is exactly how a phone ends up scrolling the whole page
   sideways, so the horizontal overflow is owned by .tm-tablewrap. */
.tm-tablewrap { width: 100%; min-width: 0; padding-bottom: 2px; }
/* A member row is not clickable — the name link and the ⋯ menu are. Cancel the
   global `.client-table tbody tr { cursor: pointer }` (same fix as .fin-table). */
.tm-table tbody tr { cursor: default; }
.tm-table td { vertical-align: middle; }
.tm-table .tm-pick { width: 34px; padding-right: 0; }
.tm-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.tm-table tbody tr.is-picked { background: rgba(99,102,241,.06); }
.tm-table tbody tr.is-picked:hover { background: rgba(99,102,241,.1); }
.tm-table .tm-num { font-variant-numeric: tabular-nums; }

.tm-av {
  width: 36px; height: 36px; flex: none; border-radius: 11px;
  background: var(--grad); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
.tm-av.is-off { background: var(--bg-2); color: var(--muted); }

.tm-meta { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tm-meta > div { min-width: 0; }
.tm-meta b { display: block; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-meta span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-meta em { font-style: normal; margin-left: 5px; font-size: 11.5px; font-weight: 700; color: var(--primary-600); }
.tm-meta.is-off b { color: var(--text-2); }

/* ---------- Row ⋯ menu ----------
   position: fixed, not absolute. Both `.client-table` (overflow: hidden) and
   .tm-tablewrap (overflow-x on one axis makes the block axis clip too) would
   crop a menu anchored inside a cell. The JS sets left/top from the trigger's
   bounding rect; .tm-menu-wrap stays as the trigger's own anchor. */
.tm-menu-wrap { position: relative; display: inline-flex; }
.tm-menu {
  position: fixed; z-index: 70; min-width: 212px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: var(--shadow-lg);
}
.tm-menu-label { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tm-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  border: none; background: none; border-radius: 9px; text-align: left;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text);
}
.tm-menu button:hover { background: var(--surface-2); }
.tm-menu button:disabled { color: var(--muted); background: none; cursor: not-allowed; }
.tm-menu button.danger { color: var(--danger); }
.tm-menu button.danger:hover { background: rgba(239,68,68,.1); }
.tm-menu hr { height: 1px; margin: 5px 4px; border: 0; background: var(--border); }

/* ---------- Bulk-selection bar ----------
   Sticks to the bottom of the viewport over the table, so the count and the
   actions stay reachable partway down a long staff list. */
.tm-bulkbar {
  position: sticky; bottom: 14px; z-index: 30;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 16px;
  background: var(--text); color: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.tm-bulkbar b { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tm-bulkbar .spacer { flex: 1 1 auto; }
.tm-bulkbar .select-mini { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.tm-bulkbar .select-mini option { color: var(--text); }
.tm-bulkbar .btn-ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); color: #fff; }
.tm-bulkbar .btn-ghost:hover { background: rgba(255,255,255,.22); }
.tm-bulkbar-clear {
  background: none; border: none; padding: 0; text-decoration: underline;
  font-family: var(--font); font-size: 12.5px; font-weight: 650; color: rgba(255,255,255,.72);
}
.tm-bulkbar-clear:hover { color: #fff; }

/* ---------- Member chips: "has overrides", access scope ---------- */
/* Grants/denies diverging from the role — the one thing you cannot infer from
   the role name, so it is called out on the row itself. */
.tm-override {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  background: rgba(245,158,11,.14); color: #b45309; border: 1px solid rgba(245,158,11,.3);
}
.tm-scope-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap; font-size: 11.5px; font-weight: 700;
  background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border);
}
/* The dot alone says how much of the workspace they can see, before the label
   is read: workspace-wide is the accent, one office is sky, own caseload is grey. */
.tm-scope-chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tm-scope-chip[data-scope="all"] { background: rgba(99,102,241,.12); color: var(--primary-700); border-color: rgba(99,102,241,.28); }
.tm-scope-chip[data-scope="branch"] { background: rgba(14,165,233,.12); color: #0369a1; border-color: rgba(14,165,233,.26); }
.tm-scope-chip[data-scope="assigned"] { background: var(--bg-2); color: var(--text-2); border-color: var(--border); }

.tm-hint { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.tm-hint b { color: var(--text-2); font-weight: 650; }
/* Office time zone saved before the field became a picker — it reads as configured but
   resolves to nothing, so it has to look like a problem, not a footnote. */
/* Needs to out-specify `.field .hint`, which otherwise repaints it muted grey. */
.field .hint.tm-tz-warn { color: var(--warning); font-weight: 650; }

/* ---------- Ownership-transfer confirmation code (Team → ⋯ → Transfer ownership) ---------- */
.tm-otp-input {
  font-size: 26px; font-weight: 800; letter-spacing: .38em; text-align: center;
  /* letter-spacing also pads the right of the last glyph, which visually shifts the
     whole code left — the matching left pad puts it back in the middle of the field. */
  padding-left: calc(14px + .38em);
  font-variant-numeric: tabular-nums;
}
.tm-otp-sent {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px;
  padding: 12px 14px; border-radius: var(--radius);
  background: rgba(245,158,11,.09); border: 1px solid rgba(245,158,11,.3);
  font-size: 13px; line-height: 1.55; color: var(--text-2);
}
.tm-otp-sent b { color: var(--text); font-weight: 700; }
.tm-otp-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: -4px 0 16px; }
.tm-otp-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  font-weight: 650; color: var(--primary-600); cursor: pointer;
}
.tm-otp-link:hover:not(:disabled) { text-decoration: underline; }
.tm-otp-link:disabled { color: var(--muted); cursor: default; }

/* ---------- Inline banner (branch scope with no office, denied panel, DPA) ---------- */
.tm-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radius);
  background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.24);
  font-size: 13px; line-height: 1.55; color: var(--text-2);
}
.tm-banner-ic {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: rgba(99,102,241,.14); color: var(--primary-600); font-size: 16px;
}
.tm-banner-txt { flex: 1 1 240px; min-width: 0; }
.tm-banner b { color: var(--text); font-weight: 700; }
.tm-banner .btn { flex: none; margin-left: auto; }
.tm-banner.warn { background: rgba(245,158,11,.09); border-color: rgba(245,158,11,.3); }
.tm-banner.warn .tm-banner-ic { background: rgba(245,158,11,.16); color: #b45309; }

/* ===========================================================================
   ROLES (rl-)
   =========================================================================== */

/* Role badge. Deliberately a separate family from the global `.role-badge`,
   which only knows the three legacy strings and is still painted by the old
   team list — same silhouette so the two never read as different products. */
.rl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700;
  background: var(--bg-2); color: var(--text-2); border: 1px solid transparent;
}
.rl-badge.owner { background: var(--grad); color: #fff; box-shadow: 0 3px 10px rgba(99,102,241,.28); }
.rl-badge.admin { background: rgba(99,102,241,.14); color: var(--primary-700); border-color: rgba(99,102,241,.24); }
.rl-badge.manager { background: rgba(14,165,233,.13); color: #0369a1; border-color: rgba(14,165,233,.26); }
.rl-badge.counsellor { background: rgba(16,185,129,.13); color: #047857; border-color: rgba(16,185,129,.28); }
.rl-badge.finance { background: rgba(245,158,11,.14); color: #b45309; border-color: rgba(245,158,11,.3); }
.rl-badge.viewer { background: var(--bg-2); color: var(--text-2); border-color: var(--border); }
.rl-badge.custom { background: rgba(139,92,246,.13); color: var(--violet); border-color: rgba(139,92,246,.28); }

/* Role cards: system presets (read-only, Duplicate to customise) and the org's
   own custom roles. Cards, not rows, because a role is a thing you compare. */
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.rl-card {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 18px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rl-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rl-card h4 { margin: 0; font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.rl-card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.rl-card-facts {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  margin-top: auto; padding-top: 4px; font-size: 11.5px; font-weight: 650; color: var(--muted);
}
.rl-card-facts b { color: var(--text-2); font-weight: 750; font-variant-numeric: tabular-nums; }
.rl-card-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
/* Owner is the anchor of the grid — it gets the accent edge and the lift the
   other presets don't, the same distinction .plan-card.popular makes. */
.rl-card.is-primary { border-color: rgba(99,102,241,.4); box-shadow: 0 12px 34px rgba(71,65,154,.1); }
/* Archived custom role: kept because the audit log still points at it. */
.rl-card.is-muted { background: var(--surface-2); box-shadow: none; border-style: dashed; }
.rl-card.is-muted h4 { color: var(--text-2); }

/* Role picker (Edit-access modal / role editor). The whole row is the target —
   a 16px radio is not a tap target on a phone. */
.rl-list { display: grid; gap: 8px; }
.rl-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 11px;
  padding: 11px 13px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.rl-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
.rl-row input[type="radio"] { width: 16px; height: 16px; flex: none; margin: 2px 0 0; accent-color: var(--primary); cursor: pointer; }
.rl-row b { display: block; font-size: 13.5px; font-weight: 700; }
.rl-row span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.rl-row .tm-scope-chip, .rl-row .rl-badge { margin-top: 7px; }
/* .selected is the deterministic JS hook; :has() keeps it right even when the
   radio is toggled by the keyboard without a re-render. */
.rl-row.selected, .rl-row:has(input:checked) {
  border-color: var(--primary); background: rgba(99,102,241,.05); box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.rl-row:focus-within { border-color: var(--primary); }
.rl-row.is-locked { opacity: .55; cursor: not-allowed; background: var(--surface-2); box-shadow: none; }

/* ===========================================================================
   CAPABILITY MATRIX (cap-)
   Shared by the member Edit-access modal, the role editor, and read-only by
   the My-access tab. Hierarchy is fold > section > row, and a row is a
   sentence (what it lets them do) plus exactly one control — never a bare
   checkbox label, because 60 of those is a wall, not a decision.
   =========================================================================== */
.cap-fold {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 12px 14px; margin: 4px 0 2px;
}
.cap-fold[open] { background: var(--surface); }
.cap-fold > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700; color: var(--primary-600);
}
.cap-fold > summary::-webkit-details-marker { display: none; }
.cap-fold > summary::before { content: "▸"; font-size: 11px; }
.cap-fold[open] > summary::before { content: "▾"; }
.cap-fold[open] > summary { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.cap-fold > summary .tm-hint { margin-left: auto; font-weight: 600; }

/* Section header: the eyebrow, its count, then a rule to the edge — so the
   seven sections read as chapters instead of one 60-row list. */
.cap-sec { margin-bottom: 14px; }
.cap-sec:last-child { margin-bottom: 0; }
.cap-sec-h {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.cap-sec-h b { flex: none; font-size: 11px; font-weight: 750; letter-spacing: 0; text-transform: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cap-sec-h::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }

.cap-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid transparent; border-left: 3px solid transparent;
  transition: background .12s ease;
}
.cap-row + .cap-row { margin-top: 2px; }
.cap-row:hover { background: var(--surface-2); }
.cap-row b { display: block; font-size: 13px; font-weight: 650; color: var(--text); }
.cap-row span { display: block; margin-top: 1px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.cap-row em {
  font-style: normal; margin-left: 7px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--bg-2); color: var(--text-2);
}
/* Dangerous capability: an amber rail down the row. One rail per row reads as
   a class of permission; an icon on every second row reads as noise. */
.cap-row.cap-danger { border-left-color: var(--warning); background: rgba(245,158,11,.05); }
.cap-row.cap-danger:hover { background: rgba(245,158,11,.09); }
.cap-row.cap-danger em { background: rgba(245,158,11,.16); color: #b45309; }
/* Locked: the actor does not hold this, so they cannot grant it. Still legible
   — greying only the control reads as a bug, not as a boundary. */
.cap-row.locked { background: var(--surface-2); border-color: var(--border); border-left-color: var(--border-strong); }
.cap-row.locked:hover { background: var(--surface-2); }
.cap-row.locked b, .cap-row.locked span, .cap-row.locked em { color: var(--muted); }
.cap-row.locked em { background: var(--surface); }

/* Tri-state control. The value is the signal: Inherit stays quiet, Allow goes
   green, Block goes red, so one scan down the column finds every override. */
.cap-state {
  flex: none; min-width: 118px; padding: 6px 10px; border-radius: 9px;
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  font-family: var(--font); font-size: 12.5px; font-weight: 700; cursor: pointer; outline: none;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.cap-state:hover { border-color: var(--primary); }
.cap-state:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.cap-state[data-state="allow"] { border-color: rgba(16,185,129,.5); background: rgba(16,185,129,.1); color: #047857; }
.cap-state[data-state="block"] { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.09); color: #b91c1c; }
.cap-state:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--border); cursor: not-allowed; }
/* Read-only variant (My access): the same three states as a pill, not a
   control, so that tab can never look editable. */
span.cap-state { min-width: 0; padding: 3px 10px; border-radius: 999px; font-size: 11px; cursor: default; }
span.cap-state:hover { border-color: var(--border-strong); }

.cap-lock { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 11.5px; font-weight: 650; color: var(--muted); white-space: nowrap; cursor: help; }

/* Live count under the matrix — the answer to "what did I just build?". */
.cap-summary {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 13px; border-radius: var(--radius-sm);
  background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.2);
  font-size: 12.5px; font-weight: 650; color: var(--text-2);
}
.cap-summary b { font-weight: 800; color: var(--primary-700); font-variant-numeric: tabular-nums; }
.cap-summary .btn { margin-left: auto; }

/* ===========================================================================
   OFFICES / BRANCHES (br-)
   =========================================================================== */
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(288px, 100%), 1fr)); gap: 16px; }
.br-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 18px 20px 16px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.br-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.br-card-top { display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; }
.br-card h4 { margin: 0; font-size: 15.5px; font-weight: 750; letter-spacing: -.01em; }
.br-card-sub { margin-top: 3px; font-size: 12.5px; color: var(--text-2); }
.br-card-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; color: var(--muted); }
/* "3 members · 41 clients" as two real stats — the volumes are why an office
   is an object worth a card, and each one drills into a filtered list. */
.br-card-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.br-card-stat {
  flex: 1 1 96px; min-width: 0; padding: 9px 12px;
  border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border);
}
.br-card-stat b { display: block; font-size: 18px; font-weight: 780; line-height: 1.15; font-variant-numeric: tabular-nums; }
.br-card-stat span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.br-card-stat[data-drill] { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.br-card-stat[data-drill]:hover { border-color: rgba(99,102,241,.45); background: rgba(99,102,241,.05); }
.br-card-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
/* The default office is where every unassigned client and every new member
   lands. It outranks the rest of the grid, so it looks like it. */
.br-card.is-default { border-color: rgba(99,102,241,.4); box-shadow: 0 12px 34px rgba(71,65,154,.1); }
.br-default-pill {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; background: var(--grad); color: #fff; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(99,102,241,.3);
}
/* Archived office: retained because clients and audit rows still name it, so
   it stays legible but reads as inert. */
.br-card.br-archived { background: var(--surface-2); border-style: dashed; box-shadow: none; }
.br-card.br-archived:hover { transform: none; box-shadow: none; }
.br-card.br-archived h4 { color: var(--text-2); }
.br-card.br-archived .br-card-stat { background: var(--surface); }

/* Office chips — the Offices column of the members table, and the office list
   on a role/member summary. */
.br-chips { display: flex; flex-wrap: wrap; gap: 5px; max-width: 260px; }
.br-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--bg-2);
  font-size: 11.5px; font-weight: 650; color: var(--text-2); white-space: nowrap;
}
.br-chip.is-primary { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.26); color: var(--primary-700); font-weight: 750; }
.br-chip.more { background: none; color: var(--muted); }
.br-chip.br-archived { background: none; border-style: dashed; color: var(--muted); text-decoration: line-through; }

/* Office picker — the Edit-access office list, and the archive "move N to…"
   dialog. Bounded and scrollable: an org may hold 50 offices. */
.br-picker {
  display: grid; gap: 2px; max-height: 208px; overflow-y: auto; padding: 6px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
}
.br-picker:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.13); }
.br-picker label {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.br-picker label:hover { background: var(--surface-2); }
.br-picker input { width: 15px; height: 15px; flex: none; accent-color: var(--primary); cursor: pointer; }
.br-picker label span { margin-left: auto; padding-left: 8px; font-size: 11.5px; font-weight: 650; color: var(--muted); }
.br-picker-empty { padding: 14px 10px; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ===========================================================================
   ACCESS LOG (al-)
   =========================================================================== */
.al-list { display: flex; flex-direction: column; }
.al-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--border); }
.al-row:first-child { padding-top: 2px; }
.al-row:last-child { padding-bottom: 2px; border-bottom: none; }
.al-icon {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 10px; background: var(--bg-2); color: var(--text-2); font-size: 15px;
}
/* Tone by action, so the column scans: a revoke should not look like a rename. */
.al-icon[data-tone="ok"] { background: rgba(16,185,129,.13); color: #047857; }
.al-icon[data-tone="info"] { background: rgba(99,102,241,.12); color: var(--primary-600); }
.al-icon[data-tone="warn"] { background: rgba(245,158,11,.15); color: #b45309; }
.al-icon[data-tone="danger"] { background: rgba(239,68,68,.11); color: #b91c1c; }
.al-main { flex: 1 1 auto; min-width: 0; }
.al-main > b { font-size: 13.5px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.al-meta { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; color: var(--muted); }
.al-meta b { font-size: 12px; font-weight: 700; color: var(--text-2); }
.al-detail { margin-top: 8px; }
.al-detail > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 11.5px; font-weight: 700; color: var(--primary-600);
}
.al-detail > summary::-webkit-details-marker { display: none; }
.al-detail > summary::before { content: "▸"; font-size: 10px; }
.al-detail[open] > summary::before { content: "▾"; }
/* before/after pairs. `span` is the label column, `b` the value; del/ins carry
   the change itself, so the diff needs no extra class names. */
.al-detail-grid {
  display: grid; grid-template-columns: minmax(0, 148px) minmax(0, 1fr); gap: 5px 14px;
  margin-top: 9px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; line-height: 1.55;
}
.al-detail-grid span { color: var(--muted); font-weight: 650; }
.al-detail-grid b { color: var(--text); font-weight: 650; overflow-wrap: anywhere; }
.al-detail-grid del { color: var(--muted); text-decoration: line-through; }
.al-detail-grid ins { color: var(--text); font-weight: 700; text-decoration: none; }
/* In-card empty state — never the global .empty, which forces 60px padding. */
.al-empty {
  text-align: center; color: var(--muted); font-size: 13px; padding: 26px 16px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2);
}
.al-empty b { display: block; margin-bottom: 3px; font-size: 13.5px; color: var(--text-2); }

/* ---------------------------------------------------------------------------
   Phone. 749px rather than this file's usual 720px because the members table
   is the widest thing in the product and needs to hand over to the scroll
   container before the sidebar breakpoint does anything.
   --------------------------------------------------------------------------- */
@media (max-width: 749px) {
  /* Tabs fill the row as a segmented control instead of wrapping ragged —
     the .cr-tab / .fin-tab treatment. */
  .tm-tab { flex: 1 1 auto; justify-content: center; text-align: center; padding: 8px 12px; }
  .tm-toolbar { gap: 8px; }
  .tm-input { flex: 1 1 100%; max-width: none; }
  .tm-toolbar .select-mini { flex: 1 1 45%; min-width: 0; }
  /* The table scrolls inside its wrapper. The page body never does. */
  .tm-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tm-table { min-width: 720px; }
  .tm-bulkbar { padding: 11px 13px; border-radius: var(--radius-sm); }
  .tm-bulkbar .btn, .tm-bulkbar .select-mini { flex: 1 1 auto; }
  .tm-banner .btn { margin-left: 0; width: 100%; }
  .rl-grid, .br-grid { grid-template-columns: minmax(0, 1fr); }
  .br-chips { max-width: none; }
  .br-picker { max-height: 176px; }
  /* Row stacks: a 118px control beside a two-line description leaves the
     description about 40px on a 360px screen. */
  .cap-row { grid-template-columns: minmax(0, 1fr); }
  select.cap-state { width: 100%; }
  .cap-fold { padding: 12px 12px 10px; }
  .al-row { padding: 12px 2px; }
  .al-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .al-detail-grid span { margin-top: 6px; }
  .al-detail-grid span:first-child { margin-top: 0; }
}
.fin-vs { color: var(--muted); font-size: 11.5px; }

/* ============================================================
   Leads — lead-collection forms + inbox (all classes ld-/lf- prefixed;
   bare generics like .card/.empty are shared primitives, never redefined)
   ============================================================ */
.ld-hero { background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%); border-radius: var(--radius); color: #fff; padding: 22px 26px; margin-bottom: 16px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
/* Emoji as a flex item: a literal space next to a colour-emoji glyph renders
   almost invisibly, so the icon reads as glued to the word. */
.ld-hero h2 { font-size: 21px; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; }
.ld-hero h2 i, .ld-tab i { font-style: normal; }
.ld-hero p { font-size: 13.5px; opacity: .92; max-width: 620px; line-height: 1.55; }
.ld-hero-stats { display: flex; gap: 22px; }
.ld-stat { text-align: center; }
.ld-stat b { display: block; font-size: 22px; }
.ld-stat span { font-size: 11.5px; opacity: .85; }
.ld-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.ld-tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 13.5px; color: var(--text-2); cursor: pointer; font-family: inherit; }
.ld-tab.active { background: var(--text); color: #fff; border-color: var(--text); }
.ld-row { cursor: pointer; }
.ld-search { flex: 1 1 230px; min-width: 190px; max-width: 340px; }
/* Lead names/emails are anonymous-visitor input — one unbroken 120-char "name"
   would otherwise stretch the table and clip the Status column. */
.ld-cell-name { font-weight: 700; overflow-wrap: anywhere; }
.ld-cell-sub { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.ld-more { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; font-size: 13px; color: var(--text-2); }
.ld-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.ld-pill.new { background: rgba(99, 102, 241, .12); color: #4f46e5; }
.ld-pill.contacted { background: rgba(245, 158, 11, .14); color: #b45309; }
.ld-pill.converted { background: rgba(16, 185, 129, .13); color: #047857; }
.ld-pill.closed { background: rgba(100, 116, 139, .13); color: #475569; }
.ld-form-card { display: flex; flex-direction: column; gap: 10px; }
.ld-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 14px; }
.ld-form-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ld-form-top .ld-pill { flex: none; }
.ld-form-top h4 { font-size: 15.5px; }
.ld-form-meta { font-size: 12.5px; color: var(--muted); }
.ld-link-row { display: flex; gap: 8px; align-items: center; background: var(--surface-2, #f8fafc); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.ld-link-row input { flex: 1; border: none; background: transparent; font-size: 12.5px; color: var(--text-2); font-family: inherit; outline: none; min-width: 0; }
/* Primary verbs on the left, destructive/lifecycle icons pushed right — six equal
   ghost buttons wrapped into a ragged block and gave Delete the same weight as Preview. */
.ld-form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.ld-form-actions .btn i { font-style: normal; }
/* Lifecycle actions (pause / new link / delete) live in the card header as quiet
   icons: as full-width ghost buttons they wrapped into a ragged second row and gave
   Delete the same visual weight as Preview. */
.ld-form-badges { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ld-act-quiet { display: inline-flex; gap: 2px; align-items: center; padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--border); }
.ld-act-quiet .lf-b-mini { width: 28px; height: 28px; }
.ld-act-quiet .lf-b-mini svg { display: block; }
.ld-paused { opacity: .65; }
/* Lead drawer: hero (gradient) + scrolling body + pinned action bar, matching the
   app's .drawer-* shell. Answers are cards, not floating text — a 620px drawer with
   three short answers reads as broken when they just hang in white space. */
.ld-dh { background: var(--grad); }
.ld-dh .dh-sub { overflow-wrap: anywhere; }
.ld-dh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.ld-dh-chips .ld-pill { background: #fff; padding: 6px 12px; font-size: 12px; }
.ld-dh-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  font-size: 12.5px; font-weight: 650; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.ld-dh-chip:hover { background: rgba(255, 255, 255, .28); }
.ld-dh-chip i, .ld-detail-meta i { font-style: normal; flex: none; }
.ld-detail-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
/* flex column + margin-top:auto so values line up across a row even when one
   label wraps to two lines. */
.ld-detail-kv .it { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; min-width: 0; display: flex; flex-direction: column; }
.ld-detail-kv .it > div { margin-top: auto; }
.ld-detail-kv .it.wide { grid-column: 1 / -1; }
.ld-detail-kv .it label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; margin-bottom: 4px; }
.ld-detail-kv .it div { font-size: 14.5px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.ld-detail-empty { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted); }
/* Files a prospect attached: same card language as the answer grid, but a single
   full-width column — a filename plus its field label needs the room. */
.ld-files { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.ld-file {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px;
}
.ld-file-i { flex: none; font-size: 17px; line-height: 1; }
.ld-file-n { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.ld-file-n span { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.ld-file-lock { flex: none; font-size: 13px; opacity: .55; }
/* Paperclip on the inbox row, so "did they send documents?" is answerable without
   opening every lead. */
.ld-clip {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 7px; vertical-align: middle;
  font-size: 11px; font-weight: 700; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.ld-detail-meta { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 9px 13px; margin-top: 8px; overflow-wrap: anywhere; }
.ld-detail-sub { font-size: 12.5px; color: var(--muted); }
.ld-detail-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: none;
  padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface);
}
.ld-status-pick { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
/* Which form am I sending? — an org with several forms can't tell from the title alone. */
.ld-share-what { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; margin-bottom: 16px; }
.ld-share-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; margin-bottom: 3px; }
.ld-share-what b { font-size: 14.5px; }
.ld-share-url { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
/* Builder (inside the wide modal).
   Every control here is styled explicitly: the row inputs sit OUTSIDE a .field
   wrapper (they're a flex row, not a stacked label+input), so the global
   `.field input` rules never reach them and they'd render as raw browser chrome. */
.lf-b-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.lf-b-sec .cp-sub-label { margin-bottom: 0; }
.lf-b-count { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.lf-b-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.lf-b-grid > .span2 { grid-column: 1 / -1; }

.lf-b-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.lf-b-field {
  border: 1px solid var(--border); border-radius: 14px; padding: 11px 12px; background: var(--surface);
  box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s;
}
.lf-b-field:hover { border-color: var(--border-strong); }
.lf-b-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99, 102, 241, .10); }
.lf-b-row { display: flex; gap: 9px; align-items: center; }
.lf-b-num {
  flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--surface-2); color: var(--muted);
  font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.lf-b-label, .lf-b-type, .lf-b-opts input {
  font-family: inherit; color: var(--text); background: var(--surface); outline: none;
  border: 1.5px solid var(--border-strong); border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
.lf-b-label { flex: 1 1 auto; min-width: 0; padding: 10px 13px; font-size: 14.5px; font-weight: 600; }
.lf-b-label::placeholder { font-weight: 500; color: var(--muted); }
.lf-b-type {
  flex: 0 0 auto; width: 138px; padding: 10px 32px 10px 12px; font-size: 13.5px; font-weight: 600;
  color: var(--text-2); cursor: pointer; appearance: none; -webkit-appearance: none; background: var(--surface-2)
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 11px center;
}
.lf-b-label:focus, .lf-b-type:focus, .lf-b-opts input:focus {
  border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99, 102, 241, .14);
}
/* Required reads as a pill you switch on, not a stray checkbox floating in a row. */
.lf-b-req { flex: none; cursor: pointer; user-select: none; }
.lf-b-req input { position: absolute; opacity: 0; width: 0; height: 0; }
.lf-b-req span {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px;
  border: 1.5px solid var(--border-strong); background: var(--surface); white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: var(--muted); transition: all .15s;
}
.lf-b-req span::before { content: "✓"; font-size: 11px; opacity: .3; }
.lf-b-req:hover span { border-color: var(--muted); }
.lf-b-req input:checked + span { border-color: var(--primary); background: rgba(99, 102, 241, .1); color: var(--primary-600); }
.lf-b-req input:checked + span::before { opacity: 1; }
.lf-b-req input:focus-visible + span { box-shadow: 0 0 0 4px rgba(99, 102, 241, .14); }

.lf-b-tools { display: flex; gap: 2px; flex: none; }
.lf-b-mini {
  border: none; background: transparent; border-radius: 8px; width: 30px; height: 30px; cursor: pointer;
  font-size: 13px; line-height: 1; color: var(--muted); flex: none; font-family: inherit;
  display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.lf-b-mini:hover { background: var(--surface-2); color: var(--text); }
.lf-b-mini.danger:hover { background: rgba(239, 68, 68, .1); color: var(--danger); }
.lf-b-mini:disabled { opacity: .25; cursor: default; background: transparent; color: var(--muted); }

.lf-b-opts { margin: 10px 0 2px 33px; }
.lf-b-opts label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-2); margin-bottom: 5px; }
.lf-b-opts label span { font-weight: 500; color: var(--muted); }
.lf-b-opts input { width: 100%; padding: 9px 12px; font-size: 13.5px; background: var(--surface-2); border-style: dashed; }
.lf-b-opts input:focus { border-style: solid; }
/* File fields swap the comma-separated options input for a count picker; it reuses
   the .lf-b-type chrome so both selects in a row read as the same control. */
.lf-b-maxfiles {
  font-family: inherit; color: var(--text-2); font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--border-strong); border-radius: 10px; outline: none;
  padding: 9px 32px 9px 12px; appearance: none; -webkit-appearance: none;
  background: var(--surface-2)
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 11px center;
  transition: border-color .15s, box-shadow .15s;
}
.lf-b-maxfiles:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99, 102, 241, .14); }
.lf-b-opts .hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

.lf-b-add {
  width: 100%; margin-bottom: 22px; padding: 12px; border: 1.5px dashed var(--border-strong); border-radius: 12px;
  background: var(--surface-2); font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-2);
  cursor: pointer; transition: all .15s;
}
.lf-b-add:hover { border-color: var(--primary); color: var(--primary-600); background: rgba(99, 102, 241, .06); }

@media (max-width: 720px) {
  .lf-b-grid { grid-template-columns: 1fr; }
  /* Wrapping a flex row here strands the arrows on a third line with a dead gap —
     lay the three parts out explicitly instead: label, then type + tools, then the
     Required pill full-width (easier to hit with a thumb than an inline chip). */
  .lf-b-row {
    display: grid; gap: 8px; align-items: center;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "num label label" "type type tools" "req req req";
  }
  .lf-b-num { grid-area: num; }
  .lf-b-label { grid-area: label; }
  .lf-b-type { grid-area: type; width: auto; }
  .lf-b-tools { grid-area: tools; }
  .lf-b-req { grid-area: req; }
  .lf-b-req span { width: 100%; justify-content: center; padding-top: 9px; padding-bottom: 9px; }
  .lf-b-opts { margin-left: 0; }
}

/* ---------------- possible-duplicate warning (add / edit client) ----------------
   Rendered inside the client form, just above its footer, when the server soft-blocks
   a record that matches one the workspace already holds. Amber, not red: nothing has
   failed and the next press of the same button goes through. Feature-prefixed (dupw-)
   because this sits inside a modal body already full of generic .field/.card markup. */
.dupw {
  border: 1px solid rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .07);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px;
}
.dupw-head { display: flex; gap: 11px; align-items: flex-start; }
.dupw-icon { font-size: 16px; line-height: 1.35; }
.dupw-title { font-size: 14px; font-weight: 700; color: #92400e; }
.dupw-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-top: 3px; }
.dupw-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dupw-row {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.dupw-row-main { min-width: 0; }
.dupw-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.dupw-contact { font-size: 12.5px; color: var(--text-2); margin-top: 2px; word-break: break-word; }
.dupw-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dupw-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.dupw-chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em; padding: 2px 8px; border-radius: 999px;
  background: rgba(245, 158, 11, .14); color: #92400e; border: 1px solid rgba(245, 158, 11, .32);
}
.dupw-open { flex-shrink: 0; }
.dupw-locked { flex-shrink: 0; font-size: 11.5px; color: var(--muted); font-style: italic; }

@media (max-width: 720px) {
  .dupw-row { flex-direction: column; align-items: stretch; }
  .dupw-open { width: 100%; }
}