/* The reading sizes (docs/UI-PLAN-2026-10-15.md, section 2): the kit's own type tokens, set larger. The root stays 100%, so
   padding, gaps and tap targets (rem) do not grow with the type. Kickers keep their width with less tracking. */
:root {
  --type-body: 1.0625rem;
  --type-secondary: 1rem;
  --type-label: 0.9375rem;
  --type-meta: 0.875rem;
  --type-kicker: 0.8125rem;
  --type-title: 1.1875rem;
  --text-body--line-height: 1.55;
  --text-secondary--line-height: 1.5;
  --text-meta--line-height: 1.45;
  --text-kicker--line-height: 1.2;
}
@media (min-width: 768px) { :root { --type-body: 1.0625rem; } }
.card-title { font-size: var(--type-title); line-height: 1.3; }
.status-chip { letter-spacing: 0.1em; white-space: nowrap; }
/* (one line at every width: under a phone's, the short words end in an ellipsis; the whole line is its hover and its label) */
.status-chip:not(.p-chip) { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
[data-testid="band-title"] { letter-spacing: 0.16em; }

/* The one control the kit has no part for: the scenario slider. Drawn in the kit's
   own tokens (navy track, white thumb ringed in navy, the kit's focus ring). */
.kit-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; cursor: pointer; margin: 0; }
.kit-range::-webkit-slider-runnable-track { height: 7px; border-radius: 3px; background: var(--color-navy-200); }
.kit-range::-moz-range-track { height: 7px; border-radius: 3px; background: var(--color-navy-200); }
.kit-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6.5px; border-radius: 50%; background: #fff; border: 2px solid var(--color-navy-900); box-shadow: 0 2px 8px var(--navy-glass-shadow); }
.kit-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--color-navy-900); }
.kit-range:focus-visible { outline: none; }
.kit-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }

/* Positive palette (more green and blue, less gray). Navy stays the frame;
   data marks carry sky, teal and leaf green. Good news reads green; caution keeps the kit's rust. */
:root {
  --hue-sky: #1a86c7;
  --hue-sky-soft: #8cc8ec;
  --hue-teal: #12907f;
  --hue-green: #2f9e5b;
  --hue-leaf: #8fd0a6;
  --hue-mist: #d8ecf7;
  --hue-mint: #def3e6;
  --delta-good: #1f7f45;
}
.kit-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--hue-mist), var(--hue-mint)); }
.kit-range::-moz-range-track { background: linear-gradient(90deg, var(--hue-mist), var(--hue-mint)); }
.kit-range::-webkit-slider-thumb { border-color: var(--hue-sky); }

/* The tempo cycle, ported whole from the kit signature:
   the band's italic turn waves navy-lavender to a cream peak (12s); the headline figure tile carries the comet ring (6s). */
:root { --color-tempo-ink: #2a3560; --color-tempo-deep: #5a6aaa; --color-tempo-mid: #8a8ec8; --color-tempo-light: #a0b8dc; --color-tempo-air: #c6d6ee; }
@keyframes sunset-wave { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@property --gradient-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes border-spin { to { --gradient-angle: 360deg; } }
.text-cycle-tempo {
  background: linear-gradient(90deg, #a0b8dc 0%, #b4c6e2 15%, #c6d6ee 28%, #d6c9b2 40%, #f3e9d6 50%, #d6c9b2 60%, #c6d6ee 72%, #b4c6e2 85%, #a0b8dc 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: sunset-wave 12s linear infinite;
}
.tempo-ring { position: relative; }
.tempo-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--gradient-angle), rgba(255, 255, 255, 0.2) 0%, var(--color-tempo-ink) 10%, var(--color-tempo-deep) 19%, var(--color-tempo-mid) 28%, var(--color-tempo-light) 37%, var(--color-tempo-air) 44%, rgba(255, 255, 255, 0.2) 54%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-spin 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .text-cycle-tempo { animation: none !important; background-position: 30% 50%; }
  .tempo-ring::before { animation: none !important; --gradient-angle: 120deg; }
}

/* Kit v5 vibe: liquid glass over the district's photo, v5's chart palette, light numerals.
   Ported from the Kit v5 tokens: the frost material, blur, edge, shadow and radii, and the chart colours.
   The App Kit v1 structure stays; only the ground, the panels and the colours change. */
:root {
  --k-frost: rgba(255, 255, 255, 0.58);
  --k-frost-edge: rgba(255, 255, 255, 0.6);
  --k-frost-solid: rgba(250, 250, 252, 0.95);
  --k-blur: blur(34px) saturate(1.9);
  --k-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -22px rgba(0, 0, 0, 0.28);
  --k-r-tile: 22px;
  /* v5 chart palette, mapped onto the explorer's hue names */
  --hue-sky: #4f8df5;
  --hue-sky-soft: #a9c6fa;
  --hue-teal: #b07cf0;
  --hue-green: #2fae7d;
  --hue-leaf: #8fdcbc;
  --hue-amber: #f2a93b;
  --hue-coral: #ef6b5b;
  --hue-mist: #dbe8fd;
  --hue-mint: #d7f3e6;
  --delta-bad: #d9533f;
}
/* the ground: a daylight photo (kit/scenes), blurred and washed bright, behind the work area */
#work { position: relative; isolation: isolate; overflow: clip; }
#work::before { content: ""; position: absolute; inset: 0; overflow: hidden; z-index: -2; background: url("kit/scenes/scene-02.webp") center / cover no-repeat; filter: blur(30px) saturate(1.3) brightness(1.06); transform: scale(1.12); }
#work::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 85% 0%, rgba(214, 233, 255, 0.55), transparent 60%), radial-gradient(110% 80% at 0% 100%, rgba(212, 243, 226, 0.55), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(246, 249, 252, 0.62)); }
/* the panels: v5 frost */
#work .card-chart, #work .card-glass, #work .card {
  background: var(--k-frost); border: 1px solid var(--k-frost-edge); box-shadow: var(--k-glass-shadow);
  backdrop-filter: var(--k-blur); -webkit-backdrop-filter: var(--k-blur); border-radius: var(--k-r-tile);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #work .card-chart, #work .card-glass, #work .card { background: var(--k-frost-solid); } }
/* hairlines inside frost read as light, not grey */
#work .card-chart .border-navy-100 { border-color: rgba(17, 19, 22, 0.08); }
/* v5 numerals: light weight, larger, ink */
#work .kpi-figure { font-weight: 300; letter-spacing: -0.03em; font-size: clamp(2.25rem, 3.2vw, 3rem); }
#work .kpi-figure[data-flag="true"] { color: var(--hue-coral) !important; }
/* pills: white on frost, the chosen one dark (v5 controls) */
#work .chip { border-radius: 999px; }
@media print { #work::before, #work::after { display: none; } #work .card-chart, #work .card-glass, #work .card { background: #fff; backdrop-filter: none; box-shadow: none; } }

/* Hover: the frost clears toward white and lifts a touch. Quick in, slow out (~280ms exit). */
#work .card-chart, #work .card-glass, #work .card {
  transition: background-color 420ms ease, box-shadow 420ms ease, transform 420ms ease, border-color 420ms ease;
}
@media (hover: hover) and (pointer: fine) {
  #work .card-chart:hover, #work .card-glass:hover, #work .card:hover {
    background: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.05), 0 24px 48px -24px rgba(0, 0, 0, 0.32);
    transition-duration: 180ms;
  }
  #work .card-glass:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { #work .card-chart, #work .card-glass, #work .card { transition: none; } #work .card-glass:hover { transform: none; } }

/* The compact list toolbar's one quiet row (kit-list.js compact): the facet as segments, one on at a time, each with its count. */
.segs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(17, 19, 22, 0.04); }
.seg { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-size: var(--type-meta); color: var(--color-navy-700); cursor: pointer; white-space: nowrap; transition: background-color 420ms ease, color 420ms ease, box-shadow 420ms ease; }
.seg:hover { color: var(--color-navy-900); transition-duration: 150ms; }
.seg:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.seg[aria-checked="true"] { background: #fff; color: var(--color-navy-900); box-shadow: 0 1px 3px rgba(17, 19, 22, 0.14); transition-duration: 150ms; }
.seg-n { font-variant-numeric: tabular-nums; color: var(--color-navy-500); }
@media (max-width: 639px) { .segs { border-radius: 16px; } }

/* Lists (the white toolbar slab looked rough): the toolbar and its rows are one frost sheet,
   the toolbar a lighter frost of the same sheet so it still reads when it sticks over scrolled rows. */
#work .review-sheet {
  background: var(--k-frost); border: 1px solid var(--k-frost-edge); box-shadow: var(--k-glass-shadow);
  backdrop-filter: var(--k-blur); -webkit-backdrop-filter: var(--k-blur); border-radius: var(--k-r-tile);
  padding: 0 20px 10px;
}
/* The toolbar is not the navigation layer, so it is solid, never glass: nothing scrolled under it reads through. It sticks
   flush to the top where there is no page header (desktop) and under the phone's header while that header shows. */
