/* IBM Carbon Design System — SDR Onboarding Hub */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Reset & Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  color: #161616;
  line-height: 1.5;
  background: #f4f4f4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── IBM Carbon Tokens ── */
:root {
  --blue-60: #0f62fe;
  --blue-70: #0353e9;
  --blue-80: #002d9c;
  --green-60: #198038;
  --green-70: #0e6027;
  --orange-40: #ff832b;
  --orange-60: #ba4e00;
  --purple-60: #8a3ffc;
  --purple-70: #6929c4;
  --teal-60: #009d9a;
  --red-60: #da1e28;
  --yellow-20: #fdd13a;
  --yellow-30: #f1c21b;
  --gray-10: #f4f4f4;
  --gray-20: #e0e0e0;
  --gray-30: #c6c6c6;
  --gray-40: #a8a8a8;
  --gray-50: #8d8d8d;
  --gray-70: #525252;
  --gray-80: #393939;
  --gray-90: #262626;
  --gray-100: #161616;
  --white: #ffffff;
  --nav-h: 48px;
  --max-w: 1312px;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
}

/* ── Scroll Progress ── */
.scroll-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  height: 3px;
  background: var(--team-color, var(--blue-60));
  z-index: 999;
  transition: width 0.1s linear;
  width: 0%;
}

/* ── Navigation — Carbon Shell ── */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: var(--nav-h);
  background: var(--gray-100);
  z-index: 1000;
  border-bottom: 1px solid var(--gray-80);
  box-sizing: border-box;
  overflow: hidden;
}

.nav-inner {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-8);
  box-sizing: border-box;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
}
.nav-home-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #a8a8a8;
  transition: color 0.1s;
  flex-shrink: 0;
}
.nav-home-icon:hover { color: var(--white); }
body.light-mode .nav-home-icon { color: #525252; }
body.light-mode .nav-home-icon:hover { color: #161616; }
/* Team pages are dark by default; light mode via no dark-mode class */
body:not(.dark-mode) .nav-home-icon { color: #525252; }
body:not(.dark-mode) .nav-home-icon:hover { color: #161616; }
body.dark-mode .nav-home-icon { color: #a8a8a8; }
body.dark-mode .nav-home-icon:hover { color: #f4f4f4; }

.ibm-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 7px);
  grid-template-rows: repeat(3, 7px);
  gap: 2px;
  flex-shrink: 0;
}

.ibm-logo-grid span {
  display: block;
  background: var(--white);
}

.nav-divider {
  width: 1px;
  height: 16px;
  background: var(--gray-70);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Carbon nav items */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 var(--spacing-4);
  color: var(--gray-30);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
}

.nav-item:hover {
  background: var(--gray-80);
  color: var(--white);
}

.nav-item.active {
  color: var(--white);
  border-bottom-color: var(--blue-60);
}

.nav-search-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-4);
  height: var(--nav-h);
  background: none;
  border: none;
  color: var(--gray-30);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.1s;
  border-left: 1px solid var(--gray-80);
}

.nav-search-btn:hover { background: var(--gray-80); color: var(--white); }

.nav-search-btn kbd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--gray-50);
  background: var(--gray-90);
  border: 1px solid var(--gray-70);
  padding: 1px 5px;
  border-radius: 2px;
}

/* ── Search Overlay ── */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22,22,22,0.8);
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}

.search-overlay.open { display: flex; }

.search-modal {
  background: var(--white);
  width: 100%;
  max-width: 640px;
  border: 1px solid var(--gray-20);
}

.search-input-row {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-4);
  border-bottom: 1px solid var(--gray-20);
}

.search-input-row svg { flex-shrink: 0; color: var(--gray-50); }

.search-input-row input {
  flex: 1;
  border: none;
  outline: none;
  padding: var(--spacing-4);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  color: var(--gray-100);
  background: transparent;
}

.search-results { max-height: 400px; overflow-y: auto; }

.search-result-item {
  display: block;
  padding: var(--spacing-3) var(--spacing-6);
  color: var(--gray-100);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--gray-10);
  transition: background 0.1s;
}

.search-result-item:hover, .search-result-item.focused {
  background: var(--gray-10);
}

.search-result-item .result-title { font-weight: 600; margin-bottom: 2px; }
.search-result-item .result-context { color: var(--gray-70); font-size: 13px; }
.search-result-item .result-tag {
  display: inline-block;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--blue-60);
  background: #dde1ff;
  padding: 1px 6px;
  margin-bottom: 4px;
}

.search-empty {
  padding: var(--spacing-8);
  text-align: center;
  color: var(--gray-50);
  font-size: 14px;
}

/* ── Main Layout ── */
main { margin-top: var(--nav-h); }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-8);
}

/* ── Page Header (replaces hero) ── */
.page-header {
  background: var(--gray-100);
  padding: var(--spacing-16) var(--spacing-8);
  color: var(--white);
}

