/*
 * Staff-only commands in the top-right corner of a card.
 *
 * Publications and invited talks share this look. It lives in one file because
 * it previously lived in three template <style> blocks and had already drifted:
 * the eye ended up darker than the pencil beside it.
 *
 * Why the colour is set on the controls and not on the wrapper: a <button>
 * does not inherit `color` from its parent the way an <a> does, so colouring
 * the container left the eye at the browser's default near-black while the
 * pencil went grey.
 */

.publication-edit,
.talk-commands {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1;
    z-index: 2;
}

.publication-edit > a,
.publication-edit > button,
.talk-commands > a,
.talk-commands > button {
    color: #4C535D;
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

/*
 * Hover fades slightly, which is what a.icon in style.css does for every other
 * icon on the site. These controls deliberately do not carry the `icon` class
 * themselves: it sets `color` with !important, which reached the pencil (an
 * <a>) but not the eye (a <button>), and left the two looking opposite.
 */
.publication-edit > a:hover,
.publication-edit > a:focus,
.publication-edit > button:hover,
.publication-edit > button:focus,
.talk-commands > a:hover,
.talk-commands > a:focus,
.talk-commands > button:hover,
.talk-commands > button:focus {
    color: #4C535D;
    opacity: 0.7;
}

.publication-edit > button:disabled,
.talk-commands > button:disabled {
    cursor: default;
}