/*!
 * Dokumentationssajtens layout: vänsternavigation, innehåll, innehållsförteckning.
 * Bygger på site.css, som bär designtokens.
 */

.docs-top {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 28px;
    background: var(--aegis-surface-card);
    border-bottom: 1px solid var(--aegis-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.docs-top .site-nav { margin-left: auto; }

/* Sök ------------------------------------------------------------------- */

.docs-search { position: relative; flex: 1; max-width: 420px; }

.docs-search input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--aegis-border-strong);
    border-radius: var(--aegis-radius-field);
    background: var(--aegis-surface-field);
    font-family: inherit;
    font-size: 14px;
    color: var(--aegis-text-strong);
}

.docs-search input:focus {
    outline: none;
    border-color: var(--aegis-primary);
    box-shadow: var(--aegis-focus-ring);
}

.docs-search__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 7px;
    background: var(--aegis-surface-card);
    border: 1px solid var(--aegis-border-frame);
    border-radius: var(--aegis-radius-card);
    box-shadow: var(--aegis-shadow-frame);
}

.docs-search__hit {
    display: block;
    padding: 11px 12px;
    border-radius: 7px;
    border-bottom: none;
}

.docs-search__hit:hover,
.docs-search__hit:focus {
    background: var(--aegis-surface-panel);
    border-bottom: none;
}

.docs-search__hit strong {
    display: block;
    font-size: 14px;
    color: var(--aegis-text-strong);
}

.docs-search__hit span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--aegis-text-muted);
}

.docs-search__section {
    font-family: var(--aegis-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aegis-text-faint);
}

.docs-search__empty {
    padding: 14px 12px;
    font-size: 13.5px;
    color: var(--aegis-text-muted);
}

/* Rutnät ---------------------------------------------------------------- */

.docs {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr) 208px;
    gap: 40px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    align-items: start;
}

/* Vänsternavigation ------------------------------------------------------ */

.docs-nav {
    position: sticky;
    top: 84px;
    padding: 34px 0;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
}

.docs-nav__section {
    margin: 22px 0 8px;
    font-family: var(--aegis-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aegis-text-faint);
}

.docs-nav__section:first-child { margin-top: 0; }

.docs-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

.docs-nav__link {
    display: block;
    padding: 7px 11px;
    margin-left: -11px;
    border-radius: 7px;
    border-bottom: none;
    font-size: 14px;
    color: var(--aegis-text-body);
}

.docs-nav__link:hover {
    background: var(--aegis-surface-panel);
    color: var(--aegis-text-strong);
    border-bottom: none;
}

.docs-nav__link--active,
.docs-nav__link--active:hover {
    background: var(--aegis-primary);
    color: var(--aegis-on-primary);
}

/* Innehåll --------------------------------------------------------------- */

.docs-main { padding: 34px 0 96px; min-width: 0; }

.docs-article h1 {
    margin: 0 0 26px;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--aegis-text-strong);
    text-wrap: balance;
}

.docs-article h2 {
    margin: 44px 0 12px;
    padding-top: 22px;
    border-top: 1px solid var(--aegis-border);
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aegis-text-strong);
}

.docs-article h3 {
    margin: 28px 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--aegis-text-strong);
}

.docs-article p,
.docs-article li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--aegis-text-body);
    text-wrap: pretty;
}

.docs-article ul,
.docs-article ol {
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.docs-article li > ul,
.docs-article li > ol { margin-top: 7px; }

.docs-article blockquote {
    margin: 20px 0;
    padding: 15px 18px;
    background: var(--aegis-warning-surface);
    border: 1px solid var(--aegis-border-strong);
    border-radius: var(--aegis-radius-card);
}

.docs-article blockquote p { margin: 0; font-size: 14px; }

.docs-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}

.docs-article th,
.docs-article td {
    padding: 10px 13px;
    text-align: left;
    border-bottom: 1px solid var(--aegis-border);
    vertical-align: top;
}

.docs-article th {
    font-family: var(--aegis-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aegis-text-muted);
    background: var(--aegis-surface-code);
    border-bottom-color: var(--aegis-border-strong);
}

/* Breda tabeller ska rulla i sig själva, inte skjuta ut sidan. */
.docs-article > table { display: block; overflow-x: auto; }

.docs-article pre { margin: 18px 0; position: relative; }

.docs-article :not(pre) > code {
    background: var(--aegis-surface-code);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .9em;
}

/* Kopieringsknapp -------------------------------------------------------- */

.docs-copy {
    position: absolute;
    top: 9px;
    right: 9px;
    padding: 5px 10px;
    border: 1px solid var(--aegis-border-strong);
    border-radius: 6px;
    background: var(--aegis-surface-field);
    font-family: var(--aegis-font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aegis-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s;
}

pre:hover .docs-copy,
.docs-copy:focus { opacity: 1; }

.docs-copy:hover { border-color: var(--aegis-primary); color: var(--aegis-primary); }
.docs-copy--done { border-color: var(--aegis-success); color: var(--aegis-success); }

/* Innehållsförteckning --------------------------------------------------- */

.docs-toc {
    position: sticky;
    top: 84px;
    padding: 34px 0;
    font-size: 13px;
}

.docs-toc__title {
    margin: 0 0 10px;
    font-family: var(--aegis-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aegis-text-faint);
}

.docs-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.docs-toc a {
    display: block;
    color: var(--aegis-text-muted);
    border-bottom: none;
    line-height: 1.45;
}

.docs-toc a:hover { color: var(--aegis-primary); border-bottom: none; }

/* Sidfot ----------------------------------------------------------------- */

.docs-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1240px;
    margin: 0 auto;
    padding: 26px 28px;
    border-top: 1px solid var(--aegis-border);
    font-size: 13px;
    color: var(--aegis-text-muted);
}

/* Smalare skärmar -------------------------------------------------------- */

@media (max-width: 1100px) {
    .docs { grid-template-columns: 210px minmax(0, 1fr); }
    .docs-toc { display: none; }
}

@media (max-width: 820px) {
    .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 20px; }

    .docs-nav {
        position: static;
        max-height: none;
        padding: 26px 0 22px;
        border-bottom: 1px solid var(--aegis-border);
    }

    .docs-top { flex-wrap: wrap; padding: 14px 20px; }
    .docs-search { order: 3; max-width: none; flex-basis: 100%; }
    .docs-article h1 { font-size: 28px; }
}