/* ===========================================================================
   xenofic.com (xeno.prose.sh) — CRT phosphor terminal
   Monochrome green "powered-on monitor": phosphor glow, scanlines, vignette,
   blinking cursor, and an `ls -lt` post listing. Selectors match the prose.sh
   DOM (body#blog, body#post, header, section.posts > article, footer).
   Load order is smol.css -> syntax.css -> _styles.css, so this file wins.
   =========================================================================== */

:root {
  --bg:       #060806;   /* near-black, faint green bias */
  --fg:       #a9c2ab;   /* warm phosphor gray-green (body) */
  --green:    #37f558;   /* live phosphor (links / accent) */
  --green-hi: #7bffa0;   /* hover brighten */
  --dim:      #557a5b;   /* dates / meta */
  --rule:     #1b2a1e;   /* hairline */
  --pre:      #0f150f;   /* code background */
  --glow:     0 0 6px rgba(55, 245, 88, .55), 0 0 14px rgba(55, 245, 88, .20);
  --glow-sm:  0 0 5px rgba(55, 245, 88, .30);
  --wash:     rgba(55, 245, 88, .08);
  --err:      #ff6161;   /* stderr on the 404 transcript */
  --err-glow: 0 0 6px rgba(255, 97, 97, .40);

  /* --- amber CRT alternative: swap these four in for a VT220 look ---------
  --green: #ffb642; --green-hi: #ffd48a; --dim: #7d6338; --rule: #2a1f0e;
  ...and update --glow / --glow-sm / --wash to rgba(255, 182, 66, ...).      */

  /* smol.css variables it uses internally — realign them so anything this
     file does not explicitly override still lands inside the theme. */
  --bg-color: #060806;
  --text-color: #a9c2ab;
  --link-color: #37f558;
  --visited: #37f558;
  --hover: #7bffa0;
  --code: #0f150f;
  --pre: #0f150f;
  --white: #a9c2ab;
  --white-light: #a9c2ab;
  --white-dark: #8fae92;
  --grey: #1b2a1e;
  --grey-light: #557a5b;
  --blockquote: #37f558;
  --blockquote-bg: #0f150f;
  --shadow: #0f150f;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  scrollbar-color: var(--dim) var(--bg);
}

body {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(55, 245, 88, .05), transparent 60%),
    var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 15px;
  line-height: 1.6;
  max-width: 700px;
  margin: 8px auto;
  padding: 0 12px 8px;
}

#blog, #post, main, article, section, aside { background: transparent; color: var(--fg); }

::selection { background: var(--green); color: var(--bg); text-shadow: none; }

/* --- CRT overlays: cosmetic only, never intercept clicks ----------------- */
body::before,   /* vignette */
body::after {   /* scanlines */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
body::before { background: radial-gradient(ellipse at center, transparent 54%, rgba(0, 0, 0, .55) 100%); }
body::after {
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .16) 2px 3px);
  mix-blend-mode: multiply;
}

/* --- type ---------------------------------------------------------------- */
a, a:visited { color: var(--green); text-decoration: underline; text-shadow: var(--glow-sm); }
a:hover, a:focus-visible { color: var(--green-hi); text-shadow: var(--glow); text-decoration: underline; }
a:focus-visible { outline: 1px dotted var(--green); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: bold;
  line-height: 1.25;
  color: var(--fg);
}
h1 { margin: 14px 0; }
h2 { margin: 22px 0 6px; }
h3 { margin: 16px 0 4px; }
h4, h5, h6 { margin: 14px 0 4px; }
/* smol.css colours in-article headings via `.md hN` (class specificity), so these
   have to be scoped the same way to win. */
.md h1, .md h2 { color: var(--green); text-shadow: var(--glow-sm); }
.md h3, .md h4, .md h5, .md h6 { color: var(--green); }
.md h2 { font-size: 1.15rem; }
.md h3 { font-size: 1rem; }
.md h4, .md h5, .md h6 { font-size: 0.92rem; }
p { margin: 0 0 10px; }

