/* ==========================================================================
   guide.css — the reading layer for guides, notes, the blog and lessons.
   Loads after ink.css (the blog after arcs-blog.css) and styles only what sits
   inside .docs-content, plus the text-style button that guide.js adds to the
   topbar. Choosing sans switches every face on the page except code.
   Markup contract: tools/guide-components.html shows every component.
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
    --font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --font-reading: var(--font-serif);
    /* Text stays one size; on wider screens the column itself widens, so
       each line holds more. Longer lines get a little more leading. */
    --reading-size: 1.25rem;
    --reading-weight: 500;
    --reading-leading: 1.75;
    --reading-measure: clamp(42rem, 20rem + 36vw, 60rem);
    --code-inline: 0.8em;
    --h1: clamp(2.1rem, 4.6vw, 2.8rem);
    --h2: calc(var(--reading-size) * 1.4);
    --h3: calc(var(--reading-size) * 1.1);
    --h4: calc(var(--reading-size) * 0.92);

    --doc-tip: #4b6a36;
    --doc-danger: #9a3a28;
}

@media screen {
    :root[data-theme="dark"] {
        --doc-tip: #a9c58d;
        --doc-danger: #eba591;
    }
}

:root[data-reading-font="sans"] {
    /* Headings, sidebar, topbar and labels follow; code keeps --font-code. */
    --font-serif: var(--font-ui);
    --font-mono: var(--font-ui);
    --font-reading: var(--font-ui);
    --reading-size: 1.0625rem;
    --reading-weight: 400;
    --reading-leading: 1.7;
    --code-inline: 0.88em;
    --h1: clamp(1.8rem, 3.8vw, 2.25rem);
    --h2: calc(var(--reading-size) * 1.32);
    --h3: calc(var(--reading-size) * 1.08);
    --h4: calc(var(--reading-size) * 0.96);
}

/* Cormorant sizes and italics read oversized and slanted in sans. */
[data-reading-font="sans"] :is(.docs-sidebar h2, .topbar-title, .nav-section a.active) { font-style: normal; }
[data-reading-font="sans"] .docs-sidebar h2 { font-size: 1.05rem; font-weight: 600; }
[data-reading-font="sans"] .nav-section a { font-size: 0.92rem; }
[data-reading-font="sans"] .topbar-title { font-size: 0.9rem; }
[data-reading-font="sans"] .topbar-home { letter-spacing: 0.1em; }
[data-reading-font="sans"] .toc-toggle { letter-spacing: 0.06em; }

/* ---------- Layout ---------- */
/* The reading column is centred on the page and widens with the screen;
   everything in it, prose, code, tables and figures, shares one right edge at
   --reading-measure. The sidebar sits in the left margin; where that margin is
   narrower than the sidebar, the column moves right just enough. The topbar
   uses the same columns, so its title always sits over the column. Below
   1025px ink.css turns the sidebar into a drawer and the column is centred
   alone. Past 2000px the layout stops spreading. */

:root { --shell-pad: max(clamp(1rem, 2.5vw, 2.5rem), calc((100% - 2000px) / 2)); }

.docs-shell {
    max-width: none;
    padding-inline: var(--shell-pad);
}

.topbar {
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    padding-inline: var(--shell-pad);
}

.topbar > .topbar-home { grid-column: 1; justify-self: start; }
.topbar > .topbar-title { grid-column: 2; }
.topbar > .topbar-actions { grid-column: 3; justify-self: end; }

@media (min-width: 1025px) {
    :root {
        --sidebar-width: clamp(15rem, 18vw, 18rem);
        --sidebar-gap: clamp(2rem, 4vw, 4.5rem);
        --layout-columns:
            minmax(calc(var(--sidebar-width) + var(--sidebar-gap)), 1fr)
            minmax(0, var(--reading-measure))
            minmax(0, 1fr);
    }

    .docs-shell { grid-template-columns: var(--layout-columns); gap: 0; }
    .docs-shell > .docs-sidebar { grid-column: 1; width: var(--sidebar-width); }
    .docs-shell > .docs-content { grid-column: 2; }
    .topbar { grid-template-columns: var(--layout-columns); column-gap: 0; }
}

