/* ============================================================================
   MARSCOIN — design system.
   Cloned from the owner's reference UI (mars-compute): warm-black ink, cream
   paper, Mars red, huge tight display type, tiny tracked mono labels, and an
   instrument-panel app shell.

   ALL tokens live in :root. A visual rehaul edits this file; the markup in
   index/explore/console is semantic and class-driven so it should not need to
   change.
   ========================================================================= */

:root{
  --ink:#070605;
  --ink-2:#0b0a09;
  --ink-3:#100e0c;
  --paper:#ede8df;
  --muted:#90877e;
  --faint:#635c56;
  --line:rgba(237,232,223,.13);
  --line-2:rgba(237,232,223,.22);
  --mars:#ff4d28;
  --rust:#8c2b16;
  --ok:#48e07a;
  --warn:#f4a12e;
  --sans:'Geist','Space Grotesk',-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'Geist Mono','IBM Plex Mono',ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{
  margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font-family:inherit}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--mars);color:#0a0705}

/* ---------------------------------------------------------------- nav */
.nav-shell{
  position:fixed;z-index:40;top:0;left:0;right:0;height:78px;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top)) 3.2vw 0;
  border-bottom:1px solid var(--line);
  background:rgba(7,6,5,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.nav-shell.static{position:sticky}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.06em}
