/* ============================================================================
   components.css — UI primitives. Built on theme.css tokens.
   Every interactive thing comes from here, not ad-hoc styling.
   ============================================================================ */

/* ─── BUTTONS ──────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-5);
    height: 44px;
    min-width: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    background: transparent;
    color: var(--text-primary);
    transition: background var(--motion-fast), border-color var(--motion-fast),
                color var(--motion-fast), transform var(--motion-fast),
                box-shadow var(--motion-fast);
    white-space: nowrap;
    text-decoration: none;
}

.btn:focus-visible       { outline: none; box-shadow: var(--shadow-glow); }
.btn:active              { transform: translateY(0.5px) scale(0.99); }
.btn:disabled,
.btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn .bi { font-size: 1.05em; line-height: 1; }

/* Sizes */
.btn--sm { height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-xs); }
.btn--lg { height: 52px; padding: 0 var(--sp-6); font-size: var(--fs-base); }
.btn--block { width: 100%; }

/* Variants */
.btn--primary {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, var(--shadow-sm);
}
.btn--primary:hover  { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--primary:active { background: var(--accent-active); }

.btn--secondary {
    background: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn--secondary:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text-primary); transform: translateY(-1px); }

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.btn--ghost:hover { background: var(--surface-2); color: var(--text-primary); }

.btn--danger {
    background: var(--danger);
    color: var(--text-on-accent);
    border-color: var(--danger);
}
.btn--danger:hover  { background: #f55865; border-color: #f55865; color: var(--text-on-accent); transform: translateY(-1px); }
.btn--danger:focus-visible { box-shadow: var(--shadow-glow-danger); }

.btn--link {
    height: auto;
    padding: 0;
    background: transparent;
    color: var(--accent-text);
    border: 0;
    box-shadow: none;
    font-weight: var(--fw-medium);
}
.btn--link:hover { color: var(--accent-hover); text-decoration: underline; }

/* Loading state */
.btn--loading { color: transparent !important; pointer-events: none; position: relative; }
.btn--loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    color: var(--text-on-accent);
}
.btn--secondary.btn--loading::after,
.btn--ghost.btn--loading::after { color: var(--text-primary); }

@keyframes spin { to { transform: rotate(360deg); } }

/* Button group (segmented) */
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; border-right-width: 0; }
.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-right-width: 1px; }

/* ─── INPUTS ──────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: var(--sp-5); }

.field__label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    line-height: 1.4;
}
.field__label--required::after { content: ' *'; color: var(--accent); font-weight: var(--fw-bold); }

.field__hint {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    line-height: 1.5;
}
.field__error {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.input,
.textarea,
.select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
    -webkit-appearance: none;
    appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--text-tertiary); }

.input:hover,
.textarea:hover,
.select:hover { border-color: var(--border-strong); background: var(--surface-3); }

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
    background: var(--surface-2);
}

.input:disabled,
.textarea:disabled,
.select:disabled { opacity: 0.5; cursor: not-allowed; }

.textarea {
    height: auto;
    min-height: 120px;
    padding: var(--sp-3) var(--sp-4);
    resize: vertical;
    line-height: var(--lh-body);
}

.textarea--lg { min-height: 200px; }

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8a94' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-4) center;
    padding-right: var(--sp-7);
}

/* States */
.field--error .input,
.field--error .textarea,
.field--error .select { border-color: var(--danger); }
.field--error .input:focus,
.field--error .textarea:focus { box-shadow: var(--shadow-glow-danger); }

.field--success .input { border-color: var(--success); }

/* Checkbox / Radio */
.checkbox, .radio {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    line-height: 1.4;
    user-select: none;
}
.checkbox input,
.radio input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px; height: 20px;
    margin: 0;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--motion-fast), border-color var(--motion-fast);
    position: relative;
}
.radio input { border-radius: 50%; }
.checkbox input:checked,
.radio input:checked { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/%3E%3C/svg%3E") center/14px no-repeat;
}
.radio input:checked::after {
    content: '';
    position: absolute;
    inset: 5px;
    background: white;
    border-radius: 50%;
}
.checkbox input:focus-visible,
.radio input:focus-visible { box-shadow: var(--shadow-glow); }

