/* theme.css — shared design tokens for every mScreener surface.
   Three themes selected by html[data-theme]: dark (navy/gold, default), sand (warm light), white (white with navy nav).
   Token names cover the landing/gate vocabulary (--surface, --card, --soft ...), the generated screener
   vocabulary (--bg-card, --bg-row, --dim, --amber ...) and the navigation vocabulary (--nav-*).
   html[data-theme] beats the :root blocks in screener.css, so this file can be loaded after it. */

/* One type vocabulary for every surface. education.css aliases --edu-* to these and
   ms-redesign.css restates them; nothing should carry a literal font stack again. */
html {
  --ms-serif:"Cormorant Garamond", Georgia, serif;
  --ms-sans:"DM Sans", -apple-system, "Segoe UI", sans-serif;
  --ms-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}

html, html[data-theme="dark"] {
  --bg:#050810; --surface:#080D1A; --card:#0C1122; --card-raised:#101828;
  --bg-card:#0A1020; --bg-row:#0B1122; --bg-hover:#111A2F; --bg-active:#17213A; --bg-thead:#070B15;
  --border:rgba(234,231,223,.10); --border-hi:rgba(196,164,75,.32); --border-gold:rgba(196,164,75,.30);
  --text:#EAE7DF; --soft:#B0B8C9; --muted:#939DB0; --dim:#8A93A6;
  --gold:#C4A44B; --gold-light:#DFC06E; --amber:#C4A44B; --amber-dim:rgba(196,164,75,.14);
  --blue:#7A98D8; --blue-dim:rgba(111,143,212,.16); --green:#5FBA8A; --green-dim:rgba(95,186,138,.16);
  --red:#E06775; --red-dim:rgba(224,103,117,.16);
  --acc-early:#C4A44B; --acc-mid:#7A98D8;
  --nav-bg:#070B15; --nav-menu-bg:#0A1020; --nav-text:#EAE7DF; --nav-soft:#B0B8C9;
  --nav-border:rgba(196,164,75,.24); --nav-accent:#DFC06E; --nav-hover:rgba(255,255,255,.06);
  --shadow:0 24px 60px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:rgba(196,164,75,.35); --focus-ring:#DFC06E; --border-ctl:#8A7640; --scrim:rgba(3,5,12,.62);
  --frame-bg:#070B15; --frame-border:rgba(196,164,75,.30);
  /* --border-hi is decoration and sits at ~1.8:1; a control's own edge has to clear
     3:1, so gold-tinted buttons take this instead. --focus-ring-nav exists because
     the white theme's nav is dark navy and the page focus ring vanishes on it. */
  --border-gold-ctl:#8A7640; --focus-ring-nav:#DFC06E;
  --on-gold:#0A0D14; --on-nav-accent:#0A0D14;
  --gold-soft:rgba(196,164,75,.08); --gold-soft-hi:rgba(196,164,75,.16); --gold-line:rgba(196,164,75,.18);
  --grid-line:rgba(196,164,75,.024); --sheen:rgba(255,255,255,.028); --logo-shadow:rgba(0,0,0,.36);
  color-scheme:dark;
}

html[data-theme="sand"] {
  --bg:#F2EBDD; --surface:#F9F4EA; --card:#FFFCF6; --card-raised:#F3ECDF;
  --bg-card:#FFFCF6; --bg-row:#FBF7EF; --bg-hover:#EFE7D7; --bg-active:#E6DAC5; --bg-thead:#F0E8D8;
  --border:rgba(80,60,30,.16); --border-hi:rgba(140,105,40,.48); --border-gold:rgba(140,105,40,.42);
  --text:#1F1A12; --soft:#4A4336; --muted:#665D4E; --dim:#665D4E;
  --gold:#755813; --gold-light:#5C4510; --amber:#755813; --amber-dim:rgba(117,88,19,.13);
  --blue:#2C56A0; --blue-dim:rgba(44,86,160,.12); --green:#17683F; --green-dim:rgba(23,104,63,.13);
  --red:#A62634; --red-dim:rgba(166,38,52,.12);
  --acc-early:#755813; --acc-mid:#2C56A0;
  --nav-bg:#F9F4EA; --nav-menu-bg:#FFFCF6; --nav-text:#1F1A12; --nav-soft:#4A4336;
  --nav-border:rgba(140,105,40,.30); --nav-accent:#755813; --nav-hover:rgba(80,60,30,.07);
  --shadow:0 20px 50px rgba(70,50,20,.14); --shadow-lg:0 20px 50px rgba(70,50,20,.20);
  --focus:rgba(117,88,19,.30); --focus-ring:#755813; --border-ctl:#8C6B1F; --scrim:rgba(52,38,14,.42);
  --frame-bg:#070B15; --frame-border:rgba(140,105,40,.45);
  --border-gold-ctl:#8C6B1F; --focus-ring-nav:#755813;
  --on-gold:#FBF7EF; --on-nav-accent:#FBF7EF;
  --gold-soft:rgba(117,88,19,.09); --gold-soft-hi:rgba(117,88,19,.17); --gold-line:rgba(117,88,19,.28);
  --grid-line:rgba(140,107,31,.07); --sheen:rgba(255,255,255,.35); --logo-shadow:rgba(70,50,20,.18);
  color-scheme:light;
}

