/* The Jargon File — retro terminal theme */

@font-face { font-display: swap; }

:root{
  --bg:#0d0b06; --bg2:#161208; --bg3:#1d1809;
  --fg:#ffb000; --fg-bright:#ffd166; --dim:#9a6a00; --dim2:#6b4a00;
  --line:#4a3400; --line-soft:#2e2200;
  --accent:#ffd166; --danger:#ff6a4d;
  --select-bg: rgba(255,176,0,.25);
  --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg:#e9e3d3; --bg2:#ded5bd; --bg3:#d3c8a8;
  --fg:#2b2417; --fg-bright:#5a2e0e; --dim:#6b5f45; --dim2:#8a7c5c;
  --line:#bcae87; --line-soft:#cdc19c;
  --accent:#a3491f; --danger:#a3291f;
  --select-bg: rgba(122,59,30,.18);
  color-scheme: light;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:14.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--select-bg); color:var(--fg-bright); }

a{ color:inherit; }
button, input{ font-family:inherit; }

.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:18px 18px 40px;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:12px; margin-bottom:16px;
}
.brand{ text-decoration:none; color:var(--fg); display:block; }
.brand-title{ font-weight:700; font-size:16px; letter-spacing:.14em; }
.brand-sub{ display:block; color:var(--dim); font-size:11px; letter-spacing:.04em; margin-top:3px; }
.topbar-controls{ display:flex; gap:8px; }

.btn{
  background:var(--bg2); border:1px solid var(--line); color:var(--fg);
  font-size:12px; padding:8px 12px; cursor:pointer; letter-spacing:.03em;
}
.btn:hover{ border-color:var(--fg); color:var(--fg-bright); }
.btn:active{ transform:translateY(1px); }
.theme-btn{ font-size:14px; padding:6px 10px; }

/* ---------- search ---------- */
.searchrow{ display:flex; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.searchrow .searchbox{ min-width:200px; }
.searchbox{
  flex:1; display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--bg2); padding:9px 12px;
}
.searchbox:focus-within{ border-color:var(--fg); }
.searchbox .prompt{ color:var(--dim); }
.searchbox input{
  flex:1; background:transparent; border:0; outline:0; color:var(--fg);
  font-size:14.5px; min-width:0;
}
.searchbox input::placeholder{ color:var(--dim2); }
.searchbox .key{
  border:1px solid var(--line); color:var(--dim); font-size:10px; padding:1px 6px; border-radius:2px;
}

.results{
  border:1px solid var(--line); background:var(--bg2); margin:8px 0 16px; max-height:60vh; overflow-y:auto;
}
.results .rhead{ padding:6px 10px; color:var(--dim); font-size:11px; border-bottom:1px solid var(--line-soft); }
.results .r{
  padding:8px 12px; border-bottom:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:10px; cursor:pointer; text-decoration:none; color:inherit;
}
.results .r:last-child{ border-bottom:0; }
.results .r:hover, .results .r.active{ background:rgba(255,176,0,.08); }
:root[data-theme="light"] .results .r:hover, :root[data-theme="light"] .results .r.active{ background:rgba(122,59,30,.08); }
.results .term{ color:var(--fg); }
.results .meta{ color:var(--dim); font-size:11.5px; white-space:nowrap; }
.results .snippet{ display:block; color:var(--dim); font-size:12px; margin-top:2px; }
.results mark{ background:none; color:var(--accent); font-weight:700; }
.results .empty{ padding:14px 12px; color:var(--dim); }

/* ---------- breadcrumbs ---------- */
.crumbs{ color:var(--dim); font-size:12px; margin-bottom:10px; min-height:1em; }
.crumbs a{ text-decoration:none; border-bottom:1px dotted var(--dim); }
.crumbs a:hover{ color:var(--fg-bright); border-color:var(--fg-bright); }

/* ---------- layout ---------- */
.layout{ display:grid; grid-template-columns:150px 1fr; gap:22px; align-items:start; }

