/* Coastal Bun Watch pages (webcams.html, webcams-surnadal.html): shared styles. */
/* One unit, --u, sizes everything (as ops.html). The wall layouts fit a 100 × 56.25 u canvas
   (landscape) or 56.25 × 100 u (portrait, ?wall only) to the viewport; the stacked layout
   (phones, narrow windows) scrolls and sets --u from the width.
   Red is for alarms only: the live dot and a camera that has stopped. */
:root {
  --u: clamp(8px, 2.4vw, 11px);
  --stone: #6B6458;
  --line: calc(0.22 * var(--u)) solid var(--ink);
  --drop: calc(0.5 * var(--u)) calc(0.5 * var(--u)) 0 var(--ink);
  --gap: calc(1.2 * var(--u));
}
html, body { background: var(--bg); }
body { font-size: calc(1.8 * var(--u)); line-height: 1.3; }
.board {
  display: grid; gap: var(--gap); padding: var(--gap);
  grid-template-columns: 1fr;
  grid-template-areas: "top" "hero" "cams" "rail" "bulletin" "about";
}
.panel { position: relative; background: var(--bg); border: var(--line); box-shadow: var(--drop); min-width: 0; min-height: 0; overflow: hidden; }
.dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--red); margin-right: 0.45em; vertical-align: 0.08em; }
.k { font-size: calc(1.2 * var(--u)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.num { font-variant-numeric: tabular-nums; }

/* ── top bar ── */
.top {
  grid-area: top; display: flex; align-items: center; flex-wrap: wrap; gap: calc(0.4 * var(--u)) calc(1.6 * var(--u));
  background: var(--ink); color: var(--bg); border: var(--line); box-shadow: var(--drop);
  padding: calc(0.6 * var(--u)) calc(1.4 * var(--u));
}
.top .logo { font-size: calc(1.8 * var(--u)); text-decoration: none; color: inherit; }
.top h1 { font-size: calc(1.8 * var(--u)); font-weight: 500; letter-spacing: -0.01em; }
.top .sector { font-size: calc(1.4 * var(--u)); color: #CFC8B6; white-space: nowrap; }
.top .spacer { flex: 1; }
.top .feed { font-size: calc(1.4 * var(--u)); color: #CFC8B6; white-space: nowrap; }
.top .feed.stale .dot { background: #8F887A; }
.top .clock { font-size: calc(2.8 * var(--u)); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }

/* ── hero: the live stream ── */
.hero { grid-area: hero; aspect-ratio: 16 / 9; background: var(--ink); }
.hero .poster, .hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.hero iframe { opacity: 0; transition: opacity 1.2s; }
.hero iframe.on { opacity: 1; }
.chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: calc(0.6 * var(--u));
  background: var(--bg); border: var(--line); box-shadow: calc(0.3 * var(--u)) calc(0.3 * var(--u)) 0 var(--ink);
  font-size: calc(1.4 * var(--u)); font-weight: 700; line-height: 1.1; padding: calc(0.35 * var(--u)) calc(0.8 * var(--u));
  white-space: nowrap; max-width: calc(100% - 1.6 * var(--u)); overflow: hidden; text-overflow: ellipsis;
}
.chip small { font-weight: 500; color: var(--stone); font-size: 0.86em; }
.hero .chip { left: calc(1 * var(--u)); bottom: calc(1 * var(--u)); font-size: calc(1.7 * var(--u)); }
/* a hero that is a still (a sector without live video): two layers crossfade, like the camera tiles */
.hero.still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s; }
.hero.still img.show { opacity: 1; }
.hero.still .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(1.6 * var(--u)); font-weight: 700; letter-spacing: 0.14em; color: var(--stone); }
.hero.stale .chip { background: var(--red); color: var(--bg); }
.hero.stale .chip small { color: var(--bg); }
.hero .live { left: calc(1 * var(--u)); top: calc(1 * var(--u)); bottom: auto; background: var(--red); color: var(--bg); letter-spacing: 0.14em; }
.hero .live .dot { background: var(--bg); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

/* ── camera stills ── */
.cams { grid-area: cams; display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
.cam { aspect-ratio: 16 / 10; background: var(--cream); }
.cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s; }
.cam img.show { opacity: 1; }
.cam .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(1.3 * var(--u)); font-weight: 700; letter-spacing: 0.14em; color: var(--stone); }
.cam .chip { left: calc(0.5 * var(--u)); bottom: calc(0.5 * var(--u)); gap: calc(0.5 * var(--u)); font-size: calc(0.95 * var(--u)); border-width: calc(0.15 * var(--u));
  padding: calc(0.2 * var(--u)) calc(0.5 * var(--u)); box-shadow: calc(0.2 * var(--u)) calc(0.2 * var(--u)) 0 var(--ink); max-width: calc(100% - 1 * var(--u)); }
.cam .no-sec { position: absolute; z-index: 2; right: calc(0.5 * var(--u)); top: calc(0.5 * var(--u)); font-size: calc(0.75 * var(--u)); font-weight: 700; letter-spacing: 0.12em;
  background: var(--ink); color: var(--bg); padding: calc(0.15 * var(--u)) calc(0.45 * var(--u)); }
.cam.stale .chip { background: var(--red); color: var(--bg); }
.cam.stale .chip small { color: var(--bg); }
.report { aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; gap: calc(0.6 * var(--u));
  padding: calc(1.2 * var(--u)); background: var(--yellow); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.report b { font-size: calc(2 * var(--u)); line-height: 1.1; letter-spacing: -0.01em; }
.report span { font-size: calc(1.35 * var(--u)); font-weight: 500; }
.report:hover { transform: translate(-2px, -2px); box-shadow: calc(0.5 * var(--u) + 2px) calc(0.5 * var(--u) + 2px) 0 var(--ink); }

/* ── rail: the conditions ── */
.rail { grid-area: rail; display: grid; gap: var(--gap); grid-template-rows: 1fr auto; min-height: 0; }
.wx { padding: calc(0.9 * var(--u)) calc(1.2 * var(--u)); display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); }
.wx .head { display: flex; align-items: center; gap: calc(1.4 * var(--u)); }
.wx .temp { font-size: calc(4.4 * var(--u)); font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; }
.wx .temp small { font-size: 0.5em; vertical-align: 0.7em; }
.wx .ico { width: calc(5 * var(--u)); height: calc(5 * var(--u)); flex: none; }
.wx .ico svg { width: 100%; height: 100%; }
.wx .facts { font-size: calc(1.45 * var(--u)); font-weight: 500; line-height: 1.35; margin-left: auto; text-align: right; }
.wx .facts b { font-weight: 700; }
.warrow { display: inline-block; margin-right: 0.25em; }
.hours { display: grid; grid-template-columns: repeat(12, 1fr); border-top: var(--line); padding-top: calc(0.6 * var(--u)); text-align: center; }
.hours .h { min-width: 0; }
.hours .t { font-size: calc(1.1 * var(--u)); color: var(--stone); font-weight: 500; }
.hours svg { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); margin: calc(0.1 * var(--u)) auto; display: block; }
.hours .d { font-size: calc(1.35 * var(--u)); font-weight: 700; }
.hours .d small { font-weight: 500; color: var(--stone); }
.hours .p { font-size: calc(1.05 * var(--u)); color: var(--stone); white-space: nowrap; }
.wx .kr { display: flex; align-items: center; gap: calc(0.8 * var(--u)); }
.other { margin-left: auto; display: flex; align-items: center; gap: calc(0.6 * var(--u)); font-size: calc(1.45 * var(--u)); font-weight: 500; }
.other svg { width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); }
.other .name { font-weight: 700; }
.tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
.tile { padding: calc(0.8 * var(--u)) calc(1 * var(--u)); }
.tile .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.1em; }
.tile .v { font-size: calc(2.2 * var(--u)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-top: calc(0.2 * var(--u)); white-space: nowrap; }
.tile .v small { font-size: 0.5em; font-weight: 500; letter-spacing: 0; }
.tile .s { font-size: calc(1.25 * var(--u)); color: var(--stone); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.none { color: var(--stone); font-weight: 500; }

/* ── bulletin ── */
.bulletin { grid-area: bulletin; display: flex; align-items: center; gap: calc(1.2 * var(--u)); background: var(--ink); color: var(--bg); border: var(--line); box-shadow: var(--drop);
  padding: calc(0.5 * var(--u)) calc(1.2 * var(--u)); font-size: calc(1.5 * var(--u)); font-weight: 500; min-width: 0; }
.bulletin .lbl { white-space: nowrap; background: var(--yellow); color: var(--ink); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: calc(1.15 * var(--u)); padding: calc(0.2 * var(--u)) calc(0.6 * var(--u)); }
.bulletin .order { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bulletin .credit { margin-left: auto; color: #9A9384; font-size: calc(1.1 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bulletin a { color: inherit; }

/* ── about (stacked layout only) ── */
.about { grid-area: about; max-width: 46em; font-size: 16px; line-height: 1.6; padding: 8px 4px 24px; }
.about h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 8px; }
.about h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.about p, .about ul { margin-bottom: 10px; }
.about ul { padding-left: 1.2em; }
.about a { color: inherit; }
.about nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.about nav a { border: var(--border); box-shadow: var(--shadow-sm); padding: 4px 10px; font-weight: 700; text-decoration: none; background: var(--bg); }

@media (min-width: 600px) { .cams { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) {
  .hours { grid-template-columns: repeat(6, 1fr); }
  .hours .h:nth-child(even) { display: none; }
  .tiles { grid-template-columns: 1fr; }
}
@media (max-width: 999px) { .bulletin { flex-wrap: wrap; } .bulletin .order, .bulletin .credit { white-space: normal; margin-left: 0; } }

/* Landscape wall: any window ≥ 1000 px wide and wider than 13:10. */
@media (min-width: 1000px) and (min-aspect-ratio: 13/10) {
  :root { --u: min(1vw, 1.7778vh); }
  html, body { height: 100%; overflow: hidden; }
  body { display: grid; place-items: center; }
  .board {
    width: calc(100 * var(--u)); height: calc(56.25 * var(--u));
    grid-template-columns: calc(52 * var(--u)) 1fr;
    grid-template-rows: auto minmax(0, 1fr) calc(12.4 * var(--u)) calc(3.6 * var(--u));
    grid-template-areas: "top top" "hero rail" "cams cams" "bulletin bulletin";
  }
  .top { flex-wrap: nowrap; }
  .hero { aspect-ratio: auto; }
  .cams { grid-template-columns: repeat(5, 1fr); }
  .cam { aspect-ratio: auto; }
  .report, .about { display: none; }
}

/* Portrait wall (a screen on its side): only with ?wall, so phones keep scrolling. */
@media (max-aspect-ratio: 3/4) {
  :root.wall { --u: min(1.7778vw, 1vh); }
  .wall, .wall body { height: 100%; overflow: hidden; }
  .wall body { display: grid; place-items: center; }
  .wall .board {
    width: calc(56.25 * var(--u)); height: calc(100 * var(--u));
    grid-template-rows: auto auto minmax(0, 1fr) auto calc(3.6 * var(--u));
    grid-template-areas: "top" "hero" "cams" "rail" "bulletin";
  }
  .wall .top { flex-wrap: nowrap; }
  .wall .top .sector, .wall .top .feed .long { display: none; }
  .wall .cams { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
  .wall .cam, .wall .report { aspect-ratio: auto; }
  .wall .bulletin .credit { display: none; }
  .wall .about { display: none; }
}
.wall body { cursor: none; }
.wall .report { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}