/* em.css - Emaar Procurement Intelligence Dashboard
   Dark theme, vibrant accents, premium feel */

/* === FONTS === */
@import url('https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800|jetbrains-mono:400,500&display=swap');

/* === CSS VARIABLES === */
:root {
  /* Core palette */
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-card: #1c2128;
  --bg-card-hover: #21262d;
  --bg-input: #0d1117;
  --bg-modal: rgba(0,0,0,0.7);

  /* Borders */
  --border-primary: #30363d;
  --border-subtle: #21262d;
  --border-focus: #58a6ff;

  /* Text */
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #484f58;
  --text-inverse: #0d1117;

  /* Brand tiers (Emaar) */
  --brand-address: #C5A55A;
  --brand-palace: #D4AF37;
  --brand-vida: #00BFA5;
  --brand-rove: #2196F3;

  /* Status / Severity */
  --status-critical: #f85149;
  --status-high: #d29922;
  --status-medium: #e3b341;
  --status-low: #3fb950;
  --status-info: #58a6ff;

  /* Evidence tiers */
  --tier-measured: #3fb950;
  --tier-benchmarked: #58a6ff;
  --tier-estimated: #d29922;
  --tier-illustrative: #484f58;
  --tier-asserted: #30363d;

  /* Chart colors */
  --chart-1: #58a6ff;
  --chart-2: #3fb950;
  --chart-3: #d29922;
  --chart-4: #f85149;
  --chart-5: #bc8cff;
  --chart-6: #00BFA5;

  /* Accent */
  --accent-primary: #58a6ff;
  --accent-glow: rgba(88,166,255,0.15);

  /* Lens accent colors */
  --lens-doctor: #9b59b6;
  --lens-forensics: #e74c3c;
  --lens-anomaly: #f39c12;
  --lens-contrarian: #00bcd4;
  --lens-empathy: #e91e63;

  /* Special */
  --bilateral-lockin: #484f58;
  --monopoly-infra: #2196F3;
  --buy-window: rgba(63,185,80,0.15);
  --collision-zone: rgba(248,81,73,0.10);

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-display: 'Inter', sans-serif;

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed: 60px;
  --topbar-height: 56px;

  /* Spacing scale (fluid) */
  --space-xs: clamp(4px, 0.25rem + 0.1vw, 6px);
  --space-sm: clamp(8px, 0.5rem + 0.2vw, 12px);
  --space-md: clamp(16px, 1rem + 0.4vw, 24px);
  --space-lg: clamp(24px, 1.5rem + 0.6vw, 36px);
  --space-xl: clamp(32px, 2rem + 0.8vw, 48px);

  /* Fluid typography scale */
  --text-xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.6875rem);
  --text-sm: clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem);
  --text-base: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --text-lg: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --text-xl: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --text-2xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
  --text-3xl: clamp(1.625rem, 1.4rem + 0.8vw, 2.25rem);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-medium: 250ms ease;
}

/* === RESET === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100dvh;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a { color: var(--accent-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === LAYOUT === */
.em-layout {
  display: flex;
  min-height: 100vh;
}

/* Prevent flex child from expanding beyond viewport when
   children (e.g. ticker tracks, wide SVGs) have intrinsic width */
.em-layout > div {
  min-width: 0;
  overflow: hidden;
}

/* --- SIDEBAR --- */
.em-sidebar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: var(--sidebar-width);
  height: 100dvh;
  background: var(--bg-secondary);
  border-inline-end: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width var(--transition-medium), transform var(--transition-medium);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.em-sidebar-header {
  padding-block: 16px;
  padding-inline: 20px;
  border-block-end: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar-height);
}

.em-sidebar-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.em-sidebar-brand {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.em-sidebar-brand-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.em-sidebar-brand-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.em-sidebar-nav {
  flex: 1;
  padding: 8px 0;
}

/* --- NAV GROUP (accordion) --- */
.em-nav-group {
  /* no extra spacing needed; dividers handle gaps */
}

.em-nav-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: 8px 4px;
  padding-inline: 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: color var(--transition-fast);
}

.em-nav-section:hover {
  color: var(--text-secondary);
}

.em-nav-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  margin-inline-start: 4px;
}

.em-nav-section[aria-expanded="true"] .em-nav-chevron {
  transform: rotate(0deg);
}

.em-nav-section[aria-expanded="false"] .em-nav-chevron {
  transform: rotate(-90deg);
}

.em-nav-group-items {
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.em-nav-group.collapsed .em-nav-group-items {
  max-height: 0 !important;
}

.em-nav-divider {
  block-size: 1px;
  background: var(--border-primary);
  margin-block: 4px;
  margin-inline: 12px;
}

.em-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 8px;
  padding-inline: 20px;
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  border-inline-start: 3px solid transparent;
}

.em-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.em-nav-item:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
}

.em-nav-item.active {
  color: var(--text-primary);
  background: var(--accent-glow);
  border-inline-start: 3px solid var(--accent-primary);
  font-weight: 600;
}

.em-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.em-nav-item.active .em-nav-icon { opacity: 1; }

.em-sidebar-footer {
  padding-block: 12px;
  padding-inline: 20px;
  border-block-start: 1px solid var(--border-primary);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- TOPBAR --- */
.em-topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: var(--sidebar-width);
  inset-inline-end: 0;
  height: var(--topbar-height);
  background: var(--bg-secondary);
  border-block-end: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-md);
  z-index: 90;
  transition: inset-inline-start var(--transition-medium);
}

.em-topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.em-topbar-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.em-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.em-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
}

/* --- MAIN CONTENT --- */
.em-content,
.em-main {
  margin-inline-start: var(--sidebar-width);
  margin-block-start: var(--topbar-height);
  padding: var(--space-md);
  flex: 1;
  min-height: calc(100dvh - var(--topbar-height));
  transition: margin-inline-start var(--transition-medium);
}

/* === FOCUS VISIBLE (keyboard accessibility) === */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* === SKIP LINK (accessibility) === */
.em-skip-link {
  position: absolute;
  inset-inline-start: -999px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-weight: 600;
  border-radius: 0 0 6px 0;
}
.em-skip-link:focus {
  inset-inline-start: 0;
}

/* === CARDS === */
.em-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: var(--space-md);
  container-type: inline-size;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.em-card:hover {
  background: var(--bg-card-hover);
}

.em-card--clickable {
  cursor: pointer;
}

.em-card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.em-card--critical { border-left: 3px solid var(--status-critical); }
.em-card--warning  { border-left: 3px solid var(--status-high); }
.em-card--info     { border-left: 3px solid var(--status-info); }
.em-card--success  { border-left: 3px solid var(--status-low); }

/* === METRICS === */
.em-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.em-metric__value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.em-metric__label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.em-metric__tier {
  margin-top: 4px;
}

/* === EVIDENCE TIER BADGES === */
.em-tier {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}

.em-tier--t1, .em-tier--measured {
  background: var(--tier-measured);
  color: var(--text-inverse);
}

.em-tier--t2, .em-tier--benchmarked {
  background: var(--tier-benchmarked);
  color: var(--text-inverse);
}

.em-tier--t3, .em-tier--estimated {
  background: var(--tier-estimated);
  color: var(--text-inverse);
}

.em-tier--t4, .em-tier--illustrative {
  background: var(--tier-illustrative);
  color: var(--text-primary);
}

.em-tier--t5, .em-tier--asserted {
  background: var(--tier-asserted);
  color: var(--text-secondary);
}

/* === BADGES === */
.em-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.em-badge--critical { background: rgba(248,81,73,0.15); color: var(--status-critical); }
.em-badge--high     { background: rgba(210,153,34,0.15); color: var(--status-high); }
.em-badge--medium   { background: rgba(227,179,65,0.15); color: var(--status-medium); }
.em-badge--low      { background: rgba(63,185,80,0.15); color: var(--status-low); }
.em-badge--info     { background: rgba(88,166,255,0.15); color: var(--status-info); }

/* === TABLES === */
.em-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.em-table th {
  text-align: start;
  padding: var(--space-sm) 14px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-block-end: 1px solid var(--border-primary);
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
}

