/* us8zone-comparison-grid.css — styling for the 8-zone comparison grid
   markup rendered by times/time-zones/usa-canada/us8zone-comparison-grid.php.
   Linked per-page from that page's own head-extra editable region (see
   dwt/main-content.dwt) — never from main-content-layout.css, which is
   scoped to the DWT's own structural chrome only, not page content.

   Built entirely from css2/theme2.css's existing design tokens (--border,
   --text, --dim, --accent, --font-sans, --font-ui) — no colors of its own
   beyond the one exception below, so dark theme support comes for free
   through theme2.css's own [data-theme=dark] overrides; nothing here needs
   its own dark-theme block. (--surface/--radius/--shadow used to be in
   this list too — .us8zone-card had a background/border/radius/shadow
   before cards went borderless; removed once nothing in the file
   referenced them anymore.)
   ONE deliberate exception: .us8zone-name's border-bottom uses two
   literal colors rather than tokens — matched directly from the legacy
   page's own heading rule (confirmed on the live page in both themes,
   not guessed), since theme2.css doesn't define variables for either.
   Still theme-adaptive, just via [data-theme="dark"] overriding the
   color directly instead of going through a token — see that rule just
   below this one. (Earlier version of this note flagged the dark-theme
   color as unconditionally applied everywhere, measuring ~1.6:1
   contrast in light theme — that's resolved now: light theme gets its
   own, more saturated color instead of reusing dark's pastel one.)

   Depends on the PHP file's fixed render order — Hawaii(1), Alaska(2),
   Pacific(3), Mountain(4), Central(5), Eastern(6), Atlantic(7),
   Newfoundland(8) — do not change one file without the other.

   Narrow/medium: plain 1 or 2 column grid, natural DOM order. Since that
   order is already strict west-to-east chronological, auto-flow alone
   produces the right reading order with zero per-item rules.

   Wide (>=650px): a real 4-column grid across 3 rows, but only Pacific
   through Eastern (items 3-6) fill row 3 normally. Hawaii (1) and
   Newfoundland (8) — the earliest and latest zones — are explicitly placed
   at column 1 and column 4 of row 1; Alaska (2) and Atlantic (7) the same
   on row 2. Columns 2-3 on those two rows are left empty on purpose — that
   gap IS the "relaxed" look from the live site's own layout, achieved by
   leaving grid cells unoccupied rather than the live site's hardcoded
   pixel margins (which only worked at one exact content width).
   650px chosen (not the original 1020px) so Pacific-Mountain-Central-
   Eastern stay on one line down to a much narrower viewport, since a
   single card stays functional even under 150px wide — see
   feedback/project memory for the 484px-vs-232px cliff this replaced.

   Card padding/font-size tighten by CONTAINER query (@container), keyed
   to each CARD's own rendered width, not the page viewport. This matters
   because column count changes at 340px/650px, so identical viewport
   widths produce very different actual card widths depending on which
   tier is active — a card can be narrow on a wide screen: content-max
   caps the column at 1100px (main-content-layout.css), so 4-column cards
   never exceed ~260px no matter how wide the browser gets, yet were
   getting full desktop padding at every width until this changed. A
   container can't be styled by a query of its own size though — only
   its descendants can — which is why padding lives on the new
   .us8zone-card-body wrapper below rather than .us8zone-card itself.

   Grid gap tightens the same way, keyed off #zone-content's width (the
   nearest usable ancestor container — effectively the same number as
   the grid's own rendered width): @container zone-row (max-width:560px)
   below. The 4-column tier used to force gap tight unconditionally too
   (content-max meant it was always past that 560px threshold anyway,
   so the query alone would never have fired there) — removed per
   direct request, so that tier now just gets the base 20px gap, same
   as everywhere else the 560px query doesn't match. */

.us8zone-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 32px 0;
}

