/* ── Reset ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f8fafc;--sf:#fff;--tx:#0f172a;--tm:#64748b;--bd:#e2e8f0;--ac:#1d4ed8;--al:#eff6ff;--ah:#1e40af;--abr:#bfdbfe;--pos:#059669;--warn:#d97706;--neg:#dc2626;--hov:#f1f5f9;--r:8px;--f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
html{font-size:16px}
body{font-family:var(--f);background:var(--bg);color:var(--tx);line-height:1.5;min-height:100vh;display:flex;flex-direction:column}

/* ── Top nav ─────────────────────────────────────────── */
.top-nav{max-width:1180px;width:100%;margin:0 auto;padding:1rem 1rem 0;display:flex;gap:0;border-bottom:2px solid var(--bd);align-items:center}
.tn{padding:.6rem 1.25rem;font-size:.9rem;font-weight:600;text-decoration:none;color:var(--tm);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.tn:hover{color:var(--tx)}
.tn.active{color:var(--ac);border-bottom-color:var(--ac)}
.nav-group{display:flex;align-items:center;gap:0}
.nav-label{font-size:.85rem;padding:0 .3rem 0 .25rem;opacity:.7}
.nav-divider{color:var(--bd);font-size:1rem;padding:0 .35rem;margin-bottom:-2px;user-select:none}

/* ── Sub nav ─────────────────────────────────────────── */
.sub-nav{max-width:1180px;width:100%;margin:0 auto;padding:0 1rem;display:flex;gap:0;border-bottom:1px solid var(--bd)}
.sn{padding:.5rem 1rem;font-size:.85rem;font-weight:500;text-decoration:none;color:var(--tm);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s}
.sn:hover{color:var(--tx)}
.sn.active{color:var(--ac);border-bottom-color:var(--ac)}

/* ── Banner ──────────────────────────────────────────── */
.banner{max-width:1180px;width:100%;margin:0 auto;padding:.5rem 1rem;font-size:.78rem;color:var(--tm);background:#fffbeb;border-left:3px solid #f59e0b}
.banner a{color:var(--ac);text-decoration:none}
.banner a:hover{text-decoration:underline}

/* ── Header ──────────────────────────────────────────── */
header{max-width:1180px;width:100%;margin:0 auto;padding:1.5rem 1rem 1rem}
h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.sub{color:var(--tm);font-size:.875rem;margin-top:.25rem}
.sub a{color:var(--ac);text-decoration:none}
.sub a:hover{text-decoration:underline}
.sw{margin-top:1.25rem}
#search{width:100%;padding:.65rem 1rem;font-size:.95rem;font-family:var(--f);border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);outline:none;transition:border-color .15s}
#search:focus{border-color:var(--ac);box-shadow:0 0 0 2px var(--al)}
.filters{display:flex;align-items:center;gap:.75rem;margin-top:.75rem;flex-wrap:wrap}
select{padding:.4rem .6rem;font-size:.85rem;font-family:var(--f);border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);cursor:pointer;max-width:320px}
.stats{font-size:.8rem;color:var(--tm)}

/* ── Active filter chips ─────────────────────────────── */
#active-filters{display:none;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:.5rem;padding:.35rem 0}
.filter-chip{display:inline-flex;align-items:center;gap:.3rem;background:#e0e7ff;color:#3730a3;font-size:.78rem;font-weight:500;padding:.2rem .55rem;border-radius:12px;white-space:nowrap}
.chip-x{background:none;border:none;cursor:pointer;font-size:.95rem;line-height:1;color:#6366f1;padding:0 0 0 .15rem;font-weight:700}
.chip-x:hover{color:#dc2626}
.clear-all-btn{background:none;border:1px solid #c7d2fe;border-radius:12px;cursor:pointer;font-size:.75rem;color:#6366f1;padding:.2rem .6rem;font-weight:600;transition:all .15s}
.clear-all-btn:hover{background:#6366f1;color:#fff;border-color:#6366f1}
.filter-link:hover{text-decoration:underline}




/* ── Table ────────────────────────────────────────────── */
main{max-width:1180px;width:100%;margin:0 auto;padding:0 1rem 2rem;flex:1}
table{width:100%;border-collapse:collapse;font-size:.9rem;table-layout:fixed}

/* ── Column widths — school rankings (non-extracurricular only) ── */
#school-table th:nth-child(1):not([data-sort]){width:70px}  /* Rank */
#school-table th:nth-child(2):not([data-sort]){width:auto}  /* School/Institution */

/* ── Column widths — extracurricular-specific overrides ─ */
#school-table th[data-sort="rank"]{width:70px}
#school-table th[data-sort="name"]{width:auto;min-width:180px}   /* Institution */
#school-table th[data-sort="category"]{width:100px}
#school-table th[data-sort="city"]{width:105px}
#school-table th[data-sort="type"]{width:120px}
#school-table th[data-sort="rating"]{width:68px}
#school-table th[data-sort="reviews"]{width:76px}
#school-table th[data-sort="score"]{width:56px}
#school-table th:last-child{width:65px}  /* Website */
/* Prevent type & category cells from wrapping */
td.pc{white-space:nowrap}

/* ── Column widths — school ranking overrides ──────── */
#school-table th[data-sort="board"],
#school-table th[data-sort="authority"]{width:160px}
#school-table th[data-sort="overall"]{width:88px}

thead th{position:sticky;top:0;background:var(--sf);border-bottom:2px solid var(--tx);padding:.6rem .5rem;text-align:left;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tm);white-space:nowrap;user-select:none}
th.sortable{cursor:pointer}
th.sortable:hover{color:var(--ac)}
th.sortable.active{color:var(--tx)}
th.sortable.active::after{content:' ▼';font-size:.6rem}
th.sortable.active.asc::after{content:' ▲'}
th.num,td.num{text-align:right}
tbody tr{border-bottom:1px solid var(--bd);transition:background .1s}
tbody tr:hover{background:var(--hov)}
td{padding:.45rem .4rem;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
td.sn{font-weight:500;white-space:normal;word-wrap:break-word;overflow:visible}
/* Universal table link style — no underline, accent color */
td a{color:var(--ac);text-decoration:none;font-weight:500}
td a:hover{text-decoration:underline;color:var(--ah)}
.school-link{color:var(--ac);text-decoration:none;font-weight:500}
.school-link:hover{text-decoration:underline;color:var(--ah)}
.board-link{color:var(--ac);text-decoration:none;font-size:.78rem}
.board-link:hover{text-decoration:underline;color:var(--ac)}
td.bc{font-size:.78rem;color:var(--tm);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.pc{font-size:.78rem;color:var(--tm)}
td.ac{font-size:.75rem;color:var(--tm);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Score color coding ──────────────────────────────── */
td.sc{font-weight:700;font-variant-numeric:tabular-nums}
.sc-top{color:var(--pos)}
.sc-mid{color:#6366f1}
.sc-low{color:var(--warn)}
.sc-poor{color:var(--neg)}

/* ── Rank color coding ───────────────────────────────── */
.rk-top{color:var(--pos);font-weight:700}
.rk-high{color:var(--ac);font-weight:600}
.rk-mid{color:var(--warn)}
.rk-low{color:#94a3b8}
.rk-btm{color:var(--neg)}

/* ── Growth ──────────────────────────────────────────── */
.gp{color:var(--pos);font-weight:600}
.gn{color:var(--neg);font-weight:600}
.g0{color:var(--tm)}

/* ── Association badges ──────────────────────────────── */
.ab{font-size:.75rem;padding:.15rem .4rem;border-radius:3px;display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-yes{background:var(--al);color:var(--ah)}
.ab-none{color:var(--tm)}

/* ── Links ───────────────────────────────────────────── */
.wl{color:var(--ac);text-decoration:none;font-size:.78rem}
.wl:hover{text-decoration:underline}

/* ── Inline filter links (click to filter) ───────────── */
.filter-link{color:var(--tm);text-decoration:none;border-bottom:1px dotted var(--bd);cursor:pointer;transition:color .12s,border-color .12s}
.filter-link:hover{color:var(--ac);border-bottom-color:var(--ac)}

/* ── Sparkline ───────────────────────────────────────── */
.spark{vertical-align:middle}

/* ── No results / hints / loading ────────────────────── */
#no-results{text-align:center;padding:2rem;color:var(--tm);font-size:.9rem}
.hint{color:var(--tm);font-size:.8rem;font-style:italic}
.hidden{display:none}
.loading{text-align:center;padding:3rem 1rem;color:var(--tm);font-size:.9rem}
.loading::before{content:'';display:block;width:28px;height:28px;margin:0 auto .75rem;border:3px solid var(--bd);border-top-color:var(--ac);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── References ──────────────────────────────────────── */
.refs{max-width:1180px;width:100%;margin:0 auto;padding:1.5rem 1rem;border-top:1px solid var(--bd)}
.refs h2{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--tm);margin-bottom:.75rem}
.rg{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.rg a{font-size:.8rem;color:var(--ac);text-decoration:none;white-space:nowrap}
.rg a:hover{text-decoration:underline}

/* ── Footer (Dark Theme — Global) ────────────────────── */
footer{width:100%;margin:0;padding:0;border-top:none;font-size:.78rem;background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);color:#94a3b8;position:relative}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#3b82f6,#8b5cf6,#3b82f6,transparent)}
footer p{max-width:1180px;margin:0 auto;padding:1.4rem 1rem;text-align:center;line-height:1.8;letter-spacing:.01em}
footer a{color:#93c5fd;text-decoration:none;transition:color .15s,text-shadow .15s;font-weight:500}
footer a:hover{color:#e0f2fe;text-decoration:none;text-shadow:0 0 8px rgba(147,197,253,.3)}

/* ── Visual Upgrades — Readability & Appeal ──────────── */

/* Zebra-striped rows for easier scanning */
tbody tr:nth-child(even){background:#f9fafb}
tbody tr:nth-child(even):hover{background:var(--hov)}

/* Subtle warm gradient accent on page header */
header{background:linear-gradient(180deg,#f9fafb 0%,var(--bg) 100%);border-radius:0 0 var(--r) var(--r)}

/* Top-3 rank medals — gold, silver, bronze */
td.num:first-child{font-weight:700;font-variant-numeric:tabular-nums}

/* Score values as subtle colored pills — NO blue (reserved for links) */
td.sc{border-radius:4px;padding:.3rem .5rem!important}
.sc-top{background:#ecfdf5;color:#047857}
.sc-mid{background:#f3e8ff;color:#7c3aed}
.sc-low{background:#fffbeb;color:#b45309}
.sc-poor{background:#fef2f2;color:#b91c1c}

/* Enhanced score cell styling for extracurricular tables (Item 5) */
.extra-table td.sc-top { font-weight: 700; background: #d1fae5; color: #065f46; box-shadow: inset 0 0 0 1px rgba(16,185,129,0.2); }
.extra-table td.sc-mid { font-weight: 600; background: #e0e7ff; color: #3730a3; box-shadow: inset 0 0 0 1px rgba(99,102,241,0.2); }
.extra-table td.sc-low { font-weight: 600; background: #fef3c7; color: #92400e; box-shadow: inset 0 0 0 1px rgba(245,158,11,0.2); }
/* Extracurricular table — fixed layout for seamless cross-province navigation */
.extra-table { width: 100%; table-layout: fixed; }
.extra-table th, .extra-table td { padding: 0.75rem 0.5rem; vertical-align: middle; overflow: visible; }
.extra-table td.sn { line-height: 1.4; word-wrap: break-word; white-space: normal; }
.extra-table td.pc { white-space: nowrap; overflow: visible; }

/* Column widths — totals 100%, tuned for all content types */
/* 8-column layout (main extracurriculars hub page) */
.extra-table th:nth-child(1) { width: 8%; }   /* Category/City Rank */
.extra-table th:nth-child(2) { width: 8%; }   /* Province Rank */
.extra-table th:nth-child(3) { width: 23%; }  /* Institution (wraps naturally) */
.extra-table th:nth-child(4) { width: 9%; }   /* Category */
.extra-table th:nth-child(5) { width: 13%; }  /* City */
.extra-table th:nth-child(6) { width: 18%; }  /* Rating — needs room for ⭐⭐⭐⭐ Excellent */
.extra-table th:nth-child(7) { width: 10%; }  /* Score */
.extra-table th:nth-child(8) { width: 11%; }  /* Website */

/* 7-column layout (category & city browse pages) — totals 100% */
/* When a column is removed vs hub (8-col), extra space goes to Institution */
.extra-table th:first-child:nth-last-child(7),
.extra-table th:first-child:nth-last-child(7) ~ th:nth-child(1) { width: 7%; }   /* Cat/City Rank */
.extra-table th:first-child:nth-last-child(7) ~ th:nth-child(2) { width: 7%; }   /* Prov. Rank */
.extra-table th:first-child:nth-last-child(7) ~ th:nth-child(3) { width: 30%; }  /* Institution (wider) */
.extra-table th:first-child:nth-last-child(7) ~ th:nth-child(4) { width: 12%; }  /* City or Category */
.extra-table th:first-child:nth-last-child(7) ~ th:nth-child(5) { width: 18%; }  /* Rating */
.extra-table th:first-child:nth-last-child(7) ~ th:nth-child(6) { width: 10%; }  /* Score */
.extra-table th:first-child:nth-last-child(7) ~ th:nth-child(7) { width: 16%; }  /* Website */

/* 6-column layout (matrix browse pages: city × category) — totals 100% */
.extra-table th:first-child:nth-last-child(6),
.extra-table th:first-child:nth-last-child(6) ~ th:nth-child(1) { width: 7%; }   /* City Rank */
.extra-table th:first-child:nth-last-child(6) ~ th:nth-child(2) { width: 7%; }   /* Prov. Rank */
.extra-table th:first-child:nth-last-child(6) ~ th:nth-child(3) { width: 36%; }  /* Institution (widest) */
.extra-table th:first-child:nth-last-child(6) ~ th:nth-child(4) { width: 18%; }  /* Rating */
.extra-table th:first-child:nth-last-child(6) ~ th:nth-child(5) { width: 12%; }  /* Score */
.extra-table th:first-child:nth-last-child(6) ~ th:nth-child(6) { width: 20%; }  /* Website */

/* Keep numeric cells together, but let headers wrap lines */
.extra-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.extra-table th.num { white-space: normal; line-height: 1.2; }

/* Default: left-align all text columns */
.extra-table th, .extra-table td { text-align: left; }

/* Center only numeric columns: Ranks (1 & 2), Score */
.extra-table th:nth-child(1), .extra-table td:nth-child(1),
.extra-table th:nth-child(2), .extra-table td:nth-child(2) { text-align: center; }
.extra-table td.sc { text-align: center; border-radius: 6px; }
.extra-table th.num { text-align: center; }

/* Website — center */
.extra-table td:last-child, .extra-table th:last-child { white-space: nowrap; text-align: center; }

/* Improved search box */
#search{border:1.5px solid var(--bd);box-shadow:0 1px 3px rgba(0,0,0,.04)}

/* Filter dropdowns subtle upgrade */
select{border:1.5px solid var(--bd);box-shadow:0 1px 2px rgba(0,0,0,.03);transition:border-color .15s}
select:focus{border-color:var(--ac);box-shadow:0 0 0 2px var(--al);outline:none}

/* Stats badge — neutral slate, not blue */
.stats{background:#f1f5f9;color:#475569;padding:.25rem .65rem;border-radius:99px;font-weight:600;font-size:.78rem}

/* Heading — solid dark color, no gradient (blue reserved for links only) */
h1{color:#0f172a}

/* Expand button upgrade — neutral, not blue */
.expand-btn,.show-more-btn{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1.5px solid var(--bd);font-weight:600;transition:all .2s}
.expand-btn:hover,.show-more-btn:hover{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.08)}

/* ── Methodology ─────────────────────────────────────── */
.methodology{padding-top:1rem}
.methodology section{margin-bottom:2rem}
.methodology h2{font-size:1.1rem;margin-bottom:.75rem}
.methodology p{font-size:.875rem;color:var(--tx);margin:.5rem 0;line-height:1.6}
.methodology ul{font-size:.875rem;padding-left:1.25rem;line-height:1.8}
.meth-table{width:100%;border-collapse:collapse;font-size:.82rem;margin:.75rem 0}
.meth-table th{background:var(--hov);font-weight:600;text-align:left;padding:.5rem .6rem;border-bottom:2px solid var(--bd)}
.meth-table td{padding:.5rem .6rem;border-bottom:1px solid var(--bd);vertical-align:top}
.meth-table a{color:var(--ac);text-decoration:none}
.meth-table a:hover{text-decoration:underline}
.formula-box{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:var(--r);padding:.75rem 1rem;font-size:1rem;font-weight:600;text-align:center;margin:.5rem 0}

/* ── School Detail Pages ─────────────────────────────── */
.breadcrumb{max-width:1180px;width:100%;margin:0 auto;padding:.6rem 1rem;font-size:.78rem;color:var(--tm)}
.breadcrumb a{color:var(--ac);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:var(--tx);font-weight:500}

.school-header{max-width:1180px;width:100%;margin:0 auto;padding:1rem 1rem .5rem}
.school-header h1{font-size:1.5rem}

.school-detail{max-width:1180px;width:100%;margin:0 auto;padding:0 1rem 2rem}

.school-section{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--bd)}
.school-section:last-child{border-bottom:none}
.school-section h2{font-size:1.1rem;font-weight:700;margin-bottom:1rem;color:var(--tx)}
.school-section h3{font-size:.92rem;font-weight:600;margin:1.25rem 0 .5rem;color:var(--tx)}

/* Item 9: Global FAQ Background Panel */
.school-section:has(.faq-item) {
  background: var(--sf);
  padding: 1.5rem;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  border-bottom: 1px solid var(--bd); /* override nullification */
  margin-top: 2rem;
}
.school-section:has(.faq-item) h2 { margin-top: 0; }

.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-bottom:1rem}
.stat-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:1rem;text-align:center;transition:box-shadow .2s,transform .2s,border-color .2s;cursor:default}
.stat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-3px);border-color:rgba(99,102,241,.25)}
.stat-card .stat-value{display:block;font-size:1.5rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.stat-card .stat-label{display:block;font-size:.72rem;color:var(--tm);margin-top:.25rem;text-transform:uppercase;letter-spacing:.03em}
.stat-card.highlight{border-color:var(--ac);background:var(--al)}
/* Score badges — colored border-left + tinted bg */
.stat-card.sc-top{border-left:4px solid var(--pos);background:linear-gradient(135deg,rgba(34,197,94,.06),var(--sf))}
.stat-card.sc-top .stat-value{color:var(--pos)}
.stat-card.sc-mid{border-left:4px solid #6366f1;background:linear-gradient(135deg,rgba(99,102,241,.06),var(--sf))}
.stat-card.sc-mid .stat-value{color:#6366f1}
.stat-card.sc-low{border-left:4px solid var(--warn);background:linear-gradient(135deg,rgba(245,158,11,.06),var(--sf))}
.stat-card.sc-low .stat-value{color:var(--warn)}
.stat-card.sc-poor{border-left:4px solid var(--neg);background:linear-gradient(135deg,rgba(239,68,68,.06),var(--sf))}
.stat-card.sc-poor .stat-value{color:var(--neg)}
/* Rank percentile badges */
.stat-card.rk-top{border-left:4px solid #10b981;background:linear-gradient(135deg,rgba(16,185,129,.06),var(--sf))}
.stat-card.rk-top .stat-value{color:#10b981}
.stat-card.rk-high{border-left:4px solid #3b82f6;background:linear-gradient(135deg,rgba(59,130,246,.06),var(--sf))}
.stat-card.rk-high .stat-value{color:#3b82f6}
.stat-card.rk-mid{border-left:4px solid #8b5cf6;background:linear-gradient(135deg,rgba(139,92,246,.06),var(--sf))}
.stat-card.rk-mid .stat-value{color:#8b5cf6}
.stat-card.rk-low{border-left:4px solid #f59e0b;background:linear-gradient(135deg,rgba(245,158,11,.06),var(--sf))}
.stat-card.rk-low .stat-value{color:#f59e0b}
.stat-card.rk-btm{border-left:4px solid #ef4444;background:linear-gradient(135deg,rgba(239,68,68,.06),var(--sf))}
.stat-card.rk-btm .stat-value{color:#ef4444}

.detail-table{width:100%;border-collapse:collapse;font-size:.84rem;margin:.5rem 0}
.detail-table th{background:var(--hov);font-weight:600;text-align:left;padding:.45rem .5rem;border-bottom:2px solid var(--bd);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--tm)}
.detail-table td{padding:.45rem .5rem;border-bottom:1px solid var(--bd)}
.detail-table th.num,.detail-table td.num{text-align:right}
.detail-table tbody tr:hover{background:var(--hov)}

.salary-summary{margin-top:.5rem}
.school-budget-estimate{margin-top:1rem}

.contact-list{list-style:none;padding:0;font-size:.88rem;line-height:2}
.contact-list li{padding:.15rem 0}
.contact-list a{color:var(--ac);text-decoration:none}
.contact-list a:hover{text-decoration:underline}

.related-links{list-style:none;padding:0;font-size:.88rem;line-height:2}
.related-links a{color:var(--ac);text-decoration:none}
.related-links a:hover{text-decoration:underline}

/* Quick Nav Action Bar */
.nav-action-bar { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 auto; max-width:960px; padding:.8rem 1rem; }
.nav-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.4rem .8rem; background:#f1f5f9; border:1px solid #cbd5e1; border-radius:20px; font-size:.82rem; color:#334155; text-decoration:none; transition:all .15s; }
.nav-pill:hover { background:#e2e8f0; border-color:#94a3b8; transform:translateY(-1px); }
.nav-pill.primary { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
.nav-pill.primary:hover { background:#dbeafe; border-color:#93c5fd; }
.nav-pill .x-icon { font-size:.7rem; opacity:.6; margin-left:.2rem; }


.data-note{font-size:.75rem;color:var(--tm);margin-top:.75rem;font-style:italic}
.data-note a{color:var(--ac);text-decoration:none}
.data-note a:hover{text-decoration:underline}

/* ── Extracurricular: Program Pills ──────────────────── */
.program-pills{display:flex;flex-wrap:wrap;gap:.4rem}
.program-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .7rem;border-radius:20px;font-size:.82rem;font-weight:500;border:1px solid transparent;transition:transform .12s,box-shadow .12s}
.program-pill:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.08)}

/* ── Extracurricular: Contact Cards ──────────────────── */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem}
.contact-card{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);transition:box-shadow .15s,border-color .15s}
.contact-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06);border-color:var(--ac)}
.contact-card .cc-icon{font-size:1.3rem;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--al);border-radius:6px}
.contact-card .cc-body{flex:1;min-width:0}
.contact-card .cc-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tm);font-weight:600}
.contact-card .cc-value{font-size:.85rem;font-weight:500;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-card .cc-value a{color:var(--ac);text-decoration:none}
.contact-card .cc-value a:hover{text-decoration:underline}
.contact-card.cc-cta{border-color:var(--ac);background:linear-gradient(135deg,var(--al),var(--sf))}
.contact-card.cc-cta .cc-icon{background:var(--ac);color:#fff}

/* ── Extracurricular: Similar Nearby ─────────────────── */
.similar-nearby{margin-top:1rem}
.similar-nearby h3{font-size:.88rem;font-weight:600;color:var(--tm);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.03em}
.similar-nearby table{width:100%;border-collapse:collapse;font-size:.82rem}
.similar-nearby th{background:var(--hov);font-weight:600;text-align:left;padding:.4rem .5rem;border-bottom:2px solid var(--bd);font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--tm)}
.similar-nearby td{padding:.4rem .5rem;border-bottom:1px solid var(--bd);vertical-align:middle}
.similar-nearby td a{color:var(--ac);text-decoration:none;font-weight:500}
.similar-nearby td a:hover{text-decoration:underline}
.similar-nearby tbody tr:hover{background:var(--hov)}

/* ── Extracurricular: Detail Info Cards (#6) ─────────── */
.detail-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem}
.detail-info-card{display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);transition:background .1s}
.detail-info-card:hover{background:var(--hov)}
.detail-info-card .dic-icon{font-size:1.1rem;min-width:28px;text-align:center}
.detail-info-card .dic-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tm);font-weight:600;line-height:1}
.detail-info-card .dic-value{font-size:.88rem;font-weight:500;color:var(--tx);margin-top:.1rem}

/* ── Extracurricular: Type Badge Pills (#7) ──────────── */
.type-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .5rem;border-radius:12px;font-size:.75rem;font-weight:500;white-space:nowrap}
.type-badge-independent{background:#fef9c3;color:#854d0e;border:1px solid #fde68a}
.type-badge-franchise{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}
.type-badge-municipal{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}
.type-badge-online{background:#f3e8ff;color:#6d28d9;border:1px solid #ddd6fe}

/* ── Extracurricular: Cross-Link Pills (#8) ──────────── */
.xlink-grid{display:flex;flex-wrap:wrap;gap:.35rem}
.xlink-pill{display:inline-flex;align-items:center;gap:.25rem;padding:.35rem .65rem;border-radius:6px;font-size:.82rem;font-weight:500;text-decoration:none;transition:transform .1s,box-shadow .1s}
.xlink-pill:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.xlink-pill-cat{background:#f0f4ff;color:#1e40af;border:1px solid #c7d2fe}
.xlink-pill-city{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.xlink-pill .xlink-count{font-size:.7rem;background:rgba(0,0,0,.06);padding:.1rem .35rem;border-radius:8px;font-weight:600}

/* ── Extracurricular: Search Filter Animation (#12) ──── */
.table-search.search-active{border-color:var(--ac);box-shadow:0 0 0 3px rgba(37,99,235,.12);background:linear-gradient(135deg,#f8faff,#fff)}
.browse-stats{font-size:.82rem;color:#666;margin:0 0 .5rem;transition:opacity .15s}
.browse-stats.stats-flash{animation:statsFlash .35s ease}
@keyframes statsFlash{0%{opacity:.4;transform:translateY(-2px)}100%{opacity:1;transform:translateY(0)}}
.search-no-results{color:#dc2626;font-weight:600}
#school-table tbody tr{transition:opacity .12s}

.faq-item{margin-bottom:.5rem;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.faq-item summary{padding:.65rem .85rem;font-size:.88rem;font-weight:600;cursor:pointer;background:var(--sf);transition:background .1s}
.faq-item summary:hover{background:var(--hov)}
.faq-item p{padding:.5rem .85rem .75rem;font-size:.85rem;color:var(--tx);line-height:1.6}

.pct-bars{margin:.5rem 0}
.pct-bar-row{display:flex;align-items:center;gap:.5rem;margin:.35rem 0}
.pct-label{font-size:.78rem;min-width:180px;color:var(--tx);font-weight:500}
.pct-bar{flex:1;height:20px;background:var(--hov);border-radius:10px;overflow:hidden}
.pct-fill{height:100%;border-radius:10px;transition:width .3s}
.pct-value{font-size:.78rem;font-weight:600;min-width:40px;text-align:right;font-variant-numeric:tabular-nums}

.board-note{font-size:.82rem;color:var(--tm);margin-bottom:.75rem;padding:.5rem .75rem;background:#f8fafc;border-left:3px solid var(--ac);border-radius:0 var(--r) var(--r) 0}

.table-search{width:100%;padding:.5rem .75rem;border:1px solid #ddd;border-radius:var(--r);font-size:.85rem;font-family:inherit;margin-bottom:.35rem;box-sizing:border-box}
.table-search:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.search-count{font-size:.78rem;color:var(--tm);margin:0 0 .5rem}
.expand-btn{display:block;width:100%;padding:.6rem;margin-top:.5rem;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);color:var(--ac);font-weight:600;font-size:.82rem;cursor:pointer;text-align:center;font-family:inherit}
.expand-btn:hover{background:var(--al);border-color:var(--ac)}
.show-more-btn{display:block;width:100%;padding:.75rem;margin-top:.75rem;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);color:var(--ac);font-weight:600;font-size:.85rem;cursor:pointer;text-align:center;font-family:inherit;transition:background .15s,border-color .15s}
.show-more-btn:hover{background:var(--al);border-color:var(--ac)}

/* ── Browse grid ─────────────────────────────────────── */
.browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;max-width:1180px;margin:0 auto;padding:1rem}
.browse-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:1.25rem;transition:box-shadow .15s,border-color .15s}
.browse-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:var(--ac)}
.browse-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.browse-card-header h3{font-size:1rem;font-weight:600;color:var(--tx);margin:0}
.browse-card-badge{background:var(--al);color:var(--ac);font-size:.75rem;font-weight:600;padding:.2rem .6rem;border-radius:99px}
.browse-card-body{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;font-size:.82rem;color:var(--tm)}
.browse-card-score{font-size:.82rem}
.browse-card-detail{font-size:.82rem}
.browse-card-actions{display:flex;gap:.5rem}
.browse-card-link{font-size:.78rem;font-weight:600;color:var(--ac);text-decoration:none;padding:.3rem .6rem;border:1px solid var(--bd);border-radius:var(--r);transition:background .12s}
.browse-card-link:hover{background:var(--al)}

/* ── Detail table scroll wrapper ─────────────────────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.5rem;padding:0 .5rem}
.table-scroll .detail-table{min-width:480px}

/* ── Province switcher (injected by site-nav.js) ─────── */
.prov-switcher{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.prov-switcher::-webkit-scrollbar{display:none}

/* ── Toggle bar ──────────────────────────────────────── */
.toggle-bar a{transition:background .12s,color .12s}
.toggle-bar a:hover{background:var(--al,#eff6ff)!important}

/* ── Responsive — Tablet ─────────────────────────────── */
@media(max-width:1024px){
  main{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:800px;table-layout:auto}
  .detail-table{min-width:0;table-layout:auto}
}

/* ── Responsive — Mobile ─────────────────────────────── */
@media(max-width:768px){
  html{font-size:15px}
  h1{font-size:1.4rem}

  /* Province switcher → compact wrapping pills */
  .prov-switcher{
    padding:.35rem .6rem!important;gap:.2rem .3rem!important;font-size:.7rem!important;
    flex-wrap:wrap!important;overflow:visible!important;
    max-height:none!important;justify-content:center!important
  }
  .prov-switcher a{padding:.2rem .4rem!important;font-size:.7rem!important;border-radius:4px!important}
  .prov-toggle{display:none!important}

  /* Sub-nav: 3×2 wrapping grid — all tabs visible */
  .sub-nav{
    display:grid!important;grid-template-columns:repeat(3,1fr);
    gap:.3rem;padding:.4rem .5rem;border-bottom:none
  }
  .sn{
    text-align:center;padding:.45rem .3rem;font-size:.75rem;
    border-radius:6px;border-bottom:none!important;margin-bottom:0!important;
    background:var(--hov,#f1f5f9);white-space:nowrap
  }
  .sn.active{background:var(--ac,#3b82f6)!important;color:#fff!important;font-weight:600}
  .sn:hover{background:var(--bd,#e2e8f0)}

  /* Header */
  header{padding:1rem .75rem .75rem}
  .filters{gap:.5rem;flex-direction:column;align-items:stretch}
  select{max-width:none;width:100%;font-size:.85rem;padding:.55rem .6rem;border-radius:var(--r)}
  #search{font-size:.9rem;padding:.65rem .75rem}
  .banner{font-size:.72rem;padding:.4rem .75rem}

  /* ── TABLE → CARD LAYOUT ───────────────────────────── */
  table{min-width:0!important;width:100%}
  thead{display:none}
  tbody{display:flex;flex-direction:column;gap:.6rem}
  tbody tr{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    border:1px solid var(--bd);border-radius:var(--r);
    padding:.6rem .75rem;background:var(--sf,#fff);
    box-shadow:0 1px 3px rgba(0,0,0,.04)
  }
  tbody tr:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
  td{
    display:flex;flex-direction:column;padding:.3rem .15rem!important;
    text-align:left!important;border:none!important;
    font-size:.82rem;white-space:normal!important;overflow:visible!important;
    max-width:none!important;text-overflow:unset!important
  }
  td::before{
    content:attr(data-label);display:block;
    font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
    color:var(--tm,#64748b);margin-bottom:.1rem;line-height:1
  }
  td.sn{grid-column:1/-1;padding-bottom:.35rem!important;border-bottom:1px solid var(--bd)!important;margin-bottom:.15rem}
  td.sn a{font-size:.92rem}
  td.sc{font-size:.9rem}
  td.num{text-align:left!important}
  td.bc{max-width:none!important;overflow:visible!important}
  td.bc a,td a.board-link{font-size:.8rem}

  /* References & footer */
  .refs{padding:1rem .75rem}
  .rg{flex-direction:column;gap:.35rem}
  footer{padding:1rem .75rem;text-align:center}

  /* Methodology */
  .methodology{padding:1rem .5rem 0}
  .meth-table{font-size:.75rem}
  .formula-box{font-size:.85rem;padding:.5rem .75rem}

  /* School detail pages */
  .breadcrumb{padding:.4rem .75rem;font-size:.72rem}
  .school-header{padding:.75rem .75rem .25rem}
  .school-header h1{font-size:1.2rem;line-height:1.3}
  .school-header .sub{font-size:.78rem;line-height:1.4}
  .school-detail{padding:0 .75rem 1.5rem}
  .school-section{margin-bottom:1.25rem;padding-bottom:1rem}
  .school-section h2{font-size:.95rem;margin-bottom:.65rem}
  .school-section h3{font-size:.82rem;margin:.75rem 0 .35rem}

  /* Stat cards: 2 columns */
  .stat-cards{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .stat-card{padding:.65rem .5rem}
  .stat-card .stat-value{font-size:1.15rem}
  .stat-card .stat-label{font-size:.65rem;letter-spacing:.02em}

  /* Detail tables inside school pages: keep small tables as horizontal-scroll */
  .school-section table:not(.mobile-cards) thead{display:table-header-group}
  .school-section table:not(.mobile-cards) tbody{display:table-row-group}
  .school-section table:not(.mobile-cards) tbody tr{display:table-row;grid-template-columns:unset;border:none;padding:0;box-shadow:none}
  .school-section table:not(.mobile-cards) td{display:table-cell;padding:.35rem .35rem!important}
  .school-section table:not(.mobile-cards) td::before{display:none}
  .detail-table:not(.mobile-cards){font-size:.78rem;min-width:420px}
  .detail-table:not(.mobile-cards) th,.detail-table:not(.mobile-cards) td{padding:.35rem .35rem}
  .school-section{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Large listing tables in board/school pages: card layout */
  .school-section table.mobile-cards thead{display:none}
  .school-section table.mobile-cards tbody{display:flex;flex-direction:column;gap:.6rem}
  .school-section table.mobile-cards tbody tr{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    border:1px solid var(--bd);border-radius:var(--r);
    padding:.6rem .75rem;background:var(--sf,#fff);
    box-shadow:0 1px 3px rgba(0,0,0,.04)
  }
  .school-section table.mobile-cards td{
    display:flex;flex-direction:column;padding:.3rem .15rem!important;
    text-align:left!important;border:none!important;
    font-size:.82rem;white-space:normal!important;overflow:visible!important;
    max-width:none!important;text-overflow:unset!important
  }
  .school-section table.mobile-cards td::before{
    content:attr(data-label);display:block;
    font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
    color:var(--tm,#64748b);margin-bottom:.1rem;line-height:1
  }
  .school-section table.mobile-cards td.sn{grid-column:1/-1;padding-bottom:.35rem!important;border-bottom:1px solid var(--bd)!important;margin-bottom:.15rem}

  /* Progress bars */
  .pct-bar-row{gap:.35rem}
  .pct-label{min-width:100px;font-size:.72rem}
  .pct-bar{height:16px}
  .pct-value{font-size:.72rem;min-width:35px}

  /* Contact, links, notes */
  .salary-summary{font-size:.82rem}
  .board-note{font-size:.75rem;padding:.4rem .6rem}
  .contact-list{font-size:.82rem;line-height:1.8}
  .related-links{font-size:.82rem;line-height:1.8}
  .data-note{font-size:.7rem}

  /* Buttons */
  .show-more-btn{font-size:.8rem;padding:.65rem}
  .expand-btn{font-size:.78rem;padding:.5rem}

  /* FAQ items */
  .faq-item summary{padding:.5rem .65rem;font-size:.82rem}
  .faq-item p{padding:.4rem .65rem .6rem;font-size:.78rem}

  .table-search{font-size:.8rem;padding:.45rem .6rem}
  .search-count{font-size:.72rem}

  /* Browse grid */
  .browse-grid{grid-template-columns:1fr;padding:.75rem}
  .browse-card{padding:1rem}
}

/* ── Small phones ────────────────────────────────────── */
@media(max-width:420px){
  html{font-size:14px}
  h1{font-size:1.15rem}
  .prov-switcher{font-size:.62rem!important;gap:.15rem .2rem!important}
  .prov-switcher a{padding:.15rem .3rem!important;font-size:.62rem!important}
  .sn{padding:.35rem .5rem;font-size:.72rem}
  tbody tr{grid-template-columns:1fr}
  .stat-cards{grid-template-columns:1fr}
  .stat-card .stat-value{font-size:1rem}
  .toggle-bar{font-size:.75rem!important}
}

/* Province toggle button: hidden on desktop */
.prov-toggle{display:none}

/* ── Daycare / Institution image ─────────────────────── */
.daycare-image{max-width:1180px;width:100%;margin:0 auto;padding:0 1rem 1rem}
.daycare-image img{width:100%;height:auto;max-height:320px;object-fit:cover;border-radius:var(--r);box-shadow:0 2px 12px rgba(0,0,0,.1)}