html[data-theme="white"] {
  --bg:#FFFFFF; --surface:#F5F7FA; --card:#FFFFFF; --card-raised:#EEF2F7;
  --bg-card:#FFFFFF; --bg-row:#FAFBFD; --bg-hover:#EEF2F7; --bg-active:#E1E7F0; --bg-thead:#F1F4F8;
  --border:#D8DEE8; --border-hi:rgba(16,32,63,.38); --border-gold:rgba(16,32,63,.32);
  --text:#13182A; --soft:#3E4759; --muted:#59657A; --dim:#59657A;
  --gold:#7A5F1B; --gold-light:#5E4816; --amber:#7A5F1B; --amber-dim:rgba(122,95,27,.12);
  --blue:#1F3A6E; --blue-dim:rgba(31,58,110,.10); --green:#166B41; --green-dim:rgba(22,107,65,.12);
  --red:#B0293A; --red-dim:rgba(176,41,58,.10);
  --acc-early:#7A5F1B; --acc-mid:#1F3A6E;
  --nav-bg:#10203F; --nav-menu-bg:#132648; --nav-text:#F4F6FA; --nav-soft:#BCC6DA;
  --nav-border:rgba(255,255,255,.14); --nav-accent:#DFC06E; --nav-hover:rgba(255,255,255,.09);
  --shadow:0 20px 50px rgba(16,32,63,.12); --shadow-lg:0 20px 50px rgba(16,32,63,.18);
  --focus:rgba(31,58,110,.30); --focus-ring:#1F3A6E; --border-ctl:#5F6B80; --scrim:rgba(16,32,63,.40);
  --frame-bg:#0B1730; --frame-border:rgba(16,32,63,.40);
  --border-gold-ctl:#8C6D1F; --focus-ring-nav:#DFC06E;
  --on-gold:#FFFFFF; --on-nav-accent:#10203F;
  --gold-soft:rgba(122,95,27,.07); --gold-soft-hi:rgba(122,95,27,.14); --gold-line:rgba(122,95,27,.24);
  --grid-line:rgba(16,32,63,.05); --sheen:rgba(16,32,63,.02); --logo-shadow:rgba(16,32,63,.16);
  color-scheme:light;
}

/* ── Screener panel: navigation follows --nav-* in every theme ── */
.topbar { background:var(--nav-bg); border-bottom-color:var(--nav-border); color:var(--nav-text); }
.brand { color:var(--nav-text); }
.brand:hover { background:var(--nav-hover); }
.brand em, .brand-caret { color:var(--nav-accent); }
.topbar-meta { color:var(--nav-soft); }
.nav-menu { background:var(--nav-menu-bg); border-color:var(--nav-border); color:var(--nav-text); }
.nav-label { color:var(--nav-soft); }
.nav-item { color:var(--nav-soft); }
.nav-item:hover { color:var(--nav-text); background:var(--nav-hover); }
.nav-item.active { color:var(--nav-accent); }
.nav-divider { border-top-color:var(--nav-border); }

