/* Green screen — everything measured in ch so the columns line up like a terminal; the glow is text-shadow, the
   scanlines a repeating gradient, the cursor a ::after that blinks once a second (and stops for reduced motion).
   Designed by machine for the Slopwright. */
:root {
  color-scheme: dark;
  --bg: #031a07;
  --fg: #4dff7a;
  --dim: #2ec85a;
  --bright: #b8ffcb;
  --glow: 0 0 4px rgba(77, 255, 122, .55);
}
* { box-sizing: border-box; }
html { overflow-x: clip; background: var(--bg); }
body {
  margin: 0; min-width: 320px; color: var(--fg); background: radial-gradient(ellipse at 50% 40%, #06300f, var(--bg) 70%) fixed;
  font: 16px/1.5 "DejaVu Sans Mono", "Menlo", "Consolas", "Liberation Mono", "Courier New", monospace;
  text-shadow: var(--glow);
}
/* scanlines over everything */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px); }
a { color: var(--bright); text-decoration: underline; text-underline-offset: 3px; }
a:hover { background: var(--fg); color: var(--bg); text-shadow: none; }
a:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; background: var(--fg); color: var(--bg); text-shadow: none; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 1ch; top: -80px; z-index: 10; padding: .5ch 1ch; background: var(--fg); color: var(--bg); }
.skip:focus { top: 1ch; }
.main:focus { outline: none; }
h1, h2, h3, p, ul, ol, dl, figure, blockquote, table { font-size: 1em; }

.page { max-width: 88ch; margin: 0 auto; padding: 2ch 2ch 6ch; }

/* the masthead: a login banner */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5ch 3ch; padding-bottom: 1ch; border-bottom: 1px dashed var(--dim); }
.masthead { display: flex; align-items: center; gap: 1ch; }
.masthead .brand { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 6px; background: var(--fg); }
.masthead .brand img { display: block; height: 20px; width: auto; filter: brightness(0); }
.masthead .brand:focus-visible { outline-offset: 3px; }
.site-name { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.site-name::before { content: "~/"; color: var(--dim); }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 2ch; }
.site-nav a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.site-nav a::before { content: "["; } .site-nav a::after { content: "]"; }

