.co-ct-search-page {
    --surface: var(--co-body-bg-color);
    --surface-subtle: var(--co-tertiary-bg-color);
    --line: var(--co-border-color);
    --line-strong: var(--co-tertiary-color);
    --text: var(--co-body-color);
    --text-muted: var(--co-secondary-color);
    --focus-ring-color: rgba(13, 110, 253, .25);
    --match-highlight-bg: #fff3cd;
    --urgent: #b02a37;
    --urgent-bg: #f8d7da;
    --urgent-border: #f1aeb5;
    --warning: #984c0c;
    --warning-bg: #fff3cd;
    --warning-border: #ffe69c;
    --status-ok-bg: var(--surface-subtle);
    --chip-muted-bg: #e9ecef;
    --interactive-hover-bg: #e9ecef;
    --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: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --page-max-width: 90rem;
    --page-gutter: 1rem;
    --page-band-inline-padding: max(var(--page-gutter), calc((100% - var(--page-max-width)) / 2 + var(--page-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;
    --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-inventory-column-width: 3rem;
    --certificate-inventory-control-size: var(--certificate-toggle-target-size);
    --certificate-inventory-icon-size: var(--certificate-toggle-icon-size);
    --certificate-inventory-column-reserved-width: 0rem;
    --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) + var(--certificate-inventory-column-reserved-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(--text);
    font-size: var(--font-size-body);
}

.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 [hidden] {
    display: none !important;
}

.co-ct-search-page .ct-search-results--with-inventory {
    --certificate-inventory-column-reserved-width: var(--certificate-inventory-column-width);
}

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

.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);
    font-weight: 700;
    letter-spacing: 0;
}

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

.co-ct-search-page .search-surface {
    background: var(--surface-subtle);
    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 .criteria-fieldset {
    display: grid;
    gap: var(--gap-control);
    min-inline-size: 0;
    border: 0;
    padding: 0;
}

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

.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(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font-size: var(--font-size-control);
    padding-block: var(--control-padding-block);
    padding-inline: var(--control-padding-inline);
}

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

.co-ct-search-page input:focus,
.co-ct-search-page select:focus,
.co-ct-search-page .primary-button:focus-visible,
.co-ct-search-page .more-pill:focus-visible,
.co-ct-search-page .certificate-expander:focus-visible,
.co-ct-search-page .certificate-inventory-control:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
}

.co-ct-search-page .primary-button {
    min-block-size: var(--control-min-block-size);
    min-inline-size: 6rem;
    border: 1px solid var(--text);
    border-radius: var(--radius-control);
    background: var(--text);
    color: var(--surface);
    cursor: pointer;
    font-size: var(--font-size-control);
    font-weight: 600;
    padding-block: var(--control-padding-block);
    padding-inline: 0.6875rem;
    white-space: nowrap;
}

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

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

.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(--line);
    border-top: 2px solid var(--line-strong);
    background: var(--surface);
    overflow: clip;
}

.co-ct-search-page .group-summary {
    background: var(--surface);
    padding: 0.8125rem var(--result-group-inline-padding) 0.875rem;
}

.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 .ct-search-results--with-inventory .summary-fields {
    grid-template-columns: minmax(0, 1fr) var(--certificate-logged-column-width) var(--certificate-valid-until-column-width) var(--certificate-inventory-column-width);
}

.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(--text-muted);
    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(--text);
    font-size: var(--font-size-label);
    font-weight: 600;
}

.co-ct-search-page .meta-value {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    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);
}

.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(--line);
    background: var(--surface-subtle);
    color: var(--text);
    font-family: var(--font-mono);
    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(--match-highlight-bg);
    color: inherit;
    padding: 0 0.125rem;
}

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

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

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

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

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

.co-ct-search-page .group-details {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 0 var(--result-group-inline-padding);
}

.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(--line);
    color: var(--text);
    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(--text);
}

.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(--line);
    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-inventory-column {
    width: var(--certificate-inventory-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);
}

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

.co-ct-search-page .certificate-inventory-cell form {
    margin: 0;
}

.co-ct-search-page .certificate-inventory-control {
    display: inline-grid;
    place-items: center;
    inline-size: var(--certificate-inventory-control-size);
    block-size: var(--certificate-inventory-control-size);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text);
    padding: 0;
    text-decoration: none;
}

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

.co-ct-search-page .certificate-inventory-control .bi {
    inline-size: var(--certificate-inventory-icon-size);
    block-size: var(--certificate-inventory-icon-size);
}

.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(--text-muted);
    cursor: pointer;
    padding: 0;
}

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

.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(--text);
    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;
}

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

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

@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 .certificate-inventory-cell {
        padding-block: var(--certificate-toggle-cell-block-padding);
    }

    .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 .ct-search-results:not(.ct-search-results--with-inventory) .certificate-table--flex-columns-2 .certificate-serial-column {
            width: var(--certificate-serial-max-column-width);
        }
    }

    @container certificate-table (width > 72.5rem) {
        .co-ct-search-page .ct-search-results--with-inventory .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 .ct-search-results:not(.ct-search-results--with-inventory) .certificate-table--flex-columns-3 .certificate-serial-column {
            width: var(--certificate-serial-max-column-width);
        }
    }

    @container certificate-table (width > 93.5rem) {
        .co-ct-search-page .ct-search-results--with-inventory .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(--line);
        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 .controls-grid,
    .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(--line);
    }

    .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(--text);
        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(--line);
    }

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

@media (width <= 33rem) {
    .co-ct-search-page .form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

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

    .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);
    }
}