/* ══════════════════════════════════════════════════════════════════
   GCP Portal — Shared Stylesheet (main.css)
   ══════════════════════════════════════════════════════════════════
   Single source of truth for design tokens and shared components.
   Used by all PHP page templates in public_html/.

   Adapted from screens/css/main.css (HTML mockup source).
   Changes from mockup version:
     - Added .flash message component
     - Added .s-footer component (slim post-login footer)
     - Added .page-container layout helper
   ══════════════════════════════════════════════════════════════════ */


/* ── 1. DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  /* Brand */
  --navy:       #1B2B5B;
  --navy-mid:   #243D7A;
  --navy-dark:  #0F1D42;
  --teal:       #2E75B6;
  --teal-light: #4A90D4;
  --teal-mid:   #0891B2;
  --teal-pale:  #D9E8F5;
  --white:      #FFFFFF;
  --bg:         #F0F4F8;

  /* Neutrals */
  --grey-50:    #F7F9FB;
  --grey-100:   #EEF2F7;
  --grey-200:   #D8E0EA;
  --grey-300:   #C4CFD9;
  --grey-400:   #9AABBD;
  --grey-500:   #7B8FA3;
  --grey-600:   #5A6A7E;
  --grey-800:   #2D3A4A;

  /* Domain colours (Option B — no RAG overlap) */
  --d1:     #2E75B6;  --d1-bg: #EBF4FC;
  --d2:     #0E9AA7;  --d2-bg: #D9F2F4;
  --d3:     #8E44AD;  --d3-bg: #F4ECF9;
  --d4:     #4A6FA5;  --d4-bg: #EAF0FA;

  /* RAG — Classic Traffic Light
     RESERVED for status indicators only.
     Never use for domain cards, decorative UI, or navigation. */
  --rag-red:       #DC2626;
  --rag-red-bg:    #FEE2E2;
  --rag-amber:     #F59E0B;
  --rag-amber-bg:  #FEF3C7;
  --rag-green:     #16A34A;
  --rag-green-bg:  #DCFCE7;
  /* Legacy aliases */
  --red:       var(--rag-red);
  --red-bg:    var(--rag-red-bg);
  --amber:     var(--rag-amber);
  --amber-bg:  var(--rag-amber-bg);
  --green:     var(--rag-green);
  --green-bg:  var(--rag-green-bg);
  /* Landing-page aliases */
  --red-light:    var(--rag-red-bg);
  --amber-light:  var(--rag-amber-bg);
  --green-light:  var(--rag-green-bg);

  /* Elevation */
  --shadow-sm:  0 1px 3px rgba(31,56,100,.08), 0 1px 2px rgba(31,56,100,.04);
  --shadow-md:  0 4px 12px rgba(31,56,100,.10), 0 2px 4px rgba(31,56,100,.06);
  --shadow-lg:  0 10px 30px rgba(31,56,100,.14), 0 4px 8px rgba(31,56,100,.08);
  --shadow-xl:  0 20px 50px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.10);

  /* Radii */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* Text on dark (navy/navy-dark) backgrounds */
  --on-dark-primary:   #FFFFFF;
  --on-dark-secondary: #C4D4E8;
  --on-dark-muted:     #8AAAC6;
}


/* ── 2. RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Always reserve scrollbar space so viewport width never jumps
   when switching between short and tall pages/panels. */
html { overflow-y: scroll; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--grey-800);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }


/* ── 3. NAVIGATION ─────────────────────────────────────────────── */
.nav {
  background: var(--navy);
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
/* Educator portal — black header/footer to distinguish from trainee navy */
.nav--educator { background: #0a0a0a; }
.nav-logo {
  display: flex; align-items: center;
  margin-right: 10px;
}
.nav-logo img {
  height: 28px;
  width: auto;
  display: block;
}

/* ── GCP Logo ─────────────────────────────────────────────────────────
   Pure CSS text logo. No images. No icon.

   HTML pattern:
     <a class="gcp-logo gcp-logo--{colour} gcp-logo--{size}" href="/">
       <span class="gcp-G">G</span><span class="gcp-C">C</span>
       <span class="gcp-P">P</span><span class="gcp-assport">assport</span>
     </a>

   Colour variants:
     gcp-logo--dark   dark / navy background  → assport in white
     gcp-logo--light  white / light background → assport in near-black

   Size variants (mobile-first, steps up at 768px):
     gcp-logo--nav     navigation bar    18px → 20px
     gcp-logo--auth    auth card headers 22px → 26px
     gcp-logo--hero    landing page hero 28px → 36px
     gcp-logo--footer  site footer       14px → 15px
   ──────────────────────────────────────────────────────────────────── */
.gcp-logo {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
}
.gcp-G { color: #DC2626; }   /* RAG red   */
.gcp-C { color: #F59E0B; }   /* RAG amber */
.gcp-P { color: #16A34A; }   /* RAG green */
.gcp-logo--dark  .gcp-assport { color: #ffffff; }
.gcp-logo--light .gcp-assport { color: #1e293b; }

/* Size variants — mobile first */
.gcp-logo--nav    { font-size: 18px; }
.gcp-logo--auth   { font-size: 22px; display: block; margin-bottom: 14px; }
.gcp-logo--hero   { font-size: 28px; display: block; margin-bottom: 20px; }
.gcp-logo--footer { font-size: 14px; }

@media (min-width: 768px) {
  .gcp-logo--nav    { font-size: 20px; }
  .gcp-logo--auth   { font-size: 26px; }
  .gcp-logo--hero   { font-size: 36px; }
  .gcp-logo--footer { font-size: 15px; }
}

.nav-title {
  color: white;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
}
.nav-spacer { flex: 1; }
.nav-link {
  color: var(--on-dark-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  transition: all .15s;
  cursor: pointer;
}
.nav-link:hover { color: var(--on-dark-primary); background: rgba(255,255,255,.08); }
.nav-link.active { color: var(--on-dark-primary); background: rgba(255,255,255,.12); font-weight: 600; }
.nav-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white;
  margin-left: 14px;
  cursor: pointer;
}


/* ── 4. RAG STATUS SYSTEM ──────────────────────────────────────── */

/* 4a. RAG Badges (compact pill badges) */
.rag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
}
.rag-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.rag-g     { background: var(--rag-green-bg); color: var(--rag-green); }
.rag-g .dot { background: var(--rag-green); }
.rag-a     { background: var(--rag-amber-bg); color: var(--rag-amber); }
.rag-a .dot { background: var(--rag-amber); }
.rag-r     { background: var(--rag-red-bg); color: var(--rag-red); }
.rag-r .dot { background: var(--rag-red); }
.rag-grey     { background: var(--grey-100); color: var(--grey-600); }
.rag-grey .dot { background: var(--grey-400); }

/* 4b. Outcome Dots (dashboard & educator-portal tiles) */
.outcome-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.outcome-dot {
  min-width: 44px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
  font-size: .68rem; font-weight: 700;
  color: #fff;
  pointer-events: none;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.outcome-dot.green { background: var(--rag-green); }
.outcome-dot.amber { background: var(--rag-amber); }
.outcome-dot.red   { background: var(--rag-red); }
.outcome-dot.grey  { background: var(--grey-400); }

/* 4c. Outcome Rows (expandable list inside domain cards) */
.outcome-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--grey-100);
  cursor: default;
}
.outcome-row:last-child { border-bottom: none; }
.outcome-row:hover { background: var(--grey-50); }
.outcome-row-code {
  font-size: .72rem; font-weight: 700;
  color: var(--grey-400);
  width: 34px; flex-shrink: 0;
}
.outcome-row-text {
  flex: 1;
  font-size: .8rem;
  color: var(--grey-800);
  line-height: 1.35;
}
.outcome-row-files {
  font-size: .7rem;
  color: var(--grey-400);
  white-space: nowrap;
}
.outcome-rag-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── 5. DOMAIN CARDS ───────────────────────────────────────────── */
.domain-card {
  background: white;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--grey-200);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
}
.domain-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--grey-300);
}
.domain-card-accent { height: 5px; width: 100%; }
.domain-card-body { padding: 18px 20px 16px; }
.domain-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.domain-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.domain-card-meta { flex: 1; min-width: 0; }
.domain-code {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 2px;
}
.domain-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 6px;
}
.domain-rag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.domain-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--grey-50);
  border-top: 1px solid var(--grey-100);
  font-size: .78rem;
}
.domain-footer-stat { color: var(--grey-400); }

/* Progress bars within domain cards */
.domain-progress-wrap { margin-bottom: 14px; }
.domain-progress-label {
  display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--grey-600);
  margin-bottom: 5px;
}
.domain-progress-pct { font-weight: 700; }
.prog-track {
  height: 8px;
  border-radius: 4px;
  background: var(--grey-100);
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}


/* ── 6. BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  box-sizing: border-box;
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  border: 1.5px solid transparent;
  font-family: inherit;
  text-decoration: none;
}
.btn-primary {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
}
.btn-primary:hover { background: var(--teal-light); border-color: var(--teal-light); }
.btn-secondary {
  background: var(--grey-100);
  color: var(--grey-800);
  border-color: var(--grey-200);
}
.btn-secondary:hover { background: var(--grey-200); }
.btn-danger {
  background: var(--rag-red-bg);
  color: var(--rag-red);
  border-color: #f5c6c3;
}
.btn-danger:hover { background: #FECACA; border-color: #f5c6c3; }
.btn-success {
  background: #16A34A;
  color: white;
  border-color: #15803d;
}
.btn-success:hover { background: #15803d; border-color: #166534; }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.expand-btn {
  font-size: .78rem;
  font-weight: 600;
  color: var(--teal);
  display: flex; align-items: center; gap: 4px;
  cursor: pointer;
}


/* ── 7. FORM ELEMENTS ──────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grey-800);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--grey-200);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--grey-800);
  background: white;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(46,117,182,.12);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field-error {
  font-size: 12px;
  color: var(--rag-red);
  margin-top: 2px;
}
.field input.has-error,
.field select.has-error,
.field textarea.has-error {
  border-color: var(--rag-red);
}

/* Prevent iOS Safari zoom-on-focus (inputs must be >=16px on mobile) */
@media (max-width: 768px) {
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
}


