/* LunchMenus - hand-rolled CSS, no build step, no framework.
   Same bones as the sibling site; the palette is the cafeteria green. */

:root {
  --bg: #e6efe4;
  --card: #ffffff;
  --ink: #17181c;
  --muted: #56585e;
  --rule: #a8c8a2;          /* the green hairline under every heading */
  --hair: #e4e6ea;          /* neutral separators inside a card */
  --link: #14603a;
  --link-visited: #6a4a99;
  --field-border: #767676;
  --accent: #14603a;
  --holiday: #a34400;       /* no school, no lunch */
  --today: #14603a;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", Times, serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, sans-serif;
  --mono: "DejaVu Sans Mono", "Cascadia Mono", Consolas, "Liberation Mono", "Courier New", monospace;

  --gap: 24px;              /* between cards, everywhere */
  --pad: 26px 32px;         /* inside a card, everywhere */
  --radius: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 24px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration: none; }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* ---------- shell ---------- */

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--pad);
  margin: 0 0 var(--gap);
}

/* Every card heading carries the hairline. One rule, no per-page fiddling. */
.card > h1,
.card > h2 {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.card > h1 + p,
.card > h2 + p { margin-top: 0; }

h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}
h3 + p { margin-top: 0; }

.sub { color: var(--muted); margin-top: -6px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }
.nowrap { white-space: nowrap; }

.site-header { padding: 20px 0 0; }
.site-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 14px 10px 18px;
  box-shadow: 0 1px 2px rgba(20, 40, 24, .06), 0 6px 20px -12px rgba(20, 96, 58, .25);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:visited { color: var(--ink); }
