/* Foundations. Colors follow the shared tokens in site.css.
   CT search keeps its group dividers and internal spacing local. */
.co-ct-search-page {
    --co-rem-space-4: 2rem;

    --radius-control: 0.1875rem;
    --radius-chip: 0.1875rem;
    --font-size-display: 2rem;
    --font-size-title: 1.25rem;
    --font-size-lead: 1rem;
    --font-size-body: 0.9375rem;
    --font-size-control: 0.875rem;
    --font-size-chip: 0.8125rem;
    --font-size-result-data: var(--font-size-chip);
    --font-size-label: 0.75rem;
    --font-mono: var(--co-font-mono);
    --page-band-inline-padding: max(var(--co-gutter), calc((100% - var(--co-max-width)) / 2 + var(--co-gutter)));
    --control-min-block-size: 2.5rem;
    --control-padding-block: 0.4375rem;
    --control-padding-inline: 0.625rem;
    --select-padding-inline-start: 0.625rem;
    --select-padding-inline-end: 2.0625rem;
    --gap-control: 0.875rem;
    --gap-small: 0.5rem;
    --chip-padding-block: 0.2625rem;
    --chip-padding-inline: 0.5rem;
    --result-group-inline-padding: 1rem;
    --result-group-top-border-width: 2px;
    --result-group-summary-padding-block-start: 0.8125rem;
    --result-group-summary-padding-block-end: 0.875rem;
    --certificate-timestamp-value-width: 9.5rem;
    --certificate-cell-inline-padding: 0.5rem;
    --certificate-cell-inline-padding-total: calc(var(--certificate-cell-inline-padding) + var(--certificate-cell-inline-padding));
    --certificate-table-cell-block-padding: 0.75rem;
    --certificate-toggle-target-size: 2rem;
    --certificate-toggle-icon-size: 1rem;
    --certificate-toggle-mobile-gap: 0.625rem;
    --certificate-expiration-status-reserve-width: 3.5rem;
    --certificate-toggle-mobile-reserve: calc(var(--certificate-toggle-target-size) + var(--certificate-toggle-mobile-gap));
    --certificate-mobile-field-label-column: clamp(5.5rem, 34%, 10rem);
    --certificate-toggle-column-width: calc(var(--certificate-toggle-target-size) + var(--certificate-cell-inline-padding));
    --certificate-logged-column-width: calc(var(--certificate-timestamp-value-width) + var(--certificate-cell-inline-padding-total));
    --certificate-valid-until-column-width: calc(var(--certificate-timestamp-value-width) + var(--gap-small) + var(--certificate-expiration-status-reserve-width) + var(--certificate-cell-inline-padding-total));
    --certificate-fixed-columns-width: calc(var(--certificate-toggle-column-width) + var(--certificate-logged-column-width) + var(--certificate-valid-until-column-width));
    --certificate-row-content-height: 1.625rem;
    --certificate-toggle-cell-block-padding: calc(var(--certificate-table-cell-block-padding) - ((var(--certificate-toggle-target-size) - var(--certificate-row-content-height)) / 2));
    --certificate-serial-max-column-width: 21rem;
    color: var(--co-text-color);
    font-size: var(--font-size-body);
    padding-bottom: var(--co-rem-space-4);
}

/* Utilities. */
.co-ct-search-page .visually-hidden,
.icon-sprite {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.icon-sprite {
    inline-size: 0;
    block-size: 0;
}

.co-ct-search-page .page-container {
    width: 100%;
    max-width: var(--co-max-width);
    margin-inline: auto;
    padding-inline: var(--co-gutter);
}

/* Help and Close icon buttons. */
.co-ct-search-page .field-help-button,
.co-ct-search-page .scope-help-close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--co-text-muted-color);
    cursor: pointer;
}

.co-ct-search-page .field-help-button:hover,
.co-ct-search-page .scope-help-close-button:hover {
    background: var(--co-surface-subtle-color);
    color: var(--co-text-color);
}

.co-ct-search-page .field-help-button svg,
.co-ct-search-page .scope-help-close-button svg {
    inline-size: 1rem;
    block-size: 1rem;
    fill: currentColor;
    stroke: none;
}

/* Heading. */
.co-ct-search-page .app-header {
    padding-block: 1.75rem 1.125rem;
}

.co-ct-search-page .app-header h1 {
    margin: 0;
    font-size: var(--font-size-display);
    letter-spacing: 0;
}

