/* Velrix tools — shared shell.
   Extracted from earn-as-a-student.html so each tool page does not duplicate
   ~90 lines of chrome. Link this BEFORE a page's own <style> so page-specific
   rules can still win. */

:root{
  --bg:#05030a; --bg2:#0a0614;
  --a:#8b5cf6; --a2:#d946ef; --a3:#6366f1; --a-txt:#a78bfa;
  --text:rgba(255,255,255,.95); --muted:rgba(255,255,255,.72);
  /* .42 measured 3.99:1 on --bg, below the 4.5:1 WCAG AA floor for the
     small (.7rem) footer/note text that uses it. index.html already
     overrode this to .68 locally; raising the shared value to match keeps
     the whole site consistent and clears AA. */
  --dim:rgba(255,255,255,.5); --dim-txt:rgba(255,255,255,.68);
  --gb:rgba(255,255,255,.09); --card:rgba(255,255,255,.032);
  --fh:'Cormorant Garamond',serif; --fb:'Inter',sans-serif; --fm:'JetBrains Mono',monospace;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--fb); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 10%, rgba(217,70,239,.07), transparent 60%);
}
.wrap{max-width:920px; margin:0 auto; padding:0 22px; position:relative; z-index:1}
.wide{max-width:1140px; margin:0 auto; padding:0 22px; position:relative; z-index:1}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(5,3,10,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-in{max-width:1140px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{
  font-family:var(--fm); font-size:.82rem; letter-spacing:.22em; font-weight:500;
  color:#fff; text-decoration:none; white-space:nowrap;
}
.brand span{color:var(--a-txt)}
.nav-links{display:flex; align-items:center; gap:20px}
.nav-links a{
  font-family:var(--fm); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; transition:color .25s;
}
.nav-links a:hover{color:#fff}
.nav-links a.here{color:var(--a-txt)}
@media(max-width:720px){.nav-links{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border:0; border-radius:100px; cursor:pointer;
  font-family:var(--fm); font-size:.82rem; font-weight:600; letter-spacing:.06em;
  color:#fff; text-decoration:none; background:linear-gradient(135deg,var(--a3),var(--a));
  box-shadow:0 8px 28px rgba(99,102,241,.34);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, opacity .3s;
  min-height:46px;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(99,102,241,.5)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.btn-ghost{
  background:transparent; border:1px solid var(--gb); box-shadow:none; color:var(--text);
}
.btn-ghost:hover{background:rgba(255,255,255,.05); box-shadow:none}
.btn-wa{
  background:linear-gradient(135deg,#25D366,#128C7E);
  box-shadow:0 8px 28px rgba(37,211,102,.3);
}
.btn-wa:hover{box-shadow:0 14px 40px rgba(37,211,102,.45)}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(135deg, rgba(14,11,26,.72), rgba(8,6,16,.86));
  border:1px solid rgba(255,255,255,.065); border-radius:20px; padding:26px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

/* ---------- headings ---------- */
.eyebrow{
  font-family:var(--fm); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--a-txt); margin:0 0 12px;
}
h1{font-family:var(--fh); font-weight:600; font-size:clamp(2.1rem,5.4vw,3.4rem); line-height:1.08; margin:0 0 16px; letter-spacing:-.01em}
h2{font-family:var(--fh); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.1rem); margin:0 0 14px}
.lead{font-size:clamp(.94rem,1.5vw,1.06rem); color:var(--muted); line-height:1.78; margin:0}
.ac{color:var(--a-txt)}

/* ---------- misc ---------- */
.note{
  font-family:var(--fm); font-size:.7rem; color:var(--dim-txt);
  line-height:1.65; letter-spacing:.02em;
}
footer{
  border-top:1px solid rgba(255,255,255,.06); margin-top:76px; padding:30px 0 44px;
  position:relative; z-index:1;
}
.flinks{display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:0 0 14px; padding:0}
.flinks a{font-family:var(--fm); font-size:.7rem; color:var(--dim); text-decoration:none; letter-spacing:.05em}
.flinks a:hover{color:var(--a-txt)}

/* ---------- phones ----------
   Measured at 360/390/412px: the nav and footer links were 14px tall, which is
   below the WCAG 2.5.8 minimum of 24px and genuinely hard to hit with a thumb.
   The smallest captions were also 9.3px, which is unreadable on a phone.
   Both are fixed here so every tool page inherits it. Desktop is untouched. */
@media(pointer:coarse){
  .brand,
  .nav-links a,
  .flinks a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .nav-links{gap:4px}
  .nav-links a{padding:0 10px}
  .flinks{gap:0 16px}
  .flinks a{padding:0 2px}

  /* Raise the smallest type to a readable floor. !important is required: each
     page carries its own <style> AFTER this link, so on equal specificity the
     page rule wins and 9.3px badges survive without it. */
  .note, .pill, .tag, .chip .tag, .vx-ring-lbl, .price .lbl,
  .stat span, .fb em, .overall span, .sc span, .xp-num, .turn-count{
    font-size:max(10px, .7rem) !important;
  }
  /* links sitting inside prose: give them a comfortable hit box */
  .how-grid .card p a, .note a{padding:6px 2px; display:inline-block}
}

/* WCAG 2.5.8 (AA) floor: nothing tappable smaller than 24x24, at any width. */
.btn, .chip, .mic, .scen, .line, .tool .btn{min-height:44px}
.node .kill{min-width:32px; min-height:32px}