:root { --toolbar-top: 61px; }
@media (min-width: 768px) { :root { --toolbar-top: 0px; } }
body:has(header.sticky.top-0.z-30[data-hidden="1"]) { --toolbar-top: 0px; }
#work .review-sheet [data-testid="review-toolbar"] {
  margin: 0 -20px; padding: 6px 20px 0; border-radius: var(--k-r-tile) var(--k-r-tile) 0 0;
  background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(17, 19, 22, 0.08);
  transition: top 380ms cubic-bezier(.2, .8, .2, 1), border-radius 200ms ease, box-shadow 280ms ease;
}
#work .review-sheet [data-testid="review-toolbar"].is-stuck { border-radius: 0; box-shadow: 0 10px 24px -18px rgba(17, 19, 22, 0.35); }
@media (prefers-reduced-motion: reduce) { #work .review-sheet [data-testid="review-toolbar"] { transition: none; } }
#work .review-sheet .border-navy-100 { border-color: rgba(17, 19, 22, 0.08); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #work .review-sheet { background: var(--k-frost-solid); } }

/* The sticky page header ("should be more like glass"): v5 bar frost, never a white slab. */
header.sticky.top-0.z-30 {
  background: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 -1px 0 rgba(17, 19, 22, 0.05);
}

/* ---------------------------------------------------------------- the Presentation
   The deck in the explorer's own register: the sidebar and header tuck away, #work fills the
   screen over the same blurred district ground, and each slide is v5 frost panels with generous air. */
body.presenting { overflow: hidden; }
body.presenting [data-testid="sidebar"], body.presenting [data-testid="workspace"] > header, body.presenting [data-testid="mobile-nav"] { display: none !important; }
body.presenting [data-testid="workspace"] { overflow: hidden !important; }
body.presenting #work { padding: 0 !important; height: 100dvh; min-height: 100dvh; flex: none; }
.present { position: relative; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--color-navy-900); }
.present-rail, .present-foot { position: relative; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 16px clamp(18px, 3.6vw, 56px); }
.present-rail { justify-content: space-between; }
.present-mark { display: flex; align-items: center; gap: 12px; min-width: 0; font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-navy-700); }
.present-mark img { height: 40px; width: auto; }
.present-mark span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.present-actions { display: flex; gap: 8px; flex-shrink: 0; }
.p-ctl { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--k-frost-edge); background: var(--k-frost); backdrop-filter: var(--k-blur); -webkit-backdrop-filter: var(--k-blur); color: var(--color-navy-800); font-size: var(--type-secondary); cursor: pointer; transition: background-color 420ms ease; }
.p-ctl:hover { background: rgba(255, 255, 255, 0.92); transition-duration: 180ms; }
.p-ctl:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.p-ctl-round { width: 40px; padding: 0; justify-content: center; }
.present-foot { justify-content: center; }
.p-dots { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; }
.p-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(7, 37, 59, 0.22); cursor: pointer; transition: width 320ms cubic-bezier(.2, .8, .2, 1), background-color 320ms ease; }
.p-dot:hover { background: rgba(7, 37, 59, 0.45); }
.p-dot.is-on { width: 26px; background: var(--hue-sky); }
.p-count { min-width: 4.5em; text-align: center; font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 600; letter-spacing: 0.14em; color: var(--color-navy-700); font-variant-numeric: tabular-nums; }
.present[data-photo] .present-mark, .present[data-photo] .p-count { color: rgba(255, 255, 255, 0.86); }
.present[data-photo] .p-dot { background: rgba(255, 255, 255, 0.4); }
.present[data-photo] .p-dot.is-on { background: #fff; }

.present-stage { position: relative; min-height: 0; outline: none; }
.pslide { position: absolute; inset: 0; display: none; overflow-y: auto; overscroll-behavior: contain; padding: clamp(8px, 1.6vh, 20px) clamp(18px, 3.6vw, 56px) clamp(12px, 2vh, 24px); }
.pslide.is-on { display: flex; flex-direction: column; }
.pslide-inner { width: 100%; max-width: 1440px; margin: auto; }
.pslide--photo { position: fixed; inset: 0; padding: 96px clamp(24px, 5vw, 88px) 88px; z-index: 0; }
.p-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-photo-wash { position: absolute; inset: 0; }
.p-wash-left { background: linear-gradient(90deg, rgba(7, 37, 59, 0.94) 0%, rgba(7, 37, 59, 0.84) 34%, rgba(7, 37, 59, 0.35) 54%, rgba(7, 37, 59, 0) 68%); }
.p-wash-right { background: linear-gradient(270deg, rgba(7, 37, 59, 0.94) 0%, rgba(7, 37, 59, 0.84) 34%, rgba(7, 37, 59, 0.35) 54%, rgba(7, 37, 59, 0) 68%); }
.pslide--photo .pslide-inner { position: relative; z-index: 1; margin: auto 0; max-width: none; }
.p-side-right { display: flex; justify-content: flex-end; }
.p-photo-copy { max-width: min(36rem, 46vw); color: #fff; }
.p-eyebrow-light { color: rgba(255, 255, 255, 0.72) !important; }
.p-cover-title { margin-top: 18px; font-weight: 300; font-size: clamp(2.4rem, 4.4vw, 4.4rem); line-height: 1.06; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.p-cover-title .turn { display: block; margin-top: 10px; font-size: 0.82em; line-height: 1.15; }
.p-cover-lede { margin-top: 22px; font-weight: 300; font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.5; color: rgba(255, 255, 255, 0.86); max-width: 32rem; }
.p-chip { margin-top: 28px; }
.p-photo-source { margin-top: 18px; font-size: var(--type-meta); color: rgba(255, 255, 255, 0.62); }
.p-close-cta { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; font-size: var(--type-body); cursor: pointer; transition: background-color 420ms ease; }
.p-close-cta:hover { background: rgba(255, 255, 255, 0.26); transition-duration: 180ms; }

/* the type: one kicker, one light headline with the tempo turn, one lede */
.p-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-navy-600); }
.p-type { font-weight: 500; letter-spacing: 0.16em; color: var(--hue-sky); }
.p-headline { margin-top: 12px; max-width: 30ch; font-weight: 300; font-size: clamp(1.9rem, 3.2vw, 3.15rem); line-height: 1.1; letter-spacing: -0.018em; color: var(--color-navy-900); text-wrap: balance; }
.p-turn {
  background: linear-gradient(90deg, #2a3560 0%, #3d4a86 18%, #5a6aaa 34%, #7f7fc4 50%, #5a6aaa 66%, #3d4a86 82%, #2a3560 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: sunset-wave 12s linear infinite;
}
.p-lede { margin-top: 14px; max-width: 62ch; font-weight: 300; font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.55; color: var(--color-navy-700); }
@media (prefers-reduced-motion: reduce) { .p-turn { animation: none !important; background-position: 30% 50%; } }

/* the panels and their pieces */
.p-grid { display: grid; gap: clamp(14px, 1.4vw, 22px); margin-top: clamp(18px, 3vh, 34px); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 1024px) {
  .p-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .p-grid.wide-left { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
#work .p-panel { padding: clamp(20px, 2.2vw, 34px); min-width: 0; }
.p-list { margin-top: clamp(18px, 3vh, 34px); }
.p-grid .p-list { margin-top: 0; }
.p-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; }
.p-panel-title { font-family: var(--font-heading); font-size: var(--type-body); font-weight: 600; color: var(--color-navy-900); margin-bottom: 14px; }
.p-panel-head .p-panel-title { margin-bottom: 0; }
.p-panel-count { font-size: var(--type-meta); color: var(--color-navy-600); }
.p-type-in { display: block; margin-bottom: 8px; font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-navy-600); }
.p-figure { font-family: var(--font-heading); font-weight: 300; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--color-navy-900); line-height: 0.95; }
.p-figure-hero { display: block; font-size: clamp(5rem, 11vw, 10rem); }
.p-figure-big { display: block; margin-top: 6px; font-size: clamp(3rem, 5vw, 4.6rem); }
.p-figure-meta { display: block; font-size: clamp(1.8rem, 2.4vw, 2.5rem); }
.p-figure-stat { display: block; font-size: clamp(2.2rem, 3.2vw, 3.2rem); }
.p-hero-caption { margin-top: 10px; font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.25; color: var(--color-navy-900); }
.p-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: clamp(20px, 3vh, 32px); border-top: 1px solid rgba(17, 19, 22, 0.08); }
.p-rail-cell { padding: 16px 18px 4px; border-left: 1px solid rgba(17, 19, 22, 0.08); }
.p-rail-cell:first-child { padding-left: 0; border-left: 0; }
.p-rail-label { display: block; margin-top: 8px; font-size: var(--type-meta); line-height: 1.4; color: var(--color-navy-700); }
.p-stats { display: flex; flex-direction: column; gap: 0; }
.p-stat { padding: 16px 0; border-top: 1px solid rgba(17, 19, 22, 0.08); }
.p-stat:first-child { border-top: 0; padding-top: 0; }
.p-outs { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); }
.p-outs .p-stat:first-child { border-top: 1px solid rgba(17, 19, 22, 0.08); padding-top: 16px; }
.p-read { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(17, 19, 22, 0.08); font-size: var(--type-secondary); line-height: 1.6; color: var(--color-navy-700); }
.p-read b { display: block; margin-bottom: 4px; font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-navy-600); }
.p-note { margin-top: 14px; font-size: var(--type-meta); line-height: 1.5; color: var(--color-navy-600); }
.p-source { margin-top: 16px; font-size: var(--type-meta); line-height: 1.5; color: var(--color-navy-600); }
.p-hero .p-source { margin-top: 18px; }

/* Review-style hairline rows */
.p-rows { list-style: none; margin: 0; padding: 0; }
.p-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: baseline; gap: 6px 24px; padding: 18px 10px; margin: 0 -10px; border-top: 1px solid rgba(17, 19, 22, 0.08); border-radius: 10px; transition: background-color 420ms ease, opacity 200ms ease; }
.p-row:first-child { border-top: 0; }
.p-row-go { cursor: pointer; }
.p-row-go:hover, .p-row-go:focus-visible { background: rgba(255, 255, 255, 0.6); transition-duration: 180ms; outline: none; }
.p-row-index { font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 600; letter-spacing: 0.14em; color: var(--hue-sky); }
.p-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: 2; }
.p-row:not(:has(.p-row-index)) .p-row-main { grid-column: 1 / 3; }
.p-row-step { font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hue-sky); }
.p-row-title { font-size: clamp(1.05rem, 1.3vw, 1.3rem); font-weight: 400; color: var(--color-navy-900); }
.p-row-note { font-size: var(--type-secondary); line-height: 1.55; color: var(--color-navy-700); max-width: 70ch; }
.p-row-amount { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.4rem, 2vw, 2rem); letter-spacing: -0.02em; color: var(--color-navy-900); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-row-when { min-width: 7.5rem; text-align: right; font-size: var(--type-meta); color: var(--color-navy-600); }
.p-fig-strong { font-weight: 700; color: var(--color-navy-900); }
.p-fig { border-radius: 4px; transition: background-color 180ms ease; cursor: default; }
.p-fig.fig-link { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .p-fig:hover { background: rgba(79, 141, 245, 0.12); } }

/* the year ahead */
.p-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px; position: relative; }
.p-timeline::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px; background: rgba(17, 19, 22, 0.14); }
.p-stop { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px 8px 6px 0; border-radius: 10px; transition: background-color 420ms ease, opacity 200ms ease; }
.p-stop-dot { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 999px; background: #fff; border: 2px solid var(--hue-sky-soft); }
.p-stop.is-now .p-stop-dot { background: var(--hue-sky); border-color: var(--hue-sky); }
.p-stop.is-focus .p-stop-dot { background: var(--hue-teal); border-color: var(--hue-teal); box-shadow: 0 0 0 5px rgba(176, 124, 240, 0.18); }
.p-stop-when { font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hue-sky); }
.p-stop.is-focus .p-stop-when { color: var(--hue-teal); }
.p-stop-what { font-size: clamp(1.05rem, 1.25vw, 1.25rem); color: var(--color-navy-900); }
.p-stop-note { font-size: var(--type-secondary); line-height: 1.55; color: var(--color-navy-700); }

