/* ============================================================
   Topsham & Glasshouse Placement Hub — styles.css
   NHS-adjacent design, Public Sans, mobile-first
   ============================================================ */

:root {
  --nhs-blue:    #003087;
  --nhs-mid:     #005EB8;
  --nhs-light:   #41B6E6;
  --nhs-green:   #009639;
  --nhs-warm:    #F0F4F5;
  --white:       #ffffff;
  --text-primary:   #1d1d1d;
  --text-secondary: #535350;
  --text-tertiary:  #888780;
  --border:      rgba(0,0,0,0.12);
  --border-mid:  rgba(0,0,0,0.2);
  --bg-secondary: #F1EFE8;
  --sidebar-w:   210px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
}

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

body {
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--nhs-warm);
  line-height: 1.5;
}

/* ============================================================
   AUTH
   ============================================================ */

.auth-screen {
  min-height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--nhs-warm);
  padding: 20px;
}

.auth-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  padding: 32px;
  width: 100%;
  max-width: 400px;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.auth-practice-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-practice-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

.auth-logo-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--nhs-blue);
  line-height: 1.3;
}

.auth-logo-text span {
  display: block;
  font-weight: 400;
  opacity: 0.6;
  font-size: 11px;
}

.auth-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.auth-switch {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 14px;
}

.auth-switch a {
  color: var(--nhs-blue);
  text-decoration: none;
}

.auth-error {
  font-size: 12px;
  color: #A32D2D;
  background: #FCEBEB;
  border: 0.5px solid #F7C1C1;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* ============================================================
   PORTAL SHELL
   ============================================================ */

.portal {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
  width: var(--sidebar-w);
  background: var(--nhs-blue);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 16px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-cross {
  width: 28px;
  height: 28px;
  background: var(--nhs-light);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-cross svg { width: 16px; height: 16px; }

.logo-text {
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.logo-text span {
  display: block;
  opacity: 0.6;
  font-size: 10px;
  font-weight: 400;
}

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

.nav-section-label {
  padding: 12px 14px 4px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.12s;
  user-select: none;
}

.nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-item.active { background: rgba(255,255,255,0.12); color: #fff; border-left-color: var(--nhs-light); }

.sidebar-user {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  margin: -4px -6px;
}
.sidebar-user-info:hover { background: rgba(255,255,255,0.08); }

.sidebar-signout-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-signout-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-signout-btn svg { width: 16px; height: 16px; }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nhs-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--nhs-blue);
  flex-shrink: 0;
}

.user-info { flex: 1; min-width: 0; }
.user-name { color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: rgba(255,255,255,0.5); font-size: 10px; }

/* ============================================================
   MAIN AREA
   ============================================================ */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.topbar {
  background: var(--white);
  border-bottom: 0.5px solid var(--border);
  padding: 0 20px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 10;
}

.topbar-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.role-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #E6F1FB;
  color: #185FA5;
  font-weight: 500;
}

.notif-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  color: var(--text-secondary);
  font-size: 16px;
}

.notif-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E24B4A;
  border: 1.5px solid var(--white);
}

.notif-dropdown {
  position: absolute;
  top: 52px;
  right: 20px;
  width: 340px;
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  max-height: 400px;
  overflow-y: auto;
}

.notif-dropdown-header {
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notif-dropdown-title { font-size: 13px; font-weight: 500; }
.notif-dropdown-action { font-size: 11px; color: var(--nhs-blue); cursor: pointer; }

.notif-row {
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

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

.notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nhs-blue);
  margin-top: 5px;
  flex-shrink: 0;
}

.notif-dot.read {
  background: transparent;
  border: 1px solid var(--border-mid);
}

