/* ============================================================================
   exotic — css/kit/tweaks.css · THE tweaks panel (review chrome), once
   ----------------------------------------------------------------------------
   One implementation for every surface that mounts #tweaks — app pages,
   the letter, the widget showcase, brand pages. Previously four hand copies
   (four widths, four shadows, three class vocabularies — FX10, round-2
   audit). Requires css/tokens.css. Sits in the dev band of the z-ladder
   (1300; see lobby.css ladder comment) — above tips, below nothing real.
   ========================================================================== */
#tweaks{position:fixed;right:18px;bottom:18px;z-index:1300;width:236px;
  max-height:calc(100svh - 36px);overflow-y:auto;scrollbar-width:thin;
  background:var(--glass-1);backdrop-filter:var(--mat-regular);-webkit-backdrop-filter:var(--mat-regular);
  border:1px solid var(--hairline);border-radius:var(--rad-3);padding:6px;
  box-shadow:var(--elev-2);font-family:var(--font-num);color:var(--ink);
  /* enters like every other floating panel — fade + settle, never a pop (BL03/BL23) */
  opacity:0;transform:translateY(4px) scale(.985);visibility:hidden;pointer-events:none;
  transition:opacity var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out),visibility 0s linear var(--t-fast)}
#tweaks.on{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
#tweaks .tw-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 10px}
#tweaks .tw-head .t{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#tweaks .tw-close{border:0;background:none;color:var(--muted);font:inherit;font-size:18px;line-height:1;cursor:pointer;padding:0 2px;min-width:32px;min-height:32px}
#tweaks .tw-close:hover{color:var(--ink)}
#tweaks .tw-sec{padding:10px;border-top:1px solid var(--hairline)}
#tweaks .tw-label{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
#tweaks .tw-seg{display:flex;gap:4px;background:var(--surface-2);border-radius:9px;padding:3px}
#tweaks .tw-seg button{flex:1;border:0;background:none;cursor:pointer;padding:7px 0;border-radius:7px;
  font-family:inherit;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:6px;transition:background var(--t-fast),color var(--t-fast)}
#tweaks .tw-seg button .dot{width:11px;height:11px;border-radius:50%}
#tweaks .tw-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--crisp)}
#tweaks .tw-seg button:active{transform:scale(.96);transition-duration:var(--t-press)}
#tweaks input[type=range]{width:100%;accent-color:var(--g2)}
@media (prefers-reduced-motion:reduce){
  #tweaks{transition:opacity .15s linear,visibility 0s linear .15s;transform:none}
}