/* The Data and AI School of London , application wizard styling (modern, card-based) */
:root {
  /* Native controls the browser paints itself: the date picker button, select
     popups, scrollbars. Left unset they are drawn for a light page, so on the
     dark theme the applicant's date of birth field shows a near-black calendar
     icon on a navy field and reads as a rendering fault. */
  color-scheme: light;
  --dais-navy:        #081830;   /* dark royal blue: header, footer, headings */
  --dais-blue:        #0a2240;   /* accent: buttons, active, focus, required */
  --dais-blue-dark:   #0e3268;
  --dais-heading:     #0a2240;   /* heading/emphasis text (light in dark mode) */
  --dais-success:     #166534;   /* success status text */
  --dais-success-ink: #FFFFFF;   /* text/glyph drawn ON a success fill */
  --dais-gold:        #7a4d08;   /* gold status text */
  --dais-white:       #FFFFFF;
  --dais-body:        #3F4754;   /* body text */
  --dais-muted:       #6B7280;   /* secondary text */
  --dais-bg:          #f5f0e8;   /* page background */
  --dais-surface:     #FFFFFF;   /* cards */
  --dais-border:      #dfe4ec;   /* default field border */
  --dais-border-strong:#c7cfdd;  /* hover border */
  --dais-ring:        rgba(10,34,64,0.18);
  --dais-radius:      12px;
  --dais-radius-lg:   16px;
  --dais-shadow:      0 10px 30px -12px rgba(8,24,48,0.22), 0 2px 6px -2px rgba(8,24,48,0.08);
}

* { box-sizing: border-box; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--dais-body);
  background: #F5F0E8;  /* parchment, matches the home page and the rest of the site */
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- HEADER ---- */
.dais-header {
  background: var(--dais-navy);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 2px 12px rgba(8,24,48,0.18);
}
.dais-header__logo img { height: 40px; width: auto; display: block; }
.dais-header__title {
  font-family: 'DM Sans', sans-serif;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---- PROGRESS BAR ---- */
.dais-progress {
  background: rgba(255,255,255,0.7);
  backdrop-filter: saturate(140%) blur(4px);
  border-bottom: 1px solid #e2e8f0;
  padding: 1.25rem 1rem 1.1rem;
  overflow-x: auto;
}
.dais-progress__track {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 0; min-width: 640px; max-width: 880px; margin: 0 auto;
}
.dais-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.dais-step + .dais-step::before {
  content: ''; position: absolute; top: 16px; left: -50%;
  width: 100%; height: 2px; background: #cdd5e1; z-index: 0;
}
.dais-step--completed + .dais-step::before,
.dais-step--active + .dais-step::before { background: var(--dais-blue); }
.dais-step__circle {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 700; font-family: 'DM Sans', sans-serif;
  border: 2px solid #cdd5e1; background: var(--dais-white);
  color: #9aa4b5; position: relative; z-index: 1;
  transition: all 0.2s ease;
}
.dais-step--completed .dais-step__circle {
  background: var(--dais-navy); border-color: var(--dais-navy); color: #fff;
}
.dais-step--active .dais-step__circle {
  background: var(--dais-blue); border-color: var(--dais-blue); color: #fff;
  box-shadow: 0 0 0 4px var(--dais-ring);
}
.dais-step__label {
  font-size: 0.62rem; font-family: 'DM Sans', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; margin-top: 8px;
  color: #9aa4b5; text-align: center; width: 100%; max-width: 66px;
  word-break: break-word; overflow-wrap: break-word; line-height: 1.3;
}
.dais-step--active .dais-step__label { color: var(--dais-blue); }
.dais-step--completed .dais-step__label { color: var(--dais-navy); }

/* ---- FORM CARD ---- */
.dais-form-card {
  position: relative;
  background: var(--dais-surface);
  border: 1px solid #e9edf3;
  border-radius: var(--dais-radius-lg);
  box-shadow: var(--dais-shadow);
  padding: 2.25rem 2.4rem 2rem;
  max-width: 680px;
  margin: 2rem auto;
  overflow: hidden;
}
.dais-form-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--dais-navy), var(--dais-blue));
}
.dais-form-card__title {
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: 1.6rem; line-height: 1.2; color: var(--dais-navy);
  margin: 0.25rem 0 0.3rem;
}
.dais-form-card__subtitle {
  font-size: 0.9rem; color: var(--dais-muted); margin: 0 0 1.6rem;
}

