/* web fonts */
@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url("/media/fonts/raleway-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url("/media/fonts/raleway-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 700;
    font-display: optional;
    src: url("/media/fonts/raleway-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 700;
    font-display: optional;
    src: url("/media/fonts/raleway-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url("/media/fonts/open-sans-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url("/media/fonts/open-sans-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url("/media/fonts/open-sans-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url("/media/fonts/open-sans-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* design tokens */
:root {
    --color-background: #FFFFFF;
    --color-text: #3C3C3C;
    --color-primary: #3498DB;
    --color-on-primary: #FFFFFF;
    --color-azure-deep: #2980B9;
    --color-slate: #2C3E50;
    --color-muted: #6B7C8C;
    --color-sky: #E9F4FB;
    --color-mist: #F5F9FC;
    --color-line: #DDE5EC;
    --color-note-yellow: #F6B73C;
    --color-note-yellow-bg: #FFF6DE;
    --color-note-red: #E8553A;
    --color-note-red-bg: #FDE7E1;
    --font-base: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size-base: 16px;
    --spacing-block: 2.5rem;
    --radius-button: 6px;
    --radius-media: 8px;
    --max-width: 60rem;
}


/* system base */
/* SiteStudio base styles — a small, token-driven foundation.
   Projects style on top of this via design/global.css and block CSS. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base, 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    margin: 0 0 0.6em;
}

p {
    margin: 0 0 1em;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
}

/* Header / navigation */

.site-header {
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.site-header-inner {
    max-width: var(--max-width, 64rem);
    margin: 0 auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.site-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--color-text);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
}

.site-nav a {
    text-decoration: none;
    color: var(--color-text);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--color-primary);
}

.site-nav a[aria-current="page"] {
    font-weight: 600;
}

/* Language switcher (multilingual sites only). Two presentations share
   one markup: a row of links and a CSS-only dropdown (<details>). Which
   one shows is decided by the site (site.json → languageSwitcher):
   lang-switch-menu (default) / lang-switch-links always, lang-switch-auto
   = links on wide screens, the dropdown below the navigation breakpoint. */

.site-lang {
    font-size: 0.9rem;
}

.site-lang-links {
    display: flex;
    gap: 0.6rem;
}

.site-lang a {
    text-decoration: none;
    color: var(--color-text);
    opacity: 0.75;
}

.site-lang a:hover,
.site-lang a[aria-current="true"] {
    opacity: 1;
    color: var(--color-primary);
}

.site-lang a[aria-current="true"] {
    font-weight: 600;
}

.site-lang-menu {
    position: relative;
}

.site-lang-menu summary {
    list-style: none;
    cursor: pointer;
    padding: 0.35rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: var(--radius-button, 6px);
    white-space: nowrap;
    user-select: none;
}

.site-lang-menu summary::-webkit-details-marker {
    display: none;
}

.site-lang-menu summary::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
}

.site-lang-menu[open] summary::after {
    transform: translateY(0.1em) rotate(-135deg);
}

.site-lang-menu summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.site-lang-menu ul {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 20;
    min-width: max-content;
    margin: 0;
    padding: 0.3rem 0;
    list-style: none;
    background: var(--color-background);
    border: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
    border-radius: var(--radius-card, 8px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 15%, transparent);
}

.site-lang-menu li a {
    display: block;
    padding: 0.5rem 1rem;
}

.site-lang-menu li a:hover {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.site-lang-flag {
    display: inline-block;
    width: 1.25em;
    font-size: 1.1em;
    line-height: 1;
    text-align: center;
}

.lang-switch-links .site-lang-menu,
.lang-switch-menu .site-lang-links,
.lang-switch-auto .site-lang-menu {
    display: none;
}

@media (max-width: 56rem) {
    .lang-switch-auto .site-lang-links {
        display: none;
    }

    .lang-switch-auto .site-lang-menu {
        display: block;
    }
}

/* Burger menu on small screens — CSS-only via a checkbox toggle. The
   checkbox is the accessible control (focusable, exposes its checked
   state); the label is merely the visual burger. The breakpoint is
   substituted at build time from design/tokens.json → layout.navBreakpoint
   (default 46rem) — media queries cannot read CSS custom properties. */

.site-nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-nav-burger {
    display: none;
}

@media (max-width: 56rem) {
    .site-header-inner {
        position: relative;
    }

    /* Brand left; language switcher and burger side by side on the right;
       the navigation (flex-basis 100%) wraps onto its own line below. The
       brand may shrink and wrap its words so the controls never drop to a
       second line on narrow phones. */
    .site-brand {
        flex: 1 1 0%;
        min-width: 0;
        margin-right: auto;
    }

    .site-header-inner {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    .site-lang-menu summary {
        padding: 0.3rem 0.5rem;
        font-size: 0.85rem;
    }

    .site-lang {
        order: 1;
    }

    .site-nav-burger {
        order: 2;
    }

    .site-nav {
        order: 3;
    }

    .site-nav-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0 0.5rem;
        border-radius: 6px;
        cursor: pointer;
        color: var(--color-text);
    }

    .site-nav-burger::before,
    .site-nav-burger::after,
    .site-nav-burger span {
        content: "";
        display: block;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .site-nav-toggle:checked + .site-nav-burger span {
        opacity: 0;
    }

    .site-nav-toggle:checked + .site-nav-burger::before {
        transform: translateY(7px) rotate(45deg);
    }

    .site-nav-toggle:checked + .site-nav-burger::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    .site-nav-toggle:focus-visible + .site-nav-burger {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    .site-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 0.5rem;
    }

    .site-nav-toggle:checked ~ .site-nav {
        display: flex;
    }

    .site-nav a {
        padding: 0.7rem 0;
        border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    }
}

/* Sidebar navigation (site.json → navigation: "sidebar") — for
   documentation-style sites. The side column holds brand, language
   switcher and the page tree (nested via navParent; the active branch is
   open, other branches are collapsible <details>). Below the navigation
   breakpoint it turns into a sticky top bar with the same CSS-only burger
   as the header. The column width follows --sidebar-width (override it in
   design/global.css). */

body.layout-sidebar {
    display: grid;
    grid-template-columns: clamp(12rem, 24vw, var(--sidebar-width, 17rem)) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-height: 100vh;
}

body.layout-sidebar > main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

body.layout-sidebar > .site-footer {
    grid-column: 2;
    grid-row: 2;
}

.site-sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    align-self: start;
    /* Full viewport height; only the page tree scrolls — a scrolling
       <aside> would clip the language dropdown in the head. */
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: 1.25rem 1rem 0;
    border-right: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    background: var(--color-background);
}

.site-sidebar-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 2;
}

/* The switcher sits on the left here: open the dropdown rightwards (the
   header opens it leftwards from the right edge). */
.site-sidebar .site-lang-menu ul {
    left: 0;
    right: auto;
}

.site-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 2rem;
}

.site-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-sidebar-nav ul ul {
    margin: 0.1rem 0 0.3rem 0.6rem;
    padding-left: 0.6rem;
    border-left: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.site-sidebar-nav a {
    display: block;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-button, 6px);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.35;
}

.site-sidebar-nav a:hover {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.site-sidebar-nav a[aria-current="page"] {
    color: var(--color-primary);
    font-weight: 600;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* A parent entry: the label is a link to its page, the chevron on the
   right toggles the branch. */
.site-sidebar-nav summary {
    display: flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.site-sidebar-nav summary::-webkit-details-marker {
    display: none;
}

.site-sidebar-nav summary a {
    flex: 1 1 auto;
    min-width: 0;
}

.site-sidebar-nav summary::after {
    content: "";
    flex: none;
    width: 0.45em;
    height: 0.45em;
    margin: 0 0.6rem 0 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.6;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.site-sidebar-nav details[open] > summary::after {
    transform: rotate(45deg);
}

.site-sidebar-nav summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-button, 6px);
}

@media (max-width: 56rem) {
    body.layout-sidebar {
        display: block;
    }

    .site-sidebar {
        z-index: 30;
        height: auto;
        padding: 0.75rem 1.25rem;
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    }

    .site-sidebar-head {
        flex-wrap: nowrap;
        margin-bottom: 0;
    }

    /* Top bar: the switcher is back on the right. */
    .site-sidebar .site-lang-menu ul {
        left: auto;
        right: 0;
    }

    /* The open menu scrolls on its own below the bar. */
    .site-sidebar-nav {
        display: none;
        max-height: calc(100dvh - 4.5rem);
        padding: 0.75rem 0 0.5rem;
    }

    .site-nav-toggle:checked ~ .site-sidebar-nav {
        display: block;
    }

    .site-sidebar-nav a {
        padding: 0.55rem 0.5rem;
    }

    .site-nav-toggle:checked ~ .site-sidebar-head .site-nav-burger span {
        opacity: 0;
    }

    .site-nav-toggle:checked ~ .site-sidebar-head .site-nav-burger::before {
        transform: translateY(7px) rotate(45deg);
    }

    .site-nav-toggle:checked ~ .site-sidebar-head .site-nav-burger::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    .site-nav-toggle:focus-visible ~ .site-sidebar-head .site-nav-burger {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
}

/* Blocks */

/* Every heading carries an id (see Content\Headings): anchor targets stop
   short of the viewport edge — and of the sticky top bar on phones. */
:is(h1, h2, h3, h4, h5, h6)[id] {
    scroll-margin-top: 1.5rem;
}

@media (max-width: 56rem) {
    body.layout-sidebar :is(h1, h2, h3, h4, h5, h6)[id] {
        scroll-margin-top: 4.5rem;
    }
}

.block {
    padding: var(--spacing-block, 3.5rem) 1.25rem;
}

.block-inner,
.block > :not(.block-full) {
    max-width: var(--max-width, 64rem);
    margin-left: auto;
    margin-right: auto;
}

/* Footer */

.site-footer {
    margin-top: 2rem;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    font-size: 0.9rem;
}

.site-footer-inner {
    max-width: var(--max-width, 64rem);
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
}

.site-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-footer-nav a {
    color: var(--color-text);
    text-decoration: none;
}

.site-footer-nav a:hover {
    color: var(--color-primary);
}


/* system search */
/* Site search (site.json → search: true). A trigger styled like an input
   sits in the sidebar head (or the header next to the language switcher)
   and opens a <dialog> with the real field; matching happens in the
   browser against /search-index.<lang>.json (see search.js). Appended to
   the stylesheet only for sites that enable the search. */

.site-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.7rem;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: left;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: var(--radius-button, 6px);
    cursor: text;
}

.site-search-trigger:hover,
.site-search-trigger:focus-visible {
    color: var(--color-text);
    border-color: var(--color-primary);
    outline: none;
}

.site-search-icon {
    flex: none;
    width: 1.1em;
    height: 1.1em;
}

.site-search-trigger-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-search-kbd {
    font: inherit;
    font-size: 0.72em;
    padding: 0.05rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
    border-radius: 4px;
}

/* Header layout: a compact field between navigation and language switcher. */
.site-header-inner .site-search-trigger {
    width: 11rem;
}

/* Sidebar layout: its own full-width row below brand and switcher. */
.site-sidebar-head .site-search {
    flex: 0 0 100%;
    order: 10;
}

/* Dialog */

.site-search-dialog {
    width: min(40rem, calc(100vw - 2rem));
    max-height: min(80vh, 42rem);
    margin: 8vh auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-card, 10px);
    background: var(--color-background);
    color: var(--color-text);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.site-search-dialog[open] {
    display: flex;
    flex-direction: column;
}

.site-search-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.site-search-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.site-search-form .site-search-icon {
    opacity: 0.6;
}

.site-search-input {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: 1.05rem;
    color: inherit;
    background: transparent;
    border: 0;
    outline: 0;
}

.site-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.site-search-close {
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.2rem 0.55rem;
    color: inherit;
    background: none;
    border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: var(--radius-button, 6px);
    cursor: pointer;
}

.site-search-close:hover,
.site-search-close:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.site-search-status {
    margin: 0;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.site-search-status:empty {
    display: none;
}

.site-search-results {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    overflow-y: auto;
}

.site-search-results:empty {
    display: none;
}

.site-search-results a {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-button, 6px);
    color: inherit;
    text-decoration: none;
}

.site-search-results a:hover,
.site-search-results li[aria-selected="true"] a {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.site-search-result-trail {
    display: block;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.site-search-result-title {
    display: block;
    font-weight: 600;
}

.site-search-result-section {
    font-weight: 400;
    color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

.site-search-result-snippet {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.88rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-text) 85%, transparent);
}

.site-search-results mark {
    padding: 0 0.1em;
    border-radius: 2px;
    color: inherit;
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

@media (hover: none) {
    .site-search-kbd {
        display: none;
    }
}

/* Below the navigation breakpoint both layouts are a top bar: the trigger
   shrinks to its icon and keeps its place next to the language switcher. */
@media (max-width: 56rem) {
    .site-search-trigger,
    .site-header-inner .site-search-trigger {
        width: auto;
        padding: 0.35rem 0.5rem;
    }

    .site-search-trigger-label,
    .site-search-kbd {
        display: none;
    }

    .site-sidebar-head .site-search {
        flex: 0 0 auto;
        order: 0;
    }

    .site-header-inner .site-search {
        order: 1;
    }

    .site-search-dialog {
        width: calc(100vw - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
        margin: 0.75rem auto;
    }
}


/* project global */
/* Project-specific styles for the CoachStudio Documentation.
   Pathmate Brand & Design System V3 (Azure / Slate, Raleway + Open Sans),
   kept quiet on purpose: this is a reference manual, not a landing page. */

:root {
    --sidebar-width: 19rem;
    /* One spacing rhythm for the whole chrome: the sidebar and the content
       start at the same height, the content keeps one horizontal gutter. */
    --doc-top: 1.75rem;
    --doc-gutter: 3rem;
}

@media (max-width: 56rem) {
    :root {
        --doc-top: 1.5rem;
        --doc-gutter: 1.25rem;
    }
}

/* --- Sidebar ------------------------------------------------------------ */

.site-sidebar {
    padding-top: var(--doc-top);
    background: var(--color-mist);
    border-right-color: var(--color-line);
}

/* Sidebar head: the CoachStudio wordmark as on coachstudio.app ("Coach"
   slate, "Studio" azure) with "Documentation" below it. The sidebar
   partial renders the site name as one plain text node, so the two-colour
   wordmark is drawn with pseudo-elements; the real text stays in the link
   (font-size 0) as its accessible name, the pseudo content has an empty alt. */
.site-brand {
    display: inline-flex;
    align-items: baseline;
    padding-left: 0.5rem;
    font-size: 0;
    line-height: 1;
    white-space: nowrap;
}

.site-brand::before,
.site-brand::after {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-brand::before {
    content: "Coach" / "";
    color: var(--color-slate);
}

.site-brand::after {
    content: "Studio" / "";
    color: var(--color-primary);
}

.site-sidebar-head::after {
    content: "Documentation" / "";
    flex: 0 0 100%;
    margin-top: -0.35rem;
    padding-left: 0.5rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* The search field gets the same air above as the navigation leaves below
   it (head margin + link padding), so it does not cling to the wordmark. */
.site-sidebar-head .site-search {
    margin-top: 0.75rem;
}

/* Top bar on small screens: wordmark, search and burger only. */
@media (max-width: 56rem) {
    .site-sidebar-head::after {
        display: none;
    }

    .site-sidebar-head .site-search {
        margin-top: 0;
    }

    .site-brand {
        padding-left: 0;
    }

    .site-brand::before,
    .site-brand::after {
        font-size: 1.3rem;
    }
}

.site-sidebar-nav {
    font-size: 0.92rem;
}

.site-sidebar-nav ul ul {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left-color: var(--color-line);
}

/* Top-level entries read as chapter titles. */
.site-sidebar-nav > ul > li > a,
.site-sidebar-nav > ul > li > details > summary a {
    font-weight: 600;
    color: var(--color-slate);
}

.site-sidebar-nav a[aria-current="page"] {
    color: var(--color-azure-deep);
    background: var(--color-sky);
}

@media (max-width: 56rem) {
    .site-sidebar {
        border-bottom-color: var(--color-line);
    }
}

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

/* templates/partials/footer.html: copyright line only — the sidebar
   already holds the whole page tree. */
.site-footer {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.site-footer-inner {
    margin-left: 0;
    padding-inline: var(--doc-gutter);
}

/* --- Documentation content --------------------------------------------- */

/* No breadcrumb or page header above the content, so the first block
   starts at the height of the wordmark. All blocks of a page (intro text,
   toc, main text) share one gutter and sit left-aligned next to the
   sidebar instead of centred in the remaining space. `main > .block`
   outranks the blocks' own CSS, which is loaded after this file. */
main > .block {
    padding: 0 var(--doc-gutter) 1.25rem;
}

main > .block:first-child {
    padding-top: var(--doc-top);
}

main > .block:last-child {
    padding-bottom: 3rem;
}

main > .block > .block-inner {
    margin-left: 0;
}

/* 52rem keeps the Typemill screenshots (≤ 820 px) at their natural size. */
.block.b-text .text-body {
    max-width: 52rem;
}

/* "On this page" — a quiet box between the intro and the text. */
.block.b-toc .toc {
    max-width: 52rem;
    padding: 1rem 1.25rem;
    background: var(--color-mist);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-button);
}

.block.b-toc .toc-title {
    margin-bottom: 0.6rem;
    color: var(--color-slate);
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
}

.block.b-toc .toc-list ul {
    border-left-color: var(--color-line);
}

.block.b-toc .toc-list a:hover {
    color: var(--color-azure-deep);
}

.text-body h1,
.text-body h2,
.text-body h3,
.text-body h4 {
    color: var(--color-slate);
    scroll-margin-top: 1rem;
}

.text-body h1 {
    font-size: 2.1rem;
    margin-top: 1.8em;
}

/* A heading that opens the page (or a callout) needs no space above it. */
.text-body :is(h1, h2, h3, h4):first-child {
    margin-top: 0;
}

.text-body h2 {
    font-size: 1.55rem;
}

@media (max-width: 56rem) {
    .text-body h1 {
        font-size: 1.75rem;
    }

    .text-body h2 {
        font-size: 1.4rem;
    }
}

.text-body h3 {
    font-size: 1.2rem;
}

.text-body h4 {
    font-size: 1.05rem;
    margin-top: 1.4em;
}

.text-body hr {
    border: 0;
    border-top: 1px solid var(--color-line);
    margin: 2.25rem 0;
}

.text-body li + li {
    margin-top: 0.2em;
}

/* Screenshots: centred, at their natural size, with a hairline frame so
   white UI screenshots do not dissolve into the page. */
.text-body img {
    margin: 1.25rem auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-media);
}

/* Callouts — the colour is the blockquote's nesting depth, because the
   Markdown renderer gives blockquotes no class (see WISHES.md):
     >        blue    hint / info         (Typemill !!!)
     > >      yellow  important / tip     (Typemill !!)
     > > >    red     warning / must-read (Typemill !)
   Only the innermost quote draws a box; the wrapping levels are invisible. */
.text-body blockquote {
    --callout-bg: var(--color-sky);
    --callout-line: var(--color-primary);
    margin: 1.25rem 0;
    padding: 0.85rem 1.1rem;
    background: var(--callout-bg);
    border-left: 4px solid var(--callout-line);
    border-radius: 0 var(--radius-button) var(--radius-button) 0;
}

.text-body blockquote:has(> blockquote:only-child) {
    padding: 0;
    background: none;
    border: 0;
}

.text-body blockquote > blockquote {
    --callout-bg: var(--color-note-yellow-bg);
    --callout-line: var(--color-note-yellow);
    margin: 0;
}

.text-body blockquote > blockquote > blockquote {
    --callout-bg: var(--color-note-red-bg);
    --callout-line: var(--color-note-red);
}

.text-body blockquote > :last-child {
    margin-bottom: 0;
}

.text-body blockquote ul,
.text-body blockquote ol {
    padding-left: 1.2rem;
}

/* Code */
.text-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    padding: 0.1em 0.35em;
    background: var(--color-mist);
    border: 1px solid var(--color-line);
    border-radius: 4px;
    overflow-wrap: anywhere;
}

.text-body pre {
    margin: 1.25rem 0;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    background: var(--color-mist);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-button);
    line-height: 1.5;
}

.text-body pre code {
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.85rem;
    overflow-wrap: normal;
}

/* Tables: scroll sideways on narrow screens instead of breaking the page. */
.text-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.92rem;
}

.text-body th,
.text-body td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-line);
    text-align: left;
    vertical-align: top;
}

.text-body th {
    background: var(--color-mist);
    color: var(--color-slate);
    font-weight: 600;
}

/* Long pages are split into one text block per ##/### section. A block
   that opens with such a heading draws the divider the single Markdown
   file used to carry as `---`; image or other blocks inserted between
   sections stay attached to the section above (no divider). The second
   selector covers edit mode, which wraps the body in .ss-editable. */
main > .block.b-text:not(:first-child, .b-toc + .block) .text-body > :is(h2, h3):first-child,
main > .block.b-text:not(:first-child, .b-toc + .block) .text-body > .ss-editable > :is(h2, h3):first-child {
    margin-top: 1rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--color-line);
}

/* Start page: the chapter cards share the look of the "On this page" box
   and the text column width. The whole card is the link target. */
.block.b-cards .cards-grid {
    max-width: 52rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.block.b-cards .card {
    position: relative;
    background: var(--color-mist);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-button);
    transition: border-color 0.15s;
}

.block.b-cards .card:hover {
    border-color: var(--color-primary);
}

.block.b-cards .card h3 {
    color: var(--color-slate);
    font-size: 1.05rem;
}

.block.b-cards .card p {
    font-size: 0.92rem;
}

/* Not in edit mode: the overlay would cover the editable card texts. */
.block.b-cards .card:not(:has(.ss-editable)) .card-link a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.block.b-cards .card-link a:hover {
    color: var(--color-azure-deep);
}

/* FAQ: the accordion shares the text column and the look of the other
   boxes; answers get the same table style as the running text. */
.block.b-accordion .accordion-list {
    max-width: 52rem;
}

.block.b-accordion .accordion-item {
    background: var(--color-mist);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-button);
}

.block.b-accordion .accordion-item[open] {
    background: var(--color-background);
    border-color: var(--color-primary);
}

.block.b-accordion summary {
    color: var(--color-slate);
}

.block.b-accordion .accordion-answer table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: 0.92rem;
}

