/* =============================================================
   GuardLG — Global Stylesheet
   Design tokens + component styles Tailwind utilities can't
   cleanly express (progress bar, prose, TOC, radar signature).
   ============================================================= */

:root{
  --gl-ink: #111827;
  --gl-blue: #2563eb;
  --gl-blue-dark: #1d4ed8;
  --gl-cyan: #0891b2;
  --gl-gray-bg: #f9fafb;
  --gl-gray-panel: #f3f4f6;
  --gl-border: #e5e7eb;
  --gl-bg: #ffffff;
  --gl-text: #374151;
}

html.dark{
  --gl-ink: #f3f4f6;
  --gl-blue: #60a5fa;
  --gl-blue-dark: #3b82f6;
  --gl-cyan: #22d3ee;
  --gl-gray-bg: #0b1120;
  --gl-gray-panel: #131c2e;
  --gl-border: #263248;
  --gl-bg: #0b1120;
  --gl-text: #cbd5e1;
}

html.dark body{ background-color: var(--gl-bg); color: var(--gl-text); }
html.dark .bg-white{ background-color: #0f172a !important; }
html.dark .bg-slate-50{ background-color: var(--gl-gray-bg) !important; }
html.dark .bg-slate-100{ background-color: var(--gl-gray-panel) !important; }
html.dark .text-slate-900{ color: #f3f4f6 !important; }
html.dark .text-slate-800{ color: #e5e7eb !important; }
html.dark .text-slate-700{ color: #cbd5e1 !important; }
html.dark .text-slate-600{ color: #94a3b8 !important; }
html.dark .border-slate-200{ border-color: #263248 !important; }
html.dark .border-slate-100{ border-color: #263248 !important; }
html.dark header.site-header{ background-color: rgba(11,17,32,0.86) !important; }
html.dark .shadow-card{ box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.55); }

body{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--gl-text);
  background-color: var(--gl-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display{ font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif; }
.font-mono-ui{ font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gl-blue); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 .5rem 0;
}
.skip-link:focus{ left:0; }

#reading-progress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--gl-blue), var(--gl-cyan));
  z-index: 60; transition: width .1s ease-out;
}

#back-to-top{
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  width: 44px; height: 44px; border-radius: 9999px;
  background: var(--gl-ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 25px -8px rgba(17,24,39,.4);
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
#back-to-top:hover{ background: var(--gl-blue); }

/* Signature mark: radar-style pulsing ring inside the hero badge */
.radar-ping{
  animation: radarping 2.6s cubic-bezier(.2,.7,.3,1) infinite;
  transform-origin: center;
}
.radar-ping.delay{ animation-delay: 1.3s; }
@keyframes radarping{
  0%{ transform: scale(0.6); opacity:.9; }
  100%{ transform: scale(1.9); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .radar-ping{ animation: none; opacity:.35; }
  *{ scroll-behavior: auto !important; }
}

.clearance-badge{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid var(--gl-border);
  border-radius: 999px;
  padding: .2rem .65rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

.article-prose{ color: var(--gl-text); line-height:1.8; }
.article-prose h2{ font-size:1.5rem; font-weight:700; color:var(--gl-ink); margin-top:2.5rem; margin-bottom:1rem; scroll-margin-top: 6rem; }
.article-prose h3{ font-size:1.2rem; font-weight:700; color:var(--gl-ink); margin-top:2rem; margin-bottom:.75rem; scroll-margin-top: 6rem; }
.article-prose p{ margin-bottom:1.15rem; }
.article-prose ul, .article-prose ol{ margin: 0 0 1.15rem 1.4rem; }
.article-prose ul{ list-style: disc; }
.article-prose ol{ list-style: decimal; }
.article-prose li{ margin-bottom:.5rem; }
.article-prose a{ color: var(--gl-blue); text-decoration: underline; text-underline-offset: 2px; }
.article-prose blockquote{
  border-left: 3px solid var(--gl-blue);
  background: var(--gl-gray-panel);
  padding: 1rem 1.25rem;
  border-radius: .25rem;
  margin: 1.5rem 0;
  font-style: italic;
}
.article-prose code{ font-family:"IBM Plex Mono", monospace; background:var(--gl-gray-panel); padding:.15rem .4rem; border-radius:.3rem; font-size:.85em; }

.toc-link{ display:block; padding:.3rem 0 .3rem .75rem; border-left: 2px solid transparent; color:#4b5563; font-size:.875rem; }
html.dark .toc-link{ color:#94a3b8; }
.toc-link.active{ border-left-color: var(--gl-blue); color: var(--gl-blue); font-weight:600; }

.reveal{ opacity:0; transform: translateY(14px); animation: reveal .6s ease forwards; }
@keyframes reveal{ to{ opacity:1; transform:none; } }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--gl-blue); outline-offset: 2px;
}

.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Featured image placeholder block used at the top of every article */
.featured-media{
  background: linear-gradient(135deg, var(--gl-gray-panel), var(--gl-bg));
  border: 1px solid var(--gl-border);
}