/* ==========================================================================
   CMT Website — Stylesheet (desktop-native portal + marketing)
   Brand tokens shared with the PWA: Navy #293241 | Slate #3D5A80 |
   Ice Blue #98C1D9 | Orange #EE6C4D — layout itself is desktop-native
   (wide, real nav), not the PWA's mobile-tuned rules.
   ========================================================================== */

@font-face {
  font-family: "Reem Kufi";
  src: url("../fonts/ReemKufi-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "La Belle Aurore";
  src: url("../fonts/LaBelleAurore-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --cmt-navy: #293241;
  --cmt-slate: #3D5A80;
  --cmt-ice: #98C1D9;
  --cmt-orange: #EE6C4D;
  --cmt-white: #FFFFFF;
  --cmt-danger: #C1121F;
  --cmt-warn: #E9A620;
  --cmt-ok: #2E7D32;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Reem Kufi", var(--font);
}

* { box-sizing: border-box; }

/* Real gap found in migrated course content: WordPress bakes literal
   pixel width/height attributes onto <img> tags (e.g. width="600"
   height="400"), and topic content renders as raw HTML with no styling
   of its own (see courses.js's renderTopics) — with nothing to override
   those attributes, an image rendered at its original upload size
   regardless of the (much narrower) column it landed in. This is a plain
   global reset, not scoped to course content specifically, since no
   image anywhere in this site should ever be allowed to overflow its
   container — quiz-question images already get the same two rules
   inline (see courses.js) for the same reason, this just makes it the
   default everywhere else too, including course header/marketing images
   that happened to be sized correctly by coincidence rather than by rule. */
img { max-width: 100%; height: auto; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: #F2F4F6;
  color: var(--cmt-navy);
}

h1, h2, h3 { font-family: var(--font-heading); margin: 0 0 0.5em; }

.hidden { display: none !important; }

/* ---- Top nav (desktop-native: real horizontal bar, not a hamburger) ---- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--cmt-navy);
  color: var(--cmt-white);
}
.site-nav .brand { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--cmt-white); text-decoration: none; }
.site-nav .brand-icon { height: 34px; width: auto; display: block; }

/* specs/009: the survey PWA's course handoff embeds this portal in an
   iframe overlay inside its own app — hiding this nav means there's
   nothing to navigate away to in the first place (see app.js's isEmbedded). */
.pwa-embed .site-nav { display: none; }
.site-nav .nav-links { display: flex; gap: 24px; align-items: center; }
.site-nav a { color: var(--cmt-ice); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--cmt-white); }

.role-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: capitalize;
  background: var(--cmt-slate);
  color: var(--cmt-white);
  cursor: default;
}
/* Grouped with the "CMT Portal" brand, not the nav links — identifies
   WHO you're signed in as right next to WHAT you're signed in to,
   distinct from the page-destination links and the Sign out action. */
.site-nav-brand-group { display: flex; align-items: center; gap: 12px; }
.site-nav .role-pill { margin-left: 0; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.25); }
.role-pill.staff { background: var(--cmt-orange); }
.role-pill.group_leader { background: var(--cmt-slate); }
.role-pill.member { background: var(--cmt-ice); color: var(--cmt-navy); }

/* ---- Auth card (centered, desktop width, not full-bleed mobile) ---- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--cmt-navy), var(--cmt-slate));
}
.auth-card {
  background: var(--cmt-white);
  border-radius: var(--radius);
  padding: 40px;
  width: 420px;
  max-width: calc(100vw - 48px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.auth-card h1 { font-size: 1.5rem; }
.auth-card p.lede { color: #5b6472; margin: 0 0 24px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfd6dd;
  border-radius: 6px;
  font-size: 1rem;
}
.field input:focus { outline: 2px solid var(--cmt-slate); outline-offset: 1px; }
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfd6dd;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--cmt-white);
  color: var(--cmt-navy);
}
.field select:focus { outline: 2px solid var(--cmt-slate); outline-offset: 1px; }
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfd6dd;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}
.field textarea:focus { outline: 2px solid var(--cmt-slate); outline-offset: 1px; }

/* Records filter bar — a compact toolbar row, not a tall form card: every
   control gets the same height/min-width regardless of its option text
   length (a "River" select with "Regression River" as an option shouldn't
   render wider than "Status" next to it), and labels sit tighter above
   their control to match the reference dashboard's density. */
#filter-card .field { margin-bottom: 0; min-width: 130px; }
#filter-card .field label { font-size: 0.78rem; margin-bottom: 4px; }
#filter-card .field input, #filter-card .field select { padding: 7px 10px; font-size: 0.88rem; }

