/* Kiln default theme — a fresh, modern documentation theme.
   Light/dark schemes are driven by the [data-palette] attribute on <html>,
   set before paint by the inline script in base.leaf. Brand colours come from
   the --kiln-primary / --kiln-accent variables injected per-site. */

:root {
    --kiln-font-text: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --kiln-font-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --kiln-radius: 10px;
    --kiln-header-height: 60px;
    --kiln-sidebar-width: 280px;
    --kiln-toc-width: 240px;
    --kiln-max-width: 1500px;
}

/* Visually hidden, but still available to assistive tech (e.g. the search
 * status live region). A class rather than an inline style so sites can serve
 * a Content-Security-Policy without style-src 'unsafe-inline'. */
.kiln-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Colour schemes ---- */
[data-palette="light"] {
    --bg: #ffffff;
    --surface: #f7f8fa;
    --surface-2: #eef0f3;
    --text: #1c1c1e;
    --muted: #5b6270;
    --border: #e3e6ea;
    --code-bg: #f4f5f7;
    --code-text: #24292f;
    --header-bg: rgba(255, 255, 255, 0.85);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
    --primary: var(--kiln-primary, #1c1c1e);
    --accent: var(--kiln-accent, #2f6feb);
    --on-primary: #ffffff;
}

[data-palette="dark"] {
    --bg: #0f1115;
    --surface: #161922;
    --surface-2: #1f2330;
    --text: #e6e8ec;
    --muted: #9aa3b2;
    --border: #2a2f3a;
    --code-bg: #1a1d26;
    --code-text: #e6e8ec;
    --header-bg: rgba(15, 17, 21, 0.85);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --primary: var(--kiln-accent, #5b8dff);
    --accent: var(--kiln-accent, #5b8dff);
    --on-primary: #0f1115;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kiln-header-height) + 16px); }

body {
    margin: 0;
    font-family: var(--kiln-font-text);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

/* ---- Header ---- */
.kiln-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--kiln-header-height);
    padding: 0 20px;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.kiln-logo { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 1.05rem; }
.kiln-logo:hover { text-decoration: none; }
.kiln-logo-img { height: 30px; width: auto; display: block; }

.kiln-header-spacer { flex: 1; }

.kiln-header button, .kiln-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    padding: 8px;
}
.kiln-header button:hover, .kiln-controls button:hover { color: var(--text); background: var(--surface-2); }

/* Header / drawer control groups (version + language switchers, palette, repo). */
.kiln-controls { display: flex; align-items: center; gap: 12px; }
.kiln-controls-drawer { display: none; }   /* shown only in the mobile drawer */
/* Hidden on large screens (the qualified selector beats `.kiln-header button`). */
.kiln-header .kiln-search-toggle { display: none; }

/* Hidden on large screens (selector beats `.kiln-header button`); shown on
   mobile in the responsive block below. */
.kiln-header .kiln-menu-toggle { display: none; }

.kiln-repo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
}
.kiln-repo:hover { background: var(--surface-2); text-decoration: none; }

.kiln-palette-toggle .kiln-icon-moon { display: none; }
[data-palette="dark"] .kiln-palette-toggle .kiln-icon-sun { display: none; }
[data-palette="dark"] .kiln-palette-toggle .kiln-icon-moon { display: block; }

/* ---- Layout ---- */
.kiln-layout {
    display: grid;
    grid-template-columns: var(--kiln-sidebar-width) minmax(0, 1fr) var(--kiln-toc-width);
    gap: 36px;
    max-width: var(--kiln-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Per-page chrome hidden via `sidebar: false` / `toc: false` front matter:
   drop the empty track(s) so the main column reflows to full width. */
.kiln-layout.kiln-no-sidebar { grid-template-columns: minmax(0, 1fr) var(--kiln-toc-width); }
.kiln-layout.kiln-no-toc { grid-template-columns: var(--kiln-sidebar-width) minmax(0, 1fr); }
.kiln-layout.kiln-no-sidebar.kiln-no-toc { grid-template-columns: minmax(0, 1fr); }

.kiln-sidebar {
    position: sticky;
    top: var(--kiln-header-height);
    align-self: start;
    height: calc(100vh - var(--kiln-header-height));
    overflow-y: auto;
    padding-block: 24px 48px;
    padding-inline: 0 8px;
}

.kiln-toc {
    position: sticky;
    top: var(--kiln-header-height);
    align-self: start;
    height: calc(100vh - var(--kiln-header-height));
    overflow-y: auto;
    padding: 28px 0 48px;
}

.kiln-main {
    min-width: 0;
    padding: 28px 0 80px;
}

/* ---- Sidebar navigation ---- */
.kiln-nav-list { list-style: none; margin: 0; padding: 0; }
.kiln-nav-list .kiln-nav-list { margin-inline-start: 12px; border-inline-start: 1px solid var(--border); padding-inline-start: 8px; }

.kiln-nav-link {
    display: block;
    padding: 6px 12px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 0.9rem;
}
.kiln-nav-link:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.kiln-nav-link.kiln-current {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-weight: 600;
}

.kiln-nav-section { margin: 2px 0; }
.kiln-nav-summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 7px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
}
.kiln-nav-summary::-webkit-details-marker { display: none; }
.kiln-nav-summary::before {
    content: "›";
    display: inline-block;
    width: 1em;
    transition: transform 0.15s ease;
    color: var(--muted);
}
.kiln-nav-section[open] > .kiln-nav-summary::before { transform: rotate(90deg); }
/* Collapsed chevron points toward the content edge, so mirror it in RTL. */
[dir="rtl"] .kiln-nav-section:not([open]) > .kiln-nav-summary::before { transform: scaleX(-1); }

/* ---- Breadcrumb ---- */
.kiln-breadcrumb {
    max-width: 820px;
    margin: 0 0 1rem;
    font-size: 0.85rem;
}
.kiln-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    padding: 0;
}
/* Separator before every crumb except the first. */
.kiln-breadcrumb li + li::before {
    content: "/";
    margin-inline-end: 0.4em;
    color: var(--muted);
}
.kiln-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
}
.kiln-breadcrumb a:hover { text-decoration: underline; }
.kiln-breadcrumb [aria-current="page"] { color: var(--text); }

/* ---- Article ---- */
.kiln-article {
    max-width: 820px;
}
.kiln-article h1, .kiln-article h2, .kiln-article h3, .kiln-article h4 {
    line-height: 1.25;
    scroll-margin-top: calc(var(--kiln-header-height) + 16px);
}
.kiln-article h1 { font-size: 2.1rem; margin: 0 0 0.6em; }
.kiln-article h2 { font-size: 1.5rem; margin: 1.8em 0 0.6em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
.kiln-article h3 { font-size: 1.2rem; margin: 1.6em 0 0.5em; }
.kiln-article h4 { font-size: 1.02rem; margin: 1.4em 0 0.5em; }
.kiln-article p, .kiln-article ul, .kiln-article ol { margin: 0.8em 0; }
.kiln-article img { max-width: 100%; height: auto; border-radius: var(--kiln-radius); }
.kiln-article blockquote {
    margin: 1em 0;
    padding: 0.2em 1.1em;
    border-inline-start: 4px solid var(--border);
    color: var(--muted);
}

.headerlink {
    margin-inline-start: 0.4em;
    color: var(--muted);
    opacity: 0;
    text-decoration: none;
    transition: opacity 0.1s ease;
}
.kiln-article h1:hover .headerlink,
.kiln-article h2:hover .headerlink,
.kiln-article h3:hover .headerlink,
.kiln-article h4:hover .headerlink { opacity: 1; }

/* ---- Code ---- */
code {
    font-family: var(--kiln-font-code);
    font-size: 0.88em;
    background: var(--code-bg);
    padding: 0.15em 0.4em;
    border-radius: 5px;
}
pre {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--kiln-radius);
    padding: 16px 18px;
    overflow-x: auto;
    line-height: 1.5;
}
pre code { background: none; padding: 0; font-size: 0.85rem; color: var(--code-text); }
/* Code is always left-to-right, even inside RTL prose (indentation, comments and
   punctuation only read correctly LTR). Isolate inline code so a token can't
   disrupt the bidi ordering of the surrounding text. */
pre, pre code { direction: ltr; text-align: left; }
:not(pre) > code { unicode-bidi: isolate; }

/* ---- Tables ---- */
.kiln-article table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.2em 0;
    font-size: 0.92rem;
}
.kiln-article th, .kiln-article td { border: 1px solid var(--border); padding: 8px 12px; text-align: start; }
.kiln-article thead th { background: var(--surface); }
.kiln-article tbody tr:nth-child(even) { background: var(--surface); }

/* ---- Admonitions ---- */
.admonition {
    margin: 1.2em 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--kiln-radius);
    background: var(--surface);
}
.admonition > :first-child { margin-top: 0; }
.admonition > :last-child { margin-bottom: 0; }
.admonition-title {
    margin: 0 0 0.5em;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}
