/* Probe result card (result-card.js). Loads after site.css. */

.rc-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: 0 20px 50px -30px rgba(21, 23, 28, .35);
    overflow: hidden;
    color: var(--ink);
    text-align: left;
}

.rc-tone-good { --tone: var(--good); --tone-bg: var(--good-bg); }
.rc-tone-warn { --tone: var(--warn); --tone-bg: var(--warn-bg); }
.rc-tone-bad { --tone: var(--bad); --tone-bg: var(--bad-bg); }
.rc-tone-neutral { --tone: var(--ink-2); --tone-bg: var(--neutral-bg); }

.rc-mono { font-family: var(--font-mono); }
.rc-muted { color: var(--muted); }
.rc-bad { color: var(--bad); font-weight: 600; }

/* Header */
.rc-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 32px;
    border-bottom: 1px solid var(--line-2);
}

.rc-meta {
    font: 500 12px var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.rc-target {
    margin: 8px 0 0;
    font: 600 30px/1.2 var(--font-mono);
    letter-spacing: -.02em;
    word-break: break-all;
}

.rc-summary {
    margin: 12px 0 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-2);
    text-wrap: pretty;
}

.rc-verdict {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--r-lg);
    background: var(--tone-bg);
}

.rc-verdict-tile {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--tone);
    color: #fff;
    font: 700 30px var(--font-sans);
}

.rc-verdict-label {
    font: 500 11px var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.rc-verdict-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--tone);
}

.rc-verdict-overall {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-2);
}

/* Dimensions */
.rc-dims {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    border-bottom: 1px solid var(--line-2);
}

.rc-dim {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-right: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    margin-bottom: -1px;
}

.rc-dim-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.rc-dim-label {
    font: 500 12px var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.rc-chip {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--tone-bg);
    color: var(--tone);
    font-size: 16px;
    font-weight: 700;
}

.rc-dim-value {
    font: 600 15px var(--font-mono);
    overflow-wrap: anywhere;
}

.rc-dim-status {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    background: var(--neutral-bg);
    font: 600 11px var(--font-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.rc-dim-note {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
    text-wrap: pretty;
}

.rc-dim-cap {
    font-size: 12px;
    color: var(--muted);
}

/* Blocks */
.rc-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    border-bottom: 1px solid var(--line-2);
}

.rc-row:last-child {
    border-bottom: 0;
}

.rc-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 26px 32px;
}

.rc-row > .rc-block + .rc-block {
    border-left: 1px solid var(--line-2);
}

.rc-block-wide {
    border-bottom: 1px solid var(--line-2);
}

.rc-block-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.rc-block-meta {
    font: 500 12px var(--font-mono);
    color: var(--muted);
}

.rc-h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.rc-empty {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.rc-pill {
    align-self: flex-start;
    padding: 4px 9px;
    border-radius: var(--r-sm);
    background: var(--tone-bg);
    color: var(--tone);
    font: 600 12px var(--font-mono);
    white-space: nowrap;
}

.rc-trend-improving { background: var(--good-bg); color: var(--good); }
.rc-trend-degrading { background: var(--bad-bg); color: var(--bad); }
.rc-trend-stable { background: var(--neutral-bg); color: var(--ink-2); }

/* Deadlines */
.rc-deadline {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--line-3);
}

.rc-deadline-year {
    font: 600 18px var(--font-mono);
}

.rc-deadline-label {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-2);
}

/* Trajectory */
.rc-trend-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 110px;
    padding: 0 16px 0 8%;
    border: 1px dashed #d6d3cc;
    border-radius: 8px;
    background: repeating-linear-gradient(135deg, #faf9f6 0 8px, #f3f1ec 8px 16px);
}

.rc-trend-dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--tone);
    box-shadow: 0 0 0 4px #fff;
}

.rc-trend-text {
    font: 500 13px/1.5 var(--font-mono);
    color: var(--muted);
    white-space: pre-line;
}

.rc-spark {
    width: 100%;
    height: auto;
}

.rc-spark-axis { font: 11px var(--font-mono); fill: var(--faint); }
.rc-spark-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.rc-spark-dot { fill: var(--action); }

/* Cipher table */
.rc-table-wrap {
    overflow-x: visible;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font: 500 13px var(--font-mono);
}

.rc-table th {
    padding: 0 12px 8px 0;
    border-bottom: 1px solid var(--line-2);
    font: 500 11px var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--faint);
}

.rc-table td {
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--line-3);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.rc-table tr:last-child td {
    border-bottom: 0;
}

/* Findings */
.rc-finding {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rc-sev {
    flex: none;
    margin-top: 2px;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--tone-bg);
    color: var(--tone);
    font: 600 11px var(--font-mono);
    text-transform: uppercase;
}

.rc-finding-text {
    font-size: 14px;
    line-height: 1.5;
}

.rc-gate {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding: 14px 16px;
    border: 1px dashed #c9c5bd;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink-2);
}

.rc-gate a {
    font-weight: 600;
    color: var(--action);
    text-decoration: none;
}

/* Certificate and export */
.rc-cert-lines {
    font: 500 13px/1.8 var(--font-mono);
    color: var(--ink-2);
    overflow-wrap: anywhere;
}

.rc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.rc-btn,
.rc-actions .btn-export {
    padding: 9px 14px;
    border: 1px solid #d6d3cc;
    border-radius: 6px;
    background: var(--card);
    color: var(--ink-2);
    font: 600 13px var(--font-sans);
    text-decoration: none;
    cursor: pointer;
}

.rc-btn-ink {
    border-color: var(--ink);
    color: var(--ink);
}

.rc-btn:hover,
.rc-btn:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.rc-actions select {
    padding: 8px 10px;
    border: 1px solid #d6d3cc;
    border-radius: 6px;
    background: var(--card);
    font: 500 13px var(--font-sans);
}

@media (max-width: 640px) {
    .rc-head,
    .rc-block {
        padding: 22px 20px;
    }

    .rc-dim {
        padding: 18px 20px;
        border-right: 0;
    }

    .rc-row > .rc-block + .rc-block {
        border-left: 0;
        border-top: 1px solid var(--line-2);
    }

    .rc-target {
        font-size: 24px;
    }

    .rc-deadline {
        grid-template-columns: 48px 1fr;
        row-gap: 6px;
    }

    .rc-deadline .rc-pill {
        grid-column: 2;
        justify-self: start;
    }

    .rc-table-wrap {
        overflow-x: auto;
    }

    .rc-table {
        min-width: 560px;
    }
}