/* CalCurriculum Math Adoption Dashboard — shared styles.
   Layers on top of colors_and_type.css. No CSS framework is used. */
@import url('./colors_and_type.css');

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--cc-cream);
  color: var(--fg);
}

button,
input,
select,
textarea {
  font-family: inherit;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* ============ HEADER ============ */
.cc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cc-cream);
  border-bottom: 1px solid var(--border);
}

.cc-header-inner {
  max-width: 1640px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.cc-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.cc-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.cc-brand-row img {
  height: 38px;
  width: auto;
  display: block;
}

/* Wider aspect ratio than the bare mark, so it rides a touch taller. */
.cc-brand-row img.cc-brand-lockup {
  height: 46px;
}

.cc-powered-by {
  margin-top: 5px;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  line-height: 1;
  white-space: nowrap;
}

.cc-powered-by-logo {
  height: 22px;
  width: auto;
  display: inline-block;
  flex-shrink: 0;
}

.cc-header-product {
  margin-left: 4px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cc-header-product .eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

.cc-header-product .name {
  font-size: 28px;
  font-weight: 700;
  color: var(--cc-blue);
  line-height: 1.1;
  white-space: nowrap;
}

.cc-nav {
  display: flex;
  gap: 20px;
  flex: 1;
  margin-left: 12px;
}

.cc-nav a {
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-blue);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition:
    color 140ms var(--ease-out),
    border-color 140ms var(--ease-out);
}

.cc-nav a:hover {
  color: var(--cc-rust);
}

.cc-nav a.active {
  border-bottom-color: var(--cc-yellow);
}

/* Nav dropdown ("More Resources") — hover + focus reveals a panel of links. */
.cc-nav-dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
}

.cc-nav-dropdown > .cc-nav-trigger {
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-blue);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  transition: color 140ms var(--ease-out);
}

.cc-nav-dropdown > .cc-nav-trigger:hover {
  color: var(--cc-rust);
}

.cc-nav-dropdown > .cc-nav-trigger .chev {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms var(--ease-out);
}

.cc-nav-dropdown:hover > .cc-nav-trigger .chev,
.cc-nav-dropdown:focus-within > .cc-nav-trigger .chev {
  transform: translateY(0) rotate(225deg);
}

.cc-nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  width: min(320px, calc(100vw - 32px));
  background: var(--cc-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 160ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s linear 200ms;
  z-index: 50;
}

/* Invisible bridge so cursor can travel from trigger to menu without dropout */
.cc-nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}

.cc-nav-dropdown:hover .cc-nav-menu,
.cc-nav-dropdown:focus-within .cc-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 160ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s linear 0s;
}

.cc-nav-menu a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--r-sm, 8px);
  border-bottom: none;
  text-decoration: none;
  color: var(--cc-blue);
  transition:
    background 140ms var(--ease-out),
    color 140ms var(--ease-out);
}

.cc-nav-menu a:hover {
  background: var(--cc-cream);
  color: var(--cc-rust);
}

.cc-nav-menu a .label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.cc-nav-menu a .label .source {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

.cc-nav-menu a:hover .label .source {
  color: var(--cc-rust);
}

.cc-nav-menu a .ext {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.5;
  transition:
    opacity 140ms var(--ease-out),
    transform 140ms var(--ease-out);
}

.cc-nav-menu a:hover .ext {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* Escape sets .is-dismissed so the panel can close while the trigger still
   holds focus — :focus-within alone would keep it open forever. */
.cc-nav-dropdown.is-dismissed .cc-nav-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}

/* Keyboard focus matches the system's teal ring, and the focused menu item
   gets the same emphasis :hover already gives it. */
.cc-nav a:focus-visible,
.cc-nav-menu a:focus-visible,
.cc-tabbar button:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

.cc-nav-menu a:focus-visible {
  background: var(--cc-cream);
  color: var(--cc-rust);
}

.cc-nav-menu a:focus-visible .label .source,
.cc-nav-menu a:focus-visible .ext {
  color: var(--cc-rust);
  opacity: 1;
}

/* "About Us" panel — same .cc-nav-menu dropdown, just prose instead of a list
   of links, so it needs its own width/padding instead of the link rows'. */
.cc-nav-menu--text {
  padding: 14px 16px;
  width: min(360px, calc(100vw - 32px));
}

.cc-nav-menu--text:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: -2px;
}

.cc-nav-about-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cc-blue);
}

.cc-nav-about-copy + .cc-nav-about-copy {
  margin-top: 12px;
}

/* Overrides .cc-nav-menu a's block/flex menu-item styling, which otherwise
   leaks in here since #about-us-panel shares the cc-nav-menu class — these
   are inline text links, not menu rows. */
.cc-nav-menu--text .cc-nav-about-copy a {
  display: inline;
  padding: 0;
  border-radius: 0;
  color: var(--fg-link);
  text-decoration: underline;
}

.cc-nav-menu--text .cc-nav-about-copy a:hover {
  background: none;
  color: var(--cc-purple);
}

/* Nav item with no destination yet — a real <button aria-disabled="true">, so
   it keeps its place in the tab order while reading as unavailable. Styled to
   look like the plain text it replaces. */
.cc-nav-disabled {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-soft);
  padding: 6px 0;
  cursor: default;
  background: none;
  border: 0;
  line-height: inherit;
}

