/* Eddies UI — the one design layer shared by the site (web/index.html), the Studio (web/studio.html) and both editors.
   Tokens (type, spacing, radii, hairlines, shadows, motion), focus rings, toasts and the confirm dialog.
   Palette only: plum #513878, accent #72568E, ink #2A1F33, cream #FEFCF9, lavender #F7F0FF / #EDE3F7. */
:root{
  /* colour */
  --e-plum:#513878; --e-plum-hi:#5D4386; --e-plum-lo:#46306A; --e-acc:#72568E; --e-acc-2:#A88BCB;
  --e-ink:#2A1F33; --e-ink-2:#4A3F55; --e-muted:#6E6578; --e-faint:#A39BAD;
  --e-cream:#FEFCF9; --e-paper:#FFFFFF; --e-lav:#F7F0FF; --e-lav-2:#EDE3F7; --e-acc-soft:#F3EDF9;
  --e-hair:rgba(42,31,51,.08); --e-hair-2:rgba(42,31,51,.13); --e-wash:rgba(42,31,51,.04);
  --e-ok:#2E8C76; --e-err:#B4434F;
  /* dark media area (both editors): greys tuned to the plum */
  --e-d0:#0F0D12; --e-d1:#17141C; --e-d2:#1E1A24; --e-d3:#29242F; --e-d4:#352F3C; --e-dline:#2A2531;
  --e-dt:#F1EEF5; --e-dm:#9A93A4; --e-dd:#625B6B;
  /* type: Unbounded ("H") only for display, Onest ("I") for everything else */
  --e-display:"H","Unbounded",system-ui,sans-serif; --e-text:"I","Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --e-fs-cap:12px; --e-fs-s:13px; --e-fs-m:14px; --e-fs-b:15px; --e-fs-l:17px; --e-fs-xl:20px;
  --e-fs-h3:clamp(20px,1.6vw,24px); --e-fs-h2:clamp(28px,3.2vw,44px); --e-fs-h1:clamp(36px,5.6vw,76px);
  /* space: 4-pt scale */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-8:32px; --e-10:40px; --e-12:48px; --e-16:64px; --e-24:96px;
  /* radii */
  --e-r-xs:6px; --e-r-s:10px; --e-r-m:14px; --e-r-l:20px; --e-r-xl:28px; --e-r-pill:999px;
  /* shadows: one hairline + soft layered lift, three heights */
  --e-sh-0:0 0 0 1px var(--e-hair);
  --e-sh-1:0 0 0 1px var(--e-hair),0 1px 2px rgba(42,31,51,.04);
  --e-sh-2:0 0 0 1px var(--e-hair),0 1px 2px rgba(42,31,51,.04),0 10px 28px -14px rgba(42,31,51,.16);
  --e-sh-3:0 0 0 1px var(--e-hair),0 2px 6px rgba(42,31,51,.04),0 28px 56px -28px rgba(42,31,51,.28);
  /* motion */
  --e-ease:cubic-bezier(.32,.72,0,1); --e-ease-out:cubic-bezier(.2,.8,.2,1); --e-t-fast:.16s; --e-t:.28s; --e-t-slow:.5s;
  --e-ring:0 0 0 3px rgba(114,86,142,.26);
}

/* tabular numbers wherever numbers line up */
.e-num,time,output,[data-num]{font-variant-numeric:tabular-nums}

/* ---------- toasts: a small stack at the bottom, spring in, fade out ---------- */
.e-toasts{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2147483000;display:grid;gap:8px;justify-items:center;
  pointer-events:none;width:min(520px,calc(100vw - 32px))}
.e-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:100%;padding:11px 16px 11px 14px;border-radius:var(--e-r-m);
  background:rgba(42,31,51,.94);color:#fff;font:500 14px/1.4 var(--e-text);letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 18px 40px -18px rgba(42,31,51,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  animation:eToastIn var(--e-t-slow) var(--e-ease) both}
