/* Fjordblikk wall slide (templates/wall/webcams.html), ported 2026-10-10 from claude-collection tools/pi-kiosk/webcam.html, where it
   runs on the office wallboard. Its own fjord-at-dusk palette, kept as the original; the stage is authored at 1920x1080 and zoomed. */
:root{
    /* fjord at dusk — sky over water, one warm horizon */
    --sky0:#0e2a46; --sky1:#0a1f38; --water0:#061527; --water1:#040e1b;
    --horizon:#ffb26b; --horizon-dim:rgba(255,178,107,.28);
    --panel:rgba(14,34,58,.58); --panel2:rgba(9,22,39,.66);
    --line:rgba(120,170,215,.16); --line2:rgba(120,170,215,.09);
    --fg:#eef5fc; --foam:#f7fbff; --dim:#8fb0cc; --faint:#5d7894;
    --marine:#006CA5; --light:#4A9FD8;
    --font:"Mulish","Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{width:100vw;height:100vh;overflow:hidden;background:var(--water1);color:var(--fg);
    font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased;
    display:flex;align-items:center;justify-content:center}

  /* stage is authored at 1920×1080 and scaled to fit whatever the TV reports */
  .stage{position:relative;width:1920px;height:1080px;flex:none;overflow:hidden;
    background:linear-gradient(180deg,var(--sky0) 0%,var(--sky1) 46%,var(--water0) 62%,var(--water1) 100%)}

  /* horizon: warm hairline + mountain ridge + moon-glade, all static paint */
  .horizonline{position:absolute;left:0;right:0;top:648px;height:2px;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,transparent 0%,var(--horizon-dim) 12%,var(--horizon) 46%,var(--horizon-dim) 82%,transparent 100%);
    opacity:.75}
  .ridge{position:absolute;left:0;right:0;top:566px;height:84px;z-index:0;pointer-events:none;opacity:.5}
  .glade{position:absolute;left:44%;width:12%;top:650px;height:360px;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,178,107,.10),rgba(255,178,107,.03) 55%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}

  .wrap{position:absolute;inset:0;z-index:2;padding:26px 30px;display:flex;flex-direction:column;gap:18px}

  /* ===== header ===== */
  header{display:flex;align-items:flex-end;justify-content:space-between;height:78px}
  .brand{display:flex;align-items:center;gap:20px}
  .mark{width:56px;height:56px;border-radius:50%;border:4px solid var(--foam);position:relative;flex:none}
  .mark::after{content:"";position:absolute;right:-14px;bottom:2px;width:10px;height:10px;border-radius:50%;background:var(--horizon)}
  .b1{font-size:44px;font-weight:800;letter-spacing:.5px;line-height:1;color:var(--foam)}
  .b2{font-size:15px;color:var(--dim);letter-spacing:6px;text-transform:uppercase;margin-top:8px}
  .live{display:inline-flex;align-items:center;gap:8px;margin-left:14px;vertical-align:middle;
    font-size:13px;letter-spacing:3px;color:var(--horizon)}
  .live i{width:9px;height:9px;border-radius:50%;background:var(--horizon);animation:pulse 2.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
  .headright{text-align:right}
  .clock{font-size:56px;font-weight:800;line-height:1;color:var(--foam);font-variant-numeric:tabular-nums}
  .dateline{font-size:16px;color:var(--dim);margin-top:6px;letter-spacing:1px}
  .sunline{font-size:14px;color:var(--faint);margin-top:3px;letter-spacing:1px}

  /* ===== main row: hero video + weather rail ===== */
  .main{display:flex;gap:22px;height:610px}
  .hero{position:relative;width:1084px;height:610px;flex:none;border-radius:16px;overflow:hidden;
    border:1px solid var(--line);background:#000}
  .hero .poster{position:absolute;inset:0;width:100%;height:100%;border:0;
    pointer-events:none;object-fit:cover}
  /* Player is laid out at 640x360 and scaled up to fill the hero. YouTube picks stream
     quality from the element size, so a small element = 720p decode instead of 4K —
     the Pi 5 has no VP9/AV1 hardware decode and does it all on the CPU. */
  .hero iframe{position:absolute;top:0;left:0;width:640px;height:360px;border:0;
    pointer-events:none;transform:scale(1.69375);transform-origin:top left;
    opacity:0;transition:opacity .8s ease}
  /* players stay invisible over their poster until revealWhenPlaying: black, then a pause button / "More videos" / logo, is what showed */
  .hero iframe.on{opacity:1}
  .hero .tag{position:absolute;left:0;bottom:0;right:0;padding:34px 22px 14px;z-index:3;
    background:linear-gradient(180deg,transparent,rgba(4,14,27,.88));display:flex;align-items:baseline;justify-content:space-between}
  .tag .n{font-size:24px;font-weight:800;color:var(--foam);letter-spacing:.5px}
  .tag .s{font-size:14px;color:var(--dim);letter-spacing:2px;text-transform:uppercase}

  .rail{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0}
  .wx{flex:1;border-radius:16px;border:1px solid var(--line);background:var(--panel);
    padding:14px 24px 12px;display:flex;flex-direction:column;justify-content:space-between;min-height:0}
  .wx .top{display:flex;align-items:center;gap:24px}
  .wx .who{flex:1;min-width:0}
  .wx .place{font-size:20px;font-weight:800;letter-spacing:3.4px;text-transform:uppercase;color:var(--dim)}
  .wx .temp{font-size:84px;font-weight:800;line-height:1;color:var(--foam);font-variant-numeric:tabular-nums;margin-top:2px}
  .wx .temp small{font-size:40px;font-weight:400;color:var(--dim)}
  .wx .nowico{width:110px;flex:none;color:var(--foam);display:flex;align-items:center;justify-content:center}
  .wx .facts{width:200px;flex:none;font-size:19px;color:var(--dim);line-height:1.75;text-align:right}
  .wx .facts b{color:var(--fg);font-weight:400}
  .wx .facts .warrow{display:inline-block;color:var(--light);margin-right:5px}
  .hours{display:flex;justify-content:space-between;gap:4px;border-top:1px solid var(--line2);padding-top:6px;margin-top:6px}
  .h{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;flex:1}
  .h .t{font-size:14px;color:var(--faint);letter-spacing:.5px}
  .h .i{color:var(--fg);opacity:.9;line-height:0}
  .h .d{font-size:19px;color:var(--fg);font-variant-numeric:tabular-nums}
  .h .p{font-size:13px;color:var(--light);min-height:15px;line-height:1}

  /* ===== bottom: cam strip (on the "water") ===== */
  .cams{display:flex;gap:18px;height:246px}
  .cam{position:relative;flex:1;border-radius:13px;overflow:hidden;border:1px solid var(--line);background:var(--panel2)}
  .cam .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;letter-spacing:2px}
  .cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
  .cam img.show{opacity:1}
  .cam .lab{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22px 12px 8px;
    background:linear-gradient(180deg,transparent,rgba(4,14,27,.92));
    display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .cam .lab .n{font-size:14.5px;font-weight:800;color:var(--fg);letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cam .lab .ts{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none}
  .credit{position:absolute;right:30px;bottom:8px;z-index:3;font-size:12px;color:var(--faint);letter-spacing:.6px}
  body{cursor:none}
  .wx .none{color:var(--faint);font-size:15px;margin-top:8px}

  /* rail: the first place's full card, the others as one line, then the next boats and the tide */
  .wx1{display:flex;align-items:center;gap:14px;height:44px;flex:none;border-radius:12px;border:1px solid var(--line);background:var(--panel);padding:0 22px;color:var(--dim);font-size:16px}
  .wx1 .place{font-size:15px;font-weight:800;letter-spacing:3px;text-transform:uppercase;flex:1}
  .wx1 .nowico{color:var(--foam);display:flex}
  .wx1 b{color:var(--foam);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
  .row2{display:flex;gap:16px;height:210px;flex:none}
  .row2 .tile{flex:1;min-width:0;border-radius:16px;border:1px solid var(--line);background:rgba(13,32,55,.94);   /* near-solid: the horizon hairline must not run through the text */
    padding:16px 22px;display:flex;flex-direction:column;justify-content:space-between}
  .tile .k{font-size:15px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--dim)}
  .tile .v{font-size:38px;white-space:nowrap;font-weight:800;color:var(--foam);line-height:1.1;font-variant-numeric:tabular-nums}
  .tile .v small{font-size:16px;font-weight:400;color:var(--dim)}
  .tile .s{font-size:18px;color:var(--dim);min-height:22px}
  .cam.stale .lab .ts{color:var(--horizon)}