/* ── Remaining pages, reviewed (site_pages_ux.py) ── */
/* Links in running text: 24 px or more to tap, the line unchanged (they underline with text-decoration) */
main p a:not([class]),.ww-legend a{padding-block:3px}
/* No lone last words */
main h3,main summary{text-wrap:balance}
main li,main dd{text-wrap:pretty}
/* Device links under each pick: outline buttons, so they read as links; the path pill, not a link, loses its border */
.gd-pick__devs a{background:transparent;border:1px solid var(--green);color:var(--green)}
.gd-pick__devs a:hover{background:var(--green-tint)}
.gd-chain__n{box-sizing:border-box}
.gd-chain__n.is-vol{border-color:transparent}
/* A path breaks before an arrow, never after it */
.gd-chain__step{display:inline-flex;align-items:center;gap:8px}
/* Device tiles in Setups: the whole tile links to the device */
.gd-flow__n.is-vol a{color:inherit;text-decoration:none}
.gd-flow__n.is-vol a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.gd-flow__n.is-vol a:focus-visible{outline:none}
.gd-flow__n.is-vol a:focus-visible::after{outline:2px solid var(--green);outline-offset:3px}
.gd-flow__n.is-vol:hover{background:var(--paper-hover)}

/* Device guide ↔ the chain on How hi-fi works: the same part icons, other ways to connect, and why it is flexible */
.gd-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:16px 0 0;font-size:1rem;line-height:1.5rem;color:var(--ink-2)}
.gd-legend span,.gd-legend a{display:inline-flex;align-items:center;gap:6px}
.gd-legend svg{flex:none;width:18px;height:18px;color:var(--green-hi)}
.gd-legend__t{color:var(--ink-2)}
.gd-legend a{min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px}
.gd-legend a svg{color:currentColor}
.gd-chain__n{gap:6px}
.gd-chain__n svg{width:16px;height:16px;color:var(--green-hi)}
.gd-chain--or{margin-top:-4px}
.gd-chain__or{font-size:1rem;line-height:1.375rem;font-weight:600;color:var(--ink-2)}
.gd-picks:not(.is-answer) .gd-pick:last-child:nth-child(odd){grid-column:1 / -1}
.gd-fan{margin-top:clamp(28px,4vw,44px);padding:clamp(20px,3vw,32px);border:1px solid var(--hairline);border-radius:var(--r-card)}
.gd-fan__t{margin:0;font-size:1.5rem;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.gd-fan__lead{margin:8px 0 0;font-size:1rem;line-height:1.5rem;color:var(--ink-2)}
.gd-fan__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;margin:20px 0 0;padding:0;list-style:none}
.gd-fan__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.gd-fan__list li > span:last-child{display:grid;gap:2px}
.gd-fan__list b{font-size:1.0625rem;line-height:1.5rem;font-weight:600;color:var(--ink)}
.gd-fan__list li > span:last-child > span{font-size:1rem;line-height:1.5rem;color:var(--ink-2)}
.gd-fan__i{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--hairline);border-radius:12px;color:var(--green-hi)}
.gd-fan__i svg{width:20px;height:20px}
@media (max-width:760px){.gd-fan__list{grid-template-columns:minmax(0,1fr)}}