/* v2 INSTRUMENT — tweaks drawer (palette / density / wheel-style /
 * calibration / ticker). Shared between the shell pages and the chart
 * page so a visitor can re-tune Asteria without ever leaving the wheel.
 */
.tweaks{position:relative;}
.tweaks-trigger{display:inline-flex;align-items:center;cursor:pointer;
  list-style:none;
  border:0.5px solid var(--ink-quaternary);border-radius:var(--radius-md);
  padding:4px var(--space-2);
  color:var(--ink-tertiary);
  transition:color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);}
.tweaks-trigger::-webkit-details-marker{display:none;}
.tweaks-trigger::marker{content:"";}
.tweaks-trigger:hover{color:var(--accent-gold);
  border-color:var(--accent-gold);}
.tweaks[open] .tweaks-trigger{color:var(--accent-gold);
  border-color:var(--accent-gold);
  background:var(--accent-gold-soft);}
.tweaks-panel{position:absolute;top:calc(100% + var(--space-3));
  right:0;width:280px;max-width:calc(100vw - var(--space-6));
  background:var(--bg-elevated);
  border:0.5px solid var(--ink-quaternary);border-radius:6px;
  padding:var(--space-4);box-shadow:var(--shadow-md);z-index:80;}
.tweaks-eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--accent-gold);}
.tweaks-blurb{font-size:var(--text-xs);color:var(--ink-tertiary);
  line-height:var(--leading-loose);margin:var(--space-2) 0 0;
  max-width:none;}
.tweaks-section{padding-top:var(--space-4);}
.tweaks-section + .tweaks-section{
  border-top:0.5px solid var(--ink-quaternary);
  margin-top:var(--space-4);}
.tweaks-section-head{font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-secondary);margin-bottom:var(--space-2);
  display:flex;align-items:baseline;gap:var(--space-2);}
.tweaks-hint{font-size:9px;color:var(--ink-tertiary);
  letter-spacing:var(--track-wide);text-transform:none;font-style:italic;
  margin-left:auto;}
/* Layout density: a two-up segmented control instead of stacked radios,
 * so the choice reads as one control rather than two loose lines. */
.tweaks-segmented{display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--ink-quaternary);
  border:0.5px solid var(--ink-quaternary);border-radius:var(--radius-md);
  overflow:hidden;}
.tweaks-seg{display:flex;align-items:center;justify-content:center;
  gap:6px;padding:7px var(--space-2);cursor:pointer;
  background:var(--bg-surface);
  font-family:var(--font-body);font-size:var(--text-sm);
  color:var(--ink-tertiary);
  transition:background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);}
.tweaks-seg:has(input:checked){background:var(--accent-gold-soft);
  color:var(--accent-gold);}
.tweaks-seg input{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);}
.tweaks-toggle{display:flex;align-items:center;
  gap:var(--space-2);padding:var(--space-1) 0;cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-sm);
  color:var(--ink-secondary);}
.tweaks-toggle input{accent-color:var(--accent-gold);}
.tweaks-select{width:100%;font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-secondary);background:var(--bg-surface);
  border:0.5px solid var(--ink-quaternary);border-radius:var(--radius-md);
  padding:7px var(--space-2);cursor:pointer;}
.tweaks-select:focus{outline:none;border-color:var(--accent-gold);}

/* Chart-page mobile drawer: absolute panels get clipped by
 * overflow-y:auto on .chart-nav, which made selects unclickable.
 * Flow the panel in-document instead. */
@media (max-width:720px){
  .chart-nav .tweaks{position:static;width:100%;}
  .chart-nav .tweaks-panel{
    position:static;right:auto;top:auto;width:100%;
    max-width:none;margin-top:var(--space-2);
    box-shadow:none;
  }
  .chart-nav .tweaks-trigger{
    min-height:44px;padding:var(--space-2) var(--space-3);
  }
  .chart-nav .tweaks-select,
  .chart-nav .tweaks-radio,
  .chart-nav .tweaks-toggle{
    min-height:40px;
  }
}