/* ---- FORM FIELDS ---- */
.dais-field { margin-bottom: 1.15rem; }
.dais-label {
  display: flex; align-items: center; flex-wrap: wrap;
  font-family: 'DM Sans', sans-serif; font-weight: 600;
  font-size: 0.82rem; color: var(--dais-navy); margin-bottom: 0.45rem;
}
.dais-label .required { color: var(--dais-blue); margin-left: 3px; font-weight: 700; }

.dais-static-value {
  width: 100%; border: 1px solid var(--dais-border); border-radius: var(--dais-radius);
  padding: 0.65rem 0.85rem; background: #f7f9fc; font-size: 0.92rem;
  color: var(--dais-navy); font-weight: 600;
}

.dais-input, .dais-select, .dais-textarea {
  width: 100%;
  border: 1.5px solid var(--dais-border);
  border-radius: var(--dais-radius);
  padding: 0.68rem 0.9rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--dais-navy);
  background: var(--dais-white);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  outline: none;
  appearance: none; -webkit-appearance: none;
}
.dais-input::placeholder, .dais-textarea::placeholder { color: #aab2c0; }
.dais-input:hover, .dais-select:hover, .dais-textarea:hover { border-color: var(--dais-border-strong); }
.dais-input:focus, .dais-select:focus, .dais-textarea:focus {
  border-color: var(--dais-blue);
  box-shadow: 0 0 0 4px var(--dais-ring);
  background: #fff;
}
/* Native date control keeps its picker */
.dais-input[type="date"] { appearance: auto; -webkit-appearance: none; }

/* Custom chevron for selects */
.dais-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}

.dais-textarea { resize: vertical; min-height: 90px; appearance: none; }

.dais-file-input { display: block; width: 100%; font-size: 0.9rem; color: var(--dais-muted); }
.dais-file-input::file-selector-button {
  margin-right: 1rem; padding: 0.5rem 1.1rem; background: var(--dais-navy);
  color: #FFFFFF; border: none; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.82rem;
  cursor: pointer; transition: background 0.15s;
}
.dais-file-input::file-selector-button:hover { background: var(--dais-blue-dark); }

.dais-checkbox-label { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9rem; cursor: pointer; }
.dais-checkbox-label input[type="checkbox"] {
  width: 18px; height: 18px; min-width: 18px; margin-top: 2px;
  accent-color: var(--dais-blue); cursor: pointer;
}

.dais-error { font-size: 0.8rem; color: #dc2626; margin-top: 0.35rem; font-weight: 600; }
.dais-help { font-size: 0.78rem; color: var(--dais-muted); margin-top: 0.3rem; line-height: 1.5; }

/* ---- BUTTONS ---- */
.dais-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.7rem; border-radius: var(--dais-radius);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.9rem;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.08s ease, background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.dais-btn:active { transform: translateY(1px); }
.dais-btn--primary {
  background: var(--dais-blue); color: #FFFFFF; border-color: var(--dais-blue);
  box-shadow: 0 6px 16px -6px rgba(10,34,64,0.6);
}
.dais-btn--primary:hover { background: var(--dais-blue-dark); border-color: var(--dais-blue-dark); box-shadow: 0 8px 20px -6px rgba(10,34,64,0.65); }
.dais-btn--secondary, .dais-btn--outline {
  background: var(--dais-white); color: var(--dais-body); border-color: var(--dais-border-strong);
}
.dais-btn--secondary:hover, .dais-btn--outline:hover { border-color: var(--dais-blue); color: var(--dais-blue); }

.dais-btn-group {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid #eef0f4;
  gap: 0.75rem;
}

/* ---- NOTICE BANNER ---- */
.dais-notice {
  background: #f5f0e8; border: 1px solid #cdd9e6; border-left: 4px solid var(--dais-blue);
  border-radius: var(--dais-radius); padding: 0.9rem 1.1rem;
  font-size: 0.85rem; color: #0a2240; margin-bottom: 1.5rem; line-height: 1.55;
}
.dais-notice--info { border-color: #9db4ce; border-left-color: var(--dais-blue); }

/* ---- SECTION DIVIDER ---- */
.dais-section-divider {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--dais-navy);
  border-bottom: 2px solid #e9edf3; padding-bottom: 0.5rem; margin: 1.9rem 0 1.3rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.dais-section-divider::before {
  content: ''; width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(135deg, var(--dais-navy), var(--dais-blue)); flex-shrink: 0;
}

/* ---- GRID ---- */
/* Each field shares the row's track sizes via subgrid (label / control / help /
   error), so the input boxes line up even when labels wrap to different heights. */
.dais-grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; row-gap: 0; align-items: start; }
.dais-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 1.25rem; row-gap: 0; align-items: start; }
@media (max-width: 560px) { .dais-grid-3 { grid-template-columns: 1fr; } }
.dais-grid-2 > div > .dais-field:last-child,
.dais-grid-3 > div > .dais-field:last-child { margin-bottom: 1.15rem; }

