/* Elf Tracker home: ONE layout rule for the boxes (owner, 27 Oct 2026). Loaded last, after tracker-call.css
   and tracker-new-polish.css. The markup is js/tracker-new/tracker-view.js html():
     .tn-home         the grid: the hero row, the prize strip (phones), the tabs, the tab panel
     .tn-row          a row of two boxes (row()); .tn-tabpanel holds the tab's rows
   The rule: every row is ONE full-width box or TWO boxes side by side of EQUAL height (grid rows,
   align-items:stretch), on two equal columns from 1024px, one column below. A box that is missing today
   ('' or an empty element) leaves its partner full width, so a row is never ragged. One gap (--tn-gap)
   for every row and column, one radius (--tn-r) for every box. Decorations (snow caps, the candy stripe)
   sit inside or on top of a box and never change its size.
   tests/tracker-layout.test.mjs measures every box in headless Chrome at 1280, 1440, 1568 and 1920px
   on six dates and every tab (heights, edges, gaps, sideways scroll), and checks phones stay one column.
   The old two-column grid (.tn-grid, .tn-main, .tn-side, .tn-panel) and its many patches are gone. */

/* ---------- the grid ---------- */
.tn-home{--tn-gap:20px;--tn-r:22px;--tn-cols:1;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--tn-gap);margin-top:14px}
.tn-row,.tn-tabpanel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--tn-gap);min-width:0}
.tn-home>*,.tn-row>*,.tn-tabpanel>*{margin:0!important;min-width:0;box-sizing:border-box}
.tn-home .tn-winstrip{margin-top:0}
.tn-row:empty,.tn-row>:empty,.tn-tabpanel>:empty{display:none!important}

/* ---------- phones and tablets (below 1024px): one column, the boxes in their old order ----------
   The rows step aside (display:contents), so every box is one item of the column: the Elf Watch app and
   Follow cards come after the children's camera room, the Invite card after the tab panel, as before. */
@media (max-width:1023px){
  .tn-row{display:contents}
  .tn-home>.tn-row>.tn-invite{order:1}
  .tn-tabpanel .tn-app{order:1}
  .tn-tabpanel .tn-follow{order:2}
  .tn-home .tn-win{display:none}   /* the prize strip under the hero says it on narrow screens */
}
@media (min-width:1000px) and (max-width:1023px){.tn-home .tn-winstrip-wrap{display:block}.tn-home .tn-winstrip{display:flex}}

/* ---------- computers (1024px and wider): two equal columns, pairs of equal height ---------- */
@media (min-width:1024px){
  .tn-home{--tn-gap:24px;--tn-cols:2}
  .tn-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .tn-row>:only-child,.tn-row:has(>:empty)>*{grid-column:1/-1}
  .tn-home .tn-tabs{position:static}
}

/* ---------- the boxes: one radius; the tab's own boxes get the panel look they had inside the old panel ---------- */
.tn-home :is(.tn-hero,.tn-win,.tn-invite,.tn-spot,.tn-map,.tn-kids,.tn-app,.tn-follow,.cl-feat,.cl-panel:not(.bare)){border-radius:var(--tn-r)}
/* the tab's picture box (the sighting, the village, the globe): the candy-cane frame of the old panel */
.tn-home :is(.tn-spot,.tn-map){position:relative;padding:16px;border:10px solid transparent;box-shadow:0 18px 40px rgba(0,0,0,.35);
  background:linear-gradient(180deg,#14306F,#0F2459) padding-box,repeating-linear-gradient(45deg,#D9283E 0 14px,#fff 14px 28px) border-box}
.tn-home .tn-kids{padding:16px;background:linear-gradient(180deg,#14306F,#0F2459);border:2px solid rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.35)}
/* the call box: the feature card (or the calls list round it) fills its half; the button at the bottom */
.tn-home .cl-panel{display:flex;flex-direction:column}
.tn-home .cl-panel.bare>.cl-feat:only-child{flex:1 1 auto;margin:0}
.tn-home .cl-feat{display:flex;flex-direction:column}
.tn-home .cl-feat>:nth-last-child(2){margin-bottom:14px}
.tn-home .cl-feat>.cl-feat-btn{margin-top:auto}
.tn-home :is(.tn-win,.tn-invite){align-content:center}

/* ---------- inside the boxes on computers: content balanced when a box is stretched to its partner ---------- */
@media (min-width:1024px){
  /* the elf card beside the prize: the "next spotted?" bubble under the words, so the name has room */
  .tn-row>.tn-hero:not(:only-child){grid-template-columns:auto minmax(0,1fr);align-content:center}
  .tn-row>.tn-hero:not(:only-child) .face{width:120px;height:120px}
  .tn-row>.tn-hero:not(:only-child) .tn-sleeps{grid-column:2;flex-direction:row;justify-self:start;max-width:none;text-align:left;gap:10px}
  .tn-row>.tn-hero:not(:only-child) .tn-sleeps b{font-size:26px}
  .tn-hero{align-content:center}

  /* the sighting: the picture on the left, the words and all the sightings beside it (the last row
     takes the spare height, so nothing leaves a hole under the words) */
  .tn-home .tn-spot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto repeat(6,auto) 1fr;column-gap:22px;align-items:start}
  .tn-spot>*{grid-column:2}
  .tn-spot>.tn-k{grid-column:1/-1}
  .tn-spot>.cctv{grid-column:1;grid-row:2/-1;margin-top:8px}
  .tn-spot>.tn-h3{margin-top:18px}
  .tn-spot>.tn-cap{margin-top:8px}
  .tn-spot>.tn-share{justify-self:start}

  /* the village and the globe: the picture on the left, the words beside it, in the middle */
  .tn-home .tn-map{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:22px;align-items:center}
  .tn-map>*{grid-column:2;margin-top:0;margin-bottom:0}
  .tn-map>.stage{grid-column:1;grid-row:1/-1;align-self:start}
  .tn-map>.tn-k,.tn-map>.tn-eve{grid-row:2;margin-bottom:10px}
  .tn-map>.tn-miles{grid-row:3;text-align:left;font-size:19px;line-height:1.4}
  .tn-map>.tn-miles span{font-size:17px}
  .tn-map>.tn-eve{align-items:flex-start;text-align:left}

  /* the Elf Watch app: the picture beside the words, cropped to fill its side, so it never sets the
     height of the row; the button at the bottom */
  .tn-home .tn-app{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .tn-app-pic{min-height:220px}
  .tn-app-pic img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .tn-app-txt{display:flex;flex-direction:column;padding:20px 22px}
  .tn-app-txt>.btn.red{margin-top:auto}

  /* the children's camera room: the TV beside the words */
  .tn-home .tn-kids{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)!important;column-gap:20px;align-items:center}
  .tn-home .tn-kids h2{font-size:26px}

  /* Follow the elves: the words and the three buttons in the middle of the box */
  .tn-home .tn-follow{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:22px}
  .tn-home .tn-follow .tn-socials{width:100%;max-width:560px;margin:8px auto 0}
}