/* netrnnr.net — 95/terminal theme. No webfonts, no build step. */
:root {
  --face: #c0c0c0;
  --hi: #ffffff;
  --light: #dfdfdf;
  --shadow: #808080;
  --dark: #0a0a0a;
  --navy: #000080;
  --title-a: #000080;
  --title-b: #1084d0;
  --desk: #008080;
  --term-bg: #000000;
  /* guest = cyan */
  --term-fg: #3fe0ff;
  --term-dim: #1b8fa8;
  --term-acc: #d8f9ff;
  --term-glow: rgba(63,224,255,.45);
  --amber: #ffb000;
  --ui-font: "Pixelated MS Sans Serif", "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  --mono: "Perfect DOS VGA 437", "Lucida Console", "Courier New", ui-monospace, monospace;
  --out: inset -1px -1px var(--dark), inset 1px 1px var(--hi), inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  --in: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
  --field: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 12px/1.4 var(--ui-font);
  color: #000;
  background-color: var(--desk);
  /* 2px checker dither, the way 16-colour desktops faked texture */
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.06) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.06) 75%),
    linear-gradient(45deg, rgba(0,0,0,.06) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.06) 75%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  overflow: hidden;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
canvas.sprite, img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: #0000ee; }
a:visited { color: #551a8b; }
::selection { background: var(--navy); color: #fff; }
/* logged in = red */
body.authed { --term-fg: #ff3b3b; --term-dim: #a8242a; --term-acc: #ffd0d0; --term-glow: rgba(255,59,59,.5); }

/* ── desktop + icons ── */
#desktop { position: absolute; inset: 0 0 30px 0; }
#icons {
  position: absolute; top: 8px; left: 8px; bottom: 8px;
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 6px;
}
.icon {
  width: 76px; padding: 4px 2px; border: 1px dotted transparent;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; text-align: center; text-decoration: none; cursor: default;
  background: none; font: inherit;
}
.icon canvas { width: 32px; height: 32px; }
.icon span { padding: 0 2px; text-shadow: 1px 1px 0 #000; word-break: break-word; }
.icon:focus { outline: none; border-color: #fff; }
.icon:focus span, .icon.sel span { background: var(--navy); text-shadow: none; }
.icon:focus canvas, .icon.sel canvas { filter: sepia(1) hue-rotate(190deg) saturate(4) brightness(.7); }

/* ── windows ── */
.window {
  position: absolute; min-width: 240px;
  background: var(--face); box-shadow: var(--out); padding: 3px;
  display: flex; flex-direction: column;
}
.window[hidden] { display: none; }
.title-bar {
  display: flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 2px 0 3px;
  background: linear-gradient(90deg, var(--shadow), #b5b5b5);
  color: var(--light); font-weight: bold; user-select: none; touch-action: none;
}
.window.active .title-bar { background: linear-gradient(90deg, var(--title-a), var(--title-b)); color: #fff; }
.title-bar canvas { width: 16px; height: 16px; }
.title-bar .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.title-bar button {
  width: 16px; height: 14px; padding: 0; margin-left: 2px;
  background: var(--face); box-shadow: var(--out); border: 0;
  font: bold 10px/1 var(--mono); color: #000; cursor: pointer;
}
.title-bar button:active { box-shadow: var(--in); }
.menu-bar { display: flex; gap: 2px; padding: 2px 0; }
.menu-bar span { padding: 1px 6px; }
.menu-bar span:hover { background: var(--navy); color: #fff; }
.window-body { margin: 6px; flex: 1; min-height: 0; overflow: auto; }
.window-body.field { margin: 2px; padding: 8px; background: #fff; box-shadow: var(--field); }
.status-bar { display: flex; gap: 2px; margin-top: 2px; }
.status-bar p { flex: 1; margin: 0; padding: 1px 4px; box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow); }

/* ── controls ── */
button.btn, a.btn {
  min-width: 75px; padding: 4px 10px; border: 0; background: var(--face); box-shadow: var(--out);
  font: inherit; color: #000; text-decoration: none; display: inline-block; text-align: center; cursor: pointer;
}
button.btn:active, a.btn:active { box-shadow: var(--in); }
button.btn:focus-visible, a.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
fieldset { border: 0; box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--shadow), inset 2px 2px var(--hi); padding: 10px; margin: 0 0 8px; }
legend { padding: 0 3px; background: var(--face); }
hr.etched { border: 0; border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--hi); }

/* ── explorer grid ── */
.explorer { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; align-content: start; }
.explorer .icon { color: #000; width: auto; }
.explorer .icon span { text-shadow: none; }
.explorer .icon:focus span { color: #fff; }
.explorer .icon.off { opacity: .45; }

/* ── list (blog) ── */
ul.tree { list-style: none; margin: 0; padding: 0; }
ul.tree li { padding: 3px 2px; display: flex; gap: 8px; align-items: baseline; }
ul.tree li time { font-family: var(--mono); color: var(--shadow); white-space: nowrap; }

/* ── terminal ── */
.terminal {
  margin: 2px; flex: 1; min-height: 0; overflow: auto; padding: 6px 8px;
  background: var(--term-bg); color: var(--term-fg); box-shadow: var(--field);
  font: 13px/1.35 var(--mono); word-break: break-word;
  text-shadow: 0 0 4px var(--term-glow);
  position: relative;
}
#term-out > div { white-space: pre-wrap; }
.terminal .dim { color: var(--term-dim); }
.terminal .acc { color: var(--term-acc); }
.terminal .err { color: var(--amber); text-shadow: 0 0 4px rgba(255,176,0,.45); }
.terminal a { color: var(--term-acc); }
.terminal .line { display: flex; }
.terminal input {
  flex: 1; background: transparent; border: 0; outline: 0; padding: 0;
  color: inherit; font: inherit; text-shadow: inherit; caret-color: var(--term-fg);
}

/* ── taskbar ── */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 30px; z-index: 9000;
  display: flex; align-items: center; gap: 4px; padding: 2px;
  background: var(--face); box-shadow: inset 0 1px var(--light), inset 0 2px var(--hi);
}
#start {
  display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 4px;
  border: 0; background: var(--face); box-shadow: var(--out); font: bold 12px var(--ui-font); cursor: pointer;
}
#start[aria-expanded="true"] { box-shadow: var(--in); }
#start canvas { width: 16px; height: 16px; }
#tasks { flex: 1; display: flex; gap: 3px; overflow: hidden; height: 100%; align-items: center; }
#tasks button {
  max-width: 160px; flex: 0 1 160px; height: 24px; display: flex; align-items: center; gap: 4px; padding: 0 6px;
  border: 0; background: var(--face); box-shadow: var(--out); font: inherit; text-align: left; cursor: pointer;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#tasks button canvas { width: 16px; height: 16px; flex: none; }
#tasks button.active { box-shadow: var(--in); font-weight: bold;
  background-image: linear-gradient(45deg, var(--hi) 25%, transparent 25%, transparent 75%, var(--hi) 75%),
                    linear-gradient(45deg, var(--hi) 25%, transparent 25%, transparent 75%, var(--hi) 75%);
  background-size: 2px 2px; background-position: 0 0, 1px 1px; }
#tray {
  height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 8px;
  box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow);
}
#tray canvas { width: 16px; height: 16px; }

/* ── start menu ── */
#startmenu {
  position: fixed; bottom: 28px; left: 2px; z-index: 9001; display: flex;
  background: var(--face); box-shadow: var(--out); padding: 3px;
}
#startmenu[hidden] { display: none; }
#startmenu .side {
  width: 22px; background: linear-gradient(0deg, var(--title-a), var(--title-b));
  color: var(--face); font: bold 16px var(--ui-font); writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 6px 0; letter-spacing: 1px;
}
#startmenu .side b { color: #fff; }
#startmenu ul { list-style: none; margin: 0; padding: 0; min-width: 180px; }
#startmenu li button, #startmenu li a {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 5px 20px 5px 6px;
  border: 0; background: none; font: inherit; color: #000; text-decoration: none; text-align: left; cursor: pointer;
}
#startmenu li button:hover, #startmenu li a:hover, #startmenu li button:focus, #startmenu li a:focus { background: var(--navy); color: #fff; outline: none; }
#startmenu li canvas { width: 24px; height: 24px; }
#startmenu li.sep { height: 0; margin: 3px 2px; border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--hi); }