/* ── 8. PANELS & CARDS ─────────────────────────────────────────── */
.panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--grey-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-body { padding: 24px; }

.card-header {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--grey-100);
}
.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.card-subtitle {
  font-size: 13px;
  color: var(--grey-600);
  margin-top: 3px;
}
.card-body { padding: 20px 24px; }


/* ── 9. BADGES & CHIPS ─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-green { background: var(--rag-green-bg); color: var(--rag-green); }
.badge-amber { background: var(--rag-amber-bg); color: var(--rag-amber); }
.badge-red   { background: var(--rag-red-bg);   color: var(--rag-red); }
.badge-grey  { background: var(--grey-100);      color: var(--grey-600); }
.chip {
  font-size: .72rem;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--grey-100);
  color: var(--grey-600);
  white-space: nowrap;
}


/* ── 10. TOAST NOTIFICATIONS ───────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--grey-800);
  color: white;
  padding: 14px 24px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .3s, opacity .3s;
  pointer-events: none;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast.toast-error   { background: #B91C1C; }
.btn.btn-danger:disabled {
  background: var(--grey-300);
  color: var(--grey-500);
  border-color: var(--grey-300);
  cursor: not-allowed;
  opacity: 1;
}

/* ── Subscription renewal card ───────────────────────────────────── */
.sub-renew-card {
  border: 1.5px solid var(--red-bg, #FEE2E2);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.sub-renew-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--red-bg, #FEF2F2);
  color: var(--red, #B91C1C);
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 16px;
}
.sub-renew-body {
  padding: 20px 16px 16px;
}
.sub-renew-detail-rows {
  border: 1px solid var(--grey-200);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 16px;
}
.sub-renew-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--grey-100);
  font-size: 13.5px;
}
.sub-renew-row:last-child { border-bottom: none; }
.sub-renew-row-label {
  flex-shrink: 0;
  width: 56px;
  font-weight: 600;
  color: var(--grey-500);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.sub-renew-row-value { color: var(--grey-800); }
.sub-renew-price { font-weight: 700; color: var(--grey-900); font-size: 15px; }
.sub-renew-notice {
  border-radius: var(--r-md);
  font-size: 13px;
  padding: 10px 14px;
  margin-bottom: 16px;
  line-height: 1.6;
}
.sub-renew-notice--warn {
  background: #FEF3C7;
  color: #78350F;
  border: 1px solid #FCD34D;
}
.sub-renew-notice--info {
  background: #EFF6FF;
  color: #1E3A5F;
  border: 1px solid #BFDBFE;
}
.sub-renew-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  opacity: 1;
  margin-bottom: 10px;
  text-decoration: none;
}
.sub-renew-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.sub-renew-coming-soon {
  font-size: 12.5px;
  color: var(--grey-500);
  text-align: center;
}
.sub-badge--free {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.sub-portal-link {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}
.sub-portal-link:hover {
  text-decoration: underline;
}
.sub-history {
  margin-top: 24px;
  border-top: 1px solid var(--grey-200);
  padding-top: 16px;
}
.sub-history-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.sub-history-empty {
  font-size: 13px;
  color: var(--grey-500);
  padding: 12px 0;
}
.sub-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sub-history-table th {
  text-align: left;
  font-weight: 600;
  color: var(--grey-600);
  padding: 6px 10px 8px;
  border-bottom: 1.5px solid var(--grey-200);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.sub-history-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--grey-100);
  color: var(--navy);
  vertical-align: middle;
}
.sub-history-table tr:last-child td {
  border-bottom: none;
}
.sub-pay-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
}
.sub-pay-badge--ok {
  background: var(--rag-green-bg);
  color: var(--rag-green);
}
.sub-pay-badge--fail {
  background: var(--rag-red-bg);
  color: var(--rag-red);
}
@media (max-width: 640px) {
  .sub-history-table th:nth-child(3),
  .sub-history-table td:nth-child(3) { display: none; }
}



/* ── 11. OUTCOME LIST (expandable section within cards) ────────── */
.outcome-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
  background: #FAFBFD;
}
.outcome-list.open { max-height: 600px; }


/* ── 12. FLASH MESSAGES ────────────────────────────────────────── */
.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
}
.flash-success {
  background: var(--rag-green-bg);
  color: #14532d;
  border-color: #bbf7d0;
}
.flash-error {
  background: var(--rag-red-bg);
  color: #7f1d1d;
  border-color: #fecaca;
}
.flash-info {
  background: var(--teal-pale);
  color: var(--navy);
  border-color: #bfdbfe;
}
.flash-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  opacity: .6;
  line-height: 1;
  padding: 0 4px;
  flex-shrink: 0;
}
.flash-close:hover { opacity: 1; }


/* ── 13. PAGE CONTAINER ────────────────────────────────────────── */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px;
}
.page-container-narrow {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px;
}


/* ── 14. SITE FOOTER ───────────────────────────────────────────── */
/* Post-login footer — slim navy bar, text right-aligned (matches mockup .s-footer) */
.s-footer {
  background: var(--navy);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 11px;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: .01em;
  margin-top: auto;
}
/* Educator portal footer — black background; separator dot and all text white */
.s-footer--educator { background: #0a0a0a; }
.s-footer--educator .s-footer-sep { color: #ffffff; margin: 0 6px; }


/* ── 15. UTILITY ───────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }


/* ── 16. RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .domain-grid { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { padding: 0 14px; height: 50px; }
  .nav-link { display: none; }
  .page-container { padding: 16px 14px; }
  .page-container-narrow { padding: 24px 14px; }
}


/* ══════════════════════════════════════════════════════════════════
   17. MOBILE DASHBOARD COMPONENTS
   Mobile-first. Used by trainee/dashboard.php.
   These classes are prefixed m- to avoid collision with desktop
   dashboard components above.
   ══════════════════════════════════════════════════════════════════ */

/* ── Mobile nav additions ──────────────────────────────────────── */
/* On mobile the nav hides text links (done above in section 16).
   These additions supply the icon button and avatar used only in
   the mobile nav. */
.nav-icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-dark-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-icon-btn:hover { background: rgba(255,255,255,.08); color: var(--on-dark-primary); }
.nav-icon-btn--active { background: rgba(255,255,255,.10); color: var(--on-dark-primary); }
/* Hide mobile-only icons on desktop */
.nav-mobile-only { display: flex; }
@media (min-width: 641px) {
  .nav-mobile-only { display: none; }
}

/* ── Trainee info bar ──────────────────────────────────────────── */
.tbar {
  background: white;
  border-bottom: 1px solid var(--grey-200);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tbar-avatar {
  width: 48px; height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; color: white;
  letter-spacing: -.5px;
}
.tbar-name {
  font-size: .95rem; font-weight: 700;
  color: var(--navy); margin-bottom: 5px;
}
.tbar-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tbar-chip {
  font-size: .68rem; font-weight: 500;
  padding: 2px 8px; border-radius: 20px;
  background: var(--grey-100); color: var(--grey-600);
  border: 1px solid var(--grey-200);
  white-space: nowrap;
}
.tbar-chip-blue {
  background: var(--teal-pale); color: var(--teal);
  border-color: #B8D5EE;
}

/* ── Supervisor strip ──────────────────────────────────────────── */
.sup-strip {
  background: white;
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
.sup-avatar {
  width: 32px; height: 32px;
  border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: white;
  background: var(--teal);
}
.sup-label {
  font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--grey-400);
}
.sup-name { font-size: .82rem; font-weight: 600; color: var(--grey-800); }
.sup-status {
  margin-left: auto;
  font-size: .65rem; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  display: flex; align-items: center; gap: 3px;
}
.sup-linked { background: var(--rag-green-bg); color: var(--rag-green); }
.sup-avatar-tpd { background: #ede9fe; color: #6366f1; }
.sup-pending { background: var(--rag-amber-bg); color: var(--rag-amber); }
.sup-none {
  font-size: .78rem; color: var(--grey-400);
  font-style: italic;
}

/* ── Progress ring card ────────────────────────────────────────── */
.ring-card {
  background: white;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--grey-200);
  padding: 16px;
  margin: 12px 12px 0;
  display: flex; align-items: center; gap: 16px;
}
.ring-wrap {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
}
.ring-wrap svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--grey-100); stroke-width: 7; }
.ring-fill {
  fill: none;
  stroke: var(--teal);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 201;
  stroke-dashoffset: 201; /* set via inline style = 201*(1-pct) */
  transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);
}
.ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ring-pct {
  font-size: 1.05rem; font-weight: 800;
  color: var(--navy); line-height: 1;
}
.ring-sub {
  font-size: .56rem; color: var(--grey-400);
  font-weight: 500; text-transform: uppercase;
  letter-spacing: .04em;
}
.ring-detail { flex: 1; }
.ring-detail-title {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--grey-400); margin-bottom: 8px;
}
.ring-bars { display: flex; flex-direction: column; gap: 5px; }
.ring-bar-row { display: flex; align-items: center; gap: 8px; }
.ring-bar-label {
  font-size: .68rem; font-weight: 600;
  color: var(--grey-600); width: 14px; flex-shrink: 0;
}
.ring-bar-track {
  flex: 1; height: 6px;
  border-radius: 3px; background: var(--grey-100); overflow: hidden;
}
.ring-bar-fill { height: 100%; border-radius: 3px; }
.ring-bar-pct {
  font-size: .65rem; font-weight: 700;
  color: var(--grey-800); width: 28px; text-align: right;
}

