/*
 * Graphitron documentation site theme.
 *
 * Built on the Sikt Design System tokens fetched into css/sds-core.css and
 * css/sds-button.css at build time by download-maven-plugin. Those files
 * expose the --sds-color-brand-*, --sds-color-text-*, --sds-color-layout-*,
 * --sds-typography-*, and --sds-space-* custom properties consumed below.
 *
 * Selector targets: AsciiDoctor's defaults (#header, #content, .sect1,
 * .admonitionblock, etc.), plus role-driven hooks (.hero, .feature,
 * .nav-header, .site-footer) that the docinfo and index pages use.
 */

@import url("sds-core.css");
@import url("sds-button.css");

/* ---------- base ---------------------------------------------------------- */

:root {
    --site-content-max: 1180px;
    /* Responsive horizontal page padding: 24px on mobile, 32px on tablet,
     * 48px on desktop. Inherits the design system's 45rem / 64rem breakpoints
     * from sds-core.css, so this var changes value without a media query. */
    --site-content-pad: var(--sds-space-padding-large);
    /* SDS declares `color-scheme: light dark` and resolves every token via
     * light-dark(), so a dark-mode browser would auto-flip the page palette.
     * Rouge's inlined syntax-highlight stylesheet (source-highlighter: rouge)
     * is tuned for a white background — dark-blue strings, dark-red keywords,
     * mid-gray comments — which become illegible on the darkened <pre>. The
     * rest of the site (hero band, admonitions, footer, callouts) is also
     * only designed for light. Pin the whole site to light until a real
     * dark theme exists. */
    color-scheme: light;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--sds-color-layout-page-default, #ffffff);
    color: var(--sds-color-text-primary, #1a1a1a);
    font-family: var(--sds-typography-font-family-default, "Haffer", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    font-size: 16px;
    line-height: var(--sds-typography-body-lineheight-regular, 1.6);
    /* Belt-and-suspenders: guarantee the page itself never exceeds the
     * viewport width regardless of what wide content (tables, pre blocks,
     * images, embedded SVGs) lands inside #content. Without this, a single
     * unconstrained child can widen the body and drag the sticky
     * .nav-header off-screen on horizontal scroll, since sticky only
     * pins on the y-axis. `clip` rather than `hidden` because clip does
     * not establish a scroll container, so position: sticky on .nav-header
     * keeps tracking the viewport. */
    overflow-x: clip;
}

a {
    color: var(--sds-color-text-primary, #1a1a1a);
    text-decoration: underline;
    text-underline-position: under;
}
a:hover, a:focus-visible {
    background-color: var(--sds-color-interaction-primary-transparent-highlight, transparent);
    color: var(--sds-color-text-primary, #1a1a1a);
}
a:active {
    background-color: var(--sds-color-interaction-primary-transparent-pressed, transparent);
}

/* ---------- top nav header (docinfo) -------------------------------------- */

.nav-header {
    background: var(--sds-color-layout-background-primary, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: var(--sds-space-padding-small) var(--site-content-pad);
    position: sticky;
    top: 0;
    z-index: 50;
}
.nav-header-inner {
    max-width: var(--site-content-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sds-space-gap-medium);
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--sds-space-gap-small);
    text-decoration: none;
    font-weight: 700;
    color: var(--sds-color-text-primary, #1a1a1a);
}
.nav-brand:hover {
    background: transparent;
    text-decoration: none;
}
.nav-brand img {
    height: 28px;
    width: auto;
}
.nav-links {
    display: flex;
    gap: var(--sds-space-gap-medium);
    margin-left: var(--sds-space-gap-tiny);
    flex-wrap: wrap;
}
.nav-links a {
    text-decoration: none;
    color: var(--sds-color-text-primary, #1a1a1a);
    font-weight: 500;
    padding: 6px 4px;
}
.nav-links a:hover {
    color: var(--sds-color-brand-primary-strong, #5b3d99);
    text-decoration: underline;
    background: transparent;
}
.nav-spacer {
    flex: 1;
}
.nav-github {
    text-decoration: none;
    font-weight: 500;
}
.nav-github:hover {
    background: transparent;
    color: var(--sds-color-brand-primary-strong, #5b3d99);
}

/* ---------- layout -------------------------------------------------------- */

#header, #content, #footer {
    max-width: var(--site-content-max);
    margin: 0 auto;
    padding: 0 var(--site-content-pad);
}

#header h1 {
    margin: 0 0 6px 0;
    padding: 28px 0 12px;
    font-weight: 700;
    font-size: 2.3rem;
    letter-spacing: -0.01em;
}
#header .details {
    color: var(--sds-color-text-secondary, #6b7280);
    font-size: 0.9rem;
}

#content {
    /* No top padding so a full-bleed .hero-band (homepage) butts directly
     * against #header / .nav-header above. Content pages get their top
     * spacing from #header h1's padding. */
    padding-top: 0;
    padding-bottom: var(--sds-space-padding-huge);
}

/* AsciiDoctor body class scope; `body.book` etc. shouldn't change layout. */
body.article, body.book {
    background: var(--sds-color-layout-page-default, #ffffff);
}

/* ---------- typography ---------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color: var(--sds-color-text-primary, #1a1a1a);
    font-weight: 700;
    line-height: 1.25;
    margin: 1.6em 0 0.6em;
    letter-spacing: -0.005em;
}
/* AsciiDoctor wraps each heading title in `<a class="link">` so the heading
 * is itself a clickable anchor. The body `a` rule would otherwise tint every
 * heading with the link color — inherit instead. */
h1 .link, h2 .link, h3 .link, h4 .link, h5 .link, h6 .link {
    color: inherit;
    text-decoration: none;
}
h1 .link:hover, h2 .link:hover, h3 .link:hover, h4 .link:hover, h5 .link:hover, h6 .link:hover {
    color: inherit;
    background: transparent;
    text-decoration: none;
}
h2 {
    font-size: 1.7rem;
    border-bottom: var(--sds-space-border-weight-thin) solid var(--sds-color-layout-divider-subtle, #e2e4e8);
    padding-bottom: 6px;
}
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

/* AsciiDoctor section anchor on h2/h3 hover */
h2:hover .anchor::before, h3:hover .anchor::before {
    visibility: visible;
}

p, li {
    color: var(--sds-color-text-primary, #1a1a1a);
}

code, pre, kbd, tt {
    font-family: var(--sds-typography-font-family-mono, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace);
}

code {
    background: var(--sds-color-layout-background-neutral, #f4f5f7);
    border: var(--sds-space-border-weight-thin) solid var(--sds-color-layout-divider-subtle, #e2e4e8);
    border-radius: var(--sds-space-border-radius-minimal);
    padding: 0.05em 0.35em;
    font-size: 0.9em;
}

pre code {
    background: transparent;
    border: none;
    padding: 0;
}

.listingblock pre, .literalblock pre {
    background: var(--sds-color-layout-background-neutral, #fafbfc);
    border: var(--sds-space-border-weight-thin) solid var(--sds-color-layout-divider-subtle, #e2e4e8);
    border-radius: var(--sds-space-border-radius-small);
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 0.9rem;
}

/* ---------- hero (index page only) --------------------------------------- */

.hero-band {
    background: var(--sds-color-brand-primary-subtle, #ece4ff);
    margin: 0 calc(-1 * var(--site-content-pad)) var(--sds-space-gap-medium);
    padding: var(--sds-space-padding-huge) var(--site-content-pad);
    text-align: center;
}
.hero-band .hero-title {
    font-size: 3.2rem;
    font-weight: 700;
    margin: 0 0 var(--sds-space-gap-small);
    letter-spacing: -0.015em;
    color: var(--sds-color-text-primary, #1a1a1a);
}
.hero-band .hero-tagline {
    font-size: 1.25rem;
    margin: 0 0 var(--sds-space-gap-medium);
    color: var(--sds-color-text-primary, #1a1a1a);
    opacity: 0.85;
}
.hero-band .cta-row {
    display: flex;
    justify-content: center;
    gap: var(--sds-space-gap-small);
    flex-wrap: wrap;
}
.cta-button {
    display: inline-block;
    background: var(--sds-color-interaction-primary-transparent-default, transparent);
    color: var(--sds-color-text-primary, #1a1a1a);
    border: var(--sds-space-border-weight-thin) solid var(--sds-color-brand-primary-strong, #5b3d99);
    border-radius: var(--sds-space-border-radius-full);
    padding: 10px 22px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: background 120ms ease;
}
.cta-button:hover {
    background: var(--sds-color-interaction-primary-transparent-highlight, rgba(91, 61, 153, 0.08));
    color: var(--sds-color-text-primary, #1a1a1a);
    text-decoration: none;
}

/* ---------- feature row (index page) ------------------------------------- */

/* The 3-feature row uses an AsciiDoc table with `[cols="1a,1a,1a"]` so each
 * cell is parsed as AsciiDoc and the [.feature] role + headings render. */
table.featurerow,
table.featurerow > colgroup,
table.featurerow > * > tr > th,
table.featurerow > * > tr > td {
    border: none;
    background: transparent;
}
table.featurerow {
    width: 100%;
    margin: var(--sds-space-gap-medium) 0 var(--sds-space-gap-large);
    border-collapse: separate;
    /* gap-large (48px) between cells. The vertical 0 is intentional: there's
     * only one row. */
    border-spacing: var(--sds-space-gap-large) 0;
    table-layout: fixed;
}
table.featurerow > * > tr > td {
    vertical-align: top;
    padding: 0 var(--sds-space-padding-tiny);
}
/* Feature cards: image and heading centered (the "poster" feel), prose
 * left-aligned (centered paragraphs of varied line length read as ragged
 * across three columns; left-aligned reads as a clean card). */
.feature img {
    max-width: 220px;
    width: 100%;
    height: auto;
    margin: 0 auto var(--sds-space-padding-medium);
    display: block;
}
.feature h2,
.feature h3 {
    font-size: 1.2rem;
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
    text-align: center;
    font-weight: 600;
}
.feature p {
    margin: var(--sds-space-gap-small) 0;
    text-align: left;
    color: var(--sds-color-text-primary, #1a1a1a);
    line-height: 1.55;
}

/* ---------- TOC ----------------------------------------------------------- */

/* AsciiDoctor's `:toc: left@` mode renders the TOC into #header with the
 * `toc2` class. Its default stylesheet (which we don't load) would float
 * this as a fixed left sidebar with a hard right border. We render it
 * inline as a contained card instead: full border, rounded corners,
 * internal padding so the title and the list don't hug the edges. */
#toc.toc2 {
    background: var(--sds-color-layout-background-neutral, #fafbfc);
    border: var(--sds-space-border-weight-thin) solid var(--sds-color-layout-divider-subtle, #e2e4e8);
    border-radius: var(--sds-space-border-radius-small);
    padding: var(--sds-space-padding-medium);
    margin: 0 0 var(--sds-space-gap-medium);
    font-size: 0.92rem;
}
#toc.toc2 a {
    color: var(--sds-color-text-primary, #1a1a1a);
    text-decoration: none;
}
#toc.toc2 a:hover {
    color: var(--sds-color-brand-primary-strong, #5b3d99);
    background: transparent;
}
#toc #toctitle {
    font-weight: 700;
    color: var(--sds-color-text-primary, #1a1a1a);
    margin: 0 0 var(--sds-space-gap-small);
}
#toc.toc2 ul {
    margin: 0;
    padding-left: var(--sds-space-padding-large);
}

/* ---------- admonitions / advantage-box ----------------------------------- */

.admonitionblock {
    margin: 1.4em 0;
}
.admonitionblock > table {
    border: var(--sds-space-border-weight-thin) solid var(--sds-color-brand-primary-subtle, #ece4ff);
    border-left: var(--sds-space-border-weight-bold) solid var(--sds-color-brand-primary-strong, #5b3d99);
    background: var(--sds-color-brand-accent-subtle, #f5f0ff);
    border-radius: var(--sds-space-border-radius-small);
    padding: var(--sds-space-padding-small) 14px;
    width: 100%;
}
.admonitionblock td.icon {
    width: 36px;
    vertical-align: top;
}
.admonitionblock td.icon .title {
    font-weight: 700;
    color: var(--sds-color-brand-primary-strong, #5b3d99);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}
.admonitionblock td.content {
    padding-left: var(--sds-space-padding-small);
}
.advantage-box {
    background: var(--sds-color-brand-primary-subtle, #ece4ff);
    border-left: var(--sds-space-border-weight-bold) solid var(--sds-color-brand-primary-strong, #5b3d99);
    border-radius: var(--sds-space-border-radius-medium);
    padding: 16px 20px;
    margin: 1.4em 0;
}

/* ---------- tables -------------------------------------------------------- */

table.tableblock {
    border-collapse: collapse;
    margin: 1.2em 0;
    width: 100%;
}
table.tableblock th, table.tableblock td {
    border: var(--sds-space-border-weight-thin) solid var(--sds-color-layout-divider-subtle, #e2e4e8);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}
table.tableblock thead th {
    background: var(--sds-color-layout-background-neutral, #fafbfc);
    font-weight: 700;
}

/* ---------- footer (docinfo, dark band) ----------------------------------- */

#footer {
    /* AsciiDoctor's default per-page footer (timestamps). Hide it; the dark
     * .site-footer below replaces it. */
    display: none;
}

.site-footer {
    background: var(--sds-color-brand-accent-strong, #1d1840);
    color: var(--sds-color-text-on, #ffffff);
    padding: 36px var(--site-content-pad) 28px;
    margin-top: var(--sds-space-padding-huge);
    font-size: 0.92rem;
}
.site-footer-inner {
    max-width: var(--site-content-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sds-space-gap-medium);
}
.site-footer h4 {
    margin: 0 0 var(--sds-space-gap-small);
    color: var(--sds-color-text-on, #ffffff);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
}
.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer li {
    margin: 6px 0;
}
.site-footer a {
    color: var(--sds-color-text-on, #ffffff);
    text-decoration: none;
}
.site-footer a:hover {
    text-decoration: underline;
    background: transparent;
    color: var(--sds-color-text-on, #ffffff);
}
.site-footer-meta {
    grid-column: 1 / -1;
    margin-top: var(--sds-space-padding-medium);
    padding-top: var(--sds-space-padding-medium);
    border-top: var(--sds-space-border-weight-thin) solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

/* ---------- mobile (< 45rem, the design system's small breakpoint) ------- */

/* Layout shapes that need overrides at narrow widths. The horizontal padding,
 * hero band padding, and feature-image margin are already responsive via
 * --sds-space-padding-* tokens, so they don't appear here. What remains:
 *   - the featurerow's 3 columns collapse to single-column block flow,
 *   - the manual landing's 2x2 quadrant grid collapses similarly,
 *   - the nav-header reflows so brand + GitHub share row 1 and links wrap
 *     to row 2,
 *   - the 3.2rem hero title scales down (typography tokens not used here
 *     because the design system's editorial-headline-* sizes are far larger
 *     than what fits on a phone). */
/* ---------- manual quadrants (manual/index.adoc) ------------------------- */

/* Diataxis four-quadrant landing. Same parsed-AsciiDoc-cell pattern as the
 * homepage's featurerow: `[.quadrants,cols="1,1",...]` produces a 2x2 grid
 * with a bold link as the cell title and a short paragraph beneath. */
table.quadrants,
table.quadrants > colgroup,
table.quadrants > * > tr > th,
table.quadrants > * > tr > td {
    border: none;
}
table.quadrants {
    width: 100%;
    margin: var(--sds-space-gap-large) 0;
    border-spacing: var(--sds-space-gap-medium);
    table-layout: fixed;
}
table.quadrants > * > tr > td {
    vertical-align: top;
    padding: var(--sds-space-padding-medium);
    background: var(--sds-color-layout-background-neutral, #fafbfc);
    border-radius: var(--sds-space-border-radius-small);
}
.quadrant-title {
    font-size: 1.25rem;
    display: block;
    margin-bottom: var(--sds-space-gap-small);
}
.quadrant-title a {
    color: var(--sds-color-brand-primary-strong, #5b3d99);
    text-decoration: none;
}
.quadrant-title a:hover {
    text-decoration: underline;
}

/* ---------- page navigation (manual/tutorial/) -------------------------- */

/* Three-column footer row carrying prev / up / next on sequential pages.
 * AsciiDoc form: `[.pagenav,cols="<,^,>",frame=none,grid=none]` table
 * with three single-cell xrefs. Empty cells (first page has no prev,
 * last page has no next) preserve column alignment so the up-link
 * stays centred regardless of which neighbours exist. */
table.pagenav,
table.pagenav > colgroup,
table.pagenav > * > tr > th,
table.pagenav > * > tr > td {
    border: none;
}
table.pagenav {
    width: 100%;
    margin: var(--sds-space-gap-large) 0 0;
    border-top: var(--sds-space-border-weight-thin, 1px) solid var(--sds-color-layout-divider-subtle, #e2e4e8);
    border-spacing: 0;
    table-layout: fixed;
}
table.pagenav > * > tr > td {
    padding: var(--sds-space-padding-small) 0 0;
    vertical-align: top;
    font-size: 0.95rem;
    color: var(--sds-color-text-secondary, #6b7280);
}
table.pagenav a {
    color: var(--sds-color-brand-primary-strong, #5b3d99);
    text-decoration: none;
}
table.pagenav a:hover {
    text-decoration: underline;
}

@media (max-width: 45rem) {
    table.featurerow {
        display: block;
        border-spacing: 0;
        margin: var(--sds-space-gap-medium) 0 var(--sds-space-gap-medium);
    }
    /* Hide the colgroup that pins each cell to 33% width. */
    table.featurerow > colgroup {
        display: none;
    }
    table.featurerow > tbody,
    table.featurerow > tbody > tr {
        display: block;
    }
    table.featurerow > tbody > tr > td {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0 0 var(--sds-space-gap-medium);
    }
    table.featurerow > tbody > tr > td:last-child {
        margin-bottom: 0;
    }
    .feature img {
        max-width: 160px;
    }

    /* The 2x2 quadrant grid uses the same collapse-to-single-column pattern
     * as the homepage featurerow. */
    table.quadrants {
        display: block;
        border-spacing: 0;
        margin: var(--sds-space-gap-medium) 0;
    }
    table.quadrants > colgroup {
        display: none;
    }
    table.quadrants > tbody,
    table.quadrants > tbody > tr {
        display: block;
    }
    table.quadrants > tbody > tr > td {
        display: block;
        width: 100%;
        margin: 0 0 var(--sds-space-gap-medium);
    }
    table.quadrants > tbody > tr > td:last-child {
        margin-bottom: 0;
    }

    /* Pagenav rows that fit comfortably as three columns on desktop
     * cramp at phone widths once the link text exceeds ~30 characters.
     * Stack vertically and keep alignment cues (← prefix on prev,
     * → suffix on next) doing the navigational work in place of the
     * row's left/center/right column geometry. */
    table.pagenav {
        display: block;
        border-spacing: 0;
    }
    table.pagenav > colgroup {
        display: none;
    }
    table.pagenav > tbody,
    table.pagenav > tbody > tr {
        display: block;
    }
    table.pagenav > tbody > tr > td {
        display: block;
        width: 100%;
        text-align: left;
        padding: var(--sds-space-padding-small) 0 0;
    }

    .nav-header-inner {
        flex-wrap: wrap;
        gap: var(--sds-space-gap-tiny) var(--sds-space-gap-medium);
    }
    /* Brand + GitHub on row one; nav-links on row two. The desktop spacer
     * (flex: 1) would fight that, so collapse it. */
    .nav-spacer {
        display: none;
    }
    .nav-brand {
        flex: 1 1 auto;
    }
    .nav-links {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
        gap: var(--sds-space-gap-tiny) var(--sds-space-gap-medium);
    }
    .nav-links a {
        padding: 4px 0;
    }

    .hero-band .hero-title {
        font-size: 2.2rem;
    }
    .hero-band .hero-tagline {
        font-size: 1.05rem;
    }

    /* Wide tables (the roadmap status board with long titles plus inline
     * code spans is the worst offender) would otherwise push the body past
     * the viewport, and because .nav-header is sticky only on the y-axis,
     * horizontal page scroll drags the nav off-screen. Make each table its
     * own horizontal-scroll container instead. display: block sacrifices
     * outer table layout but the tbody/tr/td defaults keep the inner table
     * intact. */
    table.tableblock {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}