button.primary {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: var(--cmt-orange);
  color: var(--cmt-white);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
button.primary:hover { filter: brightness(1.05); }
button.primary:disabled { opacity: 0.6; cursor: default; }

.link-row { margin-top: 16px; text-align: center; font-size: 0.9rem; }
.link-row a { color: var(--cmt-slate); cursor: pointer; text-decoration: underline; }

.error-message {
  background: #FDECEA;
  color: var(--cmt-danger);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.info-message {
  background: #E8F0FE;
  color: var(--cmt-slate);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.setup-qr {
  display: flex;
  justify-content: center;
  background: var(--cmt-white);
  border: 1px solid #eef1f3;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}
.setup-qr svg {
  width: 200px;
  height: 200px;
}
.setup-secret-fallback {
  font-size: 0.85rem;
  color: #5b6472;
  margin-bottom: 6px;
}
.setup-secret {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: #F2F4F6;
  padding: 10px 12px;
  border-radius: 6px;
  word-break: break-all;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.backup-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: #F2F4F6;
  padding: 12px;
  border-radius: 6px;
  margin: 12px 0;
}

/* ---- Portal shell (wide layout once logged in) ---- */
.portal-body { display: flex; min-height: calc(100vh - 60px); }
.portal-main { flex: 1; max-width: 1200px; margin: 0 auto; padding: 32px; width: 100%; }

.kpi-row { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.kpi-card {
  background: var(--cmt-white);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 160px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.kpi-card .kpi-value { font-size: 1.8rem; font-weight: 700; color: var(--cmt-slate); }
.kpi-card .kpi-label { font-size: 0.85rem; color: #5b6472; }
/* Colored top-border accent, same convention as .catalog-stat-* — gives
   a KPI row visual rhythm instead of a flat wall of identical white
   cards, matching the reference dashboard's colored KPI tiles. */
.kpi-card { border-top: 3px solid transparent; }
.kpi-card-slate { border-top-color: var(--cmt-slate) !important; }
.kpi-card-ice { border-top-color: var(--cmt-ice) !important; }
.kpi-card-orange { border-top-color: var(--cmt-orange) !important; }
.kpi-card-ok { border-top-color: var(--cmt-ok) !important; }

table.data-table { width: 100%; border-collapse: collapse; background: var(--cmt-white); border-radius: var(--radius); overflow: hidden; }
table.data-table th, table.data-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #eef1f3; }
table.data-table th { background: #F8F9FA; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: #5b6472; }
table.data-table tr[tabindex] { cursor: pointer; }
table.data-table tr[tabindex]:hover { background: #F8F9FA; }
table.data-table tr[tabindex]:focus { outline: 2px solid var(--cmt-slate); outline-offset: -2px; }

.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.status-pill.status-good { background: #E6F4EA; color: var(--cmt-ok); }
.status-pill.status-warn { background: #FCF3DA; color: #8a6300; }
.status-pill.status-bad { background: #FDECEA; color: var(--cmt-danger); }

.course-card {
  background: var(--cmt-white);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.progress-bar { height: 10px; background: #dde3e8; border: 1px solid #cad2d9; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress-bar > div { height: 100%; background: var(--cmt-orange); transition: width 0.2s; min-width: 3px; }

.catalog-stats { display: flex; gap: 12px; margin-bottom: 20px; }
.catalog-stat {
  background: var(--cmt-white);
  border-radius: var(--radius);
  padding: 14px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.catalog-stat strong { font-size: 1.6rem; color: var(--cmt-navy); line-height: 1.1; }
.catalog-stat span { font-size: 0.8rem; color: #5b6472; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.catalog-course-card { margin-bottom: 0; }

.course-about {
  background: var(--cmt-white);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.course-teaser-heading { font-family: var(--font-heading); color: var(--cmt-navy); font-size: 1.15rem; margin: 0 0 8px; }
.course-teaser { color: #333f4c; font-size: 1rem; line-height: 1.65; margin: 0 0 8px; max-width: 720px; }
.course-about details { margin-top: 4px; }
.course-about summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--cmt-slate);
  font-family: var(--font-heading);
  font-size: 0.92rem;
}
.course-about-body { margin-top: 10px; max-width: 720px; }
.course-about-body p { color: #45505f; font-size: 0.95rem; line-height: 1.65; margin: 0 0 14px; }
.course-about-body h4 {
  font-family: var(--font-heading);
  color: var(--cmt-slate);
  font-size: 1.1rem;
  margin: 22px 0 8px;
  padding-top: 4px;
  border-top: 1px solid #eef1f3;
}
.course-about-body h4:first-of-type { margin-top: 4px; border-top: none; padding-top: 0; }
.course-about-body p:last-child { margin-bottom: 0; }

.course-progress-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 20px; }
.course-progress-row .progress-bar { flex: 1; max-width: 360px; margin: 0; }
.course-progress-label { font-size: 0.85rem; color: #5b6472; white-space: nowrap; }

.course-detail-layout { display: flex; gap: 24px; align-items: flex-start; }
.course-detail-sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 20px; }
.course-detail-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); margin-bottom: 16px; display: block; }
.course-detail-card {
  background: var(--cmt-white);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.course-detail-card h4 { margin: 0 0 10px; font-size: 0.95rem; color: var(--cmt-navy); }
.course-detail-card ul { margin: 0; padding-left: 18px; }
.course-detail-card li { font-size: 0.88rem; color: #45505f; line-height: 1.55; margin-bottom: 6px; }
.course-detail-card li:last-child { margin-bottom: 0; }
.course-detail-main { flex: 1; min-width: 0; }

@media (max-width: 800px) {
  .course-detail-layout { flex-direction: column; }
  .course-detail-sidebar { width: 100%; position: static; }
}

/* ---- Dashboard ---- */
.dash-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 8px;
  min-height: 220px;
}
.dash-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dash-hero-overlay {
  position: relative;
  min-height: 220px;
  background: linear-gradient(115deg, rgba(41,50,65,0.94) 0%, rgba(61,90,128,0.82) 55%, rgba(61,90,128,0.35) 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px;
  color: var(--cmt-white);
}
.dash-hero-info h1 { margin: 0 0 6px; font-size: 1.7rem; color: var(--cmt-white); }
.dash-hero-meta { font-size: 0.85rem; color: var(--cmt-ice); }
.dash-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-hero-actions button {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cmt-white);
  cursor: pointer;
}
.dash-hero-actions button:hover { background: rgba(255,255,255,0.22); }

.dash-hero-edit-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(20,26,36,0.55);
  color: var(--cmt-white);
  font-size: 0.95rem;
  cursor: pointer;
  z-index: 2;
}
.dash-hero-edit-btn:hover { background: rgba(20,26,36,0.8); }
.dash-hero-picker {
  position: absolute;
  right: 14px;
  bottom: 54px;
  z-index: 2;
  display: flex;
  gap: 6px;
  background: rgba(20,26,36,0.7);
  padding: 8px;
  border-radius: 999px;
}
.dash-hero-picker.hidden { display: none; }
.dash-hero-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.15s;
}
.dash-hero-swatch:hover { transform: scale(1.1); border-color: rgba(255,255,255,0.85); }
.dash-hero-swatch.active { border-color: var(--cmt-orange); box-shadow: 0 0 0 2px rgba(238,108,77,0.4); }
#dash-profile-result { margin: 10px 0 0; }
#dash-profile-result .info-message, #dash-profile-result .error-message { margin: 0 0 20px; }

.dash-section {
  background: var(--cmt-white);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dash-section h3 { margin: 0 0 14px; font-size: 1.05rem; color: var(--cmt-navy); }
.dash-section .catalog-stats { margin-bottom: 14px; }
.dash-section .catalog-stats .catalog-stat { box-shadow: none; border: 1px solid #eef1f3; border-top: 3px solid var(--cmt-slate); }
.catalog-stat-slate { border-top-color: var(--cmt-slate) !important; }
.catalog-stat-warn { border-top-color: var(--cmt-warn) !important; }
.catalog-stat-ok { border-top-color: var(--cmt-ok) !important; }
.catalog-stat-bad { border-top-color: var(--cmt-danger) !important; }

.dash-progress-layout { display: flex; gap: 20px; align-items: flex-start; }
.dash-chart-stack { display: flex; flex-direction: column; gap: 14px; width: 240px; flex-shrink: 0; }
.dash-chart-card {
  width: 100%;
  background: #F8F9FA;
  border: 1px solid #eef1f3;
  border-radius: var(--radius);
  padding: 14px;
}
.dash-chart-footnote { text-align: center; font-size: 0.78rem; color: #5b6472; margin-top: 6px; }
.dash-table-wrap { flex: 1; min-width: 0; }
.dash-filters { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.dash-filters select {
  font-size: 0.82rem;
  padding: 6px 10px;
  border: 1px solid #cfd6dd;
  border-radius: 6px;
  color: #3d4652;
  background: var(--cmt-white);
}
.dash-filters button {
  font-size: 0.82rem;
  padding: 6px 14px;
  border: 1px solid var(--cmt-slate);
  border-radius: 6px;
  color: var(--cmt-slate);
  background: var(--cmt-white);
  cursor: pointer;
  font-weight: 600;
}
.dash-filters button:hover { background: var(--cmt-slate); color: var(--cmt-white); }

.dash-trend-card { margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef1f3; }
.dash-trend-card h4 { margin: 0 0 10px; font-size: 0.9rem; color: var(--cmt-navy); }

.dash-table-scroll { overflow-x: auto; }
.dash-table-scroll table { min-width: 560px; }
table.dash-table th, table.dash-table td { padding: 8px 12px; font-size: 0.82rem; }
table.dash-table th { font-size: 0.72rem; }

.dash-quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.dash-quick-links a.dash-quick-link-btn {
  font-size: 0.85rem;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--cmt-slate);
  border-radius: 6px;
  color: var(--cmt-slate);
  background: var(--cmt-white);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.dash-quick-links a.dash-quick-link-btn:hover { background: var(--cmt-slate); color: var(--cmt-white); }

.official-data-control { position: relative; }
#official-data-toggle-btn, #map-expand-filters-btn, #map-expand-btn, #map-collapse-btn {
  font-size: 0.85rem;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--cmt-slate);
  border-radius: 6px;
  color: var(--cmt-slate);
  background: var(--cmt-white);
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#official-data-toggle-btn:hover, #map-expand-filters-btn:hover, #map-expand-btn:hover, #map-collapse-btn:hover { background: var(--cmt-slate); color: var(--cmt-white); }
#timelapse-play-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--cmt-slate);
  background: var(--cmt-white);
  color: var(--cmt-slate);
  cursor: pointer;
  font-size: 0.68rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#timelapse-play-btn:hover { background: var(--cmt-slate); color: var(--cmt-white); }
.timelapse-tick:hover { filter: brightness(0.85); }
#official-data-count, #map-expand-filters-count {
  background: var(--cmt-orange);
  color: var(--cmt-white);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  line-height: 1.5;
}
.official-data-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--cmt-white);
  border: 1px solid #dde2e6;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 12px;
}
.official-data-theme + .official-data-theme { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef1f3; }
.official-data-theme-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cmt-slate);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.official-data-theme[open] > .official-data-theme-label { margin-bottom: 8px; }
.official-data-theme-label::-webkit-details-marker { display: none; }
.official-data-theme-label::before {
  content: "\25B8";
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.15s;
}
.official-data-theme[open] > .official-data-theme-label::before { transform: rotate(90deg); }
.official-data-theme-count {
  font-weight: 600;
  color: #8b95a1;
  text-transform: none;
  letter-spacing: normal;
}
.official-data-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; cursor: pointer; border-radius: 6px; }
.official-data-item:hover { background: #f3f6f8; }
.official-data-item input { margin-top: 3px; }
.official-data-item-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--cmt-navy); }
.official-data-item-desc { display: block; font-size: 0.78rem; color: #667284; line-height: 1.4; margin-top: 2px; }
.official-data-item-attrib { display: block; font-size: 0.7rem; color: #8b95a1; margin-top: 2px; }
.official-data-empty { font-size: 0.85rem; color: #667284; margin: 0; padding: 8px 4px; }

.official-data-item-row + .official-data-item-row { margin-top: 2px; }
.official-data-provenance { margin: 0 4px 4px 30px; }
.official-data-provenance summary {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cmt-slate);
  cursor: pointer;
  list-style: none;
}
.official-data-provenance summary::-webkit-details-marker { display: none; }
.official-data-provenance summary::before { content: "▸ "; }
.official-data-provenance[open] summary::before { content: "▾ "; }
.official-data-provenance p { font-size: 0.76rem; color: #667284; line-height: 1.45; margin: 6px 0 0; }
.official-data-citation { font-style: italic; color: #8b95a1; }

.official-data-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.official-data-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--cmt-navy); }
.official-data-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
/* Static record-status legend (marker colors) — same item/swatch look as
   the Official Data legend, but its own container class: it must NOT
   pick up #map-expand-body .official-data-legend's position:absolute
   override below, or the two legends would overlap in the expanded map. */
.record-status-legend { display: flex; flex-wrap: wrap; gap: 12px; }

/* Catchments rollup panel */
.catchments-explainer { font-size: 0.82rem; color: #667284; line-height: 1.5; margin: 8px 0 16px; }
.catchments-list { display: flex; flex-direction: column; gap: 8px; }
.catchment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f3f6f8;
  border-radius: var(--radius);
  cursor: pointer;
}
.catchment-row:hover { background: #e8edf1; }
.catchment-row-active { outline: 2px solid var(--cmt-slate); outline-offset: -2px; }
.catchment-row-label { font-weight: 700; color: var(--cmt-navy); font-size: 0.92rem; }
.catchment-row-meta { font-size: 0.8rem; color: #667284; margin-top: 2px; }
.catchment-row-provenance { color: var(--cmt-slate); }

/* Pop-out map — a hidden overlay that reparents the real map/filter/
   Official-Data nodes into itself (see records.js wireMapExpand()), not a
   second map instance. */
.map-expand-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--cmt-white);
  display: flex;
  flex-direction: column;
}
.map-expand-toolbar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
/* Opposite corner from the toolbar — the timelapse control (if this
   dataset has more than one survey date) reparents here so it's still
   usable in the fullscreen view, not left stranded under the overlay. */
#map-expand-timelapse-slot {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  width: 320px;
  max-width: calc(100% - 32px);
  background: var(--cmt-white);
  padding: 10px 14px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#map-expand-timelapse-slot:empty { display: none; }
#map-expand-body { flex: 1; min-height: 0; position: relative; }
#map-expand-body #map-wrap { height: 100%; }
#map-expand-body #map-container { width: 100%; height: 100% !important; border-radius: 0 !important; }
/* Normal (non-expanded) view: the two legend rows just stack below the
   map with a small gap. Expanded view: the whole stack becomes one
   floating bottom-left panel, so the record-status and Official Data
   legends never overlap each other. */
#map-legend-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
#map-legend-stack .official-data-legend:empty { display: none; }
#map-expand-body #map-legend-stack {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 5;
  background: var(--cmt-white);
  padding: 8px 12px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0;
  max-width: calc(100% - 32px);
}
#map-expand-body #map-legend-stack .record-status-legend,
#map-expand-body #map-legend-stack .official-data-legend { margin-top: 0; }
#map-expand-body #detail-card { position: absolute; bottom: 16px; right: 16px; z-index: 6; max-width: 380px; max-height: calc(100% - 32px); overflow-y: auto; }
#map-expand-filters-drawer { left: auto; right: 0; }

@media (max-width: 800px) {
  .dash-progress-layout { flex-direction: column; }
  /* min-width: 0 is load-bearing here, not decorative — without it a flex
     item won't shrink below its content's intrinsic size, and a <canvas>
     with no CSS width defaults to 300px. Two side-by-side chart cards at
     that width don't fit a phone screen, and since flex items don't clip
     by default, the whole page scrolled horizontally instead of just this
     row (confirmed live at 390px viewport — a real bug, not a guess). */
  .dash-chart-stack { width: 100%; flex-direction: row; min-width: 0; }
  .dash-chart-card { min-width: 0; }
  .dash-chart-card canvas { max-width: 100%; }
  /* .dash-table-wrap's own min-width: 0 (see base rule) only constrains
     it on the MAIN axis of a row flex container — once
     .dash-progress-layout switches to flex-direction: column just above,
     width becomes the CROSS axis, where a flex item can still grow past
     its container to fit content unless explicitly capped. The 560px
     min-width table inside .dash-table-scroll was doing exactly that,
     stretching this wrapper (and the whole page body with it) to 593px+
     on a 390px viewport — confirmed live, not a guess. explicit width
     caps it; .dash-table-scroll's own overflow-x: auto then actually
     gets to do its job of scrolling the table internally.
  */
  .dash-table-wrap { width: 100%; min-width: 0; }
  .dash-hero-overlay { padding: 20px; }
}

.catalog-content-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.catalog-content-header h3 { margin: 0; }
#catalog-expand-all-btn {
  background: var(--cmt-slate);
  color: var(--cmt-white);
  border: none;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.catalog-lesson { background: var(--cmt-white); border-radius: var(--radius); margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
.catalog-lesson-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.catalog-lesson-title { font-weight: 600; color: var(--cmt-navy); cursor: pointer; }
.catalog-lesson-title:hover { color: var(--cmt-slate); text-decoration: underline; }
.catalog-lesson-toggle {
  flex-shrink: 0;
  background: none;
  border: 1px solid #cfd6dd;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5b6472;
  cursor: pointer;
}
.catalog-lesson-toggle:hover { border-color: var(--cmt-slate); color: var(--cmt-slate); }
.catalog-lesson-topics { padding: 0 18px 12px 46px; border-top: 1px solid #eef1f3; padding-top: 10px; }
.catalog-lesson.expanded .catalog-lesson-header { border-bottom: none; }

/* ---- Lesson viewer (Focus Mode style: persistent sidebar + video + checklist) ---- */
.lesson-view {
  display: flex;
  align-items: flex-start;
  margin: -20px;
}
.lesson-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--cmt-white);
  border-right: 1px solid #eef1f3;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: 0;
  transition: width 0.15s;
}
.lesson-sidebar.collapsed { width: 44px; overflow-y: hidden; }
.lesson-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--cmt-navy);
  color: var(--cmt-white);
  padding: 14px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: var(--font-heading);
}
/* CHANGED: collapsed rail's header switches to the app's own orange action
   colour (same one Start/Continue/Submit buttons already use), rather than
   staying navy — as a bare 44px strip with the course title hidden, a
   translucent-white circle on navy read as decoration more than a control
   people knew to tap. Orange is already this app's "there's something to
   do here" signal everywhere else, so this reuses that instead of
   inventing a new visual language just for this one button. */
.lesson-sidebar.collapsed .lesson-sidebar-header { padding: 14px 0; justify-content: center; background: var(--cmt-orange); }
.lesson-sidebar-header .lesson-sidebar-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-sidebar.collapsed .lesson-sidebar-title,
.lesson-sidebar.collapsed .lesson-sidebar-tree { display: none; }
.sidebar-collapse-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: var(--cmt-white);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.28); }
/* On the orange collapsed rail specifically, a plain white circle reads
   more clearly than the translucent-white treatment made for a navy
   background (which would otherwise look identical here and lose the
   "distinct button" cue the colour change was meant to add). */
.lesson-sidebar.collapsed .sidebar-collapse-btn { background: var(--cmt-white); color: var(--cmt-orange); font-weight: 700; }
.lesson-sidebar.collapsed .sidebar-collapse-btn:hover { background: var(--cmt-white); opacity: .9; }
.lesson-sidebar-tree { padding: 6px 0; }
.sidebar-lesson { border-bottom: 1px solid #eef1f3; }
.sidebar-lesson-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
}
.sidebar-lesson.active .sidebar-lesson-header { background: #EEF3F8; }
.sidebar-lesson-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-lesson-title { font-weight: 600; font-size: 0.92rem; color: var(--cmt-navy); line-height: 1.3; }
.sidebar-lesson-meta { font-size: 0.75rem; color: #5b6472; }
.sidebar-chevron { color: #5b6472; font-size: 0.7rem; transition: transform 0.15s; flex-shrink: 0; }
.sidebar-lesson.expanded .sidebar-chevron { transform: rotate(180deg); }
.sidebar-topics { padding: 0 16px 12px 44px; }
.sidebar-topic, .sidebar-quiz {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.85rem;
  color: #3d4652;
  cursor: pointer;
}
.sidebar-topic:hover, .sidebar-quiz:hover { color: var(--cmt-slate); }

.status-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c7cdd4;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.status-circle.done { background: var(--cmt-slate); border-color: var(--cmt-slate); }
.status-circle.done::after { content: "\2713"; color: var(--cmt-white); font-size: 10px; line-height: 1; }

.lesson-main { flex: 1; min-width: 0; padding: 16px 24px; max-width: 860px; }
.lesson-top-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.lesson-top-progress .progress-bar { flex: 1; margin: 0; }
.lesson-top-progress-label { font-size: 0.8rem; color: #5b6472; white-space: nowrap; }
.lesson-next-btn { white-space: nowrap; color: var(--cmt-slate); text-decoration: none; font-weight: 600; font-size: 0.85rem; }
.lesson-next-btn:hover { text-decoration: underline; }

.lesson-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: #5b6472;
  background: #F8F9FA;
  padding: 7px 14px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.lesson-breadcrumb a { color: var(--cmt-slate); text-decoration: none; }
.lesson-breadcrumb a:hover { text-decoration: underline; }

.lesson-video-wrap { aspect-ratio: 16/9; margin-bottom: 16px; }

.lesson-video-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FDF2EE;
  color: var(--cmt-orange);
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 16px 0;
}

.lesson-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cmt-slate);
  color: var(--cmt-white);
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  font-weight: 700;
  margin-top: 16px;
  font-size: 0.9rem;
}
.lesson-content-body { border: 1px solid #eef1f3; border-top: none; border-radius: 0 0 8px 8px; margin-bottom: 16px; }
.lesson-topic-card { padding: 14px 16px; border-bottom: 1px solid #eef1f3; }
.lesson-topic-card:last-child { border-bottom: none; }
.lesson-topic-card h3 { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; margin: 0 0 6px; }
.lesson-topic-card > div { font-size: 0.92rem; line-height: 1.6; }
/* Migrated topic content still carries WordPress/Gutenberg's own image
   classes (wp-block-image, aligncenter/alignleft/alignright, figcaption)
   verbatim — this site never had WordPress's theme CSS that used to give
   those classes their actual meaning, so e.g. "aligncenter" currently does
   nothing at all and every image just sits at the default block/left
   position regardless of what the original editor set. These are the
   plain, standard rules WordPress itself ships, recreated here so the
   original authoring intent still renders correctly without WordPress. */
.lesson-topic-card .wp-block-image { margin: 14px 0; }
.lesson-topic-card figure { margin: 0; }
.lesson-topic-card figure.aligncenter { text-align: center; }
.lesson-topic-card figure.aligncenter img { margin: 0 auto; display: block; }
.lesson-topic-card figure.alignleft { float: left; margin: 0 16px 10px 0; max-width: 45%; }
.lesson-topic-card figure.alignright { float: right; margin: 0 0 10px 16px; max-width: 45%; }
.lesson-topic-card figcaption { font-size: 0.8rem; color: #5b6472; text-align: center; margin-top: 6px; }
/* Same gap as the image classes above, for WordPress's table block —
   wp-block-table's own <figure> wrapper already exists in the migrated
   content, so it doubles as the horizontal-scroll container a wide table
   (the Beaufort scale one runs to 4 columns of real sentences) needs on a
   narrow screen, rather than overflowing the page or wrapping unreadably. */
.lesson-topic-card .wp-block-table { overflow-x: auto; margin: 14px 0; }
.lesson-topic-card .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.lesson-topic-card .wp-block-table th,
.lesson-topic-card .wp-block-table td { padding: 8px 10px; border: 1px solid #e1e7eb; text-align: left; vertical-align: top; }
.lesson-topic-card .wp-block-table th { background: #F8F9FA; font-weight: 700; color: var(--cmt-navy); white-space: nowrap; }
/* is-style-stripes is WordPress's own name for alternating row shading —
   present on both real tables found in the migrated content. */
.lesson-topic-card .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: #FAFBFC; }

@media (max-width: 900px) {
  /* Collapsed (default here — see courses.js showCourseDetail) stays as
     the same slim rail beside the content that desktop's manual-collapse
     button already produces. Expanded slides out as a fixed overlay on
     TOP of the content instead of pushing it down into a stacked layout —
     tapping the rail open never loses your scroll position in the lesson
     underneath. .lesson-sidebar-backdrop (below) dims that content and
     closes the drawer on tap, same convention as any off-canvas menu. */
  .lesson-sidebar:not(.collapsed) {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-height: none;
    z-index: 500;
    box-shadow: 2px 0 16px rgba(0,0,0,.3);
  }
  .lesson-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 490;
  }
}
.lesson-sidebar-backdrop { display: none; }

/* ---- Marketing (index.html) ---- */
.marketing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--cmt-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  position: relative;
  z-index: 2;
}
.marketing-brand img { display: block; height: 52px; width: auto; }
.marketing-nav-links { display: flex; align-items: center; gap: 28px; }
.marketing-nav-links a { color: var(--cmt-navy); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.marketing-nav-links a:hover { color: var(--cmt-slate); }
.marketing-nav-links a[aria-current="page"] { color: var(--cmt-orange); }
.marketing-nav .cta { background: var(--cmt-orange); color: var(--cmt-white); padding: 10px 22px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.marketing-nav .cta:hover { filter: brightness(1.05); }

.marketing-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.marketing-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--cmt-navy); transition: transform 0.2s ease, opacity 0.2s ease; }
.marketing-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.marketing-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.marketing-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .marketing-nav { flex-wrap: wrap; position: relative; }
  .marketing-brand { order: 1; }
  .marketing-nav-toggle { order: 2; display: flex; margin-left: auto; }
  .marketing-nav .cta { order: 3; margin-left: 12px; }
  .marketing-nav-links {
    order: 4;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--cmt-white);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
    z-index: 5;
  }
  .marketing-nav-links.open { display: flex; }
  .marketing-nav-links a { padding: 16px 24px; border-top: 1px solid #eef1f3; font-size: 1rem; }
}
@media (max-width: 480px) {
  .marketing-nav { padding: 16px 20px; }
  .marketing-brand img { height: 34px; }
  .marketing-nav .cta { padding: 8px 14px; font-size: 0.85rem; }
}

.marketing-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  background: var(--cmt-navy);
}
.marketing-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.marketing-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(41,50,65,0.05) 0%, rgba(41,50,65,0.02) 16%, rgba(41,50,65,0) 28%);
}
.marketing-hero-content {
  position: relative;
  z-index: 1;
  max-width: 520px;
  text-align: left;
  padding: 64px 24px 32px 56px;
  color: var(--cmt-white);
}
.marketing-hero-content h1 {
  font-family: "La Belle Aurore", cursive;
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--cmt-orange);
  text-wrap: balance;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9), -1px -1px 3px rgba(0,0,0,0.9), 1px -1px 3px rgba(0,0,0,0.9), -1px 1px 3px rgba(0,0,0,0.9), 0 6px 24px rgba(0,0,0,0.65);
}
@media (max-width: 700px) {
  .marketing-hero-content { max-width: 100%; padding: 24px; }
  .marketing-hero-overlay { background: linear-gradient(180deg, rgba(41,50,65,0.02) 0%, rgba(41,50,65,0.1) 100%); }
}
.marketing-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cmt-orange);
  margin-bottom: 10px;
}

/* ---- Video showcase (USP: real footage, not stock) — full-bleed, replaces the old static banner ---- */
.marketing-showcase {
  text-align: center;
  padding: 56px 0;
  background: var(--cmt-navy);
  color: var(--cmt-white);
}
.marketing-showcase-text {
  max-width: 560px;
  margin: 0 auto 32px;
  padding: 0 40px;
}
.marketing-showcase .marketing-eyebrow { color: var(--cmt-orange); }
.marketing-showcase h2 {
  font-size: 1.9rem;
  margin: 0 0 12px;
  text-wrap: balance;
}
.marketing-showcase-text p {
  color: var(--cmt-ice);
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}
.marketing-showcase-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #000;
}
.marketing-showcase-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.marketing-showcase-video:hover img { opacity: 0.6; }
.marketing-showcase-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--cmt-navy);
  background: var(--cmt-white);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding-left: 6px;
  transition: transform 0.2s;
}
.marketing-showcase-video:hover .marketing-showcase-play-icon { transform: scale(1.08); }

