/* thunky docs & playground. Light/dark via prefers-color-scheme. */

:root {
    --bg: #ffffff;
    --fg: #1a1a1a;
    --muted: #6a737d;
    --border: #d8dee4;
    --accent: #6f42c1;
    --code-bg: #f6f8fa;
    --output-bg: #1b1e24;
    --output-fg: #f2f4f8;
    --ok: #2ea043;
    --fail: #f85149;
    --keyword: #d73a49;
    --string: #032f62;
    --number: #005cc5;
    --comment: #6a737d;
    --operator: #d73a49;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14161a;
        --fg: #d5d9e0;
        --muted: #8b949e;
        --border: #30363d;
        --accent: #b392f0;
        --code-bg: #1d2026;
        --output-bg: #0d0f12;
        --output-fg: #eaf0f6;
        --ok: #3fb950;
        --fail: #ff7b72;
        --keyword: #ff7b72;
        --string: #a5d6ff;
        --number: #79c0ff;
        --comment: #8b949e;
        --operator: #ff7b72;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.6 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    max-width: 1200px;
    margin: 0 auto;
}

#sidebar {
    padding: 1.5rem 1rem;
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    /* dvh, with vh as the fallback for browsers that lack it: on mobile, vh is
       the viewport with the URL bar hidden, so the last rows are cut off until
       you scroll. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

#sidebar .brand a {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--fg);
}

#sidebar .playground-link {
    display: block;
    margin: 1rem 0;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--accent);
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
}

#sidebar .nav-group {
    margin: 1.1rem 0 0.3rem;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

#sidebar ul { list-style: none; padding: 0; margin: 0; }
#sidebar li a {
    display: block;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    color: var(--fg);
}
#sidebar li a:hover { background: var(--code-bg); text-decoration: none; }
#sidebar li a.active { background: var(--code-bg); color: var(--accent); font-weight: 600; }

#content {
    padding: 2rem 2.5rem 4rem;
    min-width: 0;
}

#content h1, #content h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
#content code {
    background: var(--code-bg);
    padding: 0.15em 0.35em;
    border-radius: 4px;
    font-size: 0.9em;
}
/* Plain (non-upgraded) markdown code blocks. CodeMirror renders every editor
   line as its own <pre class="CodeMirror-line">, and the run output is a <pre>
   too, so this must not reach inside a snippet — otherwise each line of code
   gets its own box. */
#content pre:not(.CodeMirror-line):not(.snippet-output) {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    overflow-x: auto;
}
#content pre code { background: none; padding: 0; }

/* Likewise for inline <code>: CodeMirror does not use it, but the reset keeps
   snippet internals free of the documentation styling. */
#content .snippet code { background: none; padding: 0; }
#content table { border-collapse: collapse; }
#content th, #content td { border: 1px solid var(--border); padding: 0.35rem 0.7rem; }
#content blockquote { border-left: 4px solid var(--border); margin-left: 0; padding-left: 1rem; color: var(--muted); }

@media (max-width: 800px) {
    .layout { grid-template-columns: 1fr; }
    #sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
}

/* --- runnable snippets --- */

.snippet {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 1rem 0;
    overflow: hidden;
}

.snippet-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-top: 1px solid var(--border);
    background: var(--code-bg);
}

.snippet-note { color: var(--muted); font-size: 0.8rem; margin-left: auto; }

/* The blank "try it yourself" editor placed before each folded solution. */
.snippet-scratch { border-style: dashed; }
.snippet-scratch .CodeMirror { min-height: 4.5rem; }
.snippet-label {
    padding: 0.3rem 0.7rem;
    border-bottom: 1px solid var(--border);
    background: var(--code-bg);
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.snippet-output, .pg-output {
    margin: 0;
    padding: 0.7rem 1rem;
    background: var(--output-bg);
    color: var(--output-fg);
    font: 0.85rem/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.snippet-output.running { opacity: 0.7; }

button {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.25rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--fg);
    cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }

select {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--fg);
}

