/**
 * TCGkad — responsive & touch layer (loads last, after polish.css)
 *
 * Cross-cutting rules that make the site work on phones and tablets:
 *   1. iOS input zoom guard
 *   2. Mobile bottom tab bar
 *   3. Slide-in nav panel — compact-only labels & rows
 *   4. Touch targets
 *   5. Denser page chrome on small screens
 *   6. Browse filters — compact on phones
 *   7. Card grid & collect bar on narrow screens
 *   8. Back to top
 *   9. Tables & wide content
 *
 * Breakpoints follow the convention in design.css:
 *   480 phone · 700 phone→tablet · 768 tablet portrait · 1024 tablet landscape
 */

/* ============================================================
   1. iOS input zoom guard
   Mobile Safari force-zooms the whole page when a focused input's
   font-size is below 16px, and never zooms back out. Every input on
   the site was 13.3–14.4px, so tapping any search box or select left
   the user zoomed in and scrolled sideways. 16px on coarse pointers
   removes that entirely; desktop density is untouched.
   ============================================================ */
@media (pointer: coarse) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select,
    textarea,
    .search-input,
    .select-sm,
    .input-sm,
    .input-sm--price,
    .nav-search__input,
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
    }
    /* Price inputs are sized in ch-ish widths — give them room for 16px text */
    .input-sm--price { width: 100%; min-width: 88px; }
}

/* ============================================================
   2. Mobile bottom tab bar
   ============================================================ */
.bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above .navbar.is-open (330) so the bar stays visible and tappable while
       the More sheet is open — the sheet reserves 72px of bottom padding for it. */
    z-index: 340;
    /* grid keeps every tab the same width regardless of label length */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-surface-solid, #12121a);
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.28);
    transition: transform 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 7px 4px 8px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted, #6b6b7d);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
}
.bottom-nav__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 24px;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 999px;
    transition: background 0.18s, color 0.18s;
}
.bottom-nav__label {
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bottom-nav__item.is-active { color: var(--accent-text, #fff); }
.bottom-nav__item.is-active .bottom-nav__icon {
    background: rgba(124, 106, 255, 0.18);
    color: var(--accent-text, #fff);
}
.bottom-nav__item:active .bottom-nav__icon { transform: scale(0.92); }
/* Unread-notification dot on the More tab */
.bottom-nav__dot {
    position: absolute;
    top: -1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #8b7cff);
    box-shadow: 0 0 0 2px var(--bg-surface-solid, #12121a);
}

@media (max-width: 700.98px) {
    .bottom-nav { display: grid; }
    /* Clear the bar so the footer and the last row of content stay reachable */
    .footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    /* One menu per page: on phones it is opened from the bar, not the header */
    .nav-toggle { display: none !important; }
    /* Panel slides up from the bottom — closer to the thumb than a side sheet */
    .nav-panel {
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        max-height: 78vh;
        border-left: none;
        border-top: 1px solid var(--border-default, #2a2a3a);
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
        box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.45);
        transform: translateY(100%);
    }
    .navbar.is-open .nav-panel { transform: translateY(0); }
    /* Grab handle */
    .nav-panel::before {
        content: '';
        flex: 0 0 auto;
        width: 40px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 999px;
        background: var(--border-default, rgba(255, 255, 255, 0.18));
    }
}
/* The compact nav panel is position:fixed and must anchor to the viewport.
   Any non-none filter / backdrop-filter makes an element the containing block
   for its fixed-position descendants, so the frosted navbar would pin the
   sheet to the 64px bar. Clear the frost below 1024px and paint the bar
   opaque. Selectors are written at [data-theme] specificity and this file
   loads last, so they beat the theme sheets' own .navbar backgrounds. */
@media (max-width: 1023.98px) {
    html .navbar,
    html[data-theme="light"] .navbar,
    html[data-theme="dark"] .navbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--bg-surface-solid, #12121a);
    }
}

/* Nav panel is a phone/tablet affordance only */
@media (min-width: 701px) {
    .bottom-nav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .bottom-nav, .nav-panel, .nav-scrim { transition: none; }
}

/* ============================================================
   3. Slide-in nav panel — compact-only labels & rows
   Icon-only controls (bell, gear) get a text label inside the panel so
   every row reads the same way; on the full bar the label is dropped.
   ============================================================ */
.nav-compact-label { display: none; }
.nav-li--compact { display: none; }

@media (max-width: 1023.98px) {
    .nav-compact-label { display: inline; }
    .nav-li--compact { display: block; }

    /* Every panel row: full width, same height, icon then label */
    .nav-panel .nav-notif-btn,
    .nav-panel .nav-link--icon,
    .nav-panel .nav-account,
    .nav-panel .nav-link--muted {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 46px;
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 500;
    }
    .nav-panel .nav-notif-btn,
    .nav-panel .nav-link--icon {
        color: var(--text-secondary, #9ca3b8);
        background: none;
    }
    /* These controls centre their content on the full bar; in the panel every
       row must read left-to-right like the links above them. */
    .nav-panel .nav-notif-btn,
    .nav-panel .nav-link--icon,
    .nav-panel .theme-toggle {
        justify-content: flex-start;
        padding-left: 14px;
    }
    .nav-panel .theme-toggle { gap: 12px; }
    .nav-panel .theme-toggle::after { margin-left: 0; }
    .nav-panel .nav-notif-btn i,
    .nav-panel .nav-link--icon i {
        width: 20px;
        text-align: center;
        font-size: 1rem;
    }
    .nav-panel .nav-notif-btn .nav-badge { margin-left: auto; }
    .nav-panel .nav-link--muted { color: var(--text-muted, #6b7280); font-size: 0.9rem; }
    .nav-panel .nav-account { border-radius: 12px; }
    .nav-panel .nav-cta { min-height: 46px; }
    /* Lock the page behind an open panel so only the panel scrolls */
    body.nav-open { overflow: hidden; }
}

/* ============================================================
   4. Touch targets
   ============================================================ */
@media (pointer: coarse) {
    .footer__col a,
    .footer__bottom a,
    .see-all,
    .card-page__illustrator-link,
    .active-filter-chip__x {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .footer__col a { padding: 2px 0; }
    .see-all { padding: 4px 0; }
    /* Stepper / icon buttons inside dense card footers */
    .cc-step, .stepper-btn, .cc-menu__toggle {
        min-width: 36px;
        min-height: 36px;
    }
}

/* ============================================================
   5. Denser page chrome on small screens
   The hero band + panel used to eat an entire phone screen before the
   first result. Tightening both puts real content above the fold.
   ============================================================ */
@media (max-width: 700.98px) {
    .page-hero { padding-top: 20px; padding-bottom: 16px; }
    .page-hero h1 { margin-bottom: 4px; }
    .page-hero__sub, .page-hero p { margin-bottom: 0; }
    .page-content--after-hero { padding-top: 14px; }
    .search-panel { padding: 12px; margin-bottom: 12px; }
    .section-title { margin-bottom: 12px; }
}

/* ============================================================
   6. Browse filters — compact on phones
   Search + submit share one row; the selects become a single
   horizontally-scrollable row instead of a 2×2 block. Cuts the panel
   from ~250px to ~104px.
   ============================================================ */
@media (max-width: 700.98px) {
    /* (The main search row is kept on one line by the ≤560px block in
       design.css, which owns that layout.) */
    .search-bar__row--filters {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        /* bleed to the panel edges so the row reads as scrollable */
        margin: 10px -12px 0;
        padding: 0 12px 2px;
        scroll-padding-left: 12px;
    }
    .search-bar__row--filters::-webkit-scrollbar { display: none; }
    .search-bar__row--filters > * { flex: 0 0 auto; white-space: nowrap; }
    /* Must repeat the app.css selector's specificity to drop its flex:1 /
       max-width, otherwise each select shrinks and clips its own label. */
    .search-bar__row--filters .select-sm,
    .search-bar__row--filters .select-sm--set {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }
    .search-bar__row--advanced {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }
    .search-bar__row--advanced > * { flex: 1 1 140px; }
    .search-bar__row--advanced .filter-check { flex: 1 1 100%; min-height: 44px; }
}

/* ============================================================
   7. Card grid & collect bar on narrow screens
   ============================================================ */
@media (max-width: 700.98px) {
    /* Keep the quantity stepper tappable without overflowing a 2-up cell */
    .cc-bar { padding-left: 6px; padding-right: 6px; }
    .cc-bar__row { gap: 4px; }
    .cc-stepper { flex: 1 1 auto; min-width: 0; justify-content: center; }
    .cc-qty { min-width: 1.5em; text-align: center; }
    .card-info { padding-left: 10px; padding-right: 10px; }
    .card-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* The variant popover is portalled to <body> and positioned by app.js
       (positionPop), which already clamps it to the viewport — don't set
       left/top/right/bottom here or it fights the inline styles and the box
       becomes over-constrained. Tap sizing only. */
    .cc-menu__item { min-height: 44px; }
    .cc-menu__pop { max-height: 60vh; overflow-y: auto; }
}

/* ============================================================
   7b. Home hero — phone only
   The hero showcase is LOCKED (see CLAUDE.md); nothing in design.css is
   touched. This block is additive and scoped to ≤600px only, so desktop and
   tablet render byte-identically. On a 390×844 phone the hero measured
   1012px — a screen and a quarter of intro before any content. Trimming the
   band's padding, the column gap and the stage height brings it to roughly
   one screen, with the next section peeking to invite the scroll.
   ============================================================ */
@media (max-width: 600px) {
    .hero { padding-top: 36px; padding-bottom: 40px; }
    .hero__body { gap: 26px; }
    .hero__stage { height: 260px; }
    .hero__trust { column-gap: 14px; row-gap: 6px; }
}

/* ============================================================
   8. Back to top
   Browse results run to 10k+ px on a phone; without this the only way
   back to the filters is a long flick.
   ============================================================ */
.to-top {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 290;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
    border-radius: 50%;
    background: var(--bg-surface-solid, #12121a);
    color: var(--text-secondary, #a8a8b8);
    box-shadow: var(--shadow-md, 0 8px 32px rgba(0, 0, 0, 0.4));
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    /* stepped visibility — see the note on .nav-panel in app.css */
    transition: opacity 0.22s, transform 0.22s, color 0.15s, visibility 0s linear 0.22s;
}
.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s, transform 0.22s, color 0.15s, visibility 0s linear 0s;
}
.to-top:hover { color: var(--accent-text, #fff); border-color: var(--border-accent, rgba(124, 106, 255, 0.35)); }
@media (max-width: 700.98px) {
    .to-top { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .to-top { transform: none; }
    .to-top.is-visible { transform: none; }
}

/* ============================================================
   9. Tables & wide content
   Anything wider than the viewport must scroll in its own box —
   never the page body.
   ============================================================ */
.listings-table-wrap,
.portfolio-table-wrap,
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
@media (max-width: 700.98px) {
    .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-left: calc(var(--container-pad, 16px) * -1);
        margin-right: calc(var(--container-pad, 16px) * -1);
        padding-left: var(--container-pad, 16px);
        padding-right: var(--container-pad, 16px);
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .tab { flex-shrink: 0; white-space: nowrap; }
    /* Long unbroken strings (card numbers, URLs) must not widen the page */
    .card-name, .card-num, .page-hero h1, .card-page__title { overflow-wrap: anywhere; }
}

/* ============================================================
   10. Portfolio — stacked rows on phones
   Eight columns cannot be read on a 390px screen, and a sideways-
   scrolling table hides the numbers that matter. Each row becomes a
   card with the card name as its heading and label/value pairs below.
   Labels come from the td's data-label (set in pages/portfolio.php).
   ============================================================ */
@media (max-width: 700.98px) {
    .portfolio-table-wrap { overflow-x: visible; }
    .portfolio-table { display: block; width: 100%; }
    .portfolio-table thead { display: none; }
    .portfolio-table tbody { display: block; }
    .portfolio-table tr {
        display: block;
        position: relative;
        margin-bottom: 12px;
        padding: 12px 14px;
        border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
        border-radius: var(--radius-md, 14px);
        background: var(--bg-surface-solid, #12121a);
    }
    .portfolio-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        border: 0;
        font-size: 0.9rem;
    }
    .portfolio-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--text-muted, #6b6b7d);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    /* Card name spans the row as its heading; the remove button floats top-right */
    .portfolio-table .portfolio-card-td {
        display: block;
        padding: 0 40px 8px 0;
        border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
        margin-bottom: 4px;
    }
    .portfolio-table .portfolio-actions-cell {
        position: absolute;
        top: 8px;
        right: 8px;
        display: block;
        width: 36px;   /* explicit: a shrink-to-fit flex cell collapsed to 3px */
        padding: 0;
    }
    .portfolio-table .portfolio-actions-cell form,
    .portfolio-table .portfolio-row-actions { display: block; }
    .portfolio-table .btn-icon--remove { width: 36px; height: 36px; }
    .portfolio-toolbar { flex-wrap: wrap; gap: 10px; }
    .portfolio-toolbar .portfolio-filter { flex: 1 1 150px; margin-bottom: 0; }
    /* Two stat tiles per row instead of one full-width tile per line —
       minmax(170px,1fr) only fits one column inside a 358px content box. */
    .portfolio-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 18px;
    }
    .summary-stat { padding: 14px 12px; }
    .stat-val { font-size: 1.25rem; }
}

/* ============================================================
   11. Card detail — actions above the spec grid on phones
   Adding the card to a portfolio is why most people open this page; on
   a phone it sat ~1,000px down, below the whole spec grid.
   ============================================================ */
@media (max-width: 700.98px) {
    .card-page__info { display: flex; flex-direction: column; }
    .card-page__actions-panel { order: 1; }
    .card-price-chart { order: 2; }
    .card-page__specs { order: 3; }
}