/* =========================================================
   FIGHTDLE — BOOKMARK PROMPT
   A thin dismissible strip that drops down from the top of every page.
   Fixed rather than sticky: the bodies across these pages vary a lot
   (some are centring flex columns), and a sticky element in a column
   with `justify-content: center` can settle halfway down a short page.
   Fixed sidesteps all of that; the body padding below compensates so
   nothing ends up hidden underneath it.
   ========================================================= */

.bm-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* above the page, below the modals (which sit at 999) */
    z-index: 60;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 44px 9px 14px;

    background: rgba(18, 18, 18, .96);
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);

    font-family: var(--font-body);
    font-size: clamp(12px, 3.1vw, 14px);
    letter-spacing: .02em;
    color: var(--ink-soft);
    text-align: left;

    animation: bm-drop .42s cubic-bezier(.2, .8, .2, 1) both;
}

/* Drops in rather than simply being there, so it reads as a notice arriving
   instead of chrome the player has to parse on every load. */
@keyframes bm-drop {
    from { transform: translateY(-100%); }
    to   { transform: none; }
}

.bm-bar.is-leaving {
    animation: bm-lift .25s ease-in both;
    pointer-events: none;
}

@keyframes bm-lift {
    from { transform: none; }
    to   { transform: translateY(-100%); }
}

.bm-bar__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
}

.bm-bar__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--gold);
}

.bm-bar__text { margin: 0; }

/* Emphasis by colour alone. Switching to the display face mid-sentence put
   Anton's much heavier stroke and taller x-height next to Barlow Condensed
   at the same size, which read as a mistake rather than emphasis. */
.bm-bar__em { color: var(--ink); }

.bm-bar__close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);

    /* 32px is about the smallest comfortable tap target */
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;

    padding: 0;
    color: var(--ink-soft);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--speed) var(--ease),
                background-color var(--speed) var(--ease);
}

.bm-bar__close svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
}

@media (hover: hover) {
    .bm-bar__close:hover {
        color: var(--ink);
        background: rgba(255, 255, 255, .1);
    }
}

/* Measured from the rendered bar, so a line that wraps on a narrow phone
   still pushes the page down by the right amount. Beats the bodies' own
   `padding` shorthands on specificity, which is why it is on body.<class>. */
body.has-bm-bar {
    padding-top: var(--bm-bar-height, 42px);
}