/* =================================================================
   stevieg.dev — dark design tokens layered over Bootstrap 5.3.8.
   Warm near-black palette, light-weight Manrope headings, monospace
   eyebrow labels, rounded card surfaces inside a narrow centred column.
   ================================================================= */

/* Fonts + layout constants live at the root so both themes inherit them. */
:root {
    --bs-font-sans-serif: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-font-monospace:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --sg-font-brand:      "Titillium Web", "Manrope", system-ui, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.95rem;
    --bs-body-line-height: 1.5;

    --sg-card-pad:    2.25rem;
    --sg-card-radius: 1rem;
}

/* ================================================================
   Dark theme (default) — warm near-black, off-white text.
   ================================================================ */
:root,
:root[data-bs-theme="dark"] {
    --bs-body-bg:       #12110f;
    --bs-body-color:    #f1efe9;
    --bs-body-color-rgb: 241, 239, 233;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(241, 239, 233, 0.65);
    --bs-tertiary-color:  rgba(241, 239, 233, 0.45);
    --bs-border-color:   rgba(241, 239, 233, 0.08);
    --bs-border-color-translucent: rgba(241, 239, 233, 0.08);
    --bs-link-color:     #f1efe9;
    --bs-link-hover-color: #ffffff;
    --bs-link-color-rgb: 241, 239, 233;

    --sg-surface-0:   #0e0d0b;
    --sg-surface-1:   #12110f;
    --sg-surface-2:   #181612;
    --sg-surface-3:   #211e19;
    --sg-border:      rgba(241, 239, 233, 0.08);
    --sg-border-strong: rgba(241, 239, 233, 0.16);
    --sg-text:        #f1efe9;
    --sg-text-muted:  rgba(241, 239, 233, 0.58);
    --sg-text-dim:    rgba(241, 239, 233, 0.38);
    --sg-chip-bg:     rgba(241, 239, 233, 0.04);
    --sg-chip-border: rgba(241, 239, 233, 0.08);
    --sg-chip-hover:  rgba(241, 239, 233, 0.09);

    --sg-nav-bg:      rgba(18, 17, 15, 0.85);
    --sg-nav-border:  rgba(241, 239, 233, 0.06);
    --sg-nav-pill:    rgba(42, 39, 35, 1);
    --sg-nav-pill-border: rgba(52, 49, 44, 1);

    --sg-body-gradient-1: rgba(255, 255, 255, 0.015);
    --sg-body-gradient-2: rgba(255, 255, 255, 0.01);
}

/* ================================================================
   Light theme — warm off-white body, near-black text.
   ================================================================ */
:root[data-bs-theme="light"] {
    --bs-body-bg:       #f6f3ec;
    --bs-body-color:    #1a1814;
    --bs-body-color-rgb: 26, 24, 20;
    --bs-emphasis-color: #000000;
    --bs-secondary-color: rgba(26, 24, 20, 0.72);
    --bs-tertiary-color:  rgba(26, 24, 20, 0.52);
    --bs-border-color:   rgba(26, 24, 20, 0.10);
    --bs-border-color-translucent: rgba(26, 24, 20, 0.10);
    --bs-link-color:     #1a1814;
    --bs-link-hover-color: #000000;
    --bs-link-color-rgb: 26, 24, 20;

    --sg-surface-0:   #ffffff;
    --sg-surface-1:   #f6f3ec;
    --sg-surface-2:   #fdfbf4;
    --sg-surface-3:   #ebe6d9;
    --sg-border:      rgba(26, 24, 20, 0.10);
    --sg-border-strong: rgba(26, 24, 20, 0.20);
    --sg-text:        #1a1814;
    --sg-text-muted:  rgba(26, 24, 20, 0.62);
    --sg-text-dim:    rgba(26, 24, 20, 0.42);
    --sg-chip-bg:     rgba(26, 24, 20, 0.04);
    --sg-chip-border: rgba(26, 24, 20, 0.10);
    --sg-chip-hover:  rgba(26, 24, 20, 0.08);

    --sg-nav-bg:      rgba(246, 243, 236, 0.82);
    --sg-nav-border:  rgba(26, 24, 20, 0.08);
    --sg-nav-pill:    rgba(26, 24, 20, 0.06);
    --sg-nav-pill-border: rgba(26, 24, 20, 0.14);

    --sg-body-gradient-1: rgba(0, 0, 0, 0.015);
    --sg-body-gradient-2: rgba(0, 0, 0, 0.01);
}

