/* Phone layouts (design round 3, "Mobile, rebuilt"): one column, cards instead of tables, bottom nav,
   44px+ targets, primary action pinned to the bottom. Desktop styles are untouched above 760px. */
.mnav { display: none; }

@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  body { padding-bottom: 76px; }
  /* iPhone zooms into any field under 16px: keep every input at 16px on phones */
  input, select, textarea, .tb-search input { font-size: 16px !important; }
  /* the dashboard pipeline is a plain list of cards here: no 900px rows, no scroll box inside the page */
  .ptable { overflow: visible !important; }
  .pt-row { min-width: 0 !important; }
  .pt-deal, .pt-deal span, .pt-deal strong { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
  .stage-strip { grid-template-columns: none !important; }
  .dcard.pipe { overflow: visible; }
  img, svg, table, pre { max-width: 100%; }
  main#app, #app { padding: 14px 14px 24px; }

  /* ---- top bar: brand, theme, avatar; search full width underneath; nav moves to the bottom ---- */
  .tb { height: auto; min-height: 52px; flex-wrap: wrap; padding: 8px 14px; gap: 8px 10px; }
  .tb-logo { height: 24px; width: auto; }
  .tb-nav, .tb-divider { display: none !important; }
  .tb .theme-toggle { font-size: 0; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .tb .theme-toggle::before { font-size: 16px; }
  .tb-search:not(.hidden) { display: block; order: 10; flex: 1 0 100%; }
  .tb-search input { width: 100%; height: 44px; font-size: 15px; border-radius: 10px; }
  .live-badge { margin-left: 0; }

  .mnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0); }
  .mnav a { height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; color: var(--muted); text-decoration: none; }
  .mnav a .ico { width: 20px; height: 20px; }
  .mnav a.on { color: var(--heading); font-weight: 650; box-shadow: inset 0 3px 0 var(--accent, #e08232); }
  .mnav .mn-badge { font-size: 10px; background: var(--accent, #e08232); color: #fff; border-radius: 999px; padding: 1px 6px; font-weight: 700; margin-left: 3px; }

  /* ---- general: one column, bigger targets, cards breathe less ---- */
  button, .btn, select, input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], input[type=search], textarea { min-height: 44px; font-size: 15px; }
  button.sm, .btn.sm, button.link, .link { min-height: 36px; }
  .card { padding: 14px; border-radius: 12px; }
  h1 { font-size: 22px; }
  .row { flex-wrap: wrap; }
  .modal-wrap { padding: 0; align-items: end; }
  .modal, .modal.modal-wide { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .modal-actions { position: sticky; bottom: 0; background: var(--surface); padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .modal-actions > button.primary { flex: 1; }
  table { font-size: 14px; }
  .pf-table, .table-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- dashboard (4a) ---- */
  .dash-head { flex-wrap: wrap; gap: 8px; }
  .dash-head h1 { flex: 1 0 100%; }
  .dash-head a.btn[href*="pipeline.xlsx"] { display: none; }
  .dash-head button.primary { margin-left: auto; }
  .dtiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dtile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dtile-v { font-size: 22px; }
  .att-grid { grid-template-columns: 1fr; }
  .att-item { min-height: 60px; }
  .stage-strip { display: flex; overflow-x: auto; gap: 8px; padding: 10px 2px; scrollbar-width: none; border: 0; }
  .stage-strip > * { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px !important; min-width: 0 !important; background: var(--surface); }
  .pt-head { display: none !important; }
  .pt-row { grid-template-columns: 1fr auto; grid-template-areas: "deal loan" "stage stage" "pf flags" "lots owner"; gap: 8px 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; background: var(--surface); }
  .pt-row > :nth-child(1) { grid-area: deal; } .pt-row > :nth-child(2) { grid-area: stage; } .pt-row > :nth-child(3) { grid-area: lots; text-align: left !important; }
  .pt-row > :nth-child(3)::after { content: ' lots'; color: var(--muted); }
  .pt-row > :nth-child(4) { grid-area: loan; font-size: 16px; } .pt-row > :nth-child(5) { grid-area: pf; padding-left: 0 !important; }
  .pt-row > :nth-child(6) { grid-area: owner; justify-self: end; } .pt-row > :nth-child(7) { grid-area: flags; justify-self: end; }
  .pboard { grid-auto-columns: 82vw; }

  /* ---- client page + deal (4b) ---- */
  .cd-grid { grid-template-columns: 1fr; }
  .cd-title { gap: 8px; }
  .cd-title h1 { flex: 1 0 100%; }
  .cd-sub { flex: 1 0 100%; }
  .cd-title > a.btn[href*="/export"] { display: none; }
  .cd-title > button.primary { flex: 1 0 100%; order: 5; }
  .dcard-head { flex-wrap: wrap; }
  .deal-row-head { flex-wrap: wrap; gap: 8px; padding: 14px; }
  .drh-main { flex: 1 0 100%; }
  .btrack { overflow-x: auto; }
  .deal-tabs { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 10px; gap: 4px; scrollbar-width: none; }
  .dtab { flex: none; min-height: 38px; }
  .ov-grid, .pf-kpis6 { grid-template-columns: 1fr 1fr !important; }
  .mini-kpi { min-width: 0; }
  .nf-row { flex-direction: column; align-items: stretch; }
  .nf-ctl { margin-left: 0; }
  .st-grid { grid-template-columns: 1fr 1fr; }
  .re-row { grid-template-columns: 26px 1fr; }
  .eg-head { flex-wrap: wrap; }
  .live-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 14px; }
  .jobs { right: 10px; left: 10px; bottom: 70px; width: auto; }

  /* deal top: tracker shows dots only with the current stage named under it; stage controls full width */
  .bt-label { display: none; }
  .bt-step.cur .bt-label { display: block; position: absolute; top: 34px; white-space: nowrap; font-size: 13px; }
  .bt-step:last-child.cur .bt-label { right: 0; } .bt-step:first-child.cur .bt-label { left: 0; }
  .btrack { padding-bottom: 28px; overflow: visible; }
  .bt-dot { width: 24px; height: 24px; font-size: 11px; }
  .bt-line { top: 11px; }
  .deal-meta { flex-wrap: wrap; }
  .deal-meta .grow { flex: 1 0 100%; }
  .deal-meta .stage-sel { flex: 1; height: 44px; min-width: 0; }
  .deal-meta button { height: 44px; }
  /* overview: one column; label above value (no squeezed value column) */
  .ov-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .kv-lines { grid-template-columns: 1fr !important; }
  .kv-lines dt { padding: 8px 0 0; border-bottom: 0; font-size: 12px; }
  .kv-lines dd { padding: 0 0 8px; font-size: 15px; }
  .drh-stage, .drh-pf { width: auto; flex: 1; text-align: left; }
  .deal-row-body { padding: 0; }
  .struct-pick .seg { flex-wrap: wrap; }

  /* deal rooms: each recipient is a card (name + interest, then labelled facts); documents stay a small table */
  .eg-t { display: block; overflow: visible; }
  .eg-t thead { display: none; }
  .eg-t tbody, .eg-t tr { display: block; }
  .eg-t tr.eg-r { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
  .eg-t tr.eg-r td { padding: 0; border: 0; }
  .eg-t tr.eg-r td:nth-child(1) { grid-column: 1; } .eg-t tr.eg-r td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .eg-t tr.eg-r td:nth-child(n+3) { grid-column: 1 / -1; font-size: 13px; }
  .eg-t tr.eg-r td:nth-child(3)::before { content: 'Last opened: '; color: var(--muted); }
  .eg-t tr.eg-r td:nth-child(4)::before { content: 'Visits: '; color: var(--muted); }
  .eg-t tr.eg-r td:nth-child(5)::before { content: 'Time on page: '; color: var(--muted); }
  .eg-t tr.eg-r td:nth-child(3) > div, .eg-t tr.eg-r td:nth-child(6) > div { display: inline; margin-left: 6px; }
  .eg-t tr.eg-docrow td { display: block; padding: 0; }
  .eg-docs .pf-table { font-size: 13px; }

  /* ---- client portal (4c / 4d) ---- */
  body.portal .tb-co { font-size: 13px; }
  body.portal .tb-user { display: none; }
  .cdash, .cproj { gap: 12px; }
  .ctodo { min-height: 56px; }
}