.atlas-surface,
.atlas-card,
.atlas-interactive-card {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xlarge);
    background: var(--color-surface);
    box-shadow: var(--shadow-low);
}

.atlas-card {
    padding: var(--space-5);
}

.atlas-interactive-card {
    color: inherit;
    text-decoration: none;
}

.atlas-interactive-card:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-raised);
    transform: translateY(calc(var(--space-1) * -1));
}

.atlas-interactive-card:active {
    box-shadow: var(--shadow-low);
    transform: translateY(0);
}

.atlas-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.atlas-section-heading h2 {
    margin: 0;
    font-size: var(--font-size-card-title);
    font-weight: 700;
}

.atlas-section-heading a,
.atlas-local-error a,
.atlas-empty-panel a {
    color: var(--color-text-secondary);
    font-size: var(--font-size-label);
    font-weight: 650;
    text-underline-offset: var(--space-1);
}

.atlas-status-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-caption);
    font-weight: 700;
}

.atlas-status-line span {
    width: var(--space-2);
    height: var(--space-2);
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.atlas-status-line[data-tone="positive"] {
    color: var(--color-success);
}

.atlas-status-line[data-tone="information"] {
    color: var(--color-information);
}

.atlas-status-line[data-tone="warning"] {
    color: var(--color-warning);
}

.atlas-progress {
    overflow: hidden;
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.atlas-progress span {
    display: block;
    width: var(--progress);
    height: 100%;
    border-radius: inherit;
    background: var(--color-success);
}

.atlas-local-error,
.atlas-empty-panel {
    padding: var(--space-4);
    border-radius: var(--radius-large);
    background: var(--color-surface-muted);
}

.atlas-local-error {
    border-left: var(--space-1) solid var(--color-danger);
}

.atlas-local-error p,
.atlas-empty-panel p {
    margin: var(--space-2) 0;
    color: var(--color-text-secondary);
}

.atlas-skeleton {
    display: grid;
    gap: var(--space-3);
    width: 100%;
}

.atlas-skeleton span[aria-hidden="true"] {
    display: block;
    height: var(--space-5);
    border-radius: var(--radius-medium);
    background: var(--color-surface-muted);
}

.atlas-skeleton span[aria-hidden="true"]:nth-child(2n) {
    width: 72%;
}

@media (prefers-reduced-motion: no-preference) {
    .atlas-interactive-card {
        transition:
            border-color var(--motion-fast) var(--ease-standard),
            box-shadow var(--motion-standard) var(--ease-standard),
            transform var(--motion-fast) var(--ease-standard);
    }
}