/* the divider */
.pslide--divider .pslide-inner { max-width: 60rem; }
#work .p-divider { padding: clamp(32px, 5vw, 72px); }
.p-divider-rule { width: 56px; height: 2px; margin: 22px 0; background: var(--hue-sky); border-radius: 2px; }
.p-divider-title { font-weight: 300; font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--color-navy-900); }

/* the presenter: 1 to 9 hold one mark, the rest stand back */
.present.is-marking [data-pmark]:not(.is-mark) { opacity: 0.42; }
.present .is-mark { background: rgba(79, 141, 245, 0.1); }
.present .p-rail-cell.is-mark, .present .p-stat.is-mark { background: transparent; }
.present .is-mark .p-figure, .present .is-mark .p-row-amount, .present .is-mark .p-stop-what { color: var(--hue-sky); }
.p-tip { position: fixed; z-index: 70; pointer-events: none; opacity: 0; transition: opacity 280ms ease-in-out; }
.p-tip.is-on { opacity: 1; transition-duration: 150ms; }

/* the slide index */
.p-index { list-style: none; margin: 0; padding: 0; }
.p-index-row { display: flex; width: 100%; align-items: baseline; gap: 18px; padding: 14px 10px; border-top: 1px solid var(--color-navy-100); text-align: left; cursor: pointer; border-radius: 3px; }
.p-index-row.is-on .p-index-title { font-weight: 700; }
.p-index-n { font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 600; letter-spacing: 0.14em; color: var(--hue-sky); }
.p-index-title { font-size: var(--type-body); color: var(--color-navy-900); }

/* a phone: the slide stacks and scrolls inside itself; a sideways swipe turns it */
@media (max-width: 767px) {
  .present-rail, .present-foot { padding: 12px 16px; }
  .present-mark span, .p-ctl-word { display: none; }
  .p-ctl { padding: 0 11px; }
  .p-dots { gap: 5px; }
  .p-dot { width: 6px; height: 6px; }
  .p-dot.is-on { width: 18px; }
  .pslide { padding: 6px 16px 18px; }
  .pslide-inner { margin: 0 auto; }
  .pslide--photo { padding: 80px 22px 76px; }
  .p-wash-left, .p-wash-right { background: linear-gradient(0deg, rgba(7, 37, 59, 0.95) 0%, rgba(7, 37, 59, 0.86) 52%, rgba(7, 37, 59, 0.3) 78%, rgba(7, 37, 59, 0.12) 100%); }
  .pslide--photo .pslide-inner { margin: auto 0 0; }
  .p-side-right { justify-content: flex-start; }
  .p-photo-copy { max-width: none; }
  .p-row { grid-template-columns: minmax(0, 1fr) auto; }
  .p-row-index { grid-column: 1 / -1; }
  .p-row-main, .p-row:not(:has(.p-row-index)) .p-row-main { grid-column: 1 / -1; }
  .p-row-amount { text-align: left; }
  .p-row-when { min-width: 0; }
  .p-timeline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .p-timeline::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .p-stop { padding: 0 0 22px 30px; }
  .p-rail-cell { padding: 14px 0 4px; border-left: 0; border-top: 1px solid rgba(17, 19, 22, 0.08); }
  .p-rail-cell:first-child { border-top: 0; }
  .p-rail { grid-template-columns: minmax(0, 1fr); }
}

/* Header: more opaque frost and the hide-on-scroll-down motion (header-auto.js). */
header.sticky.top-0.z-30 {
  background: rgba(255, 255, 255, 0.8) !important;
  transition: transform 380ms cubic-bezier(.2, .8, .2, 1), background-color 300ms ease !important;
  will-change: transform;
}
header.sticky.top-0.z-30[data-hidden="1"] { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { header.sticky.top-0.z-30 { transition: none !important; } }
/* Present mode's chrome wears the same bar frost as the page header. */
.present-rail, .present-foot { background: rgba(255, 255, 255, 0.42); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); }
.present-rail { border-bottom: 1px solid rgba(255, 255, 255, 0.55); box-shadow: inset 0 -1px 0 rgba(17, 19, 22, 0.05); }
.present-foot { border-top: 1px solid rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(17, 19, 22, 0.05); }
.present[data-photo] .present-rail, .present[data-photo] .present-foot { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); box-shadow: none; }
.present-rail .p-ctl, .present-foot .p-ctl { background: rgba(255, 255, 255, 0.55); }
/* the presentation, second pass: the three moves as three panels, quiet hooks for the chart and control panels */
@media (min-width: 1024px) { .p-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#work .p-move { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.p-move-figure { margin-top: 10px; }
.p-move-title { margin-top: 6px; font-size: clamp(1.1rem, 1.35vw, 1.35rem); color: var(--color-navy-900); }
.p-move-go { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--type-meta); color: var(--hue-sky); }
.p-chart, .p-control { display: flex; flex-direction: column; }
.p-side-left { display: block; }
.p-eyebrow > span:first-child { white-space: nowrap; }
@media (max-width: 767px) { .p-eyebrow > span:first-child { white-space: normal; } .p-close-cta { height: auto; min-height: 46px; padding: 10px 18px; text-align: left; } }

/* Desktop: no header bar; Search lives at the top of the sidebar. Phones keep the bar. */
@media (min-width: 768px) { header.sticky.top-0.z-30 { display: none !important; } }
.side-search {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 9px 12px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.78); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer;
  transition: background-color 420ms ease, border-color 420ms ease, color 420ms ease;
}
.side-search:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.24); color: #fff; transition-duration: 160ms; }
.side-search:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
.side-search svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.side-search span { flex: 1; }
.side-search kbd { font: 500 0.72rem/1 ui-monospace, Menlo, monospace; padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); }
@media (max-width: 767px) { .side-search { display: none; } }

