/* tracker.css: /new-year-timezones/, the live "Where Is It New Year Right Now?" tracker. Loaded after city.css and built on its
   tokens (colours, fonts, glass cards). The DOM contract is at the top of assets/tracker.js.

   Nothing may move when the script brings the page to life or a midnight arrives (Task 2.3):
   - every state rule below changes paint only (colour, background, box-shadow);
   - every slot the script fills has a fixed size before it is filled: the badge in each row, and the two layers of the live
     box, which share one grid cell so that switching between them never changes its height;
   - the one animation (a row lighting up when its midnight arrives) is switched off for reduced motion. */

.tracker-page {
  --tracker-gold: #FBBF24;                       /* the midnight line, the countdown and the rows already in the new year */
  --tracker-gold-wash: rgba(251,191,36,0.07);
  --tracker-gold-flash: rgba(251,191,36,0.32);
  --tracker-next-wash: rgba(192,132,252,0.10);
}
[data-theme="light"] .tracker-page {
  --tracker-gold: #92400e;                       /* 5.5:1 or better on the light background and its gold wash (small text) */
  --tracker-gold-wash: rgba(180,83,9,0.06);
  --tracker-gold-flash: rgba(180,83,9,0.22);
  --tracker-next-wash: rgba(124,58,237,0.07);
}

/* Light theme: city.css's --ink-accent #c2352f is short of 4.5:1 on two tints of this page, so the city links in the rows take a
   shade darker: on the celebrated wash #ece7e7 4.46:1 becomes 5.25:1, on the next wash #e8e3f4 4.35:1 becomes 5.12:1, and on the
   page 5.66:1. (The quick answer's label, on its tint #e6e6eb, is darkened for every info page in city.css since Task 5.2.) */
