/* Independent of the site's breakpoints; eligibility follows physical phone size. */
html[data-display-phone] body { padding-top: var(--display-mode-height, 48px); }
#display-mode-bar {
  position: fixed; z-index: 1000; box-sizing: border-box; height: 48px;
  transform-origin: top left; display: flex; align-items: center; justify-content: center;
  padding: 0 12px; gap: 12px; border-bottom: 1px solid var(--line, #d8dfd2);
  background: var(--paper, #fbfbf4); color: var(--nav, #17472f);
  font: 13px/1.3 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  pointer-events: auto; text-size-adjust: none; -webkit-text-size-adjust: none;
}
#display-mode-bar[hidden] { display: none; }
#display-mode-bar [role="group"] { display: flex; height: 44px; gap: 4px; align-items: center; }
#display-mode-bar button {
  box-sizing: border-box; min-width: 76px; min-height: 44px; height: 44px;
  font: inherit; font-weight: 600; padding: 0 14px; border: 0; border-radius: 6px;
  color: inherit; background: transparent; cursor: pointer;
}
#display-mode-bar button[aria-pressed="true"] { background: var(--soft, #edf2e7); text-decoration: underline; text-underline-offset: 4px; }
#display-mode-bar button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
#display-mode-bar .display-mode-status { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* Reserve space for each shell's existing fixed/sticky surfaces. */
html[data-display-phone][data-display-host="amc"] body .search-bar,
html[data-display-phone][data-display-host="amc"] #sidebar-shell {
  top: var(--display-mode-height);
}
html[data-display-phone][data-display-host="amc"] #sidebar-shell { height: calc(100dvh - var(--display-mode-height)); }
html[data-display-phone][data-display-host="amc"] #menu-backdrop { top: var(--display-mode-height); }
html[data-display-phone][data-display-host="amc"] dialog[open] {
  max-height: calc(100dvh - var(--display-mode-height) - 24px);
}
@media print {
  #display-mode-bar { display: none !important; }
  html[data-display-phone] body { padding-top: 0; }
}
html[data-display-phone][data-display-host="amc"] .skip:focus { top: calc(var(--display-mode-height) + 8px); }
html[data-display-phone][data-display-host="amc"] #sidebar-flyout { max-height: calc(100dvh - var(--display-mode-height) - 16px); }