@media (max-width: 1024px) {
    .docs-shell > .docs-content { width: 100%; justify-self: center; }
}

/* ---------- Reading column ---------- */

.docs-content {
    max-width: var(--reading-measure);
    font-family: var(--font-reading);
    font-size: var(--reading-size);
    font-weight: var(--reading-weight);
    line-height: var(--reading-leading);
}

.docs-content :is(h1, h2, h3, h4) {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.2;
    text-wrap: balance;
}

.docs-content h1 { font-size: var(--h1); margin: 0 0 0.6rem; line-height: 1.12; }
.docs-content h2 { font-size: var(--h2); margin: 3.2rem 0 1rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--hairline); }
.docs-content h3 { font-size: var(--h3); margin: 2.3rem 0 0.7rem; }
.docs-content h4 { font-size: var(--h4); margin: 1.8rem 0 0.5rem; }
.docs-content h2 + h3 { margin-top: 1.4rem; }

.docs-content p { margin: 0 0 1em; }
.docs-content :is(ul, ol) { margin: 0 0 1.1em; padding-left: 1.5em; }
.docs-content li { margin-bottom: 0.45em; }
.docs-content li > :is(ul, ol) { margin: 0.45em 0 0; }
.docs-content li::marker { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.docs-content strong { font-weight: 700; }

.docs-content :not(pre) > code {
    font-family: var(--font-code);
    font-size: var(--code-inline);
    padding: 0.06em 0.2em;
    background: var(--paper-recessed);
    border: 0;
    color: var(--ink);
    overflow-wrap: break-word;
}

.docs-content kbd {
    font-family: var(--font-ui);
    font-size: 0.78em;
    font-weight: 500;
    padding: 0.1em 0.42em;
    border: 1px solid var(--hairline);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--paper-raised);
    white-space: nowrap;
}

.docs-content .heading-anchor { font-family: var(--font-ui); font-size: 0.55em; }

/* ---------- Page header and footer ---------- */

.page-head { margin: 0 0 2.2rem; }

.page-summary,
.entry-summary {
    font-size: 1.12em;
    color: var(--ink-soft);
    margin: 0 0 0.9rem;
}

.page-status {
    margin: 0 0 1.2rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.86em;
    line-height: 1.55;
    color: var(--ink-mute);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 1.2rem 0 0;
}

.page-actions > span { font-size: 0.88em; color: var(--ink-mute); }

.button-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.9rem;
    padding: 0.65rem 1.25rem;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    font: 600 1rem/1.2 var(--font-ui);
    text-decoration: none;
}

.button-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--paper); }
.button-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.button-primary svg { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.button-primary .button-note { padding-left: 0.6rem; border-left: 1px solid currentColor; font-weight: 400; opacity: 0.8; white-space: nowrap; }

.page-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 4rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.9em;
    color: var(--ink-mute);
}

.page-footer a { color: var(--ink-soft); }

/* ---------- Entries: blog posts and lessons ---------- */
/* Pages that hold several dated entries give each one a title, a meta line
   (author or session details, date) and a summary, and nest its sections
   one level in the sidebar. */

.entry { margin: 0 0 4rem; }
.entry + .entry { padding-top: 3rem; border-top: 1px solid var(--hairline); }
.entry > header h2 { margin-top: 0; }

.entry .page-actions { margin: 0 0 1.4rem; }

.entry-meta {
    margin: -0.3rem 0 1.1rem;
    font-size: 0.86em;
    line-height: 1.55;
    color: var(--ink-mute);
}

.nav-section ul ul { margin: 0 0 0.5rem; }
.nav-section ul ul a { padding-left: 1.7rem; font-size: 0.95rem; }
.nav-section ul ul a.active { padding-left: calc(1.7rem - 1px); }
[data-reading-font="sans"] .nav-section ul ul a { font-size: 0.86rem; }

/* Sidebar groups (an entry with nested sections): site.js shows a group's
   sections only while you're reading it, so long contents stay short. */
