/* Buttons: Deep Navy primary, Athletic Gold high-emphasis, subtle ghost. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    min-height: var(--btn-height);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: var(--text-label-md);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
    text-transform: none;
}

/* The display:inline-flex above beats the browser's own [hidden] — re-assert it, so a button a page keeps
   as a no-script fallback (the "Read sheet" under a drop zone, which submits on its own once scripts run)
   actually disappears when marked hidden. */
.btn[hidden] {
    display: none;
}

/* An icon inside a button follows the label's scale. Without this the 24px base icon size makes an icon
   button taller than a text-only one sitting beside it. */
.btn .material-symbols-outlined {
    font-size: var(--btn-icon-size);
}

.btn:active {
    transform: translateY(1px);
}

/* Equal-sized action buttons: same minimum width and centred content, so a row of them lines up
   regardless of their label or icon. Width is the --btn-min-width token. */
.btn--uniform {
    min-width: var(--btn-min-width);
    justify-content: center;
}

.btn--primary {
    background: var(--primary);
    color: var(--on-primary);
}

.btn--primary:hover {
    opacity: 0.9;
}

.btn--gold {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

.btn--gold:hover {
    opacity: 0.9;
}

.btn--ghost {
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    border-color: var(--outline-variant);
}

.btn--ghost:hover {
    background: var(--surface-container);
}

.btn--block {
    width: 100%;
    justify-content: center;
}

/* Translucent outline button for use on dark surfaces (hero, CTA band). */
.btn--on-dark {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.btn--on-dark:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn--lg {
    padding: var(--space-md) var(--space-xl);
}

.btn--sm {
    padding: 6px 10px;
    font-size: 12px;
}

/* Destructive action (remove provider/model). */
.btn--danger {
    background: var(--error);
    color: var(--on-error);
}

.btn--danger:hover {
    opacity: 0.9;
}

/* A race's name in a race list is the way in (X10 — Dan, E-01): it reads as a button, name in bold, with an
   open icon, so nobody creates a second race because they couldn't find the first. */
.race-open {
    font-weight: 700;
    white-space: normal;
    text-align: left;
}