/* ============================================================
   Pluto — gem design & cutting-guide studio
   Design system inspired by the dwarf planet's palette:
   deep space black, cream/tan surface, warm rust highlights.
   ============================================================ */

:root {
  --bg-0: #0b0a0c;
  --bg-1: #131217;
  --bg-2: #1a1820;
  --bg-3: #211f29;
  --bg-4: #2a2733;
  --border: #322f3c;
  --border-soft: #262330;

  --cream: #efe3c8;
  --cream-dim: #cbbfa3;
  --tan: #cdad7d;
  --rust: #b4593d;
  --rust-bright: #d97748;
  --gold: #e8c27a;

  --text-0: #f3ede0;
  --text-1: #c9c2b4;
  --text-2: #8f8a83;
  --text-3: #605c58;

  --accent: var(--gold);
  --accent-soft: rgba(232, 194, 122, 0.16);
  --danger: var(--rust-bright);
  --ok: #7fbf8f;

  /* Difficulty-star color — deliberately distinct from --gold (Kyle
     feedback: the stars were hard to see at the old size/color), a
     vivid warm coral-orange that pops against dark backgrounds. */
  --difficulty-star: #ff8a4c;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, 0.5);

  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* backdrop for chips that float over a 3D canvas, regardless of theme */
  --chip-float-bg: rgba(20, 18, 24, 0.78);
  --chip-float-text: #c9c2b4;
}

html[data-theme="light"] {
  --bg-0: #f4f0e7;
  --bg-1: #ffffff;
  --bg-2: #f0ebe0;
  --bg-3: #e8e1d2;
  --bg-4: #ddd4c0;
  --border: #d8cfba;
  --border-soft: #e4ddcc;
  --text-0: #201c14;
  --text-1: #423b2c;
  --text-2: #746c5a;
  --text-3: #9a9280;
  --accent-soft: rgba(180, 89, 61, 0.12);
  --accent: #a85f34;

  /* --cream/--cream-dim/--tan/--gold are only defined once, with light
     (dark-theme-appropriate) values, at :root above. Without these
     overrides every heading/value/star that uses them (dozens of rules
     across the whole app, not just the Faceting Design Selector) renders
     as pale beige-on-white here — nearly unreadable. These are darker,
     warmer equivalents tuned for contrast against this theme's light
     backgrounds (~5.4–13:1 against #ffffff, still ≥4.5:1 against the
     slightly darker --bg-2/--bg-3 panel tones). */
  --cream: #3d2c12;
  --cream-dim: #6b5636;
  --tan: #6e5527;
  --gold: #7a5710;
  --difficulty-star: #96450a;

  --chip-float-bg: rgba(255, 255, 255, 0.85);
  --chip-float-text: #423b2c;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg-0);
  color: var(--text-0);
  font-size: 13px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-thumb {
  background: var(--bg-4);
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------- app shell ---------------- */
.app {
  display: grid;
  grid-template-rows: 52px auto 1fr 26px;
  height: 100vh;
}
/* Explicit row placement for the app's direct children. These used to be
   AUTO-placed, and display:none children generate no grid items — so
   whichever mode root was visible shifted UP into the intrinsically-sized
   `auto` row, leaving it with NO definite height. Everything then sized
   itself from intrinsic content heights and merely happened to look right
   (Catalog's text columns, Cut mode's aspect-ratio'd machine SVGs...).
   Cut mode's canvas windows have no intrinsic height at all, which is how
   its maximize states collapsed to bare banners, and why its instructions
   list grew to full content height (no overflow -> no scrolling) instead
   of scrolling inside the viewport. Pinning the roots to the auto+1fr band
   (rows 2-3; only one root is ever visible) makes their height definite
   (100vh minus header/status), which is what every flex/1fr rule inside
   them always assumed. The status bar is pinned to its own row for the
   same reason. */
.app > .app-header {
  grid-row: 1;
  grid-column: 1;
}
#designModeRoot,
#cutModeRoot,
#cuttingModeRoot {
  grid-row: 2 / 4;
  grid-column: 1;
  min-height: 0;
}
.app > .status-bar {
  grid-row: 4;
  grid-column: 1;
}

/* ---------------- header ---------------- */
.app-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-bottom: 1px solid var(--border);
  z-index: 40;
  position: relative;
}

/* ---------------- Design / Cut mode pill toggle ---------------- */
.mode-pill-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  background: var(--bg-3);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  z-index: 41;
}
.mode-pill {
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 7px 20px;
  border-radius: 999px;
  cursor: pointer;
}
.mode-pill.active {
  background: linear-gradient(180deg, var(--gold), #cf9f52);
  color: #221a0c;
}
.mode-pill:not(.active):hover {
  color: var(--text-0);
}
/* v1.53: Design mode locked for logged-out users */
.mode-pill.locked {
  color: var(--text-3);
}
.mode-pill.locked .pill-lock {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.8;
  vertical-align: middle;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 10px;
  border-right: 1px solid var(--border-soft);
  height: 32px;
}

.brand img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--cream);
}

.brand-name small {
  display: block;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--text-3);
  margin-top: -2px;
}

.menu-bar {
  display: flex;
  gap: 2px;
  height: 100%;
  align-items: center;
}

.menu-root {
  position: relative;
}

.menu-btn {
  background: transparent;
  border: none;
  color: var(--text-1);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
}

.menu-btn:hover,
.menu-root.open .menu-btn {
  background: var(--bg-3);
  color: var(--text-0);
}

.menu-dropdown {
  position: absolute;
  top: 34px;
  left: 0;
  min-width: 230px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: 6px;
  display: none;
  z-index: 100;
}

.menu-root.open .menu-dropdown {
  display: block;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-1);
  cursor: pointer;
  font-size: 12.5px;
  white-space: nowrap;
}

.menu-item:hover {
  background: var(--accent-soft);
  color: var(--text-0);
}

.menu-item .kbd {
  color: var(--text-3);
  font-size: 10.5px;
  font-family: var(--font-mono);
}

.menu-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 5px 4px;
}

/* Catalog (cut) mode: menu entries marked data-design-only, plus the header
   Undo/Redo buttons, all operate on the hidden Design-mode stone — gray
   them out and block clicks while the Catalog is on screen. This is the
   visual half; handleMenuAction() ignores the same actions as the
   behavioral backstop. */
.app.catalog-mode .menu-item[data-design-only],
.app.catalog-mode #btnUndo,
.app.catalog-mode #btnRedo {
  opacity: 0.35;
  pointer-events: none;
}

.header-spacer {
  flex: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--bg-3);
  border-color: var(--border-soft);
  color: var(--text-0);
}
.icon-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.icon-btn:disabled:hover {
  background: transparent;
}

.tool-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--border-soft);
  color: var(--text-1);
  font-size: 11.5px;
  cursor: pointer;
}
.tool-chip:hover {
  border-color: var(--accent);
  color: var(--text-0);
}
.tool-chip svg {
  width: 13px;
  height: 13px;
}

/* ---------------- control strip (index gear + mast) ---------------- */
.control-strip {
  display: flex;
  /* v0.46 follow-up 4: no more solid band — the strip is transparent so the
     app background shows through, and each control group is a real pane
     (title bar + body) like every other window. */
  background: transparent;
  padding: 10px 10px 0;
  align-items: stretch;
  /* v0.46 follow-up: Index Gear + Mast Controls always share one line
     (Kyle); on narrow windows the strip scrolls sideways rather than
     stacking. */
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  flex-shrink: 0;
}

/* v0.46 follow-up 5: pane bodies are TRANSPARENT (only the title bar keeps
   a fill), and the Index Gear + Mast panes share the strip's free space
   equally so they read as the same length; Actions stays content-sized. */
/* NOTE: .pane { background: var(--bg-1) } is declared LATER in this file —
   a bare .control-pane selector loses that cascade tie, which is exactly
   why the first attempt at transparency didn't take (Kyle: "still white").
   The compound selector outranks it on specificity. */
.pane.control-pane {
  flex: 1 1 0;
  min-width: fit-content;
  background: transparent;
}
.pane.control-pane > .pane-head {
  background: var(--bg-1);
}
.pane.control-pane.actions-pane {
  flex: 0 0 auto;
}
.control-pane .pane-body.control-pane-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  overflow: visible;
}

.panel-block {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  flex-shrink: 0; /* keep both control panels intact on the single line */
}

.control-group-label {
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.index-gear-panel {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gear-dial-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--bg-4), var(--bg-2) 70%);
  border: 1.5px solid var(--border);
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
}
.gear-dial-btn:hover {
  border-color: var(--accent);
}
.gear-dial-btn::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed var(--border-soft);
}

.ruler-group {
  display: flex;
  gap: 14px;
}

.ruler {
  width: 120px;
}

.ruler-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-2);
  margin-bottom: 4px;
}
.ruler-head b {
  color: var(--text-1);
  font-weight: 600;
}

.ruler-input-row {
  display: flex;
  align-items: center;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ruler-input-row input[type="range"] {
  flex: 1;
  min-width: 0;
}
/* wider numeric fields in the slider rows — 44px clipped values like
   "1.414" / "42.5" (v0.46 follow-up 2) */
.ruler-input-row .num-field {
  width: 58px;
  flex-shrink: 0;
}

.num-field {
  width: 44px;
  background: transparent;
  border: none;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  padding: 5px 2px;
  border-left: 1px solid var(--border-soft);
}
.num-field:focus {
  outline: none;
  background: var(--accent-soft);
}

input[type="range"] {
  -webkit-appearance: none;
  height: 26px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--bg-4);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: -5px;
  box-shadow: 0 0 0 3px rgba(232, 194, 122, 0.18);
}
input[type="range"].red-flag::-webkit-slider-thumb {
  background: var(--rust-bright);
}

.mast-panel {
  display: flex;
  align-items: center;
  gap: 16px;
}

