:root {
  --bg: #17161a;
  --panel: #201f24;
  --panel-alt: #29282e;
  --line: #38363e;
  --text: #eae7e1;
  --text-dim: #a29d97;
  --ember: #2f6fdb;
  --ember-dim: #1d355c;
  --accent-text: #6fa3ff;
  --viewport-bg: #0f0e11;
  --overlay-bg: rgba(15, 14, 17, 0.6);
  --backdrop: rgba(0, 0, 0, 0.6);
  --on-ember: #ffffff;
  --ember-hover: #3d7ff0;
  --ok: #51cf66;
  --warn: #ffa94d;
  --error: #ff6b6b;
  --error-soft: #ff8a65;
  --logo-opacity: 0.07;
  --logo-filter: none;
  color-scheme: dark;
  --mono: 'DM Mono', ui-monospace, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Light look (the light-bulb button; see js/pageTheme.js): warm light
   greys with the same blue accent, a little deeper so it reads on white.
   (The accent tokens are still named --ember from when it was orange.) */
:root[data-theme="light"] {
  --bg: #ece8e2;
  --panel: #faf8f5;
  --panel-alt: #f1ede7;
  --line: #d9d3ca;
  --text: #24211e;
  --text-dim: #6b645d;
  --ember: #1f5fcc;
  --ember-dim: #d4e2f8;
  --accent-text: #1a56bd;
  --viewport-bg: #e3dfd8;
  --overlay-bg: rgba(250, 248, 245, 0.8);
  --backdrop: rgba(40, 32, 25, 0.35);
  --on-ember: #ffffff;
  --ember-hover: #1a52b3;
  --ok: #2b8a3e;
  --warn: #b85c06;
  --error: #c92a2a;
  --error-soft: #c2410c;
  --logo-opacity: 0.09;
  --logo-filter: grayscale(1) brightness(0.25);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
}

/* Header on top, workspace filling whatever height is left. 100dvh (not
   100vh or a fixed pixel offset) is the height that's actually visible on
   iPhone Safari, whose toolbars grow and shrink as you scroll; the plain
   100% line is the fallback for older browsers that don't know dvh. */
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
}

button { font-family: inherit; }

.topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: baseline; gap: 8px; }
/* The printer mark from the Cobb3D logo (assets/cobb3d-mark.png, white on
   transparent), used as a mask so it takes the accent color in both looks. */
