:root {
  /* customize-specific tokens */
  --mid:       #0A0C0E;
  --line:      #282525;  /* intentionally darker than --accent */
  --accent-glow: rgba(122,106,69,0.15);
  --accent-dim:  rgba(122,106,69,0.07);
  --blured-bg: rgba(20,20,20,0.68);

  /* layout */
  --header-h:  64px;
  --footer-h:  96px;
  --panel-w:   420px;

  /* font overrides for this page */
  --f-head:  'HDSmallFont';
  --f-mono:  'HDSmallFontMini';
  --f-body:  'HDSmallFontSmall';

  /* ─────────────────────────────────────────────────────
     FONT SIZE SCALES
     Change just these two values to resize all mono or
     body/head text everywhere at once.
  ───────────────────────────────────────────────────── */
  --fs-mono: 18px;
  --fs-body: 20px;

  --ease: cubic-bezier(0.16,1,0.3,1);
  --r: 2px;
}

/* ═══════════════════════════════════════════════════════
   PAGE OVERRIDES
═══════════════════════════════════════════════════════ */
html { height:100%; }
body {
  height:100%; font-size:var(--fs-body);
  overflow:hidden; overscroll-behavior:none;
  cursor:crosshair;
}

/* Disable hover effects on touch devices, but keep them active for mouse users (e.g. touchscreen laptops) */
@media (hover: none) and (pointer: coarse) {
  body { cursor: auto; }
  #cursor { display: none !important; }

  .nav-back:hover {
    color: var(--main-text);
    border-color: var(--line);
  }

  .nav-next:hover {
    color: var(--accent);
  }

  .nav-next:hover::before {
    transform: translateX(-102%);
  }

  /* Prevent the tap on .wireframe-toggle-btn from leaving a "stuck" hover
     highlight after the button is toggled back off — only .active should
     indicate state on touch devices. :not(.active) raises specificity above
     the base :hover rule below so this reset wins the cascade tie. */
  .wireframe-toggle-btn:hover:not(.active) {
    color: var(--muted);
    border-color: var(--line);
  }
}

/* ═══════════════════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════════════════ */
#app {
  position:fixed;
  top:var(--header-h); left:0; right:0; bottom:var(--footer-h);
  display:flex; z-index:1;
  border-top: 2px solid var(--line);
}

/* ═══════════════════════════════════════════════════════
   CANVAS STAGE
═══════════════════════════════════════════════════════ */
#canvas-wrap { flex:1; position:relative; overflow:hidden; min-width:0; }
#three-canvas { display:block; width:100%; height:100%; }

.corner {
  position:absolute; width:20px; height:20px;
  z-index:5; pointer-events:none;
  border-color:var(--accent); border-style:solid; opacity:0.5;
}
.corner--tl { top:16px; left:16px; border-width:1.5px 0 0 1.5px; }
.corner--tr { top:16px; right:16px; border-width:1.5px 1.5px 0 0; }
.corner--bl { bottom:16px; left:16px; border-width:0 0 1.5px 1.5px; }
.corner--br { bottom:16px; right:16px; border-width:0 1.5px 1.5px 0; }

#canvas-tap-overlay { display:none; }

/* HUD */
#canvas-hud { position:absolute; inset:0; pointer-events:none; z-index:4; }

.hud-block {
  position:absolute;
  background:var(--blured-bg);
  border:1px solid var(--line);
  backdrop-filter:blur(4px);
  padding:10px 14px;
}

.hud-block--tl { top:16px; left:16px; }

.hud-block--br { bottom:16px; right:16px; }

.hud-block--tr {
  top: 16px;
  right: 16px;
  pointer-events: auto;
  display: none;
}

.hud-save-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--main-text);
  font-family: var(--f-mono);
  font-size: clamp(10px, 1.1vw, var(--fs-mono));
  letter-spacing: 0.07em;
}

.hud-save-btn__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.hud-val--price {
  font-family: var(--f-mono);
  font-size: clamp(calc(var(--fs-mono) * 1.1), 1.4vw, calc(var(--fs-mono) * 1.3));
  color: var(--amber);
  letter-spacing: 0.04em;
}

