/* 3D widget capability layer — the component styles assets/js/sky3d.js renders
 * into (.viz3d*). Companion to widgets.css, same idea: an ADD-ON, not a theme.
 * Link it AFTER your book's own stylesheet.
 *
 * Extracted from `atmosfera_chmury_book`'s assets/style.css (the ".viz3d" block
 * plus its two narrow-screen rules), with that book's private token names
 * remapped onto the shared contract already used by viz.js and widgets.css:
 *
 *   --bg-panel      ->  --bg-elevated
 *   --bg-panel-alt  ->  --viz-bg
 *   --text-dim      ->  --text-muted
 *   --amber         ->  --accent
 *   10px radius     ->  --radius
 *
 * Custom properties this file reads (define them in your own stylesheet, or
 * alias them there once — do not edit this file to rename them):
 *
 *   --text     --text-muted   --border   --accent
 *   --bg-elevated             --viz-bg   --radius
 *
 * Two optional ones, both with built-in fallbacks, so a book that doesn't
 * define them still renders correctly:
 *
 *   --mono           monospace stack for readouts, labels and the badge
 *   --display        display face for the widget title
 *   --viz3d-badge-bg background behind the "drag to look around" badge; the
 *                    default is a dark translucent plate, which is right on a
 *                    dark stage and wrong on a light one — override it there.
 *
 * Deliberately no @media (prefers-color-scheme) split of its own — same reason
 * as widgets.css: dark-only and light+dark books both consume this file as-is.
 *
 * See ../../docs/INTEGRATION.md for the full contract and the markup skeleton
 * each widget expects.
 */

.viz3d {
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--bg-elevated);
  padding: 16px 16px 20px;
  margin: 32px 0;
}
.viz3d__head { margin-bottom: 14px; }
.viz3d__title {
  font-family: var(--display, inherit);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--text);
}
.viz3d__sub { margin: 0; font-size: 14px; color: var(--text-muted); }

/* The stage. aspect-ratio rather than a fixed height — the canvas should scale
   with the column width instead of leaving a black band on a phone. */
.viz3d__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--viz-bg);
}
.viz3d__stage canvas { display: block; width: 100%; height: 100%; }

/* An engine without aspect-ratio (pre-2021 browser) would collapse the stage to
   height 0 — and then even the fallback would be invisible. */
@supports not (aspect-ratio: 1) {
  .viz3d__stage { min-height: 210px; }
}

.viz3d__stage.is-grab canvas { cursor: grab; }
.viz3d__stage.is-grab canvas:active { cursor: grabbing; }

/* "Drag to look around" plate — only on widgets that have a camera. */
.viz3d__badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-family: var(--mono, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--viz3d-badge-bg, rgba(20, 22, 26, .72));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px;
  pointer-events: none;
}

/* The no-WebGL fallback. Fills the whole stage, so the reader never looks at an
   empty black rectangle — they get a sentence explaining what happened, and the
   assurance that the prose beside it is complete without the widget. */
.viz3d__fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}
.viz3d.no-webgl .viz3d__fallback { display: flex; }
.viz3d.no-webgl .viz3d__stage canvas { display: none; }
.viz3d__fallback strong { color: var(--text); font-weight: 600; }

/* The cause line, written in by assets/js/sky3d-fallback.js. Brighter than the
   chapter's own sentence, which stays in --text-muted. */
.viz3d__why { color: var(--text); max-width: 46ch; }

/* Slider panel. A 3-column grid (label / slider / readout) keeps the readouts in
   one column, so the numbers don't jump sideways while dragging — the same job
   tabular-nums does inside the readout. */
.viz3d__controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px 12px;
  align-items: center;
  margin-top: 16px;
  font-family: var(--mono, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
  font-size: 12.5px;
  color: var(--text-muted);
}
.viz3d__controls label { white-space: nowrap; }
.viz3d__controls input[type=range] { width: 100%; min-width: 80px; accent-color: var(--accent); }
.viz3d__controls .value-readout {
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Presets (e.g. ten cloud genera driven by one engine). */
.viz3d__presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.viz3d__presets button {
  font-family: var(--mono, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
  font-size: 11.5px;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--viz-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.viz3d__presets button:hover { color: var(--text); border-color: var(--text-muted); }
.viz3d__presets button.is-active { color: var(--accent); border-color: var(--accent); }

.viz3d__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 14px;
  color: var(--text-muted);
}
.viz3d__note p { margin: 0 0 10px; }
.viz3d__note p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .viz3d__controls { grid-template-columns: 1fr; gap: 4px 0; }
  /* Readouts often carry a worded gloss ("45° — around noon"), so nowrap was
     pushing the page sideways. On narrow screens they wrap. */
  .viz3d__controls .value-readout { text-align: left; white-space: normal; }
  .viz3d__stage { aspect-ratio: 4 / 3; }
}

/* The animation loop already honours prefers-reduced-motion in JS (sky3d.js
   renders on parameter change only); this covers any CSS transition here. */
@media (prefers-reduced-motion: reduce) {
  .viz3d__presets button { transition: none; }
}