/* /ssl — TLS Chain Explorer. Reuses the site's existing CSS variables; no new
   visual language, only layout for the chain cards and mode tabs. */

/* PIX-VIS-021: a single horizontally-scrollable strip on narrow screens
   instead of wrapping onto several rows. */
.tls-mode-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tls-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 14px;
    cursor: pointer;
    font: inherit;
}

.tls-tab[aria-selected="true"] {
    color: var(--text-bright);
    border-color: var(--text);
    box-shadow: 0 0 6px var(--glow);
}

/* PIX-VIS-031: this is a sentence-length option description, not a short
   field label -- the global `label { text-transform: uppercase }` turned
   it into a letter-spaced uppercase paragraph. Reset to sentence case and
   cap the measure at ~75ch (existing text, not touched). */
.tls-checkbox-label {
    display: block;
    margin: 0.5rem 0 1rem;
    max-width: 75ch;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
}

/* This block's text is continuous prose, not a table or a command: normal
   reflow (word-wrap at any width) reads better than the global pre-wrap rule
   fighting the template's own hard line breaks (PIX-VIS-032). */
.tls-help {
    white-space: normal;
}

/* Native checkboxes render tiny on phones; scaling the box also scales its
   clickable area, so this is a real touch-target fix, not just a visual one
   (PIX-VIS-033). Desktop keeps the browser default size. */
@media (max-width: 720px) {
    .tls-checkbox-label input[type="checkbox"] {
        width: 20px;
        height: 20px;
        transform: scale(1.6);
        transform-origin: left center;
        margin-right: 10px;
        vertical-align: middle;
    }
}

/* PIX-VIS-043: shares style.css's .msg-error box (red border, not just red
   text) instead of its own red-on-grey treatment. */
.tls-error {
    color: var(--text-err);
    border-color: var(--text-err);
    text-shadow: 0 0 4px var(--glow-err);
}

.tls-chain {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
}

.tls-cert-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.75rem 1rem;
    margin: 0.25rem 0;
    overflow-wrap: anywhere;
}

.tls-cert-role {
    font-weight: bold;
    letter-spacing: 0.08em;
    color: var(--text-bright);
    margin-bottom: 0.4rem;
}

.tls-role-server { color: var(--text-bright); }
.tls-role-intermediate { color: var(--text); }
.tls-role-root { color: var(--warn); }
.tls-role-self-signed { color: var(--warn); }
.tls-role-unknown-issuer { color: var(--text-err); }

.tls-chain-arrow {
    text-align: center;
    color: var(--text-dim);
    padding: 2px 0;
}

.tls-cert-summary {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 2px 12px;
    margin: 0;
}

.tls-cert-summary dt {
    color: var(--text-dim);
}

.tls-cert-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Fingerprints are compared byte by byte; break-all/anywhere split a byte
   pair in the middle ("...:26:B" / "B:2F..."), which invites a misread. The
   template cannot insert a <wbr> after each colon here (this partial is
   plain {{ }} escaping only, by design -- see the file header), so the fix
   is the CSS half of the same option the finding offers: keep the fingerprint
   on one line and let it scroll sideways in its own box instead of wrapping
   at all (PIX-VIS-032). */
.tls-fingerprint {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    max-width: 100%;
    /* A grid item does not shrink below its content's natural width by
       default (min-width: auto); without this, a nowrap value this long
       would instead stretch the whole two-column dl wider than its card. */
    min-width: 0;
}

.tls-pem-preview {
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.tls-download-row {
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.tls-warnings li {
    margin-bottom: 0.3rem;
}

.tls-endpoint-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1rem;
    display: block;
    overflow-x: auto;
}

.tls-endpoint-table th,
.tls-endpoint-table td {
    border: 1px solid var(--border);
    padding: 4px 8px;
    text-align: left;
    white-space: nowrap;
}

.tls-ca-list li {
    margin-bottom: 0.5rem;
}

.tls-readiness-result {
    font-weight: bold;
    color: var(--text-bright);
}

@media (max-width: 480px) {
    .tls-cert-summary {
        grid-template-columns: 1fr;
    }

    .tls-endpoint-table th,
    .tls-endpoint-table td {
        white-space: normal;
    }
}