.co-ct-search-page .header-description {
    margin: 0.5rem 0 0;
    color: var(--co-text-color);
    font-size: var(--font-size-body);
    line-height: 1.6;
}

.co-ct-search-page .ct-search-heading-link {
    color: inherit;
    text-decoration: none;
}

/* Search form. */
.co-ct-search-page .search-surface {
    position: relative;
    padding-block: 1.125rem;
    padding-inline: var(--page-band-inline-padding);
}

.co-ct-search-page .search-form,
.co-ct-search-page .criteria-fieldset {
    margin: 0;
}

.co-ct-search-page .search-form {
    container: ct-search-form / inline-size;
}

.co-ct-search-page .criteria-fieldset {
    display: grid;
    gap: var(--gap-control);
    min-inline-size: 0;
    border: 0;
    padding: 0;
}

.co-ct-search-page .query-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-control);
}

.co-ct-search-page .field-label {
    display: block;
    margin-bottom: 0.4375rem;
    color: var(--co-text-color);
    font-size: var(--font-size-chip);
    font-weight: 600;
}

.co-ct-search-page .field-heading {
    position: relative;
    inline-size: fit-content;
    max-inline-size: calc(100% - 1.875rem);
    margin-bottom: 0.4375rem;
}

.co-ct-search-page .field-heading > label {
    display: block;
}

.co-ct-search-page .field-heading .field-label {
    margin: 0;
}

.co-ct-search-page .field-help-button {
    position: absolute;
    inset-inline-start: calc(100% + 0.375rem);
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0.25rem;
}

.co-ct-search-page .query-control,
.co-ct-search-page .select-control {
    display: block;
    min-width: 0;
}

.co-ct-search-page input,
.co-ct-search-page select {
    width: 100%;
    min-width: 0;
    min-block-size: var(--control-min-block-size);
    border: 1px solid var(--co-input-border-color);
    border-radius: var(--radius-control);
    background: var(--co-surface-color);
    color: var(--co-text-color);
    font-size: var(--font-size-control);
    padding-block: var(--control-padding-block);
    padding-inline: var(--control-padding-inline);
}

/* Keep iPhone Safari from zooming when the search input receives focus. */
@media (any-pointer: coarse) {
    .co-ct-search-page .query-control input {
        font-size: max(1rem, 16px);
    }
}

.co-ct-search-page select {
    border-color: var(--co-border-color);
    padding-inline: var(--select-padding-inline-start) var(--select-padding-inline-end);
}

.co-ct-search-page .controls-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-control);
}

.co-ct-search-page .form-actions {
    display: flex;
    justify-content: center;
}

/* Use the bottom action until the query and compact button fit on one row. */
.co-ct-search-page .form-actions-desktop {
    display: none;
}

.co-ct-search-page .form-actions-mobile .co-primary-button {
    width: 100%;
}

.co-ct-search-page .co-primary-button {
    min-block-size: 2.5rem;
    font-size: 0.875rem;
    padding-block: 0.4375rem;
    padding-inline: 0.6875rem;
    white-space: nowrap;
    min-inline-size: 6rem;
}

/* Form layout follows its available width and scales with enlarged text. */
@container ct-search-form (width >= 36rem) {
    .co-ct-search-page .controls-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .co-ct-search-page .query-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .co-ct-search-page .form-actions-desktop {
        display: flex;
    }

    .co-ct-search-page .form-actions-mobile {
        display: none;
    }
}