.hud-row { display:flex; align-items:bottom; gap:8px; margin-bottom:4px; }
.hud-row:last-child { margin-bottom:0; }

.hud-key {
  font-family:var(--f-mono);
  font-size:clamp(calc(var(--fs-mono) * 0.9), 1.2vw, calc(var(--fs-mono) * 1.07));
  color:var(--accent); letter-spacing:0.05em; white-space:nowrap;
}

.hud-val {
  font-family:var(--f-mono);
  font-size:clamp(calc(var(--fs-mono) * 0.9), 1vw, calc(var(--fs-mono) * 0.86));
  color:var(--main-text); letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap;
}

#hud-model {
  font-family:'HDLargeFont', var(--f-mono);
  /* HDLargeFont has a shorter cap-height than --f-mono at the same
     font-size, so it needs to run larger to visually match .hud-key. */
  font-size: clamp(calc(var(--fs-mono) * 1.1), 1.2vw, calc(var(--fs-mono) * 1.15));
  letter-spacing: normal;
}

/* stat bars */
.stat-row { margin-bottom:9px; }
.stat-row:last-child { margin-bottom:0; }
.stat-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }

.stat-name {
  font-family:var(--f-mono);
  font-size:clamp(calc(var(--fs-mono) * 0.72), 1vw, calc(var(--fs-mono) * 0.86));
  color:var(--main-text); letter-spacing:0.18em; text-transform:uppercase;
}
.stat-num {
  font-family:var(--f-mono);
  font-size:clamp(calc(var(--fs-mono) * 0.79), 1vw, calc(var(--fs-mono) * 0.93));
  color:var(--amber); letter-spacing:0.08em;
}
.stat-track { height:2px; background:var(--main-bg); overflow:hidden; }
.stat-fill  { height:100%; background:linear-gradient(90deg,var(--accent),var(--amber)); transition:width .6s var(--ease); }

/* Loader */
#canvas-loader {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:var(--bg); z-index:10; transition:opacity .6s;
}
#canvas-loader.hidden { opacity:0; pointer-events:none; }
.loader-ring {
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line); border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.loader-label {
  font-family:var(--f-mono);
  font-size:clamp(calc(var(--fs-mono) * 0.86), 1vw, var(--fs-mono));
  letter-spacing:0.25em; color:var(--main-text); text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════
   DESKTOP PANEL (right sidebar)
═══════════════════════════════════════════════════════ */
#panel-container {
  width:var(--panel-w); flex-shrink:0;
  position:relative; overflow:hidden;
  border-left:2px solid var(--line);
  display:flex; flex-direction:column;
  background:var(--main-bg);
}

.ctrl-panel {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--main-bg);
  transform:translateX(105%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.38s ease;
  opacity:0;
}
.ctrl-panel.enter-right { transform: translateX(48px);  opacity: 0; }
.ctrl-panel.enter-left  { transform: translateX(-48px); opacity: 0; }

.ctrl-panel.active   { transform:translateX(0);   opacity:1; }

.ctrl-panel.exiting.exit-left  { transform: translateX(-48px); opacity: 0; }
.ctrl-panel.exiting.exit-right { transform: translateX(48px);  opacity: 0; }

/* panel header */
.panel-hdr {
  flex-shrink:0; padding:20px 24px 16px;
  border-bottom:2px solid var(--line);
  position:relative; overflow:hidden;
}
.panel-hdr::after {
  content:''; position:absolute; bottom:0; left:0;
  width:100%; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

.panel-title {
  font-family:var(--f-head);
  font-size:clamp(calc(var(--fs-body) * 1.07), 2.5vw, calc(var(--fs-body) * 1.57));
  font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text);
  line-height:1;
}
/* "The <Brand>" titles (formatTitle) — the surrounding text and the space stay
   in the regular font, so only the brand word switches to HDLargeFont */
.title-the {
  font-family: var(--f-head);
  font-weight: 300;
}

