/* 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: none; }
.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; }
.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; }

/* Audit 2: contain wide utilities and names without hiding document overflow. */
.gd > .prose, .bw, .bw-h, .bw-b, .badge-hero > * { min-width: 0; }
.tbl, .bw-b pre, .bw-b code { max-width: 100%; overflow-x: auto; }
.table-cue { color: var(--mist); font-size: 13px; margin-bottom: 8px; }
.crumbs { flex-wrap: wrap; }
.crumbs [aria-current="page"] { min-width: 0; overflow-wrap: anywhere; }
.stage-switch button { min-height: 44px; min-width: 44px; }
.stage[data-theme="light"] .stage-switch button:focus-visible { outline-color: #1a1a1b; }
.live-badge { background: #c62e26; color: #fff; }
.live-badge.off { background: #333; }
.adult-badge { position: absolute; right: 8px; top: 8px; padding: 3px 6px; background: #141415; color: #fff; border: 1px solid #aaa; border-radius: 4px; font: 700 11px/1.2 var(--f); }
.livegrid.collection-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
@media (min-width: 760px) { .livegrid.collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.collection-more { margin-top: 16px; }
.collection-more[hidden] { display: none; }
.facet-limit { margin: 6px 0 12px; color: var(--stone); font-size: 12px; }
.camera-discovery { margin-top: 12px; }
.camera-discovery a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
/* Expanded source disclosures obey the same phone width as their closed cards. */
.facts { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.facts > * { min-width: 0; overflow-wrap: anywhere; }
.ch .list .receipt-unavailable { padding: 10px 0; }
.ch .list .receipt-unavailable .t { display: block; white-space: normal; overflow-wrap: anywhere; }
.receipt-unavailable .m { color: var(--stone); font-size: 13px; }

/* The live card (owner, 21 Oct 2026): one 16:9 picture (cover; vertical streams zoomed to fill by cards.js), the name,
   the area and, in live grids, "Live · 1h 20m". LIVE, 18+ and platform badges sit on the picture. Every card in a grid has
   the same three-line frame, and the skeletons have it too, so nothing moves when the live data arrives. */
.livegrid .air { display: flex; flex-direction: column; }
.livegrid .air-pic img.shot { object-fit: cover; object-position: 50% 50%; transform-origin: 50% 50%; }
.livegrid .air-pic img.av { width: auto; height: 74%; max-width: 74%; }
.livegrid .nm { padding: 9px 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livegrid .ar { padding: 2px 10px 10px; color: var(--mist); }
.livegrid .lv { display: flex; align-items: center; gap: 6px; margin-top: -6px; padding: 0 10px 10px; font: 600 13px/1.3 var(--f); color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livegrid .lv::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--live); }
.livegrid .lv[hidden], .plat[hidden] { display: none; }
.livegrid .sk .lv { height: 1.3em; margin: -6px 10px 10px; padding: 0; border-radius: 4px; background: #19191b; }
.livegrid .sk .lv::before { display: none; }
.livegrid .facet-chips, .livegrid .page-lang, .livegrid .card-action { display: none; }
.livegrid, .livegrid.rail, .rel-grid, .filters, .filters.scroll { scrollbar-width: none; }
.livegrid::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
.adult-badge { top: 6px; right: 6px; padding: 2px 5px; }
/* Tags only on channel pages: at most three, wrapping. */
.ch-id .facet-chips { flex-wrap: wrap; overflow: visible; }

/* "Live now" strip on /streams/ and the area pages (owner, 21 Oct 2026): the rail of live cards above the list. */
.live-now h2 { display: flex; align-items: baseline; gap: 8px; }
.live-now .livegrid.rail { position: relative; }
.live-now + .first-sec { margin-top: 24px; }
/* Card lines in fixed pixels: skeletons and cards are the same height whatever the font timing (no shift on font swap). */
.livegrid .air .nm { line-height: 20px; min-height: 20px; }
.livegrid .air .ar { line-height: 18px; min-height: 18px; }
.livegrid .air .lv { line-height: 18px; min-height: 18px; }
.livegrid .sk .nm { height: calc(20px + 9px); min-height: 0; }
.livegrid .sk .ar { height: calc(18px + 12px); min-height: 0; }
.livegrid .sk .lv { height: 18px; }
.livegrid .sk .nm::after, .livegrid .sk .ar::after { height: 12px; }