@import url("https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap");

/* ==========================================================================
   DATASHEET — classless, black-on-white, monospace only.
   No greys: structure comes from outlines, rules, and a stipple backdrop.
   Sharp corners only. White sheet on a dotted desk.
   ========================================================================== */

/* --- Design tokens -------------------------------------------------------- */
:root {
    --font-mono: "Cascadia Code", ui-monospace, Menlo, monospace;

    /* Page geometry */
    --page-width: min(100%, 70rem);
    --page-pad-x: min(5%, 8rem);
    --page-pad-y: min(5%, 8rem);
    --space: 1rem;

    /* The entire palette: ink on paper, plus one deliberate accent */
    --paper: #ffffff;
    --ink: #111111;
    --mark: #fdee5a; /* highlighter yellow — the lone standout */
}

/* --- Page & desk ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Dotted "engineering paper" desk — stipple instead of a grey fill */
html {
    background-color: var(--paper);
    background-image: radial-gradient(var(--ink) 0.75px, transparent 0.75px);
    background-size: 8px 8px;
    -webkit-text-size-adjust: 100%;
}

body {
    counter-reset: section figure table;
    max-width: var(--page-width);
    margin: 2rem auto;
    padding: var(--page-pad-y) var(--page-pad-x);

    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--ink); /* crisp outline, no shadow */
}

/* Vertical rhythm */
body > *,
main > *,
section > *,
article > * {
    margin-block: 0;
}
p,
ul,
ol,
dl,
pre,
blockquote,
figure,
table,
form,
fieldset,
details,
address {
    margin-block: var(--space);
}

/* --- Headings ------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.15;
    font-weight: 700;
}

/* Document title */
header h1,
h1 {
    font-size: 2.4rem;
    letter-spacing: -0.01em;
    margin-block: 0 0.25rem;
}

/* Section headers — spec-sheet style: uppercase, tracked */
h2,
h3,
h4,
h5,
h6 {
    margin-block: calc(var(--space) * 1.5) var(--space);
}
h2 {
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
h3 {
    font-size: 1.02rem;
}
h4 {
    font-size: 0.95rem;
}
h5 {
    font-size: 0.9rem;
}
h6 {
    font-size: 0.85rem;
}

/* Auto-numbering — LaTeX-style section / subsection */
section {
    counter-reset: subsection;
}
section > h2::before {
    counter-increment: section;
    content: counter(section) ".  ";
}
section > h3::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) "  ";
    font-weight: 700;
}

/* --- Inline text ---------------------------------------------------------- */
p {
    max-width: 68ch;
}

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

strong,
b {
    font-weight: 700;
}
em,
i {
    font-style: italic;
}

/* Highlight — the one deliberate splash of colour on the page */
mark {
    background: var(--mark);
    color: var(--ink);
    padding: 0 0.2em;
}
small {
    font-size: 0.82em;
}
abbr[title] {
    cursor: help;
    text-decoration: underline dotted var(--ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

kbd {
    font-size: 0.82em;
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 0.1em 0.4em;
    margin: 0 0.25em;
    box-shadow: 1px 1px 0 var(--ink);
}

code,
samp,
var {
    font-size: 0.92em;
}
/* Outline inline code instead of a grey fill */
:not(pre) > code,
:not(pre) > samp {
    border: 1px solid var(--ink);
    padding: 0 0.3em;
}

/* --- Blocks --------------------------------------------------------------- */
blockquote {
    margin-inline: 0;
    padding: 0.1rem var(--space);
    border-inline-start: 3px solid var(--ink);
}

pre {
    font-size: 0.88rem;
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: var(--space);
    overflow-x: auto;
}
pre code {
    border: none;
    padding: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--ink);
    margin-block: calc(var(--space) * 1.5);
}

address {
    font-style: normal;
}

/* --- Lists ---------------------------------------------------------------- */
ul,
ol {
    padding-inline-start: 1.6rem;
}
li {
    margin-block: 0.2rem;
}
li > ul,
li > ol {
    margin-block: 0.2rem;
}
ul {
    list-style: square;
}

/* Description lists — table-style rows with dotted leaders between key & value */
dl {
    max-width: 32em;
    overflow: hidden; /* contains the floats & clips leader overflow */
}
dt {
    float: left;
    clear: left;
    position: relative;
    font-weight: 700;
    padding-right: 0.5em;
    background: var(--paper);
}
dt::after {
    content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    position: absolute;
    left: 100%;
    white-space: nowrap;
}
dd {
    float: right;
    position: relative;
    z-index: 1; /* sits above the leader dots */
    margin: 0;
    padding-left: 0.5em;
    background: var(--paper);
}

/* --- Masthead (title block) ----------------------------------------------- */
header {
    border: 2px solid var(--ink);
    padding: var(--page-pad-y) var(--page-pad-x);
    margin: calc(var(--page-pad-y) * -0.25) 0 calc(var(--space) * 2);
}
header > p {
    margin-block: 0 var(--space);
    max-width: none;
}

/* Metadata block: Document / Revision / Date / Author — leader rows */
header dl {
    max-width: none; /* span the full masthead, not the 32em body measure */
    margin-block: var(--space) 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--ink);
}
header dt {
    font-weight: 400; /* keep keys the same weight as values */
}

