/**
 * Census styling.
 *
 * The table is dense by necessity — 412 rows — so the work here is making
 * density legible rather than decorating it. Two rules do most of that: the
 * trade code and the address are set smaller and quieter than the name, and the
 * biographical note gets a full-width row of its own rather than a seventh
 * column. The instrument register taught that lesson the hard way; a caveat
 * squeezed into a narrow column wrapped to roughly one word per line.
 */

.bb-census {
    --bb-rule: color-mix(in srgb, currentColor 14%, transparent);
    --bb-quiet: color-mix(in srgb, currentColor 62%, transparent);
    --bb-flag: color-mix(in srgb, currentColor 8%, transparent);
    margin-block: 2rem;
}

/* The caveat is not a nicety. It is the reason the page is allowed to exist. */
.bb-census__caveat {
    border-left: 3px solid currentColor;
    padding: 0.75rem 0 0.75rem 1rem;
    margin-block-end: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bb-census__caveat p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.bb-census__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin: 0 0 1.5rem;
    padding-block: 0.9rem;
    border-block: 1px solid var(--bb-rule);
}

.bb-census__stats div {
    display: flex;
    flex-direction: column-reverse;   /* number first, label beneath it */
    gap: 0.15rem;
}

.bb-census__stats dt {
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bb-quiet);
    margin: 0;
}

.bb-census__stats dd {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.bb-census__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem 1.5rem;
    margin-block-end: 1rem;
}

.bb-census__search {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 20rem;
}

.bb-census__search span,
.bb-census__toggles label {
    font-size: 0.8rem;
    color: var(--bb-quiet);
}

.bb-census__search input {
    font: inherit;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--bb-rule);
    border-radius: 2px;
    background: transparent;
    color: inherit;
    width: 100%;
}

.bb-census__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.bb-census__toggles label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.bb-census__count {
    margin: 0;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--bb-quiet);
    margin-inline-start: auto;
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.bb-census__table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.bb-census__table thead th {
    text-align: start;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bb-quiet);
    font-weight: 600;
    padding: 0.4rem 0.75rem 0.4rem 0;
    border-block-end: 1px solid currentColor;
    white-space: nowrap;
}

.bb-census__row > * {
    padding: 0.55rem 0.75rem 0.55rem 0;
    border-block-end: 1px solid var(--bb-rule);
    vertical-align: baseline;
    text-align: start;
}

.bb-census__name {
    font-weight: 600;
    white-space: nowrap;
}

.bb-census__badge {
    display: inline-block;
    margin-inline-start: 0.4rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--bb-rule);
    border-radius: 2px;
    color: var(--bb-quiet);
    vertical-align: 0.1em;
}

.bb-census__code code {
    font-size: 0.85rem;
    white-space: nowrap;
}

.bb-census__code-x,
.bb-census__addr {
    display: block;
    font-size: 0.75rem;
    color: var(--bb-quiet);
}

.bb-census__place {
    min-width: 12rem;
}

/* The note row: full width, so it can be read as a sentence. */
.bb-census__detail > td {
    padding: 0 0 0.8rem;
    border-block-end: 1px solid var(--bb-rule);
}

.bb-census__note,
.bb-census__origin,
.bb-census__warn {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.bb-census__origin span {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bb-quiet);
    margin-inline-end: 0.4rem;
}

.bb-census__warn {
    background: var(--bb-flag);
    padding: 0.5rem 0.7rem;
    border-inline-start: 2px solid currentColor;
}

.bb-census__empty {
    padding: 2rem 0;
    color: var(--bb-quiet);
}

.bb-codekey {
    border-collapse: collapse;
    margin-block: 1.25rem;
}

.bb-codekey caption {
    text-align: start;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bb-quiet);
    padding-block-end: 0.5rem;
}

.bb-codekey th,
.bb-codekey td {
    text-align: start;
    padding: 0.25rem 1.25rem 0.25rem 0;
    border-block-end: 1px solid var(--bb-rule);
    font-weight: 400;
}

.bb-codekey__note {
    font-size: 0.85rem;
    color: var(--bb-quiet);
}

@media (max-width: 40rem) {
    .bb-census__name { white-space: normal; }
    .bb-census__count { margin-inline-start: 0; }
}

/* The caveat, the per-row warning and the code-key note carried ch-based
   caps from when they sat in a reading column. They sit inside the wide
   census box now, which decides the measure, and a cap that stops text short
   of the table beside it reads as an unfinished layout rather than a
   considered one. The container sets the width; components fill it. */