.notif-body { flex: 1; }
.notif-text { font-size: 12px; color: var(--text-primary); line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section { display: none; }
.section.visible { display: block; animation: fadeIn 0.18s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.page-title { font-size: 17px; font-weight: 500; color: var(--text-primary); }
.page-sub   { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.card-header {
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -14px -16px 12px;
}

.card-title { font-size: 13px; font-weight: 500; }
.card-link  { font-size: 11px; color: var(--nhs-blue); cursor: pointer; }

.card-title-row {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 12px;
}
.section-divider:first-child { margin-top: 0; }
.section-divider-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.section-divider-line {
  flex: 1;
  height: 0.5px;
  background: var(--border);
}

.staff-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 12px;
  margin-bottom: 8px;
  width: 100%;
}
.staff-grid > .person-card {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.welcome-banner {
  background: var(--nhs-blue);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.welcome-text h2 { font-size: 16px; font-weight: 500; }
.welcome-text p  { font-size: 12px; opacity: 0.7; margin-top: 3px; }

.welcome-pill {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  white-space: nowrap;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.tile {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.12s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tile:hover { border-color: var(--border-mid); }

.tile-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.tile-icon.blue   { background: #E6F1FB; color: #185FA5; }
.tile-icon.green  { background: #EAF3DE; color: #3B6D11; }
.tile-icon.amber  { background: #FAEEDA; color: #854F0B; }
.tile-icon.teal   { background: #E1F5EE; color: #0F6E56; }
.tile-icon.purple { background: #EEEDFE; color: #534AB7; }
.tile-icon.coral  { background: #FAECE7; color: #993C1D; }

.tile-label { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.tile-sub   { font-size: 11px; color: var(--text-secondary); }
.tile-count { font-size: 22px; font-weight: 500; color: var(--text-primary); margin-top: auto; }

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============================================================
   FORMS
   ============================================================ */

.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }

.field.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 5px;
}

.req { color: #E24B4A; }

input[type=text],
input[type=email],
input[type=password],
input[type=date],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: var(--white);
  color: var(--text-primary);
  appearance: none;
}

select { height: 36px; cursor: pointer; }
textarea { resize: vertical; min-height: 68px; line-height: 1.5; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--nhs-blue);
  box-shadow: 0 0 0 2px rgba(0,48,135,0.1);
}

input:disabled { background: var(--bg-secondary); color: var(--text-secondary); }

.form-shell {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 14px;
  align-items: start;
}

.form-main { min-width: 0; }

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
  background: var(--nhs-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s;
}

.btn-primary:hover { background: var(--nhs-mid); }

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.btn-secondary:hover { background: var(--bg-secondary); }

.btn-full { width: 100%; margin-top: 4px; }

.btn-approve {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: #EAF3DE;
  color: #3B6D11;
  border: 0.5px solid #C0DD97;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}

.btn-deny {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: #FCEBEB;
  color: #A32D2D;
  border: 0.5px solid #F7C1C1;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   TOGGLE
   ============================================================ */

.toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-mid);
  border-radius: 20px;
  cursor: pointer;
  transition: 0.2s;
}

.toggle-slider:before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}

.toggle input:checked + .toggle-slider { background: var(--nhs-blue); }
.toggle input:checked + .toggle-slider:before { transform: translateX(16px); }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toggle-label { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.toggle-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* ============================================================
   SCORING
   ============================================================ */

.score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.score-item {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 9px 10px;
}

.score-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 5px;
  font-weight: 500;
}

.stars { display: flex; gap: 3px; }

.star {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 0.5px solid var(--border-mid);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-tertiary);
  transition: all 0.1s;
  font-family: inherit;
}

.star.on { background: #FAEEDA; border-color: #FAC775; color: #854F0B; }
.star:hover { border-color: #FAC775; }

/* ============================================================
   SCORE OVERVIEW (averages)
   ============================================================ */

.overview-header {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.score-overview-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.score-overview-name {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.score-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.score-bar-label {
  font-size: 11px;
  color: var(--text-secondary);
  width: 120px;
  flex-shrink: 0;
}

.score-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  background: var(--nhs-blue);
  border-radius: 3px;
  transition: width 0.3s;
}

.score-bar-val {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ============================================================
   FEEDBACK LIST
   ============================================================ */

.feedback-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.feedback-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.feedback-from { font-size: 13px; font-weight: 500; }
.feedback-date { font-size: 11px; color: var(--text-tertiary); }

.feedback-scores {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.score-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 0.5px solid var(--border);
}

.score-pill strong { color: var(--text-primary); }

.feedback-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.feedback-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.delivered-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  background: #EAF3DE;
  color: #3B6D11;
}

/* ============================================================
   LEARNER INFO BOX (in feedback form)
   ============================================================ */

.learner-info-box {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   CURRICULUM GUIDANCE PANEL
   ============================================================ */

.guidance-panel { position: sticky; top: 0; }

.guidance-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  overflow: hidden;
}

.guidance-header {
  background: var(--nhs-blue);
  padding: 12px 14px;
}

.guidance-header-title {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.guidance-header-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 3px;
}

.guidance-body { padding: 12px 14px; }

.guidance-year-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  background: #E6F1FB;
  color: #185FA5;
  margin-bottom: 10px;
}

.guidance-item {
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
}

.guidance-item:last-child { border-bottom: none; }
.guidance-item-title { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.guidance-item-desc  { font-size: 11px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }

.guidance-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 8px 0;
  text-align: center;
  line-height: 1.5;
}

/* ============================================================
   RESOURCES / ACCORDIONS
   ============================================================ */

.accordion {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  overflow: hidden;
  margin-bottom: 8px;
}

.accordion-header {
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.12s;
}

.accordion-header:hover { background: var(--bg-secondary); }

.accordion-body {
  padding: 0 16px 14px;
  border-top: 0.5px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  display: none;
}

/* ============================================================
   RESOURCE CONTENT — formatted HTML from content_html field
   ============================================================ */

.resource-content {
  color: var(--text-primary);
  line-height: 1.65;
  margin-bottom: 4px;
}
.resource-content ul,
.resource-content ol {
  padding-left: 20px;
  margin: 4px 0 12px;
}
.resource-content li { margin-bottom: 4px; }

/* Section headers — direct children only (not inline bold inside li) */
.resource-content > b,
.resource-content > strong {
  display: block;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 4px;
}
.resource-content > b:first-child,
.resource-content > strong:first-child { margin-top: 0; }

/* Inline bold inside list items — stays inline */
.resource-content li b,
.resource-content li strong,
.resource-content p b,
.resource-content p strong {
  display: inline;
  font-weight: 600;
  color: var(--text-primary);
}

.resource-content p { margin: 0 0 10px; }
.resource-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 6px 0 12px;
}
.resource-content td {
  padding: 5px 14px 5px 0;
  vertical-align: top;
  color: var(--text-secondary);
  width: 50%;
}
.resource-content em { color: var(--text-secondary); }

/* ── Colour-coded section header chips ──
   Classes assigned by JS post-processor based on text content.
   Same text = same colour across all year groups. */
.resource-content > b.rc-h,
.resource-content > strong.rc-h {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px 3px 8px;
  border-radius: 5px;
  border-left: 3px solid currentColor;
  font-size: 12px;
  margin-bottom: 6px;
}
.rc-placement    { color: #003087; background: #EBF3FF; }
.rc-expect       { color: #005C2A; background: #E8F5EC; }
.rc-requirements { color: #92400E; background: #FEF9EC; }
.rc-themes       { color: #4C1D95; background: #F5F0FF; }
.rc-assessments  { color: #991B1B; background: #FFF5F5; }
.rc-dops         { color: #065F46; background: #ECFDF5; }
.rc-history      { color: #374151; background: #F9FAFB; }

/* Guidance sidebar — smaller variant */
.guidance-item-desc .resource-content ul,
.guidance-item-desc .resource-content ol { padding-left: 14px; margin: 2px 0 6px; }
.guidance-item-desc .resource-content li { margin-bottom: 2px; }
.guidance-item-desc .resource-content > b,
.guidance-item-desc .resource-content > strong {
  margin-top: 10px;
  margin-bottom: 2px;
}
.guidance-item-desc .resource-content > b:first-child,
.guidance-item-desc .resource-content > strong:first-child { margin-top: 0; }
.guidance-item-desc .resource-content > b.rc-h,
.guidance-item-desc .resource-content > strong.rc-h {
  font-size: 10px;
  padding: 2px 7px 2px 6px;
  border-radius: 4px;
  margin-bottom: 3px;
}

.accordion-body.open { display: block; }

.cat-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 3px;
  display: inline-block;
}

.cat-badge.induction  { background: #E6F1FB; color: #185FA5; }
.cat-badge.audit      { background: #FAEEDA; color: #854F0B; }
.cat-badge.curriculum { background: #EAF3DE; color: #3B6D11; }
.cat-badge.keylinks   { background: #EEEDFE; color: #534AB7; }

.role-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

.role-tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 0.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.role-tag.on { background: var(--nhs-blue); color: #fff; border-color: var(--nhs-blue); }

/* ============================================================
   FILTER BAR
   ============================================================ */

.filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: center;
}

.filter-btn {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 0.5px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}

.filter-btn.active { background: #E6F1FB; color: #185FA5; border-color: #B5D4F4; }

/* ============================================================
   STAFF / STUDENT CARDS
   ============================================================ */

#staff-list {
  display: block;
}

.person-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.2s;
}

.person-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.person-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}

.person-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.person-role { font-size: 11px; color: var(--text-secondary); }
.person-email { font-size: 11px; color: var(--nhs-blue); margin-top: 3px; }

.stu-expand { display:none; width:100%; border-top:0.5px solid var(--border); padding-top:12px; margin-top:4px; }
.person-card.stu-open .stu-expand { display:block; }
.stu-toggle-hint { font-size:11px; color:var(--text-tertiary); margin-top:4px; }
.person-card.stu-open .stu-toggle-hint { display:none; }
.student-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px; width:100%; }
@media(max-width:640px){ .student-grid { grid-template-columns:1fr; } }
@media(min-width:641px) and (max-width:900px){ .student-grid { grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   APPROVALS
   ============================================================ */

.approval-row {
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.approval-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EEEDFE;
  color: #534AB7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.approval-info { flex: 1; min-width: 0; }
.approval-name { font-size: 12px; font-weight: 500; }
.approval-role { font-size: 10px; color: var(--text-secondary); }
.approval-actions { display: flex; gap: 6px; }

/* ============================================================
   PLACEMENT FEEDBACK
   ============================================================ */

.pf-availability-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.pf-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--border);
}

.pf-status-row:last-child { border-bottom: none; }

.pf-status-name { font-size: 12px; font-weight: 500; }
.pf-status-role { font-size: 11px; color: var(--text-secondary); }

.pf-status-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.pf-status-badge.submitted  { background: #EAF3DE; color: #3B6D11; }
.pf-status-badge.open       { background: #E6F1FB; color: #185FA5; }
.pf-status-badge.not-open   { background: var(--bg-secondary); color: var(--text-secondary); }

/* ============================================================
   MULTI-STEP FORMS
   ============================================================ */

.steps-bar {
  display: flex;
  gap: 3px;
  margin-bottom: 12px;
}

.step-pip {
  flex: 1;
  height: 4px;
  background: var(--border-mid);
  border-radius: 2px;
  transition: background 0.2s;
}

.step-pip.done   { background: var(--nhs-blue); }
.step-pip.active { background: var(--nhs-light); }

.step-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.step-label strong { color: var(--text-primary); }

.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}

.step-counter { font-size: 11px; color: var(--text-tertiary); }

/* Likert scales */
.scale-header {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.likert-group { display: flex; flex-direction: column; gap: 8px; }

.likert-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.likert-q {
  font-size: 12px;
  color: var(--text-primary);
  flex: 1;
  line-height: 1.4;
}

.likert-scale { display: flex; gap: 4px; flex-shrink: 0; }

.likert-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-mid);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: inherit;
  transition: all 0.1s;
}

.likert-btn.sel { background: var(--nhs-blue); color: #fff; border-color: var(--nhs-blue); }

/* 3-point exposure scale */
.exposure-group { display: flex; flex-direction: column; gap: 10px; }

.exposure-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exposure-q {
  font-size: 12px;
  color: var(--text-primary);
  flex: 1;
  line-height: 1.4;
}

.exposure-scale {
  display: flex;
  gap: 0;
  border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.exposure-btn {
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-right: 0.5px solid var(--border-mid);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
  white-space: nowrap;
}

.exposure-btn:last-child { border-right: none; }
.exposure-btn.sel { background: var(--nhs-blue); color: #fff; }

/* Single-select choice questions (placement feedback) */
.choice-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.choice-q {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

.choice-group { display: flex; flex-wrap: wrap; gap: 6px; }

.choice-btn {
  padding: 7px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
}

.choice-btn.sel { background: var(--nhs-blue); color: #fff; border-color: var(--nhs-blue); }

/* Matrix questions: shared options across several labelled rows */
.matrix-group { display: flex; flex-direction: column; gap: 12px; }

.matrix-row { display: flex; flex-direction: column; gap: 6px; }

.matrix-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ============================================================
   SUCCESS STATE
   ============================================================ */

.success-state {
  text-align: center;
  padding: 40px 20px;
}

.success-icon {
  width: 52px;
  height: 52px;
  background: #EAF3DE;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px;
  color: #3B6D11;
}

.success-title { font-size: 16px; font-weight: 500; }
.success-sub   { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }

/* ============================================================
   WARNINGS / INFO BANNERS
   ============================================================ */

.warning-banner {
  font-size: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FAEEDA;
  color: #854F0B;
  border: 0.5px solid #FAC775;
}

.info-banner {
  font-size: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #E6F1FB;
  color: #185FA5;
  border: 0.5px solid #B5D4F4;
}

.role-banner {
  font-size: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-banner.allowed  { background: #EAF3DE; color: #3B6D11; border: 0.5px solid #C0DD97; }
.role-banner.restricted { background: #FCEBEB; color: #A32D2D; border: 0.5px solid #F7C1C1; }

/* ============================================================
   MODAL
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
}
.modal-box.modal-wide { max-width: 780px; }

.modal-header {
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title { font-size: 15px; font-weight: 500; }
.modal-close { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--text-tertiary); font-family: inherit; }
.modal-body  { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 0.5px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
   ICONS (simple SVG-based, inline substitutes)
   These will be replaced by Tabler icon CDN in production
   ============================================================ */

/* Icons are now handled by Feather icons library */
[data-feather] {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  color: currentColor;
}

/* ============================================================
   SCHEDULING
   ============================================================ */

.scheduling-status-row {
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scheduling-status-row:last-child { border-bottom: none; }

/* ============================================================
   CHECKBOX GROUP
   ============================================================ */

.checkbox-group { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-row input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--nhs-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-row span { font-size: 13px; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-small {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-small:hover { background: var(--nhs-warm); border-color: var(--text-secondary); }

.btn-danger { color: #b71c1c; border-color: #b71c1c; }
.btn-danger:hover { background: #ffebee; }

/* ============================================================
   ACCORDION
   ============================================================ */

.accordion-body { padding: 16px; border-top: 1px solid var(--border); }

/* ============================================================
   QUILL EDITOR
   ============================================================ */

.ql-container { font-size: 14px; font-family: 'Public Sans', system-ui, sans-serif; }
.ql-toolbar { border: 1px solid var(--border); border-bottom: none; background: #fafaf9; }
.ql-toolbar.ql-snow .ql-stroke { stroke: var(--text-secondary); }
.ql-toolbar.ql-snow .ql-fill { fill: var(--text-secondary); }
.ql-toolbar.ql-snow button:hover .ql-stroke { stroke: var(--nhs-blue); }
.ql-toolbar.ql-snow button:hover .ql-fill { fill: var(--nhs-blue); }
.ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--nhs-blue); }
.ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--nhs-blue); }

/* ============================================================
   MOBILE MENU BUTTON (hamburger — hidden on desktop)
   ============================================================ */

.topbar-menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  margin-right: 8px;
  cursor: pointer;
  color: var(--text-primary);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.topbar-menu-btn:hover { background: var(--bg-secondary); }
.topbar-menu-btn svg { width: 20px; height: 20px; }

/* Sidebar backdrop overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 149;
}
.sidebar-overlay.open { display: block; }

/* ============================================================
   MOBILE
   ============================================================ */

@media (min-width: 769px) {
  .topbar-title { display: none; }
  .topbar-actions { margin-left: auto; }
}

@media (max-width: 768px) {
  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    z-index: 150;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  .sidebar.open {
    transform: translateX(0);
  }

  .topbar-menu-btn { display: flex; }

  .tiles { grid-template-columns: 1fr 1fr; }
  .row2  { grid-template-columns: 1fr; }
  .score-grid { grid-template-columns: 1fr; }
  .form-shell { grid-template-columns: 1fr; }
  .guidance-panel { display: none; }
  .field.row2 { grid-template-columns: 1fr; }

  .auth-card { padding: 24px 20px; }
}

/* ============================================================
   USERS TABLE
   ============================================================ */

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.users-table thead {
  background: var(--nhs-warm);
  border-bottom: 2px solid var(--border);
}

.users-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
}

.users-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.users-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-pending { background: #fff3cd; color: #856404; }
.status-approved { background: #d4edda; color: #155724; }
.status-rejected { background: #f8d7da; color: #721c24; }
.status-disabled { background: #e2e3e5; color: #383d41; }
.status-archived { background: #d1ecf1; color: #0c5460; }

@media (max-width: 480px) {
  .tiles { grid-template-columns: 1fr; }
  .welcome-pill { display: none; }
  .users-table { font-size: 12px; }
  .users-table th, .users-table td { padding: 8px; }
}

/* ============================================================
   INDUCTION PAGE
   ============================================================ */
.ind-page{max-width:860px;margin:0 auto;padding:0 0 40px}
.ind-hero{background:linear-gradient(135deg,#003087 0%,#005EB8 100%);border-radius:var(--radius-lg);padding:28px 32px;margin-bottom:24px;color:#fff;position:relative;overflow:hidden}
.ind-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,0.06);pointer-events:none}
.ind-hero-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.ind-hero h1{font-size:22px;font-weight:600;margin-bottom:8px;line-height:1.25}
.ind-hero p{font-size:13px;opacity:.85;max-width:560px;line-height:1.6}
.ind-hero-meta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.ind-hero-pill{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:500}
.ind-intro{background:#fff;border:0.5px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow-sm)}
.ind-intro-icon{width:28px;height:28px;border-radius:50%;background:#E6F1FB;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:14px}
.ind-intro p{font-size:12.5px;color:var(--text-secondary);line-height:1.6}
.ind-intro strong{color:var(--text-primary)}
.ind-group-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary);margin:28px 0 10px;padding-left:2px}
.acc{background:#fff;border:0.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:8px}
.acc-header{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;user-select:none;transition:background .12s;border-left:4px solid transparent}
.acc-header:hover{background:#fafafa}
.acc-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.acc-titles{flex:1;min-width:0}
.acc-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.acc-sub{font-size:11px;color:var(--text-tertiary);margin-top:1px}
.acc-chevron{font-size:18px;color:var(--text-tertiary);transition:transform .2s;flex-shrink:0;line-height:1}
.acc.open .acc-chevron{transform:rotate(180deg)}
.acc-body{display:none;padding:16px 18px 18px;border-top:0.5px solid var(--border);font-size:13px;line-height:1.65;color:var(--text-secondary)}
.acc.open .acc-body{display:block}
.acc-green  .acc-header{border-left-color:#009639} .acc-green  .acc-icon{background:#E8F5EC}
.acc-blue   .acc-header{border-left-color:#005EB8} .acc-blue   .acc-icon{background:#E6F1FB}
.acc-teal   .acc-header{border-left-color:#00786A} .acc-teal   .acc-icon{background:#E0F4F1}
.acc-purple .acc-header{border-left-color:#7B2D8B} .acc-purple .acc-icon{background:#F4EDF6}
.acc-amber  .acc-header{border-left-color:#C07800} .acc-amber  .acc-icon{background:#FEF6E4}
.acc-red    .acc-header{border-left-color:#DA291C} .acc-red    .acc-icon{background:#FDECEA}
.acc-orange .acc-header{border-left-color:#C05200} .acc-orange .acc-icon{background:#FEF0E6}
.acc-slate  .acc-header{border-left-color:#425563} .acc-slate  .acc-icon{background:#EEF1F3}
.acc-dkgreen.acc-header{border-left-color:#007F3B} .acc-dkgreen.acc-icon{background:#E0F0E8}
.acc-indigo .acc-header{border-left-color:#3B1A6E} .acc-indigo .acc-icon{background:#EEE8F6}
.acc-maroon .acc-header{border-left-color:#7A0000} .acc-maroon .acc-icon{background:#F8ECEC}
.ind-h3{font-size:11.5px;font-weight:600;color:var(--text-primary);margin:16px 0 6px;text-transform:uppercase;letter-spacing:.05em}
.ind-h3:first-child{margin-top:0}
.ind-p{margin-bottom:10px} .ind-p:last-child{margin-bottom:0}
.ind-ul{padding-left:18px;margin-bottom:10px} .ind-ul li{margin-bottom:4px}
.ind-ol{padding-left:20px;margin-bottom:10px} .ind-ol li{margin-bottom:5px}
.ind-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:540px){.ind-2col{grid-template-columns:1fr}}
.site-card{background:var(--nhs-warm);border:0.5px solid var(--border);border-radius:var(--radius-md);padding:12px 14px}
.site-card-title{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:8px}
.site-card p{font-size:12px;margin-bottom:4px} .site-card p:last-child{margin-bottom:0}
.w3w{font-family:monospace;background:#fff;border:0.5px solid var(--border);border-radius:4px;padding:2px 6px;font-size:11px;color:#E11C1C}
.ind-photo{border-radius:var(--radius-md);overflow:hidden;margin:10px 0;box-shadow:var(--shadow-sm)}
.ind-photo img{display:block;width:100%;height:auto;max-height:280px;object-fit:cover}
.ind-photo-caption{font-size:11px;color:var(--text-tertiary);padding:6px 10px;background:#fafafa;border-top:0.5px solid var(--border)}
.ind-2photo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
@media(max-width:540px){.ind-2photo{grid-template-columns:1fr}}
.ind-alert{border-radius:var(--radius-md);padding:12px 14px;margin:10px 0;display:flex;gap:10px;align-items:flex-start}
.ind-alert-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.ind-alert p{font-size:12.5px;line-height:1.55}
.ind-alert strong{color:var(--text-primary)}
.ind-alert.red   {background:#FDECEA;border:0.5px solid #F5BFBB}
.ind-alert.amber {background:#FEF6E4;border:0.5px solid #F0D790}
.ind-alert.blue  {background:#E6F1FB;border:0.5px solid #A8CCF0}
.ind-alert.green {background:#E8F5EC;border:0.5px solid #8FD2A4}
.team-section-title{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin:14px 0 8px;padding-bottom:4px;border-bottom:0.5px solid var(--border)}
.team-section-title:first-child{margin-top:0}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px;margin-bottom:4px}
.tc{background:var(--nhs-warm);border:0.5px solid var(--border);border-radius:var(--radius-md);padding:10px 12px}
.tc-name{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.tc-role{font-size:11px;color:var(--text-secondary);line-height:1.3}
.tc-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.badge{font-size:10px;font-weight:500;border-radius:4px;padding:1px 7px;display:inline-block}
.badge-blue  {background:#E6F1FB;color:#185FA5}
.badge-green {background:#E8F5EC;color:#007A2F}
.badge-purple{background:#F4EDF6;color:#7B2D8B}
.badge-amber {background:#FEF6E4;color:#8A5700}
.badge-teal  {background:#E0F4F1;color:#005952}
.badge-red   {background:#FDECEA;color:#A32D2D}
.nsi-steps{list-style:none;padding:0;margin:8px 0}
.nsi-steps li{display:flex;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--border)}
.nsi-steps li:last-child{border-bottom:none}
.nsi-num{width:22px;height:22px;border-radius:50%;background:#DA291C;color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.nsi-text{font-size:12.5px;line-height:1.55} .nsi-text strong{color:var(--text-primary)}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:500px){.scope-grid{grid-template-columns:1fr}}
.scope-card{border-radius:var(--radius-md);padding:12px 14px}
.scope-card.can {background:#E8F5EC;border:0.5px solid #8FD2A4}
.scope-card.cant{background:#FDECEA;border:0.5px solid #F5BFBB}
.scope-card-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.scope-card.can  .scope-card-title{color:#007A2F}
.scope-card.cant .scope-card-title{color:#A32D2D}
.scope-card ul{padding-left:0;list-style:none}
.scope-card ul li{font-size:12px;padding:3px 0;display:flex;gap:6px;line-height:1.4}
.scope-card.can  ul li::before{content:'\2713';color:#009639;font-weight:600;flex-shrink:0}
.scope-card.cant ul li::before{content:'\2717';color:#DA291C;font-weight:600;flex-shrink:0}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:8px;margin-bottom:10px}
.contact-card{background:#fff;border:0.5px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--shadow-sm)}
.contact-card-name{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.contact-card-role{font-size:11px;color:var(--text-tertiary);margin-bottom:7px}
.contact-card a{display:block;font-size:12px;color:var(--nhs-mid);text-decoration:none;margin-bottom:3px}
.contact-card a:hover{text-decoration:underline}
.ind-quiz{background:#fff;border:1.5px dashed rgba(0,80,180,0.22);border-radius:var(--radius-lg);padding:28px 24px;text-align:center;margin-top:28px;box-shadow:var(--shadow-sm)}
.ind-quiz-icon{font-size:32px;margin-bottom:10px}
.ind-quiz h2{font-size:16px;font-weight:600;color:var(--nhs-blue);margin-bottom:8px}
.ind-quiz p{font-size:13px;color:var(--text-secondary);max-width:480px;margin:0 auto 6px;line-height:1.6}
.ind-quiz-ph{display:inline-block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#005EB8;background:#E6F1FB;border:1px dashed #A8CCF0;border-radius:6px;padding:8px 20px}
hr.ind-divider{border:none;border-top:0.5px solid var(--border);margin:14px 0}
.ind-doc-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:600;color:var(--nhs-mid);background:#E6F1FB;border:0.5px solid #A8CCF0;border-radius:6px;padding:7px 14px;text-decoration:none}
.ind-doc-link:hover{background:#D0E8F8;color:#003087}