.cc-nav-disabled:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link: parked off-screen until focused, then drops over the header. */
.cc-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--cc-white);
  color: var(--cc-blue);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm, 8px);
  box-shadow: var(--shadow-md);
  transition: top 140ms var(--ease-out);
}

/* :focus, not :focus-visible — the skip link must appear however it is reached. */
.cc-skip-link:focus {
  top: 16px;
}

.cc-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc-pill-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cc-white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--fg);
  min-width: 240px;
  cursor: text;
}

.cc-pill-input:focus-within {
  border-color: var(--cc-blue);
  box-shadow: 0 0 0 3px rgba(0, 58, 93, 0.12);
}

/* The inner <input> has outline:none, so the wrapper carries the focus ring.
   The border/shadow pair above is invisible on the navy filter panel (navy on
   navy), so keyboard focus gets a real ring the panel rule then recolors. */
.cc-pill-input:has(input:focus-visible) {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

.cc-pill-input input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  flex: 1;
}

.cc-search-results {
  display: none;
  position: absolute;
  top: 62px;
  right: 140px;
  width: 340px;
  background: var(--cc-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-height: 340px;
  overflow-y: auto;
  z-index: 60;
}

/* Options are non-focusable: the combobox input keeps focus and points at the
   highlighted option with aria-activedescendant, so the arrow-key highlight and
   the mouse hover need to look the same. */
.cc-search-option {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.cc-search-option:last-child {
  border-bottom: none;
}

.cc-search-option:hover,
.cc-search-option[aria-selected='true'] {
  background: var(--cc-cream-deep);
}

.cc-search-option .name {
  font-weight: 600;
  color: var(--cc-blue);
  font-size: 13px;
}

.cc-search-option .county {
  font-size: 11px;
  color: var(--fg-soft);
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .cc-header-inner {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .cc-nav {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .cc-nav-dropdown {
    position: static;
  }

  .cc-nav-menu {
    left: 16px;
    right: 16px;
    width: auto;
  }
}

@media (max-width: 720px) {
  .cc-powered-by {
    display: none;
  }

  .cc-header-product .name {
    font-size: 18px;
    white-space: normal;
  }

  .cc-header-actions {
    flex: 1 1 100%;
  }

  .cc-pill-input {
    flex: 1;
    min-width: 0;
  }

  .cc-search-results {
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* ============ BUTTONS / CHIPS ============ */
.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  color: var(--fg);
  transition: all 180ms var(--ease-out);
}

.cc-btn:hover {
  background: rgba(0, 58, 93, 0.06);
}

/* Was falling back to the browser's own ring, which the surrounding navy panel
   swallowed on "Reset all". Same ring as every other control instead. */
.cc-btn:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
  background: rgba(0, 58, 93, 0.06);
}

.cc-filter-group .cc-btn:focus-visible {
  outline: 3px solid var(--cc-cream);
  background: rgba(255, 249, 240, 0.12);
}

.cc-btn-primary {
  background: var(--cc-blue);
  color: var(--cc-cream);
}

.cc-btn-primary:hover {
  background: var(--cc-blue-shade);
  color: var(--cc-cream);
}

.cc-btn-ghost {
  padding: 6px 10px;
  font-size: 12px;
}

.cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--cc-white);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  /* Named properties, not `all` — `all` animated outline-width/color too, so
     the focus ring faded in from `medium currentColor` instead of appearing
     immediately at full strength. */
  transition:
    background-color 140ms var(--ease-out),
    border-color 140ms var(--ease-out),
    color 140ms var(--ease-out);
}

.cc-chip:hover {
  border-color: var(--cc-blue);
}

.cc-chip.active {
  background: var(--cc-blue);
  color: var(--cc-cream);
  border-color: var(--cc-blue);
}

.cc-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.cc-chip.solid {
  background: var(--cc-blue);
  color: var(--cc-cream);
  border-color: var(--cc-blue);
}

.cc-chip:focus-visible,
.cc-band-chip:focus-visible,
.cc-segmented button:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

/* The focused chip also takes the hover border, so focus and hover read as the
   same "this is the one you're on" state. */
.cc-chip:focus-visible {
  border-color: var(--cc-blue);
}

/* ============ CARDS ============ */
.cc-card {
  background: var(--cc-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
}

.cc-card-tight {
  padding: 16px;
}

.cc-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-accent);
  display: block;
  margin-bottom: 8px;
}

.cc-section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--cc-blue);
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cc-section-title .meta {
  font-size: 12px;
  color: var(--fg-soft);
  font-weight: 500;
}

.cc-section-title--lg {
  font-size: 18px;
}

.cc-card-subtitle {
  color: var(--fg-soft);
  font-size: 14px;
  margin: -6px 0 18px;
  line-height: 1.55;
}

.cc-pilot-subtitle {
  color: var(--fg-soft);
  font-size: 13px;
  margin: -8px 0 14px;
}

/* ========== INTRO BAND ========== */
.cc-intro-band {
  background: var(--cc-cream);
  border-bottom: 1px solid var(--border);
}

.cc-intro-band:focus-visible {
  outline: 3px solid var(--cc-teal-shade);
  outline-offset: -3px;
}

.cc-intro-band-inner {
  max-width: 1640px;
  margin: 0 auto;
  padding: 18px 32px 22px;
  display: block;
}

.cc-intro-band-copy p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--cc-blue);
  margin: 4px 0 0;
  text-wrap: pretty;
}

.cc-intro-band-copy p em {
  font-style: normal;
  font-weight: 600;
  color: var(--cc-rust);
}

