/* ── Sidebar Layout & Width ──────────────────────────────────── */
#observablehq-sidebar {
  max-width: 260px;
  width: 260px;
  background-color: #f8fafc; /* Professional blue-gray sidebar background */
  border-right: none;
  box-sizing: border-box;
  padding-left: 0.5rem;
  margin-left: 0.75rem;
}

/* Add rail only to content sections below header, not to header itself */
#observablehq-sidebar section {
  border-right: 1px solid #e2e8f0;
}

/* Sidebar Header / Title */
#observablehq-sidebar header {
  padding: 1.5rem 1rem 1rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  border-right: none !important;
  margin-bottom: 1rem;
}

#observablehq-sidebar header a {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a202c !important;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  word-wrap: normal;
  white-space: nowrap;
}

#observablehq-sidebar header a::after {
  content: "\2190"; /* Back arrow ← */
  font-weight: 400;
  color: #64748b;
  font-size: 1.2rem;
}

/* Reduce whitespace: remove left padding from main content area */
#observablehq-main {
  padding-left: 2rem !important;
}

@media (max-width: 640px) {
  #observablehq-main {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem;
  }
}

#observablehq {
  gap: 0 !important;
}

@media (max-width: 800px) {
  #observablehq-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 2000;
    background-color: white !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
    visibility: hidden;
    margin-left: 0 !important;
    display: block !important;
  }

  html.sidebar-open #observablehq-sidebar {
    transform: translateX(0);
    visibility: visible;
  }

  /* Backdrop overlay */
  html.sidebar-open::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4); /* Slate-900 with transparency */
    backdrop-filter: blur(2px);
    z-index: 1999;
  }
  
  /* Prevent scrolling when sidebar is open */
  html.sidebar-open body {
    overflow: hidden;
  }
}

/* ── Hamburger Button ────────────────────────────────────────── */
#sidebar-hamburger {
  display: none;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px;
  margin-right: 0.75rem;
  cursor: pointer;
  color: #475569;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#sidebar-hamburger:hover {
  background-color: #f8fafc;
  color: #1a202c;
  border-color: #cbd5e1;
}

@media (max-width: 800px) {
  #sidebar-hamburger {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --font-sm: 0.8125rem;
  --font-base: 0.875rem;
  --font-lg: 1.1rem;
  --font-xl: 1.25rem;
  --font-2xl: 2rem;

  --color-l1: #d73027;
  --color-l2: #fc8d59;
  --color-l3: #91bfdb;
  --color-l4: #1a6896;

  /* Grades */
  --color-g3: #4e79a7;
  --color-g6: #f28e2b;
  --color-g9: #59a14f;

  /* Subjects */
  --color-reading: #264653;
  --color-writing: #e76f51;
  --color-math: #2a9d8f;

  /* Funding type */
  --color-public: #457b9d;
  --color-catholic: #c77b28;

  /* Directional */
  --color-improve: #2a9d8f;
  --color-decline: #e63946;

  --color-border: #e0e0e0;
  --color-bg-card: #ffffff;
  --color-bg-kpi: #f8f9fa;
  --color-text-strong: #333;
  --color-text-muted: #666;
  --color-text-secondary: #888;
  --color-text-subtle: #999;
  --color-accent: steelblue;
  --color-suppressed: #d0d0d0;

  --radius: 8px; /* Standardize on 8px for consistency */
  --input-width: 640px;
}

/* ── School Header Slot (injected into #observablehq-header) ── */
#observablehq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── School name title (left side of header) ── */
#school-header-slot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding-left: 0.5rem;
  overflow: hidden;
}

#school-header-slot:empty {
  display: none;
}

#school-header-slot .slot-school-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

#school-header-slot .slot-board-name {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Search combobox in the header bar (right side) */
#school-search-slot {
  flex: 1 1 260px;
  max-width: 400px;
}
#school-search-slot:empty {
  display: none;
}

/* Below 600px: hide the school/board name slot so the search can take the
   full header bar. The name is also visible in the page body, so no info is lost. */