.block.b-accordion .accordion-answer :is(th, td) {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-line);
    text-align: left;
}

.block.b-accordion .accordion-answer th {
    background: var(--color-mist);
    color: var(--color-slate);
}


/* block: accordion */
/* The list fills the content column like every other block; only the
   answer text keeps a readable measure. */
.b-accordion .accordion-list {
    display: grid;
    gap: 0.6rem;
}

.b-accordion .accordion-item {
    background: var(--color-surface, color-mix(in srgb, var(--color-text) 5%, var(--color-background)));
    border-radius: var(--radius-card, 10px);
    padding: 0 1.2rem;
}

.b-accordion summary {
    /* Keep the native disclosure semantics, only restyle the marker. */
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 1rem 0;
    font-family: var(--font-heading);
    font-weight: 600;
}

.b-accordion summary::-webkit-details-marker {
    display: none;
}

.b-accordion summary::before {
    content: "+";
    flex: none;
    width: 1em;
    color: var(--color-primary);
    font-weight: 700;
}

.b-accordion .accordion-item[open] > summary::before {
    content: "–";
}

.b-accordion summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.b-accordion .accordion-answer {
    padding: 0 0 1rem 1.7rem;
    max-width: 44rem;
}

.b-accordion .accordion-answer > :last-child {
    margin-bottom: 0;
}


