/* ═══ MOBILE APP SHELL ═══════════════════════════════════════════════════
   Bottom stack (offline banner + item bar + tab bar), night mode overlay,
   and the recently-viewed strip. */

/* One fixed container; children stack in normal flow so two visible bars can
   never overlap. Sits below the top-right controls (10001) and well below the
   modals (20000) so a dialog always covers it. */
.shell-bottom {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9000;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    pointer-events: none;              /* only the bars themselves are hit */
}
.shell-bottom > * { pointer-events: auto; }

/* ── Offline banner ── */
.net-banner {
    display: none;                     /* shown by syncNetBanner() */
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #7a2b12;
    color: #ffe4d6;
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: center;
    padding: 9px 14px;
    border-top: 1px solid #a03d1c;
}

/* ── Sticky item action bar ── */
.item-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid #c4d898;
    padding: 9px 12px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
/* The real buttons under the photo are on screen — get out of the way. */
.item-bar-hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}
.item-bar-info { flex: 1 1 auto; min-width: 0; }
.item-bar-name {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1a2a0e;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-bar-price {
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    color: #5a7840;
}
.item-bar-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: #f2f7e8;
    border: 1px solid #c4d898;
    border-radius: 10px;
    color: #3A4A20;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Opaque fills. .btn-add and .btn-wish are transparent by default (they sit on
   table rows elsewhere); in this bar the page scrolls underneath, so a
   see-through control shows the gear photo straight through it. */
