/* Elf Tracker NEW DESIGN PROTOTYPE (/tracker-new): head-of-design polish after Paul's review of every
   screen (25 Oct 2026). Loaded last, after tracker-new.css and tracker-new-logic.css. */

/* ---------- 1. the children's view: one screen size for every children's screen ----------
   Computers: the picture (camera, camera wall, map, hand-over radar) is always the same 4:3 box,
   as tall as the window allows below the moon and sleigh band (top at 281px, 20px left at the bottom).
   The words sit beside it; the press-to-watch and grown-ups screens use the same height. */
@media (min-width:1000px){
  body.tnew{--kh:max(400px,calc(100vh - 301px));--kw:min(calc(var(--kh) * 4 / 3),calc(100% - 404px))}
  body.tnew main#app.tk.tk--kid{padding-top:18px!important;padding-bottom:20px!important;gap:14px}
  body.tnew main.tk--kid .body:not(.center){grid-template-columns:var(--kw) minmax(360px,1fr)!important;column-gap:44px!important;row-gap:14px;align-items:center}
  body.tnew main.tk--kid .body>:is(.kmap,.monitor,.wall,.tkoff){width:100%!important;max-width:none!important;max-height:none!important;height:auto!important;aspect-ratio:4/3!important;margin:0!important;align-self:center;box-sizing:border-box}
  body.tnew main.tk--kid .body.center{height:var(--kh);min-height:0!important;max-width:none!important;width:100%;box-sizing:border-box}
  body.tnew main.tk--kid .body.center>.gate{width:100%;max-width:520px;margin:0 auto;box-sizing:border-box}
  /* the words column never runs taller than the picture */
  body.tnew main.tk--kid .body .row2{grid-template-columns:1fr 1fr!important}
  body.tnew main.tk--kid .typer{min-height:0;font-size:14px;line-height:1.75}
  body.tnew main.tk--kid .body:not(.center) .shout{font-size:40px}
  body.tnew main.tk--kid .kidh.sm{font-size:32px;line-height:1.15;margin:0}
  /* the grown-ups' hand-over screen before it: the same picture box at the same height */
  body.tnew main#app.tk.tk--ob.tk-handover{padding-top:77px!important;padding-bottom:20px!important}
  body.tnew main.tk-handover.ob-grid,body.tnew main.tk-handover .ob-grid{grid-template-columns:var(--kw) minmax(360px,1fr)!important;column-gap:44px!important;align-items:center!important}
  body.tnew main.tk-handover .ob-vis{align-self:center!important}
  body.tnew main.tk-handover .ob-vis .tkvis{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:4/3!important}
  body.tnew main.tk-handover .ob-pane{align-self:center!important;gap:12px!important}
  body.tnew main.tk-handover .ob-pane .how{margin:0}
}
/* tablets and computers: the camera wall fills the same 4:3 box as the other screens: the first camera big,
   two beside it, the rest along the bottom (with the home camera the bottom row has three) */