@container ct-search-form (width >= 72rem) {
    .co-ct-search-page .controls-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Results: toolbar and group summaries. */
/* Keep compact focus rings for result controls inside clipped groups. */
.co-ct-search-page .group-summary-toggle:focus-visible,
.co-ct-search-page .more-pill:focus-visible,
.co-ct-search-page .certificate-expander:focus-visible {
    outline: 3px solid var(--co-focus-ring-color);
    outline-offset: 2px;
}

.co-ct-search-page .result-toolbar {
    min-block-size: var(--control-min-block-size);
    padding-block: 0.75rem 0.375rem;
}

.co-ct-search-page .result-count {
    margin: 0;
}

.co-ct-search-page .results {
    display: grid;
    gap: 0.625rem;
}

.co-ct-search-page .result-group {
    min-width: 0;
    border: 1px solid var(--co-border-color);
    border-top: 0;
    background: var(--co-surface-color);
    overflow: clip;
}

.co-ct-search-page .group-summary {
    background: var(--co-surface-color);
    padding: 0 var(--result-group-inline-padding) var(--result-group-summary-padding-block-end);
}

.co-ct-search-page .group-summary-toggle {
    box-sizing: border-box;
    display: block;
    inline-size: calc(100% + var(--result-group-inline-padding) + var(--result-group-inline-padding));
    block-size: calc(var(--result-group-top-border-width) + var(--result-group-summary-padding-block-start));
    margin-inline: calc(-1 * var(--result-group-inline-padding));
    border: 0;
    border-block-start: var(--result-group-top-border-width) solid var(--co-ct-group-border-color);
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.co-ct-search-page .group-summary-toggle:hover {
    background: var(--co-ct-interactive-hover-bg-color);
}

.co-ct-search-page .summary-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--certificate-logged-column-width) var(--certificate-valid-until-column-width);
    row-gap: 0.75rem;
    align-items: start;
    min-width: 0;
}

.co-ct-search-page .summary-grouping-fields {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / 3;
    gap: 0.75rem 0.875rem;
    min-width: 0;
    padding-inline-end: 0.875rem;
}

.co-ct-search-page .summary-field {
    flex: 1 1 10.625rem;
    min-width: 0;
    margin: 0;
    color: var(--co-text-muted-color);
    font-size: var(--font-size-result-data);
}

.co-ct-search-page .summary-field--sort {
    grid-column: 3;
    grid-row: 1;
    max-width: none;
    padding-inline: var(--certificate-cell-inline-padding);
}

.co-ct-search-page .summary-field--issuer-organization {
    max-width: 36ch;
}

.co-ct-search-page .summary-field--issuer-spki {
    max-width: 20ch;
}

.co-ct-search-page .summary-field-value {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    min-height: var(--certificate-row-content-height);
    margin: 0.1875rem 0 0;
    line-height: 1.2;
}

.co-ct-search-page .summary-field-value > .meta-value {
    padding-block-start: 0.3125rem;
}

.co-ct-search-page .meta-label {
    display: block;
    color: var(--co-text-color);
    font-size: var(--font-size-label);
    font-weight: 600;
}