/* -----------------------------------------------------------------
   Typography
   ----------------------------------------------------------------- */

body {
    background-color: var(--sg-surface-1);
    background-image:
        radial-gradient(circle at 20% 0%, var(--sg-body-gradient-1), transparent 40%),
        radial-gradient(circle at 80% 100%, var(--sg-body-gradient-2), transparent 40%);
    min-height: 100vh;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-font-sans-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--sg-text);
}

h1, .h1 { font-size: 3rem;    line-height: 1.08; }
h2, .h2 { font-size: 1.8rem;  line-height: 1.22; }
h3, .h3 { font-size: 1.25rem; line-height: 1.3;  }
h4, .h4 { font-size: 1.05rem; line-height: 1.35; }

p  { line-height: 1.5; }
a  { text-decoration: none; transition: color .15s ease; }
a:hover { color: #ffffff; }

code, pre, kbd, samp {
    font-family: var(--bs-font-monospace);
    font-size: 0.85em;
}

hr {
    border-color: var(--sg-border);
    opacity: 1;
}

/* -----------------------------------------------------------------
   Layout — the narrow centered column of stacked cards
   ----------------------------------------------------------------- */

/* Responsive content shell — width and inline padding scale with
   Bootstrap 5.3.8's breakpoints (sm 576, md 768, lg 992, xl 1200, xxl 1400)
   so the layout remains readable on phones and gains breathing room on
   wider viewports without ever ballooning into a full-width grid. */
.sg-shell {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 576px) {
    .sg-shell { max-width: 540px; padding-inline: 1.25rem; }
}
@media (min-width: 768px) {
    .sg-shell { max-width: 720px; padding-inline: 1.5rem; }
}
@media (min-width: 992px) {
    .sg-shell { max-width: 860px; }
}
@media (min-width: 1200px) {
    .sg-shell { max-width: 960px; }
}
@media (min-width: 1400px) {
    .sg-shell { max-width: 1040px; }
}
/* Only the main content section needs leading/trailing space — inside
   the nav and the footer itself, leave the shell snug. */
main.sg-shell {
    padding-block-start: 2rem;
    padding-block-end: 3rem;
}
@media (min-width: 768px) {
    main.sg-shell {
        padding-block-start: 2.5rem;
    }
}

.sg-stack > * + * {
    margin-top: 1rem;
}

/* -----------------------------------------------------------------
   Card surface (the primary visual unit)
   ----------------------------------------------------------------- */

.sg-card {
    background-color: var(--sg-surface-2);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-card-radius);
    padding: var(--sg-card-pad);
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sg-card--compact { padding: 1.4rem 1.6rem; }
.sg-card--article { padding: 1.75rem; }

@media (min-width: 640px) {
    .sg-card--article { padding: 2rem; }
}

/* Subtle lift when a card is itself the interactive target (wrap a
   card in <a> or apply .sg-card--link to opt in). */
a.sg-card,
.sg-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
a.sg-card:hover,
.sg-card--link:hover {
    border-color: var(--sg-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    color: inherit;
}

/* -----------------------------------------------------------------
   Eyebrow label (the monospace small-caps line above headings)
   ----------------------------------------------------------------- */

.sg-eyebrow {
    display: inline-block;
    font-family: var(--bs-font-monospace);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
    margin-bottom: 1.1rem;
}

/* -----------------------------------------------------------------
   Chips (pill-shaped links/badges)
   ----------------------------------------------------------------- */

.sg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--sg-chip-border);
    background-color: var(--sg-chip-bg);
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--sg-text);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    text-decoration: none;
}
.sg-chip:hover {
    background-color: var(--sg-chip-hover);
    border-color: var(--sg-border-strong);
    color: var(--sg-text);
    transform: translateY(-1px);
}
.sg-chip--active,
.sg-chip.active {
    background-color: var(--sg-chip-hover);
    border-color: var(--sg-border-strong);
}