@media (min-width: 340px) {
  .us8zone-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 650px) {
  .us8zone-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    /* No gap override here (removed per direct request) — #zone-content
       is always well above the 560px zone-row threshold once 4 columns
       are active (starts at 618px at this tier's own 650px floor, only
       grows from there), so the base 20px gap below always applies;
       there's no width in this tier where the tighter 12px would fire
       anyway. */
  }
  .us8zone-grid > :nth-child(1) { grid-row: 1; grid-column: 1; }  /* Hawaii */
  .us8zone-grid > :nth-child(8) { grid-row: 1; grid-column: 4; }  /* Newfoundland */
  .us8zone-grid > :nth-child(2) { grid-row: 2; grid-column: 1; }  /* Alaska */
  .us8zone-grid > :nth-child(7) { grid-row: 2; grid-column: 4; }  /* Atlantic */
  .us8zone-grid > :nth-child(3) { grid-row: 3; grid-column: 1; }  /* Pacific */
  .us8zone-grid > :nth-child(4) { grid-row: 3; grid-column: 2; }  /* Mountain */
  .us8zone-grid > :nth-child(5) { grid-row: 3; grid-column: 3; }  /* Central */
  .us8zone-grid > :nth-child(6) { grid-row: 3; grid-column: 4; }  /* Eastern */

  /* 4-zone pages (Pacific/Mountain/Central/Eastern's own pages, each
     showing just this contiguous set via $US8_ZONES_TO_SHOW in
     us8zone-comparison-grid.php) render only 4 cards. Natural DOM order
     already places them correctly across the 4 columns above — these
     zones sit at positions 3-6 in the 8-item order, i.e. the same plain
     row-3 placement the rules above already give them — so no explicit
     positioning is needed, just resetting the 8-item rules above, which
     would otherwise still match a 4-item grid's first 4 children by pure
     selector matching. Double-classed (.us8zone-grid.us8zone-grid--4) so
     this always wins regardless of source order — same standing rule as
     the specificity note elsewhere in this file family. */
  .us8zone-grid.us8zone-grid--4 > :nth-child(1),
  .us8zone-grid.us8zone-grid--4 > :nth-child(2),
  .us8zone-grid.us8zone-grid--4 > :nth-child(3),
  .us8zone-grid.us8zone-grid--4 > :nth-child(4) {
    grid-row: auto;
    grid-column: auto;
  }
}

/* Ancestor container for .us8zone-grid's own gap query just below —
   #zone-content is the nearest available element wrapping the grid, and
   its width is effectively the same number as the grid's own rendered
   width (the grid only adds vertical margin, no horizontal difference).
   Purely a query concern — main-content-layout.css still owns
   #zone-content's actual sizing (width/padding/grid-area), untouched
   here. */
#zone-content {
  container-type: inline-size;
  container-name: zone-row;
}

@container zone-row (max-width: 560px) {
  /* Matters for the 2-column tier only in practice — 560px is where a
     2-column card ((gridWidth - 20px gap) / 2) drops under 270px. The
     4-column tier is already unconditionally tight above and never
     reaches this width anyway; the 1-column tier rarely crosses 270px
     until viewports get tiny, which .us8zone-card's own query below
     still catches correctly since it's keyed to the card, not this. */
  .us8zone-grid { gap: 12px; }
}

.us8zone-card {
  /* No background/border/radius/shadow, per direct request — cards sit
     directly on the page background now, no visible card boundary at
     all. box-shadow and border-radius weren't explicitly asked about,
     but removed them too: a shadow with nothing casting it and rounded
     corners on an invisible box would just be leftover visual noise, not
     a real "later" step to revisit. */
  overflow-wrap: break-word;
  /* Grid items default to min-width:auto, which refuses to shrink below
     the item's own content — Newfoundland's card has the longest text of
     all 8 zones, so without this its column claimed extra width from the
     1fr distribution before the others got a share, producing uneven
     columns and a few px of page-level horizontal scroll at the 650px
     tier's narrow end. min-width:0 lets overflow-wrap above actually do
     its job instead. */
  min-width: 0;
  /* Makes this card queryable by its OWN rendered width — see
     .us8zone-card-body below for why the padding itself lives one level
     down instead of right here. */
  container-type: inline-size;
  container-name: zone-card;
}

.us8zone-card-body {
  /* Roomy-tier padding (card wider than the @container query below). */
  padding: 15px;
  /* A SECOND, nested container (inside .us8zone-card above) — deliberate,
     not redundant. Container query units (cqw/cqh) are based on the
     container's own CONTENT-BOX, padding already excluded (confirmed by
     direct test, not assumed) — so .us8zone-offsets below, a child of
     THIS element, now scales off "card width minus whatever padding is
     currently active" automatically, instead of off .us8zone-card's raw
     width the way it used to. That's what let the font-scaling ratio
     there go from a padding-worst-case-conservative 3.75cqw up to a
     genuinely width-independent ~4.2cqw — see that rule's own comment.
     Only .us8zone-offsets uses cqw inside this element right now; if
     something else here ever needs cqw too, double check it wants THIS
     container (content-box) and not .us8zone-card's (border-box) before
     assuming it's fine. */
  container-type: inline-size;
}

