/* Minimal reset + viewer chrome. The rendered element tree carries its own
   inline styles from render.js; this file only styles the stage and status. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  background: #f3f3f4;
  color: #111;
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  /* checkerboard so transparent regions read clearly, like a design tool */
  background-color: #e9e9ec;
  background-image:
    linear-gradient(45deg, #dfe0e4 25%, transparent 25%),
    linear-gradient(-45deg, #dfe0e4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #dfe0e4 75%),
    linear-gradient(-45deg, transparent 75%, #dfe0e4 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

#world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  /* No `will-change: transform` here: pinning the world to its own compositor
     layer makes Safari keep the layer's original rasterisation and stretch it
     when zooming in, so text goes blurry (Chrome re-rasters, Safari doesn't).
     Without the pin, browsers re-render text from outlines at the effective
     scale — crisp at any zoom, matching the native app. */
}

#status {
  position: fixed;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  background: rgba(20, 20, 24, 0.82);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  max-width: 60ch;
}
#status[data-kind="live"]::before { content: "● "; color: #35d07f; }
#status[data-kind="error"] { background: #a5262a; }

/* Landing page (no ?p= in URL) */
.landing {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}
.landing h1 { font-size: 22px; font-weight: 650; margin-bottom: 8px; }
.page-card {
  display: block;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e2e2e6;
  border-radius: 10px;
  text-decoration: none;
  color: #111;
  font-weight: 500;
  transition: border-color 0.15s, transform 0.05s;
}
.page-card:hover { border-color: #9a9aa2; }
.page-card:active { transform: translateY(1px); }