.page-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.page-header-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: var(--gray-40);
  margin-bottom: var(--spacing-3);
  font-family: 'IBM Plex Mono', monospace;
}

.page-header h1 {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: var(--spacing-4);
  max-width: 800px;
}

.page-header p {
  font-size: 18px;
  color: var(--gray-30);
  max-width: 640px;
  line-height: 1.6;
  font-weight: 300;
}

.page-header-accent {
  width: 48px;
  height: 4px;
  background: var(--team-color, var(--blue-60));
  margin-bottom: var(--spacing-6);
}

/* Team-colored header variant */
.page-header.team-header {
  background: var(--team-color, var(--blue-60));
}

.page-header.team-header .page-header-eyebrow { color: rgba(255,255,255,0.6); }
.page-header.team-header p { color: rgba(255,255,255,0.85); }
.page-header.team-header .page-header-accent { background: rgba(255,255,255,0.4); }

/* ── Tags (Carbon) ── */
.tag-group { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: var(--spacing-6); }

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--spacing-3);
  font-size: 12px;
  font-weight: 400;
  background: rgba(255,255,255,0.15);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
  white-space: nowrap;
  letter-spacing: 0.16px;
}

/* ── Carbon Tile Grid ── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--gray-20);
  border: 1px solid var(--gray-20);
  margin-bottom: var(--spacing-8);
}

.tile {
  background: var(--white);
  padding: var(--spacing-8);
  text-decoration: none;
  color: var(--gray-100);
  transition: background 0.1s;
  position: relative;
  display: block;
  border-top: 3px solid transparent;
}

.tile:hover { background: var(--gray-10); }

.tile.clickable { cursor: pointer; }
.tile.clickable:hover .tile-arrow { transform: translateX(4px); }

.tile-eyebrow {
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gray-50);
  text-transform: uppercase;
  letter-spacing: 0.32px;
  margin-bottom: var(--spacing-3);
}

.tile h3 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: var(--spacing-3);
  line-height: 1.3;
}

.tile p {
  font-size: 14px;
  color: var(--gray-70);
  line-height: 1.6;
  margin-bottom: var(--spacing-6);
}

.tile-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--team-color, var(--blue-60));
  transition: transform 0.15s;
}

.tile.blue { border-top-color: var(--blue-60); }
.tile.green { border-top-color: var(--green-60); }
.tile.orange { border-top-color: var(--orange-40); }
.tile.purple { border-top-color: var(--purple-60); }
.tile.teal { border-top-color: var(--teal-60); }

/* ── Content Sections ── */
.content-section {
  background: var(--white);
  padding: var(--spacing-8);
  margin-bottom: 1px;
  border-left: 4px solid transparent;
}

.content-section + .content-section { border-top: 1px solid var(--gray-10); }

.content-section.accent-blue { border-left-color: var(--blue-60); }
.content-section.accent-green { border-left-color: var(--green-60); }
.content-section.accent-orange { border-left-color: var(--orange-40); }
.content-section.accent-purple { border-left-color: var(--purple-60); }
.content-section.accent-team { border-left-color: var(--team-color, var(--blue-60)); }

.section-label {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32px;
  color: var(--team-color, var(--blue-60));
  margin-bottom: var(--spacing-3);
  display: block;
}

.content-section h2 {
  font-size: 28px;
  font-weight: 400;
  color: var(--gray-100);
  margin-bottom: var(--spacing-6);
  line-height: 1.25;
}

.content-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-100);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--gray-20);
}

.content-section p {
  font-size: 14px;
  color: var(--gray-70);
  line-height: 1.7;
  margin-bottom: var(--spacing-4);
  max-width: 72ch;
}

.content-section ul {
  list-style: none;
  margin-bottom: var(--spacing-4);
}

.content-section ul li {
  font-size: 14px;
  color: var(--gray-70);
  line-height: 1.7;
  padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-6);
  position: relative;
  border-bottom: 1px solid var(--gray-10);
}

.content-section ul li::before {
  content: '';
  position: absolute;
  left: var(--spacing-3);
  top: 13px;
  width: 4px;
  height: 4px;
  background: var(--team-color, var(--blue-60));
}

.content-section strong { color: var(--gray-100); font-weight: 600; }

/* ── Link List (replaces link-box) ── */
.link-list {
  margin: var(--spacing-6) 0;
  border: 1px solid var(--gray-20);
  border-top: 2px solid var(--team-color, var(--blue-60));
}

.link-list-header {
  padding: var(--spacing-3) var(--spacing-5);
  background: var(--gray-10);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32px;
  color: var(--gray-70);
  font-family: 'IBM Plex Mono', monospace;
  border-bottom: 1px solid var(--gray-20);
}

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-5);
  color: var(--blue-60);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  border-bottom: 1px solid var(--gray-10);
  transition: background 0.1s;
}

