/* ============================================================================
   easy-button.css — the Brain Purge "easy button," built ONCE.
   ============================================================================
   The glowing pistachio sphere you press. VISUAL DESIGN ported (2026-07) from the
   approved give-it-to-mama component — a glossy sphere that lifts on hover and
   pushes DOWN on press, floating in a soft breathing pistachio bloom. That
   component's JS-computed sizes (size * factor, tuned at 230px) are re-expressed
   here as calc(var(--eb-d) * factor) so the SAME button reproduces at any size —
   a number OR a CSS length like clamp(...). Nothing else changed: markup + API
   still live in shared/easy-button.js (callers name size/action/data/glow/face/
   disabled), delegation is unchanged, and the small-size wordmark keeps its
   legibility floor. This is the ONLY implementation.

   Press is a push-DOWN + slight scale (the ported physics). Status is light; the
   disabled state dims without lift or travel.
   ============================================================================ */

.eb-rig{
  --eb-d:300px;            /* the one knob: diameter. Everything scales from this. */
  --bp-ball:#BFE89A;       /* Glowing Pistachio — the dome. Non-negotiable identity color. */
  --bp-logo:#3FB417;       /* Joystick Green — robot line-work. */
  --bp-dot:#7C4DD6;        /* Sprout Violet — the one accent dot. */
  --bp-ink:#0A0F0C;        /* Ink — deep tones / subtitle. */
  --bp-edge-dark:#243515;
  --bp-edge-core:#0a1005;
  --eb-sora:'Sora',system-ui,sans-serif;
  --eb-rounded:'Quicksand',system-ui,sans-serif;
  position:relative;width:var(--eb-d);height:var(--eb-d);flex:none;
}

/* ambient breathing bloom — the soft pistachio halo the sphere floats in. Lives
   in the .eb-collar element; only the halo variant lights it (the default keeps a
   quiet, bloom-less sphere). */
.eb-collar{position:absolute;inset:0;border-radius:50%;z-index:0;pointer-events:none;background:none;box-shadow:none;}
.eb-rig[data-glow="halo"] .eb-collar{
  inset:calc(var(--eb-d) * -.24);              /* the design's 1.48x glow stage */
  background:radial-gradient(circle at 50% 47%,
    color-mix(in srgb,var(--bp-ball) 42%, transparent) 0%,
    color-mix(in srgb,var(--bp-ball) 16%, transparent) 28%,
    transparent 56%);
  filter:blur(calc(var(--eb-d) * .026));
  animation:ebBloom 4.8s ease-in-out infinite;}
@keyframes ebBloom{0%,100%{opacity:.8;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}

/* the orb — the glossy pistachio sphere, with the design's green glow rings baked
   into its shadow so it reads as lit from within. */
.eb-orb{position:absolute;inset:0;border-radius:50%;border:none;cursor:pointer;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--eb-d) * .009);
  isolation:isolate;padding:0;
  background:radial-gradient(circle at 48% 26%,
    #ffffff 0%,
    color-mix(in srgb,var(--bp-ball) 50%, #fff 50%) 14%,
    var(--bp-ball) 46%,
    color-mix(in srgb,var(--bp-ball) 82%, var(--bp-edge-dark) 18%) 82%,
    color-mix(in srgb,var(--bp-ball) 56%, var(--bp-edge-core) 44%) 100%);
  box-shadow:
    0 calc(var(--eb-d) * .113) calc(var(--eb-d) * .261) rgba(8,14,5,.6),
    0 0 calc(var(--eb-d) * .391) calc(var(--eb-d) * .07) color-mix(in srgb,var(--bp-ball) 58%,transparent),
    0 0 calc(var(--eb-d) * .783) calc(var(--eb-d) * .191) color-mix(in srgb,var(--bp-ball) 34%,transparent),
    0 0 calc(var(--eb-d) * 1.304) calc(var(--eb-d) * .348) color-mix(in srgb,var(--bp-ball) 16%,transparent),
    inset 0 calc(var(--eb-d) * -.148) calc(var(--eb-d) * .243) rgba(18,32,6,.6),
    inset 0 calc(var(--eb-d) * .096) calc(var(--eb-d) * .148) rgba(255,255,255,.42);
  transition:transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;}

