/* ==========================================================================
   Mobile Create Posts — phone-native rebuild of the Create Posts flow.
   Loaded ONLY by index.html, so the generic selectors here (header, main,
   .main-nav) can't leak to other pages. Everything real lives inside the
   @media (max-width:600px) block; above that the mobile shell is hidden and
   the desktop layout is byte-for-byte untouched.

   Palette is the design handoff's warm-paper system (light only by design).
   Namespace: .mcp-*  (Mobile Create Posts)
   ========================================================================== */

/* Hidden by default — desktop never renders the shell. */
.mcp-shell { display: none; }

@media (max-width: 600px) {
  /* ── Swap desktop chrome for the mobile shell ─────────────────────────── */
  body > header,
  body > nav.main-nav,
  body > main { display: none !important; }

  .mcp-shell {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 30;                 /* below auth overlay + modals, above page */
    background: #F5F2EC;
    color: #1A1A18;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    overscroll-behavior: none;
  }

  /* Each screen fills the shell minus the tab bar; only one is active. */
  .mcp-screen { display: none; flex-direction: column; flex: 1; min-height: 0; }
  .mcp-screen.is-active { display: flex; }

  /* ── Header ───────────────────────────────────────────────────────────── */
  .mcp-head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: calc(8px + env(safe-area-inset-top)) 18px 14px;
    border-bottom: 1px solid #E6E0D4;
  }
  .mcp-title { font: 800 23px system-ui; letter-spacing: -.5px; }
  .mcp-title span { color: #A8843A; }
  .mcp-sub { font: 500 12px system-ui; color: #888; margin-top: 2px; }
  .mcp-head-actions { display: flex; align-items: center; gap: 9px; padding-top: 3px; }
  .mcp-iconbtn {
    width: 32px; height: 32px; border-radius: 9px;
    background: #FFFFFF; border: 1px solid #DDD8CE;
    display: flex; align-items: center; justify-content: center;
    color: #6B6B64; cursor: pointer; flex-shrink: 0;
  }
  .mcp-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #C9A96E, #A8843A);
    display: flex; align-items: center; justify-content: center;
    font: 700 12px system-ui; color: #fff; flex-shrink: 0;
  }

  /* Pushed-screen header (back chevron + step check + title) */
  .mcp-head--push { align-items: center; gap: 12px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .mcp-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;
  }
  .mcp-title-sm { font: 800 15px system-ui; letter-spacing: -.2px; }

  /* ── Scrolling body ───────────────────────────────────────────────────── */
  .mcp-body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px; display: flex; flex-direction: column; gap: 14px;
  }

  /* ── Vehicle Details card ─────────────────────────────────────────────── */
  .mcp-card {
    background: #FFFFFF; border: 1px solid #E6E0D4; border-radius: 16px;
    padding: 16px; box-shadow: 0 1px 2px rgba(26,26,24,.04);
  }
  .mcp-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
  .mcp-stepnum {
    width: 24px; height: 24px; border-radius: 50%; background: #1A1A18;
    color: #fff; font: 800 12px system-ui; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
  }
  .mcp-card-title { font: 800 15px system-ui; letter-spacing: -.2px; }

  .mcp-label {
    display: block; font: 700 9.5px system-ui; letter-spacing: .08em;
    text-transform: uppercase; color: #9a937f; margin-bottom: 6px;
  }
  .mcp-input {
    width: 100%; background: #F3EEE6; border: 1px solid #E4DDCF;
    border-radius: 10px; padding: 12px 13px; font: 500 13px system-ui;
    color: #1A1A18; margin-bottom: 13px; -webkit-appearance: none; appearance: none;
  }
  .mcp-input:last-of-type { margin-bottom: 14px; }
  .mcp-input::placeholder { color: #AAAAAA; }
  .mcp-input:focus { outline: none; border-color: #A8843A; background: #FFFFFF; }

  .mcp-check { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
  .mcp-check-box {
    width: 19px; height: 19px; border-radius: 5px; background: #A8843A;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: #fff; font-size: 12px; font-weight: 900; line-height: 1;
    border: 1px solid #A8843A;
  }
  .mcp-check.is-off .mcp-check-box { background: transparent; color: transparent; border-color: #CFC6B4; }
  .mcp-check-label {
    font: 700 9.5px system-ui; letter-spacing: .07em; text-transform: uppercase; color: #6B6B64;
  }

  /* ── Inventory section header + segmented control ─────────────────────── */
  .mcp-invhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mcp-invhead-title { font: 700 13px system-ui; }
  .mcp-seg { display: flex; background: #EFE9DD; border-radius: 9px; padding: 3px; gap: 2px; }
  .mcp-seg-btn {
    font: 600 11px system-ui; color: #8C887E; background: transparent;
    border: none; border-radius: 6px; padding: 4px 9px; cursor: pointer; white-space: nowrap;
  }
  .mcp-seg-btn.is-active { color: #fff; background: #1A1A18; }

  /* ── Search ───────────────────────────────────────────────────────────── */
  .mcp-search {
    display: flex; align-items: center; gap: 9px; background: #FFFFFF;
    border: 1px solid #E6E0D4; border-radius: 11px; padding: 11px 13px;
  }
  .mcp-search svg { flex-shrink: 0; }
  .mcp-search input {
    flex: 1; border: none; background: transparent; outline: none;
    font: 500 12.5px system-ui; color: #1A1A18;
  }
  .mcp-search input::placeholder { color: #AAAAAA; }

  /* ── Inventory list ───────────────────────────────────────────────────── */
  .mcp-invlist { display: flex; flex-direction: column; gap: 8px; }
  .mcp-row {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px;
    background: #FFFFFF; border: 1px solid #E6E0D4; border-radius: 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mcp-row:active { background: #FAF7F0; }
  .mcp-row.is-selected { border-color: rgba(168,132,58,.55); }
  .mcp-thumb {
    width: 48px; height: 37px; border-radius: 8px; background: #F1ECE1;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    overflow: hidden; color: #C2B79E;
  }
  .mcp-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .mcp-row-info { flex: 1; min-width: 0; }
  .mcp-row-name {
    font: 700 12.5px system-ui;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mcp-row-mi { font: 500 11px system-ui; color: #9a937f; margin-top: 2px; }
  .mcp-row-right { text-align: right; flex-shrink: 0; }
  .mcp-row-price { font: 800 13.5px system-ui; color: #1F7A3D; }
  .mcp-row-ago { font: 500 10px system-ui; color: #AAAAAA; margin-top: 1px; }

  .mcp-empty { padding: 18px 4px; text-align: center; font: 500 12.5px system-ui; color: #9a937f; }

  .mcp-fulllink {
    text-align: center; padding: 4px 0; font: 700 12.5px system-ui;
    color: #A8843A; background: none; border: none; cursor: pointer;
  }

  /* ── Placeholder body (screens 2 & 3 until built) ─────────────────────── */
  .mcp-placeholder {
    align-items: center; justify-content: center; text-align: center;
    color: #9a937f; font: 500 13px system-ui;
  }

  /* ── Bottom tab bar ───────────────────────────────────────────────────── */
  .mcp-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;
  }
  .mcp-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;
  }
  .mcp-tab svg { stroke: currentColor; }
  .mcp-tab.is-active { color: #C9A96E; }
  .mcp-tab-badge {
    position: absolute; top: -3px; right: 50%; margin-right: -16px;
    min-width: 15px; height: 15px; padding: 0 4px; background: #C0392B;
    color: #fff; font: 700 9px system-ui; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #FFFFFF;
  }

  /* ── Section dividers in the single scroll ────────────────────────────── */
  .mcp-sectlabel {
    display: flex; align-items: center; gap: 8px;
    font: 800 16px system-ui; letter-spacing: -.3px; color: #1A1A18;
    margin-top: 8px; padding-top: 16px; border-top: 1px solid #E6E0D4;
    scroll-margin-top: 8px;
  }
  .mcp-sectlabel-check {
    width: 22px; height: 22px; border-radius: 50%; background: #2A7A4F;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }

  /* Options & Preview is collapsed until a vehicle is selected — only the hint
     shows; the green check + body appear once .mcp-shell has .mcp-has-vehicle. */
  .mcp-sectlabel-check { display: none; }
  .mcp-opts-hint {
    font: 500 12.5px system-ui; color: #9a937f; text-align: center;
    background: #FFFFFF; border: 1px dashed #DDD8CE; border-radius: 12px;
    padding: 15px 13px;
  }
  .mcp-opts-body { display: none; flex-direction: column; gap: 11px; }
  .mcp-shell.mcp-has-vehicle .mcp-opts-hint { display: none; }
  .mcp-shell.mcp-has-vehicle .mcp-opts-body { display: flex; }
  .mcp-shell.mcp-has-vehicle #mcp-opts-anchor .mcp-sectlabel-check { display: flex; }

  /* ── Screen 2: Options & Preview ──────────────────────────────────────── */
  .mcp-pushtitle { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .mcp-step-check {
    width: 24px; height: 24px; border-radius: 50%; background: #2A7A4F;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }

  /* Selected-vehicle bar */
  .mcp-selbar {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px;
    background: #FFFFFF; border: 1px solid #E6E0D4; border-radius: 12px;
  }
  .mcp-selbar .mcp-thumb { width: 44px; height: 34px; }
  .mcp-selbar-info { flex: 1; min-width: 0; }
  .mcp-selbar-name {
    font: 700 12.5px system-ui;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mcp-selbar-sub { font: 500 11px system-ui; color: #9a937f; margin-top: 1px; }
  .mcp-selbar-change {
    font: 700 11px system-ui; color: #A8843A; background: none; border: none;
    cursor: pointer; flex-shrink: 0;
  }

  /* Relocated desktop sections — the flex gap owns vertical rhythm, so zero
     their own margins and let them fill the column. Their internal (light-
     theme) styling is reused as-is; only layout is nudged for the narrow width. */
  #mcp-opts-mount { display: flex; flex-direction: column; gap: 11px; }
  #mcp-opts-mount > * { margin: 0 !important; width: 100%; max-width: 100%; }

  /* Post Style + Generate stack full-width instead of sitting side by side. */
  #mcp-opts-mount .pe-gen-row { flex-direction: column; align-items: stretch; gap: 10px; }
  #mcp-opts-mount .pe-gen-left { width: 100%; }
  #mcp-opts-mount .btn-style-picker { width: 100%; justify-content: flex-start; }

  /* Social Post Preview: keep it inside the column; the Feed/Story columns
     already wrap (flex-wrap on .sp-row), so they stack on a phone. */
  #mcp-opts-mount .sp-preview { overflow: hidden; border-radius: 14px; }
  #mcp-opts-mount .sp-row { gap: 20px; padding: 16px 12px 24px; }
  #mcp-opts-mount .sp-foot { flex-wrap: wrap; gap: 10px; }

  /* ── Screen 3: Post History — responsive rebuild of the relocated panel ──
     The real #history-panel is reused (all its logic: filter tabs, search,
     sort, repost, marketplace, pagination); only its layout is rebuilt for the
     phone to match the design. No DOM changes — desktop is untouched. */
  #mcp-history-mount { display: flex; flex-direction: column; }
  #mcp-history-mount > * { margin: 0 !important; width: 100%; max-width: 100%; }
  /* Strip the panel's own card chrome — it sits inside the padded mobile body. */
  #mcp-history-mount .history-panel,
  #mcp-history-mount .ph-card {
    background: transparent; border: none; border-radius: 0;
    padding: 0; box-shadow: none; overflow: visible;
  }

  /* Header: title + summary stack; Published/Scheduled segment wraps under. */
  #mcp-history-mount .ph-head {
    flex-wrap: wrap; gap: 12px; padding: 0 0 14px;
  }
  /* Published/Scheduled segment stretches full width on its own row. */
  #mcp-history-mount .ph-seg { display: flex; flex: 1 1 100%; width: 100%; }
  #mcp-history-mount .ph-seg-btn { flex: 1; justify-content: center; }

  /* Filter: All/Active/Sold chips on top; search + sort fill the row below. */
  #mcp-history-mount .ph-filter {
    flex-wrap: wrap; gap: 10px; padding: 12px 0; background: transparent;
    border-bottom: 1px solid #f1ece2;
  }
  #mcp-history-mount .ph-tabs { flex: 1 1 100%; }
  #mcp-history-mount .ph-filter-right { width: 100%; gap: 9px; }
  #mcp-history-mount .ph-search { flex: 1 1 auto; width: auto; max-width: none; }

  /* List padding (the mobile body already pads the sides). */
  #mcp-history-mount .ph-list { padding: 14px 0 6px; gap: 12px; }

  /* ── Post card → design layout: 78px thumb + title row on top, caption and
     action buttons span full width below. display:contents lifts the info
     column's children into the card grid so they can break to full width. ── */
  #mcp-history-mount .ph-post {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-areas:
      "thumb  info"
      "caption caption"
      "toggle  toggle"
      "actions actions";
    column-gap: 11px; row-gap: 8px;
    padding: 12px; border-radius: 14px; gap: 8px 11px;
  }
  #mcp-history-mount .ph-info { display: contents; }
  #mcp-history-mount .ph-thumb { grid-area: thumb; width: 78px; height: 78px; border-radius: 10px; }
  #mcp-history-mount .ph-sold-stamp span { font-size: 13px; padding: 2px 8px; border-width: 2px; }
  #mcp-history-mount .ph-row1 { grid-area: info; flex-direction: column; align-items: stretch; gap: 4px; }
  #mcp-history-mount .ph-row1-text { min-width: 0; }
  #mcp-history-mount .ph-name { font-size: 13.5px; font-weight: 700; }
  #mcp-history-mount .ph-price { font-size: 14px; }
  #mcp-history-mount .ph-row1-meta { flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  #mcp-history-mount .ph-row1-meta .ph-age { font-size: 10px; }

  /* Overflow (⋯) menu pinned to the card corner, out of the column flow. */
  #mcp-history-mount .ph-overflow { position: absolute; top: 10px; right: 10px; }
  #mcp-history-mount .ph-overflow-btn { width: 28px; height: 28px; }

  /* Caption: 2 lines, full width. */
  #mcp-history-mount .ph-caption {
    grid-area: caption; margin-top: 0; padding-right: 0; max-width: none;
    font-size: 11.5px; -webkit-line-clamp: 2;
  }
  #mcp-history-mount .ph-caption-toggle { grid-area: toggle; margin-top: 0; font-size: 11px; }

  /* Action buttons: full-width Repost (gold) + Post to Marketplace (blue). */
  #mcp-history-mount .ph-actions {
    grid-area: actions; margin-top: 2px; padding-top: 0; gap: 8px; flex-wrap: wrap;
  }
  #mcp-history-mount .ph-repost-split { flex: 1 1 0; }
  #mcp-history-mount .ph-repost-main { flex: 1 1 auto; justify-content: center; padding: 11px 12px; font-size: 12px; }
  #mcp-history-mount .ph-mp-btn { flex: 1.4 1 0; justify-content: center; padding: 11px 12px; font-size: 12px; }
  #mcp-history-mount .ph-flash { flex-basis: 100%; margin-left: 0; justify-content: center; }
  #mcp-history-mount .ph-repost-pop { min-width: 0; width: min(248px, 76vw); }

  /* Pagination wraps cleanly. */
  #mcp-history-mount .ph-pagination { flex-wrap: wrap; gap: 10px; padding: 14px 0 4px; }

  /* ── Scheduled / Auto-Scheduler tab — reuse the real auto-scheduler; only
     re-layout it for the phone (setup on top, queue below). ───────────────── */
  /* Auto-Scheduler banner → a rounded green-tint card (was an edge-to-edge bar). */
  #mcp-history-mount .ps-banner {
    padding: 13px 14px; border: 1px solid #E6E0D4; border-radius: 13px;
    margin: 14px 0; flex-wrap: wrap; gap: 11px;
  }
  #mcp-history-mount .ps-banner.on {
    background: rgba(42,122,79,.08); border-color: rgba(42,122,79,.25);
  }
  #mcp-history-mount .ps-banner .ps-btn,
  #mcp-history-mount .ps-banner #ps-refresh-btn { margin-left: auto; }

  /* Stack the desktop two-column (setup | queue) into one column. */
  #mcp-history-mount .ps-cols { flex-direction: column; }
  #mcp-history-mount .ps-rule {
    flex: 1 1 auto; max-width: none; border-right: none;
    border-bottom: 1px solid #f1ece2; padding: 0 0 16px;
  }
  #mcp-history-mount .ps-queue { padding: 16px 0 0; min-width: 0; }

  /* Cadence + suggested-schedule cards already read well; full-width buttons. */
  #mcp-history-mount .ps-suggest-actions { flex-wrap: wrap; }
  #mcp-history-mount .ps-suggest-actions .ps-btn { flex: 1 1 auto; min-width: 120px; }

  /* Queue rows: tighter for the narrow column. */
  #mcp-history-mount .ps-qrow { gap: 10px; padding: 8px; }
  #mcp-history-mount .ps-qthumb { width: 50px; height: 40px; }
  #mcp-history-mount .ps-qcancel { padding: 5px 9px; }

  /* Customize (edit) form: let day circles / fields / time chips wrap. */
  #mcp-history-mount .ps-days,
  #mcp-history-mount .ps-times,
  #mcp-history-mount .ps-presets,
  #mcp-history-mount .ps-suggest-times { flex-wrap: wrap; }
  #mcp-history-mount .ps-field { flex-wrap: wrap; gap: 6px; }
}

/* Auto-publish summary + Ready-to-Review (relocated into the mobile shell top).
   Strip the desktop panel chrome so they read as native mobile cards. */
@media (max-width: 600px) {
  #mcp-top-mount { display: flex; flex-direction: column; }
  #mcp-top-mount .ap-summary { margin-bottom: 14px; }
  #mcp-top-mount .review-panel {
    display: block; background: transparent; border: none; box-shadow: none;
    padding: 0; margin: 0 0 14px;
  }
  #mcp-top-mount .panel-title { font-size: 1.15rem; }
  #mcp-top-mount .review-list { gap: 12px; }
  /* The promo nudge stacks its columns on a narrow screen. */
  #mcp-top-mount .ap-nudge { gap: 16px 1.2rem; }
  #mcp-top-mount .ap-nudge-stats { flex-wrap: wrap; }
  #mcp-top-mount .ap-nudge-cta { flex: 1 1 100%; }
}