/* 420.menow.us — dark map, large type (19px root / 20px body), one accent: leaf green. */
:root{--bg:#0d1210;--panel:#151c18;--ink:#eef3ee;--dim:#a9b6ad;--leaf:#3cb043;--yel:#f5d300;--red:#d7263d;--rule:#2a3530}
*{box-sizing:border-box}
html{font-size:19px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 20px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--leaf)}
.top,main,footer{max-width:1400px;margin:0 auto;padding:0 16px}
.top{padding-top:28px}
h1{font-size:clamp(2rem,5vw,3.4rem);margin:0 0 .2rem;letter-spacing:-.01em}
.leaf{color:var(--leaf)}
.sub{color:var(--dim);margin:0 0 1rem;font-size:1.05rem}
.now{background:var(--panel);border:1px solid var(--rule);border-left:6px solid var(--leaf);border-radius:12px;padding:16px 20px;margin:0 0 16px}
.kicker{margin:0;color:var(--dim);font-size:1rem;text-transform:uppercase;letter-spacing:.08em}
.headline{font-size:clamp(1.4rem,3.2vw,2.2rem);font-weight:700;margin:.2rem 0 .3rem;line-height:1.25}
.next,.you{margin:.25rem 0;font-size:1.1rem}
.mapwrap{position:relative;margin:0;background:#0a0f0d;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
#map{display:block;width:100%;height:auto;touch-action:pan-y;cursor:grab}
#map .zone{stroke:#0a0f0d;stroke-width:.4;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .8s}
#map .zone:hover{stroke:#fff;stroke-width:1.4}
#map .zone.now420{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{filter:brightness(1.35)}}
#map .borders{fill:none;stroke:rgba(0,0,0,.55);stroke-width:.6;vector-effect:non-scaling-stroke;pointer-events:none}
#map .sphere{fill:#0f1a16}
figcaption{padding:8px 14px;color:var(--dim);font-size:.95rem}
.tip{position:absolute;pointer-events:none;background:#000d;color:#fff;border:1px solid var(--leaf);border-radius:8px;padding:8px 12px;font-size:1rem;max-width:280px}
.legend{display:flex;align-items:center;gap:12px;margin:14px 0 4px;font-size:1rem}
.legend .bar{flex:1;height:16px;border-radius:8px;background:linear-gradient(90deg,var(--leaf),var(--yel) 17%,#f08a24 55%,var(--red))}
.legendtext{color:var(--dim);font-size:1rem;margin:0 0 24px}
.sw{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px}
.sw.g{background:var(--leaf)}.sw.y{background:var(--yel)}.sw.r{background:var(--red)}
h2{font-size:1.5rem;margin:1.5rem 0 .6rem}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:1.02rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule)}
th{color:var(--dim);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
td .dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:-2px}
tr.is420 td{font-weight:700;color:var(--leaf)}
footer{color:var(--dim);font-size:.95rem;padding-top:24px;padding-bottom:40px}
@media (prefers-reduced-motion:reduce){#map .zone{transition:none}#map .zone.now420{animation:none}}
@media (max-width:640px){
  html{font-size:18px} body{font-size:19px}
  .now{padding:14px 16px} .headline{font-size:1.45rem}
  .legend{font-size:.95rem} th,td{padding:8px 6px}
  .tip{max-width:230px}
}
.youbox{background:var(--panel);border:1px solid var(--rule);border-left:6px solid #fff;border-radius:12px;padding:14px 20px;margin:0 0 16px}
.youwhere{font-size:1.25rem;margin:.2rem 0}
.youclock{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:700;font-variant-numeric:tabular-nums;margin:.1rem 0 .2rem;letter-spacing:.01em}
#map .zone.mine{stroke:#fff;stroke-width:2.2;vector-effect:non-scaling-stroke}
tr.isyou td{background:rgba(255,255,255,.06)}
.youtag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:#fff;color:#0d1210;font-size:.85rem;font-weight:700}
/* World clock band — compact chips: city, time, distance; accent = distance from 4:20. */
.clocks{margin:0 0 16px}
.clockgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.clock{--acc:#3cb043;display:flex;flex-direction:column;padding:8px 12px 8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.09);
  border-left:3px solid var(--acct,var(--acc));background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01))}
.clock .city{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#e7ece8;line-height:1.25}
.clock .city small{letter-spacing:.04em;text-transform:none;font-weight:400;color:var(--dim)}
.clock .time{font-size:1.35rem;font-weight:300;letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1.2;color:#f4f8f5}
.clock .dist{font-size:.78rem;color:var(--acct,var(--acc));font-weight:600}
.clock.is420{border-color:var(--acc);animation:pulse 2s ease-in-out infinite}
@media (max-width:640px){.clockgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.clock{padding:6px 8px 6px 10px}.clock .time{font-size:1.15rem}.clock .city{font-size:.72rem;letter-spacing:.08em}}
@media (min-width:1100px){.clockgrid{grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}}
/* Phone order: the map is the point — put it right under the headline; you + clocks follow. */
@media (max-width:640px){
  main{display:flex;flex-direction:column}
  main .status{order:1} main .mapwrap{order:2} main .mapkey{order:3}
  main .clocks{order:5} main .all{order:6}
}
/* Compact top (J 10/24: "this section can be a little smaller") — still ≥18px body text for low vision. */
.top{padding-top:18px}
h1{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.sub{font-size:.98rem;margin-bottom:.7rem}
.now,.youbox{padding:10px 16px;margin-bottom:12px}
.kicker{font-size:.82rem}
.headline{font-size:clamp(1.15rem,2.3vw,1.55rem);margin:.15rem 0 .2rem}
.next,.you{font-size:1rem;margin:.1rem 0}
.youwhere{font-size:1.05rem;margin:.1rem 0}
.youclock{font-size:clamp(1.35rem,3vw,1.85rem);margin:0}
/* Desktop: Closest and You side by side; everything else full width. */

.nowrap{white-space:nowrap}
.clock.anchor{border-left-color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.03));border-color:rgba(255,255,255,.28)}
.clock.anchor .city{color:#fff;letter-spacing:.14em}
.clock.anchor .time{font-weight:400}
.clock.anchor .dist{color:var(--dim)}
.clock .off{color:var(--dim)}
.clock .dist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock{min-width:0}
.clock .city{overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.clock .dist{font-size:.72rem}}
/* One-line status (J 10/24: "can this be made to be one small line?") — wraps gracefully on phones. */
.status{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:1rem;line-height:1.5;
  padding:8px 14px;margin:0 0 12px;border:1px solid var(--rule);border-left:4px solid var(--leaf);border-radius:10px;background:var(--panel)}
.status .lbl{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.status .sep{color:var(--rule);margin:0 2px}
.status .yclock{font-variant-numeric:tabular-nums}
.top{padding-top:14px}
h1{margin-bottom:.35rem}
/* Crisp, clear text (J 10/24) — sturdier weights, brighter secondary text, tighter caps, nothing truncated. */
:root{--dim:#c5cfc8}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.clock{padding:8px 12px 9px 13px}
.clock .city{letter-spacing:.05em;font-weight:700;font-size:.8rem;color:#fff;white-space:normal;overflow:visible}
.clock .time{font-weight:500;font-size:1.4rem;letter-spacing:.02em;color:#fff}
.clock.anchor .time{font-weight:600}
.clock .off{font-size:.78rem;color:var(--dim);font-weight:500}
.clock .dist{font-size:.8rem;font-weight:600;white-space:normal;overflow:visible}
.status .lbl{letter-spacing:.07em;font-weight:600;font-size:.78rem;color:var(--dim)}
.status{color:#fff}
.legendtext,figcaption,footer{color:var(--dim)}
th{color:var(--dim);letter-spacing:.03em}
@media (max-width:640px){.clock .time{font-size:1.2rem}.clock .city{font-size:.74rem;letter-spacing:.03em}.clock .off,.clock .dist{font-size:.74rem}}
/* Clock info card — modal on desktop, bottom sheet on phones. */
.clock{cursor:pointer}
.clock:hover,.clock:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:1px}
.infocard{position:fixed;inset:0;z-index:2147483600;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.infocard[hidden]{display:none}
.ic-inner{position:relative;max-width:520px;width:100%;background:#151c18;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:18px 20px 16px;color:#fff;font-size:1rem;line-height:1.5;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.ic-inner h3{margin:.1rem 0 .5rem;font-size:1.5rem;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.ic-inner h3 span{font-variant-numeric:tabular-nums;font-weight:500;color:var(--leaf)}
.ic-kick{margin:0;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);font-weight:600}
.ic-inner p{margin:.4rem 0}
.ic-inner ul{margin:.5rem 0;padding-left:1.1rem}
.ic-inner li{margin:.2rem 0}
.ic-foot{color:var(--dim);font-size:.85rem;border-top:1px solid var(--rule);padding-top:8px;margin-top:10px}
.ic-close{position:absolute;top:8px;right:10px;width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
@media (max-width:640px){.infocard{align-items:flex-end;padding:0}.ic-inner{border-radius:16px 16px 0 0;max-width:none;padding:16px 16px 22px}}
/* Status line color-coded (J 10/24: "can each one be a different color so I can make it out better?") */
.status .v-closest,.status .v-closest strong{color:#7ee08a}
.status .v-next,.status .v-next strong{color:#ffd34d}
.status .v-you,.status .v-you strong{color:#7cc8ff}
.status .yclock{color:#ffffff;font-weight:700}
.status .v-count{color:#d9a8ff}
.status .sep{color:#55635b}
.brand{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}
.tagline{margin:.1rem 0 .7rem;font-size:1.02rem;color:var(--dim)}
.masthead{display:flex;align-items:center;gap:14px}
.masthead .emblem{width:72px;height:72px;border-radius:14px;flex:none;filter:drop-shadow(0 0 10px rgba(60,176,67,.35))}
.masthead h1{margin:0}
@media (max-width:640px){.masthead .emblem{width:56px;height:56px}.masthead{gap:10px}}
/* Map v2 — "the world as a clock face" (J: 4:20 dark rich green, 5–10 min lighter green; make it shine). */
#map .sphere{fill:#081310}
#map .sea .zone{opacity:.42}
#map .zone.land{opacity:1}
#map .zone{stroke:rgba(8,19,16,.55);stroke-width:.5;shape-rendering:geometricPrecision}
#map .hours{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
#map .borders{stroke:rgba(5,12,10,.55);stroke-width:.6}
#map .coast{fill:none;stroke:rgba(235,255,240,.38);stroke-width:.7;vector-effect:non-scaling-stroke;pointer-events:none}
#map .night{fill:#030814;opacity:.2;pointer-events:none}
#map .hot path{fill:none;stroke:#8dffa8;stroke-width:2.2;vector-effect:non-scaling-stroke;pointer-events:none;animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{stroke-opacity:.45}}
#map .pin{pointer-events:none}
#map .pin rect{fill:rgba(6,16,12,.88);stroke:#5be07c;stroke-width:1.2}
#map .pin text{fill:#eafff0;font-weight:700;font-family:system-ui,-apple-system,sans-serif}
#map .pin circle{fill:#8dffa8;stroke:#062012;stroke-width:2}
#map .rim{fill:none;stroke:#2bd468;stroke-opacity:.45;stroke-width:2;filter:drop-shadow(0 0 6px rgba(43,212,104,.55));pointer-events:none}
.legend .bar{background:linear-gradient(90deg,#0a7a33 0,#2f9e47 1%,#55c063 3%,#93db7f 6%,#cfe05c 12%,#f3c12e 22%,#ee8124 42%,#d02a3c 72%,#7d1230 100%)}
.sw.g{background:#0a7a33}
@media (prefers-reduced-motion:reduce){#map .hot path{animation:none}}
.sw.lg{background:#93db7f}
/* Status v2: one line on wide screens (groups separated by a thin divider); three aligned rows on phones. */
.status{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0}
.status .grp{display:flex;align-items:baseline;gap:8px;padding:0 14px 0 0;margin-right:14px;border-right:1px solid #2c3833}
.status .grp:last-child{border-right:0;margin-right:0;padding-right:0}
.status .val{min-width:0}
.cap-short{display:none}
@media (max-width:640px){
  .status{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;padding:10px 12px}
  .status .grp{display:contents}
  .status .lbl{align-self:baseline;padding-top:2px}
  .status .val{line-height:1.35}
  .cap-long{display:none} .cap-short{display:inline}
  figcaption{padding:6px 12px;font-size:.9rem}
  .legendtext{font-size:.9rem}
}
/* Google Earth links on place names — keep each name's colour, underline on hover/focus, big tap target. */
.status a.earth{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding:2px 0}
.status a.earth:hover,.status a.earth:focus-visible{text-decoration-thickness:2px;outline:none}
/* Law markers: small, with a dark halo so they read on any zone colour. */
#map .law{cursor:pointer;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
#map .law:hover{filter:drop-shadow(0 0 4px #fff)}
.tipnote{opacity:.85;font-size:.9em}
/* Zone card: hover peek follows the pointer; a click pins it (interactive, closable). Phones get a bottom sheet. */
.tip{max-width:300px;line-height:1.35}
.tip.pinned{pointer-events:auto;z-index:30;box-shadow:0 10px 40px rgba(0,0,0,.6);padding:12px 14px}
.tip .x{position:absolute;top:6px;right:8px;background:none;border:0;color:#cfe;font-size:1.1rem;cursor:pointer;padding:4px 8px}
.tip.pinned strong:first-of-type{padding-right:28px}
.law-sec{margin-top:8px;padding-top:8px;border-top:1px solid #2c3833}
.law-where{font-weight:700;color:#bff0c8;margin-bottom:4px}
.chip{display:inline-block;border-radius:999px;padding:1px 9px;font-size:.85em;font-weight:700;margin-right:4px}
.chip.legal{background:#0a7a33;color:#fff}
.chip.decrim{background:#93db7f;color:#062012}
.chip.medical{background:#3a7bd5;color:#fff}
.chip.illegal{background:#ee8124;color:#1a0a00}
.chip.death{background:#7d1230;color:#fff}
.law-sec ul{margin:6px 0 4px;padding-left:18px}
.law-sec li{margin:2px 0}
.varies{margin:4px 0;color:#ffd34d}
.src{color:#7cc8ff;font-weight:700}
.lawnote{margin:6px 0 0;font-size:.8em;opacity:.7}
.more{margin-top:4px;font-size:.85em;opacity:.75}
@media (max-width:640px){
  .tip.pinned{position:fixed;left:12px!important;right:12px;top:auto!important;bottom:12px;max-width:none;max-height:65vh;overflow:auto;z-index:1000;font-size:1.05rem}
}
.tip.pinned{background:#07120e}
/* Law column in the zone list: narrow, centred, first. */
.zt .lawcol{width:1.8em;padding-left:6px;padding-right:0;text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Map v3 — make 4:20 obvious: everything else steps back, the closest zone(s) light up. */
#map.spot .sea .zone{opacity:.32}
#map.spot .zone.land{opacity:.78}
#map .hot path{fill-opacity:1;stroke:#d8ffe3;stroke-width:2.6;vector-effect:non-scaling-stroke;pointer-events:none;animation:breathe 2.4s ease-in-out infinite}
#map .hot path.exact{stroke:#ffffff;stroke-width:3.2}
#map .pin .beacon{fill:none;stroke:#d8ffe3;stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.4);opacity:0}}
.legend .bar{background:linear-gradient(90deg,#1fe06a 0,#1fe06a 1%,#8fdca0 1.5%,#c3dfa6 3%,#d9cf6e 8%,#d6a23e 17%,#b5612c 42%,#7e2632 72%,#3f1020 100%)}
.sw.g{background:#1fe06a}.sw.lg{background:#a9dcae}
@media (prefers-reduced-motion:reduce){#map .pin .beacon{animation:none;opacity:.6}}
/* List v2: compact for phones — small law symbol, one line per row, times never wrap. */
.zt .lawcol{width:1.2em;padding:6px 0 6px 4px;font-size:.72em;line-height:1}
.zt td:nth-child(4),.zt td:nth-child(5){white-space:nowrap}  /* time + countdown (flag column is 1st since 2026-10-25) */
@media (max-width:640px){
  .zt{font-size:.95rem}
  .zt th,.zt td{padding:7px 5px}
  .zt .lawcol{padding:6px 0 6px 2px;font-size:.65em;width:1em}
  .zt td .dot{width:10px;height:10px;margin-right:6px}
}
/* Full-screen map (button top-right of the map). */
.mapwrap{position:relative}
.mapfs{position:absolute;top:8px;right:8px;z-index:5;width:44px;height:44px;border-radius:10px;border:1px solid #2bd468;background:rgba(6,16,12,.85);color:#d8ffe3;font-size:1.3rem;line-height:1;cursor:pointer}
.mapfs:focus-visible{outline:2px solid #fff;outline-offset:2px}
.rot{display:none}
body.noscroll{overflow:hidden}
.mapwrap.full{position:fixed;inset:0;z-index:2000;margin:0;border-radius:0;border:0;background:#050c0a;display:flex;align-items:center;justify-content:center}
.mapwrap.full #map{width:100vw;height:100vh;height:100dvh}
.mapwrap.full figcaption{display:none}
.mapwrap.full .mapfs{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right))}
@media (orientation:portrait){.mapwrap.full .rot{display:block;position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:16px;right:16px;text-align:center;color:#d8ffe3;background:rgba(6,16,12,.85);border:1px solid #2c3833;border-radius:10px;padding:10px;font-size:1rem}}
/* Country card + list-opened sheet + every-row symbols. */
.tip.sheet{position:fixed;left:50%!important;right:auto;top:auto!important;bottom:16px;transform:translateX(-50%);width:min(560px,calc(100vw - 24px));max-width:none;max-height:75vh;overflow:auto;z-index:1000;background:#07120e}
.ctry{margin-top:10px;padding-top:10px;border-top:1px solid #2c3833}
.ctry-h{font-weight:700;font-size:1.05em;margin-bottom:4px}
.ctry-sum{margin:2px 0 6px;color:#cfe}
.ctry dl{margin:0;display:grid;grid-template-columns:1fr;gap:2px}
.ctry dt{font-weight:700;color:#bff0c8;margin-top:6px;font-size:.9em}
.ctry dd{margin:0}
.srcs{margin:8px 0 0;font-size:.9em}
.srcs .src{margin-right:8px}
.guess-tag{font-size:.75em;border:1px dashed #ffd34d;color:#ffd34d;border-radius:999px;padding:0 7px;font-weight:600}
.zt .lawcol.guess{opacity:.55}
.zt .lawcol sup{font-size:.8em;color:#ffd34d;margin-left:1px}
.zt tbody tr{cursor:pointer}
.zt tbody tr:hover td,.zt tbody tr:focus-visible td{background:rgba(255,255,255,.05)}
/* Live "on deck" clock — the next place to hit 4:20. */
.clock.deck{border-color:var(--acct,var(--acc));box-shadow:0 0 0 1px var(--acct,var(--acc)) inset,0 0 18px rgba(31,224,106,.18)}
.decktag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#062012;background:var(--acct,#8fdca0);border-radius:999px;padding:1px 8px;margin-bottom:4px}
/* Shared-moment clock card: two named cities stacked, each with its own local time. */
.clock.multi .cl-line{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:6px}
.clock.multi .cl-line .city{grid-column:1/-1;margin-bottom:0}
.clock.multi .cl-line .ltime{font-size:1.35rem;font-weight:600;font-variant-numeric:tabular-nums}
.clock.multi .cl-line .off{font-size:.75rem;justify-self:end}
.clock.multi .cl-line + .cl-line{margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.clock .more{font-size:.75rem;color:#9fb3a8;margin-top:2px}
.sw.g{background:#12a94c}.sw.lg{background:#9be7a8}
/* Clock strip v3 (10/24) — one card shape (.cl-main + .dist). Wide screens: stacked chips, 8 across.
   Phones: a single-column countdown QUEUE — colour bar, city stack left, local time right of it, and the
   countdown in its own right-hand column so the order reads straight down. Nothing wraps or clips at 360px. */
.clock .cl-main{display:flex;flex-direction:column;min-width:0}
.clock:not(.multi) .cl-line{display:flex;flex-direction:column}
.clock.multi .cl-line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}   /* off wraps under the time when the chip is narrow */
.clock.multi .cl-line .city{flex:0 0 100%}
.clock.now{margin:0}                       /* .now is also the headline panel class; keep its margin out of the strip */
.clock .dist .ph{display:none}
.clock .city,.clock .more{overflow-wrap:break-word}
.clock .city small.also{display:block}
@media (max-width:640px){
  #clocks.clockgrid{grid-template-columns:1fr;gap:6px}
  #clocks .clock{text-align:left;flex-direction:row;align-items:center;gap:10px;padding:10px 12px 10px 12px;border-left-width:6px}
  #clocks .clock .cl-main{flex:1 1 auto}
  #clocks .clock .cl-line,#clocks .clock.multi .cl-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"city time" "off time";column-gap:8px;align-items:center}
  #clocks .clock .cl-line .city{grid-area:city;font-size:.85rem;letter-spacing:.02em;line-height:1.2}
  #clocks .clock .cl-line .off{grid-area:off;font-size:.85rem;justify-self:start;line-height:1.3}
  #clocks .clock .cl-line .time,#clocks .clock .cl-line .ltime{grid-area:time;font-size:1.5rem;font-weight:600;line-height:1.1;text-align:right;font-variant-numeric:tabular-nums}
  #clocks .clock .city small{display:block;font-size:.85rem;letter-spacing:.02em}
  #clocks .clock.multi .cl-line + .cl-line{margin-top:6px;padding-top:6px}
  #clocks .clock .decktag{align-self:flex-start;font-size:.85rem;margin-bottom:6px;padding:2px 10px}
  #clocks .clock .more{font-size:.85rem;color:var(--dim);margin-top:4px;opacity:1}
  #clocks .clock .dist{flex:0 0 auto;align-self:stretch;min-width:4.4rem;display:flex;flex-direction:column;justify-content:center;
    text-align:right;padding-left:10px;border-left:1px solid rgba(255,255,255,.12)}
  #clocks .clock .dist .dk{display:none}
  #clocks .clock .dist .ph{display:block}
  #clocks .clock .dist .ph b{display:block;font-size:1.25rem;line-height:1.15;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
  #clocks .clock .dist .ph small{display:block;font-size:.85rem;font-weight:600;color:var(--dim);white-space:nowrap}
  #clocks .clock.anchor .dist .ph b{color:#fff}
}
/* Eight moments = two even rows of four on tablets, one row of eight on desktop (auto-fill left orphans). */
@media (min-width:641px){#clocks.clockgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){#clocks.clockgrid{grid-template-columns:repeat(8,minmax(0,1fr))}}
/* List v3 — one deliberate line per row on phones.
   Name cell takes the leftover width (width:100% + max-width:0 lets ellipsis work inside a table);
   lead city is full ink, the "· also" cities dim and ellipsize, the "(+12:45)" offset drops on phones
   because the time column already shows it. The law symbol sits tight against the dot, not floating. */
.zt .sm{display:none}
.zt td.t small{font-size:.85em}
.zt td.where{width:100%;max-width:0}
.zt .wh{display:flex;align-items:center;min-width:0}
.zt .wh .dot{flex:none}
.zt .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zt .n2,.zt .off{color:var(--dim);font-weight:400}
.zt .youtag{flex:none;margin-left:8px;white-space:nowrap}
.zt td.t,.zt td.d,.zt th.t,.zt th.d{white-space:nowrap;font-variant-numeric:tabular-nums}
.zt .lawcol{padding-right:2px}
.zt .lawcol + td{padding-left:4px}
@media (max-width:640px){
  .zt .lg{display:none} .zt .sm{display:inline}
  .zt{font-size:1rem}                       /* 18px — stays large for low vision */
  .zt th{font-size:.8rem;letter-spacing:.04em}
  .zt th,.zt td{padding:9px 5px}
  .zt .lawcol{width:1.3em;padding:9px 0 9px 1px;font-size:.8em;text-align:center}
  .zt .lawcol + td{padding-left:3px}
  .zt td .dot{width:10px;height:10px;margin-right:6px}
  .zt .off{display:none}
  .zt .n2{font-size:.85em}
  .zt .youtag{margin-left:6px;padding:0 6px;font-size:.75rem}
  .zt td.t,.zt th.t{text-align:right}
  .zt td.d,.zt th.d{text-align:right;color:var(--dim)}
  .zt tr.is420 td.d{color:var(--leaf)}
}
@media (max-width:380px){
  .zt th,.zt td{padding:9px 3px}
  .zt{font-size:.95rem}                     /* about 17px at 360px wide */
}
/* mobile audit fixes */
/* Long place names, law text and URLs wrap inside their box instead of spilling past it. */
.status .val,.tip,.ic-inner,.legendtext,figcaption,footer,.masthead>div{overflow-wrap:anywhere;min-width:0}
/* Pinned card / list sheet: the ✕ stays reachable while the card scrolls, and is a full 44px tap target. */
.tip.pinned .x{position:sticky;top:-4px;float:right;width:44px;height:44px;margin:-4px -6px 4px 8px;padding:0;font-size:1.3rem;line-height:44px;text-align:center;color:#fff;background:#07120e;border-radius:10px;z-index:2}
.tip.pinned strong:first-of-type{padding-right:0}
.tip.sheet,.tip.pinned{overscroll-behavior:contain}
/* Clock info card: kicker and title clear the ✕; card scrolls instead of running off a short screen. */
.ic-kick,.ic-inner h3{padding-right:44px}
.ic-inner{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
@media (max-width:640px){.ic-inner{max-height:92vh;max-height:92dvh}}
/* Masthead: tagline and brand never collide with the emblem at large text. */
@media (max-width:400px){.masthead{align-items:flex-start}.masthead .emblem{margin-top:6px}}
/* Google Earth links on clock names / info card title: keep the card's colours, dotted underline says "tap me". */
.clock a.earth,#ic-title a.earth{color:inherit;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:3px}
.clock a.earth:hover,.clock a.earth:focus-visible,#ic-title a.earth:hover{text-decoration-style:solid;outline:none}
/* Shared cards: each city half is its own tap target. */
.clock.multi .cl-line{cursor:pointer;border-radius:8px;margin-left:-6px;margin-right:-6px;padding-left:6px;padding-right:6px}
.clock.multi .cl-line:hover,.clock.multi .cl-line:active,.clock.multi .cl-line:focus-visible{background:rgba(255,255,255,.07);outline:none}
.clock .more .other{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
/* Quick legal status on the clock info card. */
.ic-law{margin:6px 0 10px;line-height:1.45}
.ic-lawbtn{margin-left:6px;border:1px solid #2bd468;background:transparent;color:#bff0c8;border-radius:999px;padding:3px 12px;font:inherit;font-size:.85em;font-weight:700;cursor:pointer;min-height:32px}
.ic-lawbtn:hover,.ic-lawbtn:focus-visible{background:rgba(43,212,104,.15);outline:none}
/* The 4:20 minute (J): only a small seconds countdown beside the title, shown only during the minute. */
.moment{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 10px;border-radius:999px;border:1px solid #2bd468;
  background:rgba(18,169,76,.18);font-size:1rem;line-height:1.4}
.moment[hidden]{display:none}
.moment .mo-secs{font-variant-numeric:tabular-nums;color:#eafff0;font-weight:700}
.sync{max-width:1100px;margin:14px auto 0;padding:0 16px;font-size:.9rem;color:#9fb3a8}
.sync strong{color:#cfe}
.sync a,#infocard a:not(.earth){color:#7cc8ff;font-weight:600}
.usno-t{color:#fff;font-variant-numeric:tabular-nums;font-size:1.05em}
footer .credit{color:#7f948a;font-weight:400;font-size:.78rem;margin-top:6px}  /* J: small and quiet — don't crowd visitors */
footer .credit a{color:inherit;text-decoration:underline dotted}
/* Neutral law symbols (App Store-safe): coloured glyphs, not hearts. */
.s-legal{color:#5be07c;font-weight:800}.s-decriminalized{color:#9be7a8;font-weight:800}.s-medical{color:#7cc8ff;font-weight:800}
#map text.law.s-legal{fill:#5be07c}#map text.law.s-decriminalized{fill:#b9f5c4}
#map text.law{font-weight:800;paint-order:stroke;stroke:#04100b;stroke-width:3px}
footer .disclaim{color:#7f948a;font-size:.78rem;margin-top:6px}  /* J: small letters at the very bottom */
/* Palette "Forest night" (2026-10-25): chosen 4/4 by a blind review panel; tuned per their notes (gold/sand middle so it
   separates from light green, lighter bluer slate far end, brighter ⊘). Illegal is a calm glyph, ☠️ the one loud mark. */
.legend .bar{background:linear-gradient(90deg,#1fe06a 0,#1fe06a 1%,#8fdca0 1.5%,#c3dfa6 3%,#e2d36a 8%,#d9c95a 17%,#b8945a 42%,#4f7f8f 72%,#3d5a86 100%)}
.sw.y{background:#d9c95a}.sw.r{background:#3d5a86;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.s-illegal{color:#b3c4d4;font-weight:800}
.zt .lawcol.s-illegal{font-size:1.2em}
.zt .lawcol.s-death{font-size:.95em}
.chip.illegal{background:#4f6276;color:#ffffff}
/* North America readability (J): thin state lines, brighter coastlines so islands like Long Island read, "You" pin. */
#map .states{fill:none;stroke:rgba(235,255,240,.28);stroke-width:.6;vector-effect:non-scaling-stroke;pointer-events:none}
#map .coast{stroke:rgba(235,255,240,.6);stroke-width:.9}
#map .you{pointer-events:none}
#map .you circle{fill:#ffd34d;stroke:#1a1300;stroke-width:2;vector-effect:non-scaling-stroke}
#map .you text{fill:#ffd34d;font-weight:800;font-family:system-ui,-apple-system,sans-serif;paint-order:stroke;stroke:#05100b;stroke-width:3px;font-size:16px}
/* Per-place cards: names in list rows are their own targets; place chips inside cards. */
.zt .pn{cursor:pointer;border-radius:4px}
@media (hover:hover){.zt .pn:hover{text-decoration:underline dotted;text-underline-offset:3px;color:#fff}}
.tip.float{position:fixed;z-index:1000;max-width:320px;pointer-events:none}
.pchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 2px}
.pchips-l{font-size:.85em;color:#9fb3a8;margin-right:2px}
.pchip{font:inherit;font-size:.9em;border:1px solid #2bd468;background:transparent;color:#eafff0;border-radius:999px;padding:3px 12px;min-height:34px;cursor:pointer}
.pchip.on{background:rgba(43,212,104,.22);font-weight:700}
.pchip:hover,.pchip:focus-visible{background:rgba(43,212,104,.15);outline:none}
.law-where a.earth{text-decoration:none}
/* "420 API" link beside THE OFFICIAL */
.brand .apilink{display:inline-block;margin-left:10px;padding:1px 9px;border:1px solid #2bd468;border-radius:999px;color:#bff0c8;text-decoration:none;letter-spacing:.08em;font-size:.95em;vertical-align:1px}
.brand .apilink:hover,.brand .apilink:focus-visible{background:rgba(43,212,104,.18);outline:none}
/* UI pass (QA panel 2026-10-25): API pill tap target, strip colour key, city search, list key, National law label. */
.brand{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.brand .apilink{padding:6px 12px;line-height:1;vertical-align:middle}
.stripkey,.listkey{font-size:.85rem;color:#9fb3a8;margin:8px 0 0}
.stripkey .k{font-weight:700}.k-now{color:#5be07c}.k-1h{color:#f2dc63}.k-2h{color:#d8a85a}.k-4h{color:#70c8c8}.k-late{color:#8da2f4}
.findrow{margin:6px 0 4px}
#find{width:100%;font:inherit;font-size:1rem;color:#eafff0;background:#0a0f0d;border:1px solid #2c3833;border-radius:12px;padding:10px 14px;min-height:46px}
#find:focus{outline:2px solid #2bd468;outline-offset:1px}
.zt .lawcol.s-medical{color:#7cc8ff;font-size:1.05em}
.natl{font-size:.75em;letter-spacing:.08em;text-transform:uppercase;color:#9fb3a8;margin-bottom:2px}

/* Map key (2026-10-25, J: old caption + bar + legend line "sloppy"). One panel under the map: labelled scale, law chips.
   Tick positions are fractions of the 360-minute ramp, so they must move if app.js's colour domain changes. */
.mapkey{margin:12px 0 28px;padding:14px 18px 6px;background:var(--panel);border:1px solid var(--rule);border-radius:12px;display:grid;gap:4px}
.mk-row{display:grid;grid-template-columns:10.5rem 1fr;column-gap:18px;align-items:center;padding:6px 0}
.mk-row+.mk-row{border-top:1px solid var(--rule);padding-top:12px}
.mk-lbl{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.mk-scale{position:relative;padding:0 12px 26px 12px}
.mk-scale .bar{height:14px;border-radius:7px;background:linear-gradient(90deg,#1fe06a 0,#1fe06a .3%,#8fdca0 .4%,#c3dfa6 2.8%,#e2d36a 8.3%,#d9c95a 16.7%,#b8945a 41.7%,#4f7f8f 72.2%,#3d5a86 100%)}
.mk-scale .ticks{list-style:none;margin:0;padding:0;position:absolute;left:12px;right:12px;top:14px;height:26px}
.mk-scale .ticks li{position:absolute;transform:translateX(-50%);padding-top:7px;font-size:.85rem;color:var(--ink);white-space:nowrap}
.mk-scale .ticks li::before{content:"";position:absolute;left:50%;top:0;width:1px;height:5px;background:var(--dim)}
.mk-scale .ticks li:first-child{transform:none}.mk-scale .ticks li:first-child::before{left:0}
.mk-scale .ticks li:last-child{transform:translateX(-100%)}.mk-scale .ticks li:last-child::before{left:auto;right:0}
.mk-note{grid-column:2;margin:2px 0 0;font-size:.88rem;color:var(--dim)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border:1px solid var(--rule);border-radius:999px;font-size:.92rem;background:#0f1613}
.sw.night{background:#05080a;box-shadow:0 0 0 1px rgba(255,255,255,.35);vertical-align:-2px}
@media (max-width:640px){
  .mapkey{margin:10px 0 22px;padding:10px 14px 4px}
  .mk-row{grid-template-columns:1fr;row-gap:8px}
  .mk-note{grid-column:1}
  .mk-scale{padding:0 6px 24px}
  .mk-scale .ticks{left:6px;right:6px}
  .chips{gap:6px} .chips li{font-size:.85rem;padding:2px 10px}
}
/* Store links (J 2026-10-25): the estate JellyDazzle pop-up is excluded on 420 hosts (edge 00-jd-promo.conf), so the app
   is linked here instead — quiet, at the bottom, but big enough to tap. */
footer .apps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--rule)}
footer .apps-lbl{color:var(--dim);font-size:.9rem;margin-right:4px}
footer .apps-lbl b{color:var(--ink);font-weight:600}
footer a.store{display:inline-block;padding:6px 14px;border:1px solid var(--rule);border-radius:999px;background:#0f1613;color:var(--ink);font-size:.88rem;text-decoration:none}
footer a.store:hover,footer a.store:focus-visible{border-color:#5be07c;outline:none}
/* Flags (J 2026-10-25): own first column in the zone list; a small mark before the city on clock cards.
   PNGs are rendered from Wikimedia Commons SVGs (iso3166 table holds the source of each). */
.zt .flagcol{width:30px;padding:6px 2px 6px 6px;text-align:left;vertical-align:middle}
.zt .flagcol img{display:block;height:15px;width:auto;max-width:26px;object-fit:contain;border-radius:2px;filter:drop-shadow(0 0 .5px rgba(255,255,255,.55))}
.clock .city[style*="--flag"]::before{content:"";display:inline-block;width:1.25em;height:.85em;margin-right:.4em;vertical-align:-.05em;
  background:var(--flag) left center/contain no-repeat;filter:drop-shadow(0 0 .5px rgba(255,255,255,.5))}
@media (max-width:640px){.zt .flagcol{width:24px;padding:6px 1px 6px 4px}.zt .flagcol img{height:13px;max-width:22px}}
/* How time zones work (2026-10-25): four plain cards, bullets, low-vision sizes. */
.howtz{margin:36px 0 8px}
.howtz-lede{color:var(--dim);margin:0 0 14px;max-width:62ch}
.howtz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.tzc{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:14px 18px}
.tzc h3{margin:0 0 8px;font-size:1.05rem;color:#7ee08a}
.tzc ul{margin:0;padding-left:1.1em}
.tzc li{margin:0 0 8px;font-size:.95rem;line-height:1.45}
.tzc li:last-child{margin-bottom:0}
.tzc code{font-size:.85em;background:#0f1613;border:1px solid var(--rule);border-radius:4px;padding:0 4px}
.tzc a{color:#7cc8ff}
@media (max-width:640px){main .howtz{order:7}.tzc{padding:12px 14px}.tzc li{font-size:.92rem}}
/* Card header flag (J 2026-10-25): top-left of every card, links to the country's Wikipedia article. */
.chead{display:flex;align-items:flex-start;gap:12px}
.chead>div{min-width:0;flex:1}
.cflag{flex:none;display:block;line-height:0;margin-top:3px;border-radius:3px}
.cflag img{display:block;height:30px;width:auto;max-width:48px;object-fit:contain;border-radius:3px;filter:drop-shadow(0 0 .6px rgba(255,255,255,.6))}
a.cflag:hover img,a.cflag:focus-visible img{outline:2px solid #7ee08a;outline-offset:2px}
.ic-chead .cflag{margin-top:6px}
.ic-chead .cflag img{height:36px;max-width:56px}
.tip.pinned .chead{padding-right:36px}

/* 2026-11-05 (J): bigger law icons and flags; next-6-hours list + Show all button */
.chips li span{font-size:1.45em;line-height:1}
.listkey span{font-size:1.3em}
.zt .lawcol{font-size:1.15em!important;width:1.7em!important}
.zt .flagcol{width:40px!important}
.zt .flagcol img{height:24px!important;max-width:36px!important}
@media (max-width:640px){.zt .flagcol{width:32px!important}.zt .flagcol img{height:20px!important;max-width:30px!important}.zt .lawcol{font-size:1.05em!important;width:1.5em!important}}
.listnote{color:var(--dim);margin:-4px 0 10px;font-size:.98rem}
.showall{font:inherit;font-weight:700;color:#0a1a10;background:#7ee08a;border:0;border-radius:999px;padding:.6rem 1.3rem;cursor:pointer}
.showall:hover{background:#9bf0a6}

/* two lists side by side with a thin jade divider (J 2026-11-05) */
.zpair{display:grid;grid-template-columns:1fr 1fr;gap:0}
.zcol{min-width:0;padding-right:18px}
.zcol2{padding-right:0;padding-left:18px;border-left:2px solid #2fb37a;box-shadow:-6px 0 14px -10px rgba(47,179,122,.9)}
.zcap{margin:0 0 6px;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:#7ee08a}
@media (max-width:980px){.zpair{grid-template-columns:1fr}.zcol{padding:0}.zcol2{padding:16px 0 0;margin-top:16px;border-left:0;border-top:2px solid #2fb37a;box-shadow:0 -6px 14px -10px rgba(47,179,122,.9)}}
/* two-list layout: slightly smaller type on wide screens so names fit (J 2026-11-05) */
@media (min-width:981px){.zpair .zt{font-size:.88rem}.zpair .zt th,.zpair .zt td{padding:6px 4px}.zpair .zt .flagcol img{height:20px!important;max-width:30px!important}.zpair .zt .flagcol{width:34px!important}}
/* Vice City card (J 2026-11-07): Florida Keys clock with a sunset-neon name; countdown bar keeps the normal band colour */
.clock.vc .city{color:#ff8fd0;text-shadow:0 0 10px rgba(255,90,190,.35)}
.clock.vc .city small{color:#7fe3e0;text-shadow:none;white-space:nowrap}
/* gta6vc.us link at the foot of the Vice City card (J 2026-11-07) — original badge, small, no Rockstar art */
.clock.vc .vclink{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:#7fe3e0;text-decoration:none;white-space:nowrap}
.clock.vc .vclink img{width:32px;height:20px;border-radius:4px;box-shadow:0 0 8px rgba(255,95,168,.45)}
.clock.vc .vclink:hover,.clock.vc .vclink:focus-visible{color:#ff8fd0;text-decoration:underline}
/* Badge sits at the foot of the card: bottom of the column on desktop, its own full-width row under the queue line on phones */
.clock.vc .vclink{margin-top:auto;padding-top:8px;align-self:flex-start}
@media (max-width:640px){#clocks .clock.vc{flex-wrap:wrap;row-gap:4px}#clocks .clock.vc .vclink{flex:0 0 100%;order:9;margin-top:0;padding-top:2px}}

/* =====================================================================================================================
   v4 (/422/, 2026-11-07): the globe console. One dark glass panel in a brushed-metal bezel (J's Gemini mockup),
   phone-first: header → globe → countdown pill → queue → your time → lists. Large type: nothing under 15px,
   near-white text on dark, green = 4:20.
   ===================================================================================================================== */
body.v4{background:radial-gradient(ellipse at 50% 0%,#0b1d1e 0%,#050a0c 55%,#030607 100%) fixed;background-color:#040809;color:#f2f7f4}
.v4{--g1:#7dffa8;--g2:#3ddc7a;--mint:#a8f0cf;--txt:#f2f7f4;--sub:#d3e3dc;--glass:rgba(12,30,30,.62);--line:rgba(160,255,215,.22)}
.console{position:relative;max-width:1520px;margin:10px auto 18px;border:7px solid transparent;border-radius:28px;padding:12px;
  background:radial-gradient(ellipse at 50% 38%,#11302f 0%,#0b1b1d 42%,#071012 100%) padding-box,
    linear-gradient(140deg,#eef7f8 0%,#8a9ba1 9%,#2a363b 22%,#6f8288 38%,#d9e7ea 50%,#56676d 63%,#1d282c 78%,#9fb3b8 90%,#f3fbfc 100%) border-box;
  box-shadow:0 0 0 1px #000,0 0 50px rgba(90,230,200,.14),0 30px 80px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 0 60px rgba(70,230,170,.06);
  display:grid;gap:12px;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "stage" "pill" "queue" "you" "up" "past"}
.c-head{grid-area:head}.c-you{grid-area:you}.c-pill{grid-area:pill}.c-stage{grid-area:stage}.c-up{grid-area:up}.c-past{grid-area:past}.c-queue{grid-area:queue}
/* header */
.v4 .c-head{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 4px 0;text-align:left}
.v4 .c-head .emblem{width:64px;height:64px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(125,255,168,.45),0 0 24px rgba(61,220,122,.45)}
.v4 .c-head .brand{margin:0;font-size:1rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);text-shadow:0 0 14px rgba(125,255,168,.35)}
.v4 .c-head .brand .apilink{font-size:.8rem;letter-spacing:.06em;margin-left:6px;vertical-align:2px}
.v4 .c-head h1{margin:0;font-size:clamp(1.9rem,6.4vw,4rem);font-weight:800;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.v4 .c-head h1 .leaf{color:var(--g2);text-shadow:0 0 22px rgba(61,220,122,.45)}
.v4 .c-head .tagline{margin:.25rem 0 0;font-size:1.02rem;color:var(--sub);font-weight:500}
/* shared glass */
.c-you,.c-pill,.c-up,.c-past,.c-queue{background:var(--glass);border:1px solid var(--line);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.c-lbl{margin:0 0 .35rem;font-size:.84rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
/* your local time */
.c-you{padding:12px 16px}
.c-you .yclock{display:block;font-size:2.1rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--g1);line-height:1.1;text-shadow:0 0 18px rgba(125,255,168,.3)}
.c-you .ywhere{margin:.3rem 0 0;font-size:1rem;color:var(--txt)}
.c-you .ynext{margin:.2rem 0 0;font-size:1rem;color:#e6d4ff;font-weight:600}
/* countdown pill */
.c-pill{padding:12px 14px;text-align:center;position:relative;border-color:rgba(125,255,168,.35)}
.c-pill::before{content:"";position:absolute;left:18%;right:18%;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#7dffa8,transparent);box-shadow:0 0 14px #3ddc7a}
.c-pill p{margin:0}
.pill-main{font-size:1.12rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mint)}
.pill-main .cd{display:inline-block;font-size:2.1rem;font-weight:800;letter-spacing:.01em;text-transform:none;color:var(--g1);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(125,255,168,.45);vertical-align:-.12em}
.pill-next{margin-top:.2rem!important;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--txt)}
.pill-next .nxb{all:unset;cursor:pointer;color:#fff;font-weight:700;border-bottom:2px solid rgba(125,255,168,.5)}
.pill-next .nxb:focus-visible{outline:2px solid var(--g1);outline-offset:3px}
.pill-next .nx-t{color:var(--g1)}
.pill-now{margin-top:.35rem!important;font-size:.95rem;color:var(--sub)}
.pill-now .lbl{color:var(--mint);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.84rem;margin-right:4px}
.pill-now a.earth{color:#fff}
/* stage: globe + flat map */
.c-stage{position:relative;height:min(108vw,560px);min-height:360px;border-radius:20px;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,rgba(40,120,140,.18) 0%,rgba(6,14,18,0) 55%),#03080b;border:1px solid rgba(160,255,215,.14)}
.globe{position:absolute;inset:0}
.globe .gl{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline:none}
.globe .gl.grabbing{cursor:grabbing}
.c-stage.v-map .globe,.c-stage.v-map .zoom,.c-stage.v-map .snap,.c-stage.v-map .g-hint{visibility:hidden;pointer-events:none}
.c-stage .mapwrap{position:absolute;left:0;right:0;top:56px;bottom:0;margin:0;display:flex;flex-direction:column;justify-content:center;background:transparent;border:0;border-radius:0}
.c-stage.v-globe .mapwrap{visibility:hidden;pointer-events:none}
.c-stage .mapwrap .tip{visibility:visible}
.c-stage .mapwrap.full{position:fixed;inset:0;top:0;visibility:visible;pointer-events:auto;background:#050c0a}
.c-stage .mapwrap figcaption{color:var(--sub)}
.c-stage.nogl .viewtog [data-view=globe]{display:none}
.gl-fallback{position:absolute;top:60px;left:16px;right:16px;margin:0;z-index:3;color:#ffe9a8;font-size:1rem}
.viewtog{position:absolute;top:10px;left:10px;z-index:4;display:flex;padding:3px;border-radius:999px;background:rgba(4,14,14,.78);border:1px solid var(--line)}
.viewtog .vt{all:unset;cursor:pointer;min-width:64px;min-height:40px;padding:0 16px;display:flex;align-items:center;justify-content:center;border-radius:999px;font-size:.95rem;font-weight:700;letter-spacing:.06em;color:var(--sub)}
.viewtog .vt.on{background:linear-gradient(180deg,#1f7a4c,#145a37);color:#fff;box-shadow:0 0 12px rgba(61,220,122,.45)}
.viewtog .vt:focus-visible{outline:2px solid var(--g1)}
.zoom{position:absolute;right:12px;bottom:84px;z-index:4;display:flex;flex-direction:column;border-radius:999px;overflow:hidden;background:rgba(6,20,20,.82);border:1px solid rgba(125,255,168,.4);box-shadow:0 0 18px rgba(61,220,122,.2)}
.zoom button{all:unset;cursor:pointer;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:400;color:var(--g1)}
.zoom button+button{border-top:1px solid rgba(125,255,168,.25)}
.zoom button:hover,.zoom button:focus-visible{background:rgba(61,220,122,.18)}
.snap{all:unset;cursor:pointer;position:absolute;right:12px;bottom:14px;z-index:4;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 18px;border-radius:999px;background:rgba(6,20,20,.82);border:1px solid rgba(125,255,168,.4);color:var(--g1);font-size:.95rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 18px rgba(61,220,122,.2)}
.snap svg{width:40px;height:40px;padding:4px;border-radius:50%;border:2px solid rgba(125,255,168,.6)}
.snap:hover,.snap:focus-visible{background:rgba(20,70,48,.9)}
.g-hint{position:absolute;left:14px;bottom:12px;z-index:3;margin:0;max-width:55%;font-size:.84rem;color:var(--sub);text-shadow:0 1px 3px #000;pointer-events:none}
.g-hint .cap-long{display:none}
@media (hover:hover) and (min-width:700px){.g-hint .cap-long{display:inline}.g-hint .cap-short{display:none}}
/* globe pins (HTML over the canvas) */
.pins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gpin{all:unset;position:absolute;left:0;top:0;width:0;height:0;cursor:pointer;will-change:transform;transition:opacity .25s}
.gpin i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:#7dffa8;box-shadow:0 0 0 3px rgba(4,30,16,.85),0 0 16px #3dff86}
.gpin.hot i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #b8ffd0;animation:gping 2s ease-out infinite}
@keyframes gping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
.gpin span{position:absolute;left:16px;top:-22px;display:flex;flex-direction:column;padding:5px 12px 6px;border-radius:10px;white-space:nowrap;background:rgba(5,22,18,.88);border:1px solid rgba(125,255,168,.55);box-shadow:0 4px 16px rgba(0,0,0,.5)}
.gpin.left span{left:auto;right:16px}
.gpin b{font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.15}
.gpin small{font-size:.84rem;color:#c9ffdb;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.gpin small:empty{display:none}
.gpin.hot span{border-color:#b8ffd0;box-shadow:0 0 18px rgba(61,255,134,.45)}
.gpin.hot.exact span{background:rgba(18,90,50,.92)}
.gpin.you i{background:#7cc8ff;box-shadow:0 0 0 3px rgba(4,16,30,.85),0 0 14px #7cc8ff}
.gpin.you span{border-color:rgba(124,200,255,.7)}
.gpin.you small{color:#cfe8ff}
.gpin:focus-visible span{outline:2px solid #fff}
@media (prefers-reduced-motion:reduce){.gpin.hot i::after{animation:none}}
/* lists */
.c-up,.c-past{padding:12px 10px 10px 12px}
.tl{list-style:none;margin:0;padding:0 0 0 14px;position:relative}
.tl::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,#3ddc7a,rgba(61,220,122,.15))}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;left:-14px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#2fae63;box-shadow:0 0 8px rgba(61,220,122,.6)}
.tl.past::before{background:linear-gradient(180deg,rgba(160,190,210,.7),rgba(160,190,210,.1))}
.tl.past li::before{background:#8fa6b8;box-shadow:none}
.ti{all:unset;box-sizing:border-box;cursor:pointer;width:100%;min-height:56px;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 8px;border-radius:12px;border-bottom:1px solid rgba(160,255,215,.08)}
.ti:hover,.ti:focus-visible{background:rgba(61,220,122,.1)}
.ti:focus-visible{outline:2px solid var(--g1)}
.ti.first{background:rgba(61,220,122,.1);box-shadow:inset 3px 0 0 #5be07c}
.ti.is420{background:rgba(31,224,106,.2);box-shadow:inset 3px 0 0 #fff}
.ti .fl,.qc .fl{border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.25);object-fit:cover}
.ti .fl{width:36px;height:24px}
.nofl{display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:none!important}
.tn{min-width:0;display:flex;flex-direction:column}
.tn b{font-size:1rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1.2;overflow-wrap:normal;hyphens:manual}
.tn small{font-size:.84rem;color:var(--sub);line-height:1.25}
.tc{font-size:1.05rem;font-weight:700;color:var(--g1);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tc.ago{font-size:.84rem;font-weight:600;color:#cdd9e6;line-height:1.25}
.is420 .tc{color:#fff}
/* queue */
.c-queue{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.qrow{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#2fae63 transparent}
.qrow:focus-visible{outline:2px solid var(--g1);border-radius:12px}
.qc{all:unset;box-sizing:border-box;cursor:pointer;flex:none;scroll-snap-align:start;width:164px;min-height:150px;padding:12px 10px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  background:linear-gradient(180deg,rgba(30,60,60,.65),rgba(10,26,28,.75));border:1px solid rgba(160,255,215,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.qc:hover,.qc:focus-visible{border-color:rgba(125,255,168,.7)}
.qc:focus-visible{outline:2px solid var(--g1)}
.qc.first{border-color:rgba(125,255,168,.75);box-shadow:0 0 22px rgba(61,220,122,.35),inset 0 1px 0 rgba(255,255,255,.1)}
.qc.is420{background:linear-gradient(180deg,rgba(31,160,90,.6),rgba(10,60,36,.8))}
.qc .fl{width:48px;height:32px;margin-bottom:4px}
.qn{font-size:.95rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1.15;max-width:100%;overflow-wrap:normal;min-height:2.3em;display:flex;align-items:center}
.qk{font-size:.84rem;color:var(--sub);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qt{font-size:1.5rem;font-weight:800;color:var(--g1);font-variant-numeric:tabular-nums;line-height:1.15;text-shadow:0 0 12px rgba(125,255,168,.35)}
.qw{font-size:.84rem;color:var(--mint)}
/* below the console */
.v4 main{margin-top:8px}
.v4 .sec-h{font-size:1.4rem;margin:1rem 0 .6rem}
.v4 .mapkey{margin-top:16px}
.v4 footer{color:var(--sub)}
/* tablet */
@media (min-width:700px){
  .console{border-width:9px;border-radius:38px;padding:18px;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"head head" "stage stage" "pill pill" "queue queue" "you you" "up past"}
  .c-stage{height:min(78vw,640px)}
  .v4 .c-head .emblem{width:84px;height:84px}
}
/* desktop: lists left and right of the globe, pill on top, queue along the bottom (the mockup's layout) */
@media (min-width:1100px){
  .console{margin:18px auto 22px;border-width:11px;border-radius:52px;padding:22px 24px 24px;
    grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(250px,290px);grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"head head head" "you pill past" "up stage past" "queue queue queue"}
  .v4 .c-head .emblem{width:96px;height:96px}
  .c-stage{height:auto;min-height:640px}
  .c-pill{align-self:start;max-width:720px;width:100%;justify-self:center}
  .c-up,.c-past{max-height:none;overflow:hidden}
  .c-past{align-self:stretch}
}
@media (min-width:1400px){.c-stage{min-height:700px}}

.tn .nw{white-space:nowrap}
.tc.ago{display:flex;flex-direction:column;align-items:flex-end}
.tc.ago small{font-size:.84rem;font-weight:600;color:#b9c9d8;text-transform:uppercase;letter-spacing:.08em}
.tc.ago{font-size:.95rem;color:#e3ecf4}
.g-hint{max-width:calc(100% - 300px)}
@media (max-width:699px){.g-hint{max-width:calc(100% - 250px)}}
/* "Just passed": the time sits under the name, so long names (Anchorage, Marquesas Islands) never collide with it. */
.tl.past .ti{grid-template-columns:36px minmax(0,1fr)}
.tl.past .tc.ago{grid-column:2;flex-direction:row;align-items:baseline;gap:.45em;justify-content:flex-start;text-align:left;margin-top:-4px}
@media (max-width:699px){.g-hint{left:auto;right:12px;top:14px;bottom:auto;max-width:calc(100% - 200px);text-align:right}}
/* Phones: the globe gets the stage to itself; zoom and Snap sit in a bar underneath it. */
@media (max-width:699px){
  .c-stage{height:min(132vw,620px)}
  .globe{bottom:66px}
  .zoom{flex-direction:row;left:10px;right:auto;bottom:8px}
  .zoom button+button{border-top:0;border-left:1px solid rgba(125,255,168,.25)}
  .zoom button{width:52px;height:48px}
  .snap{bottom:8px;right:10px}
}
@media (max-width:699px){.c-stage{height:min(122vw,600px)}.snap{letter-spacing:.03em;gap:8px;padding-left:14px;font-size:.9rem}.snap svg{width:36px;height:36px}}
@media (max-width:699px){.g-hint{max-width:calc(100% - 212px)}}
.pill-next .nx-t{white-space:nowrap}