/* Classroom impact: the four tiers as one proportional strip, v5 palette by meaning */
.tier-strip { display: flex; gap: 3px; height: 46px; border-radius: 14px; overflow: hidden; }
.tier-seg { min-width: 6px; border: 0; padding: 0; cursor: pointer; transition: opacity 420ms ease, filter 420ms ease; }
.tier-strip:hover .tier-seg:not(:hover) { opacity: 0.55; transition-duration: 180ms; }
.tier-seg[aria-pressed="true"] { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.92); }
.tier-seg:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--color-navy-900); }
.tier-legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 6px 18px; }
.tier-key { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; width: 100%; padding: 10px; margin: 0 -10px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; transition: background-color 420ms ease; }
.tier-key:hover, .tier-key.is-on { background: rgba(255, 255, 255, 0.6); transition-duration: 180ms; }
.tier-swatch { width: 11px; height: 11px; border-radius: 4px; align-self: center; }
.tier-name { font-size: var(--type-secondary); color: var(--color-navy-800); }
.tier-val { font-family: var(--font-heading); font-weight: 300; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--color-navy-900); font-variant-numeric: tabular-nums; }
.tier-share { grid-column: 2 / 4; font-size: var(--type-meta); color: var(--color-navy-600); }
.impact-notes { list-style: none; margin: 0; padding: 0; }
.impact-notes li { padding: 12px 0; border-top: 1px solid rgba(17, 19, 22, 0.08); font-size: var(--type-secondary); line-height: 1.6; color: var(--color-navy-700); }
.impact-notes li:first-child { border-top: 0; padding-top: 0; }
.tier { display: block; }
.tier-legend { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* ---------------------------------------------------------------- the sign-in gate
   The page band at full height, as the kit's sign-in cover stands: the words bottom-left on the photo,
   the district mark on its white plate, and the Google button on night glass. */
.gate { min-height: 100dvh; background: var(--color-navy-900); }
.gate > div { margin: 0; }
.gate [data-testid="page-band"] { min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; }
.gate .band-copy { width: 100%; max-width: 40rem; }
.gate-mark { display: inline-flex; align-items: center; margin-bottom: 1.5rem; }
.gate-mark img { display: block; height: 3rem; width: auto; }
.gate-card { margin-top: 2rem; max-width: 28rem; padding: 1.25rem; border-radius: 3px; }
.gate-kicker { margin: 0 0 0.75rem; font-family: var(--font-heading); font-size: var(--text-kicker); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); }
.gate-gsi { min-height: 44px; }
.gate-gsi[hidden], .gate-line[hidden], .gate-retry[hidden] { display: none; }
.gate-line { margin: 0.75rem 0 0; font-size: var(--text-secondary); line-height: 1.5; color: #fff; }
.gate-line[role="alert"] { padding: 0.75rem 1rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 3px; background: rgba(255, 255, 255, 0.05); }
.gate-retry { margin-top: 0.75rem; cursor: pointer; border: 0; border-radius: 3px; background: #fff; padding: 0.75rem 1.25rem; font-family: var(--font-heading); font-size: var(--text-kicker); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-navy-900); }
.gate-retry:hover { background: rgba(255, 255, 255, 0.9); }

/* Classroom impact · key insights: four reads, each a button that opens its lines */
.impact-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; }
.impact-insight { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; cursor: pointer;
  padding: 18px 18px 16px; border-radius: 6px; border: 1px solid rgba(17, 19, 22, 0.08); background: rgba(255, 255, 255, 0.5);
  transition: background-color .28s ease, border-color .28s ease, transform .28s ease; }
.impact-insight:hover { background: #fff; border-color: rgba(17, 19, 22, 0.16); transform: translateY(-1px); }
.impact-insight:focus-visible { outline: 2px solid var(--hue-sky); outline-offset: 2px; }
.impact-insight b { font-size: 1.75rem; line-height: 1; color: var(--color-navy-900); }
.impact-insight-head { font-size: var(--type-secondary); font-weight: 600; color: var(--color-navy-900); line-height: 1.35; }
.impact-insight-body { font-size: var(--type-meta, 0.8125rem); line-height: 1.55; color: var(--color-navy-700); }

/* How it's calculated (trace.js): the formula in words, then each input with its value, document and where. Shared by
   the figure sheet and the deck's speaker notes. */
.trace { margin-top: 1.5rem; }
.trace-title { margin-bottom: 0.375rem; }
.trace-words, .trace-from { margin: 0 0 0.5rem; max-width: 80ch; font-size: var(--type-secondary); line-height: 1.5; color: var(--color-navy-800); }
.trace-sub { margin: 1.25rem 0 0.375rem; font-family: var(--font-heading); font-size: var(--type-label); font-weight: 500; color: var(--color-navy-700); }
.trace-rows { list-style: none; margin: 0; padding: 0; }
.trace-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.125rem; align-items: baseline; padding: 0.625rem 0; border-top: 1px solid var(--color-navy-100); }
.trace-label { font-size: var(--type-secondary); line-height: 1.4; color: var(--color-navy-900); }
.trace-value { justify-self: end; white-space: nowrap; font-size: var(--type-secondary); font-weight: 500; color: var(--color-navy-900); font-variant-numeric: tabular-nums; }
.trace-at { grid-column: 1 / -1; font-size: var(--type-meta); line-height: 1.4; color: var(--quiet); }
/* a value that is itself a figure opens that figure's receipt (trace.js valueOf): the number as it was, with the mark */
.trace-fig { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 3px; }
.trace-fig b { font-weight: inherit; }
.trace-fig:focus-visible { outline: 2px solid var(--hue-sky); outline-offset: 2px; }

/* The receipt around the trace (trace.js): its sources, each public one a link that opens the document (at the page), the
   date each was checked, and "Easy to misread" where the record shows a risk. */
.receipt-sources { margin-top: 0.25rem; }
.receipt-link { color: var(--color-navy-900); text-decoration: underline; text-decoration-color: var(--color-navy-200, rgba(30, 42, 74, 0.25)); text-underline-offset: 0.18em; transition: text-decoration-color 180ms ease; }
.receipt-link:hover, .receipt-link:focus-visible { text-decoration-color: var(--hue-sky); }
.trace-at .receipt-link { color: inherit; }
.receipt-link-icon { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.3em; vertical-align: -0.05em; opacity: 0.7; }
.receipt-kind { font-weight: 400; color: var(--quiet); }
.receipt-misread { margin: 1.25rem 0 0; padding: 0.625rem 0 0; border-top: 1px solid var(--color-navy-100); max-width: 80ch; font-size: var(--type-secondary); line-height: 1.5; color: var(--color-navy-800); }
.receipt-misread b { font-weight: 600; color: var(--color-navy-900); }

/* A receipt's parts (trace.js): the figure's note said first, the facts (sources, the arithmetic), then the misread line and
   the way to the Sources page. On a wide sheet with no chart beside it (.is-split), the words sit on the left at a reading
   width and the facts on the right, so the sheet's width is used and nothing is said twice. A figure read straight from a
   document says so once, under its source row (.receipt-read). */
.receipt { display: flex; flex-direction: column; }
.sheet .receipt:not(.is-split) { max-width: 60rem; }
.receipt-lede { margin: 0 0 1.75rem; max-width: 72ch; font-size: var(--type-body); line-height: 1.65; color: var(--color-navy-800); }
.receipt-facts > .trace { margin-top: 2rem; }
.receipt-read { margin: 0.625rem 0 0; font-size: var(--type-meta); line-height: 1.5; color: var(--color-navy-600); }
@media (min-width: 1024px) {
  .sheet .receipt.is-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
  .sheet .receipt.is-split > .receipt-lede { grid-column: 1; grid-row: 1; }
  .sheet .receipt.is-split > .receipt-after { grid-column: 1; grid-row: 2; }
  .sheet .receipt.is-split > .receipt-facts { grid-column: 2; grid-row: 1 / span 2; }
  .sheet .receipt.is-split > .receipt-after > .receipt-misread:first-child { margin-top: 0; }
}

/* Sheets (kit.js openSheet): about 90vw by 88vh; a fixed header with the record's title in the display face, its number in
   light numerals and its year beside it; a body that scrolls, in two columns when wide (the record and its receipt, and a
   chart of the slice or the facts beside the words), one column on a phone; the footer line. Hairline rows inside, no boxes
   and no uppercase labels. */
.sheet-title { margin: 0; max-width: 56ch; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--color-navy-900); text-wrap: balance; }
.sheet-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0 0; }
.sheet-fig b { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-navy-900); font-variant-numeric: tabular-nums; }
.sheet-fig small { font-size: var(--type-meta); line-height: 1.4; color: var(--quiet); }
.sheet-under { display: block; margin-top: 6px; font-size: var(--type-meta); line-height: 1.4; color: var(--quiet); }
/* a figure in the header that opens its receipt keeps the header's own type; the big number's mark takes its own room, so
   it never sits on the line beside it */
.sheet-fig > b .opt-fig b, .sheet-fig small b, .sheet-under b { font: inherit; letter-spacing: inherit; color: inherit; }
.sheet-fig > b .fig-info { width: calc(var(--fi) + var(--fi-gap) + 0.04em); }
.sheet-read { margin: 10px 0 0; max-width: 90ch; font-size: var(--type-secondary); line-height: 1.5; color: var(--color-navy-700); }
.sheet-measure { max-width: 60rem; }
.sheet-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) { .sheet-cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 64px; } }
.sheet-main > :first-child > section.mt-6:first-child { margin-top: 0; }
.sheet-note { margin: 4px 0 14px; max-width: 72ch; font-size: var(--type-meta); line-height: 1.5; color: var(--color-navy-600); }
.sheet-aside .label { margin-bottom: 0.25rem; }
.sheet-aside .peers { margin-top: 10px; }

.src-rows { margin: 0; padding: 0; list-style: none; }
.src-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(17, 19, 22, 0.08); font-size: var(--type-secondary); line-height: 1.45; color: var(--color-navy-900); }
.src-row small { font-size: var(--type-meta); color: var(--color-navy-500); }

/* An S/C line's facts (explore.js openLine): a word on the left, the value on the right, hairline rows; a blank field is named
   once in the quiet line under them. */
.fact-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(17, 19, 22, 0.08); }
.fact-row { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); gap: 2px 24px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(17, 19, 22, 0.08); }
.fact-k { font-size: var(--type-secondary); color: var(--color-navy-600); }
.fact-v { font-size: var(--type-secondary); line-height: 1.5; color: var(--color-navy-900); }
.fact-v small { display: block; margin-top: 2px; font-size: var(--type-meta); color: var(--color-navy-500); }
.fact-missing { margin: 10px 0 0; font-size: var(--type-meta); line-height: 1.5; color: var(--color-navy-500); }
@media (max-width: 639px) { .fact-row { grid-template-columns: minmax(5.5rem, 6.5rem) minmax(0, 1fr); gap: 2px 14px; } }

/* A number that opens its receipt (kit.js markReceipt): a pointer, the kit's focus ring, and a small faint info icon right
   after the number, aria-hidden (the opener's aria-label ends "How it's calculated"). The icon never moves layout: it is a
   zero-size box on the number's baseline with the icon drawn from it, top at the number's cap height. A number that ends
   its line (.fig-end, a slide's figure, a row's amount) lets the icon hang past it; a number inside running text gives the
   icon its own room so it never sits on the next word. Size: half the cap height on big figures (never past 1.6rem on a slide's hero), near the text size inline; a hairline stroke.
   Where a pointer can hover (a mouse or trackpad), the icon is drawn but unseen (opacity 0, its room kept, nothing reflows)
   until its card is hovered: the nearest card, panel, tile, finding, slide or sheet around it (.card, .p-panel,
   .card-glass, .ki-find, .pslide, a dialog). It then shows faint (0.35, 0.25 on a slide), and 0.8 when the number itself is
   hovered. An icon shows only while every card around it is hovered, so hovering one panel on a slide shows that panel's
   icons, not the whole slide's. On touch, with no hover to reveal it, it stays faint at rest. Keyboard focus on a number
   always shows its icon at 0.8. Quick in and slow out (the kit's 150/280ms). */
.fig-link { cursor: pointer; }
.fig-info { --fi: min(0.75em, max(0.42em, 0.7rem), 1.6rem); --fi-gap: min(0.16em, 8px); --fi-o: 0.35;
  position: relative; display: inline-block; width: calc(var(--fi) + var(--fi-gap) + 0.04em); height: 0; vertical-align: baseline;
  opacity: var(--fi-o); transition: opacity var(--exit-ms, 280ms) var(--exit-ease, ease-in-out); }
.fig-info .fig-info-icon { position: absolute; left: var(--fi-gap); bottom: calc(0.7em - var(--fi) * 0.917); width: var(--fi); height: var(--fi);
  stroke-width: clamp(1px, calc(var(--fi) * 0.075), 1.6px); }
.fig-info .fig-info-icon * { vector-effect: non-scaling-stroke; }
.fig-end > .fig-info, .ki-fig > .fig-info, .p-figure .fig-info, .p-row-amount .fig-info, .t-key-val .fig-info, .t-pot-val .fig-info, .t-res-val .fig-info { width: 0; }
.present .fig-info { --fi-o: 0.25; }
/* no room beside a long number at the edge of its card (kit.js fitOne): the icon tucks above the number's last figure */
.fig-info.is-tight .fig-info-icon { transform: translate(calc(-100% - var(--fi-gap)), -100%); }
@media (hover: hover) and (pointer: fine) {
  .fig-info { opacity: 0; }
  :is(.card, .p-panel, .card-glass, .ki-find, .st-block, .pslide, [role="dialog"]):hover .fig-info { opacity: var(--fi-o); transition-duration: var(--enter-ms, 150ms); }
  :is(.card, .p-panel, .card-glass, .ki-find, .st-block, .pslide, [role="dialog"]):not(:hover) .fig-info { opacity: 0; transition-duration: var(--exit-ms, 280ms); }
  .fig-link:hover .fig-info { opacity: 0.8; transition-duration: var(--enter-ms, 150ms); }
}
[data-receipt]:focus-visible .fig-info { opacity: 0.8; transition-duration: var(--enter-ms, 150ms); }
/* A number inside running text (.fig-prose: a sentence of the story, a slide's lede or read, an option's paragraph) shows its
   mark only while that number itself is hovered or focused, never with its card, slide or sheet, and stays hidden on touch,
   where the number is still tapped to open its receipt. Tiles, rows and table cells keep the card's faint reveal. */
