/* Duelund Nordic Tech - the content of the new pages: the design system of
   the banded pages (stage 6 redesign), then the older page blocks, System
   Status, forms, collections and search. Loaded after site.css and
   shell.css, on the new pages only. Built by MAD_TECHIE.

   The look in one sentence: a precise engineering instrument at night -
   generous space, hairlines, one blue for whatever is live, drawings that
   show how things work (spec 7.1). */

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

.shell {
    --wrap: 1240px;
    --band-y: clamp(3.75rem, 7vw, 6.5rem);
    --hair: rgba(219, 230, 255, 0.08);
    --hair-strong: rgba(219, 230, 255, 0.15);
    --panel: #161718;
    --panel-deep: #111213;
    --ice: #dbe6ff;
    --signal: #bfe3ff;
    --accent-soft: rgba(58, 143, 208, 0.12);
    --radius: 10px;
    --ease-mass: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.shell.theme-light {
    --hair: rgba(21, 21, 21, 0.08);
    --hair-strong: rgba(21, 21, 21, 0.16);
    --panel: #ffffff;
    --panel-deep: #eef1f5;
    --ice: #151515;
    --signal: #1d5f91;
    --accent-soft: rgba(40, 113, 169, 0.10);
}

/* --- Page head content ---------------------------------------------------------- */

.page-eyebrow {
    margin: 0 0 1.25rem;
    font: 600 0.78rem/1.4 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
}

.page-eyebrow::before {
    content: "// ";
    content: "// " / "";
    color: var(--accent);
}

.page-lead {
    margin: 1.25rem 0 0;
    max-width: 42rem;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--ink-muted);
}

/* Over the character field the small text gets the same tight dark halo as
   the front page's eyebrow, so a bright glyph never sits against a letter. */
.hero--page .page-lead,
.hero--page .page-eyebrow {
    text-shadow: 0 0 2px var(--night-0), 0 0 8px var(--night-0);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2.25rem 0 0;
}

.hero--home {
    min-height: clamp(560px, 86vh, 900px);
    align-items: center;
}

/* Phones and tablets: the front page gives the twin (hero-field.js) its own
   room above the text - a composition of its own, not the desktop squeezed
   into a column (spec 10.2). Below about 960 px the text leaves no room
   beside it. Until the field is running - or without WebGL - the flat mark
   stands in that room. */
@media (max-width: 960px) {
    .hero--home {
        align-items: flex-end;
        padding-top: calc(4rem + min(64vw, 270px));
        background:
            url("../img/logo-mark-header.svg") no-repeat center calc(3rem + min(32vw, 135px) - min(17vw, 72px)) / min(34vw, 144px) auto,
            linear-gradient(to bottom, var(--night-0) 0%, var(--night-1) 55%, var(--night-2) 100%);
    }

    .hero--home:has(.hero__field.is-ready) {
        background: linear-gradient(to bottom, var(--night-0) 0%, var(--night-1) 55%, var(--night-2) 100%);
    }
}

/* A capability page's part gets the same room above its text below 960 px;
   beside it there is no room there. */
@media (max-width: 960px) {
    .hero--part {
        padding-top: calc(3rem + min(58vw, 250px));
    }
}

.page-title--home {
    /* Large, but leaving the right-hand side to the twin (hero-field.js). */
    font-size: clamp(2.5rem, 5.4vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    max-width: 19ch;
}

/* --- Buttons and links ------------------------------------------------------------ */

.button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.3rem;
    font: 600 0.95rem/1.2 var(--font-sans);
    color: var(--ink);
    text-decoration: none;
    background: var(--night-0);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.button:hover {
    border-color: var(--accent);
}

.button--primary {
    /* Dark text on the logo blue: 5.6:1, where white would only reach 3.4:1. */
    color: var(--night-0);
    background: var(--accent);
    border-color: var(--accent);
}

.theme-light .button--primary {
    color: #ffffff;
}

.button--primary:hover {
    background: #4c9edd;
    border-color: #4c9edd;
}

.button--ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--hair-strong);
}

.button--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
}

.button .icon {
    transition: transform 0.25s var(--ease-mass);
}

.button:hover .icon {
    transform: translateX(3px);
}

.button:focus-visible,
.text-link:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.text-link {
    color: var(--accent);
    text-underline-offset: 3px;
}

.text-link--arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    text-decoration: none;
}

.link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

/* Icons drawn as strokes (Site\Graphics::icon). */
.icon {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
}

.i-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Bands: the full-width sections of the redesigned pages --------------------- */

