/* /webcam — kamerasiden: live-billede, døgnets timelapse, arkiv.
 *
 * Bygger på tokens.css. Ingen nye farver opfundet; pejlemærke-farverne kommer
 * fra landmarks.json (samme hex som de indbrændte streger og som stregerne på
 * Krak-kortet på /om#synsfelt — én kilde, ikke tre) og sættes inline pr. element.
 *
 * INGEN ny animation. Vindnålen på forsiden er sitets eneste signaturbevægelse;
 * hover-tilstande her er farve- og kantskift, ikke bevægelse. Dusk-båndet er
 * statisk som på /om.
 */

/* ── header-bånd (statisk dusk, som /om) ──────────────────────────────────── */
.wc-band{background:linear-gradient(180deg,#0D1626,#16263E 38%,#33506F 72%,#5E7488);
  color:#E7ECEF;position:relative;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08)}
/* Trætoppene: samme silhuet-greb som mockup'en, rent dekorativt. */
.wc-band::after{content:"";position:absolute;inset:auto 0 -1px 0;height:52px;
  background:#0D1626;pointer-events:none;
  clip-path:polygon(0 100%,0 62%,9% 48%,17% 56%,26% 38%,35% 50%,44% 34%,
                    55% 47%,64% 33%,74% 45%,83% 30%,92% 44%,100% 36%,100% 100%)}
.wc-band .wrap{padding:44px 18px 74px;position:relative;z-index:1}
.wc-kicker{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 14px}
.wc-band h1{font:800 clamp(28px,5vw,44px)/1.05 var(--sans);letter-spacing:-.03em;margin:0 0 12px}
.wc-lede{max-width:60ch;margin:0 0 22px;font-size:15.5px;color:#C6D2DC}

.wc-specs{display:flex;flex-wrap:wrap;gap:14px 0;border-top:1px solid rgba(231,236,239,.18);
  padding-top:16px;max-width:820px;margin:0}
.wc-spec{padding:0 26px 0 0;margin-right:26px;border-right:1px solid rgba(231,236,239,.14)}
.wc-spec:last-child{border-right:0;margin-right:0;padding-right:0}
.wc-spec dt{font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:#8FA4B4;margin:0 0 5px}
.wc-spec dd{margin:0;font:800 16px/1.1 var(--sans);letter-spacing:-.02em}
@media(max-width:640px){
  .wc-band .wrap{padding:34px 18px 60px}
  .wc-spec{padding-right:14px;margin-right:14px}
  .wc-spec dd{font-size:14px}
}

/* ── sektioner ────────────────────────────────────────────────────────────── */
.wc-sec{padding:40px 0}
.wc-sec + .wc-sec{border-top:1px solid var(--line)}
.wc-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.wc-head h2{font:800 23px/1.15 var(--sans);letter-spacing:-.03em;margin:0}
.wc-eyebrow{font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.wc-note{color:var(--muted);font-size:14.5px;max-width:68ch;margin:0 0 22px}

/* ── live-billedet ────────────────────────────────────────────────────────── */
.wc-live{margin:0}
.wc-frame{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:#0D1626;aspect-ratio:16/9;display:block;width:100%}
.wc-frame img{width:100%;height:100%;object-fit:cover;display:block}
/* Status-badget ligger UDEN FOR billedet, ikke oven på det.
   Kameraet brænder selv et bånd ind øverst (URL + tidsstempel) og
   pejlemærke-etiketter nederst — et overlay ville lægge sig oven i rigtige
   pixels, og hvor det ramte ville afhænge af dagens motiv. Uden for rammen er
   det altid læsbart, og billedet får lov at være billedet.
   Samme chip-formsprog som resten af sitet (enigheds-tokens + prik-kanal). */
.wc-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wc-badge{font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;
  color:var(--agree-ok);background:var(--agree-ok-bg)}
.wc-badge i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.wc-badge.is-paused{color:var(--agree-bad);background:var(--agree-bad-bg)}
.wc-badge.is-paused i{background:transparent;border:1.5px solid currentColor}

/* ── pejlemærke-legende ───────────────────────────────────────────────────── */
.wc-cap{margin-top:14px}
.wc-lm{display:flex;flex-wrap:wrap;gap:8px 10px;padding:0;margin:0 0 12px;list-style:none}
.wc-lm li{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:6px 12px 6px 9px;
  font:600 12px/1 var(--sans)}
/* Farven er ren dekoration og aldrig eneste betydningsbærer: navnet står som
   rigtig tekst ved siden af, og rækkefølgen (x_frac) bærer koblingen til
   billedet. Derfor aria-hidden på selve prikken. */
.wc-lm i{width:3px;height:14px;border-radius:2px;flex:none;background:var(--lm,var(--muted))}
.wc-lm span{font:500 11px/1 var(--mono);color:var(--muted)}
.wc-cap p{color:var(--muted);font-size:13.5px;max-width:70ch;margin:0 0 8px}
.wc-cap p:last-child{margin-bottom:0}
.wc-cap a{color:var(--ink);text-underline-offset:3px}

/* ── timelapse-kort ───────────────────────────────────────────────────────── */
.wc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.wc-grid2{grid-template-columns:1fr}}

.wc-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column}
.wc-card-head{display:flex;align-items:baseline;gap:10px;padding:14px 16px 12px;flex-wrap:wrap}
.wc-card-head h3{margin:0;font:800 17px/1.1 var(--sans);letter-spacing:-.02em}
.wc-when{font:500 11px/1 var(--mono);color:var(--muted);margin-left:auto}

.wc-poster{position:relative;cursor:pointer;border:0;padding:0;width:100%;display:block;
  background:#0D1626;font:inherit;color:inherit;aspect-ratio:16/9;overflow:hidden}
.wc-poster img{width:100%;height:100%;object-fit:cover;display:block}
.wc-noposter{position:absolute;inset:0;
  background:linear-gradient(180deg,#16263E,#33506F 60%,#5E7488)}
.wc-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.wc-play i{width:58px;height:58px;border-radius:50%;background:rgba(8,14,22,.55);
  backdrop-filter:blur(3px);border:1.5px solid rgba(255,255,255,.55);
  display:grid;place-items:center;transition:background .18s ease}
.wc-play i::before{content:"";border-left:16px solid #fff;border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:5px}
.wc-poster:hover .wc-play i{background:rgba(8,14,22,.78)}
.wc-poster:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

.wc-video{width:100%;display:block;aspect-ratio:16/9;background:#0D1626}
.wc-video:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.wc-nojs{display:block;padding:12px 16px;font:600 13px/1 var(--sans);color:var(--ink)}

.wc-meta{padding:13px 16px 16px;border-top:1px solid var(--line);margin-top:auto}
.wc-covers{font:600 13px/1.45 var(--sans);margin:0 0 6px}
.wc-facts{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;list-style:none}
.wc-facts li{font:500 11.5px/1 var(--mono);color:var(--muted);
  padding-right:12px;margin-right:12px;border-right:1px solid var(--line)}
.wc-facts li:last-child{border-right:0;margin-right:0;padding-right:0}

/* statuschip — genbruger enigheds-tokens, samme prik-kanal som resten af sitet */
.wc-chip{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono);
  letter-spacing:.05em;padding:5px 10px;border-radius:999px;text-transform:uppercase}
.wc-chip .wc-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.wc-chip.tl-ok{color:var(--agree-ok);background:var(--agree-ok-bg)}
.wc-chip.tl-warn{color:var(--agree-mid);background:var(--agree-mid-bg)}
.wc-chip.tl-warn .wc-dot{background:transparent;border:1.5px solid currentColor;
  background-image:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.wc-chip.tl-off{color:var(--agree-bad);background:var(--agree-bad-bg)}
.wc-chip.tl-off .wc-dot{background:transparent;border:1.5px solid currentColor}

/* tom tilstand — skraveret, så et hul SER ud som et hul */
.wc-empty{aspect-ratio:16/9;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
  display:grid;place-content:center;text-align:center;gap:8px;padding:20px;
  background:repeating-linear-gradient(135deg,transparent,transparent 9px,
             rgba(94,107,115,.055) 9px,rgba(94,107,115,.055) 18px)}
.wc-empty strong{font:800 15px/1.2 var(--sans)}
.wc-empty span{font:500 12.5px/1.5 var(--mono);color:var(--muted);max-width:34ch}

/* ── arkiv-grid ───────────────────────────────────────────────────────────── */
.wc-arch{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px}
/* På telefon giver 212px kun ÉN søjle, og så bliver arkivet en meterlang stak
   fuldbredde-kort. Gridet ER navigationen her — det skal kunne skimmes, ikke
   scrolles igennem. To søjler holder plakaten stor nok til at man kan se
   forskel på en grå og en blå dag, hvilket er hele pointen med at vise den. */
@media(max-width:560px){
  .wc-arch{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
  .wc-day-meta{padding:8px 10px 10px}
  .wc-day-date{font-size:13px}
  .wc-day-sub{font-size:10px}
}
.wc-day{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;text-decoration:none;display:block;
  transition:border-color .16s ease,transform .16s ease}
.wc-day:hover{border-color:var(--cyan);transform:translateY(-2px)}
.wc-day:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* Plakaten i gridet er ALTID et <img> — aldrig et <video>. Eksplicit
   width/height i markupen + aspect-ratio her, så rækkerne ikke hopper mens man
   scroller.
   height:auto ER PÅKRÆVET og må ikke fjernes: width/height-ATTRIBUTTERNE på
   <img> sættes af browseren som presentational hints (altså rigtig CSS), og så
   længe height dermed er 360px, ignoreres aspect-ratio helt — billedet blev
   målt til 234×359 px, altså stående, i et grid der skal være 16:9. */
.wc-day-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:#0D1626;border-bottom:1px solid var(--line)}
.wc-day-meta{padding:10px 12px 12px}
.wc-day-date{font:800 14px/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 3px}
.wc-day-date em{font-style:normal;color:var(--muted);font-weight:600}
.wc-day-sub{font:500 11px/1.4 var(--mono);color:var(--muted);margin:0}
.wc-day.is-gone{opacity:.72}
.wc-day.is-gone .wc-empty{aspect-ratio:16/9;border:0;border-bottom:1px solid var(--line)}
.wc-arch-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;max-width:72ch}
.wc-arch-empty{color:var(--muted);font-size:14.5px;max-width:60ch;margin:0}

/* ── arkivdagens egen rute ────────────────────────────────────────────────── */
.wc-dayview{max-width:920px}
.wc-back{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;margin:0 0 18px}
.wc-back:hover{color:var(--ink)}
.wc-back:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .wc-day,.wc-play i{transition:none}
  .wc-day:hover{transform:none}
}