/* The Cameras pages on the pages' frame (prompt 82): the wall of every daily camera's newest frame filling the stage, the
   column a navigator of cameras by state, the days along the stage's foot, and a chosen camera on the right side with its
   days along the foot, the column still the navigator.
   It reads the frame's colours and type through the frame's names (manner/frame.css), so day and night are the map's, and
   every rule that sets a paragraph, a link or a button is written under .manner-page, as the frame's notes ask.

   The crop is the house's of 15 October (guide/cameras/frame-text.json, read by eye on every camera's newest frame): at a
   wall's size a camera's burned-in caption cannot be read, so a frame is shown at 16:10 and held to its foot, which takes
   off a 4:3 frame's top sixth and the text there; a camera whose station line runs along its foot keeps its whole frame;
   a frame wider than 16:10 is enlarged from its foot by a fifth, so its top sixth goes as a 4:3 frame's does; and the
   five 9:16 river gauges are held a quarter of the way down, which shows the band from 16 to 51 per cent of their height,
   below their text and above their grassy foot. A chosen camera's picture is held the same way. */

/* The wall: six across at the owner's laptop, the morning's first frame two across and two down. */
.cameras-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 8px;padding:12px 14px 22px;align-content:start}
.cameras-tile{position:relative;min-width:0;transition:opacity .16s ease}
.cameras-tile.is-lead{grid-column:span 2;grid-row:span 2}
.cameras-tile.is-dim{opacity:.28}
.manner-page .cameras-open{display:block;color:inherit;text-decoration:none;border-radius:3px}
.cameras-well{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:var(--surface)}
.cameras-well img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.cameras-well.camera-frame-whole img{object-fit:contain}
.cameras-well.camera-frame-wide img{transform:scale(1.2);transform-origin:50% 100%}
.cameras-well.camera-frame-portrait img{object-position:50% 25%}
.cameras-name{display:block;margin-top:4px;font:500 12.5px/1.25 var(--manner-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cameras-when{display:block;font-size:10.5px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cameras-tile.is-lead .cameras-name{font-size:15px}
.cameras-tile.is-lead .cameras-when{font-size:11.5px}
.cameras-lead-note{display:block;margin-top:7px;font-size:11.5px;line-height:1.35;color:var(--muted)}
.manner-page .cameras-open:hover .cameras-name,.manner-page .cameras-open:focus-visible .cameras-name{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px}

/* The column, the navigator: the sort and show, how the wall is ordered, folded, "All cameras", then every camera as one
   line under its state, each state with its word and its count, the chosen camera's line marked. */
.cameras-controls{display:grid;gap:7px;padding:0 20px 10px}
.cameras-controls[hidden]{display:none}
.cameras-sort,.cameras-show{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px}
.cameras-control-label{flex:0 0 2.6rem;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.manner-page .cameras-controls button{display:inline-flex;align-items:baseline;gap:5px;border:1px solid var(--line);border-radius:1rem;padding:3px 9px;font-size:12px;line-height:1.35;background:var(--paper);color:var(--ink);cursor:pointer}
.manner-page .cameras-controls button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--paper))}
.manner-page .cameras-controls button[aria-pressed=false]{color:var(--muted)}
.cameras-order{padding:0 20px 6px}
.manner-page .cameras-order p{margin:4px 0 2px;font-size:12px;line-height:1.5;color:var(--muted)}
.manner-page .cameras-all{margin:4px 20px 0;font-size:13px}
.manner-page .cameras-all a{text-decoration-thickness:1px;text-underline-offset:3px}
.manner-page .cameras-all a[aria-current]{text-decoration:none;color:var(--muted)}
.cameras-states{padding:2px 20px 12px}
.manner-page .cameras-states h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:12px 0 2px;font:600 10.5px/1.4 var(--manner-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cameras-state-word{font:italic 400 12.5px/1.3 var(--manner-serif);letter-spacing:0;text-transform:none;color:var(--accent)}
.cameras-state-count{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;font-size:11.5px}
.cameras-states ul{list-style:none;margin:0;padding:0}
.cameras-states li[hidden],.cameras-state[hidden]{display:none}
.manner-page .cameras-states a{display:flex;align-items:center;gap:9px;padding:4px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.25;text-decoration:none}
.cameras-states img,.cameras-line-blank{flex:none;width:32px;height:32px;border-radius:2px;object-fit:cover;background:var(--surface)}
.cameras-line-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cameras-line-word{flex:none;font-size:11.5px;color:var(--muted)}
.manner-page .cameras-states a:hover,.manner-page .cameras-states a[aria-current]{color:var(--accent)}
.manner-page .cameras-states a[aria-current]{border-bottom-color:var(--accent);font-weight:600}
.manner-page .cameras-states a[aria-current] .cameras-line-word{color:var(--accent)}
.cameras-states .manner-count{flex:none}
.manner-page .cameras-states .cameras-more-move a{justify-content:space-between;margin-top:12px}
.manner-page .cameras-tally{display:flex;align-items:baseline;gap:9px;margin-left:20px;margin-right:20px;padding:12px 0 14px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.4}
.cameras-tally-count{flex:none;font:500 28px/1 var(--manner-serif);font-variant-numeric:tabular-nums;letter-spacing:-.4px}

/* The wall's words: under each frame its word on its colour; By state sets each state's heading across the wall. */
.cameras-tile[hidden],.cameras-wall-state[hidden],.cameras-board[hidden],.cameras-camera[hidden]{display:none}
.cameras-word{display:block;font:italic 400 11.5px/1.3 var(--manner-serif);color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.manner-page .cameras-wall-state{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:10px 0 0;padding-bottom:4px;border-bottom:1px solid var(--line);font:400 21px/1.2 var(--manner-serif)}
.cameras-wall-state .cameras-state-word{font-size:15px}
.cameras-wall-count{font:12px/1.3 var(--manner-sans);color:var(--muted)}
.cameras-wall.is-resorted .cameras-tile.is-lead{grid-column:auto;grid-row:auto}
.cameras-wall.is-resorted .cameras-lead-note{display:none}
.cameras-wall.is-resorted .cameras-tile.is-lead .cameras-name{font-size:12.5px}

/* The strip along the stage's foot: the days, newest first, as the map's time bar sets its chips. */
.cameras-strip{padding:.7rem 1rem .6rem;font-family:var(--manner-sans)}
.cameras-days{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:thin;padding-bottom:.35rem}
.manner-page .cameras-days button{flex-shrink:0;display:inline-flex;gap:.45rem;align-items:baseline;border:1px solid transparent;border-radius:1rem;padding:.3rem .55rem;font-size:.75rem;white-space:nowrap}
.manner-page .cameras-days button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--paper))}
.cameras-days small{opacity:.7;font-size:.65rem;font-variant-numeric:tabular-nums}
.manner-page .cameras-days button[hidden]{display:none}
.manner-page .cameras-line{font-size:.7rem;padding-top:.2rem;color:var(--muted)}
@media(min-width:761px){.manner-page .cameras-line-count{display:none}}