/* Light themes: replace the hardcoded dark surfaces of the generated screener */
html[data-theme="sand"] .panel-bar, html[data-theme="white"] .panel-bar,
html[data-theme="sand"] .ctx-header, html[data-theme="white"] .ctx-header,
html[data-theme="sand"] .bucket-header, html[data-theme="white"] .bucket-header,
html[data-theme="sand"] .atr-filter-bar, html[data-theme="white"] .atr-filter-bar,
html[data-theme="sand"] .footer, html[data-theme="white"] .footer,
html[data-theme="sand"] .stats-row, html[data-theme="white"] .stats-row,
html[data-theme="sand"] th, html[data-theme="white"] th,
html[data-theme="sand"] .filter-dropdown-hd, html[data-theme="white"] .filter-dropdown-hd { background:var(--bg-thead); }
/* NOTE: the blanket `body` / `button` light-theme fallbacks for the generated screener
   now live in screener.php, scoped to that page. As bare element selectors they beat
   the landing/gate rules (e.g. .nav-burger{background:transparent}) and painted a
   white box on the navy nav bar. */
html[data-theme="sand"] tr.result-row:nth-child(even) td, html[data-theme="white"] tr.result-row:nth-child(even) td { background:var(--bg-row); }
html[data-theme="sand"] .ticker-search:focus-within, html[data-theme="white"] .ticker-search:focus-within { background:var(--bg-card); }
html[data-theme="sand"] #wl-panel, html[data-theme="white"] #wl-panel { border-color:var(--border-hi); }
html[data-theme="sand"] #val-tip, html[data-theme="white"] #val-tip { color:var(--text); background:var(--bg-card); border-color:var(--border-hi); }
html[data-theme="sand"] #val-tip .vt-name, html[data-theme="white"] #val-tip .vt-name { color:var(--text); }
html[data-theme="sand"] #val-tip .vt-calc, html[data-theme="white"] #val-tip .vt-calc,
html[data-theme="sand"] #val-tip .vt-lbl, html[data-theme="white"] #val-tip .vt-lbl { color:var(--muted); }
html[data-theme="sand"] #val-tip .vt-mid, html[data-theme="white"] #val-tip .vt-mid,
html[data-theme="sand"] .wl-icon-btn:hover, html[data-theme="white"] .wl-icon-btn:hover,
html[data-theme="sand"] .wl-icon-btn.has-items, html[data-theme="white"] .wl-icon-btn.has-items,
html[data-theme="sand"] .wl-add-btn:hover, html[data-theme="white"] .wl-add-btn:hover,
html[data-theme="sand"] .wl-add-btn.in-wl, html[data-theme="white"] .wl-add-btn.in-wl,
html[data-theme="sand"] .wl-close:hover, html[data-theme="white"] .wl-close:hover { color:var(--amber); border-color:var(--border-hi); }

