/* ════════════════════════════════════════════════════════════════════
   VMEM BOARD — Command Bridge / Mission Control
   Per /documents/2026-05-25_VMEM_Dashboard_Build_Plan.md §11.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* DTTASA tokens */
  --disp: 'Cinzel', serif;
  --mono: 'IBM Plex Mono', monospace;
  --body: 'DM Sans', sans-serif;
  --gold: #f0c832;
  --gold2: #f7d94e;
  --gdim: rgba(212,175,55,.12);
  --gglow: rgba(212,175,55,.3);
  --green: #4cd657;
  --red: #ff4848;
  --amber: #f59e0b;
  --text: #f2f7ee;
  --t2: rgba(242,247,238,.88);
  --t3: rgba(242,247,238,.62);
  --t4: rgba(242,247,238,.38);
  --panel: rgba(255,255,255,.10);
  --panel2: rgba(255,255,255,.23);
  --border: rgba(255,255,255,.21);
  --void: #0c1109;
  --deep: #111a0e;
  --base: #172213;
  --lift: #1e2e1b;
  /* VMEM-specific 3-tier glass */
  --vmem-glass-l1-bg: rgba(255,255,255,.05);
  --vmem-glass-l1-bd: rgba(255,255,255,.10);
  --vmem-glass-l2-bg: linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 42%,rgba(255,255,255,.10)),linear-gradient(320deg,var(--gdim),transparent 60%);
  --vmem-glass-l2-bd: rgba(255,255,255,.20);
  --vmem-glass-l3-bg: rgba(255,255,255,.16);
  --vmem-glass-l3-bd: rgba(255,255,255,.28);
  /* Dept brand tints */
  --vmem-dept-programs: #10b981;
  --vmem-dept-it: #3b82f6;
  --vmem-dept-comms: #ec4899;
  --vmem-dept-support: #a855f7;
  --vmem-dept-hr: #f0c832;
  --vmem-dept-recruit: #6366f1;
  --vmem-dept-ops: #ff6b35;
  --vmem-dept-finance: #14b8a6;
  --vmem-dept-logistics: #f97316;
  --vmem-dept-programs-light: #34d399;
  /* Easings */
  --ease-cinema: cubic-bezier(.16,1,.3,1);
  --ease-pulse:  cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--body);
  color: var(--text);
  background: var(--void);
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(240,200,50,.06) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 100%, rgba(76,214,87,.04) 0%, transparent 60%),
    linear-gradient(180deg, #0a0f08 0%, #0c1109 100%);
  min-height: 100vh;
}

/* ─── Particle field ────────────────────────────────────────────── */
#vmem-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.vmem-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  filter: blur(0.5px);
  box-shadow: 0 0 6px rgba(240,200,50,.6);
  animation: vmemParticleDrift linear infinite;
}
@keyframes vmemParticleDrift {
  0%   { transform: translate(0, 100vh) scale(0.6); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.5; }
  100% { transform: translate(40px, -10vh) scale(1); opacity: 0; }
}

/* ─── Gate / Denied ─────────────────────────────────────────────── */
.vmem-gate, .vmem-denied {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12,17,9,.96);
  backdrop-filter: blur(20px);
  z-index: 999999;
}
.vmem-gate-inner, .vmem-denied-inner {
  text-align: center;
  padding: 40px 32px;
  max-width: 440px;
}
.vmem-gate-spinner { font-size: 32px; color: var(--gold); margin-bottom: 22px; }
.vmem-gate-title, .vmem-denied-title {
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 8px;
}
.vmem-gate-sub, .vmem-denied-sub {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
}
.vmem-denied-icon {
  font-size: 48px;
  color: var(--red);
  margin-bottom: 18px;
  opacity: 0.6;
}
.vmem-denied-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 10px 18px;
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  color: var(--t2);
  text-decoration: none;
  font-size: 13px;
  transition: all .25s ease;
}
.vmem-denied-back:hover { background: var(--gdim); color: var(--gold); border-color: var(--gglow); }

/* ─── Shell ──────────────────────────────────────────────────────── */
.vmem-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.u-hide { display: none !important; }

/* ─── HEADER ────────────────────────────────────────────────────── */
.vmem-hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background:
    linear-gradient(180deg, rgba(12,17,9,.85) 0%, rgba(12,17,9,.72) 100%);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  animation: vmemHdrDrop .6s var(--ease-cinema) both;
}
@keyframes vmemHdrDrop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.vmem-hdr-left { display: flex; align-items: center; gap: 16px; }
.vmem-hdr-right { display: flex; align-items: center; gap: 12px; }

.vmem-back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--t2);
  text-decoration: none;
  transition: all .25s ease;
}
.vmem-back-btn:hover { background: var(--gdim); color: var(--gold); border-color: var(--gglow); transform: translateX(-2px); }

.vmem-brand-logo { height: 32px; width: auto; }
.vmem-brand-text { font-family: var(--disp); font-size: 18px; font-weight: 700; letter-spacing: 3px; color: var(--gold); }

.vmem-hdr-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
}

.vmem-hdr-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.vmem-hdr-title-major {
  font-family: var(--disp);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--gold);
}
.vmem-hdr-title-minor {
  font-family: var(--body);
  font-size: 13px;
  color: var(--t3);
}

.vmem-away-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  cursor: pointer;
  font-size: 12px;
  color: var(--t2);
  transition: all .25s ease;
}
.vmem-away-toggle:hover { background: var(--vmem-glass-l3-bg); border-color: var(--gglow); }
.vmem-away-toggle.away  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: var(--amber); }
.vmem-away-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: vmemBlink 2s ease-in-out infinite;
}
.vmem-away-toggle.away .vmem-away-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
@keyframes vmemBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.vmem-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
}
.vmem-user-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--gdim);
  border: 1px solid var(--gglow);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.vmem-user-name { font-size: 12px; color: var(--t2); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

.vmem-icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--t2);
  cursor: pointer;
  font-size: 13px;
  transition: all .25s ease;
}
.vmem-icon-btn:hover { background: rgba(255,72,72,.12); color: var(--red); border-color: rgba(255,72,72,.4); }

/* ─── BODY (rail + canvas) ──────────────────────────────────────── */
.vmem-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: calc(100vh - 64px);
}

/* ═══ VERTICAL COMMAND RAIL ════════════════════════════════════ */
.vmem-rail {
  width: 240px;
  flex-shrink: 0;
  background: var(--vmem-glass-l1-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid var(--vmem-glass-l1-bd);
  padding: 22px 12px 60px;
  overflow-y: auto;
  /* Sticky sidebar: the rail stays in view with its OWN scroll, so a long menu never
     drags the right-hand content off-screen. Clicking any item shows its content
     immediately instead of the user having to scroll back up. (Mobile overrides below.) */
  position: sticky;
  top: 64px;
  align-self: flex-start;
  max-height: calc(100vh - 64px);
  animation: vmemRailIn .55s var(--ease-cinema) both;
  animation-delay: .08s;
}
@keyframes vmemRailIn {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.vmem-rail::-webkit-scrollbar { width: 6px; }
.vmem-rail::-webkit-scrollbar-track { background: transparent; }
.vmem-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.vmem-rail-section { margin-bottom: 26px; }
.vmem-rail-section-lbl {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--t4);
  padding: 0 14px 8px;
}

.vmem-rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 2px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--t2);
  font-size: 13px;
  font-weight: 500;
  position: relative;
  transition: all .25s ease;
  border-left: 3px solid transparent;
}
.vmem-rail-item i {
  width: 18px;
  font-size: 14px;
  color: var(--t3);
  transition: color .25s ease;
}
.vmem-rail-item span { flex: 1; }
.vmem-rail-item:hover {
  background: var(--vmem-glass-l2-bg);
  border-left-color: var(--gglow);
}
.vmem-rail-item:hover i { color: var(--gold); }
.vmem-rail-item.active {
  background: linear-gradient(90deg, var(--gdim), transparent);
  border-left-color: var(--gold);
  color: var(--text);
}
.vmem-rail-item.active i { color: var(--gold); }
.vmem-rail-item.dim { opacity: .55; cursor: default; }
.vmem-rail-item.dim:hover { background: transparent; border-left-color: transparent; }
.vmem-rail-item.dim:hover i { color: var(--t3); }

.vmem-rail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--void);
  background: var(--red);
  border-radius: 9px;
  box-shadow: 0 0 8px rgba(255,72,72,.4);
}
.vmem-rail-badge.gold { background: var(--gold); color: var(--void); box-shadow: 0 0 8px var(--gglow); }
.vmem-rail-badge.amber { background: var(--amber); color: var(--void); box-shadow: 0 0 8px rgba(245,158,11,.45); }
.vmem-rail-badge.red   { background: var(--red); color: var(--text); box-shadow: 0 0 8px rgba(255,72,72,.45); }