/* ── netrunner corner scene ── */
#netrunner { position: absolute; right: 8px; bottom: 4px; width: 192px; height: 144px; z-index: 1; cursor: pointer; }

/* ── standalone pages (blog posts, 404) ── */
body.page { overflow: auto; padding: 24px 12px 48px; }
body.page .window { position: relative; margin: 0 auto; max-width: 760px; }
body.page .window-body.field { padding: 16px 20px; font-size: 13px; line-height: 1.6; }
body.page h1 { font: bold 18px var(--ui-font); margin: 0 0 4px; }
body.page .meta { font-family: var(--mono); color: var(--shadow); margin-bottom: 16px; }
body.page pre, body.page code { font-family: var(--mono); }
body.page pre { background: #000; color: var(--term-fg); padding: 8px; box-shadow: var(--field); overflow: auto; }

/* ── small screens: no dragging, windows stack ── */
@media (max-width: 720px) {
  body:not(.page) { overflow: auto; }
  #desktop { position: static; padding: 8px 8px 40px; display: flex; flex-direction: column; gap: 10px; }
  #icons { position: static; flex-direction: row; flex-wrap: wrap; }
  .window { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; }
  .window .terminal { min-height: 260px; max-height: 60vh; }
  .title-bar .max { display: none; }
  #netrunner { position: static; align-self: flex-end; width: 128px; height: 96px; order: 99; }
}

/* ── forms ── */
.field-in, select.field-in, textarea.field-in {
  font: inherit; padding: 3px 4px; border: 0; background: #fff; color: #000; box-shadow: var(--field); width: 100%;
}
textarea.field-in { font-family: var(--mono); resize: vertical; }
.field-in:focus { outline: 1px dotted #000; outline-offset: -4px; }
label { display: block; margin: 0 0 6px; }
input[type=checkbox] { accent-color: var(--navy); }
.right { text-align: right; }
button.btn.default, a.btn.default { box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--dark), inset -2px -2px var(--shadow), inset 2px 2px var(--hi), inset -3px -3px var(--shadow), inset 3px 3px var(--light); }
button.btn:disabled { color: var(--shadow); text-shadow: 1px 1px var(--hi); }
.btn.danger { color: #900; }

/* ── logon dialog ── */
.logon-row { display: flex; gap: 12px; align-items: flex-start; }
.logon-row > canvas { width: 32px; height: 32px; flex: none; }
.logon-row > div:nth-child(2) { flex: 1; }
.logon-btns { display: flex; flex-direction: column; gap: 6px; }
.err { color: #a00; min-height: 1em; margin: 4px 0 0; }

/* ── explorer with thumbnails (portfolio) ── */
.explorer.big { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.explorer .icon img.thumb { width: 128px; height: 84px; object-position: top; object-fit: cover; box-shadow: var(--field); padding: 2px; background: #fff; }
.explorer.big .icon canvas { width: 48px; height: 48px; margin: 8px 0; }

/* ── prose (markdown output) ── */
.prose > :first-child { margin-top: 0; }
.prose img { max-width: 100%; height: auto; }
.prose code { font-family: var(--mono); background: #eee; padding: 0 2px; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin: 0 0 1em; padding: 4px 10px; border-left: 3px solid var(--shadow); color: #333; }
.prose table { border-collapse: collapse; }
.prose td, .prose th { border: 1px solid var(--shadow); padding: 2px 6px; }

/* ── hash tool ── */
.hash-tool textarea { margin-bottom: 6px; }
.hash-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.hash-row .hash-src { flex: 1; color: var(--shadow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-btn { cursor: pointer; }
.hash-out { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hash-out th { width: 70px; text-align: left; font-weight: normal; padding: 3px 0; vertical-align: top; }
.hash-out code { display: block; min-height: 1.4em; padding: 2px 4px; background: #fff; box-shadow: var(--field); font: 11px/1.4 var(--mono); word-break: break-all; cursor: copy; }
.hash-out code.copied { background: var(--navy); color: #fff; }
.hash-note { color: var(--shadow); margin: 4px 0 0; }

/* ── standalone pages: portfolio ── */
body.page .window.wide { max-width: 1000px; }
.title-bar .tb-x { width: 16px; height: 14px; margin-left: auto; display: flex; align-items: center; justify-content: center; background: var(--face); box-shadow: var(--out); color: #000; text-decoration: none; font: bold 10px/1 var(--mono); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pf-card { display: flex; flex-direction: column; gap: 3px; color: #000; text-decoration: none; padding: 6px; border: 1px dotted transparent; }
.pf-card:hover, .pf-card:focus { border-color: #000; outline: none; }
.pf-card:focus b { background: var(--navy); color: #fff; }
.pf-thumb { aspect-ratio: 4/3; background: var(--face); box-shadow: var(--field); padding: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-thumb canvas { width: 64px; height: 64px; }
.pf-card small { color: var(--shadow); }
.pf-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 10px; margin-bottom: 10px; }
.pf-detail h1 { margin: 0 0 6px; }
.viewer { background: #000; box-shadow: var(--field); padding: 3px; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.viewer img, .viewer video { max-width: 100%; max-height: 70vh; display: block; }
.thumbs { display: flex; gap: 4px; margin-top: 6px; overflow-x: auto; }
.thumbs button { flex: none; width: 64px; height: 48px; padding: 2px; border: 0; background: var(--face); box-shadow: var(--out); cursor: pointer; }
.thumbs button.on { box-shadow: var(--in); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.props td { padding: 1px 8px 1px 0; vertical-align: top; }
.tag { display: inline-block; padding: 0 4px; background: #fff; box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow); margin: 0 2px 2px 0; }
.pf-links { display: flex; flex-wrap: wrap; gap: 6px; }
body.page .field.prose { padding: 14px 18px; background: #fff; box-shadow: var(--field); font-size: 13px; line-height: 1.6; }
@media (max-width: 720px) { .pf-detail { grid-template-columns: 1fr; } }

/* ── misc ── */
.shutdown { position: fixed; inset: 0; z-index: 99999; background: #000; color: var(--amber); display: flex; align-items: center; justify-content: center; text-align: center; font: 20px/1.6 var(--mono); cursor: pointer; padding: 20px; }
.shutdown small { font-size: 12px; opacity: .6; }
.noscript { position: fixed; inset: 0; background: #000; color: var(--term-fg); font: 14px var(--mono); padding: 20px; z-index: 99999; }
.noscript a { color: var(--term-acc); }
#tray-user { font-family: var(--mono); }
body.authed #tray-user { color: #a00; font-weight: bold; }