.co-ct-search-page .meta-value {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--co-text-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-ct-search-page .meta-value-wrap {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.co-ct-search-page .summary-field--issuer-spki .issuer-spki-value {
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-ct-search-page .timestamp-value {
    font-variant-numeric: tabular-nums;
}

.co-ct-search-page .summary-value-row,
.co-ct-search-page .certificate-timestamp-row,
.co-ct-search-page .certificate-row-value {
    display: flex;
    align-items: center;
    gap: var(--gap-small);
    min-width: 0;
    min-height: var(--certificate-row-content-height);
}

/* Results: SAN pills and certificate status. */
.co-ct-search-page .san-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
}

.co-ct-search-page .san-pill,
.co-ct-search-page .more-pill,
.co-ct-search-page .status-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: var(--certificate-row-content-height);
    border-radius: var(--radius-chip);
    font-size: var(--font-size-chip);
    line-height: 1.2;
}

.co-ct-search-page .san-pill {
    min-width: 0;
    border: 1px solid var(--co-border-color);
    background: var(--co-surface-subtle-color);
    color: var(--co-text-color);
    font-family: var(--font-mono);
    font-variant-ligatures: none;
    padding: var(--chip-padding-block) var(--chip-padding-inline);
}

.co-ct-search-page .san-pill span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.co-ct-search-page .san-pill mark {
    border-radius: 0.0625rem;
    background: var(--co-ct-match-highlight-bg-color);
    color: inherit;
    padding: 0 0.125rem;
}

.co-ct-search-page .more-pill,
.co-ct-search-page .status-pill {
    border: 1px solid var(--co-border-color);
    color: var(--co-text-muted-color);
    padding: var(--chip-padding-block) var(--chip-padding-inline);
}

.co-ct-search-page .more-pill {
    background: var(--co-ct-chip-muted-bg-color);
    cursor: pointer;
    white-space: nowrap;
}

.co-ct-search-page .san-toggle-labels {
    display: grid;
    place-items: center;
}

.co-ct-search-page .san-toggle-labels > span {
    grid-area: 1 / 1;
}

/* Both labels reserve space so toggling does not change the clickable area. */
.co-ct-search-page .more-pill[aria-expanded="true"] .san-toggle-count,
.co-ct-search-page .more-pill[aria-expanded="false"] .san-toggle-collapse {
    visibility: hidden;
}

.co-ct-search-page .status-pill {
    background: var(--co-ct-status-ok-bg-color);
    color: var(--co-text-color);
    white-space: nowrap;
}

.co-ct-search-page .status-pill.urgent {
    border-color: var(--co-ct-urgent-border-color);
    background: var(--co-ct-urgent-bg-color);
    color: var(--co-ct-urgent-color);
}

.co-ct-search-page .status-pill.warning {
    border-color: var(--co-ct-warning-border-color);
    background: var(--co-ct-warning-bg-color);
    color: var(--co-ct-warning-color);
}

/* Results: certificate table and expanded details. */
.co-ct-search-page .group-details {
    border-top: 1px solid var(--co-border-color);
    background: var(--co-surface-color);
    padding: 0 var(--result-group-inline-padding);
}

.co-ct-search-page .group-collapsed-summary {
    margin: 0;
    padding: var(--certificate-table-cell-block-padding) var(--certificate-cell-inline-padding);
    color: var(--co-text-color);
    font-size: var(--font-size-result-data);
}

.co-ct-search-page .certificate-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.co-ct-search-page .certificate-table th,
.co-ct-search-page .certificate-table td {
    min-width: 0;
    text-align: left;
    vertical-align: top;
}

.co-ct-search-page .certificate-table th {
    padding: 0.625rem var(--certificate-cell-inline-padding);
    border-bottom: 1px solid var(--co-border-color);
    color: var(--co-text-color);
    font-size: var(--font-size-label);
    font-weight: 600;
}

.co-ct-search-page .certificate-sort-indicator {
    display: inline-grid;
    place-items: center;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.375rem;
    color: var(--co-text-color);
}

.co-ct-search-page .certificate-sort-indicator svg {
    width: 0.6875rem;
    height: 0.6875rem;
    fill: currentColor;
}

.co-ct-search-page .certificate-table td {
    padding: var(--certificate-table-cell-block-padding) var(--certificate-cell-inline-padding);
    border-bottom: 1px solid var(--co-border-color);
    font-size: var(--font-size-result-data);
}

.co-ct-search-page .certificate-row.is-last-certificate > td,
.co-ct-search-page .certificate-details-row.is-last-certificate > td,
.co-ct-search-page .certificate-row.is-open > td {
    border-bottom: 0;
}

.co-ct-search-page .certificate-toggle-column {
    width: var(--certificate-toggle-column-width);
}

.co-ct-search-page .certificate-timestamp-column {
    width: var(--certificate-logged-column-width);
}

.co-ct-search-page .certificate-expiration-column {
    width: var(--certificate-valid-until-column-width);
}

.co-ct-search-page .certificate-table .certificate-toggle-cell {
    padding-block: var(--certificate-toggle-cell-block-padding);
    padding-inline-start: 0;
}

.co-ct-search-page .certificate-serial-value,
.co-ct-search-page .hash-value {
    font-family: var(--font-mono);
    font-size: var(--font-size-result-data);
    font-variant-ligatures: none;
}

.co-ct-search-page .hash-value {
    min-width: 0;
    color: var(--co-text-color);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.co-ct-search-page .certificate-details-row > td {
    padding: 0 var(--certificate-cell-inline-padding) 0.9375rem calc(var(--certificate-toggle-column-width) + var(--certificate-cell-inline-padding));
}

.co-ct-search-page .certificate-expander {
    display: inline-grid;
    place-items: center;
    inline-size: var(--certificate-toggle-target-size);
    min-block-size: var(--certificate-toggle-target-size);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--co-text-muted-color);
    cursor: pointer;
    padding: 0;
}

.co-ct-search-page .certificate-expander:hover {
    background: var(--co-ct-interactive-hover-bg-color);
}

.co-ct-search-page .certificate-expander svg {
    inline-size: var(--certificate-toggle-icon-size);
    block-size: var(--certificate-toggle-icon-size);
    fill: currentColor;
    transition: transform 150ms ease;
}

.co-ct-search-page .certificate-row.is-open .certificate-expander svg {
    transform: rotate(90deg);
}

.co-ct-search-page .certificate-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-small);
    padding: 0;
}

