/* FLO LLC CDL Training Portal — brand system
   Freight Logistics Operation – FLO LLC
   Deep navy/blue + gold accent, professional commercial-driver training feel. */

:root {
  --navy-950: #060b16;
  --navy-900: #0b1626;
  --navy-800: #101f36;
  --navy-700: #17304f;
  --blue-700: #1c3f73;
  --blue-600: #2857a3;
  --blue-500: #3a72c4;
  --gold-500: #d4a537;
  --gold-400: #e6bf5a;
  --gold-300: #f0d38a;
  --off-white: #f4f1e8;
  --white: #ffffff;
  --danger-bg: #3a1414;
  --danger-border: #b3453f;
  --danger-text: #f3b8b4;
  --success-bg: #12321f;
  --success-border: #3f9f5f;
  --success-text: #bfe8cc;
  --fail-bg: #3a1414;
  --fail-border: #b3453f;
  --fail-text: #f3b8b4;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  color: var(--off-white);
  background: var(--navy-950);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Interior (authenticated) pages — dashboard/study/practice-test.
   Full presentation-layer redesign matching the login page's brand
   system. No route/auth/scoring logic lives in this file.
--------------------------------------------------------------------- */
.page-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.reading-width { max-width: 720px; }

h1, h2, h3 { line-height: 1.25; color: var(--white); }
h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
h2 { font-size: clamp(1.15rem, 3vw, 1.4rem); margin: 0 0 1rem; }
a { color: var(--gold-400); }
a:hover { color: var(--gold-300); }

:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

.disclaimer {
  background: var(--navy-800);
  border: 1px solid var(--blue-700);
  border-left: 3px solid var(--gold-500);
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--off-white);
  margin-bottom: 1.5rem;
}

/* Generic callout system, used for informational/caution/key-point boxes */
.callout {
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--blue-700);
  border-left: 3px solid var(--gold-500);
  background: var(--navy-800);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.callout--caution { border-left-color: var(--danger-border); }
.callout--key-point { border-left-color: var(--success-border); }
.callout__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 0.3rem;
}

.area-list, .test-list { list-style: none; padding: 0; }
.area-list li, .test-list li { margin-bottom: 0.6rem; }
.area-list a, .test-list a {
  text-decoration: none;
  color: var(--gold-400);
  font-weight: 600;
}
.area-list a:hover, .test-list a:hover { color: var(--gold-300); }

.lesson {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-left: 3px solid var(--blue-500);
}
.lesson h3 { font-size: 1.02rem; margin: 0 0 0.5rem; }
.lesson p { margin: 0; color: var(--off-white); opacity: 0.92; }

.question {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 10px;
}
.question .prompt { font-weight: 600; margin-bottom: 0.75rem; color: var(--white); }
.choice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.5rem 0;
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  border: 1px solid var(--blue-700);
  border-radius: 8px;
  background: var(--navy-900);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.choice:hover { border-color: var(--gold-500); }
.choice input[type="radio"], .choice input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold-500); flex: 0 0 auto; }
.choice.is-selected { border-color: var(--gold-500); background: var(--navy-800); }

#result { margin-top: 1.5rem; padding: 1.25rem 1.4rem; border-radius: 10px; }
#result.pass { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); }
#result.fail { background: var(--fail-bg); border: 1px solid var(--fail-border); color: var(--fail-text); }
#result h2 { color: inherit; margin: 0 0 0.4rem; }
.review-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
}
.review-item.correct { color: var(--success-text); }
.review-item.incorrect { color: var(--fail-text); }

.results-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.results-actions a, .results-actions button { text-decoration: none; }
.review-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; width: 100%; margin-top: 0.4rem; }
.review-links a { font-size: 0.88rem; font-weight: 600; }

button {
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--gold-500);
  background: var(--gold-500);
  color: var(--navy-950);
  min-height: 44px;
}
button:hover { background: var(--gold-400); }
.btn-secondary {
  background: transparent;
  color: var(--gold-400);
  border: 1px solid var(--blue-700);
}
.btn-secondary:hover { background: var(--navy-800); border-color: var(--gold-500); }

/* ---------------------------------------------------------------------
   Student navigation — used on every authenticated page.
--------------------------------------------------------------------- */
.portal-nav {
  background: var(--navy-900);
  border-bottom: 1px solid var(--blue-700);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.portal-nav__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.portal-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}
.portal-nav__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(155deg, var(--blue-700), var(--navy-800));
  border: 1px solid var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gold-400);
  flex: 0 0 auto;
}
.portal-nav__brand-text {
  font-weight: 700;
  color: var(--white);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.portal-nav__brand-text .accent { color: var(--gold-400); }
.portal-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.portal-nav__links a {
  color: var(--off-white);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 0.7rem;
  border-radius: 7px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.portal-nav__links a:hover { color: var(--gold-300); background: var(--navy-800); }
/* Five-Day Training Schedule (2026-08-30): a locked nav item, rendered
   as a non-link span -- same box/spacing as the real links so the nav
   doesn't jump around, but visibly dimmed and non-interactive. */
.portal-nav__link-locked {
  color: var(--off-white);
  opacity: 0.45;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 0.7rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: not-allowed;
}
.portal-nav__logout button {
  background: transparent;
  border: 1px solid var(--blue-700);
  color: var(--off-white);
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}
.portal-nav__logout button:hover { border-color: var(--gold-500); color: var(--gold-300); background: var(--navy-800); }

/* Shared portal-interface language selector (Phase 1B, 2026-09-29), and
   the student state selector (2026-09-29) sharing the identical look. */
.portal-nav__lang select,
.portal-nav__state select {
  background: transparent;
  border: 1px solid var(--blue-700);
  color: var(--off-white);
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 7px;
  min-height: 44px;
}
.anon-lang-switch {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.anon-lang-switch a { color: var(--off-white); text-decoration: none; }
.anon-lang-switch a.is-current { color: var(--gold-400); font-weight: 700; text-decoration: underline; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Dashboard
--------------------------------------------------------------------- */
.dashboard-hero { margin-bottom: 2rem; }
.eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-300);
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.dashboard-hero h1 { margin: 0 0 0.5rem; }
.dashboard-hero h1 .accent { color: var(--gold-400); }
.dashboard-welcome {
  font-size: 1rem;
  color: var(--off-white);
  opacity: 0.85;
  margin: 0 0 1.1rem;
}

.dashboard-section { margin-bottom: 2.25rem; }
/* Certificate of Completion (2026-08-30). */
.certificate-banner {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--gold-500);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.certificate-banner h2 { color: var(--gold-400); }

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

.subject-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--blue-700);
  border-top: 3px solid var(--gold-500);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.subject-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  border-color: var(--gold-500);
}
.subject-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.subject-card h3 { margin: 0; font-size: 1.1rem; color: var(--white); }
.subject-card__cta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gold-400);
}
.subject-card:hover .subject-card__cta { color: var(--gold-300); }

