/* 06 · Button, remade (the user, Round 16, 2026-10-14: "remake the buttons entirely", one new Button element that fits
   the pages). One base, .rw-btn, owns the whole build; a variant sets only tokens. The variant list stays the typed
   one in core/kit.d.ts: cta, door, ghost, card, share, pledge, chip, reroll, nav, close, link (ticket lives in
   60-shelf.css). Rules of the remake: the box is the label plus its padding and never moves anything around it;
   nothing paints outside the edge (overflow clipped, no bleed: cut in Rounds 15-16, data-rw-bleed is ignored);
   one reaction for everything clickable (a lift of 1px and a deeper edge on hover, a press of .97); no animation at
   rest. The 05-types.css tokens (--btn-*) remain the contract, so any caller that sets them still works.
   Data-rw-near (the approach glow) stays as a soft ring, inside the edge. */

.rw-btn{
  --btn-near:transparent;--btn-w:auto;--btn-h:auto;--btn-gap:8px;--btn-lead:1.15;--btn-wrap:nowrap;--btn-track:normal;
  --btn-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 14px -10px var(--btn-glow,var(--rw-cta-glow)),
    inset 0 0 0 calc(var(--near,0) * 2px) color-mix(in srgb,var(--btn-near) calc(var(--near,0) * 70%),transparent);
  --btn-shadow-hover:0 1px 0 rgba(255,255,255,.16) inset,0 10px 18px -10px var(--btn-glow,var(--rw-cta-glow));
  position:relative;isolation:isolate;overflow:hidden;flex:none;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);
  width:var(--btn-w);height:var(--btn-h);min-height:var(--btn-min-h,40px);max-width:100%;
  padding:var(--btn-pad-y,10px) var(--btn-pad-x,18px) var(--btn-pad-y,10px) var(--btn-pad-l,var(--btn-pad-x,18px));
  border:1px solid var(--btn-edge,var(--rw-cta-edge));border-radius:var(--btn-radius,999px);
  font-family:var(--btn-font,inherit);font-size:var(--btn-size,15px);font-weight:var(--btn-weight,600);line-height:var(--btn-lead);
  letter-spacing:var(--btn-track);white-space:var(--btn-wrap);text-overflow:ellipsis;text-align:center;
  color:var(--btn-ink,var(--rw-cta-ink));text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,var(--btn-ground-a,var(--rw-cta-a)),var(--btn-ground-b,var(--rw-cta-b)));
  box-shadow:var(--btn-shadow);
  transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease,background-color .2s ease}
.rw-btn:hover{color:var(--btn-hover-ink,var(--btn-ink,var(--rw-cta-ink)));border-color:var(--btn-hover-edge,var(--btn-edge,var(--rw-cta-edge)));
  box-shadow:var(--btn-shadow-hover);transform:translateY(-1px)}
.rw-btn:active{transform:translateY(0) scale(.97)}
.rw-btn:focus-visible{outline:2px solid var(--btn-hover-edge,var(--rw-cta-edge));outline-offset:2px}
/* the cut bleed: any canvas module.bleed still mounts stays invisible */
.rw-btn > .rw-bleed{display:none}
/* never disabled (the user: "click, and it happens"): a button without its link carries data-rw-to-signup (module.fund) */

/* the main action */
.rw-btn--cta{--btn-near:var(--rw-and-glow)}
/* buy: the main action's filled face, smaller and bolder, kept to one line at every width, its price in the accent
   when the caller wraps it in <b> (the user, 2026-10-14, on the plate's ghost pill that wrapped to two lines: "this is
   a bad button"). The plate's door wears it by its id, over 30-engine.css's ghost tokens */
.rw-btn--buy,#rw-plate-cta.rw-btn{--btn-near:var(--rw-and-glow);--btn-edge:var(--rw-cta-edge);
  --btn-ink:var(--rw-cta-ink);--btn-hover-ink:var(--rw-cta-ink);--btn-bloom:initial;--btn-pad-y:9px;--btn-pad-x:16px;--btn-size:14px;--btn-weight:700;
  --btn-wrap:nowrap;--btn-track:.01em;--btn-min-h:38px}