/* The marker is two hairlines, a plus that folds to a minus when the group opens. */
.nav-section .nav-group > a { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.nav-section .nav-group > a::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.15rem;
    color: var(--ink-mute);
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
    opacity: 0.7;
    transition: background-size 0.2s ease, opacity 0.15s ease;
}
.nav-section .nav-group > a:hover::after { opacity: 1; }
.nav-section .nav-group.is-open > a::after { background-size: 100% 1px, 1px 0; }
@media (prefers-reduced-motion: reduce) { .nav-section .nav-group > a::after { transition: none; } }

/* ---------- Index pages ---------- */
/* One centred column without the contents sidebar, and a list of linked titles with blurbs. */

.docs-shell--single { display: block; }
.docs-shell--single .docs-content { max-width: var(--reading-measure); margin-inline: auto; }

.docs-content .guide-list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.docs-content .guide-list > li { margin: 0; padding: 0.8rem 0; border-top: 1px solid var(--hairline); }
.docs-content .guide-list > li:last-child { border-bottom: 1px solid var(--hairline); }
.docs-content .guide-list p { margin: 0.1rem 0 0; color: var(--ink-soft); }

.guide-list-title {
    font-family: var(--font-serif);
    font-size: var(--h3);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

/* ---------- Steps and checkpoints ---------- */

.docs-content ol.steps > li { margin-bottom: 0.9em; padding-left: 0.2em; }
.docs-content ol.steps > li::marker { color: var(--ink-soft); font-weight: 600; }
.docs-content ol.steps .code-block { margin: 0.6em 0 0.8em; }

.checkpoint {
    position: relative;
    padding-left: 1.6em;
    color: var(--ink-soft);
}

.checkpoint::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.32em;
    width: 1em;
    height: 1em;
    background: var(--doc-tip);
    -webkit-mask: var(--icon-check) center / contain no-repeat;
    mask: var(--icon-check) center / contain no-repeat;
}

/* ---------- Code blocks (wrapped and labelled by site.js) ---------- */
/* Command: <pre data-where="On the server">. File: <pre data-file="path">.
   Output: <pre class="output">. A plain <pre> is an unlabelled command. */

.docs-content .code-block {
    position: relative;
    margin: 1rem 0 1.3rem;
    background: var(--plate);
    border: 1px solid var(--plate-edge);
}

.docs-content .code-block > pre {
    margin: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-code);
    font-size: 0.86rem;
    line-height: 1.6;
    font-variant-ligatures: none;
    padding: 0.6rem 0.95rem 0.65rem;
}

.docs-content pre code {
    font-family: inherit;
    font-size: inherit;
}

/* The label and Copy button sit in a header strip, ruled off from the code
   and unselectable, so selecting the code never picks up the label. */
.docs-content .code-label {
    margin: 0;
    padding: 0.35rem 5rem 0.35rem 0.95rem;
    font: 500 0.78rem/1.4 var(--font-ui);
    color: var(--plate-comment);
    background: color-mix(in srgb, var(--plate-text) 7%, var(--plate));
    border-bottom: 1px solid color-mix(in srgb, var(--plate-text) 16%, var(--plate));
    -webkit-user-select: none;
    user-select: none;
}

.docs-content .code-block--output {
    background: var(--paper-raised);
    border-color: var(--hairline);
}

.docs-content .code-block--output > pre { color: var(--ink); }
.docs-content .code-block--output .code-label {
    color: var(--ink-mute);
    background: color-mix(in srgb, var(--ink) 4%, var(--paper-raised));
    border-bottom-color: var(--hairline);
}

.docs-content .copy-btn {
    top: 0.25rem;
    right: 0.4rem;
    padding: 0.14rem 0.55rem;
    -webkit-user-select: none;
    user-select: none;
    font: 500 0.75rem/1.2 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.85;
}

.docs-content .copy-btn:hover,
.docs-content .copy-btn:focus-visible { opacity: 1; }