/* Five-Day Training Schedule (2026-08-30): a locked module/practice-test
   card, rendered as a plain non-link div -- dimmed and non-interactive
   so it reads as unavailable without needing extra explanatory text. */
.module-card--locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.module-card--locked:hover {
  transform: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  border-color: var(--blue-700);
}

.score-badge {
  display: none;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid;
}
.score-badge.is-visible { display: inline-flex; }
.score-badge--pass {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}
.score-badge--fail {
  background: var(--navy-950);
  border-color: var(--blue-500);
  color: var(--off-white);
}

/* ---------------------------------------------------------------------
   Master Driver module cards (dashboard + study index)
--------------------------------------------------------------------- */
.card-grid--modules { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

.module-card__number {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-400);
}
.module-card__sections {
  font-size: 0.82rem;
  color: var(--off-white);
  opacity: 0.85;
}
.module-card__meta {
  font-size: 0.82rem;
  color: var(--gold-300);
  font-weight: 600;
}
.module-card__progress { margin-top: 0.35rem; }
.module-card__progress-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--off-white);
  margin-bottom: 0.3rem;
}

.dashboard-footnote {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--off-white);
  opacity: 0.75;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Student welcome message panel (dashboard, first-time prominent view,
   and the standalone /welcome-message replay page)
--------------------------------------------------------------------- */
.welcome-audio-panel {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--blue-700);
  border-top: 3px solid var(--gold-500);
  border-radius: 14px;
  padding: 1.75rem;
  margin-bottom: 2rem;
}
.welcome-audio-panel h2 {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  margin: 0.25rem 0 0.5rem;
}
.welcome-audio-panel__supporting {
  color: var(--off-white);
  opacity: 0.9;
  margin: 0 0 1.25rem;
}
.welcome-audio-panel audio { display: none; }

.welcome-audio-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.welcome-audio-btn {
  min-width: 160px;
  min-height: 48px;
}
#welcome-play-btn.welcome-audio-btn { flex: 1 1 260px; font-size: 1rem; }

.welcome-transcript-toggle { margin-bottom: 1rem; }
.welcome-transcript {
  background: var(--navy-950);
  border: 1px solid var(--navy-700);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  max-height: 320px;
  overflow-y: auto;
}
.welcome-transcript p {
  font-size: 0.92rem;
  color: var(--off-white);
  opacity: 0.92;
  line-height: 1.6;
  margin: 0 0 0.8rem;
}
.welcome-transcript p:last-child { margin-bottom: 0; }

.path-forward { margin-bottom: 1.5rem; }
.path-forward h3 {
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 1rem;
}
.path-forward__list {
  list-style: none;
  counter-reset: path-forward-counter;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}
.path-forward__list li {
  counter-increment: path-forward-counter;
  position: relative;
  padding: 0.9rem 1rem 0.9rem 2.75rem;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-left: 3px solid var(--blue-500);
  border-radius: 8px;
}
.path-forward__list li::before {
  content: counter(path-forward-counter);
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--navy-950);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.path-forward__list strong {
  display: block;
  color: var(--white);
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.path-forward__list span {
  display: block;
  font-size: 0.85rem;
  color: var(--off-white);
  opacity: 0.85;
}

.welcome-resources-link {
  margin: -0.5rem 0 2rem;
  font-size: 0.9rem;
}
.welcome-resources-link a { font-weight: 600; }

@media (max-width: 560px) {
  .welcome-audio-panel { padding: 1.25rem; }
  .welcome-audio-controls { flex-direction: column; }
  .welcome-audio-btn { width: 100%; min-width: 0; }
}

.official-manual-link {
  margin-bottom: 1.25rem;
}
.official-manual-link a, .read-official-source-link {
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--gold-400);
  border: 1px solid var(--blue-700);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  text-decoration: none;
}
.official-manual-link a:hover, .read-official-source-link:hover {
  border-color: var(--gold-500);
  color: var(--gold-300);
  background: var(--navy-800);
}

/* ---------------------------------------------------------------------
   Module landing page
--------------------------------------------------------------------- */
.module-sections-line {
  font-size: 0.92rem;
  color: var(--off-white);
  opacity: 0.85;
  margin: 0 0 1rem;
}
.module-progress-summary { margin: 1.25rem 0; max-width: 420px; }
.module-test-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.module-test-status__none {
  font-size: 0.86rem;
  color: var(--off-white);
  opacity: 0.7;
}

.lesson-list { display: flex; flex-direction: column; gap: 0.6rem; }
.lesson-list__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-left: 3px solid var(--blue-500);
  border-radius: 8px;
  text-decoration: none;
  min-height: 44px;
}
.lesson-list__item:hover { border-left-color: var(--gold-500); }
.lesson-list__item.is-complete { border-left-color: var(--success-border); }
.lesson-list__index {
  font-weight: 700;
  color: var(--gold-400);
  flex: 0 0 auto;
  min-width: 1.5rem;
}
.lesson-list__title { color: var(--white); font-weight: 600; flex: 1 1 auto; }
.lesson-list__source {
  font-size: 0.78rem;
  color: var(--off-white);
  opacity: 0.75;
  flex: 0 0 auto;
  white-space: nowrap;
}
.lesson-list__check { color: var(--success-text); font-weight: 700; flex: 0 0 auto; }

@media (max-width: 560px) {
  .lesson-list__item { flex-wrap: wrap; }
  .lesson-list__source { width: 100%; }
}

/* ---------------------------------------------------------------------
   Lesson page
--------------------------------------------------------------------- */
.lesson-toc {
  margin-bottom: 1rem;
  background: var(--navy-800);
  border: 1px solid var(--blue-700);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
}
.lesson-toc summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--gold-300);
}
.lesson-toc a { display: inline-block; margin-top: 0.5rem; font-size: 0.86rem; }

.lesson-progress-indicator {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-300);
  margin: 0 0 0.3rem;
}

.source-citation {
  background: var(--navy-800);
  border: 1px solid var(--blue-700);
  border-left: 3px solid var(--gold-500);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  margin: 0.75rem 0 1.5rem;
  line-height: 1.6;
}
.source-citation .read-official-source-link { margin-top: 0.6rem; }

.master-driver-standard { margin-bottom: 2rem; }
.master-driver-standard__badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-950);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.md-block {
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-left: 3px solid var(--blue-500);
}
.md-block h3 { font-size: 0.95rem; margin: 0 0 0.5rem; color: var(--white); }
.md-block p { margin: 0; color: var(--off-white); opacity: 0.92; line-height: 1.6; }
.md-block--understanding { border-left-color: var(--gold-500); }
.md-block--application { border-left-color: var(--blue-500); }
.md-block--consequence { border-left-color: var(--danger-border); }
.md-block--remember { border-left-color: var(--success-border); }

