:root {
  --bg: #0d1117;
  --fg: #e6edf3;
  --muted: #8b949e;
  --border: #30363d;
  --toolbar-bg: #161b22;
  --accent: #4493f8;
  --code-bg: #161b22;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* Toolbar — quiet, GitHub-ish chrome */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
  padding: 6px 12px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.toolbar .title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted);
}
.toolbar .lang { color: var(--muted); font-size: 0.72rem; }
.theme-pick {
  background: #161b22; color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; font-size: 0.74rem; padding: 3px 8px; cursor: pointer;
}

/* Code view: a fixed line-number gutter beside the horizontally-scrolling code.
   Both <pre> share font-size + line-height + top padding, so rows stay aligned
   (the view never soft-wraps). Surface/gutter colours come from /theme.css. */
main.code { margin: 0; display: flex; align-items: stretch; }
.gutter, pre.code {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}
.gutter {
  flex: none;
  padding: 16px 12px;
  text-align: right;
  white-space: pre;
  user-select: none;
  -webkit-user-select: none;
  border-right: 1px solid rgba(128, 128, 128, 0.22);
  color: #6e7681; /* fallback; /theme.css sets the themed line-number colour */
}
pre.code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--fg);
  overflow-x: auto;
}

/* tree-sitter capture-class colours come from /theme.css, generated per theme
   from inkjet's vendored Helix themes and swapped live by the picker (theme.js).
   pre.code above keeps the github-dark surface as a fallback until it loads. */

/* App pages (login / home / gallery / landing) */
main.app { max-width: 860px; margin: 0 auto; padding: 32px 24px 80px; }
main.app.narrow { max-width: 520px; padding-top: 64px; }
.muted { color: var(--muted); }
.error { color: #f85149; }

.toolbar .brand { font-weight: 700; color: var(--fg); text-decoration: none; font-size: 1rem; }
.toolbar .spacer { flex: 1; }
.toolbar .navlink { color: var(--muted); text-decoration: none; font-size: 0.8rem; margin-left: 12px; }
.toolbar .navlink:hover { color: var(--fg); }

.field {
  width: 100%; padding: 8px 10px; margin-bottom: 12px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.uploader {
  border: 1px dashed var(--border); border-radius: 10px; padding: 24px;
  margin-bottom: 24px; text-align: center; transition: border-color 120ms, background 120ms;
}
.uploader.drag { border-color: var(--accent); background: rgba(68, 147, 248, 0.06); }
.drop-hint { color: var(--muted); margin: 0 0 14px; }
.uploader-actions { display: flex; gap: 10px; justify-content: center; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.upload-status { margin-top: 14px; font-size: 0.85rem; }
.upload-status.ok { color: #3fb950; }
.upload-status.error { color: #f85149; }
.upload-status a { color: var(--accent); }

.files .card.file {
  display: flex; align-items: center; gap: 12px;
  background: var(--toolbar-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; margin: 8px 0;
}
.files .card.file .fname {
  color: var(--fg); text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.files .card.file .del { margin-left: auto; }
.lang-logo { display: inline-flex; flex: none; align-items: center; }
.lang-logo svg { height: 22px; width: auto; max-width: 44px; display: block; }
.lang-logo-generic svg { fill: var(--muted); }
.btn {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--border);
  border-radius: 6px; color: var(--fg); background: var(--toolbar-bg);
  text-decoration: none; font-size: 0.9rem;
}
.btn:hover { border-color: var(--accent); }
.fname { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Markdown view: prose + alert callouts are styled by the vendored
   github-markdown-dark CSS (loaded per-page in md.html). We only set page layout;
   our inkjet token classes (.code .keyword …) still colour the fenced code, which
   github-markdown-css doesn't touch. */
main.markdown { max-width: 860px; margin: 0 auto; padding: 32px 24px 80px; }
.markdown-body { box-sizing: border-box; }
.markdown-body .octicon { margin-right: 0.5rem; }