.co-ct-search-page .certificate-details > .summary-field {
    font-size: var(--font-size-result-data);
}

.co-ct-search-page .certificate-details > .summary-field,
.co-ct-search-page .detail-list div,
.co-ct-search-page .hash-list div {
    display: grid;
    grid-template-columns: var(--certificate-mobile-field-label-column) minmax(0, 1fr);
    gap: var(--gap-small);
    align-items: start;
}

.co-ct-search-page .certificate-details .summary-field-value {
    align-items: flex-start;
    margin-top: 0;
    min-height: 0;
}

.co-ct-search-page .detail-list,
.co-ct-search-page .hash-list {
    display: grid;
    gap: var(--gap-small);
    margin: 0;
}

.co-ct-search-page .detail-list div,
.co-ct-search-page .hash-list div {
    min-width: 0;
}

.co-ct-search-page .detail-list dt,
.co-ct-search-page .hash-list dt {
    color: var(--co-text-color);
    font-size: var(--font-size-label);
    font-weight: 600;
}

.co-ct-search-page .detail-list dd,
.co-ct-search-page .hash-list dd {
    margin: 0;
    min-width: 0;
    font-size: var(--font-size-result-data);
    overflow-wrap: anywhere;
}

/* Results: feedback. */
.co-ct-search-page .empty-state {
    margin: 0;
    padding: 1.5rem 0;
    color: var(--co-text-color);
    font-size: var(--font-size-lead);
    text-align: left;
}

.co-ct-search-page .empty-state-error {
    color: var(--co-ct-urgent-color);
}

.co-ct-search-page .validation-error-list {
    padding-inline-start: 1.5rem;
}

.co-ct-search-page .validation-error-list li + li {
    margin-top: 0.25rem;
}

.co-ct-search-page .search-suggestions {
    min-width: 0;
    padding-bottom: 1.5rem;
}

.co-ct-search-page .suggestions-label {
    margin: 0 0 0.5rem;
    font-weight: 500;
}

.co-ct-search-page .suggestion-list {
    margin: 0;
    padding-inline-start: 1.25rem;
}

.co-ct-search-page .suggestion-list li + li {
    margin-top: 0.5rem;
}

