/* Reusable, progressively enhanced documentation-site layout.
 * Load after Arcane theme.css and primitives.css.
 */

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

html{
    min-height:100%;
    scroll-behavior:smooth;
}

body.static-doc-site{
    background:
        radial-gradient(circle at 12% -8%,color-mix(in srgb,var(--arcane-focus) 14%,transparent),transparent 32rem),
        var(--arcane-surface);
    color:var(--text-color);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    line-height:1.6;
    margin:0;
    min-height:100vh;
    text-rendering:optimizeLegibility;
}

.static-doc-site a{
    color:var(--arcane-focus);
    text-decoration-thickness:.08em;
    text-underline-offset:.16em;
}

.static-doc-site :where(a,button,input,summary):focus-visible{
    border-radius:var(--arcane-radius-small);
    outline:3px solid color-mix(in srgb,var(--arcane-focus) 48%,transparent);
    outline-offset:.2rem;
}

.skip-link{
    background:var(--arcane-surface-raised);
    border:2px solid var(--arcane-focus);
    border-radius:var(--arcane-radius-medium);
    color:var(--text-color);
    font-weight:700;
    inset-block-start:var(--arcane-space-3);
    inset-inline-start:var(--arcane-space-3);
    padding:var(--arcane-space-3) var(--arcane-space-4);
    position:fixed;
    transform:translateY(-180%);
    z-index:1000;
}

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

.static-site-header{
    backdrop-filter:blur(1rem);
    background:color-mix(in srgb,var(--arcane-surface) 86%,transparent);
    border-block-end:1px solid var(--arcane-border);
    position:sticky;
    top:0;
    z-index:20;
}

.static-site-header__inner,
.static-site-footer__inner,
.static-site-main{
    margin-inline:auto;
    max-inline-size:96rem;
    padding-inline:clamp(1rem,3.5vw,3.5rem);
}

.static-site-header__inner{
    align-items:center;
    display:flex;
    gap:clamp(.75rem,2vw,1.5rem);
    min-block-size:4.5rem;
    padding-block:.65rem;
}

.static-site-brand{
    align-items:center;
    color:var(--text-color) !important;
    display:inline-flex;
    flex:0 0 auto;
    font-size:1rem;
    font-weight:800;
    gap:.7rem;
    letter-spacing:-.01em;
    text-decoration:none;
}

.static-site-brand__mark{
    align-items:center;
    aspect-ratio:1;
    background:linear-gradient(145deg,var(--arcane-focus),var(--arcane-review));
    border:1px solid color-mix(in srgb,var(--arcane-focus) 56%,var(--arcane-border));
    border-radius:.62rem;
    box-shadow:var(--arcane-shadow-small);
    color:var(--arcane-action-text);
    display:inline-flex;
    font:800 1rem/1 ui-monospace,"Cascadia Code",monospace;
    justify-content:center;
    inline-size:2.25rem;
}

.static-site-nav{
    align-items:center;
    display:flex;
    flex:1 1 auto;
    gap:.2rem;
    justify-content:center;
}

.static-site-nav a{
    border-radius:var(--arcane-radius-medium);
    color:var(--arcane-muted);
    font-size:.9rem;
    font-weight:680;
    padding:.55rem .7rem;
    text-decoration:none;
    white-space:nowrap;
}

.static-site-nav a:is(:hover,[aria-current="page"]){
    background:var(--arcane-secondary);
    color:var(--text-color);
}

.static-site-main{
    min-block-size:calc(100vh - 13rem);
    padding-block:clamp(1.5rem,4vw,4rem) clamp(3rem,7vw,6rem);
}

.eyebrow{
    color:var(--arcane-muted);
    font-size:.75rem;
    font-weight:780;
    letter-spacing:.14em;
    margin:0 0 .35rem;
    text-transform:uppercase;
}

.static-hero{
    align-items:center;
    display:grid;
    gap:clamp(2rem,5vw,5rem);
    grid-template-columns:minmax(0,1fr) minmax(20rem,.82fr);
    min-block-size:min(44rem,calc(100vh - 8rem));
    padding-block:clamp(1rem,5vw,4.5rem);
}

.static-hero__copy{
    max-inline-size:48rem;
}

.static-hero h1,
.static-page-heading h1,
.static-document__header h1,
.static-not-found h1{
    font-family:Georgia,"Times New Roman",serif;
    font-weight:650;
    letter-spacing:-.035em;
    line-height:1.02;
    text-wrap:balance;
}