/* Lede: the first two words of the intro carry the paragraph, so they run a
   step larger and bolder than the body copy around them. */
.cc-intro-band-copy p .cc-intro-lede {
  font-size: 19px;
  font-weight: 700;
}

.cc-band-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cc-band-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px 9px 18px;
  border-radius: 999px;
  background: var(--cc-white);
  border: 1.5px solid var(--border-strong);
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-blue);
  cursor: pointer;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  transition: all 140ms var(--ease-out);
}

.cc-band-chip .check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-cream);
  flex-shrink: 0;
  transition: all 140ms var(--ease-out);
}

.cc-band-chip:hover {
  border-color: var(--cc-blue);
}

.cc-band-chip.active {
  background: var(--cc-blue);
  color: var(--cc-cream);
  border-color: var(--cc-blue);
}

.cc-band-chip.active .check {
  background: var(--cc-yellow);
  border-color: var(--cc-yellow);
  color: var(--cc-blue);
}

.cc-band-summary {
  font-size: 12px;
  color: var(--fg-soft);
}

/* ============ STATE PAGE LAYOUT ============ */
/* ----- Analyst layout (data-layout='analyst') ----- */
main.dashboard[data-layout='analyst'] .app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 360px;
  gap: 18px;
  padding: 0 32px 32px;
  max-width: 1640px;
  margin: 0 auto;
  align-items: start;
}

main.dashboard[data-layout='analyst'] .rail-filters,
main.dashboard[data-layout='analyst'] .rail-stats {
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
  min-width: 0;
}

/* Trends rail gets its own colored "analysis panel" treatment so it reads
   as findings rather than filters. */
main.dashboard[data-layout='analyst'] .rail-stats {
  background: var(--cc-blue);
  border-radius: var(--r-md);
  padding: 14px 12px 16px;
  gap: 10px;
  box-shadow: var(--shadow-md);
  position: sticky;
  overflow-y: auto;
}

main.dashboard[data-layout='analyst'] .rail-stats::before {
  content: '';
  display: block;
  height: 3px;
  width: 44px;
  background: var(--cc-yellow);
  border-radius: 2px;
  margin: 2px 4px 6px;
}

main.dashboard[data-layout='analyst'] .map-card {
  width: 100%;
  min-width: 0;
}

main.dashboard[data-layout='analyst'] #state-map {
  height: 720px;
}

main.dashboard[data-layout='analyst'] .rail-filters .rail-header,
main.dashboard[data-layout='analyst'] .rail-stats .rail-header {
  display: none;
}

/* Scrollbar styling for rails */
.rail-filters,
.rail-stats {
  scrollbar-width: thin;
}

.rail-filters::-webkit-scrollbar,
.rail-stats::-webkit-scrollbar {
  width: 6px;
}

.rail-filters::-webkit-scrollbar-thumb,
.rail-stats::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* Scrollable rails are keyboard-focusable (tabindex="0") so keyboard-only
   users can scroll them; give the focused region a visible indicator. */
.rail-stats:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  main.dashboard[data-layout='analyst'] .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  main.dashboard[data-layout='analyst'] .rail-filters,
  main.dashboard[data-layout='analyst'] .rail-stats {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* ===== Trends rail (right side, next to the map) ===== */
.trends-rail-head {
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.trends-rail-head .cc-eyebrow {
  display: block;
  margin-bottom: 6px;
}

.trends-card {
  padding: 14px 14px 16px;
}

.trends-card .cc-section-title {
  margin-bottom: 6px;
}

/* ===== Info "i" affordance + its hover/focus tooltip ===== */

/* .cc-section-title is a space-between flex row; grouping the label and the
   icon keeps them together instead of pushing the icon to the far edge. */
.cc-title-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cc-info-btn {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--r-pill);
  color: var(--fg-accent);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.cc-info-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

.cc-info-btn:hover,
.cc-info-btn[aria-expanded='true'] {
  color: var(--cc-blue);
}

/* .cc-blue is the card's own background here, so the default resting/hover
   colors (calibrated against --cc-cream) drop below the 3:1 UI-component
   contrast minimum — swap to teal/white so it stays visible and AA-passing. */
.cc-filter-group--spotlight .cc-info-btn {
  color: var(--cc-teal);
}

.cc-filter-group--spotlight .cc-info-btn:hover,
.cc-filter-group--spotlight .cc-info-btn[aria-expanded='true'] {
  color: var(--cc-white);
}

.cc-info-btn:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

/* Positioned by js/info-tooltip.js and appended to <body>, so it escapes the
   scrolling rail's overflow clipping. */
.cc-info-tip {
  position: fixed;
  z-index: 120;
  width: min(340px, calc(100vw - 24px));
  padding: 14px 16px;
  background: var(--cc-blue);
  color: var(--cc-cream);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
}

.cc-info-tip[hidden] {
  display: none;
}

/* The base `p` rule sets its own color/size, so restate them here rather than
   relying on inheritance from the panel. */
.cc-info-tip p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cc-cream);
}

.cc-info-tip p + p {
  margin-top: 8px;
}

.cc-info-tip .cc-info-tip-title {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-yellow);
}

/* Eyebrow distinguishing the two "Selected Materials" cards — metadata
   styling, not a clickable filter chip. */