/* --- Navigation ----------------------------------------------------------- */
nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    list-style: none;
    padding: 0;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
nav a {
    text-decoration: none;
}
nav a:hover {
    text-decoration: underline;
}

/* --- Sections ------------------------------------------------------------- */
section {
    border-top: 1px solid var(--ink);
    padding-block-start: var(--space);
    margin-block-start: calc(var(--space) * 2);
}

/* Boxed note — outline instead of a grey panel */
aside {
    border: 1px solid var(--ink);
    padding: 0.5rem var(--space);
    margin-block-start: calc(var(--space) * 2);
}

footer {
    margin-block-start: calc(var(--space) * 2.5);
    padding-block-start: var(--space);
    border-top: 2px solid var(--ink);
}

/* --- Media ---------------------------------------------------------------- */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}
img,
video,
canvas,
iframe {
    border: 1px solid var(--ink);
}

figure {
    margin-inline: 0;
}
figcaption {
    margin-block-start: 0.5rem;
    font-size: 0.78rem;
}
figcaption::before {
    counter-increment: figure;
    content: "Figure " counter(figure) ". ";
    font-weight: 700;
}

/* Terminal-style bars: [######>   ] hash fill with a cursor edge */
progress,
meter {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    inline-size: 100%;
    max-inline-size: 18rem;
    block-size: 1.2em;
    vertical-align: -0.2em;
    font-family: var(--font-mono);
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 1px; /* room for the [ ] bracket frame */
}

/* Hash-block fill, reused across every engine + meter value state */
progress::-webkit-progress-bar {
    background: var(--paper);
}
progress::-webkit-progress-value,
progress::-moz-progress-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::-moz-meter-bar {
    background-color: transparent;
    background-image: repeating-linear-gradient(
        90deg,
        var(--ink) 0,
        var(--ink) 0.42em,
        transparent 0.42em,
        transparent 0.62em
    );
    border-right: 2px solid var(--ink); /* the > cursor edge */
}
meter::-webkit-meter-bar {
    background: var(--paper);
    border: none;
}

details {
    border: 1px solid var(--ink);
    padding: 0.5rem var(--space);
}
summary {
    cursor: pointer;
    font-weight: 700;
}

