/* RunLocal shared theme — used by every tool page. Edit here to restyle all of them at once.
   The header/nav bars below are deliberately self-contained (hardcoded colors, not the
   host page's own CSS variables) so they render consistently even on a tool page that
   predates this design system or uses a different palette. */
:root{
  --bg:#0f1720;
  --card:#1a2532;
  --text:#e8edf2;
  --muted:#93a3b3;
  --accent:#4fa8ff;
  --border:#2a3745;
}

.site-header{
  background:#0f1720;
  color:#e8edf2;
  padding:.65rem 1rem;
  display:flex;
  align-items:baseline;
  gap:.6rem;
  flex-wrap:wrap;
}
.site-header__brand{
  font-weight:700;
  font-size:1.05rem;
  color:#e8edf2;
  text-decoration:none;
  letter-spacing:.01em;
}
.site-header__brand:hover{ color:#4fa8ff; }
.site-header__tagline{
  color:#93a3b3;
  font-size:.85rem;
}

/* "100% client-side" privacy badge — injected as the first element inside <main> on
   every tool page (SEO_NOTES item 1: make the local-execution promise the dominant
   on-page element, not an afterthought in a footer paragraph). */
.privacy-badge{
  background:rgba(79,168,255,.1);
  border:1px solid rgba(79,168,255,.35);
  color:#e8edf2;
  border-radius:10px;
  padding:.7rem 1rem;
  font-size:.88rem;
  font-weight:600;
  margin-bottom:1.2rem;
  line-height:1.4;
}

/* Tool-cluster cross-link box (SEO_NOTES item 6) — shown only on pages whose
   tools.json entry has a `cluster`, linking to the other tools sharing it. */
.cluster-nav{
  background:#1a2532;
  border:1px solid #2a3745;
  border-radius:10px;
  padding:.7rem 1rem;
  font-size:.85rem;
  color:#93a3b3;
  margin-bottom:1.2rem;
  line-height:1.6;
}
.cluster-nav strong{ color:#e8edf2; }
.cluster-nav a{ color:#4fa8ff; text-decoration:none; }
.cluster-nav a:hover{ text-decoration:underline; }

/* Troubleshooting FAQ accordions (SEO_NOTES item 2) — plain <details>/<summary>,
   no JS required, used inside a page's own .card elements. */
.faq details{
  border:1px solid #2a3745;
  border-radius:8px;
  padding:.15rem .9rem;
  margin-bottom:.5rem;
  background:#0f1720;
}
.faq summary{
  cursor:pointer;
  padding:.6rem 0;
  font-weight:600;
  font-size:.9rem;
  color:#e8edf2;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"+ "; color:#4fa8ff; }
.faq details[open] summary::before{ content:"\2212 "; }
.faq details p{
  color:#93a3b3;
  font-size:.85rem;
  line-height:1.55;
  margin:0 0 .8rem;
}
.faq details code{
  background:#1a2532;
  border:1px solid #2a3745;
  border-radius:4px;
  padding:.1rem .35rem;
  font-size:.82rem;
}
.cli-block{
  background:#0d151d;
  border:1px solid #2a3745;
  border-radius:8px;
  padding:.8rem 1rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;
  color:#c7d3de;
  overflow-x:auto;
  white-space:pre;
  margin:.5rem 0;
}

nav.more-tools{
  background:#0f1720;
  padding:1.5rem 1rem 2rem;
  margin-top:2rem;
}
nav.more-tools > h2, nav.more-tools > ul{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}
nav.more-tools h2{
  font-size:.95rem;
  color:#93a3b3;
  font-weight:600;
  margin:0 auto .8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
nav.more-tools ul{
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.7rem;
}
nav.more-tools li{
  background:#1a2532;
  border:1px solid #2a3745;
  border-radius:10px;
  padding:.8rem .9rem;
}
nav.more-tools a{
  color:#e8edf2;
  text-decoration:none;
  font-weight:600;
  font-size:.92rem;
}
nav.more-tools a:hover{ color:#4fa8ff; }
nav.more-tools p{
  margin:.3rem 0 0;
  color:#93a3b3;
  font-size:.8rem;
  line-height:1.4;
}

/* Ad-block-detected donation nudge (SEO_NOTES item 8) — dormant until site.js's
   DONATION_LINKS is configured; styling lives here regardless so it's ready. */
.donation-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  background:#1a2532;
  color:#e8edf2;
  border-top:1px solid #2a3745;
  padding:.85rem 1rem;
  font-size:.85rem;
  z-index:999998;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.donation-banner a{ color:#4fa8ff; text-decoration:none; font-weight:600; }
.donation-banner a:hover{ text-decoration:underline; }
.donation-banner button{
  background:transparent;
  border:1px solid #2a3745;
  color:#93a3b3;
  border-radius:6px;
  width:1.8rem;
  height:1.8rem;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  flex-shrink:0;
}