.lesson-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}
.lesson-nav__prev {
  font-weight: 600;
  color: var(--gold-400);
  text-decoration: none;
}
.lesson-return-dashboard {
  text-align: center;
  font-size: 0.86rem;
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------
   Practice-test results — per-question review detail
--------------------------------------------------------------------- */
.review-item { padding: 0.9rem 0; }
.review-item__heading { font-weight: 700; margin-bottom: 0.3rem; }
.review-item.correct .review-item__heading { color: var(--success-text); }
.review-item.incorrect .review-item__heading { color: var(--fail-text); }
.review-item__prompt { color: var(--white); margin-bottom: 0.4rem; }
.review-item__explanation { font-size: 0.9rem; opacity: 0.92; margin-bottom: 0.5rem; }
.review-item__source {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-300);
  margin-bottom: 0.5rem;
}
.review-item__links { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.86rem; font-weight: 600; }

/* ---------------------------------------------------------------------
   Practice test — progress indicator
--------------------------------------------------------------------- */
.test-header { margin-bottom: 1.25rem; }
.test-progress {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-300);
  margin: 0.4rem 0 0;
}
.test-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  overflow: hidden;
  margin-top: 0.5rem;
  max-width: 320px;
}
.test-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  transition: width 0.15s ease;
}

/* ---------------------------------------------------------------------
   Landing / login page
--------------------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(circle at 15% 8%, rgba(40, 87, 163, 0.35), transparent 45%),
    radial-gradient(circle at 85% 92%, rgba(212, 165, 55, 0.10), transparent 40%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-950) 100%);
}

.brand-block {
  text-align: center;
  margin-bottom: 1.75rem;
  max-width: 420px;
}

/* Placeholder brand mark — see LOGO PLACEMENT note below. This is a
   typographic monogram, deliberately NOT a fabricated pictorial logo.
   Replace with: <img src="/static/images/flo-logo.png" alt="Freight
   Logistics Operation – FLO LLC" class="brand-logo-img"> once the real
   asset exists at static/images/flo-logo.<ext>. */
.brand-logo-slot {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: 16px;
  background: linear-gradient(155deg, var(--blue-700), var(--navy-800));
  border: 1.5px solid var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.brand-logo-slot span {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--gold-400);
}
.brand-logo-img {
  max-width: 110px;
  height: auto;
  width: auto;
  margin: 0 auto 1rem;
  display: block;
}
/* Prominent variant — landing/login page only, per brand placement spec. */
.brand-logo-img--hero {
  max-width: 168px;
}

/* Compact nav-header logo — replaces the old typographic mark, same
   footprint so it never pushes page content down on the dashboard or
   study pages. */
.nav-logo-img {
  max-width: 40px;
  height: auto;
  width: auto;
  flex: 0 0 auto;
  border-radius: 6px;
}

.brand-company {
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  letter-spacing: 0.03em;
  color: var(--off-white);
  opacity: 0.85;
  margin: 0 0 0.35rem;
}
.brand-portal-name {
  font-size: clamp(1.35rem, 4.5vw, 1.9rem);
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.6rem;
  line-height: 1.2;
}
.brand-portal-name .accent { color: var(--gold-400); }

.route-divider {
  width: 96px;
  height: 3px;
  margin: 0.75rem auto 0.9rem;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg, var(--gold-500) 0 14px, transparent 14px 22px
  );
}

.brand-tagline {
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
  font-weight: 600;
  margin: 0;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--blue-700);
  border-top: 3px solid var(--gold-500);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}

.login-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 1.25rem;
  text-align: center;
  letter-spacing: 0.02em;
}

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 0.4rem;
}
.field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--white);
  background: var(--navy-950);
  border: 1px solid var(--blue-700);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder { color: #6b7fa0; }
.field input:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(212, 165, 55, 0.22);
}

.login-submit {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 9px;
  color: var(--navy-950);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(212, 165, 55, 0.25);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.login-submit:hover { box-shadow: 0 8px 20px rgba(212, 165, 55, 0.35); }
.login-submit:active { transform: translateY(1px); }

.login-alert {
  display: none;
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  font-size: 0.9rem;
}

.field-row {
  display: flex;
  gap: 0.85rem;
}
.field-row .field { flex: 1 1 0; min-width: 0; }
@media (max-width: 420px) {
  .field-row { flex-direction: column; gap: 0; }
}

.login-alert--success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}

.login-alt-action {
  margin-top: 1.1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--off-white);
  opacity: 0.85;
}
.login-alt-action a { font-weight: 700; }

.business-card-panel { max-width: 460px; text-align: center; }
.business-card-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--blue-700);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  margin-bottom: 1.25rem;
}
.business-card-download { margin-bottom: 1.25rem; }

.business-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}
.business-card-btn-row {
  display: flex;
  gap: 0.65rem;
}
.business-card-btn-row .business-card-btn { flex: 1 1 0; }
.business-card-btn {
  display: block;
  text-align: center;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  min-height: 44px;
  box-sizing: border-box;
  line-height: 1.6;
}
.business-card-status {
  min-height: 1.2rem;
  font-size: 0.85rem;
  color: var(--gold-300);
  text-align: center;
  margin: 0;
}
.business-card-contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.92rem;
}
.business-card-contacts a { color: var(--off-white); text-decoration: none; }
.business-card-contacts a:hover { color: var(--gold-300); }
.link-style-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--off-white);
  cursor: pointer;
  text-decoration: none;
}
.link-style-button:hover { color: var(--gold-300); }

/* ---------------------------------------------------------------------
   Student Enrollment, Training & Portal Agreement page
--------------------------------------------------------------------- */
.agreement-header {
  background: var(--navy-900);
  border-bottom: 1px solid var(--blue-700);
}
.agreement-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.agreement-header__inner button {
  background: transparent;
  border: 1px solid var(--blue-700);
  color: var(--off-white);
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  min-height: auto;
}
.agreement-header__inner button:hover {
  border-color: var(--gold-500);
  color: var(--gold-300);
  background: var(--navy-800);
}

.agreement-version-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-300);
  background: var(--navy-800);
  border: 1px solid var(--blue-700);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.agreement-body {
  max-height: 420px;
  overflow-y: auto;
  background: var(--navy-800);
  border: 1px solid var(--blue-700);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}
