/* Brand palette — exact tokens from The Bike Mechanic Ltd logo kit
   (Brand/logo/USAGE.md): cream #F3EEE5, beige #E9E1D2, espresso #2C261E,
   tan #C2A789, olive #4B4434, olive_mid #5E5544.
   Primary surfaces/text snap to these tokens; a few intermediates are derived
   shades for UI layering. Saddle + heatmap colors (--a, --b, and the JS
   colormaps) are intentionally theme-independent. */
:root, :root[data-theme="dark"] {
  --bg: #2c261e;         /* espresso (token) — app canvas */
  --panel: #3a332a;      /* espresso, lightened — side panel */
  --panel-2: #4b4434;    /* olive (token) — inset cards */
  --text: #f3eee5;       /* cream (token) */
  --muted: #ccbda3;      /* desaturated cream — secondary text (raised for contrast) */
  --line: #4b4434;       /* olive (token) — hairlines */
  --accent: #c2a789;     /* tan (token) — form accent */
  --scene-bg: #1b1712;   /* deep espresso — 3D canvas (model contrast) */
  --grid-1: #4b4434;     /* olive (token) — grid major lines */
  --grid-2: #332d25;     /* espresso shade — grid minor lines */
  --a: #4a90e2;          /* saddle A — blue (fixed) */
  --b: #e8893a;          /* saddle B — orange (fixed) */
}
:root[data-theme="light"] {
  --bg: #f3eee5;         /* cream (token) */
  --panel: #e9e1d2;      /* beige (token) */
  --panel-2: #ded3c1;    /* beige, warmed — inset cards */
  --text: #2c261e;       /* espresso (token) */
  --muted: #5e5544;      /* olive_mid (token) — secondary text */
  --line: #d3c8b4;       /* light tan — hairlines */
  --accent: #4b4434;     /* olive (token) — form accent (contrast on cream) */
  --scene-bg: #e9e1d2;   /* beige (token) — 3D canvas */
  --grid-1: #c9bda7;     /* tan, lightened — grid major lines */
  --grid-2: #dbd1bf;     /* beige shade — grid minor lines */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  accent-color: var(--accent);
}

/* Visible keyboard focus everywhere (accessibility). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Screen-reader-only helper. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

#app { display: flex; height: 100vh; }

#panel {
  width: 560px;
  flex: 0 0 560px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 22px 20px;
  overflow-y: auto;
}
body.panel-hidden #panel { display: none; }

/* Two-column control grid: A | B, Compare | Dimensions, Views | Fine-align,
   then a full-width Mouse-mode row. */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.grid .span2 { grid-column: 1 / -1; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.panel-head h1 { margin: 0; }
.panel-head .subtitle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 3px;
}
#panel h1 { font-size: 24px; margin: 0; }

#theme-toggle {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
#theme-toggle:hover { border-color: var(--muted); }
#panel h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group {
  background: var(--panel-2);
  border-radius: 10px;
  padding: 16px;
}

.swatch {
  display: block;
  font-weight: 600;
  font-size: 16px;
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.swatch::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 12px; height: 12px;
  border-radius: 3px;
}
.swatch-a::before { background: var(--a); }
.swatch-b::before { background: var(--b); }

select {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  padding: 9px 11px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 15px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
  font-size: 13.5px;
  color: var(--muted);
}
.row input[type="range"] { flex: 1; height: 24px; }

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  margin: 10px 0 0;
  min-height: 26px;
  cursor: pointer;
}
.check input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }

.dims {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.views { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.views button {
  min-height: 42px;
  padding: 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  font-size: 14.5px;
}
.views button:hover { background: var(--panel-2); border-color: var(--muted); }

/* Mouse interaction-mode segmented buttons (Free / Rotate / Drag / Zoom). */
.seg-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.modebtn {
  min-height: 42px;
  padding: 10px 6px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
}
.modebtn:hover { border-color: var(--muted); }
.modebtn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}

.hint { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.45; }

.link {
  background: none;
  border: none;
  color: var(--a);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}
:root[data-theme="light"] .link { color: #2f6fbf; } /* darker blue for contrast on cream */

#legend { margin-top: 12px; }
#legend-bar {
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
#legend-caption { margin-top: 6px; }

#dim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
#dim-table th, #dim-table td {
  text-align: right;
  padding: 6px 6px;
  border-bottom: 1px solid var(--line);
}
#dim-table th:first-child, #dim-table td:first-child {
  text-align: left;
  color: var(--muted);
}
#dim-table thead th { color: var(--text); font-weight: 600; }
#dim-table .col-a { color: var(--a); }
#dim-table .col-b { color: var(--b); }
#dim-table .delta { color: var(--muted); }

#viewport { position: relative; flex: 1; }
#scene { width: 100%; height: 100%; display: block; }

/* Floating collapse/show-controls toggle, top-left of the 3D viewport. */
#panel-toggle {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 5;
  width: 40px; height: 40px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
#panel-toggle:hover { border-color: var(--muted); }

/* Brand logo — official The Bike Mechanic Ltd lockup, top-right of the 3D
   viewport so it appears in screenshots. Reversed (mono cream) lockup on the
   dark theme; two-tone color lockup on light. Per kit: transparent, never in a
   filled box; height keeps the lockup above its 120px-wide minimum. */
#brand {
  position: absolute;
  top: 20px;
  right: 24px;
  pointer-events: none;
  user-select: none;
}
#brand .logo { display: none; height: 64px; width: auto; }
#brand .logo-dark { display: block; }
:root[data-theme="light"] #brand .logo-dark { display: none; }
:root[data-theme="light"] #brand .logo-light { display: block; }

#status {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 12.5px;
  color: var(--muted);
  background: rgba(0,0,0,0.35);
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
}