/* ============================================================================
 * geodb3d_shell.css — the geoDB 3D shell (Milestone 1 S3)
 *
 * Layout (threed_platform_architecture.md §5.2): toolbar · SCENE | 3D view |
 * INSPECTOR · status strip. Colours are the ui_v2 tokens (brand_tokens.css)
 * with light fallbacks, so the v2 shell gets light AND dark (both the OS
 * preference and the explicit toggle) and the classic shell stays light.
 *
 * Tablet viewing (ruling U3): when the SHELL is narrower than 900px (a tablet,
 * or a desktop with the panel and Petra docked: a container query, never a
 * viewport breakpoint) the SCENE list is a drawer over the canvas and the hole
 * card a bottom sheet; on touch screens every target is at least 44px.
 * ========================================================================== */

.g3d{
  --g3d-panel: var(--panel, #ffffff);
  --g3d-panel-2: var(--panel-2, #edf1ef);
  --g3d-ink: var(--ink, #1b1926);
  --g3d-ink-2: var(--ink-2, #575264);
  --g3d-ink-3: var(--ink-3, #8b8699);
  --g3d-line: var(--line, #dfe5e2);
  --g3d-accent: var(--accent, #5600ea);
  --g3d-accent-soft: var(--accent-soft, #efe9fd);
  --g3d-good: var(--good, #1a7f4b);
  --g3d-warn: var(--warn, #a05e03);
  --g3d-warn-soft: var(--warn-soft, #faeeda);
  --g3d-bad: var(--bad, #b3352b);
  --g3d-shadow: var(--shadow, 0 1px 2px rgba(27,25,38,.05), 0 6px 20px -10px rgba(27,25,38,.12));
  --g3d-overlay-bg: color-mix(in srgb, var(--g3d-panel) 88%, transparent);
  --g3d-canvas: #87ceeb;          /* the 3D background when the model sets none (light) */
  --g3d-scene-w: 292px;
  --g3d-card-w: 304px;
  --g3d-target: 32px;
  container: g3d / inline-size;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100vh - 128px);
  min-height: 520px;
  color: var(--g3d-ink);
}
/* Full screen (S8, parity G8): the whole shell fills the screen, on its own surface. */
.g3d:fullscreen{ height: 100vh; min-height: 0; padding: 8px; background: var(--g3d-panel); }
.g3d:-webkit-full-screen{ height: 100vh; min-height: 0; padding: 8px; background: var(--g3d-panel); }
/* Dark canvas only where the v2 tokens are themed (the classic shell is always light). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.geodb-v2 .g3d{ --g3d-canvas: #1d2333; }
}
:root[data-theme="dark"] body.geodb-v2 .g3d{ --g3d-canvas: #1d2333; }

/* ── toolbar ──────────────────────────────────────────────────────────── */
.g3d-bar{
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.g3d-title{
  font-weight: 600; margin-right: auto; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 0 12px 0 4px;   /* a gutter between the name and the tools (S3 review j) */
}
.g3d-badge{
  font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px;
  background: var(--g3d-accent-soft); color: var(--g3d-accent);
}
.g3d-tool{
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--g3d-target);
  padding: 4px 10px; border-radius: 8px; border: 1px solid var(--g3d-line);
  background: var(--g3d-panel); color: var(--g3d-ink); font-size: 13px; line-height: 1; cursor: pointer;
  text-decoration: none; list-style: none;
}
.g3d-tool:hover{ background: var(--g3d-panel-2); color: var(--g3d-ink); }
.g3d-tool:disabled{ opacity: .45; cursor: default; }
.g3d-tool[aria-pressed="true"]{ border-color: var(--g3d-accent); color: var(--g3d-accent); }
.g3d-tool:focus-visible, .g3d-eye:focus-visible, .g3d-chip:focus-visible, .g3d-remove:focus-visible{
  outline: 2px solid var(--g3d-accent); outline-offset: 1px;
}
.g3d-ve select{ width: auto; min-width: 64px; padding-top: 0; padding-bottom: 0; height: 24px; font-size: 13px; }
.g3d-sep{ width: 1px; height: 22px; background: var(--g3d-line); margin: 0 2px; }
.g3d-help{ position: relative; }
.g3d-help summary::-webkit-details-marker{ display: none; }
.g3d-shortcuts{
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 280px; margin: 0; padding: 10px 12px;
  list-style: none; background: var(--g3d-panel); border: 1px solid var(--g3d-line); border-radius: 10px;
  box-shadow: var(--g3d-shadow); font-size: 13px;
}
.g3d-shortcuts li{ display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.g3d-shortcuts kbd{
  min-width: 56px; text-align: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  background: var(--g3d-panel-2); color: var(--g3d-ink); border: 1px solid var(--g3d-line); border-radius: 5px; padding: 1px 6px;
}
.g3d-only-narrow{ display: none; }
.g3d-view-name{ font-weight: 500; color: var(--g3d-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── saved views (S4) ─────────────────────────────────────────────────── */
.g3d-views-panel{ min-width: 320px; max-width: min(420px, 90vw); display: flex; flex-direction: column; gap: 8px; }
.g3d-views-current, .g3d-views-save, .g3d-views-note{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.g3d-views-current input{ flex: 1 1 100%; font-size: 12px; }
.g3d-views-label{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g3d-ink-3); }
.g3d-views-save input{ flex: 1 1 160px; min-width: 0; }
.g3d-views-note{ background: var(--g3d-accent-soft); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; }
.g3d-views-error{ color: var(--g3d-bad); font-size: 12.5px; margin: 0; }
.g3d-views-list{ list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.g3d-views-row{ display: flex; align-items: center; gap: 8px; min-height: var(--g3d-target); padding: 0 4px; border-radius: 7px; }
.g3d-views-row:hover{ background: var(--g3d-panel-2); }
.g3d-views-row.is-current .g3d-views-title{ font-weight: 700; }
.g3d-views-thumb{ flex: 0 0 auto; width: 80px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid var(--g3d-line, rgba(127,127,127,.35)); background: var(--g3d-canvas, transparent); }
.g3d-views-title{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g3d-ink); }
.g3d-views-owner{ font-size: 11.5px; color: var(--g3d-ink-3); white-space: nowrap; }
.g3d-views-row .g3d-views-delete{ opacity: 1; }

/* ── body: scene | view | inspector ───────────────────────────────────── */
.g3d-body{
  position: relative; flex: 1; min-height: 0;
  display: grid; grid-template-columns: var(--g3d-scene-w) minmax(0, 1fr) auto;
  border: 1px solid var(--g3d-line); border-radius: 12px; overflow: hidden; background: var(--g3d-panel);
  box-shadow: var(--g3d-shadow);
}
.g3d-panel{ background: var(--g3d-panel); color: var(--g3d-ink); overflow: auto; min-height: 0; }
.g3d-scene{ border-right: 1px solid var(--g3d-line); padding: 12px 10px 16px; }
.g3d-inspector{ width: var(--g3d-card-w); border-left: 1px solid var(--g3d-line); padding: 12px 14px 16px; }
.g3d-inspector[hidden]{ display: none; }
.g3d-panel-title{ font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--g3d-ink); }

.g3d-viewer{ position: relative; min-width: 0; min-height: 0; background: var(--g3d-canvas); }
#geodb3d-canvas{ width: 100%; height: 100%; display: block; touch-action: none; }
#loading-indicator{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* ── the SCENE list ───────────────────────────────────────────────────── */
.g3d-group{ margin-bottom: 10px; }
.g3d-group-title{
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--g3d-ink-3); margin: 10px 4px 4px;
}
.g3d-rows, .g3d-parts{ list-style: none; margin: 0; padding: 0; }
.g3d-parts{ margin: 2px 0 4px 18px; border-left: 1px solid var(--g3d-line); padding-left: 6px; }
.g3d-row-head{ display: flex; align-items: center; gap: 6px; min-height: var(--g3d-target); padding: 1px 2px; border-radius: 7px; }
.g3d-row-head:hover{ background: var(--g3d-panel-2); }
.g3d-row-label{ flex: 1 1 auto; min-width: 3.5em; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g3d-row.is-off > .g3d-row-head .g3d-row-label,
.g3d-part.is-off .g3d-row-label{ color: var(--g3d-ink-3); }
.g3d-part.is-nodata .g3d-row-label{ font-style: italic; }
.g3d-nodata{ font-size: 11px; color: var(--g3d-ink-3); }
.g3d-eye, .g3d-remove, .g3d-icon-btn{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--g3d-target); height: var(--g3d-target); border: 0; border-radius: 7px; background: transparent;
  color: var(--g3d-ink-2); cursor: pointer; padding: 0;
}
.g3d-eye.is-on{ color: var(--g3d-accent); }
.g3d-eye:hover, .g3d-remove:hover, .g3d-icon-btn:hover{ background: var(--g3d-panel-2); color: var(--g3d-ink); }
.g3d-remove{ opacity: 0; width: 24px; }
.g3d-row-head:hover .g3d-remove, .g3d-remove:focus-visible{ opacity: 1; }
.g3d-gear{ display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px;
  color: var(--g3d-ink-2); text-decoration: none; }
.g3d-gear:hover{ background: var(--g3d-panel-2); color: var(--g3d-ink); }
.g3d-dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--g3d-ink-3); }
.g3d-dot.is-ready{ background: var(--g3d-good); }
.g3d-dot.is-loading, .g3d-dot.is-idle{ background: var(--g3d-accent); animation: g3d-pulse 1s ease-in-out infinite; }
.g3d-dot.is-empty, .g3d-dot.is-unavailable{ background: var(--g3d-warn); }
.g3d-dot.is-error{ background: var(--g3d-bad); }
@keyframes g3d-pulse{ 50%{ opacity: .3; } }
@media (prefers-reduced-motion: reduce){ .g3d-dot.is-loading, .g3d-dot.is-idle{ animation: none; } }
.g3d-ai{
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--g3d-accent); color: var(--on-solid, #fff);
}
.g3d-chip{
  display: inline-flex; align-items: center; gap: 6px; max-width: 118px; min-height: 26px; padding: 2px 8px; flex: none;
  border: 1px solid var(--g3d-line); border-radius: 999px; background: var(--g3d-panel); color: var(--g3d-ink-2);
  font-size: 12px; cursor: pointer;
}
.g3d-chip:hover{ border-color: var(--g3d-accent); color: var(--g3d-ink); }
.g3d-chip[aria-expanded="true"]{ border-color: var(--g3d-accent); background: var(--g3d-accent-soft); color: var(--g3d-accent); }
.g3d-chip.is-static{ cursor: default; border-style: dashed; }
.g3d-chip-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g3d-swatches{ display: inline-flex; flex: none; }
.g3d-swatch{ width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.g3d-swatch + .g3d-swatch{ margin-left: -2px; }
.g3d-well{
  display: flex; align-items: center; gap: 8px; margin: 2px 0 6px 38px; padding: 6px 8px;
  background: var(--g3d-panel-2); border-radius: 8px; font-size: 12px;
}
.g3d-well label{ color: var(--g3d-ink-2); margin: 0; }
.g3d-well input[type="range"]{ flex: 1; accent-color: var(--g3d-accent); }
.g3d-well input[type="color"]{ width: 44px; height: 28px; padding: 0; border: 1px solid var(--g3d-line); border-radius: 6px; background: none; }
.g3d-well select{ flex: 1; min-width: 0; }
/* A well with a set picker carries two choices and a slider: wrap, never squeeze. */
.g3d-well{ flex-wrap: wrap; }
.g3d-well select{ min-width: 9em; }
.g3d-well .g3d-well-wide{ flex: 1 1 100%; }
/* R3: a list of switches in a well (alteration types) and the view's background line. */
.g3d-checks{ list-style: none; margin: 0; padding: 0; flex: 1 1 100%; display: grid; gap: 2px; max-height: 12em; overflow: auto; }
.g3d-checks label{ display: flex; align-items: center; gap: 6px; color: var(--g3d-ink); cursor: pointer; }
.g3d-checks .form-check-input{ margin: 0; }
.g3d-part .g3d-swatch{ flex: none; }
.g3d-background{ display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; }
.g3d-background label{ color: var(--g3d-ink-2); margin: 0; }
.g3d-background select{ flex: 1; min-width: 0; }
.g3d-background input[type="color"]{ width: 44px; height: 28px; padding: 0; border: 1px solid var(--g3d-line); border-radius: 6px; background: none; }
/* The set picker's note (the drawn set is empty; these sets hold rows). */
.g3d-part-note{
  font-size: 12px; line-height: 1.35; color: var(--g3d-warn); background: var(--g3d-warn-soft);
  padding: 5px 8px; border-radius: 7px; margin: 2px 0 6px 38px;
}
.g3d-add{ margin-top: 8px; }
.g3d-add summary{
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: var(--g3d-target);
  padding: 4px 10px; border-radius: 8px; color: var(--g3d-accent); font-weight: 600; font-size: 13px;
}
.g3d-add summary::-webkit-details-marker{ display: none; }
.g3d-add summary:hover{ background: var(--g3d-accent-soft); }
.g3d-add ul{ list-style: none; margin: 4px 0 0; padding: 0; }
.g3d-add-item{
  width: 100%; display: flex; justify-content: space-between; gap: 8px; min-height: var(--g3d-target);
  padding: 4px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--g3d-ink); font-size: 13px; text-align: left;
}
.g3d-add-item:hover{ background: var(--g3d-panel-2); }
.g3d-add-group{ color: var(--g3d-ink-3); font-size: 11.5px; }
.g3d-empty{ font-size: 13px; color: var(--g3d-ink-2); }

/* ── the INSPECTOR (hole card) ────────────────────────────────────────── */
.g3d-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g3d-card-head .g3d-panel-title{ margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.g3d-card-note{ font-size: 12.5px; color: var(--g3d-warn); background: var(--g3d-warn-soft); padding: 6px 8px; border-radius: 7px; margin: 8px 0; }
.g3d-facts{ display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 10px 0; font-size: 12.5px; }
.g3d-facts dt{ color: var(--g3d-ink-3); font-weight: 500; }
.g3d-facts dd{ margin: 0; color: var(--g3d-ink); font-variant-numeric: tabular-nums; }
.g3d-card-top{ font-size: 12.5px; color: var(--g3d-ink-2); margin: 0 0 8px; }
.g3d-strip{ display: block; margin: 4px 0 10px; max-width: 100%; height: auto; }
.g3d-strip-grid{ stroke: var(--g3d-line); stroke-width: 1; }
.g3d-strip-tick{ fill: var(--g3d-ink-3); font-size: 9px; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.g3d-strip-head{ fill: var(--g3d-ink-2); font-size: 9.5px; font-weight: 600; }
.g3d-strip-col{ fill: var(--g3d-panel-2); stroke: var(--g3d-line); }
.g3d-strip-iv{ stroke: rgba(0,0,0,.25); stroke-width: .5; pointer-events: none; }
/* The hover/tap target of an interval: transparent, at least 8 units tall, with
   a wide transparent stroke on touch screens (S3 review c). */
.g3d-strip-hit{ fill: transparent; stroke: transparent; stroke-width: 4px; pointer-events: all; }
.g3d-strip-none{ fill: var(--g3d-ink-3); font-size: 9px; }
.g3d-actions{ display: flex; flex-wrap: wrap; gap: 6px; }
.g3d-actions .btn{ display: inline-flex; align-items: center; gap: 4px; min-height: var(--g3d-target); }
/* R4: the drill-planning panel (in the inspector while Plan is on). */
.g3d-inspector .g3d-group-title{ margin-top: 12px; }
.g3d-plan-grid{ display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin: 4px 0 6px; font-size: 12.5px; }
.g3d-plan-grid .form-control, .g3d-plan-grid .form-select{ min-height: var(--g3d-target); }
.g3d-plan-unit{ font-size: 12px; color: var(--g3d-ink-2); align-self: center; }
.g3d-plan-msg{ font-size: 12.5px; padding: 6px 8px; border-radius: 7px; margin: 8px 0; color: var(--g3d-ink); background: var(--g3d-accent-soft); }
.g3d-plan-msg.is-problem{ color: var(--g3d-bad); background: var(--g3d-warn-soft); }
.g3d-plan-msg.is-ok{ color: var(--g3d-good); }
.g3d-plan-holes{ list-style: none; padding: 0; margin: 4px 0 0; }
.g3d-plan-holes li{ display: flex; align-items: center; gap: 6px; min-height: var(--g3d-target); border-bottom: 1px solid var(--g3d-line); }
.g3d-plan-holes .g3d-row-label{ flex: 1; }

/* ── over the canvas: north arrow, scale bar, VE, legend ─────────────── */
.g3d-overlay{ position: absolute; inset: 0; pointer-events: none; }
.g3d-north{
  position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--g3d-overlay-bg); box-shadow: var(--g3d-shadow); display: flex; align-items: center; justify-content: center;
}
.g3d-north svg{ width: 42px; height: 42px; overflow: visible; }
.g3d-north-arrow{ fill: var(--g3d-bad); }
.g3d-north-tail{ fill: var(--g3d-ink-3); }
.g3d-north-n{ fill: var(--g3d-ink); font-size: 9px; font-weight: 800; font-family: inherit; }
.g3d-view-foot{ position: absolute; left: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 8px; }
.g3d-scalebar{
  display: flex; flex-direction: column; gap: 3px; padding: 5px 8px; border-radius: 7px;
  background: var(--g3d-overlay-bg); box-shadow: var(--g3d-shadow); font-size: 11.5px; color: var(--g3d-ink);
}
.g3d-scalebar-bar{ height: 6px; border: 2px solid var(--g3d-ink); border-top: 0; }
.g3d-scalebar-text{ font-variant-numeric: tabular-nums; }
.g3d-ve-badge{
  padding: 4px 8px; border-radius: 7px; background: var(--g3d-overlay-bg); box-shadow: var(--g3d-shadow);
  font-size: 11.5px; font-weight: 600; color: var(--g3d-ink-2);
}
.g3d-ve-badge.is-exaggerated{ color: var(--g3d-warn); }
.g3d-legend{
  position: absolute; right: 12px; bottom: 12px; max-width: 260px; max-height: calc(100% - 80px); overflow: auto;
  background: var(--g3d-overlay-bg); border-radius: 10px; box-shadow: var(--g3d-shadow); padding: 6px 10px 8px;
  font-size: 12px; color: var(--g3d-ink);
}
.g3d-legend[hidden]{ display: none; }
.g3d-legend-toggle{
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 26px;
  border: 0; background: transparent; color: var(--g3d-ink-2); font-weight: 700; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 0;
}
.g3d-legend-block + .g3d-legend-block{ margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--g3d-line); }
.g3d-legend h4{ font-size: 12.5px; font-weight: 700; margin: 4px 0 0; }
.g3d-legend-sub{ margin: 0 0 4px; color: var(--g3d-ink-3); font-size: 11px; }
.g3d-legend ul{ list-style: none; margin: 4px 0 0; padding: 0; }
.g3d-legend li{ display: flex; align-items: center; gap: 6px; padding: 1px 0; font-variant-numeric: tabular-nums; }
.g3d-legend-other{ color: var(--g3d-ink-3); }
.g3d-key{ width: 12px; height: 12px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.g3d-ramp{ height: 10px; border-radius: 3px; margin: 4px 0 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.g3d-ramp-ends{ display: flex; justify-content: space-between; }

/* ── the status strip ─────────────────────────────────────────────────── */
.g3d-status{
  list-style: none; margin: 0; padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px 18px;
  border: 1px solid var(--g3d-line); border-radius: 10px; background: var(--g3d-panel); font-size: 12.5px; color: var(--g3d-ink-2);
  min-height: 34px; align-items: center;
}
.g3d-status-item{ display: inline-flex; align-items: center; gap: 6px; }
.g3d-status-item.is-ok .bi{ color: var(--g3d-good); }
.g3d-status-item.is-loading .bi{ color: var(--g3d-accent); }
.g3d-status-item.is-missing .bi{ color: var(--g3d-warn); }
.g3d-status-item.is-problem .bi{ color: var(--g3d-bad); }
.g3d-status-item.is-info .bi{ color: var(--g3d-accent); }
.g3d-status-action{ padding: 0 4px; font-size: 12.5px; }
.visually-hidden{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── tablet viewing (ruling U3): drawers over the canvas ─────────────── */
@container g3d (max-width: 900px){
  .g3d-only-narrow{ display: inline-flex; }
  .g3d-bar .g3d-tool span{ display: none; }
  .g3d-bar .g3d-only-narrow span, .g3d-bar .g3d-ve span{ display: inline; }
  .g3d-body{ grid-template-columns: minmax(0, 1fr); }
  .g3d-scene{
    position: absolute; z-index: 20; left: 0; top: 0; bottom: 0; width: min(320px, 86vw);
    border-right: 1px solid var(--g3d-line); box-shadow: var(--g3d-shadow); transform: translateX(-102%);
    /* Closed = out of the tab order and the accessibility tree too (S3 review d):
       visibility flips only after the slide has finished. */
    visibility: hidden;
    transition: transform .18s ease, visibility 0s linear .18s;
  }
  body.g3d-drawer-scene .g3d-scene{ transform: none; visibility: visible; transition: transform .18s ease, visibility 0s; }
  .g3d-inspector{
    position: absolute; z-index: 21; left: 0; right: 0; bottom: 0; width: auto; max-height: 58%;
    border-left: 0; border-top: 1px solid var(--g3d-line); border-radius: 12px 12px 0 0; box-shadow: var(--g3d-shadow);
  }
  .g3d-legend{ bottom: 64px; max-width: 220px; }
  body.g3d-has-card .g3d-legend{ display: none; }
}
@media (prefers-reduced-motion: reduce){ .g3d-scene{ transition: none; } }
@media (pointer: coarse){
  /* Every touch target at least 44px (S3 review c): eyes, tools, chips, remove,
     gear, the status "Show all", the legend toggle; strip-log intervals get a
     taller hit band (inspector.js draws it). */
  .g3d{ --g3d-target: 44px; }
  .g3d-chip{ min-height: 44px; }
  .g3d-remove{ opacity: 1; width: 44px; }
  .g3d-gear{ width: 44px; height: 44px; }
  .g3d-status-action{ min-height: 44px; min-width: 44px; }
  .g3d-legend-toggle{ min-height: 44px; }
  .g3d-strip-hit{ stroke-width: 10px; }
}
/* A hidden layer dims its parts (each part's eye still says what the part itself is set to). */
.g3d-row.is-off > .g3d-parts{ opacity: .55; }
/* R4: a well's row of buttons (a sample layer's order, zoom to a layer); the clicked interval on the hole card. */
.g3d-well-buttons{ display: flex; flex-wrap: wrap; gap: 4px; }
.g3d-well input[type="text"], .g3d-well input[type="date"], .g3d-well input[type="number"]{ flex: 1; min-width: 7em; }
.g3d-card-interval{ background: var(--g3d-accent-soft); border-radius: 8px; padding: 6px 8px; margin: 8px 0; }
.g3d-card-interval .g3d-group-title{ margin: 0 0 4px; }
.g3d-well.g3d-well-form{ display: grid; grid-template-columns: minmax(6.5em, auto) minmax(0, 1fr); gap: 4px 8px; margin-left: 12px; }
.g3d-well.g3d-well-form > *{ min-width: 0; }
.g3d-well.g3d-well-form select, .g3d-well.g3d-well-form input[type="text"], .g3d-well.g3d-well-form input[type="date"],
.g3d-well.g3d-well-form input[type="number"]{ width: 100%; min-width: 0; }
/* R4 Part C: the terrain + 3D-area panel (the shared draw-bounds map) and a surface's two-click removal. */
.g3d-area-map{ height: 220px; border: 1px solid var(--g3d-line); border-radius: 8px; margin: 4px 0 6px; background: var(--g3d-panel-2); }
.g3d-terrain-clip{ display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 6px 0; }
.g3d-terrain-panel .g3d-checks{ margin: 2px 0 8px; }
.g3d-remove.is-confirming{ color: var(--g3d-bad); font-size: 12px; }

/* ── ?embed=true (classic retirement R6a): an iframe's page ────────────────
 * The canvas 3D pane frames geoDB 3D; the view keeps its own toolbar, scene
 * list, inspector and status strip, and the APP shell goes: the v2 rail, the
 * contextual panel, the topbar, the page banners, Petra's card and the footer
 * (and their classic-shell twins). The main column then takes the whole frame. One body
 * class (scene/views._render_scene → scene_v2.html), set from the one flag. */
body.g3d-embedded .v2-rail,
body.g3d-embedded .v2-topbar,
body.g3d-embedded .layout-wrapper > .sidebar,
body.g3d-embedded nav.navbar,
body.g3d-embedded footer,
body.g3d-embedded .content-wrapper > .setup-return-banner,
body.g3d-embedded .content-wrapper > .alert,
body.g3d-embedded #petraModal,
body.g3d-embedded #petraLauncher{display: none !important;}
/* Petra lives in the page that frames this one (the canvas): no second card,
   and no room kept for a dock. */
body.g3d-embedded.petra-docked{padding-right: 0 !important;}
body.g3d-embedded .layout-wrapper,
body.g3d-embedded .main-content{
  margin-left: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
body.g3d-embedded .content-wrapper{padding: 0 !important; margin: 0 !important;}
body.g3d-embedded .g3d{height: 100vh; min-height: 0; padding: 6px;}

/* 3D retirement R5: a PUBLISHED view's page (scene_public_base.html, no app
   shell): the viewer fills the window; the description, watermark and embed
   code sit in one quiet row inside it. */
body.g3d-public{ margin: 0; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.g3d-public .g3d{ --g3d-canvas: #1d2333; }
}
:root[data-theme="dark"] body.g3d-public .g3d{ --g3d-canvas: #1d2333; }
body.g3d-public .g3d{ height: 100vh; min-height: 420px; padding: 8px; }
.g3d-public-foot{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 8px;
  font-size: 12px; color: var(--g3d-ink-2, inherit); }
.g3d-public-desc{ margin: 0; }
.g3d-watermark{ opacity: .8; }
.g3d-embed summary{ cursor: pointer; }
.g3d-embed code{ display: block; max-width: 640px; white-space: pre-wrap; word-break: break-all; }