/* ============================================================
   rorystone.com — Camera Workshop explorers, re-skinned to the site.

   Loaded AFTER each explorer's own inline <style> (tools/theme_explorer.py
   inserts the <link>), so it wins on cascade order alone. It only touches
   colour, type, edges and header height. Layout, IDs, classes and the
   explorer's JS are left exactly as generated, which is what keeps every
   explorer working. Site tokens mirror css/site.css / DESIGN.md.

   The 3D scene's own background is painted by WebGL, not CSS: the install
   tool patches it to --scene-bg below. Keep the two in step.

   Not themed on purpose: the six system colours in the parts list (Body /
   Optics / Shutter / Transport / Controls / Electronics) and the dashed
   connection lines in the scene. They code information, so they stay legible
   colour rather than becoming decoration.
   ============================================================ */

:root {
  /* site tokens (see css/site.css) */
  --void: #141414;
  --gallery-black: #000000;
  --surface: #1E1E1E;
  --surface-2: #2A2A2A;
  --text: #FFFFFF;
  --text-2: #999999;
  --text-3: #888888;
  --accent-fg: #141414;
  --ov-1: rgba(255,255,255,0.05);
  --ov-2: rgba(255,255,255,0.10);
  --ov-3: rgba(255,255,255,0.15);
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* explorer's own variables, re-pointed. --ink is used as both text colour
     and as a filled-button background, so filled buttons are re-set below. */
  --accent: #FFFFFF;
  --ink: #FFFFFF;
  --muted: #999999;
  --line: #333333;
  --paper: #141414;
  --scene-bg: #0d0d0d;

  font-family: var(--font-body);
  color: var(--text);
  background: var(--void);
  color-scheme: dark;
}