@media (max-width: 600px) {
  #school-header-slot {
    display: none !important;
  }
  #school-search-slot {
    flex: 1 1 100%;
    max-width: none;
  }
}
/* Compact combobox sizing for the header bar */
#school-search-slot .school-combobox-input {
  font-size: 13px !important;
  padding: 6px 10px 6px 34px !important;
  border-width: 1px !important;
  border-radius: 6px !important;
}

/* Pulse glow on search bar while no school is explicitly chosen */
@keyframes search-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(70, 130, 180, 0); border-color: rgba(70, 130, 180, 0.4) !important; }
  50%       { box-shadow: 0 0 0 5px rgba(70, 130, 180, 0.25); border-color: rgba(70, 130, 180, 0.8) !important; }
}
body.example-mode #school-search-slot .school-combobox-input {
  animation: search-pulse 2s ease-in-out infinite;
}

/* ── KPI Cards ───────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-md) 0 var(--space-lg);
}

.kpi-card {
  background: var(--color-bg-kpi);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  min-width: 140px;
}

.kpi-card--g3 {
  border-top-color: var(--color-g3);
}

.kpi-card--g6 {
  border-top-color: var(--color-g6);
}

.kpi-card--g9 {
  border-top-color: var(--color-g9);
}

.kpi-value {
  font-size: var(--font-2xl);
  font-weight: 700;
  line-height: 1.2;
}

.kpi-label {
  color: var(--color-text-muted);
  font-size: var(--font-base);
  margin-top: var(--space-xs);
}

/* ── Chart Card ──────────────────────────────────────────────── */
.chart-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
}

.chart-card+.chart-card {
  margin-top: var(--space-sm);
}

/* ── Interactive Controls ────────────────────────────────────── */
/*
 * .control-bar — horizontal group for 2-4 related inputs (grade/subject/year).
 */
.control-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: flex-start;
  background: var(--color-bg-kpi);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
}

/* Enhanced School/Board Search Input */
.school-combobox-container {
  position: relative;
  width: 100%;
  max-width: var(--input-width);
  font-family: inherit;
}