.em-table td {
  padding: var(--space-sm) 14px;
  border-block-end: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.em-table tr:hover td {
  background: var(--bg-card-hover);
}

.em-table--compact th,
.em-table--compact td {
  padding: 6px 10px;
}

/* === BUTTONS === */
.em-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  padding-inline: 20px;
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font-body);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: linear-gradient(135deg, #C5A55A, #00BFA5);
  color: var(--text-inverse);
}

.em-btn:hover { opacity: 0.9; }
.em-btn:active { transform: scale(0.98); }

.em-btn--secondary {
  background: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}

.em-btn--secondary:hover {
  background: var(--bg-card);
  border-color: var(--text-secondary);
  opacity: 1;
}

.em-btn--icon {
  padding: 8px;
  width: 36px;
  height: 36px;
  justify-content: center;
}

.em-btn--small {
  padding: 6px 12px;
  font-size: 12px;
}

.em-btn--ghost {
  background: none;
  color: var(--text-secondary);
  padding: 6px 10px;
}

.em-btn--ghost:hover {
  color: var(--text-primary);
  background: var(--accent-glow);
  opacity: 1;
}

/* === GRIDS (intrinsic sizing: auto-fill + minmax avoids most breakpoints) === */
.em-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--space-md);
}

.em-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--space-md);
}

.em-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-md);
}

.em-grid-5 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 12px;
}

/* === CURRENCY CARD ENHANCEMENTS === */
.em-currency-card {
  cursor: pointer;
  padding: 14px;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  border: 1px solid var(--border-primary);
  border-left: 3px solid var(--border-primary);
  position: relative;
}

.em-currency-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.em-currency-card--up    { border-left-color: var(--status-low); }
.em-currency-card--down  { border-left-color: var(--status-critical); }
.em-currency-card--flat  { border-left-color: var(--text-muted); }
.em-currency-card--peg   { border-left-color: var(--status-info); }

.em-currency-card:hover.em-currency-card--up   { border-color: var(--status-low); }
.em-currency-card:hover.em-currency-card--down  { border-color: var(--status-critical); }
.em-currency-card:hover.em-currency-card--flat  { border-color: var(--text-muted); }
.em-currency-card:hover.em-currency-card--peg   { border-color: var(--status-info); }

.em-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.6;
  white-space: nowrap;
}

.em-pill--green  { background: rgba(63,185,80,0.12); color: var(--status-low); }
.em-pill--red    { background: rgba(248,81,73,0.12); color: var(--status-critical); }
.em-pill--gray   { background: rgba(139,148,158,0.12); color: var(--text-secondary); }
.em-pill--blue   { background: rgba(88,166,255,0.12); color: var(--status-info); }

/* === PROCUREMENT SIGNAL ALERTS === */
.em-signal-card {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.em-signal-card--buy {
  border-left: 3px solid var(--status-low);
}

.em-signal-card--hedge {
  border-left: 3px solid var(--status-critical);
}

.em-signal-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* === DETAIL PANEL CLOSE === */
.em-detail-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}

.em-detail-close:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

/* === CONTAINER QUERY: card metric stacking at narrow widths === */
@container (max-width: 200px) {
  .em-metric__value {
    font-size: var(--text-lg);
  }
  .em-metric__label {
    font-size: 0.5625rem;
  }
}

/* === CHART CONTAINERS === */
.em-chart-container {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: var(--space-md);
  position: relative;
  container-type: inline-size;
}

.em-chart-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-block-end: var(--space-md);
}

.em-sparkline {
  display: inline-block;
  vertical-align: middle;
}

/* === FORMS === */
.em-select {
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b949e'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.em-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* === HEADLINE METRICS BAR === */
.em-headline-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-end: var(--space-md);
}

.em-headline-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.em-headline-pill .em-tier {
  margin-left: 4px;
}

/* === PRIORITY ACTIONS === */
.em-action-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.em-action-item:hover {
  background: var(--bg-card-hover);
}

.em-action-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

.em-action-icon--critical {
  background: rgba(248,81,73,0.15);
  color: var(--status-critical);
}

.em-action-icon--warning {
  background: rgba(210,153,34,0.15);
  color: var(--status-high);
}

.em-action-icon--info {
  background: rgba(88,166,255,0.15);
  color: var(--status-info);
}

.em-action-body h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.em-action-body p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* === DATA FRESHNESS === */
.em-freshness {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 6px 12px;
  align-items: center;
  font-size: 13px;
}

