/* ECUFix client mobile layout. Presentation only; no permissions, hidden states, data, editor selection, chart gestures or payment behavior are changed. Loaded after every existing client stylesheet. Tall desktop >850px is unchanged; short landscape phone screens up to1000px use this layout too. */ @media (max-width: 850px), (max-width: 1000px) and (max-height: 500px) { body[data-page="workspace"] { --pm-gap: 12px; } body[data-page="workspace"] .ambient { clip-path: inset(0); max-width: 100vw; } body[data-page="workspace"] #appView { width: 100%; min-width: 0; } body[data-page="workspace"] #appView:not([hidden]):not(.is-hidden) { display: block; } body[data-page="workspace"] :is(.main, .view, .panel, .workspace-grid, .dtc-layout, .asset-grid, .file-response-grid) { min-width: 0; max-width: 100%; } body[data-page="workspace"] .main { padding: 0 12px max(24px, env(safe-area-inset-bottom)); } /* All destinations and sign-out in normal flow, without an off-screen menu. */ #appView .sidebar { position: static; inset: auto; width: 100%; height: auto; padding: 12px; display: block; overflow: visible; border-right: 0; border-bottom: 1px solid var(--pd-border, #3b3b41); } #appView .sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; padding: 0; } #appView .sidebar .nav-item { min-width: 0; min-height: 44px; padding: 10px; gap: 8px; justify-content: flex-start; white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; } #appView .sidebar .nav-item > span { flex: 0 0 22px; } #appView .sidebar .side-bottom { display: flex; flex-direction: row; flex-wrap: wrap; margin: 10px 0 0; padding: 0; gap: 8px; width: 100%; } #appView .sidebar .side-bottom .server-mini { display: flex; min-width: 0; flex: 1 1 130px; padding: 10px; } #appView .sidebar .side-bottom .nav-item { flex: 1 1 130px; width: auto; } #appView .nav-count { margin-left: auto; flex-shrink: 0; } /* Credit balances, access label and account remain readable on phones. */ #appView .topbar { position: static; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin: 0 -12px 18px; padding: 18px 12px; } #appView .topbar h2 { font-size: 23px; line-height: 1.3; overflow-wrap: anywhere; } #appView .topbar .eyebrow { font-size: 10px; line-height: 1.5; } #appView .top-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; min-width: 0; width: 100%; } #appView .top-actions .language-control { order: 3; min-width: 0; align-self: center; } #appView .top-actions .language-control select { width: 100%; } #appView .top-actions .credit-card:not([hidden]):not(.is-hidden) { display: grid; min-width: 0; min-height: 82px; padding: 12px; column-gap: 5px; } #appView .top-actions .credit-card > strong { min-width: 0; font-size: clamp(19px, 5vw, 27px); overflow-wrap: anywhere; line-height: 1.2; } #appView .top-actions .credit-card > small { white-space: normal; line-height: 1.5; font-size: 10px; } #appView .top-actions .credit-card > span { letter-spacing: .08em; font-size: 10px; line-height: 1.5; } #appView .top-actions .user-pill { grid-column: 1 / -1; order: 4; margin: 0; padding-top: 5px; min-width: 0; } #appView .user-pill > div { flex: 0 0 38px; } #appView .user-pill > span:not([hidden]):not(.is-hidden) { display: flex; max-width: none; min-width: 0; } #appView .user-pill b { white-space: normal; overflow-wrap: anywhere; font-size: 13px; } #appView .user-pill small { font-size: 12px; line-height: 1.6; } /* Inputs avoid mobile auto-zoom. Existing readonly/disabled/hidden rules win. */ body[data-page="workspace"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) { min-width: 0; max-width: 100%; min-height: 44px; font-size: 16px !important; line-height: 1.5; } body[data-page="workspace"] input[type="file"] { max-width: 100%; font-size: 14px; min-height: 44px; } body[data-page="workspace"] input[type="file"]::file-selector-button { min-height: 44px; } body[data-page="workspace"] :is(.btn, .icon-btn, .auth-link-button) { min-height: 44px; min-width: 44px; white-space: normal; line-height: 1.5; overflow-wrap: anywhere; } body[data-page="workspace"] :is(.btn, .auth-link-button) { font-size: 14px; } body[data-page="workspace"] :is(label, .form-error, .form-message, .subtle-link, .support-context) { overflow-wrap: anywhere; } body[data-page="workspace"] :is(.section-title, .panel-head, .access-plans-heading, .access-current-header) { flex-wrap: wrap; gap: 12px; } body[data-page="workspace"] .section-title { align-items: flex-start; margin-bottom: 18px; } body[data-page="workspace"] .section-title :is(h2, h3) { font-size: 23px; line-height: 1.3; } body[data-page="workspace"] .section-title p { font-size: 13px; line-height: 1.7; } #appView :is(.panel-actions, .table-tools) { flex-wrap: wrap; gap: 10px; } #appView .table-tools > input { flex: 1 1 220px; } #appView .panel-actions > .btn { flex: 1 1 180px; } #appView .field-row { gap: 12px; } #appView .field-row label { min-width: 0; width: 100%; } #appView :is(.ecu-combobox, .ecu-options) { min-width: 0; max-width: 100%; } #appView .ecu-option-group > button { grid-template-columns: minmax(0, 1fr); min-height: 44px; } #appView .ecu-option-group > button small { white-space: normal; font-size: 12px; } /* Workspace file identity, procedures and the complete operation pipeline. */ #appView .dropzone { height: auto; min-height: 130px; flex-wrap: wrap; padding: 18px 14px; gap: 12px; } #appView .dropzone > div:not(.upload-icon) { flex: 1 1 160px; min-width: 0; } #appView .dropzone .btn { flex: 1 1 100%; margin: 0; } #appView .dropzone p { line-height: 1.6; } #appView .file-bar { height: auto; flex-wrap: wrap; padding: 14px; gap: 12px; } #appView .file-main { min-width: 0; flex: 1 1 140px; } #appView .file-main :is(b, span) { overflow-wrap: anywhere; line-height: 1.6; } #appView .hash:not([hidden]):not(.is-hidden) { display: flex; order: 3; flex: 1 1 100%; min-width: 0; margin: 0; } #appView .hash code { max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 11px; line-height: 1.6; } #appView :is(.feature-panel, .telemetry-panel, .support-panel, .billing-history) { padding: 16px; } #appView .feature-grid { grid-template-columns: minmax(0, 1fr); } #appView .feature { min-width: 0; min-height: 70px; flex-wrap: wrap; gap: 10px; padding: 12px; } #appView .feature-select { min-width: 0; min-height: 44px; flex: 1 1 160px; } #appView .feature-copy b { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } #appView .feature-copy span { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } #appView .feature-support { min-height: 44px; padding: 9px 12px; font-size: 12px; } #appView .feature-support-btn { min-height: 44px; max-width: 100%; position: static; transform: none; font-size: 12px; } #appView .telemetry-panel { display: block; } #appView .telemetry-panel .pipeline { padding: 0; } #appView .pipeline b { font-size: 14px; line-height: 1.5; } #appView .pipeline span { font-size: 12px; line-height: 1.6; } /* Wide datasets scroll locally; the surrounding page stays viewport-sized. */ #appView :is(.table-wrap, .access-payments-wrap) { width: 100%; min-width: 0; max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } #appView :is(#workspaceDtc, #historyView, #creditsView) .table-wrap > table { min-width: 650px; width: 100%; } #appView :is(.table-wrap, .access-payments-wrap) :is(th, td) { font-size: 13px; line-height: 1.6; } #appView .table-tools { padding: 14px; } #appView .dtc-hidden-toggle { white-space: normal; min-height: 44px; } #appView .dtc-hidden-toggle input { flex: 0 0 22px; width: 22px; height: 22px; } #appView .dtc-summary { min-width: 0; } #appView .dtc-summary :is(p, small, code) { overflow-wrap: anywhere; } #appView .insight-panel > p { font-size: 14px; line-height: 1.7; } #appView .address-list { overflow-wrap: anywhere; } #appView :is(#dtcRows, #dtcXdecoderRows) input[type="checkbox"] { min-height: 44px; min-width: 44px; } #appView :is(#dtcRows input[data-xdecoder-target], #dtcXdecoderRows input[data-xdecoder-switch]) { height: 44px; } #appView :is(#dtcRows input[data-xdecoder-target], #dtcXdecoderRows input[data-xdecoder-switch])::before { top: 14px; } #appView :is(#dtcRows input[data-xdecoder-target], #dtcXdecoderRows input[data-xdecoder-switch])::after { top: 13px; } #appView :is(.dtc-all-btn, [data-xdecoder-shared-reset], .support-ticket, [data-chat-retry]) { min-height: 44px; min-width: 44px; } /* Messages, ticket actions, attachments, plans and both Stripe entry points. */ #appView :is(.asset-grid, .file-response-grid, .support-fix-grid, .support-order-work, .support-order-meta, .support-order > footer, .credit-packages) { grid-template-columns: minmax(0, 1fr); } #appView :is(.asset-card, .empty-card, .support-order, .response-card, .credit-package) { min-width: 0; max-width: 100%; padding: 16px; } #appView :is(.asset-card h3, .asset-card p, .response-card h3, .support-order h3, .support-order-description, .support-context) { overflow-wrap: anywhere; } #appView .asset-card p { font-size: 14px; line-height: 1.6; } #appView .asset-stats { flex-wrap: wrap; } #appView .asset-stats span { font-size: 12px; line-height: 1.6; } #appView .support-ticket { white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; } #appView :is(.support-fix-chip, .support-fix-option) { min-height: 48px; font-size: 13px; line-height: 1.5; } #appView :is(.support-order-actions, .response-summary) { grid-template-columns: minmax(0, 1fr); } #appView :is(.response-card > header, .response-file-row, .response-chat-compose > div) { flex-wrap: wrap; gap: 12px; } #appView :is(.response-download, .response-chat-read, .response-chat-compose .btn) { min-width: 0; width: 100%; } #appView .response-chat-compose { padding: 12px; } #appView .response-chat-compose :is(small, .response-chat-file) { font-size: 12px; line-height: 1.6; } #appView .response-chat-message p { font-size: 14px; line-height: 1.7; } #appView .response-chat-message > div { flex-wrap: wrap; gap: 8px; } #appView .response-chat-attachment { min-height: 44px; align-items: center; font-size: 13px; } #appView .response-file-download { flex-basis: 44px; width: 44px; height: 44px; } #appView .billing-balance { display: flex; flex-direction: column; align-items: stretch; padding: 18px 16px; gap: 18px; } #accessPlansView .access-plan-cards { grid-template-columns: minmax(0, 1fr); } #accessPlansView :is(.access-current-plan, .access-plan-card, .trial-plan-review) { padding: 18px 16px; min-width: 0; } #accessPlansView .access-current-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } #accessPlansView .trial-review-facts { grid-template-columns: minmax(0, 1fr); } #accessPlansView .trial-review-actions .btn { width: 100%; } /* Map Studio retains its grid, plots, editor and native gesture handlers. */ body[data-page="workspace"] #mapStudioRoot { min-width: 0; max-width: 100%; padding: 12px; } body[data-page="workspace"] #mapStudioRoot .ms-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; } body[data-page="workspace"] #mapStudioRoot .ms-workarea { grid-template-columns: minmax(0, 1fr); } body[data-page="workspace"] #mapStudioRoot :is(.ms-sidebar, .ms-main, .ms-workarea, .ms-secondary) { min-width: 0; max-width: 100%; } body[data-page="workspace"] #mapStudioRoot :is(.ms-heading, .ms-maphead, .ms-fileline, .ms-map-buttons, .ms-viewbar, .ms-pager, .ms-secondary header) { flex-wrap: wrap; gap: 10px; } body[data-page="workspace"] #mapStudioRoot :is(.ms-heading, .ms-maphead) { padding-inline: 0; } body[data-page="workspace"] #mapStudioRoot .ms-fileline { padding: 12px; } body[data-page="workspace"] #mapStudioRoot .ms-fileline > span:nth-child(2):not([hidden]):not(.is-hidden) { display: block; flex-basis: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; } body[data-page="workspace"] #mapStudioRoot :is(.ms-tabs, .ms-property-tabs, .ms-stage-group) { flex-wrap: wrap; max-width: 100%; } body[data-page="workspace"] #mapStudioRoot :is(.ms-toolbar, .ms-project-tools, .ms-data-tools, .ms-methodbar, .ms-stage-toolbar, .ms-table-options, .ms-edit, .ms-version-actions) { flex-wrap: wrap; max-width: 100%; gap: 8px; } body[data-page="workspace"] #mapStudioRoot :is(.ms-stage-group button, .ms-tabs button, .ms-property-tabs button, .ms-open-tab button, .ms-mapitem, .ms-tree summary, .ms-project-disclosure > summary) { min-height: 44px; height: auto; font-size: 13px; line-height: 1.5; } body[data-page="workspace"] #mapStudioRoot .ms-stage-group button { padding: 9px 12px; } body[data-page="workspace"] #mapStudioRoot :is(.ms-toolbar .btn, .ms-version-actions .btn, .ms-edit .btn, .ms-methodbar .btn, .ms-data-tools .btn, .ms-pager .btn, .ms-viewbar .btn) { min-height: 44px; padding: 9px 12px; font-size: 13px; } body[data-page="workspace"] #mapStudioRoot :is(.ms-edit label, .ms-data-tools label, .ms-table-options label, .ms-methodbar label) { min-width: 0; max-width: 100%; flex-wrap: wrap; } body[data-page="workspace"] #mapStudioRoot :is(.ms-toolbar select, .ms-project-tools select, .ms-edit input, .ms-edit select, .ms-data-tools select, .ms-data-tools input, .ms-methodbar select) { max-width: 100%; } body[data-page="workspace"] #mapStudioRoot .ms-tree { max-height: min(40vh, 300px); overflow: auto; } body[data-page="workspace"] #mapStudioRoot .ms-tree summary { overflow-wrap: anywhere; } body[data-page="workspace"] #mapStudioRoot .ms-map-name { display: block; -webkit-line-clamp: unset; white-space: normal; overflow-wrap: anywhere; } body[data-page="workspace"] #mapStudioRoot .ms-map-meta { white-space: normal; overflow-wrap: anywhere; } body[data-page="workspace"] #mapStudioRoot :is(.ms-viewport, .ms-secondary-viewport) { width: 100%; max-width: 100%; min-width: 0; height: clamp(280px, 58vh, 470px); min-height: 0; max-height: none; overflow: auto; -webkit-overflow-scrolling: touch; } body[data-page="workspace"] #mapStudioRoot .ms-viewport:has(canvas) { justify-content: flex-start; align-items: flex-start; } body[data-page="workspace"] #mapStudioRoot .ms-viewport canvas { flex: 0 0 auto; min-width: 560px; width: max(100%, 560px); max-width: none; max-height: none; height: auto; } body[data-page="workspace"] #mapStudioRoot :is(.btn, .ms-stage-group button, .ms-tabs button, .ms-property-tabs button, .ms-open-tab button, .ms-grid td button) { min-height: 44px !important; } body[data-page="workspace"] #mapStudioRoot .ms-inspector { max-height: none; grid-template-columns: minmax(0, 1fr); gap: 12px; } body[data-page="workspace"] #mapStudioRoot :is(.ms-definition, .ms-change-fields, .ms-property-grid) { grid-template-columns: minmax(0, 1fr); } body[data-page="workspace"] #mapStudioRoot .ms-context-menu { max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; } body[data-page="workspace"] #mapStudioRoot .ms-context-menu button { min-height: 44px; white-space: normal; } body[data-page="workspace"] #mapStudioRoot .ms-context-menu kbd { white-space: normal; } body[data-page="workspace"] #mapStudioRoot.ms-focus-mode { inset: 4px; padding: 10px; max-height: calc(100dvh - 8px); overflow: auto; } body[data-page="workspace"] #mapStudioRoot :is(.ms-dialog, .ms-wide-dialog, .ms-graph-preview) { width: calc(100vw - 24px); max-width: calc(100vw - 24px); min-width: 0; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; padding: 18px 14px; } body[data-page="workspace"] #mapStudioRoot .ms-dialog :is(pre, .ms-diff-table) { max-width: 100%; overflow: auto; } body[data-page="workspace"] #mapStudioRoot .ms-dialog .ms-diff-table { display: block; } body[data-page="workspace"] #mapStudioRoot .ms-dialog .ms-toolbar { flex-wrap: wrap; } body[data-page="workspace"] #mapStudioRoot .ms-dialog .ms-toolbar > .btn { flex: 1 1 180px; } /* Long-running operations and notices fit short landscape screens too. */ body[data-page="workspace"] .busy-overlay { max-width: 100vw; padding: 16px; overflow-y: auto; overflow-x: auto; gap: 12px; } body[data-page="workspace"] .busy-overlay > * { flex-shrink: 0; max-width: 100%; } body[data-page="workspace"] :is(.apply-live, .apply-stages) { flex-wrap: wrap; } body[data-page="workspace"] .apply-activity { min-width: 0; width: 100%; max-width: 460px; padding: 18px 14px; } body[data-page="workspace"] #busyText { overflow-wrap: anywhere; text-align: center; } body[data-page="workspace"] .toast-stack { width: calc(100% - 24px); max-width: 440px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } body[data-page="workspace"] .toast { overflow-wrap: anywhere; } /* Login and signup have the same mobile control and text scale. */ #loginView.auth-shell { width: calc(100% - 24px); grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 0; } #loginView .auth-brand { padding: 22px 18px; min-width: 0; } #loginView .auth-brand h1 { font-size: 48px; } #loginView .auth-lead { font-size: 15px; line-height: 1.7; } #loginView .auth-card { min-width: 0; width: 100%; padding: 22px 18px; } #loginView .auth-card > p { font-size: 14px; line-height: 1.7; } #loginView :is(.registration-consent, .trial-plan-summary, .trial-window) { font-size: 13px; line-height: 1.7; } #loginView .registration-consent { align-items: flex-start; } #loginView .registration-consent input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; } #loginView .google-signin-host { max-width: 100%; overflow-x: auto; } } @media (max-width: 390px) { #appView .top-actions .credit-card { padding: 10px; } #appView .sidebar .nav-item { font-size: 12px; gap: 6px; } #accessPlansView .access-current-stats { grid-template-columns: minmax(0, 1fr); } #loginView .trial-steps { grid-template-columns: minmax(0, 1fr); } #loginView .trial-steps li { flex-direction: row; align-items: center; gap: 10px; font-size: 12px; } } @media (max-width: 1000px) and (max-height: 430px) { body[data-page="workspace"] .busy-overlay { justify-content: flex-start; padding-block: 16px; } body[data-page="workspace"] .busy-overlay .spinner { width: 32px; height: 32px; } body[data-page="workspace"] .apply-activity { padding-block: 10px; } body[data-page="workspace"] #mapStudioRoot .ms-tree { max-height: 180px; } }