.list-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.list-tag::before {
  content: '';
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.list-tag--2025 {
  color: #003a5d;
}

.list-tag--legacy {
  color: #1a5478;
}

.trends-rail-head--secondary {
  padding-top: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(244, 240, 232, 0.18);
}

/* Trends rail is a deep-blue "analysis panel", distinct from the white
   filter cards. */
main.dashboard[data-layout='analyst'] .rail-stats .trends-rail-head {
  padding: 4px 8px 14px;
  border-bottom: 1px solid rgba(244, 240, 232, 0.18);
  margin-bottom: 2px;
}

main.dashboard[data-layout='analyst'] .rail-stats .trends-rail-head .cc-eyebrow {
  color: var(--cc-yellow);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

main.dashboard[data-layout='analyst'] .rail-stats .trends-card {
  background: var(--cc-cream);
  border: none;
  border-radius: var(--r-sm);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.cc-intro-band-copy p.cc-intro-note {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--fg-soft);
  margin: 14px 0 0;
}

.cc-intro-band-copy p.cc-intro-note strong {
  color: var(--cc-rust);
  font-weight: 600;
}

/* In the intro band the button sits inline at the end of the note it answers,
   so it rides the text baseline-ish with a little breathing room to its left
   and drops to the next line only when there isn't room. The hero version gets
   its spacing from the grid it sits in. */
.cc-feedback-btn--intro {
  align-self: auto;
  vertical-align: middle;
  margin-left: 12px;
  /* Cancels the paragraph's 1.5 line-height inheritance so an inline button on
     a wrapped line doesn't stretch the row it lands in. */
  position: relative;
  top: -1px;
}

/* Same grade-band chip color model: cream outline deselected, yellow fill
   + navy text selected. */
.cc-filter-group {
  padding: 14px 14px 16px;
  background: var(--cc-blue);
  border-color: transparent;
  color: var(--cc-cream);
}

.cc-filter-group h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-yellow);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cc-filter-group h3 .cc-btn-ghost {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  color: var(--cc-cream);
}

.cc-filter-group h3 .cc-btn-ghost:hover {
  color: var(--cc-yellow);
}

.cc-filter-hint {
  font-size: 13px;
  color: rgba(255, 249, 240, 0.72);
  margin-top: -4px;
  margin-bottom: 10px;
}

/* Yellow left rule — extra emphasis as the most strategic filter. */
.cc-filter-group--spotlight {
  border-left: 3px solid var(--cc-yellow);
}

/* Filter chips (CA 2025 list, enrollment, EL%) — mirror .cc-map-headbar chips.
   Border at .42 alpha (not .35) — same SC 1.4.11 fix as .cc-pill-input below. */
.cc-filter-group .cc-chip {
  background: transparent;
  border-color: rgba(255, 249, 240, 0.42);
  color: var(--cc-cream);
}

.cc-filter-group .cc-chip:hover {
  border-color: var(--cc-cream);
}

.cc-filter-group .cc-chip.active {
  background: var(--cc-yellow);
  border-color: var(--cc-yellow);
  color: var(--cc-blue);
}

.cc-filter-group .cc-chip:focus-visible {
  outline: 3px solid var(--cc-cream);
  outline-offset: 2px;
  border-color: var(--cc-cream);
}

.cc-filter-group .cc-chip.active:focus-visible {
  border-color: var(--cc-yellow);
}

/* Sub-group labels (Total enrollment / English Learner %). */
.cc-filter-group .cc-subfilter-label {
  color: rgba(255, 249, 240, 0.72);
}

/* "Adopted Material" select — translucent field with a cream caret; the
   native option panel stays light for legibility. Border at .42 alpha, same
   SC 1.4.11 fix as .cc-pill-input below. */
.cc-filter-group .cc-filter-select {
  background-color: rgba(255, 249, 240, 0.1);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFF9F0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border-color: rgba(255, 249, 240, 0.42);
  color: var(--cc-cream);
}

.cc-filter-group .cc-filter-select:hover {
  border-color: rgba(255, 249, 240, 0.65);
}

.cc-filter-group .cc-filter-select:focus {
  border-color: var(--cc-yellow);
  box-shadow: 0 0 0 3px rgba(255, 181, 41, 0.25);
}

/* Same reason as the chips: cream, not teal, against the navy panel. */
.cc-filter-group .cc-filter-select:focus-visible,
.cc-filter-group .cc-pill-input:has(input:focus-visible) {
  outline: 3px solid var(--cc-cream);
  outline-offset: 2px;
}

.cc-filter-group .cc-filter-select option {
  color: var(--cc-blue);
  background: var(--cc-white);
}

/* Selected material no longer applies to the active band. color/font-style
   go on the <select> itself so the closed control shows them too (a
   disabled option's own inline style doesn't reach the closed box in every
   browser) — the override right below undoes the inherited color/style on
   every option except the disabled one, so it doesn't bleed into the rest
   of the list when opened. */
.cc-filter-group .cc-filter-select--stale {
  color: var(--cc-yellow);
  font-style: italic;
  border-color: rgba(255, 181, 41, 0.55);
}
.cc-filter-group .cc-filter-select--stale option:not(:disabled) {
  color: var(--cc-blue);
  font-style: normal;
}

/* County search field. */
.cc-filter-group .cc-pill-input {
  background: rgba(255, 249, 240, 0.1);
  border-color: rgba(255, 249, 240, 0.42);
  color: var(--cc-cream);
  margin-bottom: 8px;
  min-width: 0;
}

.cc-filter-group .cc-pill-input input {
  color: var(--cc-cream);
}

.cc-filter-group .cc-pill-input input::placeholder {
  color: rgba(255, 249, 240, 0.6);
}

#filter-county-list {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

/* County rows: cream text, translucent count, grade-band-style checkbox. */
.cc-filter-group .cc-filter-row {
  color: var(--cc-cream);
}

.cc-filter-group .cc-filter-row > span:last-child {
  color: rgba(255, 249, 240, 0.6) !important;
}

.cc-filter-group .cc-checkbox {
  background: transparent;
  border-color: rgba(255, 249, 240, 0.5);
}

.cc-filter-group .cc-checkbox:checked {
  background: var(--cc-yellow);
  border-color: var(--cc-yellow);
}

.cc-filter-group .cc-checkbox:checked::after {
  border-color: var(--cc-blue);
}

.cc-filter-group .cc-checkbox:focus-visible {
  outline-color: var(--cc-yellow);
}

.cc-filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Compact single-select used by the "Adopted Material" filter — one
   control instead of a long chip row. Custom caret via inline SVG. */
.cc-filter-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--cc-white);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23003A5D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 32px 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cc-blue);
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color 140ms var(--ease-out),
    box-shadow 140ms var(--ease-out);
}

