/* Village — Day Pass + clean viewer. Lifted from vera's mock (scratch/vera/village-clients-plan/mocks/client.html,
   body.d1 block + the round-2 .v2 rules), applied directly to the real page body instead of a mock wrapper. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
svg{display:block}
.ic{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.abs{position:fixed}

body{--ground:#0f1012;--card:#f4f5f1;--ink:#111214;--band:#0c9b62;--muted:#6b6f76;--line:#d6d8d2;--live:#e5312a;--amber:#e6a23c;--mat:#24262a;
  background:var(--ground);color:var(--ink);font:400 15px/1.45 "Barlow",Arial,sans-serif;overflow:hidden}
.wm{font:800 1em/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.045em;display:inline-flex;align-items:center;gap:.22em}
.wm svg{height:.86em;width:.67em}
.cc{font-family:"Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.13em;font-weight:700}
.lan{position:fixed;left:50%;top:0;width:2px;background:#26282d;transform-origin:top center}
.wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.pass{width:400px;max-width:calc(100vw - 32px);background:var(--card);border-radius:14px;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.slot{width:58px;height:12px;border-radius:6px;background:var(--ground);margin:16px auto 14px}
.band{background:var(--band);color:#fff;height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:15px}
.band.end{background:#8b8e93}
.body{padding:26px 26px 24px}
.body .wm{font-size:58px}
.sub{color:var(--muted);margin:8px 0 22px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
input.in{display:block;font:400 19px/1 "JetBrains Mono",monospace;border:0;border-bottom:2px solid var(--ink);padding:8px 0 9px;margin-bottom:18px;height:40px;width:100%;background:transparent;color:var(--ink);border-radius:0}
input.in:focus{outline:0}
input.in.bad{border-color:var(--live)}
input.in[type=password].reveal{-webkit-text-security:none}
/* W3/W5: scoped to .pass (the login/expired card) -- unscoped, this leaked
   onto any other element sharing the "go" class, e.g. the viewer's sound
   button (.vbtn.go), stomping its own size/radius/font. */