.sg-chip__ext {
    margin-left: auto;
    opacity: 0.5;
}

/* -----------------------------------------------------------------
   Nav bar (compact, logo left, links/socials right)
   ----------------------------------------------------------------- */

.sg-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: var(--sg-nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sg-nav-border);
    padding-block: 0.7rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sg-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--sg-text);
    text-decoration: none;
    transition: color 0.18s ease, opacity 0.18s ease;
}
.sg-nav__brand-name {
    font-family: var(--sg-font-brand);
    font-weight: 700;
    font-style: italic;
    font-size: 1.25rem;
    letter-spacing: 0;
}
.sg-nav__brand:hover { color: var(--sg-text); opacity: 0.8; }
.sg-nav__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    color: var(--sg-text);
}
.sg-nav__brand-mark svg {
    width: 1.9rem;
    height: 1.9rem;
    display: block;
}

.sg-nav__links {
    display: inline-flex;
    gap: 0.25rem;
}

/* Nav link — transparent 1px border by default so hover/active can add
   a visible border without shifting layout. Hover and active share the
   same pill styling so hover smoothly morphs into the active state. */
.sg-nav__link {
    color: var(--sg-text-muted);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sg-nav__link:hover,
.sg-nav__link.active {
    background-color: var(--sg-nav-pill);
    border-color: var(--sg-nav-pill-border);
    color: var(--sg-text);
}

/* Theme toggle lives in the nav right-slot (no socials at top). */
.sg-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--sg-text-muted);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sg-theme-toggle:hover {
    background-color: var(--sg-nav-pill);
    border-color: var(--sg-nav-pill-border);
    color: var(--sg-text);
}
.sg-theme-toggle svg { width: 1rem; height: 1rem; display: block; }
/* Icon reflects the target mode: click in dark → go light (sun); click in light → go dark (moon). */
:root[data-bs-theme="dark"] .sg-theme-toggle .sg-icon-moon { display: none; }
:root[data-bs-theme="light"] .sg-theme-toggle .sg-icon-sun { display: none; }

/* Mobile hamburger toggle — same pill geometry as the theme toggle so
   both nav-right buttons share a visual rhythm. */
.sg-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--sg-text-muted);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sg-nav__toggle:hover,
.sg-nav__toggle[aria-expanded="true"] {
    background-color: var(--sg-nav-pill);
    border-color: var(--sg-nav-pill-border);
    color: var(--sg-text);
}
.sg-nav__toggle svg { width: 1.05rem; height: 1.05rem; display: block; }

/* Mobile collapse panel — links stack vertically below the brand row,
   spaced consistently with the desktop pill rhythm. */
.sg-nav__mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0 0.5rem;
}
.sg-nav__mobile-links .sg-nav__link {
    width: 100%;
    text-align: left;
}

/* -----------------------------------------------------------------
   Breadcrumb pills (Go back / Home chips on inner pages)
   ----------------------------------------------------------------- */

.sg-breadcrumbs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------------
   Post row (blog archive list item)
   ----------------------------------------------------------------- */

