/* ─────────────────────────────────────────────────────────────
   ginnung tiles — marketing site
   Layer on top of colors_and_type.css.
   ───────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--g-bg-base);
  /* The page is globe-only: prevent any scrolling, rubber-banding, pinch
     zoom, or pull-to-refresh. The canvas swallows wheel/pointer/gesture
     events itself, but this hardens the surface against gestures that
     start outside the canvas (status bar, browser chrome edge). */
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Subtle dot-grid behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 0;
}

#root { position: relative; z-index: 1; }

/* ── Navbar ──────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--g-navbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--g-space-5);
  background: rgba(15, 18, 27, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--g-border);
  z-index: 100;
}
.nav-brand {
  display: flex;
  align-items: baseline;
  gap: var(--g-space-2);
  font-weight: var(--g-weight-bold);
  font-size: var(--g-text-base);
  color: var(--g-text-primary);
  letter-spacing: -0.01em;
}
.nav-brand .product {
  color: var(--g-text-secondary);
  font-weight: var(--g-weight-medium);
}
.nav-brand .dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--g-accent);
  box-shadow: 0 0 8px var(--g-accent);
  align-self: center;
  margin: 0 var(--g-space-1);
  animation: g-pulse 2.4s infinite;
}
@keyframes g-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--g-space-4);
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  color: var(--g-text-secondary);
}
.nav-right a { color: var(--g-text-secondary); }
.nav-right a:hover { color: var(--g-text-primary); text-decoration: none; }
.nav-right .sep { color: var(--g-text-tertiary); }

/* Hamburger — hidden on >= sm, shown on xs */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--g-border);
  color: var(--g-text-secondary);
  width: 36px;
  height: 36px;
  border-radius: var(--g-radius-sm);
  cursor: pointer;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-toggle:hover { color: var(--g-text-primary); border-color: var(--g-border-hover); }

/* ── Hero stage ──────────────────────────────────────────── */
.stage {
  position: relative;
  height: 100vh;
  min-height: 720px;
  width: 100%;
  background:
    radial-gradient(ellipse at center, #232c37 0%, #1a2028 45%, #14181f 100%);
  overflow: hidden;
}
.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.stage canvas:active { cursor: grabbing; }
.stage canvas.zoomed { cursor: crosshair; }

/* Title overlay (top left, below navbar) */
.hero-title {
  position: absolute;
  top: calc(var(--g-navbar-height) + var(--g-space-5));
  left: var(--g-space-5);
  max-width: 520px;
  z-index: 10;
  pointer-events: none;
}
.hero-title h1 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: var(--g-weight-bold);
  margin: 0 0 var(--g-space-3) 0;
  color: var(--g-text-primary);
}
.hero-title h1 .accent { color: var(--g-accent); }
.hero-title p {
  color: var(--g-text-secondary);
  font-size: var(--g-text-md);
  line-height: 1.55;
  max-width: 420px;
}

/* ── Floating panels over canvas ─────────────────────────── */
.panel {
  position: absolute;
  background: var(--g-overlay-bg);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-md);
  padding: var(--g-space-4);
  box-shadow: var(--g-shadow-md);
  z-index: 10;
  font-size: var(--g-text-sm);
  color: var(--g-text-primary);
}
.panel-title {
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-text-tertiary);
  margin: 0 0 var(--g-space-3) 0;
  font-weight: var(--g-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--g-space-2);
}
.panel-title .ledge {
  flex: 1;
  height: 1px;
  background: var(--g-border);
}

/* Status panel: bottom-left */
.status {
  bottom: var(--g-space-5);
  left: var(--g-space-5);
  width: 280px;
}
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--g-space-3);
  margin-bottom: var(--g-space-2);
}
.status-row:last-child { margin-bottom: 0; }
.status-row .label {
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  color: var(--g-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-row .val {
  font-family: var(--g-font-mono);
  font-size: var(--g-text-base);
  color: var(--g-accent);
  font-weight: var(--g-weight-medium);
}
.status-row .val.mono-sm { font-size: var(--g-mono-base); }
.status-row .val.accent { color: var(--g-accent); }
.status-row .val.muted { color: var(--g-text-secondary); }
.status-row .val.amber { color: var(--g-data); }

.progress {
  margin-top: var(--g-space-3);
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--g-violet-from), var(--g-violet-to));
  border-radius: 999px;
  transition: width 200ms ease;
}
.progress-label {
  display: flex;
  justify-content: space-between;
  margin-top: var(--g-space-2);
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  color: var(--g-text-secondary);
}