.agreement-body h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.agreement-body h3:first-child { margin-top: 0; }
.agreement-body p { margin: 0 0 0.9rem; color: var(--off-white); opacity: 0.92; font-size: 0.92rem; }
.agreement-body ul { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.agreement-body li { margin-bottom: 0.35rem; font-size: 0.92rem; }

.agreement-signature-card { max-width: none; }
.agreement-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 1rem 0 1.25rem;
  font-size: 0.85rem;
  color: var(--off-white);
  cursor: pointer;
}
.agreement-checkbox-row input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 18px;
  height: 18px;
  accent-color: var(--gold-500);
  flex: 0 0 auto;
}

.login-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.login-footer {
  margin-top: 1.75rem;
  text-align: center;
  max-width: 380px;
  font-size: 0.76rem;
  color: #8ea3c7;
  border-top: 1px solid var(--navy-700);
  padding-top: 1rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .login-card { padding: 2.25rem 2rem; }
}

/* ---------------------------------------------------------------------
   Personnel Portal (staff) — 2026-08-28. New, additive-only rules; the
   student portal above is unchanged. Reuses existing tokens (--navy-*,
   --gold-*, .card-grid, .subject-card, .score-badge, .login-* classes)
   so both portals share one visual identity.
--------------------------------------------------------------------- */
.staff-use-only-banner {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-400);
  background: var(--navy-900);
  border-bottom: 1px solid var(--blue-700);
  padding: 0.5rem 1rem;
  margin: 0;
}
.staff-use-only-banner--login {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.5rem;
}

.staff-stat-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.staff-stat-card { gap: 0.35rem; }
.staff-stat-number {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--white);
}
.staff-stat-empty {
  color: #8ea3c7;
  font-size: 0.88rem;
  font-style: italic;
}

.staff-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--navy-800);
  border: 1px solid var(--blue-700);
  color: var(--gold-300);
  white-space: nowrap;
}
/* Five-Day Training Schedule (2026-08-30): visually distinct from a
   plain status badge -- signals "open, but for a different reason than
   the normal sequence" rather than "on schedule." Text wraps (unlike
   the base badge) since this label is longer. */
.staff-badge--historical {
  background: var(--navy-900);
  border-color: var(--gold-500);
  color: var(--gold-400);
  white-space: normal;
  text-align: center;
}

.staff-table-scroll { overflow-x: auto; }
.staff-table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--blue-700);
  border-radius: 12px;
  overflow: hidden;
}
.staff-table th, .staff-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--navy-700);
  font-size: 0.9rem;
  white-space: nowrap;
}
.staff-table th {
  color: var(--gold-300);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.staff-table tbody tr:last-child td { border-bottom: none; }
.staff-table__row { cursor: pointer; }
.staff-table__row:hover { background: var(--navy-700); }
.staff-table__empty { text-align: center; color: #8ea3c7; font-style: italic; white-space: normal; }

.staff-back-link { margin-bottom: 0.5rem; }
.staff-back-link a { font-weight: 600; font-size: 0.9rem; }

.staff-detail-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.staff-detail-field h3 { font-size: 1rem; word-break: break-word; }

/* Mobile: collapse the roster/history tables into stacked cards instead
   of a horizontally-scrolling grid, matching this project's existing
   560px breakpoint convention. */
@media (max-width: 560px) {
  .staff-table thead { display: none; }
  .staff-table, .staff-table tbody, .staff-table tr, .staff-table td { display: block; width: 100%; }
  .staff-table tr { border-bottom: 1px solid var(--navy-700); padding: 0.5rem 0; }
  .staff-table td {
    border-bottom: none;
    white-space: normal;
    padding: 0.3rem 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  .staff-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--gold-300);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 0 0 auto;
  }
  .staff-table__empty { display: block; }
}

/* ---------------------------------------------------------------------
   Student deletion confirmation overlay (Personnel Portal) — 2026-08-29
--------------------------------------------------------------------- */
.staff-delete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 11, 22, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}
/* 2026-08-30: the browser's default `[hidden] { display: none }` rule is
   NOT !important, so it can silently lose to the `display: flex` above
   depending on browser/UA-stylesheet specifics. Make this unambiguous in
   all browsers rather than relying on that cascade edge case. */
.staff-delete-overlay[hidden] {
  display: none !important;
}
/* Prevents the page behind an open modal from scrolling. Toggled by
   archive_modal.js on open/close -- removed on every close path. */
body.modal-open {
  overflow: hidden;
}
.staff-delete-card {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--danger-border);
  border-top: 3px solid var(--danger-border);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.staff-delete-warning {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
.staff-delete-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.staff-delete-actions button { flex: 1 1 auto; min-width: 120px; }

/* Driver Qualification module — 2026-08-29 */
.staff-license-notice {
  font-size: 0.82rem;
  color: #8ea3c7;
  margin: 0.35rem 0 1rem;
}

/* Landing-page collapsible pathway cards (Military & Veterans,
   Sponsored & Third-Party Funding) — 2026-08-30. Native <details>/
   <summary>: collapsed by default, fully keyboard-operable and
   screen-reader-navigable with zero JavaScript required -- the inline
   script on login.html only keeps aria-expanded in sync as a nicety,
   it is not required for the control to work. Only the landing-page
   preview card is collapsible; the full /military-pathway and
   /sponsored-funding pages, and all their legal/compliance wording,
   are never collapsed. */
.accordion-card {
  width: 100%;
  max-width: 640px;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--blue-700);
  border-top: 3px solid var(--gold-500);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.accordion-card__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  min-height: 44px; /* touch-target minimum */
  cursor: pointer;
  color: var(--white);
  list-style: none;
}
.accordion-card__summary::-webkit-details-marker { display: none; }
.accordion-card__summary::marker { content: ""; }
.accordion-card__summary:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: -2px;
}

.accordion-card__title-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0; /* allow text to wrap instead of overflowing on narrow screens */
}
.accordion-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.accordion-card__subtitle {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--gold-300);
  opacity: 0.85;
}

.accordion-card__chevron {
  flex-shrink: 0;
  color: var(--gold-400);
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}
.accordion-card[open] > .accordion-card__summary .accordion-card__chevron {
  transform: rotate(180deg);
}

.accordion-card__body {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid rgba(212, 165, 55, 0.25);
  padding-top: 1rem;
  animation: accordion-card-fade-in 0.15s ease;
}
@keyframes accordion-card-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 480px) {
  .accordion-card__summary { padding: 1rem 1.1rem; }
  .accordion-card__body { padding: 0 1.1rem 1.25rem; }
}

