/* Pool card of the trade panel, both chains (dist/pool-liq.js): identity line, then a Volume | Security | Swap tab strip
   over one shared cell. --pl-plan is the chain's LP range colour (the chart's range lines). On the desktop right column
   the cell's height is set by workspace.css (--pl-grow from dist/side-panel.js) and is a size container, so the panes
   fit their content to it (@container below); stacked layouts size it to the tallest pane. */
.pl-card{--pl-plan:var(--z-accent);display:flex;flex-direction:column;gap:8px;min-width:0;font-size:.705882rem;line-height:1.4;color:rgb(var(--z-textDim));font-variant-numeric:tabular-nums}
.sol-facts .pl-card{--pl-plan:var(--sol-band)}
.pl-id{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:18px;font-size:.588235rem;color:rgb(var(--z-muted))}
.pl-id>span+span::before{content:'·';margin-right:8px;color:rgb(var(--z-muted)/.6)}
.pl-chip{display:inline-flex;align-items:center;padding:1px 6px;border:1px solid rgb(var(--pl-plan)/.35);border-radius:4px;background:rgb(var(--pl-plan)/.08);color:rgb(var(--z-textDim));font-size:.529412rem;font-style:normal;font-weight:600;letter-spacing:.08em;line-height:1.5}
.pl-ok{color:rgb(var(--z-success))}.pl-warn{color:rgb(var(--z-warn))}

/* Tabs: a segmented strip, full width, 28px targets; the active one raised, in text colour, with the chain's line. */
.pl-tabs{display:flex;gap:2px;min-width:0;padding:2px;border:1px solid var(--z-border);border-radius:9px;background:var(--z-surface2)}
.pl-tabs .pl-tab{position:relative;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:28px;margin:0;padding:0 8px;border:1px solid transparent;border-radius:7px;background:none;box-shadow:none;font:inherit;font-size:.705882rem;font-weight:500;line-height:1;color:rgb(var(--z-muted));white-space:nowrap;cursor:pointer}
.pl-tabs .pl-tab:hover{color:rgb(var(--z-text));background:var(--z-surface3)}
.pl-tabs .pl-tab.is-on{color:rgb(var(--z-text));background:var(--z-surface3);border-color:var(--z-borderHi);box-shadow:inset 0 -2px rgb(var(--pl-plan))}
.pl-tabs .pl-tab[hidden]{display:none}
.pl-tabs .pl-tab:focus-visible{outline:1px solid rgb(var(--pl-plan));outline-offset:1px}
.pl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.pl-dot[hidden]{display:none}
.pl-dot.is-bad{background:rgb(var(--z-danger));box-shadow:0 0 0 2px rgb(var(--z-danger)/.2)}.pl-dot.is-warn{background:rgb(var(--z-warn));box-shadow:0 0 0 2px rgb(var(--z-warn)/.2)}
/* The three panes share one grid cell (the hidden ones keep their size, invisible), so switching tabs never moves the form. */
.pl-panes{display:grid;min-width:0;min-height:0}
.pl-panes>*{grid-area:1/1;min-width:0;min-height:0}
.pl-panes>.is-off{visibility:hidden;pointer-events:none}

