:root {
  --bg: #060a06;
  --bg-panel: #0a0f0a;
  --fg: #b6d8b6;
  --muted: #6f9a6f;
  --border: #16351a;
  --border-bright: #1f5a27;
  --green: #00ff41;
  --green-dim: #33c94a;
  --green-soft: rgba(0, 255, 65, 0.10);
  --code-bg: #0c140c;
  --maxw: 46rem;
  --mono: "JetBrains Mono", "Fira Code", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(0, 255, 65, 0.06), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(0, 255, 65, 0.04), transparent 55%);
  background-attachment: fixed;
  color: var(--fg);
  font: 16px/1.7 var(--sans);
}
/* CRT-scanlines, mycket svaga så texten förblir läsbar */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0, 255, 65, 0.035) 0, rgba(0, 255, 65, 0.035) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode: screen;
}
.layout, .skip-link { position: relative; z-index: 1; }
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--green); color: #041004; padding: .5rem 1rem; z-index: 10;
  font-family: var(--mono); font-weight: 700;
}
.skip-link:focus { left: 0; }
.layout { display: flex; align-items: flex-start; min-height: 100vh; }
.sidebar {
  flex: 0 0 17rem;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-bright);
  box-shadow: 1px 0 12px rgba(0, 255, 65, 0.08);
  padding: 1.5rem 1.25rem;
}
.site-title {
  display: block; font-family: var(--mono); font-weight: 700; font-size: 1.1rem;
  color: var(--green); text-decoration: none; margin-bottom: 1.5rem;
  line-height: 1.35; letter-spacing: .02em;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.55);
}
.site-title::after {
  content: "_"; animation: blink 1.1s step-end infinite; margin-left: .1em;
}
@keyframes blink { 50% { opacity: 0; } }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-item a {
  display: block; padding: .35rem .5rem .35rem 1.1rem; border-radius: 4px;
  color: var(--fg); text-decoration: none; font-size: .9rem;
  font-family: var(--mono); position: relative;
}
.nav-item a::before {
  content: ">"; position: absolute; left: .35rem; color: var(--green);
  opacity: 0; transition: opacity .12s;
}
.nav-item a:hover { background: var(--green-soft); color: var(--green); }
.nav-item a:hover::before { opacity: 1; }
.nav-item a.active {
  background: var(--green-soft); color: var(--green); font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.4);
}
.nav-item a.active::before { opacity: 1; }
.nav-item.nav-wip a { color: var(--muted); }
.nav-item.nav-wip a::after { content: " ·"; color: var(--green-dim); }
.nav-group {
  margin: 1.25rem 0 .3rem; padding: 0 .5rem;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--green-dim);
}
.content {
  flex: 1 1 auto; min-width: 0;
  padding: 2.5rem clamp(1rem, 4vw, 3rem);
}
article { max-width: var(--maxw); }
h1, h2, h3, h4 { font-family: var(--mono); line-height: 1.25; color: var(--green); }
h1 {
  font-size: 1.9rem; margin: 0 0 1.25rem; letter-spacing: .01em;
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}
h2 {
  font-size: 1.35rem; margin: 2.5rem 0 .75rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--border); text-shadow: 0 0 8px rgba(0, 255, 65, 0.35);
}
h3 { font-size: 1.08rem; margin: 1.75rem 0 .5rem; color: var(--green-dim); }
h4 { font-size: .98rem; margin: 1.5rem 0 .4rem; color: var(--green-dim); }
p { margin: 0 0 1rem; }
strong { color: #d7f5d7; }
a { color: var(--green); text-decoration-color: var(--border-bright); }
a:hover { text-shadow: 0 0 6px rgba(0, 255, 65, 0.5); }
ul { padding-left: 1.3rem; }
li { margin: .3rem 0; }
li::marker { color: var(--green); }
.tagline {
  font-family: var(--mono); font-size: 1.05rem; color: var(--green-dim);
  border-left: 2px solid var(--border-bright); padding-left: .9rem;
}
code {
  background: var(--code-bg); padding: .1em .35em; border-radius: 4px;
  font-size: .9em; font-family: var(--mono); color: var(--green-dim);
  border: 1px solid var(--border);
}
pre {
  background: var(--code-bg); padding: 1rem; border-radius: 8px;
  overflow-x: auto; border: 1px solid var(--border-bright);
  box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.05);
}
pre code { background: none; padding: 0; border: none; }
blockquote {
  margin: 1rem 0; padding: .5rem 1rem;
  border-left: 3px solid var(--green); color: var(--muted);
  background: var(--green-soft);
}
.xref { font-size: .85em; color: var(--muted); white-space: nowrap; font-family: var(--mono); }
.xref a { color: var(--green-dim); text-decoration: none; }
.xref a:hover { text-decoration: underline; }
.mermaid-wrap {
  overflow-x: auto; margin: 1.5rem 0; padding: 1rem;
  border: 1px solid var(--border-bright); border-radius: 8px;
  background: var(--code-bg);
}
.mermaid { text-align: center; }
.badge {
  display: inline-block; vertical-align: middle; font-family: var(--mono);
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; padding: .15em .6em; border-radius: 3px;
  border: 1px solid var(--border-bright); color: var(--muted);
}
.badge-granskas {
  border-color: var(--green); color: var(--green);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.25);
}
.badge-klar {
  border-color: var(--green); color: #041004; background: var(--green);
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
}
.wip {
  padding: 1rem 1.25rem; background: var(--bg-panel);
  border: 1px dashed var(--border-bright); border-radius: 8px; color: var(--muted);
  font-family: var(--mono); font-size: .9rem;
}
.page-footer {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: .82rem; color: var(--muted); font-family: var(--mono);
}
::selection { background: rgba(0, 255, 65, 0.28); color: #eaffea; }
* { scrollbar-color: var(--border-bright) var(--bg); }
@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: static; height: auto; width: 100%;
    border-right: none; border-bottom: 1px solid var(--border-bright);
  }
  .content { padding: 1.5rem 1.25rem; }
}