::selection { background: #fff; color: #141414; }

/* ---------- base controls ---------- */
button { border-radius: 0; border-color: var(--line); }
button:hover { background: var(--ov-2); }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}
button[aria-pressed=true] { color: #fff; border-color: rgba(255,255,255,0.55); background: var(--ov-2); }
a { color: #fff; }
/* Range sliders: drawn explicitly. The native dark-scheme track is ~1.5:1 against the
   panel; this one clears 3:1. 24px tall so the hit area meets WCAG 2.5.8. The value
   is shown by the thumb and by the explorer's own numeric output. */
input[type=range] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; accent-color: #fff; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: #707070; border: 0; border-radius: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 0; border-radius: 50%; background: #fff; }
input[type=range]::-moz-range-track { height: 4px; background: #707070; border: 0; border-radius: 0; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; }
input[type=range]:hover::-webkit-slider-thumb { background: #ddd; }
input[type=range]:hover::-moz-range-thumb { background: #ddd; }
input[type=range]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------- header: the site's 64px bar ---------- */
.app-header {
  height: 64px; padding: 0 var(--pad, 1.5rem);
  background: rgba(20,20,20,0.92); border-bottom: 1px solid var(--line);
}
.brand {
  color: #fff; font-family: var(--font-mono); font-weight: 400;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5;
}
.brand-icon {
  background: transparent; color: #fff; border: 1px solid #fff; border-radius: 0;
  height: 32px; width: 32px; font-size: 20px; line-height: 30px;
}
.modes button {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
}
.modes button:hover { color: #fff; }
.modes button span { color: var(--text-2); }
.modes button[aria-pressed=true] { color: #fff; border-bottom-color: #fff; border-bottom-width: 2px; background: transparent !important; }
.local-label { font-family: var(--font-mono); color: var(--text-2); font-size: 10px; letter-spacing: 0.1em; }
.local-label i { background: var(--text-2); }
.quiet { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.quiet:hover { color: #fff; background: transparent; }
.site-home {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2); text-decoration: none; white-space: nowrap;
  border-left: 1px solid var(--line); padding: 0.3rem 0 0.3rem 1rem;
}
.site-home:hover { color: #fff; }

.workshop { height: calc(100dvh - 64px); }

/* ---------- parts panel ---------- */
.parts-panel { background: var(--surface); border-right-color: var(--line); }
.eyebrow { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.count { background: var(--ov-2); color: #d0d0d0; border-radius: 0; font-family: var(--font-mono); }
.search { background: var(--void); border-color: var(--line); border-radius: 0; }
.search span { color: var(--text-2); }
.search input { color: #fff; font-family: var(--font-body); font-size: 12px; }
.search input::placeholder { color: var(--text-2); opacity: 1; }
.parts-list { scrollbar-color: #444 transparent; }
.system-title { color: var(--text-2); font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; }
.part-row { font-size: 12px; color: #ddd; }
.part-row:hover { background: var(--ov-1); }
.part-row[aria-pressed=true] { border-left-color: #fff; background: var(--ov-2); color: #fff; }
.part-row[aria-pressed=true] .part-number, .part-row[aria-pressed=true] .part-state { color: #d0d0d0; }
.part-number { font-family: var(--font-mono); opacity: 1; color: var(--text-2); }
.part-state { color: var(--text-2); }
.parts-footer { border-top-color: var(--line); color: var(--text-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; }

/* ---------- workbench header ---------- */
h1, .intro-dock h2, .inspector h2, .guide-header h2, .cycle-header h2, dialog h2 {
  font-family: var(--font-display); font-weight: 300; letter-spacing: 0.005em; color: #fff;
}
h1 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.1; }
h1 span { color: #fff; }
.model-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; border-color: var(--line); color: var(--text-2); border-radius: 0; }

/* ---------- the stage ---------- */
.scene-shell { background: var(--scene-bg); }
/* A soft pool of light under the model, and a darker edge, so a near-black body
   still separates from a black room. Above the canvas, below the on-canvas UI. */
.scene-shell::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 52% 46% at 50% 58%, rgba(255,255,255,0.12), transparent 72%),
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 58%, rgba(0,0,0,0.5));
}
.scene-top, .scene-bottom { z-index: 3; }
.scene-tag { background: rgba(20,20,20,0.82); border-color: var(--line); color: #ccc; border-radius: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; }
.view-buttons { background: rgba(20,20,20,0.88); border-color: var(--line); border-radius: 0; }
.view-buttons button { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.view-buttons button:first-child { color: #fff; font-weight: 400; }
.scene-bottom span { background: rgba(20,20,20,0.82); color: #bbb; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; }
.scene-bottom b { color: var(--text-2); }
.scene-bottom button { background: rgba(20,20,20,0.88); border-radius: 0; }
.scene-loading { background: rgba(0,0,0,0.92); color: #ddd; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; z-index: 4; }
.loading-ring { border-color: #444; border-top-color: #fff; }

/* The 3D canvas is a tab stop (orbit with the arrow keys) but the explorer removes its
   outline. Give keyboard users a ring, inset so the stage doesn't clip it. */
.viewport canvas:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* 3D part labels: button.scene-part-label, styled inline by the explorer's JS. */
.scene-part-label {
  background: rgba(20,20,20,0.92) !important; color: #e6e6e6 !important;
  border: 1px solid #444 !important; border-radius: 0 !important; box-shadow: none !important;
  font: 400 10px/1.3 var(--font-mono) !important; letter-spacing: 0.04em;
}
.scene-part-label:hover, .scene-part-label[aria-pressed=true] { border-color: #fff !important; color: #fff !important; }

/* ---------- controls under the stage ---------- */
.stage-controls { background: var(--surface); border-top-color: var(--line); }
.explode-button, .part-actions .primary, .guide-actions button:last-child {
  background: #fff; color: var(--accent-fg); border-color: #fff;
  font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
}
.explode-button:hover, .part-actions .primary:hover, .guide-actions button:last-child:hover {
  background: transparent; color: #fff; border-color: #fff;
}
.explode-control label { color: var(--text-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.explode-control output { color: #fff; font-family: var(--font-mono); }
.display-toggles button {
  border-radius: 9999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2); background: var(--ov-1); border-color: var(--ov-2);
}
.display-toggles button:hover { color: #fff; border-color: var(--ov-3); }
.display-toggles button[aria-pressed=true] { background: #fff; color: var(--accent-fg); border-color: #fff; }

.learning-dock { background: var(--void); border-top-color: var(--line); }
.intro-dock p, .guide-description, .cycle-copy { color: var(--text-2); }
.intro-dock button { color: #fff; border-color: #555; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.intro-dock button:hover { border-color: #fff; }
.model-note { background: var(--gallery-black); color: var(--text-2); border-top-color: var(--line); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; }
.note-dot { background: var(--text-2); }

/* ---------- inspector ---------- */
.inspector { background: var(--void); border-left-color: var(--line); }
.inspector p, .intro-inspector .lead { color: var(--text-2); }
.inspector h2 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.1; }
.line-art { color: #888; }
.line-art svg [stroke="#c64b2e"] { stroke: #fff; }
.inspector-prompt { border-bottom-color: var(--line); }
.inspector-prompt span { color: #fff; font-family: var(--font-mono); }
.inspector-prompt p { color: var(--text-2); }
.system-tag { background: var(--ov-2); color: #ddd; border-radius: 0; font-family: var(--font-mono); }
.part-actions button, .guide-actions button, .wide-button, .cycle-header button, .symptom-links button {
  font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.detail-section { border-top-color: var(--line); }
.detail-section h3 { color: var(--text-2); font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.14em; }
.connection-list button { color: #ddd; }
.connection-list button span { color: #fff; }
.connection-note { color: var(--text-2) !important; }
.axis label, .axis output { color: var(--text-2); }
.evidence { color: var(--text-2) !important; }
.evidence b { color: #ddd; }
.symptom-card { background: var(--surface); border-color: var(--line); border-radius: 0; }
.symptom-card button { color: #fff; }
.step-track span { background: #3a3a3a; }
.step-track span.done { background: #fff; }
.cycle-track button { border-bottom-color: var(--line); color: var(--text-2); }
.cycle-track button[aria-pressed=true] { border-color: #fff; color: #fff; background: transparent; }
.intro-inspector .quiet { color: #fff; }
.specs-list dt { color: var(--text-2); font-family: var(--font-mono); font-size: 10px; }
.specs-list div { border-bottom-color: var(--line); }

/* ---------- toast, dialog ---------- */
.status-toast { background: var(--surface-2); color: #fff; border: 1px solid #444; border-radius: 0; box-shadow: 0 4px 24px rgba(0,0,0,0.5); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
dialog { background: var(--surface); color: #fff; border: 1px solid #444; border-radius: 0; box-shadow: 0 20px 100px rgba(0,0,0,0.7); }
dialog::backdrop { background: rgba(0,0,0,0.72); backdrop-filter: blur(5px); }
dialog p { color: var(--text-2); }
.dialog-heading button { color: #fff; }
.evidence-grid { border-block-color: var(--line); }
.evidence-grid b, .callout b, .source a { color: #fff; }
.source { border-top-color: var(--line); }
.source a { text-decoration-color: var(--text-3); }
.callout { background: var(--ov-1); border-left-color: #fff; }
.skip { background: #fff; color: var(--accent-fg); }
.empty { color: var(--text-2); }

/* ---------- legibility floor: 10px (the rest of the site floors at 0.6875rem / 11px;
   the dense explorer panels have not been re-laid-out for 11px yet) ----------
   The explorer set several labels at 8-9px, which is hard to read light-on-dark. */
.symptom-card .eyebrow, .guide-header .eyebrow, .inspector .eyebrow { font-size: 10px; }
.part-number, .system-tag, .axis output, .axis label { font-size: 10px; }
.detail-section h3 { font-size: 10px; }
.connection-note, .evidence { font-size: 10px !important; }
.model-note { font-size: 10px; }
.scene-bottom span { font-size: 10px; }
.cycle-track button { font-size: 10px; }
.cycle-track button span { font-size: 10px; }
.guide-actions button { font-size: 10px; }
.symptom-card button { padding: 6px 0; }               /* 12px tall link-button: give it a hit area */
.quiet { min-width: 24px; }

/* ---------- responsive: keep the explorer's own breakpoints, adjust the header height ---------- */
@media (max-width: 900px) {
  .app-header { height: 64px; }
  .workshop { min-height: calc(100dvh - 64px); }
  .site-home { display: none; }
}
@media (max-width: 900px) {
  /* touch: primary controls a comfortable size, not just the 24px minimum */
  .view-buttons button, #undo, #reset { min-height: 32px; }
}
@media (max-width: 580px) {
  .app-header { height: auto; min-height: 96px; padding: 10px 1rem 0; }
  .modes button { font-size: 10px; letter-spacing: 0.08em; }
}