/* Opt-in row alignment: add `dais-grid--align` to a grid whose fields are a single
   clean row of simple label+input cells (no help text below the input). Each field
   shares the row's label and input track heights via subgrid, so the input boxes
   line up even when one label wraps to more lines. Only use on grids that fill
   their columns exactly (2 fields in grid-2, 3 in grid-3). */
.dais-grid--align { grid-template-rows: auto auto; }
.dais-grid--align > .dais-field { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
@media (max-width: 560px) {
  .dais-grid--align { grid-template-rows: none; display: block; }
  .dais-grid--align > .dais-field { display: block; }
}
@media (max-width: 560px) {
  .dais-grid-2 { grid-template-columns: 1fr; }
  .dais-header__title { font-size: 0.8rem; }
  .dais-form-card { padding: 1.5rem 1.25rem 1.4rem; margin: 1rem auto; border-radius: 14px; }
  .dais-form-card__title { font-size: 1.35rem; }
}

/* ---- COURSE DATES ---- */
.dais-course-dates {
  background: #f4f7fc; border: 1px solid #e2e8f0; border-left: 4px solid var(--dais-blue);
  border-radius: var(--dais-radius); padding: 0.9rem 1.1rem; font-size: 0.9rem; margin-top: 0.85rem;
}

/* ---- CONFIRMATION ---- */
.dais-confirm-box {
  background: #f0fdf4; border: 1.5px solid #86efac; border-radius: var(--dais-radius-lg);
  padding: 2.5rem 2rem; text-align: center; max-width: 600px; margin: 3rem auto;
  box-shadow: var(--dais-shadow);
}
.dais-confirm-box__icon { font-size: 3rem; margin-bottom: 1rem; }
.dais-confirm-box__ref {
  font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--dais-navy);
  font-size: 0.95rem; background: #ecfdf5; padding: 0.5rem 1.1rem; border-radius: 8px;
  display: inline-block; margin: 0.75rem 0; letter-spacing: 0.05em;
}

