/* ---------- Desktop / wide viewport ---------- */

@media (min-width: 860px) {
  .topbar-row1, .topbar-row2 {
    max-width: 920px;
    margin: 0 auto;
  }

  main#app { max-width: 920px; padding: 20px 24px 40px; }

  /* Detailed cards carry a description and tag pills, so they need more room per card than the fixed
     2/3-column grids. Auto-fill by a minimum card width instead of a fixed count, so it never contradicts
     what "2 columns" / "3 columns" literally promise, and never renders fewer cards per row than Grid 2/3. */
  .card-list.view-detailed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    align-items: start;
  }

  /* Bottom tab bar -> a centered nav in the header's first row. The nav lives in the header markup itself
     (not a separate sticky element), so it scrolls with — and never collides with — the already-sticky
     header, and stays reachable at any scroll position without a second sticky layer. Saved/Profile drop
     out of the tab bar on desktop (.nav-extra) in favor of icon buttons (the header keeps a Settings gear or Sign in link at this width), so the bar
     only carries the two sections that deserve a permanent, named slot. */
  body { padding-bottom: 0; }

  .topbar-row1 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
  }

  .header-actions { justify-self: end; }

  .bottom-nav {
    position: static;
    justify-self: center;
    gap: 24px;
    background: transparent;
    border-top: none;
  }

  .nav-extra { display: none; }
  .header-actions .desktop-icon { display: inline-flex; }
  /* Messages moves into the sidebar nav list at this width (see .sidebar-nav below) — the header icon
     stays mobile-only. */
  .header-actions a[data-nav="messages"] { display: none; }

  .layout-shell {
    display: flex;
    align-items: stretch;
    gap: 24px;
  }

  .app-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: none;
    width: 260px;
    position: relative;
    /* Tall enough that Profile/Settings (.sidebar-nav-bottom, margin-top:auto below) land near the
       bottom of the viewport instead of right under Saved/Messages. The sidebar stretches to the page height, so the
       middle (categories, product controls) scrolls with the page while the two quick-access navs stick (see below). */
    min-height: calc(100vh - 88px - 24px);
    /* .layout-shell is a flex container, so its items paint in DOM order regardless of `position` —
       without this, main#app (which comes after the sidebar in the markup) paints over the sidebar,
       including its hover flyout, making the flyout look transparent and lose the pointer the moment
       it overlaps a card underneath. */
    z-index: 5;
  }

  .sidebar-nav-bottom { margin-top: auto; }

  /* Quick access stays on screen: Saved/Messages at the top, Profile/Settings at the bottom. The categories in between scroll
     with the page. */
  .app-sidebar > .sidebar-nav:not(.sidebar-nav-bottom) { position: sticky; top: 88px; z-index: 1; background: var(--bg); }
  .app-sidebar > .sidebar-nav-bottom { position: sticky; bottom: 0; z-index: 1; background: var(--bg); padding-bottom: 16px; }

  /* position+z-index (not just flex item order) so this establishes its own stacking context — otherwise
     Leaflet's internal panes (z-index in the hundreds) paint past the sidebar's z-index:5 when the map
     view is active, same bleed-through bug the sidebar's z-index above fixes for ordinary card lists. */
  .layout-shell main#app { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }

  .discover-banner { min-height: 108px; padding: 28px 32px; margin-bottom: 20px; }
  .discover-banner p { font-size: 19px; max-width: 70%; }

  /* Market page: left column (hero, header, stores, reviews) + right column (directions + mini-map),
     the latter spanning all three left-column rows instead of sitting between header and stores. */
  .market-layout {
    grid-template-columns: 1fr 320px;
    grid-template-areas: "header side" "stores side" "reviews side";
    column-gap: 24px;
    align-items: start;
  }

  /* The horizontal rail's job (category filter entry point) is done by the sidebar categories list now
     — and so is the sticky bar's (it pins a Categories button once the rail scrolls past; its scroll
     anchor IS the rail, so it must go dark here too, not just visually redundant). */
  .category-rail-wrap { display: none; }
  .cat-sticky-wrap { display: none; }
  .market-mobile-categories { display: none; } /* the sidebar (above) covers this at this width */

  .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

  .sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 14px;
    text-decoration: none;
  }
  .sidebar-nav-link svg { flex: none; }
  .sidebar-nav-link:hover { background: var(--surface-2); color: var(--text); }
  .sidebar-nav-link.active { background: var(--brand-tint); color: var(--brand-text); font-weight: 600; }
  .sidebar-nav-link .notif-dot { position: static; margin-left: auto; }

  /* Sidebar account block (js/browse-filters.js sidebarAccountBlockHtml): signed in, one card with the avatar, name and
     tag · XP, which is the link to the Profile page and shows the active highlight there. Signed out, a single Sign in link. */
  .sidebar-account-who {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    min-width: 0;
  }
  .sidebar-account-who:hover { background: var(--surface-2); }
  .sidebar-account-text { display: flex; flex-direction: column; min-width: 0; }
  .sidebar-account-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-account-status { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-account-avatar { display: flex; flex: none; }
  .sidebar-account-who.active { background: var(--brand-tint); color: var(--brand-text); }
  .sidebar-account-who.active .sidebar-account-status { color: var(--brand-text); }

  .sidebar-categories {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  /* An underline tab, not a filled pill — filled/rounded chips are already used for the Markets/Vendors/
     Products/Places mode switch right below, and a primary nav needs to read as a different kind of control. */
  .nav-item {
    flex: none;
    flex-direction: row;
    gap: 6px;
    padding: 6px 2px;
    color: var(--text-muted);
    font-size: 14px;
    border-bottom: 2px solid transparent;
  }

  .nav-item:hover { color: var(--text); }
  .nav-item.active { color: var(--brand-text); font-weight: 600; border-bottom-color: var(--brand-text); }

  .fab { bottom: 24px; }
}

/* The ad rails turn on at 1300px and grow continuously from there — no fixed rail width, no dead zone.
   The content column has its own floor (640px) so it's never crushed just to make room for ads, and a
   cap (1600px) so it doesn't run on forever either; the rails (80px floor) take whatever's left. CSS
   Grid's own track-sizing does the rest without any extra breakpoints: from 1300px up to ~1920px the
   content column is still growing toward its 1600px cap and the rails sit at their 80px floor (thin,
   but present — not the 0px/invisible sliver a fixed-1280px-center version produces at this width); once
   content hits its cap, every extra pixel of viewport goes straight to the rails instead. max-width on
   .page-shell is a sanity ceiling only (3600px — bigger than any screen width this app is expected to run
   on), not a cap meant to be hit: the rails should fill the screen up to that, not stop short of it and
   leave a blank margin on a big monitor. */
@media (min-width: 1300px) {
  .topbar-row1, .topbar-row2 { max-width: 1600px; }

  main#app { max-width: none; margin: 0; }

  /* Ad rails OFF (the default, <body data-ad-rails="off"> in index.html): no rail columns, so the page keeps the whole width up to
     the same 1600px content cap. Set the switch to "on" and the layout described above comes back. */
  .page-shell {
    max-width: 1632px;
    margin: 0 auto;
    padding: 0 16px;
  }

  body[data-ad-rails="on"] .page-shell {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(640px, 1600px) minmax(80px, 1fr);
    gap: 24px;
    max-width: 3600px;
  }

  body[data-ad-rails="on"] .side-rail {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    position: sticky;
    top: 88px;
    min-height: 280px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: 12px;
  }

  body[data-ad-rails="on"] .side-rail::after { content: "Ad space"; }
}

/* Terms / Privacy pages */
.legal h2 { font-size: 1.05rem; margin: 22px 0 6px; }
.legal p, .legal li { line-height: 1.6; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal a { color: var(--brand-text); }
.legal-table { overflow-x: auto; margin: 10px 0; }
.legal-table table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.footer-links { margin-top: 6px; }