.brand-mark {
  align-self: center; flex: none; width: 24px; height: 24px;
  background: var(--accent-text);
  -webkit-mask: url('assets/cobb3d-mark.png') center / contain no-repeat;
  mask: url('assets/cobb3d-mark.png') center / contain no-repeat;
}
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: 0.2px; }
.brand-sub { color: var(--text-dim); font-size: 12px; }
/* "Beta" as a small tag after the name. */
.brand-badge {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  border: 1px solid var(--ember); border-radius: 999px;
  color: var(--accent-text); font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  vertical-align: middle; white-space: nowrap;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.format-toggle { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.format-toggle .fmt {
  background: var(--panel-alt); color: var(--text-dim); padding: 6px 12px; display: inline-block;
  border: none; font-family: inherit; font-size: 13px; cursor: pointer;
}
.format-toggle .fmt.active { background: var(--ember-dim); color: var(--text); }
.format-toggle .fmt:hover:not(.active) { color: var(--text); }

.btn {
  border: 1px solid var(--line);
  background: var(--panel-alt);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.btn:hover { border-color: var(--ember); }
.btn.primary { background: var(--ember); border-color: var(--ember); color: var(--on-ember); font-weight: 700; }
.btn.primary:hover { background: var(--ember-hover); border-color: var(--ember-hover); }
.btn.ghost { background: transparent; }

.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidebar {
  width: 360px;
  min-width: 280px;
  max-width: 520px;
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  resize: horizontal;
  padding-bottom: 20px;
}

.panel { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel h2 { margin: 0 0 10px; font-size: 12px; text-transform: none; color: var(--text); font-weight: 700; }
.panel-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.panel-header h2 { margin: 0; }
.count { color: var(--accent-text); font-family: var(--mono); font-size: 12px; }

.hint { color: var(--text-dim); font-size: 11.5px; line-height: 1.5; margin: 8px 0 0; }
.hint.warning { color: var(--accent-text); }

.quick-insert {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 10px;
  /* Fixed to exactly 4 rows (4 * 32px buttons + 3 * 4px row gaps = 140px,
     plus a couple px of buffer) regardless of how many symbols/emoji are
     in the list — scroll for the rest rather than growing the sidebar
     taller as more get added. */
  max-height: 144px;
  overflow-y: auto;
  padding-right: 2px;
}
.quick-insert::-webkit-scrollbar { width: 6px; }
.quick-insert::-webkit-scrollbar-track { background: transparent; }
.quick-insert::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.quick-insert::-webkit-scrollbar-thumb:hover { background: var(--ember-dim); }
.quick-insert button {
  height: 32px;
  background: var(--panel-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-insert button:hover { border-color: var(--ember); background: var(--ember-dim); }

input[type="text"], input[type="email"], select {
  width: 100%;
  background: var(--panel-alt);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}
select { appearance: none; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.row label { color: var(--text-dim); flex-shrink: 0; }
.row select { width: auto; flex: 1; }

.slider-row { display: grid; grid-template-columns: 108px 1fr 56px; align-items: center; gap: 8px; margin-bottom: 8px; }
.slider-row label { color: var(--text-dim); font-size: 12px; }
.slider-row output { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); text-align: right; }

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--ember);
  cursor: pointer;
  margin-top: -5px;
}
input[type="range"]:disabled::-webkit-slider-thumb { background: var(--text-dim); }

input[type="color"] {
  width: 44px; height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  padding: 2px;
  cursor: pointer;
}

.checkbox { display: flex; align-items: center; gap: 8px; color: var(--text-dim); cursor: pointer; margin-top: 10px; }
.checkbox input { accent-color: var(--ember); }

.cap-list { display: flex; flex-direction: column; gap: 10px; }
.same-cap-colors { gap: 8px; margin: 8px 0 10px; }
.same-cap-colors[hidden] { display: none; }
.same-cap-colors input[type="color"] { margin-right: 10px; }
.cap-row {
  background: var(--panel-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap-row .line1, .cap-row .line2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cap-row input[type="text"] { width: 44px; text-align: center; padding: 6px; }
.cap-row select { width: auto; padding: 6px 8px; font-size: 12px; }
.style-toggle { display: flex; gap: 3px; }
.style-toggle button {
  width: 24px; height: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.style-toggle button.on { background: var(--ember-dim); color: var(--text); border-color: var(--ember); }
.style-toggle button:nth-child(2) { font-style: italic; }
.style-toggle button:nth-child(3) { text-decoration: underline; }
.cap-row .swatches { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cap-row .swatches span { color: var(--text-dim); font-size: 11px; }
.delete-cap {
  margin-left: auto;
  background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 15px; padding: 2px 6px;
}
.delete-cap:hover { color: var(--accent-text); }

.add-cap-btn {
  width: 100%;
  padding: 8px;
  background: var(--panel-alt);
  border: 1px dashed var(--line);
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
}
.add-cap-btn:hover { border-color: var(--ember); color: var(--text); }

.sidebar-footer { text-align: center; color: var(--text-dim); font-size: 11px; padding: 14px 0 4px; }

.viewport { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: var(--viewport-bg); }
.viewport-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.viewport-toolbar #explodeSlider, .viewport-toolbar #sectionSlider { width: 140px; }
/* Exploded View with Show KeySwitch directly underneath it. */
.toggle-stack { display: flex; flex-direction: column; gap: 4px; }
.bed-picker { min-width: 210px; }
.bed-picker .bed-label { color: var(--text-dim); font-size: 12px; }
.bed-picker select { padding: 4px 8px; font-size: 12px; }
.bed-fit { font-size: 11px; color: var(--text-dim); min-height: 1em; }
.bed-fit.ok { color: var(--ok); }
.bed-fit.warn { color: var(--warn); }
.checkbox:has(input:disabled) { opacity: 0.45; }
#canvasHost { flex: 1; min-height: 0; position: relative; }
#canvasHost canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
/* The Cobb3D logo, faintly, behind the 3D view. The 3D canvas is
   transparent (scene.js), so the logo shows through it and stays centred
   and still while the model is orbited, panned, and zoomed. */
#canvasHost::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/cobb3d-logo.png') center / min(60%, 700px) auto no-repeat;
  opacity: var(--logo-opacity);
  filter: var(--logo-filter);
  pointer-events: none;
}
.viewport-hint {
  z-index: 2;
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  color: var(--text-dim); font-size: 11px; margin: 0; pointer-events: none;
  white-space: nowrap;
}
/* Mouse instructions by default, touch instructions on touch screens. */
.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}

/* Bottom-left, not bottom-center like .viewport-hint above (also
   overlaid on the canvas, at the same bottom edge) — avoids the two
   colliding, since the hint text is centered and this needs room to grow
   a little wider as the represented length changes (e.g. "5 mm" vs
   "100 mm"). pointer-events: none so it never blocks orbit/pan/zoom
   dragging on the canvas underneath it. */
.scale-bar {
  z-index: 2;
  position: absolute; bottom: 12px; left: 12px;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: var(--overlay-bg);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  pointer-events: none;
  user-select: none;
}
.scale-bar-line {
  height: 7px;
  border-left: 1.5px solid var(--text);
  border-right: 1.5px solid var(--text);
  border-bottom: 1.5px solid var(--text);
  box-sizing: border-box;
}

/* ---- Phones and small tablets ------------------------------------------
   Below this width there's no room for the sidebar beside the 3D view
   (the sidebar alone is at least 280px), so the two stack instead: the
   3D model on top, taking a bit under half the screen so it stays in view,
   with the controls scrolling underneath it. */
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .topbar-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  .topbar-actions .btn { white-space: nowrap; }
  .format-toggle .fmt { padding: 7px 10px; }

  .layout { flex-direction: column; }
  .viewport { order: -1; flex: 0 0 50%; }
  .sidebar {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1;
    resize: none;
    border-right: none;
    border-top: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
  }

  .viewport-toolbar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .viewport-toolbar #explodeSlider, .viewport-toolbar #sectionSlider { width: auto; flex: 1; min-width: 80px; }

  /* Instructions move to the top edge so they don't collide with the
     scale bar in the bottom-left corner of a narrow screen. */
  .viewport-hint { top: 8px; bottom: auto; font-size: 10.5px; }

  /* 16px is the smallest text size iPhone Safari will focus without
     zooming the whole page in, which otherwise happens every time you tap
     the text box or a dropdown. */
  input[type="text"], select, .cap-row select { font-size: 16px; }

  /* Bigger touch targets. */
  .quick-insert button { height: 38px; font-size: 18px; }
  .quick-insert { max-height: 168px; }
  input[type="range"] { height: 4px; }
  input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
  .style-toggle button { width: 32px; height: 32px; font-size: 14px; }
  .delete-cap { font-size: 20px; padding: 4px 10px; }
  .slider-row { grid-template-columns: 96px 1fr 52px; }
}

/* ---- Report a Bug dialog ---- */
.bug-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel, #1b1a1f);
  color: var(--text);
}
.bug-dialog::backdrop { background: var(--backdrop); }
.bug-form { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.bug-form h2 { margin: 0 0 4px; font-size: 16px; }
.bug-form textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px; font: inherit;
}
.bug-form details { color: var(--text-dim); }
.bug-form pre {
  max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px;
  font-family: var(--mono); font-size: 11px;
}
.bug-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 820px) { .bug-form textarea { font-size: 16px; } }
.bug-form input[type="text"], .bug-form input[type="email"] { width: 100%; }
.order-note { margin: 0; font-size: 13px; color: var(--text-dim); min-height: 1em; }
.order-note.ok { color: var(--ok); }
.order-note.error { color: var(--error); }
#printOrderBtn[hidden] { display: none; }
/* Bot trap: kept out of sight (but not display:none, which some bots skip) */
.order-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- What's new pop-up (reuses the bug dialog's look) ---- */
.whats-new-dialog { width: min(440px, calc(100vw - 32px)); }
.whats-new-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.4; }
.whats-new-dialog .hint { margin: -4px 0 0; }
.sidebar-footer a { color: var(--text-dim); }
.sidebar-footer a:hover { color: var(--text); }

/* ---- Mode: letter caps or logo clicker ---- */
.mode-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mode-toggle button {
  flex: 1; padding: 8px 10px; background: transparent; color: var(--text-dim);
  border: 0; font: inherit; cursor: pointer;
}
.mode-toggle button + button { border-left: 1px solid var(--line); }
.mode-toggle button.active { background: var(--ember); color: var(--on-ember); font-weight: 600; }
body.mode-logo .letters-only { display: none !important; }
body:not(.mode-logo) .logo-only { display: none !important; }
.logo-import { width: 100%; margin-bottom: 4px; }
#logoStatus.ok { color: var(--text); }
#logoStatus.error { color: var(--error-soft); }
@media (max-width: 820px) { .mode-toggle button { padding: 10px; } }

/* Maker tools (?maker) */
#makerPanel[hidden] { display: none; }
.maker-range { justify-content: flex-start; gap: 6px; color: var(--text-dim); }
.maker-range input[type="number"] { width: 52px; background: var(--panel-alt); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 4px 6px; }
#makerPlateBtn { width: 100%; margin: 4px 0 6px; }
.maker-hide { font-size: 12px; color: var(--text-dim); }
.maker-sub { font-size: 13px; margin: 14px 0 6px; color: var(--text); }
#makerLetters { flex: 1; min-width: 0; background: var(--panel-alt); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 4px 6px; font-family: inherit; letter-spacing: 1px; }
#makerCapsBtn { width: 100%; margin: 4px 0 6px; }
#makerBaseShape { flex: 1; min-width: 0; }

/* Fold-away sidebar sections (collapsible.js) */
.panel-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.panel-toggle:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }
.panel-sign { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--line); color: var(--text-dim); font-size: 14px; line-height: 1; flex: none; }
.panel-toggle:hover .panel-sign { color: var(--text); border-color: var(--text-dim); }
.panel-header h2 { flex: 1; }
.panel-header { gap: 8px; align-items: center; }
.panel.collapsed > :not(:first-child) { display: none !important; }
.panel.collapsed > h2, .panel.collapsed > .panel-header { margin-bottom: 0; }
.panel.collapsed { padding-top: 12px; padding-bottom: 12px; }
.panel-title { margin-right: auto; }

