/* Antipodes - styles
   Part of a three-file set: index.html, styles.css, app.js */

:root{
  --paper:#DDE1D8;
  --panel:#F2F4ED;
  --ink:#161B19;
  --muted:#5A635C;
  --rule:#C4CABD;
  --here:#14577E;
  --here-soft:#DBE6EE;
  --there:#8A4718;
  --there-soft:#EFE2D6;
  --font-display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --font-body:"Karla",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}

.app{display:flex;flex-direction:column;height:100dvh}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:11px 20px;border-bottom:1px solid var(--rule);background:var(--panel)}
.topbar h1{margin:0;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.16em;text-transform:uppercase}
.topbar p{margin:0;color:var(--muted);font-size:13.5px;max-width:52ch}
.engine{margin-left:auto;display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.engine b{font-weight:500;color:var(--ink)}
.fault{flex:1 0 100%;margin:8px 0 0;padding:8px 11px;border:1px solid #C9A29B;background:#F7E9E6;color:#7E241A;font-family:var(--font-mono);font-size:11.5px;line-height:1.55;border-radius:2px}
.fault[hidden]{display:none}

/* ---------- layout ---------- */
.grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 118px 1fr}
.panel{display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.panel--here{border-right:1px solid var(--rule)}
.panel--there{border-left:1px solid var(--rule)}
.head{flex:0 0 auto;padding:15px 20px 13px;overflow:auto}

.eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.eyebrow i{width:9px;height:9px;border-radius:2px;display:inline-block}
.panel--here .eyebrow i{background:var(--here)}
.panel--there .eyebrow i{background:var(--there)}

.read{margin-top:9px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline}
.read dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.read dd{margin:0;font-family:var(--font-mono);font-weight:500;font-size:clamp(1.4rem,3.2vw,1.95rem);line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.panel--here .read dd{color:var(--here)}
.panel--there .read dd{color:var(--there)}

.sub{margin-top:7px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}
.note{margin-top:9px;font-size:12.5px;color:var(--muted);line-height:1.45}

.btn{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:2px;cursor:pointer;background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn:hover{background:#fff;border-color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--here);outline-offset:2px}
.btn[aria-pressed="true"]{background:var(--there-soft);border-color:var(--there);color:var(--there)}
.controls{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- find ---------- */
.find{margin-top:13px;display:flex;flex-direction:column;gap:10px}
.find__legend{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.searchbox{position:relative;max-width:460px}
.searchbox input{width:100%;padding:9px 34px 9px 11px;border:1px solid var(--rule);border-radius:2px;background:#fff;color:var(--ink);font-family:var(--font-body);font-size:14px}
.searchbox input:focus-visible{outline:2px solid var(--here);outline-offset:1px;border-color:var(--here)}
.spin{position:absolute;right:11px;top:11px;width:12px;height:12px;border-radius:50%;border:2px solid var(--rule);border-top-color:var(--here);animation:spin .7s linear infinite}
.spin[hidden]{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:4px 0;list-style:none;background:#fff;border:1px solid var(--rule);border-radius:2px;box-shadow:0 8px 22px rgba(22,27,25,.14);max-height:250px;overflow:auto}
.sugg[hidden]{display:none}
.sugg li{padding:8px 11px;font-size:13.5px;line-height:1.35;cursor:pointer}
.sugg li[aria-selected="true"],.sugg li:hover{background:var(--here-soft);color:var(--here)}
.sugg li.is-empty{color:var(--muted);cursor:default;font-family:var(--font-mono);font-size:11.5px}
.sugg li.is-empty:hover{background:transparent;color:var(--muted)}

.coords{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input{width:120px;padding:7px 9px;border:1px solid var(--rule);border-radius:2px;background:#fff;color:var(--ink);font-family:var(--font-mono);font-size:13.5px;font-variant-numeric:tabular-nums}
.field input:focus-visible{outline:2px solid var(--here);outline-offset:1px;border-color:var(--here)}
.err,.keynote{margin:6px 0 0;font-family:var(--font-mono);font-size:11.5px;line-height:1.5}
.err{color:#9B2C22}
.keynote{color:var(--muted)}
.err:empty,.keynote:empty{display:none}

/* ---------- maps ---------- */
.mapwrap{flex:1 1 auto;min-height:300px;position:relative;border-top:1px solid var(--rule);background:#E4E7DF;overflow:hidden}
.map{position:absolute;inset:0}
.crosshair{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);pointer-events:none;z-index:15;filter:drop-shadow(0 0 2px rgba(255,255,255,.95))}
.hint{position:absolute;left:12px;bottom:12px;z-index:14;background:rgba(242,244,237,.92);border:1px solid var(--rule);padding:5px 9px;border-radius:2px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted)}

/* built-in tile view */
.mm{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;background:#E4E7DF}
.mm.is-drag{cursor:grabbing}
.mm-layer{position:absolute;inset:0}
.mm-tile{position:absolute;left:0;top:0;width:256px;height:256px;user-select:none;-webkit-user-drag:none;pointer-events:none}
.mm-pin{position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:var(--there);border:2px solid #fff;box-shadow:0 0 0 6px rgba(138,71,24,.18);pointer-events:none;z-index:12}
.mm-zoom{position:absolute;right:10px;top:10px;z-index:16;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.mm-zoom button{width:30px;height:30px;border:0;background:#fff;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;font-family:var(--font-body)}
.mm-zoom button+button{border-top:1px solid var(--rule)}
.mm-zoom button:hover{background:var(--here-soft)}
.mm-base{position:absolute;right:10px;top:78px;z-index:16}
.mm-base select{font-family:var(--font-mono);font-size:11px;padding:6px 7px;border:1px solid var(--rule);border-radius:2px;background:#fff;color:var(--ink);max-width:170px}
.mm-attr{position:absolute;right:0;bottom:0;z-index:13;background:rgba(242,244,237,.86);padding:3px 7px;font-family:var(--font-mono);font-size:9.5px;color:var(--muted);max-width:70%;text-align:right}

/* ---------- the shaft ---------- */
.spine{position:relative;background:var(--paper);overflow:hidden}
.spine__label{position:absolute;left:50%;top:14px;transform:translateX(-50%);writing-mode:vertical-rl;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.spine__scale{position:absolute;left:0;right:0;top:74px;bottom:26px}
.spine__track{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--rule)}
.spine__fill{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-1px);background:linear-gradient(to bottom,var(--here) 0%,#6B4A3F 50%,var(--there) 100%);opacity:.5}
.tick{position:absolute;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center}
.tick i{display:block;width:15px;height:1px;background:var(--ink);margin:0 auto;opacity:.55}
.tick b{display:block;margin-top:5px;font-family:var(--font-mono);font-weight:500;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.diver{position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:var(--here);opacity:0}
.diver.is-diving{animation:dive 1100ms cubic-bezier(.55,0,.45,1)}
@keyframes dive{0%{opacity:1;top:0;background:var(--here)}50%{background:#6B4A3F}100%{opacity:0;top:100%;background:var(--there)}}
.spine__compact{display:none}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.esri-widget,.esri-widget--button{font-family:var(--font-body)}
.esri-basemap-gallery{max-height:min(420px,60vh)}

@media (max-width:880px){
  .app{height:auto;min-height:100dvh}
  .grid{grid-template-columns:1fr}
  .panel--here{border-right:none}
  .panel--there{border-left:none;border-top:1px solid var(--rule)}
  .mapwrap{height:58vh;flex:none}
  .spine{height:56px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .spine__label,.spine__scale{display:none}
  .spine__compact{display:flex;align-items:center;justify-content:center;gap:12px;height:100%;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .spine__compact span{flex:1;height:1px;background:var(--rule);max-width:90px}
}
@media (prefers-reduced-motion:reduce){.diver.is-diving{animation:none}}