/* v23 · Extruded slab buttons.
   slab.js turns every .b / .btn into: <a class="… slab"><canvas class="sl-cv"></canvas><span class="fr">label</span></a>
   The face (.fr) sits where the old button sat; a stack of 2px pixel slats with a blue cap is drawn
   below-right of it on the canvas, like a short hero bar. Without JS the v22 buttons are unchanged. */
.slab{position:relative;overflow:visible!important;isolation:isolate;background:none!important;box-shadow:none!important;border:0!important;
  padding:0!important;transform:none!important;transition:none!important;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  --sl-slat:#0B1020;--sl-cap:#2440F0;margin-bottom:10px}
.slab::before,.slab::after{content:none!important;display:none!important}
.slab:hover,.slab:active{background:none!important;box-shadow:none!important;transform:none!important}
.slab .sl-cv{position:absolute!important;left:-24px!important;top:-24px!important;right:auto!important;bottom:auto!important;max-width:none!important;max-height:none!important;display:block!important;opacity:1!important;image-rendering:pixelated;pointer-events:none;z-index:0}
.slab .fr{position:relative;z-index:1;display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:10px;min-width:0;height:100%;
  padding:0 22px;border-radius:4px;white-space:nowrap;will-change:transform;transition:background-color .2s}
.slab .fr .lbl{display:inline;padding:0!important;font:inherit;color:inherit}
.slab .fr .arr{width:auto!important;height:auto!important;display:inline-block;border:0!important;background:none!important;padding:0!important;
  color:inherit!important;font:400 15px/1 var(--sans,Geist,system-ui);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.slab.on .fr .arr{transform:translateX(3px)}
.slab:focus-visible{outline:none!important}
.slab:focus-visible .fr{outline:2px solid #3D5AFE;outline-offset:4px}

/* primary on light: ink face on ink slats, blue cap */
.slab.sl-pri .fr{background:#0B1020;color:#fff}
.slab.sl-pri.on .fr{background:#141B30}
/* primary on dark: white face, blue slats, pale cap */
.slab.sl-pri.sl-dk,.top.on-dark .slab.sl-pri{--sl-slat:#3D5AFE;--sl-cap:#B3C2FF}
.slab.sl-pri.sl-dk .fr,.top.on-dark .slab.sl-pri .fr{background:#fff;color:#0B1020}
.slab.sl-pri.sl-dk.on .fr,.top.on-dark .slab.sl-pri.on .fr{background:#EEF1FB}
.slab.sl-pri.sl-dk:focus-visible .fr{outline-color:#7C93FF}
/* secondary on light: white face, grey-blue slats */
.slab.sl-sec{--sl-slat:#8E99B8;--sl-cap:#3D5AFE}
.slab.sl-sec .fr{background:#fff;color:#0B1020;box-shadow:inset 0 0 0 1px #C8CFDD}
.slab.sl-sec.on .fr{box-shadow:inset 0 0 0 1px #9AA6CF}
/* secondary on dark */
.slab.sl-sec.sl-dk{--sl-slat:#2B3B78;--sl-cap:#4B67F2}
.slab.sl-sec.sl-dk .fr{background:#0E1424;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.slab.sl-sec.sl-dk.on .fr{box-shadow:inset 0 0 0 1px rgba(124,147,255,.45)}

/* compact (nav): 40px tall, shallow stack, no extra margin */
.slab.sl-sm{height:40px!important;min-height:40px!important;margin-bottom:0}
.slab.sl-sm .fr{padding:0 14px;font-size:14px;gap:8px}
.slab.sl-sm .fr .arr{font-size:14px}

@media (max-width:600px){.slab .fr{padding:0 18px}}
@media (prefers-reduced-motion:reduce){.slab .fr,.slab .fr .arr{transition:none}}
/* speed viz: 20 blocks must fit the column */
.proof2 .blocks{width:100%}
.proof2 .blocks i{min-width:0!important;width:calc((100% - 57px)/20)!important;max-width:none!important;flex:0 0 auto}
/* full-width form button: leave room for the slab so it stays inside the field edge */
form .slab[type="submit"]{width:calc(100% - 6px)!important;margin-right:6px}