.page-body.page-body--bands {
    max-width: none;
    padding: 0;
    counter-reset: band;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.band {
    position: relative;
    padding: var(--band-y) 0;
    border-top: 1px solid var(--hair);
}

.band:focus {
    outline: none;
}

.band--raised {
    background: linear-gradient(180deg, #181818 0%, var(--night-0) 100%);
}

/* A drafting sheet: a faint grid that fades out towards the edges. */
.band--drafting {
    background-color: #131415;
    background-image:
        radial-gradient(ellipse 70% 80% at 50% 40%, transparent 0%, #131415 85%),
        linear-gradient(var(--hair) 1px, transparent 1px),
        linear-gradient(90deg, var(--hair) 1px, transparent 1px);
    background-size: 100% 100%, 32px 32px, 32px 32px;
    background-position: center, -1px -1px, -1px -1px;
}

.theme-light .band--raised {
    background: linear-gradient(180deg, #eef1f5 0%, var(--night-0) 100%);
}

.theme-light .band--drafting {
    background-color: #f1f3f6;
    background-image:
        radial-gradient(ellipse 70% 80% at 50% 40%, transparent 0%, #f1f3f6 85%),
        linear-gradient(var(--hair) 1px, transparent 1px),
        linear-gradient(90deg, var(--hair) 1px, transparent 1px);
}

.band__head {
    max-width: 48rem;
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.band__eyebrow {
    display: flex;
    align-items: center;
    margin: 0 0 1.25rem;
    font: 600 0.74rem/1.4 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* The section number comes from a counter, so sections never need renumbering. */
.band--indexed .band__num::before {
    counter-increment: band;
    content: counter(band, decimal-leading-zero);
    color: var(--accent);
}

.band:not(.band--indexed) .band__num {
    display: none;
}

.band__num::after {
    content: "";
    display: inline-block;
    width: 2.25rem;
    height: 1px;
    margin: 0 0.85rem;
    vertical-align: middle;
    background: var(--hair-strong);
}

.band--statement .band__num::after {
    margin-left: 0;
}

.band__title {
    margin: 0;
    font-size: clamp(2rem, 4.2vw, 3.35rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.band__lead {
    margin: 1.25rem 0 0;
    max-width: 40rem;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-muted);
}

/* Head on the left, content on the right; the head stays in view. */
.band__split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.band__split .band__head {
    position: sticky;
    top: 7.5rem;
    margin: 0;
}

@media (max-width: 900px) {
    .band__split {
        grid-template-columns: 1fr;
    }

    .band__split .band__head {
        position: static;
    }
}

/* --- Statement and readout ---------------------------------------------------------- */

.band--statement {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.statement-xl {
    margin: 0;
    max-width: 26ch;
    font-size: clamp(1.8rem, 4.4vw, 3.6rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.statement-xl--quote::before {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-bottom: 1.75rem;
    background: var(--accent);
}

.readout {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 2.5rem 0 0;
    padding: 0.55rem 0.9rem;
    font: 500 0.78rem/1.4 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border: 1px solid var(--hair-strong);
    border-radius: 999px;
}

.readout::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.lead-xl {
    margin: 0 0 1rem;
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    line-height: 1.5;
    font-weight: 450;
    color: var(--ink);
}

/* --- The stage: the six areas as machined parts (stage.js, twin-core.js) -------- */

/* A dark stage, as the spec wants for depth and systems; on a light page too. */
.band--stage {
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(58, 143, 208, 0.07), transparent 70%),
        #111213;
}

.stage {
    position: relative;
}

/* The parts are drawn over the places, under the links. */
.stage__canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* A sheet of figures: hairlines between them, no boxes. */
.specimens {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hair-strong);
}

.specimen {
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--hair);
    transition: background-color 0.4s ease;
}

.specimen:not(:nth-child(3n)) {
    border-right: 1px solid var(--hair);
}

/* Registration marks in the corner of each figure, as on a drawing sheet. */
.specimen::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    width: 9px;
    height: 9px;
    border-top: 1px solid rgba(219, 230, 255, 0.28);
    border-left: 1px solid rgba(219, 230, 255, 0.28);
    pointer-events: none;
}

.specimen:hover {
    background-color: rgba(58, 143, 208, 0.035);
}

.specimen__place {
    position: relative;
    aspect-ratio: 1 / 0.86;
    padding: 1.75rem 1.75rem 0.5rem;
}

/* The line drawing holds the place until the part is drawn, and stays
   without WebGL. */
.specimen__place > svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity 0.6s ease;
}

.stage.is-live .specimen__place > svg {
    opacity: 0;
}

.specimen__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0.5rem 1.75rem 1.9rem;
}

.specimen__figure {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    align-items: baseline;
    margin: 0 0 0.7rem;
    font: 600 0.7rem/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.specimen__fig {
    color: var(--accent);
}

.specimen__name {
    margin: 0 0 0.55rem;
    font-size: 1.4rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.specimen__link {
    color: var(--ink);
    text-decoration: none;
}

/* The whole figure is the link. */
.specimen__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.specimen__link:focus-visible {
    outline: none;
}

.specimen:has(.specimen__link:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.specimen__summary {
    margin: 0 0 1.1rem;
    max-width: 34rem;
    color: var(--ink-muted);
    line-height: 1.6;
}

/* What is built in an area, as small labels. */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.tag {
    padding: 0.3rem 0.55rem;
    font: 500 0.7rem/1.2 var(--font-mono);
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    border: 1px solid var(--hair-strong);
    border-radius: 4px;
}

.specimen .tags {
    margin: 0 0 1.25rem;
}

.specimen__go {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    margin: auto 0 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent);
}

.specimen__go .icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s var(--ease-mass);
}

.specimen:hover .specimen__go .icon {
    transform: translateX(4px);
}

/* The overview: two to a row, larger, with what is built there. */
.stage--detailed .specimens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stage--detailed .specimen:not(:nth-child(3n)) {
    border-right: 0;
}

.stage--detailed .specimen:nth-child(odd) {
    border-right: 1px solid var(--hair);
}

.stage--detailed .specimen__place {
    aspect-ratio: 1 / 0.78;
}

@media (max-width: 980px) {
    .specimens,
    .stage--detailed .specimens {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .specimen:not(:nth-child(3n)) {
        border-right: 0;
    }

    .specimen:nth-child(odd) {
        border-right: 1px solid var(--hair);
    }
}

@media (max-width: 640px) {
    .specimens,
    .stage--detailed .specimens {
        grid-template-columns: minmax(0, 1fr);
    }

    .specimen:nth-child(odd),
    .stage--detailed .specimen:nth-child(odd) {
        border-right: 0;
    }

    .specimen__place {
        aspect-ratio: 1 / 0.8;
        padding: 1.25rem 1.25rem 0.25rem;
    }

    .specimen__text {
        padding: 0.25rem 1.25rem 1.6rem;
    }
}

/* --- The drawings (Site\Graphics) ------------------------------------------------- */

.ill {
    display: block;
    width: 100%;
    height: auto;
}

.ill .g-grid {
    fill: none;
    stroke: rgba(219, 230, 255, 0.045);
    stroke-width: 1;
}

.ill .g-soft {
    fill: none;
    stroke: rgba(219, 230, 255, 0.22);
    stroke-width: 1;
}

.ill .g-soft-fill {
    fill: rgba(219, 230, 255, 0.22);
}

.ill .g-line {
    fill: none;
    stroke: rgba(219, 230, 255, 0.45);
    stroke-width: 1.2;
}

.ill .g-strong {
    fill: none;
    stroke: rgba(219, 230, 255, 0.82);
    stroke-width: 1.4;
}

.ill .g-solid {
    fill: var(--panel-deep);
}

.ill .g-accent {
    fill: rgba(58, 143, 208, 0.12);
    stroke: var(--accent);
    stroke-width: 1.6;
}

.ill polyline.g-accent {
    fill: none;
}

.ill .g-fill {
    fill: var(--accent);
}

.ill .g-node {
    fill: var(--signal);
}

.ill .g-dash {
    stroke-dasharray: 4 4;
}

/* A small technical label in a drawing: a register, an address, a module. */
.ill .g-label {
    fill: rgba(219, 230, 255, 0.5);
    font: 500 7.5px/1 var(--font-mono);
    letter-spacing: 0.06em;
}

/* A wire that carries a signal. The signal itself is a short burst of
   waveform that signals.js draws along it (.sig-burst): brightest at its
   leading edge, fading behind like the trace on an oscilloscope. */
.ill .g-flow {
    fill: none;
    stroke: rgba(191, 227, 255, 0.24);
    stroke-width: 1;
}

.ill .sig-burst {
    fill: none;
    stroke: #e6f3ff;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-light .ill .g-flow { stroke: rgba(40, 113, 169, 0.3); }
.theme-light .ill .g-label { fill: rgba(21, 21, 21, 0.6); }
.theme-light .ill .sig-burst { stroke: #1f6299; }

.theme-light .ill .g-grid { stroke: rgba(21, 21, 21, 0.05); }
.theme-light .ill .g-soft { stroke: rgba(21, 21, 21, 0.25); }
.theme-light .ill .g-soft-fill { fill: rgba(21, 21, 21, 0.25); }
.theme-light .ill .g-line { stroke: rgba(21, 21, 21, 0.5); }
.theme-light .ill .g-strong { stroke: rgba(21, 21, 21, 0.85); }


/* --- Flows: a system as numbered steps with a signal running between them ------- */

/* A system as a flow: numbered steps joined by fine connectors. The signal
   is not drawn on the connectors: signals.js puts a trace beneath the flow
   and lights each step (.is-hit) as the trace passes it. */
.flow {
    --wire: 3.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flow__step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: var(--wire);
    padding: 0.7rem 0.95rem;
    font-size: 0.95rem;
    background: var(--panel-deep);
    border: 1px solid var(--hair-strong);
    border-radius: 8px;
    transition: border-color 1.6s ease, background-color 1.6s ease;
}

.flow__step:last-child {
    margin-right: 0;
    border-color: rgba(58, 143, 208, 0.55);
}

/* Lit for a moment as its line runs: on at once, slowly off. */
.flow__step.is-hit {
    border-color: rgba(150, 205, 255, 0.9);
    background-color: #17202b;
    transition-duration: 0.08s;
}

.flow__step .flow__n {
    transition: color 1.6s ease;
}

.flow__step.is-hit .flow__n {
    color: #eaf4ff;
    transition-duration: 0.08s;
}

.theme-light .flow__step.is-hit {
    background-color: #e8f1fa;
}

.theme-light .flow__step.is-hit .flow__n {
    color: #151515;
}

/* The connector: a hairline that gathers colour towards its arrowhead. */
.flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 4px);
    width: calc(var(--wire) - 14px);
    height: 1px;
    background: linear-gradient(90deg, rgba(219, 230, 255, 0.14), rgba(58, 143, 208, 0.8));
}

.flow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    left: calc(100% + var(--wire) - 10px);
    border-left: 5px solid rgba(58, 143, 208, 0.9);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.flow__n {
    font: 600 0.68rem/1 var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--accent);
}

.flow__label {
    font-weight: 550;
}

/* Upright: steps under each other, the connector running down. */
.flow--upright,
.builder .flow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.flow--upright .flow__step,
.builder .flow .flow__step {
    margin: 0 0 1.75rem;
}

.flow--upright .flow__step:last-child,
.builder .flow .flow__step:last-child {
    margin-bottom: 0;
}

.flow--upright .flow__step:not(:last-child)::after,
.builder .flow .flow__step:not(:last-child)::after {
    top: calc(100% + 4px);
    left: 1.4rem;
    width: 1px;
    height: calc(1.75rem - 14px);
    background: linear-gradient(180deg, rgba(219, 230, 255, 0.14), rgba(58, 143, 208, 0.8));
}

.flow--upright .flow__step:not(:last-child)::before,
.builder .flow .flow__step:not(:last-child)::before {
    top: calc(100% + 1.75rem - 10px);
    left: calc(1.4rem - 2.5px);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid rgba(58, 143, 208, 0.9);
    border-bottom: 0;
}

/* Phones: every chain runs downwards. */
@media (max-width: 640px) {
    .flow {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .flow .flow__step {
        margin: 0 0 1.75rem;
    }

    .flow .flow__step:last-child {
        margin-bottom: 0;
    }

    .flow .flow__step:not(:last-child)::after {
        top: calc(100% + 4px);
        left: 1.4rem;
        width: 1px;
        height: calc(1.75rem - 14px);
        background: linear-gradient(180deg, rgba(219, 230, 255, 0.14), rgba(58, 143, 208, 0.8));
    }

    .flow .flow__step:not(:last-child)::before {
        top: calc(100% + 1.75rem - 10px);
        left: calc(1.4rem - 2.5px);
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 5px solid rgba(58, 143, 208, 0.9);
        border-bottom: 0;
    }
}

/* The run beneath a flow (signals.js): the flow written out as the pipeline
   it describes, stepped through like a debugger - the line being run marked,
   the lines run checked. One accent, as everywhere: the keywords and the
   mark in blue, the rest in greys and ice. */
.sig-code {
    max-width: 44rem;
    margin-top: 1.25rem;
    padding: 0.7rem 0;
    overflow-x: auto;
    font: 500 0.88rem/1.75 var(--font-mono);
    background: #0b0c0d;
    border: 1px solid var(--hair-strong);
    border-radius: 8px;
    transition: border-color 0.6s ease;
}

.sig-code.is-complete {
    border-color: rgba(58, 143, 208, 0.6);
}

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

.sig-code__line {
    display: grid;
    grid-template-columns: 3rem 1.5rem max-content;
    align-items: baseline;
    padding-right: 1.25rem;
    white-space: pre;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.sig-code__n {
    padding-right: 0.9rem;
    text-align: right;
    color: #46515d;
}

.sig-code__mark {
    color: var(--accent);
    text-align: center;
}

/* The line being run: on at once, slowly off. */
.sig-code__line.is-current {
    background: rgba(58, 143, 208, 0.15);
    box-shadow: inset 2px 0 0 var(--accent);
    transition-duration: 0.06s;
}

.sig-code__line.is-done .sig-code__mark {
    color: #7fa9cf;
}

.tok-k { color: var(--accent); }
.tok-v { color: var(--ink); }
.tok-p { color: #6b7887; }
.tok-m { color: #9fb2c6; }
.tok-i { color: #dbe6ff; }

.sig-code.is-complete .tok-result {
    color: #ffffff;
}

.theme-light .sig-code {
    background: #f6f8fb;
}

.theme-light .sig-code__n { color: #9aa5b1; }
.theme-light .tok-p { color: #7a8591; }
.theme-light .tok-m { color: #3d5a80; }
.theme-light .tok-i,
.theme-light .tok-v,
.theme-light .sig-code.is-complete .tok-result { color: #151515; }

.flow-panel {
    padding: 1.5rem;
    background: rgba(10, 11, 12, 0.55);
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
}

.flow-panel + .flow-panel {
    margin-top: 1rem;
}

.theme-light .flow-panel {
    background: rgba(255, 255, 255, 0.7);
}

.illustrative {
    margin: 1rem 0 0;
    font: 0.7rem/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* --- Overview, call-out and the spec panel (capability pages) -------------------- */

.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

@media (max-width: 900px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }
}

.prose p {
    margin: 0 0 1.1rem;
    max-width: 42rem;
    font-size: 1.1rem;
    line-height: 1.7;
}

.callout {
    margin: 2rem 0 0;
    padding: 1.25rem 1.5rem;
    background: var(--accent-soft);
    border-left: 2px solid var(--accent);
    border-radius: 0 8px 8px 0;
}

.callout__label {
    margin: 0 0 0.5rem !important;
    font: 600 0.72rem/1.4 var(--font-mono) !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

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

.spec-panel {
    position: sticky;
    top: 7.5rem;
    padding: 1.5rem;
    background: var(--panel-deep);
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
}

/* The area's own drawing, at the top of its spec panel. */
.spec-panel__art {
    margin: -0.5rem -0.5rem 1.25rem;
    overflow: hidden;
    border: 1px solid var(--hair);
    border-radius: 7px;
    background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(58, 143, 208, 0.08), transparent 70%), #0e0f10;
}

.spec-panel__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.25rem;
    padding-bottom: 0.9rem;
    font: 600 0.74rem/1.4 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--hair-strong);
}

.spec-panel__title::after {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--accent);
}

.spec-panel__group + .spec-panel__group {
    margin-top: 1.5rem;
}

.spec-panel__label {
    margin: 0 0 0.6rem;
    font: 600 0.68rem/1.4 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

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

.spec-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.4rem;
    border-bottom: 1px solid var(--hair);
    line-height: 1.45;
}

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

.spec-list li::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 0.15rem;
    width: 0.6rem;
    height: 1px;
    background: var(--accent);
}

/* --- When it fits, and when not -------------------------------------------------- */

.fit-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 760px) {
    .fit-panels {
        grid-template-columns: 1fr;
    }
}

.fit-panel {
    padding: 1.75rem 1.75rem 1.25rem;
    background: var(--panel);
    border: 1px solid var(--hair-strong);
    border-top-width: 2px;
    border-radius: var(--radius);
}

.fit-panel--yes {
    border-top-color: var(--accent);
}

.fit-panel__title {
    margin: 0 0 1rem;
    font: 600 0.76rem/1.4 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

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

.fit-panel__list li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-top: 1px solid var(--hair);
    line-height: 1.5;
}

.fit-panel__list .icon {
    margin-top: 0.2rem;
}

.fit-panel--yes .icon {
    color: var(--accent);
}

.fit-panel--no .icon {
    color: var(--ink-muted);
}

/* --- The technical view as a data sheet ------------------------------------------ */

.datasheet {
    background: var(--panel-deep);
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
}

.datasheet__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.35rem 1.6rem;
    cursor: pointer;
    list-style: none;
}

.datasheet__summary::-webkit-details-marker {
    display: none;
}

.datasheet__summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.datasheet__label {
    font: 600 0.82rem/1.4 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.datasheet__hint {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font: 400 1.2rem/1 var(--font-mono);
    color: var(--accent);
    border: 1px solid var(--hair-strong);
    border-radius: 50%;
    transition: transform 0.3s var(--ease-mass);
}

.datasheet[open] .datasheet__hint {
    transform: rotate(45deg);
}

.datasheet__body {
    padding: 1.5rem 1.6rem 1.75rem;
    border-top: 1px solid var(--hair-strong);
}

.datasheet__body p {
    max-width: 46rem;
    line-height: 1.7;
}

/* The technical deep dive of an entry page: the same data sheet, opened on request. */
.technical {
    margin: 2.25rem 0 0;
    background: var(--panel-deep);
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
}

.technical > summary {
    padding: 1.1rem 1.35rem;
    font: 600 0.8rem/1.3 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

.technical > summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.technical > p,
.technical > .tech-list {
    margin: 0 1.35rem 1.1rem;
}

/* --- Closing call to action ------------------------------------------------------- */

.band--cta {
    padding: var(--band-y) 0;
}

.cta-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 5rem);
    background:
        radial-gradient(110% 140% at 100% 0%, rgba(58, 143, 208, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, #18191b 0%, #121314 100%);
    border: 1px solid rgba(58, 143, 208, 0.35);
    border-radius: 16px;
}

/* The drafting grid, fading in from the corner. */
.cta-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--hair) 1px, transparent 1px),
        linear-gradient(90deg, var(--hair) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000 0%, transparent 70%);
}

.theme-light .cta-panel {
    background:
        radial-gradient(110% 140% at 100% 0%, rgba(40, 113, 169, 0.16) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
}

.cta-panel__title {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 18ch;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.cta-panel__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2.25rem 0 0;
}

/* --- Sections of the pages not yet banded ---------------------------------------- */

.page-body {
    max-width: 76rem;
}

.section {
    padding: 2.75rem 0;
    border-top: 1px solid var(--hair);
}

.page-body > .section:first-child {
    border-top: 0;
    padding-top: 0.5rem;
}

.section:focus {
    outline: none;
}

.section__title {
    margin: 0 0 1.1rem;
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.section p,
.note,
.lead-small {
    max-width: 46rem;
}

.lead-small {
    font-size: 1.1rem;
    color: var(--ink);
}

.note {
    color: var(--ink-muted);
    font-size: 0.95rem;
}

.statement {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.statement::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-bottom: 1rem;
    background: var(--accent);
}

.principle {
    margin: 0 0 2rem;
    font: 600 1rem/1.5 var(--font-mono);
    color: var(--ink);
}

.takeaway {
    margin: 2rem 0 0;
    max-width: 40rem;
    font-size: 1.25rem;
    line-height: 1.4;
}

.based-line {
    margin: 2rem 0 0;
    font: 0.8rem/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    color: var(--ink-muted);
}

/* Preview only: a required text that is still empty. */
.missing {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font: 0.8rem/1.4 var(--font-mono);
    color: #1b1300;
    background: #f2c14e;
}

/* --- Pairs, steps and lists ------------------------------------------------------- */

.pairs {
    display: grid;
    gap: 1.25rem;
    margin: 0;
}

.pairs--grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1.5rem 2rem;
}

.pair dt {
    margin: 0 0 0.25rem;
    font-weight: 650;
}

.pair dd {
    margin: 0;
    color: var(--ink-muted);
    line-height: 1.5;
}

.pairs--grid .pair {
    padding-top: 0.75rem;
    border-top: 2px solid var(--accent);
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.step__number {
    font: 600 0.8rem/1 var(--font-mono);
    color: var(--accent);
}

.step__name {
    font-weight: 650;
    font-size: 1.1rem;
}

.step__text {
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem 3rem;
}

.column__title {
    margin: 0 0 0.75rem;
    font: 600 0.75rem/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.plain-list,
.fit-list,
.principle-list,
.tech-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plain-list li,
.fit-list li,
.principle-list li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.4rem;
    line-height: 1.45;
}

.plain-list li::before,
.fit-list li::before,
.principle-list li::before {
    position: absolute;
    left: 0;
    font-family: var(--font-mono);
}

.plain-list li::before {
    content: "–";
    content: "–" / "";
    color: var(--ink-muted);
}

.principle-list li::before {
    content: "//";
    content: "//" / "";
    font-size: 0.8em;
    color: var(--accent);
}

.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tech-list li {
    padding: 0.35rem 0.65rem;
    font: 0.78rem/1.3 var(--font-mono);
    border: 1px solid var(--hair-strong);
    border-radius: 4px;
}

/* The closing call to action on a page without bands sits inside the column. */
.page-body:not(.page-body--bands) .cta-panel {
    margin: 3rem 0 0;
}

/* --- System status ------------------------------------------------------------------- */
/* State colours are their own family, separate from the DNT accent (QA round
   25), and always come with a word and a symbol. Light values meet 4.5:1 on
   the light background. */

.shell {
    --state-ok: #4cc38a;
    --state-info: #9db4d3;
    --state-warn: #e3b04b;
    --state-partial: #ec8a4d;
    --state-bad: #ef6b6b;
}

.shell.theme-light {
    --state-ok: #1d7a52;
    --state-info: #3d5a80;
    --state-warn: #8a5a00;
    --state-partial: #9a4a12;
    --state-bad: #a32626;
}

.status-overall {
    margin: 0 0 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.status-overall--operational .status-symbol,
.status-state--operational {
    color: var(--state-ok);
}

.status-overall--maintenance .status-symbol,
.status-state--maintenance {
    color: var(--state-info);
}

.status-overall--degraded .status-symbol,
.status-state--degraded {
    color: var(--state-warn);
}

.status-overall--partial_outage .status-symbol,
.status-state--partial_outage {
    color: var(--state-partial);
}

.status-overall--major_outage .status-symbol,
.status-state--major_outage {
    color: var(--state-bad);
}

.status-table {
    width: 100%;
    max-width: 46rem;
    border-collapse: collapse;
}

.status-table th,
.status-table td {
    padding: 0.8rem 0.5rem 0.8rem 0;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--line);
}

.status-table thead th {
    font: 600 0.72rem/1.4 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border-top: 0;
}

.status-state {
    font: 600 0.85rem/1.4 var(--font-mono);
}

.status-message {
    display: block;
    margin-top: 0.3rem;
    color: var(--ink-muted);
    font-size: 0.92rem;
}

/* --- Forms (stage 3): a calm work surface, one question after another ---------- */

.shell {
    --field-bg: #1b1b1b;
    --field-line: rgba(159, 176, 198, 0.32);
}

.shell.theme-light {
    --field-bg: #ffffff;
    --field-line: rgba(21, 21, 21, 0.24);
}

.dnt-form {
    max-width: 46rem;
}

.form-step {
    margin: 0 0 2rem;
    padding: 0;
    border: 0;
}

.form-step__title {
    margin: 0 0 1rem;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 650;
}

.field {
    margin: 0 0 1.4rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.field__label {
    display: block;
    margin: 0 0 0.35rem;
    padding: 0;
    font-weight: 600;
}

.field__optional {
    font-weight: 400;
    color: var(--ink-muted);
    font-size: 0.9em;
}

.field__help {
    margin: 0 0 0.5rem;
    color: var(--ink-muted);
    font-size: 0.92rem;
}

.dnt-form input[type="text"],
.dnt-form input[type="email"],
.dnt-form input[type="url"],
.dnt-form input[type="tel"],
.dnt-form input[type="date"],
.dnt-form textarea {
    display: block;
    width: 100%;
    padding: 0.7rem 0.8rem;
    font: inherit;
    color: var(--ink);
    background: var(--field-bg);
    border: 1px solid var(--field-line);
    border-radius: 6px;
}

.dnt-form textarea {
    resize: vertical;
    line-height: 1.5;
}

.dnt-form input:focus-visible,
.dnt-form textarea:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--accent);
}

.field__options {
    display: grid;
    gap: 0.4rem;
}

.field__option,
.field__check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    line-height: 1.4;
}

.field__option input,
.field__check input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.15rem 0 0;
    flex: none;
    accent-color: var(--accent);
}

.field__option-help {
    display: block;
    color: var(--ink-muted);
    font-size: 0.9rem;
}

.field--multi .field__options {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* An error is marked by text and a bar, not by colour alone. */
.field.has-error {
    padding-left: 0.9rem;
    border-left: 3px solid var(--state-bad);
}

.field__error {
    margin: 0.4rem 0 0;
    font-weight: 600;
    color: var(--state-bad);
}

.field__error::before {
    content: "! ";
    content: "! " / "";
}

.form-errors,
.form-notice {
    margin: 0 0 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--state-bad);
    border-radius: 6px;
}

.form-errors p {
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.form-errors ul {
    margin: 0;
    padding-left: 1.2rem;
}

.form-errors a {
    color: var(--ink);
}

.form-note {
    max-width: 46rem;
    color: var(--ink-muted);
    font-size: 0.92rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}

.form-actions .button {
    cursor: pointer;
}

/* The trap for robots: off screen and out of the tab order; people never meet it. */
.form-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-sent {
    max-width: 46rem;
    padding: 1.5rem 0 0;
}

.form-sent:focus {
    outline: none;
}

.form-sent__title {
    margin: 0 0 1rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.form-sent__reference span {
    display: block;
    font: 600 0.75rem/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.form-sent__reference strong {
    font: 600 1.5rem/1.3 var(--font-mono);
    color: var(--accent);
}

/* --- Ways in (contact page) ------------------------------------------------------ */

.routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--line);
    border: 1px solid var(--line);
}

.route {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    padding: 1.1rem 1.2rem 1.3rem;
    color: var(--ink);
    text-decoration: none;
    background: var(--night-0);
}

.route:hover .route__name {
    color: var(--accent);
}

.route:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.route__name {
    font-weight: 650;
}

.route__text {
    color: var(--ink-muted);
    font-size: 0.92rem;
}

/* --- Collections (stage 4): system fragments, filters, entry pages -------------- */

/* Each fragment carries its own frame, so any number of them leaves no empty
   cell (a shared background behind 1px gaps showed one when a row was short). */
.fragments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fragment {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: 100%;
    padding: 1.1rem 1.2rem 1.3rem;
    color: var(--ink);
    text-decoration: none;
    background: var(--night-0);
    border: 1px solid var(--line);
}

.fragment:hover {
    border-color: var(--accent);
}

.fragment:hover .fragment__title {
    color: var(--accent);
}

.fragment:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.fragment__labels {
    font: 600 0.7rem/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    color: var(--accent);
}

.fragment__title {
    font-weight: 650;
    font-size: 1.1rem;
}

.fragment__summary {
    color: var(--ink-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.fragment__date {
    margin-top: auto;
    font: 0.75rem/1.4 var(--font-mono);
    color: var(--ink-muted);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1rem;
}

.chips__label {
    margin-right: 0.4rem;
    font: 600 0.72rem/1.4 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.chip {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    color: var(--ink-muted);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 999px;
}

.chip:hover {
    color: var(--ink);
    border-color: var(--accent);
}

.chip[aria-current="true"] {
    color: var(--night-0);
    background: var(--accent);
    border-color: var(--accent);
}

.chip__count {
    font-family: var(--font-mono);
    font-size: 0.75em;
    opacity: 0.8;
}

.chip:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.deep {
    padding: 0 1.1rem 0.5rem;
}

.deep__step {
    margin: 1.25rem 0 0.4rem;
    font: 600 0.78rem/1.4 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.code {
    margin: 1.5rem 0 0.5rem;
}

.code pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font: 0.82rem/1.5 var(--font-mono);
    background: var(--field-bg);
    border: 1px solid var(--line);
}

.code figcaption {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.article {
    max-width: 44rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

.article__heading {
    margin: 2rem 0 0.75rem;
    font-size: 1.35rem;
}

.back-link {
    margin: 2.5rem 0 0;
}

.columns--teasers {
    padding: 2.25rem 0;
    border-top: 1px solid var(--line);
}

.tech-list--links a {
    color: var(--ink);
    text-decoration: none;
}

.tech-list--links a:hover {
    color: var(--accent);
}

/* --- Search page (stage 5) --------------------------------------------------------- */

.search-form {
    max-width: 46rem;
    margin: 0 0 1.25rem;
}

.search-form__row {
    display: flex;
    gap: 0.5rem;
}

.search-form__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.7rem 0.8rem;
    font: inherit;
    color: var(--ink);
    background: var(--field-bg);
    border: 1px solid var(--field-line);
    border-radius: 6px;
}

.search-form__input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--accent);
}

.search-count {
    margin: 0 0 1.5rem;
    font: 0.85rem/1.4 var(--font-mono);
    color: var(--ink-muted);
}

.search-group {
    max-width: 46rem;
    margin: 0 0 2rem;
}

.search-group__title {
    margin: 0 0 0.6rem;
    font: 600 0.78rem/1.4 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.search-group__count {
    font-weight: 400;
}

.search-results {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.search-results li {
    border-bottom: 1px solid var(--line);
}

.search-result {
    display: block;
    padding: 0.85rem 0;
    color: var(--ink);
    text-decoration: none;
}

.search-result:hover .search-result__title {
    color: var(--accent);
}

.search-result:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.search-result__title {
    display: block;
    font-weight: 600;
}

.search-result__summary {
    display: block;
    margin-top: 0.2rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.search-try {
    margin-top: 1rem;
}

/* --- "Bring us the problem" builder (stage 6) ------------------------------------ */

.builder {
    margin: 0;
}

.builder__cases {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.builder__case {
    padding: 1.75rem;
    background: rgba(10, 11, 12, 0.6);
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
}

.theme-light .builder__case {
    background: rgba(255, 255, 255, 0.75);
}

.builder__case[hidden] {
    display: none;
}

.builder__problem {
    margin: 0 0 1.5rem;
    font-size: 1.2rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.builder__areas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hair);
}

/* With room, the system on the left and the areas it touches beside it. */
@media (min-width: 1100px) {
    .builder.is-picker .builder__case:not([hidden]) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 13rem);
        gap: 2rem;
        align-items: start;
    }

    .builder.is-picker .builder__areas {
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 0 0 0 1.5rem;
        border-top: 0;
        border-left: 1px solid var(--hair);
    }

    .builder.is-picker .builder__areas .chips__label {
        margin: 0 0 0.5rem;
    }

    /* The flow and its areas side by side, the signal trace under both. */
    .builder.is-picker .builder__case > .flow {
        grid-column: 1;
        grid-row: 1;
    }

    .builder.is-picker .builder__case > .builder__areas {
        grid-column: 2;
        grid-row: 1;
    }

    .builder.is-picker .builder__case > .sig-code {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 0.25rem;
    }
}

.chip--static {
    color: var(--ink-muted);
}

.builder__own {
    margin: 0.75rem 0 0;
}

/* With the script: the problems on the left, the system it becomes on the right. */
.builder.is-picker {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0 1.25rem;
    align-items: start;
}

.builder.is-picker > .builder__picker {
    grid-row: 1 / span 3;
}

.builder.is-picker > .builder__cases,
.builder.is-picker > .illustrative,
.builder.is-picker > .builder__own {
    grid-column: 2;
}

.builder__picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    counter-reset: choice;
}

.builder__choice {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    font: inherit;
    font-size: 1.02rem;
    line-height: 1.4;
    text-align: left;
    color: var(--ink-muted);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.builder__choice::before {
    counter-increment: choice;
    content: counter(choice, decimal-leading-zero);
    font: 600 0.72rem/1 var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

.builder__choice:hover {
    color: var(--ink);
    border-color: var(--hair-strong);
}

.builder__choice[aria-pressed="true"] {
    color: var(--ink);
    background: var(--accent-soft);
    border-color: rgba(58, 143, 208, 0.6);
    box-shadow: inset 3px 0 0 var(--accent);
}

.builder__choice[aria-pressed="true"]::before {
    color: var(--accent);
}

.builder__choice:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* The chosen problem is the pressed button; its heading stays for screen readers. */
.builder.is-picker .builder__problem {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .builder.is-picker {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .builder.is-picker > .builder__picker,
    .builder.is-picker > .builder__cases,
    .builder.is-picker > .illustrative,
    .builder.is-picker > .builder__own {
        grid-row: auto;
        grid-column: auto;
    }
}

/* The system is built one step at a time - with mass: quick out, settling in. */
@media (prefers-reduced-motion: no-preference) {
    .builder__case.is-building .builder__areas {
        animation: builder-step 0.45s var(--ease-mass) 0.9s both;
    }

    .builder__case.is-building .flow__step {
        animation: builder-step 0.45s var(--ease-mass) both;
    }

    .builder__case.is-building .flow__step:nth-child(2) { animation-delay: 0.12s; }
    .builder__case.is-building .flow__step:nth-child(3) { animation-delay: 0.24s; }
    .builder__case.is-building .flow__step:nth-child(4) { animation-delay: 0.36s; }
    .builder__case.is-building .flow__step:nth-child(5) { animation-delay: 0.48s; }
    .builder__case.is-building .flow__step:nth-child(6) { animation-delay: 0.60s; }
    .builder__case.is-building .flow__step:nth-child(7) { animation-delay: 0.72s; }
    .builder__case.is-building .flow__step:nth-child(n + 8) { animation-delay: 0.84s; }
}

@keyframes builder-step {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --- Effects (redesign, part 2: "graphically much wilder", owner 2026-10-22) ------ */
/* Everything that hides something first is scoped to html.js-motion, which
   motion.js sets only when motion is allowed - without it, or under reduced
   motion, every element simply stands in place. */

/* Rise into place while scrolling in. */
.js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease-mass), transform 0.9s var(--ease-mass);
}

.js-motion [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* Siblings arrive one after another. */
.js-motion .fit-panels > :nth-child(2) { transition-delay: 0.08s; }

/* The drawings draw themselves: outlines first, then the fills and nodes,
   then the signals start. A machine's parts slide home. */
.js-motion [data-reveal] .ill .g-line:not(.g-dash),
.js-motion [data-reveal] .ill .g-strong,
.js-motion [data-reveal] .ill .g-accent,
.js-motion [data-reveal] .ill .g-soft:not(.g-dash) {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    transition: stroke-dashoffset 2.4s var(--ease-mass) 0.3s, fill-opacity 1s ease 1.4s;
}

.js-motion [data-reveal]:not(.is-in) .ill .g-accent {
    fill-opacity: 0;
}

.js-motion [data-reveal].is-in .ill .g-line,
.js-motion [data-reveal].is-in .ill .g-strong,
.js-motion [data-reveal].is-in .ill .g-accent,
.js-motion [data-reveal].is-in .ill .g-soft {
    stroke-dashoffset: 0;
}

.js-motion [data-reveal] .ill .g-node,
.js-motion [data-reveal] .ill .g-fill,
.js-motion [data-reveal] .ill .g-soft-fill,
.js-motion [data-reveal] .ill .g-label,
.js-motion [data-reveal] .ill .g-dash,
.js-motion [data-reveal] .ill .g-grid {
    opacity: 0;
    transition: opacity 0.8s ease 1.3s;
}

.js-motion [data-reveal] .ill .g-flow {
    opacity: 0;
    transition: opacity 0.6s ease 2.2s;
}

.js-motion [data-reveal].is-in .ill .g-node,
.js-motion [data-reveal].is-in .ill .g-fill,
.js-motion [data-reveal].is-in .ill .g-soft-fill,
.js-motion [data-reveal].is-in .ill .g-label,
.js-motion [data-reveal].is-in .ill .g-dash,
.js-motion [data-reveal].is-in .ill .g-grid,
.js-motion [data-reveal].is-in .ill .g-flow {
    opacity: 1;
}

.js-motion [data-reveal] .ill .g-part {
    transition: transform 1.8s var(--ease-mass) 0.7s;
}

.js-motion [data-reveal]:not(.is-in) .ill .g-part--left {
    transform: translateX(-36px);
}

.js-motion [data-reveal]:not(.is-in) .ill .g-part--right {
    transform: translateX(36px);
}

/* A statement lights up word by word as it passes the middle of the screen. */
/* Not yet lit, the words stay readable: at least 3:1 for text this large
   (WCAG 1.4.3), so a reader who stops halfway is never left with ghosts. */
.js-motion [data-words] .word {
    color: rgba(219, 230, 255, 0.44);
    transition: color 0.35s ease;
}

.js-motion [data-words] .word.is-lit {
    color: var(--ink);
}

.js-motion .theme-light [data-words] .word:not(.is-lit) {
    color: rgba(21, 21, 21, 0.5);
}


/* --- Panels that light up under the pointer ------------------------------------- */

/* A soft light under the pointer on the closing panel. */
.cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(58, 143, 208, 0.15), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cta-panel:hover::before {
    opacity: 1;
}

/* The drafting sheet: its grid lights up around the pointer. */
.band--drafting::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(58, 143, 208, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 143, 208, 0.4) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), #000 0%, transparent 75%);
    mask-image: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), #000 0%, transparent 75%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.band--drafting:hover::before {
    opacity: 1;
}

/* The lit grid stays beneath the text. */
.band--drafting > .wrap {
    position: relative;
    z-index: 1;
}

/* --- The front page arriving --------------------------------------------------- */

.js-motion .hero--home .page-eyebrow,
.js-motion .hero--home .page-title,
.js-motion .hero--home .page-lead,
.js-motion .hero--home .page-actions {
    animation: hero-in 1s var(--ease-mass) both;
}

.js-motion .hero--home .page-title { animation-delay: 0.08s; }
.js-motion .hero--home .page-lead { animation-delay: 0.22s; }
.js-motion .hero--home .page-actions { animation-delay: 0.34s; }

@keyframes hero-in {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --- Instrument pages (redesign, part 3): the remaining pages in the same class --- */

/* A sheet of numbered items between hairlines - the catalogue layout of the
   parts, for lists that are not parts. Every item draws its own left rule;
   the sheet clips the first in each row, whatever the number of columns. */
.sheet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border-top: 1px solid var(--hair-strong);
}

.sheet--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sheet__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-left: -1px;
    padding: 1.6rem 1.75rem 1.9rem;
    border-left: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    transition: background-color 0.4s ease;
}

.sheet__fig {
    margin: 0;
    font: 600 0.72rem/1 var(--font-mono);
    letter-spacing: 0.1em;
    color: var(--accent);
}

.sheet__name {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.012em;
}

.sheet__text {
    margin: 0;
    color: var(--ink-muted);
    line-height: 1.6;
}

.sheet__link {
    color: var(--ink);
    text-decoration: none;
}

/* A linked item is a link as a whole. */
.sheet__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.sheet__link:focus-visible {
    outline: none;
}

.sheet__item:has(.sheet__link:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.sheet__item:has(.sheet__link):hover {
    background-color: rgba(58, 143, 208, 0.05);
}

.sheet__go {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--accent);
}

.sheet__go .icon {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.3s var(--ease-mass);
}

.sheet__item:hover .sheet__go .icon {
    transform: translateX(4px);
}

@media (max-width: 980px) {
    .sheet--3,
    .sheet--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .sheet,
    .sheet--2,
    .sheet--3,
    .sheet--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .sheet__item {
        padding: 1.35rem 1.25rem 1.5rem;
    }
}

/* --- A process, run beneath like a program (signals.js) ------------------------- */

.process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border-top: 1px solid var(--hair-strong);
}

.process__step {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-left: -1px;
    padding: 1.5rem 1.4rem 1.6rem;
    border-left: 1px solid var(--hair);
    transition: background-color 1.6s ease;
}

.process__n {
    font: 600 0.72rem/1 var(--font-mono);
    letter-spacing: 0.1em;
    color: var(--accent);
    transition: color 1.6s ease;
}

.process__name {
    font-size: clamp(1.25rem, 1.9vw, 1.55rem);
    font-weight: 650;
    letter-spacing: -0.015em;
}

.process__text {
    color: var(--ink-muted);
    line-height: 1.55;
}

/* Lit for a moment as its line runs. */
.process__step.is-hit {
    background-color: rgba(58, 143, 208, 0.09);
    transition-duration: 0.08s;
}

.process__step.is-hit .process__n {
    color: #eaf4ff;
    transition-duration: 0.08s;
}

.theme-light .process__step.is-hit .process__n {
    color: #151515;
}

/* --- Lists with a mark before each line ------------------------------------------ */

.checks-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 4rem);
}

.checks__label {
    margin: 0 0 0.9rem;
    font: 600 0.74rem/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.checks__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hair-strong);
}

.checks__list li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.95rem 0;
    font-size: 1.06rem;
    line-height: 1.45;
    border-bottom: 1px solid var(--hair);
}

.checks__list .icon {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.18rem;
    color: var(--accent);
}

.checks + .checks,
.tags + .checks {
    margin-top: 2rem;
}

@media (max-width: 760px) {
    .checks-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tags--large {
    margin: 0 0 1.5rem;
}

.tags--large .tag {
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
}

/* --- The type plate: the company's facts, engraved in machined aluminium --------- */

.plate {
    position: relative;
    margin: 0;
    padding: 1.9rem 2rem 1.7rem;
    max-width: 30rem;
    color: #232a31;
    border-radius: 10px;
    background:
        /* four screws */
        radial-gradient(circle at 15px 15px, #9aa1a9 0 2.6px, #59616a 3px 4px, rgba(0, 0, 0, 0.25) 4.4px, transparent 5.2px),
        radial-gradient(circle at calc(100% - 15px) 15px, #9aa1a9 0 2.6px, #59616a 3px 4px, rgba(0, 0, 0, 0.25) 4.4px, transparent 5.2px),
        radial-gradient(circle at 15px calc(100% - 15px), #9aa1a9 0 2.6px, #59616a 3px 4px, rgba(0, 0, 0, 0.25) 4.4px, transparent 5.2px),
        radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), #9aa1a9 0 2.6px, #59616a 3px 4px, rgba(0, 0, 0, 0.25) 4.4px, transparent 5.2px),
        /* the light on the metal */
        linear-gradient(112deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.42) 36%, rgba(255, 255, 255, 0) 54%),
        /* brushed */
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, rgba(0, 0, 0, 0.035) 1px 2px),
        linear-gradient(180deg, #ccd2d9 0%, #a9b1ba 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.04),
        0 22px 48px rgba(0, 0, 0, 0.5);
}

.plate__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0 0 1.1rem;
    font: 700 0.86rem/1 var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* An engraved rule under the name. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.28);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* The mark, engraved: its shape cut out of a darker fill. */
.plate__mark {
    width: 26px;
    height: 26px;
    flex: none;
    background: #2a3239;
    -webkit-mask: url("../img/logo-mark-header.svg") no-repeat center / contain;
    mask: url("../img/logo-mark-header.svg") no-repeat center / contain;
}

.plate__facts {
    display: grid;
    gap: 0.7rem;
    margin: 0;
}

.plate__row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
}

.plate__row dt {
    font: 600 0.66rem/1.4 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4a535c;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.plate__row dd {
    margin: 0;
    font: 600 0.95rem/1.4 var(--font-mono);
    overflow-wrap: anywhere;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.plate__line {
    margin: 1.3rem 0 0;
    padding: 1rem 0 0;
    font: 600 0.66rem/1.5 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4a535c;
    border-top: 1px solid rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

@media (max-width: 520px) {
    .plate {
        padding: 1.6rem 1.4rem 1.4rem;
    }

    .plate__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }
}

/* --- Forms in the same class: a work surface beside the type plate --------------- */

.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.form-layout__main > .lead-xl {
    max-width: 44rem;
    margin-bottom: 1.75rem;
}

.form-layout__main > .callout-panel {
    margin-bottom: 1.75rem;
}

.form-layout__side {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 1.25rem;
}

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

    .form-layout__side {
        position: static;
    }
}

.form-panel {
    padding: clamp(1.4rem, 3vw, 2.5rem);
    background: #0e0f10;
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
}

.form-panel .dnt-form,
.form-panel .form-note,
.form-panel .form-sent {
    max-width: none;
}

.form-panel .form-step__title {
    font-size: 1.45rem;
    letter-spacing: -0.01em;
}

.form-panel .field__label {
    margin-bottom: 0.5rem;
    font: 600 0.74rem/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c6d3e6;
}

.form-panel .field__optional {
    text-transform: none;
    letter-spacing: 0;
}

.form-panel input[type="text"],
.form-panel input[type="email"],
.form-panel input[type="url"],
.form-panel input[type="tel"],
.form-panel input[type="date"],
.form-panel textarea {
    padding: 0.95rem 1rem;
    font-size: 1.05rem;
    background: #151617;
    border-color: var(--hair-strong);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-panel input:hover,
.form-panel textarea:hover {
    border-color: rgba(219, 230, 255, 0.28);
}

.form-panel input:focus-visible,
.form-panel textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.theme-light .form-panel {
    background: #ffffff;
}

.theme-light .form-panel input,
.theme-light .form-panel textarea {
    background: #f6f8fb;
}

.theme-light .form-panel .field__label {
    color: #2b3440;
}

/* Something to read before writing. */
.callout-panel {
    padding: 1.4rem 1.6rem;
    background: rgba(58, 143, 208, 0.06);
    border: 1px solid rgba(58, 143, 208, 0.28);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}

.callout-panel p {
    margin: 0 0 0.8rem;
    line-height: 1.6;
}

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

/* --- System status as an instrument readout ---------------------------------------- */

.readout-panel {
    max-width: 56rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: #0e0f10;
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
}

.readout-panel .status-overall {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 2rem;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.015em;
}

/* The state's symbol, large, in its colour; the words carry the meaning. */
.readout-panel .status-overall .status-symbol {
    font-size: 0.8em;
}

.readout-panel .status-table {
    max-width: none;
}

.readout-panel .status-table th,
.readout-panel .status-table td {
    padding: 1rem 0.75rem 1rem 0;
    border-top-color: var(--hair);
}

.readout-panel .status-table tbody th {
    font-size: 1.05rem;
    font-weight: 600;
}

.readout-panel .note {
    margin: 1.5rem 0 0;
}

/* Beside a form the plate is narrow: each fact under its label. */
.form-layout__side .plate {
    padding: 1.6rem 1.5rem 1.4rem;
}

.form-layout__side .plate__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
}

/* --- Collections: system fragments as a catalogue sheet --------------------------- */

.filters {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 2rem;
}

.filters .chips {
    margin: 0;
}

.fragments {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border-top: 1px solid var(--hair-strong);
}

.fragments > li {
    margin-left: -1px;
    border-left: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}

.fragment {
    position: relative;
    gap: 0.55rem;
    padding: 1.5rem 1.6rem 1.8rem;
    background: none;
    border: 0;
    transition: background-color 0.4s ease;
}

.fragment:hover {
    background-color: rgba(58, 143, 208, 0.05);
}

.fragment:hover .fragment__title {
    color: var(--ink);
}

/* The drawing of the area it belongs to. */
.fragment__art {
    display: block;
    margin: 0 0 0.9rem;
    aspect-ratio: 16 / 9;
}

.fragment__art svg {
    display: block;
    width: 100%;
    height: 100%;
}

.fragment__labels {
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fragment__title {
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -0.012em;
}

.fragment__summary {
    font-size: 0.98rem;
    line-height: 1.6;
}

.fragment__go {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    color: var(--accent);
}

.fragment__go .icon {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.3s var(--ease-mass);
}

.fragment:hover .fragment__go .icon {
    transform: translateX(4px);
}

/* With a drawing above, the arrow sits beside the labels instead. */
.fragment__art + .fragment__labels ~ .fragment__go,
.fragment__art ~ .fragment__go {
    top: auto;
    bottom: 1.6rem;
}

@media (max-width: 980px) {
    .fragments {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .fragments {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Entry pages: the technical view as specification rows ----------------------- */

.spec-rows {
    padding: 0 1.5rem 1rem;
}

.spec-row {
    display: grid;
    grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--hair);
}

.spec-row__label {
    display: flex;
    gap: 0.9rem;
    margin: 0;
    font: 600 0.78rem/1.5 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.spec-row__n {
    color: var(--accent);
}

.spec-row__body p {
    margin: 0 0 0.8rem;
    line-height: 1.65;
}

.spec-row__body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .spec-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
}

.band .technical {
    margin: 0;
}

.fit-panel > p {
    margin: 0 0 0.8rem;
    line-height: 1.6;
}

/* An article reads in one comfortable column. */
.reading {
    max-width: 46rem;
}

.reading .article {
    font-size: 1.12rem;
}

.page-body--bands .back-link {
    margin: 0;
    padding: 2.5rem 0 3rem;
}

/* Search: the field large, the results as sheets. */
.band .search-form {
    max-width: 52rem;
}

.search-group {
    margin: 2.5rem 0 0;
}

.search-group__title {
    margin: 0 0 1rem;
    font: 600 0.78rem/1.4 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* --- Legal documents (stage 7): a drawing sheet with its title block -------------- */

/* The document beside its title block and contents; the contents stay in view
   while the text scrolls. */
.band--legal {
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.legal {
    display: grid;
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 46rem);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}

.legal__aside {
    position: sticky;
    top: 5.5rem;
    display: grid;
    gap: 2.25rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* The title block of a technical drawing: what the sheet is, which version,
   since when, and who issued it. Square corners, like the paper. */
.title-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
    background: var(--panel-deep);
    border: 1px solid var(--hair-strong);
}

.title-block__cell {
    margin: -1px 0 0 -1px;
    padding: 0.8rem 0.95rem 0.85rem;
    border-top: 1px solid var(--hair-strong);
    border-left: 1px solid var(--hair-strong);
}

.title-block__cell--document,
.title-block__cell--issuer,
.title-block__cell--date + .title-block__cell--date {
    grid-column: 1 / -1;
}

.title-block dt {
    margin: 0 0 0.4rem;
    font: 600 0.64rem/1.3 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.title-block dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--ink);
}

.title-block__cell--document dd {
    font-size: 1.05rem;
    font-weight: 650;
}

.title-block__cell--version dd {
    font: 600 1.35rem/1.15 var(--font-mono);
    color: var(--accent);
}

/* A draft's block is drawn dashed, and its version is words, not a number. */
.title-block--draft {
    border-style: dashed;
}

.title-block--draft .title-block__cell--version dd {
    font: 600 0.85rem/1.4 var(--font-mono);
}

.legal__toc-title,
.legal__short-title,
.legal__history-title {
    margin: 0 0 0.9rem;
    font: 600 0.74rem/1.4 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.legal__toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--hair-strong);
}

.legal__toc-link {
    display: flex;
    gap: 0.8rem;
    margin-left: -1px;
    padding: 0.42rem 0 0.42rem 1rem;
    border-left: 1px solid transparent;
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--ink-muted);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.legal__toc-link:hover,
.legal__toc-link[aria-current] {
    color: var(--ink);
    border-left-color: var(--accent);
}

.legal__toc-n {
    flex: none;
    font: 600 0.7rem/1.9 var(--font-mono);
    letter-spacing: 0.08em;
    color: var(--accent);
}

.legal__doc {
    font-size: 1.05rem;
    line-height: 1.7;
}

.legal__doc p {
    margin: 0 0 1rem;
}

.legal__doc a {
    color: var(--signal);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* The main points first, on a panel of their own. */
.legal__short {
    margin: 0 0 2.75rem;
    padding: 1.5rem 1.6rem 1.6rem;
    background: var(--panel-deep);
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
}

.legal__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2.25rem;
    margin: 0;
}

/* Each point is marked with a small mitre: the cut of the logo's D. */
.legal__point dt {
    position: relative;
    margin: 0 0 0.3rem;
    padding-left: 1.35rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--ink);
}

.legal__point dt::before {
    content: "";
    position: absolute;
    top: 0.42em;
    left: 0;
    width: 0.6rem;
    height: 0.6rem;
    background: linear-gradient(135deg, var(--accent) 0 50%, transparent 50%);
}

.legal__point dd {
    margin: 0;
    padding-left: 1.35rem;
    font-size: 0.97rem;
    line-height: 1.55;
    color: var(--ink-muted);
}

.legal__section {
    padding: 2.25rem 0 0.75rem;
    border-top: 1px solid var(--hair);
    scroll-margin-top: 5.5rem;
}

.legal__heading {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 1.1rem;
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.legal__n {
    flex: none;
    min-width: 1.75rem;
    font: 600 0.8rem/1 var(--font-mono);
    letter-spacing: 0.1em;
    color: var(--accent);
}

/* The text stands under the heading's words, the number in its own margin. */
.legal__section > :not(.legal__heading) {
    margin-left: 2.75rem;
}

.legal__list {
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0;
    list-style: none;
}

.legal__list li {
    position: relative;
    margin: 0 0 0.55rem;
    padding-left: 1.35rem;
}

.legal__list li::before {
    content: "";
    position: absolute;
    top: 0.85em;
    left: 0.15rem;
    width: 0.55rem;
    height: 1px;
    background: var(--accent);
}

/* A table scrolls on its own when it is wider than a phone. */
.legal__table {
    margin-top: 0.25rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
}

.legal__table:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.legal__table table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.92rem;
    line-height: 1.5;
}

.legal__table th {
    padding: 0.7rem 0.95rem;
    font: 600 0.68rem/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: var(--panel-deep);
    border-bottom: 1px solid var(--hair-strong);
}

.legal__table td {
    padding: 0.8rem 0.95rem;
    vertical-align: top;
    border-top: 1px solid var(--hair);
}

.legal__table tbody tr:first-child td {
    border-top: 0;
}

.legal__table td:first-child {
    font: 0.85rem/1.5 var(--font-mono);
    color: var(--ice);
    white-space: nowrap;
}

/* Reading an earlier version: said first, with the way to the current one. */
.legal__notice {
    margin: 0 0 2rem;
    padding: 1.1rem 1.4rem;
    background: rgba(58, 143, 208, 0.06);
    border: 1px solid rgba(58, 143, 208, 0.28);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    line-height: 1.6;
}

/* Preview only: what still has to be answered before the page can go out.
   Yellow like the other gaps the preview marks (.missing). */
.legal__open {
    margin: 0 0 2rem;
    padding: 0.9rem 1.2rem;
    font: 600 0.82rem/1.5 var(--font-mono);
    color: #1b1300;
    background: #f2c14e;
    border-radius: 4px;
}

.open-point {
    padding: 0.05em 0.3em;
    color: inherit;
    background: rgba(242, 193, 78, 0.16);
    border-bottom: 1px dashed #f2c14e;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.theme-light .open-point {
    background: rgba(242, 193, 78, 0.35);
}

.legal__history {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hair-strong);
}

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

.legal__version {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--hair);
    font-size: 0.95rem;
}

.legal__version-name {
    min-width: 7rem;
    font-family: var(--font-mono);
}

.legal__version.is-shown .legal__version-name {
    color: var(--accent);
}

.legal__version-date {
    color: var(--ink-muted);
}

.legal__version-tag {
    padding: 0.28rem 0.55rem;
    font: 600 0.64rem/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(58, 143, 208, 0.45);
    border-radius: 999px;
}

@media (max-width: 980px) {
    .legal {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal__aside {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 640px) {
    .legal__points {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal__section > :not(.legal__heading) {
        margin-left: 0;
    }

    .legal__doc {
        font-size: 1rem;
    }

    /* On a phone a table becomes one card per row: every value under the
       name of its column (data-label), nothing to scroll sideways. */
    .legal__table table,
    .legal__table tbody,
    .legal__table tr,
    .legal__table td {
        display: block;
        min-width: 0;
    }

    .legal__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .legal__table tr + tr {
        border-top: 1px solid var(--hair-strong);
    }

    .legal__table td {
        padding: 0.55rem 1rem;
        border-top: 0;
    }

    .legal__table td:first-child {
        padding-top: 0.95rem;
        white-space: normal;
    }

    .legal__table td:last-child {
        padding-bottom: 0.95rem;
    }

    .legal__table td::before {
        content: attr(data-label);
        display: block;
        margin: 0 0 0.2rem;
        font: 600 0.62rem/1.4 var(--font-mono);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-muted);
    }
}