.title-main {
  font-family: 'HDLargeFont';
  /* HDLargeFont caps are 0.549em tall vs Inter's 0.728em — 1.33em matches them */
  font-size: 1.33em;
  /* keep the larger font from growing the line box (same trick as <sup>), so the
     title → desc gap matches every other section */
  line-height: 0;
  font-weight: 100;
}

.panel-desc {
  font-family:var(--f-body);
  font-size:clamp(calc(var(--fs-body) * 0.83), 1.2vw, var(--fs-body));
  font-weight:400; color:var(--main-text); margin-top:6px; letter-spacing:0.02em;
}
.desc-brand { 
  font-family:'HDLargeFont';
  text-transform:uppercase;
  display:inline-block;
  transform:scaleY(1.1);
  transform-origin:bottom;
}

/* scroll wrapper (hdr + body) — desktop: fixed hdr, body scrolls; mobile overrides below */
.panel-scroll {
  flex:1; min-height:0;
  display:flex; flex-direction:column;
}

/* panel body */
.panel-body {
  flex:1; overflow-y:auto; padding:16px 20px;
}
.panel-body,
.panel-scroll { scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.panel-body::-webkit-scrollbar,
.panel-scroll::-webkit-scrollbar { width:2px; }
.panel-body::-webkit-scrollbar-thumb,
.panel-scroll::-webkit-scrollbar-thumb { background:var(--accent); }

/* nav buttons */
.panel-nav {
  flex-shrink:0; display:flex; justify-content:space-between; align-items:center;
  padding:13px 20px;
  background: var(--main-bg);
}
.nav-back {
  font-family:var(--f-mono);
  font-size:clamp(calc(var(--fs-mono) * 0.79), 1vw, var(--fs-mono));
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--main-text); padding:10px 18px; border:2px solid var(--line); border-radius:var(--r);
  display:flex; align-items:center; gap:8px; transition:all .2s;
}
.nav-back:hover { color:var(--text); border-color:var(--accent); }
.nav-back[disabled] { opacity:0.25; pointer-events:none; }
.nav-next {
  font-family: var(--f-mono);
  font-size: clamp(calc(var(--fs-mono) * 0.79), 1vw, var(--fs-mono));
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--main-text);
  background: var(--mid);
  padding: 10px 22px;
  border-radius: var(--r);
  border: 2px solid var(--accent);
  display: flex; align-items: center; gap: 8px;
  transition: all .2s;
  position: relative; overflow: hidden;
}

.nav-next::before {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  transform: translateX(-102%);
  transition: transform .28s ease;
}

.nav-next:hover::before { transform:translateX(0); }
.nav-next:hover { color: var(--bg); }

.nav-no-hover { 
  pointer-events: none;
}

.nav-next > * { position:relative; z-index:1; }

/* ═══════════════════════════════════════════════════════
   OPTION COMPONENTS
═══════════════════════════════════════════════════════ */

.opt-grid { display:grid; gap:8px; }
.opt-grid--2 { grid-template-columns:1fr 1fr; }
.opt-grid--1 { grid-template-columns:1fr; }

.opt-card {
  /* layout */
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  position:relative;

  /* reset button defaults */
  appearance:none; -webkit-appearance:none;
  text-align:left; font:inherit; cursor:pointer;

  /* visual */
  background:var(--mid);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r);
  -webkit-user-select:none; user-select:none;

  /* border transition only — transform + shadow handled by JS */
  transition:border-color 0.2s ease;
}

/* Selected — accent border + inset depth, nothing else */
.opt-card.selected {
  border-color:var(--accent);
}

.opt-card-icon {
  width:36px; height:36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--line); border-radius:var(--r); background:var(--bg);
  transition: border-color 0.2s ease;
}
.opt-card-icon svg { width:20px; height:20px; stroke:var(--main-text); }
.opt-card-icon img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.opt-card.selected .opt-card-icon { border-color:var(--accent); }
.opt-card.selected .opt-card-icon svg { stroke:var(--accent); }

.opt-card-info { flex:1; min-width:0; }

