/* ============================================================
   Rokin — shared mobile / responsive stylesheet
   Linked LAST on every page, after tokens.css, brand.css and the
   page's own <style>, so equal-specificity rules here win on small
   screens. Desktop is untouched.

   Tiers: <=840px (tablet/phone) and <=520px (small phone).

   RULE: nothing may make the page wider than the viewport. Fixed-
   width blocks (the family tree canvas, data tables) scroll inside
   their OWN container — never by widening the document. A page that
   scrolls horizontally is the bug that makes everything look
   "overlapped" on a phone.
   ============================================================ */

@media (max-width: 840px) {

  /* ── Navigation (all pages: public <nav> + app .top-nav) ── */
  nav, .top-nav {
    flex-wrap: wrap;
    height: auto !important;
    padding: 10px 16px !important;
    row-gap: 6px;
  }
  .nav-links {
    position: static !important;
    transform: none !important;
    order: 3;
    width: 100%;
    height: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 1.25rem !important;
    padding: 4px 0 8px;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  /* The link row scrolls horizontally. Without this the last item is simply
     sliced mid-word and reads as broken text; the fade signals "more here". */
  .nav-links {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .nav-links a, .nav-links li a { white-space: nowrap; font-size: 13px; }
  .nav-links li { height: auto; }
  .nav-links li.active::after { bottom: -4px; }
  .nav-actions { margin-left: auto; }
  .nav-actions .btn-primary { padding: 8px 14px; font-size: 13px; }

  /* ── Generic content safety ── */
  body { overflow-x: hidden; }
  img, svg, video { max-width: 100%; }
  input, select, textarea { min-width: 0; max-width: 100%; }
  .search-bar { margin: 0 12px; }
  .search-bar input { min-width: 0; }
  .stats-bar { flex-wrap: wrap; gap: 14px; justify-content: center; }
  .form-card { max-width: 100%; }
  .stats-bar { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .layout > *, .main-layout > *, .page-wrap > *, .inbox-wrap > *,
  .summary-row > *, .listings-row > *, .listing-grid > *, .hero-stats-bar > * { min-width: 0; }
  /* ── Brand lockup ──
     The logo is one 3.82:1 image (brand.css). At its 40px desktop
     height it is ~153px wide, which on a 390px nav crowds out the
     CTA. Constrain HEIGHT only — never width — so the ratio holds. */
  .brand-lockup { height: 28px !important; }
  .brand-lockup--sm { height: 24px !important; }
  .brand-lockup--xs { height: 18px !important; }
  nav .logo, .nav-logo, nav .brand, .top-nav .brand { gap: 8px !important; min-width: 0; }
  .nav-actions { flex-shrink: 0; }

  .section-card table, .table-card table, main table, .content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Fixed-width blocks scroll themselves, not the page ──
     .tree-inner is a hard 590px canvas and .auction-table-wrap /
     .upcoming-table-wrap hold wide data tables. Without these the
     document grows past the viewport and every section looks shifted. */
  .tree-outer, .auction-table-wrap, .upcoming-table-wrap, .thumbnails {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Thumbnails stay square and scroll as a strip rather than squashing. */
  .thumbnails { padding-bottom: 4px; scrollbar-width: none; }
  .thumbnails::-webkit-scrollbar { display: none; }
  .thumbnails .thumb, .thumb { flex: 0 0 auto; }

  /* Wide data tables: let cells keep their natural width and scroll, rather
     than cramming ("Storm / Chaser", "4 / yrs"). The fade tells the reader
     the row continues — without it a table sliced mid-column just reads as
     broken, which is the same trap as the nav link strip above. */
  .auction-table-wrap, .upcoming-table-wrap {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
  .auction-table-wrap th, .auction-table-wrap td,
  .upcoming-table-wrap th, .upcoming-table-wrap td { white-space: nowrap; }

  /* ── Footers (shared 4-col grid pattern) ── */
  .footer-grid, .footer-inner, footer .footer-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 1.6rem !important;
  }

  /* ── index.html (homepage) ── */
  .hero-content { padding: 90px 20px 40px; }
  .hero h1 { font-size: 34px !important; line-height: 1.15; }
  /* `.hero-stats-bar` is display:flex on index.html, so a lone
     grid-template-columns rule is INERT — the same shared-class trap as
     `.hero` (see below). Without `display: grid` the four stats stay in one
     nowrap row at unequal widths, with labels wrapping 2 lines on one and 3
     on the rest, which is what reads as misaligned. Force the grid, then
     rebuild the dividers as a 2x2 cross. */
  .hero-stats-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 0 !important;
  }
  /* Scoped to `.hero-stats-bar` on purpose: `.hero-stat`, `.hero-stat-num`
     and `.hero-stat-label` are shared by catalogue, consignors, events,
     event-catalogue, event-lot and live-auctions, whose stats are a flex
     row in the hero body, not this absolutely-positioned bar. */
  .hero-stats-bar .hero-stat {
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0.85rem 0.75rem !important;
  }
  .hero-stats-bar .hero-stat:nth-child(2n) { border-right: none; }   /* right column */
  .hero-stats-bar .hero-stat:nth-child(n+3) { border-bottom: none; } /* bottom row */
  .hero-stats-bar .hero-stat-num { font-size: 24px; }
  .hero-stats-bar .hero-stat-label { letter-spacing: 0.3px; }
  .feature-split, .split-section { grid-template-columns: minmax(0,1fr) !important; }
  .listings-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px; }
  .trust-bar-inner { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 20px; }
  .cta-btns { flex-wrap: wrap; }
  .hero-ctas { flex-wrap: wrap; gap: 10px; }
  .hero p, .hero-sub, .hero-content p { max-width: 100% !important; }
  .hero-content > * { max-width: 100%; }

  /* ── catalogue.html (marketplace) ── */
  /* `.hero` is a SHARED class name across pages. This used to zero the
     horizontal padding for the marketplace hero, which clipped the
     heading against the left edge on consignors.html. Keep a gutter. */
  .hero { padding-left: 16px !important; padding-right: 16px !important; }
  /* Heroes must stack rather than overflow. They are NOT all the same
     display type: consignors.html uses flex, live-auctions.html uses
     `grid-template-columns: 1fr auto`. A flex-only fix silently does
     nothing on the grid ones — there the `auto` stats column takes its
     full content width and starves the text column to one word per
     line, with the stats overlapping it. Handle both. */
  .hero { flex-wrap: wrap; gap: 1.25rem !important; }
  .hero { grid-template-columns: minmax(0,1fr) !important; }
  .hero > * { min-width: 0; }
  .hero-left, .hero-stats { min-width: 0; flex-shrink: 1 !important; }
  .hero-stats { flex-wrap: wrap; width: 100%; }
  .hero-stat { flex: 1 1 auto; padding: 0.75rem 1rem !important; }
  .hero-sub { font-size: 14px !important; max-width: 100% !important; }
  /* Short status pills must never break mid-phrase ("LIVE / NOW"). */
  .live-badge, .section-badge-live, .hero-eyebrow, .lot-chip { white-space: nowrap; }
  .hero-visual, .hero-right, .hero-img { display: none; }
  .main-layout { grid-template-columns: minmax(0,1fr) !important; }
  .sidebar { width: auto !important; }
  .listing-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px !important; }

  /* ── live-auctions.html ── */
  /* Title + live pill + sort select share one row on desktop; on a phone
     the select gets sliced ("Ending Soone…") and the pill breaks in half. */
  .section-header {
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start !important;
  }
  .section-title { flex-wrap: wrap; min-width: 0; gap: 8px; }
  .sort-select { max-width: 100%; flex: 0 1 auto; }
  /* "3 scheduled" / "5 Live" counters sit at the row end — keep them whole. */
  .section-header > span, .section-header > .muted { white-space: nowrap; flex-shrink: 0; }
  .auction-grid { grid-template-columns: minmax(0,1fr) !important; }
  .auction-card { grid-column: auto !important; }
  .auction-card > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .hero-stats { flex-wrap: wrap; }

  /* ── sellers.html ── */
  .page-wrap { grid-template-columns: minmax(0,1fr) !important; }
  .seller-list { max-height: 45vh; overflow-y: auto; position: static !important; }
  .dp-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .dp-listings { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }

  /* ── app-listing.html (detail) ── */
  .layout { grid-template-columns: minmax(0,1fr) !important; }
  .bid-panel, .right-panel { position: static !important; }
  .breadcrumb { flex-wrap: wrap; }

  /* ── app-profile.html ── */
  /* .layout collapse covered above; sidebar stacks on top */
  .sidebar { position: static !important; }
  .stats-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .bids-grid { grid-template-columns: minmax(0,1fr) !important; }

  /* ── app-transactions.html ── */
  .summary-row { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .filter-bar { flex-wrap: wrap; gap: 8px; }
  .tab-btn { font-size: 12px; padding: 8px 10px; }
  .pay-modal { width: calc(100vw - 32px) !important; max-width: 440px; }
  .pay-row-split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

  /* ── app-inbox.html ── */
  .inbox-wrap { grid-template-columns: minmax(0,1fr) !important; }
  .message-list { max-height: 40vh; overflow-y: auto; }

  /* ── app-order.html ── */
  /* .layout collapse covered above */
  .order-card-inner { grid-template-columns: minmax(0,1fr) !important; }

  /* ── app-receipt.html ── */
  .receipt-columns, .receipt-grid { grid-template-columns: minmax(0,1fr) !important; }
  .receipt-banner { flex-wrap: wrap; gap: 12px; }

  /* ── app-list-bull.html (form) ── */
  .form-row, .form-row.thirds { grid-template-columns: minmax(0,1fr) !important; }
  .type-toggle { grid-template-columns: minmax(0,1fr) !important; }
  .photo-grid, #photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .submit-bar { flex-wrap: wrap; gap: 10px; }

  /* ── Modals (bid / buy-now on lot.html) ── */
  .bid-modal, .buynow-modal { width: calc(100vw - 32px) !important; }

  /* ── register.html (Rokin-native) ──
     Two-column grid with a fixed 300px aside; the aside must stack or it
     pushes the document wide on narrow phones. */
  .register-layout {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 1.75rem !important;
    padding: 2rem 16px 3rem !important;
  }
  .register-layout > * { min-width: 0; }
  .register-head h1 { font-size: 27px !important; }

  /* ── Document pages (about / contact / help / privacy / terms) ──
     All `doc-` prefixed, so these rules cannot leak onto the migrated
     pages the way a `.hero` rule would (Plan.md §13.12/§13.13). */
  .doc-hero { padding: 44px 16px !important; }
  .doc-hero h1 { font-size: 30px !important; }
  .doc-hero p { font-size: 15px !important; }
  .doc-wrap { padding: 40px 16px !important; }
  .doc-grid--2, .doc-grid--3, .doc-grid--4 { grid-template-columns: minmax(0,1fr) !important; }
  .doc-split { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  .doc-toc ol { columns: 1 !important; }
  .doc-field-row { grid-template-columns: minmax(0,1fr) !important; }
  .doc-prose h2 { font-size: 19px !important; }
  .doc-split h2, .doc-cta h2 { font-size: 24px !important; }
  .doc-notice { padding: 14px 16px !important; }
  .doc-card, .doc-panel, .doc-form-card { padding: 20px !important; }
  /* Key/value rows stack rather than squeezing an email to one word wide. */
  .doc-row { flex-direction: column; gap: 4px !important; }
  .doc-row .v { text-align: left; word-break: break-word; }
  .doc-cta-btns .btn-navy, .doc-cta-btns .btn-outline { flex: 1 1 auto; }

  /* Blog: featured post and card grid both collapse to one column. */
  .doc-posts { grid-template-columns: minmax(0,1fr) !important; }
  .doc-feature { grid-template-columns: minmax(0,1fr) !important; }
  .doc-feature-img { min-height: 200px !important; height: 200px; }
  .doc-feature-body { padding: 22px !important; }
  .doc-feature-body h2 { font-size: 21px !important; }
  .doc-article-head h1 { font-size: 27px !important; }
  .doc-lead { font-size: 16px !important; }
  .doc-pullquote { font-size: 17px !important; padding-left: 16px !important; }
  .doc-chips { gap: 6px !important; }
  .doc-chip { padding: 7px 12px !important; font-size: 12px !important; }
  .doc-article-foot { flex-direction: column; align-items: flex-start; }

  /* ── catalogue.html grid/map toggle ── */
  .view-toggle { flex-wrap: wrap; max-width: 100%; }
  .view-toggle-btn { flex: 0 1 auto; min-width: 0; }
  .section-head, .listing-head, .results-head { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 520px) {
  /* Logo shrinks again so the nav CTA is never crowded off-screen. */
  .brand-lockup { height: 24px !important; }
  .brand-lockup--sm { height: 22px !important; }
  .nav-actions .btn-primary, .nav-actions .btn-gold { padding: 7px 11px !important; font-size: 12px !important; }

  /* Single-column card grids on small phones */
  .listings-row { grid-template-columns: minmax(0,1fr) !important; }
  .listing-grid { grid-template-columns: minmax(0,1fr) !important; }
  .dp-listings { grid-template-columns: minmax(0,1fr) !important; }
  .summary-row { grid-template-columns: minmax(0,1fr) !important; }
  .hero h1 { font-size: 28px !important; }
  .hero-stats-bar { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .hero-stats-bar .hero-stat { padding: 0.75rem 0.6rem !important; }
  .hero-stats-bar .hero-stat-num { font-size: 21px; }
  .hero-stats-bar .hero-stat-label { font-size: 11px; }
  .trust-bar-inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .footer-grid, .footer-inner { grid-template-columns: minmax(0,1fr) !important; }
  .page-title, .page-heading { font-size: 24px !important; }
  .doc-hero h1 { font-size: 26px !important; }
  .doc-wrap { padding: 32px 16px !important; }
  .doc-faq summary { padding: 14px 16px !important; font-size: 14px !important; }
  .doc-faq-body { padding: 0 16px 16px !important; }

}