/* Workbench2 feasibility slice -- a product shell, not a themed demo.
   Deliberately flat/utilitarian (no gradients, shadows, or glossy chrome
   that would oversell this as more finished than it is -- see the
   "Experimental / local-only / no authoritative save" banner it wraps),
   but that doesn't mean unstyled: this establishes a small, consistent
   design-token system (spacing/color/radius) and applies it uniformly
   across every panel, including the two experiment sections
   (`.zone-opfs-experiment`, `.range-scene-experiment`) that previously had
   no section-level styling at all and fell straight through to raw
   browser defaults. Every existing class name in `src/app.rs`'s markup is
   reused as-is -- this file changes no Rust/JS, only how the same DOM
   renders. */

:root {
  color-scheme: light dark;
  --font-sans: -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  --radius-sm: 4px;
  --radius-md: 8px;

  /* Light palette (default). Dark overrides just below, guarded by
     `prefers-color-scheme` -- this app has no explicit theme toggle, so
     that media query is the only signal available. */
  --color-bg: #ffffff;
  --color-bg-subtle: #f6f7f9;
  --color-bg-canvas: #111318;
  --color-border: #dcdde2;
  --color-border-strong: #b8bac2;
  --color-text: #16171c;
  --color-text-muted: #565861;
  --color-text-faint: #86878f;
  --color-accent: #2454cf;
  --color-accent-bg: #eaf0fe;
  --color-success: #1a7a3a;
  --color-success-bg: #e8f6ec;
  --color-danger: #b3261e;
  --color-danger-bg: #fdecea;
  --color-focus-ring: #2454cf;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #17181d;
    --color-bg-subtle: #1e2026;
    --color-bg-canvas: #0b0c0f;
    --color-border: #34363f;
    --color-border-strong: #484a55;
    --color-text: #eceef3;
    --color-text-muted: #a7a9b4;
    --color-text-faint: #7c7e89;
    --color-accent: #8aa4ff;
    --color-accent-bg: #202844;
    --color-success: #4fc27c;
    --color-success-bg: #163224;
    --color-danger: #ff7a72;
    --color-danger-bg: #3a2120;
    --color-focus-ring: #8aa4ff;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.5;
}

.shell {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1.5rem var(--space-8);
}

.experimental-banner {
  background: #7a2e0e;
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  letter-spacing: 0.02em;
}

/* Identity sign-in bar -- additive and independent of the rest of the shell (see app.rs's own
   "Identity OAuth (PKCE) sign-in status" comment); kept visually distinct (its own thin strip)
   rather than folded into the shell's own spacing rhythm. */
.auth-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}

.auth-status {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.auth-sign-in,
.auth-sign-out {
  font-size: 0.85rem;
  padding: 0.35rem 0.85rem;
}

h1 {
  font-size: 1.4rem;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.05rem;
  margin: var(--space-5) 0 var(--space-2);
  letter-spacing: -0.005em;
}

.lede {
  color: var(--color-text-muted);
  max-width: 68ch;
  margin: 0 0 var(--space-4);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.05em 0.35em;
}

/* --- Form controls: buttons/inputs/selects share one flat, functional
   style -- not a redesign, just consistent spacing/radius/hover state in
   place of raw browser chrome. */
button {
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}

button:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  border-color: var(--color-text-faint);
}

