/* The window view's caption (design/harbour.md section 5): Back to desk top left, and bottom left over
   the sky a kicker, the live line and the map credit, with no backdrop.
   ui/harbour-caption.js builds it. On the phone it sits below the canvas, as every station does. */
.harbour {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.harbour.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out); }
.harbour :is(button, .harbour-caption) { pointer-events: auto; }

.harbour-back {
  position: fixed; top: var(--space-4); left: var(--gutter);
  min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper-raised); color: var(--ink); font: 500 var(--text-small) / 1 var(--font-body); cursor: pointer;
  box-shadow: var(--shadow-1);
}

.harbour-caption {
  position: fixed; left: var(--gutter); bottom: var(--space-6); max-width: calc(100% - 2 * var(--gutter));
  color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.harbour-kicker { margin: 0 0 var(--space-1); color: var(--paper); }
.harbour:focus { outline: none; box-shadow: none; } /* focused on arrival so a screen reader reads its label */
.harbour-line { margin: 0; font-size: var(--text-small); }
.harbour-credit { margin: var(--space-2) 0 0; font-size: var(--text-kicker); opacity: 0.85; }

/* The phone's way in: a quiet text button under the hero's hint, only where the stack shows. */
.hero-look { display: none; }
/* The window sits at the canvas's left edge: its focus label starts inside the edge, not centred on it. */
#window-hotspot:focus-visible::after { left: var(--space-3); transform: translateY(-50%); white-space: normal; width: max-content; max-width: 220px; }

@media (max-width: 767px), (orientation: portrait) {
  #window-hotspot { display: none; } /* the phone camera does not show the window */
  .hero-look {
    display: block; min-height: 44px; margin-top: var(--space-2); padding: 0; border: 0; background: none; pointer-events: auto; /* the hero lets clicks through */
    font: 600 var(--text-small) / 1 var(--font-body); color: var(--terracotta-ink); cursor: pointer;
  }
  .harbour { position: absolute; inset: 0 0 auto; height: auto; }
  .harbour-caption {
    position: absolute; top: calc(60svh + var(--space-5)); bottom: auto; left: var(--gutter); right: var(--gutter);
    color: var(--ink); text-shadow: none;
  }
  .harbour-kicker { color: var(--ink-soft); }
  .harbour-credit { color: var(--ink-soft); opacity: 1; }
}
html.no-webgl .harbour { display: none; }