/* Finished-sample block (sample-render.js), shared by /welcome and /sample.
   Chip bands copy Atlas's ScoreChip (emerald 7+, amber 4+, rose below). */

.cs-sample__heading {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 var(--space-sm);
}

.cs-sample__intro {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0 0 var(--space-lg);
    max-width: 62ch;
}

.cs-sample__card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
}

.cs-sample__article {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-md);
}

.cs-sample__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-heading);
    text-decoration: none;
}

.cs-sample__title:hover,
.cs-sample__title:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cs-sample__source {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: var(--space-xs) 0 0;
}

.cs-sample__mode {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-body);
    margin: 0 0 var(--space-lg);
}

.cs-sample__mode-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--teal-500) 12%, transparent);
    color: var(--teal-600);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.cs-sample__group + .cs-sample__group {
    margin-top: var(--space-lg);
}

.cs-sample__group-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0 0 var(--space-sm);
}

.cs-sample__dims {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-sm);
}

.cs-sample__dim {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: var(--space-md);
    align-items: center;
}

.cs-sample__chip {
    border-radius: var(--radius-md);
    border: 1px solid;
    padding: 8px 6px;
    text-align: center;
}

.cs-sample__chip-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
}

.cs-sample__chip-score {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.cs-sample__chip-of {
    font-size: 0.6875rem;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 1px;
}

.cs-sample__chip--high { background: color-mix(in srgb, #10b981 8%, var(--white)); border-color: #a7f3d0; color: #047857; }
.cs-sample__chip--mid  { background: color-mix(in srgb, #f59e0b 8%, var(--white)); border-color: #fcd34d; color: #b45309; }
.cs-sample__chip--low  { background: color-mix(in srgb, #ef4444 8%, var(--white)); border-color: #fca5a5; color: #b91c1c; }

.cs-sample__line {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-body);
    margin: 0;
}

.cs-sample__read {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: var(--space-lg) 0 0;
}

.cs-sample__read a {
    color: var(--accent-hover);
}

@media (max-width: 520px) {
    .cs-sample__card { padding: var(--space-md); }
    .cs-sample__dim {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .cs-sample__chip {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 6px 12px;
    }
    .cs-sample__chip-score { margin-top: 0; }
}

/* Dark theme: card on the dark surface ramp, chips tinted from it. */
:root[data-theme="dark"] .cs-sample__card {
    background: var(--dk-surface);
    box-shadow: none;
}

:root[data-theme="dark"] .cs-sample__mode-pill { color: var(--teal-300); }
:root[data-theme="dark"] .cs-sample__read a { color: var(--teal-300); }
:root[data-theme="dark"] .cs-sample__chip--high { background: color-mix(in srgb, #10b981 14%, var(--dk-surface)); border-color: #065f46; color: #6ee7b7; }
:root[data-theme="dark"] .cs-sample__chip--mid  { background: color-mix(in srgb, #f59e0b 14%, var(--dk-surface)); border-color: #92400e; color: #fcd34d; }
:root[data-theme="dark"] .cs-sample__chip--low  { background: color-mix(in srgb, #ef4444 14%, var(--dk-surface)); border-color: #991b1b; color: #fca5a5; }