/* App reference: www/index.html, css/style.css and the supplied Pixel 9 image. */
@media (max-width: 991px) {
    body.live-rates-view > .body > #header { border-bottom: 0 !important; box-shadow: 0 4px 18px rgba(0,0,0,.5) !important; }
    #header .mobile-appbar {
        display: grid; grid-template-columns: 44px minmax(0,1fr) 44px;
        align-items: center; gap: 8px; min-height: 80px; padding: 8px 14px;
        background: linear-gradient(180deg,#4a0000,#250000);
    }
    .mobile-app-menu, .mobile-app-profile {
        display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
        border: 1px solid rgba(244,185,0,.35); border-radius: 12px;
        background: rgba(255,215,90,.06); color: #ffd75a !important;
        cursor: pointer; text-decoration: none !important;
    }
    .mobile-app-menu svg, .mobile-app-profile svg { width: 22px; height: 22px; }
    .mobile-app-menu:focus-visible, .mobile-app-profile:focus-visible, .mobile-app-brand:focus-visible { outline: 2px solid #ffd75a; outline-offset: 2px; }
    .mobile-app-menu[aria-expanded="true"] { background: rgba(255,215,90,.18); }
    .mobile-app-brand { display: flex; align-items: center; justify-content: center; min-width: 0; }
    .mobile-app-brand img { display: block; object-fit: contain; mix-blend-mode: screen; }
    .mobile-brand-mark { width: 29%; max-width: 64px; height: 64px; flex: 0 0 auto; }
    .mobile-brand-name { width: 73%; max-width: 230px; height: 64px; margin-left: -6px; }
    #header .mobile-app-ticker {
        display: block; overflow: hidden; white-space: nowrap; padding: 7px 14px;
        background: linear-gradient(135deg,#9d6100,#ffd75a 55%,#b87900);
        color: #2a0000; font-family: "Segoe UI",sans-serif; font-size: 12px;
        font-weight: 600; line-height: 1.25;
    }
    .mobile-ticker-track { display: flex; width: max-content; }
    .mobile-ticker-track > span { flex: 0 0 auto; min-width: var(--ticker-width, 100vw); padding-right: 50px; }
    .mobile-ticker-track[data-ready="true"] { animation: mobileMarketTicker 10s linear infinite; }
    .mobile-app-ticker:hover .mobile-ticker-track,
    .mobile-app-ticker:focus-within .mobile-ticker-track { animation-play-state: paused; }
    @keyframes mobileMarketTicker { to { transform: translateX(-50%); } }
    body.live-rates-view > .body > #header .headImg,
    body.live-rates-view > .body > #header .naviRow > #navhead > .header-column:last-child { display: none !important; }
    body.live-rates-view > .body > #header .naviRow { min-height: 0 !important; height: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; }
    body.live-rates-view > .body > #header .header-nav { padding: 0 !important; margin: 0 !important; }
    body.live-rates-view > .body > #header .header-nav-main nav { top: 0; max-height: 65vh; background: #250000 !important; border-color: rgba(244,185,0,.35) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-ticker-track[data-ready="true"] { animation: none; }
    .mobile-ticker-copy { display: none; }
    #header .mobile-app-ticker { overflow-x: auto; }
}

@media (max-width: 820px) {
    body > .body > .main.live-rates-page { padding: 14px 0 24px !important; background: radial-gradient(120% 90% at 50% 0%,#310000,#240000 70%) !important; }
    .live-rates {
        --app-gold: #ffd75a; --app-muted: #d9b98a; --app-line: rgba(244,185,0,.35);
        --app-gradient: linear-gradient(135deg,#9d6100,#ffd75a 55%,#b87900);
        --grid: var(--app-line);
        width: auto; max-width: calc(100% - 28px); padding: 0; border: 0; border-radius: 0;
        background: transparent !important; box-shadow: none; color: #fff9e8 !important;
        font-family: "Segoe UI",sans-serif; line-height: normal; -webkit-font-smoothing: antialiased;
    }
    .live-rates .market-summary, .live-rates .rate-panel {
        border: 1.5px solid var(--app-line); border-radius: 14px;
        background: linear-gradient(160deg,#3a0000,#2c0000) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,215,90,.05);
    }
    .live-rates .market-summary { margin-bottom: 14px; }
    .live-rates .rate-panel + .rate-panel { margin-top: 14px; }
    .live-rates .summary-item { position: relative; min-height: 64px; padding: 7px 6px; gap: 1px 5px; }
    .live-rates .summary-item + .summary-item { border-left: 0; }
    .live-rates .summary-item + .summary-item::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: var(--app-line); }
    .live-rates .summary-icon { width: 15px; height: 15px; }
    .live-rates .summary-icon svg { width: 10px; height: 10px; }
    .live-rates .summary-name { color: var(--app-gold) !important; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .4px; line-height: normal; text-shadow: none !important; }
    .live-rates .summary-value { justify-self: center; color: #fff9e8 !important; font-size: 16px; font-weight: 800; line-height: 1.25; text-shadow: none !important; padding: 0 4px; border-radius: 6px; }
    .live-rates .summary-range { display: block; grid-column: 1 / -1; grid-row: 3; margin: 1px 0 0; color: var(--app-muted) !important; font-size: clamp(8px,2.2vw,9.5px); line-height: normal; white-space: nowrap; text-align: center; }
    .live-rates .panel-heading { height: auto; background: transparent !important; }
    body .main.live-rates-page .live-rates .panel-title {
        width: max-content; min-width: 0; max-width: 100%; margin: 0 auto; padding: 7px 26px;
        font-size: 13px; line-height: normal;
    }
    /* Preserve Product / Buy / Sell tables, with space for the reference's icons. */
    .live-rates .rates-table col.product { width: 40%; }
    .live-rates .rates-table col.price { width: 30%; }
    .live-rates .future-panel .rates-table col.product { width: 29%; }
    .live-rates .future-panel .rates-table col.price { width: 19%; }
    .live-rates .future-panel .rates-table col.range { width: 33%; }
    body .main.live-rates-page .live-rates .rates-table thead th { height: auto; padding: 8px 6px; font-size: clamp(10px,2.9vw,12px); line-height: normal; }
    .main .live-rates .rates-table tbody td { height: 56px; padding: 10px 3px; border-top: 1px solid rgba(244,185,0,.12) !important; color: #fff9e8 !important; background: transparent !important; }
    .main .live-rates .rates-table tbody td:first-child { padding-left: 10px; padding-right: 4px; }
    .main .live-rates .rates-table tbody td:last-child { padding-right: 8px; }
    .main .live-rates .rates-table tbody td + td { border-left: 0 !important; }
    .live-rates .product-copy { gap: 6px; }
    .live-rates .product-cell { font-size: clamp(11px,3.2vw,13px); font-weight: 600; letter-spacing: normal; line-height: 1.25; white-space: normal; }
    .live-rates .product-copy .metal-icon { width: 20px; height: 20px; }
    .live-rates .product-copy .metal-icon svg { width: 13px; height: 13px; }
    .live-rates .price-main { width: 100%; padding: 3px 2px; border-radius: 8px; color: var(--app-gold) !important; font-size: clamp(15px,5vw,24px); font-weight: 800; line-height: 1.3; text-shadow: 0 1px 6px rgba(255,215,90,.25) !important; }
    .live-rates .future-panel .price-main { color: #fff9e8 !important; font-size: clamp(10.5px,3.2vw,18px); text-shadow: none !important; }
    .live-rates .future-panel .range-values { display: block; white-space: nowrap; color: var(--app-muted); font-size: clamp(9px,2.5vw,12px); line-height: 1.25; }
    .live-rates .price-main.rate-up, .live-rates .summary-value.rate-up { background: rgba(30,143,78,.92) !important; color: #eafff1 !important; text-shadow: none !important; }
    .live-rates .price-main.rate-down, .live-rates .summary-value.rate-down { background: #b51f3c !important; color: #fff !important; text-shadow: none !important; }
    .live-rates .market-ticker { display: none; }
    .live-rates .rates-status { margin: 10px 0 0; color: var(--app-muted) !important; font-size: 12px; }
}