.e-toast.out{animation:eToastOut .22s var(--e-ease-out) both}
.e-toast i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14)}
.e-toast i svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.e-toast.ok i{background:var(--e-ok)}
.e-toast.err i{background:var(--e-err)}
.e-toast span{min-width:0;overflow-wrap:anywhere}
@keyframes eToastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes eToastOut{to{opacity:0;transform:translateY(6px) scale(.98)}}

/* ---------- confirm dialog (replaces the browser's confirm()) ---------- */
.e-dlg{position:fixed;inset:0;z-index:2147482000;display:grid;place-items:center;padding:16px;background:rgba(42,31,51,.32);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:eFade var(--e-t) var(--e-ease-out) both}
.e-dlg.out{animation:eFadeOut .18s var(--e-ease-out) both}
.e-dlg-card{width:min(420px,100%);padding:24px 24px 20px;border-radius:var(--e-r-l);background:var(--e-paper);color:var(--e-ink);
  box-shadow:0 0 0 1px var(--e-hair),0 40px 80px -32px rgba(42,31,51,.45);animation:eRise var(--e-t-slow) var(--e-ease) both;text-align:left}
.e-dlg h2{margin:0 0 8px!important;font:500 19px/1.25 var(--e-display)!important;letter-spacing:-.02em!important;color:var(--e-ink)!important;text-transform:none!important}
.e-dlg p{margin:0!important;font:400 14.5px/1.5 var(--e-text)!important;color:var(--e-muted)!important;max-width:none!important}
.e-dlg .e-btn{border:0!important;min-width:0}
.e-dlg .e-btn.ghost{box-shadow:inset 0 0 0 1px var(--e-hair-2)}
.e-dlg-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.e-dlg{grid-template-columns:minmax(0,1fr)}  /* long button labels never push the card past a phone's edge */
@media (max-width:480px){.e-dlg-foot{flex-direction:column-reverse;align-items:stretch}.e-dlg-foot .e-btn{width:100%;justify-content:center}}
@keyframes eFade{from{opacity:0}}
@keyframes eFadeOut{to{opacity:0}}
@keyframes eRise{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- the one button system: primary (plum), secondary (hairline), ghost; plus danger ---------- */
.e-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:var(--e-r-pill);
  font:600 14px/1 var(--e-text);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background var(--e-t-fast) var(--e-ease-out),box-shadow var(--e-t-fast) var(--e-ease-out),transform var(--e-t) var(--e-ease),color var(--e-t-fast)}
.e-btn:active{transform:scale(.97)}
.e-btn:disabled{opacity:.45;cursor:default;transform:none}
.e-btn.primary{background:var(--e-plum);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(42,31,51,.18)}
.e-btn.primary:hover:not(:disabled){background:var(--e-plum-hi)}
.e-btn.secondary{background:var(--e-paper);color:var(--e-ink);box-shadow:inset 0 0 0 1px var(--e-hair-2)}
.e-btn.secondary:hover:not(:disabled){background:var(--e-lav)}
.e-btn.ghost{background:none;color:var(--e-ink-2)}
.e-btn.ghost:hover:not(:disabled){background:var(--e-wash);color:var(--e-ink)}
.e-btn.danger{background:var(--e-err);color:#fff}
.e-btn.danger:hover:not(:disabled){filter:brightness(1.06)}
.e-btn:focus-visible{outline:0;box-shadow:var(--e-ring)}

/* ---------- skeleton shimmer ---------- */
.e-skel{position:relative;overflow:hidden;background:var(--e-wash);border-radius:var(--e-r-s)}
.e-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:eShimmer 1.4s var(--e-ease-out) infinite}
@keyframes eShimmer{to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  .e-toast,.e-toast.out,.e-dlg,.e-dlg.out,.e-dlg-card{animation-duration:.01ms!important}
  .e-skel::after{animation:none}
  .e-btn:active{transform:none}
}