/* ======================================================================
   GO OUTSIDE  —  first-person ASCII walk around an address
   The view is the page: everything else hides behind one character.
   See dist/views/go-outside.ejs
   ====================================================================== */

:root {
  --go-panel-w: min(360px, 88vw);
}

/* The stage is exactly one screenful, so nothing ever scrolls behind it — and
   on a phone that isn't enough on its own: a drag that starts on the view has
   to stay on the view rather than rubber-banding the page behind it. */
body:has(.go-shell) {
  overflow: hidden;
  overscroll-behavior: none;
}

body:has(.go-shell) .footer-component {
  display: none;
}

/* Fixed rather than in-flow: the view should meet the nav and the edges of the
   window, whatever padding the page shell around it has. */
.go-shell {
  position: fixed;
  top: var(--nav-height, 53px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--color-bg-black);
  font-family: 'Roboto Mono', 'Courier New', monospace;
}

/* ── The view ── */
.go-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: crosshair;
  background: #000;
  /* Dragging to look shouldn't select the characters under the cursor. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.go-layer {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  pointer-events: none;
}

.go-layer--main {
  color: var(--color-terminal-green);
  text-shadow: 0 0 6px rgba(51, 255, 51, 0.25);
}

/* Second layer: the floor. Grey, and grey for a reason — the ramp says
   "near/far" and nothing else, so a road drawn in the same green as the
   buildings is a wall lying down. Colour is the only channel left that can
   separate the ground you walk on from the things standing up out of it. */
.go-layer--ground {
  color: rgba(180, 192, 190, 0.86);
  text-shadow: 0 0 6px rgba(180, 192, 190, 0.20);
}

/* Third layer, same grid, so the address itself can be a different colour. */
.go-layer--accent {
  color: var(--color-cyberpunk-pink);
  text-shadow: 0 0 8px rgba(230, 34, 197, 0.35);
}

/* Fourth layer: everything above the rooflines, plus whatever is falling
   through the view. Pink, so cloud is never mistaken for masonry — but a
   softer, dustier pink than the accent, which is reserved for the one building
   you asked about. */
.go-layer--sky {
  color: rgba(255, 138, 190, 0.62);
  text-shadow: 0 0 7px rgba(255, 138, 190, 0.22);
}

/* ── Compass ──
   Top centre, over the view, always on. Deliberately quiet: it is a navigation
   aid, not a HUD, and the whole point of the page is the picture behind it. */
.go-compass {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  z-index: 2;
}

.go-compass-tape {
  margin: 0;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 1px;
  white-space: pre;
  color: rgba(51, 255, 51, 0.72);
  text-shadow: 0 0 6px rgba(51, 255, 51, 0.25);
}

.go-compass-read {
  margin-top: 1px;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(51, 255, 51, 0.45);
}

/* The street you're standing on. Quieter than the bearing above it: it's an
   answer to "where am I", not something to steer by. Empty when nothing named
   is close enough to claim you. */
.go-compass-street {
  margin-top: 2px;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(196, 208, 205, 0.85);
  /* The view behind it can be anything — a wall of pink rain included — so the
     label carries its own dark halo rather than trusting the sky to be empty. */
  text-shadow: 0 0 4px #000, 0 0 9px rgba(0, 0, 0, 0.9);
  max-width: 46ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .go-compass-tape { font-size: 10px; letter-spacing: 0; }
  .go-compass-read { font-size: 9px; }
  .go-compass-street { font-size: 9px; max-width: 30ch; }
}

/* ── Overlay (loading, errors) ── */
.go-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  padding: var(--space-lg);
  text-align: center;
}

.go-overlay--on {
  opacity: 1;
}

.go-overlay-text {
  color: var(--color-terminal-green);
  font-size: var(--font-size-sm);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: var(--glow-green);
}

.go-overlay-text--error {
  color: var(--color-cyberpunk-pink);
  text-shadow: var(--glow-pink);
}

/* ── Readout strip (off by default) ── */
.go-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(51, 255, 51, 0.75);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  text-align: center;
  pointer-events: none;
  display: none;
}

.go-status--on {
  display: block;
}

/* ── The one character that isn't the view ── */
.go-toggle {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(51, 255, 51, 0.45);
  border-radius: var(--border-radius-sm);
  color: var(--color-terminal-green);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition-fast), transform var(--transition-base),
              box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.go-toggle:hover {
  opacity: 1;
  border-color: var(--color-terminal-green);
  box-shadow: var(--glow-green);
}

/* ── Stroll, in the other corner ──
   The page's one rule is that the chrome is a single character in a corner, so
   the second thing in a corner has to be as quiet as the first: same weight,
   same dimness, and it only lights up when it's actually doing something. */