details.admonition > summary.admonition-title { cursor: pointer; list-style: none; }
details.admonition > summary.admonition-title::-webkit-details-marker { display: none; }

.admonition.note, .admonition.seealso { border-inline-start-color: #3b82f6; }
.admonition.note .admonition-title, .admonition.seealso .admonition-title { color: #3b82f6; }
.admonition.tip, .admonition.success, .admonition.hint { border-inline-start-color: #10b981; }
.admonition.tip .admonition-title, .admonition.success .admonition-title, .admonition.hint .admonition-title { color: #10b981; }
.admonition.warning, .admonition.caution, .admonition.attention { border-inline-start-color: #f59e0b; }
.admonition.warning .admonition-title, .admonition.caution .admonition-title, .admonition.attention .admonition-title { color: #f59e0b; }
.admonition.danger, .admonition.error, .admonition.bug { border-inline-start-color: #ef4444; }
.admonition.danger .admonition-title, .admonition.error .admonition-title, .admonition.bug .admonition-title { color: #ef4444; }
.admonition.info { border-inline-start-color: #06b6d4; }
.admonition.info .admonition-title { color: #06b6d4; }

/* ---- Table of contents ---- */
.kiln-toc-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 10px; }
.kiln-toc-list, .kiln-toc-sublist { list-style: none; margin: 0; padding: 0; }
.kiln-toc-sublist { margin-inline-start: 12px; }
.kiln-toc-entry a { display: block; padding: 3px 0; color: var(--muted); font-size: 0.85rem; border-inline-start: 2px solid transparent; padding-inline-start: 10px; margin-inline-start: -2px; }
.kiln-toc-entry a:hover { color: var(--text); text-decoration: none; }
.kiln-toc-entry a.kiln-toc-active { color: var(--accent); border-inline-start-color: var(--accent); }

/* ---- Page navigation (prev/next) ---- */
.kiln-page-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.kiln-page-nav a { flex: 1; display: flex; flex-direction: column; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--kiln-radius); }
.kiln-page-nav a:hover { border-color: var(--accent); text-decoration: none; }
.kiln-next { text-align: end; align-items: flex-end; }
.kiln-page-nav-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.kiln-page-nav-title { font-weight: 600; color: var(--text); }

.kiln-edit-link { display: inline-block; margin-top: 24px; font-size: 0.85rem; color: var(--muted); }

.kiln-fallback { border-inline-start-color: #f59e0b; }
.kiln-fallback .admonition-title { color: #f59e0b; }

/* ---- Search ---- */
.kiln-search { position: relative; display: flex; align-items: center; }
.kiln-search-icon { position: absolute; inset-inline-start: 10px; color: var(--muted); pointer-events: none; }
.kiln-search-input {
    width: 220px;
    max-width: 40vw;
    padding: 8px 12px;
    padding-inline-start: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
}
.kiln-search-input:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.kiln-search-results {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: min(520px, 90vw);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--kiln-radius);
    box-shadow: var(--shadow);
    padding: 8px;
    z-index: 100;
}
.kiln-search-result { display: block; position: relative; padding: 10px 12px; border-radius: 8px; color: var(--text); }
.kiln-search-result:hover { background: var(--surface); text-decoration: none; }

/* The keyboard selection has to outrank hover rather than match it. Sharing
   one background gave it two problems: --surface sits a couple of percent
   off --bg, so the selection was nearly invisible on its own, and with the
   pointer anywhere over the list two rows lit up identically with no telling
   which one Return would open.

   Hence a treatment hover does not get — an accent-tinted fill and a bar down
   the leading edge. The bar is the part that survives a high-contrast palette
   and a reader who cannot separate the two fills by hue: it is a shape, not a
   tint. */
.kiln-search-result.kiln-active {
    background: color-mix(in srgb, var(--accent) 16%, var(--bg));
    text-decoration: none;
}
.kiln-search-result.kiln-active::before {
    content: "";
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--accent);
}
.kiln-search-result.kiln-active .kiln-search-result-title { color: var(--accent); }
/* --muted loses too much against the tinted fill; on the selected row the
   context line reads as body text. */
.kiln-search-result.kiln-active .kiln-search-result-context { color: var(--text); }
/* The <mark> and the badge are already accent tints, and tint-on-tint goes
   muddy — push both enough to stay distinct inside the fill. */
.kiln-search-result.kiln-active mark { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.kiln-search-result.kiln-active .kiln-search-result-badge {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.kiln-search-result-title { font-weight: 600; display: block; }
/* Kind pill on a result (e.g. a DocC module landing page). */
.kiln-search-result-badge {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.kiln-search-result-context { font-size: 0.82rem; color: var(--muted); display: block; }
.kiln-search-result mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 3px; }
.kiln-search-empty { padding: 14px; color: var(--muted); text-align: center; }

/* ---- Language switcher ---- */
.kiln-lang-switcher { position: relative; }
.kiln-lang-button { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.kiln-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    list-style: none;
    margin: 0;
    padding: 6px;
    min-width: 160px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--kiln-radius);
    box-shadow: var(--shadow);
    display: none;
    z-index: 100;
}
.kiln-lang-switcher.kiln-open .kiln-lang-menu { display: block; }
.kiln-lang-option { display: block; padding: 8px 12px; border-radius: 7px; color: var(--text); font-size: 0.88rem; }
.kiln-lang-option:hover { background: var(--surface); text-decoration: none; }
.kiln-lang-option.kiln-current { color: var(--accent); font-weight: 600; }

/* Version switcher */
.kiln-version-switcher { position: relative; }
.kiln-version-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
}
.kiln-version-button:hover { border-color: var(--accent); }
.kiln-version-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    list-style: none;
    margin: 0;
    padding: 6px;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--kiln-radius);
    box-shadow: var(--shadow);
    display: none;
    z-index: 100;
}
.kiln-version-switcher.kiln-open .kiln-version-menu { display: block; }
.kiln-version-option { display: block; padding: 8px 12px; border-radius: 7px; color: var(--text); font-size: 0.88rem; }
.kiln-version-option:hover { background: var(--surface); text-decoration: none; }
.kiln-version-option.kiln-current { color: var(--accent); font-weight: 600; }
.kiln-version-option.kiln-prerelease::after { content: " · pre"; opacity: 0.6; font-size: 0.78em; }
.kiln-version-option.kiln-deprecated { opacity: 0.65; }

/* "Viewing an older version" notice */
.kiln-version-notice { margin-bottom: 1.5rem; }

/* ---- DocC (API reference) ---- */

/* Select component — the sidebar module/version switchers. A native <details>
   pill whose menu drops over the nav below it. */
.docc-select { position: relative; margin: 0 0 10px; }
.docc-select-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.docc-select-toggle::-webkit-details-marker { display: none; }
.docc-select-toggle:hover { border-color: var(--accent); }
.docc-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docc-select-chevron { display: inline-flex; flex: none; color: var(--muted); }
.docc-select-chevron svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.docc-select[open] .docc-select-chevron svg { transform: rotate(180deg); }
.docc-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
    z-index: 70;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--kiln-radius);
    box-shadow: var(--shadow);
}
.docc-select-group {
    margin: 10px 8px 2px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.docc-select-group:first-child { margin-top: 4px; }
.docc-select-option { display: block; padding: 7px 10px; border-radius: 7px; color: var(--text); font-size: 0.88rem; }
.docc-select-option:hover { background: var(--surface); text-decoration: none; }
.docc-select-option.is-current { color: var(--accent); font-weight: 600; }

/* Pre-release / deprecated pill on switcher options and catalog cards. */
.docc-select-badge, .docc-catalog-card-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

/* Symbol sidebar: the module-home link and the navigator tree. */
.docc-nav-home {
    display: block;
    padding: 6px 12px;
    margin: 2px 0 4px;
    border-radius: 7px;
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
}
.docc-nav-home:hover { background: var(--surface); text-decoration: none; }

.docc-nav-list { list-style: none; margin: 0; padding: 0; }
.docc-nav-list .docc-nav-list {
    margin-inline-start: 14px;
    border-inline-start: 1px solid var(--border);
    padding-inline-start: 6px;
}
/* A group marker's children are a top-level run, not a nested branch. */
.docc-nav-group > .docc-nav-list { margin-inline-start: 0; border-inline-start: none; padding-inline-start: 0; }

.docc-nav-item { margin: 1px 0; }
.docc-nav-row { display: flex; align-items: center; gap: 2px; }
.docc-nav-row .docc-nav-link { flex: 1; min-width: 0; }
/* Leaf links reserve the toggle's width so titles align across siblings. */
.docc-nav-item > .docc-nav-link { padding-inline-start: 34px; }

.docc-nav-link {
    display: block;
    padding: 5px 10px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}
.docc-nav-link:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.docc-nav-link.docc-current {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-weight: 600;
}

.docc-nav-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--muted);
    cursor: pointer;
}
.docc-nav-toggle:hover { background: var(--surface-2); color: var(--text); }
.docc-nav-chevron { display: inline-flex; }
.docc-nav-chevron svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.docc-nav-toggle[aria-expanded="true"] .docc-nav-chevron svg { transform: rotate(90deg); }
/* Collapsed chevron points toward the content edge, so mirror it in RTL. */
[dir="rtl"] .docc-nav-toggle[aria-expanded="false"] .docc-nav-chevron svg { transform: scaleX(-1); }

.docc-nav-group > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 10px 4px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
}
.docc-nav-group > summary::-webkit-details-marker { display: none; }

/* Catalog landing page: the grouped module cards. */
.docc-catalog-lead { font-size: 1.15rem; color: var(--muted); margin: -0.2em 0 0; }
.docc-catalog-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 1em;
}
.docc-catalog-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--kiln-radius);
    background: var(--surface);
    color: var(--text);
}
.docc-catalog-card:hover { border-color: var(--accent); text-decoration: none; }
.docc-catalog-card-title { font-weight: 700; font-size: 1.05rem; }
.docc-catalog-card-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }

/* Symbol/article page header: optional module logo, role eyebrow, title. */
.docc-header { margin-bottom: 1.6em; }
.docc-module-image { display: block; max-height: 80px; width: auto; margin-bottom: 14px; }
.docc-eyebrow {
    margin: 0 0 0.4em;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}
/* Extended-module badge: which foreign module a cross-module extension extends. */
.docc-extended-module {
    display: inline-block;
    margin-inline-start: 0.7em;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.docc-header h1 { margin-bottom: 0; overflow-wrap: anywhere; }
h1.docc-symbol-title { font-family: var(--kiln-font-code); font-size: 1.65rem; font-weight: 600; }

/* Platform-availability badges under the title. */
.docc-availability { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.docc-availability-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}
.docc-availability-flag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent);
}
.docc-availability-flag.is-deprecated { color: #f59e0b; }

/* Deprecation callout (an amber admonition). */
.admonition.deprecated { border-inline-start-color: #f59e0b; }
.admonition.deprecated .admonition-title { color: #f59e0b; }

/* Deprecated symbols are struck through in the sidebar. */
.docc-nav-deprecated > .docc-nav-link,
.docc-nav-deprecated > .docc-nav-row > .docc-nav-link { text-decoration: line-through; }

/* The lead abstract under the title. Inline content only, so style the box. */
.docc-abstract { font-size: 1.12rem; color: var(--muted); line-height: 1.6; margin: 0 0 1.4em; }

/* Embedded @Video (and its optional caption). */
.docc-figure { margin: 1.4em 0; }
.docc-video { display: block; width: 100%; max-width: 100%; border-radius: var(--kiln-radius); background: #000; }
.docc-figure figcaption { margin-top: 0.5em; font-size: 0.9rem; color: var(--muted); text-align: center; }

/* Sample-code download button. */
.docc-download {
    display: inline-block;
    margin: 0.6em 0 1.6em;
    padding: 10px 20px;
    border-radius: var(--kiln-radius);
    background: var(--accent);
    color: var(--on-primary);
    font-weight: 600;
    font-size: 0.95rem;
}
.docc-download:hover { text-decoration: none; filter: brightness(1.08); }

/* Declaration block. Long signatures wrap rather than scroll (matching
   DocC's own rendering). Tokens are coloured below to match the highlight.js
   palette used in code listings; linked tokens keep their token colour. */
.docc-declaration pre { margin: 1.2em 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.docc-declaration a:hover { text-decoration: underline; }

[data-palette="light"] .token-keyword, [data-palette="light"] .token-attribute { color: #d73a49; }
[data-palette="light"] .token-typeIdentifier { color: #6f42c1; }
[data-palette="light"] .token-genericParameter { color: #e36209; }
[data-palette="light"] .token-number { color: #005cc5; }
[data-palette="light"] .token-string { color: #032f62; }
[data-palette="light"] .token-internalParam { color: #6a737d; }

[data-palette="dark"] .token-keyword, [data-palette="dark"] .token-attribute { color: #ff7b72; }
[data-palette="dark"] .token-typeIdentifier { color: #d2a8ff; }
[data-palette="dark"] .token-genericParameter { color: #ffa657; }
[data-palette="dark"] .token-number { color: #79c0ff; }
[data-palette="dark"] .token-string { color: #a5d6ff; }
[data-palette="dark"] .token-internalParam { color: #8b949e; }

/* Parameters / Possible Values definition lists. */
.docc-parameter-list { margin: 1em 0; }
.docc-parameter-name { margin-top: 1.1em; font-weight: 600; }
.docc-parameter-name code { background: none; padding: 0; font-size: 0.95em; }
.docc-parameter-description { margin: 0.2em 0 0; margin-inline-start: 1.5em; }
.docc-parameter-description > :first-child { margin-top: 0; }
.docc-parameter-description > :last-child { margin-bottom: 0; }

/* Topics / Default Implementations / See Also symbol cards: the linked
   declaration fragments with the abstract underneath. */
.docc-topic-list { list-style: none; margin: 1em 0; padding: 0; }
.docc-topic { margin: 0 0 14px; padding-inline-start: 14px; border-inline-start: 2px solid var(--border); }
.docc-topic-link { overflow-wrap: anywhere; }
.docc-topic-link code { background: none; padding: 0; }
.docc-topic-abstract { margin-top: 2px; font-size: 0.92rem; color: var(--muted); }
.docc-topic-abstract code { font-size: 0.85em; }

/* `@Links` card grids/lists in discussion prose. The grid styles auto-fit
   cards; the list style stacks them full-width. */
.docc-link-cards { display: grid; gap: 14px; margin: 1.2em 0; }
.docc-link-cards--compactgrid,
.docc-link-cards--detailedgrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.docc-link-cards--list { grid-template-columns: 1fr; }
.docc-link-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--kiln-radius);
    background: var(--surface);
    color: var(--text);
}
.docc-link-card:hover { border-color: var(--accent); }
.docc-link-card-title { font-weight: 600; overflow-wrap: anywhere; color: var(--text); }
.docc-link-card-title:hover { text-decoration: none; }
.docc-link-card-title code { background: none; padding: 0; }
/* Stretch the title link over the whole card so it's fully clickable, while
   leaving any links inside the abstract clickable above it. */
.docc-link-card-title::after { content: ""; position: absolute; inset: 0; }
.docc-link-card-abstract { position: relative; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.docc-link-card-abstract a { position: relative; }
.kiln-footer { border-top: 1px solid var(--border); margin-top: 40px; }
.kiln-footer-inner { max-width: var(--kiln-max-width); margin: 0 auto; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.kiln-social { display: flex; gap: 14px; }
.kiln-social-link { color: var(--muted); display: inline-flex; }
.kiln-social-link:hover { color: var(--accent); }
.kiln-social-link svg { display: block; }
.kiln-copyright, .kiln-built-with { margin: 0; font-size: 0.82rem; color: var(--muted); }

/* ---- Error page ---- */
.kiln-error { text-align: center; padding: 80px 0; }
.kiln-error h1 { font-size: 5rem; margin: 0; color: var(--accent); }

/* ---- Sidebar backdrop (mobile) ---- */
.kiln-backdrop { display: none; }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .kiln-layout { grid-template-columns: var(--kiln-sidebar-width) minmax(0, 1fr); }
    .kiln-toc { display: none; }
}

@media (max-width: 900px) {
    .kiln-layout { grid-template-columns: minmax(0, 1fr); padding: 0 18px; }
    .kiln-header .kiln-menu-toggle { display: inline-flex; }

    /* Mobile header: hamburger + logo + search button only. The switchers,
       palette toggle and repo link move into the drawer. */
    .kiln-controls-header { display: none; }
    .kiln-header .kiln-search-toggle { display: inline-flex; }

    /* Search becomes a full-width overlay panel below the header. */
    .kiln-search {
        position: fixed;
        top: var(--kiln-header-height);
        inset-inline: 0;
        display: none;
        flex-direction: column;
        padding: 12px 18px 16px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        z-index: 60;
    }
    body.kiln-search-open .kiln-search { display: flex; }
    .kiln-search-icon { display: none; }
    .kiln-search-input { width: 100%; max-width: none; padding-inline-start: 12px; }
    .kiln-search-results {
        position: static;
        width: 100%;
        margin-top: 8px;
        max-height: calc(100vh - var(--kiln-header-height) - 96px);
        border: none;
        box-shadow: none;
        padding: 4px 0 0;
    }

    /* Controls in the drawer, wrapping onto multiple rows. */
    .kiln-controls-drawer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding-bottom: 16px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }
    /* Dropdowns open inward (start-aligned) so they don't clip off the drawer. */
    .kiln-controls-drawer .kiln-lang-menu,
    .kiln-controls-drawer .kiln-version-menu { inset-inline-start: 0; inset-inline-end: auto; }

    .kiln-sidebar {
        position: fixed;
        top: var(--kiln-header-height);
        inset-inline-start: 0;
        width: 86%;
        max-width: 320px;
        background: var(--bg);
        border-inline-end: 1px solid var(--border);
        padding: 16px;
        /* Hidden off the inline-start edge; the RTL override below flips the
           slide direction since translateX() isn't a logical property. */
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 60;
    }
    [dir="rtl"] .kiln-sidebar { transform: translateX(100%); }
    body.kiln-nav-open .kiln-sidebar { transform: translateX(0); }
    body.kiln-nav-open .kiln-backdrop {
        display: block;
        position: fixed;
        inset: var(--kiln-header-height) 0 0 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 55;
    }
}

/* ---- Syntax highlighting (highlight.js token colours) ---- */
.hljs { color: var(--code-text); background: transparent; }
[data-palette="light"] .hljs-comment, [data-palette="light"] .hljs-quote { color: #6a737d; font-style: italic; }
[data-palette="light"] .hljs-keyword, [data-palette="light"] .hljs-selector-tag, [data-palette="light"] .hljs-built_in, [data-palette="light"] .hljs-literal { color: #d73a49; }
[data-palette="light"] .hljs-string, [data-palette="light"] .hljs-regexp, [data-palette="light"] .hljs-meta-string { color: #032f62; }
[data-palette="light"] .hljs-number, [data-palette="light"] .hljs-symbol, [data-palette="light"] .hljs-bullet { color: #005cc5; }
[data-palette="light"] .hljs-title, [data-palette="light"] .hljs-section, [data-palette="light"] .hljs-function .hljs-title { color: #6f42c1; }
[data-palette="light"] .hljs-type, [data-palette="light"] .hljs-class .hljs-title, [data-palette="light"] .hljs-attr, [data-palette="light"] .hljs-attribute { color: #e36209; }
[data-palette="light"] .hljs-meta { color: #6a737d; }

[data-palette="dark"] .hljs-comment, [data-palette="dark"] .hljs-quote { color: #8b949e; font-style: italic; }
[data-palette="dark"] .hljs-keyword, [data-palette="dark"] .hljs-selector-tag, [data-palette="dark"] .hljs-built_in, [data-palette="dark"] .hljs-literal { color: #ff7b72; }
[data-palette="dark"] .hljs-string, [data-palette="dark"] .hljs-regexp, [data-palette="dark"] .hljs-meta-string { color: #a5d6ff; }
[data-palette="dark"] .hljs-number, [data-palette="dark"] .hljs-symbol, [data-palette="dark"] .hljs-bullet { color: #79c0ff; }
[data-palette="dark"] .hljs-title, [data-palette="dark"] .hljs-section, [data-palette="dark"] .hljs-function .hljs-title { color: #d2a8ff; }
[data-palette="dark"] .hljs-type, [data-palette="dark"] .hljs-class .hljs-title, [data-palette="dark"] .hljs-attr, [data-palette="dark"] .hljs-attribute { color: #ffa657; }
[data-palette="dark"] .hljs-meta { color: #8b949e; }

/* ---- Carbon ads (in the TOC sidebar) ---- */
.kiln-carbon { margin-top: 24px; }
#carbonads {
    font-size: 12px;
    font-family: var(--kiln-font-text);
}
#carbonads > span {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--kiln-radius);
}
#carbonads a { color: var(--text); text-decoration: none; }
#carbonads a:hover { color: var(--accent); }
#carbonads .carbon-wrap { display: flex; flex-direction: column; gap: 10px; }
#carbonads .carbon-img img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
#carbonads .carbon-text { line-height: 1.4; color: var(--muted); }
#carbonads .carbon-poweredby {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.65em;
    letter-spacing: 0.15ch;
    text-transform: uppercase;
}

/* ---- Accessibility ---- */

/* Skip-to-content link: off-screen until it receives keyboard focus, then pinned
   top-left so keyboard/AT users can bypass the header/nav. */
.kiln-skip-link {
    position: fixed;
    top: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 10000;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform 0.18s ease;
}

.kiln-skip-link:focus {
    transform: translateY(0);
}

/* Visible keyboard focus indicator (only for keyboard navigation, not mouse). */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Respect users who prefer reduced motion: near-instant transitions/animations. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}