/* "More settings" inside a panel */
.adv-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 10px; padding: 7px 0 2px; border-top: 1px dashed var(--line); cursor: pointer; font-size: 12px; color: var(--text-dim); }
.adv-toggle:hover { color: var(--text); }
.adv-toggle:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }
.advanced[hidden] { display: none !important; }
.advanced { margin-top: 8px; }

/* Light / dark switch: bottom right of the 3D view (js/pageTheme.js). The
   bulb is lit in the light look. */
.page-theme-btn {
  position: absolute; right: 12px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--overlay-bg); color: var(--text-dim);
  cursor: pointer;
}
.page-theme-btn:hover { color: var(--text); border-color: var(--ember); }
.page-theme-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.page-theme-btn svg { overflow: visible; }
.page-theme-btn .bulb-glass { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.page-theme-btn .bulb-base, .page-theme-btn .bulb-rays { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.page-theme-btn .bulb-rays { opacity: 0; }
.page-theme-btn[aria-pressed="true"] { color: var(--accent-text); }
.page-theme-btn[aria-pressed="true"] .bulb-glass { fill: #ffd43b; stroke: #c98a00; }
.page-theme-btn[aria-pressed="true"] .bulb-rays { opacity: 1; stroke: #e0a100; }

/* Filament palette (js/filaments.js): opens when a colour box is clicked.
   Brand menu on top, that brand's colours by product line (scrolls), the
   hovered colour's name and Custom color at the bottom. */
.filament-popover {
  position: fixed; z-index: 50;
  width: min(320px, calc(100vw - 16px));
  display: flex; flex-direction: column;
  max-height: min(460px, calc(100vh - 16px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  padding: 10px;
}
.filament-popover[hidden] { display: none; }
.filament-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--text-dim); }
.filament-head select { flex: 1; min-width: 0; }
.filament-body { overflow-y: auto; min-height: 0; flex: 1; padding: 2px 3px 4px 2px; overscroll-behavior: contain; }
.filament-line {
  position: sticky; top: -2px; z-index: 1;
  background: var(--panel);
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: var(--text-dim);
  padding: 6px 0 5px;
}
.filament-line:first-child { padding-top: 0; }
.filament-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: 6px;
  margin-bottom: 6px;
}
.filament-swatch {
  aspect-ratio: 1; width: 100%; min-width: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.filament-swatch:hover { transform: scale(1.08); }
.filament-swatch:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.filament-swatch.selected { outline: 2px solid var(--ember); outline-offset: 2px; }
.filament-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px;
}
.filament-names { display: flex; flex-direction: column; min-width: 0; }
.filament-name { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filament-line-name { color: var(--text-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filament-custom {
  flex: none; background: var(--panel-alt); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
  font-size: 12px; cursor: pointer;
}
.filament-custom:hover { border-color: var(--ember); }

/* Drag-to-reorder side menu (js/panelOrder.js): a grip left of each title. */
.panel h2.has-grip { display: flex; align-items: center; gap: 6px; }
.panel-grip {
  all: unset; box-sizing: border-box; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 24px; margin-left: -6px; border-radius: 4px;
  color: var(--text-dim); opacity: 0.55; cursor: grab;
  touch-action: none; /* a finger drag moves the section, not the page */
}
.panel:hover .panel-grip, .panel-grip:focus-visible { opacity: 1; }
.panel-grip:hover { color: var(--text); background: var(--panel-alt); }
.panel-grip:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.sidebar.reordering { overflow-anchor: none; }
.sidebar.reordering, .sidebar.reordering * { cursor: grabbing !important; user-select: none; }
.panel.dragging {
  position: relative; z-index: 1;
  background: var(--panel-alt);
  outline: 2px solid var(--ember); outline-offset: -2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.panel.dragging .panel-grip { opacity: 1; color: var(--accent-text); }

/* Design codes (js/designCode.js): the code in the "Copy design code"
   dialog, and the box for opening one. */
.bug-form textarea.design-code { font-family: var(--mono); font-size: 13px; word-break: break-all; resize: none; }
.design-code-meta { margin: 0; }
@media (max-width: 820px) { .bug-form textarea.design-code { font-size: 16px; } }

/* Mode-specific bits (js/channel.js). */
.channel-note {
  margin: 12px 14px 4px; padding: 10px 12px;
  border: 1px solid var(--ember); border-radius: 8px;
  background: var(--panel-alt); color: var(--text);
  font-size: 12.5px; line-height: 1.45;
}
.channel-note[hidden] { display: none; }
.design-code-load { border-top: 1px solid var(--line); padding-top: 10px; }
.design-code-load summary { cursor: pointer; font-size: 13px; color: var(--accent-text); }
.design-code-load[open] summary { margin-bottom: 8px; }
.design-code-load .bug-actions { margin-top: 6px; }
.design-code-load textarea { width: 100%; box-sizing: border-box; }