/* ---------------------------------------------------------------------
   Public marketing / landing page (2026-09-21) -- compact one-screen
   dashboard: hero + a responsive grid of collapsible accordion cards
   (About, How It Works, Course Overview, Pricing, FMCSA/ELDT Resources,
   Military & Veterans, Sponsored & Third-Party Funding). Reuses existing
   tokens (--navy-*, --blue-*, --gold-*, .accordion-card, .login-submit,
   .reading-width) so the public site and the authenticated portal share
   one visual identity. Unauthenticated and fully responsive down to
   ~360px, with no fixed pixel widths wider than the viewport.
--------------------------------------------------------------------- */
.landing-page { justify-content: flex-start; }

.accordion-grid {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 0 0 2rem;
}
@media (min-width: 720px) {
  .accordion-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.accordion-grid .accordion-card { max-width: none; width: 100%; }

.accordion-card__subtitle--price {
  color: var(--white);
  opacity: 1;
  font-weight: 700;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin: 1.25rem 0 0.5rem;
}
.cta-row .login-submit { width: auto; padding: 0.85rem 1.75rem; }
.cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.75rem;
  border-radius: 9px;
  border: 1.5px solid var(--gold-500);
  color: var(--gold-300);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.cta-secondary:hover { color: var(--gold-300); background: rgba(212, 165, 55, 0.08); }

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.step-list li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.step-list__num {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--navy-950);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
}
.pricing-table td {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--blue-700);
}
.pricing-table td:first-child { color: var(--gold-400); font-weight: 700; width: 4.5rem; }
.pricing-table td:last-child { text-align: right; font-weight: 700; color: var(--white); }
.pricing-table tr.pricing-table__total td {
  border-bottom: none;
  border-top: 2px solid var(--gold-500);
  padding-top: 0.9rem;
  font-size: 1.15rem;
}
.pricing-note {
  font-size: 0.85rem;
  color: var(--gold-300);
  opacity: 0.9;
  margin: 0 0 1.25rem;
}

.resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.resource-list li {
  border-left: 3px solid var(--gold-500);
  padding-left: 0.9rem;
}

@media (max-width: 480px) {
  .landing-section__inner { padding: 1.35rem 1.1rem; }
  .pricing-table td:first-child { width: 3.5rem; }
}

/* Personnel Portal: Visitor Activity & Conversion event timeline
   (2026-09-21). Reuses the existing navy/gold palette -- no new color
   tokens introduced. */
