/* Phone-only recovery for proposal navigation, notes, estimator cards, and rail actions. */
.proposal-mobile-notes-toggle,
.proposal-mobile-back-top{display:none}

.pe-live .proposal-estimator-record-items{display:contents}

@media(max-width:760px){
  /* Keep the three workflow choices compact: two across, then one full-width. */
  #app .proposal-reference-metrics.proposal-workflow-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #app .proposal-workflow-metrics .proposal-workflow-metric{
    min-height:112px!important;
    padding:14px 12px!important;
    border-right:1px solid #293b4b!important;
    border-bottom:1px solid #293b4b!important;
  }
  #app .proposal-workflow-metrics .proposal-workflow-metric:nth-child(2){border-right:0!important}
  #app .proposal-workflow-metrics .proposal-workflow-metric:last-child{
    grid-column:1/-1;
    min-height:88px!important;
    border-right:0!important;
    border-bottom:0!important;
  }
  #app .proposal-workflow-metrics .proposal-reference-metric-copy strong{font-size:16px!important}
  #app .proposal-workflow-metrics .proposal-reference-metric-copy em{font-size:12px!important}

  /* Proposal activity cards use a readable two-by-two grid on phones. */
  #app .proposal-reference-metrics.proposal-status-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #app .proposal-status-metrics .proposal-reference-metric{
    border-right:1px solid #293b4b!important;
    border-bottom:1px solid #293b4b!important;
  }
  #app .proposal-status-metrics .proposal-reference-metric:nth-child(even){border-right:0!important}
  #app .proposal-status-metrics .proposal-reference-metric:nth-last-child(-n+2){border-bottom:0!important}

  /* One compact Notes control replaces four tall cards until the user opens it. */
  .pe-live .proposal-estimator-record-strip{
    display:block!important;
    margin-bottom:10px!important;
  }
  .pe-live .proposal-mobile-notes-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:52px;
    padding:10px 13px;
    border:1px solid #3c5262;
    border-radius:9px;
    background:#091720;
    color:#f7fbff;
    font:700 14px/1.2 Inter,"Segoe UI",Arial,sans-serif;
    cursor:pointer;
  }
  .pe-live .proposal-mobile-notes-toggle>span{display:flex;align-items:center;gap:9px}
  .pe-live .proposal-mobile-notes-toggle svg{width:18px;height:18px;color:#f58216}
  .pe-live .proposal-mobile-notes-toggle>svg{transition:transform .18s ease}
  .pe-live .proposal-estimator-record-strip.mobile-notes-open .proposal-mobile-notes-toggle>svg{transform:rotate(180deg)}
  .pe-live .proposal-estimator-record-items{display:none}
  .pe-live .proposal-estimator-record-strip.mobile-notes-open .proposal-estimator-record-items{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:8px;
  }
  .pe-live .proposal-estimator-note-trigger,
  .pe-live .proposal-estimator-work-order{min-height:54px!important}

  /* Undo the later desktop-width rule that caused horizontal, oversized phone cards. */
  .premium-app .painting-module-shell.interior.painting-mobile-compact-items-ready
  .painting-reference-room .painting-component-column{overflow:visible!important}
  .premium-app .painting-module-shell.interior.painting-mobile-compact-items-ready
  .painting-reference-room .painting-grouped-table,
  .premium-app .painting-module-shell.interior.painting-mobile-compact-items-ready
  .painting-reference-room .painting-door-option{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  /* Samsung and older mobile browsers get the same non-overlay guided navigation. */
  .premium-app.painting-phone-flow-active>main>section.content{padding-bottom:16px!important}
  .premium-app.painting-phone-flow-active .mobile-bottom-nav{
    position:static!important;
    inset:auto!important;
    width:auto!important;
    margin:14px 10px 8px!important;
    transform:none!important;
  }

  /* Keep the proposal actions visible before the long financial breakdown. */
  .painting-shared-hub-rail .painting-summary-approval{display:block!important;margin:0!important}
  .painting-shared-hub-rail .painting-summary-approval-actions{display:grid!important;gap:8px!important}
  .painting-shared-hub-rail .painting-summary-approval-actions :is(a,button){min-height:48px!important}

  /* Always-available return to the top of the proposal list. */
  #app .proposal-mobile-back-top{
    position:fixed;
    z-index:120;
    right:14px;
    bottom:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:66px;
    min-height:44px;
    padding:0 13px;
    border:1px solid #f58216;
    border-radius:999px;
    background:#101a23;
    color:#fff;
    box-shadow:0 10px 26px rgba(0,0,0,.42);
    font:700 13px/1 Inter,"Segoe UI",Arial,sans-serif;
  }
  #app .proposal-mobile-back-top svg{width:17px;height:17px;color:#f58216}
}

@media(max-width:390px){
  #app .proposal-workflow-metrics .proposal-workflow-metric{padding:12px 10px!important}
  #app .proposal-workflow-metrics .proposal-reference-metric-icon{width:38px!important;height:38px!important}
  #app .proposal-workflow-metrics .proposal-reference-metric-copy strong{font-size:14px!important}
  #app .proposal-workflow-metrics .proposal-reference-metric-copy em{font-size:11px!important}
}

@media(prefers-reduced-motion:reduce){
  .pe-live .proposal-mobile-notes-toggle>svg{transition:none}
}