/* ============================================================
   gitoskop — merged stylesheet
   Section 1: structure/reset/fonts, verbatim from the zoryn landing
   prototype (ui/_ds/zoryn-site-.../src/landing.css).
   Section 2: dark-blue palette + app overrides, verbatim from the
   Gitoskop.dc.html design-handoff prototype's inline <style>.
   The blue :root in Section 2 comes after Section 1's font/radii
   :root so both survive (disjoint keys) and overrides --shadow-1/
   --glow; Section 2's body{} rule likewise overrides Section 1's
   body background so the app never shows the landing page's amber
   tint — dark blue is the only palette that ends up on screen.
   ============================================================ */

:root {
  --mono: "JetBrains Mono", "IBM Plex Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter Tight", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --display: "Space Grotesk", "Inter Tight", ui-sans-serif, system-ui, sans-serif;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
              0 12px 40px -16px rgba(0, 0, 0, 0.6);
  --glow: 0 0 0 1px var(--accent-line), 0 0 40px -10px var(--accent-soft);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-0); color: var(--text-1); -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(240, 160, 45, 0.07), transparent 60%),
    var(--bg-0);
  color: var(--text-1);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-strong); }
code, kbd, pre { font-family: var(--mono); }

/* Selection */
::selection { background: var(--accent-soft); color: var(--text-1); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ============================================================
   Top bar — shared across pages
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: stretch; gap: 16px;
  padding: 0 20px 0 12px;
  min-height: 54px;
  background: color-mix(in oklab, var(--bg-1) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar > * { align-self: center; }

.wordmark {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.wordmark a {
  color: var(--text-1);
  transition: color 120ms;
}
.wordmark a:hover { color: var(--accent); }
.wordmark .mark {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--accent);
  padding: 2px 6px;
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  line-height: 1;
  position: relative;
  top: -1px;
}
.wordmark .slash {
  color: var(--text-3);
  font-weight: 400;
  font-size: 14px;
  font-family: var(--mono);
}

.tb-controls { display: flex; align-items: center; gap: 6px; }
.tb-controls .pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  border: 1px solid var(--border);
  background: var(--bg-1);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.tb-controls .pill:hover { border-color: var(--border-strong); color: var(--text-1); }
.tb-controls .pill .dim { color: var(--text-3); }
.tb-controls .pill .on { color: var(--accent); }

/* Search form — pixel-matches Material's .md-search__form inline search
   in docs topbar (background/hover/height/radius/font are copied 1:1).
   Submitting (Enter) navigates to /docs/?q=<value>. */
.tb-controls .tb-search {
  position: relative;
  display: inline-flex; align-items: center;
  height: 1.8rem;
  width: 11.7rem;
  background-color: #00000042;
  border-radius: 0.1rem;
  transition: background-color 250ms;
}
.tb-controls .tb-search:hover,
.tb-controls .tb-search:focus-within { background-color: #ffffff1f; }
.tb-controls .tb-search svg {
  position: absolute;
  left: 0.8rem;
  top: 0.5rem;
  width: 0.8rem;
  height: 0.8rem;
  color: var(--text-3);
  pointer-events: none;
}
.tb-controls .tb-search input {
  width: 100%; height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: 0.8rem;
  padding: 0 0.8rem 0 2.2rem;
  box-sizing: border-box;
}
.tb-controls .tb-search input::placeholder { color: var(--text-3); }
.tb-controls .tb-search input::-webkit-search-cancel-button,
.tb-controls .tb-search input::-webkit-search-decoration { -webkit-appearance: none; }

/* ============================================================
   Shared components
   ============================================================ */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 140ms ease;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: #1a1107;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-strong); color: #1a1107; transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--text-1);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-2); color: var(--text-1); border-color: var(--accent-line); }

/* ============================================================
   Dark palette in the spirit of packages.altlinux.org
   (altrepo_front dark theme) — from Gitoskop.dc.html
   ============================================================ */
:root {
  --bg-0: #1a1d21; --bg-1: #212529; --bg-2: #282c31; --bg-3: #2f343a; --bg-4: #3a4046;
  --border: #363c43; --border-strong: #495057;
  --text-1: #e9ecef; --text-2: #ced4da; --text-3: #949ba3; --text-4: #6a7178;
  --accent: #6ea8fe; --accent-strong: #8bb9fe; --accent-soft: rgba(110, 168, 254, 0.12); --accent-line: rgba(110, 168, 254, 0.35);
  --rose: #e685b5; --moss: #75b798; --sky: #6edff6; --red: #ea868f;
  --syn-keyword: #ea868f; --syn-string: #a3cfbb; --syn-number: #ffda6a; --syn-comment: #6a7178;
  --syn-fn: #6ea8fe; --syn-punct: #949ba3; --syn-flag: #e0aa78; --syn-ok: #75b798; --syn-err: #ea868f;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 12px 40px -16px rgba(0, 0, 0, 0.6);
  --glow: 0 0 0 1px var(--accent-line);
}
body { overflow: hidden; background: var(--bg-0); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #101418; }
.btn-primary:hover { background: var(--accent-strong); color: #101418; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: var(--syn-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--syn-string); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--syn-number); }
.hljs-comment, .hljs-quote, .hljs-deletion { color: var(--syn-comment); font-style: italic; }
.hljs-title, .hljs-section { color: var(--syn-fn); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-class { color: var(--syn-flag); }
.hljs-meta, .hljs-punctuation { color: var(--syn-punct); }
.hljs-built_in, .hljs-name, .hljs-selector-class { color: var(--sky); }
@keyframes gk-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

/* ============================================================
   .copy-btn — Raw/Download chips on the blob view
   ============================================================ */
.copy-btn {
  font-family: var(--mono);
  font-size: 11.5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  color: var(--text-3);
}
.copy-btn:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}

.tree-row:hover { background: var(--bg-2) !important; }
.root-card:hover { border-color: var(--accent-line) !important; }

/* Row/link hover states (ported from prototype style-hover) */
.hl-row:hover { background: var(--bg-2) !important; }
.hl-tab:hover { color: var(--text-1) !important; }
.hl-raw:hover { color: var(--accent) !important; }

.hl-sort:hover { color: var(--text-1) !important; }

/* Rendered Markdown (README cards + .md blobs). Uses the design tokens so it
   reads as part of the dark-blue theme, not a stock GitHub sheet. */
.md-body { font-family: var(--sans); font-size: 14px; line-height: 1.65; color: var(--text-2); word-wrap: break-word; }
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child { margin-bottom: 0; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
  font-family: var(--display); color: var(--text-1); font-weight: 600; line-height: 1.25;
  margin: 22px 0 12px; letter-spacing: -0.01em;
}
.md-body h1 { font-size: 24px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.md-body h2 { font-size: 20px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.md-body h3 { font-size: 17px; }
.md-body h4 { font-size: 15px; }
.md-body h5, .md-body h6 { font-size: 13px; color: var(--text-3); }
.md-body p { margin: 0 0 12px; }
.md-body a { color: var(--accent); text-decoration: none; }
.md-body a:hover { color: var(--accent-strong); text-decoration: underline; }
.md-body strong { color: var(--text-1); font-weight: 600; }
.md-body ul, .md-body ol { margin: 0 0 12px; padding-left: 24px; }
.md-body li { margin: 3px 0; }
.md-body li > p { margin: 0 0 6px; }
.md-body code {
  font-family: var(--mono); font-size: 12px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text-1);
}
.md-body pre {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; line-height: 1.55;
}
.md-body pre code { background: none; border: none; padding: 0; font-size: 12.5px; color: var(--text-2); }
.md-body blockquote {
  margin: 0 0 12px; padding: 2px 14px; border-left: 3px solid var(--border-strong);
  color: var(--text-3);
}
.md-body hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.md-body table { border-collapse: collapse; margin: 0 0 14px; display: block; overflow-x: auto; }
.md-body th, .md-body td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; }
.md-body th { background: var(--bg-2); color: var(--text-1); font-weight: 600; }
.md-body img { max-width: 100%; height: auto; }
.md-body kbd {
  font-family: var(--mono); font-size: 11px; background: var(--bg-3);
  border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 5px;
}