.opt-card-name {
  font-family:var(--f-head);
  font-size:clamp(calc(var(--fs-body) * 0.76), 1.2vw, calc(var(--fs-body) * 0.88));
  font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text);
}
.opt-card.selected .opt-card-name { color:var(--accent); }

.opt-card-sub {
  font-family:var(--f-mono);
  font-size:clamp(calc(var(--fs-mono) * 0.65), 1.2vw, calc(var(--fs-mono) * 0.75));
  color:var(--main-text); letter-spacing:0.01em; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Handedness cards ── */
.hand-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.hand-card {
  /* layout */
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:22px 16px;
  position:relative;

  /* reset button defaults */
  appearance:none; -webkit-appearance:none;
  text-align:left; font:inherit; cursor:pointer;

  /* visual */
  background:var(--main-bg);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r);
  -webkit-user-select:none; user-select:none;

  transition:border-color 0.2s ease;
}

/* Selected — accent border + inset depth, nothing else */
.hand-card.selected {
  border-color:var(--accent);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.6),
    inset 0 6px 16px rgba(0,0,0,0.3),
    inset 0 1px 3px rgba(0,0,0,0.5);
}

.hand-icon {
  width:56px; height:56px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.hand-icon svg { width:32px; height:32px; stroke:var(--main-text); }
.hand-card.selected .hand-icon { border-color:var(--accent); }
.hand-card.selected .hand-icon svg { stroke:var(--accent); }

.hand-name {
  font-family:var(--f-head);
  font-size:clamp(calc(var(--fs-body) * 0.72), 1.3vw, calc(var(--fs-body) * 0.82));
  font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text);
}
.hand-card.selected .hand-name { color:var(--accent); }

/* Keyboard focus */
.opt-card:focus-visible,
.hand-card:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Sliders */
.slider-block {
  background:var(--main-bg); border:2px solid var(--line);
  border-radius:var(--r); padding:14px 16px; margin-bottom:10px;
}
.slider-block:focus-within {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.slider-hdr { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }

.slider-name {
  font-family:var(--f-head);
  font-size:clamp(calc(var(--fs-body) * 0.82), 1.3vw, calc(var(--fs-body) * 0.94));
  font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text);
}
.slider-readout {
  font-family:var(--f-mono);
  font-size:clamp(calc(var(--fs-mono) * 1.35), 2vw, calc(var(--fs-mono) * 1.65));
  color:var(--accent); letter-spacing:0.06em;
}
.slider-readout small {
  font-size:clamp(calc(var(--fs-mono) * 0.79), 1vw, var(--fs-mono));
  color:var(--main-text);
}

input[type=range] {
  -webkit-appearance:none; width:100%; height:3px;
  background:linear-gradient(90deg, var(--accent) var(--pct,50%), var(--line) var(--pct,50%));
  outline:none; border-radius:2px; cursor:pointer;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg); cursor:pointer;
  box-shadow:0 0 8px rgba(122,106,69,0.5); transition:box-shadow .2s;
}

input[type=range]:active::-webkit-slider-thumb { box-shadow:0 0 16px rgba(122,106,69,0.8); }
input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg); cursor:pointer;
}

.range-ticks { display:flex; justify-content:space-between; margin-top:5px; }
.range-tick {
  font-family:var(--f-mono);
  font-size:clamp(calc(var(--fs-mono) * 0.72), 0.9vw, calc(var(--fs-mono) * 0.86));
  color:var(--main-text); letter-spacing:0.08em;
}

/* lie angle auto message */
.lie-auto-msg {
  padding: 0 0 16px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 300px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease, margin 0.6s ease, padding 0.6s ease;
}

.dynamics-section:has(.lie-toggle-btn.active) .lie-auto-msg {
  padding-bottom: 0;
}

.lie-auto-text {
  font-family: var(--f-body);
  font-size: clamp(calc(var(--fs-body) * 0.83), 1.2vw, var(--fs-body));
  font-weight: 400;
  color: var(--main-text);
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0;
}

.lie-auto-sub {
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.82);
  color: var(--muted);
  letter-spacing: 0.06em;
  margin: 0;
}