.sg-post-row {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1rem 0.25rem;
    border-radius: 0.5rem;
    color: var(--sg-text);
    transition: background-color .15s ease;
}
.sg-post-row:hover {
    background-color: var(--sg-chip-bg);
}
.sg-post-row + .sg-post-row {
    border-top: 1px solid var(--sg-border);
}
.sg-post-row__body { flex: 1 1 auto; min-width: 0; }
.sg-post-row__title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 0.25rem;
    color: var(--sg-text);
}
.sg-post-row__excerpt {
    font-size: 0.88rem;
    color: var(--sg-text-muted);
    margin: 0;
}
.sg-post-row__date {
    flex: 0 0 auto;
    font-family: var(--bs-font-monospace);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--sg-text-dim);
    text-transform: uppercase;
    padding-top: 0.25rem;
}

/* -----------------------------------------------------------------
   Footer grid
   ----------------------------------------------------------------- */

.sg-footer-socials {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 1.25rem 0 0.25rem;
}
.sg-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--sg-text-muted);
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.sg-social-icon:hover {
    background-color: var(--sg-nav-pill);
    border-color: var(--sg-nav-pill-border);
    color: var(--sg-text);
    transform: translateY(-1px);
}
.sg-social-icon i { line-height: 1; display: block; }

.sg-footer-copyright {
    text-align: center;
    color: var(--sg-text-dim);
    font-size: 0.8rem;
    padding: 0.75rem 0 1.5rem;
}

/* -----------------------------------------------------------------
   Project cover images
   ----------------------------------------------------------------- */

.sg-project-cover {
    display: block;
    margin: 0 0 1.75rem;
    border-radius: 0.4rem;
    overflow: hidden;
    border: 1px solid var(--sg-border);
    background-color: var(--sg-surface-0);
    transition: border-color 0.2s ease;
    text-decoration: none;
}
.sg-project-cover img {
    display: block;
    width: 100%;
    height: auto;
    /* Screenshots are UI captures, not hero photography — use `contain`
       so the full image is visible (logos/headers never cropped),
       letterboxed against the card surface when aspect ratios differ. */
    aspect-ratio: 16 / 10;
    object-fit: contain;
    object-position: center;
    border-radius: 0.4rem;
    transition: transform 0.4s ease;
}
a.sg-project-cover:hover,
a.sg-project-cover:focus-visible { border-color: var(--sg-border-strong); }
a.sg-project-cover:hover img { transform: scale(1.02); }

/* Hero variant: wider banner ratio for blog cover images (dev.to renders
   them at ~2.4:1), slightly more pronounced rounded corners since the
   banner is large, and `cover` fit so the art fills edge-to-edge. */
.sg-project-cover--hero {
    border-radius: 0.6rem;
}
.sg-project-cover--hero img {
    aspect-ratio: 2.4 / 1;
    object-fit: cover;
    border-radius: 0.6rem;
}

/* -----------------------------------------------------------------
   Prose (markdown-rendered article content)
   ----------------------------------------------------------------- */

.sg-prose h2 { margin: 2.5rem 0 1rem; font-size: 1.7rem; }
.sg-prose h3 { margin: 2rem 0 0.75rem; font-size: 1.25rem; }
.sg-prose p  { margin: 0 0 1.1rem; color: var(--sg-text); }
.sg-prose a  { color: var(--sg-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sg-border-strong); }
.sg-prose a:hover { text-decoration-color: var(--sg-text); }
.sg-prose ul, .sg-prose ol { margin: 0 0 1.1rem 1.2rem; color: var(--sg-text); }
.sg-prose li + li { margin-top: 0.2rem; }
.sg-prose blockquote {
    border-left: 2px solid var(--sg-border-strong);
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 1.25rem 0;
    color: var(--sg-text-muted);
    font-style: italic;
}
/* Code blocks are intentionally dark-on-dark regardless of the site
   theme — feels natural (terminals are dark) and lets a single
   highlight.js dark theme cover both light + dark site modes. */
.sg-prose pre {
    background-color: #0e0d0b;
    color: #e6e3dc;
    border: 1px solid rgba(241, 239, 233, 0.08);
    border-radius: 0.5rem;
    padding: 1rem 1.15rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: 0.85rem;
    line-height: 1.55;
}
.sg-prose pre code,
.sg-prose pre code.hljs {
    background: transparent !important;
    padding: 0;
    border: 0;
    color: inherit;
    font-size: inherit;
}