.link-list a:last-child { border-bottom: none; }
.link-list a:hover { background: #dde1ff; }

.link-list a::after {
  content: '↗';
  font-size: 12px;
  color: var(--gray-40);
  flex-shrink: 0;
}

/* ── Inline Notification ── */
.notification {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  border-left: 4px solid;
  margin: var(--spacing-6) 0;
}

.notification.info {
  background: #dde1ff;
  border-color: var(--blue-60);
}

.notification.success {
  background: #defbe6;
  border-color: var(--green-60);
}

.notification.warning {
  background: #fdf6dd;
  border-color: var(--yellow-30);
}

.notification-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.notification-body { flex: 1; }
.notification-title { font-size: 14px; font-weight: 600; color: var(--gray-100); margin-bottom: 4px; }
.notification-text { font-size: 14px; color: var(--gray-70); line-height: 1.6; }

/* ── Timeline ── */
.timeline { padding-left: var(--spacing-8); border-left: 2px solid var(--gray-20); }

.timeline-item {
  position: relative;
  padding-bottom: var(--spacing-8);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--spacing-8) - 5px);
  top: 4px;
  width: 10px;
  height: 10px;
  background: var(--team-color, var(--blue-60));
  border: 2px solid var(--white);
  outline: 2px solid var(--team-color, var(--blue-60));
}

.timeline-item h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-100);
  margin-bottom: var(--spacing-2);
}

.timeline-item p {
  font-size: 14px;
  color: var(--gray-70);
  line-height: 1.6;
}

/* ── Checklist (interactive) ── */
.checklist { list-style: none; margin-bottom: var(--spacing-4); }

.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--gray-10);
  cursor: pointer;
}

.check-item input[type="checkbox"] { display: none; }

.check-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gray-50);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
}

.check-item.done .check-box {
  background: var(--blue-60);
  border-color: var(--blue-60);
}

.check-item.done .check-box::after {
  content: '';
  width: 4px;
  height: 8px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.check-label {
  font-size: 14px;
  color: var(--gray-70);
  line-height: 1.6;
  flex: 1;
}

.check-item.done .check-label {
  color: var(--gray-40);
  text-decoration: line-through;
}

.checklist-progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.checklist-bar {
  flex: 1;
  height: 4px;
  background: var(--gray-20);
}

.checklist-bar-fill {
  height: 100%;
  background: var(--blue-60);
  transition: width 0.3s ease;
}

.checklist-count {
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gray-50);
  white-space: nowrap;
}

/* ── Data Table ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: var(--spacing-6) 0;
}

.data-table th {
  background: var(--gray-10);
  padding: var(--spacing-3) var(--spacing-5);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32px;
  color: var(--gray-70);
  border-bottom: 2px solid var(--gray-20);
}

.data-table td {
  padding: var(--spacing-4) var(--spacing-5);
  color: var(--gray-70);
  border-bottom: 1px solid var(--gray-10);
  vertical-align: top;
}

.data-table td strong { color: var(--gray-100); font-weight: 500; }

.data-table tr:hover td { background: var(--gray-10); }

/* ── Stat Grid ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--gray-20);
  border: 1px solid var(--gray-20);
  margin: var(--spacing-6) 0;
}

.stat-cell {
  background: var(--white);
  padding: var(--spacing-6);
}

.stat-value {
  font-size: 32px;
  font-weight: 300;
  color: var(--gray-100);
  line-height: 1;
  margin-bottom: var(--spacing-2);
}

.stat-label {
  font-size: 12px;
  color: var(--gray-50);
  text-transform: uppercase;
  letter-spacing: 0.32px;
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Page Layout (team pages) ── */
.page-layout {
  display: grid;
  grid-template-columns: 256px 1fr;
  gap: 0;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ── Sidebar ── */
.sidebar {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  background: var(--white);
  border-right: 1px solid var(--gray-20);
  padding: var(--spacing-6) 0;
}

.sidebar-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32px;
  color: var(--gray-50);
  padding: 0 var(--spacing-5) var(--spacing-3);
  font-family: 'IBM Plex Mono', monospace;
  border-bottom: 1px solid var(--gray-10);
  margin-bottom: var(--spacing-2);
}

.sidebar-nav { list-style: none; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-5);
  color: var(--gray-70);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  border-left: 3px solid transparent;
  transition: all 0.1s;
}

.sidebar-nav a:hover {
  background: var(--gray-10);
  color: var(--gray-100);
}

.sidebar-nav a.active {
  background: var(--gray-10);
  color: var(--gray-100);
  font-weight: 500;
  border-left-color: var(--team-color, var(--blue-60));
}

.sidebar-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}

.sidebar-nav a.active .sidebar-icon { opacity: 1; }

/* ── Content Area ── */
.content-area {
  min-width: 0;
  padding: var(--spacing-8);
}

