/* ═══════════════════════════════════════════════════════════════════════════
   RivCut quote app — mobile/tablet
   Loaded on quote.html only, AFTER css/rc-app.css.

   Overrides css/quote.css, whose line 1 is a 48 KB minified blob (lines 2-155
   are readable). Never hand-edit that file; everything here wins by
   specificity: `body.rc-app .x { ... !important }` is (0,2,1) against
   quote.css's (0,1,0). See css/rc-shell.css for the full cascade rationale.
   ═══════════════════════════════════════════════════════════════════════ */

/* Desktop default for the dual config-tab labels emitted by
   js/quote-app.js. Without this, BOTH the full and short label render at
   ≥1024px. Unlayered plain selector, so no !important is needed. */
.pc-tab-short { display: none; }
.pc-tab-full  { display: inline; }


@media screen and (max-width: 1023px) {

/* ─────────────────────────────────────────────────────────────────────────
   1. Page + hero
   ───────────────────────────────────────────────────────────────────────── */
  body.rc-app .content-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  body.rc-app .hero         { padding-top: calc(20px + var(--rc-promo-h, 0px) + 56px) !important; }


/* ─────────────────────────────────────────────────────────────────────────
   2. Part card
   css/mobile.css:60 sets `.part-card{padding:20px 16px}`, which stacks on top
   of the card's own `.part-card-header{padding:14px 16px}` and
   `.part-card-body{padding:0 16px 16px}`. At 390px that leaves
   390 − 32 (page) − 64 (doubled padding) = 294px of usable content. Strip the
   outer padding and let the card's own padding do the work.
   ───────────────────────────────────────────────────────────────────────── */
  body.rc-app #partsContainer .part-card {
    padding: 0 !important;
    border-radius: 16px !important;
    border: 1px solid var(--rc-line, #DFE3E8) !important;
    /* renderPartCard does `existing.outerHTML = cardHTML` on EVERY config
       change (js/quote-app.js:3894), which restarts `animation:fadeIn .4s`
       and makes each edit flash. It also briefly makes the card a containing
       block for position:fixed, which would trap the finish sheet. */
    animation: none !important;
  }

  /* Restore the per-part price. css/quote.css hides it outright at ≤768px
     (`.part-header-price{display:none}`), which is a straight parity loss:
     mobile customers cannot see what any individual part costs. Two-row grid
     puts it under the name instead of dropping it. */
  body.rc-app .part-card-header {
    grid-template-columns: 72px minmax(0, 1fr) 44px !important;
    grid-template-areas: 'thumb info actions' 'thumb price actions' !important;
    gap: 2px 12px !important;
    padding: 12px 14px !important;
    align-items: center !important;
  }
  body.rc-app .thumb-container      { grid-area: thumb !important; width: 72px !important; height: 72px !important; border-radius: 12px !important; }
  body.rc-app .part-info            { grid-area: info !important; }
  body.rc-app .part-header-actions  { grid-area: actions !important; flex-direction: column !important; }
  body.rc-app .part-header-price {
    grid-area: price !important;
    display: block !important;
    text-align: left !important;
    padding-right: 0 !important;
  }
  body.rc-app .part-header-price .price-value { font-size: 16px !important; }
  body.rc-app .part-action-btn { width: 44px !important; height: 44px !important; }
  body.rc-app .part-card-body  { padding: 0 14px 16px !important; }

  /* The 3D-viewer affordance is hover-only today (`.thumb-overlay svg{opacity:0}`
     until `.thumb-container:hover`), so on touch nothing signals the thumbnail
     is tappable at all. */
  body.rc-app .thumb-overlay     { background: rgba(0, 114, 251, .22) !important; }
  body.rc-app .thumb-overlay svg { opacity: 1 !important; }


/* ─────────────────────────────────────────────────────────────────────────
   3. Config tabs → segmented control      (prototype line 352)
   The three labels total ~390px against ~278px of card width, so they wrap to
   two rows and the `border-bottom:2.5px` + `margin-bottom:-1.5px` underline
   indicator breaks. js/quote-app.js emits both a full and a short label; the
   short one is shown here.
   ───────────────────────────────────────────────────────────────────────── */
  body.rc-app .pc-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
    border-bottom: none !important;
    background: #E3E7EC !important;
    border: 1px solid #D5DAE1 !important;
    border-radius: 13px !important;
    padding: 5px !important;
    margin: 12px 0 16px !important;
  }
  body.rc-app .pc-tab {
    border: none !important;
    border-bottom: none !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    justify-content: center !important;
    font-family: 'Geist', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gray-500, #6E7580) !important;
  }
  body.rc-app .pc-tab.active {
    background: #fff !important;
    color: var(--blue, #0d4fb4) !important;
    box-shadow: 0 1px 3px rgba(11, 31, 59, .12) !important;
  }
  body.rc-app .pc-tab-full  { display: none !important; }
  body.rc-app .pc-tab-short { display: inline !important; }


/* ─────────────────────────────────────────────────────────────────────────
   4. Spec rows and controls
   ───────────────────────────────────────────────────────────────────────── */
  body.rc-app .spec-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px 0 !important;
  }
  body.rc-app .spec-label {
    font-family: 'Geist', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  body.rc-app .swatch-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  body.rc-app .grade-chip   { min-height: 44px !important; border-radius: 11px !important; padding: 10px 16px !important; }
  body.rc-app .chip-btn     { min-height: 44px !important; border-radius: 11px !important; padding: 12px 16px !important; font-size: 13px !important; }
  body.rc-app .chip-group   { gap: 8px !important; }

  body.rc-app .spec-row .toggle-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    justify-self: stretch !important;
    border-radius: 11px !important;
  }
  body.rc-app .spec-row .toggle-btn { min-height: 44px !important; padding: 12px !important; }

  body.rc-app .qty-control { border-radius: 12px !important; }
  body.rc-app .qty-btn     { width: 48px !important; height: 48px !important; font-size: 20px !important; }
  body.rc-app .qty-input   { width: 104px !important; height: 48px !important; }

  body.rc-app .config-textarea { max-width: none !important; border-radius: 12px !important; }
  body.rc-app .detail-toggle   { min-height: 44px !important; }
  body.rc-app .geo-grid        { grid-template-columns: repeat(2, 1fr) !important; }

  /* The drawing-upload label is a 30px control crammed beside a paragraph. */
  body.rc-app .pc-banner-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  body.rc-app .pc-mini-btn   { min-height: 44px !important; justify-content: center !important; }

  body.rc-app .pc-actions  { flex-direction: column-reverse !important; gap: 8px !important; }
  body.rc-app .pc-back     { width: 100% !important; min-height: 44px !important; }


