/* The public pages (#51, redesigned for #170), built to Figma Round 16
   (P-11 to P-11f, PU-05) and Round 17 (PU-06a), Christian's picks on
   2026-10-05: Notion-like, never paper on a gray ground. A dark header
   holds the district's mark, the title, its number, and its tags; below it
   the page is white: the way back, then the document in plain text with its
   own headings, Kingsley Bogard's side box bordered beside its section.
   Atkinson Hyperlegible throughout. Light only. No script, no inline style. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #102536;
  --slate: #536579;
  --primary: #007aa0;
  --primary-pressed: #006b8d;
  --rule: rgba(16, 37, 54, 0.14);
  --hairline: rgba(16, 37, 54, 0.08);
  --font-ui: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  /* Liquid Glass on white (docs/BRAND.md, section 10; the portal's recipe):
     a body a hair grayer than the page, a lit rim, a darker inner edge and
     hairline, a soft shadow. Never a gray box, never a gradient. */
  --glass-tint: rgba(246, 248, 249, 0.86);
  --glass-edges: inset 1px 1px 0 rgba(255, 255, 255, 1), inset -1px -3px 8px rgba(16, 37, 54, 0.09),
    inset 0 0 0 0.75px rgba(16, 37, 54, 0.09), 0 4px 16px rgba(16, 37, 54, 0.12);
  /* The reading column starts where the title does, beside the mark. */
  --mark: 112px;
  --mark-gap: 32px;
}

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 18px / 1.55 var(--font-ui);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-pressed);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Over the header's dark ground and darkened photo, the ring is white:
   teal there falls under 3:1 over a bright photo. */