.co-ct-search-page .suggestion-list a {
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.co-ct-search-page :is(.empty-state, .suggestion-list) code {
    font-family: var(--co-font-mono);
    font-size: 0.9em;
}

/* Responsive results and form layout. */
@media (width > 56rem) {
    .co-ct-search-page {
        --certificate-table-cell-block-padding: 0.5rem;
    }

    .co-ct-search-page .group-details {
        container-name: certificate-table;
        container-type: inline-size;
    }

    .co-ct-search-page .certificate-table--flex-columns-2 .certificate-serial-column {
        width: calc((100% - var(--certificate-fixed-columns-width)) / 2);
    }

    .co-ct-search-page .certificate-table--flex-columns-3 .certificate-serial-column {
        width: calc((100% - var(--certificate-fixed-columns-width)) / 3);
    }

    /* Cap thresholds equal fixed columns plus the max serial width for each flexible column. */
    @container certificate-table (width > 69.5rem) {
        .co-ct-search-page .certificate-table--flex-columns-2 .certificate-serial-column {
            width: var(--certificate-serial-max-column-width);
        }
    }

    @container certificate-table (width > 90.5rem) {
        .co-ct-search-page .certificate-table--flex-columns-3 .certificate-serial-column {
            width: var(--certificate-serial-max-column-width);
        }
    }

    .co-ct-search-page .certificate-details-row > td {
        position: relative;
    }

    .co-ct-search-page .certificate-details-row > td::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-block-end: 0.9375rem;
        inset-inline-start: calc(var(--certificate-toggle-target-size) / 2);
        border-left: 1px solid var(--co-border-color);
        pointer-events: none;
    }

    .co-ct-search-page .summary-field--subject-spki .subject-spki-value {
        overflow: hidden;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (width <= 56rem) {
    .co-ct-search-page .summary-fields,
    .co-ct-search-page .certificate-details {
        grid-template-columns: 1fr;
    }

    .co-ct-search-page .summary-fields,
    .co-ct-search-page .summary-grouping-fields {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-inline-end: 0;
    }

    .co-ct-search-page .summary-field,
    .co-ct-search-page .summary-field--sort {
        flex: 0 1 auto;
        max-width: none;
        padding-inline: 0;
        width: 100%;
    }

    .co-ct-search-page .certificate-table {
        table-layout: auto;
    }

    .co-ct-search-page .certificate-table thead {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        border: 0;
        white-space: nowrap;
    }

    .co-ct-search-page .certificate-table,
    .co-ct-search-page .certificate-table tbody,
    .co-ct-search-page .certificate-table tr,
    .co-ct-search-page .certificate-table td {
        display: block;
        width: 100%;
    }

    .co-ct-search-page .certificate-table td {
        padding: 0;
        border-bottom: 0;
    }

    .co-ct-search-page .certificate-table .certificate-row {
        display: block;
        position: relative;
        padding: 0.75rem var(--certificate-toggle-mobile-reserve) 0.75rem 0;
        border-bottom: 1px solid var(--co-border-color);
    }

    .co-ct-search-page .certificate-row.is-open,
    .co-ct-search-page .certificate-row.is-last-certificate {
        border-bottom: 0;
    }

    .co-ct-search-page .certificate-row > td:not(.certificate-toggle-cell) {
        display: grid;
        grid-template-columns: var(--certificate-mobile-field-label-column) minmax(0, 1fr);
        gap: var(--gap-small);
        align-items: start;
    }

    .co-ct-search-page .certificate-row > td:not(.certificate-toggle-cell)::before {
        content: attr(data-label);
        color: var(--co-text-color);
        font-size: var(--font-size-label);
        font-weight: 600;
    }

    .co-ct-search-page .certificate-table .certificate-toggle-cell {
        position: absolute;
        inset-block-start: var(--certificate-toggle-cell-block-padding);
        inset-inline-end: 0;
        padding: 0;
        inline-size: var(--certificate-toggle-target-size);
    }

    .co-ct-search-page .certificate-details-row > td {
        padding: 0 var(--certificate-toggle-mobile-reserve) 0.9375rem 0;
        border-bottom: 1px solid var(--co-border-color);
    }

    .co-ct-search-page .certificate-details-row.is-last-certificate > td {
        border-bottom: 0;
    }
}

@media (width <= 33rem) {
    .co-ct-search-page .certificate-table .certificate-row,
    .co-ct-search-page .certificate-details-row > td {
        padding-inline-end: 0;
    }

    .co-ct-search-page .certificate-row > td:not(.certificate-toggle-cell),
    .co-ct-search-page .certificate-details > .summary-field,
    .co-ct-search-page .detail-list div,
    .co-ct-search-page .hash-list div {
        grid-template-columns: 1fr;
        gap: 0.1875rem;
    }

    .co-ct-search-page .certificate-toggle-cell + td {
        padding-inline-end: var(--certificate-toggle-mobile-reserve);
    }
}

/* Responsive page spacing. */
@media (min-width: 45rem) {
    .co-ct-search-page {
        --co-rem-space-4: 3rem;
    }
}

@media (min-width: 63rem) {
    .co-ct-search-page {
        --co-rem-space-4: 4rem;
    }
}

/* Explanation spacing. */
.co-ct-search-page .explainer-section {
    margin-top: 1.75rem;
}

/* Explanations and scope examples. */
.co-ct-search-page .scope-explainer,
.co-ct-search-page .scope-help-dialog {
    --scope-explainer-content-width: 68rem;
}

.co-ct-search-page .scope-explainer {
    position: relative;
    padding-block: 1.25rem;
    padding-inline: var(--page-band-inline-padding);
}

.co-ct-search-page .scope-options > summary {
    min-block-size: var(--control-min-block-size);
    padding-block: 0.5rem;
    font-size: var(--font-size-title);
    line-height: 1.2;
    cursor: pointer;
}

.co-ct-search-page .scope-options > summary h2 {
    display: inline;
    margin: 0;
}

.co-ct-search-page .scope-options .scope-example-list {
    margin-top: 0.5rem;
}

.co-ct-search-page .ct-explainer {
    position: relative;
    margin-top: 0;
    padding-block-start: 1.75rem;
}

/* Inset separators preserve the section boxes and table geometry. */
.co-ct-search-page .search-surface::after,
.co-ct-search-page .scope-explainer::before,
.co-ct-search-page .ct-explainer::before {
    content: "";
    position: absolute;
    inset-inline: var(--page-band-inline-padding);
    block-size: 0;
    border-block-start: 1px solid var(--co-border-color);
    pointer-events: none;
}

.co-ct-search-page .search-surface::after {
    inset-block-end: 0;
}

.co-ct-search-page .scope-explainer::before,
.co-ct-search-page .ct-explainer::before {
    inset-block-start: 0;
}

.co-ct-search-page .explainer-section h2 {
    margin: 0 0 0.5rem;
    font-size: var(--font-size-title);
}

.co-ct-search-page .explainer-section p {
    margin: 0;
    max-width: 56rem;
    color: var(--co-text-color);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.co-ct-search-page .explainer-section p + p {
    margin-top: 0.75rem;
}

.co-ct-search-page .scope-example-list {
    display: grid;
    grid-template-columns: minmax(11rem, max-content) minmax(0, 1fr);
    gap: 0.5rem 1.125rem;
    max-width: var(--scope-explainer-content-width);
    margin: 0;
}

.co-ct-search-page .scope-example-list dt {
    font-weight: 600;
}

.co-ct-search-page .scope-example-list dd {
    display: grid;
    gap: 0.375rem;
    margin: 0;
}

.co-ct-search-page .scope-example-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--gap-small);
}

.co-ct-search-page .scope-example-label {
    font-size: var(--font-size-label);
    font-weight: 600;
}

.co-ct-search-page .scope-example-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.co-ct-search-page .scope-example-list code {
    border: 1px solid var(--co-border-color);
    border-radius: var(--radius-chip);
    background: var(--co-surface-subtle-color);
    font-family: var(--font-mono);
    font-size: var(--font-size-chip);
    font-variant-ligatures: none;
    line-height: 1.2;
    padding: var(--chip-padding-block) var(--chip-padding-inline);
    overflow-wrap: anywhere;
}

/* Scope help reuses the inline explanation in a native modal dialog. */
html:has(.scope-help-dialog[open]) {
    overflow: hidden;
}

.co-ct-search-page .scope-help-dialog {
    inline-size: var(--scope-explainer-content-width);
    max-inline-size: calc(100% - 2 * var(--co-gutter));
    max-block-size: calc(100dvh - 2 * var(--co-gutter));
    margin: auto;
    padding: 1rem;
    border: 1px solid var(--co-border-color);
    border-radius: var(--radius-control);
    overflow: hidden;
    background: var(--co-surface-color);
    color: var(--co-text-color);
}

.co-ct-search-page .scope-help-dialog[open] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.co-ct-search-page .scope-help-dialog::backdrop {
    background: var(--co-ct-dialog-backdrop-color);
}

.co-ct-search-page .scope-help-header {
    display: flex;
    /* Put Close above the heading when they cannot share a row. */
    flex-wrap: wrap-reverse;
    align-items: start;
    gap: 0.75rem;
}

.co-ct-search-page .scope-help-header h2 {
    flex: 1 1 12rem;
    min-inline-size: 0;
    margin: 0;
}

/* WebKit may show an autofocus outline even after a pointer opening. */
.co-ct-search-page .scope-help-dialog[data-pointer-opened] #scopeHelpHeading {
    outline: none;
}