/* ---- Video modal (showcase clip plays via a Vimeo iframe embed) ---- */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(15,18,24,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  z-index: 200;
}
.video-modal-inner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
}
.video-modal-inner video,
.video-modal-inner iframe {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
  object-fit: contain;
  background: #000;
}
#video-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: var(--cmt-white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
}
@media (max-width: 700px) {
  .video-modal { align-items: flex-start; overflow-y: auto; padding: 56px 16px 24px; }
  #video-modal-close {
    position: fixed;
    top: 12px;
    right: 16px;
    background: rgba(15,18,24,0.6);
    border-radius: 999px;
    padding: 2px 12px;
  }
}

/* ---- Feature rows (alternating photo/text) ---- */
.marketing-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 40px;
}
.marketing-feature-reverse .marketing-feature-photo { order: 2; }
.marketing-feature-reverse .marketing-feature-text { order: 1; }
.marketing-feature-photo img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.marketing-feature-text h2 {
  font-size: 1.5rem;
  color: var(--cmt-navy);
  margin: 0 0 16px;
}
.marketing-feature-text p {
  color: #45505f;
  line-height: 1.6;
  font-size: 1.02rem;
}
@media (max-width: 760px) {
  .marketing-feature { grid-template-columns: 1fr; gap: 12px; padding: 12px 24px; }
  .marketing-feature-reverse .marketing-feature-photo,
  .marketing-feature-reverse .marketing-feature-text { order: initial; }
  .marketing-feature-photo img { height: 240px; }
}