/* ── Section heading (mobile) ──────────────────────────────────── */
.m-section-heading {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--grey-400);
  padding: 12px 16px 8px;
  display: flex; align-items: center; gap: 8px;
}
.m-section-heading::after {
  content: ''; flex: 1;
  height: 1px; background: var(--grey-200);
}

/* ── Mobile domain card stack ──────────────────────────────────── */
.m-domain-stack {
  padding: 0 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.m-domain-card {
  background: white;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--grey-200);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: block;
  position: relative;
}
.m-domain-card:hover { box-shadow: var(--shadow-md); }
.m-domain-accent { height: 4px; width: 100%; }
.m-domain-body { padding: 14px 16px 12px; }
.m-domain-header {
  display: flex; align-items: flex-start;
  gap: 12px; margin-bottom: 12px;
}
.m-domain-icon {
  width: 40px; height: 40px;
  border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.m-domain-code {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 2px;
}
.m-domain-name {
  font-size: .9rem; font-weight: 700;
  color: var(--navy); line-height: 1.25; margin-bottom: 6px;
}
.m-domain-rag-row { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.m-rag-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.m-rag-g { background: var(--rag-green); }
.m-rag-a { background: var(--rag-amber); }
.m-rag-r { background: var(--rag-red); }
.m-domain-prog { margin-bottom: 10px; }
.m-domain-prog-label {
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--grey-600); margin-bottom: 4px;
}
.m-domain-prog-pct { font-weight: 700; color: var(--navy); }
.m-prog-track {
  height: 7px; border-radius: 4px;
  background: var(--grey-100); overflow: hidden;
}
.m-prog-fill { height: 100%; border-radius: 4px; }
.m-domain-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  background: var(--grey-50);
  border-top: 1px solid var(--grey-100);
  font-size: .75rem; color: var(--grey-500);
}
.m-domain-footer-cta {
  display: flex; align-items: center; gap: 4px;
  font-size: .75rem; font-weight: 600; color: var(--teal);
}

/* ── Quick actions grid ────────────────────────────────────────── */
/* Downloads (PDF + ZIP) are unavailable on mobile */
.m-qa-no-mobile { display: none !important; }
.m-qa-mobile-only { display: inline; }
@media (min-width: 768px) {
  .m-qa-no-mobile { display: inline !important; }
  .m-qa-mobile-only { display: none !important; }
}

.m-qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 12px 12px;
}
.m-qa-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 16px 8px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--grey-200);
  background: white; cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, border-color .15s;
}
.m-qa-btn:hover { box-shadow: var(--shadow-sm); border-color: var(--grey-300); }
.m-qa-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.m-qa-label {
  font-size: .78rem; font-weight: 600;
  color: var(--grey-800); line-height: 1.2;
}

/* ── Mobile page footer (slim navy bar) ────────────────────────── */
.m-footer {
  background: var(--navy);
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: flex-end;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  letter-spacing: .01em;
  margin-top: auto;
}

/* ── Profile incomplete nudge banner ──────────────────────────── */
.profile-nudge {
  background: #FFF7ED;
  border-top: 1px solid #FED7AA;
  border-bottom: 1px solid #FED7AA;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: #92400E;
}
.profile-nudge-link {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 600;
  color: #B45309;
  white-space: nowrap;
  text-decoration: none;
}
.profile-nudge-link:hover { text-decoration: underline; }

