/* ─────────────────────────────────────────────────────────────────
   mobile-refresh.css
   Mobile-only UI refresh for carddex.eu (≤768px).
   Desktop and tablet (>768px) are intentionally untouched — every
   rule below is gated to a max-width media query.
   Companion script: /utils/mobile-shell.js — injects the markup.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Tokens (mobile-only additions) ──────────────────────────
     Layered on top of existing --bg, --surface, --accent etc which
     are already defined globally on each page. */
  :root {
    --mr-fs-xs:      clamp(11px, 0.20vw + 10.5px, 12px);
    --mr-fs-sm:      clamp(12px, 0.25vw + 11.5px, 13.5px);
    --mr-fs-md:      clamp(13.5px, 0.35vw + 12.5px, 15.5px);
    --mr-fs-lg:      clamp(15px, 0.6vw + 13px, 18px);

    --mr-sp-1: 4px;
    --mr-sp-2: 8px;
    --mr-sp-3: 12px;
    --mr-sp-4: 16px;

    --mr-r-sm: 6px;
    --mr-r-md: 10px;
    --mr-r-pill: 999px;

    --mr-glass: color-mix(in srgb, var(--surface) 72%, transparent);
    --mr-ease:  cubic-bezier(.2, .8, .2, 1);
  }

  /* ── Hide existing topbar bits we replace with the dropdown ───
     The TCG nav strip AND the entire .header-right container (which
     holds Portfolio/Alerts/Reports + i18n + tier chip) are folded
     into the new mobile shell. Logo and user-menu (avatar) stay.
     Some pages (notably product.html) don't wrap their chrome in
     .header-right — they drop the source-toggle, "last updated"
     stamp, and tier badge directly into <header>. Hide those by
     name so they don't overflow the 48-px mobile header bar. */
  header .tcg-nav,
  header .header-right,
  header > .source-toggle-mount,
  header > .last-updated,
  header > #tierBadge { display: none !important; }

  /* Tighten existing tcg-sheet so it doesn't conflict */
  .tcg-sheet, .tcg-sheet-backdrop { z-index: 195; }

  /* ── Logo image (carry over from live, just enforce sizing) ── */
  header .logo img { flex-shrink: 0; border-radius: 6px; display: block; }

  /* ── Topbar layout: logo · TCG Markets trigger · avatar ──────
     Three visible items only (other children hidden above). Flex
     space-between centers the trigger between logo and user-menu. */
  header {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    gap: var(--mr-sp-2);
  }
  header .logo { flex: 0 0 auto; }
  header .user-menu { flex: 0 0 auto; margin-left: 0 !important; }

  /* ── TCG Markets dropdown trigger (injected) ─────────────────
     Same gold-tinted recipe as the Investor tier chip but rendered
     as a 32px tappable button with 6px square-rounded corners. */
  .mr-market-btn {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mr-sp-2);
    padding: 6px var(--mr-sp-2);
    min-height: 32px;
    min-width: 120px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--mr-r-sm);
    font-family: inherit;
    font-size: var(--mr-fs-sm);
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 120ms var(--mr-ease),
                color 120ms var(--mr-ease),
                background 120ms var(--mr-ease);
  }
  .mr-market-btn:hover {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .mr-market-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  }
  .mr-market-btn[aria-expanded="true"] {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    border-color: var(--accent);
  }
  .mr-market-btn__chevron {
    flex-shrink: 0;
    transition: transform 200ms var(--mr-ease);
  }
  .mr-market-btn[aria-expanded="true"] .mr-market-btn__chevron { transform: rotate(180deg); }

  /* ── Dropdown panel (anchored below topbar) ──────────────── */
  .mr-market-dropdown {
    display: none;
    position: fixed;
    top: 56px; /* below mobile topbar (48 + 8) */
    left: var(--mr-sp-2);
    right: var(--mr-sp-2);
    z-index: 200;
    background: color-mix(in srgb, var(--surface) 90%, white 10%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--border);
    border-radius: var(--mr-r-md);
    box-shadow: 0 12px 36px rgba(0,0,0,.36);
    padding: var(--mr-sp-1);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .mr-market-dropdown.is-open {
    display: block;
    animation: mrDropdownIn 200ms var(--mr-ease);
  }
  @keyframes mrDropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .mr-market-dropdown__head {
    padding: var(--mr-sp-2) var(--mr-sp-3) var(--mr-sp-1);
    font-size: var(--mr-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
  }
  .mr-market-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--mr-sp-3);
    padding: var(--mr-sp-2) var(--mr-sp-3);
    min-height: 48px;
    border-radius: var(--mr-r-sm);
    text-decoration: none;
    color: var(--text);
    font-size: var(--mr-fs-sm);
    font-weight: 600;
    transition: background 120ms var(--mr-ease), color 120ms var(--mr-ease);
  }
  .mr-market-dropdown__item:hover { background: var(--hover); }
  .mr-market-dropdown__item.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  .mr-market-dropdown__item .mr-icon {
    font-size: 22px; line-height: 1; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
  }
  .mr-market-dropdown__item .mr-icon svg { display: block; }
  .mr-market-dropdown__divider {
    height: 1px;
    background: var(--border);
    margin: var(--mr-sp-1) var(--mr-sp-2);
  }
  .mr-market-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(0,0,0,0.35);
  }
  .mr-market-backdrop.is-open { display: block; }

  /* ── Restyle the existing .cdx-bottom-nav with the new look ──
     The live site already ships a bottom nav with the same five
     destinations (Home / Portfolio / Alerts / Reports / Account)
     plus a connectivity dot. We restyle it in place — glass blur,
     gold accents, scroll-aware transform — instead of injecting
     a duplicate (which earlier ate clicks under z-index 9999). */
  .cdx-bottom-nav {
    background: var(--mr-glass) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--border) !important;
    /* Sit flush against the safe-area on pages without the meta-bar.
       Pages that render .cdx-meta-bar lift the nav 24 px so its bottom
       border lands 1 px past the strip's top border — see the
       :has() override below. */
    bottom: env(safe-area-inset-bottom) !important;
    padding: var(--mr-sp-1) var(--mr-sp-2) !important;
    transform: translateY(0);
    transition: transform 700ms var(--mr-ease);
    will-change: transform;
  }
  body:has(.cdx-meta-bar) .cdx-bottom-nav {
    bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
  /* Scroll-direction visibility: hide on scroll-down, reveal on
     scroll-up. The translation must clear (a) the nav's own height,
     (b) the 24-px lift above the meta-bar, and (c) the safe-area
     inset the meta-bar absorbs — otherwise icons stay visible. */
  .cdx-bottom-nav.is-hidden {
    transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom)));
  }
  .cdx-bottom-nav__item {
    min-height: 52px;
    border-radius: var(--mr-r-sm);
    font-weight: 600 !important;
    transition: color 120ms var(--mr-ease) !important;
  }
  .cdx-bottom-nav__item[aria-current="page"] {
    color: var(--accent) !important;
  }
  /* Live indicator dot stays visible at the end of the nav row */
  .cdx-bottom-nav__live { align-self: center; }

  @media (prefers-reduced-motion: reduce) {
    .cdx-bottom-nav { transition: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mr-market-dropdown.is-open { animation: none; }
  }

  /* ── Narrow phones (≤375px): shrink the TCG Markets trigger ───
     The default 120px-wide trigger crowds tiny viewports (iPhone SE,
     Galaxy Fold cover, etc). Drop the leading house glyph, tighten
     padding/height, drop one font-size step, and switch to a pill
     border so the chip reads as a compact tag. The "TCG Markets"
     label and chevron stay fully visible. */
  @media (max-width: 375px) {
    .mr-market-btn {
      gap: var(--mr-sp-1);
      padding: 4px 10px;
      min-height: 26px;
      min-width: 0;
      font-size: var(--mr-fs-xs);
      border-radius: 10px;
    }
    .mr-market-btn > svg:first-child { display: none; }
    .mr-market-btn__chevron { width: 12px; height: 12px; }
  }

  /* ── Avatar dropdown — fit-to-viewport on mobile ──────────────
     The existing user-dropdown is absolutely positioned and grows
     to fit the theme + language pickers, which overflows past the
     viewport edge on narrow screens. Pin it to fixed positioning
     anchored just below the topbar, span the available width with
     a sensible cap, and tighten the inner pickers so they fit. */
  .user-dropdown {
    position: fixed !important;
    top: 52px !important;
    right: var(--mr-sp-2) !important;
    left: auto !important;
    width: min(240px, calc(100vw - 16px)) !important;
    min-width: 0 !important;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    border-radius: var(--mr-r-md) !important;
    transform-origin: top right;
  }

  /* Theme picker — vertical stack: label on its own row, chips below
     left-aligned so the right-side whitespace from the previous row
     layout disappears and the dropdown collapses to ~half its height.
     Use display: block (not flex-direction: column) to sidestep any
     flex-cascade issues from premium.css's row layout. */
  #userDropdown .cdx-theme-picker {
    display: block !important;
    padding: var(--mr-sp-1) var(--mr-sp-3) var(--mr-sp-2) !important;
  }
  #userDropdown .cdx-theme-picker__label {
    display: block !important;
    padding: 0 0 var(--mr-sp-1) 0 !important;
  }
  #userDropdown .cdx-theme-picker__chips {
    display: grid !important;
    grid-template-columns: repeat(6, 22px) !important;
    gap: 4px !important;
    row-gap: 4px !important;
    justify-content: start !important;
    max-width: none !important;
  }
  #userDropdown .cdx-theme-chip {
    width: 22px !important;
    height: 22px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-width: 1.5px !important;
    box-sizing: border-box !important;
  }

  /* Language picker — vertical-stack: label on top, chips wrapping below */
  .cdx-language-picker {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mr-sp-1);
    padding: 2px var(--mr-sp-3) var(--mr-sp-2);
  }
  .cdx-language-picker__chips {
    width: 100%;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .cdx-lang-chip {
    flex: 1 1 0 !important;
    width: auto !important;
    padding: 3px 6px !important;
  }
  .cdx-lang-chip__flag { font-size: 18px; }

  /* Tighten the dropdown's internal padding so it doesn't feel airy */
  .user-dropdown-header { padding: var(--mr-sp-2) var(--mr-sp-3) !important; }
  .user-dropdown-item   { padding: 6px var(--mr-sp-3) !important; min-height: 36px; }
  .theme-switch         { padding: var(--mr-sp-1) var(--mr-sp-3) !important; }
  #userDropdown .user-dropdown-divider { margin: var(--mr-sp-1) 0 !important; }
}