/* Scoped to the phone shell: five tool groups, one shallow palette, large consistent actions. */
html.phone #viewer #tp { display: none !important; }
html.phone #viewer #undowrap { display: none !important; }
html.phone:has(#viewer.on) #ios-install-banner { display: none !important; }
html.phone #viewer #statusbar { position: fixed !important; top: auto !important; bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important; left: max(10px, env(safe-area-inset-left)) !important; right: max(10px, env(safe-area-inset-right)) !important; transform: none !important; min-height: 36px !important; max-height: 64px; padding: 8px 12px !important; border-radius: 10px !important; background: var(--surf, #181713) !important; color: var(--txt, #f2ebe0) !important; border: 1px solid var(--bdr, #4a4636); box-shadow: 0 3px 12px #0004; z-index: 84 !important; }
html.phone #viewer #statusbar #statusmsg { font-size: 12px; line-height: 16px; white-space: normal !important; color: var(--txt, #f2ebe0); }
html.phone #viewer #statusbar button { display: none !important; }
html.phone #viewer #toolBadge { display: none !important; }
html.phone #fieldViewName, html.phone #fieldFavoriteText { font-size: 16px; min-height: 44px; }
html.phone #fieldToolBar { position: absolute; z-index: 85; bottom: 0; left: 0; right: 0; background: var(--surf, #181713); border-top: 1px solid var(--bdr, #4a4636); padding: 4px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
html.phone #fieldToolBar .field-tool-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
html.phone #fieldToolBar .field-tool-actions { display: flex; justify-content: flex-end; gap: 4px; border-bottom: 1px solid var(--bdr, #4a4636); padding-bottom: 4px; margin-bottom: 4px; }
html.phone #fieldToolBar button { min-height: 44px; min-width: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--txt, #f2ebe0); font: 600 12px 'Barlow', sans-serif; padding: 4px 6px; }
html.phone #fieldToolBar button[aria-pressed="true"] { background: var(--surf3, #302c22); color: var(--acc, #f97316); box-shadow: inset 0 -2px var(--acc, #f97316); }
html.phone #fieldToolBar button:disabled { opacity: .4; }
html.phone #fieldToolBar button:focus-visible { outline: 2px solid var(--acc, #f97316); outline-offset: -2px; }
html.phone #fieldToolBar .field-tool-groups button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; font-size: 12px; padding: 3px 0; white-space: nowrap; }
html.phone #fieldToolBar .field-tool-icon { height: 18px; display: block; }
html.phone #fieldToolPalette { position: absolute; z-index: 95; bottom: calc(126px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 10px; max-height: 55dvh; overflow-y: auto; padding: 8px; background: var(--surf, #181713); color: var(--txt, #f2ebe0); border: 1px solid var(--bdr, #4a4636); border-radius: 12px; box-shadow: 0 8px 30px #0008; }
html.phone #fieldToolPalette .field-palette-heading { padding: 6px 10px 10px; color: var(--muted, #aaa); font: 600 13px 'Barlow', sans-serif; }
html.phone #fieldToolPalette button { display: block; width: 100%; min-height: 46px; padding: 10px; text-align: left; border: 0; border-radius: 6px; background: transparent; color: inherit; font: 600 16px 'Barlow', sans-serif; }
html.phone #fieldToolPalette button[aria-pressed="true"] { color: var(--acc, #f97316); background: var(--surf3, #302c22); }
html.phone #fieldToolPalette button:focus-visible { outline: 2px solid var(--acc, #f97316); }
html.phone #viewer .vbody { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
@media (orientation: landscape) and (max-height: 450px) {
  html.phone #fieldToolBar { display: flex; align-items: center; gap: 8px; }
  html.phone #fieldToolBar .field-tool-groups { flex: 1; }
  html.phone #fieldToolBar .field-tool-actions { order: 2; border: 0; margin: 0; padding: 0; }
  html.phone #fieldToolBar .field-tool-actions button { font-size: 11px; padding: 3px; }
  html.phone #fieldToolPalette, html.phone #viewer #statusbar { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  html.phone #viewer .vbody { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}

/* More menu: it was positioned to the screen bottom, so with the field tool bar it ran behind the bar and its
   last items couldn't be reached. Sit above the bar, fit the space left under the top bar, scroll inside. */
html.phone #viewer .vh-more-menu {
  bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(var(--app-h, 100dvh) - 126px - 84px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  z-index: 96 !important;
}
@media (orientation: landscape) and (max-height: 450px) {
  html.phone #viewer .vh-more-menu {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--app-h, 100dvh) - 72px - 64px) !important;
  }
}

/* Set scale cards (2026-10-20): small, over the sheet, instead of the full Set Scale window. */
html.phone #fieldToolPalette.field-scale-card { padding: 8px 10px 6px; }
html.phone #fieldToolPalette.field-scale-card.kb-up { position: fixed; max-height: 50dvh; }
html.phone #fieldToolPalette.field-scale-card .field-palette-heading { padding: 4px 2px 8px; color: var(--txt, #f2ebe0); font: 700 15px 'Barlow', sans-serif; }
html.phone #fieldToolPalette .field-scale-primary { text-align: center; background: var(--acc, #f97316); color: #1a1208; border-radius: 10px; margin-bottom: 10px; }
html.phone #fieldToolPalette .field-scale-label { padding: 0 2px 6px; color: var(--muted, #aaa); font: 600 12px 'Barlow', sans-serif; }
html.phone #fieldToolPalette .field-scale-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
html.phone #fieldToolPalette .field-scale-chips button { width: auto; min-height: 44px; padding: 6px 2px; text-align: center; font-size: 14px; background: var(--surf3, #302c22); border: 1px solid var(--bdr, #4a4636); border-radius: 8px; white-space: nowrap; }
html.phone #fieldToolPalette .field-scale-type { display: flex; gap: 6px; margin-bottom: 6px; }
html.phone #fieldToolPalette .field-scale-type input { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--bdr, #4a4636); background: var(--surf2, #221f18); color: inherit; }
html.phone #fieldToolPalette .field-scale-type .field-scale-set { width: auto; min-width: 72px; text-align: center; background: var(--acc, #f97316); color: #1a1208; border-radius: 8px; }
html.phone #fieldToolPalette .field-scale-all { min-height: 44px; padding: 6px 2px; font-size: 14px; }
html.phone #fieldToolPalette .field-scale-all[aria-pressed="true"] { background: transparent; }
html.phone #fieldToolPalette .field-scale-links { display: flex; gap: 4px; border-top: 1px solid var(--bdr, #4a4636); margin-top: 4px; padding-top: 2px; }
html.phone #fieldToolPalette .field-scale-links button { flex: 1; width: auto; min-height: 44px; text-align: center; font-size: 14px; color: var(--muted, #cfc6b8); }
html.phone #fieldToolPalette .field-scale-chips.field-scale-chips-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html.phone #fieldToolPalette .field-scale-secondary { text-align: center; border: 1px solid var(--bdr, #4a4636); background: var(--surf3, #302c22); border-radius: 10px; margin-bottom: 8px; }