.side-toggle {
  display: flex;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.side-toggle button {
  border: none;
  background: var(--bg-1);
  color: var(--text-2);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.side-toggle button.active {
  background: var(--accent-soft);
  color: var(--gold);
}

.mast-slider-block {
  width: 150px;
}
.mast-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--text-2);
  margin-bottom: 3px;
}
.fine-toggle {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.fine-toggle.active {
  color: var(--gold);
  border-color: var(--accent);
}

/* Pinned "Rough" row at the top of the design selector (Design mode only) —
   visually set off from the library results below it. */
.design-row-rough {
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: 4px;
}

/* v0.46 follow-up 2: compact 2-column button grid (Jump/+Meet, Slice/Reset,
   Cut spanning the bottom); follow-up 3 moved the grid into its own
   "Actions" pill right of Mast Controls. */
.mast-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  align-items: stretch;
  align-self: center;
}
.mast-actions .btn {
  white-space: nowrap;
  padding: 5px 10px;
}
.mast-actions .btn.primary,
.mast-actions .mast-actions-span {
  grid-column: 1 / -1;
}

.btn {
  border: 1px solid var(--border-soft);
  background: var(--bg-3);
  color: var(--text-1);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--border);
  color: var(--text-0);
}
.btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.btn.primary {
  background: linear-gradient(180deg, var(--gold), #cf9f52);
  color: #221a0c;
  border-color: transparent;
}
.btn.primary:hover {
  filter: brightness(1.08);
}
.btn.primary:disabled {
  background: var(--bg-3);
  color: var(--text-3);
}
.btn.ghost {
  background: transparent;
}
.btn.danger {
  color: var(--rust-bright);
}
.btn.small {
  padding: 5px 10px;
  font-size: 11px;
}

/* ---------------- main workspace ----------------
   v0.46 follow-up: the right column (Gem Properties / Render Options) and
   the Render View pane are retired from Design mode (their DOM remains,
   hidden — live JS reads those inputs), so the grid is now two columns:
   Instructions | Design View. max-render kept harmless for old code paths. */
.workspace {
  display: grid;
  /* v0.46 follow-up 7: Instructions | Design View | Tools (the hidden
     #colProps produces no grid item) */
  grid-template-columns: 300px 1fr 300px;
  gap: 10px;
  padding: 10px;
  min-height: 0;
}

.workspace.max-instructions {
  grid-template-columns: 1fr 0px 0px;
}
.workspace.max-design,
.workspace.max-render {
  grid-template-columns: 0px 1fr 0px;
}
.workspace.max-tools {
  grid-template-columns: 0px 0px 1fr;
}

.side-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}

.center-col {
  display: grid;
  /* single column since the v0.46 follow-up — Design View only (the Render
     View pane beside it is hidden) */
  grid-template-columns: 1fr;
  gap: 10px;
  min-height: 0;
}

.workspace.max-instructions .center-col,
.workspace.max-design .center-col,
.workspace.max-render .center-col {
  grid-template-columns: 1fr;
}

.pane {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.pane-title {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}
/* v0.56: applied by setCutViewMode when the Render title (long material
   name + light-return badge) would push the view-mode chips onto a second
   line — shrink the text instead of wrapping (Kyle). Measured, not
   guessed: see the requestAnimationFrame check in setCutViewMode. */
.pane-title.pane-title-compact {
  font-size: 8.5px;
  letter-spacing: 0.3px;
}

.pane-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.hidden-pane {
  display: none !important;
}

/* instructions view */
.tier-list {
  height: 100%;
  overflow-y: auto;
  padding: 4px;
}

.tier-row {
  display: grid;
  /* middle column widened in v0.46 to fit the inline angle editor */
  grid-template-columns: 26px 68px 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 11.5px;
  align-items: start;
}
.tier-row:hover {
  background: var(--bg-2);
}
.tier-row.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.tier-row.hidden-tier {
  opacity: 0.4;
}
.tier-row .t-name {
  font-weight: 700;
  color: var(--gold);
  font-family: var(--font-mono);
}
.tier-row .t-angle {
  font-family: var(--font-mono);
  color: var(--cream-dim);
}
.tier-row .t-idx {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  word-break: break-all;
}
.tier-row .t-instr {
  color: var(--text-3);
  font-size: 10.5px;
  margin-top: 2px;
}
.tier-row .t-flags {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}
.t-flag {
  font-size: 8.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--text-2);
  text-transform: uppercase;
}

.tier-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-2);
}

.empty-hint {
  color: var(--text-3);
  font-size: 12px;
  padding: 26px 18px;
  text-align: center;
  line-height: 1.6;
}

/* 3D canvases */
.pane-canvas-wrap {
  position: absolute;
  inset: 0;
}
.pane-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.view-toolbar {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  gap: 8px;
}
.view-toolbar > * {
  pointer-events: auto;
}

/* Quick-orientation buttons (Crown / Pavilion / Girdle) floating over the
   top-left of the 3D viewer, mirroring .view-toolbar's bottom placement. */
.view-toolbar-top {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.view-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.view-chip {
  background: var(--chip-float-bg);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft);
  color: var(--chip-float-text);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 10.5px;
  cursor: pointer;
}
.view-chip.active {
  color: var(--gold);
  border-color: var(--accent);
}

/* v1.06: Scope / effect presets — floating cluster over the TOP-RIGHT of the
   Catalog render viewer (mirrors .view-toolbar-top's top-left placement). */
.scope-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.scope-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.scope-btn.armed {
  color: var(--gold);
  border-color: var(--accent);
}
.scope-caret {
  font-size: 9px;
  opacity: 0.8;
}
.scope-menu {
  display: none;
  flex-direction: column;
  min-width: 232px;
  padding: 5px;
  background: var(--chip-float-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.scope-menu.open {
  display: flex;
}
.scope-opt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
}
.scope-opt:hover {
  background: var(--accent-soft);
}
.scope-opt.active {
  background: var(--accent-soft);
}
.scope-opt.active .scope-opt-t {
  color: var(--gold);
}
.scope-opt-t {
  font-size: 11.5px;
  color: var(--text-0);
}
.scope-opt-d {
  font-size: 9.5px;
  color: var(--text-1);
  opacity: 0.85;
}
.scope-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border-soft);
}

/* Motion menu — the viewer "set in motion" control (tumble / spins / sway /
   rock), present in all four gem viewers. Mirrors .scope-* but the menu pops
   UPWARD because it lives in the bottom .view-toolbar. */
.motion-wrap {
  position: relative;
  display: inline-flex;
}
.motion-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.motion-btn.armed {
  color: var(--gold);
  border-color: var(--accent);
}
.motion-caret {
  font-size: 9px;
  opacity: 0.8;
}
.motion-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 6;
  flex-direction: column;
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
  padding: 5px;
  background: var(--chip-float-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.motion-menu.open {
  display: flex;
}
.motion-opt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  border-radius: 8px;
  cursor: pointer;
}
.motion-opt:hover {
  background: var(--accent-soft);
}
.motion-opt.active {
  background: var(--accent-soft);
}
.motion-opt.active .motion-opt-t {
  color: var(--gold);
}
.motion-opt-t {
  font-size: 11.5px;
  color: var(--text-0);
}
.motion-opt-d {
  font-size: 9.5px;
  color: var(--text-1);
  opacity: 0.85;
}
.motion-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border-soft);
}
/* Legend below the button — a swatch + label per zone of the active scope. */
.scope-legend {
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  background: var(--chip-float-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  max-width: 190px;
}
.scope-legend.show {
  display: flex;
}
.scope-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: var(--text-1);
}
.scope-legend-sw {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
}
/* v1.09: aperture slider row (IdealScope / Arrows / Hearts). */
.scope-aperture {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 9px;
  min-width: 172px;
  background: var(--chip-float-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.scope-aperture-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  color: var(--text-1);
}
.scope-aperture-val {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.scope-aperture input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Non-floating chip variant for controls mounted directly on a panel
   (e.g. a pane-head), as opposed to .view-chip which floats over a canvas. */
.pane-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pane-chip {
  background: var(--bg-3);
  border: 1px solid var(--border-soft);
  color: var(--text-1);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 10.5px;
  cursor: pointer;
}
.pane-chip:hover {
  border-color: var(--accent);
  color: var(--text-0);
}
.pane-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--gold);
}

.view-readout {
  background: var(--chip-float-bg);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 10px;
  color: var(--text-2);
  font-family: var(--font-mono);
  text-align: right;
  line-height: 1.5;
}
.view-readout b {
  color: var(--cream);
}

/* Axis rotate gizmo (Cut mode wireframe viewport, bottom-left). Click an
   arm to spin the model on that axis, hold to keep spinning, release to
   stop; the center Rotate toggle keeps whichever axis was last picked
   spinning on its own until it's clicked again. */