/* ---- FOOTER ---- */
.dais-footer { background: var(--dais-navy); color: #FFFFFF; padding: 2.25rem 1.5rem; font-size: 0.82rem; margin-top: 3.5rem; }
.dais-footer__inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.dais-footer__heading {
  font-family: 'DM Sans', sans-serif; font-weight: 700; color: #FFFFFF; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem;
}
.dais-footer a { color: #cdd9f0; text-decoration: none; }
.dais-footer a:hover { text-decoration: underline; color: #fff; }
.dais-footer__copy { text-align: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #2E508E; font-size: 0.75rem; color: #cdd9f0; }
@media (max-width: 560px) { .dais-footer__inner { grid-template-columns: 1fr; } }

/* ---- UPLOAD FILE NAME PREVIEW ---- */
.dais-file-name { font-size: 0.78rem; color: #a8690a; margin-top: 0.3rem; font-style: italic; }

/* ---- DOCUMENT CHECKLIST ---- */
.dais-doc-checklist { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 0.9rem; }
.dais-doc-checklist li { padding: 0.5rem 0 0.5rem 1.6rem; position: relative; border-bottom: 1px solid #f1f3f7; }
.dais-doc-checklist li::before { content: '\2192'; position: absolute; left: 0; color: var(--dais-blue); font-weight: 700; }
.dais-doc-checklist li .required-tag { font-size: 0.7rem; font-weight: 700; color: #dc2626; margin-left: 6px; text-transform: uppercase; }

/* ---- FIELD TOOLTIP ---- */
.dais-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--dais-navy);
  color: #ffffff; font-size: 9px; font-weight: 700; font-style: normal;
  cursor: default; margin-left: 6px; position: relative; vertical-align: middle;
  flex-shrink: 0; line-height: 1; transition: background 0.15s; user-select: none;
}
.dais-tip:hover { background: var(--dais-blue); color: #fff; }
.dais-tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); background: #111827; color: #fff; font-size: 11.5px;
  font-weight: 400; font-family: 'DM Sans', sans-serif; line-height: 1.45;
  padding: 8px 11px; border-radius: 8px; width: max-content; max-width: 240px;
  white-space: normal; text-align: left; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0.18s, visibility 0.18s; z-index: 9999; box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.dais-tip::before {
  content: ''; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #111827; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0.18s, visibility 0.18s; z-index: 9999;
}
.dais-tip:hover::after, .dais-tip:hover::before { opacity: 1; visibility: visible; }
.dais-tip.tip-down::after { bottom: auto; top: calc(100% + 7px); }
.dais-tip.tip-down::before { bottom: auto; top: calc(100% + 1px); border-top-color: transparent; border-bottom-color: #111827; }

/* ============================================================================
   DARK MODE. The wizard palette (--dais-*) plus some hardcoded light hex are
   remapped for dark. --dais-navy and --dais-blue are used for BOTH backgrounds
   and text, so the text uses (headings, labels, input text) are overridden
   explicitly to stay legible. Accent becomes the site's dark-mode gold so the
   wizard matches the rest of the site in dark mode.
   ========================================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --dais-bg:            #0C1524;
  --dais-surface:       #14233C;
  --dais-white:         #14233C;   /* only ever used as a background */
  --dais-body:          #C7D3E3;
  --dais-muted:         #93A6BF;
  --dais-border:        #26374F;
  --dais-border-strong: #3A567F;
  --dais-navy:          #0A1526;   /* header / footer background */
  --dais-blue:          #C89930;   /* accent -> site dark-mode gold */
  --dais-blue-dark:     #DFB040;
  --dais-heading:       #ECE7DB;
  --dais-success:       #56D68A;
  --dais-success-ink:   #0C1524;
  --dais-gold:          #E0A83A;
  --dais-ring:          rgba(200,153,48,0.30);
  --dais-shadow:        0 10px 30px -12px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4);
}
html[data-theme="dark"] body { background: var(--dais-bg); color: var(--dais-body); }

/* Header title / footer text stay white on the dark navy bg (already hardcoded). */

/* --- Progress bar (was translucent-white + light greys) --- */
html[data-theme="dark"] .dais-progress { background: rgba(20,35,60,0.72); border-bottom-color: var(--dais-border); }
html[data-theme="dark"] .dais-step + .dais-step::before { background: var(--dais-border); }
html[data-theme="dark"] .dais-step__circle { border-color: var(--dais-border-strong); color: var(--dais-muted); }
html[data-theme="dark"] .dais-step__label { color: var(--dais-muted); }
html[data-theme="dark"] .dais-step--completed .dais-step__circle { background: var(--dais-blue); border-color: var(--dais-blue); color: #0C1524; }
html[data-theme="dark"] .dais-step--active   .dais-step__circle { color: #0C1524; }
html[data-theme="dark"] .dais-step--completed .dais-step__label { color: var(--dais-blue); }

/* --- Card + text that used --dais-navy as a colour --- */
html[data-theme="dark"] .dais-form-card { border-color: var(--dais-border); }
html[data-theme="dark"] .dais-form-card__title,
html[data-theme="dark"] .dais-section-divider,
html[data-theme="dark"] .dais-label,
html[data-theme="dark"] .dais-static-value { color: #ECE7DB; }

/* --- Fields --- */
html[data-theme="dark"] .dais-input,
html[data-theme="dark"] .dais-select,
html[data-theme="dark"] .dais-textarea { color: var(--dais-body); }
html[data-theme="dark"] .dais-input::placeholder,
html[data-theme="dark"] .dais-textarea::placeholder { color: #6C7E97; }
html[data-theme="dark"] .dais-input:focus,
html[data-theme="dark"] .dais-select:focus,
html[data-theme="dark"] .dais-textarea:focus { background: var(--dais-white); }
html[data-theme="dark"] .dais-static-value { background: #0F1C30; }
html[data-theme="dark"] .dais-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A6BF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* --- Buttons: primary is gold in dark, so its text goes dark --- */
html[data-theme="dark"] .dais-btn--primary { color: #0C1524; }
html[data-theme="dark"] .dais-btn-group { border-top-color: var(--dais-border); }

/* --- Notice / info / section divider borders --- */
html[data-theme="dark"] .dais-notice { background: #14233C; border-color: var(--dais-border); color: var(--dais-body); }
html[data-theme="dark"] .dais-notice--info { border-color: var(--dais-border-strong); }
html[data-theme="dark"] .dais-section-divider { border-bottom-color: var(--dais-border); }
html[data-theme="dark"] .dais-course-dates { background: #14233C; border-color: var(--dais-border); }
html[data-theme="dark"] .dais-doc-checklist li { border-bottom-color: var(--dais-border); }

/* --- Confirmation (green box) --- */
html[data-theme="dark"] .dais-confirm-box { background: #10241C; border-color: #2E6B4C; }
html[data-theme="dark"] .dais-confirm-box__ref { background: #12302A; color: #86EFAC; }

/* --- File name + errors keep meaning, lifted for dark contrast --- */
html[data-theme="dark"] .dais-file-name { color: #E0A83A; }
html[data-theme="dark"] .dais-error,
html[data-theme="dark"] .dais-doc-checklist li .required-tag { color: #F87171; }

/* --- Account pages (register / register-interest) use inline .acct-* styles;
       override for dark here. The html[data-theme] prefix outranks the inline
       light rules by specificity, regardless of source order. --- */
html[data-theme="dark"] .acct-card { background: var(--dais-surface); border-color: var(--dais-border); box-shadow: var(--dais-shadow); }
html[data-theme="dark"] .acct-card h1 { color: #ECE7DB; }
html[data-theme="dark"] .acct-lead { color: var(--dais-muted); }
html[data-theme="dark"] .approval-pending-notice,
html[data-theme="dark"] .acct-msg { background: #14233C; border-color: var(--dais-border); border-left-color: var(--dais-blue); color: var(--dais-body); }
html[data-theme="dark"] .acct-form label { color: #ECE7DB; }
html[data-theme="dark"] .acct-form input,
html[data-theme="dark"] .acct-form select,
html[data-theme="dark"] .acct-form textarea { background: #14233C; border-color: var(--dais-border); color: var(--dais-body); }
html[data-theme="dark"] .acct-form input::placeholder,
html[data-theme="dark"] .acct-form textarea::placeholder { color: #6C7E97; }
html[data-theme="dark"] .acct-form input:focus,
html[data-theme="dark"] .acct-form select:focus,
html[data-theme="dark"] .acct-form textarea:focus { border-color: var(--dais-blue); box-shadow: 0 0 0 3px var(--dais-ring); }
html[data-theme="dark"] .acct-form .btn-submit { background: var(--dais-blue); color: #0C1524; }
html[data-theme="dark"] .acct-form .btn-submit:hover { background: var(--dais-blue-dark); }
html[data-theme="dark"] .acct-form .err { color: #F87171; }
html[data-theme="dark"] .acct-alt { color: var(--dais-muted); }
html[data-theme="dark"] .acct-alt a { color: var(--dais-blue); }

/* AUTO / SYSTEM mode: mirror of the dark block above for data-theme=system
   when the OS prefers dark, so the wizard matches the rest of the site. */
@media (prefers-color-scheme: dark) {
html[data-theme="system"] {
  color-scheme: dark;
  --dais-bg:            #0C1524;
  --dais-surface:       #14233C;
  --dais-white:         #14233C;   /* only ever used as a background */
  --dais-body:          #C7D3E3;
  --dais-muted:         #93A6BF;
  --dais-border:        #26374F;
  --dais-border-strong: #3A567F;
  --dais-navy:          #0A1526;   /* header / footer background */
  --dais-blue:          #C89930;   /* accent -> site dark-mode gold */
  --dais-blue-dark:     #DFB040;
  --dais-heading:       #ECE7DB;
  --dais-success:       #56D68A;
  --dais-success-ink:   #0C1524;
  --dais-gold:          #E0A83A;
  --dais-ring:          rgba(200,153,48,0.30);
  --dais-shadow:        0 10px 30px -12px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4);
}
html[data-theme="system"] body { background: var(--dais-bg); color: var(--dais-body); }

/* Header title / footer text stay white on the dark navy bg (already hardcoded). */

/* --- Progress bar (was translucent-white + light greys) --- */
html[data-theme="system"] .dais-progress { background: rgba(20,35,60,0.72); border-bottom-color: var(--dais-border); }
html[data-theme="system"] .dais-step + .dais-step::before { background: var(--dais-border); }
html[data-theme="system"] .dais-step__circle { border-color: var(--dais-border-strong); color: var(--dais-muted); }
html[data-theme="system"] .dais-step__label { color: var(--dais-muted); }
html[data-theme="system"] .dais-step--completed .dais-step__circle { background: var(--dais-blue); border-color: var(--dais-blue); color: #0C1524; }
html[data-theme="system"] .dais-step--active   .dais-step__circle { color: #0C1524; }
html[data-theme="system"] .dais-step--completed .dais-step__label { color: var(--dais-blue); }

/* --- Card + text that used --dais-navy as a colour --- */
html[data-theme="system"] .dais-form-card { border-color: var(--dais-border); }
html[data-theme="system"] .dais-form-card__title,
html[data-theme="system"] .dais-section-divider,
html[data-theme="system"] .dais-label,
html[data-theme="system"] .dais-static-value { color: #ECE7DB; }

/* --- Fields --- */
html[data-theme="system"] .dais-input,
html[data-theme="system"] .dais-select,
html[data-theme="system"] .dais-textarea { color: var(--dais-body); }
html[data-theme="system"] .dais-input::placeholder,
html[data-theme="system"] .dais-textarea::placeholder { color: #6C7E97; }
html[data-theme="system"] .dais-input:focus,
html[data-theme="system"] .dais-select:focus,
html[data-theme="system"] .dais-textarea:focus { background: var(--dais-white); }
html[data-theme="system"] .dais-static-value { background: #0F1C30; }
html[data-theme="system"] .dais-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A6BF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* --- Buttons: primary is gold in dark, so its text goes dark --- */
html[data-theme="system"] .dais-btn--primary { color: #0C1524; }
html[data-theme="system"] .dais-btn-group { border-top-color: var(--dais-border); }

/* --- Notice / info / section divider borders --- */
html[data-theme="system"] .dais-notice { background: #14233C; border-color: var(--dais-border); color: var(--dais-body); }
html[data-theme="system"] .dais-notice--info { border-color: var(--dais-border-strong); }
html[data-theme="system"] .dais-section-divider { border-bottom-color: var(--dais-border); }
html[data-theme="system"] .dais-course-dates { background: #14233C; border-color: var(--dais-border); }
html[data-theme="system"] .dais-doc-checklist li { border-bottom-color: var(--dais-border); }

/* --- Confirmation (green box) --- */
html[data-theme="system"] .dais-confirm-box { background: #10241C; border-color: #2E6B4C; }
html[data-theme="system"] .dais-confirm-box__ref { background: #12302A; color: #86EFAC; }

/* --- File name + errors keep meaning, lifted for dark contrast --- */
html[data-theme="system"] .dais-file-name { color: #E0A83A; }
html[data-theme="system"] .dais-error,
html[data-theme="system"] .dais-doc-checklist li .required-tag { color: #F87171; }

/* --- Account pages (register / register-interest) use inline .acct-* styles;
       override for dark here. The html[data-theme] prefix outranks the inline
       light rules by specificity, regardless of source order. --- */
html[data-theme="system"] .acct-card { background: var(--dais-surface); border-color: var(--dais-border); box-shadow: var(--dais-shadow); }
html[data-theme="system"] .acct-card h1 { color: #ECE7DB; }
html[data-theme="system"] .acct-lead { color: var(--dais-muted); }
html[data-theme="system"] .approval-pending-notice,
html[data-theme="system"] .acct-msg { background: #14233C; border-color: var(--dais-border); border-left-color: var(--dais-blue); color: var(--dais-body); }
html[data-theme="system"] .acct-form label { color: #ECE7DB; }
html[data-theme="system"] .acct-form input,
html[data-theme="system"] .acct-form select,
html[data-theme="system"] .acct-form textarea { background: #14233C; border-color: var(--dais-border); color: var(--dais-body); }
html[data-theme="system"] .acct-form input::placeholder,
html[data-theme="system"] .acct-form textarea::placeholder { color: #6C7E97; }
html[data-theme="system"] .acct-form input:focus,
html[data-theme="system"] .acct-form select:focus,
html[data-theme="system"] .acct-form textarea:focus { border-color: var(--dais-blue); box-shadow: 0 0 0 3px var(--dais-ring); }
html[data-theme="system"] .acct-form .btn-submit { background: var(--dais-blue); color: #0C1524; }
html[data-theme="system"] .acct-form .btn-submit:hover { background: var(--dais-blue-dark); }
html[data-theme="system"] .acct-form .err { color: #F87171; }
html[data-theme="system"] .acct-alt { color: var(--dais-muted); }
html[data-theme="system"] .acct-alt a { color: var(--dais-blue); }
}

/* ---------------------------------------------------------------------------
   Payment success / live enrolment progress
   ---------------------------------------------------------------------------
   The applicant lands here straight from Stripe and watches their enrolment
   happen, so the page is a status display rather than a receipt. Built from
   tokens only: both themes follow the ones redefined above, and there is no
   inline style on the template.
--------------------------------------------------------------------------- */
.enrol-done { max-width: 640px; margin: 60px auto; padding: 0 1rem; }

.enrol-card {
  background: var(--dais-surface);
  border: 1px solid var(--dais-border);
  border-top: 5px solid var(--dais-success);
  border-radius: var(--dais-radius-lg);
  box-shadow: var(--dais-shadow);
  padding: 40px clamp(1.25rem, 4vw, 2.5rem) 32px;
  text-align: center;
}

.enrol-head { text-align: center; margin-bottom: 26px; }

.enrol-tick {
  width: 60px; height: 60px; margin: 0 auto 1.1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--dais-success);
  color: var(--dais-success-ink);
  font-size: 1.6rem; line-height: 1; font-weight: 700;
}
/* Waiting and failure are not successes, and must not be dressed as one. */
.enrol-tick.is-waiting { background: var(--dais-border); color: var(--dais-body); }
.enrol-tick.is-bad     { background: var(--dais-gold);   color: var(--dais-surface); }

.enrol-title {
  font-size: clamp(1.3rem, 4vw, 1.55rem); font-weight: 700;
  color: var(--dais-success); margin: 0;
}
.enrol-title.is-waiting { color: var(--dais-heading); }
.enrol-title.is-bad     { color: var(--dais-gold); }

/* The card's top edge follows the same truth as the headline. Browsers without
   :has() keep the green edge, which is cosmetic only: every word on the page
   still says exactly what happened. */
.enrol-card:has([data-state="confirming"]),
.enrol-card:has([data-state="awaiting_funds"]),
.enrol-card:has([data-state="delayed_payment"]) { border-top-color: var(--dais-border-strong); }
.enrol-card:has([data-state="payment_failed"])  { border-top-color: var(--dais-gold); }

/* The live region ---------------------------------------------------------- */
.enrol-live { text-align: left; }

.enrol-steps { list-style: none; margin: 0 0 22px; padding: 0; }

.enrol-step {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 0 0 20px 0;
}
.enrol-step:last-child { padding-bottom: 0; }

/* The connector, drawn from each mark down to the next one. */
.enrol-step:not(:last-child)::before {
  content: ""; position: absolute; left: 10px; top: 24px; bottom: 4px;
  width: 2px; background: var(--dais-border);
}
.enrol-step.is-done:not(:last-child)::before { background: var(--dais-success); }

.enrol-step__mark {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--dais-border-strong);
  background: var(--dais-surface);
  position: relative; z-index: 1;
}
.enrol-step.is-done .enrol-step__mark {
  background: var(--dais-success); border-color: var(--dais-success);
}
.enrol-step.is-done .enrol-step__mark::after {
  content: "\2713"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: var(--dais-success-ink);
}
.enrol-step.is-active .enrol-step__mark {
  border-color: var(--dais-blue);
  box-shadow: 0 0 0 4px var(--dais-ring);
  animation: enrol-pulse 1.8s ease-in-out infinite;
}
.enrol-step.is-held .enrol-step__mark { border-color: var(--dais-gold); }
.enrol-step.is-bad .enrol-step__mark { border-color: var(--dais-gold); }
.enrol-step.is-bad .enrol-step__mark::after {
  content: "!"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: var(--dais-gold);
}
.enrol-step.is-held .enrol-step__mark::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--dais-gold);
}

.enrol-step__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.enrol-step__title { font-size: 0.95rem; font-weight: 600; color: var(--dais-muted); }
.enrol-step.is-done .enrol-step__title,
.enrol-step.is-active .enrol-step__title,
.enrol-step.is-bad .enrol-step__title,
.enrol-step.is-held .enrol-step__title { color: var(--dais-heading); }
.enrol-step__note { font-size: 0.85rem; color: var(--dais-muted); line-height: 1.6; }

/* The message under the steps ---------------------------------------------- */
.enrol-status {
  border: 1px solid var(--dais-border);
  border-left: 4px solid var(--dais-blue);
  border-radius: var(--dais-radius);
  background: var(--dais-bg);
  padding: 16px 20px;
}
.enrol-status p { font-size: 0.9rem; color: var(--dais-body); line-height: 1.7; margin: 0 0 10px; }
.enrol-status p:last-child { margin-bottom: 0; }
.enrol-status__head {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--dais-muted);
}
.enrol-status--ready { border-left-color: var(--dais-success); }
.enrol-status--ready .enrol-status__head { color: var(--dais-success); }
.enrol-status--id_check { border-left-color: var(--dais-gold); }
.enrol-status--id_check .enrol-status__head { color: var(--dais-gold); }
.enrol-status--delayed_setup,
.enrol-status--delayed_payment,
.enrol-status--awaiting_funds,
.enrol-status--payment_failed { border-left-color: var(--dais-gold); }
.enrol-status--delayed_setup .enrol-status__head,
.enrol-status--delayed_payment .enrol-status__head,
.enrol-status--awaiting_funds .enrol-status__head,
.enrol-status--payment_failed .enrol-status__head { color: var(--dais-gold); }

.enrol-spinner {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--dais-border-strong);
  border-top-color: var(--dais-blue);
  animation: enrol-spin 0.9s linear infinite;
}

.enrol-cta {
  display: inline-block; margin-top: 4px;
  background: var(--dais-blue); color: var(--dais-surface);
  font-weight: 600; font-size: 0.9rem; text-decoration: none;
  padding: 9px 18px; border-radius: 8px;
}
.enrol-cta:hover { background: var(--dais-blue-dark); }
.enrol-cta:focus-visible { outline: 3px solid var(--dais-ring); outline-offset: 2px; }

.enrol-noscript { font-size: 0.85rem; color: var(--dais-muted); line-height: 1.6; margin: 12px 0 0; }

.enrol-foot { font-size: 0.85rem; color: var(--dais-muted); line-height: 1.8; margin: 24px 0 0; }
.enrol-foot a { color: var(--dais-heading); font-weight: 600; }
.enrol-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@keyframes enrol-spin { to { transform: rotate(360deg); } }
@keyframes enrol-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--dais-ring); }
  50%      { box-shadow: 0 0 0 7px var(--dais-ring); }
}

/* A spinner is decoration; the words underneath carry the meaning. */
@media (prefers-reduced-motion: reduce) {
  .enrol-spinner, .enrol-step.is-active .enrol-step__mark { animation: none; }
}

@media (max-width: 560px) {
  .enrol-done { margin: 32px auto; }
  .enrol-card { padding: 30px 1.15rem 26px; }
  .enrol-status { padding: 14px 16px; }
}