/* ============================================================================
   FOW TRAVEL — THE ATLAS LOCATOR
   (Global Atlas Instrument · Phase B · visual authorship repair v0.1.1 ·
    Final Discovery Integration: the Atlas Index is retired, WHERE TO? is the way in)

     §1  locator      a lens on the world: aperture, the name, the state,
                      the way in; the reading is disclosed on interaction
     §2  cruise       the locator condensed with the header capsule
     §3  rail titles  the Hero rail's folio titles (rules this sheet has always
                      carried for them)
     §4  responsive   wide / narrow (the same object re-authored)
     §5  reduced motion

   Tokens come from fow_instrument.css (--foil-w, --hair, --spring, --ih-side,
   --fc, --brackets, --glass-ink). Every control here is a real link or button;
   fow_atlas_locator.js only moves them.
   ============================================================================ */

/* ---------------------------------------------------------------- §1 LOCATOR */
/* THE SLOT. The persistent navigation is centred in what the bar has left over,
   so anything that changes the locator's width moves the ATLAS item. The
   locator therefore takes a fixed share of the bar and reads inside it: a long
   name steps down a size rather than pushing the navigation aside. */
.loc {
  position: relative; display: flex; align-items: center; gap: .95rem; min-width: 0;
  flex: none; width: clamp(17rem, 28vw, 25.5rem);
  margin-left: .2rem; padding: .25rem .7rem .25rem 1.1rem; border-left: 1px solid var(--hair); border-radius: 3px;
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  transition: transform 420ms var(--ease-out-strong);
}
.loc:focus-visible { outline: none; }
.loc:focus-visible::before { content: ""; position: absolute; inset: -.15rem -.25rem -.15rem -.3rem; border-radius: 4px; pointer-events: none; background: var(--brackets); }
.loc:active { transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(.985); }

/* THE APERTURE — a lens with a horizon: the bezel turns with the Hero's
   heading, the iris closes with the scale, the point is the focus */
