:root {
    --max-content-width: 1440px;
    --max-paragraph-width: 60ch;

    --regular: 400;
    --medium: 475;
    --semibold: 500;
    --bold: 550;

    --gap-50: 2px;
    --gap-100: 4px;
    --gap-200: 8px;
    --gap-300: 12px;
    --gap-400: 16px;
    --gap-500: 20px;
    --separator-gap: 1px;

    --radius-100: 1px;
    --radius-200: calc(var(--radius-100) + 1px);
    --radius-050: calc(var(--radius-100) - 1px);

    --paragraph-size: 16px;
    --paragraph-sml-size: 14px;
    --paragraph-lh: 1.5em;

    --margin-main: 2em;
    --margin-content: 2em;

    --mono-100: #000000;
    --mono-200: #4D4D4D;
    --mono-250: #999999;
    --mono-300: #CCCCCC;
    --mono-400: #E5E5E5;
    --mono-500: #FFFFFF;

    --semantic-error-100: #FF0000;
    --semantic-error-200: #FFE5E5;
    --semantic-error-300: #F27979;
    --semantic-error-400: #660000;
    --border-semantic-error: 0 0 0 1px var(--semantic-error-300) inset;

    --semantic-warning-100: #FFAA00;
    --semantic-warning-200: #FFEECC;
    --semantic-warning-300: #FFC34D;
    --semantic-warning-400: #594300;
    --border-semantic-warning: 0 0 0 1px var(--semantic-warning-300) inset;

    --semantic-info-100: #006AFF;
    --semantic-info-200: #E5F0FF;
    --semantic-info-300: #85B3F2;
    --semantic-info-400: #002A66;
    --border-semantic-info: 0 0 0 1px var(--semantic-info-300) inset;

    --semantic-success-100: #00D900;
    --semantic-success-200: #00D900;
    --semantic-success-300: #00D900;

    --nav-shadow-color: #0000000D;

    --app-bg-100: #FFFFFF;
    --app-bg-200: #F7F7F7;

    --announcement-bar-bg: #134031;
    --img-bg: var(--mono-400);
    --img-spinner: var(--mono-100);

    --separator: var(--mono-300);
    --top-separator: 0 1px 0 0 var(--separator) inset;
    --bottom-separator: 0 -1px 0 0 var(--separator) inset;

    --nav-padding: 12px;
    --nav-shadow: 0 1px 0 0 var(--separator), 0 3px 0 0 var(--nav-shadow-color);
    --nav-logo-size: 44px;
    --footer-logo-size: 36px;

    --card-padding: 1.5em;

    --btn-lh: 24px;
    --btn-padding: 16px 24px;
    --audio-btn-padding: 16px 20px;
    --btn-padding-sml: 10px 14px;
    --btn-padding-nano: 8px 12px;
    --btn-icn-padding: 19px;
    --btn-icn-padding-sml: 13px;
    --btn-icn-padding-nano: 7px;
    --btn-primary-default: unset;
    --btn-primary-hover: 0 0 0 2px var(--mono-100) inset, 0 0 0 3px var(--mono-500) inset;
    --btn-primary-active: 0 0 0 2px var(--mono-100) inset, 0 0 0 4px var(--mono-500) inset;
    --btn-secondary-default: 0 0 0 1px var(--separator) inset;
    --btn-secondary-hover: 0 0 0 2px var(--mono-100) inset;
    --btn-secondary-active: 0 0 0 3px var(--mono-100) inset;
    --kb-table-row-padding: 8px;

    --input-lh: 24px;
    --input-padding: 10px 14px;
    --input-padding-nano: 4px 8px;
    --input-default: 0 0 0 1px var(--separator) inset;
    --input-focus: 0 0 0 2px var(--semantic-info-100) inset;
    --input-error-default: 0 0 0 1px var(--semantic-error-100) inset;
    --input-error-focus: 0 0 0 2px var(--semantic-error-100) inset;

    --tag-padding: 2px 6px;

    --global-focus: 0 0 0 2px #FF8000, 0 0 0 6px #FF800066;

    --table-default-bg: var(--app-bg-200);
    --table-hover-bg: var(--mono-400);
    --table-selected-bg: var(--mono-400);

    --opacity: 0.6;
}

@media (max-width: 860px) {
    :root {
        --max-content-width: 1440px;
        --max-paragraph-width: unset;

        --paragraph-size: 16px;
        --paragraph-sml-size: 14px;
        --paragraph-lh: 1.5em;

        --margin-main: 0em;
        --margin-content: 1em;

        --card-padding: 1em;

        --nav-logo-size: 40px;
        --footer-logo-size: 36px;

        --nav-padding: 12px;
    }
}
@font-face {
    font-family: "GoogleSans";
    src: url("/assets/typography/GoogleSansFlex-subset-400-550.woff2") format('woff2');
    font-display: swap;
    font-weight: 400 550;
    font-style: normal;
}

@font-face {
    font-family: "GoogleSansCode";
    src: url("/assets/typography/GoogleSansCode-subset-400-550.woff2") format('woff2');
    font-display: swap;
    font-weight: 400 550;
    font-style: normal;
}