/* block: cards */
.b-cards .cards-intro {
    max-width: 44rem;
    margin-bottom: 2rem;
}

.b-cards .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.25rem;
}

.b-cards .card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface, color-mix(in srgb, var(--color-text) 5%, var(--color-background)));
    border-radius: var(--radius-card, 10px);
    padding: 1.4rem;
}

.b-cards .card h3 {
    margin-bottom: 0.4em;
}

.b-cards .card p:last-child {
    margin-bottom: 0;
}

/* Links share one baseline at the card bottom, whatever the text length. */
.b-cards .card-link {
    margin-top: auto;
    padding-top: 0.6rem;
}

.b-cards .card-link a {
    font-weight: 600;
    text-decoration: none;
}


/* block: not-found */
/* 404 panel: quiet like the rest of the manual — one azure accent, the
   Pathmate path motif as a dotted line behind the status code. */

.b-not-found .nf-panel {
    position: relative;
    overflow: hidden;
    padding: 3rem 2rem 2.5rem;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    background: linear-gradient(160deg, var(--color-sky) 0%, var(--color-mist) 55%, var(--color-background) 100%);
    text-align: center;
}

.b-not-found .nf-path {
    position: absolute;
    inset: 1.25rem 0 auto;
    width: 100%;
    height: 9rem;
    color: var(--color-primary);
    opacity: 0.35;
    pointer-events: none;
}

