@layer components {
    /* Bearing library page: search row above the datasheets. */
    .bearing-search {
        display: grid;
        gap: 0.35rem;
        margin-block: 1rem 1.5rem;
        max-inline-size: 60ch;
    }

    .bearing-section {
        margin-block-end: 2rem;
    }

    .bearing-table td {
        font-variant-numeric: tabular-nums;
    }

    /* The table scrolls in its own box rather than widening the page. */
    .bearing-table-wrap {
        max-inline-size: 100%;
        overflow-x: auto;
    }

    /* Narrow: make and the race orders stay; count and FTF (cage) go. */
    @media (max-width: 100ch) {
        .bearing-table :is(th, td):is([data-col="n"], [data-col="ftf"]) {
            display: none;
        }
    }

    /* Point form picker: current choice, search box, results frame. */
    .bearing-picker {
        --bearing-picker-gap: 0.4rem;

        display: grid;
        gap: var(--bearing-picker-gap);
    }

    .bearing-picker__current {
        align-items: center;
        border: 1px solid var(--rule);
        display: flex;
        gap: 1ch;
        justify-content: space-between;
        padding: 0.45rem 0.6rem;

        &[hidden] { display: none; }

        > span {
            display: grid;
            gap: 0.15rem;
            min-inline-size: 0;
        }
    }

    .bearing-picker__name {
        font-weight: 600;
    }

    .bearing-picker__make,
    .bearing-picker__orders {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.7rem;
        font-variant-numeric: tabular-nums;
    }

    .bearing-picker__list {
        border: 1px solid var(--rule);
        list-style: none;
        margin: 0;
        max-block-size: 18rem;
        overflow-y: auto;
        padding: 0;
    }

    .bearing-picker__option {
        background: var(--surface);
        border: 0;
        border-block-end: 1px solid var(--rule-soft);
        color: var(--ink);
        cursor: pointer;
        display: grid;
        gap: 0.1rem 1ch;
        grid-template-columns: auto 1fr;
        inline-size: 100%;
        padding: 0.45rem 0.6rem;
        text-align: start;

        :is(.bearing-picker__match, .bearing-picker__orders) { grid-column: 1 / -1; }

        &:hover,
        &:focus-visible {
            background: var(--ink);
            color: var(--surface);

            .bearing-picker__make,
            .bearing-picker__orders { color: inherit; }
        }
    }

    /* Candidates for a detected tone: which defect order matched. */
    .bearing-picker__match {
        font-family: var(--font-data);
        font-size: 0.7rem;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
    }

    .bearing-picker__caption,
    .bearing-picker__empty {
        color: var(--ink-soft);
        font-size: 0.8rem;
        margin: 0;
    }

    /* Inspect panel: blind-detected bearing tone on a point with no bearing.
       A full-width last line of the header strip. */
    .bearing-tone-hint {
        align-items: baseline;
        border-block-start: 1px solid var(--rule-soft);
        color: var(--ink-soft);
        display: flex;
        flex-basis: 100%;
        flex-wrap: wrap;
        font-size: 0.8rem;
        gap: 0.25rem 1.5ch;
        justify-content: space-between;
        margin: 0;
        padding-block-start: 0.4rem;

        strong {
            color: var(--ink);
            font-family: var(--font-data);
            font-variant-numeric: tabular-nums;
            font-weight: 600;
        }
    }

    /* Point alarm editor: bearing-band rules and their baseline. */
    .band-alarms__rules {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: start;
    }

    .band-alarms__rules > li {
        flex-wrap: wrap;
    }

    .band-alarms__scope {
        white-space: nowrap;
    }

    .band-alarms__limits {
        font-family: var(--font-data);
        font-variant-numeric: tabular-nums;
        text-align: end;
    }

    .band-alarms__baseline {
        border-block-start: 1px solid var(--rule);
        margin-block-start: 0.5rem;
        padding-block-start: 0.75rem;
        text-align: start;

        p {
            margin: 0;
        }
    }
}