/* global */
html,
body {
    font-family: "GoogleSans", serif, monospace;

    font-weight: var(--regular);
    font-size: var(--paragraph-size);
    line-height: var(--paragraph-lh);
    color: var(--mono-200);

    text-underline-position: from-font;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    /* font-variation-settings: 'opsz' 16; */
}

@media (orientation: landscape) {

    html,
    body {
        -webkit-text-size-adjust: 100%;
    }
}

* {
    scroll-margin-top: 12em;
}

h1,
h2,
h3,
h4 {
    width: fit-content;
    text-wrap: pretty;
    font-weight: var(--semibold);
    margin-top: 1.5em;
    margin-bottom: 0.25em;
}

h1 {
    font-weight: var(--bold);
    font-size: 38px;
    line-height: 1.15em;
    max-width: calc(var(--max-paragraph-width) / 2.25);
    color: var(--mono-100);

    & a {
        font-weight: var(--regular);
    }
}

h2 {
    font-weight: var(--regular);
    font-size: 26px;
    line-height: 1.25em;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: calc(var(--max-paragraph-width) / 1.5);
}

h3 {
    font-size: 22px;
    line-height: 1.25em;
    max-width: calc(var(--max-paragraph-width) / 1.5);
    color: var(--mono-100);

    & a {
        font-weight: var(--regular);
    }
}

h4 {
    font-size: 18px;
    line-height: 1.25em;
    max-width: calc(var(--max-paragraph-width) / 1.5);
    color: var(--mono-100);
}

@media (max-width: 860px) {
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }
}

p,
small,
strong {
    max-width: var(--max-paragraph-width);
    width: fit-content;
    text-wrap: pretty;
    white-space: pre-wrap;
}

p {
    line-height: var(--paragraph-lh);
    margin-top: 1em;
    margin-bottom: 1em;
}

strong {
    font-size: inherit;
    line-height: inherit;
    font-weight: var(--medium);
    color: var(--mono-100);
}

small,
label {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 60ch;
    color: inherit;
}

small {
    font-weight: var(--regular);
    font-size: var(--paragraph-sml-size);
    line-height: var(--paragraph-lh);
}

p.error,
small.error {
    display: none;
    flex-direction: row;
    color: var(--semantic-error-100);
    font-weight: var(--regular);
    gap: var(--gap-100);
}

label {
    font-weight: var(--medium);
    font-size: var(--paragraph-size);
    line-height: var(--paragraph-lh);
    color: var(--mono-100);
    pointer-events: none;
}

span {
    display: inline-flex;
    height: fit-content;
}
.debug {
    background: rgba(255, 0, 0, 0.1) !important;
}

.flex {
    display: flex;
    background: rgba(255, 0, 0, 0.1) !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    touch-action: manipulation !important;
    /* The browser's grey tap overlay paints behind images, so on a card it
       only appeared under the text — inconsistent, and never asked for. */
    -webkit-tap-highlight-color: transparent;
}

/* Honeypot form field */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body,
html {
    background-color: var(--app-bg-200);
}

body {
    display: flex;
    flex-direction: column;
}

section,
header,
footer,
nav {
    display: flex;
    flex-direction: column;
    padding-inline: var(--margin-main);

    /* display: flex is an author rule and beats the browser's own
       [hidden] { display: none }, so hidden has to be spelled out. */
    &[hidden] {
        display: none;
    }
}

.content {
    display: flex;
    flex-direction: column;
    max-width: var(--max-content-width);
    padding-inline: var(--margin-content);
    position: relative;
    align-self: center;
    width: 100%;
}

header {
    margin: var(--margin-content) 0;
}

section {
    margin: 2em 0 var(--margin-content) 0;
}

main {
    display: flex;
    flex-direction: column;
}

nav {
    display: flex;
    flex-direction: column;
    padding: 0;

    position: sticky;
    top: 0;
    inset-inline: 0;
    z-index: 1000;

    box-shadow: var(--nav-shadow);

    & .announcement-bar {
        display: flex;
        flex-direction: column;

        padding: 8px var(--margin-main);
        background: var(--announcement-bar-bg);
        color: var(--mono-500);

        & small {
            max-width: unset;
            text-align: center;
            align-self: center;
        }
    }

    & .breadcrumbs {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 10;

        & .content {
            flex-direction: row;
            align-items: center;
        }

        padding: 8px var(--margin-main);
        background: var(--app-bg-100);

        box-shadow: var(--top-separator);

        & small {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            direction: rtl;
            text-align: left;

            line-height: unset;

            &:first-of-type {
                margin-right: 12px;
                margin-right: auto;
            }
        }
    }

    & .navigation {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 20;

        padding: var(--nav-padding) var(--margin-main);
        background: var(--app-bg-100);

        & .primary-frame {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: var(--gap-300);

            & .language-picker {
                gap: var(--gap-100);
            }

            & .logo {
                color: var(--mono-100);
                margin-right: auto;

                & svg {
                    height: var(--nav-logo-size);
                    width: auto;
                }
            }

            & .quote-btn {
                & span[data-state="off"] {
                    display: inline-flex;
                }

                & span[data-state="on"] {
                    display: none;
                }

                &.active {
                    & span[data-state="off"] {
                        display: none;
                    }

                    & span[data-state="on"] {
                        display: inline-flex;
                    }
                }
            }

            & .menu-btn {
                display: none;

                & span[data-state="off"] {
                    display: none;
                }

                & span[data-state="on"] {
                    display: inline-flex;
                }

                &[aria-expanded='true'] span[data-state="off"] {
                    display: inline-flex;
                }

                &[aria-expanded='true'] span[data-state="on"] {
                    display: none;
                }
            }
        }

        & .secondary-frame {
            display: none;
            flex-direction: column;

            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            z-index: 30;

            background: var(--app-bg-100);
            box-shadow: var(--nav-shadow);
            padding: 0 var(--margin-main);

            & .standard-links-frame,
            & .social-links-frame,
            & .language-picker-frame {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: var(--gap-100);
                margin: 1em 0;
            }

            & .standard-links-frame {
                font-size: larger;
                line-height: var(--paragraph-lh);
            }

            &.active {
                display: flex;
            }
        }
    }
}