.axis-gizmo {
  position: absolute;
  left: 12px;
  bottom: 54px;
  z-index: 3;
  width: 96px;
  height: 98px;
}
.axis-gizmo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gizmo-hit {
  stroke: transparent;
  stroke-width: 16;
  fill: none;
  cursor: pointer;
}
.gizmo-axis-line {
  stroke: var(--text-2);
  stroke-width: 2.5;
  fill: none;
  pointer-events: none;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
}
.gizmo-axis-head {
  fill: var(--text-2);
  pointer-events: none;
  transition: fill 0.15s ease;
}
.gizmo-axis-label {
  fill: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  pointer-events: none;
  user-select: none;
  transition: fill 0.15s ease;
}
.gizmo-axis:hover .gizmo-axis-line,
.gizmo-axis.active .gizmo-axis-line {
  stroke: var(--gold);
  stroke-width: 3.5;
}
.gizmo-axis:hover .gizmo-axis-head,
.gizmo-axis.active .gizmo-axis-head,
.gizmo-axis:hover .gizmo-axis-label,
.gizmo-axis.active .gizmo-axis-label {
  fill: var(--gold);
}
.gizmo-center {
  cursor: pointer;
}
.gizmo-center-bg {
  fill: var(--chip-float-bg);
  stroke: var(--border-soft);
  stroke-width: 1.5;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
/* (the follow-up 6 "180" bubble buttons were replaced in follow-up 7 by
   double-click-to-flip on the axis arms themselves — no extra chrome) */
.gizmo-center-icon-text {
  fill: var(--chip-float-text);
  font-size: 14px;
  pointer-events: none;
  user-select: none;
  transition: fill 0.15s ease;
}
.gizmo-center:hover .gizmo-center-bg {
  stroke: var(--accent);
}
.gizmo-center.active .gizmo-center-bg {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.gizmo-center.active .gizmo-center-icon-text {
  fill: var(--gold);
}

/* Convert Index — the gear/facet readout sits directly under the button
   (with the dropdown opening above it), both right-aligned over the 3D
   canvas (see .view-toolbar). */
.convert-index-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.convert-index-btn {
  white-space: nowrap;
}
.convert-index-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: 6px;
  display: none;
  z-index: 20;
}
.convert-index-wrap.open .convert-index-menu {
  display: block;
}
.convert-index-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-1);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.convert-index-item:hover {
  background: var(--accent-soft);
  color: var(--text-0);
}
.convert-index-item.convert-index-original {
  color: var(--gold);
  justify-content: flex-start;
}
.convert-index-flag {
  font-size: 9.5px;
  letter-spacing: 0.3px;
  color: var(--text-3);
}
.convert-index-flag.ok {
  color: var(--ok);
}
.convert-index-item.warn .convert-index-flag {
  color: var(--rust-bright);
}

/* v0.59: render Export chip + popover (Catalog Render mode only). Mirrors
   the Convert Index dropdown, but anchored bottom-LEFT since it lives in the
   left chip cluster. */
/* v1.33: illuminant toggle for color-change stones (alexandrite) — lives inside
   the top-right scope cluster, directly UNDER the Studio / scope button (the
   .scope-wrap column is right-aligned). Shown only in Render mode for a
   color-change material. */
.illum-wrap {
  display: flex;
  justify-content: flex-end;
}
.illum-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
}
.illum-btn.incandescent {
  color: var(--gold);
  border-color: var(--accent);
}
/* Kyle v1.41: jewelry-case spotlights toggle — sits in the top-right scope
   cluster, under the illuminant chip. Chip on top, its two sliders below,
   both right-aligned to match the column. */
.spot-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* both children fill the wrap so button and panel share one width */
  align-self: flex-end; /* keep the cluster right-aligned */
  width: 128px; /* snug to the "✨ Spotlights: Off" label — the range inputs no longer dictate width */
  gap: 6px;
}
.spot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* stay centered when stretched to the wrap width */
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
}
.spot-btn.active {
  color: var(--gold);
  border-color: var(--accent);
}
.spot-sliders {
  min-width: 0;
  width: auto; /* stretched by the wrap to equal the Spotlights button width */
  padding: 6px 8px;
  gap: 3px;
}
.cut-export-wrap {
  position: relative;
  display: inline-flex;
}
.cut-export-btn {
  white-space: nowrap;
}
/* v0.60: the popover grew into a small settings panel (still + video, with
   format / motion / duration controls). */
.cut-export-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 236px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: 10px;
  display: none;
  z-index: 20;
}
.cut-export-wrap.open .cut-export-menu {
  display: block;
}
.cut-export-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cut-export-h {
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
}
.cut-export-div {
  height: 1px;
  background: var(--border-soft);
  margin: 10px 0;
}
.cut-export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-1);
}
.cut-export-sel {
  flex: 1 1 auto;
  max-width: 150px;
  background: var(--bg-3);
  color: var(--text-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.cut-export-sel:focus {
  outline: none;
  border-color: var(--accent);
}
.cut-export-sel option[disabled] {
  color: var(--text-3);
}
.cut-export-dur {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  max-width: 150px;
  min-width: 0;
}
.cut-export-dur input[type="range"] {
  flex: 1 1 auto;
  min-width: 0; /* let the slider shrink so the value stays inside the box */
  width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.cut-export-durval {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-2);
  min-width: 26px;
  text-align: right;
}
.cut-export-go {
  margin-top: 2px;
  width: 100%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--gold);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cut-export-go:hover {
  background: var(--accent);
  color: var(--bg-1);
}
.cut-export-go:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Recording state: red pulsing dot on the Export chip while the WebM clip
   is being captured. */
.cut-export-btn.recording {
  color: var(--gold);
  border-color: var(--accent);
}
.cut-export-btn.recording::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e2504f;
  margin-right: 5px;
  vertical-align: middle;
  animation: cutRecPulse 1s infinite;
}
@keyframes cutRecPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* side panels (gem properties / render options) */
.side-panel {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.side-panel-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.side-panel-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field-label {
  font-size: 10.5px;
  color: var(--text-2);
  display: flex;
  justify-content: space-between;
}
.field-label span.val {
  color: var(--cream);
  font-family: var(--font-mono);
}

select,
.select {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  color: var(--text-0);
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  width: 100%;
}

.color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.hsl-sliders {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hsl-sliders input[type="range"] {
  height: 16px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-1);
  cursor: pointer;
}

.lighting-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.lighting-opt {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 7px;
  font-size: 10.5px;
  color: var(--text-2);
  cursor: pointer;
  text-align: center;
}
.lighting-opt.active {
  border-color: var(--accent);
  color: var(--gold);
  background: var(--accent-soft);
}

/* status bar */
.status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-2);
}
/* v0.46 follow-up 5: the bar is an activity readout — one message, latest
   action wins, all modes. */
