/* REQ-ESV-004: the reused office booking form also stacks in phone preview. */
:root[data-layout="phone"] .visit-book-grid { flex-direction:column; align-items:stretch; }
:root[data-layout="phone"] .visit-book-field,
:root[data-layout="phone"] .visit-book-grid > .btn { width:100%; }
:root[data-layout="phone"] .visit-book-field > .input { width:100% !important; }
/* REQ-OOJ-006: the same field/card layout under forced device profiles. */
:root[data-layout="phone"] .ooj-fields,
:root[data-layout="phone"] .ooj-row dl { grid-template-columns:minmax(0,1fr); }
:root[data-layout="phone"] .ooj { padding:16px; }
:root[data-layout="phone"] .ooj-actions > .md3-button { flex:1 1 160px; }
:root[data-layout="phone"] .gp-sheet.ooj-sheet { left:0;right:0;top:auto;bottom:var(--gp-keyboard-inset,0px);transform:none;width:100%;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] .ooj-handle { display:block; }
:root[data-layout="tablet"] .ooj,
:root[data-layout="desktop"] .ooj { padding:24px; }
/* REQ-JTC-004: forced phone type catch-up mirrors the compact sheet. */
:root[data-layout="phone"] .gp-sheet.jtc-sheet { left:0;right:0;top:auto;bottom:var(--gp-keyboard-inset,0px);
  transform:none;width:auto;padding:16px 16px 0;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] .jtc-sheet::before { display:block; }
/* REQ-BSS-006: keep the billing site batch a bottom sheet in forced phone layouts. */
:root[data-layout="phone"] .gp-sheet.bss-sheet { left:0;right:0;top:auto;bottom:var(--gp-keyboard-inset,0px);
  transform:none;width:auto;padding:16px 16px 0;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] .bss-sheet::before { display:block; }
