/* ============================================================
   back-button.css  (shared)
   Back button injected by back-button.js — same look as the
   create-tournament ".ct-hero__back" button (theme-aware), placed
   inline to the left of the page title, or top-left standalone.
   ============================================================ */
.sm-back {
    float: left;                 /* left of the title in block headers; a flex item in flex headers */
    flex: none;
    width: 42px;
    height: 42px;
    margin: 0 14px 0 0;
    padding: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    color: var(--color-text-muted, #64748b);
    cursor: pointer;
    font: inherit;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.sm-back svg { width: 20px; height: 20px; }
.sm-back:hover {
    background: var(--color-surface-hover, #f0f8ff);
    color: var(--color-primary, #0088ea);
    border-color: var(--color-border-strong, #0088ea);
}
.sm-back:active { transform: scale(0.96); }

/* standalone (centered-card pages) — pinned top-left just below the navbar
   (top is set inline by back-button.js from the navbar height) */
.sm-back--loose {
    float: none;
    margin: 0;
    position: absolute;
    left: 18px;
    z-index: 20;
}

@media (max-width: 640px) {
    .sm-back { width: 40px; height: 40px; border-radius: 11px; margin-right: 12px; }
    .sm-back svg { width: 18px; height: 18px; }
    .sm-back--loose { left: 14px; }
}