/* TaoolKit's docs: a man page on the glass. A tree of the page beside it, as ls draws a
   directory; each section a command and what it printed; each example a terminal whose files
   are tmux windows, a line on what each one shows over its code. */

main { display: block; }

/* ---------- The head ---------- */

.docs-head { padding-top: 56px; }

.docs-head h1 {
    margin-top: 16px;
    font: 66px/1.05 var(--pixel);
}

@media (max-width: 700px) { .docs-head h1 { font-size: 44px; } }

.docs-head .sub { margin-top: 14px; max-width: 64ch; }
.docs-head .sub p + p { margin-top: 0.9em; }

/* The products, each a card opening its section. Five in a row where they fit, else three, two
   or one, never one left alone on a row of four. A card is never narrower than the longest
   name's line ("▸ TaoolExperiments", 18ch) with its padding, border and 2px to spare, 18ch + 28px,
   so a name never wraps under its ▸. In ch, never px: ui-monospace is Safari's system mono,
   wider than the Menlo other browsers fall back to, and ch in a container query is the wrap's. */
.docs-head .wrap { container-type: inline-size; }

.kit-index {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

@container (width < calc(90ch + 188px)) { .kit-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (width < calc(54ch + 108px)) { .kit-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (width < calc(36ch + 68px)) { .kit-index { grid-template-columns: minmax(0, 1fr); } }

.kit-index a { display: block; padding: 14px 12px; text-decoration: none; }
.kit-index a:hover { border-color: var(--dim); }
.kit-index b { display: block; font-weight: 400; }
.kit-index b::before { content: "▸ "; color: var(--dim); }
.kit-index span { display: block; margin-top: 4px; color: var(--dim); font-size: 14px; }

/* ---------- The tree beside the page ---------- */

.docs {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.toc {
    position: sticky;
    top: calc(var(--bz-top) + 28px);
    margin-top: 96px;
    max-height: calc(100vh - var(--bz-top) - var(--bz-chin) - var(--tmux) - 56px);
    overflow-y: auto;
    scrollbar-width: none;
    font-size: 14px;
    line-height: 1.75;
}

.toc::-webkit-scrollbar { display: none; }
.toc .root { color: var(--phosphor); }
.toc ul { list-style: none; }
.toc a { display: block; color: var(--dim); text-decoration: none; white-space: nowrap; }
.toc a:hover { color: var(--phosphor); }
.toc .tree { color: var(--faint); white-space: pre; }
.toc a[aria-current="true"] { color: var(--phosphor); }
.toc a[aria-current="true"] .name { padding: 0 0.5ch; border-radius: 2px; background: var(--phosphor); color: var(--ink); text-shadow: none; }

/* On a phone the tmux bar is the way round the page. */
@media (max-width: 960px) {
    .docs { grid-template-columns: minmax(0, 1fr); }
    .toc { display: none; }
}

/* ---------- A section ---------- */

.doc { padding-top: 96px; }

@media (max-width: 700px) { .doc { padding-top: 72px; } }

.doc h2 {
    margin-top: 14px;
    font: 44px/1.1 var(--pixel);
    text-wrap: balance;
}

@media (max-width: 700px) { .doc h2 { font-size: 33px; } }

/* What to import, under the heading, and the platforms it runs on under that, an outlined capsule each. */
.doc .product { margin-top: 8px; color: var(--dim); }
.doc .platforms { display: flex; gap: 6px; margin-top: 10px; list-style: none; }
.doc .platforms li {
    padding: 1px 9px;
    border: 1px solid color-mix(in srgb, var(--dim) 55%, transparent);
    border-radius: 999px;
    color: var(--dim);
    font-size: 13px;
    line-height: 1.5;
}
/* Six on one line on a phone too. */
@media (max-width: 480px) {
    .doc .platforms { gap: 3px; }
    .doc .platforms li { padding: 1px 6px; font-size: 11px; }
}

.doc .prose { margin-top: 18px; }
.doc .prose > * + * { margin-top: 0.9em; }
.doc .prose ul { list-style: none; display: grid; gap: 6px; }

/* A word and the badge after it, never split across lines. */
.nowrap { white-space: nowrap; }
.doc .prose li { padding-left: 2ch; text-indent: -2ch; }
.doc .prose li::before { content: "- "; color: var(--dim); }
.doc .prose b { font-weight: 400; color: var(--phosphor); }

.doc code, .facts code, .table code { font: inherit; color: #e9c9a8; }

/* "# how it works": a comment line, then the facts. */
.facts {
    margin-top: 32px;
    max-width: var(--measure);
    display: grid;
    gap: 12px;
}

.facts dt { color: var(--phosphor); }
.facts dt::before { content: "- "; color: var(--dim); }
.facts dd { padding-left: 2ch; color: var(--dim); }

.doc .guide { margin-top: 28px; }

/* ---------- An example: a terminal whose files are tmux windows ---------- */

.example { margin-top: 28px; overflow: hidden; }

.example .titlebar .title { margin-right: 0; }

/* As wide as "[ copied ]" from the start, so the bar doesn't shift when it says so. */
.example .copy { flex: none; min-width: calc(9.2ch + 22px); justify-content: center; padding: 3px 8px; font-size: 13px; }
/* Kept in place when hidden, so the centered title doesn't move. */
.example .copy[hidden] { visibility: hidden; }

/* The files, as tmux's windows: the one open in inverse video, with tmux's star. */
.example .tabs {
    display: none;
    gap: 1.5ch;
    padding: 6px 12px;
    background: #241c16;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
    font-size: 13px;
    white-space: nowrap;
}

.example .tabs::-webkit-scrollbar { display: none; }

.js .example .tabs { display: flex; }

.example .tabs button {
    flex: none;
    padding: 3px 0.6ch;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--dim);
    font: inherit;
    cursor: pointer;
    text-shadow: inherit;
}

.example .tabs button:hover { color: var(--phosphor); }
.example .tabs button[aria-selected="true"] { background: var(--phosphor); color: var(--ink); text-shadow: none; }
.example .tabs button[aria-selected="true"]::after { content: "*"; }
.example .tabs button:focus-visible { outline: 1px dashed var(--phosphor); outline-offset: 2px; }

/* The terminal fits the file that's open, so a short one leaves no gap under it. Without script
   the files are one after another, each named. */
.js .example .pane:not(.on) { display: none; }

html:not(.js) .example .pane + .pane { border-top: 1px dashed var(--line); }
html:not(.js) .example .pane::before { content: "# " attr(data-tab) ": " attr(data-file); display: block; padding: 14px 20px 0; color: var(--dim); font-size: 13px; }

.example .caption { padding: 16px 20px 0; max-width: 84ch; color: var(--dim); font-size: 14px; }
.example .caption::before { content: "// "; color: var(--faint); }
.example .caption code { color: #e9c9a8; }

.example pre {
    padding: 14px 20px 20px;
    overflow-x: auto;
    font: 14px/1.6 var(--mono);
    tab-size: 4;
}

.example pre:focus-visible { outline: 1px dashed var(--dim); outline-offset: -6px; }

.example .k { color: var(--amber); }
.example .s { color: var(--ok); }
.example .c { color: var(--dim); }
.example .f { color: #e9c9a8; }

/* A file picked prints from the top, a line at a time. */
.example .pane.printing { animation: print 420ms steps(14, end); }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .example .pane.printing { animation: none; } }

/* The package's address, with a copy button. */
.copyline {
    margin-top: 24px;
    max-width: 640px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 9, 7, 0.5);
    font-size: 14px;
}

.copyline code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; color: var(--phosphor); }
.copyline code::-webkit-scrollbar { display: none; }
.copyline .btn { flex: none; min-width: calc(9.2ch + 22px); justify-content: center; }

/* ---------- Tables: the levels, and what each product sends ---------- */

.table { margin-top: 28px; overflow-x: auto; }

.table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 14px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px dashed var(--line); }
.table th { color: var(--dim); font-weight: 400; }
.table td:first-child { white-space: nowrap; }
.table td { color: var(--dim); }
.table td:first-child, .table td b { color: var(--phosphor); font-weight: 400; }

/* ---------- A What's New page, as it looks in the app ---------- */

/* A sheet as iOS draws one, with the page in it: the developer's app, not taool's screen. */
.wn-preview { display: flex; flex-wrap: wrap; gap: 20px; padding: 18px 20px 22px; }
.wn-preview figure { display: grid; gap: 8px; justify-items: center; }
.wn-preview figcaption { max-width: 220px; color: var(--dim); font-size: 12px; text-align: center; }
.wn-sheet {
    position: relative;
    width: 220px;
    height: 372px;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    color: #1c1c1e;
    font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    text-shadow: none;
}
.wn-close { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #e9e9eb; color: #6c6c70; font-size: 15px; }
.wn-page { padding: 48px 18px 0; }
.wn-logo { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #8fd3f4, #84a9ff); }
.wn-title { margin-top: 10px; font-size: 19px; font-weight: 700; }
.wn-from { margin-top: 2px; color: #6c6c70; }
.wn-page ul { margin-top: 12px; list-style: none; display: grid; gap: 10px; }
.wn-page li b { display: block; font-weight: 600; }
.wn-page li em { font-style: normal; font-size: 12px; color: #6c6c70; }
.wn-shot { margin-top: 6px; height: 44px; border-radius: 8px; background: linear-gradient(160deg, #3a3f5c, #7f6aa8); }
.wn-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #e5e5ea; background: #f2f2f7; font-size: 12px; }
.wn-bar span { flex: 1; }
.wn-bar b { padding: 5px 12px; border-radius: 999px; background: #0a84ff; color: #fff; font-weight: 600; }

/* ---------- TaoolKit's languages, in columns filled down ---------- */

.langs { margin-top: 36px; list-style: none; columns: 3 28ch; column-gap: 3ch; font-size: 14px; }
/* On one line, so a name turning into a longer one never moves the columns. */
.langs li { break-inside: avoid; padding: 3px 0; white-space: nowrap; }
/* Arabic and Hebrew read right to left inside it, the code still after. */
.langs .name { unicode-bidi: isolate; }
.langs li::before { content: "* "; color: var(--dim); }
.langs code { color: var(--dim); white-space: nowrap; }

/* ---------- The guides ---------- */

.guides { margin-top: 24px; list-style: none; display: grid; gap: 6px; }
.guides li::before { content: "* "; color: var(--dim); }