/* Cowboy docs — page language.
 *
 * The discipline is borrowed from fx.sh, not its palette: one family per
 * role, a four-step type scale, color spent only where it carries meaning
 * (theme link/accent vars — no new hues introduced), muted secondary text,
 * generous vertical air, and no decoration that does not aid reading.
 * Everything tracks mdBook's theme variables so all five built-in themes,
 * light and dark, keep working — including live switches.
 *
 * Webfonts are deliberately absent (see theme/fonts/fonts.css): system
 * stacks render instantly and read native everywhere.
 */

:root {
    --content-max-width: 700px;
    --mono-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
        "DejaVu Sans Mono", "Liberation Mono", monospace;
    --sans-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
        Roboto, "Helvetica Neue", Arial, sans-serif;
    /* a faint ink for hairlines and fills, derived from the theme itself */
    --hairline: var(--table-border-color);
    --ink-06: color-mix(in srgb, var(--fg) 7%, transparent);
    --ink-muted: color-mix(in srgb, var(--fg) 65%, var(--bg));
}

html {
    font-family: var(--sans-font);
}

/* ---- type scale: body 1.6 / h1 2.4 / h2 1.9 / h3 1.6 / meta 1.3 -------- */

.content p,
.content ol,
.content ul {
    line-height: 1.7;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.content h1 { font-size: 2.4rem; }
.content h2 { font-size: 1.9rem; }
.content h3 { font-size: 1.6rem; }
.content h4,
.content h5,
.content h6 { font-size: 1.4rem; }

/* ---- links: always underlined, quietly ---------------------------------- */

.content a {
    color: var(--links);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--links) 40%, transparent);
}

.content a:hover {
    text-decoration-color: var(--links);
}

/* heading anchors stay unadorned */
.content a.header,
.content a.header:hover {
    text-decoration: none;
}

/* ---- code ---------------------------------------------------------------- */

.content pre {
    margin: 1.8em 0;
}

.content pre > code {
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 1.4rem 1.6rem;
    line-height: 1.6;
}

.content :not(pre) > code {
    border-radius: 4px;
    padding: 0.1em 0.35em;
    background: var(--ink-06);
}

/* ---- tables: horizontal rules only, no zebra ---------------------------- */

.content table {
    margin: 1.8em auto;
    font-size: 1.5rem;
}

.content table td,
.content table th {
    border: none;
    border-bottom: 1px solid var(--hairline);
    padding: 0.8rem 2.4rem 0.8rem 0;
    text-align: left;
}

.content table thead {
    background: transparent;
}

.content table thead td,
.content table thead th {
    font-weight: 600;
    border-bottom: 1px solid var(--ink-muted);
}

.content table tbody tr:nth-child(2n) {
    background: transparent;
}

/* ---- quotes and rules ---------------------------------------------------- */

.content blockquote {
    margin: 1.8em 0;
    padding: 0.2em 0 0.2em 1.6rem;
    background: transparent;
    border: none;
    border-inline-start: 2px solid var(--quote-border);
    color: var(--ink-muted, inherit);
}

.content hr {
    border: none;
    border-top: 1px solid var(--hairline);
    margin: 3.2em auto;
}

/* ---- reading column ------------------------------------------------------ */

.content {
    padding: 0 clamp(1.6rem, 4vw, 3.2rem) 8rem;
}

.content main {
    padding-top: 1.6rem;
}

/* ---- menu bar: the wordmark, quietly ------------------------------------ */

.menu-title {
    font-family: var(--mono-font);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ---- sidebar: flat, hairline-divided, mono labels ----------------------- */

.sidebar {
    background-color: var(--bg);
    border-inline-end: 1px solid var(--hairline);
}

.sidebar .sidebar-scrollbox {
    padding: 1.4rem 1.6rem 4rem;
}

.chapter li.part-title {
    margin-block-start: 2.4em;
    font-family: var(--mono-font);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sidebar-fg);
    opacity: 0.55;
}

.chapter li.part-title:first-of-type {
    margin-block-start: 1em;
}

/* mute the generated section numbers so titles carry the row */
.chapter li a strong {
    font-weight: 400;
    opacity: 0.45;
    font-variant-numeric: tabular-nums;
}

.chapter li a.active {
    font-weight: 600;
}

/* ---- hero (introduction page only; needs :has, degrades to nothing) ----- */

main:has(#cowboy-hat-container) > h1:first-child {
    text-align: center;
    font-family: var(--mono-font);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.45em;
    padding-inline-start: 0.45em; /* re-center: tracking trails the last glyph */
    text-transform: uppercase;
    margin: 4rem 0 0;
}

.cowboy-kicker {
    font-family: var(--mono-font);
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    color: var(--ink-muted, inherit);
    margin: 2rem auto 0;
    max-width: 44ch;
}