.fig-prose > .fig-info { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  :is(.card, .p-panel, .card-glass, .ki-find, .st-block, .pslide, [role="dialog"]):hover .fig-prose > .fig-info { opacity: 0; transition-duration: var(--exit-ms, 280ms); }
  :is(.card, .p-panel, .card-glass, .ki-find, .st-block, .pslide, [role="dialog"]) .fig-prose:hover > .fig-info, .fig-prose:hover > .fig-info { opacity: 0.8; transition-duration: var(--enter-ms, 150ms); }
}
[data-receipt]:focus-visible .fig-prose > .fig-info, .fig-prose[data-receipt]:focus-visible > .fig-info { opacity: 0.8; transition-duration: var(--enter-ms, 150ms); }
@media (prefers-reduced-motion: reduce) { .fig-info { transition: none; } }
[data-receipt] { cursor: pointer; }

/* LCAP goals and results: each goal's dollars on the left, its latest results on the right (stacked on a phone). */
.lcap-goal-host { container-type: inline-size; }
.lcap-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@container (min-width: 760px) { .lcap-side { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 44px; } }
.lcap-figure { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: calc(100% + 8px); margin: -4px; padding: 4px; border: 0; border-radius: 3px; background: transparent; text-align: left; cursor: pointer; }
.lcap-figure b { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.2rem, 3vw, 3rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-navy-900); font-variant-numeric: tabular-nums; }
.lcap-figure small { font-size: var(--type-secondary); line-height: 1.45; color: var(--color-navy-700); }
.lcap-share { margin-top: 14px; height: 8px; border-radius: 999px; background: var(--color-navy-100); overflow: hidden; }
.lcap-share span { display: block; height: 100%; border-radius: 999px; background: var(--hue-sky); }
/* the goals' strip draws every segment at its true width (a 1px floor, not the classroom strip's 6px) */
[data-testid="lcap-strip"] .tier-seg { min-width: 1px; }
.lcap-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.lcap-tag { font-family: var(--font-body, inherit); font-size: var(--type-meta); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--color-navy-600); }
.lcap-result-list, .lcap-metrics { list-style: none; margin: 0; padding: 0; }
.lcap-result { padding: 10px 0; border-top: 1px solid var(--color-navy-100); }
.lcap-result.is-none { display: grid; gap: 4px; }
.lcap-result-go { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: calc(100% + 8px); margin: -4px; padding: 4px; border: 0; border-radius: 3px; background: transparent; text-align: left; }
.lcap-result-val { display: block; min-width: 0; margin: -3px; padding: 3px; border: 0; border-radius: 3px; background: transparent; text-align: left; cursor: pointer; }
.lcap-result-name { font-size: var(--type-secondary); font-weight: 500; line-height: 1.4; color: var(--color-navy-900); }
.lcap-result-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lcap-result-vals small { display: block; font-size: var(--type-meta); color: var(--quiet); }
.lcap-result-vals b { display: block; margin-top: 2px; font-size: var(--type-secondary); font-weight: 600; line-height: 1.35; color: var(--color-navy-900); font-variant-numeric: tabular-nums; }
.lcap-result-note { display: block; margin-top: 6px; font-size: var(--type-meta); line-height: 1.45; color: var(--color-navy-700); }
.lcap-none { font-size: var(--type-meta); line-height: 1.45; color: var(--quiet); }
.lcap-target { margin-top: 18px; padding: 14px 16px 12px; border: 1px solid var(--color-navy-100); border-radius: 3px; background: rgba(255, 255, 255, 0.55); }
.lcap-target-text { font-size: var(--type-secondary); line-height: 1.5; color: var(--color-navy-800); }
.lcap-target-note { margin-top: 10px; font-size: var(--type-meta); line-height: 1.5; color: var(--color-navy-700); }
.lcap-metrics li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--color-navy-100); }
.lcap-ref { font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 600; letter-spacing: 0.08em; color: var(--hue-sky); }
.lcap-metric-name { font-size: var(--type-secondary); line-height: 1.4; color: var(--color-navy-900); }
.lcap-metrics small { grid-column: 2; font-size: var(--type-meta); color: var(--color-navy-600); }

/* ---------------------------------------------------------------- Schools: the heat map (schools.js)
   One table on solid white inside the list's frost sheet: the header rows and the school column stay put while it scrolls.
   A Dashboard cell wears the color the file prints; every other column a five-step sky scale within its own range; a blank
   is a faint hatch, never a color. Hover and focus ring the cell quickly and let go slowly. */
/* The map runs the sheet's full width on white, as the toolbar above it does, and keeps the toolbar's 20px inset inside: the
   school column starts under "Heat map" and the last column ends under Export. The inset sits on the first and last cells
   (not the frame), so the school column, held in place as the map scrolls, covers it. */
.hm-scroll { overflow: auto; max-height: min(76vh, 960px); margin: 0 -20px; background: #fff; border-bottom: 1px solid rgba(17, 19, 22, 0.08); overscroll-behavior-x: contain; }
/* The page scrolls as one surface: wherever the map fits its column it is no scroll box of its own, so the wheel and the
   trackpad move the page anywhere over it, and its header rows hold under the School strip as the page scrolls. Only
   narrower than the map does it scroll, sideways (its own scroll box then, the header held inside it). */
div:has(> .hm-scroll) { container-type: inline-size; }
@container (min-width: 860px) {
  .hm-scroll { overflow: visible; max-height: none !important; }
  .hm-scroll .hm-bands th, .hm-scroll .hm-corner, .hm-scroll .hm-group .hm-heads th { top: var(--hm-top); }
  .hm-scroll .hm-heads th { top: calc(var(--hm-top) + 30px); }
}
:root { --hm-top: calc(var(--toolbar-top, 0px) + var(--school-strip-h, 0px)); }
/* the map's controls (group, level; the measure on a phone) in one toolbar row on the map's own white, aligned */
.hm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 -20px; padding: 10px 20px; background: #fff; border-bottom: 1px solid rgba(17, 19, 22, 0.08); border-radius: 14px 14px 0 0; }
.hm-toolbar > * { flex: none; }
.hm-toolbar .select-trigger { min-height: 40px; }
.hm-scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hm-scroll.is-flat { overflow: visible; max-height: none; }
.hm-scroll.is-flat .hm-bands th { top: var(--hm-top, 0px); }
.hm-scroll.is-flat .hm-heads th { top: calc(var(--hm-top, 0px) + 30px); }
.hm { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; font-variant-numeric: tabular-nums; }
.hm th, .hm td { padding: 0; font-weight: inherit; }
.hm-bands th { position: sticky; top: 0; z-index: 3; height: 30px; padding: 0 8px; background: #fff; font-size: var(--type-meta); color: var(--color-navy-600); text-align: center; border-bottom: 1px solid rgba(17, 19, 22, 0.08); white-space: nowrap; }
.hm-band + .hm-band { border-left: 1px solid rgba(17, 19, 22, 0.1); }
.hm-heads th { position: sticky; top: 30px; z-index: 3; background: #fff; border-bottom: 1px solid rgba(17, 19, 22, 0.12); vertical-align: bottom; }
.hm-corner { position: sticky; left: 0; top: 0; z-index: 5 !important; background: #fff; text-align: left; vertical-align: bottom; padding: 8px 14px !important; font-size: var(--type-meta); color: var(--color-navy-600); border-bottom: 1px solid rgba(17, 19, 22, 0.12); }
.hm-sort { display: flex; width: 100%; min-width: 60px; max-width: 96px; margin: 0 auto; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 9px; border: 0; background: transparent; cursor: pointer; text-align: center; line-height: 1.22; color: var(--color-navy-800); border-radius: 8px; transition: background-color 420ms ease; }
.hm-sort:hover, .hm-sort:focus-visible { background: rgba(79, 141, 245, 0.08); outline: none; transition-duration: 150ms; }
.hm-head { font-size: var(--type-meta); font-weight: 600; }
.hm-sub { font-size: 0.8125rem; color: var(--color-navy-500); }
.hm-sort-icon { width: 12px; height: 12px; color: var(--hue-sky); }
.hm-sort-icon.is-idle { color: var(--color-navy-300); opacity: 0; transition: opacity 420ms ease; }
.hm-sort:hover .hm-sort-icon.is-idle, .hm-sort:focus-visible .hm-sort-icon.is-idle { opacity: 1; transition-duration: 150ms; }
@media (hover: none) { .hm-sort-icon.is-idle { opacity: 0.7; } }
.hm-sort.is-on .hm-head { color: var(--color-navy-900); }
.hm .hm-bands th.hm-corner { text-align: left; padding: 8px 14px 8px 20px !important; }
.hm-name { padding-left: 6px !important; }
.hm tr > :last-child { padding-right: 20px !important; }
.hm-level th { padding-left: 0 !important; }
.hm-name { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; min-width: 180px; max-width: 220px; border-bottom: 1px solid rgba(17, 19, 22, 0.06); box-shadow: 1px 0 0 rgba(17, 19, 22, 0.06); }
.hm-school { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 8px; transition: background-color 420ms ease; }
button.hm-school:hover, button.hm-school:focus-visible { background: rgba(79, 141, 245, 0.08); outline: none; transition-duration: 150ms; }
.hm-school-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-secondary); font-weight: 500; color: var(--color-navy-900); }
.hm-school-type { font-size: 0.8125rem; color: var(--color-navy-500); }
.hm-td { padding: 2px !important; border-bottom: 1px solid rgba(17, 19, 22, 0.04); }
.hm-cell { display: flex; width: 100%; min-height: 36px; align-items: center; justify-content: center; padding: 0 6px; border: 0; border-radius: 6px; font-size: var(--type-secondary); font-weight: 500; cursor: pointer; transition: box-shadow 420ms ease; }
.hm-cell:hover, .hm-cell:focus-visible { box-shadow: 0 0 0 2px var(--color-navy-900); outline: none; transition-duration: 150ms; }
.hm-cell.is-blank, .hm-rank-val.is-blank { background: repeating-linear-gradient(135deg, rgba(17, 19, 22, 0.07) 0 3px, transparent 3px 8px); cursor: default; }
.hm-row.is-district .hm-name, .hm-row.is-district .hm-td { background: #f6f8fc; border-bottom: 2px solid rgba(17, 19, 22, 0.12); }
.hm-school.is-district .hm-school-name { font-weight: 600; }
.hm-level th { padding: 16px 0 6px !important; background: #fff; text-align: left; border-bottom: 1px solid rgba(17, 19, 22, 0.1); }
.hm-level-name { position: sticky; left: 20px; margin-left: 20px; font-size: var(--type-secondary); font-weight: 600; color: var(--color-navy-900); }
.hm-level-name small { margin-left: 8px; font-size: var(--type-meta); font-weight: 400; color: var(--color-navy-500); }
.hm-legend { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 32px; padding: 14px 0 6px; }
.hm-legend-head { display: block; margin-bottom: 6px; font-size: var(--type-meta); color: var(--color-navy-600); }
.hm-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.hm-key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--type-meta); color: var(--color-navy-800); }
.hm-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.hm-key.is-blank .hm-swatch { background: repeating-linear-gradient(135deg, rgba(17, 19, 22, 0.2) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px rgba(17, 19, 22, 0.12); }
.hm-ramp { display: inline-flex; overflow: hidden; border-radius: 4px; }
.hm-ramp span { display: block; width: 14px; height: 14px; }
.hm-legend-note { flex-basis: 100%; font-size: var(--type-meta); color: var(--color-navy-600); }
.hm-phone-only { display: none; }
@media (max-width: 639px) { .hm-phone-only { display: block; } }
.hm-ranked-note { margin: 8px 0 4px; font-size: var(--type-meta); color: var(--color-navy-600); }
.hm-ranked ul { margin: 0; padding: 0; list-style: none; }
.hm-rank { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 4px; border: 0; border-bottom: 1px solid rgba(17, 19, 22, 0.08); background: transparent; text-align: left; cursor: pointer; }
.hm-rank-name { display: flex; min-width: 0; flex-direction: column; }
.hm-rank-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-secondary); font-weight: 500; color: var(--color-navy-900); }
.hm-rank-name small { font-size: 0.8125rem; color: var(--color-navy-500); }
.hm-rank-val { min-width: 4.75rem; padding: 6px 8px; border-radius: 6px; text-align: center; font-size: var(--type-secondary); font-weight: 500; font-variant-numeric: tabular-nums; }
.hm-rank-val.is-blank { font-size: 0.8125rem; color: var(--color-navy-500); }
.hm-section-title { margin: 0 0 12px; font-family: var(--font-heading); font-size: var(--type-body); font-weight: 600; color: var(--color-navy-900); }

/* the school's profile: its measures on the left, where it sits among schools at its level on the right */
.prof { display: grid; gap: 28px 44px; }
@media (min-width: 1024px) { .prof { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.prof-rows, .peers { margin: 0; padding: 0; list-style: none; }
.prof-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(6.5rem, auto); align-items: center; gap: 4px 16px; padding: 10px 0; border-top: 1px solid rgba(17, 19, 22, 0.08); }
.prof-name { display: flex; flex-direction: column; font-size: var(--type-secondary); color: var(--color-navy-900); }
.prof-name small { font-size: var(--type-meta); color: var(--color-navy-500); }
.prof-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--type-meta); color: var(--color-navy-700); }
.prof-chip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.prof-right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.prof-right small { font-size: var(--type-meta); color: var(--color-navy-500); }
.prof-val { padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 400; color: var(--color-navy-900); font-variant-numeric: tabular-nums; }
.prof-none { font-size: var(--type-meta); color: var(--color-navy-500); }
.prof-val { text-align: right; }
.prof-val .prof-prior { display: block; font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 400; color: var(--color-navy-500); }
.peer { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); align-items: center; gap: 2px 16px; padding: 10px 0; border-top: 1px solid rgba(17, 19, 22, 0.08); }
.peer-name { grid-row: span 2; font-size: var(--type-meta); color: var(--color-navy-700); }
.peer-track { position: relative; height: 22px; margin: 0 7px; }
.peer-track::before { content: ""; position: absolute; left: -7px; right: -7px; top: 50%; height: 1px; background: rgba(17, 19, 22, 0.14); }
.peer-dot, .peer-me, .peer-district { position: absolute; top: 50%; }
.peer-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--hue-sky-soft); opacity: 0.85; }
.peer-me { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--color-navy-900); box-shadow: 0 0 0 2px #fff; }
.peer-district { top: 1px; bottom: 1px; width: 0; border-left: 2px dashed var(--color-navy-400); }
.peer-ends { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--color-navy-500); font-variant-numeric: tabular-nums; }
.peer-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: var(--type-meta); color: var(--color-navy-600); }
.peer-key i { display: inline-block; margin-left: 8px; }
.peer-key i:first-child { margin-left: 0; }
.peer-key-me { width: 11px; height: 11px; border-radius: 50%; background: var(--color-navy-900); }
.peer-key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hue-sky-soft); }
.peer-key-district { width: 0; height: 12px; border-left: 2px dashed var(--color-navy-400); }