/* REQ-WHATSNEW-010: mirror the page's 600px gutter in forced layouts. */
:root[data-layout="phone"] .md3-whats-new { padding-left:16px; padding-right:16px; padding-top:16px; }
:root[data-layout="tablet"] .md3-whats-new,
:root[data-layout="desktop"] .md3-whats-new { padding-left:24px; padding-right:24px; padding-top:24px; }
/* REQ-MISSED-007: the shared missed-charge editor remains a phone sheet. */
:root[data-layout="phone"] .mc-scrim { align-items:flex-end; }
:root[data-layout="phone"] .mc-scrim .ctc-sheet { border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] .mc-scrim .ctc-grip { display:block; }
/* REQ-KIOSKENROLL-006: Fleet's phone sheet also follows a forced phone layout. */
:root[data-layout="phone"] #fleet-app { display:block; }
:root[data-layout="phone"] #fleet-app > .fleet-nav { display:none; }
:root[data-layout="phone"] .fleet-wrap { padding-right:16px; padding-left:16px; }
:root[data-layout="phone"] .fleet-grid { grid-template-columns:minmax(0,1fr); }
:root[data-layout="phone"] .fleet-dialog { width:100%; max-width:100%; margin:auto 0 0;
  border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
  padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
:root[data-layout="phone"] .fleet-dialog .fleet-handle { display:block; margin:-20px auto 0; padding:0; font-size:0; border:0; }
:root[data-layout="phone"] .fleet-handle::after { content:""; display:block; width:32px; height:4px; margin:0 auto;
  background:var(--md-sys-color-on-surface-variant); border-radius:var(--md-sys-shape-corner-full); }
:root[data-layout="phone"] .fleet-dialog.fleet-navigation { margin:0; width:min(360px,90vw); height:100dvh; max-height:100dvh;
  border-radius:0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0; }
:root[data-layout="phone"] .fleet-dialog.fleet-navigation .fleet-handle { display:none; }
/* REQ-CLIENTPORTAL-005: the forced phone preview mirrors portal.css. */
/* REQ-READYLIST-009: the billing decision stays a sheet in phone preview. */
:root[data-layout="phone"] .gp-sheet.gp-job-disposition { left:0;right:0;top:auto;bottom:var(--gp-keyboard-inset,0px);transform:none;width:auto;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] .gp-sheet.gp-job-disposition::before { display:block; }
/* REQ-DISPHYG-001: dispatch corrections use a bottom sheet on phones. */
:root[data-layout="phone"] .dbd-sheet { align-items:end; padding:0; }
:root[data-layout="phone"] .dbd-sheet .dbd-panel { box-sizing:border-box; max-height:90dvh; padding-bottom:calc(16px + env(safe-area-inset-bottom)); border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] .dbd-sheet .dbd-panel::before { content:''; display:block; width:32px; height:4px; margin:0 auto 16px; border-radius:var(--md-sys-shape-corner-full); background:var(--md-sys-color-outline); }
/* REQ-CREWWEEK-006: office route reviews remain bottom sheets in phone preview. */
:root[data-layout="phone"] .md3-crew-week { padding:16px; }
:root[data-layout="phone"] .md3-crew-week__sheet { margin:auto auto 0; max-width:100%; border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] .md3-crew-week__sheet::before { display:block; }
/* REQ-CAPTURE-006: Add notes keeps the phone sheet in forced phone previews. */
:root[data-layout="phone"] #view-callactions .ih-overlay.capture-notes { align-items:flex-end; }
:root[data-layout="phone"] #view-callactions .capture-notes .ih-sheet { border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] #view-callactions .capture-grip { display:block; }
/* REQ-PARTS-008: short purchasing tasks use the same sheet in phone preview. */
:root[data-layout="phone"] .jp-backdrop.jp-short-task { padding:0;align-items:flex-end;top:var(--jp-viewport-top,0px);bottom:auto;height:var(--jp-visible-height,100%); }
:root[data-layout="phone"] .jp-short-task .jp-dialog { width:100%;max-width:none;height:auto;max-height:100%;margin:0;border-top-left-radius:var(--md-sys-shape-corner-extra-large);border-top-right-radius:var(--md-sys-shape-corner-extra-large);border-bottom-left-radius:0;border-bottom-right-radius:0; }
:root[data-layout="phone"] .jp-short-task .jp-grip { display:block; }
/* REQ-RECEIPTJOB-005: the shared receipt picker stays a sheet in phone preview. */
:root[data-layout="phone"] .receipt-assignment.ctc-scrim { align-items:flex-end; }
:root[data-layout="phone"] .receipt-assignment .ctc-sheet { border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] .receipt-assignment .ctc-grip { display:block; }
:root[data-layout="phone"] .pt-app.pt-signed-in { grid-template-columns:minmax(0,1fr); }
:root[data-layout="phone"] .pt-header { padding:8px; }
:root[data-layout="phone"] .pt-navigation { display:none; }
:root[data-layout="phone"] .pt-navigation[data-open="true"] { display:block; }
:root[data-layout="phone"] #pt-content { grid-column:1; padding:16px; }
:root[data-layout="phone"] .pt-footer-region { grid-column:1; }
:root[data-layout="phone"] .pt-account { top:auto; bottom:0; left:0; right:0; width:100%; max-height:90dvh; border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }

/* REQ-DEVICE-005: office navigation follows the effective tier; shared app.css stays pinned. */
:root[data-layout] .md3-ws{
  --md3-ws-drawer-width: 280px;
  --md3-ws-rail-width: 88px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
:root[data-layout] .md3-ws-shell .side-nav{
  flex-wrap: nowrap;
  min-height: 0;
  overflow: hidden;
}
:root[data-layout] .md3-ws__sr{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:root[data-layout] .md3-ws__scrim{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 59;
  border: 0;
  padding: 0;
  background: var(--md-sys-color-scrim);
  opacity: var(--md-sys-state-scrim-opacity);
  cursor: pointer;
  transition:
    opacity var(--md-sys-motion-duration-medium2)
      var(--md-sys-motion-easing-standard-decelerate),
    display var(--md-sys-motion-duration-medium2)
      var(--md-sys-motion-easing-standard-decelerate) allow-discrete;
}
:root[data-layout] .md3-ws__scrim[hidden]{
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-standard-accelerate),
    display var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-standard-accelerate) allow-discrete;
}
@starting-style{:root[data-layout] .md3-ws__scrim:not([hidden]){ opacity: 0; }}
:root[data-layout] .md3-ws__menu{
  position: relative;
  isolation: isolate;
  display: none;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  overflow: hidden;
  cursor: pointer;
  transition:
    background-color var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-standard);
}
:root[data-layout] .md3-ws__menu svg{ width: 24px; height: 24px; }
:root[data-layout] .md3-ws__menu:focus-visible{
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
:root[data-layout] .md3-ws__panel{
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
:root[data-layout] .md3-ws__workspace{
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: row;
  justify-content: normal;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition:
    background-color var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-standard),
    opacity var(--md-sys-motion-duration-short3)
      var(--md-sys-motion-easing-standard);
}
:root[data-layout] .md3-ws__workspace::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}
@media (hover: hover) and (pointer: fine){:root[data-layout] .md3-ws__workspace:hover::before{ opacity: var(--md-sys-state-hover-opacity); }}
:root[data-layout] .md3-ws__workspace:active::before{
  opacity: var(--md-sys-state-pressed-opacity);
  transition-duration: var(--md-sys-motion-duration-short1);
}
:root[data-layout] .md3-ws__workspace:focus-visible{
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
:root[data-layout] .md3-ws__workspace[aria-expanded="true"],:root[data-layout] .md3-ws__workspace[data-current="true"]{
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
:root[data-layout] .md3-ws__workspace:disabled{
  opacity: var(--md-sys-state-disabled-opacity);
  cursor: not-allowed;
}
:root[data-layout] .md3-ws__workspace[aria-busy="true"]{ cursor: progress; }
:root[data-layout] .md3-ws__workspace:disabled::before,:root[data-layout] .md3-ws__workspace[aria-busy="true"]::before{ opacity: 0; }
:root[data-layout] .md3-ws__icon{
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
:root[data-layout] .md3-ws__icon svg{ width: 24px; height: 24px; display: block; }
:root[data-layout] .md3-ws__label{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-layout] .md3-ws__count{
  flex: 0 0 auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: 20px;
  font-weight: 600;
  text-align: center;
}
:root[data-layout] .md3-ws__count[hidden]{ display: none; }
:root[data-layout] .md3-ws__chevron{
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: inherit;
}
:root[data-layout] .md3-ws__chevron svg{ width: 18px; height: 18px; display: block; }
:root[data-layout] .md3-ws__group{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 6px 12px;
}
:root[data-layout] .md3-ws__group[hidden]{ display: none; }
:root[data-layout] .md3-ws__destination{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition:
    background-color var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-standard),
    opacity var(--md-sys-motion-duration-short3)
      var(--md-sys-motion-easing-standard);
}
:root[data-layout] .md3-ws__destination::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}
@media (hover: hover) and (pointer: fine){:root[data-layout] .md3-ws__destination:hover::before{ opacity: var(--md-sys-state-hover-opacity); }}
:root[data-layout] .md3-ws__destination:active::before{
  opacity: var(--md-sys-state-pressed-opacity);
  transition-duration: var(--md-sys-motion-duration-short1);
}
:root[data-layout] .md3-ws__destination:focus-visible{
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
:root[data-layout] .md3-ws__destination[aria-current="page"]{
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 600;
}
:root[data-layout] .md3-ws__destination:disabled{
  opacity: var(--md-sys-state-disabled-opacity);
  cursor: not-allowed;
}
:root[data-layout] .md3-ws__destination[aria-busy="true"]{ cursor: progress; }
:root[data-layout] .md3-ws__destination:disabled::before,:root[data-layout] .md3-ws__destination[aria-busy="true"]::before{ opacity: 0; }
:root[data-layout] .md3-ws__external{
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: .75;
}
:root[data-layout] .md3-ws__external svg{ width: 14px; height: 14px; display: block; }
:root[data-layout] .md3-ws__utility{ flex: 0 0 auto; }
:root[data-layout] .md3-ws__glyph{
  flex: 0 0 auto;
  width: 24px;
  text-align: center;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
}
:root[data-layout] .md3-ws__status{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 2px 4px 0;
  padding: 8px 12px;
  border-radius: var(--md-sys-shape-corner-medium);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  text-align: left;
}
:root[data-layout] .md3-ws__status[hidden]{ display: none; }
:root[data-layout] .md3-ws__status .md3-progress{ width: 16px; height: 16px; border-width: 2px; }
:root[data-layout] .md3-ws__retry{
  margin-inline-start: auto;
  padding: 0 14px;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
}
:root[data-layout] .md3-ws-shell .side-nav{flex-direction:column;gap:6px;border-inline-end:1px solid var(--border);}
:root[data-layout] .md3-ws-shell .nav-brand-row{order:0;margin:0 0 18px;}
:root[data-layout] .md3-ws-shell .md3-ws{order:0;}
:root[data-layout] .md3-ws-shell .md3-ws__utility{order:0;margin-inline-start:0;width:100%;padding:0 14px;justify-content:normal;}
:root[data-layout] .md3-ws-shell .md3-ws__utility .md3-ws__label{position:static;width:auto;height:auto;clip-path:none;white-space:nowrap;}
:root[data-layout] .md3-ws .md3-ws__count{position:static;inset:auto;}
:root[data-layout] .md3-ws .md3-ws__panel{position:static;z-index:auto;inset:auto;width:auto;max-height:none;padding:0;overflow-x:auto;overflow-y:auto;overscroll-behavior-y:contain;border-start-end-radius:0;border-end-end-radius:0;background:transparent;box-shadow:none;transform:none;opacity:1;transition:none;pointer-events:auto;}
:root[data-layout] .md3-ws .md3-ws__group{position:static;z-index:auto;overflow:visible;inset:auto;width:auto;max-height:none;overscroll-behavior-y:auto;border-start-end-radius:0;border-end-end-radius:0;background:transparent;box-shadow:none;transform:none;opacity:1;transition:none;}
/* Restore compact identity defaults before applying the effective tablet rail. */
:root[data-layout] .md3-ws-shell .nav-compact-user{order:0;gap:6px;}
/* REQ-APPBAR-001..006: undo every phone-width app-bar rule app.css applies, so
   a forced tablet/desktop profile on a narrow window keeps the wide chrome;
   the phone tier below re-applies them for a forced phone profile. */
:root[data-layout] .md3-ws-shell .nav-brand-row{display:flex;}
:root[data-layout] .md3-ws-shell .nav-compact-title{display:none;}
:root[data-layout] .md3-ws-shell .side-nav > .md3-ws__utility{display:flex;}
:root[data-layout] .md3-ws-shell .topbar{display:flex;}
:root[data-layout] .md3-account-sheet__scrim{background-color:transparent;opacity:1;}
:root[data-layout] .md3-account-sheet__surface{width:min(320px, calc(100vw - 32px));max-height:calc(100dvh - 32px);margin-bottom:16px;margin-left:16px;padding-bottom:8px;border-end-start-radius:var(--md-sys-shape-corner-extra-large);border-end-end-radius:var(--md-sys-shape-corner-extra-large);}
:root[data-layout="phone"] .md3-ws-shell .md3-ws__utility{
    width: 48px;
    min-width: 48px;
    padding: 0;
    justify-content: center;
  }
:root[data-layout="phone"] .md3-ws-shell .md3-ws__utility .md3-ws__label{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
:root[data-layout="tablet"] .md3-ws-shell .md3-ws__utility{
    width: 48px;
    min-width: 48px;
    padding: 0;
    justify-content: center;
  }
:root[data-layout="tablet"] .md3-ws-shell .md3-ws__utility .md3-ws__label{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
:root[data-layout="desktop"] .app-shell.md3-ws-shell{
    grid-template-columns: var(--md3-ws-drawer-width, 280px) minmax(0, 1fr);
    grid-template-rows: 100vh;
  }
:root[data-layout="desktop"] .md3-ws-shell .side-nav{
    display: flex;
    align-items: stretch;
    padding: 18px 14px;
  }
:root[data-layout="desktop"] .md3-ws-shell .nav-collapsible{ display: flex; }
:root[data-layout="desktop"] .md3-ws-shell .nav-compact-user{ display: none; }
:root[data-layout="desktop"] .md3-ws-shell .brand-mark-mini{ display: none; }
:root[data-layout="desktop"] .md3-ws-shell .nav-brand-row{ justify-content: flex-start; margin-bottom: 24px; }
:root[data-layout="tablet"] .app-shell.md3-ws-shell{
    grid-template-columns: var(--md3-ws-rail-width, 88px) minmax(0, 1fr);
    grid-template-rows: 100vh;
  }
:root[data-layout="tablet"] .md3-ws-shell .side-nav{
    display: flex;
    align-items: stretch;
    padding: 12px 8px;
  }
:root[data-layout="tablet"] .md3-ws-shell .nav-collapsible{ display: none; }
:root[data-layout="tablet"] .md3-ws-shell .brand-mark-mini{ display: grid; }
:root[data-layout="tablet"] .md3-ws-shell .nav-brand-row{ justify-content: center; }
:root[data-layout="tablet"] .md3-ws-shell .nav-compact-user{
    display: flex;
    flex-direction: column;
    margin-top: auto;
    gap: 6px;
  }
:root[data-layout="tablet"] .md3-ws .md3-ws__workspace{
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    min-height: 62px;
    border-radius: var(--md-sys-shape-corner-large);
    font-size: var(--md-sys-typescale-label-medium-size);
    line-height: var(--md-sys-typescale-label-medium-line-height);
    text-align: center;
  }
:root[data-layout="tablet"] .md3-ws .md3-ws__label{ white-space: normal; text-overflow: clip; }
:root[data-layout="tablet"] .md3-ws .md3-ws__chevron{ display: none; }
:root[data-layout="tablet"] .md3-ws .md3-ws__count{
    position: absolute;
    inset-block-start: 4px;
    inset-inline-end: 10px;
  }
:root[data-layout="tablet"] .md3-ws .md3-ws__group{
    position: fixed;
    z-index: 61;
    inset-inline-start: var(--md3-ws-rail-width, 88px);
    inset-block-start: 0;
    width: min(300px, calc(100vw - var(--md3-ws-rail-width, 88px)));
    max-height: 100vh;
    max-height: 100dvh;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    border-start-end-radius: var(--md-sys-shape-corner-large);
    border-end-end-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-surface-container-high);
    box-shadow: var(--md-sys-elevation-level2);
    transform: translateX(0);
    opacity: 1;
    transition:
      transform var(--md-sys-motion-duration-medium1)
        var(--md-sys-motion-easing-emphasized-decelerate),
      opacity var(--md-sys-motion-duration-short4)
        var(--md-sys-motion-easing-standard-decelerate);
  }
@starting-style{:root[data-layout="tablet"] .md3-ws .md3-ws__group:not([hidden]){
      transform: translateX(-12px);
      opacity: 0;
    }}
:root[data-layout="tablet"] .md3-ws__scrim{ display: block; }
:root[data-layout="tablet"] .md3-ws__scrim[hidden]{ display: none; }
:root[data-layout="phone"] .app-shell.md3-ws-shell{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
:root[data-layout="phone"] .md3-ws-shell .side-nav{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-inline-end: 0;
    overflow: visible;
  }
:root[data-layout="phone"] .md3-ws-shell .nav-collapsible{ display: none; }
:root[data-layout="phone"] .md3-ws-shell .nav-brand-row{ display: none; }
:root[data-layout="phone"] .md3-ws-shell .md3-ws{ order: 1; }
:root[data-layout="phone"] .md3-ws-shell .nav-compact-title{ display: block; order: 2; }
:root[data-layout="phone"] .md3-ws-shell .side-nav > .md3-ws__utility{ display: none; }
:root[data-layout="phone"] .md3-ws-shell .md3-ws__panel .md3-ws__utility{
    order: 0;
    width: 100%;
    min-width: 0;
    margin-inline-start: 0;
    padding: 0 14px;
    justify-content: normal;
  }
:root[data-layout="phone"] .md3-ws-shell .md3-ws__panel .md3-ws__utility .md3-ws__label{
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    clip-path: none;
  }
:root[data-layout="phone"] .md3-ws-shell .nav-compact-user{
    display: flex;
    order: 4;
    flex-direction: row;
    margin-top: 0;
    gap: 0;
  }
:root[data-layout="phone"] .md3-ws-shell .topbar{ display: none; }
:root[data-layout="phone"] .md3-field-bar{position:fixed;inset:auto 0 0;flex-direction:row;height:calc(80px + env(safe-area-inset-bottom, 0px));padding:8px 16px calc(8px + env(safe-area-inset-bottom, 0px));}
:root[data-layout="phone"] .md3-field-bar button{flex:1 1 0;width:auto;}
:root[data-layout="phone"] body.has-field-shell .view-root{padding-bottom:calc(160px + env(safe-area-inset-bottom, 0px));}
:root[data-layout="phone"] body.has-field-shell .ai-bar{bottom:calc(88px + env(safe-area-inset-bottom, 0px));}
:root[data-layout="phone"] body.feedback-office.has-field-shell{--fab-base:calc(104px + env(safe-area-inset-bottom, 0px));}
:root[data-layout="phone"] body.tech-app .t-shell-drawer{display:none;}
:root[data-layout="phone"] body.tech-app .t-main{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;}
:root[data-layout="phone"] body.tech-app .t-vcard.t-route-card{column-gap:8px;}
:root[data-layout="phone"] body.tech-app .t-chrome-sheet .t-shell-drawer{display:flex;}
:root[data-layout="phone"] .md3-account-sheet__scrim{
    background-color: var(--md-sys-color-scrim);
    opacity: var(--md-sys-state-scrim-opacity);
  }
:root[data-layout="phone"] .md3-account-sheet__surface{
    width: 100%;
    max-height: 85dvh;
    margin-bottom: 0;
    margin-left: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
:root[data-layout="phone"] .md3-ws .md3-ws__menu{ display: inline-flex; align-items: center; justify-content: center; }
:root[data-layout="phone"] .md3-ws{
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    overflow: visible;
  }
:root[data-layout="phone"] .md3-ai-status { margin: 16px; }
:root[data-layout="phone"] .md3-ws__scrim{ z-index: 95; }
:root[data-layout="phone"] .md3-ws:not([data-open="true"]) .md3-ws__panel{
    display: none;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--md-sys-motion-duration-short4)
        var(--md-sys-motion-easing-emphasized-accelerate),
      opacity var(--md-sys-motion-duration-short2)
        var(--md-sys-motion-easing-standard-accelerate),
      display var(--md-sys-motion-duration-short4)
        var(--md-sys-motion-easing-emphasized-accelerate) allow-discrete;
  }
:root[data-layout="phone"] .md3-ws .md3-ws__panel{
    transform: translateX(0);
    opacity: 1;
    transition:
      transform var(--md-sys-motion-duration-medium2)
        var(--md-sys-motion-easing-emphasized-decelerate),
      opacity var(--md-sys-motion-duration-medium1)
        var(--md-sys-motion-easing-standard-decelerate),
      display var(--md-sys-motion-duration-medium2)
        var(--md-sys-motion-easing-emphasized-decelerate) allow-discrete;
    position: fixed;

    z-index: 96;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 86vw);
    max-height: 100vh;
    max-height: 100dvh;
    padding: 16px 12px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    border-start-end-radius: var(--md-sys-shape-corner-large);
    border-end-end-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md-sys-elevation-level3);
  }
:root[data-layout="phone"] .md3-ws .md3-ws__panel[hidden]{ display: none; }
@starting-style{:root[data-layout="phone"] .md3-ws[data-open="true"] .md3-ws__panel{
      transform: translateX(-100%);
      opacity: 0;
    }}
:root[data-layout="phone"] .md3-ws__scrim{ display: block; }
:root[data-layout="phone"] .md3-ws__scrim[hidden]{ display: none; }

/* CALL-14: a phone keeps one full-screen conversation. */
:root[data-layout="phone"] #view-comms .ct-layout{display:block;}
:root[data-layout="phone"] #view-comms [data-cv-pane]{display:none;}
:root[data-layout="phone"] #view-comms .ct-bubble{max-width:84%;}
:root[data-layout="phone"] #view-comms .ct-composer{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
:root[data-layout="phone"] #view-comms .ct-chip{flex:1 1 0;}
:root[data-layout="phone"] .tt-grid{display:block;}
:root[data-layout="phone"] .tt-wrap{padding:16px;}
:root[data-layout="phone"] .tt-primary{position:sticky;bottom:0;}
:root[data-layout="phone"] .tt-actions button{flex:1 1 auto;}
:root[data-layout="phone"] #view-comms .cv-row{min-height:72px;padding:8px 4px;}
:root[data-layout="phone"] #view-comms .cv-chip{min-height:48px;flex:1 1 auto;}
:root[data-layout="phone"] #view-comms .ct-more[open] .ct-menu-scrim{display:block;position:fixed;inset:0;z-index:6;border:0;background:var(--md-sys-color-scrim);opacity:var(--md-sys-state-scrim-opacity);}
:root[data-layout="phone"] #view-comms .ct-menu{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:7;padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px));border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;}
:root[data-layout="phone"] #view-comms .ct-menu::before{content:'';width:32px;height:4px;margin:0 auto 12px;background:var(--md-sys-color-on-surface-variant);border-radius:var(--md-sys-shape-corner-full);}
/* REQ-PHOTOLINK-004: the office photo editor is a bottom sheet on phones. */
:root[data-layout="phone"] .ph-editor{margin:auto 0 0;width:100%;max-height:90dvh;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
:root[data-layout="phone"] .ph-link-row{flex-wrap:wrap}
/* REQ-ARTBILL-003: the billing review uses the physical phone sheet shape. */
:root[data-layout="phone"] .invoice-editor-backdrop{align-items:flex-end;padding:0;}
:root[data-layout="phone"] .invoice-editor{width:100%;max-height:90dvh;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;}
:root[data-layout="phone"] .invoice-editor-head{position:relative;padding-top:20px;}
:root[data-layout="phone"] .invoice-editor-head:before{content:'';width:32px;height:4px;border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-on-surface-variant);position:absolute;top:8px;left:calc(50% - 16px);}
/* REQ-PARTS-012: forced phones keep the same parts rows as physical phones. */
:root[data-layout="phone"] body.tech-app .t-part-line { flex-wrap: wrap; }
:root[data-layout="phone"] body.tech-app .t-part-line > span:first-child { flex-basis: 100%; overflow-wrap: anywhere; }
:root[data-layout="phone"] body.tech-app .t-part-line > .t-qty,
:root[data-layout="phone"] body.tech-app .t-part-line > .t-price,
:root[data-layout="phone"] body.tech-app .t-part-line > .pill { flex: 0 0 auto; white-space: nowrap; }
/* REQ-MAILSEARCH-003: reviewed attachment resends stay a phone bottom sheet. */
:root[data-layout="phone"] .mailbox-review-host .ih-overlay{align-items:flex-end;padding:0;}
:root[data-layout="phone"] .mailbox-review-host .ih-sheet{border-top-left-radius:var(--md-sys-shape-corner-extra-large);border-top-right-radius:var(--md-sys-shape-corner-extra-large);border-bottom-left-radius:0;border-bottom-right-radius:0;}
:root[data-layout="phone"] .mailbox-review-host .ih-sheet::before{display:block;}
:root[data-layout="phone"] .ph-public main{padding:16px}
:root[data-layout="phone"] .ph-link-row{flex-wrap:wrap}
:root[data-layout="phone"] .cqa-sheet[data-cqa-sheet="file"] {
  top: auto;
  bottom: 0;
  transform: none;
}
:root[data-layout="phone"] .cqa-sheet[data-cqa-sheet="file"] .cqa-body,
:root[data-layout="phone"] .cqa-sheet[data-cqa-sheet="file"] .cqa-head,
:root[data-layout="phone"] .cqa-sheet[data-cqa-sheet="file"] .cqa-actions {
  padding-left: 16px;
  padding-right: 16px;
}
/* REQ-TRAIL-003: the payroll evidence panel also follows forced phone profiles. */
:root[data-layout="phone"] .md3-payroll-trail {
  inset: auto 0 0;
  width: 100%;
  height: 90dvh;
  max-height: 90dvh;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
}
:root[data-layout="phone"] .md3-payroll-trail__layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
:root[data-layout="phone"] .md3-payroll-trail__map { height: 260px; }
/* REQ-TRAIL-004: allocation decisions dock like the physical phone sheet. */
:root[data-layout="phone"] .md3-payroll-decision {
  position: fixed;
  inset: auto 0 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
}
:root[data-layout="phone"] .md3-payroll-decision .ts-modal-panel {
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* REQ-REACH-008: the forced phone profile uses the same message bottom sheet. */
:root[data-layout="phone"] #view-callactions .ih-overlay--reach { align-items:flex-end; padding:0; }
:root[data-layout="phone"] #view-callactions .ih-sheet.ih-sheet--reach {
  border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
}

/* REQ-SRCHCALL-003: forced phone search uses the same bottom sheet. */
:root[data-layout="phone"] .ctc-scrim.md3-customer-call-scrim { align-items:flex-end; }
:root[data-layout="phone"] .ctc-sheet.md3-customer-call-host { border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] body.tech-app .t-sheet.md3-customer-call-host { top:auto; bottom:0; left:0; right:0; transform:none; border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
:root[data-layout="phone"] .md3-call-search-grip { display:block; }
/* REQ-BES-007: forced phones keep billing paperwork in the bottom sheet. */
:root[data-layout="phone"] .gp-sheet.brw-evidence-sheet {
  left:0; right:0; top:auto; bottom:var(--gp-keyboard-inset,0px);
  transform:none; width:100%; padding-inline:16px;
  border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
}
:root[data-layout="phone"] .bes-handle { display:block; }
/* REQ-PCO-004: forced phone profiles keep the promise criteria and sheet compact. */
:root[data-layout="phone"] #view-decisions .pco-fields { grid-template-columns:minmax(0,1fr); }
:root[data-layout="phone"] .pco-handle { display:block; }
:root[data-layout="phone"] .gp-sheet.pco-confirm { left:0; right:0; top:auto; bottom:var(--gp-keyboard-inset,0px); transform:none; width:100%; border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
/* REQ-OTS-008: the shared site picker and creator also honor forced phones. */
:root[data-layout="phone"] .lc-site-picker-backdrop,
:root[data-layout="phone"] .re-backdrop.re-site-create-backdrop { align-items:flex-end; padding:0; }
:root[data-layout="phone"] .lc-site-picker,
:root[data-layout="phone"] .re-panel.re-site-create {
  width:100%; padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
}
:root[data-layout="phone"] .lc-site-handle { display:block; }
:root[data-layout="phone"] .re-site-create .re-grid { grid-template-columns:1fr; }
/* REQ-MCP-308: personal act confirmation follows the forced phone profile. */
html[data-layout="phone"] .ai-act-confirm { margin:auto auto 0; max-width:100%; border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; }
html[data-layout="phone"] .ai-act-confirm::before { display:block; }