/* Volume: four windows, 2 × 2, each volume, buy / sell bar and txns ("3 buys / 1 sells"; "3 / 1" in a narrow column). */
.pl-vol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px}
.pl-cell{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;min-height:0;padding:12px;border:1px solid var(--z-border);border-radius:9px;background:var(--z-surface2);overflow:hidden}
.pl-cell-k{font-size:.588235rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--z-muted))}
.pl-cell b{font-size:1.176471rem;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:rgb(var(--z-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-split{display:block;height:5px;border-radius:5px;background:rgb(var(--z-danger)/.75);overflow:hidden}.pl-split[hidden]{visibility:hidden;display:block}
.pl-split i{display:block;width:auto;height:100%;border-radius:0;background:rgb(var(--z-success))}
.pl-cell small{display:flex;gap:3px;min-height:14px;font-size:.617647rem;line-height:14px;color:rgb(var(--z-muted));white-space:nowrap;overflow:hidden}
.pl-buys{color:rgb(var(--z-success))}.pl-sells{color:rgb(var(--z-danger))}.pl-slash{color:rgb(var(--z-muted)/.7)}
.pl-sfx{display:inline}

/* Security: six tiles, 3 × 2, each an icon, the value and its label. */
.pl-sec{position:relative;display:flex;min-height:0}
.pl-sec-grid{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px;min-width:0}
.pl-sec-grid:empty{display:none}
/* Tiles are .tip buttons (dist/tip.js shows their data-tip): the tip.css bubble-button look is reset. */
.pl-sec-grid .pl-sec-tile.tip{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;width:auto;height:auto;min-width:0;min-height:0;margin:0;padding:8px 9px;border:1px solid var(--z-border);border-radius:9px;background:var(--z-surface2);box-shadow:none;font-size:inherit;font-weight:400;line-height:1.2;color:rgb(var(--z-text));text-align:left;cursor:help;overflow:hidden}
.pl-sec-grid .pl-sec-tile.tip:hover,.pl-sec-grid .pl-sec-tile.tip.tip-open{background:var(--z-surface3);border-color:var(--z-borderHi)}
.pl-sec-icon{flex-shrink:0;width:16px;height:16px;fill:none;stroke:rgb(var(--z-muted));stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pl-sec-tile b{max-width:100%;font-size:.823529rem;line-height:1.15;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-sec-tile small{max-width:100%;font-size:.588235rem;line-height:1.15;color:rgb(var(--z-muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-sec-tile.is-good b{color:rgb(var(--z-success))}.pl-sec-tile.is-bad b{color:rgb(var(--z-danger))}.pl-sec-tile.is-warn b{color:rgb(var(--z-warn))}
.pl-sec-tile.is-good .pl-sec-icon{stroke:rgb(var(--z-success)/.8)}.pl-sec-tile.is-bad .pl-sec-icon{stroke:rgb(var(--z-danger))}.pl-sec-tile.is-warn .pl-sec-icon{stroke:rgb(var(--z-warn))}
.pl-sec-msg{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;padding:0 12px;border:1px dashed var(--z-border);border-radius:9px;font-size:.647059rem;color:rgb(var(--z-muted));text-align:center}
.pl-sec-msg[hidden]{display:none}
.pl-sec-msg button{padding:4px 10px;font-size:.647059rem;background:transparent;box-shadow:none;border-color:var(--z-ghost-border);color:rgb(var(--z-textDim))}

/* The LP form's range line under the width / bins row, both chains (paintRangeLine): "Range lo – hi QUOTE · −16% / +17%",
   replacing the two Lower / Upper boxes. */
.lp-range-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px;margin-top:8px;min-width:0;font-size:.647059rem;line-height:1.5;color:rgb(var(--z-muted));font-variant-numeric:tabular-nums}
.lp-range-line small{font-size:inherit;color:rgb(var(--z-muted))}
.lp-range-line b{font-weight:550;color:rgb(var(--z-text));white-space:nowrap}
.lp-range-line .rl-sep,.lp-range-line .rl-unit{color:rgb(var(--z-textDim))}
.lp-range-line .rl-pct{white-space:nowrap}.lp-range-line .rl-pct::before{content:'·';margin-right:5px;color:rgb(var(--z-muted)/.6)}

/* Swap tab (dist/pool-swap.js), both chains: You pay ⇅ You receive (amount + token logo), the quote details one per line,
   slippage (+ speed), a full-width Swap button, the status line. */
.pl-swap{display:flex;flex-direction:column;gap:6px;min-width:0}
.ps-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;min-width:0;margin-top:auto}
.ps-foot>*{grid-column:1/-1}
.ps-side{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;padding:8px 10px 9px;border:1px solid var(--z-border);border-radius:9px;background:var(--z-surface2)}
.ps-pay{border-color:var(--z-borderHi);background:var(--z-input-bg)}
.ps-pay:focus-within{border-color:rgb(var(--pl-plan)/.6)}
.ps-head{display:flex;align-items:center;gap:6px;min-width:0;height:16px;font-size:.588235rem;color:rgb(var(--z-muted))}
.ps-lbl{flex-shrink:0}
.ps-bal{flex:1;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps .ps-max{flex-shrink:0;height:16px;margin:0;padding:0 5px;border:1px solid var(--z-border);border-radius:4px;background:transparent;box-shadow:none;color:rgb(var(--z-textDim));font-size:.529412rem;line-height:14px;letter-spacing:.08em}
.ps .ps-max:hover:not(:disabled){color:rgb(var(--z-text));border-color:var(--z-borderHi)}
.ps-main{display:flex;align-items:center;gap:8px;min-width:0;height:28px}
.ps .ps-amt{flex:1;min-width:0;height:28px;padding:0;border:0;border-radius:0;background:transparent;font-size:1.176471rem;font-weight:500;letter-spacing:-.03em;color:rgb(var(--z-text))}
.ps .ps-amt:focus-visible{outline:none}
.ps-out{flex:1;min-width:0;font-size:1.176471rem;font-weight:500;letter-spacing:-.03em;line-height:28px;color:rgb(var(--z-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-out.is-empty{color:rgb(var(--z-muted)/.7)}
.ps-tok{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;max-width:48%;height:26px;padding:0 9px 0 4px;border:1px solid var(--z-border);border-radius:13px;background:var(--z-surface3)}
.ps-tok b{min-width:0;font-size:.705882rem;font-weight:600;color:rgb(var(--z-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-logo{display:grid;place-items:center;flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--z-surface2);border:1px solid var(--z-borderHi);color:rgb(var(--z-textDim));font-size:.529412rem;font-style:normal;font-weight:600;overflow:hidden}
.ps-logo[hidden]{display:none}
/* Counter picker (Robinhood): a transparent select over the counter token's chip, a caret marks it. */
.ps-tok{position:relative}.ps-tok.has-pick{padding-right:7px;cursor:pointer}.ps-tok.has-pick::after{content:'▾';font-size:.588235rem;color:rgb(var(--z-textDim))}
.ps-tok.has-pick:hover{border-color:var(--z-borderHi)}
.ps .ps-pick{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:.705882rem}.ps .ps-pick[hidden]{display:none}
.ps .ps-try{display:inline;height:auto;margin:0;padding:0 2px;border:0;background:none;box-shadow:none;font:inherit;font-weight:600;color:rgb(var(--pl-plan));text-decoration:underline;cursor:pointer}
/* ⇅ sits on the seam between the two sides. */
.ps-fliprow{position:relative;z-index:1;display:flex;justify-content:center;height:0;margin:-3px 0}
.ps .ps-dir{position:absolute;top:50%;width:28px;height:28px;margin:0;padding:0;transform:translateY(-50%);border:1px solid var(--z-borderHi);border-radius:8px;background:rgb(var(--z-surface));box-shadow:0 0 0 3px rgb(var(--z-surface));font-size:.823529rem;line-height:1;color:rgb(var(--z-textDim))}
.ps .ps-dir:hover:not(:disabled){color:rgb(var(--pl-plan));border-color:rgb(var(--pl-plan)/.6)}
.ps-det{display:flex;flex-direction:column;gap:3px;min-width:0;padding:2px 2px 0}
.ps-kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;font-size:.617647rem;line-height:15px;color:rgb(var(--z-muted))}
.ps-kv span{flex-shrink:0}
.ps-kv b{min-width:0;font-weight:500;color:rgb(var(--z-textDim));text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-kv b.is-warn{color:rgb(var(--z-warn))}.ps-kv b.is-high{color:rgb(var(--z-danger))}
.ps-ctrl{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:0 2px}
.ps-slip,.ps-speedbox{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;margin:0;font-size:.617647rem;color:rgb(var(--z-muted));cursor:text}
.ps-slip input{width:42px;height:22px;padding:0 6px;border-radius:5px;font-size:.647059rem;line-height:20px;text-align:right}
.ps .ps-speed{width:auto;height:22px;margin:0;padding:0 4px;border:1px solid var(--z-border);border-radius:5px;background:var(--z-surface2);box-shadow:none;font-size:.617647rem;line-height:20px;color:rgb(var(--z-textDim));cursor:pointer}
.ps .ps-go{flex-shrink:0;width:100%;height:38px;margin:0;padding:0 12px;border-color:var(--z-cta-border);border-radius:8px;background:var(--z-cta-bg);box-shadow:var(--z-cta-shadow);color:var(--z-cta-text);font-size:.764706rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps .ps-go:hover:not(:disabled){background:var(--z-cta-hover-bg);box-shadow:var(--z-cta-hover-shadow);color:var(--z-cta-text)}
.ps .ps-go.is-danger{background:rgb(var(--z-danger)/.16);border-color:rgb(var(--z-danger)/.6);box-shadow:none;color:rgb(var(--z-danger))}
.ps-line{min-height:15px;font-size:.588235rem;line-height:15px;color:rgb(var(--z-muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-line.is-error,.ps-line.is-high{color:rgb(var(--z-danger))}.ps-line.is-warn{color:rgb(var(--z-warn))}
/* With the details shown, the one-line quote would repeat them. */
.ps-line.is-quote{visibility:hidden}

/* Desktop column (a size container): fit the panes to the height they are given (176px at least, dist/form-fit.js
   BASE). Short: tighter volume cells. Swap (thresholds = the measured height of each layout; Solana has one more
   detail line, the network fee): every detail from 300px (Solana 318px); without the route line from 283px (301px);
   below that the details give way to the one-line quote; below 242px the sides tighten and slippage sits beside the
   status line (which takes the whole row while it carries an error, a step or an impact warning). Leftover height
   goes to the two sides (taller amount boxes). */
@container (max-height:249px){.pl-vol{gap:5px}.pl-cell{gap:4px;padding:7px 10px}.pl-cell b{font-size:1rem}}
@container (max-width:339px){.pl-sfx{display:none}}
@container (max-height:299px){.ps-kv-route{display:none}}
@container (max-height:317px){.ps-solana .ps-kv-route{display:none}}
@container (max-height:282px){.ps-det{display:none}.ps-line.is-quote{visibility:visible}}
@container (max-height:300px){.ps-solana .ps-det{display:none}.ps-solana .ps-line.is-quote{visibility:visible}}
@container (max-height:241px){
  .pl-swap,.ps-foot{gap:4px}.ps-side{gap:2px;padding:4px 9px}.ps-main{height:22px}.ps .ps-amt{height:22px}.ps-out{line-height:22px}.ps-tok{height:22px}
  .ps .ps-go{order:1;height:30px}.ps-line{order:2;grid-column:1;align-self:center}.ps-ctrl{order:3;grid-column:2;padding:0}
  .ps-loud .ps-ctrl{display:none}.ps-loud .ps-line{grid-column:1/-1}
}
@media(max-width:550px){.pl-cell{padding:10px}.pl-sec-grid .pl-sec-tile.tip{padding:7px 8px}}