/*
 * The reference pages: theory manual, validation, known limitations.
 *
 * A document, not an application: a readable measure, the builder's colours
 * and type, numbers in tabular monospace, and a print stylesheet so the
 * printed manual is the page they read.
 */

:root {
    --ink:        #171b21;
    --ink-mid:    #3d4551;
    --ink-soft:   #5b6472;
    --ink-faint:  #8b94a3;
    --rule:       #e1e5ea;
    --rule-firm:  #c7cdd6;
    --paper:      #ffffff;
    --shell:      #f3f5f7;
    --field:      #f6f8fa;
    --brand:      #0d6e66;
    --brand-deep: #095049;
    --brand-pale: #e0efed;
    --danger:     #a92218;
    --danger-pale:#fbeae8;
    --ok:         #1b6b40;
    --ok-pale:    #e5f2ea;
    --amber:      #8a5a00;
    --amber-pale: #fdf3df;

    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
    --sans: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --amber-line: #ecd3a6;
    --ok-line:    #b5d6c2;
    --danger-line:#e7b7b2;
    color-scheme: light;
}
/* Dark, as the app (theme.js sets data-theme from the reader's choice; with
   none, the system's setting decides). Printing stays on white. */
@media screen {
    :root[data-theme="dark"] {
        color-scheme: dark;
        --ink: #e4e8ee; --ink-mid: #c5ccd6; --ink-soft: #a6aeba; --ink-faint: #8f98a5;
        --rule: #2b3139; --rule-firm: #3b434e; --paper: #1a1e24; --shell: #111418; --field: #222830;
        --brand: #3bb3a5; --brand-deep: #5fcabd; --brand-pale: #173a36;
        --danger: #f2776c; --danger-pale: #3a1a18; --danger-line: #6b302b;
        --ok: #55c287; --ok-pale: #16301f; --ok-line: #2d5a3e;
        --amber: #e8a54a; --amber-pale: #3a2c12; --amber-line: #6b5222;
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ink: #e4e8ee; --ink-mid: #c5ccd6; --ink-soft: #a6aeba; --ink-faint: #8f98a5;
        --rule: #2b3139; --rule-firm: #3b434e; --paper: #1a1e24; --shell: #111418; --field: #222830;
        --brand: #3bb3a5; --brand-deep: #5fcabd; --brand-pale: #173a36;
        --danger: #f2776c; --danger-pale: #3a1a18; --danger-line: #6b302b;
        --ok: #55c287; --ok-pale: #16301f; --ok-line: #2d5a3e;
        --amber: #e8a54a; --amber-pale: #3a2c12; --amber-line: #6b5222;
    }
}


* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
/* An anchor lands below the sticky bar, not under it. */
[id] { scroll-margin-top: 72px; }

html { background: var(--shell); }
body {
    font: 15px/1.6 var(--sans);
    color: var(--ink);
    background: var(--shell);
}

/* -- the bar ------------------------------------------------------------ */

.help-top {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 10px 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}
.help-brand {
    display: flex; align-items: center; gap: 8px;
    color: var(--ink); text-decoration: none; font-size: 15px;
}
.help-brand strong { font-weight: 700; }
.help-brand .mark rect { fill: none; stroke: var(--brand); stroke-width: 1.6; }
.help-brand .mark .mark-flow { stroke: var(--brand); stroke-width: 1.6; fill: none; }
.help-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.help-nav a {
    padding: 5px 10px; border-radius: 5px;
    color: var(--ink-mid); text-decoration: none; font-size: 14px;
}
.help-nav a:hover { background: var(--field); color: var(--ink); }
.help-nav a[aria-current="page"] { background: var(--brand-pale); color: var(--brand-deep); font-weight: 600; }
.help-print {
    font: inherit; font-size: 13px;
    padding: 5px 12px; border-radius: 5px;
    border: 1px solid var(--rule-firm); background: var(--paper); color: var(--ink-mid);
    cursor: pointer;
}
.help-print:hover { border-color: var(--brand); color: var(--brand-deep); }

/* -- the document --------------------------------------------------------- */