/* Larger touch target without a larger button. */
@media (hover: none) {
    .docs-content .copy-btn::after { content: ""; position: absolute; inset: -10px -8px; }
}

.docs-content .diagram { max-width: 100%; height: auto; }

/* ---------- Callouts ---------- */
/* <div class="callout callout-warning" role="note"><p class="callout-label">Keep this file private</p><p>…</p></div>
   Types by consequence: callout-note, callout-tip, callout-caution, callout-warning.
   The label states the point and runs into the first paragraph; the icon
   carries the type, with alt text for screen readers. */

.callout {
    --callout: var(--doc-info);
    --callout-icon: var(--icon-note);
    margin: 1.1rem 0;
    padding: 0.6rem 1rem 0.7rem;
    background: color-mix(in srgb, var(--callout) 6%, var(--paper-raised));
    border-left: 3px solid var(--callout);
}

.callout-tip { --callout: var(--doc-tip); --callout-icon: var(--icon-tip); }
.callout-caution { --callout: var(--doc-warning); --callout-icon: var(--icon-caution); }
.callout-warning {
    --callout: var(--doc-danger);
    --callout-icon: var(--icon-warning);
    background: color-mix(in srgb, var(--callout) 9%, var(--paper-raised));
    border-left-width: 4px;
}

.callout > :last-child { margin-bottom: 0; }

.callout-label {
    display: inline;
    margin: 0 0.3em 0 0;
    font-weight: 700;
    color: var(--callout);
}

.callout-label::after { content: "."; }

/* Only the first paragraph runs in; later paragraphs, lists and code stay blocks. */
.callout-label + p { display: inline; }
.callout-label + p + * { margin-top: 0.6em; }

.callout-label::before {
    content: "";
    content: "" / "Note:";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: -0.14em;
    background: currentColor;
    -webkit-mask: var(--callout-icon) center / contain no-repeat;
    mask: var(--callout-icon) center / contain no-repeat;
}

.callout-tip .callout-label::before { content: ""; content: "" / "Tip:"; }
.callout-caution .callout-label::before { content: ""; content: "" / "Caution:"; }
.callout-warning .callout-label::before { content: ""; content: "" / "Warning:"; }

:root {
    --icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM10 4.6a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM8.8 8.6h2.4v6.8H8.8V8.6Z'/%3E%3C/svg%3E");
    --icon-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.3a5.6 5.6 0 0 0-3.3 10.1c.5.4.8.9.8 1.5v.8h5v-.8c0-.6.3-1.1.8-1.5A5.6 5.6 0 0 0 10 1.3ZM7.5 15.2h5v1.3a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-1.3Z'/%3E%3C/svg%3E");
    --icon-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.6 19.2 17.8H.8L10 1.6ZM8.8 7.2v5.2h2.4V7.2H8.8Zm0 6.6v2.3h2.4v-2.3H8.8Z'/%3E%3C/svg%3E");
    --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M6.3 1.3h7.4l5 5v7.4l-5 5H6.3l-5-5V6.3l5-5ZM8.8 5.3v6.2h2.4V5.3H8.8Zm0 7.6v2.4h2.4v-2.4H8.8Z'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm3.9 5.6-5 5.4-2.8-2.6-1.4 1.5 4.3 4 6.4-6.9-1.5-1.4Z'/%3E%3C/svg%3E");
}

/* ---------- Figures ---------- */
/* A screenshot and its caption are one object, like a code block: one border,
   with the caption in a strip beneath the image. Screenshots sit centred at
   three-quarters of the column, are never shown past their own size and are
   never linked away from the page; phones use the full width. Paired figures
   share the strip; diagrams (inline SVG) keep their own layout. */

.docs-content figure { margin: 1.8rem 0 2rem; }

.docs-content figure:has(> img) {
    width: fit-content;
    max-width: min(100%, calc(var(--reading-measure) * 0.75));
    margin-inline: auto;
    border: 1px solid var(--hairline);
    background: var(--paper-raised);
}

.docs-content figure > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