.us8zone-name {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  /* Separator line under the zone name, matching the legacy page's
     look — including its exact 5px thickness and its two literal
     colors (see the header comment on why this one line doesn't use a
     token). Light theme's value here is the default, matching
     theme2.css's own "light is default, [data-theme=dark] overrides"
     convention — see the override just below.
     Sits inside .us8zone-card-body's own padding (not bled out to the
     card's true edge) — a deliberate simplification: at the tight
     250px-and-under padding tier that's only a 1px inset either way,
     and it was fine to accept the same inset at the roomier 15px tier
     too rather than add a bleed technique for it. */
  padding-bottom: 8px;
  border-bottom: 5px solid rgb(13, 0, 255);
}
[data-theme="dark"] .us8zone-name {
  border-bottom-color: rgb(165, 180, 252);
}
.us8zone-name a {
  color: var(--text);
  text-decoration: none;
}
/* Dark theme only, per direct request — light theme keeps the plain
   var(--text) color above untouched. Same literal rgb(165,180,252) as
   the separator line's fixed color (see the header comment), just
   scoped here instead of applied unconditionally like that one.
   Placement matters: this and :hover below have EQUAL specificity (one
   class + one attribute/pseudo-class each), so whichever comes LAST in
   the file wins a tie on dark theme while hovering — has to stay above
   :hover, or hovering in dark theme would show this color instead of
   the intended accent highlight. */
[data-theme="dark"] .us8zone-name a {
  color: rgb(165, 180, 252);
}
.us8zone-name a:hover {
  color: var(--accent);
}

.us8zone-offsets {
  font-family: var(--font-ui);
  /* Scales with .us8zone-card-body's own content-box width (cqw here
     resolves against THAT container, not .us8zone-card — see its own
     container-type comment for why), so the longest line ("Hawaii-
     Aleutian Standard Time - HAST (UTC-10)", ~252.4px at 11px, confirmed
     the longest of all 16 offset lines) keeps fitting one line
     continuously as the card narrows, instead of only at specific
     breakpoints.

     4.2cqw. Used to be lower (3.75, before that 3.6) and needed
     re-deriving almost every time the card padding or its own
     threshold changed, because the old container (.us8zone-card) is
     padding's OUTSIDE — its width doesn't reflect however much padding
     is currently eating into the actual available space, so the ratio
     had to be conservative enough to survive the WORST-case padding
     everywhere, all the time. Once card-body's content-box became the
     container instead, that problem goes away structurally: content-box
     width already has padding subtracted, whatever the current tier's
     padding value is, so this ratio no longer needs to know or guess
     about padding at all. Safety condition is now just 11 x R / 1100
     <= 1 -> R <= ~4.357 (zero margin) — width-independent, no
     per-threshold recompute needed anymore. 4.2 keeps a real margin
     below that (confirmed live across the full 140-299px card range,
     including right at the padding tier's own boundary, previously the
     one genuinely fragile spot). 11px ceiling still kept as a sensible
     cap for a wider context; 5px floor still deliberately low, same
     reasoning as before — this content is secondary, shrinking hard on
     narrow cards is an accepted tradeoff, per direct request. */
  font-size: clamp(5px, 4.2cqw, 11px);
  line-height: 1.5;
  color: var(--dim);
  margin: 0 0 16px;
}

.us8zone-city + .us8zone-city {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.us8zone-city-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 2px;
}
.us8zone-city-name a {
  color: var(--text);
  text-decoration: none;
}
.us8zone-city-name a:hover {
  color: var(--accent);
}

/* "Los Angeles" only (see the PHP file's own comment on why) — the base
   size for its non-capital letters, deliberately smaller than every
   other city's 14px above. Measured against the SAME font-fallback risk
   used to size the 80px name column: worst case (Arial, if Outfit fails
   to load) for "L" + "os " + "A" + "ngeles" at 13.5px/13px/13.5px/13px
   comes to 72.2px, down from 76.3px at a uniform 14px. */
.us8zone-city-name--tight {
  font-size: 13px;
}
.us8zone-cap {
  font-size: 13.5px;
}

.us8zone-city-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--dim);
  margin-bottom: 0;
}

.us8zone-city-time {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 500;
  /* Light theme only, per direct request — --accent (theme2.css's
     sitewide token) only reached 4.94:1 contrast against a white card,
     not vivid enough. Deliberately NOT changing --accent itself (used
     far beyond this page) — this is a literal color specific to this
     element instead, matched from #footer_gold's own actual light-theme
     background (rgb(0,17,53), confirmed live — despite the "gold" in
     that ID, a legacy name; 18.56:1 contrast here). Dark theme keeps
     var(--accent) unchanged below, since that was already confirmed
     good. */
  color: rgb(0, 17, 53);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  /* Lowercases the am/pm suffix Intl renders in uppercase, matching the
     legacy page's look — see css2/zone-hero.css's .zone-clock for the
     same fix on the Hero's own clock. Digits/colons have no case so
     this only affects the am/pm letters — no JS/span needed. */
  text-transform: lowercase;
  /* Same word-spacing trick as .zone-clock (css2/zone-hero.css) — pulls
     am/pm closer to the digits using the one natural space Intl's own
     output has there, no span needed. em keeps it proportional across
     this element's own 22px/20px size tiers. */
  word-spacing: -0.15em;
}
[data-theme="dark"] .us8zone-city-time {
  color: var(--accent);
}

