/* GitHub Primer skin. Same markup; tokens and components restyled
   when html[data-skin="github"] is set. Light and dark follow
   data-theme. */

[data-skin="github"] {
    --gh-canvas: #ffffff;
    --gh-canvas-subtle: #f6f8fa;
    --gh-canvas-inset: #f6f8fa;
    --gh-fg: #1f2328;
    --gh-fg-muted: #59636e;
    --gh-fg-accent: #0969da;
    --gh-border: #d0d7de;
    --gh-border-muted: #d8dee4;
    --gh-success: #1a7f37;
    --gh-success-emphasis: #1f883d;
    --gh-success-fg: #ffffff;
    --gh-attention-subtle: #fff8c5;
    --gh-success-subtle: #dafbe1;
    --gh-accent-subtle: #ddf4ff;
    --gh-btn-shadow: 0 1px 0 rgba(31, 35, 40, 0.04);
    --gh-shadow-rest: 0 1px 0 rgba(31, 35, 40, 0.04);

    --bg: var(--gh-canvas);
    --surface: var(--gh-canvas-subtle);
    --ink: var(--gh-fg);
    --ink-muted: var(--gh-fg-muted);
    --rule: var(--gh-border);
    --rule-strong: var(--gh-border);
    --accent: var(--gh-fg-accent);
    --available: var(--gh-success);
    --case-accent-bg: var(--gh-canvas);
    --case-accent-bg-hover: var(--gh-canvas-subtle);
    --case-accent-fg: var(--gh-fg);

    --mono-100: var(--gh-canvas);
    --mono-150: var(--gh-canvas-subtle);
    --mono-200: #eaeef2;
    --mono-300: #d0d7de;
    --mono-400: #8c959f;
    --mono-500: #6e7781;
    --mono-600: var(--gh-fg-muted);
    --mono-700: #424a53;
    --mono-800: #32383f;
    --mono-900: var(--gh-fg);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-serif: var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --radius-sm: 6px;
    --radius-md: 6px;
    --radius-lg: 6px;
    --radius-pill: 2em;
    --site-max: 1280px;
    --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

[data-skin="github"][data-theme="dark"] {
    --gh-canvas: #0d1117;
    --gh-canvas-subtle: #151b23;
    --gh-canvas-inset: #010409;
    --gh-fg: #e6edf3;
    --gh-fg-muted: #9198a1;
    --gh-fg-accent: #4493f8;
    --gh-border: #3d444d;
    --gh-border-muted: #3d444d;
    --gh-success: #3fb950;
    --gh-success-emphasis: #238636;
    --gh-success-fg: #ffffff;
    --gh-attention-subtle: #3d2e00;
    --gh-success-subtle: #033a16;
    --gh-accent-subtle: #0c2d6b;
    --gh-btn-shadow: 0 0 transparent;
    --gh-shadow-rest: 0 0 transparent;

    --bg: var(--gh-canvas);
    --surface: var(--gh-canvas-subtle);
    --ink: var(--gh-fg);
    --ink-muted: var(--gh-fg-muted);
    --rule: var(--gh-border);
    --rule-strong: var(--gh-border);
    --accent: var(--gh-fg-accent);
    --available: var(--gh-success);
    --case-accent-bg: var(--gh-canvas-subtle);
    --case-accent-bg-hover: #1c232c;
    --case-accent-fg: var(--gh-fg);

    --mono-100: var(--gh-canvas);
    --mono-150: var(--gh-canvas-subtle);
    --mono-200: #212830;
    --mono-300: #3d444d;
    --mono-400: #656c76;
    --mono-500: #9198a1;
    --mono-600: var(--gh-fg-muted);
    --mono-700: #b7bdc8;
    --mono-800: #d1d7e0;
    --mono-900: var(--gh-fg);
}

[data-skin="github"] body {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    font-feature-settings: normal;
}

[data-skin="github"] ::selection {
    background: var(--gh-accent-subtle);
    color: var(--gh-fg);
}

[data-skin="github"] a {
    color: var(--gh-fg-accent);
    text-decoration: none;
}

[data-skin="github"] a:hover {
    text-decoration: underline;
    color: var(--gh-fg-accent);
}

[data-skin="github"] h1,
[data-skin="github"] h2,
[data-skin="github"] h3,
[data-skin="github"] h4,
[data-skin="github"] h5,
[data-skin="github"] h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--gh-fg);
}

[data-skin="github"] h1 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 16px;
}

[data-skin="github"] h2 {
    font-size: 24px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

[data-skin="github"] h3 {
    font-size: 20px;
    letter-spacing: 0;
    line-height: 1.25;
}

[data-skin="github"] h5 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gh-fg);
}

