/* ============================================================
   TWEAKS PANEL — visual styles
   ============================================================ */
#tweaks-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  max-height: calc(100vh - 40px);
  background: rgba(11,11,15,0.96);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--bone);
  font-family: var(--body);
  z-index: 200;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 8px 16px -8px rgba(0,0,0,0.5);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(.2,.6,.2,1);
  display: flex;
  flex-direction: column;
}
#tweaks-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#tweaks-panel .tw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
#tweaks-panel .tw-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
}
#tweaks-panel .tw-close {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 4px;
  color: rgba(244,241,234,0.6);
  font-size: 18px;
  line-height: 1;
}
#tweaks-panel .tw-close:hover { background: rgba(255,255,255,0.06); color: var(--bone); }

#tweaks-panel .tw-body {
  padding: 14px 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#tweaks-panel .tw-section { display: flex; flex-direction: column; gap: 8px; }
#tweaks-panel .tw-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.55);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#tweaks-panel .tw-label em {
  font-style: normal;
  color: var(--bone);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: none;
}

/* swatches */
#tweaks-panel .tw-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
#tweaks-panel .tw-swatches button {
  position: relative;
  border-radius: 6px;
  padding: 6px 4px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
  display: flex;
  gap: 2px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
#tweaks-panel .tw-swatches button:hover { background: rgba(255,255,255,0.08); }
#tweaks-panel .tw-swatches button.is-on { border-color: var(--gold); background: rgba(184,150,90,0.12); }
#tweaks-panel .tw-swatches button > span {
  flex: 1;
  height: 24px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.08);
}
#tweaks-panel .tw-swatches button em {
  position: absolute;
  bottom: 3px; left: 0; right: 0;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(244,241,234,0.7);
}

/* dots */
#tweaks-panel .tw-dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#tweaks-panel .tw-dots button {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease;
}
#tweaks-panel .tw-dots button:hover { transform: scale(1.1); }
#tweaks-panel .tw-dots button.is-on { border-color: var(--bone); }

/* segmented */
#tweaks-panel .tw-seg {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 2px;
}
#tweaks-panel .tw-seg button {
  flex: 1;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(244,241,234,0.6);
  border-radius: 4px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
#tweaks-panel .tw-seg button:hover { color: var(--bone); }
#tweaks-panel .tw-seg button.is-on {
  background: var(--bone);
  color: var(--ink);
}

/* range */
#tweaks-panel input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 18px;
}
#tweaks-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}
#tweaks-panel input[type="range"]::-moz-range-track {
  height: 2px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}
#tweaks-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: -6px;
  cursor: pointer;
  border: 2px solid var(--ink);
}
#tweaks-panel input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid var(--ink);
}

/* toggles row */
#tweaks-panel .tw-row-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#tweaks-panel .tw-row-toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(244,241,234,0.85);
  cursor: pointer;
  padding: 7px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
  user-select: none;
}
#tweaks-panel .tw-row-toggles label:hover { background: rgba(255,255,255,0.07); }
#tweaks-panel .tw-row-toggles input { accent-color: var(--gold); margin: 0; }

#tweaks-panel .tw-reset {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: rgba(244,241,234,0.85);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
#tweaks-panel .tw-reset:hover {
  background: rgba(199,93,93,0.15);
  border-color: var(--red, #C75D5D);
  color: var(--bone);
}

@media (max-width: 480px) {
  #tweaks-panel { width: calc(100vw - 24px); right: 12px; bottom: 12px; }
}

/* ============================================================
   STICKY NAV — re-pin to top of viewport.
   The aurora-layering rule in styles.css line ~1552 set
   .nav to position: relative for z-index stacking, which
   accidentally broke the sticky behavior that styles.css
   line 107 (and .hero's 132px top padding) was designed for.
   This restores the fix without touching the aurora rules
   for .hero and .footer.
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* === Mobile hamburger nav (added 2026-06-01) === */
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--bone); transition: 0.25s; }
@media (max-width: 880px) {
  .nav { position: relative; }
  .nav-burger { display: inline-flex; }
  .nav-signup { display: none; } /* hide secondary CTA on mobile; primary "Review a contract" stays */
  .nav.nav-open .nav-links {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--panel); border-top: 1px solid var(--line);
    padding: 8px var(--pad-x) 20px; z-index: 60;
  }
  .nav.nav-open .nav-links a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--bone); }
}