/* ===========================================================================
   BridgeButton — disco + pílula como uma silhueta só, unidos por um filete
   côncavo tangente. A geometria vive no JS (BRIDGE_GEOM, medido em pixel):
   span 0,914·H · fillet 0,0866·H · inset 0,115·H.
   Aqui fica só a caixa que a alimenta. Os literais de cada escala saem dessas
   fracções — H, 1,334·H à esquerda, 0,42·H à direita, glifo a 0,34·H.
   Altura fora das três escalas: sobreponha height + os dois paddings juntos.
   =========================================================================== */
.bridge-btn{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;height:56px;min-width:109px;padding:0 23.5px 0 74.7px;border:none;background:transparent;color:var(--ink-inverse);font-family:var(--font-body);font-size:13px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-snug);line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-base) var(--ease-standard)}
.bridge-btn--right{padding:0 74.7px 0 23.5px}
/* a chapa: um path, sem costura */
.bridge-btn__plate{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bridge-btn__fill{fill:var(--ink)}
.bridge-btn__hair{fill:none;stroke:color-mix(in oklab,var(--ink-inverse) 15%,transparent);stroke-width:1;transition:stroke var(--dur-base) var(--ease-standard)}
/* o disco: só o glifo — o círculo já vem no path. aspect-ratio dá-lhe H sem var */
.bridge-btn__disc{position:absolute;top:0;bottom:0;left:0;aspect-ratio:1;display:grid;place-items:center;color:var(--ink-inverse);transition:transform var(--dur-base) var(--ease-out)}
.bridge-btn--right .bridge-btn__disc{left:auto;right:0}
.bridge-btn__disc :where(svg){width:19px;height:19px;display:block}
.bridge-btn__disc :where(img,.dandelion){width:31.4px;height:31.4px}
.bridge-btn__label{position:relative;z-index:1}
/* estados — a fieira acende, o glifo respira; a forma nunca se mexe */
.bridge-btn:hover:not(:disabled) .bridge-btn__hair{stroke:color-mix(in oklab,var(--ink-inverse) 34%,transparent)}
.bridge-btn:hover:not(:disabled) .bridge-btn__disc{transform:scale(1.08)}
.bridge-btn:active:not(:disabled){transform:scale(.985)}
.bridge-btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.bridge-btn:disabled,.bridge-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
/* tons — em paper a peça é clara sobre página clara, então o contorno passa para
   a silhueta inteira: é a única forma de a JUNTA continuar a ler-se. A fieira
   interna sai (duas linhas paralelas a 0,115·H só fazem ruído). */
.bridge-btn--paper{color:var(--ink)}
.bridge-btn--paper .bridge-btn__fill{fill:var(--surface-page);stroke:var(--line-strong);stroke-width:1;transition:stroke var(--dur-base) var(--ease-standard)}
.bridge-btn--paper .bridge-btn__hair{display:none}
.bridge-btn--paper .bridge-btn__disc{color:var(--ink)}
.bridge-btn--paper:hover:not(:disabled) .bridge-btn__fill{stroke:var(--ink)}
.bridge-btn--signal .bridge-btn__fill{fill:var(--signal)}
.bridge-btn--signal,.bridge-btn--signal .bridge-btn__disc{color:#fff}
/* escalas — 44 · 56 · 72 */
.bridge-btn--sm{height:44px;min-width:86px;padding:0 18.5px 0 58.7px;font-size:12px}
.bridge-btn--sm.bridge-btn--right{padding:0 58.7px 0 18.5px}
.bridge-btn--sm .bridge-btn__disc :where(svg){width:15px;height:15px}
.bridge-btn--sm .bridge-btn__disc :where(img,.dandelion){width:24.6px;height:24.6px}
.bridge-btn--lg{height:72px;min-width:140px;padding:0 30.2px 0 96px;font-size:15px}
.bridge-btn--lg.bridge-btn--right{padding:0 96px 0 30.2px}
.bridge-btn--lg .bridge-btn__disc :where(svg){width:24.5px;height:24.5px}
.bridge-btn--lg .bridge-btn__disc :where(img,.dandelion){width:40.3px;height:40.3px}
@media (prefers-reduced-motion:reduce){.bridge-btn,.bridge-btn__disc,.bridge-btn__hair,.bridge-btn__fill{transition:none}.bridge-btn:hover:not(:disabled) .bridge-btn__disc{transform:none}}