/* Counters panel: top-right (below navbar) */
.counters {
  top: calc(var(--g-navbar-height) + var(--g-space-5));
  right: var(--g-space-5);
  width: 240px;
}
.counter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--g-space-2) 0;
  border-bottom: 1px solid var(--g-border);
}
.counter:last-child { border-bottom: none; padding-bottom: 0; }
.counter:first-child { padding-top: 0; }
.counter .label {
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g-text-tertiary);
}
.counter .val {
  font-family: var(--g-font-mono);
  font-weight: var(--g-weight-medium);
  font-size: var(--g-text-lg);
  color: var(--g-accent);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.counter .val .unit {
  color: var(--g-text-tertiary);
  font-size: var(--g-text-sm);
  margin-left: 4px;
}

/* Zoom helper / hint, bottom-center */
.hint {
  position: absolute;
  left: 50%;
  bottom: var(--g-space-5);
  transform: translateX(-50%);
  display: flex;
  gap: var(--g-space-4);
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  color: var(--g-text-tertiary);
  background: rgba(15,18,27,0.5);
  border: 1px solid var(--g-border);
  border-radius: 999px;
  padding: 8px 16px;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hint .kbd {
  font-family: var(--g-font-mono);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--g-border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--g-text-secondary);
  margin: 0 4px;
}
.hint i { vertical-align: -1px; font-size: 14px; color: var(--g-text-secondary); margin-right: 4px; }
.hint .item { display: flex; align-items: center; }

/* Zoom indicator (right side rail) */
.zoom-rail {
  position: absolute;
  right: var(--g-space-5);
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 180px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  z-index: 10;
}
.zoom-rail .indicator {
  position: absolute;
  left: -3px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--g-data);
  box-shadow: 0 0 8px var(--g-data);
  transition: top 200ms ease;
}
.zoom-rail .label {
  position: absolute;
  right: 18px;
  top: -8px;
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  color: var(--g-data);
  white-space: nowrap;
  text-align: right;
}

/* ── Tile tooltip ────────────────────────────────────────── */
.tile-tip {
  position: fixed;
  pointer-events: none;
  background: var(--g-overlay-bg);
  border: 1px solid var(--g-border-hover);
  border-radius: var(--g-radius-sm);
  padding: 10px 12px;
  box-shadow: var(--g-shadow-md);
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  color: var(--g-text-primary);
  z-index: 1000;
  min-width: 200px;
  transform: translate(12px, 12px);
  line-height: 1.5;
}
.tile-tip .zxy {
  color: var(--g-accent);
  font-weight: var(--g-weight-bold);
  margin-bottom: 4px;
}
.tile-tip .row {
  display: flex;
  justify-content: space-between;
  gap: var(--g-space-3);
  color: var(--g-text-secondary);
}
.tile-tip .row .v { color: var(--g-data); }
.tile-tip .download-hint {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--g-border);
  color: var(--g-text-tertiary);
  font-size: 10px;
}

/* ── Tile detail modal ───────────────────────────────────── */
.tile-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: var(--g-space-5);
  /* The body kills touch-action globally; re-enable inside the modal so
     the card can scroll on small screens. */
  touch-action: auto;
}
.tile-modal[hidden] { display: none; }

.tile-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tile-modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - var(--g-space-6));
  overflow-y: auto;
  background: var(--g-bg-elevated);
  border: 1px solid var(--g-border-hover);
  border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-lg);
  padding: var(--g-space-5);
  /* Values are copyable even though the page disables selection globally. */
  -webkit-user-select: text;
  user-select: text;
  animation: tile-modal-in 160ms ease;
}
@keyframes tile-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.tile-modal-x {
  position: absolute;
  top: var(--g-space-3);
  right: var(--g-space-3);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-sm);
  color: var(--g-text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.tile-modal-x:hover {
  color: var(--g-text-primary);
  border-color: var(--g-border-hover);
  background: var(--g-bg-overlay);
}

.tile-modal-head {
  margin-bottom: var(--g-space-4);
  padding-right: 40px; /* clear the X button */
}
.tile-modal-eyebrow {
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--g-text-tertiary);
}
.tile-modal-zxy {
  font-family: var(--g-font-mono);
  font-size: var(--g-text-xl);
  font-weight: var(--g-weight-bold);
  color: var(--g-accent);
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.tile-modal-body { font-size: var(--g-text-sm); }

.tile-modal-section + .tile-modal-section { margin-top: var(--g-space-4); }
.tile-modal-section-title {
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-text-tertiary);
  font-weight: var(--g-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--g-space-2);
  margin-bottom: var(--g-space-2);
}
.tile-modal-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--g-border);
}