.section-block {
  margin-bottom: var(--spacing-2);
  scroll-margin-top: calc(var(--nav-h) + var(--spacing-4));
}

/* ── Right Dot Nav ── */
.dot-nav {
  position: fixed;
  right: var(--spacing-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dot-nav-item {
  position: relative;
  width: 6px;
  height: 6px;
  background: var(--gray-30);
  cursor: pointer;
  transition: all 0.15s;
}

.dot-nav-item:hover, .dot-nav-item.active {
  background: var(--team-color, var(--blue-60));
  width: 6px;
  height: 6px;
}

.dot-nav-item.active { transform: scale(1.6); }

.dot-nav-item::before {
  content: attr(data-label);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gray-100);
  color: var(--white);
  font-size: 12px;
  padding: 4px 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  font-family: 'IBM Plex Mono', monospace;
}

.dot-nav-item:hover::before { opacity: 1; }

/* ── Team Banner ── */
.team-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--gray-20);
}
.team-banner-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  text-decoration: none;
  border-right: 1px solid var(--gray-20);
  transition: background 0.1s;
  border-top: 3px solid transparent;
  background: var(--white);
}
.team-banner-card:last-child { border-right: none; }
.team-banner-card:hover { background: var(--gray-10); }
.team-banner-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.team-banner-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-100);
  line-height: 1.3;
}
.team-banner-sub {
  font-size: 11px;
  color: var(--gray-50);
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Role description ── */
.role-desc {
  background: var(--white);
  border-bottom: 1px solid var(--gray-20);
  padding: var(--spacing-6) var(--spacing-8);
}
.role-desc-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--spacing-8);
  align-items: start;
}
.role-desc-label {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.32px;
  color: var(--blue-60);
  font-weight: 600;
  padding-top: 2px;
}
.role-desc-text {
  font-size: 14px;
  color: var(--gray-70);
  line-height: 1.7;
}
.role-desc-text strong { color: var(--gray-100); font-weight: 600; }

/* ── Accordion (details/summary) ── */
details.accordion {
  border: 1px solid var(--gray-20);
  border-top: 2px solid var(--team-color, var(--blue-60));
  margin-bottom: var(--spacing-3);
  background: var(--white);
}
details.accordion[open] { background: var(--white); }

details.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-100);
  user-select: none;
  gap: var(--spacing-4);
}
details.accordion summary::-webkit-details-marker { display: none; }
details.accordion summary:hover { background: var(--gray-10); }

.acc-summary-left { display: flex; align-items: center; gap: var(--spacing-3); flex: 1; }
.acc-step-num {
  width: 22px; height: 22px;
  background: var(--team-color, var(--blue-60));
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'IBM Plex Mono', monospace;
}
.acc-step-day {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gray-50);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-left: auto;
  padding-right: var(--spacing-4);
}
.acc-chevron {
  transition: transform 0.2s;
  color: var(--gray-50);
  flex-shrink: 0;
}
details.accordion[open] .acc-chevron { transform: rotate(180deg); }

.acc-body {
  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
  border-top: 1px solid var(--gray-20);
}
/* two-column layout: bullets left, links right */
.acc-two-col {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--spacing-6);
  align-items: start;
}
@media (max-width: 768px) { .acc-two-col { grid-template-columns: 1fr; } }
.acc-two-col .acc-links { margin-top: 0; }
.acc-body p {
  font-size: 14px;
  color: var(--gray-70);
  line-height: 1.7;
  margin-bottom: var(--spacing-3);
}
.acc-body ul {
  list-style: none;
  margin: 0;
}
.acc-body ul li {
  font-size: 14px;
  color: var(--gray-70);
  padding: 7px 0 7px var(--spacing-5);
  position: relative;
  border-bottom: 1px solid var(--gray-10);
  line-height: 1.5;
}
.acc-body ul li:last-child { border-bottom: none; }
.acc-body ul li::before {
  content: '';
  position: absolute;
  left: var(--spacing-2);
  top: 14px;
  width: 4px; height: 4px;
  background: var(--team-color, var(--blue-60));
}
.acc-links {
  margin-top: var(--spacing-4);
  border: 1px solid var(--gray-20);
}
.acc-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px var(--spacing-4);
  font-size: 13px;
  color: var(--blue-60);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-10);
  transition: background 0.1s;
}
.acc-links a:last-child { border-bottom: none; }
.acc-links a:hover { background: #dde1ff; }
.acc-links a::after { content: '↗'; font-size: 11px; color: var(--gray-40); }

/* ── Manager Profile Card ── */
.manager-card {
  display: flex;
  gap: var(--spacing-6);
  align-items: flex-start;
  padding: var(--spacing-6);
  border: 1px solid var(--gray-20);
  border-top: 3px solid var(--team-color, var(--blue-60));
  background: var(--white);
  margin-bottom: var(--spacing-6);
}
.manager-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  background: var(--team-color, var(--blue-60));
  flex-shrink: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  overflow: hidden;
}
.manager-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; display: block; }
.manager-info { flex: 1; min-width: 0; }
.manager-name { font-size: 18px; font-weight: 600; color: var(--gray-100); margin-bottom: 2px; }
.manager-title { font-size: 13px; color: var(--gray-50); margin-bottom: var(--spacing-4); font-family: 'IBM Plex Mono', monospace; }
.manager-links { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.manager-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  padding: 5px 12px;
  border: 1px solid var(--gray-20);
  color: var(--gray-70);
  text-decoration: none;
  background: var(--gray-10);
  transition: all 0.1s;
  font-family: 'IBM Plex Mono', monospace;
}
.manager-link:hover { background: var(--white); border-color: var(--team-color, var(--blue-60)); color: var(--team-color, var(--blue-60)); }