/* ---------------------------------------------------------------- Money: the treemap (money.js)
   Tiles sit exactly where the layout puts them, so each one's area is its dollars; the white lines between them are drawn
   inside each tile and take no room. */
.tm-sub { min-height: 1.5em; margin: 8px 0 2px; font-size: var(--type-secondary); color: var(--color-navy-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-sub.is-reading { font-weight: 500; color: var(--color-navy-900); }
.tm-caveat { margin: 0 0 10px; font-size: var(--type-meta); line-height: 1.5; color: var(--color-navy-600); }
.tm-keys { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 12px; padding: 0; list-style: none; }
.tm-key { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--type-meta); color: var(--color-navy-800); }
.tm-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; align-self: center; }
.tm-key-val { font-weight: 600; color: var(--color-navy-900); font-variant-numeric: tabular-nums; }
.tm-key-share { color: var(--color-navy-500); }
.tm-wrap { width: 100%; }
.tm { position: relative; width: 100%; overflow: hidden; border-radius: 14px; background: #fff; }
.tm-tile { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; box-sizing: border-box; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95); transition: filter 420ms ease, box-shadow 420ms ease; }
.tm-tile.has-text { padding: 5px 7px; }
.tm-tile.has-text.is-first { padding-top: 28px; }
.tm-tile:hover, .tm-tile:focus-visible { z-index: 4; filter: brightness(1.05) saturate(1.2); box-shadow: inset 0 0 0 2px var(--color-navy-900); outline: none; transition-duration: 150ms; }
.tm-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-name { display: block; font-size: 0.8125rem; line-height: 1.2; overflow-wrap: normal; }
.tm-tile.is-group .tm-name { font-weight: 500; }
.tm-amt { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-group { position: absolute; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 2px #fff; }
.tm-group-name { position: absolute; top: 5px; left: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-size: 0.8125rem; font-weight: 600; color: var(--color-navy-900); white-space: nowrap; }

/* ---------------------------------------------------------------- Plan: the calendar (decisions.js) */
.cal-axis { position: relative; height: 78px; margin: 14px 18px 4px; }
.cal-line { position: absolute; left: 0; right: 0; top: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--hue-mist), var(--hue-sky-soft)); }
.cal-today { position: absolute; top: 31px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--color-navy-900); box-shadow: 0 0 0 3px #fff; }
.cal-today b { position: absolute; bottom: 20px; left: -2px; font-size: var(--type-meta); font-weight: 500; color: var(--color-navy-700); white-space: nowrap; }
.cal-year { position: absolute; top: 40px; height: 10px; border-left: 1px solid rgba(17, 19, 22, 0.22); }
.cal-year small { position: absolute; top: 10px; left: -14px; font-size: 0.8125rem; color: var(--color-navy-500); }
.cal-mark { position: absolute; top: 28px; }
.cal-mark i { display: block; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--hue-sky); box-shadow: 0 0 0 3px #fff; }
.cal-mark small { position: absolute; bottom: 26px; left: 0; transform: translateX(-50%); font-size: var(--type-meta); font-weight: 600; color: var(--color-navy-800); white-space: nowrap; }
.cal-rule { margin: 6px 0 14px; font-size: var(--type-meta); color: var(--color-navy-600); }
.cal-days { display: grid; gap: 4px; }
.cal-day { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 6px 22px; padding: 14px 0 6px; border-top: 1px solid rgba(17, 19, 22, 0.1); }
@media (max-width: 639px) { .cal-day { grid-template-columns: minmax(0, 1fr); } .cal-axis { margin: 14px 10px 4px; } }
.cal-day-head b { display: block; font-family: var(--font-heading); font-size: var(--type-body); font-weight: 600; color: var(--color-navy-900); }
.cal-day-head span { font-size: var(--type-meta); color: var(--color-navy-500); }
.cal-day ul { margin: 0; padding: 0; list-style: none; }
.cal-go { display: grid; width: calc(100% + 20px); grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 2px 18px; margin: 0 -10px; padding: 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; transition: background-color 420ms ease; }
.cal-go:hover, .cal-go:focus-visible { background: rgba(255, 255, 255, 0.75); outline: none; transition-duration: 150ms; }
.cal-go:focus-visible { box-shadow: var(--focus-ring); }
.cal-kind { grid-column: 1; font-size: var(--type-meta); font-weight: 600; color: var(--hue-sky); }
.cal-item:not(.is-lever) .cal-kind { color: var(--color-navy-600); }
.cal-item.is-lever .cal-go { padding-left: 26px; }
.cal-title { grid-column: 1; font-size: var(--type-secondary); font-weight: 500; color: var(--color-navy-900); }
.cal-note { grid-column: 1; font-size: var(--type-meta); line-height: 1.45; color: var(--color-navy-600); }
.cal-range.is-quiet { font-family: inherit; font-size: var(--type-meta); color: var(--color-navy-500); }
.cal-range { grid-column: 2; grid-row: 1 / span 3; font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-navy-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-chev { grid-column: 3; grid-row: 1 / span 3; width: 16px; height: 16px; color: var(--color-navy-300); }

/* every receipt ends with a quiet way to the Sources page */
.receipt-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 4px 0; border: 0; background: transparent; font-size: var(--type-meta); color: var(--color-navy-600); cursor: pointer; transition: color 420ms ease; }
.receipt-all:hover, .receipt-all:focus-visible { color: var(--color-navy-900); transition-duration: 150ms; }

