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

:root {
  --bg:        #F4F5F8;
  --surface:   #FFFFFF;
  --border:    #DDE2EC;
  --text:      #1A2435;
  --text2:     #5A6880;
  --text3:     #66758B;
  --accent:    #0055AA;
  --accent-lt: #E6F1FB;
  --accent-light: #3EACF2;
  --brand-green: #6BA82E;
  --brand-green-text: #527F1F;
  --brand-navy:  #142B3A;
  --radius:    8px;
  --shadow:    0 1px 4px rgba(0,0,0,.07), 0 0 0 1px var(--border);
  --sidebar:   264px;

  /* Specialty palette — muted, clinical */
  --c-restorative:   #216689;
  --c-implantology:  #2857A0;
  --c-general:       #2F7049;
  --c-perio:         #217A52;
  --c-digital:       #5840A8;
  --c-ortho:         #8F5426;
  --c-preventive:    #1F7E77;
  --c-practice:      #636327;
  --c-prostho:       #4E5B7A;
  --c-endo:          #B03838;
  --c-pharma:        #7A38A8;
  --c-infection:     #1F7070;
  --c-lasers:        #4C6E17;
  --c-oral:          #8A6620;
  --c-paeds:         #A83068;
  --c-surgery:       #4858A0;
}

html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
h1, h2, h3 { font-family: 'Sora', 'Plus Jakarta Sans', sans-serif; }