/* ── Team Roster ── */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-3);
  padding: var(--spacing-4) 0;
}
.roster-card {
  border: 1px solid var(--gray-20);
  background: var(--white);
  transition: border-color 0.1s;
  list-style: none;
}
.roster-card:hover { border-color: var(--team-color, var(--blue-60)); }
.roster-card[open] { border-color: var(--team-color, var(--blue-60)); }
.roster-card > summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.roster-card > summary::-webkit-details-marker { display: none; }
.roster-card > summary::marker { display: none; }
.roster-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gray-20);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  color: var(--gray-70);
  flex-shrink: 0;
  overflow: hidden;
}
.roster-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.roster-name { font-size: 13px; font-weight: 600; color: var(--gray-100); margin-bottom: 2px; }
.roster-role { font-size: 11px; color: var(--gray-50); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.2px; }
.roster-contacts {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-4);
  border-top: 1px solid var(--gray-20);
}
.roster-contacts a {
  font-size: 12px; color: var(--blue-60);
  text-decoration: none;
  transition: color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-contacts a:hover { color: var(--blue-70); text-decoration: underline; }
.roster-card-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid var(--gray-20);
  background: var(--white);
  text-align: center;
}
.roster-card-simple:hover { border-color: var(--team-color, var(--blue-60)); }
.roster-initials {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.roster-territory { font-size: 11px; color: var(--gray-50); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.2px; }
body.dark-mode .roster-card-simple { background: #1c1c1c; border-color: #3d3d3d; }
body.dark-mode .roster-card-simple:hover { border-color: var(--team-color, #78a9ff); }
.roster-contact {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--blue-60);
  text-decoration: none;
  transition: color 0.1s;
}
.roster-contact:hover { color: var(--blue-70); }
.roster-contact svg { flex-shrink: 0; }

/* ── Footer ── */
footer {
  background: var(--gray-100);
  border-top: 1px solid var(--gray-80);
  padding: var(--spacing-8);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.footer-text { font-size: 12px; color: var(--gray-50); }
.footer-links { display: flex; gap: var(--spacing-6); }
.footer-links a { font-size: 12px; color: var(--gray-50); text-decoration: none; }
.footer-links a:hover { color: var(--gray-30); text-decoration: underline; }

/* ── Hamburger (mobile) ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--spacing-3);
  background: none;
  border: none;
  color: #f4f4f4;
}
body.light-mode .hamburger { color: #161616; }
.hamburger span { width: 20px; height: 2px; background: currentColor; display: block; border-radius: 1px; }

/* ── Focus Visible (Accessibility) ── */
:focus-visible {
  outline: 2px solid var(--blue-60);
  outline-offset: 2px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .page-layout { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; border-right: none; border-bottom: 1px solid var(--gray-20); }
  .dot-nav { display: none; }
}

@media (max-width: 768px) {
  .nav-right { display: none; }
  .nav-right.mobile-open { display: flex; flex-direction: column; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--gray-100); border-bottom: 1px solid var(--gray-80); z-index: 999; align-items: stretch; }
  .nav-right.mobile-open .nav-item { height: 48px; border-bottom: 1px solid var(--gray-80); border-left: 3px solid transparent; color: #f4f4f4; }
  .nav-right.mobile-open .nav-item.active { border-left-color: var(--blue-60); border-bottom-color: transparent; color: #78a9ff; }
  .hamburger { display: flex; }
  .container { padding: var(--spacing-6) var(--spacing-5); }
  .content-area { padding: var(--spacing-5); }
  .tile-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { flex-direction: column; }
  .page-header { padding: var(--spacing-10) var(--spacing-5); }
}

/* ── Team Pages Dark Mode ── */
body.dark-mode {
  background: #161616;
  color: #f4f4f4;
}
body.dark-mode nav { background: #161616; border-bottom-color: #393939; }
body.dark-mode .nav-brand, body.dark-mode .nav-item { color: #f4f4f4; }
body.dark-mode .nav-item:hover { background: #262626; }
body.dark-mode .ibm-logo-grid span { background: #f4f4f4; }
body.dark-mode .nav-divider { background: #393939; }
body.dark-mode .nav-theme-btn { color: #c6c6c6; }
body.dark-mode .nav-theme-btn:hover { background: #262626; color: #f4f4f4; }

body.dark-mode main { background: #161616; }
body.dark-mode .sidebar { background: #161616; border-right-color: #393939; }
body.dark-mode .sidebar-label { color: #8d8d8d; }
body.dark-mode .toc-link { color: #8d8d8d; }
body.dark-mode .toc-link:hover, body.dark-mode .toc-link.active { color: #78a9ff; background: #1e1e1e; border-left-color: #78a9ff; }

body.dark-mode .content-section { background: #1e1e1e; }
body.dark-mode .content-section h2 { color: #f4f4f4; }
body.dark-mode .content-section h3 { color: #e0e0e0; border-bottom-color: #393939; }
body.dark-mode .content-section p { color: #c6c6c6; }
body.dark-mode .content-section strong { color: #f4f4f4; }
body.dark-mode .section-label { color: #6ea6ff; }

body.dark-mode details.accordion { background: #262626; border-color: #393939; border-top-color: var(--team-color, var(--blue-60)); }
body.dark-mode details.accordion[open] { background: #262626; }
body.dark-mode details.accordion summary { color: #f4f4f4; }
body.dark-mode details.accordion summary:hover { background: #2d2d2d; }
body.dark-mode .acc-body { border-top-color: #393939; }
body.dark-mode .acc-body ul li { color: #c6c6c6; border-bottom-color: #2d2d2d; }
body.dark-mode .acc-body p { color: #c6c6c6; }
body.dark-mode .acc-links { border-color: #393939; }
body.dark-mode .acc-links a { color: #78a9ff; border-bottom-color: #2d2d2d; }
body.dark-mode .acc-links a:hover { background: #1a2040; }
body.dark-mode .acc-links a::after { color: #525252; }

body.dark-mode .link-list { border-color: #393939; }
body.dark-mode .link-list-header { background: #262626; color: #8d8d8d; border-bottom-color: #393939; }
body.dark-mode .link-list a { color: #78a9ff; border-bottom-color: #2d2d2d; }
body.dark-mode .link-list a:hover { background: #262626; }
body.dark-mode .link-list a::after { color: #525252; }

body.dark-mode .stat-grid { background: #2d2d2d; border-color: #2d2d2d; }
body.dark-mode .stat-cell { background: #1e1e1e; }
body.dark-mode .stat-value { color: #f4f4f4; }
body.dark-mode .stat-label { color: #8d8d8d; }

body.dark-mode .notification.info { background: #1e2a4a; border-color: #0f62fe; }
body.dark-mode .notification.success { background: #0d2e1a; border-color: #198038; }
body.dark-mode .notification.warning { background: #2d2500; border-color: #f1c21b; }
body.dark-mode .notification-title { color: #f4f4f4; }
body.dark-mode .notification-text { color: #a8a8a8; }
body.dark-mode .notification-icon { color: #a8a8a8; }

body.dark-mode .manager-card { background: #262626; border-color: #393939; border-top-color: var(--team-color, var(--blue-60)); }
body.dark-mode .manager-name { color: #f4f4f4; }
body.dark-mode .manager-role, body.dark-mode .manager-title { color: #8d8d8d; }
body.dark-mode .manager-contacts .manager-link { color: #78a9ff; border-color: #393939; background: #1e1e1e; }
body.dark-mode .manager-link { color: #a8a8a8; background: #2d2d2d; border-color: #393939; }
body.dark-mode .manager-link:hover { background: #393939; color: #78a9ff; border-color: #78a9ff; }

body.dark-mode .roster-card { background: #262626; border-color: #393939; }
body.dark-mode .roster-card:hover, body.dark-mode .roster-card[open] { border-color: var(--team-color, var(--blue-60)); }
body.dark-mode .roster-avatar { background: #393939; color: #c6c6c6; }
body.dark-mode .roster-name { color: #f4f4f4; }
body.dark-mode .roster-role { color: #8d8d8d; }
body.dark-mode .roster-contacts { border-top-color: #393939; }
body.dark-mode .roster-contacts a { color: #78a9ff; }
body.dark-mode .roster-contacts a:hover { color: #a6c8ff; }

body.dark-mode footer { background: #0a0a0a; border-top-color: #2d2d2d; }
body.dark-mode .footer-text { color: #525252; }
body.dark-mode .footer-links a { color: #525252; }
body.dark-mode .footer-links a:hover { color: #a8a8a8; }

/* Theme toggle button for team pages */
.nav-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: #a8a8a8;
  transition: background 0.1s, color 0.1s;
  margin-left: var(--spacing-3);
}

/* ══════════════════════════════════════════
   FEATURE ADDITIONS — portal.js companions
   ══════════════════════════════════════════ */

/* ── 1. Back to Top ── */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 42px; height: 42px;
  background: var(--team-color, var(--blue-60));
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s, transform 0.22s, background 0.15s;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  pointer-events: none;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { filter: brightness(1.12); transform: translateY(-2px); }

/* ── 2. Active Sidebar ── */
.toc-link.active, .sidebar-link.active {
  color: var(--team-color, var(--blue-60)) !important;
  font-weight: 600;
  border-left: 3px solid var(--team-color, var(--blue-60));
  padding-left: calc(var(--spacing-4) - 3px);
  background: rgba(15,98,254,0.06);
}
body.dark-mode .toc-link.active, body.dark-mode .sidebar-link.active {
  color: #78a9ff !important;
  border-left-color: #78a9ff;
  background: rgba(120,169,255,0.08);
}

/* ── 3. Copy Buttons ── */
.copy-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding-right: var(--spacing-2);
}
.copy-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--gray-20);
  color: var(--gray-50);
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 3px;
  display: flex; align-items: center;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
  margin-top: 1px;
}
.copy-btn:hover { border-color: var(--blue-60); color: var(--blue-60); background: rgba(15,98,254,0.05); }
body.dark-mode .copy-btn { border-color: #393939; color: #8d8d8d; }
body.dark-mode .copy-btn:hover { border-color: #78a9ff; color: #78a9ff; background: rgba(120,169,255,0.08); }

/* ── 5. Search Bar ── */
.page-search-wrap {
  position: relative;
  margin-bottom: var(--spacing-6);
}
.page-search-wrap svg.search-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--gray-50);
  pointer-events: none;
}
#page-search {
  width: 100%;
  height: 44px;
  padding: 0 36px 0 42px;
  border: 1px solid var(--gray-30);
  border-radius: 0;
  background: var(--white);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: var(--gray-100);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
#page-search:focus { border-color: var(--blue-60); box-shadow: inset 0 0 0 1px var(--blue-60); }
#page-search::placeholder { color: var(--gray-40); }
#search-clear {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background: var(--gray-20);
  border: none;
  border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--gray-60);
  font-size: 14px;
  line-height: 1;
}
#search-clear:hover { background: var(--gray-30); }
#search-no-results {
  display: none;
  text-align: center;
  padding: var(--spacing-10) var(--spacing-6);
  color: var(--gray-50);
  font-size: 14px;
}
body.dark-mode #page-search { background: #262626; border-color: #393939; color: #f4f4f4; }
body.dark-mode #page-search:focus { border-color: #78a9ff; box-shadow: inset 0 0 0 1px #78a9ff; }
body.dark-mode #search-clear { background: #393939; color: #a8a8a8; }
body.dark-mode .page-search-wrap svg.search-icon { color: #6f6f6f; }

/* ── 6. Last Updated Badge ── */
.last-updated {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gray-50);
  background: var(--gray-10);
  border: 1px solid var(--gray-20);
  padding: 2px 8px;
  margin-left: var(--spacing-3);
  vertical-align: middle;
  letter-spacing: 0.3px;
}
body.dark-mode .last-updated { background: #2d2d2d; border-color: #393939; color: #6f6f6f; }

/* ── 7. Smooth Accordion (overflow clip for animation) ── */
details.accordion .acc-body { overflow: hidden; }

/* ── 8. Roster Hover Tooltip ── */
.roster-card > summary { position: relative; }
.roster-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 60px;
  background: #161616;
  color: #f4f4f4;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  padding: 6px 10px;
  border-left: 2px solid var(--team-color, var(--blue-60));
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
  flex-direction: column;
  gap: 3px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.roster-card:not([open]) > summary:hover .roster-tooltip { display: flex; }
body.dark-mode .roster-tooltip { background: #0a0a0a; }

/* ── 9. Mobile — Sidebar Overlay & Improved Responsive ── */
#sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 42px; height: 42px;
  background: var(--gray-100);
  color: #f4f4f4;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  align-items: center; justify-content: center;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: background 0.15s;
}
#sidebar-toggle:hover { background: #393939; }
#sidebar-toggle.active { background: var(--team-color, var(--blue-60)); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 149;
}

.hamburger span {
  transition: transform 0.2s, opacity 0.2s;
  transform-origin: center;
}

@media (max-width: 900px) {
  #sidebar-toggle { display: flex; }
  .back-to-top { right: 16px; bottom: 80px; }

  /* Sidebar slide-in overlay */
  .sidebar {
    position: fixed !important;
    top: var(--nav-h);
    left: 0;
    bottom: 0;
    width: 260px !important;
    z-index: 150;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar.sidebar-open ~ .sidebar-overlay,
  .sidebar-overlay.active { display: block; }

  .page-layout { grid-template-columns: 1fr !important; }
  .content-area { padding: var(--spacing-5) var(--spacing-4) !important; }

  /* Accordion summary — prevent overflow */
  details.accordion > summary { flex-wrap: wrap; gap: 6px; }
  .acc-step-day { display: none; } /* hide day badge on mobile — redundant with title */
  .acc-summary-left { font-size: 13px; flex: 1; min-width: 0; }

  /* Stack two-col inside accordions */
  .acc-two-col { grid-template-columns: 1fr !important; }

  /* Product grid single col */
  .product-grid { grid-template-columns: 1fr !important; }

  /* Stat grid 2-col */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Roster single col */
  .roster-grid { grid-template-columns: 1fr !important; }

  /* Tools 2-col */
  .tools-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Manager card — stack on mobile */
  .manager-card { flex-direction: column; align-items: flex-start; gap: var(--spacing-4); }
  .manager-avatar { width: 64px !important; height: 64px !important; font-size: 18px !important; }
  .manager-contacts { flex-direction: column; }

  /* Metrics tier header — wrap sub label */
  .metrics-tier-header { flex-wrap: wrap; }
  .metrics-tier-sub { margin-left: 0; width: 100%; }

  /* Page header tags wrap */
  .tag-group { flex-wrap: wrap; }
  .page-header h1 { font-size: 24px; }
  .page-header p { font-size: 14px; }

  /* Copy list items on mobile */
  .copy-list li { flex-wrap: wrap; gap: 6px; }
  .copy-btn { align-self: flex-end; }

  /* Search bar full width */
  .page-search-wrap { margin-bottom: var(--spacing-4); }
}

@media (max-width: 768px) {
  /* Nav */
  .nav-right { display: none; }
  .nav-right.mobile-open { display: flex; flex-direction: column; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--gray-100); border-bottom: 1px solid var(--gray-80); z-index: 999; align-items: stretch; }
  .nav-right.mobile-open .nav-item { height: 48px; border-bottom: 1px solid var(--gray-80); border-left: 3px solid transparent; color: #f4f4f4; }
  .nav-right.mobile-open .nav-item.active { border-left-color: var(--blue-60); border-bottom-color: transparent; color: #78a9ff; }
  .hamburger { display: flex; }

  /* Index page tab nav — scrollable */
  /* Nav padding tighter on mobile */
  .nav-inner { padding: 0 var(--spacing-4) !important; }

  /* Tab nav horizontally scrollable */
  .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* Team banner — 2x2 grid on mobile */
  .team-banner { grid-template-columns: repeat(2, 1fr) !important; }
  .team-banner-card:last-child { border-right: 1px solid var(--gray-20); }
  .team-banner-card:nth-child(2) { border-right: none; }
  .team-banner-card:nth-child(3) { border-top: 1px solid var(--gray-20); }
  .team-banner-card:nth-child(4) { border-top: 1px solid var(--gray-20); border-right: none; }

  /* Show hamburger on team pages, hide the back-to-hub text link */
  #navBack { display: none !important; }
  .hamburger { display: flex; }

  /* Hide search button in mobile dropdown, keep theme toggle */
  .nav-right.mobile-open .nav-search-btn { display: none; }
  .nav-right.mobile-open .nav-theme-btn { display: none; }

  .container { padding: var(--spacing-6) var(--spacing-4); }
  .content-area { padding: var(--spacing-5); }
  .tile-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { flex-direction: column; gap: var(--spacing-4); }
  .footer-links { flex-wrap: wrap; gap: 8px; }
  .page-header { padding: var(--spacing-8) var(--spacing-4); }

  /* Hero on index */
  .hub-hero { padding: var(--spacing-8) var(--spacing-4) !important; }
  .hub-hero h1 { font-size: 28px !important; }
  .hub-hero-sub { font-size: 15px !important; }
}

@media (max-width: 480px) {
  /* Nav brand — shorten on tiny screens */
  .nav-brand span { display: none; }

  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tools-grid { grid-template-columns: 1fr !important; }
  .metrics-tier-body .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .page-header { padding: var(--spacing-6) var(--spacing-4) !important; }
  .page-header h1 { font-size: 22px !important; }
  .section-block, .content-section { padding: var(--spacing-5) var(--spacing-4) !important; }

  /* Accordion summaries — smaller text on tiny phones */
  details.accordion > summary { padding: 12px; font-size: 13px; }
  .acc-step-num { width: 22px; height: 22px; font-size: 11px; flex-shrink: 0; }

  /* Roster card simple */
  .roster-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Manager contacts stack */
  .manager-contacts { flex-direction: column !important; }
  .manager-link { font-size: 12px; }

  /* Index checklist grid */
  .checklist { grid-template-columns: 1fr !important; }

  /* Copy buttons always visible on touch (no hover) */
  .copy-btn { opacity: 1 !important; }
}
.nav-theme-btn:hover { background: #393939; color: #f4f4f4; }