[data-theme="light"] .tracker-place-list a { color: #b02e29; }

/* Read by screen readers, invisible on screen: the announcer, and on phones the first two table headings (offset and places:
   their cards say what they are). From 760 px the headings are shown again (the real table, below). */
.tracker-sr, .tracker-table thead th:nth-child(-n+2) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ===== The live box: what is next, and how long until it ===== */
.tracker-live { display: grid; padding: 1rem 1.15rem 1.1rem; margin: 0; }
.tracker-live__layer { grid-area: 1 / 1; min-width: 0; }
.tracker-live__caption { font-size: .8rem; line-height: 1.4; color: var(--text-secondary); }
.tracker-live__zone {
  margin-top: .25rem;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--text);
  height: 2.7em; overflow: hidden;                        /* two lines, filled or not */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
@media (max-width: 379.98px) {
  .tracker-live__zone { height: 4.05em; -webkit-line-clamp: 3; }   /* three lines: six places and an offset do not fit in two (the UTC+8 label, 69 characters, needs 369 px) */
}
.tracker-live__clock {
  margin-top: .35rem;
  font-family: var(--font-display); font-size: clamp(1.7rem, 8.2vw, 2.75rem); font-weight: 800; letter-spacing: -.01em;
  line-height: 1.1; height: 1.1em; white-space: nowrap; overflow: hidden;   /* one line: "Dec 31, 10:00 UTC" or "365d 23:59:59" */
  font-variant-numeric: tabular-nums lining-nums; color: var(--tracker-gold);
}
/* Without the script: the static layer (the first midnight). With it (data-phase is set): the live layer. */
.tracker-live__now { visibility: hidden; opacity: 0; }
.tracker-page[data-phase] .tracker-live__static { visibility: hidden; opacity: 0; }
.tracker-page[data-phase] .tracker-live__now { visibility: visible; opacity: 1; }
.tracker-page[data-phase="after"] .tracker-live__now .tracker-live__caption { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .tracker-live__now { transition: opacity .35s ease; }  /* the live layer fades in; the static one goes at once, so they never overlap */
}

/* ===== The table on phones: one card per row, the three times in aligned columns under a sticky header ===== */
/* The fixed site header and the sticky table header cover up to 105 px (320 px wide, where the table headings wrap): whatever
   scrolls into view, a focused link or a row reached by its anchor (#utc-plus-14), stops below them. */
@media (max-width: 759.98px) {
  html { scroll-padding-top: 7rem; }
}
.tracker-table { display: block; width: 100%; border-collapse: collapse; margin: 1.25rem 0 .75rem; font-size: .9rem; }
.tracker-table tbody { display: block; }
.tracker-table thead {
  display: block; position: sticky; top: 3.8125rem; z-index: 2;         /* right under the fixed site header (60 px + its border) */
  background: var(--header-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.tracker-table thead tr, .tracker-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .5rem; }
.tracker-table thead tr { padding: .5rem .6rem .45rem; border-bottom: 1px solid var(--glass-border); }
.tracker-table thead th {
  display: block; text-align: left;
  font-family: var(--font-display); font-size: .66rem; font-weight: 700; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-accent);
}
.tracker-row { padding: .7rem .6rem .75rem; border-bottom: 1px solid var(--hairline); }
.tracker-row > th, .tracker-row > td { display: block; min-width: 0; text-align: left; font-weight: 400; }
.tracker-row > .tracker-zone { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.tracker-places { grid-column: 1 / -1; margin-top: .2rem; line-height: 1.45; color: var(--body-text); overflow-wrap: anywhere; }
/* "Dec 31, 23:00" is 79 px at .75rem: it fits a third of a 320 px screen. A wider fallback font wraps it, never overlaps. */
.tracker-utc, .tracker-local {
  margin-top: .4rem; font-size: .75rem; line-height: 1.4; color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.tracker-utc-suffix { display: none; }
@media (min-width: 360px) {
  .tracker-table thead tr, .tracker-row { column-gap: .75rem; }
  .tracker-utc, .tracker-local { font-size: .8rem; }
}
@media (min-width: 641px) {
  .tracker-table thead { top: 4.3125rem; }                            /* the site header is taller from here (city.css) */
}

.tracker-offset {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25;
  font-variant-numeric: tabular-nums lining-nums; color: var(--text); white-space: nowrap;
}
/* The state and the countdown: a fixed box, so neither its words nor its digits move anything outside it. Its content starts at
   its left edge, so the state word, which changes, never moves either: only what follows it does. */
.tracker-badge {
  flex: none; width: 9.5rem; display: inline-flex; justify-content: flex-start; align-items: baseline;
  white-space: nowrap; overflow: hidden;
  font-size: .78rem; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.tracker-time:not(:empty) { margin-left: .45em; }                     /* only a filled countdown takes the space before it */
.tracker-place-list a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.tracker-country { color: var(--text-secondary); }
.tracker-note { display: block; margin-top: .3rem; font-size: .8125rem; line-height: 1.5; color: var(--text-secondary); }
.tracker-source { font-size: .8125rem; color: var(--text-secondary); }

/* ===== States (set by assets/tracker.js; paint only) ===== */
.tracker-row[data-state="celebrated"] { background: var(--tracker-gold-wash); }
.tracker-row[data-state="celebrated"] .tracker-offset,
.tracker-row[data-state="celebrated"] .tracker-state { color: var(--tracker-gold); }
.tracker-row[data-state="celebrated"] .tracker-state::before {
  content: ''; display: inline-block; width: .62em; height: .34em; margin: 0 .35em .18em 0;
  border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
/* The next row: the midnight line across its top, and the countdown in full ink. */
.tracker-row[data-state="next"] { background: var(--tracker-next-wash); box-shadow: inset 0 2px 0 var(--tracker-gold); }
.tracker-row[data-state="next"] .tracker-state,
.tracker-row[data-state="next"] .tracker-time { color: var(--text); }
/* A midnight that arrives while the page is open: the row flashes gold once. */
@keyframes tracker-arrive { from { background-color: var(--tracker-gold-flash); } to { background-color: var(--tracker-gold-wash); } }
.tracker-row[data-just-celebrated] { animation: tracker-arrive 1.8s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .tracker-row[data-just-celebrated] { animation: none; }
}

/* ===== Wider screens: a real table ===== */
@media (min-width: 760px) {
  .tracker-table { display: table; font-size: .875rem; }
  .tracker-table thead {
    display: table-header-group; position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .tracker-table tbody { display: table-row-group; }
  .tracker-row, .tracker-table thead tr { display: table-row; padding: 0; border: 0; }
  .tracker-table th, .tracker-table td,
  .tracker-row > th, .tracker-row > td, .tracker-row > .tracker-zone {
    display: table-cell; padding: .7rem .6rem; vertical-align: top; border-bottom: 1px solid var(--hairline);
  }
  .tracker-table thead th, .tracker-table thead th:nth-child(-n+2) {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
    display: table-cell; padding: .55rem .6rem; font-size: .7rem; letter-spacing: 1.5px;
    border-bottom: 1px solid var(--glass-border);
  }
  .tracker-badge { display: flex; width: 8.5rem; min-height: 1.4em; margin-top: .2rem; font-size: .72rem; }   /* one line of its own text (line-height 1.4): the same height empty and filled */
  .tracker-places, .tracker-utc, .tracker-local { margin-top: 0; }
  .tracker-utc, .tracker-local { font-size: .875rem; white-space: nowrap; }
  .tracker-row[data-state="next"] { box-shadow: none; }
  .tracker-row[data-state="next"] > * { box-shadow: inset 0 2px 0 var(--tracker-gold); }
}

@media (forced-colors: active) {
  .tracker-row[data-state="next"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}