/* =========================================================
   SERVERGUARD — MODULE DOCUMENTATION PAGES
   Loaded AFTER css/style.css. Depends on css/tokens.css.
   Dense, purpose-built reading layout for module docs.
   ========================================================= */


/* =========================================================
   LAYOUT
   ========================================================= */

.module-layout {
    width: 100%;

    margin: 0 auto;
    padding-inline: var(--page-gutter);

    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
    gap: clamp(28px, 2.6vw, 44px);

    padding-top: var(--header-h);
}

.module-content {
    min-width: 0;
    padding: 52px 0 96px;
}



/* =========================================================
   MODULE HEAD
   ========================================================= */

.module-head {
    position: relative;

    padding: var(--sp-6);

    margin-bottom: var(--sp-8);

    border: 1px solid var(--border);
    border-radius: var(--r-xl);

    background:
        radial-gradient(circle at 0% 0%, var(--accent-soft), transparent 55%),
        radial-gradient(circle at 100% 0%, var(--magenta-soft), transparent 45%),
        var(--surface);

    overflow: hidden;
}

.module-head::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background: linear-gradient(90deg, var(--accent-soft-strong), transparent 60%);
}

.module-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);

    margin: var(--sp-4) 0 0;
    padding: 0;

    list-style: none;
}

.module-head h1 {
    font-size: clamp(34px, 4.4vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 800;

    margin-bottom: 14px;
}

.module-head p {
    max-width: 78ch;

    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.72;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin-bottom: 18px;

    color: var(--text-muted);

    font-family: var(--font-mono);
    font-size: 11px;
}

.breadcrumb a {
    color: var(--text-secondary);
    transition: color var(--t);
}

.breadcrumb a:hover {
    color: var(--text);
}

.breadcrumb .sep {
    color: var(--text-faint);
}

.breadcrumb [aria-current="page"] {
    color: var(--accent-text);
}


/* =========================================================
   ARTICLE
   ========================================================= */

.doc-article {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: 1.8;
}

/* The article column is flexible and now spans the remaining
   width. Prose keeps a readable measure, while code blocks,
   tables and images use the full column. */
.doc-article > p,
.doc-article > ul,
.doc-article > ol,
.doc-article > blockquote,
.doc-article > h2,
.doc-article > h3,
.doc-article > h4 {
    max-width: 82ch;
}

.doc-article h2 {
    position: relative;

    margin: 52px 0 16px;
    padding-left: 18px;

    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.03em;

    color: var(--text);

    scroll-margin-top: calc(var(--header-h) + 24px);
}

.doc-article h2::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;

    width: 3px;

    border-radius: 2px;

    background: linear-gradient(var(--accent), var(--accent-2));
}

.doc-article h2:first-child {
    margin-top: 0;
}

.doc-article h3 {
    margin: 34px 0 10px;

    font-size: var(--fs-lg);
    font-weight: 650;

    color: var(--text);

    scroll-margin-top: calc(var(--header-h) + 24px);
}

.doc-article h4 {
    margin: 26px 0 8px;

    font-size: var(--fs-base);
    font-weight: 650;

    color: var(--text);

    scroll-margin-top: calc(var(--header-h) + 24px);
}

.doc-article p {
    margin: 0 0 16px;
}

.doc-article ul,
.doc-article ol {
    margin: 0 0 var(--sp-5) var(--sp-5);
    padding-left: 6px;
}

.doc-article li {
    margin-bottom: 6px;
}

.doc-article a {
    color: var(--accent-text);
    border-bottom: 1px solid var(--border-accent);
}

.doc-article a:hover {
    color: #fff;
}

.doc-article strong {
    color: var(--text);
    font-weight: 650;
}

.doc-article hr {
    margin: var(--sp-9) 0;

    border: 0;
    border-top: 1px solid var(--border);
}

.doc-article blockquote {
    margin: var(--sp-5) 0;
    padding: 14px 18px;

    border-left: 2px solid var(--accent);

    border-radius: 0 var(--r-md) var(--r-md) 0;

    background: var(--surface);

    color: var(--text);
}

.doc-article blockquote p:last-child {
    margin: 0;
}