hr { border: none; border-top: 1px solid var(--rule); width: 100%; margin: 16px 0; }
img { max-width: 100%; height: auto; border: 1px solid var(--rule); }
strong, b { color: var(--green-hi); font-weight: 700; text-shadow: var(--glow-sm); }
em, i { color: var(--fg); font-style: italic; }
small, time, .dim, .text-sm, .font-grey-light { color: var(--dim); }

/* --- masthead (#blog) ---------------------------------------------------- */
#blog header { text-align: center; }
#blog header h1 {
  color: var(--green);
  text-shadow: var(--glow);
  letter-spacing: 0.3em;
  text-indent: 0.3em;      /* balance the trailing letter-spacing */
  margin-bottom: 6px;
}
#blog header h1::after {   /* blinking block cursor after the title */
  content: "\2588";
  margin-left: 0.06em;
  color: var(--green);
  text-shadow: var(--glow);
  animation: blink 1.1s steps(1) infinite;
}
#blog header > span { color: var(--dim); font-weight: normal; }   /* description */
#blog header nav { margin-top: 8px; }
#blog header nav a, #blog header nav a:visited { color: var(--green); text-shadow: var(--glow-sm); }
#blog header nav a:hover { color: var(--green-hi); text-shadow: var(--glow); }
/* nav links ship as .text-lg — shrink to the compact terminal look */
nav a, nav a.text-lg { font-size: 0.82rem; }

/* --- intro blurb (#blog article.md) -------------------------------------- */
#blog article.md { margin-top: 4px; }
#blog article.md ul { list-style: none; padding-left: 0; margin: 6px 0 12px; }
#blog article.md li { position: relative; padding-left: 1.4em; margin-bottom: 7px; }
#blog article.md li::before {
  content: "\203A";
  position: absolute;
  left: 0.2em;
  color: var(--green);
  text-shadow: var(--glow);
}

/* --- post index: `ls -lt` listing --------------------------------------- */
#blog .posts::before {
  content: "xeno@blog:~$ ls -lt posts/";
  display: block;
  margin: 4px 0 10px;
  color: var(--dim);
  font-size: 0.85rem;
}
#blog .posts article {
  padding: 1px 6px 1px 8px;
  border-left: 2px solid transparent;   /* fixed width -> no shift on hover */
  border-radius: 2px;
  transition: background .12s ease, border-color .12s ease;
}
#blog .posts article > .flex { gap: 1ch; }
#blog .posts .post-date {
  color: var(--dim);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 10ch;
}
/* titles: compact green with a faint glow (override prose's .text-md) */
#blog .posts .text-md,
#blog .posts .text-md a,
#blog .posts .text-md a:visited {
  font-size: 0.82rem;
  font-weight: normal;
  line-height: 1.5;
  color: var(--green);
  text-shadow: var(--glow-sm);
}
/* reserved caret so the row can light up without shifting the text */
#blog .posts .text-md::before { content: "\25B8"; margin-right: 0.55ch; color: transparent; }
#blog .posts article:hover { background: var(--wash); border-left-color: var(--green); }
#blog .posts article:hover .text-md::before { color: var(--green); text-shadow: var(--glow); }
#blog .posts article:hover .text-md a { color: var(--green-hi); text-shadow: var(--glow); }
#blog .posts article:hover .post-date { color: #7c9a80; }

/* --- post page (#post) --------------------------------------------------- */
#post header { margin-bottom: 4px; }
#post header h1 {
  color: var(--green);
  text-shadow: var(--glow);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 10px 0 6px;
}
#post header h1::before { content: "$ "; color: var(--dim); text-shadow: none; }
#post header h1::after {
  content: "\2588";
  margin-left: 0.1em;
  font-size: 0.85em;
  color: var(--green);
  animation: blink 1.1s steps(1) infinite;
}
#post header p { color: var(--dim); font-weight: normal !important; font-size: 0.8rem; }
#post header #publish-at time { color: var(--dim); font-variant-numeric: tabular-nums; }
#post header p a { font-size: 0.8rem; }        /* "back to blog" title link */
/* the post `description` is emitted as a blockquote in the header: render it as a
   plain subtitle, not as a pull-quote. */
