/*
 * APPX Library: the manuals as web pages.
 *
 * One family with www.appx.com: APPX Blue #005872, APPX Gray #828483, the
 * site's sans for headings and navigation.  Reading text is set in Source
 * Serif 4 (self-hosted, SIL Open Font License), sized and measured for long
 * reading.  The APPX details: field definitions with a spec line, message
 * codes as E/W/M badges, sample reports set like printouts on banded paper,
 * screen captures as framed figures.
 */

@font-face {
    font-family: "Source Serif 4";
    src: url("fonts/source-serif-4-roman.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Source Serif 4";
    src: url("fonts/source-serif-4-italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --blue: #005872;
    --blue-deep: #073b4d;
    --blue-ink: #0b3b4b;
    --ink: #1d2b33;
    --muted: #4f6370;
    --gray: #828483;
    /* APPX Gray darkened for small text: 5.2:1 on white, 4.9:1 on the wash.
       The brand gray itself is 3.8:1, so it is kept for rules and marks. */
    --gray-text: #6b6d6c;
    --rule: #d6e3e7;
    --wash: #f4f8f9;
    --paper: #ffffff;
    --band: rgba(0, 88, 114, 0.055);
    --amber: #fbbf24;
    --error: #b42318;
    --warning: #9a4a07;

    --sans: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --serif: "Source Serif 4", Charter, "Bitstream Charter", Georgia, Cambria, "Times New Roman", serif;
    --mono: "SF Mono", SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Liberation Mono", "DejaVu Sans Mono", monospace;

    --measure: 68ch;
    --header-height: 64px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
}

a {
    color: var(--blue);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

a:hover {
    text-decoration-thickness: 2px;
}

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

.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: 16px;
    top: 12px;
    z-index: 50;
    padding: 8px 12px;
    background: var(--paper);
    color: var(--blue);
}

/* --------------------------------------------------------------------------
   Header: one band on every page
   -------------------------------------------------------------------------- */

.lib-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(100deg, var(--blue-deep) 0%, var(--blue) 100%);
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.lib-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1440px;
    height: var(--header-height);
    margin: 0 auto;
    padding: 0 24px;
}

.lib-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

.lib-brand img {
    display: block;
    width: 118px;
    height: auto;
}

.lib-brand span {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.lib-search {
    position: relative;
    flex: 1 1 420px;
    max-width: 520px;
    margin-left: auto;
}

.lib-search input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 13px center;
    color: #ffffff;
    font: inherit;
    font-size: 15px;
}

.lib-search input::placeholder {
    color: rgba(255, 255, 255, 0.78);
}

.lib-search input:focus {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23005872' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E");
    color: var(--ink);
    outline: 3px solid var(--amber);
    outline-offset: 1px;
}

.lib-links {
    display: flex;
    gap: 18px;
    margin-left: auto;
    font-size: 14px;
}

.lib-search + .lib-links {
    margin-left: 0;
}

.lib-links a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.9;
}

.lib-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Results listed under a search box while typing.  Each result is one
   option (manual, title, a passage with the words marked); the headings
   inside that page where the words are follow it as smaller options. */
.lib-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: min(72vh, 600px);
    overflow-y: auto;
    padding: 6px;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(7, 59, 77, 0.22);
    text-align: left;
}

.lib-results[hidden] {
    display: none;
}

.lib-results [role="option"] {
    display: block;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}

.lib-results a[role="option"]:hover,
.lib-results [role="option"][aria-selected="true"] {
    background: var(--wash);
}

.lib-results [role="option"][aria-selected="true"] {
    box-shadow: inset 3px 0 0 var(--blue);
}

.lib-results .r-page {
    margin-top: 2px;
    padding: 9px 12px 8px;
}

.lib-results .r-page:first-child {
    margin-top: 0;
}

.lib-results .r-where {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.4;
}