.static-hero h1{
    font-size:clamp(2.65rem,6vw,5rem);
    margin:.3rem 0 1.25rem;
    max-inline-size:14ch;
}

.static-hero__lede{
    color:var(--arcane-muted);
    font-size:clamp(1.05rem,2vw,1.3rem);
    line-height:1.7;
    margin:0;
    max-inline-size:44rem;
}

.static-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--arcane-space-3);
    margin-block-start:var(--arcane-space-6);
}

.static-status-badges{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:var(--arcane-space-2);
    margin-block-start:var(--arcane-space-4);
}

.static-status-badges a{
    display:inline-flex;
}

.static-status-badges img{
    block-size:1.25rem;
    inline-size:auto;
}

.static-hero__visual{
    margin:0;
    overflow:hidden;
    padding:.55rem;
    transform:rotate(1deg);
}

.static-hero__visual img{
    aspect-ratio:16/9;
    block-size:auto;
    border-radius:calc(var(--arcane-radius-large) - .25rem);
    display:block;
    inline-size:100%;
    object-fit:cover;
}

.static-hero__visual figcaption{
    color:var(--arcane-muted);
    font-size:.82rem;
    padding:.65rem .5rem .25rem;
}

.static-section-directory,
.static-catalog,
.static-catalog-section,
.static-related{
    display:grid;
    gap:var(--arcane-space-5);
}

.static-section-directory{
    padding-block:clamp(2rem,6vw,5rem);
}

.static-section-heading{
    max-inline-size:52rem;
}

.static-section-heading h2,
.static-related h2{
    font-size:clamp(1.55rem,3vw,2.35rem);
    letter-spacing:-.025em;
    line-height:1.16;
    margin:.25rem 0 0;
    text-wrap:balance;
}

.static-section-heading p:last-child{
    color:var(--arcane-muted);
    margin:.65rem 0 0;
}

.static-section-grid{
    display:grid;
    gap:var(--arcane-space-4);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
}

.static-section-card{
    color:var(--text-color) !important;
    display:grid;
    gap:.45rem;
    min-block-size:12rem;
    padding:clamp(1.1rem,3vw,1.75rem);
    text-decoration:none;
    transition:border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease;
}

.static-section-card:is(:hover,:focus-visible){
    border-color:color-mix(in srgb,var(--arcane-focus) 65%,var(--arcane-border));
    box-shadow:var(--arcane-shadow-medium);
    transform:translateY(-.18rem);
}

.static-section-card strong{
    font-size:1.3rem;
}

.static-section-card>span:last-child{
    color:var(--arcane-muted);
}

.static-development-note{
    border-inline-start:.35rem solid var(--arcane-review);
    margin-block-start:clamp(1rem,4vw,3rem);
    max-inline-size:62rem;
}

.static-development-note .arcane-card__body,
.static-document-callout .arcane-card__body,
.static-on-this-page .arcane-card__body,
.static-document-card .arcane-card__body{
    padding:clamp(1rem,2.5vw,1.5rem);
}

.static-development-note h2,
.static-document-callout h2,
.static-on-this-page h2{
    font-size:1.05rem;
    margin:0;
}

.static-development-note p:last-child{
    color:var(--arcane-muted);
    margin-block-end:0;
}

.static-breadcrumbs{
    align-items:center;
    color:var(--arcane-muted);
    display:flex;
    flex-wrap:wrap;
    font-size:.88rem;
    gap:.55rem;
    margin-block-end:clamp(1.5rem,4vw,3rem);
}

.static-breadcrumbs a{
    color:inherit;
}

.static-page-heading{
    margin-block-end:clamp(2rem,6vw,5rem);
    max-inline-size:58rem;
}

.static-page-heading h1{
    font-size:clamp(2.5rem,5vw,4.25rem);
    margin:.25rem 0 1rem;
}

.static-page-heading>p:last-child{
    color:var(--arcane-muted);
    font-size:clamp(1rem,2vw,1.2rem);
    margin:0;
    max-inline-size:50rem;
}

.static-catalog{
    gap:clamp(3rem,7vw,6rem);
}

.static-document-grid,
.static-related__grid{
    display:grid;
    gap:var(--arcane-space-4);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
}

.static-document-card{
    block-size:100%;
}

.static-document-card .arcane-card__body{
    display:flex;
    flex-direction:column;
    gap:.65rem;
}

