/* eclipse-map.html: path of totality map, city times and countdown.
   Aura Sight ledger idiom (after the Aurasite Swiss system): flat paper,
   hairline rules, square corners, no shadows, mono uppercase micro type,
   large light headings, one terracotta accent. */

.emap { max-width: 1200px; margin: 0 auto; padding-top: clamp(24px, 4vh, 40px); }
.emap .product-crumbs { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: clamp(28px, 5vh, 48px); }

/* ---------- head: statement title and a ledger countdown ---------- */
.emap-head { padding-bottom: clamp(28px, 5vh, 48px); border-bottom: 1px solid var(--bone-0); }
.emap-head .ref-code { margin-right: 12px; }
.emap-title {
  margin-top: 18px;
  max-width: 14ch;
  font-size: clamp(44px, 7.4vw, 104px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -0.035em;
  color: var(--bone-0);
}
.emap-title span { color: var(--corona); }
.emap-lede { margin: 22px 0 0; max-width: 52ch; font-size: 17px; }

.emap-count { margin-top: clamp(28px, 5vh, 44px); max-width: 640px; }
.emap-count__label span { color: var(--bone-0); }
.emap-count__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.emap-count__grid > span { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px 0; }
.emap-count__grid > span + span { padding-left: 16px; border-left: 1px solid var(--line-1); }
.emap-count__grid strong {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bone-0);
  font-variant-numeric: tabular-nums;
}

/* ---------- explorer: map beside the place panel ---------- */
.emap-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--line-1);
}
.emap-map { margin: 0; padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 20px 0; }
.eclipse-map__svg { display: block; width: 100%; height: auto; }
.map-state { fill: var(--void-1); stroke: var(--void-0); stroke-width: 1.4; stroke-linejoin: round; }
.map-band { fill: var(--bone-0); opacity: .9; }
.map-centre { fill: none; stroke: var(--void-0); stroke-width: 1; opacity: .7; }
.map-city { cursor: pointer; outline: none; }
.map-city circle { r: 5; fill: var(--void-0); stroke: var(--bone-0); stroke-width: 1.6; }
.map-city.is-total circle { fill: var(--corona); stroke: var(--void-0); stroke-width: 1.6; }
.map-city:hover circle, .map-city:focus-visible circle { r: 7; }
.map-city.is-active circle { r: 8; fill: var(--corona); stroke: var(--bone-0); stroke-width: 2; }
.map-ring { fill: none; stroke: var(--corona); stroke-width: 1; r: 14; opacity: 0; pointer-events: none; }
.map-ring.is-on { opacity: 1; }
.map-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--bone-0);
  paint-order: stroke;
  stroke: var(--void-0);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}
.map-label--active { fill: var(--corona-dim); }

.emap-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.emap-legend span { display: inline-flex; align-items: center; gap: 8px; }
.emap-key { display: inline-block; flex: none; }
.emap-key--band { width: 22px; height: 10px; background: var(--bone-0); }
.emap-key--total, .emap-key--partial { width: 10px; height: 10px; border-radius: 50%; }
.emap-key--total { background: var(--corona); }
.emap-key--partial { box-shadow: inset 0 0 0 1.5px var(--bone-0); }

/* place panel: a column ruled off the map, not a card */
.emap-panel {
  padding: clamp(20px, 3vw, 36px) 0 28px clamp(20px, 3vw, 36px);
  border-left: 1px solid var(--line-1);
  scroll-margin-top: 90px;
}
.emap-select { display: flex; flex-direction: column; gap: 8px; }
.emap-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 11px 36px 11px 12px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--paper-bright) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338404B' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
  font: inherit;
  font-size: 16px;
  color: var(--bone-0);
  cursor: pointer;
}
.emap-select select:focus { outline: none; border-color: var(--corona); }
.emap-panel__title {
  margin-top: 26px;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--bone-0);
}
.emap-panel__status { margin: 10px 0 0; }

.emap-sun { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.emap-sun svg { flex: none; width: 72px; height: 72px; }
.emap-sun__face { fill: var(--corona); }
.emap-sun__moon { fill: var(--bone-0); transition: cx .4s ease, cy .4s ease; }
.emap-sun__ring { fill: none; stroke: var(--corona); stroke-width: 1; opacity: 0; }
.emap-sun.is-total .emap-sun__ring { opacity: 1; }
.emap-sun__text { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.emap-sun__pct { font-size: 34px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: var(--bone-0); font-variant-numeric: tabular-nums; }

.emap-phases { margin: 22px 0 0; border-top: 1px solid var(--line-2); }
.emap-phases > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-1);
}
.emap-phases dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 3px;
}
.emap-phases dd { margin: 0; color: var(--bone-0); font-variant-numeric: tabular-nums; }
.emap-phases .is-key dt { color: var(--bone-0); }
.emap-phases .is-key dd { color: var(--corona-dim); }

.emap-bar { position: relative; height: 2px; margin-top: 24px; background: var(--line-2); }
.emap-bar__total { position: absolute; top: -3px; bottom: -3px; background: var(--bone-0); }
.emap-bar__max { position: absolute; top: -6px; bottom: -6px; width: 1px; background: var(--corona); }
.emap-bar-ends { display: flex; justify-content: space-between; margin-top: 10px; }
.emap-panel__zone { margin: 16px 0 0; }

/* ---------- ledger sections ---------- */
.emap-segment { margin-top: clamp(40px, 7vh, 72px); }
.emap .segment-title { margin-bottom: 14px; }
.emap-intro { margin: 0 0 clamp(20px, 4vh, 32px); max-width: 60ch; }
/* questions: ruled folds */
.emap-faq__list { border-top: 1px solid var(--line-2); max-width: 880px; }
.emap-faq__row { border-bottom: 1px solid var(--line-1); }
.emap-faq__row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.emap-faq__row summary::-webkit-details-marker { display: none; }
.emap-faq__row summary h3 { margin: 0; font-size: 18px; font-weight: 400; letter-spacing: -0.01em; color: var(--bone-0); }
.emap-faq__row summary:hover h3 { color: var(--corona-dim); }
.emap-faq__row summary:focus-visible { outline: 1px solid var(--corona); outline-offset: 4px; }
.emap-faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.emap-faq__icon::before, .emap-faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--bone-0); }
.emap-faq__icon::after { transform: rotate(90deg); }
.emap-faq__row[open] .emap-faq__icon::after { display: none; }
.emap-faq__row p { margin: -4px 0 20px; max-width: 68ch; }

.emap-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

.emap .product-journal { margin: clamp(32px, 5vh, 48px) 0 clamp(48px, 8vh, 80px); color: var(--text-muted); max-width: 80ch; line-height: 1.7; }
.emap .product-journal a { color: var(--bone-0); border-bottom: 1px solid var(--line-2); }
.emap .product-journal a:hover { color: var(--corona-dim); border-color: var(--corona); }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .emap-explorer { grid-template-columns: minmax(0, 1fr); }
  .emap-map { padding-right: 0; }
  .emap-panel { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-1); }
}
@media (max-width: 560px) {
  .emap-count__grid > span { padding-right: 8px; }
  .emap-count__grid > span + span { padding-left: 10px; }
  /* the svg draws about 3x smaller on a phone: scale labels and dots back up */
  .map-label { font-size: 26px; stroke-width: 7px; }
  .map-city circle { r: 9; stroke-width: 2.5; }
  .map-city.is-active circle { r: 14; stroke-width: 3; }
  .map-ring { r: 22; stroke-width: 2; }
}