.status-bar .status-msg {
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-bar b {
  color: var(--text-1);
}
.status-spacer {
  flex: 1;
}
.status-msg {
  color: var(--gold);
}

/* ---------------- modal / dialogs ---------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 5, 8, 0.6);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
.modal-overlay.open {
  display: flex;
}
.modal {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  width: 560px;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal.wide {
  width: 860px;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.modal-head h2 {
  font-size: 14px;
  margin: 0;
  color: var(--cream);
}
.modal-body {
  padding: 16px 18px;
  overflow-y: auto;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
}

/* ---------------- Faceting Design Selector ---------------- */
.modal.design-selector-modal {
  width: 1180px;
  max-width: 96vw;
  height: 84vh;
}
.design-search-bar {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.design-search-input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  color: var(--text-0);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.design-search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.design-selector-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.design-filter-panel {
  overflow-y: auto;
  padding: 16px 14px 16px 18px;
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.design-results-panel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 16px 0;
  min-height: 0;
}
.design-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.design-results-count {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
}
.design-sort-select {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  color: var(--text-1);
  font-size: 11px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}
.design-sort-select:focus {
  outline: none;
  border-color: var(--accent);
}
.design-results-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.design-results-empty {
  color: var(--text-3);
  font-size: 12px;
  padding: 24px 0;
  text-align: center;
}
.design-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
}
.design-row:hover {
  border-color: var(--accent);
}
.design-row.active {
  border-color: var(--gold);
  background: var(--accent-soft);
}
/* v1.53: 3★+ designs locked for logged-out users — greyed with a lock badge */
.design-row.locked {
  opacity: 0.55;
  filter: grayscale(0.55);
}
.design-row.locked:hover {
  border-color: var(--gold);
  opacity: 0.75;
}
.design-row-lock {
  margin-right: 2px;
  opacity: 0.95;
}
.design-row-main {
  flex: 1;
  min-width: 0;
}
.design-row-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.design-row-meta {
  font-size: 10.5px;
  color: var(--text-2);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.design-row-thumbs {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.design-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.design-thumb-img {
  width: 52px;
  height: 52px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.design-thumb-img svg {
  width: 100%;
  height: 100%;
}
.design-thumb-label {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
}
.design-row-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--text-2);
  flex-shrink: 0;
  white-space: nowrap;
}
.design-row-stars {
  font-size: 15px;
  letter-spacing: 1.5px;
  font-family: inherit;
}
.star-filled {
  color: var(--difficulty-star);
}
.star-empty {
  color: var(--border);
}
.difficulty-inline {
  font-size: 15px;
  letter-spacing: 1.5px;
  vertical-align: middle;
}
.difficulty-inline-num {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
}
.design-filter-panel .range-pair {
  display: flex;
  align-items: center;
  gap: 6px;
}
.design-filter-panel .range-pair .num-field {
  width: 100%;
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--cream);
  padding: 6px 7px;
  text-align: center;
}
.design-filter-panel .range-dash {
  color: var(--text-3);
  font-size: 11px;
}

.close-x {
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.close-x:hover {
  color: var(--text-0);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.stat-box {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.stat-box .k {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
}
.stat-box .v {
  font-size: 17px;
  font-family: var(--font-mono);
  color: var(--gold);
  margin-top: 3px;
}

.optimizer-grid {
  display: grid;
  gap: 3px;
  aspect-ratio: 1;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 6px;
}
.optimizer-cell {
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
}
.optimizer-cell:hover {
  border-color: var(--accent);
}
.optimizer-cell.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.tilt-chart {
  width: 100%;
  height: 220px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.curve-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 10.5px;
}
.curve-legend label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--text-2);
}
.curve-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.assistant-steps {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.assistant-step {
  padding: 8px 10px;
  font-size: 11.5px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.assistant-step:last-child {
  border-bottom: none;
}
.assistant-step.current {
  background: var(--accent-soft);
  color: var(--gold);
}

.toast-stack {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 900;
}
.toast {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-0);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  box-shadow: var(--shadow-2);
}
.toast.err {
  border-color: var(--rust-bright);
  color: var(--rust-bright);
}

.onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
  text-align: center;
  padding: 30px;
}
.onboarding img {
  width: 64px;
  opacity: 0.9;
}
.onboarding h3 {
  margin: 0;
  color: var(--cream);
}
.onboarding p {
  color: var(--text-2);
  max-width: 380px;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   Cut Mode — design library, breakdown, rotating wireframe, steps
   ============================================================ */
.cut-mode-root {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px;
  gap: 10px;
  overflow: hidden;
}

.cut-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  flex-shrink: 0;
  /* Keep the bar the same height in all three modes (Kyle): Design / Catalog
     hold 32px .btn buttons, but Cut's toolbar only has the 31px selector
     buttons, so without this it renders ~3px shorter. */
  min-height: 56px;
}
.cut-select-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cut-select-wrap .field-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  white-space: nowrap;
  margin-bottom: 3px;
}
.design-browse-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* fixed width so the selector reads identically in all three modes
     (v0.46 follow-up 2); long names ellipsize in the label span */
  width: 300px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  color: var(--text-0);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.design-browse-btn:hover {
  border-color: var(--accent);
  color: var(--cream);
}
.design-browse-btn > span:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.design-browse-caret {
  color: var(--text-3);
  font-size: 10px;
}
.cut-toolbar-hint {
  color: var(--text-3);
  font-size: 11px;
  border-left: 1px solid var(--border-soft);
  padding-left: 16px;
}

.cut-layout {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.cut-col {
  min-height: 0;
  overflow-y: auto;
}
.cut-breakdown-col,
.cut-steps-col {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* breakdown header block */
.cut-design-title {
  font-size: 16px;
  color: var(--cream);
  font-weight: 700;
  margin: 0;
}
.cut-design-meta {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.6;
}
.cut-design-desc {
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.6;
}
.cut-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.cut-stats-grid .stat-box .v {
  font-size: 14px;
}

.cut-breakdown-heading {
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  margin-top: 4px;
}

.facet-group-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
}
.facet-group-row:hover {
  background: var(--bg-2);
}
.facet-group-row.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.facet-group-row .fg-diagram {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.facet-group-row .fg-diagram svg {
  width: 100%;
  height: 100%;
  display: block;
}
.facet-group-row .fg-text {
  flex: 1;
}
.facet-group-row .fg-count {
  font-family: var(--font-mono);
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
}
.facet-group-row .fg-label {
  font-size: 11.5px;
  color: var(--text-1);
}

/* rotating wireframe pane view-chip reuse */
.cut-wire-col .pane {
  height: 100%;
}

/* per-facet number/name labels (CSS2DRenderer overlay), like a real
   faceting diagram's facet labels repeated inside each facet */
.facet-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #1c1409;
  background: rgba(232, 194, 122, 0.92);
  border: 1px solid rgba(20, 15, 5, 0.4);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* Per-facet number labels only (not the L/W/T/U/C/P marker labels, which
   share the .facet-label base class but aren't clickable) -- the label
   renderer's own DOM layer is pointer-events:none so the 3D view underneath
   stays orbit/click-through, but each individual label re-enables pointer
   events on itself so it can be clicked directly. Clicking selects that
   facet's cutting-instructions step, same as clicking its row in the steps
   list -- see onFacetLabelClick in app.js. */
.facet-number-label {
  pointer-events: auto;
  cursor: pointer;
}
.facet-number-label:hover {
  background: rgba(107, 224, 255, 0.92);
  border-color: rgba(15, 20, 22, 0.5);
}

/* dimension-marker letter labels (L/W/T/U/C/P), used by Cut mode's
   "Markers" toggle. Uses the app's own warm rust-bright highlight accent
   (matches the marker line color in the 3D view) rather than a generic
   color, so it still reads as "this app's UI" — distinct from the gold
   Facet # labels so the two don't blend together when both are on. */
.marker-label {
  color: #2a0e05;
  background: rgba(217, 119, 72, 0.94);
  border-color: rgba(42, 14, 5, 0.45);
}

/* cutting sequence steps */
.cut-steps-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.cut-steps-list:focus-visible,
.cut-breakdown-body:focus-visible,
.tier-list:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.cut-section-heading {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold);
  padding: 12px 4px 5px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 3px;
}
.cut-section-heading:first-child {
  padding-top: 2px;
}
.cut-step-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cut-step-item:hover {
  background: var(--bg-2);
}
.cut-step-item .cs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--text-1);
}
.cut-step-item .cs-name {
  font-family: var(--font-mono);
  color: var(--gold);
  font-weight: 700;
  margin-right: 8px;
}
.cut-step-item .cs-instr {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.cut-step-item .cs-instr-repeat {
  font-style: italic;
  opacity: 0.75;
}
.cut-step-item .cs-idx {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-top: 3px;
  word-break: break-all;
}

/* Cutting-sequence group rows: one collapsed row per tier by default, with
   an expand button that swaps in the original one-row-per-facet listing. */
.cut-step-group .cs-head {
  align-items: center;
}
.cs-group-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cs-count {
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.cs-expand-btn {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cs-expand-btn:hover {
  background: var(--bg-3);
  color: var(--gold);
  border-color: var(--gold);
}
.cut-step-group.expanded .cs-expand-btn {
  color: var(--gold);
  border-color: var(--gold);
}
.cut-step-group-detail {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px 14px;
  padding-left: 10px;
  border-left: 2px solid var(--border-soft);
}
.cut-step-group-detail .cut-step-item {
  padding: 8px 10px;
}

/* the key requested behavior: selected step becomes larger and bold */
.cut-step-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: scale(1.035);
  transform-origin: left center;
}
.cut-step-item.active .cs-head {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-0);
}
.cut-step-item.active .cs-name {
  font-size: 16px;
}
.cut-step-item.active .cs-instr {
  font-size: 12px;
  color: var(--cream-dim);
}

@media (max-width: 1300px) {
  .cut-layout {
    grid-template-columns: 280px 1fr 280px;
  }
}
@media (max-width: 1100px) {
  .cut-layout {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(260px, auto);
  }
  .workspace {
    grid-template-columns: 1fr;
  }
  .center-col {
    grid-template-columns: 1fr;
  }
  .side-col {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* v0.55: Catalog toolbar Gem material dropdown — replaces the old
   five-cardinal-gems picker modal (its .gem-material-* card styles left with
   it). Skinned like the Design banner's #designMaterialSelect, sized to sit
   between the design selector and the print button without wrapping. */
.cut-material-select {
  min-width: 190px;
  font-size: 12px;
  padding: 7px 8px;
  background: var(--bg-2);
  color: var(--text-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.cut-material-select:hover {
  border-color: var(--accent);
}

/* v0.63 (Kyle): the gem material dropdown became a button that opens the
   picker modal. Styled like .design-browse-btn but sized to its content. */
.cut-material-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 190px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  color: var(--text-0);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.cut-material-btn:hover {
  border-color: var(--accent);
  color: var(--cream);
}
.cut-material-btn > span:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* v0.63: gem material PICKER modal — a card grid with live shake previews. */
.modal.gem-picker-modal {
  width: 780px;
}
.gem-picker-body {
  padding-top: 12px;
}
.gem-picker-note {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 12px;
}
.gem-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 14px 0 8px;
}
/* v1.13 (Kyle): compact list — no per-card render/swatch. Each material is a
   thin row (name left, RI/dispersion right); the blurb lives in the title
   tooltip so the picker stays dense. */
.gem-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px;
}
.gem-card {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 9px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  color: var(--text-0);
  transition: border-color 0.12s, background 0.12s;
}
.gem-card:hover {
  border-color: var(--accent);
}
.gem-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.gem-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gem-card-props {
  font-size: 11px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}

/* ============================================================
   Print: cutting sheet (all three modes)
   Only active while printCuttingSheet() has put a transient #printSheet
   node in <body> and set body.printing-cut-sheet. v0.49 item 6: Design
   mode prints a cutting sheet of the live session now too (its old plain
   window.print() "Print diagram" is gone), so this path serves every
   mode. Colors are hard-coded black-on-white rather than theme variables:
   a sheet printed from the dark theme should not come out
   cream-on-nothing.
   ============================================================ */
#printSheet {
  display: none;
}
@media print {
  body.printing-cut-sheet .app,
  body.printing-cut-sheet .toast-stack,
  body.printing-cut-sheet #modalRoot {
    display: none !important;
  }
  body.printing-cut-sheet #printSheet {
    display: block;
    /* The reused wireframe SVGs stroke with var(--text-1) — resolve it to
       plain black inside the sheet. */
    --text-1: #000;
    color: #111;
    font-family: var(--font-ui);
    font-size: 11pt;
  }
  #printSheet .ps-brand {
    display: flex;
    align-items: center;
    gap: 8pt;
    margin-bottom: 10pt;
    padding-bottom: 6pt;
    border-bottom: 1pt solid #ccc;
  }
  #printSheet .ps-brand-logo {
    width: 26pt;
    height: 26pt;
    border-radius: 50%;
  }
  #printSheet .ps-brand-name {
    font-size: 15pt;
    font-weight: 700;
    letter-spacing: 0.5pt;
    color: #111;
    line-height: 1.1;
  }
  #printSheet .ps-brand-name small {
    display: block;
    font-size: 7.5pt;
    font-weight: 400;
    letter-spacing: 1.5pt;
    color: #555;
  }
  #printSheet .ps-head h1 {
    margin: 0 0 4pt;
    font-size: 20pt;
  }
  #printSheet .ps-meta {
    font-size: 10pt;
    color: #333;
    line-height: 1.5;
    margin-bottom: 10pt;
  }
  #printSheet .ps-views {
    display: flex;
    gap: 18pt;
    margin-bottom: 10pt;
  }
  #printSheet .ps-view-img svg {
    width: 110pt;
    height: 110pt;
  }
  #printSheet .ps-view-label {
    text-align: center;
    font-size: 9pt;
    letter-spacing: 0.5pt;
    text-transform: uppercase;
    color: #333;
  }
  #printSheet .ps-props {
    display: flex;
    gap: 14pt;
    font-size: 10pt;
    margin-bottom: 6pt;
    font-family: "Courier New", monospace;
  }
  #printSheet .ps-section {
    font-size: 13pt;
    margin: 12pt 0 4pt;
    border-bottom: 1pt solid #000;
  }
  #printSheet .ps-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
  }
  #printSheet .ps-table th {
    text-align: left;
    border-bottom: 0.75pt solid #000;
    padding: 2pt 6pt 2pt 0;
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
  }
  #printSheet .ps-table td {
    vertical-align: top;
    border-bottom: 0.5pt solid #bbb;
    padding: 3pt 6pt 3pt 0;
  }
  /* Keep a tier's row from splitting across a page break mid-instructions. */
  #printSheet .ps-table tr {
    break-inside: avoid;
  }
  #printSheet .ps-name {
    font-weight: bold;
    white-space: nowrap;
  }
  #printSheet .ps-angle,
  #printSheet .ps-count {
    white-space: nowrap;
    font-family: "Courier New", monospace;
  }
  #printSheet .ps-idx {
    font-family: "Courier New", monospace;
    max-width: 150pt;
  }
  #printSheet .ps-foot {
    margin-top: 14pt;
    font-size: 8.5pt;
    color: #555;
  }
}