.static-document-card h3{
    font-size:1.2rem;
    line-height:1.25;
    margin:0;
}

.static-document-card h3 a{
    color:var(--text-color);
}

.static-document-card p:last-child{
    color:var(--arcane-muted);
    margin:0;
}

.static-section-all{
    margin-block-start:clamp(2rem,5vw,4rem);
}

.static-site-main--document{
    max-inline-size:104rem;
}

.static-document-layout{
    align-items:start;
    display:grid;
    gap:clamp(2rem,5vw,5rem);
    grid-template-columns:minmax(12rem,17rem) minmax(0,1fr);
}

.static-section-nav{
    border-inline-end:1px solid var(--arcane-border);
    max-block-size:calc(100vh - 7rem);
    overflow-y:auto;
    padding-inline-end:clamp(1rem,3vw,2rem);
    position:sticky;
    scrollbar-gutter:stable;
    top:6rem;
}

.static-section-nav>p{
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.12em;
    margin:0 0 var(--arcane-space-3);
    text-transform:uppercase;
}

.static-section-nav ol{
    list-style:none;
    margin:0;
    padding:0;
}

.static-section-nav__filter{
    display:grid;
    gap:.45rem;
    margin-block:0 var(--arcane-space-4);
}

.static-section-nav__filter label{
    color:var(--arcane-muted);
    font-size:.78rem;
    font-weight:720;
}

.static-section-nav__filter-control{
    display:grid;
    gap:.4rem;
    grid-template-columns:minmax(0,1fr) auto;
}

.static-section-nav__filter input{
    background:var(--arcane-surface-raised);
    border:1px solid var(--arcane-border);
    border-radius:var(--arcane-radius-small);
    color:var(--text-color);
    inline-size:100%;
    min-inline-size:0;
    padding:.55rem .65rem;
}

.static-section-nav__filter button{
    background:var(--arcane-secondary);
    border:1px solid var(--arcane-border);
    border-radius:var(--arcane-radius-small);
    color:var(--text-color);
    cursor:pointer;
    font-weight:680;
    padding:.45rem .6rem;
}

.static-section-nav__status{
    color:var(--arcane-muted);
    font-size:.72rem;
}

.static-section-nav>ol{
    display:grid;
    gap:.2rem;
}

.static-section-nav>ol>li{
    display:grid;
    gap:.25rem;
}

.static-section-nav details{
    display:grid;
    gap:.2rem;
}

.static-section-nav summary{
    border-radius:var(--arcane-radius-small);
    color:var(--text-color);
    cursor:pointer;
    font-size:.78rem;
    font-weight:760;
    letter-spacing:.04em;
    padding:.48rem .55rem;
}

.static-section-nav summary:is(:hover,[aria-current="location"]){
    background:var(--arcane-secondary);
}

.static-section-nav__section-link{
    font-size:.76rem !important;
    margin-inline:.55rem;
}

.static-section-nav a{
    border-radius:var(--arcane-radius-small);
    color:var(--arcane-muted);
    display:block;
    font-size:.87rem;
    line-height:1.35;
    overflow-wrap:anywhere;
    padding:.45rem .55rem;
    text-decoration:none;
}

.static-section-nav a:is(:hover,[aria-current="location"],[aria-current="page"]){
    background:var(--arcane-secondary);
    color:var(--text-color);
}

.static-section-nav a[aria-current="page"]{
    border-inline-start:.2rem solid var(--arcane-focus);
    font-weight:720;
}

.static-section-nav li ol{
    border-inline-start:1px solid var(--arcane-border);
    margin:.1rem 0 .6rem .55rem;
    padding-inline-start:.55rem;
}

.static-section-nav--collection>ol{
    gap:.45rem;
}

.static-section-nav--collection summary{
    text-transform:none;
}

.static-document{
    --static-reading-measure:78ch;
    inline-size:100%;
    min-inline-size:0;
}

.static-document>:not(.static-document__content),
.static-document__content>:not(table){
    max-inline-size:min(100%,var(--static-reading-measure));
}

.static-document__header{
    border-block-end:1px solid var(--arcane-border);
    margin-block-end:clamp(1.5rem,4vw,2.5rem);
    padding-block-end:clamp(1.5rem,4vw,2.5rem);
}

.static-document__header h1{
    font-size:clamp(2.4rem,5vw,4.15rem);
    margin:.35rem 0 1rem;
    overflow-wrap:anywhere;
}

