/* layout: fixed terminal sidebar (17rem) | fluid content column capped at 78ch */
/* themes: every color and effect is a token below. New theme = one :root[data-theme="<id>"] block
   overriding the tokens + one entry in theme.js. Default (no JS) is crt. */
:root, :root[data-theme="crt"] {   /* darkmode-green-terminal */
  --bg: #040904;      /* screen */
  --panel: #071207;   /* sidebar */
  --line: #164a22;    /* borders, rules */
  --fg: #39ff6a;      /* phosphor: headings, links, accents */
  --text: #b4f2c4;    /* body copy: softer, easier on the eyes */
  --dim: #4cc46c;     /* secondary text */
  --hi: #ffb020;      /* amber: bold, code chips */
  --err: #ff5f56;
  --code-bg: #020602;                    /* pre blocks */
  --code-border: rgba(255, 176, 32, .45); /* inline code chips */
  --glow: rgba(57, 255, 106, .18);       /* text-shadow / logo halo; transparent = off */
  --scan: rgba(0, 0, 0, .07);            /* CRT scanlines; transparent = off */
  --blink: blink;                        /* cursor animation; none = solid */
  --pre-bands: none;                     /* background-image behind pre text */
  color-scheme: dark;
}
:root[data-theme="paper"] {        /* lightmode-greenbar-printout: fanfold line-printer paper */
  --bg: #f4f6ee;
  --panel: #e6eedd;
  --line: #9fbf9a;
  --fg: #0a6a2c;
  --text: #1b2a1e;
  --dim: #4a6a52;
  --hi: #8f4c00;
  --err: #b3261e;
  --code-bg: #f4f6ee;
  --code-border: rgba(143, 76, 0, .45);
  --glow: transparent;
  --scan: transparent;
  --blink: none;
  --pre-bands: repeating-linear-gradient(#e1ebd8 0 1.75em, transparent 1.75em 3.5em); /* green bar on every other line */
  color-scheme: light;
}
:root { --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; }

* { box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  color: var(--text);
  font: 16px/1.75 var(--mono);
}
/* CRT scanlines */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: repeating-linear-gradient(transparent 0 2px, var(--scan) 2px 3px);
}

a { color: var(--fg); text-underline-offset: 3px; }
a:hover, a:focus-visible { background: var(--fg); color: var(--bg); text-shadow: none; outline: none; }
::selection { background: var(--fg); color: var(--bg); }
p { margin: 0; }
.dim { color: var(--dim); }

/* glow only on display text */
h1, h2, h3, .brand, .ps1, .logo img { text-shadow: 0 0 4px var(--glow); }
#content h1, #content h2, #content h3, .brand, .ps1 { color: var(--fg); }

/* ---------- sidebar ---------- */
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.75rem;
  padding: 2.25rem 1.5rem;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.logo { align-self: flex-start; border-radius: 50%; }
.logo:hover, .logo:focus-visible { background: none; }
.logo img { display: block; width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 0 22px var(--glow); }
.brand { font-size: 1.25rem; font-weight: 700; }
.brand b { color: var(--dim); }
.id .dim { font-size: .8rem; }
.lbl { display: block; color: var(--dim); font-size: .75rem; letter-spacing: .08em; margin-bottom: .35rem; }
nav, .social, .themes { display: flex; flex-direction: column; gap: .15rem; }
nav a, .social a, .themes button { text-decoration: none; padding: .05rem .4rem; margin-left: -.4rem; }
.themes button { font: inherit; color: var(--fg); background: none; border: 0; text-align: left; cursor: pointer; }
.themes button:hover, .themes button:focus-visible { background: var(--fg); color: var(--bg); outline: none; }
nav a::before, .themes button::before { content: "  "; white-space: pre; }
nav a.on::before, .themes button.on::before { content: "> "; }
nav a.on, .themes button.on { color: var(--hi); }
.social a::before { content: "↗ "; color: var(--dim); }
.foot { margin-top: auto; font-size: .7rem; color: var(--dim); letter-spacing: .06em; }

/* ---------- content ---------- */
main {
  min-width: 0;
  padding-block: 2.25rem 4rem;
  padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px));
  padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px));
}
.prompt { color: var(--dim); margin-bottom: 1.75rem; word-break: break-all; }
.ps1 { color: var(--fg); font-weight: 700; }
#cmd { color: var(--fg); }
.cur { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; margin-left: .2em; background: var(--fg); animation: var(--blink) 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#content { max-width: 78ch; display: flex; flex-direction: column; gap: 1rem; outline: none; }
#content h1, #content h2, #content h3, #content h4 { margin: 1rem 0 0; line-height: 1.3; text-wrap: balance; }
#content h1 { font-size: 1.5rem; margin-top: 0; }
#content h1::before { content: "# "; color: var(--dim); }
#content h2 { font-size: 1.15rem; }
#content h2::before { content: "## "; color: var(--dim); }
#content h3 { font-size: 1rem; color: var(--hi); }
strong { color: var(--hi); }
em { color: var(--dim); }
hr { width: 100%; border: 0; border-top: 1px dashed var(--line); margin: .5rem 0; }
ul, ol { margin: 0; padding-left: 2ch; }
ul { list-style: none; }
ul > li::before { content: "> "; color: var(--dim); margin-left: -2ch; }
li + li { margin-top: .2rem; }
blockquote { margin: 0; padding: .25rem 0 .25rem 1.5ch; border-left: 2px solid var(--dim); color: var(--dim); }
code { color: var(--hi); border: 1px solid var(--code-border); padding: 0 .3ch; text-shadow: none; }
pre { margin: 0; padding: 1rem 1.25rem; overflow-x: auto; border: 1px solid var(--line); background: var(--pre-bands) content-box local, var(--code-bg); }
pre code { color: var(--text); border: 0; padding: 0; }
img { max-width: 100%; border: 1px solid var(--line); }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; font-size: .9rem; }
th, td { border: 1px solid var(--line); padding: .3rem .8rem; text-align: left; vertical-align: top; }
th { color: var(--hi); }

/* blog listing (ls -l style) */
.posts { padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.posts li::before { content: none; }
.posts .ls { color: var(--dim); font-size: .85rem; white-space: pre; overflow-x: auto; display: block; }
.posts a { font-weight: 700; }
.posts p { color: var(--dim); }
.tags { font-size: .8rem; color: var(--dim); }
.err { color: var(--err); }

/* short screens (laptops): tighten the sidebar so it fits without scrolling */
@media (max-height: 820px) {
  .side { gap: 1.1rem; padding-block: 1.5rem; }
  .logo img { width: 96px; height: 96px; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  body { grid-template-columns: 1fr; }
  .side {
    position: static; height: auto; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
    padding-block: 1.25rem;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .logo img { width: 64px; height: 64px; }
  nav, .social, .themes { flex-direction: row; flex-wrap: wrap; gap: .25rem 1rem; flex-basis: 100%; }
  .lbl { flex-basis: 100%; margin: 0; }
  .foot { display: none; }
  main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

@media (prefers-reduced-motion: reduce) { .cur { animation: none; } }