.vmem-rail-soon {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ═══ MAIN CANVAS ═══════════════════════════════════════════════ */
.vmem-canvas {
  flex: 1;
  padding: 24px 32px 60px;
  min-width: 0;
  overflow-x: hidden;
}

/* ─── BRIDGE HERO ────────────────────────────────────────────── */
.vmem-bridge-hero {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  height: clamp(420px, 60vh, 600px);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(240,200,50,.06) 0%, transparent 65%),
    var(--vmem-glass-l1-bg);
  border: 1px solid var(--vmem-glass-l1-bd);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 22px;
  animation: vmemBridgeIn .8s var(--ease-cinema) both;
  animation-delay: .2s;
}
@keyframes vmemBridgeIn {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.vmem-bridge-bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(240,200,50,.10) 0%, transparent 35%);
  pointer-events: none;
  animation: vmemBgGlow 8s ease-in-out infinite;
}
@keyframes vmemBgGlow {
  0%, 100% { opacity: .8; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}
/* THE ORBIT AND THE CAPTION NOW OCCUPY DISJOINT ROWS.
   They used to share the box: the SVG filled it (inset:0) while the caption was
   absolutely positioned at left:24px bottom:18px in FIXED pixels. The orbit
   scales with the box, the caption does not, so their relationship changed at
   every size, and js/vmem-bridge-render.js tried to compensate with a constant
   (CORE_Y shifted up 30). A constant can only be right at one scale. Measured:
   a 1103x600 hero cleared; a 1103x480 hero, which is 60vh on a laptop,
   overlapped the bottom-left department node by 13x19px; an 885x480 hero by
   72x19px. Grid rows of `minmax(0,1fr) auto` give the caption exactly its own
   height and the orbit everything above it, so they cannot overlap at ANY
   size, and no constant has to be maintained. */
.vmem-bridge-svg {
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.vmem-bridge-caption {
  grid-row: 2;
  justify-self: start;
  margin: 0 24px 18px;
  z-index: 3;
  pointer-events: none;
  max-width: 360px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(12,17,9,.78) 0%, rgba(12,17,9,.45) 100%);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--vmem-glass-l2-bd);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  animation: vmemCaptionIn .9s var(--ease-cinema) both;
  animation-delay: .9s;
}
@keyframes vmemCaptionIn {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.vmem-bridge-caption-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 4px;
}
.vmem-bridge-caption-title {
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 10px;
}
.vmem-bridge-caption-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(240,200,50,.10);
  border: 1px solid var(--gglow);
  border-radius: 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold);
  pointer-events: auto;
  margin-top: 10px;
  max-width: 100%;
}
.vmem-pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: vmemBlink 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
.vmem-pulse-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; font-size: 10px; }

/* ─── KPI ORBITAL DOCK ───────────────────────────────────────── */
.vmem-kpi-dock {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.vmem-kpi {
  position: relative;
  padding: 18px 18px 14px;
  border-radius: 18px;
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--vmem-glass-l2-bd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform .3s var(--ease-cinema), background .25s ease, border-color .25s ease;
  overflow: hidden;
  animation: vmemKpiIn .6s var(--ease-cinema) both;
}
.vmem-kpi::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: radial-gradient(circle at 0% 0%, rgba(240,200,50,.10) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.vmem-kpi:hover {
  transform: translateY(-3px);
  background: var(--vmem-glass-l3-bg);
  border-color: var(--gglow);
}
.vmem-kpi:hover::before { opacity: 1; }
.vmem-kpi.breathing { animation: vmemKpiBreathe 2s var(--ease-cinema) 2; }
@keyframes vmemKpiBreathe {
  0%, 100% { box-shadow: 0 0 0 rgba(240,200,50,0); }
  50%      { box-shadow: 0 0 24px rgba(240,200,50,.45); }
}
.vmem-kpi:nth-child(1) { animation-delay: .25s; }
.vmem-kpi:nth-child(2) { animation-delay: .32s; }
.vmem-kpi:nth-child(3) { animation-delay: .39s; }
.vmem-kpi:nth-child(4) { animation-delay: .46s; }
.vmem-kpi:nth-child(5) { animation-delay: .53s; }
.vmem-kpi:nth-child(6) { animation-delay: .60s; }
@keyframes vmemKpiIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.vmem-kpi-num {
  font-family: var(--disp);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}
.vmem-kpi-num.gold { color: var(--gold); }
.vmem-kpi-num.green { color: var(--green); }
.vmem-kpi-num.red { color: var(--red); }
.vmem-kpi-lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 4px;
}
.vmem-kpi-trend {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--t4);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ─── CONTEXTUAL SLABS ─────────────────────────────────────────── */
.vmem-slabs { position: relative; }
.vmem-slab {
  display: none;
  animation: vmemSlabIn .32s var(--ease-cinema) both;
}
.vmem-slab.active { display: block; }
@keyframes vmemSlabIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes vmemSlabOut {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-8px); opacity: 0; }
}
.vmem-slab.leaving { animation: vmemSlabOut .25s var(--ease-cinema) forwards; }

.vmem-slab-hd { margin-bottom: 18px; }
.vmem-slab-hd-title {
  font-family: var(--disp);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--gold);
  margin-bottom: 4px;
}
.vmem-slab-hd-title i { margin-right: 10px; opacity: .9; }
.vmem-slab-hd-sub {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.5;
}

/* ─── GLASS CARDS ──────────────────────────────────────────────── */
.vmem-glass-card {
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--vmem-glass-l2-bd);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 18px;
  transition: border-color .25s ease;
}
.vmem-glass-card:hover { border-color: var(--gglow); }
.vmem-card-tall { min-height: 360px; }

.vmem-card-hd {
  font-family: var(--disp);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 4px;
}
.vmem-card-hd i { margin-right: 8px; }
.vmem-card-sub {
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 16px;
}

/* ─── Overview grid ─────────────────────────────────────────────── */
.vmem-overview-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}

.vmem-liaison-bars { display: flex; flex-direction: column; gap: 12px; }
.vmem-liaison-bar {
  display: grid;
  grid-template-columns: 130px 1fr 60px;
  align-items: center;
  gap: 12px;
}
.vmem-liaison-bar-name {
  font-size: 12px;
  color: var(--t2);
  font-weight: 500;
}
.vmem-liaison-bar-track {
  height: 8px;
  background: var(--vmem-glass-l1-bg);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.vmem-liaison-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--gold);
  width: 0;
  animation: vmemBarFill 1.1s var(--ease-cinema) forwards;
  animation-delay: .4s;
  transform-origin: left;
}
@keyframes vmemBarFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.vmem-liaison-bar-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t2);
  text-align: right;
  letter-spacing: 1px;
}

.vmem-recent-list, .vmem-phase-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vmem-recent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--vmem-glass-l1-bg);
  border-radius: 10px;
  font-size: 12px;
}
.vmem-recent-icon { color: var(--gold); font-size: 11px; margin-top: 2px; }
.vmem-recent-text { color: var(--t2); flex: 1; line-height: 1.45; }
.vmem-recent-time { color: var(--t4); font-family: var(--mono); font-size: 10px; }

.vmem-phase-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: var(--vmem-glass-l1-bg);
  border-radius: 10px;
  font-size: 12px;
  color: var(--t3);
}
.vmem-phase-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--t4);
  flex-shrink: 0;
}
.vmem-phase-row.done { color: var(--text); }
.vmem-phase-row.done .vmem-phase-dot {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

/* ─── Volunteers table ─────────────────────────────────────────── */
.vmem-filter-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.vmem-input {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--body);
  font-size: 13px;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
  flex: 1;
  min-width: 0;
}
.vmem-input-sm { flex: 0 0 200px; }
.vmem-input:focus { border-color: var(--gglow); background: var(--vmem-glass-l2-bg); }
.vmem-input-readonly { background: var(--vmem-glass-l1-bg); color: var(--t2); cursor: not-allowed; }
.vmem-input-ta { resize: vertical; min-height: 80px; font-family: var(--body); }

.vmem-table-wrap { overflow-x: auto; }
.vmem-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 880px;
}
.vmem-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t4);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.vmem-table td {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--t2);
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
  transition: background .2s ease;
}
.vmem-table tbody tr { position: relative; }
.vmem-table tbody tr:hover td { background: var(--vmem-glass-l1-bg); }
.vmem-table tbody tr::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold);
  opacity: 0;
  transition: opacity .2s ease;
}
.vmem-table tbody tr:hover::before { opacity: 1; }
.vmem-table-empty { text-align: center; padding: 28px; color: var(--t3); font-size: 12px; font-style: italic; }

