/*
 * Shared mobile foundation.
 *
 * Breakpoints — use these two literals, don't invent new ones. Media queries
 * can't read custom properties, so they're documented here and written out
 * everywhere else.
 *
 *   599.98px   form rows stack inside a panel
 *   899.98px   side panel -> bottom sheet, nav strip -> drawer
 *
 * CSS owns the mobile/desktop decision. Nothing here should need the viewport
 * width measured in C# — see MobilePlan/02-PLAN.md.
 */

:root {
    --tap-min: 44px;
    --sheet-max-h: min(88dvh, 780px);
    --drawer-w: min(86vw, 320px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    --z-scrim: 900;
    --z-sheet: 1000;
    --z-appbar: 1100;
    --z-modal: 1200;

    /* pulled from the existing UI art so new chrome matches the gold plate */
    --gold-line: #a78343;
    --gold-line-dim: #6f5a32;
    --gold-text: #f0c869;
    --panel-bg: #15120d;
    --plate-grad: linear-gradient(#3b3018, #1b1610);
}

/* The app shell is a fixed-height column. 100dvh rather than 100% so the
   collapsing URL bar on mobile doesn't clip the bottom of the page. */
html, body {
    height: 100%;
    overscroll-behavior-y: none;
}

.app-shell {
    display: flex;
    flex-flow: column;
    height: 100dvh;
}

.app-shell > .app-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Shared scrim behind any drawer or sheet. */
.app-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    border: 0;
    padding: 0;
}

.app-scrim.is-on {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   Navigation

   Desktop keeps the horizontal gold-plate strip. Below 900px the strip
   becomes a slide-in drawer and an app bar takes over the top of the screen.

   These rules are global rather than in NavMenu.razor.css because they have
   to reach into WoWBackground's markup, which carries a different scope id.
   ═════════════════════════════════════════════════════════════════════════ */

.app-bar {
    display: none;
}

.app-bar-menu {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.app-bar-menu-bars {
    position: relative;
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 1px;
    background: #f0d79a;
}

    .app-bar-menu-bars::before,
    .app-bar-menu-bars::after {
        content: "";
        position: absolute;
        left: 0;
        width: 21px;
        height: 2px;
        border-radius: 1px;
        background: #f0d79a;
    }

    .app-bar-menu-bars::before { top: -6px; }
    .app-bar-menu-bars::after  { top: 6px; }

.app-bar-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 44px;
}

    .app-bar-brand img {
        height: 38px;
        width: auto;
        margin: 0;
    }

.app-bar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.app-bar-account,
.app-bar-signin {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 42vw;
    padding: 0 14px;
    border-radius: 18px;
    border: 1px solid var(--gold-line);
    background: linear-gradient(#4a3a1c, #241c10);
    color: #f3e2b8;
    font-family: CardTitleTextFont, Georgia, serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Desktop strip. flex-wrap is new: a seventh nav item used to vanish off the
   right edge instead of wrapping onto a second line. */
.app-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.app-nav-brand-row {
    display: flex;
    align-items: center;
}

    .app-nav-brand-row img {
        margin: 0;
    }

.app-nav-auth {
    display: flex;
    align-items: center;
}

.app-nav-auth-label,
.app-nav-close {
    display: none;
}

.app-nav-greeting {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: cornsilk;
    font-size: 25px;
}

.app-nav-logout {
    display: flex;
}

.auth-row {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

    .auth-row img {
        margin: 0;
    }

    /* The provider images are wordmarks, so on desktop the text label is
       redundant — but it is the button's only accessible name, so it stays in
       the DOM as screen-reader-only rather than being dropped. */
    .auth-row .auth-row-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

@media (max-width: 899.98px) {
    .app-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        height: calc(56px + var(--safe-t));
        padding: var(--safe-t) 10px 0;
        background: var(--plate-grad);
        border-bottom: 2px solid var(--gold-line);
    }

    /* Collapse the WoWBackground frame around the nav — the drawer supplies its
       own chrome, and the 9-slice art otherwise leaves a stray 16px strip of
       gold border under the app bar, right above the page's own frame, which
       reads as a doubled border.

       Three class selectors deep on purpose: WoWBackground.razor.css is scoped,
       so its rules carry a [b-…] attribute and sit at specificity 0,2,0. A
       plain `nav .wowTCGDialogBackgroundTable` (0,1,1) loses to that and the
       frame stayed visible. */
    nav > .wowTCGDialog,
    nav .wowTCGDialog.wowTCGDialogMirror {
        /* Two classes plus the element beat the scoped .wowTCGDialogMirror[b-…]
           padding, which otherwise left 16px of empty frame under the app bar. */
        padding: 0;
        min-height: 0;
        border: 0;
    }

    nav .wowTCGDialog .wowTCGDialogBackgroundTable {
        display: none;
    }

    .app-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-sheet);
        width: var(--drawer-w);
        height: 100dvh;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: calc(var(--safe-t) + 10px) 0 calc(var(--safe-b) + 12px);
        background: #14110b;
        border-right: 2px solid var(--gold-line);
        transform: translateX(-100%);
        transition: transform .22s ease;
    }

        .app-nav.is-open {
            transform: translateX(0);
        }

    .app-nav-brand-row {
        justify-content: space-between;
        padding: 0 12px 12px;
        margin-bottom: 8px;
        border-bottom: 1px solid #3d3220;
    }

        .app-nav-brand-row img {
            height: 40px;
        }

    .app-nav-close {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #e8d4a4;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    /* Nav links become full-width rows. Their gold-plate backgrounds already
       use `background-size: 100% 100%`, so they stretch without extra work. */
    .app-nav .nav-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        min-height: 52px;
        margin: 0 10px 5px;
        padding: 0 16px;
        font-size: 16px;
    }

    /* On a phone this block is the only route to authentication. */
    .app-nav-auth {
        flex-direction: column;
        align-items: stretch;
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid #3d3220;
    }

    .app-nav-auth-label {
        display: block;
        padding: 4px 22px 8px;
        color: #8a7c5c;
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    /* The provider images are the official branded buttons (184x40 wordmarks
       that already read "Sign in with Google" and so on). Show them whole
       rather than cropping to an icon and repeating the wording — the text
       label stays screen-reader-only, as on desktop. */
    .auth-row {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        margin: 0 12px 8px;
        padding: 4px;
        border-radius: 6px;
        border: 1px solid var(--gold-line-dim);
        background: #221c12;
    }

        .auth-row:active {
            background: #2e2617;
        }

        .auth-row img {
            height: 40px;
            width: auto;
            max-width: 100%;
        }

    /* Play and Drafting are desktop-only features (see MobilePlan/README.md).
       Linking to them from the drawer only leads somewhere that was never laid
       out for this width. */
    .app-nav .desktop-only-link {
        display: none;
    }

    .app-nav-greeting {
        order: -1;
        padding: 0 22px 10px;
        font-size: 16px;
        color: #d8c9a4;
    }

    .app-nav-logout {
        margin: 0 10px;
    }

        .app-nav-logout .nav-link {
            width: 100%;
            min-height: 52px;
        }
}

/* ═════════════════════════════════════════════════════════════════════════
   Split panel (CollapsibleSidePanel)

   Desktop: a collapsible rail beside the content.
   Below 900px: an overlay sheet, with the content always full width.

   Used by Browse, Decks, Collection and Generator.
   ═════════════════════════════════════════════════════════════════════════ */

.wc-split {
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
}

    .wc-split.rail-open {
        grid-template-columns: var(--panel-w, 400px) minmax(0, 1fr);
    }

.wc-split-side {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.wc-split-side-body {
    height: 100%;
    min-height: 0;
}

.wc-split-main {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.wc-split-toggle {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 99;
    transform: translateY(-50%) translateX(-15px);
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.wc-split-sheet-bar,
.wc-split-scrim,
.wc-split-toggle-text {
    display: none;
}

@media (max-width: 899.98px) {
    /* One column: the content gets the whole viewport and the panel floats. */
    .wc-split,
    .wc-split.rail-open {
        grid-template-columns: minmax(0, 1fr);
    }

    .wc-split-side {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sheet);
        display: flex;
        flex-direction: column;
        height: var(--sheet-max-h);
        padding-bottom: var(--safe-b);
        background: var(--panel-bg);
        border-top: 2px solid var(--gold-line);
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .6);
        transform: translateY(100%);
        transition: transform .24s ease;
    }

    .wc-split.sheet-open .wc-split-side {
        transform: translateY(0);
    }

    .wc-split-sheet-bar {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 52px;
        padding: 0 14px;
        border-bottom: 1px solid #3d3220;
    }

    .wc-split-sheet-title {
        font-family: CardTitleTextFont, Georgia, serif;
        font-size: 17px;
        font-weight: bold;
        color: var(--gold-text);
    }

    .wc-split-done {
        min-height: 44px;
        padding: 0 20px;
        border-radius: 4px;
        border: 1px solid #b99049;
        background: linear-gradient(#6d5227, #3c2d16);
        color: #ffeec4;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    .wc-split-side-body {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overflow: hidden;
    }

    .wc-split-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-scrim);
        background: rgba(0, 0, 0, .55);
        opacity: 0;
        pointer-events: none;
        transition: opacity .24s ease;
    }

    .wc-split.sheet-open .wc-split-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    /* The arrow was drawn at the left edge of the content track, which on a
       phone starts off-screen. It becomes a labelled pill in the thumb zone. */
    .wc-split-toggle {
        position: fixed;
        left: auto;
        right: 16px;
        top: auto;
        bottom: calc(16px + var(--safe-b));
        z-index: 800;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 20px;
        border-radius: 24px;
        border: 1px solid #b9904c;
        background: linear-gradient(#4d3c1d, #251d10);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
        transform: none;
    }

    .wc-split.sheet-open .wc-split-toggle {
        display: none;
    }

    .wc-split-toggle-arrow {
        display: none;
    }

    .wc-split-toggle-text {
        display: inline;
        font-family: CardTitleTextFont, Georgia, serif;
        font-size: 15px;
        font-weight: bold;
        color: #f6e6bd;
    }
}

/* Hidden but still rendered (HidePanel): the content takes the whole width at
   every size. After the media block, and one class more specific, so it wins. */
.wc-split.panel-hidden,
.wc-split.panel-hidden.rail-open {
    grid-template-columns: minmax(0, 1fr);
}

    .wc-split.panel-hidden .wc-split-side,
    .wc-split.panel-hidden .wc-split-scrim,
    .wc-split.panel-hidden .wc-split-toggle {
        display: none !important;
    }

/* ═════════════════════════════════════════════════════════════════════════
   Compact card list

   An alternative to the art grid. At a comfortable card size a grid shows
   about eight cards a screen on a phone; this shows ten, and they are
   readable, which is what you want when hunting one card out of ten thousand.
   ═════════════════════════════════════════════════════════════════════════ */

.card-list {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.card-list-row {
    display: flex;
    /* The list is a flex column, so without this the rows shrink below the height
       Virtualize was told to expect - measured 71.5px against an ItemSize of 78,
       which drifts the scrollbar by six pixels a row over ten thousand of them. */
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 4px 10px;
    border: 0;
    border-bottom: 1px solid #2a2317;
    background: transparent;
    color: cornsilk;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .card-list-row:hover,
    .card-list-row:focus-visible {
        background: #2a2114;
    }

.card-list-thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 56px;
    border: 1px solid #6b5426;
    border-radius: 3px;
    background: linear-gradient(150deg, #3a2e19, #1a150d);
    object-fit: cover;
}

.card-list-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.card-list-name {
    font-family: CardTitleTextFont, Georgia, serif;
    font-size: 15px;
    color: #f2e5c5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-list-sub {
    font-size: 12px;
    color: #9c8f70;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The type line - "Ally - Human Warrior". Lighter than the name but brighter
   than the set line, because it is the thing you scan for after the name. */
.card-list-tagline {
    font-size: 12px;
    color: #c3b48f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cost, class restrictions and stats, stacked against the right edge. */
.card-list-aside {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

.card-list-cost {
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border: 1px solid #b08c4a;
    border-radius: 13px;
    background: rgba(8, 7, 4, .85);
    color: var(--gold-text);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: grid;
    place-items: center;
}

.card-list-classes {
    display: flex;
    align-items: center;
    gap: 3px;
}

.card-list-class-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.card-list-stats {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-list-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}

.card-list-stat-label {
    font-size: 9.5px;
    letter-spacing: .04em;
    color: #8d8064;
}

.card-list-stat-value {
    font-size: 12.5px;
    font-weight: 600;
    color: #e8d9b4;
}

.card-list-row-placeholder {
    opacity: .4;
    pointer-events: none;
}

/* Segmented Grid / List switch in the filter panel. */
.view-mode-switch {
    display: flex;
    width: 100%;
    border: 1px solid var(--gold-line-dim);
    border-radius: 5px;
    overflow: hidden;
}

    .view-mode-switch button {
        flex: 1 1 0;
        min-height: 40px;
        border: 0;
        border-right: 1px solid #3d3220;
        background: #17130d;
        color: #bcae8e;
        font: inherit;
        font-size: 14px;
        cursor: pointer;
    }

        .view-mode-switch button:last-child {
            border-right: 0;
        }

        .view-mode-switch button.is-active {
            background: linear-gradient(#5a4620, #2c2212);
            color: #ffe9b8;
            font-weight: 600;
        }

@media (pointer: coarse) {
    .view-mode-switch button {
        min-height: 44px;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   Card details dialog

   Only the outermost box lives here, because it has to beat the inline
   `transform: scale()` and `width`/`height` the component writes on the
   element — that needs !important, which a stylesheet can do and a same-
   specificity rule cannot.

   Everything inside the dialog is styled in CardDetailsDialog.razor's own
   <style> block instead. That block renders in the body, after this file is
   linked in the head, so at equal specificity it wins — putting the mobile
   overrides for those classes here silently lost to the desktop rules. Keeping
   a component's responsive rules next to its own is also just easier to follow.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 899.98px) {
    /* The backing is z-index 100 and position:absolute, which put it under the
       app bar and the filter pill. A modal has to sit above both. */
    .cardDetailsModelBacking {
        position: fixed;
        z-index: var(--z-modal);
        height: 100dvh;
    }

    /* Modal dialogs drop the ornamental frame at this width — its 9-slice art
       and padding cost width a phone does not have. CardDetailsDialog keeps
       its frame: the prev / next / close buttons are positioned against it.
       Those other dialogs reuse the same two class names, so the only thing
       that tells them apart is .cardDetailsModelContent, which is unique to
       CardDetailsDialog. */
    .cardDetailsModelWindow:not(:has(.cardDetailsModelContent)) .wowTCGDialog .wowTCGDialogBackgroundTable {
        display: none;
    }

    .cardDetailsModelWindow:not(:has(.cardDetailsModelContent)) > .wowTCGDialog {
        padding: 10px;
        background: var(--panel-bg);
        border: 1px solid var(--gold-line);
        border-radius: 6px;
    }

    .cardDetailsModelWindow {
        position: fixed !important;
        z-index: var(--z-modal) !important;
        inset: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        -ms-transform: none !important;
        display: flex !important;
        flex-direction: column;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   Detail sheet

   The second sheet on a page. CollapsibleSidePanel already owns the
   bottom-right pill for its own panel; this is the mirror of it in the
   bottom-left, for the block of controls and figures a page used to stack
   above its content. On a phone that block is invariably wider and taller
   than the screen, and it pushes the content - the thing you actually came
   for - off the bottom.

   Used by the deck editor and the collection page. A page supplies the
   markup and the open flag; everything here is the shared chrome.
   ═════════════════════════════════════════════════════════════════════════ */

.detail-sheet-toggle,
.detail-sheet-scrim,
.detail-sheet {
    display: none;
}

@media (max-width: 899.98px) {
    .detail-sheet-toggle {
        position: fixed;
        left: 16px;
        bottom: calc(16px + var(--safe-b));
        z-index: 800;
        display: inline-flex;
        align-items: center;
        /* It shares the bottom row with CollapsibleSidePanel's pill on the right.
           "Collection details" next to "Collections & filters" overlapped it by
           12px at 375px, so this is a hard stop rather than a matter of picking
           short enough labels. */
        max-width: calc(50% - 16px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        min-height: 48px;
        padding: 0 20px;
        border-radius: 24px;
        border: 1px solid #b9904c;
        background: linear-gradient(#4d3c1d, #251d10);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
        font-family: CardTitleTextFont, Georgia, serif;
        font-size: 15px;
        font-weight: bold;
        color: var(--gold-text);
        cursor: pointer;
    }

    .detail-sheet-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-scrim);
        background: rgba(0, 0, 0, .55);
        opacity: 0;
        pointer-events: none;
        transition: opacity .24s ease;
    }

        .detail-sheet-scrim.is-on {
            opacity: 1;
            pointer-events: auto;
        }

    .detail-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sheet);
        display: flex;
        flex-direction: column;
        height: var(--sheet-max-h);
        padding-bottom: var(--safe-b);
        background: var(--panel-bg);
        border-top: 2px solid var(--gold-line);
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .6);
        transform: translateY(100%);
        transition: transform .24s ease;
    }

        .detail-sheet.is-open {
            transform: translateY(0);
        }

    .detail-sheet-bar {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 52px;
        padding: 0 14px;
        border-bottom: 1px solid #3d3220;
    }

    .detail-sheet-title {
        font-family: CardTitleTextFont, Georgia, serif;
        font-size: 17px;
        font-weight: bold;
        color: var(--gold-text);
    }

    .detail-sheet-done {
        min-height: 44px;
        padding: 0 20px;
        border-radius: 4px;
        border: 1px solid #b99049;
        background: linear-gradient(#6d5227, #3c2d16);
        color: #ffeec4;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    .detail-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px 12px calc(16px + var(--safe-b));
        color: cornsilk;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   Bottom pill clearance

   Pages fix a pill in each bottom corner, and they sit over the last row of
   cards. The room for them has to come from inside the scrolling content: put
   it on a wrapper instead and the frame around the cards stops short of the
   bottom of the screen, leaving a dead band above the pills that looks like
   the page failed to fill the window.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 899.98px) {
    .cards-scroll-body {
        padding-bottom: calc(76px + var(--safe-b));
    }
}