/* Plan: the options in the calendar and an option's sheet (decisions.js) */
.cal-item.is-option .cal-kind { color: #2a6fe0; }
.cal-mark.has-option i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(79, 141, 245, 0.35); }
.opt-p { margin: 0; max-width: 72ch; font-size: var(--type-body); line-height: 1.65; color: var(--color-navy-800); }
.opt-note { margin: 8px 0 0; max-width: 72ch; font-size: var(--type-meta); line-height: 1.5; color: var(--color-navy-600); }
.opt-fig { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 3px; }
.opt-fig b { font-weight: 600; color: var(--color-navy-900); font-variant-numeric: tabular-nums; }
.opt-fig:focus-visible { outline: 2px solid var(--hue-sky); outline-offset: 2px; }
.opt-rows { margin: 0; padding: 0; list-style: none; }
.opt-row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(17, 19, 22, 0.08); }
.opt-row-k { font-size: var(--type-secondary); font-weight: 600; color: var(--color-navy-800); }
.opt-row-l { font-size: var(--type-meta); line-height: 1.45; color: var(--color-navy-600); }
.opt-row .opt-fig b { font-family: var(--font-heading); font-size: 1.1rem; }
.opt-side { margin: 0; padding: 0; list-style: none; }
.opt-side-row { padding: 16px 0; border-top: 1px solid rgba(17, 19, 22, 0.08); }
.opt-side-row:first-child { padding-top: 0; border-top: 0; }
.opt-side-k { margin: 0 0 4px; font-family: var(--font-heading); font-size: var(--type-label); font-weight: 500; color: var(--color-navy-700); }
.opt-side-v { margin: 0; font-size: var(--type-body); line-height: 1.5; color: var(--color-navy-900); }
.opt-side-v b { font-weight: 600; }
.opt-ev { margin: 0; padding: 0; list-style: none; }
.opt-ev-row { padding: 14px 0; border-top: 1px solid rgba(17, 19, 22, 0.08); }
.opt-ev-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.opt-ev-head b { font-size: var(--type-secondary); font-weight: 600; color: var(--color-navy-900); }
.opt-tier { font-size: var(--type-meta); font-weight: 600; color: #2a6fe0; }
.opt-ev-study, .opt-ev-meta { margin: 4px 0 0; font-size: var(--type-meta); line-height: 1.5; color: var(--color-navy-600); }
.opt-ev-result { margin: 6px 0 0; max-width: 72ch; font-size: var(--type-secondary); line-height: 1.6; color: var(--color-navy-800); }
.opt-ev-k { font-weight: 600; color: var(--color-navy-700); }
@media (max-width: 639px) { .opt-row { grid-template-columns: minmax(0, 1fr) auto; } .opt-row-l { grid-column: 1 / -1; grid-row: 2; } }
.opt-fig b.opt-inline > .fig-info { display: inline; width: 0; }
.opt-fig b.opt-inline > .fig-info .fig-info-icon { transform: translateY(-0.5em) scale(0.85); }
.opt-fig b.opt-inline { white-space: nowrap; }

/* Projections: the yield presets as a column of full-width chips that fills the card beside the fan chart */
.preset-stack > div { display: flex; flex: 1; flex-direction: column; }
.preset-stack [role="radiogroup"] { flex: 1; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
.preset-stack .chip { width: 100%; flex: 1 1 0; min-height: 44px; max-height: 52px; justify-content: flex-start; }

/* a page's notes on method: one quiet line at its foot, opening them in a sheet */
.note-foot { margin: 28px 0 0; }
.note-link { gap: 0.5rem; color: var(--color-navy-700); }

/* LCAP goal cards (UI plan 3a): the actions at true widths, the money drawn when no result is held, the metrics as chips */
.lcap-actbar { display: flex; gap: 2px; width: 100%; height: 26px; margin: 4px 0 8px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: transparent; cursor: pointer; }
.lcap-actseg { position: relative; min-width: 2px; overflow: hidden; background: var(--hue-sky-soft); transition: filter 420ms ease; }
.lcap-actseg.is-top { background: var(--hue-sky); }
.lcap-actseg i { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); font-style: normal; font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 600; color: #fff; white-space: nowrap; }
.lcap-actbar:hover .lcap-actseg, .lcap-actbar:focus-visible .lcap-actseg { filter: brightness(1.05) saturate(1.15); transition-duration: 180ms; }
.lcap-actbar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lcap-tm { position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: #fff; }
.lcap-tile { position: absolute; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--hue-teal); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95); cursor: pointer; transition: filter 420ms ease, box-shadow 420ms ease; }
.lcap-tile:hover, .lcap-tile:focus-visible { z-index: 2; outline: none; filter: brightness(1.06) saturate(1.15); box-shadow: inset 0 0 0 2px var(--color-navy-900); transition-duration: 150ms; }
.lcap-tile-p { position: absolute; top: 0; bottom: 0; left: 0; background: var(--hue-sky); }
.lcap-tile-label { position: absolute; top: 6px; left: 8px; display: flex; flex-direction: column; gap: 1px; font-size: var(--type-meta); line-height: 1.25; text-align: left; white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(7, 37, 59, 0.35); }
.lcap-tile-label b { font-family: var(--font-heading); font-weight: 600; }
.lcap-keys { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--type-meta); color: var(--color-navy-800); }
.lcap-keys li { display: inline-flex; align-items: center; gap: 6px; }
.lcap-sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.lcap-key-fig { padding: 2px 4px; border: 0; border-radius: 3px; background: transparent; font-weight: 600; color: var(--color-navy-900); font-variant-numeric: tabular-nums; cursor: pointer; }
@media (max-width: 599px) { .lcap-tm { display: none; } }
.lcap-chips-wrap { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--color-navy-100); }
.lcap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lcap-chip { max-width: 100%; gap: 8px; box-shadow: inset 0 0 0 1px var(--color-navy-200); color: var(--color-navy-800); }
.lcap-chip.is-held { background: var(--hue-mist); box-shadow: none; color: var(--color-navy-900); }
.lcap-chip b { font-family: var(--font-heading); font-weight: 600; color: var(--hue-sky); }
.lcap-chip-name { min-width: 0; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcap-chip:hover { background: rgba(255, 255, 255, 0.9); transition-duration: 180ms; }
.lcap-chip.is-held:hover { background: var(--hue-sky-soft); }
.lcap-chips-key { margin: 10px 0 0; font-size: var(--type-meta); line-height: 1.45; color: var(--quiet); }
.lcap-result-val.is-dash b { display: inline-block; margin-top: 3px; padding: 0 8px; border-radius: 6px; background: var(--dash-bg); color: var(--dash-ink); }
.tier-share:empty { display: none; }
/* Schools: the quiet row stays one row at 1440 with the larger type; the search takes the room left */
@media (min-width: 1024px) { [data-list="schools"] .list-quiet-row > :last-child { flex: 1 1 15rem; min-width: 0; } [data-list="schools"] .list-quiet-row > :last-child > .relative { min-width: 8rem; } }
.lcap-targets { display: grid; gap: 22px; align-content: start; margin-bottom: 22px; }
@container (min-width: 760px) { .lcap-targets { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); column-gap: 44px; align-items: end; } .lcap-district-rows ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px; } }
.lcap-target-chart .lcap-target-note { margin-top: 6px; }

/* Special education (UI plan 4): the service codes as cells, the revenue lines in two columns, the pairs on one scale */
.sped-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.sped-cell { min-height: 36px; padding: 0 4px; border: 0; border-radius: 6px; background: var(--hue-sky); color: #fff; font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: box-shadow 420ms ease, filter 420ms ease; }
.sped-cell.is-blank { background: repeating-linear-gradient(135deg, rgba(17, 19, 22, 0.07) 0 3px, transparent 3px 8px); color: var(--color-navy-600); box-shadow: inset 0 0 0 1px var(--color-navy-100); }
.sped-cell:hover, .sped-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-navy-900); filter: saturate(1.15); transition-duration: 150ms; }
.sped-cell-read { min-height: 1.5em; margin: 10px 0 0; font-size: var(--type-secondary); color: var(--color-navy-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sped-cell-read.is-reading { color: var(--color-navy-900); font-weight: 500; }
.sped-keys { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--type-meta); color: var(--color-navy-700); }
.sped-keys li { display: inline-flex; align-items: center; gap: 6px; }
.sped-key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--hue-sky); }
.sped-key.is-blank { background: repeating-linear-gradient(135deg, rgba(17, 19, 22, 0.14) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--color-navy-200); }
.sped-lines-cols { container-type: inline-size; }
@container (min-width: 760px) { .sped-lines-cols > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px; } .sped-lines-cols > div > section { margin-top: 0 !important; } }
.sped-pairs { columns: 2 24rem; column-gap: 44px; }
.sped-pair { break-inside: avoid; margin-bottom: 28px; }
.sped-pair-note { margin: 10px 0 0; font-size: var(--type-meta); line-height: 1.5; color: var(--color-navy-700); }
.st-bars.is-stacked .st-bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "track track"; row-gap: 10px; }
.st-bars.is-stacked .st-bar-name { grid-area: name; } .st-bars.is-stacked .st-bar-v { grid-area: val; } .st-bars.is-stacked .st-bar-track { grid-area: track; }

/* Plan: the options on one dollar axis (the story's dumbbell rows, at the page's reading size) */
.plan-ranges .st-db, .plan-ranges .st-db-axis { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr) 11rem; }
.plan-ranges .st-db { min-height: 40px; }
.plan-ranges .st-db-name { font-size: var(--type-secondary); }
.plan-ranges .st-db-val { font-size: var(--type-secondary); }
.plan-ranges .st-db-span { height: 8px; margin-top: -4px; border-radius: 4px; }
.plan-ranges .st-db-span.is-upto { background: linear-gradient(90deg, rgba(169, 198, 250, 0.35), var(--hue-sky)); }
@media (max-width: 767px) { .plan-ranges .st-db, .plan-ranges .st-db-axis { grid-template-columns: minmax(0, 1fr) auto; } .plan-ranges .st-db-plot { grid-column: 1 / -1; grid-row: 2; } .plan-ranges .st-db { padding: 8px; row-gap: 6px; } }
.plan-ranges .st-db-name { white-space: normal; text-overflow: clip; line-height: 1.3; padding: 6px 0; }
.plan-ranges .st-db-name small { display: block; margin: 2px 0 0; font-size: var(--type-meta); }
.lcap-chips li { min-width: 0; max-width: 100%; }
.lcap-chip { overflow: hidden; }

/* Kit v5 charts (kit-charts.js, charts.css) in the explorer's own colours: the library reads every hue from these roles,
   so the charts keep the explorer's sky blue for the main series, violet for the one marked row, green for a goal and the
   quiet navy for a second source. The fonts are the explorer's own (served from kit/fonts). */
