/* ============================================================
   QuickDevKit — shared styles
   Visual identity: dark "code editor" surface, monospace-forward,
   indigo-violet accent. Deliberately distinct from any light SaaS look.
   ============================================================ */

:root{
  --bg:#0f1115;
  --bg-2:#0b0d11;
  --surface:#161922;
  --surface-2:#1b1f2b;
  --surface-3:#222637;
  --border:#272c3a;
  --border-2:#333a4d;

  --text:#e7e9f0;
  --text-2:#9aa3b6;
  --text-3:#646d82;

  --accent:#8a7bff;          /* indigo-violet — NOT the blue FitCalcTools uses */
  --accent-soft:#1e1b3a;
  --accent-line:#5a4fd6;
  --teal:#2dd4bf;            /* output / success */
  --teal-soft:#0f2b2a;
  --amber:#f5b14c;
  --amber-soft:#2e2410;
  --red:#ff7a7a;
  --red-soft:#2e1518;
  --green:#4ade80;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Space Grotesk',var(--font);
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;

  --radius:14px;
  --radius-sm:9px;
  --radius-xs:6px;
  --maxw:1080px;
  --readw:720px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 500px at 80% -10%, #181433 0%, transparent 60%),
    radial-gradient(700px 400px at -10% 0%, #10202a 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
::selection{background:var(--accent-line);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- NAV (rendered by nav.js) ---------- */
.nav{position:sticky;top:0;z-index:200;background:rgba(11,13,17,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.nav__logo{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:-.2px;color:var(--text);white-space:nowrap}
.nav__logo b{color:var(--accent);font-weight:700}
.nav__logo .blink{color:var(--accent);animation:blink 1.2s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.nav__groups{display:flex;align-items:center;gap:2px}
.nav__item{position:relative;flex-shrink:0}
.nav__cat-btn{display:flex;align-items:center;gap:5px;font-family:var(--font);font-size:13px;color:var(--text-2);background:none;border:none;padding:8px 11px;border-radius:var(--radius-xs);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.nav__cat-btn .car{font-size:9px;color:var(--text-3);transition:transform .15s}
.nav__item:hover .nav__cat-btn,.nav__item:focus-within .nav__cat-btn{background:var(--surface-2);color:var(--text)}
.nav__item:hover .car,.nav__item:focus-within .car{transform:rotate(180deg)}
.nav__cat-btn.active{color:var(--accent)}
.nav__dropdown{position:absolute;top:100%;left:0;min-width:184px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:6px;box-shadow:0 18px 44px -18px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s,transform .14s,visibility .14s;z-index:300}
.nav__dropdown::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.nav__item:hover .nav__dropdown,.nav__item:focus-within .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav__dropdown a{display:block;font-size:13px;color:var(--text-2);padding:7px 11px;border-radius:var(--radius-xs);white-space:nowrap;transition:background .15s,color .15s}
.nav__dropdown a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.nav__dropdown a.active{background:var(--accent-soft);color:var(--accent)}
.nav__link{font-size:13px;color:var(--text-2);padding:8px 11px;border-radius:var(--radius-xs);white-space:nowrap;transition:background .15s,color .15s}
.nav__link:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.nav__link.active{background:var(--accent-soft);color:var(--accent)}
.nav__sep{width:1px;height:16px;background:var(--border-2);flex-shrink:0;margin:0 4px}
.nav__burger{display:none;background:none;border:1px solid var(--border-2);border-radius:var(--radius-xs);padding:7px 9px;cursor:pointer;flex-direction:column;gap:4px}
.nav__burger span{width:18px;height:2px;background:var(--text-2);border-radius:2px}
.nav__mobile{display:none;border-top:1px solid var(--border);background:var(--bg-2);padding:14px 22px 18px}
.nav__mobile.open{display:block}
.nav__mobile .mg{margin-bottom:12px}
.nav__mobile .mc{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--text-3);text-transform:uppercase;margin-bottom:6px}
.nav__mobile .ml{display:flex;flex-wrap:wrap;gap:6px}
.nav__mobile .ml a{font-size:13px;color:var(--text-2);padding:6px 11px;border:1px solid var(--border);border-radius:var(--radius-xs)}
.nav__mobile .ml a.active{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
@media(max-width:860px){.nav__groups{display:none}.nav__burger{display:flex}}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.hero{max-width:var(--maxw);margin:0 auto;padding:46px 22px 22px}
.eyebrow{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.04em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent-line)}
.hero h1{font-family:var(--display);font-size:clamp(30px,4.4vw,46px);font-weight:600;letter-spacing:-1px;line-height:1.05}
.hero p{color:var(--text-2);font-size:17px;max-width:620px;margin-top:14px}

/* ---------- TOOL "WINDOW" (signature element) ---------- */
.tool{max-width:var(--maxw);margin:24px auto 0;padding:0 22px}
.win{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.win__bar{display:flex;align-items:center;gap:10px;padding:0 14px;height:40px;background:var(--bg-2);border-bottom:1px solid var(--border)}
.win__dot{width:9px;height:9px;border-radius:50%;background:var(--border-2)}
.win__dot.on{background:var(--teal)}
.win__path{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-left:4px}
.win__path b{color:var(--text-2);font-weight:500}
.win__bar .spacer{flex:1}
.win__bar .tag{font-family:var(--mono);font-size:11px;color:var(--text-3);border:1px solid var(--border);border-radius:5px;padding:2px 8px}
.win__body{padding:0}

/* form controls */
.field{display:flex;flex-direction:column}
.field-row{display:grid;gap:1px;background:var(--border)}
@media(min-width:760px){.field-row.two{grid-template-columns:1fr 1fr}}
.pane{background:var(--surface);display:flex;flex-direction:column;min-width:0}
.pane__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
.pane__label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.pane__status{font-family:var(--mono);font-size:11px;color:var(--text-3)}
textarea,input[type=text],input[type=number],select{
  width:100%;background:transparent;border:none;outline:none;color:var(--text);
  font-family:var(--mono);font-size:14px;line-height:1.75;resize:vertical;padding:16px;
}
textarea::placeholder,input::placeholder{color:var(--text-3)}
textarea{min-height:230px}
.input-line{padding:14px 16px}
.input-line input{padding:0;font-size:15px}
select{appearance:none;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font)}
.code-out{font-family:var(--mono);font-size:14px;line-height:1.75;padding:16px;white-space:pre-wrap;word-break:break-word;min-height:160px;color:var(--text)}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid var(--border);background:var(--bg-2)}
.toolbar .spacer{flex:1}

/* buttons */
.btn{font-family:var(--font);font-size:13px;font-weight:500;padding:8px 15px;border-radius:var(--radius-sm);border:1px solid var(--border-2);background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:all .15s;white-space:nowrap}
.btn:hover{border-color:var(--accent-line);color:var(--text)}
.btn-primary{background:linear-gradient(180deg,#9387ff,#7c6cff);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 6px 18px -8px var(--accent-line)}
.btn-primary:hover{filter:brightness(1.07);color:#fff}
.btn-xs{font-size:12px;padding:5px 11px;border-radius:var(--radius-xs)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-3)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text-2)}
.tabs{display:flex;gap:4px;padding:4px;background:var(--bg-2);border-radius:var(--radius-sm);width:fit-content}
.tab{font-family:var(--mono);font-size:12.5px;padding:6px 14px;border-radius:var(--radius-xs);border:none;background:transparent;color:var(--text-3);cursor:pointer}
.tab.active{background:var(--surface-3);color:var(--accent)}
.chip{font-family:var(--mono);font-size:12px;padding:6px 11px;border-radius:var(--radius-xs);border:1px solid var(--border-2);background:var(--surface-2);color:var(--text-3);cursor:pointer;user-select:none}
.chip.active{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.switch{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);cursor:pointer}
.switch input{width:auto;accent-color:var(--accent)}

/* stats grid */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--border);border-top:1px solid var(--border)}
.stat{background:var(--surface);padding:18px 14px;text-align:center}
.stat__n{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--text);letter-spacing:-.5px}
.stat__l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-top:3px}

/* result cards under a tool */
.cards{max-width:var(--maxw);margin:16px auto 0;padding:0 22px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.card h3{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.kv{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;padding:6px 0;border-bottom:1px solid var(--border)}
.kv:last-child{border:none}
.kv .k{color:var(--text-2)}
.kv .v{color:var(--accent)}
.big{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--text)}
.sub{font-size:12px;color:var(--text-3)}

/* error / notice */
.notice{margin:12px 14px;padding:11px 14px;border-radius:var(--radius-sm);font-family:var(--mono);font-size:13px;display:none}
.notice.err{display:block;background:var(--red-soft);border:1px solid #4a2329;color:var(--red)}
.notice.ok{display:block;background:var(--teal-soft);border:1px solid #15403d;color:var(--teal)}
.status-ok{color:var(--teal)}
.status-err{color:var(--red)}

/* syntax highlight (json) */
.j-key{color:#a78bff}.j-str{color:#5ee0c8}.j-num{color:#f5b14c}.j-bool{color:#ff9d6b}.j-null{color:var(--text-3)}

/* regex / diff highlight */
mark.match-highlight{background:var(--accent-line);color:#fff;border-radius:3px;padding:0 1px}
.diff-line{font-family:var(--mono);font-size:13px;padding:2px 14px;display:flex;gap:10px;white-space:pre-wrap;word-break:break-word}
.diff-line.added{background:var(--teal-soft);color:#9af0e2}
.diff-line.removed{background:var(--red-soft);color:#ffb3b3}
.diff-line.same{color:var(--text-3)}
.diff-marker{color:var(--text-3);flex-shrink:0}
.badge{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:5px;margin-right:6px}
.badge-add{background:var(--teal-soft);color:var(--teal)}
.badge-del{background:var(--red-soft);color:var(--red)}
.badge-chg{background:var(--amber-soft);color:var(--amber)}
.badge-same{background:var(--surface-3);color:var(--text-2)}

/* limit bars (character counter) */
.limit{padding:12px 14px;border-bottom:1px solid var(--border)}
.limit:last-child{border:none}
.limit__top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;margin-bottom:6px}
.limit__track{height:6px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.limit__bar{height:100%;border-radius:99px;transition:width .2s}
.bar-ok{background:var(--teal)}.bar-warn{background:var(--amber)}.bar-over{background:var(--red)}

/* freq bars */
.freq{list-style:none}
.freq li{display:grid;grid-template-columns:24px 1fr 44px;align-items:center;gap:10px;padding:5px 0}
.freq .fc{font-family:var(--mono);color:var(--text)}
.freq .ft{height:7px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.freq .fb{height:100%;background:var(--accent)}
.freq .fn{font-family:var(--mono);font-size:12px;color:var(--text-3);text-align:right}

/* ---------- READING CONTENT (tool explainer + articles) ---------- */
.doc{max-width:var(--readw);margin:0 auto;padding:18px 22px 40px}
.doc .sec-label{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.04em;margin:40px 0 10px;display:flex;align-items:center;gap:8px}
.doc .sec-label::before{content:"//";color:var(--text-3)}
.doc h2{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-.4px;margin:6px 0 12px}
.doc h3{font-size:17px;font-weight:600;margin:22px 0 8px;color:var(--text)}
.doc p{color:var(--text-2);margin-bottom:15px}
.doc ul,.doc ol{color:var(--text-2);margin:0 0 16px 22px}
.doc li{margin-bottom:7px}
.doc strong{color:var(--text);font-weight:600}
.doc a{text-decoration:underline;text-underline-offset:2px}
.doc code{font-family:var(--mono);font-size:13px;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1.5px 6px;color:#c7c1ff}
.doc pre{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;margin:0 0 18px;overflow-x:auto}
.doc pre code{background:none;border:none;padding:0;color:var(--text);font-size:13px;line-height:1.7}

/* tables (cheatsheets / comparisons) */
.table-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--border);border-radius:var(--radius-sm)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);background:var(--bg-2)}
td{color:var(--text-2)}
td code{font-family:var(--mono);color:#c7c1ff;font-size:12.5px}
tr:last-child td{border-bottom:none}

/* "gotcha" callout — a signature recurring section */
.gotcha{border-left:2px solid var(--amber);background:var(--amber-soft);padding:12px 16px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:0 0 14px}
.gotcha b{color:var(--amber)}
.gotcha p{margin:0;color:#e9d9b8}

/* faq */
.faq{margin-top:8px}
.faq details{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;background:var(--surface)}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:500;font-size:15px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-family:var(--mono)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 16px 15px;color:var(--text-2);margin:0;font-size:14.5px}

/* related */
.related{max-width:var(--readw);margin:0 auto;padding:8px 22px 50px}
.related .sec-label{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:14px}
.related .sec-label::before{content:"//";color:var(--text-3);margin-right:8px}
.rgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rcard{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px 17px;transition:border-color .15s,transform .15s}
.rcard:hover{border-color:var(--accent-line);transform:translateY(-1px);text-decoration:none}
.rcard .rn{font-family:var(--mono);font-size:14px;color:var(--text);font-weight:500}
.rcard .rd{font-size:12.5px;color:var(--text-3);margin-top:4px}

/* article hero */
.art-hero{max-width:var(--readw);margin:0 auto;padding:46px 22px 6px}
.art-hero .kicker{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.04em}
.art-hero h1{font-family:var(--display);font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-.8px;line-height:1.1;margin:12px 0 10px}
.art-hero .meta{font-size:13px;color:var(--text-3);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.byline{display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.byline .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--teal));flex-shrink:0}
.byline .bn{font-size:13.5px;color:var(--text);font-weight:500}
.byline .br{font-size:12px;color:var(--text-3)}

/* footer */
footer{border-top:1px solid var(--border);background:var(--bg-2);margin-top:30px}
.foot{max-width:var(--maxw);margin:0 auto;padding:30px 22px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start}
.foot__brand{font-family:var(--mono);font-size:14px;color:var(--text-2)}
.foot__brand b{color:var(--accent)}
.foot__brand p{font-size:12.5px;color:var(--text-3);margin-top:6px;max-width:340px}
.foot__links{display:flex;gap:20px;flex-wrap:wrap}
.foot__col h4{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.foot__col a{display:block;font-size:13px;color:var(--text-2);padding:3px 0}
.foot__col a:hover{color:var(--accent)}
.foot__legal{max-width:var(--maxw);margin:0 auto;padding:14px 22px 26px;border-top:1px solid var(--border);font-size:12px;color:var(--text-3)}
.foot__legal a{color:var(--text-3);text-decoration:underline}

@media(max-width:600px){
  .hero{padding:34px 18px 16px}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}