/* Shared styles for the info pages and hubs (polish round, 20 Oct 2026). Loaded on every page except /streams/timpaemi/,
   which stays byte-identical to its approved build; styles.css is therefore left unchanged. */
/* Info pages (polish round, 20 Oct 2026): tonight, reports, cameras and the directory hubs use the channel-page
   rhythm (.ch, .ch-sec, .glance, .list, details.det). Title + one line, then the content; method notes go in one
   details.det at the end. Only the pieces below are new. */
.pg-head { padding-top: 20px; }
.pg-head h1 { font-size: clamp(28px, 6.4vw, 44px); line-height: 1.08; overflow-wrap: anywhere; max-width: 24ch; }
.pg-head .ch-desc { margin-top: 8px; }
.pg .first-sec { margin-top: 20px; }
.pg-cols { display: grid; gap: 8px 40px; }
@media (min-width: 760px) { .pg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg .bins { max-width: none; margin: 4px 0 0; }
.pg details.det { margin-top: 0; }
.pg details.det .prose p { margin: 0 0 10px; }
.pg details.det .prose h3 { font-size: 15px; margin: 16px 0 6px; }
/* A horizontal rail of the home picture cards: 2.2 cards on phones, 4 on wide screens. */
.livegrid.rail { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: thin; }
.livegrid.rail > .air { scroll-snap-align: start; }
@media (min-width: 760px) { .livegrid.rail { grid-auto-columns: calc((100% - 42px) / 4); } }
/* Chips that are radio buttons (tonight's filters) look exactly like the directory filter buttons. */
.filters label { position: relative; display: inline-flex; align-items: center; min-height: 44px; flex: none; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--bone); font: 500 15px var(--f); cursor: pointer; }
.filters label input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.filters label:has(input:checked) { background: var(--bone); color: var(--night); border-color: var(--bone); }
.filters label:has(input:focus-visible) { outline: 2px solid var(--bone); outline-offset: 2px; }
.filters + .filters { margin-top: 8px; }
.filters.scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent); }
@media (max-width: 559px) {
  .pg .filters { flex-wrap: nowrap; overflow-x: auto; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  .pg .col-art { display: none; } /* decorative art: shown on wider screens, not in front of the content on phones */
  .pg-head { padding-top: 14px; }
}
@media (max-width: 759px) { .city-top .ch-hero { display: none; } } /* the city portal has no picture of its own: chooser first on phones */
/* Hub heads: one tight block (title, line, search, chips) before the rows. */
.pg .pg-head .find { margin-top: 14px; }
.pg .pg-head .filters { margin-top: 10px; }
.pg .first-sec > .count { margin: 0 0 6px; }
@media (max-width: 559px) { .pg .with-art { gap: 0; } .pg .pg-head .find input { min-height: 48px; } .pg .pg-head .find svg { top: 15px; } }
/* Cams page: area groups of picture cards, two groups side by side on wide screens. */
.cam-g .ch-h3 { margin-top: 12px; }
@media (min-width: 760px) { .cam-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } .cam-groups .livegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .ch.pg > .ch-sec:has(> .rows), .ch.pg > .ch-sec:has(.areas-g), .ch.pg > .ch-sec:has(.rail) { max-width: none; } }
/* Dated facets are present in the initial HTML; no delayed chip insertion. */
.facet-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.facet { display: inline-block; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; font-size: 11px; line-height: 1.45; color: var(--mist); overflow-wrap: anywhere; }
.livegrid .facet-chips { padding: 0 10px 10px; margin-top: 0; }
.row > a > span { min-width: 0; }
.facet-evidence { padding-left: 20px; font-size: 14px; }
.facet-evidence li { margin: 14px 0; }
.facet-evidence p { margin: 4px 0; }
.air[hidden] { display: none !important; }
.filters > .small { align-self: center; }
/* Tonight's live rail keeps one fixed frame as its known cards replace skeletons. */
[data-tonight-live] .air:not(.air-msg) { position: relative; padding-bottom: 34px; }
[data-tonight-live] .facet-chips { position: absolute; bottom: 0; left: 0; right: 0; flex-wrap: nowrap; height: 30px; overflow-x: auto; }
[data-tonight-live] .facet { white-space: nowrap; flex-shrink: 0; }
.first .air:not(.air-msg) { position: relative; padding-bottom: 34px; }
.first .facet-chips { position: absolute; bottom: 0; left: 0; right: 0; flex-wrap: nowrap; height: 30px; overflow-x: auto; }
.first .facet { flex-shrink: 0; white-space: nowrap; }