.co-ct-search-page .scope-help-close-button {
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    /* Align the icon with the heading’s first line and balance its corner insets. */
    margin-block-start: -0.625rem;
    margin-inline-start: auto;
    margin-inline-end: -0.625rem;
    padding: 0;
}

.co-ct-search-page .scope-help-content {
    container: scope-help / inline-size;
    min-block-size: 0;
    overflow: auto;
    overflow-wrap: anywhere;
    scrollbar-gutter: stable;
}

@container scope-help (width < 36rem) {
    .co-ct-search-page .scope-example-list,
    .co-ct-search-page .scope-example-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1875rem;
    }

    .co-ct-search-page .scope-example-list {
        gap: 0.25rem;
    }

    .co-ct-search-page .scope-example-list dd:not(:last-child) {
        margin-bottom: 0.625rem;
    }
}

/* Responsive scope examples retain their existing viewport breakpoint. */
@media (width <= 33rem) {
    .co-ct-search-page .scope-example-list,
    .co-ct-search-page .scope-example-row {
        grid-template-columns: 1fr;
        gap: 0.1875rem;
    }

    .co-ct-search-page .scope-example-list {
        gap: 0.25rem;
    }

    .co-ct-search-page .scope-example-list dd:not(:last-child) {
        margin-bottom: 0.625rem;
    }
}