/*
    The documentation page, which is generated by tools/build-docs.mjs.

    Long, dense, and mostly a reference: the job is to let someone find one command among
    860 quickly, and to let the symbols themselves be read. Unlike the rest of the site
    this page follows the reader's colour scheme, because it is the one page here anyone
    spends more than a minute on.
*/

:root {
    --ground: #ffffff;
    --raised: #f5f7f6;
    --ink: #16211d;
    --ink-soft: #5c6b65;
    --rule: #dfe5e2;
    --accent: #0f8867;
    --link: #0a654d;
    --accent-soft: #e6f3ee;
    --code-ink: #234f42;
    --header: #000000;
    --shadow: rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: dark) {
    :root {
        --ground: #14181a;
        --raised: #1c2225;
        --ink: #e4ece8;
        --ink-soft: #9aa8a2;
        --rule: #2a3336;
        --accent: #22b98d;
        --link: #22b98d;
        --accent-soft: #16302a;
        --code-ink: #8fd9c1;
        --header: #000000;
        --shadow: rgba(0,0,0,0.4);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: var(--ground);
    color: var(--ink);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}
::selection { background-color: var(--accent); color: var(--ground); }
html { scrollbar-color: var(--accent) transparent; }

/* Header, the same black band the rest of the site wears */
header {
    background-color: var(--header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16px;
}
header #logo {
    width: 200px;
    padding-left: 10px;
    display: block;
}
header #logo:hover { opacity: 80%; }
#version {
    color: #9aa8a2;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
}

/* Sidebar and column */
#layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 32px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}
#toc {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding: 24px 8px 40px 0;
    font-size: 14.5px;
}
.navhead {
    margin: 18px 0 6px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
#toc a {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 5px;
    color: var(--ink);
    text-decoration: none;
}
#toc a:hover { background-color: var(--accent-soft); }
#toc a.here { background-color: var(--accent-soft); color: var(--link); font-weight: 600; }
#toc .count { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }

main { padding: 24px 0 80px; min-width: 0; }

h1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: lighter;
    font-size: 38px;
    margin: 0 0 8px;
}
h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: lighter;
    font-size: 26px;
    margin: 44px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule);
    scroll-margin-top: 12px;
}
h2 .count {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--ink-soft);
}
#lede { color: var(--ink-soft); max-width: 62ch; font-size: 17px; }

/* Search */
#searchbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    background-color: var(--ground);
}
#search {
    flex: 1;
    padding: 11px 14px;
    font-size: 16px;
    font-family: inherit;
    color: var(--ink);
    background-color: var(--raised);
    border: 1px solid var(--rule);
    border-radius: 8px;
}
#search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#searchcount { color: var(--ink-soft); font-size: 14px; white-space: nowrap; }

/* The store buttons */
#getit { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
a.button {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 6px;
    background-color: var(--raised);
    border: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
}
a.button:hover { border-color: var(--accent); color: var(--link); }

/* Prose */
.prose p { max-width: 68ch; }
.prose a { color: var(--link); }
/* A button is a button, not a link in a paragraph: the two rules had equal specificity
   and this one came second, so every store button was being painted link-green */
.prose a.button { color: var(--ink); }
p.aside, p.note {
    color: var(--ink-soft);
    border-left: 3px solid var(--rule);
    padding-left: 14px;
    max-width: 68ch;
}
p.note { margin-top: 4px; }
p.placeholder {
    border: 1px dashed var(--rule);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-soft);
    max-width: none;
}

code {
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: var(--code-ink);
    white-space: nowrap;
}
kbd {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85em;
    padding: 2px 6px;
    border: 1px solid var(--rule);
    border-bottom-width: 2px;
    border-radius: 4px;
    background-color: var(--raised);
    white-space: nowrap;
}

/* The two-column explanatory tables inside the prose */
table.wide {
    border-collapse: collapse;
    width: 100%;
    max-width: 68ch;
    margin: 12px 0;
}
table.wide td {
    border-top: 1px solid var(--rule);
    padding: 9px 12px 9px 0;
    vertical-align: top;
}
table.wide td.cmd { white-space: nowrap; width: 1%; padding-right: 20px; }

/* The command lists: pairs, flowed into as many columns as fit */
ul.cmds {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    gap: 2px 18px;
}
ul.cmds li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 5px;
    min-width: 0;
}
ul.cmds li:hover { background-color: var(--accent-soft); }
ul.cmds code {
    overflow: hidden;
    text-overflow: ellipsis;
}
.sym {
    /* The character itself, which is the thing the reader came for and the thing a
       search engine can actually index. Bigger than the prose, and never a picture */
    font-size: 19px;
    line-height: 1.35;
    color: var(--ink);
    cursor: pointer;
    white-space: pre-wrap;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}
.sym:hover { color: var(--link); }
.sym:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.sym.copied { color: var(--link); }

/* Nothing matched the search */
#empty {
    display: none;
    color: var(--ink-soft);
    padding: 30px 0;
}
body.searching #empty.shown { display: block; }
.hidden { display: none !important; }

@media (max-width: 880px) {
    #layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0 16px;
    }
    #toc {
        position: static;
        max-height: none;
        padding: 16px 0 0;
        border-bottom: 1px solid var(--rule);
        columns: 2;
        column-gap: 16px;
    }
    #toc a { break-inside: avoid; }
    .navhead { break-after: avoid; }
    header #logo { width: 150px; }
    h1 { font-size: 30px; }
    ul.cmds { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* The recording. Sized by the page rather than by the file, so it holds up on a phone */
#demo {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background-color: var(--raised);
}

/* Below this the two-column tables in the prose cannot fit: the left cell holds one
   long unbreakable command -- \DeclareUnicodeCharacter is 24 characters -- and it was
   pushing the page 50px wider than a 375px phone. Stacked, each row reads as a term
   and its definition, which is what it is */
@media (max-width: 560px) {
    table.wide,
    table.wide tbody,
    table.wide tr,
    table.wide td {
        display: block;
        width: auto;
    }
    table.wide tr {
        border-top: 1px solid var(--rule);
        padding: 8px 0;
    }
    table.wide td {
        border-top: 0;
        padding: 0 0 2px;
    }
    table.wide td.cmd {
        width: auto;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}