/* css/donostia.css — Slop Donostia additions on top of css/style.css (slop-newyork) */

/* Popovers open against their invoker in js/main.js upstream; here they simply hang under the toolbar */
#teleport-popover,
#credits-popover {
  position: fixed;
  inset: auto 16px auto auto;
  top: 72px;
  margin: 0;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.credits {
  max-width: min(420px, calc(100vw - 32px));
  font-size: 12px;
  line-height: 1.45;
}

.credits p {
  margin: 0 0 8px;
  opacity: 0.86;
}

.credits a,
.brand-subtitle a {
  color: inherit;
}

.mta-bullet {
  font-size: 0.62em;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------------------------------------------------------
   Bottom right: the god camera reads its altitude above sea level (upstream shows it in the helicopter only)
   ------------------------------------------------------------------------------------------------------------------ */
body[data-mode='god'] .gauge-alt {
  opacity: 1;
}

/* ------------------------------------------------------------------------------------------------------------------
   Bottom left: auzoa, place & street-name signs over the radar
   ------------------------------------------------------------------------------------------------------------------ */
:root {
  --sign-blue: #174a8c;
}

.location {
  max-width: min(340px, calc(100vw - 2 * var(--edge)));
}

#hud-location-signs:empty,
.location-place:empty,
.location-poi[hidden] {
  display: none;
}

.location-place,
#hud-district,
.location-poi-line {
  display: flex;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.location-place .loc-eu,
.location-poi-line .loc-eu {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spanish where it differs: dimmer, and the first to give way */
.loc-es {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.6;
}

.loc-es::before {
  content: '·';
  margin: 0 6px;
}

/* Altitude above sea level, shown here only where the telemetry cluster is hidden (touch & narrow screens) */
.location-alt {
  display: none;
  flex: none;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.location-alt::before {
  content: '▲';
  margin: 0 5px 0 10px;
  font-size: 0.8em;
}

.location-poi-line {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 14px rgba(0, 0, 0, 0.4);
  animation: rise-in 0.4s var(--ease-out) both;
}

.location-signs {
  min-width: 0;
  max-width: 100%;
}

/* The blade keeps upstream's shape in a deep blue: the Basque name, the Spanish one under it where it differs */
.street-sign {
  display: inline-flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  max-width: min(300px, calc(100vw - 2 * var(--edge)));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%), var(--sign-blue);
}

.sign-eu,
.sign-es {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sign-es {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.78);
}

/* The radar flies the camera where you click (so it stays put under the pointer); its corner button opens the map */
.radar {
  cursor: crosshair;
}

.radar:hover {
  transform: none;
}

#minimap-canvas {
  touch-action: none;
}

.radar-expand {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(10, 12, 15, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.radar-expand:hover {
  color: var(--taxi-ink);
  background: var(--taxi);
}

.fullmap-title .mta-bullet {
  font-size: 0.62em;
}

#btn-open-map[aria-pressed='true'] {
  background: var(--hover);
}

/* Full map: the data credits under the status line (the map covers the toolbar's credits button) */
.fullmap-footer {
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fullmap-footer > .fullmap-status {
  max-width: 100%; /* still ellipsed, now that the footer is a column */
}

.map-attribution {
  max-width: 100%;
  padding: 0 6px;
  font-size: 10.5px;
  line-height: 1.4;
  text-align: center;
  color: var(--text-2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: auto;
}

.map-attribution a {
  color: inherit;
}

/* Narrow screens keep room under the footer for upstream's map legend, which this map does not have: the footer with
   its credits sits on the bottom edge instead, clear of the map controls above it */
@media (max-width: 820px) {
  .fullmap-footer { bottom: var(--edge); }
}

/* ------------------------------------------------------------------------------------------------------------------
   Narrow screens (down to 360 px): the radar shrinks instead of leaving, the toolbar folds onto two rows
   ------------------------------------------------------------------------------------------------------------------ */
@media (max-width: 620px) {
  .radar { display: block; width: 200px; height: 128px; }
  .hud-bottom-right { display: none; }
  .location-alt { display: inline; }
  .street-sign { padding: 8px 11px 6px; font-size: 14px; }
}

@media (max-width: 440px) {
  .toolbar { width: 182px; height: auto; padding: 5px; flex-wrap: wrap; justify-content: center; }
  .toolbar-divider { display: none; }
  /* the folded toolbar leaves the top-left corner free again */
  .hud-top-left { top: max(var(--edge), env(safe-area-inset-top)); }
  #teleport-popover,
  #credits-popover { top: calc(max(var(--edge), env(safe-area-inset-top)) + 100px); right: 12px; }
  .loc-es { display: none; }
  .fullmap-search-wrap { min-width: 0; }
}

/* ------------------------------------------------------------------------------------------------------------------
   Touch: stick bottom left, hold buttons bottom right, the radar & signs above the stick; no telemetry cluster
   ------------------------------------------------------------------------------------------------------------------ */
#touch-controls {
  bottom: max(var(--edge), env(safe-area-inset-bottom));
}

/* climb & descend stacked under the thumb at the edge, boost beside them */
.touch-actions {
  grid-template-columns: repeat(2, 64px);
  grid-template-areas: 'boost up' 'boost down';
  padding-bottom: 0;
}

.touch-action[data-touch-action='up'] { grid-area: up; }
.touch-action[data-touch-action='down'] { grid-area: down; }
.touch-boost { grid-area: boost; align-self: center; }

.touch-action {
  -webkit-user-select: none;
  user-select: none;
}

body.touch-enabled .hud-bottom-right { display: none; }
body.touch-enabled .location-alt { display: inline; }
body.touch-enabled .radar { display: block; width: 176px; height: 116px; }
body.touch-enabled .radar-expand { width: 36px; height: 36px; top: 4px; right: 4px; }
/* above the stick (136 px) and its caption */
body.touch-enabled .hud-bottom-left { bottom: calc(max(var(--edge), env(safe-area-inset-bottom)) + 172px); }

@media (max-width: 440px) {
  body.touch-enabled .toolbar { width: 194px; padding: 4px; }
  body.touch-enabled .tool-btn .icon-sm { display: none; }
  body.touch-enabled #teleport-popover,
  body.touch-enabled #credits-popover { top: calc(max(var(--edge), env(safe-area-inset-top)) + 114px); }
  .touch-look-hint { top: calc(max(var(--edge), env(safe-area-inset-top)) + 118px); }
}

/* Phones on their side: the signs & a smaller radar sit between the stick and the buttons */
@media (max-height: 500px) {
  body.touch-enabled .hud-bottom-left {
    display: flex;
    left: calc(max(var(--edge), env(safe-area-inset-left)) + 152px);
    bottom: max(var(--edge), env(safe-area-inset-bottom));
    max-width: calc(100% - 2 * var(--edge) - 152px - 150px);
  }
  body.touch-enabled .radar { width: 150px; height: 96px; }
}