/* Interface smartphone uniquement. Aucun sélecteur actif hors de ces media queries. */
@media screen and (max-width:767px), screen and (max-width:960px) and (orientation:landscape) and (pointer:coarse) {
  html {scroll-padding-top:120px}
  body {font-size:14px;line-height:1.45}
  body #app {min-width:0;max-width:100%}
  body #app > header {position:sticky;top:0;z-index:1100;display:grid;grid-template-columns:44px 44px minmax(0,1fr) auto;grid-template-areas:"menu theme brand actions" "search search search search";gap:6px;padding:8px 12px;min-height:0;max-width:100%;background:var(--surface)}
  body #app > header .header-brand {grid-area:brand;min-width:0;max-width:100%;margin:0}
  body #app > header .header-logo-plate {width:100%;max-width:135px;padding:4px;margin:0}
  body #app > header .brand-logo {max-width:100%;height:auto}
  body #app > header .brand-kicker {display:none}
  body #app > header > .header-account-actions {grid-area:actions;gap:4px;width:auto;margin:0!important;flex-wrap:nowrap!important}
  body #app > header :is(#who,#logout,#themeToggle) {display:none!important}
  body #app > header .header-account-actions > button {min-height:44px;min-width:44px;margin:0;padding:8px;font-size:12px}
  body #app > header .header-search {grid-area:search;min-width:0;width:100%;margin:0}
  body #app > header .header-search label {display:none}
  body #app > header .header-search input {height:44px;min-height:44px;width:100%;margin:0;padding:10px 12px;font-size:16px}
  body #app > header .header-search-results {inset-inline:0;max-width:100%;max-height:60dvh;overflow:auto}
  .phone-menu-toggle {grid-area:menu;width:44px;height:44px;padding:10px;position:relative}
  body #app > header .phone-theme-toggle {grid-area:theme;display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;margin:0;font-size:22px;line-height:1;letter-spacing:0;white-space:nowrap}
  body #app > header .phone-theme-toggle[aria-checked="true"] {background:var(--primary-soft)}
  body #app > header .phone-theme-toggle svg {display:block;width:24px;height:24px;flex:none}
  .phone-menu-toggle svg,.phone-messages-button svg {width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
  .phone-messages-button {position:relative;width:44px;height:44px}
  .phone-message-count {position:absolute;top:-4px;inset-inline-end:-3px;display:flex;align-items:center;justify-content:center;min-width:19px;height:19px;border-radius:12px;padding:0 4px;background:#d32945;color:white;font-size:10px;font-weight:700}
  .phone-message-count[hidden],.phone-messages-button[hidden] {display:none!important}
  body #app > main {z-index:auto;display:block;width:100%;max-width:100%;padding:12px;margin:0;min-width:0}
  body #app .workspace {padding:0;min-width:0;max-width:100%}
  body #app > main > nav {display:none!important}
  body.phone-drawer-open {overflow:hidden}
  body.phone-drawer-open #app > main > nav {display:flex!important;position:fixed;z-index:4100;inset-block:0;inset-inline-start:0;inset-inline-end:auto;width:min(360px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:100dvh;min-height:0;overflow-y:auto;scroll-padding-top:80px;overscroll-behavior:contain;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;margin:0;padding:12px 12px max(16px,env(safe-area-inset-bottom));border:0;border-inline-end:1px solid var(--border);border-radius:0;background:var(--surface);box-shadow:10px 0 40px #031d4833}
  body.phone-drawer-open #app > main > nav button[data-tab]:not(.hidden):not(.role-hidden) {display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;flex:none;width:100%;min-width:0;min-height:48px;text-align:start;padding:10px;gap:8px;font-size:13px;line-height:1.3;white-space:nowrap;border-radius:10px}
  body.phone-drawer-open #app > main > nav .nav-label {white-space:nowrap;flex:1;min-width:0;overflow:visible}
  body.phone-drawer-open #app > main > nav button[data-tab] > svg {width:22px;height:22px;flex:0 0 22px}
  body #app > main > nav #mobileMoreButton,body #mobileMoreMenu {display:none!important}
  .phone-nav-heading {flex:none;position:sticky;top:-12px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);padding:8px 0 12px;border-bottom:1px solid var(--border);margin-bottom:8px;font-size:18px}
  body #app main > nav .phone-nav-close {display:flex!important;width:44px;height:44px;min-height:44px;padding:10px;flex:none;justify-content:center;font-size:24px}
  .phone-nav-extras {border-top:1px solid var(--border);margin-top:12px;padding-top:8px;display:grid;gap:4px}
  body #app main > nav .phone-nav-extras button {display:flex!important;width:100%;min-height:48px;padding:12px;font-size:14px;text-align:start}
  .phone-nav-backdrop {position:fixed;inset:0;z-index:4000;border:0;border-radius:0;background:#001b3870;min-width:100%;height:100dvh;padding:0}
  .phone-nav-backdrop[hidden] {display:none!important}
  body #pageBanner {display:block;min-height:0;margin:0 0 16px;padding:0;border-radius:12px;background:var(--soft)}
  body #pageBanner .page-banner-copy,body #pageBanner .statistics-banner-copy {position:relative;width:100%;padding:16px;max-width:100%}
  body #pageBanner :is(.reference-banner-art,.statistics-promises),body #pageBanner::after {display:none!important}
  body #pageBanner h1 {font-size:23px;line-height:1.2;margin:0 0 6px;letter-spacing:-.4px;overflow-wrap:anywhere}
  body #pageBanner p {font-size:13px;line-height:1.4}
  body #pageBanner .page-banner-copy > span {font-size:12px;margin-top:8px}
  body #content {display:block;min-width:0;max-width:100%}
  body #content > *,body #content .panel > *,body #content .card > * {min-width:0;max-width:100%}
  body #content :is(.panel,.card,.record-detail,.replenishment-action-card,.surplus-section,.product-group-form > section) {padding:16px;margin-bottom:16px;border-radius:12px;min-width:0;max-width:100%}
  body #content :is(h2,h3) {max-width:100%;overflow-wrap:anywhere;line-height:1.3;letter-spacing:0}
  body #content h1 {font-size:24px;line-height:1.25;overflow-wrap:anywhere}
  body #content h2 {font-size:19px;margin-top:0}
  body #content h3 {font-size:16px}
  body #content[data-page="dashboard"] .dashboard-statistics > .section-title h2 {font-size:20px}
  body #content :is(p,small,label,summary) {overflow-wrap:anywhere}
  body #content p {font-size:14px;line-height:1.5}
  body #content .section-title {gap:12px;align-items:flex-start;margin-bottom:14px;flex-direction:column}
  body #content .section-title > * {min-width:0;max-width:100%}
  body #content :is(.admin-grid,.master-detail-layout,.catalog-layout,.sale-results-layout,.dashboard-analysis,.admin-settings-layout,.account-self-form,.account-self-form > section,.billing-grid,.profit-layout,.invoice-customer-grid,.claim-detail-grid,.admin-reception-lower,.replenishment-analysis-layout,.replenishment-insights,.product-group-form,.product-base-fields,.product-form-grid,.shipping-fields,.stock-page-layout,.reception-page-layout,.shop-product-toolbar,.product-toolbar,.history-delete-grid,.purchase-invoice-import) {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px;min-width:0;max-width:100%}
  body #content :is(.admin-grid,.master-detail-layout,.catalog-layout,.account-self-form,.account-self-form > section,.billing-grid,.product-group-form,.product-base-fields,.shipping-fields) > * {grid-column:auto!important;min-width:0;max-width:100%}
  body #content :is(.overview-strip,.stock-summary,.report-totals,.profit-kpis,.claim-categories,.products-overview,.admin-five-kpis) {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  body #content :is(.overview-card,.stock-category-card,.overview-strip > .stat,.profit-kpis > div,.report-totals > div) {display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-width:0;min-height:104px;padding:12px;text-align:start;white-space:normal}
  body #content :is(.overview-card,.stock-category-card,.overview-strip > .stat,.profit-kpis > div,.report-totals > div) > .stat-icon {position:static;transform:none;width:28px;height:28px;border-radius:8px;flex:none;margin:0}
  body #content .overview-card > :is(b,span),body #content .stat > :is(b,span) {position:static;min-width:0;max-width:100%;white-space:normal}
  body #content :is(.overview-card,.stock-category-card,.overview-strip > .stat,.profit-kpis > div,.report-totals > div) :is(b,strong) {font-size:18px;line-height:1.25;overflow-wrap:normal;word-break:normal}
  body #content :is(.overview-card,.stock-category-card,.overview-strip > .stat,.profit-kpis > div,.report-totals > div) :is(span:not(.stat-icon),small) {font-size:12px;line-height:1.35;overflow-wrap:anywhere}
  body #content :is(button,.button,a.button),body dialog :is(button,.button),body :is(.notification-popup,.messaging-notice) button {min-height:44px;min-width:44px;max-width:100%;padding:10px 12px;white-space:normal;overflow-wrap:anywhere;line-height:1.3;font-size:13px}
  body #content :is(.actions,.button-row,.order-actions,.product-workspace-actions,.surplus-filters,.admin-status-tabs,.invoice-period-filters,.category-tabs,.filter-tabs,.stock-tabs,.product-category-tabs) {display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
  body #content :is(.actions,.order-actions) > * {max-width:100%;min-width:0}
  body #content :is(input:not([type="file"]),select,textarea),body dialog :is(input:not([type="file"]),select,textarea) {max-width:100%;min-width:0;width:100%;min-height:46px;font-size:16px;margin-bottom:0;padding:10px 12px;box-sizing:border-box}
  body :is(#content,dialog) input:is([type=checkbox],[type=radio]) {width:22px;height:22px;min-height:22px;padding:0;flex:none}
  body #content :is(.form-grid,.form-row,.row-form,.sales-report-filters,.catalog-filters,.claim-form-row,.option-form,.form-fields,.invoice-filters,.history-filters,.admin-filter-bar,.shop-invoice-filters,.preferences-grid) {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px;min-width:0;max-width:100%}
  body #content form > label,body #content .account-self-form label {width:100%;min-width:0;max-width:100%;font-size:13px}
  body #content form :is(.span-all,.span-two) {grid-column:1/-1}
  body #content :is(.file-picker,.shop-more-menu) input[type="file"] {width:1px;height:1px;min-height:0;min-width:0;padding:0}
  body #content label:has(input:is([type="checkbox"],[type="radio"])) {min-height:44px}
  body #content .file-picker label {min-height:44px;width:100%;max-width:100%}
  body #content .password-field {grid-template-columns:minmax(0,1fr) 96px}
  body #content .password-field > button {width:96px;min-width:96px;padding:10px;font-size:12px;letter-spacing:0;white-space:nowrap}
  body #content :is(.report-table-wrap,.reception-preview,.phone-table-wrap) {min-width:0;max-width:100%;overflow:auto;overscroll-behavior:contain;border-radius:10px}
  body #content .operational-list.operational-overflow {max-height:min(var(--operational-height),60dvh);scroll-padding-top:0}
  body #content .operational-table :is(td,th) {font-size:13px;line-height:1.4}
  body #content .operational-table > table > tbody > tr {gap:10px;padding:12px}
  body #content .operational-table > table > tbody > tr > td {padding:0;min-width:0}
  body #content .operational-table td[data-list-label]::before {font-size:11px;margin-bottom:5px}
  body #content :is(.operational-table,.phone-table-wrap) .actions {gap:8px}
  body #content .phone-table-wrap > table:not(.phone-card-table) {min-width:600px}
  body #content :is(.surplus-table-head,.surplus-row) {max-width:none}
  body #content .surplus-table-frame {min-width:700px}
  body #content .surplus-row .surplus-view {min-height:44px;font-size:13px}
  body #content .surplus-section .surplus-table-viewport {overflow-x:auto}
  body #content :is(.professional-list,.catalog-groups,.product-families,.product-workspace-layout,.shop-account-list) {grid-template-columns:minmax(0,1fr)!important;gap:14px;min-width:0;max-width:100%}
  body #content .compact-shop-card {display:grid;grid-template-columns:minmax(0,1fr)!important;gap:14px;padding:16px;min-width:0}
  body #content .compact-shop-info {grid-template-columns:minmax(0,1fr)!important;gap:10px;min-width:0}
  body #content .compact-shop-actions {display:flex!important;flex-wrap:wrap;gap:8px;max-width:100%;min-width:0}
  body #content .compact-shop-actions .shop-access-button {flex:1;min-width:150px}
  body #content .shop-more-menu {width:auto;position:relative;max-width:100%;min-width:44px}
  body #content .shop-more-menu > summary {min-width:44px;min-height:44px;padding:10px}
  body #content .shop-more-menu[open] {flex-basis:100%;width:100%}
  body #content .shop-more-menu[open] > :not(summary) {position:static;inset:auto;width:100%;max-width:100%}
  body #content :is(.product-variant-row,.variant-row,.option-product-row,.option-variant-row,.product-model-row) {min-width:0;max-width:100%;gap:8px;flex-wrap:wrap}
  body #content :is(.catalog-cards,.product-base-fields,.product-variants-header,.product-variant-form) {grid-template-columns:minmax(0,1fr)!important}
  body #content .product-list-heading h2 {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  body #content .product-count-pill {flex:none;white-space:nowrap}
  body #content .compact-group-name > b {font-size:20px;line-height:1.3}
  body #content .compact-group-name > span > b {font-size:16px}
  body #content .catalog-basket {position:static;min-width:0;max-width:100%}
  body #content :is(.catalog-product-card,.product-family-card,.model-row) {min-width:0;max-width:100%}
  body #content .qty {display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;min-width:0}
  body #content .qty button {width:44px;height:44px;min-width:44px;padding:8px;flex:none}
  body #content .qty b {min-width:24px;text-align:center}
  body #content .replenishment-order-line {grid-template-columns:minmax(0,1fr)!important;min-width:0;max-width:100%;gap:10px;padding:12px}
  body #content :is(.replenishment-order-line,.order-products) :is(small,span,strong) {overflow-wrap:anywhere;min-width:0}
  body #content .dashboard-chart {grid-template-columns:minmax(0,1fr)!important;padding:14px}
  body #content .profit-chart {height:260px;grid-template-columns:28px minmax(0,1fr);margin:16px 0 30px;min-width:0}
  body #content .phone-chart-controls {display:grid;gap:8px;margin:8px 0 14px;font-size:13px;font-weight:600;max-width:100%}
  body #content .phone-chart-controls select {min-height:46px;font-size:16px;max-width:100%;width:100%}
  body #content .profit-bars {gap:3px;padding:0 3px;min-width:0}
  body #content .profit-hour {min-width:0}
  body #content .profit-hour > small {font-size:10px;writing-mode:vertical-rl;line-height:1.1;overflow:visible}
  body #content .profit-hour > b {font-size:10px}
  body #content :is(.profit-chart-heading,.profit-legend,.profit-metric-switch) {flex-wrap:wrap;max-width:100%;gap:8px}
  body #content .profit-chart-heading {flex-direction:column;align-items:stretch}
  body #content .profit-metric-switch button {min-width:0;flex:1}
  body #content .statistics-dayparts {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body #content .statistics-dayparts > div {padding:10px}
  body #content .statistics-date {width:100%;display:flex;flex-direction:column;align-items:stretch;gap:8px}
  body #content .distribution-layout {display:flex;flex-direction:column;align-items:center;gap:16px}
  body #content .distribution-layout > div {min-width:0;max-width:100%;width:100%}
  body #content .distribution-layout .distribution-ring {width:160px;height:160px;flex:none}
  body #content .distribution-layout p {min-width:0;overflow-wrap:anywhere}
  body #content .ranking-line {grid-template-columns:minmax(0,1fr) 60px 32px;gap:8px;font-size:12px}
  body dialog[open] {position:fixed!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;box-sizing:border-box;width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 24px)!important;min-width:0!important;margin:0!important;overflow:auto!important;padding:14px!important;border-radius:14px;scroll-padding-top:62px;overscroll-behavior:contain}
  body dialog form {max-width:100%;min-width:0;padding:0!important}
  body dialog :is(.section-title,.invoice-customer-grid,.history-filters,.history-delete-grid) {max-width:100%;min-width:0;display:flex;flex-wrap:wrap;gap:10px}
  body dialog .section-title h2 {font-size:20px;overflow-wrap:anywhere}
  body dialog :is(.record-lines,.analytics-grid,.analytics-rankings,.surplus-details-fields,.history-summary) {grid-template-columns:minmax(0,1fr)!important;min-width:0;max-width:100%}
  body dialog :is(table,.analytics-table) {max-width:100%}
  body dialog img {max-width:100%;object-fit:contain}
  .phone-closebar {position:sticky;top:-14px;z-index:20;display:flex;justify-content:flex-end;flex-shrink:0;background:var(--surface);padding:8px 0;margin:-14px 0 12px;border-bottom:1px solid var(--border)}
  body dialog .phone-closebar button {min-width:88px;min-height:44px;margin:0}
  /* Shared notifications: viewport anchoring replaces the desktop centering transform. */
  body :is(#toast,#notificationPopup,.messaging-notice) {
    position:fixed;inset:auto;inset-inline: max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));
    top:max(12px,env(safe-area-inset-top));bottom:auto;transform:none;margin:0;
    box-sizing:border-box;width:auto;min-width:0;max-width:none;
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-wrap:anywhere;white-space:normal;padding:12px;z-index:3000;
  }
  body #toast.toast-modern[style*="display: block"] {display:grid!important;grid-template-columns:40px minmax(0,1fr) 44px;gap:10px;align-items:start;overflow:hidden}
  body #toast {top:auto;bottom:max(12px,env(safe-area-inset-bottom))}
  body #toast strong {min-width:0;max-height:calc(100dvh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;text-align:start;overscroll-behavior:contain}
  body #toast .toast-close {float:none;margin:0;padding:0;width:44px;min-width:44px;height:44px;min-height:44px;align-self:start;justify-self:end}
  body #notificationPopup {grid-template-columns:minmax(0,1fr) 44px;overflow:hidden}
  body #notificationPopup > .notification-close {position:static;grid-column:2;grid-row:1;margin:0;padding:0;width:44px;min-width:44px;height:44px}
  body #notificationPopup > .notification-heading {grid-column:1;grid-row:1;min-width:0;padding:0}
  body #notificationPopup > strong {grid-column:1/-1;padding:0;min-width:0;max-height:20dvh;overflow-y:auto}
  body #notificationPopup > span {grid-column:1/-1;min-width:0;max-height:calc(70dvh - 160px);overflow-y:auto;overscroll-behavior:contain}
  body #notificationPopup > button:last-child {grid-column:1/-1;max-width:100%;white-space:normal}
  body .messaging-notice {overflow:hidden}
  body .messaging-notice > div {min-width:0;max-height:calc(100dvh - 70px);overflow-y:auto}
  body .messaging-notice .messaging-dismiss {flex:0 0 44px;width:44px;height:44px;padding:0;margin:0}
  body :is(#notificationPopup,.messaging-notice) p {overflow-wrap:anywhere}
  body .sale-scan-orb {width:min(330px,90vw);max-width:90vw;max-height:85dvh;padding:20px;overflow:auto}
  body .last-sale-chip {max-width:calc(100vw - 24px);inset-inline:12px;bottom:12px}
  body #content .messaging-page {display:block;padding-bottom:0;min-width:0}
  body #content .messaging-sidebar {max-height:none;padding:14px;gap:12px}
  body #content .messaging-conversations {max-height:60dvh;min-height:120px}
  body #content .messaging-main {display:none;padding:14px;gap:10px}
  body #content .messaging-page.phone-chat-open .messaging-sidebar {display:none}
  body #content .messaging-page.phone-chat-open .messaging-main {display:flex}
  body #content .messaging-page .phone-chat-back {align-self:flex-start;min-height:44px;margin-bottom:4px}
  body #content .messaging-heading {display:block}
  body #content .messaging-heading h2 {font-size:18px;margin-bottom:5px}
  body #content .messaging-messages {height:clamp(220px,42dvh,440px);min-height:180px;padding:10px;gap:12px}
  body #content .messaging-message {max-width:96%;min-width:0;width:auto;padding:10px 12px}
  body #content .messaging-meta {font-size:11px;gap:4px 8px}
  body #content .messaging-message p {font-size:14px}
  body #content .messaging-photo {width:100%;margin:10px 0}
  body #content .messaging-photo img {width:100%;height:auto;max-height:240px;object-fit:contain}
  body #content .messaging-pdf {max-width:100%;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:10px}
  body #content .messaging-file-actions a {display:inline-flex;align-items:center;min-height:44px;padding:6px 4px;font-size:13px}
  body #content .messaging-composer {gap:10px}
  body #content .messaging-composer textarea {min-height:90px;font-size:16px;width:100%}
  body #content .messaging-composer > div {flex-wrap:wrap;gap:10px}
  body #content .messaging-composer small {font-size:12px}
  body #content #messagingSend {min-width:100px;margin-inline-start:auto}
  body #content .messaging-contact {min-height:72px;padding:12px;grid-template-columns:minmax(0,1fr) auto}
  body #content .messaging-contact-title {font-size:14px}
  body #content .messaging-preview {font-size:12px}
  body .app-footer {padding:16px 12px max(20px,env(safe-area-inset-bottom));margin:0;max-width:100%;min-width:0}
  body .app-footer :is(strong,span,small) {white-space:normal;overflow-wrap:anywhere;max-width:100%}
  body :is(.hidden,.role-hidden,[hidden]) {display:none!important}
  body #content #claimDetails {display:none}
  body #phoneClaimDialog .claim-detail {margin:0;padding:0;border:0;box-shadow:none}
  body #phoneClaimDialog .claim-detail-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  body #phoneClaimDialog .claim-item {min-width:0;max-width:100%;overflow-wrap:anywhere}
  body #phoneClaimDialog .actions {display:flex;flex-wrap:wrap;gap:10px}
  body #shopEditDialog form {display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%;min-width:0}
  body #shopEditDialog form > * {grid-column:1/-1!important;min-width:0;max-width:100%}
  body #content .phone-session-card {margin-bottom:16px}
  body #content .phone-access-lock {display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 8px;border:1px solid #d69a39;border-radius:8px;background:#fff1d7;color:#744900;font-size:12px;line-height:1.35;font-weight:600}
  body #content .phone-access-lock svg {flex:0 0 18px;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
  body #content .shop-user-row .phone-access-lock {grid-column:1/-1;justify-self:start}
  body #content .phone-export-restock {display:block;margin:0 0 12px;min-height:44px}
  body #content h3 > .phone-export-restock {margin:8px 0 12px;font-size:13px}
}

/* Correctif DEV5 : zone système iPhone, sans effet sur le desktop. */
@media screen and (max-width:767px), screen and (max-width:960px) and (orientation:landscape) and (pointer:coarse) {
  body #app > header {
    padding-top:calc(8px + env(safe-area-inset-top, 0px));
    padding-left:max(12px, env(safe-area-inset-left, 0px));
    padding-right:max(12px, env(safe-area-inset-right, 0px));
  }
  body.phone-drawer-open #app > main > nav {
    padding-top:calc(12px + env(safe-area-inset-top, 0px));
    padding-left:max(12px, env(safe-area-inset-left, 0px));
    padding-right:max(12px, env(safe-area-inset-right, 0px));
  }
  .phone-nav-heading {top:env(safe-area-inset-top, 0px);}
}