.doc-article :not(pre) > code {
    padding: 2px 6px;

    border-radius: var(--r-xs);

    background: var(--surface-3);
    color: var(--accent-text);

    font-size: 0.86em;

    /* Long unbreakable strings (for example Windows paths such as
       C:\Users\NAME\.ssh\id_ed25519) must not overflow the page on
       narrow screens; break them only when there is no other option. */
    overflow-wrap: anywhere;
}


/* =========================================================
   CODE BLOCKS
   ========================================================= */

.doc-article pre {
    position: relative;

    margin: var(--sp-5) 0;
    padding: var(--sp-5);

    overflow-x: auto;

    border-radius: var(--r-lg);
    border: 1px solid var(--border-strong);

    background: var(--bg-deep);

    tab-size: 4;
}

.doc-article pre::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background: linear-gradient(90deg, var(--accent-soft-strong), transparent);
}

.doc-article pre code {
    color: #c2cad9;
    font-size: 12.5px;
    line-height: 1.7;

    white-space: pre;
}

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;

    padding: 3px 9px;

    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);

    background: var(--surface-2);
    color: var(--text-muted);

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    opacity: 0.55;

    transition: opacity var(--t), color var(--t), background var(--t);
}

.doc-article pre:hover .copy-btn,
.copy-btn:focus-visible {
    opacity: 1;
}

.copy-btn:hover {
    color: #fff;
    background: var(--surface-3);
}

/* Code blocks are wrapped in a bordered .code-frame (see
   css/components.css). Inside the frame the block itself must not
   draw a second border or the accent hairline. */
.doc-article .code-frame pre {
    margin: 0;
    border: 0;
    border-radius: 0;

    background: transparent;
}

.doc-article .code-frame pre::before {
    display: none;
}


/* =========================================================
   TABLES
   ========================================================= */

.doc-article table {
    width: 100%;

    display: block;
    overflow-x: auto;

    border-collapse: collapse;

    margin: var(--sp-5) 0;

    font-size: var(--fs-sm);
}

.doc-article th,
.doc-article td {
    padding: 9px 14px;

    text-align: left;

    border-bottom: 1px solid var(--border);
}

.doc-article th {
    color: var(--text-faint);
    background: var(--surface-2);

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.doc-article img {
    max-width: 100%;

    margin: var(--sp-5) 0;

    border-radius: var(--r-lg);
    border: 1px solid var(--border-strong);
}


/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */

.page-toc {
    position: sticky;
    top: var(--header-h);

    align-self: start;

    max-height: calc(100vh - var(--header-h) - var(--sp-6));
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 52px 0 0;

    font-size: var(--fs-sm);
}

/* Header. On desktop this is a static label ("ON THIS PAGE"); on
   narrow screens it becomes the collapsible trigger. */
.page-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);

    width: 100%;

    margin: 0 0 10px;
    padding: 0;

    border: 0;
    background: none;

    color: var(--text-faint);

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    text-align: left;
    cursor: default;
}

.page-toc-chevron {
    display: none;

    width: 7px;
    height: 7px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);

    transition: transform var(--t);
}

.page-toc-list {
    display: block;
}

.page-toc a {
    display: block;

    padding: 5px 8px 5px 12px;

    border-left: 2px solid transparent;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;

    color: var(--text-secondary);
    line-height: 1.4;

    transition:
        color var(--t),
        background var(--t),
        border-color var(--t);
}

.page-toc a.toc-h3 {
    padding-left: 22px;

    color: var(--text-muted);
    font-size: 11px;
}

.page-toc a:hover {
    color: var(--text);
    background: var(--surface-2);
}

.page-toc a.active,
.page-toc a.active.toc-h3 {
    color: var(--text);
    font-weight: 600;

    border-left-color: var(--accent);
    background: var(--accent-soft);
}


/* =========================================================
   PAGER
   ========================================================= */

.pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);

    margin-top: var(--sp-9);
    padding-top: var(--sp-6);

    border-top: 1px solid var(--border);
}

.pager a {
    padding: var(--sp-4) var(--sp-5);

    border-radius: var(--r-lg);
    border: 1px solid var(--border);

    background: var(--surface);

    transition: border-color var(--t), background var(--t);
}

