/* The approved signature and light buttons (R4 = R3 look and feel, DL-O76, DL-O82; T614, T617),
   ported as they are from
   docs/08-ui-ux/prototypes/approved-current/signature-button-r4/arthalyze-signature-button.html
   (MD5 1409dff885b58a55e959bfbad09bc7ba; its CSS is the R3 CSS unchanged). The ".sig" and ".lite" rules below are that file's rules,
   unchanged; every number is the owner-approved one (CTO handoff sections 2-3). Do not tune here.
   App additions are marked "app:" and change no look or motion number. */

/* app: the buttons' own tokens from the approved page (label #F4F6F1, focus #FFD38A), scoped to the
   buttons so the rest of the page keeps the Figma tokens of shell.css. */
.lite, .sig-well {
  --fg: #f4f6f1; --muted: #b4c6cb; --warn: #ffd38a; --saffron: #f47721; --deep: #a6430a;
  --font: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
/* app: the shared sparkle texture is a static file (made once from the page's own sparkleTexture(),
   seed 4242, 300 flakes, 256 x 128 CSS px at 2x), instead of being drawn on every page load. */
:root { --sparkle: url("/static/brand/sparkle.png"); }

/* ---- full signature button: WebGL draws the glass under a transparent <button> or <a> ---- */
.sig {
  position: absolute; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; color: var(--fg);
  border-radius: 999px; -webkit-tap-highlight-color: transparent; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  font: 500 15px/1 var(--font);
}
.sig:focus-visible { outline: 3px solid var(--warn); outline-offset: 8px; }
.sig .content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-origin: 50% 50%; will-change: transform; }
.sig .seal { position: absolute; left: 20px; top: 50%; width: 40px; height: 40px; margin-top: -20px; }
.sig .label { letter-spacing: .005em; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.sig .arrow { position: absolute; right: 26px; top: 50%; width: 18px; height: 22px; margin-top: -11px; }

/* app: each signature button sits in a well the size of the button; its canvas reaches 12 px
   beyond it for the seat, and is clear wherever it draws nothing, so there is no box around it. */
.sig-well { position: relative; display: block; height: 96px; max-width: 100%; touch-action: pan-y; }
.sig-well > canvas { position: absolute; left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); display: block; pointer-events: none; }
.sig { text-decoration: none; }
.sig-well.is-disabled { opacity: .45; }
.sig-well.is-disabled .sig { cursor: not-allowed; }

/* ---- light buttons: same glass, saffron gel and resting sparkle, no simulation. CSS only; the sparkle is one shared texture. ---- */
.lite { position: relative; isolation: isolate; height: 56px; min-width: 128px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--fg); font: 500 14px/1 var(--font); letter-spacing: .005em; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  background:
    linear-gradient(180deg, rgba(226,245,255,.14), rgba(244,119,33,.09) 30%, rgba(244,119,33,.20) 60%, rgba(166,67,10,.46));
  box-shadow:
    inset 0 0 0 1.25px rgba(226,247,255,.55), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(226,247,255,.45),
    inset 0 0 0 4px rgba(216,241,249,.07),
    0 7px 12px -6px rgba(0,0,0,.75), 0 0 0 4px rgba(4,12,16,.55), 0 0 0 5px rgba(130,160,170,.12);
  transform: translateY(0) scale(1);
  transition: transform 260ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms ease-out, filter 220ms ease-out; }
.lite::before { /* resting sparkle: one texture for every light button, hidden behind the words */
  content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: .95;
  background-image: var(--sparkle, none); background-size: 256px 128px; background-position: var(--sp, 0 0);
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, transparent 55%, #000 88%); mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, transparent 55%, #000 88%);
  transition: opacity 160ms ease-out; }
.lite::after { /* the sheen and the warm pool: brighten on press */
  content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: .6;
  background:
    radial-gradient(ellipse 40% 55% at 28% 8%, rgba(255,255,255,.34), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 115%, rgba(244,119,33,.45), transparent 70%);
  transition: opacity 120ms ease-out; }
.lite > span { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.lite > span::before { /* reading veil, same idea as the signature button */
  content: ""; position: absolute; left: -22px; right: -22px; top: -14px; bottom: -14px; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(6,14,19,.55), rgba(6,14,19,.0) 70%); }
.lite:hover { filter: brightness(1.05); }
.lite:active, .lite.is-down { transform: translateY(2px) scale(.975, .93); transition: transform 90ms ease-out, box-shadow 90ms ease-out, filter 90ms;
  box-shadow:
    inset 0 0 0 1.25px rgba(236,250,255,.8), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(226,247,255,.55),
    inset 0 0 0 4px rgba(216,241,249,.1),
    0 2px 5px -3px rgba(0,0,0,.8), 0 0 0 4px rgba(4,12,16,.75), 0 0 0 5px rgba(130,160,170,.16); }
.lite:active::after, .lite.is-down::after { opacity: 1; }
.lite:active::before, .lite.is-down::before { opacity: 1; }
.lite:focus-visible { outline: 3px solid var(--warn); outline-offset: 5px; }
.lite.ghost { color: var(--muted); background: linear-gradient(180deg, rgba(226,245,255,.10), rgba(226,245,255,.02) 40%, rgba(244,119,33,.06) 65%, rgba(166,67,10,.18)); }
@media (prefers-reduced-motion: reduce) { .lite, .lite:active { transition: none; } }

/* app: one rule set for <button> and <a> light buttons, and the disabled state. */
.lite { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; vertical-align: middle; }
.lite[disabled], .lite[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* T618 (CTO 2 Nov): words never leave their button. A long label, a narrow phone or a wider stand-in
   font before Inter arrives wraps onto a second line inside the button; nothing is a fixed width that
   only fits Inter. One line looks exactly as before (56 px tall, words centred). */
.lite { height: auto; min-height: 56px; max-width: 100%; min-width: min(128px, 100%); padding-top: 8px; padding-bottom: 8px; text-align: center; }
.lite > span { min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }