/* VERSE documentation
 *
 * Set like an instrument datasheet rather than a marketing page, because the
 * reader is a technician looking something up mid-job, not a buyer browsing.
 *
 * The palette is taken from the device itself: --doc-panel is the panel colour
 * the firmware actually draws (0x151520), --doc-raised is its button fill
 * (0x222234). Screenshots sit in a bezel at the panel's true 480x320 ratio, so
 * what is on the page matches what is in the reader's hand.
 */

:root {
    --doc-bg:      #08080c;
    --doc-panel:   #151520;   /* the firmware's own panel colour */
    --doc-raised:  #222234;   /* the firmware's own button fill */
    --doc-text:    #c9c9d4;   /* not pure white - long form, dark venue */
    --doc-head:    #ffffff;
    --doc-muted:   #7e7e92;
    --doc-accent:  #00ffff;
    --doc-warn:    #ff8c42;
    --doc-rule:    #26263a;
    --doc-measure: 74ch;
}

/* ---------------------------------------------------------------- shell -- */

body.docs {
    background: var(--doc-bg);
    color: var(--doc-text);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-size: 16.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.doc-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 6rem;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
}

/* ------------------------------------------------------------- masthead -- */

.doc-masthead {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--doc-rule);
    padding-bottom: 1.75rem;
    margin-bottom: 1rem;
}

.doc-eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--doc-accent);
    margin-bottom: 0.6rem;
}

.doc-masthead h1 {
    font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(2.1rem, 5vw, 3.1rem);
    line-height: 1.08;
    color: var(--doc-head);
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
}

.doc-standfirst {
    color: var(--doc-muted);
    max-width: 58ch;
    margin: 0;
}

/* ------------------------------------------------------------------ nav -- */

.doc-nav {
    position: sticky;
    top: 1.5rem;
    font-size: 0.88rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}

.doc-nav h2 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--doc-muted);
    margin: 0 0 0.9rem;
    font-weight: 500;
}

.doc-nav ol { list-style: none; margin: 0; padding: 0; }
.doc-nav li { margin: 0; }

.doc-nav a {
    display: block;
    padding: 0.32rem 0 0.32rem 0.85rem;
    color: var(--doc-muted);
    text-decoration: none;
    border-left: 2px solid var(--doc-rule);
    transition: color 0.15s, border-color 0.15s;
}

.doc-nav a:hover,
.doc-nav a:focus-visible {
    color: var(--doc-head);
    border-left-color: var(--doc-accent);
}

.doc-nav a.is-current {
    color: var(--doc-accent);
    border-left-color: var(--doc-accent);
}

/* -------------------------------------------------------------- content -- */

.doc-body { max-width: var(--doc-measure); min-width: 0; }

.doc-body h2 {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-weight: 600;
    font-size: 1.72rem;
    color: var(--doc-head);
    margin: 3.4rem 0 0.9rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--doc-rule);
    letter-spacing: -0.005em;
}

.doc-body h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }

.doc-body h3 {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-weight: 600;
    font-size: 1.16rem;
    color: var(--doc-head);
    margin: 2.2rem 0 0.6rem;
}

.doc-body p { margin: 0 0 1.15rem; }

.doc-body a { color: var(--doc-accent); text-decoration: none; border-bottom: 1px solid rgba(0,255,255,0.3); }
.doc-body a:hover { border-bottom-color: var(--doc-accent); }

.doc-body ul, .doc-body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.doc-body li { margin-bottom: 0.45rem; }

.doc-body strong { color: var(--doc-head); font-weight: 600; }

.doc-body hr { border: 0; border-top: 1px solid var(--doc-rule); margin: 2.6rem 0; }

/* Measured values, log tokens and register names are the substance of this
 * document, so they are set in mono throughout rather than styled as asides. */
.doc-body code {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.87em;
    background: var(--doc-panel);
    border: 1px solid var(--doc-rule);
    border-radius: 3px;
    padding: 0.08em 0.36em;
    color: #a5e9ff;
}

.doc-body pre {
    background: var(--doc-panel);
    border: 1px solid var(--doc-rule);
    border-left: 3px solid var(--doc-accent);
    border-radius: 4px;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    margin: 0 0 1.4rem;
}

.doc-body pre code {
    background: none; border: 0; padding: 0;
    color: var(--doc-text);
    font-size: 0.85rem;
    line-height: 1.6;
}

.doc-body blockquote {
    margin: 0 0 1.4rem;
    padding: 0.9rem 1.1rem;
    background: var(--doc-panel);
    border-left: 3px solid var(--doc-warn);
    border-radius: 0 4px 4px 0;
    color: var(--doc-text);
}
.doc-body blockquote p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- data -- */

.doc-table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }

.doc-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.92rem;
}

.doc-body th {
    text-align: left;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--doc-muted);
    font-weight: 500;
    padding: 0 0.9rem 0.55rem 0;
    border-bottom: 1px solid var(--doc-rule);
    white-space: nowrap;
}

.doc-body td {
    padding: 0.7rem 0.9rem 0.7rem 0;
    border-bottom: 1px solid rgba(38,38,58,0.55);
    vertical-align: top;
}

.doc-body tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------- screen -- */
/* The signature: a screenshot shown at the panel's true 480x320, in a bezel,
 * so the page matches the object in the reader's hand. */

.doc-screen {
    margin: 1.8rem 0 2rem;
}