.static-document__summary{
    color:var(--arcane-muted);
    font-size:clamp(1.05rem,2vw,1.23rem);
    line-height:1.68;
    margin:0;
}

.static-document-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    list-style:none;
    margin:var(--arcane-space-5) 0 0;
    padding:0;
}

.static-document-meta li{
    background:var(--arcane-secondary);
    border:1px solid var(--arcane-border);
    border-radius:999px;
    color:var(--arcane-muted);
    font-size:.78rem;
    padding:.25rem .65rem;
}

.static-document-callout,
.static-on-this-page{
    box-shadow:none;
    margin-block:var(--arcane-space-5);
}

.static-document-callout{
    border-inline-start:.3rem solid var(--arcane-warning);
}

.static-document-callout ul,
.static-on-this-page ol{
    margin-block:.65rem 0;
    padding-inline-start:1.35rem;
}

.static-on-this-page ol{
    columns:2 16rem;
}

.static-on-this-page li{
    break-inside:avoid;
    margin-block:.35rem;
}

.static-on-this-page li[data-level="3"]{
    margin-inline-start:.8rem;
}

.static-document__content{
    font-size:1rem;
    line-height:1.75;
    min-inline-size:0;
    overflow-wrap:break-word;
}

.static-document__content :where(h2,h3,h4,h5,h6){
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    letter-spacing:-.02em;
    line-height:1.2;
    scroll-margin-block-start:6rem;
    text-wrap:balance;
}

.static-document__content h2{
    font-size:clamp(1.65rem,3vw,2.25rem);
    margin-block:2.75rem 1rem;
}

.static-document__content h3{
    font-size:clamp(1.3rem,2vw,1.65rem);
    margin-block:2rem .75rem;
}

.static-document__content :where(h4,h5,h6){
    font-size:1.08rem;
    margin-block:1.6rem .65rem;
}

.static-document__content p,
.static-document__content ul,
.static-document__content ol,
.static-document__content blockquote{
    margin-block:0 1.15rem;
}

.static-document__content blockquote{
    border-inline-start:.3rem solid var(--arcane-review);
    color:var(--arcane-muted);
    margin-inline:0;
    padding:.4rem 0 .4rem 1.2rem;
}

.static-document__content :where(code,kbd){
    background:var(--arcane-secondary);
    border-radius:.25rem;
    font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
    font-size:.9em;
    padding:.1em .32em;
}

.static-document__content pre{
    background:var(--arcane-secondary);
    border:1px solid var(--arcane-border);
    border-radius:var(--arcane-radius-medium);
    max-inline-size:100%;
    overflow:auto;
    padding:clamp(.85rem,2.5vw,1.25rem);
}

.static-document__content pre code{
    background:transparent;
    padding:0;
}

.static-document__content img{
    block-size:auto;
    border:1px solid var(--arcane-border);
    border-radius:var(--arcane-radius-medium);
    box-shadow:var(--arcane-shadow-small);
    display:block;
    margin-block:1.5rem;
    max-inline-size:100%;
}

.static-document__content table{
    border-collapse:collapse;
    display:block;
    inline-size:100%;
    margin-block:1.5rem;
    max-inline-size:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
}

.static-document__content table :where(code,kbd){
    overflow-wrap:normal;
    white-space:normal;
    word-break:normal;
}

.static-document__content pre:focus-visible,
.static-document__content table:focus-visible{
    outline:3px solid var(--arcane-focus);
    outline-offset:.2rem;
}

.static-document__content :where(th,td){
    border:1px solid var(--arcane-border);
    padding:.65rem .75rem;
    text-align:start;
    vertical-align:top;
}

.static-document__content th{
    background:var(--arcane-secondary);
}

.document-image-fallback{
    background:var(--arcane-secondary);
    border:1px dashed var(--arcane-border);
    border-radius:var(--arcane-radius-small);
    color:var(--arcane-muted);
    display:block;
    font-size:.88rem;
    margin-block:1rem;
    padding:.75rem;
}

.static-document__source{
    border-block-start:1px solid var(--arcane-border);
    font-size:.88rem;
    margin-block:clamp(2rem,5vw,4rem);
    padding-block-start:var(--arcane-space-4);
}

.static-related{
    margin-block:clamp(2.5rem,6vw,5rem);
}

.static-related__grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}

.static-previous-next{
    border-block-start:1px solid var(--arcane-border);
    display:grid;
    gap:var(--arcane-space-4);
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding-block-start:var(--arcane-space-5);
}

