/* ============================================================================
   filter-escape.css — let the filter panel scroll, and let its menus escape
   ----------------------------------------------------------------------------
   Two related problems, one box.

   `.runes-controls` computes to `overflow: hidden` even when expanded. That
   trapped the filter panel at its box height on a phone (the controls stack
   vertically there and outgrow it), and it clipped the Table Columns menu 235px
   short so the options underneath could not be reached.

   Scrolling the panel alone would not have fixed the menu — a scroll container
   clips just as hard. So the menu is now `position: fixed` and placed against
   its button by column-filter.js, which puts it outside every clipping ancestor
   and frees the panel to scroll safely.
   ========================================================================== */

/* ── the panel scrolls instead of trapping its contents ───────────────── */
.runes-controls:not(.collapsed) {
    max-height: min(52vh, 520px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    /* the collapse animation drives max-height, so opacity carries the fade */
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 155, 213, 0.35) transparent;
}
.runes-controls::-webkit-scrollbar { width: 8px; }
.runes-controls::-webkit-scrollbar-track { background: transparent; }
.runes-controls::-webkit-scrollbar-thumb {
    background: rgba(91, 155, 213, 0.32);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
.runes-controls::-webkit-scrollbar-thumb:hover {
    background: rgba(91, 155, 213, 0.5);
    background-clip: content-box;
}

/* main.css sets min-height:56px, which beats the collapsed max-height:0 and
   left a 56px ghost strip behind after collapsing. */
.runes-controls.collapsed {
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

/* ── the menu lives in the viewport, not in the panel ─────────────────── */
.column-filter-dropdown {
    position: fixed !important;
    top: 0;
    left: 0;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 100001 !important;
}
.column-filter-dropdown:not(.active) {
    /* keep it measurable while hidden so it can be placed before it is shown */
    display: none;
}

/* ── the Cast button tells the truth about being ready ────────────────────
   With an empty box it now reads as unavailable rather than sitting fully lit
   and doing nothing when pressed. */
.cast-btn.cast-btn-empty,
.cast-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: saturate(0.5);
    box-shadow: none;
}
.cast-btn.cast-btn-empty:hover,
.cast-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ── visible keyboard focus ───────────────────────────────────────────────
   Nothing in the app showed a focus ring, so anyone tabbing through was
   navigating blind. */
:focus-visible {
    outline: 2px solid rgba(122, 182, 232, 0.9);
    outline-offset: 2px;
    border-radius: 4px;
}