/* ── Theme switch (three small buttons) ── */
.ms-theme-switch { display:inline-flex; align-items:center; gap:4px; padding:3px; border:1px solid var(--nav-border); border-radius:999px; }
.ms-theme-switch button {
  appearance:none; border:1px solid transparent; background:transparent; cursor:pointer; color:var(--nav-soft);
  font: 500 12px/1 var(--ms-mono); letter-spacing:.12em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:6px; width:auto; min-height:32px; transition:color .15s, background-color .15s, border-color .15s;
}
.ms-theme-switch button i { width:11px; height:11px; border-radius:50%; border:1px solid rgba(0,0,0,.25); flex:none; }
.ms-theme-switch button[data-ms-theme="dark"] i { background:#0A1020; border-color:#DFC06E; }
.ms-theme-switch button[data-ms-theme="sand"] i { background:#F2EBDD; border-color:#8C6B1F; }
.ms-theme-switch button[data-ms-theme="white"] i { background:#FFFFFF; border-color:#10203F; }
.ms-theme-switch button:hover { color:var(--nav-text); background:var(--nav-hover); }
.ms-theme-switch button[aria-pressed="true"] { color:var(--nav-text); border-color:var(--nav-accent); }
.ms-theme-switch.on-surface { border-color:var(--border-gold); }
.ms-theme-switch.on-surface button { color:var(--muted); }
.ms-theme-switch.on-surface button:hover { color:var(--text); background:var(--bg-hover); }
.ms-theme-switch.on-surface button[aria-pressed="true"] { color:var(--text); border-color:var(--gold); }

/* ── Account panel (slide-over) ── */
.ms-acct-backdrop { position:fixed; inset:0; z-index:9000; background:var(--scrim); }
.ms-acct {
  position:fixed; top:0; right:0; bottom:0; z-index:9001; width:min(420px, 100%); overflow-y:auto;
  background:var(--surface); color:var(--text); border-left:1px solid var(--border-gold); box-shadow:var(--shadow);
  font:15px/1.6 var(--ms-sans); -webkit-font-smoothing:antialiased;
  transform:translateX(100%); transition:transform .25s ease; padding:22px 24px 32px;
}
.ms-acct.open { transform:none; }
.ms-acct[hidden] { display:none; }
.ms-acct *, .ms-acct *::before, .ms-acct *::after { box-sizing:border-box; }
.ms-acct.ms-acct--page { position:static; transform:none; width:100%; max-width:560px; margin:0 auto; border:1px solid var(--border-gold); border-radius:14px; box-shadow:none; }
.ms-acct-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.ms-acct-name { font:600 24px/1.15 var(--ms-serif); margin:0; color:var(--text); }
.ms-acct-role { margin:4px 0 0; font: 500 12px/1 var(--ms-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.ms-acct-close { appearance:none; background:transparent; border:1px solid var(--border-ctl); color:var(--soft); width:36px; height:36px; min-height:36px; border-radius:8px; cursor:pointer; font-size:18px; line-height:1; display:grid; place-items:center; padding:0; }
.ms-acct-close:hover { color:var(--text); border-color:var(--border-gold); background:transparent; }
.ms-acct section { padding:18px 0; border-bottom:1px solid var(--border); }
.ms-acct section:last-of-type { border-bottom:0; }
.ms-acct h3 { margin:0 0 4px; font:600 17px/1.2 var(--ms-sans); letter-spacing:0; text-transform:none; color:var(--text); }
.ms-acct .ms-acct-hint { margin:0 0 12px; color:var(--soft); font-size:14px; }
.ms-acct label { display:block; margin:12px 0 6px; font: 500 12px/1 var(--ms-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--soft); }
.ms-acct input[type="text"], .ms-acct input[type="email"], .ms-acct input[type="password"] {
  width:100%; margin:0; padding:11px 13px; min-height:42px; border-radius:8px; background:var(--card); border:1px solid var(--border-ctl); color:var(--text);
  font:15px var(--ms-sans); outline:none; transition:border-color .15s, box-shadow .15s;
}
.ms-acct input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--focus); }
.ms-acct .ms-acct-actions { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.ms-acct button.ms-btn {
  appearance:none; width:auto; min-height:40px; cursor:pointer; padding:10px 18px; border-radius:8px; font:600 14px var(--ms-sans);
  display:inline-flex; align-items:center; justify-content:center;
  letter-spacing:0; text-transform:none; background:var(--gold); color:var(--on-gold); border:1px solid var(--gold);
  transition:background-color .15s, border-color .15s, color .15s;
}
.ms-acct button.ms-btn:hover { background:var(--gold-light); border-color:var(--gold-light); color:var(--on-gold); }
.ms-acct a.ms-btn-ghost, .ms-acct button.ms-btn-ghost { display:inline-flex; align-items:center; justify-content:center; padding:9px 16px; border-radius:8px; border:1px solid var(--border-ctl); color:var(--soft); font:500 14px var(--ms-sans); text-decoration:none; background:transparent; width:auto; min-height:38px; cursor:pointer; letter-spacing:0; text-transform:none; }
.ms-acct a.ms-btn-ghost:hover, .ms-acct button.ms-btn-ghost:hover { color:var(--text); border-color:var(--border-gold); background:transparent; }
.ms-acct a.ms-btn-ghost.danger { color:var(--red); }
.ms-acct .ms-acct-msg { margin:10px 0 0; font-size:14px; color:var(--soft); min-height:1.2em; }
.ms-acct .ms-acct-msg.ok { color:var(--green); }
.ms-acct .ms-acct-msg.err { color:var(--red); }
.ms-acct .ms-theme-switch { margin-top:6px; }
.ms-acct-foot { display:flex; gap:10px; flex-wrap:wrap; padding-top:18px; }
.ms-acct-readonly { margin:0; color:var(--soft); font-size:14px; }
.ms-acct-readonly strong { color:var(--text); font-weight:500; }
@media (prefers-reduced-motion: reduce) { .ms-acct { transition:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Interactive states — one behaviour for every control, in every theme.
   Rest / hover / active / focus-visible / disabled. Keyboard users always get
   a visible ring; nothing removes an outline without replacing it.
   ═══════════════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* Text fields keep the ring tight to the box so it reads as one control. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* Navigation carries its own ring. In the white theme the nav is dark navy while the
   page is white, so the page's --focus-ring (#1F3A6E) landed at 1.45:1 against it and
   a keyboard user tabbing the nav saw nothing at all. */
.topbar :focus-visible,
.nav-menu :focus-visible,
.edu-nav :focus-visible,
.ms-edu-bar :focus-visible { outline-color: var(--focus-ring-nav); }

button:not(:disabled):active,
.gate-button:active,
.edu-btn:not(:disabled):active,
.ms-btn:not(:disabled):active,
.ms-btn-ghost:active,
.nav-cta:active,
.btn:active { transform: translateY(1px); }

button:disabled,
input:disabled, select:disabled, textarea:disabled,
[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
button:disabled:hover, [aria-disabled="true"]:hover { transform: none; }

/* Motion: honour the OS preference everywhere, including the generated screener. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Generated screener — token normalisation.
   web/screener.css is inlined at generation time and still carries a handful of
   dark-only literals (and an orange #f5a623 accent that fights the gold token).
   These rules are the same corrections, shipped as an asset so they apply to the
   screener HTML that is already deployed, in all three themes.
   ═══════════════════════════════════════════════════════════════════════════ */
.filter-dropdown, #val-tip { background: var(--bg-card); border-color: var(--border-hi); }
#wl-panel { background: var(--bg-card); border-color: var(--border-hi); }
.filter-dropdown-hd { background: var(--bg-thead); }
.ticker-search { background: var(--bg-card); }
.ticker-search:focus-within { border-color: var(--border-hi); background: var(--bg-card); }
tr.result-row:nth-child(even) td,
tr.result-row:nth-child(even) td.col-ticker { background: var(--bg-row); }

/* Selected / active accents follow --amber instead of the legacy orange. */
.filter-tag.sel { background: var(--amber-dim); color: var(--amber); border-color: var(--border-hi); }
.val-dir.on { color: var(--amber); border-color: var(--border-hi); background: var(--amber-dim); }
.val-na-btn.show { color: var(--green); border-color: var(--border-hi); }
.val-na-btn.hide { color: var(--red); border-color: var(--border-hi); }
.val-tbl tr.val-active .val-lbl { color: var(--amber); }

/* Valuation tooltip */
#val-tip { color: var(--text); box-shadow: var(--shadow-lg); }
#val-tip .vt-name { color: var(--text); }
#val-tip .vt-calc, #val-tip .vt-lbl { color: var(--muted); }
#val-tip .vt-good { color: var(--green); }
#val-tip .vt-mid  { color: var(--amber); }
#val-tip .vt-bad  { color: var(--red); }
#val-tip .vt-note { color: var(--dim); border-top-color: var(--border); }

/* Watchlist */
.wl-icon-btn:hover, .wl-icon-btn.has-items { color: var(--amber); border-color: var(--border-hi); }
.wl-add-btn:hover { color: var(--amber); border-color: var(--border-hi); background: var(--amber-dim); }
.wl-add-btn.in-wl { color: var(--amber); border-color: var(--border-hi); }
#wl-panel { border-color: var(--border-hi); }
.wl-hdr { background: var(--bg-thead); border-bottom-color: var(--border); }
.wl-close { border-color: var(--border); }
.wl-close:hover { color: var(--amber); border-color: var(--border-hi); box-shadow: 0 0 0 3px var(--focus); }
.wl-bar { border-bottom-color: var(--border); }
.wl-body::-webkit-scrollbar-thumb { background: var(--border-hi); }
.wl-row:hover { background: var(--bg-hover); }

/* Screener controls: hit areas. The generated page ships these at 15-25px tall, and
   screener.css is inlined at generation time, so this is the only route to the pages
   already deployed. Fold into screener.css when the screener is next regenerated. */
.filter-reset { min-height: 30px; padding: 6px 10px; display: inline-flex; align-items: center; }
.bucket-toggle { min-width: 30px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.filter-box-btn { min-height: 30px; display: inline-flex; align-items: center; }
.wl-icon-btn { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; }

/* Screener controls: a boundary that actually meets 3:1 against its surface. */
.filter-tag, .val-dir, .val-na-btn, .val-inp, .wl-icon-btn, .wl-add-btn, .wl-close,
.filter-chip, .ticker-search { border-color: var(--border-ctl); }
.filter-tag:hover, .val-dir:hover, .val-na-btn:hover { border-color: var(--border-hi); color: var(--text); }

/* Screener transitions: named properties only — never `all`. */
.filter-tag, .val-dir, .val-na-btn { transition: background-color .12s, border-color .12s, color .12s; }

/* Live-now overrides for inline styles emitted by the deployed screener JS.
   The JS itself is fixed too, but it only reaches the site on the next screening run. */
.chart-empty a[target="_blank"] { background: var(--amber) !important; color: var(--on-gold) !important; }
/* The topbar subtitle carries an inline color:var(--dim) in the deployed HTML. --dim is
   a page token and goes dark in the white theme, where the topbar stays navy — 2.74:1.
   output.py no longer emits it; this covers the pages already generated, and can be
   dropped after the next screening run. !important is needed to beat the inline style. */
.topbar-meta span { color: var(--nav-soft) !important; }
.wl-bucket-hdr[data-wl-bucket="Late Stage 1"]  { border-left-color: var(--amber) !important; }
.wl-bucket-hdr[data-wl-bucket="Early Stage 2"] { border-left-color: var(--green) !important; }
.wl-bucket-hdr[data-wl-bucket="Mid Stage 2"]   { border-left-color: var(--blue)  !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   Reader chrome (--rb-*).
   education.php and research.php serve a document written elsewhere, with its own
   :root palette, and must not load theme.css — html[data-theme] outranks :root and
   would repaint the author's design. So the bar above the document uses this private
   namespace instead, emitted inline for the active theme by ms_reader_chrome().
   ms_reader_chrome() in _ms_theme.php owns the per-theme values — one source, not two.
   What stays here is the dark fallback, for the case where that block never arrives.
   ═══════════════════════════════════════════════════════════════════════════ */
html {
  --rb-bg:#070B15; --rb-text:#EAE7DF; --rb-soft:#B0B8C9;
  --rb-accent:#DFC06E; --rb-border:rgba(196,164,75,.30); --rb-hover:rgba(255,255,255,.06); --rb-ok:#7FC294; --rb-ctl:#6A6E79;
}

/* ── Invite management (admin account panel) ─────────────────────────────── */
.ms-acct .ms-invite-link { margin-top:12px; }
.ms-acct .ms-invite-link label { display:block; font-size:13px; color:var(--soft); margin-bottom:6px; }
.ms-acct .ms-invite-linkrow { display:flex; gap:8px; align-items:center; }
.ms-acct .ms-invite-url { flex:1; min-width:0; font-family:"IBM Plex Mono",Consolas,monospace; font-size:12px; padding:8px 10px; background:var(--card); border:1px solid var(--border-ctl); color:var(--text); border-radius:4px; }
.ms-acct .ms-invite-list { margin-top:16px; display:flex; flex-direction:column; }
.ms-acct .ms-invite-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border); }
.ms-acct .ms-invite-email { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--text); }
.ms-acct .ms-invite-status { font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; border-radius:999px; border:1px solid var(--border); color:var(--muted); flex-shrink:0; }
.ms-acct .ms-invite-status.is-active { color:var(--green); border-color:var(--green); }
.ms-acct .ms-invite-status.is-invited { color:var(--amber); border-color:var(--amber); }
.ms-acct .ms-invite-status.is-expired { color:var(--red); border-color:var(--red); }
.ms-acct .ms-invite-revoke { background:transparent; border:1px solid var(--border-ctl); color:var(--soft); font-size:12px; padding:5px 12px; border-radius:4px; cursor:pointer; flex-shrink:0; }
.ms-acct .ms-invite-revoke:hover { border-color:var(--red); color:var(--red); }

/* ── One-time welcome overlay (invited users, first screener visit) ───────── */
.ms-welcome { position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(6,10,20,.62); }
.ms-welcome-card { width:100%; max-width:420px; background:var(--card); border:1px solid var(--border-gold); border-radius:12px; padding:30px 28px; box-shadow:0 24px 60px rgba(0,0,0,.4); text-align:center; }
.ms-welcome-card h2 { margin:0 0 12px; font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; font-size:26px; line-height:1.15; color:var(--text); }
.ms-welcome-card p { margin:0 0 22px; color:var(--soft); font-size:14px; line-height:1.7; }
.ms-welcome-card .ms-btn { width:100%; }