.analytics-timeline {
  display: grid;
  gap: 0.6rem;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--blue-700);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.analytics-timeline__row {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--navy-700);
  font-size: 0.9rem;
}
.analytics-timeline__row:last-child { border-bottom: none; }
.analytics-timeline__time { color: #8ea3c7; font-size: 0.8rem; white-space: nowrap; }
.analytics-timeline__event { color: var(--white); font-weight: 600; }
.analytics-timeline__page { color: var(--gold-300); font-size: 0.8rem; }

@media (max-width: 560px) {
  .analytics-timeline__row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* CDL Qualification status pills (2026-09-24) -- additive only, reuses
   the existing .subject-card / .card-grid layout, adds only the pill
   itself. */
.cdl-status-card { display: flex; flex-direction: column; gap: 0.4rem; }
.cdl-status-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cdl-status-pill--not-started { background: #3a4256; color: #c4cbdb; }
.cdl-status-pill--in-progress { background: #1e3a5f; color: #7fb8ff; }
.cdl-status-pill--submitted { background: #5c4a12; color: #ffd873; }
.cdl-status-pill--action-required { background: #5c1f1f; color: #ff9d9d; }
.cdl-status-pill--verified,
.cdl-status-pill--complete { background: #1f5c33; color: #7de89f; }

/* In-browser MCSA-5875 viewer (2026-09-24) -- additive only. */
.mcsa-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.mcsa-viewer-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  background: #2a2f38;
  border-radius: 8px;
  padding: 1rem 0;
}
.mcsa-page-wrap {
  position: relative;
  margin: 0 auto 1rem auto;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.mcsa-page-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.mcsa-page-wrap .annotationLayer {
  position: absolute;
  inset: 0;
}
@media (max-width: 560px) {
  .mcsa-toolbar { flex-direction: column; }
  .mcsa-toolbar .login-submit,
  .mcsa-toolbar .btn-secondary { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------------
   2026-10-03 — Responsive FLO LLC logo visibility (phones & tablets).
   The approved logo image is unchanged (515x466 source, no recolor,
   no regeneration). Only its rendered max-width grows moderately on
   smaller screens; height:auto + width:auto preserve the aspect ratio,
   vw caps prevent horizontal scrolling, and desktop (>1024px) keeps
   the existing sizes defined above.
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {          /* tablets (and phones, refined below) */
  .nav-logo-img { max-width: 50px; }
  .brand-logo-img { max-width: min(140px, 40vw); }
  .brand-logo-img--hero { max-width: min(208px, 46vw); }
}
@media (max-width: 600px) {           /* phones */
  .nav-logo-img { max-width: 48px; }
  .brand-logo-img { max-width: min(136px, 42vw); }
  .brand-logo-img--hero { max-width: min(200px, 58vw); }
}

/* ---------- AI Instructor (pilot, 2026-10-04) ---------- */
.instructor { position: fixed; right: 16px; bottom: 16px; z-index: 50; max-width: calc(100vw - 32px); font-size: 0.95rem; }
.instructor[hidden] { display: none; }
.instructor__toggle { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--gold-500); background: var(--navy-900); color: var(--off-white); cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.35); font: inherit; }
.instructor__toggle:hover { border-color: var(--gold-400); }
.instructor__toggle-avatar { width: 40px; height: 40px; position: relative; flex: 0 0 auto; }
.instructor__badge { font-size: 0.7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-950); background: var(--gold-500); border-radius: 999px; padding: 2px 8px; }
.instructor__body { position: absolute; right: 0; bottom: 64px; width: 380px; max-width: calc(100vw - 32px); max-height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--navy-900); border: 1px solid var(--navy-700); border-top: 3px solid var(--gold-500); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden; }
.instructor__body[hidden] { display: none; }
.instructor__header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--navy-800); }
.instructor__avatar { width: 64px; height: 64px; position: relative; flex: 0 0 auto; }
.instructor__title { margin: 0; font-size: 1rem; color: var(--gold-300); }
.instructor__subtitle { margin: 2px 0 0; font-size: 0.78rem; color: var(--off-white); opacity: .8; }
.instructor__close { margin-left: auto; background: none; border: 1px solid var(--navy-700); color: var(--off-white); border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: .8rem; }
.instructor__log { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.instructor__msg { max-width: 92%; padding: 9px 12px; border-radius: 10px; line-height: 1.45; }
.instructor__msg p { margin: 0; white-space: pre-wrap; }
.instructor__msg--instructor { align-self: flex-start; background: var(--navy-800); border-left: 3px solid var(--gold-500); color: var(--off-white); }
.instructor__msg--student { align-self: flex-end; background: var(--blue-700); color: var(--white); }
.instructor__msg--system { align-self: stretch; background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text); font-size: .85rem; }
.instructor__sources { margin-top: 8px; font-size: .8rem; }
.instructor__sources-label { margin: 0 0 2px; color: var(--gold-300); text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; }
.instructor__sources ul { margin: 0; padding-left: 18px; }
.instructor__sources a, .instructor__review-link { color: var(--gold-400); }
.instructor__review-link { display: inline-block; margin-top: 6px; font-size: .85rem; }
.instructor__status { margin: 0; padding: 0 14px 6px; font-size: .8rem; color: var(--gold-300); }
.instructor__form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--navy-700); }
.instructor__form[hidden] { display: none; }
.instructor__form textarea { flex: 1 1 auto; resize: none; border-radius: 8px; border: 1px solid var(--navy-700); background: var(--navy-950); color: var(--off-white); padding: 8px; font: inherit; }
.instructor__send { padding: 8px 14px; }
.instructor__disclaimer { margin: 0; padding: 0 14px 12px; font-size: .72rem; color: var(--off-white); opacity: .7; }
.instructor__explain { margin-top: 8px; background: none; border: 1px solid var(--gold-500); color: var(--gold-300); border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: .85rem; }
.instructor__explain:hover { background: var(--navy-800); }
/* Visual instructor (presentation only; asset slot: /static/instructor/avatar/) */
[data-avatar-slot] .avatar-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--blue-600), var(--navy-950)); border: 2px solid var(--gold-500); color: var(--gold-300); font-weight: 700; letter-spacing: .05em; font-size: .8rem; }
[data-avatar-slot="main"] .avatar-placeholder { font-size: 1.05rem; }
[data-avatar-slot] .avatar-face, [data-avatar-slot] .avatar-mouth { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.avatar--bobble.avatar--idle, .avatar--bobble.avatar--listening { animation: flo-bobble 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.avatar--bobble.avatar--speaking { animation: flo-bobble 0.9s ease-in-out infinite; transform-origin: 50% 90%; }
.avatar--thinking { animation: flo-think 1.4s ease-in-out infinite; }
@keyframes flo-bobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes flo-think { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { [data-avatar-slot] { animation: none !important; } }
@media (max-width: 480px) {
  .instructor { right: 8px; bottom: 8px; left: 8px; }
  .instructor__toggle { margin-left: auto; }
  .instructor__body { width: auto; left: 0; right: 0; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Approved instructor avatar installed (2026-10-05): lighter circular backdrop so the
   dark hair reads against the navy panel; the head bobbles, the backdrop stays still. */
[data-avatar-slot].avatar--asset { border-radius: 50%; overflow: hidden; border: 2px solid var(--gold-500); background: radial-gradient(circle at 50% 38%, #3d6fb3 0%, #1c3f73 55%, #101f36 100%); }
[data-avatar-slot].avatar--asset .avatar-face, [data-avatar-slot].avatar--asset .avatar-mouth { top: 7%; left: 7%; width: 86%; height: 86%; inset: auto; }
.avatar--asset.avatar--bobble.avatar--idle, .avatar--asset.avatar--bobble.avatar--listening, .avatar--asset.avatar--bobble.avatar--speaking { animation: none; }
.avatar--asset.avatar--bobble.avatar--idle .avatar-face, .avatar--asset.avatar--bobble.avatar--listening .avatar-face,
.avatar--asset.avatar--bobble.avatar--idle .avatar-mouth, .avatar--asset.avatar--bobble.avatar--listening .avatar-mouth { animation: flo-bobble 3.2s ease-in-out infinite; transform-origin: 50% 92%; }
.avatar--asset.avatar--bobble.avatar--speaking .avatar-face, .avatar--asset.avatar--bobble.avatar--speaking .avatar-mouth { animation: flo-bobble 0.9s ease-in-out infinite; transform-origin: 50% 92%; }
@media (prefers-reduced-motion: reduce) { [data-avatar-slot] .avatar-face, [data-avatar-slot] .avatar-mouth { animation: none !important; } }

/* AI Instructor floating control, enlarged (2026-10-05): larger bobblehead in a
   clean navy/gold circular frame, full head visible (square transparent asset,
   contained and centered, not cropped or stretched). OFF state: the same control,
   visibly unavailable. */
.instructor__toggle { gap: 12px; padding: 6px 16px 6px 6px; border-width: 1.5px; box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.25); }
.instructor__toggle-avatar { width: 68px; height: 68px; border-radius: 50%; }
.instructor__toggle-label { display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; font-size: 1rem; text-align: left; }
.instructor__toggle-sub { font-weight: 400; font-size: .74rem; color: var(--gold-300); opacity: .9; margin-top: 2px; }
.instructor__body { bottom: 92px; max-height: min(640px, calc(100vh - 124px)); }
[data-avatar-slot].avatar--asset { border: 2.5px solid var(--gold-500); box-shadow: 0 0 0 3px rgba(0,0,0,.25), 0 0 14px rgba(212,165,55,.35); }
[data-avatar-slot].avatar--asset .avatar-face, [data-avatar-slot].avatar--asset .avatar-mouth { top: 3%; left: 3%; width: 94%; height: 94%; object-fit: contain; object-position: 50% 50%; }
.instructor--off .instructor__toggle { border-color: var(--navy-700); }
.instructor--off .instructor__toggle-avatar { filter: grayscale(.45) brightness(.85); }
.instructor--off .instructor__badge { background: var(--navy-700); color: var(--off-white); }
.instructor--off .instructor__form textarea:disabled, .instructor--off .instructor__send:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 480px) {
  .instructor__toggle { padding: 5px 14px 5px 5px; gap: 10px; }
  .instructor__toggle-avatar { width: 60px; height: 60px; }
  .instructor__toggle-label { font-size: .95rem; }
  .instructor__body { bottom: 80px; max-height: calc(100vh - 104px); }
}

/* Visual instructor expressions + talking (2026-10-05): presentation-only effects on the
   SAME approved bobblehead image -- no artwork is altered. Driven by instructor_avatar.js
   (.avatar--expr-*, .avatar--talking). Supplied expression/mouth images take over later.
   Selectors are written to outrank the bobble rules above where an effect must show. */
[data-avatar-slot].avatar--asset { transition: box-shadow .35s ease; }
/* happy: one hop of the whole avatar circle (does not fight the face animations) */
[data-avatar-slot].avatar--asset.avatar--expr-happy { animation: flo-hop .7s ease-out 1; }
/* encouraging: gold glow pulse on the ring */
[data-avatar-slot].avatar--asset.avatar--expr-encouraging { animation: flo-glow 1.6s ease-in-out 2; }
/* thinking: slight tilt (the existing soft thinking pulse continues on the circle) */
.avatar--asset.avatar--thinking .avatar-face { transform: rotate(4deg); transition: transform .4s ease; }
/* concerned: slight downward tilt; pause the idle bobble so the tilt is visible */
.avatar--asset.avatar--bobble.avatar--expr-concerned.avatar--idle .avatar-face,
.avatar--asset.avatar--expr-concerned.avatar--idle .avatar-face { animation: none; transform: rotate(-4deg) translateY(2%); transition: transform .4s ease; }
/* talking (no mouth frames supplied): gentle head pulse + ring glow; outranks the speaking bobble */
.avatar--asset.avatar--bobble.avatar--speaking.avatar--talking .avatar-face,
.avatar--asset.avatar--talking .avatar-face { animation: flo-talk .32s ease-in-out infinite alternate; transform-origin: 50% 92%; }
[data-avatar-slot].avatar--asset.avatar--talking { box-shadow: 0 0 0 3px rgba(0,0,0,.25), 0 0 18px rgba(212,165,55,.6); }
@keyframes flo-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-7%); } 65% { transform: translateY(0); } 80% { transform: translateY(-2%); } 100% { transform: translateY(0); } }
@keyframes flo-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(0,0,0,.25), 0 0 10px rgba(212,165,55,.3); } 50% { box-shadow: 0 0 0 3px rgba(0,0,0,.25), 0 0 22px rgba(240,211,138,.85); } }
@keyframes flo-talk { from { transform: scale(1) rotate(-1deg); } to { transform: scale(1.025, 1.04) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-avatar-slot].avatar--asset, .avatar--asset .avatar-face { animation: none !important; transition: none !important; }
}