:root {
  --k-f-ui: var(--font-sans);
  --k-f-figure: "Montserrat", var(--font-sans);
  --k-f-mono: "Montserrat", var(--font-sans);
  --k-ink: var(--color-navy-900);
  --k-ink-2: rgba(7, 37, 59, 0.7);
  --k-ink-3: rgba(7, 37, 59, 0.48);
  --k-ink-muted: var(--color-navy-700);
  --k-focus: var(--color-navy-900);
  --k-chart-1: #4f8df5;
  --k-chart-2: #b07cf0;
  --k-chart-3: #2fae7d;
  --k-chart-4: #596d7c;
  --k-chart-5: #f2a93b;
  --k-chart-6: #ef6b5b;
  --k-chart-7: #1d394d;
  --k-chart-8: #8cc8ec;
  --k-chart-emphasis: #b07cf0;
  --k-chart-emphasis-ink: #7a4fb0;
  --k-chart-exception: #b07cf0;
  --k-chart-plan: #07253b;
  --k-chart-goal: #2fae7d;
  --k-chart-context: #a9c6fa;
  --k-chart-good: #1f7f45;
  --k-chart-bad: #c2412b;
  --k-chart-figure: #07253b;
  --k-chart-seq-lo: #e6effd;
  --k-chart-seq-hi: #1d4f9e;
}

/* A laptop's screen (900px tall or so): the side menu's groups sit closer and its rows a little shorter, so every page,
   Presentation included, shows above the pinned Sources and Validation without scrolling the menu. */
@media (max-height: 1000px) {
  [data-testid="sidebar"] nav > div.mt-6 { margin-top: 0.75rem; }
  [data-testid="sidebar"] nav a[data-testid="sidebar-link"] { height: 2rem; }
  [data-testid="sidebar"] nav .group-label { padding-bottom: 0.375rem; }
  [data-testid="sidebar"] [data-testid="sidebar-quiet-link"] { height: 1.75rem; }
}

/* the cross-filter pair (Connections): the schools and the chosen school's groups side by side, stacked on a phone */
.cross-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .cross-pair { grid-template-columns: minmax(0, 1fr); } }

/* a long list of schools reads in two columns on a wide card; a closed section holds the school-by-school detail */
@media (min-width: 900px) { .stand-cols { column-count: 2; column-gap: 40px; } .stand-cols > li { break-inside: avoid; } }
.fold { margin-top: 18px; }
.fold-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 14px 20px; border-radius: var(--k-r-tile, 22px);
  background: var(--k-frost); border: 1px solid var(--k-frost-edge); box-shadow: var(--k-glass-shadow); backdrop-filter: var(--k-blur); -webkit-backdrop-filter: var(--k-blur); }
.fold-sum::-webkit-details-marker { display: none; }
.fold-title { font-family: var(--font-heading); font-size: var(--type-title); font-weight: 600; color: var(--color-navy-900); }
.fold-icon { transition: transform var(--k-move, 360ms) var(--k-ease); color: var(--color-navy-700); }
.fold[open] .fold-icon { transform: rotate(180deg); }
.fold-sum:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fold-icon { transition: none; } }
/* a shorter screen (a laptop at 1280 by 720 to 1440 by 800): the whole side menu scrolls as one column, so the pages, then
   Sources and Validation, then the signed-in line follow each other and none sits on another */
@media (max-height: 1000px) and (min-width: 768px) {
  [data-testid="sidebar"] { overflow-y: auto !important; overscroll-behavior: contain; }
  [data-testid="sidebar"] > nav { flex: 0 0 auto; overflow: visible; }
  [data-testid="sidebar"] > [data-testid="sidebar-quiet"] { margin-top: auto; }
}
@media (max-height: 820px) and (min-width: 768px) {
  [data-testid="sidebar"] nav a[data-testid="sidebar-link"] { height: 1.875rem; }
  [data-testid="sidebar"] nav > div.mt-6 { margin-top: 0.5rem; }
}

/* ---------------------------------------------------------------- the School picker (school-picker.js)
   One frost bar across the top of every page's work area, sticky while the page scrolls: the label, the school in large
   type, the All schools chip, and what the page does with the choice. The picker it opens is Kit v5's overlay: a dialog
   under the bar, a bottom sheet on a phone. On a phone the bar is one button. */
.school-strip { position: sticky; top: var(--toolbar-top, 0px); z-index: 25; margin: -1.5rem -1.5rem 1.5rem; padding: 6px 1.5rem;
  background: rgba(255, 255, 255, 0.62); backdrop-filter: var(--k-blur); -webkit-backdrop-filter: var(--k-blur);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 -1px 0 rgba(17, 19, 22, 0.06), 0 10px 24px -20px rgba(17, 19, 22, 0.35);
  transition: top 380ms cubic-bezier(.2, .8, .2, 1); }
/* a slim bar: about 48px, the school at body-large size, the note in small secondary text on one line */
@media (min-width: 768px) { .school-strip { margin: -2rem -2rem 2rem; padding: 6px 2rem; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .school-strip { background: var(--k-frost-solid); } }
.school-strip__in { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px 18px; min-width: 0; }
.school-strip__pick { display: flex; flex: none; align-items: baseline; gap: 12px; min-width: 0; max-width: 45%; }
.school-strip__label { font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-navy-600); }
.school-strip__current { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 36px; padding: 2px 10px 2px 10px; margin-left: -10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--color-navy-900); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: left;
  transition: background 0.14s ease; }
button.school-strip__current:hover { background: var(--navy-tint-06); }
button.school-strip__current:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.school-strip__current.is-locked { cursor: default; }
.school-strip__current.is-locked svg { color: var(--color-navy-600); }
.school-strip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.school-strip__chev { width: 16px; height: 16px; color: var(--color-navy-600); }
.school-strip__pre { display: none; }
.school-strip__reset { flex: none; min-height: 30px; padding: 0.125rem 0.625rem; border-radius: 999px; font-size: var(--type-meta); }
.school-strip__reset[hidden] { display: none; }
.school-strip__note { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-meta); line-height: 1.4; color: var(--color-navy-700); }
.school-strip__note:empty { display: none; }
@media (max-width: 767px) {
  .school-strip { padding: 6px 1rem; }
  .school-strip__label, .school-strip__note, .school-strip__reset { display: none; }
  .school-strip__pick { width: 100%; max-width: none; flex: 1 1 auto; }
  .school-strip__current { width: 100%; min-height: 44px; margin: 0; padding: 4px 6px; font-size: var(--type-body); }
  .school-strip__pre { display: inline; font-family: var(--font-sans); font-weight: 400; color: var(--color-navy-700); }
  .school-strip__name { flex: 1; }
}
/* the list under the bar (Sources) sticks below it, not behind it */
#work .review-sheet [data-testid="review-toolbar"] { top: calc(var(--toolbar-top, 0px) + var(--school-strip-h, 0px)) !important; }
/* the picker: a dialog hanging under the bar on a wide screen */
dialog.school-pick { width: min(440px, calc(100vw - 32px)); padding: 14px 10px 10px; border: 0; border-radius: 16px; background: #fff;
  color: var(--color-navy-900); box-shadow: 0 1px 2px var(--navy-lift-near), 0 16px 44px var(--navy-modal-shadow); }
dialog.school-pick:not([data-k-sheet]) { position: fixed; inset: auto; top: var(--pick-top, 80px); left: var(--pick-left, 16px); margin: 0; max-height: min(72vh, 600px); }
dialog.school-pick[data-k-sheet] { width: 100%; padding: 18px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
dialog.school-pick::backdrop { background: rgba(10, 12, 14, 0.12); }
.school-pick__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 0 10px; }
.school-pick__title { margin: 0; font-family: var(--font-heading); font-size: var(--type-kicker); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-navy-600); }
.school-pick__note { margin: 4px 10px 10px; font-size: var(--type-secondary); line-height: 1.4; color: var(--color-navy-700); }
.school-pick__note:empty { display: none; }
.school-pick__search { padding: 0 4px 6px; }
.school-pick__list { padding: 0 2px; }
.school-pick__row[hidden], .school-pick__group[hidden] { display: none; }
.school-pick__row:focus-visible { outline: none; background: var(--navy-tint-06); box-shadow: inset 0 0 0 2px var(--color-navy-900); }
.school-pick__none { margin: 8px 12px; font-size: var(--type-secondary); color: var(--color-navy-700); }
.school-pick__none[hidden] { display: none; }
/* the deck: the control in its rail; on a phone the rail shows the icon alone, as its other controls do */
@media print { .school-strip { display: none; } }

/* ---------------------------------------------------------------- the Reload guard (reload.js): when the page cannot start */
.reload-guard { min-height: 100dvh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; max-width: 36rem; margin: 0 auto; padding: 24px; }
.reload-guard h1 { margin: 0; font-family: var(--font-heading, sans-serif); font-size: 1.5rem; font-weight: 600; color: #07253b; }
.reload-guard p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: #1d394d; }
.reload-guard button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: #07253b; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; }
.reload-guard button:focus-visible { outline: 3px solid #4f8df5; outline-offset: 2px; }

/* ---------------------------------------------------------------- the skeleton while the figures load (app.js progress) */
.skel .skel-line { margin: 18px 0 0; font-size: var(--type-body); line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.skel { min-height: 100dvh; }
.skel-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1060px) { .skel-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.skel-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
@media (min-width: 1060px) { .skel-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skel .skel-tile { min-height: 150px; padding: 18px 20px; }
.skel .skel-card { min-height: 300px; padding: 22px 24px; }
@media (max-width: 639px) { .skel .skel-tile { min-height: 110px; } }
/* a standing list's figure leaves room for its receipt mark beside it, in every column: no mark tucks above a number at the
   card's edge (kit.js fitOne) */
.stand-list .fig-end { margin-right: 1.125rem; }
/* one group's heat map (Foster youth, Homeless youth: schools.js groupMap): held back is hatched and says so; not held is plain */
.hm-cell.is-small { font-size: 0.8125rem; font-weight: 500; color: var(--color-navy-700); }
.hm-cell.is-none { cursor: default; font-size: 0.8125rem; font-weight: 400; color: var(--color-navy-500); background: rgba(255, 255, 255, 0.45); box-shadow: inset 0 0 0 1px rgba(17, 19, 22, 0.06); }
.hm-key.is-none .hm-swatch { background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(17, 19, 22, 0.14); }
.hm-rank-val.is-none { font-size: 0.8125rem; color: var(--color-navy-500); }
button.hm-rank-name { padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
button.hm-rank-val { border: 0; cursor: pointer; }
.hm-ranked > [data-testid="group-map-measure"] { margin-bottom: 8px; }
.hm-group .hm-heads th { top: 0; }
.hm-group .hm-heads th.hm-corner { text-align: left; vertical-align: bottom; padding: 8px 14px 8px 20px; font-size: var(--type-meta); color: var(--color-navy-600); font-weight: 400; }