.em-freshness-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.em-freshness-bar {
  height: 4px;
  background: var(--border-primary);
  border-radius: 2px;
  overflow: hidden;
}

.em-freshness-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--status-low);
}

.em-freshness-source {
  color: var(--text-muted);
  font-size: 12px;
}

/* === DETAIL PANEL === */
.em-detail-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: var(--space-md);
  margin-block-start: var(--space-md);
  position: relative;
}

.em-detail-panel h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-block-end: var(--space-md);
  color: var(--text-primary);
}

.em-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
}

.em-detail-row:last-child {
  border-bottom: none;
}

.em-detail-key {
  color: var(--text-secondary);
}

.em-detail-val {
  color: var(--text-primary);
  font-weight: 500;
}

/* === TOOLTIP (D3) === */
.em-tooltip {
  position: fixed;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-width: 280px;
  line-height: 1.5;
}

/* === MODAL / OVERLAY === */
.em-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-modal);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
}

.em-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.em-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.em-modal h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.em-modal-close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.em-modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
}

/* === UPLOAD ZONE === */
.em-upload-zone {
  border: 2px dashed var(--border-primary);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.em-upload-zone:hover,
.em-upload-zone.dragover {
  border-color: var(--accent-primary);
  background: var(--accent-glow);
}

.em-upload-zone p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 8px;
}

/* === SECTION HEADINGS === */
.em-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-block-end: var(--space-md);
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--border-subtle);
}

/* === HEATMAP CELL COLORS === */
.hhi-critical { background: rgba(248,81,73,0.25); color: var(--status-critical); }
.hhi-high     { background: rgba(210,153,34,0.20); color: var(--status-high); }
.hhi-medium   { background: rgba(227,179,65,0.15); color: var(--status-medium); }
.hhi-low      { background: rgba(63,185,80,0.15); color: var(--status-low); }
.hhi-lockin   { background: rgba(72,79,88,0.20); color: var(--text-muted); }
.hhi-monopoly { background: rgba(33,150,243,0.15); color: var(--monopoly-infra); }

/* === SEASONAL CALENDAR === */
.em-season-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--status-low);
  opacity: 0.8;
}

/* === USER MENU === */
.em-user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.em-user-menu:hover {
  background: var(--bg-card);
}

.em-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C5A55A, #00BFA5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-inverse);
}

.em-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

/* === USER SWITCHER === */
.em-switcher {
  position: relative;
}

.em-switcher__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  font-family: inherit;
}

.em-switcher__trigger:hover,
.em-switcher--open .em-switcher__trigger {
  background: var(--bg-card);
  border-color: var(--border-primary);
}

.em-switcher__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--bg-primary);
  flex-shrink: 0;
}

.em-switcher__chevron {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform var(--transition-fast);
}

.em-switcher--open .em-switcher__chevron {
  transform: rotate(180deg);
}

.em-switcher__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(88, 166, 255, 0.06);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s 150ms;
}

.em-switcher--open .em-switcher__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
}

.em-switcher__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--transition-fast);
}

.em-switcher__item:hover {
  background: var(--bg-card-hover);
}

.em-switcher__item--active {
  background: rgba(88, 166, 255, 0.08);
}

.em-switcher__item--active:hover {
  background: rgba(88, 166, 255, 0.12);
}

.em-switcher__item-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--bg-primary);
  flex-shrink: 0;
}

.em-switcher__item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.em-switcher__item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.em-switcher__item-role {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.em-switcher__check {
  font-size: 14px;
  color: var(--status-info);
  flex-shrink: 0;
  margin-left: auto;
}

.em-switcher__divider {
  height: 1px;
  background: var(--border-primary);
  margin: 4px 6px;
}

.em-switcher__item--logout {
  color: var(--text-secondary);
}

.em-switcher__item--logout:hover {
  color: var(--status-critical);
  background: rgba(248, 81, 73, 0.08);
}

.em-switcher__logout-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* Mobile adjustments for switcher */
@media (max-width: 768px) {
  .em-switcher__dropdown {
    width: 240px;
    right: -8px;
  }
}

/* === COLLISION ZONE OVERLAY === */
.collision-zone-band {
  fill: var(--collision-zone);
  stroke: var(--status-critical);
  stroke-width: 1;
  stroke-dasharray: 4,4;
}

/* === BUY WINDOW HIGHLIGHT === */
.buy-window-row {
  background: var(--buy-window) !important;
}

/* === PAGE-SPECIFIC: Chef Brief === */
.em-brief-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  overflow: hidden;
}