/* ── KPI strip (Training / Offboarding slabs) ───────────────────── */
.vmem-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.vmem-kpi-card {
  background: var(--vmem-glass-l2-bg, rgba(255,255,255,.06));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease;
}
.vmem-kpi-card:hover { transform: translateY(-2px); border-color: rgba(240,200,50,.3); }
.vmem-kpi-lbl { font-size: 12px; color: var(--t3); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vmem-kpi-val { font-family: var(--mono); font-size: 26px; color: var(--gold); font-weight: 700; line-height: 1.1; }
.vmem-kpi-sub { font-size: 11px; color: var(--t3); margin-top: 4px; }

.vmem-table td.u-mono, .vmem-table th.u-mono { font-family: var(--mono); white-space: nowrap; }

/* ── 1:1 Cadence Latency Engine (mirrors HR Ops Monitor latency engine) ── */
.vm-1to1-lat-section {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  margin: 0 0 8px 2px; padding-bottom: 4px;
}
.vm-1to1-lat-section i { margin-right: 6px; }
.vm-1to1-lat-section.breached    { color: rgba(255,72,72,.85); border-bottom: 1px solid rgba(255,72,72,.2); }
.vm-1to1-lat-section.approaching { color: rgba(245,158,11,.85); border-bottom: 1px solid rgba(245,158,11,.2); }
.vm-1to1-lat-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 6px;
  border-radius: 9px;
  background: var(--vmem-glass-l1-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  animation: wgIn .35s cubic-bezier(.16,1,.3,1) both;
  transition: border-color .25s ease;
}
.vm-1to1-lat-row:hover { border-color: rgba(240,200,50,.3); }
.vm-1to1-lat-av {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.vm-1to1-lat-av img { width: 100%; height: 100%; object-fit: cover; }
.vm-1to1-lat-info { flex: 1; min-width: 0; }
.vm-1to1-lat-name { font-size: 13px; color: var(--text); font-weight: 600; }
.vm-1to1-lat-dept { font-size: 11px; color: var(--t3); }
.vm-1to1-lat-sub  { font-size: 11px; color: var(--t3); margin-top: 2px; }
.vm-1to1-lat-bar {
  margin-top: 6px; height: 5px; width: 100%;
  background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden;
  display: inline-block;
}
.vm-1to1-lat-fill {
  height: 100%; border-radius: 3px;
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
.vm-1to1-lat-label {
  font-size: 10px; font-weight: 800; font-family: var(--mono);
  margin-left: 8px; vertical-align: middle;
}
.vm-1to1-lat-actions { flex-shrink: 0; }
.vm-1to1-lat-empty {
  text-align: center; padding: 24px; color: var(--t2); font-size: 12px;
}
@media (max-width: 640px) {
  .vm-1to1-lat-row { flex-direction: column; align-items: flex-start; }
  .vm-1to1-lat-actions { width: 100%; }
  .vm-1to1-lat-actions .btn { width: 100%; justify-content: center; }
}

/* ── Academy Training Compliance matrix ─────────────────────────── */
.ac-table-wrap {
  overflow-x: auto;
  /* shadow hints at horizontal-scrollable content on narrow viewports */
  background:
    linear-gradient(90deg, var(--panel) 30%, rgba(12,17,9,0)) 0 0,
    linear-gradient(90deg, rgba(12,17,9,0), var(--panel) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.4), rgba(0,0,0,0)) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.4), rgba(0,0,0,0)) 100% 0;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.ac-table { min-width: 720px; width: 100%; border-collapse: separate; border-spacing: 0; }
.ac-table th {
  white-space: normal;       /* allow long course titles to wrap */
  padding: 10px 8px;
  font-size: 10px;
  letter-spacing: 1px;
  max-width: 110px;
  min-width: 90px;
  vertical-align: bottom;
  line-height: 1.35;
  background: var(--lift);
  position: sticky;
  top: 0;
  z-index: 1;
}
.ac-table td { padding: 12px 8px; vertical-align: middle; }
/* Pin the User column so cells stay readable on narrow viewports. */
.ac-table .ac-th-user {
  min-width: 220px;
  text-align: left;
  max-width: none;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--lift);
}
.ac-table tbody td:first-child {
  position: sticky;
  left: 0;
  background: var(--base);
  z-index: 1;
  border-right: 1px solid var(--border);
}
.ac-cell { text-align: center; width: 56px; }
/* Compact circular badge — icon only, full label in `title` tooltip. */
.ac-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
  cursor: help;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ac-dot:hover { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
.ac-dot.passed       { background: rgba(76,214,87,.18);  color: var(--green); border-color: rgba(76,214,87,.5); }
.ac-dot.in-progress  { background: rgba(240,200,50,.18); color: var(--gold);  border-color: rgba(240,200,50,.5); }
.ac-dot.expired,
.ac-dot.failed       { background: rgba(255,72,72,.18);  color: var(--red);   border-color: rgba(255,72,72,.5); }
.ac-dot.not-started  { background: rgba(255,255,255,.04); color: var(--t3); border-color: rgba(255,255,255,.12); }

/* Legend strip under the table (rendered once at the foot of the matrix). */
.ac-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 11px; color: var(--t3);
  padding: 10px 12px 4px;
}
.ac-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ac-legend-item .ac-dot { width: 18px; height: 18px; font-size: 10px; cursor: default; }
.ac-legend-item .ac-dot:hover { transform: none; box-shadow: none; }

/* ── VMEM probation proposal banner ─────────────────────────────── */
.vmem-proposal-banner {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid transparent;
}
.vmem-proposal-banner i { margin-right: 6px; }
.vmem-proposal-banner.pending  { background: rgba(240,200,50,.08); color: var(--gold); border-color: rgba(240,200,50,.35); }
.vmem-proposal-banner.rejected { background: rgba(255,72,72,.08); color: var(--red); border-color: rgba(255,72,72,.35); }
.vmem-proposal-banner.approved { background: rgba(76,214,87,.08); color: var(--green); border-color: rgba(76,214,87,.35); }

/* ── Pending overtime bank cards (Credits slab) ─────────────────── */
.ot-bank-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--vmem-glass-l1-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  margin-bottom: 10px;
  transition: border-color .25s ease;
}
.ot-bank-row:hover            { border-color: rgba(240,200,50,.3); }
.ot-bank-row.submitted        { border-left: 3px solid var(--gold); background: rgba(240,200,50,.04); }
.ot-bank-main                 { flex: 1; min-width: 0; }
.ot-bank-name                 { font-size: 14px; color: var(--text); font-weight: 600; }
.ot-bank-sub                  { font-size: 12px; color: var(--t3); margin-top: 3px; }
.ot-bank-meta                 { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--t2); }
.ot-bank-hrs                  { color: var(--gold); font-family: var(--mono); }
.ot-bank-flag {
  margin-top: 8px;
  font-size: 11px;
  color: var(--gold);
  padding: 6px 10px;
  background: rgba(240,200,50,.08);
  border: 1px solid rgba(240,200,50,.3);
  border-radius: 8px;
}
.ot-bank-note                 { margin-top: 4px; font-style: italic; color: var(--t2); }
.ot-bank-actions              { flex-shrink: 0; }
@media (max-width: 640px) {
  .ot-bank-row { flex-direction: column; }
  .ot-bank-actions { width: 100%; }
  .ot-bank-actions .btn { width: 100%; }
}

/* ── Department performance rings (Overview slab) ───────────────── */
.vmem-perf-hero { margin-bottom: 16px; }
.vmem-dept-perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.vmem-dept-perf-card {
  background: var(--vmem-glass-l1-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: vmemCardIn .55s cubic-bezier(.16,1,.3,1) forwards;
  position: relative;
}
@keyframes vmemCardIn {
  to { opacity: 1; transform: translateY(0); }
}
.vmem-dept-perf-card.grade-gold  { border-color: rgba(240,200,50,.55); box-shadow: 0 0 18px rgba(240,200,50,.18); }
.vmem-dept-perf-card.grade-green { border-color: rgba(76,214,87,.45); }
.vmem-dept-perf-card.grade-amber { border-color: rgba(245,158,11,.45); }
.vmem-dept-perf-card.grade-red   { border-color: rgba(255,72,72,.5);  box-shadow: 0 0 14px rgba(255,72,72,.18); }

.vmem-dept-perf-name { font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 10px; }
.vmem-dept-perf-ring { position: relative; width: 120px; height: 120px; margin: 0 auto 10px; }
.vmem-dept-perf-ring svg { transform: rotate(-90deg); }
.vmem-dept-perf-ring .ring-track {
  fill: none; stroke: rgba(255,255,255,.08); stroke-width: 10;
}
.vmem-dept-perf-ring .ring-fill {
  fill: none; stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 339.292; stroke-dashoffset: 339.292;
}
.grade-gold  .ring-fill { stroke: var(--gold);  filter: drop-shadow(0 0 6px rgba(240,200,50,.55)); }
.grade-green .ring-fill { stroke: var(--green); filter: drop-shadow(0 0 6px rgba(76,214,87,.45)); }
.grade-amber .ring-fill { stroke: #f59e0b; filter: drop-shadow(0 0 6px rgba(245,158,11,.45)); }
.grade-red   .ring-fill { stroke: var(--red); filter: drop-shadow(0 0 6px rgba(255,72,72,.5)); }

@keyframes vmemRingPaint {
  from { stroke-dashoffset: 339.292; }
  to   { /* set inline via JS to the target offset */ }
}

.vmem-dept-perf-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700;
}
.vmem-dept-perf-pct .pct-val { font-size: 28px; color: var(--text); }
.vmem-dept-perf-pct .pct-sym { font-size: 14px; color: var(--t3); margin-left: 2px; }

.vmem-dept-perf-breakdown {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  font-size: 11px; color: var(--t3); text-align: left;
}
.vmem-dept-perf-breakdown > div { display: flex; justify-content: space-between; }
.vmem-dept-perf-breakdown .u-mono { color: var(--t2); }

/* ── Live volunteer rota grid + clock-in animations ─────────────── */
.vol-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.vol-live-card {
  background: var(--vmem-glass-l1-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
}
.vol-live-card.sched { border-left: 3px solid rgba(255,255,255,.2); }
.vol-live-card.on    { border-left: 3px solid var(--green); box-shadow: 0 0 0 1px rgba(76,214,87,.2), 0 0 18px rgba(76,214,87,.12); }
.vol-live-card-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vol-live-card-bd { font-size: 12px; color: var(--t2); }
.vol-live-state   { margin-bottom: 4px; }
.vol-live-window  { font-family: var(--mono); color: var(--t3); }
.vol-live-time    { font-size: 11px; color: var(--t3); margin-top: 4px; }

.vmem-pulse-green {
  color: var(--green);
  animation: vmemPulseGreen 1.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes vmemPulseGreen {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(76,214,87,.6)); }
  50%      { opacity: .45; filter: drop-shadow(0 0 0 rgba(76,214,87,0)); }
}

/* Clock-in entrance pulse — fires once when a new activeShifts doc appears */
.vol-live-card.clock-in-pulse {
  animation: vmemClockIn 2.4s cubic-bezier(.16,1,.3,1);
}
@keyframes vmemClockIn {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,214,87,.55); }
  20%  { transform: scale(1.025); box-shadow: 0 0 0 12px rgba(76,214,87,.3); }
  60%  { transform: scale(1); box-shadow: 0 0 0 20px rgba(76,214,87,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,214,87,0); }
}

/* Clock-off fade — fires once when a previously-active uid disappears */
.vol-live-card.clock-off-fade {
  animation: vmemClockOff 1.8s cubic-bezier(.16,1,.3,1);
}
@keyframes vmemClockOff {
  0%   { opacity: 1; transform: scale(1); }
  60%  { opacity: .4; transform: scale(.97); filter: grayscale(.6); }
  100% { opacity: 1; transform: scale(1); filter: grayscale(0); }
}