/* ── No-supervisor prompt ──────────────────────────────────────── */
.sup-add-prompt {
  background: white;
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  padding: 10px 16px;
  display: flex; align-items: center;
  gap: 10px; font-size: .82rem; color: var(--grey-500);
}
.sup-add-link {
  margin-left: auto;
  font-size: .78rem; font-weight: 600; color: var(--teal);
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════
   18. ONBOARDING SCREEN — Stage 5.5
   One-time profile setup gate. Uses auth card shell for consistency.
   ══════════════════════════════════════════════════════════════════ */

/* Slightly wider than standard auth card — more form content */
.onboarding-card {
  max-width: 520px;
}

/* Section block within the onboarding form */
.onboarding-section {
  border: 1px solid var(--grey-200);
  border-radius: var(--r-md);
  padding: 18px 16px 14px;
  margin-bottom: 20px;
  background: var(--grey-50);
}

.onboarding-section-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Numbered step badge */
.onboarding-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.onboarding-help-text {
  font-size: .8rem;
  color: var(--grey-500);
  line-height: 1.5;
  margin: -8px 0 14px;
}

/* Individual training year row */
.year-row {
  background: white;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Row header: badge + label + today badge + remove btn */
.year-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Year badge colour chips (Y1, Y2 ...) */
.year-badge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--grey-400);
}
.year-badge.y1 { background: #6366f1; }
.year-badge.y2 { background: #8b5cf6; }
.year-badge.y3 { background: #0ea5e9; }
.year-badge.y4 { background: #14b8a6; }
.year-badge.y5 { background: #f97316; }
.year-badge.y6 { background: #ec4899; }

/* Year row label */
.year-row-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-700);
}

/* Remove button -- circular x */
.year-remove-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--grey-300);
  background: white;
  color: var(--grey-400);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.year-remove-btn:hover {
  border-color: var(--rag-red, #dc2626);
  color: var(--rag-red, #dc2626);
  background: #fef2f2;
}
/* Spacer on row 1 keeps header height consistent */
.year-remove-placeholder {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.year-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.year-row-num {
  font-size: .78rem;
  font-weight: 700;
  color: var(--grey-600);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.year-row-remove {
  font-size: .72rem;
  font-weight: 600;
  color: var(--rag-red);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.year-row-remove:hover { text-decoration: underline; }

/* Start / end date fields -- 2-column grid, labelled */
.year-row-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.year-date-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-500);
  margin-bottom: 3px;
  letter-spacing: .01em;
}
.year-date-field {
  min-width: 0; /* allow grid cell to shrink below the native date control's intrinsic width */
}
.year-date-field input[type="date"] {
  width: 100%;
  box-sizing: border-box;
}
/* NOTE: the mobile single-column stacking for these date fields lives in
   the inline <style> block in trainee/settings.php, NOT here — that block
   redefines .year-row-dates and loads after main.css, so it overrides any
   rule placed here. See settings.php @media (max-width:768px). */
/* year-row-sep no longer rendered but keep class to avoid JS errors */
.year-row-sep { display: none; }

/* Add year button */
.btn-add-year {
  width: 100%;
  padding: 10px;
  border: 1.5px dashed var(--grey-300);
  border-radius: var(--r-sm);
  background: white;
  color: var(--teal);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.btn-add-year:hover {
  border-color: var(--teal);
  background: var(--teal-pale);
}


/* ══════════════════════════════════════════════════════════════════
   19. AUTH PAGE COMPONENTS  (s- prefix, mirrors mobile-mockups.html)
   Used by: login.php, register.php, onboarding.php, reset-password.php
   ══════════════════════════════════════════════════════════════════ */

/* Outer page wrapper — full viewport height, centred card */
.s-auth-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 16px 48px;
  background: var(--bg);
}

/* The white card container */
.s-auth-card {
  width: 100%;
  max-width: 440px;
  background: white;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Logo-only navy band at the top */
.s-auth-logo-band {
  background: var(--navy);
  padding: 22px 24px 18px;
  text-align: center;
}

/* 1px separator between logo band and title band */
.s-auth-sep {
  height: 1px;
  background: rgba(255,255,255,.15);
}

/* Slightly deeper navy title band below the separator */
.s-auth-title-band {
  background: var(--navy-dark);
  padding: 14px 24px 18px;
  text-align: center;
}

/* Logo inside auth card */
.s-auth-logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.3px;
  display: block;
}
.s-auth-logo .G { color: #DC2626; }
.s-auth-logo .C { color: #F59E0B; }
.s-auth-logo .P { color: #16A34A; }
.s-auth-logo .rest { color: white; }

/* Title and subtitle inside title band */
.s-auth-title    { font-size: 1.2rem; font-weight: 700; color: white; margin: 0 0 3px; }
.s-auth-subtitle { font-size: .84rem; color: #8A9DC0; margin: 0; }

/* White form body below the header bands */
.s-auth-body { padding: 24px 20px 28px; }

/* Small footer note inside the form body */
.s-auth-footer {
  margin: 10px 0 0;
  font-size: .78rem;
  color: var(--grey-500);
  text-align: center;
  line-height: 1.5;
}
.s-auth-footer a { color: var(--teal); font-weight: 500; }
.s-auth-footer a:hover { text-decoration: underline; }

/* Form fields */
.s-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.s-field-readonly { font-size: 14px; color: var(--grey-700); padding: 11px 13px; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--r-sm, 8px); }
.s-field label { font-size: 12.5px; font-weight: 600; color: var(--grey-800); }
.s-field input,
.s-field select,
.s-field textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1.5px solid var(--grey-200);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--grey-800);
  background: white;
  transition: border-color .15s;
}
.s-field input:focus,
.s-field select:focus { outline: none; border-color: var(--teal); }
.s-field input.s-has-error,
.s-field select.s-has-error { border-color: var(--rag-red); }

/* Prevent iOS Safari zoom-on-focus */
@media (max-width: 768px) {
  .s-field input,
  .s-field select,
  .s-field textarea {
    font-size: 16px;
  }
}

/* Side-by-side field pair */
.s-field-row { display: flex; gap: 12px; }
.s-field-row .s-field { flex: 1; }

/* Inline label row (label + "Forgot password?" link) */
.s-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.s-label-row label { margin-bottom: 0; }
.s-label-link { font-size: .75rem; color: var(--teal); font-weight: 500; }
.s-label-link:hover { text-decoration: underline; }

/* Password toggle wrapper */
.s-pwd-wrap { position: relative; }
.s-pwd-wrap input { padding-right: 44px; }
.s-pwd-toggle {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer; color: var(--grey-400);
  display: flex; align-items: center;
  padding: 4px;
}
.s-pwd-toggle:hover { color: var(--teal); }

/* Primary action button (full width) */
.s-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 18px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
  width: 100%;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.s-btn-primary { background: var(--teal); color: white; border-color: var(--teal); }
.s-btn-primary:hover { background: var(--teal-light); border-color: var(--teal-light); }

/* Alert/error block inside auth body */
.s-alert {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.s-alert-error   { background: #FEF2F2; border: 1px solid #FECACA; color: var(--rag-red); }
.s-alert-success { background: #F0FDF4; border: 1px solid #BBF7D0; color: var(--rag-green); }
.s-alert-info    { background: var(--teal-pale); border: 1px solid #bfdbfe; color: var(--navy); }

/* Tab bar (register form — Str / Dct switcher) */
.s-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--grey-200);
  background: var(--grey-50);
}
.s-tab {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
}
.s-tab:hover { color: var(--grey-800); }
.s-tab.active { color: var(--teal); border-bottom-color: var(--teal); background: white; }

/* Slim navy bar at the foot of every auth page (replaces complex site footer) */
.s-auth-page-footer {
  background: var(--navy);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: .01em;
  margin-top: auto;
}
.s-auth-page-footer-spacer { flex: 1; }
.s-auth-page-footer-copy { font-size: 10px; }


/* ══════════════════════════════════════════════════════════════════
   20. DOMAIN DETAIL COMPONENTS — Stage 7
   Used by: trainee/domain.php
   CSS classes match mobile-mockups.html (s- prefix)
   ══════════════════════════════════════════════════════════════════ */

/* Back breadcrumb */
.s-page-back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid var(--grey-200);
  font-size: .85rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
}
.s-page-back:hover { opacity: .8; }

/* Domain hero card */
.s-domain-hero {
  padding: 16px;
  margin: 12px 12px 0;
  border-radius: var(--r-lg);
  background: white;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--grey-200);
}
.s-domain-hero-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.s-domain-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.s-domain-hero-code {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 2px;
}
.s-domain-hero-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}

/* Domain progress bar (inside hero) */
.s-domain-prog { margin-top: 4px; }
.s-domain-prog-label {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  font-weight: 600;
  color: var(--grey-500);
  margin-bottom: 6px;
}
.s-domain-prog-pct { font-weight: 700; }
.s-prog-track {
  height: 6px;
  background: var(--grey-100);
  border-radius: 3px;
  overflow: hidden;
}
.s-prog-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}

/* RAG badge row (inside hero) */
.s-domain-rag-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.s-rag-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.s-rag-g { background: var(--rag-green); }
.s-rag-a { background: var(--rag-amber); }
.s-rag-r { background: var(--rag-red); }

/* Year tabs — horizontal scrollable
   IMPORTANT: overflow-x:auto forces overflow-y:hidden — padding on the scroll
   container itself clips pill borders. Fix: zero vertical padding on the wrapper;
   use margin on the INNER .s-year-tabs instead. In the BFC created by overflow-x:auto,
   child margins ARE included in the container's auto height, so nothing clips. */
.s-year-tabs-wrap {
  padding: 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.s-year-tabs-wrap::-webkit-scrollbar { display: none; }
.s-year-tabs {
  display: flex;
  gap: 6px;
  min-width: max-content;
  margin-top: 10px;
  margin-bottom: 8px;
}
.s-year-tab {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--grey-200);
  background: white;
  font-size: .8rem;
  font-weight: 600;
  color: var(--grey-600);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.s-year-tab.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

/* Outcome list */
.s-outcome-list {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s-outcome-card {
  background: white;
  border-radius: var(--r-md);
  border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .28s ease, border-left-width .28s ease, box-shadow .28s ease;
}
/* Open: RAG colour shows as a thicker LEFT EDGE only (the spine "becomes" the edge). */
.s-outcome-card.s-outcome-open {
  border-left-width: 5px;
}
.s-outcome-card[data-rag="red"].s-outcome-open    { border-left-color: var(--rag-red); }
.s-outcome-card[data-rag="amber"].s-outcome-open  { border-left-color: var(--rag-amber); }
.s-outcome-card[data-rag="green"].s-outcome-open  { border-left-color: var(--rag-green); }

.s-outcome-card-body {
  padding: 12px 14px;
  display: flex;
  align-items: stretch;
  gap: 11px;
  cursor: pointer;
  transition: gap .28s ease;
}
/* RAG spine — slim coloured vertical bar down the side (replaces the old 32x32 letter box).
   On open it collapses to width 0 (becoming the card's coloured left edge) and the gap
   closes, sliding the text left. A single shared .28s timing keeps the spine, gap, left
   edge and the expand panel height all moving together (open AND close). */
.s-outcome-rag-pill {
  width: 5px;
  align-self: stretch;
  min-height: 36px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  font-size: 0;
  transition: width .28s ease, margin .28s ease;
}
.s-outcome-card.s-outcome-open .s-outcome-card-body { gap: 0; }
.s-outcome-card.s-outcome-open .s-outcome-rag-pill  { width: 0; margin: 0; }
.s-outcome-rag-r { background: var(--rag-red); }
.s-outcome-rag-a { background: var(--rag-amber); }
.s-outcome-rag-g { background: var(--rag-green); }

/* Expand panel — animated height via grid-template-rows 0fr -> 1fr (no fixed
   heights, no JS measuring). The .open class is the sole driver (toggleOutcome
   no longer sets inline display). The inner wrapper is clipped while collapsed. */
.s-outcome-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.s-outcome-card.s-outcome-open .s-outcome-expand { grid-template-rows: 1fr; }
.s-outcome-expand-inner { overflow: hidden; min-height: 0; }
.s-outcome-card.s-outcome-open .s-outcome-expand-inner { padding-bottom: 14px; }

.s-outcome-code {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--grey-400);
  margin-bottom: 2px;
}
.s-outcome-text {
  font-size: .82rem;
  color: var(--grey-800);
  line-height: 1.4;
  font-weight: 500;
}
.s-outcome-meta {
  display: flex;
  gap: 8px;
  margin-top: 5px;
  align-items: center;
}
.s-outcome-files {
  font-size: .68rem;
  color: var(--grey-400);
  display: flex;
  align-items: center;
  gap: 3px;
}
.s-outcome-chevron {
  margin-left: auto;
  color: var(--grey-300);
  flex-shrink: 0;
  margin-top: 2px;
}
.s-outcome-chevron svg {
  transition: transform .15s ease;
}

/* RAG selector (inside expanded outcome) */
.s-rag-selector {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: var(--grey-50);
  border-top: 1px solid var(--grey-100);
}
.s-rag-opt {
  flex: 1;
  padding: 8px 6px;
  border-radius: var(--r-sm);
  border: 2px solid var(--grey-200);
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  background: white;
  color: var(--grey-400);
  transition: background .15s, border-color .15s, color .15s;
}
.s-rag-opt.sel-r { background: var(--rag-red-bg);   border-color: var(--rag-red);   color: var(--rag-red); }
.s-rag-opt.sel-a { background: var(--rag-amber-bg); border-color: var(--rag-amber); color: var(--rag-amber); }
.s-rag-opt.sel-g { background: var(--rag-green-bg); border-color: var(--rag-green); color: var(--rag-green); }

/* Evidence items — inset chips: each file in its own grey rounded box, separated
   from the others by a 7px gap (replaces the old full-width border-top dividers). */
.s-evidence-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  margin: 7px 14px 0;
  background: var(--grey-50);
  border: 1px solid var(--grey-100);
  border-radius: var(--r-sm);
  font-size: .78rem;
  color: var(--grey-800);
  transition: background .12s, border-color .12s;
}
.s-evidence-item:hover { background: white; border-color: var(--grey-200); }
.s-evidence-icon { font-size: .95rem; flex-shrink: 0; }
.s-evidence-name {
  font-weight: 600;
  color: var(--teal);
  flex: 1;
  min-width: 0;
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-evidence-del {
  color: var(--grey-300);
  padding: 4px;
  flex-shrink: 0;
  cursor: pointer;
}
.s-evidence-del:hover { color: var(--rag-red); }

.s-evidence-empty {
  padding: 9px 11px;
  margin: 7px 14px 0;
  background: var(--grey-50);
  border: 1px solid var(--grey-100);
  border-radius: var(--r-sm);
  font-size: .78rem;
  color: var(--grey-400);
  font-style: italic;
}

/* Upload zone */
.s-upload-zone {
  margin: 8px 12px 12px;
  padding: 20px 16px;
  border: 2px dashed var(--grey-200);
  border-radius: var(--r-md);
  text-align: center;
  background: var(--grey-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.s-upload-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--teal-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-upload-label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--navy);
}
.s-upload-sub {
  font-size: .74rem;
  color: var(--grey-500);
}
.s-upload-btn {
  margin-top: 4px;
  padding: 10px 24px;
  background: var(--teal);
  color: white;
  border-radius: var(--r-sm);
  font-size: .84rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.s-upload-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Evidence link (clickable file name) */
.s-evidence-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.s-evidence-link:hover .s-evidence-name { text-decoration: underline; }

/* Evidence edit button */
.s-evidence-edit {
  background: none;
  border: none;
  color: var(--grey-300);
  padding: 4px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-evidence-edit:hover { color: var(--teal); background: var(--grey-50); }

/* Evidence delete button */
.s-evidence-delete {
  background: none;
  border: none;
  color: var(--grey-300);
  padding: 4px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-evidence-delete:hover { color: var(--rag-red); background: var(--grey-50); }

/* Inline upload button (inside each outcome) */
.s-outcome-upload {
  padding: 8px 14px;
  border-top: 1px solid var(--grey-100);
}
.s-upload-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--teal-pale);
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.s-upload-inline-btn:hover { background: var(--teal); color: white; }
.s-upload-inline-btn:hover svg { stroke: white; }

/* Inline upload error message */
.s-upload-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-sm);
  color: #991b1b;
  font-size: .78rem;
  line-height: 1.4;
}

/* Upload progress overlay */
.s-upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.s-upload-progress-card {
  background: white;
  padding: 28px 36px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.s-upload-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--grey-200);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.s-upload-progress-text {
  font-size: .84rem;
  font-weight: 600;
  color: var(--navy);
}


/* ══════════════════════════════════════════════════════════════════
   21. EVIDENCE BY TRAINING YEAR — Dashboard section
   Used by: trainee/dashboard.php
   Mobile-first: domain blocks stack vertically.
   At ≥768px: switches to a 4-column domain grid matching the mockup.
   Prefix: ev-yr-
   ══════════════════════════════════════════════════════════════════ */

.ev-yr-card {
  background: white;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--grey-200);
  margin: 0 12px 60px;
  overflow: hidden;
}

/* Tab strip wrapper — horizontal scroll on mobile
   Only horizontal padding here. Vertical spacing via margin on .ev-yr-tabs
   so overflow-x:auto (which forces overflow-y:hidden) cannot clip pill borders. */
.ev-yr-tabs-wrap {
  padding: 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ev-yr-tabs-wrap::-webkit-scrollbar { display: none; }

.ev-yr-tabs {
  display: flex;
  gap: 6px;
  min-width: max-content;
  margin-top: 14px;
  margin-bottom: 12px;
}

.ev-yr-tab {
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--grey-200);
  background: white;
  font-size: .78rem;
  font-weight: 600;
  color: var(--grey-600);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.ev-yr-tab.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.ev-yr-tab:hover:not(.active) {
  background: var(--teal-pale);
  border-color: var(--teal);
  color: var(--teal);
}

/* Year panels — hidden until active */
.ev-yr-panel { display: none; }
.ev-yr-panel.active { display: block; }

/* "Showing all N files…" note above the All Years grid */
.ev-yr-all-meta {
  font-size: .78rem;
  color: var(--grey-500);
  padding: 10px 14px 4px;
}

/* Grid — single stacked column on mobile */
.ev-yr-grid {
  display: flex;
  flex-direction: column;
  padding: 2px 12px 14px;
  gap: 14px;
}

/* At 768px+: switch to 4-column domain grid */
@media (min-width: 768px) {
  .ev-yr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 4px 14px 16px;
  }
}

/* Domain block — contains label + evidence items for one domain */
.ev-yr-domain-block { min-width: 0; }

/* Coloured domain header pill */
.ev-yr-domain-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  text-align: center;
  margin-bottom: 8px;
}

/* Evidence item row — clickable link to /view-evidence */
.ev-yr-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 7px;
  background: var(--grey-50);
  border: 1px solid var(--grey-100);
  margin-bottom: 5px;
  text-decoration: none;
  color: var(--grey-800);
  transition: background .15s, border-color .15s;
}
.ev-yr-item:hover {
  background: var(--teal-pale);
  border-color: #B8D5EE;
}

.ev-yr-item-icon {
  flex-shrink: 0;
  color: var(--grey-400);
}
.ev-yr-item:hover .ev-yr-item-icon { color: var(--teal); }

.ev-yr-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Filename — truncates with ellipsis on narrow columns */
.ev-yr-item-name {
  font-size: .75rem;
  font-weight: 600;
  color: var(--teal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.ev-yr-item:hover .ev-yr-item-name { text-decoration: underline; }

/* Optional description line beneath the filename */
.ev-yr-item-desc {
  font-size: .65rem;
  font-weight: 400;
  color: var(--grey-400);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Sub-label: outcome code + file size (per-year) or year label (all-years) */
.ev-yr-item-meta {
  font-size: .65rem;
  color: var(--grey-400);
  display: block;
}

/* Empty state for a domain with no evidence */
.ev-yr-empty {
  font-size: .75rem;
  color: var(--grey-400);
  font-style: italic;
  padding: 4px 8px;
}


/* ══════════════════════════════════════════════════════════════════
   22. EVIDENCE TITLES, DESCRIPTION & MODALS
   Added: Stage 8.5 — user-titled evidence + viewer popup
   Prefix: s-evidence-main/text-block/desc, s-ev-meta-*, s-ev-viewer-*
   ══════════════════════════════════════════════════════════════════ */

/* Clickable evidence area (replaces the old <a> link) */
.s-evidence-main {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.s-evidence-main:hover .s-evidence-name { text-decoration: underline; }

/* Text column: title on top, description preview below */
.s-evidence-text-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Description preview — single line, truncated */
.s-evidence-desc {
  font-size: .7rem;
  color: var(--grey-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-weight: 400;
}

/* ── Upload metadata modal (title + description) ─────────────────── */
.s-ev-meta-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.s-ev-meta-card {
  background: white;
  border-radius: 16px;
  padding: 24px 20px 20px;
  max-width: 380px;
  width: 92%;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.s-ev-meta-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.s-ev-meta-subtitle {
  font-size: 12.5px;
  color: var(--grey-600);
  margin-bottom: 16px;
}
.s-ev-meta-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.s-ev-meta-input,
.s-ev-meta-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--grey-200);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--grey-800);
  box-sizing: border-box;
  transition: border-color .15s;
}
.s-ev-meta-input:focus,
.s-ev-meta-textarea:focus {
  outline: none;
  border-color: var(--teal);
}
.s-ev-meta-textarea {
  resize: vertical;
  min-height: 72px;
}
.s-ev-meta-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}
.s-ev-meta-btns {
  display: flex;
  gap: 8px;
}
/* "Check year settings" link shown in left slot of footer when date is out of range */
.s-ev-year-settings-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--grey-500);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.s-ev-year-settings-link:hover { color: var(--navy); }
.s-ev-meta-cancel {
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: var(--grey-100);
  color: var(--grey-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.s-ev-meta-cancel:hover { background: var(--grey-200); }
.s-ev-meta-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--teal);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.s-ev-meta-upload:hover { background: var(--navy); }
.s-ev-meta-upload:disabled { opacity: .6; cursor: not-allowed; }

/* ── Evidence viewer modal ────────────────────────────────────────── */

/* Base overlay — centred, content-driven. Type modifier classes override. */
.s-ev-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  box-sizing: border-box;
}

/* Base card — wraps to content height, capped at 90vh */
.s-ev-viewer-card {
  background: white;
  border-radius: 14px;
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
}

/* ── PDF: full-height, anchored to edges ─────────────────────────── */
.s-ev-viewer-overlay.s-ev-pdf {
  padding: 12px;
  align-items: flex-start;
}
.s-ev-viewer-overlay.s-ev-pdf .s-ev-viewer-card {
  height: calc(100vh - 24px);
  max-height: none;
}
.s-ev-viewer-overlay.s-ev-pdf .s-ev-viewer-body {
  flex: 1 1 auto;
  max-height: none;
}

/* ── Image: card wraps to image's natural display size ──────────────── */
.s-ev-viewer-overlay.s-ev-image {
  padding: 12px;
  align-items: center;
}
.s-ev-viewer-overlay.s-ev-image .s-ev-viewer-card {
  width: fit-content;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
}
/* Body wraps tightly around the image */
.s-ev-viewer-overlay.s-ev-image .s-ev-viewer-body {
  flex: 0 0 auto;
  overflow: hidden;
}

/* ── File prompt (Office docs / unsupported) ─────────────────────── */
.s-ev-viewer-overlay.s-ev-file .s-ev-viewer-card {
  max-width: 630px;
}
.s-ev-viewer-overlay.s-ev-file .s-ev-viewer-pdf-prompt {
  min-height: 360px;
}
.s-ev-viewer-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--grey-100);
  flex-shrink: 0;
}
.s-ev-viewer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
/* "Open in new tab" link button — shown in header */
.s-ev-viewer-open {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grey-100);
  color: var(--grey-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.s-ev-viewer-open:hover { background: var(--teal-pale); color: var(--teal); }
.s-ev-viewer-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--grey-100);
  color: var(--grey-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.s-ev-viewer-close:hover { background: var(--grey-200); color: var(--navy); }

/* Body — content-driven by default; PDF mode overrides to flex: 1 1 auto.
   min-height prevents the card collapsing while an image loads or on error. */
.s-ev-viewer-body {
  flex: 0 0 auto;
  min-height: 120px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  background: var(--grey-50);
}

/* Images — natural size, constrained by viewport units (not % to avoid
   circular dependency with fit-content card). Height preserves aspect ratio. */
.s-ev-viewer-img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 187px);
}

/* PDF iframe — fills the flex body when in PDF mode */
.s-ev-viewer-iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: none;
}