.static-previous-next a{
    background:var(--arcane-surface-raised);
    border:1px solid var(--arcane-border);
    border-radius:var(--arcane-radius-medium);
    color:var(--text-color);
    display:grid;
    gap:.25rem;
    padding:var(--arcane-space-4);
    text-decoration:none;
}

.static-previous-next a:last-child{
    text-align:end;
}

.static-previous-next span{
    color:var(--arcane-muted);
    font-size:.75rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.static-not-found{
    align-content:center;
    display:grid;
    min-block-size:100vh;
    max-inline-size:52rem;
}

.static-not-found h1{
    font-size:clamp(2.8rem,7vw,5.5rem);
    margin:.2rem 0 1rem;
}

.static-not-found>p:not(.eyebrow){
    color:var(--arcane-muted);
    font-size:1.15rem;
}

.static-site-footer{
    border-block-start:1px solid var(--arcane-border);
    color:var(--arcane-muted);
    font-size:.84rem;
}

.static-site-footer__inner{
    align-items:center;
    display:flex;
    gap:var(--arcane-space-5);
    justify-content:space-between;
    min-block-size:7rem;
    padding-block:var(--arcane-space-5);
}

@media (max-width:72rem){
    .static-site-header{
        position:static;
    }

    .static-site-header__inner{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .static-site-nav{
        flex-wrap:wrap;
        justify-content:flex-start;
        order:3;
        inline-size:100%;
    }

    .static-site-header__inner>.arcane-badge{
        margin-inline-start:auto;
    }

    .static-hero{
        grid-template-columns:1fr;
        min-block-size:0;
    }

    .static-hero__copy{
        max-inline-size:54rem;
    }

    .static-hero__visual{
        max-inline-size:52rem;
        transform:none;
    }
}

@media (max-width:58rem){
    .static-document-layout{
        display:flex;
        flex-direction:column;
    }

    .static-document{
        order:1;
    }

    .static-section-nav{
        border:1px solid var(--arcane-border);
        border-radius:var(--arcane-radius-medium);
        inline-size:100%;
        max-block-size:none;
        order:2;
        overflow:visible;
        padding:var(--arcane-space-4);
        position:static;
    }

    .static-section-nav>ol{
        grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
    }

    .static-section-nav li ol{
        border:0;
        margin-inline:0;
        padding-inline:0;
    }

    .static-document{
        inline-size:100%;
    }
}

@media (max-width:38rem){
    .static-site-header__inner,
    .static-site-footer__inner,
    .static-site-main{
        padding-inline:clamp(.9rem,5vw,1.25rem);
    }

    .static-site-brand span:last-child{
        max-inline-size:8.5rem;
    }

    .static-hero{
        gap:var(--arcane-space-6);
        grid-template-columns:minmax(0,1fr);
    }

    .static-hero__visual{
        inline-size:100%;
    }

    .static-hero h1,
    .static-page-heading h1,
    .static-document__header h1{
        overflow-wrap:anywhere;
    }

    .static-section-card{
        min-block-size:0;
    }

    .static-on-this-page ol{
        columns:1;
    }

    .static-previous-next{
        grid-template-columns:1fr;
    }

    .static-previous-next a:last-child{
        text-align:start;
    }

    .static-site-footer__inner{
        align-items:flex-start;
        flex-direction:column;
        justify-content:center;
    }
}

@media (forced-colors:active){
    .static-site-brand__mark,
    .static-section-card,
    .static-document-meta li,
    .static-document__content :where(th,td),
    .static-previous-next a{
        border-color:CanvasText;
    }

    .static-doc-site :where(a,button,input,summary):focus-visible{
        outline-color:Highlight;
    }

    .static-document__content pre:focus-visible,
    .static-document__content table:focus-visible{
        outline-color:Highlight;
    }
}

@media print{
    .static-site-header,
    .static-site-footer,
    .static-section-nav,
    .static-previous-next,
    .static-related,
    .static-document__source,
    .skip-link{
        display:none;
    }

    .static-site-main,
    .static-site-main--document{
        max-inline-size:none;
        padding:0;
    }

    .static-document-layout{
        display:block;
    }

    .static-document{
        inline-size:100%;
    }

    .static-document__content table{
        display:table;
        overflow:visible;
    }

    .static-document__content table :where(code,kbd){
        overflow-wrap:anywhere;
        word-break:break-word;
    }
}