/* On-shift roster pill */
.vmem-status-pill.onshift {
  background: rgba(76,214,87,.18); color: var(--green); border: 1px solid rgba(76,214,87,.45);
}

/* ── Per-volunteer shift assignment rows ────────────────────────── */
.pv-shift-list-locked {
  border: 1px dashed rgba(240,200,50,.4);
  border-radius: 14px;
  padding: 0;
  background: rgba(240,200,50,.04);
}
.pv-shift-locked-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 24px;
  gap: 8px;
  color: var(--t2);
}
.pv-shift-locked-overlay i.fa-shield-halved {
  font-size: 32px;
  color: var(--gold);
  margin-bottom: 6px;
}
.pv-shift-locked-title { font-size: 15px; color: var(--text); font-weight: 700; }
.pv-shift-locked-sub   { font-size: 12px; color: var(--t3); max-width: 460px; line-height: 1.55; }

.pv-shift-row {
  background: var(--vmem-glass-l1-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-color .25s ease;
}
.pv-shift-row:hover { border-color: rgba(240,200,50,.3); }
.pv-shift-row-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; }
.pv-shift-name { font-size:14px; color:var(--text); font-weight:600; }
.pv-shift-dept { font-size:12px; color:var(--t3); }
.pv-day-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.pv-day-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 10px; border-radius:18px;
  background: rgba(255,255,255,.05); border:1px solid var(--border);
  cursor:pointer; font-size:11px; color:var(--t2);
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
.pv-day-chip:hover { border-color:rgba(240,200,50,.4); color:var(--text); }
.pv-day-chip.on   { background: var(--gold); color: var(--void); border-color: var(--gold); font-weight:600; }
.pv-day-chip input { display:none; }
.pv-shift-row-bot { display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap:12px; align-items:end; }
@media (max-width: 640px) {
  .pv-shift-row-bot { grid-template-columns: 1fr 1fr; }
}

/* ── Generic list row (Offboarding cards) ───────────────────────── */
.vmem-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--vmem-glass-l1-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  margin-bottom: 10px;
  transition: border-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.vmem-list-row:hover { border-color: rgba(240,200,50,.3); transform: translateY(-1px); }
.vmem-list-row-main { flex: 1 1 auto; min-width: 0; }
.vmem-list-row-title { font-size: 14px; color: var(--text); font-weight: 600; }
.vmem-list-row-sub { font-size: 12px; color: var(--t3); margin-top: 4px; word-break: break-word; }
.vmem-list-row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .vmem-list-row { flex-direction: column; }
  .vmem-list-row-side { width: 100%; justify-content: flex-start; }
}

.vmem-vol-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vmem-vol-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gdim);
  border: 1px solid var(--gglow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  overflow: hidden;
  flex-shrink: 0;
}
.vmem-vol-av img { width: 100%; height: 100%; object-fit: cover; }
.vmem-vol-name { font-size: 13px; color: var(--text); font-weight: 500; }
.vmem-vol-email { font-size: 11px; color: var(--t4); }

.vmem-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 11px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.vmem-status-pill.active { background: rgba(76,214,87,.12); color: var(--green); border: 1px solid rgba(76,214,87,.3); }
.vmem-status-pill.pending { background: rgba(240,200,50,.12); color: var(--gold); border: 1px solid var(--gglow); }
.vmem-status-pill.leave { background: rgba(245,158,11,.12); color: var(--amber); border: 1px solid rgba(245,158,11,.3); }
.vmem-status-pill.probation { background: rgba(99,102,241,.12); color: #818cf8; border: 1px solid rgba(99,102,241,.3); }

/* ─── Intake (Pending Volunteer Assignments) ───────────────────── */
.vmem-intake-empty {
  text-align: center;
  padding: 40px 20px;
}
.vmem-intake-empty i {
  font-size: 36px;
  color: var(--gold);
  opacity: 0.4;
  margin-bottom: 14px;
}
.vmem-intake-empty-title {
  font-size: 14px;
  color: var(--t2);
  font-weight: 500;
  margin-bottom: 4px;
}
.vmem-intake-empty-sub {
  font-size: 12px;
  color: var(--t4);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.5;
}

.vmem-intake-list { display: flex; flex-direction: column; gap: 12px; }
.vmem-intake-card {
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--vmem-glass-l2-bd);
  border-radius: 16px;
  padding: 18px 20px;
  backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  transition: border-color .25s ease, transform .25s var(--ease-cinema);
  animation: vmemKpiIn .55s var(--ease-cinema) both;
}
.vmem-intake-card:hover {
  border-color: var(--gglow);
  transform: translateX(3px);
}
.vmem-intake-av {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gdim);
  border: 2px solid var(--gglow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}
.vmem-intake-info { min-width: 0; }
.vmem-intake-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.vmem-intake-meta {
  font-size: 12px;
  color: var(--t3);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.vmem-intake-meta span { display: inline-flex; align-items: center; gap: 5px; }
.vmem-intake-meta i { color: var(--t4); }

/* ─── Rota slab ────────────────────────────────────────────────── */
.vmem-rota-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.vmem-rota-cta-card .btn { width: fit-content; }
.vmem-rota-authority { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vmem-rota-auth-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--vmem-glass-l1-bg);
  border-radius: 8px;
  font-size: 12px;
  color: var(--t2);
}
.vmem-rota-auth-row i { width: 14px; text-align: center; }
.vmem-rota-auth-row code {
  background: var(--vmem-glass-l1-bg);
  padding: 1px 6px; border-radius: 4px;
  font-size: 11px; color: var(--gold);
}

/* ─── Shift Settings ───────────────────────────────────────────── */
.vmem-shifts-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.vmem-shift-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.vmem-shift-row .vmem-input { padding: 7px 10px; font-size: 12px; }
.vmem-shift-row-remove {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--t3); cursor: pointer;
  transition: all .2s ease;
}
.vmem-shift-row-remove:hover { background: rgba(255,72,72,.12); color: var(--red); border-color: rgba(255,72,72,.3); }
.vmem-guardrails-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

/* Radio pill — used in hours-adj modal */
.vmem-radio-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px; color: var(--t2);
  transition: all .2s ease;
}
.vmem-radio-pill input { margin: 0; cursor: pointer; }
.vmem-radio-pill:has(input:checked) {
  background: var(--gdim);
  border-color: var(--gglow);
  color: var(--gold);
}
.vmem-radio-pill[data-type="penalty"]:has(input:checked) {
  background: rgba(255,72,72,.10);
  border-color: rgba(255,72,72,.4);
  color: var(--red);
}

/* ─── Credits slab ─────────────────────────────────────────────── */
.vmem-credits-list { display: flex; flex-direction: column; gap: 10px; }
.vmem-credits-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--vmem-glass-l2-bd);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
}
.vmem-credits-info .vmem-credits-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.vmem-credits-info .vmem-credits-meta { font-size: 12px; color: var(--t3); }
.vmem-credits-num {
  font-family: var(--disp); font-size: 22px; font-weight: 700;
  color: var(--gold); letter-spacing: 1px;
}

@media (max-width: 820px) {
  .vmem-rota-grid { grid-template-columns: 1fr; }
  .vmem-shift-row { grid-template-columns: 1fr 1fr; }
  .vmem-shift-row > *:last-child { grid-column: 1 / -1; }
  .vmem-guardrails-grid { grid-template-columns: 1fr; }
  .vmem-credits-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ─── Leave Queue ──────────────────────────────────────────────── */
.vmem-leave-list { display: flex; flex-direction: column; gap: 10px; }
.vmem-leave-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--vmem-glass-l2-bd);
  border-left: 4px solid var(--gold);
  border-radius: 14px;
  transition: background .25s ease, transform .25s var(--ease-cinema);
}
.vmem-leave-row:hover { background: var(--vmem-glass-l2-bg); transform: translateX(3px); }
.vmem-leave-row.escalated { border-left-color: var(--amber); }
.vmem-leave-row .vmem-vol-av {
  width: 42px; height: 42px;
  font-size: 12px;
}
.vmem-leave-info { min-width: 0; }
.vmem-leave-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.vmem-leave-meta { font-size: 12px; color: var(--t3); display: flex; flex-wrap: wrap; gap: 12px; }
.vmem-leave-meta i { color: var(--t4); margin-right: 4px; }
.vmem-leave-actions { display: flex; gap: 6px; }
.vmem-leave-decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.vmem-leave-req-card {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.vmem-leave-req-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.vmem-leave-req-meta { font-size: 12px; color: var(--t3); line-height: 1.6; margin-bottom: 8px; }
.vmem-leave-req-notes { font-size: 12px; color: var(--t2); font-style: italic; line-height: 1.5; }
.vmem-leave-hr-panel {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  font-size: 12px;
  color: var(--t2);
  line-height: 1.6;
}
.vmem-leave-hr-panel strong { color: var(--gold); }
.vmem-leave-hr-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.vmem-leave-hr-row:last-child { border-bottom: none; }

/* ─── Discipline / Probation lists ─────────────────────────────── */
.vmem-discipline-list, .vmem-probation-list { display: flex; flex-direction: column; gap: 10px; }
.vmem-discipline-card, .vmem-probation-card {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--vmem-glass-l2-bd);
  border-radius: 14px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
.vmem-discipline-card { border-left: 4px solid var(--red); }
.vmem-probation-card  { border-left: 4px solid #818cf8; }
.vmem-case-hd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.vmem-case-name { font-size: 14px; font-weight: 600; color: var(--text); }
.vmem-case-meta { font-size: 12px; color: var(--t3); line-height: 1.5; }
.vmem-sig-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.vmem-sig-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 11px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1px;
}
.vmem-sig-pill.signed   { background: rgba(76,214,87,.12); color: var(--green); border: 1px solid rgba(76,214,87,.3); }
.vmem-sig-pill.pending  { background: var(--vmem-glass-l2-bg); color: var(--t3); border: 1px solid var(--border); }
.vmem-case-actions { display: flex; flex-direction: column; gap: 6px; }
/* Unsubmitted-shift date chips (Volunteer Unsubmitted Shifts slab) */
.vmem-unsub-pill {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 6px 11px;
  border-radius: 11px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: rgba(255,72,72,.10); color: var(--red);
  border: 1px solid rgba(255,72,72,.28);
}
.vmem-unsub-pill i { font-size: 10px; opacity: .8; }
.vmem-unsub-date { font-weight: 700; color: var(--text); }
.vmem-unsub-time { color: var(--red); opacity: .92; }
.vmem-unsub-time::before { content: "\00b7"; margin-right: 6px; opacity: .5; }
.vmem-unsub-flag { font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,72,72,.22); color: #ffd0d0; padding: 1px 6px; border-radius: 8px; }
.vmem-case-actions .btn { min-width: 130px; justify-content: center; padding: 6px 12px; font-size: 11px; }

.vmem-discipline-detail, .vmem-probation-detail {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

@media (max-width: 820px) {
  .vmem-leave-row { grid-template-columns: 1fr; gap: 10px; }
  .vmem-leave-actions { flex-wrap: wrap; }
  .vmem-leave-decision-grid { grid-template-columns: 1fr; }
  .vmem-discipline-card, .vmem-probation-card { grid-template-columns: 1fr; }
}

/* ─── Recruitment Consults ────────────────────────────────────── */
.vmem-recruit-list { display: flex; flex-direction: column; gap: 10px; }
.vmem-recruit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--vmem-glass-l2-bd);
  border-left: 4px solid var(--gold);
  border-radius: 14px;
}
.vmem-recruit-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.vmem-recruit-meta { font-size: 12px; color: var(--t3); display: flex; flex-wrap: wrap; gap: 12px; }
.vmem-recruit-detail {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
}

