:root {
  --navy-900: var(--ces-navy-900);
  --navy-800: var(--ces-navy-800);
  --navy-700: var(--ces-navy-700);
  --navy-100: var(--ces-navy-100);
  --gold-500: var(--ces-gold);
  --gold-600: var(--ces-gold-hover);
  --gold-100: var(--ces-gold-light);
  --green-600: var(--ces-success);
  --green-500: var(--ces-success);
  --green-100: var(--ces-success-bg);
  --gray-900: var(--ces-ink);
  --gray-700: var(--ces-ink-soft);
  --gray-500: var(--ces-muted);
  --gray-300: var(--ces-line);
  --gray-200: var(--ces-line-soft);
  --gray-100: var(--ces-navy-50);
  --gray-50:  var(--ces-background);
  --white:    var(--ces-surface);
  --radius:   var(--ces-radius-lg);
  --radius-sm: var(--ces-radius-sm);
  --shadow:   var(--ces-shadow-md);
  --shadow-lg: var(--ces-shadow-lg);
  --font-main: var(--ces-font-body);
}

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

body {
  font-family: var(--font-main);
  background-color: var(--gray-50);
  color: var(--gray-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.header {
  background: var(--surface);
  color: var(--ink);
  padding: 24px 20px;
  border-bottom: 1px solid var(--border);
}

.header-container {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 768px) {
  .header-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
  }
}

.brand-badge {
  display: inline-block;
  background-color: var(--brand-tint-soft);
  color: var(--brand);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--brand-tint);
  margin-bottom: 6px;
}

.header-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.header-subtitle {
  color: var(--ink-muted);
  font-size: 17px;
  max-width: 600px;
}

.header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Container - Responsive Full Width */
.main-content {
  width: 100%;
  max-width: 1560px;
  margin: 20px auto 40px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 992px) {
  .main-content {
    grid-template-columns: 330px 1fr;
    padding: 0 24px;
    gap: 24px;
    align-items: start;
  }
}

@media (min-width: 1300px) {
  .main-content {
    grid-template-columns: 360px 1fr;
    padding: 0 32px;
    gap: 28px;
  }
}

/* Card */
.card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
}

/* Sidebar Progress & Checklist */
.sidebar {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding-right: 4px;
}

/* Custom scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 999px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-bar-bg {
  width: 100%;
  height: 10px;
  background-color: var(--gray-200);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
}

.progress-bar-fill {
  height: 100%;
  background: var(--brand);
  width: 0%;
  transition: width 0.3s ease;
}

.nav-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-step-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.nav-step-btn:hover {
  background: var(--surface-hover);
  border-color: var(--brand);
  color: var(--ink);
}

.nav-step-btn.active {
  background: var(--brand-tint-soft);
  color: var(--ink);
  border: 2px solid var(--brand);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink);
  border: 1px solid var(--border);
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}

.nav-step-btn.active .step-num {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.nav-step-btn.completed .step-num {
  background: var(--success-text); /* 7:1 with the white numeral, #16a34a was 3.3:1 */
  color: #fff;
  border-color: var(--success-text);
}

/* Step Content Sections */
.step-section {
  display: none;
}

.step-section.active {
  display: block;
}

.step-header {
  border-bottom: 2px solid var(--gray-100);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.step-kicker {
  color: var(--brand);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.step-title {
  font-size: 22px;
  color: var(--navy-900);
  font-weight: 800;
}

.step-description {
  color: var(--gray-700);
  font-size: 17px;
  margin-top: 6px;
}

/* Callout Box */
.callout {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  margin: 18px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 17px;
}

.callout-info {
  background-color: var(--navy-100);
  border-left: 4px solid var(--navy-800);
  color: var(--navy-900);
}

.callout-success {
  background-color: var(--green-100);
  border-left: 4px solid var(--green-600);
  color: #064e29;
}

.callout-warning {
  background-color: var(--gold-100);
  border-left: 4px solid var(--gold-500);
  color: #6b4d00;
}

.callout-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.16s ease;
  border: 2px solid transparent;
  min-height: var(--touch-min);
}

.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.95); } /* ECC: pressed state */

.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.btn-primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.btn-accent:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}

.btn-outline {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
}

.btn-outline:hover {
  background: var(--brand-tint-soft);
  border-color: var(--brand);
}

.btn-success {
  background: var(--green-600);
  color: var(--white);
}

.btn-success:hover {
  background: var(--green-500);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 17px;
}

/* Checklist Items */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}

.check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.18s ease;
}

.check-item:hover {
  border-color: var(--navy-700);
  background: var(--white);
}