/* ─────────────────────────────────────────────────────────────────────────
   5. Finish picker → bottom sheet
   15 options x ~37px = ~555px inside a `max-height:280px` absolutely
   positioned menu, itself nested in `.part-card{overflow:hidden}` with only
   ~250px of card below the trigger — so the list is clipped AND it is a
   nested scroller inside the page scroller. position:fixed escapes the clip
   entirely. Safe because §2 removes the card's fadeIn animation, which would
   otherwise make the card a containing block for fixed descendants.
   ───────────────────────────────────────────────────────────────────────── */
  body.rc-app .finish-dd.open::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1060 !important;
    background: rgba(11, 31, 59, .45) !important;
  }
  body.rc-app .finish-menu {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1061 !important;
    max-height: 70vh !important;
    max-height: 70dvh !important;
    border-radius: 24px 24px 0 0 !important;
    border: none !important;
    padding: 10px 12px max(16px, env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -12px 40px rgba(11, 31, 59, .2) !important;
    overscroll-behavior: contain !important;
    animation: rc-sheet .3s var(--rc-ease, ease) !important;
  }
  body.rc-app .finish-menu::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 4px;
    background: var(--rc-line, #DFE3E8);
  }
  body.rc-app .finish-option { min-height: 48px !important; display: flex !important; align-items: center !important; }
  body.rc-app .finish-dd     { max-width: none !important; }


/* ─────────────────────────────────────────────────────────────────────────
   6. Order sidebar → stacked cards
   The sticky CTA (§7) handles discovery, so DOM order is left alone.
   ───────────────────────────────────────────────────────────────────────── */
  body.rc-app .order-sidebar {
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 12px !important;
    max-height: none !important;
  }
  body.rc-app .sidebar-card {
    background: #fff !important;
    border: 1px solid var(--rc-line, #DFE3E8) !important;
    border-radius: 16px !important;
    padding: 16px !important;
  }
  body.rc-app .lead-time-option { min-height: 76px !important; border-radius: 14px !important; padding: 14px 16px !important; }
  body.rc-app .coupon-input     { min-height: 48px !important; }


/* ─────────────────────────────────────────────────────────────────────────
   7. 3D viewer overlay
   Sizing and touch behaviour are fixed in js/quote-app.js; this block makes
   the CHROME deterministic so the canvas has a stable box to measure.
   ───────────────────────────────────────────────────────────────────────── */
  body.rc-app .viewer-page {
    height: 100vh !important;
    height: 100dvh !important;
    overscroll-behavior: none !important;
  }

  /* Force ONE 52px row. `.viewer-topbar{flex-wrap:wrap}` plus a nowrap
     `.viewer-topbar-name` with `min-width:auto` (so it cannot ellipsize) is
     what made the real chrome 136-169px against the hardcoded 110px guess. */
  body.rc-app .viewer-topbar {
    flex-wrap: nowrap !important;
    min-height: 52px !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  }
  body.rc-app .viewer-topbar-name { flex: 1 1 auto !important; min-width: 0 !important; }
  /* No information is lost: #viewerDims, #viewerVolume and the process badge
     are all duplicated verbatim in the Info panel (js/quote-app.js:2253-2269). */
  body.rc-app .viewer-topbar-meta,
  body.rc-app #viewerBadge { display: none !important; }

  body.rc-app #viewerCanvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Gesture isolation. Without this the page scroller and the browser's
     pinch-zoom both fight TrackballControls. */
  body.rc-app #viewerCanvas,
  body.rc-app .viewer-canvas-area {
    touch-action: none !important;
    -webkit-user-select: none !important;
            user-select: none !important;
    -webkit-touch-callout: none !important;
  }
  /* ESSENTIAL: these live INSIDE .viewer-canvas-area and inherit the
     touch-action above, which would silently kill the cross-section slider
     and stop the DFM/info panels scrolling. */
  body.rc-app .section-slider-wrap { touch-action: auto !important; }
  /* This slider is VERTICAL: css/quote.css sets
     `writing-mode:vertical-lr; direction:rtl; width:20px; height:160px`, so
     HEIGHT is its travel and WIDTH is the cross axis. An earlier
     `height:44px` here, meant as a touch target, collapsed 160px of travel to
     44px and made the cross-section nearly undraggable. Widen the cross axis
     instead and leave the travel alone. pan-y, not pan-x, for a vertical control. */
  body.rc-app .section-slider      { touch-action: pan-y !important; width: 44px !important; }
  body.rc-app .viewer-dfm-panel    { touch-action: pan-y !important; overscroll-behavior: contain !important; }
  body.rc-app .viewer-info-panel   { touch-action: pan-y !important; }
  body.rc-app .view-cube-wrap      { touch-action: manipulation !important; }

  /* Toolbar: 11 buttons + 3 dividers is ~535px in a 390px strip. Keep every
     tool reachable, make each a real target, and signal scrollability. */
  body.rc-app .viewer-toolbar-bottom {
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom, 0px)) !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }
  body.rc-app .vtb-btn     { min-width: 56px !important; min-height: 48px !important; padding: 6px 8px !important; scroll-snap-align: start; }
  body.rc-app .vtb-btn svg { width: 22px !important; height: 22px !important; }
  body.rc-app .vtb-label   { font-size: 10px !important; }
  body.rc-app .vtb-divider { height: 32px !important; margin: 0 4px !important; }

} /* end ≤1023px */


/* ─────────────────────────────────────────────────────────────────────────
   8. Tightest phones
   ───────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
  body.rc-app .swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.rc-app .geo-grid    { grid-template-columns: 1fr !important; }
}


/* ─────────────────────────────────────────────────────────────────────────
   9. Compact desktop (1024-1279)
   The two-column quote layout is preserved — 1024px is exactly iPad Pro
   portrait. css/quote.css collapses .content-grid at max-width:1024px
   (inclusive) and hides .nav-links to 1150px, so both are undone here.
   ───────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  body.rc-app .content-grid  { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 16px !important; align-items: start !important; }
  body.rc-app .order-sidebar { position: sticky !important; top: 68px !important; padding: 12px !important; max-height: none !important; }
  body.rc-app .page-container{ padding: 88px 16px 32px !important; max-width: 100% !important; }
  body.rc-app .swatch-grid   { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  body.rc-app .spec-row      { grid-template-columns: 140px 1fr !important; gap: 14px !important; }
  body.rc-app .rc-cta-bar    { display: none !important; }
}