.cc-filter-select:hover {
  border-color: var(--border-strong);
}

.cc-filter-select:focus {
  border-color: var(--cc-blue);
  box-shadow: 0 0 0 3px rgba(0, 58, 93, 0.12);
}

/* The border/shadow pair alone reads faintly; keyboard focus gets the same
   teal ring as the rest of the controls. */
.cc-filter-select:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

/* Sub-grouped filter rows (e.g. the two chip rows inside "Student Population"). */
.cc-subfilter-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin: 0 0 7px;
}

.cc-subfilter + .cc-subfilter {
  margin-top: 14px;
}

/* The row itself is the <label>, so it carries the pointer affordance. */
.cc-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
}

/* A real <input type="checkbox"> styled with appearance:none — keeps the
   custom look while retaining the Tab stop, Space toggling and native checked
   state that the previous <span> stand-in had none of. */
.cc-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-white);
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

.cc-checkbox:checked {
  background: var(--cc-blue);
  border-color: var(--cc-blue);
}

.cc-checkbox:checked::after {
  content: '';
  width: 9px;
  height: 5px;
  border: 2px solid var(--cc-cream);
  border-top: 0;
  border-right: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.cc-checkbox:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

/* ============ MAP WORKSPACE ============ */
.cc-map-card {
  background: var(--cc-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Band picker + view summary on one navy row, so neither steals map space. */
.cc-map-headbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
  padding: 11px 18px;
  background: var(--cc-blue);
  color: var(--cc-cream);
}

.cc-map-headbar .band-group,
.cc-map-headbar .viewstat-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cc-map-headbar .cc-eyebrow {
  margin: 0;
  color: var(--cc-yellow);
  white-space: nowrap;
}

/* Selection is self-evident from the active chip; hide the summary text to
   keep the header on a single row (element kept in DOM for the band JS). */
.cc-map-headbar .cc-band-summary {
  display: none;
}

/* Compact (no check-circle) so the whole header fits one row. Border at .42
   alpha, same SC 1.4.11 fix as .cc-pill-input above. */
.cc-map-headbar .cc-band-chip {
  background: transparent;
  border-color: rgba(255, 249, 240, 0.42);
  color: var(--cc-cream);
  padding: 6px 14px;
  font-size: 12.5px;
  gap: 0;
}

.cc-map-headbar .cc-band-chip .check {
  display: none;
}

.cc-map-headbar .cc-band-chip:hover {
  border-color: var(--cc-cream);
}

.cc-map-headbar .cc-band-chip.active {
  background: var(--cc-yellow);
  border-color: var(--cc-yellow);
  color: var(--cc-blue);
}

.cc-map-headbar .figures {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cc-map-headbar .stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.cc-map-headbar .big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cc-yellow);
  font-variant-numeric: tabular-nums;
}

.cc-map-headbar .big.secondary {
  color: var(--cc-yellow);
}

.cc-map-headbar .unit {
  font-size: 11.5px;
  color: rgba(255, 249, 240, 0.8);
  font-weight: 500;
  white-space: nowrap;
}

.cc-map-headbar .vsep {
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  background: rgba(255, 249, 240, 0.22);
}

@media (max-width: 720px) {
  .cc-map-headbar {
    gap: 10px;
  }

  .cc-map-headbar .viewstat-group {
    width: 100%;
  }

  .cc-band-chip-row {
    flex-wrap: wrap;
  }

  .cc-band-chip-row .cc-band-chip {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }
}

.cc-map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--cc-cream);
  gap: 12px;
  flex-wrap: wrap;
}

.cc-map-toolbar .group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cc-map-toolbar .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.cc-map-toolbar--tight {
  padding: 10px 14px;
}

.cc-map-toolbar .cc-btn-ghost {
  font-size: 11px;
}

/* Zoom controls — real buttons replacing Highcharts' mouse-only SVG ones. */
.cc-map-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cc-map-zoom button {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--cc-blue);
  background: var(--cc-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition:
    border-color 140ms var(--ease-out),
    background 140ms var(--ease-out);
}

.cc-map-zoom button:hover {
  border-color: var(--border-strong);
  background: var(--cc-cream-deep);
}

.cc-map-zoom button:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

