/* Elf Tracker NEW DESIGN PROTOTYPE (elf.watch/tracker-new, 23 Oct 2026). Only loaded by tracker-new.html.
   Night sky on the tracker screen, from Paul's mock-up, with his notes (see js/tracker-new/tracker-view.js). */
body.tnew{--night:#0B1D4D;--night2:#16307A;--gold:#F5C24A;--cream:#FFF8E8;--red:#D9283E}

/* the names screen: the "Sofia's elf is called..." card sits straight, and Add a child is a real button */
body.tnew .preview{transform:none}
body.tnew .addkid{display:inline-flex;align-items:center;gap:6px;border:2px dashed #3363B7;background:#fff;color:#16296A;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;font-size:16px;border-radius:999px;padding:10px 18px;margin-top:10px;cursor:pointer}

/* ---------- the night sky, tracker screen only ---------- */
html:has(body.tnew){background:#0B1D4D!important}
body.tnew{color:#fff}
body.tnew::before{background:radial-gradient(1200px 600px at 70% -10%,#2A4FA8 0%,transparent 60%),linear-gradient(180deg,#0B1D4D 0%,#132A6B 55%,#1C3B86 100%)!important}
body.tnew::after{opacity:.35}
body.tnew .xspark{display:none}
/* the approved logo always sits on its own sky (logo rules) */
body.tnew .nav__home{background:#B8D2FC;border-radius:18px;padding:4px 8px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
body.tnew .tkfoot{background:transparent;color:#C9D6F5}
body.tnew .tkfoot a{color:#fff}

.tn{position:relative;z-index:0;isolation:auto;max-width:1240px;margin:0 auto;padding:0 16px 40px;font-family:Inter,system-ui,sans-serif}
.tn h1,.tn h2,.tn h3{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em}
.tn-k{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* elves */
.tn-elves{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:6px 0 16px}
.tn-elves .switch{display:flex;gap:12px;flex-wrap:wrap}
.tn-elves .av{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;color:#fff;font:700 13px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.tn-elves .av img,.tn-elves .av i{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid rgba(255,255,255,.35);background:#fff}
.tn-elves .av[aria-pressed="true"] img{border-color:var(--gold);box-shadow:0 0 0 4px rgba(245,194,74,.3)}
.tn-elves .av.add i{display:flex;align-items:center;justify-content:center;font-style:normal;font-size:30px;color:#fff;background:var(--red);border:3px solid #fff;animation:tnPulse 2.4s ease-in-out infinite}
@keyframes tnPulse{50%{box-shadow:0 0 0 8px rgba(217,40,62,.25)}}
.tn-hint{margin:0;font-size:14px;color:#C9D6F5;max-width:30ch}

/* the home's rows and columns: css/tracker-new-layout.css (27 Oct 2026) */

/* hero card */
.tn-hero{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--cream);color:#16296A;border-radius:22px;padding:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);border-top:10px solid #fff}
.tn-hero::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;border-radius:22px 22px 0 0;background:repeating-linear-gradient(135deg,#D9283E 0 14px,#fff 14px 28px)}
.tn-hero .face{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:top;border:4px solid var(--gold);background:#fff}
.tn-hero .tn-k{color:var(--red)}
.tn-hero h1{margin:2px 0 4px;font-size:34px;line-height:1;font-weight:800;color:#0B1D4D}
.tn-status{margin:0;font-size:16.5px;line-height:1.45;color:#1E2E5E}
.tn-town{margin:8px 0 0;font-size:14px;color:#4A5B7D}
.tn-town .link{color:#3363B7;font-weight:700;text-decoration:underline;background:none;border:0;cursor:pointer;font-size:14px}
.tn-sleeps{grid-column:1/-1;display:flex;align-items:center;gap:12px;background:#0B1D4D;color:#fff;border-radius:16px;padding:12px 16px}
.tn-sleeps b{font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:800;color:var(--gold);white-space:nowrap}
.tn-sleeps span{font-size:15px;line-height:1.3}
@media (min-width:640px){.tn-hero{grid-template-columns:auto 1fr auto;padding:22px 24px}.tn-hero .face{width:104px;height:104px}.tn-hero h1{font-size:44px}
  .tn-sleeps{grid-column:auto;flex-direction:column;text-align:center;max-width:170px;gap:2px}.tn-sleeps b{font-size:30px}}

/* tabs */
.tn-tabs{display:flex;gap:6px;margin:18px 0 0;background:rgba(255,255,255,.1);padding:6px;border-radius:999px;position:sticky;top:8px;z-index:5;backdrop-filter:blur(8px)}
.tn-tab{flex:1;min-height:48px;border:0;border-radius:999px;background:transparent;color:#fff;font:800 15.5px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.tn-tab[aria-selected="true"]{background:#fff;color:#0B1D4D;box-shadow:0 4px 14px rgba(0,0,0,.25)}

/* spotted */
.tn-spot .cctv.big{border-radius:14px;overflow:hidden;margin-top:8px}
.tn-cap{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:19px;line-height:1.35;margin:12px 0 0;color:#fff}
.tn-share{display:inline-flex;align-items:center;gap:8px;margin-top:12px;min-height:46px;padding:0 18px;border-radius:999px;border:2px solid rgba(255,255,255,.5);background:transparent;color:#fff;font:800 15px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.tn-share svg{width:18px;height:18px}
.tn-h3{margin:20px 0 8px;font-size:15px;color:#C9D6F5;font-weight:800}
.tn-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.tn-tile{position:relative;display:flex;flex-direction:column;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#0B1D4D;color:#fff;padding:0;cursor:pointer;text-align:left}
.tn-tile img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.8)}
.tn-tile span{font:700 12.5px 'Plus Jakarta Sans',sans-serif;padding:6px 8px}
.tn-tile[aria-pressed="true"]{border-color:var(--gold)}
.tn-tile.mystery{cursor:default;justify-content:center;align-items:center;text-align:center;min-height:110px;background:radial-gradient(circle at 50% 35%,#2A4FA8,#0B1D4D);border:2px dashed rgba(245,194,74,.7)}
.tn-tile.mystery i{font-style:normal;font:800 34px 'Plus Jakarta Sans',sans-serif;color:var(--gold);animation:tnQ 1.8s ease-in-out infinite}
.tn-tile.mystery small{font-size:11.5px;color:#C9D6F5;padding:0 8px 8px}
@keyframes tnQ{50%{transform:scale(1.18) rotate(-6deg)}}

/* map */
.tn-map .tabs{display:flex;gap:6px;margin-bottom:10px}
.tn-map .tab{flex:1;min-height:42px;border-radius:12px;border:0;background:rgba(255,255,255,.12);color:#fff;font:800 14px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.tn-map .tab[aria-selected="true"]{background:#fff;color:#0B1D4D}
.tn-map .stage{position:relative;background:#DCE9FF;border-radius:16px;overflow:hidden;border:6px solid #fff;outline:4px dashed rgba(217,40,62,.8);outline-offset:-2px}
.tn-map .stage svg{display:block;width:100%;height:auto}
.tn-map .snowfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tn-miles{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:10px;font-size:16px;color:#fff}
.tn-miles b{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;color:var(--gold);font-variant-numeric:tabular-nums}
.tn-eve{display:flex;flex-direction:column;align-items:center;margin-bottom:12px;text-align:center}
.tn-eve span{font:800 12px 'Plus Jakarta Sans',sans-serif;letter-spacing:.3em;color:var(--gold)}
.tn-eve b{font:800 26px 'Plus Jakarta Sans',sans-serif}

/* camera room */
.tn-kids{display:grid;gap:16px}
@media (min-width:700px){.tn-kids{grid-template-columns:1fr 1.1fr;align-items:center}}
.tn-tv{position:relative;border-radius:16px;overflow:hidden;border:8px solid #2B2F3A;box-shadow:0 0 0 3px #555,0 14px 30px rgba(0,0,0,.4)}
.tn-tv img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.tn-tv .live{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;font:800 12px 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em;padding:4px 10px;border-radius:999px;animation:tnBlink 1.4s step-end infinite}
.tn-tv .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.85)}
.tn-tv .play::after{content:"";position:absolute;left:25px;top:19px;border-left:20px solid #0B1D4D;border-top:13px solid transparent;border-bottom:13px solid transparent}
@keyframes tnBlink{50%{opacity:.35}}
.tn-kids h2{font-size:26px;line-height:1.15;margin:4px 0 8px;color:#fff}
.tn-kids p{margin:0 0 8px;color:#DCE6FF;font-size:15.5px;line-height:1.5}
.tn-nextcam{font-weight:700;color:var(--gold) !important}
.tn .btn.tn-big{width:100%;min-height:58px;font-size:18px;margin-top:6px}
.tn-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.tn-who span{font-size:13px;color:#C9D6F5;width:100%}
.tn-who i{font-style:normal;background:#fff;color:#16296A;font:700 14px 'Plus Jakarta Sans',sans-serif;padding:6px 12px;border-radius:999px}
.tn-addkid{border:2px dashed var(--gold);background:transparent;color:var(--gold);font:800 14px 'Plus Jakarta Sans',sans-serif;padding:6px 14px;border-radius:999px;cursor:pointer}

/* WIN card */
.tn-win{position:relative;display:grid;gap:6px;text-align:center;border:0;border-radius:22px;padding:20px 18px;cursor:pointer;color:#16296A;overflow:hidden;
  background:linear-gradient(160deg,#FFE7A3,#F5C24A);box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 0 0 3px rgba(255,255,255,.6)}
.tn-win::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 20deg,rgba(255,255,255,.45) 20deg 30deg,transparent 30deg 80deg,rgba(255,255,255,.45) 80deg 90deg,transparent 90deg 140deg,rgba(255,255,255,.45) 140deg 150deg,transparent 150deg);animation:tnSpin 9s linear infinite;pointer-events:none}
@keyframes tnSpin{to{transform:rotate(360deg)}}
.tn-win>*{position:relative}
.tn-win-k{font:800 11.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.flash{font:800 40px 'Plus Jakarta Sans',sans-serif;color:var(--red);text-shadow:0 2px 0 #fff;animation:tnFlash 1.1s ease-in-out infinite}
@keyframes tnFlash{50%{transform:scale(1.08);text-shadow:0 0 18px #fff,0 2px 0 #fff}}
.tn-win-sub{font-size:15px;line-height:1.4}
.tn-dots{display:flex;justify-content:center;gap:8px}
.tn-dots i{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--red)}
.tn-dots i.on{background:var(--red)}
.tn-win-go{justify-self:center;background:var(--red);color:#fff;font:800 16px 'Plus Jakarta Sans',sans-serif;padding:12px 26px;border-radius:999px;margin-top:4px}

/* app card */
.tn-app{background:#0B1D4D;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35);border:2px solid rgba(245,194,74,.45)}
.tn-app-pic{position:relative}
.tn-app-pic img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.tn-pill{position:absolute;left:12px;top:12px;background:var(--red);color:#fff;font:800 13px 'Plus Jakarta Sans',sans-serif;padding:6px 12px;border-radius:999px}
.tn-app-txt{padding:16px 18px 18px}
.tn-app h2{font-size:22px;margin:4px 0 6px;color:#fff}
.tn-app p{margin:0 0 12px;color:#DCE6FF;font-size:15px;line-height:1.5}
.tn-app .btn{width:100%}
.tn-app .soon{color:var(--gold)}

/* bell + follow */
.tn-bell{display:flex;align-items:center;gap:10px;min-height:54px;border-radius:16px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:700 15px 'Plus Jakarta Sans',sans-serif;padding:0 16px;cursor:pointer;text-align:left}
.tn-follow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;text-decoration:none;color:#fff;border-radius:22px;padding:16px;
  background:linear-gradient(135deg,#833AB4,#E1306C 55%,#F77737);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.tn-follow .ig{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.tn-follow .ig svg{width:30px;height:30px}
.tn-follow b{display:block;font:800 18px 'Plus Jakarta Sans',sans-serif}
.tn-follow small{display:block;font-size:13.5px;opacity:.92;line-height:1.35}
.tn-follow-go{grid-column:1/-1;text-align:center;background:#fff;color:#C1275B;font:800 15px 'Plus Jakarta Sans',sans-serif;border-radius:999px;padding:11px}

.tn .acct{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;font-size:13.5px;color:#C9D6F5}
.tn .acct .link{color:#fff}
.tn .demo{text-align:center;color:#9FB2E0}

/* pop-ups */
.tn-pop{position:fixed;inset:0;z-index:100;background:rgba(6,14,40,.72);display:flex;align-items:flex-end;justify-content:center;padding:12px;animation:tnFade .2s ease}
@media (min-width:640px){.tn-pop{align-items:center}}
@keyframes tnFade{from{opacity:0}}
.tn-pop-in{position:relative;width:100%;max-width:460px;max-height:92vh;overflow:auto;background:var(--cream);color:#16296A;border-radius:24px;padding:26px 20px 20px;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:tnUp .3s cubic-bezier(.2,1.2,.4,1)}
@keyframes tnUp{from{transform:translateY(40px);opacity:0}}
.tn-pop-in h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;margin:0 0 8px;color:#0B1D4D}
.tn-pop-in p{font-size:15.5px;line-height:1.5}
.tn-pop-in .btn{width:100%;margin-top:10px}
.tn-pop-in .link{display:block;margin:10px auto 0;background:none;border:0;color:#3363B7;text-decoration:underline;font-size:15px;cursor:pointer}
.tn-pop-in input{width:100%;min-height:52px;border:2px solid #B9CBEF;border-radius:14px;padding:0 14px;font-size:17px;margin-top:6px}
.tn-pop-in label{font-weight:700;font-size:14px}
.tn-pop-in .card{background:none;box-shadow:none;padding:0;margin:0;border:0}
.tn-pop-in .card h2{display:none}
.tn-x{position:absolute;right:12px;top:10px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#16296A;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.tn-pop-pic{width:100%;border-radius:14px;margin-bottom:12px;aspect-ratio:16/10;object-fit:cover}
.tn-win-pop{text-align:center;margin-bottom:6px}
.flash.big{display:inline-block;font-size:46px}
.tn-pop .invite .k{color:var(--red);font:800 11.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.tn-pop .invprog{display:flex;gap:8px;margin:8px 0}
.tn-pop .invprog i{width:18px;height:18px;border-radius:50%;border:2px solid var(--red);background:#fff}
.tn-pop .invprog i.on{background:var(--red)}
.tn-pop .invlink code{word-break:break-all}
.tn-pop .tsug{position:static;max-height:none;box-shadow:none;list-style:none;margin:6px 0 0;padding:0;border:1px solid #DCE5F7;border-radius:12px;overflow:hidden;background:#fff}
.tn-pop .tsug button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:10px 14px;font:700 16px Inter,sans-serif;color:#16296A;cursor:pointer;border-bottom:1px solid #EEF2FB}
.tn-pop .tsug small{display:block;font-weight:400;font-size:13px;color:#6A7A9C}
.tn-pop .warn{color:#B3122E}

@media (prefers-reduced-motion:reduce){.tn *,.tn-pop *,body.tnew::before{animation:none !important}}

/* phones: a compact WIN strip above the tabs, the full card stays in the side column on computers */
.tn-winstrip{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:14px;border:0;border-radius:18px;padding:12px 16px;cursor:pointer;
  background:linear-gradient(160deg,#FFE7A3,#F5C24A);color:#16296A;box-shadow:0 10px 24px rgba(0,0,0,.3);text-align:left}
.tn-winstrip .flash{font-size:26px}
.tn-winstrip small{display:block;font-size:13px;line-height:1.3;max-width:24ch}
.tn-winstrip .go{background:var(--red);color:#fff;font:800 14px 'Plus Jakarta Sans',sans-serif;padding:10px 14px;border-radius:999px;white-space:nowrap}
@media (min-width:1000px){.tn-winstrip{display:none}}
@media (max-width:520px){.tn-tab{font-size:13.5px;padding:0 4px;white-space:nowrap}.tn-hero .face{width:64px;height:64px}.tn-hero h1{font-size:30px}.tn-status{font-size:15.5px}}
.tn-pop .tsug[hidden]{display:none}

/* ---------- the night scene (Paul, 23 Oct 2026: "literally like the attachment") ---------- */
.tn-scene,.tn-garland{display:none}
body.tnew{position:relative}
body.tnew .tn-scene{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
body.tnew .tn-garland{display:block;position:absolute;left:0;right:0;top:-18px;height:96px;z-index:0;pointer-events:none;
  background:url(/img/garland-strip.png) repeat-x center top/auto 96px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
body.tnew .nav{position:relative;z-index:2;background:transparent}
.tn-scene .st{position:absolute;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 Q11.2 8.8 20 10 Q11.2 11.2 10 20 Q8.8 11.2 0 10 Q8.8 8.8 10 0Z' fill='%23FFD978'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 4px rgba(255,217,120,.8));animation:tnStar 3.2s ease-in-out infinite}
@keyframes tnStar{50%{opacity:.35;transform:scale(.7) rotate(20deg)}}
@media (max-width:700px){
  body.tnew .tn-garland{height:70px;background-size:auto 70px;top:-14px}}

/* snow caps with icicles on the cards, a candy-cane frame on the main panel */
.tn-hero,.tn-app,.tn-win,.tn-follow{position:relative}
.tn-hero::before{display:none}
.tn-hero{border-top:0;margin-top:14px}
.tn-app{margin-top:12px}

/* The painted night sky from Canva (23 Oct 2026) replaces the drawn moon, sleigh and trees.
   Wide picture on computers, tall picture on phones. The garland and a few twinkling stars stay on top. */
body.tnew::before{background:#0B1D4D url(/img/tracker/night-sky-wide.jpg) center bottom/cover no-repeat!important}
@media (max-aspect-ratio:1/1){body.tnew::before{background:#0B1D4D url(/img/tracker/night-sky-tall.jpg) center bottom/cover no-repeat!important}}
body.tnew::after{display:none}
/* gentle falling snow (owner, 27 Oct 2026; js/tracker-new/snow.js): one canvas fixed to the window, in front of
   the night sky and its stars, behind every panel and word (negative z-index), never clickable, no layout */
body.tnew .tn-snow{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.tn::before{display:none}
.tn-moon,.tn-fly,.tn-ground{display:none}
.tn-scene .st{width:10px!important;height:10px!important;opacity:.8}
.tn-follow{display:block;text-align:center}
.tn-follow b{font-size:20px}
.tn-follow small{margin:4px 0 12px}
.tn-socials{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tn-socials a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.18);color:#fff;text-decoration:none;font:800 13px 'Plus Jakarta Sans',sans-serif}
.tn-socials a:hover{background:rgba(255,255,255,.3)}
.tn-socials svg{width:28px;height:28px}
body.tnew .tkfoot{background:rgba(8,20,58,.82);border-radius:18px 18px 0 0;backdrop-filter:blur(4px);position:relative;z-index:1}

/* ---------- every tracker screen on the night sky (Paul, 23 Oct 2026) ---------- */
/* set-up and sign-up screens: words straight on the night sky, no boxes (Paul, 14 Oct: "I don't like white boxes") */
body.tnew main.tk--ob{position:relative;z-index:1;color:#fff}
body.tnew main.tk--ob .h,body.tnew main.tk--ob .kidh,body.tnew main.tk--ob h1,body.tnew main.tk--ob h2,body.tnew main.tk--ob .cath{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
body.tnew main.tk--ob .sub,body.tnew main.tk--ob .hint,body.tnew main.tk--ob .small,body.tnew main.tk--ob p,body.tnew main.tk--ob label,body.tnew main.tk--ob .qname span{color:#DCE6FF}
body.tnew main.tk--ob .k{color:var(--gold)}
body.tnew main.tk--ob .link,body.tnew main.tk--ob a{color:#fff}
body.tnew main.tk--ob .warn{color:#FFD1D8}
body.tnew main.tk--ob .card,body.tnew main.tk--ob .savecard{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:none}
body.tnew main.tk--ob .card b{color:#fff}
/* one centred column for the header, the screens and the footer, so everything lines up */
body.tnew .nav .nav__in,body.tnew .tkfoot__in{max-width:1240px;margin-left:auto;margin-right:auto}
@media (min-width:1000px){
  body.tnew .tk.tk--ob{max-width:1240px}
  body.tnew .tk .ob-grid,body.tnew .tk.ob-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;column-gap:64px!important}
  body.tnew .ob-grid>.ob-pane{max-width:none;padding:0}
  body.tnew .ob-pane .card,body.tnew .ob-pane .savecard{background:transparent;border:0}
}
/* one-question screens */
.qnums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.qnum{min-height:84px;border-radius:20px;border:3px solid #DCE5F7;background:#fff;color:#0B1D4D;font:800 34px 'Plus Jakarta Sans',sans-serif;cursor:pointer;box-shadow:0 6px 0 #DCE5F7;transition:transform .1s}
.qnum:hover{border-color:#F5C24A}
.qnum:active{transform:translateY(3px);box-shadow:0 3px 0 #DCE5F7}
.qnum[aria-pressed="true"]{border-color:#D9283E;background:#FFF1F3}
.qnames{display:grid;gap:12px;margin-top:16px}
.qname{display:grid;gap:4px}
.qname span{font:800 13px 'Plus Jakarta Sans',sans-serif;color:#4A5B7D;letter-spacing:.04em}
.qname .in,.qbig{width:100%;min-height:58px;border-radius:16px;border:2px solid #B9CBEF;background:#fff;padding:0 16px;font:700 20px 'Plus Jakarta Sans',sans-serif;color:#0B1D4D;box-sizing:border-box}
.qbig{font-size:24px;text-align:center;margin-top:12px}
.qface{display:block;width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:top;border:5px solid #F5C24A;margin:8px auto 6px;background:#fff}
.qchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;justify-content:center}
.qchips .chip{min-height:52px;padding:0 22px;border-radius:999px;border:3px solid #DCE5F7;background:#fff;color:#0B1D4D;font:800 18px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.qchips .chip[aria-pressed="true"]{background:#D9283E;border-color:#D9283E;color:#fff}
.qchips .chip.all{border-style:dashed;color:#3363B7}

/* a disabled button reads as "not yet", not purple */
body.tnew .btn.red:disabled,body.tnew .btn[disabled]{background:rgba(255,255,255,.16)!important;color:rgba(255,255,255,.7)!important;box-shadow:none!important;opacity:1!important}
/* computers: the garland, moon and sleigh get their own band across the top, like the mock-up; content starts below it */
@media (min-width:1000px){
  body.tnew::before{background-position:center top!important}
  body.tnew .tk.tk--ob{padding-top:120px}
  body.tnew .tn{padding-top:70px}
}

/* ---------- head-of-design pass (23 Oct 2026): one column, matching edges, cards in level rows ---------- */
body.tnew .nav .nav__in{max-width:1240px!important;margin:0 auto!important;padding-left:16px!important;padding-right:16px!important;box-sizing:border-box}
body.tnew .tkfoot__in{max-width:1240px!important;padding-left:16px!important;padding-right:16px!important;box-sizing:border-box}

@media (min-width:1000px){.tn-elves{justify-content:flex-start}}

/* ---------- logo options for Paul (?logo=cloud or ?logo=bauble). The master logo itself is never
   changed: it always sits on its own sky colour (#B8D2FC), only the shape around it changes. ---------- */
body.tnew.logo-cloud .nav__home{position:relative;background:#B8D2FC;border-radius:48px;padding:10px 22px 8px;box-shadow:0 10px 26px rgba(0,0,0,.35);margin-top:26px}
body.tnew.logo-cloud .nav__home::before,body.tnew.logo-cloud .nav__home::after{content:"";position:absolute;background:#B8D2FC;border-radius:50%;z-index:0}
body.tnew.logo-cloud .nav__home::before{width:74px;height:74px;left:16px;top:-30px}
body.tnew.logo-cloud .nav__home::after{width:96px;height:96px;right:14px;top:-44px}
body.tnew.logo-cloud .nav__home img{position:relative;z-index:1}
body.tnew.logo-bauble .nav__home{position:relative;width:150px;height:150px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;margin-top:34px;
  background:radial-gradient(circle at 34% 28%,#E6F0FF 0,#B8D2FC 34%,#B8D2FC 70%,#9DBCF0 100%);box-shadow:0 14px 30px rgba(0,0,0,.4),inset 0 -8px 18px rgba(60,90,160,.25)}
body.tnew.logo-bauble .nav__home::before{content:"";position:absolute;top:-16px;left:50%;width:34px;height:18px;margin-left:-17px;border-radius:4px;background:linear-gradient(90deg,#B8862E,#F5D27A,#B8862E)}
body.tnew.logo-bauble .nav__home::after{content:"";position:absolute;top:-60px;left:50%;width:2px;height:46px;background:#F5D27A}
body.tnew.logo-bauble .nav__home img{width:122px;height:auto}
/* the save screen after the first sighting: readable on the night sky, mystery sightings to come */
body.tnew .hookmap{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.18);border-radius:18px}
body.tnew .hookmap,body.tnew .hookmap p,body.tnew .hookmap span,body.tnew .hookmap .cap{color:#fff!important}
body.tnew .camlist li.mystery{display:flex;align-items:center;gap:10px}
body.tnew .camlist li.mystery b{flex:1;color:#fff}
body.tnew .camlist li.mystery i{font:800 20px 'Plus Jakarta Sans',sans-serif;font-style:normal;color:var(--gold)}

/* Back on every set-up question */
.qback{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  font:700 15px 'Plus Jakarta Sans',sans-serif;border-radius:999px;padding:8px 16px 8px 12px;margin-bottom:12px;cursor:pointer;min-height:40px}
.qback:hover{background:rgba(255,255,255,.22)}
/* the hand-over between elves */
.qdone{display:flex;align-items:center;gap:12px;background:rgba(46,160,90,.22);border:1px solid rgba(120,220,150,.5);border-radius:16px;padding:10px 14px;margin-bottom:12px;color:#fff;font-size:15px;line-height:1.35}
.qdone img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid #fff;background:#fff;flex:none}
.qdone b{color:#7BE3A0}
/* a child who already has an elf */
.qchips .chip.taken{opacity:.55;cursor:default;display:inline-flex;flex-direction:column;justify-content:center;line-height:1.1;background:rgba(255,255,255,.75)}
.qchips .chip.taken small{font:700 11px Inter,sans-serif;color:#4A5B7D}
.qchips .chip:disabled:not(.taken){opacity:.45}
.qaddkid{display:flex;gap:8px;margin-top:10px}
.qaddkid .in{flex:1;min-height:52px;border-radius:14px;border:2px solid #B9CBEF;padding:0 14px;font:700 18px 'Plus Jakarta Sans',sans-serif}

/* ---------- the logo as a Christmas bauble, hanging from the garland (now the default; ?logo=tile shows the old tile) ---------- */
body.tnew:not(.logo-tile):not(.logo-cloud) .nav__home{position:relative;width:150px;height:150px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;margin-top:46px;
  background:radial-gradient(circle at 33% 26%,#FFFFFF 0,#E3EEFF 14%,#B8D2FC 38%,#B8D2FC 66%,#8FB2EC 100%);
  box-shadow:0 18px 34px rgba(0,0,0,.45),inset 0 -10px 22px rgba(40,70,150,.28),inset 0 6px 14px rgba(255,255,255,.6);
  transform-origin:50% -46px;animation:tnSwing 5s ease-in-out infinite;z-index:3}
body.tnew:not(.logo-tile):not(.logo-cloud) .nav__home::before{content:"";position:absolute;top:-15px;left:50%;width:36px;height:19px;margin-left:-18px;border-radius:5px 5px 3px 3px;
  background:linear-gradient(90deg,#9A6B1F,#F7DC8C 45%,#C9963A 70%,#9A6B1F);box-shadow:0 2px 3px rgba(0,0,0,.3)}
body.tnew:not(.logo-tile):not(.logo-cloud) .nav__home::after{content:"";position:absolute;top:-60px;left:50%;width:2px;height:46px;margin-left:-1px;background:linear-gradient(#C9963A,#F7DC8C)}
body.tnew:not(.logo-tile):not(.logo-cloud) .nav__home img{width:124px;height:auto;position:relative;z-index:1}
@keyframes tnSwing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media (max-width:700px){
  body.tnew:not(.logo-tile):not(.logo-cloud) .nav__home{width:112px;height:112px;margin-top:40px;transform-origin:50% -40px}
  body.tnew:not(.logo-tile):not(.logo-cloud) .nav__home img{width:92px}
  body.tnew:not(.logo-tile):not(.logo-cloud) .nav__home::after{top:-52px;height:38px}
}
@media (prefers-reduced-motion:reduce){body.tnew .nav__home{animation:none!important}}

/* Paul, 23 Oct 2026: same camera size as the live tracker on computers (the 1440 column, picture
   1.6 to words 1), and the village as bright as on the live tracker against the night sky */
@media (min-width:1000px){
  body.tnew .nav .nav__in,body.tnew .tkfoot__in{max-width:1440px!important;padding-left:20px!important;padding-right:20px!important}
  body.tnew .tk.tk--ob{max-width:1440px}
  body.tnew .tk .ob-grid,body.tnew .tk.ob-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)!important;column-gap:56px!important}
  body.tnew .tk.tk--ob{padding-top:96px}
  body.tnew .tn{max-width:1440px;padding-left:20px;padding-right:20px}
}
body.tnew .rc-map{filter:brightness(.95) saturate(.95)!important}
body.tnew .tkvis .map{filter:brightness(.85) saturate(.9)!important}
@media (min-width:1000px){ body.tnew .tk.tk--ob{padding-top:20px} }
body.tnew .ob-pane .qrcard,body.tnew main.tk--ob .qrcard{background:rgba(8,20,58,.72)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:16px!important;padding:14px!important}
.qchips .chip.full{opacity:.45}
.qlimit{margin-top:14px;background:rgba(245,194,74,.16);border:1px solid rgba(245,194,74,.6);border-radius:16px;padding:12px 14px;text-align:center}
.qlimit p{margin:0 0 10px;color:#FFF3D1!important;font-size:15px;line-height:1.45}
.qlimit .btn{width:100%}
.qlimit.nudge{animation:tnNudge .4s}
@keyframes tnNudge{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.qlimit{background:rgba(8,20,58,.88)!important}

/* ---------- design review fixes (23 Oct 2026): C1-C12, T3, T4, T7, P2, P4, A2 ---------- */
/* C3: a fixed top band for the garland, moon and sleigh of the painted sky; content starts below it.
   The sleigh's lowest point is 335px down the 1920x1080 picture, which is drawn "cover" from the top. */
@media (min-width:700px){
  body.tnew main.tk.tk--ob{padding-top:max(20px,calc(max(17.45vw,31vh) - 190px))!important} body.tnew .tn{padding-top:max(16px,calc(max(17.45vw,31vh) - 200px))!important}
}
/* C4: one left and right edge for the bauble, the screens, the tracker and the footer */
@media (min-width:1000px){
  body.tnew .nav .nav__in,body.tnew .tkfoot__in{max-width:1440px!important;padding-left:40px!important;padding-right:40px!important;box-sizing:border-box}
  body.tnew main#app.tk{max-width:1440px;padding-left:40px!important;padding-right:40px!important;box-sizing:border-box}
}
@media (min-width:700px) and (max-width:999px){
  body.tnew .nav .nav__in,body.tnew .tkfoot__in{max-width:none!important;padding-left:32px!important;padding-right:32px!important;box-sizing:border-box}
  body.tnew main#app.tk{max-width:none;padding-left:32px!important;padding-right:32px!important;box-sizing:border-box}
}
@media (min-width:700px){body.tnew .tkfoot{padding-left:0;padding-right:0}body.tnew .tn{padding-left:0!important;padding-right:0!important;max-width:none}}

/* C5: tablets 700-999px: the picture above the question at full width, the wide sky showing the moon and sleigh */
@media (min-width:700px) and (max-width:999px){
  body.tnew::before{background:#0B1D4D url(/img/tracker/night-sky-wide.jpg) 88% top/cover no-repeat!important} body.tnew .tk.ob-grid,body.tnew .tk .ob-grid{display:flex!important;flex-direction:column;gap:20px}
  body.tnew .ob-grid>.ob-vis{display:block;order:-1} body.tnew .ob-grid>.ob-pane{display:flex;flex-direction:column;gap:14px} body.tnew .ob-pane .h,body.tnew .ob-pane .kidh{font-size:34px;line-height:1.1}
  body.tnew .ob-vis .tkvis{display:block;position:relative;width:100%;height:auto!important;aspect-ratio:4/3;max-height:max(260px,calc(100vh - max(17.45vw,31vh) - 470px));overflow:hidden;background:#000;isolation:isolate;border:6px solid #0B1D4D;border-radius:22px;box-sizing:border-box}
  body.tnew .tkvis .map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  body.tnew .tkvis::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-radial-gradient(circle at 49% 48%,transparent 0 62px,rgba(124,255,178,.13) 63px 64px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55))}
  body.tnew .tkvis .sweep{position:absolute;left:49%;top:48%;width:160%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0 290deg,rgba(124,255,178,.32) 360deg);mix-blend-mode:screen;z-index:1;animation:tnSweep 6s linear infinite}
  body.tnew .tkvis .pin{position:absolute;z-index:3;width:76px;height:76px;border-radius:50%;border:4px solid var(--gold);overflow:hidden;background:#fff;transform:translate(-50%,-50%)}
  body.tnew .tkvis .pin img{width:100%;height:100%;object-fit:cover;object-position:top} body.tnew .tkvis .hud{z-index:4;font-size:12px;left:14px;right:14px} body.tnew .tkvis .hud.t{top:12px} body.tnew .tkvis .hud.b{bottom:12px}
}
@keyframes tnSweep{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* C6: every question keeps the same picture size and headline position on computers */
@media (min-width:1000px){
  body.tnew .tk .ob-grid,body.tnew .tk.ob-grid{align-items:start!important;align-content:start!important} body.tnew .ob-grid>.ob-vis,body.tnew .ob-grid>.ob-pane{align-self:start!important}
  body.tnew .ob-vis.fit .tkvis{height:auto!important;min-height:0!important;aspect-ratio:4/3!important;max-height:max(320px,calc(100vh - max(17.45vw,31vh) - 70px))}
}
@media (min-width:700px) and (max-width:999px){
  body.tnew .ob-grid>.ob-pane{background:rgba(8,20,58,.72);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:20px 22px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  body.tnew .ob-pane .h,body.tnew .ob-pane .kidh,body.tnew .ob-pane .sub,body.tnew .ob-pane>.k{text-align:left}
}
@media (min-width:700px){
  /* the elf's face sits beside the headline, so the headline does not drop */
  body.tnew .ob-pane:has(>.qface){display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:18px;align-content:start} body.tnew .ob-pane:has(>.qface)>*{grid-column:1/-1;justify-self:stretch}
  body.tnew .ob-pane:has(>.qface)>.qback,body.tnew .ob-pane:has(>.qface)>.k{justify-self:start} body.tnew .ob-pane>.qface{grid-column:1;width:72px;height:72px;margin:0;border-width:4px;align-self:start}
  body.tnew .ob-pane>.qface+.h{grid-column:2;align-self:center;margin:0}
  /* C7: everything left-aligned */
  body.tnew .ob-pane .qbig{text-align:left;padding-left:18px} body.tnew .ob-pane .qchips{justify-content:flex-start} body.tnew .ob-pane .code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;width:100%}
  body.tnew .ob-pane .code input{width:100%;height:72px;font-size:32px;border-radius:16px}
}
/* the password Show link inside the field */
body.tnew .pwrow{position:relative;display:block}body.tnew .pwrow input{width:100%;padding-right:92px;box-sizing:border-box}
body.tnew .pwrow .pwshow{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:44px;padding:0 14px;border-radius:12px;color:#16296A!important;font-weight:800;text-decoration:underline}

/* C8: the save card gets a navy backing; the map label is navy on cream */
body.tnew main.tk--ob .savecard,body.tnew .ob-pane .savecard{background:rgba(8,20,58,.84)!important;border:2px solid rgba(245,194,74,.6)!important;border-radius:22px!important;padding:20px!important;box-shadow:0 18px 40px rgba(0,0,0,.35)!important}
body.tnew .hookmap>.k{background:var(--cream)!important;color:#0B1D4D!important;border:2px solid var(--gold);border-radius:999px;padding:6px 14px}

/* C9: one frame (the candy cane) round the map, the miles on one level line, a night-blue globe */
.tn-map .stage{border:0;outline:0;border-radius:16px;background:radial-gradient(circle at 50% 45%,#1E3F92,#0B1D4D 75%)}.tn-miles{display:block;text-align:center;font-size:17px;line-height:1.3}
.tn-miles b{display:inline;margin-right:4px;vertical-align:baseline}.tn-miles span{display:block;margin-top:4px;color:#DCE6FF;font-size:15px}#globe stop[offset="0"],#hglobe stop[offset="0"]{stop-color:#3567CF}#globe stop[offset="1"],#hglobe stop[offset="1"]{stop-color:#12296E}
#globe path[stroke-width="14"],#hglobe path[stroke-width="14"]{fill:#8FB2EC;stroke:#8FB2EC;opacity:.22}#globe path[fill="#F7FBFF"],#hglobe path[fill="#F7FBFF"]{fill:#EAF1FD;stroke:#7FA3E0}#globe text,#hglobe text{fill:#fff}#globe g text,#hglobe g text{fill:#16296A}

body.tnew .hookmap svg,body.tnew .ob-vis .hookmap{background:radial-gradient(circle at 50% 45%,#1E3F92,#0B1D4D 75%)!important}
@media (min-width:700px){body.tnew .ob-pane .row2.links{justify-content:flex-start;justify-items:start}}
/* C1: the camera room TV full width with the words under it */
.tn-kids{grid-template-columns:minmax(0,1fr)!important;align-items:start}.tn-kids h2{font-size:28px}

/* C11: the language picker is a dark see-through pill with white words */
body.tnew .lang select{-webkit-appearance:none;appearance:none;min-height:44px;padding:0 38px 0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);color:#fff;font-weight:700;
  background:rgba(8,20,58,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center/12px 8px no-repeat;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.tnew .lang select option{color:#0B1D4D;background:#fff}

/* C12: softer, fuller snow caps with little drips, on every card and pop-up, sitting on the card edge */
.tn-bell,.tn-pop-in,.tn-winstrip{position:relative}
.tn-hero::after,.tn-spot::after,.tn-map::after,.tn-app::after,.tn-win::after,.tn-bell::after,.tn-follow::after,.tn-pop-in::after,.tn-winstrip::after,.tn-invite::after,body.tnew main.tk--ob .savecard::after,body.tnew main.tk-reward .card.invite:not(.closed)::after{content:"";position:absolute;left:-4px;right:-4px;top:-13px;height:36px;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='36' viewBox='0 0 260 36'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='36' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.42' stop-color='%23fff'/%3E%3Cstop offset='.62' stop-color='%23E4EEFC'/%3E%3Cstop offset='1' stop-color='%23B9D0F2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 8 C10 8 14 3 26 3 C38 3 42 9 54 9 C64 9 70 1 86 1 C102 1 106 8 118 8 C128 8 134 4 146 4 C158 4 162 10 174 10 C184 10 190 2 204 2 C218 2 222 8 234 8 C244 8 250 8 260 8 L260 18 C255.0 18.6 253.0 18.4 250.0 19 C248.8 24.4 247.8 28.0 246.0 28.0 C244.2 28.0 243.2 24.4 242.0 19 C235.0 18.6 231.0 18.4 228.0 19 C226.8 23.2 225.8 26.0 224.0 26.0 C222.2 26.0 221.2 23.2 220.0 19 C208.2 18.6 199.5 18.4 196.5 19 C195.2 25.6 194.0 30.0 192.0 30.0 C190.0 30.0 188.8 25.6 187.5 19 C175.5 18.6 166.5 18.4 163.5 19 C162.4 22.6 161.6 25.0 160.0 25.0 C158.4 25.0 157.6 22.6 156.5 19 C146.2 18.6 139.0 18.4 136.0 19 C134.5 28.0 133.2 34.0 131.0 34.0 C128.8 34.0 127.5 28.0 126.0 19 C114.0 18.6 105.0 18.4 102.0 19 C100.8 25.0 99.8 29.0 98.0 29.0 C96.2 29.0 95.2 25.0 94.0 19 C81.8 18.6 72.5 18.4 69.5 19 C68.5 22.0 67.6 24.0 66.0 24.0 C64.4 24.0 63.5 22.0 62.5 19 C56.5 18.6 53.5 18.4 50.5 19 C49.1 26.2 48.0 31.0 46.0 31.0 C44.0 31.0 42.9 26.2 41.5 19 C31.2 18.6 24.0 18.4 21.0 19 C19.8 23.2 18.8 26.0 17.0 26.0 C15.2 26.0 14.2 23.2 13.0 19 C6.5 18.4 4 18.6 0 18 Z' fill='url(%23g)'/%3E%3Cpath d='M0 15 C80 12.5 180 12.5 260 15' fill='none' stroke='%23EEF4FD' stroke-width='3' opacity='.7'/%3E%3Cpath d='M0 17.6 C60 16.6 200 16.6 260 17.6' fill='none' stroke='%23C7DAF5' stroke-width='1.2' opacity='.8'/%3E%3C/svg%3E") repeat-x left top/260px 36px;border-radius:16px 16px 6px 6px;filter:drop-shadow(0 2px 2px rgba(10,22,56,.28))}
.tn-spot::after,.tn-map::after{left:-14px;right:-14px;top:-23px}.tn-app::after,.tn-bell::after,.tn-follow::after{left:-6px;right:-6px;top:-15px}.tn-pop-in::after{left:-7px;right:-7px;top:-16px}.tn-bell{margin-top:6px}
/* the WIN card's light rays no longer need overflow:hidden, so its cap can sit on top */
@property --tnRay{syntax:'<angle>';inherits:false;initial-value:0deg}
.tn-win{overflow:visible}
.tn-win::before{inset:0;border-radius:inherit;animation:tnRays 9s linear infinite;
  background:conic-gradient(from var(--tnRay) at 50% 60%,transparent 0 20deg,rgba(255,255,255,.4) 20deg 30deg,transparent 30deg 80deg,rgba(255,255,255,.4) 80deg 90deg,transparent 90deg 140deg,rgba(255,255,255,.4) 140deg 150deg,transparent 150deg 200deg,rgba(255,255,255,.4) 200deg 210deg,transparent 210deg 260deg,rgba(255,255,255,.4) 260deg 270deg,transparent 270deg)}
@keyframes tnRays{to{--tnRay:360deg}}
/* pop-ups scroll on the dark backdrop, so the cap is never clipped */
.tn-pop{overflow-y:auto;align-items:flex-start;padding:28px 12px 12px}.tn-pop-in{max-height:none;overflow:visible;margin:auto 0 0;border:3px solid var(--gold)}
@media (min-width:640px){.tn-pop-in{margin:auto 0}}

/* T3: no white boxes. Light surfaces are cream with a gold edge; second buttons are navy glass */
.qnum{background:var(--cream);border:3px solid #F5C24A;box-shadow:0 6px 0 #C9962E;color:#0B1D4D}.qnum:hover{border-color:#D9283E}.qnum:active{box-shadow:0 3px 0 #C9962E}.qnum[aria-pressed="true"]{border-color:#D9283E;background:#FFE9EC}
.qchips .chip{background:var(--cream);border:3px solid #F5C24A;color:#0B1D4D}.qchips .chip.all{border-style:dashed;color:#16296A}
.qname .in,.qbig,.qaddkid .in,body.tnew main.tk--ob .field input,body.tnew main.tk--ob .code input{background:var(--cream);border-color:#E9C46A}body.tnew .addkid{background:var(--cream);border-color:#C9962E}
.tn-tab[aria-selected="true"],.tn-map .tab[aria-selected="true"]{background:var(--cream);color:#0B1D4D;box-shadow:inset 0 0 0 2px #F5C24A,0 4px 14px rgba(0,0,0,.25)}.tn-map .tab{min-height:46px}
.tn-who i{background:var(--cream);box-shadow:inset 0 0 0 2px #F5C24A}body.tnew .cat .tile{background:var(--cream);border:3px solid rgba(245,194,74,.75)}body.tnew .cat .tile:hover{border-color:#F5C24A}
body.tnew .cat .tile[aria-pressed="true"]{border-color:#D9283E;box-shadow:0 0 0 3px rgba(245,194,74,.6)}body.tnew .cat .tile.nothere{border:3px dashed #F5C24A}
body.tnew main .btn.white,body.tnew .tn .btn.white{background:rgba(255,255,255,.1)!important;color:#fff!important;border:2px solid rgba(255,255,255,.5)!important;box-shadow:none!important}
body.tnew main .btn.white:hover,body.tnew .tn .btn.white:hover{background:rgba(255,255,255,.18)!important}
body.tnew .tn-pop-in .btn.white{background:rgba(11,29,77,.06)!important;color:#0B1D4D!important;border:2px solid #0B1D4D!important;box-shadow:none!important}
/* rounded cards and pictures on phones too (Paul: "any cards must have a rounded edge on mobile too") */
@media (max-width:759px){
  body.tnew .tk .welspot .rc-screen,body.tnew .tk .monitor,body.tnew .tk .kmap,body.tnew .tk .tkoff{margin-left:0!important;margin-right:0!important;width:100%!important;border-radius:18px!important;border:4px solid #16296A!important;overflow:hidden;box-sizing:border-box}
  body.tnew .tk .hookmap{margin-left:0;margin-right:0;border-radius:18px;overflow:hidden} body.tnew .tk .hookmap svg{border-radius:14px}
}
body.tnew .tk .tile img,body.tnew .tn-tile,body.tnew .tn-spot .cctv.big{border-radius:14px}

/* T4: the follow card is navy with a gold edge */
.tn-follow{background:linear-gradient(180deg,#14306F,#0F2459);border:2px solid rgba(245,194,74,.7)}.tn-socials a{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font-size:14px;min-height:64px;justify-content:center}
.tn-socials a:hover{background:rgba(255,255,255,.18)}.tn-follow small{color:#DCE6FF;opacity:1}

/* T7: the hand-over between elves: gold edge, gold tick */
.qdone{max-width:640px;background:rgba(8,20,58,.78);border:2px solid var(--gold)}.qdone b{color:var(--gold)}

/* P4: red on gold reads at 4.5:1 or better */
.tn-win .flash,.tn-winstrip .flash,.tn-win-k{color:#A3122A}

/* P2: the prize pop-up, a festive banner on top, everything centred */
.tn-pop-in.win{padding-top:0;text-align:center;background:var(--cream)}
.tn-win-pop::before{content:"";display:block;aspect-ratio:1000/525;margin:0 -20px 14px;border-radius:21px 21px 0 0;
  background:#0B1D4D url(/img/tracker/prize-header.jpg) center/cover no-repeat;box-shadow:inset 0 -3px 0 var(--gold)}
.tn-pop-in.win .flash.big{display:block;color:#A3122A;font-size:44px;line-height:1.05;text-shadow:0 2px 0 #fff}.tn-pop-in.win .invite{margin-top:18px;padding-top:16px!important;border-top:2px dashed #E9C46A!important}
.tn-pop-in.win .invite .k{display:block;color:#A3122A}.tn-pop-in.win .invprog{justify-content:center}.tn-pop-in.win .invprog i{width:22px;height:22px;border-color:#A3122A}.tn-pop-in.win .invprog i.on{background:#A3122A}
.tn-pop-in.win .invcount{font-weight:800;font-size:17px;color:#0B1D4D}.tn-pop-in.win .invlink{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.tn-pop-in.win .invlink code{background:#fff;border:2px dashed #E9C46A;border-radius:10px;padding:6px 10px;color:#0B1D4D}.tn-pop-in.win .invopts{display:grid;gap:8px;margin-top:8px}.tn-pop-in.win .tn-x{top:12px;right:12px}

/* A2: tap targets at least 44px, and the "taken" chip readable */
.tn-town .link,.tn .acct .link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}.tn-addkid,.qback{min-height:44px}.tn-x{width:44px;height:44px;z-index:3}.tn-pop-in .link{min-height:44px}
body.tnew .tkfoot a{display:inline-flex;align-items:center;min-height:44px}.qchips .chip.taken{opacity:1;background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.6);color:#fff}.qchips .chip.taken small{color:#DCE6FF}

body.tnew main .how li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff}body.tnew .rc-sound{background:rgba(8,20,58,.6);color:#fff;border-color:rgba(255,255,255,.55);min-height:36px}
.tn-winstrip{margin-top:24px}
.tn-pop-in.win .invite{border-radius:0!important}
.tn-app .btn+.btn{margin-top:10px}.tn .acct{background:rgba(8,20,58,.72);border-radius:22px;padding:4px 18px;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}
/* App card: "Get both elf calls and your first video is free" (opens the calls) and the website packs link (CEO, 27 Oct 2026) */
.tn-app .tn-app-free{margin:-4px 0 12px}
.tn-app .tn-app-free .link{padding:6px 0;min-height:44px;color:var(--gold,#F5C24A);font-size:15px;font-weight:800;text-align:left;text-decoration:underline;cursor:pointer}
.tn-app .tn-app-packs{margin:12px 0 0;text-align:center;font-size:14px}
.tn-app .tn-app-packs a{display:inline-flex;align-items:center;min-height:44px;color:#DCE6FF;text-decoration:underline}
/* iOS QA (27 Oct 2026): footer links wrap as a row with gaps, no "·" left dangling at the end of a line */
.tkfoot__links{display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;row-gap:0;margin:0}