@media (max-width: 860px) {
    nav {
        & .navigation {
            & .primary-frame {
                & [data-group="desktop-nav"] {
                    display: none;
                }

                & .menu-btn {
                    display: flex;
                }
            }
        }
    }
}

/* @media (max-width: 860px) and (orientation: landscape) {
    nav {
        & .navigation {
            & .primary-frame {
                & [data-group="desktop-nav"] {
                    display: flex;
                }

                & .menu-btn {
                    display: none;
                }
            }
        }
    }
} */

footer {
    padding-top: var(--margin-content);
    padding-bottom: calc(var(--margin-content) * 2);
    box-shadow: var(--top-separator);

    & .nav-block {
        display: flex;
        flex-direction: column;
        margin: 1em 0em;
    }

    & .logo {
        margin-right: auto;

        & svg {
            height: var(--footer-logo-size);
            width: auto;
        }
    }
}

svg,
svg * {
    display: inline-block;
    flex-shrink: 0;
    flex-grow: 0;

    color: currentColor;
    fill: currentColor;
}

.mt0 {
    margin-top: 0 !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.txt-center {
    text-align: center;
}

.txt-right {
    text-align: right;
}

.txt-left {
    text-align: left;
}

.spacer-2em {
    height: var(--margin-content);
}

/* Controls row for a horizontal scroller: indicator left, step arrows right.
   Wired up by createPagination(). Whoever uses it decides when it shows, so
   the visibility rules live with the host, not here. */
.pagination-controls {
    /* Only shown where the strip actually scrolls, which is mobile. */
    display: none;

    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-200);
    padding-inline: var(--margin-content);

    /* One dash per item, the current one wider and black. */
    & .pagination-indicator {
        display: flex;
        justify-content: center;
        gap: var(--gap-100);

        & span {
            display: block;
            width: 18px;
            height: 18px;
            border-radius: var(--radius-100);
            /* background: var(--mono-300); */
            box-shadow: var(--btn-secondary-default);
            /* transition: width 0.2s ease-in-out, background 0.2s ease-in-out; */

            /* The checkmark belongs to the pick, not to where you are, so it
               is hidden until the dash's card is actually selected. */
            & svg {
                display: none;
            }

            /* The dash of a card that is picked, wherever the strip is. */
            &.is-selected {
                color: var(--mono-250);

                & svg {
                    display: block;
                }
            }

            &.is-active {
                background: var(--mono-100);
                color: var(--mono-500);
                box-shadow: unset;
            }
        }
    }

    & .arrows {
        display: flex;
        flex-direction: row;
        gap: var(--gap-100);
    }
}

@media (max-width: 860px) {
    .pagination-controls:not([hidden]) {
        display: flex;
    }
}

/* Product names (PMO—02—S—XLR) are one word — the em dashes must not
   become line break opportunities. Applied by keepProductNamesWhole().

   display: inline is required. Spans default to inline-flex here, which makes
   them atomic inline boxes, and text-decoration from an ancestor does not
   propagate into those — a product name inside a link would keep its own
   underline off while the surrounding text underlined. */
.nowrap {
    display: inline;
    white-space: nowrap;
}

.fotmt0 {
    & p:first-of-type {
        margin-top: 0 !important;
    }
}

.lotmt0 {
    & p:last-of-type {
        margin-top: 0 !important;
    }
}

.fotmb0 {
    & p:first-of-type {
        margin-bottom: 0 !important;
    }
}

.lotmb0 {
    & p:last-of-type {
        margin-bottom: 0 !important;
    }
}

.ns {
    user-select: none;
    -webkit-user-select: none;
}

.sv {
    width: 1px;
    min-height: 100%;
    align-self: stretch;
    background: var(--separator);
}

.sh {
    height: 1px;
    min-width: 100%;
    background: var(--separator);
}

.monospaced {
    font-family: "GoogleSansCode";
    font-weight: var(--regular);
}

a,
button,
summary {
    &:focus-visible {
        &::after {
            content: '';
            position: absolute;
            top: -1px;
            bottom: -1px;
            left: -1px;
            right: -1px;
            box-shadow: var(--global-focus);
            border-radius: var(--radius-200);
            z-index: 900;
        }
    }
}