.cc-segmented {
  display: inline-flex;
  background: var(--cc-white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

.cc-segmented button {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: all 140ms var(--ease-out);
}

.cc-segmented button.active {
  background: var(--cc-blue);
  color: var(--cc-cream);
}

.cc-map-area {
  position: relative;
  width: 100%;
  background:
    radial-gradient(circle at 20% 10%, rgba(144, 198, 205, 0.1), transparent 40%), var(--cc-cream);
}

#state-map {
  width: 100%;
  height: 680px;
}

#district-map {
  width: 100%;
  height: 580px;
}

.cc-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--cc-cream);
  font-size: 12px;
  color: var(--fg-soft);
  gap: 12px;
  flex-wrap: wrap;
}

.cc-map-footer--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.cc-map-tip {
  font-size: 11px;
  color: var(--fg-soft);
  margin: 0;
}

/* A <ul> so screen readers announce it as a legend of N items; the list
   presentation itself is stripped. */
.cc-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* State map: the legend is pinned inside the map container instead of sitting
   under it, so it stays in view beside the colors it explains rather than
   trailing a 680px-tall map. Top-right clears California's outline — the
   north-east corner of the frame is empty above the Nevada border.

   pointer-events: none so the districts underneath stay hoverable and
   clickable; nothing in the legend is interactive. */
.cc-legend--overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  max-width: 46%;
  padding: 11px 14px;
  background: var(--cc-cream-deep);
  border: 1px solid var(--cc-blue);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 14px rgba(0, 58, 93, 0.16);
  pointer-events: none;
}

/* Full-strength blue over the cream card: the muted --fg-soft the legend
   inherits is tuned for the page background, not for a panel sitting on the
   map. */
.cc-legend--overlay .cc-legend-item {
  color: var(--cc-blue);
}

.cc-legend--overlay .cc-legend-swatch {
  border-color: rgba(0, 58, 93, 0.28);
}

/* The map narrows below 1100px (.app-shell collapses to one column), so the
   legend is allowed a larger share of it before wrapping.

   Placement stays top-right at every width. Pinning it to the foot of the map
   instead was measured and made no difference: at these widths the 680px map is
   taller than the viewport left under the sticky header, so the legend is clear
   of the header for the same ~46% of map-reading scroll positions either way.
   What would actually move that number is a shorter map on narrow screens
   (420px lifts it to ~69%) — a sizing decision, not a legend one. */
@media (max-width: 1100px) {
  .cc-legend--overlay {
    max-width: 70%;
  }
}

/* Two lines now that the citation names both the data and the dataset behind
   it, so the note carries a reading line-height; it keeps the card's full width
   so each sentence stays on its own line wherever the card is wide enough. */
.cc-map-attribution {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-soft);
}

/* The citation link stays in the blue family at every state: the site's rust
   link color reads as a call to action next to a provenance note, and the
   purple hover sat on the link like a permanent visited state once the new tab
   sent the reader back with the pointer still resting on it. :visited is named
   explicitly so a followed link cannot drift back to either. */
.cc-map-attribution a,
.cc-map-attribution a:visited {
  color: var(--cc-blue);
}
.cc-map-attribution a:hover,
.cc-map-attribution a:visited:hover {
  color: var(--cc-blue-shade);
}

.cc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-soft);
}

.cc-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 58, 93, 0.18);
}

/* District profile page: larger legend for readability. */
#district-map-legend.cc-legend {
  gap: 18px;
}

#district-map-legend .cc-legend-item {
  font-size: 14px;
}

#district-map-legend .cc-legend-swatch {
  width: 16px;
  height: 16px;
}

/* Highcharts tooltip override to match brand */
.highcharts-tooltip > span {
  background: var(--cc-blue) !important;
  color: var(--cc-cream) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 12px !important;
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  border: none !important;
}

.highcharts-tooltip-box {
  fill: var(--cc-blue) !important;
  stroke: none !important;
}

.highcharts-credits {
  display: none !important;
}

.highcharts-container {
  font-family: var(--font-sans) !important;
}

/* Keyboard focus indicator for the focused district.

   Highcharts draws this rect inside the projected map group, whose transform
   scales strokes down by ~50x — its configured 2px line width landed at
   0.04px on screen, which is why the map looked like it could not be focused
   at all. non-scaling-stroke pins the width to screen pixels, and the CSS
   stroke-width beats the scaled presentation attribute Highcharts writes.

   The cream drop-shadow halo keeps the navy ring visible where it crosses the
   navy "On CA 2025 list" fill. */
.highcharts-focus-border {
  vector-effect: non-scaling-stroke;
  stroke: var(--cc-blue) !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 1px var(--cc-cream)) drop-shadow(0 0 2px var(--cc-cream));
}

/* ============ STATS — BARS ============ */
.cc-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  align-items: center;
}

.cc-bar-row .name {
  color: var(--fg);
  font-weight: 500;
}

.cc-bar-row .num {
  color: var(--fg-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cc-bar-track {
  grid-column: 1 / -1;
  height: 6px;
  background: rgba(0, 58, 93, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.cc-bar-fill {
  height: 100%;
  background: var(--cc-teal);
  border-radius: 3px;
  transition: width 320ms var(--ease-out);
}

.cc-stack-bar {
  display: flex;
  height: 14px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--cc-cream-deep);
  margin: 10px 0 6px;
}

.cc-stack-bar > div {
  height: 100%;
  transition: width 240ms var(--ease-out);
}

.cc-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cc-driver-group + .cc-driver-group {
  margin-top: 18px;
}

/* An <h3> that names its driver list (see renderDrivers) — the heading's own
   font size and margins are overridden so it looks exactly as it did as a div. */
.cc-driver-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-accent);
  margin: 0 0 8px;
}

.cc-driver-list {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-driver-list li {
  color: var(--cc-blue);
  font-size: 15px;
  font-weight: 500;
}

.cc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cc-cream-deep);
  color: var(--cc-blue);
  font-size: 12px;
  font-weight: 500;
}