.brand>span:last-child>span{color:var(--mars)}
.brand-mark{
  display:grid;place-items:center;width:27px;height:27px;
  border:1px solid var(--mars);color:var(--mars);font-size:12px;transform:rotate(45deg);
}
.brand-mark>i{transform:rotate(-45deg);font-style:normal}
.nav-shell nav{display:flex;gap:38px;color:#a69d96}
.nav-shell nav a:hover,.nav-shell nav a.on{color:#fff}
.nav-status{border:1px solid rgba(255,77,40,.45);padding:10px 14px;color:#d8d2ca;white-space:nowrap}
.nav-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);
  margin-right:9px;box-shadow:0 0 10px var(--ok);animation:blip 2.4s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------------------------------------------------------------- type */
.eyebrow,.section-tag{
  color:#c9bfb6;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";width:70px;height:1px;background:rgba(255,77,40,.5)}
.eyebrow span,.section-tag span{color:var(--mars)}
h1{font-size:clamp(52px,7.4vw,132px);letter-spacing:-.072em;line-height:.78;font-weight:700}
h1 em{font-style:normal;color:var(--mars);text-shadow:0 0 38px rgba(255,77,40,.24)}
h2{font-size:clamp(40px,5.3vw,86px);line-height:.92;letter-spacing:-.055em;font-weight:700}
.lede{font-size:clamp(17px,2vw,24px);color:#f0eae2;line-height:1.35}
.body{color:var(--muted);line-height:1.8;font-size:15px}
.mono{font-family:var(--mono)}
.k{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.k-mars{color:var(--mars)}

/* ---------------------------------------------------------------- buttons */
.primary{
  display:inline-flex;align-items:center;justify-content:space-between;gap:28px;
  padding:16px 19px;min-width:190px;background:var(--mars);color:#090706;
  text-transform:uppercase;font-family:var(--mono);font-weight:700;font-size:10px;
  letter-spacing:.16em;transition:.2s;border:1px solid var(--mars);
}
.primary:hover:not(:disabled){background:#ff6a48;transform:translateY(-2px)}
.primary:disabled{opacity:.4;cursor:not-allowed}
.ghost{
  display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
  padding:15px 18px;border:1px solid var(--line-2);color:#d9d2ca;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:.2s;
}
.ghost:hover:not(:disabled){border-color:var(--mars);color:#fff}
.ghost:disabled{opacity:.35;cursor:not-allowed}
.text-link{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#cfc7c0}
.text-link span{margin-left:12px;color:var(--mars)}

/* ---------------------------------------------------------------- sections */
.band{padding:clamp(72px,10vw,140px) 7vw;max-width:1600px;margin:auto}
.band.tight{padding-top:clamp(56px,7vw,96px)}
.rule-top{border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- explorer shell */
.explorer{padding:0 0 90px;background:linear-gradient(180deg,#070605 0,#090d12 26%,#070605 100%)}
.explorer-header{max-width:1560px;margin:0 auto 34px;padding:0 3.2vw;
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.explorer-header h2{margin-top:24px;font-size:clamp(46px,6.4vw,104px)}
.explorer-header>p{color:var(--muted);max-width:440px;line-height:1.7;font-size:14px;margin-bottom:8px}

.explorer-app{
  max-width:1560px;margin:auto;position:relative;overflow:hidden;
  height:min(820px,calc(100vh - 250px));min-height:560px;
  border:1px solid rgba(235,225,215,.18);background:#05070a;
  box-shadow:0 35px 100px rgba(0,0,0,.5);
}
.explorer-app::after{content:"";pointer-events:none;position:absolute;inset:0;z-index:9;
  box-shadow:inset 0 0 90px rgba(0,0,0,.55)}

.exp-topbar{
  position:absolute;z-index:20;top:0;left:0;right:0;height:64px;padding:0 14px;
  display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);
  background:rgba(6,8,11,.9);backdrop-filter:blur(14px);font-family:var(--mono);
}
.map-search{position:relative;width:320px;height:38px;display:flex;align-items:center;gap:10px;
  padding:0 11px;border:1px solid rgba(255,255,255,.13);background:#0b0d10;color:#756d67}
.map-search>span{color:var(--mars);font-size:16px}
.map-search input{min-width:0;flex:1;background:none;border:0;outline:0;color:#e8e1da;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.map-search input::placeholder{color:#6a635e}
.search-drop{
  position:absolute;left:-1px;right:-1px;top:39px;max-height:330px;overflow:auto;z-index:30;
  background:#080a0d;border:1px solid var(--line-2);border-top:0;
}
.search-drop button{display:block;width:100%;text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--line);color:#a49c95}
.search-drop button:hover{background:rgba(255,77,40,.09);color:#fff}
.search-drop strong{display:block;font-size:12px;font-weight:500;color:#e6ded6}
.search-drop em{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:#6f6863}
.map-readout{display:flex;flex-direction:column;gap:4px;font-size:8px;letter-spacing:.12em;white-space:nowrap}
.map-readout span{color:#635e5a}
.map-readout strong{color:#bbb3ac;font-weight:400;font-variant-numeric:tabular-nums}
.map-live{margin-left:auto;color:#8d8680;font-size:8px;letter-spacing:.14em;white-space:nowrap}
.map-live i{display:inline-block;width:6px;height:6px;margin-right:8px;background:var(--ok);
  border-radius:50%;box-shadow:0 0 9px var(--ok);animation:blip 2.4s infinite}

.location-rail{
  position:absolute;z-index:18;left:0;top:64px;bottom:0;width:272px;
  padding:16px 12px 0;border-right:1px solid var(--line);
  background:rgba(5,7,10,.84);backdrop-filter:blur(12px);
  display:flex;flex-direction:column;
}
.rail-title{display:flex;justify-content:space-between;padding:0 6px 12px;color:#77706a;
  font-family:var(--mono);font-size:8px;letter-spacing:.16em}
.rail-title span{color:var(--mars)}
.rail-list{flex:1;overflow:auto;margin:0 -12px;padding:0 12px}
.rail-list button{width:100%;min-height:58px;padding:10px 8px;display:grid;
  grid-template-columns:24px 1fr 10px;align-items:center;text-align:left;color:#8f8882;
  border-top:1px solid var(--line);transition:.15s}
.rail-list button:hover,.rail-list button.active{background:rgba(255,77,40,.08);color:#eee7df}
.rail-list button.active{box-shadow:inset 2px 0 0 var(--mars)}
.rail-list small{font-family:var(--mono);font-size:8px;color:#625d58}
.rail-list .lbl{display:flex;flex-direction:column;gap:4px;min-width:0}
.rail-list strong{font-size:12px;font-weight:500;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-list em{color:#6d6762;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;font-style:normal}
.rail-list>button>b{color:var(--mars);font-weight:400}
.rail-foot{border-top:1px solid var(--line);padding:12px 6px calc(12px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr auto;gap:6px;font-family:var(--mono);font-size:8px;letter-spacing:.09em}
.rail-foot span{color:#5d5853}
.rail-foot b{color:#a29a94;text-align:right;font-weight:400;font-variant-numeric:tabular-nums}

/* map stage — real equirectangular Mars */
.map-stage{position:absolute;inset:64px 0 0 272px;overflow:hidden;background:#03060a;cursor:grab}
.map-stage.dragging{cursor:grabbing}
.map-vp{position:absolute;inset:0;overflow:hidden}
.map-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.map-world img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;
  image-rendering:auto;filter:saturate(1.06) contrast(1.05);pointer-events:none}
.map-tiles{position:absolute;inset:0;pointer-events:none}
.map-tiles img{position:absolute;opacity:0;transition:opacity .35s}
.map-tiles img.in{opacity:1}
.graticule{position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:linear-gradient(rgba(120,150,175,.35) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,150,175,.35) 1px,transparent 1px);
  background-size:100% 16.6667%,8.3333% 100%}
.pin{position:absolute;z-index:6;width:12px;height:12px;margin:-6px 0 0 -6px;padding:0;
  border-radius:50%;border:1px solid #ffb49f;background:rgba(255,77,40,.22);
  box-shadow:0 0 0 5px rgba(255,77,40,.08)}
.pin i{position:absolute;inset:3px;background:var(--mars);border-radius:50%}
.pin span{position:absolute;white-space:nowrap;left:17px;top:-4px;color:#d6cdc5;
  font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  text-shadow:0 1px 3px #000;pointer-events:none}
.pin.active{box-shadow:0 0 0 7px rgba(255,77,40,.16),0 0 18px var(--mars);transform:scale(1.25);z-index:8}
.pin.mission{border-color:#7fd6ff;background:rgba(80,190,255,.25);box-shadow:0 0 0 5px rgba(80,190,255,.08)}
.pin.mission i{background:#54c8ff}
.pin.mission.active{box-shadow:0 0 0 7px rgba(80,190,255,.18),0 0 18px #54c8ff}
.crosshair{position:absolute;z-index:7;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:var(--mars);box-shadow:0 0 8px var(--mars)}
.crosshair::before{left:50%;top:0;bottom:0;width:1px;margin-left:-.5px}
.crosshair::after{top:50%;left:0;right:0;height:1px;margin-top:-.5px}
.route-line{position:absolute;inset:0;pointer-events:none;overflow:visible}

.axis{position:absolute;z-index:5;color:#5b666e;font-family:var(--mono);font-size:7px;
  letter-spacing:.12em;display:flex;justify-content:space-between;pointer-events:none}
.axis-x{left:8px;right:8px;bottom:8px}
.axis-y{top:8px;bottom:26px;right:10px;flex-direction:column;align-items:flex-end}
.scale-key{position:absolute;z-index:5;bottom:26px;left:16px;color:#6d757a;
  font-family:var(--mono);font-size:7px;letter-spacing:.12em;pointer-events:none}
.scale-key b{display:block;border-top:1px solid #8d979d;margin-bottom:4px}

.layer-control{position:absolute;z-index:19;left:16px;top:16px;width:150px;padding:11px;
  background:rgba(6,8,11,.86);border:1px solid var(--line);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:8px;letter-spacing:.1em}
.layer-control>span{display:block;color:#5f5a56;margin:2px 4px 8px}
.layer-control>span.ov-lbl{margin-top:10px}
.layer-control button{display:block;width:100%;padding:7px 4px;text-align:left;color:#77716c;
  font-family:var(--mono);font-size:8px;letter-spacing:.08em}
.layer-control button i{display:inline-block;width:7px;height:7px;border:1px solid #514c48;margin-right:8px;vertical-align:middle}
.layer-control button.active{color:#e3dad2}
.layer-control button.active i{background:var(--mars);border-color:var(--mars);box-shadow:0 0 7px var(--mars)}

.zoom-control{position:absolute;z-index:19;left:16px;bottom:22px;width:38px;
  display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);
  background:rgba(6,8,11,.86)}
.zoom-control button{width:36px;height:34px;color:#c2b9b1;font-size:17px}
.zoom-control span{font-family:var(--mono);font-size:8px;color:#7a736e;padding:4px 0;border-block:1px solid var(--line);width:100%;text-align:center}

/* detail card */
.detail-card{
  position:absolute;z-index:22;right:20px;top:84px;bottom:20px;width:352px;
  display:flex;flex-direction:column;
  background:rgba(8,9,11,.94);border:1px solid rgba(255,255,255,.15);border-top:2px solid var(--mars);
  backdrop-filter:blur(18px);transform:translateX(calc(100% + 40px));transition:transform .35s;
}
.detail-card.open{transform:none}
.dc-head{padding:18px 20px 14px;border-bottom:1px solid var(--line);position:relative;flex:0 0 auto}
.dc-kicker{display:flex;justify-content:space-between;gap:10px;color:var(--mars);
  font-family:var(--mono);font-size:7px;letter-spacing:.12em;text-transform:uppercase;
  padding-right:26px}
.dc-kicker b{color:#6f6964;font-weight:400}
.dc-head h3{font-size:25px;line-height:1.05;text-transform:uppercase;margin:14px 0 6px;letter-spacing:-.02em}
.dc-head p{color:#918984;font-size:11px;line-height:1.6}
.dc-close{position:absolute;right:10px;top:8px;color:#77706a;font-size:18px;line-height:1;padding:4px 8px}
.dc-body{flex:1;overflow:auto;padding:16px 20px}
.dc-foot{flex:0 0 auto;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:8px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-bottom:14px}
.stat-grid>div{background:#0a0b0d;padding:11px 12px}
.stat-grid small{display:block;color:#5d5854;font-family:var(--mono);font-size:7px;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.stat-grid strong{color:#ddd4cc;font-family:var(--mono);font-size:14px;font-weight:400;
  font-variant-numeric:tabular-nums}
.stat-grid strong.big{font-size:18px;color:var(--mars)}
.dl{display:grid;grid-template-columns:1fr auto;gap:7px 12px;font-family:var(--mono);font-size:10px}
.dl dt{color:#6f6863;letter-spacing:.06em}
.dl dd{margin:0;text-align:right;color:#c9c0b8;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dl dd.good{color:var(--ok)}
.dl dd.bad{color:var(--mars)}
.sub{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:#6a635e;margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.sub:first-child{margin-top:0;padding-top:0;border-top:0}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);padding:5px 8px;color:#a49c95}
.chip.on{border-color:var(--mars);color:var(--mars)}

/* elevation profile — plotted from real MOLA samples */
.profile{width:100%;height:96px;display:block;background:#0a0c0f;border:1px solid var(--line)}

.note-bar{position:absolute;z-index:12;left:70px;bottom:8px;right:392px;
  color:#4a5158;font-family:var(--mono);font-size:7px;letter-spacing:.15em;
  text-transform:uppercase;text-align:center;pointer-events:none}

/* ---------------------------------------------------------------- misc */
.toastwrap{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(92vw,520px);pointer-events:none}
.toast{font-family:var(--mono);font-size:10px;letter-spacing:.08em;background:#0e1013;
  border:1px solid var(--line-2);padding:12px 16px;width:100%;animation:tin .25s ease;text-transform:uppercase}
.toast.err{border-color:rgba(255,77,40,.55);color:#ffb9a8}
.toast.ok{border-color:rgba(72,224,122,.4)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.empty{color:#5c5651;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-align:center;padding:26px 12px;line-height:1.8;text-transform:uppercase}
.spin{display:inline-block;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .detail-card{width:320px}
  .note-bar{right:360px}
}
@media (max-width:900px){
  .nav-shell{padding:0 20px;height:64px}
  .nav-shell nav{display:none}
  .nav-status{font-size:0;padding:9px 10px}
  .nav-status i{margin:0}
  .band{padding:80px 22px}
  .explorer-header{padding:0 22px;display:block}
  .explorer-header>p{margin-top:20px}
  .explorer-app{height:min(760px,86vh);border-inline:0}
  .location-rail{width:214px}
  .map-stage{left:214px}
  .layer-control{left:228px;width:132px}
  .zoom-control{left:228px}
  .map-search{width:200px}
  .map-readout{display:none}
  .detail-card{width:300px}
  .note-bar{display:none}
}
@media (max-width:640px){
  /* Stack it: search, then the map, then the readout, then the landmark list. */
  .explorer-app{height:auto;min-height:0;display:flex;flex-direction:column;box-shadow:none}
  .explorer-app::after{display:none}
  .exp-topbar{position:relative;order:1;height:auto;min-height:56px;padding:10px;flex-wrap:wrap;gap:10px}
  .map-search{width:100%;order:1}
  .map-live{margin-left:0;order:2;font-size:8px}
  .map-stage{position:relative;order:2;inset:auto;height:50vh;min-height:300px;width:100%}
  .detail-card{position:relative;order:3;inset:auto;width:100%;transform:none;
    border-inline:0;border-bottom:1px solid var(--line);max-height:none}
  .detail-card:not(.open){display:none}
  .dc-body{overflow:visible}
  .dc-foot{padding-bottom:14px}
  .location-rail{position:relative;order:4;inset:auto;width:100%;height:auto;
    border-right:0;padding:12px 10px 0}
  .rail-list{max-height:190px}
  .rail-foot{padding-bottom:12px}
  .layer-control{left:8px;top:8px;width:124px;padding:8px}
  .zoom-control{left:auto;right:8px;bottom:8px;flex-direction:row;width:auto}
  .zoom-control span{border-block:0;border-inline:1px solid var(--line);padding:0 8px;line-height:34px}
  .axis,.scale-key,.note-bar{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}