/* --- CodeMirror theme "thunky" --- */

.CodeMirror {
    height: auto;
    background: var(--code-bg);
    color: var(--fg);
    font: 0.9rem/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
}
/* Undo the documentation <pre> styling on CodeMirror's per-line elements. */
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0 4px;
    margin: 0;
    overflow: visible;
}
.cm-s-thunky .CodeMirror-gutters { background: var(--code-bg); border-right: 1px solid var(--border); }
.cm-s-thunky .CodeMirror-linenumber { color: var(--muted); }
.cm-s-thunky .CodeMirror-cursor { border-left: 2px solid var(--fg); }
.cm-s-thunky span.cm-keyword { color: var(--keyword); font-weight: 600; }
.cm-s-thunky span.cm-string { color: var(--string); }
.cm-s-thunky span.cm-number { color: var(--number); }
.cm-s-thunky span.cm-comment { color: var(--comment); font-style: italic; }
.cm-s-thunky span.cm-operator { color: var(--operator); }
.cm-s-thunky span.cm-builtin { color: var(--accent); }
.CodeMirror-selected { background: rgba(111, 66, 193, 0.18) !important; }

/* --- playground --- */

.playground-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;   /* see the note on #sidebar */
}

.pg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
}

/* The brand is a flex row rather than a line of inline boxes: an inline-flex
   link takes its baseline from its first flex item, which is the mark, so
   "playground" would align to the bottom of the image instead of to the
   baseline of "Thunky". Centring both children sidesteps baselines entirely.
   The gap replaces the literal space in the markup, which flex drops. */
.pg-header .brand {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pg-header .brand a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--fg);
}

/* Sized in em so the mark tracks the brand text. At 1.5em it sits inside the
   1.6 line box the text already occupies, so the header line does not grow.
   alt is empty on purpose: the word "Thunky" follows it inside the same link. */
.pg-header .brand-logo { width: 1.5em; height: 1.5em; display: block; }
.pg-title { color: var(--muted); }
.pg-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.doc-link { font-size: 0.85rem; margin-left: 0.5rem; }

.pg-main {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    flex: 1;
    min-height: 0;
}

.pg-editor { min-width: 0; border-right: 1px solid var(--border); }
.pg-editor .CodeMirror { height: 100%; }

.pg-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pg-output { flex: 1; overflow-y: auto; }

.pg-outbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.8rem;
    border-bottom: 1px solid var(--border);
    background: var(--code-bg);
    font-size: 0.78rem;
}
.pg-outlabel { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pg-status { font-variant-numeric: tabular-nums; color: var(--muted); }
.pg-status.ok { color: var(--ok); }
.pg-status.failed { color: var(--fail); }
.pg-status.running { color: var(--muted); }

.pg-stdin { border-top: 1px solid var(--border); padding: 0.4rem 0.8rem; }
.pg-stdin summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.pg-stdin textarea {
    width: 100%;
    margin-top: 0.4rem;
    background: var(--code-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font: 0.85rem/1.4 ui-monospace, Consolas, monospace;
    padding: 0.4rem;
}

@media (max-width: 800px) {
    .pg-main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
    .pg-editor { border-right: none; border-bottom: 1px solid var(--border); }
}

/* --- accessibility --- */

/* First thing in the tab order on every page: a way past the sidebar (or the
   playground toolbar) straight to the content. Off-screen until focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: 0.5rem 0.9rem;
    background: var(--accent);
    color: #fff;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    left: 0;
}

/* Keyboard focus must be visible everywhere. :focus-visible rather than
   :focus so a mouse click does not draw a ring. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.CodeMirror-focused {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* CodeMirror draws its own focus treatment inside the editor pane, where an
   outline offset would be clipped. */
.pg-editor .CodeMirror-focused {
    outline-offset: -2px;
}

.loading {
    color: var(--muted);
}

noscript .noscript-note,
noscript {
    display: block;
}

.noscript-note {
    margin: 0;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--code-bg);
}