.lib-results .r-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--blue-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.lib-results .r-snippet {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* A heading inside the page above: indented under it, on a thin rule. */
.lib-results .r-sub {
    margin: 0 0 2px 24px;
    padding: 5px 12px;
    border-left: 2px solid var(--rule);
    border-radius: 0 6px 6px 0;
    color: var(--blue);
    font-size: 13.5px;
    font-weight: 600;
}

.lib-results .r-empty {
    padding: 12px;
    color: var(--muted);
    font-size: 14px;
}

.lib-results .r-corrected {
    padding: 8px 12px 6px;
    color: var(--muted);
    font-size: 13px;
}

.lib-results .r-corrected b {
    color: var(--ink);
}

.lib-results .r-suggest {
    padding: 4px 12px 12px;
    color: var(--blue);
    font-size: 14px;
}

.lib-results .r-suggest b {
    text-decoration: underline;
}

/* "field" beside a field's name: the result opens at its definition. */
.lib-results .r-kind,
.result-kind {
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: 1px;
}

/* The way to every result, last. */
.lib-results .r-all {
    margin-top: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--rule);
    border-radius: 0 0 6px 6px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 600;
}

.lib-results mark,
.search-results mark {
    padding: 0 1px;
    border-radius: 2px;
    background: rgba(251, 191, 36, 0.38);
    color: inherit;
}

/* --------------------------------------------------------------------------
   Manual pages: contents, reading column, "on this page"
   -------------------------------------------------------------------------- */

.lib-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 230px;
    max-width: 1440px;
    margin: 0 auto;
}

.lib-toc {
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 28px 20px 40px 24px;
    background: var(--wash);
    border-right: 1px solid var(--rule);
    font-size: 14.5px;
}

.lib-toc-manual {
    display: block;
    color: var(--blue-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.lib-toc-edition {
    margin: 6px 0 18px;
    color: var(--muted);
    font-size: 13px;
}

.lib-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lib-toc details {
    margin: 2px 0;
}

.lib-toc summary {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--blue-ink);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.lib-toc summary::-webkit-details-marker {
    display: none;
}

.lib-toc summary::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: 0.55em;
    border-right: 2px solid var(--gray);
    border-bottom: 2px solid var(--gray);
    transform: rotate(-45deg);
    transition: transform 120ms ease;
}

.lib-toc details[open] > summary::before {
    transform: rotate(45deg);
}

.lib-toc summary:hover {
    background: rgba(0, 88, 114, 0.07);
}

.lib-toc .ch-number {
    color: var(--gray-text);
    font-variant-numeric: tabular-nums;
}

.lib-toc details ol {
    margin: 2px 0 8px 15px;
    padding-left: 8px;
    border-left: 1px solid var(--rule);
}

.lib-toc details li a {
    display: flex;
    align-items: baseline;
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.35;
}

.lib-toc details li a:hover {
    background: rgba(0, 88, 114, 0.07);
}

.lib-toc details li a[aria-current="page"] {
    background: var(--blue);
    color: #ffffff;
    font-weight: 600;
}

.lib-main {
    min-width: 0;
    padding: 34px 48px 72px;
    container-type: inline-size;
}

.lib-crumbs {
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 14px;
}

.lib-crumbs a {
    color: var(--muted);
}

.lib-crumbs .sep {
    margin: 0 6px;
    color: var(--gray);
}

.lib-chapter {
    margin: 0 0 6px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.lib-main h1 {
    max-width: var(--measure);
    margin: 0 0 22px;
    color: var(--blue-ink);
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* The reading column keeps a comfortable measure.  Sample reports (often
   132 columns wide) step out of it to the full width of the main column:
   .lib-main is a size container, so 100cqw there is its content width, and
   the reading column starts at its left edge. */
.prose {
    max-width: var(--measure);
    font-family: var(--serif);
    font-size: 18.5px;
    line-height: 1.68;
    font-optical-sizing: auto;
}

.prose p {
    margin: 0 0 1em;
}

.prose h2,
.prose h3 {
    font-family: var(--sans);
    color: var(--blue-ink);
    line-height: 1.25;
}

.prose h2 {
    margin: 2em 0 0.6em;
    font-size: 25px;
    font-weight: 700;
}

.prose h3 {
    margin: 1.7em 0 0.5em;
    font-size: 20px;
    font-weight: 600;
}

.prose ul,
.prose ol {
    margin: 0 0 1.1em;
    padding-left: 1.3em;
}

.prose li {
    margin: 0.3em 0;
}

.prose li::marker {
    color: var(--blue);
}

/* Field definitions: name, the data rule as a spec line, then the meaning. */
.fields {
    margin: 1.2em 0 1.6em;
    border-top: 1px solid var(--rule);
}

.field {
    padding: 18px 0 16px;
    border-bottom: 1px solid var(--rule);
}

.field dt {
    margin: 0;
    color: var(--blue-ink);
    font-family: var(--sans);
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.35;
}

/* The data rule as tags, the way the data dictionary thinks about a field. */
.attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px !important;
}

.attr {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--rule);
    border-radius: 5px;
    background: var(--wash);
    color: var(--blue-ink);
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
}

.attr-type {
    border-color: #a9c6cf;
    background: var(--paper);
    font-weight: 600;
}

.attr-required {
    border-color: var(--blue);
    background: var(--blue);
    color: #ffffff;
    font-weight: 600;
}

.attr-display {
    border-style: dashed;
    background: transparent;
    color: var(--muted);
}

.field dd {
    margin: 0;
}

.field dd p {
    margin: 0 0 0.6em;
}

.field dd p:last-child {
    margin-bottom: 0;
}

.field .spec {
    margin-bottom: 0.45em;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.5;
}

/* Value codes inside a field: Y, N, 1, 2 ... */
.values {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 6px 14px;
    margin: 0.4em 0 0.7em;
    font-size: 17px;
}

.values dt {
    min-width: 1.8em;
    padding: 0 6px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--wash);
    color: var(--blue-ink);
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}

