/* Monochrome, monospace, blocky. Two skins: paper and ink. */

:root {
  --bg: #f7f7f5;
  --panel: #ffffff;
  --ink: #000000;
  --line: #e0e0dc;
  --dim: #8c8c86;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono",
          "Roboto Mono", Consolas, monospace;
}

:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --panel: #131312;
  --ink: #f4f4f0;
  --line: #292927;
  --dim: #77776f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13.5px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- chrome */

.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
}
.logo { image-rendering: pixelated; }
h1 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.grow { flex: 1; }
.dim { color: var(--dim); }

.chip {
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 4px;
  font-size: 11px; letter-spacing: 0.06em; color: var(--dim); white-space: nowrap;
}
.chip.on { color: var(--ink); border-color: var(--ink); }
.chip.err { border-style: dashed; }

.btn {
  padding: 6px 13px; border: 1px solid var(--ink); border-radius: 4px;
  background: transparent; color: var(--ink); font: inherit; font-size: 11.5px;
  letter-spacing: 0.06em; cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--ink); color: var(--panel); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }
.btn.wide { display: block; width: 100%; padding: 11px; margin-bottom: 4px; }
.btn.tiny { padding: 3px 8px; font-size: 10.5px; }
.btn.icon { padding: 5px 9px; font-size: 13px; letter-spacing: 0; }
.btn.rec { background: var(--ink); color: var(--panel); }

.check { font-size: 11px; letter-spacing: 0.06em; color: var(--dim); display: flex; gap: 5px; align-items: center; }
.check input { accent-color: var(--ink); }

.tabs { display: flex; gap: 22px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.tab {
  padding: 11px 0; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--dim); font: inherit; font-size: 11.5px; letter-spacing: 0.09em; cursor: pointer;
}
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }

main { max-width: 820px; margin: 0 auto; padding: 24px 22px 70px; }
.view { display: none; }
.view.active { display: block; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 13px; margin-bottom: 16px; overflow: hidden;
}
.panel-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 17px; border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.1em;
}
.panel-bd { padding: 17px; }
.panel-bd p { margin: 0 0 12px; max-width: 62ch; }
.cap { color: var(--dim); font-size: 12px; margin: 10px 0 0 !important; }
.note {
  color: var(--dim); font-size: 11.5px; margin: 14px 0 0 !important;
  padding-top: 12px; border-top: 1px solid var(--line);
}

/* Block-drawing bars line up into a grid in a monospace face, which is the whole trick. */
.rows {
  margin: 0; font: inherit; font-size: 13px; line-height: 1.5;
  white-space: pre; overflow-x: auto; letter-spacing: 0;
}
.rows .hd { color: var(--dim); }
.rows .best { font-weight: 700; }
.rows .fade { color: var(--dim); }

.chart {
  display: block; width: 100%; height: 150px; margin-top: 16px;
  image-rendering: pixelated;
}

/* ------------------------------------------------------------- capybara */

.capy { display: block; width: 100%; height: 130px; image-rendering: pixelated; }
.capy.pacer { height: 240px; }

.pace-rate { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 4px; }
.pace-text { text-align: center; font-size: 12px; letter-spacing: 0.22em; color: var(--dim); }
.pace-bar { text-align: center; margin-top: 8px !important; }

/* ------------------------------------------------------------------ tags */

.tags { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.tag-hd { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 10px; }
.tag-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.tag-label { font-size: 10.5px; letter-spacing: 0.09em; color: var(--dim); min-width: 52px; }

.tag {
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--dim); font: inherit; font-size: 11px;
  letter-spacing: 0.04em; cursor: pointer;
}
.tag:hover { border-color: var(--ink); color: var(--ink); }
.tag[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }

.tag-note {
  flex: 1; min-width: 180px; padding: 4px 9px; font: inherit; font-size: 11.5px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px;
}
.tag-note:focus { outline: none; border-color: var(--ink); }
.tag-note::placeholder { color: var(--dim); }

.winner { margin-bottom: 18px; }
.winner strong { display: block; font-size: 27px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 6px; }
.winner span { color: var(--dim); font-size: 12.5px; }

/* ----------------------------------------------------------------- prose */

.prose { max-width: 68ch; }
.prose h1 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 18px; }
.prose h2 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  margin: 30px 0 10px; padding-top: 14px; border-top: 1px solid var(--line);
}
.prose h3 { font-size: 13px; font-weight: 600; margin: 20px 0 8px; }
.prose p { margin: 0 0 13px; line-height: 1.75; }
.prose ul, .prose ol { margin: 0 0 13px; padding-left: 22px; }
.prose li { margin-bottom: 8px; line-height: 1.7; }
.prose blockquote {
  margin: 16px 0; padding: 12px 16px;
  border-left: 2px solid var(--ink); background: var(--bg); line-height: 1.7;
}
.prose hr { border: none; border-top: 1px solid var(--line); margin: 26px 0; }
.prose code { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.prose a { color: var(--ink); }
.prose strong { font-weight: 600; }