/* ─── Broadcasts ───────────────────────────────────────────────── */
.vmem-broadcast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.vmem-bc-history { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vmem-bc-row {
  padding: 12px 14px;
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.vmem-bc-row-hd {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--t3); margin-bottom: 4px;
  font-family: var(--mono);
}
.vmem-bc-row-subject {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 4px;
}
.vmem-bc-row-msg {
  font-size: 12px; color: var(--t2); line-height: 1.5;
  white-space: pre-wrap;
}

/* ─── Communications directory ─────────────────────────────────── */
.vmem-comms-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vmem-comms-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background .25s ease;
}
.vmem-comms-row:hover { background: var(--vmem-glass-l2-bg); }
.vmem-comms-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gdim);
  border: 1px solid var(--gglow);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--gold);
  overflow: hidden;
}
.vmem-comms-name { font-size: 13px; font-weight: 600; color: var(--text); }
.vmem-comms-meta { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* ─── Audit Log ────────────────────────────────────────────────── */
.vmem-audit-list { display: flex; flex-direction: column; gap: 6px; }
.vmem-audit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  background: var(--vmem-glass-l1-bg);
  border-radius: 8px;
  font-size: 12px;
  color: var(--t2);
}
.vmem-audit-action {
  font-family: var(--mono); font-weight: 600;
  color: var(--gold); letter-spacing: 0.5px;
  font-size: 11px;
}
.vmem-audit-meta { font-size: 11px; color: var(--t3); margin-top: 2px; }
.vmem-audit-time { font-family: var(--mono); font-size: 11px; color: var(--t4); white-space: nowrap; }

@media (max-width: 820px) {
  .vmem-broadcast-grid { grid-template-columns: 1fr; }
  .vmem-recruit-row { grid-template-columns: 1fr; }
}

/* ─── Welfare drawer (right side slide-in) ─────────────────────── */
.welfare-drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 8500;
}
.welfare-drawer-overlay.open { display: block; }
.welfare-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(540px, 100vw);
  background: linear-gradient(180deg, var(--lift) 0%, var(--base) 100%);
  border-left: 1px solid var(--gglow);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
  z-index: 9000;
  transform: translateX(100%);
  transition: transform .35s var(--ease-cinema);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.welfare-drawer.open { transform: translateX(0); }
.welfare-drawer-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--vmem-glass-l1-bg);
}
.welfare-drawer-title {
  font-family: var(--disp); font-size: 15px; font-weight: 700;
  letter-spacing: 2px; color: var(--gold);
}
.welfare-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 22px;
}
.welfare-dr-head { margin-bottom: 16px; }
.welfare-dr-name { font-family: var(--disp); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.welfare-dr-meta { font-size: 11px; color: var(--t3); font-family: var(--mono); letter-spacing: 1px; }
.welfare-dr-section {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.welfare-dr-section-lbl {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--t3);
  margin-bottom: 8px;
}
.welfare-dr-note {
  font-size: 13px; color: var(--text); line-height: 1.55;
  margin-bottom: 8px;
}
.welfare-followup {
  padding: 10px 12px;
  background: var(--vmem-glass-l1-bg);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  margin-bottom: 8px;
}
.welfare-fu-meta { font-family: var(--mono); font-size: 10px; color: var(--t3); margin-bottom: 4px; letter-spacing: .5px; }
.welfare-fu-text { font-size: 12px; color: var(--t2); line-height: 1.55; }
.welfare-dr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.welfare-dr-actions .btn { flex: 1; min-width: 140px; justify-content: center; }

/* Drawer-local toast — sits above drawer content so it doesn't get hidden
   behind the slide-in panel like the page-level toast did. */
.welfare-drawer-toast {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 80px);
  padding: 11px 22px;
  background: rgba(76,214,87,.96);
  color: var(--void);
  border-radius: 22px;
  font-size: 12px;
  font-weight: 600;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: transform .32s var(--ease-cinema), opacity .25s ease;
  max-width: calc(100% - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.welfare-drawer-toast.show { transform: translate(-50%, 0); opacity: 1; }
.welfare-drawer-toast.err { background: rgba(255,72,72,.96); color: #fff; }

@media (max-width: 540px) {
  .welfare-drawer-body { padding: 16px; }
  .welfare-dr-actions .btn { min-width: 100%; }
}

/* ─── Welfare folders (Gmail-style) ────────────────────────────── */
.welfare-mailbox { padding: 0; overflow: hidden; }
.welfare-folders {
  display: flex; align-items: center; gap: 4px;
  padding: 14px 14px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.welfare-folder {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px 12px;
  font-family: var(--body);
  font-size: 13px; font-weight: 500;
  color: var(--t3);
  cursor: pointer;
  transition: color .2s ease, border-color .25s var(--ease-cinema);
  margin-bottom: -1px;
}
.welfare-folder i { font-size: 13px; opacity: .8; }
.welfare-folder:hover { color: var(--gold); }
.welfare-folder.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.welfare-folder.active i { opacity: 1; }
.welfare-folder-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px;
  padding: 0 7px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--t2);
}
.welfare-folder.active .welfare-folder-count {
  background: var(--gold); color: var(--void); border-color: var(--gold);
}
.welfare-folder-count.amber { background: rgba(245,158,11,.12); color: var(--amber); border-color: rgba(245,158,11,.3); }
.welfare-folder.active .welfare-folder-count.amber { background: var(--amber); color: var(--void); }
.welfare-folder-spacer { flex: 1; min-width: 16px; }
.welfare-folder-filter { flex: 0 0 130px; }
.vmem-welfare-list { padding: 0 14px 14px; }

@media (max-width: 540px) {
  .welfare-folders { padding: 8px 8px 0; gap: 2px; }
  .welfare-folder { padding: 8px 10px 10px; font-size: 12px; }
  .welfare-folder-spacer { width: 100%; }
  .welfare-folder-filter { flex: 1; }
}

/* ─── Welfare Inbox ────────────────────────────────────────────── */
.vmem-welfare-list { display: flex; flex-direction: column; gap: 10px; }
.vmem-welfare-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--vmem-glass-l2-bd);
  border-radius: 14px;
  border-left-width: 4px;
  transition: border-color .25s ease, background .25s ease;
}
.vmem-welfare-row:hover { background: var(--vmem-glass-l2-bg); }
.vmem-welfare-row.sev-critical { border-left-color: var(--red); }
.vmem-welfare-row.sev-high     { border-left-color: var(--amber); }
.vmem-welfare-row.sev-medium   { border-left-color: var(--gold); }
.vmem-welfare-row.sev-low      { border-left-color: var(--green); }
.vmem-welfare-row.resolved     { opacity: .55; border-left-color: var(--t4); }