.pass button.go,.pass a.go{height:54px;background:var(--ink);color:var(--card);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-top:6px;border:0;width:100%;cursor:pointer;text-decoration:none}
.pass button.go:disabled{opacity:.55;cursor:default}
.go.line{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.pass .go.line{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.foot{font-size:13px;color:var(--muted);margin-top:16px}
.err{color:#c2241d;font-size:14px;margin:-8px 0 14px;font-weight:500}
h2{font:700 34px/1.05 "Barlow Condensed",sans-serif;margin:18px 0 10px;letter-spacing:.01em}
.under{color:#7d8188;font-size:13px;margin-top:18px;text-align:center}
@media (min-width:1800px){.pass{zoom:1.22}.under{font-size:15px}}

/* ---- desktop viewer: nothing on the picture. strip above, controls below. ---- */
#v-view{position:fixed;inset:0;display:grid;grid-template-rows:37px 3px minmax(0,1fr) 52px;background:var(--mat);
  --fw:min(calc(100vw - 16px),calc((100vh - 108px) * 16 / 9))}
#v-strip{background:#0f1012;display:flex;align-items:center;gap:12px;padding-right:16px;color:#fff;min-width:0}
.vtab{background:var(--card);color:var(--ink);height:37px;display:flex;align-items:center;padding:0 15px 0 14px;font-size:22px;flex:none}
.vpill{height:24px;padding:0 10px;border-radius:4px;display:inline-flex;align-items:center;gap:7px;font-size:14px;color:#fff;white-space:nowrap;flex:none}
.vpill.live{background:var(--live)}
.vpill.play{box-shadow:inset 0 0 0 1.5px #fff}
.vpill.recon{box-shadow:inset 0 0 0 1.5px var(--amber);color:var(--amber)}
.vpill.stby{box-shadow:inset 0 0 0 1.5px #8b8e93;color:#c9cbc6}
.vpill i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.vpill small{font-weight:600;letter-spacing:.08em;opacity:.85;font-size:13px;padding-left:8px;border-left:1px solid rgba(255,255,255,.4);margin-left:2px}
#v-ends{font-size:14px;color:#c9cbc6;white-space:nowrap}
#v-ends.soon{color:var(--amber)}
#v-band{background:var(--band)}
#v-band.soon{background:var(--amber)}
.vmain{display:flex;align-items:center;justify-content:center;min-height:0}
#v-stage{width:var(--fw);aspect-ratio:16/9;background:#000;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08);flex:none}
#v-video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
#v-video.dim{filter:brightness(.32) grayscale(.55)}
#v-bar{width:var(--fw);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-bottom:8px;color:#fff;min-width:0}
#v-who{color:#8d9198;font-size:13.5px;white-space:nowrap}
.vbtn{height:36px;padding:0 17px 0 13px;border-radius:18px;display:inline-flex;align-items:center;gap:9px;font:600 15px "Barlow",sans-serif;white-space:nowrap;border:0;cursor:pointer;background:transparent;color:#fff;font-family:inherit}
.vbtn.go{background:var(--card);color:var(--ink)}
.vbtn.line{box-shadow:inset 0 0 0 1.5px #5b5f66;color:#fff}
.vbtn.sq{border-radius:8px;justify-self:end}
#v-msg{font-size:15px;color:#b9bcc2;display:inline-flex;gap:10px;align-items:baseline;white-space:nowrap}
#v-msg b{font:700 22px/1 "Barlow Condensed",sans-serif;color:#fff;letter-spacing:.01em}
#v-msg i{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block;align-self:center}
/* real Fullscreen API: #v-stage itself goes fullscreen (spec 4.5), so only its own
   subtree renders -- the strip/band/bar outside it vanish for free, no extra class needed there. */
#v-stage:fullscreen{width:100vw;height:100vh;box-shadow:none;background:#000;display:flex;align-items:center;justify-content:center}
#v-stage:fullscreen #v-video{width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));aspect-ratio:16/9}
/* W9b: trouble in full screen sits at the TOP with a grey mat all round, 8px
   clear of the message bar below -- it was centred edge-to-edge in black, so
   the bar covered the picture's own last 26px. */
#v-stage:fullscreen.trouble{align-items:flex-start;background:var(--mat)}
#v-stage:fullscreen.trouble #v-video{margin-top:8px;height:min(calc(100vh - 68px),calc((100vw - 16px) * 9 / 16));width:auto}
#v-fsmsg{display:none}
#v-stage:fullscreen.trouble #v-fsmsg{display:flex;position:absolute;left:0;right:0;bottom:0;height:52px;background:var(--mat);align-items:center;justify-content:center;gap:10px;color:#fff;font-size:15px}
#v-fsmsg b{font:700 22px/1 "Barlow Condensed",sans-serif;color:#fff;letter-spacing:.01em}
#v-fsmsg span{color:#b9bcc2}
#v-fsmsg i{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block}
button:focus-visible,a:focus-visible{outline:2px solid #5fb0ff;outline-offset:2px}
@media (prefers-reduced-motion: reduce){#v-view{transition:none}}

/* ---- phone (upright, round 1) ---- */
body.ph .tab{left:16px}
body.ph .ends{right:16px}
.tab{position:fixed;top:0;left:24px;background:var(--card);padding:9px 14px 10px;border-radius:0 0 9px 9px;font-size:22px;z-index:3}
.pill{position:fixed;top:10px;left:150px;height:30px;padding:0 13px;border-radius:5px;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;z-index:3}
.pill.live{background:var(--live)}
.pill.play{background:rgba(15,16,18,.74);box-shadow:inset 0 0 0 1.5px #fff}
.pill.recon{background:rgba(15,16,18,.74);box-shadow:inset 0 0 0 1.5px var(--amber);color:var(--amber)}
.pill.stby{background:rgba(15,16,18,.74);box-shadow:inset 0 0 0 1.5px #8b8e93;color:#c9cbc6}
.pill i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.pill small{font-weight:600;letter-spacing:.08em;opacity:.85;font-size:14px;padding-left:8px;border-left:1px solid rgba(255,255,255,.4);margin-left:2px}
.ends{position:fixed;top:10px;right:24px;height:30px;padding:0 12px;border-radius:5px;background:rgba(15,16,18,.62);color:#fff;display:flex;align-items:center;font-size:14px;font-weight:600;z-index:3}
.pic{background:#000 center/cover no-repeat;aspect-ratio:16/9}
/* W13: the box keeps 16:9 on its own -- without this it sized off the <video>
   element, which collapses to 0 height once trouble tears its srcObject down. */
#p-pbox{aspect-ratio:16/9}
body.ph .pbox{position:fixed;left:0;right:0;top:64px}
body.ph video.pic{width:100vw;height:auto}
body.ph .below{position:fixed;left:16px;right:16px;top:calc(64px + 56.25vw + 16px);color:#fff}
body.ph .below .pill{position:static;display:inline-flex}
.snd{position:fixed;left:50%;bottom:38px;transform:translateX(-50%);height:54px;padding:0 26px 0 22px;border-radius:27px;background:var(--card);color:var(--ink);display:flex;align-items:center;gap:11px;font:600 17px "Barlow",sans-serif;box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:3;border:0;cursor:pointer;font-family:inherit}
body.ph .below .snd{position:static;transform:none;width:100%;justify-content:center;margin-top:18px;box-shadow:none;border-radius:27px}
body.ph .below .snd.on{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #5b5f66}
.hint{color:#8d9198;font-size:14px;margin-top:16px;text-align:center}
.who{position:fixed;left:16px;right:16px;bottom:22px;color:#8d9198;font-size:13px;text-align:center;border-top:1px solid #26282d;padding-top:12px}
.mid{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);border-radius:10px;padding:20px 30px 18px;text-align:center;z-index:3;width:max-content;max-width:calc(100vw - 40px)}
.mid b{font:700 28px/1.1 "Barlow Condensed",sans-serif;display:block;letter-spacing:.01em}
.mid span{color:var(--muted);font-size:14px}
body.ph .mid{top:calc(64px + 28vw)}