/* Grip / Cover card wrappers */
.grip-cards-wrap,
.cover-cards-wrap {
  max-height: 500px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease;
}

/* toggle row */
.lie-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  /* margin-bottom: 4px; */
}
.lie-toggle-label {
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.82);
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* toggle switch */
.lie-toggle-btn {
  background: none; border: none; padding: 0; cursor: pointer;
}
.lie-toggle-track {
  display: block; position: relative;
  width: 40px; height: 22px;
  background: var(--surface3);
  border: 2px solid var(--line);
  border-radius: 999px;
  transition: background 0.25s, border-color 0.25s;
}
.lie-toggle-thumb {
  position: absolute; top: 2px; left: 3px;
  width: 14px; height: 14px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform 0.25s, background 0.25s;
}
.lie-toggle-btn.active .lie-toggle-track {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.lie-toggle-btn.active .lie-toggle-thumb {
  transform: translateX(18px);
  background: var(--accent);
}

/* slider reveal */
.lie-slider-wrap {
  padding-top: 8px;
}

/* dynamics panel sections */
.dynamics-section + .dynamics-section {
  margin-top: 32px;
}

/* Swatches */
.swatch-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.swatch {
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:2px solid var(--line); transition:all .2s; position:relative;
  -webkit-user-select:none; user-select:none;
}
.swatch:hover { transform:scale(1.1); border-color:var(--main-text); }
.swatch.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow); }
.swatch.selected::after {
  content:'✓'; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:14px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.9);
}

/* ════════════════════════════════════════════════════════════
   OPT-CARD & HAND-CARD — dock-style raise effect
════════════════════════════════════════════════════════════ */

.opt-card,
.hand-card {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* No transform here — JS owns it entirely */
  box-shadow:
    0 1px 0 rgba(0,0,0,0.6),
    0 2px 6px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);

  /* Only transition box-shadow and border-color — transform is driven by rAF */
  transition:
    box-shadow   0.2s ease,
    border-color 0.2s ease;

  outline: none;
}

/* Keyboard focus */
.opt-card:focus-visible,
.hand-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Selected — inset depth + accent border, no transform */
.opt-card.selected,
.hand-card.selected {
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.6),
    inset 0 6px 16px rgba(0,0,0,0.3),
    inset 0 1px 3px rgba(0,0,0,0.5);
  border-color: var(--accent);
}

/* Nav buttons */
.nav-back,
.nav-next {
  transition:
    box-shadow   0.15s ease,
    transform    0.15s ease,
    color        0.2s,
    border-color 0.2s,
    background   0.2s;
}

.nav-back.pressing,
.nav-next.pressing {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.55),
    inset 0 5px 12px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════════════
   FOOTER — progress
═══════════════════════════════════════════════════════ */
#footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  background: var(--main-bg);
  border-top: 2px solid var(--line);
  backdrop-filter: blur(12px);
  z-index: 300;
  padding: 6px clamp(16px,3vw,32px) 8px;
  display: flex; flex-direction: column; gap: 4px;
}

.footer-top {
  display: flex; justify-content: space-between; align-items: center;
}

.footer-count {
  font-family: var(--f-mono);
  font-size: clamp(calc(var(--fs-mono) * 0.86), 1vw, var(--fs-mono));
  color: var(--main-text);
  /* letter-spacing: 0.1em; */
}

.footer-section {
  display: none;
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--main-text);
  opacity: 0.7;
  letter-spacing: 0.05em;
}

/* Wireframe toggle — sits at the right edge of .footer-top, opposite .footer-count */
.wireframe-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.wireframe-toggle-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.wireframe-toggle-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.wireframe-toggle-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.wireframe-toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* panel handle chevron — mobile only */
#panel-handle {display: none;}
#panel-inner-bar { display: none; }

.step-capsules {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
  /* track → label spacing, shared by single items and groups so tracks stay level */
  --capsule-label-gap: 9px;
}

.capsule-item {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--capsule-label-gap);
  flex: 1; cursor: pointer;
}