/* Scale (1-10 horizontal pill scale) */
.scale {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}
.scale__btn {
    flex: 1;
    min-width: 36px;
    height: 44px;
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--motion-fast);
}
.scale__btn:hover { background: var(--surface-3); color: var(--text-primary); border-color: var(--border-strong); }
.scale__btn[aria-pressed='true'] {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.scale__legend {
    display: flex;
    justify-content: space-between;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}

/* ─── CARDS ──────────────────────────────────────────────────────────── */

.card {
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.card--hover { cursor: pointer; }
.card--hover:hover {
    background: var(--surface-3);
    border-color: var(--border-default);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.card__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0;
}
.card__subtitle {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: var(--sp-1);
}
.card__footer {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

/* ─── OPTION CARD (radio/checkbox group with visual selection) ─────────── */

.option-card {
    position: relative;
    display: block;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    cursor: pointer;
    transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.option-card:hover {
    border-color: var(--border-default);
    background: var(--surface-3);
}
.option-card input[type="radio"],
.option-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.option-card:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-softer);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.option-card:has(input:focus-visible) {
    box-shadow: var(--shadow-glow);
}
.option-card__title {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}
.option-card__desc {
    color: var(--text-tertiary);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

/* ─── BADGES + PILLS ──────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.badge--accent  { background: var(--accent-soft);  color: var(--accent-text); border-color: var(--accent-border); }
.badge--success { background: var(--success-soft); color: var(--success);     border-color: rgba(61, 214, 140, 0.3); }
.badge--warning { background: var(--warning-soft); color: var(--warning);     border-color: rgba(245, 165, 36, 0.3); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger);      border-color: rgba(239, 68, 82, 0.3); }
.badge--info    { background: var(--info-soft);    color: var(--info);        border-color: rgba(110, 168, 255, 0.3); }

.badge--dot::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge--pill { border-radius: var(--radius-pill); padding: 2px var(--sp-3); }

/* ─── PROGRESS ────────────────────────────────────────────────────────── */

.progress {
    width: 100%;
    height: 6px;
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
}
.progress__fill {
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
    transition: width var(--motion-slow);
    box-shadow: 0 0 12px rgba(230, 92, 0, 0.4);
}
.progress--sm  { height: 4px; }
.progress--lg  { height: 10px; }
.progress--success .progress__fill { background: var(--success); box-shadow: 0 0 12px rgba(61, 214, 140, 0.4); }

.progress-segments {
    display: flex;
    gap: var(--sp-1);
    width: 100%;
}
.progress-segments__seg {
    flex: 1;
    height: 4px;
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    transition: background var(--motion-base);
}
.progress-segments__seg--done    { background: var(--success); }
.progress-segments__seg--current { background: var(--accent); }

/* ─── MODALS ──────────────────────────────────────────────────────────── */

.modal-backdrop {
    position: fixed; inset: 0;
    background: var(--surface-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base);
}
.modal-backdrop[data-open='true'] { opacity: 1; pointer-events: auto; }

.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -48%) scale(0.96);
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    z-index: calc(var(--z-modal) + 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base), transform var(--motion-base);
}
.modal[data-open='true'] {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.modal--lg { width: min(800px, calc(100vw - 32px)); }
.modal--xl { width: min(1080px, calc(100vw - 32px)); }

.modal__header,
.modal__footer {
    padding: var(--sp-4) var(--sp-5);
}
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
}
.modal__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.modal__body  { padding: var(--sp-5); overflow-y: auto; }
.modal__footer {
    display: flex; justify-content: flex-end; gap: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
}
.modal__close {
    background: transparent; border: 0;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    transition: background var(--motion-fast), color var(--motion-fast);
}
.modal__close:hover { color: var(--text-primary); background: var(--surface-3); }

@media (max-width: 640px) {
    .modal {
        width: 100vw; height: 100vh; max-height: 100vh;
        top: 0; left: 0;
        transform: translateY(20px);
        border-radius: 0;
        border: 0;
    }
    .modal[data-open='true'] { transform: translateY(0); }
}

/* ─── TOASTS ──────────────────────────────────────────────────────────── */

.toast-stack {
    position: fixed;
    top: var(--sp-4);
    right: var(--sp-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: none;
    width: min(400px, calc(100vw - 32px));
}
.toast {
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    animation: toast-slide var(--motion-base) var(--ease-out);
}
@keyframes toast-slide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.toast--success { border-left-color: var(--success); }
.toast--error,
.toast--danger  { border-left-color: var(--danger); }
.toast--warning { border-left-color: var(--warning); }
.toast--info    { border-left-color: var(--info); }
.toast__icon { color: var(--text-secondary); flex-shrink: 0; padding-top: 1px; }
.toast--success .toast__icon { color: var(--success); }
.toast--error   .toast__icon,
.toast--danger  .toast__icon { color: var(--danger); }
.toast--warning .toast__icon { color: var(--warning); }
.toast--info    .toast__icon { color: var(--info); }
.toast__body   { flex: 1; line-height: 1.5; }
.toast__close  {
    background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; padding: 0; line-height: 1;
}
.toast__close:hover { color: var(--text-primary); }

/* ─── EMPTY STATES ────────────────────────────────────────────────────── */

.empty {
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    color: var(--text-secondary);
}
.empty__icon {
    width: 56px; height: 56px;
    margin: 0 auto var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-tertiary);
    font-size: 24px;
}
.empty__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}
.empty__body {
    color: var(--text-secondary);
    max-width: 360px;
    margin: 0 auto var(--sp-5);
    line-height: var(--lh-body);
}

/* ─── SKELETONS ───────────────────────────────────────────────────────── */

.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
    border-radius: var(--radius-sm);
    color: transparent;
    user-select: none;
}
.skeleton--line  { height: 12px; margin-bottom: var(--sp-2); }
.skeleton--title { height: 24px; margin-bottom: var(--sp-3); width: 60%; }
.skeleton--block { height: 80px; margin-bottom: var(--sp-3); border-radius: var(--radius-md); }
.skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── TABLES ──────────────────────────────────────────────────────────── */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.table th,
.table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}
.table th {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-tertiary);
    background: var(--surface-1);
    border-bottom-color: var(--border-default);
}
.table tbody tr { transition: background var(--motion-fast); }
.table tbody tr:hover { background: var(--surface-2); }
.table--clickable tbody tr { cursor: pointer; }