.spinner {
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;

    position: absolute;

    width: fit-content;
    height: fit-content;

    & svg {
        color: currentColor;
        fill: currentColor;
        animation: spinner-rotation 0.560s ease-in-out infinite;
    }
}

@keyframes spinner-rotation {
    to {
        transform: rotate(360deg);
    }
}

a,
button,
input,
textarea {
    all: unset;
    cursor: pointer;
    width: fit-content;
    height: fit-content;
}

a,
button {
    position: relative;

    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-200);

    & svg,
    & svg * {
        color: currentColor;
        fill: currentColor;
        flex: 0 0 auto;
    }

    &:disabled {
        text-decoration: line-through;
        cursor: not-allowed;
    }

    &.link {
        font-weight: var(--medium);
        text-decoration: underline;
        color: var(--mono-100);

        &.toggle.active {
            text-decoration: line-through;
        }

        &:active {
            opacity: var(--opacity);
        }

        &.sml {
            font-size: var(--paragraph-sml-size);
        }
    }

    &.btn-primary,
    &.btn-secondary,
    &.btn-icn-primary,
    &.btn-icn-secondary,
    &.btn-nav-toggle,
    &.btn-icn-nav-toggle {
        font-weight: var(--medium);
        line-height: var(--btn-lh);

        border-radius: var(--radius-100);
        margin: 1em 0em;

        user-select: none;
        -webkit-user-select: none;

        & .spinner {
            display: none;
            position: unset;

            & svg {
                animation-play-state: paused;
            }
        }

        &.is-loading {
            & .quote-icon {
                display: none;
            }

            .spinner {
                display: flex;

                & svg {
                    animation-play-state: running;
                }
            }
        }

        & .quote-icon {
            display: inline-flex;
        }

        &[data-state="out"] span.quote-icon[data-state="on"] {
            display: none;
        }

        &[data-state="in"] span.quote-icon[data-state="off"] {
            display: none;
        }

        &.ghost {
            box-shadow: unset;
            color: var(--mono-100);
            background: var(--mono-400);
        }

        &.invisible {
            box-shadow: unset;
            color: var(--mono-100);
            padding: 0 !important;
        }
    }

    &.btn-primary,
    &.btn-secondary,
    &.btn-nav-toggle {
        padding: var(--btn-padding);

        &.sml {
            padding: var(--btn-padding-sml);
        }

        &.nano {
            padding: var(--btn-padding-nano);
        }
    }

    &.btn-icn-primary,
    &.btn-icn-secondary,
    &.btn-icn-nav-toggle {
        padding: var(--btn-icn-padding);

        &.sml {
            padding: var(--btn-icn-padding-sml);
        }

        &.nano {
            padding: var(--btn-icn-padding-nano);
        }
    }

    &.btn-primary,
    &.btn-icn-primary {
        background: var(--mono-100);
        color: var(--mono-500);

        &:disabled {
            background: var(--mono-400);
            color: var(--mono-200);
        }
    }

    &.btn-secondary,
    &.btn-icn-secondary,
    &.btn-icn-nav-toggle {
        color: var(--mono-100);
        box-shadow: var(--btn-secondary-default);

        &:disabled {
            color: var(--mono-250);
        }
    }

    /* Picked out of a set of options — the choice is made, so it reads like
       the primary button. */
    &.btn-secondary.active {
        background: var(--mono-100);
        color: var(--mono-500);
        box-shadow: unset;
    }

    /* Currently on: the page you are on, or the menu you have open. Nothing
       was chosen, so it only outlines. */
    &.btn-nav-toggle,
    &.btn-icn-nav-toggle {
        color: var(--mono-100);

        &.active {
            /* background: var(--mono-400); */
            box-shadow: var(--btn-secondary-hover);
        }
    }

    & .ripple {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: var(--semantic-info-100);
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        pointer-events: none;
        z-index: 10000;
    }

    & .ripple.is-animating {
        animation: ripplePulse 520ms ease-out 1;
    }
}

@keyframes ripplePulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

a.ng {
    gap: unset;
}

@media (hover: hover) and (pointer: fine) {

    a,
    button {

        &.btn-primary,
        &.btn-icn-primary {
            &:hover:not([disabled]) {
                box-shadow: var(--btn-primary-hover);
            }

            &:active:not([disabled]) {
                box-shadow: var(--btn-primary-active);
            }
        }

        &.btn-secondary,
        &.btn-icn-secondary,
        &.btn-nav-toggle,
        &.btn-icn-nav-toggle {
            &:hover:not([disabled], .invisible, .ghost) {
                box-shadow: var(--btn-secondary-hover);
            }

            &:active:not([disabled], .invisible, .ghost) {
                box-shadow: var(--btn-secondary-active);
            }

            &.ghost:hover:not([disabled]) {
                background: var(--mono-300);
            }

            &.invisible:active:not([disabled]),
            &.ghost:active:not([disabled]) {
                opacity: var(--opacity);
            }
        }
    }
}