.pager a:hover {
    border-color: var(--border-accent);
    background: var(--surface-2);
}

.pager small {
    display: block;

    margin-bottom: 3px;

    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
}

.pager strong {
    color: var(--accent-text);
    font-size: var(--fs-base);
}

.pager .next {
    text-align: right;
    grid-column: 2;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {

    .module-layout {
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    }

    /* The table of contents becomes a collapsible block above the
       article instead of a third column. */
    .page-toc {
        grid-column: 1 / -1;
        grid-row: 1;

        position: static;

        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;

        padding: 0;
        margin-bottom: var(--sp-5);

        border: 1px solid var(--border);
        border-radius: var(--r-lg);

        background: var(--surface);
    }

    .page-toc-toggle {
        padding: 12px 16px;

        cursor: pointer;
    }

    .page-toc-chevron {
        display: block;
    }

    .page-toc-list {
        display: none;

        max-height: min(50vh, 360px);
        overflow-y: auto;
        overscroll-behavior: contain;

        padding: 4px 10px 12px;

        border-top: 1px solid var(--border);
    }

    .page-toc.is-open .page-toc-list {
        display: block;
    }

    .page-toc.is-open .page-toc-chevron {
        transform: rotate(-135deg);
    }

    .sidebar {
        grid-row: 2;
        grid-column: 1;
    }

    .module-content {
        grid-row: 2;
        grid-column: 2;
    }
}

@media (max-width: 820px) {

    .module-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Keep the collapsible TOC above the article on phones. The
       base column rule sets align-self: start (needed for the grid
       layout); inside the mobile flex column that would shrink the
       control to its content width, so stretch it instead. */
    .page-toc {
        order: -1;
        align-self: stretch;
    }

    .module-content {
        padding-top: 12px;
    }

    .pager {
        grid-template-columns: 1fr;
    }

    .pager .next {
        grid-column: 1;
    }
}

@media (max-width: 620px) {

    .doc-article h2 {
        font-size: 20px;
    }

    .copy-btn {
        opacity: 1;
    }
}

/* Final shell placement for the reference-width desktop layout. This file
   loads after documentation/css/style.css, so keep the grid correction here. */
@media (min-width: 821px) and (max-width: 1350px) {
    .module-layout {
        display: grid;
        grid-template-columns: 70px 205px minmax(0, 1fr);
        gap: 0;
        padding-inline: 0;
    }
    .icon-rail { grid-column: 1; grid-row: 1; }
    .sidebar { grid-column: 2; grid-row: 1; position: sticky; top: var(--header-h); width: auto; height: calc(100vh - var(--header-h)); }
    .module-content { grid-column: 3; grid-row: 1; padding: 17px 18px 60px; }
    .page-toc { display: none; }
}

@media (max-width: 820px) {
    .module-layout { display: flex; flex-direction: column; padding-inline: 0; }
    .icon-rail { display: none; }
    .sidebar { order: 1; grid-column: auto; grid-row: auto; }
    .module-content { order: 2; grid-column: auto; grid-row: auto; padding: 14px 16px 50px; }
}

/* Module pages: make the article opening feel like a technical brief before
   it becomes a long-form document. */
.module-head {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    align-items: end;
    padding: 26px 28px;
}
.module-head .breadcrumb, .module-head .eyebrow, .module-head h1, .module-head > p { grid-column: 1; }
.module-head .module-meta { grid-column: 2; grid-row: 2 / span 3; align-self: center; justify-content: flex-end; max-width: 190px; }
.module-head h1 { font-size: clamp(42px, 5vw, 64px); }
.module-head > p { max-width: 58ch; color: #c4bdd7; }
.doc-article > p:first-child { margin-top: 0; padding: 18px 20px; border-left: 2px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; background: linear-gradient(90deg, var(--accent-soft), transparent 80%); color: var(--text); font-size: 16px; }
.doc-article pre.text { border-color: rgba(167,139,250,.18); background: linear-gradient(135deg, #07050d, #100b1c); box-shadow: 0 16px 34px rgba(0,0,0,.24); }
.doc-article pre.text::after { content: "terminal"; position: absolute; top: 9px; right: 12px; color: var(--text-faint); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.doc-article h2 { margin-top: 42px; }

@media (max-width: 620px) {
    .module-head { display: block; padding: 22px 20px; }
    .module-head .module-meta { max-width: none; justify-content: flex-start; margin-top: 18px; }
}


/* =========================================================
   DOCUMENTATION INTRODUCTION — PAGE COMPOSITION
   Doc-only layout. The reusable surfaces (panels, cards,
   code panels, chips, quick-start steps) live in
   css/components.css and are shared with the landing page.
   ========================================================= */

.doc-intro {
    padding-top: 44px;
}


/* ---- Hero ----------------------------------------------- */

.doc-hero {
    max-width: 68ch;
    margin-bottom: var(--sp-7);
}

.doc-hero h1 {
    max-width: 22ch;
    margin-bottom: 16px;

    font-size: clamp(34px, 4.2vw, 50px);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.doc-hero h1 span {
    display: block;

    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.doc-hero-lead {
    max-width: 62ch;

    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.7;
}

.doc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);

    margin-top: var(--sp-5);
}


/* ---- Security intro card -------------------------------- */

.intro-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-5);

    padding: var(--sp-6);
    margin-bottom: var(--sp-6);

    border: 1px solid var(--border-accent);
    border-radius: var(--r-xl);

    background:
        radial-gradient(circle at 0% 0%, var(--accent-soft), transparent 55%),
        var(--surface);

    box-shadow: var(--shadow-glow);
}

.intro-card h3 {
    margin-bottom: 6px;
    font-size: var(--fs-lg);
    font-weight: 650;
}

.intro-card p {
    max-width: 74ch;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.intro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);

    margin: var(--sp-4) 0 0;
    padding: 0;

    list-style: none;
}


/* ---- Intro stack rhythm --------------------------------- */

.doc-intro .architecture,
.doc-intro .intro-card,
.doc-intro .feature-cards,
.doc-intro .feature-panel,
.doc-intro .panel,
.doc-intro .quickstart,
.doc-intro .code-panel {
    margin-bottom: var(--sp-6);
}


@media (max-width: 620px) {

    .intro-card {
        grid-template-columns: 1fr;
    }

    .doc-intro {
        padding-top: 28px;
    }
}


/* =========================================================
   RELATED DOCUMENTATION
   ========================================================= */

.related {
    margin-top: var(--sp-7);
    padding-top: var(--sp-6);

    border-top: 1px solid var(--border);
}

.related-title {
    display: block;

    margin-bottom: var(--sp-3);

    color: var(--text-faint);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.related-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.related-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 12px;

    border: 1px solid var(--border);
    border-radius: var(--r-full);

    background: var(--surface);
    color: var(--text-secondary);

    font-size: var(--fs-sm);
    font-weight: 500;

    transition: color var(--t), border-color var(--t), background var(--t);
}

.related-links a:hover {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--border-accent);
}

/* Reference introduction composition must win over the original page-wide
   intro rules above because module.css is the final stylesheet in the page. */
.doc-intro { max-width: none; padding-top: 0; padding-bottom: 30px; }
.intro-top-grid { grid-template-columns: minmax(0,1fr) 324px; gap: 16px; margin-bottom: 16px; }
.intro-top-grid .doc-hero { min-height: 88px; max-width: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.intro-top-grid .doc-hero .eyebrow, .intro-top-grid .doc-hero-actions { display: none; }
.doc-hero h1 { max-width: none; margin-bottom: 7px; font-size: clamp(29px,2.5vw,31px); line-height: 1.15; }
.doc-hero h1 span { display: inline; background: none; color: inherit; }
.doc-hero-lead { max-width: 650px; margin: 0; color: #d0c9df; font-size: 12.5px; line-height: 1.5; }
.intro-top-grid .intro-card { min-height: 88px; margin: 0; padding: 15px 17px; display: flex; flex-direction: row; gap: 13px; border: 1px solid #282039; border-left: 3px solid var(--accent); border-radius: 9px; background: #0d0b19; box-shadow: 0 0 16px rgba(184,75,250,.08); }
.intro-top-grid .intro-card .panel-icon { width: 38px; height: 42px; background: none; border: 0; box-shadow: none; }
.intro-top-grid .intro-card h3 { margin: 0 0 5px; font-size: 13px; }
.intro-top-grid .intro-card p { max-width: 250px; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.intro-top-grid .intro-meta { display: none; }
.doc-intro > .feature-cards, .doc-intro > .architecture { display: none; }
.intro-workbench { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 13px; }
.intro-workbench > .feature-panel { display: block; grid-column: 1; min-width: 0; padding: 13px; border: 1px solid #2b243a; border-radius: 10px; background: #0c0b18; box-shadow: none; }
.intro-workbench > .feature-panel .feature-panel-copy { padding: 0; border: 0; background: none; }
.intro-workbench > .feature-panel .feature-panel-copy h3 { margin-bottom: 7px; font-size: 16px; }
.intro-workbench > .feature-panel .feature-panel-copy > p { margin-bottom: 10px; color: #d1cadd; font-size: 12px; line-height: 1.45; }
.intro-workbench > .feature-panel .code-panel .code-panel-head { min-height: 32px; padding: 7px 11px; font-size: 10px; }
.intro-workbench > .feature-panel .code-panel pre { padding: 10px 12px; }
.intro-workbench > .feature-panel .code-panel pre code { font-size: 10.5px; line-height: 1.65; }
.intro-workbench > .feature-panel .code-panel pre { max-height: 166px; overflow: auto; }
.intro-workbench > .feature-panel .mini-list, .intro-workbench > .feature-panel .inline-button { display: none; }
.intro-workbench > .feature-panel .code-panel { margin: 10px 0 0; }
.intro-workbench > .panel { grid-column: 2; grid-row: 1; min-width: 0; border: 1px solid #2b243a; border-radius: 10px; background: #0c0b18; box-shadow: none; }
.intro-workbench > .panel .panel-head { padding: 13px; }
.intro-workbench .module-links { grid-template-columns: 1fr; gap: 8px; padding: 0 13px 13px; }
.intro-workbench .module-link { min-height: 54px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 10px 12px; }
.intro-workbench .module-link-go { padding: 0; font-size: 0; }
.intro-workbench .module-link-go::after { content: "→"; font-size: 17px; color: var(--accent-text); }
.intro-workbench .module-link:nth-child(2), .intro-workbench .module-link:nth-child(5) { display: none; }
.intro-workbench .module-link:nth-child(1) { order: 3; }
.intro-workbench .module-link:nth-child(3) { order: 1; }
.intro-workbench .module-link:nth-child(4) { order: 2; }
.intro-workbench .module-link { height: 58px; min-height: 58px; grid-template-columns: 28px minmax(0,1fr) 20px; grid-template-rows: auto auto; align-content: center; }
.intro-workbench .module-link > .icon { grid-column: 1; grid-row: 1 / span 2; }
.intro-workbench .module-link > strong { grid-column: 2; grid-row: 1; min-width: 0; }
.intro-workbench .module-link > span:not(.module-link-go) { grid-column: 2; grid-row: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.intro-workbench .module-link > .module-link-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.quickstart { margin-top: 14px; padding: 14px; border: 1px solid #292237; border-radius: 10px; background: #0c0a17; }

@media (max-width: 900px) {
    .intro-top-grid, .intro-workbench { grid-template-columns: 1fr; }
    .intro-workbench > .feature-panel, .intro-workbench > .panel { grid-column: 1; grid-row: auto; }
}

/* Root-cause fix: module.css originally defines a three-track shell for the
   old layout. With the icon rail present that rule makes the rail consume the
   sidebar track and leaves the article in the TOC column. Keep all four
   children in explicit tracks at wide desktop widths. */
@media (min-width: 1351px) {
    .module-layout {
        display: grid;
        width: 100%;
        max-width: none;
        padding-inline: 0;
        grid-template-columns: 70px 205px minmax(0, 1fr) 210px;
        gap: 0;
    }
    .icon-rail { grid-column: 1; grid-row: 1; }
    .sidebar { grid-column: 2; grid-row: 1; width: auto; }
    .module-content { grid-column: 3; grid-row: 1; min-width: 0; padding: 17px 18px 60px; }
    .page-toc { grid-column: 4; grid-row: 1; min-width: 0; }
}