/* -----------------------------------------------------------------
   About page — avatar + header row, testimonials
   ----------------------------------------------------------------- */

.sg-about-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.sg-avatar {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid var(--sg-border-strong);
    flex: 0 0 auto;
}

/* Testimonials — avatar on top, quote in the middle, attribution below.
   Centered stacking reads as a small spotlight on each quote. */
.sg-testimonial {
    text-align: center;
    margin: 0;
}
.sg-testimonial__avatar {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid var(--sg-border-strong);
    margin: 0 auto 1rem;
}
.sg-testimonial__quote {
    margin: 0 auto 0.85rem;
    max-width: 48ch;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--sg-text);
    border: 0;
    padding: 0;
}
.sg-testimonial__quote::before { content: "\201C"; margin-right: 0.1em; }
.sg-testimonial__quote::after  { content: "\201D"; margin-left: 0.1em; }
.sg-testimonial__cite {
    font-size: 0.85rem;
    color: var(--sg-text-muted);
}

/* Skills (about page) — categories stacked, each with a monospace
   eyebrow header and a wrap-row of chip pills. */
.sg-skill-groups {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.sg-skill-group__title {
    font-family: var(--bs-font-monospace);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--sg-text-muted);
    margin-bottom: 0.6rem;
}
.sg-skill-group__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Carousel wrapper — stacks all slides in the same grid cell so the
   container's height matches the tallest quote and never jumps as
   shorter slides rotate in. Uses fade (not slide) since stacked items
   can't translate horizontally. */
.sg-testimonial-carousel .carousel-inner {
    display: grid;
    padding-bottom: 0.25rem;
}
.sg-testimonial-carousel .carousel-item {
    grid-column: 1;
    grid-row: 1;
    display: block;
}
.sg-testimonial-carousel__indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.sg-testimonial-carousel__indicators button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--sg-border-strong);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.sg-testimonial-carousel__indicators button:hover {
    opacity: 0.85;
}
.sg-testimonial-carousel__indicators button.active {
    background: var(--sg-text);
    opacity: 1;
    transform: scale(1.15);
}

/* Subtle separator between the title/meta header and the article body
   when both live inside the same card. */
.sg-article-divider {
    border: 0;
    border-top: 1px solid var(--sg-border);
    margin: 2rem 0 2rem;
    opacity: 1;
}

/* Responsive YouTube / embed wrapper (dev.to {% youtube %} replacement). */
.sg-video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--sg-border);
    background-color: var(--sg-surface-0);
}
.sg-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* CodePen embed — same envelope as video but taller aspect ratio suits
   the split panels CodePen exposes by default. */
.sg-codepen-embed {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--sg-border);
    background-color: var(--sg-surface-0);
}
.sg-codepen-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.sg-prose :not(pre) > code {
    background-color: var(--sg-chip-bg);
    padding: 0.1em 0.4em;
    border-radius: 0.3rem;
    border: 1px solid var(--sg-chip-border);
    font-size: 0.85em;
}
.sg-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.25rem 0;
}
.sg-prose hr {
    border-color: var(--sg-border);
    margin: 2rem 0;
}

/* -----------------------------------------------------------------
   Utilities
   ----------------------------------------------------------------- */

.sg-muted { color: var(--sg-text-muted); }
.sg-dim   { color: var(--sg-text-dim); }
.sg-mono  { font-family: var(--bs-font-monospace); }

.sg-divider {
    height: 1px;
    background-color: var(--sg-border);
    margin: 1.25rem 0;
    border: 0;
}

/* Keep Bootstrap focus rings subtle on dark */
:focus-visible {
    outline: 2px solid rgba(241, 239, 233, 0.4);
    outline-offset: 2px;
}