.b-not-found .nf-code {
    position: relative;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(5rem, 16vw, 8.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--color-slate) 0%, var(--color-primary) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.b-not-found .nf-heading {
    position: relative;
    margin: 1.25rem 0 0;
    color: var(--color-slate);
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
}

.b-not-found .nf-text {
    max-width: 34rem;
    margin: 0.75rem auto 0;
    color: var(--color-muted);
}

.b-not-found .nf-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.75rem 0 0;
}

.b-not-found .nf-button {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-button, 6px);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.b-not-found .nf-button-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.b-not-found .nf-button-primary:hover {
    border-color: var(--color-azure-deep);
    background: var(--color-azure-deep);
}

.b-not-found .nf-button-secondary {
    background: var(--color-background);
    color: var(--color-primary);
}

.b-not-found .nf-button-secondary:hover {
    background: var(--color-sky);
}

.b-not-found .nf-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.b-not-found .nf-hint {
    margin: 1.25rem 0 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.b-not-found .nf-links-heading {
    margin: 2.5rem 0 1rem;
    color: var(--color-slate);
    font-size: 1.15rem;
}

.b-not-found .nf-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.b-not-found .nf-links a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.b-not-found .nf-links a:hover {
    border-color: var(--color-primary);
    background: var(--color-mist);
}

.b-not-found .nf-link-label {
    color: var(--color-primary);
    font-weight: 600;
}

.b-not-found .nf-link-text {
    color: var(--color-muted);
    font-size: 0.875rem;
}

@media (max-width: 56rem) {
    .b-not-found .nf-panel {
        padding: 2.25rem 1.25rem 2rem;
    }
}


/* block: text */
.b-text .text-body {
    max-width: 44rem;
}

.b-text .text-body h2,
.b-text .text-body h3 {
    margin-top: 1.4em;
}


/* block: toc */
.b-toc {
    padding-top: 1.5rem;
    padding-bottom: 0;
}

.b-toc .toc {
    font-size: 0.92rem;
}

.b-toc .toc-title {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.b-toc .toc-list,
.b-toc .toc-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.b-toc .toc-list ul {
    margin: 0.15rem 0 0.3rem 0.9rem;
    padding-left: 0.6rem;
    border-left: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.b-toc .toc-list li {
    margin: 0.2rem 0;
}

.b-toc .toc-list a {
    color: var(--color-text);
    text-decoration: none;
}

.b-toc .toc-list a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}