/* The home page: one full screen showing the transit, a different way each
   time the crystal is tapped. Each view is styled as the thing it is (a
   station board, the sky, a newspaper, a terminal, a till receipt), not as
   the app, and carries the crystal in its own way. home.js picks the view.
   This file holds what the views share; each view has its own stylesheet
   (arrivals.css, sky.css, front-page.css, terminal.css, receipt.css). */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage { position: relative; max-width: none; margin: 0; padding: 0; }
.view { min-height: 100svh; }
.view.entering { animation: enter 0.4s ease-out; }
@keyframes enter { from { opacity: 0; } }

/* The switcher, wherever a view puts it: a button holding the crystal. */
.switch { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.switch:focus-visible { outline: 1px dotted currentColor; outline-offset: 4px; }
.crystal { display: block; width: 100%; height: 100%; overflow: visible; }
.crystal path { fill: none; stroke: currentColor; stroke-linejoin: round; }
.crystal-body { stroke-width: 1.6; }
.crystal-facets { stroke-width: 0.9; }

/* The way to everything else: pinned along the bottom on a computer, after
   the view on a phone, on the view's own ground. */
.bottom-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 18px 20px 24px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  background: var(--surface);
}
.bottom-line a { color: inherit; text-decoration: none; }
.bottom-line a:hover { color: var(--ink); }
@media (min-width: 960px) {
  .bottom-line { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 14px 32px 16px; }
}
.no-script { max-width: 36rem; margin: 0 auto; padding: 3rem 20px 0; }

/* Used by more than one view's crystal. */
@keyframes spin { to { transform: rotateY(360deg); } }