#post header blockquote {
  margin: 6px 0 0;
  padding: 0;
  border-left: none;
  color: var(--dim);
  font-size: 0.88rem;
}
/* drafts are unlisted but publicly reachable -- label them so it is obvious */
#post.post-draft header #publish-at::after {
  content: " [draft]";
  color: var(--dim);
}
/* --- 404 ----------------------------------------------------------------- */
/* prose.sh renders _404.md with the same `post-draft` marker but an EMPTY slug
   class, so `[class=" post-draft"]` (exact, note the leading space) matches the
   404 and nothing else. Real drafts are `"<slug> post-draft"`. */
#post[class=" post-draft"] header #publish-at::after { content: none; }
#post[class=" post-draft"] #last-updated { display: none; }
/* the transcript below carries the terminal framing, so the title does not need
   the `$ ` prompt prefix it gets on real posts */
#post[class=" post-draft"] header h1::before { content: none; }
/* a shell transcript has no line numbers */
#post[class=" post-draft"] .chroma .ln,
#post[class=" post-draft"] .chroma .lnt { display: none; }
#post[class=" post-draft"] pre.chroma { position: relative; padding: 12px 14px; }
/* chroma's `console` lexer: .gp = prompt, .nb = builtin, .go = program output */
#post[class=" post-draft"] .chroma .gp { color: var(--dim); }
#post[class=" post-draft"] .chroma .nb { color: var(--green); text-shadow: var(--glow-sm); }
#post[class=" post-draft"] .chroma .go { color: var(--err); text-shadow: var(--err-glow); }
/* a fresh prompt + live cursor parked at the end of the transcript. Two pseudo-
   elements because the prompt is dim and the cursor is bright: the last code line
   ends in a newline, so `code::after` opens a new line and `pre::after` lands
   inline right after it. */
#post[class=" post-draft"] pre.chroma code::after {
  content: "$ ";
  color: var(--dim);
}
#post[class=" post-draft"] pre.chroma::after {
  content: "\2588";
  color: var(--green);
  text-shadow: var(--glow);
  animation: blink 1.1s steps(1) infinite;
}

#post article.md { margin-top: 6px; }
/* prose.sh appends <a class="anchor">#</a> to headings: keep it quiet until hover */
.md h1 .anchor, .md h2 .anchor, .md h3 .anchor,
.md h4 .anchor, .md h5 .anchor, .md h6 .anchor {
  color: var(--rule);
  text-decoration: none;
  text-shadow: none;
  margin-left: 0.5ch;
  font-weight: normal;
  transition: color .12s ease;
}
.md h1:hover .anchor, .md h2:hover .anchor, .md h3:hover .anchor,
.md h4:hover .anchor, .md h5:hover .anchor, .md h6:hover .anchor { color: var(--dim); }
.md .anchor:hover { color: var(--green-hi) !important; text-shadow: var(--glow-sm); }
#post article.md ul, #post article.md ol { padding-left: 1.3em; margin: 6px 0 12px; }
#post article.md li { margin-bottom: 5px; }
#post article.md li::marker { color: var(--green); }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 0.5ch 1ch; font-size: 0.78rem; }
.tags a, .tags a:visited {
  color: var(--dim);
  text-decoration: none;
  text-shadow: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0 5px;
}
.tags a:hover { color: var(--green-hi); border-color: var(--green); background: var(--wash); text-shadow: var(--glow-sm); }

#last-updated { color: var(--dim); font-size: 0.75rem; margin-top: 12px; }

#post-footer {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--dim);
}
#post-footer p { margin: 0; }
#post-footer a { font-size: 0.82rem; }

/* --- table of contents (toc: true) -------------------------------------- */
#toc, details {
  margin: 14px 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 8px 12px;
  background: var(--pre);
  font-size: 0.85rem;
}
#toc summary, details summary { cursor: pointer; color: var(--green); text-shadow: var(--glow-sm); }
#toc ul { list-style: none; padding-left: 1em; margin: 6px 0 0; }
#toc li::before { content: "\2514\2500 "; color: var(--dim); }