input,
textarea,
select {
    all: unset;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;

    box-shadow: var(--input-default);
    border-radius: var(--radius-100);

    background: var(--mono-500);
    color: var(--mono-100);

    &.input-error {
        box-shadow: var(--input-error-default);
        background: var(--semantic-error-200);
        color: var(--semantic-error-400);
    }

    &:focus {
        box-shadow: var(--input-focus);

        &.input-error {
            box-shadow: var(--input-error-focus);
        }
    }

    &:disabled {
        box-shadow: none;
        background: var(--mono-400);
        color: var(--mono-200);
        cursor: not-allowed;
    }

    &::placeholder {
        color: var(--mono-200);
        opacity: 1;
    }

    &::-webkit-input-placeholder {
        color: var(--mono-200);
    }

    &::-moz-placeholder {
        color: var(--mono-200);
        opacity: 1;
    }

    &:-ms-input-placeholder,
    &::-ms-input-placeholder {
        color: var(--mono-200);
    }

    &.input-error::placeholder {
        color: var(--semantic-error-400);
        opacity: 1;
    }

    &.input-error::-webkit-input-placeholder {
        color: var(--semantic-error-400);
    }

    &.input-error::-moz-placeholder {
        color: var(--semantic-error-400);
        opacity: 1;
    }

    &.input-error:-ms-input-placeholder,
    &.input-error::-ms-input-placeholder {
        color: var(--semantic-error-400);
    }

    /* Chrome, Safari, Edge, Opera */
    /* &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    } */

    /* Firefox */
    /* &[type=number] {
        -moz-appearance: textfield;
    } */
}

textarea {
    padding: var(--input-padding);
    line-height: var(--input-lh);
}

input,
select {
    padding: var(--input-padding);
    line-height: var(--input-lh);
    height: calc(var(--input-lh) + var(--input-padding) * 2);

    &.nano {
        padding: var(--input-padding-nano);
        line-height: var(--input-lh);
        height: calc(var(--input-lh) + var(--input-padding-nano) * 2);
    }
}

select {
    cursor: pointer;
}

.select-frame {
    display: grid;
    grid-template-areas: "stack";
    align-items: center;
    justify-items: stretch;

    color: var(--mono-100);

    & .chevron {
        grid-area: stack;
        justify-self: end;
        pointer-events: none;
        margin-right: var(--gap-300);
    }

    & select {
        grid-area: stack;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: calc(var(--gap-300) * 2 + 18px);
    }
}

@media (hover: hover) and (pointer: fine) {

    input,
    textarea,
    select {
        &:hover:not([disabled]) {
            box-shadow: var(--input-focus);

            &.input-error {
                box-shadow: var(--input-error-focus);
            }
        }
    }
}

.input-frame {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 1em 0;

    gap: var(--gap-50);

    & label {
        margin: 0;
    }

    & .error {
        max-width: unset;
    }
}

/* Chips: a labelled set of options, built like .input-frame above — label on
   top, the choices below. Unlike .btn-row they wrap instead of stacking on a
   narrow screen, since each option is a word or two, not a full-width button. */
.chip-frame {
    display: flex;
    flex-direction: column;
    gap: var(--gap-50);
    margin: 1em 0;

    & label {
        margin: 0;
    }

    & .chip-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--gap-200);
    }
}

.input-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1;
    gap: var(--gap-400);
}

.stepper-row {
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: var(--gap-400);
    margin: 1em 0;

    & input,
    & button,
    & label {
        margin: 0;
    }

    & .stepper {
        display: flex;
        flex-direction: row;
        gap: var(--gap-100);

        & input {
            width: 80px;

            &.nano {
                width: 52px;
            }
        }
    }
}

@media (max-width: 860px) {
    & .input-row {
        gap: 0;
        flex-direction: column;
    }
}

form {
    display: flex;
    flex-direction: column;
    max-width: var(--max-paragraph-width);
}

.btn-row {
    display: flex;
    flex-direction: row;
    gap: var(--gap-300);

    margin-top: 1em;
    margin-bottom: 1em;

    & a,
    & button {
        margin: 0;
    }
}

@media (max-width: 860px) {
    .btn-row {
        display: flex;
        flex-direction: column;

        & a,
        & button {
            width: unset;
            justify-content: center;
        }
    }
}

ul {
    margin: 1em 0;
    list-style: none;
    padding-inline-start: 1em;
    list-style-type: "—";
    max-width: var(--max-paragraph-width);

    &.sml {
        font-size: var(--paragraph-sml-size);
        line-height: var(--paragraph-lh);
    }

    & li {
        padding-left: 0.5em;

        &::marker {
            font-weight: var(--bold);
        }
    }

    &.plain {
        list-style: none;
        list-style-type: none;
        padding-inline-start: 0;

        & li {
            padding-left: 0;
        }
    }
}

.table,
.faq,
.audio-player {
    display: flex;
    flex-direction: column;
    gap: var(--separator-gap);

    margin-top: 1em;
    margin-bottom: 1em;
    max-width: var(--max-paragraph-width);

    background: var(--separator);
    border: 1px solid var(--separator);
    border-radius: var(--radius-100);

    & .product-row,
    & .kb-row,
    & details,
    & .audio-controls,
    & .audio-tracklist .audio-track-item {
        background: var(--table-default-bg);
    }
}