/* ─── SKIP LINK ──────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; font-weight: 600;
  padding: 10px 18px; border-radius: 0 0 var(--radius) 0;
  text-decoration: none; font-size: .9rem;
}
.skip-link:focus { left: 0; }
#resultsArea:focus { outline: none; }

/* ─── HEADER ─────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  padding: 0 20px;
}
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--accent-light) 0%, var(--accent) 45%, var(--brand-green) 100%);
}
.header-inner { position: relative; }
.header-inner {
  max-width: 1260px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  height: 60px;
}
.logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; flex-shrink: 0;
}
.logo-img {
  height: 38px; width: auto; display: block;
}
.logo-sub-standalone {
  font-size: .7rem; font-weight: 400; color: var(--text3);
  padding-left: 12px; border-left: 1px solid var(--border);
  line-height: 1.2; max-width: 100px;
}
.search-wrap {
  flex: 1; position: relative;
}
.search-wrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  fill: var(--text3); pointer-events: none;
}
#searchInput {
  width: 100%; padding: 9px 14px 9px 38px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; font-size: .9rem; color: var(--text);
  background: var(--bg);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
#searchInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(48,104,192,.12);
  background: white;
}
.header-stats {
  flex-shrink: 0; font-size: .8rem; color: var(--text3); white-space: nowrap;
}
.header-stats strong { color: var(--text2); }
.header-nav {
  flex-shrink: 0; display: flex; gap: 16px; align-items: center;
}
.header-nav a {
  font-size: .82rem; font-weight: 500; color: var(--text2);
  text-decoration: none; white-space: nowrap; transition: color .15s;
}
.header-nav a:hover { color: var(--accent); }

/* ─── HERO BAND ──────────────────────────────── */
.h1-band {
  background: linear-gradient(115deg, #0A3D75 0%, var(--accent) 40%, #1E7FCB 68%, var(--brand-green) 118%);
  padding: 34px 20px 30px; position: relative; overflow: hidden;
}
.h1-band::before {
  content: ''; position: absolute; right: -140px; top: -180px; width: 460px; height: 460px;
  border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none;
}
.h1-band::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent-light), var(--brand-green));
}
.h1-inner { max-width: 1260px; margin: 0 auto; position: relative; }
.h1-band h1 {
  font-size: clamp(1.35rem, 3vw, 2.05rem); font-weight: 700; color: #fff;
  letter-spacing: -.02em; line-height: 1.25; max-width: 860px; text-wrap: balance;
}
.hero-sub {
  margin-top: 9px; font-size: .95rem; color: #D6E7F8; max-width: 660px; line-height: 1.55;
}
.hero-trust { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 18px; }
.hero-curator {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: 5px 16px 5px 6px; color: #fff; font-size: .85rem; font-weight: 600;
}
.hero-curator img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); display: block; }
.hero-stat {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(9,34,64,.35); border-radius: 999px; padding: 8px 14px;
  color: #EAF3FC; font-size: .8rem; font-weight: 600;
}
.hero-stat strong { color: #fff; }
@media (max-width: 560px) { .h1-band { padding: 24px 16px 22px; } }

/* ─── AD LEADERBOARD ─────────────────────────── */
.ad-leaderboard {
  max-width: 1260px; margin: 16px auto 0;
  padding: 0 20px;
}
.ad-slot {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: .75rem;
  position: relative;
}
.ad-slot::before {
  content: 'Advertisement';
  position: absolute; top: 4px; left: 8px;
  font-size: .65rem; color: var(--text3); letter-spacing: .05em; text-transform: uppercase;
}
.ad-leaderboard .ad-slot { height: 100px; }
.ad-inline .ad-slot  { height: 90px; margin: 16px 0; }
.ad-sidebar .ad-slot { min-height: 260px; }
/* Collapse ad space when AdSense reports no fill (e.g. account not yet
   approved, no matching ad, ad blocker). data-ad-status is set by the
   AdSense script; .ad-empty is set by the watchdog in initAds() for the
   case where the script never loads at all. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-leaderboard:has(ins[data-ad-status="unfilled"]),
.ad-sidebar:has(ins[data-ad-status="unfilled"]),
.ad-inline:has(ins[data-ad-status="unfilled"]),
.footer-ad:has(ins[data-ad-status="unfilled"]),
.ad-empty { display: none !important; }

/* ─── MAIN LAYOUT ────────────────────────────── */
.page-body {
  max-width: 1260px; margin: 0 auto;
  padding: 20px 20px 60px;
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  gap: 20px;
  align-items: start;
}

/* ─── SIDEBAR ────────────────────────────────── */
.sidebar {
  position: sticky; top: 76px;
  display: flex; flex-direction: column; gap: 2px;
}
.filter-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.filter-panel:has(> .sub-nudge) {
  background: none; border: none; border-radius: 0; overflow: visible;
}
.filter-header {
  padding: 12px 14px;
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.filter-clear {
  font-size: .72rem; font-weight: 500; color: var(--accent);
  background: none; border: none; cursor: pointer; padding: 0;
  text-transform: none; letter-spacing: 0;
}
.filter-clear:hover { text-decoration: underline; }
.filter-list {
  padding: 8px 0; max-height: 320px; overflow-y: auto;
}
.filter-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 14px; cursor: pointer;
  transition: background .1s;
  font-size: .875rem;
  -webkit-tap-highlight-color: rgba(0,85,170,.08);
}
.filter-item:hover { background: var(--bg); }
.filter-item input[type=checkbox] {
  width: 15px; height: 15px; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}
.filter-item .filter-name { flex: 1; color: var(--text); }
/* comfortable thumb targets inside the mobile drawer */
.filter-drawer .filter-item { padding: 11px 16px; }
.filter-drawer .filter-item input[type=checkbox] { width: 18px; height: 18px; }
.filter-count {
  font-size: .72rem; color: var(--text3);
  background: var(--bg); border-radius: 20px;
  padding: 1px 7px; flex-shrink: 0;
}
.filter-sep { height: 8px; }
.cert-toggle {
  padding: 10px 14px; display: flex; align-items: center; justify-content: space-between;
}
.cert-toggle label { font-size: .875rem; cursor: pointer; color: var(--text); }
.toggle-switch {
  position: relative; width: 36px; height: 20px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: #CDD3DF;
  border-radius: 20px; cursor: pointer; transition: .2s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 14px; height: 14px;
  left: 3px; top: 3px; background: white; border-radius: 50%;
  transition: .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ─── RESULTS AREA ───────────────────────────── */
.results-area { min-width: 0; }
.results-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.results-count { font-size: .875rem; color: var(--text2); flex: 1; }
.results-count strong { color: var(--text); }
.sort-select {
  padding: 7px 28px 7px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); font: inherit; font-size: .85rem;
  color: var(--text); background: var(--surface);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235A6880'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  outline: none; cursor: pointer;
}
.link-verified { font-size: .74rem; color: var(--text3); margin: -6px 0 10px; }
.link-verified svg { vertical-align: -2px; margin-right: 4px; color: var(--brand-green, #6BA82E); }
.sp-sponsor-strip { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:2px 0 10px; padding:9px 14px; font-size:.83rem; color:var(--text2);
  background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.sp-sponsor-strip a { display:inline-flex; align-items:center; gap:7px;
  color:var(--accent); font-weight:600; text-decoration:none; }
.sp-sponsor-strip a:hover { text-decoration:underline; }
.sp-sponsor-strip img { height:20px; width:auto; border-radius:4px; }
.sideline-ad { display:flex; flex-direction:column; gap:7px; }
.sideline-label { font-size:.66rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text3); }
.sideline-ad img { display:block; width:100%; height:auto; border-radius:8px;
  border:1px solid var(--border); }
.sideline-title { font-size:.83rem; font-weight:600; color:var(--accent);
  text-decoration:none; }
.sideline-title:hover { text-decoration:underline; }
.active-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.active-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 10px;
  background: var(--accent-lt); color: var(--accent);
  border-radius: 20px; font-size: .78rem; font-weight: 500;
}
.active-tag button {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: .9rem; line-height: 1;
  padding: 0; margin-left: 2px;
}
.clear-all-btn {
  padding: 3px 10px; background: none; border: 1px solid var(--border);
  border-radius: 20px; font: inherit; font-size: .78rem;
  color: var(--text2); cursor: pointer;
}
.clear-all-btn:hover { background: var(--bg); }

/* ─── COURSE CARDS GRID ──────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 15px 17px;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color .15s, box-shadow .15s;
  text-decoration: none;
  cursor: pointer;
}
.course-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0,85,170,.08);
}
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; padding-right: 34px; }
.course-card { position: relative; }
.card-hit {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; text-decoration: none;
}
.card-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fav-btn {
  position: absolute; top: 9px; right: 9px;
  width: 34px; height: 34px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); z-index: 2;
  -webkit-tap-highlight-color: rgba(211,51,51,.12);
}
.fav-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill .15s, stroke .15s, transform .12s; }
.fav-btn:hover { color: #D33; }
.fav-btn:hover svg { transform: scale(1.12); }
.fav-btn.active { color: #D33; }
.fav-btn.active svg { fill: #D33; stroke: #D33; }
.fav-mini { color: #D33; font-size: .75rem; }
.course-card.featured { border: 1.5px solid var(--accent); background: linear-gradient(180deg, var(--accent-lt) 0%, var(--surface) 34%); }
.tag-featured { background: var(--accent); color: #fff; }
.card-sponsor { font-size: .72rem; color: var(--text3); margin-top: 2px; font-style: italic; }
/* ─── MONTHLY PICKS (editorial) ───────────────── */
.course-card.pick { border: 1.5px solid var(--brand-green); background: linear-gradient(180deg, #F3F9EB 0%, var(--surface) 34%); }
.tag-pick { background: var(--brand-green); color: #fff; font-weight: 600; }
.card-blurb { font-size: .78rem; color: var(--text2); margin-top: 2px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-provider { display: flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 500; color: var(--text2); margin-top: 3px; }
.card-provider svg { flex-shrink: 0; opacity: .7; }
.picks-heading { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 -4px; }
.picks-heading h2 { font-size: 1.02rem; font-weight: 700; color: var(--text); margin: 0; }
.picks-heading span { font-size: .78rem; color: var(--text3); }
/* Premium sponsored card features */
.card-logo { position: absolute; top: 10px; right: 12px; max-height: 26px; max-width: 110px; object-fit: contain; z-index: 1; }
.card-banner { display: block; width: 100%; height: auto; max-height: 150px; object-fit: cover; border-radius: 8px; margin: 0 0 10px; }
.course-card.has-banner .card-logo { position: static; margin: 0 0 6px; }
.course-card.has-logo .card-tags { padding-right: 120px; }
.promo-chip { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  background: var(--bg); border: 1px dashed var(--text3); border-radius: 5px; padding: 2px 8px; margin-top: 6px; color: var(--text); }
@media (min-width: 561px) { .course-card.sponsored-hero { grid-column: span 2; } }
.course-card.affiliate { border: 1.5px solid #C98A1B; background: linear-gradient(180deg, #FDF6E9 0%, var(--surface) 34%); }
.tag-affiliate { background: #C98A1B; color: #fff; font-weight: 600; }
.tag-paid { background: #FDF0E0; color: #9A5B00; border: 1px solid #E8C48A; font-weight: 600; }
/* Static directory intro — now inside curator trust band above the footer */
.curator-band { padding: 44px 20px 0; }
.curator-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; gap: 22px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 4px 16px rgba(20,43,58,.06);
}
.curator-avatar { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--accent-lt); flex-shrink: 0; display: block; }
.directory-intro { font-size: .9rem; color: var(--text2); line-height: 1.65; }
.directory-intro h2 { font-size: 1.15rem; color: var(--text); margin-bottom: 8px; }
@media (max-width: 640px) { .curator-inner { flex-direction: column; align-items: center; } .curator-avatar { width: 76px; height: 76px; } }
.directory-intro p { margin-bottom: 8px; }
.directory-intro p:last-child { margin-bottom: 0; }
.course-card.sponsored-hero .card-title { font-size: 1.02rem; }
.log-btn {
  position: absolute; top: 9px; right: 47px;
  width: 34px; height: 34px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); z-index: 2;
  -webkit-tap-highlight-color: rgba(0,85,170,.12);
}
.log-btn svg { transition: transform .12s, stroke .15s; }
.log-btn:hover { color: var(--accent); }
.log-btn:hover svg { transform: scale(1.12); }
.log-btn.active { color: #6BA82E; }
.tag-logged { background: #E9F5E0; color: #3F6B18; }
.cpd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 100px;
  background: var(--accent-lt); color: var(--accent);
  font-size: .8rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--border); white-space: nowrap;
}
.cpd-pill:hover { background: #d6e8f8; }
.cpd-pill svg { flex-shrink: 0; }
.cpd-toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--text); color: #fff; padding: 12px 18px;
  border-radius: 10px; font-size: .88rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  display: flex; align-items: center; gap: 14px; max-width: 90vw;
}
.cpd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.cpd-toast a { color: #7FC3FF; font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .log-btn svg, .cpd-toast { transition: none; } }
.tag {
  font-size: .68rem; font-weight: 700; padding: 3px 9px;
  border-radius: 20px; letter-spacing: .03em;
}
.tag-sp {
  background: color-mix(in srgb, var(--sp-color) 10%, white);
  color: var(--sp-color);
  text-transform: uppercase;
}
.tag-prov {
  background: var(--bg); color: var(--text3);
  font-weight: 400;
}
.tag-new {
  background: var(--brand-green-text); color: #fff; font-weight: 600;
}
.card-title {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem; font-weight: 600; color: var(--text);
  line-height: 1.4;
}
.card-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; color: var(--text3); margin-top: auto;
}
.meta-item { display: flex; align-items: center; gap: 4px; }
.meta-item svg { flex-shrink: 0; }
.card-link {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .78rem; font-weight: 600; color: var(--accent);
  text-decoration: none; white-space: nowrap;
}

/* ─── SPECIALTY BORDER COLOURS ───────────────── */
.sp-Restorative                   { --sp-color: var(--c-restorative); border-left-color: var(--c-restorative); }
.sp-Implantology                  { --sp-color: var(--c-implantology); border-left-color: var(--c-implantology); }
.sp-General-Dentistry             { --sp-color: var(--c-general); border-left-color: var(--c-general); }
.sp-Periodontics-Hygiene          { --sp-color: var(--c-perio); border-left-color: var(--c-perio); }
.sp-Digital-Dentistry-Imaging     { --sp-color: var(--c-digital); border-left-color: var(--c-digital); }
.sp-Orthodontics                  { --sp-color: var(--c-ortho); border-left-color: var(--c-ortho); }
.sp-Preventive-Dentistry          { --sp-color: var(--c-preventive); border-left-color: var(--c-preventive); }
.sp-Practice-Management           { --sp-color: var(--c-practice); border-left-color: var(--c-practice); }
.sp-Prosthodontics-Occlusion      { --sp-color: var(--c-prostho); border-left-color: var(--c-prostho); }
.sp-Endodontics                   { --sp-color: var(--c-endo); border-left-color: var(--c-endo); }
.sp-Pharmacology-Anaesthesia      { --sp-color: var(--c-pharma); border-left-color: var(--c-pharma); }
.sp-Infection-Control-Compliance  { --sp-color: var(--c-infection); border-left-color: var(--c-infection); }
.sp-Lasers-Technology             { --sp-color: var(--c-lasers); border-left-color: var(--c-lasers); }
.sp-Oral-Medicine                 { --sp-color: var(--c-oral); border-left-color: var(--c-oral); }
.sp-Paediatric-Dentistry          { --sp-color: var(--c-paeds); border-left-color: var(--c-paeds); }
.sp-Oral-Surgery-Regeneration     { --sp-color: var(--c-surgery); border-left-color: var(--c-surgery); }
.sp-default                       { --sp-color: var(--text3); border-left-color: var(--border); }

/* ─── COURSE MODAL: SPECIALTY COLOUR CODING ──── */
/* The modal carries the card's sp-* class, so --sp-color resolves to the
   same palette as the card borders. Accent stays decorative (band + tints);
   text and CTAs keep their audited contrast colours. */
.cmodal {
  position: relative; overflow: hidden;
  border-top: 5px solid var(--sp-color, var(--border));
  /* whole popup carries a soft wash of the specialty colour instead of
     flat white; ~8% keeps body text comfortably past WCAG AA on every
     palette hue while reading unmistakably tinted */
  background: color-mix(in srgb, var(--sp-color, transparent) 8%, var(--surface));
}
.cmodal-body::before {
  content: ""; display: block; position: absolute; inset: 0 0 auto 0; height: 96px;
  background: linear-gradient(color-mix(in srgb, var(--sp-color, transparent) 16%, transparent), transparent);
  border-radius: 12px 12px 0 0; pointer-events: none;
}
.cmodal-provider { color: color-mix(in srgb, var(--sp-color, var(--text2)) 68%, var(--text)); }
/* white elements pop against the wash */
.cmodal-act, .cm-share-chip, .cm-revform input, .cm-revform textarea { background: var(--surface); }
.cmodal-picknote, .cmodal-reviews .cm-revlist .rev {
  background: color-mix(in srgb, var(--sp-color, transparent) 4%, var(--surface));
}
.cmodal-close { background: color-mix(in srgb, var(--sp-color, transparent) 8%, var(--surface)); }

/* ─── COURSE MODAL: SHARE ROW ────────────────── */
.cmodal-share {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: -6px 0 16px; padding: 12px;
  background: color-mix(in srgb, var(--sp-color, var(--text3)) 12%, var(--surface));
  border: 1px solid var(--border); border-radius: 10px;
}
.cm-share-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  font: 600 .78rem/1 'Public Sans', sans-serif; color: var(--text2);
  cursor: pointer; text-decoration: none;
}
.cm-share-chip:hover { border-color: var(--sp-color, var(--accent)); color: var(--text); }
.cm-share-chip svg { flex-shrink: 0; }
/* recognisable brand hints on hover only — resting state stays calm */
.cm-share-whatsapp:hover { color: #128C4B; }
.cm-share-messenger:hover, .cm-share-facebook:hover { color: #0866FF; }
.cm-share-linkedin:hover { color: #0A66C2; }
@media (max-width: 560px) {
  .cm-share-chip { padding: 8px 10px; font-size: .75rem; }
}

/* ─── EMPTY / LOADING ────────────────────────── */
.empty-state {
  grid-column: 1/-1; text-align: center;
  padding: 60px 20px; color: var(--text3);
}
.empty-state h3 { font-size: 1rem; color: var(--text2); margin-bottom: 6px; }

/* ─── PAGINATION ─────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 24px; flex-wrap: wrap;
}
.page-btn {
  width: 36px; height: 36px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2); transition: .1s;
}
.page-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: white; font-weight: 600; }
.page-btn:disabled { opacity: .35; cursor: default; }
.page-btn.wide { width: auto; padding: 0 12px; }

/* ─── GUIDES STRIP ───────────────────────────── */
.guides-strip { padding: 4px 20px 8px; }
.guides-inner { max-width: 1260px; margin: 0 auto; }
.guides-strip h2 {
  font-size: .82rem; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
}
.guides-links { display: flex; flex-wrap: wrap; gap: 8px; }
.guides-links a {
  font-size: .82rem; font-weight: 500; color: var(--accent);
  text-decoration: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px; padding: 5px 13px;
  transition: border-color .15s, background .15s;
}
.guides-links a:hover { border-color: var(--accent-light); background: var(--accent-lt); }

/* ─── EMAIL SIGNUP ───────────────────────────── */
.subscribe-band { padding: 18px 20px 26px; }
.sub-inner {
  max-width: 1260px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--brand-green-text);
  border-radius: var(--radius); padding: 22px 26px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.sub-copy { flex: 1; min-width: 260px; }
.sub-copy h2 { font-size: 1.05rem; margin-bottom: 4px; }
.sub-copy p { font-size: .85rem; color: var(--text3); margin: 0; }
.sub-form { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
.sub-form input[type=email] {
  font: inherit; font-size: .9rem; padding: 10px 14px; min-width: 230px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); outline: none;
}
.sub-form input[type=email]:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,85,170,.12); background: #fff;
}
.sub-btn {
  font: inherit; font-size: .9rem; font-weight: 600; padding: 10px 20px;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius); cursor: pointer; transition: background .15s;
}
.sub-btn:hover { background: #00468c; }
.sub-btn:disabled { opacity: .6; cursor: default; }
.sub-msg { flex-basis: 100%; font-size: .83rem; margin: 0; display: none; }
.sub-msg.ok { display: block; color: var(--brand-green-text); font-weight: 600; }
.sub-msg.err { display: block; color: #9A3030; }
.sub-nudge {
  display: block; padding: 15px 16px; text-decoration: none;
  background: linear-gradient(135deg, var(--brand-green, #6BA82E) 0%, #4E8C22 100%);
  border-radius: 10px; box-shadow: 0 4px 14px rgba(78,140,34,.28);
  position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease;
}
.sub-nudge::before {
  content: "Advertise"; position: absolute; top: 9px; right: 10px;
  font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.22); padding: 2px 7px; border-radius: 999px;
}
.sub-nudge:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(78,140,34,.38); }
.sub-nudge strong { display: block; font-size: 1rem; color: #fff; margin-bottom: 4px; padding-right: 70px; }
.sub-nudge span { font-size: .82rem; color: #EAF7EC; font-weight: 500; line-height: 1.4; }
.sub-nudge:hover span { 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;
}

/* Standard site footer — navy brand band, consistent with all content pages */
footer{background:var(--brand-navy);margin:0;max-width:none;padding:22px 20px 14px;color:#9FB4C6;font-size:.78rem;border-top:none;text-align:left;position:relative}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-light),var(--accent) 45%,var(--brand-green))}
footer a{color:#CFE0EF;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .sep{margin:0 6px;color:#41586E}
.footer-main{max-width:1100px;margin:0 auto;display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.footer-brand{flex:0 0 220px;min-width:180px}
.footer-cols{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;text-align:left}
.footer-nav-col h3{font-family:'Sora','Plus Jakarta Sans',sans-serif;font-size:.72rem;font-weight:700;color:#7FA3C4;text-transform:uppercase;letter-spacing:.07em;margin:0 0 6px}
.footer-nav-col p{display:none}
.footer-nav-col a{display:block;font-size:.78rem;color:#CFE0EF;line-height:1.75;text-decoration:none}
.footer-nav-col a:hover{color:#fff;text-decoration:underline}
.footer-legal{max-width:1100px;margin:14px auto 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
.footer-logo-sil{display:block;margin:0 0 8px;height:30px;width:auto;opacity:.92}
.footer-tag{color:#BCD3EA;font-size:.78rem;margin:0;max-width:230px;line-height:1.5}

/* ─── FOOTER ─────────────────────────────────── */
.site-footer {
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 32px 20px;
}
.footer-inner {
  max-width: 1260px; margin: 0 auto;
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.footer-col { flex: 1; min-width: 180px; }
.footer-col h4 { font-size: .8rem; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.footer-col p, .footer-col a { font-size: .82rem; color: var(--text3); line-height: 1.6; }
.footer-col a { color: var(--accent); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-ad { flex: 2; min-width: 300px; }
.footer-bottom { max-width: 1260px; margin: 20px auto 0; font-size: .78rem; color: var(--text3); border-top: 1px solid var(--border); padding-top: 16px; }

/* ─── RESPONSIVE ─────────────────────────────── */
/* Mid-size: header can't fit logo + search + stats + full nav */
@media (max-width: 1250px) {
  .header-stats { display: none; }
  .logo-sub-standalone { display: none; }
  .header-nav { gap: 12px; }
  .header-nav a { font-size: .78rem; }
}
@media (max-width: 1060px) {
  .site-header .header-nav { display: none; position: absolute; top: 60px; right: 12px; z-index: 150;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14);
    flex-direction: column; gap: 0; padding: 6px; min-width: 190px; }
  .site-header .header-nav.open { display: flex; }
  .site-header .header-nav a { font-size: .9rem; padding: 11px 14px; border-radius: 6px; white-space: nowrap; }
  .site-header .header-nav a:hover { background: var(--bg); }
  .site-header .hamburger { display: flex; }
}
@media (max-width: 860px) {
  .ad-leaderboard { display: none; }
  .page-body { grid-template-columns: 1fr; }
  .sidebar { display: none; }              /* filters live in the drawer */
  .cards-grid { grid-template-columns: 1fr; }
  .header-stats { display: none; }
  .logo-sub-standalone { display: none; }
  .hamburger { display: flex; }
  .header-nav {
    display: none; position: absolute; top: 60px; right: 12px; z-index: 150;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14);
    flex-direction: column; gap: 0; padding: 6px; min-width: 190px;
  }
  .header-nav.open { display: flex; }
  .header-nav a {
    font-size: .9rem; padding: 11px 14px; border-radius: 6px; white-space: nowrap;
  }
  .header-nav a:hover { background: var(--bg); }
  .filters-btn { display: inline-flex; }
  .results-toolbar {
    position: sticky; top: 60px; z-index: 90;
    background: var(--bg); padding: 10px 0; margin: -10px 0 8px;
  }
  .results-count { font-size: .8rem; }
  .filter-drawer .filter-list { max-height: 240px; }
}
@media (max-width: 520px) {
  .header-inner { gap: 10px; }
  #searchInput { font-size: .85rem; padding-left: 34px; }
  .drawer-clear { padding: 12px 14px; }
}


/* ─── HAMBURGER + MOBILE MENU ────────────────── */
.hamburger {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text2); cursor: pointer;
  width: 38px; height: 38px; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hamburger:hover { color: var(--accent); border-color: var(--accent-light); }

/* ─── FILTERS BUTTON + BADGE ─────────────────── */
.filters-btn {
  display: none; align-items: center; gap: 6px;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--text2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 14px; cursor: pointer;
  flex-shrink: 0; position: relative;
}
.filters-btn:hover { color: var(--accent); border-color: var(--accent-light); }
.filters-badge {
  background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700;
  border-radius: 20px; padding: 1px 7px; margin-left: 2px;
}

/* ─── FILTER DRAWER (bottom sheet) ───────────── */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(20,36,53,.45);
  z-index: 300; opacity: 0; transition: opacity .22s;
}
.drawer-overlay.open { opacity: 1; }
.filter-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 310;
  background: var(--surface); border-radius: 14px 14px 0 0;
  max-height: 82vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .26s ease;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
.filter-drawer.open { transform: translateY(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.drawer-header strong { font-size: 1rem; }
.drawer-close {
  background: none; border: none; font-size: 1.6rem; line-height: 1;
  color: var(--text3); cursor: pointer; padding: 2px 8px;
}
.drawer-body { overflow-y: auto; padding: 12px 14px; flex: 1; }
.drawer-body .filter-panel { margin-bottom: 10px; }
.drawer-footer {
  display: flex; gap: 10px; padding: 12px 14px;
  border-top: 1px solid var(--border); flex-shrink: 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.drawer-clear {
  font: inherit; font-size: .88rem; font-weight: 500; color: var(--text2);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 18px; cursor: pointer;
}
.drawer-apply {
  flex: 1; font: inherit; font-size: .92rem; font-weight: 600; color: #fff;
  background: var(--accent); border: none; border-radius: var(--radius);
  padding: 12px 18px; cursor: pointer;
}
.drawer-apply:active { background: #00468c; }
body.drawer-open { overflow: hidden; }

/* ─── COLLAPSIBLE FILTER SECTIONS ────────────── */
.filter-header.toggleable { cursor: pointer; user-select: none; }
.filter-header .chev {
  transition: transform .18s; margin-left: auto; flex-shrink: 0;
  color: var(--text3);
}
.filter-panel.collapsed .filter-list { display: none; }
.filter-panel.collapsed .chev { transform: rotate(-90deg); }
.filter-header .filter-clear { margin-left: 8px; margin-right: 4px; }

/* ─── BACK TO TOP ────────────────────────────── */
.back-to-top {
  position: fixed; right: 16px; bottom: 20px; z-index: 120;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ─── LOAD MORE (mobile pagination) ──────────── */
.load-more-btn {
  display: block; width: 100%; margin-top: 18px;
  font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--accent); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px; cursor: pointer;
}
.load-more-btn:active { background: var(--accent-lt); }

/* ─── SCROLLBAR ──────────────────────────────── */
.filter-list::-webkit-scrollbar { width: 4px; }
.filter-list::-webkit-scrollbar-track { background: transparent; }
.filter-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ─── LEGEND ─────────────────────────────────── */
.legend-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px; margin-top: 6px;
}
.legend-item {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; color: var(--text2);
}
.legend-dot {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}
/* ─── MOBILE VISIBILITY OVERRIDES (must stay last in stylesheet) ── */
@media (max-width: 860px) {
  .hamburger { display: flex; }
  .filters-btn { display: inline-flex; }
}

/* ---- explore band ---- */
.explore-band{background:var(--surface);border-top:1px solid var(--border);margin-top:44px;padding:34px 20px 30px;position:relative}
.explore-band::before{content:'';position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent-light) 0%,var(--accent) 45%,var(--brand-green,#6BA82E) 100%)}
.explore-inner{max-width:1100px;margin:0 auto}
.explore-cta{font-size:1.05rem;font-weight:600;color:var(--text);max-width:760px;line-height:1.5;margin:0 0 22px}
.explore-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.explore-col h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin:0 0 10px;font-weight:600}
.explore-col p{font-size:.85rem;color:var(--text2);margin:0 0 8px;line-height:1.5}
.explore-col a{display:block;font-size:.86rem;color:var(--accent);text-decoration:none;margin-bottom:6px;font-weight:500}
.explore-col a:hover{text-decoration:underline}
.explore-col a.explore-link{font-weight:700}
.ad-incontent,.ad-prefooter{margin:26px auto;text-align:center;max-width:900px}
.ad-prefooter{margin:40px auto -6px;padding:0 20px}
@media(max-width:760px){.explore-cols{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.explore-cols{grid-template-columns:1fr}}

/* ---- welcome panel (contrasting navy card) ---- */
.welcome-band{display:none;max-width:1560px;margin:14px auto 0;padding:0 20px}
.welcome-band.show{display:block}
.welcome-card{background:linear-gradient(120deg,#0E2A47 0%,#153E66 62%,#1C5A38 135%);color:#EAF2FB;border:none;border-radius:12px;
  padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:0 6px 18px rgba(10,40,80,.16);position:relative}
.welcome-avatar{width:46px;height:46px;border-radius:12px;background:#fff;padding:5px;box-sizing:border-box;flex-shrink:0;display:block}
.welcome-msg{font-size:.93rem;color:#fff;flex:1;min-width:230px;line-height:1.55}
.welcome-msg strong{font-weight:700;color:#fff}
.welcome-msg .sub{display:block;font-size:.82rem;color:#BCD3EA;margin-top:2px}
.welcome-progress{flex:1;min-width:190px;max-width:300px}
.welcome-bar{height:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:100px;overflow:hidden}
.welcome-bar span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--accent-light),#7FC7F5);transition:width .5s ease}
.welcome-bar span.done{background:linear-gradient(90deg,#8CC152,var(--brand-green,#6BA82E))}
.welcome-pct{font-size:.75rem;color:#BCD3EA;margin-top:4px}
.welcome-actions{display:flex;gap:9px;flex-wrap:wrap}
.welcome-actions a,.welcome-actions button{display:inline-block;font-size:.82rem;font-weight:600;padding:9px 14px;border-radius:999px;
  text-decoration:none;cursor:pointer;border:1px solid transparent;font-family:inherit}
.welcome-open{background:#fff;color:#0E2A47}
.welcome-open:hover{background:#E3EEF9}
.welcome-plan{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.welcome-plan:hover{background:rgba(255,255,255,.24)}
.welcome-favs{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.welcome-favs:hover{background:rgba(255,255,255,.24)}
.welcome-close{position:absolute;top:8px;right:10px;background:none;border:none;color:#9FB8D2;font-size:1rem;line-height:1;cursor:pointer;padding:4px}
.welcome-close:hover{color:#fff}
@media(max-width:560px){.welcome-card{gap:10px}.welcome-progress{max-width:none}.welcome-avatar{display:none}}

/* ---- first-visit symbols popup ---- */

/* ---- mobile ergonomics (2026-07): prevent iOS input auto-zoom, enlarge tap targets ---- */
@media (max-width:768px){
  input, select, textarea{font-size:16px !important}
  .filter-clear{padding:9px 12px !important}
  .drawer-close{padding:8px 12px !important}
  .crumbs a{display:inline-block;padding:6px 2px}
}

/* Mobile sideline placement — the desktop sidebar (and its sideline unit)
   is hidden below 860px, so the same unit renders inline on phones. */
.sideline-mobile{display:none}
@media (max-width:860px){
  #sidelineMobileWrap[style*="display: none"]{display:none !important}
  .sideline-mobile{display:block;margin:10px 0 14px}
  .sideline-mobile .sideline-ad img{max-width:100%;height:auto;border-radius:8px}
}
@media (min-width:861px){ .sideline-mobile{display:none !important} }

/* ── Specialty sponsor: sized units + full-page brand takeover ─────────── */
.sp-sponsor-strip.sp-size-banner, .sp-sponsor-strip.sp-size-hero{display:block;padding:0;background:none;border:none}
.sp-unit{position:relative;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:10px;background:var(--surface);padding:16px 18px;margin:4px 0 14px}
.sp-size-hero .sp-unit{padding:26px 24px;text-align:center;border-left-width:1px;border-top:4px solid var(--accent)}
.sp-unit .tag-featured{position:absolute;top:10px;right:12px}
.sp-unit-media{display:block;margin:0 0 12px}
.sp-unit-media img{display:block;max-width:100%;height:auto;border-radius:8px;margin:0 auto}
.sp-unit-logo{max-height:40px;max-width:200px;margin-bottom:8px}
.sp-unit-head{font-weight:700;font-size:1.06rem;line-height:1.35}
.sp-size-hero .sp-unit-head{font-size:1.3rem}
.sp-unit-tag{color:var(--text2);font-size:.92rem;margin-top:6px;line-height:1.5}
.sp-unit-cta{display:inline-block;margin-top:12px;background:var(--accent);color:#fff;font-weight:600;font-size:.88rem;padding:9px 18px;border-radius:7px;text-decoration:none}
.sp-unit-cta:hover{filter:brightness(1.08);text-decoration:none}

/* Takeover: sponsor colours theme the page; every other ad is suppressed
   while their specialty is the active filter. AdSense unfilled/filled units,
   the sideline (both variants) and rotation cards (suppressed at render)
   all disappear — exclusive sponsor presence. */
/* sp-theme = sponsor colours re-theme the page (sold on its own OR as part
   of takeover); sp-takeover ADDITIONALLY suppresses all other advertising.
   The app adds both classes for a takeover, only sp-theme for theme-only. */
body.sp-theme{background:var(--spt-bg, var(--bg));color:var(--spt-text, var(--text))}
body.sp-theme .results-area, body.sp-theme .sidebar{background:transparent}
body.sp-theme .course-card{border-color:var(--spt-accent, var(--border))}
body.sp-theme .results-count, body.sp-theme .picks-heading span{color:var(--spt-text, var(--text2))}
body.sp-takeover .ad-incontent, body.sp-takeover .adsbygoogle,
body.sp-takeover ins.adsbygoogle, body.sp-takeover #sidelinePanel,
body.sp-takeover #sidelineSep, body.sp-takeover #sidelineMobileWrap{display:none !important}

/* Direct-sold presence rule: any live paid placement on the directory turns
   AdSense off entirely (units are also not injected at render). */
body.no-adsense .ad-incontent, body.no-adsense ins.adsbygoogle,
body.no-adsense .adsbygoogle{display:none !important}

/* ── First-visit mini guidance strip (2026-07-20) ───────────────
   Returning users keep the full welcome-card dashboard; first-timers
   get a single compact line so results sit higher on screen. */
.welcome-band--mini .welcome-card{padding:8px 14px;border-radius:9px;gap:10px;
  background:linear-gradient(120deg,#0E2A47,#153E66);font-size:.84rem;line-height:1.4}
.welcome-band--mini .welcome-avatar,
.welcome-band--mini .welcome-progress,
.welcome-band--mini .welcome-actions .welcome-open,
.welcome-band--mini .welcome-actions .welcome-plan,
.welcome-band--mini .welcome-actions .welcome-favs{display:none}
.welcome-band--mini .welcome-msg .sub{display:none}
.welcome-band--mini{margin-top:8px}
@media(max-width:560px){
  /* pull the first course up: tighter hero + strip on phones */
  .h1-band{padding:16px 14px 14px}
  .h1-band h1{font-size:1.35rem}
  .h1-band .hero-sub{margin-top:5px;font-size:.85rem}
  .hero-trust{margin-top:10px;gap:6px 10px}
  .hero-stat{font-size:.76rem}
  .hero-curator{font-size:.78rem}
  .hero-curator img{width:26px;height:26px}
  .welcome-band--mini .welcome-card{padding:7px 11px;font-size:.8rem}
}

/* ── Zero-result search recovery panel (2026-07-21) ───────────── */
.sr-panel{text-align:left;max-width:640px;margin:28px auto;padding:22px 24px;
  background:#faf8f4;border:1px solid #e2ddd2;border-radius:12px}
.sr-panel h3{margin:0 0 6px;color:#142B3A}
.sr-dym{margin:10px 0 4px;font-size:1.02rem}
.sr-dym-link{background:none;border:none;padding:0;cursor:pointer;color:#0E5A8A;font:inherit}
.sr-dym-link strong{text-decoration:underline;text-underline-offset:3px}
.sr-section{margin-top:14px}
.sr-label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#6e675a;margin-bottom:7px}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px}
.sr-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  background:#fff;border:1px solid #d5cfc2;border-radius:999px;font-size:.86rem;
  color:#2a2620;cursor:pointer;text-decoration:none;transition:border-color .12s}
.sr-chip:hover{border-color:#142B3A}
.sr-count{font-size:.74rem;font-weight:700;color:#0E5A8A;background:#eaf2f8;
  border-radius:999px;padding:1px 7px}
.sr-broad{background:#142B3A;color:#fff;border-color:#142B3A}
.sr-broad:hover{background:#1d3c52}
.sr-broad .sr-count{background:rgba(255,255,255,.16);color:#fff}
.sr-guide{border-style:dashed}
@media(max-width:560px){.sr-panel{padding:16px;margin:16px auto}}

/* ══════════ COURSE DETAIL MODAL (expanded card) ══════════ */
.cmodal-overlay[hidden] { display: none; }   /* author display:flex would otherwise beat the UA [hidden] rule */
.cmodal-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(20, 43, 58, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto;
  backdrop-filter: blur(2px);
}
.cmodal {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(10, 25, 40, .28);
  width: 100%; max-width: 640px; margin: auto 0;
  animation: cmodal-in .18s ease-out;
}
@keyframes cmodal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.cmodal-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 1.2rem; line-height: 1; color: var(--text2); cursor: pointer;
}
.cmodal-close:hover { color: var(--text); border-color: var(--text3); }
.cmodal-body { padding: 22px 24px 24px; }
.cmodal-title { font-family: 'Sora', sans-serif; font-size: 1.15rem; line-height: 1.35; color: var(--text); margin: 0 34px 6px 0; }
.cmodal-provider { color: var(--text2); font-size: .85rem; font-weight: 600; margin-bottom: 8px; }
.cmodal-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: var(--text3); margin-bottom: 12px; }
.cmodal-picknote {
  background: var(--accent-lt); border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 10px 12px; font-size: .85rem; line-height: 1.5;
  color: var(--text); margin-bottom: 12px;
}
.cmodal-desc { font-size: .88rem; line-height: 1.6; color: var(--text2); margin: 0 0 16px; }
.cmodal-desc-empty { font-style: italic; color: var(--text3); }
.cmodal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cmodal-open {
  display: inline-block; background: var(--accent); color: #fff;
  font-weight: 600; font-size: .85rem; padding: 9px 16px; border-radius: 7px;
  text-decoration: none; border: none; cursor: pointer;
}
.cmodal-open:hover { background: #00417f; }
.cmodal-act {
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  font-size: .82rem; padding: 8px 12px; color: var(--text2); cursor: pointer;
}
.cmodal-act:hover { border-color: var(--accent); color: var(--accent); }
.cmodal-act.on { color: #B03838; border-color: #B03838; }
.cmodal-fb { border-top: 1px dashed var(--border); padding-top: 14px; }
.cmodal-vote { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.cm-votelabel { font-size: .85rem; font-weight: 600; color: var(--text); margin-right: 4px; }
.cm-vote {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  font-size: .85rem; padding: 6px 14px; cursor: pointer; color: var(--text2);
}
.cm-vote.on { background: var(--accent-lt); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cm-revhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cm-revhead h3 { font-size: .95rem; margin: 0; color: var(--text); }
.cm-revavg { font-size: .82rem; color: var(--text2); display: inline-flex; align-items: center; gap: 4px; }
.cm-writebtn {
  margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 7px;
  font-size: .8rem; padding: 6px 12px; color: var(--accent); cursor: pointer; font-weight: 600;
}
.cm-writebtn:hover { border-color: var(--accent); }
.cm-star { color: #D4D9E3; font-size: .95rem; }
.cm-star.on { color: #E8A517; }
.cm-star.half { color: #E8A517; opacity: .55; }
.cm-revform { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 14px; background: var(--bg); }
.cm-starpick { display: flex; gap: 2px; margin-bottom: 8px; }
.cm-pick { background: none; border: none; font-size: 1.5rem; color: #D4D9E3; cursor: pointer; padding: 0 2px; }
.cm-pick.on { color: #E8A517; }
.cm-revname, .cm-revtext {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: .85rem; padding: 8px 10px; margin-bottom: 8px; background: var(--surface);
}
.cm-revtext { resize: vertical; }
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cm-revrow { display: flex; align-items: center; gap: 10px; }
.cm-revsubmit { padding: 8px 14px; }
.cm-revstatus { font-size: .8rem; color: var(--text2); }
.cm-rev { border-top: 1px solid var(--border); padding: 10px 0; }
.cm-rev:first-child { border-top: none; }
.cm-revtop { display: flex; align-items: center; gap: 8px; font-size: .8rem; margin-bottom: 4px; }
.cm-revtop b { color: var(--text); }
.cm-revtop span { color: var(--text3); }
.cm-rev p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--text2); }
.cm-revnone, .cm-revloading { font-size: .83rem; color: var(--text3); font-style: italic; }
.fb-chip { color: var(--text3); }
@media (max-width: 560px) {
  .cmodal-overlay { padding: 0; align-items: stretch; }
  .cmodal { max-width: none; border-radius: 0; border: none; min-height: 100%; }
  .cm-writebtn { margin-left: 0; }
}


/* AGD PACE subject-code chip on course cards (2026-07-27) */
.agd-chip{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---- welcome band nudges: prose lines on desktop, tappable chips on
   mobile (2026-07-28). Markup: .wnudge > .wnudge-main + .wnudge-why +
   .wnudge-more, built in initWelcome. ---- */
.welcome-msg .wnudge{display:block;margin-top:3px}
.welcome-msg .wnudge a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:2px}
.welcome-msg .wnudge a:hover{text-decoration-color:#fff}
.welcome-msg .wnudge-more{font-size:.78rem;color:#BCD3EA;white-space:nowrap}
@media (max-width:640px){
  .welcome-msg .wnudge{display:inline-flex;align-items:center;gap:8px;max-width:100%;
    background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);border-radius:999px;
    padding:7px 13px;margin:5px 6px 0 0}
  .welcome-msg .wnudge a{text-decoration:none}
  .welcome-msg .wnudge-main{display:inline-block;max-width:62vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
  .welcome-msg .wnudge-why{display:none}   /* reason is desktop detail */
  .welcome-msg .wnudge-more{font-size:.74rem}
  .welcome-msg .wnudge-hrs{display:none}
}