.cc-tag .num {
  color: var(--fg-soft);
  font-weight: 600;
  font-size: 11px;
}

/* A <ul> for the same reason as .cc-legend, so the list presentation is
   stripped here too. Without the padding reset the UA indent pushes both
   columns right and the first one no longer lines up with the bar above it. */
.cc-donut-legend {
  font-size: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
  flex: 1;
  list-style: none;
  padding: 0;
}

.cc-donut-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cc-donut-legend .sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.cc-donut-legend .pct {
  margin-left: auto;
  color: var(--fg-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============ DISTRICT PROFILE ============ */
/* Half-circle decorative motif on hero */
.cc-profile-hero {
  background: var(--cc-cream);
  padding: 26px 32px 14px;
  max-width: 1640px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.cc-profile-hero::before {
  content: '';
  position: absolute;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  background: var(--cc-yellow);
  border-radius: 50%;
  opacity: 0.18;
  pointer-events: none;
}

.cc-profile-hero::after {
  content: '';
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  background: var(--cc-teal);
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
}

.cc-profile-hero .crumb {
  font-size: 14px;
  color: var(--fg-soft);
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.cc-profile-hero .crumb a {
  color: var(--fg-link);
  text-decoration: none;
}

.cc-profile-hero .crumb a:hover {
  color: var(--cc-purple);
  text-decoration: underline;
}

.cc-profile-hero .crumb #hero-county-crumb {
  cursor: pointer;
}

.cc-profile-hero .crumb #hero-county-crumb:hover {
  color: var(--cc-purple);
  text-decoration: underline;
}

.cc-profile-hero .crumb #hero-county-crumb:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

.cc-profile-hero h1 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
  color: var(--cc-blue);
  line-height: 1.05;
  text-wrap: balance;
}

.cc-profile-hero .meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 0;
}

/* District facts — a labeled stat strip, not filter-style lozenges. */
.hero-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 14px;
}

.hero-facts .fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 18px;
  border-left: 1px solid var(--border);
}

.hero-facts .fact:first-child {
  padding-left: 0;
  border-left: none;
}

.cc-profile-hero .fact-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-accent);
  white-space: nowrap;
}

.cc-profile-hero .fact-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--cc-blue);
  line-height: 1.2;
}

.cc-profile-hero .fact-link {
  color: var(--fg-accent);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.cc-profile-hero .fact-link:hover {
  border-bottom-color: currentColor;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

/* Feedback button — right-justified in the hero bar, dark blue. It is an
   anchor to an external form, so the underline is cleared here. */
.cc-feedback-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cc-blue);
  color: var(--cc-cream);
  text-decoration: none;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 3px 12px rgba(0, 58, 93, 0.2);
  transition:
    transform 120ms var(--ease-out),
    box-shadow 120ms var(--ease-out),
    background 120ms;
}

.cc-feedback-btn:hover {
  background: #002237;
  color: var(--cc-cream);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 58, 93, 0.28);
}

.cc-feedback-btn:active {
  transform: translateY(0);
}

/* Same teal focus ring the nav links and other controls use. */
.cc-feedback-btn:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

.cc-feedback-btn svg {
  opacity: 0.85;
}

.hero-name-row {
  display: block;
  margin-bottom: 8px;
  font-size: 38px;
  line-height: 1.05;
}

.hero-name-row h1 {
  display: inline;
  margin: 0;
}

/* "Spotlight District" badge next to the district name. */
.cc-spotlight-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  position: relative;
  top: -3px;
  margin-left: 14px;
  padding: 6px 13px 4px;
  border-radius: 999px;
  background: var(--cc-blue);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.cc-spotlight-badge[hidden] {
  display: none;
}

.cc-spotlight-badge,
.cc-partner-badge {
  cursor: help;
}

.cc-spotlight-badge:focus-visible,
.cc-partner-badge:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

.cc-partner-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  position: relative;
  top: -3px;
  margin-left: 14px;
  padding: 6px 13px 4px;
  border-radius: 999px;
  background: var(--cc-graphite);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.cc-partner-badge[hidden] {
  display: none;
}

/* .band-cell is a .fact, so it sits inline with County/Locality/etc. */
.band-cell {
  justify-content: flex-start;
}

.band-select {
  margin-top: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.15;
  color: var(--cc-blue);
  background-color: var(--cc-white);
  border: 1.5px solid var(--cc-blue);
  border-radius: var(--r-pill);
  padding: 5px 30px 3px 13px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition:
    background-color 140ms,
    box-shadow 140ms,
    transform 140ms;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23003A5D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.band-select:hover {
  background-color: var(--cc-cream-deep);
  box-shadow: var(--shadow-sm);
}

.band-select:focus-visible {
  outline: 2px solid var(--cc-teal);
  outline-offset: 2px;
}

.band-select:active {
  transform: scale(0.98);
}

.band-select option:disabled {
  color: var(--fg-soft);
}

.cc-section-block {
  padding: 24px;
}

.cc-section-block h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--cc-blue);
}