button:disabled {
  color: var(--color-text-faint);
  border-color: var(--color-border);
  cursor: not-allowed;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

input[type="text"],
input[type="url"],
input[type="password"],
select {
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
}

input::placeholder {
  color: var(--color-text-faint);
}

.open-file {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}

.hint {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.status-ok {
  color: var(--color-success);
}

.status-err {
  color: var(--color-danger);
  white-space: pre-wrap;
  background: var(--color-danger-bg);
  border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
}

.summary .file-name {
  font-weight: 600;
}

.grouping {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* --- Tables: one shared look everywhere (evidence/counters/storage/
   entity/group/quantity tables all use plain <table>) -- header-ish first
   column shaded, hairline borders, zebra striping for longer bodies. */
table {
  border-collapse: collapse;
  font-size: 0.85rem;
  width: 100%;
  max-width: 40rem;
}

caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

th,
td {
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.65rem;
  text-align: left;
}

td:first-child {
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  white-space: nowrap;
}

tbody tr:nth-child(even) td:not(:first-child) {
  background: color-mix(in srgb, var(--color-bg-subtle) 55%, transparent);
}

.grouping-mode-picker {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.grouping-mode-picker button[aria-pressed="true"] {
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
}

.attribute-row,
.stage-property-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0.4rem 0;
}

.attribute-row label {
  min-width: 8rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.property-inspector,
.grouping-modes {
  margin: var(--space-5) 0;
}

/* Part 3: left-side navigation tree + right-side Inspector panel. Wraps
   -- rather than replaces -- the flat "Group elements by" table above it
   (`.grouping-modes`) and the pre-existing `.property-inspector` section
   (relocated into `.inspector-pane` unchanged). `flex-wrap` so a narrow
   viewport stacks the two panes instead of overflowing `.shell`'s
   `max-width` horizontally. */
.workbench-layout {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: flex-start;
  margin: var(--space-5) 0;
}

.nav-tree-pane {
  flex: 1 1 20rem;
  min-width: 16rem;
  max-height: 32rem;
  overflow-y: auto;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.inspector-pane {
  flex: 2 1 28rem;
  min-width: 20rem;
}

.inspector-pane .property-inspector {
  margin: 0;
}

.tree-mode-picker {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
  font-size: 0.85rem;
}

.nav-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.nav-tree li {
  margin: 0.1rem 0;
}

.tree-toggle,
.tree-leaf {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  text-align: left;
  font: inherit;
  width: 100%;
}

.tree-toggle {
  font-weight: 600;
}

.tree-toggle:hover,
.tree-leaf:hover {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* Multi-element bulk-edit selection: a ctrl/cmd-clicked leaf (see
   `on_toggle_tree_selection` in src/app.rs) gets a visibly distinct
   background/outline from a plain single-selected leaf, which has no
   special styling of its own -- there is nothing to compare it against on
   the tree itself, only in the Inspector pane. */
.tree-leaf.selected {
  background: var(--color-success-bg);
  outline: 1px solid var(--color-success);
  outline-offset: -1px;
}

.bulk-edit-panel {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.bulk-edit-errors {
  margin: var(--space-2) 0 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--color-danger);
}

.global-id {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.quantity-sets,
.material-summary {
  margin: var(--space-3) 0;
}

.material-layers {
  margin: var(--space-2) 0 0;
  padding-left: 1.25rem;
}

.viewer {
  margin-top: var(--space-6);
}

/* Canvas: a soft dark surface even before anything is loaded (rather than
   a stark pure-black square) with a faint dashed border and centered
   placeholder text, so an empty viewer reads as "nothing loaded yet", not
   as a broken/blank element. Once a mesh is resident the canvas's own
   drawn content fully covers this background. */
canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-canvas);
}

canvas[hidden] {
  display: none;
}

/* --- Experiment sections: Derived Zone (+ nested L2D), Zone OPFS, Range
   Scene v0.2 all share one "section card" treatment -- a hairline top
   border and consistent top/bottom spacing, applied uniformly rather than
   ad hoc (Zone OPFS and Range Scene previously had NO section-level rule
   at all and fell through to bare heading/paragraph defaults). */
.derived-zone-experiment,
.zone-opfs-experiment,
.range-scene-experiment {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.derived-zone-controls,
.l2d-controls,
.l2d-region-buttons,
.zone-opfs-controls,
.range-scene-controls {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-2) 0;
}

.l2d-config {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 32rem;
  margin: var(--space-3) 0;
}

.l2d-config label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.derived-zone-evidence,
.zone-opfs-evidence,
.zone-opfs-counters,
.zone-opfs-storage,
.range-scene-entity,
.range-scene-evidence {
  margin: var(--space-3) 0;
}

/* The four experiment sub-panels (Derived Zone/L2D static+live, Zone OPFS,
   Range Scene) each wrap their own controls/canvas/evidence in one of
   these -- a shared card so the controls row and canvas visually belong
   together instead of floating in the section's plain background. */
.derived-zone-panel,
.l2d-panel,
.zone-opfs-panel,
.range-scene-panel {
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}