.vmem-welfare-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gdim);
  border: 1px solid var(--gglow);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--gold);
  overflow: hidden;
  flex-shrink: 0;
}
.vmem-welfare-body { min-width: 0; }
.vmem-welfare-hd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 5px;
}
.vmem-welfare-name { font-size: 14px; font-weight: 600; color: var(--text); }
.vmem-welfare-source-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--t2);
}
.vmem-welfare-sev-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
}
.vmem-welfare-sev-pill.critical { background: rgba(255,72,72,.12); color: var(--red); border: 1px solid rgba(255,72,72,.3); }
.vmem-welfare-sev-pill.high     { background: rgba(245,158,11,.12); color: var(--amber); border: 1px solid rgba(245,158,11,.3); }
.vmem-welfare-sev-pill.medium   { background: rgba(240,200,50,.12); color: var(--gold); border: 1px solid var(--gglow); }
.vmem-welfare-sev-pill.low      { background: rgba(76,214,87,.12); color: var(--green); border: 1px solid rgba(76,214,87,.3); }
.vmem-welfare-note {
  font-size: 13px; color: var(--t2); line-height: 1.55;
  margin-bottom: 6px; word-wrap: break-word;
}
.vmem-welfare-meta {
  font-family: var(--mono); font-size: 10px; color: var(--t4);
  letter-spacing: .5px;
}
.vmem-welfare-actions {
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.vmem-welfare-actions .btn {
  padding: 6px 11px; font-size: 11px; min-width: 100px;
  justify-content: center;
}
.vmem-welfare-empty {
  text-align: center;
  padding: 40px 20px;
}
.vmem-welfare-empty i { font-size: 32px; color: var(--green); opacity: 0.5; margin-bottom: 12px; }
.vmem-welfare-empty-title { font-size: 14px; color: var(--t2); margin-bottom: 4px; }
.vmem-welfare-empty-sub { font-size: 12px; color: var(--t4); }

/* ─── Settings ─────────────────────────────────────────────────── */
.vmem-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.vmem-setting-row:last-child { border-bottom: none; }
.vmem-setting-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.vmem-setting-sub {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.55;
  max-width: 560px;
}
.vmem-toggle {
  width: 56px; height: 30px;
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--border);
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .25s ease, border-color .25s ease;
}
.vmem-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--t3);
  transition: transform .3s var(--ease-cinema), background .25s ease;
}
.vmem-toggle.on { background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.45); }
.vmem-toggle.on .vmem-toggle-knob {
  transform: translateX(26px);
  background: var(--amber);
  box-shadow: 0 0 8px rgba(245,158,11,.5);
}
.vmem-away-history { margin-top: 10px; max-height: 200px; overflow-y: auto; }
.vmem-away-history-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--vmem-glass-l1-bg);
  border-radius: 8px;
  font-size: 11px;
  color: var(--t2);
  margin-bottom: 6px;
  font-family: var(--mono);
}

/* ─── Form labels ──────────────────────────────────────────────── */
.vmem-flbl {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 6px;
}
.ig-row { margin-bottom: 14px; }

/* ─── Modal overrides ──────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(12px);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex !important; }
.vmem-modal-box {
  background: linear-gradient(180deg, var(--lift) 0%, var(--base) 100%);
  border: 1px solid var(--gglow);
  border-radius: 18px;
  padding: 32px;
  width: 100%;
  max-width: 520px;
  position: relative;
  animation: vmemModalIn .25s var(--ease-cinema) both;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
@keyframes vmemModalIn {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.modal-title {
  font-family: var(--disp);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--gold);
  margin-bottom: 6px;
  padding-right: 66px;
}
.modal-sub {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.55;
  margin-bottom: 18px;
  padding-right: 66px;
}
/* Scoped to .vmem-modal-box so this out-specifies the shared
   `body .modal-close { position: relative }` in responsive.css (0,2,0 > 0,1,1).
   Without the .vmem-modal-box prefix the shared rule cancelled this absolute
   placement and the X fell into normal flow as the first child, colliding with
   the modal title (Volunteer Probation Review). Scoped, not global, so no other
   portal modal — incl. flex-header ones like safeguarding — is affected. */
.vmem-modal-box .modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  background: var(--vmem-glass-l2-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t2);
  font-size: 14px;
  transition: all .2s ease;
}
.vmem-modal-box .modal-close:hover { background: rgba(255,72,72,.14); color: var(--red); border-color: rgba(255,72,72,.4); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ─── Buttons (local) ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--vmem-glass-l2-bg);
  color: var(--t2);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s ease;
  text-decoration: none;
}
.btn-sm { padding: 7px 13px; font-size: 12px; }
.btn-gold { background: var(--gdim); border-color: var(--gglow); color: var(--gold); }
.btn-gold:hover { background: rgba(240,200,50,.22); border-color: var(--gold); color: var(--gold2); }
.btn-outline { background: transparent; border-color: var(--border); }
.btn-outline:hover { background: var(--vmem-glass-l2-bg); border-color: var(--gglow); }

/* ─── Toast ────────────────────────────────────────────────────── */
.vmem-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 12px 22px;
  background: rgba(76,214,87,.95);
  color: var(--void);
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: transform .35s var(--ease-cinema), opacity .25s ease;
  max-width: 90vw;
}
.vmem-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.vmem-toast.error { background: rgba(255,72,72,.95); color: var(--text); }

/* ─── Diag panel for modals (mirror of .lc-diag elsewhere) ─────── */
.lc-diag {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--vmem-glass-l1-bg);
  font-size: 12px;
  line-height: 1.55;
}

/* ═══ MOBILE (≤820px) ═══════════════════════════════════════════ */
/* Bridge hero ONLY shows on the Overview slab. The renderer / canvas is
   expensive to keep visible across every slab and visually competes with
   slab content. Body class .vmem-non-overview-slab is toggled by the slab
   nav handler. */
body.vmem-non-overview-slab .vmem-bridge-hero,
body.vmem-non-overview-slab #vmem-particles {
  display: none !important;
}

/* ── the rail goes horizontal WHEN THE SHELL COLLAPSES, not 200px later ──
   css/dc-vmem-board.css collapses .vb-shell to a single column at 1020 (the
   design's own breakpoint). These rules used to sit at 820, which left a dead
   band from 821 to 1020 where the rail was a 609px-tall vertical column
   stacked on top of the board. Measured, not guessed: canvas top 1058px at a
   1000px viewport, against 89px side by side. Raising these rules to 1020
   closes that band, and the same measurement then reads 187px.

   `.vmem-rail.vb-rail` rather than `.vmem-rail`: css/dc-vmem-board.css loads
   AFTER this file and its `.vb-rail{position:static}` would otherwise win on
   source order and strip the sticky below 820, where this board has always had
   it. Two classes beat one, so the design file stays byte-identical to the
   export and the board keeps the better behaviour. The design sets `static`
   only because its own rail has no mobile sticky treatment to preserve.

   This is the board's own horizontal strip, not the design's `.vb-railscroll`:
   with 27 sections, hiding the band labels and letting the items run nowrap is
   what keeps every section reachable. See the note at the rail in
   volunteer-board.html for why .vb-railscroll is not applied. */
/* ── the KPI dock gets the design's ladder, not the design's count ──────
   css/dc-vmem-board.css draws .vb-kdeck as four across, stepping to two at
   1180 and one at 640. Four does not fit this dock: it holds SIX counts, so a
   fixed four leaves an orphan row of two. The ported class is therefore not
   applied here.

   The design's ladder is right even though its number is not. Measured on the
   deployed board, six across gives a card 162px wide at 1440 but 105px at 1100
   and 119px at 900, and it only drops to two columns at 820. A 105px card
   cannot hold a figure, a label and a trend, which is the exact thing the
   design's own comment on the deck warns about. Stepping to three at the
   design's own 1180 breakpoint gives roughly 240px instead of 105px. */
@media (max-width: 1180px) {
  .vmem-kpi-dock { grid-template-columns: repeat(3, 1fr); }
}

/* ── skeleton rows ─────────────────────────────────────────────────────
   .vb-skel in css/dc-vmem-board.css is the design's shimmer and carries no
   box of its own, so a table cell needs to give it one. */
.vmem-skel-line { height: 13px; margin: 4px 0; }
.vmem-skel-line.short { width: 42%; }