.school-combobox-input {
  width: 100%;
  padding: 10px 12px 10px 40px !important; /* Extra left padding for search icon */
  font-size: 16px !important; /* Larger font for better mobile/desktop feel */
  border: 2px solid #cbd5e1 !important; /* Slightly thicker, more visible border */
  border-radius: 8px !important;
  box-sizing: border-box;
  background: white;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.school-combobox-input:focus {
  outline: none;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(78, 121, 167, 0.2);
}

.school-combobox-input::placeholder {
  color: #94a3b8;
}

/* .has-value class is still toggled (used for the pulse-animation guard) */

.school-combobox-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  z-index: 10000;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Touch-friendly dropdown rows: bump min-height and vertical padding when the
   primary pointer is coarse (touch). Overrides inline `padding:7px 12px` set
   in schoolSelector.js, so `!important` is required. */
@media (pointer: coarse) {
  .school-combobox-dropdown > div {
    min-height: 40px;
    padding: 10px 14px !important;
  }
}

/* Hero Search styling for landing page */
.hero-search-wrapper {
  margin: 2rem 0 0.5rem;
  padding: 2.5rem;
  background: #f1f5f9;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.hero-search-wrapper .school-combobox-container {
  max-width: 800px;
}

.hero-search-wrapper .school-combobox-input {
  font-size: 1.1rem !important;
  padding: 14px 16px 14px 48px !important;
  border-color: #94a3b8 !important;
}

.hero-search-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Callout Boxes ───────────────────────────────────────────── */
/*
 * Usage:
 *   <div class="callout-info">Methodology note or context.</div>
 *   <div class="callout-insight">Key finding or takeaway.</div>
 *   <div class="callout-warning">Data caveat or reliability note.</div>
 */
.callout-info,
.callout-insight,
.callout-warning,
.callout-success,
.callout-provincial {
  border-left: 4px solid;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  font-size: var(--font-base);
  line-height: 1.5;
}

.callout-info {
  border-color: #4e79a7;
  background: #eaf0f8;
  padding-top: calc(var(--space-sm) + 1.4em);
  position: relative;
}

.callout-info::before {
  content: "ℹ Info";
  position: absolute;
  top: var(--space-sm);
  left: var(--space-md);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #4e79a7;
}

.callout-insight {
  border-color: #2a9d8f;
  background: #e6f5f3;
}

.callout-warning {
  border-color: #e6a817;
  background: #fdf6e3;
  padding-top: calc(var(--space-sm) + 1.4em);
  position: relative;
}

.callout-warning::before {
  content: "⚠ Note";
  position: absolute;
  top: var(--space-sm);
  left: var(--space-md);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b8860b;
}

.callout-success {
  border-color: #59a14f;
  background: #edf6ec;
}

.callout-provincial {
  border-color: #5c6bc0;
  background: #eef0fb;
  padding-top: calc(var(--space-sm) + 1.4em);
  position: relative;
}

.callout-provincial::before {
  content: "🏛 Provincial Insight";
  position: absolute;
  top: var(--space-sm);
  left: var(--space-md);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5c6bc0;
}

/* ── Reliability callouts (landing page) ────────────────────── */
/*
 * Separate classes because index.md overrides .callout-info to minimal text.
 * .callout-reliability-moderate = blue (informational concern)
 * .callout-reliability-strong   = amber (notable concern)
 */
.callout-reliability-moderate,
.callout-reliability-strong {
  border-left: 4px solid;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  font-size: var(--font-base);
  line-height: 1.5;
}

.callout-reliability-moderate {
  border-color: #4e79a7;
  background: #eaf0f8;
}

.callout-reliability-strong {
  border-color: #e6a817;
  background: #fdf6e3;
}

.callout-reliability-moderate .callout-title,
.callout-reliability-strong .callout-title {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.callout-reliability-moderate .callout-title {
  color: #4e79a7;
}

.callout-reliability-strong .callout-title {
  color: #b8860b;
}

/* ── See-also links ──────────────────────────────────────────── */
.see-also {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-border);
  padding: var(--space-xs) var(--space-sm);
  margin-top: var(--space-lg);
}

/* ── Chart Title ─────────────────────────────────────────────── */
/*
 * For per-chart dynamic titles (e.g. updated by grade/subject selector).
 * Static chart titles: use Plot.plot({title}) or markdown ##.
 */
.chart-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--theme-foreground);
}

/* ── Footer ──────────────────────────────────────────────────── */
.dashboard-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
  font-size: var(--font-sm);
  color: var(--color-text-muted);
}

.dashboard-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Sidebar Sections & Links ────────────────────────────────── */
#observablehq-sidebar section {
  margin-bottom: 1rem;
}

#observablehq-sidebar summary {
  list-style: none;
  font-weight: 700;
  font-size: 1.2rem;
  color: #1a202c;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
}

#observablehq-sidebar summary::-webkit-details-marker {
  display: none;
}

/* Section headings no longer have chevrons as per user request */

#observablehq-sidebar li {
  padding: 0 0.5rem 0 0.25rem;
}

#observablehq-sidebar li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0.5rem 0.75rem 0.25rem;
  color: #4a5568 !important; /* Slightly more muted default */
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
  transition: all 0.2s ease;
}

#observablehq-sidebar li a:hover {
  background-color: #f1f5f9;
  color: #1a202c !important;
}

#observablehq-sidebar section.observablehq-section-active > details > summary,
#observablehq-sidebar section.observablehq-section-active > summary {
  background-color: transparent;
  border-left: 3px solid #3b5cc4;
  padding-left: calc(0.75rem - 3px);
  color: #1a2f7a;
  font-weight: 600;
}

/* Title link ("🏠 Ontario School Profiles") — no rail, no fill in any state */
/* OF's rail is a ::before pseudo-element on the li, not a border-left on the a */
#observablehq-sidebar > ol > li > a {
  background-color: transparent !important;
}
#observablehq-sidebar > ol > li.observablehq-link-active::before {
  content: none !important;
}

/* Active page link inside sections — light blue fill */
#observablehq-sidebar section li.observablehq-link-active > a {
  color: #1a2f7a !important;
  font-weight: 700;
  background-color: #dce5f8;
}

/* ── Sidebar In-page TOC — Functional Accordion Layout ──────── */