.check-item.checked {
  background: var(--green-100);
  border-color: #a7dfc0;
}

.check-item.checked .check-item-title {
  text-decoration: line-through;
  color: var(--gray-500);
}

.check-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--gray-400, #a0aec0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--white);
  transition: all 0.15s ease;
}

.check-item.checked .check-box {
  background: var(--green-600);
  border-color: var(--green-600);
  color: var(--white);
}

.check-item-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--navy-900);
}

.check-item-desc {
  font-size: var(--text-body);
  color: var(--gray-700);
  margin-top: 3px;
}

/* Major Groups Grid */
.groups-filter {
  margin: 16px 0;
  display: flex;
  gap: 10px;
}

.search-input {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 14px 18px;
  background: var(--input-fill);
  color: var(--ink);
  border: 2px solid var(--input-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  box-shadow: var(--shadow-card);
}
.search-input::placeholder { color: var(--ink-muted); opacity: 1; }
.search-input:focus {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}
.search-input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.groups-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

@media (min-width: 600px) {
  .groups-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

.group-card {
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.16s ease;
}

.group-card:hover {
  border-color: var(--navy-700);
  box-shadow: 0 4px 12px rgba(0, 40, 85, 0.08);
}

.group-dept {
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-600);
}

.group-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-900);
}

/* Interactive Form & Outreach Generator */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 5px;
  color: var(--gray-700);
}

.form-control {
  width: 100%;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 14px 18px;
  background: var(--input-fill);
  color: var(--ink);
  border: 2px solid var(--input-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  box-shadow: var(--shadow-card);
}
.form-control::placeholder { color: var(--ink-muted); opacity: 1; }
.form-control:focus {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}
.form-control:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.outreach-output {
  margin-top: 18px;
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: var(--text-body);
  white-space: pre-wrap;
  font-family: inherit;
  color: var(--gray-900);
  max-height: 300px;
  overflow-y: auto;
}

/* Footer Navigation */
.step-footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy-900);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--gold-500);
  box-shadow: var(--shadow-lg);
  font-size: 17px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.25s ease;
  pointer-events: none;
  z-index: 100;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Sidebar Checklists (Always on the Left) */
.sidebar-checklists-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-step-group {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--white);
  transition: all 0.2s ease;
}

.sidebar-step-group.active {
  border-color: var(--navy-800);
  background: #f8fafc;
  box-shadow: 0 0 0 1px var(--navy-800);
}

.sidebar-step-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-900);
  cursor: pointer;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-200);
  user-select: none;
}

.sidebar-step-group.active .sidebar-step-group-header {
  color: var(--navy-800);
  border-bottom-color: var(--navy-200);
}

.sidebar-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-700);
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-step-group.active .sidebar-step-badge {
  /* ECC: active = solid brand badge, white number (gold is identity only) */
  background: var(--brand);
  color: #fff;
}

.sidebar-step-group.completed .sidebar-step-badge {
  background: var(--success-text);
  color: #fff;
}

.sidebar-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 !important;
}

.sidebar-checklist .check-item {
  padding: 8px 10px;
  gap: 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}

.sidebar-checklist .check-item:hover {
  background: var(--white);
  border-color: var(--navy-700);
}

.sidebar-checklist .check-item.checked {
  background: var(--green-100);
  border-color: #a7dfc0;
}

.sidebar-checklist .check-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border-width: 1.5px;
  margin-top: 1px;
}

.sidebar-checklist .check-item.checked .check-box {
  background: var(--green-600);
  border-color: var(--green-600);
}

.sidebar-checklist .check-item-title {
  font-size: 17px;
  line-height: 1.25;
}

.sidebar-checklist .check-item-desc {
  font-size: 17px;
  line-height: 1.25;
  margin-top: 2px;
  color: var(--gray-600);
}

/* CES Brand Versioning & WCAG 2.2 AA Interaction Enhancements */
.ces-version-tag {
  display: inline-block;
  font-size: var(--text-floor);
  font-family: inherit;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--ces-radius-full, 9999px);
  padding: 0.1rem 0.45rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  letter-spacing: 0.03em;
}

button, input, select, textarea, a.btn {
  min-height: 44px;
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  button, a, input, textarea, select {
    border: 2px solid ButtonText !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ECC touch targets for text links (44px minimum) */
.ecn-link-list a,
a.ecn-link { display: inline-flex; align-items: center; min-height: var(--touch-min); }
/* ECC: form controls do not inherit font by default, so they rendered in Arial */
button, input, select, textarea { font-family: inherit; }