/* Voice + synchronized lip movement (2026-10-05, rev 2). The jaw layer is a second copy of the
   SAME approved image inside .avatar-jawwrap (which carries the face's bobble via .avatar-mouth),
   masked to the lower lip/chin and STRETCHED downward from the lip line while a word is spoken:
   no duplicated features, no seams, nothing repainted. Shown only while speaking. */
[data-avatar-slot].avatar--asset .avatar-jawwrap { opacity: 0; transition: opacity .12s ease; pointer-events: none; }
[data-avatar-slot].avatar--asset.avatar--speaking .avatar-jawwrap { opacity: 1; }
[data-avatar-slot].avatar--asset .avatar-jawwrap .avatar-jaw {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 36% 22% at 50% 92%, #000 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 36% 22% at 50% 92%, #000 75%, transparent 100%);
  transform-origin: 50% 71.1%; transform: scaleY(1); transition: transform .09s ease-out;
}
[data-avatar-slot].avatar--asset .avatar-jawwrap .avatar-jaw.avatar-jaw--open { transform: scaleY(1.22); }
.instructor__voice { background: none; border: 1px solid var(--gold-500); color: var(--gold-300); border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: .78rem; white-space: nowrap; }
.instructor__voice[aria-pressed="false"] { border-color: var(--navy-700); color: var(--off-white); opacity: .8; }
.instructor__voice[hidden] { display: none; }
.instructor__voice:not([hidden]) { margin-left: auto; }
.instructor__voice:not([hidden]) + .instructor__close { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { [data-avatar-slot].avatar--asset .avatar-jawwrap .avatar-jaw { transition: none; } }

/* Student portal header: approved FLO LLC logo enlarged (2026-10-05). Same image, aspect ratio
   preserved (height set, width auto). Student header and student agreement header only; the
   staff header keeps its compact logo. */
.portal-nav--student .nav-logo-img, .agreement-header .nav-logo-img { max-width: none; width: auto; height: 115px; }
.portal-nav--student .portal-nav__inner { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.portal-nav--student .portal-nav__brand { gap: 0.8rem; }
@media (max-width: 600px) {
  .portal-nav--student .nav-logo-img, .agreement-header .nav-logo-img { height: 90px; }
}

/* ---------------------------------------------------------------------
   Cross-platform compatibility (2026-10-14, Trustee directive): Android,
   iOS, iPadOS and desktop. Layout-only; no behaviour changes.
--------------------------------------------------------------------- */
/* Registration state dropdown (55 jurisdictions) and every other select or
   textarea inside a form field: same look, width and 16px text as the
   text inputs above. Without this the select kept the browser default
   (13px, ~19px tall) and sized itself to its longest option
   ("Northern Mariana Islands — COMING SOON"), overflowing its column and the
   page on 320-430px phones. */
.field select,
.field textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--white);
  background-color: var(--navy-950);
  border: 1px solid var(--blue-700);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d4a537' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
}
.field select::-ms-expand { display: none; }
.field select option { color: var(--white); background-color: var(--navy-950); }
.field select:focus,
.field textarea:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(212, 165, 55, 0.22);
}
/* Stack paired fields (e.g. licence number + state) on every phone width,
   not only below 420px, so the state names are never truncated. */
@media (max-width: 560px) {
  .field-row { flex-direction: column; gap: 0; }
}
/* Touch devices (Android, iPhone, iPad): iOS/iPadOS Safari zooms the page
   when a control under 16px is focused, and small native controls are hard
   to tap. Applies to every remaining form control on student and staff
   pages, including the navigation language/state selectors. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea { font-size: max(16px, 1em); max-width: 100%; }
  select { min-height: 44px; }
  .portal-nav__lang select,
  .portal-nav__state select { font-size: 16px; }
}
select, textarea { max-width: 100%; }
/* Long status badges ("LOCKED — Complete Required Training First") wrap
   instead of running out of narrow columns (phones, iPad portrait grids).
   Short badges still fit on one line. */
.staff-badge { white-space: normal; max-width: 100%; }
/* 44px touch targets for lesson navigation and the medical-examiner link. */
.lesson-nav__prev,
.lesson-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mcsa-toolbar a.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
}
/* State guides and enrollment status (2026-10-15). A selected state's
   guide link and "enrollment not open" notice, shown under the state
   selector on /register and /states. */