/* the title: a command and its output */
.title-block { padding: 3ch 0 2ch; }
.edition { margin: 0; color: var(--dim); }
.edition::before { content: "$ cat manual.txt  # "; }
.title { margin: 1ch 0 0; font-weight: 700; font-size: clamp(26px, 6vw, 44px); line-height: 1.1; text-transform: uppercase; letter-spacing: .1ch; color: var(--bright); }
.title::after { content: "_"; animation: cursor 1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.subtitle { margin: 1ch 0 0; max-width: 60ch; }
.subtitle::before { content: "> "; color: var(--dim); }

/* contents as a directory listing */
.contents { margin: 2ch 0; padding: 1ch 2ch; border: 1px solid var(--dim); }
.contents-title { margin: 0; font-weight: 400; color: var(--dim); }
.contents-title::before { content: "$ ls -1 "; }
.contents-list { margin: 1ch 0 0; padding: 0; list-style: none; counter-reset: c; }
.contents-list li { counter-increment: c; }
.contents-list a { display: inline-block; min-height: 28px; }
.contents-list li::before { content: "drwxr-xr-x  0" counter(c) "  "; color: var(--dim); }

/* chapters */
.chapter { margin: 3ch 0; }
.chapter-title { margin: 0 0 1ch; font-weight: 700; color: var(--bright); text-transform: uppercase; }
.chapter-title::before { content: "## "; color: var(--dim); }
.chapter-num::after { content: "."; }
.chapter-body { max-width: 72ch; }
.chapter-body p { margin: 1ch 0; }
.first { color: var(--bright); }
.plate { margin: 2ch 0; padding: 1ch; border: 1px solid var(--dim); }
/* a phosphor photograph: the picture tinted green and dimmed */
.plate img { display: block; filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3) brightness(.85) contrast(1.2); }
.plate figcaption { margin-top: 1ch; color: var(--dim); }
.plate figcaption::before { content: "# "; }
.tools, .rules { padding-left: 0; list-style: none; }
.tools li::before { content: "- "; color: var(--dim); }
.tools li, .rules li { margin: .5ch 0; padding-left: 2ch; text-indent: -2ch; }
.rules { counter-reset: r; }
.rules li { counter-increment: r; padding-left: 4ch; text-indent: -4ch; }
.rules li::before { content: counter(r) ". "; color: var(--dim); display: inline-block; width: 4ch; text-indent: 0; }
.note { margin: 2ch 0; padding: 1ch 2ch; border: 1px solid var(--fg); background: rgba(77, 255, 122, .08); }
.note p { margin: 0; }
.note p::before { content: "WARNING: "; font-weight: 700; color: var(--bright); }
.note strong { text-transform: uppercase; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; min-width: 60ch; }
caption { text-align: left; color: var(--dim); padding-bottom: .5ch; }
caption::before { content: "# "; }
th, td { padding: .25ch 2ch .25ch 0; text-align: left; vertical-align: top; font-weight: 400; }
thead th { color: var(--bright); border-bottom: 1px dashed var(--dim); text-transform: uppercase; }
tbody th { color: var(--bright); }
.saying { margin: 2ch 0; padding-left: 2ch; border-left: 1px solid var(--dim); }
.saying p { margin: 0; }
.saying p::before { content: "\""; } .saying p::after { content: "\""; }
.saying footer { color: var(--dim); }
.saying footer::before { content: "  -- "; }
.hazards { margin: 0; }
.hazard { margin: 1ch 0; }
.hazard dt { color: var(--bright); text-transform: uppercase; }
.hazard dt::before { content: "!! "; }
.hazard dd { margin: 0 0 0 3ch; }
.glossary { display: grid; grid-template-columns: 14ch 1fr; gap: .5ch 2ch; }
.glossary dt { color: var(--bright); }
.glossary dd { margin: 0; }
.sign-off::before { content: "$ exit  # "; color: var(--dim); }

/* the outfits: a process list */
.outfits { margin: 4ch 0; padding: 2ch; border: 1px solid var(--fg); }
.outfits-title { margin: 0; font-weight: 700; color: var(--bright); text-transform: uppercase; }
.outfits-title::before { content: "$ ls themes/  # "; color: var(--dim); text-transform: none; font-weight: 400; }
.outfits-lede { color: var(--dim); }
.outfit-list { margin: 1ch 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(34ch, 1fr)); gap: .5ch 2ch; }
.outfit { padding: .25ch 0; }
.outfit-link { display: inline-block; min-height: 26px; }
.outfit-link::before { content: "  "; white-space: pre; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { color: var(--dim); }
.outfit-technique::before { content: "# "; }
#th-terminal { background: var(--fg); color: var(--bg); text-shadow: none; padding: .25ch 1ch; }
#th-terminal a, #th-terminal .outfit-technique, #th-terminal .outfit-by, #th-terminal .outfit-note { color: var(--bg); }
#th-terminal .outfit-link::before { content: "* "; }
#th-terminal .outfit-link::after { content: " (running)"; }
#th-terminal .outfit-by, #th-terminal .outfit-note { display: block; }

.site-foot { padding-top: 1ch; border-top: 1px dashed var(--dim); color: var(--dim); }
.site-foot p { margin: .5ch 0; }
.site-foot a { color: var(--fg); }
.extra { display: none; }

@media (max-width: 560px) {
  body { font-size: 15px; }
  .glossary { grid-template-columns: 1fr; gap: 0; }
  .glossary dd { margin: 0 0 1ch 2ch; }
  .outfit-list { grid-template-columns: 1fr; }
  table { min-width: 48ch; }
}
@media (prefers-reduced-motion: reduce) {
  .title::after { animation: none; }
}

@media (max-width: 600px) { table { min-width: 0; } }

/* moving between outfits: a cross-document view transition where the browser has them (Chromium did, Firefox did not, when check.mjs last ran), with the
   masthead and the title carried across; an ordinary page load elsewhere, and under reduced motion */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.title { view-transition-name: manual-title; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }