/* Copia CLI Manual — GitHub Primer utility subset + dark theme
 * Extracted from cli.github.com/manual/ reference.
 * Only the classes actually used by the manual layout.
 */

/* Dark theme variables */
:root {
  --color-fg-default: #e6edf3;
  --color-fg-muted: #8b949e;
  --color-fg-subtle: #6e7681;
  --color-bg-default: #0d1117;
  --color-bg-subtle: #161b22;
  --color-accent-fg: #2f81f7;
  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-scale-black: #010409;
  --fontStack-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --base-size-8: 8px;
  --base-size-16: 16px;
  --base-size-24: 24px;
  --base-size-32: 32px;
  --base-size-40: 40px;
  --base-size-48: 48px;
  --base-size-128: 128px;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 0; }

/* Base */
body.manual {
  background-color: var(--color-bg-default);
  color: var(--color-fg-default);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  line-height: 1.5;
}

/* Primer utilities — display */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }
@media (min-width: 1012px) { .d-lg-flex { display: flex !important; } }

/* Primer utilities — flexbox */
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-auto { flex: auto !important; }
.flex-items-center { align-items: center !important; }
.flex-justify-center { justify-content: center !important; }
.flex-justify-between { justify-content: space-between !important; }
.flex-justify-end { justify-content: flex-end !important; }
.flex-content-center { align-content: center !important; }

/* Primer utilities — grid */
.col-12 { width: 100%; }
@media (min-width: 1012px) {
  .col-lg-2 { width: 16.66666666%; }
  .col-lg-10 { width: 83.3333333%; }
}

/* Primer utilities — spacing */
.mr-2 { margin-right: var(--base-size-8) !important; }
.mr-3 { margin-right: var(--base-size-16) !important; }
.mr-4 { margin-right: var(--base-size-24) !important; }
.mt-3 { margin-top: var(--base-size-16) !important; }
.mb-3 { margin-bottom: var(--base-size-16) !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.p-3 { padding: var(--base-size-16) !important; }
.p-6 { padding: var(--base-size-40) !important; }
.px-3 { padding-right: var(--base-size-16) !important; padding-left: var(--base-size-16) !important; }
.py-4 { padding-top: var(--base-size-24) !important; padding-bottom: var(--base-size-24) !important; }
.pt-7 { padding-top: var(--base-size-48) !important; }
.pb-12 { padding-bottom: var(--base-size-128) !important; }
@media (min-width: 768px) {
  .px-md-6 { padding-right: var(--base-size-40) !important; padding-left: var(--base-size-40) !important; }
}

/* Primer utilities — typography */
.text-mono { font-family: var(--fontStack-monospace) !important; }
.text-normal { font-weight: 400 !important; }
.f4-mktg { font-size: 16px !important; line-height: 24px !important; }
.f5-mktg { font-size: 14px !important; line-height: 20px !important; }
.list-style-none { list-style: none !important; }
.height-full { height: 100% !important; }

/* Primer utilities — colors */
.color-fg-default { color: var(--color-fg-default) !important; }
.color-fg-muted { color: var(--color-fg-muted) !important; }
.color-bg-default { background-color: var(--color-bg-default) !important; }
.color-bg-subtle { background-color: var(--color-bg-subtle) !important; }

/* Container */
.container-lg { max-width: 1012px; margin-right: auto; margin-left: auto; }

/* Header */
header { background-color: var(--color-bg-default); display: flex; }
header nav { width: 100%; }

/* Sidebar nav */
.docs-nav { background-color: var(--color-bg-default); }
.docs-nav a { text-decoration: none; }
.docs-nav a.color-fg-default { color: var(--color-fg-default) !important; }
.docs-nav a.text-mono.d-block { color: var(--color-accent-fg); }
.docs-nav a.text-mono.d-block:hover { color: #58a6ff; }
.docs-nav h5 { margin-bottom: 0; font-size: 14px; }

/* Main content */
.main-content { min-height: calc(100vh - 68px); }

/* Markdown body — matches GitHub markdown rendering */
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  color: var(--color-fg-default);
}

.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  color: var(--color-fg-default);
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 16px;
}

.markdown-body h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border-muted); }
.markdown-body h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border-muted); }
.markdown-body h3 { font-size: 1.25em; }

.markdown-body p { margin-bottom: 16px; }

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

.markdown-body ul, .markdown-body ol { padding-left: 2em; margin-bottom: 16px; }
.markdown-body li { margin-bottom: 4px; }
.markdown-body li + li { margin-top: 0.25em; }

/* Code — from manual.scss */
.markdown-body code {
  background: var(--color-scale-black);
  border-radius: 6px;
  padding: 0.2em 0.4em;
  font-family: var(--fontStack-monospace);
  font-size: 85%;
  color: var(--color-fg-default);
}

.markdown-body pre {
  background: none;
  border-radius: 0;
  padding: 1em 0 1em 2em;
  overflow-x: auto;
  margin-bottom: 16px;
}

.markdown-body pre code {
  background: none;
  padding: 0;
  font-size: 85%;
}

/* Jekyll highlight blocks — no background like gh CLI */
.markdown-body figure.highlight {
  margin-left: 2em;
  margin-right: 0;
  margin-bottom: 16px;
  background: none;
}

.markdown-body figure.highlight pre {
  margin: 0;
  background: none;
  padding: 0;
}

.markdown-body figure.highlight .language-bash .c {
  color: grey;
}

/* Flag definition lists — from manual.scss */
.markdown-body dl.flags {
  margin-left: 2em;
  margin-bottom: 16px;
}

.markdown-body dl.flags dt {
  font-style: normal;
  margin-top: 16px;
}

.markdown-body dl.flags dt code {
  background-color: var(--color-scale-black);
  padding: 2px 6px;
  border-radius: 6px;
}

.markdown-body dl.flags dd {
  margin-left: 1em;
  color: var(--color-fg-default);
  margin-top: 2px;
}

/* Tables */
.markdown-body table { border-collapse: collapse; margin-bottom: 16px; }
.markdown-body td, .markdown-body th { border: 1px solid var(--color-border-default); padding: 6px 13px; }
.markdown-body th { background-color: var(--color-bg-subtle); font-weight: 600; }
.markdown-body tr:nth-child(2n) { background-color: var(--color-bg-default); }

/* Blockquotes */
.markdown-body blockquote {
  border-left: 3px solid var(--color-border-default);
  padding: 0 16px;
  color: var(--color-fg-muted);
  margin-bottom: 16px;
}

/* Horizontal rule */
.markdown-body hr {
  border: none;
  border-top: 1px solid var(--color-border-muted);
  margin: 24px 0;
}