.table {

    & .product-row,
    & .kb-row {
        display: flex;
        flex-direction: row;
        gap: var(--gap-300);

        & .details {
            display: flex;
            flex-direction: column;
            align-self: stretch;
            min-width: 0;
            flex: 1;

            & .title {
                font-weight: var(--medium);
                color: var(--mono-100);
            }
        }
    }

    & .product-row {
        padding: var(--kb-table-row-padding);
    }

    & .kb-row {
        & a.trigger {
            gap: var(--gap-300);
        }
    }

    /* The datasheet row on a product page carries a single line of text, so
       the graphic comes down to meet it. The drawing is an inline <svg> with
       a viewBox, so a size here overrides the one on the element itself. */
    &.datasheet {
        & .kb-row .graphic svg {
            width: 80px;
            height: 80px;
        }
    }

    & .product-row {
        & .details {

            & .title,
            & .subtitle {
                display: inline-block;
                margin-right: auto;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;

                /* direction: rtl;
                text-align: left; */
            }

            & .subtitle {
                margin-bottom: auto;
            }
        }
    }

    & .kb-row {
        & a.trigger {
            align-items: flex-start;
            flex: 1;

            padding: var(--kb-table-row-padding);

            & .graphic {
                display: flex;

                overflow: hidden;
                border-radius: var(--radius-100);

                background: var(--mono-400);
                color: var(--mono-200);
            }

            & .details {
                & .subtitle {
                    margin-bottom: auto;

                    overflow: hidden;
                    display: -webkit-box;
                    line-clamp: 3;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                }
            }
        }
    }
}

@media (hover: hover) and (pointer: fine) {
    .table {
        & .kb-row {
            &:hover {
                background: var(--table-hover-bg);

                & .trigger {
                    & .graphic {
                        background: var(--mono-300);
                    }

                    & .details {
                        & .title {
                            text-decoration: underline;
                        }
                    }
                }
            }

            &:active {
                opacity: var(--opacity);
            }
        }
    }
}

.faq {
    & details {
        position: relative;
        list-style: none;

        & .faq-body {
            padding: var(--btn-padding-sml);
        }

        & summary {
            position: relative;

            all: unset;
            user-select: none;
            -webkit-user-select: none;
            cursor: pointer;

            list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;

            padding: var(--btn-padding-sml);
            gap: var(--gap-300);

            & svg {
                fill: var(--mono-100);
                color: var(--mono-100);
                flex-shrink: 0;
                display: inline-flex;
            }

            & p.title {
                flex: 1;
            }

            & .icon.is-open {
                display: none;
            }
        }

        &[open] .icon.is-open {
            display: inline-flex;
        }

        &[open] summary {
            border-bottom: var(--separator-gap) solid var(--separator);
            background: var(--table-selected-bg);
        }

        &[open] .icon.is-closed {
            display: none;
        }
    }
}

@media (hover: hover) and (pointer: fine) {
    & details {
        & summary {
            &:hover {
                background: var(--table-hover-bg);
            }

            &:active {
                opacity: var(--opacity);
            }
        }
    }
}

.lazy-img {
    background-color: var(--img-bg);
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;

    border-radius: var(--radius-100);

    max-width: var(--max-content-width);
    align-self: center;

    &.crop {
        aspect-ratio: 16/6;

        & img {
            aspect-ratio: 16/6;
        }
    }

    & img {
        opacity: 0;

        display: block;
        width: 100%;
        height: 100%;
        transform: translateZ(0);

        object-fit: cover;
        aspect-ratio: 16/9;
    }

    & .spinner {
        color: var(--img-spinner);
    }

    &.loaded img {
        opacity: 1;
    }

    &.loaded .spinner {
        display: none;
    }

    &.thumb {
        width: 100px;
        aspect-ratio: 1/1;
        margin: 0;

        border-radius: var(--radius-100);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

@media (max-width: 860px) {
    .lazy-img {
        aspect-ratio: 4/3;
        border-radius: unset;

        & img {
            aspect-ratio: 4/3;
        }

        &.crop {
            aspect-ratio: 4/3;

            & img {
                aspect-ratio: 4/3;
            }
        }
    }
}

.img-tag {
    width: 100%;
    text-align: center;
    padding-inline: var(--margin-content);
    font-style: italic;
    line-height: 1.0;
    margin-top: var(--gap-100);
}

.gallery {
    & ul {
        all: unset;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--gap-200);

        & li {
            display: flex;
            padding: 0;
        }

        & li.is-active {
            display: flex;
        }
    }

    & .pagination-controls {
        z-index: var(--z-index-medium);
        margin-top: 1em;
        margin-bottom: 1em;
    }
}

.tag {
    display: inline-block;
    /* flex-direction: row;
    align-items: center;
    gap: var(--gap-100); */

    background: var(--mono-400);
    padding: var(--tag-padding);
    border-radius: var(--radius-100);
    width: fit-content;
}

@media (max-width: 860px) {
    .gallery {

        & ul {
            flex-direction: row;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            /* -webkit-overflow-scrolling: touch; */
            scrollbar-width: none;
            -ms-overflow-style: none;

            &::-webkit-scrollbar {
                display: none;
            }

            & li,
            & li.is-active {
                display: flex;
                flex: 0 0 100%;
                scroll-snap-align: start;
            }
        }

    }
}

.product-grid {
    position: relative;
    padding: 0;

    display: grid;
    grid-gap: var(--gap-300);
    align-content: start;
    align-items: stretch;
    overflow: visible;

    max-width: var(--max-content-width);
    align-self: center;
    width: 100%;

    margin: var(--margin-content) 0;
    padding-inline: var(--margin-content);

    &.c2 {
        grid-template-columns: repeat(2, 1fr);
    }

    &.c3 {
        grid-template-columns: repeat(3, 1fr);
    }

    &.c4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 860px) {
    .product-grid {
        grid-template-columns: repeat(1, 1fr);
        padding-inline: unset;

        &.c2,
        &.c3,
        &.c4 {
            grid-template-columns: repeat(1, 1fr);
        }

        /* Cards keep the full, edge-to-edge width they have here anyway — a
           strip of several just scrolls and snaps one at a time instead of
           stacking, the same way the product image gallery does.

           createPagination() adds .is-swipeable only where there is more than
           one card. A single card stays the ordinary grid: nothing to swipe,
           so nothing to clip, and no padding needed to keep its shadow. */
        &.is-swipeable {
            display: flex;
            flex-direction: row;
            overflow-x: auto;
            /* overflow-y cannot be visible here: per spec, when one axis is
               not visible the other computes to auto, so this always clips
               vertically. The card's shadow only falls downwards, so only the
               bottom needs room for it. */
            overflow-y: hidden;
            padding-bottom: var(--margin-content);
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -ms-overflow-style: none;

            &::-webkit-scrollbar {
                display: none;
            }

            &>* {
                flex: 0 0 100%;
                scroll-snap-align: start;
            }
        }
    }
}

/* Element-agnostic: the catalogue uses an <a>, the configurator a <div> that
   selects rather than navigates. Both carry .product-card. */
& .product-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    height: unset;
    width: unset;

    /* Same as above: display: flex would otherwise keep a hidden card on show. */
    &[hidden] {
        display: none;
    }

    & article {
        position: relative;
        flex: 1;
        flex-direction: column;
        display: flex;
        align-items: stretch;
        overflow: hidden;
        width: 100%;
        background: var(--app-bg-100);

        border-radius: var(--radius-100);
        overflow: hidden;
        box-shadow: var(--nav-shadow);

        & .lazy-img {
            aspect-ratio: 16/9;
            border-radius: unset;

            img {
                aspect-ratio: 16/9;
            }
        }

        & .indicator {
            display: none;
            color: var(--semantic-error-100);
            height: 20px;

            align-items: center;

            &.is-visible {
                display: flex;
            }
        }

        & .body-frame {
            padding: var(--card-padding);
            flex: 1;
            width: 100%;

            & p {
                margin-bottom: 2em;
            }

            display: flex;
            flex-direction: column;
            align-items: flex-start;

            & .price-tag {
                width: 100%;
                display: flex;
                flex-direction: column;
                margin-top: auto;

                & .info {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }
    }
}

@media (max-width: 860px) {
    & .product-card {
        & article {
            border-radius: unset;
        }
    }
}

/* The configurator's card: a product card that selects instead of navigating.
   No anchor and no quote heart, plus a checkbox that is always on show —
   selecting only swaps its colours. */
.rig-card {
    cursor: pointer;

    /* A qualifier after the product's name. span is display: inline-flex here,
       an author rule that would otherwise beat [hidden]. */
    & .title-note {
        display: inline;

        &[hidden] {
            display: none;
        }
    }

    & .rig-check {
        position: absolute;
        top: 1em;
        left: 1em;
        /* .lazy-img is positioned too and comes later in the markup, so
           without this the image paints over the checkbox. */
        z-index: 1;

        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px;

        border-radius: var(--radius-100);
        box-shadow: 0 0 0 2px var(--mono-100) inset;
        background: transparent;
        color: transparent;
    }

    &.is-selected {
        & .rig-check {
            background: var(--mono-100);
            color: var(--mono-500);
        }
    }
}

@media (max-width: 860px) {
    .rig-card {

        /* Line up with the card's text, which is inset by --card-padding. */
        & .rig-check {
            top: var(--card-padding);
            left: var(--card-padding);
            padding: 4px;
        }
    }
}


@media (hover: hover) and (pointer: fine) {
    & .product-card {
        &:hover {
            & article {
                & .lazy-img {
                    & img {
                        opacity: var(--opacity);
                        filter: grayscale(1);
                    }
                }
            }

            /* & article {
                box-shadow: unset;
            }

            &::after {
                content: '';
                position: absolute;
                top: -1px;
                bottom: -1px;
                left: -1px;
                right: -1px;
                box-shadow: var(--global-focus);
                border-radius: var(--radius-200);
                z-index: 900;
            } */

            & h4 {
                text-decoration: underline;
            }
        }
    }
}

.audio-player {
    max-width: var(--max-paragraph-width);
    margin: 1em 0;

    & .audio-controls {
        display: flex;
        align-items: center;
        gap: var(--gap-400);

        padding: var(--btn-padding-sml);
        padding-left: 10px;

        & button {
            flex-shrink: 0;
            margin: 0;

            & [data-icon-stop] {
                display: none;
            }

            &.is-on [data-icon-play] {
                display: none;
            }

            &.is-on [data-icon-stop] {
                display: inline-flex;
            }
        }

        & .control-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--gap-100);
        }

        & [data-repeat] {
            color: var(--mono-250);

            &.is-on {
                color: var(--mono-100);
            }
        }
    }

    & .audio-scrubber {
        display: flex;

        --track-h: 32px;
        --thumb-w: 2px;
        --progress-h: 8px;
        --thumb-h: calc(var(--progress-h) + 4px);

        position: relative;
        flex: 1;
        height: var(--track-h);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;

        & .audio-scrubber-track {
            flex: 1;

            position: relative;
            align-self: center;

            height: var(--progress-h);
            box-shadow: var(--input-default);
            border-radius: var(--radius-100);
            /* background: var(--mono-400); */

            & .audio-scrubber-progress {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 0%;
                background: var(--mono-100);
                pointer-events: none;
                border-radius: var(--radius-100);
            }
        }

        & .audio-scrubber-thumb {
            position: absolute;
            top: 50%;
            left: 0;
            width: var(--thumb-w);
            height: var(--thumb-h);
            transform: translate(-50%, -50%);
            pointer-events: none;

            background: var(--mono-100);
            border-radius: var(--radius-100);
        }
    }

    & .audio-time {
        color: var(--mono-200);
        flex-shrink: 0;

        & small {
            font-feature-settings: "tnum";
            font-variant-numeric: tabular-nums;
        }
    }

    & .audio-tracklist {
        list-style: none;
        padding: 0;
        margin: 0;

        display: flex;
        flex-direction: column;
        gap: var(--separator-gap);

        & .audio-track-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            min-width: 0;

            padding: var(--btn-padding-sml);
            gap: var(--gap-200);
            cursor: pointer;

            & .track-duration {
                flex-shrink: 0;
                font-feature-settings: "tnum";
                font-variant-numeric: tabular-nums;
            }

            & .track-playing-icon {
                display: none;
                flex-shrink: 0;
                line-height: 0;
            }

            & .track-title {
                margin-right: auto;
                display: block;
                flex: 1 1 auto;
                width: 0;
                min-width: 0;

                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            &.is-active {
                color: var(--mono-500);
                background: var(--mono-100);
                /* font-weight: var(--medium); */
                box-shadow: 0 0 0 1px var(--mono-100), 0 0 0 1px var(--mono-100) inset;

                & .track-playing-icon {
                    display: inline-flex;
                    align-items: center;
                }
            }
        }
    }
}

@media (hover: hover) and (pointer: fine) {
    .audio-player .audio-tracklist .audio-track-item:hover:not(.is-active) {
        background: var(--mono-400);
    }

    .audio-player .audio-tracklist .audio-track-item:active:not(.is-active) {
        opacity: var(--opacity);
    }
}

/* @media (max-width: 860px) {
    .audio-player {
        & .audio-scrubber {
            --track-h: 18px;
        }
    }
} */

.footnote {
    margin: 0;
    box-shadow: var(--top-separator);
}

.bs {
    box-shadow: 0 1px 0 0 var(--separator);
}

@media (max-width: 860px) {
    .bs {
        box-shadow: unset;
    }
}

.product-details-frame {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: var(--max-content-width);

    align-self: center;

    & .product-gallery,
    & .product-details {
        padding: var(--margin-content);

        & header,
        & section {
            padding-inline: unset;
        }
    }

    & .product-gallery {
        box-shadow: 1px 0 0 0 var(--separator);

        & .gallery {
            position: sticky;
            top: calc(var(--sticky-position, 0px) + var(--margin-content));
        }
    }
}

@media (max-width: 860px) {
    .product-details-frame {
        grid-template-columns: repeat(1, 1fr);

        & .product-gallery {
            padding: 0;

            & .gallery {
                position: relative;
                top: 0;
            }

            padding-inline: unset;
            box-shadow: unset;
        }

        & .product-details {
            padding-bottom: 0;
        }
    }
}

.info-box {
    display: flex;
    flex-direction: column;

    max-width: var(--max-paragraph-width);
    padding: var(--btn-padding-sml);
    border-radius: var(--radius-100);

    margin-top: 1em;
    margin-bottom: 1em;

    &.info {
        box-shadow: var(--border-semantic-info);
        background: var(--semantic-info-200);
        color: var(--semantic-info-400);

        & a,
        strong {
            color: var(--semantic-info-400);
        }
    }

    &.error {
        box-shadow: var(--border-semantic-error);
        background: var(--semantic-error-200);
        color: var(--semantic-error-400);

        & a {
            color: var(--semantic-error-400);
        }
    }

    &.warning {
        box-shadow: var(--border-semantic-warning);
        background: var(--semantic-warning-200);
        color: var(--semantic-warning-400);

        & a {
            color: var(--semantic-warning-400);
        }
    }
}