/* ================================================================
   WORLD MAP - 3D atlas renderer, every floor in section
   Every rule is scoped under .atlas so the artifact's generic class
   names cannot reach the rest of the site.
   ================================================================ */

/* Kill the normal page container constraints */
.container:has(.map-shell) {
    max-width: none;
    padding: 0;
}
.container:has(.map-shell) + .site-footer {
    display: none;
}

/* The chrome takes its colours from the site scheme tokens, so switching scheme
   moves the map with the rest of the site. The fallbacks are the artifact's own
   palette, used only if this stylesheet is ever loaded without tokens.css.
   Sector and route colours are deliberately not themed: those encode terrain and
   direction, and have to mean the same thing in every scheme. */
.atlas{
  --paper:var(--bg-body,#0f151a);
  --panel:var(--bg-panel,#151d24);
  --panel-2:var(--bg-hover,#1c2630);
  --sunk:var(--bg-secondary,#0c1217);
  --rule:var(--border,#243139);
  --rule-soft:var(--bg-active,#1b252d);
  --ink:var(--text-bright,#e8e5dc);
  --dim:var(--text,#9aa6b2);
  --faint:var(--text-dim,#7d8891);
  --brass:var(--highlight,#d8b24a);
  --slate:var(--link,#7cb4d4);
  --route:var(--warn,#e0a34a);
  --start:var(--warn,#e8cf6a);
  --end:var(--error,#e0705c);
  --sans:var(--font-body,system-ui,-apple-system,sans-serif);
  --cond:var(--font-display,var(--font-body,system-ui,sans-serif));
}
.atlas, .atlas *{box-sizing:border-box}
/* .pad and .levels set display from a class, which outranks the browser rule for
   [hidden], so without this the turn pad and the empty level bar never hide */
.atlas [hidden]{display:none!important}
.atlas{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;height:100vh}
.atlas canvas{display:block}
.atlas button,.atlas input{font-family:inherit}
.atlas button:focus-visible,.atlas input:focus-visible,.atlas a:focus-visible,
.atlas [tabindex]:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.atlas .bar{display:flex;align-items:center;gap:18px;padding:9px 16px;
  background:var(--panel);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.atlas .bar h1{font-size:16px;font-weight:600;margin:0;letter-spacing:-.012em;white-space:nowrap}
.atlas .bar h1 span{font-family:var(--cond);font-weight:400;color:var(--faint);margin-left:8px;
  font-size:14px}
.atlas .stats{display:flex;gap:16px;font-size:13.5px;color:var(--dim);
  font-variant-numeric:tabular-nums}
.atlas .stats b{color:var(--ink);font-weight:600}
.atlas .bar .sp{flex:1}
.atlas .zoomer{display:flex;align-items:center;gap:6px}
.atlas .zoomer button{width:26px;height:26px;border:1px solid var(--rule);background:transparent;
  color:var(--dim);border-radius:3px;cursor:pointer;font-size:15px;line-height:1;padding:0}
.atlas .zoomer button:hover{background:var(--panel-2);color:var(--ink)}
.atlas .zoomer .val{font-size:13px;color:var(--faint);min-width:58px;text-align:right;
  font-variant-numeric:tabular-nums}

.atlas .body{display:grid;grid-template-columns:236px 1fr 248px;min-height:0}
.atlas .side{background:var(--panel);display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--rule)}
.atlas .side.right{border-right:0;border-left:1px solid var(--rule)}
.atlas .stage{position:relative;background:var(--paper);min-width:0}
.atlas #atlas-view{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.atlas #atlas-view.drag{cursor:grabbing}
.atlas #atlas-view.turn{cursor:move}

.atlas .levels{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:3px;
  background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:3px 5px}
.atlas .levels .lbl{font-family:var(--cond);font-size:12px;color:var(--faint);
  padding:0 6px 0 2px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atlas .levels button{background:transparent;border:0;color:var(--faint);font-size:12.5px;
  padding:3px 7px;border-radius:2px;cursor:pointer;font-variant-numeric:tabular-nums}
.atlas .levels button:hover{background:var(--panel-2);color:var(--ink)}
.atlas .levels button.on{background:var(--brass);color:#14100a}
.atlas .overlay{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;align-items:center}
.atlas .pad{display:flex;gap:2px;background:var(--panel);border:1px solid var(--rule);
  border-radius:3px;padding:2px}
.atlas .pad button{width:28px;height:26px;border:0;background:transparent;color:var(--dim);
  cursor:pointer;font-size:13px;line-height:1;padding:0;border-radius:2px}
.atlas .pad button:hover{background:var(--panel-2);color:var(--ink)}
.atlas .overlay button{background:var(--panel);border:1px solid var(--rule);
  color:var(--dim);border-radius:3px;padding:5px 10px;font-size:13px;cursor:pointer}
.atlas .overlay button:hover{color:var(--ink);border-color:var(--brass)}

.atlas .sect{padding:12px 13px;border-bottom:1px solid var(--rule-soft)}
.atlas .sect:last-child{border-bottom:0}
.atlas .sect h2{font-family:var(--cond);font-size:13.5px;font-weight:600;margin:0 0 8px;
  color:var(--dim)}
.atlas .find{width:100%;background:var(--sunk);border:1px solid var(--rule);border-radius:3px;
  color:var(--ink);font-size:13.5px;padding:6px 9px}
.atlas .find::placeholder{color:var(--faint)}
.atlas .isobar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 13px 8px;padding:6px 9px;background:var(--panel-2);
  border-left:2px solid var(--brass);border-radius:2px;font-size:13px;color:var(--ink)}
.atlas .isobar button{background:transparent;border:0;color:var(--faint);font-size:12.5px;
  cursor:pointer;padding:0;text-decoration:underline}
.atlas .isobar button:hover{color:var(--ink)}
.atlas .results li a.iso{box-shadow:inset 2px 0 0 var(--brass);color:var(--ink)}
.atlas .results{flex:1;overflow-y:auto;min-height:0;padding:2px 6px 10px}
.atlas .results ul{list-style:none;margin:0;padding:0}
.atlas .results li a{display:flex;justify-content:space-between;gap:8px;align-items:baseline;
  padding:5px 7px;border-radius:3px;color:var(--dim);text-decoration:none;
  font-size:13.5px;cursor:pointer}
.atlas .results li a:hover{background:var(--panel-2);color:var(--ink)}
.atlas .results li a.on{background:var(--panel-2);color:var(--ink);
  box-shadow:inset 2px 0 0 var(--brass)}
.atlas .results li a em{font-style:normal;color:var(--faint);font-size:12.5px;
  font-variant-numeric:tabular-nums;flex:none}
.atlas .results .none{color:var(--faint);font-size:13px;padding:8px 7px}
.atlas .results .grouphd{font-family:var(--cond);font-size:12.5px;color:var(--faint);
  padding:8px 7px 3px;position:sticky;top:0;background:var(--panel)}

.atlas .seg{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--rule);
  border-radius:3px;overflow:hidden}
.atlas .seg button{background:transparent;border:0;border-right:1px solid var(--rule);
  color:var(--faint);font-size:13px;font-weight:500;padding:6px 2px;cursor:pointer}
.atlas .seg button:last-child{border-right:0}
.atlas .seg.viewseg{width:104px;grid-template-columns:1fr 1fr;flex:0 0 auto}
.atlas .seg button:hover{background:var(--panel-2);color:var(--ink)}
.atlas .seg button[aria-pressed="true"]{background:var(--panel-2);color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--brass)}
.atlas .tog{display:flex;align-items:center;gap:9px;background:transparent;border:0;
  padding:4px 2px;cursor:pointer;color:var(--faint);font-size:13.5px;
  text-align:left;width:100%}
.atlas .tog:hover{color:var(--ink)}
.atlas .tog i{width:13px;height:13px;border:1px solid var(--rule);border-radius:2px;
  flex:none;position:relative;background:var(--sunk)}
.atlas .tog[aria-pressed="true"]{color:var(--ink)}
.atlas .tog[aria-pressed="true"] i{background:var(--brass);border-color:var(--brass)}
.atlas .tog[aria-pressed="true"] i::after{content:"";position:absolute;inset:3px;
  background:var(--sunk);border-radius:1px}
.atlas .sld label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13.5px;color:var(--faint);margin-bottom:5px}
.atlas .sld label b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.atlas .sld input[type=range]{width:100%;accent-color:var(--brass);margin:0}

.atlas .pin{background:var(--sunk);border:1px solid var(--rule);border-radius:3px;
  padding:7px 9px;margin-bottom:7px}
.atlas .pin .lbl{font-family:var(--cond);font-size:12.5px;color:var(--faint)}
.atlas .pin .v{font-size:13.5px;color:var(--ink);line-height:1.3}
.atlas .pin.a{border-left:3px solid var(--start)}
.atlas .pin.b{border-left:3px solid var(--end)}
.atlas .pin .v.empty{color:var(--faint)}
.atlas .ramp{margin:0 0 7px}
.atlas .ramp i{display:block;height:7px;border-radius:2px;
  background:linear-gradient(90deg,rgb(146,108,246),rgb(214,110,226),rgb(255,184,236))}
.atlas .ramp span{font-size:11.5px;color:var(--faint);display:inline-block;max-width:48%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.atlas .ramp span:last-child{float:right;text-align:right}

.atlas .route{font-size:13.5px;color:var(--dim);margin:0 0 8px}
.atlas .route .warn{color:#e0a24a;font-size:12.5px;display:block;margin-top:4px;line-height:1.35}
.atlas .steps li.rev .d{color:#e0a24a}
.atlas .steps li.rev .r{color:var(--faint)}
.atlas .route b{color:var(--ink);font-variant-numeric:tabular-nums}
.atlas .steps{flex:1;overflow-y:auto;min-height:0;padding:0 13px 12px;margin:0;list-style:none}
.atlas .steps{position:relative}
.atlas .steps::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:2px;
  border-radius:1px;background:linear-gradient(180deg,var(--r0),var(--r1),var(--r2))}
.atlas .steps li{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:5px 0 5px 12px;
  border-bottom:1px solid var(--rule-soft);font-size:13px;align-items:baseline}
.atlas .steps li:last-child{border-bottom:0}
.atlas .steps .d{font-family:var(--cond);color:var(--faint);font-size:12.5px}
.atlas .steps .d b{color:var(--ink);font-weight:600;margin-left:3px}
.atlas .steps .r{color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.atlas .steps li.xing{border-bottom:0;padding-top:11px;padding-bottom:2px}
.atlas .steps li.xing span:last-child{font-family:var(--cond);font-size:12px;
  color:var(--slate);letter-spacing:.01em}
.atlas .steps .tg{font-style:normal;font-family:var(--cond);font-size:11px;
  padding:0 5px;border-radius:2px;margin-left:6px;white-space:nowrap}
.atlas .steps .tg.rv{background:rgba(224,162,74,.16);color:#e0a24a}
.atlas .steps .tg.dg{background:rgba(140,200,255,.16);color:#8cc8ff}
.atlas .steps li.rev .d{color:#e0a24a}
.atlas .ghost{background:transparent;border:1px solid var(--rule);color:var(--dim);
  border-radius:3px;padding:5px 10px;font-size:13px;cursor:pointer;width:100%}
.atlas .ghost:hover{color:var(--ink);border-color:var(--brass)}
.atlas .hint{font-size:12.5px;color:var(--faint);line-height:1.4;margin:7px 0 0}
.atlas .key{display:flex;flex-direction:column;gap:3px;margin-top:9px;font-size:12.5px;
  color:var(--dim)}
.atlas .key span{display:flex;align-items:center;gap:7px}
.atlas .key i{width:16px;height:0;border-top:2px solid;flex:none}
@media (max-width:1000px){
.atlas .body{grid-template-columns:1fr}
.atlas .side{display:none}
.atlas{overflow:auto}
.atlas{height:auto}
.atlas .stage{height:70vh}
}

.atlas .legend{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:12.5px;
  color:var(--dim)}
.atlas .legend span{display:flex;align-items:center;gap:7px;min-width:0}
.atlas .legend i{width:10px;height:10px;border-radius:2px;border:1px solid;flex:none}
.atlas .legend em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}