.item-bar .btn-wish {
    flex: 0 0 auto;
    background: #f2f7e8;
    border-color: #c4d898;
    /* Match the share button beside it. .btn-wish is 28px by default and 32px on
       a phone, so next to a 40px share icon the heart read as a smaller, lesser
       control — they do the same kind of job and should carry the same weight.
       border-radius stays 50% from the base rule: the heart is a circle, the
       share button a rounded square; it is the SIZE being matched, not the shape.
       Font scales with it at the same ~0.5 ratio the smaller sizes use. */
    width: 40px; height: 40px; font-size: 20px;
}
.item-bar .btn-wish.in-wish { background: #fdecec; }
.item-bar .btn-add {
    background: #3A4A20;
    border-color: #3A4A20;
    color: #f2f7e8;
}
.item-bar .btn-add.in-pack {
    background: #eaf5d8;
    border-color: #3A4A20;
    color: #2a4010;
}
.item-bar-add {
    flex: 0 0 auto;
    font-size: 13px !important;
    padding: 11px 18px !important;
    border-radius: 22px !important;
    white-space: nowrap;
}

/* ── Bottom tab bar ── */
.tabbar {
    display: none;                     /* mobile only — turned on below */
    background: #ffffff;
    border-top: 1px solid #c4d898;
    box-shadow: 0 -2px 10px rgba(26, 42, 14, 0.07);
}
.tabbar-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 52px + the label keeps every target comfortably over the 44px minimum. */
    min-height: 52px;
    padding: 6px 2px 7px;
    color: #7a8c60;
    font-family: Oswald, sans-serif;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.tabbar-btn svg { display: block; }
.tabbar-btn.tab-active { color: #3A4A20; }
/* The colour difference alone is not enough of a signal at a glance. */
.tabbar-btn.tab-active::before {
    content: '';
    position: absolute;
    top: 0; left: 22%; right: 22%;
    height: 3px;
    background: #D4681E;
    border-radius: 0 0 3px 3px;
}
.tabbar-badge {
    position: absolute;
    top: 3px;
    left: 50%;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #D4681E;
    color: #fff;
    font-size: 10px;
    font-family: Inter, sans-serif;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    display: none;
}


/* ── Recently viewed strip ── */
.rv-wrap { margin: 0 0 34px; }
.rv-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.rv-clear {
    background: none;
    border: none;
    color: #9ab860;
    font-family: Oswald, sans-serif;
    font-size: 10.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px 2px;
}
.rv-clear:hover { color: #D4681E; }
/* Wide content scrolls inside its own container — the page never scrolls
   sideways. */
.rv-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
}
.rv-strip::-webkit-scrollbar { height: 5px; }
.rv-strip::-webkit-scrollbar-thumb { background: #c4d898; border-radius: 3px; }
.rv-card {
    flex: 0 0 auto;
    width: 152px;
    scroll-snap-align: start;
    background: #f2f7e8;
    border: 1px solid #c4d898;
    border-radius: 10px;
    padding: 12px 12px 11px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    /* Column flex so the stars + price pair can be pinned to the floor. */
    display: flex;
    flex-direction: column;
}
/* Stars and price ride the bottom edge of every card, so both rows line up
   across the strip however tall the brand and name above them turn out. */
.rv-stars { margin-top: auto; }
.rv-card:hover { border-color: #5a7030; transform: translateY(-1px); }
.rv-brand {
    font-family: Oswald, sans-serif;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #9ab860;
    margin-bottom: 4px;
    /* "Hyperlite Mountain Gear" wraps to two lines at 152px and made its card
       taller than its neighbours. One line, ellipsis. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rv-name {
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #1a2a0e;
    line-height: 1.3;
    margin-bottom: 6px;
    /* Two lines max, so every card in the row is the same height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px;
}
.rv-stars { margin-bottom: 5px; transform: scale(0.82); transform-origin: center; text-align: center; }
.rv-price {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #3A4A20;
    /* Centred across the card's width. */
    text-align: center;
}

/* ── Model Packs tile ──
   The badge label and the range line are both centred, and the range line
   borrows the hero headline's recipe: Oswald, weight 900, uppercase, tight
   leading, plus the 0.4px stroke the site uses to fake a heavier cut than
   Oswald ships. Sized for a tile rather than a hero.

   Not inside a media query — desktop and phone share this, only the size
   differs. Lives in this file because home.css defines .home-pick-name and
   loads earlier; the !important is needed because screener.css pins that class
   to 13px on phones. */
.home-modelpacks-badge { justify-content: center; }
.home-modelpacks-card .home-pick-name {
    font-family: 'Oswald', sans-serif;
    font-size: 23px !important;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    -webkit-text-stroke: 0.4px currentColor;
    text-align: center;
    /* Fills the gap between the badge and the footer and centres inside it, so
       the line sits halfway down the tile instead of hugging the badge. */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.home-modelpacks-card .mp-label { display: block; }
/* The badge carries margin-bottom:10px from .home-pick-badge, which sits
   OUTSIDE the centred box and made the gap above the line 10px larger than the
   gap below it. The flex centring handles the spacing on its own. */
.home-modelpacks-card .home-pick-badge { margin-bottom: 0; }
/* The footer holds only "Browse Packs →" now — the price cell that used to sit
   opposite it is gone, so space-between has nothing to push against and the
   link sat on the left. Send it to the right edge. */
.home-modelpacks-card .home-pick-footer { justify-content: flex-end; }

/* Centre the line in the card, not just the glyphs in their own box: the card
   is a flex column, so the text block itself has to be centred too. */
.home-modelpacks-card { align-items: center; text-align: center; }
.home-modelpacks-card .home-pick-badge,
.home-modelpacks-card .home-pick-footer { align-self: stretch; }

/* ═══ PHONE ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* A phone card is narrower — drop the tile headline a size, and give the
       arrow its own line so the two halves of the range read as a pair rather
       than wrapping wherever the width happens to break. */
    .home-modelpacks-card .home-pick-name { font-size: 19px !important; }
    /* Top Pick action reads "View →" on a phone; the full "View Analysis →"
       stays on desktop where there is room for it. */
    .hpa-long { display: none; }

    /* Pack Intelligence rows are a 6-column grid on fixed px tracks; they do not
       fit a phone and were being clipped. Scroll them sideways instead, with the
       grid held at its natural width. */
    .qa-intel-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
    }
    /* 150+104+72+86+100+110 tracks + 5 gaps + row padding.
       The pinned Item column is deliberately narrow: every pixel it takes is a
       pixel of the scroll viewport the other five columns don't get. Names wrap
       to the two-line clamp instead. */
    .qa-intel-scroll > div { min-width: 642px; }
    /* Pin the Item column so the gear name stays readable while Weight, Price,
       $ vs Median and Flag scroll past. The opaque fill comes from --row-bg on
       the row, so each row's tint is preserved rather than flattened to white. */
    .qa-intel-scroll .qa-item-cell {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--row-bg, #ffffff);
        box-shadow: 6px 0 10px -6px rgba(26, 42, 14, 0.26);
        /* Name set flush against the divider it is pinned to, so the gap sits
           on the far side where the scrolling numbers live rather than being
           stranded between the name and the data. */
        text-align: right;
        padding-right: 12px;
        /* Wrap, but stop at two lines. Some manufacturer names run 130+
           characters and were pushing rows to four lines / 89px, which turned
           a scan-able table into a wall. Two lines covers nearly every real
           name; the rest get an ellipsis, with the full text on hover/long-press
           via the title attribute and on the item page itself. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .home-modelpacks-card .mp-arrow { display: block; line-height: 1.35; }

    /* Material scores on a phone: a 2-column grid, centred as a block.
       Two gauges on a row therefore sit centred as a pair, and a leftover
       single drops into column 1 — the same x as the left gauge of every row
       above it, rather than centred under the gap between them.
       Lives here (not screener.css) because home.css defines .ms-row and loads
       later; this file loads after home.css, so it wins without !important. */
    .ms-row {
        display: grid;
        grid-template-columns: repeat(2, 150px);
        justify-content: center;
        align-items: start;
        gap: 26px 34px;
        width: auto;
        max-width: 100%;
    }

    /* The desktop link row is `nav { display: none !important }` on a phone
       (base.css + screener.css). The tab bar is also a <nav>, so it needs the
       element+class selector AND !important to outrank that. */
    nav.tabbar { display: flex !important; }
    .rv-card { width: 138px; }
    /* Sat tight under Top Analyst Picks on a phone — give it a clear break so
       it reads as its own section rather than a tail on the picks row. */
    .rv-wrap { margin-top: 26px; margin-bottom: 24px; }
}

/* The item bar is a phone affordance; on a desktop the buttons under the photo
   are always a short scroll away and a floating bar just eats screen. */
@media (min-width: 1025px) {
    .item-bar { display: none; }
}