/* styles.css
   ==========================================================================
   The design system for the README viewer.

   EVERYTHING you would normally want to tweak lives in the :root block right
   below as named "tokens" (CSS variables). Change a value there and the whole
   page updates. The rules after that just wire those tokens into the page, so
   you rarely need to touch them.

   The default values are GitHub's dark theme: a near-black canvas, near-white
   text, and blue links.
   ========================================================================== */

:root {
  /* ---- Colors -------------------------------------------------------- */
  --bg: #0d1117; /* page background (the canvas) */
  --bg-elevated: #161b22; /* code blocks, table header rows */
  --bg-inline-code: rgba(110, 118, 129, 0.4); /* `inline code` background */

  --text: #e6edf3; /* main body text, near white */
  --text-muted: #9198a1; /* captions, quotes, footnotes */

  --link: #4493f8; /* links, blue */
  --link-hover: #6cb0ff; /* link color on hover */

  --border: #30363d; /* lines: rules, table borders, quote bar */
  --border-strong: #3d444d; /* slightly stronger border when needed */

  --mark-bg: #bb800926; /* highlighted ==text== style, subtle amber */
  --checkbox: #6e7681; /* task-list checkbox color */

  /* ---- Type --------------------------------------------------------- */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;
  --font-size: 16px;
  --line-height: 1.6;

  /* ---- Layout ------------------------------------------------------- */
  --content-width: 1012px; /* max width of the reading column */
  --content-pad: 32px; /* space between text and the window edge */
  --radius: 6px; /* rounded corners on code blocks, etc. */
  --scroll-offset: 16px; /* gap above a heading you jumped to */
}

/* ---- Base ----------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;
}

.page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--content-pad);
}

/* Small loading / error note shown until the README is in. */
.status {
  color: var(--text-muted);
  font-size: 0.95em;
}

/* Anything we jumped to should not hide under the top of the window. */
.markdown-body :target {
  scroll-margin-top: var(--scroll-offset);
}
[id] {
  scroll-margin-top: var(--scroll-offset);
}

/* ---- Headings ------------------------------------------------------- */

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 24px 0 16px;
  font-weight: 600;
  line-height: 1.25;
}
.markdown-body h1 {
  font-size: 2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
}
.markdown-body h2 {
  font-size: 1.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
}
.markdown-body h3 {
  font-size: 1.25em;
}
.markdown-body h4 {
  font-size: 1em;
}
.markdown-body h5 {
  font-size: 0.875em;
}
.markdown-body h6 {
  font-size: 0.85em;
  color: var(--text-muted);
}

/* ---- Text blocks ---------------------------------------------------- */

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body table,
.markdown-body pre {
  margin: 0 0 16px;
}

.markdown-body a {
  color: var(--link);
  text-decoration: none;
}
.markdown-body a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.markdown-body strong {
  font-weight: 600;
}

.markdown-body hr {
  height: 1px;
  margin: 24px 0;
  border: 0;
  background: var(--border);
}

.markdown-body blockquote {
  padding: 0 1em;
  color: var(--text-muted);
  border-left: 0.25em solid var(--border);
}
.markdown-body blockquote > :first-child {
  margin-top: 0;
}
.markdown-body blockquote > :last-child {
  margin-bottom: 0;
}

/* ---- Lists ---------------------------------------------------------- */

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
}
.markdown-body li + li {
  margin-top: 0.25em;
}
.markdown-body li > ul,
.markdown-body li > ol {
  margin: 0.25em 0 0;
}
.markdown-body input[type='checkbox'] {
  margin-right: 0.4em;
  accent-color: var(--checkbox);
}

/* ---- Code ----------------------------------------------------------- */

.markdown-body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.2em 0.4em;
  border-radius: var(--radius);
  background: var(--bg-inline-code);
}
.markdown-body pre {
  padding: 16px;
  overflow: auto;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  line-height: 1.45;
}
.markdown-body pre code {
  padding: 0;
  background: transparent;
  font-size: 0.875em;
}

/* ---- Tables --------------------------------------------------------- */

.markdown-body table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  border-collapse: collapse;
}
.markdown-body th,
.markdown-body td {
  padding: 6px 13px;
  border: 1px solid var(--border-strong);
}
.markdown-body th {
  font-weight: 600;
  background: var(--bg-elevated);
}
.markdown-body tr:nth-child(2n) td {
  background: rgba(110, 118, 129, 0.08);
}

/* ---- Media ---------------------------------------------------------- */

.markdown-body img,
.markdown-body svg {
  max-width: 100%;
  height: auto;
}

.markdown-body sub,
.markdown-body sup {
  font-size: 0.75em;
}

/* ---- Footnotes ------------------------------------------------------ */

.markdown-body .footnotes {
  font-size: 0.85em;
  color: var(--text-muted);
}
.markdown-body .footnotes hr {
  margin-top: 32px;
}
.markdown-body .footnote-ref a {
  text-decoration: none;
}
.markdown-body .footnote-back {
  margin-left: 0.3em;
}
.markdown-body .footnote-back-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}

/* ---- Small screens -------------------------------------------------- */

@media (max-width: 600px) {
  :root {
    --content-pad: 16px;
    --font-size: 15px;
  }
}