/* Visual polish layer (loaded last, after every page stylesheet). It changes looks only, never layout or behaviour, and
   uses the existing --z-* tokens, so every component keeps its markup and size:
   - one "selected" look for every segmented control and tab (accent-tinted fill + accent edge instead of the 1-2 px
     underline each control drew its own way);
   - "Connect wallet" in the header is the primary action until a wallet is connected (#wallet-button.zw-has-wallet);
   - calmer hovers, a visible keyboard focus ring, and an accent edge on the field being typed in. */

:root{
  --z-sel-bg:rgb(var(--z-accent)/.12); --z-sel-border:rgb(var(--z-accent)/.5); --z-sel-text:rgb(var(--z-text));
  --z-hover-bg:var(--z-surface2);
}

/* ---------- Selected state: every segmented control and tab button. Each selector repeats the specificity of the
   page rule it replaces, so this file (loaded last) wins without !important. */
.chart-toolbar button.active,.live-controls .live-timeframes button.active,.sol-toolbar .sol-timeframes button.active,
.sol-toolbar .sol-unit button.active,.chart-toolbar .market-source-controls button[aria-pressed=true],
.presets button.active,.presets .custom-preset.active,.lp-preview-form .lp-widths button.active,.lp-preview-form .lp-custom.active,
.sol-shapes button.active,.sol-speedbox button.active,.sol-bins .sol-custom.active,.sol-segment button[aria-pressed=true],
.pl-tabs .pl-tab.is-on,.pnl-ranges button.active,#pool-search-modal .pool-search-filters button.active,.tr-seg button[aria-pressed="true"]{
  background:var(--z-sel-bg);border-color:var(--z-sel-border);color:var(--z-sel-text);box-shadow:none;font-weight:500}
/* pills drawn without a border (timeframes, chart source, Trenches chain / window) get the same edge as an inset ring */
.chart-toolbar button.active,.live-controls .live-timeframes button.active,.sol-toolbar .sol-timeframes button.active,
.sol-toolbar .sol-unit button.active,.chart-toolbar .market-source-controls button[aria-pressed=true],.pnl-ranges button.active,
.tr-seg button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--z-sel-border)}
/* underline tabs keep the underline, at 2 px so it reads */
.panel-tabs button.active,.table-tab.active,#copy-view .cr-root .table-tab.active{color:var(--z-sel-text);box-shadow:inset 0 -2px rgb(var(--z-accent))}
.chart-toolbar button:not(.active):not([aria-pressed=true]):hover,.presets button:not(.active):hover,.lp-widths button:not(.active):hover,
.sol-shapes button:not(.active):hover,.sol-speedbox button:not(.active):hover,.sol-segment button:not([aria-pressed=true]):hover,
.pl-tab:not(.is-on):hover,.pnl-ranges button:not(.active):hover,.tr-seg button:not([aria-pressed="true"]):hover{color:rgb(var(--z-text));background:var(--z-hover-bg)}
.chart-toolbar button,.presets button,.lp-widths button,.sol-shapes button,.sol-speedbox button,.sol-segment button,.pl-tab,.pnl-ranges button,.tr-seg button{
  transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease}

/* ---------- Header: "Connect wallet" is the primary action until a wallet is connected (both chains) */
#wallet-button:not(.zw-has-wallet){background:var(--z-cta-bg);color:var(--z-cta-text);border-color:var(--z-cta-border);box-shadow:var(--z-cta-shadow);font-weight:600}
#wallet-button:not(.zw-has-wallet):hover{background:var(--z-cta-hover-bg);box-shadow:var(--z-cta-hover-shadow)}
#wallet-button:not(.zw-has-wallet) .zw-header-address{color:inherit}
#wallet-button:not(.zw-has-wallet) .zw-header-dot{display:none}

/* ---------- Sidebar: the current page reads at a glance */
@media(min-width:551px){
  aside nav button.selected{background:var(--z-sel-bg)}
  aside nav button.selected .nav-icon{color:rgb(var(--z-accent))}
  aside nav button:not(.selected):hover{color:rgb(var(--z-text))}
}
.workspace-nav button.selected .nav-icon{color:rgb(var(--z-accent))}

/* ---------- Fields: the box being typed in gets an accent edge */
.amount-box:focus-within,.range-inputs label:focus-within{border-color:var(--z-sel-border);box-shadow:0 0 0 3px rgb(var(--z-accent)/.12)}

/* ---------- Help "?" dots inside the chart toolbar: the phone-width toolbar button padding squeezed the "?" out of its 14 px circle */
.chart-toolbar .tip{padding:0}

/* ---------- Keyboard focus: one visible ring everywhere (mouse clicks do not show it) */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid rgb(var(--z-accent)/.75);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  .chart-toolbar button,.presets button,.lp-widths button,.sol-shapes button,.sol-speedbox button,.sol-segment button,.pl-tab,.pnl-ranges button,.tr-seg button{transition:none}
}