:root {
  --navy: #0b1a2e;
  --navy-deep: #060f1d;
  --navy-mid: #0e2240;
  --cyan: #00c8c8;
  --cyan-bright: #00e5e5;
  --white: #f0f4f8;
  --white-muted: #9babc4;
  --white-dim: #8794ad;
  --warm: #e8a838;
  --green: #4ecb71;
  --border: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.1);

  /* Two-rail layout — Phase 5a scaffolding (puna/planning/global-puna-analyst-v1.md § 3.4).
     Left rail = the existing sidebar (240px). Right rail = NEW, locked
     equal width per Clint 2026-05-04 (§ 3.4.5 Q-5.1). Bottom Puna bar
     centers between them via these vars in Phase 5b+ once the right
     rail goes visible; today (Phase 5a) the rail is display:none and
     the bar still uses left:240px; right:0. */
  --left-rail-w: 240px;
  --right-rail-w: 320px;
  /* Reserved band at the bottom of the viewport for the Puna agent
     bar — page content + the side rails stop here, so the bar always
     sits in clean dedicated space (Claude-style footer band).
     Matches: bar height (~50px) + 18px bottom gap + 18px top breathing
     = 86px total. */
  --bar-band-h: 60px;

  /* Legacy vars for app shell — map to new palette */
  --bg: #060f1d;
  --surface: #0b1a2e;
  --text: #f0f4f8;
  --muted: #9babc4;
  --dim: #8794ad;
  --accent: #00c8c8;
  --white: #f0f4f8;
  --amber: #e8a838;
  --red: #ef4444;
  --warn: #ff5c5c;
  --warn-bg: rgba(255,92,92,0.10);
  --warn-border: rgba(255,92,92,0.40);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); }

/* ========== LOGIN SCREEN (puna.earth look & feel) ========== */
#login-screen {
  --lg-navy: #0b1a2e;
  --lg-navy-deep: #060f1d;
  --lg-cyan: #00c8c8;
  --lg-cyan-bright: #00e5e5;
  --lg-cyan-dim: rgba(0, 200, 200, 0.12);
  --lg-white: #f0f4f8;
  --lg-white-muted: #9babc4;
  --lg-white-dim: #8794ad;
  --lg-border: rgba(255, 255, 255, 0.06);
  --lg-border-light: rgba(255, 255, 255, 0.1);
  --lg-error: #ff6b7a;
  --lg-success: #5fe4b4;
  --lg-font-body: 'Inter', -apple-system, sans-serif;
  --lg-font-mono: 'JetBrains Mono', monospace;

  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  background-color: var(--lg-navy-deep);
  color: var(--lg-white);
  font-family: var(--lg-font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  opacity: 0;
  animation: lgPageFadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

@keyframes lgPageFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lgRiseIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes lgCardRise {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lgShimmerSweep {
  0%   { background-position: -150% 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: 250% 0; opacity: 0; }
}
@keyframes lgGlowBreath {
  0%, 100% { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 rgba(0, 200, 200, 0); }
  50%      { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 60px rgba(0, 200, 200, 0.08); }
}
@keyframes lgNavDrop { to { opacity: 1; transform: translateY(0); } }
@keyframes lgPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(0, 200, 200, 0.6); }
  50%      { opacity: 0.3; box-shadow: 0 0 2px rgba(0, 200, 200, 0.2); }
}

#login-screen .top-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--lg-cyan), var(--lg-cyan-bright), var(--lg-cyan));
  z-index: 200;
}

#login-screen #contourCanvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.35;
}

#login-screen .ambient-glow {
  position: absolute; width: 800px; height: 800px; border-radius: 50%;
  filter: blur(120px); z-index: 0; pointer-events: none;
}
#login-screen .glow-1 { top: -200px; right: -100px; background: rgba(0, 200, 200, 0.06); }
#login-screen .glow-2 { bottom: -300px; left: -200px; background: rgba(232, 168, 56, 0.03); }

#login-screen nav {
  position: absolute; top: 3px; left: 0; right: 0; z-index: 100;
  padding: 1.1rem 3rem;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(6, 15, 29, 0.75);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid transparent;
  opacity: 0; transform: translateY(-8px);
  animation: lgNavDrop 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
#login-screen .nav-logo {
  font-family: var(--lg-font-body);
  font-size: 1.2rem; font-weight: 700;
  color: var(--lg-white); letter-spacing: 0.02em; text-decoration: none;
}
#login-screen .nav-logo span { color: var(--lg-cyan); }
#login-screen .nav-back {
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lg-white-muted);
  text-decoration: none; padding: 0.5rem 1.1rem;
  background: transparent;
  border: 1px solid var(--lg-border-light);
  border-radius: 2px; transition: all 0.3s ease;
}
#login-screen .nav-back:hover {
  color: var(--lg-white); border-color: var(--lg-cyan);
  box-shadow: 0 0 12px rgba(0, 200, 200, 0.18);
}

#login-screen main {
  position: relative; z-index: 1; flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 8rem 1.5rem 4rem;
}

#login-screen .login-card {
  position: relative; width: 100%; max-width: 440px;
  background: rgba(11, 26, 46, 0.5);
  border: 1px solid var(--lg-border-light);
  border-radius: 4px;
  padding: 3rem 2.75rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  opacity: 0;
  animation:
    lgCardRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards,
    lgGlowBreath 6s ease-in-out 1.2s infinite;
  overflow: hidden;
}
#login-screen .login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, transparent 30%,
    rgba(0, 229, 229, 0.9) 50%,
    transparent 70%, transparent 100%);
  background-size: 200% 100%; background-position: -150% 0;
  animation: lgShimmerSweep 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
  pointer-events: none; z-index: 2;
}
#login-screen .login-card::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: 4px; padding: 1px;
  background: linear-gradient(135deg,
    rgba(0, 200, 200, 0.35) 0%, transparent 40%,
    transparent 60%, rgba(0, 200, 200, 0.15) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  animation: lgPageFadeIn 1.4s ease 0.9s forwards;
  pointer-events: none;
}

#login-screen .login-tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--lg-font-mono);
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--lg-cyan);
  margin-bottom: 1.5rem;
  padding: 0.4rem 0.9rem;
  background: var(--lg-cyan-dim);
  border: 1px solid rgba(0, 200, 200, 0.15);
  border-radius: 2px;
  opacity: 0;
  animation: lgRiseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
#login-screen .login-tag .dot {
  width: 6px; height: 6px; background: var(--lg-cyan);
  border-radius: 50%;
  animation: lgPulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(0, 200, 200, 0.6);
}

#login-screen .login-card h1 {
  font-family: var(--lg-font-body);
  font-size: 1.85rem; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  color: var(--lg-white);
  opacity: 0;
  animation: lgRiseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}
#login-screen .login-card h1 .accent {
  background: linear-gradient(135deg, var(--lg-cyan), var(--lg-cyan-bright));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
#login-screen .login-sub {
  font-size: 0.98rem; color: var(--lg-white-muted);
  line-height: 1.7; margin-bottom: 2.25rem;
  opacity: 0;
  animation: lgRiseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.82s forwards;
}

#login-screen form {
  display: flex; flex-direction: column; gap: 1rem;
  opacity: 0;
  animation: lgRiseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
}
#login-screen label {
  font-family: var(--lg-font-mono);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lg-white-muted);
  display: block; margin-bottom: 0.55rem; text-align: left;
}
#login-screen input[type="email"] {
  width: 100%;
  font-family: var(--lg-font-body);
  font-size: 1rem; color: var(--lg-white);
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--lg-border-light);
  border-radius: 2px;
  padding: 0.9rem 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  outline: none;
  margin: 0;
}
#login-screen input[type="email"]::placeholder { color: var(--lg-white-dim); }
#login-screen input[type="email"]:hover   { border-color: rgba(255, 255, 255, 0.18); }
#login-screen input[type="email"]:focus   {
  border-color: var(--lg-cyan);
  background: rgba(6, 15, 29, 0.85);
  box-shadow: 0 0 0 3px rgba(0, 200, 200, 0.12);
}

/* Login email shimmer — same travelling cyan glint as the FIND bar
   and the bottom Puna Agent bar. Wrapper sits around the <input> so
   the ::before pseudo can paint the shimmer behind it. Per Clint
   2026-05-04: visual family with the rest of the app's input chrome. */
#login-screen .login-email-shimmer {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
#login-screen .login-email-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, transparent 35%, rgba(0, 229, 229, 0.16) 50%, transparent 65%, transparent 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: mcShimmer 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}
#login-screen .login-email-shimmer input[type="email"] {
  position: relative;
  z-index: 1;
}

#login-screen .btn-primary {
  display: inline-block; width: 100%;
  font-family: var(--lg-font-body);
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2rem;
  background: var(--lg-cyan);
  color: var(--lg-navy-deep);
  border: none; border-radius: 2px;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-top: 0.5rem;
}
#login-screen .btn-primary:hover:not(:disabled) {
  background: var(--lg-cyan-bright);
  box-shadow: 0 0 30px rgba(0, 200, 200, 0.28);
}
#login-screen .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

#login-screen .message {
  font-size: 0.88rem; line-height: 1.6;
  padding: 0.85rem 1rem; border-radius: 2px;
  display: none;
}
#login-screen .message.visible { display: block; }
#login-screen .message.success {
  color: var(--lg-success);
  background: rgba(95, 228, 180, 0.08);
  border: 1px solid rgba(95, 228, 180, 0.25);
}
#login-screen .message.error {
  color: var(--lg-error);
  background: rgba(255, 107, 122, 0.08);
  border: 1px solid rgba(255, 107, 122, 0.25);
}

#login-screen .login-footer {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--lg-border);
  text-align: center;
  opacity: 0;
  animation: lgRiseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}
#login-screen .access-note {
  font-family: var(--lg-font-mono);
  font-size: 0.75rem; letter-spacing: 0.05em;
  color: var(--lg-white-dim);
  line-height: 1.7; margin-bottom: 1.25rem;
}
#login-screen .invite-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--lg-font-body);
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  background: transparent; color: var(--lg-cyan);
  border: 1px solid var(--lg-cyan);
  border-radius: 2px;
  transition: all 0.3s ease;
}
#login-screen .invite-cta:hover {
  background: var(--lg-cyan); color: var(--lg-navy-deep);
  box-shadow: 0 0 24px rgba(0, 200, 200, 0.3);
  transform: translateY(-1px);
}
#login-screen .invite-cta .arrow { transition: transform 0.3s ease; }
#login-screen .invite-cta:hover .arrow { transform: translateX(3px); }

#login-screen .page-footer {
  position: relative; z-index: 1;
  padding: 2rem 3rem;
  border-top: 1px solid var(--lg-border);
  text-align: center;
  font-family: var(--lg-font-mono);
  font-size: 0.75rem;
  color: var(--lg-white-dim);
  letter-spacing: 0.05em;
}
#login-screen .page-footer a { color: var(--lg-white-dim); text-decoration: none; }

@media (max-width: 600px) {
  #login-screen nav { padding: 0.9rem 1.25rem; }
  #login-screen main { padding: 6.5rem 1rem 3rem; }
  #login-screen .login-card { padding: 2.25rem 1.5rem; }
  #login-screen .login-card h1 { font-size: 1.55rem; }
  #login-screen .page-footer { padding: 1.5rem 1.25rem; }
}

/* ========== APP SHELL ========== */
#app { display: none; height: 100vh; }
#app.active { display: flex; flex-direction: column; }

/* Title bar — browser style.
   Background is fully opaque (was 0.85) so feed cards scrolling underneath
   in the watchlist (and any other scroll-heavy view) are fully occluded
   instead of ghosting through the topbar. */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: var(--navy-deep);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 1rem;
  z-index: 2000;
}

/* --- Topbar brand ------------------------------------------------ */
#topbar .topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white);
  letter-spacing: -0.01em;
}
#topbar .topbar-brand:hover { opacity: 0.9; }
#topbar .topbar-brand-mark {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0, 200, 200, 0.18);
  display: inline-block;
}
#topbar .topbar-brand-word {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
#topbar .topbar-brand-word .brand-cyan { color: var(--cyan); font-weight: 600; }

#topbar .topbar-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  display: inline-block;
}

/* --- Current view label ------------------------------------------ */
#topbar .topbar-view {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 0;
  padding: 0.25rem 0.05rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.005em;
  cursor: default;
}
#topbar .topbar-view.is-back { cursor: pointer; color: var(--white-muted); }
#topbar .topbar-view.is-back:hover { color: var(--white); }
#topbar .topbar-view.is-back::before {
  content: '\2190';
  margin-right: 0.3rem;
  font-size: 0.78rem;
  color: var(--white-dim);
}

/* --- Spacer + Team tab ------------------------------------------- */
#topbar .spacer { flex: 1; min-width: 0.5rem; }

#topbar .topbar-team-tab {
  display: none;          /* shown by body.is-staff rule below */
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.22rem 0.7rem 0.22rem 0.85rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.74rem;
  color: var(--white-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  position: relative;
}
body.is-staff #topbar .topbar-team-tab { display: inline-flex; }
#topbar .topbar-team-tab:hover { color: var(--white); border-color: var(--cyan); }
#topbar .topbar-team-tab.active {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.08);
}
#topbar .topbar-team-tab .title-tab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: transparent;
  display: inline-block;
  transition: background 0.18s, box-shadow 0.18s;
}
#topbar .topbar-team-tab.has-pending .title-tab-dot {
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(0, 200, 200, 0.6);
  animation: teamTabPulse 1.6s ease-in-out infinite;
}

/* --- Page Tools (legacy standalone trigger; hidden) --------------- */
/* Kept in the DOM but hidden — the Super User dropdown replaces it
   as the primary trigger. Code that toggles state on this button
   still works (the hide is via the inline style attribute). */
#topbar .topbar-page-tools { display: none !important; }
#topbar .topbar-page-tools-icon { font-size: 0.85rem; line-height: 1; }

/* --- Super User dropdown (replaces the standalone Team tab) ------- */
#topbar .topbar-superuser-wrap {
  position: relative;
  display: none;
}
body.is-staff #topbar .topbar-superuser-wrap { display: inline-block; }
#topbar .topbar-superuser-trigger {
  display: inline-flex !important;       /* override .topbar-team-tab base "display:none" */
}
#topbar .topbar-superuser-caret {
  font-size: 0.7rem;
  margin-left: 0.18rem;
  opacity: 0.7;
}
#topbar .topbar-superuser-trigger[aria-expanded="true"] {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.08);
}
#topbar .topbar-superuser-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: rgba(8, 18, 33, 0.96);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* The display:flex above wins over the browser's default
   [hidden] { display: none } rule, so the menu was rendering on load.
   Restore the hidden behaviour explicitly. AI_BUGS_PLAYBOOK class. */
#topbar .topbar-superuser-menu[hidden] { display: none; }
#topbar .topbar-superuser-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--white-muted);
  font-family: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
#topbar .topbar-superuser-item:hover {
  background: rgba(0, 200, 200, 0.08);
  color: var(--cyan);
}
#topbar .topbar-superuser-item-icon {
  font-size: 0.95rem;
  line-height: 1.4;
  width: 16px;
  flex-shrink: 0;
  text-align: center;
}
#topbar .topbar-superuser-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#topbar .topbar-superuser-item-text strong {
  font-weight: 600;
  color: inherit;
}
#topbar .topbar-superuser-item-text small {
  font-size: 0.66rem;
  color: var(--white-dim);
  letter-spacing: 0.02em;
}

/* --- Improve Puna chip (topbar) ----------------------------------- */
/* Moved 2026-05-01 from sidebar bottom to topbar (Virtual Explorer
   audit, item #7). Small chip so it doesn't compete with the active
   view label or avatar. */
#topbar .topbar-improve {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 200, 200, 0.06);
  border: 1px solid rgba(0, 200, 200, 0.25);
  border-radius: 999px;
  padding: 0.18rem 0.7rem 0.18rem 0.45rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.7rem;
  color: var(--white-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  margin-left: 0.45rem;
}
#topbar .topbar-improve:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.12);
}
#topbar .topbar-improve-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#topbar .topbar-improve-label { white-space: nowrap; }

/* Hide the legacy sidebar Improve Puna chip — relocated to topbar. */
#sidebar-improve-btn { display: none !important; }

/* ============================================================
   §§ STYLES: PAGE-TOOLS-DRAWER — staff-only slide-in drawer.
   Position fixed, slides in from the right when body has class
   has-page-tools-drawer-open. Backdrop dims the rest of the page.
   The drawer is a controller surface — the user UX stays clean
   on the primary page; staff pop the drawer to operate.
   ============================================================ */
.staff-tools-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(2, 8, 18, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1090;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
body.has-page-tools-drawer-open .staff-tools-drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}
.staff-tools-drawer-overlay[hidden] { display: block; }  /* override default hidden so transition works */

.staff-tools-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 92vw);
  background: rgba(8, 18, 33, 0.96);
  border-left: 1px solid var(--border);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, sans-serif;
  box-shadow: -12px 0 32px rgba(0,0,0,0.45);
}
body.has-page-tools-drawer-open .staff-tools-drawer {
  transform: translateX(0);
}
.staff-tools-drawer[hidden] { display: flex; }   /* keep flex layout so transition still runs */

.staff-tools-drawer .std-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem 0.85rem;
  border-bottom: 1px solid var(--border);
}
.staff-tools-drawer .std-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f59e0b;        /* amber, matches the existing TEAM ONLY treatment */
}
.staff-tools-drawer .std-close {
  background: transparent;
  border: none;
  color: var(--white-dim);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.3rem;
  border-radius: 4px;
}
.staff-tools-drawer .std-close:hover { color: var(--white); background: rgba(255,255,255,0.05); }
/* Scroll wrapper — owns the overflow so .std-body + .std-extras share
   one scrollable region. The header stays sticky above. */
.staff-tools-drawer .std-scroll {
  flex: 1;
  min-height: 0;            /* allows the inner content to shrink + scroll */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.staff-tools-drawer .std-body {
  flex: 0 0 auto;
  padding: 1rem 1.1rem 0.6rem;
  font-size: 0.78rem;
  color: var(--white-muted);
  line-height: 1.55;
}
.staff-tools-drawer .std-extras {
  flex: 0 0 auto;
  padding: 0.4rem 1.1rem 1.4rem;
}
.staff-tools-drawer .std-extras:empty { display: none; }
.staff-tools-drawer .std-empty {
  padding: 1.4rem 0.5rem;
  text-align: center;
  color: var(--white-dim);
  font-style: italic;
  font-size: 0.78rem;
}
/* Move the drawer's TEAM TOOLS clone styling under .std-body so the
   amber treatment from #team-tools translates cleanly. */
.staff-tools-drawer .std-section + .std-section { margin-top: 1.2rem; }
.staff-tools-drawer .std-section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: 0.55rem;
}
.staff-tools-drawer .std-blurb {
  margin-bottom: 0.8rem;
}
.staff-tools-drawer .std-btn-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.staff-tools-drawer .std-btn {
  flex: 1 1 0;
  min-width: 130px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 4px;
  padding: 0.55rem 0.8rem;
  color: #f59e0b;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.staff-tools-drawer .std-btn:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
  color: #fcd34d;
}
.staff-tools-drawer .std-folder {
  font-size: 0.7rem;
  background: rgba(245, 158, 11, 0.04);
  border: 1px dashed rgba(245, 158, 11, 0.3);
  padding: 0.6rem 0.7rem;
  border-radius: 4px;
  margin-top: 0.9rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--white-muted);
  line-height: 1.55;
}
.staff-tools-drawer .std-folder strong { color: #f59e0b; font-weight: 600; }

/* Watchlist top "Puna Analyst" strip retired 2026-05-05 — the
   bottom Ask Puna bar now plays its role on every page (per Clint
   2026-05-05: the bar IS the analyst). Markup + handlers stay in
   place so wlxAnalystSend / wlxAnalystToggle keep their bindings,
   even though the surface is no longer visible. */
#wlx-analyst { display: none !important; }

/* Hide the legacy right-rail TEAM TOOLS card — content moves into
   the drawer via punaPageToolsRender(). The element stays in the DOM
   so existing applyBoundaryRoleGating logic doesn't error. */
#team-tools { display: none !important; }

/* Boundary editor (#salar-tools) — relocated into the drawer extras
   on first render. Only relevant when looking at a deposit, so we
   hide it whenever the user is not on Virtual Explorer or the 3D
   deposit page. The inline display:none default + applyBoundaryRoleGating's
   JS toggle still gate visibility for non-staff. */
body:not(.view-explorer):not(.view-deposit3d) .staff-tools-drawer #salar-tools {
  display: none !important;
}
/* When inside the drawer, give the boundary editor card the same
   chrome as the other std-sections (no border-top so it sits flush
   under the section intro above it). */
.staff-tools-drawer #salar-tools {
  margin-top: 0;
}
.staff-tools-drawer #salar-tools .panel-header {
  padding: 0 0 0.4rem 0;
  margin: 0 0 0.5rem 0;
}
/* ============================================================ */

/* --- User avatar + dropdown -------------------------------------- */
#topbar .topbar-user-wrap { position: relative; }
#topbar .topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 0;
  padding: 0.15rem 0.3rem 0.15rem 0.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
#topbar .topbar-user:hover { background: rgba(255, 255, 255, 0.04); }
#topbar .topbar-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0, 200, 200, 0.14);
  border: 1px solid rgba(0, 200, 200, 0.4);
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#topbar .topbar-chevron {
  font-size: 0.62rem;
  color: var(--white-dim);
  line-height: 1;
}
#topbar .topbar-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  /* 240px → 280px (2026-05-10) so a 30-char email like
     clint_vanmarrewijk@zelandez.com fits on one line without
     wrapping. `overflow-wrap: anywhere` still kicks in for
     genuinely-longer emails. */
  min-width: 280px;
  background: var(--navy-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  padding: 0.65rem 0.85rem 0.5rem;
  z-index: 9000;
  font-family: 'Inter', -apple-system, sans-serif;
}
#topbar .topbar-user-menu[hidden] { display: none; }
#topbar .topbar-user-menu-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.25rem;
}
#topbar .topbar-user-menu-email {
  font-size: 0.82rem;
  color: var(--white);
  /* `break-all` (the previous rule) wraps mid-domain (e.g.
     "clint@zelandez.c\nom"). `anywhere` lets the browser try a
     word-boundary first (the `@` or a `.`), only falling back to
     mid-token break when nothing fits. See AI_BUGS_PLAYBOOK entry
     "Email wrapped mid-domain in user menu (2026-05-10)". */
  overflow-wrap: anywhere;
  word-break: normal;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0.4rem;
}
#topbar .topbar-user-menu-action {
  background: transparent;
  border: 0;
  padding: 0.4rem 0;
  font-size: 0.82rem;
  color: var(--white-muted);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
#topbar .topbar-user-menu-action:hover { color: var(--cyan); }

/* Zelandez-only tier toggle — sits in the user menu, lets staff
   flip between unlimited and free-tier views for testing. */
#topbar .topbar-tier-toggle {
  border-top: 1px solid var(--border-light);
  margin-top: 0.45rem;
  padding-top: 0.55rem;
}
#topbar .topbar-tier-toggle[hidden] { display: none; }
#topbar .topbar-tier-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}
#topbar .topbar-tier-row input { position: absolute; opacity: 0; pointer-events: none; }
#topbar .topbar-tier-slider {
  position: relative;
  flex-shrink: 0;
  width: 30px; height: 17px;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border);
  border-radius: 17px;
  transition: background 0.18s, border-color 0.18s;
  margin-top: 2px;
}
#topbar .topbar-tier-slider::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--white-muted);
  transition: transform 0.18s, background 0.18s;
}
#topbar .topbar-tier-row input:checked + .topbar-tier-slider {
  background: rgba(232,168,56,0.30);
  border-color: #e8a838;
}
#topbar .topbar-tier-row input:checked + .topbar-tier-slider::after {
  transform: translateX(13px);
  background: #e8a838;
}
#topbar .topbar-tier-text { display: flex; flex-direction: column; gap: 2px; }
#topbar .topbar-tier-text strong { font-size: 12px; color: var(--white); font-weight: 600; }
#topbar .topbar-tier-text small { font-size: 10.5px; color: var(--white-dim); }

/* Hide legacy elements that other code might still reach for. */
#topbar .title-dots,
#topbar .title-tabs,
#topbar .user-email,
#topbar .btn-logout { display: none !important; }
#topbar .title-tab-current[hidden],
#topbar .title-tab-current { display: none !important; }

#topbar .title-tabs {
  display: flex;
  height: 100%;
  gap: 0;
}

#topbar .title-tab {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 0.7rem;
  color: var(--white-dim);
  border-right: 1px solid var(--border);
  cursor: default;
  position: relative;
}

#topbar .title-tab.active {
  color: var(--white);
  background: rgba(0, 200, 200, 0.06);
}

/* Active tab underline — gradient bar with a soft cyan glow so it
   visually rhymes with the 3px cyan strip at the very top of the
   app shell. The gradient stops echo the login screen's cyan accent. */
#topbar .title-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-bright) 50%, var(--cyan) 100%);
  box-shadow: 0 0 12px rgba(0, 200, 200, 0.55), 0 1px 6px rgba(0, 200, 200, 0.35);
}

#topbar .spacer {
  flex: 1;
}

#topbar .user-email {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--white-dim);
  margin-right: 12px;
}

#topbar .btn-logout {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--white-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

#topbar .btn-logout:hover {
  color: var(--white);
}

/* Main content */
#main {
  margin-top: 36px;
  display: flex;
  flex: 1;
  height: calc(100vh - 36px);
  overflow: hidden;
}

/* Sidebar */
#sidebar {
  width: 240px;
  min-width: 240px;
  background: rgba(6, 15, 29, 0.6);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Inter', -apple-system, sans-serif;
}
/* Sidebar brand */
.sidebar-brand {
  padding: 0.5rem 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
}

.sidebar-brand .brand-cyan {
  color: var(--cyan);
  font-weight: 700;
}

/* Sidebar nav sections */
.sidebar-section {
  padding: 0.45rem 0.9rem 0.2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.sidebar-item {
  padding: 0.4rem 0.9rem;
  font-size: 0.72rem;
  color: var(--white-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: default;
  position: relative;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}

.sidebar-item.active {
  background: rgba(0, 200, 200, 0.14);
  color: var(--cyan);
  font-weight: 600;
}

/* Active sidebar accent — bar + soft cyan halo so the live section
   feels lit. Borrowed from the login screen's lgGlowBreath palette
   but scaled down for an always-on (non-breathing) sidebar accent. */
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan-bright) 0%, var(--cyan) 50%, var(--cyan-bright) 100%);
  box-shadow: 0 0 10px rgba(0, 200, 200, 0.55), 0 0 20px rgba(0, 200, 200, 0.25);
}

.sidebar-item.soon {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--white-dim);
}

/* Locked-state hover badge: a small lock + "for customers" tag appears on
   the right edge of any `.sidebar-item.soon` row when hovered. Indicates
   the feature is gated behind a paid customer account. */
.sidebar-item.soon::after {
  content: 'for customers';
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
  background: rgba(11, 26, 46, 0.95) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32' fill='%2399b3c2'><path d='M12 2a7 7 0 0 0-7 7v3H4a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V14a2 2 0 0 0-2-2h-1V9a7 7 0 0 0-7-7zm-5 7a5 5 0 0 1 10 0v3H7V9z'/></svg>") no-repeat 5px center;
  background-size: 8px 11px;
  padding: 2px 6px 2px 18px;
  border-radius: 2px;
  border: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  z-index: 5;
}
.sidebar-item.soon:hover {
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.02);
}
.sidebar-item.soon:hover::after {
  opacity: 1;
}

/* §§ SECTION: sidebar — "Coming soon" group (IA review 2026-05-12
   #4). Collapses every `.soon` item under the For-Miners persona
   into one expandable so the user sees the live items first.
   <details>/<summary> handles state with no JS. */
.sidebar-soon-group {
  margin: 0.2rem 0.5rem 0.4rem;
}
.sidebar-soon-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
  border-radius: 4px;
  user-select: none;
}
.sidebar-soon-group > summary::-webkit-details-marker { display: none; }
.sidebar-soon-group > summary::before {
  content: '▸';
  display: inline-block;
  font-family: inherit;
  font-size: 0.65rem;
  width: 1em;
  transform: rotate(0deg);
  transition: transform 0.18s ease;
  color: var(--white-dim);
}
.sidebar-soon-group[open] > summary::before { transform: rotate(90deg); }
.sidebar-soon-group > summary:hover {
  background: rgba(255, 255, 255, 0.025);
  color: var(--white-muted);
}
.sidebar-soon-group .sidebar-section {
  padding: 0.55rem 0.4rem 0.15rem;
  font-size: 0.5rem;
  opacity: 0.8;
}
/* "NEW" badge — REMOVED 2026-05-12 per Clint, useless visual
   noise. CSS class kept absent so any future re-introduction is
   a deliberate edit, not a leftover. */

.sidebar-divider {
  margin: 0.35rem 0.9rem;
  border: none;
  border-top: 1px solid var(--border);
}

/* Scrollable section for deposit controls */
.sb-deposit-controls {
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding: 0.45rem 0 0;
}

.sb-deposit-controls .sidebar-section {
  padding: 0.45rem 0.9rem 0.2rem;
}

/* Existing salar section styling (updated for new palette) */
.sb-s {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.sb-s .head {
  font-size: 10px;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}

select {
  width: 100%;
  background: rgba(14, 34, 64, 0.5);
  color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: 'Inter', -apple-system, sans-serif;
}

select option {
  background: var(--navy);
  color: var(--white);
}

.tgl {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--white-muted);
  cursor: pointer;
}

.tgl input {
  cursor: pointer;
  accent-color: var(--cyan);
}

#clist {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}

#clist h3 {
  font-size: 10px;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.ci {
  padding: 9px 11px;
  background: rgba(14, 34, 64, 0.4);
  border-radius: 4px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background .15s;
  border-left: 4px solid transparent;
}

.ci:hover {
  background: rgba(14, 34, 64, 0.6);
}

.ci.active {
  background: rgba(0, 200, 200, 0.08);
  border-left-color: var(--cyan);
}

.ci .n {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1px;
}

.ci .o {
  font-size: 11px;
  color: var(--white-muted);
}

.ci .a {
  font-size: 11px;
  color: var(--white-dim);
}
.ci .stage-badge {
  display: inline-block; font-size: 9px; padding: 1px 6px; border-radius: 3px;
  margin-top: 3px; text-transform: uppercase; letter-spacing: .3px;
}
.stage-production { background: rgba(34,197,94,.15); color: #22c55e; }
.stage-construction { background: rgba(59,130,246,.15); color: #3b82f6; }
.stage-dfs, .stage-pfs { background: rgba(245,158,11,.15); color: #f59e0b; }
.stage-exploration, .stage-pea { background: rgba(148,163,184,.15); color: #94a3b8; }

#stats {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: rgba(6, 15, 29, 0.8);
  font-size: 11px;
  color: var(--white-dim);
  font-family: 'JetBrains Mono', monospace;
}

#stats .s {
  display: inline-block;
  margin-right: 12px;
}

#stats .v {
  color: var(--cyan);
  font-weight: 600;
}

/* Map area */
#mw {
  flex: 1;
  position: relative;
  background: var(--navy-mid);
}

#map {
  width: 100%;
  height: 100%;
}

/* Map toolbar overlays */
.map-toolbar {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  display: flex;
  gap: 0;
  z-index: 400;
}

.map-tabs {
  display: flex;
  gap: 0;
}

.map-tab {
  padding: 0.25rem 0.6rem;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--white-dim);
  background: rgba(11, 26, 46, 0.75);
  border: 1px solid var(--border);
  cursor: default;
  backdrop-filter: blur(4px);
  font-family: 'Inter', -apple-system, sans-serif;
}

.map-tab:first-child {
  border-radius: 4px 0 0 4px;
}

.map-tab:last-child {
  border-radius: 0 4px 4px 0;
}

.map-tab.active {
  background: rgba(0, 200, 200, 0.12);
  color: var(--cyan);
  border-color: rgba(0, 200, 200, 0.25);
}

.map-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(11, 26, 46, 0.75);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.22rem 0.55rem;
  font-size: 0.58rem;
  color: var(--white-dim);
  backdrop-filter: blur(4px);
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   §§ STYLES: MAP-CONTROLS — search input + layers popover.
   Anchored top-CENTER of the map. 2026-05-01 redesign: takes
   visual cues from the .drh-analyst-bar in Data Rooms — cyan
   glow border, animated shimmer overlay, pulsing live dot in
   the prefix label, mono-uppercase eyebrow chrome. The search
   is Puna's primary entry point so it earns the polish.
   ============================================================ */
.map-controls {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  gap: 10px;
  align-items: stretch;
  font-family: 'Inter', -apple-system, sans-serif;
}
/* When the right rail is visible, .map-controls's containing block
   (#mw, inside #main) is already bounded by #main's padding-right, so
   the default `left:50%; transform:translateX(-50%)` centers correctly
   within the visible map column.  Don't add a left offset — that
   un-centers what was already centered. Just bound the search wrap
   width so the [FIND | search | LAYERS] row stays compact. */
body.has-right-rail .map-controls .mc-search-wrap {
  width: 420px;
  max-width: calc(100vw - var(--left-rail-w, 240px) - var(--right-rail-w, 320px) - 220px);
  min-width: 240px;
}
/* When the rail has collapsed (≤1100px), the wrap can use the full map
   column width minus the LAYERS button + sidebar. */
@media (max-width: 1100px) {
  body.has-right-rail .map-controls .mc-search-wrap {
    max-width: calc(100vw - var(--left-rail-w, 240px) - 200px);
  }
}
/* SEARCH BAR — analyst-bar aesthetic: shimmer band, cyan border,
   prefix with pulsing live dot, mono-uppercase label, gradient body. */
.map-controls .mc-search-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 460px;
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-radius: 6px;
  /* Solid navy with a faint cyan tint — opaque enough to read cleanly
     against any satellite tile underneath. overflow:visible so the
     dropdown below can escape the wrap; the shimmer is contained by
     its own background-position animation (no off-element bleed). */
  background: linear-gradient(180deg, rgba(8, 18, 33, 0.94), rgba(11, 26, 46, 0.94));
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(0, 200, 200, 0.10) inset;
  overflow: visible;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.map-controls .mc-search-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  /* Travelling cyan glint band, contained inside the wrap's footprint
     by background-position animation rather than overflow:hidden. */
  background: linear-gradient(90deg, transparent 0%, transparent 35%, rgba(0, 229, 229, 0.18) 50%, transparent 65%, transparent 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: mcShimmer 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes mcShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.map-controls .mc-search-wrap:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5),
              0 0 0 2px rgba(0, 200, 200, 0.22);
}
.map-controls .mc-search-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-right: 1px solid rgba(0, 200, 200, 0.20);
  /* Subtle cyan wash on the prefix only, not the whole bar. */
  background: rgba(0, 200, 200, 0.08);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
/* The pulsing live-dot — same animation as the analyst bar so the
   search feels alive. */
.map-controls .mc-search-icon::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 229, 229, 0.6);
  animation: drhPulse 1.6s ease-in-out infinite;
}
.map-controls .mc-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 11px 38px 11px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  position: relative;
  z-index: 1;
}
.map-controls .mc-search-input::placeholder {
  color: var(--white-dim);
  font-style: italic;
}
.map-controls .mc-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--white-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 2;
}
.map-controls .mc-search-clear:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.map-controls .mc-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(8, 18, 33, 0.98);
  border: 1px solid var(--border);
  border-radius: 6px;
  /* The full list is always available — the user can either type to
     filter OR scroll the dropdown. Cap height at 65vh so even on
     tall lists (78+ deposits) the user always has a scrollable path
     through every result without the dropdown overflowing the page. */
  max-height: 65vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}
.map-controls .mc-search-row {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--white-muted);
  font-family: inherit;
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.map-controls .mc-search-row:last-child { border-bottom: none; }
.map-controls .mc-search-row:hover,
.map-controls .mc-search-row.active {
  background: rgba(0,200,200,0.08);
  color: var(--cyan);
}
.map-controls .mc-search-row .mc-search-row-meta {
  color: var(--white-dim);
  font-size: 0.68rem;
  margin-left: 0.4rem;
}
.map-controls .mc-search-empty {
  padding: 10px 12px;
  font-size: 0.74rem;
  color: var(--white-dim);
  font-style: italic;
}
/* LAYERS BUTTON — matches search-bar treatment so the two read as
   a paired control: cyan glow border, shimmer overlay, mono label. */
.map-controls .mc-layers-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  /* Match the search bar — opaque navy with a faint cyan inset, not
     a transparent wash. Reads cleanly against any tile underneath. */
  background: linear-gradient(180deg, rgba(8, 18, 33, 0.94), rgba(11, 26, 46, 0.94));
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-radius: 6px;
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(0, 200, 200, 0.10) inset;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.map-controls .mc-layers-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 229, 0.18), transparent);
  animation: drhShimmer 6s linear infinite;
  animation-delay: 1.2s;
  pointer-events: none;
  z-index: 0;
}
.map-controls .mc-layers-btn:hover,
.map-controls .mc-layers-btn[aria-expanded="true"] {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(8, 18, 33, 0.98), rgba(0, 200, 200, 0.14));
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6),
              0 0 0 2px rgba(0, 200, 200, 0.22);
}
.map-controls .mc-layers-icon,
.map-controls .mc-layers-text,
.map-controls .mc-layers-caret { position: relative; z-index: 1; }
.map-controls .mc-layers-icon { font-size: 0.95rem; line-height: 1; }
.map-controls .mc-layers-caret { font-size: 0.7rem; opacity: 0.85; }
/* Layers popover — matches the Layers button's chrome: cyan border,
   subtle inner glow, mono-uppercase rows, mini eyebrow header. Drops
   down right under the button so the eye flows button → popover. */
.map-controls .mc-layers-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: linear-gradient(180deg, rgba(8, 18, 33, 0.98), rgba(11, 26, 46, 0.98));
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-radius: 6px;
  padding: 8px;
  min-width: 240px;
  z-index: 500;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(0, 200, 200, 0.10) inset;
}
/* Tiny mono-uppercase eyebrow row at the top of the popover so it
   reads as part of the same family as the FIND prefix and Layers
   label. Created via ::before so we don't have to touch the markup. */
.map-controls .mc-layers-popover::before {
  content: 'Show on map';
  display: block;
  padding: 4px 8px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0, 200, 200, 0.18);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.map-controls .mc-tgl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: 0.76rem;
  color: var(--white-muted);
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.map-controls .mc-tgl:hover {
  background: rgba(0, 200, 200, 0.06);
  border-color: rgba(0, 200, 200, 0.18);
  color: var(--white);
}
.map-controls .mc-tgl-l { display: flex; align-items: center; gap: 10px; }
.map-controls .mc-tgl .layer-dot {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}
/* Custom checkbox — replaces the chunky default browser styling with
   a small cyan-on-cyan square that matches the rest of the bling. */
.map-controls .mc-tgl input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin: 0;
  border: 1px solid rgba(0, 200, 200, 0.4);
  border-radius: 3px;
  background: rgba(0, 200, 200, 0.04);
  cursor: pointer;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.map-controls .mc-tgl input[type="checkbox"]:hover {
  border-color: var(--cyan);
}
.map-controls .mc-tgl input[type="checkbox"]:checked {
  background: var(--cyan);
  border-color: var(--cyan);
}
.map-controls .mc-tgl input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 0px;
  width: 5px; height: 10px;
  border: solid var(--navy-deep, #0b1a2e);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Hide map-controls outside the Virtual Explorer view. */
body:not(.view-explorer) .map-controls,
body.view-deposit3d .map-controls { display: none !important; }
/* ============================================================ */

.map-status {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(6, 15, 29, 0.85);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.3rem 0.55rem;
  backdrop-filter: blur(4px);
}

.status-dot {
  width: 5px;
  height: 5px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 4px rgba(78, 203, 113, 0.6);
  }
  50% {
    opacity: 0.4;
  }
}

.status-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem;
  color: var(--white-dim);
}

.map-legend {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  z-index: 400;
  background: rgba(6, 15, 29, 0.85);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.4rem 0.55rem;
  backdrop-filter: blur(4px);
}
.map-legend:empty { display: none; }

/* Upload panel */
#upload-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(6, 15, 29, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 200, 200, 0.2);
  border-radius: 5px;
  padding: 12px 14px;
  z-index: 1000;
  font-size: 12px;
}

#upload-panel .up-title {
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}

#upload-panel input[type="file"] {
  font-size: 11px;
  color: var(--white-muted);
  margin-bottom: 8px;
}

#upload-panel select {
  font-size: 12px;
  margin-bottom: 8px;
}

.btn-upload {
  padding: 6px 14px;
  background: var(--cyan);
  color: var(--navy-deep);
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-upload:hover {
  background: var(--cyan-bright);
  box-shadow: 0 0 12px rgba(0, 200, 200, 0.3);
}

.btn-upload:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#upload-msg {
  font-size: 11px;
  margin-top: 6px;
  min-height: 16px;
  color: var(--white-dim);
}

/* Info panel (click concession on map) */
#ipanel {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(6, 15, 29, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 200, 200, 0.2);
  border-radius: 5px;
  padding: 14px 16px;
  max-width: 300px;
  z-index: 1000;
  display: none;
}

#ipanel .t {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}

#ipanel .r {
  font-size: 12px;
  color: var(--white-muted);
  margin-bottom: 3px;
}

#ipanel .r strong {
  color: var(--white);
}

#ipanel .x {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 18px;
  cursor: pointer;
}

#ipanel .view-asset-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  background: var(--cyan);
  color: var(--navy-deep);
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

#ipanel .view-asset-btn:hover {
  background: var(--cyan-bright);
  box-shadow: 0 0 12px rgba(0, 200, 200, 0.3);
}

.ab {
  position: absolute;
  bottom: 28px;
  left: 10px;
  background: rgba(6, 15, 29, 0.85);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 10px;
  color: var(--white-dim);
  z-index: 1000;
  font-family: 'JetBrains Mono', monospace;
}
.ab .d { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.ab .cad { background: #22c55e; } .ab .apr { background: #f59e0b; } .ab .est { background: #ef4444; }

/* Drop zone */
#dz { display: none; position: absolute; inset: 0; background: rgba(59,130,246,.15); border: 3px dashed var(--accent); z-index: 2000; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: var(--accent); }

/* ========== ASSET DETAIL PANEL (Full-screen slide-in) ========== */
#asset-detail {
  display: none; position: fixed; top: 48px; right: 0; bottom: 0;
  width: 440px; background: var(--surface); border-left: 1px solid var(--border);
  z-index: 1500; overflow-y: auto; box-shadow: -4px 0 24px rgba(0,0,0,.4);
}
#asset-detail.open { display: block; }
#asset-detail .ad-header {
  padding: 20px 20px 14px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
#asset-detail .ad-close {
  position: absolute; top: 12px; right: 12px; background: none;
  border: none; color: var(--muted); font-size: 22px; cursor: pointer;
}
#asset-detail .ad-close:hover { color: var(--white); }
#asset-detail .ad-title { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
#asset-detail .ad-subtitle { font-size: 13px; color: var(--muted); }
#asset-detail .ad-section { padding: 16px 20px; border-bottom: 1px solid var(--border); }
#asset-detail .ad-section-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin-bottom: 10px; font-weight: 600;
}
#asset-detail .ad-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; font-size: 13px;
}
#asset-detail .ad-label { color: var(--muted); }
#asset-detail .ad-value { color: var(--text); font-weight: 500; text-align: right; }
#asset-detail .ad-value.highlight { color: var(--accent); font-weight: 700; }
#asset-detail .ad-note {
  font-size: 12px; color: var(--dim); line-height: 1.5; margin-top: 8px;
  padding: 8px 10px; background: #0f172a; border-radius: 6px;
}
.oh-entry { padding: 8px 10px; background: #0f172a; border-radius: 6px; margin-bottom: 6px; }
.oh-entry .oh-company { font-size: 13px; font-weight: 600; color: var(--white); }
.oh-entry .oh-detail { font-size: 11px; color: var(--muted); margin-top: 2px; }
.re-entry { padding: 8px 10px; background: #0f172a; border-radius: 6px; margin-bottom: 6px; }
.re-entry .re-head { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.re-entry .re-detail { font-size: 11px; color: var(--muted); }
.chem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.chem-item { background: #0f172a; border-radius: 6px; padding: 8px 10px; text-align: center; }
.chem-item .chem-val { font-size: 16px; font-weight: 700; color: var(--white); }
.chem-item .chem-label { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* .puna-tag rule retired 2026-05-07 — the badge it styled exposed
   Zelandez engagement on user-facing concession panels. The render
   call site in openAssetDetail was removed in the same pass. */

.leaflet-popup-content-wrapper { background: #1e293b !important; color: var(--text) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,.4) !important; }
.leaflet-popup-tip { background: #1e293b !important; }
.leaflet-popup-content { font-family: inherit; font-size: 12px; }

/* Estimated data badge */
.est-badge {
  display: inline-block; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4);
  color: #f59e0b; padding: 1px 6px; border-radius: 3px; font-size: 9px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-left: 6px;
}
.est-banner {
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25);
  border-radius: 6px; padding: 8px 10px; margin: 8px 14px; font-size: 11px; color: #f59e0b; line-height: 1.4;
}
.drill-legend { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11px; color: #94a3b8; }
.drill-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.drill-legend .dot.confirmed { background: #22c55e; border: 1.5px solid #fff; }
.drill-legend .dot.estimated { background: #f59e0b; border: 1.5px dashed #fff; }

/* ========== BOUNDARY EDITOR ========== */
#boundary-editor {
  display: none;
  position: fixed;
  top: 36px;
  left: 0;
  bottom: 0;
  width: 340px;
  background: rgba(6, 15, 29, 0.6);
  border-right: 1px solid var(--border);
  z-index: 1600;
  overflow-y: auto;
  box-shadow: 4px 0 24px rgba(0, 0, 0, .4);
  flex-direction: column;
}
#boundary-editor.open { display: flex; }
#boundary-editor .be-header {
  padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
#boundary-editor .be-close {
  position: absolute; top: 10px; right: 10px; background: none;
  border: none; color: var(--muted); font-size: 20px; cursor: pointer;
}
#boundary-editor .be-close:hover { color: var(--white); }
#boundary-editor .be-title { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 2px; }
#boundary-editor .be-subtitle { font-size: 12px; color: var(--muted); }

.be-section { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.be-section-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin-bottom: 10px; font-weight: 600;
}
.be-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
.be-input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(14, 34, 64, 0.5);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  font-size: 13px;
  margin-bottom: 10px;
  font-family: 'Inter', -apple-system, sans-serif;
}

.be-input:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(14, 34, 64, 0.8);
}

.be-select {
  width: 100%;
  padding: 8px 10px;
  background: rgba(14, 34, 64, 0.5);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  font-size: 13px;
  margin-bottom: 10px;
  appearance: auto;
  font-family: 'Inter', -apple-system, sans-serif;
}

.be-select:focus {
  outline: none;
  border-color: var(--cyan);
}

.be-select option {
  background: var(--navy);
  color: var(--white);
}

.be-textarea {
  width: 100%;
  padding: 8px 10px;
  background: rgba(14, 34, 64, 0.5);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  font-size: 13px;
  margin-bottom: 10px;
  resize: vertical;
  min-height: 60px;
  font-family: 'Inter', -apple-system, sans-serif;
}

.be-textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(14, 34, 64, 0.8);
}

.be-btn {
  padding: 9px 16px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', -apple-system, sans-serif;
}

.be-btn-primary {
  background: var(--cyan);
  color: var(--navy-deep);
}

.be-btn-primary:hover {
  background: var(--cyan-bright);
  box-shadow: 0 0 12px rgba(0, 200, 200, 0.3);
}

.be-btn-secondary {
  background: rgba(14, 34, 64, 0.5);
  color: var(--white-muted);
  border: 1px solid var(--border-light);
}

.be-btn-secondary:hover {
  background: rgba(14, 34, 64, 0.8);
  color: var(--white);
}

.be-btn-danger {
  background: rgba(239, 68, 68, .15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, .3);
}

.be-btn-danger:hover {
  background: rgba(239, 68, 68, .25);
}

.be-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.be-btn-row { display: flex; gap: 8px; margin-top: 6px; }

.be-salar-item {
  padding: 10px 12px; background: #1e293b; border-radius: 6px; margin-bottom: 6px;
  cursor: pointer; transition: background .15s; border-left: 4px solid transparent;
  display: flex; align-items: center; justify-content: space-between;
}
.be-salar-item:hover { background: #263347; }
.be-salar-item.has-boundary { border-left-color: #22c55e; }
.be-salar-item.active { background: #1e3a5f; border-left-color: var(--accent); }
.be-salar-item .be-si-name { font-size: 13px; font-weight: 600; color: var(--white); }
.be-salar-item .be-si-detail { font-size: 11px; color: var(--muted); margin-top: 2px; }
.be-salar-item .be-si-badge {
  font-size: 9px; padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .3px; font-weight: 600; flex-shrink: 0;
}
.be-si-badge.saved { background: rgba(34,197,94,.15); color: #22c55e; }
.be-si-badge.unsaved { background: rgba(245,158,11,.15); color: #f59e0b; }
.be-si-badge.none { background: rgba(100,116,139,.15); color: #64748b; }

.be-hint {
  font-size: 11px; color: var(--dim); line-height: 1.5; padding: 8px 10px;
  background: #0f172a; border-radius: 6px; margin-bottom: 10px;
}

.be-coord-count {
  font-size: 12px; color: var(--muted); margin-bottom: 8px;
}
.be-coord-count strong { color: var(--text); }

.be-status-bar {
  padding: 10px 16px; border-top: 1px solid var(--border);
  background: #0f172a; font-size: 11px; color: var(--muted);
  margin-top: auto;
}
.be-status-bar .be-status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.be-status-dot.drawing { background: #f59e0b; }
.be-status-dot.editing { background: #3b82f6; }
.be-status-dot.saved { background: #22c55e; }
.be-status-dot.idle { background: #475569; }

/* ========== INLINE BOUNDARY EDITOR (inside Salar Tools card) ========== */
#salar-tools .rp-tools .be-hint {
  font-size: 0.7rem; line-height: 1.4; color: var(--white-dim);
  background: rgba(0, 200, 200, 0.05);
  border: 1px solid rgba(0, 200, 200, 0.15);
  border-radius: 3px;
  padding: 6px 8px;
  margin: 6px 0;
}
#salar-tools .rp-tools .be-hint strong { color: var(--cyan); font-weight: 600; }
#salar-tools .rp-tools .be-btn-row { display: flex; gap: 4px; flex-wrap: wrap; }
#salar-tools .rp-tools .be-btn {
  flex: 1 1 auto;
  padding: 6px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
  border-radius: 3px;
  border: 1px solid var(--border-light);
  background: rgba(11, 26, 46, 0.7);
  color: var(--white-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#salar-tools .rp-tools .be-btn:hover {
  background: rgba(0, 200, 200, 0.12);
  border-color: var(--cyan);
  color: var(--cyan-bright);
}
#salar-tools .rp-tools .be-btn-primary {
  background: var(--cyan);
  color: var(--navy-deep);
  border-color: var(--cyan);
}
#salar-tools .rp-tools .be-btn-primary:hover {
  background: var(--cyan-bright);
  color: var(--navy-deep);
}
#salar-tools .rp-tools .be-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}
#salar-tools .rp-tools .be-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 8px 0 3px;
}
#salar-tools .rp-tools .be-input,
#salar-tools .rp-tools .be-select,
#salar-tools .rp-tools .be-textarea {
  width: 100%;
  padding: 5px 7px;
  font-size: 0.7rem;
  font-family: inherit;
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--white-muted);
  box-sizing: border-box;
}
#salar-tools .rp-tools .be-input:focus,
#salar-tools .rp-tools .be-select:focus,
#salar-tools .rp-tools .be-textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0, 200, 200, 0.2);
}
#salar-tools .rp-tools .be-textarea { min-height: 50px; resize: vertical; font-family: inherit; }
#salar-tools .rp-tools .be-coord-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  color: var(--white-dim);
  margin: 4px 0;
}
#salar-tools .rp-tools .be-coord-count strong { color: var(--cyan); }
#salar-tools .rp-tools .be-status-bar {
  margin-top: 10px;
  padding: 6px 8px;
  background: rgba(6, 15, 29, 0.5);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  color: var(--white-dim);
}
#salar-tools .rp-tools .be-status-bar .be-status-dot {
  width: 6px; height: 6px; margin-right: 5px;
}

/* Confidence chip row — restored 2026-05-09 from the friction audit.
   Defaults to Estimated; Verified is cyan, Reported is white-on-navy,
   Estimated is muted, Inferred is amber-dashed (matches the existing
   amber treatment on dashed-low-confidence boundaries). */
#salar-tools .rp-tools .be-grade-chips {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 4px 0 2px 0;
}
#salar-tools .rp-tools .be-grade-chip {
  flex: 1 1 auto;
  min-width: 64px;
  padding: 4px 6px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(6, 15, 29, 0.5);
  color: var(--white-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
#salar-tools .rp-tools .be-grade-chip:hover {
  background: rgba(20, 184, 166, 0.08);
  color: var(--white);
  border-color: rgba(20, 184, 166, 0.45);
}
#salar-tools .rp-tools .be-grade-chip.is-on {
  background: rgba(20, 184, 166, 0.18);
  border-color: var(--cyan);
  color: var(--white);
}
#salar-tools .rp-tools .be-grade-chip[data-grade="1"].is-on { background: rgba(34, 197, 94, 0.18); border-color: #22c55e; }
#salar-tools .rp-tools .be-grade-chip[data-grade="4"].is-on { background: rgba(245, 158, 11, 0.16); border-color: #f59e0b; }

/* "+ Add details" disclosure */
#salar-tools .rp-tools .be-details { margin-top: 6px; }
#salar-tools .rp-tools .be-details > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--white-dim);
  padding: 4px 6px;
  border: 1px dashed var(--border);
  border-radius: 3px;
  text-align: center;
}
#salar-tools .rp-tools .be-details > summary::-webkit-details-marker { display: none; }
#salar-tools .rp-tools .be-details > summary:hover { color: var(--cyan); border-color: rgba(20, 184, 166, 0.45); }
#salar-tools .rp-tools .be-details[open] > summary {
  color: var(--white);
  border-style: solid;
  border-color: rgba(20, 184, 166, 0.45);
  background: rgba(20, 184, 166, 0.06);
}

/* Save status meta (audit #12) — "Saved 4s ago by you · v3" */
.be-save-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  color: var(--white-dim);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.be-save-meta strong { color: var(--cyan); font-weight: 600; }
.be-save-meta.is-error { color: #ef4444; }
.be-save-meta .be-retry {
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid #ef4444;
  border-radius: 2px;
  color: #fecaca;
  font-size: 0.58rem;
  cursor: pointer;
}
.be-save-meta .be-retry:hover { background: rgba(239, 68, 68, 0.22); color: #fff; }

/* History link — sits next to the Deposit Tools header for quick access. */
.be-history-link {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  margin-left: 8px;
}
.be-history-link:hover { color: var(--cyan); border-color: rgba(20, 184, 166, 0.45); }
.be-history-link[hidden] { display: none; }

/* The concept callout that explains "deposit body vs salar surface".
   Sits at the top of the Deposit Tools card. Cyan-tinted so geologists
   absorb the conceptual frame on day one. */
.be-concept-callout {
  font-size: 0.62rem;
  line-height: 1.45;
  color: var(--white-muted);
  background: rgba(20, 184, 166, 0.06);
  border-left: 2px solid rgba(20, 184, 166, 0.55);
  padding: 6px 8px;
  margin: 0 0 8px 0;
  border-radius: 0 3px 3px 0;
}
.be-concept-callout strong { color: var(--cyan); font-weight: 700; }

/* Snap-to-close halo — rendered when the cursor enters the close zone
   around the first vertex (audit #3). The halo is a Leaflet
   divIcon-based circle marker; we just style the inner shell. */
.be-snap-halo {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.18);
  border: 2px solid var(--cyan);
  box-sizing: border-box;
  pointer-events: none;
  animation: be-snap-pulse 1.2s ease-in-out infinite;
}
@keyframes be-snap-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* Super-user "Open Deposit Drawing" worklist CTA — distinctive amber
   dashed treatment so it's clearly internal-only at a glance.
   Pattern A staff gating per STAFF_GATING.md — visible only when
   body.is-staff is set. The hidden attribute on the element handles
   the case before is-staff lands; the CSS handles the View-as-client
   toggle which removes is-staff from body. */
.be-worklist-cta { display: none; }
body.is-staff .be-worklist-cta {
  display: block;
  width: 100%;
  margin: 0 0 10px 0;
  padding: 8px 12px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed rgba(245, 158, 11, 0.6);
  border-radius: 3px;
  color: #fbbf24;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
body.is-staff .be-worklist-cta[hidden] { display: none; }
.be-worklist-cta:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.9);
  color: #fcd34d;
}
.be-worklist-cta .be-worklist-cta-arrow {
  float: right;
  font-weight: 400;
  letter-spacing: 0;
}
.be-worklist-cta .be-worklist-cta-progress {
  display: block;
  margin-top: 3px;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(251, 191, 36, 0.85);
}
/* Inline brine-drawing worklist panel (2026-05-10) — replaces the Page
   Tools drawer. Hidden by default; toggled by #be-worklist-cta. Shares
   the amber-dashed staff treatment with #team-tools / #salar-tools. */
.be-worklist-panel {
  display: none;
  margin: 0 0 10px 0;
  padding: 8px;
  background: rgba(245, 158, 11, 0.04);
  border: 1px dashed rgba(245, 158, 11, 0.45);
  border-radius: 4px;
  flex: 0 0 auto;
}
body.is-staff .be-worklist-panel:not([hidden]) { display: block; }
.be-worklist-host { max-height: 50vh; overflow-y: auto; padding-right: 4px; }

/* Country pills row — sits at the top of the worklist drawer body. */
.dpw-pill-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.dpw-pill {
  padding: 3px 8px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--white-dim);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  display: inline-flex; align-items: center; gap: 5px;
}
.dpw-pill:hover {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(20, 184, 166, 0.45);
  color: var(--white);
}
.dpw-pill.is-on {
  background: rgba(20, 184, 166, 0.18);
  border-color: var(--cyan);
  color: var(--white);
}
.dpw-pill-count {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  padding: 0 4px;
  font-size: 0.56rem;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  color: var(--white-muted);
}
.dpw-pill.is-on .dpw-pill-count {
  background: rgba(20, 184, 166, 0.3);
  color: var(--white);
}

/* Worklist search input — slim, sits between progress + list. */
.dpw-search {
  width: 100%;
  margin: 8px 0 6px 0;
  padding: 5px 8px;
  font-size: 0.7rem;
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--white);
  font-family: inherit;
  box-sizing: border-box;
}
.dpw-search:focus { outline: none; border-color: var(--cyan); background: rgba(6, 15, 29, 0.85); }
.dpw-search::placeholder { color: var(--white-dim); }

/* Worklist body inside the staff drawer — clean rows with status dots. */
.dpw-list { display: flex; flex-direction: column; gap: 4px; }
.dpw-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(6, 15, 29, 0.4);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dpw-row:hover {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(20, 184, 166, 0.45);
}
.dpw-row.is-active {
  background: rgba(20, 184, 166, 0.16);
  border-color: var(--cyan);
}
.dpw-row.is-done { opacity: 0.6; }
.dpw-rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  color: var(--white-dim);
  width: 22px;
  flex: 0 0 auto;
}
.dpw-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.18);
  border: 1px solid var(--border);
}
.dpw-status-dot.is-done { background: #22c55e; border-color: #22c55e; }
.dpw-name {
  flex: 1 1 auto;
  font-size: 0.72rem;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dpw-meta {
  font-size: 0.58rem;
  color: var(--white-dim);
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
}
.dpw-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin: 8px 0 12px 0;
}
.dpw-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #22c55e, var(--cyan));
  transition: width 0.4s ease;
}

/* History modal — minimal overlay reusing the existing modal stack. */
.be-history-overlay {
  position: fixed; inset: 0;
  background: rgba(2, 6, 23, 0.78);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.be-history-overlay[hidden] { display: none; }
.be-history-modal {
  width: 100%; max-width: 640px;
  max-height: 80vh;
  background: var(--navy-deep);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.be-history-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.be-history-modal-head h3 { margin: 0; font-size: 0.92rem; color: var(--white); }
.be-history-modal-head button {
  background: transparent; border: none; color: var(--white-dim);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.be-history-modal-head button:hover { color: var(--white); }
.be-history-list { overflow-y: auto; padding: 8px 16px 16px 16px; }
.be-history-row {
  display: grid;
  grid-template-columns: 36px 1fr 90px 90px;
  gap: 10px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
}
.be-history-row:last-child { border-bottom: none; }
.be-history-row.is-current { background: rgba(20, 184, 166, 0.06); border-radius: 3px; padding-left: 6px; padding-right: 6px; }
.be-history-row .v {
  font-family: "JetBrains Mono", monospace; color: var(--cyan);
}
.be-history-row .who { color: var(--white-muted); }
.be-history-row .who small { display: block; color: var(--white-dim); font-size: 0.6rem; }
.be-history-row .meta {
  font-family: "JetBrains Mono", monospace; font-size: 0.62rem; color: var(--white-dim);
}
.be-history-row button {
  font-size: 0.62rem; padding: 4px 8px; cursor: pointer;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.5);
  color: var(--cyan);
  border-radius: 3px;
}
.be-history-row button:hover { background: rgba(20, 184, 166, 0.22); color: #fff; }
.be-history-row button[disabled] { opacity: 0.3; cursor: default; }
.be-history-empty {
  padding: 24px;
  text-align: center;
  color: var(--white-dim);
  font-size: 0.78rem;
}

/* ========== TEAM TOOLS ADMIN CARD (Puna team only) ==========
   Sits above #salar-tools in the right panel. Visible only when the
   signed-in user's email domain is in TEAM_DOMAINS — applyBoundaryRoleGating
   toggles its display. The amber-dashed treatment is the visual cue that
   this card is internal-only. */
#team-tools {
  position: relative;
  padding: 0.7rem 0.75rem;
  background: rgba(245, 158, 11, 0.04);
  border: 1px dashed rgba(245, 158, 11, 0.45);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
}
#team-tools::before {
  content: "TEAM ONLY · PUNA";
  position: absolute;
  top: -7px; left: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  color: #f59e0b;
  background: var(--navy-deep, #06101e);
  padding: 0 6px;
}
#team-tools .tt-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f59e0b;
  margin: 0 0 6px;
}
#team-tools .tt-blurb {
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--white-dim);
  margin-bottom: 8px;
}
#team-tools .tt-btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
#team-tools .tt-btn {
  flex: 1 1 auto;
  padding: 7px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
  border-radius: 3px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#team-tools .tt-btn:hover {
  background: rgba(245, 158, 11, 0.22);
  color: #fcd34d;
  border-color: #fcd34d;
}
#team-tools .tt-folder {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(6, 15, 29, 0.55);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  color: var(--white-dim);
  line-height: 1.5;
}
#team-tools .tt-folder strong { color: #f59e0b; font-weight: 600; }
#team-tools details { margin-top: 6px; }
#team-tools details summary {
  cursor: pointer;
  font-size: 0.6rem;
  color: var(--white-dim);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#team-tools details summary:hover { color: #f59e0b; }
#team-tools details[open] summary { color: #f59e0b; margin-bottom: 4px; }
#team-tools details .tt-folder-tree {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  color: var(--white-dim);
  line-height: 1.55;
  white-space: pre;
  background: rgba(6, 15, 29, 0.6);
  padding: 6px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  overflow-x: auto;
}

/* TEAM ONLY badge sitting next to the Salar Tools header */
.salar-tools-team-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  border: 1px dashed rgba(245, 158, 11, 0.6);
  border-radius: 2px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.06);
}

/* Live drawing area readout (shows running km² while user is clicking points) */
#salar-tools .be-live-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 2px;
  padding: 4px 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  color: var(--white-dim);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 3px;
}
#salar-tools .be-live-area .area-val { color: #fcd34d; font-weight: 600; }
#salar-tools .be-live-area .pts-val { color: var(--cyan); font-weight: 600; }

/* ========== ADD DEPOSIT MODAL ========== */
#add-deposit-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 18, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  backdrop-filter: blur(3px);
}
#add-deposit-modal.open { display: flex; }
#add-deposit-modal .ad-dialog {
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--navy-deep, #06101e);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
              0 0 24px rgba(245, 158, 11, 0.15);
  padding: 1.1rem 1.2rem 1.2rem;
  position: relative;
}
#add-deposit-modal .ad-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
}
#add-deposit-modal .ad-close:hover { color: var(--white); }
#add-deposit-modal .ad-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: 4px;
}
#add-deposit-modal .ad-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 4px;
}
#add-deposit-modal .ad-blurb {
  font-size: 0.75rem;
  color: var(--white-dim);
  line-height: 1.45;
  margin-bottom: 12px;
}
#add-deposit-modal label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 8px 0 3px;
}
#add-deposit-modal input,
#add-deposit-modal select,
#add-deposit-modal textarea {
  width: 100%;
  background: rgba(6, 15, 29, 0.7);
  color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 0.78rem;
  font-family: 'Inter', -apple-system, sans-serif;
  outline: none;
  box-sizing: border-box;
}
#add-deposit-modal input:focus,
#add-deposit-modal select:focus,
#add-deposit-modal textarea:focus {
  border-color: var(--cyan);
}
#add-deposit-modal textarea { resize: vertical; min-height: 60px; }
#add-deposit-modal .ad-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#add-deposit-modal .ad-help {
  font-size: 0.65rem;
  color: var(--white-dim);
  margin-top: 3px;
  font-style: italic;
}
#add-deposit-modal .ad-pick-on-map {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  margin-top: 4px;
  font-size: 0.65rem;
  font-family: "JetBrains Mono", monospace;
  color: var(--cyan);
  background: rgba(0, 200, 200, 0.08);
  border: 1px solid rgba(0, 200, 200, 0.4);
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#add-deposit-modal .ad-pick-on-map:hover {
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan-bright);
}
#add-deposit-modal .ad-pick-on-map.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
  color: #fcd34d;
}
#add-deposit-modal .ad-folder-hint {
  margin-top: 12px;
  padding: 8px 10px;
  font-size: 0.7rem;
  background: rgba(245, 158, 11, 0.06);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: 3px;
  color: var(--white-dim);
  line-height: 1.45;
}
#add-deposit-modal .ad-folder-hint strong { color: #f59e0b; }
#add-deposit-modal .ad-folder-hint code {
  background: rgba(6, 15, 29, 0.7);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 0.65rem;
  color: var(--cyan);
}
#add-deposit-modal .ad-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
#add-deposit-modal .ad-btn {
  padding: 7px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.04em;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-transform: uppercase;
}
#add-deposit-modal .ad-btn-primary {
  background: #f59e0b;
  color: var(--navy-deep, #06101e);
  border: 1px solid #f59e0b;
}
#add-deposit-modal .ad-btn-primary:hover { background: #fcd34d; border-color: #fcd34d; }
#add-deposit-modal .ad-btn-primary:disabled {
  background: rgba(245, 158, 11, 0.3);
  border-color: rgba(245, 158, 11, 0.3);
  cursor: not-allowed;
}
#add-deposit-modal .ad-btn-secondary {
  background: transparent;
  color: var(--white-muted);
  border: 1px solid var(--border-light);
}
#add-deposit-modal .ad-btn-secondary:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
#add-deposit-modal .ad-msg {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 0.7rem;
  border-radius: 3px;
  display: none;
  line-height: 1.4;
}
#add-deposit-modal .ad-msg.success {
  display: block;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
}
#add-deposit-modal .ad-msg.error {
  display: block;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

/* Map cursor while user is in "click on map to set deposit center" mode */
body.deposit-pick-mode #map { cursor: crosshair !important; }
body.deposit-pick-mode #map .leaflet-grab { cursor: crosshair !important; }

/* Leaflet.draw customization */
.leaflet-draw-toolbar a { background-color: #1e293b !important; color: var(--text) !important; border-color: #334155 !important; }
.leaflet-draw-toolbar a:hover { background-color: #263347 !important; }
.leaflet-draw-actions a { background-color: #1e293b !important; color: var(--text) !important; }
.leaflet-draw-actions a:hover { background-color: var(--accent) !important; }

/* Top bar editor toggle */
.nav-item.editor-mode { color: #f59e0b !important; background: rgba(245,158,11,.1) !important; }

/* Projects panel (salar -> projects from brinefield registry) */
#projects-panel {
  padding: 0 12px 6px;
}

#projects-panel h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--white-dim);
  margin: 10px 0 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
}

#projects-panel h3 #pc {
  font-size: 11px;
  color: var(--white-dim);
  font-weight: 500;
}

#plist .proj {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer;
  border-radius: 4px;
}

#plist .proj:hover {
  background: rgba(255, 255, 255, 0.03);
}

#plist .proj .sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-top: 5px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}

#plist .proj .body {
  flex: 1;
  min-width: 0;
}

#plist .proj .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
}

#plist .proj .op {
  font-size: 11px;
  color: var(--white-muted);
  margin-top: 2px;
}

#plist .proj .meta {
  font-size: 10px;
  color: var(--white-dim);
  margin-top: 3px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#plist .proj .meta .tag {
  color: var(--white-muted);
}

#plist .stage-producing {
  color: var(--green) !important;
}

#plist .stage-construction {
  color: var(--warm) !important;
}

#plist .stage-pfs, #plist .stage-feasibility {
  color: #38bdf8 !important;
}

#plist .stage-exploration {
  color: var(--white-dim) !important;
}

#plist .empty {
  font-size: 12px;
  color: var(--white-dim);
  padding: 10px 8px;
}
.proj-pop { font-size: 12px; line-height: 1.45; }
.proj-pop h4 { font-size: 14px; margin-bottom: 4px; }
.proj-pop .op { font-size: 12px; color: #cbd5e1; margin-bottom: 8px; }
.proj-pop table { width: 100%; border-collapse: collapse; }
.proj-pop table td { padding: 2px 0; }
.proj-pop table td:first-child { color: #94a3b8; padding-right: 10px; }

/* Salar Tools card (contextual — appears after salar selected) */
#salar-tools {
  margin: 12px 14px 6px;
  padding: 12px 14px;
  background: rgba(14, 34, 64, 0.4);
  border: 1px solid var(--border-light);
  border-radius: 4px;
}

#salar-tools .st-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--white-dim);
  margin-bottom: 4px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

#salar-tools .st-slug {
  color: var(--white);
  font-weight: 500;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}

#salar-tools .st-status {
  font-size: 11px;
  color: var(--white-dim);
  margin-bottom: 10px;
  line-height: 1.4;
}

#salar-tools .st-btn-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

#salar-tools .st-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all .15s;
  font-family: 'Inter', -apple-system, sans-serif;
}

#salar-tools .st-btn-primary {
  background: var(--cyan);
  color: var(--navy-deep);
}

#salar-tools .st-btn-primary:hover {
  background: var(--cyan-bright);
  box-shadow: 0 0 12px rgba(0, 200, 200, 0.3);
}

#salar-tools .st-btn-secondary {
  background: rgba(14, 34, 64, 0.5);
  color: var(--white-muted);
  border: 1px solid var(--border-light);
}

#salar-tools .st-btn-secondary:hover {
  background: rgba(14, 34, 64, 0.8);
  color: var(--white);
}

#salar-tools .st-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

#salar-tools .st-upload {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
  margin-top: 4px;
}

#salar-tools .st-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--white-dim);
  margin-bottom: 6px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

#salar-tools input[type="file"] {
  font-size: 11px;
  color: var(--white-muted);
  margin-bottom: 8px;
  width: 100%;
}

#salar-tools .st-upload .st-btn-secondary {
  width: 100%;
}

#salar-tools #st-upload-msg {
  font-size: 11px;
  margin-top: 6px;
  min-height: 14px;
  color: var(--white-dim);
}

/* ==========================================================
   APP "BLING" — matched to the login screen's animations
   ========================================================== */
@keyframes appRiseIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes appCardRise {
  from { opacity: 0; transform: translateY(18px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes appShimmerSweep {
  0%   { background-position: -150% 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: 250% 0; opacity: 0; }
}
@keyframes appGlowBreath {
  0%, 100% { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25), 0 0 0 rgba(0, 200, 200, 0); }
  50%      { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25), 0 0 40px rgba(0, 200, 200, 0.08); }
}

/* 3px cyan strip at the very top (deck signature) */
.app-top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright), var(--cyan));
  z-index: 2100;
}
#topbar { top: 3px; }  /* push the title bar down by the strip height */
#main   { margin-top: 39px; height: calc(100vh - 39px); }

/* ==========================================================
   CAPITAL PULSE STRIP — fixed under topbar, right of sidebar.
   Hidden by default; surfaces only on For Capital views (and
   not on the explorer, where the map needs the canvas clean).
   The strip steals 32px of vertical space from the content
   pane below it via padding-top on the affected views.
   ========================================================== */
#capital-pulse {
  position: fixed;
  top: 39px;
  left: 240px;            /* matches sidebar width */
  right: 0;
  height: 32px;
  display: none;
  align-items: center;
  gap: 0.9rem;
  padding: 0 1rem;
  background: linear-gradient(90deg, rgba(6,15,29,0.92) 0%, rgba(6,15,29,0.78) 100%);
  border-bottom: 1px solid var(--border);
  z-index: 1500;
  font-family: 'Inter', -apple-system, sans-serif;
  overflow: hidden;
}
/* Capital Pulse strip — was visible on every Capital-persona view except
   the map. Scoped down 2026-04-27 to Data Rooms only; the strip's
   exchange-filings / engineering-milestones / financings / permits
   counts read like editorial seeding on the Screener and Watchlist,
   where they competed for attention with the actual feature content.
   Data Rooms is the natural home — it's the deal-flow surface. */
/* Capital Pulse strip removed from Data Rooms (per Clint 2026-04-29) —
   the page is now lean: analyst row, slots, upgrade. The pulse still
   shows on Vault. */
body[data-persona="capital"].view-datarooms #capital-pulse { display: none !important; }
/* Capital Pulse strip removed from Vault (per Clint 2026-04-29) —
   the page is now lean. The pulse may still show elsewhere; it just
   doesn't lead the Vault. */
body[data-persona="capital"].view-vault #capital-pulse { display: none !important; }
/* Vault page — suppress watchlist-flavoured leakage from shared
   selectors. The hero hide rule that lived here was stale (it
   dated to when the Capital Pulse strip sat at the top of Vault;
   that strip was removed five lines above and the hero was
   supposed to come back, but the hide rule outlived it). 2026-05-07
   — restored the page title; if the hero needs to disappear in
   some view, gate via JS in vaultRender(), not a !important CSS
   rule. */
body.view-vault .wl-stage-chips    { display: none !important; }
body.view-vault .wlx-pickers       { display: none !important; }
body.view-vault .wl-toolbar        { display: none !important; }
.cp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--cyan);
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}
.cp-pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-bright);
  box-shadow: 0 0 10px var(--cyan-bright);
  animation: cp-pulse 2.4s ease-in-out infinite;
}
@keyframes cp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}
.cp-tiles {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.cp-tile {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--white-muted);
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 7px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cp-tile:hover {
  background: rgba(0, 200, 200, 0.08);
  border-color: rgba(0, 200, 200, 0.22);
  color: var(--white);
}
.cp-tile:hover .cp-tile-num { color: var(--cyan); }
.cp-tile-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.cp-tile-lbl { color: var(--white-dim); }
.cp-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--white-dim);
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}
.cp-foot strong { color: var(--cyan); font-weight: 600; }
@media (max-width: 1100px) {
  .cp-foot { display: none; }
  .cp-tiles { gap: 1rem; }
}
@media (max-width: 820px) {
  .cp-eyebrow { font-size: 0.52rem; }
  .cp-tiles { gap: 0.7rem; }
  .cp-tile { font-size: 0.68rem; }
}

/* ==========================================================
   SIDEBAR — tightened typography to match mockup
   ========================================================== */
#sidebar { padding: 0.7rem 0; }
.sidebar-brand { padding: 0.5rem 0.9rem 1rem; font-size: 1rem; font-weight: 700; }
.sidebar-section {
  padding: 0.45rem 0.9rem 0.2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--white-dim);
}
.sidebar-item {
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  color: var(--white-muted);
  display: flex; align-items: center; gap: 0.55rem;
  opacity: 0;
  animation: appRiseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sidebar-item:nth-child(1)  { animation-delay: 0.15s; }
.sidebar-item:nth-child(2)  { animation-delay: 0.19s; }
.sidebar-item:nth-child(3)  { animation-delay: 0.23s; }
.sidebar-item:nth-child(4)  { animation-delay: 0.27s; }
.sidebar-item:nth-child(5)  { animation-delay: 0.31s; }
.sidebar-item:nth-child(6)  { animation-delay: 0.35s; }
.sidebar-item:nth-child(7)  { animation-delay: 0.39s; }
.sidebar-item:nth-child(8)  { animation-delay: 0.43s; }
.sidebar-icon {
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; opacity: 0.5;
  flex-shrink: 0;
}
.sidebar-item.active .sidebar-icon { opacity: 1; }
.sidebar-bottom {
  margin-top: auto;
  padding: 0.7rem 0.7rem 0.85rem;
  border-top: 1px solid var(--border);
}
/* Sidebar Improve-Puna [P] button — sits at the bottom of the
   sidebar. Replaces the former topbar AI symbol. Same breath +
   shimmer treatment via the inner .puna-ai-symbol-sm; the outer
   button gets a faint cyan tint that brightens on hover. */
.sidebar-improve {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: rgba(0, 200, 200, 0.05);
  border: 1px solid rgba(0, 200, 200, 0.22);
  border-radius: 8px;
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.sidebar-improve:hover {
  background: rgba(0, 200, 200, 0.12);
  border-color: var(--cyan);
  transform: translateY(-1px);
}
.sidebar-improve .puna-ai-symbol-sm {
  width: 26px; height: 26px;
  flex-shrink: 0;
}
.sidebar-improve .puna-ai-symbol-sm svg { width: 16px; height: 16px; }
.sidebar-improve-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.sidebar-improve-label-main {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--white);
}
.sidebar-improve-label-sub {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--white-dim);
  margin-top: 1px;
}
.sidebar-bottom-item {
  font-size: 0.7rem;
  color: var(--white-dim);
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0;
  cursor: default;
}
/* Make sidebar flex column so bottom anchors */
#sidebar { display: flex; flex-direction: column; }

/* ==========================================================
   PERSONA TOGGLE — For Miners ⇆ For Capital sidebar swap
   ========================================================== */
.sidebar-persona { display: none; flex-direction: column; }
body[data-persona="miners"] .sidebar-persona-miners { display: flex; }
body[data-persona="capital"] .sidebar-persona-capital { display: flex; }
/* Default to miners if no attribute set yet */
body:not([data-persona]) .sidebar-persona-miners { display: flex; }

/* Persona toggle — both "For Miners" and "For Capital" are always
   visible side by side at the bottom of the sidebar. The currently-
   active persona's button reads as filled cyan; the other reads as a
   quiet outlined chip the user can click to switch. Re-applied
   2026-05-07 so Clint can feel the two-button UX. */
.sidebar-persona-toggle-row {
  display: flex;
  gap: 0.4rem;
  width: 100%;
}
.sidebar-persona-toggle {
  flex: 1;
  padding: 0.5rem 0.4rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}
.sidebar-persona-toggle:hover {
  color: var(--white);
  border-color: rgba(0, 200, 200, 0.45);
  background: rgba(0, 200, 200, 0.05);
}
.sidebar-persona-toggle.is-active {
  background: var(--cyan);
  color: var(--bg);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 200, 200, 0.25);
  cursor: default;
}
.sidebar-persona-toggle.is-active:hover {
  background: var(--cyan);
  color: var(--bg);
}

/* Persona-section wrapper — sits at the top of the empty zone below
   the nav so the persona toggle reads as an intentional control, not
   orphan space. */
.sidebar-persona-section {
  margin: 1.4rem 0.9rem 0.4rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

/* ==========================================================
   RIGHT PANEL — Basin Summary style (mockup-inspired)
   ========================================================== */
#right-panel {
  width: 280px;
  min-width: 280px;
  background: rgba(6, 15, 29, 0.6);
  border-left: 1px solid var(--border);
  padding: 0.85rem 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow-y: auto;
  font-family: 'Inter', -apple-system, sans-serif;
  opacity: 0;
  animation: appRiseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.panel-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-header .rp-count,
.panel-header .rp-slug {
  font-size: 0.55rem;
  color: var(--cyan);
  font-weight: 500;
}

/* Base card with shimmer + glow */
.rp-card {
  position: relative;
  padding: 0.7rem 0.75rem;
  background: rgba(11, 26, 46, 0.45);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  flex: 0 0 auto;        /* never shrink in the flex column */
  animation: appCardRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.rp-card + .rp-card { margin-top: 0; }
/* Staggered entry for the Basin / Active Layers / Salar Tools cards
   (the selector targets .rp-card specifically so panel-header siblings
   don't disrupt the sequence). */
#right-panel .rp-card.rp-basin  { animation-delay: 0.35s; }
#right-panel .rp-card.rp-layers { animation-delay: 0.45s; }
#right-panel .rp-card.rp-tools  { animation-delay: 0.55s; }
/* Keep the section headers from collapsing in the flex column */
#right-panel .panel-header { flex: 0 0 auto; }

.rp-basin { animation: appCardRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards, appGlowBreath 6s ease-in-out 2s infinite; }

/* One-shot shimmer across the top edge of the card */
.rp-card .rp-card-shimmer {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, transparent 30%,
    rgba(0, 229, 229, 0.9) 50%,
    transparent 70%, transparent 100%);
  background-size: 200% 100%;
  background-position: -150% 0;
  animation: appShimmerSweep 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards;
  pointer-events: none;
}

/* Salar dropdown inside the basin card */
#right-panel select#sel {
  width: 100%;
  background: rgba(6, 15, 29, 0.6);
  color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 0.55rem 0.6rem;
  font-size: 0.82rem;
  font-family: 'Inter', -apple-system, sans-serif;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
#right-panel select#sel:focus {
  border-color: var(--cyan);
  background: rgba(6, 15, 29, 0.85);
  box-shadow: 0 0 0 3px rgba(0, 200, 200, 0.12);
}
/* Lat/lon coordinate strip under the dropdown — hidden 2026-05-01
   (audit). The element rendered with &nbsp; placeholder content +
   min-height that padded the basin card with empty space. Element
   stays in the DOM so JS that writes to #rp-coords doesn't NPE. */
#right-panel .basin-coords {
  display: none !important;
}
#right-panel .basin-coords--legacy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--white-dim);
  margin: 0.55rem 0 0.6rem;
  min-height: 0.9rem;
}
/* Concessions / Area / Owners counters hidden 2026-05-01 (Virtual
   Explorer audit, item #5). Always sat at 0 in practice; the LAND
   tab + DEPOSIT INTELLIGENCE summary cover the same ground. The DOM
   nodes stay so JS callers (loadEstimatedSalar, render) don't NPE. */
#right-panel .basin-stats {
  display: none !important;
}

/* ============================================================
   Right-panel cleanup on Virtual Explorer (audit #11/#12/#13).
   The legacy BASIN SELECTION dropdown and ACTIVE LAYERS card
   are replaced by the .map-controls overlay (search + popover).
   Hide them on view-explorer; keep them out of view-deposit3d
   too. The deposit-tabs (#dep-tabs-shell) stay visible because
   they're controlled by separate body.view-deposit3d rules.
   ============================================================ */
body.view-explorer #right-panel > .rp-card.rp-basin,
body.view-explorer #right-panel > .rp-card.rp-layers,
body.view-deposit3d #right-panel > .rp-card.rp-layers {
  display: none !important;
}
/* The Active Layers panel-header sits between rp-basin and rp-layers
   in the DOM. Use :has() to target it precisely; supported in all
   modern Chromium / Safari / Firefox. */
body.view-explorer #right-panel > .panel-header:has(+ .rp-card.rp-layers),
body.view-deposit3d #right-panel > .panel-header:has(+ .rp-card.rp-layers) {
  display: none !important;
}

/* When a Virtual Explorer user has no salar active, the right panel
   used to disappear entirely. After 2026-05-07 it stays visible and
   hosts the Deposit Lens (#expl-lens-panel) — the first-experience
   surface that lets users shape the map visually before drilling in.
   When a salar IS selected (body.has-active-salar), the lens hides
   and the existing Deposit Selection / Owners / Active Layers cards
   take over (rule below). 3D mode keeps the deposit tabs visible. */
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel {
  display: flex !important;
  flex-direction: column;
}
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > .panel-header,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > .rp-card.rp-basin,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > #dep-tabs-shell,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > .rp-intel,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > #rp-owners-header,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > .rp-card.rp-owners-card,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > #salar-tools,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > #plist-header,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > #projects-panel,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > #clist-header,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > #clist,
body.view-explorer:not(.has-active-salar):not(.view-deposit3d) #right-panel > #stats {
  display: none !important;
}
/* When a salar IS selected on the Explorer, the lens panel hides and
   the deposit-detail surfaces take over. */
body.has-active-salar #right-panel > #expl-lens-panel,
body.view-deposit3d  #right-panel > #expl-lens-panel {
  display: none !important;
}

/* (2026-06-14, 2A) The interim #expl-empty-state card was replaced by the
   restored Deposit Lens (#expl-lens-panel) — see markup near the right rail.
   Its CSS was removed; the lens panel's own styling (above) governs again. */

/* Back-to-Heatmap eyebrow — sits at the top of the right rail.
   Visible only when a salar is active (body.has-active-salar) on the
   Explorer. Hidden on overview / 3D / non-explorer views. Same cyan-
   tinted visual language as the lens panel so the entry/exit loop
   reads coherently. */
#right-panel > #dep-back-eyebrow {
  display: none;
}
body.has-active-salar.view-explorer #right-panel > #dep-back-eyebrow,
body.view-deposit3d              #right-panel > #dep-back-eyebrow {
  display: flex;
}
.dep-back-eyebrow {
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.6rem;
  background: rgba(0,200,200,0.08);
  border: 1px solid rgba(0,200,200,0.35);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--white-muted);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.dep-back-eyebrow:hover {
  background: rgba(0,200,200,0.14);
  border-color: rgba(0,200,200,0.6);
}
.dep-back-eyebrow:active { transform: scale(0.985); }
.dep-back-eyebrow-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dep-back-eyebrow-cta {
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.dep-back-eyebrow-sub {
  font-size: 0.7rem;
  color: var(--white-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dep-back-eyebrow-sub #dep-back-eyebrow-name {
  color: var(--white);
  font-weight: 500;
}
.dep-back-eyebrow-arrow {
  /* 2026-05-07 — right-side `›` chevron retired; the prominent
     left-side `←` is the single arrow on this button now. Class kept
     for any callers that still reference it. */
  display: none;
}
/* 2026-05-07 — prominent left-side back arrow on the dep-back-eyebrow
   button. Larger and brighter than the legacy ← in the cta text so the
   "back" affordance reads at a glance. */
.dep-back-eyebrow-arrow-left {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--cyan);
  flex-shrink: 0;
  margin-right: 0.7rem;
  transition: color 0.15s ease, transform 0.15s ease;
}
.dep-back-eyebrow:hover .dep-back-eyebrow-arrow-left {
  color: var(--cyan-bright, #00e5e5);
  transform: translateX(-2px);
}


/* ============================================================
   LENS PANEL — the screener controls re-mounted on the Virtual
   Explorer right rail. Visual identity matches the screener
   (cyan-on-dark, mono numerals, green→red score palette).
   Reuses .profile-pill / .scr-country-chip / .weight-row /
   .scr-type-pill primitives, scoped under #expl-lens-panel
   below so the existing #screener-page rules don't bleed in.
   ============================================================ */
#expl-lens-panel.expl-lens-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 0.95rem 1.1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 6px;
}
#expl-lens-panel .expl-lens-eyebrow {
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}
#expl-lens-panel .expl-lens-sub {
  font-size: 0.7rem;
  color: var(--white-dim);
  line-height: 1.45;
  margin-top: -0.25rem;
}
#expl-lens-panel .expl-lens-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#expl-lens-panel .expl-lens-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-muted);
}
#expl-lens-panel .expl-lens-label .panel-help {
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--white-dim);
}

/* Tri-pill row inside the lens — same primitives as the screener. */
#expl-lens-panel .scr-type-filter-row {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.2rem;
}
#expl-lens-panel .scr-type-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#expl-lens-panel .scr-type-pill:hover { color: var(--white); border-color: rgba(0,200,200,0.35); background: rgba(0,200,200,0.04); }
#expl-lens-panel .scr-type-pill.is-active { color: var(--cyan-bright); border-color: rgba(0,200,200,0.55); background: rgba(0,200,200,0.08); box-shadow: 0 0 10px rgba(0,200,200,0.18); }
#expl-lens-panel .scr-type-pill .scr-type-count {
  font-size: 0.55rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--white-muted); background: rgba(255,255,255,0.04);
  padding: 1px 0.3rem; border-radius: 8px;
}
#expl-lens-panel .scr-type-pill.is-active .scr-type-count { color: var(--cyan); background: rgba(0,200,200,0.1); }

/* Allocator profile pills inside the lens. */
#expl-lens-panel .profile-list { display: flex; flex-direction: column; gap: 0.3rem; }
#expl-lens-panel .profile-pill {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.7rem;
  font-size: 0.78rem; color: var(--white-muted);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#expl-lens-panel .profile-pill:hover { color: var(--white); border-color: rgba(0,200,200,0.35); background: rgba(0,200,200,0.04); }
#expl-lens-panel .profile-pill.active { color: var(--cyan-bright); border-color: rgba(0,200,200,0.55); background: rgba(0,200,200,0.08); box-shadow: 0 0 10px rgba(0,200,200,0.18); }
#expl-lens-panel .profile-pill .pip {
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.58rem; letter-spacing: 0.04em; color: var(--white-dim);
}
#expl-lens-panel .filter-pill {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem; letter-spacing: 0.06em;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white-dim);
  cursor: pointer;
  transition: all 0.15s ease;
}
#expl-lens-panel .filter-pill:hover { color: var(--white); border-color: rgba(0,200,200,0.35); }
#expl-lens-panel .filter-pill.on { color: var(--cyan-bright); border-color: rgba(0,200,200,0.55); background: rgba(0,200,200,0.08); }
#expl-lens-panel .filter-pill .filter-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--white-dim); flex-shrink: 0; transition: all 0.2s ease; }
#expl-lens-panel .filter-pill.on .filter-dot { background: var(--cyan); box-shadow: 0 0 6px rgba(0,200,200,0.55); }
#expl-lens-panel .filter-pill .filter-count { margin-left: auto; font-size: 0.6rem; color: var(--white-dim); }

/* Country chips. */
#expl-lens-panel .scr-country-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
#expl-lens-panel .scr-country-chip {
  display: inline-flex; align-items: center; gap: 0.32rem;
  padding: 0.24rem 0.55rem;
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white-dim);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#expl-lens-panel .scr-country-chip:hover { color: var(--white); border-color: rgba(0,200,200,0.35); }
#expl-lens-panel .scr-country-chip.on { color: var(--cyan-bright); border-color: rgba(0,200,200,0.55); background: rgba(0,200,200,0.08); }
#expl-lens-panel .scr-country-chip .chip-count {
  font-size: 0.5rem; color: var(--white-muted);
  background: rgba(255,255,255,0.04);
  padding: 0 0.28rem;
  border-radius: 8px;
}
#expl-lens-panel .scr-country-chip.on .chip-count { color: var(--cyan); background: rgba(0,200,200,0.1); }
#expl-lens-panel .scr-country-chip-reset {
  padding: 0.2rem 0.55rem;
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white-dim);
  background: transparent; border: 1px dashed var(--border-light);
  border-radius: 999px;
  cursor: pointer;
}
#expl-lens-panel .scr-country-chip-reset:hover { color: var(--cyan); border-color: rgba(0,200,200,0.45); }

/* Weight sliders. */
#expl-lens-panel .weights { display: flex; flex-direction: column; gap: 0.45rem; }
#expl-lens-panel .weight-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center; gap: 0.5rem;
}
#expl-lens-panel .weight-color { width: 11px; height: 11px; border-radius: 2px; }
#expl-lens-panel .weight-name {
  font-size: 0.7rem; color: var(--scr-white-soft, #cbd6e6);
  display: flex; justify-content: space-between; align-items: center; gap: 0.4rem;
}
#expl-lens-panel .weight-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  outline: none;
  margin-top: 4px;
}
#expl-lens-panel .weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cyan); cursor: pointer;
  box-shadow: 0 0 6px rgba(0,200,200,0.5);
}
#expl-lens-panel .weight-slider::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--cyan); cursor: pointer; }
#expl-lens-panel .weight-val {
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem; color: var(--white); text-align: right;
}
#expl-lens-panel .weight-total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 0.7rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--border);
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem; color: var(--white-muted);
}
#expl-lens-panel .weight-total .val { color: var(--cyan); font-weight: 600; }
#expl-lens-panel .reset-btn {
  display: block; width: 100%;
  margin-top: 0.6rem; padding: 0.45rem;
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white-muted);
  background: transparent;
  border: 1px solid var(--border-light); border-radius: 4px;
  cursor: pointer;
}
#expl-lens-panel .reset-btn:hover { color: var(--cyan); border-color: rgba(0,200,200,0.45); }

/* Deposit-select dropdown inside the lens panel — mirrors the look
   of the active-salar #sel dropdown so users recognise the control. */
#expl-lens-panel .expl-lens-deposit-select {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  padding: 0.5rem 0.6rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--white-dim) 50%),
    linear-gradient(135deg, var(--white-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
#expl-lens-panel .expl-lens-deposit-select:hover,
#expl-lens-panel .expl-lens-deposit-select:focus {
  border-color: rgba(0,200,200,0.45);
  background-color: rgba(0,200,200,0.04);
  outline: none;
}

/* Invert chip + hint inside the lens (mirrors screener's invert chips). */
#expl-lens-panel .invert-btn {
  margin-left: 0.35rem;
  padding: 1px 0.38rem;
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.52rem; letter-spacing: 0.04em;
  color: var(--white-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  cursor: pointer;
}
#expl-lens-panel .invert-btn:hover { color: var(--white); border-color: rgba(0,200,200,0.35); }
#expl-lens-panel .invert-btn.on { color: var(--cyan-bright); border-color: rgba(0,200,200,0.55); background: rgba(0,200,200,0.08); }
#expl-lens-panel .invert-hint {
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  font-size: 0.52rem;
  color: var(--white-dim);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
#expl-lens-panel .invert-hint.on { color: var(--cyan); }


/* Original layout retained below so re-enabling is a one-rule revert. */
#right-panel .basin-stats--legacy {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.35rem;
}
#right-panel .basin-stat {
  font-size: 0.58rem;
  color: var(--white-dim);
  line-height: 1.15;
  font-family: 'Inter', -apple-system, sans-serif;
}
#right-panel .basin-stat .unit {
  font-size: 0.5rem;
  color: var(--white-dim);
  opacity: 0.6;
  text-transform: lowercase;
}
#right-panel .basin-stat strong {
  display: block;
  font-size: 0.85rem;
  color: var(--white-muted);
  font-weight: 600;
  margin-top: 0.1rem;
  font-family: 'JetBrains Mono', monospace;
}
#right-panel .basin-stat strong.highlight { color: var(--cyan); }

/* Watch-this-salar button — sits below the basin-stats grid in the
   Basin Selection card. Reuses the cyan accent palette to match the
   Screener star treatment so the unified watchlist feels like one
   feature regardless of where you star from. */
.exp-watch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.8rem;
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-muted);
  background: rgba(0, 200, 200, 0.06);
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.exp-watch-btn:hover {
  background: rgba(0, 200, 200, 0.12);
  border-color: rgba(0, 200, 200, 0.55);
  color: var(--white);
}
.exp-watch-btn .exp-watch-icon { font-size: 0.95rem; line-height: 1; color: var(--cyan); }
.exp-watch-btn .exp-watch-label { flex: 0 0 auto; }
.exp-watch-btn .exp-watch-meta {
  margin-left: auto;
  font-size: 0.55rem;
  color: var(--white-dim);
  letter-spacing: 0.06em;
}
.exp-watch-btn.watched {
  background: rgba(0, 200, 200, 0.16);
  border-color: var(--cyan);
  color: var(--white);
}
.exp-watch-btn.watched .exp-watch-icon { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 200, 200, 0.55); }
.exp-watch-btn.at-cap {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  cursor: pointer;
}
.exp-watch-btn.at-cap .exp-watch-icon { color: #fbbf24; }

/* Layer toggle list */
.rp-layers { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.55rem 0.6rem; }
.rp-tgl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.35rem;
  font-size: 0.72rem;
  color: var(--white-muted);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
}
.rp-tgl:hover { background: rgba(255, 255, 255, 0.03); }
.rp-tgl .layer-left { display: flex; align-items: center; gap: 0.5rem; }
.rp-tgl .layer-dot {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
}
.rp-tgl input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px; height: 13px;
  background: rgba(255,255,255,0.08);
  border-radius: 7px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  margin: 0;
  border: none;
}
.rp-tgl input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--white-dim);
  transition: all 0.15s;
}
.rp-tgl input[type="checkbox"]:checked { background: rgba(0, 200, 200, 0.3); }
.rp-tgl input[type="checkbox"]:checked::after {
  left: 13px;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 200, 200, 0.5);
}

/* Salar tools inside right panel */
.rp-tools { padding: 0.65rem 0.7rem; font-size: 0.72rem; color: var(--white-muted); }

/* Projects + Concessions lists */
.rp-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 0.2rem 0;
}
.rp-list .ci {
  padding: 0.5rem 0.6rem;
  font-size: 0.72rem;
}
.rp-list .ci .n { font-size: 0.75rem; }
.rp-list .ci .o, .rp-list .ci .a { font-size: 0.65rem; }

/* Basin owners list — populated when a salar is selected. Lives between
   Basin Selection and Active Layers. Each row is the operator's color
   chip + name + (concession-count · ha). Hidden until a salar resolves
   to ≥1 owner. */
.rp-owners-card {
  padding: 0.35rem 0.4rem 0.4rem;
  max-height: 240px;
  overflow-y: auto;
}
/* 2026-05-06 — Owners is now a tab panel inside #dep-tabs-shell.
   The legacy panel-header (#rp-owners-header) is preserved inside the
   panel as a JS-write target but should not render — the tab button
   already labels the surface.  !important overrides renderOwnersPanel
   which sets head.style.display = '' when populating. */
.dep-tab-panel #rp-owners-header { display: none !important; }
/* Tab-button count chip — small parenthetical "(N)" matching the
   existing #oc count look. */
#dep-tab-btn-owners .rp-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7em;
  color: inherit;
  opacity: 0.65;
  margin-left: 4px;
}
.rp-owners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.rp-owner {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.42rem 0.5rem;
  border-radius: 3px;
  font-size: 0.72rem;
  color: var(--white);
  background: transparent;
  cursor: default;
  transition: background 0.12s ease;
}
.rp-owner:hover { background: rgba(0, 200, 200, 0.05); }
.rp-owner-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4) inset;
}
/* Stack name above meta so long meta lines (block-count + area +
   in-place LCE in 3D mode) never elbow the owner name off the row.
   Restructured 2026-05-04 when LCE was added to the meta line and the
   single-row layout pushed every owner name out of view. */
.rp-owner-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rp-owner-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-owner-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--white-dim);
}
.rp-owner-meta .rp-owner-meta-ha { color: var(--cyan); }

/* Clickable owner row — opens the operator's project detail over the map. */
.rp-owner.is-clickable { cursor: pointer; }
.rp-owner.is-clickable:hover { background: rgba(0, 200, 200, 0.10); }
.rp-owner.is-active {
  background: rgba(0, 200, 200, 0.18);
  outline: 1px solid rgba(0, 200, 200, 0.45);
}

/* =========================================================================
   Owner-project overlay — covers the map area when an owner row is clicked
   in the Virtual Explorer sidebar. Closes via × and returns to the map.
   ========================================================================= */
.rp-owner-project-overlay {
  position: absolute;
  inset: 0;
  /* Leaflet's .leaflet-top / .leaflet-control container sits at z-index 1000,
     so this needs to land above 1000 — otherwise the +/- zoom buttons
     punch through the overlay and obscure the close ×. */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: var(--navy-mid);
  color: var(--white);
  overflow: hidden;
}
.rp-owner-project-overlay[hidden] { display: none !important; }
.rp-opo-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0));
}
.rp-opo-header-text { flex: 1 1 auto; min-width: 0; }
.rp-opo-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.18rem;
}
.rp-opo-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.rp-opo-title-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.45) inset;
}
.rp-opo-sub {
  font-size: 0.7rem;
  color: var(--white-dim);
  margin-top: 0.18rem;
}
.rp-opo-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rp-opo-close:hover {
  background: rgba(0, 200, 200, 0.15);
  border-color: rgba(0, 200, 200, 0.55);
  color: var(--cyan);
}
.rp-opo-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.9rem 1rem 1.4rem;
}
.rp-opo-empty {
  font-size: 0.78rem;
  color: var(--white-dim);
  padding: 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  text-align: center;
}
.rp-opo-project {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--cyan);
  border-radius: 4px;
  padding: 0.7rem 0.85rem 0.85rem;
  margin-bottom: 0.7rem;
  background: rgba(0, 0, 0, 0.18);
}
.rp-opo-project + .rp-opo-project { margin-top: 0; }
.rp-opo-project-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}
.rp-opo-project-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
}
.rp-opo-project-stage {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}
.rp-opo-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.25rem 0.7rem;
  font-size: 0.72rem;
  color: var(--white);
}
.rp-opo-grid dt {
  color: var(--white-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rp-opo-grid dd {
  margin: 0;
  color: var(--white);
}
.rp-opo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.rp-opo-action {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border-radius: 2px;
  border: 1px solid rgba(0, 200, 200, 0.45);
  color: var(--cyan);
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease;
}
.rp-opo-action:hover { background: rgba(0, 200, 200, 0.12); }

/* Multi-match project picker (owner has >1 project on the salar). */
.rp-opo-pickhint {
  font-size: 0.72rem;
  color: var(--white-dim);
  margin-bottom: 0.6rem;
  line-height: 1.45;
}
.rp-opo-pick {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.2rem 0.7rem;
  width: 100%;
  text-align: left;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--cyan);
  border-radius: 4px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.45rem;
  cursor: pointer;
  color: var(--white);
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rp-opo-pick:hover {
  background: rgba(0, 200, 200, 0.08);
  border-color: rgba(0, 200, 200, 0.45);
}
.rp-opo-pick[disabled] { opacity: 0.55; cursor: not-allowed; }
.rp-opo-pick-name {
  grid-column: 1 / 2;
  font-size: 0.84rem;
  font-weight: 600;
}
.rp-opo-pick-meta {
  grid-column: 1 / 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.66rem;
  color: var(--white-dim);
}
.rp-opo-pick-meta .rp-opo-pick-sep { color: rgba(255,255,255,0.25); }
.rp-opo-pick-arrow {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  font-size: 1.1rem;
  color: var(--cyan);
}

/* Missing-project flag banner — surfaces brinefield hunter routing. */
.rp-opo-flag {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.7rem;
  border-radius: 3px;
  border: 1px solid rgba(247, 145, 90, 0.45);
  background: rgba(247, 145, 90, 0.08);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--white);
}
.rp-opo-flag-soft {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.rp-opo-flag-tag {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f7915a;
  white-space: nowrap;
  padding-top: 0.06rem;
}
.rp-opo-flag-tag.soft { color: var(--white-dim); }

/* Make #main a 3-column flex; right panel sits to the right of the map */
#main > #right-panel { margin-left: 0; }

/* Tighten #topbar typography */
#topbar .title-tab { font-size: 0.72rem; letter-spacing: 0.01em; }
#topbar .user-email { font-size: 0.62rem; }
#topbar .btn-logout { font-size: 0.62rem; }

/* Map overlays — tighter sizes matching mockup */
.map-tab { font-size: 0.65rem; }
.map-search { font-size: 0.62rem; }
.map-search .search-icon { opacity: 0.5; font-size: 0.55rem; margin-right: 0.15rem; }
.status-text { font-size: 0.55rem; }

/* Legend title/bar (mockup-matched typography) */
.map-legend {
  min-width: 120px;
}

/* Fade the app shell in on first load */
#app.active { animation: appRiseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* ========== PROJECT DATABASE VIEW ==========
   Simple page swap: Explorer shows map + right panel; Database shows
   the table in their place. No overlay, no slide animation — the tab
   click flips `body` between `.view-explorer` and `.view-database` and
   the matching panels show/hide.
*/
#db-panel {
  display: none;        /* hidden by default */
  flex: 1;
  flex-direction: column;
  background: rgba(6, 15, 29, 0.6);
  border-left: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white-muted);
  overflow: hidden;
  animation: none !important;
}
body.view-database #db-panel   { display: flex !important; }
body.view-database #mw         { display: none !important; }
body.view-database #right-panel{ display: none !important; }
body.view-explorer #db-panel   { display: none !important; }

/* Tab / sidebar-item states update instantly when view toggles */
.title-tab, .sidebar-item[data-view] { transition: color 0.2s ease, background 0.2s ease; }

/* Topbar: only the active page label shows. The sidebar carries navigation;
   the topbar just confirms which view the user is on, sitewide. */
#topbar .title-tab:not(.active):not(.title-tab-current):not(.title-tab-staff) { display: none !important; }
#topbar .title-tab-current[hidden] { display: none !important; }
#topbar .title-tabs { gap: 0; justify-content: flex-start; }

/* Staff-tab pulse animation — used by the new .topbar-team-tab. The
   class .title-tab-staff is kept on the element for backward compat
   but its presentation now lives in the #topbar .topbar-team-tab block
   above. */
@keyframes teamTabPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 200, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(0, 200, 200, 0); }
}

/* Watchlist: hide the panel header (title + cap pill). The Capital Pulse
   strip above and the slim Puna Analyst strip below carry context — the
   plain "Watchlist" title is redundant with the topbar tab and the cap pill
   is redundant with the watching-rail counts in compact mode. */
.wlx-panel .wlx-header { display: none; }

.db-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.6);
  flex: 0 0 auto;
}
.db-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--white);
}
.db-sub {
  font-weight: 400;
  color: var(--cyan);
  margin-left: 0.4rem;
  letter-spacing: 0.08em;
}
/* Columns dropdown */
.db-cols-wrap { position: relative; }
.db-cols-btn {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-muted);
  background: rgba(6, 15, 29, 0.7);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.db-cols-btn:hover { color: var(--cyan); border-color: var(--border-light); }
.db-cols-btn .caret { margin-left: 4px; font-size: 0.7rem; }
.db-cols-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 200px;
  max-height: 360px;
  overflow-y: auto;
  background: rgba(6, 15, 29, 0.98);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  padding: 6px 0;
}
.db-cols-menu label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 12px;
  font-size: 0.72rem;
  color: var(--white-muted);
  cursor: pointer;
  user-select: none;
}
.db-cols-menu label:hover { background: rgba(0, 200, 200, 0.06); color: var(--white); }
.db-cols-menu input { accent-color: var(--cyan); cursor: pointer; }
.db-cols-menu .db-cols-footer {
  display: flex;
  gap: 0.5rem;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  font-size: 0.62rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.db-cols-menu .db-cols-footer button {
  background: none;
  border: none;
  color: var(--cyan);
  cursor: pointer;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.db-cols-menu .db-cols-footer button:hover { color: var(--cyan-bright); text-decoration: underline; }

.db-search-wrap { margin-left: auto; }
.db-search-wrap input {
  width: 240px;
  padding: 5px 9px;
  font-family: inherit;
  font-size: 0.7rem;
  background: rgba(6, 15, 29, 0.7);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--white);
}
.db-search-wrap input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0, 200, 200, 0.2);
}

.db-scroll { flex: 1 1 auto; overflow: auto; }

/* SUBSCRIBE — slim strip pinned at the bottom of the Project Database.
   Mirrors the screener subscribe block but compressed to a single row so
   the table keeps its real-estate. Always visible regardless of scroll. */
.db-subscribe-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(0, 200, 200, 0.05) 0%, rgba(0, 0, 0, 0) 55%),
    rgba(6, 15, 29, 0.85);
  position: relative;
  overflow: hidden;
}
.db-subscribe-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 90px at 100% 0%, rgba(0, 200, 200, 0.08), transparent 65%);
  pointer-events: none;
}
.db-sub-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--cyan);
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
}
.db-sub-copy {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.db-sub-copy strong {
  display: block;
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.15rem;
  font-family: 'Inter', sans-serif;
}
.db-sub-copy span {
  color: var(--white-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  font-family: 'Inter', sans-serif;
}
.db-sub-copy .db-sub-attribution {
  display: block;
  margin-top: 0.35rem;
  color: var(--white-dim);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}
.db-sub-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--cyan);
  border-radius: 4px;
  background: rgba(0, 200, 200, 0.06);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  position: relative;
}
.db-sub-cta:hover {
  background: rgba(0, 200, 200, 0.16);
  box-shadow: 0 0 18px rgba(0, 200, 200, 0.28);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .db-subscribe-strip { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .db-sub-cta { align-self: stretch; justify-content: center; }
}
.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  white-space: nowrap;
}
.db-table thead th {
  position: sticky;
  top: 0;
  background: rgba(11, 26, 46, 0.95);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white-dim);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cyan);
  z-index: 2;
}
.db-table thead th.num { text-align: right; }
.db-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}
.db-table thead th.sortable:hover { color: var(--cyan); background: rgba(0, 200, 200, 0.04); }
.db-table thead th .sort-ind {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.65rem;
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s;
}
.db-table thead th.sort-active { color: var(--cyan); }
.db-table thead th.sort-active .sort-ind { opacity: 1; color: var(--cyan); }
.db-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--white-muted);
  vertical-align: middle;
}
.db-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.db-table tbody tr { transition: background 0.12s; cursor: pointer; }
.db-table tbody tr:hover { background: rgba(0, 200, 200, 0.06); }
.db-table tbody tr.active { background: rgba(0, 200, 200, 0.12); }
.db-name { color: var(--white); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.db-name .sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }


body.is-staff #dbf-rail .dbf-section-staff { display: block; }
.db-stage {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 0.6rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.db-stage.s-producing      { background: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.db-stage.s-construction   { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.db-stage.s-pfs            { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.db-stage.s-feasibility    { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.db-stage.s-exploration    { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
.db-stage.s-default        { background: rgba(148, 163, 184, 0.1); color: var(--white-dim); }
.db-empty {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.75rem;
  color: var(--white-dim);
}
/* Empty-state stack: "no matches" copy on top, the add-it CTA below.
   Used by the Project Database when a search returns 0 rows.
   The CTA opens the shared punaOpenAddProjectModal in 'database'
   mode and prefills the project name from the search query. */
.db-empty-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.db-empty-add {
  appearance: none;
  background: rgba(0, 200, 200, 0.08);
  border: 1px dashed rgba(0, 200, 200, 0.45);
  color: var(--cyan);
  border-radius: 4px;
  padding: 0.45rem 0.85rem;
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.db-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.db-empty-reset {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--white-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.55rem 0.95rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.db-empty-reset:hover {
  color: var(--white);
  border-color: var(--white-muted);
  background: rgba(255, 255, 255, 0.04);
}
.db-empty-add:hover {
  background: rgba(0, 200, 200, 0.14);
  border-color: var(--cyan);
}
.db-empty-add strong { font-weight: 600; }
.db-muted { color: var(--white-dim); }

/* ============================================================
   WATCHLIST PANEL  (For Capital persona — INVEST → Watchlist)
   ------------------------------------------------------------
   Full-page panel that swaps in via `body.view-watchlist`,
   matching the show/hide pattern used by #db-panel.
   Two-column layout:
     LEFT  — searchable, filterable project list (max 10 ticked)
     RIGHT — historical announcements feed for ticked projects
             with NAV Uplift Alert badges anchored on MEFS
             (Minimum Economic Field Size) framing.
   ============================================================ */
#wl-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  background: rgba(6, 15, 29, 0.6);
  border-left: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white-muted);
  /* Allow vertical scroll when picker / feed run past the viewport.
     The inner wlx-scroll lists keep their own internal scroll, but the
     outer panel must remain scrollable so the user can reach the
     projects section below the deposits picker. */
  overflow-y: auto;
  overflow-x: hidden;
  animation: none !important;
}
body.view-watchlist #wl-panel    { display: flex !important; }
body.view-watchlist #mw          { display: none !important; }
body.view-watchlist #right-panel { display: none !important; }
body.view-watchlist #db-panel    { display: none !important; }
body.view-explorer  #wl-panel    { display: none !important; }
body.view-database  #wl-panel    { display: none !important; }

/* Database top search box hidden 2026-05-05 — the Ask Puna bar is the
   search/filter surface now. Element preserved (#db-search.value still
   read by renderProjectDatabase) so a future Pass C wires the bar into
   it without code churn. */
body.view-database #db-panel .db-search-wrap { display: none !important; }

/* Database filter rail — visible only on view-database; moved into
   #right-rail by pgaWireRightRail. */
#dbf-rail {
  display: none;
  padding: 0;
}
body.view-database #dbf-rail { display: block; }

.dbf-rail-h {
  font-size: 13px; font-weight: 600;
  margin-bottom: 12px;
  color: var(--white);
}
.dbf-section { margin-bottom: 18px; }
.dbf-meta-hint {
  margin-left: 0.5rem;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.dbf-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 8px;
}
.dbf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dbf-chip {
  padding: 4px 10px;
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--white-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}
.dbf-chip:hover { color: var(--white); border-color: var(--border-light); }
.dbf-chip.is-on {
  background: rgba(0, 200, 200, 0.14);
  border-color: var(--cyan);
  color: var(--cyan-bright);
}
.dbf-range-bar {
  position: relative;
  height: 28px;
}
.dbf-range-bar input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
  appearance: none;
  background: transparent;
  margin: 0;
}
.dbf-range-bar input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0, 200, 200, 0.3);
}
.dbf-range-bar input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  border: 0;
  cursor: pointer;
}
.dbf-range-bar input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}
.dbf-range-bar input[type="range"]::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}
.dbf-range-meta {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--white);
  margin-bottom: 6px;
}
.dbf-text {
  display: block; width: 100%;
  padding: 7px 10px;
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color 0.12s;
}
.dbf-text:focus { border-color: var(--cyan); }
.dbf-text::placeholder { color: var(--white-dim); }

.dbf-clear-wrap { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.dbf-clear-btn {
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--white-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
}
.dbf-clear-btn:hover { color: var(--cyan); border-color: var(--cyan); }

.wl-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.6);
  flex: 0 0 auto;
}
.wl-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--white);
}
.wl-sub {
  font-weight: 400;
  color: var(--cyan);
  margin-left: 0.4rem;
  letter-spacing: 0.08em;
}
.wl-spacer { flex: 1; }
.wl-cap {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(6, 15, 29, 0.7);
}
.wl-cap.full { color: #fbbf24; border-color: rgba(245, 158, 11, 0.35); }

/* ============================================================
   Watched-salars strip — chips for USER_WATCHLIST entries.
   Sits between the wl-header and wl-body so it's visible in
   every state of the picker.
   ============================================================ */
.wl-watched-strip {
  flex: 0 0 auto;
  padding: 0.55rem 0.85rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 20, 36, 0.55);
}
.wl-watched-head {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
}
.wl-watched-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.wl-watched-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--white-dim);
}
.wl-watched-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.wl-watched-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 8px 4px 9px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--white);
  background: rgba(0, 200, 200, 0.1);
  border: 1px solid rgba(0, 200, 200, 0.45);
  border-radius: 12px;
  cursor: default;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wl-watched-chip:hover { background: rgba(0, 200, 200, 0.16); }
.wl-watched-chip .x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 0.05rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white-dim);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.wl-watched-chip .x:hover { background: rgba(220, 38, 38, 0.4); color: #fff; }
.wl-watched-chip .country {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: var(--white-dim);
  text-transform: uppercase;
}
.wl-watched-empty {
  font-size: 0.7rem;
  color: var(--white-dim);
  line-height: 1.45;
  padding: 0.25rem 0;
}
.wl-watched-empty strong { color: var(--cyan); font-weight: 500; }
.wl-watched-strip.has-items .wl-watched-empty { display: none; }
.wl-watched-strip:not(.has-items) .wl-watched-chips { display: none; }

/* Project rows that are auto-watched because their salar is in
   USER_WATCHLIST get a subtle cyan accent and look read-only. */
.wl-row.auto-watched {
  background: rgba(0, 200, 200, 0.05);
  border-left: 2px solid rgba(0, 200, 200, 0.55);
  cursor: default;
}
.wl-row.auto-watched .wl-cb { pointer-events: none; opacity: 0.85; }
.wl-row.auto-watched::after {
  content: "via salar";
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: rgba(0, 200, 200, 0.7);
  text-transform: uppercase;
  pointer-events: none;
}
.wl-row { position: relative; }

.wl-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  min-height: 0;
}
.wl-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.wl-col-left  { border-right: 1px solid var(--border); }
.wl-col-tools {
  padding: 0.7rem 0.85rem 0.55rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.35);
  flex: 0 0 auto;
}
.wl-search {
  width: 100%;
  background: rgba(6, 15, 29, 0.85);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  padding: 7px 10px;
  font-size: 0.75rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.15s;
}
.wl-search:focus { border-color: var(--cyan); }
.wl-search::placeholder { color: var(--white-dim); }

.wl-stage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 0.55rem;
}
.wl-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid var(--border-light);
  background: rgba(6, 15, 29, 0.7);
  color: var(--white-dim);
  cursor: pointer;
  user-select: none;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.wl-chip:hover { color: var(--white); border-color: var(--white-dim); }
.wl-chip.on    { color: var(--navy-deep); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.wl-chip-clear {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--white-dim);
  cursor: pointer;
}
.wl-chip-clear:hover { color: var(--cyan); }

.wl-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.35rem 0.4rem 0.85rem;
}
.wl-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
  border: 1px solid transparent;
}
.wl-row:hover { background: rgba(0, 200, 200, 0.05); }
.wl-row.checked { background: rgba(0, 200, 200, 0.07); border-color: rgba(0, 200, 200, 0.2); }
.wl-row.disabled { opacity: 0.45; cursor: not-allowed; }
.wl-row.disabled:hover { background: transparent; }

.wl-cb {
  margin-top: 2px;
  width: 14px; height: 14px;
  accent-color: var(--cyan);
  cursor: pointer;
  flex: 0 0 auto;
}
.wl-row-body { flex: 1; min-width: 0; }
.wl-row-name {
  font-size: 0.78rem;
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wl-row-meta {
  font-size: 0.66rem;
  color: var(--white-dim);
  margin-top: 1px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.wl-row-meta .dot { opacity: 0.5; }

.wl-stage-pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 600;
}
.wl-stage-pill.s-greenfield      { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
.wl-stage-pill.s-pea             { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.wl-stage-pill.s-pfs             { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.wl-stage-pill.s-fs              { background: rgba(20, 184, 166, 0.15); color: #5eead4; }
.wl-stage-pill.s-construction    { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.wl-stage-pill.s-base-production { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.wl-stage-pill.s-full-production { background: rgba(16, 185, 129, 0.2);  color: #34d399; }
.wl-stage-pill.s-default         { background: rgba(148, 163, 184, 0.1); color: var(--white-dim); }

.wl-empty {
  text-align: center;
  padding: 1.4rem 0.8rem;
  font-size: 0.72rem;
  color: var(--white-dim);
}
.wl-cap-warning {
  margin-top: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-size: 0.7rem;
  font-family: 'Inter', sans-serif;
  line-height: 1.45;
  display: none;
}
.wl-cap-warning.show { display: block; }
.wl-cap-warning strong { color: #fcd34d; font-weight: 600; }

/* ----- RIGHT COLUMN: Announcements feed ----- */
.wl-feed-header {
  padding: 0.7rem 0.95rem 0.55rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.35);
  flex: 0 0 auto;
}
.wl-feed-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 4px;
}
.wl-feed-title {
  font-size: 0.95rem;
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.wl-feed-sub {
  font-size: 0.7rem;
  color: var(--white-dim);
  margin-top: 3px;
}
.wl-feed-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.wl-feed-filter {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid var(--border-light);
  background: rgba(6, 15, 29, 0.7);
  color: var(--white-dim);
  cursor: pointer;
}
.wl-feed-filter.on { color: var(--navy-deep); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }

/* Email alert subscribe — appears in the feed header once the user has
   ticked at least one project. Lets them ask for the same NAV Uplift
   Alerts in their inbox. Subscribe action also fires punaIntelLog so
   customer success sees the signal. */
/* Collapsed trigger — single-line opt-in. The full row stays hidden until
   the user clicks this. Keeps the feed visually quiet by default. */
.wl-alert-toggle {
  margin-top: 0.7rem;
  padding: 0.45rem 0.7rem;
  border: 1px dashed rgba(0, 200, 200, 0.32);
  background: transparent;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  align-self: flex-start;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--white-muted);
  letter-spacing: 0.01em;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.wl-alert-toggle[hidden] { display: none; }
.wl-alert-toggle:hover {
  background: rgba(0, 200, 200, 0.05);
  color: var(--white);
  border-color: rgba(0, 200, 200, 0.55);
  border-style: solid;
}
.wl-alert-toggle .wl-alert-toggle-icon {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 229, 229, 0.55);
  flex: 0 0 auto;
}
.wl-alert-toggle .wl-alert-toggle-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-left: 0.35rem;
}
.wl-alert-toggle.subscribed {
  border-style: solid;
  border-color: rgba(0, 200, 200, 0.55);
  background: rgba(0, 200, 200, 0.06);
  color: var(--white);
}
.wl-alert-toggle.subscribed .wl-alert-toggle-meta { color: var(--cyan); }

.wl-alert-row {
  margin-top: 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(0, 200, 200, 0.32);
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.06) 0%, rgba(0, 200, 200, 0) 70%), rgba(11, 26, 46, 0.5);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  position: relative;
}
.wl-alert-row[hidden] { display: none; }
/* Small collapse affordance inside the expanded row. */
.wl-alert-collapse {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--white-dim);
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  border-radius: 3px;
  transition: background 0.12s ease, color 0.12s ease;
}
.wl-alert-collapse:hover { background: rgba(0, 200, 200, 0.08); color: var(--white); }
.wl-alert-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.wl-alert-eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 229, 229, 0.7);
}
.wl-alert-text {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--white-muted);
}
.wl-alert-text strong {
  color: var(--white);
  font-weight: 600;
}
.wl-alert-cadence {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.1rem;
}
.wl-cadence-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.45rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s ease;
  font-size: 0.74rem;
  color: var(--white);
}
.wl-cadence-opt:hover { background: rgba(0, 200, 200, 0.05); }
.wl-cadence-opt input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--cyan);
  cursor: pointer;
}
.wl-cadence-name {
  flex: 1 1 auto;
  font-weight: 500;
}
.wl-cadence-meta {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.wl-alert-form {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
}
.wl-alert-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--white);
  background: rgba(6, 15, 29, 0.7);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 0.45rem 0.6rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wl-alert-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0, 200, 200, 0.18);
}
.wl-alert-input::placeholder { color: var(--white-dim); }
.wl-alert-btn {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cyan);
  background: rgba(0, 200, 200, 0.06);
  border: 1px solid var(--cyan);
  border-radius: 3px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.wl-alert-btn:hover:not(:disabled) {
  background: var(--cyan);
  color: var(--navy-deep);
  box-shadow: 0 0 14px rgba(0, 200, 200, 0.32);
}
.wl-alert-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wl-alert-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--white-dim);
  min-height: 0;
}
.wl-alert-status.ok    { color: var(--cyan); }
.wl-alert-status.error { color: #ff8a8a; }
.wl-alert-row.subscribed {
  border-color: rgba(0, 200, 200, 0.5);
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.1) 0%, rgba(0, 200, 200, 0) 70%), rgba(11, 26, 46, 0.55);
}

/* Weekly digest preferences are now folded into wl-alert-row via the
   wl-alert-cadence checkboxes. Standalone wl-digest-row styles removed. */

.wl-feed-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem 0.95rem 1.2rem;
}
.wl-feed-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--white-dim);
  font-size: 0.78rem;
  line-height: 1.55;
}
.wl-feed-empty .wl-feed-empty-cta {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--white-dim);
  opacity: 0.7;
}

.wl-ann {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.95rem;
  align-items: start;
}
.wl-ann:last-child { border-bottom: none; }
.wl-ann-date {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--white-dim);
  text-transform: uppercase;
  padding-top: 2px;
}
.wl-ann-body { min-width: 0; }
.wl-ann-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 4px;
}
.wl-ann-proj {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
}
.wl-ann-source {
  font-size: 0.66rem;
  color: var(--white-dim);
}
.wl-ann-source::before { content: '· '; opacity: 0.5; }

.wl-ann-headline {
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 2px 0 4px;
  letter-spacing: 0.01em;
}
.wl-ann-summary {
  color: var(--white-muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

/* NAV Uplift Alert — the agent badge */
.wl-nav-alert {
  margin-top: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.07), rgba(0, 229, 229, 0.12));
  border: 1px solid rgba(0, 200, 200, 0.35);
  position: relative;
  overflow: hidden;
}
.wl-nav-alert::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(0, 229, 229, 0.08) 50%, transparent 70%);
  animation: wlShimmer 4.5s linear infinite;
  pointer-events: none;
}
@keyframes wlShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.wl-nav-alert-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-bright, #00e5e5);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.wl-nav-alert-tag::before {
  content: '◆';
  font-size: 0.7rem;
  color: var(--cyan);
  animation: wlPulse 1.8s ease-in-out infinite;
}
@keyframes wlPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.wl-nav-alert-text {
  font-size: 0.7rem;
  color: var(--white);
  line-height: 1.5;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.wl-nav-alert-text strong { color: var(--cyan-bright, #00e5e5); font-weight: 600; }
.wl-nav-alert-trigger {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* ----- PUNA ANALYST STRIP -----
   Compact, terminal-style ribbon that lives between the feed header
   and the announcements. Default state shows ONE rotating insight that
   types in character-by-character with a blinking caret, so the panel
   reads as live without dominating the page. A small chevron expands
   the strip to reveal a longer breakdown.
   The recursive loop in wlInit() advances the rotating insight every
   ~5 seconds and recomputes the full insight set every ~30 seconds.
*/
.wl-analyst {
  margin-bottom: 1.1rem;
  border: 1px solid rgba(0, 200, 200, 0.22);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(11, 26, 46, 0.85), rgba(6, 15, 29, 0.85));
  overflow: hidden;
  position: relative;
}
.wl-analyst::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(0, 229, 229, 0.05) 50%, transparent 70%);
  animation: wlShimmer 7s linear infinite;
  pointer-events: none;
}
.wl-analyst-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem;
  position: relative;
  z-index: 1;
  cursor: pointer;
  user-select: none;
}
.wl-analyst-bar .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-bright, #00e5e5);
  box-shadow: 0 0 8px rgba(0, 229, 229, 0.75);
  animation: wlPulse 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}
.wl-analyst-bar.thinking .live-dot {
  animation: wlPulseFast 0.55s ease-in-out infinite;
  background: #7af0f0;
}
@keyframes wlPulseFast {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.wl-analyst-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  flex: 0 0 auto;
}
.wl-analyst-line {
  flex: 1;
  font-size: 0.74rem;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.005em;
}
.wl-analyst-line strong { color: var(--cyan-bright, #00e5e5); font-weight: 600; }
.wl-analyst-caret {
  display: inline-block;
  width: 6px;
  height: 0.85rem;
  vertical-align: -2px;
  margin-left: 1px;
  background: var(--cyan-bright, #00e5e5);
  animation: wlCaretBlink 1s steps(1) infinite;
}
@keyframes wlCaretBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.wl-analyst-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  flex: 0 0 auto;
}
.wl-analyst-toggle {
  font-size: 0.85rem;
  color: var(--white-dim);
  flex: 0 0 auto;
  padding: 0 4px;
  transition: transform 0.2s ease, color 0.15s;
}
.wl-analyst.open .wl-analyst-toggle { transform: rotate(180deg); color: var(--cyan); }

.wl-analyst-detail {
  display: none;
  padding: 0.4rem 0.85rem 0.85rem;
  border-top: 1px solid rgba(0, 200, 200, 0.15);
  position: relative;
  z-index: 1;
}
.wl-analyst.open .wl-analyst-detail { display: block; }
.wl-analyst-detail h5 {
  margin: 0.55rem 0 0.3rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}
.wl-analyst-detail ul {
  margin: 0;
  padding-left: 1rem;
}
.wl-analyst-detail li {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--white-muted);
  margin: 2px 0;
}
.wl-analyst-detail li strong { color: var(--white); font-weight: 600; }

/* ============================================================
   WATCHLIST REDESIGN — wlx- prefix namespace (April 2026)
   Both empty and populated states rendered in DOM with data-state
   toggled by JS. CSS hides the non-active state. Capital Pulse
   integration, live agent strip, deposit picker grid, project
   search, watched rail, scope filters, activity feed cards.
   ============================================================ */

.wlx-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  background: var(--navy-deep);
  border-left: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white);
  overflow: hidden;
  position: relative;
}
body.view-watchlist .wlx-panel { display: flex !important; }
/* 2026-05-07 — cyan gradient top-bar deleted per Clint. The page
   no longer needs the hero-surface signal now that the head + meta
   live in the main column where Vault and Data Rooms put theirs.
   Pseudo-element kept (no content) so any cached selectors don't
   break, but it renders nothing. */
.wlx-panel::before { content: none; }

/* Header: title + state tag + cap pill */
.wlx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--navy);
}
.wlx-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
}
.wlx-state-tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--white-dim);
  text-transform: uppercase;
  margin-left: 12px;
  font-weight: 400;
}
.wlx-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--white-dim);
}
.wlx-cap-pill {
  padding: 5px 12px;
  border: 0.5px solid var(--border-light);
  border-radius: 999px;
  font-size: 11px;
  color: var(--white-muted);
}

/* Live analyst strip: slim bar + expandable detail panel */
.wlx-analyst {
  margin: 16px 20px;
  background: rgba(0, 200, 200, 0.04);
  border: 0.5px solid rgba(0, 200, 200, 0.25);
  border-radius: 6px;
  overflow: hidden;
}
.wlx-analyst-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.wlx-analyst-bar::before {
  content: '';
  position: absolute; left: 0; top: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 229, 0.4), transparent);
  background-size: 200% 100%;
  animation: wlx-shimmer 7s linear infinite;
  opacity: 0.5;
}
@keyframes wlx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.wlx-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan-bright);
  box-shadow: 0 0 8px rgba(0, 229, 229, 0.6);
  animation: wlx-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
/* Match the login screen's lgPulse vocabulary so "live" reads the
   same across surfaces (Puna_Design_Guidelines.md § 7 #6). Drops the
   scale transform — the opacity + glow shift carries the meaning. */
@keyframes wlx-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(0, 229, 229, 0.6); }
  50%      { opacity: 0.3; box-shadow: 0 0 2px rgba(0, 229, 229, 0.2); }
}

.wlx-analyst-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--cyan-bright);
  text-transform: uppercase;
  white-space: nowrap;
}
.wlx-analyst-line {
  flex: 1;
  font-size: 13px;
  color: var(--white);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.wlx-analyst-line strong {
  color: var(--cyan-bright);
  font-weight: 500;
}
.wlx-caret {
  display: inline-block;
  width: 6px;
  height: 1em;
  background: var(--cyan-bright);
  margin-left: 2px;
  vertical-align: -1px;
  animation: wlx-caret-blink 1s steps(1) infinite;
}
@keyframes wlx-caret-blink { 50% { opacity: 0; } }

.wlx-analyst-meta {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--white-dim);
  text-transform: uppercase;
  white-space: nowrap;
}
.wlx-analyst-toggle {
  color: var(--white-dim);
  font-size: 13px;
  transition: transform 0.2s, color 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}
.wlx-analyst.open .wlx-analyst-toggle {
  transform: rotate(180deg);
  color: var(--cyan-bright);
}

.wlx-analyst-detail {
  padding: 14px 18px 16px;
  border-top: 0.5px solid rgba(0, 200, 200, 0.15);
  background: rgba(0, 200, 200, 0.02);
  display: none;
}
.wlx-analyst.open .wlx-analyst-detail { display: block; }

.wlx-agent-eyebrow {
  font-size: 12px;
  color: var(--white-dim);
  margin-bottom: 8px;
}
.wlx-agent-counts {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.wlx-agent-counts > div {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.wlx-agent-counts .n {
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.wlx-agent-counts .lbl {
  font-size: 12px;
  color: var(--white-dim);
}
.wlx-agent-pull {
  font-size: 13px;
  color: var(--white-muted);
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--cyan);
  background: rgba(0, 200, 200, 0.05);
}
.wlx-agent-pull .topread-row {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px;
}
.wlx-agent-pull .topread {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--cyan-bright);
  text-transform: uppercase;
  font-weight: 700;
}
.wlx-agent-pull .topread-scope {
  font-size: 10px;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wlx-agent-pull .topread-scope::before { content: '· '; opacity: 0.6; }
.wlx-agent-pull .topread-head {
  font-size: 13px;
  font-weight: 650;
  color: var(--white);
  margin-bottom: 6px;
  line-height: 1.4;
}
.wlx-agent-pull .topread-body {
  color: var(--white-muted);
}
.wlx-agent-input {
  display: flex;
  gap: 8px;
}
.wlx-agent-input input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  height: 34px;
  font-family: inherit;
}
.wlx-agent-input input:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(255, 255, 255, 0.06);
}
.wlx-agent-input input::placeholder { color: var(--white-dim); }
.wlx-agent-input button {
  background: var(--cyan);
  color: var(--navy-deep);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.wlx-agent-input button:hover {
  background: var(--cyan-bright);
}

/* ---------- Ask-the-Agent Q&A card ---------- */
.wlx-qa-card {
  margin-top: 12px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
  animation: wlx-qa-fade-in 0.18s ease-out;
}
@keyframes wlx-qa-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Question echoed at the top */
.wlx-qa-question {
  padding: 10px 14px 10px 14px;
  border-bottom: 0.5px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
}
.wlx-qa-q-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--white-dim);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.wlx-qa-q-text {
  font-size: 13px;
  color: var(--white);
  font-weight: 500;
  line-height: 1.4;
}

/* Answer block */
.wlx-qa-answer {
  padding: 12px 14px 12px 14px;
  border-left: 2px solid var(--cyan);
}
.wlx-qa-a-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan-bright);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.wlx-qa-a-text {
  font-size: 12.5px;
  color: var(--white);
  line-height: 1.55;
}
.wlx-qa-a-text p {
  margin: 0 0 8px 0;
}
.wlx-qa-a-text p:last-child { margin-bottom: 0; }
.wlx-qa-a-text.wlx-qa-error {
  color: var(--white-muted);
  font-style: italic;
}

/* Inline citation */
.wlx-qa-cite {
  color: var(--cyan-bright);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.wlx-qa-cite:hover { text-decoration: underline; }

/* "Thinking" loader with bouncing dots */
.wlx-qa-thinking {
  font-size: 12.5px;
  color: var(--white-muted);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wlx-qa-dots { display: inline-flex; gap: 3px; margin-left: 4px; }
.wlx-qa-dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  display: inline-block;
  animation: wlx-qa-bounce 1.4s infinite ease-in-out both;
}
.wlx-qa-dots span:nth-child(1) { animation-delay: -0.32s; }
.wlx-qa-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes wlx-qa-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* Sources row — pills below the answer */
.wlx-qa-sources {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.5px dashed var(--border-light);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.wlx-qa-sources-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white-dim);
  text-transform: uppercase;
  margin-right: 4px;
}
.wlx-qa-source-pill {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--cyan-bright);
  background: rgba(0, 200, 200, 0.10);
  border: 0.5px solid rgba(0, 200, 200, 0.25);
  border-radius: 3px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.wlx-qa-source-pill:hover {
  background: rgba(0, 200, 200, 0.20);
  color: var(--white);
}
.wlx-qa-source-pill.is-disabled {
  color: var(--white-dim);
  background: rgba(255,255,255,0.04);
  border-color: var(--border-light);
}

/* "Ask another" reset link */
.wlx-qa-actions {
  margin-top: 10px;
  text-align: right;
}
.wlx-qa-ask-another {
  background: transparent;
  border: 0.5px solid var(--border-light);
  color: var(--white-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.wlx-qa-ask-another:hover {
  border-color: var(--cyan);
  color: var(--cyan-bright);
}

/* ---------- Q&A feedback row ---------- */
.wlx-qa-feedback {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px dashed var(--border-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.wlx-qa-fb-prompt {
  font-size: 11px;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.wlx-qa-fb-btn {
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white-muted);
  font-size: 13px;
  width: 28px; height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.wlx-qa-fb-btn:hover {
  border-color: var(--cyan);
  background: rgba(0,200,200,0.10);
}
.wlx-qa-fb-btn[data-rating="up"]:hover { color: var(--cyan-bright); }
.wlx-qa-fb-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.wlx-qa-fb-correction {
  flex-basis: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(0,200,200,0.04);
  border-left: 2px solid var(--cyan);
  border-radius: 0 3px 3px 0;
}
.wlx-qa-fb-tag-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.wlx-qa-fb-tag-lbl {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  font-weight: 600;
}
.wlx-qa-fb-tag {
  background: rgba(255,255,255,0.06);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: inherit;
}
.wlx-qa-fb-text {
  width: 100%;
  min-height: 56px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.4;
  resize: vertical;
}
.wlx-qa-fb-text:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(255,255,255,0.06);
}
.wlx-qa-fb-correction-actions {
  margin-top: 6px;
  display: flex; gap: 6px; justify-content: flex-end;
}
.wlx-qa-fb-submit {
  background: var(--cyan);
  color: var(--navy-deep);
  border: none;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.wlx-qa-fb-submit:hover { background: var(--cyan-bright); }
.wlx-qa-fb-cancel {
  background: transparent;
  border: 0.5px solid var(--border-light);
  color: var(--white-muted);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.wlx-qa-fb-confirm {
  font-size: 11.5px;
  color: var(--cyan-bright);
  font-style: italic;
}

/* Mode and state: pickers vs rail, empty vs populated */
.wlx-panel { --wlx-mode: expanded; }
.wlx-panel[data-mode="expanded"] { --wlx-mode: expanded; }
.wlx-panel[data-mode="compact"] { --wlx-mode: compact; }

.wlx-panel[data-state="empty"] { --show-empty: 1; --show-populated: 0; }
.wlx-panel[data-state="populated"] { --show-empty: 0; --show-populated: 1; }

/* Mode-driven visibility — populated state shows EITHER the picker (expanded
   mode) OR the rail (compact mode). Empty state always shows the picker
   (data-state empty implies the populated section is hidden anyway). */
/* 2026-05-06 — slot-first picker: slot rows in .wlx-pickers are
   ALWAYS visible. Compact mode hides only the picker body
   (.wlx-pick-body) so the user keeps state-at-a-glance via slots. */
.wlx-panel[data-mode="compact"]  .wlx-pickers .wlx-pick-body { display: none; }
.wlx-panel[data-mode="compact"]  .wlx-rail    { display: none; }
.wlx-panel[data-mode="expanded"] .wlx-pickers .wlx-pick-body { display: block; }
.wlx-panel[data-mode="expanded"] .wlx-rail    { display: none; }

.wlx-pickers { display: flex; }
.wlx-panel[data-mode="expanded"] .wlx-pickers { display: flex; }
.wlx-panel[data-mode="compact"]  .wlx-pickers { display: flex; }

/* (Stale rules consolidated below — .wlx-rail visibility is handled by
   the data-mode rules; .wlx-analyst margin/order is handled by the
   feed-col-scoped rule below.) */

/* Split visibility */
/* Split layout is always shown — both empty and populated. The mode
   attribute (compact/expanded) drives which left-pane component is
   visible. The right column always renders feed cards or the empty
   "Your feed will appear here" pane. */
.wlx-split { display: grid; }
.wlx-content-section { display: flex; }

/* Pickers (expanded left-pane mode).

   Cyan-tinted treatment matches the subscribe card's visual language so
   the two stack-as-a-pair on the left. overflow: hidden prevents any
   long deposit/project name from poking out horizontally into the
   adjacent feed column. */
/* 2026-05-07 — picker outer box dropped to match the rail vocabulary
   established by Vault and Data Rooms (sections sit flat on the rail
   background, no outer chrome). The cyan tint + 10px-radius border
   was unique to this surface and read as a bolt-on next to .drx-coach
   etc. Slot rows + search + list now flow naturally. */
.wlx-pickers {
  display: flex;
  flex-direction: column;
  align-self: start;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}
.wlx-pickers > .wlx-footer-pin { margin-top: 14px; }
.wlx-pickers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.wlx-pickers-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}
.wlx-mode-toggle {
  padding: 5px 12px;
  border: 0.5px solid var(--border-light);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--white-muted);
  cursor: pointer;
  background: transparent;
}
.wlx-mode-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan-bright);
}

.wlx-pick-h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 12px;
  padding: 0 20px;
}
.wlx-pick-section {
  margin-bottom: 18px;
}
.wlx-pick-section:last-child {
  margin-bottom: 0;
}
.wlx-pick-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wlx-pick-section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}
.wlx-pick-section-meta {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--white-dim);
  text-transform: uppercase;
}
.wlx-pick-section-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--white-dim);
  text-transform: uppercase;
  margin: 16px 20px 8px;
  font-weight: 500;
}
.wlx-pick-section-eyebrow .count {
  font-weight: 400;
}

.wlx-pick-deposits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 6px;
  padding: 0 20px;
}
.wlx-pick-deposit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.wlx-pick-deposit:hover {
  background: rgba(0, 200, 200, 0.05);
  border-color: rgba(0, 200, 200, 0.25);
}
.wlx-pick-deposit-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 2px;
}
.wlx-pick-deposit-meta {
  font-size: 11px;
  color: var(--white-dim);
}
.wlx-pick-star {
  font-size: 18px;
  color: var(--white-dim);
  padding-left: 10px;
  cursor: pointer;
  transition: color 0.15s;
}
.wlx-pick-deposit:hover .wlx-pick-star {
  color: var(--cyan-bright);
}

.wlx-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 0.5px solid var(--border);
}
.wlx-search {
  /* Tightened 2026-05-06 — height 38 → 32, padding trimmed, icon
     position recalibrated. Picker is the dense home for the user
     so its primary input doesn't need to be as tall as a hero
     search bar. */
  flex: 1 1 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.04);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 12px 12px;
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 7px 12px 7px 30px;
  border-radius: 6px;
  font-size: 12.5px;
  height: 32px;
  font-family: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wlx-search:hover {
  border-color: rgba(255, 255, 255, 0.25);
}
.wlx-search:focus {
  outline: none;
  border-color: var(--cyan);
  background-color: rgba(0, 200, 200, 0.04);
}
.wlx-search::placeholder { color: var(--white-dim); }
.wlx-chip {
  padding: 3px 9px;
  border: 0.5px solid var(--border-light);
  border-radius: 999px;
  font-size: 11px;
  color: var(--white-dim);
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
}
.wlx-chip.active {
  background: rgba(0, 200, 200, 0.08);
  border-color: rgba(0, 200, 200, 0.4);
  color: var(--cyan-bright);
  font-weight: 500;
}
.wlx-chip-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.wlx-sort {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 11.5px;
  color: var(--white-dim);
}
.wlx-sort select {
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 11.5px;
  height: 28px;
  font-family: inherit;
}

.wlx-scroll {
  /* Each list (deposits / projects) is bounded so the panel doesn't feel
     dominated by a single scrolling slab. Two passes of "~2cm shorter":
     360px → 285px → 210px. At 210px each list shows ~4 rows above the
     fold, which is enough to recognise the names without scrolling and
     keeps the projects section visible without scrolling past the
     deposits section. */
  max-height: 210px;
  overflow-y: auto;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
}
.wlx-scroll::-webkit-scrollbar { width: 6px; }
.wlx-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 6px; }
.wlx-scroll::-webkit-scrollbar-track { background: transparent; }

.wlx-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
}
.wlx-row:last-child { border-bottom: 0; }
.wlx-row:hover { background: rgba(0, 200, 200, 0.04); }
.wlx-row-star {
  font-size: 16px;
  color: var(--white-dim);
  width: 16px;
  flex: 0 0 auto;
}
.wlx-row-star.on { color: var(--cyan-bright); }
.wlx-row:hover .wlx-row-star { color: var(--cyan-bright); }
.wlx-row-main {
  flex: 1 1 auto;
  min-width: 0;
}
.wlx-row-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wlx-row-meta {
  font-size: 11px;
  color: var(--white-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wlx-row-side {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  align-items: center;
}
.wlx-row-stage {
  font-size: 11px;
  color: var(--cyan-bright);
  padding: 2px 8px;
  border: 0.5px solid rgba(0, 200, 200, 0.3);
  border-radius: 999px;
  white-space: nowrap;
}
.wlx-row-stage.s-prod { color: #97c459; border-color: rgba(151, 196, 89, 0.4); }
.wlx-row-stage.s-cons { color: #fac775; border-color: rgba(250, 199, 117, 0.4); }
.wlx-row-stage.s-fs   { color: #00e5e5; border-color: rgba(0, 229, 229, 0.4); }
.wlx-row-stage.s-pfs  { color: #ced9e3; border-color: rgba(206, 217, 227, 0.4); }
.wlx-row-stage.s-pea  { color: #94a3b8; border-color: rgba(148, 163, 184, 0.4); }
.wlx-row-stage.s-grn  { color: #94a3b8; border-color: rgba(148, 163, 184, 0.25); }
.wlx-row-size {
  font-size: 11px;
  color: var(--white-dim);
  min-width: 64px;
  text-align: right;
}
.wlx-row-size strong { color: var(--white); font-weight: 500; }
.wlx-row-count {
  font-size: 11px;
  color: var(--white-dim);
  min-width: 56px;
  text-align: right;
}

.wlx-pick-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  height: 34px;
  font-family: inherit;
  margin: 8px 20px;
}
.wlx-pick-search:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(255, 255, 255, 0.06);
}
.wlx-pick-search::placeholder { color: var(--white-dim); }

.wlx-pick-projects {
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 20px 20px;
  max-height: 400px;
  overflow-y: auto;
}
.wlx-pick-project-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.wlx-pick-project-row:last-child { border-bottom: 0; }
.wlx-pick-project-row:hover { background: rgba(0, 200, 200, 0.04); }
.wlx-pick-project-star {
  font-size: 14px;
  color: var(--white-dim);
  width: 16px;
  flex: 0 0 auto;
  cursor: pointer;
  transition: color 0.15s;
}
.wlx-pick-project-row:hover .wlx-pick-project-star {
  color: var(--cyan-bright);
}
.wlx-pick-project-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
  flex: 1;
}
.wlx-pick-project-meta {
  font-size: 11px;
  color: var(--white-dim);
  white-space: nowrap;
}
.wlx-pick-project-stage {
  font-size: 10px;
  color: var(--cyan-bright);
  padding: 2px 7px;
  border: 0.5px solid rgba(0, 200, 200, 0.25);
  border-radius: 999px;
  margin-left: 8px;
  white-space: nowrap;
}

/* Split layout — flexbox with a fixed left column. Replaced the previous
   CSS Grid + minmax approach because grid items default to min-width:
   auto (= min-content), which let the picker's intrinsic content width
   push past the column max and overflow into the feed. With a fixed-
   pixel flex basis on the left and flex: 1 + min-width: 0 on the
   right, neither column can push the other — the picker is physically
   bounded by its 400px container regardless of what's inside. */
.wlx-split {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  /* 2026-05-07 — padding aligned to .drx-main (22px 28px 60px) so
     Watchlist title sits at the same x/y as Vault and Data Rooms.
     Was 8px 32px 36px which produced a noticeable jump between
     pages. */
  padding: 22px 28px 60px;
  flex: 1;
  min-width: 0;
}
.wlx-split.compact,
.wlx-split.expanded {
  /* Mode classes still exist for the data-mode-driven content swap
     (rail vs picker visibility), but they no longer change layout. */
}

/* Left column is a single sticky stack: watchlist box (rail/picker) on
   top, weekly-digest subscribe card directly below. The whole stack is
   sticky at top:8px so it stays inline with the Puna Analyst (also
   sticky at top:8px) on the right.

   In expanded mode the picker can be taller than the viewport; setting
   max-height + overflow-y on the stack lets the whole left column
   scroll internally rather than the watchlist box scrolling off the
   page entirely. The deposits / projects internal lists keep their own
   scroll bounds (.wlx-scroll, max-height 210px), so nested scrolling
   only kicks in when the picker truly exceeds available height. */
/* Left column — fixed 400px width via flex-basis. flex: 0 0 400px means
   no grow, no shrink, exactly 400px. The picker (or rail) inside is
   width-bounded by this column; nothing it contains can push it wider.

   No max-height / no overflow-y here — the stack is as tall as its
   content needs to be. CSS sticky pins it at top:8 while the bottom
   of the stack is still above viewport bottom; once the user scrolls
   far enough that the stack's bottom would clear viewport bottom, the
   stack scrolls naturally with the page. This means the picker is
   never visually truncated by an arbitrary max-height. */
.wlx-split > .wlx-left-stack {
  flex: 0 0 400px;
  align-self: flex-start;
  position: sticky;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Right column — takes all remaining horizontal space. flex: 1 1 0 +
   min-width: 0 ensures the feed column shrinks/grows independently of
   the left column and never gets pushed by intrinsic content sizing. */
.wlx-split > .wlx-feed-col {
  flex: 1 1 0;
  min-width: 0;
}

/* Inside the left stack, every direct child is width: 100% and
   box-sized so the box bounds match the column. Belt-and-braces against
   the flex-item min-width: auto default. */
.wlx-left-stack > .wlx-pickers,
.wlx-left-stack > .wlx-rail,
.wlx-left-stack > .wlx-subscribe-card {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.wlx-pickers > .wlx-pick-section,
.wlx-pickers .wlx-filterbar,
.wlx-pickers .wlx-chip-row,
.wlx-pickers .wlx-scroll,
.wlx-pickers .wlx-selected-pills {
  min-width: 0;
  max-width: 100%;
}

/* Rail (compact left-pane mode).

   Sticky positioning was REMOVED 2026-04-27 — when the rail was sticky
   at top:8px, the Subscribe card (in row 2 of the grid) would scroll up
   underneath it, which read as "subscribe is sliding behind the picker".
   Now the rail and the subscribe card both flow with the page, so they
   move as a stack and never overlap. The Puna Analyst on the right is
   still sticky, so the user always has the synthesis line in view; the
   rail content just scrolls naturally beneath it. */
.wlx-rail {
  /* Same cyan-tinted treatment as .wlx-pickers — the rail is the
     compact-mode skin of the same "Create Your Watchlist" surface, so
     they share the visual language. overflow-x only so vertical content
     can grow naturally; width 100% + box-sizing keep the rail bounded
     to the 400px left column. */
  background: rgba(0, 200, 200, 0.05);
  border: 0.5px solid rgba(0, 200, 200, 0.32);
  border-radius: 10px;
  padding: 14px 16px;
  align-self: start;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}
.wlx-rail .wlx-footer-pin {
  margin-top: auto;
}

/* Mode-toggle buttons removed in favour of hover-driven mode switching.
   Kept in the DOM for other JS hooks but visually suppressed. */
.wlx-mode-toggle,
#wlx-mode-expand { display: none !important; }

/* Scope filter pills — restored 2026-05-07 as part of the Watchlist
   feed toolbar redesign. Were hidden when the analyst strip was the
   only header; now they sit beneath the new .wlx-feed-head + search
   row. Real styling lives in the .wlx-scope-filters block lower in
   this file (mirrors .drx-chips). The retired-hide rule that lived
   here was a textbook stale-rule (playbook #N+5). */

/* Analyst strip is pervasive — sticky at the top of the feed column.
   `top: 8px` matches the wlx-split padding-top exactly so the analyst
   sits at the same Y whether the user has scrolled or not (constant gap
   below the topbar, no jump on scroll).

   The first box-shadow (`0 -8px 0 0 navy-deep`) is a hard solid-color
   shadow EXTENDING UPWARD from the analyst's top edge by exactly the
   gap height (8px). Because outset box-shadows inherit the element's
   z-index (3), this shield sits ABOVE feed cards (z-index 0) — so cards
   scrolling up into the gap region between the topbar and the analyst
   are fully occluded instead of bleeding through.

   The second box-shadow is the existing soft drop below the bar so
   feed cards "land" cleanly against the bar's bottom edge. */
.wlx-feed-col .wlx-analyst {
  position: sticky;
  top: 8px;
  z-index: 3;
  width: 100%;
  display: block;
  align-self: stretch;
  margin: 0 0 12px 0;
  background: var(--navy-deep);
  border: 0.5px solid rgba(0, 200, 200, 0.30);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 -8px 0 0 var(--navy-deep),
    0 6px 12px -4px rgba(6, 15, 29, 0.7);
}
/* Solid background on the bar so the typewriter line is readable over
   anything that could otherwise show through. */
.wlx-feed-col .wlx-analyst .wlx-analyst-bar {
  background: var(--navy-deep);
}
.wlx-feed-col .wlx-analyst .wlx-analyst-detail {
  background: rgba(0, 200, 200, 0.04);
}
/* Feed column lays out as a flex column so the sticky analyst on top and
   the scrolling feed below stay clean. align-self: start so it begins at
   the same Y as the rail (otherwise stretch could push it differently). */
.wlx-feed-col {
  align-self: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Picker rows — selected items get clear visual treatment so the user can
   see at a glance which deposits/projects they've already added. */
.wlx-row.selected {
  background: rgba(0, 200, 200, 0.07);
  border-left: 2px solid var(--cyan);
  padding-left: 12px;
}
.wlx-row.selected .wlx-row-star {
  color: var(--cyan-bright);
}
.wlx-row.selected .wlx-row-name {
  color: var(--cyan-bright);
}

/* Cap-reached — when the user has hit 3 deposits / 5 projects, every
   non-selected row is dimmed and shows red feedback on hover so it's
   obvious the limit is reached. The toggle function still no-ops on cap;
   this is just visual. */
.wlx-row.cap-reached {
  opacity: 0.45;
  cursor: not-allowed;
}
.wlx-row.cap-reached:hover {
  opacity: 0.75;
  background: rgba(231, 76, 60, 0.08);
  border-left: 2px solid #e74c3c;
  padding-left: 12px;
}
.wlx-row.cap-reached:hover .wlx-row-star,
.wlx-row.cap-reached:hover .wlx-row-name {
  color: #ff8a8a;
}

/* Selected-pills row at the top of each picker section — small chips for
   each watched item with × to remove. Always visible while the picker is
   open so the user knows what they've already added. */
.wlx-selected-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px 0;
  min-height: 0;
}
.wlx-selected-pills:empty { display: none; }
.wlx-selected-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 200, 200, 0.12);
  color: var(--cyan-bright);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.wlx-selected-pill .x {
  cursor: pointer;
  opacity: 0.55;
  font-size: 13px;
  line-height: 1;
}
.wlx-selected-pill .x:hover { opacity: 1; }

/* ============================================================
   Watchlist slot-first picker (2026-05-06)
   The cap (3 deposits + 5 projects free; unlimited paid) is the
   visible state. Two horizontally-scrollable slot rows at the
   top of #wlx-pickers; filled tiles show the watched item with
   × to remove, empty tiles invite filling. Click an empty slot
   to scope the picker list below to that type. Slot rows scroll
   horizontally so the design accommodates the future paid case
   where users follow more than the free-tier 3/5.
   ============================================================ */

.wlx-cap-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--white-dim);
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.wlx-cap-pill strong { color: var(--cyan-bright); font-weight: 600; }
.wlx-cap-pill.is-full strong { color: var(--warm); }

.wlx-slot-section { margin-bottom: 6px; }
.wlx-slot-section-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 3px;
}
.wlx-slot-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.wlx-slot-label .num { color: var(--white); font-weight: 600; }
.wlx-slot-arrows { display: inline-flex; gap: 2px; }
.wlx-slot-arrow {
  background: transparent;
  border: 0.5px solid var(--border-light);
  color: var(--white-dim);
  width: 22px; height: 22px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.wlx-slot-arrow:hover {
  color: var(--cyan); border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.06);
}
.wlx-slot-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.wlx-slot-arrow:disabled:hover { color: var(--white-dim); border-color: var(--border-light); background: transparent; }

.wlx-slot-row {
  display: flex; gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
  padding: 1px 1px 2px;  /* room for focus ring + scrollbar */
}
.wlx-slot-row::-webkit-scrollbar { height: 4px; }
.wlx-slot-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }
.wlx-slot-row::-webkit-scrollbar-track { background: transparent; }

.wlx-slot {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 5px 20px 5px 8px;  /* right padding leaves room for × */
  position: relative;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.wlx-slot-row.deposits .wlx-slot { width: 106px; }
.wlx-slot-row.projects .wlx-slot { width: 78px; min-height: 36px; padding: 4px 16px 4px 6px; }

.wlx-slot.is-filled { border-color: rgba(0, 200, 200, 0.45); background: rgba(0, 200, 200, 0.05); }
.wlx-slot.is-filled:hover { border-color: var(--cyan); background: rgba(0, 200, 200, 0.10); }
.wlx-slot.is-empty {
  background: transparent;
  border: 1px dashed rgba(0, 200, 200, 0.32);
  color: var(--white-dim);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  align-items: center; justify-content: center;
  padding: 7px 9px;
  gap: 1px;
}
.wlx-slot.is-empty:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 200, 200, 0.04); }
.wlx-slot.is-empty .plus { font-size: 1rem; line-height: 1; color: var(--cyan); }
.wlx-slot-row.projects .wlx-slot.is-empty { font-size: 0; }
.wlx-slot-row.projects .wlx-slot.is-empty .plus { font-size: 0.95rem; }

.wlx-slot.is-active {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 1px rgba(0, 200, 200, 0.32);
  background: rgba(0, 200, 200, 0.10) !important;
}

.wlx-slot-name {
  font-size: 0.72rem;
  color: var(--white);
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wlx-slot-row.projects .wlx-slot-name { font-size: 0.62rem; }
.wlx-slot-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  color: var(--white-dim);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.04em;
}
.wlx-slot-row.projects .wlx-slot-meta { font-size: 0.45rem; }
.wlx-slot-x {
  position: absolute;
  top: 3px; right: 4px;
  width: 14px; height: 14px;
  text-align: center; line-height: 13px;
  font-size: 0.7rem;
  color: var(--white-dim);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.wlx-slot-x:hover { color: var(--warm); background: rgba(232, 168, 56, 0.12); }
.wlx-slot.is-faded { opacity: 0.55; }

.wlx-pick-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 8px -16px 10px;
}

.wlx-target-banner {
  background: rgba(0, 200, 200, 0.08);
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-radius: 4px;
  padding: 7px 10px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.74rem;
  color: var(--cyan-bright);
  margin-bottom: 8px;
}
.wlx-target-banner[hidden] { display: none; }
.wlx-target-banner .clear {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: var(--white-dim);
  cursor: pointer;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.wlx-target-banner .clear:hover { color: var(--warm); }

/* Type pill on unified picker rows — small Deposit/Project tag */
.wlx-row-type {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wlx-row-type.t-deposit { background: rgba(0, 200, 200, 0.10); color: var(--cyan); }
.wlx-row-type.t-project { background: rgba(232, 168, 56, 0.10); color: var(--warm); }

/* Pinned-watching divider inside the unified list */
.wlx-pick-pin-divider {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0, 200, 200, 0.06);
  padding: 5px 14px;
  border-bottom: 1px solid rgba(0, 200, 200, 0.16);
}

/* Cap-reached row treatment in the unified list */
.wlx-row.is-blocked { opacity: 0.45; cursor: not-allowed; }
.wlx-row.is-blocked:hover { background: transparent; }

/* Compact mode hides the picker body but keeps slot rows visible */
.wlx-pickers > .wlx-pick-body[hidden] { display: none; }

/* 2026-05-06 — picker-header deleted. First child of .wlx-pickers is
   now the deposit slot section; reset its top spacing so the slot row
   sits flush to the picker padding (no double-gap). Tightening pass
   2026-05-06 — also negative-margin into the inset card padding so
   the deposit slot row reads tight against the cyan border. */
.wlx-pickers > .wlx-slot-section:first-child { margin-top: -2px; }

/* Upgrade slot tile — appended at the end of each slot row. Visually
   distinct from the regular empty tiles (warm-orange dashed border)
   so the cap and the upsell are read together. Replaces the deleted
   "Free tier · X deposits · Y projects" pill with an in-flow CTA. */
.wlx-slot.is-upgrade {
  background: transparent;
  border: 1px dashed rgba(232, 168, 56, 0.45);
  color: var(--warm);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  gap: 1px;
}
.wlx-slot.is-upgrade:hover {
  border-color: var(--warm);
  background: rgba(232, 168, 56, 0.06);
  color: var(--warm);
}
.wlx-slot.is-upgrade .plus { font-size: 1rem; line-height: 1; color: var(--warm); }
.wlx-slot-row.projects .wlx-slot.is-upgrade { font-size: 0; }
.wlx-slot-row.projects .wlx-slot.is-upgrade .plus { font-size: 0.95rem; }

/* Slightly more breathing room above the search input now that the
   slot rows are the picker's first content element. */
.wlx-pick-divider { margin: 8px -13px 8px; }

.wlx-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.wlx-rail-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}
.wlx-rail-mode {
  padding: 4px 10px;
  border: 0.5px solid var(--border-light);
  border-radius: 999px;
  font-size: 11px;
  color: var(--white-muted);
  cursor: pointer;
  background: transparent;
}
.wlx-rail-mode:hover {
  border-color: var(--cyan);
  color: var(--cyan-bright);
}
.wlx-rail-section-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--white-dim);
  text-transform: uppercase;
  margin: 12px 0 8px;
}
.wlx-rail-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 10px;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--white-muted);
  border-bottom: 0.5px solid var(--border);
}
.wlx-rail-row:last-of-type { border-bottom: 0; }
.wlx-rail-row .name {
  color: var(--white);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wlx-rail-row .meta {
  color: var(--white-dim);
  font-size: 11px;
  white-space: nowrap;
}
.wlx-rail-row .x {
  color: var(--white-dim);
  font-size: 14px;
  cursor: pointer;
  padding-left: 4px;
  line-height: 1;
}
.wlx-rail-row .x:hover { color: var(--cyan-bright); }
.wlx-rail-empty {
  font-size: 11.5px;
  color: var(--white-dim);
  font-style: italic;
  padding: 6px 0 10px;
  line-height: 1.5;
}
.wlx-rail-add {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 10px;
  background: transparent;
  border: 0.5px dashed var(--border-light);
  border-radius: 6px;
  color: var(--white-dim);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.wlx-rail-add:hover {
  border-color: var(--cyan);
  color: var(--cyan-bright);
}
.wlx-rail-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--border);
  font-size: 11px;
  color: var(--white-dim);
}

.wlx-watching-rail {
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  height: fit-content;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 200px);
}
.wlx-watching-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.wlx-watching-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}
.wlx-watching-meta {
  font-size: 11px;
  color: var(--white-dim);
}

.wlx-watching-section-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--white-dim);
  text-transform: uppercase;
  margin: 10px 0 8px;
  font-weight: 500;
}
.wlx-watching-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  color: var(--white-muted);
  border-bottom: 0.5px solid var(--border);
}
.wlx-watching-row:last-child { border-bottom: 0; }
.wlx-watching-row .name {
  color: var(--white);
  font-weight: 500;
  flex: 1;
}
.wlx-watching-row .x {
  color: var(--white-dim);
  font-size: 13px;
  cursor: pointer;
  padding-left: 8px;
  transition: color 0.15s;
}
.wlx-watching-row .x:hover { color: var(--cyan-bright); }

.wlx-watching-add {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 10px;
  background: transparent;
  border: 0.5px dashed var(--border-light);
  border-radius: 4px;
  color: var(--white-dim);
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.wlx-watching-add:hover {
  border-color: var(--cyan);
  color: var(--cyan-bright);
}

.wlx-watching-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
  font-size: 11px;
  color: var(--white-dim);
}
.wlx-watching-foot a {
  color: var(--white-muted);
  text-decoration: none;
  border-bottom: 0.5px solid transparent;
  transition: all 0.15s;
}
.wlx-watching-foot a:hover {
  color: var(--cyan-bright);
  border-bottom-color: var(--cyan);
}

/* (Old duplicate .wlx-feed-col rule removed — the canonical rule is the
   one near .wlx-feed-col .wlx-analyst above. The earlier `overflow: hidden`
   here was breaking the sticky context for the analyst, putting it at the
   wrong Y on populated state.) */

.wlx-feed-empty {
  /* 2026-05-11 (revised) — single-line empty state per Clint. No
     border / no eyebrow / no body copy — just a quiet line of text
     centred in the feed column. */
  padding: 56px 24px;
  text-align: center;
  color: var(--white-muted);
  background: transparent;
  border: 0;
  margin: 0;
}
.wlx-feed-empty-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--white-muted);
  letter-spacing: 0.01em;
}
/* Legacy structural classes retained for any cached page that still
   renders the longer template — keep them invisible so the cached
   page doesn't double-bleed. */
.wlx-feed-empty-eyebrow,
.wlx-feed-empty-body { display: none; }
.wlx-feed-empty strong {
  color: var(--white-muted);
  font-weight: 500;
  display: block;
}

/* 2026-05-07 — Watchlist feed head + toolbar primitives. Mirrors the
   Data Rooms / Vault language: title left + meta right, magnifier
   search row, pill chip row. Sits below the analyst bar inside
   .wlx-feed-col so the analyst stays primary. */
.wlx-feed-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  /* 2026-05-11 — was align-items: baseline. Tabs + Generate report
     now live on the right side; baseline alignment misaligned the
     pills against the title. center keeps everything visually flush. */
  margin: 0 0 14px;
}
.wlx-feed-head-l {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.wlx-feed-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0;
}
.wlx-feed-head-r {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.wlx-feed-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
  white-space: nowrap;
}
.wlx-feed-meta:empty { display: none; }
.wlx-feed-toolbar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px;
}

/* ----------------------------------------------------------------------
   Recent-events ticker + source-detail modal CSS - EXTRACTED (BL-156,
   2026-06-14) to the shared component /shared/pulse-ticker/widget.css
   (byte-identical to website/_components/pulse-ticker/widget.css), loaded
   via the <link> in <head>. .wlx-ticker* + .wlx-ticker-modal* live there now.
   ---------------------------------------------------------------------- */
.wlx-feed-search {
  flex: 1;
  background: rgba(8, 18, 33, 0.94);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 14px 14px;
  border: 1px solid var(--border-light);
  color: var(--white);
  font-family: inherit;
  font-size: 0.92rem;
  padding: 10px 16px 10px 38px;
  border-radius: 6px; outline: none;
  height: 40px;
  transition: border-color 0.15s, background-color 0.15s;
}
.wlx-feed-search:hover { border-color: rgba(255, 255, 255, 0.20); }
.wlx-feed-search:focus {
  border-color: var(--cyan);
  background-color: rgba(0, 200, 200, 0.04);
  box-shadow: 0 0 0 1px rgba(0, 200, 200, 0.18);
}
.wlx-feed-search::placeholder { color: var(--white-dim); }

/* Scope filters — restyled 2026-05-07 to match .drx-chips / .vault-chips
   shape. Sits below the search row. The .wlx-scope-pill class keeps the
   id mapping intact for the existing wlxSetScopeFilter() handler. */
.wlx-scope-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.wlx-scope-filters.dimmed {
  opacity: 0.45;
  pointer-events: none;
}
.wlx-scope-pill {
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  color: var(--white-muted);
  font-family: inherit;
  font-size: 0.74rem;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
}
.wlx-scope-pill:hover { background: rgba(0, 200, 200, 0.04); border-color: rgba(0, 200, 200, 0.35); color: var(--white); }
.wlx-scope-pill.active { background: rgba(0, 200, 200, 0.14); border-color: var(--cyan); color: var(--cyan-bright); }

.wlx-feed-card {
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 8px;
  transition: all 0.15s;
  /* 2026-05-11 — feed cards are clickable now: opens the event-detail
     modal via the #wlx-feed delegated handler. Links / buttons /
     summary inside the card keep their own behaviour. */
  cursor: pointer;
}
.wlx-feed-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(0, 200, 200, 0.32);
}
.wlx-feed-card.specialist {
  /* Tinted card per Puna_Design_Guidelines.md § 5 — Puna AI touched
     this content. 10% cyan tint, 2px cyan left-border. */
  background: rgba(0, 200, 200, 0.10);
  border-color: rgba(0, 200, 200, 0.24);
  border-left: 2px solid var(--cyan);
}

/* ---------------------------------------------------------------------
   Subscriber portal — single-page surface for non-staff subscribers
   (Task 18). Replaces the full app shell when
   body.view-subscriber-portal is set. Per Clint's 2026-05-04 product
   call: external subscribers see ONLY this until the rest of the
   product reaches production-ready form for them.
   --------------------------------------------------------------------- */
#subscriber-portal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--navy-deep);
  color: var(--white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-y: auto;
}
body.view-subscriber-portal #app           { display: none !important; }
body.view-subscriber-portal #login-screen  { display: none !important; }
body.view-subscriber-portal #subscriber-portal { display: flex; flex-direction: column; }
#subscriber-portal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright), var(--cyan));
  z-index: 10;
  pointer-events: none;
}
.sp-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 32px 60px;
  width: 100%;
  flex: 1;
}
.sp-brand {
  margin-bottom: 56px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.005em;
}
.sp-brand .dot { color: var(--cyan); }
.sp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #0d3a4f;
  border-radius: 2px;
  background: #0a2f40;
  padding: 7px 14px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cyan);
  margin-bottom: 18px;
}
.sp-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  display: inline-block;
}
.sp-h {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.sp-sub {
  font-size: 16px;
  color: rgba(205, 214, 228, 0.86);
  line-height: 1.55;
  margin: 0 0 36px;
}
.sp-sub strong { color: var(--white); }
.sp-card {
  background: var(--navy);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 26px 28px;
  margin-bottom: 18px;
  position: relative;
}
.sp-card-h-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.sp-card-h {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}
.sp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.sp-status-pill.active   { background: rgba(78, 203, 113, 0.12); color: var(--green); border: 1px solid rgba(78, 203, 113, 0.30); }
.sp-status-pill.unsubed  { background: rgba(255, 138, 138, 0.10); color: #ff8a8a;     border: 1px solid rgba(255, 138, 138, 0.24); }
.sp-status-pill .pulse {
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  animation: lgPulse 2s ease-in-out infinite;
}
.sp-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
}
.sp-meta-cell .lbl {
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(155, 171, 196, 0.85);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sp-meta-cell .val {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.sp-watch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 200, 200, 0.06);
  border: 1px solid rgba(0, 200, 200, 0.20);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--white);
}
.sp-chip .dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
}
.sp-chip-empty {
  font-size: 13px;
  color: rgba(155, 171, 196, 0.7);
  font-style: italic;
}
.sp-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.sp-btn {
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sp-btn-primary    { background: var(--cyan); color: var(--navy-deep); }
.sp-btn-primary:hover { background: var(--cyan-bright); }
.sp-btn-secondary  { background: transparent; color: rgba(205, 214, 228, 0.86); border: 1px solid rgba(255, 255, 255, 0.18); }
.sp-btn-secondary:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.32); }
.sp-btn-danger     { background: transparent; color: #ff8a8a; border: 1px solid rgba(255, 138, 138, 0.30); }
.sp-btn-danger:hover { color: #ffb0b0; border-color: rgba(255, 138, 138, 0.55); }
.sp-btn:disabled   { opacity: 0.55; cursor: wait; }
.sp-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sp-status-msg {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(155, 171, 196, 0.85);
  min-height: 1.4em;
}
.sp-status-msg.error { color: #ff8a8a; }
.sp-status-msg.ok    { color: var(--cyan-bright); }
.sp-foot {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  font-size: 11px;
  color: var(--white-dim);
  line-height: 1.6;
}
.sp-foot a { color: var(--white-muted); text-decoration: none; font-weight: 600; }
.sp-foot a:hover { color: var(--white); }
.sp-foot .sep { margin: 0 6px; }
.sp-signout-btn {
  background: transparent;
  border: 0;
  color: var(--white-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.sp-signout-btn:hover { color: var(--white); }
@media (max-width: 600px) {
  .sp-shell { padding: 60px 22px 50px; }
  .sp-h { font-size: 26px; }
  .sp-actions { flex-direction: column; }
  .sp-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   WATCHLIST V2 — AI Brief, view toggle, Grid enrichments, Compare,
   Research-agent paywall modal. (2026-05-09)

   Naming: every new class is prefixed `wlx2-` so it never collides
   with the existing `wlx-` namespace. The legacy `wlx-` styles
   stay intact — Grid view still uses `#wlx-state-cards` and Feed
   view still uses `#wlx-feed`, the v2 layer just adds chrome above
   them and the per-card enrichments below.
   ============================================================ */

/* ----------------------------------------------------------------------
   Quarantined-intel review card (Improvements page, 2026-05-11). Surface
   for Clint / CoS to clear the synthesis-quarantine backlog. Re-uses the
   existing .team-card chrome + adds a tight per-row layout. */
.imp-qr-sub {
  font-size: 0.74rem;
  color: var(--white-muted);
  margin-top: 4px;
  max-width: 70ch;
}
.imp-qr-bulk {
  background: rgba(0, 200, 200, 0.14);
  border: 1px solid var(--cyan);
  color: var(--cyan-bright);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.imp-qr-bulk:hover { background: rgba(0, 200, 200, 0.26); color: var(--white); }
.imp-qr-bulk:disabled { opacity: 0.4; cursor: not-allowed; }
.imp-qr-list {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.imp-qr-row {
  background: rgba(0, 200, 200, 0.05);
  border: 0.5px solid rgba(0, 200, 200, 0.20);
  border-left: 2px solid var(--cyan);
  border-radius: 6px;
  padding: 12px 16px;
}
.imp-qr-row.is-acting { opacity: 0.5; pointer-events: none; }
.imp-qr-row.is-done { display: none; }
.imp-qr-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 6px;
}
.imp-qr-meta .imp-qr-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--white-muted);
}
.imp-qr-meta .imp-qr-pill.is-cyan {
  background: rgba(0, 200, 200, 0.10);
  border-color: rgba(0, 200, 200, 0.32);
  color: var(--cyan-bright);
}
.imp-qr-headline {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
  line-height: 1.4;
}
.imp-qr-summary {
  font-size: 12.5px;
  color: var(--white-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}
.imp-qr-implication {
  font-size: 12px;
  color: var(--white);
  line-height: 1.5;
  margin: 8px 0 4px;
  padding: 6px 10px;
  background: rgba(0, 200, 200, 0.05);
  border-left: 2px solid var(--cyan);
  border-radius: 0 4px 4px 0;
}
.imp-qr-excerpt {
  font-size: 11.5px;
  color: var(--white-muted);
  font-style: italic;
  line-height: 1.5;
  margin: 6px 0;
  padding-left: 10px;
  border-left: 2px solid var(--border-light);
}
.imp-qr-actions {
  display: flex; gap: 8px;
  margin-top: 10px;
}
.imp-qr-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.imp-qr-btn-approve {
  background: rgba(0, 200, 200, 0.14);
  border: 1px solid var(--cyan);
  color: var(--cyan-bright);
}
.imp-qr-btn-approve:hover { background: rgba(0, 200, 200, 0.26); color: var(--white); }
.imp-qr-btn-reject {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white-dim);
}
.imp-qr-btn-reject:hover {
  color: rgba(255, 140, 140, 0.85);
  border-color: rgba(255, 140, 140, 0.35);
}

/* 2026-05-10 — All .wlx2-brief* CSS removed. The "Puna Analyst · live
   brief" panel was retired (see HTML comment in #wlx2-body-grid block);
   the canonical agent voice for this view now lives in the persistent
   PGA bar at the bottom of the screen via pgaWatchlistRead(). The
   typewriter helpers (_typeBriefSequentially, _wlx2Typewriter) survive
   as dead-code stubs to keep wlx2RenderBrief()'s defensive callers
   working; CSS gone because no DOM consumes it. */

/* Confidence chip — only shown next to claims with low confidence (1–2 dots).
   High-confidence claims ship without a chip — silence is the credibility signal. */
.wlx2-conf {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.05rem 0.5rem;
  border: 0.5px solid rgba(255, 200, 80, 0.32);
  border-radius: 999px;
  background: rgba(255, 200, 80, 0.06);
  color: rgba(255, 200, 80, 0.85);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem; letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* View toggle — Grid (default), Feed, Compare.
   2026-05-11 (revised) — lives in .wlx-tabs-row below the ticker, not in
   the title row. Margin zeroed; the row handles spacing. */
.wlx2-view-toggle {
  display: flex; gap: 0.35rem;
  margin: 0;
  flex-wrap: wrap;
}
/* Tabs row — sits below the ticker, hosts the Feed/Projects/Compare
   pills (left) + Generate report button (right, conditional). */
.wlx-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.wlx2-view-pill {
  display: inline-flex; align-items: center;
  padding: 0.35rem 0.95rem;
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--white-muted, rgba(212, 221, 230, 0.7));
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.74rem; letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.wlx2-view-pill:hover { color: var(--white-soft, #d4dde6); border-color: rgba(255, 255, 255, 0.22); }
.wlx2-view-pill.active {
  background: rgba(0, 229, 229, 0.1);
  border-color: rgba(0, 229, 229, 0.45);
  color: var(--cyan, #00e5e5);
}

/* View bodies — only the active one displays. */
.wlx2-view-body { display: none; }
.wlx2-view-body.active { display: block; }
.wlx2-view-grid.active { display: block; }
.wlx2-view-feed.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wlx2-view-compare.active { display: block; }

/* Project pill row above the state cards. Tab bar across the user's
   watched projects so they can flip between project states. Active pill
   filters the cards to show just one project at a time. Horizontal
   scroll when the pill count overflows the viewport. (2026-05-10) */
.wlx2-state-pills {
  display: flex; flex-wrap: nowrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0.1rem 0.1rem 0.45rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.wlx2-state-pills::-webkit-scrollbar { height: 4px; }
.wlx2-state-pills::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 229, 0.18);
  border-radius: 2px;
}
.wlx2-state-pill {
  flex: 0 0 auto;
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 1px;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--white-muted, rgba(212, 221, 230, 0.72));
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: left;
  max-width: 220px;
}
.wlx2-state-pill:hover {
  background: rgba(0, 200, 200, 0.05);
  border-color: rgba(0, 200, 200, 0.3);
  color: var(--white-soft, #d4dde6);
}
.wlx2-state-pill.active {
  background: rgba(0, 229, 229, 0.1);
  border-color: rgba(0, 229, 229, 0.5);
  color: var(--cyan, #00e5e5);
}
.wlx2-state-pill-name {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
}
.wlx2-state-pill-sub {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(155, 171, 196, 0.6);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wlx2-state-pill.active .wlx2-state-pill-sub { color: rgba(0, 229, 229, 0.65); }

/* Per-card Grid enrichments — fresh CEO quote, NPV uplift Potential
   chip, and the "Assign a research agent" CTA. These are appended
   into each .wlx-state-card by wlx2EnrichStateCards() so the existing
   thesis / watchpoints / peers chrome stays intact. */
.wlx2-card-extras {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 0.5px solid rgba(0, 229, 229, 0.1);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.wlx2-card-quote {
  display: block;
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-style: italic;
  color: var(--white-soft, #d4dde6);
  font-size: 0.86rem; line-height: 1.5;
  padding-left: 0.7rem;
  border-left: 2px solid rgba(0, 229, 229, 0.4);
}
.wlx2-card-attrib {
  display: block; font-style: normal;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: rgba(155, 171, 196, 0.78);
  font-size: 0.74rem;
  margin-top: 0.25rem;
}
.wlx2-card-attrib a { color: rgba(0, 229, 229, 0.78); text-decoration: underline dotted; text-decoration-color: rgba(0, 229, 229, 0.4); }
.wlx2-card-quote-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--cyan, #00e5e5);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
/* NPV uplift Potential chip — same chrome as the for-capital page so
   subscribers who came from the website recognise it instantly. */
.wlx2-card-npv {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: rgba(0, 229, 229, 0.07);
  border: 0.5px solid rgba(0, 229, 229, 0.22);
  border-radius: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.74rem;
}
.wlx2-card-npv-tag { color: var(--cyan, #00e5e5); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; }
.wlx2-card-npv-fig { color: #2dd4bf; font-weight: 500; font-size: 0.84rem; }
.wlx2-card-npv-scen { color: var(--white-soft, #d4dde6); }
.wlx2-card-npv-cite { color: rgba(155, 171, 196, 0.65); font-size: 0.7rem; }

/* Reports & filings — published JORC reports, PEAs, scoping studies,
   capital markets day decks, ASX/TSX disclosures, etc. that touch the
   project. Pulls from activity.json primary_news / cadastre_event with
   verified source_url. Section hides entirely when nothing's indexed
   for the project (silence > broken links). */
.wlx2-card-reports {
  margin-top: 0.2rem;
}
.wlx2-card-reports-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--cyan, #00e5e5);
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.wlx2-card-reports-list {
  list-style: none;
  margin: 0; padding: 0;
}
.wlx2-card-report-item {
  margin-bottom: 0.4rem;
}
.wlx2-card-report-item:last-child { margin-bottom: 0; }
.wlx2-card-report-item a {
  display: block;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-left: 2px solid rgba(0, 229, 229, 0.35);
  border-radius: 5px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.wlx2-card-report-item a:hover {
  background: rgba(0, 229, 229, 0.05);
  border-left-color: var(--cyan, #00e5e5);
  text-decoration: none;
}
.wlx2-card-report-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  margin-bottom: 0.2rem;
}
.wlx2-card-report-cat {
  color: rgba(0, 229, 229, 0.85);
  letter-spacing: 0.06em;
  padding: 1px 6px;
  background: rgba(0, 229, 229, 0.06);
  border: 0.5px solid rgba(0, 229, 229, 0.22);
  border-radius: 999px;
}
.wlx2-card-report-src { color: var(--white-soft, #d4dde6); }
.wlx2-card-report-date { color: rgba(155, 171, 196, 0.6); margin-left: auto; }
.wlx2-card-report-head {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: var(--white, #f0f4f8);
  font-size: 0.82rem;
  line-height: 1.4;
}
/* "Assign a research agent" — clickable CTA, opens paywall popup. */
.wlx2-research-cta {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 1px 0.55rem;
  background: transparent;
  border: 0.5px solid rgba(0, 229, 229, 0.32);
  border-radius: 999px;
  color: rgba(0, 229, 229, 0.85);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem; letter-spacing: 0.04em;
  cursor: pointer;
  animation: wlx2-cta-pulse 1.6s ease-in-out infinite;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.wlx2-research-cta::after { content: '→'; font-size: 0.7rem; line-height: 1; }
.wlx2-research-cta:hover {
  background: rgba(0, 229, 229, 0.12);
  border-color: rgba(0, 229, 229, 0.6);
  color: var(--cyan, #00e5e5);
  animation: none;
}
@keyframes wlx2-cta-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Feed card enrichments — operator chip, triggers row, "from the source"
   evidence-excerpt block. Stitched into legacy wlx-feed-card by
   wlx2EnrichFeedCards() so the depth that the data carries actually
   reaches the user without forking the existing renderer. */
.wlx-pill.wlx2-fc-operator {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--white-soft, #d4dde6);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.wlx2-fc-triggers {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 6px 0 8px;
}
.wlx2-fc-trigger {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  background: rgba(0, 229, 229, 0.06);
  border: 0.5px solid rgba(0, 229, 229, 0.22);
  border-radius: 999px;
  color: rgba(0, 229, 229, 0.85);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  /* Display verbatim what humanizeTrigger() emits — the abbreviations
     (DLE / RIGI / FID / etc.) need to render uppercase. */
}
.wlx2-fc-excerpt {
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
}
.wlx2-fc-excerpt-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6rem; letter-spacing: 0.16em;
  color: rgba(155, 171, 196, 0.6);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.wlx2-fc-excerpt-text {
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-style: italic;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--white-soft, #d4dde6);
}

/* Feed quote cards — fresh executive quotes (within 7 days) prepended
   above the chronological feed. Italic serif body, mono attribution,
   "Read full interview →" link to the source. Distinct chrome from the
   activity-feed cards so they read as an editorial layer. */
.wlx2-feed-quote-card {
  background: rgba(0, 200, 200, 0.04);
  border: 1px solid rgba(0, 229, 229, 0.22);
  border-left: 3px solid var(--cyan, #00e5e5);
  border-radius: 10px;
  padding: 0.85rem 1.1rem 0.95rem;
  margin: 0 0 0.7rem;
  color: var(--white-soft, #d4dde6);
}
.wlx2-feed-quote-eyebrow {
  display: flex; align-items: baseline; gap: 0.55rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.wlx2-feed-quote-eyebrow .wlx2-quote-tag {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--cyan, #00e5e5);
  text-transform: uppercase;
  padding: 1px 7px;
  border: 0.5px solid rgba(0, 229, 229, 0.4);
  border-radius: 999px;
}
.wlx2-feed-quote-eyebrow .wlx2-quote-name {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--white-soft, #d4dde6);
}
.wlx2-feed-quote-eyebrow .wlx2-quote-date {
  margin-left: auto;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem;
  color: rgba(155, 171, 196, 0.62);
}
.wlx2-feed-quote-text {
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-style: italic;
  color: var(--white, #f0f4f8);
  font-size: 1rem; line-height: 1.55;
  margin-bottom: 0.45rem;
}
.wlx2-feed-quote-attrib {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: rgba(155, 171, 196, 0.82);
  font-size: 0.78rem;
  margin-bottom: 0.55rem;
}
.wlx2-feed-quote-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: rgba(0, 229, 229, 0.1);
  border: 0.5px solid rgba(0, 229, 229, 0.4);
  border-radius: 6px;
  color: var(--cyan, #00e5e5);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem; letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
}
.wlx2-feed-quote-link:hover {
  background: rgba(0, 229, 229, 0.18);
  border-color: var(--cyan, #00e5e5);
  text-decoration: none;
}

/* Read / unread feed cards. NEW badge sits in the chip row of legacy
   cards or the eyebrow of injected wlx2 cards. Seen cards fade to 60%
   opacity to signal "you've already read this"; hover restores. */
.wlx2-new-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  background: rgba(0, 229, 229, 0.18);
  border: 0.5px solid rgba(0, 229, 229, 0.55);
  border-radius: 999px;
  color: var(--cyan, #00e5e5);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* 2026-05-10 — Reverted opacity dim per Clint ("the greyed-out feed for
   things you've seen looks a bit naff — revert that to being colors
   like the rest"). The class is still applied by wlx2ApplyReadState()
   so the "NEW" badge logic on unseen cards still works, but seen cards
   now render at full contrast like everything else. The new/seen
   distinction is carried by the NEW badge, not by dimming. */
.wlx2-card-seen {
  opacity: 1;
}

/* Project metadata chip strip on each Project State card — surfaces the
   facts that distinguish projects on the same basin (stage, resource
   Mt LCE, grade, processing, planned production, AISC). Without this
   the cards looked near-identical when neighbours shared the basin. */
.wlx2-card-meta-strip {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.wlx2-card-meta-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--white-soft, #d4dde6);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}
.wlx2-card-meta-chip strong { color: #2dd4bf; font-weight: 500; }
.wlx2-card-meta-chip.wlx2-meta-stage {
  background: rgba(0, 229, 229, 0.08);
  border-color: rgba(0, 229, 229, 0.3);
  color: var(--cyan, #00e5e5);
}

/* NPV announcement feed card — each /data/npv_uplift.json entry IS a
   publication event (DFS / capex / expansion announcement) with a
   verified date and source URL. The chip on Project State cards is
   the "current state" surface; this card is the "when did the
   announcement land" surface. Mono / data-feel chrome to differentiate
   from the editorial italic-serif quote card. */
.wlx2-feed-npv-card {
  background: rgba(0, 200, 200, 0.04);
  border: 1px solid rgba(0, 229, 229, 0.22);
  border-left: 3px solid #2dd4bf;
  border-radius: 10px;
  padding: 0.85rem 1.1rem 0.95rem;
  margin: 0 0 0.7rem;
  color: var(--white-soft, #d4dde6);
}
.wlx2-feed-npv-eyebrow {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.wlx2-feed-npv-tag {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--cyan, #00e5e5);
  text-transform: uppercase;
  padding: 1px 7px;
  border: 0.5px solid rgba(0, 229, 229, 0.4);
  border-radius: 999px;
}
.wlx2-feed-npv-name {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--white-soft, #d4dde6);
}
.wlx2-feed-npv-mag,
.wlx2-feed-npv-conf {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6rem; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
}
.wlx2-feed-npv-mag {
  color: rgba(45, 212, 191, 0.9);
  background: rgba(45, 212, 191, 0.08);
  border: 0.5px solid rgba(45, 212, 191, 0.28);
}
.wlx2-feed-npv-conf {
  color: rgba(155, 171, 196, 0.85);
  background: rgba(255, 255, 255, 0.03);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
}
.wlx2-feed-npv-conf-high {
  color: rgba(45, 212, 191, 0.95);
  border-color: rgba(45, 212, 191, 0.35);
  background: rgba(45, 212, 191, 0.08);
}
.wlx2-feed-npv-conf-low {
  color: rgba(255, 200, 80, 0.9);
  border-color: rgba(255, 200, 80, 0.32);
  background: rgba(255, 200, 80, 0.06);
}
.wlx2-feed-npv-date {
  margin-left: auto;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem;
  color: rgba(155, 171, 196, 0.62);
}
.wlx2-feed-npv-head {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: var(--white, #f0f4f8);
  font-size: 1rem; line-height: 1.45;
  margin-bottom: 0.5rem;
}
.wlx2-feed-npv-figs {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.55rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.86rem;
  margin-bottom: 0.55rem;
}
.wlx2-fnpv-amt   { color: #2dd4bf; font-weight: 500; }
.wlx2-fnpv-capex { color: var(--white-soft, #d4dde6); }
.wlx2-fnpv-time  { color: rgba(155, 171, 196, 0.85); }
.wlx2-feed-npv-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: rgba(0, 229, 229, 0.1);
  border: 0.5px solid rgba(0, 229, 229, 0.4);
  border-radius: 6px;
  color: var(--cyan, #00e5e5);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem; letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
}
.wlx2-feed-npv-link:hover {
  background: rgba(0, 229, 229, 0.18);
  border-color: var(--cyan, #00e5e5);
  text-decoration: none;
}
.wlx2-feed-npv-source-static {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: rgba(155, 171, 196, 0.78);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.7rem;
}

/* NPV chip enrichment on Project State cards — capital, timeframe,
   confidence colors so allocators can read the row without parsing
   the words. */
.puna-flow .wlx2-card-npv-capex,
.wlx2-card-npv-capex { color: var(--white-soft, #d4dde6); }
.wlx2-card-npv-time { color: rgba(155, 171, 196, 0.85); }
.wlx2-card-npv-conf { color: rgba(155, 171, 196, 0.78); text-transform: lowercase; }
.wlx2-card-npv-cite-link {
  color: rgba(155, 171, 196, 0.65);
  text-decoration: underline dotted;
  text-decoration-color: rgba(0, 229, 229, 0.35);
  font-size: 0.7rem;
}
.wlx2-card-npv-cite-link:hover {
  color: var(--cyan, #00e5e5);
  text-decoration: underline;
}

/* Feed footer — explains what the user is looking at when activity.json
   is sparse for their watched scope. Without it, an empty scroll feels
   like a bug instead of a "we're still ingesting" state. */
.wlx2-feed-footer {
  margin: 1.6rem 0.3rem 1rem;
  text-align: center;
}
.wlx2-feed-footer-rule {
  height: 1px;
  background: rgba(0, 229, 229, 0.12);
  margin-bottom: 0.85rem;
}
.wlx2-feed-footer-text {
  color: rgba(155, 171, 196, 0.62);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 auto;
}
.wlx2-feed-footer-text strong { color: var(--cyan, #00e5e5); font-weight: 500; }

/* Compare view — sortable side-by-side table. Each row = one watched
   project; cells highlight the column-max for numeric attributes. Rows
   are clickable — click opens the project page via focusProjectFromDb. */
.wlx2-compare-hint {
  margin: 0 0 0.5rem;
  color: rgba(155, 171, 196, 0.62);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.68rem; letter-spacing: 0.04em;
}
.wlx2-compare-wrap {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 229, 229, 0.16);
  border-radius: 10px;
  padding: 0.7rem 0.4rem;
  overflow-x: auto;
}
.wlx2-compare-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  color: var(--white-soft, #d4dde6);
  min-width: 720px;
}
.wlx2-compare-tbl th {
  padding: 0.55rem 0.6rem;
  text-align: left;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem; letter-spacing: 0.06em;
  color: rgba(0, 229, 229, 0.78);
  text-transform: uppercase;
  border-bottom: 0.5px solid rgba(0, 229, 229, 0.2);
  font-weight: 400;
  cursor: pointer;
  user-select: none;
}
.wlx2-compare-tbl th:hover { color: var(--cyan, #00e5e5); }
.wlx2-compare-tbl th.sorted::after { content: ' ▾'; font-size: 0.7rem; color: var(--cyan, #00e5e5); }
.wlx2-compare-tbl th.sorted.asc::after { content: ' ▴'; }
.wlx2-compare-tbl td {
  padding: 0.55rem 0.6rem;
  border-bottom: 0.5px solid rgba(0, 229, 229, 0.08);
  vertical-align: top;
}
.wlx2-compare-tbl tr:last-child td { border-bottom: 0; }
.wlx2-compare-tbl tbody tr[data-pid] {
  cursor: pointer;
  transition: background 0.15s;
}
.wlx2-compare-tbl tbody tr[data-pid]:hover {
  background: rgba(0, 229, 229, 0.06);
}
.wlx2-compare-tbl tbody tr[data-pid]:hover .wlx2-cmp-name {
  color: var(--cyan-bright, #2dd4bf);
}
.wlx2-compare-tbl tbody tr[data-pid]:focus-visible {
  outline: 1px solid var(--cyan, #00e5e5);
  outline-offset: -1px;
}
.wlx2-compare-tbl .wlx2-cmp-name { color: var(--cyan, #00e5e5); font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.74rem; letter-spacing: 0.04em; }
.wlx2-compare-tbl .wlx2-cmp-salar { color: rgba(212, 221, 230, 0.78); font-size: 0.78rem; }
.wlx2-compare-tbl .wlx2-cmp-max { color: #2dd4bf; font-weight: 500; }
.wlx2-compare-tbl .wlx2-cmp-empty { color: rgba(155, 171, 196, 0.5); }
.wlx2-compare-tbl .wlx2-cmp-tick { color: var(--cyan, #00e5e5); font-weight: 500; }
.wlx2-compare-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--white-muted, rgba(212, 221, 230, 0.6));
  font-size: 0.86rem;
}

/* Research-agent paywall modal — chrome that mirrors the existing
   wlx-paywall-modal pattern but lighter weight (single info card,
   single CTA, dismissible by overlay-click / esc / X). */
.wlx2-modal {
  position: fixed; inset: 0;
  background: rgba(5, 8, 12, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1100;
  padding: 1.5rem;
}
.wlx2-modal.open { display: flex; }
.wlx2-modal-card {
  background: #0c1518;
  border: 1px solid rgba(0, 229, 229, 0.3);
  border-radius: 10px;
  max-width: 540px; width: 100%;
  padding: 1.6rem 1.8rem 1.5rem;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.wlx2-modal-close {
  position: absolute; top: 0.7rem; right: 0.85rem;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  color: var(--white-muted, rgba(212, 221, 230, 0.65));
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.wlx2-modal-close:hover { color: var(--white, #f0f4f8); }
.wlx2-modal-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.68rem; letter-spacing: 0.16em;
  color: var(--cyan, #00e5e5);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.wlx2-modal-card h3 {
  margin: 0 0 0.85rem;
  color: var(--white, #f0f4f8);
  font-size: 1.15rem;
  font-weight: 500;
}
.wlx2-modal-card p {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--white-soft, #d4dde6);
}
.wlx2-modal-card p.wlx2-modal-q {
  margin-top: 1rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--cyan, #00e5e5);
  text-transform: uppercase;
}
.wlx2-modal-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.1rem;
  padding: 0.65rem 1.1rem;
  background: rgba(0, 229, 229, 0.12);
  border: 1px solid rgba(0, 229, 229, 0.5);
  border-radius: 6px;
  color: var(--cyan, #00e5e5);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.78rem; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.wlx2-modal-cta:hover {
  background: rgba(0, 229, 229, 0.2);
  border-color: var(--cyan, #00e5e5);
}

/* Cyan glow on keyboard focus across every watchlist interactive
   element — Puna_Design_Guidelines.md § 7 #8. Mouse clicks don't
   trigger this (focus-visible respects pointer vs keyboard intent),
   so the visual stays clean for mouse users while keyboard
   navigation gets the affordance it deserves. */
.wlx-panel a:focus-visible,
.wlx-panel button:focus-visible,
.wlx-panel input:focus-visible,
.wlx-panel select:focus-visible,
.wlx-panel textarea:focus-visible,
.wl-chip:focus-visible,
.wl-chip-clear:focus-visible,
.wl-search:focus-visible,
.wl-cb:focus-visible,
.wlx-scope-pill:focus-visible,
.wlx-subscribe-btn:focus-visible,
.wlx-feed-card:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
/* 2026-05-07 — feed-card chip row tidied. Was a single flex row with
   evidence + scope + date all competing as same-weight pills. Now:
   evidence pill on the left, date right-aligned as a quiet mono
   stamp, and the scope info moves to its own muted meta line below
   the headline (less visual weight). The scope-color palette is
   collapsed to one muted tone — colour was conveying nothing the
   text didn't already say. */
.wlx-feed-chips {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.wlx-feed-chips-l {
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.wlx-pill {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.wlx-pill-evidence {
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan-bright);
}
/* Scope pills — collapsed to one muted tone since the level
   information already lives in the pill text. Evidence stays cyan
   so the agent-touched signal is preserved. */
.wlx-pill-scope-p,
.wlx-pill-scope-b,
.wlx-pill-scope-c,
.wlx-pill-scope-r {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white-muted);
}
.wlx-pill-source {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white-muted);
  font-weight: 400;
}
.wlx-pill-meta {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white-muted);
  font-weight: 400;
}
.wlx-feed-when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  white-space: nowrap;
  margin-left: auto;
}
.wlx-feed-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.wlx-feed-summary {
  font-size: 12px;
  /* 2026-05-10 — bumped from --white-dim to --white-muted per Clint
     ("the grey text isn't working"). --white-dim at its then-value (a
     dimmer grey, since raised to #8794ad by BL-274) was reading as
     unreadable on --navy-deep; --white-muted (#9babc4) was a ~33%
     contrast lift at that time without going all the way to body-white. */
  color: var(--white-muted);
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Operator logo — Phase C (2026-05-07). 18px square in the chip row
   so the card carries a visual anchor without overpowering the text.
   Border + faint background reads as a "chip" alongside the pills. */
.wlx-feed-logo {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px;
  vertical-align: middle;
  flex-shrink: 0;
  object-fit: contain;
}

/* Expander — Phase A (2026-05-07). Native <details> styled to match
   the wlx feed card chrome. Closed by default; click "Read full
   synthesis" to reveal the rest of the body, "What's not being said",
   and the peer block. */
.wlx-feed-expander {
  margin-top: 6px;
}
.wlx-feed-expander > summary {
  font-size: 11px;
  color: var(--cyan);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  user-select: none;
  letter-spacing: 0.02em;
}
.wlx-feed-expander > summary::-webkit-details-marker { display: none; }
.wlx-feed-expander > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
  margin-right: 2px;
}
.wlx-feed-expander[open] > summary::before { transform: rotate(90deg); }
.wlx-feed-expander > summary:hover { color: var(--cyan-bright); }
.wlx-feed-expand-body {
  margin-top: 4px;
}
.wlx-feed-foot {
  font-size: 10px;
  color: var(--white-dim);
  margin-top: 4px;
}

/* Specialist card body lead — slightly brighter than summary text. */
.wlx-feed-implication {
  color: var(--white) !important;
  font-weight: 450;
}

/* "What's not being said" panel — only on specialist / synthesis cards.
   Visually distinct so the reader knows this is inference, not the source.
   Cyan rule on the left echoes the specialist card chrome. */
.wlx-feed-unsaid {
  margin-top: 10px;
  padding: 8px 10px 8px 12px;
  background: rgba(0, 200, 200, 0.05);
  border-left: 2px solid var(--cyan);
  border-radius: 0 4px 4px 0;
}
.wlx-feed-unsaid-head {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  margin-bottom: 4px;
}
.wlx-feed-unsaid-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wlx-feed-unsaid-list li {
  position: relative;
  padding-left: 12px;
  font-size: 12px;
  color: var(--white-muted);
  line-height: 1.45;
  margin-bottom: 3px;
}
.wlx-feed-unsaid-list li:last-child { margin-bottom: 0; }
.wlx-feed-unsaid-list li::before {
  content: '·';
  position: absolute;
  left: 2px;
  top: -1px;
  color: var(--cyan);
  font-weight: 700;
}

/* Synthesis-only — peer-comparison strip. Same idea as 'unsaid' but
   structurally different: this is the comparison, not the inference. */
.wlx-feed-peers {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 4px;
}
.wlx-feed-peers-head {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white-muted);
  margin-bottom: 3px;
}
.wlx-feed-peers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11.5px;
  /* 2026-05-10 — bumped from --white-dim to --white-muted. */
  color: var(--white-muted);
}
.wlx-feed-peers-list li { line-height: 1.5; }
.wlx-feed-peers-list strong { color: var(--white); font-weight: 600; }

/* Per-watched-project state cards (intel_project_state surface).
   Sit above the feed when a single project is in focus. */
.wlx-state-card {
  background: linear-gradient(180deg, rgba(0, 200, 200, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.wlx-state-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  margin-bottom: 4px;
}
.wlx-state-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--white);
  margin-bottom: 6px;
}
.wlx-state-thesis {
  font-size: 12.5px;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 10px;
}
.wlx-state-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-top: 8px;
}
.wlx-state-grid > div {
  font-size: 11px;
  /* 2026-05-10 — bumped from --white-muted to --white. The watchpoint /
     risk / peer lines are the actual content of the state card; they
     need body-text contrast. --white-muted now holds for the meta
     strip and peers-list secondary text only. */
  color: var(--white);
  line-height: 1.4;
}
.wlx-state-grid h6 {
  margin: 0 0 3px 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.wlx-state-grid ul { list-style: none; margin: 0; padding: 0; }
.wlx-state-grid li { line-height: 1.45; }
.wlx-state-meta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.5px solid var(--border-light);
  font-size: 10px;
  /* 2026-05-10 — bumped from --white-dim to --white-muted. Meta strip
     is reference info, so it's still secondary, but readable. */
  color: var(--white-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.wlx-state-empty {
  font-size: 11.5px;
  color: var(--white-dim);
  font-style: italic;
}
/* 2026-05-10 — modifier on the shared .wlx-feed-expander to give the
   state-card's "Read full state" disclosure a top separator + a hair
   of breathing room. Default collapsed so the card stays calm
   (thesis + meta only); user opens for depth. */
.wlx-state-expander {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.5px solid var(--border-light);
}
.wlx-state-expander > summary {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Skeleton-state card — shown when intel_project_state row exists
   but BPS hasn't filled in narrative yet. Carries registry-derived
   context lines so the user sees data-led content even before the
   specialist runs. (Tier badge removed 2026-05-08 — internal scheduling
   detail, not user-facing.) */
.wlx-state-context {
  font-size: 11.5px;
  color: var(--white-muted);
  margin: 4px 0;
  line-height: 1.5;
}
.wlx-state-ctx-label {
  color: var(--white-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 6px;
}
.wlx-state-card-skeleton .wlx-state-empty {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 0.5px solid var(--border-light);
}

/* Generate Report CTA — sits in the feed header. */
.wlx-report-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 200, 200, 0.12);
  border: 0.5px solid var(--cyan);
  color: var(--cyan-bright);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s;
}
.wlx-report-cta:hover {
  background: rgba(0, 200, 200, 0.2);
  color: var(--white);
}
.wlx-report-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* 2026-05-11 — Force-honour the [hidden] HTML attribute. The
   .wlx-report-cta rule above sets display:inline-flex; that defeats
   the user-agent default of `[hidden] { display: none }` because
   author CSS wins over UA. Result: the button stayed visible even
   after wlxRenderState() applied the hidden attribute. The override
   below restores the expected semantics. */
.wlx-report-cta[hidden] { display: none !important; }

.wlx-footer-pin {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border: 0.5px dashed var(--border-light);
  border-radius: 8px;
  font-size: 12px;
  color: var(--white-dim);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.wlx-footer-pin:hover {
  border-color: var(--cyan);
  color: var(--cyan-bright);
  background: rgba(0, 200, 200, 0.04);
}

/* Sticky variant — used inside the picker / rail. Pins to the bottom of
   the column so the user always sees the affordance. */
.wlx-pin-sticky {
  position: sticky;
  bottom: 0;
  background: rgba(5, 13, 24, 0.92);
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* Expanded inline form — replaces label/arrow with input + submit. */
.wlx-footer-pin.expanded {
  border-style: solid;
  border-color: rgba(0, 200, 200, 0.45);
  background: rgba(0, 200, 200, 0.05);
  cursor: default;
  padding: 10px;
  flex-wrap: wrap;
}
.wlx-footer-pin.expanded:hover {
  background: rgba(0, 200, 200, 0.05);
}
.wlx-footer-pin .wlx-pin-form {
  display: flex;
  width: 100%;
  gap: 6px;
  align-items: center;
}
.wlx-footer-pin .wlx-pin-form input {
  flex: 1 1 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12px;
  height: 30px;
  font-family: inherit;
}
.wlx-footer-pin .wlx-pin-form input:focus {
  outline: none;
  border-color: var(--cyan);
}
.wlx-footer-pin .wlx-pin-form input::placeholder { color: var(--white-dim); }
.wlx-footer-pin .wlx-pin-form button {
  flex: 0 0 auto;
  background: var(--cyan);
  color: var(--navy-deep);
  border: none;
  padding: 0 12px;
  height: 30px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.wlx-footer-pin .wlx-pin-form button:hover { background: var(--cyan-bright); }
.wlx-footer-pin .wlx-pin-status {
  width: 100%;
  font-size: 11px;
  color: var(--cyan-bright);
  text-align: left;
  padding-top: 4px;
}

/* ========================================================================
   SUBSCRIBE CARD — replaces the cramped footer pin.

   Design: eyebrow + title + body + full-width input + full-width button,
   stacked vertically. No truncation of long emails, no shoehorning input
   and button on the same row. Lives at the bottom of both the rail
   (compact mode) and the picker (expanded mode), so it's discoverable
   from either entry point.

   Wiring: button click goes to wlxSubscribeSubmit(); on success the card
   collapses into a confirmation state. See _scripts/supabase-watchlist-
   subscriptions.sql for the persistence table and _scheduled_tasks/XX-
   watchlist-digest.task.md for the Monday 7am Resend send job.
   ======================================================================== */
/* 2026-05-07 — subscribe card chrome aligned to .drx-coach-card so
   the rail vocabulary is consistent across Watchlist + Vault + Data
   Rooms. Same cyan-tinted left border + 5px radius + 11px 12px
   padding. Inner spacing tightened to match. */
.wlx-subscribe-card {
  margin-top: 0; /* gap handled by .wlx-left-stack { gap: 8px } */
  padding: 11px 12px;
  background: rgba(0, 200, 200, 0.06);
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-left: 3px solid var(--cyan);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
  flex-shrink: 0;
}
.wlx-subscribe-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--white-dim);
  text-transform: uppercase;
}
.wlx-subscribe-eyebrow .wlx-live-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
}
.wlx-subscribe-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
}
.wlx-subscribe-body {
  font-size: 0.74rem;
  color: var(--white-muted);
  line-height: 1.45;
}
.wlx-subscribe-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 9px 11px;
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.wlx-subscribe-input:focus {
  outline: none;
  border-color: var(--cyan);
}
.wlx-subscribe-input::placeholder { color: var(--white-dim); }
.wlx-subscribe-btn {
  width: 100%;
  background: var(--cyan);
  color: var(--navy-deep);
  border: none;
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.wlx-subscribe-btn:hover { background: var(--cyan-bright); }
.wlx-subscribe-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.wlx-subscribe-status {
  font-size: 11px;
  color: var(--white-dim);
  line-height: 1.4;
  min-height: 0;
}
.wlx-subscribe-status.error { color: #ff8a8a; }
.wlx-subscribe-status.success { color: var(--cyan-bright); }
.wlx-subscribe-card.subscribed {
  background: rgba(0, 200, 200, 0.08);
  border-color: rgba(0, 200, 200, 0.4);
}

/* ---------------------------------------------------------------------
   Watchlist cap modal — shown when a free-tier user tries to add a 4th
   deposit. Replaces the legacy mailto:hello@puna.earth nudge with an
   in-app subscribe-and-add flow. Matches the canonical Puna brand
   chrome (navy card, cyan top bar, ambient glow) per
   puna/Puna_Design_Guidelines.md § 5 / § 7.
   --------------------------------------------------------------------- */
#wl-cap-modal {
  position: fixed;
  inset: 0;
  background: rgba(6, 15, 29, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9050;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#wl-cap-modal.open { display: flex; animation: lgPageFadeIn 0.28s ease-out; }
#wl-cap-modal .wlcap-card {
  width: min(460px, 92vw);
  background: var(--navy);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 200, 200, 0.08);
  animation: lgCardRise 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
#wl-cap-modal .wlcap-top {
  height: 3px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-bright) 50%, var(--cyan) 100%);
}
#wl-cap-modal .wlcap-body { padding: 30px 32px 26px; }
#wl-cap-modal .wlcap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #0d3a4f;
  border-radius: 2px;
  background-color: #0a2f40;
  padding: 7px 12px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cyan);
  margin-bottom: 18px;
  text-transform: none;
}
#wl-cap-modal .wlcap-eyebrow .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--cyan);
  border-radius: 50%;
}
#wl-cap-modal .wlcap-h {
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.25;
}
#wl-cap-modal .wlcap-p {
  font-size: 14.5px;
  color: var(--white-muted);
  line-height: 1.55;
  margin: 0 0 24px;
}
#wl-cap-modal .wlcap-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
#wl-cap-modal .wlcap-btn-primary {
  flex: 1 1 auto;
  padding: 12px 18px;
  background: var(--cyan);
  color: var(--navy-deep);
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s ease;
}
#wl-cap-modal .wlcap-btn-primary:hover { background: var(--cyan-bright); }
#wl-cap-modal .wlcap-btn-primary:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 2px; }
#wl-cap-modal .wlcap-btn-primary:disabled { opacity: 0.6; cursor: wait; }
#wl-cap-modal .wlcap-btn-secondary {
  flex: 0 0 auto;
  padding: 12px 18px;
  background: transparent;
  color: var(--white-muted);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#wl-cap-modal .wlcap-btn-secondary:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.22); }
#wl-cap-modal .wlcap-btn-secondary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
#wl-cap-modal .wlcap-status {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--white-dim);
  min-height: 1.4em;
}
#wl-cap-modal .wlcap-status.error { color: #ff8a8a; }
#wl-cap-modal .wlcap-status.ok    { color: var(--cyan-bright); }
@media (max-width: 480px) {
  #wl-cap-modal .wlcap-actions { flex-direction: column; }
  #wl-cap-modal .wlcap-btn-secondary { width: 100%; }
}

/* Watching list inside the subscribed-state card — shows what the user
   is currently tracking, so they can confirm what the digest will cover.
   Auto-syncs whenever they toggle a deposit/project. */
.wlx-subscribe-watching {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 0.5px solid var(--border);
  border-radius: 6px;
}
.wlx-subscribe-watching-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--white-dim);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 6px;
}
.wlx-subscribe-watching-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wlx-subscribe-watching-item {
  font-size: 12px;
  color: var(--white);
  line-height: 1.4;
  padding: 3px 0;
  position: relative;
  padding-left: 14px;
}
.wlx-subscribe-watching-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
}
.wlx-subscribe-watching-item.project::before { background: var(--white-dim); }
.wlx-subscribe-watching-empty {
  font-size: 11.5px;
  color: var(--white-dim);
  font-style: italic;
  line-height: 1.5;
}

/* Ghost variant — used for the Unsubscribe button so it visually reads
   as the destructive/secondary action vs. the cyan primary Subscribe. */
.wlx-subscribe-btn.ghost {
  background: transparent;
  color: var(--white-dim);
  border: 0.5px solid var(--border-light);
  font-weight: 500;
}
.wlx-subscribe-btn.ghost:hover {
  background: rgba(231, 76, 60, 0.08);
  border-color: rgba(231, 76, 60, 0.5);
  color: #ff8a8a;
}
.wlx-subscribe-foot {
  font-size: 10.5px;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.wlx-subscribe-foot a {
  color: var(--white-muted);
  text-decoration: none;
  border-bottom: 0.5px solid transparent;
}
.wlx-subscribe-foot a:hover {
  color: var(--cyan-bright);
  border-bottom-color: var(--cyan);
}

/* Mobile: collapse to single column */
@media (max-width: 720px) {
  .wlx-split {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .wlx-pick-deposits {
    grid-template-columns: 1fr;
  }
  .wlx-watching-rail {
    max-height: 200px;
  }
}

/* Future-state hint card at the top of an empty feed */
.wl-oracle-note {
  margin-top: 1.4rem;
  padding: 0.85rem 0.95rem;
  border-radius: 4px;
  background: rgba(11, 26, 46, 0.55);
  border: 1px dashed rgba(0, 200, 200, 0.25);
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--white-dim);
  text-align: left;
}
.wl-oracle-note .lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  display: block;
  margin-bottom: 4px;
}

/* ============================================================
   DATA ROOMS HUB — For Capital persona, INVEST → Data Rooms
   Full-page panel that swaps in via `body.view-datarooms`,
   matching the show/hide pattern used by #db-panel and #wl-panel.
   Layout (vertical):
     HEADER       — title + accessed-rooms strip (cap 3)
     TOOLBAR      — search + stage chips + Puna Analyst chat
     CARD GRID    — one card per project (image, key info, request)
     DETAIL OVR   — NI 43-101 aligned project detail (modal-style)
   ============================================================ */
#dr-page {
  display: none;
  flex: 1;
  flex-direction: column;
  background: rgba(6, 15, 29, 0.6);
  border-left: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white-muted);
  overflow-y: auto;
  /* 2026-05-07 — outer padding zeroed. .drx-main inside owns the
     rhythm (22px 28px 60px) so Data Rooms aligns identically with
     Vault and Watchlist. The previous 2.6rem 2.4rem 3rem block was
     double-padding the page (drx-main padded again on top), pushing
     the title ~64/66px from the top-left while Vault sat at 22/28.
     Same fix-pattern as the stale-rule playbook entry: the comment
     above this rule cited "match the Vault page's outer padding" but
     Vault's padding had already been moved. */
  padding: 0;
  animation: none !important;
}
body.view-datarooms #dr-page    { display: flex !important; }
body.view-datarooms #mw         { display: none !important; }
body.view-datarooms #right-panel{ display: none !important; }
body.view-datarooms #db-panel   { display: none !important; }
body.view-datarooms #wl-panel   { display: none !important; }
body.view-watchlist #dr-page    { display: none !important; }
body.view-explorer  #dr-page    { display: none !important; }
body.view-database  #dr-page    { display: none !important; }
body.view-mineroom  #dr-page    { display: none !important; }

/* ============================================================
   MINER DATA ROOM (V1.0) — operator-facing landing page.
   Show/hide matches the dr-page pattern. Lives outside the
   investor card grid; surface focus is "find YOUR project."
   ============================================================ */
#mr-page {
  display: none;
  flex: 1;
  flex-direction: column;
  background: rgba(6, 15, 29, 0.6);
  border-left: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white-muted);
  overflow-y: auto;
  /* Bottom padding clears the fixed Puna agent bar so the last
     folder card isn't hidden behind it (live audit 2026-05-12 —
     the bar covered "Granted Permits" when scrolled to the end). */
  padding: 2rem 2.4rem 8rem;
  animation: none !important;
}
body.view-mineroom #mr-page    { display: flex !important; }
body.view-mineroom #mw         { display: none !important; }
body.view-mineroom #right-panel{ display: none !important; }
body.view-mineroom #db-panel   { display: none !important; }
body.view-mineroom #wl-panel   { display: none !important; }
body.view-mineroom #dr-page    { display: none !important; }
body.view-mineroom #screener-page { display: none !important; }
body.view-mineroom #team-page  { display: none !important; }
body.view-mineroom #mpd-page   { display: none !important; }
body.view-mineroom #mann-page  { display: none !important; }

/* ============================================================
   MINER PITCH DECKS (V2.0) — operator-facing presentations page.
   Same show/hide pattern as the other full-page views.
   Surface prefix: mpd. Body class: view-miner-decks.
   ============================================================ */

/* ── New design tokens ── */
:root {
  --green: #5fe4b4;
  --amber: #e8a838;
  --navy-mid: #0d1f36;
}

/* ── Reusable patterns ── */
.gradient-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,200,0.15), transparent);
  margin: 8px 0;
}
.chip { display:inline-block; padding:2px 7px; border-radius:3px; font-size:10px; font-weight:500; letter-spacing:0.02em; }
.chip-operator { background:rgba(0,200,200,0.10); color:var(--cyan); }
.chip-public { background:rgba(95,228,180,0.10); color:#5fe4b4; }
.chip-private { background:rgba(255,255,255,0.06); color:var(--white-dim); }
.chip-auto { background:rgba(0,200,200,0.06); color:var(--cyan); border:1px dashed rgba(0,200,200,0.25); font-size:9.5px; }
.card-hover-lift { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.card-hover-lift:hover { transform: translateY(-2px); border-color: rgba(0,200,200,0.35); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
@keyframes fadeSlideIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.status-badge { display:inline-block; font-size:9px; font-weight:600; letter-spacing:0.10em; text-transform:uppercase; padding:2px 8px; border-radius:3px; }
.status-badge-draft { color:var(--cyan); border:1px solid rgba(0,200,200,0.5); box-shadow:0 0 6px rgba(0,200,200,0.15); }
.status-badge-scheduled { color:var(--amber); border:1px solid rgba(232,168,56,0.5); box-shadow:0 0 6px rgba(232,168,56,0.1); }
.status-badge-published { color:#5fe4b4; border:1px solid rgba(95,228,180,0.5); box-shadow:0 0 6px rgba(95,228,180,0.1); }

#mpd-page {
  display: none;
  flex: 1;
  flex-direction: column;
  background: rgba(6, 15, 29, 0.6);
  border-left: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white-muted);
  overflow-y: auto;
  padding: 24px 28px 80px;
}
body.view-miner-decks #mpd-page        { display: flex !important; }
body.view-miner-decks #mw              { display: none !important; }
body.view-miner-decks #right-panel     { display: none !important; }
body.view-miner-decks #db-panel        { display: none !important; }
body.view-miner-decks #wl-panel        { display: none !important; }
body.view-miner-decks #dr-page         { display: none !important; }
body.view-miner-decks #mr-page         { display: none !important; }
body.view-miner-decks #mann-page       { display: none !important; }
body.view-miner-decks #screener-page   { display: none !important; }
body.view-miner-decks #team-page       { display: none !important; }
body.view-miner-decks #profile-page    { display: none !important; }
body.view-miner-decks #vault-page      { display: none !important; }
body.view-miner-decks #improvements-page { display: none !important; }

/* Pitch Decks page header */
.mpd-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.mpd-header-left h1 { font-size:1.15rem; font-weight:600; margin-bottom:2px; color:var(--white); }
.mpd-header-left .mpd-project { font-size:11px; color:var(--white-dim); }
.mpd-btn-cyan {
  background:var(--cyan); color:var(--navy-deep);
  border:none; border-radius:3px;
  padding:6px 8px; font-size:11.2px; font-weight:600;
  cursor:pointer; transition:all 0.15s;
  display:flex; align-items:center; gap:4px;
  font-family:inherit;
}
.mpd-btn-cyan:hover { background:var(--cyan-bright); }

/* Card grid */
.mpd-card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:32px; }
@media(max-width:960px){ .mpd-card-grid { grid-template-columns:1fr; } }

.mpd-card {
  background:var(--navy);
  border:1px solid var(--border);
  border-radius:6px; overflow:hidden;
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  opacity:0; animation:mpdCardIn 0.4s ease forwards;
}
.mpd-card:nth-child(1){animation-delay:0.05s}
.mpd-card:nth-child(2){animation-delay:0.12s}
.mpd-card:nth-child(3){animation-delay:0.19s}
.mpd-card:nth-child(4){animation-delay:0.26s}
@keyframes mpdCardIn{to{opacity:1}}
.mpd-card:hover { transform:translateY(-2px); border-color:rgba(0,200,200,0.35); box-shadow:0 8px 24px rgba(0,0,0,0.4); }

.mpd-card-preview {
  height:100px;
  background:linear-gradient(135deg,rgba(0,200,200,0.08),var(--navy-deep));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.mpd-mini-slide {
  width:140px; height:80px;
  background:var(--navy-deep);
  border:1px solid var(--border-light);
  border-radius:3px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px; padding:8px;
}
.mpd-mini-slide .slide-title { font-size:6px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--white-muted); text-align:center; }
.mpd-mini-slide .slide-icon { font-size:16px; color:var(--cyan); opacity:0.6; }
.mpd-mini-slide .slide-bar { width:60%; height:3px; border-radius:1px; background:rgba(0,200,200,0.25); }
.mpd-mini-slide .slide-bars { display:flex; gap:3px; width:70%; }
.mpd-mini-slide .slide-bars span { flex:1; height:12px; border-radius:1px; background:rgba(0,200,200,0.15); }
.mpd-mini-slide .slide-bars span:nth-child(2){ height:18px; background:rgba(0,200,200,0.25); }
.mpd-mini-slide .slide-bars span:nth-child(3){ height:8px; }

.mpd-card-body { padding:14px 16px 12px; }
.mpd-card-title { font-size:13px; font-weight:600; margin-bottom:2px; color:var(--white); }
.mpd-card-subtitle { font-size:11px; color:var(--white-dim); margin-bottom:8px; }
.mpd-card-meta { font-size:10.5px; color:var(--white-dim); margin-bottom:8px; }
.mpd-card-status { display:flex; align-items:center; gap:5px; font-size:10.5px; margin-bottom:10px; }
.mpd-status-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.mpd-status-dot.green { background:var(--green); }
.mpd-status-dot.amber { background:var(--amber); }
.mpd-status-dot.cyan  { background:var(--cyan); }
.mpd-card-actions { display:flex; align-items:center; gap:10px; padding-top:8px; border-top:1px solid var(--border); }
.mpd-card-actions button { background:none; border:none; font-size:11px; font-weight:500; cursor:pointer; padding:2px 0; transition:color 0.15s; font-family:inherit; }
.mpd-card-actions .act-primary { color:var(--cyan); }
.mpd-card-actions .act-primary:hover { color:var(--cyan-bright); }
.mpd-card-actions .act-muted { color:var(--white-dim); }
.mpd-card-actions .act-muted:hover { color:var(--white-muted); }
.mpd-card-actions .act-amber { color:var(--amber); }
.mpd-card-actions .act-amber:hover { color:#f0b84e; }
.mpd-card-actions .spacer { flex:1; }
.mpd-card-actions .menu-btn { color:var(--white-dim); font-size:14px; letter-spacing:2px; line-height:1; }

/* Sample chip — labels mock cards as fixture data so a returning miner
   doesn't mistake the demo for their own decks. Quiet, low-contrast. */
.mpd-sample-chip {
  display:inline-block; font-size:9px; font-weight:600;
  letter-spacing:0.10em; text-transform:uppercase;
  padding:2px 7px; border-radius:2px;
  color:var(--white-dim);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  margin-bottom:6px;
}

/* Create card */
.mpd-card-create {
  border:1px dashed rgba(255,255,255,0.12);
  background:transparent;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  min-height:240px; cursor:pointer;
  transition:all 0.2s ease;
  border-radius:6px;
  opacity:0; animation:mpdCardIn 0.4s ease forwards;
  animation-delay:0.26s;
}
.mpd-card-create:hover { border-color:rgba(0,200,200,0.4); background:rgba(0,200,200,0.03); }
.mpd-card-create:hover .mpd-create-border { animation:mpdPulseBorder 1.5s ease-in-out infinite; }
@keyframes mpdPulseBorder { 0%,100%{border-color:rgba(0,200,200,0.4)} 50%{border-color:rgba(0,200,200,0.7)} }
.mpd-card-create .plus { font-size:32px; color:var(--white-dim); font-weight:300; margin-bottom:6px; transition:color 0.2s; }
.mpd-card-create:hover .plus { color:var(--cyan); }
.mpd-card-create .label { font-size:11.5px; color:var(--white-dim); transition:color 0.2s; }
.mpd-card-create:hover .label { color:var(--white-muted); }
.mpd-card-create .templates { display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; max-height:0; overflow:hidden; transition:max-height 0.3s ease, opacity 0.3s ease; opacity:0; justify-content:center; }
.mpd-card-create:hover .templates { max-height:50px; opacity:1; }
.mpd-card-create .templates .tag { font-size:9.5px; color:var(--white-dim); background:rgba(255,255,255,0.04); border:1px solid var(--border-light); padding:2px 7px; border-radius:2px; transition:all 0.15s; }
.mpd-card-create:hover .templates .tag:hover { color:var(--cyan); border-color:rgba(0,200,200,0.4); }

/* Engagement panel */
.mpd-engagement { background:var(--navy); border:1px solid var(--border); border-radius:6px; margin-bottom:24px; overflow:hidden; }
.mpd-engagement-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; cursor:pointer; transition:background 0.15s; }
.mpd-engagement-header:hover { background:rgba(255,255,255,0.02); }
.mpd-engagement-header h3 { font-size:12px; font-weight:600; color:var(--white); display:flex; align-items:center; gap:6px; }
.mpd-engagement-header .dim { color:var(--white-dim); font-weight:400; }
.mpd-engagement-header .chevron { font-size:11px; color:var(--white-dim); transition:transform 0.2s; }
.mpd-engagement.open .chevron { transform:rotate(180deg); }
.mpd-engagement-body { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.mpd-engagement.open .mpd-engagement-body { max-height:500px; }
.mpd-engagement-content { padding:0 16px 16px; }

.mpd-bar-chart-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mpd-bar-chart-row .slide-label { font-size:10.5px; color:var(--white-muted); width:140px; min-width:140px; text-align:right; }
.mpd-bar-chart-row .bar-track { flex:1; height:18px; background:rgba(255,255,255,0.03); border-radius:2px; overflow:hidden; }
.mpd-bar-chart-row .bar-fill { height:100%; background:rgba(0,200,200,0.3); border-radius:2px; width:0; transition:width 0.8s ease; }
.mpd-bar-chart-row .bar-fill.animated { width:var(--w); }
.mpd-bar-chart-row .bar-val { font-size:10px; color:var(--white-dim); width:55px; min-width:55px; }
.mpd-engagement-stats { font-size:10.5px; color:var(--white-dim); margin-top:12px; margin-bottom:10px; }
.mpd-heatmap-row { display:flex; gap:3px; margin-top:8px; }
.mpd-heatmap-row .day { flex:1; height:16px; border-radius:2px; background:rgba(255,255,255,0.03); position:relative; }
.mpd-heatmap-row .day::after { content:attr(data-label); position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); font-size:8px; color:var(--white-dim); }
.mpd-heatmap-row .day.h1{background:rgba(0,200,200,0.1)}
.mpd-heatmap-row .day.h2{background:rgba(0,200,200,0.22)}
.mpd-heatmap-row .day.h3{background:rgba(0,200,200,0.38)}
.mpd-heatmap-row .day.h4{background:rgba(0,200,200,0.55)}
.mpd-heatmap-label { font-size:9px; color:var(--white-dim); margin-top:20px; }


/* ============================================================
   MINER ANNOUNCEMENTS (V2.0) — operator-facing announcements page.
   Surface prefix: mann. Body class: view-miner-announcements.
   ============================================================ */
#mann-page {
  display: none;
  flex: 1;
  flex-direction: column;
  background: rgba(6, 15, 29, 0.6);
  border-left: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white-muted);
  overflow-y: auto;
  overflow-x: hidden;
}
body.view-miner-announcements #mann-page         { display: flex !important; }
body.view-miner-announcements #mw                { display: none !important; }
body.view-miner-announcements #right-panel       { display: none !important; }
/* #mann-right show/hide is handled near its definition (see "Right rail —
   Announcements view" CSS block); kept here as a comment so the view-class
   block stays grep-friendly. */
body.view-miner-announcements #db-panel          { display: none !important; }
body.view-miner-announcements #wl-panel          { display: none !important; }
body.view-miner-announcements #dr-page           { display: none !important; }
body.view-miner-announcements #mr-page           { display: none !important; }
body.view-miner-announcements #mpd-page          { display: none !important; }
body.view-miner-announcements #screener-page     { display: none !important; }
body.view-miner-announcements #team-page         { display: none !important; }
body.view-miner-announcements #profile-page      { display: none !important; }
body.view-miner-announcements #vault-page        { display: none !important; }
body.view-miner-announcements #improvements-page { display: none !important; }

/* Page header */
.mann-header {
  padding:20px 28px 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; position:relative;
}
.mann-header::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,200,200,0.12) 30%, rgba(0,200,200,0.12) 70%, transparent);
}
.mann-header-left h1 { font-size:1.1rem; font-weight:600; margin:0; color:var(--white); }
.mann-header-left .mann-project { font-size:0.75rem; color:var(--white-dim); font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; letter-spacing:0.04em; }
.mann-filter-pills { display:flex; gap:6px; }
.mann-filter-pill {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10.5px; font-weight:500;
  padding:5px 12px; border-radius:999px;
  background:transparent; border:1px solid var(--border-light);
  color:var(--white-muted); cursor:pointer;
  letter-spacing:0.06em; text-transform:uppercase;
  transition:all 0.15s;
}
.mann-filter-pill:hover { color:var(--white); border-color:rgba(255,255,255,0.2); }
.mann-filter-pill.is-active { color:var(--cyan); border-color:var(--cyan); background:rgba(0,200,200,0.08); }
.mann-btn-cyan {
  background:var(--cyan); color:var(--navy-deep);
  border:none; border-radius:3px;
  padding:6px 10px; font-size:11.2px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:background 0.15s;
}
.mann-btn-cyan:hover { background:var(--cyan-bright); }

/* Timeline */
.mann-timeline-wrap { flex:1; overflow-y:auto; padding:28px 28px 100px; position:relative; }
.mann-timeline { position:relative; padding-left:32px; max-width:820px; }
.mann-timeline::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:1px; background:rgba(0,200,200,0.15); }

.mann-entry { position:relative; margin-bottom:28px; opacity:0; transform:translateX(-12px); }
.mann-entry.in { opacity:1; transform:translateX(0); transition:opacity 0.4s ease, transform 0.4s ease; }

.mann-dot {
  position:absolute; left:-32px; top:4px;
  width:14px; height:14px; border-radius:50%; z-index:2; box-sizing:border-box;
}
.mann-dot.cyan { background:var(--cyan); box-shadow:0 0 8px rgba(0,200,200,0.6); animation:mannDotPulse 2.4s ease-in-out infinite; }
.mann-dot.amber { background:var(--amber); box-shadow:0 0 6px rgba(232,168,56,0.5); }
.mann-dot.green { background:var(--green); box-shadow:0 0 6px rgba(95,228,180,0.4); }
/* Hollow cyan ring for AI-drafted future entries — visually distinct from
   solid past dots so the eye instantly tracks where the timeline crosses
   from "what happened" into "what we've drafted next". */
.mann-dot.draft-dot {
  background:transparent;
  border:2px solid var(--cyan);
  box-shadow:0 0 8px rgba(0,200,200,0.3);
  animation:mannDotPulse 2.4s ease-in-out infinite;
}
@keyframes mannDotPulse { 0%,100%{box-shadow:0 0 8px rgba(0,200,200,0.6)} 50%{box-shadow:0 0 16px rgba(0,200,200,0.9),0 0 28px rgba(0,200,200,0.3)} }

.mann-date {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10px; font-weight:500; color:var(--white-dim);
  letter-spacing:0.06em; margin-bottom:6px; text-transform:uppercase;
}
.mann-card {
  background:rgba(11,26,46,0.55);
  border:1px solid var(--border); border-radius:6px;
  padding:16px 18px;
  transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mann-card:hover { border-color:rgba(0,200,200,0.25); transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.mann-card.is-draft { border:1px dashed rgba(0,200,200,0.30); border-left:2px solid var(--cyan); background:rgba(11,26,46,0.35); position:relative; animation:mannDraftBreathe 3s ease-in-out 2; }
.mann-card.is-draft::before {
  content:''; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  background:repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(0,200,200,0.015) 8px, rgba(0,200,200,0.015) 16px);
}
@keyframes mannDraftBreathe { 0%,100%{border-left-color:var(--cyan)} 50%{border-left-color:rgba(0,200,200,0.35)} }

.mann-badge {
  display:inline-block;
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9px; font-weight:600;
  letter-spacing:0.10em; text-transform:uppercase;
  padding:2px 8px; border-radius:3px; margin-bottom:8px;
}
.mann-badge.draft { color:var(--cyan); border:1px solid rgba(0,200,200,0.5); box-shadow:0 0 6px rgba(0,200,200,0.15); }
/* AI-Draft badge — same cyan as draft but with a sparkle glyph in render to
   visually mark "Puna drafted this, not a human" per spec §4.2.D. */
.mann-badge.ai-draft { color:var(--cyan); border:1px solid rgba(0,200,200,0.5); box-shadow:0 0 6px rgba(0,200,200,0.15); display:inline-flex; align-items:center; gap:4px; }
.mann-badge.ai-draft .mann-sparkle { font-size:11px; line-height:1; }
.mann-badge.scheduled { color:var(--amber); border:1px solid rgba(232,168,56,0.5); box-shadow:0 0 6px rgba(232,168,56,0.1); }
.mann-badge.published { color:var(--green); border:1px solid rgba(95,228,180,0.5); box-shadow:0 0 6px rgba(95,228,180,0.1); }

.mann-card h3 { font-size:0.92rem; font-weight:600; margin:0 0 4px; color:var(--white); line-height:1.3; }
.mann-card .subtitle { font-size:0.75rem; color:var(--white-muted); margin-bottom:8px; }

.mann-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
.mann-tag {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
  padding:2px 7px; border-radius:2px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border-light); color:var(--white-dim);
}
.mann-card .preview { font-size:0.78rem; color:var(--white-muted); line-height:1.5; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mann-card .source { font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size:9px; color:var(--white-dim); letter-spacing:0.04em; margin-bottom:10px; opacity:0.7; }
.mann-card .engagement { font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size:10px; color:var(--white-dim); letter-spacing:0.04em; margin-bottom:10px; }

.mann-card-actions { display:flex; gap:8px; flex-wrap:wrap; }
.mann-card-action {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:3px;
  background:transparent; border:1px solid var(--border-light);
  color:var(--white-muted); cursor:pointer; transition:all 0.15s;
}
.mann-card-action:hover { color:var(--cyan); border-color:rgba(0,200,200,0.4); }
.mann-card-action.primary { border-color:var(--cyan); color:var(--cyan); }
.mann-card-action.primary:hover { background:rgba(0,200,200,0.1); }

/* Transaction alert */
.mann-alert-card {
  background:rgba(11,26,46,0.55);
  border:1px solid rgba(232,168,56,0.2); border-left:3px solid var(--amber);
  border-radius:6px; padding:14px 18px; position:relative;
  box-shadow:0 0 20px rgba(232,168,56,0.06);
  animation:mannAlertGlow 3s ease-in-out infinite;
}
@keyframes mannAlertGlow { 0%,100%{box-shadow:0 0 20px rgba(232,168,56,0.06)} 50%{box-shadow:0 0 28px rgba(232,168,56,0.12)} }
.mann-alert-card .alert-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.mann-alert-icon { width:22px; height:22px; border-radius:4px; background:rgba(232,168,56,0.15); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--amber); }
.mann-alert-title { font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size:10px; font-weight:600; letter-spacing:0.10em; text-transform:uppercase; color:var(--amber); }
.mann-alert-card .alert-body { font-size:0.78rem; color:var(--white-muted); line-height:1.5; margin-bottom:10px; }
.mann-alert-actions { display:flex; gap:10px; align-items:center; }
.mann-alert-link { font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size:10px; font-weight:600; color:var(--amber); letter-spacing:0.06em; cursor:pointer; transition:color 0.15s; }
.mann-alert-link:hover { color:#f0be5a; }
.mann-alert-dismiss { font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size:10px; color:var(--white-dim); letter-spacing:0.06em; cursor:pointer; transition:color 0.15s; }
.mann-alert-dismiss:hover { color:var(--white-muted); }

.mann-load-more {
  display:block; width:100%; text-align:center; padding:8px 0;
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10.5px; font-weight:500; color:var(--white-dim);
  letter-spacing:0.06em; text-transform:uppercase;
  background:transparent; border:1px solid var(--border-light);
  border-radius:999px; cursor:pointer; transition:all 0.15s;
}
.mann-load-more:hover { color:var(--cyan); border-color:rgba(0,200,200,0.4); }

/* "Load future announcements" button — pill sits ABOVE the today divider,
   tinted cyan so the eye reads it as "the AI drafted these for you"
   rather than the muted "load more" tone. */
.mann-load-future {
  display:block; width:100%; text-align:center; padding:8px 0;
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10.5px; font-weight:500; color:var(--cyan);
  letter-spacing:0.06em; text-transform:uppercase;
  background:rgba(0,200,200,0.04); border:1px solid rgba(0,200,200,0.25);
  border-radius:999px; cursor:pointer; transition:all 0.15s;
  margin-bottom:28px;
}
.mann-load-future:hover { background:rgba(0,200,200,0.1); border-color:var(--cyan); }

/* Today divider — pulsing cyan line + dot + label sitting at the seam
   between past (above) and future (below). The divider's dot extends out
   into the timeline rail so it aligns with the column of entry dots. */
.mann-today-divider {
  position:relative; margin:0 0 28px -32px;
  display:flex; align-items:center; gap:12px;
}
.mann-today-divider .mann-today-dot {
  width:14px; height:14px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 12px rgba(0,200,200,0.8);
  flex-shrink:0; animation:mannDotPulse 2.4s ease-in-out infinite;
}
.mann-today-divider .mann-today-line {
  flex:1; height:1px;
  background:linear-gradient(90deg, var(--cyan), rgba(0,200,200,0.3), transparent);
}
.mann-today-divider .mann-today-label {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10px; font-weight:700; color:var(--cyan);
  letter-spacing:0.14em; text-transform:uppercase; flex-shrink:0;
}

/* Future-zone reveal — collapses to 0 height by default; expands with a
   smooth max-height transition when "Load future" is clicked. The
   futureZone uses the same vertical rail but rendered as a dashed line
   (since the past rail is solid) — visual cue that this is the projection. */
.mann-future-zone {
  max-height:0; overflow:hidden;
  transition:max-height 0.6s ease-in-out;
  position:relative;
}
.mann-future-zone.is-open { max-height:6000px; }
.mann-future-zone::before {
  content:''; position:absolute; left:7px; top:0; bottom:0; width:1px;
  background:repeating-linear-gradient(to bottom,
    rgba(0,200,200,0.30) 0 4px, transparent 4px 8px);
}

/* ─── Right rail — Announcements view (v2.2) ─────────────────────────
   Forward-looking activity timeline that sits in the global right rail
   (sibling of #right-panel). Two things visible here: confirmed
   upcoming activities (statutory deadlines, scheduled meetings, contract
   milestones) and possible activities (could-generate-an-announcement
   work that's in flight without a fixed date). When the user clicks an
   announcement in the main timeline, activities sharing its engagement
   light up; unrelated activities dim. */
/* #mann-right is moved into #right-rail at mannInit time so it occupies
   the canonical 320px fixed right column (alongside the user slot at
   the top). Width is inherited from #right-rail; we just style the
   inside. Hidden by default; shown when the user is on the
   announcements view. */
#mann-right {
  display:none;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:14px 16px 5rem;  /* bottom pad clears the ask-bar */
  gap:0.55rem;
  font-family:'Inter',-apple-system,sans-serif;
  color:var(--white-muted);
}
body.view-miner-announcements #mann-right { display:flex; }

.mann-rt-section { margin-bottom:14px; }
.mann-rt-section + .mann-rt-section { border-top:1px solid var(--border); padding-top:14px; }

.mann-rt-h {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9.5px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--white-dim);
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:8px;
}
.mann-rt-h .mann-rt-h-sub { color:var(--cyan); font-weight:600; font-size:9px; letter-spacing:0.05em; }

.mann-rt-org-name {
  font-size:0.88rem; font-weight:600; color:var(--white); line-height:1.3; margin-bottom:2px;
}
.mann-rt-org-sub {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10px; color:var(--cyan); letter-spacing:0.05em; margin-bottom:6px;
}
.mann-rt-project-meta {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9.5px; color:var(--white-dim); letter-spacing:0.04em;
}

/* Mini vertical timeline of activities — same rail-and-dots metaphor as
   the main page, compressed for the narrow rail. Confirmed dots are
   filled cyan; possible dots are hollow rings. */
.mann-rt-timeline { position:relative; padding-left:22px; }
.mann-rt-timeline::before {
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(to bottom,
    rgba(0,200,200,0.20) 0%, rgba(0,200,200,0.20) 50%,
    rgba(0,200,200,0.06) 100%);
}
.mann-rt-act {
  position:relative; margin-bottom:13px;
  padding:8px 10px 8px 4px; border-radius:5px; cursor:pointer;
  transition:opacity 0.18s, background 0.15s;
}
.mann-rt-act:hover { background:rgba(255,255,255,0.025); }
.mann-rt-act.is-related {
  background:rgba(0,200,200,0.05);
  outline:1px solid rgba(0,200,200,0.30);
}
.mann-rt-act.is-dimmed { opacity:0.35; }

.mann-rt-dot {
  position:absolute; left:-22px; top:11px;
  width:10px; height:10px; border-radius:50%; box-sizing:border-box;
}
.mann-rt-dot.confirmed {
  background:var(--cyan); box-shadow:0 0 6px rgba(0,200,200,0.6);
}
.mann-rt-dot.possible {
  background:transparent; border:1.5px solid var(--cyan);
}

.mann-rt-act-date {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9.5px; font-weight:600; color:var(--cyan);
  letter-spacing:0.05em; margin-bottom:2px; text-transform:uppercase;
  display:flex; gap:6px; align-items:baseline;
}
.mann-rt-act-date .mann-rt-act-when {
  color:var(--white-dim); font-weight:500; letter-spacing:0.02em;
}
.mann-rt-act-title {
  font-size:0.76rem; font-weight:500; color:var(--white); line-height:1.35; margin-bottom:3px;
}
.mann-rt-act-eng {
  display:inline-block;
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:8.5px; font-weight:500; letter-spacing:0.04em;
  padding:1px 6px; border-radius:2px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border-light);
  color:var(--white-muted);
}
.mann-rt-act-note {
  font-size:0.66rem; color:var(--white-dim);
  line-height:1.4; margin-top:6px; font-style:italic;
}

/* v2.3 — activities as spans. Each card carries a status pill, the
   engagement tag, a date-range row, and zero-to-two announcement
   links (start + end). */
.mann-rt-act-head {
  display:flex; gap:6px; align-items:center;
  margin-bottom:4px;
}
.mann-rt-pill {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:8.5px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; padding:1px 6px; border-radius:2px;
}
.mann-rt-pill--in_flight { color:var(--green); background:rgba(95,228,180,0.10);  border:1px solid rgba(95,228,180,0.40); }
.mann-rt-pill--upcoming  { color:var(--cyan);  background:rgba(0,200,200,0.08);   border:1px solid rgba(0,200,200,0.35); }
.mann-rt-pill--done      { color:var(--white-dim); background:rgba(255,255,255,0.04); border:1px solid var(--border-light); }
.mann-rt-act--done       { opacity:0.55; }

.mann-rt-span {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9.5px; color:var(--white-muted);
  letter-spacing:0.04em; line-height:1.5;
  margin-bottom:5px;
}
.mann-rt-span-label { color:var(--white-dim); font-weight:500; }
.mann-rt-span-sep   { color:var(--cyan); margin:0 4px; }
.mann-rt-span-dur   { color:var(--white-dim); font-size:9px; }

/* Announcement links — one row per linked title. Hover lifts the
   background subtly to signal it's clickable. */
.mann-rt-link {
  display:flex; gap:5px; align-items:flex-start;
  font-size:0.7rem; line-height:1.35; color:var(--white-muted);
  padding:3px 5px; margin:2px -5px; border-radius:3px;
  cursor:pointer; transition:background 0.12s;
}
.mann-rt-link:hover { background:rgba(0,200,200,0.07); color:var(--white); }
.mann-rt-link-arrow {
  color:var(--cyan); font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:0.78rem; line-height:1.25; flex-shrink:0;
}
.mann-rt-link-kind {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9px; font-weight:600; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--cyan); flex-shrink:0;
  padding-top:1px;
}
.mann-rt-link-title { flex:1; min-width:0; }
.mann-rt-link--silent {
  color:var(--white-dim); font-style:italic; cursor:default;
}
.mann-rt-link--silent:hover { background:transparent; color:var(--white-dim); }

.mann-rt-confidence-legend {
  display:flex; gap:14px; margin-top:6px;
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:8.5px; color:var(--white-dim);
  letter-spacing:0.04em; text-transform:uppercase;
}
.mann-rt-legend-item { display:inline-flex; align-items:center; gap:5px; }
.mann-rt-legend-dot { width:7px; height:7px; border-radius:50%; }
.mann-rt-legend-dot.confirmed { background:var(--cyan); }
.mann-rt-legend-dot.possible { background:transparent; border:1.5px solid var(--cyan); }

.mann-rt-focus-banner {
  background:rgba(0,200,200,0.05);
  border:1px solid rgba(0,200,200,0.25);
  border-radius:5px; padding:8px 10px; margin-bottom:12px;
}
.mann-rt-focus-label {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:8.5px; font-weight:700; color:var(--cyan);
  letter-spacing:0.14em; text-transform:uppercase; margin-bottom:3px;
}
.mann-rt-focus-title { font-size:0.72rem; color:var(--white); line-height:1.35; }
.mann-rt-focus-clear {
  display:inline-block;
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9px; color:var(--cyan); letter-spacing:0.05em;
  margin-top:6px; cursor:pointer;
}

.mann-card.is-focused {
  border-color:rgba(0,200,200,0.55) !important;
  box-shadow:0 0 0 1px rgba(0,200,200,0.25), 0 6px 18px rgba(0,0,0,0.35);
}
.mann-entry { cursor:pointer; }

/* Legacy v2.1 in-page sidebar styles (.mann-body / .mann-side*) kept
   collapsed below — Phase 2 cleanup will delete; harmless for now. */
.mann-body { display:none !important; }
.mann-side {
  flex:0 0 320px; width:320px;
  border-left:1px solid var(--border);
  background:rgba(6,15,29,0.65);
  overflow-y:auto;
  padding:20px 18px 100px;  /* bottom pad clears the ask-bar */
  font-family:'Inter',-apple-system,sans-serif;
  color:var(--white-muted);
}
@media (max-width:1180px) { .mann-side { display:none; } }
.mann-side-section { margin-bottom:22px; }
.mann-side-section + .mann-side-section { border-top:1px solid var(--border); padding-top:18px; }
.mann-side-h {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9.5px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--white-dim); margin-bottom:10px;
}
.mann-side-h .mann-side-h-count { color:var(--cyan); margin-left:6px; font-weight:600; }
.mann-side-org-name { font-size:0.95rem; font-weight:600; color:var(--white); line-height:1.3; margin-bottom:2px; }
.mann-side-org-sub {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10.5px; color:var(--cyan); letter-spacing:0.05em; margin-bottom:10px;
}
.mann-side-project-name { font-size:0.82rem; font-weight:500; color:var(--white); line-height:1.35; margin-bottom:3px; }
.mann-side-project-meta {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10px; color:var(--white-dim); letter-spacing:0.04em;
}
.mann-side-due {
  background:rgba(0,200,200,0.04); border:1px solid rgba(0,200,200,0.22);
  border-radius:6px; padding:11px 12px;
  display:flex; align-items:flex-start; gap:10px;
}
.mann-side-due-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--cyan); margin-top:5px;
  box-shadow:0 0 8px rgba(0,200,200,0.6);
  animation:mannDotPulse 2.4s ease-in-out infinite;
}
.mann-side-due-body { flex:1; min-width:0; }
.mann-side-due-title { font-size:0.78rem; font-weight:600; color:var(--white); line-height:1.3; margin-bottom:3px; }
.mann-side-due-date {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10px; color:var(--cyan); letter-spacing:0.05em; margin-bottom:3px;
}
.mann-side-due-hint { font-size:0.7rem; color:var(--white-dim); }
/* Engagement cards — one per Zelandez workstream. Neutral by default; when
   an announcement is in focus and this engagement is in its engagementIds[],
   the card upgrades to .is-related (cyan border, brighter); unrelated cards
   downgrade to .is-dimmed. */
.mann-side-eng {
  border:1px solid var(--border-light); border-left:2px solid var(--border-light);
  border-radius:5px; padding:9px 11px; margin-bottom:8px;
  transition:opacity 0.18s, border-color 0.18s, background 0.18s;
}
.mann-side-eng.is-related {
  border-color:rgba(0,200,200,0.55); border-left-color:var(--cyan);
  background:rgba(0,200,200,0.05);
  box-shadow:0 0 14px rgba(0,200,200,0.10);
}
.mann-side-eng.is-dimmed { opacity:0.40; }
.mann-side-eng-title {
  font-size:0.78rem; font-weight:600; color:var(--white); line-height:1.25;
  margin-bottom:3px; display:flex; align-items:center; gap:6px;
}
.mann-side-eng-icon {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:10px; color:var(--cyan);
}
.mann-side-eng-status {
  display:inline-block;
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:8.5px; font-weight:600; letter-spacing:0.10em;
  text-transform:uppercase; padding:1px 6px; border-radius:2px; margin-bottom:5px;
}
.mann-side-eng-status.active    { color:var(--green); background:rgba(95,228,180,0.10); border:1px solid rgba(95,228,180,0.30); }
.mann-side-eng-status.proposed  { color:var(--cyan);  background:rgba(0,200,200,0.08);  border:1px solid rgba(0,200,200,0.30); }
.mann-side-eng-status.delivered { color:var(--white-dim); background:rgba(255,255,255,0.04); border:1px solid var(--border-light); }
.mann-side-eng-leads { font-size:0.7rem; color:var(--white-muted); line-height:1.45; margin-bottom:3px; }
.mann-side-eng-meta {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9.5px; color:var(--white-dim); letter-spacing:0.04em;
}
.mann-side-focus-header {
  font-family:SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:9.5px; font-weight:700; color:var(--cyan);
  letter-spacing:0.14em; text-transform:uppercase; margin-bottom:4px;
}
.mann-side-focus-subtitle { font-size:0.72rem; color:var(--white-muted); margin-bottom:10px; line-height:1.4; }
.mann-card.is-focused {
  border-color:rgba(0,200,200,0.55) !important;
  box-shadow:0 0 0 1px rgba(0,200,200,0.25), 0 6px 18px rgba(0,0,0,0.35);
}
.mann-entry { cursor:pointer; }

/* Team page — Puna staff only. Same show/hide pattern as the other
   full-page views. Always overrides everything else when active. */
#team-page {
  display: none;
  flex: 1;
  flex-direction: column;
  background: rgba(6, 15, 29, 0.6);
  border-left: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white-muted);
  overflow-y: auto;
  padding: 2rem 2.4rem 3rem;
}
body.view-team #team-page    { display: flex !important; }
body.view-team #mw           { display: none !important; }
body.view-team #right-panel  { display: none !important; }
body.view-team #db-panel     { display: none !important; }
body.view-team #wl-panel     { display: none !important; }
body.view-team #dr-page      { display: none !important; }
body.view-team #mr-page      { display: none !important; }
body.view-team #screener-page{ display: none !important; }
body.view-team #profile-page { display: none !important; }
body.view-team #vault-page   { display: none !important; }
body.view-explorer  #team-page { display: none !important; }
body.view-database  #team-page { display: none !important; }
body.view-watchlist #team-page { display: none !important; }
body.view-datarooms #team-page { display: none !important; }
body.view-screener  #team-page { display: none !important; }
body.view-mineroom  #team-page { display: none !important; }
body.view-vault     #team-page { display: none !important; }

/* Vault view — investor-facing private file workspace. */
#vault-page {
  display: none;
  flex: 1;
  flex-direction: column;
  background: rgba(6, 15, 29, 0.6);
  border-left: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white-muted);
  overflow-y: auto;
  /* Padding matches .drx-main (Data Rooms) so the two pages share
     a rhythm. Was 2.6rem 2.4rem 3rem; tightened 2026-05-07. */
  padding: 22px 28px 60px;
}
body.view-vault #vault-page    { display: flex !important; }
body.view-vault #mw            { display: none !important; }
body.view-vault #right-panel   { display: none !important; }
body.view-vault #db-panel      { display: none !important; }
body.view-vault #wl-panel      { display: none !important; }
body.view-vault #dr-page       { display: none !important; }
body.view-vault #mr-page       { display: none !important; }
body.view-vault #screener-page { display: none !important; }
body.view-vault #team-page     { display: none !important; }
body.view-vault #profile-page  { display: none !important; }
body.view-explorer  #vault-page { display: none !important; }
body.view-database  #vault-page { display: none !important; }

/* Screener intro hint + Top picks hero strip retired 2026-05-05 — the
   Ask Puna bar narrates the page's read on arrival, so the editorial
   intro and the RANK 1/2/3 hero cards are redundant. Markup preserved
   so any handlers that still target #scr-intro-hint / #scr-topPicks
   stay valid; visibility controlled here. */
body.view-screener #scr-intro-hint,
body.view-screener #scr-topPicks { display: none !important; }

/* Allocator profile promoted to the top of the Screener rail (Country
   chips drop to second, Weights stay third). Per Clint 2026-05-05:
   the profile is the single biggest input — selecting it pre-loads
   the weights, so it should be the first thing the eye lands on.
   Specificity matches the existing `.right-rail .control-panel` rule
   to override its display:block with flex. */
body.view-screener .right-rail .control-panel {
  display: flex !important;
  flex-direction: column;
}
body.view-screener .right-rail .control-panel .panel-section:nth-child(1) { order: 2; } /* Country */
body.view-screener .right-rail .control-panel .panel-section:nth-child(2) { order: 1; } /* Allocator */
body.view-screener .right-rail .control-panel .panel-section:nth-child(3) { order: 3; } /* Weights */
body.view-watchlist #vault-page { display: none !important; }
body.view-datarooms #vault-page { display: none !important; }
body.view-screener  #vault-page { display: none !important; }
body.view-mineroom  #vault-page { display: none !important; }
body.view-team      #vault-page { display: none !important; }
body.view-profile   #vault-page { display: none !important; }

/* ===== F-VAULT-PROJECT · dedicated project page surface ===== */
#vault-project-page {
  display: none;
  flex: 1;
  flex-direction: column;
  /* Bottom padding sized to clear the fixed Puna bar at the foot of
     the viewport (~80px tall when expanded) plus breathing room.
     Without this the unified Puna Agent · Research & Synthesis card
     gets occluded by the wise-adviser two-liner. 2026-05-07. */
  padding: 0 28px 140px;
  background: var(--navy);
  overflow-y: auto;
  /* BL-034 (WALK-06, layout half) — mirror the website main column's own
     overflow guard (shared module .main { min-width: 0 }). Without it this
     flex item's default min-width:auto lets wide content force it past its
     share and under the right panel (the explorer-origin case keeps
     #right-panel visible). overflow-x clamps any stray wide child for the
     same reason. */
  min-width: 0;
  overflow-x: hidden;
}
/* BL-034 (layout half) — centre-constrain the app project page to the
   website project page's canonical content cap (1100px — the shared
   module's own value for its deep sections), so the app page reads as a
   centred column like the website's, not a full-bleed sprawl. */
.vault-project-topbar,
#vault-project-body {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
body.view-vault-project #vault-project-page { display: flex !important; }
body.view-vault-project #vault-page         { display: none !important; }
body.view-vault-project #mw                 { display: none !important; }
/* 2026-05-07 — keep #right-panel visible when the project page opens
   from the Virtual Explorer (origin='explorer' adds view-explorer to
   body alongside view-vault-project). The deposit Owners panel needs
   to stay so the user can click other owners. From any non-explorer
   origin, #right-panel is hidden as before. */
body.view-vault-project:not(.view-explorer) #right-panel { display: none !important; }
body.view-vault-project #db-panel           { display: none !important; }
body.view-vault-project #wl-panel           { display: none !important; }
body.view-vault-project #dr-page            { display: none !important; }
body.view-vault-project #mr-page            { display: none !important; }
body.view-vault-project #screener-page      { display: none !important; }
body.view-vault-project #team-page          { display: none !important; }
body.view-vault-project #profile-page       { display: none !important; }
/* 2026-05-07 — :not(.view-vault-project) so these hide rules don't
   override the show rule when both classes are present on body. We
   keep the source view-X class on body when the project page opens
   (so the right rail keeps showing originating content, e.g. Data
   Rooms catalog), and the show rule must win in that case. */
body.view-explorer:not(.view-vault-project)  #vault-project-page { display: none !important; }
body.view-database:not(.view-vault-project)  #vault-project-page { display: none !important; }
body.view-watchlist:not(.view-vault-project) #vault-project-page { display: none !important; }
body.view-datarooms:not(.view-vault-project) #vault-project-page { display: none !important; }
body.view-screener:not(.view-vault-project)  #vault-project-page { display: none !important; }
body.view-mineroom:not(.view-vault-project)  #vault-project-page { display: none !important; }
body.view-team:not(.view-vault-project)      #vault-project-page { display: none !important; }
body.view-vault:not(.view-vault-project)     #vault-project-page { display: none !important; }
body.view-profile:not(.view-vault-project)   #vault-project-page { display: none !important; }

.vault-project-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 18px 0 14px;
  position: sticky;
  top: 0;
  background: var(--navy);
  z-index: 4;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.1rem;
}
.vault-project-back {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--white-muted);
  border-radius: 4px;
  padding: 0.5rem 0.95rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.vault-project-back:hover { color: var(--cyan); border-color: var(--cyan); }
.vault-project-topbar-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--white-dim);
  text-transform: uppercase;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
/* 2026-05-07 — origin-aware action button in the project-page topbar.
   Replaces the operator·country meta text with one of: Pin to Vault,
   Request access, Add to watchlist (depending on PUNA_PROJECT_PAGE_ORIGIN). */
.vault-project-action {
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  border-radius: 4px;
  padding: 0.5rem 0.95rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: none;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.vault-project-action:hover {
  background: rgba(0, 200, 200, 0.08);
  color: var(--cyan-bright);
  border-color: var(--cyan-bright);
}
/* 2026-05-07 — .is-primary inverts the inverse style: cyan-filled
   button with navy-deep text. Used on the Request access button on
   project pages opened from the Data Rooms catalog so the primary
   intent (request) reads as a primary action, not a secondary
   outline. */
.vault-project-action.is-primary {
  background: var(--cyan);
  color: var(--navy-deep);
  border-color: var(--cyan);
  font-weight: 600;
}
.vault-project-action.is-primary:hover {
  background: var(--cyan-bright);
  color: var(--navy-deep);
  border-color: var(--cyan-bright);
}
.vault-project-action.is-on {
  color: var(--warm);
  border-color: var(--warm);
}
.vault-project-action.is-on:hover {
  background: rgba(255, 180, 90, 0.08);
}
.vault-project-action.is-disabled,
.vault-project-action[disabled] {
  border-color: var(--border-light);
  color: var(--white-dim);
  cursor: not-allowed;
  opacity: 0.65;
}
.vault-project-action.is-disabled:hover,
.vault-project-action[disabled]:hover {
  background: transparent;
  color: var(--white-dim);
  border-color: var(--border-light);
}
#vault-project-body { display: flex; flex-direction: column; }

/* Vault page head — mirrors .drx-main-head (Data Rooms) so both
   pages read as one product. Title left, mono meta count right,
   no border below (let the search row carry the visual separator). */
.vault-hero {
  max-width: 1200px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 14px;
  flex: 0 0 auto;
}
.vault-hero-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.vault-hero-title {
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  letter-spacing: 0;
}
.vault-hero-sub {
  /* Long subtitle was retired 2026-05-07 — the rail coach card now
     carries the "what is the Vault" framing. Element kept (display:
     none) so vaultRender's writes to #vault-hero-sub stay harmless. */
  display: none !important;
}
.vault-hero-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
  white-space: nowrap;
}
.vault-privacy-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0, 200, 200, 0.06);
  border: 1px solid rgba(0, 200, 200, 0.30);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--white-muted);
}
.vault-privacy-banner.is-shared {
  background: rgba(232, 168, 56, 0.06);
  border-color: rgba(232, 168, 56, 0.40);
  color: #e8a838;
}
.vault-privacy-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 229, 229, 0.6);
}
.vault-privacy-banner.is-shared .vault-privacy-dot {
  background: #e8a838;
  box-shadow: 0 0 6px rgba(232, 168, 56, 0.6);
}

/* Inside the explainer toggle bar, the pill sits next to the chevron
   on the right edge. Slightly tighter padding to match the bar height. */
.dr-intro-toggle .vault-privacy-banner {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 10.5px;
  letter-spacing: 0.3px;
}

.vault-statusbar { max-width: 1200px; flex: 0 0 auto; }
/* The explainer card lives on Vault + Data Rooms with both
   .vault-statusbar (1200px) and .mr-intro-card (1080px in Mineroom).
   Without this override, source order picks 1080px and the explainer
   ends up ~120px shorter than the ask bar below it. Compound-class
   specificity wins cleanly here without touching the Mineroom default. */
.vault-statusbar.mr-intro-card { max-width: 1200px; }

/* Puna Analyst row on Vault — same bar as Data Rooms, sized to match
   the page's max-width container. */
.vault-analyst-row {
  max-width: 1200px;
  margin-bottom: 1rem;
  flex: 0 0 auto;
}
.vault-analyst-row .drh-analyst-bar { margin-left: 0; width: 100%; }

/* Vault analyst result panel — same chrome as the dr-page version
   but constrained to the page width and given consistent spacing. */
.vault-analyst-result {
  max-width: 1200px;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  flex: 0 0 auto;
  position: relative;
}

.vault-section { max-width: 1200px; margin: 0.8rem 0; }
/* Rail eyebrow values aligned to .drx-section-label (Data Rooms) so
   both pages share one rail vocabulary. Was 0.6rem cyan; now 0.55rem
   white-dim with a white-bright count span. 2026-05-07. */
.vault-section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 5px;
}
.vault-section-count { color: var(--white); font-weight: 600; }
.vault-section-count::before { content: ' · '; color: var(--white-dim); font-weight: 500; }

.vault-quick-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}
.vault-quick-card {
  border: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.55);
  border-radius: 6px;
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.vault-quick-card:hover { border-color: var(--cyan); background: rgba(0,200,200,0.05); }
.vault-quick-card.active { border-color: var(--cyan); background: rgba(0,200,200,0.07); }
.vault-quick-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.2rem;
}
.vault-quick-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--white-dim);
  text-transform: uppercase;
}
.vault-quick-share {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--white-dim);
  margin-left: 0.4rem;
}
.vault-quick-share.is-shared {
  color: #e8a838;
  border-color: rgba(232, 168, 56, 0.4);
  background: rgba(232, 168, 56, 0.05);
}

.vault-active-pane {
  /* No outer box — the hero owns its own cyan frame, so wrapping it
     in another faint border + dark fill was redundant chrome.  Just
     a width cap and a bit of breathing room from the section head. */
  max-width: 1200px;
  margin-top: 0.85rem;
}
.vault-active-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0.9rem;
}
.vault-active-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
}
.vault-active-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 0.2rem;
}
.vault-active-l { flex: 1; }
.vault-active-r { display: flex; gap: 0.5rem; align-items: center; }

.vault-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 0.9rem;
  max-width: 560px;
}
.vault-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.vault-toggle-slider {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--border);
  border-radius: 22px;
  transition: background 0.18s, border-color 0.18s;
  margin-top: 1px;
}
.vault-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--white-muted);
  border-radius: 50%;
  transition: transform 0.18s, background 0.18s;
}
.vault-toggle input:checked + .vault-toggle-slider {
  background: rgba(232, 168, 56, 0.30);
  border-color: #e8a838;
}
.vault-toggle input:checked + .vault-toggle-slider::after {
  transform: translateX(16px);
  background: #e8a838;
}
.vault-toggle-text { display: flex; flex-direction: column; gap: 3px; }
.vault-toggle-text strong { font-size: 12.5px; color: var(--white); font-weight: 600; }
.vault-toggle-text small { font-size: 11px; color: var(--white-dim); line-height: 1.45; }

/* Compact inline toggle — sits in the project pane header next to the
   Remove button. Just the slider + a label, with a tooltip carrying
   the longer state explanation. */
.vault-toggle-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  user-select: none;
  font-size: 0.78rem;
  color: var(--white-muted);
  transition: border-color 0.12s, background 0.12s;
}
.vault-toggle-mini:hover { border-color: var(--white-dim); }
.vault-toggle-mini input { position: absolute; opacity: 0; pointer-events: none; }
.vault-toggle-mini-slider {
  position: relative;
  width: 28px; height: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border);
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}
.vault-toggle-mini-slider::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--white-muted);
  transition: transform 0.18s, background 0.18s;
}
.vault-toggle-mini input:checked + .vault-toggle-mini-slider {
  background: rgba(232, 168, 56, 0.30);
  border-color: #e8a838;
}
.vault-toggle-mini input:checked + .vault-toggle-mini-slider::after {
  transform: translateX(12px);
  background: #e8a838;
}
.vault-toggle-mini input:checked ~ .vault-toggle-mini-text { color: #e8a838; }
.vault-toggle-mini-text { white-space: nowrap; }

.vault-doc-list {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin-bottom: 0.7rem;
}
.vault-doc {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.025);
}
.vault-doc:hover { background: rgba(0, 200, 200, 0.05); }
.vault-doc-name { flex: 1; font-size: 0.82rem; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-doc-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--white-dim);
}
.vault-doc-open {
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: 0.66rem;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
}
.vault-doc-open:hover { background: var(--cyan); color: var(--navy-deep); }
.vault-doc-del {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white-dim);
  width: 22px; height: 22px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}
.vault-doc-del:hover { color: rgba(255,140,140,0.9); border-color: rgba(255,140,140,0.5); }

.vault-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1.6rem 1.2rem;
  border: 2px dashed var(--border);
  border-radius: 8px;
  color: var(--white-dim);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  text-align: center;
}
.vault-upload-zone:hover, .vault-upload-zone.dragover {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.04);
  color: var(--cyan);
}
/* Compact variant: when files already exist, the dropzone shrinks to
   a thin inline row so the list of files becomes the focus. */
.vault-upload-zone.is-compact {
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-width: 1px;
  text-align: left;
  font-size: 0.8rem;
}
.vault-upload-zone-icon {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--white-dim);
  transition: color 0.12s;
}
.vault-upload-zone:hover .vault-upload-zone-icon { color: var(--cyan); }
.vault-upload-zone-icon-sm {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--white-dim);
  transition: color 0.12s;
}
.vault-upload-zone.is-compact:hover .vault-upload-zone-icon-sm { color: var(--cyan); }
.vault-upload-zone-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.005em;
}
.vault-upload-zone-title-sm {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--white-dim);
}
.vault-upload-zone.is-compact:hover .vault-upload-zone-title-sm { color: var(--cyan); }
.vault-upload-zone-sub {
  font-size: 0.78rem;
  color: var(--white-dim);
}

.vault-empty {
  max-width: 600px;
  margin: 1.2rem 0;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
  color: var(--white-dim);
}
.vault-empty p { margin: 0 0 0.7rem; font-size: 0.95rem; color: var(--white-muted); }

.vault-remove-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white-dim);
  font-size: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
}
.vault-remove-btn:hover { color: rgba(255,140,140,0.9); border-color: rgba(255,140,140,0.5); }

/* All-projects grid on the Vault page — search row + chip row above
   the grid, mirroring the Data Rooms catalog (.drx-toolbar / .drx-chips
   / .drx-search). 2026-05-07: replaced the segmented .vault-grid-tools
   strip with this clean toolbar pattern so Vault and Data Rooms share
   one rhythm. .vault-grid-tools is kept (display:contents fallback) so
   any cached templates that still wrap children in it don't break the
   inline layout. */
.vault-grid-tools { display: contents; }
.vault-toolbar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
  max-width: 1200px;
}
.vault-search {
  flex: 1;
  background: rgba(8, 18, 33, 0.94);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 14px 14px;
  border: 1px solid var(--border-light);
  color: var(--white);
  font-family: inherit;
  font-size: 0.92rem;
  padding: 10px 16px 10px 38px;
  border-radius: 6px; outline: none;
  height: 40px;
  transition: border-color 0.15s, background-color 0.15s;
}
.vault-search:hover { border-color: rgba(255, 255, 255, 0.20); }
.vault-search:focus {
  border-color: var(--cyan);
  background-color: rgba(0, 200, 200, 0.04);
  box-shadow: 0 0 0 1px rgba(0, 200, 200, 0.18);
}
.vault-search::placeholder { color: var(--white-dim); }
.vault-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px;
  max-width: 1200px;
}
.vault-chip {
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  color: var(--white-muted);
  font-family: inherit;
  font-size: 0.74rem;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
}
.vault-chip:hover { background: rgba(0, 200, 200, 0.04); border-color: rgba(0, 200, 200, 0.35); color: var(--white); }
.vault-chip.is-on { background: rgba(0, 200, 200, 0.14); border-color: var(--cyan); color: var(--cyan-bright); }
/* Legacy classes kept hidden so renderers that still write to them
   don't surface stray UI. They are referenced by id in JS but are now
   no-op visual elements. */
.vault-grid-eyebrow,
.vault-grid-count,
.vault-grid-search { /* legacy compound id used as the search input — see .vault-search above for the real styling */ }
.vault-grid-eyebrow,
.vault-grid-count { display: none !important; }
.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.7rem;
}

/* ============================================================
   2026-05-07 — Vault Concept C primitives. Top half of the page
   is a portfolio scoreboard (one card per pinned project, dense
   tiles with file count + Puna state + verdict + comparison
   glyph). Bottom half is the active-project workbench (files
   left, Puna brief + comparison detail right). Rail carries the
   catalog browser + Ask Puna input. The dedicated #/project/<id>
   deep page chrome is unchanged.
   ============================================================ */

/* Scoreboard ------------------------------------------------ */
.vault-scoreboard-section { max-width: 1200px; margin-bottom: 18px; }
.vault-scoreboard-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
/* 2026-05-10 — Vault redesign per Clint: portfolio scoreboard moves
   from a grid of large pinned-project cards to a compact horizontal
   carousel sitting above the active "main folder" card (workbench).
   Each tile is a small left-thumb + name/operator/file-count row.
   The active tile gets a cyan border; clicking another tile slides
   it into focus and the workbench below repaints. See AI_BUGS_PLAYBOOK
   entry "Vault portfolio refactor: grid → carousel (2026-05-10)". */
.vault-scoreboard {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 200, 200, 0.25) transparent;
}
.vault-scoreboard::-webkit-scrollbar { height: 6px; }
.vault-scoreboard::-webkit-scrollbar-track { background: transparent; }
.vault-scoreboard::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
}
.vault-scoreboard::-webkit-scrollbar-thumb:hover { background: rgba(0, 200, 200, 0.35); }
.vault-scoreboard-loading,
.vault-scoreboard-empty {
  flex: 1 1 auto;
  padding: 24px 24px;
  text-align: center;
  color: var(--white-dim);
  font-size: 0.85rem;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 8px;
}
.vault-scoreboard-empty strong { color: var(--white); display: block; margin-bottom: 6px; font-weight: 600; }

.vault-score-card {
  /* Compact horizontal tile: thumb left, body right. Fixed width
     so the carousel scrolls predictably and the active tile can
     scrollIntoView with a stable target. */
  display: flex; flex-direction: row; align-items: stretch;
  flex: 0 0 240px;
  width: 240px;
  height: 64px;
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  scroll-snap-align: start;
}
.vault-score-card:hover {
  border-color: rgba(0, 200, 200, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.vault-score-card.is-active {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.06);
  box-shadow: 0 0 0 1px rgba(0, 200, 200, 0.45);
}
.vault-score-card-img {
  flex: 0 0 76px;
  width: 76px;
  height: 100%;
  background-size: cover; background-position: center;
  position: relative;
  border-bottom: none;
  border-right: 1px solid var(--border-light);
}
.vault-score-card-img::after { display: none; }
/* Stage chip / verdict / vs-peers glyph were the meatiest parts of
   the old large-card design. Compact carousel mode hides them — that
   detail belongs on the active workbench card below, not on every
   tile. CSS-only hide keeps the JS render path unchanged for now;
   full deletion is a follow-on cleanup. */
.vault-score-card-stage { display: none !important; }
.vault-score-card-verdict { display: none !important; }
.vault-score-card-glyph { display: none !important; }

.vault-score-card-body {
  padding: 8px 11px;
  display: flex; flex-direction: column; gap: 2px; flex: 1;
  justify-content: center;
  min-width: 0;          /* enables ellipsis on children */
}
.vault-score-card-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vault-score-card-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: var(--white-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-score-card-stats {
  display: flex; gap: 6px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 2px;
}
.vault-score-card-stats .files { color: var(--white-muted); }
.vault-score-card-stats .puna-on  { color: var(--cyan); }
.vault-score-card-stats .puna-off { color: var(--white-dim); }
.vault-score-card-stats .sep { color: var(--white-dim); opacity: 0.4; }
.vault-score-card-verdict {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--white-muted);
  line-height: 1.35;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vault-score-card-verdict.is-cta {
  font-style: normal;
  color: var(--cyan);
}
.vault-score-card-glyph {
  display: flex; align-items: center; gap: 4px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.vault-score-card-glyph .puna-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.45rem; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--white-dim);
  margin-right: auto;
}
.vault-cmp-bar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 2px;
  font-size: 0.65rem; line-height: 1;
}
.vault-cmp-bar.up   { background: rgba(95, 228, 180, 0.18);  color: #5fe4b4; }
.vault-cmp-bar.mid  { background: rgba(255, 255, 255, 0.06); color: var(--white-dim); }
.vault-cmp-bar.down { background: rgba(232, 168, 56, 0.16);  color: var(--warm); }
.vault-cmp-bar.na   { background: transparent; color: var(--white-dim); opacity: 0.4; }

/* Workbench ------------------------------------------------- */
.vault-workbench { max-width: 1200px; margin-bottom: 24px; }
.vault-workbench-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
/* .vault-workbench-open retired 2026-05-07 — primary "Open full
   project page" CTA moved into the right pane (.vault-data-open).
   Selectors kept for any cached markup that may still reference
   them; rule reduced to display:none. */
.vault-workbench-open { display: none !important; }
/* 2026-05-07 — × Remove from vault, top-right of the workbench
   head. Quiet by default; warm-orange hover so destructive intent
   is signalled without competing with the primary CTAs below. */
.vault-workbench-remove {
  background: transparent;
  border: 0;
  color: var(--white-dim);
  font-family: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.12s;
}
.vault-workbench-remove:hover { color: rgba(255, 140, 140, 0.9); }
.vault-workbench-body {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
}
@media (max-width: 920px) {
  .vault-workbench-body { grid-template-columns: 1fr; }
}
.vault-workbench-files,
.vault-workbench-brief {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.vault-workbench-files-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.vault-workbench-files-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
}
.vault-workbench-files-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--white-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 3px;
}
/* 2026-05-07 — Workbench files panel image retired. The image
   element is no longer rendered (the drop zone is the protagonist
   now); keeping the rules for any cached markup that may still
   reference them. Safe to remove in a future cleanup pass. */
.vault-workbench-files-img { display: none; }

/* Big drop zone — the file panel is now ALL drop. Bigger target,
   bigger copy, bigger icon. The compact .vault-upload-zone above
   is preserved for legacy call sites; this -big variant is workbench-
   exclusive. */
.vault-upload-zone-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 28px 20px;
  border: 1.5px dashed rgba(0, 200, 200, 0.32);
  border-radius: 6px;
  background: rgba(0, 200, 200, 0.04);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
}
.vault-upload-zone-big:hover {
  background: rgba(0, 200, 200, 0.08);
  border-color: var(--cyan);
}
.vault-upload-zone-icon-big {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 200, 200, 0.14);
  color: var(--cyan);
  border-radius: 50%;
  font-size: 1.25rem;
}
.vault-upload-zone-title-big {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
}
.vault-upload-zone-sub-big {
  font-size: 0.78rem;
  color: var(--white-muted);
  line-height: 1.4;
  max-width: 36ch;
}

/* Data sheet (right pane) ---------------------------------- */
.vault-workbench-data {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.vault-data-head {
  display: flex; flex-direction: column; gap: 2px;
}
.vault-data-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
}
.vault-data-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.vault-data-sheet {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(11, 26, 46, 0.55);
  overflow: hidden;
}
.vault-data-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.vault-data-row:last-child { border-bottom: 0; }
.vault-data-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.vault-data-val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--white-muted);
  line-height: 1.4;
  flex-wrap: wrap;
  min-width: 0;
}
.vault-data-val strong { color: var(--white); font-weight: 600; }
.vault-data-val .vault-cmp-bar { flex-shrink: 0; }
.vault-data-sub {
  color: var(--white-dim);
  font-weight: 400;
}
.vault-data-empty { color: var(--white-dim); font-style: italic; }
.vault-data-enrich {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0, 200, 200, 0.10);
  padding: 2px 6px;
  border-radius: 2px;
}

/* Prominent Open full project page button — the primary CTA in
   the data pane. Big, cyan, deliberate. */
.vault-data-open {
  width: 100%;
  background: var(--cyan);
  color: var(--navy-deep);
  border: 1px solid var(--cyan);
  border-radius: 5px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.vault-data-open:hover { background: var(--cyan-bright); border-color: var(--cyan-bright); }
/* Variant — the same Open CTA, placed in the files pane below the
   drop zone (2026-05-07 move per Clint). Same styling, tighter top
   margin so it sits flush under any file list. */
.vault-files-open { margin-top: 4px; }

/* .vault-data-remove + .vault-data-brief* retired 2026-05-07 per
   Clint. Remove control moved to the workbench head; brief block
   deleted (lives on the dedicated project page). Stubs kept hidden
   so any cached markup that still references them doesn't surface
   visually. */
.vault-data-remove,
.vault-data-brief { display: none !important; }
.vault-workbench-cmp {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: rgba(0, 200, 200, 0.04);
  border: 1px solid rgba(0, 200, 200, 0.18);
  border-radius: 5px;
}
.vault-workbench-cmp-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 4px;
}
.vault-cmp-row {
  display: grid;
  grid-template-columns: 110px 24px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 0.74rem;
  color: var(--white-muted);
  line-height: 1.35;
}
.vault-cmp-row .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.vault-cmp-row .detail strong { color: var(--white); font-weight: 600; }

/* Rail catalog --------------------------------------------- */
.vault-rail-catalog { display: none; }
body.view-vault .right-rail .vault-rail-catalog {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 14px;
}
.vault-rail-catalog-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.vault-rail-search {
  background: rgba(8, 18, 33, 0.94);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 12px 12px;
  border: 1px solid var(--border-light);
  color: var(--white);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 7px 10px 7px 28px;
  border-radius: 5px; outline: none;
  height: 32px;
  margin-bottom: 6px;
  transition: border-color 0.15s, background-color 0.15s;
}
.vault-rail-search:hover { border-color: rgba(255, 255, 255, 0.20); }
.vault-rail-search:focus {
  border-color: var(--cyan);
  background-color: rgba(0, 200, 200, 0.04);
}
.vault-rail-search::placeholder { color: var(--white-dim); }
.vault-rail-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 8px;
}
.vault-rail-chip {
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  color: var(--white-muted);
  font-family: inherit;
  font-size: 0.62rem;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
}
.vault-rail-chip:hover { background: rgba(0, 200, 200, 0.04); border-color: rgba(0, 200, 200, 0.35); color: var(--white); }
.vault-rail-chip.is-on { background: rgba(0, 200, 200, 0.14); border-color: var(--cyan); color: var(--cyan-bright); }
.vault-rail-catalog-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  margin-bottom: 8px;
}
.vault-rail-catalog-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.12s;
}
.vault-rail-catalog-row:last-child { border-bottom: 0; }
.vault-rail-catalog-row:hover { background: rgba(0, 200, 200, 0.04); }
.vault-rail-catalog-row.is-pinned { background: rgba(0, 200, 200, 0.05); }
.vault-rail-catalog-row .star {
  width: 14px; flex-shrink: 0;
  color: var(--white-dim);
  font-size: 0.7rem;
  text-align: center;
}
.vault-rail-catalog-row.is-pinned .star { color: var(--cyan); }
.vault-rail-catalog-row .body { flex: 1; min-width: 0; }
.vault-rail-catalog-row .name {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.vault-rail-catalog-row .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  color: var(--white-dim);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-rail-catalog-row.is-pinned .meta { color: var(--cyan); }
.vault-rail-catalog-empty {
  padding: 14px 8px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--white-dim);
}
.vault-rail-add {
  background: transparent;
  border: 1px dashed rgba(0, 200, 200, 0.4);
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 4px; cursor: pointer;
  transition: all 0.12s;
}
.vault-rail-add:hover { border-color: var(--cyan); background: rgba(0, 200, 200, 0.06); color: var(--cyan-bright); }

/* Rail Ask Puna styles deleted 2026-05-07 — surface retired in
   favour of the global Puna bar. */

/* Global Puna toggle banner -------------------------------- */
/* One flip covers every file in the vault. OFF (default) reads
   loud — the user has private data and needs to make a deliberate
   choice. ON reads quiet — confirmation that access is granted. */
.vault-puna-banner {
  max-width: 1200px;
  margin: 0 0 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(232, 168, 56, 0.04);
  border: 1px solid rgba(232, 168, 56, 0.32);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.vault-puna-banner:hover {
  background: rgba(232, 168, 56, 0.08);
  border-color: rgba(232, 168, 56, 0.55);
}
.vault-puna-banner.is-on {
  background: rgba(0, 200, 200, 0.04);
  border-color: rgba(0, 200, 200, 0.32);
}
.vault-puna-banner.is-on:hover {
  background: rgba(0, 200, 200, 0.08);
  border-color: var(--cyan);
}
.vault-puna-banner-dot {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 8px rgba(232, 168, 56, 0.55);
}
.vault-puna-banner.is-on .vault-puna-banner-dot {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 229, 229, 0.55);
}
.vault-puna-banner-text {
  flex: 1;
  font-size: 0.82rem;
  color: var(--white-muted);
  line-height: 1.4;
  min-width: 0;
}
.vault-puna-banner-text strong { color: var(--white); font-weight: 600; }
.vault-puna-banner-action {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--warm);
}
.vault-puna-banner.is-on .vault-puna-banner-action { color: var(--cyan); }

/* Bulk drop zone ------------------------------------------- */
/* Compact always-on strip above the scoreboard. Adapts to a
   larger empty-state hero when the user has no pinned projects.
   2026-05-07 — Phase 1 of the auto-routing feature. */
.vault-bulk-drop {
  max-width: 1200px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(0, 200, 200, 0.04);
  border: 1px dashed rgba(0, 200, 200, 0.32);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.vault-bulk-drop:hover,
.vault-bulk-drop.is-dragging {
  background: rgba(0, 200, 200, 0.08);
  border-color: var(--cyan);
}
.vault-bulk-drop.is-hero {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 56px 32px 48px;
  margin-top: 8px;
  margin-bottom: 24px;
  border-style: dashed;
  border-width: 1.5px;
}
.vault-bulk-drop-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 200, 200, 0.14);
  color: var(--cyan);
  border-radius: 50%;
  font-size: 1.1rem;
}
.vault-bulk-drop.is-hero .vault-bulk-drop-icon {
  width: 60px; height: 60px;
  font-size: 1.6rem;
}
.vault-bulk-drop-text {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.vault-bulk-drop.is-hero .vault-bulk-drop-text {
  align-items: center;
  text-align: center;
}
.vault-bulk-drop-title {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
}
.vault-bulk-drop.is-hero .vault-bulk-drop-title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.vault-bulk-drop-sub {
  font-size: 0.74rem;
  color: var(--white-muted);
  line-height: 1.45;
}
.vault-bulk-drop.is-hero .vault-bulk-drop-sub {
  font-size: 0.9rem;
  color: var(--white-muted);
  max-width: 60ch;
}
.vault-bulk-drop-browse {
  flex: 0 0 auto;
  background: var(--cyan);
  color: var(--navy-deep);
  border: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.vault-bulk-drop-browse:hover { background: var(--cyan-bright); }
.vault-bulk-drop.is-hero .vault-bulk-drop-browse { padding: 11px 22px; font-size: 0.7rem; }

/* Routing modal -------------------------------------------- */
.vault-route-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9100;
}
.vault-route-modal.open { display: flex; }
.vault-route-backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 8, 18, 0.85);
  backdrop-filter: blur(4px);
}
.vault-route-card {
  position: relative;
  width: min(720px, 96vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--navy-deep);
  border: 1px solid rgba(0, 200, 200, 0.45);
  border-radius: 8px;
  padding: 24px 28px 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7),
              0 0 32px rgba(0, 200, 200, 0.18);
}
.vault-route-close {
  position: absolute;
  top: 10px; right: 14px;
  background: none; border: none;
  color: var(--white-dim);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.vault-route-close:hover { color: var(--white); }
.vault-route-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
}
.vault-route-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 8px;
  line-height: 1.25;
}
.vault-route-blurb {
  font-size: 0.85rem;
  color: var(--white-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}
.vault-route-rows {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding-right: 4px;
  margin-bottom: 16px;
}
.vault-route-row {
  border: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.55);
  border-radius: 5px;
  padding: 10px 12px;
}
.vault-route-row-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.vault-route-row-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-route-row-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white-dim);
  white-space: nowrap;
}
.vault-route-row-meta .num { color: var(--cyan); font-weight: 600; }
.vault-route-row-search {
  width: 100%;
  background: rgba(8, 18, 33, 0.94);
  border: 1px solid var(--border-light);
  color: var(--white);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 6px 10px;
  border-radius: 4px;
  outline: none;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.vault-route-row-search:focus {
  border-color: var(--cyan);
  background-color: rgba(0, 200, 200, 0.04);
}
.vault-route-row-list {
  max-height: 180px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(6, 15, 29, 0.6);
}
.vault-route-row-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.12s;
  font-size: 0.75rem;
}
.vault-route-row-item:last-child { border-bottom: 0; }
.vault-route-row-item:hover { background: rgba(0, 200, 200, 0.04); }
.vault-route-row-item.is-checked { background: rgba(0, 200, 200, 0.08); }
.vault-route-row-item.is-suggested .name::after {
  content: 'matched';
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0, 200, 200, 0.14);
  padding: 2px 5px;
  border-radius: 2px;
  margin-left: 6px;
  vertical-align: middle;
}
.vault-route-row-item input[type="checkbox"] {
  accent-color: var(--cyan);
  flex-shrink: 0;
}
.vault-route-row-item .body { flex: 1; min-width: 0; }
.vault-route-row-item .name {
  color: var(--white);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-route-row-item .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: var(--white-dim);
  letter-spacing: 0.05em;
  margin-top: 1px;
}
.vault-route-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.vault-route-confirm {
  flex: 1;
  padding: 11px 18px;
  background: var(--cyan);
  color: var(--navy-deep);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.vault-route-confirm:hover { background: var(--cyan-bright); border-color: var(--cyan-bright); }
.vault-route-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.vault-route-cancel {
  padding: 11px 16px;
  background: transparent;
  color: var(--white-muted);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.vault-route-cancel:hover { color: var(--white); border-color: var(--white-dim); }
.vault-route-progress {
  font-size: 0.78rem;
  color: var(--white-muted);
  line-height: 1.5;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(0, 200, 200, 0.04);
  border: 1px solid rgba(0, 200, 200, 0.18);
  border-radius: 4px;
}
.vault-route-progress.is-error {
  background: rgba(232, 168, 56, 0.06);
  border-color: rgba(232, 168, 56, 0.30);
  color: var(--warm);
}
.vault-grid-loading {
  grid-column: 1 / -1;
  padding: 1rem;
  color: var(--white-dim);
  font-size: 0.82rem;
  text-align: center;
}
.vault-pcard {
  border: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.55);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
}
/* Whole-card hover lifts slightly — but NO global border highlight,
   so the top zone (img + body) and the View button highlight as
   separate, mutually-exclusive affordances. */
.vault-pcard:hover { transform: translateY(-1px); }
.vault-pcard.in-vault { border-color: rgba(0, 200, 200, 0.55); background: rgba(0, 200, 200, 0.04); }

/* Top-zone hover — image + body share the "select this card" click
   target.  Hovering either one tints the body and brightens the image
   border.  :has(...) lets the parent know which child is hovered so
   we can suppress the top-zone highlight while the View button is. */
.vault-pcard.in-vault:has(.vault-pcard-img:hover):not(:has(.vault-pcard-view-wide:hover)) .vault-pcard-body,
.vault-pcard.in-vault:has(.vault-pcard-body:hover):not(:has(.vault-pcard-view-wide:hover)) .vault-pcard-body {
  background: rgba(0, 200, 200, 0.08);
}
.vault-pcard.in-vault:has(.vault-pcard-img:hover):not(:has(.vault-pcard-view-wide:hover)) .vault-pcard-img,
.vault-pcard.in-vault:has(.vault-pcard-body:hover):not(:has(.vault-pcard-view-wide:hover)) .vault-pcard-img {
  box-shadow: inset 0 0 0 1.5px rgba(0, 200, 200, 0.55);
}
/* Fallback for browsers without :has() — at least give the image a
   subtle hover ring. */
@supports not selector(:has(*)) {
  .vault-pcard.in-vault .vault-pcard-img:hover { box-shadow: inset 0 0 0 1.5px rgba(0, 200, 200, 0.55); }
}
.vault-pcard-img {
  height: 110px;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.vault-pcard-stage {
  /* 2026-05-07 — moved bottom-right + adopted Data Rooms' s-* color
     palette so stage reads at-a-glance (production = cyan, construction
     = orange, exploration = green, etc.). Default state retains the
     dark chrome for unbucketed stages. The image's bottom gradient
     darkens the area, so colored chips read cleanly against any
     satellite tile. */
  position: absolute;
  bottom: 6px; right: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(6, 15, 29, 0.85);
  color: var(--white-muted);
  border: 1px solid rgba(255, 255, 255, 0.10);
  z-index: 2;
}
.vault-pcard-stage.s-prod  { background: rgba(0, 200, 200, 0.85);   color: #062020; border-color: rgba(0, 200, 200, 0.85); }
.vault-pcard-stage.s-cons  { background: rgba(220, 110, 60, 0.9);   color: #1f0f06; border-color: rgba(220, 110, 60, 0.9); }
.vault-pcard-stage.s-pfs   { background: rgba(240, 210, 100, 0.85); color: #1f1a06; border-color: rgba(240, 210, 100, 0.85); }
.vault-pcard-stage.s-pea   { background: rgba(180, 200, 80, 0.85);  color: #1a1f06; border-color: rgba(180, 200, 80, 0.85); }
.vault-pcard-stage.s-exp   { background: rgba(116, 174, 90, 0.85);  color: #08160a; border-color: rgba(116, 174, 90, 0.85); }
/* Image gets a bottom-darkening gradient so colored stage chips read
   cleanly against any satellite tile — same trick as .drx-card-img. */
.vault-pcard-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 15, 29, 0.65) 100%);
  pointer-events: none;
}
.vault-pcard-tag {
  position: absolute;
  top: 8px; left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  /* Solid dark backdrop so the cyan text/border read against bright
     satellite tiles (white salt flats) AND dark ones (mountains).
     Slight shadow lifts the chip off the underlying imagery. */
  background: rgba(6, 15, 29, 0.85);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.vault-pcard-body {
  padding: 11px 13px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vault-pcard-name {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
  margin: 0;
}
.vault-pcard-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--white-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2px;
}
/* 2026-05-07 — card footer mirrors .drx-card-foot shape: status row
   on the left (file count + Puna ON/OFF when in-vault), explicit
   "Open →" link on the right. The whole-card click is preserved
   (parent .vault-pcard onclick remains); the footer adds the
   missing per-card affordance signal that today only lives in the
   right-rail hero. Per playbook entry #N+1, the whole-card pattern
   was a deliberate choice — adding an explicit CTA alongside it,
   not replacing it. */
.vault-pcard-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px;
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.10em; text-transform: uppercase;
}
.vault-pcard-foot-l {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--white-dim);
}
.vault-pcard-foot-l .files { color: var(--white-muted); }
.vault-pcard-foot-l .puna-on  { color: var(--cyan); }
.vault-pcard-foot-l .puna-off { color: var(--white-dim); }
.vault-pcard-foot-l .add { color: var(--cyan); letter-spacing: 0.10em; }
.vault-pcard-foot-cta {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--white-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.vault-pcard-foot-cta:hover {
  background: rgba(0, 200, 200, 0.06);
  color: var(--cyan);
  border-color: var(--cyan);
}
.vault-pcard.in-vault .vault-pcard-foot-cta {
  background: rgba(0, 200, 200, 0.10);
  border-color: var(--cyan);
  color: var(--cyan);
}
.vault-pcard.in-vault .vault-pcard-foot-cta:hover {
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan-bright);
}
.vault-pcard-empty {
  grid-column: 1 / -1;
  padding: 1.4rem 1rem;
  text-align: center;
  color: var(--white-dim);
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.vault-pcard-empty > div { font-style: italic; }
.vault-pcard-empty-add {
  appearance: none;
  background: rgba(0, 200, 200, 0.08);
  border: 1px dashed rgba(0, 200, 200, 0.45);
  color: var(--cyan);
  border-radius: 4px;
  padding: 0.5rem 0.95rem;
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  font-style: normal;
  transition: background 0.15s, border-color 0.15s;
}
.vault-pcard-empty-add:hover {
  background: rgba(0, 200, 200, 0.14);
  border-color: var(--cyan);
}
.vault-pcard-empty-add strong { font-weight: 600; }

/* Profile view — same hide-everything-else pattern as Team */
body.view-profile #profile-page  { display: flex !important; }
body.view-profile #mw            { display: none !important; }
body.view-profile #right-panel   { display: none !important; }
body.view-profile #db-panel      { display: none !important; }
body.view-profile #wl-panel      { display: none !important; }
body.view-profile #dr-page       { display: none !important; }
body.view-profile #mr-page       { display: none !important; }
body.view-profile #screener-page { display: none !important; }
body.view-profile #team-page     { display: none !important; }
body.view-explorer  #profile-page { display: none !important; }
body.view-database  #profile-page { display: none !important; }
body.view-watchlist #profile-page { display: none !important; }
body.view-datarooms #profile-page { display: none !important; }
body.view-screener  #profile-page { display: none !important; }
body.view-mineroom  #profile-page { display: none !important; }
body.view-team      #profile-page { display: none !important; }

.team-page-hero {
  max-width: 1200px;
  margin-bottom: 1.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-light);
}
.team-page-title {
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.3rem;
  letter-spacing: -0.015em;
}
.team-page-sub {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--white-dim);
  margin: 0;
}
.team-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  max-width: 1400px;
}
@media (min-width: 900px) {
  .team-page-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1280px) {
  .team-page-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.team-card {
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(0,200,200,0.04) 0%, rgba(0,0,0,0) 70%), rgba(255,255,255,0.012);
  padding: 1.1rem 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.team-card-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.45rem;
}
.team-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 0.6rem;
}
.team-card-body { font-size: 0.82rem; color: var(--white-muted); display: flex; flex-direction: column; gap: 0.2rem; }
.team-card-empty {
  font-size: 0.78rem;
  color: var(--white-dim);
  font-style: italic;
  padding: 0.5rem 0;
}
.team-row {
  display: flex;
  gap: 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border-light);
  align-items: flex-start;
}
.team-row:first-child { border-top: none; padding-top: 0.2rem; }

/* ---------- Agent corrections queue (Team page) ---------- */
.team-corr {
  border-top: 1px solid var(--border-light);
  padding: 14px 0 16px 0;
}
.team-corr:first-child { border-top: none; padding-top: 8px; }
.team-corr-head {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--white-dim);
}
.team-corr-from {
  color: var(--white);
  font-weight: 600;
  font-size: 12px;
}
.team-corr-when, .team-corr-surface {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--white-dim);
  letter-spacing: 0.04em;
}
.team-corr-tag {
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(232, 168, 56, 0.15);
  color: var(--warm, #e8a838);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
}
.team-corr-block {
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--border-light);
}
.team-corr-block.correction {
  border-left-color: var(--cyan);
  background: rgba(0, 200, 200, 0.04);
  padding: 8px 10px;
  border-radius: 0 3px 3px 0;
}
.team-corr-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 3px;
}
.team-corr-lbl.correction { color: var(--cyan-bright); }
.team-corr-text {
  font-size: 13px;
  color: var(--white);
  line-height: 1.5;
}
.team-corr-text.dim { color: var(--white-muted); font-size: 12px; }

/* ---------------------------------------------------------------------
   Subscribers admin pills + per-subscriber history side-panel
   (Tasks 11 + 12 — see _skills/puna-analyst-digest/SKILL.md). Tokens
   match puna/Puna_Design_Guidelines.md § 6 Status pill mapping.
   --------------------------------------------------------------------- */
.team-pill {
  display: inline-block;
  padding: 1.5px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.team-pill-status-active     { background: rgba(78, 203, 113, 0.12); color: var(--green); border-color: rgba(78, 203, 113, 0.28); }
.team-pill-status-unsub      { background: rgba(255, 138, 138, 0.10); color: #ff8a8a; border-color: rgba(255, 138, 138, 0.22); }
.team-pill-source            { background: rgba(0, 200, 200, 0.08); color: var(--cyan); border-color: rgba(0, 200, 200, 0.20); }
.team-pill-run-sent          { background: rgba(78, 203, 113, 0.12); color: var(--green); border-color: rgba(78, 203, 113, 0.28); }
.team-pill-run-feedback      { background: rgba(0, 200, 200, 0.12); color: var(--cyan-bright); border-color: rgba(0, 200, 200, 0.30); }
.team-pill-run-drafted       { background: rgba(255, 255, 255, 0.06); color: var(--white-dim); border-color: var(--border-light); }
.team-pill-run-qafailed      { background: rgba(232, 168, 56, 0.12); color: var(--warm); border-color: rgba(232, 168, 56, 0.28); }
.team-pill-run-bounced       { background: rgba(239, 68, 68, 0.12); color: var(--red); border-color: rgba(239, 68, 68, 0.28); }

.team-row-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.team-row-action-btn {
  background: transparent;
  color: var(--white-muted);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.team-row-action-btn:hover  { color: var(--white); border-color: rgba(255, 255, 255, 0.22); }
.team-row-action-btn.cyan   { color: var(--cyan); border-color: rgba(0, 200, 200, 0.32); }
.team-row-action-btn.cyan:hover { color: var(--cyan-bright); border-color: var(--cyan); }
.team-row-action-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Subscriber history side-panel — slides in from the right, takes
   ~520px, layered above the team page. */
#sub-hist-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(540px, 100vw);
  background: var(--navy);
  border-left: 1px solid var(--border-light);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.45), -1px 0 0 rgba(0, 200, 200, 0.10);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 9100;
  display: flex;
  flex-direction: column;
}
#sub-hist-panel.open { transform: translateX(0); }
#sub-hist-panel .sh-top {
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright), var(--cyan));
}
#sub-hist-panel .sh-head {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border-light);
}
#sub-hist-panel .sh-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cyan);
  margin-bottom: 8px;
  text-transform: uppercase;
}
#sub-hist-panel .sh-h {
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.005em;
  margin: 0 0 4px;
  line-height: 1.3;
  word-break: break-all;
}
#sub-hist-panel .sh-sub {
  font-size: 12.5px;
  color: var(--white-muted);
  line-height: 1.45;
}
#sub-hist-panel .sh-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: 0;
  color: var(--white-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
#sub-hist-panel .sh-close:hover { color: var(--white); background: rgba(255, 255, 255, 0.04); }
#sub-hist-panel .sh-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 24px 28px;
}
#sub-hist-panel .sh-empty {
  font-size: 13px;
  color: var(--white-dim);
  font-style: italic;
  padding: 22px 0;
}
#sub-hist-panel .sh-run {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.012);
  transition: border-color 0.15s ease;
}
#sub-hist-panel .sh-run:hover { border-color: rgba(0, 200, 200, 0.20); }
#sub-hist-panel .sh-run-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
#sub-hist-panel .sh-run-date {
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--white);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#sub-hist-panel .sh-run-watched {
  font-size: 11.5px;
  color: var(--white-dim);
  margin: 4px 0 8px;
}
#sub-hist-panel .sh-run-lead {
  font-size: 13.5px;
  color: var(--white-muted);
  line-height: 1.55;
  margin: 0 0 8px;
}
#sub-hist-panel .sh-run-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
  display: none;
}
#sub-hist-panel .sh-run.expanded .sh-run-detail { display: block; }
#sub-hist-panel .sh-run-detail-h {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan);
  text-transform: uppercase;
  margin: 12px 0 6px;
}
#sub-hist-panel .sh-run-detail-h:first-child { margin-top: 0; }
#sub-hist-panel .sh-run-detail ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--white-muted);
  line-height: 1.55;
}
#sub-hist-panel .sh-run-detail li { margin-bottom: 4px; }
#sub-hist-panel .sh-run-detail .sh-run-failure {
  color: #ff8a8a;
  font-size: 12px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
#sub-hist-panel .sh-run-feedback {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(0, 200, 200, 0.05);
  border-left: 2px solid var(--cyan);
  border-radius: 0 3px 3px 0;
  font-size: 12.5px;
  color: var(--white-muted);
}
#sub-hist-panel .sh-run-toggle {
  background: transparent;
  border: 0;
  color: var(--cyan);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 0;
  cursor: pointer;
  font-family: inherit;
}
#sub-hist-panel .sh-run-toggle:hover { color: var(--cyan-bright); }
#sub-hist-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 15, 29, 0.5);
  backdrop-filter: blur(2px);
  z-index: 9080;
  display: none;
}
#sub-hist-backdrop.open { display: block; animation: lgPageFadeIn 0.25s ease-out; }

.team-corr-form {
  margin: 12px 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}
.team-corr-form-lbl {
  display: block;
  font-size: 11.5px;
  color: var(--white-muted);
  margin-bottom: 6px;
  font-style: italic;
}
.team-corr-fact {
  width: 100%;
  min-height: 60px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 7px 9px;
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
}
.team-corr-fact:focus {
  outline: none;
  border-color: var(--cyan);
}
.team-corr-form-row {
  display: flex; gap: 6px;
  margin-top: 6px;
}
.team-corr-topic, .team-corr-source {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 11.5px;
  font-family: inherit;
}
.team-corr-topic:focus, .team-corr-source:focus {
  outline: none;
  border-color: var(--cyan);
}

.team-corr-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.team-corr-approve {
  background: var(--cyan);
  color: var(--navy-deep);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.team-corr-approve:hover { background: var(--cyan-bright); }
.team-corr-reject, .team-corr-skip {
  background: transparent;
  border: 0.5px solid var(--border-light);
  color: var(--white-muted);
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.team-corr-reject:hover {
  border-color: #c0596d;
  color: #c0596d;
}
.team-corr-skip:hover { border-color: var(--cyan); color: var(--cyan-bright); }
.team-corr-status {
  margin-top: 8px;
  font-size: 11px;
  color: var(--white-muted);
  font-style: italic;
}
.team-card-sub {
  font-size: 12px;
  color: var(--white-muted);
  margin: 4px 0 12px 0;
  line-height: 1.5;
}

/* ---------- Puna AI symbol — the circled Puna logo ---------- */
/* Canonical visual marker for "Puna AI" across the product. Click to
   open the proactive correction modal. Reusable wherever we want to
   tag a surface as AI-generated. The slow cyan breath signals "AI is
   alive and listening" without being attention-grabbing — the shimmer
   pauses on hover (the explicit hover ring takes over). */
@keyframes punaAiBreath {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 200, 200, 0.0),
                0 0 6px 1px rgba(0, 200, 200, 0.15);
    border-color: var(--cyan);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(0, 229, 229, 0.18),
                0 0 14px 3px rgba(0, 229, 229, 0.40);
    border-color: var(--cyan-bright);
  }
}
@keyframes punaAiShimmer {
  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  20%  { opacity: 0.55; }
  60%  { opacity: 0.55; }
  100% { transform: translateX(220%)  skewX(-18deg); opacity: 0; }
}
.puna-ai-symbol {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
  background: var(--navy-deep);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease;
  margin-right: 0.6rem;
  animation: punaAiBreath 3.4s ease-in-out infinite;
}
.puna-ai-symbol::before {
  /* Diagonal light streak that crosses the disc roughly every 6s.
     Pure CSS — no JS needed. Sits behind the SVG. */
  content: '';
  position: absolute;
  top: -25%; left: 0;
  width: 40%; height: 150%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(0, 229, 229, 0.55) 50%,
    rgba(255,255,255,0) 100%);
  filter: blur(2px);
  pointer-events: none;
  animation: punaAiShimmer 6s ease-in-out infinite;
  animation-delay: 1.2s;
}
.puna-ai-symbol:hover {
  border-color: var(--cyan-bright);
  box-shadow: 0 0 0 4px rgba(0, 229, 229, 0.22),
              0 0 18px 4px rgba(0, 229, 229, 0.45);
  transform: scale(1.04);
  animation-play-state: paused;
}
.puna-ai-symbol:hover::before { animation-play-state: paused; opacity: 0; }
.puna-ai-symbol svg { display: block; border-radius: 4px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .puna-ai-symbol         { animation: none; }
  .puna-ai-symbol::before { display: none; }
}

/* ---------- Correct Puna modal ---------- */
.puna-ai-modal {
  position: fixed; inset: 0;
  z-index: 5000;
}
.puna-ai-modal[hidden] { display: none; }
.puna-ai-modal-scrim {
  position: absolute; inset: 0;
  background: rgba(6, 15, 29, 0.78);
  backdrop-filter: blur(2px);
}
.puna-ai-modal-card {
  position: relative;
  max-width: 540px;
  width: calc(100% - 36px);
  margin: 6vh auto 0;
  background: var(--navy);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px 18px;
  color: var(--white);
  box-shadow: 0 12px 48px rgba(0,0,0,0.55);
}
.puna-ai-modal-close {
  position: absolute;
  top: 8px; right: 12px;
  background: transparent;
  border: none;
  color: var(--white-muted);
  font-size: 22px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  padding: 4px 8px;
}
.puna-ai-modal-close:hover { color: var(--white); }
.puna-ai-modal-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
}
.puna-ai-modal-symbol {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
  background: var(--navy-deep);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.puna-ai-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
}
.puna-ai-modal-sub {
  margin: 4px 0 0 0;
  font-size: 12.5px;
  color: var(--white-muted);
  line-height: 1.45;
}
.puna-ai-modal-body { display: block; }
.puna-ai-modal-lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  margin: 12px 0 5px;
}
.puna-ai-modal-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--white-dim);
}
.puna-ai-modal-text, .puna-ai-modal-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}
.puna-ai-modal-text:focus, .puna-ai-modal-input:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(255,255,255,0.06);
}
.puna-ai-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.puna-ai-modal-cancel {
  background: transparent;
  border: 0.5px solid var(--border-light);
  color: var(--white-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.puna-ai-modal-cancel:hover { border-color: var(--cyan); color: var(--cyan-bright); }
.puna-ai-modal-submit {
  background: var(--cyan);
  border: none;
  color: var(--navy-deep);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.puna-ai-modal-submit:hover { background: var(--cyan-bright); }
.puna-ai-modal-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.puna-ai-modal-status {
  margin-top: 10px;
  font-size: 12px;
}
.puna-ai-modal-status.ok    { color: var(--cyan-bright); }
.puna-ai-modal-status.error { color: #c0596d; font-style: italic; }

/* Auto-detected surface pill in the Improve modal — replaces the old
   "Where did you see it?" dropdown. The dropdown still exists hidden
   for the rare case where detection is wrong. */
.puna-ai-where-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px 0;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.puna-ai-where-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: rgba(0, 200, 200, 0.08);
  border: 1px solid rgba(0, 200, 200, 0.30);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--white-muted);
}
.puna-ai-where-pill strong {
  color: var(--white);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.puna-ai-where-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 229, 229, 0.6);
}
.puna-ai-where-override {
  font-size: 11px;
  color: var(--white-dim);
  text-decoration: underline dotted;
  cursor: pointer;
}
.puna-ai-where-override:hover { color: var(--cyan); }

/* ============================================================
   PROFILE PAGE — Train Your AI
   ============================================================ */
#profile-page {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 2rem 2.4rem 3rem;
}
.profile-page-hero {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  width: 100%;
}
.profile-page-eyebrow {
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.4rem;
}
.profile-page-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.profile-page-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--white-muted);
  max-width: 720px;
  margin: 0 0 0.85rem;
}
.profile-page-sub strong { color: var(--cyan-bright); font-weight: 600; }

/* Brief 128 — privacy callout uses Puna's orange privacy primitive (#ff9b3a)
   in the DEFAULT (private) state so "private" reads as private at a glance.
   The is-shared state stays amber so a profile shared with Puna staff looks
   clearly shifted, not still-private (the status text swaps too, in JS). */
.profile-privacy-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 155, 58, 0.10);
  border: 1px solid rgba(255, 155, 58, 0.45);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: #ffc591;
}
.profile-privacy-banner strong { color: #ff9b3a; font-weight: 700; }
.profile-privacy-banner.is-shared {
  background: rgba(232, 168, 56, 0.08);
  border-color: rgba(232, 168, 56, 0.45);
  color: #e8a838;
}
.profile-privacy-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff9b3a;
  box-shadow: 0 0 6px rgba(255, 155, 58, 0.6);
}
.profile-privacy-banner.is-shared .profile-privacy-dot {
  background: #e8a838;
  box-shadow: 0 0 6px rgba(232, 168, 56, 0.6);
}

.profile-page-grid {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 800px) {
  .profile-page-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Brief 128 — unified tabbed profile (app side). Real app chrome
   (topbar + left rail + adviser bar) is untouched; this only
   restructures the INSIDE of #profile-page into main + right-rail
   tab nav. Cards keep their IDs (profileSave reads by ID); tabs just
   show/hide them via .b128-hidden-tab. Three tabs: Monday brief
   (default) · About you · Investment mandate. App is paid, so all
   tabs are unlocked (no gate).
   ============================================================ */
#profile-page .b128-layout { max-width: 1100px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 1000px) { #profile-page .b128-layout { grid-template-columns: 1fr 256px; align-items: start; } }
#profile-page .b128-main { min-width: 0; }
/* within tabs, single-column card stack so the two half-width cards
   (About-you / Investment-focus) don't strand an empty half when split
   across tabs. Higher specificity than the 800px 2-col rule above. */
#profile-page .profile-page-grid { grid-template-columns: 1fr; max-width: none; }
#profile-page .b128-hidden-tab { display: none !important; }

#profile-page .b128-pnav { background: rgba(0,0,0,0.22); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 0.9rem; position: sticky; top: 1rem; }
#profile-page .b128-acct { display: flex; align-items: center; gap: 0.7rem; padding: 0 0.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.10); margin-bottom: 1rem; }
#profile-page .b128-acct-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(0,200,200,0.25), rgba(0,200,200,0.08)); border: 1px solid rgba(0,200,200,0.40); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 600; color: var(--cyan-bright); }
#profile-page .b128-acct-name { font-size: 0.86rem; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#profile-page .b128-acct-email { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--white-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#profile-page .b128-pnav-label { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.14em; color: var(--white-dim); text-transform: uppercase; margin: 0 0.1rem 0.6rem; }
#profile-page .b128-ptab { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; font-size: 0.9rem; color: var(--white-muted); padding: 0.6rem 0.65rem; border-radius: 5px; cursor: pointer; user-select: none; border: 1px solid transparent; background: transparent; margin-bottom: 0.35rem; position: relative; }
#profile-page .b128-ptab:hover { color: var(--white); background: rgba(255,255,255,0.03); }
#profile-page .b128-ptab.is-active { color: var(--white); background: rgba(0,200,200,0.08); border-color: rgba(0,200,200,0.25); }
#profile-page .b128-ptab.is-active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--cyan); border-radius: 2px; }
#profile-page .b128-ptab-ico { width: 1.1rem; text-align: center; flex-shrink: 0; }
#profile-page .b128-ptab-text { flex: 1; }
#profile-page .b128-ptab-text small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; letter-spacing: 0.04em; color: var(--white-dim); margin-top: 1px; }
#profile-page .b128-logout-btn { width: 100%; margin-top: 1.1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--white-muted); background: transparent; border: 1px solid rgba(255,255,255,0.16); border-radius: 5px; padding: 0.55rem 0.65rem; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
#profile-page .b128-logout-btn:hover { color: #ff7a7a; border-color: rgba(255,92,92,0.45); background: rgba(255,92,92,0.06); }

/* Brief 119 Wave D — §01 Monday brief prompt + §02 read-permission cards */
.b119a-locked { margin-top: 0.4rem; padding: 0.85rem 1rem; background: rgba(6,15,29,0.55); border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 6px; }
.b119a-locked-eyebrow { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.5rem; }
.b119a-locked-collapse { position: relative; max-height: 5.6em; overflow: hidden; transition: max-height 0.28s ease; }
.b119a-locked-collapse.is-expanded { max-height: 3000px; }
.b119a-locked-collapse:not(.is-expanded)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(to bottom, rgba(6,15,29,0), rgba(6,15,29,0.96)); pointer-events: none; }
.b119a-locked-body { font-size: 12.5px; line-height: 1.6; color: var(--white-muted); }
.b119a-locked-body p { margin: 0 0 0.5rem; }
.b119a-locked-body p:last-child { margin-bottom: 0; }
.b119a-locked-body strong { color: var(--white); font-weight: 600; }
.b119a-locked-more { margin-top: 0.5rem; background: transparent; border: none; color: var(--cyan); font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; cursor: pointer; padding: 0; }
.b119a-locked-more:hover { color: var(--cyan-bright); }
.b119a-locked-foot { margin-top: 0.5rem; font-size: 10px; letter-spacing: 0.5px; color: var(--white-muted); opacity: 0.7; }
.b119a-model-row { display: flex; align-items: center; gap: 12px; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px dashed var(--border); }
.b119a-model-wrap { position: relative; display: inline-flex; align-items: center; }
.b119a-model-wrap select[disabled] { cursor: not-allowed; max-width: 280px; }
.b119a-model-chip { margin-left: 8px; white-space: nowrap; font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase; color: #e8a838; background: rgba(232,168,56,0.10); border: 1px solid rgba(232,168,56,0.35); padding: 2px 7px; border-radius: 3px; opacity: 0; transition: opacity 0.15s; }
.b119a-model-wrap:hover .b119a-model-chip, .b119a-model-wrap:focus-within .b119a-model-chip { opacity: 1; }
.b119a-toggle-card { border-left: 3px solid var(--cyan); }
.b119a-toggle-row { display: flex; align-items: center; gap: 1rem; }
.b119a-toggle { position: relative; width: 52px; height: 28px; background: var(--cyan); border-radius: 999px; border: none; cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.2s; }
.b119a-toggle::after { content: ""; position: absolute; top: 3px; left: 27px; width: 22px; height: 22px; background: #060f1d; border-radius: 50%; transition: left 0.2s; }
.b119a-toggle.is-off { background: rgba(255,255,255,0.14); }
.b119a-toggle.is-off::after { left: 3px; background: var(--white-muted); }
.b119a-toggle-state { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--cyan); }
.b119a-toggle-detail { font-size: 12.5px; color: #cbd6e6; margin-top: 1px; }
.b119a-toggle-helper { margin-top: 0.75rem; padding: 0.7rem 0.9rem; background: rgba(0,200,200,0.04); border: 1px dashed rgba(0,200,200,0.20); border-radius: 4px; font-size: 12px; line-height: 1.5; color: #cbd6e6; }
.b119a-toggle-helper strong { color: var(--white); font-weight: 600; }
.b119a-save-note { font-size: 11px; color: #5fe4b4; margin-top: 0.4rem; }
/* Brief 129 — on-demand "Send my analyst brief now" */
.b129-send-row { display: flex; align-items: center; gap: 12px; margin-top: 0.8rem; flex-wrap: wrap; }
.b129-send-btn { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 700; color: #060f1d; background: var(--cyan); border: 1px solid var(--cyan); border-radius: 4px; padding: 0.5rem 1rem; cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.b129-send-btn:hover { background: var(--cyan-bright); }
.b129-send-btn:disabled { opacity: 0.5; cursor: default; }
.b129-send-note { font-size: 12.5px; color: #cbd6e6; }
.b129-send-note.ok { color: #5fe4b4; }
.b129-send-note.warn { color: #e8a838; }

.profile-card {
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1rem 1.2rem 1.2rem;
}
/* Profile card that's actually a navigational link — quiet hover, arrow. */
.profile-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.profile-card-link:hover {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.04);
}
.profile-link-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile-link-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.profile-link-text strong { font-size: 13px; color: var(--white); font-weight: 600; }
.profile-link-text small { font-size: 11.5px; color: var(--white-dim); line-height: 1.5; }
.profile-link-arrow {
  font-size: 1.2rem;
  color: var(--white-dim);
  transition: color 0.15s, transform 0.15s;
}
.profile-card-link:hover .profile-link-arrow { color: var(--cyan); transform: translateX(2px); }
.profile-card-eyebrow {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.85rem;
}
/* Wise Adviser memory card — read-only display added 2026-05-12 in Phase 1
   of the Wise Adviser v1 build. Editing arrives in Phase 3. */
.profile-card-wap {
  border-color: rgba(0, 209, 178, 0.18);
  background: linear-gradient(180deg, rgba(0, 209, 178, 0.04) 0%, transparent 100%);
}
.profile-card-pill {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white-dim);
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: lowercase;
  vertical-align: middle;
}
.profile-wap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  margin-top: 0.5rem;
}
.profile-wap-field-wide { grid-column: 1 / -1; }
.profile-wap-lbl {
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--white-dim);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.profile-wap-val {
  font-size: 13px;
  color: var(--white);
  line-height: 1.45;
  word-break: break-word;
}
.profile-wap-val.is-empty { color: var(--white-dim); font-style: italic; }
.profile-wap-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  border-radius: 999px;
  background: rgba(0, 209, 178, 0.10);
  color: var(--cyan);
  font-size: 11.5px;
}
.profile-wap-footer {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: var(--white-dim);
  font-style: italic;
}
@media (max-width: 640px) {
  .profile-wap-grid { grid-template-columns: 1fr; }
  .profile-wap-field-wide { grid-column: 1; }
}

/* ============================================================
   Brief 10 (Wave 3) — Your contributions section. Matches the
   profile-card visual rhythm: cyan eyebrow, hairline rows, JetBrains
   Mono for receipt codes, soft cyan accent on the active filename.
   ============================================================ */
.prof-contrib-list {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.prof-contrib-group {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.prof-contrib-group:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.prof-contrib-group-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.2rem 0.65rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.prof-contrib-group-head::-webkit-details-marker { display: none; }
.prof-contrib-group-head::marker { content: ''; }
.prof-contrib-group-label {
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 600;
}
.prof-contrib-group-count {
  font-size: 11px;
  color: var(--white-dim);
  letter-spacing: 0.2px;
  margin-right: auto;
}
.prof-contrib-group-chev {
  font-size: 10px;
  color: var(--white-dim);
  transition: transform 0.15s ease;
  display: inline-block;
}
.prof-contrib-group[open] > .prof-contrib-group-head .prof-contrib-group-chev {
  transform: rotate(90deg);
  color: var(--cyan);
}
.prof-contrib-group[open] > .prof-contrib-group-head .prof-contrib-group-label {
  color: var(--cyan-bright);
}
.prof-contrib-group:hover > .prof-contrib-group-head { background: rgba(0, 200, 200, 0.03); }
.prof-contrib-group-body {
  padding-left: 0.4rem;
  border-left: 1px solid rgba(0, 200, 200, 0.18);
  margin-left: 0.1rem;
  margin-bottom: 0.4rem;
}
.prof-contrib-row {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.prof-contrib-row:last-child { border-bottom: none; }
.prof-contrib-date {
  font-size: 11px;
  color: var(--white-dim);
  letter-spacing: 0.2px;
  white-space: nowrap;
  margin-left: auto;        /* push date to the right edge */
}
.prof-contrib-row-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
}
.prof-contrib-filename {
  font-size: 13px;
  color: var(--white);
  word-break: break-word;
  min-width: 0;
}
.prof-contrib-project {
  font-size: 12px;
  color: var(--white-muted);
  letter-spacing: 0.1px;
}
.prof-contrib-project strong {
  color: var(--cyan-bright);
  font-weight: 500;
}
.prof-contrib-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white-muted);
  border: 1px solid rgba(255, 255, 255, 0.10);
  white-space: nowrap;
}
.prof-contrib-status.prof-contrib-status-received {
  background: rgba(0, 200, 200, 0.08);
  color: var(--cyan);
  border-color: rgba(0, 200, 200, 0.30);
}
.prof-contrib-status.prof-contrib-status-assessed {
  background: rgba(0, 209, 178, 0.10);
  color: var(--cyan-bright);
  border-color: rgba(0, 209, 178, 0.35);
}
.prof-contrib-status.prof-contrib-status-promoted {
  background: rgba(80, 200, 120, 0.10);
  color: #6fdc8c;
  border-color: rgba(80, 200, 120, 0.35);
}
.prof-contrib-status.prof-contrib-status-rejected,
.prof-contrib-status.prof-contrib-status-quarantined {
  background: rgba(232, 168, 56, 0.08);
  color: #e8a838;
  border-color: rgba(232, 168, 56, 0.30);
}
.prof-contrib-status.prof-contrib-status-dedupe-skip {
  background: rgba(255, 255, 255, 0.04);
  color: var(--white-dim);
  border-color: rgba(255, 255, 255, 0.10);
}
@media (max-width: 640px) {
  .prof-contrib-date { font-size: 10.5px; margin-left: 0; flex-basis: 100%; }
}

.profile-row {
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.profile-row:last-child { margin-bottom: 0; }
.profile-lbl {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--white-dim);
  font-weight: 600;
}
.profile-help {
  font-size: 11.5px;
  color: var(--white-dim);
  line-height: 1.45;
  margin: 0 0 0.5rem;
  font-style: italic;
}
.profile-input,
.profile-textarea {
  width: 100%;
  padding: 8px 10px;
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  color: var(--white);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  transition: border-color 0.15s;
}
.profile-textarea {
  resize: vertical;
  min-height: 90px;
}
.profile-textarea-md {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  min-height: 200px;
}
.profile-input:focus, .profile-textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0, 200, 200, 0.16);
}

.profile-pills, .profile-persona-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.profile-pill {
  padding: 5px 12px;
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  color: var(--white-muted);
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.profile-pill:hover {
  border-color: rgba(0, 200, 200, 0.4);
  color: var(--white);
}
.profile-pill.is-on {
  background: rgba(0, 200, 200, 0.14);
  border-color: var(--cyan);
  color: var(--cyan-bright);
}

/* Dual-handle range slider — min + max cheque size */
.profile-range {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.4rem 0 0;
}
.profile-range-track-wrap {
  position: relative;
  height: 28px;
}
.profile-range-track {
  position: absolute;
  top: 12px; left: 0; right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}
.profile-range-track-fill {
  position: absolute;
  top: 12px;
  height: 4px;
  background: var(--cyan);
  border-radius: 2px;
  pointer-events: none;
}
.profile-range-input {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 28px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  margin: 0;
}
.profile-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cyan-bright);
  border: 2px solid var(--navy-deep);
  cursor: grab;
  box-shadow: 0 0 0 1px var(--cyan), 0 0 8px rgba(0, 229, 229, 0.4);
  margin-top: -7px;
}
.profile-range-input::-webkit-slider-thumb:active { cursor: grabbing; }
.profile-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cyan-bright);
  border: 2px solid var(--navy-deep);
  cursor: grab;
  box-shadow: 0 0 0 1px var(--cyan), 0 0 8px rgba(0, 229, 229, 0.4);
}
.profile-range-input::-webkit-slider-runnable-track { background: transparent; }
.profile-range-input::-moz-range-track { background: transparent; }
.profile-range-readout {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}
.profile-range-readout-sep { color: var(--white-dim); }

/* Privacy toggle */
.profile-privacy-toggle { display: block; }
.profile-toggle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}
.profile-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.profile-toggle-slider {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--border);
  border-radius: 24px;
  transition: background 0.18s;
  margin-top: 2px;
}
.profile-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--white-muted);
  border-radius: 50%;
  transition: transform 0.18s, background 0.18s;
}
.profile-toggle input:checked + .profile-toggle-slider {
  background: rgba(232, 168, 56, 0.30);
  border-color: #e8a838;
}
.profile-toggle input:checked + .profile-toggle-slider::after {
  transform: translateX(18px);
  background: #e8a838;
}
.profile-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-toggle-text strong {
  font-size: 12.5px;
  color: var(--white);
  font-weight: 600;
}
.profile-toggle-text small {
  font-size: 11px;
  color: var(--white-dim);
  line-height: 1.45;
}

.profile-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.6rem 0 0.4rem;
}
.profile-save-btn {
  padding: 9px 22px;
  background: var(--cyan);
  color: var(--navy-deep);
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
}
.profile-save-btn:hover { background: var(--cyan-bright); }
.profile-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.profile-save-status {
  font-size: 11.5px;
  color: var(--white-dim);
  font-style: italic;
}
.profile-save-status.ok    { color: var(--cyan-bright); font-style: normal; }
.profile-save-status.error { color: #c0596d; }

/* ---------- Subscribers admin page (Task 20) ----------
   Dedicated Super User → Subscribers surface. Mirrors the
   #team-page chrome (cyan top-bar, navy background, scrollable
   content) but with a single primary card and breathing room
   for the per-subscriber history side-panel to slide in over.
   --------------------------------------------------------------- */
#subscribers-admin-page {
  display: none;
  flex: 1;
  flex-direction: column;
  background: var(--navy);
  overflow-y: auto;
  padding: 2rem 2.4rem 3rem;
  position: relative;
}
body.view-subscribers #subscribers-admin-page { display: flex !important; }
/* Hide every other top-level surface while on the Subscribers admin page
   — same pattern as #team-page. Was missing; the map + right-panel were
   bleeding through visibly. Fixed alongside the Improvements page rules
   on 2026-05-10. */
body.view-subscribers #mw           { display: none !important; }
body.view-subscribers #right-panel  { display: none !important; }
body.view-subscribers #db-panel     { display: none !important; }
body.view-subscribers #wl-panel     { display: none !important; }
body.view-subscribers #dr-page      { display: none !important; }
body.view-subscribers #mr-page      { display: none !important; }
body.view-subscribers #screener-page{ display: none !important; }
body.view-subscribers #profile-page { display: none !important; }
body.view-subscribers #vault-page   { display: none !important; }
body.view-subscribers #team-page    { display: none !important; }
#subscribers-admin-page::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright), var(--cyan));
  z-index: 10;
  pointer-events: none;
}
.sa-shell {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.sa-hero { margin-bottom: 1.6rem; }
.sa-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 5px 11px;
  border: 1px solid #0d3a4f;
  background: #0a2f40;
  border-radius: 2px;
}
.sa-hero-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  display: inline-block;
}
.sa-hero-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 6px;
  line-height: 1.2;
}
.sa-hero-sub {
  font-size: 14px;
  color: var(--white-muted);
  line-height: 1.55;
  max-width: 70ch;
  margin: 0;
}
.sa-hero-sub strong { color: var(--white); font-weight: 600; }
.sa-hero-sub em     { color: var(--white); font-style: normal; font-weight: 600; }
#subscribers-admin-page #team-card-subscribers .team-card-body {
  /* Roomy minimum height so empty/loading states don't look cramped,
     uncapped maximum so the staff can scroll the full list. */
  min-height: 280px;
}

/* ---------- Super User Users card (2026-05-10, su-users) ----------
   Unified Users surface on the Dashboard. Joins puna_view_visits to
   puna_user_profiles + signup_requests + watchlist_subscriptions.
   Designed to be glance-checkable: one row per user, columns visible
   without horizontal scroll, filter chips for the recurring questions.
   ----------------------------------------------------------------- */
#team-card-users { display: flex; flex-direction: column; gap: 0.7rem; }
.su-users-head {
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  justify-content: space-between;
}
.su-users-head-l { flex: 1 1 auto; min-width: 0; }
.su-users-head-r { flex: 0 0 auto; }
.su-users-search {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 6px 10px;
  font-size: 12.5px;
  border-radius: 3px;
  min-width: 220px;
  font-family: inherit;
}
.su-users-search:focus { outline: none; border-color: var(--cyan); }
.su-users-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0.2rem 0 0.4rem;
}
.su-users-chip {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  color: var(--white-muted);
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.su-users-chip:hover { color: var(--white); border-color: var(--white-dim); }
.su-users-chip.is-active {
  color: var(--cyan-bright); border-color: var(--cyan); background: rgba(0, 200, 200, 0.06);
}
.su-users-chip-count {
  font-size: 10px; color: var(--white-dim); padding: 0 4px;
  background: rgba(255,255,255,0.04); border-radius: 999px;
}
.su-users-chip.is-active .su-users-chip-count { color: var(--cyan-bright); background: rgba(0, 200, 200, 0.10); }

.su-users-table { display: flex; flex-direction: column; }
/* Grid columns sized to fit the team-card body width without horizontal
   overflow. Tightened 2026-05-10: was 180/180/90/90/110/110/36 + 12px gap
   = ~824px which exceeded the 810px card-content width and the toggle
   column ▸ overflowed off the right edge. New widths sum to ~700px +
   2 flexible columns + 8px gaps so name+email take the slack. */
.su-users-thead {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(160px, 1.2fr) 64px 88px 96px 110px 24px;
  gap: 8px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white-dim);
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}
.su-users-thead .su-th { cursor: pointer; user-select: none; }
.su-users-thead .su-th:hover { color: var(--white); }
.su-users-thead .su-th.is-sorted { color: var(--cyan-bright); }
.su-users-thead .su-th.numeric { text-align: right; }
.su-users-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(160px, 1.2fr) 64px 88px 96px 110px 24px;
  gap: 8px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.su-users-row:hover { background: rgba(0, 200, 200, 0.04); }
.su-users-row.is-expanded { background: rgba(0, 200, 200, 0.05); }
.su-users-cell-name {
  display: flex; flex-direction: column; min-width: 0;
}
.su-users-cell-name strong {
  color: var(--white); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.su-users-cell-name small {
  color: var(--white-dim); font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.su-users-cell-email {
  color: var(--white-muted);
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.su-users-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.su-users-cell-num.is-zero { color: var(--white-dim); }
.su-users-cell-when {
  text-align: right;
  font-size: 11.5px;
  color: var(--white-muted);
  font-variant-numeric: tabular-nums;
}
.su-users-cell-when.is-stale { color: var(--white-dim); }
.su-users-cell-status {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.su-users-cell-flags {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.su-users-pill {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 999px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--white-muted);
  white-space: nowrap;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
.su-users-pill.is-active7  { color: var(--cyan-bright); border-color: var(--cyan); background: rgba(0, 200, 200, 0.06); }
.su-users-pill.is-active30 { color: var(--white); border-color: var(--white-dim); }
.su-users-pill.is-dormant  { color: var(--white-dim); border-color: var(--border); }
.su-users-pill.is-pending  { color: #e8a838; border-color: rgba(232,168,56,0.5); background: rgba(232,168,56,0.06); }
.su-users-pill.is-sub      { color: var(--cyan-bright); border-color: var(--cyan); background: rgba(0, 200, 200, 0.10); }
.su-users-pill.is-trained  { color: #b69bff; border-color: rgba(182, 155, 255, 0.45); }
.su-users-pill.is-source   { color: var(--white-dim); border-color: var(--border); text-transform: none; letter-spacing: 0; font-family: inherit; font-weight: 500; }
.su-users-row-toggle {
  font-size: 11px; color: var(--white-dim);
  text-align: right;
  user-select: none;
}
.su-users-row.is-expanded .su-users-row-toggle { color: var(--cyan-bright); }
.su-users-row-detail {
  grid-column: 1 / -1;
  padding: 10px 12px 14px 12px;
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid var(--border-light);
  display: none;
  font-size: 12px;
  color: var(--white-muted);
}
.su-users-row.is-expanded + .su-users-row-detail { display: block; }
.su-users-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px 14px;
  margin-top: 4px;
}
.su-users-detail-grid .su-d-view {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 2px 0;
  border-bottom: 1px dashed var(--border-light);
}
.su-users-detail-grid .su-d-view-name {
  color: var(--white-dim);
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
.su-users-detail-grid .su-d-view-count {
  color: var(--white); font-variant-numeric: tabular-nums; font-size: 12px;
}
.su-users-detail-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 11.5px; color: var(--white-dim);
  margin-top: 8px;
}
.su-users-detail-meta strong { color: var(--white-muted); font-weight: 600; }
.su-users-detail-actions {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.su-users-detail-btn {
  background: rgba(0, 200, 200, 0.08);
  border: 1px solid var(--cyan);
  color: var(--cyan-bright);
  padding: 5px 11px;
  font-size: 11.5px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.su-users-detail-btn:hover { background: rgba(0, 200, 200, 0.16); }
.su-users-detail-btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--white-muted);
}
.su-users-detail-btn.ghost:hover { color: var(--white); border-color: var(--white-dim); }
.su-users-empty {
  padding: 1.4rem 0.5rem;
  color: var(--white-dim);
  font-style: italic;
  text-align: center;
}

/* Narrow viewports — collapse the last-seen and status columns so the
   table stays readable below ~980px. The status pill already lives in
   the bucket and tags row, and last-seen is in the row-detail. */
@media (max-width: 980px) {
  .su-users-thead, .su-users-row {
    grid-template-columns: minmax(140px, 1.4fr) minmax(160px, 1fr) 60px 110px 24px;
    gap: 6px;
  }
  .su-users-thead .su-th-status, .su-users-thead .su-th-when,
  .su-users-row .su-users-cell-when, .su-users-row .su-users-cell-status { display: none; }
}

/* ---------- Improvements page (2026-05-10) ----------
   Dedicated Super User → Improvements surface. Holds the three
   internal-quality queues that don't belong on the platform-health
   Dashboard: adviser readouts, system improvements, project requests.
   Mirrors the #subscribers-admin-page chrome (cyan top-bar, navy
   background, scrollable content) so the two staff-only sub-pages
   feel like siblings off the Super User dropdown.
   --------------------------------------------------------------- */
#improvements-page {
  display: none;
  flex: 1;
  flex-direction: column;
  background: var(--navy);
  overflow-y: auto;
  padding: 2rem 2.4rem 3rem;
  position: relative;
}
body.view-improvements #improvements-page { display: flex !important; }
/* Hide every other top-level surface while on the Improvements page — same
   pattern as #team-page. Without these the Explorer map + right-panel
   bleed through. */
body.view-improvements #mw           { display: none !important; }
body.view-improvements #right-panel  { display: none !important; }
body.view-improvements #db-panel     { display: none !important; }
body.view-improvements #wl-panel     { display: none !important; }
body.view-improvements #dr-page      { display: none !important; }
body.view-improvements #mr-page      { display: none !important; }
body.view-improvements #screener-page{ display: none !important; }
body.view-improvements #profile-page { display: none !important; }
body.view-improvements #vault-page   { display: none !important; }
body.view-improvements #team-page    { display: none !important; }
#improvements-page::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright), var(--cyan));
  z-index: 10;
  pointer-events: none;
}
.imp-shell {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.imp-hero { margin-bottom: 1.6rem; }
.imp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 5px 11px;
  border: 1px solid #0d3a4f;
  background: #0a2f40;
  border-radius: 2px;
}
.imp-hero-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  display: inline-block;
}
.imp-hero-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 6px;
  line-height: 1.2;
}
.imp-hero-sub {
  font-size: 14px;
  color: var(--white-muted);
  line-height: 1.55;
  max-width: 70ch;
  margin: 0;
}
.imp-hero-sub strong { color: var(--white); font-weight: 600; }
.imp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

/* ---------- Improvements activity feed (2026-05-10 v2) ---------- */
.imp-feed-list { display: flex; flex-direction: column; }
.imp-feed-row {
  display: grid;
  grid-template-columns: 32px 100px 130px minmax(180px, 1fr) 80px;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-light);
  align-items: start;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.imp-feed-row:hover { background: rgba(0, 200, 200, 0.04); }
.imp-feed-row.is-marked { background: rgba(232, 168, 56, 0.04); border-left: 2px solid #e8a838; padding-left: 6px; }
.imp-feed-row.is-marked:hover { background: rgba(232, 168, 56, 0.08); }
.imp-feed-row.is-attention { border-left: 2px solid #c0596d; padding-left: 6px; }
.imp-feed-star {
  font-size: 14px;
  color: var(--white-dim);
  cursor: pointer;
  user-select: none;
  text-align: center;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.12s ease, background 0.12s ease;
}
.imp-feed-star:hover { color: var(--white); background: rgba(255, 255, 255, 0.04); }
.imp-feed-row.is-marked .imp-feed-star { color: #e8a838; }
.imp-feed-when {
  font-size: 11px;
  color: var(--white-dim);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.imp-feed-user {
  font-size: 11.5px;
  color: var(--white-muted);
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imp-feed-content {
  color: var(--white);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.imp-feed-content-title {
  color: var(--white);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imp-feed-content-snippet {
  color: var(--white-muted);
  font-size: 11.5px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0.85;
}
.imp-feed-tags {
  display: flex; flex-direction: column; gap: 2px;
  align-items: flex-end;
}
.imp-feed-kind {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--white-muted);
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.imp-feed-kind.kind-agent        { color: var(--cyan-bright); border-color: var(--cyan); }
.imp-feed-kind.kind-feedback     { color: #c0596d; border-color: rgba(192, 89, 109, 0.5); }
.imp-feed-kind.kind-wise         { color: #b69bff; border-color: rgba(182, 155, 255, 0.45); }
.imp-feed-kind.kind-request      { color: #e8a838; border-color: rgba(232, 168, 56, 0.5); }
.imp-feed-kind.kind-verification { color: #fbbf24; border-color: rgba(251, 191, 36, 0.55); background: rgba(251, 191, 36, 0.05); }
.imp-feed-row-detail {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 2px solid var(--cyan);
  border-radius: 0 3px 3px 0;
  font-size: 12px; color: var(--white-muted);
  display: none;
  white-space: pre-wrap; word-break: break-word;
}
.imp-feed-row.is-expanded .imp-feed-row-detail { display: block; }
.imp-feed-row.is-expanded .imp-feed-content-snippet { white-space: normal; overflow: visible; text-overflow: clip; }
.imp-feed-empty {
  padding: 1.4rem 0.5rem;
  color: var(--white-dim);
  font-style: italic;
  text-align: center;
}
@media (max-width: 980px) {
  .imp-feed-row {
    grid-template-columns: 24px 90px minmax(160px, 1fr) 70px;
  }
  .imp-feed-row .imp-feed-user { display: none; }
}

/* ---------- Data Health page (Brief 18, 2026-05-13) ----------
   Staff-only platform-health surface — six tiles backed by the
   dh_* views (puna/supabase/migrations/20260513220000_data-
   health-views.sql). Same page-chrome pattern as Improvements:
   own scrollable column with a thin cyan top stripe, every other
   top-level surface hidden when body.view-data-health is on.
   Class prefix .dh- throughout. Do not reuse .imp- / .team-
   classes — those carry inheritance we don't want.
   --------------------------------------------------------------- */
#data-health-page {
  display: none;
  flex: 1;
  flex-direction: column;
  background: var(--navy);
  overflow-y: auto;
  padding: 2rem 2.4rem 3rem;
  position: relative;
}
body.view-data-health #data-health-page { display: flex !important; }
body.view-data-health #mw           { display: none !important; }
body.view-data-health #right-panel  { display: none !important; }
body.view-data-health #db-panel     { display: none !important; }
body.view-data-health #wl-panel     { display: none !important; }
body.view-data-health #dr-page      { display: none !important; }
body.view-data-health #mr-page      { display: none !important; }
body.view-data-health #screener-page{ display: none !important; }
body.view-data-health #profile-page { display: none !important; }
body.view-data-health #vault-page   { display: none !important; }
body.view-data-health #team-page    { display: none !important; }
body.view-data-health #improvements-page { display: none !important; }
body.view-data-health #unlogged-projects-page { display: none !important; }
#data-health-page::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright), var(--cyan));
  z-index: 10;
  pointer-events: none;
}
.dh-shell {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.dh-hero { margin-bottom: 1.6rem; }
.dh-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dh-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 5px 11px;
  border: 1px solid #0d3a4f;
  background: #0a2f40;
  border-radius: 2px;
}
.dh-hero-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  display: inline-block;
}
.dh-hero-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 6px;
  line-height: 1.2;
}
.dh-hero-sub {
  font-size: 14px;
  color: var(--white-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}
.dh-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dh-refresh-meta {
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--white-dim);
  letter-spacing: 0.04em;
}
.dh-refresh-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white-muted);
  padding: 7px 14px;
  font-size: 12px;
  font-family: inherit;
  letter-spacing: 0.02em;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.dh-refresh-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0, 200, 200, 0.06);
}
.dh-refresh-btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Tile grid — 2 across on desktop, 1 across on mobile. The
   freshness tile spans the full row because it carries a list. */
.dh-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.dh-tile-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .dh-grid { grid-template-columns: 1fr; }
}

.dh-tile {
  background: var(--navy-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 168px;
  position: relative;
}
.dh-tile.is-warning { border-color: rgba(232, 168, 56, 0.45); }
.dh-tile.is-alert   { border-color: rgba(192, 89, 109, 0.55); }

.dh-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dh-tile-eyebrow {
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--cyan);
  text-transform: uppercase;
}
.dh-tile-flag {
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 2px;
  text-transform: uppercase;
}
.dh-tile-flag.is-ok      { color: var(--cyan); background: rgba(0, 200, 200, 0.10); }
.dh-tile-flag.is-warning { color: #e8a838;     background: rgba(232, 168, 56, 0.10); }
.dh-tile-flag.is-alert   { color: #c0596d;     background: rgba(192, 89, 109, 0.10); }

.dh-tile-body {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: flex-end;
  flex: 1;
}
.dh-tile-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 84px;
}
.dh-tile-stat-value {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dh-tile-stat-value.is-positive { color: var(--cyan); }
.dh-tile-stat-value.is-warning  { color: #e8a838; }
.dh-tile-stat-value.is-alert    { color: #c0596d; }
.dh-tile-stat-value.is-muted    { color: var(--white-dim); }
.dh-tile-stat-label {
  font-size: 11.5px;
  color: var(--white-dim);
  letter-spacing: 0.02em;
}
.dh-tile-empty {
  font-size: 14px;
  color: var(--white-dim);
  font-style: italic;
}
.dh-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
  margin-top: auto;
}
.dh-tile-time {
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--white-dim);
  letter-spacing: 0.03em;
}
.dh-tile-link {
  font-size: 11.5px;
  color: var(--cyan);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.dh-tile-link:hover { text-decoration: underline; }

/* Source-freshness compact table (Tile 4). Top-10 rows only.
   Cyan / amber / red dots match the .dh-tile-flag palette. */
.dh-src-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 12.5px;
}
.dh-src-row {
  display: grid;
  grid-template-columns: 12px minmax(160px, 1fr) 120px 110px;
  gap: 10px;
  align-items: center;
  padding: 6px 2px;
  border-bottom: 1px solid var(--border-light);
}
.dh-src-row:last-child { border-bottom: none; }
.dh-src-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dh-src-dot.is-fresh   { background: var(--cyan); box-shadow: 0 0 6px rgba(0, 200, 200, 0.45); }
.dh-src-dot.is-stale   { background: #e8a838; }
.dh-src-dot.is-missing { background: #c0596d; }
.dh-src-name {
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dh-src-type {
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.dh-src-when {
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--white-muted);
  text-align: right;
}

.dh-cost-row {
  display: grid;
  grid-template-columns: 100px 60px 1fr;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border-light);
}
.dh-cost-row:last-child { border-bottom: none; }
.dh-cost-tier {
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dh-cost-tier.is-idle    { color: var(--white-dim); }
.dh-cost-tier.is-active  { color: var(--cyan); }
.dh-cost-tier.is-degraded{ color: #e8a838; }
.dh-cost-tier.is-capped  { color: #c0596d; }
.dh-cost-visitors {
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.dh-cost-usd {
  color: var(--white-muted);
  text-align: right;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.dh-banner {
  padding: 10px 14px;
  border: 1px dashed rgba(232, 168, 56, 0.5);
  background: rgba(232, 168, 56, 0.06);
  color: #e8a838;
  font-size: 12.5px;
  border-radius: 3px;
  margin-bottom: 14px;
  display: none;
}
.dh-banner.is-shown { display: block; }

/* §§ SECTION: UNLOGGED-PROJECT CANDIDATES (Brief 17, Wave 5, 2026-05-13)
   Two-pane staff-only admin: candidates queue + pending alias
   ratification. Class prefix .upq- throughout. Same page-chrome
   pattern as Data Health (own scrollable column, cyan top stripe,
   every other top-level surface hidden when body.view-unlogged-
   projects is on).
   --------------------------------------------------------------- */
#unlogged-projects-page {
  display: none;
  flex: 1;
  flex-direction: column;
  background: var(--navy);
  overflow-y: auto;
  padding: 2rem 2.4rem 3rem;
  position: relative;
}
body.view-unlogged-projects #unlogged-projects-page { display: flex !important; }
body.view-unlogged-projects #mw           { display: none !important; }
body.view-unlogged-projects #right-panel  { display: none !important; }
body.view-unlogged-projects #db-panel     { display: none !important; }
body.view-unlogged-projects #wl-panel     { display: none !important; }
body.view-unlogged-projects #dr-page      { display: none !important; }
body.view-unlogged-projects #mr-page      { display: none !important; }
body.view-unlogged-projects #screener-page{ display: none !important; }
body.view-unlogged-projects #profile-page { display: none !important; }
body.view-unlogged-projects #vault-page   { display: none !important; }
body.view-unlogged-projects #team-page    { display: none !important; }
body.view-unlogged-projects #improvements-page { display: none !important; }
body.view-unlogged-projects #data-health-page  { display: none !important; }
#unlogged-projects-page::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright), var(--cyan));
  z-index: 10;
  pointer-events: none;
}
.upq-shell { max-width: 1180px; width: 100%; margin: 0 auto; }
.upq-hero { margin-bottom: 1.6rem; }
.upq-hero-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.upq-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 6px;
}
.upq-hero-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 6px rgba(0, 200, 200, 0.45);
}
.upq-hero-title {
  margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600;
  color: var(--white-bright); letter-spacing: -0.01em;
}
.upq-hero-sub {
  margin: 6px 0 0; font-size: 13.5px; line-height: 1.55;
  color: var(--white-dim); max-width: 720px;
}
.upq-hero-actions { display: inline-flex; align-items: center; gap: 12px; }
.upq-refresh-meta {
  font-size: 11.5px; color: var(--white-dim);
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
.upq-refresh-btn {
  appearance: none; border: 1px solid var(--cyan);
  background: rgba(0, 200, 200, 0.08); color: var(--cyan);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em;
  padding: 7px 14px; border-radius: 6px; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.upq-refresh-btn:hover { background: rgba(0, 200, 200, 0.18); }
.upq-refresh-btn:disabled { opacity: 0.5; cursor: progress; }

.upq-banner {
  display: none; margin: 12px 0 0;
  padding: 10px 14px; border-radius: 6px;
  border: 1px solid rgba(192, 89, 109, 0.55);
  background: rgba(192, 89, 109, 0.10);
  color: #f0d4d9; font-size: 13px; line-height: 1.45;
}
.upq-banner.is-shown { display: block; }

.upq-pane {
  background: var(--card-bg, #0b1a2e);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.6rem;
}
.upq-pane-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.upq-pane-title {
  margin: 0; font-size: 16.5px; font-weight: 600;
  color: var(--white-bright); letter-spacing: -0.005em;
}
.upq-pane-count {
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--white-dim); letter-spacing: 0.06em;
}
.upq-pane-sub {
  margin: 0 0 14px; font-size: 12.5px; line-height: 1.5;
  color: var(--white-dim);
}
.upq-pane-empty {
  font-size: 13px; color: var(--white-dim); padding: 10px 0;
  font-style: italic;
}

/* Candidate row — table-ish but flexbox so it reflows. */
.upq-table { width: 100%; border-collapse: collapse; }
.upq-table thead th {
  text-align: left; padding: 8px 10px;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white-dim); border-bottom: 1px solid var(--border-light);
  font-weight: 600;
}
.upq-table td {
  padding: 10px 10px; vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px; color: var(--white);
}
.upq-table tr:last-child td { border-bottom: none; }
.upq-cand-name {
  font-weight: 600; color: var(--white-bright);
  display: block; margin-bottom: 2px;
}
.upq-cand-meta {
  display: block; font-size: 11px; color: var(--white-dim);
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
.upq-cand-suggest {
  display: inline-block; padding: 2px 7px; border-radius: 3px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
}
.upq-cand-suggest.is-create-new   { color: var(--cyan);   border: 1px solid rgba(0, 200, 200, 0.55); background: rgba(0,200,200,0.08); }
.upq-cand-suggest.is-review-merge { color: #e8a838;       border: 1px solid rgba(232, 168, 56, 0.55); background: rgba(232,168,56,0.08); }
.upq-cand-suggest.is-ambiguous    { color: #b69bff;       border: 1px solid rgba(182, 155, 255, 0.55); background: rgba(182,155,255,0.08); }
.upq-cand-suggest.is-auto-merge   { color: #75d68a;       border: 1px solid rgba(117, 214, 138, 0.55); background: rgba(117,214,138,0.08); }
.upq-cand-nearest {
  display: block; font-size: 11.5px; color: var(--white-dim);
  margin-top: 4px; line-height: 1.45;
}
.upq-cand-nearest strong { color: var(--white); font-weight: 600; }

.upq-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center; justify-content: flex-end;
}
.upq-btn {
  appearance: none; border: 1px solid var(--border-light);
  background: transparent; color: var(--white);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 4px; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.upq-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.04); }
.upq-btn:disabled { opacity: 0.5; cursor: progress; }
.upq-btn.is-primary {
  border-color: var(--cyan); color: var(--cyan);
  background: rgba(0, 200, 200, 0.06);
}
.upq-btn.is-primary:hover:not(:disabled) { background: rgba(0, 200, 200, 0.16); }
.upq-btn.is-danger {
  border-color: rgba(192, 89, 109, 0.55); color: #e6a4af;
}
.upq-btn.is-danger:hover:not(:disabled) { background: rgba(192, 89, 109, 0.10); color: #f0c4cb; }

/* Promote modal — small, in-page overlay over the admin tab. */
.upq-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 15, 29, 0.78);
}
.upq-modal-backdrop.is-shown { display: flex; align-items: center; justify-content: center; }
.upq-modal {
  width: min(520px, 92vw);
  background: #0b1a2e; border: 1px solid var(--border-light);
  border-radius: 10px; padding: 1.5rem 1.6rem; box-shadow: 0 18px 60px rgba(0,0,0,0.4);
}
.upq-modal h2 {
  margin: 0 0 6px; font-size: 17px; font-weight: 600;
  color: var(--white-bright);
}
.upq-modal-sub {
  margin: 0 0 14px; font-size: 12.5px; color: var(--white-dim); line-height: 1.5;
}
.upq-modal-field { display: block; margin-bottom: 12px; }
.upq-modal-field label {
  display: block; font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--white-dim);
  margin-bottom: 4px; font-weight: 600;
}
.upq-modal-field input,
.upq-modal-field select {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px; border-radius: 5px;
  border: 1px solid var(--border-light);
  background: #0a1422; color: var(--white);
  font-size: 13px; font-family: inherit;
}
.upq-modal-field input:focus,
.upq-modal-field select:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0, 200, 200, 0.18);
}
.upq-modal-footer {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px;
}

/* Pending-alias pane is a simpler row layout. */
.upq-alias-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.upq-alias-row:last-child { border-bottom: none; }
.upq-alias-body { flex: 1; min-width: 0; }
.upq-alias-text {
  display: block; font-size: 13px; color: var(--white-bright);
  font-weight: 600; line-height: 1.35;
}
.upq-alias-meta {
  display: block; margin-top: 3px;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--white-dim); line-height: 1.45;
}

/* ---------- Team feedback (system improvements) ----------
   Cap the feedback card body so it doesn't blow out the page
   when there are many entries. Scroll internally; everything else
   on the page stays visible above the fold. 2026-05-04 fix.
   Card moved from Dashboard to Improvements page on 2026-05-10 —
   selector covers both the legacy id (kept for one cycle in case
   anything still mounts on #team-card-team-feedback) and the new
   #imp-card-team-feedback. */
#team-card-team-feedback #team-tf-body,
#imp-card-team-feedback  #imp-tf-body {
  max-height: 60vh;
  overflow-y: auto;
  /* Subtle inner border so the scroll edge reads as intentional */
  padding-right: 4px;
}
.team-tf-row {
  border-top: 1px solid var(--border-light);
  padding: 8px 0 10px;
}
.team-tf-row:first-child { border-top: none; }
.team-tf-row-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.team-tf-row-kind {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 0.5px solid var(--border-light);
  color: var(--white-muted);
}
.team-tf-row-kind.kind-design        { color: var(--cyan-bright); border-color: var(--cyan); }
.team-tf-row-kind.kind-feature       { color: var(--cyan-bright); border-color: rgba(0,200,200,0.5); }
.team-tf-row-kind.kind-bug           { color: #c0596d; border-color: rgba(192, 89, 109, 0.5); }
.team-tf-row-kind.kind-quality       { color: #e8a838; border-color: rgba(232,168,56,0.5); }
.team-tf-row-kind.kind-investigation { color: #b69bff; border-color: rgba(182, 155, 255, 0.45); }
.team-tf-row-kind.kind-other         { color: var(--white-dim); border-color: var(--border); }

/* Source badge — tells reviewer whether the entry came from the
   Improve Puna chat (sidebar [P], v2) or the legacy form input. */
.team-tf-source-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  margin-right: 0.4rem;
  vertical-align: 1px;
}
.team-tf-source-badge.chat {
  color: var(--cyan-bright);
  background: rgba(0, 200, 200, 0.10);
  border: 1px solid rgba(0, 200, 200, 0.35);
}
.team-tf-source-badge.form {
  color: var(--white-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.team-tf-row-surface {
  display: inline-block;
  font-size: 10.5px;
  color: var(--white-dim);
  font-style: italic;
  margin-bottom: 4px;
}

/* Inline link buttons inside team-card-sub copy — used to point at
   the sidebar [P] from the unified queue intro. */
.team-card-sub-link {
  background: none;
  border: 0;
  padding: 0 2px;
  color: var(--cyan);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
}
.team-card-sub-link:hover { color: var(--cyan-bright); }
.team-tf-row-subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  flex: 1;
  min-width: 0;
}
.team-tf-row-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--white-dim);
  letter-spacing: 0.04em;
}
.team-tf-row-delete {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white-dim);
  width: 22px;
  height: 22px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.team-tf-row-delete:hover {
  color: rgba(255, 140, 140, 0.95);
  border-color: rgba(255, 140, 140, 0.6);
}
.team-tf-row-body {
  font-size: 12px;
  color: var(--white-muted);
  line-height: 1.5;
  white-space: pre-wrap;
}

.team-tf-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 0.5px dashed var(--border-light);
}
.team-tf-form-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 8px;
}
.team-tf-form-row {
  display: flex; gap: 8px; margin-bottom: 6px;
}
.team-tf-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 6px 9px;
  border-radius: 3px;
  font-size: 12.5px;
  font-family: inherit;
}
.team-tf-input:focus { outline: none; border-color: var(--cyan); }
.team-tf-select {
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-family: inherit;
}
.team-tf-textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--border-light);
  color: var(--white);
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}
.team-tf-textarea:focus { outline: none; border-color: var(--cyan); background: rgba(255,255,255,0.06); }
.team-tf-form-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
}
.team-tf-submit {
  background: var(--cyan);
  border: none;
  color: var(--navy-deep);
  padding: 7px 14px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.team-tf-submit:hover { background: var(--cyan-bright); }
.team-tf-status {
  font-size: 11px;
  color: var(--white-dim);
  font-style: italic;
}

/* ---------- Team feedback → AI proposal ---------- */
.puna-ai-symbol-sm {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  background: var(--navy-deep);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  animation: punaAiBreath 3.4s ease-in-out infinite;
}
.puna-ai-symbol-sm::before {
  content: '';
  position: absolute;
  top: -25%; left: 0;
  width: 40%; height: 150%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(0, 229, 229, 0.55) 50%,
    rgba(255,255,255,0) 100%);
  filter: blur(1.5px);
  pointer-events: none;
  animation: punaAiShimmer 6s ease-in-out infinite;
  animation-delay: 1.2s;
}
.puna-ai-symbol-sm svg { display: block; border-radius: 4px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .puna-ai-symbol-sm         { animation: none; }
  .puna-ai-symbol-sm::before { display: none; }
}

/* ---------- Improve-Puna [P] button ---------- */
/* The unified "improve the agent" affordance. Replaces the old
   👍/👎/correction triplet on every Q&A surface. Click → opens the
   proactive correction modal pre-filled with the current question
   + answer + auto-detected surface. */
.puna-improve-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(0, 200, 200, 0.06);
  border: 1px solid rgba(0, 200, 200, 0.35);
  color: var(--white-muted);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.puna-improve-btn:hover {
  background: rgba(0, 200, 200, 0.14);
  border-color: var(--cyan);
  color: var(--white);
}
.puna-improve-btn .puna-ai-symbol-xs {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  background: var(--navy-deep);
  display: inline-flex;
  align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  animation: punaAiBreath 3.4s ease-in-out infinite;
}
.puna-improve-btn .puna-ai-symbol-xs::before {
  content: '';
  position: absolute;
  top: -25%; left: 0;
  width: 40%; height: 150%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(0, 229, 229, 0.55) 50%,
    rgba(255,255,255,0) 100%);
  filter: blur(1.5px);
  pointer-events: none;
  animation: punaAiShimmer 6s ease-in-out infinite;
  animation-delay: 1.2s;
}
.puna-improve-btn .puna-ai-symbol-xs svg { display: block; border-radius: 3px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .puna-improve-btn .puna-ai-symbol-xs         { animation: none; }
  .puna-improve-btn .puna-ai-symbol-xs::before { display: none; }
}
.puna-improve-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}
.puna-improve-row .puna-improve-hint {
  font-size: 10.5px;
  color: var(--white-dim);
  font-style: italic;
}
.puna-improve-row .puna-improve-thanks {
  font-size: 11px;
  color: var(--cyan);
}

/* 2026-05-09: .team-tf-mockup-* + .team-tf-prop-* styles removed
   alongside the Team page Puna AI mockup panel (mode='design_proposal'
   in the Netlify ask-agent wrapper). Wrapper deleted per
   puna/planning/synthesis-quarantine-v1.md § Rule 4 — single secure
   path. See git history if you need to resurrect the proposal block. */

.team-row-l { flex: 1; min-width: 0; }
.team-row-l strong { color: var(--white); font-weight: 600; }
.team-row-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  margin-top: 0.18rem;
  display: block;
}
.team-row-r { display: flex; gap: 0.35rem; flex-shrink: 0; }
.team-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.team-row-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.45rem;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--white-muted);
  border: 1px solid var(--border-light);
}
body.view-explorer  #mr-page   { display: none !important; }
body.view-database  #mr-page   { display: none !important; }
body.view-watchlist #mr-page   { display: none !important; }
body.view-datarooms #mr-page   { display: none !important; }
body.view-screener  #mr-page   { display: none !important; }

/* --- Miner page composition ---------------------------------
   Hero + status form one calm header. No bordered boxes; a single
   thin rule separates the header from the folder tree below. */
.mr-hero {
  max-width: 1080px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 1rem;
}
.mr-hero-text { flex: 1; min-width: 280px; }
.mr-hero-title {
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.3rem;
  letter-spacing: -0.015em;
}
.mr-hero-sub {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--white-dim);
  margin: 0;
  max-width: 52ch;
}

/* §§ SECTION: mr-stepper — the 5-step miner journey strip.
   Sits ABOVE the statusbar in #mr-page. Persistent across both
   linked and unlinked states; reflects the operator's progress
   through Discover -> Upload -> Storytell -> Monitor -> Share
   (per miner_data_room_draft_v1.md §1, made structural per the
   IA review 2026-05-12). State is computed by mrComputeJourneyState
   in puna/app/js/drd-pure.js (Vitest-tested). */
.mr-stepper {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
  width: 100%;
}
/* Each <li> is the actual flex child of .mr-stepper. Without
   `flex: 1 1 0; min-width: 0;` here, the LIs hold their natural
   intrinsic width and the inner button's flex rules become
   meaningless — that's how 2 of 5 steps were ending up off-screen. */
.mr-stepper > li {
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
  display: flex;
}
.mr-stepper-step {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--white-dim);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  position: relative;
}
.mr-stepper-step:hover {
  border-color: var(--border);
  color: var(--white-muted);
  background: rgba(255, 255, 255, 0.04);
}
.mr-stepper-step.is-active {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.06);
  color: var(--white);
  box-shadow: 0 0 0 1px rgba(0, 200, 200, 0.18) inset;
}
.mr-stepper-step.is-done {
  border-color: rgba(0, 200, 200, 0.35);
  color: var(--white-muted);
  background: rgba(0, 200, 200, 0.025);
}
.mr-stepper-step.is-done:hover { color: var(--white); }
.mr-stepper-pip {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  color: var(--white-dim);
  border: 1px solid var(--border-light);
}
.mr-stepper-step.is-active .mr-stepper-pip {
  background: var(--cyan);
  color: var(--navy-deep);
  border-color: var(--cyan);
}
.mr-stepper-step.is-done .mr-stepper-pip {
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan);
  border-color: var(--cyan);
}
.mr-stepper-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.mr-stepper-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Drop hints when the stepper has to fit into a narrower band — they
   wrap awkwardly and push cards off-screen. The label and pip alone
   keep the journey intelligible. */
@media (max-width: 1180px) {
  .mr-stepper-hint { display: none; }
  .mr-stepper-step { padding: 0.5rem 0.55rem; }
}
.mr-stepper-step.is-active .mr-stepper-label { color: var(--white); }
.mr-stepper-hint {
  font-size: 0.66rem;
  color: var(--white-dim);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mr-stepper-step.is-active .mr-stepper-hint { color: var(--white-muted); }
.mr-stepper-step.is-complete-banner {
  flex: 1 1 100%;
  background: rgba(0, 200, 200, 0.08);
  border-color: rgba(0, 200, 200, 0.45);
  color: var(--white);
  cursor: default;
  justify-content: center;
}

/* Status row sits inline with the hero — left side identifies the
   linked project (or invites linking), right side carries the
   actions. No box, just typography. */
.mr-statusbar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  margin-bottom: 1rem;
}
.mr-statusbar.unlinked .mr-status-prompt {
  font-size: 0.85rem;
  color: var(--white);
  font-weight: 500;
}
.mr-statusbar.linked .mr-status-prompt {
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white-dim);
}
.mr-status-link {
  font-weight: 600;
  color: var(--white);
  font-size: 0.95rem;
}
.mr-status-spacer { flex: 1; }
.mr-status-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--white-dim);
}
.mr-status-chip.verified { color: var(--cyan); border-color: var(--cyan); background: rgba(0,200,200,0.08); }
.mr-status-chip.pending  { color: #d4b65f; border-color: rgba(200,162,58,0.5); background: rgba(200,162,58,0.06); }
.mr-status-btn {
  background: var(--cyan);
  border: 1px solid var(--cyan);
  color: var(--navy-deep);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Inter', -apple-system, sans-serif;
  letter-spacing: -0.005em;
  transition: background 0.12s, border-color 0.12s;
}
.mr-status-btn:hover { background: var(--cyan-bright); }
.mr-status-btn.ghost {
  background: transparent;
  color: var(--white-muted);
  border-color: var(--border);
}
.mr-status-btn.ghost:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(0,200,200,0.04); }

.mr-room-picker {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.4rem 0.55rem;
  border-radius: 4px;
}
.mr-room-picker:hover { border-color: var(--cyan); }

/* The folder shell — no outer chrome. Lets the tree breathe. */
.mr-room-shell {
  max-width: 1080px;
  padding: 0;
  background: transparent;
  border: none;
}
.mr-room-shell.preview { opacity: 1; }
.mr-room-shell.preview .dr-room-folder-name { color: var(--white); }
.mr-room-shell.preview .dr-room-folder-head { cursor: default; }

/* Action row — Pick your project + Link / Add new buttons. Sits above
   the folder preview when unlinked. Survives explainer collapse, so
   the next step is always visible. */
.mr-action-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(11, 26, 46, 0.45);
  flex-wrap: wrap;
}
.mr-action-prompt {
  font-size: 0.85rem;
  color: var(--white);
  font-weight: 500;
}
.mr-action-spacer { flex: 1; min-width: 0.5rem; }
.mr-room-shell-empty {
  font-size: 0.85rem;
  color: var(--white-dim);
  padding: 1rem;
  text-align: center;
}

/* --- Explainer card (unlinked state) ---------------------------
   Mirrors the screener's `scr-intro-hint` pattern — cyan left rule,
   gradient background, eyebrow + chevron, collapsible body. The
   primary actions (Link / Add new) live inside the body so the user
   reads the contract and acts in the same moment. */
.mr-intro-card {
  display: flex;
  flex-direction: column;
  /* mr-page is a flex column — without flex-shrink:0 the room shell
     below this card pushes its height down to just its borders. */
  flex: 0 0 auto;
  margin: 0 0 1.4rem;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(0,200,200,0.06) 0%, rgba(0,0,0,0) 70%), rgba(255,255,255,0.015);
  overflow: hidden;
  max-width: 1080px;
}
/* When collapsed (the dismissed state most returning users see),
   tone the card down so it stops competing for attention with the
   stepper and the action row. Drop the cyan left border + the
   gradient, shrink the toggle's vertical padding, dim the eyebrow.
   (Live audit 2026-05-12 — collapsed bar was the brightest band on
   the page despite being secondary content.) */
.mr-intro-card.collapsed {
  border: 1px solid var(--border-light);
  border-left: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.012);
  margin: 0 0 0.9rem;
}
.mr-intro-card.collapsed .dr-intro-toggle { padding: 0.55rem 1rem; }
.mr-intro-card.collapsed .dr-intro-eyebrow { color: var(--white-dim); }
.mr-intro-card.collapsed:hover .dr-intro-eyebrow { color: var(--white-muted); }
.mr-hero,
.mr-statusbar,
.mr-room-shell { flex: 0 0 auto; }
.dr-intro-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1.4rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease;
}
.dr-intro-toggle:hover { background: rgba(255,255,255,0.025); }
.dr-intro-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.dr-intro-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.dr-intro-chevron {
  color: var(--white-dim);
  font-size: 0.7rem;
  line-height: 1;
  transition: transform 0.2s ease, color 0.15s ease;
  transform: rotate(180deg);
}
.mr-intro-card.collapsed .dr-intro-chevron { transform: rotate(0deg); }
.dr-intro-toggle:hover .dr-intro-chevron { color: var(--cyan); }
.dr-intro-body {
  padding: 0 1.4rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.mr-intro-card.collapsed .dr-intro-body { display: none; }
.dr-intro-text {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--white-muted);
  margin: 0;
  max-width: 72ch;
}
.dr-intro-text-strong { color: var(--white); font-weight: 500; margin-top: 0.25rem; }
.dr-intro-tiers {
  list-style: none;
  margin: 0 0 0.2rem;
  padding: 0 0 0 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.dr-intro-tiers li {
  font-size: 0.8rem;
  color: var(--white-muted);
  line-height: 1.5;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.dr-intro-tiers li strong { color: var(--white); font-weight: 600; }
.dr-intro-tiers .mr-vis-dot { transform: translateY(2px); }
.dr-intro-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

/* "Preview" pill in the unlinked status row. Tiny mono chip on the left
   that pairs visually with the verified/pending chip in the linked state. */
.mr-preview-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px dashed var(--border);
  color: var(--white-dim);
  background: rgba(255,255,255,0.02);
}

/* Sub-status — full-width helper text below the action buttons.
   Explains what linking does without making the user read it twice. */
.mr-substatus {
  flex-basis: 100%;
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--white-dim);
  line-height: 1.55;
  max-width: 64ch;
}

/* Visibility legend — three coloured dots above the folder tree.
   Demystifies the access tiers in five seconds. */
.mr-vis-legend {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--white-dim);
  padding-bottom: 0.8rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-light);
}
.mr-vis-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.mr-vis-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.mr-vis-dot.public  { background: var(--cyan); }
.mr-vis-dot.gated   { background: rgba(255,255,255,0.4); }
.mr-vis-dot.private { background: transparent; border: 1px solid var(--white-dim); }

/* "What happens here" tag on selected folders. */
.dr-folder-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 3px;
  background: rgba(0, 200, 200, 0.08);
  color: var(--cyan);
  border: 1px solid rgba(0, 200, 200, 0.2);
  white-space: nowrap;
}

/* Ghost rows in preview state — show what auto-fills on link. Lighter
   than real doc rows, with a small placeholder icon. */
.dr-ghost-list {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding-left: 3.1em;
}
.dr-room-folder.depth-1 .dr-ghost-list,
.dr-room-folder.depth-2 .dr-ghost-list { padding-left: 2.4em; }
.dr-ghost-doc {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  color: var(--white-dim);
  padding: 0.18rem 0;
  opacity: 0.75;
}
.dr-ghost-doc-icon {
  font-family: 'JetBrains Mono', monospace;
  color: var(--white-dim);
  opacity: 0.6;
  font-size: 0.7rem;
}
.dr-ghost-doc-name { color: var(--white-muted); }
.dr-ghost-doc-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--white-dim);
  opacity: 0.7;
}

/* Link modal — list of selectable / taken projects. */
.mr-link-list {
  max-height: 56vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}
.mr-link-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: rgba(11, 26, 46, 0.4);
}
.mr-link-row.taken { opacity: 0.55; }
.mr-link-row-l { flex: 1; font-size: 0.82rem; color: var(--white); display: flex; flex-direction: column; gap: 0.15rem; }
.mr-link-row-l strong { font-weight: 600; color: var(--white); }
.mr-link-row-l .mr-row-meta { font-size: 0.7rem; color: var(--white-dim); }
.mr-link-cta { display: flex; align-items: center; }
.mr-link-cta-btn {
  background: var(--cyan);
  color: var(--navy-deep);
  border: none;
  padding: 0.32rem 0.85rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
}
.mr-link-cta-btn:hover { background: var(--cyan-bright); }
.mr-link-cta-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white-dim);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.mr-search-row {
  margin: 0.4rem 0 1.6rem;
  max-width: 760px;
}
.mr-search {
  width: 100%;
  background: rgba(11, 26, 46, 0.7);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--white);
  padding: 0.85rem 1rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.95rem;
  transition: border-color 0.15s;
}
.mr-search:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(11, 26, 46, 0.9);
}
.mr-search::placeholder { color: var(--white-dim); }

.mr-section {
  max-width: 1080px;
  margin-bottom: 2rem;
}
.mr-section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin: 0 0 0.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.mr-section-sub {
  font-size: 0.78rem;
  color: var(--white-dim);
  margin-bottom: 0.7rem;
}
.mr-inline-link { color: var(--cyan); text-decoration: none; }
.mr-inline-link:hover { text-decoration: underline; }

.mr-row-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mr-row-list-scroll {
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 0.4rem;
}

.mr-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.95rem;
  background: rgba(11, 26, 46, 0.45);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.mr-row:hover {
  background: rgba(0, 200, 200, 0.06);
  border-color: var(--cyan);
}
.mr-row.verified { border-left: 2px solid var(--cyan); }
.mr-row.pending  { border-left: 2px solid #c8a23a; }

.mr-row-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--white);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.mr-row-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
}
.mr-row-stage {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--white);
  background: rgba(255,255,255,0.06);
  padding: 0.18rem 0.45rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mr-row-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--white-dim);
}
.mr-row-tag.verified { color: var(--cyan); border-color: var(--cyan); }
.mr-row-tag.pending  { color: #d4b65f;    border-color: #c8a23a; }
.mr-row-arrow { color: var(--white-dim); font-size: 1rem; }
.mr-row:hover .mr-row-arrow { color: var(--cyan); }
.mr-row-empty {
  padding: 1rem 1.2rem;
  border: 1px dashed var(--border);
  border-radius: 5px;
  color: var(--white-dim);
  font-size: 0.82rem;
  text-align: center;
}

.drh-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.6);
  flex: 0 0 auto;
}
.drh-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--white);
}
.drh-sub {
  font-weight: 400;
  color: var(--cyan);
  margin-left: 0.4rem;
  letter-spacing: 0.08em;
}
.drh-spacer { flex: 1; }
.drh-cap {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(6, 15, 29, 0.7);
}
.drh-cap.full { color: #fbbf24; border-color: rgba(245, 158, 11, 0.35); }

/* Accessed strip — three slots, blank when user first arrives. Same
   1200px cap as the Vault page so both surfaces share a column. */
.drh-accessed {
  max-width: 1200px;
  padding: 0.65rem 0.85rem 0.55rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.35);
  flex: 0 0 auto;
}
.drh-accessed-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.45rem;
}
.drh-slot-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.drh-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.85rem 0.95rem;
  border-radius: 6px;
  background: rgba(6, 15, 29, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  /* Square: aspect-ratio enforces a 1:1 box that scales with the column. */
  aspect-ratio: 1 / 1;
  min-height: 0;
  font-size: 0.7rem;
  color: var(--white-dim);
  position: relative;
}
.drh-slot.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  opacity: 0.55;
}
.drh-slot.filled {
  background: rgba(0, 200, 200, 0.07);
  border: 1px solid rgba(0, 200, 200, 0.22);
  color: var(--white-muted);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.drh-slot.filled:hover { background: rgba(0, 200, 200, 0.12); border-color: rgba(0, 200, 200, 0.4); }
.drh-slot.pending {
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--white-muted);
}
.drh-slot-name {
  font-weight: 600;
  color: var(--white);
  font-size: 0.72rem;
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

/* Upgrade CTA — sits under the slot row. Cyan-accented to communicate
   that this is the path to more rooms. The old in-header cap-pill is
   redundant once this exists, so it gets hidden. */
/* Analyst bar lifted to a row at the top of the page. Width and
   horizontal position match the Vault page exactly — both surfaces
   share the .vault-statusbar / 1200px constraint, so they line up
   side-by-side. The page itself has padding, so we don't add
   horizontal margin here. */
#dr-page .drh-analyst-row {
  max-width: 1200px;
  margin: 0 0 1rem;
  flex: 0 0 auto;
}
#dr-page .drh-analyst-row .drh-analyst-bar {
  margin-left: 0;
  width: 100%;
}

/* Subscribe-card style for the 3 slots — eyebrow + title, soft dashed
   border for empty, cyan for filled, square via aspect-ratio (already
   set above). Clicking an empty slot opens the project picker. */
#dr-page .drh-slot.empty {
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(255, 255, 255, 0.10);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  font-family: 'Inter', -apple-system, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--white);
  font-weight: 500;
}
#dr-page .drh-slot.empty:hover {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.04);
  color: var(--cyan);
}
#dr-page .drh-slot.empty::before {
  content: '';
  display: block;
  width: 22px; height: 22px;
  margin-bottom: 8px;
  border: 1.5px solid rgba(0, 200, 200, 0.55);
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(0, 200, 200, 0.0) 38%, rgba(0, 200, 200, 0.55) 38% 46%, rgba(0, 200, 200, 0) 46%);
  /* Plus glyph */
  box-sizing: border-box;
}
#dr-page .drh-slot.empty .slot-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
}

/* Expandable upgrade — collapsed bar + revealed panel.
   Visual styling matches the deposit-screener subscribe section so
   the two paid affordances feel like one product surface. */
.drh-upgrade-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.4rem;
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.04) 0%, rgba(0, 0, 0, 0) 60%), rgba(255, 255, 255, 0.015);
  color: var(--white-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.drh-upgrade-bar:hover {
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.07) 0%, rgba(0, 0, 0, 0) 60%), rgba(255, 255, 255, 0.02);
  border-color: rgba(0, 200, 200, 0.4);
}
.drh-upgrade-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: var(--cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--cyan);
  border-radius: 3px;
  flex-shrink: 0;
}
.drh-upgrade-text {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.005em;
  flex: 1;
}
.drh-upgrade-chevron {
  color: var(--white-dim);
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.drh-upgrade-bar[aria-expanded="true"] .drh-upgrade-chevron { transform: rotate(180deg); }

.drh-upgrade-panel {
  margin-top: 0.6rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.04) 0%, rgba(0, 0, 0, 0) 60%), rgba(255, 255, 255, 0.015);
  position: relative;
  overflow: hidden;
}
.drh-upgrade-panel[hidden] { display: none; }

/* Mirror the scr-sub-* styles inside the upgrade panel so the
   typography, eyebrow pill, and CTA card are identical to the
   deposit-screener subscribe section. The screener's rules are
   scoped to #screener-page; this block applies them on #dr-page. */
#dr-page .scr-sub-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 800px) {
  #dr-page .scr-sub-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}
#dr-page .scr-sub-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: var(--cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--cyan);
  border-radius: 3px;
  margin-bottom: 0.9rem;
}
#dr-page .scr-sub-copy h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 0.7rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
#dr-page .scr-sub-copy p {
  color: var(--white-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
  max-width: 56ch;
}
#dr-page .scr-sub-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#dr-page .scr-sub-bullets li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--white-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
#dr-page .scr-sub-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 200, 200, 0.5);
}
#dr-page .scr-sub-cta-card {
  border: 1px solid rgba(0, 200, 200, 0.35);
  border-radius: 6px;
  padding: 1.4rem 1.5rem;
  background: rgba(0, 200, 200, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
#dr-page .scr-sub-cta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--white-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#dr-page .scr-sub-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cyan);
  border-radius: 4px;
  color: var(--cyan);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
#dr-page .scr-sub-cta-btn:hover {
  background: var(--cyan);
  color: var(--navy-deep);
}

#dr-page .drh-cap { display: none !important; }
.drh-slot-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.drh-slot-meta .pending-tag { color: #fbbf24; }
.drh-slot-meta .ready-tag   { color: var(--cyan); }
.drh-slot-revoke {
  position: absolute;
  top: 4px; right: 6px;
  background: transparent;
  border: none;
  color: var(--white-dim);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}
.drh-slot-revoke:hover { color: var(--white); opacity: 1; }

/* Toolbar — search, stage filter, Puna Analyst chat */
/* Legacy helpers — the toolbar (search + chips) and the card grid
   moved to Your Vault. The wrappers stay in the DOM so legacy drh*
   functions don't throw when they touch ids inside, but they should
   never render. The [hidden] attribute alone can lose to display:flex
   rules above; force-hide here. */
#dr-page .drh-toolbar[hidden],
#dr-page .drh-grid-wrap[hidden] { display: none !important; }

.drh-toolbar {
  padding: 0.7rem 0.85rem 0.55rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.25);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.drh-tools-row {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 0.7rem;
  align-items: center;
}
.drh-search {
  width: 100%;
  background: rgba(6, 15, 29, 0.85);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  padding: 7px 10px;
  font-size: 0.75rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.15s;
}
.drh-search:focus { border-color: var(--cyan); }
.drh-search::placeholder { color: var(--white-dim); }

.drh-analyst-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(0, 200, 200, 0.28);
  border-radius: 4px;
  background: rgba(0, 200, 200, 0.04);
  position: relative;
  overflow: hidden;
}
.drh-analyst-bar::before {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 229, 0.15), transparent);
  animation: drhShimmer 6s linear infinite;
  pointer-events: none;
}
@keyframes drhShimmer { 0% { left: -150%; } 100% { left: 150%; } }
.drh-analyst-prefix {
  display: flex; align-items: center; gap: 6px;
  padding: 0 0.7rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  border-right: 1px solid rgba(0, 200, 200, 0.18);
  white-space: nowrap;
  background: rgba(0, 200, 200, 0.06);
}
.drh-analyst-prefix .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 229, 229, 0.6);
  animation: drhPulse 1.6s ease-in-out infinite;
}
.drh-analyst-prefix .live-dot.thinking { animation-duration: 0.45s; background: #fbbf24; box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
@keyframes drhPulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
.drh-analyst-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 8px 10px;
  font-size: 0.78rem;
  font-family: 'Inter', sans-serif;
  outline: none;
}
.drh-analyst-input::placeholder { color: var(--white-dim); font-style: italic; }
.drh-analyst-send {
  background: rgba(0, 200, 200, 0.1);
  border: none;
  border-left: 1px solid rgba(0, 200, 200, 0.18);
  color: var(--cyan);
  padding: 0 0.85rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.drh-analyst-send:hover { background: var(--cyan); color: var(--navy-deep); }

.drh-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.drh-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid var(--border-light);
  background: rgba(6, 15, 29, 0.7);
  color: var(--white-dim);
  cursor: pointer;
  user-select: none;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.drh-chip:hover { color: var(--white); border-color: var(--white-dim); }
.drh-chip.on    { color: var(--navy-deep); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.drh-chip-clear {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--white-dim);
  cursor: pointer;
}
.drh-chip-clear:hover { color: var(--cyan); }

/* Analyst response panel — appears below toolbar after a query.
   Constrained to 1200px so it stays aligned with the analyst bar
   above and the rest of the Data Rooms / Vault column. */
.drh-analyst-result {
  display: none;
  max-width: 1200px;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 200, 200, 0.045);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--white-muted);
  flex: 0 0 auto;
}
.drh-analyst-result.show { display: block; }

/* ----- Data Rooms Q&A — real-Claude render -----
   Shipped 2026-04-29 to replace the heuristic-only resolver.
   The question echoes at top, then Claude's answer with linkified
   [#id] citations and a row of source pills. The heuristic still runs
   as a side-effect to filter the project grid; that's mentioned at
   the bottom as a small note. */
.drh-an-q-row {
  margin: 4px 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--border);
}
.drh-an-q-lbl, .drh-an-a-lbl {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 3px;
}
.drh-an-a-lbl { color: var(--cyan-bright); }
.drh-an-q-text {
  font-size: 13px;
  color: var(--white);
  font-weight: 500;
  line-height: 1.4;
}
.drh-an-a-row {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--cyan);
}
.drh-an-a-text {
  font-size: 12.5px;
  color: var(--white);
  line-height: 1.55;
  margin-top: 2px;
}
.drh-an-a-text p { margin: 0 0 8px 0; }
.drh-an-a-text p:last-child { margin-bottom: 0; }
.drh-an-a-text.drh-an-error {
  color: var(--white-muted);
  font-style: italic;
}
.drh-an-cite {
  color: var(--cyan-bright);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.drh-an-cite:hover { text-decoration: underline; }

.drh-an-thinking {
  font-size: 12.5px;
  color: var(--white-muted);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.drh-an-dots { display: inline-flex; gap: 3px; margin-left: 4px; }
.drh-an-dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan);
  display: inline-block;
  animation: drh-an-bounce 1.4s infinite ease-in-out both;
}
.drh-an-dots span:nth-child(1) { animation-delay: -0.32s; }
.drh-an-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes drh-an-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

.drh-an-sources {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.5px dashed var(--border-light);
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
.drh-an-sources-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-right: 4px;
}
.drh-an-source {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10px; font-weight: 600;
  color: var(--cyan-bright);
  background: rgba(0,200,200,0.10);
  border: 0.5px solid rgba(0,200,200,0.25);
  border-radius: 3px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.drh-an-source:hover {
  background: rgba(0,200,200,0.20);
  color: var(--white);
}
.drh-an-source.is-disabled {
  color: var(--white-dim);
  background: rgba(255,255,255,0.04);
  border-color: var(--border-light);
}

.drh-an-filter-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--white-dim);
  font-style: italic;
}
.drh-an-filter-note strong {
  color: var(--cyan-bright);
  font-style: normal;
}
.drh-analyst-result .lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  display: block;
  margin-bottom: 4px;
}
.drh-analyst-result strong { color: var(--white); font-weight: 600; }
.drh-analyst-result a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 200, 200, 0.4);
}
.drh-analyst-result .drh-result-close {
  float: right;
  background: transparent;
  border: none;
  color: var(--white-dim);
  font-size: 0.8rem;
  cursor: pointer;
}
.drh-analyst-result .drh-result-close:hover { color: var(--white); }

/* Card grid */
.drh-grid-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem;
}
.drh-grid-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.7rem;
}
.drh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}
/* ============================================================
   2026-05-06 — Refined-D Data Rooms catalog (#dr-page).
   Empty-first design — main column carries search + chips + card
   grid. Right rail (240px) carries coach card + My Rooms slot rail
   + Pending list. Coach explains the request flow when zero rooms
   are accessed; rail populates as the user requests.
   ============================================================ */
.drx-main {
  padding: 22px 28px 60px;
}
.drx-main-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.drx-main-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
}

/* ----- Right-rail container ----- */
/* The .drx-rail is moved into #right-rail by pgaWireRightRail; while
   it still lives in #dr-page (initial render), keep it visible only
   on the datarooms view. Once moved, the rail visibility is gated by
   body.view-datarooms below. */
.drx-rail { display: none; }
body.view-datarooms .right-rail .drx-rail { display: block; }
body.view-datarooms .right-rail .drx-rail .drx-rail-section { margin-bottom: 14px; }
body.view-datarooms .right-rail .drx-rail .drx-rail-section:last-child { margin-bottom: 0; }

/* ----- Coach card (rail) ----- */
.drx-coach[hidden] { display: none; }
.drx-coach-card {
  background: rgba(0, 200, 200, 0.06);
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-left: 3px solid var(--cyan);
  border-radius: 5px;
  padding: 11px 12px;
}
.drx-coach-card .h {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
  line-height: 1.25;
}
.drx-coach-card .h.is-progress { color: var(--green, #5fe4b4); }
.drx-coach-card .s {
  font-size: 0.74rem;
  color: var(--white-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}
.drx-coach-flow {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.drx-coach-step {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 0;
}
.drx-coach-step .num {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  color: var(--white-dim);
  margin-top: 1px;
}
.drx-coach-step.is-current .num {
  background: var(--cyan);
  color: var(--navy-deep);
  border-color: var(--cyan);
}
.drx-coach-step.is-done .num {
  background: var(--green, #5fe4b4);
  color: var(--navy-deep);
  border-color: var(--green, #5fe4b4);
}
.drx-coach-step .lbl-wrap {
  flex: 1;
  min-width: 0;
}
.drx-coach-step .label {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
}
.drx-coach-step:not(.is-current):not(.is-done) .label { color: var(--white-muted); font-weight: 400; }
.drx-coach-step.is-done .label { color: var(--green, #5fe4b4); }
.drx-coach-step .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* ----- Section labels (rail) ----- */
.drx-section-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.drx-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white-dim);
}
.drx-section-label .num { color: var(--white); font-weight: 600; }

/* ----- Slot rail (rail; vertical stack) ----- */
.drx-slot-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.drx-slot {
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 7px 22px 7px 9px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px;
}
.drx-slot.is-empty {
  background: transparent;
  border: 1px dashed rgba(0, 200, 200, 0.32);
  color: var(--white-dim);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  align-items: center; justify-content: center;
  padding: 8px 9px;
}
.drx-slot.is-empty:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 200, 200, 0.04); }
.drx-slot.is-empty .plus { font-size: 0.95rem; line-height: 1; color: var(--cyan); margin-right: 4px; }
.drx-slot.is-filled { border-color: rgba(0, 200, 200, 0.45); background: rgba(0, 200, 200, 0.05); }
.drx-slot.is-filled:hover { border-color: var(--cyan); background: rgba(0, 200, 200, 0.10); }
.drx-slot.is-pending { border-color: rgba(232, 168, 56, 0.45); background: rgba(232, 168, 56, 0.04); }
.drx-slot.is-pending:hover { border-color: var(--warm); background: rgba(232, 168, 56, 0.08); }
.drx-slot .name {
  font-size: 0.74rem; font-weight: 500;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.15;
}
.drx-slot .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drx-slot.is-pending .meta { color: var(--warm); }
.drx-slot.is-filled .meta { color: var(--green, #5fe4b4); }
.drx-slot .x {
  position: absolute; top: 4px; right: 5px;
  width: 14px; height: 14px;
  text-align: center; line-height: 13px;
  font-size: 0.7rem;
  color: var(--white-dim);
  border-radius: 50%; cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.drx-slot .x:hover { color: var(--warm); background: rgba(232, 168, 56, 0.10); }

/* ----- Pending list (rail) ----- */
.drx-pending-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.drx-pending-row {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 0.74rem;
}
.drx-pending-row:last-child { border-bottom: 0; }
.drx-pending-row:hover { color: var(--cyan-bright); }
.drx-pending-row .icon {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warm);
  margin-top: 6px;
  flex-shrink: 0;
}
.drx-pending-row .body { flex: 1; min-width: 0; }
.drx-pending-row .h {
  color: var(--white);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.74rem;
}
.drx-pending-row .s {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  color: var(--white-dim);
  margin-top: 1px;
  letter-spacing: 0.04em;
}

/* 2026-05-07 — Accepted (granted) queue. Same row chrome as the
   Pending list but with a cyan dot instead of warm orange so the
   user can tell at a glance which queue a row belongs to. */
.drx-accepted-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.drx-accepted-row {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 0.74rem;
}
.drx-accepted-row:last-child { border-bottom: 0; }
.drx-accepted-row:hover { color: var(--cyan-bright); }
.drx-accepted-row .icon {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 229, 229, 0.55);
  margin-top: 6px;
  flex-shrink: 0;
}
.drx-accepted-row .body { flex: 1; min-width: 0; }
.drx-accepted-row .h {
  color: var(--white);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.74rem;
}
.drx-accepted-row .s {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  color: var(--cyan);
  margin-top: 1px;
  letter-spacing: 0.04em;
}

.drx-toolbar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
}
.drx-search {
  flex: 1;
  background: rgba(8, 18, 33, 0.94);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 14px 14px;
  border: 1px solid var(--border-light);
  color: var(--white);
  font-family: inherit;
  font-size: 0.92rem;
  padding: 10px 16px 10px 38px;
  border-radius: 6px; outline: none;
  height: 40px;
  transition: border-color 0.15s, background-color 0.15s;
}
.drx-search:hover { border-color: rgba(255, 255, 255, 0.20); }
.drx-search:focus {
  border-color: var(--cyan);
  background-color: rgba(0, 200, 200, 0.04);
  box-shadow: 0 0 0 1px rgba(0, 200, 200, 0.18);
}
.drx-search::placeholder { color: var(--white-dim); }
.drx-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
  white-space: nowrap;
}

.drx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.drx-chip {
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  color: var(--white-muted);
  font-family: inherit;
  font-size: 0.74rem;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
}
.drx-chip:hover { background: rgba(0, 200, 200, 0.04); border-color: rgba(0, 200, 200, 0.35); color: var(--white); }
.drx-chip.is-on { background: rgba(0, 200, 200, 0.14); border-color: var(--cyan); color: var(--cyan-bright); }

.drx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.drx-grid-empty {
  text-align: center;
  color: var(--white-dim);
  font-size: 0.85rem;
  padding: 64px 24px;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 8px;
}
.drx-grid-empty[hidden] { display: none; }

.drx-card {
  display: flex; flex-direction: column;
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.drx-card:hover {
  border-color: rgba(0, 200, 200, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.drx-card.is-open { border-color: rgba(95, 228, 180, 0.45); }
.drx-card-img {
  height: 110px;
  background-size: cover; background-position: center;
  position: relative;
}
.drx-card-img.s-prod { background: linear-gradient(135deg, rgba(0, 200, 200, 0.45), rgba(11, 26, 46, 0.85)); }
.drx-card-img.s-cons { background: linear-gradient(135deg, rgba(232, 168, 56, 0.45), rgba(11, 26, 46, 0.85)); }
.drx-card-img.s-pfs  { background: linear-gradient(135deg, rgba(180, 200, 80, 0.45), rgba(11, 26, 46, 0.85)); }
.drx-card-img.s-pea  { background: linear-gradient(135deg, rgba(140, 160, 200, 0.32), rgba(11, 26, 46, 0.85)); }
.drx-card-img.s-exp  { background: linear-gradient(135deg, rgba(116, 174, 90, 0.32), rgba(11, 26, 46, 0.85)); }
.drx-card-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 15, 29, 0.9) 100%);
}
.drx-card-img-tag {
  position: absolute; top: 6px; left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(6, 15, 29, 0.7);
  border: 1px solid var(--border-light);
  border-radius: 2px; color: var(--white-dim);
  z-index: 2;
}
.drx-card-img-stage {
  position: absolute; bottom: 6px; right: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px;
  font-weight: 600; z-index: 2;
}
.drx-card-img-stage.s-prod  { background: rgba(0, 200, 200, 0.85);   color: #062020; }
.drx-card-img-stage.s-cons  { background: rgba(220, 110, 60, 0.9);   color: #1f0f06; }
.drx-card-img-stage.s-pfs   { background: rgba(240, 210, 100, 0.85); color: #1f1a06; }
.drx-card-img-stage.s-pea   { background: rgba(180, 200, 80, 0.85);  color: #1a1f06; }
.drx-card-img-stage.s-exp   { background: rgba(116, 174, 90, 0.85);  color: #08160a; }
.drx-card-body {
  padding: 11px 13px 12px;
  display: flex; flex-direction: column; gap: 3px; flex: 1;
}
.drx-card-name { font-size: 0.94rem; font-weight: 600; color: var(--white); line-height: 1.25; }
.drx-card-op   { font-size: 0.74rem; color: var(--white-muted); }
.drx-card-loc  {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--white-dim);
  margin-top: 2px;
}
.drx-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px;
  border-top: 1px solid var(--border);
}
.drx-card-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.10em; text-transform: uppercase;
}
.drx-card-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.drx-card-status.is-open    { color: var(--green, #5fe4b4); }
.drx-card-status.is-open .dot { background: var(--green, #5fe4b4); box-shadow: 0 0 6px rgba(95, 228, 180, 0.6); }
.drx-card-status.is-pending { color: var(--warm); }
.drx-card-status.is-pending .dot { background: var(--warm); }
.drx-card-status.is-locked  { color: var(--white-dim); }
.drx-card-status.is-locked .dot  { background: var(--white-dim); }
.drx-card-cta {
  background: rgba(0, 200, 200, 0.10);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.drx-card-cta:hover { background: rgba(0, 200, 200, 0.18); color: var(--cyan-bright); }
.drx-card-cta.is-quiet {
  background: transparent; border-color: var(--border-light); color: var(--white-muted);
}
.drx-card-cta.is-quiet:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(0, 200, 200, 0.06); }

.drh-pcard {
  display: flex;
  flex-direction: column;
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  min-height: 320px;
  cursor: pointer;
}
.drh-pcard:hover {
  border-color: rgba(0, 200, 200, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}
.drh-pcard-img {
  height: 130px;
  background-size: cover;
  background-position: center;
  background-color: rgba(6, 15, 29, 0.85);
  position: relative;
  cursor: pointer;
}
.drh-pcard-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 15, 29, 0.85) 100%);
  pointer-events: none;
}
.drh-pcard-img-tag {
  position: absolute;
  top: 6px; left: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(6, 15, 29, 0.7);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  color: var(--white-dim);
  z-index: 2;
}
.drh-pcard-stage {
  position: absolute;
  bottom: 6px; right: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  z-index: 2;
  font-weight: 600;
}
.drh-pcard-stage.s-greenfield  { background: rgba(116, 174, 90, 0.85);  color: #08160a; }
.drh-pcard-stage.s-pea         { background: rgba(180, 200, 80, 0.85);  color: #1a1f06; }
.drh-pcard-stage.s-pfs         { background: rgba(240, 210, 100, 0.85); color: #1f1a06; }
.drh-pcard-stage.s-fs          { background: rgba(245, 158, 11, 0.9);   color: #1f1206; }
.drh-pcard-stage.s-construction{ background: rgba(220, 110, 60, 0.9);   color: #1f0f06; }
.drh-pcard-stage.s-base        { background: rgba(0, 200, 200, 0.85);   color: #062020; }
.drh-pcard-stage.s-full        { background: rgba(120, 220, 220, 0.95); color: #062020; }
.drh-pcard-stage.s-default     { background: rgba(255, 255, 255, 0.18); color: var(--white); }

.drh-pcard-body {
  padding: 0.7rem 0.8rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.drh-pcard-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
}
.drh-pcard-op {
  font-size: 0.7rem;
  color: var(--white-muted);
}
.drh-pcard-loc {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 2px;
}
.drh-pcard-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.drh-pcard-meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.drh-pcard-meta-lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.drh-pcard-meta-val {
  font-size: 0.72rem;
  color: var(--white);
  font-weight: 500;
}
.drh-pcard-meta-val.dim { color: var(--white-muted); font-weight: 400; }

.drh-pcard-why {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--white-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-align: left;
}
.drh-pcard-why:hover {
  background: rgba(0, 200, 200, 0.06);
  color: var(--cyan);
  border-color: rgba(0, 200, 200, 0.18);
}
.drh-pcard-why-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 200, 200, 0.6);
  flex: 0 0 auto;
}
.drh-pcard-why-lbl { flex: 1 1 auto; }
.drh-pcard-why-caret {
  font-size: 0.65rem;
  color: var(--white-dim);
  transition: transform 0.18s ease;
  flex: 0 0 auto;
}
.drh-pcard-why.open {
  background: rgba(0, 200, 200, 0.08);
  color: var(--cyan);
  border-color: rgba(0, 200, 200, 0.22);
}
.drh-pcard-why.open .drh-pcard-why-caret { transform: rotate(180deg); color: var(--cyan); }
.drh-pcard-why-body {
  margin-top: 6px;
  padding: 9px 11px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--white-muted);
  background: rgba(0, 200, 200, 0.04);
  border-left: 2px solid var(--cyan);
  border-radius: 0 3px 3px 0;
}
.drh-pcard-why-body[hidden] { display: none; }
.drh-pcard-why-anchor {
  color: var(--white);
  font-weight: 500;
  margin-right: 4px;
}
.drh-pcard-why-anchor strong { color: var(--cyan); font-weight: 600; }
.drh-pcard-why-stage {
  color: var(--white);
  font-weight: 600;
  margin-right: 4px;
}

.drh-pcard-actions {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
}
.drh-pcard-btn {
  flex: 1;
  padding: 9px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  background: transparent;
  color: var(--white-muted);
}
.drh-pcard-btn:hover { background: rgba(255, 255, 255, 0.04); color: var(--white); }
.drh-pcard-btn.primary {
  background: rgba(0, 200, 200, 0.12);
  color: var(--cyan);
  border-left: 1px solid var(--border);
}
.drh-pcard-btn.primary:hover { background: var(--cyan); color: var(--navy-deep); font-weight: 600; }
.drh-pcard-btn.primary[disabled] {
  background: rgba(255, 255, 255, 0.04);
  color: var(--white-dim);
  cursor: not-allowed;
}
.drh-pcard-btn.primary.requested {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  cursor: default;
}
.drh-pcard-btn.primary.granted {
  background: rgba(95, 228, 180, 0.12);
  color: var(--success, #5fe4b4);
  cursor: default;
}

.drh-empty {
  padding: 2rem;
  text-align: center;
  color: var(--white-dim);
  font-size: 0.8rem;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 4px;
}

/* ============================================================
   PROJECT DETAIL — full-page view (no longer a modal overlay).
   Mirrors the show/hide pattern of #dr-page so it owns the entire
   workspace when active. Layout:
     TOPBAR  — back to Data Rooms + project title + close
     MAIN    — sidebar nav (NI 43-101) + scrolling content
     FOOTER  — persistent action bar (Request Access + Report Error)
   ============================================================ */
.drh-detail {
  /* Fill the content area only — keep the cyan strip + topbar (39px)
     and the left sidebar (240px) visible at all times so the user
     never loses navigation. Triggered from Data Rooms cards AND from
     the Virtual Explorer Owners panel. */
  position: fixed;
  top: 39px;
  left: 240px;
  right: 0;
  bottom: 0;
  z-index: 1900;
  display: none;
  background: rgba(6, 15, 29, 0.98);
  font-family: 'Inter', sans-serif;
  color: var(--white);
  flex-direction: column;
}
.drh-detail.show { display: flex; }
.drh-detail-card {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  box-shadow: none;
}
.drh-detail-topbar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.6);
  flex: 0 0 auto;
}
.drh-detail-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-muted);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.drh-detail-back:hover { color: var(--white); border-color: var(--white-dim); background: rgba(255,255,255,0.04); }
.drh-detail-topbar-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--white);
}
.drh-detail-topbar-title .sub {
  color: var(--cyan);
  margin-left: 0.4rem;
  letter-spacing: 0.08em;
  font-weight: 400;
}
.drh-detail-topbar-spacer { flex: 1; }
.drh-detail-close {
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--border-light);
  color: var(--white-muted);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer; border-radius: 3px;
  z-index: 10;
}
.drh-detail-close:hover { color: var(--white); background: rgba(255,255,255,0.06); border-color: var(--white-dim); }

.drh-detail-main {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 0;
  overflow: hidden;
}

.drh-detail-nav {
  background: rgba(6, 15, 29, 0.55);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 0.85rem 0;
}
.drh-detail-nav-section {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 0.6rem 0.85rem 0.35rem;
}
.drh-detail-nav-item {
  padding: 5px 0.85rem 5px 1.25rem;
  font-size: 0.7rem;
  color: var(--white-muted);
  cursor: pointer;
  border-left: 2px solid transparent;
  position: relative;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  display: flex; align-items: center; gap: 6px;
}
.drh-detail-nav-item:hover { color: var(--white); background: rgba(255,255,255,0.03); }
.drh-detail-nav-item.active {
  color: var(--cyan);
  background: rgba(0, 200, 200, 0.08);
  border-left-color: var(--cyan);
}
.drh-detail-nav-item .ni-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  color: var(--white-dim);
  width: 18px;
  text-align: right;
  flex: 0 0 auto;
}
.drh-detail-nav-item .ni-status {
  margin-left: auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--white-dim);
  flex: 0 0 auto;
}
.drh-detail-nav-item .ni-status.has-data  { background: var(--cyan); box-shadow: 0 0 4px rgba(0, 229, 229, 0.6); }
.drh-detail-nav-item .ni-status.partial   { background: #fbbf24; }
.drh-detail-nav-item .ni-status.gated     { background: rgba(255,255,255,0.18); }

.drh-detail-body {
  overflow-y: auto;
  padding: 1.6rem 2rem 2.5rem;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.drh-detail-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.4rem;
}
.drh-detail-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.drh-detail-sub {
  font-size: 0.85rem;
  color: var(--white-muted);
  margin-bottom: 1.4rem;
}
.drh-detail-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.4rem;
  padding: 0.85rem 1rem;
  background: rgba(6, 15, 29, 0.55);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.drh-summary-cell {
  display: flex; flex-direction: column; gap: 2px;
}
.drh-summary-cell .lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.drh-summary-cell .val {
  font-size: 0.95rem;
  color: var(--white);
  font-weight: 600;
}
.drh-summary-cell .val.dim { color: var(--white-muted); font-weight: 400; font-size: 0.85rem; }

/* ============================================================
   PUNA DATA ROOM (V1.0) — folder tree + provenance + admin tools.
   Lives inside the project-detail overlay. See puna/SPEC.md F-005
   and puna/planning/data-room-feature-v1.md.
   ============================================================ */
.dr-room-section {
  --dr-accent: var(--cyan);          /* overridden per-room from data_rooms.brand_accent */
  border-left: 2px solid var(--dr-accent);
  padding-left: 0.85rem;
  margin-bottom: 2rem;
}
.dr-room-shell { font-size: 0.82rem; color: var(--white-muted); }
.dr-room-loading,
.dr-room-empty {
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border);
  color: var(--white-dim);
  border-radius: 6px;
  font-size: 0.78rem;
}
.dr-room-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.dr-room-header-l { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.dr-room-header-r { display: flex; align-items: center; gap: 0.6rem; }
.dr-room-stat {
  font-size: 0.78rem;
  color: var(--white-dim);
}
.dr-room-badge {
  font-size: 0.68rem;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.dr-room-badge.verified { color: var(--cyan); border-color: var(--cyan); background: rgba(0,200,200,0.06); }
.dr-room-badge.curated  { color: var(--white-dim); border-color: var(--border); }

.dr-room-legend { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.prov-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.42rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--white-dim);
  text-transform: uppercase;
  white-space: nowrap;
}
.prov-chip.prov-puna_curated  { color: var(--cyan); border-color: rgba(0,200,200,0.4); }
.prov-chip.prov-public_record { color: var(--white-muted); border-color: var(--border-light); }
.prov-chip.prov-operator      { color: var(--white); border-color: var(--white-dim); }

.dr-room-claim-btn {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0.8rem;
  padding: 0.65rem 0.8rem;
  background: rgba(0,200,200,0.08);
  border: 1px dashed var(--cyan);
  color: var(--cyan);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.dr-room-claim-btn:hover { background: rgba(0,200,200,0.15); }

.dr-room-admin-bar {
  display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 0.45rem 0;
  margin: 0.4rem 0 0.7rem;
}
.dr-room-admin-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 0.4rem;
  opacity: 0.7;
}
.dr-room-admin-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white-muted);
  padding: 0.32rem 0.7rem;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: 'Inter', -apple-system, sans-serif;
}
.dr-room-admin-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.dr-room-admin-btn.primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--navy-deep);
  font-weight: 600;
}
.dr-room-admin-btn.primary:hover { background: var(--cyan-bright); color: var(--navy-deep); }
.dr-room-admin-btn.ghost { background: transparent; }

/* Brief highlight when the user clicks "Open admin tools" from the
   bottom action bar — pulls the eye to the upload/access/edit row. */
/* 2026-05-06 — Data-room folder gate chips + Puna Agent tile.
   - Project Snapshot is the only folder open by default for investors
     without granted access. Every other top-level folder renders with
     the .is-locked class, a lock glyph, and a "Gated" chip.
   - The Puna Agent · Public Data Analysis tile is a synthetic 11th
     folder at the bottom of the tree. Cyan-tinted treatment makes it
     visually distinct from the regular folders. */
.dr-folder-gate {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  margin-left: 6px;
  white-space: nowrap;
}
.dr-folder-gate.is-public { background: rgba(95, 228, 180, 0.14); color: var(--green, #5fe4b4); }
.dr-folder-gate.is-open   { background: rgba(95, 228, 180, 0.14); color: var(--green, #5fe4b4); }
.dr-folder-gate.is-gated  { background: rgba(155, 171, 196, 0.10); color: var(--white-dim, #8794ad); }
.dr-folder-gate.is-puna   { background: rgba(0, 200, 200, 0.16); color: var(--cyan, #00c8c8); }

.dr-room-folder.is-locked .dr-room-folder-code {
  color: var(--white-dim, #8794ad);
  font-size: 0.85rem;
}
.dr-room-folder.is-locked .dr-room-folder-name {
  color: var(--white-muted, #9babc4);
}
.dr-room-folder-locked-note {
  font-size: 0.78rem;
  color: var(--white-dim, #8794ad);
  padding: 6px 0 0 6px;
  font-style: italic;
}

/* 2026-05-06 — Project Snapshot's project-record content. Shown
   inside Project Snapshot folder ('1') when no operator docs exist. */
.dr-snap-card {
  background: rgba(6, 15, 29, 0.45);
  border: 1px solid rgba(0, 200, 200, 0.18);
  border-radius: 4px;
  padding: 14px 16px 12px;
  margin: 4px 0 0 30px;
}
.dr-snap-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan, #00c8c8);
  margin-bottom: 6px;
}
.dr-snap-name {
  font-size: 1rem; font-weight: 600;
  color: var(--white, #f0f4f8);
  line-height: 1.25;
  margin-bottom: 2px;
}
.dr-snap-op {
  font-size: 0.78rem;
  color: var(--white-muted, #9babc4);
  margin-bottom: 10px;
}
.dr-snap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 22px;
  margin-bottom: 10px;
}
.dr-snap-row {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
}
.dr-snap-row .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white-dim, #8794ad);
  margin-bottom: 1px;
}
.dr-snap-row .val {
  color: var(--white, #f0f4f8);
  font-weight: 500;
}
.dr-snap-foot {
  font-size: 0.72rem;
  color: var(--white-dim, #8794ad);
  line-height: 1.5;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 8px;
}
.dr-snap-foot strong {
  color: var(--cyan, #00c8c8);
  font-weight: 600;
}

.dr-room-folder.dr-room-folder-puna {
  background: rgba(0, 200, 200, 0.05);
  border-left: 2px solid var(--cyan, #00c8c8);
  margin-top: 14px;
}

/* 2026-05-06 — Puna Agent section header (in body, after the
   Synthetic Data Room, before the NI 43-101 sections). Reads as the
   transition surface between the gated folder tree above and the
   puna-generated content below. */
.drh-detail-section.dr-puna-agent-section {
  margin: 1.6rem 0 1.2rem;
  padding: 0;
  background: transparent;
  border: 0;
}
.dr-puna-agent-card {
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.08) 0%, rgba(0, 200, 200, 0.03) 60%, rgba(11, 26, 46, 0.5) 100%);
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-left: 3px solid var(--cyan, #00c8c8);
  border-radius: 6px;
  padding: 18px 22px 16px;
  position: relative;
}
.dr-puna-agent-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-bright, #00e5e5);
}
.dr-puna-agent-glyph {
  font-size: 1rem;
  line-height: 1;
  color: var(--cyan, #00c8c8);
}
.dr-puna-agent-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white, #f0f4f8);
  margin-bottom: 8px;
  line-height: 1.35;
}
.dr-puna-agent-body {
  font-size: 0.85rem;
  color: var(--white-muted, #9babc4);
  line-height: 1.5;
  margin-bottom: 14px;
}
.dr-puna-agent-actions {
  display: flex;
  justify-content: flex-end;
}

/* 2026-05-07 — Document structure (SDR) flat folder list inside the
   Vault project page. Single-line rows, icon + name + count + chip;
   Project Snapshot public, folders 2–10 gated, Puna Agent row at the
   bottom links to the agent section beneath the list. */
.vault-pp-sdr-section { margin-top: 1.4rem; }
.vault-pp-sdr-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan, #00c8c8);
  margin-bottom: 0.55rem;
}
.vault-sdr-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.vault-sdr-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: rgba(6, 15, 29, 0.45);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  border-radius: 4px;
  padding: 10px 14px 10px 12px;
  font-size: 0.85rem;
  color: var(--white, #f0f4f8);
  transition: border-color 0.12s, background 0.12s;
}
.vault-sdr-row.is-public:hover {
  border-color: rgba(95, 228, 180, 0.35);
  background: rgba(95, 228, 180, 0.04);
}
.vault-sdr-row.is-gated {
  cursor: help;
  opacity: 0.92;
}
.vault-sdr-row.is-gated .vault-sdr-name { color: var(--white-muted, #9babc4); }
/* 2026-05-07 — Puna Agent row now mirrors the public/unlocked rows
   above (same background, border, text colour). Only the Run Analysis
   pill on the right is interactive — see .vault-sdr-chip.is-puna-action. */
.vault-sdr-row.is-puna {
  /* Inherits .vault-sdr-row defaults — no cyan glow, no left border. */
}

.vault-sdr-icon {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.vault-sdr-icon.vault-sdr-icon-pub  { color: var(--cyan, #00c8c8); }
.vault-sdr-icon.vault-sdr-icon-lock { color: var(--white-dim, #8794ad); font-size: 0.85rem; }
.vault-sdr-icon.vault-sdr-icon-puna { color: var(--cyan, #00c8c8); font-size: 1rem; }

.vault-sdr-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vault-sdr-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--white-muted, #9babc4);
}
.vault-sdr-row.is-gated .vault-sdr-count { color: var(--white-dim, #8794ad); }

.vault-sdr-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.vault-sdr-chip.is-public { background: rgba(95, 228, 180, 0.14); color: var(--green, #5fe4b4); }
.vault-sdr-chip.is-gated  { background: rgba(155, 171, 196, 0.10); color: var(--white-dim, #8794ad); }
.vault-sdr-chip.is-puna   { background: rgba(0, 200, 200, 0.16); color: var(--cyan, #00c8c8); white-space: nowrap; }
/* 2026-05-07 — clickable Run Analysis pill on the Puna Agent row.
   Visually distinct from the static Public/Gated chips so users see
   the affordance, but the row chrome stays calm to match the other
   rows above. */
.vault-sdr-chip.is-puna-action {
  background: rgba(0, 200, 200, 0.16);
  color: var(--cyan, #00c8c8);
  white-space: nowrap;
  border: 1px solid rgba(0, 200, 200, 0.45);
  cursor: pointer;
  font-weight: 600;
  padding: 3px 10px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.vault-sdr-chip.is-puna-action:hover {
  background: rgba(0, 200, 200, 0.28);
  border-color: var(--cyan, #00c8c8);
  color: var(--cyan-bright, #00e5e5);
}

/* Live-run states: progress chip in the eyebrow, results panel below
   the title, blinking cursor while streaming. */
.dr-puna-agent-results {
  background: rgba(6, 15, 29, 0.55);
  border: 1px solid rgba(0, 200, 200, 0.18);
  border-radius: 5px;
  padding: 14px 18px;
  font-size: 0.88rem;
  color: var(--white-muted, #9babc4);
  line-height: 1.55;
  margin-top: 10px;
  max-height: 600px;
  overflow-y: auto;
}
.dr-puna-agent-results h2,
.dr-puna-agent-results h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white, #f0f4f8);
  margin: 14px 0 6px;
}
.dr-puna-agent-results h4 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cyan, #00c8c8);
  margin: 10px 0 4px;
  letter-spacing: 0.02em;
}
.dr-puna-agent-results h2:first-child,
.dr-puna-agent-results h3:first-child,
.dr-puna-agent-results h4:first-child { margin-top: 0; }
.dr-puna-agent-results p {
  margin: 0 0 10px;
}
.dr-puna-agent-results strong {
  color: var(--white, #f0f4f8);
  font-weight: 600;
}
.dr-puna-agent-results ul {
  margin: 6px 0 12px 6px;
  padding-left: 16px;
}
.dr-puna-agent-results li {
  margin-bottom: 4px;
  list-style: disc outside;
}
.dr-puna-agent-results a {
  color: var(--cyan, #00c8c8);
  text-decoration: underline;
}
.dr-puna-agent-results a:hover { color: var(--cyan-bright, #00e5e5); }
.dr-puna-agent-results pre {
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(0, 200, 200, 0.3);
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  margin: 8px 0;
}
.dr-puna-cursor {
  display: inline-block;
  color: var(--cyan, #00c8c8);
  animation: drPunaCursor 1.05s steps(1) infinite;
  font-weight: 700;
  margin-left: 1px;
}
@keyframes drPunaCursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.dr-puna-agent-error {
  color: var(--warm, #e8a838);
  background: rgba(232, 168, 56, 0.08);
  border-left: 2px solid var(--warm, #e8a838);
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  margin: 6px 0;
}
.dr-puna-agent-rerun {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.dr-room-folder.dr-room-folder-puna .dr-room-folder-name {
  color: var(--cyan-bright, #00e5e5);
  font-weight: 600;
}
.dr-room-folder.dr-room-folder-puna .dr-room-folder-code {
  color: var(--cyan, #00c8c8);
  font-size: 1rem;
}
.dr-room-puna-actions {
  display: flex; justify-content: flex-end;
  padding: 0 12px 12px;
}
.dr-room-puna-cta {
  background: rgba(0, 200, 200, 0.14);
  border: 1px solid var(--cyan, #00c8c8);
  color: var(--cyan-bright, #00e5e5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s;
}
.dr-room-puna-cta:hover { background: rgba(0, 200, 200, 0.22); }

@keyframes drRoomAdminFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 200, 0); }
  40%      { box-shadow: 0 0 0 4px rgba(0, 200, 200, 0.45); }
}
.dr-room-admin-bar.flash { animation: drRoomAdminFlash 1.3s ease-in-out 1; }

/* Toast stack — bottom-right, non-blocking, ephemeral. Used for every
   major user action so the system always confirms what just happened. */
.dr-toast-stack {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9100;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
}
.dr-toast {
  background: var(--navy-deep);
  border: 1px solid var(--cyan);
  border-left: 3px solid var(--cyan);
  color: var(--white);
  padding: 0.6rem 0.95rem;
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  min-width: 220px;
  max-width: 360px;
  pointer-events: auto;
  animation: drToastIn 0.18s ease-out, drToastOut 0.3s ease-in 2.4s forwards;
}
.dr-toast.warn  { border-color: rgba(200,162,58,0.6); border-left-color: rgba(200,162,58,0.85); }
.dr-toast.error { border-color: rgba(255,140,140,0.55); border-left-color: rgba(255,140,140,0.85); color: rgba(255,200,200,0.95); }
@keyframes drToastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes drToastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}

/* First-folder pulse — fires once after a user links, focusing
   attention on Project Snapshot where Puna's auto-fills land. */
@keyframes drFolderPulse {
  0%   { background: rgba(0, 200, 200, 0); }
  30%  { background: rgba(0, 200, 200, 0.14); }
  100% { background: rgba(0, 200, 200, 0); }
}
.dr-folder-pulse { animation: drFolderPulse 1.8s ease-out 1; border-radius: 4px; }

/* Preview-as-investor toggle — small inline switch on the linked room
   header. Lets the operator feel what investors see without changing
   permissions server-side. */
.dr-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  color: var(--white-dim);
  cursor: pointer;
  user-select: none;
  font-family: 'Inter', -apple-system, sans-serif;
}
.dr-view-toggle input { accent-color: var(--cyan); }
.dr-view-toggle:hover { color: var(--white); }
.dr-room-investor-banner {
  font-size: 0.74rem;
  color: var(--cyan);
  border: 1px dashed var(--cyan);
  background: rgba(0, 200, 200, 0.05);
  border-radius: 4px;
  padding: 0.45rem 0.7rem;
  margin: 0.3rem 0 0.7rem;
}

/* Domain match in the link modal — projects whose operator domain
   matches the signed-in user's email get a small recognition tag and
   a soft highlight, plus they bubble to the top via JS sort. */
.mr-link-row.domain-match {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.04);
}
.mr-link-row-domain-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 0.14rem 0.45rem;
  border-radius: 3px;
  background: rgba(0, 200, 200, 0.1);
  border: 1px solid rgba(0, 200, 200, 0.3);
  margin-left: 0.5rem;
}

.dr-room-access-banner {
  font-size: 0.72rem;
  border: 1px solid var(--border);
  padding: 0.45rem 0.6rem;
  border-radius: 5px;
  margin-bottom: 0.7rem;
}
.dr-room-access-banner.granted { border-color: var(--cyan); color: var(--cyan); }
.dr-room-access-banner.pending { border-color: var(--white-dim); color: var(--white-dim); }
.dr-room-access-banner.denied  { border-color: rgba(255,140,140,0.6); color: rgba(255,140,140,0.9); }

/* --- Folder tree -------------------------------------------------
   Bordered boxes replaced with a clean typographic tree.
   Top-level folders are anchors; sub-folders nest with a soft left
   line. Hover reveals interactive surface; static (preview) state
   recedes. */
.dr-room-tree { display: flex; flex-direction: column; }
.dr-room-folder {
  position: relative;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-light);
  transition: background 0.12s ease;
}
.dr-room-folder:first-child { border-top: none; }
/* Top-level folders get a card treatment so each section reads as a
   distinct unit instead of a flat list (live audit 2026-05-12 — the
   tree was hard to scan because every depth read at the same weight).
   Light surface, generous padding, separated by gap on the parent. */
.dr-room-folder.depth-0 {
  padding: 0.85rem 1rem 0.95rem;
  border-top: none;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  margin-bottom: 0.55rem;
}
.dr-room-folder.depth-0:hover {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--border);
}
.dr-room-folder.depth-1,
.dr-room-folder.depth-2 {
  border-top: none;
  padding: 0.32rem 0.4rem 0.32rem 1.4rem;
  margin-left: 0.5rem;
  border-left: 1px solid var(--border-light);
}
.dr-room-folder.depth-2 { padding-left: 2.2rem; }
.dr-room-folder:hover { background: rgba(0, 200, 200, 0.025); }
.mr-room-shell.preview .dr-room-folder:hover { background: transparent; }

.dr-room-folder-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.dr-room-folder-code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: var(--white-dim);
  font-weight: 500;
  min-width: 2.4em;
  letter-spacing: 0.02em;
}
/* Top-level codes render as a small cyan eyebrow chip inside the
   card (live audit 2026-05-12 — the bare floating digit reads as a
   loose label; the chip frames it as the section identifier). */
.dr-room-folder.depth-0 .dr-room-folder-code {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0, 200, 200, 0.08);
  border: 1px solid rgba(0, 200, 200, 0.22);
  border-radius: 3px;
  padding: 2px 7px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  margin-right: 0.2rem;
}
/* Lock-glyph variant for gated top-level folders — the renderer
   passes a 🔒 in lieu of the code when the folder is locked. Keep
   the chip frame so the locked state still reads as a section
   identifier, just not cyan. */
.dr-room-folder.depth-0.is-locked .dr-room-folder-code {
  color: var(--white-dim);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-light);
}
.dr-room-folder-name {
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--white-muted);
  flex: 1;
  letter-spacing: -0.005em;
}
.dr-room-folder.depth-0 .dr-room-folder-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--white);
}
.dr-room-folder-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.63rem;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}
.dr-room-folder:hover .dr-room-folder-count { opacity: 1; }
.dr-room-folder-upload {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--white-dim);
  font-size: 0.65rem;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.12s, border-color 0.12s;
}
.dr-room-folder:hover .dr-room-folder-upload { opacity: 1; }
.dr-room-folder-upload:hover { color: var(--cyan); border-color: var(--cyan); }
.dr-room-folder-desc {
  font-size: 0.74rem;
  color: var(--white-dim);
  margin-top: 0.2rem;
  margin-left: 3.1em;
  line-height: 1.4;
}
.dr-room-folder.depth-1 .dr-room-folder-desc,
.dr-room-folder.depth-2 .dr-room-folder-desc { margin-left: 2.4em; font-size: 0.72rem; }
.dr-room-folder-empty {
  font-size: 0.72rem;
  color: var(--white-dim);
  padding: 0.25rem 0 0.1rem 3.1em;
  font-style: italic;
}
.dr-room-doc-list {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding-left: 3.1em;
}
.dr-room-doc {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.32rem 0.45rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.025);
}
.dr-room-doc:hover { background: rgba(0,200,200,0.06); }
.dr-room-doc-name {
  font-size: 0.78rem; color: var(--white); font-weight: 500;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-room-doc-desc {
  font-size: 0.7rem; color: var(--white-dim);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-room-doc-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  color: var(--white-dim);
}
.dr-room-doc-open {
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: 0.65rem;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
}
.dr-room-doc-open:hover { background: var(--cyan); color: var(--navy-deep); }
.dr-room-doc.locked { opacity: 0.7; }
.dr-room-doc-open.locked,
.dr-room-doc-open[disabled] {
  border-color: var(--white-dim);
  color: var(--white-dim);
  cursor: not-allowed;
}
.dr-room-doc-open.locked:hover,
.dr-room-doc-open[disabled]:hover { background: transparent; color: var(--white-dim); }
.dr-room-doc-del {
  background: transparent; border: 1px solid var(--border);
  color: var(--white-dim); width: 22px; height: 22px;
  border-radius: 3px; cursor: pointer; font-size: 0.85rem;
  line-height: 1;
}
.dr-room-doc-del:hover { color: rgba(255,140,140,0.9); border-color: rgba(255,140,140,0.5); }

/* §§ SECTION: drd-uploader — drop zone + classifier + progress + lock
   icon, all surface-prefixed `drd-up-` (or `dr-room-doc-lock` for the
   per-row lock).  Lives inside the existing #dr-room-shell layout so
   the data room remains a single tree on screen. CSS variables only;
   no hardcoded colors. (V2.0 file upload UX, 2026-05-11)            */
.drd-up-shell {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
  padding: 0.6rem 0.7rem;
  margin: 0.3rem 0 0.8rem;
}
.drd-up-zone {
  border: 1.5px dashed var(--border);
  border-radius: 5px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
  color: var(--white-muted);
  user-select: none;
}
.drd-up-zone:hover,
.drd-up-zone.is-hover {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.04);
  color: var(--white);
}
.drd-up-zone.is-dragover {
  border-color: var(--cyan-bright);
  background: rgba(0, 200, 200, 0.09);
  color: var(--white);
}
/* Compact mode — kicks in once any operator file exists. Single-line
   strip, no hint copy, smaller padding. The drop-target behaviour is
   unchanged; the user can still drag onto it. (IA review 2026-05-12:
   prominent-when-empty, quiet-when-active.) */
.drd-up-zone.is-compact {
  padding: 0.45rem 0.7rem;
  gap: 0.55rem;
}
.drd-up-zone.is-compact .drd-up-zone-glyph { font-size: 0.85rem; }
.drd-up-zone.is-compact .drd-up-zone-title { font-size: 0.74rem; font-weight: 500; }
.drd-up-zone.is-compact .drd-up-zone-hint  { display: none; }
.drd-up-shell.is-compact {
  padding: 0.4rem 0.55rem;
}
.drd-up-zone-glyph {
  font-size: 1.1rem;
  color: var(--cyan);
  flex: 0 0 auto;
}
.drd-up-zone-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  flex: 1 1 auto;
  min-width: 0;
}
.drd-up-zone-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
}
.drd-up-zone-hint {
  font-size: 0.68rem;
  color: var(--white-dim);
  line-height: 1.4;
}
.drd-up-list {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.drd-up-item {
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: rgba(255,255,255,0.025);
  padding: 0.45rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.drd-up-item.is-error {
  border-color: rgba(255,140,140,0.4);
  background: rgba(255,140,140,0.05);
}
.drd-up-item.is-done {
  border-color: rgba(0,200,200,0.35);
}
.drd-up-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
}
.drd-up-row .drd-up-name {
  color: var(--white);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drd-up-row .drd-up-size {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--white-dim);
}
.drd-up-row .drd-up-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.drd-up-item.is-done .drd-up-status { color: var(--cyan); }
.drd-up-item.is-error .drd-up-status { color: rgba(255,140,140,0.9); }
.drd-up-progress {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.drd-up-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--cyan);
  transition: width 0.12s linear;
}
.drd-up-item.is-done .drd-up-progress-bar { background: var(--cyan-bright); width: 100%; }
.drd-up-item.is-error .drd-up-progress-bar { background: rgba(255,140,140,0.9); }
.drd-up-classifier {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.7rem;
  color: var(--white-muted);
}
.drd-up-classifier .drd-up-suggest {
  color: var(--white);
  background: rgba(0, 200, 200, 0.07);
  border: 1px solid rgba(0, 200, 200, 0.4);
  border-radius: 3px;
  padding: 0.16rem 0.45rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
}
.drd-up-classifier select {
  background: var(--navy-deep);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 0.2rem 0.35rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-family: inherit;
}
.drd-up-classifier button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white-muted);
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  font-size: 0.68rem;
  cursor: pointer;
  font-family: inherit;
}
.drd-up-classifier button:hover { border-color: var(--cyan); color: var(--cyan); }
.drd-up-classifier button.primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--navy-deep);
  font-weight: 600;
}
.drd-up-classifier button.primary:hover { background: var(--cyan-bright); }

/* Per-file privacy lock — appears on every operator-uploaded file
   that is not public. Reflects the real RLS posture (private docs are
   only visible to room admins + Puna staff via data_room_documents
   docs_select_per_visibility policy). Title attribute carries the full
   tooltip text the user spec asked for. */
.dr-room-doc-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  color: var(--white-dim);
  font-size: 0.65rem;
  cursor: help;
  flex: 0 0 auto;
}
.dr-room-doc-lock.is-private {
  background: rgba(0, 200, 200, 0.08);
  color: var(--cyan);
}

/* Folder drop targets — every folder block becomes a drop zone for
   admins. Dragging onto a folder routes the file directly without
   classifier confirmation. */
.dr-room-folder.is-drop-target {
  background: rgba(0, 200, 200, 0.06);
  outline: 1px dashed var(--cyan);
  outline-offset: -3px;
  border-radius: 4px;
}

/* Readiness bar — sits in the data-room header next to doc count.
   "N of 10 sections populated · X% ready" with a thin progress bar
   rendered horizontally below. */
.drd-readiness {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 180px;
}
.drd-readiness-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.drd-readiness-label strong {
  color: var(--cyan);
  font-weight: 600;
}
.drd-readiness-track {
  height: 4px;
  width: 100%;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.drd-readiness-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-bright) 100%);
  transition: width 0.4s ease;
}

/* §§ SECTION: drd-readiness-band — full-width segmented bar above
   the data-room header. 10 segments (sections 1..10), each
   independently colored: cyan = at least one doc, dim = empty.
   Click a segment to scroll to that folder. Promoted from a
   sidebar widget per the IA review 2026-05-12 (the readiness
   score is the room's most consequential signal and was fighting
   the legend chips for the same eye-space). */
.drd-readiness-band {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 0.7rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 5px;
}
.drd-readiness-band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.drd-readiness-band-head .label { color: var(--white-muted); }
.drd-readiness-band-head .score {
  color: var(--cyan);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.drd-readiness-band-head .score b { color: var(--white); font-weight: 600; }
.drd-readiness-band-cta {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cyan);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.drd-readiness-band-cta:hover { color: var(--cyan-bright); text-decoration: underline; }
.drd-readiness-segments {
  display: flex;
  gap: 4px;
  width: 100%;
}
.drd-readiness-segment {
  flex: 1 1 0;
  min-width: 0;
  height: 24px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.56rem;
  font-weight: 600;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  padding: 0;
}
.drd-readiness-segment:hover {
  border-color: var(--border);
  color: var(--white-muted);
}
.drd-readiness-segment.is-populated {
  background: rgba(0, 200, 200, 0.18);
  border-color: rgba(0, 200, 200, 0.45);
  color: var(--cyan);
}
.drd-readiness-segment.is-populated:hover {
  background: rgba(0, 200, 200, 0.28);
  color: var(--white);
}
.drd-readiness-segment.is-populated.is-staff {
  background: rgba(0, 200, 200, 0.10);
  border-style: dashed;
}

/* §§ SECTION: Data Room mobile breakpoint pass (IA review 2026-05-12).
   The desktop layout breaks below ~720px because the header is
   `justify-content: space-between` with `flex-wrap: wrap`, and folder
   chips overflow horizontally. This block:
     - stacks the header vertically and tightens type
     - hides folder code/count chips on small screens (the icon glyph
       and folder name carry the meaning; chips are decoration on
       phones)
     - drops the segmented readiness label down a tier so the
       segments themselves get the row width
     - collapses the stepper to two rows of pips (icon-only) to keep
       the journey visible without eating the viewport
     - makes the drop zone full-bleed and hint-free
   Tested against an iPhone-13-sized viewport (390x844). */
@media (max-width: 720px) {
  /* Stepper — icon-only pips on a single row, hide hint copy. */
  .mr-stepper { gap: 0.3rem; }
  .mr-stepper-step {
    padding: 0.45rem 0.4rem;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
  }
  .mr-stepper-text { align-items: center; }
  .mr-stepper-label { font-size: 0.7rem; }
  .mr-stepper-hint  { display: none; }

  /* Readiness band — head + segments stack; CTA wraps below. */
  .drd-readiness-band-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .drd-readiness-segments { gap: 3px; }
  .drd-readiness-segment { font-size: 0.5rem; height: 22px; }

  /* Data-room header — stack vertically, drop the legend (operator
     can still mouse-hover provenance chips on individual rows). */
  .dr-room-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }
  .dr-room-header-r { justify-content: flex-start; }
  .dr-room-legend { display: none; }

  /* Folder rows — keep code, name, and count; hide tag chips and
     drop the per-folder upload affordance (the global drop zone
     stays). */
  .dr-room-folder-head {
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
  }
  .dr-folder-tag,
  .dr-folder-gate { display: none; }
  .dr-room-folder-upload { display: none; }
  .dr-room-folder-count { font-size: 0.6rem; }

  /* File rows — wrap the description below the name, shrink chips. */
  .dr-room-doc { flex-wrap: wrap; gap: 0.35rem; }
  .dr-room-doc-name { flex: 1 1 100%; }
  .dr-room-doc-meta { font-size: 0.58rem; }
  .dr-room-doc-desc { display: none; }

  /* Drop zone — full-bleed, hint hidden (covered by .is-compact too,
     but we want this in the empty state on phones as well). */
  .drd-up-shell { padding: 0.45rem 0.5rem; }
  .drd-up-zone  { padding: 0.6rem 0.7rem; }
  .drd-up-zone-hint { display: none; }
}

/* Modal pattern reused for upload, profile, claim, access-queue. */
.dr-room-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(6, 15, 29, 0.78);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 9000;
  padding: 4rem 1rem 2rem;
  overflow-y: auto;
}
.dr-room-modal {
  background: var(--navy-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.4rem 1.5rem;
  width: min(560px, 100%);
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.dr-room-modal.wide { width: min(820px, 100%); }
.dr-room-modal h3 {
  font-size: 0.85rem;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan);
  margin: 0 0 0.4rem;
}
.dr-room-modal-sub {
  font-size: 0.78rem; color: var(--white-muted);
  margin: 0 0 1rem;
  line-height: 1.55;
}
.dr-room-modal label {
  display: block;
  font-size: 0.7rem;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: "JetBrains Mono", monospace;
  margin-bottom: 0.85rem;
}
.dr-room-modal label input[type="text"],
.dr-room-modal label input[type="tel"],
.dr-room-modal label input[type="file"],
.dr-room-modal label select,
.dr-room-modal label textarea {
  display: block; width: 100%; margin-top: 0.3rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 0.5rem 0.6rem;
  border-radius: 5px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.85rem;
  text-transform: none; letter-spacing: 0;
}
.dr-room-modal label textarea { resize: vertical; min-height: 70px; }
/* "(optional)" tag inside add-project modal labels — distinguishes
   notes / website fields from required ones without a separate row. */
.dr-room-modal .puna-ap-opt {
  color: var(--white-dim);
  font-weight: 400;
  font-size: 0.65rem;
  margin-left: 0.35rem;
  text-transform: none;
  letter-spacing: 0;
}
.dr-room-modal-actions {
  display: flex; gap: 0.55rem; justify-content: flex-end; margin-top: 0.5rem;
}
.dr-room-modal-close {
  position: absolute; top: 0.6rem; right: 0.7rem;
  background: transparent; border: none;
  color: var(--white-dim); font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}
.dr-room-modal-close:hover { color: var(--white); }
.dr-room-modal-msg {
  font-size: 0.75rem;
  color: rgba(255,140,140,0.9);
  margin-top: 0.5rem;
}

.dr-room-req-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dr-room-req-row {
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px solid var(--border-light);
  background: rgba(255,255,255,0.02);
  border-radius: 5px;
  padding: 0.6rem 0.75rem;
}
.dr-room-req-l { flex: 1; font-size: 0.78rem; color: var(--white-muted); }
.dr-room-req-l strong { color: var(--white); }
.dr-room-req-meta { font-size: 0.7rem; color: var(--white-dim); margin-top: 0.2rem; }
.dr-room-req-interest { font-size: 0.72rem; margin-top: 0.3rem; padding: 0.35rem 0.5rem; background: rgba(0,200,200,0.05); border-left: 2px solid var(--cyan); color: var(--white-muted); }
.dr-room-req-r { display: flex; gap: 0.3rem; }
.dr-room-req-status {
  margin-left: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.08rem 0.4rem;
  border-radius: 2px;
  border: 1px solid var(--border);
  color: var(--white-dim);
}
.dr-room-req-status.granted { color: var(--cyan); border-color: var(--cyan); }
.dr-room-req-status.pending { color: var(--white-dim); }
.dr-room-req-status.denied  { color: rgba(255,140,140,0.9); border-color: rgba(255,140,140,0.4); }
.dr-room-req-status.revoked { color: var(--white-dim); text-decoration: line-through; }

/* Team Tools (Puna staff) — sits between accessed-strip and toolbar. */
.drh-team-tools {
  margin: 0.4rem 1.4rem 0.6rem;
  border: 1px solid rgba(0,200,200,0.3);
  background: rgba(0,200,200,0.04);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
}
.drh-team-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 0.5rem;
}
.drh-team-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.drh-tt-card {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.5rem 0.7rem;
}
.drh-tt-card-title {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--white);
  margin-bottom: 0.4rem;
}
.drh-tt-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-light);
}
.drh-tt-row:first-of-type { border-top: none; padding-top: 0.3rem; }
.drh-tt-l { font-size: 0.78rem; color: var(--white-muted); }
.drh-tt-l strong { color: var(--white); }
.drh-tt-meta, .drh-tt-meta-2 { font-size: 0.7rem; color: var(--white-dim); margin-top: 0.15rem; }
.drh-tt-notes {
  margin-top: 0.3rem; padding: 0.3rem 0.5rem;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--white-dim);
  font-size: 0.72rem;
}
.drh-tt-r { display: flex; gap: 0.35rem; }
.drh-tt-empty { font-size: 0.72rem; color: var(--white-dim); padding: 0.4rem 0; }

.drh-detail-section {
  margin-bottom: 1.6rem;
  scroll-margin-top: 1rem;
}
.drh-detail-section h3 {
  font-size: 0.75rem;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 0.55rem;
}
.drh-detail-section h3 .ni-num { color: var(--white-dim); font-size: 0.65rem; }
.drh-detail-section p {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--white-muted);
  margin: 0 0 0.5rem;
}
.drh-detail-section p strong { color: var(--white); font-weight: 600; }
.drh-detail-section .gated-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 3px;
}
.drh-detail-section .gated-note::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 4px rgba(0, 229, 229, 0.6);
}

/* Public-information disclosure — sits above the detail footer so the
   investor knows the project page only carries public or operator-released
   information, never confidential filings. */
.drh-public-note {
  margin: 1.4rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 4px;
  background: rgba(0, 200, 200, 0.05);
  border: 1px solid rgba(0, 200, 200, 0.18);
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--white-muted);
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.drh-public-note .pn-icon {
  color: var(--cyan);
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  flex: 0 0 auto;
  font-size: 0.85rem;
  line-height: 1;
  padding-top: 1px;
}
.drh-public-note .pn-body strong { color: var(--white); font-weight: 600; }

/* Persistent action bar at the bottom of the full-page project detail.
   Always visible regardless of where the user has scrolled. */
.drh-detail-actionbar {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.85);
  padding: 0.85rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.2rem;
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.drh-detail-actionbar-info {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.drh-detail-actionbar-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.drh-detail-actionbar-sub {
  font-size: 0.72rem;
  color: var(--white-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drh-detail-action {
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  min-width: 200px;
}
.drh-detail-action-note {
  font-size: 0.6rem;
  color: var(--white-dim);
  text-align: center;
}
.drh-detail-cta-btn {
  padding: 12px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: var(--navy-deep);
  cursor: pointer;
  border-radius: 3px;
  font-weight: 600;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  width: 100%;
}
.drh-detail-cta-btn:hover { background: #00e5e5; }
.drh-detail-cta-btn[disabled] {
  background: transparent; color: var(--white-dim); border-color: var(--border);
  cursor: not-allowed;
}
.drh-detail-cta-btn.requested {
  background: transparent;
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.5);
  cursor: default;
}
.drh-detail-cta-btn.secondary {
  background: transparent;
  color: var(--white-muted);
  border-color: var(--border-light);
}
.drh-detail-cta-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  border-color: var(--white-dim);
}
.drh-detail-cta-note {
  font-size: 0.65rem;
  color: var(--white-dim);
  text-align: center;
}

/* Report-data-error modal — same aesthetic as the data room request modal,
   different prefix to keep the styles independent. */
.derr-modal {
  position: fixed; inset: 0; z-index: 3100;
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem 1.25rem;
  background: rgba(6, 15, 29, 0.86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: 'Inter', sans-serif;
  color: var(--white);
}
.derr-modal.show { display: flex; }
.derr-card {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  background: rgba(11, 26, 46, 0.92);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 2rem 1.85rem 1.85rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.derr-close {
  position: absolute; top: 8px; right: 12px;
  width: 30px; height: 30px;
  background: transparent; border: none;
  color: var(--white-muted);
  font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 2px;
}
.derr-close:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.derr-tag {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.85rem;
}
.derr-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 0.4rem;
}
.derr-sub {
  font-size: 0.78rem;
  color: var(--white-muted);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.derr-sub strong { color: var(--white); }
.derr-form label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin: 0.85rem 0 4px;
}
.derr-form input[type="text"],
.derr-form select,
.derr-form textarea {
  width: 100%;
  background: rgba(6, 15, 29, 0.85);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  padding: 8px 10px;
  font-size: 0.78rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.15s;
  resize: vertical;
}
.derr-form input[type="text"]:focus,
.derr-form select:focus,
.derr-form textarea:focus { border-color: var(--cyan); }
.derr-form textarea { min-height: 90px; }
.derr-actions {
  display: flex; gap: 0.6rem; align-items: center;
  margin-top: 1.1rem;
}
.derr-submit {
  flex: 1;
  padding: 10px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--cyan);
  color: var(--navy-deep);
  border: none;
  cursor: pointer;
  border-radius: 3px;
  font-weight: 600;
  transition: background 0.12s;
}
.derr-submit:hover { background: #00e5e5; }
.derr-submit[disabled] { background: rgba(255,255,255,0.12); color: var(--white-dim); cursor: not-allowed; }
.derr-cancel {
  background: transparent;
  border: none;
  color: var(--white-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 12px;
}
.derr-cancel:hover { color: var(--white); }
.derr-msg {
  margin-top: 0.7rem;
  font-size: 0.7rem;
  color: var(--white-muted);
  padding: 8px 10px;
  border-radius: 3px;
  background: rgba(0, 200, 200, 0.06);
  border: 1px solid rgba(0, 200, 200, 0.18);
  display: none;
}
.derr-msg.show { display: block; }
.derr-msg.ok { color: var(--success, #5fe4b4); border-color: rgba(95, 228, 180, 0.3); background: rgba(95, 228, 180, 0.06); }
.derr-msg.err { color: #ff6b7a; border-color: rgba(255, 107, 122, 0.3); background: rgba(255, 107, 122, 0.06); }

/* ============================================================
   SALAR SCREENER — full-page panel that swaps in via body.view-screener.
   Ported from /Puna Website V2/salar-screener.html (below the steps).
   All styles namespaced under #screener-page so they don't leak.
   ============================================================ */
#screener-page {
  --scr-cyan-dim: rgba(0, 200, 200, 0.12);
  --scr-cyan-glow: rgba(0, 200, 200, 0.25);
  --scr-white-soft: #cbd6e6;
  --scr-score-5: #1f9d55;
  --scr-score-4: #6dba51;
  --scr-score-3: #e7c948;
  --scr-score-2: #e88d3a;
  --scr-score-1: #d64545;
  --scr-mono: 'JetBrains Mono', monospace;

  display: none;
  flex: 1;
  flex-direction: column;
  background: rgba(6, 15, 29, 0.6);
  border-left: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white-muted);
  overflow: hidden;
  animation: none !important;
}
body.view-screener  #screener-page { display: flex !important; }
body.view-screener  #mw            { display: none !important; }
body.view-screener  #right-panel   { display: none !important; }
body.view-screener  #db-panel      { display: none !important; }
body.view-screener  #wl-panel      { display: none !important; }
body.view-screener  #dr-page       { display: none !important; }
body.view-explorer  #screener-page { display: none !important; }
body.view-database  #screener-page { display: none !important; }
body.view-watchlist #screener-page { display: none !important; }
body.view-datarooms #screener-page { display: none !important; }

#screener-page .scr-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.6);
}
#screener-page .scr-header h2 {
  font-size: 1rem; font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
}
#screener-page .scr-header .scr-eyebrow {
  font-family: var(--scr-mono);
  font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--cyan); text-transform: uppercase;
  margin-right: 0.5rem;
  padding: 3px 8px;
  background: var(--scr-cyan-dim);
  border: 1px solid rgba(0,200,200,0.18);
  border-radius: 2px;
}
#screener-page .scr-header .scr-sub {
  font-size: 0.78rem;
  color: var(--white-muted);
  margin-left: auto;
  max-width: 540px;
  text-align: right;
  line-height: 1.4;
}

#screener-page .scr-scroll {
  flex: 1; overflow-y: auto;
  padding: 1.4rem 1.6rem 3rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 200, 200, 0.35) transparent;
}
#screener-page .scr-scroll::-webkit-scrollbar { width: 8px; }
#screener-page .scr-scroll::-webkit-scrollbar-track { background: transparent; }
#screener-page .scr-scroll::-webkit-scrollbar-thumb { background: rgba(0, 200, 200, 0.25); border-radius: 4px; }
#screener-page .scr-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 200, 200, 0.45); }

#screener-page .screener-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.4rem;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}

/* ---- Left panel: profiles + weights ---- */
#screener-page .control-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 1.4rem 1.2rem;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 200, 200, 0.35) transparent;
}
#screener-page .control-panel::-webkit-scrollbar { width: 8px; }
#screener-page .control-panel::-webkit-scrollbar-track { background: transparent; }
#screener-page .control-panel::-webkit-scrollbar-thumb { background: rgba(0, 200, 200, 0.25); border-radius: 4px; }
#screener-page .control-panel::-webkit-scrollbar-thumb:hover { background: rgba(0, 200, 200, 0.45); }
#screener-page .panel-section { margin-bottom: 1.4rem; }
#screener-page .panel-section:last-child { margin-bottom: 0; }
#screener-page .panel-label,
.right-rail .control-panel .panel-label {
  font-family: var(--scr-mono);
  font-size: 0.66rem; letter-spacing: 0.16em;
  color: var(--cyan); text-transform: uppercase;
  margin-bottom: 0.7rem;
  /* Stack: main label on top, help caption below. The previous flex
     row collapsed onto two lines when the rail was narrow because
     the help-text alone was wider than the available space minus the
     label. Stacking makes each section's header read as one tight
     unit without wasted height. Rail-scoped variant catches the
     case where pgaWireRightRail moved .control-panel out of
     #screener-page (Pass E.1 specificity pattern). */
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
#screener-page .panel-help,
.right-rail .control-panel .panel-help {
  color: var(--white-dim); text-transform: none;
  letter-spacing: 0.02em; font-size: 0.62rem; font-family: 'Inter', sans-serif;
  font-weight: 400;
}
#screener-page .panel-section,
.right-rail .control-panel .panel-section { margin-bottom: 1.4rem; }
#screener-page .panel-section:last-child,
.right-rail .control-panel .panel-section:last-child { margin-bottom: 0; }

#screener-page .profile-list,
.right-rail .control-panel .profile-list { display: flex; flex-direction: column; gap: 0.4rem; }
#screener-page .profile-pill,
.right-rail .control-panel .profile-pill {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.84rem;
  color: var(--scr-white-soft);
}
#screener-page .profile-pill:hover,
.right-rail .control-panel .profile-pill:hover { border-color: rgba(0, 200, 200, 0.35); color: var(--white); background: rgba(0, 200, 200, 0.04); }
#screener-page .profile-pill.active,
.right-rail .control-panel .profile-pill.active {
  /* Active profile reads as the chosen thesis at a glance. Per Clint
     2026-05-05: this is the single biggest input on the page; the
     tint + cyan stripe make selection unmistakable. The rail-scoped
     variant catches the case where pgaWireRightRail has moved
     .control-panel out of #screener-page. */
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.14);
  color: var(--cyan-bright);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cyan);
}
#screener-page .profile-pill .pip,
.right-rail .control-panel .profile-pill .pip { font-family: var(--scr-mono); font-size: 0.62rem; color: var(--white-dim); letter-spacing: 0.04em; }
#screener-page .profile-pill.active .pip,
.right-rail .control-panel .profile-pill.active .pip { color: var(--cyan); }

/* ============================================================
   Country chips — multi-select filter at the top of the screener
   control panel. Visual style mirrors the watchlist's stage chips
   so the filter UX feels consistent across views. State lives at
   SCR_STATE.countries (Set of country names currently active);
   empty set means "show none" — honest about the filter rather
   than silently falling back to "all".
   ============================================================ */
#screener-page .scr-country-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
#screener-page .scr-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--white-dim);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
#screener-page .scr-country-chip:hover {
  border-color: rgba(0, 200, 200, 0.35);
  color: var(--white);
  background: rgba(0, 200, 200, 0.04);
}
#screener-page .scr-country-chip.on {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.08);
  color: var(--white);
  font-weight: 500;
}
#screener-page .scr-country-chip .chip-count {
  font-family: var(--scr-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--white-dim);
  padding: 0 0.25rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
#screener-page .scr-country-chip.on .chip-count { color: var(--cyan); background: rgba(0, 200, 200, 0.08); }
#screener-page .scr-country-chip-reset {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.6rem;
  font-family: var(--scr-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#screener-page .scr-country-chip-reset:hover { color: var(--cyan); border-color: rgba(0, 200, 200, 0.45); }

#screener-page .filter-pill,
.right-rail .control-panel .filter-pill {
  /* Quick filter toggle — distinct from profile-pills above. Tighter
     padding + smaller font + a top divider so it reads as a separate
     control, not a fifth profile choice. */
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  padding: 0.4rem 0.65rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  background: transparent;
  border: 1px solid transparent;
  border-top: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.74rem;
  color: var(--white-muted);
}
#screener-page .filter-pill:hover,
.right-rail .control-panel .filter-pill:hover {
  color: var(--white);
  background: rgba(0, 200, 200, 0.04);
  border-radius: 4px;
}
#screener-page .filter-pill.on,
.right-rail .control-panel .filter-pill.on {
  color: var(--cyan-bright);
  font-weight: 600;
}
#screener-page .filter-pill.on .filter-name,
.right-rail .control-panel .filter-pill.on .filter-name { color: var(--cyan-bright); }
#screener-page .filter-pill .filter-dot,
.right-rail .control-panel .filter-pill .filter-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--white-dim); flex-shrink: 0; transition: all 0.2s ease; }
#screener-page .filter-pill.on .filter-dot,
.right-rail .control-panel .filter-pill.on .filter-dot { background: var(--cyan); box-shadow: 0 0 6px rgba(0, 200, 200, 0.5); }
#screener-page .filter-pill .filter-name,
.right-rail .control-panel .filter-pill .filter-name { flex: 1; text-align: left; margin: 0 0.5rem; }
#screener-page .filter-pill .filter-count,
.right-rail .control-panel .filter-pill .filter-count { font-family: var(--scr-mono); font-size: 0.6rem; color: var(--white-dim); letter-spacing: 0.04em; }
#screener-page .filter-pill.on .filter-count,
.right-rail .control-panel .filter-pill.on .filter-count { color: var(--cyan); }

#screener-page .filter-tag {
  font-family: var(--scr-mono);
  font-size: 0.68rem; color: var(--cyan);
  margin-left: 0.6rem; letter-spacing: 0.04em;
}

#screener-page .invert-btn {
  font-family: var(--scr-mono);
  font-size: 0.58rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
#screener-page .invert-btn:hover { color: var(--white); border-color: var(--white-dim); }
#screener-page .invert-btn.on { color: var(--cyan); border-color: rgba(0, 200, 200, 0.45); background: rgba(0, 200, 200, 0.07); }
#screener-page .invert-hint {
  font-family: var(--scr-mono);
  font-size: 0.58rem; letter-spacing: 0.04em;
  color: var(--white-dim);
  margin-top: 0.3rem;
  line-height: 1.4;
}
#screener-page .invert-hint.on { color: var(--cyan); }
#screener-page .col-flag { color: var(--cyan); font-size: 0.78em; margin-left: 2px; }

#screener-page .weights { display: flex; flex-direction: column; gap: 0.55rem; }
#screener-page .weight-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr 2.6rem;
  gap: 0.55rem;
  align-items: center;
}
#screener-page .weight-color { width: 11px; height: 11px; border-radius: 2px; margin: 0 auto; }
#screener-page .weight-name {
  font-size: 0.78rem;
  color: var(--scr-white-soft);
  display: flex; justify-content: space-between; align-items: center;
}
#screener-page .weight-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  outline: none;
}
#screener-page .weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 200, 200, 0.5);
  transition: all 0.15s ease;
}
#screener-page .weight-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
#screener-page .weight-slider::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--cyan); cursor: pointer; }
#screener-page .weight-val { font-family: var(--scr-mono); font-size: 0.74rem; color: var(--white); text-align: right; }
#screener-page .weight-total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 0.85rem;
  margin-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-family: var(--scr-mono);
  font-size: 0.74rem;
  color: var(--white-muted);
}
#screener-page .weight-total .val { color: var(--cyan); font-weight: 600; }
#screener-page .reset-btn {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.55rem;
  font-family: var(--scr-mono);
  font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-muted);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#screener-page .reset-btn:hover { color: var(--white); border-color: var(--white-dim); }

/* ---- Right panel: results ---- */
#screener-page .results-panel {
  display: flex; flex-direction: column; gap: 1.2rem;
  min-width: 0;
}

/* Deposit-type pill row — All / Brine / Hardrock (Option B parallel
   model, 2026-05-07). Sits above the top-picks card row. Uses the
   app's existing cyan/white-soft palette + mono font so it reads as a
   native part of the screener chrome. Active pill borrows the same
   cyan glow + active-state pattern as .filter-pill.on so the visual
   identity stays uniform. Counts written by scrSyncTypePillUI(). */
#screener-page .scr-type-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
/* Collapse the comment-only .heatmap-head above the brine table —
   removed the h3 + meta line on 2026-04-27 but the empty div still
   carried 0.95rem padding and a border-bottom, creating ~30px of
   empty card chrome between the type-pill row and the heatmap. */
#screener-page #scr-heatmapWrapBrine > .heatmap-head {
  padding: 0;
  border-bottom: 0;
}
#screener-page .scr-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-family: var(--scr-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#screener-page .scr-type-pill:hover {
  color: var(--white);
  border-color: rgba(0, 200, 200, 0.35);
  background: rgba(0, 200, 200, 0.04);
}
#screener-page .scr-type-pill.is-active {
  color: var(--cyan-bright);
  border-color: rgba(0, 200, 200, 0.55);
  background: rgba(0, 200, 200, 0.08);
  box-shadow: 0 0 12px rgba(0, 200, 200, 0.18);
}
#screener-page .scr-type-pill .scr-type-count {
  font-family: var(--scr-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 0.35rem;
  border-radius: 8px;
}
#screener-page .scr-type-pill.is-active .scr-type-count {
  color: var(--cyan);
  background: rgba(0, 200, 200, 0.1);
}

/* Eyebrow above the hardrock heatmap when both sub-tables are visible
   under the 'all' filter. Tells the user "this section is hardrock"
   without an oversized header that competes with the brine table. */
#screener-page .scr-hardrock-eyebrow {
  font-family: var(--scr-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  padding-top: 0.5rem;
  padding-bottom: 0.6rem;
}
#screener-page #scr-heatmapWrapHardrock { margin-top: 1.4rem; }

#screener-page .top-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
#screener-page .pick-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 1rem 1rem 0.85rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
#screener-page .pick-card.gold { border-color: rgba(0, 200, 200, 0.4); animation: appGlowBreath 6.5s ease-in-out infinite; }
#screener-page .pick-card.gold::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--cyan-bright)); }
#screener-page .pick-card .pick-rank {
  font-family: var(--scr-mono);
  font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--cyan); text-transform: uppercase;
  margin-bottom: 0.5rem;
}
#screener-page .pick-card .pick-name {
  font-size: 1.08rem; font-weight: 600;
  color: var(--white);
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}
#screener-page .pick-card .pick-country { font-size: 0.74rem; color: var(--white-dim); margin-bottom: 0.7rem; }
#screener-page .pick-card .pick-score { display: flex; align-items: baseline; gap: 0.4rem; }
#screener-page .pick-card .pick-score .num { font-family: var(--scr-mono); font-size: 1.5rem; font-weight: 600; color: var(--cyan); letter-spacing: -0.02em; }
#screener-page .pick-card .pick-score .lbl { font-size: 0.7rem; color: var(--white-dim); letter-spacing: 0.04em; }
#screener-page .pick-card .pick-delta {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--scr-mono);
  font-size: 0.66rem;
  padding: 2px 6px;
  border-radius: 2px;
}
#screener-page .pick-card .pick-delta.up   { color: var(--scr-score-4); background: rgba(109, 186, 81, 0.12); }
#screener-page .pick-card .pick-delta.down { color: var(--scr-score-2); background: rgba(232, 141, 58, 0.12); }
#screener-page .pick-card .pick-delta.flat { color: var(--white-dim); background: rgba(255,255,255,0.04); }

/* Heatmap table */
#screener-page .heatmap-wrap {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  min-width: 0;
}
#screener-page .heatmap-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--border);
  gap: 0.8rem;
}
#screener-page .heatmap-head h3 { font-size: 0.92rem; font-weight: 600; color: var(--white); letter-spacing: -0.01em; }
#screener-page .heatmap-head .meta { font-family: var(--scr-mono); font-size: 0.7rem; color: var(--white-muted); letter-spacing: 0.04em; }
#screener-page .heatmap-head .meta strong { color: var(--cyan); font-weight: 600; }

#screener-page .heatmap { overflow-x: auto; }
#screener-page table.hm {
  width: 100%; min-width: 540px;
  border-collapse: separate;
  border-spacing: 2px;
  padding: 0.5rem;
  table-layout: fixed;
}
#screener-page table.hm thead th {
  font-family: var(--scr-mono);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--white-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.4rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#screener-page table.hm thead th.salar-h, #screener-page table.hm thead th.rank-h, #screener-page table.hm thead th.score-h { text-align: left; }
#screener-page table.hm thead th.score-h { text-align: right; padding-right: 0.7rem; }
#screener-page table.hm thead th.rank-h  { width: 38px; }
#screener-page table.hm thead th.salar-h { width: 180px; }
#screener-page table.hm thead th.score-h { width: 70px; }

/* Diagonal column headers (Pass I, 2026-05-05). 11 dimensions get
   tight 30px columns with -55° rotated labels so the heatmap fits
   in the rail-narrowed viewport. The th cell itself isn't rotated;
   only the inner .dim-label span rotates from its bottom-left so
   borders + dim-cell alignment stay clean. */
#screener-page table.hm thead th.dim-h {
  width: 30px;
  height: 84px;
  padding: 0;
  vertical-align: bottom;
  position: relative;
  overflow: visible;
}
#screener-page table.hm thead th.dim-h .dim-label {
  display: inline-block;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform-origin: left bottom;
  transform: rotate(-55deg) translateX(-2px);
  white-space: nowrap;
  text-align: left;
  font-family: var(--scr-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
}
/* Inversion ↻ flag inside the rotated label still reads inline. */
#screener-page table.hm thead th.dim-h .dim-label .col-flag {
  color: var(--cyan); font-size: 0.78em; margin-left: 2px;
}

#screener-page table.hm tbody tr { transition: background 0.15s ease; height: 36px; }
#screener-page table.hm tbody tr:hover { background: rgba(0, 200, 200, 0.03); }
/* .priority-cut + .threshold-divider styles removed 2026-04-27 with the
   priority-threshold concept. */

#screener-page table.hm td {
  font-size: 0.78rem;
  padding: 0.4rem 0.5rem;
  text-align: center;
  border-radius: 2px;
  color: rgba(0,0,0,0.85);
  font-weight: 500;
  font-family: var(--scr-mono);
}
#screener-page table.hm td.rank-cell { background: transparent; color: var(--white-dim); font-family: var(--scr-mono); font-size: 0.74rem; text-align: left; padding-left: 0.7rem; font-weight: 400; width: 38px; }
#screener-page table.hm td.salar-cell {
  background: transparent;
  color: var(--white);
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  padding-left: 0.7rem;
  width: 150px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#screener-page table.hm td.score-cell {
  background: transparent;
  color: var(--white);
  font-family: var(--scr-mono);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: right;
  padding-right: 0.9rem;
  min-width: 50px;
}

#screener-page td.s5 { background: var(--scr-score-5); }
#screener-page td.s4 { background: var(--scr-score-4); }
#screener-page td.s3 { background: var(--scr-score-3); }
#screener-page td.s2 { background: var(--scr-score-2); }
#screener-page td.s1 { background: var(--scr-score-1); }

#screener-page table.hm tbody td.dim-cell.inv-col { box-shadow: inset 0 0 0 1.5px rgba(0, 200, 200, 0.55); }

/* tr.threshold-divider styles removed 2026-04-27 with the priority threshold. */

#screener-page .legend {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: 0.85rem 1.2rem 1.05rem;
  border-top: 1px solid var(--border);
  font-family: var(--scr-mono);
  font-size: 0.66rem;
  color: var(--white-dim);
  letter-spacing: 0.04em;
}
#screener-page .legend-chip { display: inline-flex; align-items: center; gap: 0.4rem; }
#screener-page .legend-chip .swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* ============================================================
   Provenance — per-cell H/D/C tag + legend chip
   ============================================================ */
#screener-page .prov-legend {
  padding-top: 0;
  border-top: none;
  margin-top: -0.4rem;
  font-size: 0.62rem;
  color: var(--white-dim);
}
#screener-page .prov-legend .legend-chip { gap: 0.3rem; }
#screener-page .prov-count {
  font-family: var(--scr-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--white-muted);
  margin-left: 0.15rem;
  padding: 0 0.3rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
#screener-page table.hm tbody tr.salar-row td.dim-cell { position: relative; padding-right: 0.95rem; }
#screener-page .prov-tag {
  position: absolute;
  top: 1px;
  right: 2px;
  font-family: var(--scr-mono);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.15s ease;
}
#screener-page table.hm tbody tr.salar-row:hover td.dim-cell .prov-tag { opacity: 1; }
#screener-page .prov-tag.prov-h { color: var(--cyan); }
#screener-page .prov-tag.prov-d { color: rgba(255, 255, 255, 0.75); }
#screener-page .prov-tag.prov-c { color: rgba(251, 191, 36, 0.75); }
/* Static badge inside the legend chip — not absolute-positioned */
#screener-page .prov-tag-static {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 0.55rem;
  border-radius: 3px;
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.05);
}
#screener-page .prov-tag-static.prov-h { background: rgba(0, 200, 200, 0.12); color: var(--cyan); }
#screener-page .prov-tag-static.prov-d { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.85); }
#screener-page .prov-tag-static.prov-c { background: rgba(251, 191, 36, 0.1); color: rgba(251, 191, 36, 0.95); }
#screener-page .auto-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-family: var(--scr-mono, 'JetBrains Mono', monospace);
  color: var(--white-dim);
  border: 1px solid var(--border);
  padding: 0 0.32rem;
  border-radius: 2px;
  margin-left: 0.5rem;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: help;
}

/* Star/click affordance for rows */
#screener-page table.hm tbody tr.salar-row { cursor: pointer; }
#screener-page table.hm tbody tr.salar-row td { transition: background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease; }
#screener-page table.hm tbody tr.salar-row td.salar-cell { position: relative; padding-left: 1.6rem; }
#screener-page table.hm tbody tr.salar-row td.salar-cell::before {
  content: "☆";
  position: absolute;
  left: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white-dim);
  font-size: 1rem;
  transition: color 0.18s ease, transform 0.18s ease, text-shadow 0.18s ease;
}
#screener-page table.hm tbody tr.salar-row:hover td { background: rgba(0, 200, 200, 0.09); }
#screener-page table.hm tbody tr.salar-row:hover td.salar-cell { color: var(--white); box-shadow: inset 3px 0 0 rgba(0, 200, 200, 0.55); }
#screener-page table.hm tbody tr.salar-row:hover td.salar-cell::before { content: "★"; color: var(--cyan); transform: translateY(-50%) scale(1.15); text-shadow: 0 0 8px rgba(0, 200, 200, 0.5); }
#screener-page table.hm tbody tr.salar-row.starred td { background: rgba(0, 200, 200, 0.13); }
#screener-page table.hm tbody tr.salar-row.starred td.salar-cell { color: var(--white); font-weight: 600; box-shadow: inset 3px 0 0 var(--cyan); }
#screener-page table.hm tbody tr.salar-row.starred td.salar-cell::before { content: "★"; color: var(--cyan); text-shadow: 0 0 10px rgba(0, 200, 200, 0.7); }
#screener-page table.hm tbody tr.salar-row.starred td.rank-cell { color: var(--cyan); font-weight: 600; }
#screener-page table.hm tbody tr.salar-row.starred:hover td { background: rgba(0, 200, 200, 0.18); }
#screener-page table.hm tbody tr.salar-row.disabled-add { cursor: not-allowed; }
#screener-page table.hm tbody tr.salar-row.disabled-add:hover td { background: rgba(216, 69, 69, 0.05); }
#screener-page table.hm tbody tr.salar-row.disabled-add:hover td.salar-cell { color: var(--scr-white-soft); box-shadow: inset 3px 0 0 rgba(216, 69, 69, 0.45); }
#screener-page table.hm tbody tr.salar-row.disabled-add:hover td.salar-cell::before { content: "⊘"; color: var(--scr-score-1); transform: translateY(-50%); text-shadow: none; }
@keyframes scrRejectFlash { 0%,100% { background: rgba(216,69,69,0.05); } 40% { background: rgba(216,69,69,0.22); } }
#screener-page table.hm tbody tr.salar-row.flash-reject td { animation: scrRejectFlash 0.5s ease; }

/* ============================================================
   Watchlist CTA (replaces the old screener-local watchlist + news
   + AI block — removed 2026-04-27). Slim status + button that
   routes to the dedicated Watchlist view.
   ============================================================ */
#screener-page .scr-wl-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(0, 200, 200, 0.04);
}
#screener-page .scr-wl-cta-status { display: flex; flex-direction: column; gap: 0.25rem; }
#screener-page .scr-wl-cta-eyebrow {
  font-family: var(--scr-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
}
#screener-page .scr-wl-cta-count {
  font-family: var(--scr-mono);
  font-size: 0.95rem;
  color: var(--white);
  letter-spacing: 0.04em;
}
#screener-page .scr-wl-cta-count.has-items { color: var(--cyan); }
#screener-page .scr-wl-cta-hint {
  font-size: 0.7rem;
  color: var(--white-dim);
}
#screener-page .scr-wl-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  background: var(--cyan);
  color: var(--navy-deep);
  border: none;
  border-radius: 4px;
  font-family: var(--scr-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
  flex: 0 0 auto;
}
#screener-page .scr-wl-cta-btn:hover { background: var(--cyan-bright); }
#screener-page .scr-wl-cta-btn .arrow { font-size: 1rem; }

/* ============================================================
   INTRO HINT — first-time-user box at the top of the screener.
   Frames the page's purpose and explains that ranking is
   weighting-driven, not a single canonical answer. Collapses to
   a thin eyebrow+chevron bar; persists collapsed state in
   localStorage. Bump the key suffix (_v1 → _v2) if the copy
   changes meaningfully and we want returning users to re-see
   the expanded version.
   ============================================================ */
#screener-page .scr-intro-hint {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.4rem;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(0,200,200,0.06) 0%, rgba(0,0,0,0) 70%), rgba(255,255,255,0.015);
  overflow: hidden;
}
/* Class+id selector beats the user-agent [hidden] rule, so we have to
   restate display:none for the hidden case explicitly. */
#screener-page .scr-intro-hint[hidden] { display: none !important; }
#screener-page .scr-intro-hint-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1.4rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease;
}
#screener-page .scr-intro-hint-toggle:hover { background: rgba(255,255,255,0.025); }
#screener-page .scr-intro-hint-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}
#screener-page .scr-intro-hint-eyebrow {
  font-family: var(--scr-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
#screener-page .scr-intro-hint-chevron {
  color: var(--white-dim);
  font-size: 0.7rem;
  line-height: 1;
  transition: transform 0.2s ease, color 0.15s ease;
  transform: rotate(180deg); /* points up while expanded */
}
#screener-page .scr-intro-hint.collapsed .scr-intro-hint-chevron {
  transform: rotate(0deg); /* points down when collapsed → click to expand */
}
#screener-page .scr-intro-hint-toggle:hover .scr-intro-hint-chevron { color: var(--cyan); }
#screener-page .scr-intro-hint-body {
  padding: 0 1.4rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
#screener-page .scr-intro-hint.collapsed .scr-intro-hint-body { display: none; }
#screener-page .scr-intro-hint-text {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--white-muted);
  margin: 0;
  max-width: 80ch;
}

/* Watchlist + intel panel below the heatmap (CSS retained for any
   stragglers; the markup it styles was removed 2026-04-27). */
#screener-page .watchlist-section {
  margin-top: 0.4rem;
  background: rgba(0, 200, 200, 0.015);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
}
#screener-page .wl-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1rem 1.2rem 0.8rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}
#screener-page .wl-head h3 { font-size: 0.92rem; font-weight: 600; color: var(--white); letter-spacing: -0.01em; }
#screener-page .wl-count { font-family: var(--scr-mono); font-size: 0.7rem; color: var(--cyan); font-weight: 500; margin-left: 0.3rem; letter-spacing: 0.04em; }
#screener-page .wl-sub { font-size: 0.76rem; color: var(--white-muted); margin-top: 0.2rem; max-width: 540px; }
#screener-page .wl-actions { display: flex; align-items: center; gap: 0.7rem; white-space: nowrap; }
#screener-page .wl-pulse { display: flex; align-items: center; gap: 0.5rem; font-family: var(--scr-mono); font-size: 0.64rem; color: var(--white-dim); letter-spacing: 0.04em; }
#screener-page .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(0, 200, 200, 0.6); animation: scrTagPulse 2s ease-in-out infinite; }
@keyframes scrTagPulse { 0%,100% { opacity: 1; box-shadow: 0 0 12px rgba(0,200,200,0.9), 0 0 24px rgba(0,200,200,0.3); } 50% { opacity: 0.4; box-shadow: 0 0 4px rgba(0,200,200,0.3); } }
#screener-page .wl-clear {
  font-family: var(--scr-mono);
  font-size: 0.64rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-muted);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
#screener-page .wl-clear:hover { color: var(--white); border-color: rgba(232, 141, 58, 0.5); }
#screener-page .wl-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--border); }
#screener-page .wl-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  padding: 0.3rem 0.5rem 0.3rem 0.65rem;
  background: rgba(0, 200, 200, 0.08);
  color: var(--white);
  border: 1px solid rgba(0, 200, 200, 0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}
#screener-page .wl-chip:hover { background: rgba(0, 200, 200, 0.14); border-color: rgba(0, 200, 200, 0.45); }
#screener-page .wl-chip .x { color: var(--white-muted); font-size: 0.85rem; line-height: 1; }
#screener-page .wl-chip:hover .x { color: var(--white); }
#screener-page .wl-cap-note {
  font-family: var(--scr-mono);
  font-size: 0.7rem;
  color: var(--scr-score-2);
  letter-spacing: 0.04em;
  margin-top: 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 184, 76, 0.3);
  background: rgba(255, 184, 76, 0.05);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
#screener-page .wl-cap-note strong { color: var(--white); font-weight: 600; }
#screener-page .wl-cap-cta {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--cyan);
  border-radius: 3px;
  margin-left: auto;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
#screener-page .wl-cap-cta:hover {
  background: rgba(0, 200, 200, 0.12);
  box-shadow: 0 0 14px rgba(0, 200, 200, 0.25);
}

/* ---- Website-parity polish (ported from puna.earth/salar-screener.html) ----
   - .hm-sample chip in the heatmap heading shows the dataset size
   - .legend-spacer replaces inline `margin-left: auto` for the priority threshold
   - .about-data-btn + .about-modal explain what the user is looking at
   ---------------------------------------------------------------------------- */
#screener-page .heatmap-head h3 .hm-sample {
  color: var(--white-dim);
  font-weight: 400;
  font-size: 0.9em;
  margin-left: 0.45rem;
  font-family: var(--scr-mono);
  letter-spacing: 0.04em;
}
#screener-page .legend-spacer { margin-left: auto; }
#screener-page .about-data-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  border-radius: 999px;
  color: var(--navy-deep, #060f1d);
  font-family: var(--scr-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
#screener-page .about-data-btn:hover {
  background: #2cf2f2;
  border-color: #2cf2f2;
  color: #060f1d;
  box-shadow: 0 0 16px rgba(0, 200, 200, 0.3);
}
#screener-page .about-data-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #060f1d;
  color: var(--cyan);
  font-style: italic;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1;
}
.scr-about-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center; justify-content: center;
  z-index: 4000;
  padding: 1.5rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.scr-about-modal.open { display: flex; }
.scr-about-modal-card {
  background: #0c1518;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  max-width: 540px;
  width: 100%;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  position: relative;
  font-family: 'Inter', sans-serif;
  color: var(--white);
}
.scr-about-modal-card h3 {
  margin: 0 0 0.9rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-transform: uppercase;
}
.scr-about-modal-card p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--white-soft, #cbd6e6);
}
.scr-about-modal-card p:last-child { margin-bottom: 0; }
.scr-about-modal-close {
  position: absolute; top: 0.6rem; right: 0.85rem;
  background: transparent; border: none;
  color: var(--white-dim);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
}
.scr-about-modal-close:hover { color: var(--white); }

#screener-page .wl-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; }
#screener-page .wl-news { border-right: 1px solid var(--border); min-width: 0; }
#screener-page .wl-ai   { min-width: 0; }
#screener-page .wl-block-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.2rem 0.65rem; gap: 0.8rem; }
#screener-page .wl-block-head h4 { font-family: var(--scr-mono); font-size: 0.68rem; font-weight: 500; color: var(--cyan); letter-spacing: 0.12em; text-transform: uppercase; }
#screener-page .wl-block-meta { font-family: var(--scr-mono); font-size: 0.62rem; color: var(--white-dim); letter-spacing: 0.04em; }

#screener-page .news-list-wrap {
  padding-bottom: 0.4rem;
  max-height: 540px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 200, 200, 0.3) transparent;
}
#screener-page .news-list-wrap::-webkit-scrollbar { width: 8px; }
#screener-page .news-list-wrap::-webkit-scrollbar-track { background: transparent; }
#screener-page .news-list-wrap::-webkit-scrollbar-thumb { background: rgba(0, 200, 200, 0.25); border-radius: 4px; }
#screener-page .news-list-wrap::-webkit-scrollbar-thumb:hover { background: rgba(0, 200, 200, 0.45); }

#screener-page a.news-item {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  padding: 0.95rem 2.4rem 0.95rem 1.2rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}
#screener-page a.news-item:last-child { border-bottom: none; }
#screener-page a.news-item:hover { background: rgba(0, 200, 200, 0.06); }
#screener-page a.news-item::after {
  content: "↗";
  position: absolute; top: 1.05rem; right: 1.2rem;
  color: var(--white-dim); font-size: 0.95rem; line-height: 1;
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
#screener-page a.news-item:hover::after { opacity: 1; color: var(--cyan); transform: translate(2px, -2px); }
#screener-page a.news-item:hover h4 { color: var(--cyan-bright); }
#screener-page a.news-item:focus-visible { outline: 1px solid var(--cyan); outline-offset: -1px; }

#screener-page .news-meta-row {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  font-family: var(--scr-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.4rem;
}
#screener-page .news-tag { color: var(--cyan); background: rgba(0, 200, 200, 0.08); padding: 2px 6px; border-radius: 2px; }
#screener-page .news-salar { color: var(--scr-white-soft); }
#screener-page .news-date  { margin-left: auto; color: var(--white-muted); }
#screener-page a.news-item h4 { font-size: 0.92rem; font-weight: 600; color: var(--white); line-height: 1.35; margin-bottom: 0.35rem; letter-spacing: -0.01em; }
#screener-page a.news-item p  { font-size: 0.8rem; color: var(--scr-white-soft); line-height: 1.55; margin-bottom: 0.45rem; }
#screener-page .news-impact { font-family: var(--scr-mono); font-size: 0.66rem; color: var(--white-dim); letter-spacing: 0.04em; }
#screener-page .news-impact strong { color: var(--cyan); font-weight: 600; }

#screener-page .wl-empty {
  padding: 1.5rem 1.2rem 1.8rem;
  text-align: center;
  color: var(--white-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
#screener-page .wl-empty .arrow-up { display: block; font-size: 1.3rem; color: var(--cyan); margin-bottom: 0.5rem; opacity: 0.7; }

#screener-page .ai-pill {
  font-family: var(--scr-mono);
  font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cyan);
  padding: 0.22rem 0.55rem;
  border: 1px solid rgba(0, 200, 200, 0.3);
  border-radius: 2px;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(0, 200, 200, 0.05);
}
#screener-page .ai-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px rgba(0, 200, 200, 0.5); }
#screener-page .ai-prompt-bar { display: flex; gap: 0.55rem; padding: 1rem 1.2rem 0.65rem; }
#screener-page .ai-input {
  flex: 1;
  padding: 0.7rem 0.85rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  outline: none;
  transition: all 0.2s ease;
  min-width: 0;
}
#screener-page .ai-input::placeholder { color: var(--white-dim); }
#screener-page .ai-input:focus { border-color: var(--cyan); background: rgba(0,0,0,0.4); box-shadow: 0 0 0 3px rgba(0,200,200,0.08); }
#screener-page .ai-send {
  padding: 0.7rem 1.2rem;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--cyan); color: var(--navy-deep);
  border: none; border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
#screener-page .ai-send:hover { background: var(--cyan-bright); box-shadow: 0 0 16px rgba(0, 200, 200, 0.3); }
#screener-page .ai-send .arrow { margin-left: 0.3rem; }
#screener-page .ai-suggestions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; padding: 0 1.2rem; }
#screener-page .ai-suggestions:empty { display: none; }
#screener-page .suggest-label { font-family: var(--scr-mono); font-size: 0.66rem; color: var(--white-dim); letter-spacing: 0.06em; text-transform: uppercase; margin-right: 0.4rem; }
#screener-page .suggest-chip {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  padding: 0.36rem 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--scr-white-soft);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#screener-page .suggest-chip:hover { border-color: rgba(0, 200, 200, 0.4); color: var(--white); background: rgba(0, 200, 200, 0.05); }
#screener-page .ai-empty {
  padding: 1.05rem 1.2rem 1.3rem;
  font-family: var(--scr-mono);
  font-size: 0.7rem;
  color: var(--white-dim);
  letter-spacing: 0.04em;
  border-top: 1px dashed var(--border);
  text-align: center;
}
#screener-page .ai-response { border-top: 1px solid var(--border); padding: 1rem 1.2rem 1.1rem; }
#screener-page .ai-message-user, #screener-page .ai-message-puna { margin-bottom: 0.85rem; }
#screener-page .ai-message-puna { margin-bottom: 0; }
#screener-page .msg-label { display: inline-block; font-family: var(--scr-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.3rem; }
#screener-page .ai-message-user .msg-label { color: var(--white-dim); }
#screener-page .ai-message-puna .msg-label { color: var(--cyan); }
#screener-page .ai-message-user p { font-size: 0.86rem; color: var(--scr-white-soft); line-height: 1.5; }
#screener-page .ai-message-puna p { font-size: 0.86rem; color: var(--white); line-height: 1.6; }
#screener-page .ai-message-puna p + p { margin-top: 0.55rem; }

/* ==========================================================
   COMPARE TWO SALARS — sits between heatmap and watchlist
   ========================================================== */
#screener-page .scr-compare {
  margin: 1.6rem 0 0.5rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,200,200,0.03) 0%, rgba(0,0,0,0) 60%), rgba(255,255,255,0.015);
  position: relative;
  overflow: hidden;
}
#screener-page .scr-cmp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ============================================================
   Collapsible compare-two — header acts as a toggle button.
   #scr-cmpBody is hidden by default; clicking the header expands
   the pickers + grid. Chevron rotates to signal state.
   ============================================================ */
#screener-page .scr-cmp-head-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: opacity 0.15s ease;
}
#screener-page .scr-cmp-head-toggle:hover { opacity: 0.85; }
#screener-page .scr-cmp-head-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}
#screener-page .scr-cmp-head-left { flex: 1 1 auto; }
#screener-page .scr-cmp-head-toggle h3 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--white); }
#screener-page .scr-cmp-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 200, 200, 0.08);
  color: var(--cyan);
  font-size: 0.85rem;
  transition: transform 0.2s ease, background 0.15s ease;
}
#screener-page .scr-cmp-head-toggle[aria-expanded="true"] .scr-cmp-chevron {
  transform: rotate(180deg);
  background: rgba(0, 200, 200, 0.18);
}
#screener-page .scr-cmp-body {
  margin-top: 0.85rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--border);
}
#screener-page .scr-cmp-body[hidden] { display: none; }
#screener-page .scr-cmp-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.6rem;
  min-height: 1.6rem;
}
/* Provenance tag inside compare-two score cells — needs the cell to be
   position: relative so the existing #screener-page .prov-tag absolute
   positioning lands in the right corner. The .prov-tag colour rules
   already work because that selector is screener-scoped, not heatmap-scoped. */
#screener-page .scr-cmp-grid .scr-cmp-cell.score {
  position: relative;
  padding-right: 1.2rem;
}
#screener-page .scr-cmp-grid .scr-cmp-cell.score .prov-tag {
  top: 2px;
  right: 4px;
  font-size: 0.5rem;
  opacity: 0.7;
}
#screener-page .scr-cmp-grid .scr-cmp-row:hover .scr-cmp-cell.score .prov-tag { opacity: 1; }
#screener-page .scr-cmp-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
}
#screener-page .scr-cmp-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: rgba(0,200,200,0.12);
  color: var(--cyan);
  font-family: var(--scr-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}
#screener-page .scr-cmp-sub {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--white-dim);
}
#screener-page .scr-cmp-clear {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white-muted);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-size: 0.7rem;
  cursor: pointer;
  font-family: var(--scr-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#screener-page .scr-cmp-clear:hover { border-color: var(--cyan); color: var(--cyan); }
#screener-page .scr-cmp-pickers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.9rem;
  align-items: end;
  margin-bottom: 0.9rem;
}
#screener-page .scr-cmp-picker label {
  display: block;
  font-family: var(--scr-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--white-dim);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
#screener-page .scr-cmp-picker select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--white);
  font-size: 0.85rem;
  font-family: 'Inter', -apple-system, sans-serif;
  cursor: pointer;
}
#screener-page .scr-cmp-picker select:focus {
  outline: none;
  border-color: var(--cyan);
}
#screener-page .scr-cmp-vs {
  font-family: var(--scr-mono);
  font-size: 0.7rem;
  color: var(--white-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 0.55rem;
}
#screener-page .scr-cmp-empty {
  padding: 1.4rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--white-dim);
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: rgba(0,0,0,0.15);
}
#screener-page .scr-cmp-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.7fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0,0,0,0.18);
}
#screener-page .scr-cmp-grid .scr-cmp-row {
  display: contents;
}
#screener-page .scr-cmp-grid .scr-cmp-cell {
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  color: var(--white-muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}
#screener-page .scr-cmp-grid .scr-cmp-row:last-child .scr-cmp-cell { border-bottom: none; }
#screener-page .scr-cmp-grid .scr-cmp-row.head .scr-cmp-cell {
  background: rgba(255,255,255,0.04);
  color: var(--white-dim);
  font-family: var(--scr-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
#screener-page .scr-cmp-grid .scr-cmp-row.score-row .scr-cmp-cell {
  background: rgba(0,200,200,0.06);
  font-weight: 700;
  color: var(--white);
  font-size: 0.95rem;
  font-family: var(--scr-mono);
}
#screener-page .scr-cmp-grid .scr-cmp-cell.score {
  justify-content: center;
  font-family: var(--scr-mono);
  font-weight: 700;
  color: var(--white);
}
#screener-page .scr-cmp-grid .scr-cmp-cell.score.s1 { background: var(--scr-score-1); color: var(--white); }
#screener-page .scr-cmp-grid .scr-cmp-cell.score.s2 { background: var(--scr-score-2); color: var(--white); }
#screener-page .scr-cmp-grid .scr-cmp-cell.score.s3 { background: var(--scr-score-3); color: var(--navy-deep); }
#screener-page .scr-cmp-grid .scr-cmp-cell.score.s4 { background: var(--scr-score-4); color: var(--navy-deep); }
#screener-page .scr-cmp-grid .scr-cmp-cell.score.s5 { background: var(--scr-score-5); color: var(--navy-deep); }
#screener-page .scr-cmp-grid .scr-cmp-cell.delta {
  justify-content: center;
  font-family: var(--scr-mono);
  font-size: 0.78rem;
  color: var(--white-dim);
}
#screener-page .scr-cmp-grid .scr-cmp-cell.delta.up    { color: #4ade80; }
#screener-page .scr-cmp-grid .scr-cmp-cell.delta.down  { color: #f87171; }
#screener-page .scr-cmp-grid .scr-cmp-cell.delta.even  { color: var(--white-dim); }
@media (max-width: 760px) {
  #screener-page .scr-cmp-pickers { grid-template-columns: 1fr; }
  #screener-page .scr-cmp-vs { padding: 0.2rem 0; text-align: center; }
}

/* SUBSCRIBE — bottom-of-screener upsell */
#screener-page .scr-subscribe {
  margin: 2.5rem 0 1.5rem;
  padding: 2rem 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.04) 0%, rgba(0, 0, 0, 0) 60%), rgba(255, 255, 255, 0.015);
  position: relative;
  overflow: hidden;
}
#screener-page .scr-subscribe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 100% 0%, rgba(0, 200, 200, 0.08), transparent 60%);
  pointer-events: none;
}
#screener-page .scr-sub-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
}
#screener-page .scr-sub-eyebrow {
  font-family: var(--scr-mono);
  font-size: 0.66rem;
  color: var(--cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--cyan);
  border-radius: 3px;
  margin-bottom: 0.9rem;
}
#screener-page .scr-sub-copy h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 0.7rem;
  line-height: 1.25;
}
#screener-page .scr-sub-copy p {
  color: var(--white-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
  max-width: 56ch;
}
#screener-page .scr-sub-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#screener-page .scr-sub-bullets li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--white-soft, var(--scr-white-soft));
  font-size: 0.86rem;
  line-height: 1.45;
}
#screener-page .scr-sub-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 4px rgba(0, 229, 229, 0.6);
}
#screener-page .scr-sub-cta-card {
  border: 1px solid rgba(0, 200, 200, 0.4);
  background: rgba(0, 200, 200, 0.04);
  border-radius: 6px;
  padding: 1.6rem 1.4rem;
  text-align: center;
}
#screener-page .scr-sub-cta-label {
  font-family: var(--scr-mono);
  font-size: 0.7rem;
  color: var(--white-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
#screener-page .scr-sub-cta-btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--cyan);
  border-radius: 4px;
  background: rgba(0, 200, 200, 0.06);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
#screener-page .scr-sub-cta-btn:hover {
  background: rgba(0, 200, 200, 0.16);
  box-shadow: 0 0 22px rgba(0, 200, 200, 0.32);
  transform: translateY(-1px);
}
#screener-page .scr-sub-cta-note {
  margin-top: 0.95rem;
  font-size: 0.74rem;
  color: var(--white-dim);
  font-family: var(--scr-mono);
  letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
  #screener-page .scr-sub-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  #screener-page .scr-subscribe { padding: 1.5rem 1.3rem; }
}

@media (max-width: 1100px) {
  #screener-page .screener-grid { grid-template-columns: 1fr; }
  #screener-page .control-panel { position: relative; top: 0; max-height: none; }
  #screener-page .top-picks { grid-template-columns: 1fr; }
  #screener-page .wl-body { grid-template-columns: 1fr; }
  #screener-page .wl-news { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ========== DATA ROOM REQUEST MODAL (matches login-card aesthetic) ========== */
.dr-modal {
  --lg-navy: #0b1a2e;
  --lg-navy-deep: #060f1d;
  --lg-cyan: #00c8c8;
  --lg-cyan-bright: #00e5e5;
  --lg-cyan-dim: rgba(0, 200, 200, 0.12);
  --lg-white: #f0f4f8;
  --lg-white-muted: #9babc4;
  --lg-white-dim: #8794ad;
  --lg-border: rgba(255, 255, 255, 0.06);
  --lg-border-light: rgba(255, 255, 255, 0.1);
  --lg-error: #ff6b7a;
  --lg-success: #5fe4b4;
  --lg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lg-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem;
  font-family: var(--lg-font-body);
  color: var(--lg-white);
  -webkit-font-smoothing: antialiased;
}
.dr-modal[hidden] { display: none; }
.dr-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(11, 26, 46, 0.85) 0%, rgba(6, 15, 29, 0.92) 100%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: lgPageFadeIn 0.35s ease forwards;
  cursor: pointer;
}
.dr-card {
  position: relative; width: 100%; max-width: 480px;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  background: rgba(11, 26, 46, 0.72);
  border: 1px solid var(--lg-border-light);
  border-radius: 4px;
  padding: 2.75rem 2.5rem 2.5rem;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  opacity: 0;
  animation:
    lgCardRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards,
    lgGlowBreath 6s ease-in-out 1.0s infinite;
}
.dr-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, transparent 30%,
    rgba(0, 229, 229, 0.9) 50%,
    transparent 70%, transparent 100%);
  background-size: 200% 100%; background-position: -150% 0;
  animation: lgShimmerSweep 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
  pointer-events: none; z-index: 2;
}
.dr-card::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: 4px; padding: 1px;
  background: linear-gradient(135deg,
    rgba(0, 200, 200, 0.35) 0%, transparent 40%,
    transparent 60%, rgba(0, 200, 200, 0.15) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  animation: lgPageFadeIn 1.2s ease 0.6s forwards;
  pointer-events: none;
}
.dr-close {
  position: absolute; top: 0.75rem; right: 0.9rem;
  width: 32px; height: 32px;
  background: transparent; border: none;
  color: var(--lg-white-muted);
  font-size: 1.5rem; line-height: 1;
  cursor: pointer; border-radius: 2px;
  transition: color 0.2s ease, background 0.2s ease;
  z-index: 3;
}
.dr-close:hover { color: var(--lg-white); background: rgba(255,255,255,0.06); }

.dr-stage { display: block; }
.dr-stage[hidden] { display: none; }

.dr-tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--lg-font-mono);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--lg-cyan);
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.85rem;
  background: var(--lg-cyan-dim);
  border: 1px solid rgba(0, 200, 200, 0.15);
  border-radius: 2px;
  opacity: 0;
  animation: lgRiseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}
.dr-tag.dr-tag-ok {
  color: var(--lg-success);
  background: rgba(95, 228, 180, 0.08);
  border-color: rgba(95, 228, 180, 0.25);
}
.dr-tag .dr-dot {
  width: 6px; height: 6px; background: var(--lg-cyan);
  border-radius: 50%;
  animation: lgPulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(0, 200, 200, 0.6);
}
.dr-tag.dr-tag-ok .dr-dot { background: var(--lg-success); box-shadow: 0 0 8px rgba(95, 228, 180, 0.6); }

.dr-card h1 {
  font-family: var(--lg-font-body);
  font-size: 1.65rem; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.02em;
  margin: 0 0 0.55rem;
  color: var(--lg-white);
  opacity: 0;
  animation: lgRiseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}
.dr-accent {
  background: linear-gradient(135deg, var(--lg-cyan), var(--lg-cyan-bright));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dr-sub {
  font-size: 0.95rem; color: var(--lg-white-muted);
  line-height: 1.65; margin: 0 0 1.5rem;
  opacity: 0;
  animation: lgRiseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

.dr-points {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  opacity: 0;
  animation: lgRiseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
.dr-points li {
  font-size: 0.88rem; line-height: 1.55;
  color: var(--lg-white-muted);
  padding-left: 0.9rem;
  border-left: 1px solid rgba(0, 200, 200, 0.28);
}
.dr-pt-k {
  display: inline-block;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lg-cyan);
  margin-right: 0.55rem;
}

.dr-note {
  font-family: var(--lg-font-mono);
  font-size: 0.72rem; letter-spacing: 0.03em;
  color: var(--lg-white-dim);
  line-height: 1.65;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--lg-border-light);
  border-radius: 2px;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: lgRiseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
}
.dr-note-soft {
  border-style: solid;
  border-color: rgba(0, 200, 200, 0.18);
  background: rgba(0, 200, 200, 0.04);
  color: var(--lg-white-muted);
  font-family: var(--lg-font-body);
  font-size: 0.85rem;
  letter-spacing: normal;
}

/* Per-project context badge — shown when the modal is opened from a
   specific data room card, to make it crystal-clear which room the
   request will land against in invest@puna.earth. */
.dr-project-context {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--lg-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--lg-white-muted);
  margin: -0.4rem 0 1rem;
  padding: 0.55rem 0.8rem;
  border-left: 2px solid var(--lg-cyan);
  background: rgba(0, 200, 200, 0.04);
  border-radius: 0 3px 3px 0;
}
.dr-project-context::before {
  content: "REQUESTING";
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--lg-cyan);
  font-weight: 600;
}
.dr-project-context-name {
  color: var(--lg-white);
  font-weight: 500;
}

/* Qualifier callout — sits below the headline to make the
   audience explicit before the user invests time in the form. */
.dr-qualifier {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--lg-font-mono);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--lg-cyan);
  line-height: 1.5;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(0, 200, 200, 0.35);
  background: rgba(0, 200, 200, 0.06);
  border-radius: 3px;
  margin: 0 0 1.4rem;
  opacity: 0;
  animation: lgRiseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.dr-qualifier::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lg-cyan);
  box-shadow: 0 0 0 3px rgba(0, 200, 200, 0.18);
  flex-shrink: 0;
}

.dr-row { display: flex; flex-direction: column; margin-bottom: 0.95rem; }
.dr-label {
  font-family: var(--lg-font-mono);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lg-white-muted);
  margin-bottom: 0.45rem;
}
.dr-input {
  width: 100%;
  font-family: var(--lg-font-body);
  font-size: 0.95rem; color: var(--lg-white);
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--lg-border-light);
  border-radius: 2px;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.dr-input::placeholder { color: var(--lg-white-dim); }
.dr-input:hover { border-color: rgba(255, 255, 255, 0.18); }
.dr-input:focus {
  border-color: var(--lg-cyan);
  background: rgba(6, 15, 29, 0.85);
  box-shadow: 0 0 0 3px rgba(0, 200, 200, 0.12);
}
select.dr-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--lg-white-muted) 50%),
                    linear-gradient(135deg, var(--lg-white-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
select.dr-input option { background: var(--lg-navy-deep); color: var(--lg-white); }
.dr-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

.dr-actions {
  display: flex; gap: 0.75rem; margin-top: 1.25rem;
}
.dr-btn-primary {
  flex: 1;
  display: inline-block; width: 100%;
  font-family: var(--lg-font-body);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.9rem 1.5rem;
  background: var(--lg-cyan);
  color: var(--lg-navy-deep);
  border: none; border-radius: 2px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.dr-btn-primary:hover:not(:disabled) {
  background: var(--lg-cyan-bright);
  box-shadow: 0 0 30px rgba(0, 200, 200, 0.28);
}
.dr-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.dr-btn-ghost {
  display: inline-block;
  font-family: var(--lg-font-body);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.9rem 1.5rem;
  background: transparent;
  color: var(--lg-white-muted);
  border: 1px solid var(--lg-border-light);
  border-radius: 2px;
  transition: all 0.25s ease;
  cursor: pointer;
}
.dr-btn-ghost:hover {
  color: var(--lg-white);
  border-color: rgba(255, 255, 255, 0.24);
}

.dr-msg {
  margin-top: 0.9rem;
  font-size: 0.85rem; line-height: 1.6;
  padding: 0.75rem 0.9rem; border-radius: 2px;
  color: var(--lg-error);
  background: rgba(255, 107, 122, 0.08);
  border: 1px solid rgba(255, 107, 122, 0.25);
}
.dr-msg[hidden] { display: none; }

@media (max-width: 600px) {
  .dr-card { padding: 2rem 1.4rem 1.75rem; }
  .dr-card h1 { font-size: 1.4rem; }
  .dr-actions { flex-direction: column-reverse; }
  .dr-btn-ghost, .dr-btn-primary { width: 100%; }
}

/* ========== DEPOSIT INTELLIGENCE CARD ========== */
.rp-intel {
  padding: 10px 12px;
  background: var(--navy-deep, #06101e);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
}
.rp-intel-title {
  font-size: 0.6rem; color: var(--white-muted);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-family: "JetBrains Mono", monospace;
  margin-bottom: 8px;
}
.rp-intel-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.rp-intel-tile {
  background: rgba(255,255,255,0.03);
  padding: 6px 8px; border-radius: 4px;
}
.rp-intel-tile .t-lbl {
  font-size: 0.6rem; color: var(--white-dim);
  margin-bottom: 2px;
}
.rp-intel-tile .t-val {
  font-size: 0.78rem; color: var(--white);
  font-weight: 500;
}
.rp-intel-tile .t-val.accent { color: var(--cyan); }

/* ========== EXPRESS INTEREST CTA ========== */
.rp-cta {
  padding: 12px 12px 14px;
  margin-top: auto;
  flex: 0 0 auto;
}
.rp-cta-btn {
  width: 100%;
  padding: 10px;
  background: var(--cyan);
  color: var(--navy-deep, #06101e);
  border: none; border-radius: 6px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
  font-family: inherit;
}
.rp-cta-btn:hover { filter: brightness(1.06); }
.rp-cta-btn:active { transform: translateY(1px); }
.rp-cta-hint {
  font-size: 0.6rem; color: var(--white-dim);
  text-align: center; margin-top: 5px;
  letter-spacing: 0.02em;
}

/* ==============================================================
   MOBILE FOUNDATIONS — single master block (≤ 720px)
   --------------------------------------------------------------
   Per puna/mobile_strategy.md. Everything mobile-specific lives
   in one place so it's easy to reason about and revert. The
   strategy is map-first: hide both side panels by default, ship
   a drawer for the sidebar (M2) and a bottom-sheet for the right
   panel (M4).
   ============================================================== */
:root {
  --bp-mobile: 720px;
  --bp-tablet: 1024px;
  --topbar-h-mobile: 48px;
}

/* Hide mobile-only chrome on desktop. */
.mobile-menu-btn,
.mobile-brand,
.sidebar-drawer-scrim {
  display: none;
}

@media (max-width: 720px) {
  /* iOS auto-zooms any input < 16px on focus. Bump the floor. */
  input, select, textarea, button {
    font-size: 16px;
  }
  /* Allow tighter densities to opt back down where they look fine
     (the desktop CSS often uses 0.7–0.8rem). Inputs that take user
     text stay at 16px to avoid the zoom; chips, buttons can be
     overridden in their own mobile blocks. */

  /* Disable the rise-in entry animations on mobile — they paint
     before Leaflet sizes itself, which causes a visible reflow on
     first load. The animations exist for desktop polish. */
  #sidebar, #right-panel, .rp-card, .sidebar-item {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Use dynamic viewport height so iOS Safari's collapsing URL bar
     doesn't push the bottom of the app off-screen. */
  #main {
    height: calc(100dvh - var(--topbar-h-mobile));
    margin-top: var(--topbar-h-mobile);
  }
  #topbar { height: var(--topbar-h-mobile) !important; }

  /* Stop horizontal scroll from any over-wide child (defensive). */
  html, body { overflow-x: hidden; }

  /* ---- Topbar layout (mobile) ----
     Replace the desktop "title-dots + tabs" arrangement with:
     [☰] [puna.earth] [current view] (spacer) [profile dot]
     We keep the desktop tabs in the DOM but visually demote them. */
  #topbar {
    padding: 0 0.6rem;
    gap: 0.5rem;
  }
  #topbar .title-dots { display: none; }
  #topbar .title-tabs {
    flex: 1;
    overflow: hidden;
    justify-content: flex-start;
  }
  /* Hide the static Explorer/Database tabs — nav lives in the drawer
     now. The dynamic title-tab-current still shows so the user always
     sees what view they're in. */
  #topbar .title-tab:not(.title-tab-current) { display: none; }
  #topbar .title-tab-current[hidden] { display: none; }
  #topbar .title-tab-current:not([hidden]) {
    display: block;
    font-size: 0.85rem;
    color: var(--white);
    margin: 0;
    padding: 0;
  }
  #topbar .user-email { display: none; }
  #topbar .btn-logout {
    font-size: 0.7rem;
    padding: 4px 8px;
  }

  .mobile-menu-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  .mobile-menu-btn:active { background: rgba(255,255,255,0.06); }
  .mobile-menu-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--white-muted);
    border-radius: 2px;
    transition: transform 0.18s, opacity 0.18s;
  }
  body[data-drawer="open"] .mobile-menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body[data-drawer="open"] .mobile-menu-btn span:nth-child(2) { opacity: 0; }
  body[data-drawer="open"] .mobile-menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mobile-brand {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
    flex-shrink: 0;
  }

  /* ---- Sidebar drawer ---- */
  .sidebar-drawer-scrim {
    display: block;
    position: fixed;
    inset: var(--topbar-h-mobile) 0 0 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 1990;
  }
  body[data-drawer="open"] .sidebar-drawer-scrim {
    opacity: 1;
    pointer-events: auto;
  }
  #sidebar {
    position: fixed;
    top: var(--topbar-h-mobile);
    bottom: 0;
    left: 0;
    width: 86vw;
    max-width: 320px;
    min-width: 0;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2000;
    background: rgba(6, 15, 29, 0.98);
    overflow-y: auto;
    padding-bottom: 1rem;
  }
  body[data-drawer="open"] #sidebar { transform: translateX(0); }
  /* When drawer is closed (default), the sidebar shouldn't claim layout
     in #main; #main becomes [map][right-panel] only. */

  /* Bigger nav touch targets in the drawer. */
  #sidebar .sidebar-item {
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    min-height: 44px;
  }
  #sidebar .sidebar-section { font-size: 0.7rem; padding: 0.7rem 1rem 0.3rem; }
  #sidebar .sidebar-bottom { padding: 0.6rem 1rem; }
  #sidebar .sidebar-bottom-item { font-size: 0.85rem; padding: 0.5rem 0; }
  #sidebar .sidebar-persona-toggle {
    padding: 0.6rem 0.4rem;
    font-size: 0.66rem;
  }

  /* ---- Map fills the viewport (M3) ----
     With the sidebar absolutely positioned (drawer) and the right
     panel hidden by default (turned into a sheet in M4), #main is
     left holding just the map column #mw. Make it fill the screen. */
  #mw {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* ---- Right panel becomes a 3-state bottom sheet (M4) ----
     Three positions controlled by data-sheet on the panel:
       peek  → 96 px above the bottom edge (just the basin name visible)
       half  → 50 dvh
       full  → 92 dvh
     The handle bar is added by JS so the markup stays clean. */
  #right-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 92dvh;
    height: 92dvh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    background: rgba(6, 15, 29, 0.97);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.45);
    z-index: 1500;
    padding: 0 0.85rem 1rem;
    transform: translateY(calc(100% - var(--sheet-peek, 96px)));
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;            /* outer hides; inner scrolls */
    display: flex;
    flex-direction: column;
  }
  #right-panel[data-sheet="half"] { transform: translateY(50dvh); }
  #right-panel[data-sheet="full"] { transform: translateY(8dvh); }

  /* The handle (injected by mountMobileSheet()) sits at the very top
     of the sheet and is the user's drag/tap target. Generous height so
     a thumb can grab it without precision. */
  #right-panel .sheet-handle {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(6, 15, 29, 0.97);
    padding: 8px 0 6px;
    margin: 0 -0.85rem 0.4rem;
    text-align: center;
    cursor: grab;
    flex: 0 0 auto;
    user-select: none;
    touch-action: none;
  }
  #right-panel .sheet-handle::before {
    content: '';
    display: inline-block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
  }
  #right-panel .sheet-handle .sheet-title {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--white-muted);
    letter-spacing: 0.05em;
  }

  /* The scrollable inner — wraps everything below the handle. The flex
     parent (panel) lets this fill remaining space and scroll on its
     own without dragging the sheet around. */
  #right-panel .sheet-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.85rem;
    padding: 0 0.85rem 0.5rem;
  }

  /* Express Interest CTA pinned to the bottom edge of the sheet so
     it's visible in every state (peek shows the button, half/full
     keep it sticky as users scroll). */
  #right-panel .rp-cta {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 -0.85rem;
    padding: 12px 0.85rem calc(env(safe-area-inset-bottom, 0) + 12px);
    background: linear-gradient(to top, rgba(6,15,29,0.99) 60%, rgba(6,15,29,0));
    z-index: 4;
  }
  #right-panel .rp-cta-btn { padding: 14px; font-size: 0.95rem; }

  /* Bigger touch targets on the toggle/list rows inside the sheet. */
  #right-panel .rp-tgl { min-height: 44px; }
  #right-panel select#sel { min-height: 44px; }
  #right-panel .panel-header { padding-top: 0.6rem; }
  /* The Capital Pulse strip is desktop polish — too noisy on a small
     screen. Show it only on the views where it actually adds value
     once we tune those individually. For now hide it on mobile. */
  #capital-pulse { display: none !important; }

  /* Floating map UI — push to thumb-friendly positions and drop the
     tiny font-sizes so the chips are readable on a phone. */
  .map-search {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    font-size: 0.78rem;
    padding: 0.4rem 0.7rem;
    justify-content: center;
  }
  .map-status {
    bottom: 110px;   /* sits above the bottom sheet's peek state */
    left: 0.5rem;
    padding: 0.45rem 0.7rem;
  }
  .status-text { font-size: 0.7rem; }
  .map-legend {
    bottom: 110px;
    right: 0.5rem;
    padding: 0.45rem 0.6rem;
    max-width: 140px;
    font-size: 0.7rem;
  }

  /* Leaflet zoom controls — move clear of the map-search bar. */
  .leaflet-top.leaflet-left { top: 60px !important; }
  .leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 18px !important;
  }

  /* ---- M5: Screener mobile ----
     Stack the 2-column control + results layout, give the control
     panel its own scroll, and make pills large enough to tap. */
  #screener-page .scr-scroll { padding: 1rem 0.85rem 6rem; }
  #screener-page .screener-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  #screener-page .control-panel {
    position: relative !important;
    top: 0 !important;
    max-height: none !important;
    padding: 1rem;
  }
  #screener-page .profile-pill,
  #screener-page .scr-chip,
  #screener-page .scr-filter-chip {
    min-height: 36px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  /* ---- M6: Project Database mobile ----
     The wide table is the killer. Wrap it in horizontal scroll so it
     stays usable, and tighten cell padding so more columns fit. */
  #db-panel { padding: 0.75rem !important; }
  .db-table-wrap, .db-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .db-table {
    min-width: 720px;       /* keeps columns sensible; user pans horizontally */
    font-size: 0.8rem;
  }
  .db-table thead th, .db-table tbody td {
    padding: 0.5rem 0.55rem;
  }

  /* Watchlist + Data Rooms grids: collapse to single column. */
  #wl-panel, #dr-page { padding: 0.85rem !important; }
  #dr-page .dr-grid,
  #wl-panel .wl-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  /* ---- M7: Modals → full-screen sheets ----
     Most modals on the site set width:90% which still leaves a fiddly
     border. On mobile we go edge-to-edge for breathing room and pin
     the inner card to the viewport top. */
  .modal-bg, #data-room-modal, #add-deposit-modal, #request-access-modal {
    align-items: stretch !important;
    padding: 0 !important;
  }
  .modal-bg .modal,
  #data-room-modal .dr-modal,
  #add-deposit-modal .ad-modal,
  #request-access-modal .ra-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0) + 1rem) !important;
    overflow-y: auto;
  }

  /* Project page (Data Rooms project detail overlay) — already
     full-area; just ensure padding and any sticky header have room. */
  #drh-detail .drh-detail-wrap { padding: 0.85rem !important; }
  #drh-detail .drh-detail-back  { font-size: 0.85rem; padding: 0.4rem 0.6rem; }
}

/* ========== DEPOSIT 3D VIEWER (Virtual Explorer) ==========
   F-011 — Apr 2026.  Embedded as the primary surface inside #mw when a
   salar has a saved boundary; replaces the 2D Leaflet map for that salar.
   Click "🗺 2D" to flip to the regular map view; click "↩ Back to map"
   to return to the regional overview.

   Renders the basin top surface (from public terrain tiles) and a derived
   basement model inside the user-drawn boundary, with live volume + LCE
   estimates and the concession blocks draped on the terrain (coloured by
   owner). v1 uses a paraboloid basement that anchors at the rim; v2 will
   swap in the SalarIQ RBF basement once the Python pipeline is
   server-side.
   ============================================================ */
/* Embedded full-canvas surface — sibling of #map inside #mw. */
#deposit-3d-view {
  position: absolute;
  inset: 0;
  display: none;
  background: #05101e;
  overflow: hidden;
}
body.view-deposit3d #map { display: none !important; }
body.view-deposit3d #deposit-3d-view { display: block; }
body.view-deposit3d .map-search,
body.view-deposit3d .map-status,
body.view-deposit3d .map-legend { display: none !important; }

#deposit-3d-view #d3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Top-left salar title overlay */
.d3d-title-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  pointer-events: none;
  max-width: calc(100% - 360px);
}
.d3d-title-overlay .d3d-title-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 4px;
}
/* Back-to-map breadcrumb (2026-05-04). Sits above the deposit name
   inside the title overlay so it's always visible — bottom-right was
   getting eaten by the Ask Puna input bar. The overlay itself has
   pointer-events: none so the button has to opt back in. */
.d3d-title-overlay .d3d-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-muted);
  background: rgba(2, 8, 18, 0.7);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 5px 10px;
  margin-bottom: 8px;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.d3d-title-overlay .d3d-back-link:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.d3d-title-overlay .d3d-title-name {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.d3d-title-overlay .d3d-title-meta {
  font-size: 0.75rem;
  color: var(--white-muted);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
/* Country line under the deposit name. Tighter than .d3d-title-meta
   was — country is shorter so smaller letterspacing reads better. */
.d3d-title-overlay .d3d-title-country {
  font-size: 0.78rem;
  color: var(--white-muted);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Top-right floating layer chips */
.d3d-chips {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 60%;
}
.d3d-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: rgba(2, 8, 18, 0.65);
  color: var(--white-dim);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
/* BL-176: Surface chip disabled while it has no layer to toggle (load window
   / no-basin deposit) — greyed + non-interactive so it never reads as a dead click. */
.d3d-chip:disabled, .d3d-chip.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.d3d-chip:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.d3d-chip.active {
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan);
  border-color: rgba(0, 200, 200, 0.55);
}

/* Bottom-left floating vertical-exag slider — compact 2026-05-04. */
.d3d-exag-overlay {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 10;
  background: rgba(2, 8, 18, 0.7);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 6px 10px;
  width: 160px;
  backdrop-filter: blur(4px);
}
.d3d-exag-overlay .d3d-exag-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.d3d-exag-overlay .d3d-exag-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.d3d-exag-overlay .d3d-exag-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--cyan);
  font-weight: 600;
}
.d3d-exag-overlay .d3d-exag-hint {
  font-size: 0.6rem;
  color: var(--white-dim);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.3;
}

/* Bottom-right nav buttons */
.d3d-nav-controls {
  /* Top-left of the 3D canvas — sits next to the deposit name overlay
     so it's never obscured by the bottom-row Ask Puna input bar.
     Moved up from bottom-right 2026-05-04 — the Ask Puna bar grew to
     full width and was hiding the Back to map button. */
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 11;
  display: flex;
  gap: 6px;
}
.d3d-nav-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: rgba(2, 8, 18, 0.7);
  color: var(--white-muted);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.d3d-nav-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.d3d-nav-btn.primary {
  background: rgba(0, 200, 200, 0.16);
  color: var(--cyan);
  border-color: rgba(0, 200, 200, 0.5);
}

/* Loading / error status overlay (centered) */
#deposit-3d-view .d3d-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  text-align: center;
  padding: 20px;
  background: rgba(2, 8, 18, 0.5);
  z-index: 20;
}
#deposit-3d-view .d3d-status.hidden { display: none; }
#deposit-3d-view .d3d-spinner {
  width: 32px; height: 32px;
  border: 2px solid rgba(0, 200, 200, 0.2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: d3dspin 0.9s linear infinite;
}
#deposit-3d-view .d3d-status-step {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#deposit-3d-view .d3d-status-msg {
  color: var(--white-muted);
  font-size: 0.8rem;
  max-width: 340px;
  line-height: 1.45;
}
#deposit-3d-view .d3d-status-msg.d3d-error {
  color: #fca5a5;
}

/* Hover tooltip for concession tiles in 3D */
.d3d-tile-tooltip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  background: rgba(2, 8, 18, 0.92);
  border: 1px solid var(--border-light);
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 0.72rem;
  color: var(--white);
  display: none;
  white-space: nowrap;
}
.d3d-tile-tooltip .tt-owner { color: var(--cyan); font-weight: 600; }
.d3d-tile-tooltip .tt-meta { color: var(--white-dim); font-size: 0.65rem; margin-top: 2px; }

/* ===== Right panel — unified deposit-page layout =====
   2026-05-01 (audit): the right rail looks the same in 2D and 3D
   modes whenever a deposit is selected (body.has-active-salar). The
   visible stack is:
     1. Basin Selection header  (.panel-header.dep-keep)
     2. Dropdown                (.rp-card.rp-basin)
     3. Deposit Intelligence    (#rp-intel — Best Li, Total resource,
                                 Projects, Operators)
     4. Deposit Details / Owners tabs (#dep-tabs-shell)
   Everything else (legacy owners list, projects panel, layers, etc.)
   is hidden because the Owners tab inside dep-tabs-shell now holds
   that data. Salar Tools (#salar-tools) lives in the Page Tools
   drawer, so it's hidden here too. */
body.has-active-salar #right-panel > .panel-header,
body.has-active-salar #right-panel > .rp-card,
body.has-active-salar #right-panel > #salar-tools,
body.has-active-salar #right-panel > #plist-header,
body.has-active-salar #right-panel > #projects-panel,
body.has-active-salar #right-panel > #clist-header,
body.has-active-salar #right-panel > #clist,
body.has-active-salar #right-panel > #stats {
  display: none !important;
}
/* Keep dropdown + intelligence + owners + tabs visible. The owners
   header + card opt out of the catch-all hide via this allowlist (added
   2026-05-04 when the standalone Owners deposit tab was retired in
   favor of the unified #rp-owners-card). renderOwnersPanel() still
   gates display via inline style — the allowlist just removes the
   display:none !important blocker. */
body.has-active-salar #right-panel > .panel-header.dep-keep,
body.has-active-salar #right-panel > .rp-card.rp-basin,
body.has-active-salar #right-panel > .rp-intel,
body.has-active-salar #right-panel > #rp-owners-header,
body.has-active-salar #right-panel > .rp-card.rp-owners-card,
body.has-active-salar #right-panel > #dep-tabs-shell {
  display: block !important;
}
/* When renderOwnersPanel hides the panel (no owners), let the inline
   style:display:none win. The allowlist above only ensures we're not
   force-hidden by the catch-all sibling rule. */
body.has-active-salar #right-panel > #rp-owners-header[style*="display: none"],
body.has-active-salar #right-panel > #rp-owners-header[style*="display:none"],
body.has-active-salar #right-panel > .rp-card.rp-owners-card[style*="display: none"],
body.has-active-salar #right-panel > .rp-card.rp-owners-card[style*="display:none"] {
  display: none !important;
}
/* Visual order: dropdown (0) → intelligence (1) → owners (2,3) → tabs (4).
   #right-panel is flex-column so `order:` is honored. .rp-intel and
   #rp-owners-* live AFTER #dep-tabs-shell in the DOM; we promote them. */
body.has-active-salar #right-panel > .panel-header.dep-keep        { order: 0; }
body.has-active-salar #right-panel > .rp-card.rp-basin             { order: 1; }
body.has-active-salar #right-panel > .rp-intel                     { order: 2; }
body.has-active-salar #right-panel > #rp-owners-header             { order: 3; }
body.has-active-salar #right-panel > .rp-card.rp-owners-card       { order: 4; }
body.has-active-salar #right-panel > #dep-tabs-shell               { order: 5; }
/* In 3D mode, the Adjust assumptions sliders + Resource Pre-Estimate
   (inside #dep-tabs-shell) are the primary thing the user wants to
   see alongside the basin canvas. Pull them above the Owners list so
   they sit in the visible viewport without scrolling. 2D mode keeps
   Owners above Deposit Details. (2026-05-04) */
body.has-active-salar.view-deposit3d #right-panel > #dep-tabs-shell         { order: 3; }
body.has-active-salar.view-deposit3d #right-panel > #rp-owners-header       { order: 4; }
body.has-active-salar.view-deposit3d #right-panel > .rp-card.rp-owners-card { order: 5; }
/* Force-hide the CTA everywhere so JS that flips its inline style
   can't bring it back. The element + handlers stay in the DOM so
   updateDepositIntelligence() doesn't NPE looking for #rp-cta. */
#rp-cta { display: none !important; }

/* Editing-mode trim — while a geologist is drawing or editing a
   boundary, hide investor-facing right-panel cards (Deposit
   Intelligence, Owners, projects/concessions panels) so the Deposit
   Tools card and the map have full focus.  Restored when editing
   ends (save / delete / cancel).  Added 2026-05-04 ahead of the
   methodical draw-pass week. */
body.is-editing-boundary #right-panel > .rp-intel,
body.is-editing-boundary #right-panel > #rp-owners-header,
body.is-editing-boundary #right-panel > .rp-card.rp-owners-card,
body.is-editing-boundary #right-panel > #plist-header,
body.is-editing-boundary #right-panel > #projects-panel,
body.is-editing-boundary #right-panel > #clist-header,
body.is-editing-boundary #right-panel > #clist {
  display: none !important;
}

#dep-tabs-shell {
  display: none;
  margin-top: 4px;
}
.dep-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
  margin-top: 12px;
}
.dep-tab-btn {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 4px;
  background: transparent;
  color: var(--white-dim);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.dep-tab-btn:hover { color: var(--white-muted); }
.dep-tab-btn.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.dep-tab-panel { display: none; padding: 4px 2px 8px; }
.dep-tab-panel.active { display: block; }

.dep-card {
  background: rgba(11, 26, 46, 0.5);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.dep-card h4 {
  margin: 0 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  font-weight: 500;
}
.dep-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 0.78rem;
  color: var(--white-muted);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.dep-stat-row:last-child { border-bottom: none; }
.dep-stat-row .dep-stat-label { color: var(--white-dim); font-size: 0.7rem; }
.dep-stat-row .dep-stat-val   { color: var(--white); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
.dep-stat-row .dep-stat-val.highlight { color: var(--cyan); }
.dep-stat-row .dep-stat-val.warm     { color: var(--warm); }

.dep-slider-block { margin-bottom: 10px; }
.dep-slider-block:last-child { margin-bottom: 0; }
.dep-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.dep-slider-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.dep-slider-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--cyan);
  font-weight: 600;
}
/* 2026-05-24 (F-011 v1.4): a small monospaced hint row sitting under a
   slider input, used to surface the worker's authoritative geological
   prediction alongside the user-override slider. Visual weight is below
   the slider read-out so the user understands the slider is the active
   control and the hint is reference info. */
.dep-slider-hint {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--white-dim);
}
.dep-slider-hint .dep-slider-hint-val { color: var(--white-dim); font-weight: 500; }
.dep-slider-hint.is-fallback .dep-slider-hint-val { color: var(--warm); }
.dep-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.dep-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cyan);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 200, 200, 0.6);
}
.dep-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cyan); cursor: pointer; border: none;
}
.dep-disclaimer {
  font-size: 0.6rem;
  color: var(--white-dim);
  font-style: italic;
  line-height: 1.4;
  padding: 6px 8px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px dashed rgba(245, 158, 11, 0.3);
  border-radius: 3px;
}
.dep-disclaimer strong { color: #f59e0b; font-style: normal; }

.dep-meta-line {
  font-size: 0.65rem;
  color: var(--white-dim);
  line-height: 1.4;
  margin-top: 4px;
}

/* Land tab — concession list */
.dep-land-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.dep-land-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(11, 26, 46, 0.4);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dep-land-row:hover { background: rgba(0, 200, 200, 0.08); border-color: rgba(0, 200, 200, 0.3); }
.dep-land-row.highlighted { border-color: var(--cyan); background: rgba(0, 200, 200, 0.14); }
.dep-land-row .dep-land-swatch {
  width: 12px; height: 12px; border-radius: 2px; flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.dep-land-row .dep-land-text { flex: 1 1 auto; min-width: 0; }
.dep-land-row .dep-land-owner {
  font-size: 0.78rem;
  color: var(--white);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dep-land-row .dep-land-meta {
  font-size: 0.62rem;
  color: var(--white-dim);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 1px;
}
/* Projects nested under each owner row in the Owners tab. Click
   opens the project page (depOpenProject). 2026-05-01. */
.dep-land-projects {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.dep-land-project {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 8px;
  background: rgba(0, 200, 200, 0.04);
  border: 1px solid rgba(0, 200, 200, 0.18);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dep-land-project:hover {
  background: rgba(0, 200, 200, 0.10);
  border-color: rgba(0, 200, 200, 0.45);
}
.dep-land-project .dep-land-project-name {
  font-size: 0.72rem;
  color: var(--white);
  font-weight: 500;
}
.dep-land-project .dep-land-project-meta {
  font-size: 0.6rem;
  color: var(--white-dim);
  font-family: 'JetBrains Mono', monospace;
}
.dep-land-row-unmatched { opacity: 0.85; }
/* Projects-on-this-deposit list (Deposit Details tab). Same shape
   as .dep-land-list — rows are clickable and route to the project
   detail overlay. */
.dep-projects-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
}
.dep-projects-row {
  padding: 8px 10px;
  background: rgba(11, 26, 46, 0.5);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dep-projects-row:hover {
  background: rgba(0, 200, 200, 0.06);
  border-color: rgba(0, 200, 200, 0.3);
}
.dep-projects-row .dep-projects-name {
  font-size: 0.78rem;
  color: var(--white);
  font-weight: 500;
}
.dep-projects-row .dep-projects-meta {
  font-size: 0.66rem;
  color: var(--white-dim);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}
.dep-projects-empty {
  font-size: 0.72rem;
  color: var(--white-dim);
  font-style: italic;
  text-align: center;
  padding: 16px 8px;
  background: rgba(11, 26, 46, 0.3);
  border: 1px dashed var(--border-light);
  border-radius: 4px;
}
.dep-land-empty {
  font-size: 0.72rem;
  color: var(--white-dim);
  font-style: italic;
  text-align: center;
  padding: 16px 8px;
  background: rgba(11, 26, 46, 0.3);
  border: 1px dashed var(--border-light);
  border-radius: 3px;
}

/* "View as 3D" button — surfaces in 2D mode when a boundary exists. */
.rp-flip-3d-row {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .d3d-title-overlay { max-width: 60%; }
  .d3d-chips { display: none; }
  .d3d-exag-overlay { width: 140px; }
}
/* Data Rooms top header — Watchlist-style title row on the dr-page.
   Removes the wlx-header bottom border because the explainer drawer
   underneath carries its own visual treatment, and softens the
   horizontal padding to match the rest of the dr-page content. */
.dr-header {
  border-bottom: none !important;
  background: transparent !important;
  padding: 18px 28px 14px;
  margin-bottom: 6px;
}
.dr-header .vault-privacy-banner {
  background: rgba(0, 200, 200, 0.10);
  border: 1px solid rgba(0, 200, 200, 0.35);
  color: var(--cyan);
  padding: 4px 10px;
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== Vault active strip + detail view (2026-04-30 redesign) =====
   Active strip uses the same .vault-pcard markup as the All Projects
   grid so the user sees one card style across the page.  Detail view
   is a two-column layout (profile | files + analyst) inside the
   existing #vault-active-pane container — falls back to single column
   on narrow screens.

   Active strip is HORIZONTAL-scroll so 20+ pinned projects fit on one
   row instead of pushing the detail pane down 4 rows.  Detail pane
   has a fixed max-height with internal vertical scroll so very rich
   project profiles don't blow the page out. */
.vault-quick-row {
  display: flex;
  flex-direction: row;
  gap: 0.7rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  /* Vertical padding so the pill's hover translate(-1px) has room to
     render — without it, overflow-y:hidden clips the lifted top 1px. */
  padding: 3px 0 0.3rem;
  -webkit-overflow-scrolling: touch;
}
.vault-quick-row::-webkit-scrollbar { height: 6px; }
.vault-quick-row::-webkit-scrollbar-thumb { background: rgba(0,200,200,0.35); border-radius: 3px; }
.vault-quick-row > .vault-pcard {
  flex: 0 0 240px;
  scroll-snap-align: start;
}

#vault-active-pane {
  /* Hosts the .vault-hero block.  Sizes to its content; no max-height
     because the hero's file list scrolls the page naturally and the
     mini-cards strip below remains accessible.  Margin-bottom adds
     breathing room before the strip. */
}
.vault-pcard.in-vault.is-open {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.08);
  box-shadow: 0 0 0 1px var(--cyan), 0 6px 18px rgba(0, 200, 200, 0.12);
}

.vault-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0.9rem;
}
.vault-detail-l { flex: 1; min-width: 200px; }
.vault-detail-r { display: flex; align-items: center; gap: 0.65rem; }
.vault-detail-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 0.18rem;
}
.vault-detail-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: var(--white-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vault-detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 880px) {
  .vault-detail-cols { grid-template-columns: 1fr; }
}
.vault-detail-col { display: flex; flex-direction: column; gap: 1rem; }
.vault-detail-section {
  background: rgba(11, 26, 46, 0.45);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 0.85rem 1rem 0.95rem;
}
.vault-detail-section h4 {
  margin: 0 0 0.55rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vault-detail-count {
  font-size: 0.6rem;
  color: var(--cyan);
  font-weight: 600;
}
.vault-detail-empty {
  color: var(--white-dim);
  font-size: 0.78rem;
  font-style: italic;
  padding: 0.4rem 0 0.6rem;
}
.vault-detail-intel {
  background: rgba(232, 168, 56, 0.04);
  border: 1px solid rgba(232, 168, 56, 0.25);
  border-radius: 5px;
  padding: 0.7rem 0.9rem 0.8rem;
}
.vault-detail-intel-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8a838;
  margin-bottom: 0.4rem;
}
.vault-detail-intel p {
  margin: 0;
  color: var(--white-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.vault-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  gap: 1rem;
}
.vault-stat-row:last-child { border-bottom: none; }
.vault-stat-label {
  font-size: 0.74rem;
  color: var(--white-dim);
}
.vault-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--white);
  font-weight: 500;
  text-align: right;
}
.vault-stat-val.highlight { color: var(--cyan); }

/* Puna Analyst card */
.vault-analyst-card {
  border-color: rgba(0, 200, 200, 0.4);
  background: linear-gradient(135deg, rgba(0,200,200,0.06), rgba(11,26,46,0.55));
}
.vault-analyst-blurb {
  margin: 0 0 0.7rem;
  color: var(--white-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.vault-analyst-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan);
  border: 1px solid var(--cyan);
}
.vault-analyst-activate {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--cyan);
  color: var(--navy-deep);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  padding: 0.55rem 0.95rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.vault-analyst-activate:hover { background: var(--cyan-bright); border-color: var(--cyan-bright); }
.vault-analyst-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--white-muted);
  font-size: 0.78rem;
}
.vault-analyst-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(0, 200, 200, 0.2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: vaultAnSpin 0.9s linear infinite;
}
@keyframes vaultAnSpin { to { transform: rotate(360deg); } }
.vault-analyst-error {
  color: #fca5a5;
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
}
.vault-analyst-body p {
  margin: 0 0 0.5rem;
  color: var(--white);
  font-size: 0.83rem;
  line-height: 1.5;
}
.vault-analyst-list {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
  color: var(--white-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.vault-analyst-list li { margin-bottom: 0.25rem; }
.vault-analyst-refresh {
  margin-top: 0.4rem;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--white-muted);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
}
.vault-analyst-refresh:hover { border-color: var(--cyan); color: var(--cyan); }

/* Free-tier paywall CTA next to the brief header.  Same shape as the
   refresh button, accent colour matches the partial badge so the two
   paywall hints read as one signal. */
.vault-analyst-upgrade {
  margin-top: 0.4rem;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.55);
  color: #93c5fd;
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
}
.vault-analyst-upgrade:hover {
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(96, 165, 250, 0.9);
  color: #bfdbfe;
}

/* Peer-comparison bar charts inside the Puna Analyst card. Pure CSS
   bars (no Chart.js dep).  The active project's row is highlighted
   cyan; peers stay in a dim shade so the comparison reads at a glance. */
.vault-charts {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
.vault-chart {
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.55rem 0.7rem 0.6rem;
}
.vault-chart-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.4rem;
}
.vault-chart-rows {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.vault-chart-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 3fr minmax(70px, max-content);
  align-items: center;
  gap: 0.5rem;
}
.vault-chart-name {
  font-size: 0.7rem;
  color: var(--white-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vault-chart-row.mine .vault-chart-name { color: var(--cyan); font-weight: 600; }
.vault-chart-bar-wrap {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  height: 10px;
  overflow: hidden;
}
.vault-chart-bar {
  background: linear-gradient(90deg, rgba(155, 171, 196, 0.55), rgba(155, 171, 196, 0.25));
  height: 100%;
  border-radius: 2px;
  transition: width 0.25s ease;
}
.vault-chart-row.mine .vault-chart-bar {
  background: linear-gradient(90deg, var(--cyan), rgba(0, 200, 200, 0.55));
  box-shadow: 0 0 6px rgba(0, 200, 200, 0.35);
}
.vault-chart-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--white-muted);
  text-align: right;
  white-space: nowrap;
}
.vault-chart-row.mine .vault-chart-val { color: var(--white); font-weight: 600; }
.vault-chart-unit {
  color: var(--white-dim);
  margin-left: 0.25rem;
  font-size: 0.6rem;
}
.vault-chart-empty-msg {
  font-size: 0.7rem;
  color: var(--white-dim);
  font-style: italic;
}

/* Active card chrome (May 2026 redesign per Clint).
   - Top-left: Puna access toggle chip (replaces the redundant ★ Pinned tag).
   - Top-right corner: file count badge + small × remove button.
   - Bottom: full-width "View →" button as the primary action.        */
.vault-pcard-puna-chip {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  /* Heavier opacity + stronger contrast so the chip stays legible
     on white-ish salt-flat / cloud-cover satellite backgrounds. */
  background: rgba(6, 15, 29, 0.92);
  border: 1px solid rgba(0, 200, 200, 0.55);
  color: var(--white);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  user-select: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}
.vault-pcard-puna-chip input { display: none; }

/* Tiny iOS-style toggle inside the dark Puna chip.  The chip itself
   stays dark (rgba(6,15,29,0.92)) in both states so it reads clearly
   on light salt-flat imagery — only the toggle knob + track recolour
   to communicate state. */
.vault-pcard-puna-toggle {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  flex: 0 0 auto;
  transition: background 0.15s, border-color 0.15s;
}
.vault-pcard-puna-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--white);
  transition: left 0.18s ease, background 0.15s, box-shadow 0.15s;
}
.vault-pcard-puna-chip.on .vault-pcard-puna-toggle {
  background: rgba(0, 200, 200, 0.35);
  border-color: var(--cyan);
}
.vault-pcard-puna-chip.on .vault-pcard-puna-toggle-knob {
  left: 13px;
  background: var(--cyan-bright);
  box-shadow: 0 0 8px rgba(0, 200, 200, 0.9);
}
.vault-pcard-puna-chip:hover {
  border-color: var(--cyan-bright);
  transform: translateY(-1px);
}

/* × remove — small unobtrusive corner control */
.vault-pcard-remove-x {
  position: absolute;
  top: 6px; right: 8px;
  background: rgba(2, 8, 18, 0.6);
  border: 1px solid transparent;
  color: var(--white-dim);
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.vault-pcard-remove-x:hover {
  color: rgba(255, 140, 140, 0.95);
  border-color: rgba(255, 140, 140, 0.55);
  background: rgba(255, 80, 80, 0.18);
}

/* The file count keeps the existing .vault-pcard-stage chrome but
   shifts down to make room for the × in the top-right corner. */
.vault-pcard.in-vault .vault-pcard-stage {
  top: auto;
  bottom: 8px;
  right: 8px;
}

/* Full-width View → button — primary CTA, distinct hover from the
   top-zone "select" affordance. */
.vault-pcard-view-wide {
  display: block;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.65rem 0.9rem;
  background: rgba(0, 200, 200, 0.14);
  color: var(--cyan);
  border-top: 1px solid rgba(0, 200, 200, 0.4);
  text-decoration: none;
  transition: background 0.12s, color 0.12s, letter-spacing 0.12s;
}
.vault-pcard-view-wide:hover {
  background: var(--cyan);
  color: var(--navy-deep);
  letter-spacing: 0.14em;
}
.vault-pcard.in-vault.is-open .vault-pcard-view-wide {
  background: rgba(0, 200, 200, 0.22);
}

/* ACTIVE PROJECT HERO — one frame containing every affordance for the
   currently-selected project: satellite, name, meta, Puna toggle,
   remove ×, file dropzone, file list, View →.  The hero sits ABOVE
   the strip of other pinned projects so the user always sees one
   complete project surface, never a card + drawer split.  Two-column
   layout on desktop (image | body), stacks on narrow viewports. */
.vault-active-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  background: rgba(0, 200, 200, 0.04);
  border: 1px solid var(--cyan);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.9rem;
  box-shadow: 0 6px 18px rgba(0, 200, 200, 0.08);
  cursor: pointer;                /* whole card routes to project page */
  transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
}
.vault-active-hero:hover {
  background: rgba(0, 200, 200, 0.07);
  box-shadow: 0 8px 22px rgba(0, 200, 200, 0.16);
  transform: translateY(-1px);
}
.vault-active-hero:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .vault-active-hero { grid-template-columns: 1fr; }
}
.vault-active-hero-img {
  position: relative;
  min-height: 180px;
  background-size: cover;
  background-position: center;
  border-right: 1px solid rgba(0, 200, 200, 0.22);
}
@media (max-width: 720px) {
  .vault-active-hero-img {
    min-height: 130px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 200, 200, 0.22);
  }
}
.vault-active-hero-img .vault-pcard-puna-chip {
  position: absolute; top: 0.55rem; left: 0.55rem;
}
.vault-active-hero-remove {
  position: absolute; top: 0.55rem; right: 0.55rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(6, 15, 29, 0.6);
  color: var(--white-muted);
  cursor: pointer;
  font-size: 1.05rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.vault-active-hero-remove:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
}
.vault-active-hero-body {
  padding: 0.9rem 1.1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;                   /* let flex children truncate inside the grid cell */
}
/* Pre-2026-05-04 the dropzone was pinned to the bottom of the hero
   body via margin-top:auto.  Without files in the project that left
   ~120px of dead air between the meta line and the dropzone.  The
   dropzone now sits naturally under the meta / file list and the
   "Open project page →" CTA below pins to the bottom in its place. */
.vault-active-hero-upload { margin-top: 0; }
/* "Open project page →" CTA — bottom-pinned so it always sits on the
   same baseline regardless of how many files are in the body. */
.vault-active-hero-cta-row {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  padding-top: 0.4rem;
}
.vault-active-hero-open {
  background: transparent;
  border: 1px solid rgba(0, 200, 200, 0.45);
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.42rem 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.vault-active-hero-open:hover {
  background: rgba(0, 200, 200, 0.12);
  color: var(--cyan-bright);
  border-color: var(--cyan);
}
.vault-active-hero-head {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.vault-active-hero-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.005em;
}
.vault-active-hero-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 0.2rem;
}
.vault-active-hero-view {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  background: rgba(0, 200, 200, 0.14);
  color: var(--cyan);
  border: 1px solid rgba(0, 200, 200, 0.4);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.vault-active-hero-view:hover {
  background: var(--cyan);
  color: var(--navy-deep);
}
/* .vault-active-hero-upload margin-top is set higher in the file
   (margin-top:auto) so the dropzone pins to the bottom of the body. */
.vault-active-hero-doclist { margin-top: 0.15rem; }

/* PILL mode for the strip of OTHER pinned projects below the hero.
   Single-row pill: satellite thumb + name + file count.  Stripped of
   per-project Puna toggle and × button — those affordances live on
   the hero (where they apply to the actively-shown project).  Click
   the pill anywhere to promote that project to the hero slot. */
.vault-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.85rem 0 0;
  height: 38px;
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  color: var(--white-muted);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
  max-width: 240px;
  flex: 0 0 auto;
  text-align: left;
}
.vault-active-pill:hover {
  border-color: var(--cyan);
  color: var(--white);
  background: rgba(0, 200, 200, 0.08);
  transform: translateY(-1px);
}
.vault-active-pill-img {
  width: 38px;
  height: 38px;
  border-radius: 999px 0 0 999px;
  background-size: cover;
  background-position: center;
  flex: 0 0 38px;
  /* draw a tight inner border on the right edge so the round corner
     reads cleanly against the pill's background */
  box-shadow: inset -1px 0 0 rgba(0, 200, 200, 0.18);
}
.vault-active-pill-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.vault-active-pill-count {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--white-dim);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 200, 200, 0.06);
  border: 1px solid rgba(0, 200, 200, 0.18);
}
/* Selected pill — the active project's anchor in the strip.  Cyan
   ring + checkmark + slightly stronger background.  Click is a
   no-op (vaultSelect on the already-active id falls through). */
.vault-active-pill.is-selected {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.14);
  color: var(--white);
  box-shadow: 0 0 0 1px var(--cyan), 0 4px 14px rgba(0, 200, 200, 0.18);
  cursor: default;
}
.vault-active-pill.is-selected:hover {
  transform: none;                /* no lift on the active pill */
}
.vault-active-pill-tick {
  flex: 0 0 auto;
  margin-right: 0.1rem;
  color: var(--cyan-bright);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}
/* Eyebrow over the pinned strip — appears when there's more than one
   pinned project so the user knows the strip is a switcher.  Hidden
   when only the active project is pinned (no switching to do). */
/* Aligned to .drx-section-label / .vault-section-eyebrow values
   (2026-05-07). Was 0.58rem; now 0.55rem so all three rail eyebrows
   share one type. */
.vault-quick-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin: 0.2rem 0 0.55rem;
}

/* Legacy stub class kept around for backwards compat with any cached
   markup; new render path uses .vault-pp-drawer instead. */
.vault-pp-stub { display: flex; flex-direction: column; gap: 0.7rem; }
.vault-pp-stub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.vault-pp-stub-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.2rem;
}
.vault-pp-stub-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
}
.vault-pp-stub-view {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(0, 200, 200, 0.5);
  border-radius: 4px;
  background: rgba(0, 200, 200, 0.10);
  font-weight: 600;
  transition: background 0.12s;
}
.vault-pp-stub-view:hover { background: rgba(0, 200, 200, 0.22); color: var(--cyan-bright); }

/* =============================================================
   F-VAULT-PP · Project Page (Puna Analyst playground)
   Single-scroll layout: hero → tiles → brief → charts →
   educate → files → upgrade.  Replaces the prior two-column
   detail layout for active vault projects.
   ============================================================= */
.vault-pp { display: flex; flex-direction: column; gap: 1.1rem; }

/* Hero */
.vault-pp-hero {
  position: relative;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: rgba(6, 15, 29, 0.85);
  border: 1px solid var(--border-light);
  overflow: hidden;
  min-height: 180px;
  display: flex;
  align-items: flex-end;
}
.vault-pp-hero-inner {
  width: 100%;
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.vault-pp-hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.vault-pp-hero-title {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.vault-pp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-muted);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.vault-pp-pill {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 200, 200, 0.16);
  color: var(--cyan);
  border: 1px solid rgba(0, 200, 200, 0.45);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  margin-left: 0.4rem;
}
.vault-pp-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.5rem;
}

/* At-a-glance tiles */
.vault-pp-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}
@media (max-width: 720px) {
  .vault-pp-tiles { grid-template-columns: repeat(2, 1fr); }
}
.vault-pp-tile {
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 0.85rem 0.95rem;
}
.vault-pp-tile-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.25rem;
}
.vault-pp-tile-val {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}
.vault-pp-tile-val.highlight { color: var(--cyan); }

/* =============================================================
   Brief 104 V1.1 (2026-05-30) — /app SPA parity port
   -------------------------------------------------------------
   Verbatim port of Stage 2 + Stage 3 CSS from _scripts/projects-
   page-build.mjs lines 1789-2348. Same class hooks (.pp-prov-*,
   .ci-*) drive identical visual contract across both surfaces.
   Path B (shared /shared/css/provenance-and-ci.css) refactor
   banks as small-fixes candidate per LESSON-RENDER-PATH-PARITY-
   ACROSS-SURFACES-NEEDS-SHARED-CSS-EXTRACTION-V1.
   ============================================================= */

/* ---- Stage 2 — per-KPI provenance marker + tooltip (Layer 1+2)
   Three-state per q6 binding:
     SOURCED         → cyan dot + hover-revealed tooltip with title +
                       publisher + publication_date + verbatim_quote +
                       "Open source ↗" link to canonical_url
     ASSERTED_PUBLIC → orange dot + tooltip with P8 carve-out rationale
     SUBDUED         → no marker; cell renders the legacy "—" path

   Hover/focus-within drives reveal so the surface is keyboard-
   accessible. Marker carries tabindex=0 + aria-label. Mobile
   (no hover) falls back to focus/tap. ---- */
.pp-snap-cell--has-prov,
.pp-tile--has-prov {
  position: relative;
}
.pp-prov-marker {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-left: 7px;
  vertical-align: middle;
  cursor: help;
  outline: none;
  flex-shrink: 0;
}
.pp-prov-marker--sourced  { background: var(--cyan);   box-shadow: 0 0 0 2px rgba(0, 200, 200, 0.18); }
.pp-prov-marker--asserted { background: var(--orange, #ff9b3a); box-shadow: 0 0 0 2px rgba(255, 155, 58, 0.18); }
.pp-prov-marker:focus-visible {
  box-shadow: 0 0 0 2px var(--white-soft, #cbd6e6), 0 0 0 4px rgba(0, 200, 200, 0.35);
}
.pp-prov-tooltip {
  position: absolute;
  /* z-index 9999 sits above Leaflet's tile/overlay/popup/controls panes
     (Leaflet uses up to 1000 internally) — FINDING-PR65-C +
     LESSON-OVERLAY-Z-INDEX-DEFAULT-9999. */
  z-index: 9999;
  top: calc(100% + 6px);
  left: 0;
  width: min(360px, 92vw);
  max-width: 360px;
  background: var(--navy-deep, #060f1d);
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  font-family: var(--font-body, Inter, -apple-system, sans-serif);
  font-size: 0.84rem;
  color: var(--white-soft, #cbd6e6);
  line-height: 1.55;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.pp-snap-cell--has-prov:hover .pp-prov-tooltip,
.pp-snap-cell--has-prov:focus-within .pp-prov-tooltip,
.pp-tile--has-prov:hover .pp-prov-tooltip,
.pp-tile--has-prov:focus-within .pp-prov-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.pp-prov-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', SFMono-Regular, Menlo, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.4rem;
}
.pp-prov-title {
  color: var(--white, #f0f4f8);
  font-weight: 500;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}
.pp-prov-meta {
  font-size: 0.74rem;
  color: var(--white-muted, #9babc4);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.pp-prov-meta.pp-prov-asserted {
  color: var(--orange, #ff9b3a);
  font-family: var(--font-mono, 'JetBrains Mono', SFMono-Regular, Menlo, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pp-prov-doctype {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-radius: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--cyan);
  background: rgba(0, 200, 200, 0.08);
}
.pp-prov-sep { color: var(--white-dim); margin: 0 0.2rem; }
.pp-prov-quote {
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.7rem;
  border-left: 2px solid var(--cyan);
  background: rgba(0, 200, 200, 0.05);
  font-size: 0.82rem;
  color: var(--white-soft, #cbd6e6);
  line-height: 1.5;
  font-style: italic;
}
.pp-prov-body { margin: 0; font-size: 0.82rem; line-height: 1.55; }
.pp-prov-link {
  display: inline-block;
  margin-top: 0.2rem;
  font-family: var(--font-mono, 'JetBrains Mono', SFMono-Regular, Menlo, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-decoration: none;
}
.pp-prov-link:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .pp-prov-tooltip {
    width: 92vw;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
  }
  .pp-snap-cell--has-prov:hover .pp-prov-tooltip,
  .pp-snap-cell--has-prov:focus-within .pp-prov-tooltip,
  .pp-tile--has-prov:hover .pp-prov-tooltip,
  .pp-tile--has-prov:focus-within .pp-prov-tooltip {
    transform: translateX(-50%) translateY(0);
  }
}

/* ---- Stage 3 — Community Intelligence dropdown.
   Lives INSIDE the Document Structure container as the third row
   (q1 binding). 400px-max scrollable body with cyan thin scrollbar
   per SPEC-Q-104-3 PATH A. Two contributor pills (q2 binding); no
   filter chips (q3); sort dropdown retained (4 modes). The pi-
   upload affordance sits OUTSIDE the 400px constraint as a sibling
   of the panel so the contribute action is always reachable. ---- */
.ds-row.is-community-intel { /* cyan accent kept subtle when collapsed */ }
.ds-row.is-community-intel.is-open {
  background: rgba(11, 26, 46, 0.7);
  border-color: rgba(0, 200, 200, 0.32);
}
.ds-row.is-community-intel .ds-icon { color: var(--cyan); }
.ds-ci-panel {
  margin-top: 0.7rem;
  background: rgba(6, 15, 29, 0.55);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 0.75rem;
}
.ds-ci-panel[hidden] { display: none; }
.ds-ci-panel-inner { display: flex; flex-direction: column; gap: 0.85rem; }
.ci-scroll-container {
  max-height: 400px;        /* q4 binding — 4-inch scrollable body */
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: rgba(6, 15, 29, 0.4);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 200, 200, 0.6) transparent;
}
.ci-scroll-container::-webkit-scrollbar { width: 6px; }
.ci-scroll-container::-webkit-scrollbar-track { background: transparent; }
.ci-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(0, 200, 200, 0.6);
  border-radius: 3px;
}
.ci-scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 200, 200, 0.85);
}
.ci-sticky-header {
  position: sticky; top: 0; z-index: 2;
  background: rgba(11, 26, 46, 0.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-light);
  padding: 0.85rem 0.95rem 0.7rem;
}
.ci-contributor-summary {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem;
}
.ci-contributor-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono, 'JetBrains Mono', SFMono-Regular, Menlo, monospace);
  font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--white-muted, #9babc4);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 4px 9px;
  background: rgba(6, 15, 29, 0.6);
}
.ci-contributor-pill[hidden] { display: none; }
.ci-contributor-pill strong { color: var(--white, #f0f4f8); font-weight: 600; margin-right: 4px; }
.ci-pill-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  vertical-align: middle;
}
.ci-pill-dot.is-puna { background: var(--cyan); }
.ci-pill-dot.is-user { background: var(--green, #4ade80); }
.ci-filters {
  display: flex; align-items: center; gap: 0.6rem;
}
.ci-sort-label {
  font-family: var(--font-mono, 'JetBrains Mono', SFMono-Regular, Menlo, monospace);
  font-size: 0.62rem; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--white-dim);
}
.ci-sort-select {
  font-family: var(--font-mono, 'JetBrains Mono', SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  color: var(--cyan);
  background: rgba(11, 26, 46, 0.6);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
}
.ci-sort-select:focus { outline: none; border-color: var(--cyan); }
.ci-doc-list {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 0.85rem 0.95rem;
}
.ci-doc-empty {
  padding: 1rem 0; color: var(--white-muted, #9babc4);
  font-size: 0.84rem; text-align: center;
}
.ci-doc {
  border: 1px solid var(--border-light);
  border-radius: 5px;
  background: rgba(11, 26, 46, 0.42);
  padding: 0.8rem 0.95rem;
  transition: border-color 0.15s;
}
.ci-doc:hover { border-color: rgba(0, 200, 200, 0.2); }
.ci-doc-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.ci-doc-main { flex: 1; min-width: 0; }
.ci-doc-title {
  font-size: 0.9rem; font-weight: 500;
  color: var(--white, #f0f4f8);
  line-height: 1.4; margin-bottom: 0.3rem;
  word-break: break-word;
}
.ci-doc-meta {
  font-size: 0.74rem; color: var(--white-muted, #9babc4);
  line-height: 1.5; margin-bottom: 0.45rem; word-break: break-word;
}
.ci-doc-sep { color: var(--white-dim); margin: 0 0.2rem; }
.ci-doc-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ci-badge {
  font-family: var(--font-mono, 'JetBrains Mono', SFMono-Regular, Menlo, monospace);
  font-size: 0.6rem; letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.ci-badge-dot { width: 5px; height: 5px; border-radius: 50%; }
.ci-badge.contrib-puna   { color: var(--cyan);                   border-color: rgba(0, 200, 200, 0.32); background: rgba(0, 200, 200, 0.10); }
.ci-badge.contrib-puna .ci-badge-dot { background: var(--cyan); }
.ci-badge.contrib-user   { color: var(--green, #4ade80);         border-color: rgba(74, 222, 128, 0.32); background: rgba(74, 222, 128, 0.10); }
.ci-badge.contrib-user .ci-badge-dot { background: var(--green, #4ade80); }
.ci-badge.contrib-anon   { color: var(--white-soft, #cbd6e6);    border-color: var(--border-light); background: rgba(255, 255, 255, 0.03); }
.ci-badge.contrib-anon .ci-badge-dot { background: var(--white-soft, #cbd6e6); }
.ci-badge.doctype        { color: var(--white-soft, #cbd6e6); border-color: var(--border-light); background: rgba(255, 255, 255, 0.02); }
.ci-doc-open {
  font-family: var(--font-mono, 'JetBrains Mono', SFMono-Regular, Menlo, monospace);
  font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--cyan);
  border-radius: 3px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
}
.ci-doc-open:hover { background: var(--cyan); color: var(--navy-deep, #060f1d); }
.ci-doc-why {
  font-family: var(--font-mono, 'JetBrains Mono', SFMono-Regular, Menlo, monospace);
  font-size: 0.64rem; letter-spacing: 0.04em;
  color: var(--white-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  margin-top: 0.5rem;
  padding: 0;
  transition: color 0.15s;
  user-select: none;
}
.ci-doc-why::before { content: '▸ '; }
.ci-doc.is-expanded .ci-doc-why::before { content: '▾ '; }
.ci-doc-why:hover { color: var(--cyan); }
.ci-doc-why:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 2px; }
.ci-doc-detail {
  display: none; margin-top: 0.55rem; padding-top: 0.55rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 0.82rem; color: var(--white-soft, #cbd6e6); line-height: 1.55;
}
.ci-doc.is-expanded .ci-doc-detail { display: block; }
.ci-doc-detail p { margin: 0 0 0.45rem; }
.ci-doc-detail p:last-child { margin-bottom: 0; }
.ci-doc-detail strong { color: var(--white, #f0f4f8); }
@media (max-width: 720px) {
  .ds-ci-panel { padding: 0.6rem; }
  .ci-sticky-header { padding: 0.7rem 0.75rem 0.55rem; }
  .ci-doc-list { padding: 0.7rem 0.75rem; }
  .ci-doc-row { flex-direction: column; }
  .ci-doc-open { align-self: stretch; text-align: center; margin-top: 0.5rem; }
}
/* ============== end Brief 104 V1.1 port ============== */

/* Generic section frame */
.vault-pp-section {
  background: rgba(11, 26, 46, 0.42);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 0.95rem 1.1rem 1.05rem;
}

/* 2026-05-07 — Data Room access section. Originally lived on the
   project page body; relocated into the right rail per Clint. The
   rail surface (#vault-pp-rail-dataroom) is hidden on every view
   except body.view-vault-project. Three states: locked (default +
   pending) and unlocked (granted). CTA sits above the visual; the
   visual shows the data room contents with a lock icon. Granted
   state turns the card into a primary affordance. */
.vault-pp-rail-dataroom { display: none; }
body.view-vault-project .right-rail .vault-pp-rail-dataroom {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}
.vault-pp-dataroom-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 8px;
}
.vault-pp-dataroom-section {
  display: flex; flex-direction: column; gap: 10px;
}
.vault-pp-dataroom-cta {
  width: 100%;
  background: var(--cyan);
  color: var(--navy-deep);
  border: 1px solid var(--cyan);
  border-radius: 5px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.vault-pp-dataroom-cta:hover { background: var(--cyan-bright); border-color: var(--cyan-bright); }
.vault-pp-dataroom-cta.is-pending {
  background: rgba(232, 168, 56, 0.10);
  color: var(--warm);
  border-color: rgba(232, 168, 56, 0.45);
  cursor: default;
}
.vault-pp-dataroom-withdraw {
  align-self: flex-start;
  background: transparent;
  color: var(--white-dim);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.vault-pp-dataroom-withdraw:hover { color: rgba(255, 140, 140, 0.9); border-color: rgba(255, 140, 140, 0.45); }
.vault-pp-dataroom-card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: rgba(11, 26, 46, 0.55);
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.vault-pp-dataroom-card.vault-pp-dataroom-locked {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.10);
  opacity: 0.85;
}
.vault-pp-dataroom-card.vault-pp-dataroom-unlocked {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.06);
  cursor: pointer;
}
.vault-pp-dataroom-card.vault-pp-dataroom-unlocked:hover {
  background: rgba(0, 200, 200, 0.10);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.vault-pp-dataroom-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
}
.vault-pp-dataroom-locked .vault-pp-dataroom-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white-dim);
}
.vault-pp-dataroom-unlocked .vault-pp-dataroom-icon {
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan);
}
.vault-pp-dataroom-body { flex: 1; min-width: 0; }
.vault-pp-dataroom-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 3px;
}
.vault-pp-dataroom-locked .vault-pp-dataroom-title { color: var(--white-muted); }
.vault-pp-dataroom-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--white-dim);
  line-height: 1.4;
}
.vault-pp-h3 {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vault-pp-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--cyan);
}
.vault-pp-empty {
  color: var(--white-dim);
  font-size: 0.78rem;
  font-style: italic;
  padding: 0.4rem 0 0.6rem;
}

/* Brief 78A (2026-05-24) — .pp-hero-actions-app block bottom-left of
   the v3 hero. Hosts the operator-grade buttons (Pin to Vault /
   Allow Puna access toggle / Remove from Vault) so the .pp-add-
   watchlist top-right slot stays free for the standard v3 layout
   (which on /app is omitted — Vault pinning is the richer
   equivalent). The .pp-hero is position:relative so this block can
   sit at the hero's bottom edge without disturbing the eyebrow /
   title / meta-row above. */
.pp-hero-actions-app {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.pp-hero-actions-app .vault-toggle-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.pp-hero-actions-app .vault-pin-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy-deep);
  background: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 3px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pp-hero-actions-app .vault-pin-btn:hover {
  background: var(--cyan-bright);
  box-shadow: 0 0 14px rgba(0, 200, 200, 0.3);
}

/* Brief 78 (2026-05-24) — sub-block separators inside Peer comparison +
   Investment thesis sections. The precomputed prose (shared with Surface A
   via widget.css) renders first; the /app-specific operator-grade extra
   (peer-comparison charts; NPV Uplift Potential block) sits below with
   a dashed divider + mono uppercase eyebrow so the layering reads as
   "agent prose first, /app's structured insight second." */
.vault-pp-sub-divider {
  margin: 1.1rem 0 0.7rem;
  border-top: 1px dashed var(--border-light);
}
.vault-pp-subblock-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white-muted);
  margin-bottom: 0.6rem;
}
/* Reset thesis section's default top padding when it now leads with an h3
   (vault-pp-thesis-section previously had no h3 — vaultRenderInvestment
   Thesis injected its own heading). */
.vault-pp-thesis-section > .vault-pp-h3 { margin-top: 0; }

/* Brief activator (idle state). 2026-05-07 — trimmed per Clint:
   single line of context (head + sub), CTA on the right, generous
   bottom margin so the card doesn't bump the page floor. */
.vault-pp-brief-activator {
  text-align: left;
  background: linear-gradient(135deg, rgba(0,200,200,0.10), rgba(11,26,46,0.55));
  border-color: rgba(0, 200, 200, 0.45);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.vault-pp-brief-activator-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.vault-pp-brief-activator-head .vault-pp-h3 { margin: 0; }
.vault-pp-brief-activator-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--white-dim);
  text-transform: none;
}
.vault-pp-brief-activator .vault-analyst-activate {
  flex-shrink: 0;
  margin: 0;
}

/* Brief block (loading + ready) */
.vault-pp-brief-wrap {
  background: rgba(11, 26, 46, 0.42);
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-radius: 6px;
  padding: 0.95rem 1.1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.vault-pp-brief-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.vault-pp-brief-head .vault-pp-h3 { margin: 0; }
.vault-pp-brief-head-r {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.vault-pp-brief-newctx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(232, 168, 56, 0.12);
  color: #fcd34d;
  border: 1px solid rgba(232, 168, 56, 0.5);
}
.vault-pp-brief-partial {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.5);
  cursor: help;
}
.vault-analyst-refresh.has-new {
  border-color: rgba(232, 168, 56, 0.5);
  color: #fcd34d;
}
.vault-pp-brief-loading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--white-muted);
}
.vault-pp-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
@media (max-width: 880px) {
  .vault-pp-brief-grid { grid-template-columns: 1fr; }
}
.vault-pp-bsec {
  background: rgba(6, 15, 29, 0.55);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 0.75rem 0.9rem 0.85rem;
}
.vault-pp-bsec-h4 {
  margin: 0 0 0.45rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.vault-pp-bsec-body p {
  margin: 0 0 0.4rem;
  color: var(--white);
  font-size: 0.82rem;
  line-height: 1.55;
}
.vault-pp-bsec-body p:last-child { margin-bottom: 0; }
.vault-pp-bsec-body strong { color: var(--cyan-bright); font-weight: 600; }
.vault-pp-section-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vault-pp-section-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
  color: var(--white-muted);
  line-height: 1.5;
}
.vault-pp-section-list li::before {
  content: '·';
  position: absolute;
  left: 0.25rem;
  top: -0.05rem;
  color: var(--cyan);
  font-weight: 800;
}
.vault-pp-section-empty {
  color: var(--white-dim);
  font-style: italic;
  font-size: 0.78rem;
  margin: 0;
}
.vault-pp-bsec.is-loading .vault-pp-skel {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: vaultSkel 1.4s linear infinite;
  height: 0.7rem;
  border-radius: 3px;
  margin-bottom: 0.4rem;
}
.vault-pp-bsec.is-loading .vault-pp-skel.short { width: 60%; }
@keyframes vaultSkel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Educate Puna feedback */
.vault-pp-feedback {
  background: linear-gradient(135deg, rgba(232, 168, 56, 0.05), rgba(11, 26, 46, 0.55));
  border-color: rgba(232, 168, 56, 0.3);
}
.vault-pp-feedback-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.vault-pp-feedback-head .vault-pp-h3 { margin: 0; }
.vault-pp-feedback-sub {
  font-size: 0.74rem;
  color: var(--white-muted);
}
.vault-pp-feedback-input {
  width: 100%;
  min-height: 70px;
  padding: 0.55rem 0.75rem;
  background: rgba(6, 15, 29, 0.7);
  color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.82rem;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  margin-bottom: 0.55rem;
}
.vault-pp-feedback-input:focus { border-color: var(--cyan); }
.vault-pp-feedback-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.vault-pp-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--white-muted);
  cursor: pointer;
}
.vault-pp-checkbox input { accent-color: var(--cyan); cursor: pointer; }
.vault-pp-feedback-submit {
  margin-left: auto;
  background: var(--cyan);
  color: var(--navy-deep);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.vault-pp-feedback-submit:hover { background: var(--cyan-bright); }
.vault-pp-feedback-msg {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--white-dim);
  min-height: 0.9rem;
}
.vault-pp-feedback-msg.ok  { color: #86efac; }
.vault-pp-feedback-msg.err { color: #fca5a5; }

/* Charts section header overrides — wraps the existing .vault-charts */
.vault-pp-charts-section .vault-charts { margin-bottom: 0; }
.vault-charts-2up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
@media (max-width: 760px) {
  .vault-charts-2up { grid-template-columns: 1fr; }
}

/* Project summary block — narrative + key-fields grid */
.vault-pp-summary { display: flex; flex-direction: column; gap: 0.85rem; }
.vault-pp-summary-prose {
  color: var(--white);
  font-size: 0.92rem;
  line-height: 1.55;
}
.vault-pp-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem 1.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
}
.vault-pp-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.32rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  gap: 0.6rem;
}
.vault-pp-sum-label {
  font-size: 0.72rem;
  color: var(--white-dim);
}
.vault-pp-sum-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  color: var(--white);
  text-align: right;
}

/* ===== NPV Uplift Potential · Investment Thesis section ===== */
/* 2026-05-09 — surfaces capital_required → uplift_value pairs so
   allocators can read "fund $X → unlock $Y of NAV". */
.vault-pp-thesis-section { margin-top: 0.6rem; }
.vault-pp-thesis-text {
  color: var(--white);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-light);
}
.vault-pp-thesis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
@media (max-width: 760px) {
  .vault-pp-thesis-grid { grid-template-columns: 1fr; }
}
.vault-pp-thesis-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin: 0 0 0.55rem;
}
.vault-pp-thesis-col.is-opp h4 { color: var(--cyan); }
.vault-pp-thesis-col.is-risk h4 { color: rgba(255, 140, 140, 0.85); }
.vault-pp-thesis-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.75rem;
  background: rgba(11, 26, 46, 0.55);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  margin-bottom: 0.5rem;
  transition: border-color 0.12s;
}
.vault-pp-thesis-item:hover { border-color: rgba(255, 255, 255, 0.18); }
.vault-pp-thesis-item-head {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}
.vault-pp-thesis-item-arrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.3rem;
}
.vault-pp-thesis-item-capital,
.vault-pp-thesis-item-uplift {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.vault-pp-thesis-item-capital {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white-muted);
}
.vault-pp-thesis-item-uplift {
  background: rgba(0, 200, 200, 0.10);
  color: var(--cyan);
}
.is-risk .vault-pp-thesis-item-uplift {
  background: rgba(255, 140, 140, 0.10);
  color: rgba(255, 140, 140, 0.85);
}
.vault-pp-thesis-item-arrow-sep {
  color: var(--white-dim);
  font-size: 0.7rem;
}
.vault-pp-thesis-item-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.vault-pp-thesis-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white-dim);
}
.vault-pp-thesis-chip.is-high { color: #86efac; background: rgba(134, 239, 172, 0.08); }
.vault-pp-thesis-chip.is-medium { color: var(--warm); background: rgba(232, 168, 56, 0.08); }
.vault-pp-thesis-chip.is-low { color: var(--white-dim); }
.vault-pp-thesis-chip.is-transformational { color: var(--cyan); background: rgba(0, 200, 200, 0.10); }
.vault-pp-thesis-chip.is-material { color: var(--warm); background: rgba(232, 168, 56, 0.08); }
.vault-pp-thesis-empty {
  color: var(--white-dim);
  font-size: 0.82rem;
  font-style: italic;
  padding: 0.5rem 0;
}
.vault-pp-thesis-source {
  font-size: 0.65rem;
  color: var(--white-dim);
  margin-top: 0.15rem;
}
.vault-pp-thesis-assessed {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 0.7rem;
  text-align: right;
}
.vault-pp-thesis-precedents {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.72rem;
  color: var(--white-dim);
  line-height: 1.5;
}
.vault-pp-thesis-precedents-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-right: 0.5rem;
}
.vault-pp-thesis-precedents-list a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 200, 200, 0.3);
}
.vault-pp-thesis-precedents-list a:hover { border-bottom-color: var(--cyan); }
.vault-pp-thesis-precedents-list span:not(:last-child)::after {
  content: ' · ';
  color: var(--white-dim);
}

/* Upgrade Puna */
.vault-pp-upgrade {
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.08), rgba(11, 26, 46, 0.6));
  border-color: rgba(0, 200, 200, 0.4);
}
.vault-pp-upgrade.is-subscriber {
  background: linear-gradient(135deg, rgba(78, 203, 113, 0.08), rgba(11, 26, 46, 0.6));
  border-color: rgba(78, 203, 113, 0.4);
}
.vault-pp-upgrade-blurb {
  margin: 0 0 0.7rem;
  color: var(--white-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.vault-pp-upgrade-blurb strong { color: var(--cyan); }
.vault-pp-upgrade-cta {
  background: var(--cyan);
  color: var(--navy-deep);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  padding: 0.55rem 1rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.vault-pp-upgrade-cta:hover { background: var(--cyan-bright); }

/* ===== F-VAULT-PROJECT-CONTRIB · Brief 9 (2026-05-13, Variant 3) =====
   "Contributed intelligence" inline panel beneath the Document-structure
   list. Surfaces promoted intel_interpretations for this project with
   three provenance badges:
     · Known subscriber — upload with verified email (cyan)
     · Anonymous       — upload with no email      (grey)
     · Web-ingest      — pulled by Puna's web-ingest pipeline (violet)
   Staff users additionally see the original filename + storage path
   inline (NOT the contributor's email — privacy choice, 2026-05-13).
   The toggling row + chip live in vaultRenderSdrFolderList; CSS for
   that row is .vault-sdr-row.is-contrib (with the SDR row styles).
   IDs are stable because only one project page is mounted at a time.
   See vaultRenderSdrFolderList + projContribToggle +
   loadProjectContributions + renderProjectContributions. */
.proj-contrib-inline {
  display: none;
  margin-top: 12px;
  background: rgba(6, 15, 29, 0.55);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 4px;
  padding: 1rem 1.2rem 1.1rem;
}
.proj-contrib-inline.is-open { display: block; }
.proj-contrib-head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.proj-contrib-title {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan, #00c8c8);
}
.proj-contrib-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.08em;
  color: var(--white-dim, rgba(240,244,248,0.5));
}
.proj-contrib-count[data-empty="1"] { color: var(--white-dim, rgba(240,244,248,0.4)); }
.proj-contrib-sub {
  color: var(--white-dim, rgba(240,244,248,0.55));
  font-size: 0.74rem;
  margin: 0 0 0.65rem;
  line-height: 1.45;
}
.proj-contrib-empty {
  color: var(--white-dim, rgba(240,244,248,0.5));
  font-size: 0.78rem;
  font-style: italic;
  padding: 0.4rem 0 0.2rem;
}
.proj-contrib-empty a {
  color: var(--cyan);
  border-bottom: 1px solid rgba(0, 200, 200, 0.35);
  text-decoration: none;
}
.proj-contrib-empty a:hover { border-bottom-color: var(--cyan-bright); color: var(--cyan-bright); }
.proj-contrib-list {
  display: flex;
  flex-direction: column;
}
.proj-contrib-row {
  padding: 0.85rem 0;
  border-top: 1px solid var(--border-light, rgba(255,255,255,0.06));
}
.proj-contrib-row:first-child { border-top: none; padding-top: 0.2rem; }
.proj-contrib-row-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.proj-contrib-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.proj-contrib-badge.known {
  background: rgba(0, 200, 200, 0.10);
  color: var(--cyan);
  border-color: rgba(0, 200, 200, 0.35);
}
.proj-contrib-badge.anon {
  background: rgba(255, 255, 255, 0.04);
  color: var(--white-dim, rgba(240,244,248,0.5));
  border-color: var(--border-light, rgba(255,255,255,0.08));
}
.proj-contrib-badge.web {
  background: rgba(167, 139, 250, 0.10);
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.35);
}
.proj-contrib-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--white-dim, rgba(240,244,248,0.45));
}
.proj-contrib-summary {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--white, #f0f4f8);
}
.proj-contrib-impact {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--white-muted, rgba(240,244,248,0.7));
}
.proj-contrib-impact em {
  color: var(--cyan);
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 0.4rem;
}
.proj-contrib-row-foot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--white-dim, rgba(240,244,248,0.5));
}
.proj-contrib-source {
  color: var(--cyan);
  border-bottom: 1px solid rgba(0, 200, 200, 0.30);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.proj-contrib-source:hover { border-bottom-color: var(--cyan-bright); color: var(--cyan-bright); }
.proj-contrib-staff {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--warm, #e8a838);
  background: rgba(232, 168, 56, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(232, 168, 56, 0.30);
  word-break: break-all;
}

/* SDR row variant for the Community contributed toggle row.
   Whole row is clickable (role="button" tabindex="0") — see
   .is-clickable rules for cursor + focus-ring + hover-on-chip. */
.vault-sdr-row.is-contrib { border-color: rgba(0, 200, 200, 0.25); }
.vault-sdr-row.is-contrib.is-clickable {
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.vault-sdr-row.is-contrib:hover {
  border-color: rgba(0, 200, 200, 0.5);
  background: rgba(0, 200, 200, 0.04);
}
.vault-sdr-row.is-contrib.is-clickable:hover .vault-sdr-chip.is-contrib-action {
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan-bright);
}
.vault-sdr-row.is-contrib.is-clickable:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0, 200, 200, 0.18);
}
.vault-sdr-row.is-contrib.is-open {
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.06);
}
.vault-sdr-chip.is-contrib-action {
  background: rgba(0, 200, 200, 0.10);
  color: var(--cyan);
  border: 1px solid rgba(0, 200, 200, 0.35);
  border-radius: 3px;
  padding: 3px 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.vault-sdr-chip.is-contrib-action:hover {
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan-bright);
}

/* Compact buttons in the detail header (Allow Puna access toggle stays
   intact; only restyle Remove to be unobtrusive). */
.vault-remove-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--white-dim);
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  font-size: 0.74rem;
  cursor: pointer;
  font-family: inherit;
}
.vault-remove-btn:hover { border-color: rgba(255,140,140,0.5); color: rgba(255,140,140,0.9); }

/* ===== F-VAULT-PAY · Vault free-tier cap + paywall modal ===== */
.vault-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.vault-section-head .vault-section-eyebrow { margin-bottom: 0; }
.vault-cap-chip {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  background: rgba(0, 200, 200, 0.10);
  color: var(--cyan);
  border: 1px solid rgba(0, 200, 200, 0.4);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.vault-cap-chip:empty { display: none; }
.vault-cap-chip:hover {
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan-bright);
}
.vault-cap-chip.full {
  /* Cap-reached warning — uses the canonical --warm token instead of
     hardcoded amber so the chip stays in the design system. Per
     Puna_Design_Guidelines.md §6 (status pills: status accent + 12%
     tint background). */
  background: rgba(232, 168, 56, 0.12);
  color: var(--warm);
  border-color: rgba(232, 168, 56, 0.45);
}
.vault-cap-chip.full:hover {
  background: rgba(232, 168, 56, 0.20);
  color: var(--warm);
  filter: brightness(1.15);
}
.vault-cap-chip.unlimited {
  /* Subscriber state — green accent via the canonical --green token. */
  background: rgba(78, 203, 113, 0.14);
  color: var(--green);
  border-color: rgba(78, 203, 113, 0.45);
}
.vault-cap-chip.hidden { display: none; }

/* 2026-05-07 — Watchlist's "Generate report" paywall modal shares the
   same chrome as the Vault paywall. Selectors comma-listed so one
   rule serves both surfaces. Third instance (next non-Vault, non-
   Watchlist paywall) triggers extraction to a generic .puna-paywall-*
   primitive per Principle #3 (rule of three). */
.vault-paywall-modal,
.wlx-paywall-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9100;
}
.vault-paywall-modal.open,
.wlx-paywall-modal.open { display: flex; }
.vault-paywall-backdrop,
.wlx-paywall-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 18, 0.85);
  backdrop-filter: blur(4px);
}
.vault-paywall-card,
.wlx-paywall-card {
  position: relative;
  width: min(520px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--navy-deep);
  border: 1px solid rgba(0, 200, 200, 0.45);
  border-radius: 8px;
  padding: 28px 30px 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7),
              0 0 32px rgba(0, 200, 200, 0.18);
}
.vault-paywall-close,
.wlx-paywall-close {
  position: absolute;
  top: 10px; right: 14px;
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.vault-paywall-close:hover,
.wlx-paywall-close:hover { color: var(--white); }
.vault-paywall-eyebrow,
.wlx-paywall-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: 8px;
}
.vault-paywall-title,
.wlx-paywall-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 10px;
  line-height: 1.3;
}
.vault-paywall-title span,
.wlx-paywall-title span {
  font-family: 'JetBrains Mono', monospace;
  color: var(--cyan);
  font-size: 0.95rem;
  font-weight: 600;
  margin-left: 4px;
}
.vault-paywall-blurb,
.wlx-paywall-blurb {
  font-size: 0.9rem;
  color: var(--white-muted);
  line-height: 1.5;
  margin: 0 0 18px;
}
.vault-paywall-benefits,
.wlx-paywall-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vault-paywall-benefits li,
.wlx-paywall-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--white-muted);
  line-height: 1.5;
}
.vault-paywall-benefits li strong,
.wlx-paywall-benefits li strong { color: var(--white); }
.vault-paywall-bullet,
.wlx-paywall-bullet {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 200, 200, 0.14);
  color: var(--cyan);
  border-radius: 50%;
  font-size: 0.78rem;
  margin-top: 1px;
}
.vault-paywall-actions,
.wlx-paywall-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.vault-paywall-cta,
.wlx-paywall-cta {
  flex: 1;
  padding: 12px 18px;
  background: var(--cyan);
  color: var(--navy-deep);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.vault-paywall-cta:hover,
.wlx-paywall-cta:hover { background: var(--cyan-bright); border-color: var(--cyan-bright); }
.vault-paywall-secondary,
.wlx-paywall-secondary {
  padding: 12px 16px;
  background: transparent;
  color: var(--white-muted);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.vault-paywall-secondary:hover,
.wlx-paywall-secondary:hover {
  color: var(--white);
  border-color: var(--white-dim);
}
.vault-paywall-fineprint,
.wlx-paywall-fineprint {
  font-size: 0.7rem;
  color: var(--white-dim);
  font-style: italic;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* Old modal CSS preserved below for non-deposit-page invocations
   (none in v1 — kept to avoid breaking any future re-introduction). */
.dep3d-trigger-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.dep3d-trigger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.18), rgba(0, 200, 200, 0.06));
  border: 1px solid rgba(0, 200, 200, 0.5);
  border-radius: 4px;
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dep3d-trigger-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(0, 200, 200, 0.28), rgba(0, 200, 200, 0.10));
  color: var(--cyan-bright);
  border-color: var(--cyan-bright);
}
.dep3d-trigger-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border-light);
  color: var(--white-dim);
  background: transparent;
}
.dep3d-trigger-btn .dep3d-icon { font-size: 0.85rem; }
.dep3d-trigger-hint {
  margin-top: 4px;
  font-size: 0.6rem;
  color: var(--white-dim);
  font-style: italic;
  text-align: center;
}

#deposit-3d-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 18, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  backdrop-filter: blur(4px);
}
#deposit-3d-modal.open { display: flex; }
#deposit-3d-modal .d3d-dialog {
  width: min(1080px, 96vw);
  max-height: 92vh;
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: var(--navy-deep);
  border: 1px solid rgba(0, 200, 200, 0.45);
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7),
              0 0 32px rgba(0, 200, 200, 0.18);
  padding: 14px 16px 16px;
  position: relative;
  overflow: hidden;
}
#deposit-3d-modal .d3d-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
#deposit-3d-modal .d3d-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
#deposit-3d-modal .d3d-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}
#deposit-3d-modal .d3d-subtitle {
  font-size: 0.75rem;
  color: var(--white-muted);
  margin: 0;
}
#deposit-3d-modal .d3d-version-tag {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  padding: 3px 6px;
  border: 1px solid var(--border-light);
  border-radius: 3px;
}
#deposit-3d-modal .d3d-close {
  position: absolute;
  top: 10px; right: 14px;
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  z-index: 2;
}
#deposit-3d-modal .d3d-close:hover { color: var(--white); }

#deposit-3d-modal .d3d-canvas-wrap {
  position: relative;
  background: #000;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  min-height: 480px;
}
#deposit-3d-modal #d3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#deposit-3d-modal .d3d-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  text-align: center;
  padding: 20px;
}
#deposit-3d-modal .d3d-status.hidden { display: none; }
#deposit-3d-modal .d3d-spinner {
  width: 32px; height: 32px;
  border: 2px solid rgba(0, 200, 200, 0.2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: d3dspin 0.9s linear infinite;
}
@keyframes d3dspin { to { transform: rotate(360deg); } }
#deposit-3d-modal .d3d-status-msg {
  color: var(--white-muted);
  font-size: 0.8rem;
  max-width: 340px;
  line-height: 1.45;
}
#deposit-3d-modal .d3d-status-step {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#deposit-3d-modal .d3d-error {
  color: #fca5a5;
  font-size: 0.78rem;
  max-width: 380px;
  line-height: 1.45;
}

#deposit-3d-modal .d3d-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
  overflow-y: auto;
  max-height: 80vh;
}
#deposit-3d-modal .d3d-card {
  background: rgba(11, 26, 46, 0.5);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 10px 12px;
}
#deposit-3d-modal .d3d-card h4 {
  margin: 0 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  font-weight: 500;
}
#deposit-3d-modal .d3d-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 0.78rem;
  color: var(--white-muted);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
#deposit-3d-modal .d3d-stat-row:last-child { border-bottom: none; }
#deposit-3d-modal .d3d-stat-row .d3d-stat-label { color: var(--white-dim); font-size: 0.7rem; }
#deposit-3d-modal .d3d-stat-row .d3d-stat-val   { color: var(--white); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
#deposit-3d-modal .d3d-stat-row .d3d-stat-val.highlight { color: var(--cyan); }
#deposit-3d-modal .d3d-stat-row .d3d-stat-val.warm     { color: var(--warm); }

#deposit-3d-modal .d3d-slider-block { margin-bottom: 10px; }
#deposit-3d-modal .d3d-slider-block:last-child { margin-bottom: 0; }
#deposit-3d-modal .d3d-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
#deposit-3d-modal .d3d-slider-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
}
#deposit-3d-modal .d3d-slider-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--cyan);
  font-weight: 600;
}
#deposit-3d-modal .d3d-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
#deposit-3d-modal .d3d-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 200, 200, 0.6);
}
#deposit-3d-modal .d3d-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  cursor: pointer;
  border: none;
}

#deposit-3d-modal .d3d-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#deposit-3d-modal .d3d-toggle {
  flex: 1 1 calc(50% - 4px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 6px;
  background: transparent;
  color: var(--white-dim);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  cursor: pointer;
}
#deposit-3d-modal .d3d-toggle.active {
  background: rgba(0, 200, 200, 0.14);
  color: var(--cyan);
  border-color: rgba(0, 200, 200, 0.5);
}
#deposit-3d-modal .d3d-meta-line {
  font-size: 0.65rem;
  color: var(--white-dim);
  line-height: 1.45;
}
#deposit-3d-modal .d3d-disclaimer {
  font-size: 0.6rem;
  color: var(--white-dim);
  font-style: italic;
  line-height: 1.4;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px dashed rgba(245, 158, 11, 0.3);
  border-radius: 3px;
}
#deposit-3d-modal .d3d-disclaimer strong { color: #f59e0b; font-style: normal; }

@media (max-width: 880px) {
  #deposit-3d-modal .d3d-dialog {
    grid-template-columns: 1fr;
    max-height: 96vh;
  }
  #deposit-3d-modal .d3d-canvas-wrap { min-height: 320px; }
  #deposit-3d-modal .d3d-sidebar { max-height: 40vh; }
}

/* ============================================================
   §§ TWO-RAIL — Topbar deleted (Phase 5c, 2026-05-04, per Clint).
   The topbar strip no longer exists between the rails. User identity
   controls (avatar + Super User) live in the TOP of the right rail
   via #right-rail-user-slot. Brand sits in the top of the left rail.
   The #topbar element is preserved but display:none so any code that
   targets its child IDs (post-appendChild) still finds them in the DOM.
   ============================================================ */
body.pga-ready #topbar { display: none !important; }

/* ============================================================
   §§ TWO-RAIL — Bottom band (Phase 5c, 2026-05-04 per Clint).
   The Puna agent bar sits in a reserved 86px band at the bottom of
   the viewport. Side rails + main content stop above this band — so
   page content never visually scrolls under the bar. Claude-app
   inspired footer band.
   ============================================================ */
body.pga-ready #sidebar,
body.pga-ready .right-rail {
  /* 2026-05-08 — rails run full-height; the bottom band is re-scoped
     to only span the main-content column so the rails get the extra
     vertical surface back for content. */
  bottom: 0 !important;
}
body.pga-ready #map { bottom: var(--bar-band-h, 86px) !important; }
/* 3D deposit viewer mirrors #map — without this it extends to viewport
   bottom and the bottom-left vertical-exaggeration overlay (and any
   other bottom-anchored chrome) ends up hidden behind the band. */
body.pga-ready #deposit-3d-view { bottom: var(--bar-band-h, 86px) !important; }
/* No padding-bottom on #mw — that was double-counting the band against
   #map's `bottom: var(--bar-band-h)`. Keep #mw at full height; the
   absolute-positioned children (#map, view panels) bound themselves
   above the band individually. */

/* Bottom band — solid dark-navy strip behind the Puna bar. Same color
   as the rails so the bar floats inside one continuous chrome surface
   instead of a lighter blue void.  Painted as ::after so every authed
   view inherits it (Explorer, Vault, Watchlist, Screener, Database,
   Data Rooms, Profile, Team — all visible on every page where the bar
   shows). The rails already carve out --bar-band-h via `bottom`, so
   the band naturally sits below them. */
/* ============================================================
   .puna-skeleton — shared loading-state primitive (Pass 2, 2026-05-05)
   Used wherever data is being fetched and the surface would otherwise
   pop in (Database table, Watchlist feed, Vault projects, etc.).
   The shimmer keyframes are deliberately gentle — long sweep, low
   contrast — so the loading state reads as "thinking" not "broken."
   Per Puna_Design_Guidelines.md: cards never get drop shadows; the
   shimmer is the entire visual cue.
   ============================================================ */
@keyframes punaSkeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.puna-skeleton {
  position: relative;
  display: block;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(0, 200, 200, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: punaSkeletonShimmer 1.8s ease-in-out infinite;
  border-radius: 3px;
  color: transparent;
  user-select: none;
  pointer-events: none;
  min-height: 14px;
}
/* Variants — height presets for common layouts. */
.puna-skeleton.is-line   { height: 14px; }
.puna-skeleton.is-row    { height: 36px; }   /* matches table row default height */
.puna-skeleton.is-card   { height: 96px; }
.puna-skeleton.is-pill   { height: 28px; border-radius: 999px; }
.puna-skeleton.is-block  { height: 60px; }
/* Spacing helper — stack skeleton items with a small gap. */
.puna-skeleton-stack > .puna-skeleton + .puna-skeleton { margin-top: 6px; }
/* Skeleton row wrapped in a real table row uses the table's border-spacing
   instead of margin-top; the wrapped element class signals don't-add-margin. */
tr .puna-skeleton { border-radius: 0; }

/* ============================================================
   PUNA PRIMITIVES (Pass 3, 2026-05-05)
   ------------------------------------------------------------
   Canonical components per puna/COMPONENT_INVENTORY.md. New
   surfaces use these directly. Existing divergent local copies
   (.scr-rail-pill, .filter-pill, .reset-btn, etc.) get migrated
   surface-by-surface in subsequent passes — each migration is
   verified visually before moving to the next.
   These rules are purely additive — no element on the live app
   uses them today, so they cannot break anything.
   ============================================================ */

/* --- .puna-chip — selectable filter / scope / status pill ---- */
.puna-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--white-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.puna-chip:hover {
  border-color: rgba(0, 200, 200, 0.35);
  color: var(--white);
  background: rgba(0, 200, 200, 0.04);
}
.puna-chip.is-on {
  background: rgba(0, 200, 200, 0.14);
  border-color: var(--cyan);
  color: var(--cyan-bright);
  font-weight: 500;
}
/* Variant: rectangle shape (status / tag chips per design guidelines § 6) */
.puna-chip.is-rect { border-radius: 2px; }
/* Variant: warm-toned (caps / warning) */
.puna-chip.is-warm.is-on {
  background: rgba(232, 168, 56, 0.14);
  border-color: var(--warm);
  color: var(--warm);
}
/* Count badge inside chip */
.puna-chip > .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--white-dim);
  padding: 0 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
}
.puna-chip.is-on > .count { color: var(--cyan); background: rgba(0, 200, 200, 0.10); }

/* --- .puna-btn-* — primary / secondary / quiet ---------------- */
.puna-btn-primary,
.puna-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-decoration: none;
  user-select: none;
}
.puna-btn-primary {
  background: rgba(0, 200, 200, 0.10);
  border: 1px solid var(--cyan);
  color: var(--cyan);
}
.puna-btn-primary:hover {
  background: rgba(0, 200, 200, 0.18);
  color: var(--cyan-bright);
}
.puna-btn-primary:disabled,
.puna-btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }
.puna-btn-secondary {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--white-muted);
}
.puna-btn-secondary:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.06);
}
.puna-btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0.4rem 0;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--white-muted);
  cursor: pointer;
  text-align: left;
  transition: color 0.12s;
}
.puna-btn-quiet:hover { color: var(--cyan); }

/* --- .puna-empty-state — generic empty surface ---------------- */
.puna-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 24px;
  text-align: center;
  background: transparent;
  border: 1px dashed var(--border-light);
  border-radius: 6px;
  color: var(--white-dim);
  min-height: 180px;
}
.puna-empty-state.is-invitation {
  /* Cyan-bordered variant for invitational empty states (e.g. Vault
     "+ Add a project" slot) where the empty state itself is a CTA. */
  border-color: rgba(0, 200, 200, 0.45);
}
.puna-empty-state-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px dashed currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--cyan);
}
.puna-empty-state-h {
  font-size: 13px; font-weight: 500;
  color: var(--white);
}
.puna-empty-state-sub {
  font-size: 11.5px; line-height: 1.5;
  color: var(--white-dim);
  max-width: 240px;
}

/* --- .puna-tooltip — replaces native title= where styling matters --
   Hover-trigger pattern. Author element with class `.puna-tip-host`
   and child `.puna-tooltip` (or via a JS helper). For now, the CSS
   primitive exists; HTML-side migrations come in a future pass. */
.puna-tip-host { position: relative; }
.puna-tip-host .puna-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 18, 33, 0.96);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--white);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 9000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.puna-tip-host:hover .puna-tooltip,
.puna-tip-host:focus-within .puna-tooltip { opacity: 1; }

/* --- Native input/textarea reset — same family as Pass K's select.
   Strips OS chrome + applies Puna theming on every authed-view
   text input. Login screen explicitly excluded (its own scoped
   chrome stays untouched). Modals using ad-hoc .ad-input or
   custom classes can opt out by being more specific. */
body.pga-ready input[type="text"]:not(.lg-input):not(.pga-input):not(.exp-find-input):not(.wlx-search):not(.wlx-feed-search):not(.drx-search):not(.vault-search):not(.vault-rail-search):not(.vault-rail-ask-input),
body.pga-ready input[type="email"]:not(.lg-input),
body.pga-ready input[type="number"]:not(.lg-input),
body.pga-ready input[type="search"]:not(.lg-input):not(.wlx-search):not(.wlx-feed-search):not(.drx-search):not(.vault-search):not(.vault-rail-search):not(.vault-rail-ask-input),
body.pga-ready textarea:not(.lg-textarea):not(.pga-input) {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(6, 15, 29, 0.6);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.82rem;
  padding: 7px 12px;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
body.pga-ready input[type="text"]:not(.lg-input):not(.pga-input):not(.exp-find-input):not(.wlx-search):not(.wlx-feed-search):not(.drx-search):not(.vault-search):not(.vault-rail-search):not(.vault-rail-ask-input):hover,
body.pga-ready input[type="email"]:not(.lg-input):hover,
body.pga-ready input[type="number"]:not(.lg-input):hover,
body.pga-ready input[type="search"]:not(.lg-input):not(.wlx-search):not(.wlx-feed-search):not(.drx-search):not(.vault-search):not(.vault-rail-search):not(.vault-rail-ask-input):hover,
body.pga-ready textarea:not(.lg-textarea):not(.pga-input):hover {
  border-color: var(--border-light);
  background-color: rgba(6, 15, 29, 0.85);
}
body.pga-ready input[type="text"]:not(.lg-input):not(.pga-input):not(.exp-find-input):not(.wlx-search):not(.wlx-feed-search):not(.drx-search):not(.vault-search):not(.vault-rail-search):not(.vault-rail-ask-input):focus,
body.pga-ready input[type="email"]:not(.lg-input):focus,
body.pga-ready input[type="number"]:not(.lg-input):focus,
body.pga-ready input[type="search"]:not(.lg-input):not(.wlx-search):not(.wlx-feed-search):not(.drx-search):not(.vault-search):not(.vault-rail-search):not(.vault-rail-ask-input):focus,
body.pga-ready textarea:not(.lg-textarea):not(.pga-input):focus {
  border-color: var(--cyan);
  background-color: rgba(0, 200, 200, 0.06);
  box-shadow: 0 0 0 2px rgba(0, 200, 200, 0.18);
}
body.pga-ready input::placeholder,
body.pga-ready textarea::placeholder { color: var(--white-dim); }
/* Login screen escapes via :not(.lg-input) above, plus this safety net
   in case markup uses different login-only classes. */
#login-screen input,
#login-screen textarea {
  appearance: auto;
  -webkit-appearance: auto;
}

body.pga-ready::after {
  /* Bottom-band footer strip — paints only across the main content
     column. Left/right rails run full-height (bottom: 0) so the band
     stops at the rail edges, giving the rails maximum vertical surface
     for content. Responsive overrides below collapse the band's left
     / right insets when the rails collapse. */
  content: '';
  position: fixed;
  left: var(--left-rail-w, 240px);
  right: var(--right-rail-w, 320px);
  bottom: 0;
  height: var(--bar-band-h, 60px);
  background: rgba(8, 18, 33, 0.95);
  border-top: 1px solid var(--border-light);
  box-shadow: inset 0 1px 0 rgba(0, 200, 200, 0.04);
  z-index: 30;
  pointer-events: none;
}
/* When the right rail collapses (<1100px), the band's right should
   reach the viewport edge so it still spans the (now full-width) bar. */
body.pga-ready:not(.has-right-rail)::after { right: 0; }
/* Page wrappers stop above the band so content never scrolls into it. */
body.pga-ready #screener-page,
body.pga-ready #watchlist-page,
body.pga-ready #vault-page,
body.pga-ready #data-rooms-page,
body.pga-ready #database-page,
body.pga-ready #profile-page,
body.pga-ready #team-page,
body.pga-ready #right-panel {
  padding-bottom: var(--bar-band-h, 60px);
}

/* Right-rail user slot — top of the right rail. Holds the moved
   .topbar-user-wrap + .topbar-superuser-wrap as a horizontal row,
   right-aligned to mimic where they always lived (top-right). */
.right-rail-user-slot {
  /* Header band — bleeds across the rail's horizontal padding so it reads
     as a top strip enclosing the user controls (avatar + Super User pill).
     Pairs visually with .left-rail-brand-slot on the other side. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0 -1rem 0.7rem;
  padding: 0 1rem;
  min-height: 38px;
  background: rgba(6, 13, 26, 0.4);
  border-bottom: 1px solid var(--border-light);
}
.right-rail-user-slot:empty { display: none; }
.right-rail-user-slot .topbar-user-wrap,
.right-rail-user-slot .topbar-superuser-wrap {
  position: relative;
  display: inline-flex;
}
/* Re-apply the topbar pill styling now that the elements live in the
   right rail. The original CSS (lines ~522–900) keys on `#topbar X`
   which no longer matches post-appendChild — we mirror the rules here. */

/* Super User trigger (cyan-bordered pill, staff-only show) */
.right-rail-user-slot .topbar-team-tab {
  display: none;          /* shown by body.is-staff rule below */
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 999px;
  padding: 0.22rem 0.7rem 0.22rem 0.85rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.74rem;
  color: var(--white-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  position: relative;
}
body.is-staff .right-rail-user-slot .topbar-team-tab { display: inline-flex; }
.right-rail-user-slot .topbar-team-tab:hover { color: var(--white); border-color: var(--cyan); }
.right-rail-user-slot .topbar-team-tab.active {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.08);
}
.right-rail-user-slot .topbar-team-tab .title-tab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: transparent;
  display: inline-block;
}
.right-rail-user-slot .topbar-team-tab.has-pending .title-tab-dot {
  background: var(--cyan);
}

/* User avatar pill */
.right-rail-user-slot .topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 0;
  padding: 0.15rem 0.3rem 0.15rem 0.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.right-rail-user-slot .topbar-user:hover { background: rgba(255, 255, 255, 0.04); }
.right-rail-user-slot .topbar-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0, 200, 200, 0.14);
  border: 1px solid rgba(0, 200, 200, 0.4);
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.right-rail-user-slot .topbar-chevron {
  font-size: 0.62rem;
  color: var(--white-dim);
  line-height: 1;
}

/* Dropdowns — open BELOW the trigger (top:100%). They have plenty of
   room since they're at the top of the right rail. */
.right-rail-user-slot .topbar-user-menu,
.right-rail-user-slot .topbar-superuser-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  /* 220px → 280px (2026-05-10) so a 30-char email like
     clint_vanmarrewijk@zelandez.com fits on one line. */
  min-width: 280px;
  background: var(--navy-deep, #060f1d);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  padding: 0.5rem 0.65rem;
  z-index: 9000;
  font-family: 'Inter', -apple-system, sans-serif;
}
.right-rail-user-slot .topbar-user-menu[hidden],
.right-rail-user-slot .topbar-superuser-menu[hidden] { display: none; }

/* Pass 1 (2026-05-05) — Super User dropdown internals mirrored from
   the original #topbar .X rules. The wrap + menu containers were
   mirrored at Pass K era; these complete the set so when a staff
   user does open the Super User dropdown via the right-rail header,
   the items render with proper Puna chrome (not native browser
   buttons / system fonts). */
.right-rail-user-slot .topbar-superuser-caret {
  font-size: 0.7rem;
  margin-left: 0.18rem;
  opacity: 0.7;
}
.right-rail-user-slot .topbar-superuser-trigger[aria-expanded="true"] {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 200, 200, 0.08);
}
.right-rail-user-slot .topbar-superuser-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--white-muted);
  font-family: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.right-rail-user-slot .topbar-superuser-item:hover {
  background: rgba(0, 200, 200, 0.08);
  color: var(--cyan);
}
.right-rail-user-slot .topbar-superuser-item-icon {
  font-size: 0.95rem;
  line-height: 1.4;
  width: 16px;
  flex-shrink: 0;
  text-align: center;
}
.right-rail-user-slot .topbar-superuser-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.right-rail-user-slot .topbar-superuser-item-text strong {
  font-weight: 600;
  color: inherit;
}
.right-rail-user-slot .topbar-superuser-item-text small {
  font-size: 0.66rem;
  color: var(--white-dim);
  letter-spacing: 0.02em;
}

/* User menu internals — mirror the #topbar-scoped rules so the
   dropdown still renders with Puna chrome once pgaLiftTopbarToRail
   has moved it into .right-rail-user-slot. (Same specificity-fix
   pattern as Pass E.1 / Pass G.) */
.right-rail-user-slot .topbar-user-menu-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.25rem;
}
.right-rail-user-slot .topbar-user-menu-email {
  font-size: 0.82rem;
  color: var(--white);
  /* See #topbar .topbar-user-menu-email — same rule, same reason. */
  overflow-wrap: anywhere;
  word-break: normal;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0.4rem;
}
.right-rail-user-slot .topbar-user-menu-action {
  background: transparent;
  border: 0;
  padding: 0.5rem 0;
  font-size: 0.82rem;
  color: var(--white-muted);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: color 0.12s;
}
.right-rail-user-slot .topbar-user-menu-action:hover { color: var(--cyan); }

/* Dev toggles — View as free tier / View as client. Same warm-token
   active state as the original #topbar styles. The native checkbox
   is hidden via position:absolute + opacity:0 — the visible toggle
   is the .topbar-tier-slider pill. */
.right-rail-user-slot .topbar-tier-toggle {
  border-top: 1px solid var(--border-light);
  margin-top: 0.45rem;
  padding-top: 0.55rem;
  padding-bottom: 0.2rem;
}
.right-rail-user-slot .topbar-tier-toggle[hidden] { display: none; }
.right-rail-user-slot .topbar-tier-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.right-rail-user-slot .topbar-tier-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.right-rail-user-slot .topbar-tier-slider {
  position: relative;
  flex-shrink: 0;
  width: 30px; height: 17px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--border);
  border-radius: 17px;
  transition: background 0.18s, border-color 0.18s;
  margin-top: 2px;
}
.right-rail-user-slot .topbar-tier-slider::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--white-muted);
  transition: transform 0.18s, background 0.18s;
}
.right-rail-user-slot .topbar-tier-row input:checked + .topbar-tier-slider {
  background: rgba(232, 168, 56, 0.30);
  border-color: var(--warm);
}
.right-rail-user-slot .topbar-tier-row input:checked + .topbar-tier-slider::after {
  transform: translateX(13px);
  background: var(--warm);
}
.right-rail-user-slot .topbar-tier-text { display: flex; flex-direction: column; gap: 2px; }
.right-rail-user-slot .topbar-tier-text strong { font-size: 12px; color: var(--white); font-weight: 600; }
.right-rail-user-slot .topbar-tier-text small { font-size: 10.5px; color: var(--white-dim); }

/* ============================================================
   Pass K — App-wide native <select> restyle
   ------------------------------------------------------------
   Replaces OS-default select chrome (white background, system
   font, OS-blue focus ring) with Puna theming on every <select>
   inside an authed view. The dropdown popover itself is still
   OS-drawn — that's a CSS limitation. The TRIGGER element is
   what dominates visual quality.
   Excludes the login screen's own scoped chrome (#login-screen).
   ============================================================ */
body.pga-ready select,
.right-rail select,
.r-rail select,
#screener-page select,
#db-panel select,
#wl-panel select,
#dr-page select,
#vault-page select,
#mr-page select,
#right-panel select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(6, 15, 29, 0.6);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%2300c8c8'><path d='M0 0l6 8 6-8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 7px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.82rem;
  padding: 7px 32px 7px 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
}
body.pga-ready select:hover,
.right-rail select:hover,
.r-rail select:hover,
#screener-page select:hover,
#db-panel select:hover,
#wl-panel select:hover,
#dr-page select:hover,
#vault-page select:hover,
#mr-page select:hover,
#right-panel select:hover {
  border-color: var(--border-light);
  background-color: rgba(6, 15, 29, 0.85);
}
body.pga-ready select:focus,
.right-rail select:focus,
.r-rail select:focus,
#screener-page select:focus,
#db-panel select:focus,
#wl-panel select:focus,
#dr-page select:focus,
#vault-page select:focus,
#mr-page select:focus,
#right-panel select:focus {
  border-color: var(--cyan);
  background-color: rgba(0, 200, 200, 0.06);
  box-shadow: 0 0 0 2px rgba(0, 200, 200, 0.18);
}
/* Option elements — limited browser support for styling; OS often
   wins. Set what we can so the popover doesn't render with stark
   white default. */
body.pga-ready select option,
.right-rail select option,
.r-rail select option {
  background: var(--navy-deep);
  color: var(--white);
  font-family: inherit;
}
/* Login screen has its own scoped chrome — leave it alone. */
#login-screen select {
  appearance: auto;
  -webkit-appearance: auto;
  background-image: none;
}

/* DEPOSIT SELECTION — the salar dropdown on the Explorer right
   panel uses #sel. Bump padding + font size slightly so the cyan
   live-dot prefix has room to breathe. */
#right-panel #sel,
#right-rail #sel {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 9px 32px 9px 14px;
}

/* Brand slot — top of left rail. Holds the moved .topbar-brand. */
.left-rail-brand-slot {
  /* Header band — pairs with .right-rail-user-slot. Same min-height,
     same border weight, same faint dark tint so the two rail tops
     read as a paired header strip. */
  flex: 0 0 auto;
  padding: 0 0.85rem;
  min-height: 38px;
  background: rgba(6, 13, 26, 0.4);
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center;
  gap: 0.55rem;
}
.left-rail-brand-slot:empty { display: none; }
/* Brand wordmark — match the marketing site's puna.earth lockup. The
   ".earth" portion is cyan; both halves share the same weight and
   tracking. The original #topbar selectors stop matching after the
   move, so the rules are mirrored here. */
.left-rail-brand-slot .topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--white);
  letter-spacing: -0.01em;
}
.left-rail-brand-slot .topbar-brand:hover { opacity: 0.85; }
.left-rail-brand-slot .topbar-brand-mark {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0, 200, 200, 0.18);
  display: inline-block;
}
.left-rail-brand-slot .topbar-brand-word {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.left-rail-brand-slot .topbar-brand-word .brand-cyan {
  color: var(--cyan);
  font-weight: 600;
}

/* User slot was previously here for Phase 5b; reverted 2026-05-04
   per Clint — user + Super User stay top-right in the topbar. The
   #left-rail-user-slot HTML element is preserved (empty, hidden via
   :empty selector) so the markup stays valid. */
.left-rail-user-slot:empty { display: none; }

/* ============================================================
   §§ TWO-RAIL — Right rail (Phase 5a, 2026-05-04)
   Fixed to the right edge, equal width to the left rail (240px),
   full height. Hidden by default via the `hidden` HTML attribute
   on the element; phases 5b+ will reveal it per-page by removing
   the attribute (or via body classes that flip its display).
   Spec: puna/planning/global-puna-analyst-v1.md § 3.4.
   ============================================================ */
.right-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--right-rail-w, 240px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: rgba(8, 18, 33, 0.85);
  border-left: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* User controls live INSIDE the rail at top via the header band
     (.right-rail-user-slot). Top padding handed to the band. */
  padding: 0 0.85rem 0.85rem;
}
.right-rail[hidden] { display: none !important; }

/* When #right-panel is moved INSIDE #right-rail (Phase 5c), override
   its own width + border + padding so it fits the 240px rail naturally. */
.right-rail #right-panel {
  width: 100%;
  min-width: 0;
  border-left: 0;
  background: transparent;
  padding: 0;
  overflow-y: visible;
}

/* 2026-05-07 — Owners list extends to the bottom of the rail.
   When viewing a deposit (has-active-salar), the right-panel
   becomes a flex column; #dep-tabs-shell becomes a flex column too;
   the active tab panel flex-grows and the Owners list itself scrolls
   inside if there are more owners than fit. Without this, the rail
   just leaves dead space below the last visible owner. */
body.has-active-salar .right-rail #right-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
body.has-active-salar .right-rail #right-panel > #dep-tabs-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.has-active-salar .right-rail #right-panel > #dep-tabs-shell .dep-tab-panel.active {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.has-active-salar .right-rail #right-panel > #dep-tabs-shell .dep-tab-panel[data-tab-panel="owners"].active > .rp-owners-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
body.has-active-salar .right-rail #right-panel > #dep-tabs-shell .rp-owners-list {
  flex: 1 1 auto;
}

/* Phase 5e — Watchlist picker + subscribe in the rail. Hide on every
   view EXCEPT watchlist (so the elements don't bleed into other views'
   rails). Restyle to fill the 240px rail naturally. */
.right-rail .wlx-left-stack { display: none; }
body.view-watchlist .right-rail .wlx-left-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.4rem;
}
body.view-watchlist .right-rail .wlx-pickers,
body.view-watchlist .right-rail .wlx-rail,
body.view-watchlist .right-rail .wlx-subscribe-card {
  width: 100%;
  min-width: 0;
}
/* Hide the existing left/right wlx-split layout's feed-only constraint
   on watchlist — main column now is just the feed. */

/* Phase 5f — Vault content in the right rail. Hide on every view
   except Vault. Restyle widths to fill the 240px rail. */
.right-rail #vault-explainer,
.right-rail #vault-active-section,
.right-rail #vault-coach { display: none; }
body.view-vault .right-rail #vault-active-section,
body.view-vault .right-rail #vault-coach {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0 0 14px;
}
/* Coach card sits at the top of the rail (above active-projects) so
   first-time users see the 4-step flow before the active hero. The
   #vault-coach uses the same .drx-coach-card chrome as Data Rooms. */
body.view-vault .right-rail #vault-coach { margin-bottom: 14px; }
/* The legacy explainer dropdown is hidden on the new layout but kept
   in the DOM so vaultIntroToggle() bookkeeping doesn't throw. */
body.view-vault .right-rail #vault-explainer { display: none !important; }
/* The active-pane hero card and pinned-strip stack vertically inside
   the narrower rail (vs. the original wider 1200px main column). */
body.view-vault .right-rail .vault-active-hero {
  grid-template-columns: 1fr;        /* image full-width on top, body below */
}
body.view-vault .right-rail .vault-active-hero-img {
  min-height: 120px;
  border-right: 0;
  border-bottom: 1px solid rgba(0, 200, 200, 0.22);
}
body.view-vault .right-rail .vault-quick-row {
  flex-wrap: wrap;
  gap: 0.4rem;
}
body.view-vault .right-rail .vault-active-pill {
  max-width: 100%;
}

/* Phase 5d — Screener .control-panel in the rail. Hide outside
   screener view; restyle to fill the 240px rail and stack panels
   vertically. */
.right-rail .control-panel { display: none; }
body.view-screener .right-rail .control-panel {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
}
body.view-screener .right-rail .control-panel .panel-section {
  margin-bottom: 0.85rem;
}

/* Phase 5d follow-up — re-key the screener-page-scoped rules so they
   still apply once the .control-panel has been appendChild'd into
   #right-rail.  All originals live keyed on `#screener-page .X`; we
   mirror the parent-container/grid rules to `#right-rail .X` so
   chips, profile pills, weight rows, and filter pills render with
   the same gaps/grid/layout they had inside #screener-page.  Atomic
   children styling (padding, color, hover) still inherits via the
   class — no need to mirror those. */
#right-rail .scr-country-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Inner count badge inside each country chip — was scoped to
   #screener-page, so once the chip is appendChild'd into the rail
   the badge collapses to plain text and visually fuses Argentina35
   with the next chip's border.  Mirror the badge rule. */
#right-rail .scr-country-chip .chip-count {
  font-family: var(--scr-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--white-dim);
  padding: 0 0.25rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
#right-rail .scr-country-chip.on .chip-count {
  color: var(--cyan); background: rgba(0, 200, 200, 0.08);
}
#right-rail .panel-section { margin-bottom: 1.4rem; }
#right-rail .panel-section:last-child { margin-bottom: 0; }
#right-rail .profile-list { display: flex; flex-direction: column; gap: 0.4rem; }
#right-rail .filter-pill {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  padding: 0.65rem 0.8rem;
}
#right-rail .filter-pill .filter-name { flex: 1; text-align: left; margin: 0 0.6rem; }
#right-rail .weights { display: flex; flex-direction: column; gap: 0.55rem; }
#right-rail .weight-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr 2.6rem;
  gap: 0.55rem;
  align-items: center;
}
#right-rail .weight-name {
  font-size: 0.78rem;
  color: var(--scr-white-soft);
  display: flex; justify-content: space-between; align-items: center;
}
#right-rail .weight-total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 0.85rem;
  margin-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-family: var(--scr-mono);
  font-size: 0.74rem;
  color: var(--white-muted);
}

/* Pass G — finish the Phase 5d mirror set so the screener rail
   looks identical in #right-rail to its in-page #screener-page
   render. Without these, native browser sliders show blue thumbs +
   blue tracks instead of the Puna cyan treatment. Same applies to
   the reset button, invert toggles, and small label bits. */
#right-rail .weight-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  outline: none;
}
#right-rail .weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 200, 200, 0.5);
  transition: all 0.15s ease;
  border: 0;
}
#right-rail .weight-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
#right-rail .weight-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  border: 0; border-radius: 50%;
  background: var(--cyan);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 200, 200, 0.5);
}
#right-rail .weight-slider::-moz-range-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  border: 0;
}
#right-rail .weight-color { width: 11px; height: 11px; border-radius: 2px; margin: 0 auto; }
#right-rail .weight-val { font-family: var(--scr-mono); font-size: 0.74rem; color: var(--white); text-align: right; }
#right-rail .weight-total .val { color: var(--cyan); font-weight: 600; }

#right-rail .reset-btn {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.55rem;
  font-family: var(--scr-mono);
  font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-muted);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#right-rail .reset-btn:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(0, 200, 200, 0.06); }

#right-rail .invert-btn {
  font-family: var(--scr-mono);
  font-size: 0.58rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
#right-rail .invert-btn:hover { color: var(--white); border-color: var(--white-dim); }
#right-rail .invert-btn.on { color: var(--cyan); border-color: rgba(0, 200, 200, 0.45); background: rgba(0, 200, 200, 0.07); }
#right-rail .invert-hint {
  font-family: var(--scr-mono);
  font-size: 0.58rem; letter-spacing: 0.04em;
  color: var(--white-dim);
  margin-top: 0.3rem;
  line-height: 1.4;
}
#right-rail .invert-hint.on { color: var(--cyan); }
#right-rail .col-flag { color: var(--cyan); font-size: 0.78em; margin-left: 2px; }
#right-rail .filter-tag {
  font-family: var(--scr-mono);
  font-size: 0.68rem; color: var(--cyan);
  margin-left: 0.6rem; letter-spacing: 0.04em;
}

/* Country chip core look — Phase 5d mirrored .scr-country-chips and
   .scr-country-chip .chip-count but the chip's own padding/border
   styling was inherited. Pin it explicitly so the chip layout is
   stable when moved into the rail. */
#right-rail .scr-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--white-dim);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#right-rail .scr-country-chip:hover { border-color: rgba(0, 200, 200, 0.35); color: var(--white); background: rgba(0, 200, 200, 0.04); }
#right-rail .scr-country-chip.on { border-color: var(--cyan); background: rgba(0, 200, 200, 0.08); color: var(--white); font-weight: 500; }

/* Phase 5b cleanup — kill the 3px cyan strip + reclaim its 39px
   margin-top from #main once the rails take over.  Pre-rails the
   .app-top-bar was a deck signature pinned above #topbar; with the
   rails owning the chrome it's just a stray border across the top.
   Hide the strip and zero out #main's margin-top + height carve. */
body.pga-ready .app-top-bar { display: none; }
body.pga-ready #main { margin-top: 0; height: 100vh; }

/* Phase 5b cleanup — the right rail is fixed-position and overlays
   the right 240px of #main.  Without compensation, page wrappers
   (#screener-page, #vault-page, #watchlist-page, #data-rooms-page,
   #database-page) bleed under the rail and their right column gets
   clipped.  Reserve the rail's width on #main when the rail is up. */
body.has-right-rail #main { padding-right: var(--right-rail-w); }

/* Mineroom + miner sub-pages don't render the right rail, so the
   padding-right reservation above creates a 240–320px dead zone on
   the right of the data room. Reclaim it. (Live audit 2026-05-12 —
   the wasted space made the stepper overflow off-screen because the
   page was getting ~888px of a 1448px viewport.) Also hide the
   right-rail itself — it's a separate fixed element that paints over
   the reclaimed space if not explicitly hidden. */
body.view-mineroom #main,
body.view-miner-decks #main,
body.view-miner-announcements #main { padding-right: 0; }
body.view-mineroom .right-rail,
body.view-miner-decks .right-rail,
body.view-miner-announcements .right-rail { display: none !important; }
/* The bottom Puna agent bar is offset from the right by the
   right-rail's width; with the rail hidden, snap the bar back to
   the viewport edge so it spans the page properly (mirrors the
   <1100px responsive rule). */
body.view-mineroom .pga-bar,
body.view-miner-decks .pga-bar,
body.view-miner-announcements .pga-bar {
  right: 0;
  max-width: calc(100vw - var(--left-rail-w, 240px) - 32px);
}
body.view-mineroom.pga-ready::after,
body.view-miner-decks.pga-ready::after,
body.view-miner-announcements.pga-ready::after { right: 0; }

/* Responsive — desktop-narrow viewports must yield rail space so the
   map-controls + main content surfaces stop overflowing under the rail.
   <1280px → rail compresses to 240px; <1100px → rail hides entirely
   and #main reclaims the full width. The mobile media query at 720px
   handles full mobile collapse below this. */
@media (max-width: 1280px) {
  :root { --right-rail-w: 240px; }
}
@media (max-width: 1100px) {
  body.has-right-rail .right-rail { display: none !important; }
  body.has-right-rail #main { padding-right: 0; }
  /* The Ask Puna bar centers between rails when has-right-rail is set;
     when the rail collapses, drop the right-rail offset so the bar
     centers between the sidebar and the right edge instead. */
  body.has-right-rail .pga-bar { right: 0; max-width: calc(100vw - var(--left-rail-w, 240px) - 32px); }
  /* Band follows the bar — collapse the right inset when the right
     rail is hidden so the band still spans the bar's full width. */
  body.has-right-rail.pga-ready::after { right: 0; }
}

/* ============================================================
   Polish pass — frontend tweaks 2026-05-05 (post Phase 5d/5e):
   ------------------------------------------------------------
   When the Screener .control-panel was lifted into the right
   rail, .screener-grid still kept its `340px 1fr` two-column
   template — leaving the results-panel collapsed in column 1
   (340px) and column 2 a 568px ghost.  In two-rail mode the
   grid should be ONE column, full width, so the heatmap +
   ranked table + comparisons + watchlist CTA fill the column.
   Same intent for any other `screener-grid`-shaped wrappers
   that legacy migrations might have left behind. */
body.has-right-rail #screener-page .screener-grid {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0;
}
/* The .heatmap-wrap, .heatmap-head and .heatmap children should
   now naturally fill the full width — no overrides needed. */

/* Right-rail interior padding — top:0 lets the user-slot header band
   own the top edge of the rail (Pass 1 design polish). Sides at 1rem
   so cards have breathing room from the rail border. */
.right-rail {
  padding: 0 1rem 1rem;
}

/* Database table — give it a horizontal scroll wrapper so the COU
   column doesn't clip silently under the rail.  Width is bound by
   the main column; if the table needs more, scroll. */
body.has-right-rail #db-scroll {
  overflow-x: auto;
}

/* Page-explainer cards are show-by-view via body.view-X selector. */
.pga-explainer-view { display: none; }
body.view-explorer .pga-explainer-view[data-view="explorer"] { display: block; }
body.view-database .pga-explainer-view[data-view="database"] { display: block; }
body.view-screener .pga-explainer-view[data-view="screener"] { display: block; }
body.view-watchlist .pga-explainer-view[data-view="watchlist"] { display: block; }
body.view-datarooms .pga-explainer-view[data-view="datarooms"] { display: block; }
body.view-vault .pga-explainer-view[data-view="vault"] { display: block; }
body.view-team .pga-explainer-view[data-view="team"] { display: block; }
body.view-profile .pga-explainer-view[data-view="profile"] { display: block; }

/* Right-rail section wrapper — phases 5c+ append .right-rail-section
   blocks here. Each carries its own header + body. */
.right-rail-section {
  flex: 0 0 auto;
  padding: 1rem 0.95rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.right-rail-section:last-child { border-bottom: 0; }
.right-rail-section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan, #00c8c8);
  margin-bottom: 0.55rem;
}

/* Page-explainer panel — top-of-rail card describing what this view
   is for and what the user can do. Dismissible per (user, view). */
.page-explainer {
  background: rgba(0, 200, 200, 0.04);
  border: 1px solid rgba(0, 200, 200, 0.18);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.7rem;
}
.page-explainer-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white, #f0f4f8);
  margin-bottom: 0.35rem;
}
.page-explainer-body {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--white-muted, #a8b2c2);
}

/* Mobile drawer — right rail collapses to a slide-in panel behind a
   right-side hamburger (added in Phase 5b). Keep the hidden default
   for narrow viewports; phases 5b+ wire the toggle. */
@media (max-width: 720px) {
  .right-rail {
    transform: translateX(100%);
    transition: transform 0.22s ease;
    width: 280px;
    z-index: 9100;
  }
  body.right-rail-open .right-rail { transform: translateX(0); }
}

/* ============================================================
   GLOBAL PUNA AGENT (pga*) — Phase 1d-bottom 2026-05-04
   Bottom-anchored Cmd+K-style floating bar.

   Closed state: just an "Ask Puna…" input + SEND button. ~50px
   tall, centered at the bottom of the viewport.

   Expanded state: panel grows UPWARD from the input to show the
   most recent answer + scrollable history + feedback affordances.
   Triggered by input focus or click on the bar; collapsed on
   focus loss + click outside + mouseleave (with grace).

   Replaces the prior right-rail slide-out sheet. Frees the right
   side of the viewport for page surfaces (Screener panel, Explorer
   right panel, etc.). The topbar #pga-pill is hidden — the bar IS
   the entry point now.
   ============================================================ */

/* Topbar pill — kept in DOM (hidden) so the existing pgaInit /
   pgaSetPillState code paths don't need to be deleted. Phase 1g
   will excise the markup entirely. */
.pga-pill { display: none !important; }

/* Bottom-anchored bar — floats above content on every authed view.
   Positioned to center within the main content area (i.e. accounts
   for the 240px left sidebar); on viewports without that sidebar it
   stretches naturally. Visual treatment matches the FIND search bar
   (.map-controls .mc-search-wrap) so both bars read as one family —
   cyan border, dark-navy gradient, backdrop blur, inset cyan glow,
   travelling shimmer band so it stands out on light AND dark
   backgrounds. */
/* Hidden by default — shown only when body.pga-ready (set by pgaInit
   inside the showApp wrapper, i.e. only after the user is authed).
   Keeps the bar off the sign-in screen per Clint 2026-05-04. */
body:not(.pga-ready) .pga-bar { display: none !important; }
.pga-bar {
  position: fixed;
  bottom: 6px;
  left: var(--left-rail-w, 240px);
  right: 0;
  margin: 0 auto;
  /* 620px keeps the bar feeling like a focused command surface, not a
     full-width footer. The mobile media-query below stretches it
     edge-to-edge once both rails collapse. */
  width: 620px;
  max-width: calc(100vw - var(--left-rail-w, 240px) - 32px);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  /* DEFAULT state — unobtrusive. The bar is pervasive but quiet so it
     doesn't compete with main content. Cyan border + travelling
     shimmer + ambient glow only land on hover/focus/expanded. */
  background: linear-gradient(180deg, rgba(8, 18, 33, 0.94), rgba(11, 26, 46, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  /* Hard cap so panel + grown input together can't exceed viewport. */
  max-height: calc(100vh - 36px);
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* When the right rail is visible, the bar centers between BOTH rails. */
body.has-right-rail .pga-bar {
  right: var(--right-rail-w, 240px);
  max-width: calc(100vw - var(--left-rail-w, 240px) - var(--right-rail-w, 240px) - 32px);
}

/* Travelling cyan glint band — same animation tokens as the FIND
   bar so they shimmer in lockstep. Kept inside the bar via
   background-position animation, not overflow:hidden alone. */
.pga-bar::before {
  /* Travelling cyan glint band — hidden by default (opacity 0). Fades
     in only on hover / focus-within / is-expanded so the bar earns
     attention rather than demanding it. Animation keeps running so
     the reveal is mid-sweep, not a starting flash. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent 0%, transparent 35%, rgba(0, 229, 229, 0.16) 50%, transparent 65%, transparent 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: mcShimmer 6s linear infinite;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}
.pga-bar:hover::before,
.pga-bar:focus-within::before,
.pga-bar.is-expanded::before { opacity: 1; }
.pga-bar:hover,
.pga-bar:focus-within,
.pga-bar.is-expanded {
  /* Earned-attention state — cyan border + ambient glow + inset cyan
     edge mirror the FIND search bar so both bars read as one family
     when active. */
  border-color: var(--cyan, #00c8c8);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6),
              0 0 0 2px rgba(0, 200, 200, 0.22),
              0 0 0 1px rgba(0, 200, 200, 0.10) inset;
}
/* Lift the children above the shimmer pseudo-element so they read
   cleanly against the moving glint. */
.pga-bar > * { position: relative; z-index: 1; }
/* Train-Puna context card — appears at the top of the Profile page
   ONLY when the user clicked "Train Puna" from the bottom bar with
   unsent input or a recent assistant turn. Quietly disappears once
   the user starts editing their profile. */
.pga-train-context-card {
  margin: 0 0 1.4rem;
  padding: 0.95rem 1.1rem;
  background: linear-gradient(180deg, rgba(8, 18, 33, 0.94), rgba(11, 26, 46, 0.94));
  border: 1px solid rgba(0, 200, 200, 0.32);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(0, 200, 200, 0.10) inset;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pga-train-context-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan, #00c8c8);
  margin-bottom: 0.45rem;
}
.pga-train-context-row {
  font-size: 0.82rem;
  color: var(--white, #f0f4f8);
  line-height: 1.5;
  margin: 0.3rem 0;
}
.pga-train-context-row .lab {
  display: inline-block;
  min-width: 80px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white-dim, #6b7280);
  margin-right: 0.4rem;
}
.pga-train-context-row .val { color: var(--white, #f0f4f8); }
.pga-train-context-actions { display: flex; gap: 0.4rem; margin-top: 0.7rem; }
.pga-train-context-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white-muted, #a8b2c2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.pga-train-context-btn:hover { color: var(--white, #f0f4f8); border-color: rgba(0, 200, 200, 0.4); background: rgba(0, 200, 200, 0.06); }
.pga-train-context-btn.is-primary { color: var(--cyan, #00c8c8); border-color: rgba(0, 200, 200, 0.55); }
.pga-train-context-btn.is-primary:hover { background: rgba(0, 200, 200, 0.18); color: var(--cyan-bright, #00f0f0); }

@media (max-width: 720px) {
  .pga-bar {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    bottom: 8px;
    margin: 0;
  }
  /* Mobile — both rails collapse, band spans full viewport width. */
  body.pga-ready::after { left: 0; right: 0; }
}

/* Expanded panel — hidden by default, shown when .is-expanded. */
.pga-bar-panel {
  display: none;
  flex-direction: column;
  max-height: 440px;
  min-height: 120px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pga-bar.is-expanded .pga-bar-panel { display: flex; }

/* Panel header — icon + title + collapse arrow + Train Puna link. */
.pga-bar-head {
  flex: 0 0 auto;
  padding: 0.55rem 0.85rem;
  display: flex; align-items: center; gap: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pga-bar-head .puna-ai-symbol-sm { width: 16px; height: 16px; flex: 0 0 auto; }
.pga-bar-title {
  font-size: 0.78rem; font-weight: 600; color: var(--white, #f0f4f8);
  letter-spacing: -0.005em;
}
.pga-bar-collapse {
  background: transparent; border: 0; color: var(--white-dim, #6b7280);
  font-size: 0.7rem; line-height: 1;
  padding: 0.2rem 0.4rem; border-radius: 4px;
  cursor: pointer; transition: color 0.12s, background 0.12s;
}
.pga-bar-collapse:hover { color: var(--white, #f0f4f8); background: rgba(255, 255, 255, 0.04); }
.pga-bar-spacer { flex: 1 1 auto; }
.pga-train-link {
  flex: 0 0 auto;
  background: rgba(0, 200, 200, 0.10);
  border: 1px solid rgba(0, 200, 200, 0.45);
  color: var(--cyan, #00c8c8);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.32rem 0.65rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}
.pga-train-link:hover {
  background: rgba(0, 200, 200, 0.22);
  color: var(--cyan-bright, #00f0f0);
  border-color: var(--cyan, #00c8c8);
  transform: translateY(-1px);
}

/* Message list — scrolls within the panel. */
.pga-bar-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.7rem 0.95rem 0.4rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  min-height: 0;
}
.pga-msg { display: flex; flex-direction: column; gap: 0.2rem; }
.pga-msg-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim, #6b7280);
}
.pga-msg-eyebrow.is-user { color: rgba(0, 200, 200, 0.85); }
.pga-msg-body {
  /* 2026-05-10 — shrunk from 0.83rem/1.5 to 0.74rem/1.45 per Clint
     ("the puna agent text is too big — should be 2-3 lines of
     condensed information only"). Matches the wlx scope-pill family
     so the bar reads as a calm reference line, not a headline. */
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--white, #f0f4f8);
  word-wrap: break-word;
}
.pga-msg-body p { margin: 0 0 0.55rem; }
.pga-msg-body p:last-child { margin-bottom: 0; }
.pga-msg-body strong { color: var(--white, #f0f4f8); font-weight: 600; }
.pga-msg-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
/* Brief 25 (wave-6) — inline citation anchors emitted by the citation-
   link renderer. Same .fa-cite class used by /for-capital's .fa-bar so
   a future style refresh touches one selector. Cyan baseline matches
   the wlx scope-pill / .pga-fb-btn.is-on family; dotted underline reads
   as "footnote" rather than "navigation link"; :visited is held to the
   same hue so the second tap doesn't get a different signal. */
.pga-msg-body .fa-cite,
.pga-msg-body .fa-cite:link,
.pga-msg-body .fa-cite:visited {
  color: var(--cyan, #00c8c8);
  text-decoration: underline dotted rgba(0, 200, 200, 0.55);
  text-underline-offset: 0.15em;
  cursor: pointer;
  transition: color 0.12s, text-decoration-color 0.12s;
}
.pga-msg-body .fa-cite:hover,
.pga-msg-body .fa-cite:focus {
  color: var(--cyan-bright, #00f0f0);
  text-decoration-color: rgba(0, 240, 240, 0.85);
}
.pga-msg.is-user .pga-msg-body {
  color: rgba(255, 255, 255, 0.94);
  background: rgba(0, 200, 200, 0.07);
  border-radius: 8px 8px 8px 2px;
  padding: 0.45rem 0.65rem;
  align-self: flex-end;
  max-width: 92%;
}
.pga-msg.is-assistant .pga-msg-body {
  background: transparent;
  padding: 0.05rem 0;
  max-width: 100%;
}
.pga-msg-feedback {
  display: flex; gap: 0.25rem;
  margin-top: 0.1rem;
  align-items: center;
}
.pga-fb-btn {
  background: transparent; border: 0;
  color: var(--white-dim, #6b7280);
  padding: 0.1rem 0.35rem;
  font-size: 0.78rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.55;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.pga-fb-btn:hover { opacity: 1; color: var(--white, #f0f4f8); background: rgba(255, 255, 255, 0.04); }
.pga-fb-btn.is-on { color: var(--cyan, #00c8c8); opacity: 1; }
.pga-msg-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  color: var(--white-dim, #6b7280);
  letter-spacing: 0.04em;
  margin-left: auto;
  opacity: 0.5;
}

/* Inline action notice — small toast bottom-left when Puna takes a
   nav action via tool_use. Auto-dismisses after ~2.4s. */
.pga-action-notice {
  position: fixed;
  left: 256px;
  bottom: 90px;
  z-index: 9001;
  background: rgba(6, 15, 29, 0.96);
  border: 1px solid rgba(0, 200, 200, 0.45);
  border-radius: 6px;
  padding: 0.5rem 0.85rem;
  color: var(--cyan, #00c8c8);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.pga-action-notice.is-show { opacity: 1; transform: translateY(0); }

/* Phase 3a — Proposal card lives in the right rail's #pga-action-slot.
   Skeleton styles only; the look-and-feel chat owns the visual treatment. */
.pga-action-slot {
  /* Empty by default; only takes layout when .is-active. */
  display: none;
}
.pga-action-slot.is-active {
  display: block;
  margin: 0.6rem 0.8rem 0.4rem;
}
.pga-proposal-card {
  border: 1px solid var(--cyan, #00c8c8);
  border-radius: 6px;
  background: rgba(0, 200, 200, 0.05);
  padding: 0.7rem 0.8rem;
  font-size: 0.78rem;
  color: var(--white, #f0f4f8);
}
.pga-proposal-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--cyan, #00c8c8);
  margin-bottom: 0.35rem;
}
.pga-proposal-label {
  line-height: 1.35;
  margin-bottom: 0.55rem;
}
.pga-proposal-confirm-input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 4px;
  color: var(--white, #f0f4f8);
  font-size: 0.75rem;
}
.pga-proposal-actions { display: flex; gap: 0.4rem; }
.pga-proposal-approve,
.pga-proposal-cancel {
  flex: 1 1 auto;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
}
.pga-proposal-approve {
  background: var(--cyan, #00c8c8);
  color: var(--navy-deep, #060f1d);
  border: 1px solid var(--cyan, #00c8c8);
  font-weight: 600;
}
.pga-proposal-approve:hover { filter: brightness(1.1); }
.pga-proposal-approve:disabled { opacity: 0.5; cursor: default; }
.pga-proposal-cancel {
  background: transparent;
  color: var(--white-muted, #c0c8d0);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.18));
}
.pga-proposal-cancel:hover { background: rgba(255, 255, 255, 0.04); }
.pga-proposal-cancel:disabled { opacity: 0.5; cursor: default; }
.pga-proposal-status {
  margin-top: 0.45rem;
  font-size: 0.7rem;
  color: var(--white-dim, #6b7280);
  min-height: 0.9rem;
}
.pga-proposal-success {
  font-size: 0.78rem;
  color: var(--cyan, #00c8c8);
  padding: 0.25rem 0;
}
.pga-proposal-destructive-note {
  font-size: 0.7rem;
  color: var(--white-dim, #6b7280);
  margin-bottom: 0.4rem;
  line-height: 1.35;
}
.pga-proposal-destructive-note strong { color: var(--white, #f0f4f8); }
.pga-proposal-allow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-size: 0.7rem;
  color: var(--white-muted, #c0c8d0);
  cursor: pointer;
  user-select: none;
}
.pga-proposal-allow input { accent-color: var(--cyan, #00c8c8); cursor: pointer; }

/* Action card — Phase 3 hook. */
.pga-action-card {
  margin-top: 0.4rem;
  border: 1px solid var(--cyan, #00c8c8);
  border-radius: 6px;
  background: rgba(0, 200, 200, 0.05);
  padding: 0.55rem 0.7rem;
}
.pga-action-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan, #00c8c8);
  margin-bottom: 0.3rem;
}
.pga-action-title { font-size: 0.8rem; color: var(--white, #f0f4f8); margin-bottom: 0.5rem; }
.pga-action-buttons { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.pga-action-btn {
  padding: 0.32rem 0.6rem;
  background: transparent;
  border: 1px solid rgba(0, 200, 200, 0.55);
  color: var(--cyan, #00c8c8);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.pga-action-btn.is-primary { background: rgba(0, 200, 200, 0.18); }
.pga-action-btn:hover { background: rgba(0, 200, 200, 0.28); color: var(--cyan-bright, #00f0f0); }
.pga-action-btn.is-cancel { color: var(--white-dim, #6b7280); border-color: rgba(255, 255, 255, 0.12); }
.pga-action-btn.is-cancel:hover { color: rgba(255, 140, 140, 0.85); border-color: rgba(255, 140, 140, 0.35); background: transparent; }

/* Suggestion chip — appears in the panel above messages when there is
   no conversation yet. Click sends. */
.pga-bar-suggest {
  flex: 0 0 auto;
  padding: 0.55rem 0.95rem 0;
}
.pga-suggest {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(0, 200, 200, 0.28);
  color: rgba(0, 200, 200, 0.9);
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.74rem;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pga-suggest:hover { background: rgba(0, 200, 200, 0.1); border-color: var(--cyan, #00c8c8); color: var(--white, #f0f4f8); }
.pga-suggest:empty { display: none; }

/* Input row — always visible at the bottom of the bar. */
.pga-bar-input-row {
  flex: 0 0 auto;
  display: flex; gap: 0.45rem; align-items: center;
  padding: 0.5rem 0.7rem 0.5rem 0.85rem;
}
.pga-input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  color: var(--white, #f0f4f8);
  padding: 0.4rem 0.2rem;
  font-family: inherit;
  font-size: 0.88rem;
  resize: none;
  min-height: 28px;
  /* Caps at ~3 lines so the bar grows up to 3 lines as the Puna read
     types into the value, then stops. Per Clint 2026-05-05: the bar
     IS the analyst surface, so it stays a focused command box rather
     than a scrolling editor. (Was 320px until 2026-05-05.) */
  max-height: 78px;
  line-height: 1.4;
  outline: 0;
  overflow-y: auto;
}
.pga-input::placeholder { color: var(--white-dim, #6b7280); }
/* 2026-05-07 — .pga-kbd-hint and .pga-send-kbd retired (Clint:
   shortcut hint not needed on the bar). Both selectors hidden so any
   stale cached markup doesn't reflow the input row. */
.pga-kbd-hint,
.pga-send-kbd { display: none; }
.pga-send {
  flex: 0 0 auto;
  padding: 0.42rem 0.85rem;
  background: rgba(0, 200, 200, 0.16);
  border: 1px solid rgba(0, 200, 200, 0.5);
  color: var(--cyan, #00c8c8);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.pga-send:hover:not(:disabled) { background: rgba(0, 200, 200, 0.3); color: var(--cyan-bright, #00f0f0); }
.pga-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Empty state inside the panel */
.pga-bar-empty {
  text-align: center;
  color: var(--white-dim, #6b7280);
  font-size: 0.78rem;
  padding: 1.2rem 0.5rem;
  opacity: 0.7;
}

/* ============================================================
   Reactive observation container — Brief 83 Q7 orange tint.

   Mirrors puna/website/_components/adviser-bar/widget.css
   .adviser-msg.is-reactive so /app and /tools render reactive
   observations consistently. When 2B ships shared design tokens
   for orange-private, swap inline rgba() values to var() refs.

   See _config/wise-adviser-principles.md § Persona: reactive
   § "Default ON for all signed-in users" for the privacy posture.
   ============================================================ */
.pga-msg.is-reactive {
  background: rgba(255, 150, 60, 0.08);
  border-left: 3px solid rgba(255, 150, 60, 0.55);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  margin: 0.05rem 0;
}
.pga-msg.is-reactive .pga-msg-body {
  font-size: 0.74rem;
  line-height: 1.45;
  background: transparent;
  padding: 0;
  max-width: 100%;
}
.pga-msg-eyebrow.is-reactive {
  color: rgba(255, 170, 90, 0.90);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

/* First-reactive one-time notice — Brief 83 47E lightweight. */
.pga-reactive-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.45rem;
  background: rgba(255, 150, 60, 0.05);
  border: 1px solid rgba(255, 150, 60, 0.32);
  border-radius: 4px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--white-muted, #a8b2c2);
}
.pga-reactive-notice-text { flex: 1 1 auto; }
.pga-reactive-notice-disable {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(255, 150, 60, 0.45);
  color: rgba(255, 170, 90, 0.92);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.28rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.pga-reactive-notice-disable:hover:not(:disabled) {
  background: rgba(255, 150, 60, 0.15);
  color: rgba(255, 200, 130, 1);
}
.pga-reactive-notice-disable:disabled {
  opacity: 0.5;
  cursor: default;
}
.pga-reactive-notice.is-disabling { opacity: 0.6; }