:root {
  color-scheme: dark;
  --bg: #060907;
  --fg: #b9f6c9;
  --dim: #5c9169;
  --faint: #2f4a37;
  --hi: #3dff8b;
  --err: #ff6b62;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  font: 15px/1.75 var(--mono);
  background: radial-gradient(ellipse 90% 70% at 50% 0%, #0e1d13, var(--bg) 70%) fixed;
  text-shadow: 0 0 8px rgba(61, 255, 139, 0.28);
}
/* CRT scanlines with an occasional flicker */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 10;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  animation: flicker 6s infinite;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--hi); }

.wrap { max-width: 760px; margin: 0 auto; padding: 20px 24px 96px; }
.topbar { display: flex; justify-content: flex-end; margin-bottom: clamp(24px, 7vh, 64px); }

/* Text buttons, drawn as [ label ] */
.btn {
  padding: 1px 0.5ch;
  font: inherit;
  color: var(--dim);
  text-decoration: none;
  text-shadow: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.btn::before { content: "[ "; }
.btn::after { content: " ]"; }
.btn:hover, .btn:focus-visible { color: var(--bg); background: var(--hi); text-shadow: none; outline: none; }
.btn-hi { color: var(--hi); }

/* Headings drawn as shell prompts and folders */
.prompt { margin: 0 0 6px; font: inherit; font-weight: 700; color: var(--hi); }
.prompt::before { content: "$ "; color: var(--dim); }
.cat { margin-bottom: 30px; }
.cat h2 { margin: 0 0 6px; font: inherit; font-weight: 700; color: var(--hi); text-transform: lowercase; overflow-wrap: anywhere; }
.cat h2::before { content: "~/"; color: var(--dim); }

/* Admin: [ ↑ ] [ ↓ ] beside each category name */
.cat-head { display: flex; align-items: center; gap: 0.5ch; margin: 0 0 6px; }
.cat-head h2 { margin: 0 1ch 0 0; }
.btn-move { padding: 0 0.25ch; }
.btn:disabled { opacity: 0.3; cursor: default; }
.btn:disabled:hover { color: var(--dim); background: none; text-shadow: inherit; }
@media (hover: hover) {
  .cat .btn-move { opacity: 0; }
  .cat:hover .btn-move, .cat .btn-move:focus-visible { opacity: 1; }
  .cat:hover .btn-move:disabled { opacity: 0.3; }
}

/* Indented block with a dashed guide line, used for link lists and forms */
.tree { list-style: none; margin: 0 0 0 1ch; padding: 0 0 0 2ch; border-left: 1px dashed var(--dim); }

.link { position: relative; }
.link a { display: block; padding: 1px 1ch; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.link a::before { content: ">"; display: inline-block; width: 2ch; opacity: 0; }
.link a:hover, .link a:focus-visible { color: var(--bg); background: var(--hi); text-shadow: none; outline: none; }
.link a:hover::before, .link a:focus-visible::before { opacity: 1; }

/* Admin: [ rm ] sits at the end of each row; a first click turns it into [ sure? ] */
.link:has(.btn-rm) a { padding-right: 12ch; }
.btn-rm { position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: var(--err); background: var(--bg); }
.btn-rm:hover, .btn-rm:focus-visible, .btn-rm.armed { color: var(--bg); background: var(--err); }
@media (hover: hover) {
  .link .btn-rm { opacity: 0; }
  .link:hover .btn-rm, .link .btn-rm:focus-visible, .link .btn-rm.armed { opacity: 1; }
}

/* Forms */
.panel { margin-bottom: 40px; }
.field { display: grid; grid-template-columns: 10ch 1fr; align-items: center; gap: 1ch; }
.field label { color: var(--dim); }
input {
  width: 100%; min-width: 0; height: 30px; padding: 0 0.5ch;
  font: inherit;
  color: var(--fg);
  caret-color: var(--hi);
  text-shadow: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--faint);
  border-radius: 0;
  transition: border-color 0.15s, background-color 0.15s;
}
input::placeholder { color: var(--faint); text-shadow: none; }
input:focus { outline: none; border-bottom: 1px solid var(--hi); background: rgba(61, 255, 139, 0.05); }
input:-webkit-autofill { -webkit-text-fill-color: var(--fg); box-shadow: 0 0 0 1000px var(--bg) inset; transition: background-color 9999s; }
form.tree .btn { margin-top: 10px; }
[inert] { opacity: 0.55; }

/* Status lines: "# comment" for progress, "error: ..." for problems */
.status, .hint { margin: 0 0 8px; color: var(--dim); text-transform: lowercase; }
.status::before, .hint::before { content: "# "; }
.hint { margin: 14px 0 0; }
.status.is-error { color: var(--err); text-shadow: 0 0 8px rgba(255, 107, 98, 0.3); }
.status.is-error::before { content: "error: "; font-weight: 700; }
.empty { margin: 0 0 12px; color: var(--dim); }
.empty::before { content: "# "; }

.cursor {
  display: inline-block;
  width: 0.6em; height: 1.15em;
  margin-top: 4px;
  vertical-align: middle;
  background: var(--hi);
  box-shadow: 0 0 10px var(--hi);
  animation: blink 1.05s steps(1) infinite;
}

/* Login */
.login {
  max-width: 560px; min-height: 100vh; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 40px 24px 14vh;
}
.login .prompt { margin-bottom: 10px; }
.login form { align-self: stretch; }
.login .back { margin-top: 18px; }

/* Lines type themselves in on load. Static lines use .d0–.d4; links get --n from app.js. */
.type { animation: type 0.55s steps(22) backwards; animation-delay: min(calc(var(--n, 0) * 70ms), 1400ms); }
.no-anim .type { animation: none; }
.d0 { --n: 0; } .d1 { --n: 1; } .d2 { --n: 2; } .d3 { --n: 3; } .d4 { --n: 4; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes flicker { 0%, 97%, 100% { opacity: 1; } 98% { opacity: 0.85; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}