/* ---- Sponsors ---- */
.marketing-sponsors {
  background: #eef1f3;
  padding: 56px 40px;
  text-align: center;
}
.marketing-sponsors-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cmt-orange);
  margin: 0 0 32px;
}
.marketing-sponsors-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.marketing-sponsors-row img {
  height: 60px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ---- Team page ---- */
.team-header {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--cmt-white);
}
.team-header-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(41,50,65,0.26), rgba(61,90,128,0.18));
}
.team-header-content {
  position: relative;
  z-index: 1;
  padding: 32px 40px;
  max-width: 640px;
}
.team-header h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  margin: 0 0 12px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.85), -1px -1px 3px rgba(0,0,0,0.85), 1px -1px 3px rgba(0,0,0,0.85), -1px 1px 3px rgba(0,0,0,0.85), 0 4px 20px rgba(0,0,0,0.6);
}
.team-header p {
  color: var(--cmt-white);
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.55;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 12px rgba(0,0,0,0.6);
}

.team-member {
  position: relative;
  padding: 60px 40px 56px;
  border-bottom: 1px solid #e3e7ea;
}
.team-member::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    to right,
    var(--cmt-slate) 0% 20%,
    var(--cmt-ice) 20% 40%,
    #E6F2F6 40% 60%,
    var(--cmt-orange) 60% 80%,
    var(--cmt-navy) 80% 100%
  );
}
.team-member:nth-child(even) { background: #E6F2F6; }
.team-member-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 44px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}
.team-member-reverse .team-member-inner { grid-template-columns: 1fr 260px; }
.team-member-reverse .team-member-aside { order: 2; }
.team-member-reverse .team-member-main { order: 1; }

.team-member-photo-frame {
  position: relative;
}
.team-member-photo-frame::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: 100%;
  background: var(--cmt-orange);
  z-index: 0;
}
/* .team-member-reverse mirrors the photo/text columns (photo moves to
   the right), but this offset is a fixed physical position — left
   without the mirror leaves the accent peeking out on the outer edge
   instead of toward the text like the non-reversed layout. */
.team-member-reverse .team-member-photo-frame::before {
  left: auto;
  right: 16px;
}
.team-member-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.team-member-name {
  margin: 20px 0 0;
  font-size: 1.5rem;
  color: var(--cmt-navy);
}
.team-member-role {
  display: block;
  color: var(--cmt-orange);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
  line-height: 1.4;
}
.team-member-highlight {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 14px;
  background: var(--cmt-white);
  border: 1px solid var(--cmt-ice);
  border-radius: 999px;
  color: var(--cmt-slate);
  font-size: 0.8rem;
  font-weight: 700;
}
.team-member-bio p {
  color: #45505f;
  line-height: 1.7;
  font-size: 1.02rem;
  margin: 0 0 16px;
}
.team-member-bio p:first-of-type {
  font-size: 1.12rem;
  color: var(--cmt-navy);
}
.team-member-bio p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .team-member { padding: 40px 24px; }
  .team-member-inner,
  .team-member-reverse .team-member-inner { grid-template-columns: 1fr; gap: 24px; }
  .team-member-reverse .team-member-aside,
  .team-member-reverse .team-member-main { order: initial; }
  .team-member-photo-frame { max-width: 220px; }
  .team-member-photo { height: 220px; }
}

/* ---- Courses page ---- */
.courses-header {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--cmt-white);
}
.courses-header-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .courses-header-bg { object-position: 78% center; }
  .wwd-header-bg { object-position: center center; }
}
.courses-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(41,50,65,0.26), rgba(61,90,128,0.18));
}
.courses-header-content { position: relative; z-index: 1; padding: 32px 40px; max-width: 640px; }
.courses-header h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 12px; text-shadow: 1px 1px 3px rgba(0,0,0,0.85), -1px -1px 3px rgba(0,0,0,0.85), 1px -1px 3px rgba(0,0,0,0.85), -1px 1px 3px rgba(0,0,0,0.85), 0 4px 20px rgba(0,0,0,0.6); }
.courses-header p { color: var(--cmt-white); margin: 0 auto; font-size: 1.05rem; line-height: 1.55; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 12px rgba(0,0,0,0.6); }

.courses-benefits {
  padding: 56px 40px;
  background: var(--cmt-white);
}
.courses-benefits-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.courses-benefits-inner > div:last-child {
  border-left: 1px solid #d7dde2;
  padding-left: 40px;
}
@media (max-width: 760px) {
  .courses-benefits-inner > div:last-child { border-left: none; padding-left: 0; }
}
.courses-benefits h2 { font-size: 1.5rem; color: var(--cmt-navy); margin: 0 0 16px; }
.courses-benefits-list { list-style: none; margin: 0; padding: 0; }
.courses-benefits-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: #45505f;
  line-height: 1.5;
}
.courses-benefits-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cmt-orange);
  color: var(--cmt-white);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
}
.courses-benefits-note { color: #45505f; line-height: 1.6; font-size: 1.02rem; }

.course-section { padding: 64px 40px; background: var(--cmt-white); }
.course-section-tint { background: #F2F4F6; }
.course-section-inner { max-width: 1100px; margin: 0 auto; }
.course-section-intro { max-width: 720px; margin: 0 0 36px; }
.course-section-intro h2 { font-size: 1.7rem; color: var(--cmt-navy); margin: 0 0 12px; }
.course-section-intro p { color: #45505f; line-height: 1.6; font-size: 1.02rem; margin: 0 0 12px; }

/* ---- Curriculum breadth (from CMT-2025-Services.svg) ---- */
.curriculum-map { padding: 64px 40px; background: #F2F4F6; }
.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}
.curriculum-card {
  background: var(--cmt-white);
  padding: 24px 26px;
  border-top: 4px solid var(--cmt-slate);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.curriculum-card:nth-child(2) { border-top-color: var(--cmt-orange); }
.curriculum-card:nth-child(3) { border-top-color: var(--cmt-navy); }
.curriculum-card:nth-child(4) { border-top-color: var(--cmt-ice); }
.curriculum-card:nth-child(5) { border-top-color: var(--cmt-orange); }
.curriculum-card:nth-child(6) { border-top-color: var(--cmt-navy); }
.curriculum-card h3 { font-size: 1.05rem; color: var(--cmt-navy); margin: 0 0 14px; }
.curriculum-card ul { list-style: none; margin: 0; padding: 0; }
.curriculum-card li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 9px;
  color: #45505f;
  font-size: 0.9rem;
  line-height: 1.4;
}
.curriculum-card li:last-child { margin-bottom: 0; }
.curriculum-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cmt-orange);
}

.curriculum-surveys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.curriculum-survey-card {
  background: var(--cmt-navy);
  color: var(--cmt-white);
  padding: 28px 30px;
}
.curriculum-survey-card .marketing-eyebrow { margin-bottom: 8px; }
.curriculum-survey-card h3 { font-size: 1.2rem; margin: 0 0 12px; }
.curriculum-survey-card p { color: var(--cmt-ice); line-height: 1.55; font-size: 0.95rem; margin: 0; }

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 28px;
}
.course-tile {
  background: var(--cmt-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.course-card-photo { position: relative; }
.course-card-photo img { width: 100%; height: 180px; object-fit: cover; display: block; object-position: center 20%; }
.course-card-photo img.course-card-photo-face { object-position: center 12%; }
.course-section-tint .course-card-photo img { height: 260px; }
.course-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--cmt-orange);
  color: var(--cmt-white);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 999px;
}
.course-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.course-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.course-card-icon { width: 34px; height: 34px; flex-shrink: 0; }
.course-card-body h3 { font-size: 1.15rem; color: var(--cmt-navy); margin: 0; }
.course-card-title h3 { margin: 0; }
.course-card-body p { color: #45505f; line-height: 1.55; font-size: 0.95rem; margin: 0; flex: 1; }
.course-card-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef1f3;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cmt-slate);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.course-topics {
  padding: 56px 40px;
  background: var(--cmt-navy);
  color: var(--cmt-white);
}
.course-topics-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}
.course-topics h2 { font-size: 1.6rem; margin: 0 0 20px; }
.course-topics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
}
.course-topics-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
  color: var(--cmt-ice);
  font-size: 0.92rem;
  line-height: 1.45;
  break-inside: avoid;
}
.course-topics-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cmt-orange);
}
.course-topics-photo img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 420px; }