.values dd {
    margin: 0;
}

/* Error, warning and message lines. */
.messages {
    margin: 0.8em 0 1.4em;
    padding: 0;
    list-style: none;
}

.messages li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin: 6px 0;
}

.msg {
    flex: 0 0 auto;
    width: 1.7em;
    border-radius: 4px;
    color: #ffffff;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

.msg-E {
    background: var(--error);
}

.msg-W {
    background: var(--warning);
}

.msg-M {
    background: var(--blue);
}

/* Screen captures. */
.figure {
    margin: 1.6em 0 1.8em;
}

.figure a {
    display: block;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(7, 59, 77, 0.12);
}

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

.figure figcaption,
.report figcaption {
    margin-top: 10px;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.45;
}

.figure figcaption b,
.report figcaption b {
    color: var(--blue-ink);
}

/* Sample reports, set like printouts on banded paper: one band every three lines.
   The builder puts the widest row's length in --cols, and the type shrinks
   until that row fits (down to 9px; past that the report scrolls sideways).
   0.61 is the advance of one character in these monospace faces, in ems,
   with a little to spare.  46px is the padding and border of the pre. */
.report {
    container-type: inline-size;
    margin: 1.6em 0 1.8em;
}

.prose > .report {
    width: 100cqw;
}

/* Set by library.js when the report is wider than the screen.  The line
   sits above the report, where a reader on a phone sees it first. */
.report.is-wide::before,
.table-wrap.is-wide::before {
    content: "Scroll sideways to see all of it.";
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 13px;
}

.report pre {
    max-width: 100%;
    margin: 0;
    padding: 18px 22px;
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background-color: var(--paper);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(1.5em * 3),
        var(--band) calc(1.5em * 3),
        var(--band) calc(1.5em * 6)
    );
    background-position: 0 18px;
    background-attachment: local;
    color: #26323a;
    font-family: var(--mono);
    font-size: clamp(9px, calc((100cqw - 46px) / (var(--cols, 80) * 0.61)), 12.5px);
    line-height: 1.5;
    tab-size: 8;
}

/* Previous and next. */
.lib-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: var(--measure);
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
}

.lib-pager a {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    color: var(--blue-ink);
    text-decoration: none;
}

.lib-pager a:hover {
    border-color: var(--blue);
    background: var(--wash);
}

