/* Deadworks Field Manual.
   Palette, fonts and the hard offset shadows are taken from deadlock.watch and
   stats.deadlock.events so this reads as part of the same set of sites. Body copy is
   Chakra Petch at 17px, exactly as deadlock.watch sets it, because Press Start 2P is a
   display face and a page of it cannot be read. */
:root{
  --bg:#060706; --panel:#0b0e0b; --panel2:#0d140d; --line:#1a2b1e;
  --green:#3ecf5e; --green2:#8fe0a0; --dim:#5da26f;
  --pink:#e055c8; --amber:#e0b33c; --red:#e8584a;
  --ink:#f2f7ee;
  --ex-green:#0b3a18; --ex-ink:#22301f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Chakra Petch",system-ui,sans-serif;font-weight:500;font-size:17px;line-height:1.6;
  -webkit-text-size-adjust:100%;
}

/* ---- shell ---------------------------------------------------------------- */
.shell{display:grid;grid-template-columns:276px minmax(0,1fr);gap:0;min-height:100vh}
@media(max-width:900px){.shell{grid-template-columns:1fr}}

.side{
  background:#000;border-right:2px solid var(--line);
  padding:26px 20px 60px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
@media(max-width:900px){.side{position:static;height:auto;border-right:none;border-bottom:2px solid var(--line)}}

.wordmark{
  font-family:"Press Start 2P",monospace;font-size:15px;line-height:1.5;color:var(--ink);
  text-shadow:1px 1px 0 var(--ex-ink),2px 2px 0 var(--ex-ink),3px 3px 0 #0d140c,5px 5px 10px rgba(0,0,0,.9);
  display:block;text-decoration:none;
}
.wordmark span{
  color:var(--green);
  text-shadow:1px 1px 0 var(--ex-green),2px 2px 0 var(--ex-green),3px 3px 0 #052210,5px 5px 10px rgba(0,0,0,.9);
}
.sidetag{font-family:"VT323",monospace;font-size:19px;color:var(--green2);margin-top:12px;line-height:1.3}

nav{margin-top:26px}
nav .grp{
  font-family:"Press Start 2P",monospace;font-size:9px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.04em;margin:22px 0 9px;
}
nav a{
  display:block;color:var(--green2);text-decoration:none;font-weight:600;font-size:16px;
  padding:6px 10px;border-left:2px solid var(--line);
}
nav a:hover{color:var(--ink);border-left-color:var(--green);background:#0a140c}
nav a.on{color:#03140a;background:var(--green);border-left-color:var(--green);font-weight:700}

.main{padding:34px 40px 100px;max-width:1000px}
@media(max-width:900px){.main{padding:26px 18px 70px}}

/* ---- type ---------------------------------------------------------------- */
h1{
  font-family:"Press Start 2P",monospace;font-size:19px;line-height:1.6;color:var(--ink);margin:0 0 6px;
  text-shadow:2px 2px 0 var(--ex-ink),4px 4px 0 #0d140c,7px 7px 12px rgba(0,0,0,.85);
}
.lede{color:var(--green2);font-size:19px;line-height:1.55;margin:18px 0 8px;max-width:76ch}
h2{
  font-family:"Press Start 2P",monospace;font-size:13px;line-height:1.7;color:var(--green);
  margin:52px 0 16px;padding-top:10px;
  text-shadow:1px 1px 0 var(--ex-green),2px 2px 0 var(--ex-green),4px 4px 0 #052210,7px 7px 10px rgba(0,0,0,.8);
}
h3{font-size:19px;font-weight:700;color:var(--ink);margin:30px 0 9px;letter-spacing:.01em}
h4{font-size:17px;font-weight:700;color:var(--green2);margin:22px 0 7px}
p{margin:12px 0;max-width:80ch}
ul,ol{margin:12px 0 12px 24px;max-width:80ch}
li{margin:6px 0}
a{color:var(--green)}
a:hover{color:var(--green2)}
strong{color:var(--ink);font-weight:700}
em{color:var(--green2);font-style:italic}
hr{border:none;border-top:2px solid var(--line);margin:40px 0}

/* ---- code ---------------------------------------------------------------- */
code{
  font-family:"VT323",ui-monospace,monospace;font-size:18px;
  background:#0a140c;border:1px solid var(--line);padding:1px 6px;color:var(--green2);
  white-space:nowrap;
}
pre{
  background:#000;border:2px solid var(--line);padding:16px 18px;margin:16px 0;
  overflow-x:auto;box-shadow:4px 4px 0 #0b140d,8px 8px 0 #070d08;
}
pre code{
  background:none;border:none;padding:0;white-space:pre;color:var(--ink);
  font-size:17px;line-height:1.5;
}
pre code .c{color:var(--dim)}      /* comment */
pre code .k{color:var(--pink)}     /* keyword */
pre code .s{color:var(--amber)}    /* string */
pre code .n{color:var(--green)}    /* name we care about */

/* ---- cards and callouts -------------------------------------------------- */
.card{
  background:var(--panel);border:2px solid var(--line);padding:20px 22px;margin:20px 0;
  box-shadow:5px 5px 0 #0b140d,10px 10px 0 #070d08;
}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}

.note,.warn,.good{
  border:2px solid var(--line);border-left-width:8px;padding:14px 18px;margin:18px 0;
  background:var(--panel);box-shadow:4px 4px 0 #0b140d;
}
.note{border-left-color:var(--green)}
.warn{border-left-color:var(--amber)}
.good{border-left-color:var(--pink)}
.note > :first-child,.warn > :first-child,.good > :first-child{margin-top:0}
.note > :last-child,.warn > :last-child,.good > :last-child{margin-bottom:0}
.tagline{
  font-family:"Press Start 2P",monospace;font-size:10px;letter-spacing:.03em;
  display:block;margin-bottom:8px;
}
.note .tagline{color:var(--green)}
.warn .tagline{color:var(--amber)}
.good .tagline{color:var(--pink)}

/* ---- tables -------------------------------------------------------------- */
.tw{overflow-x:auto;margin:18px 0;box-shadow:5px 5px 0 #0b140d,10px 10px 0 #070d08}
table{border-collapse:collapse;width:100%;background:var(--panel);border:2px solid var(--line)}
th,td{padding:9px 13px;text-align:left;border-bottom:2px solid var(--line);vertical-align:top;font-size:16px}
th{
  background:#000;color:var(--green);font-family:"Press Start 2P",monospace;
  font-size:9px;letter-spacing:.03em;line-height:1.7;text-transform:uppercase;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel2)}
td code{font-size:17px;white-space:normal}

/* ---- the name list ------------------------------------------------------- */
.names{columns:3;column-gap:22px;margin:16px 0;font-family:"VT323",monospace;font-size:18px;line-height:1.45}
@media(max-width:1000px){.names{columns:2}}
@media(max-width:620px){.names{columns:1}}
.names div{color:var(--green2);break-inside:avoid;padding:1px 0}
.names div b{color:var(--ink);font-weight:400}

/* ---- status pills -------------------------------------------------------- */
.pill{
  display:inline-block;font-family:"Press Start 2P",monospace;font-size:8px;
  letter-spacing:.04em;padding:5px 9px;vertical-align:middle;
}
.pill.ok{background:var(--green);color:#03140a}
.pill.no{background:var(--red);color:#1a0604}
.pill.maybe{background:var(--amber);color:#201703}
.pill.cv{background:#0a140c;color:var(--green2);border:1px solid var(--line)}

/* ---- the big index tiles on the front page ------------------------------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
@media(max-width:760px){.tiles{grid-template-columns:1fr}}
.tile{
  background:var(--panel);border:2px solid var(--line);padding:18px 20px;
  box-shadow:5px 5px 0 #0b140d,10px 10px 0 #070d08;text-decoration:none;display:block;color:inherit;
}
.tile:hover{border-color:var(--green)}
.tile b{
  font-family:"Press Start 2P",monospace;font-size:11px;color:var(--green);display:block;
  line-height:1.7;margin-bottom:9px;
}
.tile span{color:var(--green2);font-size:16px;line-height:1.5;display:block}

footer{
  margin-top:70px;padding-top:22px;border-top:2px solid var(--line);
  color:var(--dim);font-size:15px;
}
footer code{font-size:16px}