/* Mobile interaction layer. Document canvases and exported PDFs keep their layout. */
.mobile-stage-picker { display:none; }
.mobile-colour-toggle { display:none; }
@media screen and (max-width:767px) {
  body { --mobile-surface:var(--bg-card,#fff); --mobile-line:var(--border-light,#e4e7ee); }
  .main-content :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]),select,textarea) { font-size:16px; }
  .main-content :is(.btn,.ws-btn,.ws-pill,.ws-action-btn-subtle,.pc-primary,.pc-link-btn), .mobile-sheet-row { min-height:44px; }
  .main-content :is(input,select,textarea,button,a):focus-visible { outline:3px solid #a78bfa; outline-offset:3px; }
  .site-header { position:relative!important; }
  .site-header .container { min-height:56px; padding-block:8px; }
  .mobile-bottom-nav { box-shadow:none; border-top:1px solid var(--mobile-line); }
  .mobile-nav-fab { width:44px; height:44px; transform:none; box-shadow:none; }
  .mobile-sheet-modal { max-height:85dvh; overflow-y:auto; overscroll-behavior:contain; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  body.keyboard-open :is(.mobile-bottom-nav,.studio-step-footer,#generator-mobile-bar) { visibility:hidden!important; pointer-events:none; }

  /* One workflow, one navigation bar and one primary task action. */
  body.page-generator.quotation-studio #generator-mobile-stepper,
  body.page-generator.quotation-studio #mobile-stepper-next-btn { display:none!important; }
  body.page-generator.quotation-studio.qm-form-active #generator-mobile-bar { display:none!important; }
  body.page-generator.quotation-studio #mobile-app-bottom-nav { display:none!important; }
  body.page-generator.quotation-studio .generator-mobile-view-bar { position:relative!important; top:auto!important; padding:8px 16px!important; }
  body.page-generator.quotation-studio .mobile-view-mode-inner { margin:0; width:100%; border-radius:10px; }
  body.page-generator.quotation-studio .mob-view-tab-btn { min-height:40px; padding:8px; border-radius:8px; box-shadow:none!important; }
  body.page-generator.quotation-studio .quotation-studio-nav { padding:6px 12px 0!important; }
  body.page-generator.quotation-studio .studio-steps {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
    background: var(--mobile-surface, #fff) !important;
    border: 1px solid var(--mobile-line, #e5e7ef) !important;
    border-radius: 12px !important;
  }
  body.page-generator.quotation-studio .studio-steps button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 6px 2px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    min-height: 42px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    color: #64748B !important;
    border: none !important;
    background: transparent !important;
  }
  body.page-generator.quotation-studio .studio-steps button.active {
    background: #F5F0FF !important;
    color: #6D28D9 !important;
  }
  body.page-generator.quotation-studio .studio-steps button .step-badge {
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    background: #F1F2F6 !important;
    color: #475467 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }
  body.page-generator.quotation-studio .studio-steps button.active .step-badge {
    background: #7C3AED !important;
    color: #FFFFFF !important;
  }
  body.page-generator.quotation-studio .studio-steps button .step-text {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.15 !important;
    display: block !important;
  }
  body.page-generator.quotation-studio .studio-steps button.active .step-text {
    color: #6D28D9 !important;
    font-weight: 700 !important;
    background: transparent !important;
  }
  .mobile-stage-picker { display: none !important; }
  body.page-generator.quotation-studio .generator-workspace.form-only-mode { padding:4px 12px 110px!important; }
  body.page-generator.quotation-studio .studio-section-intro { display:none; }
  body.page-generator.quotation-studio .form-only-mode #card-template-styling {
    display: block !important;
    border: 1px solid var(--mobile-line, #e5e7ef) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    background: var(--mobile-surface, #fff) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
  }
  body.page-generator.quotation-studio .form-only-mode #card-template-styling .card-header-bar {
    display: flex !important;
    padding: 7px 10px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  body.page-generator.quotation-studio #card-template-styling .qm-tmpl-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  body.page-generator.quotation-studio #card-template-styling .color-swatch-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  body.page-generator.quotation-studio #card-template-styling :is(.btn-swatch,.swatch-custom-wrap) {
    width: 20px !important;
    height: 20px !important;
  }
  .mobile-colour-toggle { display: none !important; }
  body.page-generator.quotation-studio #card-template-styling .tmpl-strip-gallery-btn {
    min-height: 26px !important;
    height: 26px !important;
    font-size: 10.5px !important;
    padding: 2px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }
  body.page-generator.quotation-studio #card-template-styling .card-body-content {
    display: block !important;
    padding: 6px 8px 8px !important;
  }
  body.page-generator.quotation-studio .qm-tmpl-carousel-wrap {
    position: relative !important;
    width: 100% !important;
  }
  body.page-generator.quotation-studio .qm-form-templates-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    gap: 7px !important;
    padding: 3px 2px 6px !important;
    scrollbar-width: thin !important;
  }
  body.page-generator .qm-form-templates-strip .btn-design,
  body.page-generator.quotation-studio .qm-form-templates-strip .btn-design {
    flex: 0 0 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: auto !important;
    padding: 5px 3px 4px !important;
    border-radius: 8px !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }
  body.page-generator .qm-form-templates-strip .btn-design.active,
  body.page-generator.quotation-studio .qm-form-templates-strip .btn-design.active {
    border: 2px solid #7C3AED !important;
    background: linear-gradient(180deg, #F9F7FF 0%, #FFFFFF 100%) !important;
    color: #7C3AED !important;
    box-shadow: 0 0 0 1px #7C3AED, 0 4px 12px -2px rgba(124, 58, 237, 0.22) !important;
  }
  body.page-generator .qm-form-templates-strip .tmpl-visual-thumb-wrap,
  body.page-generator.quotation-studio .qm-form-templates-strip .tmpl-visual-thumb-wrap {
    width: 100% !important;
    height: 48px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  body.page-generator .qm-form-templates-strip .btn-design.active .tmpl-visual-thumb-wrap,
  body.page-generator.quotation-studio .qm-form-templates-strip .btn-design.active .tmpl-visual-thumb-wrap {
    border-color: #DDD6FE !important;
    background: #F5F3FF !important;
  }
  body.page-generator .qm-form-templates-strip .tmpl-thumb-svg,
  body.page-generator.quotation-studio .qm-form-templates-strip .tmpl-thumb-svg {
    width: 34px !important;
    height: 44px !important;
    display: block !important;
  }
  body.page-generator .qm-form-templates-strip .tmpl-visual-info,
  body.page-generator.quotation-studio .qm-form-templates-strip .tmpl-visual-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.page-generator .qm-form-templates-strip .btn-design-name,
  body.page-generator.quotation-studio .qm-form-templates-strip .btn-design-name {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    line-height: 1.2 !important;
  }
  body.page-generator .qm-form-templates-strip .btn-design.active .btn-design-name,
  body.page-generator.quotation-studio .qm-form-templates-strip .btn-design.active .btn-design-name {
    color: #7C3AED !important;
  }
  body.page-generator .qm-form-templates-strip .btn-design-tag,
  body.page-generator.quotation-studio .qm-form-templates-strip .btn-design-tag {
    font-size: 8px !important;
    color: #64748B !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    line-height: 1.1 !important;
  }
  body.page-generator.quotation-studio .qm-tmpl-tabs-bar {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    margin-bottom: 5px !important;
  }
  body.page-generator.quotation-studio .qm-tmpl-filter-tab {
    font-size: 10.5px !important;
    padding: 3px 7px !important;
    white-space: nowrap !important;
  }
  body.page-generator.quotation-studio .form-only-mode .editor-card { border-radius:12px; box-shadow:none; }
  body.page-generator.quotation-studio .form-only-mode .card-body-content { padding:14px!important; }
  body.page-generator.quotation-studio .form-only-mode .canvas-contacts { display:flex!important; flex-direction:column; gap:20px; }
  body.page-generator.quotation-studio .form-only-mode .contact-box { padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; }
  body.page-generator.quotation-studio .form-only-mode .contact-box + .contact-box { padding-top:16px!important; border-top:1px solid var(--mobile-line)!important; }
  body.page-generator.quotation-studio .form-only-mode .contact-tag { margin-bottom:12px; font-size:14px; }
  body.page-generator.quotation-studio .form-only-mode .field-group { margin-bottom:14px; }
  body.page-generator.quotation-studio .form-only-mode .field-label { display:block; margin-bottom:5px; font-size:12.5px; }
  body.page-generator.quotation-studio .form-only-mode :is(.doc-input,.doc-select) { min-height:48px; border-radius:9px; font-size:16px!important; }
  body.page-generator.quotation-studio .form-only-mode .inline-fields-row { display:grid!important; grid-template-columns:1fr!important; gap:0; }
  body.page-generator.quotation-studio .form-only-mode .save-prefs-row { flex-wrap:wrap; gap:8px; }
  body.page-generator.quotation-studio .studio-step-footer { position:fixed; bottom:0; left:0; right:0; z-index:980; margin:0; border-radius:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border:0; border-top:1px solid var(--mobile-line); background:var(--mobile-surface); box-shadow:none; }
  body.page-generator.quotation-studio .studio-next { flex:1; min-height:48px; }
  body.page-generator.quotation-studio .studio-back { min-height:48px; }
  body.page-generator.quotation-studio .studio-position { display:none; }
  body.page-generator.quotation-studio.qm-canvas-active .studio-step-footer { display:none!important; }
  body.page-generator.quotation-studio #generator-mobile-bar { gap:8px; flex-wrap:wrap; height:auto; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
  body.page-generator.quotation-studio #generator-mobile-bar button { min-height:44px; border-radius:9px; padding-inline:10px; font-size:12px; box-shadow:none; }

  /* Workspace: search first, swipeable filters, compact summaries, readable records. */
  .main-content-workspace :is(.ws-main,.ws-content,.ws-pane) { min-width:0; }
  .main-content-workspace .ws-panel-subhead { display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-bottom:16px; }
  .main-content-workspace .ws-subhead-title { font-size:22px; line-height:1.25; }
  .main-content-workspace .ws-subhead-desc { font-size:13px; line-height:1.5; }
  .main-content-workspace :is(.ws-files-header,.ws-files-toolbar) { padding:12px!important; gap:12px!important; }
  .main-content-workspace .ws-files-toolbar { align-items:stretch!important; flex-direction:column; }
  .main-content-workspace .ws-files-search { width:100%; min-width:0!important; max-width:none!important; }
  .main-content-workspace .ws-files-search input { min-height:46px; }
  .main-content-workspace .ws-status-pills { width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:thin; padding-bottom:4px; }
  .main-content-workspace .ws-status-pills .ws-pill { flex-shrink:0; white-space:nowrap; }
  .main-content-workspace :is(.ws-kpi-grid-4,.ws-mob-kpi-grid) { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px; }
  .main-content-workspace .ws-stat-card { padding:14px; min-height:0; box-shadow:none; }
  .main-content-workspace .ws-stat-card-val { font-size:22px; overflow-wrap:anywhere; }
  .main-content-workspace .ws-stat-card-footer { margin-top:8px; }
  .main-content-workspace .ws-files-card { border-radius:12px; box-shadow:none; overflow:visible; }
  .mobile-quote-card { border-radius:12px; padding:16px; box-shadow:none; margin-bottom:12px; }
  .mobile-quote-card > div:last-child { flex-wrap:wrap; }
  .mobile-quote-card > div:last-child > :is(a,button) { flex:1 1 40%!important; min-height:44px; }
  .mobile-quote-client { font-size:16px; }
  .mobile-quote-amount { font-size:20px; }
  /* Only reveal tables without an existing dedicated mobile card renderer. */
  .main-content-workspace .ws-table-wrap.mobile-record-list:not([style*="display: none"]):not([style*="display:none"]) { display:block!important; overflow:visible; }
  .mobile-record-list table,.mobile-record-list tbody { display:block; width:100%; min-width:0!important; }
  .mobile-record-list thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .mobile-record-list tbody tr { display:block; margin:12px; padding:12px; border:1px solid var(--mobile-line); border-radius:10px; }
  .mobile-record-list tbody td { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:8px; width:auto!important; max-width:100%; padding:8px 0!important; border:0; white-space:normal!important; overflow-wrap:anywhere; }
  .mobile-record-list td[data-mobile-label]::before { content:attr(data-mobile-label); font-size:12px; font-weight:600; color:var(--text-muted,#667085); margin-right:auto; }
  .mobile-record-list td[colspan] { display:block; }
  .mobile-record-list :is(button,a,select) { min-height:44px; }
  dialog.ws-modal { width:100%!important; max-width:100%!important; max-height:100dvh!important; margin:auto 0 0!important; border-radius:16px 16px 0 0; }
  .ws-modal-card { width:100%; max-height:94dvh; border-radius:16px 16px 0 0; overflow:auto; }
  .ws-modal-header { position:sticky; top:0; z-index:2; background:var(--mobile-surface); padding:16px; }
  .ws-modal-fields { grid-template-columns:1fr!important; gap:16px; }
  .ws-modal-fields :is(input,select) { min-height:48px; }
  .ws-modal-form,.ws-modal-body { padding:16px!important; }

  /* Proposal builder and calculator: full-width editing rather than scaled desktop panels. */
  .proposal-builder-wrap { padding:8px 16px 100px!important; }
  .housi-workspace-grid,.pc-grid { grid-template-columns:minmax(0,1fr)!important; gap:16px; }
  .housi-tabs-wrap { display:flex; overflow-x:auto; max-width:100%; gap:6px; }
  .housi-tab-link { min-height:44px; flex:1 0 auto; }
  .housi-subbar { display:block; }
  .housi-card { border-radius:12px; box-shadow:none; }
  .housi-card-header { padding:16px; }
  .proposal-builder-wrap :is(.inline-fields-row,.contact-grid) { display:grid; grid-template-columns:1fr!important; }
  .proposal-step-summary small { display:none; }
  .proposal-builder-wrap :is(.btn-step-prev,.btn-step-next,.btn-step-finish) { min-height:48px; }
  .pc-page { padding:16px!important; }
  .pc-shell { width:100%; min-width:0; }
  .pc-card { padding:16px!important; border-radius:12px; }
  .pc-intro h1 { font-size:28px; }
  .pc-hero-price-input-row { flex-wrap:wrap; }
  .pc-hero-input-wrap { min-width:0; width:100%; }
  .pc-hero-metrics-bar { flex-wrap:wrap; gap:12px; }

  /* Public acquisition pages: readable copy and vertical plan comparisons. */
  .qp-hero { padding:28px 20px!important; }
  .qp-layout { display:flex; flex-direction:column; gap:32px; }
  .qp-copy h1 { font-size:clamp(30px,8vw,40px); line-height:1.14; letter-spacing:-1px; }
  .qp-description { font-size:16px; line-height:1.65; }
  .qp-actions,.qp-cta { width:100%; }
  .qp-cta { justify-content:space-between; min-height:52px; }
  .qp-product { width:100%; min-width:0; }
  .pricing-page { padding:24px 16px!important; }
  .pricing-grid { display:grid!important; grid-template-columns:1fr!important; gap:16px!important; }
  .price-card { padding:24px!important; transform:none!important; }
  .pricing-reassurance { flex-wrap:wrap; gap:8px; }
  .pricing-intro h1 { font-size:32px; line-height:1.2; }
  .price-card .ct-btn-pill { min-height:48px; }
}
@media (prefers-reduced-motion:reduce) {
  .studio-step-footer,.mobile-sheet-modal,.mobile-quote-card { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}