[data-skin="github"] p,
[data-skin="github"] p.ingress,
[data-skin="github"] .lede {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--gh-fg);
}

[data-skin="github"] em,
[data-skin="github"] .serif {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
}

[data-skin="github"] .eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gh-fg-muted);
}

/* Header — solid canvas, hairline border, compact links */
[data-skin="github"] .subhead,
[data-skin="github"] .subhead.is-scrolled {
    background: var(--gh-canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--gh-border);
}

[data-skin="github"] #sitenav.navbar,
[data-skin="github"] .subhead.is-scrolled #sitenav.navbar {
    padding: 16px 0;
}

[data-skin="github"] .brand-mark {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}

[data-skin="github"] .brand-logo,
[data-skin="github"] .subhead.is-scrolled .brand-logo {
    height: 32px;
}

[data-skin="github"][data-theme="light"] .brand-logo,
[data-skin="github"]:not([data-theme="dark"]) .brand-logo {
    filter: invert(1);
}

[data-skin="github"][data-theme="dark"] .brand-logo {
    filter: none;
}

[data-skin="github"] .nav-link {
    color: var(--gh-fg) !important;
    font-size: 14px;
    font-weight: 600;
}

[data-skin="github"] .nav-link::after {
    display: none;
}

[data-skin="github"] .nav-link:hover {
    color: var(--gh-fg-muted) !important;
    text-decoration: none;
}

[data-skin="github"] .nav-actions .btn,
[data-skin="github"] .btn,
[data-skin="github"] .btn-primary,
[data-skin="github"] .btn-out {
    background: var(--gh-success-emphasis);
    color: var(--gh-success-fg) !important;
    border: 1px solid rgba(31, 35, 40, 0.15);
    border-radius: 6px;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    box-shadow: var(--gh-btn-shadow);
    gap: 6px;
}

[data-skin="github"] .nav-actions .btn:hover,
[data-skin="github"] .btn:hover,
[data-skin="github"] .btn-primary:hover,
[data-skin="github"] .btn-out:hover {
    background: #1a7f37;
    color: #ffffff !important;
    border-color: rgba(31, 35, 40, 0.15);
    transform: none;
    text-decoration: none;
}

[data-skin="github"][data-theme="dark"] .btn:hover,
[data-skin="github"][data-theme="dark"] .btn-primary:hover,
[data-skin="github"][data-theme="dark"] .btn-out:hover,
[data-skin="github"][data-theme="dark"] .nav-actions .btn:hover {
    background: #2ea043;
}

[data-skin="github"] .btn .arrow,
[data-skin="github"] .btn:hover .arrow {
    transform: none;
}

[data-skin="github"] .btn-ghost {
    background: var(--gh-canvas-subtle);
    color: var(--gh-fg) !important;
    border: 1px solid var(--gh-border);
    box-shadow: var(--gh-btn-shadow);
}

[data-skin="github"] .btn-ghost:hover {
    background: #eaeef2;
    color: var(--gh-fg) !important;
    border-color: var(--gh-border);
}

[data-skin="github"][data-theme="dark"] .btn-ghost:hover {
    background: #212830;
}

[data-skin="github"] .link-arrow {
    color: var(--gh-fg-accent);
    font-weight: 600;
    font-size: 14px;
    border-bottom: 0;
    padding-bottom: 0;
}

[data-skin="github"] .link-arrow:hover {
    gap: 0.45rem;
    text-decoration: underline;
    border-color: transparent;
}

[data-skin="github"] .pagecontent {
    margin-top: 24px;
}

[data-skin="github"] .hero {
    padding: 32px 0 40px;
    border-bottom: 1px solid var(--gh-border);
}

[data-skin="github"] .hero h1 {
    max-width: 28ch;
}

[data-skin="github"] .status-pill {
    background: var(--gh-success-subtle);
    color: var(--gh-success);
    border: 1px solid transparent;
    border-radius: 2em;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0 8px;
    line-height: 22px;
    backdrop-filter: none;
}

[data-skin="github"] .status-dot {
    width: 8px;
    height: 8px;
    box-shadow: none;
    animation: none;
    background: var(--gh-success);
}

[data-skin="github"] .status-sep {
    background: color-mix(in srgb, var(--gh-success), transparent 55%);
}

[data-skin="github"] .section {
    padding: 40px 0;
    border-bottom: 1px solid var(--gh-border);
}

[data-skin="github"] .section-head {
    margin-bottom: 16px;
    gap: 16px;
}

[data-skin="github"] .plug,
[data-skin="github"] .indexplug {
    background: var(--gh-canvas);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 16px;
    box-shadow: var(--gh-shadow-rest);
}

