/* Elf Tracker home, Head of Design review (Paul, 29 Oct 2026). Loaded last (after tracker-new-layout.css).
   Markup: js/tracker-new/tracker-view.js html() and tracker-cards.js.
   - .tn-latest      the latest sighting card, next to the elf's name, above the prize strip
   - .tn-winstrip    the prize strip on every screen size (the big WIN card is gone), slimmer
   - .tn-video       "Want to see {elf} in YOUR home caught on camera?" (Elf Watch Studio), the advert playing
   - .tn-me          the account section (/tracker#me)
   - .tn-switch      the three views as a simple switch inside the page (only with ELFBAR on) */

/* ---------- the latest sighting ---------- */
.tn-home .tn-latest{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--tn-r,22px);background:linear-gradient(180deg,#14306F,#0F2459);
  border:2px solid rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.35);color:#fff}
.tn-latest .tn-k{margin:0}
.tn-latest .cctv{border-radius:14px;overflow:hidden;margin:0}
.tn-latest .tn-cap{margin:0;font:700 17px/1.4 'Plus Jakarta Sans',sans-serif;color:#fff}
.tn-latest .btn{margin-top:auto}
@media (min-width:1024px){
  .tn-home .tn-latest{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:18px;align-items:start}
  .tn-latest>.tn-k{grid-column:1/-1}
  .tn-latest>.cctv{grid-column:1;grid-row:2/4}
  .tn-latest>.tn-cap,.tn-latest>.btn{grid-column:2}
  .tn-latest>.btn{align-self:end}
}

/* ---------- the prize strip: every screen size, slimmer ---------- */
.tn-home .tn-winstrip-wrap{display:block!important}
.tn-home .tn-winstrip{display:flex!important;padding:8px 14px;min-height:52px;border-radius:16px}
.tn-home .tn-winstrip .flash{font-size:20px;line-height:1.1}
.tn-home .tn-winstrip small{font-size:12.5px;max-width:none}
.tn-home .tn-winstrip .go{padding:8px 12px;font-size:13.5px}
.tn-home .tn-invstrip .tn-winstrip b{font:800 17px 'Plus Jakarta Sans',sans-serif;color:#0B1D4D}
.tn-home .tn-winstrip-fine{margin-top:4px!important;padding:2px 10px!important}
@media (min-width:1024px){.tn-home .tn-winstrip small{display:inline;margin-left:10px}.tn-home .tn-winstrip>span:first-child{display:flex;align-items:baseline;flex-wrap:wrap}}

/* ---------- Make a video of {elf} ---------- */
.tn-video a.btn{display:flex;align-items:center;justify-content:center;min-height:52px;box-sizing:border-box;text-decoration:none;color:#fff}
/* CEO, 29 Oct 2026: the Studio card stands out from the others: a deep night sky, a rose border with a soft
   glow, the Studio advert playing (tracker-cards.js videoCard), and one quiet line for the app. */
.tn-home .tn-app.tn-vid-hot{background:radial-gradient(120% 90% at 80% 0%,#2A3F8F 0%,#13235E 45%,#070F2E 100%);border:3px solid #F06B8B;box-shadow:0 0 0 4px rgba(240,107,139,.22),0 20px 44px rgba(0,0,0,.45)}
.tn-vidbox{position:relative;overflow:hidden;background:#070F2E}
.tn-vidbox .tn-vidad{display:block;width:100%;aspect-ratio:1/1;max-height:420px;object-fit:cover;object-position:50% 22%}
.tn-vidpause{position:absolute;right:10px;bottom:10px;z-index:2;min-height:40px;min-width:64px;padding:8px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.7);background:rgba(7,15,46,.72);color:#fff;font:700 14px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.tn-vidpause:focus-visible{outline:3px solid #F5C24A;outline-offset:2px}
.tn-vid-hot h2{color:#fff}
.tn-vid-hot .tn-k{color:#FFB3C4}
.tn-video .tn-app-alt{margin:12px 0 0;font-size:13.5px;line-height:1.45;color:#C9D6F5;text-align:center}
.tn-video .tn-app-alt a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:underline}
@media (min-width:1024px){.tn-vidbox .tn-vidad{position:absolute;inset:0;height:100%;max-height:none;aspect-ratio:auto}}

/* ---------- the account section ---------- */
.tn .tn-me{margin:28px auto 0;max-width:1440px;padding:18px;border-radius:22px;background:rgba(8,20,58,.78);border:1px solid rgba(255,255,255,.14);color:#fff;box-sizing:border-box}
.tn-me:focus{outline:none}
.tn-me:focus-visible{outline:3px solid #F5C24A;outline-offset:3px}
.tn-me h2{margin:0 0 12px;font:800 22px 'Plus Jakarta Sans',sans-serif;color:#fff}
.tn-me-grid{display:grid;gap:14px}
@media (min-width:900px){.tn-me-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tn-me-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 16px;min-width:0}
.tn-me-box h3{margin:0 0 6px;font:800 17px 'Plus Jakarta Sans',sans-serif;color:#F5C24A}
.tn-me-box ul{margin:0 0 4px;padding:0 0 0 18px;line-height:1.6}
.tn-me-box p{margin:0 0 4px;color:#DCE6FF}
.tn-me-box .link{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:700;text-decoration:underline;padding:0}
.tn-me-alerts .card.alerts{background:none;border:0;box-shadow:none;padding:0;margin:0;color:#fff}
.tn-me-alerts .card.alerts h2{font:800 17px 'Plus Jakarta Sans',sans-serif;color:#F5C24A;margin:0 0 6px}
.tn-me-alerts .card.alerts p{color:#DCE6FF}
.tn-me .acct{margin-top:14px!important;background:none!important;padding:0!important;width:auto!important}

/* ---------- the simple switch (ELFBAR on): a small segmented control inside the page ---------- */
.tn-switch{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(8,20,58,.78);width:100%;box-sizing:border-box}   /* full width: the home's layout rule (one box per row, full width) */
.tn-switch .tn-sw{flex:1 1 0;min-width:0;min-height:44px;padding:0 8px}
.tn-switch .tn-sw[aria-pressed="true"]{background:var(--cream,#FFF8E8);color:#0B1D4D}

/* ---------- the Camera room before a tile is chosen: share and all the sightings (the latest is on the card above) ---------- */
.tn-home .tn-spot.tn-spot-tiles{display:block}
.tn-spot.tn-spot-tiles>.tn-share{margin-top:10px}
@media (min-width:1024px){.tn-spot.tn-spot-tiles .tn-tiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}

/* ---------- the shared bottom bar (css/elfbar.css, the Studio chat's) ----------
   elfbar.css pads the body (body.has-elfbar). Things fixed to the bottom of the screen sit above the bar;
   pop-ups (.tn-pop, z-index 100) and the call hand-over (z-index 1000) already cover it. */
body.has-elfbar .tsbox{bottom:calc(84px + env(safe-area-inset-bottom))}
body.has-elfbar .tk-sandbox{bottom:calc(90px + env(safe-area-inset-bottom))}
body.has-elfbar .tn-pop{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

/* ---------- Me: change name / remove for each elf and child (js/tracker-new/me-edit.js, 29 Oct 2026) ---------- */
.tn-me-box ul.tn-me-list{list-style:none;margin:0 0 6px;padding:0;line-height:1.4}
.tn-me-row{border-top:1px solid rgba(255,255,255,.12);padding:6px 0}
.tn-me-row:first-child{border-top:0}
.tn-me-line{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tn-me-name{font:700 18px 'Plus Jakarta Sans',sans-serif;color:#fff;overflow-wrap:anywhere;min-width:0}
.tn-me-acts{display:flex;gap:6px;flex-wrap:wrap}
.tn-me-btn{min-height:44px;padding:0 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.06);color:#fff;font:700 15px 'Inter',sans-serif;cursor:pointer}
.tn-me-btn:hover{background:rgba(255,255,255,.14)}
.tn-me-btn:focus-visible,.tn-me-acct .btn:focus-visible{outline:3px solid #F5C24A;outline-offset:2px}
.tn-me-btn[aria-expanded="true"]{background:#FFF8E8;color:#0B1D4D;border-color:#FFF8E8}
.tn-me-panel{margin:8px 0 4px;padding:12px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.tn-me-panel label{display:block;font-weight:700;margin:0 0 6px;color:#fff}
.tn-me-panel input{width:100%;box-sizing:border-box;min-height:48px;font-size:18px;padding:8px 12px;border-radius:12px;border:2px solid #fff;color:#0B1D4D;background:#fff}
.tn-me-box .tn-me-panel p{margin:0 0 8px;color:#fff;font-size:16px;line-height:1.45}
.tn-me-box .tn-me-panel p.tn-me-q{font:800 18px 'Plus Jakarta Sans',sans-serif}
.tn-me-box .tn-me-panel p.warn{color:#FFD9DF;font-weight:700}
.tn-me-stop{border-color:#F5C24A}
.tn-me-do{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tn-me-do .btn{flex:1 1 140px;min-height:48px;margin:0}
.tn-me .tn-me-acct{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.tn-me-out{display:flex;flex-wrap:wrap;gap:8px}
.tn-me-out .btn{min-height:44px;margin:0;width:auto}

/* ---------- "Signed in as ... Sign out" under the top bar (js/tracker-new/whoami.js) ---------- */
.tk-who{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 16px;box-sizing:border-box}
.tk-who p{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;justify-content:flex-end;font:600 14px 'Inter',sans-serif;color:#DCE6FF;text-align:right}
.tk-who span{overflow-wrap:anywhere}
.tk-who .link{min-height:44px;padding:0 4px;color:#fff;font-weight:800;text-decoration:underline;background:none;border:0;cursor:pointer;font-size:15px}
/* Kirsten, 1 Nov 2026 preview: the "checked in" email line in bold (no "!" badge), and the share strip
   slimmer: one line "Help us share the magic" and the red button, no long sentence. */
.count .rwbold{font-weight:800}
.tn-home .tn-invstrip .tn-winstrip{min-height:0;padding:6px 8px 6px 14px;align-items:center}
.tn-home .tn-invstrip .tn-winstrip b{font-size:16px}
/* Paul, 2 Nov 2026: one Santa only. The tracker now has the motion layer's flying sleigh (js/pizzazz.js), so its
   sky is the moonlit one without the painted sleigh, as on the homepage. */
html body.tnew::before{background-image:url(/img/site/night-sky-wide-moonlit.jpg)!important}
@media (max-aspect-ratio:1/1){html body.tnew::before{background-image:url(/img/site/night-sky-tall-moonlit.jpg)!important}}
/* the Studio card's snow cap shows above its top edge like the calls card's (Jay, 4 Nov 2026) */
.tn-app.tn-vid-hot.pz-capped{overflow:visible!important}
/* "Coming on 16th November" on the Studio card before it opens (Jay, 4 Nov 2026) */
.tn-vid-hot .tn-vid-ribbon{display:inline-block;align-self:center;margin:0 auto 10px;padding:7px 16px;border-radius:999px;background:linear-gradient(#FFD36E,#F5B32F);color:#16296A;font:800 15px/1.2 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.02em;box-shadow:0 3px 0 #C98A12,0 6px 16px rgba(0,0,0,.3);transform:rotate(-2deg)}
.cl-feat.cl-soon26.pz-capped{overflow:visible!important}
.cl-waitcard.pz-capped{overflow:visible!important}