/* abra.css — AbraCalc tool design system. Loaded by every tool. v1 */
:root{
  --teal:#0FB5A6; --teal-d:#0a8f83; --teal-l:#e2f5f3;
  --ink:#1a2b32; --muted:#5c7079; --bg:#f6f9f9; --card:#fff;
  --line:#e3ecec; --amber:#e0a53b; --warn:#e07a4b; --good:#2fae5f;
  --r:16px; --shadow:0 1px 3px rgba(26,43,50,.06),0 4px 14px rgba(26,43,50,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}

/* ---------- layout ---------- */
.abra-header{text-align:center;padding:22px 20px 6px}
.abra-header h1{margin:0 0 4px;font-size:1.5rem;letter-spacing:-.01em}
.abra-header p{margin:0;color:var(--muted);font-size:.95rem}
.abra-stage{max-width:720px;margin:14px auto 44px;background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:26px 24px;box-shadow:var(--shadow)}
.abra-wide{max-width:960px}
.abra-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0}
.abra-center{text-align:center}

/* ---------- buttons: full interaction grammar ---------- */
.abra-btn{position:relative;overflow:hidden;font-family:inherit;cursor:pointer;
  border-radius:12px;font-size:1rem;font-weight:600;padding:13px 28px;border:none;
  background:var(--teal);color:#fff;
  transition:transform .08s ease,box-shadow .15s ease,background .15s ease;
  box-shadow:0 2px 0 var(--teal-d);
  -webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation}
.abra-btn:hover{background:#10c2b2;box-shadow:0 3px 0 var(--teal-d);transform:translateY(-1px)}
.abra-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--teal-d)}
.abra-btn:focus-visible{outline:3px solid var(--teal-l);outline-offset:2px}
.abra-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 2px 0 var(--teal-d)}
.abra-btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 0 var(--line)}
.abra-btn.ghost:hover{border-color:var(--teal);color:var(--teal-d);background:var(--card)}
.abra-btn.big{font-size:1.25rem;padding:18px 40px;border-radius:16px}
.abra-btn.danger{background:var(--warn);box-shadow:0 2px 0 #b95a30}
/* ripple element injected by abra.js */
.abra-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);
  transform:scale(0);animation:abra-rip .5s ease-out forwards;pointer-events:none}
@keyframes abra-rip{to{transform:scale(3);opacity:0}}

/* ---------- inputs ---------- */
.abra-input,.abra-select,textarea.abra-input{border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:.95rem;background:var(--card);color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
.abra-input:focus,.abra-select:focus,textarea.abra-input:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-l)}
textarea.abra-input{width:100%;min-height:130px;resize:vertical}
.abra-label{font-size:.9rem;color:var(--muted)}
.abra-toggle{display:inline-flex;gap:7px;align-items:center;font-size:.9rem;color:var(--muted);
  cursor:pointer;user-select:none}
.abra-toggle input{accent-color:var(--teal);width:17px;height:17px}

/* ---------- feedback surfaces ---------- */
.abra-result{font-size:2rem;font-weight:700;color:var(--teal-d);text-align:center;
  min-height:2.6rem;font-variant-numeric:tabular-nums}
.abra-result.pop{animation:abra-pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes abra-pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.abra-chip{display:inline-block;background:var(--teal-l);border:1px solid var(--line);
  border-radius:8px;padding:4px 10px;margin:2px;font-size:.88rem;
  transition:transform .12s,background .12s;cursor:default}
.abra-chip.hl{background:var(--teal);color:#fff;transform:scale(1.08)}
.abra-chip.dim{opacity:.35;text-decoration:line-through}
.abra-shake{animation:abra-shake .3s}
@keyframes abra-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---------- tabs ---------- */
.abra-tabs{display:flex;gap:8px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.abra-tab{padding:9px 18px;border:1px solid var(--line);background:var(--card);border-radius:999px;
  cursor:pointer;color:var(--muted);font-size:.92rem;transition:.15s;user-select:none}
.abra-tab:hover{border-color:var(--teal)}
.abra-tab.on{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ---------- fullscreen stage ---------- */
.abra-fs{position:fixed;inset:0;background:var(--teal);color:#fff;display:none;
  flex-direction:column;align-items:center;justify-content:center;z-index:99;text-align:center}
.abra-fs.show{display:flex}
.abra-fs .abra-fs-close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.16);
  color:#fff;border:none;box-shadow:none}
.abra-fs.warn{background:var(--warn)}.abra-fs.done{background:var(--good)}

/* ---------- score columns ---------- */
.abra-scores{display:grid;grid-auto-flow:column;gap:14px;justify-content:center}
.abra-scorecol{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;text-align:center;min-width:130px;position:relative}
.abra-scorecol.lead::after{content:'👑';position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:1.3rem}
.abra-scorecol b{display:block;font-size:2.6rem;font-variant-numeric:tabular-nums;color:var(--teal-d)}
.abra-scorecol .abra-btn{padding:8px 16px;margin:3px}

/* motion-reduced users */
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}