/*!
 * Gaussian Splat Explorer — page styling
 * © 2026 Michael Cohen. All rights reserved.
 * https://mcohen.info/spatial-media/GaussianSplats/
 */
/* Gaussian Splat Explorer — page styling.
   The shared design system (typography, theme tokens, .chapter-* blocks) is
   inherited from style.css, which is vendored from the Sonic site this page
   was split out of. Everything below is specific to the explorer.

   The Sonic stylesheet reserves a left gutter for that site's sidebar; this
   page is standalone and has none, so the gutter is reclaimed here rather than
   by editing the vendored file, which stays a verbatim copy. */
.main-content{ margin-left:0; }
.chapter-content{ padding-top:var(--space-lg,24px); }

/* standalone top bar, in place of the site nav */
.gs-topbar{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:14px 0 12px; border-bottom:1px solid var(--color-border,#2a2f3a); margin-bottom:8px; }
.gs-mark{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:15px;
  letter-spacing:-.01em; color:var(--color-text,#e7e9ee); }
.gs-topbar a{ font-size:12px; color:var(--color-text-muted,#8b93a0); text-decoration:none; }
.gs-topbar a:hover{ color:var(--color-accent,#4f9dde); text-decoration:underline; }
.gs-topbar .gs-spacer{ margin-left:auto; }

  /* The instrument panels keep a dark look on either site theme; page chrome is theme-aware. */
  .stage{ display:grid; grid-template-columns:minmax(320px,1fr) minmax(280px,340px);
    gap:16px; align-items:start; max-width:1180px; margin-top:var(--space-md,16px); }
  .stage > .canvas-card{ grid-column:1; grid-row:1; }
  .stage > .sh-panel{ grid-column:2; grid-row:1; }
  .stage > .controls-row{ grid-column:1 / -1; grid-row:2;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
  .stage > .basis-strip{ grid-column:1 / -1; grid-row:3; }
  .stage > .storage-strip{ grid-column:1 / -1; grid-row:4; }
  @media (max-width:860px){
    .stage{ grid-template-columns:1fr; }
    .stage > .canvas-card, .stage > .sh-panel, .stage > .controls-row,
    .stage > .basis-strip, .stage > .storage-strip{ grid-column:1; grid-row:auto; }
    .stage > .controls-row{ grid-template-columns:1fr; }
  }
  .canvas-card{ background:#161a21; border:1px solid #262c37; border-radius:12px; padding:12px; position:relative; }
  #gs-view{ width:100%; height:auto; display:block; border-radius:8px; cursor:grab; touch-action:none; background:#0e1116; }
  #gs-view:active{ cursor:grabbing; }
  .hud{ position:absolute; top:16px; left:16px; font:11px/1.5 ui-monospace,Menlo,monospace; color:#8e96a3;
    pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.8); }
  .panel{ background:#161a21; border:1px solid #262c37; border-radius:12px; padding:14px 16px; }
  .panel h2{ font-size:13px; letter-spacing:.01em; color:#c3c9d4; margin:0 0 10px; }
  .panel h2 + .note{ margin-top:-4px; }
  .row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
  button{ font:inherit; font-size:12px; background:#222833; color:#dfe3ea; border:1px solid #333b48;
    border-radius:7px; padding:5px 9px; cursor:pointer; }
  button:hover{ background:#2b3340; }
  button.active{ background:#3a4d6b; border-color:#4f6a94; color:#fff; }
  button.on{ background:#3a4d6b; border-color:#4f6a94; color:#fff; }
  select{ font:inherit; font-size:12px; background:#222833; color:#dfe3ea; border:1px solid #333b48; border-radius:7px; padding:5px 8px; }
  label.ctl{ display:flex; align-items:baseline; gap:6px; font-size:12px; color:#aeb4bf; margin:0 0 4px; }
  label.ctl span{ margin-left:auto; color:#8b93a0; font-family:ui-monospace,Menlo,monospace; font-size:11px; }
  .gs-slider{ margin-bottom:8px; }
  .gs-slider input[type=range]{ width:100%; }
  .gs-subhead{ font-size:11px; color:#9aa0ab; margin:12px 0 6px; padding-bottom:4px; border-bottom:1px solid #242a34; }
  .gs-subhead:first-child{ margin-top:0; }
  .gs-quat{ font:11px/1.5 ui-monospace,Menlo,monospace; color:#7f8794; margin:-2px 0 4px; }
  .note{ font-size:11px; color:#7f8794; line-height:1.5; margin:0; }
  /* spherical-harmonic coefficient editor — same shape as the acoustic explorer's */
  .gs-coeffs{ display:flex; flex-direction:column; gap:2px; max-height:520px; overflow-y:auto; padding-right:4px; }
  .gs-degblock{ border-left:3px solid var(--deg,#888); padding:6px 0 6px 10px; margin-bottom:6px; }
  .gs-degblock.beyond{ opacity:.38; }
  .gs-degblock .gs-deghead{ font-size:11px; color:#9aa0ab; margin-bottom:4px; }
  .gs-coeff{ display:grid; grid-template-columns:62px 1fr 40px; align-items:center; gap:8px; padding:1px 0; }
  .gs-coeff .nm{ font-family:ui-monospace,Menlo,monospace; font-size:11px; color:#cfd4dd; }
  .gs-coeff .nm sub, .gs-coeff .nm sup{ font-size:8px; }
  .gs-coeff input[type=range]{ width:100%; }
  .gs-coeff .val{ font-family:ui-monospace,Menlo,monospace; font-size:10px; color:#8b93a0; text-align:right; }
  /* the radiance-sphere preview */
  .gs-preview{ display:flex; gap:12px; align-items:flex-start; margin-top:10px; }
  #gs-radsphere{ width:132px; height:132px; flex:0 0 auto; border-radius:8px; background:#0e1116; display:block; }
  /* basis pyramid */
  .gs-basis-grid{ display:flex; flex-direction:column; gap:4px; }
  .gs-basis-row{ display:flex; gap:6px; justify-content:safe center; align-items:center; }
  .gs-basis-grid.numbers{ max-width:400px; margin:0 auto; }
  .gs-basis-grid.numbers .gs-basis-row button{ width:30px; height:26px; padding:0; font:10px/1 ui-monospace,monospace; }
  .gs-basis-grid.thumbs{ overflow-x:auto; }
  .gs-basis-grid.thumbs .gs-basis-row button{ width:auto; height:auto; padding:3px; border-radius:8px; line-height:0; }
  .gs-basis-grid.thumbs .gs-basis-row button canvas{ display:block; border-radius:5px; width:var(--cell,56px); height:auto; }
  .gs-basis-grid.thumbs .gs-basis-row button.active{ background:#222833; box-shadow:0 0 0 2px var(--cellhue,#4f6a94); }
  .gs-basis-grid button.beyond{ opacity:.35; }
  .gs-cell-lab{ display:block; font:9px/1.6 ui-monospace,monospace; color:#8b93a0; text-align:center; }
  .gs-rowlab{ flex:0 0 30px; font:10px/1 ui-monospace,monospace; text-align:right; padding-right:3px; }
  /* pixel inspector */
  .gs-inspect{ margin-top:10px; min-height:96px; background:#12161d; border:1px solid #232935; border-radius:8px; padding:8px 10px; }
  table.gs-blend{ border-collapse:collapse; font:11px/1.5 ui-monospace,Menlo,monospace; color:#cfd4dd; }
  table.gs-blend th{ color:#7f8794; font-weight:400; text-align:right; padding:0 10px 2px 0; }
  table.gs-blend td{ text-align:right; padding:0 10px 0 0; }
  .gs-sw{ width:11px; height:11px; border-radius:3px; display:inline-block; border:1px solid #333b48; }
  .gs-dim{ font:11px/1.5 Inter,system-ui,sans-serif; color:#7f8794; }
  .gs-solo-banner{ margin-top:10px; padding:8px 12px; background:#1b2130; border:1px solid #33405a; border-radius:8px;
    font-size:12px; color:#cdd3de; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .gs-solo-banner[hidden]{ display:none; }
  .gs-solo-banner button{ margin-left:auto; }
  .gs-storage{ font-size:12px; line-height:1.6; color:#aeb4bf; }
  .gs-storage b{ color:#dfe3ea; font-weight:600; }
  .tip{ position:fixed; z-index:50; max-width:260px; background:#0b0d11; color:#e7e9ee; border:1px solid #3a4351;
    border-radius:8px; padding:8px 10px; font-size:11px; line-height:1.45; pointer-events:none; opacity:0;
    transition:opacity .1s; box-shadow:0 6px 24px rgba(0,0,0,.5); }
  .unlisted-flag{ display:inline-block; font:11px/1 ui-monospace,monospace; color:#d8a657; border:1px solid #6b5426;
    background:#2a2314; border-radius:5px; padding:4px 8px; margin-bottom:10px; letter-spacing:.02em; }
  /* explainer — same measure-in-columns treatment as the other explorers */
  .sh-explain{ margin-top:20px; background:#161a21; border:1px solid #262c37; border-radius:12px;
    padding:6px 22px 16px; max-width:1180px; column-width:34em; column-gap:2.6rem; }
  .sh-explain > summary{ cursor:pointer; font-weight:600; color:#cdd3de; padding:10px 0; font-size:14px; column-span:all; }
  .sh-explain h3{ font-size:14px; letter-spacing:.01em; color:#cdd3de; margin:18px 0 6px; column-span:all; }
  .sh-explain p{ font-size:13px; line-height:1.55; color:#aeb4bf; margin:0 0 8px; }
  .sh-explain code{ background:#222833; padding:1px 5px; border-radius:4px; font-size:12px; color:#dfe3ea; }
  .sh-explain .lead{ font-size:13.5px; color:#c3c9d4; }
  .sh-explain ol, .sh-explain ul{ margin:0 0 8px; padding-left:22px; }
  .sh-explain li{ font-size:13px; line-height:1.55; color:#aeb4bf; margin:0 0 10px; }
  .sh-explain li b{ color:#cdd3de; }
  .sh-explain > p, .sh-explain > li, .sh-explain > ol, .sh-explain > ul{ break-inside:avoid; }
.sh-explain ul li{ font-size:13px; line-height:1.55; color:#aeb4bf; margin:0 0 8px; }
.sh-explain ul li b{ color:#cdd3de; }

/* ---------------------------------------------- capture-and-fit section ---- */
.cf-sectionhead{ font-family:'Space Grotesk',system-ui,sans-serif; font-size:22px; font-weight:700;
  letter-spacing:-.01em; color:var(--color-text,#e7e9ee); margin:38px 0 6px; }
.cf-lede{ font-size:14px; line-height:1.6; color:var(--color-text-muted,#9aa0ab); max-width:46em; margin:0 0 4px; }
/* The overview and its controls share the top row; the paired comparisons take
   the full width beneath, because three images side by side starve in a column. */
.cf-stage > .canvas-card{ grid-column:1; grid-row:1; }
.cf-stage > .panel:not(.cf-statspanel){ grid-column:2; grid-row:1; }
.cf-stage > .cf-rows{ grid-column:1 / -1; grid-row:2; }
.cf-stage > .cf-statspanel{ grid-column:1 / -1; grid-row:3; }
.cf-rows{ display:flex; flex-direction:column; gap:14px; }
.cf-row{ background:#161a21; border:1px solid #262c37; border-radius:12px; padding:12px 14px; }
.cf-trip{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cf-trip figure{ margin:0; }
.cf-trip canvas{ width:100%; height:auto; display:block; border-radius:7px; background:#0e1116;
  image-rendering:auto; }
.cf-trip figcaption{ font-size:11px; color:#7f8794; margin-top:4px; text-align:center; }
.cf-cap{ font-size:12px; color:#aeb4bf; margin:0 0 8px; }
.cf-train{ color:#7fd8ff; }
.cf-held{ color:#ffd166; }
.cf-psnr{ font:11px/1.6 ui-monospace,Menlo,monospace; color:#8b93a0; margin:8px 0 0; }
.cf-psnr b{ color:#dfe3ea; }
.cf-gap{ font-size:12px; line-height:1.6; color:#aeb4bf; margin:2px 0 0; padding:10px 14px;
  background:#1b2130; border:1px solid #33405a; border-radius:8px; }
.cf-gap b{ color:#e7e9ee; }
#cf-overview{ width:100%; height:auto; display:block; border-radius:8px; cursor:grab;
  touch-action:none; background:#0e1116; }
#cf-overview:active{ cursor:grabbing; }
@media (max-width:860px){
  .cf-stage > .canvas-card, .cf-stage > .panel:not(.cf-statspanel),
  .cf-stage > .cf-rows, .cf-stage > .cf-statspanel{ grid-column:1; grid-row:auto; }
  .cf-trip{ grid-template-columns:1fr; gap:8px; }
}

/* ------------------------------------------------------ photosphere section -- */
.ps-stage > .ps-source{ grid-column:1; grid-row:1; }
.ps-stage > .ps-controls{ grid-column:2; grid-row:1; }
.ps-stage > .ps-rows{ grid-column:1 / -1; grid-row:2; background:#161a21; border:1px solid #262c37;
  border-radius:12px; padding:12px 14px; }
.ps-stage > .ps-shpanel{ grid-column:1 / -1; grid-row:3; }
/* A 2:1 strip at full panel width is 470 px tall and dominates the page; cap it. */
.ps-strip{ width:100%; max-width:660px; height:auto; display:block; border-radius:7px;
  background:#0e1116; margin-top:8px; }
.ps-drop{ border:1px dashed #3a4351; border-radius:10px; padding:16px 12px; text-align:center;
  background:#12161d; transition:background .12s, border-color .12s; }
.ps-drop.ps-dragover{ border-color:#7fd8ff; background:#18202b; }
.ps-droplabel{ font-size:12px; color:#aeb4bf; cursor:pointer; }
.ps-browse{ color:#7fd8ff; text-decoration:underline; }
.ps-file{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ps-status{ font-size:11px; line-height:1.5; color:#7f8794; margin:8px 0 0; }
.ps-status.ps-ok{ color:#8fd6a6; }
.ps-status.ps-warn{ color:#ffd166; }
#ps-name{ margin-top:4px; font-family:ui-monospace,Menlo,monospace; }
#ps-view{ cursor:grab; touch-action:none; }
#ps-view:active{ cursor:grabbing; }
@media (max-width:860px){
  .ps-stage > .ps-source, .ps-stage > .ps-controls,
  .ps-stage > .ps-rows, .ps-stage > .ps-shpanel{ grid-column:1; grid-row:auto; }
}

/* ------------------------------------------------------------ scene import -- */
.gs-imp-drop{ border:1px dashed #3a4351; border-radius:10px; padding:14px 10px; text-align:center;
  background:#12161d; transition:background .12s, border-color .12s; }
.gs-imp-drop.gs-dragover{ border-color:#7fd8ff; background:#18202b; }
.gs-imp-label{ font-size:12px; color:#aeb4bf; cursor:pointer; }
.gs-imp-status{ font-size:11px; line-height:1.55; color:#7f8794; margin:8px 0 0; }
.gs-imp-status.gs-ok{ color:#a7b4c4; }
.gs-imp-status.gs-warn{ color:#ffd166; }
.gs-imp-status b{ color:#dfe3ea; }
.gs-imp-warn{ color:#ffd166; }

/* ------------------------------------------------------------ scene import -- */
.gs-imp-drop{ border:1px dashed #3a4351; border-radius:10px; padding:14px 10px; text-align:center;
  background:#12161d; transition:background .12s, border-color .12s; }
.gs-imp-drop.gs-dragover{ border-color:#7fd8ff; background:#18202b; }
.gs-imp-label{ font-size:12px; color:#aeb4bf; cursor:pointer; }
.gs-imp-status{ font-size:11px; line-height:1.55; color:#7f8794; margin:8px 0 0; }
.gs-imp-status.gs-ok{ color:#a7b4c4; }
.gs-imp-status.gs-warn{ color:#ffd166; }
.gs-imp-status b{ color:#dfe3ea; }
.gs-imp-warn{ color:#ffd166; }
.gs-imp-guide{ margin:6px 0 0; padding-left:18px; }
.gs-imp-guide li{ font-size:11px; line-height:1.55; color:#7f8794; margin:0 0 6px; }
.gs-imp-guide li b{ color:#cdd3de; }
.gs-imp-sub{ font-size:10px; color:#6d7480; }
#gs-imp-list:empty{ display:none; }
#gs-imp-list button{ font-size:11px; padding:4px 8px; }

/* ------------------------------------------------------------------ footer -- */
.gs-footer{ max-width:1180px; margin:26px 0 40px; padding-top:16px;
  border-top:1px solid var(--color-border,#262c37); }
.gs-footer p{ font-size:12px; line-height:1.65; color:var(--color-text-muted,#7f8794); margin:0 0 6px; }
.gs-footer b{ color:var(--color-text,#cdd3de); }
.gs-footer a{ color:var(--color-accent,#7fd8ff); }

/* the scene loader gets the full width: buried in a 240px column it read as
   fine print, and readers looking for it found only the panorama upload */
.stage > .import-strip{ grid-column:1 / -1; }
.import-cols{ display:grid; grid-template-columns:minmax(260px,1fr) minmax(260px,1fr); gap:18px; align-items:start; }
@media (max-width:860px){ .import-cols{ grid-template-columns:1fr; } }
.import-strip .gs-imp-drop{ padding:22px 14px; }
.import-strip .gs-imp-label{ font-size:13px; }
.import-strip .gs-imp-sub code{ background:#222833; padding:1px 5px; border-radius:4px; font-size:11px; color:#cfd4dd; }

/* Sonic › Spherical Harmonics — a hierarchy reads truer than two loose links:
   the explorer is a page within that site, not a peer of it. */
.gs-crumb{ display:inline-flex; align-items:baseline; }
.gs-crumb a{ font-size:12px; color:var(--color-text-muted,#8b93a0); text-decoration:none; }
.gs-crumb a:hover{ color:var(--color-accent,#4f9dde); text-decoration:underline; }
.gs-crumb-sep{ margin:0 6px; font-size:12px; color:#5a626e; }

/* ---------------------------------------------- explorer: keep the view in sight
   The controls run about 2,400 px below a 548 px canvas, so adjusting anything —
   the import budget was the case that prompted this — meant scrolling the scene
   out of view to reach the slider that changes it. Pinning the canvas puts the
   two back on screen together.

   Only above 1000 px: below that the single column is right, and a sticky
   element that fills a phone screen is worse than no sticky element. */
@media (min-width: 1000px) {
  .explorer-stage{ grid-template-columns:minmax(440px,1.12fr) minmax(360px,0.88fr); align-items:start; }
  .explorer-stage > .canvas-card{
    grid-column:1; grid-row:1 / span 3;
    position:sticky; top:12px; align-self:start;
    /* if it ever outgrows the viewport, let it scroll rather than crop */
    max-height:calc(100vh - 24px); overflow:auto;
  }
  .explorer-stage > .sh-panel{ grid-column:2; grid-row:1; }
  .explorer-stage > .controls-row{ grid-column:2; grid-row:2; }
  .explorer-stage > .import-strip{ grid-column:2; grid-row:3; }
  /* the import panel is in a column now, so its two halves stack */
  .explorer-stage .import-cols{ grid-template-columns:1fr; }
}

/* basis table and cost readout live outside the sticky grid: a pinned item and a
   full-width row in the same grid overlap once the pin outlives the row above it */
.wide-strips{ max-width:1180px; display:flex; flex-direction:column; gap:16px; margin-top:16px; }