/* /libraries — the site's utility guide system (Inter, slate-blue, near-white,
   soft blue-grey, hairlines). Phone first; centred column on
   wide screens. The shared chrome is nav-footer.css's; this page uses the
   standard header and the dashboard footer theme from footer-themes.css. */
body.libraries-page {
  --lb-green: #356382; --lb-ink: #22312b; --lb-muted: #55635c; --lb-white: #fbfcfb; --lb-ground: #f2f5f3;
  --lb-line: #d5dcd7; --lb-sage: #e6eef3; --lb-greygreen: #ebf0ec; --lb-slate: #35576b;
  margin: 0; background: var(--lb-ground); color: var(--lb-ink); font-family: "Inter", Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
body.libraries-page .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lb-page { max-width: 720px; margin: 0 auto; padding: 0 16px 32px; }

.lb-head { padding: 26px 0 18px; }
.lb-eyebrow { margin: 0 0 9px !important; font: 600 11px/1.4 "Inter", Arial, sans-serif !important; letter-spacing: .18em; text-transform: uppercase; color: var(--lb-slate) !important; }
.lb-head h1 { margin: 0; font: 700 clamp(32px, 4.2vw, 46px)/1.08 "Inter", Arial, sans-serif; letter-spacing: -.035em; }
.lb-head h1 + p { margin: 9px 0 0; max-width: 72ch; font: 400 15.5px/1.55 "Inter", Arial, sans-serif; color: var(--lb-muted); }
.lb-page h2 { margin: 0 0 10px; font: 600 19px/1.25 "Inter", Arial, sans-serif; letter-spacing: -.015em; }

/* ---------- what's on ---------- */
.lb-whatson { padding: 16px 16px 18px; border: 1px solid var(--lb-line); border-radius: 14px; background: #fff; }
.lb-pick label { display: block; margin: 0 0 6px; font: 600 13px/1.4 "Inter", Arial, sans-serif; color: var(--lb-ink); }
.lb-pick-box { position: relative; }
.lb-pick-box::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.8px solid var(--lb-muted); border-bottom: 1.8px solid var(--lb-muted); transform: rotate(45deg); pointer-events: none; }
.lb-pick select { width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 44px 0 14px; border: 1px solid #c3cbc3; border-radius: 12px; background: #fff; color: var(--lb-ink); font: 500 16px/1.3 "Inter", Arial, sans-serif; -webkit-appearance: none; appearance: none; }
.lb-status { margin: 12px 0 0; font: 400 14px/1.5 "Inter", Arial, sans-serif; color: var(--lb-muted); }
.lb-status.is-error { color: var(--lb-ink); }
.lb-status[hidden] { display: none; }
.lb-events { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.lb-events[hidden] { display: none; }
.lb-event { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 11px; border: 1px solid var(--lb-line); border-radius: 12px; background: var(--lb-white); }
.lb-event-title { font: 600 15px/1.3 "Inter", Arial, sans-serif; color: var(--lb-ink); text-decoration: none; overflow-wrap: anywhere; }
.lb-event-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.lb-event-when { font: 400 13px/1.4 "Inter", Arial, sans-serif; color: var(--lb-muted); }
.lb-event-ages { align-self: flex-start; margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: var(--lb-sage); color: var(--lb-slate); font: 600 11px/1.3 "Inter", Arial, sans-serif; letter-spacing: .04em; }
.lb-links { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; }
.lb-link { display: block; padding: 9px 0; font: 600 14px/1.4 "Inter", Arial, sans-serif; color: var(--lb-green); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(53, 99, 130, .35); }

/* ---------- all branches ---------- */
.lb-all { margin: 22px 0 0; }
.lb-all-lede { margin: -4px 0 10px; font: 400 14px/1.5 "Inter", Arial, sans-serif; color: var(--lb-muted); }
.lb-group { margin: 0 0 12px; }
.lb-group-h { margin: 0 0 6px; font: 600 11px/1.5 "Inter", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--lb-slate); }
.lb-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lb-line); border-radius: 12px; background: #fff; overflow: hidden; }
.lb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; min-height: 52px; padding: 8px 8px 8px 14px; }
.lb-row + .lb-row { border-top: 1px solid var(--lb-line); }
.lb-row-name { font: 500 15px/1.3 "Inter", Arial, sans-serif; color: var(--lb-ink); }
.lb-row.is-closed .lb-row-name { color: var(--lb-muted); }
.lb-row-note { grid-column: 1; font: 600 11px/1.3 "Inter", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--lb-slate); }
.lb-row-go { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--lb-line); border-radius: 10px; background: var(--lb-white); color: var(--lb-green); font: 600 13px/1 "Inter", Arial, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.lb-row-go:hover { border-color: #78877f; }

.lb-foot { margin: 18px 0 0; font: 400 13.5px/1.55 "Inter", Arial, sans-serif; color: var(--lb-muted); }
.lb-foot a { color: var(--lb-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.libraries-page :is(a, button, select):focus-visible { outline: 3px solid var(--lb-green); outline-offset: 2px; }

@media (min-width: 701px) {
  .lb-page { padding-top: 12px; }
  .lb-head { padding: 34px 0 24px; }
  .lb-whatson { padding: 22px 24px 24px; }
  .lb-events { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lb-links { flex-direction: row; gap: 24px; }
  /* Columns, not a grid. In a grid every row is as tall as its tallest cell, so
     Petrolia's one branch -- a 66px card -- was paired with St. Clair Township's
     seven and sat in a 479px box, leaving 390px of empty grey beneath it. Four
     municipalities were stranded that way, about 780px of holes down the page,
     and the section read as cards floating in space. Columns let the groups
     flow down one column and on to the next, so each takes its own height. */
  .lb-all { display: block; columns: 2; column-gap: 20px; }
  .lb-all h2, .lb-all-lede { column-span: all; }
  .lb-group { break-inside: avoid; margin-bottom: 16px; }
  .lb-row { min-height: 48px; }
}

/* ---------- wide desktop ----------
   The page was a 720px column at every width above 701px, so on a 1600px
   screen it was the phone layout with 440px of empty grey down each side --
   "a phone layout stretched to 1280px is not responsive, it is unfinished".
   The branch list is the bulk of the page, so the width goes into a third
   column of branches rather than into a longer single column. The picker
   card does NOT take the full width with it: a 1100px-wide box holding one
   select and two links reads as a stretched form, so its contents stay on a
   comfortable measure while the box keeps the page's edges. */
@media (min-width: 1040px) {
  .lb-page { max-width: 1060px; }
  .lb-all { columns: 3; column-gap: 26px; }
  /* Cap the BOX, not the select. The chevron is .lb-pick-box::after at
     right:16px of that box, so capping the select alone left the arrow
     behind at the far edge of the card. */
  .lb-pick-box { max-width: 460px; }
  .lb-whatson > * { max-width: 900px; }
}
@media (min-width: 1360px) {
  .lb-page { max-width: 1180px; }
}