.brand-name { font-family: var(--ui); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.brand-name span { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 4px; font-family: var(--ui); font-size: 14px; font-weight: 600; }
.nav-links a {
  padding: 7px 13px; border-radius: 999px; text-decoration: none; color: var(--muted);
  transition: background-color .15s ease, color .15s ease;
}
.nav-links a:visited { color: var(--muted); }
.nav-links a:hover { background: #eef4ec; color: var(--accent); }
.nav-links a[aria-current="page"] { background: var(--accent); color: #fff; }
/* "My Schools": a dropdown in the bar listing the schools saved in this
   browser. A <details>, so it opens and closes without any script. */
.nav-links { margin-left: auto; }
.nav-saved { position: relative; font-family: var(--ui); font-size: 14px; font-weight: 600; }
.nav-saved summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid #b9d3b4; color: var(--accent); background: #fff;
  transition: background-color .15s ease;
}
.nav-saved summary::-webkit-details-marker { display: none; }
.nav-saved summary:hover, .nav-saved[open] summary { background: #eaf3e8; }
.nav-saved-heart { font-size: 15px; line-height: 1; }
.nav-saved-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.nav-saved-count.is-empty { visibility: hidden; }
.provider-mark .tab-icon { margin: 0; vertical-align: 0; width: 18px; height: 18px; }
.nav-saved-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 300px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 8px;
  box-shadow: 0 10px 30px -10px rgba(20, 40, 24, .35);
}
.nav-saved-toggle {
  display: block; width: 100%; padding: 8px 10px; margin-bottom: 4px; border-radius: 8px;
  border: 1px solid #b9d3b4; background: #f4f9f2; color: var(--accent); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.nav-saved-toggle:hover { background: #eaf3e8; }
.nav-saved-toggle .save-on { display: none; }
.nav-saved-toggle.is-saved .save-off { display: none; }
.nav-saved-toggle.is-saved .save-on { display: inline; }
.nav-saved-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.nav-saved-list li { position: relative; }
.nav-saved-list a { display: block; padding: 7px 34px 7px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.nav-saved-list a:hover { background: #eef4ec; color: var(--accent); }
.nav-saved-list .name { display: block; font-weight: 600; }
.nav-saved-list .where { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.nav-saved-list .saved-remove { position: absolute; right: 4px; top: 6px; }
.nav-saved-empty { margin: 4px 6px 6px; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.45; }
.nav-saved-toggle:not([hidden]) + .nav-saved-list:empty { display: none; }

/* A phone gets the brand on one line and the sections as a scrolling row of
   pills beneath it. */
@media (max-width: 700px) {
  .site-header { padding: 10px 0 0; }
  .site-bar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 10px 8px 12px; }
  .brand-name { font-size: 17px; }
  /* The saved-schools pill keeps the brand's row; the sections scroll beneath. */
  .nav-saved { order: 2; margin-left: auto; font-size: 13px; }
  .nav-saved summary { padding: 5px 10px; }
  .nav-saved-menu { right: -10px; }
  .nav-links {
    order: 3; margin-left: 0;
    width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    font-size: 13px; gap: 2px; margin: 0 -10px; padding: 0 10px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 6px 11px; white-space: nowrap; }
}

.hero-foods { display: block; width: 62%; max-width: 720px; height: auto; margin: 14px 0 0 auto; }
@media (max-width: 700px) { .hero-foods { width: 78%; margin-top: 10px; } }

/* "Schools near you": filled in by the browser, so it starts as one button. */
.near-ask { display: inline-flex; align-items: center; }
.near-row { margin-top: 12px; }
.btn-near { display: inline-flex; align-items: center; gap: 7px; }
.btn-near svg { margin-top: -1px; }
.near-results { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.near-results h2 { margin-top: 0; }
.near-results [data-near-towns] { margin: 0 0 8px; }
.near-results .school-list .where { display: block; }
.near-results .btn-row { margin-top: 12px; }
@media (max-width: 520px) {
  .near-ask .small { width: 100%; }
  .btn-near { width: 100%; justify-content: center; }
}

/* The calendar offer at the foot of the day. */
.cal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0 2px; padding-top: 12px; border-top: 1px solid var(--hair); }
.cal-label { font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--muted); }
.cal-buttons { display: inline-flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 520px) {
  .cal-label { width: 100%; }
  .cal-buttons { width: 100%; }
  .cal-buttons .btn { flex: 1 1 auto; text-align: center; }
}

/* "Show all 103 Illinois districts": the rest of a state's list, folded. */
.more-districts { margin-top: 2px; }
.more-districts summary {
  list-style: none; cursor: pointer; display: inline-block; padding: 7px 14px; margin-top: 8px;
  border: 1px solid var(--hair); border-radius: 999px; background: #fff;
  font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--accent);
}
.more-districts summary::-webkit-details-marker { display: none; }
.more-districts summary:hover { background: #eef4ec; border-color: var(--accent); }
.more-districts[open] summary { margin-bottom: 4px; }
.card h2 .count {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px;
  background: #eef4ec; color: var(--accent); font-family: var(--ui); font-size: 12px; font-weight: 700; vertical-align: 3px;
}

.site-footer { margin-top: 0; }

.card img { max-width: 100%; height: auto; }
/* How a district is best fetched. */
.fetch { display: inline-block; padding: 1px 9px; border-radius: 999px; font-family: var(--ui); font-size: 12px; font-weight: 700; }
.fetch-direct    { background: #dcefdc; color: #1f5c2a; }
.fetch-firecrawl { background: #e6ecfb; color: #2b3f76; }
.fetch-manual    { background: #ecebe7; color: #55514a; }

/* The refresh console's tick column. */
.admin-table th.pick, .admin-table td.pick { width: 28px; padding-right: 0; }
.admin-table td.pick input, .admin-table th.pick input { margin: 0; }

/* The schools a shared menu feeds: a list that reads as a list, each with
   the mark its district gave it. Two or three columns where there is room,
   because these run to two dozen names. */
.cluster-schools {
  list-style: none; margin: 4px 0 14px; padding: 0;
  columns: 2; column-gap: 26px;
}
.cluster-schools li {
  display: flex; align-items: center; gap: 8px;
  break-inside: avoid; padding: 4px 0; font-size: 15px;
}
.cluster-schools img { flex: none; width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }
.cluster-schools a { text-decoration: none; color: var(--link); }
.cluster-schools a:hover { text-decoration: underline; }
.cluster-schools span { color: var(--ink); }
@media (min-width: 1000px) { .cluster-schools { columns: 3; } }
@media (max-width: 560px) { .cluster-schools { columns: 1; } }

.founder-photo { margin: 0 0 18px; }
.founder-photo img { display: block; width: 100%; max-width: 640px; height: auto; border-radius: 10px; }
.founder-photo figcaption { max-width: 640px; margin-top: 6px; }

/* The operator guide: tables of commands, and the commands themselves. */
.guide-table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 15px; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hair); }
.guide-table th { font-family: var(--ui); font-size: 13px; color: var(--muted); font-weight: 700; }
.guide-table code { white-space: normal; }
.legal pre {
  background: #f4f6f2; border: 1px solid var(--hair); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.55; margin: 10px 0 16px;
}
.legal h3 { margin: 22px 0 6px; font-size: 17px; }

/* The how-it-works, privacy and terms pages: one column of plain text. */
.legal { max-width: 760px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.legal h2 { margin: 26px 0 8px; font-size: 20px; }
.legal p, .legal li { font-size: 16px; }
.legal ul { padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal code { font-size: 14px; background: #f1f4ef; padding: 1px 5px; border-radius: 4px; }
.site-footer .card { color: var(--muted); font-size: 14px; }

/* ---------- two column card body ---------- */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 40px;
}
.cols-even { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 40px; }
@media (max-width: 820px) {
  .cols, .cols-even { grid-template-columns: 1fr; gap: 24px; }
}

.stack > * + * { margin-top: 20px; }

/* ---------- form controls: native on purpose ---------- */

input[type="text"],
input[type="search"],
input[type="date"],
select,
button,
.btn {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink);
}

input[type="text"],
input[type="search"],
input[type="date"] {
  background: #fff;
  border: 1px solid var(--field-border);
  border-radius: 2px;
  padding: 4px 7px;
  width: 220px;
  max-width: 100%;
}
select { padding: 3px 4px; max-width: 100%; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button, .btn {
  display: inline-block;
  background: linear-gradient(#fcfcfc, #e9e9e9);
  border: 1px solid #8a8a8a;
  border-radius: 3px;
  padding: 5px 14px;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.5;
}
button:hover, .btn:hover { background: linear-gradient(#ffffff, #e0e0e0); text-decoration: none; color: var(--ink); }
button:active, .btn:active { background: #e0e0e0; }
.btn:visited { color: var(--ink); }

.btn-row { margin-top: 18px; }
.btn-row > * { margin: 0 8px 8px 0; }

.field label {
  display: block;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 5px;
}

/* ---------- search ---------- */

.searchbox { position: relative; max-width: 460px; }
.searchbox input { width: 100%; font-size: 15px; padding: 6px 9px; }

.school-list { list-style: none; padding: 0; margin: 0; }
.school-list li { border-bottom: 1px solid var(--hair); }
.school-list li:last-child { border-bottom: 0; }
.school-list a { display: block; padding: 10px 0; text-decoration: none; }
.school-list a:hover .name { text-decoration: underline; }
.school-list .name { color: var(--link); font-weight: 700; }
.school-list .where { color: var(--muted); font-size: 14px; }

/* The same list with each row's logo down the left. The mark is decorative -
   the name next to it says the same thing - so it carries an empty alt. */
.school-list-marks a { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; }
.school-list-marks img { grid-row: 1 / span 2; width: 38px; height: 38px; object-fit: contain; border-radius: 5px; }
.school-list-marks .name,
.school-list-marks .where { grid-column: 2; }

/* A district's own mark beside its heading. It wraps under the mark on a
   phone rather than squeezing the heading into two words a line. */
.district-head { display: flex; align-items: center; gap: 14px; }
.district-head img { flex: none; width: 64px; height: 64px; object-fit: contain; }
.district-head h1 { margin: 0; }
@media (max-width: 480px) { .district-head { gap: 10px; } .district-head img { width: 48px; height: 48px; } }

.state-list > .btn { margin: 0 6px 6px 0; }
.district-picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 6px; }
.district-picker label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; }
.district-picker select { width: 100%; padding: 6px 8px; font-family: var(--ui); font-size: 14px; border: 1px solid var(--field-border); border-radius: 3px; background: #fff; }
.district-picker .btn { flex: 0 0 auto; }
.recent-districts { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.recent-districts li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--hair); }
.recent-districts li a { font-weight: 600; }
.recent-districts li .small { display: block; }
@media (max-width: 620px) { .recent-districts { columns: 1; } }
@media (max-width: 520px) { .district-picker .btn { width: 100%; text-align: center; } }

/* The menu links under a school on an abbreviation page. */
.abbr-menus { margin: 0 0 10px; }
.abbr-menus .btn { font-size: 12px; padding: 4px 11px; margin: 0 6px 6px 0; }
.state-list .count { color: var(--muted); font-size: 12px; margin-left: 4px; }
.btn[aria-current="page"] { background: #dfeadd; border-color: #7fa579; font-weight: 700; }
.btn[aria-current="page"] .count { color: #456144; }

/* ---------- typeahead ---------- */

.searchbox { position: relative; }

.suggestions {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--field-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(20, 40, 25, .14);
  overflow: hidden;
  max-height: 340px;
  overflow-y: auto;
}
.suggestions[hidden] { display: none; }

.suggestion {
  display: block;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 14px;
}
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover,
.suggestion.is-active { background: #eef5ec; text-decoration: none; }
.suggestion:visited { color: var(--ink); }
.suggestion-name { font-weight: 600; color: var(--link); }
.suggestion-where { display: block; font-size: 12px; color: var(--muted); }

/* The initials a school goes by, shown so an initials search explains itself. */
.abbr {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e6efe4;
  color: #2c5c33;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: 1px;
}

/* ---------- the finder ---------- */

.finder-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 14px;
  align-items: end;
}
.finder-row .field { margin: 0; }
.finder-row input[type="search"],
.finder-row select { width: 100%; }
.finder-row select { padding: 5px 6px; height: 30px; }
.finder-row .field-go button { padding: 6px 18px; }

@media (max-width: 760px) {
  .finder-row { grid-template-columns: 1fr; gap: 10px; }
  .finder-row .field-go button { width: 100%; }
}

.hint-card { background: #f6f9f5; }
.hint-card p { font-family: var(--ui); font-size: 14px; }

/* ---------- ranked lists in the home sidebar ---------- */

.rank { list-style: none; padding: 0; margin: 0; }
.rank li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--hair);
}
.rank li:last-child { border-bottom: 0; }
.rank a { font-weight: 600; }
.rank-n {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.rank-sub {
  grid-column: 1 / -1;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- pagination ---------- */

.pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.pager .btn { font-size: 13px; padding: 5px 11px; }
.pager .btn[aria-current="page"] { background: #dfeadd; border-color: #7fa579; font-weight: 700; }
.pager-gap { color: var(--muted); padding: 0 2px; }
.pager-count {
  margin-left: auto;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- menu type tabs + date strip ---------- */

.selectors {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: #f6f9f5;
  border: 1px solid var(--hair);
  border-radius: 8px;
}
.selectors .tabs { margin: 0; }
.selectors .tabs + .datenav { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }

.tabs { margin: 0 0 18px; }
.tabs > * { margin: 0 6px 6px 0; }
/* The menu switcher is the main control on the page, so it is sized to be
   tapped rather than squeezed in with the date buttons. */
.tab { font-family: var(--ui); font-size: 15px; font-weight: 600; padding: 9px 20px; }
.tab[aria-selected="true"] {
  background: #dfeadd;
  border-color: #7fa579;
  font-weight: 700;
}
.tab-icon { margin-right: 7px; vertical-align: -3px; }
.datenav .btn.day .short { display: none; }
/* On a phone the three day buttons sit in one row, so they are trimmed to
   fit beside each other rather than wrapping under the meal tabs. */
@media (max-width: 520px) {
  .tab { font-size: 14px; padding: 8px 14px; }
  .datenav { gap: 6px; }
  .datenav .btn.day { font-size: 12px; padding: 4px 9px; }
  .datenav .btn.day .full { display: none; }
  .datenav .btn.day .short { display: inline; }
}

.datenav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-family: var(--ui);
  font-size: 13px;
}
.datenav .spacer { flex: 1 1 auto; }
.datenav form { display: flex; align-items: center; gap: 6px; margin: 0; }
.datenav label { font-weight: 700; }

/* ---------- the day itself ---------- */

.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.day-head h2 { font-size: 21px; margin: 0; padding: 0; border: 0; }
.pdf-row { margin: 10px 0 4px; }
.btn-pdf {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-size: 14px; font-weight: 600;
  background: linear-gradient(#f4f8f3, #dfeadd); border-color: #7fa579; color: #24512f;
}
.btn-pdf:hover { background: linear-gradient(#ffffff, #d4e3d1); color: #24512f; }
@media (max-width: 520px) { .btn-pdf { width: 100%; justify-content: center; } }
.day-head .when { font-family: var(--ui); font-size: 13px; color: var(--muted); }

.section-title {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  padding: 16px 0 6px;
  margin: 0;
}

/* A la carte days run to sixty sections; the browser lays out the ones on
   screen and leaves the rest until they scroll into view. */
.dishes { list-style: none; padding: 0; margin: 0; content-visibility: auto; contain-intrinsic-size: auto 140px; }
.pg-calendar, .pg-about { content-visibility: auto; contain-intrinsic-size: auto 420px; }
@media print { .dishes, .pg-calendar, .pg-about { content-visibility: visible; } }
.dishes li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
}
.dishes li:last-child { border-bottom: 0; }
.dish-icon {
  flex: none; width: 26px; height: 26px;
  color: var(--accent); opacity: .9;
}
.dish-main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) { .dish-icon { width: 20px; height: 20px; } }
@media print { .dish-icon { display: none; } }
.dish-name { font-weight: 600; }
.dish-note { display: block; color: var(--muted); font-size: 13px; font-family: var(--ui); }
.dish-cal {
  flex: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tags { margin-top: 3px; }
.tag {
  display: inline-block;
  font-family: var(--ui);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 1px 5px;
  margin: 2px 4px 0 0;
  white-space: nowrap;
}

/* Nutrition, folded away: on the page for the parents who want it, out of the
   way of the ones who just need to know what is for lunch. */
.nutrition { margin-top: 6px; }
.nutrition summary {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--link);
  cursor: pointer;
}
.nutrition table { border-collapse: collapse; font-family: var(--ui); font-size: 12px; margin-top: 6px; }
.nutrition td { padding: 2px 16px 2px 0; color: var(--muted); }
.nutrition td.v { color: var(--ink); font-variant-numeric: tabular-nums; }

.notice {
  padding: 18px 0;
  color: var(--muted);
}
.notice strong { color: var(--holiday); }

/* ---------- school page card order ----------
   Wide: the menu reads first, with the calendar under it. Narrow: the calendar
   comes first and the menu sits directly beneath it, because a phone shows
   bare day numbers and you have to tap one to see anything. */

.school-page { display: flex; flex-direction: column; }
.pg-head { order: 1; }
/* The month, where a district has one. Without an order of its own it
   defaulted to 0 and sorted above the header, which put the calendar before
   the name of the school it belongs to. */
.pg-month { order: 2; }
.pg-menu { order: 3; }
.pg-ticker { order: 4; }
/* A closer look at the food reads straight under the sheet, then the
   school's own facts, then the list of schools that share the menu. */
.pg-nutrition { order: 5; }
/* The schools sharing this menu read before the school's own facts: a
   parent who has landed on one of eight identical menus wants to know that
   first, and which school this is second. */
.pg-band { order: 6; }
.pg-facts { order: 7; }
.pg-calendar { order: 8; }
.pg-print-list { order: 8; }
.pg-about { order: 9; }

/* Both are anchor targets, so leave them room under the header. */
.pg-menu, .pg-month { scroll-margin-top: 12px; }

/* Where the month is drawn, the sheet leads and the grid reads under it.
   Scoped to those pages: everywhere else the sheet still comes after the
   day, which is the order the rest of the site is built around. */
.school-page--month .pg-calendar { order: 2; }
.school-page--month .pg-month { order: 3; }

@media (max-width: 820px) {
  .pg-calendar { order: 2; margin-bottom: 12px; }
  .pg-menu { order: 3; }
  .pg-ticker { order: 4; }
}

/* ---------- next day headline ----------
   A single line of tomorrow's whole menu, scrolling. Hover or focus stops it,
   and reduced-motion turns it into an ordinary scrollable strip. */

.pg-ticker { padding: 0; overflow: hidden; }

.ticker { display: flex; align-items: center; font-family: var(--ui); font-size: 14px; }

.ticker-label {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 14px;
  white-space: nowrap;
}

.ticker-window { flex: 1 1 auto; overflow: hidden; padding: 12px 0; }

.ticker-track {
  display: inline-flex;
  animation: ticker-scroll var(--ticker-duration, 40s) linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }

.ticker-run { white-space: nowrap; }
.ticker-run a { text-decoration: none; color: var(--ink); }
.ticker-run a:visited { color: var(--ink); }
.ticker-run a:hover .ticker-item { color: var(--link); }

/* The bullet is a separator, so it is drawn rather than typed - nothing for a
   screen reader to read out between every dish. */
.ticker-item { padding: 0 18px; }
.ticker-item + .ticker-item { border-left: 1px solid var(--rule); }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-window { overflow-x: auto; }
  .ticker-run + .ticker-run { display: none; }
}

.ticker-label .short { display: none; }
@media (max-width: 520px) {
  .ticker { font-size: 12px; }
  .ticker-label { padding: 6px 8px; font-size: 10px; letter-spacing: .04em; }
  .ticker-label .full { display: none; }
  .ticker-label .short { display: inline; }
  .ticker-window { padding: 7px 0; }
  .pg-ticker { margin-bottom: 10px; }
}

/* A caveat about the menu itself, not about a dish - sits above the food so it
   is read before it, not after. */
.menu-note {
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.45;
  color: #6b4a1f;
  background: #fdf6e6;
  border: 1px solid #e8d9b5;
  border-radius: 6px;
  padding: 10px 13px;
  margin: 14px 0 0;
}

/* ---------- month calendar ---------- */

.calendar {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  font-family: var(--ui);
  margin: 0 -4px;
}
.calendar th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 10px;
  text-align: center;
}
.calendar td {
  height: 104px;
  vertical-align: top;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}
.calendar td.empty { background: #f6f8f5; border-color: transparent; }

.cal-day {
  display: block;
  height: 100%;
  padding: 8px 9px;
  text-decoration: none;
  color: var(--ink);
}
a.cal-day:hover { background: #f1f7ef; text-decoration: none; }
a.cal-day:visited { color: var(--ink); }

/* The date is the anchor of the cell, so it is sized like a heading and sits
   in its own circle - which is what the today and selected states colour in. */
.cal-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.cal-body { font-size: 13px; line-height: 1.4; margin-top: 5px; overflow: hidden; }
.cal-body .entree {
  display: block;
  color: var(--link);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-more { color: var(--muted); font-size: 12px; }
.cal-none { color: #b4bab2; font-size: 18px; margin-top: 4px; }

/* A day that is actually serving food. On a wide screen the dish previews say
   so already, so this only needs to be a hint; on a phone they are hidden and
   it becomes the whole signal. */
.calendar td.has-menu { background: #f2f8f0; }

/* Today is filled, so it reads at a glance across the whole grid. */
.calendar td.is-today { border-color: var(--today); }
.calendar td.is-today .cal-num { background: var(--today); color: #fff; }

/* The day you are looking at owns the cell: a tinted ground and a ring, not a
   wash you have to hunt for. */
.calendar td.is-selected {
  background: #e2efdd;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.calendar td.is-selected a.cal-day:hover { background: transparent; }
.calendar td.is-selected .cal-num { background: var(--accent); color: #fff; }
.calendar td.is-selected .cal-body .entree { color: #123f24; }

/* Today and selected at once: keep the fill, add the ring. */
.calendar td.is-today.is-selected { border-color: var(--accent); }

.calendar td.is-holiday .cal-body { color: var(--holiday); font-weight: 600; }

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--ui);
  font-size: 14px;
}
.cal-head h3 { margin: 0; font-size: 19px; font-family: var(--serif); }
.cal-head a { font-weight: 600; }

@media (max-width: 820px) {
  .calendar td { height: 88px; }
  .cal-body { font-size: 12px; }
}

.cal-legend {
  display: none;
  gap: 14px;
  margin-top: 12px;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid var(--hair);
  flex: none;
}
.cal-legend .key-menu { background: #dcecd6; border-color: #a8c8a2; }
.cal-legend .key-none { background: #fff; }
.cal-legend .key-holiday { background: #fbeee2; border-color: #e6cba9; }

@media (max-width: 620px) {
  .calendar { border-spacing: 3px; }
  .calendar td { height: 56px; }
  .calendar th { font-size: 11px; }
  .cal-body { display: none; }
  .cal-none { display: none; }
  .cal-day { padding: 6px 4px; text-align: center; }
  .cal-num { min-width: 30px; height: 30px; font-size: 16px; }

  .cal-legend { display: flex; flex-wrap: wrap; }

  /* With the previews gone, the cell itself has to carry the answer: filled
     means there is a menu, plain means there is not. */
  .calendar td.has-menu { background: #dcecd6; border-color: #a8c8a2; }
  .calendar td.has-menu .cal-num { color: #14512f; }
  .calendar td.is-holiday { background: #fbeee2; border-color: #e6cba9; }
  .calendar td.is-holiday .cal-num { color: var(--holiday); }
  .calendar td:not(.has-menu):not(.is-holiday):not(.empty) .cal-num { color: #adb3ab; font-weight: 600; }

  /* Today and the day being viewed still win over the fill. */
  .calendar td.is-today .cal-num { background: var(--today); color: #fff; }
  .calendar td.is-selected .cal-num { background: var(--accent); color: #fff; }
}

/* ---------- week strip on the school page ---------- */

.week { list-style: none; padding: 0; margin: 0; }
.week li { padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.week li:last-child { border-bottom: 0; }
.week .d { font-family: var(--ui); font-size: 12px; color: var(--muted); display: block; }
.week .none { color: var(--muted); }

/* ---------- school header ---------- */

.school-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.school-head-main { flex: 1 1 auto; min-width: 0; }
.school-title, .head-row h1 {
  font-size: 25px;
  line-height: 1.22;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
/* The mark and the location sit level with each other under the name. */
.school-head-main { display: flex; align-items: center; }
.school-where { font-size: 14px; color: var(--muted); margin: 0; }

/* The initials the school goes by, under its title. */
.school-abbr {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 0;
}
.school-abbr strong {
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ink);
}

.school-logo {
  flex: none;
  width: 68px;
  height: 68px;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
}
/* The stand-in tray is an illustration, not a badge: no frame around it. */
.school-logo-fallback { border-radius: 0; }

/* The stand-in when a district publishes no image: the school's initials on a
   colour derived from its slug, so it is the same mark every time. */
.school-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--hue, 150) 34% 92%);
  color: hsl(var(--hue, 150) 45% 26%);
  border: 1px solid hsl(var(--hue, 150) 30% 80%);
  font-family: var(--ui);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Who published the menu, credited next to whose menu it is. */
.provider {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: #f7faf6;
  text-decoration: none;
  color: var(--ink);
}
.provider:visited { color: var(--ink); }
.provider:hover { border-color: var(--accent); text-decoration: none; }

.provider-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 700;
}
.provider-logo { height: 30px; width: 100px; object-fit: contain; object-position: left center; border-radius: 4px; background: #fff; padding: 2px; }
.provider-logo-lg { height: 44px; width: 160px; vertical-align: middle; margin-right: 10px; }
h1.with-logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.provider-list .provider-logo { height: 28px; width: 100px; vertical-align: middle; margin-right: 8px; }
.provider-text { font-family: var(--ui); font-size: 13px; line-height: 1.25; }
.provider-label { display: block; font-size: 11px; color: var(--muted); }

@media (max-width: 700px) {
  .school-head { flex-wrap: wrap; gap: 14px; }
  .school-head-main { flex: 1 1 200px; }
  .provider { order: 3; width: 100%; }
}
/* On a phone the header has to leave room for the menu itself: one line of
   crumbs, a small logo, a tight title, the provider as a chip, and a slim
   selector bar. */
@media (max-width: 520px) {
  .pg-head { padding: 12px 14px; }
  .crumbs { font-size: 12px; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .school-head { gap: 10px; }
  .school-logo { width: 44px; height: 44px; }
  .school-monogram { font-size: 16px; }
  .school-title, .head-row h1 { font-size: 18px; line-height: 1.25; margin: 0 0 8px; }
  .school-where { font-size: 12px; }
  .provider { order: 3; width: auto; padding: 4px 9px; gap: 6px; border-radius: 999px; }
  .provider-logo { height: 20px; width: 70px; padding: 1px; }
  .provider-mark { width: 22px; height: 22px; font-size: 13px; border-radius: 6px; }
  .provider-label { display: none; }
  .provider-text { font-size: 12px; }
  .selectors { margin: 10px 0 0; padding: 8px 10px; }
  .selectors .tabs + .datenav { margin-top: 8px; padding-top: 8px; }
  .tabs > * { margin: 0 4px 4px 0; }
  .tab { font-size: 13px; padding: 6px 11px; }
  .tab-icon { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
  .datenav { gap: 5px; }
  .datenav .spacer { display: none; }
  .datenav label { display: none; }
  .datenav input[type="date"] { flex: 1 1 110px; width: auto; min-width: 0; font-size: 12px; padding: 3px 5px; }
}

.crumbs { font-family: var(--ui); font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.crumbs a { color: var(--muted); }

/* ---------- refresh console (admin only) ---------- */

.admin-table { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: 14px; }
.admin-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding: 0 10px 8px 0;
}
.admin-table td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table td.right { text-align: right; }
.admin-table .tiny { display: block; }

.src {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 8px;
  border-radius: 4px;
  background: #eef1f4;
  color: #414852;
  white-space: nowrap;
}
.src-nutrislice { background: #e6f0e6; color: #2c5c33; }
.src-mealviewer { background: #e7eefa; color: #2b4a7d; }
.src-linq       { background: #f3e9f7; color: #5c357a; }
.src-healthepro { background: #e3f2f4; color: #1f5a63; }
.src-snf        { background: #fdf0e2; color: #8a5320; }
.src-pdf,
.src-weekly     { background: #f1f0ec; color: #5a564c; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-ok, .badge-done      { background: #dcefdc; color: #1f5c2a; }
.badge-due, .badge-running,
.badge-queued               { background: #fdf1d6; color: #7a5713; }
.badge-stale, .badge-failed,
.badge-empty                { background: #fbe2e0; color: #8a2b23; }
/* Nothing is broken: the district has not published yet. Amber, not red. */
.badge-not-published,
.badge-source-empty,
.badge-next-month-due       { background: #fdf0d9; color: #7a5312; }
.badge-manual,
.badge-manual-due           { background: #ecebe7; color: #55514a; }

.btn-primary {
  background: linear-gradient(#2a7a4d, #1d6b3f);
  border-color: #14522f;
  color: #fff;
  font-weight: 700;
  padding: 8px 18px;
}
.btn-primary:hover { background: linear-gradient(#31895a, #1d6b3f); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }

/* The fallback fetch: available, but not the thing you reach for first. */
.btn-alt { font-size: 12px; padding: 5px 9px; margin-left: 4px; color: var(--muted); }

.run-hint { font-family: var(--ui); font-size: 13px; color: var(--muted); }

.run { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.run:last-child { border-bottom: 0; }
.run-head { display: flex; align-items: center; gap: 10px; font-family: var(--ui); font-size: 14px; }
.run-log {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #f6f7f5;
  border: 1px solid var(--hair);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 220px;
}

/* The month list exists for the exporter's browser only. */
.pg-print-list { display: none; }
.print-bar p { margin: 0 0 10px; }

/* ---------- follow: email, calendar, share, saved schools ---------- */

/* The sign-up sheet: pinned to the bottom, slid up by menu.js. */
.follow-sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 40; width: min(720px, 100% - 24px);
  transform: translate(-50%, 110%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  background: var(--card, #fff); border: 1px solid var(--hair); border-bottom: 0; border-radius: 14px 14px 0 0;
  padding: 18px 22px 16px; box-shadow: 0 -12px 40px -12px rgba(20, 40, 24, .35);
}
.follow-sheet.is-open { transform: translate(-50%, 0); }
.follow-sheet h2 { margin: 0 32px 10px 0; font-size: 19px; }
.follow-sheet .subscribe-form input[type="email"] { max-width: none; }
.sub-row { display: flex; gap: 8px; align-items: stretch; }
.sub-row input { flex: 1 1 auto; min-width: 0; }
.sub-row .btn { flex: none; white-space: nowrap; }
.follow-sheet .sub-choices { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 6px; }
.follow-sheet .subscribe-form .small { margin: 2px 0 0; font-size: 12px; }
.follow-close {
  position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.follow-close:hover { background: #eef4ec; color: var(--ink); }
@media (max-width: 700px) {
  .follow-sheet { width: 100%; padding: 12px 14px 10px; border-radius: 12px 12px 0 0; }
  .follow-sheet h2 { font-size: 16px; margin-bottom: 8px; }
  .follow-sheet .sub-choices { font-size: 13px; gap: 2px 14px; }
  .follow-close { top: 4px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .follow-sheet { transition: none; } }

.subscribe-form input[type="email"] { width: 100%; max-width: 360px; padding: 8px 10px; font-size: 15px; }
.sub-choices { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; font-family: var(--ui); font-size: 14px; }
.sub-choices label { display: flex; align-items: center; gap: 8px; }
.subscribe-form .small { margin: 8px 0 0; }
.notice.ok { color: #24512f; background: #eaf3e8; border: 1px solid #b9d3b4; border-radius: 6px; padding: 10px 12px; font-family: var(--ui); font-size: 14px; }
.notice.err { color: #7a2e12; background: #fbeeea; border: 1px solid #e6bfb3; border-radius: 6px; padding: 10px 12px; font-family: var(--ui); font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.share-group { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.btn-share { font-family: var(--ui); font-size: 13px; padding: 5px 11px; }
@media (max-width: 520px) {
  .action-row .btn-pdf { width: 100%; justify-content: center; }
  .share-group { margin-left: 0; width: 100%; }
  .btn-share { flex: 1 1 auto; text-align: center; }
}


.saved-remove { float: right; border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 6px; }
.saved-remove:hover { color: var(--holiday); }
[data-saved-schools] li { position: relative; }

/* ---------- print ---------- */

@media print {
  /* Plain paper. The faded food pattern the server-rendered PDF carried
     cannot come along: browsers drop fixed overlays and repeated body
     backgrounds once they paginate, and it would cost a cartridge anyway. */
  body { background: #fff; padding: 0; }
  .site-header, .site-footer, .selectors, .no-print { display: none !important; }
  /* The printed page is the calendar and the day: no crumbs, no sidebar of
     other weeks and menus, no notes about the data. */
  .crumbs, .pg-menu .stack, .pg-about { display: none !important; }
  .pg-menu .cols { display: block; }
  /* The export carries the month as a list and drops the grid. */
  .pg-print-list { display: block; }
  /* A food pattern, faint, on every printed page; the cards go clear so it
     shows through, and it sits behind them so the text stays crisp. A
     negative z-index would put it behind the paper itself, so it sits at 0
     and the page content is lifted above it. */
  .school-page { position: relative; z-index: 1; }
  /* The month list already holds today, so the single day is not printed
     twice. */
  .pg-print-list ~ .pg-menu, .pg-menu:has(~ .pg-print-list) { display: none !important; }
  .card, .school-page { background: transparent !important; }
  .pg-print-list .print-day, .day, .day-head { background: transparent; }
  .pg-print-list ~ .pg-calendar { display: none !important; }
  .pg-print-list .print-day { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid #ddd; }
  .pg-print-list h3 { margin: 0 0 3px; font-size: 14px; }
  .pg-print-list ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 24px; font-size: 12px; line-height: 1.4; }
  .pg-print-list li { break-inside: avoid; }
  .card { margin: 0 0 18px; padding: 0; }
  .card > h1, .card > h2 { border-color: #999; }
  a { color: #000; text-decoration: none; }
  .nutrition[open] summary { display: none; }
}

/* Admin: moving between states in the refresh console. */
.state-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.state-tab{display:inline-flex;align-items:baseline;gap:6px;padding:7px 14px;border:1px solid var(--hair);
    border-radius:999px;font-size:.85rem;font-weight:600;color:var(--muted);text-decoration:none;background:var(--card)}
.state-tab:hover{border-color:var(--accent);color:var(--accent)}
.state-tab.is-current{background:var(--accent);border-color:var(--accent);color:#fff}
.state-tab.is-current .muted{color:rgba(255,255,255,.75)}

/* The provider index: one platform per row, with what we hold on it. */
.provider-list{list-style:none;margin:0;padding:0}
.provider-list > li{padding:16px 0;border-bottom:1px solid var(--hair)}
.provider-list > li:last-child{border-bottom:0}
.provider-list > li > a{text-decoration:none}
.provider-list .name{font-weight:700;font-size:1.05rem;text-decoration:underline}
.provider-list .where{color:var(--muted);font-size:.9rem}

/* A menu published as a page image rather than as data. */
.menu-sheet img{display:block;width:100%;height:auto;border:1px solid var(--hair);border-radius:8px;margin:12px 0}
.menu-sheet a{display:block}
.menu-sheet h2{margin-bottom:4px}

/* Today's food on a district page: one block per menu, side by side where
   there is room and stacked where there is not. */
.day-menus { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.day-menu { padding-top: 14px; border-top: 1px solid var(--rule); }
.day-menu h3 { margin: 0 0 8px; font-size: 1.02rem; }
.day-menu h3 a { text-decoration: none; }
.day-menu h3 a:hover { text-decoration: underline; }
.day-menu-count { font-family: var(--ui); font-size: .78rem; font-weight: 400; color: var(--muted); }
.day-meal { margin: 0 0 10px; }
.day-meal-name { display: block; font-family: var(--ui); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.day-menu .small:last-child { margin-bottom: 0; }

/* The founder's address, drawn rather than written. Baseline-aligned with the
   word beside it so it reads as one line rather than a pasted-in picture. */
.email-row img { vertical-align: -3px; max-width: 100%; height: auto; }
.email-row a { display: inline-block; }

/* The refresh console, grouped by what needs doing. The colours are the same
   family as the status badges, so a section and its rows read as one thing. */
.group-tally { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.group-tally .tally {
  font-family: var(--ui); font-size: 13px; text-decoration: none;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink);
}
.group-tally .tally:hover { border-color: var(--rule); }
.group-tally strong { font-weight: 700; }
.tally-work { background: #fdecea; border-color: #f3c6c0; }
.tally-waiting { background: #fff6e5; border-color: #f0dcae; }
.tally-soon { background: #fff9db; border-color: #ece3ad; }
.tally-manual { background: #eef1f6; border-color: #d8dde6; }
.tally-images { background: #eef0fb; border-color: #cfd4ee; }
.tally-ok { background: #eaf5ea; border-color: #c4e0c4; }

.admin-table .group-row th {
  padding: 14px 10px 6px; text-align: left; border-bottom: 1px solid var(--rule);
  font-weight: 400;
}
.admin-table .group-row:first-child th { padding-top: 2px; }
.group-title {
  display: inline-block; font-family: var(--ui); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin-right: 10px;
}
.group-title.group-work { color: #a3291b; }
.group-title.group-waiting { color: #8a5a00; }
.group-title.group-soon { color: #7a6a00; }
.group-title.group-manual { color: #4a5160; }
.group-title.group-images { color: #48519a; }
.group-title.group-ok { color: var(--accent); }

/* Said when the menu shown is the last one published rather than today's. */
.menu-stale {
  margin: 0 0 14px; padding: 9px 13px; border-radius: 6px;
  background: #fff6e5; border: 1px solid #f0dcae;
  font-family: var(--ui); font-size: 14px; color: #6b5420;
}

/* How a self-published district is read, beside its name in the console. */
.src-kind {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #eef1f6; border: 1px solid #d8dde6; color: #4a5160;
  font-family: var(--ui); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}

/* The drawn calendars, two across, for picking a template by eye. */
.art-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 14px;
}
.art { margin: 0; }
.art img {
  display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 6px;
  background: #fff;
}
.art figcaption {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; font-family: var(--ui); font-size: 14px;
}
@media (max-width: 760px) { .art-grid { grid-template-columns: 1fr; } }

/* The drawn month, in place of the grid of dates. */
.drawn-calendar { display: block; margin: 4px 0 2px; }
.sheet-actions {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; margin-top: 14px;
}
.sheet-note { text-align: center; margin: 12px 0 0; }
.drawn-calendar img {
  display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 6px;
  background: #fff;
}

/* The month as a month: five columns, the weeks down the page, a box for
   each date that opens where it stands. */
.month-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
  margin-top: 12px; align-items: start;
}
.mg-head {
  font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--accent);
  border-radius: 5px; padding: 6px 8px; text-align: center;
}
.mg-blank { border: 0; }
.mg-cell {
  border: 1px solid var(--hair); border-radius: 6px; background: #fff;
  min-height: 84px; overflow: hidden;
}
.mg-cell.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mg-cell > summary {
  display: block; cursor: pointer; list-style: none; padding: 8px 9px;
  font-family: var(--ui); font-size: 13px; line-height: 1.35;
}
.mg-cell > summary::-webkit-details-marker { display: none; }
.mg-cell > summary:hover { background: #f6f8f5; }
.mg-date { display: block; font-weight: 800; font-size: 15px; color: var(--accent); margin-bottom: 3px; }
.mg-lead { display: block; color: var(--ink); }
.mg-items {
  margin: 0; padding: 2px 9px 10px; list-style: none;
  border-top: 1px dashed var(--hair); font-family: var(--ui); font-size: 13px;
}
.mg-items li { display: flex; gap: 6px; align-items: baseline; padding: 3px 0; }
.mg-items .dish-icon { flex: 0 0 14px; width: 14px; height: 14px; }

/* On a phone five columns is five words wide, so the month becomes a list
   and each date keeps a row of its own. */
@media (max-width: 720px) {
  .month-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hair); }
  .mg-head, .mg-blank { display: none; }
  .mg-cell { border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; min-height: 0; }
  .mg-cell.is-today { box-shadow: none; background: #f4f8f3; }
  .mg-cell > summary { display: flex; gap: 12px; align-items: baseline; padding: 11px 4px; }
  .mg-date { margin: 0; flex: 0 0 2em; }
  .mg-items { padding-left: calc(2em + 16px); border-top: 0; }
}

/* The month as a slideshow: one day at a time, where a district is set up
   for it. The track is a native scroller with snap points, so the arrows -
   which are links to the slides - move it with no script at all; the script
   only makes it smooth, brings the day the reader came for into view, and
   runs the month on by itself.

   Every slide is as tall as the tallest, because a card that changed height
   every five seconds would shift the page under the reader. With a West Ada
   lunch running to twenty-odd components that height is what has to be kept
   down: hence a capped width, two columns of dishes on a desktop and small
   rows, rather than one long column the height of a screen. */
.slides { position: relative; margin: 14px auto 0; max-width: 760px; }

.slides-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: 10px;
    scrollbar-width: none;
}

.slides-track::-webkit-scrollbar { display: none; }
.slides-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 4px;
    padding: 12px 6px 14px;
    background: var(--bg);
    border: 1px solid var(--hair);
    border-radius: 10px;
}

.slide.is-today { box-shadow: inset 0 0 0 2px var(--accent); }

.slide-body { min-width: 0; text-align: center; }

.slide-when { margin: 0 0 9px; line-height: 1.15; }

.slide-dow {
    display: block;
    font-family: var(--ui);
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

.slide-date { display: block; font-size: 20px; font-weight: 800; color: var(--accent); }

.slide-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 4px;
    text-align: left;
}

.slide-items li {
    font-family: var(--ui);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px;
    background: var(--card);
    border: 1px solid var(--hair);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.25;
}

.slide-items .dish-icon { flex: 0 0 14px; width: 14px; height: 14px; color: var(--muted); }
.slide-items li span:nth-of-type(1) { flex: 1 1 auto; min-width: 0; }

.slide-shut { margin: 22px 0; font-family: var(--ui); color: var(--muted); }

/* Arrows sit in the slide's own margins, one pair per slide, each pointing
   at the day either side of it. */
.slide-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--hair);
    color: inherit;
    text-decoration: none;
}

.slide-arrow svg { width: 16px; height: 16px; }
.slide-arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.slide-prev { justify-self: start; }
.slide-next { justify-self: end; }

.slides-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px;
}

.slides-bar:empty { display: none; }

.slides-dots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }

.slides-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hair);
    cursor: pointer;
}

.slides-dot[aria-current="true"] { background: var(--accent); }

.slides-stop {
    border: 1px solid var(--hair);
    background: var(--card);
    border-radius: 999px;
    padding: 3px 12px;
    font-family: var(--ui);
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
}

.slides-count { margin: 0; font-family: var(--ui); font-size: 12px; color: var(--muted); }

/* Two columns once there is room for them: twenty-three dishes down one
   column is a screenful, and across two it is half of one. */
@media (min-width: 620px) {
    .slide-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
}

@media (max-width: 560px) {
    .slide { grid-template-columns: 28px minmax(0, 1fr) 28px; padding: 10px 3px 14px; }
    .slide-arrow { width: 26px; height: 26px; }
    .slide-arrow svg { width: 14px; height: 14px; }
    .slide-date { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .slides-track { scroll-behavior: auto; }
}

/* The school's own facts, in the slot the month block used to fill. A
   definition list because that is what it is: a short column of labelled
   values a parent can scan, not prose. Rows with nothing behind them are
   left out in the template, so this never has to style an empty one. */
.pg-facts .facts {
  margin: 0; display: grid; gap: 0;
  font-family: var(--ui); font-size: 14px;
}
.pg-facts .facts > div {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair);
}
.pg-facts .facts > div:first-child { border-top: 0; }
.pg-facts dt { color: var(--muted); }
.pg-facts dd { margin: 0; }
.facts-map { margin-left: 8px; font-size: 13px; white-space: nowrap; }

@media (max-width: 560px) {
  .pg-facts .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; }
  .pg-facts dt { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
}

/* What is on the menu and what is known about its nutrition, on the pages
   of schools that share a month with their neighbours. */
.pg-nutrition .nut-head {
  margin: 18px 0 4px; font-family: var(--ui); font-size: 15px;
}
.pg-nutrition .nut-head:first-of-type { margin-top: 14px; }

.nut-often { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.nut-often li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 11px; background: var(--bg); border: 1px solid var(--hair);
  border-radius: 7px; font-family: var(--ui); font-size: 14px;
}
.nut-often .nut-name { min-width: 0; }
.nut-often .nut-count { flex: 0 0 auto; font-size: 13px; color: var(--muted); }

.nut-table {
  width: 100%; margin: 8px 0 0; border-collapse: collapse;
  font-family: var(--ui); font-size: 14px;
}
.nut-table th, .nut-table td {
  padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--hair);
  vertical-align: top;
}
.nut-table thead th {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.nut-table tbody tr:last-child th, .nut-table tbody tr:last-child td { border-bottom: 0; }
.nut-table .nut-num { text-align: right; white-space: nowrap; }
.nut-table .nut-course { color: var(--muted); }

@media (max-width: 560px) {
  .nut-table { font-size: 13px; }
  .nut-table th, .nut-table td { padding: 6px 5px; }
  .nut-table .nut-course { display: none; }
  .nut-table thead th:nth-child(2) { display: none; }
}