button,
.button {
    background-color: var(--ink);
    color: #fff;
    cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease;
}

button:hover,
button:focus-visible,
.button:hover,
.button:focus-visible,
.button--quiet:hover,
.button--quiet:focus-visible {
    background-color: var(--coral);
    color: #fff;
    transform: translateY(-2px);
}

button:focus-visible,
.button:focus-visible,
input[type="file"]:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

button:disabled,
button:disabled:hover,
button:disabled:focus-visible,
.button[aria-disabled="true"],
.button[aria-disabled="true"]:hover,
.button[aria-disabled="true"]:focus-visible {
    background-color: var(--ink);
    color: #fff;
    cursor: not-allowed;
    opacity: .5;
    transform: none;
}

.site-nav__logout {
    background-color: transparent;
    color: var(--muted);
    transition: color 200ms ease, transform 200ms ease;
}

.site-nav__logout:hover,
.site-nav__logout:focus-visible {
    background-color: transparent;
    color: var(--coral);
    transform: translateY(-2px);
}

.play-overlay:hover,
.play-overlay:focus-visible {
    background-color: var(--coral);
    transform: translate(-50%, -50%) translateY(-2px);
}

/* --- share buttons (issue #32) ---------------------------------------- */
/* Icon-only controls next to the text buttons of a page. The service name lives
   in aria-label and in the tooltip, the mark is the inline SVG from
   core/templates/core/_share_icons.html, and the size matches a text button, so
   the row stays quiet and no icon is requested from another host. */



.share-buttons { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
/* The fill, the border and the coral hover are the ones every button uses
   (issue #32), so the row reads as one set of controls; only the shape differs,
   because these controls carry an icon instead of a word. */
.share-button {
    align-items: center;
    background-color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--cream);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}
.share-button:hover, .share-button:focus-visible {
    background-color: var(--coral);
    border-color: var(--coral);
    color: #fff;
    transform: translateY(-2px);
}
.share-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.share-button__icon { fill: currentColor; height: 18px; width: 18px; }

input[type="file"]::file-selector-button {
    transition: background-color 200ms ease, transform 200ms ease;
}

input[type="file"]:hover::file-selector-button {
    background-color: var(--coral);
    color: #fff;
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    main,
    button,
    .button,
    .site-nav__logout,
    input[type="file"]::file-selector-button {
        animation: none;
        transition: none;
    }

    button:hover,
    button:focus-visible,
    .button:hover,
    .button:focus-visible,
    .site-nav__logout:hover,
    .site-nav__logout:focus-visible,
    input[type="file"]:hover::file-selector-button {
        transform: none;
    }

    .play-overlay:hover,
    .play-overlay:focus-visible {
        transform: translate(-50%, -50%);
    }

    .share-button:hover,
    .share-button:focus-visible {
        transform: none;
    }
}