/* More cameras, below the wall: the ones not looked at every morning, by state, each opening its own page. */
.cameras-more{padding:26px 28px 10px;border-top:1px solid var(--line)}
.manner-page .cameras-more h2{font:400 21px/1.25 var(--manner-serif);margin:0 0 6px}
.manner-page .cameras-more>p{max-width:46rem;font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.cameras-more-states{columns:3;column-gap:28px}
.cameras-more-state{break-inside:avoid;margin:0 0 16px}
.manner-page .cameras-more-state h3{margin:0 0 4px;padding-bottom:4px;border-bottom:1px solid var(--line);font:600 10.5px/1.4 var(--manner-sans);letter-spacing:.14em;text-transform:uppercase}
.cameras-more-state ul{list-style:none;margin:0;padding:0}
.cameras-more-state li{padding:4px 0 5px;font-size:12.5px;line-height:1.35}
.manner-page .cameras-more-state a{text-decoration-thickness:1px}
.cameras-more-note{display:block;font-size:11px;color:var(--muted)}
.manner-page .cameras-more-state .camera-player button{margin-top:3px;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.manner-page .cameras-more-state .camera-player p{font-size:11px;color:var(--muted)}
.cameras-more-state iframe{display:block;width:100%;aspect-ratio:16/9;border:0;margin-top:4px}
.cameras-thanks{padding:10px 28px 30px;font-size:12px;line-height:1.5;color:var(--muted)}
.manner-page .cameras-thanks h2{font:600 10.5px/1.4 var(--manner-sans);letter-spacing:.14em;text-transform:uppercase;margin:14px 0 6px;color:var(--ink)}
.manner-page .cameras-thanks p{margin:0 0 6px}
.cameras-thanks blockquote{margin:0 0 10px 14px}

/* A camera chosen, on the right side: its picture as large as the stage allows, held as the wall holds it, a quiet tag
   with its name and day at the top left, its small map as an inset at the top right, and one band of its information. */
.cameras-camera{display:flex;flex-direction:column;height:100%;min-height:0;padding:12px 14px 6px;box-sizing:border-box}
.cameras-view-room{flex:1 1 auto;min-height:0;container-type:size}
.cameras-view{margin:0 auto;width:min(100%,160cqh)}
.cameras-view-well{border-radius:4px;touch-action:pan-y}
.cameras-view-well img{position:absolute;inset:0}
.cameras-view-then{clip-path:inset(0 calc(100% - var(--cut,50%)) 0 0)}
.cameras-split{position:absolute;top:0;bottom:0;left:var(--cut,50%);z-index:3;width:28px;margin-left:-14px;cursor:ew-resize;touch-action:none}
.cameras-split::before{content:'';position:absolute;top:0;bottom:0;left:13px;width:2px;background:var(--paper);box-shadow:0 0 0 1px #0006}
.cameras-split::after{content:'⇔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--paper);color:var(--ink);font-size:14px;line-height:26px;text-align:center;box-shadow:0 1px 4px #0005}
.cameras-split[hidden]{display:none}
.manner-page .cameras-tag,.manner-page .cameras-then-day,.manner-page .cameras-now-day{position:absolute;z-index:2;margin:0;padding:5px 9px;border-radius:3px;background:color-mix(in srgb,var(--paper) 86%,transparent);color:var(--ink);font-size:12px;line-height:1.3}
.manner-page .cameras-tag{top:10px;left:10px;display:flex;flex-direction:column;max-width:60%}
.cameras-tag-name{font:500 15px/1.25 var(--manner-serif)}
.cameras-tag-when{font-size:11.5px;color:var(--muted)}
.manner-page .cameras-then-day{bottom:10px;left:10px}
.manner-page .cameras-now-day{bottom:10px;right:10px}
.manner-page .cameras-then-day[hidden],.manner-page .cameras-now-day[hidden],.cameras-inset[hidden]{display:none}
.manner-page .cameras-well.is-comparing .cameras-tag{display:none}
.cameras-inset{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 7px 4px;border-radius:3px;background:color-mix(in srgb,var(--paper) 88%,transparent)}
.cameras-map{display:block;max-width:96px;max-height:96px;width:auto;height:auto}
.cameras-map-land{fill:var(--surface);stroke:var(--muted);stroke-width:1;stroke-linejoin:round;fill-rule:evenodd}
.cameras-map-dot{fill:var(--accent);stroke:var(--paper);stroke-width:1.5}
.cameras-inset-name{font-size:10.5px;line-height:1.2;color:var(--ink)}
.cameras-info{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;max-width:1100px;margin:0 auto;padding:8px 2px 0;width:100%;box-sizing:border-box}
.manner-page .cameras-info p{margin:0}
.manner-page .cameras-info-place{font:16px/1.3 var(--manner-serif)}
.manner-page .cameras-info-word{font-size:13px}
.manner-page .cameras-info-links{flex-basis:100%;font-size:13px}
.manner-page .cameras-info-links a{text-decoration-thickness:1px;text-underline-offset:3px}
.manner-page .cameras-info-note{color:var(--muted)}
.manner-page .cameras-credit,.manner-page .cameras-map-source{font-size:10.8px;line-height:1.4;color:var(--muted)}
.cameras-side-thanks{max-width:1100px;margin:0 auto;padding:4px 16px 18px;font-size:12px;line-height:1.5;color:var(--muted)}
.cameras-side-thanks[hidden]{display:none}
.manner-page .cameras-side-thanks h2{font:600 10.5px/1.4 var(--manner-sans);letter-spacing:.14em;text-transform:uppercase;margin:10px 0 6px;color:var(--ink)}
.manner-page .cameras-side-thanks p{margin:0 0 6px}
.cameras-side-thanks blockquote{margin:0 0 10px 14px}

/* Its days along the foot: one row of saved days, each a small copy with its day beneath it, the shown day marked and the
   handle on it; Play, the shown day in words and Compare beside them. Without the script the row holds every saved day
   as a link to its frame, newest at the right. */
.cameras-timeline{position:relative;padding:8px 14px 6px;font-family:var(--manner-sans)}
.cameras-timeline[hidden],.cameras-strip[hidden],.cameras-handle[hidden],.cameras-timeline-controls[hidden]{display:none}
.cameras-row{display:flex;flex-direction:row-reverse;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.cameras-timeline.is-live .cameras-row{overflow:visible;padding-bottom:10px}
.manner-page .cameras-day{flex:0 0 74px;display:block;min-width:0;color:var(--muted);text-decoration:none;border-radius:3px;cursor:pointer;touch-action:none}
.manner-page .cameras-timeline.is-live .cameras-day{flex:1 1 0;max-width:112px}
.manner-page .cameras-day[hidden]{display:none}
.cameras-day img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 100%;border-radius:3px;background:var(--surface);border:2px solid transparent;box-sizing:border-box}
.cameras-day span{display:block;padding-top:2px;font-size:11px;line-height:1.2;text-align:center;white-space:nowrap}
.manner-page .cameras-day[aria-current=true]{color:var(--ink);font-weight:600}
.cameras-day[aria-current=true] img{border-color:var(--accent)}
.manner-page .cameras-day.is-then img{border-color:var(--ink);border-style:dashed}
.cameras-handle{position:absolute;top:0;width:26px;height:7px;margin-left:-13px;border-radius:4px;background:var(--accent);cursor:grab;touch-action:none}
.cameras-handle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cameras-timeline-controls{display:flex;align-items:center;gap:12px;padding-top:2px}
.manner-page .cameras-play,.manner-page .cameras-compare{flex:none;border:1px solid var(--line);border-radius:1rem;padding:4px 12px;font-size:12.5px;background:var(--paper);color:var(--ink);cursor:pointer}
.manner-page .cameras-play[aria-pressed=true],.manner-page .cameras-compare[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--paper))}
.manner-page .cameras-day-words{flex:1;min-width:0;margin:0;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Narrower windows: four across; the phone: two across, the first frame the phone's width, the camera large on the whole
   window. */
@media(max-width:1099.98px){.cameras-wall{grid-template-columns:repeat(4,minmax(0,1fr))}.cameras-more-states{columns:2}}
@media(max-width:1000px) and (min-width:761px){.cameras-order,.cameras-states{padding-inline:14px}.manner-page .cameras-tally{margin-left:14px;margin-right:14px}.cameras-wall{padding:10px 10px 18px}.cameras-more{padding-inline:18px}}
@media(max-width:760px){
  .cameras-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;padding:6px 10px 18px}
  .cameras-order,.cameras-states,.cameras-controls{padding-inline:16px}
  .manner-page .cameras-all{margin-inline:16px}
  .manner-page .cameras-tally{margin-left:16px;margin-right:16px}
  .manner-page .cameras-line.is-counting .cameras-line-words{display:none}
  .manner-page .cameras-line-count{color:var(--ink)}
  .cameras-strip{padding:.45rem .6rem .3rem}
  .manner-page .cameras-days button{min-height:2rem;padding:.3rem .5rem}
  .cameras-more{padding:20px 16px 8px}
  .cameras-more-states{columns:1}
  .cameras-thanks{padding:8px 16px 24px}
  .cameras-camera{display:block;height:auto;padding:0 0 8px}
  .cameras-view-room{container-type:normal}
  .cameras-view{width:100%}
  .cameras-view-well{border-radius:0}
  .cameras-inset{top:auto;bottom:8px;right:8px;padding:4px 5px 3px}
  .manner-page .cameras-then-day,.manner-page .cameras-now-day{top:8px;bottom:auto}
  .cameras-map{max-width:64px;max-height:64px}
  .cameras-info{padding:8px 12px 0}
  .cameras-side-thanks{padding:0 12px}
  .cameras-timeline{padding:6px 8px 4px}
  .manner-page .cameras-timeline.is-live .cameras-day{max-width:none}
  .cameras-day span{font-size:10px}
  .manner-page .cameras-day-words{white-space:normal;font-size:12px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){.cameras-tile,.cameras-view-well img{transition:none}}