.cc-section-block--column {
  display: flex;
  flex-direction: column;
}

/* Demographic blocks */
/* A <ul> for screen reader item boundaries (see renderDemographics); the list
   markers and default indent are not part of the visual design. */
.cc-demo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-demo-grid .cell {
  background: var(--cc-cream);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  min-width: 0;
}

.cc-demo-grid .cell .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--cc-rust);
  letter-spacing: -0.01em;
}

.cc-demo-grid .cell .lbl {
  font-size: 11px;
  color: var(--fg-soft);
  margin-top: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cc-demo-grid .cell.blue .num {
  color: var(--cc-blue);
}

.cc-demo-grid .cell.teal .num {
  color: var(--fg-accent);
}

.cc-demo-grid .cell.purple .num {
  color: var(--cc-purple);
}

.cc-demo-subsection {
  margin-top: 24px;
}

/* Curriculum lockup */
.cc-curric {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--cc-cream);
  border: 1px solid var(--border);
}

.cc-curric .name {
  font-weight: 600;
  color: var(--cc-blue);
  font-size: 15px;
}

/* "2025 CA List" badge on a curriculum card. */
.cc-2025-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
  padding: 2px 8px;
  border-radius: 999px;
  background: #1e7a4d;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

/* "Adopted for [window]" badge — same shape/placement as .cc-2025-badge,
   its own brand-guide gray so the two read as distinct, stackable badges. */
.cc-adopted-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
  padding: 2px 8px;
  border-radius: 999px;
  background: #585859;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

.cc-curric .pub {
  font-size: 12px;
  color: var(--fg-soft);
}

.cc-curric .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--fg-soft);
}

.cc-curric .meta-row strong {
  color: var(--fg);
  font-weight: 600;
}

.cc-curric.featured {
  border: 1.5px solid var(--cc-teal);
  background: var(--cc-white);
}

/* #piloted-curric is already a grid with its own gap; this one isn't. */
#current-curric .cc-curric + .cc-curric {
  margin-top: 10px;
}

.nearby-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.piloted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

/* ============ DISTRICT — WORKSPACE VARIATION ============ */
main.profile[data-layout='workspace'] .profile-shell {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 28px;
  padding: 0 32px 48px;
  max-width: 1640px;
  margin: 0 auto;
  align-items: start;
}

main.profile[data-layout='workspace'] .col-map {
  position: sticky;
  top: 78px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

main.profile[data-layout='workspace'] .col-map #district-map {
  height: 580px;
}

main.profile[data-layout='workspace'] .col-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

main.profile[data-layout='workspace'] .tabbar-wrap {
  display: block;
  margin-bottom: 4px;
}

/* Tab panel visibility in workspace mode is controlled entirely by JS via inline style. */
/* A tab panel with no focusable content of its own is a Tab stop (see
   syncPanelTabStops in district-view.js), so the focused panel needs a visible
   indicator like any other stop. Inset so the ring isn't clipped by the card's
   own rounded edge. --cc-teal-shade rather than --cc-teal: these panels are
   .cc-card, i.e. white, where plain teal reaches only 2.98:1 — just under the
   3:1 WCAG 1.4.11 floor for a focus indicator. The shade gives 5.1:1. */
[data-tab-panel]:focus-visible {
  outline: 3px solid var(--cc-teal-shade);
  outline-offset: -3px;
}

/* Every discrete piece of panel content is a Tab stop, because Tab only ever
   lands on focusable elements — leaving these unfocusable meant a screen
   reader driven by Tab could not read the figures at all. Each therefore needs
   a visible focus indicator. --cc-teal-shade clears 3:1 (WCAG 1.4.11) on both
   backgrounds these sit on: 5.1:1 on white, 4.9:1 on cream. */
.cc-demo-grid .cell:focus-visible,
.cc-donut-legend li:focus-visible,
.cc-driver-list li:focus-visible,
.cc-curric:focus-visible,
.cc-empty-note:focus-visible {
  outline: 2px solid var(--cc-teal-shade);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  main.profile[data-layout='workspace'] .profile-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  main.profile[data-layout='workspace'] .col-map {
    position: static;
  }
}

.cc-tabbar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--cc-cream-deep);
  border-radius: 999px;
  margin-bottom: 18px;
  width: fit-content;
}

.cc-tabbar button {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: all 140ms var(--ease-out);
}

.cc-tabbar button.active {
  background: var(--cc-white);
  color: var(--cc-blue);
  box-shadow: var(--shadow-xs);
}

/* Tab bar wrap */
.tabbar-wrap {
  padding-top: 8px;
}

@media (max-width: 720px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cc-demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nearby-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cc-tabbar {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cc-tabbar button {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ============ UTILS ============ */
.cc-divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 22px 0;
}

.cc-icon-muted {
  opacity: 0.6;
}

.crumb-sep {
  opacity: 0.5;
}

.scroll-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.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;
}

/* Loading state for map */
.cc-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-cream);
  color: var(--fg-soft);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 1;
}

/* Splash / index page */
body.splash-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.splash {
  text-align: center;
  max-width: 560px;
  padding: 32px;
}

.splash img {
  width: 80px;
  margin: 0 auto 18px;
}

.splash h1 {
  font-size: 30px;
  margin: 0 0 12px;
}

.splash p {
  color: var(--fg-soft);
  font-size: 16px;
  line-height: 1.6;
}

.splash a {
  display: inline-block;
  margin-top: 18px;
}