.go-stroll-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(51, 255, 51, 0.45);
  border-radius: var(--border-radius-sm);
  color: var(--color-terminal-green);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 2px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast);
  /* No 300 ms wait and no grey flash: this gets tapped mid-stride. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.go-stroll-btn:hover {
  opacity: 1;
  border-color: var(--color-terminal-green);
  box-shadow: var(--glow-green);
}

.go-stroll-btn--on {
  opacity: 1;
  color: var(--color-cyberpunk-pink);
  border-color: var(--color-cyberpunk-pink);
  box-shadow: 0 0 12px rgba(230, 34, 197, 0.35);
}

/* ── The thumbstick ──
   Only ever visible while a thumb is down on the left half, and never in the
   way: it is drawn where the thumb landed rather than in a fixed corner, so
   there is no reaching for it. */
.go-stick {
  position: absolute;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  border: 1px dashed rgba(51, 255, 51, 0.35);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 2;
}

.go-stick--on {
  opacity: 1;
}

.go-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid rgba(51, 255, 51, 0.7);
  border-radius: 50%;
  background: rgba(51, 255, 51, 0.14);
  box-shadow: 0 0 10px rgba(51, 255, 51, 0.25);
}

/* ── The one thing a split screen has to say out loud ──
   Touch only, and only while it's new. A hint that stays is clutter; a hint
   that never appears leaves half the controls undiscoverable. */
.go-touch-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: none;
  justify-content: space-around;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(51, 255, 51, 0.75);
  text-shadow: 0 0 6px #000, 0 0 12px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 2;
}

@media (pointer: coarse) {
  .go-touch-hint {
    display: flex;
    opacity: 0;
  }

  /* Fired when the world arrives, not when the page does: a cold Overpass
     lookup can take half a minute, and a hint that has already come and gone
     by the time there is anything to look at is no hint at all. */
  .go-touch-hint--go {
    animation: go-hint 6s ease forwards;
  }
}

@keyframes go-hint {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Ride along the edge of the drawer rather than hiding under it. */
.go-toggle--open {
  opacity: 1;
  transform: translateX(var(--go-panel-w));
  color: var(--color-cyberpunk-pink);
  border-color: rgba(230, 34, 197, 0.55);
}

/* ── The drawer everything else lives in ── */
.go-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: var(--go-panel-w);
  transform: translateX(-101%);
  transition: transform var(--transition-base);
  background: rgba(0, 0, 0, 0.94);
  border-right: 1px solid var(--color-terminal-green);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  /* A slider thumb's glow is a few pixels wider than the track it sits on,
     which is enough to put a horizontal scrollbar under the whole drawer. */
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.go-panel--open {
  transform: translateX(0);
}

.go-panel-inner {
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
  /* The page shell centres text; a column of settings shouldn't be. */
  text-align: left;
}

.go-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  border-bottom: 1px solid rgba(51, 255, 51, 0.3);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
}

.go-title {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--color-cyberpunk-pink);
  letter-spacing: 4px;
  font-style: italic;
  text-transform: uppercase;
}

.go-sub {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.go-close {
  background: none;
  border: none;
  color: var(--color-terminal-green);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.go-close:hover {
  color: var(--color-cyberpunk-pink);
}

/* ── Blocks ── */
.go-block {
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(51, 255, 51, 0.18);
}

.go-block:last-child {
  border-bottom: none;
}

.go-block-title {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--color-cyberpunk-pink);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.go-label {
  font-size: var(--font-size-xs);
  color: var(--color-cyberpunk-pink);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.go-val {
  font-size: var(--font-size-xs);
  color: var(--color-terminal-green);
  font-weight: bold;
  letter-spacing: 1px;
}

.go-hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* ── Address ── */
.go-row {
  display: flex;
  gap: var(--space-sm);
  margin-top: 6px;
}

.go-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(51, 255, 51, 0.35);
  border-radius: var(--border-radius-sm);
  color: var(--color-terminal-green);
  font-family: inherit;
  font-size: var(--font-size-sm);
  letter-spacing: 1px;
  padding: 9px 10px;
}

.go-input:focus {
  outline: none;
  border-color: var(--color-terminal-green);
  box-shadow: var(--glow-green);
}

.go-input::placeholder {
  color: var(--color-text-muted);
}

.go-btn {
  background: transparent;
  border: 1px solid var(--color-terminal-green);
  border-radius: var(--border-radius-sm);
  color: var(--color-terminal-green);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-xs);
  letter-spacing: 2px;
  padding: 9px 16px;
  text-transform: uppercase;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.go-btn:hover:not(:disabled) {
  background: var(--color-terminal-green);
  color: var(--color-bg-black);
  box-shadow: var(--glow-green);
}

.go-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.go-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-sm);
}

.go-chip {
  background: transparent;
  border: 1px solid rgba(51, 255, 51, 0.3);
  border-radius: var(--border-radius-sm);
  color: rgba(51, 255, 51, 0.8);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 5px 8px;
  transition: all var(--transition-fast);
}

.go-chip:hover {
  border-color: var(--color-cyberpunk-pink);
  color: var(--color-cyberpunk-pink);
}

.go-place {
  margin: var(--space-sm) 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(51, 255, 51, 0.8);
}

.go-facts {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--color-text-muted);
}

