/* ============================================================================
   COVERAGE ATLAS
   Second pass on the coverage section. The previous version was a dark
   terminal console; this one goes the other way — a light editorial index
   organised by time zone, with the local time in each zone running live.

   Why time zones rather than an alphabet or a region grid: it is the one
   ordering that answers the question a prospect actually has, which is "when
   would you be calling me". It is also self-maintaining — Intl resolves the
   offsets from the browser's own IANA database, daylight saving included, so
   nothing here needs correcting twice a year.

   Type: Exo 2, already the site display face, so this section adds no webfont
   and costs nothing at first paint. JetBrains Mono for codes and numerals.

   Deliberately NOT used: WebGPU/canvas. A location index gains nothing
   visually from a GPU pipeline and would cost first paint, main-thread time
   and battery on the phones most of this traffic arrives on. The only runtime
   work here is one timer that fires on the minute and parks itself when the
   section scrolls out of view.

   Techniques: container queries (tiles answer to the panel, not the viewport),
   :has() for empty groups during search, scroll-driven reveal via
   animation-timeline where the browser supports it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.atlas {
  --a-ink: #08110D;
  --a-ink-2: #4A5A53;
  --a-faint: #64726B;   /* 4.79:1 on white; was #8A9A93 at 2.95 */
  --a-line: #E4EDE8;
  --a-line-soft: #EFF5F2;
  --a-pad: clamp(20px, 3vw, 42px);

  position: relative;
  isolation: isolate;
  border-radius: clamp(18px, 2vw, 28px);
  border: 1px solid var(--a-line);
  background:
    radial-gradient(140% 70% at 50% 0%, #F2FBF6 0%, transparent 62%),
    #FFFFFF;
  box-shadow:
    0 1px 2px rgba(8, 17, 13, .03),
    0 12px 28px -14px rgba(8, 17, 13, .10),
    0 40px 80px -50px rgba(8, 17, 13, .18);
  overflow: clip;
  container-type: inline-size;
  container-name: atlas;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.atlas-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  padding: var(--a-pad) var(--a-pad) calc(var(--a-pad) * .7);
}
.atlas-eyebrow {
  font-family: var(--mono);
  font-size: 10.4px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--a-faint);
  margin: 0 0 10px;
}
.atlas-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(21px, 2.3vw, 29px);
  letter-spacing: -.022em;
  line-height: 1.1;
  color: var(--a-ink);
  margin: 0;
  text-wrap: balance;
}
.atlas-sub {
  margin: 9px 0 0;
  font-size: 13.4px;
  line-height: 1.6;
  color: var(--a-ink-2);
  max-width: 46ch;
}

/* Search — deliberately quiet. It is a convenience here, not the interface:
   every location is already on screen. */
.atlas-find {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 260px;
  min-width: 190px;
}
.atlas-find svg {
  position: absolute;
  left: 0;
  color: var(--a-faint);
  pointer-events: none;
  transition: color .3s var(--e-out);
}
.atlas-find input {
  width: 100%;
  height: 38px;
  padding: 0 30px 0 24px;
  border: 0;
  border-bottom: 1px solid var(--a-line);
  border-radius: 0;
  background: transparent;
  color: var(--a-ink);
  font: inherit;
  font-size: 13.6px;
  outline: none;
  transition: border-color .35s var(--e-out);
}
.atlas-find input::placeholder { color: var(--a-faint) }
.atlas-find input:focus { border-bottom-color: var(--mint) }
.atlas-find:focus-within svg { color: var(--green-ink) }
.atlas-reset {
  position: absolute;
  right: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--a-line-soft);
  color: var(--a-ink-2);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, background .25s, color .25s;
}
.atlas-reset:hover { background: var(--mint); color: var(--deep) }
.atlas.is-filtering .atlas-reset { opacity: 1; pointer-events: auto }

/* --------------------------------------------------------------------------
   Zone rail — jump links that double as a legend
   -------------------------------------------------------------------------- */
.atlas-rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--a-pad) calc(var(--a-pad) * .7);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.atlas-rail::-webkit-scrollbar { display: none }
.atlas-jump {
  scroll-snap-align: start;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: 100px;
  border: 1px solid var(--a-line);
  background: #fff;
  color: var(--a-ink-2);
  font-size: 12.6px;
  font-weight: 500;
  text-decoration: none;
  transition: color .28s var(--e-out), border-color .28s var(--e-out),
              background .28s var(--e-out), transform .4s var(--e-spring);
}
.atlas-jump b {
  font-family: var(--mono);
  font-size: 10.4px;
  font-weight: 500;
  color: var(--a-faint);
  font-variant-numeric: tabular-nums;
}
.atlas-jump:hover {
  color: var(--a-ink);
  border-color: var(--mint-line);
  background: var(--mint-wash);
  transform: translateY(-1px);
}
.atlas-jump:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px }
.atlas-jump[aria-current="true"] {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}
.atlas-jump[aria-current="true"] b { color: var(--mint) }

/* --------------------------------------------------------------------------
   A time zone band
   -------------------------------------------------------------------------- */
.tz {
  padding: clamp(18px, 2.2vw, 26px) var(--a-pad);
  border-top: 1px solid var(--a-line-soft);
  scroll-margin-top: calc(var(--nav-h, 64px) + 18px);
}
.tz:first-of-type { border-top: 1px solid var(--a-line) }