/* ============================================================
   Cut mode (guided cutting) — third top-level mode.
   Reuses .cut-mode-root for the page frame and .cut-steps-list /
   .cut-step-item for the instructions rows; everything below is
   what's genuinely new: the 3-window layout, the rough-stone dim
   controls, the stylised mast + index gear, and step navigation.
   ============================================================ */

/* Catalog is the app's home mode. Its pill keeps slightly more horizontal
   padding, but its label matches the other mode pills' font size (per Kyle). */
.mode-pill-lg {
  font-size: 12.5px;
  padding: 8px 24px;
}

.cutting-layout {
  display: grid;
  /* all three windows identical (machine window matched per Kyle) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Explicit row sizing. Without this the single implicit row is auto-
     sized from its tallest item's INTRINSIC height — which was the machine
     column's aspect-ratio'd SVGs. The canvas windows have no intrinsic
     height at all (absolute-positioned content), so maximizing Target
     Design or Rough Stone (machine column hidden) collapsed the row to
     just the pane banner. */
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
  flex: 1.35;
  min-height: 0;
}
.cutting-layout .cut-col {
  overflow: hidden;
}

.cutting-instructions-pane {
  flex: 1;
  min-height: 150px;
}
.cutting-steps-list {
  position: absolute;
  inset: 0;
  height: auto; /* override .cut-steps-list's height:100% — inset already sizes it */
  overflow-y: auto;
  padding: 10px 14px;
}

/* current step: bolded + highlighted for at-the-machine legibility */
.cutting-steps-list .cut-step-item.current {
  background: var(--bg-3);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.cutting-steps-list .cut-step-item.current .cs-head,
.cutting-steps-list .cut-step-item.current .cs-head span {
  color: var(--gold);
  font-weight: 700;
}
.cutting-steps-list .cut-step-item.current .cs-instr {
  color: var(--text-0);
  font-weight: 700;
}
.cutting-steps-list .cut-step-item.done {
  opacity: 0.55;
}
.cutting-steps-list .cut-step-item.done .cs-name::after {
  content: " ✓";
  color: var(--gold);
  font-weight: 700;
}

.cutting-step-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cutting-step-counter {
  font-size: 11px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.step-nav-btn {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  color: var(--text-0);
  border-radius: var(--radius-sm);
  width: 30px;
  height: 26px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
}
.step-nav-btn:hover {
  border-color: var(--accent);
  color: var(--gold);
}
.step-nav-btn:active {
  transform: translateY(1px);
}

/* rough stone dimension controls + weight readouts: one narrow column down
   the right edge (L, W, D, Round corners, rough ct, finished ct). The
   bottom-left slot holds the Catalog-position Markers / Facet # / X-Ray
   toggles, top-left the Crown/Pavilion/Girdle chips, bottom-right the
   small axis gizmo. */
.rough-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  width: 122px;
  z-index: 2;
}
.rough-controls .rough-dim {
  justify-content: space-between;
}
.rough-controls .view-chip {
  text-align: center;
}
.rough-vol-readout {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer; /* click flips carats ↔ volume (Cut + Design rough windows) */
}
.rough-vol-readout b {
  color: var(--gold);
  font-weight: 700;
}

/* Live dimension list in the rough window's right-hand control column.
   Hidden by default and only revealed when that window is maximized
   (.max-rough), per Kyle — the small tiled view has no room for it. Lists
   the same L/W/T/U/C/P measurements drawn by the Markers overlay, in mm. */
.rough-dim-list {
  display: none;
  text-align: left;
  padding: 8px 10px;
}
.cutting-mode-root.max-rough .rough-dim-list {
  display: block;
}
.rough-dim-list .rough-dim-list-title {
  color: var(--text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
  margin-bottom: 5px;
}
.rough-dim-list .rough-dim-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  line-height: 1.7;
}
.rough-dim-list .rough-dim-key {
  color: var(--rust-bright);
  font-weight: 700;
}
.rough-dim-list .rough-dim-name {
  color: var(--text-2);
  flex: 1 1 auto;
  margin-left: 6px;
}
.rough-dim-list .rough-dim-val {
  color: var(--cream);
  font-weight: 700;
  white-space: nowrap;
}

/* Maximized rough window has plenty of width, so widen the whole right-hand
   readout column — and stop the carat/volume boxes clipping to an ellipsis —
   so the longer lines (dimension rows, "Finished 12.34 ct") fit fully. All
   boxes in the column stretch to this width together (align-items:stretch). */
.cutting-mode-root.max-rough .rough-controls {
  width: 210px;
}
.cutting-mode-root.max-rough .rough-vol-readout {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* smaller gizmo variant used by both Cut-mode 3D windows — bottom-LEFT,
   sitting just above the Markers/Facet #/X-Ray toggle row (Catalog's
   arrangement, third relocation and Kyle's final answer: right side was
   wrong both times). Class name kept for churn-avoidance. */
.axis-gizmo-br {
  left: 12px;
  right: auto;
  bottom: 44px;
  width: 64px;
  height: 66px;
}

/* carat/volume readouts are clickable (ct ↔ mm³) */
.rough-vol-readout {
  cursor: pointer;
}
.rough-vol-readout:hover {
  border-color: var(--accent);
}

/* Cut-mode window ⤢ buttons: slightly smaller than the header icon-btns so
   they sit comfortably in a pane-head chip row; gold when maximized. */
[data-cutting-maximize] {
  width: 24px;
  height: 24px;
  font-size: 13px;
}
[data-cutting-maximize].active {
  color: var(--gold);
  border-color: var(--accent);
  background: var(--bg-3);
}

/* ---- Cut mode: View-menu maximize states ----
   #cuttingModeRoot carries max-design | max-rough | max-machine |
   max-instructions (set by setCuttingMaximize); each hides everything but
   the chosen window. The menu items themselves are only visible while Cut
   mode is active (#app.cutting-mode). */
.menu-item[data-cutting-only] {
  display: none;
}
#app.cutting-mode .menu-item[data-cutting-only] {
  display: flex;
}
.cutting-mode-root.max-design .cutting-col-rough,
.cutting-mode-root.max-design .cutting-col-machine,
.cutting-mode-root.max-rough .cutting-col-design,
.cutting-mode-root.max-rough .cutting-col-machine,
.cutting-mode-root.max-machine .cutting-col-design,
.cutting-mode-root.max-machine .cutting-col-rough,
.cutting-mode-root.max-design .cutting-instructions-pane,
.cutting-mode-root.max-rough .cutting-instructions-pane,
.cutting-mode-root.max-machine .cutting-instructions-pane,
.cutting-mode-root.max-instructions .cutting-layout {
  display: none;
}
.cutting-mode-root.max-design .cutting-layout,
.cutting-mode-root.max-rough .cutting-layout,
.cutting-mode-root.max-machine .cutting-layout {
  grid-template-columns: 1fr;
}

/* Catalog toolbar: Open in Cut pinned to the banner's far right */
.cut-toolbar-far-right {
  margin-left: auto;
}

/* ---- Catalog mode: per-window ⤢ maximize buttons ----
   Same toggle as Cut mode's windows: gold when that window is maximized. */
[data-catalog-maximize] {
  width: 24px;
  height: 24px;
  font-size: 13px;
}
[data-catalog-maximize].active {
  color: var(--gold);
  border-color: var(--accent);
  background: var(--bg-3);
}

/* Description banner: the design name can be long, so keep it on one line and
   ellipsize rather than wrapping and shoving the ⤢ button onto a second row. */
.cut-breakdown-head {
  flex-wrap: nowrap;
}
#cutBreakdownTitle {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The description window is now a banner-headed pane (like Cutting Sequence):
   its scrollable content lives in .cut-breakdown-body inside the pane-body. */
.cut-breakdown-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  overflow-y: auto;
  padding: 12px;
}

/* Maximize states: #cutModeRoot carries max-breakdown | max-wire | max-steps;
   each hides the other two windows and lets the chosen one span full width. */
.cut-mode-root.max-breakdown .cut-wire-col,
.cut-mode-root.max-breakdown .cut-steps-col,
.cut-mode-root.max-wire .cut-breakdown-col,
.cut-mode-root.max-wire .cut-steps-col,
.cut-mode-root.max-steps .cut-breakdown-col,
.cut-mode-root.max-steps .cut-wire-col {
  display: none;
}
.cut-mode-root.max-breakdown .cut-layout,
.cut-mode-root.max-wire .cut-layout,
.cut-mode-root.max-steps .cut-layout {
  grid-template-columns: 1fr;
}

/* Facet breakdown: a single stacked column at normal width, but when the
   Description window is maximized there's room to flow the group rows into a
   responsive multi-column grid. */
.cut-facet-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.cut-mode-root.max-breakdown .cut-facet-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
}

/* View menu shows only the active mode's maximize entries. Catalog entries
   appear only in Catalog mode; the Design-mode entries are hidden whenever a
   library design (Catalog or Cut) is on screen. */
.menu-item[data-catalog-only] {
  display: none;
}
#app.catalog-only-mode .menu-item[data-catalog-only] {
  display: flex;
}
#app.catalog-mode [data-menu="view"] .menu-item[data-design-only] {
  display: none;
}

/* rough window: gemstone selector at the top of the right-edge column */
.rough-gem-select {
  width: 100%;
  font-size: 11px;
  padding: 4px 6px;
  background: var(--bg-2);
  color: var(--text-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

/* cutting-instructions banner: cut-order toggle */
.cutting-order-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-3);
  margin-right: 2px;
}
.cutting-step-nav .pane-chip-row {
  margin-right: 10px;
}
.rough-dim {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--chip-float-text);
  background: var(--chip-float-bg);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
}
.rough-dim .num-field {
  width: 52px;
  padding: 2px 5px;
  font-size: 11px;
}
.rough-dim-unit {
  font-size: 10px;
  color: var(--text-3);
}

/* machine column: mast on the left, gear on the right, background matched
   to the 3D viewers' canvas colors (DesignView.applyTheme: light 0xefe7d6,
   dark 0x0f0e13 — keep in sync if those ever change) */
.cutting-machine-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  overflow: hidden;
  background: #efe7d6;
}
html[data-theme="dark"] .cutting-machine-body {
  background: #0f0e13;
}
.cutting-mast-wrap {
  flex: 1.1;
  min-width: 0;
  height: 100%;
  min-height: 0;
}
.cutting-mast-wrap svg,
.cutting-gear-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cutting-gear-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
}
.gear-hub-index {
  fill: #17151c;
  font-family: "Courier New", monospace;
  font-weight: 700;
}
.cutting-gear-svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.cutting-gear-svg:hover .gear-disc {
  stroke: var(--gold);
}
/* the gear menu opens on its own .open class (Catalog's version relies on
   a parent .convert-index-wrap.open, which doesn't exist here) */
.cutting-gear-menu {
  bottom: auto;
  top: 0;
  right: 0;
}
.cutting-gear-menu.open {
  display: block;
}

/* stylised machine SVG parts (inline SVG, so CSS vars theme them) */
.mast-metal {
  fill: var(--bg-3);
  stroke: var(--border-strong, var(--border-soft));
  stroke-width: 1;
}
.mast-dark {
  fill: #17151c;
  stroke: #3a3745;
  stroke-width: 1;
}
.mast-readout-text {
  fill: #58b7ff;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 1px;
}
.mast-scale-line {
  stroke: var(--text-3);
  stroke-width: 1;
}
.mast-label {
  fill: var(--text-3);
  font-size: 8px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.mast-side-label {
  fill: var(--gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gear-disc {
  fill: #17151c;
  stroke: #3a3745;
  stroke-width: 1.5;
}
.gear-tooth {
  stroke: #4d4a58;
  stroke-width: 2;
}
.gear-number {
  fill: #e8e4da;
  font-size: 7.5px;
  font-weight: 700;
  font-family: "Courier New", monospace;
}
.gear-hub {
  fill: #b9b6c0;
  stroke: #8b8794;
}
.gear-hub-inner {
  fill: #d8d5de;
}
.gear-pointer {
  fill: var(--gold);
}
.gear-caption {
  fill: var(--text-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

@media (max-width: 1200px) {
  .cutting-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .cutting-machine-col {
    grid-column: 1 / -1;
  }
  .cutting-machine-col .cutting-machine-body {
    flex-direction: row;
    justify-content: center;
  }
}

/* ---------------- Tools: Refractive Index Chart ----------------
   Mode-independent reference modal (Tools menu). Shared five-column grid
   (--ri-cols) keeps the column header, the axis ticks and every row's
   range bar in perfect horizontal register. Uses only theme variables, so
   it follows light/dark automatically. */
.modal.ri-chart-modal {
  --ri-cols: minmax(150px, 210px) minmax(0, 1fr) 108px 84px 56px;
  width: 1020px;
  max-width: 94vw;
  height: 84vh;
}
.ri-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.ri-search {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  font: 12px var(--font-ui);
  padding: 8px 10px;
  outline: none;
}
.ri-search:focus {
  border-color: var(--accent);
}
.ri-sort-group {
  display: flex;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ri-sort-btn {
  background: var(--bg-2);
  border: none;
  color: var(--text-2);
  font: 600 11px var(--font-ui);
  padding: 7px 12px;
  cursor: pointer;
}
.ri-sort-btn + .ri-sort-btn {
  border-left: 1px solid var(--border-soft);
}
.ri-sort-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.ri-count {
  color: var(--text-3);
  font: 11px var(--font-mono);
  min-width: 62px;
  text-align: right;
}
.ri-colhead,
.ri-row {
  display: grid;
  grid-template-columns: var(--ri-cols);
  gap: 12px;
  align-items: center;
  padding: 0 18px;
}
.ri-colhead {
  border-bottom: 1px solid var(--border-soft);
  padding-top: 8px;
  padding-bottom: 16px; /* room for the tick labels hanging below */
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.ri-col-num {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
.ri-colhead .ri-col-num {
  font-family: var(--font-ui);
  font-size: 10px;
}
.ri-col-axis {
  position: relative;
  min-width: 0;
}
.ri-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--text-3);
  font: 9px var(--font-mono);
  text-align: center;
}
.ri-tick i {
  display: block;
  width: 1px;
  height: 5px;
  margin: 0 auto 2px;
  background: var(--border);
}
.ri-rows {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 8px;
}
.ri-row {
  min-height: 26px;
}
.ri-row:hover {
  background: var(--accent-soft);
}
.ri-row .ri-col-name {
  color: var(--text-1);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ri-row:hover .ri-col-name {
  color: var(--text-0);
}
.ri-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-3);
  /* faint gridlines at every 0.2 of the 1.3–3.3 scale (every 10%) */
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(10% - 1px),
    var(--border-soft) calc(10% - 1px),
    var(--border-soft) 10%
  );
}
.ri-bar {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(to right, var(--gold), var(--rust-bright));
}
.ri-bar.ri-dot {
  width: 8px;
  margin-left: -4px; /* center the dot on its RI value */
  border-radius: 50%;
}
.ri-dr {
  color: var(--text-2);
}
.ri-empty {
  padding: 28px 18px;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}
.ri-foot {
  align-items: center;
}
.ri-note {
  flex: 1;
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.45;
  text-align: left;
}

/* ---------------- Tools: SG chart + Lap & Polish + calculators ----------
   The SG chart reuses the whole .ri-* system with a narrower column set;
   its scale is 1–10 so the track gridlines land on every 1.0 SG. The Lap
   guide has its own 6-column grid. Calculators reuse .field/.grid-*. */
.modal.ri-chart-modal.sg-chart-modal {
  --ri-cols: minmax(150px, 240px) minmax(0, 1fr) 108px;
  width: 900px;
}
.ri-track.sg-track {
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(11.111% - 1px),
    var(--border-soft) calc(11.111% - 1px),
    var(--border-soft) 11.111%
  );
}
.modal.ri-chart-modal.lap-guide-modal {
  width: 1120px;
  --lap-cols: minmax(150px, 210px) 52px 90px minmax(110px, 150px) minmax(90px, 120px) minmax(0, 1fr);
}
.lap-colhead,
.lap-row {
  display: grid;
  grid-template-columns: var(--lap-cols);
  gap: 12px;
  padding: 0 18px;
}
.lap-colhead {
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  padding-top: 8px;
  padding-bottom: 8px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.lap-row {
  align-items: baseline;
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 11.5px;
  color: var(--text-1);
}
.lap-row:hover {
  background: var(--accent-soft);
}
.lap-row .ri-col-name {
  white-space: normal; /* material names wrap; rows are multi-line anyway */
  font-weight: 600;
  color: var(--cream-dim);
}
.lap-mohs {
  font-family: var(--font-mono);
  color: var(--gold);
}
.lap-note {
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.45;
}
.tool-note {
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.5;
}
.tool-warn {
  color: var(--danger);
  font-weight: 600;
}

/* ---------------- Tools: Mohs + Dispersion charts ----------------
   Mohs reuses the SG chart's 3-column layout; its 1-10 scale puts a
   gridline on every 0.5 Mohs (span 9 → 5.5556%). Dispersion has a 4th
   column (×D, relative to diamond) and a 0-0.30 scale with gridlines
   every 0.025 (span 0.30 → 8.3333%). */
.ri-track.mohs-track {
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(5.5556% - 1px),
    var(--border-soft) calc(5.5556% - 1px),
    var(--border-soft) 5.5556%
  );
}
.modal.ri-chart-modal.disp-chart-modal {
  --ri-cols: minmax(150px, 250px) minmax(0, 1fr) 100px 52px;
  width: 960px;
}
.ri-track.disp-track {
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(8.3333% - 1px),
    var(--border-soft) calc(8.3333% - 1px),
    var(--border-soft) 8.3333%
  );
}

/* ---------------- Tools: Pleochroism / Cleavage / Heat text charts --------
   Three multi-column reference tables built on the Lap guide's grid system
   (.lap-colhead / .lap-row), each overriding --lap-cols for its columns.
   Severity classes (dz-*) color the toughness / ultrasonic / strength cells
   so the risky materials stand out at a glance. */
.modal.ri-chart-modal.pleo-guide-modal {
  width: 1180px;
  --lap-cols: minmax(150px, 210px) minmax(96px, 130px) 108px minmax(150px, 230px) minmax(0, 1fr);
}
.modal.ri-chart-modal.cleave-guide-modal {
  width: 1060px;
  --lap-cols: minmax(150px, 220px) minmax(150px, 250px) 96px minmax(0, 1fr);
}
.modal.ri-chart-modal.heat-guide-modal {
  width: 1200px;
  --lap-cols: minmax(140px, 200px) minmax(150px, 230px) minmax(120px, 180px) 96px minmax(0, 1fr);
}
.lap-optic {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}
.dz-good {
  color: var(--gold);
  font-weight: 600;
}
.dz-mid {
  color: var(--rust-bright);
  font-weight: 600;
}
.dz-bad {
  color: var(--danger);
  font-weight: 700;
}
.dz-null {
  color: var(--text-3);
}

/* ---------------- Tools: RI Angle Converter preset chips ---------------- */
.rac-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.rac-preset {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font: 600 11px var(--font-ui);
  padding: 6px 10px;
  cursor: pointer;
}
.rac-preset:hover {
  border-color: var(--accent);
  color: var(--text-0);
}
.rac-preset.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------- Tools: Gem Reference Database (master/detail) ---------- */
.modal.gemdb-modal {
  width: 1080px;
  max-width: 95vw;
  height: 84vh;
}
.gemdb-split {
  flex: 1;
  display: flex;
  min-height: 0;
}
.gemdb-list-col {
  width: 288px;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border-soft);
}
.gemdb-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.gemdb-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.gemdb-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-1);
}
.gemdb-item:hover {
  background: var(--accent-soft);
}
.gemdb-item.active {
  background: var(--accent-soft);
  color: var(--text-0);
  box-shadow: inset 3px 0 0 var(--accent);
}
.gemdb-item-n {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gemdb-item-ri {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
}
.gemdb-detail {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  min-width: 0;
}
.gemdb-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--cream);
}
.gemdb-optic-line {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  margin: 3px 0 14px;
}
.gemdb-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}
.gemdb-x {
  color: var(--text-3);
  font-size: 10px;
}
.gemdb-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 16px 0 6px;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 4px;
}
.gemdb-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  padding: 3px 0;
  font-size: 12px;
  align-items: baseline;
}
.gemdb-k {
  color: var(--text-3);
}
.gemdb-v {
  color: var(--text-1);
}
.gemdb-muted {
  color: var(--text-3);
  font-size: 11px;
}
.gemdb-note {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 2px 0 2px;
  padding-left: 4px;
  border-left: 2px solid var(--border-soft);
  padding-top: 1px;
  padding-bottom: 1px;
}
.gemdb-profile {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-1);
  margin: 6px 0 4px;
}