.lib-pager small {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.lib-pager .next {
    grid-column: 2;
    text-align: right;
}

/* "On this page" */
.lib-onpage {
    position: sticky;
    top: var(--header-height);
    align-self: start;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 34px 20px 24px 0;
    font-size: 13.5px;
}

.lib-onpage h2 {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.lib-onpage ol {
    margin: 0;
    padding: 0 0 0 12px;
    list-style: none;
    border-left: 1px solid var(--rule);
}

.lib-onpage li {
    margin: 0 0 8px;
}

.lib-onpage a {
    color: var(--muted);
    text-decoration: none;
}

.lib-onpage a:hover {
    color: var(--blue);
}

/* Manual home: title block and the chapter list. */
.manual-cover {
    max-width: 880px;
}

.manual-cover .lib-chapter {
    color: var(--gray-text);
}

.manual-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0 0 26px;
    color: var(--muted);
    font-size: 15px;
}

.manual-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 36px;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--blue);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.button:hover {
    background: var(--blue-deep);
    text-decoration: none;
}

.button.quiet {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--blue-ink);
}

.button.quiet:hover {
    background: var(--wash);
}

.age-note {
    max-width: var(--measure);
    margin: 0 0 30px;
    padding: 14px 18px;
    border-left: 3px solid var(--gray);
    background: var(--wash);
    color: var(--ink);
    font-size: 15px;
}

.chapters {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: chapter;
}

.chapters > li {
    padding: 18px 0;
    border-top: 1px solid var(--rule);
}

.chapters h2 {
    display: flex;
    gap: 14px;
    margin: 0 0 8px;
    color: var(--blue-ink);
    font-size: 21px;
}

.chapters h2 .ch-number {
    min-width: 1.6em;
    color: var(--gray-text);
    font-variant-numeric: tabular-nums;
}

.cover-grid.with-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
    gap: 44px;
    align-items: start;
}

.cover-screen {
    margin: 4px 0 0;
}

.menu-note {
    max-width: 72ch;
    margin: 6px 0 28px;
    color: var(--muted);
    font-size: 16px;
}

.chapters h2 {
    align-items: baseline;
}

.chapters h2 a {
    color: var(--blue-ink);
    text-decoration: none;
}

.chapters h2 a:hover {
    color: var(--blue);
    text-decoration: underline;
}