.em-brief-section {
  padding: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.em-brief-section:last-child {
  border-bottom: none;
}

.em-brief-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.em-brief-section--opportunity .em-brief-section-title { color: var(--status-low); }
.em-brief-section--watch .em-brief-section-title { color: var(--status-high); }
.em-brief-section--gulf .em-brief-section-title { color: var(--brand-vida); }

.em-brief-item {
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

.em-brief-item strong {
  color: var(--text-primary);
}

.em-brief-item p {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 2px;
}

/* === LENS CARD GRID === */
.em-lens-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .em-lens-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .em-lens-grid {
    grid-template-columns: 1fr;
  }
}

/* === LOADING STATES === */
.em-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}

.em-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-primary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === EMPTY STATE === */
.em-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.em-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* === SCROLL === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* === RESPONSIVE === */
@media (max-width: 1200px) {
  .em-sidebar {
    width: var(--sidebar-collapsed);
  }
  .em-sidebar .em-nav-label,
  .em-sidebar .em-sidebar-brand,
  .em-sidebar .em-nav-section,
  .em-sidebar .em-nav-divider,
  .em-sidebar .em-sidebar-footer {
    display: none;
  }
  /* Force all groups open at collapsed width (icons only) */
  .em-sidebar .em-nav-group-items {
    max-height: none !important;
    overflow: visible;
  }
  .em-sidebar .em-nav-item {
    justify-content: center;
    padding-block: 10px;
    padding-inline: 0;
    border-inline-start: 3px solid transparent;
  }
  .em-sidebar .em-nav-item.active {
    border-inline-start: 3px solid var(--accent-primary);
  }
  .em-topbar {
    inset-inline-start: var(--sidebar-collapsed);
  }
  .em-content,
  .em-main {
    margin-inline-start: var(--sidebar-collapsed);
  }
}

@media (max-width: 768px) {
  .em-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
    transition: transform 0.3s ease;
    box-shadow: none;
  }
  .em-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .em-sidebar .em-nav-label,
  .em-sidebar .em-sidebar-brand,
  .em-sidebar .em-nav-section,
  .em-sidebar .em-nav-divider,
  .em-sidebar .em-sidebar-footer {
    display: unset;
  }
  .em-sidebar .em-nav-section {
    display: flex;
  }
  .em-sidebar .em-nav-group-items {
    /* restore accordion behavior on mobile */
  }
  .em-sidebar .em-nav-item {
    justify-content: flex-start;
    padding-block: 8px;
    padding-inline: 20px;
  }
  .em-topbar {
    inset-inline-start: 0;
  }
  .em-content,
  .em-main {
    margin-inline-start: 0;
  }
  .em-hamburger {
    display: block;
  }
  .em-headline-bar {
    flex-direction: column;
  }
}

/* Sidebar backdrop overlay for mobile */
.em-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}
.em-sidebar-backdrop.visible {
  display: block;
}

/* === VISUAL HIERARCHY HELPERS (Don't Make Me Think) === */
.em-scannable-heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-block-end: var(--space-xs);
}

.em-scannable-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Active filter indicator: make it obvious which filter is on */
.em-filter-active {
  position: relative;
}
.em-filter-active::after {
  content: '';
  position: absolute;
  inset-block-end: -2px;
  inset-inline: 4px;
  block-size: 2px;
  background: var(--accent-primary);
  border-radius: 1px;
}

/* Breadcrumb trail for "where am I" (Krug trunk test) */
.em-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-block-end: var(--space-sm);
}
.em-breadcrumb a {
  color: var(--text-secondary);
}
.em-breadcrumb-sep::before {
  content: '/';
  margin-inline: 2px;
}

/* === RELATED PAGES FOOTER === */
.em-related-pages {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-primary);
}

.em-related-pages__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.em-related-pages__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.em-related-pages__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.em-related-pages__card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.em-related-pages__icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.em-related-pages__label {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
}