/* ---------------- Design mode v0.46: banner, machine graphics, editable
   tier table, Analyse Rough modal ---------------- */

/* The design root used to be a plain block; the new banner strip needs the
   flex-column treatment the other two mode roots already have so the
   workspace keeps a definite height below it. (.hidden-pane still wins —
   it's display:none !important.) */
#designModeRoot {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#designModeRoot .workspace {
  flex: 1;
  min-height: 0;
}
#designModeRoot .control-strip {
  flex-shrink: 0;
}

/* Same floating rounded pill as the Catalog / Cut banners (v0.46
   follow-up 2 — the earlier full-bleed variant is gone). The design root
   has no .cut-mode-root padding, so the margin stands in for it. */
.design-toolbar {
  margin: 10px 10px 0;
  gap: 18px; /* match Catalog / Cut toolbars so "Gem material" sits in the same spot (Kyle) */
}

/* stylised mast + gear in the control strip — same SVGs as Cut mode's
   machine window, scaled down to control-strip height. Explicit widths
   (from each drawing's viewBox aspect) rather than width:auto, which some
   browsers resolve to 0 for an SVG in a flex row. */
.design-machine-svg {
  height: 120px; /* v0.48: 96→140px; v0.49 item 1: eased back to 120px, per Kyle */
  flex-shrink: 0;
}
.design-machine-svg svg {
  height: 100%;
  width: 100%;
  display: block;
}
.design-mast-svg {
  width: 94px; /* 220×280 viewBox at 120px tall */
}
.design-gear-svg {
  width: 106px; /* 220×250 viewBox at 120px tall */
}
/* v0.48 item 3: Design mode's Pavilion/Crown toggle stacks vertically
   (Pavilion on top) to give the enlarged mast drawing its width back.
   Scoped by class — the dialogs' own .side-toggle rows stay horizontal. */
.side-toggle.side-toggle-stack {
  flex-direction: column;
}
.side-toggle.side-toggle-stack button + button {
  border-top: 1px solid var(--border-soft);
}
.design-gear-svg {
  cursor: pointer;
}
.design-gear-svg:hover .gear-disc {
  stroke: var(--gold);
}

/* inline-editable angle / index fields in the tier table */
.tier-inline-input {
  width: 52px;
  padding: 1px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream-dim);
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}
.tier-inline-input:hover {
  border-color: var(--accent);
}
.tier-inline-input:focus {
  border-color: var(--gold);
  outline: none;
  color: var(--text-0);
}
.tier-idx-input {
  width: 44px;
}
.t-idx-list {
  margin-left: 4px;
}

/* Analyse Rough modal */
.analyse-modal {
  width: 980px;
  max-width: 94vw;
}

/* v0.51: 💡 Analyse Light modal — score strip, breakdown bars, issue cards,
   per-tier table. Bar colors are semantic AND on-palette: gold = returned
   light, rust = leakage, dim gray = head shadow, near-bg = absorbed. */
.light-analysis-modal {
  width: 1320px; /* v0.52: widened for the 3D results window; v0.53: larger still (Kyle) */
  max-width: 96vw;
}
.light-analysis-body {
  max-height: 84vh;
  overflow: auto;
}
/* v0.52: tilt-performance line + two-column content (3D viz | issues+table) */
.light-tilt-line {
  font-size: 11px;
  color: var(--text-1);
  padding: 6px 2px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.light-content-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 4px;
}
.light-viz-col {
  width: 400px; /* v0.53 tried 520px; v0.54: back to the v0.52 size (Kyle) */
  flex: none;
  position: sticky;
  top: 0;
}
.light-viz-wrap {
  height: 360px; /* v0.53 tried 500px; v0.54: back to the v0.52 size (Kyle) */
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
/* v0.54: Crown / Pavilion / Girdle camera presets overlaying the modal viz —
   same .view-chip skin as the Design View's own preset row */
.light-viz-chips {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
/* v0.53: the axis gizmo inside the modal viz — same markup/classes as the
   big views, just anchored to the wrap's corner (the 54px bottom offset in
   the base rule clears the big canvases' view toolbars, which don't exist
   here) */
.light-viz-wrap .axis-gizmo {
  bottom: 10px;
  left: 10px;
}
.light-viz-wrap canvas {
  display: block;
}
.light-viz-fallback {
  color: var(--text-3);
  font-size: 11px;
  text-align: center;
  padding-top: 160px;
}
.light-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-1);
  padding: 7px 2px 3px;
}
.light-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 5px;
}
.light-viz-hint {
  font-size: 10.5px;
  color: var(--text-3);
  line-height: 1.45;
}
.light-right-col {
  flex: 1;
  min-width: 0;
}
.light-right-col .light-h3:first-child {
  margin-top: 0;
}
@media (max-width: 900px) {
  .light-content-row {
    flex-direction: column;
  }
  .light-viz-col {
    width: 100%;
    position: static;
  }
}
.light-score-strip {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 6px 2px 10px;
}
.light-score-big {
  text-align: center;
  min-width: 130px;
}
.light-score-num {
  font-size: 34px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.light-score-grade {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.light-score-sub {
  font-size: 11px;
  color: var(--text-2);
}
.light-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.light-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.light-bar-label {
  width: 84px;
  color: var(--text-1);
  text-align: right;
}
.light-bar {
  flex: 1;
  height: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  overflow: hidden;
}
.light-bar-fill {
  height: 100%;
  border-radius: 4px;
}
.light-bar-val {
  width: 48px;
  font-family: var(--font-mono);
  color: var(--text-1);
}
.light-meta {
  font-size: 11px;
  color: var(--text-2);
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.light-h3 {
  font-size: 12px;
  color: var(--cream);
  margin: 12px 0 6px;
}
.light-issue {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12px;
}
.light-issue-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-0);
}
.light-issue-sev {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.light-issue-detail {
  color: var(--text-1);
  margin: 4px 0 2px;
}
.light-issue-remedy {
  color: var(--gold);
}
.light-tier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.light-tier-table th {
  text-align: left;
  color: var(--text-2);
  font-weight: 600;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.light-tier-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-1);
  font-family: var(--font-mono);
}
.light-tier-table td:first-child {
  font-family: var(--font-ui);
}
.light-footnote {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 10px;
  line-height: 1.5;
}
.analyse-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.analyse-bar select {
  min-width: 190px;
}
.analyse-hide-row {
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}
.analyse-body {
  max-height: 62vh;
  overflow-y: auto;
  padding: 10px 18px 16px;
}
.analyse-row {
  display: grid;
  grid-template-columns: 28px minmax(160px, 1fr) 150px 84px 62px 72px;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  border: 1px solid transparent;
}
.analyse-row:hover {
  background: var(--bg-2);
  border-color: var(--accent);
}
.analyse-head-row,
.analyse-head-row:hover {
  background: none;
  border-color: transparent;
  cursor: default;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  font-family: inherit;
}
.analyse-rank {
  color: var(--text-3);
}
.analyse-name {
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.analyse-name span {
  font-size: 10.5px;
  color: var(--text-3);
}
.analyse-ct b {
  color: var(--gold);
}
.analyse-flag.ok {
  color: var(--ok, #4caf7d);
}
.analyse-flag.warn {
  color: var(--warn, #e0a838);
}

/* Tools window (v0.46 follow-up 7) — a vertical stack of tool buttons */
.design-tools-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  /* v1.38 (Kyle): scroll instead of clipping the last buttons (Analyse Fire)
     out of the pane if the list is ever taller than the Tools window. */
  overflow-y: auto;
  min-height: 0;
}
.design-tools-list .btn {
  text-align: left;
}
/* v0.47 item 1: the always-present girdle slider (popup retired) */
.design-tools-list .field input[type="range"] {
  width: 100%;
}
/* v1.38 (Kyle): compact the girdle + scale slider fields (shorter tracks,
   tighter label/slider gaps) so they don't crowd out the tools below them. */
#girdleResizeField,
#scaleField {
  gap: 2px;
}
#girdleResizeField input[type="range"],
#scaleField input[type="range"] {
  height: 18px;
}
/* v0.47 item 4: Add Meet lives here now — it's a toggle, so it needs the
   same lit "active" treatment the view chips had */
.design-tools-list .btn.active {
  color: var(--gold);
  border-color: var(--accent);
}
/* v0.51: Ray Trace material row — gemstone dropdown (same skin as the
   Design View banner's rough-gem-select) over linked RI / critical-angle
   fields (GemCad's Raytrace/Properties: type either, the other follows) */
.design-tools-list select {
  width: 100%;
  font-size: 11px;
  padding: 4px 6px;
  background: var(--bg-2);
  color: var(--text-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.ray-ri-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.ray-ri-lab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}
.ray-ri-lab .num-field {
  width: 100%;
  min-width: 0;
}
/* v0.53: the Gem material dropdown in the design banner (right of the
   faceting-design selector) — same skin as the rough-gem select, sized to
   sit comfortably in the toolbar row */
.design-material-select {
  min-width: 180px;
  font-size: 12px;
  padding: 7px 8px;
  background: var(--bg-2);
  color: var(--text-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
/* v0.54: the linked RI / critical-angle fields moved from the Tools window
   into the banner, right of the Gem material dropdown — compact toolbar fit */
.ray-ri-banner .ray-ri-row {
  margin-top: 0;
}
.ray-ri-banner .num-field {
  width: 64px;
}

/* Save design dialog text fields */
.save-design-field {
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

/* Tier comment dialog (v0.46 follow-up 6) */
.tier-comment-text {
  width: 100%;
  resize: vertical;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  font-family: inherit;
}
.tier-comment-text:focus {
  border-color: var(--gold);
  outline: none;
}

/* Settings + Keyboard Shortcuts modals (v0.46 follow-up 4) */
.settings-note {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 6px 0 0;
}
.shortcuts-body {
  max-height: 64vh;
  overflow-y: auto;
}
.shortcut-group {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin: 12px 0 4px;
}
.shortcut-group:first-child {
  margin-top: 0;
}
.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--text-1);
}
.shortcut-row .kbd {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  background: var(--bg-3);
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-0);
}

/* ===================================================================
   Profile & sign-in (v1.34)
   =================================================================== */
.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}
.header-auth {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.header-auth:hover {
  color: var(--text-0);
  border-color: var(--border-strong);
  background: var(--bg-3);
}
.header-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-3);
  color: var(--text-0);
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.header-avatar:hover {
  border-color: var(--gold);
}
.header-avatar-fallback {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
}
.header-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- profile overlay ---- */
.profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 20px;
  overflow-y: auto;
}
.profile-panel {
  width: 100%;
  max-width: 980px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 96px);
  overflow: hidden;
}
.profile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.profile-topbar h2 {
  margin: 0;
  font-size: 17px;
  color: var(--cream);
  letter-spacing: 0.3px;
}
.profile-close {
  font-size: 20px;
  line-height: 1;
}
.profile-scroll {
  padding: 22px;
  overflow-y: auto;
}