[data-skin="github"] .plug:hover,
[data-skin="github"] .indexplug:hover {
    border-color: var(--gh-fg-muted);
    transform: none;
}

[data-skin="github"] .plug .plug-num,
[data-skin="github"] .indexplug .plug-num {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gh-fg-muted);
}

[data-skin="github"] .case-card,
[data-skin="github"] .case-card.light,
[data-skin="github"] .case-card.accent,
[data-skin="github"] .case-card.dark {
    background: var(--gh-canvas);
    color: var(--gh-fg);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    min-height: 0;
    padding: 16px;
    box-shadow: var(--gh-shadow-rest);
}

[data-skin="github"] .case-card:hover,
[data-skin="github"] .case-card.accent:hover {
    background: var(--gh-canvas);
    transform: none;
    box-shadow: var(--gh-shadow-rest);
    border-color: var(--gh-fg-accent);
}

[data-skin="github"] .case-card h2,
[data-skin="github"] .case-card h3,
[data-skin="github"] .case-card p,
[data-skin="github"] .case-card .case-eyebrow {
    color: var(--gh-fg);
    opacity: 1;
}

[data-skin="github"] .case-card .case-eyebrow {
    color: var(--gh-fg-muted);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

[data-skin="github"] .case-card p {
    color: var(--gh-fg-muted);
}

[data-skin="github"] .case-card .link-arrow,
[data-skin="github"] .case-card.dark .link-arrow,
[data-skin="github"] .case-card.accent .link-arrow,
[data-skin="github"] .case-card.accent .link-arrow:hover,
[data-skin="github"] .case-card.dark .btn-ghost,
[data-skin="github"] .case-card.dark .btn-ghost:hover {
    color: var(--gh-fg-accent);
    background: transparent;
    border-color: transparent;
}

[data-skin="github"] .case-card.accent:hover .link-arrow {
    background: transparent;
    color: var(--gh-fg-accent);
}

[data-skin="github"] .cta-strip {
    border-color: var(--gh-border);
    padding: 40px 0;
}

[data-skin="github"] .cta-strip .cta-title {
    font-size: 32px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

[data-skin="github"] .product-shot,
[data-skin="github"] .leader-portrait img {
    border-radius: 6px;
    border: 1px solid var(--gh-border);
}

[data-skin="github"] .faq-item summary {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
}

[data-skin="github"] #footer {
    background: var(--gh-canvas-subtle);
    border-top: 1px solid var(--gh-border);
    padding: 40px 0 24px;
    font-size: 12px;
}

[data-skin="github"] #footer h5 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gh-fg);
}

[data-skin="github"] #footer p {
    font-size: 12px;
    color: var(--gh-fg-muted);
}

[data-skin="github"] #footer a {
    color: var(--gh-fg-accent);
    border-bottom: 0;
}

[data-skin="github"] #footer a:hover {
    text-decoration: underline;
    border-bottom: 0;
}

[data-skin="github"] .footer-bottom {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0;
    color: var(--gh-fg-muted);
    border-top-color: var(--gh-border);
    align-items: center;
}

[data-skin="github"] .coordinates {
    font-family: var(--font-mono);
    font-size: 12px;
}

[data-skin="github"] .theme-toggle {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0;
}

[data-skin="github"] .form-field label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gh-fg);
}

[data-skin="github"] .form-field input,
[data-skin="github"] .form-field select,
[data-skin="github"] .form-field textarea {
    background: var(--gh-canvas);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    font-size: 14px;
    padding: 5px 12px;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgba(31, 35, 40, 0.04);
}

[data-skin="github"] .form-field input:focus,
[data-skin="github"] .form-field select:focus,
[data-skin="github"] .form-field textarea:focus {
    border-color: var(--gh-fg-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gh-fg-accent), transparent 70%);
}

[data-skin="github"] .cursor-glow,
[data-skin="github"] .cursor-ring,
[data-skin="github"] .cursor-dot {
    display: none !important;
}

[data-skin="github"] .reveal,
[data-skin="github"] .reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

.github-skin-toggle {
    appearance: none;
    background: transparent;
    color: var(--ink-muted);
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    padding: 3px 10px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    cursor: pointer;
}

.github-skin-toggle:hover {
    color: var(--ink);
    border-color: var(--ink);
    text-decoration: none;
}

[data-skin="github"] .github-skin-toggle {
    background: var(--gh-canvas);
    color: var(--gh-fg);
    border: 1px solid var(--gh-border);
    box-shadow: var(--gh-btn-shadow);
}

[data-skin="github"] .github-skin-toggle:hover {
    background: var(--gh-canvas-subtle);
    color: var(--gh-fg);
    border-color: var(--gh-fg-muted);
}