/* 1. The TOC container (details element) */
.sidebar-toc {
  display: block;
  margin: 0.25rem 0.25rem 0.75rem 0.25rem;
  background: #f1f5f9;
  border-radius: 0;
  overflow: hidden;
}

/* 2. The Summary (contains the page link and the functional chevron) */
.sidebar-toc-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0.75rem;
  cursor: pointer;
  outline: none;
}

.sidebar-toc-summary::-webkit-details-marker {
  display: none;
}

/* The page link inside the summary */
.sidebar-toc-summary a {
  flex-grow: 1;
  padding: 0.75rem 0.5rem !important;
  color: #1a202c !important;
  font-weight: 600 !important;
  background-color: transparent !important;
}

/* Functional chevron — ▾ (down) when closed, ▴ (up) when open */
.sidebar-toc-summary::after {
  content: "\25BE"; /* ▾ small down-pointing triangle (closed = down) */
  font-size: 1rem;
  color: #4a5568;
  transition: transform 0.2s ease;
  display: inline-block;
}

.sidebar-toc[open] .sidebar-toc-summary::after {
  transform: rotate(180deg); /* flips to ▴ (up) when open */
}

#observablehq-sidebar li.observablehq-link-active:has(.sidebar-toc) {
  background: transparent !important;
}

/* 3. TOC list */
.sidebar-toc-list {
  list-style: none;
  margin: 0;
  padding: 0 0.5rem 0.5rem 0.5rem;
}

/* 4. TOC link base style */
.sidebar-toc-link {
  display: block;
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 400;
  color: #64748b !important;
  text-decoration: none;
  padding: 0.6rem 0.75rem;
  border-radius: 0;
  transition: all 0.2s ease;
  white-space: normal;
  overflow-wrap: break-word;
}

.sidebar-toc-link:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: #1a202c !important;
}

/* 5. Active TOC link: light blue fill */
.sidebar-toc-link--active {
  background: #dce5f8 !important;
  color: #1a2f7a !important;
  font-weight: 700 !important;
  box-shadow: none;
}

/* Indent h3 items within the gray box */
.sidebar-toc-link--h3 {
  padding-left: 1.5rem;
  font-size: 0.85rem;
}


/* ── Public Mode (hide non-School-Profile sections) ─────────── */
/*
 * Activated by a <script> in observablehq.config.js header.
 * When the URL lacks ?full, the <html> element gets class "public-mode"
 * and only the first sidebar section ("School Profile") is visible.
 * Bookmark ?full for your own full-nav access.
 */
html.public-mode #observablehq-sidebar section {
  display: none;
}

html.public-mode #observablehq-sidebar section.observablehq-section-visible {
  display: block;
}

/* Hide the "School Profile" section heading in public mode */
html.public-mode #observablehq-sidebar section.observablehq-section-visible > summary {
  display: none;
}

/* Hide prev/next pager so viewers don't navigate out of the section */
html.public-mode .observablehq-pager {
  display: none;
}

/* Hide sidebar toggle when sidebar is open (duplicate functionality with header close button) */
#observablehq-sidebar-toggle:checked {
  display: none;
}

/* ── Print / Export ──────────────────────────────────────────── */
@media print {

  /* Hide interactive controls — they're meaningless on paper */
  form,
  .control-bar,
  input,
  select,
  button,
  .export-btn {
    display: none !important;
  }

  /* Ensure white backgrounds on charts and cards */
  .chart-card,
  .kpi-card {
    background: #fff !important;
    box-shadow: none !important;
    border-color: #ccc !important;
  }

  /* Keep callouts but simplify them */
  .callout-info,
  .callout-insight,
  .callout-warning,
  .callout-success,
  .callout-reliability-moderate,
  .callout-reliability-strong {
    background: #fff !important;
    border-left-width: 3px;
  }

  /* Force black text for readability */
  body {
    color: #000 !important;
  }

  /* Remove sidebar and navigation chrome */
  #observablehq-sidebar,
  #observablehq-header,
  .observablehq-pager {
    display: none !important;
  }

  /* Let content fill the page width */
  #observablehq-center {
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Page breaks: avoid splitting a chart card across pages */
  .chart-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}