.rail{ border-right:1px solid var(--line); padding-right:14px; position:sticky; top:12px; }
.rail h4{ margin:0 0 8px; font-size:11px; color:var(--dim); letter-spacing:.12em; font-weight:400; }
.rail h4:not(:first-child){ margin-top:18px; }
.alphagrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:3px; }
.alphagrid a{
  color:var(--dim); text-decoration:none; text-align:center; border:1px solid transparent;
  padding:3px 0; font-size:12px;
}
.alphagrid a:hover{ color:var(--fg-bright); border-color:var(--line); }
.alphagrid a.on{ color:var(--bg); background:var(--fg); }
.alphagrid a.disabled{ color:var(--line); pointer-events:none; }

/* narrow screens: rail moves above content, wider letter grid */
@media (max-width: 720px){
  .layout{ grid-template-columns:1fr; }
  .rail{ border-right:0; border-bottom:1px solid var(--line); padding:0 0 14px; margin-bottom:6px; }
  .alphagrid{ grid-template-columns:repeat(9,1fr); }
}

.navlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.navlist a{ text-decoration:none; color:var(--dim); font-size:12.5px; }
.navlist a:hover{ color:var(--fg-bright); }

main{ min-width:0; }

/* ---------- cards / prose ---------- */
.card{ border:1px solid var(--line); background:var(--bg2); padding:22px 24px; }
.card + .card{ margin-top:16px; }

.page-title{ font-size:20px; font-weight:700; margin:0 0 6px; color:var(--fg-bright); }
.page-sub{ color:var(--dim); font-size:12.5px; margin:0 0 16px; }

.prose p{ margin:0 0 14px; }
.prose h2{ font-size:16px; color:var(--fg-bright); border-bottom:1px dashed var(--line); padding-bottom:6px; margin:28px 0 12px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:14px; color:var(--fg-bright); margin:20px 0 10px; }
.prose ol, .prose ul{ margin:0 0 14px; padding-left:22px; }
.prose li{ margin-bottom:8px; }

/* ---------- entry ---------- */
.entry-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  border-bottom:1px dashed var(--line); padding-bottom:14px; margin-bottom:16px; flex-wrap:wrap;
}
.entry-term{ font-size:23px; font-weight:700; color:var(--fg-bright); word-break:break-word; }
.entry-meta{ color:var(--dim); font-size:13px; margin-top:5px; }
.entry-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.entry-actions .btn{ font-size:11px; padding:7px 10px; }

.tag-line{
  display:inline-block; color:var(--dim); border:1px solid var(--line); padding:2px 8px;
  font-size:11.5px; margin-bottom:12px; font-style:italic;
}

a.xref{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--dim2); }
a.xref:hover{ border-color:var(--accent); color:var(--fg-bright); }

.entry-foot{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color:var(--dim); font-size:12px; margin-top:18px; padding-top:12px; border-top:1px solid var(--line);
}
.entry-foot a{ text-decoration:none; border-bottom:1px dotted var(--dim); }
.entry-foot a:hover{ color:var(--fg-bright); border-color:var(--fg-bright); }
.entry-nav{ display:flex; gap:14px; }

/* ---------- letter listing ---------- */
.letter-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:2px 18px; }
.letter-grid a{ display:block; padding:5px 0; text-decoration:none; color:var(--fg); border-bottom:1px solid var(--line-soft); }
.letter-grid a:hover{ color:var(--fg-bright); }
.letter-grid .lm{ color:var(--dim); font-size:11px; margin-left:6px; }

/* ---------- home ---------- */
.hero{ text-align:left; }
.hero .lead{ font-size:15px; color:var(--fg); max-width:64ch; }
.stat-row{ display:flex; gap:26px; margin:18px 0; flex-wrap:wrap; }
.stat{ }
.stat .n{ font-size:24px; font-weight:700; color:var(--fg-bright); font-variant-numeric:tabular-nums; }
.stat .l{ font-size:11px; color:var(--dim); letter-spacing:.08em; }
.quicklinks{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

/* ---------- misc ---------- */
.cursor{ display:inline-block; width:8px; height:14px; background:var(--fg); vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .cursor{ animation:none; } }

.footer{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  color:var(--dim); font-size:11px; margin-top:26px; padding-top:12px; border-top:1px solid var(--line);
}
.footer a{ text-decoration:none; border-bottom:1px dotted var(--dim); }
.footer a:hover{ color:var(--fg-bright); }

.kbd{ border:1px solid var(--line); padding:0 5px; border-radius:2px; font-size:11px; color:var(--dim); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--line); border:2px solid var(--bg); border-radius:6px; }

.notfound{ color:var(--dim); }