/**
 * Step 3 Batch 7 — Cross-page consistency, calm interaction, a11y polish.
 * Consumes Step 2 design-system tokens; does not redefine the system.
 */

:root {
    --fd-motion-calm: 180ms;
    --fd-motion-calm-slow: 220ms;
}

/* ── Calm transitions (no bounce / gaming) ── */
.fd-btn,
.fi-btn,
.fi-topbar__link,
.fi-dd-dataset-card,
.fi-reg-card,
.fi-courses-list-item,
.fi-dd-discussion-filter {
    transition-duration: var(--fd-motion-calm, 180ms);
    transition-timing-function: var(--fd-ease, ease);
}

.fi-topbar__nav,
.fi-dd-discussion,
.fi-dd-detail-discussion-drawer.fi-dd-discussion {
    transition-duration: var(--fd-motion-calm-slow, 220ms);
}

/* ── Journey modal scroll lock (courses files panel, etc.) ── */
body.fi-journey-modal-open {
    overflow: hidden;
}

/* ── Bridge: legacy fi-* surfaces consume DS focus + type ── */
.fi-card {
    border-radius: var(--fd-radius-md, 16px);
    border: 1px solid var(--fd-soft-border, rgba(32, 32, 32, 0.075));
    background: var(--fd-white, #fffdf8);
    box-shadow: var(--fd-shadow-soft);
}

.fi-eyebrow {
    font-size: var(--fd-text-eyebrow);
    font-weight: var(--fd-font-weight-subheading, 700);
    letter-spacing: var(--fd-letter-eyebrow, 0.08em);
    text-transform: uppercase;
    color: var(--fd-accent-deep, var(--fd-gold-deep, #a86a00));
}

.fi-heading-xl,
.fi-heading-lg,
.fi-heading-md {
    font-family: var(--fd-font-heading, 'Inter', system-ui, sans-serif);
    font-weight: var(--fd-font-weight-heading, 800);
    letter-spacing: var(--fd-letter-tight, -0.02em);
    color: var(--fd-text-strong, var(--fd-black, #0e0e0e));
}

.fi-heading-xl { font-size: var(--fd-text-h1); line-height: var(--fd-line-height-heading, 1.12); }
.fi-heading-lg { font-size: var(--fd-text-h2); line-height: var(--fd-line-height-heading, 1.15); }
.fi-heading-md { font-size: var(--fd-text-h3); line-height: 1.25; }

.fi-lead {
    font-size: var(--fd-text-body-lg);
    line-height: var(--fd-line-height-body, 1.6);
    color: var(--fd-muted-text, #6f6a62);
}

.fi-input,
select.fi-input,
textarea.fi-input {
    width: 100%;
    min-height: var(--fd-touch-min, 44px);
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--fd-soft-border);
    border-radius: var(--fd-radius-sm, 10px);
    font-size: var(--fd-text-body);
    color: var(--fd-text-primary, var(--fd-charcoal, #202020));
    background: var(--fd-white, #fff);
    box-sizing: border-box;
}

.fi-input:focus-visible,
select.fi-input:focus-visible,
textarea.fi-input:focus-visible {
    outline: 2px solid var(--fd-gold-highlight, #f5be3d);
    outline-offset: 2px;
}

.fd-field.is-invalid .fi-input,
.fd-field.is-invalid select.fi-input {
    border-color: rgba(185, 28, 28, 0.55);
}

/* ── Empty list states (courses catalog JS) ── */
.fi-courses-list-empty {
    margin: 0;
    padding: var(--fd-space-5, 20px);
    border-radius: var(--fd-radius-md, 16px);
    border: 1px dashed var(--fd-soft-border);
    background: rgba(255, 255, 255, 0.55);
    color: var(--fd-muted-text);
    font-size: var(--fd-text-body);
}

.fi-courses-list-empty[role='status'] {
    list-style: none;
}

/* ── Courses files dialog ── */
.fi-courses-files-panel[role='dialog'] {
    margin-top: var(--fd-space-4, 16px);
    padding: var(--fd-space-4, 16px);
    border-radius: var(--fd-radius-md, 16px);
    border: 1px solid var(--fd-soft-border);
    background: var(--fd-white, #fffdf8);
    box-shadow: var(--fd-shadow-elevated);
}

.fi-courses-files-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fd-space-3, 12px);
    margin-bottom: var(--fd-space-3, 12px);
}

/* ── Selected / active states (not color-only) ── */
.fi-courses-list-item.is-active {
    border-color: rgba(217, 154, 22, 0.45);
    box-shadow: inset 0 0 0 1px rgba(217, 154, 22, 0.15);
}

.fi-courses-tab[aria-selected='true'] {
    border-bottom-color: var(--fd-gold, #d99a16);
    font-weight: 700;
}

/* ── Badges: fi-badge bridge already in DS; ensure touch-friendly chip links ── */
.fi-badge,
.fd-badge {
    min-height: 1.75rem;
    display: inline-flex;
    align-items: center;
}

/* ── Public tables: contained scroll + readable focus ── */
.fi-learn-resource-list,
.fd-table-wrap,
.fi-dd-leaderboard-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.fi-dd-leaderboard-table th,
.fi-dd-leaderboard-table td {
    padding: 0.65rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.fi-dd-leaderboard-table th {
    font-size: var(--fd-text-eyebrow);
    letter-spacing: var(--fd-letter-eyebrow, 0.08em);
    text-transform: uppercase;
    color: var(--fd-muted-text);
}

/* ── Error / state pages share auth page rhythm ── */
.fi-auth-page .fd-state {
    max-width: 42rem;
    margin-inline: auto;
    width: 100%;
}

/* ── Reduced motion: disable decorative transforms ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .fi-dd-dataset-card:hover,
    .fi-dd-dataset-card:focus-within,
    .fi-reg-card:hover {
        transform: none !important;
    }

    .fi-reg-featured__art {
        transform: none !important;
    }
}