/* PDF prompt — shown on mobile instead of an iframe (which breaks on mobile).
   User taps "Open in new tab" to launch the native browser PDF viewer. */
.s-ev-viewer-pdf-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 24px;
  min-height: 180px;
  text-align: center;
}
.s-ev-viewer-pdf-icon { font-size: 44px; line-height: 1; }
.s-ev-viewer-pdf-msg {
  font-size: 13px;
  color: var(--grey-500);
  max-width: 240px;
  line-height: 1.45;
}
.s-ev-viewer-pdf-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  background: var(--teal);
  color: white;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.s-ev-viewer-pdf-open:hover { background: var(--navy); }

/* Loading spinner — shown while PDF iframe or image is fetching */
.s-ev-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 160px;
  flex: 1 1 auto;
}
.s-ev-loader::after {
  content: '';
  width: 36px;
  height: 36px;
  border: 3px solid var(--grey-200);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: s-ev-spin .7s linear infinite;
}
@keyframes s-ev-spin {
  to { transform: rotate(360deg); }
}

.s-ev-viewer-desc-wrap {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--grey-100);
  flex-shrink: 0;
  max-height: 120px;
  overflow-y: auto;
}
.s-ev-viewer-desc {
  font-size: 13px;
  color: var(--grey-600);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Mobile overrides — PDF shows a prompt on mobile (no iframe), so it gets
   the same compact centred card treatment as image/file, not the full-height
   desktop PDF layout */
@media (max-width: 767px) {
  .s-ev-viewer-overlay.s-ev-pdf,
  .s-ev-viewer-overlay.s-ev-image,
  .s-ev-viewer-overlay.s-ev-file {
    padding: 16px;
    align-items: center;
  }
  .s-ev-viewer-overlay.s-ev-pdf .s-ev-viewer-card,
  .s-ev-viewer-overlay.s-ev-image .s-ev-viewer-card,
  .s-ev-viewer-overlay.s-ev-file .s-ev-viewer-card {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
  }
  /* PDF body: content-driven on mobile, not full-height */
  .s-ev-viewer-overlay.s-ev-pdf .s-ev-viewer-body {
    flex: 0 0 auto;
    max-height: none;
  }
}


/* ══════════════════════════════════════════════════════════════════
   24. DATE INPUT STYLING
   Added: April 2026 — consistent date field appearance site-wide
   ══════════════════════════════════════════════════════════════════

   What this does:
   • color-scheme: light — prevents OS dark-mode from changing the
     date picker to a dark theme that clashes with the site UI
   • accent-color — tints the native picker's selected-date highlight,
     confirm button, and focus ring on iOS 15.4+ and modern Android/Chrome
   • ::-webkit-calendar-picker-indicator — replaces the default browser
     calendar icon with a brand-colored SVG on Chrome and Safari desktop
   • The calendar popup itself cannot be styled — it is rendered entirely
     by the OS / browser. These rules affect the closed input state and
     accent colors only.
   ══════════════════════════════════════════════════════════════════ */

input[type="date"] {
  color-scheme: light;
  /* accent-color uses a hard-coded hex because CSS custom properties
     are not reliably supported inside accent-color on all browsers */
  accent-color: #2E75B6;
}

/* Replace the default calendar icon with a brand-coloured one.
   Applies on Chrome (desktop + Android) and Safari desktop.
   iOS Safari ignores this — it uses its own wheel-picker UI. */
input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E75B6' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════
   25. OUTCOME EVIDENCE HINTS
   Added: April 2026 — hint button on outcome cards + hints modal
   ══════════════════════════════════════════════════════════════════

   Components:
   • .s-hint-btn          — small ℹ icon button on each outcome card header
   • .s-hints-overlay     — full-screen modal backdrop
   • .s-hints-card        — modal content card
   • .s-hints-header      — modal header row (icon + title + close)
   • .s-hints-title       — "Options to achieve and evidence this outcome"
   • .s-hints-subtitle    — outcome code (e.g. D1.3), muted
   • .s-hints-list        — <ul> of hint items
   • .s-hints-item        — individual hint <li>
   • .s-hints-close       — close button (top-right)
   ══════════════════════════════════════════════════════════════════ */

/* ── Hint button (on outcome card header) ──────────────────────────── */
.s-hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--grey-400);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s, color .15s;
  /* Sits between outcome meta and the expand chevron */
  margin-left: 2px;
}
.s-hint-btn:hover,
.s-hint-btn:focus-visible {
  background: rgba(46, 117, 182, 0.10);
  color: var(--teal, #2E75B6);
  outline: none;
}
.s-hint-btn:active {
  background: rgba(46, 117, 182, 0.18);
  color: var(--teal, #2E75B6);
}

/* ── Modal overlay ──────────────────────────────────────────────────── */
.s-hints-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(15, 29, 66, 0.55);
  display: flex;
  align-items: flex-end;   /* sheet-from-bottom on mobile */
  justify-content: center;
  padding: 0;
}

/* Desktop: centre the card */
@media (min-width: 640px) {
  .s-hints-overlay {
    align-items: center;
    padding: 24px;
  }
}

/* ── Modal card ─────────────────────────────────────────────────────── */
.s-hints-card {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 32px rgba(15, 29, 66, 0.18);
}

@media (min-width: 640px) {
  .s-hints-card {
    border-radius: 16px;
    max-height: 70vh;
    box-shadow: 0 8px 40px rgba(15, 29, 66, 0.22);
  }
}

/* ── Header ─────────────────────────────────────────────────────────── */
.s-hints-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--grey-100, #f1f5f9);
  flex-shrink: 0;
}