@media (max-width: 1020px) {
  .vmem-body { flex-direction: column; }
  /* The strip moved INSIDE the card on 2026-07-30. The rail card from
     design-source/VMEM Board.dc.html now sits between .vmem-rail and the
     bands, so laying .vmem-rail out as a flex row would lay out the CARD, one
     child, and the bands would stay stacked inside it. The element that goes
     horizontal is the band container. */
  .vmem-rail.vb-rail {
    width: 100%;
    border-right: none;
    padding: 0;
    position: sticky;
    top: 64px;
    z-index: 90;
  }
  .vmem-rail.vb-rail .vb-railcard { padding: 10px; }
  .vmem-rail.vb-rail .vb-railhead { display: none; }
  .vmem-rail.vb-rail .vb-railscroll {
    flex-direction: row;
    gap: 10px;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .vmem-rail-section { margin-bottom: 0; flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
  .vmem-rail-section-lbl { display: none; }
  .vmem-rail-item { padding: 9px 12px; font-size: 12px; white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; border-radius: 8px; }
  .vmem-rail-item.active { border-left: none; border-bottom-color: var(--gold); background: var(--gdim); }
  .vmem-rail-item .vmem-rail-soon { display: none; }
}

@media (max-width: 820px) {
  /* On mobile, give caption clearance and shrink the bridge so orbiting
     nodes don't bleed into the KPI dock + caption panel. */
  .vmem-bridge-hero { height: clamp(280px, 44vh, 380px); }
  /* The caption already has its own row; only the margin changes here. */
  .vmem-bridge-caption { margin: 0 12px 12px; max-width: calc(100% - 24px); }
  .vmem-bridge-caption-title { font-size: 16px; }
  .vmem-pulse-text { max-width: 100%; }

  .vmem-hdr { padding: 12px 16px; gap: 10px; }
  .vmem-hdr-title-major { font-size: 14px; letter-spacing: 3px; }
  .vmem-hdr-title-minor { display: none; }
  .vmem-hdr-divider { display: none; }
  .vmem-user-name { display: none; }
  .vmem-brand-logo { height: 26px; }

  .vmem-canvas { padding: 16px 14px 80px; }
  .vmem-bridge-hero { height: clamp(320px, 50vh, 460px); }
  .vmem-bridge-caption { margin: 0 16px 14px; }
  .vmem-bridge-caption-title { font-size: 20px; }
  .vmem-bridge-caption-pulse { font-size: 10px; max-width: calc(100vw - 80px); }
  .vmem-pulse-text { max-width: calc(100vw - 120px); }

  .vmem-kpi-dock { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .vmem-kpi-num { font-size: 26px; }
  .vmem-overview-grid { grid-template-columns: 1fr; }
  .vmem-card-tall { min-height: 0; }

  .vmem-intake-card { grid-template-columns: 1fr; gap: 12px; }
  .vmem-intake-card > * { width: 100%; }

  .vmem-setting-row { flex-direction: column; gap: 12px; }
}

@media (max-width: 540px) {
  .vmem-hdr { padding: 10px 12px; }
  .vmem-back-btn { width: 32px; height: 32px; }
  .vmem-icon-btn { width: 32px; height: 32px; }
  .vmem-away-toggle { padding: 6px 10px; font-size: 11px; }
  .vmem-bridge-caption-eyebrow { font-size: 9px; }
  .vmem-bridge-caption-title { font-size: 17px; letter-spacing: 1.5px; }
  .vmem-kpi-num { font-size: 22px; }
  .vmem-kpi-lbl { font-size: 10px; }
}

/* ──────────────────────────────────────────────────────────────────
   Coordinator network — peer directory, VMEM contact card,
   training-detail modal helpers. Shared between Coordinator board
   and VMEM board (My Coordinators slab).
   ────────────────────────────────────────────────────────────────── */

.coord-peer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 14px;
}
.coord-peer-card {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--vmem-glass-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .25s ease, border-color .25s ease;
}
.coord-peer-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.coord-peer-card.is-me { border: 1px solid var(--gold); background: rgba(212,175,55,.08); }
.coord-peer-hd { display: flex; align-items: center; gap: 12px; }
.coord-peer-id { flex: 1; min-width: 0; }
.coord-peer-name {
  font-family: var(--disp); font-weight: 600;
  font-size: 15px; color: var(--text);
  word-break: break-word; line-height: 1.3;
}
.coord-peer-dept { font-size: 12px; color: var(--t3); margin-top: 4px; }
.coord-peer-body { display: flex; flex-direction: column; gap: 6px; }
.coord-peer-line { font-size: 12px; color: var(--t2); display: flex; align-items: center; gap: 8px; }
.coord-peer-line a { color: var(--gold); text-decoration: none; }
.coord-peer-line a:hover { text-decoration: underline; }
.coord-peer-actions { display: flex; gap: 8px; margin-top: 4px; }
.coord-peer-presence { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t3); }
.coord-peer-presence .pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--t4, rgba(255,255,255,.2)); display: inline-block; }
.coord-peer-presence.online .pdot { background: var(--green); box-shadow: 0 0 8px rgba(76,214,87,.6); }

.coord-vmem-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px;
  flex-wrap: wrap;
}
.coord-vmem-info { flex: 1; min-width: 260px; }
.coord-vmem-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.coord-vmem-name {
  font-family: var(--disp); font-weight: 700;
  font-size: 22px; color: var(--text);
  margin-bottom: 10px;
}
.coord-vmem-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--t2); margin-bottom: 14px; }
.coord-vmem-meta a { color: var(--gold); text-decoration: none; }
.coord-vmem-meta a:hover { text-decoration: underline; }
.coord-vmem-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.coord-td-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0 14px;
}
.coord-td-table { width: 100%; }
.coord-td-table th, .coord-td-table td { padding: 8px 10px; font-size: 12.5px; }
.coord-td-title-cell { font-weight: 600; color: var(--text); }
.ac-cell-click { cursor: pointer; }
.ac-cell-click:hover { background: var(--vmem-glass-l1-bg); }

@media (max-width: 540px) {
  .coord-peer-grid { grid-template-columns: 1fr; padding: 10px; }
  .coord-vmem-card { padding: 14px; gap: 14px; }
  .coord-vmem-name { font-size: 18px; }
}

/* ──────────────────────────────────────────────────────────────────
   Card-grid layout for Training Compliance + My Team + Compliance matrix.
   Replaces the wide horizontal-scroll matrix. Each user is a card with:
     • header  — avatar + name + dept + status pill
     • body    — clickable dept-relevant training pills
     • foot    — counts + "View full record" button
   Used by both Coordinator board and VMEM compliance matrix.
   ────────────────────────────────────────────────────────────────── */
.ac-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ac-summary-pip { padding: 7px 12px; font-size: 12px; }
.ac-summary-pip strong { font-weight: 700; margin-left: 4px; }
.ac-summary-meta { margin-left: auto; }

.ac-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  padding: 14px;
}

.ac-user-card {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--vmem-glass-border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cvIn .38s cubic-bezier(.16,1,.3,1) both;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ac-user-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.42);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}

.ac-user-card-hd {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ac-user-card-id { flex: 1; min-width: 0; }
.ac-user-card-name {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  word-break: break-word;
  line-height: 1.3;
}
.ac-user-card-meta {
  font-size: 11.5px;
  color: var(--t3);
  margin-top: 3px;
  word-break: break-word;
}
.ac-user-card-status {
  flex-shrink: 0;
  align-self: flex-start;
}

.ac-user-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255,255,255,.08);
  padding-top: 12px;
}

.ac-train-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--t2);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  max-width: 100%;
}
.ac-train-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.ac-train-pill:hover { transform: translateY(-1px); }
.ac-train-pill i { font-size: 10px; flex-shrink: 0; }
.ac-train-pill.passed       { background: rgba(76,214,87,.14);   border-color: rgba(76,214,87,.42);   color: #c5f0c9; }
.ac-train-pill.in-progress  { background: rgba(245,158,11,.16);  border-color: rgba(245,158,11,.45);  color: #ffd99b; }
.ac-train-pill.failed,
.ac-train-pill.expired      { background: rgba(255,72,72,.16);   border-color: rgba(255,72,72,.45);   color: #ffb5be; }
.ac-train-pill.not-started  { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--t3); }

.ac-user-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-wrap: wrap;
}

@media (max-width: 540px) {
  .ac-card-grid { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .ac-summary-strip { padding: 10px; gap: 8px; }
  .ac-summary-meta { width: 100%; margin-left: 0; }
  .ac-user-card { padding: 12px; }
  .ac-train-pill span { max-width: 140px; }
}

/* ──────────────────────────────────────────────────────────────────
   Messages slab — full-bleed mount for vmem-coord-chat in 'full' mode.
   The chat module teleports its root into #vmcc-full-mount when the
   user clicks the Messages rail item or hits Expand inside the sidebar.
   ────────────────────────────────────────────────────────────────── */
.vmem-slab.vmem-slab-flush { padding: 0; }
.vmcc-full-mount {
  display: block;
  width: 100%;
  min-height: 540px;
}
.vmem-slab.vmem-slab-flush:not(.active) .vmcc-full-mount { display: none; }

/* ──────────────────────────────────────────────────────────────────
   Volunteer detail modal (shared between Coordinator + VMEM boards).
   Opens when any My Team / Training / Probation / Leave card is clicked.
   ────────────────────────────────────────────────────────────────── */
.vd-hero {
  display: flex; align-items: center; gap: 14px; padding: 6px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap;
}
.vd-id { flex: 1; min-width: 240px; }
.vd-name { font-family: var(--disp); font-size: 18px; font-weight: 600; color: var(--text); word-break: break-word; }
.vd-meta { font-size: 12px; color: var(--t3); margin-top: 3px; }
.vd-meta a { color: var(--gold); text-decoration: none; }
.vd-meta a:hover { text-decoration: underline; }

.vd-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; padding: 14px 0;
}
.vd-stat {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--vmem-glass-border);
  border-radius: 10px; padding: 10px 12px;
}
.vd-stat-lbl { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.vd-stat-val { font-family: var(--mono); font-size: 13.5px; color: var(--text); margin-top: 4px; word-break: break-word; }

.vd-section { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); }
.vd-section-hd { font-family: var(--disp); font-size: 13.5px; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.vd-section-bd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vd-welfare-row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; width: 100%; padding: 4px 0; }

.ac-user-card-click { cursor: pointer; }
.ac-user-card-click:active { transform: translateY(0) !important; }

@media (max-width: 540px) {
  .vd-hero { gap: 10px; }
  .vd-id { min-width: 0; }
}

/* ──────────────────────────────────────────────────────────────────
   Leave calendar — shared between Coordinator + VMEM boards. Month
   grid with approved/pending dot indicators per day. Reads from the
   same `leaveRequests` SOT both boards already listen to.
   ────────────────────────────────────────────────────────────────── */
.lvc-nav { display: flex; align-items: center; gap: 6px; }
.lvc-month-label { font-family: var(--disp); font-size: 13px; color: var(--text); padding: 0 8px; min-width: 130px; text-align: center; }

