:root{
  --frost:#eef4ff; --ice:#bcd6ff; --mint:#7ef0b0; --gold:#ffd479; --pink:#ff9ecb;
  --lav:#b48cff; --sky:#5ad0ff; --wood1:#8a5c33; --wood2:#6b4526; --wood3:#573719;
  --paper:rgba(255,255,255,.05); --line:rgba(160,200,255,.2);
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--frost); font-family:Nunito,system-ui,sans-serif; font-size:15px; line-height:1.5;
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(96,168,214,.30), transparent 70%),
    radial-gradient(1300px 700px at 78% -10%, rgba(96,214,168,.20), transparent 70%),
    radial-gradient(900px 900px at 50% 55%, rgba(120,110,220,.22), transparent 72%),
    linear-gradient(178deg,#121a34 0%,#16203c 38%,#1a1b34 72%,#121527 100%);
  min-height:100vh;
}
.disp{font-family:'Baloo 2',Nunito,system-ui,sans-serif}
.wrap{position:relative; max-width:1720px; margin:0 auto; padding:22px 20px 40px; overflow:hidden}
.kicker{font-size:12px; letter-spacing:2.2px; text-transform:uppercase; color:rgba(206,224,255,.68)}

/* falling snow */
.snowfield{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.snowfield span{position:absolute; top:-60px; animation:npFall linear infinite}
@keyframes npFall{0%{transform:translate3d(0,-60px,0) rotate(0)}10%{opacity:.85}100%{transform:translate3d(28px,110vh,0) rotate(320deg);opacity:0}}
@keyframes npTwinkle{0%,100%{opacity:1;filter:brightness(1.15)}50%{opacity:.35;filter:brightness(.7)}}
@keyframes npBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@media (prefers-reduced-motion: reduce){
  /* Ornament stops. Everything listed here is decoration; the page's actual
     information (radar sweep, snow news) keeps moving, just calmly. */
  .snowfield span, [style*="npBob"], .bob, .tw,
  .brand .lights span, .santa, .cond-ico, .buddies span,
  .sweep-pill-row .pg, .live-pill .d, .cam-hd .rd{animation:none !important}
  /* .atc-line animates FROM opacity:0, so cancelling its animation alone would
     make the tower log invisible. Land it on its end state instead. */
  .atc-line{animation:none !important; opacity:1 !important}
}

/* ---- page nav ---- */
.page-nav{position:relative; z-index:2; display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-bottom:12px; padding:9px 18px; border-radius:99px; border:1.5px solid rgba(160,200,255,.3);
  background:rgba(16,26,52,.6); font-family:'Baloo 2',Nunito,sans-serif; font-weight:700; font-size:13.5px}
.page-nav a{display:inline-flex; align-items:center; gap:7px; color:#cfe0ff; text-decoration:none}
.page-nav a:hover{color:#fff}
.pn-sep{color:#5f7bb0}
.pn-here{display:inline-flex; align-items:center; gap:6px; color:#7ef0b0}
.page-nav .coin{width:24px; height:24px; border-radius:50%; display:block}

/* ---- dense full-width header ---- */
.snowcap{position:absolute; left:14px; right:14px; top:-8px; height:18px; border-radius:18px 18px 46% 46%;
  background:linear-gradient(180deg,#fff,#e2eaff); box-shadow:0 5px 10px rgba(10,16,36,.3)}
.hdr{position:relative; margin-bottom:16px; z-index:1}
.brand{position:relative; display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%;
  padding:10px 18px; border-radius:18px; border:2px solid rgba(206,224,255,.26);
  background:linear-gradient(140deg,rgba(120,196,236,.34),rgba(88,120,208,.26) 46%,rgba(58,72,140,.30));
  box-shadow:0 12px 26px rgba(6,10,24,.45), inset 0 1px 0 rgba(255,255,255,.18)}
.brand .lights{display:flex; gap:9px; margin-left:2px; margin-bottom:1px}
.brand .lights span{width:8px;height:8px;border-radius:50%;animation:npTwinkle 2.4s ease-in-out infinite}
.brand-id{display:flex; align-items:center; gap:12px; min-width:0}
.brand-text{display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0}
.santa{font-size:30px; align-self:center; animation:npBob 4.5s ease-in-out infinite}
.title-big{font-weight:800; font-size:clamp(19px,2vw,27px); line-height:1.04; letter-spacing:-.3px; color:#fff;
  text-shadow:0 2px 0 rgba(30,42,86,.55), 0 8px 18px rgba(8,12,30,.4); white-space:nowrap}
.title-sub{font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:rgba(226,238,255,.66)}
.hdr-pills{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto}
.pill{display:flex; align-items:center; gap:7px; padding:5px 11px; border-radius:99px; font-size:12px;
  border:1.5px solid var(--line); box-shadow:0 6px 14px rgba(6,10,24,.3), inset 0 1px 0 rgba(255,255,255,.12)}
.pill .em{font-size:14px}
.pill-crew{border-color:rgba(126,240,176,.45); background:linear-gradient(150deg,rgba(18,74,52,.92),rgba(12,48,38,.92)); color:#b9ffd8}
.dot-live{width:8px;height:8px;border-radius:50%;background:#6ef2a6;box-shadow:0 0 10px #6ef2a6;flex:none}
.pill-sun{border-color:rgba(164,150,255,.42); background:linear-gradient(150deg,rgba(58,46,116,.92),rgba(38,32,84,.92)); color:#efe9ff}
.sun-mini{width:42px; height:6px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden; flex:none}
.sun-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--pink)); width:0%}
.pill-clock{border-color:rgba(206,224,255,.3); background:linear-gradient(150deg,rgba(40,58,104,.9),rgba(28,38,74,.9)); color:#fff}
.pill-clock .clock-big{font-family:'Baloo 2',Nunito,sans-serif; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums}

/* ---- main grid ---- */
.grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; z-index:1}
.col{display:flex; flex-direction:column; gap:20px; min-width:0}

/* candy frame */
.candy{padding:8px; border-radius:28px; background:repeating-linear-gradient(135deg,#ff5d5d 0 15px,#fff6f0 15px 30px);
  box-shadow:0 20px 40px rgba(8,12,30,.48)}
.candy-in{border-radius:21px; padding:22px 22px 22px; background:linear-gradient(160deg,#1c5b3c,#14452f 60%,#103a29);
  border:1px solid rgba(190,255,222,.22)}
.now-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.now-top .kicker{color:rgba(198,255,226,.82)}
.updated{font-size:12px; color:rgba(198,255,226,.6)}
.temp-row{display:flex; align-items:center; justify-content:space-between; margin-top:10px}
.temp-big{font-weight:800; font-size:clamp(58px,6vw,84px); line-height:.92; color:#fff; text-shadow:0 4px 0 rgba(6,40,26,.6)}
.cond-ico{font-size:38px; animation:npBob 5s ease-in-out infinite}
.buddies span{font-size:30px; display:inline-block; animation:npBob 4.4s ease-in-out infinite}
.buddies span+span{animation-delay:.7s}
.cond-word{font-weight:700; font-size:27px; color:var(--mint); margin-top:2px}
.feels{font-size:15px; color:rgba(226,255,240,.86); margin-top:3px}
.now-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px}
.wood-tile{padding:11px 8px; border-radius:14px; text-align:center;
  background:linear-gradient(165deg,#7a5230,#5e3d22); border:1px solid rgba(255,220,180,.24);
  box-shadow:inset 0 1px 0 rgba(255,235,210,.22)}
.wood-tile .k{font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,232,204,.72)}
.wood-tile .v{font-weight:700; font-size:22px; color:#ffe9cf}
.candy-band{margin-bottom:16px}
.radar-band{position:relative; z-index:1; margin-bottom:16px}
.candy-hz{display:flex; align-items:center; gap:26px; padding:14px 24px}
.candy-hz .hz-now{display:flex; flex-direction:column; gap:2px; min-width:150px}
.candy-hz .hz-temp{display:flex; align-items:flex-start; gap:10px}
.candy-hz .temp-big{font-size:clamp(46px,4.5vw,64px)}
.candy-hz .hz-word{flex:1; min-width:0}
.candy-hz .cond-word{margin-top:0}
.candy-hz .hz-tiles{margin-top:0; flex:0 0 auto; grid-template-columns:repeat(3,110px)}
@media (max-width:900px){
  .candy-hz{flex-wrap:wrap; gap:14px 22px}
  .candy-hz .hz-tiles{flex:1 1 100%; grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .candy-hz{padding:14px 16px}
  .candy-hz .buddies{display:none}
}

/* wood panel */
.wood{position:relative; padding:22px 20px 20px; border-radius:24px;
  background:linear-gradient(165deg,var(--wood1),var(--wood2) 55%,var(--wood3));
  border:2px solid rgba(255,226,188,.28);
  box-shadow:0 20px 38px rgba(8,12,30,.45), inset 0 1px 0 rgba(255,236,208,.24)}
.wood .kicker{color:#ffe9cf}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.metric{padding:13px 8px; border-radius:14px; text-align:center;
  background:linear-gradient(165deg,rgba(255,236,210,.16),rgba(0,0,0,.16));
  border:1px solid rgba(255,226,188,.22); box-shadow:inset 0 1px 0 rgba(255,240,216,.2)}
.metric .em{font-size:22px}
.metric .v{font-weight:700; font-size:21px; color:#fff3e2; margin-top:1px}
.metric .v small{font-size:12px; color:rgba(255,232,204,.7); font-weight:600}
.metric .k{font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,232,204,.72)}
.sleeps{margin-top:16px; padding-top:14px; border-top:1px dashed rgba(255,226,188,.3)}
.fc-row{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px}
.fc{padding:10px 4px; border-radius:13px; text-align:center; background:rgba(20,14,8,.24); border:1px solid rgba(255,226,188,.18)}
.fc .d{font-size:11px; letter-spacing:1.2px; color:rgba(255,232,204,.72)}
.fc .em{font-size:22px; margin:2px 0}
.fc .hi{font-weight:700; font-size:16px; color:#fff3e2}
.fc .lo{font-size:12px; color:rgba(255,232,204,.6)}

/* ---- radar panel ---- */
.radar-panel{position:relative; width:100%; padding:18px 20px 20px; border-radius:28px; border:2px solid rgba(160,200,255,.26);
  background:linear-gradient(170deg,rgba(20,30,60,.92),rgba(14,20,44,.94));
  box-shadow:0 24px 48px rgba(4,8,22,.52), inset 0 1px 0 rgba(255,255,255,.12)}
.radar-hd{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.radar-hd .lft{display:flex; align-items:center; gap:11px}
.radar-hd .em{font-size:23px}
.radar-title{font-weight:700; font-size:clamp(19px,2vw,26px); color:#fff}
.sweep-line{font-size:12px; color:rgba(206,224,255,.66)}
.live-pill{display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:99px;
  border:1px solid rgba(126,240,176,.5); background:rgba(18,60,44,.55)}
.live-pill .d{width:9px;height:9px;border-radius:50%;background:#6ef2a6;box-shadow:0 0 12px #6ef2a6;animation:npTwinkle 1.6s ease-in-out infinite}
.live-pill span{font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:#b9ffd8}
.radar-body{display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:16px; margin-top:14px; align-items:start}
.ctl-wrap{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; min-width:0}
.scope-wrap{position:relative; width:100%; max-width:520px; margin:0 auto}
#radarCanvas{width:100%; aspect-ratio:1; display:block; border-radius:50%;
  box-shadow:0 0 0 2px rgba(160,200,255,.24), 0 0 60px rgba(70,150,220,.28), inset 0 0 60px rgba(0,0,0,.5)}
.home{position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); text-align:center; pointer-events:none}
.home .hw{width:clamp(44px,10%,64px); height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 3px 5px rgba(8,12,30,.6))}
.home .hl{display:block; margin-top:8px; font-size:.5rem; font-weight:800; letter-spacing:.12em; color:var(--frost);
  text-shadow:0 1px 3px rgba(8,12,30,.8)}
.sweep-pill-row{position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); display:flex; gap:10px; align-items:center}
.sweep-pill-row .pg{font-size:22px; animation:npBob 4s ease-in-out infinite}
.sweep-pill-row .pg2{animation-delay:.6s}
.sweep-pill{padding:8px 18px; border-radius:99px; font-weight:700; font-size:15px; letter-spacing:1.2px; color:#ffe9b0;
  border:2px solid var(--gold); background:rgba(60,44,12,.85); box-shadow:0 0 22px rgba(255,212,121,.28); white-space:nowrap}
.rcol{display:flex; flex-direction:column; gap:12px; min-width:0}
.rbox{padding:12px; border-radius:16px; background:var(--paper); border:1px solid var(--line)}
.rbox .kicker{margin-bottom:8px; font-size:10px}
.range-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:7px}
.rbtn{padding:8px 4px; border-radius:11px; font-family:'Baloo 2',Nunito,sans-serif; font-weight:700; font-size:14px;
  cursor:pointer; color:rgba(206,224,255,.6); background:rgba(255,255,255,.04); border:1px solid var(--line)}
.rbtn:hover{filter:brightness(1.25)}
.rbtn.on{color:#fff; background:rgba(126,240,176,.2); border-color:rgba(126,240,176,.7)}
.lbtn{display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; border-radius:11px; cursor:pointer;
  text-align:left; font-family:Nunito,sans-serif; font-size:13px; color:rgba(206,224,255,.6);
  background:rgba(255,255,255,.04); border:1px solid var(--line)}
.lbtn:hover{filter:brightness(1.25)}
.lbtn.on{color:#fff; background:rgba(145,132,217,.2); border-color:rgba(145,132,217,.7)}
.lbtn .sw{width:11px; height:11px; border-radius:4px; flex:none}
.lbtn .st{margin-left:auto; font-size:11px; opacity:.7}
.lstack{display:flex; flex-direction:column; gap:7px}
.legend-bar{height:11px; border-radius:99px;
  background:linear-gradient(90deg,var(--sky),#4fe3a1 42%,var(--gold) 68%,var(--lav) 88%,#ff7ad0)}
.legend-lbls{display:flex; justify-content:space-between; font-size:10px; color:rgba(206,224,255,.6); margin-top:5px}
.readouts{margin-top:12px; display:grid; gap:5px; font-size:12px; color:rgba(226,238,255,.82)}
.readouts div{display:flex; justify-content:space-between}
.readouts .k{opacity:.68}
.freeze{padding:11px; border-radius:13px; cursor:pointer; font-family:'Baloo 2',Nunito,sans-serif; font-weight:700;
  font-size:15px; letter-spacing:1px; color:#d9ccff; background:rgba(145,132,217,.16); border:1px solid rgba(145,132,217,.6)}
.freeze:hover{background:rgba(145,132,217,.3)}
.btn-grid{grid-column:1/-1; margin-top:2px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.btn-grid .freeze{font-size:13.5px; padding:12px 10px; line-height:1.25}
.flight-card{grid-column:1/-1; display:grid; grid-template-columns:128px minmax(0,1fr); gap:16px;
  margin-top:2px; padding:14px 16px; border-radius:18px; border:1.5px solid rgba(126,240,176,.35);
  background:linear-gradient(160deg, rgba(14,26,54,.85), rgba(10,18,40,.9))}
.flight-card[hidden]{display:none}
.fc-portrait{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:64px; border-radius:14px;
  background:radial-gradient(circle at 50% 35%, rgba(70,110,190,.5), rgba(12,22,48,.9) 75%);
  border:1.5px solid rgba(160,200,255,.28); min-height:118px}
.fc-portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#0D1830; display:block}
.fc-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.fc-name{font-weight:800; font-size:18px; color:#ffe9c0}
.fc-status{font-family:'Baloo 2',Nunito,sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.08em;
  padding:3px 10px; border-radius:99px; border:1.5px solid rgba(184,204,255,.4); color:#b8ccff}
.fc-status[data-ph="inbound"]{color:#7ef0b0; border-color:rgba(126,240,176,.55)}
.fc-status[data-ph="takeoff"]{color:#ffd479; border-color:rgba(255,212,121,.55)}
.fc-status[data-ph="landed"]{color:#8fa3cc; border-color:rgba(143,163,204,.45)}
.fc-sub{font-size:12.5px; color:#9fb4dd; margin-top:2px}
.fc-grid{margin-top:10px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px 16px}
.fc-grid .k{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:#8fa3cc}
.fc-grid .v{font-weight:700; font-size:14.5px; color:#eaf2ff}
.fc-progress{margin-top:12px; height:8px; border-radius:99px; background:rgba(120,150,220,.18); overflow:hidden}
.fc-bar{height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#7ef0b0,#8fc9ff); transition:width .6s ease}
.fc-phase{margin-top:6px; font-size:12px; color:#cfe0ff}
@media (max-width:640px){ .flight-card{grid-template-columns:1fr} .fc-portrait{min-height:90px} }
#speedGrid{grid-template-columns:repeat(3,1fr)}
#radarCanvas{cursor:crosshair; touch-action:manipulation}
.tk{cursor:pointer}
.tk.follow{box-shadow:inset 0 0 0 1.5px rgba(126,240,176,.75); border-radius:10px}
.scope-card{position:absolute; left:50%; top:7%; z-index:6; transform:translateX(-50%);
  background:rgba(10,18,38,.94); border:1.5px solid rgba(160,200,255,.45); border-radius:14px;
  padding:9px 13px; max-width:240px; text-align:center; pointer-events:none; opacity:0; transition:opacity .25s}
.scope-card.show{opacity:1}
.scope-card .sc-t{font-family:'Baloo 2',Nunito,sans-serif; font-weight:700; font-size:14px; color:#ffe9c0}
.scope-card .sc-l{font-size:12px; color:#cfe0ff; line-height:1.45}
.radar-foot{margin-top:16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr); gap:16px}
.atc-log{margin-top:10px; display:flex; flex-direction:column; gap:7px; max-height:170px; overflow:hidden; font-size:12.5px; line-height:1.4; color:#cfe0ff}
.atc-line{opacity:0; animation:atcIn .4s ease forwards; background:rgba(12,20,42,.5); border:1px solid rgba(160,200,255,.14); border-radius:10px; padding:6px 9px}
.atc-line .who{font-family:'Baloo 2',Nunito,sans-serif; font-weight:700; color:#8fc9ff}
.atc-line.twr .who{color:#ffd479}
@keyframes atcIn{to{opacity:1}}
.foot-box{padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(160,200,255,.18)}
.tk-hd{display:flex; align-items:center; justify-content:space-between}
.tk-hd .sub{font-size:11px; color:rgba(206,224,255,.55)}
.tk-rows{display:grid; gap:7px; margin-top:10px}
.tk{display:grid; grid-template-columns:26px minmax(0,1fr) 52px 62px 64px 70px; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(160,200,255,.16); font-size:13px}
.tk.lead{background:rgba(126,240,176,.12); border-color:rgba(126,240,176,.5)}
.tk .em{font-size:17px}
.tk .nm{font-family:'Baloo 2',Nunito,sans-serif; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tk .num{color:#b8ccff; font-variant-numeric:tabular-nums; font-size:12px}
.tk .st{font-size:11px; letter-spacing:.5px}
.bars{display:flex; align-items:flex-end; gap:4px; height:80px; margin-top:10px}
.bars div{flex:1; border-radius:4px 4px 2px 2px; min-height:4px}
.bars-lbls{display:flex; justify-content:space-between; font-size:11px; color:rgba(206,224,255,.55); margin-top:5px}
.watch{background:linear-gradient(150deg,rgba(126,240,176,.14),rgba(145,132,217,.14)); border:1px solid rgba(160,200,255,.22)}
.watch .hl2{font-weight:700; font-size:19px; color:#fff; margin-top:5px}
.watch .note{font-size:13px; color:rgba(226,238,255,.78); margin-top:3px}

/* ---- right column ---- */

/* cams — real video, wood shell */
.cam-hd{display:flex; align-items:center; justify-content:space-between; margin-top:4px}
.cam-hd .rt{display:flex; align-items:center; gap:7px; font-size:12px; color:rgba(255,232,204,.7)}
.cam-hd .rd{width:8px;height:8px;border-radius:50%;background:#7ef0b0;box-shadow:0 0 12px #7ef0b0;animation:npTwinkle 2s ease-in-out infinite}
#camGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.cam{padding:7px; border-radius:16px; background:rgba(20,14,8,.3); border:1px solid rgba(255,226,188,.22)}
.cam-screen{position:relative; aspect-ratio:16/9; border-radius:11px; overflow:hidden; background:#0d1530}
.cam-screen video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cam-static{background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
  linear-gradient(180deg,#16224a,#233a63)}
.cam-msg{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-align:center; font-size:12px; color:rgba(226,238,255,.85)}
.cam-msg .ico{font-size:34px; filter:drop-shadow(0 5px 9px rgba(0,0,0,.35))}
.cam-temp{position:absolute; left:8px; top:8px; z-index:2; padding:2px 8px; border-radius:99px; font-size:10px;
  letter-spacing:1.2px; color:#fff; background:rgba(10,14,30,.6)}
.cam-name{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:7px; padding:0 3px;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:#ffe9cf}
.cam-name .nt{font-size:11px; letter-spacing:0; text-transform:none; color:rgba(255,232,204,.62)}

/* ticker */
.ticker{position:relative; display:flex; align-items:center; gap:0; margin-top:20px; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:rgba(12,18,40,.8); z-index:1}
.ticker-badge{flex:none; padding:11px 15px; font-family:'Baloo 2',Nunito,sans-serif; font-weight:800; font-size:13px;
  letter-spacing:1px; color:#1a1408; background:linear-gradient(180deg,var(--gold),#f4b942); white-space:nowrap}
.ticker-view{flex:1; overflow:hidden}
.ticker-track{display:inline-block; white-space:nowrap; padding-left:100%; animation:tick 46s linear infinite}
.ticker-track span{margin-right:44px; font-size:14px; color:rgba(226,238,255,.9)}
@keyframes tick{to{transform:translateX(-100%)}}
/* Calm mode: no scroll, but no lost headlines either. One at a time, swapped on
   a timer with a plain opacity cross-fade (no travel, no vestibular trigger). */
.ticker-track.calm{animation:none; padding-left:0; transition:opacity .35s ease}
.ticker-track.calm.fade{opacity:0}
.ticker-track.calm span{display:none; margin-right:0}
.ticker-track.calm span.on{display:inline}
/* No-JS floor: if the script never runs, still do not scroll. */
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none; padding-left:0} }

/* responsive */
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .radar-body{grid-template-columns:1fr}
  .radar-foot{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hdr-pills{margin-left:0; width:100%}
  .now-tiles,.metrics{grid-template-columns:repeat(3,1fr)}
  .btn-grid{grid-template-columns:1fr 1fr}
  .tk{grid-template-columns:24px minmax(0,1fr) 48px 58px; }
  .tk .alt,.tk .st{display:none}
}
@media (max-width:350px){
  .ctl-wrap{grid-template-columns:1fr}
  #camGrid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   TOUCH TARGETS. Measured on a 390px viewport with touch emulation: .pn-crumb
   was 20x58, .rbtn 34x137, .lbtn 31x280 -- fourteen controls under the 44px
   minimum (WCAG 2.5.5, Apple HIG). All three were already wide enough, so only
   height was short and none of this changes the layout's shape.

   ⚠ IT HAS TO LIVE HERE. This page links no shared stylesheet -- 21KB of
   inline CSS and Google Fonts, nothing else -- so `global.css` never reaches
   it and the `(pointer: coarse)` block that fixed the site header does not
   apply. That is worth knowing beyond this fix: every shared rule the rest of
   the site relies on (reduced motion, text-size-adjust, 44px footer links)
   stops at this page's boundary.

   Verified by rendering: test/layout/touch-targets.test.js.
   --------------------------------------------------------------------------- */
@media (pointer: coarse){
  /* The breadcrumbs are flex rows with no padding at all, so they collapse to
     the line box. Centring keeps the label where it was while the hit area
     grows around it. */
  .pn-crumb{ min-height:44px; align-items:center; }
  /* Both button families are already full-width in their grid/stack, so only
     the height moves. The grid's own gap keeps them from merging into one
     ambiguous strip. */
  .rbtn{ min-height:44px; }
  .lbtn{ min-height:44px; }
  .freeze{ min-height:44px; }
}