/* AllFreeTools.app — workshop identity
   Slate ink + safety-yellow accent. System fonts only (zero webfont cost = faster LCP).
   Mobile-first. */

:root{
  --ink:#1a2332;
  --ink-soft:#435063;
  --paper:#fafbfc;
  --card:#ffffff;
  --line:#e3e8ef;
  --accent:#ffc940;
  --accent-ink:#3d2e00;
  --link:#0b5cc3;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:10px;
  --maxw:880px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:1rem;
}

/* Safety-stripe signature divider */
.stripe{
  height:6px;
  background:repeating-linear-gradient(-45deg,var(--accent) 0 12px,var(--ink) 12px 24px);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header */
header.site{background:var(--ink);color:#fff}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;gap:8px}
.logo{font-weight:800;font-size:1.15rem;color:#fff;text-decoration:none;letter-spacing:-.02em}
.logo b{color:var(--accent)}
nav.top a{color:#cdd6e4;text-decoration:none;font-size:.9rem;margin-left:16px}
nav.top a:hover{color:var(--accent)}

/* Spec label — monospace eyebrow */
.spec{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--accent);
  color:var(--accent-ink);
  display:inline-block;
  padding:3px 10px;
  border-radius:4px;
  font-weight:700;
}

h1{font-size:clamp(1.6rem,4.5vw,2.3rem);line-height:1.2;letter-spacing:-.02em;margin:.5em 0 .3em}
h2{font-size:clamp(1.2rem,3vw,1.5rem);letter-spacing:-.01em;margin-top:2em}
h3{font-size:1.05rem}
p.lead{font-size:1.08rem;color:var(--ink-soft);max-width:62ch}
a{color:var(--link)}
main{padding-bottom:48px}

/* Breadcrumb */
.crumbs{font-size:.82rem;color:var(--ink-soft);margin-top:18px;font-family:var(--mono)}
.crumbs a{color:var(--ink-soft)}

/* Tool panel */
.tool{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  margin:24px 0;
  box-shadow:0 1px 3px rgba(26,35,50,.06);
}
.tool label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px}
.tool input[type=text],.tool input[type=number],.tool input[type=url],.tool textarea,.tool select{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--line);
  border-radius:8px;
  font-size:1rem;
  font-family:var(--sans);
  background:#fff;
  color:var(--ink);
}
.tool textarea{font-family:var(--mono);font-size:.9rem;min-height:120px}
.tool input:focus,.tool textarea:focus,.tool select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:140px}
.checks{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.checks label{display:flex;align-items:center;gap:6px;font-weight:500;margin:0;font-size:.92rem}
.checks input{width:17px;height:17px;accent-color:var(--ink)}

button.go{
  background:var(--ink);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:12px 22px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  margin-top:16px;
}
button.go:hover{background:#0e1520}
button.ghost{
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--ink);
  border-radius:8px;
  padding:10px 16px;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  margin-top:16px;
}
button.ghost:hover{border-color:var(--ink)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.output{
  font-family:var(--mono);
  font-size:1.02rem;
  background:var(--ink);
  color:#e8f0ff;
  border-radius:8px;
  padding:14px;
  margin-top:16px;
  word-break:break-all;
  min-height:1.4em;
}
.copied{font-size:.82rem;color:#1a7f37;font-weight:700;margin-left:10px}

/* Strength meter */
.meter{height:8px;background:var(--line);border-radius:4px;margin-top:10px;overflow:hidden}
.meter>span{display:block;height:100%;width:0;border-radius:4px;transition:width .25s}
.m-weak{background:#d64545}
.m-fair{background:#e8912d}
.m-good{background:#b7b32a}
.m-strong{background:#1a7f37}
.meter-label{font-size:.82rem;font-family:var(--mono);color:var(--ink-soft);margin-top:4px}

/* Tool grid (homepage) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:28px 0}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  text-decoration:none;
  color:var(--ink);
  display:block;
  transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card h3{margin:.4em 0 .3em}
.card p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.card .spec{font-size:.65rem}

/* Long-tail preset chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.chips a{
  font-family:var(--mono);
  font-size:.8rem;
  border:1px solid var(--line);
  border-radius:20px;
  padding:5px 12px;
  text-decoration:none;
  color:var(--ink);
  background:#fff;
}
.chips a:hover{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}

/* FAQ */
.faq details{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
  margin:10px 0;
  padding:0;
}
.faq summary{
  padding:14px 16px;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  position:relative;
}
.faq summary::after{content:"+";position:absolute;right:16px;font-family:var(--mono);color:var(--ink-soft)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 16px 14px;color:var(--ink-soft)}

/* Content sections */
.answer{
  border-left:4px solid var(--accent);
  background:var(--card);
  padding:14px 16px;
  border-radius:0 8px 8px 0;
  margin:20px 0;
}
.answer p{margin:0}

table{border-collapse:collapse;width:100%;font-size:.92rem;margin:16px 0}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left}
th{background:var(--ink);color:#fff;font-weight:600}
tr:nth-child(even) td{background:#f3f6fa}

/* Footer */
footer.site{background:var(--ink);color:#cdd6e4;margin-top:48px;font-size:.88rem}
footer.site .wrap{padding-top:28px;padding-bottom:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
footer.site h4{color:#fff;margin:0 0 8px;font-size:.8rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
footer.site a{color:#cdd6e4;text-decoration:none;display:block;padding:3px 0}
footer.site a:hover{color:var(--accent)}
footer.site .fine{grid-column:1/-1;border-top:1px solid #2b3850;padding-top:14px;color:#8a97ab;font-size:.8rem}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media(max-width:520px){
  nav.top a{margin-left:10px;font-size:.82rem}
}