/* ── Controls ── */
.go-control {
  margin-top: var(--space-md);
}

.go-control:first-child {
  margin-top: 0;
}

.go-control-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 6px;
}

.go-slider {
  width: 100%;
  height: 3px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(51, 255, 51, 0.25);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.go-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-terminal-green);
  box-shadow: var(--glow-green);
  cursor: pointer;
}

.go-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: var(--color-terminal-green);
  box-shadow: var(--glow-green);
  cursor: pointer;
}

.go-select {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(51, 255, 51, 0.35);
  border-radius: var(--border-radius-sm);
  color: var(--color-terminal-green);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 8px 10px;
  cursor: pointer;
}

.go-select:focus {
  outline: none;
  border-color: var(--color-terminal-green);
}

.go-check {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.go-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-cyberpunk-pink);
  cursor: pointer;
}

.go-check label {
  font-size: var(--font-size-xs);
  letter-spacing: 2px;
  color: var(--color-cyberpunk-pink);
  text-transform: uppercase;
  cursor: pointer;
}

/* ── Key legend ── */
.go-keys {
  list-style: none;
  margin: 0;
  padding: 0;
}

.go-keys li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
  font-size: 11px;
  color: var(--color-text-muted);
}

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 5px;
  border: 1px solid rgba(51, 255, 51, 0.4);
  border-radius: 3px;
  background: rgba(51, 255, 51, 0.06);
  color: var(--color-terminal-green);
  font-family: inherit;
  font-size: 10px;
  text-align: center;
}

.go-keys li span {
  margin-left: 4px;
}

.go-keys-note {
  margin-left: 0 !important;
  line-height: 1.45;
}

/* ── Notes ── */
.go-note {
  margin: 0 0 var(--space-sm);
  font-size: 11px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.go-note strong {
  color: rgba(51, 255, 51, 0.85);
  font-weight: normal;
}

.go-note-accent {
  color: var(--color-cyberpunk-pink);
}

.go-note a {
  color: var(--color-terminal-green);
  text-decoration: none;
  border-bottom: 1px dotted rgba(51, 255, 51, 0.4);
}

.go-note a:hover {
  color: var(--color-cyberpunk-pink);
  border-bottom-color: var(--color-cyberpunk-pink);
}

.go-note--muted {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

/* ── Data ──
   A field, what it does, and how many of the buildings in front of you
   actually supplied it. The count sits on the same line as the name because
   the count is the point: this page is mostly guesswork in America and mostly
   survey data in London, and the reader deserves to see which one they're
   standing in. ── */
.go-data-title {
  margin: var(--space-md) 0 var(--space-sm);
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(51, 255, 51, 0.75);
  text-transform: uppercase;
}

.go-data {
  border-left: 1px solid rgba(51, 255, 51, 0.18);
  padding-left: var(--space-sm);
}

.go-data-row {
  margin-bottom: var(--space-sm);
}

.go-data-key {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--color-cyberpunk-pink);
  text-transform: uppercase;
}

.go-data-have {
  flex: 0 1 auto;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--color-terminal-green);
  text-align: right;
  white-space: nowrap;
}

.go-data-desc {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.go-data-desc code {
  font-family: inherit;
  font-size: 10px;
  color: rgba(51, 255, 51, 0.8);
  background: rgba(51, 255, 51, 0.07);
  padding: 0 3px;
  border-radius: 2px;
  white-space: nowrap;
}

.go-data-desc strong,
.go-data-note strong {
  color: rgba(51, 255, 51, 0.85);
  font-weight: normal;
}

.go-data-note {
  margin: var(--space-sm) 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}

.go-data-note code {
  font-family: inherit;
  color: rgba(51, 255, 51, 0.65);
  white-space: nowrap;
}

.go-data-note:empty {
  display: none;
}

/* ── Narrow screens: the drawer takes the width it needs, the view keeps
   the rest of the page to itself. ── */
@media (max-width: 600px) {
  .go-toggle {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 10px;
  }

  .go-stroll-btn {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
  }

  /* The drawer is nearly the whole screen here, so there's nowhere to park the
     toggle that isn't on top of the panel's own close button. */
  .go-toggle--open {
    opacity: 0;
    pointer-events: none;
  }

  /* Everything in the drawer is being hit with a thumb rather than a cursor.
     A 3 px slider and a 13 px thumb are a cursor's dimensions. */
  .go-panel-inner {
    padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  }

  .go-slider {
    height: 5px;
  }

  .go-slider::-webkit-slider-thumb { width: 22px; height: 22px; }
  .go-slider::-moz-range-thumb { width: 22px; height: 22px; }

  .go-chip {
    font-size: 11px;
    padding: 9px 12px;
  }

  .go-btn {
    padding: 12px 18px;
  }

  .go-input,
  .go-select {
    /* Under 16 px, iOS zooms the whole page in when the field takes focus and
       never zooms back out. */
    font-size: 16px;
  }

  .go-toggle,
  .go-stroll-btn,
  .go-close {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}