/* --- Tables (booktabs) ---------------------------------------------------- */
table {
    border-collapse: collapse;
    inline-size: 100%;
    font-variant-numeric: tabular-nums lining-nums;
    border-block: 2px solid var(--ink);
}
caption {
    caption-side: top;
    text-align: start;
    font-size: 0.78rem;
    margin-block-end: 0.4rem;
}
caption::before {
    counter-increment: table;
    content: "Table " counter(table) ". ";
    font-weight: 700;
}
th,
td {
    border: none;
    padding: 0.35rem 0.7rem;
    text-align: start;
}
thead th {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
thead {
    border-bottom: 1px solid var(--ink);
}
tfoot {
    border-top: 1px solid var(--ink);
    font-weight: 700;
}

/* --- Forms ---------------------------------------------------------------- */
fieldset {
    border: 2px solid var(--ink);
    padding: var(--space);
}
legend {
    font-weight: 700;
    font-size: 1rem;
    padding-inline: 0.4rem;
}
label {
    display: inline-block;
}

input,
textarea,
select,
button {
    font: inherit;
    color: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
        [type="color"]
    ):not([type="file"]),
textarea,
select {
    inline-size: 100%;
    max-inline-size: 22rem;
    padding: 0.35rem 0.5rem;
    background: var(--paper);
    border: 1px solid var(--ink);
}
textarea {
    resize: vertical;
}

/* Boxy dropdowns — square caret in a divided cell, no native chrome */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.2em;
    background-color: var(--paper);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M0 0 H10 L5 7 Z' fill='%23111111'/%3E%3C/svg%3E"),
        linear-gradient(var(--ink), var(--ink));
    background-repeat: no-repeat, no-repeat;
    background-position:
        right 0.6em center,
        right 1.9em center;
    background-size:
        0.7em auto,
        1px 100%;
}

input,
textarea,
select {
    accent-color: var(--ink);
}

/* Boxy radios & checkboxes — square outline, X when selected */
input[type="radio"],
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05em;
    height: 1.05em;
    margin: 0 0.15em 0 0;
    border: 1.5px solid var(--ink);
    background: var(--paper);
    vertical-align: -0.15em;
    cursor: pointer;
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2 8 8 M8 2 2 8' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Blocky slider — bordered channel with a solid square thumb */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 100%;
    max-inline-size: 22rem;
    block-size: 1.2em;
    background: transparent;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
    block-size: 0.6em;
    background: var(--paper);
    border: 1px solid var(--ink);
}
input[type="range"]::-moz-range-track {
    block-size: 0.6em;
    background: var(--paper);
    border: 1px solid var(--ink);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    inline-size: 1em;
    block-size: 1.2em;
    margin-block-start: -0.3em; /* centre the thumb on the 0.6em track */
    background: var(--ink);
    border: none;
    border-radius: 0;
}
input[type="range"]::-moz-range-thumb {
    inline-size: 1em;
    block-size: 1.2em;
    background: var(--ink);
    border: none;
    border-radius: 0;
}

/* Spec-sheet form rows: "label .......... input" with dotted leaders.
   Scoped via :has() to single-line fields only; toggles, slider, color,
   file and textarea keep their normal stacked layout. */
fieldset
    p:is(
        :has(> input[type="text"]),
        :has(> input[type="email"]),
        :has(> input[type="password"]),
        :has(> input[type="number"]),
        :has(> input[type="date"]),
        :has(> input:not([type])),
        :has(> select)
    ) {
    overflow: hidden; /* contain the floats & clip leader overflow */

    & > label {
        float: left;
        position: relative;
        padding-top: calc(
            0.35rem + 1px
        ); /* match input's border + top padding */
        padding-right: 0.5em;
        background: var(--paper);
    }
    & > label::after {
        content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
        position: absolute;
        left: 100%;
        white-space: nowrap;
    }
    & > input,
    & > select {
        float: right;
        position: relative;
        z-index: 1; /* sit above the leader dots */
        inline-size: min(14rem, 50%);
        margin: 0;
        /* paper "gutter" masks the dots ≥0.5em before the box */
        box-shadow: -0.15em 0 0 0 var(--paper);
    }
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* Buttons invert on hover — pure black/white */
button {
    cursor: pointer;
    padding: 0.4rem 1rem;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}
button[type="reset"] {
    background: var(--paper);
    color: var(--ink);
}
button:hover {
    background: var(--paper);
    color: var(--ink);
}
button[type="reset"]:hover {
    background: var(--ink);
    color: var(--paper);
}
button:disabled {
    cursor: not-allowed;
    background: var(--paper);
    color: var(--ink);
    border-style: dashed;
}

/* --- Narrow screens: fill the viewport ------------------------------------ */
@media (max-width: 8.5in) {
    body {
        margin: 0;
        min-height: 100vh;
        padding: 1.25rem;
        border: none;
    }
    header {
        padding: 1.25rem;
    }
}