.rw-btn--buy b,#rw-plate-cta.rw-btn b{font-weight:800;color:var(--rw-price-ink,var(--gem-2,currentColor));padding-left:.15em}
@media (max-width:480px){.rw-btn--buy,#rw-plate-cta.rw-btn{--btn-wrap:nowrap}}

/* the money family (the user, 2026-10-14, on the Pledge, the coffee and the plate buttons: "you clearly didn't do a
   good job making buttons"; no generic gradient slab): the asks that take money share one tactile face, a key. One
   solid ground (no gradient), a lit top lip, and a key-edge under it, a band of the deep ground two pixels tall; hover
   lifts the key a pixel and deepens its edge, a press sinks it onto its edge. Hierarchy by weight, not by colour noise:
   pledge is the big key, buy the small key, and the coffee is a ghost (no key) so the eye never splits between two
   money asks. Tokens: --key (the ground), --key-edge (the band under it), --key-lip (the top light) */
.rw-btn--pledge,.rw-btn--buy,#rw-plate-cta.rw-btn{--key:var(--btn-key,var(--rw-cta-b));--key-edge:color-mix(in oklab,var(--key) 62%,#000);
  --key-lip:color-mix(in srgb,#fff 26%,transparent);--btn-ground-a:var(--key);--btn-ground-b:var(--key);
  --btn-shadow:inset 0 1px 0 var(--key-lip),0 2px 0 var(--key-edge),0 8px 16px -10px var(--btn-glow,var(--rw-cta-glow));
  --btn-shadow-hover:inset 0 1px 0 var(--key-lip),0 3px 0 var(--key-edge),0 12px 20px -10px var(--btn-glow,var(--rw-cta-glow));
  margin-bottom:3px}
.rw-btn--pledge{--btn-pad-y:12px;--btn-pad-x:26px;--btn-size:16px;--btn-weight:800;--btn-track:.02em;--btn-min-h:46px}
.rw-btn--pledge:active,.rw-btn--buy:active,#rw-plate-cta.rw-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 var(--key-lip),0 0 0 var(--key-edge)}

/* the bar's door: the main action, smaller */
.rw-btn--door{--btn-near:var(--rw-and-glow);--btn-pad-y:7px;--btn-pad-x:14px;--btn-size:14px;--btn-min-h:34px;
  --btn-ink:var(--rw-door-lit-ink);--btn-hover-ink:var(--rw-door-lit-ink)}

/* the pledge: the main action in rose; white words by day */
.rw-btn--pledge{--btn-near:var(--rw-and-glow)}
:root[data-rw-theme="light"] .rw-btn--pledge{--btn-ground-a:color-mix(in srgb,var(--rose) 82%,#fff);--btn-ground-b:color-mix(in srgb,var(--rose-deep) 85%,var(--rose));
  --btn-ink:#fff;--btn-hover-ink:#fff;--btn-edge:color-mix(in srgb,var(--rose-deep) 70%,transparent)}
/* the key face by day too: the rose key, solid (the money family, above) */
:root[data-rw-theme="light"] .rw-btn--pledge{--btn-key:color-mix(in srgb,var(--rose-deep) 85%,var(--rose));--btn-ground-a:var(--key);--btn-ground-b:var(--key)}

/* the quiet button: no ground, an edge and ink */
.rw-btn--ghost{--btn-ground-a:var(--rw-ghost-bg);--btn-ground-b:var(--rw-ghost-bg);--btn-edge:var(--rw-ghost-edge);
  --btn-ink:var(--rw-ghost-ink);--btn-hover-ink:var(--rw-ghost-hover);--btn-shadow:none;--btn-shadow-hover:none;align-self:flex-start}

/* the price pill on a card: the card's ground, edge and ink */
.rw-btn--card{--btn-ground-a:color-mix(in srgb,var(--rw-item-bg) 82%,transparent);--btn-ground-b:var(--btn-ground-a);
  --btn-edge:color-mix(in srgb,var(--rw-item-edge) 55%,var(--rw-engine-edge));--btn-hover-edge:var(--rw-item-edge);--btn-ink:var(--rw-price-ink);
  --btn-shadow:none;--btn-shadow-hover:0 8px 16px -12px color-mix(in srgb,var(--rw-item-edge) 70%,transparent)}

/* the share pill on a pulled card: sized by the card (em), the card's accent */
.rw-btn--share{--btn-ground-a:transparent;--btn-ground-b:transparent;--btn-edge:color-mix(in srgb,var(--c-accent) 55%,transparent);
  --btn-hover-edge:var(--c-accent);--btn-ink:var(--c-ink);--btn-hover-ink:var(--c-ink);--btn-pad-y:.35em;--btn-pad-x:.75em;--btn-min-h:0;
  --btn-size:inherit;--btn-weight:inherit;--btn-track:.08em;--btn-shadow:none;--btn-shadow-hover:inset 0 0 0 99em color-mix(in srgb,var(--c-accent) 14%,transparent)}

/* a role chip (32-chips.css keeps the chip's own states) */
.rw-btn--chip{--btn-ground-a:color-mix(in oklab,var(--k2,var(--rw-chip-ink)) 9%,transparent);--btn-ground-b:var(--btn-ground-a);
  --btn-edge:color-mix(in oklab,var(--k2,var(--rw-chip-ink)) 18%,transparent);--btn-ink:var(--rw-chip-ink);--btn-hover-ink:var(--rw-chip-hover);
  --btn-pad-y:5px;--btn-pad-x:13px;--btn-pad-l:10px;--btn-size:14px;--btn-gap:7px;--btn-min-h:32px;--btn-shadow:none;--btn-shadow-hover:none}

/* the reroll: a chip with one glyph */
.rw-btn--reroll{--btn-ground-a:color-mix(in oklab,var(--rw-chip-ink) 8%,transparent);--btn-ground-b:var(--btn-ground-a);
  --btn-edge:color-mix(in oklab,var(--rw-chip-ink) 16%,transparent);--btn-ink:var(--rw-chip-ink);--btn-hover-ink:var(--rw-chip-hover);
  --btn-pad-y:5px;--btn-pad-x:11px;--btn-size:16px;--btn-lead:1;--btn-min-h:32px;--btn-shadow:none;--btn-shadow-hover:none}

/* the deck's round arrows: a rose circle, same box as before (sized in cqi with the table), no ring, no stretch */
.rw-btn--nav{--btn-ground-a:color-mix(in srgb,var(--rose,#e2384f) 16%,#fff);--btn-ground-b:color-mix(in srgb,var(--rose,#e2384f) 32%,#fff);
  --btn-edge:color-mix(in srgb,var(--rose,#e2384f) 45%,#fff);--btn-hover-edge:var(--rose,#e2384f);
  --btn-ink:var(--rose-deep,#b0203a);--btn-hover-ink:var(--rose-dark,#7a1428);--btn-pad-y:0px;--btn-pad-x:0px;--btn-min-h:0;
  --nav-s:clamp(32px,4.2cqi,46px);--btn-w:var(--nav-s);--btn-h:var(--nav-s);--btn-size:calc(var(--nav-s) * .5);--btn-lead:1;--btn-weight:700}
:root[data-rw-theme="dark"] .rw-btn--nav{--btn-ground-a:color-mix(in srgb,var(--rose,#e2384f) 30%,#1a0d12);--btn-ground-b:color-mix(in srgb,var(--rose,#e2384f) 50%,#1a0d12);
  --btn-ink:#fff;--btn-hover-ink:#fff}

/* a dialog's close: a bare glyph */
.rw-btn--close{--btn-ground-a:transparent;--btn-ground-b:transparent;--btn-edge:transparent;--btn-hover-edge:transparent;
  --btn-ink:var(--rw-lede-ink);--btn-hover-ink:var(--rw-title-ink);--btn-pad-y:0px;--btn-pad-x:0px;--btn-w:32px;--btn-h:32px;--btn-min-h:0;
  --btn-size:22px;--btn-lead:1;--btn-shadow:none;--btn-shadow-hover:none}

/* a quiet text act ("Reset my progress"): underlined caption ink */
.rw-btn--link{--btn-ground-a:transparent;--btn-ground-b:transparent;--btn-edge:transparent;--btn-hover-edge:transparent;
  --btn-ink:var(--rw-caption-ink);--btn-hover-ink:var(--rw-title-ink);--btn-pad-y:2px;--btn-pad-x:0px;--btn-min-h:0;--btn-weight:inherit;--btn-size:inherit;
  --btn-shadow:none;--btn-shadow-hover:none;text-decoration:underline;text-underline-offset:.2em}
.rw-btn--link:hover{transform:none}

/* on a phone, long labels may wrap rather than overflow */
@media (max-width:480px){.rw-btn{--btn-wrap:normal}}
@media (prefers-reduced-motion:reduce){.rw-btn{transition:none}.rw-btn:hover,.rw-btn:active{transform:none}}