.us8zone-city-date {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--dim);
  margin-top: 0;
}

/* Kept at the end of the file, after every base rule it touches — CSS
   resolves equal-specificity ties by source order, not by whether a
   @container/@media condition is true, so this must come after
   .us8zone-city-time's own base rule above it or that 22px would win
   regardless of card width. (.us8zone-card-body's padding override
   happened to already work when this block sat higher up, purely
   because its base rule is declared earlier in the file — easy to trip
   over the same way again if another property gets added here later.) */
@container zone-card (max-width: 250px) {
  /* Fires purely off this one card's own width, so it's automatically
     correct no matter which column tier (1/2/4) produced that width —
     no per-tier viewport math needed, unlike the old
     @media(max-width:559px) version this replaced. Threshold tuned
     interactively several times (started at 270px) — see
     .us8zone-offsets above for the font-scaling math tied to this
     number; it has a documented safe range rather than needing a
     recheck on every change. */
  .us8zone-card-body { padding: 16px 1px; }
  .us8zone-city-time { font-size: 20px; }
}

@container zone-card (min-width: 215px) {
  /* Enough room for the city name and the label/time/date stack to sit
     side by side instead of all stacked — inspired by the legacy page's
     layout, rebuilt on this file's own classes/spacing rather than
     copied. Narrower cards never match this and keep the plain vertical
     stack untouched — .us8zone-city-info exists purely so label+time+
     date can move as one flex item here; see the PHP file's own
     comment on that wrapper. Independent of (and deliberately lower
     than) the card padding query above, currently 250px — the two used
     to share one number, tried apart per direct request, then each
     tuned separately since (this one: 270 -> ... -> 230 -> 215; full
     step-by-step history in project memory, not worth repeating here).

     The WORST CASE here is the widest TIME text ("11:49:09 PM" style,
     ~121-122px at this tier's 20px font), not the city name — the name
     column is a fixed 75px regardless of which city it holds (see
     .us8zone-city-name below), so it's already safe on its own. Empty
     floor found by testing live, all 14 cities, 12h mode: 207px card
     wraps 6/14 (the "1X:XX:XX xM" ones), 209px is clean. 215px keeps
     ~6-8px above that tested edge — re-verify live (not just by this
     math) if this ever gets tuned narrower again. */
  .us8zone-city {
    display: flex;
    align-items: center;
    /* Was 16px — dropped to 10px per direct request: right above the
       card padding query's own threshold (currently 250px, see above),
       .us8zone-city-time (22px font here, the roomy-tier size) could
       come up ~2px short of fitting "H:MM:SS xm" on one line — caught
       live at a 252px card ("08:33:19 PM" needed 133.1px, had 131px).
       10px gives real margin above the 12px break-even point found
       while testing, without being an unnecessarily drastic cut —
       narrower gaps than 12px made no further difference once the info
       column already fits its content on one line. */
    gap: 10px;
  }
  .us8zone-city-name {
    /* The 0 0 2px bottom margin above was for spacing in the stacked
       layout; here it would just nudge the name off-center against the
       info block's height. */
    margin: 0;
    /* Fixed, not auto — otherwise each row's info block starts wherever
       that row's own name happens to end, so a card mixing "Denver" and
       "Los Angeles" gets a ragged, unaligned second column. 75px fits
       "Los Angeles" — the longest name across all 8 zones' cities, and
       the reason this needs to be a fixed width at all — via its own
       bespoke per-letter sizing (.us8zone-city-name--tight/.us8zone-cap
       on the PHP side): worst case (Arial font-fallback) measured at
       72.2px, ~2.8px of spare room at 75px. Every OTHER city name here
       is plain text at the shared 14px and comfortably narrower still
       (Anchorage, the next-longest, is ~69px even in the worst-case
       fallback font) — Los Angeles is the sole reason this number can't
       go lower without either shrinking it further or accepting a
       tighter margin. Applies site-wide (not per-card) since one shared
       number is simpler than measuring each card's own longest name,
       and every card's info column ends up aligned as a side effect
       anyway. flex-shrink:0 keeps it from being squeezed narrower under
       pressure — better to let a name wrap within its own column than
       let the whole layout drift. */
    flex: 0 0 75px;
  }
}