/* hover: the sphere lifts + swells a touch. (No effect on touch — press carries it.) */
.eb-orb:hover{transform:translateY(calc(var(--eb-d) * -.013)) scale(1.012);}

/* press: pushes DOWN + shrinks slightly; the bloom shadow collapses inward. */
.eb-orb:active{transform:translateY(calc(var(--eb-d) * .043)) scale(.99);
  box-shadow:
    0 calc(var(--eb-d) * .017) calc(var(--eb-d) * .052) rgba(8,14,5,.55),
    0 0 calc(var(--eb-d) * .304) calc(var(--eb-d) * .043) color-mix(in srgb,var(--bp-ball) 46%,transparent),
    inset 0 calc(var(--eb-d) * -.087) calc(var(--eb-d) * .174) rgba(18,32,6,.7),
    inset 0 calc(var(--eb-d) * .061) calc(var(--eb-d) * .113) rgba(255,255,255,.36);}

/* spec highlight — the soft catch-light on the crown. */
.eb-orb::before{content:"";position:absolute;left:22%;top:7%;
  width:50%;height:34%;border-radius:50%;z-index:3;pointer-events:none;filter:blur(1px);
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.85), rgba(255,255,255,0) 68%);}

/* the face: robot mark, embossed wordmark, quiet subtitle. Scales with the orb;
   the wordmark + subtitle carry a small px floor (max(...)) so the FULL labeled
   face stays legible at small sizes too — one source, no separate small variant. */
.eb-orb svg{position:relative;z-index:4;display:block;
  width:calc(var(--eb-d) * .26);height:calc(var(--eb-d) * .26);margin-bottom:calc(var(--eb-d) * -.009);}
.eb-orb b{font-family:var(--eb-sora);font-weight:900;font-size:max(11px, calc(var(--eb-d) * .13));line-height:0.9;
  text-align:center;letter-spacing:-0.012em;position:relative;z-index:4;text-transform:lowercase;
  color:color-mix(in srgb,var(--bp-ball) 64%, #1c2a10 36%);
  text-shadow:0 1px 0 rgba(255,255,255,.45), 0 -1px 1px rgba(20,40,8,.35);}
.eb-orb em{font-family:var(--eb-rounded);font-style:normal;font-weight:600;font-size:max(7px, calc(var(--eb-d) * .052));
  color:color-mix(in srgb,var(--bp-ink) 52%,transparent);position:relative;z-index:4;margin-top:calc(var(--eb-d) * .022);}

/* icon-only variant: drop the words below ~96px or when caller asks. */
.eb-rig[data-face="icon"] .eb-orb b,
.eb-rig[data-face="icon"] .eb-orb em{display:none;}
.eb-rig[data-face="icon"] .eb-orb svg{margin-bottom:0;}

/* disabled: dimmed but still seated — no lift, no travel, no press. Status is
   light; a dark button reads "not yet," never "broken." */
.eb-orb:disabled{cursor:default;opacity:.5;filter:saturate(.6);}
.eb-orb:disabled:hover,.eb-orb:disabled:active{transform:none;}

/* accessibility: a clear focus ring, not reliant on the glow. */
.eb-orb:focus-visible{outline:none;
  box-shadow:0 0 0 calc(var(--eb-d) * .013) color-mix(in srgb,var(--bp-ball) 70%,transparent),
    0 calc(var(--eb-d) * .113) calc(var(--eb-d) * .261) rgba(8,14,5,.6),
    0 0 calc(var(--eb-d) * .522) calc(var(--eb-d) * .087) color-mix(in srgb,var(--bp-ball) 60%,transparent);}

/* reduced motion: no travel, no lift, no breathing — the still looks still read. */
@media (prefers-reduced-motion:reduce){
  .eb-orb{transition:none;}
  .eb-orb:hover{transform:none;}
  .eb-rig[data-glow="halo"] .eb-collar{animation:none;}
}