/* ==========================================================================
   Mobile Inventory — phone-native rebuild of the Inventory master-detail.
   Loaded ONLY by inventory.html. On <=600px the desktop header/nav/main are
   swapped for a paper-themed shell with the shared bottom tab bar (Inventory
   active). Unlike the form flows this is master-detail: the real rail (#mp-rail)
   becomes the root LIST screen and the real detail pane (#mp-detail) becomes a
   PUSHED full-screen view — both relocated by inventory.html's inline JS, so all
   the inventory/sold/alerts/pricing logic is reused untouched (layout only).

   Namespace: .mi-*  (Mobile Inventory)  · palette = warm-paper (light only)
   ========================================================================== */

.mi-shell { display: none; }

@media (max-width: 600px) {
  body > header,
  body > nav.main-nav,
  body > main { display: none !important; }

  /* The off-screen pushed detail (translateX 100%) must not spawn a horizontal
     scrollbar. */
  html, body { overflow-x: hidden; }

  .mi-shell {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 30;
    background: #F5F2EC; color: #1A1A18;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    overscroll-behavior: none;
    /* iOS motion tokens: nav = decelerating push curve; tap = quick press. */
    --ios-nav: 340ms cubic-bezier(.32, .72, 0, 1);
    --ios-tap: 130ms ease;
  }

  /* ── iOS-style navigation ─────────────────────────────────────────────────
     The list stays in flow and recedes (parallax slide + dim) while the detail
     is a fixed overlay that pushes in from the right. Driven entirely by the
     .mi-detail-open class the JS already toggles — no JS change needed. */
  .mi-screen { flex-direction: column; }

  #mi-screen-list {
    display: flex; flex: 1; min-height: 0; position: relative;
    transition: transform var(--ios-nav); will-change: transform;
  }
  .mi-shell.mi-detail-open #mi-screen-list { transform: translateX(-22%); }
  /* iOS dims the outgoing screen ~10% as it slides back. */
  #mi-screen-list::after {
    content: ''; position: absolute; inset: 0; z-index: 5;
    background: #000; opacity: 0; pointer-events: none;
    transition: opacity var(--ios-nav);
  }
  .mi-shell.mi-detail-open #mi-screen-list::after { opacity: .09; }

  #mi-screen-detail {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 40; background: #F5F2EC;
    transform: translateX(100%);
    transition: transform var(--ios-nav); will-change: transform;
  }
  .mi-shell.mi-detail-open #mi-screen-detail { transform: translateX(0); }

  /* Pushed detail header (back chevron + title + optional status pill). */
  .mi-head--push {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px;
    padding: calc(8px + env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid #E6E0D4; background: #F5F2EC;
  }
  .mi-back {
    width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF;
    border: 1px solid #DDD8CE; color: #6B6B64; font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
    transition: transform var(--ios-tap); -webkit-tap-highlight-color: transparent;
  }
  .mi-back:active { transform: scale(.9); }
  .mi-title-sm { font: 800 15px system-ui; letter-spacing: -.2px; flex: 1; min-width: 0; }

  .mi-body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* Status-bar safe area for the root list screen (its header comes from the
     relocated rail head, which has its own padding). */
  #mi-list-mount { padding-top: env(safe-area-inset-top); }

  /* ── Root list screen: the relocated rail fills the screen ────────────── */
  #mi-list-mount .mp-shell { display: block; }
  #mi-list-mount .mp-rail {
    width: 100%; height: auto; flex-shrink: 1;
    background: transparent; border: none; border-radius: 0; overflow: visible;
  }
  #mi-list-mount .mp-rail-head { padding: 14px 16px 12px; }
  #mi-list-mount .mp-rail-page-title { font: 800 23px system-ui; letter-spacing: -.5px; }

  /* Inventory/Sold/Alerts → full-width segmented control. */
  #mi-list-mount .mp-tabbar {
    display: flex; gap: 4px; background: #EFE9DD; border: none;
    border-radius: 11px; padding: 4px; margin-top: 14px; overflow: visible;
  }
  #mi-list-mount .mp-tab {
    flex: 1; justify-content: center; gap: 5px; border-radius: 8px;
    padding: 8px 0; font: 600 12.5px system-ui; color: #8C887E; background: transparent; border: none;
  }
  #mi-list-mount .mp-tab.active {
    background: #fff; color: #1A1A18; box-shadow: 0 1px 2px rgba(26,26,24,.08);
  }

  /* Rows/sections stretch edge-to-edge: no horizontal padding on the pane. The
     search box gets its own side margin so it stays inset; row + section content
     is padded 16px so text doesn't touch the screen edge. */
  #mi-list-mount .mp-rail-pane { padding: 0 0 16px; }
  #mi-list-mount .mp-rail-search-wrap { margin: 12px 16px; }
  #mi-list-mount .mp-rail-list { gap: 9px; }
  /* Section headers (Overpriced / Fair / Underpriced) span the full list width. */
  #mi-list-mount .mp-rail-section { width: 100%; box-sizing: border-box; padding: 14px 16px 6px; }
  #mi-list-mount .mp-rail-row {
    position: relative;
    border: 1px solid #E6E0D4; border-radius: 0; padding: 10px 32px 10px 16px; background: #FFFFFF;
  }
  /* iOS-style disclosure chevron — these rows push to the detail screen. */
  #mi-list-mount .mp-rail-row::after {
    content: ''; position: absolute; right: 15px; top: 50%;
    width: 8px; height: 8px;
    border-right: 2px solid #C2B79E; border-top: 2px solid #C2B79E;
    transform: translateY(-50%) rotate(45deg);
  }
  /* a chevron affordance — these rows push to the detail screen */
  #mi-list-mount .mp-rail-row {
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform var(--ios-tap), background var(--ios-tap);
  }
  #mi-list-mount .mp-rail-row:active { background: #FAF7F0; transform: scale(.975); }

  /* ── Pushed detail screen: the relocated detail pane fills the screen ─── */
  #mi-detail-mount .mp-detail {
    width: 100%; height: auto; flex: 1 1 auto;
    background: transparent; border: none; border-radius: 0; overflow: visible;
  }
  #mi-detail-mount .mp-detail-scroll { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
  #mi-detail-mount .mp-detail-scroll > * { margin: 0; }

  /* The top block (.mp-hero2) is a horizontal desktop layout — thumb | info
     (title/meta/actions) | badges (pill/days). Restack it to the mockup:
     hero -> title -> meta -> status pill -> action buttons. display:contents on
     the inner .mp-hero2-info lifts its children into the flex column so the pill
     (a separate element) can sit between the meta and the actions via order. */
  #mi-detail-mount .mp-card-head {
    background: transparent; border: none; box-shadow: none; padding: 0;
    display: flex; flex-direction: column; gap: 14px;
  }
  #mi-detail-mount .mp-hero2 { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  #mi-detail-mount .mp-hero2-info { display: contents; }
  #mi-detail-mount .mp-hero2-thumb {
    order: 1; width: 100%; height: 190px; border-radius: 14px; overflow: hidden;
  }
  #mi-detail-mount .mp-hero2-thumb img { width: 100%; height: 100%; object-fit: cover; }
  #mi-detail-mount .mp-hero2-title { order: 2; font: 800 18px system-ui; letter-spacing: -.3px; }
  #mi-detail-mount .mp-hero2-meta  { order: 3; font: 500 11.5px system-ui; color: #888; }
  /* Desktop right-aligns these (margin-left:auto + justify-content:flex-end);
     on mobile they belong on the LEFT under the title. */
  #mi-detail-mount .mp-hero2-badges {
    order: 4; display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
    margin-left: 0; justify-content: flex-start; align-self: stretch;
  }
  #mi-detail-mount .mp-hero2-actions { order: 5; display: flex; gap: 9px; margin-top: 2px; }

  /* Status pill (verdict chip) — gold/red/green by status. */
  #mi-detail-mount .mp-verdict-chip {
    font: 600 11px system-ui; border-radius: 7px; padding: 4px 10px;
    background: rgba(168,132,58,.12); border: 1px solid rgba(168,132,58,.3); color: #A8843A;
  }
  #mi-detail-mount .mp-verdict-chip.over { background: rgba(192,57,43,.1); border-color: rgba(192,57,43,.3); color: #C0392B; }
  #mi-detail-mount .mp-verdict-chip.under { background: rgba(42,122,79,.12); border-color: rgba(42,122,79,.3); color: #2A7A4F; }
  #mi-detail-mount .mp-days-badge { font: 600 11px system-ui; color: #C0392B; }

  /* Create post (gold) + Post to Marketplace (blue outline), each flex 1. */
  #mi-detail-mount .mp-hero2-actions .btn {
    flex: 1 1 0; justify-content: center; border-radius: 11px;
    padding: 13px 12px; font-size: 13px; font-weight: 700; min-width: 0;
  }
  #mi-detail-mount .mp-hero2-actions .btn-accent { background: #A8843A; border: none; color: #fff; }
  #mi-detail-mount .mp-hero2-actions .mp-mktpl-btn { background: #fff; border: 1.5px solid #1877F2; color: #1877F2; }
  /* Press feedback — quick scale-down on touch. */
  #mi-detail-mount .mp-hero2-actions .btn { transition: transform var(--ios-tap); }
  #mi-detail-mount .mp-hero2-actions .btn:active { transform: scale(.96); }

  /* 4-stat grid — 2x2, white cells on an #E6E0D4 hairline background. */
  #mi-detail-mount .mp-kpi-strip,
  #mi-detail-mount .mp-dskel-kpis {
    grid-template-columns: 1fr 1fr; gap: 1px;
    background: #E6E0D4; border: 1px solid #E6E0D4; border-radius: 13px; overflow: hidden;
  }
  #mi-detail-mount .mp-kpi { background: #fff; padding: 13px 14px; }
  #mi-detail-mount .mp-kpi-lbl { font: 700 9.5px system-ui; letter-spacing: .06em; text-transform: uppercase; color: #9a937f; }
  #mi-detail-mount .mp-kpi-val { font: 800 19px system-ui; margin-top: 4px; color: #1A1A18; }
  #mi-detail-mount .mp-kpi-val.over,
  #mi-detail-mount .mp-kpi-val.warn { color: #C0392B; }
  #mi-detail-mount .mp-kpi-val.under,
  #mi-detail-mount .mp-kpi-val.even { color: #2A7A4F; }
  #mi-detail-mount .mp-kpi-val.muted { color: #9a937f; }
  #mi-detail-mount .mp-kpi-sub { font: 500 10px system-ui; color: #888; margin-top: 3px; }

  /* Insight banner — green-tint card (red-tint when overpriced). */
  #mi-detail-mount .mp-insight {
    border: 1px solid rgba(42,122,79,.25); border-left: 1px solid rgba(42,122,79,.25);
    background: rgba(42,122,79,.08); border-radius: 12px; padding: 13px 14px;
    color: #256E47; font: 500 12px system-ui; line-height: 1.5;
  }
  #mi-detail-mount .mp-insight.over {
    border-color: rgba(192,57,43,.3); border-left-color: rgba(192,57,43,.3);
    background: rgba(192,57,43,.08); color: #9c3328;
  }

  /* VIN-verified features card. */
  #mi-detail-mount .mp-vinf {
    background: #fff; border: 1px solid #E6E0D4; border-radius: 13px; padding: 13px;
  }
  #mi-detail-mount .mp-vinf-eyebrow { font: 700 10px system-ui; letter-spacing: .06em; text-transform: uppercase; color: #9a937f; }
  #mi-detail-mount .mp-vinf-badge {
    font: 700 11px system-ui; color: #2A7A4F; background: rgba(42,122,79,.12);
    border: none; border-radius: 6px; padding: 4px 8px;
  }
  #mi-detail-mount .mp-vinf-counts { gap: 6px; margin-top: 10px; }
  #mi-detail-mount .mp-vinf-count {
    font: 500 11px system-ui; color: #6B6B64; background: #F3EEE6;
    border-radius: 6px; padding: 4px 8px;
  }
  #mi-detail-mount .mp-vinf-count b { color: #1A1A18; font-weight: 700; }
  #mi-detail-mount .mp-vinf-chip { background: #F3EEE6; color: #6B6B64; }

  /* Section cards + headers (Why $X?, Market context, Nearby comparisons). */
  #mi-detail-mount .mp-card:not(.mp-card-head) {
    background: #fff; border: 1px solid #E6E0D4; border-radius: 13px; padding: 14px;
  }
  #mi-detail-mount .mp-section-sub { font: 700 10px system-ui; letter-spacing: .06em; text-transform: uppercase; color: #9a937f; margin-bottom: 11px; }
  #mi-detail-mount .mp-section-sub-count { font: 500 10px system-ui; letter-spacing: 0; text-transform: none; color: #9a937f; margin-left: 5px; }

  /* Market-movement chips + market-read line. */
  #mi-detail-mount .mp-pa-summary { margin-bottom: 12px; }
  #mi-detail-mount .mp-pa-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  #mi-detail-mount .mp-pa-pill {
    display: inline-flex; align-items: center; gap: 3px;
    font: 600 10px system-ui; border-radius: 14px; padding: 4px 9px; border: 1px solid transparent;
  }
  #mi-detail-mount .mp-pa-pill.held  { color: #6B6B64; background: #F3EEE6; border-color: #E4DDCF; }
  #mi-detail-mount .mp-pa-pill.cut   { color: #C0392B; background: rgba(192,57,43,.08); border-color: rgba(192,57,43,.2); }
  #mi-detail-mount .mp-pa-pill.raise { color: #2A7A4F; background: rgba(42,122,79,.1); border-color: rgba(42,122,79,.22); }
  #mi-detail-mount .mp-pa-verdict { font: 500 11px system-ui; color: #6B6B64; margin-top: 9px; line-height: 1.4; }
  #mi-detail-mount .mp-pa-stale { color: #9a937f; margin-left: 4px; }
  #mi-detail-mount .mp-pa-empty { font: 500 11px system-ui; color: #9a937f; }

  /* "Why $X?" fair-range band. */
  #mi-detail-mount .mp-pp-value.fair { color: #1F7A3D; }

  /* Market context — 3-col stat cells. */
  #mi-detail-mount .mp-mc-strip,
  #mi-detail-mount .mp-dskel-mc { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  #mi-detail-mount .mp-mc-cell-lbl { font: 700 9px system-ui; letter-spacing: .05em; text-transform: uppercase; color: #9a937f; }
  #mi-detail-mount .mp-mc-cell-val { font: 800 14px system-ui; color: #1A1A18; margin-top: 3px; }
  #mi-detail-mount .mp-stats,
  #mi-detail-mount .mp-snap { grid-template-columns: 1fr 1fr; }
  #mi-detail-mount .mp-scatter,
  #mi-detail-mount .mp-dskel-scatter,
  #mi-detail-mount .sd-band { max-width: 100%; overflow: visible; }

  /* Nearby comparisons — reflow the wide 6-col desktop TABLE into stacked rows:
     dealer + price on top, "city · miles · days" below. Block layout with the
     price absolutely pinned top-right forces the meta onto its own line (flex-
     wrap wouldn't break since the cells are small). Selectors carry the `td`
     element so they outrank the `.mp-comps-mini td` reset on specificity. */
  #mi-detail-mount .mp-comps-mini,
  #mi-detail-mount .mp-comps-mini tbody { display: block; width: 100%; }
  #mi-detail-mount .mp-comps-mini thead { display: none; }
  #mi-detail-mount .mp-comps-mini tr {
    display: block; position: relative;
    padding: 11px 78px 11px 0; border-top: 1px solid #F0EBE0;
  }
  #mi-detail-mount .mp-comps-mini tbody tr:first-child { border-top: none; }
  #mi-detail-mount .mp-comps-mini td { border: none; padding: 0; }

  /* Hide price-action + view-link cells (td selector to beat the reset). */
  #mi-detail-mount .mp-comps-mini td.mp-comps-mini-pa-cell,
  #mi-detail-mount .mp-comps-mini tbody tr td:last-child { display: none; }

  /* Dealer on its own line. */
  #mi-detail-mount .mp-comps-mini td.mp-comps-mini-dealer {
    display: block; font: 700 12px system-ui; color: #1A1A18;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* city · miles · days inline on the second line. */
  #mi-detail-mount .mp-comps-mini td.mp-comps-mini-city,
  #mi-detail-mount .mp-comps-mini td.mp-comps-mini-miles,
  #mi-detail-mount .mp-comps-mini td.mp-comps-mini-days {
    display: inline; font: 500 10px system-ui; color: #9a937f;
  }
  #mi-detail-mount .mp-comps-mini-miles::before,
  #mi-detail-mount .mp-comps-mini-days::before { content: "·"; margin: 0 4px; color: #C2B79E; }
  #mi-detail-mount .mp-comps-mini td.mp-comps-mini-days.stale { color: #C2740D; font-weight: 700; }
  /* Price pinned top-right. */
  #mi-detail-mount .mp-comps-mini td.mp-comps-mini-price {
    display: block; position: absolute; top: 11px; right: 0;
    font: 800 12.5px system-ui; color: #1A1A18; text-align: right; white-space: nowrap;
  }

  /* ── Sold tab: Deal Recap detail (.sd-*) ──────────────────────────────────
     The Sold detail renders its OWN markup (.sd-* / "Deal Recap") into the same
     relocated #mp-detail pane, so none of the .mp-hero2 restack above touches it.
     It shipped as the desktop horizontal layout (128px thumb | title/meta |
     right-aligned sold pill) and suffers the same cramping the inventory detail
     did. Restack .sd-outcome the same way: full-width photo on top, then title,
     meta, the sold pill row, and finally the post button — display:contents on
     the inner wrappers lifts their children into the flex column so `order` can
     sequence them. */
  #mi-detail-mount .sd-scroll { padding: 16px; gap: 14px; }
  #mi-detail-mount .sd-card { padding: 16px; border-radius: 13px; }
  #mi-detail-mount .sd-eyebrow { margin-bottom: 14px; }

  #mi-detail-mount .sd-outcome {
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  #mi-detail-mount .sd-outcome-main { display: contents; }
  #mi-detail-mount .sd-thumb {
    order: 1; width: 100%; height: 190px; border-radius: 14px;
  }
  #mi-detail-mount .sd-title { order: 2; font-size: 1.2rem; }
  #mi-detail-mount .sd-meta  { order: 3; margin-top: 0; }
  /* Sold pill + "sold in N days" — desktop stacks these right-aligned; on mobile
     they read as one left-aligned row under the meta. */
  #mi-detail-mount .sd-outcome-side {
    order: 4; flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 8px; text-align: left;
  }
  #mi-detail-mount .sd-btn-post {
    order: 5; text-align: center; margin-top: 2px;
    padding: 13px 12px; font-size: 0.85rem;
  }

  /* KPI strip — trim the desktop's roomy padding on a phone. */
  #mi-detail-mount .sd-kpi-cell { padding: 14px 16px; }

  /* ── Bottom tab bar ───────────────────────────────────────────────────── */
  .mi-tabbar {
    flex-shrink: 0; display: flex; align-items: center;
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 0 6px env(safe-area-inset-bottom);
    border-top: 1px solid #DDD8CE; background: #FFFFFF;
    transition: transform var(--ios-nav), opacity var(--ios-nav);
  }
  .mi-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 6px 0; background: none; border: none; cursor: pointer;
    text-decoration: none; position: relative; color: #AAAAAA; font: 600 10px system-ui;
    transition: transform var(--ios-tap); -webkit-tap-highlight-color: transparent;
  }
  .mi-tab svg { stroke: currentColor; }
  .mi-tab.is-active { color: #C9A96E; }
  .mi-tab:active { transform: scale(.9); }
  /* Detail screen is pushed — slide the tab bar down as the detail comes in. */
  .mi-shell.mi-detail-open .mi-tabbar { transform: translateY(100%); opacity: 0; pointer-events: none; }

  /* ── Respect the OS "reduce motion" setting: keep the final positions, drop
     the animation. ──────────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    #mi-screen-list, #mi-screen-list::after, #mi-screen-detail, .mi-tabbar,
    #mi-list-mount .mp-rail-row, .mi-back, .mi-tab,
    #mi-detail-mount .mp-hero2-actions .btn { transition: none !important; }
  }
}