/* One side drawer; touch-safe controls and compact, consistent media surfaces. */
body.p20-app #kuMenu{position:fixed;inset:10px 10px 10px auto;margin:0;width:min(390px,calc(100vw - 24px));height:calc(100dvh - 20px);max-height:none;max-width:none;box-sizing:border-box;border:1px solid var(--line,#536273);border-radius:22px;padding:16px;overflow:auto;overscroll-behavior:contain;box-shadow:-12px 0 48px #06192545}
body.p20-app #kuMenu[open]{animation:none}body.p20-app #kuMenu::backdrop{background:#0619256b;backdrop-filter:blur(2px)}
body.p20-app #kuMenu>a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:11px 10px;border-radius:10px;line-height:1.5;text-decoration:none;font-size:14px}
body.p20-app #kuMenu>a:hover,body.p20-app #kuMenu>a:focus-visible{background:#1684aa20}body.p20-app #kuMenu>p{font-size:13px;line-height:1.8}
@keyframes khMenuEnter{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
#khMedia .kh-media-panel{width:min(382px,calc(100vw - 24px));max-height:min(650px,var(--kh-media-height,70dvh));border-radius:18px}
#khMedia .kh-media-stations{grid-template-columns:1fr;gap:6px;padding:0 10px 10px}
#khMedia .kh-media-station,#khMedia[data-category=tv] .kh-media-station{display:grid!important;grid-template-columns:40px minmax(0,1fr) 30px;grid-template-rows:auto auto;gap:1px 10px;align-items:center;min-height:64px!important;padding:8px!important;border-radius:12px!important}
#khMedia .kh-media-station .kh-media-logo{grid-column:1;grid-row:1/3;width:40px;height:40px;border-radius:10px}
#khMedia .kh-media-station strong{grid-column:2;grid-row:1;font-size:13px;line-height:1.4}
#khMedia .kh-media-station small{grid-column:2;grid-row:2;font-size:11px;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#khMedia .kh-media-playmark{position:static;grid-column:3;grid-row:1/3;width:28px;height:28px}
#khMedia .kh-media-panel>header{padding:10px}#khMedia .kh-media-panel footer{font-size:10px}#khMedia .kh-media-panel footer small{font-size:10px}
body:has(dialog[open]) #khMedia{visibility:hidden;pointer-events:none}
.p20-app .kh-cctv-guide{box-sizing:border-box;max-width:1152px;margin:24px auto;padding:clamp(16px,2.4vw,28px);border:1px solid var(--line,#d6e4ed);border-radius:22px;background:var(--paper,#fff)}
.p20-app .kh-cctv-faq details{padding:10px 12px;margin:6px 0;border:1px solid var(--line,#d6e4ed);border-radius:12px}.p20-app .kh-cctv-faq summary{min-height:30px;cursor:pointer}
body.ku-cctv .kt-grid,body.ku-cctv .ct-grid,.p20-app .kmw-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px}
.p20-app .kt-card,.p20-app .ct-card,.p20-app .kmw-card{border-radius:15px!important;min-width:0;overflow:hidden;content-visibility:visible}
body.ku-cctv .ki-screen,body.ku-cctv .ct-shot,.p20-app .kmw-poster{aspect-ratio:16/9;min-height:0;height:auto}
.p20-app .kmw-card-body{padding:10px}.p20-app .kmw-card-body h3{font-size:14px;line-height:1.5;margin:4px 0}.p20-app .kmw-card-body p{font-size:11px;line-height:1.5;margin:3px 0}
.p20-app .kmw-card-links{display:flex;gap:5px;flex-wrap:wrap}.p20-app .kmw-card-links button{font-size:11px;min-height:40px}
.kh-camera-cover{position:relative;display:block;min-height:90px;width:100%;height:100%;overflow:hidden;background:linear-gradient(145deg,#0c263c,#174658);color:#fff}
.kh-camera-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}.kh-camera-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#061626e6,transparent 95%);pointer-events:none}
.kh-camera-cover .kh-cover-copy{position:absolute;inset:auto 8px 8px;z-index:1;text-align:left;text-shadow:0 1px 3px #000,1px 0 #000;font-family:inherit}
.kh-cover-copy strong{display:block;font-size:12px;line-height:1.4;color:#fff!important;overflow-wrap:anywhere}.kh-cover-copy small{display:block;font-size:9px;color:#e8f7ff!important;line-height:1.4;margin-top:3px}
.kh-cover-label{position:absolute;left:7px;top:7px;z-index:2;border:1px solid #b4d9e77a;border-radius:7px;padding:3px 5px;background:#092334d9;color:#fff;font-size:9px;line-height:1.3}
.kh-camera-cover .kh-cover-pin{position:absolute;left:50%;top:38%;z-index:1;color:#ffcf74;font-size:28px;line-height:1;text-shadow:0 2px 4px #000;transform:translate(-50%,-50%)}
.kt-preview:has(.kh-camera-cover)>.kt-location-card,.kt-preview:has(.kh-camera-cover)>.kt-preview-type,.kt-preview:has(.kh-camera-cover)>.kt-preview-caption{display:none!important}
.ct-shot:has(.kh-camera-cover)>.ct-tag,.ct-shot:has(.kh-camera-cover)>.ct-own,.kmw-poster:has(.kh-camera-cover)>small,.kmw-poster:has(.kh-camera-cover)>span{display:none!important}
.kmw-poster:has(.kh-camera-cover){padding:0}.kmw-poster:has(.kh-camera-cover)>button{position:absolute;right:6px;bottom:6px;z-index:3;font-size:10px;min-height:36px;padding:5px}
.p20-app .kmw-area-label,.p20-app .kmw-district-label{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;font-weight:700;text-shadow:1px 1px 2px #000,-1px -1px 2px #000,1px -1px 2px #000,-1px 1px 2px #000;padding:0}
.p20-app .kmw-area-label:before,.p20-app .kmw-district-label:before{display:none}
.p20-app .kmw-pin{border:0!important;background:none!important;box-shadow:none!important}.kmw-pin img{width:24px;height:24px;filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 2px #000)}
@media(max-width:600px){body.ku-cctv .kt-grid,body.ku-cctv .ct-grid,.p20-app .kmw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.p20-app .kh-cctv-guide{margin:18px 10px}.kh-cover-copy strong{font-size:11px}.kh-cover-copy small{font-size:9px}#khMedia{left:12px}#khMedia.is-compact #khMediaDockToggle{margin-left:-12px}#khMedia .kh-media-launch{width:236px}body.p20-app #kuMenu{inset:8px 8px 8px auto;width:calc(100vw - 32px);max-width:370px;height:calc(100dvh - 16px)}}
@media(prefers-reduced-motion:reduce){body.p20-app #kuMenu[open]{animation:none}}
.p20-app .cm-kind-water .cm-tag{color:#07576d;background:#e6f6fa}
html[data-p20-theme=dark] .p20-app .cm-kind-water .cm-tag{color:#cff1ff!important;background:#153949!important}
html[data-p20-theme=dark] .p20-app .kmw-quality{background:#3c3020!important;color:#ffe3ac!important;border-color:#866a3b!important}

html[data-p20-theme=dark] .p20-app .kt-viewer :is(.kt-station,.kt-note,.kt-photo-credit){color:#d6e1ec!important}
html[data-p20-theme=dark] .p20-app .kt-viewer details{background:#2b3037!important;border-color:#596572!important}
html[data-p20-theme=dark] .p20-app .kt-viewer summary{color:#eff5ff!important}
html[data-p20-theme=dark] .p20-app .kt-viewer :is(button,select){background:#293541!important;color:#f7fbff!important;border-color:#627588!important}

html[data-p20-theme=dark] .p20-app .ku-camera-search>button{background:#293541!important;color:#f7fbff!important;border-color:#627588!important}

.kmw-news-item>a.has-cover{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:start}.kmw-news-item>a>img{width:88px;height:66px;object-fit:cover;border-radius:8px}.kmw-news-item>a>span{min-width:0}

/* Camera screens keep overlays independent from imagery and playback. */
.kmw-poster:has(.kh-camera-cover)>.kh-camera-cover{display:block!important}
.kh-feed-screen{position:relative;isolation:isolate;overflow:hidden}
.kh-feed-head{position:absolute!important;inset:6px 6px auto!important;z-index:6;display:flex!important;justify-content:space-between;align-items:center;gap:3px;pointer-events:none}
.kh-feed-kind,.kh-feed-clock{display:inline-flex!important;align-items:center;gap:3px;padding:3px 5px;border-radius:6px;background:#071827e6;color:#fff!important;white-space:nowrap;line-height:1.3;font:600 10px/1.3 var(--f-body,sans-serif);text-shadow:0 1px 2px #000}
.kh-feed-kind img{position:static!important;width:14px!important;height:14px!important;object-fit:contain!important;opacity:1!important;inset:auto!important}
.kh-feed-clock{font-variant-numeric:tabular-nums}
.kh-feed-status{position:absolute!important;left:6px!important;bottom:7px!important;top:auto!important;z-index:6;display:inline-flex!important;align-items:center;gap:5px;max-width:calc(100% - 48px);font:600 10px/1.4 var(--f-body,sans-serif);color:#fff!important;background:#092234e6;border:1px solid #84a8bd66;border-radius:6px;padding:3px 5px;pointer-events:none}
.kh-feed-status:before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:#99c9dc}
.kh-feed-status.is-live{background:#7a1230f0;border-color:#ff8aa2}.kh-feed-status.is-live:before{background:#ff526d;animation:khLivePulse 1.6s ease-in-out infinite}
@keyframes khLivePulse{50%{box-shadow:0 0 0 4px #ff526d33;opacity:.6}}
.kh-feed-screen .kt-preview-tag,.kh-feed-screen .kt-preview-caption,.kh-feed-screen .kt-preview-cta,.kh-feed-screen .kt-preview-play,.kh-feed-screen .ct-own,.kh-feed-screen .ct-tag,.kh-feed-screen .kh-cover-label{display:none!important}
.kh-feed-screen .kh-cover-copy{inset:auto 7px 34px}.kh-feed-screen .kh-cover-copy strong{font-size:10px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.kh-feed-screen .kh-cover-copy small{display:none}
.kh-feed-screen .kh-cover-pin{top:48%;font-size:24px}
.ki-poster-play{right:7px;bottom:6px;width:32px;height:32px;border-width:2px;font-size:15px;box-shadow:0 2px 8px #0009;padding:0}
.kmw-poster>.kh-feed-head,.kmw-poster>.kh-feed-status{display:flex!important}.kmw-poster>button{font-size:0!important;width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}.kmw-poster>button:after{content:'↗';font-size:17px}
.p20-app .kmw-card{display:flex;flex-direction:column;align-self:start}.p20-app .kmw-card-body{display:flex;flex-direction:column;gap:4px}.p20-app .kmw-card-body h3,.p20-app .ct-info>strong,.p20-app .kt-card-body>strong{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px;max-height:39px}
.p20-app .kmw-card-body>p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.p20-app .kmw-card .kmw-verified{display:none}.p20-app .kmw-quality-detail{font-size:11px;margin:0}.p20-app .kmw-quality-detail>summary{min-height:30px;cursor:pointer}.p20-app .kmw-quality-detail .kmw-quality{white-space:normal;font-size:11px}
.p20-app .kmw-card-links{margin-top:4px}.p20-app .kmw-card-links button{padding:5px 7px;min-height:32px}.p20-app .ct-info .kc-detail,.p20-app .kt-card-map{font-size:11px;min-height:32px}.p20-app .kt-card-body>span:not(.kt-card-action){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kt-video-area,.ki-screen{max-width:100%;min-width:0;overflow:hidden}.kt-video-area video,.ki-screen video{object-fit:contain}.kt-video-area iframe{position:absolute;left:0;top:0}.kt-viewer h2{font-size:clamp(16px,2vw,22px);overflow-wrap:anywhere}
.p20-app .p20-gauge-spark{min-height:52px}
@media(max-width:400px){.kh-feed-kind,.kh-feed-clock{font-size:9px;padding:3px}.kh-feed-kind img{width:12px!important;height:12px!important}.kh-feed-status{font-size:9px}.p20-app .kt-card-body>strong,.p20-app .ct-info>strong,.p20-app .kmw-card-body h3{font-size:12px}}
@media(prefers-reduced-motion:reduce){.kh-feed-status.is-live:before{animation:none}}

/* Enlarged reference gauges and a transparent explanatory water layer. */
.p20-app .p20-water-scene{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#15c9ee21,#008cd324 60%,#004ca71c);border-top:1px solid #64ecff77;overflow:hidden;transition:top 1.2s ease}
.p20-app .p20-water-scene[hidden]{display:none}.p20-water-scene>i{position:absolute;inset:0;background:repeating-linear-gradient(176deg,transparent 0 25px,#b7faff21 26px,transparent 28px 52px);animation:khWaterTexture 7s linear infinite;opacity:.6}
@keyframes khWaterTexture{to{transform:translateY(26px)}}
.p20-app .p20-earth-tube,.p20-app .p20-water-tube{width:42px;border-width:2px;border-radius:22px;box-shadow:0 3px 8px #000b,0 0 0 1px #081623,0 0 14px #2ee7ff44}
.p20-app .p20-earth-tube{left:calc(-12% - 56px)}.p20-app .p20-water-tube{left:-12%}.p20-app .p20-tube-ticks{opacity:1}
.p20-app .p20-tube-fill>i{animation:khTubeSurface 3s ease-in-out infinite}.p20-app .p20-tube-fill>b{animation:khTubeShimmer 4s ease-in-out infinite}
@keyframes khTubeSurface{50%{transform:translateX(5px);opacity:.75}}@keyframes khTubeShimmer{50%{opacity:.45}}
.p20-app .p20-hero[data-water-alert=true] .p20-water-tube{animation:khTubeAlert 2.4s ease-in-out infinite;border-color:#ffd4df}
@keyframes khTubeAlert{50%{box-shadow:0 0 0 3px #ff567455,0 0 24px #ff345b,0 3px 8px #000b}}
.p20-app .p20-step-panel .p20-gauge-spark svg{height:52px}.p20-app .p20-graph-helper{top:58px}.p20-app .p20-gauge-trace{stroke-width:2.4;filter:drop-shadow(0 1px 2px #001426)}
.p20-app .p20-illustration-note{font-size:10px;line-height:1.4;max-width:90%;white-space:normal}
@media(min-width:801px){.p20-app .p20-hero .p20-gauge{top:74px;height:180px}.p20-app .p20-gauge-live{top:-28px}}
@media(max-width:800px) and (min-width:541px){.p20-app .p20-earth-tube{left:calc(-16% - 48px);width:36px}.p20-app .p20-water-tube{left:-16%;width:36px}.p20-app .p20-hero .p20-gauge{height:170px}}
@media(max-width:540px){.p20-app .p20-earth-tube{left:calc(33% - 44px);width:33px}.p20-app .p20-water-tube{left:33%;width:33px}.p20-app .p20-hero .p20-gauge{height:185px}.p20-app .p20-earth-tube>em,.p20-app .p20-water-tube>em{font-size:11px}.p20-app .p20-water-scene{opacity:.65}}
html[data-p20-motion=reduce] :is(.p20-water-scene>i,.p20-tube-fill>i,.p20-tube-fill>b,.p20-water-tube),.p20-hero.is-stale :is(.p20-water-scene>i,.p20-tube-fill>i,.p20-tube-fill>b){animation:none!important}
@media(prefers-reduced-motion:reduce){.p20-water-scene>i,.p20-tube-fill>i,.p20-tube-fill>b,.p20-water-tube{animation:none!important}.p20-water-scene{transition:none!important}}
/* Eight stations fit four short rows, with playback controls above the list. */
#khMedia .kh-media-stations{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#khMedia .kh-media-station{grid-template-columns:28px minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:2px 6px!important;min-height:70px!important;padding:7px!important;position:relative}
#khMedia .kh-media-station .kh-media-logo{width:28px;height:28px;grid-row:1;grid-column:1;border-radius:7px}
#khMedia .kh-media-station strong{font-size:11px;grid-column:2;grid-row:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;padding-right:0}
#khMedia .kh-media-station small{grid-column:1/3;grid-row:2;font-size:9px;max-width:calc(100% - 22px)}
#khMedia .kh-media-playmark{position:absolute;right:6px;bottom:5px;width:21px;height:21px;font-size:10px}
#khMedia[data-category=tv] .kh-media-stations{grid-template-columns:1fr}
#khMedia[data-category=tv] .kh-media-station{min-height:64px!important;grid-template-columns:40px minmax(0,1fr)!important}#khMedia[data-category=tv] .kh-media-logo{width:40px;height:40px;grid-row:1/3}#khMedia[data-category=tv] .kh-media-station strong{font-size:13px}#khMedia[data-category=tv] .kh-media-station small{grid-column:2}

.p20-app .kmw-poster:has(.kh-camera-cover)>.kh-feed-head,.p20-app .kmw-poster:has(.kh-camera-cover)>.kh-feed-status{display:flex!important}.p20-categories a[data-kind=cctv]{background:linear-gradient(135deg,#fff1d6,#ffe3b3);color:#703800}.p20-app .kt-video-area>.kh-feed-status{bottom:42px}

.kh-feed-archive{position:absolute!important;display:block!important;left:6px;right:6px;top:32px;z-index:6;font-size:9px;color:#fff!important;text-shadow:0 1px 2px #000,0 0 3px #000}.p20-app .kmw-poster:has(.kh-camera-cover)>.kh-feed-archive{display:block!important}

.p20-app .p20-camera-views .p20-art-icon,.p20-app .p20-camera-section-title .p20-art-icon{width:24px;height:24px;flex:none;vertical-align:middle}.p20-app .p20-camera-views>a{display:flex;align-items:center;gap:7px}
.p20-app .ki-controls{display:grid!important;grid-template-columns:minmax(44px,1fr) 32px minmax(36px,1fr);gap:4px!important;padding:5px!important;align-items:center!important;min-height:0!important}
.p20-app .ki-controls :is(button,a){margin:0!important;padding:3px!important;min-height:34px!important;min-width:0!important;width:auto!important;font-size:10px!important;line-height:1.3!important;white-space:nowrap;text-align:center}
.p20-app .ki-status{font-size:10px!important;line-height:1.4!important;min-height:20px!important;max-height:22px;padding:3px 6px!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:#102231!important;color:#e9f5ff!important}
.p20-app .kh-feed-screen .kt-preview-caption{display:none!important}

.p20-app .kmw-news-item>small:first-child{color:#006a78}html[data-p20-theme=dark] .p20-app .kmw-news-item>small:first-child{color:#a8e9ef!important}

html[data-p20-theme=dark] .p20-app :is(#kmwRiskLive.is-alert,.kmw-risk-alert-text){background:#481b28!important;color:#ffe4e9!important;border:1px solid #a15d6c}
.p20-app .kh-camera-cover>img{z-index:0}.p20-app .kh-feed-kind img{z-index:auto}

/* 2.0.4: clearer waves, one-piece search field and small CCTV entry signals. */
.p20-app .p20-wave{height:18px;top:-8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='18' viewBox='0 0 64 18'%3E%3Cpath d='M-16 9Q0-2 16 9T48 9T80 9' fill='none' stroke='%2353f3ff' stroke-width='5'/%3E%3Cpath d='M-16 7Q0-4 16 7T48 7T80 7' fill='none' stroke='%23e7ffff' stroke-opacity='.75' stroke-width='1.3'/%3E%3C/svg%3E") 0 0/64px 18px repeat-x;filter:drop-shadow(0 1px 2px #034f68) drop-shadow(0 0 6px #2beaffaa);animation:khWaveCrest 6s linear infinite}
@keyframes khWaveCrest{to{transform:translateX(64px)}}
.p20-app .p20-water-scene{border-top-color:#8bf8ffb3;background:linear-gradient(180deg,#19cce92e,#008cd329 60%,#004ca71c)}
.p20-app .p20-water-scene>i{inset:0 -80px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='84' viewBox='0 0 240 84'%3E%3Cpath d='M-40 18Q0 5 40 18T120 18T200 18T280 18' fill='none' stroke='%23c8fbff' stroke-opacity='.48' stroke-width='1.6'/%3E%3Cpath d='M-30 58Q10 47 50 58T130 58T210 58T290 58' fill='none' stroke='%235fe6f6' stroke-opacity='.38' stroke-width='1.4'/%3E%3C/svg%3E") 0 0/240px 84px repeat;opacity:.8;animation:khWaterRipples 11s ease-in-out infinite alternate}
@keyframes khWaterRipples{to{transform:translate(65px,8px)}}
.p20-app .ku-camera-search{gap:9px;align-items:stretch}
.p20-app .ku-camera-search>label{height:52px;min-height:52px;box-sizing:border-box;border:1px solid #b9cfdf;border-radius:16px;background:#fff;color:#163e59;overflow:hidden;padding:0 15px;gap:11px;box-shadow:0 2px 8px #15385408;transition:border-color .18s,box-shadow .18s}
.p20-app .ku-camera-search>label:focus-within{border-color:#00899d;box-shadow:0 0 0 3px #09a1b31a}
html body.p20-app .ku-camera-search input#kuCameraQuery{display:block;flex:1;min-width:0;width:100%;height:100%;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:inherit!important;font:400 16px/1.5 var(--f-body,sans-serif);appearance:none}
.p20-app .ku-camera-search #kuCameraQuery::placeholder{color:#547084;opacity:1}
.p20-app .ku-camera-search svg{width:20px;height:20px;color:#137d92}
.p20-app .ku-camera-search>button{width:52px;min-width:52px;min-height:52px;flex:none;border-radius:16px;border:1px solid #b9cfdf;background:#f2f9fc;box-shadow:0 2px 8px #15385408}
.p20-app .ku-camera-search>button[aria-expanded=true]{background:#d9f4f8;border-color:#00899d}
html[data-p20-theme=dark] .p20-app .ku-camera-search>label{background:#232b35;color:#f2f7fd;border-color:#536776}
html[data-p20-theme=dark] .p20-app .ku-camera-search #kuCameraQuery::placeholder{color:#becedb}
html[data-p20-theme=dark] .p20-app .ku-camera-search svg{color:#7edce8}
html[data-p20-theme=dark] .p20-app .ku-camera-search>button[aria-expanded=true]{background:#174452!important;border-color:#7edce8!important}
.p20-app .kh-cctv-symbol{position:relative;display:inline-block;flex:none;vertical-align:middle;overflow:visible}
.p20-app .kh-cctv-symbol>img{display:block;width:100%;height:100%;object-fit:contain}
.p20-app .kh-cctv-symbol>i{position:absolute;right:-1px;top:-2px;width:6px;height:6px;border-radius:50%;background:#f52d50;box-shadow:0 0 0 2px #fff;pointer-events:none;animation:khCctvSignal 2.8s ease-in-out infinite}
.p20-app .p20-categories .kh-cctv-symbol>i{width:8px;height:8px;right:3px;top:3px}
.p20-app .kh-cctv-vector{overflow:visible}.p20-app .kh-cctv-beacon{animation:khCctvBeacon 2.8s ease-in-out infinite}
@keyframes khCctvSignal{50%{box-shadow:0 0 0 2px #fff,0 0 0 5px #f52d5030;opacity:.8}}
@keyframes khCctvBeacon{50%{filter:drop-shadow(0 0 2px #ff365d);opacity:.65}}
.p20-app .kh-feed-status[data-mode=stream]:not(.is-live):before{background:transparent;border:1.5px solid #ff5974;box-sizing:border-box;width:7px;height:7px}
.p20-app .kh-feed-status.is-live:before{box-shadow:0 0 0 2px #ff526d30;animation:khLivePulse 2s ease-in-out infinite}
html[data-p20-theme=dark] .p20-app .kh-cctv-symbol>i{outline:1px solid #ffb6c4}
html[data-p20-motion=reduce] .p20-app :is(.p20-wave,.p20-water-scene>i,.kh-cctv-symbol>i,.kh-cctv-beacon,.kh-feed-status.is-live:before),.p20-app.p20-reduced :is(.p20-wave,.p20-water-scene>i,.kh-cctv-symbol>i,.kh-cctv-beacon){animation:none!important}
.p20-app.p20-background :is(.p20-wave,.p20-water-scene>i,.kh-cctv-symbol>i,.kh-cctv-beacon,.kh-feed-status.is-live:before){animation-play-state:paused}
@media(max-width:540px){.p20-app .p20-water-scene{opacity:.8}.p20-app .ku-camera-search>label{padding:0 12px}.p20-app .ku-camera-search{gap:7px}}
@media(prefers-reduced-motion:reduce){.p20-app :is(.p20-wave,.p20-water-scene>i,.kh-cctv-symbol>i,.kh-cctv-beacon,.kh-feed-status.is-live:before){animation:none!important}}

/* Edge-to-edge covers; the whole photograph remains the large click target. */
.p20-app :is(.ct-shot,.ki-screen,.kmw-poster){padding:0!important;margin:0;width:100%;border-radius:16px 16px 0 0;overflow:hidden;isolation:isolate}
.p20-app :is(.ct-shot,.ki-screen,.kmw-poster)>.kh-camera-cover,.p20-app .kt-preview>.kh-camera-cover{position:absolute;inset:0;min-height:0;width:100%;height:100%;border-radius:inherit}
html body.p20-app :is(.ct-shot,.kn-shot)>img,html body.p20-app .kh-camera-cover>img{display:block;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;object-fit:cover;object-position:center;border-radius:inherit}
.p20-app .ct-shot .kc-expand{inset:auto 6px 6px auto;width:26px;height:26px;min-width:0;min-height:0;border:1.5px solid #eafaff;border-radius:8px;background:#10384bea;box-shadow:0 1px 4px #0006}
.p20-app .ct-shot .kc-expand svg{width:14px;height:14px}
.p20-app .ki-screen .ki-poster-play{inset:auto 2px 2px auto;width:40px!important;height:40px!important;min-height:0!important;border:0;background:transparent!important;box-shadow:none!important;font-size:15px;isolation:isolate}
.p20-app .ki-screen .ki-poster-play:before{content:'';position:absolute;inset:6px;background:#006b7c;border:1.5px solid #eafaff;border-radius:9px;z-index:-1;box-shadow:0 1px 4px #0006}
.p20-app .kh-feed-screen .kh-cover-copy{inset:auto 7px 34px}
.p20-app .kh-feed-head{min-width:0}.p20-app .kh-feed-kind{max-width:60%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:540px){.p20-app .ku-dock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:0;padding:7px 4px max(7px,env(safe-area-inset-bottom));box-sizing:border-box}.p20-app .ku-dock>a,.p20-app .ku-dock>button{min-width:0;padding:3px 1px;font-size:10px;line-height:1.35;overflow-wrap:normal}.p20-app .ku-dock .kh-cctv-symbol{width:22px;height:22px}.p20-app .p20-camera-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.p20-app .p20-camera-views>a{padding:8px;font-size:12px;min-width:0;line-height:1.5}.p20-app .p20-camera-views .p20-art-icon{width:21px;height:21px}}

/* A single context panel follows the selected camera. Narrow screens keep it in flow. */
#khCameraContext{--kc-bg:#f2f9fc;--kc-card:#fff;--kc-text:#133b53;--kc-muted:#49677c;--kc-line:#b9d3df;--kc-accent:#006f83;position:relative;margin:10px 0 16px;max-width:100%;color:var(--kc-text);font-family:var(--f-body,sans-serif);z-index:8}
#khCameraContext[hidden],#khCameraContext [hidden]{display:none!important}
#khCameraContext .kh-context-rail{display:flex;gap:6px;max-width:100%}
#khCameraContext .kh-context-button{display:grid;grid-template-columns:23px minmax(0,1fr);gap:1px 7px;align-items:center;flex:1;min-width:0;min-height:48px;margin:0;padding:7px 10px;border:1px solid var(--kc-line);border-radius:13px;background:var(--kc-bg);color:var(--kc-text);cursor:pointer;text-align:left;font-family:inherit;box-shadow:none}
#khCameraContext svg{grid-row:1/3;width:23px;height:23px;fill:none;stroke:var(--kc-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#khCameraContext .kh-context-button b{color:inherit;font-size:13px;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}
#khCameraContext .kh-context-button small{color:var(--kc-muted);font-size:10px;line-height:1.5;white-space:nowrap}
#khCameraContext .kh-context-button[aria-expanded=true]{border-color:var(--kc-accent);box-shadow:inset 0 0 0 1px var(--kc-accent)}
#khCameraContext .kh-context-panel{margin-top:8px;padding:14px;border:1px solid var(--kc-line);border-radius:16px;background:var(--kc-card);color:var(--kc-text);box-shadow:0 8px 28px #001e3414;overflow-wrap:anywhere}
#khCameraContext header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px;background:none;color:inherit}
#khCameraContext header strong{font-size:15px;color:inherit}
#khCameraContext .kh-context-close{width:36px;min-height:36px;flex:none;padding:0;border:1px solid var(--kc-line);border-radius:10px;background:var(--kc-bg);color:var(--kc-text);font-size:23px;line-height:1;cursor:pointer}
#khCameraContext .kh-context-place{margin:0 0 12px;font-size:12px;color:var(--kc-muted);line-height:1.6}
#khCameraContext .kh-context-readings{display:grid;gap:10px}
#khCameraContext .kh-context-reading{display:grid;gap:3px;border-top:1px solid var(--kc-line);padding-top:9px;line-height:1.5}
#khCameraContext .kh-context-reading b{font-size:11px;color:var(--kc-muted)}
#khCameraContext .kh-context-reading strong{font-size:15px;color:var(--kc-text)}
#khCameraContext .kh-context-reading small,#khCameraContext .kh-context-note{font-size:11px;color:var(--kc-muted);line-height:1.65;margin:0}
#khCameraContext .kh-context-map{display:inline-flex;align-items:center;min-height:42px;font-size:12px;margin-top:6px;color:var(--kc-accent);text-decoration:underline;text-underline-offset:3px}
#khCameraContext .is-alert{--kc-accent:#b5183e}.kh-context-button.is-active svg{animation:khContextRain 2.7s ease-in-out infinite}
#khCameraContext button:focus-visible,#khCameraContext a:focus-visible{outline:3px solid #da921b;outline-offset:2px}
#khCameraContext.is-viewer{margin:12px 0;padding:0 10px;position:relative;inset:auto;max-width:100%;width:auto;z-index:auto}
html[data-p20-theme=dark] #khCameraContext{--kc-bg:#173341;--kc-card:#142833;--kc-text:#edf7ff;--kc-muted:#b6cedb;--kc-line:#506b7c;--kc-accent:#72e0ea}
html[data-p20-theme=dark] #khCameraContext .is-alert{--kc-accent:#ff9bb2}
@keyframes khContextRain{50%{transform:translateY(2px)}}
@media(min-width:1520px){#khCameraContext:not(.is-viewer){position:fixed;right:12px;top:42%;width:74px;margin:0;z-index:45}#khCameraContext:not(.is-viewer) .kh-context-rail{flex-direction:column}#khCameraContext:not(.is-viewer) .kh-context-button{grid-template-columns:1fr;justify-items:center;gap:2px;text-align:center;padding:8px 3px}#khCameraContext:not(.is-viewer) svg{grid-row:auto}#khCameraContext:not(.is-viewer) .kh-context-panel{position:absolute;right:calc(100% + 10px);top:0;width:320px;max-height:50dvh;overflow:auto;margin:0;box-sizing:border-box}}
@media(max-width:380px){#khCameraContext .kh-context-button{grid-template-columns:18px minmax(0,1fr);gap:1px 4px;padding:6px}#khCameraContext svg{width:18px;height:18px}#khCameraContext .kh-context-button b{font-size:11px}#khCameraContext .kh-context-button small{font-size:9px}}
@media(prefers-reduced-motion:reduce){#khCameraContext svg{animation:none!important}}
html[data-p20-motion=reduce] #khCameraContext svg{animation:none!important}.p20-background #khCameraContext svg{animation-play-state:paused}
html[data-p20-theme=dark] body.p20-app :is(#ctMSub,.kt-viewer .kt-station){color:#c5d8e5!important}

/* Home mobile composition uses content flow, not a growing stack of fixed offsets. */
.p20-home #p20Situation>.p20-scene-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}
.p20-home #p20Situation>.p20-scene-strip button{min-height:60px;padding:9px 10px;border-radius:12px}
.p20-home #p20Situation>.p20-scene-strip strong{font-size:13px}.p20-home #p20Situation>.p20-scene-strip small{font-size:10px}
.p20-home #p20Situation>.p20-scene-caption{margin:6px 0 10px;font-size:10px;line-height:1.5}
@media(max-width:540px){
 html body.p20-app .p20-home .p20-hero{display:flex;flex-direction:column;min-height:0!important;height:auto!important;padding:0 0 9px;background-image:url('../images/premium/river-mobile-day-v206.webp');background-position:center center;background-size:cover;background-blend-mode:normal}
 html[data-p20-theme=dark] body.p20-app .p20-home .p20-hero{background-image:url('../images/premium/river-mobile-night-v206.webp')!important}
 html[data-p20-theme=dawn] body.p20-app .p20-home .p20-hero{background-image:url('../images/premium/river-mobile-dawn-v206.webp')!important}
 html body.p20-app .p20-home .p20-hero:before{background:linear-gradient(180deg,#001b3c40,transparent 42%,#001d282b);z-index:0}
 html body.p20-app .p20-home .p20-hero-copy{position:relative;padding:58px 13px 0;max-width:100%;width:100%;box-sizing:border-box}
 html body.p20-app .p20-home .p20-hero h1{font-size:25px;line-height:1.2;margin:0 0 3px;white-space:normal}
 html body.p20-app .p20-home .p20-hero #p20WaterLabel{font-size:17px;line-height:1.4;margin:0;max-width:100%}
 html body.p20-app .p20-home .p20-main-value{margin:2px 0;gap:7px;align-items:center;min-width:0}
 html body.p20-app .p20-home .p20-main-value>strong{font-size:59px;line-height:1.06;letter-spacing:-.04em}
 html body.p20-app .p20-home .p20-main-value>span{font-size:21px;align-self:flex-end;margin-bottom:6px}
 html body.p20-app .p20-home .p20-value-cycle{margin-left:auto;padding:0 0 0 7px;max-width:99px;min-width:74px;gap:0;font-size:9px;line-height:1.25}
 html body.p20-app .p20-home .p20-point-only{font-size:10px;line-height:1.4;max-width:100%;margin:3px 0 0}
 html body.p20-app .p20-home .p20-measure-age{top:10px;left:10px;padding:4px 7px;font-size:10px;max-width:43%;line-height:1.5}
 html body.p20-app .p20-home .p20-location-menu{top:8px;right:8px;max-width:54%}
 html body.p20-app .p20-home .p20-location-menu>summary{padding:4px 7px;min-height:39px;gap:4px}
 html body.p20-app .p20-home .p20-location-menu strong{font-size:11px}.p20-home .p20-location-menu small{font-size:10px}
 html body.p20-app .p20-home .p20-weather-float{position:relative;inset:auto;display:grid;grid-template-columns:19px minmax(0,1fr);gap:0 5px;max-width:none;margin:6px 13px 0;width:auto;z-index:3;min-height:28px;pointer-events:none}
 html body.p20-app .p20-home .p20-weather-float[hidden]{display:none}
 html body.p20-app .p20-home .p20-weather-float>span{font-size:17px;grid-row:1/3}.p20-app .p20-home .p20-weather-float strong,.p20-app .p20-home .p20-weather-float small{font-size:9px;line-height:1.4}
 html body.p20-app .p20-home .p20-hero .p20-gauge{position:relative;inset:auto;align-self:stretch;display:block;box-sizing:border-box;min-height:0;width:auto;height:226px;margin:31px 13px 0;padding:0;flex:none;z-index:4}
 html body.p20-app .p20-home .p20-gauge .p20-river-section{position:absolute;top:0;left:0;right:0;bottom:auto;height:110px}
 html body.p20-app .p20-home .p20-earth-tube{left:44%;width:27px;height:110px;top:0;bottom:auto;border-radius:15px}
 html body.p20-app .p20-home .p20-water-tube{left:calc(44% - 35px);width:27px;height:110px;top:0;bottom:auto;border-radius:15px}
 html body.p20-app .p20-home .p20-earth-tube>em,html body.p20-app .p20-home .p20-water-tube>em{font-size:9px}
 html body.p20-app .p20-home .p20-gauge .p20-distance{left:64%}
 html body.p20-app .p20-home .p20-gauge .p20-distance>span{left:8px;padding:0 3px;top:calc(50% - 22px)}
 html body.p20-app .p20-home .p20-gauge .p20-distance strong{font-size:27px;line-height:1.2}.p20-app .p20-home .p20-gauge .p20-distance small{font-size:11px}
 html body.p20-app .p20-home .p20-distance .p20-gauge-countdown{font-size:9px}
 html body.p20-app .p20-home .p20-gauge-live{top:-25px;left:0;font-size:9px;padding:3px 6px}
 html body.p20-app .p20-home .p20-bank{left:0;right:0;border-top-width:3px}
 html body.p20-app .p20-home .p20-bank span{font-size:9px;padding:2px 7px;line-height:1.4}
 html body.p20-app .p20-home .p20-water-fill{left:-13px;right:-13px;bottom:-20px}
 html body.p20-app .p20-home .p20-water-fill>span{font-size:9px;padding:2px 6px;right:12px;line-height:1.4}
 html body.p20-app .p20-home .p20-step-panel{left:0;right:0;top:121px!important;height:105px}
 html body.p20-app .p20-home .p20-step-caption{font-size:9px;line-height:1.4;min-height:14px;flex-wrap:nowrap;gap:5px}
 html body.p20-app .p20-home .p20-step-caption>span:first-child{font-size:9px}.p20-app .p20-home .p20-step-panel #p20StepAlert{font-size:9px;min-height:16px}
 html body.p20-app .p20-home .p20-step-panel .p20-gauge-track,html body.p20-app .p20-home .p20-step-panel .p20-gauge-spark{height:91px}
 html body.p20-app .p20-home .p20-graph-helper{top:39px}
 html body.p20-app .p20-home .p20-graph-helper>span{bottom:37px;font-size:9px;padding:2px 5px}
 html body.p20-app .p20-home .p20-gauge figcaption{display:none}
 html body.p20-app .p20-home .p20-hero-foot{position:relative;inset:auto;margin:5px 12px 0;gap:2px;width:auto;z-index:4}
 html body.p20-app .p20-home .p20-hero-foot .p20-trend-meta{font-size:10px;line-height:1.4;gap:3px}
 html body.p20-app .p20-home .p20-hero-foot .p20-trend-meta small{font-size:9px;line-height:1.4}
 html body.p20-app .p20-home .p20-tape-row{height:20px;gap:5px}.p20-app .p20-home .p20-tape-row>span{font-size:9px}
 html body.p20-app .p20-home .p20-hero-foot .p20-reading-tape{font-size:10px;height:20px}
 html body.p20-app .p20-home .p20-hero-foot .p20-illustration-note{font-size:8px;white-space:normal;line-height:1.4;padding:2px 5px;max-width:100%}
 html body.p20-app .p20-home .p20-hero-actions{position:relative;inset:auto;display:flex;margin:6px 12px 0;order:6;z-index:4}
 html body.p20-app .p20-home .p20-hero-actions a{min-height:36px;padding:5px 10px;font-size:12px;gap:5px}.p20-app .p20-home .p20-hero-actions svg{width:17px;height:17px}
 .p20-home #p20Situation>.p20-scene-strip{gap:5px}.p20-home #p20Situation>.p20-scene-strip button{padding:7px 6px;min-height:49px}.p20-home #p20Situation>.p20-scene-strip strong{font-size:11px}.p20-home #p20Situation>.p20-scene-strip small{font-size:9px}
 .p20-home #p20Situation>.p20-scene-caption{font-size:9px;line-height:1.5}.p20-home #p20SceneAuto{min-height:30px;padding:3px 6px;font-size:10px}
 html[data-p20-text=large] body.p20-app .p20-home .p20-hero h1{font-size:29px}
 html[data-p20-text=large] body.p20-app .p20-home .p20-hero #p20WaterLabel{font-size:20px}
 html[data-p20-text=large] body.p20-app .p20-home .p20-hero-copy{padding-top:67px}
 html[data-p20-text=large] body.p20-app .p20-home .p20-hero .p20-point-only{font-size:12px}
 html[data-p20-text=large] body.p20-app .p20-home .p20-hero .p20-gauge{height:246px}
 html[data-p20-text=large] body.p20-app .p20-home .p20-hero .p20-step-panel{top:135px!important}
}
@media(max-width:540px){
 .p20-app .p20-utilities{display:grid;grid-template-columns:57px minmax(0,1fr) 113px;gap:5px;align-items:stretch}
 .p20-app .p20-utilities>#p20TextSize{min-width:0;min-height:52px;display:flex;flex-direction:column;gap:0;padding:4px;font-size:8px;line-height:1.2}
 .p20-app .p20-utilities>#p20TextSize b{font-size:19px}.p20-app .p20-utilities>#p20TextSize span{font-size:8px;white-space:normal}
 .p20-app .p20-utilities .p20-clock-menu>summary{min-height:52px;padding:4px 6px;gap:4px;box-sizing:border-box;font-size:10px;line-height:1.3}
 .p20-app .p20-utilities .p20-clock-menu>summary>svg{width:15px;height:15px;flex:none}
 .p20-app .p20-utilities #p20PeriodLabel{font-size:9px;line-height:1.2}.p20-app .p20-utilities #p20PeriodLabel img{width:17px;height:17px}
 .p20-app .p20-utilities #p20ClockSound{min-width:0;min-height:52px;padding:4px;font-size:10px;line-height:1.3}.p20-app .p20-utilities #p20ClockSound small{font-size:8px}
 html body.p20-app .p20-home .p20-hero-copy{padding-top:51px}
 html body.p20-app .p20-home .p20-main-value>strong{font-size:54px}
 html body.p20-app .p20-home .p20-value-cycle{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-content:center;gap:1px 5px;max-width:105px;min-width:83px;padding:0 0 0 6px}
 html body.p20-app .p20-home .p20-value-cycle .p20-measured-reel{grid-column:1/3}
 html body.p20-app .p20-home .p20-value-cycle #p20NextLabel,html body.p20-app .p20-home .p20-value-cycle #p20NextCheck{font-size:10px!important;line-height:1.3}
 html body.p20-app .p20-home .p20-hero .p20-gauge{margin-top:23px;height:235px}
 html body.p20-app .p20-home .p20-step-panel .p20-gauge-track,html body.p20-app .p20-home .p20-step-panel .p20-gauge-spark{height:100px}
 html body.p20-app .p20-home .p20-graph-helper{top:48px}
 html body.p20-app .p20-home .p20-graph-helper>span{bottom:36px;line-height:1.4}
 html body.p20-app .p20-home .p20-hero-foot-bottom{position:absolute;top:calc(100% + 6px);right:0;width:46%;height:36px;display:flex;align-items:center;justify-content:flex-end}
 html body.p20-app .p20-home .p20-hero-foot .p20-illustration-note{padding:0;border:0;background:transparent;text-align:right;font-size:8px}
 html body.p20-app .p20-home .p20-hero-actions{width:49%;margin-top:6px}.p20-app .p20-home .p20-hero-actions a{width:100%;font-size:11px!important;padding:4px 5px!important}
}
/* Do not apply chart SVG sizing to the walking warning icon nested inside it. */
.p20-app .p20-step-panel .p20-graph-helper svg.p20-helper{width:28px;height:28px;left:8px;bottom:0}
@media(max-width:540px){
 html body.p20-app .p20-home .p20-gauge .p20-river-section,html body.p20-app .p20-home .p20-earth-tube,html body.p20-app .p20-home .p20-water-tube{height:100px}
 html body.p20-app .p20-home .p20-step-panel{top:111px!important;height:124px}
 html body.p20-app .p20-home .p20-step-panel .p20-gauge-track,html body.p20-app .p20-home .p20-step-panel .p20-gauge-spark{height:108px}
 html body.p20-app .p20-home .p20-graph-helper{top:56px}
 html body.p20-app .p20-home .p20-graph-helper>span{bottom:38px}
 html body.p20-app .p20-home .p20-graph-helper svg.p20-helper{width:22px;height:22px;left:11px}
 .p20-app .p20-utilities #p20UtilityStatus{font-size:9px;line-height:1.4;min-height:0;margin:0}
 html body.p20-app .p20-home .p20-hero[data-period=dawn]{background-image:url('../images/premium/river-mobile-dawn-v206.webp')!important}
 html[data-p20-text=large] body.p20-app .p20-home .p20-hero .p20-gauge{height:269px}
 .p20-home .p20-scene-strip button[data-scene-preview=dawn]{--scene:url('../images/premium/river-mobile-dawn-v206.webp')!important}
 .p20-home .p20-scene-strip button[data-scene-preview=light]{--scene:url('../images/premium/river-mobile-day-v206.webp')!important}
 .p20-home .p20-scene-strip button[data-scene-preview=dark]{--scene:url('../images/premium/river-mobile-night-v206.webp')!important}
 .p20-app .p20-utilities #p20ClockSound{grid-template-columns:24px minmax(0,1fr);column-gap:4px}
 .p20-app .p20-utilities #p20ClockSound>span,.p20-app .p20-utilities #p20ClockSound>small{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
 .p20-app .p20-utilities #p20ClockSound .p20-switch{width:24px;height:16px}
 .p20-app .p20-utilities #p20ClockSound .p20-switch:before{width:12px;height:12px}
 .p20-app .p20-utilities #p20ClockSound[aria-pressed=true] .p20-switch:before{transform:translateX(8px)}
}

/* 2.0.5: traffic covers share a complete source-to-map fallback and a fitted title. */
html body.p20-app .kt-card .kt-card-body{padding:9px;gap:4px;min-width:0}
html body.p20-app .kt-card .kt-card-body>strong{font-size:13px!important;line-height:1.65!important;min-height:3.3em;max-height:none!important;height:auto;margin:0;width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body.p20-app .kt-card .kt-card-body>span:not(.kt-card-action){font-size:11px!important;line-height:1.6!important;max-width:100%}
html body.p20-app .kt-card .kt-card-body>small{font-size:10px!important;line-height:1.6!important;max-width:100%;overflow-wrap:anywhere}
html body.p20-app .kt-card .kt-card-action{font-size:11px!important;line-height:1.6;min-height:24px}
html body.p20-app .kt-card .kt-card-map{font-size:10px!important;padding:5px 8px;margin:0 9px 9px;align-self:flex-start;max-width:calc(100% - 18px);box-sizing:border-box;white-space:normal}
html body.p20-app .ki-player:is([data-state=poster],[data-state=offline])>.ki-controls{display:none!important}
html body.p20-app .ki-controls{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)!important}
html body.p20-app .ki-controls>.ki-full{grid-column:2;width:36px!important;min-height:36px!important;max-width:36px;font-size:16px!important}
html body.p20-app .ki-controls>.ki-play{grid-column:1;font-size:11px!important}
html body.p20-app .ki-controls>a{grid-column:3;font-size:10px!important}
html body.p20-app .kh-camera-cover .kh-cover-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
html body.p20-app .kh-camera-cover .kh-cover-empty-icon{position:absolute;inset:33% auto auto 50%;width:40px;height:40px;transform:translateX(-50%);object-fit:contain;opacity:.8;z-index:1}
html body.p20-app .kh-camera-cover[data-cover-state=ready] .kh-cover-empty-icon{display:none}
html body.p20-app .kh-camera-cover[data-cover-state=ready] .kh-cover-copy{display:none}
html body.p20-app .kh-camera-cover .kh-cover-copy{inset:58% 8px auto;text-align:center;z-index:2}
html body.p20-app .kh-camera-cover .kh-cover-copy strong{font-size:10px;line-height:1.6;-webkit-line-clamp:1}
html body.p20-app .kh-camera-cover .kh-cover-copy small{display:none}
html body.p20-app .kh-feed-screen .kh-camera-cover>.kh-cover-label{display:block!important;top:30px;left:6px;right:6px;max-width:calc(100% - 12px);width:max-content;box-sizing:border-box;padding:1px 3px;border:0;background:#071827c9;font-size:8px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3}
html body.p20-app .kh-camera-cover>.kh-cover-credit{position:absolute;bottom:29px;left:7px;z-index:3;color:#fff;font-size:8px;line-height:1.4;text-shadow:0 1px 2px #000;background:#07182799;padding:1px 3px;max-width:calc(100% - 48px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.p20-app .kh-camera-cover>.kh-cover-credit:empty{display:none}
@media(max-width:540px){html body.p20-app .kt-card .kt-card-body>strong{font-size:12px!important}html body.p20-app .kt-card .kt-card-body{padding:8px}html body.p20-app .kh-feed-kind,html body.p20-app .kh-feed-clock{font-size:8px!important;padding:2px 3px}html body.p20-app .kh-feed-status{font-size:8px;padding:2px 4px}html body.p20-app .kh-camera-cover>.kh-cover-credit{font-size:7px;bottom:26px}}

/* Floating information uses a close dark outline, leaving the picture unobstructed. */
html body.p20-app :is(.kh-feed-kind,.kh-feed-clock,.kh-feed-status,.kh-feed-archive,.kh-cover-copy,.kh-camera-cover>.kh-cover-label,.kh-camera-cover>.kh-cover-credit){background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;text-shadow:-1px -1px 1px #07111c,1px -1px 1px #07111c,-1px 1px 1px #07111c,1px 1px 1px #07111c,0 1px 3px #000;filter:none}
html body.p20-app .kh-feed-head{align-items:flex-start}
html body.p20-app .kh-feed-clock{white-space:pre-line;text-align:right;font-size:9px;line-height:1.35;padding:0}
html body.p20-app .kh-feed-kind{font-size:9px;padding:0;filter:drop-shadow(0 1px 2px #000)}
html body.p20-app .kh-feed-kind img{filter:drop-shadow(0 1px 1px #000)}
html body.p20-app .kh-feed-status{padding:2px 0;line-height:1.5;font-size:9px}
html body.p20-app .kh-feed-screen .kh-camera-cover>.kh-cover-label{top:25px;right:72px;max-width:calc(100% - 78px);font-size:8px;padding:0}
html body.p20-app .kh-camera-cover>.kh-cover-credit{font-size:7px;padding:0;bottom:29px;max-width:calc(100% - 50px)}
html body.p20-app .kh-feed-archive{top:26px;right:68px;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.p20-app .kh-camera-cover:after{background:linear-gradient(0deg,#07182740,transparent 45%)}
html body.p20-app .kh-feed-status:before{filter:drop-shadow(0 0 2px #000)}
html body.p20-app .kh-feed-status[data-mode=stream]:before{background:#ff4262;border:0}
@media(max-width:360px){html body.p20-app .kh-camera-cover>.kh-cover-credit{display:none}html body.p20-app .kh-feed-clock{font-size:8px}}

html body.p20-app .ct-card .ct-info>strong,html body.p20-app .kmw-card .kmw-card-body>h3{font-size:13px!important;line-height:1.65!important;min-height:3.3em;max-height:none!important;height:auto;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
html body.p20-app .ct-card .ct-info>small{font-size:10px!important;line-height:1.65;max-width:100%;overflow-wrap:anywhere}
html body.p20-app #ctMAngles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible}
html body.p20-app #ctMAngles button{min-width:0;font-size:11px;line-height:1.5;white-space:normal;padding:7px 6px}
@media(max-width:540px){html body.p20-app .ct-card .ct-info>strong,html body.p20-app .kmw-card .kmw-card-body>h3{font-size:12px!important}}

/* Compact, consistent text wrapping for source names with Thai combining marks. */
html body.p20-app .ct-info,html body.p20-app .kt-card-body,html body.p20-app .kmw-card-body{text-align:start;letter-spacing:normal;word-spacing:normal;min-width:0}
html body.p20-app .ct-card .ct-info{padding:9px;gap:4px;min-height:0}
html body.p20-app .kh-feed-status:before{background:#ff3558!important;border-color:#fff!important;box-shadow:0 0 0 1px #8d1832!important}
html body.p20-app .ct-card .ct-info>strong,html body.p20-app .kt-card .kt-card-body>strong,html body.p20-app .kmw-card .kmw-card-body>h3{padding-bottom:2px;line-break:loose;word-break:normal}

@keyframes kh-live-red-ripple{0%,100%{box-shadow:0 0 0 0 #ff355878,0 0 3px #ff3558;opacity:1}65%{box-shadow:0 0 0 4px #ff355800,0 0 5px #ff3558;opacity:.8}}
html body.p20-app .kh-feed-status:before{animation:kh-live-red-ripple 1.8s ease-out infinite!important}
@media(prefers-reduced-motion:reduce){html body.p20-app .kh-feed-status:before{animation:none!important}}

/* Reserve stable layout, reveal the complete card only after its cover resolves. */
html body.p20-app :is(.ct-card,.kt-card,.kmw-card)[data-poster-state=loading]{visibility:hidden;opacity:0;pointer-events:none}
html body.p20-app :is(.ct-card,.kt-card,.kmw-card)[data-poster-state=ready]{visibility:visible;opacity:1;transition:opacity .2s ease}
.kh-covers-progress{font-size:12px;line-height:1.7;color:var(--p20-muted,#52697a);margin:6px 0}
html body.p20-app .kh-camera-cover[data-cover-state=unavailable]{background:var(--p20-card,#e9f1f4)}
@media(prefers-reduced-motion:reduce){html body.p20-app :is(.ct-card,.kt-card,.kmw-card)[data-poster-state=ready]{transition:none}}

/* Weather is matched to the named district, separate from the actual camera feed. */
.kh-camera-weather{position:absolute;left:6px;top:28px;right:6px;display:flex;align-items:center;gap:7px;z-index:6;pointer-events:none;color:#fff;text-shadow:1px 1px 2px #000,-1px -1px 1px #000;font-size:9px;line-height:1.4;white-space:nowrap}
.kh-camera-weather[hidden]{display:none!important}.kh-camera-weather-value{display:flex;gap:2px;align-items:center}.kh-camera-weather svg{width:12px!important;height:12px!important;fill:none;stroke:#5ee6ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #000)}.kh-camera-weather-value:first-child svg{stroke:#ffc947}.kh-camera-weather b{font-size:inherit!important}.kh-camera-weather-caption{font-size:7px!important}.kh-camera-weather-area{display:none}
html body.p20-app .kh-feed-screen .kh-camera-cover>.kh-cover-label{top:auto;bottom:25px;left:6px;right:6px;max-width:calc(100% - 12px);font-size:7px}
html body.p20-app .ct-shot .kc-expand,html body.p20-app .ki-screen .ki-poster-play,html body.p20-app .ki-screen .ki-poster-play:before{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;filter:drop-shadow(0 1px 2px #000)}
html body.p20-app .ct-shot .kc-expand svg{width:18px;height:18px;stroke-width:2.3}html body.p20-app .ki-screen .ki-poster-play{font-size:21px!important;text-shadow:0 1px 3px #000}
html body.p20-app .ki-controls>.ki-full,html body.p20-app .ki-controls>.ki-play{background:transparent!important;border-color:transparent!important}
.ki-screen:fullscreen .kh-camera-weather{top:48px;font-size:16px;gap:14px;flex-wrap:wrap}.ki-screen:fullscreen .kh-camera-weather svg{width:20px!important;height:20px!important}.ki-screen:fullscreen .kh-camera-weather-area{display:block;flex-basis:100%;font-size:12px}.ki-screen:fullscreen .kh-camera-weather-caption{font-size:11px!important}
.kh-camera-modes{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 3px}.kh-camera-modes button{min-height:36px;padding:6px 11px;border-radius:20px;border:1px solid var(--p20-line,#91a9b9);background:transparent;color:inherit;font:600 12px/1.5 'KH24 Thai',sans-serif;cursor:pointer}.kh-camera-modes button[data-mode]:not([data-mode=all]):before{content:'';display:inline-block;width:5px;height:5px;background:#ff3558;border-radius:50%;margin-right:6px}.kh-camera-modes button[aria-pressed=true]{background:#006f86;color:#fff;border-color:#006f86}.kh-camera-mode-note{display:block;font-size:10px;line-height:1.6;margin-bottom:9px}
@media(max-width:400px){.kh-camera-weather{gap:5px;font-size:8px}.kh-camera-weather svg{width:11px!important;height:11px!important}.kh-camera-weather-caption{font-size:6px!important}.kh-camera-modes{gap:5px}.kh-camera-modes button{font-size:11px;padding:6px 9px}}

html body.p20-app .kh-camera-weather,html body.p20-app .kh-camera-weather small,html body.p20-app .kh-camera-weather b{color:#fff!important;text-shadow:1px 1px 2px #000,-1px -1px 1px #000!important}
html body.p20-app .kh-camera-weather-caption{font-size:8px!important}
html body.p20-app .p20-map-cluster b,html body.p20-app .kmw-cluster,html body.p20-app .marker-cluster,html body.p20-app .marker-cluster>div{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;text-shadow:-1px -1px 1px #000,1px -1px 1px #000,-1px 1px 1px #000,1px 1px 1px #000,0 2px 3px #000;font-weight:800}
html body.p20-app .p20-map-cluster b{font-size:11px;right:-10px;top:24px}
.kh-reference-symbol.is-temple{color:#ffba39}.kh-reference-symbol.is-school{color:#bb94ff}.kh-reference-symbol.is-lodging{color:#73e7d6}.kh-reference-symbol.is-pier{color:#51ddff}.kh-reference-symbol.is-tourism{color:#ffb56e}.kh-reference-symbol.is-village{color:#5be8ff}.kh-reference-symbol.is-food,.kh-reference-symbol.is-cafe{color:#ffc44b}
html body.p20-app #khMedia{--km-bg:#fff;--km-card:#f2f7fb;--km-text:#102d4a;--km-muted:#456278;--km-line:#adc4d4;--km-accent:#006f86;--km-on:#fff}
html[data-p20-theme=dark] body.p20-app #khMedia,html body.p20-app[data-p20-theme=dark] #khMedia,[data-p20-theme=dark] body.p20-app #khMedia{--km-bg:#1d1f23;--km-card:#282c32;--km-text:#f2f7fa;--km-muted:#bfd3df;--km-line:#53616e;--km-accent:#c6ef86;--km-on:#163019}
/* Data-linked camera effects stay at the edges so the source image remains readable. */
.kh-camera-fx{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;border-radius:inherit}.kh-camera-fx i{position:absolute;display:none;pointer-events:none}
/* Tiny SVG patterns are painted once; only transforms animate. No video/canvas or per-drop DOM. */
.kh-camera-fx[data-weather=rain] .kh-fx-rain,.kh-camera-fx[data-weather=storm] .kh-fx-rain{display:block;right:3px;top:72px;bottom:28px;width:28px;min-height:14px;opacity:.9}
.kh-fx-rain:before{content:'';position:absolute;inset:-32px 0 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M7 2c0 0-4 5-4 7a4 4 0 0 0 8 0c0-2-4-7-4-7Zm15 15s-4 5-4 7a4 4 0 0 0 8 0c0-2-4-7-4-7Z' fill='%2367dcff' stroke='%230c344a' stroke-width='1.2'/%3E%3C/svg%3E") repeat-y;animation:khCameraDrops 1.7s linear infinite;clip-path:inset(18px 0 0)}
.kh-fx-rain:after{content:'';position:absolute;right:0;top:-19px;width:28px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'%3E%3Cpath d='M8 20a6 6 0 0 1-1-12 9 9 0 0 1 17-1 7 7 0 0 1 0 13Z' fill='%23e5f6ff' stroke='%23132d40' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 1px #000)}
.kh-camera-fx[data-weather=storm] .kh-fx-rain:before{animation-duration:1s}
.kh-camera-fx[data-weather=storm] .kh-fx-wind{display:block;right:7px;top:62px;width:13px;height:21px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M8 1 1 14h6l-2 9L15 9H9l4-8Z' fill='%23ffcf48' stroke='%232a2630' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;animation:khCameraIcon 3.5s ease-in-out infinite}
.kh-camera-fx[data-water=true] .kh-fx-water{display:block;bottom:0;left:0;width:100%;height:13px;overflow:hidden}
.kh-fx-water:before,.kh-fx-water:after{content:'';position:absolute;left:0;bottom:-2px;width:calc(100% + 96px);height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' viewBox='0 0 96 16'%3E%3Cpath d='M0 7Q12 0 24 7T48 7T72 7T96 7V16H0Z' fill='%23069cc1' fill-opacity='.45'/%3E%3Cpath d='M0 7Q12 0 24 7T48 7T72 7T96 7' fill='none' stroke='%238bf4ff' stroke-width='1.8'/%3E%3C/svg%3E") repeat-x;animation:khCameraWater 4s linear infinite}
.kh-fx-water:after{bottom:-5px;opacity:.6;animation-duration:6s;animation-direction:reverse}
.kh-camera-event-badge{position:absolute;top:48px;left:7px;right:7px;z-index:6;color:#fff!important;text-shadow:1px 1px 2px #000,-1px -1px 1px #000;font-size:8px!important;line-height:1.5;pointer-events:none;font-weight:700}.kh-camera-event-badge:before{content:'!';color:#ffd36a;margin-right:4px}.kh-camera-event-badge[data-alert=true]:before{color:#ff4561}.kh-camera-event-badge[hidden]{display:none!important}
.kh-camera-image-screen{position:relative;overflow:hidden;border-radius:14px;max-width:100%;line-height:0}.kh-camera-image-screen>img{display:block;width:100%;height:auto;object-fit:contain;margin:0!important}.kh-camera-image-screen .kh-camera-fx{inset:0}
.kh-camera-viewer-events{display:grid;gap:7px;margin:8px 0 12px;border-left:3px solid #d69d31;padding-left:9px}.kh-camera-viewer-events[data-alert=true]{border-color:#ff4561}.kh-camera-viewer-events[hidden]{display:none}.kh-camera-viewer-events p{display:grid;grid-template-columns:18px minmax(0,1fr);gap:3px 7px;margin:0!important;font-size:12px;line-height:1.5}.kh-camera-viewer-events svg{width:18px!important;height:18px!important;grid-row:1/3;stroke:#e4ac42!important}.kh-camera-viewer-events b{font-size:12px!important;color:var(--kc-text)!important}.kh-camera-viewer-events small{grid-column:2;color:var(--kc-muted)!important;font-size:10px!important}
.kh-camera-ticker{border:1px solid var(--line,#d2e6ed);border-left:3px solid #dba639;border-radius:12px;overflow:hidden;padding:7px 10px;margin:12px 0;background:var(--panel,#fff);color:var(--ink,#12314c);max-width:100%;min-width:0}.kh-camera-ticker[hidden]{display:none!important}.kh-camera-ticker[data-alert=true]{border-left-color:#ff4561}.kh-camera-ticker-head{display:flex;align-items:center;gap:6px}.kh-camera-ticker-head>b{font-size:12px;flex:1;min-width:0}.kh-camera-ticker-head button{font-family:inherit;font-size:10px;min-height:32px;border:0;background:transparent;color:inherit;padding:4px 7px;border-radius:8px}.kh-camera-ticker-head button:hover{background:#44889920}.kh-camera-ticker-track{overflow:hidden;min-width:0}.kh-camera-ticker-item{display:block;width:100%;border:0;padding:5px 0;min-height:36px;background:transparent;color:inherit;font-family:inherit;text-align:left;overflow:hidden}.kh-camera-ticker-item>span{display:inline-block;min-width:100%;padding-right:40px;font-size:12px;white-space:nowrap;animation:khCameraTicker var(--kh-ticker-duration,25s) linear infinite}.kh-camera-ticker:hover .kh-camera-ticker-item>span,.kh-camera-ticker:focus-within .kh-camera-ticker-item>span,.kh-camera-ticker[data-paused=true] .kh-camera-ticker-item>span{animation-play-state:paused}.kh-camera-ticker-details>summary{font-size:10px;min-height:26px;cursor:pointer;line-height:2.2}.kh-camera-ticker-details>div{display:grid;gap:6px;max-height:220px;overflow:auto}.kh-camera-ticker-details button{font:inherit;text-align:left;color:inherit;background:transparent;border:1px solid #6a879944;border-radius:9px;padding:8px;display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}.kh-camera-ticker-details strong{font-size:12px}.kh-camera-ticker-details span{font-size:11px}
[data-p20-theme=dark] .kh-camera-ticker{background:#1d1f23;color:#f4f7fa;border-color:#505b66}[data-p20-theme=dark] .kh-camera-ticker[data-alert=true]{border-left-color:#ff4561}
@keyframes khCameraDrops{to{transform:translateY(32px)}}@keyframes khCameraWater{to{transform:translateX(-96px)}}@keyframes khCameraIcon{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes khCameraTicker{0%,12%{transform:translateX(0)}90%,100%{transform:translateX(var(--kh-ticker-distance,0px))}}
[data-p20-motion=reduce] .kh-camera-fx i,[data-p20-motion=reduce] .kh-camera-fx i:before,[data-p20-motion=reduce] .kh-camera-fx i:after,[data-p20-motion=reduce] .kh-camera-weather svg,[data-p20-motion=reduce] .kh-camera-ticker-item>span{animation:none!important}[data-p20-motion=reduce] .kh-camera-ticker-item>span{white-space:normal;padding-right:0}
@media(prefers-reduced-motion:reduce){.kh-camera-fx i,.kh-camera-fx i:before,.kh-camera-fx i:after,.kh-camera-weather svg,.kh-camera-ticker-item>span{animation:none!important}.kh-camera-ticker-item>span{white-space:normal;padding-right:0}}
@media(max-width:380px){.kh-camera-ticker{padding:6px 8px}.kh-camera-ticker-head>b{font-size:11px}.kh-camera-ticker-head button{padding:3px 5px}.kh-camera-ticker-item>span{font-size:11px}}
.kh-camera-fx i,.kh-camera-fx i:before,.kh-camera-fx i:after,.kh-camera-weather svg{animation-play-state:var(--kh-fx-state,paused)!important}
html body.p20-app .kmw-poster>.ki-poster-play{position:absolute;right:5px;bottom:4px;left:auto;top:auto;z-index:8;width:28px;min-width:28px;height:28px;min-height:28px;padding:3px;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;color:#fff!important;font-size:21px;line-height:1;text-shadow:0 1px 3px #000;filter:drop-shadow(0 1px 2px #000)}
/* Floating source text stays transparent, and never covers an open map detail. */
html body.p20-app .leaflet-container .kh-official-map-control,html body.p20-app .leaflet-container .kh-official-map-control label,html body.p20-app .leaflet-container .kh-official-map-control span,html body.p20-app .leaflet-container .kh-official-map-ticker{color:#fff!important;text-shadow:1px 0 1px #000,-1px 0 1px #000,0 1px 2px #000,0 -1px 1px #000!important}
html body.p20-app .leaflet-container .kh-official-map-ticker{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;min-height:0!important;font:inherit!important}
.leaflet-container:has(.leaflet-popup) .kh-official-map-control,.leaflet-container:has(.leaflet-popup) .kh-reference-control{visibility:hidden;pointer-events:none}
/* The viewer presents one feed; supplementary information starts folded. */
html body.p20-app dialog.kh-focused-viewer{width:min(920px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;padding:0!important;overflow:auto;border-radius:16px}
html body.p20-app .kh-focused-viewer :is(.ct-box,.kt-viewer-box){padding:12px!important;max-width:100%;width:100%;min-width:0;max-height:none!important;overflow:visible!important;box-sizing:border-box}
html body.p20-app #kmwViewer.kh-focused-viewer{padding:12px!important}
html body.p20-app .kh-focused-viewer :is(.kc-viewer-head,.kt-viewer-head,header){display:flex!important;gap:8px;align-items:center;min-width:0;margin:0 0 10px!important;padding:0!important}
html body.p20-app .kh-focused-viewer :is(.kc-viewer-head,.kt-viewer-head,header)>div{flex:1;min-width:0}
html body.p20-app .kh-focused-viewer h2{font-size:clamp(13px,2vw,18px)!important;line-height:1.5!important;margin:0!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html body.p20-app .kh-focused-viewer :is(.kh-viewer-full,.ct-x,.kt-close,#kmwClose){width:34px!important;height:34px!important;min-height:34px!important;min-width:34px!important;padding:0!important;flex:0 0 34px!important;font-size:23px!important;line-height:1!important;border:0!important;background:transparent!important;color:inherit!important;box-shadow:none!important}
html body.p20-app .kh-focused-viewer .kh-media-stage{position:relative;width:100%;min-width:0;aspect-ratio:16/9;min-height:0!important;max-height:65dvh;overflow:hidden;background:#07101b;border-radius:10px;margin:0!important}
html body.p20-app .kh-focused-viewer .kh-media-stage>img,html body.p20-app .kh-focused-viewer .kh-media-stage>video{display:block;width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;position:absolute;inset:0;margin:0!important;border:0;border-radius:0!important}
html body.p20-app .kh-focused-viewer .kh-media-stage>img[hidden]{display:none!important}
html body.p20-app .kh-focused-viewer .kh-viewer-details{margin:10px 0 0!important;padding:0!important;border:0!important;background:transparent!important;min-width:0}
html body.p20-app .kh-viewer-details>summary{font-size:12px!important;line-height:1.6;cursor:pointer;padding:8px 0;min-height:32px}
html body.p20-app .kh-viewer-details p{font-size:11px!important;line-height:1.6!important;overflow-wrap:anywhere}
html body.p20-app .kh-focused-viewer .kh-camera-context{margin:8px 0 0!important;padding:0!important}
html body.p20-app .kh-focused-viewer .kh-context-rail{gap:6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
html body.p20-app .kh-focused-viewer .kh-context-button{min-height:40px!important;padding:5px!important;font-size:11px!important}
html body.p20-app .kh-focused-viewer .kh-context-button svg{width:16px!important;height:16px!important}
html body.p20-app .kh-focused-viewer .kh-camera-viewer-events{display:none}
html body.p20-app .kh-focused-viewer .kh-context-panel:not([hidden]) .kh-camera-viewer-events{display:block}
html body.p20-app .kh-focused-viewer .kh-media-stage :is(.kh-feed-head,.kh-camera-weather,.kh-camera-event-badge,.kh-feed-status){display:none!important}
/* Native fullscreen includes only the selected media and a small exit control. */
html body.p20-app :is(.kh-media-stage:fullscreen,.kh-media-expanded){position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;border-radius:0!important;background:#05090f!important;z-index:2147483647!important;box-sizing:border-box;padding-top:38px!important}
html body.p20-app :is(.kh-media-stage:fullscreen,.kh-media-expanded)>:is(img,video){position:absolute!important;inset:38px 0 0!important;width:100%!important;height:calc(100% - 38px)!important;max-height:none!important;object-fit:contain!important;border-radius:0!important}
html body.p20-app :is(.kh-media-stage:fullscreen,.kh-media-expanded) :is(.kh-feed-head,.kh-feed-status,.kh-camera-weather,.kh-camera-event-badge,.kh-camera-fx,.kh-cover-copy,.kh-cover-label){display:none!important}
html body.p20-app .kh-media-exit{position:absolute!important;top:2px!important;right:max(6px,env(safe-area-inset-right))!important;z-index:30!important;width:34px!important;height:34px!important;min-height:34px!important;background:transparent!important;color:white!important;border:0!important;padding:0!important;font:24px/1 sans-serif!important}
/* Each overlay gets its own row; wall-clock dates cannot collide with weather. */
html body.p20-app .kh-camera-weather{top:39px;gap:5px;max-width:calc(100% - 12px);overflow:hidden}
html body.p20-app .kh-camera-event-badge{top:59px}
html body.p20-app .kh-camera-ticker-track,html body.p20-app .kh-camera-ticker-item{height:34px!important;min-height:34px!important;max-height:34px!important;padding:0!important;line-height:34px!important;white-space:nowrap!important}
html body.p20-app .kh-camera-ticker-item>span{white-space:nowrap!important;line-height:34px!important;font-size:12px!important;margin:0!important;padding-top:0!important;padding-bottom:0!important}
@media(max-width:400px){html body.p20-app .kh-focused-viewer :is(.ct-box,.kt-viewer-box){padding:8px!important}html body.p20-app .kh-focused-viewer .kh-context-button small{font-size:9px!important}}
html body.p20-app dialog.kh-player-only{position:fixed!important;inset:0!important;margin:0!important;width:100vw!important;height:100dvh!important;max-width:100vw!important;max-height:100dvh!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#05090f!important;transform:none!important}
html body.p20-app dialog.kh-player-only :is(.ct-box,.kt-viewer-box){padding:0!important;height:100%;overflow:hidden!important}
html body.p20-app dialog.kh-player-only :is(.kc-viewer-head,.kt-viewer-head,header,.kh-viewer-details,.kh-camera-context){display:none!important}
html body.p20-app dialog.kh-player-only .kh-media-stage{position:fixed!important;inset:0!important;max-height:100dvh!important;width:100vw!important;height:100dvh!important;overflow:hidden!important}

html body.p20-app .kh-media-expanded>iframe{position:absolute!important;top:38px!important;left:0!important;border:0!important;border-radius:0!important}
html body.p20-app .kh-focused-viewer .kt-mode[aria-pressed=true]{background:#006f80!important;color:#fff!important;border-color:#006f80!important}
/* A single map toolbar replaces competing vertical controls. Options open inside the map. */
html body.p20-app .leaflet-container .kh-map-navigation{margin:0 0 28px 10px!important;clear:both;float:none!important;pointer-events:auto}
html body.p20-app .kh-map-navigation .kh-map-navigation-row{display:flex!important;flex-direction:row!important;align-items:center;width:max-content;max-width:100%;padding:3px;border-radius:14px;gap:1px;background:#f5fbfff2;border:1px solid #9ebacb;box-shadow:0 3px 14px #04192844}
html body.p20-app .kh-map-navigation-row>button{height:36px!important;min-height:36px!important;width:36px!important;min-width:36px!important;padding:5px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#123c55!important;box-shadow:none!important}
html body.p20-app .kh-map-navigation-row>.kh-map-compass{display:none!important}
html body.p20-app .kh-map-navigation-row>button:focus-visible{outline:2px solid #007895!important}
html body.p20-app .kh-map-navigation-row>.kh-map-tools-toggle{font-size:25px!important}
html body.p20-app .kh-map-tools-panel{position:absolute;z-index:1100;transform:translateX(-50%);box-sizing:border-box;display:flex;flex-direction:column;max-width:calc(100% - 24px);padding:12px;border-radius:16px;border:1px solid #acc3d3;background:#f8fcff;color:#17384e;box-shadow:0 10px 35px #0414215c;overflow:hidden;font:12px/1.6 'KH24 Thai',sans-serif;pointer-events:auto}
html body.p20-app .kh-map-tools-panel[hidden]{display:none!important}
html body.p20-app .kh-map-tools-panel>header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;margin:0 0 8px;padding:0}
html body.p20-app .kh-map-tools-panel>header strong{font-size:14px!important;color:inherit!important}
html body.p20-app .kh-map-tools-panel .kh-map-tools-close{width:32px;min-height:32px;padding:0;border:0;background:transparent;color:inherit;font-size:23px;cursor:pointer}
html body.p20-app .kh-map-tools-body{overflow:auto;min-height:0;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px}
html body.p20-app .kh-map-tools-body>.leaflet-control{position:relative;float:none!important;clear:none!important;margin:0!important;width:100%!important;max-width:100%!important;visibility:visible!important;pointer-events:auto!important;box-shadow:none!important;border:0!important;border-radius:0!important;background:transparent!important}
html body.p20-app .kh-map-tools-body :is(.kh-reference-control,.kh-reference-control summary,.kh-reference-control label,.kh-reference-control small,.kh-official-map-control,.kh-official-map-control label,.kh-official-map-control span,.kh-official-map-ticker){color:inherit!important;text-shadow:none!important}
html body.p20-app .kh-map-tools-body .kh-reference-options{width:100%!important;max-height:none!important;overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 0}
html body.p20-app .kh-map-tools-body .kh-reference-options label{font-size:11px!important;line-height:1.5;min-height:34px}
html body.p20-app .kh-map-tools-body .kh-reference-control summary,html body.p20-app .kh-map-rotation-options>summary{padding:7px 0!important;min-height:32px;font-size:12px!important;font-weight:700;cursor:pointer}
html body.p20-app .kh-map-tools-body .kh-map-rotate-panel{position:static!important;width:100%!important;max-height:none!important;padding:6px 0;background:transparent;border:0;box-shadow:none;box-sizing:border-box}
html body.p20-app .kh-map-tools-body .kh-map-rotate-panel button{font:inherit;color:#17384e}
html body.p20-app .kh-map-tools-panel .kh-reference-control>small{padding:2px 0;max-width:100%}
html[data-p20-theme=dark] body.p20-app .kh-map-tools-panel{background:#1d2935;color:#f1f6fa;border-color:#6b8395}
html[data-p20-theme=dark] body.p20-app .kh-map-navigation-row{background:#172a38f5;border-color:#708b9c}
html[data-p20-theme=dark] body.p20-app .kh-map-navigation-row>button{color:#f1f8ff!important}
@media(min-width:768px){html body.p20-app .kh-map-navigation-row>button{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}}
html body.p20-app .leaflet-container .kh-map-navigation{margin-bottom:calc(var(--kh-map-credit-height,30px) + 8px)!important}
html body.p20-app .kh-map-navigation-row>.kh-map-fullscreen{display:grid!important}
/* Guide steps retain readable numbers in both day and night palettes. */
html body.p20-app .steps>li::before{background:#086aa7!important;color:#fff!important;border:1px solid #ffffff55;box-shadow:0 2px 5px #092c5422;font:700 15px/1 var(--f-body);text-shadow:none;align-self:start}
html body.p20-app .steps>li:nth-child(2)::before{background:#007786!important}
html body.p20-app .steps>li:nth-child(3)::before{background:#7252a5!important}
html body.p20-app .steps>li:nth-child(4)::before{background:#2b6893!important}
html body.p20-app .steps>li:nth-child(5)::before{background:#176e54!important}
html body.p20-app .kh-map-tools-body .kh-official-map-control[data-stale=true] label:after{color:#885200!important;text-shadow:none!important}
html[data-p20-theme=dark] body.p20-app .kh-map-tools-body .kh-official-map-control[data-stale=true] label:after{color:#ffd580!important}

/* Clear, slightly larger weather symbols without a background panel. */
/* The warning belongs outside the card; the source image and controls stay clear. */
[data-camera-alert=true]{box-shadow:0 0 0 1px #ff304e,0 0 9px 2px #ff234f88!important;outline:2px solid #ff3e57;outline-offset:1px;animation:khCameraWarning 1.8s ease-out infinite;animation-play-state:var(--kh-fx-state,paused)!important}
@keyframes khCameraWarning{0%,50%{outline-offset:0;outline-color:#ff3e57}42%,92%,100%{outline-offset:5px;outline-color:#ff3e5700}}
[data-p20-motion=reduce] [data-camera-alert=true]{animation:none!important;outline-offset:1px}
@media(prefers-reduced-motion:reduce){[data-camera-alert=true]{animation:none!important;outline-offset:1px}}
/* Two time-of-day treatments reuse one static cover. Actual camera frames/video stay untouched. */
html[data-kh-cover-tone=night] .kh-camera-cover .kh-cover-photo{filter:brightness(.42) contrast(1.1) saturate(.72)}
html[data-kh-cover-tone=night] .kh-camera-cover[data-cover-kind=traffic] .kh-cover-photo{filter:brightness(.28) contrast(1.16) saturate(.6)}
html[data-kh-cover-tone=night] body.p20-app .kh-camera-cover:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 96% -6%,#ffcf7970 0%,#ffc0612e 20%,transparent 55%),radial-gradient(ellipse at 4% 106%,#eaa3432b,transparent 48%),linear-gradient(180deg,#06162d38,#02081935);pointer-events:none;z-index:1}
html[data-kh-cover-tone=day] .kh-camera-cover .kh-cover-photo{filter:none}
html body.p20-app .kh-camera-weather{min-height:18px;overflow:visible}
html body.p20-app .kh-camera-weather svg{width:18px!important;height:18px!important;flex-shrink:0;filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 1px #000);animation:khCameraIcon 4s ease-in-out infinite;transform-origin:center}
html body.p20-app .kh-camera-event-badge{top:62px}
@media(max-width:640px){html body.p20-app .kh-camera-weather{gap:4px;font-size:8px}html body.p20-app .kh-camera-weather svg{width:16px!important;height:16px!important}html body.p20-app .kh-camera-weather-caption{font-size:7px!important}.kh-fx-rain:after{width:24px}.kh-camera-fx[data-weather=storm] .kh-fx-wind{right:6px;width:11px}}
@media(max-width:380px){.kh-fx-rain:after{display:none}.kh-camera-fx[data-weather=storm] .kh-fx-wind{top:68px}.kh-camera-fx[data-weather=rain] .kh-fx-rain,.kh-camera-fx[data-weather=storm] .kh-fx-rain{top:68px;width:20px}}

.kh-camera-modes button[data-mode=alert]{color:#c71537;border-color:#db5870}.kh-camera-modes button[data-mode=alert]:before{background:#ff234f}.kh-camera-modes button[data-mode=alert][aria-pressed=true]{background:#b51232;color:#fff;border-color:#ef5a76}.kh-camera-alert-status{font-size:11px;line-height:1.6;margin:8px 0;color:var(--p20-muted,#52697a)}html[data-p20-theme=dark] .kh-camera-modes button[data-mode=alert]{color:#ff9db0}html[data-p20-theme=dark] .kh-camera-modes button[data-mode=alert][aria-pressed=true]{color:white}
html[data-kh-cover-tone=night] .kh-cover-label:before{content:'☾ ปกกลางคืน · ';color:#ffe2a4}
html[data-kh-cover-tone=day] .kh-cover-label:before{content:'☀ ปกกลางวัน · ';color:#fff3c9}

/* Intensity comes from the provider's forecast category, not an invented hourly threshold. */
.kh-camera-fx[data-rain-intensity=heavy] .kh-fx-rain:before{background-size:14px 32px;background-repeat:repeat;animation-duration:.8s}.kh-camera-fx[data-rain-intensity=moderate] .kh-fx-rain:before{background-size:20px 32px;animation-duration:1.2s}.kh-camera-fx[data-rain-intensity=light] .kh-fx-rain:before{opacity:.75;animation-duration:1.8s}
html body.p20-app .kh-camera-rain-period{display:block;color:#cd4c00!important;font-size:10px!important;line-height:1.6;white-space:normal;margin-top:5px}html[data-p20-theme=dark] body.p20-app .kh-camera-rain-period{color:#ffd45b!important}
html body.p20-app .kh-camera-weather svg{stroke:#20e7ff}html body.p20-app .kh-camera-weather-value:first-child svg{stroke:#ffe047}
/* Reserve a separate clock row so current time cannot cover a source timestamp. */
html body.p20-app .kh-focused-viewer .kh-media-stage{box-sizing:border-box;padding-top:28px}
html body.p20-app .kh-focused-viewer .kh-media-stage>:is(img,video){inset:28px 0 0;height:calc(100% - 28px)!important}
html body.p20-app .kh-viewer-clock{position:absolute;top:5px;left:max(8px,env(safe-area-inset-left));right:44px;z-index:25;display:block;color:#fff!important;background:transparent!important;font:600 11px/1.6 var(--f-body,sans-serif);font-variant-numeric:tabular-nums;white-space:normal;text-shadow:0 1px 2px #000;pointer-events:none}
html body.p20-app .kh-viewer-clock:before{content:'เวลาไทยขณะนี้ · ';color:#9eeaff}
html body.p20-app :is(.kh-media-stage:fullscreen,.kh-media-expanded)>:is(img,video){inset:38px 0 0!important;height:calc(100% - 38px)!important}
@media(max-width:380px){html body.p20-app .kh-viewer-clock{font-size:10px}}