/* Mobile account, collection, binder, dream-binder, deck and auth polish.
   This file is loaded after styles.css. Every override is viewport- or
   pointer-scoped so the established desktop presentation stays untouched. */

@media (max-width: 860px) {
    /* Account navigation becomes one predictable, thumb-friendly rail instead
       of wrapping into several rows above every account page. */
    .account-nav {
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }

    .account-nav::-webkit-scrollbar,
    .deck-tabs::-webkit-scrollbar {
        display: none;
    }

    .account-nav a {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        min-height: 44px;
        padding: 9px 15px;
        white-space: nowrap;
    }

    .account-menu-trigger {
        min-height: 44px;
    }

    .account-menu-panel a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-block: 10px;
    }

    .account-panels,
    .account-panel,
    .account-form,
    .collection-header > div,
    .binder-header-text,
    .deck-browser,
    .deck-workshop-deck {
        min-width: 0;
        width: 100%;
    }

    /* Form controls stay above iOS's auto-zoom threshold and share a reliable
       tap height across server-rendered forms and modal fragments. */
    .account-form-row input,
    .account-form-row select,
    .account-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .account-form select,
    .auth-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .signup-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .signup-form select,
    .wizard-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .wizard-field select,
    .deck-filter-bar input[type="search"],
    .deck-filter-bar select,
    .deck-filter-input,
    .binder-share-url,
    .thread-form input {
        min-height: 44px;
        font-size: 16px;
    }

    .account-form textarea,
    .wizard-field textarea,
    .deck-builder-form textarea {
        width: 100%;
        min-height: 96px;
        font-size: 16px;
    }

    .checkbox-row {
        min-height: 44px;
        margin-bottom: 4px;
        padding-block: 7px;
    }

    .checkbox-row input[type="checkbox"] {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
    }

    /* Order cards and support threads are allowed to wrap without forcing the
       price, status or tracking code outside their card. */
    .order-card-head,
    .order-line,
    .delivery-actions {
        flex-wrap: wrap;
    }

    .order-card-head > div:first-child,
    .order-line > a,
    .order-line > span:not(.order-line-qty):not(.order-line-price) {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .order-line > a,
    .order-line > span:not(.order-line-qty):not(.order-line-price) {
        flex: 1 1 150px;
    }

    .order-card-code,
    .order-card-foot {
        overflow-wrap: anywhere;
    }

    .delivery-dispute {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .thread-form input,
    .thread-form .button {
        min-height: 44px;
    }

    /* These media rules intentionally come after every desktop deck pass.
       The original mobile declarations were followed by later base rules and
       therefore lost the cascade. */
    .deck-workshop,
    .deck-layout,
    .deck-layout.has-stats,
    .deck-layout.has-stats.is-wide,
    .deck-workshop-deck .deck-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .deck-workshop-picker,
    .deck-heroes,
    .deck-stats {
        position: static;
        max-height: none;
    }

    .deck-workshop-picker {
        width: 100%;
    }

    .deck-search-panel {
        max-height: 420px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    @supports (height: 100dvh) {
        .deck-search-panel {
            max-height: min(46dvh, 420px);
        }
    }

    .deck-tabs {
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 2px 1px 8px;
    }

    .deck-tab {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 9px 14px;
        white-space: nowrap;
    }

    .deck-stats-tab {
        display: grid;
        place-items: center;
        min-height: 44px;
        padding-block: 9px;
    }
}

@media (max-width: 720px) {
    /* Two useful cards per row on common 320-430px phones. The old 170px and
       210px minimums collapsed collection and binder shelves to one huge card. */
    .collection-grid,
    .binder-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .collection-card {
        min-width: 0;
        padding: 10px;
    }

    .collection-card-name {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.84rem;
        line-height: 1.3;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .collection-card-meta {
        min-height: 2.5em;
        margin-bottom: 6px;
        font-size: 0.72rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .collection-card-foot {
        align-items: flex-start;
        font-size: 0.78rem;
    }

    .binder-card-body {
        padding: 10px 11px 12px;
    }

    .binder-card-name {
        overflow-wrap: anywhere;
        font-size: 0.88rem;
        line-height: 1.3;
    }

    /* `.deck-card` is also the legacy bulk-builder panel. Restrict this reset
       to shelf cards, where the shared class otherwise adds 22px around a
       cover that already has its own inset. */
    .binder-grid .binder-card.deck-card {
        padding: 0;
    }

    .collection-header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 10px;
    }

    .collection-header-actions > *,
    .collection-header-actions .button {
        min-width: 0;
        width: 100%;
    }

    .collection-header-actions > :only-child {
        grid-column: 1 / -1;
    }

    .binder-actions {
        width: 100%;
        align-items: stretch;
    }

    .binder-actions > .button:not(.button-icon) {
        flex: 1 1 min(100%, 190px);
        min-height: 44px;
    }

    .binder-actions > .button-primary {
        flex-basis: 100%;
    }

    .binder-visibility,
    .switch-button {
        min-height: 44px;
    }

    .switch-button {
        padding: 6px 2px;
    }

    .qr-button,
    .button-icon {
        flex: 0 0 46px;
        min-width: 46px;
        min-height: 46px;
    }

    /* Touch devices cannot reveal a hover-only remove control. Keep the icon
       visually quiet, but make its target persistent and reachable. */
    .binder-slot-x {
        width: 40px;
        height: 40px;
        opacity: 1;
        font-size: 1.15rem;
    }

    .binder-slot-remove {
        top: 4px;
        left: 4px;
    }

    .binder-slot-count {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .binder-slot-owned {
        margin-left: 0;
        text-align: center;
    }

    .stepper,
    .stepper-compact {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        min-height: 44px;
        width: 100%;
    }

    .stepper-button {
        min-width: 44px;
        min-height: 44px;
    }

    .binder-slot-save {
        min-height: 40px;
    }

    /* Dialogs fit the dynamic viewport, home indicator and display cutout.
       The 100vh declaration is the fallback for browsers without dvh. */
    .wizard-backdrop {
        align-items: center;
        padding:
            max(8px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }

    .wizard {
        width: 100%;
        max-height: calc(100vh - 16px);
        border-radius: 18px;
    }

    @supports (height: 100dvh) {
        .wizard {
            max-height: calc(
                100dvh
                - max(16px, env(safe-area-inset-top))
                - max(16px, env(safe-area-inset-bottom))
            );
        }
    }

    .wizard-head {
        flex: 0 0 auto;
        padding: 16px 16px 12px;
    }

    .wizard-body {
        min-width: 0;
        padding: 0 16px 16px;
        overscroll-behavior: contain;
    }

    .wizard-close {
        width: 44px;
        height: 44px;
        margin: -7px -7px 0 0;
    }

    .wizard-back {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 4px;
    }

    .wizard-details-body,
    .wizard-details .wizard-field-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .wizard-details-art .wizard-art-zoom {
        width: min(100%, 220px);
        margin-inline: auto;
    }

    .wizard-choice,
    .wizard-field .wizard-choice,
    .filter-choice span {
        min-height: 44px;
    }

    .wizard-hint-chip {
        min-height: 40px;
    }

    .wizard-result {
        min-height: 64px;
    }

    .wizard-result-body {
        flex: 1 1 auto;
    }

    .wizard-foot .button,
    .wizard-details-foot .button,
    .wizard-body-divided .button {
        min-height: 44px;
    }

    .wizard-body-divided form {
        flex: 1 1 180px;
    }

    .wizard-body-divided form .button {
        width: 100%;
    }

    .qr-plate {
        max-width: 100%;
    }

    .qr-plate svg,
    .binder-share-tile svg {
        display: block;
        width: min(240px, calc(100vw - 80px));
        max-width: 100%;
        height: auto;
        margin-inline: auto;
    }

    .binder-share-tile {
        margin: 12px auto 18px;
        text-align: center;
    }

    /* Compact, horizontally scrollable filters are easier to operate than
       undersized controls. The form still stacks at its existing 560px rule. */
    .filter-choice span {
        display: inline-flex;
        align-items: center;
        padding-inline: 14px;
    }

    .filter-actions .button,
    .filter-actions .link-button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Deck sections and workbench controls. */
    .deck-heroes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .deck-hero-card,
    .deck-workshop-deck .deck-hero-card {
        width: 100%;
        max-width: none;
    }

    .deck-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .deck-card-grid.is-editable,
    .deck-workshop-deck .deck-card-grid.is-editable {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .deck-tile-controls,
    .deck-workshop-deck .deck-tile-controls {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        gap: 5px;
    }

    .deck-step,
    .deck-workshop-deck .deck-step {
        width: 44px;
        height: 44px;
        border-radius: 9px;
        font-size: 1.05rem;
    }

    .deck-step-remove,
    .deck-workshop-deck .deck-step-remove {
        grid-column: 1 / -1;
        width: 100%;
    }

    .deck-workshop-header-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 10px;
    }

    .deck-workshop-header-side .deck-legal-tag-wrap,
    .deck-workshop-header-side .deck-save-note {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .deck-workshop-header-side .button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-inline: 14px;
    }

    .deck-search-form .button {
        width: 100%;
        min-height: 44px;
    }

    .deck-search-add {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        width: 100%;
        gap: 8px;
    }

    .deck-search-add .deck-qty-input,
    .deck-search-add .deck-move-select {
        width: 100%;
        max-width: none;
        min-height: 44px;
        font-size: 16px;
    }

    .deck-search-add .button {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
    }

    .deck-filter-input {
        width: 100%;
        max-width: none;
    }

    .deck-stats [data-hand-draw] {
        min-height: 44px;
    }
}

@media (max-width: 560px) {
    .auth-card,
    .auth-card-wide {
        max-width: none;
        margin: 12px 0 24px;
        padding: 24px 18px;
        border-radius: 18px;
    }

    .auth-card h1 {
        margin-bottom: 18px;
        font-size: clamp(1.35rem, 7vw, 1.55rem);
    }

    .auth-form input[autocomplete="one-time-code"] {
        padding-inline: 12px !important;
        font-size: clamp(1.2rem, 7vw, 1.5rem) !important;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.3em !important;
    }

    .signup-actions {
        width: 100%;
        gap: 10px;
    }

    .signup-actions .button,
    .auth-form .button,
    .account-panel .button {
        width: 100%;
        min-height: 44px;
    }

    .password-reveal {
        top: 0;
        right: 4px;
        min-width: 60px;
        min-height: 44px;
        padding: 8px;
    }

    .account-panel {
        padding: 18px 16px;
    }

    .order-card-head,
    .order-lines,
    .order-card-foot {
        padding-inline: 14px;
    }

    .order-card-right {
        margin-left: auto;
    }

    .delivery-actions > .button,
    .delivery-actions > form,
    .delivery-actions > form .button {
        width: 100%;
    }

    .delivery-dispute {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .thread-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .collection-header-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .collection-header-actions > * {
        grid-column: 1;
    }

    .collection-offer-form,
    .collection-binder-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .collection-offer-form .wizard-field,
    .collection-binder-form .wizard-field,
    .collection-offer-form .button,
    .collection-binder-form .button {
        width: 100%;
    }

    .product-detail {
        gap: 20px;
        padding: 16px;
    }

    .product-detail-image {
        padding: 14px;
    }

    .image-gallery-nav {
        width: 44px;
        height: 44px;
    }

    .photo-manager-picker,
    .photo-manager-controls .button {
        min-height: 44px;
    }

    .wizard-field-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .wizard-steps {
        overflow-x: auto;
        padding: 0 16px 12px;
        scrollbar-width: none;
    }

    .wizard-steps::-webkit-scrollbar {
        display: none;
    }

    .wizard-steps li {
        flex: 0 0 auto;
    }

    .wizard-result-go {
        display: none;
    }

    .wizard-foot,
    .wizard-details-foot {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .wizard-foot > :only-child,
    .wizard-details-foot > :only-child,
    .wizard-details-foot > .wizard-back,
    .wizard-details-foot > .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .wizard-foot .button {
        width: 100%;
        padding-inline: 12px;
    }

    .binder-picker-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 9px 11px;
    }

    .binder-picker-row > .stepper {
        grid-column: 1 / -1;
    }

    .binder-publish-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 10px;
    }

    .binder-publish-field {
        grid-column: 1 / -1;
        width: 100%;
    }

    .binder-publish-field input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        min-height: 44px;
        font-size: 16px;
    }

    .binder-picker-list,
    .binder-publish-list {
        max-height: 46vh;
        overscroll-behavior: contain;
    }

    @supports (height: 100dvh) {
        .binder-picker-list,
        .binder-publish-list {
            max-height: 46dvh;
        }
    }

    .binder-share-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .binder-share-row .button,
    .binder-share-foot > *,
    .binder-share-foot > form,
    .binder-share-foot > form .link-button {
        width: 100%;
    }

    .binder-share-foot {
        align-items: stretch;
    }

    .binder-share-foot .link-button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .filter-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .filter-actions .button,
    .filter-actions .link-button {
        width: 100%;
    }

    .deck-choice-grid,
    .deck-import-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .deck-choice {
        min-width: 0;
        padding: 20px 18px;
    }

    .deck-choice .button,
    .deck-import-actions .button {
        align-self: stretch;
        width: 100%;
        min-height: 44px;
    }

    .deck-filter-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .deck-filter-field,
    .deck-filter-search,
    .deck-filter-bar .button,
    .deck-filter-clear {
        width: 100%;
        min-width: 0;
    }

    .deck-filter-bar .button,
    .deck-filter-clear {
        min-height: 44px;
    }

    .deck-filter-clear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .deck-results .deck-card {
        padding: 14px;
    }

    .deck-results-footer > *,
    .deck-results-footer .button {
        width: 100%;
    }

    .deck-alternative {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
    }

    .deck-alternative-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (max-width: 390px) {
    .collection-grid,
    .binder-grid {
        gap: 8px;
    }

    .collection-card {
        padding: 8px;
    }

    .binder-card-body {
        padding: 9px;
    }

    .collection-card-listed,
    .collection-card-paying {
        border-radius: 8px;
        font-size: 0.67rem;
    }

    .thread-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .thread-form .button {
        width: 100%;
    }

    .deck-workshop-header-side {
        grid-template-columns: minmax(0, 1fr);
    }

    .deck-workshop-header-side .deck-legal-tag-wrap,
    .deck-workshop-header-side .deck-save-note {
        grid-column: 1;
    }

    .wizard-foot {
        grid-template-columns: minmax(0, 1fr);
    }

    .wizard-foot > * {
        grid-column: 1;
    }
}

/* Covers touch-landscape phones just below the desktop boundary. */
@media (min-width: 861px) and (max-width: 899px) {
    .deck-workshop,
    .deck-workshop-deck .deck-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px),
       (max-width: 899px) and (hover: none) and (pointer: coarse) {
    .account-menu-panel {
        width: min(290px, calc(100vw - 24px));
        min-width: 0;
        max-height: min(70vh, 560px, calc(100dvh - var(--mobile-header-height, 126px) - 28px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Coarse pointers need persistent affordances even on a wide phone in
   landscape. Width is capped so touchscreen laptops keep the desktop UI. */
@media (pointer: coarse) and (max-width: 899px) {
    .binder-slot-x {
        width: 44px;
        height: 44px;
        opacity: 1;
    }

    .wizard-close,
    .image-gallery-nav,
    .deck-step,
    .deck-workshop-deck .deck-step,
    .stepper-button {
        min-width: 44px;
        min-height: 44px;
    }

    .stepper,
    .stepper-compact {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        min-height: 44px;
    }

    .deck-tile-controls,
    .deck-workshop-deck .deck-tile-controls {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .deck-step-remove,
    .deck-workshop-deck .deck-step-remove {
        grid-column: 1 / -1;
        width: 100%;
    }

    .button-small,
    .button-compact,
    .password-reveal,
    .deck-tab,
    .deck-stats-tab,
    .account-menu-trigger,
    .account-nav a {
        min-height: 44px;
    }
}