/* The caption takes the image's width rather than widening the figure. */
.docs-content figure:has(> img) > figcaption {
    box-sizing: border-box;
    width: 0;
    min-width: 100%;
    margin: 0;
    padding: 0.4rem 0.9rem 0.45rem;
    border-top: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--ink) 4%, var(--paper-raised));
    font: 500 0.8rem/1.45 var(--font-ui);
    color: var(--ink-mute);
}

@media (max-width: 640px) {
    .docs-content figure:has(> img) { max-width: 100%; }
}

/* Two related figures side by side on wide screens. */
.figure-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
    margin: 1.6rem 0 1.9rem;
}

.docs-content .figure-pair figure { width: auto; max-width: none; margin: 0; }
.docs-content .figure-pair figure > img { width: 100%; }

.docs-content figcaption {
    margin-top: 0.6rem;
    padding: 0;
    border: 0;
    font-family: var(--font-reading);
    font-size: 0.86em;
    line-height: 1.55;
    color: var(--ink-mute);
}

/* ---------- Tables ---------- */

.docs-content .table-scroll { overflow-x: auto; margin: 1.3rem 0 1.5rem; }
.docs-content .table-scroll > table { margin: 0; }

.docs-content table { font-size: 0.94em; }

.docs-content th {
    font-family: var(--font-reading);
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    border-top: 0;
    border-bottom: 1px solid var(--ink-faint);
}

.docs-content :is(td, th) { padding: 0.5rem 0.75rem 0.5rem 0; }
.docs-content :is(td, th) + :is(td, th) { padding-left: 0.75rem; }
.docs-content tr:last-child td { border-bottom: 1px solid var(--hairline); }
.docs-content :is(td, th) > code { overflow-wrap: anywhere; }

/* ---------- Text-style button (added to the topbar by guide.js) ---------- */

.font-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.55rem;
    font: 600 0.95rem/1 var(--font-serif);
    color: var(--ink-mute);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 1.05rem;
    cursor: pointer;
}

[data-reading-font="sans"] .font-toggle { font-family: var(--font-ui); font-size: 0.82rem; }
.font-toggle:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
    :root { --reading-size: 1.17rem; --h1: 2rem; --h2: 1.5rem; --h3: 1.24rem; }
    :root[data-reading-font="sans"] { --reading-size: 1rem; --h1: 1.7rem; --h2: 1.3rem; --h3: 1.1rem; }
    .docs-content h1 { font-size: var(--h1); }
    .docs-content h2 { font-size: var(--h2); margin-top: 2.6rem; }
    .docs-content h3 { font-size: var(--h3); }
    .docs-content .code-block > pre { font-size: 0.8rem; padding: 0.55rem 0.8rem 0.6rem; }
    .docs-content .code-label { padding-left: 0.8rem; }
    .callout { padding: 0.55rem 0.85rem 0.65rem; }
}

/* Room for the text-style button at 320px: Contents keeps its accessible name
   but shows only its icon, and the download size drops to its own line. */
@media (max-width: 400px) {
    .topbar .toc-toggle { font-size: 0; gap: 0; padding: 0 0.6rem; }
    .topbar .toc-toggle svg { width: 1rem; height: 1rem; }
    :is(.page-summary, .entry-summary) { font-size: 1.05em; }
    .button-primary { flex-wrap: wrap; row-gap: 0.15rem; padding-inline: 1rem; }
    .button-primary .button-note { flex-basis: 100%; border: 0; padding-left: calc(1.15em + 0.55rem); font-size: 0.9em; }
}

/* ---------- Print ---------- */

@media print {
    .font-toggle,
    .page-actions { display: none !important; }

    .docs-content { max-width: none; font-size: 11pt; }

    .docs-content .code-block,
    .docs-content .code-block--output { background: #fff; border-color: #999; }
    .docs-content .code-block > pre { color: #000; white-space: pre-wrap; overflow-wrap: anywhere; }
    .docs-content .code-block > pre * { color: inherit !important; }
    .docs-content .code-label { color: #333; background: #fff; border-bottom-color: #999; }
    .callout { background: #fff; break-inside: avoid; }
}