.em-related-pages__arrow {
  color: var(--text-muted);
  font-size: 14px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.em-related-pages__card:hover .em-related-pages__arrow {
  color: var(--accent-primary);
  transform: translateX(2px);
}

/* === QUICK LINKS (Exec pages) === */
.em-quick-links {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-primary);
}

.em-quick-links__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.em-quick-links__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.em-quick-links__pill {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--accent-primary);
  border-radius: 999px;
  color: var(--accent-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.em-quick-links__pill:hover {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

/* === ACTION LINK (Overview cards) === */
.em-action-link {
  color: var(--accent-primary);
  font-size: 12px;
  margin-top: 8px;
  display: inline-block;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.em-action-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* === UPLOAD STUB MODAL === */
.em-upload-stub-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,17,23,0.8);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
}

.em-upload-stub-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.em-upload-stub-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 36px 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.em-upload-stub-card__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.em-upload-stub-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.em-upload-stub-card__msg {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 24px;
}

.em-upload-stub-card__close {
  padding: 8px 24px;
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.em-upload-stub-card__close:hover {
  opacity: 0.85;
}

/* === PRINT === */
@media print {
  .em-sidebar, .em-topbar { display: none; }
  .em-content, .em-main { margin: 0; padding: 16px; }
  body { background: white; color: black; }
  .em-card { border: 1px solid #ccc; background: white; }
  .em-related-pages, .em-quick-links { display: none; }
  .em-demo-banner { display: none; }
}

/* ============================================================
   === DEMO BANNER (mobile-first, 2026-04-22) ==================
   Replaces inline styles in em-core.js::_injectDemoBanner so the
   banner can adapt to viewport and safe-area insets. Default is
   the phone layout; desktop is the progressive enhancement.
   ============================================================ */
.em-demo-banner {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 10px 14px;
  padding-block-end: max(10px, env(safe-area-inset-bottom, 10px));
  background: linear-gradient(135deg, #C5A55A 0%, #00BFA5 100%);
  color: #0d1117;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
}

.em-demo-banner__msg {
  display: block;
  text-align: center;
  line-height: 1.35;
}

.em-demo-banner__msg strong { font-weight: 700; }

/* Hide the long sentence on very narrow screens to keep the
   banner compact; desktop shows it */
.em-demo-banner__msg-long { display: none; }

.em-demo-banner__actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
}

.em-demo-banner__btn {
  flex: 1 1 0;
  min-height: 44px;            /* WCAG 2.2 AA tap target */
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #0d1117;
  background: rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.em-demo-banner__btn--primary {
  background: rgba(0, 0, 0, 0.22);
}

.em-demo-banner__btn:hover { background: rgba(0, 0, 0, 0.28); }
.em-demo-banner__btn:active { transform: scale(0.98); }
.em-demo-banner__btn:focus-visible {
  outline: 2px solid #0d1117;
  outline-offset: 2px;
}

@media (min-width: 560px) {
  .em-demo-banner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 16px;
  }
  .em-demo-banner__msg { text-align: left; }
  .em-demo-banner__msg-long { display: inline; }
  .em-demo-banner__actions {
    flex: 0 0 auto;
    gap: 10px;
  }
  .em-demo-banner__btn {
    flex: 0 0 auto;
    min-height: 36px;        /* desktop doesn't need 44px */
    padding: 8px 16px;
  }
}

/* ============================================================
   === MOBILE TAP-TARGET + OVERFLOW FIXES (2026-04-22) =========
   Raise tap targets to WCAG 2.2 AA minimum (24x24 for controls,
   44x44 recommended). Stop off-screen horizontal overflow on
   dashboard controls (spend-heatmap filter buttons).
   ============================================================ */
@media (max-width: 768px) {
  /* Sidebar nav items: bump to 44px tall so every link is tappable */
  .em-sidebar .em-nav-item {
    min-height: 44px;
    padding-block: 10px !important;
    display: flex;
    align-items: center;
  }

  /* Nav section headers: match tap target */
  .em-sidebar .em-nav-section {
    min-height: 44px;
  }

  /* Hamburger button: make sure it is at least 44x44 */
  .em-hamburger {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Topbar user menu: bump target size */
  .em-user-menu {
    min-height: 44px;
    padding: 4px 8px;
  }

  /* Generic button min-target */
  .em-btn,
  .em-btn--small {
    min-height: 36px;
  }

  /* Any horizontal scroller in dashboards: wrap filter rows so they
     don't overflow the viewport. Fallback: allow horizontal scroll
     WITHIN the component rather than pushing the whole page wider. */
  .shm-filter-group,
  .em-filters-row,
  .em-tab-row,
  .em-pill-row {
    flex-wrap: wrap;
  }
  .shm-sort-btn {
    flex: 0 0 auto;
  }

  /* Kill any chance of page-wide horizontal scroll: cap overflowing
     children of .em-content to the viewport width. Individual widgets
     can opt back in with overflow-x:auto on their own container. */
  .em-content {
    overflow-x: hidden;
  }
}

/* ============================================================
   === DEPARTMENT TILES (landing page, 2026-04-22) =============
   Supports the new /landing.php "choose your department" entry
   surface. Mobile-first single column, 2-up on tablet, 3+2 on
   desktop. Tiles are full-card click targets (no nested links).
   ============================================================ */
.em-dept-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-block: clamp(20px, 4vw, 36px);
}

@media (min-width: 560px) {
  .em-dept-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (min-width: 900px) {
  .em-dept-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.em-dept-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 18px;
  min-height: 160px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  color: #e6edf3;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease,
              background 0.18s ease;
}

.em-dept-tile:hover {
  border-color: #58a6ff;
  transform: translateY(-2px);
  background: #1a2028;
}

.em-dept-tile:focus-visible {
  outline: 2px solid #58a6ff;
  outline-offset: 3px;
}

.em-dept-tile__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8b949e;
}

.em-dept-tile__title {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  line-height: 1.25;
  color: #e6edf3;
}

.em-dept-tile__desc {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.5;
  color: #a8b1ba;
  font-weight: 400;
}

.em-dept-tile__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #58a6ff;
}

.em-dept-tile__meta::after {
  content: '\2192';
  transition: transform 0.18s ease;
}

.em-dept-tile:hover .em-dept-tile__meta::after {
  transform: translateX(3px);
}

/* Accent stripes per department — aligns with Emaar pitch taxonomy */
.em-dept-tile[data-dept="procurement"]     { border-top: 3px solid #C5A55A; }
.em-dept-tile[data-dept="development"]     { border-top: 3px solid #58a6ff; }
.em-dept-tile[data-dept="operations"]      { border-top: 3px solid #00BFA5; }
.em-dept-tile[data-dept="sustainability"]  { border-top: 3px solid #3fb950; }
.em-dept-tile[data-dept="digital"]         { border-top: 3px solid #a855f7; }

/* Landing page shell (stand-alone, not using sidebar) */
.em-landing {
  min-height: 100vh;
  background: #0d1117;
  color: #e6edf3;
  padding: clamp(20px, 5vw, 48px) clamp(16px, 4vw, 32px);
  padding-block-end: clamp(60px, 12vh, 140px);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.em-landing__inner {
  max-width: 1120px;
  margin-inline: auto;
}

.em-landing__hero {
  margin-block-end: clamp(24px, 5vw, 40px);
}

.em-landing__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8b949e;
  margin-block-end: 8px;
}

.em-landing__title {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  margin-block-end: 12px;
  color: #e6edf3;
}

.em-landing__sub {
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.55;
  color: #a8b1ba;
  max-width: 640px;
}

.em-landing__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: clamp(18px, 3vw, 24px);
}

.em-landing__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.em-landing__cta--primary {
  background: linear-gradient(135deg, #C5A55A 0%, #00BFA5 100%);
  color: #0d1117;
}

.em-landing__cta--secondary {
  background: #21262d;
  color: #e6edf3;
  border: 1px solid #30363d;
}

.em-landing__cta:hover { opacity: 0.9; }
.em-landing__cta:active { transform: scale(0.98); }
.em-landing__cta:focus-visible {
  outline: 2px solid #58a6ff;
  outline-offset: 3px;
}

.em-landing__foot {
  margin-block-start: clamp(32px, 6vw, 56px);
  padding-block-start: 20px;
  border-block-start: 1px solid #21262d;
  font-size: 12px;
  color: #6e7681;
  line-height: 1.6;
}

.em-landing__foot a {
  color: #8b949e;
  text-decoration: none;
}

.em-landing__foot a:hover { color: #58a6ff; }

/* ============================================================
   === MENU OVERLAP FIX — ROUND 2 (2026-04-22) =================
   Bug: on mobile (<=768px) the open sidebar drawer covered the
   topbar hamburger (z-collision: drawer z=100 > topbar z=90) AND
   the bottom of the drawer was obscured by the fixed demo banner
   (z=9999, h~90px), hiding both the close affordance and the
   last nav items. Backdrop (z=99) also covered the topbar,
   dimming the hamburger and blocking the tap target.

   Root cause chain (live verified on iPhone SE 375x667):
   - em.css L153-168  .em-sidebar         fixed, top:0, z:100, h:100dvh
   - em.css L337-351  .em-topbar          fixed, top:0, z:90,  h:56px
   - em.css L1479-85  .em-sidebar-backdrop fixed inset:0, z:99
   - em.css L1735-53  .em-demo-banner     fixed, bottom:0, z:9999, h~90px

   Fix (CSS-only, mobile-first, logical properties):
   1. On <=768px the sidebar starts BELOW the topbar so the
      topbar (and its hamburger) stays visible and tappable.
   2. On <=768px the sidebar height excludes the topbar AND the
      demo banner using a --demo-banner-h custom property that
      em-core.js updates from the banner's measured height (same
      ResizeObserver path already used to pad .em-content).
   3. The mobile backdrop starts below the topbar so the topbar
      is never dimmed and the hamburger remains usable as the
      close affordance.
   4. An internal scroll region is declared on .em-sidebar-nav so
      long menus scroll INSIDE the drawer instead of being cut
      off by the demo banner.
   5. prefers-reduced-motion disables the drawer slide (WCAG 2.2).
   ============================================================ */

:root {
  --demo-banner-h: 0px; /* JS sets this to measured banner height when demo=1 */
}

@media (max-width: 768px) {
  .em-sidebar {
    /* Drawer sits UNDER the topbar and ABOVE the demo banner */
    inset-block-start: var(--topbar-height);
    /* Use dvh for dynamic mobile chrome; drawer excludes topbar + banner */
    block-size: calc(100dvh - var(--topbar-height) - var(--demo-banner-h));
    /* Let the nav list scroll internally; drawer itself no longer scrolls */
    overflow-y: hidden;
  }

  /* Internal scroll region so long menus don't get clipped by the banner */
  .em-sidebar .em-sidebar-nav {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Backdrop must not cover the topbar — the hamburger is the close affordance */
  .em-sidebar-backdrop {
    inset-block-start: var(--topbar-height);
    inset-block-end: var(--demo-banner-h);
  }

  /* Keep the topbar above the backdrop so the hamburger stays visible and tappable.
     (Topbar z=90, backdrop z=99 pre-fix. Bumping topbar above backdrop is the
     belt-and-braces fix even with the inset-block-start separation above.) */
  .em-topbar {
    z-index: 101; /* > sidebar (100) and backdrop (99) */
  }

  /* Hamburger remains the tap target even when drawer is open */
  .em-topbar .em-hamburger {
    position: relative;
    z-index: 102;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .em-sidebar,
  .em-sidebar.open {
    transition: none;
  }
}

/* Restore accordion behavior on mobile — the (max-width: 1200px) rule
   above forces .em-nav-group-items to max-height:none; overflow:visible
   for the icon-only rail. That rule cascades into the mobile drawer and
   makes collapsed groups bleed their items into the drawer (visible
   when the drawer became tall enough to expose them). Re-assert the
   default collapsible behavior inside the mobile breakpoint.
   (Matches em.css L261-268 defaults; overrides em.css L1412-1415.) */
@media (max-width: 768px) {
  .em-sidebar .em-nav-group-items {
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .em-sidebar .em-nav-group.collapsed .em-nav-group-items {
    max-height: 0 !important;
  }
}
/* ============================================================
   === /END MENU OVERLAP FIX ===================================
   ============================================================ */