.loc__ap { position: relative; width: 3.35rem; height: 3.35rem; flex: none; transition: width 520ms var(--ease-out-strong), height 520ms var(--ease-out-strong); }
.loc__ap::before {                                  /* the field the lens gathers: warm, soft, behind */
  content: ""; position: absolute; inset: -34%; border-radius: 50%; pointer-events: none; opacity: .55;
  background: radial-gradient(closest-side, rgba(var(--foil-w-rgb), .16), rgba(var(--foil-w-rgb), .04) 55%, transparent 75%);
  transition: opacity 420ms var(--ease), transform 640ms var(--ease-out-strong);
}
.loc__ap svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.loc__face { fill: url(#loc-world); stroke: rgba(237,233,222,.16); stroke-width: .6; }
.loc__hz { fill: none; stroke: url(#loc-hz); stroke-width: .9; opacity: .9; }
.loc__tk { fill: none; stroke: rgba(237,233,222,.34); stroke-width: 1.6; stroke-dasharray: .7 9.3; }
.loc__tk--maj { stroke: rgba(237,233,222,.62); stroke-width: 2.8; stroke-dasharray: 1.2 88.8; stroke-dashoffset: .6; }
.loc__n { fill: var(--foil-w); }
.loc__ir { fill: rgba(var(--foil-w-rgb), .04); stroke: var(--foil-w); stroke-width: 1; opacity: .95; transition: stroke-dasharray 260ms var(--ease), opacity 260ms var(--ease), fill 320ms var(--ease); }
.loc__ir-t { fill: none; stroke: rgba(237,233,222,.5); stroke-width: .9; stroke-linecap: round; }
.loc__pt { fill: var(--foil-w); filter: drop-shadow(0 0 3px rgba(var(--foil-w-rgb), .9)); transition: r 320ms var(--spring); }
@media (hover: hover) and (pointer: fine) {
  .loc:hover .loc__ap::before { opacity: 1; transform: scale(1.12); }
  .loc:hover .loc__pt { r: 2.2px; }
  .loc:hover .loc__hz { opacity: 1; }
}

/* THE READING — the name is the object; the state stands beside it; country
   and region are printed quietly beneath; coordinates and the way-in mark come
   forward only under the hand or on focus */
/* the reading is an overlay under the name: revealing it never widens the Locator, so the persistent navigation never moves */
.loc__body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "city st"; column-gap: .75rem; align-items: baseline; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.loc__city {
  grid-area: city; font-family: var(--font-display); font-weight: 400; font-size: 1.1875rem; letter-spacing: .16em; line-height: 1; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 260ms var(--ease), font-size 260ms var(--ease), letter-spacing 260ms var(--ease);
}
/* a long reading steps down inside the slot instead of widening it */
.loc[data-len="long"] .loc__city { font-size: 1.0625rem; letter-spacing: .1em; }
.loc[data-len="xl"] .loc__city { font-size: .875rem; letter-spacing: .07em; }
html[lang="ko"] .loc[data-len="long"] .loc__city { font-size: 1.125rem; letter-spacing: .04em; }
html[lang="ko"] .loc[data-len="xl"] .loc__city { font-size: .9375rem; letter-spacing: .02em; }
.loc__st { grid-area: st; display: inline-flex; align-items: center; gap: .42em; font-family: var(--font-data); font-style: normal; font-size: .5625rem; letter-spacing: .2em; color: var(--ink-4); transition: color 260ms var(--ease); }
.loc__st::before { content: ""; width: .55em; height: .55em; border: 1px solid currentColor; background: linear-gradient(135deg, transparent 45%, currentColor 45% 55%, transparent 55%); }
.loc__st[data-pub="1"] { color: var(--evidence); }
.loc__st[data-pub="1"]::before { background: currentColor; }
.loc__st[data-pub="-"] { display: none; }
.loc__read { position: absolute; left: 0; top: calc(100% + .2rem); white-space: nowrap;
  grid-area: read; display: flex; align-items: baseline; gap: .45rem; white-space: nowrap; overflow: hidden; max-height: 0; opacity: 0;
  font-family: var(--font-data); font-size: .5625rem; letter-spacing: .18em; color: var(--ink-4); font-variant-numeric: tabular-nums lining-nums;
  transition: opacity 360ms var(--ease), max-height 520ms var(--ease-out-strong), color 260ms var(--ease);
}
.loc__read > * { transition: opacity 240ms var(--ease); }
.loc__read.is-swap > * { opacity: 0; }
.loc__reg::before { content: "· "; }
.loc__reg:empty { display: none; }
.loc__coord { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; margin-left: 0; color: var(--ink-3); vertical-align: baseline;
  transition: max-width 560ms var(--ease-out-strong), opacity 360ms var(--ease), margin-left 560ms var(--ease-out-strong); }
.loc:hover .loc__coord, .loc:focus-visible .loc__coord { max-width: 12rem; opacity: 1; margin-left: .35rem; }
/* the reading (country · region · coordinates) comes forward under the hand or on focus */
.loc:hover .loc__read, .loc:focus-visible .loc__read { max-height: 1.2rem; opacity: 1; }
/* the way in: its mark brightens under the hand (its room, once the INDEX word's, is kept: the slot does not move) */
.loc__open { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; flex: none; min-width: 3.9rem; margin-left: .15rem; color: var(--ink-4); transition: color 240ms var(--ease); }
.loc__open svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform 460ms var(--spring); }
.loc:hover .loc__open, .loc:focus-visible .loc__open { color: var(--foil-w); }
html[lang="ko"] .loc__city { font-family: var(--cjk-ko), var(--font-display); letter-spacing: .06em; font-size: 1.25rem; }
html[lang="ko"] .loc__st, html[lang="ko"] .loc__read { letter-spacing: .06em; }
html[lang="ko"] .loc__st { font-size: .625rem; }

/* ---------------------------------------------------------------- §2 CRUISE */
.ih[data-cruise="1"] .loc__ap { width: 2.3rem; height: 2.3rem; }
.ih[data-cruise="1"] .loc__read { opacity: 0; max-height: 0; }
.ih[data-cruise="1"] .loc__city { font-size: 1rem; }

/* ---------------------------------------------------------------- §3 RAIL TITLES
   The Hero rail's folios share the .folio__t name with the retired Index's
   folios, and these rules (in this sheet, after v2.css) have always set them;
   they stay exactly as they were so the Hero does not move. The Hero's own
   column also keeps the fade it has always had here. */
.hero__in { transition: opacity 640ms var(--ease); }
.folio__t { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .3rem; }
.folio__t b { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; letter-spacing: .18em; line-height: 1.05; color: var(--ink); text-shadow: 0 1px 12px rgba(5,6,12,.9); }
html[lang="ko"] .folio__t b { font-family: var(--cjk-ko), var(--font-display); letter-spacing: .06em; font-size: 1.25rem; }

/* ---------------------------------------------------------------- §4 RESPONSIVE */
@media (max-width: 1024px) {
  .loc__read { display: none; }
  .loc { gap: .7rem; padding-left: .9rem; }
  .loc__city { font-size: 1.0625rem; }
}
@media (max-width: 760px) {
  .loc { gap: .55rem; padding: .2rem .3rem .2rem .55rem; margin-left: 0; min-width: 0; width: auto; flex: 1 1 auto; }
  .loc__ap { width: 2.15rem; height: 2.15rem; }
  .loc__ap::before { inset: -22%; }
  /* on a phone the reading is the name and the state, nothing else at rest */
  .loc__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "city" "st"; column-gap: 0; row-gap: .14rem; }
  .loc__city { font-size: .9375rem; letter-spacing: .12em; overflow: hidden; text-overflow: ellipsis; }
  .loc__st { font-size: .5rem; letter-spacing: .08em; white-space: nowrap; }
  .loc__read, .loc:hover .loc__read, .loc:focus-visible .loc__read { display: none; }
  .loc__open { min-width: 0; }
  .loc__open svg { width: .7rem; height: .7rem; }
  .ih[data-cruise="1"] .loc__ap { width: 1.9rem; height: 1.9rem; }
  .ih[data-cruise="1"] .loc__read { opacity: 1; max-height: 1rem; }
  .ih[data-cruise="1"] .loc__city { font-size: .875rem; }
  html[lang="ko"] .loc__city { font-size: 1rem; }
  .folio__t b { font-size: 1rem; }
}
@media (max-width: 400px) {
  .loc { padding-left: .45rem; gap: .45rem; }
  .loc__ap { width: 2rem; height: 2rem; }
  .loc__city { font-size: .875rem; }
}

/* ---------------------------------------------------------------- §5 REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .loc, .loc__ap, .loc__ap::before, .loc__ir, .loc__pt, .loc__open, .loc__open svg, .loc__read, .loc__coord { transition: none; }
}