.s-hints-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(46, 117, 182, 0.10);
  color: var(--teal, #2E75B6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.s-hints-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy, #1B2B5B);
  line-height: 1.3;
}

.s-hints-subtitle {
  font-size: .74rem;
  color: var(--grey-400, #94a3b8);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.s-hints-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--grey-400, #94a3b8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s, color .15s;
}
.s-hints-close:hover,
.s-hints-close:focus-visible {
  background: var(--grey-100, #f1f5f9);
  color: var(--navy, #1B2B5B);
  outline: none;
}

/* ── Scrollable hint list ────────────────────────────────────────────── */
.s-hints-list {
  list-style: none;
  margin: 0;
  padding: 14px 18px 20px;
  overflow-y: auto;
  flex: 1;
  /* Custom scrollbar (Webkit) */
  scrollbar-width: thin;
  scrollbar-color: var(--grey-200, #e2e8f0) transparent;
}
.s-hints-list::-webkit-scrollbar { width: 4px; }
.s-hints-list::-webkit-scrollbar-track { background: transparent; }
.s-hints-list::-webkit-scrollbar-thumb { background: var(--grey-200, #e2e8f0); border-radius: 2px; }

.s-hints-item {
  position: relative;
  padding: 10px 12px 10px 32px;
  font-size: .84rem;
  color: var(--navy, #1B2B5B);
  line-height: 1.5;
  border-bottom: 1px solid var(--grey-100, #f1f5f9);
}
.s-hints-item:last-child {
  border-bottom: none;
}
/* Bullet dot */
.s-hints-item::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal, #2E75B6);
  opacity: 0.55;
}


/* ══════════════════════════════════════════════════════════════════
   26. NAV BELL ICON — Stage 11.8
   Bell notification button in the trainee nav, always visible.
   Red dot badge indicates unread notifications.
   ══════════════════════════════════════════════════════════════════ */

/* Bell button — extends .nav-icon-btn sizing, visible on all breakpoints */
.nav-bell {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: 4px;
  transition: background .15s, color .15s;
  text-decoration: none;
}

.nav-bell:hover {
  background: rgba(255,255,255,.08);
  color: var(--on-dark-primary);
}

.nav-bell.active {
  color: var(--on-dark-primary);
  background: rgba(255,255,255,.12);
}

/* Unread badge — red dot, absolute positioned top-right of bell button */
.nav-bell-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E53E3E;
  border: 1.5px solid var(--navy);
  display: block;
  pointer-events: none;
}

/* Hidden state — keeps the element in DOM so JS can show/hide it */
.nav-bell-badge--hidden {
  display: none;
}

/* On mobile the bell is always visible (unlike text nav links which hide) */
@media (max-width: 640px) {
  .nav-bell {
    display: flex;
  }
}

/* ══════════════════════════════════════════════════════════════════
   27. AES FEEDBACK VISIBILITY — Stage 11.9
   Teal pill badge on dashboard domain cards + feedback card on
   the domain detail page (trainee view only).
   ══════════════════════════════════════════════════════════════════ */
/* AES comment badge — circle icon in top-right of domain card */
.m-domain-comment-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #EBF8F2;
  border: 1.5px solid #C8EDE0;
  color: #0F6E56;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Domain page: AES feedback panel (shown when "AES feedback" tab is active) */
.s-aes-feedback-panel {
  max-width: 800px;
  margin: 12px auto 0;
  padding: 0 16px 24px;
}

/* Domain page: AES feedback section wrapper (trainee view) */
.s-aes-trainee-feedback {
  max-width: 800px;
  margin: 12px auto 0;
  padding: 0 16px;
}

.s-aes-trainee-feedback-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #0F6E56;
  margin-bottom: 8px;
}

/* Individual comment card */
.s-aes-trainee-feedback-card {
  background: #fff;
  border: 0.5px solid #9FE1CB;
  border-left: 3px solid #1D9E75;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.s-aes-trainee-feedback-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.s-aes-trainee-feedback-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E1F5EE;
  color: #085041;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s-aes-trainee-feedback-name {
  font-size: .82rem;
  font-weight: 600;
  color: #0F6E56;
}

.s-aes-trainee-feedback-date {
  font-size: .72rem;
  color: var(--grey-400);
  margin-top: 1px;
}

.s-aes-edited-tag {
  font-style: italic;
  font-size: .68rem;
  color: var(--grey-400);
  margin-left: 3px;
}

/* 'Former AES' inline badge — shown on comments from educators no longer linked */
.s-former-aes-tag {
  display: inline-flex;
  align-items: center;
  font-size: .65rem;
  font-weight: 600;
  font-style: normal;
  color: var(--grey-500);
  background: var(--grey-100);
  border: 0.5px solid var(--grey-200);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.s-aes-trainee-feedback-text {
  font-size: .84rem;
  color: var(--navy);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ── §23 Year-tag & Training-year validation (Stage 8.7) ─────────────── */

/* Year tag pill shown below evidence date input */
.s-year-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  border: 0.5px solid transparent;
}
.s-year-tag.valid  { background: #C0DD97; color: #173404; border-color: #639922; }
.s-year-tag.error  { background: #F09595; color: #26150E; border-color: #A32D2D; }
.s-year-tag.warn   { background: #FAC775; color: #412402; border-color: #BA7517; }

/* Supplementary message line under the tag */
.s-year-tag-msg {
  font-size: 11.5px;
  margin-top: 3px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.4;
}
.s-year-tag-msg.valid  { color: #27500A; }
.s-year-tag-msg.error  { color: #791F1F; }
.s-year-tag-msg.warn   { color: #633806; }

/* Today badge on training year rows in settings -- matches sup-linked style */
.s-today-badge {
  display: inline-flex;
  align-items: center;
  font-size: .65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--rag-green-bg);
  color: var(--rag-green);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Conflict panel (save blocked — evidence falls outside new date ranges) */
.s-conflict-panel {
  background: #FDECEA;
  border: 1px solid #E57373;
  border-radius: var(--r-md, 10px);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.s-conflict-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  color: #501313;
}
.s-conflict-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #501313;
  margin-bottom: 3px;
}
.s-conflict-subtitle {
  font-size: 12px;
  color: #791F1F;
  line-height: 1.5;
}
.s-conflict-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s-conflict-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 0.5px solid #E57373;
  border-radius: 8px;
  padding: 10px 12px;
}
.s-conflict-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #26150E;
  margin-bottom: 2px;
}
.s-conflict-item-meta {
  font-size: 11.5px;
  color: #791F1F;
}
.s-conflict-item .btn.sm {
  background: #fff;
  color: #A32D2D;
  border: 0.5px solid #E24B4A;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.s-conflict-item .btn.sm:hover {
  background: #FDECEA;
}
.s-conflict-more {
  font-size: 12px;
  color: #791F1F;
  font-weight: 500;
  padding: 6px 4px;
  border-top: 0.5px solid #E57373;
  margin-top: 2px;
}

/* Inline conflict-edit modal uses s-ev-meta-* styles from domain.php already */
/* Overlap warning row highlight */
.year-row.overlap-warn .year-row-dates input[type="date"] {
  border-color: #BA7517;
  background: #FFFBF0;
}

/* ══════════════════════════════════════════════════════════════════
   27b. AES COMMENT BLOCKS — base styles (educator readonly + trainee view)
   These classes are used in trainee/domain.php for the AES comments
   section and write form. Inline styles removed May 2026 — visual
   rules now live here so mobile overrides in §28 can actually apply.
   ══════════════════════════════════════════════════════════════════ */

/* Section wrapper — groups comment blocks or the write form */
.s-aes-section {
  margin-top: 10px;
  padding: 0 12px;
}

/* Individual comment card */
.s-aes-comment-block {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}

/* Comment meta line (author · date) */
.s-aes-comment-header {
  font-size: .75rem;
  color: var(--grey-500);
  margin-bottom: 6px;
}

/* Comment body text */
.s-aes-comment-text {
  font-size: .86rem;
  color: var(--navy);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* When the viewing AES owns this comment — add separator before edit/delete buttons */
.s-aes-comment-text--owned {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grey-100);
  margin-bottom: 8px;
}

/* Write form card */
.s-aes-write-form {
  background: #fff;
  border: 1.5px solid #9DD2E8;
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

/* Write form label */
.s-aes-write-label {
  font-size: .85rem;
  font-weight: 700;
  color: #1A6A8A;
  margin-bottom: 10px;
}

/* Write form textarea */
.s-aes-write-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--grey-200);
  border-radius: 8px;
  font-family: inherit;
  font-size: .84rem;
  color: var(--navy);
  resize: vertical;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════
   28. EDUCATOR MOBILE  (max-width: 640px)
   Applies to educator/portal.php, educator/trainee-overview.php,
   and trainee/domain.php ($readonly = true).
   All desktop layout is preserved above this breakpoint.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Educator info bar ─────────────────────────────────────────── */
  .ebar { padding: 12px 14px; gap: 10px; }
  .ebar-avatar { width: 38px; height: 38px; font-size: .9rem; border-radius: 10px; }
  .ebar-name { font-size: .88rem; }
  .ebar-stats { display: none; }

  /* ── Role tabs strip ───────────────────────────────────────────── */
  .role-tabs {
    padding: 0 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }
  .role-tabs::-webkit-scrollbar { display: none; }
  .role-tab { padding: 11px 14px; font-size: .78rem; white-space: nowrap; }

  /* ── Portal content area ───────────────────────────────────────── */
  .portal-content { padding: 14px; }
  .scope-bar { padding: 8px 14px; font-size: .78rem; flex-wrap: wrap; gap: 4px; }

  /* ── Trainee list rows → card style ───────────────────────────── */
  .trainee-list { border-radius: 12px; }
  .trow {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 13px 14px;
    position: relative;
  }
  .trow-name {
    font-size: .9rem;
    min-width: auto;
    width: 100%;
    padding-right: 70px; /* room for year badge */
  }
  .trow-meta {
    display: block;
    font-size: .75rem;
    color: var(--grey-500);
    width: 100%;
  }
  .trow-year {
    position: absolute;
    top: 13px;
    right: 14px;
  }
  .trow-rag {
    width: 100%;
    flex-wrap: wrap;
    gap: 5px;
  }
  .trow-actions {
    width: 100%;
    padding-top: 2px;
  }
  .trow-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
  }

  /* Compact trow variant (TPD/AES) — override year-badge padding */
  .trow-compact .trow-name { padding-right: 0; }
  .trow-name-block { width: 100%; min-width: 0; overflow: hidden; }
  .trow-subtitle { white-space: normal; }

  /* RAG counts — hide text label, just show count + letter on very small */
  .rag-cnt { font-size: .72rem; padding: 2px 7px; }

  /* ── Specialty group headers ───────────────────────────────────── */
  .specialty-header { padding: 8px 14px; font-size: .8rem; }
  .panel-section-title { font-size: .75rem; margin-bottom: 10px; }

  /* ── KPI grid (AD view) ────────────────────────────────────────── */
  .dean-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
  .dean-kpi { padding: 12px; border-radius: 10px; }
  .dean-kpi-val { font-size: 1.5rem; }
  .dean-kpi-label { font-size: .7rem; }

  /* ── Specialty summary table (AD / TPD) ────────────────────────── */
  .specialty-summary-table { border-radius: 10px; font-size: .78rem; }
  .sst-header { display: none; } /* too wide on mobile */
  .sst-row { flex-wrap: wrap; padding: 10px 12px; gap: 4px; }
  .sst-name { width: 100%; font-weight: 700; color: var(--navy); }
  .sst-count { font-size: .72rem; color: var(--grey-500); }
  .sst-years { font-size: .7rem; color: var(--grey-400); width: 100%; }
  .sst-bar-wrap { width: 100%; margin-top: 4px; }
  .sst-bar-pct { font-size: .7rem; }

  /* ── Trainee overview — educator info header ───────────────────── */
  .edu-trainee-header { padding: 14px; flex-wrap: wrap; gap: 10px; }
  .edu-th-avatar { width: 44px; height: 44px; font-size: 1rem; border-radius: 11px; }
  .edu-th-name { font-size: .95rem; gap: 6px; }
  .edu-th-chips { gap: 5px; }
  .edu-th-chip { font-size: .7rem; padding: 2px 8px; }
  .edu-th-aes { font-size: .75rem; }
  .edu-readonly-badge { font-size: .68rem; padding: 3px 9px; }
  .edu-back { font-size: .82rem; margin-bottom: 14px; }
  .edu-ring-card { padding: 16px; gap: 18px; border-radius: 12px; }
  .edu-ring-wrap { width: 76px; height: 76px; }
  .edu-ring-pct { font-size: 1.1rem; }
  .edu-section-heading { font-size: .76rem; margin-bottom: 10px; }

  /* ── Educator domain cards → m-domain-card style ──────────────── */
  .edu-domain-stack { gap: 10px; }
  .edu-domain-card {
    flex-direction: column;
    border-radius: 12px;
  }
  /* Side accent becomes top accent on mobile */
  .edu-dc-accent {
    width: 100%;
    height: 4px;
    flex-shrink: 0;
  }
  .edu-dc-body { padding: 12px 14px 10px; }
  .edu-dc-header { gap: 10px; }
  .edu-dc-icon { width: 38px; height: 38px; font-size: 1rem; border-radius: 9px; }
  .edu-dc-name { font-size: .88rem; margin: 2px 0 5px; }
  .edu-dc-rag-row { gap: 5px; }
  .edu-dc-rag { font-size: .67rem; padding: 2px 7px; }
  .edu-dc-prog { margin-top: 10px; }
  .edu-dc-prog-label { font-size: .72rem; }
  .edu-dc-prog-track { height: 6px; }
  .edu-dc-footer {
    padding: 9px 14px;
    font-size: .74rem;
  }

  /* ── PDF export button ─────────────────────────────────────────── */
  .edu-pdf-btn { padding: 11px 14px; font-size: .82rem; border-radius: 10px; }

  /* ── Evidence by year tabs ─────────────────────────────────────── */
  .ev-yr-card { border-radius: 10px; margin-bottom: 60px; }
  .ev-yr-tabs-wrap { padding: 0 12px; } /* horizontal only */
  .ev-yr-tabs { margin-top: 10px; margin-bottom: 10px; }
  .ev-yr-tab { padding: 9px 12px; font-size: .78rem; }

  /* ── Domain detail: readonly back bar ──────────────────────────── */
  .s-readonly-bar {
    padding: 9px 14px;
    font-size: .82rem;
    flex-wrap: nowrap;
  }
  .s-readonly-bar a { font-size: .82rem; }
  .s-readonly-badge { font-size: .68rem; padding: 3px 9px; }

  /* ── Domain hero ───────────────────────────────────────────────── */
  .s-domain-hero {
    border-radius: 0 0 14px 14px;
    padding: 14px 14px 13px;
    margin-bottom: 10px;
  }
  .s-domain-hero-header { gap: 10px; margin-bottom: 12px; }
  .s-domain-hero-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 1rem; }
  .s-domain-hero-code { font-size: .7rem; }
  .s-domain-hero-title { font-size: .95rem; }
  .s-domain-prog { margin-bottom: 10px; }
  .s-domain-prog-label { font-size: .73rem; }
  .s-domain-prog-track { height: 6px; }
  .s-domain-rag-row { gap: 4px; flex-wrap: wrap; }

  /* ── Year tabs ─────────────────────────────────────────────────── */
  /* Only horizontal padding on the scroll container — vertical spacing
     via margin on .s-year-tabs so it isn't clipped by overflow-y:hidden */
  .s-year-tabs-wrap { padding: 0 14px; }
  .s-year-tabs { gap: 5px; margin-top: 8px; margin-bottom: 8px; }
  .s-year-tab { padding: 6px 14px; font-size: .78rem; }

  /* ── Outcome list ──────────────────────────────────────────────── */
  .s-outcome-list { padding: 0 14px 16px; gap: 7px; }
  .s-outcome-card { border-radius: 11px; }
  .s-outcome-card-body { padding: 11px 12px; gap: 9px; }
  .s-outcome-rag-pill {
    /* Spine stays a thin vertical bar on mobile — do not revert to a box. */
    width: 5px;
    align-self: stretch;
    min-height: 32px;
    height: auto;
    font-size: 0;
    flex-shrink: 0;
    margin-top: 0;
  }
  .s-outcome-card.s-outcome-open .s-outcome-rag-pill { width: 0; margin: 0; }
  .s-outcome-code { font-size: .68rem; margin-bottom: 1px; }
  .s-outcome-text { font-size: .83rem; line-height: 1.35; margin-bottom: 3px; }
  .s-outcome-meta { font-size: .7rem; }
  .s-outcome-card.s-outcome-open .s-outcome-expand { padding: 11px 12px 0; }
  .s-outcome-card.s-outcome-open .s-outcome-expand-inner { padding-bottom: 12px; }
  .s-rag-selector { gap: 5px; margin-bottom: 11px; }
  .s-rag-opt { padding: 7px 5px; font-size: .73rem; border-radius: 7px; }
  .s-evidence-item { padding: 8px 10px; border-radius: 7px; gap: 7px; }
  .s-evidence-name { font-size: .78rem; }
  .s-evidence-meta { font-size: .68rem; }

  /* ── AES section wrapper ───────────────────────────────────────── */
  .s-aes-section { padding: 0 14px; margin-top: 10px; }

  /* ── AES comment blocks ────────────────────────────────────────── */
  .s-aes-comment-block { padding: 12px 14px; border-radius: 11px; }
  .s-aes-comment-header { font-size: .7rem; }
  .s-aes-comment-text { font-size: .83rem; }

  /* ── AES write form ────────────────────────────────────────────── */
  .s-aes-write-form { padding: 14px; border-radius: 11px; }
  .s-aes-write-label { font-size: .82rem; }
  .s-aes-write-textarea { font-size: .82rem; }

  /* ── Page back link (trainee own view) ─────────────────────────── */
  .s-page-back { padding: 9px 14px; font-size: .82rem; }

}


/* ══════════════════════════════════════════════════════════════════
   Educator domain detail — desktop two-column layout
   Added: May 2026. Desktop only (@media min-width 768px).
   Mobile layout lives in domain.php inline styles (unchanged).
   ══════════════════════════════════════════════════════════════════ */

/* ── Two-column wrapper ────────────────────────────────────────── */
.edu-dd-wrap {
  display: block; /* mobile: single column */
  padding-bottom: 60px; /* breathing room above footer on mobile */
}

/* ── Trainee info card (right col) — hidden on mobile ──────────── */
.edu-dd-trainee-card {
  display: none;
}

/* ── Right col comments wrapper — mobile: already rendered inline */
.edu-dd-right {
  display: block;
}

/* ── AES Comments heading pill — base style (all screen sizes) ─── */
.edu-dd-comments-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 12px 0 0 12px; /* top / right / bottom / left — matches s-year-tabs side gutter; s-aes-section margin-top handles gap below */
  background: #fff;
  border: 1.5px solid var(--grey-200);
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.edu-dd-comments-heading-right {
  font-size: .68rem;
  font-weight: 500;
  color: var(--grey-400);
}

/* ── No-comments placeholder — all screen sizes ────────────────── */
.edu-dd-no-comments {
  padding: 24px 16px;
  text-align: center;
  color: var(--grey-400);
  font-size: .8rem;
}

.edu-dd-no-comments svg {
  display: block;
  margin: 0 auto 8px;
  stroke: var(--grey-300);
}

.edu-dd-no-comments-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}

@media (min-width: 768px) {

  /* GCP-LAYOUT-v2 — May 2026 (updated layout): two-column grid wraps domain hero,
     year tabs, and outcomes in left col; trainee card + AES comments card in right col. */

  /* edu-dd-wrap: two-column grid with 24px side padding + bottom breathing room.
     Domain hero and year tabs now live INSIDE the left column, so the old
     s-domain-hero / s-year-tabs-wrap desktop margin overrides are removed. */
  .edu-dd-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 60px;
  }

  /* DCT trainees have no AES — right column is not rendered; go full-width */
  .edu-dd-wrap.dct-view {
    grid-template-columns: 1fr;
  }

  /* Left column — domain hero + year tabs + outcomes list */
  .edu-dd-left {
    min-width: 0;
  }

  /* Domain hero inside left col: needs its own side offset reset
     (the old desktop rule pushed it out with margin-left:24px; now it's
     inside the grid col so we want no extra side margin). */
  .edu-dd-left .s-domain-hero {
    margin-left: 0;
    margin-right: 0;
  }

  /* Year tabs inside left col: no horizontal padding (sits inside grid column) */
  .edu-dd-left .s-year-tabs-wrap {
    padding: 0;
  }

  /* Right column — sticky; trainee card + AES comments card */
  .edu-dd-right {
    position: sticky;
    top: 76px; /* clears the fixed nav bar */
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding-top: 12px; /* matches s-domain-hero top margin in left column */
  }

  /* Trainee info card */
  .edu-dd-trainee-card {
    display: block;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  .edu-dd-tc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--grey-100);
  }

  .edu-dd-tc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1A6A8A 0%, #1e3a5f 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    font-weight: 800;
    flex-shrink: 0;
  }

  .edu-dd-tc-name {
    font-size: .92rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
  }

  .edu-dd-tc-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }

  .edu-dd-tc-chip {
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--grey-100);
    color: var(--grey-600);
    white-space: nowrap;
  }

  .edu-dd-tc-chip-blue {
    background: #dbeafe;
    color: #1d4ed8;
  }

  .edu-dd-tc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--grey-100);
    font-size: .78rem;
  }

  .edu-dd-tc-row:last-child {
    border-bottom: none;
  }

  .edu-dd-tc-label {
    color: var(--grey-500);
  }

  .edu-dd-tc-val {
    font-weight: 600;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .edu-dd-tc-bar-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .edu-dd-tc-bar-track {
    width: 64px;
    height: 5px;
    background: var(--grey-100);
    border-radius: 3px;
    overflow: hidden;
  }

  .edu-dd-tc-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--teal);
  }

  .edu-dd-aes-linked {
    font-size: .62rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--rag-green-bg);
    color: var(--rag-green);
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }

  /* ── AES Comments outer card ────────────────────────────────────────
     Pale blue-teal card wrapping the heading + all comment content.
     Sits below the trainee info card in the right column.             */
  .edu-dd-comments-outer {
    background: #e8f4f8; /* pale blue-teal tint — clearly distinct from white cards */
    border: 1px solid #b3d5e6;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  /* Comments heading: sits at top of the outer card — no pill style on desktop */
  .edu-dd-comments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #b3d5e6;
    border-radius: 0;
    box-shadow: none;
    font-size: .8rem;
    font-weight: 700;
    color: var(--navy);
    white-space: normal;
  }

  /* s-aes-section inside the outer card: side padding for breathing room */
  .edu-dd-comments-outer .s-aes-section {
    padding: 12px 12px 0;
    margin-top: 0;
  }

  /* Last s-aes-section gets bottom padding to match */
  .edu-dd-comments-outer .s-aes-section:last-child {
    padding-bottom: 12px;
  }

  /* AES feedback panel hidden on desktop — comments live in right column */
  .s-aes-feedback-panel { display: none; }

} /* end @media (min-width: 768px) */

/* ── File type tags (domain outcome header) ──────────────────────────── */
.s-outcome-type-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.s-ev-type-tag {
  font-size: .62rem;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.6;
}
.s-ev-type-pdf   { background: #fde8e8; color: #9b2f2f; }
.s-ev-type-docx  { background: #e8effe; color: #203888; }
.s-ev-type-xlsx  { background: #e8f4ea; color: #1a5c2a; }
.s-ev-type-pptx  { background: #fdf0e8; color: #8f430a; }
.s-ev-type-image { background: #e8f0fd; color: #2044a0; }