.capsule-track {
  width: 100%; height: 22px;
  position: relative; overflow: visible;
  transition: filter 0.3s;
}

.capsule-label {
  font-family: var(--f-mono);
  font-size: clamp(calc(var(--fs-mono) * 0.55), 1.3vw, calc(var(--fs-mono) * 0.85));
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--main-text); text-align: center;
  line-height: 1.3; white-space: normal;
  word-break: break-word; transition: color 0.3s;
}

.capsule-item.active .capsule-label { color: var(--accent); }
.capsule-item.done   .capsule-label { color: var(--accent); opacity: 0.5; }

/* Grouped capsule pair — two tracks side-by-side with a single centered label */
.capsule-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--capsule-label-gap);
}

.capsule-group-tracks {
  display: flex;
  gap: 3px;
  width: 100%;
}

/* Items inside a group have no bottom gap (label lives on the group, not the item) */
.capsule-group .capsule-item {
  flex: 1;
  gap: 0;
}

.capsule-group .capsule-label {
  color: var(--main-text);
  transition: color 0.3s;
}

.capsule-group.has-active .capsule-label { color: var(--accent); }
.capsule-group.all-done   .capsule-label { color: var(--accent); opacity: 0.5; }

@media (max-width: 600px) {
  .step-capsules { gap: 2px; }
  .capsule-group-tracks { gap: 2px; }
}

@media (max-width: 400px) {
  .capsule-track { height: 16px; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE — bottom drawer panel
═══════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  .hud-block--tr { display: block; }
}

@media(max-width:767px) {
  :root {
    --footer-h: 64px;
    --fs-mono: 13px;
    --fs-body: 16px;
    --panel-w: 0px;
  }

  #app { flex-direction:column; }
  #canvas-wrap { flex:1; width:100%; }

  #panel-container {
    position: fixed;
    bottom: var(--footer-h); left: 0; right: 0;
    width: 100%;
    height: 30vh;           /* explicit — .ctrl-panel children are absolute, so content can't size it */
    border-left: none; border-top: 2px solid var(--accent);
    transform: translateY(100%);
    transition: transform 0.42s var(--ease);
    z-index: 150;
    background: var(--main-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background: var(--blured-bg);
    backdrop-filter: blur(4px);
  }

  #panel-container.panel-open { transform:translateY(0); }

  #panel-handle {
    display: block;
    position: fixed;
    bottom: calc(var(--footer-h) + 5px);
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    z-index: 200;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    overflow: visible;
  }

  /* Enlarged invisible tap target for the 4px-tall bars */
  #panel-handle::after,
  #panel-inner-bar::after {
    content: '';
    position: absolute;
    top: -16px;
    left: -24px;
    right: -24px;
    bottom: -16px;
  }

  #panel-handle:hover { opacity: 1; }

  /* Hide external bar when panel is open */
  #panel-handle.open { display: none; }

  /* ── Inner bar at top of panel — shown when panel is open ── */
  /* ── Close bar — first child of .panel-hdr, so it scrolls away with it ── */
  #panel-inner-bar {
    display: block;
    position: relative;      /* anchors the ::after tap target */
    width: 40px;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    margin: 0 auto 10px;     /* with .panel-hdr's 8px top padding, title stays 22px from the top */
    cursor: pointer;
  }

  .ctrl-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;           /* lets flex children shrink and scroll properly */
    overflow: hidden;
    background: transparent;
  }

  .ctrl-panel.active  { transform:translateX(0); opacity:1; }
  .ctrl-panel.exiting { transform:translateX(-20px); opacity:0; }

  .panel-hdr {
    padding-top: 8px;        /* room for #panel-inner-bar */
    padding-bottom: 12px;
  }

  /* hdr + body scroll together; pulling down past the top closes the panel (see initSwipeHandle) */
  .panel-scroll {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .panel-body {
    overflow: visible;       /* .panel-scroll owns scrolling on mobile */
    padding-bottom: 8px;
  }

  .panel-nav {
    flex-shrink: 0;
    padding: 6px 20px 8px;
    background: transparent;
  }

  .nav-back,
  .nav-next {
    font-size: calc(var(--fs-mono) * 0.7);
    padding: 5px 12px;
    gap: 5px;
  }

  .nav-back svg,
  .nav-next svg { width: 10px; height: 10px; }

  .opt-card      { padding:10px 12px; gap:10px; }
  .opt-card-icon { width:30px; height:30px; }
  .opt-card-sub  { font-size: calc(var(--fs-mono) * 0.85); }
  .opt-card-icon svg { width:16px; height:16px; }

  .hand-card     { padding:12px 10px; gap:8px; }
  .hand-icon     { width:40px; height:40px; }
  .hand-icon svg { width:22px; height:22px; }

  .swatch        { width:38px; height:38px; }

  #mobile-panel-toggle { display:flex; }

  .footer-top {
    display: flex;
    justify-content: flex-start; /* instead of space-between */
    gap: 10px;
    align-items: center;
  }

  .footer-section {
    display: block;
  }

  .capsule-track { height: 18px; }
  .capsule-label { display: none; }   /* .footer-section names the current step instead */
}