@media (max-width: 760px) {
  .courses-benefits-inner { grid-template-columns: 1fr; }
  .course-section { padding: 44px 24px; }
  .curriculum-map { padding: 44px 24px; }
  .course-topics { padding: 44px 24px; }
  .course-topics-inner { grid-template-columns: 1fr; }
  .course-topics-list { columns: 1; }
  .course-topics-photo { display: none; }
}

/* ---- What We Do page ---- */
.wwd-mission { padding: 64px 40px; background: var(--cmt-white); text-align: center; }
.wwd-mission p { color: #45505f; line-height: 1.7; font-size: 1.05rem; max-width: 720px; margin: 0 auto 20px; text-align: left; }
p.wwd-pullquote {
  font-family: "La Belle Aurore", cursive;
  font-size: 2.1rem;
  color: var(--cmt-orange);
  line-height: 1.4;
  max-width: 640px;
  margin: 28px auto 0 !important;
  text-align: center;
}

.wwd-platform {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.wwd-platform-photo img { width: 100%; height: 320px; object-fit: cover; display: block; }

.wwd-catchment-platform { padding: 64px 40px; background: var(--cmt-navy); color: var(--cmt-white); }
.wwd-catchment-platform .course-section-intro p { color: var(--cmt-ice); max-width: 560px; }
.wwd-catchment-platform .marketing-eyebrow { color: var(--cmt-orange); }
.wwd-catchment-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.wwd-catchment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  margin: 32px 0 0;
}
.wwd-catchment-point h3 { color: var(--cmt-white); font-size: 1.1rem; margin: 0 0 10px; }
.wwd-catchment-point p { color: var(--cmt-ice); font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* ---- Survey app phone mockup (real screenshot from the live PWA, cropped to drop the OS status bar) ---- */
.wwd-catchment-device { position: relative; display: flex; justify-content: center; padding: 30px 10px; }
.wwd-phone {
  width: 240px;
  background: #10141b;
  border-radius: 32px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.3);
  transform: rotate(-3deg);
}
.wwd-phone-notch { width: 8px; height: 8px; border-radius: 50%; background: #333; margin: 4px auto 8px; }
.wwd-phone-screen {
  aspect-ratio: 1080 / 2430;
  border-radius: 22px;
  overflow: hidden;
}
.wwd-phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.wwd-callout {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--cmt-white);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 190px;
  line-height: 1.3;
}
.wwd-callout span { width: 7px; height: 7px; border-radius: 50%; background: var(--cmt-orange); flex-shrink: 0; }
.wwd-callout-1 { top: 20px; left: -10px; }
.wwd-callout-2 { bottom: -10px; right: -20px; }

@media (max-width: 900px) {
  .wwd-callout-1 { left: 0; }
  .wwd-callout-2 { right: 0; }
}
@media (max-width: 760px) {
  .wwd-catchment-layout { grid-template-columns: 1fr; gap: 40px; }
  .wwd-catchment-device { padding: 60px 20px; }
}

.wwd-diagram { padding: 64px 40px; background: #F2F4F6; text-align: center; }
.wwd-diagram .course-section-intro { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.wwd-diagram .course-section-intro p { margin: 0 auto; }
.wwd-diagram-wrap { max-width: 560px; margin: 0 auto; }
.wwd-diagram-svg { width: 100%; height: auto; display: block; }
.wwd-diagram-caption { max-width: 640px; margin: 28px auto 0; color: #45505f; font-size: 0.95rem; line-height: 1.6; }
.wwd-diagram-caption a { color: var(--cmt-slate); font-weight: 600; }

@media (max-width: 760px) {
  .wwd-mission { padding: 44px 24px; }
  .wwd-catchment-platform { padding: 44px 24px; }
  .wwd-platform { grid-template-columns: 1fr; gap: 24px; }
  .wwd-platform-photo img { height: 220px; }
}

/* ---- CTA band ---- */
.marketing-cta-band {
  text-align: center;
  padding: 72px 40px;
  background: linear-gradient(160deg, var(--cmt-navy), var(--cmt-slate));
  color: var(--cmt-white);
}
.marketing-cta-band h2 {
  font-size: 1.9rem;
  margin: 0 0 12px;
}
.marketing-cta-band p {
  color: var(--cmt-ice);
  max-width: 480px;
  margin: 0 auto 28px;
  font-size: 1.05rem;
}
.marketing-cta-band .cta {
  display: inline-block;
  background: var(--cmt-orange);
  color: var(--cmt-white);
  padding: 15px 34px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
}
.marketing-cta-band .cta:hover { filter: brightness(1.05); }

/* ---- Footer ---- */
.marketing-footer {
  background: var(--cmt-navy);
  color: #b9c2cf;
  padding: 56px 40px 24px;
}
.marketing-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.marketing-footer-logo { height: 44px; width: auto; margin-bottom: 16px; }
.marketing-footer-about p { margin: 0 0 8px; line-height: 1.5; font-size: 0.92rem; }
.marketing-footer-about a { color: var(--cmt-ice); text-decoration: none; }
.marketing-footer-about a:hover { text-decoration: underline; }
.marketing-footer-col h3 {
  color: var(--cmt-white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
}
.marketing-footer-col ul { list-style: none; margin: 0; padding: 0; }
.marketing-footer-col li { margin-bottom: 10px; }
.marketing-footer-col a { color: #b9c2cf; text-decoration: none; font-size: 0.92rem; }
.marketing-footer-col a:hover { color: var(--cmt-white); text-decoration: underline; }
.marketing-footer-copyright {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 20px;
  font-size: 0.85rem;
  color: #8590a0;
}
@media (max-width: 700px) {
  .marketing-footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Cookie consent ---- */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  max-width: 620px;
  margin: 0 auto;
  background: var(--cmt-white);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  z-index: 100;
}
.cookie-banner p { margin: 0; font-size: 0.9rem; color: #45505f; line-height: 1.5; flex: 1; min-width: 220px; }
.cookie-banner a { color: var(--cmt-slate); }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner-actions button {
  padding: 9px 18px;
  border-radius: 6px;
  border: 1px solid #cfd6dd;
  background: var(--cmt-white);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.cookie-banner-actions button.primary {
  background: var(--cmt-orange);
  color: var(--cmt-white);
  border-color: var(--cmt-orange);
}

/* ---- Legal pages (Privacy/Terms/Cookies/Accessibility) ---- */
.legal-header {
  background: var(--cmt-navy);
  color: var(--cmt-white);
  padding: 48px 40px;
  text-align: center;
}
.legal-header h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 8px; }
.legal-header p { color: var(--cmt-ice); margin: 0; font-size: 0.95rem; }
.legal-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 40px 72px;
  color: #3a4351;
}
.legal-content h2 { font-size: 1.3rem; color: var(--cmt-navy); margin: 36px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.05rem; color: var(--cmt-navy); margin: 24px 0 10px; }
.legal-content p { line-height: 1.7; margin: 0 0 16px; font-size: 1rem; }
.legal-content ul { line-height: 1.7; margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--cmt-slate); }
@media (max-width: 600px) {
  .legal-header { padding: 36px 24px; }
  .legal-content { padding: 40px 24px 56px; }
}

/* ---- Contact page ---- */
.contact-section { padding: 64px 40px 80px; background: var(--cmt-white); }
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  max-width: 900px;
  margin: 0 auto;
}
.contact-details h2 { font-size: 1.3rem; color: var(--cmt-navy); margin: 0 0 16px; }
.contact-details p { line-height: 1.6; color: #45505f; margin: 0 0 12px; }
.contact-details a { color: var(--cmt-slate); }
.contact-form button.primary { width: auto; padding: 12px 32px; }
#contact-message { grid-column: 1 / -1; }
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 700px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-form button.primary { width: 100%; }
}
@media (max-width: 480px) {
  .contact-section { padding: 40px 20px 56px; }
}

/* ---- Scripted FAQ chatbot (assets/js/chatbot.js) ---- */
.cmt-chat { position: fixed; bottom: 24px; right: 24px; z-index: 200; }
.cmt-chat-toggle {
  background: var(--cmt-orange);
  color: var(--cmt-white);
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  cursor: pointer;
}
.cmt-chat-toggle:hover { filter: brightness(1.05); }
.cmt-chat-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  bottom: 64px;
  right: 0;
  width: 340px;
  max-width: calc(100vw - 48px);
  /* Fixed height (not content-based) so the panel doesn't resize —
     and visually jump, since it's bottom-anchored — as you navigate
     between views with different amounts of content. */
  height: min(480px, 70vh);
  background: var(--cmt-white);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
}
.cmt-chat-open .cmt-chat-panel { display: flex; }
.cmt-chat-panel-header {
  background: var(--cmt-navy);
  color: var(--cmt-white);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  flex-shrink: 0;
}
.cmt-chat-close {
  background: none;
  border: none;
  color: var(--cmt-white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 10px 12px;
  margin: -10px -12px;
}
.cmt-chat-search { padding: 10px 16px; border-bottom: 1px solid #eef1f3; flex-shrink: 0; }
.cmt-chat-search input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cfd6dd;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}
.cmt-chat-search input:focus { outline: 2px solid var(--cmt-slate); outline-offset: 1px; }
.cmt-chat-panel-body { padding: 16px; overflow-y: auto; flex: 1; }
.cmt-chat-intro { font-weight: 700; color: var(--cmt-navy); margin: 0 0 12px; font-size: 0.95rem; }
.cmt-chat-list { display: flex; flex-direction: column; gap: 8px; }
.cmt-chat-item {
  text-align: left;
  background: #F2F4F6;
  border: 1px solid #e3e7ea;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--cmt-navy);
  cursor: pointer;
}
.cmt-chat-item:hover { background: #E8F0FE; border-color: var(--cmt-slate); }
.cmt-chat-back {
  background: none;
  border: none;
  color: var(--cmt-slate);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 0 12px;
  text-align: left;
}
.cmt-chat-question { font-weight: 700; color: var(--cmt-navy); margin: 0 0 10px; }
.cmt-chat-answer { color: #45505f; line-height: 1.6; margin: 0; }
.cmt-chat-fallback { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef1f3; font-size: 0.85rem; color: #5b6472; }
.cmt-chat-fallback a { color: var(--cmt-orange); font-weight: 700; }
@media (max-width: 480px) {
  .cmt-chat { bottom: 16px; right: 16px; }
  .cmt-chat-panel { width: calc(100vw - 32px); }
}