/* ============================================================================
   THE BACK PILL - one way out, in one place, on every screen.

   The rule across the whole site:
     LEAVING A SCREEN   -> this pill, fixed top-left, "<- Back"
     CLOSING A POP-UP   -> the last button at the bottom of the card
   Two different acts, so two different places - but each always the same.
   EXCEPT the three room MENUS (RNKLscape directory, RNKLets hub, RNKLzone
   hub): since 09-27 they use the shared top bar instead - "<- RNKL(TM)" is
   the way home there. See /assets/rnkl-topbar.css.

   This is a copy of RNKLscape's .zone-back (rnklscape/rnkl-core.css), which
   got there first and should look identical. It is a COPY, not a shared rule,
   on purpose: .zone-back carries hardening against 144 cassettes restyling the
   bare <button>, and none of that belongs on pages that have no cassettes.
   If you restyle one, restyle the other.

   Pages give their own heading room for it: being fixed, it reserves no
   space, so whatever sits at the top of the page needs ~56px of clearance
   (the pill ends at 44px) or it will sit on top of it.
   ============================================================================ */
.rnkl-back {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 300;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    box-shadow: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    opacity: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
/* The pill is 32px tall - the right size to look at, and under the 44px a
   thumb needs. This grows what you can HIT without growing what you SEE. */
.rnkl-back::before {
    content: '';
    position: absolute;
    inset: -7px -4px;       /* 31.6px + 2x7 = 45.6, clear of 44 */
}
.rnkl-back:hover { background: rgba(0, 0, 0, 0.78); border-color: rgba(255, 255, 255, 0.55); }
.rnkl-back:active { transform: translateY(1px); }
.rnkl-back:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The "tap again to leave" state, where leaving would lose something. */
.rnkl-back.is-arming { background: rgba(120, 20, 20, 0.85); border-color: rgba(255, 140, 140, 0.8); }
@supports (padding: max(0px)) {
    .rnkl-back { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
}
@media (hover: none) {
    .rnkl-back:hover { background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.28); }
}