/* The docs stylesheet, served from the mount's assets path. Loaded AFTER
 * /static/site.css, which owns the brand tokens, the site header, the
 * wordmark and the .esh-* colours - this file only maps the markdown
 * mount's own --md-* variables onto those tokens and styles the document,
 * sidebar, toc and search. Based on the stylesheet Punk ships. */

:root {
    --md-text: var(--ink);
    --md-muted: var(--muted);
    --md-border: var(--ink);
    --md-soft-border: var(--smudge);
    --md-bg: var(--paper);
    --md-code-bg: var(--smudge);
    --md-link: var(--ink);
}

/* body ground, grain, fonts and focus come from site.css */

/* ---- layout -------------------------------------------------------------- */

.punk-md-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 200px;
    gap: 32px;
    max-width: 72rem;
    margin: 0 auto;
    padding: 24px 1.25rem 48px;
}
@media (max-width: 1000px) {
    .punk-md-layout { grid-template-columns: 1fr; }
    .punk-md-sidebar, .punk-md-aside { position: static; max-height: none; }
}

.punk-md-sidebar, .punk-md-aside {
    position: sticky;
    top: 16px;
    align-self: start;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    font-size: 14px;
}

.punk-md-main { min-width: 0; }

.punk-md-footer {
    max-width: 72rem;
    margin: 0 auto;
    border-top: 3px dashed var(--md-border);
    padding: 16px 1.25rem 40px;
    color: var(--md-muted);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---- navigation ---------------------------------------------------------- */

.punk-md-nav, .punk-md-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.punk-md-nav a {
    display: block;
    padding: 4px 10px;
    color: var(--md-muted);
    text-decoration: none;
}
.punk-md-nav a:hover { background: var(--md-code-bg); color: var(--md-text); }
.punk-md-nav a.current {
    background: var(--md-text);
    color: var(--md-bg);
    font-weight: 700;
}
.punk-md-section > details > summary {
    padding: 14px 10px 4px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--md-muted);
    cursor: pointer;
    list-style: none;
    outline: none;
}
.punk-md-section > details > summary::-webkit-details-marker { display: none; }
.punk-md-section > details > ul > li > a { padding-left: 22px; }

/* ---- table of contents --------------------------------------------------- */

.punk-md-aside-title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--md-muted);
    margin: 0 0 8px;
}
.punk-md-toc { list-style: none; margin: 0; padding: 0; }
.punk-md-toc a {
    display: block;
    padding: 3px 0;
    color: var(--md-muted);
    text-decoration: none;
}
.punk-md-toc a:hover { color: var(--md-text); text-decoration: underline; text-decoration-color: var(--hot); }
.punk-md-toc .lvl3 a { padding-left: 14px; font-size: 13px; }

/* ---- the document -------------------------------------------------------- */

.punk-md-body { max-width: 860px; }
.punk-md-body h1, .punk-md-body h2 {
    border-bottom: 3px solid var(--md-border);
    padding-bottom: .3em;
    font-weight: 900;
    letter-spacing: -.02em;
}
.punk-md-body h1 { font-size: 2em; margin: .4em 0 .67em; text-shadow: 2px 2px 0 var(--hot); }
.punk-md-body h2 { font-size: 1.5em; margin-top: 1.5em; }
.punk-md-body h3 { font-size: 1.25em; font-weight: 900; }
.punk-md-body a {
    color: var(--md-link);
    text-decoration-color: var(--hot);
    text-decoration-thickness: 2px;
}
.punk-md-body img {
    max-width: 100%;
    border: 3px solid var(--md-border);
}
.punk-md-body code {
    font-family: var(--mono);
    font-size: .85em;
    background: var(--md-code-bg);
    padding: .2em .4em;
}
.punk-md-body pre {
    background: var(--md-code-bg);
    border-left: 5px solid var(--md-border);
    padding: 16px;
    overflow: auto;
    line-height: 1.5;
}
.punk-md-body pre code { background: none; padding: 0; }
.punk-md-body blockquote {
    border-left: 5px solid var(--hot);
    color: var(--md-muted);
    margin: 0;
    padding: 0 1em;
}
.punk-md-body table { border-collapse: collapse; width: 100%; }
.punk-md-body th, .punk-md-body td {
    border: 1px solid var(--md-border);
    padding: 6px 13px;
}
.punk-md-body th {
    background: var(--md-text);
    color: var(--md-bg);
    text-align: left;
    font-size: .82em;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.punk-md-body ul, .punk-md-body ol { padding-left: 2em; }

/* ---- search -------------------------------------------------------------- */

.punk-md-search input {
    width: 100%;
    padding: 8px 12px;
    font-size: 15px;
    border: 3px solid var(--md-border);
    background: var(--md-bg);
    color: var(--md-text);
    font-family: var(--stack);
}
.punk-md-search input:focus {
    outline: 3px solid var(--hot);
    outline-offset: 2px;
    border-color: var(--md-border);
}
.punk-md-results { list-style: none; margin: 24px 0 0; padding: 0; }
.punk-md-results li {
    padding: 14px 0;
    border-bottom: 1px solid var(--md-border);
}
.punk-md-results a {
    font-size: 15px;
    font-weight: 700;
    color: var(--md-link);
    text-decoration-color: var(--hot);
}
.punk-md-snippet {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--md-muted);
}
.punk-md-empty, .punk-md-hint {
    color: var(--md-muted);
    font-size: 14px;
    padding: 24px 0;
}