/* ─── DIVIDERS ────────────────────────────────────────────────────────── */

.hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--sp-5) 0; }
.hr--strong { border-top-color: var(--border-default); }

/* ─── CALLOUTS ────────────────────────────────────────────────────────── */

.callout {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-md);
    border: 1px solid;
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}
.callout__icon { font-size: 18px; flex-shrink: 0; padding-top: 2px; }
.callout__body { flex: 1; }
.callout__title { font-weight: var(--fw-semibold); margin-bottom: var(--sp-1); }

.callout--accent  { background: var(--accent-soft);  border-color: var(--accent-border);  color: var(--text-primary); }
.callout--accent  .callout__icon { color: var(--accent-text); }
.callout--success { background: var(--success-soft); border-color: rgba(61,214,140,0.3); color: var(--text-primary); }
.callout--success .callout__icon { color: var(--success); }
.callout--warning { background: var(--warning-soft); border-color: rgba(245,165,36,0.3);  color: var(--text-primary); }
.callout--warning .callout__icon { color: var(--warning); }
.callout--danger  { background: var(--danger-soft);  border-color: rgba(239,68,82,0.3);   color: var(--text-primary); }
.callout--danger  .callout__icon { color: var(--danger); }
.callout--info    { background: var(--info-soft);    border-color: rgba(110,168,255,0.3); color: var(--text-primary); }
.callout--info    .callout__icon { color: var(--info); }

/* ─── COACH NOTES CAROUSEL ───────────────────────────────────────────── */

.coach-notes { position: relative; }
/* Beats .callout { display:flex } — without !important the slide stays visible */
.coach-notes__slide[hidden] { display: none !important; }
.coach-notes__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}
.coach-notes__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    background: var(--surface-2);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.coach-notes__btn:hover {
    background: var(--surface-3);
    border-color: var(--accent-border);
    color: var(--text-primary);
}
.coach-notes__counter {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    min-width: 48px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ─── AVATARS ─────────────────────────────────────────────────────────── */

.avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    flex-shrink: 0;
    text-transform: uppercase;
}
.avatar--sm { width: 32px; height: 32px; font-size: var(--fs-xs); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-lg); }
.avatar--accent { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }

/* ─── KPI / STAT TILES ────────────────────────────────────────────────── */

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.stat__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-tertiary);
    font-weight: var(--fw-semibold);
}
.stat__value {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
}
.stat__meta {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

/* ─── AUTOSAVE INDICATOR ──────────────────────────────────────────────── */

.autosave {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.autosave__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    transition: background var(--motion-base);
}
.autosave--saving .autosave__dot {
    background: var(--accent);
    animation: pulse 1.2s ease-in-out infinite;
}
.autosave--saved .autosave__dot { background: var(--success); }
.autosave--error .autosave__dot { background: var(--danger); }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
}

/* ─── SPINNER ─────────────────────────────────────────────────────────── */

.spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.spinner--lg { width: 32px; height: 32px; border-width: 3px; }