/* Drawn console — pencil on paper, but a tool first: dense tables, clear states. */
@font-face { font-family: "Caveat"; src: url("fonts/Caveat.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/Oswald.ttf") format("truetype"); font-display: swap; }

:root {
  --paper: #efe9dc; --paper-2: #e6dfcf; --card: #f8f4ea; --ink: #2a2724; --ink-2: #5b5650; --rule: #cfc6b3;
  --blood: #b5383a; --ochre: #c99a3c; --prussian: #2f5d7c; --verdigris: #3f8a76; --shadow: rgba(40, 30, 20, 0.12);
  --hand: "Caveat", "Segoe Print", cursive; --title: "Oswald", "Arial Narrow", sans-serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1c1b19; --paper-2: #24221f; --card: #2a2825; --ink: #ece6d8; --ink-2: #b3ab9c; --rule: #45413b;
    --blood: #e0605f; --ochre: #e3b04b; --prussian: #6fa3c7; --verdigris: #6cc0a8; --shadow: rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --paper: #1c1b19; --paper-2: #24221f; --card: #2a2825; --ink: #ece6d8; --ink-2: #b3ab9c; --rule: #45413b;
  --blood: #e0605f; --ochre: #e3b04b; --prussian: #6fa3c7; --verdigris: #6cc0a8; --shadow: rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font: 15px/1.45 var(--ui); }
a { color: var(--prussian); }
code { font: 12px/1.3 ui-monospace, Menlo, Consolas, monospace; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
h1, h2, h3 { font-family: var(--title); font-weight: 600; letter-spacing: 0.02em; margin: 0 0 14px; }
h2 { font-size: 28px; } h2 a { color: var(--ink-2); text-decoration: none; }
h3 { font-size: 18px; text-transform: uppercase; color: var(--ink-2); }
.hand { font-family: var(--hand); font-size: 22px; color: var(--ink-2); }
.error { color: var(--blood); min-height: 1.4em; }

.login { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.sheet { width: min(420px, 100%); display: grid; gap: 14px; }
.sheet h1 { font-size: 40px; margin: 0; } .sheet h1 span { font-family: var(--hand); color: var(--blood); font-weight: 400; margin-left: 6px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
input, select { font: inherit; color: var(--ink); background: var(--card); border: 1.5px solid var(--rule); border-radius: 6px; padding: 8px 10px; min-width: 0; }
input:focus-visible, select:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100%; }
.side { background: var(--paper-2); border-right: 1.5px solid var(--rule); padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; }
.brand { font: 600 26px var(--title); } .brand span { display: block; font: 22px var(--hand); color: var(--blood); margin-top: -6px; }
nav { display: grid; gap: 2px; }
nav a { color: var(--ink); text-decoration: none; padding: 7px 10px; border-radius: 6px; }
nav a:hover { background: var(--card); }
nav a.active { background: var(--card); box-shadow: inset 3px 0 0 var(--blood); font-weight: 600; }
.side-foot { margin-top: auto; display: grid; gap: 8px; font-size: 12px; color: var(--ink-2); word-break: break-all; }
.main { padding: 26px clamp(16px, 3vw, 36px) 60px; outline: none; min-width: 0; }

.card { background: var(--card); border: 1.5px solid var(--rule); border-radius: 10px; padding: 18px; margin-bottom: 18px; box-shadow: 3px 4px 0 var(--shadow); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile { background: var(--card); border: 1.5px solid var(--rule); border-radius: 10px; padding: 14px 16px; box-shadow: 3px 4px 0 var(--shadow); text-decoration: none; color: inherit; }
.tile .n { font: 600 34px var(--title); } .tile .n.small { font-size: 20px; }
.tile .l { color: var(--ink-2); } .tile .s { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.tile.link:hover { border-color: var(--ink-2); }

.btn { font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1.5px solid var(--ink-2); border-radius: 6px; padding: 7px 12px; cursor: pointer; text-decoration: none; display: inline-block; filter: url(#rough); }
.btn:hover { background: var(--paper-2); }
.btn.heavy { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
.btn.danger { color: var(--blood); border-color: var(--blood); }
.btn.ghost { border-style: dashed; }
.btn.small { padding: 3px 9px; font-size: 13px; }

.bar-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 12px; }
.bar-row input[type="search"] { flex: 1 1 220px; }
.spacer { flex: 1; } .count { color: var(--ink-2); font-size: 13px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 600 12px var(--ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); border-bottom: 1.5px solid var(--ink-2); padding: 8px; white-space: nowrap; }
td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:hover td { background: var(--paper-2); }
.tag { display: inline-block; font-size: 12px; padding: 0 7px; border-radius: 10px; border: 1px solid var(--rule); color: var(--ink-2); }
.tag.on, .tag.verified { color: var(--verdigris); border-color: var(--verdigris); }
.tag.unverified { color: var(--ochre); border-color: var(--ochre); }
.tag.revoked, .tag.invalid { color: var(--blood); border-color: var(--blood); }

.legend { font-size: 13px; color: var(--ink-2); display: flex; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
.k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -8px; }
.chart { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: 170px; align-items: end; }
.day { display: grid; grid-template-rows: 1fr auto; height: 100%; }
.stack { display: flex; align-items: end; gap: 2px; height: 100%; border-bottom: 1.5px solid var(--ink-2); }
.bar { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.dev { background: var(--prussian); } .usr { background: var(--verdigris); } .lvl { background: var(--ochre); } .pur { background: var(--blood); }
.dl { font-size: 11px; color: var(--ink-2); text-align: center; height: 16px; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 14px 0; }
.facts dt { color: var(--ink-2); } .facts dd { margin: 0; }
.preview { background: var(--paper); border: 1.5px solid var(--rule); border-radius: 8px; height: 260px; }
.preview svg { width: 100%; height: 100%; }
.preview .ground { fill: var(--ink-2); fill-opacity: 0.35; stroke: var(--ink); stroke-width: 6; }
.preview .pool { fill: var(--prussian); fill-opacity: 0.35; } .preview .pool.acid { fill: #9bb83a; } .preview .pool.lava { fill: #d8562c; }
.preview .pool.quicksand, .preview .pool.bog { fill: var(--ochre); } .preview .prop { fill: var(--ochre); }
.preview .spawn { fill: var(--verdigris); } .preview .finish { fill: var(--blood); }

dialog { border: 1.5px solid var(--rule); border-radius: 10px; background: var(--card); color: var(--ink); max-width: min(720px, 92vw); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 30px); opacity: 0; transition: 0.2s; background: var(--ink); color: var(--paper); padding: 9px 16px; border-radius: 8px; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.bad { background: var(--blood); }
.loading { color: var(--ink-2); padding: 20px; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 10px; }
  nav { display: flex; flex-wrap: wrap; gap: 4px; }
  nav a { padding: 5px 8px; }
  .side-foot { margin: 0; flex-direction: row; display: flex; align-items: center; }
  .main { padding: 18px 16px 50px; }
  .facts { grid-template-columns: 1fr; }
}