.tile-modal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--g-space-3);
  padding: 3px 0;
}
.tile-modal-row .k {
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--g-text-tertiary);
  white-space: nowrap;
}
.tile-modal-row .v {
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-base);
  color: var(--g-data);
  text-align: right;
}
.tile-modal-row .v.accent { color: var(--g-accent); }

/* 2×2 corner grid laid out geographically (NW NE / SW SE) */
.tile-modal-corners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--g-space-2);
}
.tile-modal-corner {
  background: var(--g-bg-overlay);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-sm);
  padding: var(--g-space-2) var(--g-space-3);
}
.tile-modal-corner .c-label {
  font-family: var(--g-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-text-tertiary);
}
.tile-modal-corner .c-val {
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  color: var(--g-data);
  line-height: 1.45;
}

.tile-modal-note {
  margin-top: var(--g-space-2);
  font-size: 10px;
  color: var(--g-text-tertiary);
  line-height: 1.4;
}

.tile-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--g-space-2);
  margin-top: var(--g-space-5);
}

.tile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--g-space-2);
  min-width: var(--g-btn-min-width);
  min-height: 40px;
  padding: 0 var(--g-space-4);
  border-radius: var(--g-radius-sm);
  font-family: var(--g-font-sans);
  font-size: var(--g-text-base);
  font-weight: var(--g-weight-semibold);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
  text-decoration: none;
}
.tile-btn:hover { text-decoration: none; }
.tile-btn-ghost {
  background: transparent;
  border-color: var(--g-border);
  color: var(--g-text-secondary);
}
.tile-btn-ghost:hover {
  border-color: var(--g-border-hover);
  color: var(--g-text-primary);
  background: var(--g-bg-overlay);
}
.tile-btn-primary {
  background: var(--g-accent);
  color: var(--g-bg-base);
}
.tile-btn-primary:hover { background: var(--g-accent-hover); }
.tile-btn.is-busy { opacity: 0.7; pointer-events: none; }
.tile-btn .spin { animation: tile-spin 0.7s linear infinite; }
@keyframes tile-spin { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
  .tile-modal { padding: var(--g-space-4); }
  .tile-modal-card { padding: var(--g-space-4); }
  .tile-modal-actions { flex-direction: column-reverse; }
  .tile-btn { width: 100%; }
}

/* ── Below-fold content ──────────────────────────────────── */
.content {
  position: relative;
  padding: var(--g-space-8) var(--g-space-5);
  max-width: 1280px;
  margin: 0 auto;
}

.section-title {
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--g-text-tertiary);
  margin: 0 0 var(--g-space-5) 0;
  display: flex;
  align-items: center;
  gap: var(--g-space-3);
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--g-border);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--g-space-4);
  margin-bottom: var(--g-space-8);
}

.card {
  background: var(--g-bg-elevated);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-md);
  padding: var(--g-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--g-space-2);
  transition: border-color 150ms ease, background 150ms ease;
}
.card:hover {
  border-color: var(--g-border-hover);
  background: #1a212f;
}
.card .icon {
  width: 36px;
  height: 36px;
  border-radius: var(--g-radius-sm);
  background: var(--g-accent-subtle);
  color: var(--g-accent);
  display: grid;
  place-items: center;
  font-size: 18px;
  margin-bottom: var(--g-space-2);
}
.card h3 {
  font-size: var(--g-text-md);
  color: var(--g-text-primary);
  font-weight: var(--g-weight-semibold);
  margin: 0;
}
.card .num {
  font-family: var(--g-font-mono);
  color: var(--g-data);
  font-weight: var(--g-weight-medium);
  font-size: var(--g-text-xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 2px 0 4px 0;
}
.card p {
  color: var(--g-text-secondary);
  font-size: var(--g-text-base);
  line-height: 1.5;
  margin: 0;
}

/* Awesome bar — the brand signature moment */
.awesome {
  margin: var(--g-space-6) 0;
  background: var(--g-bg-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-md);
  padding: var(--g-space-4);
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-base);
  display: flex;
  flex-direction: column;
  gap: var(--g-space-3);
  position: relative;
  overflow: hidden;
}
.awesome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(132,102,249,0) 0%,
    rgba(132,102,249,0.04) 50%,
    rgba(132,102,249,0) 100%);
  pointer-events: none;
}
.awesome-line {
  display: flex;
  align-items: baseline;
  gap: var(--g-space-2);
  position: relative;
}
.awesome-line .prompt {
  color: var(--g-accent);
  font-weight: var(--g-weight-bold);
}
.awesome-line .cmd { color: var(--g-text-primary); }
.awesome-line .cmd .arg { color: var(--g-data); }
.awesome-line .comment { color: var(--g-text-tertiary); }
.awesome-line .out { color: var(--g-text-secondary); padding-left: 16px; }

.endpoint-table {
  margin-top: var(--g-space-2);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--g-space-2) var(--g-space-4);
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
}
.endpoint-table dt {
  color: var(--g-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--g-weight-bold);
}
.endpoint-table dd {
  margin: 0;
  color: var(--g-text-primary);
}
.endpoint-table dd a { color: var(--g-accent); }

/* Footer */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--g-space-3);
  padding: var(--g-space-5) 0;
  border-top: 1px solid var(--g-border);
  color: var(--g-text-tertiary);
  font-family: var(--g-font-mono);
  font-size: var(--g-mono-sm);
}
.foot a { color: var(--g-text-secondary); }
.foot a:hover { color: var(--g-text-primary); text-decoration: none; }
.foot .right { display: flex; gap: var(--g-space-4); }

/* Hero title + side panels: fade smoothly when toggled by .is-zoomed so
   the user gets a clean focused view once they zoom into the globe. */
.status, .counters, .hero-title {
  transition: opacity 240ms ease, transform 240ms ease;
}

/* Responsive — Bootstrap-style breakpoints: lg 900, md 768, sm 576 */
@media (max-width: 900px) {
  .stage { min-height: 0; height: 100vh; height: 100dvh; }
  .hero-title { max-width: 100%; right: var(--g-space-5); }
  .hero-title p { max-width: 100%; }
  .counters { display: none; }
  .status { width: calc(100vw - var(--g-space-5) * 2); }
  .zoom-rail .label { display: none; }
  .content { padding: var(--g-space-6) var(--g-space-4); }
  .awesome { overflow-x: auto; }
  .awesome-line { white-space: nowrap; }
  .endpoint-table { grid-template-columns: 1fr; gap: var(--g-space-1) 0; }
  .endpoint-table dt { margin-top: var(--g-space-3); }
  .endpoint-table dd { word-break: break-all; }
  /* Lift the hint above the full-width status panel. When the user zooms
     and the status fades, the hint stays at its anchored position. */
  .hint { bottom: calc(var(--g-space-5) + 220px); }
}

/* Below md: hero title + status + counters fade away once the user zooms
   the globe in, so the focused tile area isn't covered. */
@media (max-width: 767.98px) {
  body.is-zoomed .status,
  body.is-zoomed .counters,
  body.is-zoomed .hero-title {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }
}

/* xs: collapse nav-right into a hamburger dropdown */
@media (max-width: 575.98px) {
  .nav { padding: 0 var(--g-space-4); }
  .nav-toggle { display: inline-flex; }
  .nav-right {
    position: absolute;
    top: var(--g-navbar-height);
    right: var(--g-space-4);
    flex-direction: column;
    align-items: flex-end;
    gap: var(--g-space-2);
    padding: var(--g-space-3) var(--g-space-4);
    background: var(--g-overlay-bg);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-md);
    font-size: var(--g-mono-sm);
    display: none;
  }
  .nav.open .nav-right { display: flex; }
  .nav-right .sep { display: none; }

  .hero-title { top: calc(var(--g-navbar-height) + var(--g-space-3)); left: var(--g-space-4); right: var(--g-space-4); }
  .hero-title h1 { font-size: clamp(22px, 6vw, 32px); }
  .hero-title p { font-size: var(--g-text-sm); }
  .status { left: var(--g-space-4); bottom: var(--g-space-4); width: calc(100vw - var(--g-space-4) * 2); padding: var(--g-space-3); }
  .hint { font-size: 10px; padding: 6px 10px; gap: var(--g-space-2); }
  .card { padding: var(--g-space-4); }
  .foot { flex-direction: column; align-items: flex-start; }
  .foot .right { flex-wrap: wrap; }
}