@media (min-width:700px){
  body.tnew main.tk-room .wall{aspect-ratio:4/3}
  body.tnew main.tk-room .wall{grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
  body.tnew main.tk-room .wall .mon{aspect-ratio:auto!important;height:auto!important;min-height:0;grid-column:span 3}
  body.tnew main.tk-room .wall .mon.first{grid-column:1/5!important;grid-row:1/3!important}
  body.tnew main.tk-room .wall .mon:nth-child(2){grid-column:5/7;grid-row:1}
  body.tnew main.tk-room .wall .mon:nth-child(3){grid-column:5/7;grid-row:2}
  body.tnew main.tk-room .wall:has(.home) .mon:not(.first):nth-child(n+4){grid-column:span 2!important;grid-row:3}
}
/* the map keeps every pin on its place on the painting, whatever the shape of the box */
.kmap .kmapin{position:absolute;left:0;right:0;top:50%;aspect-ratio:1;transform:translateY(-50%)}
.kmap .kmapin>img{display:block;width:100%;height:100%;object-fit:cover}
body.tnew main.tk--kid .kmap{aspect-ratio:4/3}
/* phones and tablets: the children's screens use the width of the phone, with a slim 10px edge */
@media (max-width:999px){
  body.tnew main#app.tk.tk--kid,body.tnew main#app.tk.tk-handover{max-width:none!important;width:100%;padding-left:10px!important;padding-right:10px!important;box-sizing:border-box}
  body.tnew main.tk--kid .kidtop{padding:0 6px}
  body.tnew main.tk--kid .body>:is(.kidh,.kidsub,.cap,.sub,.small,p){padding-left:6px;padding-right:6px}
  body.tnew main.tk--kid .body>:is(.kmap,.monitor,.tkoff){width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
}
@media (min-width:700px) and (max-width:999px){
  body.tnew main.tk--kid .body>:is(.kmap,.monitor,.wall,.tkoff){border-radius:22px!important}
  body.tnew main.tk-handover .ob-vis .tkvis{max-height:none!important}
}

/* K06: one simple sum for the grown-ups (8 + 5), four big number buttons in a row */
body.tnew main.tk--kid .gate .q{font:800 30px/1.2 'Plus Jakarta Sans',sans-serif;color:#fff;text-align:center;margin:4px 0 2px}
body.tnew .gsum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
body.tnew .gsum .opt.num{text-align:center;min-height:64px;font:800 26px 'Plus Jakarta Sans',sans-serif;padding:0;border-radius:16px}

/* ---------- 2. the elf catalogue: every tile in easy reach ----------
   Phones three across (less scrolling to reach the girl elves); computers seven across, so each group
   is two rows. The last row of each group sits in the middle, never one lone tile on the left. */
body.tnew .tk-gender .grid2.cat{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px}
body.tnew .tk-gender .grid2.cat>.tile{flex:0 0 calc((100% - 20px) / 3);box-sizing:border-box;min-width:0}
body.tnew .tk-gender .tile.nothere{font-size:12.5px;line-height:1.2;padding:6px}
body.tnew .tk-gender .tile.nothere .q{font-size:40px}
@media (min-width:600px){body.tnew .tk-gender .grid2.cat>.tile{flex-basis:calc((100% - 30px) / 4)}}
@media (min-width:1000px){
  body.tnew .tk-gender .grid2.cat{gap:14px}
  body.tnew .tk-gender .grid2.cat>.tile{flex-basis:calc((100% - 84px) / 7)}
  body.tnew .tk-gender .tile.nothere{font-size:14px}
}

/* ---------- 3. computers: both halves of a question end level ----------
   When the words run longer than the picture (whose elf, with a child to add; the other elf spotted too),
   the picture grows down to the last button instead of leaving the words hanging below it. */
@media (min-width:1000px){
  body.tnew .ob-grid>.ob-vis.fit{align-self:stretch!important;display:flex;flex-direction:column}
  body.tnew .ob-vis.fit>.tkvis{flex:1 0 auto;height:auto!important;max-height:none!important;aspect-ratio:auto!important;
    min-height:min(max(320px,calc(100vh - max(17.45vw,31vh) - 70px)),calc((min(100vw,1440px) - 136px) * .4615))!important}
  body.tnew main.tk-handover .ob-vis.fit>.tkvis{flex:0 0 auto;min-height:0!important}
  /* adding a child: the name box and Add on one line */
  body.tnew .ob-pane .qaddkid{flex-direction:row!important;align-items:stretch;display:flex}
  body.tnew .ob-pane .qaddkid .in{flex:1 1 auto;width:auto!important}
  body.tnew .ob-pane .qaddkid .btn{flex:0 0 auto;width:auto;min-width:120px;margin:0}
}

/* ---------- 4. round elf pictures are a head-and-shoulders close-up ----------
   Each catalogue picture has its own crop (face in the middle). The picture itself is moved out of
   sight and the same file is drawn as the background at the crop. Family photos are untouched. */
:is(.tn-hero .face,.tn-elves .av img,.qface,.qdone img,.tk--kid .who img,.alsotxt img,.kmap .pin img,.tkvis .pin img,.tn-kidelf img)[src*="/img/tracker/types/"]{
  object-fit:none;object-position:-9999px -9999px;background:var(--cream,#FFF8E8) var(--fimg) var(--fbp)/var(--fbs) auto no-repeat}
img[src$="/types/T1.jpg"]{--fimg:url(/img/tracker/types/T1.jpg);--fbs:230.8%;--fbp:50.0% 22.5%}
img[src$="/types/T2.jpg"]{--fimg:url(/img/tracker/types/T2.jpg);--fbs:230.8%;--fbp:50.0% 24.7%}
img[src$="/types/T3.jpg"]{--fimg:url(/img/tracker/types/T3.jpg);--fbs:230.8%;--fbp:50.0% 21.0%}
img[src$="/types/T4.jpg"]{--fimg:url(/img/tracker/types/T4.jpg);--fbs:230.8%;--fbp:50.0% 24.7%}
img[src$="/types/T5.jpg"]{--fimg:url(/img/tracker/types/T5.jpg);--fbs:163.6%;--fbp:50.0% 42.2%}
img[src$="/types/T6.jpg"]{--fimg:url(/img/tracker/types/T6.jpg);--fbs:250.0%;--fbp:51.9% 23.2%}
img[src$="/types/T7.jpg"]{--fimg:url(/img/tracker/types/T7.jpg);--fbs:243.2%;--fbp:48.1% 24.2%}
img[src$="/types/T8.jpg"]{--fimg:url(/img/tracker/types/T8.jpg);--fbs:171.4%;--fbp:50.0% 31.1%}
img[src$="/types/T9.jpg"]{--fimg:url(/img/tracker/types/T9.jpg);--fbs:204.5%;--fbp:47.8% 18.4%}
img[src$="/types/TX.jpg"]{--fimg:url(/img/tracker/types/TX.jpg);--fbs:180.0%;--fbp:50.0% 35.0%}
img[src$="/types/T10.jpg"]{--fimg:url(/img/tracker/types/T10.jpg);--fbs:150.0%;--fbp:50.0% 52.8%}
img[src$="/types/T11.jpg"]{--fimg:url(/img/tracker/types/T11.jpg);--fbs:225.0%;--fbp:50.0% 36.7%}
img[src$="/types/T12.jpg"]{--fimg:url(/img/tracker/types/T12.jpg);--fbs:225.0%;--fbp:50.0% 38.9%}
img[src$="/types/T13.jpg"]{--fimg:url(/img/tracker/types/T13.jpg);--fbs:225.0%;--fbp:50.0% 29.8%}
img[src$="/types/T14.jpg"]{--fimg:url(/img/tracker/types/T14.jpg);--fbs:225.0%;--fbp:50.0% 30.8%}
img[src$="/types/T15.jpg"]{--fimg:url(/img/tracker/types/T15.jpg);--fbs:225.0%;--fbp:50.0% 32.0%}
img[src$="/types/T16.jpg"]{--fimg:url(/img/tracker/types/T16.jpg);--fbs:290.3%;--fbp:41.5% 28.4%}
img[src$="/types/T17.jpg"]{--fimg:url(/img/tracker/types/T17.jpg);--fbs:290.3%;--fbp:51.7% 27.9%}
img[src$="/types/T18.jpg"]{--fimg:url(/img/tracker/types/T18.jpg);--fbs:225.0%;--fbp:50.0% 30.8%}
img[src$="/types/T19.jpg"]{--fimg:url(/img/tracker/types/T19.jpg);--fbs:225.0%;--fbp:50.0% 28.6%}
img[src$="/types/T20.jpg"]{--fimg:url(/img/tracker/types/T20.jpg);--fbs:225.0%;--fbp:50.0% 28.6%}
img[src$="/types/T21.jpg"]{--fimg:url(/img/tracker/types/T21.jpg);--fbs:225.0%;--fbp:50.0% 30.8%}
img[src$="/types/T22.jpg"]{--fimg:url(/img/tracker/types/T22.jpg);--fbs:225.0%;--fbp:50.0% 30.8%}
img[src$="/types/T23.jpg"]{--fimg:url(/img/tracker/types/T23.jpg);--fbs:215.0%;--fbp:50.0% 33.0%}
img[src$="/types/T24.jpg"]{--fimg:url(/img/tracker/types/T24.jpg);--fbs:215.0%;--fbp:50.0% 33.0%}
img[src$="/types/T25.jpg"]{--fimg:url(/img/tracker/types/T25.jpg);--fbs:215.0%;--fbp:50.0% 33.0%}
img[src$="/types/T26.jpg"]{--fimg:url(/img/tracker/types/T26.jpg);--fbs:215.0%;--fbp:50.0% 14.0%}
img[src$="/types/T27.jpg"]{--fimg:url(/img/tracker/types/T27.jpg);--fbs:215.0%;--fbp:50.0% 11.0%}

/* ---------- Paul's owner sandbox (26 Oct 2026, js/tracker-new/sandbox.js) ----------
   A small pill in the bottom-left corner while this tab is the sandbox (with the sandbox date when
   one is set). Never shown to families. Clicks pass through it, so it can never block a button. */
.tk-sandbox{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));z-index:9999;pointer-events:none;
  padding:4px 10px;border-radius:999px;background:rgba(11,29,77,.88);color:#FFE7A3;border:1px solid rgba(245,194,74,.7);
  font:800 11px/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* ---------- 2. words on the night scene stay readable on phones (Product test, 26 Oct 2026) ----------
   On a phone the welcome, the elf picker, "Which call?" and the waiting list put their words straight
   over the trees and the snow. A soft navy halo (the night sky) behind each loose line, and the cards
   on these screens a darker navy, so every word reads at 390 x 844. No layout change: the halo is a
   shadow, not padding. */
body.tnew main.tk--ob :is(h1,.h,.k,.sub,.small,.hint,label,.tick,.link){text-shadow:0 1px 2px rgba(6,16,48,.95),0 0 10px rgba(6,16,48,.85)}
body.tnew main.tk--ob :is(.sub,.small):not(.card *):not(.btn){background:rgba(8,20,58,.55);border-radius:12px;box-shadow:0 0 14px 8px rgba(8,20,58,.55)}
body.tnew main.tk--ob .card,body.tnew main.tk--ob .savecard,body.tnew main.tk--ob .wlcard{background:rgba(8,20,58,.84);border-color:rgba(255,255,255,.2)}
body.tnew main.tk--ob .card.alsocard{background:none}
body.tnew main.tk--ob .wlcard :is(label,.hint,.tick span){color:#DCE6FF}

/* ---------- 3. the save screen: "When will {elf} next be spotted?" is a plain line, not a button ---------- */
body.tnew .camlist li.mystery{min-height:0;background:none;border:0;padding:6px 2px;color:#C9D6F5;font-style:italic}
body.tnew .camlist li.mystery i{display:none}

/* ---------- 4. the prize strip's key terms (18+, closing date, terms link), under the strip ---------- */
.tn-winstrip-wrap .tn-winstrip-fine{margin:6px 0 0;box-sizing:border-box;padding:4px 12px;border-radius:12px;background:rgba(8,20,58,.78);font-size:12px;line-height:1.35;color:#DCE6FF;text-align:center}
.tn-winstrip-wrap .tn-winstrip-fine a{color:inherit;text-decoration:underline}
@media (min-width:1000px){.tn-winstrip-wrap{display:none}}

/* ---------- 5. QA retest (26 Oct 2026): "wrong colour text on background" ----------
   Measured again with axe and the pixel check at 390 x 844 and 1440 x 900 (scratchpad qa2). */
/* (9) computers: the question's words on a dark pane, like tablets, so nothing sits on the snowy trees
   or the mid-blue sky ("Child 2", "Town or village", "Back", "Forgot your password?", "Already tracking?") */
@media (min-width:1000px){
  body.tnew .ob-grid>.ob-pane{background:rgba(8,20,58,.8);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:22px 24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-sizing:border-box}
  body.tnew main.tk--kid .body.center>:is(.kidsub,.kidh,.small){width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;padding:6px 16px;border-radius:14px;background:rgba(8,20,58,.72);box-sizing:border-box}
}
/* the loose small lines under a question get the same backing (links too on phones, where there is no pane) */
body.tnew main.tk--ob :is(.credit,.hint.disclaim){background:rgba(8,20,58,.78);border-radius:12px;padding:6px 12px;width:fit-content;max-width:100%;box-sizing:border-box}
@media (max-width:699px){body.tnew main.tk--ob :is(#tpCB,.ob-pane>.link,.ob-pane>.stack>.link){background:rgba(8,20,58,.78);border-radius:12px;padding:6px 12px;width:fit-content;max-width:100%;box-sizing:border-box}}
body.tnew main.tk--ob .credit a{color:#fff}
body.tnew main.tk--kid .body.center>.kidsub{background:rgba(8,20,58,.72);border-radius:14px;padding:6px 14px;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}
/* (6) "Link copied..." lines on the night sky: light, never the grey for cream cards (#invSaid and #popShared
   sit on cream and keep the darker grey) */
body.tnew :is(#shared,#sharedHq,#copied){color:#DCE6FF}
/* (7) the grown-ups' sum: the "Not quite" line pink on the dark card */
body.tnew #gwarn{color:#FFB4BD}
/* (10) a button that is not ready yet: still clearly "not yet", but readable (solid grey-blue, navy words) */
body.tnew .btn.red:disabled,body.tnew .btn[disabled],body.tnew .btn.faded{background:#9AA6C4!important;color:#0B1D4D!important;box-shadow:0 4px 0 #6F7C9E!important;opacity:1!important;filter:none!important;text-shadow:none!important}
body.tnew .cl-kidchips .chip.cl-has{opacity:1;background:#9AA6C4;border-color:#9AA6C4;color:#0B1D4D}
/* (11) the gaps in the "How it works" script: a darker grey on cream */
body.tnew .cp-gap{color:#4F5F86}
body.tnew .cp-warn{margin:0;padding:10px 14px;border-radius:14px;background:#FFE9EC;border:2px solid #D9283E;color:#9F1D2B;font-weight:700;text-shadow:none}
/* (12) "IS THAT {ELF}?!": the red on a cream pill, so it shouts on any sky */
body.tnew .shout{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;padding:4px 20px 8px;border-radius:28px;background:#FFF8E8;color:#C8102E;text-shadow:none;box-shadow:0 6px 18px rgba(0,0,0,.35);box-sizing:border-box}
/* (13) "CHECKED IN": a solid stamp in a deeper red */
body.tnew .stamp{opacity:1;color:#B3122A;border-color:#B3122A;background:#FFFDF5}
/* gold-ish labels: darker on cream, lighter on red */
body.tnew .file .no{color:#6E5A22}
body.tnew .tn-hero .tn-xmas .tn-k,body.tnew .cl-feat.thanks .cl-feat-k{color:#FFD36E}
/* camera HUD words and the buttons over the footage get a dark backing */
body.tnew .hud>span{background:rgba(0,0,0,.6);border-radius:4px;padding:1px 6px}
body.tnew main .btn.white,body.tnew .tn .btn.white{background:rgba(8,20,58,.72)!important}   /* white words: a navy glass, not a white one (pop-ups keep theirs) */
body.tnew main .btn.white:hover,body.tnew .tn .btn.white:hover{background:rgba(8,20,58,.86)!important}
/* the sandbox and demo note on the scene */
body.tnew .tn .demo{display:block;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;padding:4px 12px;border-radius:999px;background:rgba(8,20,58,.82);color:#DCE6FF;box-sizing:border-box}
body.tnew main.tk--ob :is(.credit,.hint.disclaim){margin-left:auto;margin-right:auto}
/* the children's caption under the footage and the big red button's shine: readable on any sky */
body.tnew main.tk--kid .body>.cap{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;padding:6px 14px;border-radius:14px;background:rgba(8,20,58,.72);box-sizing:border-box}
body.tnew .bigred{background:radial-gradient(circle at 35% 30%,#EE4F56,#C42B33 55%,#8E1E23)}
/* phones: the gold kicker over the snowy trees (the waiting list) gets a small navy tab */
@media (max-width:699px){body.tnew main.tk--ob .ob-pane>.k{width:fit-content;padding:3px 10px;border-radius:999px;background:rgba(8,20,58,.78)}}
/* ---------- the Elf Tracker is free (CEO, 27 Oct 2026): js/tracker-new/free.js ----------
   A gold pill in the heading area (welcome, waiting list, saving the tracker), a short "Free" pill
   beside the set-up progress dots, and the line under the button in white at a readable size.
   Navy #0A1638 on gold #F5B32F is about 10:1; white on the navy sky well over 4.5:1. */
body.tnew .tn-free{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:0;padding:7px 16px 7px 8px;border-radius:999px;background:#F5B32F!important;color:#0A1638!important;font:800 16px/1.25 'Plus Jakarta Sans',sans-serif;letter-spacing:.01em;text-shadow:none!important;box-shadow:0 2px 10px rgba(6,16,48,.45)!important;box-sizing:border-box}
body.tnew .tn-free .tn-free-ic{flex:none}
body.tnew .tn-free--chip{padding:3px 12px;font-size:13px}
body.tnew .qprog:has(.tn-free--chip){display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
body.tnew .qprog:has(.tn-free--chip) .qelf{flex-basis:100%}
body.tnew .tn-free-note{font-size:14.5px!important;line-height:1.4!important;color:#fff!important}
/* Desktop QA (27 Oct 2026): from 700px the pane is already a card, so the waiting-list form inside it is not a second box */
@media (min-width:700px){body.tnew .ob-grid>.ob-pane .wlcard{background:none;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* "why?" tips (Paul, 28 Oct 2026; /css/why.css, /js/why.js): the explaining lines now sit behind a small circle
   beside the title. Light boxes (the pop-ups) get a navy circle; the titles keep their own spacing. */
body.tnew .tn-pop-in,body.tnew .tn-invite{--why-colour:#16296A;--why-ink:#FFF8E8}
body.tnew .cl-feat.thanks{--why-colour:#FFE3E8;--why-ink:#7A1424}
body.tnew .tn-follow>b,body.tnew .tn-invite>b{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}
body.tnew .tn-follow>b{margin-bottom:12px}
body.tnew .tn-invite>b{margin-bottom:10px}
body.tnew .qage-q{display:flex;align-items:center;flex-wrap:wrap}
body.tnew .cl-mood .cl-lab{display:flex;align-items:center;flex-wrap:wrap}
body.tnew .cl-feat-head h2{margin-bottom:0}
body.tnew .cl-feat-top{margin-bottom:12px}

/* ---------- CEO, 29 Oct 2026: the welcome's FREE sticker on the camera picture ---------- */
body.tnew .welcam{position:relative;width:100%}
body.tnew .tn-sticker{position:absolute;z-index:6;top:-12px;right:10px;transform:rotate(7deg);padding:8px 16px;border-radius:12px;background:#F5B32F;color:#0A1638;font:800 20px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.06em;text-shadow:none!important;border:3px solid #fff;box-shadow:0 4px 14px rgba(6,16,48,.55);pointer-events:none}
@media (min-width:1000px){body.tnew .tn-sticker{top:-14px;right:14px;font-size:24px;padding:10px 20px}}

/* ---------- CEO, 29 Oct 2026: the big red button screens fit one phone screen, no scrolling ----------
   The children's PRESS TO WATCH (main.tk-press) and the grown-ups' "Where is {elf} right now?" (.hqstart):
   no forced page height, and the heading, button and line shrink with the screen's height
   (checked at 390x844, 375x667 and 360x640: tests/tracker-fixes-1029.test.mjs). */
@media (max-width:759px){
  body.tnew main.tk-press,body.tnew main.tk-hqreveal:has(.hqstart){min-height:0!important;padding-bottom:12px!important;gap:8px!important}
  body.tnew main.tk-press .body.center,body.tnew main.tk-hqreveal .body.hqstart{min-height:0!important;gap:clamp(8px,1.8svh,16px)!important;justify-content:center;padding-top:0!important}
  body.tnew main:is(.tk-press,.tk-hqreveal) .bigred{width:clamp(128px,25svh,200px)!important;height:clamp(128px,25svh,200px)!important;font-size:clamp(17px,2.9svh,22px)!important;padding:0 16px!important;margin:clamp(4px,1svh,12px) auto!important}
  body.tnew main:is(.tk-press,.tk-hqreveal) :is(.kidh,.h){font-size:clamp(21px,3.7svh,28px)!important;line-height:1.15!important;margin:0!important}
  body.tnew main:is(.tk-press,.tk-hqreveal) :is(.kidsub,.sub){margin:0!important;font-size:clamp(14px,2.3svh,17px)!important}
  /* the page footer waits for the next screen, so nothing scrolls under the button */
  body.tnew:has(main.tk-hqreveal .hqstart) .tkfoot{display:none}
}

/* The police line-up over the welcome camera for its first 3 seconds (Paul, 31 Oct 2026; screens-setup.js lineupFirst) */
.welspot .rc-screen{isolation:isolate}   /* keeps the line-up under the FREE sticker */
.tk-lineup{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:30;transition:opacity .8s}
.tk-lineup.gone{opacity:0;pointer-events:none}
/* Round 2 tests (2 Nov 2026). The children on the order: the chosen ones are the bright gold pill with a tick,
   the others plain, and a child who already has the call plain grey and struck through. */
body.tnew .cl-ob .cl-kidchips .chip[aria-pressed]{background:transparent!important;border:2px solid rgba(220,229,247,.6)!important;color:#fff!important;opacity:1}
body.tnew .cl-ob .cl-kidchips .chip[aria-pressed="true"]{background:#F5C24A!important;border-color:#F5C24A!important;color:#0B1D4D!important}
body.tnew .cl-ob .cl-kidchips .chip[aria-pressed="true"]::before{content:"\2713\00a0"}
body.tnew .cl-ob .cl-kidchips .chip.cl-has,body.tnew .cl-ob .cl-kidchips .chip:disabled{background:transparent!important;border:2px solid rgba(154,166,196,.45)!important;color:#9AA6C4!important;text-decoration:line-through;opacity:1}
/* The reason for a £2.00 price and the two prices of both calls, inside a "Which call?" option. */
.cl-pack .cl-cheaper,.cl-pack .cl-split{display:block;margin-top:4px;font:600 14px/1.4 Inter,sans-serif;color:#DCE6FF}
.cl-pack[aria-pressed="true"] .cl-cheaper,.cl-pack[aria-pressed="true"] .cl-split{color:#33467D}
/* Room under the last line for the sticky Next on small screens. */
.cl-ob #clNext{margin-top:18px}
.cl-ob{padding-bottom:24px}
/* Laptops (1470px test): the phone code beside the Answer buttons when there is room, else under them, never on top. */
.cl-ho{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.cl-ho-here{flex:1 1 240px;min-width:0}
.cl-ho-qr{flex:0 0 250px;max-width:100%;box-sizing:border-box}
/* Round 3 (2 Nov 2026): the free call's "Free, thanks to your 3 friends" on its own line under the label (it ran
   past the card at 375px and was cut at 320px); "Child 1 of 2" and the free video line on the order. */
body.tnew .cl-sum .cl-lines li.free{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
body.tnew .cl-sum .cl-lines li.free b{white-space:normal;text-align:left}
.cl-kidof{margin:0 0 4px;font-weight:700;letter-spacing:.02em}
.cl-freevid{margin:6px 0 0;color:var(--cl-gold,#F5C24A);font-weight:700}
/* Forensic round 1 (2 Nov 2026). 4: the chosen Elf (picture and name) in the sticky bar, beside the tabs. */
.p26-navwrap.has-who{grid-template-columns:auto minmax(0,1fr)}
.p26-navwrap.has-who.has-me{grid-template-columns:auto minmax(0,1fr) auto}
.p26-whobar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;padding:4px;border-radius:18px;background:rgba(8,20,58,.9);border:1px solid var(--gold,#F5C24A);box-shadow:0 10px 24px rgba(0,0,0,.35);box-sizing:border-box}
.p26-whobar img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#fff}
.p26-whobar span{max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 11.5px/1.2 'Plus Jakarta Sans',sans-serif;color:#fff}
@media (max-width:380px){.p26-whobar{width:54px}.p26-whobar span{max-width:48px;font-size:10.5px}}
/* 5: 4 to 6 Elves wrap into 2 rows on phones (4: 2 + 2, 5 and 6: 3 + 3), every Elf in view. */
@media (max-width:520px){
  .p26-card .p26-choose.wrap>.p26-elves{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .p26-card .p26-choose.wrap>.p26-elves[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p26-card .p26-choose.wrap .p26-elf{padding:8px 4px}
  .p26-card .p26-choose.wrap .p26-elf img{width:40px;height:40px}
  .p26-card .p26-choose.wrap .p26-elf-txt b{font-size:13.5px}
  .p26-card .p26-choose.wrap .p26-elf-txt small{font-size:12px}
}
/* 9: the 2nd and later Elves' sightings in set-up: "Elf 2 of 4" and Back above, a small Skip under. */
.hqstart .qback,.hq-of{align-self:flex-start}
.hqstart .hq-skip{margin-top:14px}
/* 10: the latest sighting's tile in All sightings says Latest instead of repeating its picture. */
.p26-tile-pic.p26-tile-latest{display:grid;place-items:center;background:rgba(245,194,74,.14);border:2px solid var(--gold,#F5C24A)}
.p26-tile-pic.p26-tile-latest em.now{position:static;font-size:15px}
/* 10: the share pop-up fits its content, with Maybe later in view (no empty space above it). */
.tn-pop-in.share{display:flex;flex-direction:column;align-items:stretch;gap:12px;height:auto;min-height:0;max-height:calc(100svh - 24px);overflow:auto}
.tn-pop-in.share .gt-hang{margin:0 auto;flex:0 0 auto}
.tn-pop-in.share .sb-later{flex:0 0 auto;margin:0}
/* 16: the Me page. Elf pictures at least 32px, the Elf chips and buttons at least 44px tall, one Edit per row with a
   small menu (Change name, Remove). */
.tn-mep .tn-me-pic{width:34px;height:34px}
.tn-mep .tn-me-elf{min-height:44px;padding:4px 12px 4px 4px;font-size:14px;box-sizing:border-box}
.tn-mep .tn-me-elf img{width:32px;height:32px}
.tn-mep .tn-me-btn.tn-me-edit{min-height:44px;min-width:64px}
.tn-mep .tn-me-menu{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 4px}
.tn-mep .tn-me-menu .btn{min-height:44px}
/* 18: the calls card's main button is the red main button. */
.p26 .p26-more .btn.cl-feat-btn{background:#D9283E!important;color:#fff!important;border:2px solid #D9283E!important;box-shadow:0 4px 0 #9E1527!important}
.p26 .p26-more .btn.cl-feat-btn svg path{fill:#fff}
@media (max-width:520px){.p26-card .p26-choose.wrap>.p26-elves[style*="--n:5"],.p26-card .p26-choose.wrap>.p26-elves[style*="--n:6"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* 15 (and round 3, 4): the why? bubble always above the page (it showed under the set-up card's buttons and chips). */
body.tnew .why-pop{z-index:100000}
/* Round 2 (2 Nov 2026), 3: Elf names on one line (shrunk to fit by tracker-page.js fitElfNames), never cut inside a word;
   the children's line wraps at spaces only. */
.p26-card .p26-elf-txt{min-width:0;max-width:100%}
.p26-card .p26-elf-txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%;word-break:normal;overflow-wrap:normal}
.p26-card .p26-elf-txt small{white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:none}
.p26-whobar span{text-overflow:clip}
/* 17: the sticky bar solid (no text showing through), and "Elf HQ" on one line at 320. */
.p26-whobar{background:#0B1D4D}
.p26-navwrap .p26-nav,.p26 .p26-me{background:#0B1D4D}
@media (max-width:360px){.p26 .p26-tab span{white-space:nowrap;font-size:12px}.p26 .p26-tab{padding-left:2px;padding-right:2px}}
/* Round 2, 6: the free call's "Which Elf calls?": one card per Elf with its picture, name and children. */
.cl-elfpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0}
.cl-elfopt{display:flex;align-items:center;gap:10px;min-height:64px;padding:8px 12px;border-radius:16px;border:2px solid rgba(220,229,247,.6);background:transparent;color:#fff;text-align:left;cursor:pointer}
.cl-elfopt img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top;background:#fff;flex:0 0 auto}
.cl-elfopt span{display:flex;flex-direction:column;min-width:0}
.cl-elfopt b{font:800 16px/1.2 'Plus Jakarta Sans',sans-serif;white-space:nowrap}
.cl-elfopt small{font-size:13px;opacity:.85}
.cl-elfopt[aria-pressed="true"]{background:#F5C24A;border-color:#F5C24A;color:#0B1D4D}
/* Round 2, 12: Skip small and in view: at the top of the start screen, a small pill during the footage. */
.hq-toprow{display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px}
.hq-toprow:empty{display:none}
body.tnew .btn.hq-skip{width:auto;min-height:40px;padding:6px 16px;font-size:14px;align-self:flex-end;flex:0 0 auto}
/* Round 2, 11: "needed" on required boxes; red borders on the boxes to fill, matching the red message. */
.cl-need{font-size:12px;font-weight:700;color:#F5C24A;margin-left:4px}
body.tnew .cl-ob .cl-field input.bad,body.tnew .cl-ob .cl-field select.bad{border:2px solid #E5243B!important;box-shadow:0 0 0 3px rgba(229,36,59,.3)!important}
/* Round 2 (small family), 2: the calls card's main button solid red with centred words, in every state and place. */
body.tnew .cl-feat .btn.cl-feat-btn{background:#D9283E!important;color:#fff!important;border:2px solid #D9283E!important;box-shadow:0 4px 0 #9E1527!important;justify-content:center!important;text-align:center}
body.tnew .cl-feat .btn.cl-feat-btn span{flex:0 1 auto;text-align:center}
body.tnew .cl-feat .btn.cl-feat-btn svg path{fill:#fff}
/* Round 2 small fixes: the call age box never clipped at 375; the Listen first and Save buttons as buttons; the demo
   email never split at a hyphen. */
body.tnew .cl-field.cl-age select{min-width:7.5em;width:100%;box-sizing:border-box}
body.tnew .cl-grown{gap:8px}
body.tnew .cl-grown .btn.sm{min-height:44px}
body.tnew .mep-email{hyphens:none;overflow-wrap:anywhere;word-break:normal}
/* Round 2, 17: Continue, Watch again and Camera room stay completely hidden until the clip has played. */
#after[hidden],#after2[hidden]{display:none!important}
/* Round 3 test B. 13: the free call's Elf cards one column on phones, all the same height. 17: the calls card's price
   line smaller, so it fits in 2 lines at 375 in every language. 19: the age box never wider than its card. */
@media (max-width:520px){.cl-elfpick{grid-template-columns:1fr}}
.cl-elfpick{align-items:stretch}.cl-elfopt{height:100%;box-sizing:border-box}
body.tnew .cl-feat .cl-feat-price b{font-size:clamp(15px,4.4vw,19px);line-height:1.3}
body.tnew .cl-field.cl-age select{max-width:100%;min-width:0}
body.tnew .cl-field.cl-age{min-width:0;max-width:100%;box-sizing:border-box}
/* Round 3 test B, 1: at phone widths with 2+ Elves the chosen Elf sits on its own row above the tabs (a small pill),
   so the three tabs have the full width; labels may wrap to 2 lines at spaces, never overlap, in every language. */
@media (max-width:480px){
  .p26-navwrap.has-who{grid-template-columns:minmax(0,1fr)}
  .p26-navwrap.has-who.has-me{grid-template-columns:minmax(0,1fr) auto}
  .p26-navwrap.has-who .p26-whobar{grid-column:1/-1;flex-direction:row;justify-self:start;width:auto;max-width:100%;padding:4px 14px 4px 4px;gap:8px;border-radius:999px}
  .p26-navwrap.has-who .p26-whobar img{width:28px;height:28px}
  .p26-navwrap.has-who .p26-whobar span{max-width:none;font-size:13px}
  .p26 .p26-tab span{white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none;line-height:1.1;text-align:center;font-size:12.5px}
  .p26 .p26-tab{min-width:0;padding-left:4px;padding-right:4px}
}
@media (max-width:360px){.p26 .p26-tab span{font-size:11.5px}}
.p26 #tab-hq span{white-space:nowrap}
/* Round 4 test B, 1: a long one-word label ("Kameraraum", "Cameraruimte") breaks at its soft hyphen inside the
   highlight at 320, never clipped. */
.p26 .p26-tab span{hyphens:manual;-webkit-hyphens:manual;max-width:100%}
/* Round 3 test B, 9: from 1st December the Elf HQ file says "At home in Leeds" where the North Pole map was. */
.p26-radar.p26-homecard{display:grid;place-items:center;min-height:120px;background:linear-gradient(180deg,#14306E,#0B1D4D);border-radius:18px}
.p26-radar.p26-homecard p{margin:0;font:800 20px/1.3 'Plus Jakarta Sans',sans-serif;color:#fff;text-align:center;padding:16px}
/* Round 4 test B, 11: once scrolled, the sticky bar is compact on phones so it covers less of the cards
   (tracker-view.js compactBar): the Elf pill hides (the page title names the Elf), the tabs lose their pictures. */
@media (max-width:520px){
  .p26-navwrap.p26-compact .p26-whobar{display:none}
  .p26-navwrap.p26-compact .p26-tab svg{display:none}
  .p26 .p26-navwrap.p26-compact .p26-tab{min-height:44px;padding-top:4px;padding-bottom:4px}
  .p26 .p26-navwrap.p26-compact .p26-me{min-height:44px}
  .p26-navwrap.p26-compact .p26-nav{padding:5px}
}
/* Round 4 test B, 3: Elf names in the "Choose an Elf" chips wrap to 2 lines at spaces and hyphens, at 13px or more
   (tracker-page.js fitElfNames), never shrunk to 9.5px and never past the chip. */
.p26-card .p26-elf-txt b{white-space:normal;overflow:visible;overflow-wrap:normal;word-break:normal;hyphens:manual;line-height:1.15}
.p26-card .p26-elf-txt{grid-template-columns:minmax(0,1fr)}
.p26-card .p26-elf-txt b,.p26-card .p26-elf-txt small{min-width:0;max-width:100%}
.p26-card .p26-elf-txt b.p26-brk{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.p26-card .p26-elf{min-width:0}
/* Round 4 test B, 15: the chosen Elf's card no longer lifts, so the cards line up (Crumpet and Muffin). */
.p26-card .p26-elf[aria-pressed="true"]{transform:none}
/* Round 4 test B, 3: 5 or 6 Elves on a narrow phone in 2 columns (the 5th across both, no gap), so names such as
   "Pumpernickel" and "Sir Twinkletoes" fit at 13px or more. */
@media (max-width:400px){
  .p26-card .p26-choose.wrap>.p26-elves[style*="--n:5"],.p26-card .p26-choose.wrap>.p26-elves[style*="--n:6"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .p26-card .p26-choose.wrap>.p26-elves[style*="--n:5"]>.p26-elf:last-child{grid-column:1/-1}
}
/* Round 4 test B, 13: an example too long for a 320 screen ends in "..." instead of being cut mid-word (the
   favourite-thing example stays the owner's, matched to the sample call). */
body.tnew .cl-field input{text-overflow:ellipsis}
.cl-nowrap{white-space:nowrap}
.p26-count{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}   /* round 5 test B: 2 boxes on take-off day, no gap */
/* Round 5 test B, 4: the camera caption bars at 320/375 (it, de): "CAM 02", the place and the time are never cut.
   The top bar's long "REC ... CAMERA" label gives way (ends in "..."), the place wraps, the time and CAM never shrink. */
body.tnew .hud>span{min-width:0}
body.tnew .hud>span:last-child{flex:none}
body.tnew .hud.t>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
body.tnew .hud.b>span:first-child{white-space:normal;flex:0 1 auto}
@media (max-width:400px){body.tnew .cctv.big .hud{font-size:11.5px;letter-spacing:.03em}}
/* Round 5 test B, 13: a long Elf name on the Me page wraps beside its photo, never under it (nl at 320). */
body.tnew .tn-me-name:has(.tn-me-pic){display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:break-word}
body.tnew .tn-me-name:has(.tn-me-pic) .tn-me-pic{flex:none;margin-right:0}
/* Elf HQ calls card (Paul, 4 Nov 2026): one short row per child, "Call ready for Olivia", opening that call on its own page (calls.js callready); beside Studio it fills its half, "Make another call" at the foot */
.cl-readyrow{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;margin:0 0 10px;padding:10px 12px 10px 10px;border-radius:18px;border:2px solid rgba(31,168,85,.8);background:rgba(31,168,85,.14);color:#fff;text-align:left;cursor:pointer;font:800 18px/1.25 'Plus Jakarta Sans',sans-serif}
.cl-readyrow:hover{background:rgba(31,168,85,.24)}.cl-readyrow:focus-visible{outline:3px solid var(--cl-gold,#F5C24A);outline-offset:3px}.p26 .cl-panel .cl-readyrow{margin:0}
.cl-readyrow .cl-face{width:48px;height:48px;border-width:2px}.cl-readyrow-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.cl-readyrow-go{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--cl-green,#1FA855);display:grid;place-items:center;box-shadow:0 3px 0 var(--cl-green-d,#168043)}.cl-readyrow-go svg{width:22px;height:22px}
.p26 .cl-panel .cl-ready-phone{display:none}
@media (min-width:900px){.p26-pair .cl-panel:not(.bare){display:flex;flex-direction:column;gap:12px;padding:24px 20px}.p26-pair .cl-panel:not(.bare)>*{margin:0}.p26-pair .cl-panel:not(.bare)>#callB{margin-top:auto}
  .p26 .p26-pair .cl-panel .cl-ready-phone{display:grid;align-self:center}.p26-pair .cl-panel:not(.bare)>.cl-h{text-align:center}}
.tk .tn.cl-one{max-width:860px!important;margin-left:auto!important;margin-right:auto!important}.cl-one .cl-one-card{margin:14px 0 12px;background:rgba(8,20,58,.86)}.cl-one .cl-ai{margin:0;color:#DCE6FF}
/* The code screen: the address we sent to, large enough to spot a mistake (Paul, 6 Nov 2026). */
body.tnew .code-email{font-size:1.3em;font-weight:700;overflow-wrap:anywhere}