.help-doc {
    max-width: 980px;
    margin: 24px auto;
    padding: 40px 56px 56px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.help-doc > * + * { margin-top: 12px; }
.help-doc h1 { font-size: 28px; line-height: 1.25; letter-spacing: -.01em; }
.help-doc h2 {
    font-size: 20px; margin-top: 40px; padding-top: 12px;
    border-top: 1px solid var(--rule);
}
.help-doc h3 { font-size: 16px; margin-top: 28px; }
.help-doc h4 { font-size: 15px; margin-top: 20px; color: var(--ink-mid); }
.help-doc p, .help-doc li { max-width: 72ch; }
.help-doc ul, .help-doc ol { padding-left: 22px; }
.help-doc li + li { margin-top: 4px; }
.help-doc a { color: var(--brand-deep); }
.help-doc code, .help-doc .eq {
    font-family: var(--mono); font-size: 13.5px;
}
.help-doc .eq {
    display: block; padding: 8px 14px; margin: 10px 0;
    background: var(--field); border-left: 3px solid var(--brand-pale);
    white-space: pre-wrap; max-width: 72ch;
}
.help-doc .lede { font-size: 16px; color: var(--ink-mid); }
.help-doc .meta { color: var(--ink-soft); font-size: 13px; }

.toc { columns: 2; column-gap: 32px; font-size: 14px; }
.toc li { break-inside: avoid; }

/* Status blocks: draft / signed, pass / fail. */
.callout {
    padding: 12px 16px; border-radius: 6px;
    border: 1px solid var(--rule-firm); background: var(--field);
}
.callout.signed { border-color: var(--ok-line); background: var(--ok-pale); }
.callout.fail   { border-color: var(--danger-line); background: var(--danger-pale); }

/* -- tables ---------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td {
    text-align: left; vertical-align: top;
    padding: 7px 10px; border-bottom: 1px solid var(--rule);
}
th { font-weight: 600; color: var(--ink-mid); background: var(--field); }
td.num, th.num {
    text-align: right; font-family: var(--mono);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
td.unit { color: var(--ink-soft); white-space: nowrap; }
tr.group th { background: var(--paper); color: var(--brand-deep); padding-top: 18px; }

.pill {
    display: inline-block; padding: 0 7px; border-radius: 10px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pill.pass    { background: var(--ok-pale); color: var(--ok); }
.pill.fail    { background: var(--danger-pale); color: var(--danger); }
.pill.skip    { background: var(--field); color: var(--ink-soft); }
.pill.warned  { background: var(--brand-pale); color: var(--brand-deep); }
.pill.stated  { background: var(--amber-pale); color: var(--amber); }
.pill.exact   { background: var(--field); color: var(--ink-mid); }
.pill.limit   { background: var(--amber-pale); color: var(--amber); }

/* -- validation cases ------------------------------------------------------ */

details.case {
    border: 1px solid var(--rule); border-radius: 6px;
    padding: 0 14px; margin-top: 8px;
}
details.case > summary {
    display: flex; gap: 12px; align-items: baseline;
    padding: 10px 0; cursor: pointer; list-style: none;
}
details.case > summary::-webkit-details-marker { display: none; }
details.case > summary::before { content: "\25B8"; color: var(--ink-faint); }
details.case[open] > summary::before { content: "\25BE"; }
details.case .key { font-family: var(--mono); font-weight: 600; min-width: 3.2em; }
details.case .title { flex: 1; }
details.case .worst { font-family: var(--mono); color: var(--ink-soft); font-size: 13px; }
details.case[open] { padding-bottom: 14px; }

/* -- limitations ------------------------------------------------------------ */

.limit { border-left: 3px solid var(--rule-firm); padding: 2px 0 2px 16px; margin-top: 20px; }
.limit.headline { border-left-color: var(--brand); }
.limit h3 { margin-top: 0; }
.limit dl { display: grid; grid-template-columns: 9em 1fr; gap: 4px 14px; margin-top: 6px; }
.limit dt { color: var(--ink-soft); }

.help-foot {
    max-width: 980px; margin: 0 auto 32px; padding: 0 8px;
    color: var(--ink-soft); font-size: 12.5px;
}

@media (max-width: 720px) {
    .help-doc { padding: 24px 18px 32px; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
    .toc { columns: 1; }
    .limit dl { grid-template-columns: 1fr; }
}

@media print {
    html, body { background: #fff; font-size: 11pt; }
    .help-top, .help-print { display: none; }
    .help-doc { border: 0; margin: 0; padding: 0; max-width: none; }
    .help-doc h2 { break-after: avoid; }
    details.case, .limit, tr { break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
    .help-foot { margin: 16pt 0 0; }
}