.doc-screen-bezel {
    background: linear-gradient(180deg, #2a2a33 0%, #17171d 100%);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
    max-width: 520px;
}

.doc-screen-bezel img {
    display: block;
    width: 100%;
    aspect-ratio: 480 / 320;
    border-radius: 3px;
    background: #000;
}

.doc-screen figcaption {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    color: var(--doc-muted);
    margin-top: 0.7rem;
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------ changelog -- */

.rel { margin-bottom: 3.5rem; }

.rel-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--doc-rule);
    padding-bottom: 0.7rem;
    margin-bottom: 1.4rem;
}

.rel-ver {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--doc-accent);
    letter-spacing: -0.02em;
}

.rel-title {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-size: 1.24rem;
    font-weight: 600;
    color: var(--doc-head);
}

.rel-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--doc-bg);
    background: var(--doc-accent);
    padding: 0.18rem 0.5rem;
    border-radius: 3px;
    margin-left: auto;
}

.rel h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--doc-muted);
    font-weight: 500;
    margin: 1.8rem 0 0.7rem;
}

/* --------------------------------------------------------------- footer -- */

.doc-foot {
    grid-column: 1 / -1;
    border-top: 1px solid var(--doc-rule);
    margin-top: 4rem;
    padding-top: 1.5rem;
    font-size: 0.86rem;
    color: var(--doc-muted);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.doc-foot a { color: var(--doc-muted); text-decoration: none; border-bottom: 1px solid var(--doc-rule); }
.doc-foot a:hover { color: var(--doc-accent); border-bottom-color: var(--doc-accent); }

/* -------------------------------------------------------------- smaller -- */

@media (max-width: 900px) {
    .doc-shell { grid-template-columns: 1fr; gap: 1.5rem; }

    .doc-nav {
        position: static;
        max-height: none;
        background: var(--doc-panel);
        border: 1px solid var(--doc-rule);
        border-radius: 6px;
        padding: 1rem 1.1rem;
    }
    .doc-nav ol { columns: 2; column-gap: 1.5rem; }
    .doc-nav a { border-left: 0; padding-left: 0; }
    .doc-nav a:hover, .doc-nav a.is-current { border-left: 0; }
}

@media (max-width: 560px) {
    body.docs { font-size: 16px; }
    .doc-nav ol { columns: 1; }
    .doc-shell { padding: 1.5rem 1rem 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- print -- */
/* A manual that ends up printed and put in a road case. Dark-on-light is
 * wrong on paper - it wastes toner and reads badly - so the whole document
 * inverts, while screenshots stay dark because that is what the screen
 * actually looks like. */

@media print {
    @page {
        margin: 18mm 16mm;
    }

    body.docs {
        background: #fff;
        color: #111;
        font-size: 10.5pt;
        line-height: 1.55;
    }

    /* Navigation, the contents sidebar and the page footer are all ways of
     * moving around a website. None of them mean anything on paper. */
    .navbar,
    .doc-nav,
    .doc-foot,
    .mobile-menu-btn {
        display: none !important;
    }

    .doc-shell {
        display: block;
        max-width: none;
        padding: 0;
    }

    .doc-masthead {
        border-bottom: 1.5pt solid #111;
        padding-bottom: 8pt;
        margin-bottom: 14pt;
    }

    .doc-eyebrow { color: #555; }
    .doc-masthead h1 { color: #000; font-size: 24pt; }
    .doc-standfirst { color: #444; }

    .doc-body { max-width: none; }
    .doc-body h2 {
        color: #000;
        font-size: 15pt;
        border-top: 0.75pt solid #999;
        margin-top: 18pt;
        padding-top: 9pt;
    }
    .doc-body h3 { color: #000; font-size: 11.5pt; margin-top: 12pt; }
    .doc-body strong { color: #000; }

    /* Keep a heading with what it introduces, and never split a table, a
     * screenshot or a code block across a page. */
    .doc-body h2,
    .doc-body h3 { break-after: avoid; page-break-after: avoid; }

    .doc-screen,
    .doc-table-wrap,
    .doc-body pre,
    .doc-body blockquote,
    .rel-head { break-inside: avoid; page-break-inside: avoid; }

    .doc-body a {
        color: #000;
        border-bottom: 0.5pt solid #999;
    }

    /* Only external links are worth spelling out. Printing the target of every
     * in-page anchor would bury the text in its own cross-references. */
    .doc-body a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #666;
        word-break: break-all;
    }

    .doc-body code {
        background: #f2f2f4;
        border: 0.5pt solid #ccc;
        color: #000;
    }

    .doc-body pre {
        background: #f6f6f8;
        border: 0.5pt solid #bbb;
        border-left: 2pt solid #444;
        color: #000;
    }
    .doc-body pre code { color: #000; }

    .doc-body blockquote {
        background: #f6f6f8;
        border-left: 2pt solid #666;
        color: #111;
    }

    .doc-body th {
        color: #000;
        border-bottom: 0.75pt solid #111;
    }
    .doc-body td { border-bottom: 0.5pt solid #ccc; }

    /* The screenshot stays dark - it is a photograph of a lit screen, and a
     * bleached one would not match the device. The bezel goes, because a slab
     * of grey around it is decoration that costs toner. */
    .doc-screen-bezel {
        background: none;
        box-shadow: none;
        padding: 0;
        border: 0.75pt solid #999;
        border-radius: 2pt;
        max-width: 108mm;
    }

    .doc-screen figcaption { color: #555; font-size: 8.5pt; }

    .rel-ver { color: #000; }
    .rel-title { color: #000; }
    .rel-tag { background: #111; color: #fff; }
    .rel h3 { color: #333; }
}