.tz-head {
  display: flex;
  align-items: baseline;
  gap: 14px 22px;
  flex-wrap: wrap;
}
.tz-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: -.018em;
  color: var(--a-ink);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.tz-count {
  font-family: var(--mono);
  font-size: 10.6px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--a-faint);
  font-variant-numeric: tabular-nums;
}

/* The live clock is the reason the section is ordered this way, so it carries
   the same typographic weight as the zone name. */
.tz-clock {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-left: auto;
}
.tz-time {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: -.02em;
  color: var(--green-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.tz-zone {
  font-family: var(--mono);
  font-size: 10.6px;
  letter-spacing: .1em;
  color: var(--a-faint);
  text-transform: uppercase;
}

/* 24-hour rail with a marker at that zone's current hour. The shaded stretch
   is a neutral 09:00–17:00 reference for the location — it is not a statement
   about when we are reachable. */
.tz-track {
  position: relative;
  height: 3px;
  margin: 14px 0 0;
  border-radius: 3px;
  background: var(--a-line);
}
.tz-band {
  position: absolute;
  inset-block: 0;
  left: 37.5%;
  width: 33.33%;
  border-radius: 3px;
  background: var(--mint-line);
}
.tz-now {
  position: absolute;
  top: 50%;
  left: calc(var(--h, .5) * 100%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mint);
  border: 2px solid #fff;
  translate: -50% -50%;
  box-shadow: 0 0 0 1px var(--mint-line), 0 2px 6px rgba(20, 140, 80, .4);
  transition: left .8s var(--e-out);
}

/* --------------------------------------------------------------------------
   Locations
   -------------------------------------------------------------------------- */
.tz-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 7px;
}
@container atlas (max-width: 620px) {
  .tz-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
}
@container atlas (max-width: 400px) {
  .tz-list { grid-template-columns: 1fr 1fr; gap: 6px }
}

.loc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--a-line);
  background: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .3s var(--e-out), background .3s var(--e-out),
              transform .42s var(--e-spring), box-shadow .42s var(--e-out);
}
/* A slow light sweep on hover rather than a colour flip */
.loc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(79, 231, 143, .16) 45%, transparent 90%);
  translate: -110% 0;
  transition: translate .7s var(--e-out);
  pointer-events: none;
}
.loc:hover {
  border-color: var(--mint-line);
  background: var(--mint-wash);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px rgba(20, 140, 80, .34);
}
.loc:hover::before { translate: 110% 0 }
.loc:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px }

.loc-name {
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.2px;
  letter-spacing: -.012em;
  line-height: 1.25;
  color: var(--a-ink);
  overflow-wrap: anywhere;
}
.loc-code {
  position: relative;
  flex: none;
  font-family: var(--mono);
  font-size: 10.4px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--a-faint);
  transition: color .3s var(--e-out);
}
.loc:hover .loc-code { color: var(--green-ink) }
.loc-name mark {
  background: transparent;
  color: var(--green-ink);
  box-shadow: inset 0 -.42em 0 rgba(79, 231, 143, .3);
  border-radius: 2px;
}

/* Split-zone states are marked rather than quietly filed under one zone */
.loc.is-split .loc-code::after {
  content: "*";
  color: var(--mint);
  margin-left: 1px;
}
/* Home base */
.loc.is-home {
  border-color: var(--mint-line);
  background: var(--mint-wash);
}
.loc.is-home .loc-code { color: var(--green-ink) }

/* --------------------------------------------------------------------------
   Search results
   -------------------------------------------------------------------------- */
.loc[hidden] { display: none }
/* A band with nothing left showing removes itself from the flow */
.tz:not(:has(.loc:not([hidden]))) { display: none }

.atlas-empty {
  display: none;
  padding: clamp(22px, 3vw, 34px) var(--a-pad) var(--a-pad);
  border-top: 1px solid var(--a-line);
  color: var(--a-ink-2);
  font-size: 13.6px;
}
.atlas-zones:not(:has(.loc:not([hidden]))) + .atlas-empty { display: block }
.atlas-empty b { color: var(--a-ink); font-weight: 600 }
.atlas-empty button {
  margin-left: 6px;
  border: 0; padding: 0; background: none;
  color: var(--green-ink);
  font: inherit; font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Footnote
   -------------------------------------------------------------------------- */
.atlas-foot {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: calc(var(--a-pad) * .8) var(--a-pad);
  border-top: 1px solid var(--a-line);
  background: linear-gradient(180deg, #FAFDFB, #F5FAF7);
  font-size: 11.8px;
  line-height: 1.65;
  color: var(--a-faint);
}
.atlas-foot svg { flex: none; margin-top: 2px; color: var(--a-ink-2) }
.atlas-foot b { color: var(--a-ink-2); font-weight: 600 }

/* --------------------------------------------------------------------------
   Entrance — scroll-driven where supported, so no JS observer is needed
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tz {
      animation: tzIn linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 20%;
    }
    /* Position only, for the same reason as headIn in craft.css: this is
       scroll-driven, so every .tz that has not been reached is sitting at
       its "from" frame. At opacity 0 that is 61 location cards of invisible
       text, which an accessibility audit counts as 61 contrast failures. */
    @keyframes tzIn {
      from { transform: translateY(14px) }
      to   { transform: none }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .loc, .atlas-jump, .tz-now { transition: none }
}