/* ---- identity card ---- */
.profile-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-bottom: 26px;
}
.profile-avatar-lg {
  position: relative;
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-3);
  color: var(--text-0);
  cursor: pointer;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
}
.profile-avatar-lg span:not(.profile-avatar-edit) {
  font-size: 30px;
  font-weight: 700;
}
.profile-avatar-lg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar-edit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.12s;
}
.profile-avatar-lg:hover .profile-avatar-edit {
  opacity: 1;
}
.profile-identity-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-identity-fields .num-field {
  font-size: 16px;
  font-weight: 600;
  max-width: 320px;
}
.profile-identity-note {
  font-size: 11.5px;
  color: var(--text-3);
}

/* ---- design sections ---- */
.profile-section {
  margin-bottom: 26px;
}
.profile-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-section-head h3 {
  margin: 0;
  font-size: 14px;
  color: var(--text-0);
  letter-spacing: 0.3px;
}
.profile-section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--bg-3);
  border-radius: 999px;
  padding: 1px 8px;
}
.profile-section-sub {
  margin: 3px 0 12px;
  font-size: 11.5px;
  color: var(--text-3);
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.profile-empty {
  grid-column: 1 / -1;
  padding: 22px;
  text-align: center;
  color: var(--text-3);
  font-size: 12.5px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
}

/* ---- design card ---- */
.profile-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.profile-card:hover {
  border-color: var(--border-strong);
}
.profile-card-thumbs {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.profile-thumb {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 6px 2px;
}
.profile-thumb svg {
  width: 56px;
  height: 56px;
}
.profile-thumb span {
  font-size: 9.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-3);
}
.profile-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-0);
}
.profile-card-meta {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 1px;
}
.profile-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.profile-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.profile-card-actions .profile-open {
  flex: 1;
  padding: 6px 4px;
  font-size: 11.5px;
}

/* ================= Help: User Manual (Help > User Manual) =================
   Two-pane modal — sticky TOC on the left, scrollable body on the right,
   with inline theme-aware SVG figures. */
.modal.manual-modal {
  width: 1080px;
  max-width: 96vw;
  height: 86vh;
}
.man-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.man-toc {
  flex: 0 0 210px;
  overflow-y: auto;
  padding: 14px 10px 18px;
  border-right: 1px solid var(--border-soft);
  background: var(--bg-2);
}
.man-toc-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-3);
  padding: 0 10px 8px;
}
.man-toc-link {
  display: block;
  padding: 6px 10px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.man-toc-link:hover {
  background: var(--bg-3);
  color: var(--text-1);
}
.man-toc-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.man-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 30px 60px;
  position: relative;
}
.man-sec {
  padding-top: 22px;
  scroll-margin-top: 8px;
}
.man-sec:first-child { padding-top: 12px; }
.man-sec h3 {
  font-size: 17px;
  color: var(--text-0, var(--text-1));
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.man-sec h4 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  margin: 18px 0 6px;
}
.man-sec p {
  font-size: 13px;
  line-height: 1.62;
  color: var(--text-1);
  margin: 0 0 10px;
}
.man-sec ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.man-sec li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-1);
  margin: 4px 0;
}
.man-sec b { color: var(--text-0, var(--text-1)); font-weight: 600; }
.man-x {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.man-x:hover { filter: brightness(1.1); }

/* --- figures --- */
.man-fig {
  margin: 14px 0 18px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-align: center;
}
.man-fig-svg {
  width: 100%;
  max-width: 440px;
  height: auto;
}
.man-fig-svg.tall { max-width: 520px; }
.man-fig-cap {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin-top: 10px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
/* SVG figure primitives (theme-aware) */
.mf-gem { fill: var(--bg-3); stroke: var(--text-2); stroke-width: 1.5; }
.mf-hub { fill: var(--bg-1); stroke: var(--text-2); stroke-width: 1.5; }
.mf-strong { stroke: var(--accent); stroke-width: 2; }
.mf-dash { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.mf-ticks { stroke: var(--text-3); stroke-width: 2; }
.mf-lead { stroke: var(--text-3); stroke-width: 1; }
.mf-arm { stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; }
.mf-bar { fill: var(--bg-3); stroke: var(--border-soft); stroke-width: 1; }
.mf-bar2 { fill: var(--bg-2); stroke: var(--border-soft); stroke-width: 1; }
.mf-pill { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.mf-win { fill: var(--bg-1); stroke: var(--text-3); stroke-width: 1; }
.mf-win-hi { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.mf-t { fill: var(--text-2); font-size: 12px; font-family: var(--font-ui, sans-serif); text-anchor: middle; }
.mf-t.mf-mid { text-anchor: middle; }
.mf-t.mf-start { text-anchor: start; }
.mf-t.mf-end { text-anchor: end; }
.mf-t.mf-sub { font-size: 10.5px; fill: var(--text-3); }
.mf-t.mf-big { font-size: 18px; fill: var(--accent); font-weight: 700; }

/* --- keyboard table --- */
.man-kbtable { margin: 12px 0 6px; }
.man-kbgrp {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin: 14px 0 4px;
}
.man-kbrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--text-1);
  border-bottom: 1px solid var(--border-soft);
}
.man-kbrow .kbd {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  background: var(--bg-3);
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* --- glossary --- */
.man-gloss { margin: 6px 0 0; }
.man-gloss dt {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 12px;
}
.man-gloss dd {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-1);
}
.man-foot-note {
  flex: 1;
  font-size: 11px;
  color: var(--text-3);
  align-self: center;
}

/* --- manual screenshot slots --- */
.man-shot {
  margin: 14px 0 18px;
  text-align: center;
}
.man-shot-img {
  display: block;
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1, 0 1px 4px rgba(0,0,0,0.15));
}
.man-shot.empty .man-shot-img { display: none; }
.man-shot-ph {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 34px 16px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-2);
}
.man-shot.empty .man-shot-ph { display: flex; }
.man-shot-ph-ic { font-size: 26px; opacity: 0.7; }
.man-shot-ph-t {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.man-shot-ph-f { font-size: 11.5px; color: var(--text-3); }
.man-shot-ph-f b { font-family: var(--font-mono); color: var(--text-2); font-weight: 600; }
.man-shot figcaption {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin-top: 8px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}