/* --- code ---------------------------------------------------------------- */
code {
  font-family: inherit;
  background: var(--pre);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--green-hi);
  font-size: 0.92em;
}
pre {
  background: var(--pre);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 10px 12px;
  overflow-x: auto;
  line-height: 1.45;
  font-size: 0.85rem;
}
pre code { background: none; border: none; padding: 0; color: var(--fg); font-size: inherit; }

/* prose's chroma highlighting only goes dark under prefers-color-scheme:dark;
   this theme is always dark, so force the code block dark + monochrome. */
.chroma { background: var(--pre); color: var(--fg); }
.chroma .cl span { color: var(--fg); }
.chroma .lnt, .chroma .ln { color: var(--dim); }
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt { color: var(--green); }
/* syntax.css italicises builtins, variables and keyword-declarations (.nb/.nv/.kd
   et al). Italic monospace reads as a rendering glitch in a terminal theme, so
   flatten it everywhere except comments, where italic is idiomatic. */
.chroma span { font-style: normal; }
/* one class + one element loses to syntax.css's two-class `.chroma .nb`, so the
   de-italicising has to be listed at matching specificity. */
.chroma .nb, .chroma .nv, .chroma .nl, .chroma .vc, .chroma .vg, .chroma .vi,
.chroma .bp, .chroma .kc, .chroma .kd, .chroma .kt, .chroma .sd, .chroma .ge {
  font-style: normal;
}
.chroma .nb, .chroma .nv, .chroma .nl, .chroma .vc, .chroma .vg, .chroma .vi { color: var(--green); }
.chroma .c, .chroma .c1, .chroma .cm, .chroma .ch, .chroma .cs { font-style: italic; }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb { color: var(--green-hi); }
.chroma .c, .chroma .c1, .chroma .cm { color: var(--dim); font-style: italic; }

blockquote {
  margin: 14px 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--green);
  background: none;
  color: var(--dim);
}
blockquote p:last-child { margin-bottom: 0; }

/* --- tables -------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; margin: 14px 0; }
th, td { border: 1px solid var(--rule); padding: 5px 8px; text-align: left; }
th { color: var(--green); text-shadow: var(--glow-sm); background: var(--pre); }

/* --- footer -------------------------------------------------------------- */
footer {
  margin-top: 26px;
  padding-top: 10px;
  color: var(--dim);
  font-size: 0.82rem;
}
footer hr { margin-bottom: 10px; }
footer a, footer a:visited { color: var(--green); text-shadow: var(--glow-sm); font-size: 0.82rem; }
/* terminal prompt showing the email, with a blinking block cursor */
footer::after {
  content: "hello@xenofic.com:~$";
  display: block;
  width: max-content;
  margin-top: 10px;
  padding-right: 2px;
  color: var(--green);
  text-shadow: var(--glow);
  border-right: 0.55em solid var(--green);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes caret { 50% { border-right-color: transparent; } }

/* --- responsive / motion / print ---------------------------------------- */
@media only screen and (max-width: 600px) {
  html, body { font-size: 14px; }
  #blog header h1 { letter-spacing: 0.18em; text-indent: 0.18em; }
  /* prose.sh puts `items-center` on the row; once it stacks, that centres the
     date + title horizontally, so realign to the left edge. */
  #blog .posts article > .flex { flex-direction: column; gap: 0; align-items: flex-start; }
  #blog .posts .post-date { width: auto; }
  #blog .posts article { padding-bottom: 6px; margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  #blog header h1::after,
  #post header h1::after,
  #post[class=" post-draft"] pre.chroma::after,
  footer::after { animation: none; }
  #blog .posts article { transition: none; }
}

@media print {
  body::before, body::after, footer::after { display: none; }
  body { background: #fff; color: #000; max-width: none; }
  a { color: #000; text-shadow: none; }
}