/* hide mobile toggle on desktop */
#mobile-panel-toggle { display:none; }
.mobile-toggle-btn {
  font-family:var(--f-mono);
  font-size:clamp(calc(var(--fs-mono) * 0.79), 2.5vw, var(--fs-mono));
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--accent); border:2px solid var(--accent); padding:7px 14px;
  border-radius:var(--r); display:flex; align-items:center; gap:7px;
  transition:all .2s; white-space:nowrap;
}
.mobile-toggle-btn.active { background:var(--accent); color:var(--bg); }

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);} }
@keyframes blink  { 0%,100%{opacity:1;}50%{opacity:0;} }
.blink { animation:blink 1.2s step-end infinite; }

/* ═══════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: calc(var(--footer-h) + 14px);
  right: calc(var(--panel-w) + 16px);
  background-color: var(--mid);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.5rem;
  font-family: var(--f-body);
  font-size: 0.875rem;
  color: var(--text);
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
  max-width: 320px;
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--success {
  border-left: 3px solid #4A8C6A;
}

.toast--error {
  border-left: 3px solid var(--danger);
}

/* ═══════════════════════════════════════════════════════
   LIE INFO POPUP
═══════════════════════════════════════════════════════ */
.lie-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lie-popup-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.lie-popup {
  position: relative;
  width: min(880px, 88vw);   /* keeps growing until a ~1000px-wide viewport */
  max-height: 82vh;
  overflow-y: auto;
  background: var(--blured-bg);
  border: 1px solid var(--line);
  border-top-color: var(--accent);
  border-radius: var(--r);
  padding: 32px 28px 28px;
  transform: translateY(14px);
  transition: transform 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.lie-popup-overlay.active .lie-popup {
  transform: translateY(0);
}

/* Sizing chart popup — mostly just an image, so it can run noticeably
   wider/taller than the text-heavy popups reusing the same base .lie-popup. */
.sizing-chart-popup {
  width: min(900px, 86vw);
  max-height: 92vh;
}

.lie-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.lie-popup-close:hover { color: var(--text); border-color: var(--accent); }
.lie-popup-close svg { width: 12px; height: 12px; stroke: currentColor; }

.lie-popup-tag {
  font-family: var(--f-body);
  font-size: calc(var(--fs-body) * 0.8);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.lie-popup-title {
  font-family: var(--f-head);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 22px;
}

.lie-popup-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lie-popup-section {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.lie-popup-section-label {
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.68);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.lie-popup-section p {
  font-family: var(--f-body);
  font-size: calc(var(--fs-body) * 0.78);
  color: var(--main-text);
  line-height: 1.55;
  margin: 0;
  opacity: 0.85;
}

.lie-popup-callout {
  border: 1px solid rgba(122, 106, 69, 0.35);
  border-radius: var(--r);
  padding: 14px 16px;
  background: rgba(122, 106, 69, 0.07);
  margin-top: 6px;
}

.lie-popup-callout-label {
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.62);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.lie-popup-callout p {
  font-family: var(--f-body);
  font-size: calc(var(--fs-body) * 0.78);
  color: var(--main-text);
  line-height: 1.55;
  margin: 0;
  opacity: 0.85;
}

.lie-popup-intro {
  font-family: var(--f-body);
  font-size: calc(var(--fs-body) * 0.78);
  color: var(--main-text);
  line-height: 1.6;
  opacity: 0.85;
  margin: 0 0 4px;
  padding-bottom: 12px;
  /* border-bottom: 1px solid var(--line); */
}

/* ── Diagram ── */
.lie-popup-diagram {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lie-popup-diagram-label {
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.62);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.lpd-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Mobile sizing chart — near full-screen popup, chart bleeds edge to edge */
@media (max-width: 767px) {
  .sizing-chart-popup {
    --pad-x: 16px;
    width: 96vw;
    padding: 24px var(--pad-x) 0;
  }

  .sizing-chart-popup .lie-popup-tag   { font-size: calc(var(--fs-body) * 0.7); }
  .sizing-chart-popup .lie-popup-title { font-size: 1.1rem; margin-bottom: 12px; }

  .sizing-chart-popup .lpd-img {
    width: calc(100% + 2 * var(--pad-x));
    margin-inline: calc(-1 * var(--pad-x));
    border-radius: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   CONFIG JSON MODAL
═══════════════════════════════════════════════════════ */
.config-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.config-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.config-modal {
  width: min(520px, 100%);
  max-height: 82vh;
  background: var(--mid);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(14px);
  transition: transform 0.3s ease;
}

.config-modal-overlay.active .config-modal {
  transform: translateY(0);
}

.config-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.config-modal-tag {
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.62);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.config-modal-title {
  font-family: var(--f-head);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.config-modal-close {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s;
}

.config-modal-close:hover { color: var(--text); border-color: var(--accent); }
.config-modal-close svg  { width: 12px; height: 12px; stroke: currentColor; }

.config-modal-json {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  margin: 0;
  font-family: var(--f-mono);
  font-size: clamp(12px, 1.3vw, 14px);
  line-height: 1.8;
  color: var(--main-text);
  white-space: pre;
  user-select: text;
  background: rgba(255, 255, 255, 0.025);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.config-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  gap: 10px;
}

.config-modal-done-btn {
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.72);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 18px;
  transition: color 0.2s, border-color 0.2s;
}

.config-modal-done-btn:hover { color: var(--text); border-color: var(--accent); }

/* ── Warning popups (no-grip / no-cover) ─────────────────── */

.warn-popup {
  width: min(420px, 88vw);
}

.warn-popup-footer {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}

.warn-popup-dismiss {
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.72);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 18px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.warn-popup-dismiss:hover { color: var(--text); border-color: var(--accent); }

.warn-popup-footer--split {
  justify-content: space-between;
}

.warn-popup-signin-btn {
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.72);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: 8px 18px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.warn-popup-signin-btn:hover { opacity: 0.85; }

.config-modal-copy-btn {
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.72);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: 8px 18px;
  transition: background-color 0.2s;
}

.config-modal-copy-btn:hover {
  background: color-mix(in srgb, var(--accent) 75%, black 25%);
}

/* Info icon button — inline in panel-desc text (Dynamics steps) */
.lie-info-btn {
  display: inline-flex;
  position: relative;      /* anchors the enlarged tap target */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  vertical-align: middle;
  margin-left: 8px;
  transition: color 0.2s;
}

/* Invisible tap target around the 15px icon */
.lie-info-btn::after { content: ''; position: absolute; inset: -6px; }

/* "Sizing Chart" trigger — under the shaft length slider */
.sizing-chart-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: calc(var(--fs-mono) * 0.72);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}

/* Shared info icon — same look on both triggers */
.lie-info-btn:hover,
.sizing-chart-trigger:hover { color: var(--accent); }
.lie-info-btn svg,
.sizing-chart-trigger svg { width: 15px; height: 15px; stroke: currentColor; flex-shrink: 0; }