.lvc-grid { padding: 6px 0; }
.lvc-weekhead {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 4px;
  font-family: var(--mono); font-size: 11px; color: var(--t3);
  letter-spacing: .08em; text-transform: uppercase;
}
.lvc-wh { padding: 4px 6px; text-align: center; }
.lvc-days {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.lvc-day {
  background: var(--vmem-glass-l1-bg);
  border: 1px solid var(--vmem-glass-border);
  border-radius: 8px;
  min-height: 68px;
  padding: 6px 6px 4px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  transition: border-color .25s cubic-bezier(.16,1,.3,1),
              background .25s cubic-bezier(.16,1,.3,1),
              transform .25s cubic-bezier(.16,1,.3,1),
              box-shadow .25s cubic-bezier(.16,1,.3,1);
  opacity: 0;
  transform: translateY(6px) scale(.97);
  animation: lvcCellIn .42s cubic-bezier(.16,1,.3,1) forwards;
  overflow: hidden;
}
.lvc-day:hover { transform: translateY(-1px) scale(1); border-color: rgba(212,175,55,.4); box-shadow: 0 4px 12px rgba(0,0,0,.18); }

@keyframes lvcCellIn { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Holiday cell — distinct red-on-cream tint with icon + name. */
.lvc-day-holiday {
  background: linear-gradient(135deg, rgba(255,72,72,.10), rgba(255,72,72,.04));
  border-color: rgba(255,72,72,.42);
}
.lvc-day-holiday .lvc-day-n { color: #ffb5be; }
.lvc-day-holiday:hover { border-color: rgba(255,72,72,.7); box-shadow: 0 4px 14px rgba(255,72,72,.18); }
.lvc-day-hol-icon {
  position: absolute; top: 4px; left: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,72,72,.22);
  color: #ffb5be;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  animation: lvcHolPulse 2.6s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes lvcHolPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,72,72,.32); }
  50%      { box-shadow: 0 0 0 5px rgba(255,72,72,0); }
}
.lvc-day-hol-name {
  font-size: 9.5px; font-family: var(--body);
  color: rgba(255,200,200,.92); font-weight: 600;
  letter-spacing: .015em; line-height: 1.15;
  margin-top: 2px; overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lvc-day-today.lvc-day-holiday { border-color: var(--gold); background: linear-gradient(135deg, rgba(212,175,55,.14), rgba(255,72,72,.06)); }
.lvc-day-today.lvc-day-holiday .lvc-day-n { color: var(--gold); }

/* Today — gentle gold breathing animation. */
.lvc-day-today {
  animation: lvcCellIn .42s cubic-bezier(.16,1,.3,1) forwards,
             lvcTodayPulse 3s cubic-bezier(.16,1,.3,1) infinite .6s;
}
@keyframes lvcTodayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,.32); }
  50%      { box-shadow: 0 0 0 4px rgba(212,175,55,0); }
}

@media (prefers-reduced-motion: reduce) {
  .lvc-day, .lvc-day-today, .lvc-day-hol-icon {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.lvc-day-empty { background: transparent; border: 1px dashed rgba(255,255,255,.06); }
.lvc-day-n { font-family: var(--mono); font-size: 12px; color: var(--t2); font-weight: 600; }
.lvc-day-dots { display: flex; gap: 4px; align-items: center; }
.lvc-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.lvc-dot.approved { background: var(--green); box-shadow: 0 0 4px rgba(76,214,87,.5); }
.lvc-dot.pending  { background: var(--gold);  box-shadow: 0 0 4px rgba(212,175,55,.5); }
.lvc-day-ct {
  position: absolute; top: 4px; right: 4px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  background: rgba(255,255,255,.10); color: var(--text);
  padding: 1px 6px; border-radius: 999px;
}
.lvc-day-has { border-color: rgba(212,175,55,.42); }
.lvc-day-today { border-color: var(--gold); background: rgba(212,175,55,.08); }
.lvc-day-today .lvc-day-n { color: var(--gold); }

@media (max-width: 540px) {
  .lvc-day { min-height: 56px; padding: 4px; }
  .lvc-day-n { font-size: 11px; }
  .lvc-day-ct { font-size: 9.5px; padding: 0 5px; }
  .lvc-month-label { min-width: 110px; font-size: 12px; }
  .lvc-weekhead { font-size: 10px; }
  .lvc-day-hol-icon { width: 14px; height: 14px; font-size: 8px; top: 2px; left: 2px; }
  .lvc-day-hol-name { font-size: 8.5px; -webkit-line-clamp: 1; }
}
@media (max-width: 400px) {
  .lvc-day { min-height: 46px; }
  .lvc-day-hol-name { display: none; } /* icon + tooltip carry the meaning */
}

/* ── WS2-2a · Cross-Department Notes Mailbox ── */
.vmem-mailbox-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.vmem-mailbox-select,.vmem-mailbox-search{background:rgba(255,255,255,.05);border:1px solid var(--border,rgba(255,255,255,.2));color:var(--text,#f2f7ee);border-radius:9px;padding:9px 12px;font-size:13px;font-family:inherit;outline:none;}
.vmem-mailbox-search{flex:1;min-width:180px;}
.vmem-mailbox-list{display:flex;flex-direction:column;gap:10px;}
.vmem-mailbox-empty{color:var(--t3,rgba(242,247,238,.6));font-size:13px;padding:24px;text-align:center;}
.vmem-mailbox-card{background:rgba(255,255,255,.05);border:1px solid var(--border,rgba(255,255,255,.16));border-radius:12px;padding:14px 16px;}
.mbx-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11px;margin-bottom:7px;}
.mbx-dept{font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gold,#f0c832);}
.mbx-src{background:rgba(255,255,255,.07);border:1px solid var(--border,rgba(255,255,255,.18));border-radius:20px;padding:2px 9px;color:var(--t3,rgba(242,247,238,.7));font-weight:700;}
.mbx-ts{margin-left:auto;color:var(--t3,rgba(242,247,238,.55));font-family:monospace;}
.mbx-sev{border-radius:20px;padding:2px 9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;}
.mbx-sev-high,.mbx-sev-critical{background:rgba(255,72,72,.16);color:#ff8a9b;}
.mbx-sev-medium{background:rgba(245,158,11,.16);color:#ffd9a0;}
.mbx-sev-low{background:rgba(76,214,87,.14);color:#7CFFA0;}
.mbx-vol{font-size:13px;font-weight:700;color:var(--text,#f2f7ee);margin-bottom:5px;}
.mbx-vol i{color:var(--t3,rgba(242,247,238,.5));margin-right:6px;font-size:11px;}
.mbx-text{font-size:13px;line-height:1.5;color:var(--t2,rgba(242,247,238,.88));margin-bottom:10px;white-space:pre-wrap;}
.mbx-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.mbx-author{font-size:12px;font-style:italic;color:var(--t3,rgba(242,247,238,.62));}
.mbx-coord{background:rgba(240,200,50,.08);border:1px solid rgba(240,200,50,.3);color:var(--gold,#f0c832);border-radius:8px;padding:7px 10px;font-size:12px;font-weight:700;cursor:pointer;outline:none;}
.mbx-assigned{font-size:12px;font-weight:700;color:var(--green,#4cd657);display:inline-flex;align-items:center;gap:6px;}

/* ── WS2-2b · Live IT Daily Tasks mirror ── */
.vmem-it-tasks{display:flex;flex-direction:column;gap:7px;}
.vmem-it-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--border,rgba(255,255,255,.14));border-radius:9px;padding:8px 11px;}
.vmit-l{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.vmit-name{font-size:12.5px;font-weight:700;color:var(--text,#f2f7ee);}
.vmit-status{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;}
.vmit-status.active{color:var(--gold,#f0c832);}
.vmit-status.sub{color:var(--green,#4cd657);}
.vmit-status.auto{color:#ff8a9b;}
.vmit-pips{display:flex;gap:4px;}
.vmit-pip{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);}
.vmit-pip.on{background:var(--green,#4cd657);box-shadow:0 0 6px rgba(76,214,87,.5);}
.vmit-count{font-family:monospace;font-size:12px;font-weight:800;color:var(--t2,rgba(242,247,238,.85));min-width:30px;text-align:right;}

/* ── WS3 layer-2 · VMEM grant off-shift IT access ── */
.vmit-grant{margin-top:12px;padding-top:12px;border-top:1px solid var(--border,rgba(255,255,255,.14));}
.vmit-grant-hd{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gold,#f0c832);margin-bottom:8px;}
.vmit-grant-hd i{margin-right:6px;}
.vmit-grant-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.vmit-grant-row .vmem-mailbox-select{flex:1;min-width:120px;}
.vmit-grant-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(76,214,87,.14);border:1px solid rgba(76,214,87,.4);color:var(--green,#4cd657);border-radius:8px;padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;}
.vmit-grant-btn:hover{background:rgba(76,214,87,.22);}

/* Active grants list — sits above the grant form so VMEM can revoke any
   window in flight. Each row shows IT user name, remaining time, revoke btn. */
.vmit-active-list{margin-top:12px;padding:12px;border:1px solid rgba(240,200,50,.22);background:rgba(240,200,50,.04);border-radius:10px;}
.vmit-active-hd{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gold,#f0c832);margin-bottom:8px;}
.vmit-active-hd i{margin-right:6px;}
.vmit-active-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.18);margin-bottom:6px;}
.vmit-active-row:last-child{margin-bottom:0;}
.vmit-active-name{flex:1;font-size:13px;font-weight:700;color:#f2f7ee;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vmit-active-rem{font-size:11px;font-weight:700;color:#f0c832;font-variant-numeric:tabular-nums;padding:3px 8px;border-radius:5px;background:rgba(240,200,50,.10);border:1px solid rgba(240,200,50,.26);}
.vmit-revoke-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(232,64,64,.14);border:1px solid rgba(232,64,64,.4);color:#ff7878;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:800;cursor:pointer;flex-shrink:0;}
.vmit-revoke-btn:hover{background:rgba(232,64,64,.24);color:#ff5973;}
@media(max-width:540px){.vmit-active-row{flex-wrap:wrap;}.vmit-active-name{width:100%;}.vmit-revoke-btn{flex:1;justify-content:center;}}

/* ── Premium pass (2026-06-08) — appended last; CSS-only, no logic touched ── */
.vmem-glass-card,.vmem-kpi,.vmem-kpi-card{box-shadow:0 12px 34px -14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);}
.vmem-glass-card:hover,.vmem-kpi:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(0,0,0,.5);}
.vmem-table th{color:var(--gold) !important;background:rgba(0,0,0,.28);}
.vmem-table tbody tr:hover td{background:rgba(212,175,55,.06) !important;}