.state-status[hidden],
.state-status__guide[hidden] { display: none; }
.state-status {
  margin-top: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-left: 4px solid var(--gold-500);
  border-radius: 6px;
  background: rgba(212, 165, 55, 0.08);
  font-size: 0.92rem;
  line-height: 1.45;
}
.state-status p { margin: 0 0 0.5rem 0; }
.state-status__guide,
.field-hint a,
.state-index-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gold-400);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.field-hint { margin: 0.35rem 0 0 0; font-size: 0.9rem; }
.state-index-card { max-width: 820px; }
.state-index-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.state-index-form .field { flex: 1 1 260px; margin-bottom: 0; }
.state-index-form .login-submit { flex: 0 0 auto; width: auto; min-height: 44px; padding-left: 1.4rem; padding-right: 1.4rem; }
.state-index-list {
  list-style: none;
  margin: 0.5rem 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 0 1rem;
}
.state-index-list li { min-height: 44px; display: flex; align-items: center; }
.state-index-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(212, 165, 55, 0.55);
  color: var(--gold-300);
  white-space: nowrap;
}
.state-guide-enrollment { border-color: var(--gold-500); }
@media (max-width: 560px) {
  .state-index-form .login-submit { width: 100%; }
}
/* ---------------------------------------------------------------------
   Landing layout (Trustee directive, 2026-10-16). Services on the left,
   branding + primary actions centred, information menu on the right;
   each information section opens in a right-side rollout panel
   (.info-panel). Phones (<760px): compact service buttons beneath the
   branding and a right-side information drawer. Scoped to the landing
   page (.landing-v2 / .info-panel / .landing-body), so no other page
   changes. The two-bull logo is untouched: same asset, and no rule here
   sizes or spaces it, so it renders exactly as before at every width.
--------------------------------------------------------------------- */
.landing-v2 { justify-content: flex-start; padding: 1.25rem 1rem 1.5rem; }
.landing-layout {
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hero" "services" "info";
  gap: 1rem;
  margin: 0 0 1.5rem;
}
.landing-hero { grid-area: hero; margin: 0 auto; max-width: 520px; width: 100%; }
.landing-v2 .brand-tagline { margin-bottom: 0; }
.landing-v2 .cta-row { margin: 1rem 0 0; }
.landing-v2 .cta-row .login-submit,
.landing-v2 .cta-secondary { min-height: 44px; }
.landing-services { grid-area: services; }
.landing-info { grid-area: info; min-width: 0; }

.landing-rail {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--blue-700);
  border-top: 3px solid var(--gold-500);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
  padding: 0.85rem;
  min-width: 0;
}
.landing-rail__heading {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.landing-rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.landing-rail__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border-radius: 9px;
  border: 1px solid var(--blue-700);
  background: rgba(16, 31, 54, 0.6);
  color: var(--white);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.landing-rail__link:hover { border-color: var(--gold-500); color: var(--gold-300); }
.landing-rail__link:focus-visible,
.info-drawer-open:focus-visible,
.info-menu__collapse:focus-visible,
.info-menu__drawer-close:focus-visible,
.info-panel__close:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.landing-rail__link[aria-expanded="true"] { border-color: var(--gold-500); background: rgba(212, 165, 55, 0.12); }

.info-menu__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.info-menu__header .landing-rail__heading { margin-bottom: 0.5rem; }
.info-menu__collapse,
.info-menu__drawer-close,
.info-drawer-open,
.info-panel__close {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 0.8rem;
  border-radius: 9px;
  border: 1.5px solid var(--gold-500);
  background: transparent;
  color: var(--gold-300);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
}
.info-menu__header .info-menu__collapse,
.info-menu__header .info-menu__drawer-close { margin-bottom: 0.5rem; min-height: 36px; padding: 0.25rem 0.7rem; }
.info-panel__close { display: inline-flex; flex: 0 0 auto; }
.has-js .info-menu__collapse { display: inline-flex; }
.info-menu.is-collapsed .landing-rail__list { display: none; }

/* Desktop and wide tablets: the sketch -- services | branding | information. */
@media (min-width: 760px) {
  .landing-layout {
    /* Equal side columns keep the logo and heading on the page centre line. */
    grid-template-columns: minmax(170px, 240px) minmax(0, 1fr) minmax(170px, 240px);
    grid-template-areas: "services hero info";
    align-items: start;
    gap: 1.25rem;
  }
  .landing-services, .landing-info { margin-top: 0.5rem; }
}

/* Phones: service buttons in a compact row; information menu becomes a
   right-side drawer opened by the Information button (with JavaScript;
   without it the menu simply stays inline). */
@media (max-width: 759px) {
  .landing-services .landing-rail__list { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
  .landing-services .landing-rail__link { justify-content: center; text-align: center; }
  .has-js .info-drawer-open { display: flex; width: 100%; }
  .has-js .info-menu__collapse { display: none; }
  .has-js .info-menu { display: none; }
  .has-js .info-menu.is-open {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 14px 0 0 14px;
    border-right: 0;
    animation: info-slide-in 0.2s ease;
  }
  .has-js .info-menu.is-open .info-menu__drawer-close { display: inline-flex; }
}

/* Rollout panels. Closed panels are display:none (nothing off-screen to
   cause horizontal scrolling); an open panel slides in from the right. */
.info-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 100vw);
  z-index: 70;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border-left: 3px solid var(--gold-500);
  box-shadow: -18px 0 45px rgba(0, 0, 0, 0.55);
  color: var(--white);
}
.info-panel:target,
.info-panel.is-open { display: block; animation: info-slide-in 0.22s ease; }
/* With JavaScript the script owns open/closed state (history.replaceState
   does not update :target). */
.has-js .info-panel:target:not(.is-open) { display: none; }
@keyframes info-slide-in { from { transform: translateX(100%); } to { transform: none; } }
.info-panel__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(212, 165, 55, 0.25);
}
.info-panel__title { margin: 0; font-size: 1.15rem; min-width: 0; overflow-wrap: anywhere; }
.info-panel__title:focus { outline: none; }
.info-panel__title:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.info-panel__body { padding: 1rem 1.25rem 2rem; }
.info-panel__body h3 { font-size: 1rem; color: var(--gold-300); margin: 1.25rem 0 0.5rem; }
.info-panel__subtitle { font-size: 0.85rem; color: var(--gold-300); opacity: 0.9; margin: 0 0 1rem; }
.info-panel .reading-width { max-width: 100%; overflow-wrap: anywhere; }
.info-notice {
  border-left: 4px solid var(--gold-500);
  border-radius: 6px;
  background: rgba(212, 165, 55, 0.08);
  padding: 0.75rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.info-notice p { margin: 0; }
.info-notice--separate { border-left-color: var(--blue-500); background: rgba(58, 114, 196, 0.1); margin-top: 1.5rem; }
.info-notice--separate h3 { margin-top: 0; }
.info-notice a, .info-panel .resource-list a { color: var(--gold-400); overflow-wrap: anywhere; }
.info-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(6, 11, 22, 0.6); }
.info-backdrop[hidden] { display: none; }
body.panel-open { overflow: hidden; }
@media (max-width: 480px) {
  .info-panel__header { padding: 0.75rem 1rem; }
  .info-panel__body { padding: 0.9rem 1rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .info-panel:target, .info-panel.is-open, .has-js .info-menu.is-open { animation: none; }
}