.hero :focus-visible {
  outline-color: var(--paper);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Policy ids keep their letter suffix and never wrap. */
.policy-id {
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ---------------------------------------------------------- the header */

/* Until a district has a photo, the SSDA template banner darkened (P-11c):
   ink, ruled every 16px. */
.hero {
  color: var(--paper);
  background:
    repeating-linear-gradient(to bottom, transparent 0 15px, rgba(255, 255, 255, 0.07) 15px 16px),
    var(--ink);
}

/* A district's cover photo sits behind the header under an ink veil, so
   white words keep at least 6:1 over any photo (migration 0039). */
.hero.has-photo { position: relative; overflow: hidden; background: var(--ink); }
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-veil { position: absolute; inset: 0; background: rgba(16, 37, 54, 0.72); }
.hero.has-photo .hero-inner { position: relative; }

.hero-inner {
  display: grid;
  grid-template-columns: var(--mark) minmax(0, 1fr);
  gap: var(--mark-gap);
  align-items: center;
  max-width: 1084px;
  margin: 0 auto;
  padding: 72px 16px;
}

.mark img,
.mark span {
  display: grid;
  place-items: center;
  width: var(--mark);
  height: var(--mark);
  background: var(--paper);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.mark img {
  padding: 14px;
  object-fit: contain;
}

.mark span {
  color: var(--primary);
  font: 700 40px / 1 var(--font-ui);
  letter-spacing: -0.02em;
}

h1 {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.hero-second {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

/* The three tags (P-11f): the group, the adoption date (the one white tag:
   it opens the adopted PDF), the kind. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 6px 11px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.3;
}

.tag-group {
  font-weight: 500;
}

.tag-group:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.24);
}

/* The replaced tag (#219, RP-02) is a link like the adoption date: it opens
   the SSDA Policy that replaced this one. */
.tag-adopted,
.tag-replaced {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
  font-weight: 700;
}

.tag-adopted:hover,
.tag-replaced:hover {
  color: var(--primary);
  background: var(--paper);
}

.doc-icon {
  flex: none;
}

.tag-kind {
  background: transparent;
  border: 1.25px solid rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

.tag-kind.tag-local {
  background: var(--ink);
  border-color: rgba(255, 255, 255, 0.55);
}

/* High contrast drops the tags' backgrounds: a system border keeps each
   one a shape. */
@media (forced-colors: active) {
  .tag {
    border: 1px solid CanvasText;
  }

  a.tag {
    border-color: LinkText;
  }
}

/* ------------------------------------------------------- the white page */

.page {
  max-width: 1084px;
  margin: 0 auto;
  padding: 36px 16px 48px calc(16px + var(--mark) + var(--mark-gap));
}

/* The way back (P-11b), the first thing on the white. */
.back {
  margin: 0 0 28px;
}

.back a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 700;
}

/* The document: plain text in its reading column, its own headings. */
.policy-text {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.policy-text::after {
  display: block;
  clear: both;
  content: "";
}

.policy-text .doc-title {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.policy-text .doc-number {
  margin: 6px 0 0;
  color: var(--slate);
  font-size: 20px;
}

.policy-text h2,
.policy-text h3,
.policy-text h4,
.policy-text h5,
.policy-text h6 {
  margin: 1.6em 0 0.5em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.policy-text h3,
.policy-text h4,
.policy-text h5,
.policy-text h6 {
  font-size: 20px;
}

.policy-text p {
  margin: 0 0 1em;
}

.policy-text > :first-child {
  margin-top: 0;
}

/* Kingsley Bogard's side box, where the PDF puts it: beside its section,
   white with its border (P-11). */
.side-box {
  float: right;
  clear: right;
  width: 320px;
  margin: 6px 0 24px 32px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid rgba(16, 37, 54, 0.3);
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.55;
}

.policy-text .side-box h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.side-box > :last-child {
  margin-bottom: 0;
}

/* List labels are Word's own, kept as text: no second number from CSS. */
.policy-text ol,
.policy-text ul {
  margin: 0 0 1em;
  padding-left: 1.6em;
  list-style: none;
}

.policy-text .label {
  margin-right: 0.35em;
}

.policy-text table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 1em;
  border-collapse: collapse;
}

.policy-text td,
.policy-text th {
  padding: 6px 10px;
  vertical-align: top;
  border: 1px solid var(--rule);
}

.policy-text td p:last-child,
.policy-text th p:last-child {
  margin-bottom: 0;
}

.policy-text .u {
  text-decoration: underline;
}

.policy-text a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* A Local Policy whose words are not checked yet: its own pages, bordered. */
.local-pages {
  display: grid;
  gap: 24px;
  max-width: 720px;
}

.local-page img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
  border: 1px solid rgba(16, 37, 54, 0.14);
  border-radius: 4px;
}

/* ------------------------------------------------------ the district page */

.page-district {
  padding-left: 16px;
}

.district-body {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* The contents stay in view as the book scrolls. */
.contents {
  position: sticky;
  top: 24px;
}

.find-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--slate);
  background: var(--glass-tint);
  border-radius: 12px;
  box-shadow: var(--glass-edges);
}

.find-box:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.find-box svg {
  flex: none;
}

.find-box input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  font: 400 16px / 1.3 var(--font-ui);
  outline: none;
}

.find-box input::placeholder {
  color: var(--slate);
}

.contents ul {
  display: grid;
  gap: 2px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* Every group is one height, the height of a name on two lines (PU-06a). */
.contents a {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 6px 12px;
  color: var(--ink);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.35;
}

.contents a:hover {
  color: var(--ink);
  background: rgba(0, 122, 160, 0.07);
}

.contents-number {
  color: var(--slate);
  font-weight: 700;
}

.contents-name {
  font-weight: 500;
}

.contents-count {
  color: var(--slate);
  font-size: 14px;
}

.results {
  margin: 0 0 24px;
  color: var(--slate);
  font-size: 16px;
}

.results a {
  font-weight: 700;
}

.group + .group {
  margin-top: 48px;
}

.group {
  scroll-margin-top: 24px;
}

.group h2,
.statement h2 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.group-number {
  margin-right: 6px;
}

/* The district's mission and vision (#54, MV-01a): a preface above group 1,
   in body type, lines kept to a reading measure. */
.statement {
  margin: 0 0 40px;
}

.statement + .group {
  margin-top: 44px;
}

.statement-words p {
  max-width: 620px;
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 28px;
  text-wrap: pretty;
}

.statement-words p:last-of-type {
  margin-bottom: 0;
}

/* Read the Whole Vision: the browser's own disclosure, styled as a text
   action (BRAND 10): never underlined, its own color at 10 percent behind it
   on hover, 8px past the words; a 44px target whose padding its margin
   takes back, so nothing moves. Plus turns to minus; no triangle. */
.fold > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 2px -8px 0;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--primary);
  font: 700 16px / 1 var(--font-ui);
  list-style: none;
  cursor: pointer;
}

.fold > summary::-webkit-details-marker {
  display: none;
}

.fold > summary:hover {
  color: var(--primary-pressed);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.fold > summary svg {
  fill: currentColor;
  flex: none;
}

.fold[open] .fold-bar,
.fold[open] .fold-closed,
.fold:not([open]) .fold-open {
  display: none;
}

.fold[open] > summary {
  margin-bottom: 14px;
}

/* The book's rows: plain, a hairline between, no card. */
.policy-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.policy-list li {
  border-bottom: 1px solid var(--hairline);
}

.policy-list a {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px 8px;
  color: var(--ink);
  border-radius: 8px;
}

.policy-list a:hover {
  color: var(--ink);
  background: rgba(0, 122, 160, 0.05);
}

.policy-list .policy-id {
  color: var(--slate);
  font-size: 15px;
}

.policy-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

/* A Local Policy in the book: solid ink, its own look (PU-02's rows). */
.policy-title .tag-local {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  vertical-align: 1px;
}

.adopted {
  color: var(--slate);
  font-size: 15px;
  white-space: nowrap;
}

/* ------------------------------------------------ the disclaimer (PU-05) */

.disclaimer-text {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.65;
}

.disclaimer-text p {
  margin: 0 0 1em;
}

/* ------------------------------------------------------------ the foot */

.foot {
  max-width: 720px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.page-district .foot {
  max-width: none;
}

.foot-line {
  color: var(--slate);
  font-size: 14px;
  line-height: 1.5;
}

.foot-line p {
  margin: 0;
}

.foot-line p + p {
  margin-top: 8px;
}

.foot-line a {
  font-weight: 700;
}

.powered {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 20px 0 0;
  color: var(--slate);
  font-size: 13px;
  font-weight: 500;
}

/* ---------------------------------------------------------- narrower */

@media (max-width: 899px) {
  .page {
    padding-left: 16px;
  }

  .district-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* The contents fold away: the search, then the book (PU-02's note). */
  .contents {
    position: static;
  }

  .contents nav {
    display: none;
  }
}

/* On a phone (P-11d): the header stacks, the side box takes the width of
   the words where Word reads it. */
@media (max-width: 600px) {
  :root {
    --mark: 76px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 40px 20px 32px;
  }

  .mark img,
  .mark span {
    border-radius: 18px;
  }

  .mark img {
    padding: 10px;
  }

  .mark span {
    font-size: 28px;
  }

  h1 {
    font-size: 34px;
    letter-spacing: -0.02em;
  }

  .hero-second {
    font-size: 20px;
  }

  .page {
    padding: 24px 20px 40px;
  }

  .policy-text .doc-title {
    font-size: 28px;
  }

  .policy-text h2 {
    font-size: 22px;
  }

  .side-box {
    float: none;
    width: auto;
    margin: 0 0 24px;
  }

  .group h2,
  .statement h2 {
    font-size: 21px;
  }

  .policy-list a {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: baseline;
    padding: 14px 4px;
  }

  .adopted {
    grid-column: 2;
  }
}

/* No seat for that email (Round 18, S-02 a): one paragraph, one button. */
.page-no-seat {
  max-width: 640px;
  padding: 72px 16px 48px;
}
.page-no-seat h1 { margin: 24px 0 16px; font-size: clamp(34px, 5vw, 44px); letter-spacing: -0.03em; line-height: 1.1; }
.page-no-seat > p { font-size: 18px; line-height: 1.5; }
.no-seat-mark { margin: 0; }
.no-seat-mark img { display: block; height: 48px; width: auto; }
.button-primary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 8px;
  padding: 0 22px;
  color: #fff;
  background: var(--primary);
  border-radius: 12px;
  box-shadow: var(--glass-edges);
  font-weight: 600;
  text-decoration: none;
}
.button-primary:hover { color: #fff; background: var(--primary-pressed); }
.button-primary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.no-seat-foot { max-width: 640px; margin: 0 auto; padding: 0 16px 48px; }