.ch-label {
    color: var(--gray-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.menu-list {
    columns: 2 260px;
    column-gap: 40px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.menu-list li {
    break-inside: avoid;
    margin: 0 0 5px;
}

.menu-list a {
    display: inline-flex;
    align-items: baseline;
    color: var(--ink);
    font-size: 15.5px;
    text-decoration: none;
}

.menu-list a:hover span:last-child {
    color: var(--blue);
    text-decoration: underline;
}

.placeholder {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Library home
   -------------------------------------------------------------------------- */

.home-hero {
    position: relative;
    padding: 72px 24px 64px;
    background: #04303f url("img/appx-hero.jpg") right center / cover no-repeat;
    color: #ffffff;
}

.home-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.home-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.05;
}

.home-hero p {
    max-width: 44em;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
}

.home-hero .lib-search {
    max-width: 640px;
    margin: 0;
}

.home-hero .lib-search input {
    height: 54px;
    padding-left: 46px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23005872' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m12.5 12.5 4.5 4.5'/%3E%3C/svg%3E");
    background-position: 16px center;
    color: var(--ink);
    font-size: 17px;
    border: 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.home-hero .lib-search input::placeholder {
    color: var(--muted);
}

.home-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

.shelf {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    padding: 30px 0;
    border-top: 1px solid var(--rule);
}

.shelf h2 {
    margin: 0 0 8px;
    color: var(--blue-ink);
    font-size: 21px;
}

.shelf-summary {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.shelf-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shelf-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 20px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--rule);
}

.shelf-list li:last-child {
    border-bottom: 0;
}

.shelf-title {
    font-size: 17px;
    font-weight: 600;
}

.shelf-title a {
    color: var(--blue-ink);
    text-decoration: none;
}

.shelf-title a:hover {
    color: var(--blue);
    text-decoration: underline;
}

.shelf-note {
    grid-column: 1;
    color: var(--muted);
    font-size: 14.5px;
}

.shelf-meta {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    display: flex;
    gap: 8px;
    color: var(--muted);
    font-size: 13.5px;
    white-space: nowrap;
}

.tag {
    padding: 2px 8px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--blue-ink);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

a.tag:hover {
    border-color: var(--blue);
    background: var(--wash);
}

.tag.soon {
    border-style: dashed;
    color: var(--gray-text);
    font-weight: 500;
}

/* T-apps: one row per module, the two manuals side by side. */
.modules {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.modules th,
.modules td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: middle;
}

.modules th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.modules .code {
    color: var(--gray-text);
    font-family: var(--mono);
    font-size: 13px;
}

.modules .module {
    color: var(--blue-ink);
    font-weight: 600;
}

.modules td .links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.lib-footer {
    padding: 28px 24px 40px;
    background: var(--blue-deep);
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}

.lib-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 28px;
    max-width: 1440px;
    margin: 0 auto;
}

.lib-footer a {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Narrower screens: no "on this page" rail, then contents in a drawer
   -------------------------------------------------------------------------- */

.toc-toggle {
    display: none;
}

@media (max-width: 1200px) {
    .lib-layout {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .lib-onpage {
        display: none;
    }
}

@media (max-width: 900px) {
    .lib-links {
        display: none;
    }

    .lib-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .lib-toc {
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        z-index: 15;
        width: min(86vw, 340px);
        height: auto;
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform 180ms ease, visibility 0s linear 180ms;
        box-shadow: 12px 0 30px rgba(7, 59, 77, 0.18);
    }

    /* Closed, the drawer is hidden outright: no shadow on the page's left
       edge, and its links leave the keyboard order.  It turns visible at
       once on opening and only after the slide on closing. */
    body.toc-open .lib-toc {
        transform: none;
        visibility: visible;
        transition: transform 180ms ease, visibility 0s;
    }

    .toc-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 16px;
        padding: 8px 14px;
        border: 1px solid var(--rule);
        border-radius: 8px;
        background: var(--paper);
        color: var(--blue-ink);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .lib-main {
        padding: 22px 20px 56px;
    }

    .prose {
        font-size: 17.5px;
    }

    .shelf {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .cover-grid.with-screen {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .menu-note {
        margin-top: 26px;
    }

    .shelf-list li {
        grid-template-columns: minmax(0, 1fr);
    }

    .shelf-meta {
        grid-row: auto;
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .lib-header-inner {
        gap: 12px;
        padding: 0 14px;
    }

    .lib-brand img {
        width: 92px;
    }

    .lib-brand span {
        display: none;
    }

    .lib-pager {
        grid-template-columns: 1fr;
    }

    .lib-pager .next {
        grid-column: 1;
    }

    .modules .code {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lib-toc,
    .lib-toc summary::before {
        transition: none;
    }
}

/* Printing a page: the reading column only. */
@media print {
    .lib-header,
    .lib-toc,
    .lib-onpage,
    .lib-pager,
    .lib-footer,
    .toc-toggle {
        display: none !important;
    }

    .lib-layout {
        display: block;
    }

    .lib-main {
        padding: 0;
    }

    .prose {
        font-size: 11pt;
    }

    /* On paper the report keeps its columns: the type shrinks to fit the
       printed line (about 470pt) instead of wrapping. */
    .report pre {
        overflow: visible;
        font-size: min(8pt, calc(470pt / (var(--cols, 80) * 0.61)));
    }
}

/* --------------------------------------------------------------------------
   Menu option numbers, shown as key caps (the manuals follow the menus)
   -------------------------------------------------------------------------- */

.option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75em;
    height: 1.75em;
    margin-right: 0.45em;
    padding: 0 0.35em;
    border: 1px solid var(--rule);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--paper);
    color: var(--blue-ink);
    font-family: var(--mono);
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: 0.22em;
}

.option.small {
    min-width: 1.9em;
    height: 1.55em;
    margin-right: 8px;
    font-size: 11.5px;
    vertical-align: 0.06em;
}

.lib-toc details li a[aria-current="page"] .option {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.chapters ul .option.small {
    font-size: 11px;
}

/* An output process's job steps: "Step 2", "Step 3" ... */
.job-steps {
    margin: 0.4em 0 1.4em;
    padding: 0;
    list-style: none;
}

.job-steps li {
    display: grid;
    grid-template-columns: 4.6em minmax(0, 1fr);
    gap: 0 12px;
    margin: 0 0 0.8em;
}

.job-steps .step {
    color: var(--blue);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 2;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The results page (search.html)
   -------------------------------------------------------------------------- */

.search-main {
    max-width: 880px;
    margin: 0 auto;
    padding: 34px 24px 80px;
}

.search-main h1 {
    margin: 0 0 18px;
    color: var(--blue-ink);
    font-size: clamp(28px, 3.2vw, 36px);
    line-height: 1.15;
}

.search-form {
    display: flex;
    gap: 10px;
    margin: 0 0 16px;
}

.search-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 16px 0 46px;
    border: 1px solid #b9cdd4;
    border-radius: 10px;
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23005872' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m12.5 12.5 4.5 4.5'/%3E%3C/svg%3E") no-repeat 16px center;
    color: var(--ink);
    font: inherit;
    font-size: 17px;
}

.search-form input:focus {
    border-color: var(--blue);
    outline: 3px solid var(--amber);
    outline-offset: 1px;
}

.search-form button,
.search-more {
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--blue);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.search-form button:hover,
.search-more:hover {
    background: var(--blue-deep);
}

/* The choice of manual: one compact menu. */
.search-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 14px;
}

.search-filters[hidden] {
    display: none;
}

.search-filters label {
    color: var(--muted);
    font-size: 14px;
}

.search-filters select {
    max-width: 100%;
    padding: 7px 34px 7px 12px;
    border: 1px solid #b9cdd4;
    border-radius: 8px;
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23005872' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--blue-ink);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    appearance: none;
    cursor: pointer;
}

.search-filters select:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 1px;
}

.search-status {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 15px;
}

.search-status a {
    color: var(--blue);
    font-weight: 600;
}

.search-results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.result {
    padding: 20px 0 18px;
    border-bottom: 1px solid var(--rule);
}

.result-where {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 13px;
}

.result-title {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.3;
}

.result-title a {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--blue-ink);
    text-decoration: none;
}

.result-title a:hover {
    text-decoration: underline;
}

.result-excerpt {
    max-width: var(--measure);
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 16.5px;
    line-height: 1.55;
}

/* Headings inside the page where the words or the meaning are. */
.result-headings {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.result-headings li {
    max-width: var(--measure);
    margin: 0 0 8px;
    padding: 2px 0 2px 14px;
    border-left: 2px solid var(--rule);
}

.result-headings a {
    color: var(--blue);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.result-headings a:hover {
    text-decoration: underline;
}

.result-heading-excerpt {
    display: block;
    color: var(--muted);
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.5;
}

.search-more {
    height: 44px;
    margin-top: 22px;
}

.search-more[hidden] {
    display: none;
}

@media (max-width: 900px) {
    /* On a phone the header's list spans the screen under the header,
       not just the width of the search box. */
    .lib-header .lib-results {
        position: fixed;
        top: calc(var(--header-height) + 4px);
        left: 8px;
        right: 8px;
        max-height: calc(100dvh - var(--header-height) - 16px);
    }

    .search-main {
        padding: 22px 20px 56px;
    }

    .search-form button {
        padding: 0 16px;
    }

    .result-title {
        font-size: 18px;
    }
}

/* --------------------------------------------------------------------------
   T accounts: the account over a T, debits left of the stem, credits right
   -------------------------------------------------------------------------- */

.t-accounts {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 44px;
    margin: 1.3em 0 1.7em;
    padding: 22px 24px 18px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--wash);
    font-family: var(--sans);
}

.t-account {
    width: 196px;
    border-collapse: collapse;
}

.t-account caption {
    padding-bottom: 6px;
    color: var(--blue-ink);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.t-account th {
    width: 50%;
    padding: 0 10px 5px;
    border-bottom: 2px solid var(--blue-ink);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.t-account th:first-child {
    text-align: left;
}

.t-account th:last-child {
    text-align: right;
}

.t-account abbr {
    text-decoration: none;
}

.t-account td {
    height: 1.8em;
    padding: 4px 10px;
    color: var(--ink);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* The stem starts under the bar, as on paper. */
.t-account td + td {
    border-left: 2px solid var(--blue-ink);
}

/* A correction to the printed manual, under the accounts it changed. */
.t-note {
    flex: 1 1 100%;
    max-width: 62ch;
    margin: 4px 0 0;
    padding-left: 12px;
    border-left: 3px solid var(--amber);
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
}

/* A short label over its list ("Purchase Orders" over its bullets). */
.prose .list-label {
    margin: 1.1em 0 0.2em;
    color: var(--blue-ink);
    font-family: var(--sans);
    font-size: 15.5px;
    font-weight: 700;
}

.prose .list-label + ul,
.prose .list-label + ol {
    margin-top: 0.2em;
}

/* --------------------------------------------------------------------------
   Ruled tables (one so far: General Ledger, Appendix A)
   -------------------------------------------------------------------------- */

.table-wrap {
    margin: 1.3em 0 1.8em;
    overflow-x: auto;
}

.data-table {
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
}

.data-table th {
    padding: 7px 14px;
    border-bottom: 1px solid var(--rule);
    background: var(--wash);
    color: var(--blue-ink);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    vertical-align: bottom;
}

.data-table thead tr:last-child th,
.data-table thead th[rowspan] {
    border-bottom: 2px solid var(--blue-ink);
}

.data-table td {
    padding: 2px 14px;
    color: var(--ink);
    white-space: nowrap;
}

.data-table td.centred {
    text-align: center;
}

.data-table th + th,
.data-table td + td {
    border-left: 1px solid var(--rule);
}

/* Where the printed table leaves a gap, a new group starts. */
.data-table tr.group-start td {
    padding-top: 13px;
}

.data-table tbody tr:last-child td {
    padding-bottom: 8px;
    border-bottom: 2px solid var(--blue-ink);
}

/* "Option 1:" run into the paragraph it labels. */
.prose .run-in {
    color: var(--blue-ink);
    font-family: var(--sans);
    font-size: 0.9em;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Manuals converted from HTML (User, System Management): keys, option
   names, code, notes, pictures in a line, captioned tables, groups
   -------------------------------------------------------------------------- */

/* Keys on the keyboard, as key caps: ENTER, OPTION 5, CTRL+F1.
   Drawn like the menu-option caps, sized for a line of text. */
.prose kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.05em 0.42em 0.1em;
    border: 1px solid var(--rule);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--paper);
    color: var(--blue-ink);
    font-family: var(--mono);
    font-size: 0.74em;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    vertical-align: 0.08em;
    white-space: nowrap;
}

/* APPX options and functions named in small capitals, as the manuals print them. */
.prose .small-caps {
    font-variant: small-caps;
    letter-spacing: 0.02em;
}

/* Commands, file names and variables in a line of text. */
.prose code {
    padding: 0.08em 0.32em;
    border-radius: 4px;
    background: var(--wash);
    color: var(--blue-ink);
    font-family: var(--mono);
    font-size: 0.86em;
    overflow-wrap: anywhere;
}

/* Long names (APPX_ORACLE_PARAM_INSERTS) wrap at their underscores where the
   builder marked them; anything still too long for a phone breaks anywhere. */
.prose h2,
.prose h3,
.prose .field dt {
    overflow-wrap: break-word;
}

/* A listing wider than the screen scrolls; it takes keyboard focus to do so. */
.prose pre.code:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* A command line or a listing, as typed. */
.prose pre.code {
    margin: 0.4em 0 1.3em;
    padding: 12px 16px;
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--blue);
    border-radius: 6px;
    background: var(--wash);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.84em;
    line-height: 1.55;
    white-space: pre;
}

/* "Note:" paragraphs. */
.prose p.note {
    padding: 10px 14px;
    border-left: 3px solid var(--gray);
    border-radius: 0 6px 6px 0;
    background: var(--wash);
}

/* A toolbar button or icon pictured in a line of text. */
.prose img.inline-picture {
    width: auto;
    height: auto;
    max-height: 1.6em;
    vertical-align: -0.35em;
}

/* Lists inside list items. */
.prose li > ul,
.prose li > ol {
    margin-top: 0.35em;
    margin-bottom: 0.35em;
}

/* Tables from the HTML manuals hold sentences: their cells wrap. */
.data-table.wrap th,
.data-table.wrap td {
    white-space: normal;
}

/* A table's own caption ("Figure A-1.  GUI Client Keymap"). */
.data-table caption {
    caption-side: top;
    padding: 0 0 8px;
    color: var(--muted);
    font-size: 0.92em;
    text-align: left;
}

/* A correction to the printed manual under a code block, drawn like the
   T-account corrections (.t-note): every correction looks the same. */
.prose p.correction {
    max-width: 62ch;
    margin: -0.7em 0 1.4em;
    padding-left: 12px;
    border-left: 3px solid var(--amber);
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
}

/* A heading that is a command-line option ("-k"): code, in the heading's colour. */
.prose h2 code,
.prose h3 code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

/* A toolbar button shown in its heading (Tool Bar: OK, CANCEL ...). */
.prose h2 img.inline-picture,
.prose h3 img.inline-picture {
    margin-right: 0.35em;
    vertical-align: -0.2em;
}

/* In a long manual's sidebar a closed chapter is a link to its first topic,
   drawn like a closed chapter (summary) of a short manual's sidebar. */
.lib-toc a.toc-chapter {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--blue-ink);
    font-weight: 600;
    text-decoration: none;
}

.lib-toc a.toc-chapter::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: 0.55em;
    border-right: 2px solid var(--gray);
    border-bottom: 2px solid var(--gray);
    transform: rotate(-45deg);
}

.lib-toc a.toc-chapter:hover {
    background: rgba(0, 88, 114, 0.07);
}

/* A book inside a chapter, shown as a label over its topics in the contents. */
.lib-toc details li.toc-group {
    margin: 10px 0 2px;
    padding: 0 8px;
    color: var(--gray-text);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Manuals converted from Word PDFs (APPX/ODBC, the ODBC and SQL Reference):
   lists of names, shaded table rows, paragraphs inside a list item
   -------------------------------------------------------------------------- */

/* Names printed in columns (reserved words, SQL functions): one list in
   alphabetical order, set in as many columns as fit and read left to right,
   row by row, as the ODBC and SQL Reference says its list reads. */
.names {
    margin: 1.4em 0 1.8em;
}

.prose .name-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr));
    column-gap: 1.8em;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper);
    list-style: none;
    color: var(--blue-ink);
    font-family: var(--mono);
    font-size: 0.78em;
    line-height: 1.75;
}

.prose .name-list li {
    margin: 0;
    overflow-wrap: anywhere;
}

.names figcaption {
    margin-top: 10px;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.45;
}

.names figcaption b {
    color: var(--blue-ink);
}

/* Rows the printed table shades: in the ODBC and SQL Reference they mark
   information types renamed or deprecated for ODBC 3.0. */
.data-table tr.shaded td {
    background: rgba(130, 132, 131, 0.13);
}

/* A list item of more than one paragraph. */
.prose li > p {
    margin: 0.45em 0 0;
}

.prose li > p:first-child {
    margin-top: 0;
}

/* A chapter that is one topic of its own name: a link in the sidebar, with
   no fold-out (its arrow is kept invisible so the names stay in line). */
.lib-toc a.toc-chapter.toc-single::before {
    visibility: hidden;
}

.lib-toc a.toc-chapter[aria-current="page"] {
    background: var(--blue);
    color: #ffffff;
}

/* Names in a table cell (column names, data types, InfoType names) break
   only where the converter allows it (after an underscore in a long name);
   the cells of sentences around them wrap instead. */
.data-table code {
    overflow-wrap: normal;
}