/* RF SIM mobile and touch layer.
 *
 * Every rule here is scoped to html[data-form-factor="phone|tablet"] or
 * html[data-input="coarse"] (set by src/bootstrap/form-factor.js), so the
 * desktop layout never receives it. Loaded after styles.css so it can override
 * the legacy width-based phone rules, which hid the imagery, AI and settings
 * controls outright.
 */

/* Compact Sensors workspace: selectors and one affiliation at a time leave
   the remaining screen for sensor summaries and actionable visibility rows. */
:root[data-form-factor="phone"] #sensorsView .sensors-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.85fr) 44px;
  gap: 6px !important;
  padding: 8px;
  align-items: center;
  overflow: visible;
}

:root[data-form-factor="phone"] #sensorsView .sensors-toolbar > .to-toolbar-section {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

:root[data-form-factor="phone"] #sensorsView .workspace-phase-carousel-section { grid-column: 1 / -1; grid-row: 1; }
:root[data-form-factor="phone"] #sensorsView .sensors-view-toggle-section { grid-column: 1 / 3; grid-row: 2; }
:root[data-form-factor="phone"] #sensorsView .sensors-toolbar-actions-right { grid-column: 3; grid-row: 2; }
:root[data-form-factor="phone"] #sensorsView .sensors-mobile-affiliation { grid-column: 1 / -1; grid-row: 3; }
:root[data-form-factor="phone"] #sensorsView .sensors-capability-legend { grid-column: 1 / -1; grid-row: 4; }
:root[data-form-factor="phone"] #sensorsView .sensors-evaluation-status,
:root[data-form-factor="phone"] #sensorsView .sensors-spectrogram-toolbar-summary,
:root[data-form-factor="phone"] #sensorsView .sensors-spectrum-overlay-control { grid-column: 1 / -1; }

:root[data-form-factor="phone"] #sensorsView .sensors-toolbar:not(:has(.workspace-phase-carousel-section:not(.hidden))) .sensors-view-toggle-section { grid-column: 1 / 3; }

:root[data-form-factor="phone"] #sensorsPhaseTabs { display: block; position: relative; width: 100%; }
:root[data-form-factor="phone"] #sensorsPhaseTabs > :not(.sensors-mobile-phase-select):not(.sensors-mobile-phase-label) { display: none; }
:root[data-form-factor="phone"] #sensorsPhaseTabs .sensors-mobile-phase-select {
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 6px;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  background: var(--control-bg);
  color: transparent;
  font: inherit;
  font-size: 16px;
  text-overflow: ellipsis;
}
:root[data-form-factor="phone"] #sensorsPhaseTabs .sensors-mobile-phase-select option { color: var(--control-text); background: var(--control-bg); }
:root[data-form-factor="phone"] #sensorsPhaseTabs .sensors-mobile-phase-label { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 32px 0 18px; pointer-events: none; font-size: 16px; color: var(--control-text); }
:root[data-form-factor="phone"] #sensorsPhaseTabs .sensors-mobile-phase-label::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--phase-color); }
:root[data-form-factor="phone"] #sensorsPhaseTabs .sensors-mobile-phase-number { flex: 0 0 auto; color: var(--phase-color); }
:root[data-form-factor="phone"] #sensorsPhaseTabs .sensors-mobile-phase-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
:root[data-form-factor="phone"] #sensorsPhaseTabs .sensors-mobile-phase-label svg { position: absolute; right: 10px; width: 16px; height: 16px; color: var(--text-muted); }

:root[data-form-factor="phone"] #sensorsView .sensors-view-toggle-section > .to-toolbar-label { display: none; }
:root[data-form-factor="phone"] #sensorsView .sensors-display-menu-btn {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 8px;
  font-size: 16px;
}
:root[data-form-factor="phone"] #sensorsView .sensors-toolbar.is-views-compact .sensors-display-toggle {
  display: none;
  left: 0;
  right: auto;
  height: auto;
  width: max-content;
  min-width: 152px;
  border-radius: 6px;
}
:root[data-form-factor="phone"] #sensorsView .sensors-toolbar.is-views-compact .sensors-display-toggle.is-open { display: flex; }
:root[data-form-factor="phone"] #sensorsView .sensors-toolbar.is-views-compact .sensors-display-toggle .topo-display-btn { min-height: 44px; height: 44px; width: 100%; border-radius: 6px; }

:root[data-form-factor="phone"] #sensorsView #sensorsAddBtn {
  flex: 0 0 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 6px;
}
:root[data-form-factor="phone"] #sensorsView .sensors-add-label { display: none; }
:root[data-form-factor="phone"] #sensorsView .sensors-add-icon { display: flex; align-items: center; gap: 1px; }
:root[data-form-factor="phone"] #sensorsView .sensors-add-icon > span { font-size: 18px; font-weight: 500; }
:root[data-form-factor="phone"] #sensorsView .sensors-add-icon svg { width: 24px; height: 24px; }

:root[data-form-factor="phone"] #sensorsView .sensors-mobile-affiliation { display: flex; gap: 4px; }
:root[data-form-factor="phone"] #sensorsView .sensors-mobile-affiliation button {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  border-radius: 6px;
  font-size: 13px;
  --sensor-filter-color: var(--text-secondary);
  color: var(--sensor-filter-color);
  border-color: color-mix(in srgb, var(--sensor-filter-color) 45%, var(--control-border));
}
:root[data-form-factor="phone"] #sensorsView .sensors-mobile-affiliation button[data-sensors-lane="friendly"] { --sensor-filter-color: var(--friendly); }
:root[data-form-factor="phone"] #sensorsView .sensors-mobile-affiliation button[data-sensors-lane="hostile"] { --sensor-filter-color: var(--enemy); }
:root[data-form-factor="phone"] #sensorsView .sensors-mobile-affiliation button[aria-pressed="true"] { background: color-mix(in srgb, var(--sensor-filter-color) 14%, var(--control-bg)); border-color: var(--sensor-filter-color); color: var(--sensor-filter-color); }
:root[data-form-factor="phone"] #sensorsView .sensors-mobile-affiliation [data-sensors-lane-count] { color: inherit; opacity: 0.8; font-variant-numeric: tabular-nums; }
:root[data-form-factor="phone"] #sensorsView.is-spectrum-display .sensors-mobile-affiliation { display: none; }
:root[data-form-factor="phone"] #sensorsView .sensors-capability-legend { justify-content: flex-start; gap: 12px; min-height: 20px; }
:root[data-form-factor="phone"] #sensorsView .sensors-capability-legend .to-toolbar-label { display: none; }
:root[data-form-factor="phone"] #sensorsView .sensors-capability-legend-item { font-size: 11px; }
:root[data-form-factor="phone"] #sensorsView .sensors-evaluation-status { font-size: 11px; min-height: 18px; }

:root[data-form-factor="phone"] #sensorsView:not(.is-spectrum-display) .sensors-world { display: block; height: auto; min-height: 100%; padding: 8px; }
:root[data-form-factor="phone"] #sensorsView:not(.is-spectrum-display) .affiliation-card-partition { width: 100%; max-width: none; min-width: 0; margin: 0 0 8px; padding: 0; border: 0; border-radius: 0; background: transparent; }
:root[data-form-factor="phone"] #sensorsView .affiliation-card-partition-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
:root[data-form-factor="phone"] #sensorsView[data-sensors-lane="friendly"] .affiliation-card-partition:not([data-affiliation-workspace="friendly"]),
:root[data-form-factor="phone"] #sensorsView[data-sensors-lane="hostile"] .affiliation-card-partition:not([data-affiliation-workspace="hostile"]) { display: none; }
:root[data-form-factor="phone"] #sensorsView:not([data-sensors-lane="all"]) .affiliation-card-partition-header { display: none; }
:root[data-form-factor="phone"] #sensorsView .sensors-mobile-filter-empty:not(.hidden) { display: block; margin: 12px; font-size: 13px; color: var(--text-muted); }
:root[data-form-factor="phone"] #sensorsView.is-spectrum-display .sensors-mobile-filter-empty { display: none; }

:root[data-form-factor="phone"] #sensorsView .sensors-world .sensor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 6px;
  box-shadow: none;
  transform: none;
}
:root[data-form-factor="phone"] #sensorsView .sensor-card .emitters-card-media { position: absolute; left: 8px; top: 8px; width: 60px; height: 64px; min-height: 0; max-height: none; aspect-ratio: auto; padding: 2px; margin: 0; border-radius: 4px; }
:root[data-form-factor="phone"] #sensorsView .sensor-card .emitters-card-header { min-height: 32px; padding-left: 68px; align-items: flex-start; gap: 4px; }
:root[data-form-factor="phone"] #sensorsView .sensor-card .emitters-card-title strong { font-size: 13px; line-height: 1.15; }
:root[data-form-factor="phone"] #sensorsView .sensor-card .emitters-card-title span { font-size: 10px; letter-spacing: 0; }
:root[data-form-factor="phone"] #sensorsView .sensor-card .force-pill { font-size: 10px; padding: 3px 4px; }
:root[data-form-factor="phone"] #sensorsView .sensor-card .sensor-card-actions { display: inline-flex; flex: 0 0 28px; width: 28px; height: 32px; min-height: 32px; padding: 0; border-radius: 6px; }
:root[data-form-factor="phone"] #sensorsView .sensor-card .sensor-card-meta { min-height: 32px; width: 100%; margin: 0; padding-left: 68px; box-sizing: border-box; column-gap: 8px; row-gap: 4px; }
:root[data-form-factor="phone"] #sensorsView .sensor-card-kv { font-size: 10px; gap: 3px; }
:root[data-form-factor="phone"] #sensorsView .sensor-card .emitters-card-net { padding-top: 6px; margin-top: 2px; }
:root[data-form-factor="phone"] #sensorsView .sensor-card .emitters-card-net-title { font-size: 10px; letter-spacing: 0.04em; }
:root[data-form-factor="phone"] #sensorsView .sensor-card .emitters-card-net-count { font-size: 10px; }
:root[data-form-factor="phone"] #sensorsView .sensor-detection-list { gap: 3px; min-height: 0; }
:root[data-form-factor="phone"] #sensorsView .sensor-detection-row { min-height: 32px; padding-block: 4px; border-radius: 6px; }
:root[data-form-factor="phone"] #sensorsView .sensor-detection-row-content { align-self: center; }
:root[data-form-factor="phone"] #sensorsView .sensor-detection-rank { align-items: center; font-size: 11px; padding-top: 0; }
:root[data-form-factor="phone"] #sensorsView .sensor-detection-row-head strong { font-size: 11px; }
:root[data-form-factor="phone"] #sensorsView .sensors-evaluation-status.hidden { display: none !important; }
:root[data-form-factor="phone"] #sensorsView .sensors-toolbar > .sensors-capability-legend { padding-right: 88px; gap: 8px; }
:root[data-form-factor="phone"] #sensorsView .sensors-evaluation-status { grid-row: 4; justify-self: end; align-self: center; width: auto; gap: 4px; white-space: nowrap; font-size: 10px; }
:root[data-form-factor="phone"] #sensorsView .sensors-capability-legend-item { font-size: 10px; gap: 4px; }
:root[data-form-factor="phone"] #sensorsView .sensors-evaluation-spinner { width: 10px; height: 10px; }
:root[data-form-factor="phone"] #sensorsView #sensorsCanvas { scrollbar-width: none; }
:root[data-form-factor="phone"] #sensorsView #sensorsCanvas::-webkit-scrollbar { display: none; width: 0; }
:root[data-form-factor="phone"] #sensorsView .sensors-mobile-progress { display: block; flex: 0 0 3px; height: 3px; width: 100%; }
:root[data-form-factor="phone"] #sensorsView.is-spectrum-display .sensors-mobile-progress { display: none; }
:root[data-form-factor="phone"] #sensorsView .sensor-detection-see-more { height: 32px; min-height: 32px; padding: 0 8px; border-radius: 6px; font-size: 11px; }

@media (orientation: landscape) and (min-width: 640px) {
  :root[data-form-factor="phone"] #sensorsView .affiliation-card-partition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The unit-table export keeps a complete touch target instead of overflowing
   a narrow text button beside the view controls. Desktop retains its label. */
:root[data-form-factor="phone"] #planView #toTableExportBtn.ghost-button {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 6px;
  justify-content: center;
}
:root[data-form-factor="phone"] #planView #toTableExportBtn .to-table-export-label { display: none; }
:root[data-form-factor="phone"] #planView #toTableExportBtn .to-table-export-icon { display: block; flex: 0 0 22px; }

/* ---- Always-present elements, hidden unless the phone shell is active ---- */
.phone-tab-bar {
  display: none;
}

/* Touch-only "more actions" button on map-content cards (desktop uses
   right-click). */
.map-content-more-btn {
  display: none;
}

/* ---- Touch density tokens ---------------------------------------------- */
:root[data-input="coarse"] {
  --hit-min: 44px;
  --touch-gap: 8px;
}

/* ======================================================================
 * PHONE SHELL
 * ====================================================================== */
:root[data-form-factor="phone"] {
  --topbar-height: calc(48px + env(safe-area-inset-top, 0px));
  --topbar-control-height: 40px;
  --tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px));
  --phone-sheet-radius: 10px;
}

:root[data-form-factor="phone"] body {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root[data-form-factor="phone"] .app-shell {
  box-sizing: border-box;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  height: var(--app-height, 100dvh);
  padding-bottom: var(--tabbar-h);
}

/* ---- Top bar: logo, mode, workspace, then three icon buttons ---------- */
:root[data-form-factor="phone"] .top-bar {
  box-sizing: border-box;
  display: flex;
  height: var(--topbar-height);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}

:root[data-form-factor="phone"] .top-bar-left,
:root[data-form-factor="phone"] body[data-current-view] .top-bar-left,
:root[data-form-factor="phone"] .title-block {
  flex: 0 0 64px;
  min-width: 64px;
  width: 64px;
}

:root[data-form-factor="phone"] .title-block strong {
  font-size: 0.78rem;
}

:root[data-form-factor="phone"] .status-strip {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  height: 100%;
  min-width: 0;
  padding: 4px 4px 4px 2px;
  box-sizing: border-box;
  align-items: stretch;
}

:root[data-form-factor="phone"] .status-strip > * {
  margin: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
}

:root[data-form-factor="phone"] .status-strip > .view-mode-shell {
  display: none;
}

:root[data-form-factor="phone"] .status-strip > .operation-mode-shell {
  flex: 0 0 auto;
  order: 1;
  width: auto;
}

:root[data-form-factor="phone"] .status-strip > .workspace-menu-shell {
  flex: 1 1 0;
  min-width: 0;
  order: 2;
}

:root[data-form-factor="phone"] .status-strip > #imageryPicker,
:root[data-form-factor="phone"] .status-strip > #aiChatToggleBtn,
:root[data-form-factor="phone"] .status-strip > .settings-menu-shell {
  display: flex;
  flex: 0 0 40px;
  width: 40px;
}

:root[data-form-factor="phone"] .status-strip > #imageryPicker { order: 3; }
:root[data-form-factor="phone"] .status-strip > #aiChatToggleBtn { order: 4; }
:root[data-form-factor="phone"] .status-strip > .settings-menu-shell { order: 5; }

:root[data-form-factor="phone"] .operation-mode-dropdown,
:root[data-form-factor="phone"] .operation-mode-button {
  height: 100%;
}

:root[data-form-factor="phone"] .operation-mode-button {
  border-radius: 6px;
  font-size: 0.68rem;
  gap: 4px;
  min-width: 78px;
  padding: 0 8px;
}

:root[data-form-factor="phone"] #operationModeValue {
  transform: none;
}

/* Chips: the workspace chip keeps its name; the others become icons. */
:root[data-form-factor="phone"] .workspace-menu-button {
  align-items: flex-start;
  border-radius: 6px;
  height: 100%;
  min-height: 0;
  padding: 3px 8px;
  width: 100%;
}

:root[data-form-factor="phone"] .workspace-menu-button > span:first-child {
  font-size: 0.5rem;
}

:root[data-form-factor="phone"] .workspace-menu-button .status-chip-action-row strong {
  font-size: 0.74rem;
  max-width: none;
}

:root[data-form-factor="phone"] #imageryPickerButton,
:root[data-form-factor="phone"] #aiChatToggleBtn,
:root[data-form-factor="phone"] #settingsMenuBtn {
  align-items: center;
  border-radius: 6px;
  height: 100%;
  justify-content: center;
  min-height: 0;
  padding: 0;
  width: 100%;
}

:root[data-form-factor="phone"] #imageryPickerButton > *,
:root[data-form-factor="phone"] #aiChatToggleBtn > * {
  display: none;
}

:root[data-form-factor="phone"] #imageryPickerButton::before,
:root[data-form-factor="phone"] #aiChatToggleBtn::before {
  background: currentColor;
  content: "";
  height: 22px;
  width: 22px;
  -webkit-mask: var(--phone-chip-icon) center / contain no-repeat;
  mask: var(--phone-chip-icon) center / contain no-repeat;
}

:root[data-form-factor="phone"] #imageryPickerButton {
  --phone-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='3.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M3.5 17l5-4.5 3.5 3 3-2.5 5.5 4.5'/%3E%3C/svg%3E");
}

:root[data-form-factor="phone"] #aiChatToggleBtn {
  --phone-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7 4h10a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4h-5.5L7 20.5V17a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E");
}

:root[data-form-factor="phone"] .settings-menu-shell,
:root[data-form-factor="phone"] .settings-menu-shell .settings-chip-icon-only {
  flex: 0 0 40px;
  min-width: 40px;
  width: 40px;
}

:root[data-form-factor="phone"] .settings-gear-icon svg {
  height: 22px;
  width: 22px;
}

/* ---- Bottom tab bar ---------------------------------------------------- */
:root[data-form-factor="phone"] .phone-tab-bar {
  background: var(--bg-topbar);
  border-top: 1px solid var(--border);
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  height: var(--tabbar-h);
  left: 0;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  position: fixed;
  right: 0;
  z-index: 2500;
}

:root[data-form-factor="phone"][data-keyboard="open"] .phone-tab-bar {
  display: none;
}

:root[data-form-factor="phone"][data-keyboard="open"] .app-shell {
  padding-bottom: 0;
}

.phone-tab {
  align-items: center;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text-muted, var(--muted));
  cursor: pointer;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  gap: 3px;
  justify-content: center;
  letter-spacing: 0.04em;
  margin: 3px 2px;
  min-width: 0;
  padding: 4px 0;
  text-transform: uppercase;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.phone-tab[hidden] {
  display: none;
}

.phone-tab.is-active {
  background: var(--control-bg-hover, rgba(255, 255, 255, 0.08));
  color: var(--text);
}

.phone-tab:active {
  background: var(--control-bg-hover, rgba(255, 255, 255, 0.08));
}

.phone-tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Legacy chip rules carry min-widths sized for text; the icon buttons must be
   exactly one touch target wide or they push the workspace name off-screen. */
:root[data-form-factor="phone"] .status-strip > #imageryPicker,
:root[data-form-factor="phone"] .status-strip > #aiChatToggleBtn,
:root[data-form-factor="phone"] .status-strip > .settings-menu-shell,
:root[data-form-factor="phone"] #imageryPickerButton,
:root[data-form-factor="phone"] #aiChatToggleBtn,
:root[data-form-factor="phone"] #settingsMenuBtn {
  flex: 0 0 40px;
  max-width: 40px;
  min-width: 40px;
  width: 40px;
}

:root[data-form-factor="phone"] .status-strip > .workspace-menu-shell {
  max-width: none;
  min-width: 0;
  overflow: hidden;
}

:root[data-form-factor="phone"] .workspace-menu-button {
  min-width: 0;
}

:root[data-form-factor="phone"] .workspace-menu-button .status-chip-action-row {
  min-width: 0;
}

:root[data-form-factor="phone"] .workspace-menu-button .status-chip-action-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ======================================================================
 * PHONE - MAP VIEW
 * The map owns the whole screen. Map contents, phasing and tools live in a
 * bottom sheet opened by the Contents button, so the map is never reduced to
 * a strip above a list.
 * ====================================================================== */
.phone-sheet-fab,
.phone-sheet-handle {
  display: none;
}

:root[data-form-factor="phone"] body[data-current-view="map"] #mapView {
  display: block;
  position: relative;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-stage {
  height: 100%;
  inset: 0;
  min-height: 0;
  position: absolute;
  width: 100%;
}

:root[data-form-factor="phone"] body[data-current-view="map"] #panelDivider,
:root[data-form-factor="phone"] body[data-current-view="map"] #collapsePanelBtn {
  display: none;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .control-panel {
  background: var(--bg-elevated, var(--bg));
  border: 1px solid var(--border-strong, var(--border));
  border-bottom: 0;
  border-radius: var(--phone-sheet-radius) var(--phone-sheet-radius) 0 0;
  bottom: 0;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: min(64dvh, 560px);
  left: 0;
  max-height: none;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  transform: translateY(105%);
  transition: transform 0.22s ease;
  visibility: hidden;
  width: 100%;
  z-index: 1300;
}

:root[data-form-factor="phone"] body[data-current-view="map"].phone-sheet-open .control-panel {
  transform: none;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-form-factor="phone"] body[data-current-view="map"] .control-panel {
    transition: none;
  }
}

:root[data-form-factor="phone"] body[data-current-view="map"] .phone-sheet-handle {
  align-items: center;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted, var(--muted));
  cursor: pointer;
  display: flex;
  flex: 0 0 36px;
  font: inherit;
  font-size: 0.7rem;
  justify-content: center;
  letter-spacing: 0.08em;
  position: relative;
  text-transform: uppercase;
  touch-action: none;
  width: 100%;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .phone-sheet-handle::before {
  background: var(--control-border-hover, var(--border-strong));
  border-radius: 2px;
  content: "";
  height: 4px;
  left: 50%;
  position: absolute;
  top: 7px;
  transform: translateX(-50%);
  width: 40px;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .phone-sheet-handle span {
  margin-top: 8px;
}

/* Visible stow affordance: a down chevron at the right edge of the handle. */
:root[data-form-factor="phone"] body[data-current-view="map"] .phone-sheet-handle::after {
  background: currentColor;
  content: "";
  height: 20px;
  position: absolute;
  right: 14px;
  top: 12px;
  width: 20px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .control-panel-top {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  width: 100%;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-card-header,
:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-toolbar-row,
:root[data-form-factor="phone"] body[data-current-view="map"] #mapContentsPanel:not(.hidden) {
  display: contents;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-panel-mode-toggle,
:root[data-form-factor="phone"] body[data-current-view="map"] .operation-active-phase-strip {
  flex: 0 0 44px;
  height: 44px;
  min-height: 44px;
  width: 100%;
}

:root[data-form-factor="phone"] body[data-current-view="map"] #mapContentsActions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  /* Visible, not scrolling: the terrain, add and export dropdowns hang off
     these buttons and a scroll container would clip them. */
  overflow: visible;
}

:root[data-form-factor="phone"] body[data-current-view="map"] #mapContentsActions::-webkit-scrollbar {
  display: none;
}

:root[data-form-factor="phone"] body[data-current-view="map"] #mapContentsActions .mc-icon-btn,
:root[data-form-factor="phone"] body[data-current-view="map"] #mapContentsActions > button {
  flex: 0 0 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  width: 44px;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-search-row {
  flex: 0 0 44px;
  padding: 0;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-search-row .map-contents-search-shell {
  height: 44px;
  min-height: 44px;
  width: 100%;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-list {
  border-top: 1px solid var(--border);
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 6px;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-list > .asset-item,
:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-list > div > .asset-item {
  height: auto;
  min-height: 52px;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-content-copy strong {
  font-size: 0.9rem;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-content-copy span {
  font-size: 0.74rem;
}

/* Grip and expander share one column, centred both ways in the card, with a
   real touch target for the folder expander. */
:root[data-input="coarse"] .map-content-lead {
  align-items: center;
  align-self: stretch;
  flex-basis: 32px;
  gap: 0;
  justify-content: center;
  width: 32px;
}

:root[data-input="coarse"] .map-content-collapse-btn {
  height: 32px;
  width: 32px;
}

:root[data-input="coarse"] .map-content-collapse-btn svg {
  height: 20px;
  width: 20px;
}

:root[data-input="coarse"] .map-content-visibility-btn,
:root[data-input="coarse"] .map-content-tak-stream-indicator {
  align-items: center;
  display: flex;
  height: 44px;
  justify-content: center;
  margin: -6px -6px -6px 0;
  min-width: 44px;
  width: 44px;
}

/* Centre the icon and text against the taller touch-height row. */
:root[data-input="coarse"] .map-content-row {
  align-items: center;
}

/* Floating Contents button. Created by src/features/mobile/phone-shell.js.
   Bottom-left, the same 34px height as the other map controls; the grid and
   elevation readout sits to its right on the same row. */
:root[data-form-factor="phone"] body[data-current-view="map"] .phone-sheet-fab {
  align-items: center;
  background: var(--map-control-bg, var(--bg-overlay-solid, var(--bg-elevated)));
  border: 1px solid var(--map-control-border, var(--control-border));
  border-radius: 4px;
  bottom: calc(var(--tabbar-h) + 16px);
  box-shadow: var(--map-control-shadow, none);
  color: var(--map-control-fg, var(--text));
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  gap: 6px;
  height: 34px;
  left: 10px;
  letter-spacing: 0.06em;
  padding: 0 10px;
  position: fixed;
  right: auto;
  text-transform: uppercase;
  touch-action: manipulation;
  z-index: 1200;
}

:root[data-form-factor="phone"] body[data-current-view="map"].phone-sheet-open .phone-sheet-fab {
  display: none;
}

/* Map footer: the grid and elevation readout shares one bottom row with the
   Contents button (left) and ends at the right edge. */
:root[data-form-factor="phone"] body[data-current-view="map"] #mapView .map-stage .bottom-center {
  align-items: flex-end;
  bottom: 16px;
  left: 112px;
  right: 10px;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .view-metrics-card {
  box-sizing: border-box;
  height: 34px;
  margin: 0;
  max-width: none;
  padding: 0 6px;
  width: auto;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .overlay-metric-row {
  flex-wrap: nowrap;
  gap: 10px;
  height: 100%;
  justify-content: flex-end;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .overlay-metric-block {
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .overlay-metric-block strong {
  font-size: 0.7rem;
}

/* Scale bar moves to the top row, right of the search button, and hides while
   the search field is open. */
:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage .distance-scale-card {
  align-items: center;
  bottom: auto;
  display: flex;
  height: 34px;
  left: calc(var(--map-overlay-left) + var(--map-view-toggle-w) + var(--map-overlay-gap) + var(--map-geo-search-w) + var(--map-overlay-gap));
  top: var(--map-overlay-top);
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage:has(.map-geo-search-wrap:focus-within) .distance-scale-card {
  display: none;
}

/* Attribution stays (imagery credit) but is small and unobtrusive. */
:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-muted, var(--muted));
  font-size: 8px;
  line-height: 1.3;
  opacity: 0.75;
  padding: 0 4px;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage .leaflet-control-attribution a {
  color: inherit;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage .leaflet-attribution-flag {
  height: 6px;
  width: 9px;
}

/* Drag grip: the "::" text glyph is unreadably small at touch scale, so draw a
   2x2 dot grid instead. Same element, same drag behaviour. */
:root[data-input="coarse"] body .map-content-grip {
  background: radial-gradient(circle, currentColor 1.8px, transparent 2.2px) 0 0 / 8px 8px;
  color: var(--text-muted, var(--muted));
  flex: 0 0 auto;
  font-size: 0;
  height: 16px;
  opacity: 0.8;
  width: 16px;
}

/* The clock adds little on a phone; the grid and elevation get the room. */
:root[data-form-factor="phone"] #clockMetricBlock {
  display: none;
}

/* ---- Phone top bar: one flat strip, straight vertical dividers --------
 * Every cell fills the bar's full height and uses a consistent divider
 * rule. No per-button borders, radii or inset shading, so the bar reads as one
 * instrument strip instead of a row of mismatched buttons.
 */
:root[data-form-factor="phone"] .top-bar-left,
:root[data-form-factor="phone"] body[data-current-view] .top-bar-left {
  align-items: stretch;
  align-self: stretch;
  border-right: 1px solid var(--border-strong, var(--border));
  display: flex;
  height: 100%;
  margin: 0;
}

:root[data-form-factor="phone"] .title-block {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

:root[data-form-factor="phone"] .title-block strong {
  line-height: 1;
  margin: 0;
  position: static;
  transform: none;
}

:root[data-form-factor="phone"] .status-strip {
  gap: 0;
  padding: 0;
}

:root[data-form-factor="phone"] .status-strip > * {
  align-self: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--border-strong, var(--border));
  box-shadow: none;
  margin: 0;
}

:root[data-form-factor="phone"] .status-strip > .settings-menu-shell {
  border-right: 0;
}

:root[data-form-factor="phone"] .operation-mode-dropdown,
:root[data-form-factor="phone"] .operation-mode-button,
:root[data-form-factor="phone"] .workspace-menu-button,
:root[data-form-factor="phone"] #imageryPickerButton,
:root[data-form-factor="phone"] #aiChatToggleBtn,
:root[data-form-factor="phone"] #settingsMenuBtn {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:root[data-form-factor="phone"] .operation-mode-button:active,
:root[data-form-factor="phone"] .workspace-menu-button:active,
:root[data-form-factor="phone"] #imageryPickerButton:active,
:root[data-form-factor="phone"] #aiChatToggleBtn:active,
:root[data-form-factor="phone"] #settingsMenuBtn:active {
  background: var(--control-bg-hover, rgba(255, 255, 255, 0.08));
}

:root[data-form-factor="phone"] .operation-mode-button {
  justify-content: center;
  min-width: 84px;
  padding: 0 10px;
  width: 100%;
}

:root[data-form-factor="phone"] .status-strip > #imageryPicker,
:root[data-form-factor="phone"] .status-strip > #aiChatToggleBtn,
:root[data-form-factor="phone"] .status-strip > .settings-menu-shell,
:root[data-form-factor="phone"] #imageryPickerButton,
:root[data-form-factor="phone"] #aiChatToggleBtn,
:root[data-form-factor="phone"] #settingsMenuBtn {
  flex-basis: 44px;
  max-width: 44px;
  min-width: 44px;
  width: 44px;
}

:root[data-form-factor="phone"] .settings-menu-shell .settings-chip-icon-only {
  flex-basis: 44px;
  max-width: 44px;
  min-width: 44px;
  width: 44px;
}

:root[data-form-factor="phone"] .workspace-menu-button {
  justify-content: center;
  padding: 0 10px;
}

/* ---- Phone and tablet map overlay controls ----------------------------------------
 * The 3D toggle shrinks and the place search stows to a magnifier. Tapping it
 * focuses the field and opens it over the neighbouring controls; it stows
 * again on blur (see installMapSearchStow in phone-shell.js), the same
 * behaviour as the Monitor map.
 */
:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage {
  --map-zoom-stack-w: 34px;
  --map-overlay-left: calc(var(--map-zoom-offset) + var(--map-zoom-stack-w) + var(--map-overlay-gap));
  --map-view-toggle-w: 34px;
  --map-geo-search-w: 34px;
  --map-overlay-control-h: 34px;
}

/* Zoom +/- stacked top over bottom in the left column; 3D and search sit to its right. */
:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage .leaflet-control-zoom {
  flex-direction: column;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage .leaflet-control-zoom a:first-child {
  border-bottom: 1px solid var(--map-control-border);
  border-right: 0;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage .leaflet-control-zoom a {
  font-size: 20px;
  height: 34px;
  line-height: 32px;
  width: 34px;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-view-toggle {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-geo-search-wrap {
  transition: width 0.16s ease;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-geo-search-shell {
  cursor: pointer;
  overflow: hidden;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-geo-search-wrap:not(:focus-within) .map-geo-search-shell {
  gap: 0;
  justify-content: center;
  padding: 0;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-geo-search-wrap:not(:focus-within) .map-geo-search-shell input {
  flex: 0 0 0;
  opacity: 0;
  width: 0;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-geo-search-wrap:not(:focus-within) .map-geo-search-clear,
:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-geo-search-wrap:not(:focus-within) .map-search-geocoder-results {
  display: none;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-geo-search-icon svg {
  height: 16px;
  width: 16px;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-geo-search-wrap:focus-within {
  width: calc(100vw - var(--map-overlay-left) - var(--map-view-toggle-w) - var(--map-overlay-gap) - 12px);
  z-index: 700;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-geo-search-wrap:focus-within .map-geo-search-shell {
  cursor: text;
}

/* iOS zooms the page when a focused field is under 16px. The field keeps a
   16px font and is scaled to 13px, so it reads small without triggering that. */
:root[data-input="coarse"] .map-geo-search-shell input {
  flex: 0 0 123.08%;
  font-size: 16px;
  transform: scale(0.8125);
  transform-origin: left center;
  width: 123.08%;
}

:root[data-input="coarse"] .map-geo-search-shell {
  overflow: hidden;
  overflow: clip;
  position: relative;
}

:root[data-input="coarse"] .map-geo-search-clear {
  background: var(--map-control-bg);
  position: absolute;
  right: 4px;
}

@media (prefers-reduced-motion: reduce) {
  :root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-geo-search-wrap {
    transition: none;
  }
}

/* ======================================================================
 * TOUCH CANVASES
 * The T/O and topology canvases pan and zoom themselves, so the browser must
 * not also scroll or page-zoom under the finger.
 * ====================================================================== */
:root[data-input="coarse"] .to-lane,
:root[data-input="coarse"] .to-lane .to-world,
:root[data-input="coarse"] .to-unit,
:root[data-input="coarse"] #topoCanvas,
:root[data-input="coarse"] #topoCanvas .topology-affiliation-lane,
:root[data-input="coarse"] #topoCanvas .topo-node {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ======================================================================
 * PHONE - WORKSPACE TOOLBARS
 * Desktop toolbars squeeze their segmented controls to fit one row. On a phone
 * that overlaps the labels, so toolbars wrap onto as many rows as they need
 * and every control keeps its natural width and a touch-sized height.
 * ====================================================================== */
:root[data-form-factor="phone"] .topo-toolbar {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  height: auto;
  justify-content: flex-start;
  padding: 6px 8px;
}

:root[data-form-factor="phone"] .topo-toolbar > .topo-toolbar-section,
:root[data-form-factor="phone"] .topo-toolbar > .to-toolbar-section {
  flex: 0 0 auto;
  gap: 6px;
  min-height: 0;
  min-width: 0;
}

:root[data-form-factor="phone"] .topo-toolbar > .workspace-phase-carousel {
  flex: 1 1 100%;
  width: 100%;
}

:root[data-form-factor="phone"] .topo-toolbar .analysis-phase-tabs {
  width: 100%;
}

:root[data-form-factor="phone"] .topo-display-toggle:not([hidden]) {
  height: 36px;
  width: auto;
}

:root[data-form-factor="phone"] .topo-display-btn {
  font-size: 0.7rem;
  height: 100%;
  min-height: 36px;
  padding: 0 10px;
  width: auto;
}

:root[data-form-factor="phone"] .topo-filter-shell,
:root[data-form-factor="phone"] .topo-filter-trigger {
  height: 36px;
  min-width: 0;
  width: auto;
}

:root[data-form-factor="phone"] .topo-toolbar .to-toolbar-section-right {
  flex: 1 1 100%;
  gap: 6px;
  height: auto;
  justify-content: stretch;
}

:root[data-form-factor="phone"] .topo-toolbar .to-toolbar-section-right > button {
  flex: 1 1 0;
  font-size: 0.7rem;
  height: 36px;
  min-height: 36px;
  min-width: 0;
  width: auto;
}

/* T/O, Sensors and Emitters share the .to-toolbar family. */
:root[data-form-factor="phone"] .to-toolbar {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  height: auto;
  justify-content: flex-start;
  min-height: 0;
  overflow: visible;
  padding: 6px 8px;
}

:root[data-form-factor="phone"] .to-toolbar > .to-toolbar-section {
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  height: auto;
  min-height: 0;
  min-width: 0;
}

:root[data-form-factor="phone"] .to-toolbar > .workspace-phase-carousel-section {
  flex: 1 1 100%;
}

:root[data-form-factor="phone"] .to-toolbar .to-select,
:root[data-form-factor="phone"] .to-toolbar .small,
:root[data-form-factor="phone"] .to-toolbar button {
  font-size: 0.72rem;
  min-height: 36px;
}

:root[data-form-factor="phone"] .to-toolbar .to-select {
  max-width: 100%;
}

/* "RF Links" and the frequency filter read at normal size, not the squeezed
   compact variant. */
:root[data-form-factor="phone"] .topo-rf-links-label-full {
  display: inline;
}

:root[data-form-factor="phone"] .topo-rf-links-label-compact {
  display: none;
}

:root[data-form-factor="phone"] .topo-filter-trigger {
  font-size: 0.72rem;
  padding: 0 10px;
}

:root[data-form-factor="phone"] .to-toolbar > .to-toolbar-section button,
:root[data-form-factor="phone"] .to-toolbar > .to-toolbar-section .to-select,
:root[data-form-factor="phone"] .to-toolbar > .to-toolbar-section .topo-filter-trigger {
  font-size: 0.72rem;
  height: 36px;
  min-height: 36px;
  padding-inline: 12px;
}

:root[data-form-factor="phone"] .to-toolbar > .to-toolbar-section-right {
  flex: 1 1 auto;
  justify-content: flex-end;
}

:root[data-form-factor="phone"] .to-toolbar .to-toolbar-views-section {
  align-items: center;
  gap: 6px;
}

:root[data-form-factor="phone"] .to-toolbar .to-toolbar-label {
  font-size: 0.6rem;
}

:root[data-form-factor="phone"] .to-toolbar .topo-display-toggle:not([hidden]) {
  height: 36px;
  width: auto;
}

:root[data-form-factor="phone"] .to-toolbar .topo-display-btn {
  font-size: 0.72rem;
  height: 100%;
  min-height: 0;
  padding: 0 10px;
  width: auto;
}

/* Legacy plan-toolbar rules are keyed on #planView, so the phone overrides
   need the same id to win. */
:root[data-form-factor="phone"] #planView .to-toolbar {
  --to-toolbar-control-height: 36px;
  flex-wrap: wrap;
  gap: 6px;
  height: auto;
  min-height: 0;
  padding: 6px 8px;
}

:root[data-form-factor="phone"] #planView .to-toolbar > .to-toolbar-section:first-child {
  flex: 0 0 auto;
  margin-right: 0;
  padding-block: 0;
}

:root[data-form-factor="phone"] #planView .to-toolbar > .to-toolbar-section-right {
  align-self: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  height: auto;
  margin-left: 0;
}

:root[data-form-factor="phone"] #planView .to-toolbar > .to-toolbar-section-right > .small,
:root[data-form-factor="phone"] #planView .to-toolbar #toAddUnitBtn {
  font-size: 0.72rem;
  height: 36px;
  min-height: 36px;
  padding-inline: 12px;
  width: auto;
}

:root[data-form-factor="phone"] #planView #toAutoLayoutBtn,
:root[data-form-factor="phone"] #planView #toClearAllBtn,
:root[data-form-factor="phone"] #planView #toTableResetFiltersBtn,
:root[data-form-factor="phone"] #planView #toTableExportBtn {
  width: auto;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-shell,
:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger {
  height: 36px;
  width: auto;
}

/* Right-hand controls take their own rows so nothing is clipped. */
:root[data-form-factor="phone"] #planView .to-toolbar > .to-toolbar-section-right {
  flex: 1 1 100%;
  justify-content: flex-start;
}

:root[data-form-factor="phone"] #planView .to-toolbar > .to-toolbar-section-right > #toAutoLayoutBtn,
:root[data-form-factor="phone"] #planView .to-toolbar > .to-toolbar-section-right > #toClearAllBtn {
  flex: 1 1 0;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger {
  min-width: 112px;
  white-space: nowrap;
}

:root[data-form-factor="phone"] #planView .to-toolbar-views-section .topo-display-btn {
  font-size: 0.72rem;
  min-width: 0;
  padding: 0 10px;
}

:root[data-form-factor="phone"] #planView .to-toolbar-views-section .to-toolbar-label {
  display: none;
}

:root[data-form-factor="phone"] #planView .to-toolbar-views-section .topo-display-toggle:not([hidden]) {
  display: flex;
  grid-template-columns: none;
  height: 36px;
  width: auto;
}

:root[data-form-factor="phone"] #planView .to-toolbar-views-section .topo-display-btn {
  flex: 0 0 auto;
  width: auto;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-shell,
:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger {
  min-width: 150px;
}

:root[data-form-factor="phone"] #planView .to-toolbar .to-toolbar-views-section {
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
  width: auto;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-shell,
:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger {
  min-width: 124px;
}

/* ======================================================================
 * PHONE - MONITOR
 * The side-by-side tile tree would leave a ~190px sliver for the map, so on a
 * phone every tile stacks full-width and the workspace scrolls vertically.
 * Maps get most of a screen; tables and charts get about half.
 * ====================================================================== */
:root[data-form-factor="phone"] .monitor-toolbar {
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
}

:root[data-form-factor="phone"] .monitor-toolbar .monitor-phase-carousel {
  flex: 1 1 100%;
  order: 3;
}

:root[data-form-factor="phone"] .monitor-phase-carousel .workspace-phase-current {
  max-width: none;
  min-width: 0;
  width: 100%;
}

:root[data-form-factor="phone"] .monitor-layouts {
  flex: 1 1 0;
}

:root[data-form-factor="phone"] .monitor-toolbar button,
:root[data-form-factor="phone"] .monitor-toolbar .monitor-layout-chip {
  min-height: 36px;
}

:root[data-form-factor="phone"] .monitor-workspace {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .monitor-workspace .monitor-split {
  display: flex;
  flex-direction: column;
  gap: var(--monitor-gap, 6px);
  height: auto;
  min-height: 100%;
}

:root[data-form-factor="phone"] .monitor-workspace .monitor-split-cell {
  display: flex;
  flex: 0 0 auto;
  flex-grow: 0;
  width: 100%;
}

:root[data-form-factor="phone"] .monitor-workspace .monitor-splitter {
  display: none;
}

:root[data-form-factor="phone"] .monitor-workspace .monitor-pane {
  min-height: min(48dvh, 420px);
}

:root[data-form-factor="phone"] .monitor-workspace .monitor-pane:has(.map-stage) {
  min-height: min(70dvh, 600px);
}

:root[data-form-factor="phone"] .monitor-workspace.has-maximized .monitor-pane.is-maximized {
  inset: 0;
  min-height: 0;
}

/* ======================================================================
 * PHONE - DIALOGS
 * Desktop dialogs are landscape and centred. On a phone they present as
 * full-screen sheets so every field has the whole width (AGENTS.md allows
 * portrait dialogs at phone widths only).
 * ====================================================================== */
:root[data-form-factor="phone"] .emitter-modal-backdrop {
  align-items: stretch;
  justify-content: stretch;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

:root[data-form-factor="phone"] .emitter-modal-backdrop > .emitter-modal {
  border-radius: 0 !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  width: 100% !important;
}

/* Tall settings panels must scroll, not squash their cards on top of each
   other. */
:root[data-input="coarse"] .settings-tab-panel > *,
:root[data-input="coarse"] .emitter-modal-body > * {
  flex-shrink: 0;
}

/* Unit Type is a bounded drill-down: search and navigation stay visible while
   the available types own the single scrolling region. */
:root[data-form-factor="phone"] #tacticalPaletteModal .emitter-modal-header,
:root[data-form-factor="phone"] #tacticalPaletteModal .emitter-modal-footer { flex: 0 0 auto; padding: 12px; }
:root[data-form-factor="phone"] #tacticalPaletteSubtitle { color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tactical-palette-body { flex: 1 1 0; min-height: 0; gap: 8px; padding: 12px; overflow: hidden; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tactical-palette-body > .tpal-step-pane { flex: 1 1 0; min-height: 0; gap: 8px; overflow: hidden; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-search-field { flex: 0 0 auto; margin: 0; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-search-field input { font-size: 16px; min-height: 44px; padding: 8px; border-radius: 6px; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-domain-grid,
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-type-grid { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 0; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-type-layout { flex: 1 1 0; min-height: 0; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-domain-grid--search { overflow: hidden; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-domain-grid--search > .tpal-section-title { flex: 0 0 auto; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-domain-grid--search > .tpal-suggestion-list { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-type-row { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) 68px; border-radius: 6px; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-list-row,
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-type-btn { min-width: 0; min-height: 52px; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-type-btn--more { min-width: 0; justify-content: center; gap: 4px; padding: 6px; font-size: 10px; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-type-meta { min-width: 0; font-size: 10px; letter-spacing: 0; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-type-title { overflow-wrap: anywhere; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-type-symbol,
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-list-row-symbol { width: 40px; height: 40px; }
:root[data-form-factor="phone"] #tacticalPaletteModal :is(.tpal-type-symbol, .tpal-list-row-symbol) :is(.ms2525-icon, .milstd-stack) { width: 32px; height: calc(32px * 62 / 48); }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-hierarchy-breadcrumbs { flex: 0 0 auto; min-height: 0; margin: 0; gap: 4px; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-hierarchy-breadcrumbs:empty { display: none; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-crumb { border-radius: 6px; min-height: 44px; padding: 6px 8px; max-width: 100%; font-size: 13px; }
:root[data-form-factor="phone"] #tacticalPaletteModal .tpal-crumb svg { width: 16px; height: 16px; flex: 0 0 16px; }
:root[data-form-factor="phone"] #tacticalPaletteModal .emitter-footer-actions { width: 100%; justify-content: space-between; }
:root[data-form-factor="phone"] #tacticalPaletteModal .emitter-modal-footer button { min-height: 44px; border-radius: 6px; }

/* iOS zooms the whole page when a focused field is under 16px. */
:root[data-input="coarse"] :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
  font-size: 16px;
}

/* ======================================================================
 * PHONE - AI CHAT
 * The desktop layout opens chat as a third grid column, which squeezed every
 * view to nothing. On a phone chat is a full-height sheet over the workspace
 * (above the tab bar); the AI button in the top bar opens and closes it.
 * ====================================================================== */
:root[data-form-factor="phone"] .app-content {
  grid-template-columns: minmax(0, 1fr) 0 0;
}

:root[data-form-factor="phone"] .app-content > #aiPanelDivider,
:root[data-form-factor="phone"] .panel-divider-right {
  display: none;
}

:root[data-form-factor="phone"] body.ai-panel-open .ai-panel {
  border-top: 1px solid var(--border-strong, var(--border));
  box-sizing: border-box;
  height: auto;
  inset: 0;
  max-height: none;
  padding: 10px;
  position: absolute;
  width: auto;
  z-index: 2000;
}

/* ======================================================================
 * PHONE - IMAGERY PICKER
 * The picker panel is anchored to its (now icon-sized) button, which pushed it
 * off the left edge. Anchor it to the top bar instead and span the screen.
 * ====================================================================== */
:root[data-form-factor="phone"] .imagery-picker {
  position: static;
}

:root[data-form-factor="phone"] .imagery-picker .imagery-picker-panel {
  position: fixed;
  left: 8px;
  max-height: calc(var(--app-height, 100dvh) - var(--topbar-height) - var(--tabbar-h) - 16px);
  right: 8px;
  top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px) + 4px);
  width: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .imagery-picker-panel input:not([type="checkbox"]),
:root[data-form-factor="phone"] .imagery-picker-panel select {
  font-size: 16px;
  min-height: 44px;
}

:root[data-form-factor="phone"] .imagery-source-row {
  grid-template-columns: minmax(0, 1fr) 44px;
}

:root[data-form-factor="phone"] .imagery-picker-panel button {
  min-height: 44px;
}

:root[data-input="coarse"] .imagery-picker-panel {
  font-size: 14px;
}

:root[data-input="coarse"] .imagery-picker-panel button,
:root[data-input="coarse"] .imagery-picker-panel input:not([type="checkbox"]),
:root[data-input="coarse"] .imagery-picker-panel select {
  min-height: 40px;
}

:root[data-input="coarse"] .imagery-picker-panel header button {
  min-height: 40px;
  width: 40px;
}

/* Bottom row: the Contents button and the grid/elevation readout read as one
   family. Same surface, same 1px border, no boxes inside the readout, a single
   divider between grid and elevation. */
:root[data-form-factor="phone"] body[data-current-view="map"] .phone-sheet-fab,
:root[data-form-factor="phone"] body[data-current-view="map"] .view-metrics-card {
  background: color-mix(in srgb, var(--bg-overlay-solid, #000) 92%, transparent 8%);
  border: 1px solid var(--map-control-border-strong, var(--control-border));
  border-radius: 4px;
  box-shadow: none;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .view-metrics-card {
  padding: 0;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .view-metrics-card .overlay-metric-row {
  gap: 0;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .view-metrics-card .overlay-metric-block {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  padding: 0 10px;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .view-metrics-card .overlay-metric-block + .overlay-metric-block {
  border-left: 1px solid var(--map-control-border, var(--border));
}

/* Analysis: the kill-web title and its action buttons collide at phone width. */
:root[data-form-factor="phone"] .analysis-killweb-header {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

:root[data-form-factor="phone"] .analysis-killweb-title {
  flex: 1 1 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

:root[data-form-factor="phone"] .analysis-killweb-header .analysis-killweb-title {
  flex: 1 1 100%;
  width: 100%;
}

:root[data-form-factor="phone"] .analysis-killweb[data-killweb-orientation] > .analysis-killweb-header {
  grid-template-columns: minmax(0, 1fr) auto;
}
:root[data-form-factor="phone"] .analysis-killweb[data-killweb-orientation] > .analysis-killweb-header .analysis-killweb-title {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: left;
  font-size: 12px;
}
:root[data-form-factor="phone"] .analysis-killweb .analysis-killweb-typelegend {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}
:root[data-form-factor="phone"] .analysis-killweb .analysis-killweb-typelegend-title {
  font-size: 9px;
  letter-spacing: 0;
  white-space: nowrap;
}
:root[data-form-factor="phone"] .analysis-killweb .analysis-killweb-typelegend-item {
  gap: 3px;
  min-width: 0;
  padding-inline: 0;
  font-size: 10px;
  letter-spacing: 0;
  border-radius: 6px;
  white-space: nowrap;
}
:root[data-form-factor="phone"] .analysis-killweb .analysis-killweb-typelegend-item svg {
  width: 14px;
  flex: 0 0 14px;
}

/* ======================================================================
 * PHONE - DROPDOWNS AND MENUS (audit pass)
 * ====================================================================== */
/* Operation mode menu: touch-sized rows instead of 26px slivers. */
:root[data-form-factor="phone"] .operation-mode-menu {
  min-width: 150px;
  padding: 4px;
}

:root[data-form-factor="phone"] .operation-mode-menu .operation-mode-option {
  border-radius: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  min-height: 44px;
  padding: 0 14px;
  text-align: left;
  width: 100%;
}

/* Workspace menu: label above the project select, then Change / New. */
:root[data-form-factor="phone"] .workspace-project-picker-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

:root[data-form-factor="phone"] .workspace-project-picker-row > label {
  grid-column: 1 / -1;
}

:root[data-form-factor="phone"] .workspace-project-picker-row select {
  width: 100%;
}

:root[data-form-factor="phone"] .workspace-project-picker-row > button {
  min-height: 44px;
}

:root[data-form-factor="phone"] #workspaceMenu button,
:root[data-form-factor="phone"] #workspaceMenu select,
:root[data-form-factor="phone"] #workspaceMenu input {
  min-height: 44px;
}

/* Modals: touch-sized buttons, and a header whose title and status can wrap. */
:root[data-input="coarse"] .emitter-modal button {
  min-height: 40px;
}

:root[data-form-factor="phone"] .emitter-modal-header {
  flex-wrap: wrap;
  gap: 4px 12px;
}

:root[data-form-factor="phone"] .emitter-modal-header h2 {
  flex: 1 1 60%;
  min-width: 0;
}

/* Simulation timeline: a thumb a finger can actually hold. */
:root[data-input="coarse"] .operation-timeline input[type="range"]::-webkit-slider-thumb {
  height: 26px;
  width: 26px;
}

:root[data-input="coarse"] .operation-timeline input[type="range"] {
  min-height: 36px;
}

/* Workspace menu: anchored to the top bar and sized to the space between the
   bar and the tab bar, scrolling inside. (Inline positioning from the desktop
   popover logic is overridden.) */
:root[data-form-factor="phone"] .workspace-menu-shell {
  position: static;
}

:root[data-form-factor="phone"] #workspaceMenu {
  bottom: auto !important;
  box-sizing: border-box;
  left: 8px !important;
  max-height: calc(var(--app-height, 100dvh) - var(--topbar-height) - var(--tabbar-h) - 16px) !important;
  overflow-y: auto;
  position: fixed !important;
  right: 8px !important;
  top: calc(var(--topbar-height) + 4px) !important;
  transform: none !important;
  width: auto !important;
}

/* ======================================================================
 * PHONE - PROJECT LAUNCHER
 * The launcher's top bar shares the .top-bar class, so the phone top-bar
 * rules above must not resurrect the bars the switcher mode hides.
 * ====================================================================== */
:root[data-form-factor="phone"] .project-launcher[data-mode="switcher"] .project-launcher-topbar,
:root[data-form-factor="phone"] .project-launcher[data-mode="switcher"] .project-launcher-bottombar {
  display: none;
}

:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .project-launcher-topbar {
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  height: var(--topbar-height);
  padding: env(safe-area-inset-top, 0px) 8px 0 0;
}

:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .project-launcher-greeting {
  align-self: center;
  justify-self: stretch;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  text-align: right;
  line-height: 1.3;
}

/* The landing header needs the complete brand, rather than the workspace's
   fixed 64px slot. Its typography can be copied from a hidden desktop header. */
:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .top-bar-left,
:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .title-block {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  container-type: normal;
}

:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .title-block {
  margin: 0;
  padding-inline: 10px !important;
}

:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .project-launcher-wordmark {
  font-size: 16px !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
}
:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .project-launcher-sign-out {
  align-self: center;
  height: 36px;
  min-height: 36px;
  min-width: 70px;
  margin: 0;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 6px;
}

:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .project-launcher-bottombar {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-inline: 16px;
}

:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .project-launcher-footer-clock,
:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .project-launcher-footer-hint,
:root[data-form-factor="phone"] .project-launcher[data-mode="landing"] .project-launcher-default-summary {
  display: none;
}

/* One border owns each phone header separator; nested chip borders would
   otherwise double the PLAN/Workspace line but leave the wordmark line thin. */
:root[data-form-factor="phone"] .app-shell > .top-bar .top-bar-left,
:root[data-form-factor="phone"] .app-shell > .top-bar .status-strip > :not(:last-child) {
  border-right: 2px solid var(--border-strong, var(--border));
}
:root[data-form-factor="phone"] .app-shell > .top-bar .workspace-menu-button { border-left: 0; }

:root[data-input="coarse"] .workspace-project-modal button,
:root[data-input="coarse"] .workspace-project-modal select,
:root[data-input="coarse"] .workspace-project-modal input {
  min-height: 40px;
}

/* The tab bar sits under the launcher and every dialog, over the workspace. */
:root[data-form-factor="phone"] .phone-tab-bar {
  z-index: 2250;
}

/* ---- Touch affordances for hidden menus -------------------------------- */
:root[data-input="coarse"] .map-content-more-btn {
  align-items: center;
  background: none;
  border: 0;
  color: var(--text-muted, var(--muted));
  display: flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  margin: -6px -6px -6px -10px;
  min-width: 36px;
  padding: 0;
  width: 36px;
}

:root[data-input="coarse"] .map-content-more-btn:active {
  color: var(--text);
}

/* Buttons whose options open on long-press get a small corner marker, the
   same cue the "+" corner marks on add buttons. */
:root[data-input="coarse"] .terrain-heatmap-btn,
:root[data-input="coarse"] #terrainContourBtn {
  position: relative;
}

:root[data-input="coarse"] .terrain-heatmap-btn::after,
:root[data-input="coarse"] #terrainContourBtn::after {
  border-bottom: 5px solid currentColor;
  border-left: 5px solid transparent;
  bottom: 4px;
  content: "";
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  right: 4px;
}

/* Dropdowns that hang off toolbar buttons: touch-sized rows. */
:root[data-input="coarse"] .export-dropdown button,
:root[data-input="coarse"] .map-contents-menu button {
  min-height: 44px;
}

/* Phasing panel inside the sheet: the legacy phone drawer capped it at 134px,
   which clipped the phase list under its own button. */
:root[data-form-factor="phone"] body[data-current-view="map"] #siteStudySection:not(.hidden) {
  flex: 1 1 auto;
  grid-row: auto;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

:root[data-form-factor="phone"] body[data-current-view="map"] #operationPhasesCard {
  height: auto;
  overflow: visible;
}

:root[data-form-factor="phone"] body[data-current-view="map"] #operationPhasesCard button {
  min-height: 40px;
}

/* View Phases matrix: stack each unit's symbol over its (wrapping) name so
   names are not cut to "4TH M...". */
:root[data-form-factor="phone"] .operation-phase-overview-unit-identity {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

:root[data-form-factor="phone"] .operation-phase-overview-unit-name {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* Dialog chrome (supersedes the earlier header rule): the close button stays
   top-right, the title group stacks title over status, and footers wrap with
   buttons sharing the row. */
:root[data-form-factor="phone"] .emitter-modal-header {
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 12px;
}

:root[data-form-factor="phone"] .emitter-modal-header .emitter-modal-title-group {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

:root[data-form-factor="phone"] .emitter-modal-header h2 {
  flex: 0 1 auto;
  min-width: 0;
}

:root[data-form-factor="phone"] .emitter-modal-header > button {
  flex: 0 0 auto;
}

:root[data-form-factor="phone"] .emitter-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: stretch;
}

:root[data-form-factor="phone"] .emitter-modal-footer > button {
  flex: 1 1 120px;
}

:root[data-form-factor="phone"] .emitter-modal-footer > :not(button) {
  flex: 1 1 100%;
  order: -1;
}

/* Movement plan editor. */
:root[data-form-factor="phone"] .operation-movement-route-auto {
  grid-template-columns: 1fr 1fr;
}

:root[data-form-factor="phone"] .operation-movement-route-auto > .operation-movement-route-auto-hint {
  grid-column: 1 / -1;
  order: 3;
  width: auto;
}

:root[data-form-factor="phone"] .operation-movement-plan-timing-row {
  height: auto;
  min-height: min-content;
  overflow: visible;
}

:root[data-form-factor="phone"] .mvplan-timing-controls {
  height: auto;
  overflow: visible;
}

/* Emitter editor tab strip: equal-width grid columns cut the labels to 49px
   and overprinted them. Natural widths, scrolling sideways. */
:root[data-form-factor="phone"] .emitter-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .emitter-tabs::-webkit-scrollbar {
  display: none;
}

:root[data-form-factor="phone"] .emitter-tabs > .emitter-tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding-inline: 14px;
  white-space: nowrap;
}

/* The live emission preview is decorative until a type is chosen; keep it
   shorter than the form it sits above. */
:root[data-form-factor="phone"] .em-emission-preview {
  max-height: 160px;
}

/* Emitter editor body: on a phone the whole body scrolls as one page. The
   desktop grid gave the parameter tabs whatever height was left over after the
   library and identity cards, about 20px here. */
:root[data-form-factor="phone"] .emitter-config-modal .emitter-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .emitter-config-modal .emitter-modal-body > * {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
}

:root[data-form-factor="phone"] .emitter-config-modal .emitter-modal-params {
  overflow: visible;
}

:root[data-form-factor="phone"] .emitter-config-modal .emitter-tab-panel,
:root[data-form-factor="phone"] .emitter-config-modal .emitter-tab-panel.active {
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}

/* Context menus: touch-sized rows. */
:root[data-input="coarse"] .to-context-menu .to-ctx-item,
:root[data-input="coarse"] .action-context-menu button,
:root[data-input="coarse"] [role="menu"] [role="menuitem"] {
  font-size: 0.9rem;
  min-height: 44px;
}

/* Sensor editor: one column, one scroll. The desktop two-column grid squeezed
   the identity fields into a 160px strip and scrolled inside a short pane. */
:root[data-form-factor="phone"] .sensor-editor-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .sensor-editor-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  height: auto;
}

:root[data-form-factor="phone"] .sensor-editor-main {
  height: auto;
  overflow: visible;
}

:root[data-form-factor="phone"] .sensor-editor-top-grid {
  grid-template-areas:
    "identity"
    "preview"
    "capability"
    "compatibility";
  grid-template-columns: minmax(0, 1fr);
}

:root[data-form-factor="phone"] .sensor-editor-top-grid > .sensor-editor-identity-card {
  padding-right: 0;
}

:root[data-form-factor="phone"] .sensor-editor-top-grid > .sensor-editor-preview-card {
  border-left: 0;
  border-top: 1px solid var(--border);
  padding: 14px 0 0;
}

:root[data-form-factor="phone"] .sensor-editor-card,
:root[data-form-factor="phone"] .sensor-editor-card-wide {
  grid-column: auto;
  min-width: 0;
}

/* #sensorEditorModal rules (id specificity) re-impose the two-column grid. */
:root[data-form-factor="phone"] #sensorEditorModal .sensor-editor-top-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  min-height: 0;
}

:root[data-form-factor="phone"] #sensorEditorModal .sensor-editor-top-grid > .sensor-editor-card {
  grid-column: 1;
}

/* Analysis section picker: title over detail, so long details such as
   "24 blocked | 82 pending - MUOS SATCOM" wrap instead of running off the
   right edge. */
:root[data-form-factor="phone"] .analysis-section-menu {
  box-sizing: border-box;
  max-height: calc(var(--app-height, 100dvh) - var(--topbar-height) - var(--tabbar-h) - 120px);
  max-width: calc(100vw - 16px);
  overflow-y: auto;
}

:root[data-form-factor="phone"] .analysis-section-menu > button[data-analysis-section-choice] {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-height: 48px;
  padding: 6px 14px;
  text-align: left;
}

:root[data-form-factor="phone"] .analysis-section-menu > button[data-analysis-section-choice] small {
  max-width: 100%;
  text-align: left;
  white-space: normal;
}

/* ======================================================================
 * PHONE - HF PLANNING
 * The workspace is a fixed-height flex column whose children shrank to fit,
 * overprinting each other. On a phone each panel keeps its natural height
 * and the workspace scrolls.
 * ====================================================================== */
:root[data-form-factor="phone"] .hf-plan-workspace {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .hf-plan-workspace > * {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  min-height: 0;
}

:root[data-form-factor="phone"] .hf-plan-link-list,
:root[data-form-factor="phone"] .hf-plan-link-detail,
:root[data-form-factor="phone"] .hf-plan-main {
  overflow: visible;
}

:root[data-form-factor="phone"] .hf-plan-main > * {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
}

:root[data-form-factor="phone"] .hf-plan-link-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-template-rows: none;
  height: auto;
}

:root[data-form-factor="phone"] .hf-plan-link-detail > * {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

:root[data-form-factor="phone"] .hf-plan-study,
:root[data-form-factor="phone"] .hf-plan-config-pane {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

/* ---- Top bar polish ------------------------------------------------------ */
/* Chat button owns its right divider (the generic child rule is overridden by
   its own border reset); the gear matches the other icons' colour. */
:root[data-form-factor="phone"] .status-strip > #aiChatToggleBtn {
  border-right: 1px solid var(--border-strong, var(--border));
}

:root[data-form-factor="phone"] #imageryPickerButton,
:root[data-form-factor="phone"] #aiChatToggleBtn,
:root[data-form-factor="phone"] #settingsMenuBtn,
:root[data-form-factor="phone"] .settings-gear-icon {
  color: var(--text);
}

/* Operation mode selector: only as wide as its longest label. */
:root[data-form-factor="phone"] .operation-mode-button {
  font-size: 0.64rem;
  gap: 2px;
  letter-spacing: 0.04em;
  min-width: 0;
  padding: 0 6px;
}

:root[data-form-factor="phone"] .status-strip > .operation-mode-shell {
  flex: 0 0 auto;
  width: auto;
}

:root[data-form-factor="phone"] .hf-plan-study-body {
  contain: none;
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  min-height: min-content;
  overflow: visible;
}

/* The study body is absolutely positioned inside a fixed-height <details> on
   desktop; on a phone it flows normally and the page scrolls. */
:root[data-form-factor="phone"] .hf-plan-link-detail .hf-plan-study,
:root[data-form-factor="phone"] .hf-plan-link-detail .hf-plan-study[open] {
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
  position: static;
}

:root[data-form-factor="phone"] .hf-plan-link-detail .hf-plan-study-body {
  bottom: auto;
  inset: auto;
  left: auto;
  position: static;
  right: auto;
  top: auto;
}

:root[data-form-factor="phone"] .hf-plan-link-detail .hf-plan-study-endpoints {
  overflow: visible;
}

:root[data-form-factor="phone"] .hf-plan-link-detail-resizer {
  display: none;
}

/* ---- HF Planning: condensed for a phone ----------------------------------
 * The two AN/PRC-160 LCD faces sit side by side showing only what the
 * operator reads at a glance (frequency, mode, power, antenna). The link
 * picker drops its caption and shows "A <-> B" in one tight row.
 */
:root[data-form-factor="phone"] .hf-prc160-pair {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

:root[data-form-factor="phone"] .hf-prc160 {
  min-width: 0;
}

:root[data-form-factor="phone"] .hf-prc160-bezel {
  padding: 5px;
}

:root[data-form-factor="phone"] .hf-prc160-bezel-label {
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}

:root[data-form-factor="phone"] .hf-prc160-bezel-label span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-form-factor="phone"] .hf-prc160-screen {
  gap: 2px;
  padding: 5px 6px;
}

:root[data-form-factor="phone"] .hf-prc160-screen-top,
:root[data-form-factor="phone"] .hf-prc160-channel-row,
:root[data-form-factor="phone"] .hf-prc160-footer {
  display: none;
}

:root[data-form-factor="phone"] .hf-prc160-frequency {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  justify-content: center;
}

:root[data-form-factor="phone"] .hf-prc160-frequency > span {
  display: none;
}

:root[data-form-factor="phone"] .hf-prc160-frequency > strong {
  font-size: 1.15rem;
}

:root[data-form-factor="phone"] .hf-prc160-mode-row {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.5rem;
  gap: 2px 8px;
  justify-content: center;
}

/* Link picker: no caption, endpoints and the link count on one line. */
:root[data-form-factor="phone"] .hf-plan-link-picker-row {
  min-height: 0;
}

:root[data-form-factor="phone"] .hf-plan-link-picker-trigger-copy {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

:root[data-form-factor="phone"] .hf-plan-link-picker-trigger-copy > small {
  display: none;
}

:root[data-form-factor="phone"] .hf-plan-link-picker-endpoints {
  font-size: 0.8rem;
}

/* The config header and station chrome lose their vertical padding. */
:root[data-form-factor="phone"] .hf-plan-study > summary {
  min-height: 40px;
}

/* Workspace chip: less left inset, and a long project name ends in an
   ellipsis instead of being cut mid-letter. */
:root[data-form-factor="phone"] .workspace-menu-button {
  padding: 3px 6px 3px 8px;
}

:root[data-form-factor="phone"] .workspace-menu-button .status-chip-action-row {
  gap: 4px;
  min-width: 0;
  width: 100%;
}

:root[data-form-factor="phone"] .workspace-menu-button .status-chip-action-row strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-form-factor="phone"] .workspace-menu-button .status-chip-action-row > :not(strong) {
  flex: 0 0 auto;
}

:root[data-form-factor="phone"] .workspace-menu-button .status-chip-chevron {
  width: 6px;
  height: 6px;
  font-size: 0;
  margin: -2px 2px 2px 1px;
}

/* Phone workspace access keeps only a folder and its live save state. */
:root[data-form-factor="phone"] .status-strip > .workspace-menu-shell { flex: 0 0 44px; min-width: 44px; max-width: 44px; }
:root[data-form-factor="phone"] .workspace-menu-button { flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; border-radius: 6px; }
:root[data-form-factor="phone"] .workspace-menu-button > span:first-child,
:root[data-form-factor="phone"] .workspace-menu-button .status-chip-action-row strong,
:root[data-form-factor="phone"] .workspace-menu-button .status-chip-chevron { display: none; }
:root[data-form-factor="phone"] .workspace-menu-button .workspace-menu-icon { display: flex; flex: 0 0 24px; width: 24px; height: 24px; }
:root[data-form-factor="phone"] .workspace-menu-icon svg { width: 24px; height: 24px; }
:root[data-form-factor="phone"] .workspace-menu-button .status-chip-action-row { position: absolute; width: 0; height: 0; gap: 0; }
:root[data-form-factor="phone"] .workspace-menu-button .autosave-indicator,
:root[data-form-factor="phone"] .workspace-menu-button .autosave-indicator svg { width: 14px; height: 14px; }
:root[data-form-factor="phone"] .workspace-menu-button .autosave-indicator { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:root[data-form-factor="phone"] .workspace-menu-button .workspace-menu-icon { color: var(--control-text); }
:root[data-form-factor="phone"] .workspace-menu-button:has(.autosave-indicator.is-saved:not(.hidden)) .workspace-menu-icon { color: var(--accent-success); }
:root[data-form-factor="phone"] .workspace-menu-button:has(.autosave-indicator.is-error:not(.hidden)) .workspace-menu-icon { color: var(--accent-danger); }
:root[data-form-factor="phone"] body .top-bar > .top-bar-left { flex: 1 1 auto; width: auto; min-width: 64px; }
:root[data-form-factor="phone"] .top-bar .status-strip { flex: 0 0 auto; }
:root[data-form-factor="phone"] .top-bar .title-block { flex: 1 1 auto; min-width: 0; width: 100%; container-type: inline-size; }
:root[data-form-factor="phone"] .title-block strong { font-size: clamp(13px, 18cqw, 26px); }
:root[data-form-factor="phone"] .top-bar { --phone-header-cell-width: clamp(44px, 11vw, 48px); }
:root[data-form-factor="phone"] .top-bar .status-strip > :is(.operation-mode-shell, .workspace-menu-shell, #imageryPicker, #aiChatToggleBtn, .settings-menu-shell) { flex: 0 0 var(--phone-header-cell-width); width: var(--phone-header-cell-width); min-width: var(--phone-header-cell-width); max-width: var(--phone-header-cell-width); }
:root[data-form-factor="phone"] .top-bar .status-strip > .operation-mode-shell:has(#operationModeButton) { flex-basis: 80px; width: 80px; min-width: 80px; max-width: 80px; }
:root[data-form-factor="phone"] .top-bar :is(.operation-mode-button, .workspace-menu-button, #imageryPickerButton, #aiChatToggleBtn, #settingsMenuBtn) { width: 100%; min-width: 0; max-width: none; padding-inline: 4px; }
:root[data-form-factor="phone"] .top-bar .operation-mode-button { font-size: 11px; gap: 3px; }

:root[data-form-factor="phone"] .workspace-menu-button > span:first-child {
  white-space: nowrap;
}

/* HF LCD: keep the frequency clear of the mode line beneath it. */
:root[data-form-factor="phone"] .hf-prc160-frequency {
  line-height: 1.2;
  padding-bottom: 3px;
}

:root[data-form-factor="phone"] .hf-prc160-mode-row {
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  margin-top: 2px;
  padding-top: 3px;
}

/* ---- HF LCD faces (supersedes the earlier tweaks) ------------------------
 * The desktop screen is a fixed 3.6:1 grid; with rows hidden the frequency and
 * mode line overprinted each other. On a phone the screen sizes to its
 * content: centred frequency, then one mode line.
 */
:root[data-form-factor="phone"] .hf-prc160-screen {
  align-items: center;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  grid-template-rows: none;
  justify-content: center;
  padding: 10px 6px 8px;
}

:root[data-form-factor="phone"] .hf-prc160-frequency {
  align-items: baseline;
  border: 0;
  column-gap: 4px;
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

:root[data-form-factor="phone"] .hf-prc160-frequency > strong {
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}

:root[data-form-factor="phone"] .hf-prc160-frequency > em {
  font-size: 0.6rem;
  font-style: normal;
}

:root[data-form-factor="phone"] .hf-prc160-mode-row {
  border-top: 1px solid rgba(4, 18, 6, 0.4);
  font-size: 0.56rem;
  font-weight: 800;
  gap: 2px 8px;
  justify-content: center;
  letter-spacing: 0.04em;
  margin-top: 0;
  padding-top: 5px;
  width: 100%;
}

/* ---- HF view tabs: equal cells, straight dividers ------------------------ */
:root[data-form-factor="phone"] .hf-plan-view-toggle:not([hidden]) {
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 6px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: auto;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

:root[data-form-factor="phone"] .hf-plan-view-toggle > button {
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  border-right: 1px solid var(--border);
  box-shadow: none;
  display: flex;
  flex: none;
  font-size: 0.68rem;
  justify-content: center;
  letter-spacing: 0.05em;
  margin: 0;
  min-height: 40px;
  padding: 0 4px;
  text-align: center;
  white-space: nowrap;
  width: auto;
}

:root[data-form-factor="phone"] .hf-plan-view-toggle > button:nth-child(3n) {
  border-right: 0;
}

:root[data-form-factor="phone"] .hf-plan-view-toggle > button:nth-last-child(-n + 3) {
  border-bottom: 0;
}

/* ---- Analysis header: section picker left, phase carousel right ---------- */
:root[data-form-factor="phone"] .analysis-phase-tabs-shell.is-hf-phase-carousel {
  align-items: stretch;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

:root[data-form-factor="phone"] .analysis-phase-tabs-shell.is-hf-phase-carousel > * {
  margin: 0;
  min-width: 0;
}

/* ---- HF path list stow/expand --------------------------------------------
 * Stowed, the list is a single 48px bar holding its label and a 36px expand
 * button. Expanded, the same button is a 36px square, not a 64px tab that hung
 * out of its row.
 */
:root[data-form-factor="phone"] .hf-plan-link-stow-button {
  align-self: center;
  flex: 0 0 36px;
  height: 36px;
  min-height: 36px;
  width: 36px;
}

:root[data-form-factor="phone"] .hf-plan-workspace.is-link-list-stowed .hf-plan-link-list {
  flex: 0 0 auto;
  height: 48px;
  max-height: 48px;
  min-height: 48px;
  overflow: hidden;
  position: relative;
}

:root[data-form-factor="phone"] .hf-plan-workspace.is-link-list-stowed .hf-plan-link-picker-row {
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  min-height: 0;
  padding: 0 6px 0 12px;
}

:root[data-form-factor="phone"] .hf-plan-workspace.is-link-list-stowed .hf-plan-link-rail-label {
  align-items: center;
  flex-direction: row;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

:root[data-form-factor="phone"] .hf-plan-workspace.is-link-list-stowed .hf-plan-link-rail-label span {
  writing-mode: horizontal-tb;
}

/* VOACAP engine selector: sized to its label, menu kept on screen. */
:root[data-form-factor="phone"] .hf-plan-engine-control {
  flex: 0 0 auto;
  max-width: 120px;
}

:root[data-form-factor="phone"] .hf-plan-engine-trigger {
  gap: 6px;
  padding: 0 8px;
  width: auto;
}

:root[data-form-factor="phone"] .hf-plan-engine-scroll {
  /* A bottom sheet: the card that owns the selector clips anything inside it,
     which cut the last engine off. */
  bottom: calc(var(--tabbar-h) + 8px);
  left: 8px;
  max-height: 60dvh;
  overflow-y: auto;
  min-width: 0;
  position: fixed;
  right: 8px;
  top: auto;
  transform: none;
  width: auto;
  z-index: 2100;
}

/* Autosave: no idle ring beside the workspace name. */
:root[data-form-factor="phone"] .autosave-indicator .autosave-spinner {
  display: none;
}

/* HF tab grid must span the full header width. */
:root[data-form-factor="phone"] .hf-plan-view-toggle:not([hidden]) {
  grid-column: 1 / -1;
}

:root[data-form-factor="phone"] .hf-plan-engine-trigger {
  min-width: 0;
}

/* Link picker caption ("Unit-linked HF path") wrapped to three lines; the
   quality dot and link count say the same thing. */
:root[data-form-factor="phone"] .hf-plan-link-picker-meta > small {
  display: none;
}

:root[data-form-factor="phone"] .hf-plan-link-picker-trigger-copy {
  align-items: center;
  flex-wrap: nowrap;
}

/* ======================================================================
 * PHONE - GNSS INTERFERENCE
 * The jammer form and the map shared one row, leaving the map ~60px wide.
 * On a phone they stack: form first, then a map tall enough to read.
 * ====================================================================== */
:root[data-form-factor="phone"] .analysis-gnss-workspace:not(.is-map-fullscreen) {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .analysis-gnss-workspace:not(.is-map-fullscreen) > * {
  flex: 0 0 auto;
  max-height: none;
  width: 100%;
}

:root[data-form-factor="phone"] .analysis-gnss-config-divider {
  display: none;
}

:root[data-form-factor="phone"] .analysis-gnss-workspace:not(.is-map-fullscreen) .analysis-gnss-config {
  height: auto;
  overflow: visible;
}

:root[data-form-factor="phone"] .analysis-gnss-map-pane {
  height: min(70dvh, 560px);
  min-height: 360px;
}

/* ======================================================================
 * PHONE - SENSOR PICTURE
 * Two stacked grid rows: the sensor list, and a map pane whose own toolbar
 * and legend consumed all of its 196px, leaving a 1px map. The workspace
 * scrolls instead, with the map given most of a screen.
 * ====================================================================== */
:root[data-form-factor="phone"] .analysis-sensor-picture-workspace {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .analysis-sensor-picture-left {
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}

:root[data-form-factor="phone"] .analysis-sensor-picture-left-content {
  height: auto;
  overflow: visible;
}

:root[data-form-factor="phone"] .analysis-sensor-picture-resize-divider {
  display: none;
}

:root[data-form-factor="phone"] .analysis-sensor-picture-map-pane {
  flex: 0 0 auto;
  height: min(78dvh, 640px);
  min-height: 420px;
}

/* ---- Collection comms: scroll the page, give the map a real height ------- */
:root[data-form-factor="phone"] .collection-layout {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .collection-layout > * {
  flex: 0 0 auto;
  max-height: none;
}

:root[data-form-factor="phone"] .collection-stage {
  grid-template-rows: min(62dvh, 520px) auto auto;
  height: auto;
}

:root[data-form-factor="phone"] .collection-stage > .collection-map-pane {
  min-height: 320px;
}

/* ---- Jamming effects: same treatment as GNSS (form, then a real map) ------ */
:root[data-form-factor="phone"] .analysis-jamming-workspace {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .analysis-jamming-workspace > * {
  flex: 0 0 auto;
  max-height: none;
  width: 100%;
}

:root[data-form-factor="phone"] .analysis-jamming-layout {
  display: flex;
  flex-direction: column;
  height: auto;
  min-width: 0;
}

:root[data-form-factor="phone"] .analysis-jamming-layout > * {
  flex: 0 0 auto;
  max-height: none;
  min-width: 0;
  width: 100%;
}

:root[data-form-factor="phone"] .analysis-jamming-layout [class*="divider"],
:root[data-form-factor="phone"] .analysis-jamming-layout [class*="resizer"] {
  display: none;
}

:root[data-form-factor="phone"] .analysis-jamming-map-pane {
  height: min(70dvh, 560px);
  min-height: 360px;
}

/* ---- Spectrum / EW: the plot gets most of a screen under the carousel ------ */
:root[data-form-factor="phone"] .analysis-spectrum-workspace {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .analysis-spectrum-carousel {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
}

:root[data-form-factor="phone"] .analysis-spectrum-plot-shell {
  flex: 0 0 auto;
  height: min(66dvh, 540px);
  min-height: 360px;
}

:root[data-form-factor="phone"] .analysis-spectrum-axis-layer {
  font-size: 0.5rem;
}

/* ---- C2 ------------------------------------------------------------------- */
:root[data-form-factor="phone"] .analysis-c2-continuity-note {
  grid-template-columns: minmax(0, 1fr);
}

:root[data-form-factor="phone"] .analysis-c2-continuity-note > small {
  justify-self: start;
  text-align: left;
}

:root[data-form-factor="phone"] .analysis-c2-workspace-header {
  grid-template-columns: 34px minmax(0, 1fr) 34px;
}

:root[data-form-factor="phone"] .analysis-c2-workspace-header > :nth-child(4) {
  grid-column: 1 / -1;
  min-height: 40px;
  width: 100%;
}

/* ---- Settings tab carousel ------------------------------------------------
 * Built by installSettingsTabCarousel (phone-shell.js). The 13-tab strip is
 * hidden on phones; the carousel replaces it.
 */
.phone-tab-carousel {
  display: none;
}

:root[data-form-factor="phone"] #settingsMenu .settings-tab-bar[data-carousel="true"] {
  display: none;
}

:root[data-form-factor="phone"] #settingsMenu .phone-tab-carousel {
  align-items: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  padding: 8px 10px;
}

.phone-tab-carousel-step {
  align-items: center;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 6px;
  color: var(--text);
  display: flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  padding: 0;
  touch-action: manipulation;
}

.phone-tab-carousel-step:active {
  background: var(--control-bg-hover, rgba(255, 255, 255, 0.08));
}

.phone-tab-carousel-select {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 6px;
  color: var(--text);
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  height: 44px;
  letter-spacing: 0.08em;
  min-width: 0;
  padding: 0 12px;
  text-align: center;
  text-align-last: center;
  text-transform: uppercase;
}

/* ---- Map Contents sheet header --------------------------------------------
 * Row 1: Contents / Phasing toggle. Row 2: phase bar and search side by side.
 * Row 3: tool buttons. Row 4: the list (or the phasing panel).
 */
:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-card {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-panel-mode-toggle {
  grid-column: 1 / -1;
  grid-row: 1;
  height: 40px;
  min-height: 40px;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-panel-mode-toggle .panel-mode-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .operation-active-phase-strip {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-search-row {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-card:has(.operation-active-phase-strip.hidden) .map-contents-search-row {
  grid-column: 1 / -1;
}

:root[data-form-factor="phone"] body[data-current-view="map"] #mapContentsActions {
  grid-column: 1 / -1;
  grid-row: 3;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-list,
:root[data-form-factor="phone"] body[data-current-view="map"] #siteStudySection:not(.hidden) {
  grid-column: 1 / -1;
  grid-row: 4;
}

/* Phase bar: arrows at the edges, name over time, both larger. */
:root[data-form-factor="phone"] body[data-current-view="map"] .operation-active-phase-strip {
  align-items: center;
  gap: 2px;
  padding: 0 2px;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .operation-active-phase-main {
  align-items: center;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .operation-active-phase-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .operation-active-phase-copy strong {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .operation-active-phase-copy span {
  font-size: 0.68rem;
  line-height: 1.1;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .operation-phase-nav-btn {
  flex: 0 0 28px;
  height: 100%;
  min-width: 28px;
  width: 28px;
}

/* Search: larger text, vertically centred in a 44px box. */
:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-search-row .map-contents-search-shell {
  align-items: center;
  display: flex;
  gap: 6px;
  padding: 0 10px;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-contents-search-row input {
  font-size: 16px;
  height: 100%;
  min-width: 0;
  padding: 0;
}

/* ======================================================================
 * 3D (Cesium) MODE
 * 3D has its own zoom buttons, compass and tilt/rotation panel. They follow
 * the 2D layout: zoom stacked at left, compass under it, and the tilt panel
 * parked above the bottom row instead of floating over the top of the map.
 * The bottom row lifts clear of the Cesium logo and credit line.
 * ====================================================================== */
:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage-3d .cesium-zoom-controls {
  flex-direction: column;
  height: auto;
  left: var(--map-zoom-offset);
  top: var(--map-overlay-top);
  width: 34px;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage-3d .cesium-zoom-controls button {
  font-size: 20px;
  height: 34px;
  line-height: 32px;
  width: 34px;
}

:root:is([data-form-factor="phone"], [data-form-factor="tablet"]) body[data-current-view="map"] .map-stage-3d .cesium-compass {
  height: 34px;
  left: var(--map-zoom-offset);
  top: calc(var(--map-overlay-top) + 69px + 8px);
  width: 34px;
}

:root[data-form-factor="phone"] body[data-current-view="map"] .map-stage-3d #cesiumInclinometer {
  bottom: 96px;
  left: auto;
  right: 10px;
  top: auto;
}

:root[data-form-factor="phone"] body[data-current-view="map"] #mapView .map-stage-3d .bottom-center {
  bottom: 46px;
}

:root[data-form-factor="phone"] body[data-current-view="map"]:has(.map-stage-3d) .phone-sheet-fab {
  bottom: calc(var(--tabbar-h) + 46px);
}

/* ======================================================================
 * PHONE - T/O TOOLBAR (single row)
 * [+ Add Unit] [affiliation filter] [workspace | table] [Auto Layout]
 * The filter and the view toggle are icon buttons; Clear All is not offered on
 * a phone, where a stray tap would wipe the plan.
 * ====================================================================== */
:root[data-form-factor="phone"] #planView .to-toolbar {
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
  padding: 6px 8px;
}

:root[data-form-factor="phone"] #planView .to-toolbar > .to-toolbar-section,
:root[data-form-factor="phone"] #planView .to-toolbar > .to-toolbar-section-right {
  display: contents;
}

:root[data-form-factor="phone"] #planView #toClearAllBtn {
  display: none;
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAddUnitBtn,
:root[data-form-factor="phone"] #planView .to-toolbar #toAutoLayoutBtn {
  flex: 0 0 auto;
  white-space: nowrap;
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAutoLayoutBtn {
  margin-left: auto;
}

/* Affiliation filter: a funnel button (same menu as before). */
:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-shell {
  flex: 0 0 40px;
  min-width: 40px;
  width: 40px;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger {
  align-items: center;
  display: flex;
  font-size: 0;
  height: 36px;
  justify-content: center;
  min-width: 40px;
  padding: 0;
  width: 40px;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger > * {
  display: none;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger::before,
:root[data-form-factor="phone"] #planView .to-toolbar .topo-display-btn::before {
  background: currentColor;
  content: "";
  height: 20px;
  width: 20px;
  -webkit-mask: var(--to-tool-icon) center / contain no-repeat;
  mask: var(--to-tool-icon) center / contain no-repeat;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger {
  --to-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 5h16l-6 7.2V19l-4 2v-8.8z'/%3E%3C/svg%3E");
}

/* Workspace / Table toggle: two icon segments. */
:root[data-form-factor="phone"] #planView .to-toolbar .to-toolbar-views-section {
  flex: 0 0 auto;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-display-btn {
  align-items: center;
  display: flex;
  font-size: 0;
  justify-content: center;
  min-width: 40px;
  padding: 0;
  width: 40px;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-display-btn[data-to-display="workspace"] {
  --to-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='5' rx='1.2'/%3E%3Crect x='3' y='16' width='6' height='5' rx='1.2'/%3E%3Crect x='15' y='16' width='6' height='5' rx='1.2'/%3E%3Cpath d='M12 8v4M6 16v-4h12v4'/%3E%3C/svg%3E");
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-display-btn[data-to-display="table"] {
  --to-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M3 15h18M10 4v16'/%3E%3C/svg%3E");
}

/* Legacy #planView rules out-rank the icon buttons above; pin the essentials. */
:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger,
:root[data-form-factor="phone"] #planView .to-toolbar .topo-display-btn {
  font-size: 0 !important;
  min-width: 40px !important;
  padding: 0 !important;
  width: 40px !important;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger::before,
:root[data-form-factor="phone"] #planView .to-toolbar .topo-display-btn::before {
  flex: 0 0 20px;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-shell {
  min-width: 40px !important;
  width: 40px !important;
}

/* ======================================================================
 * PHONE - ICON TOOLBARS (T/O and Emitters)
 * Cleaner filter glyph, + unit / + emitter glyph buttons, an icon-only auto
 * layout button, and the Emitters view picker as a dropdown.
 * ====================================================================== */
.phone-toggle-select {
  display: none;
}

:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger,
:root[data-form-factor="phone"] #topologyView .topo-toolbar .topo-filter-trigger {
  --to-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 5h17l-6.5 8v6.5l-4-2V13z'/%3E%3C/svg%3E");
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAddUnitBtn,
:root[data-form-factor="phone"] #topologyView #topoAddEmitterBtn,
:root[data-form-factor="phone"] #planView .to-toolbar #toAutoLayoutBtn,
:root[data-form-factor="phone"] #topologyView #topoAutoLayoutBtn {
  align-items: center;
  display: inline-flex;
  font-size: 0 !important;
  height: 36px;
  justify-content: center;
  min-height: 36px;
  min-width: 0 !important;
  padding: 0 !important;
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAddUnitBtn::before,
:root[data-form-factor="phone"] #topologyView #topoAddEmitterBtn::before,
:root[data-form-factor="phone"] #planView .to-toolbar #toAutoLayoutBtn::before,
:root[data-form-factor="phone"] #topologyView #topoAutoLayoutBtn::before {
  background: currentColor;
  content: "";
  flex: 0 0 auto;
  -webkit-mask: var(--to-tool-icon) center / contain no-repeat;
  mask: var(--to-tool-icon) center / contain no-repeat;
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAddUnitBtn,
:root[data-form-factor="phone"] #topologyView #topoAddEmitterBtn {
  flex: 0 0 56px;
  width: 56px !important;
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAddUnitBtn::before,
:root[data-form-factor="phone"] #topologyView #topoAddEmitterBtn::before {
  height: 22px;
  width: 30px;
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAddUnitBtn {
  --to-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 12h7M6.5 8.5v7'/%3E%3Crect x='13' y='6' width='16' height='12' rx='1.6'/%3E%3Cpath d='M13 6l16 12M29 6L13 18'/%3E%3C/svg%3E");
}

:root[data-form-factor="phone"] #topologyView #topoAddEmitterBtn {
  --to-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2.5 12h6M5.5 9v6'/%3E%3Ccircle cx='21' cy='12' r='1.8'/%3E%3Cpath d='M17.3 8.3a5.2 5.2 0 0 0 0 7.4M24.7 8.3a5.2 5.2 0 0 1 0 7.4M14.6 5.6a9 9 0 0 0 0 12.8M27.4 5.6a9 9 0 0 1 0 12.8'/%3E%3C/svg%3E");
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAutoLayoutBtn,
:root[data-form-factor="phone"] #topologyView #topoAutoLayoutBtn {
  --to-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.6'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.6'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.6'/%3E%3C/svg%3E");
  flex: 0 0 40px;
  margin-left: auto;
  width: 40px !important;
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAutoLayoutBtn::before,
:root[data-form-factor="phone"] #topologyView #topoAutoLayoutBtn::before {
  height: 20px;
  width: 20px;
}

/* Emitters toolbar: phase on its own row, then one row of controls. */
:root[data-form-factor="phone"] #topologyView .topo-toolbar {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
}

:root[data-form-factor="phone"] #topologyView .topo-toolbar > .topo-toolbar-section:not(.workspace-phase-carousel),
:root[data-form-factor="phone"] #topologyView .topo-toolbar > .to-toolbar-section-right {
  display: contents;
}

:root[data-form-factor="phone"] #topologyView .topo-toolbar > .workspace-phase-carousel {
  flex: 1 1 100%;
}

:root[data-form-factor="phone"] #topologyView #topoShowAllRfLinksBtn {
  display: none;
}

:root[data-form-factor="phone"] #topologyView .topo-display-toggle:not([hidden]) {
  display: none;
}

:root[data-form-factor="phone"] #topologyView .phone-toggle-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--control-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1f1f1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  color: var(--text);
  display: block;
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  height: 36px;
  min-width: 0;
  padding: 0 32px 0 12px;
}

/* Frequency filter: the same icon button as the T/O affiliation filter. */
:root[data-form-factor="phone"] #topologyView .topo-filter-shell,
:root[data-form-factor="phone"] #topologyView .topo-filter-trigger {
  flex: 0 0 40px;
  min-width: 40px !important;
  width: 40px !important;
}

:root[data-form-factor="phone"] #topologyView .topo-filter-trigger {
  align-items: center;
  display: flex;
  font-size: 0 !important;
  height: 36px;
  justify-content: center;
  padding: 0 !important;
}

:root[data-form-factor="phone"] #topologyView .topo-filter-trigger > * {
  display: none;
}

:root[data-form-factor="phone"] #topologyView .topo-filter-trigger::before {
  background: currentColor;
  content: "";
  flex: 0 0 20px;
  height: 20px;
  width: 20px;
  -webkit-mask: var(--to-tool-icon) center / contain no-repeat;
  mask: var(--to-tool-icon) center / contain no-repeat;
}

/* Filter glyph: a plain funnel. Auto layout keeps its fixed 40px even though an
   earlier rule let it grow to fill the row. */
:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger,
:root[data-form-factor="phone"] #topologyView .topo-toolbar .topo-filter-trigger {
  --to-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 5h16l-6.5 8v6h-3v-6Z'/%3E%3C/svg%3E");
}
:root[data-form-factor="phone"] #planView .to-toolbar .topo-filter-trigger::after { display: none; }

:root[data-form-factor="phone"] #planView .to-toolbar > .to-toolbar-section-right > #toAutoLayoutBtn,
:root[data-form-factor="phone"] #planView .to-toolbar #toAutoLayoutBtn,
:root[data-form-factor="phone"] #topologyView #topoAutoLayoutBtn {
  flex: 0 0 40px !important;
  max-width: 40px;
  width: 40px !important;
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAddUnitBtn::before,
:root[data-form-factor="phone"] #topologyView #topoAddEmitterBtn::before {
  height: 24px;
  width: 36px;
}

/* Auto Layout keeps its label, set tighter than before. */
:root[data-form-factor="phone"] #planView .to-toolbar > .to-toolbar-section-right > #toAutoLayoutBtn,
:root[data-form-factor="phone"] #planView .to-toolbar #toAutoLayoutBtn,
:root[data-form-factor="phone"] #topologyView #topoAutoLayoutBtn {
  flex: 0 0 auto !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.02em;
  max-width: none;
  padding: 0 10px !important;
  white-space: nowrap;
  width: auto !important;
}

:root[data-form-factor="phone"] #planView .to-toolbar #toAutoLayoutBtn::before,
:root[data-form-factor="phone"] #topologyView #topoAutoLayoutBtn::before {
  display: none;
}

/* Dialog fields: every input, select and picker is a rounded rectangle. */
:root[data-input="coarse"] .emitter-modal :is(input, select, textarea, .to-select, .to-input, .to-picker-button),
:root[data-input="coarse"] .workspace-project-modal :is(input, select, textarea),
:root[data-input="coarse"] #settingsMenu :is(input, select, textarea) {
  border-radius: 6px !important;
}

/* Every text field, select and textarea on a touch device is a 6px rounded
   rectangle (shape grammar: inputs 4-6px), including the compact Add Unit
   dialog's selects that inherited square corners. */
:root[data-input="coarse"] :is(select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) {
  border-radius: 6px !important;
}

/* Emitters: keep sections that hide themselves hidden (spectrum grouping), and
   let the view dropdown shrink so all four controls share one row. */
:root[data-form-factor="phone"] #topologyView .topo-toolbar > .topo-spectrum-group-control {
  display: none;
}

:root[data-form-factor="phone"] #topologyView.is-spectrum-display .topo-toolbar > .topo-spectrum-group-control {
  display: flex;
  flex: 1 1 100%;
  gap: 6px;
}

:root[data-form-factor="phone"] #topologyView.is-spectrogram-display .topo-toolbar > .topo-frequency-filter-control {
  display: none;
}

:root[data-form-factor="phone"] #topologyView .phone-toggle-select {
  flex: 1 1 0;
}

/* ======================================================================
 * PHONE - EMITTERS "VIEW" OPTIONS
 * Row 1: phase. Row 2: [View options] [+ emitter] [Auto Layout].
 * Row 3 (only while open): view dropdown, frequency filter and, in spectrum
 * views, group-by-net / show-sensors.
 * ====================================================================== */
.phone-options-btn {
  display: none;
}

:root[data-form-factor="phone"] #topologyView .phone-options-btn {
  align-items: center;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 6px;
  color: var(--text);
  display: inline-flex;
  flex: 1 1 auto;
  font-size: 0.74rem;
  font-weight: 700;
  gap: 8px;
  height: 36px;
  justify-content: center;
  letter-spacing: 0.06em;
  padding: 0 12px;
  text-transform: uppercase;
}

:root[data-form-factor="phone"] #topologyView .phone-options-btn[aria-expanded="true"] {
  background: var(--control-selected-bg, rgba(255, 255, 255, 0.12));
  border-color: var(--control-border-hover);
}

/* Closed: the option controls are not in the toolbar at all. */
:root[data-form-factor="phone"] #topologyView .topo-toolbar:not(.phone-options-open) > :is(.topo-toolbar-views, .topo-frequency-filter-control, .topo-spectrum-group-control) {
  display: none !important;
}

/* Group-by-net / show-sensors only exist in the spectrum view. */
:root[data-form-factor="phone"] #topologyView:not(.is-spectrum-display) .topo-toolbar > .topo-spectrum-group-control {
  display: none !important;
}

/* Open: each option gets a full-width row under the buttons. */
:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open > :is(.topo-toolbar-views, .topo-frequency-filter-control) {
  display: flex !important;
  flex: 1 1 100%;
  order: 10;
}

:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open > .topo-spectrum-group-control {
  flex: 1 1 100%;
  gap: 6px;
  order: 11;
}

:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open .topo-frequency-filter-control .topo-filter-shell,
:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open .topo-frequency-filter-control .topo-filter-trigger {
  flex: 1 1 100%;
  width: 100% !important;
}

:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open .topo-frequency-filter-control .topo-filter-trigger {
  font-size: 0.78rem !important;
  justify-content: flex-start;
  padding: 0 12px !important;
}

:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open .topo-frequency-filter-control .topo-filter-trigger::before {
  display: none;
}

:root[data-form-factor="phone"] #topologyView .phone-toggle-select {
  flex: 1 1 100%;
}

:root[data-form-factor="phone"] #topologyView .phone-options-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open > .topo-frequency-filter-control,
:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open > .topo-toolbar-views {
  width: 100%;
}

:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open .topo-frequency-filter-control .topo-filter-shell {
  flex: 1 1 auto;
  min-width: 0 !important;
}

:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open .topo-frequency-filter-control .topo-filter-shell {
  display: flex;
}

:root[data-form-factor="phone"] #topologyView .topo-toolbar.phone-options-open .topo-frequency-filter-control .topo-filter-trigger {
  flex: 1 1 auto;
  min-width: 0 !important;
  width: auto !important;
}

/* ---- Spectrum axis: only labels that fit ---------------------------------
 * Frequency labels and band names (HF, VHF, ...) collided at phone width.
 * Band names are dropped and every other frequency label is shown, so nothing
 * overprints. The ticks themselves stay.
 */
:root[data-form-factor="phone"] .topo-spectrum-band-label {
  display: none;
}

:root[data-form-factor="phone"] .topo-spectrum-axis-layer .topo-spectrum-axis-label {
  font-size: 0.56rem;
}

:root[data-form-factor="phone"] .topo-spectrum-axis-layer .topo-spectrum-axis-label:nth-of-type(even):not(.is-start):not(.is-end) {
  display: none;
}

:root[data-form-factor="phone"] .topo-spectrum-axis-layer .topo-spectrum-axis-label.is-end {
  display: none;
}

:root[data-form-factor="phone"] .topo-spectrum-axis-layer .topo-spectrum-axis-label:last-of-type {
  display: none;
}

/* Dialog titles with a glyph (Add Emitter, ...): glyph left of the title on one
   line instead of stacked above it. */
:root[data-form-factor="phone"] .emitter-modal-header .emitter-modal-title-group:has(> svg) {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

:root[data-form-factor="phone"] .emitter-modal-header .emitter-modal-title-group > svg {
  flex: 0 0 auto;
  height: 22px;
  width: 22px;
}

:root[data-form-factor="phone"] .emitter-modal-header .emitter-modal-title-group:has(> svg) > h2 {
  flex: 1 1 auto;
}

/* ---- Settings: Modes / Views cards ---------------------------------------
 * The cards were a two-column grid whose text column collapsed to ~35px,
 * wrapping the description one word per line. On a phone each card stacks:
 * copy first, then its toggle full width.
 */
:root[data-form-factor="phone"] #settingsMenu .settings-view-card,
:root[data-form-factor="phone"] #settingsMenu .settings-phase-time-card {
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

:root[data-form-factor="phone"] #settingsMenu .settings-view-card > *,
:root[data-form-factor="phone"] #settingsMenu .settings-phase-time-card > * {
  min-width: 0;
}

:root[data-form-factor="phone"] #settingsMenu .settings-modes-top-grid {
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

:root[data-form-factor="phone"] #settingsMenu .settings-view-card :is(.settings-x-check-row, label) {
  min-height: 44px;
}

/* ---- Settings: Docs --------------------------------------------------------
 * A jump-to-section dropdown (built by installDocsJump) replaces the TOC list;
 * the article fills the remaining height and scrolls.
 */
.phone-docs-jump {
  display: none;
}

:root[data-form-factor="phone"] #settingsPanelDocumentation.is-active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

:root[data-form-factor="phone"] #settingsPanelDocumentation .settings-docs-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

:root[data-form-factor="phone"] #settingsPanelDocumentation .settings-docs-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

:root[data-form-factor="phone"] #settingsPanelDocumentation .settings-docs-nav {
  display: none;
}

:root[data-form-factor="phone"] #settingsPanelDocumentation .phone-docs-jump {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 6px;
  color: var(--text);
  display: block;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  height: 44px;
  padding: 0 12px;
  width: 100%;
}

:root[data-form-factor="phone"] #settingsPanelDocumentation .settings-docs-content {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Docs reading progress. Same look as .sensor-library-progress (defined in the
   lazily loaded workspace sheet), repeated here so it never depends on that
   sheet having loaded. */
.phone-docs-progress {
  display: none;
}

:root[data-form-factor="phone"] .phone-docs-progress {
  display: block;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 2px;
  flex: 0 0 3px;
  height: 3px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

:root[data-form-factor="phone"] .phone-docs-progress > span {
  background: linear-gradient(90deg, #4a1a8a 0%, #7f2b9c 18%, #b92f67 38%, #f47b2d 58%, #c83b61 78%, #651f92 100%);
  clip-path: inset(0 calc(100% - var(--sensor-library-progress, 0%)) 0 0);
  inset: 0;
  position: absolute;
  transition: clip-path 120ms linear;
}

/* ======================================================================
 * PHONE - ANALYSIS: SENSOR-TO-SHOOTER (KILL WEB)
 * The graph is a ~1090px-wide drawing squeezed to 355px, which left node labels
 * at ~3px with empty bands above and below. It now renders at a readable
 * scale inside its frame and pans by finger in both directions.
 * ====================================================================== */
:root[data-form-factor="phone"] .analysis-killweb-canvas {
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .analysis-killweb-canvas > svg {
  height: auto;
  max-width: none;
  min-width: 700px;
  width: 700px;
}

:root[data-form-factor="phone"] .analysis-killweb-canvas {
  height: min(64dvh, 540px);
  max-height: none;
  min-height: 320px;
}

/* ---- Analysis header: section picker + phase dropdown share one row -------- */
.phone-phase-select {
  display: none;
}

:root[data-form-factor="phone"] .analysis-phase-tabs-shell:not(.is-hf-phase-carousel) {
  align-items: stretch;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

:root[data-form-factor="phone"] .analysis-phase-tabs-shell:not(.is-hf-phase-carousel) > #analysisPhaseTabs {
  display: none;
}

:root[data-form-factor="phone"] .analysis-phase-tabs-shell:not(.is-hf-phase-carousel) > .analysis-view-picker {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

:root[data-form-factor="phone"] .analysis-phase-tabs-shell:not(.is-hf-phase-carousel) > .phone-phase-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--control-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1f1f1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 14px no-repeat;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  color: var(--text);
  display: block;
  font-size: 16px;
  font-weight: 700;
  grid-column: 2;
  grid-row: 1;
  min-height: 40px;
  min-width: 0;
  padding: 0 28px 0 10px;
  text-overflow: ellipsis;
}

/* Preferences icon joins the picker/phase row; kill-web frame sizes to its
   content so the legend sits under the graph instead of over it. */
:root[data-form-factor="phone"] .analysis-phase-tabs-shell:not(.is-hf-phase-carousel) {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
}

:root[data-form-factor="phone"] .analysis-phase-tabs-shell:not(.is-hf-phase-carousel) > #killWebPreferencesButton {
  grid-column: 3;
  grid-row: 1;
  height: 40px;
  width: 40px;
}

:root[data-form-factor="phone"] .analysis-killweb {
  height: auto;
  max-height: none;
}

:root[data-form-factor="phone"] .analysis-killweb-canvas {
  flex: 0 0 auto;
}

/* ---- Analysis: Targeting Kill Chains ---------------------------------------
 * Prose that restates the controls is hidden; the two pick actions share one
 * row; the phase tag duplicates the phase dropdown.
 */
:root[data-form-factor="phone"] .kill-chain-phase-tag,
:root[data-form-factor="phone"] .kill-chain-anchor-hint,
:root[data-form-factor="phone"] .kill-chain-counterpart-hint {
  display: none;
}

:root[data-form-factor="phone"] .kill-chain-anchor-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

:root[data-form-factor="phone"] .kill-chain-anchor-actions > button {
  font-size: 0.78rem;
  min-height: 40px;
  width: 100%;
}

:root[data-form-factor="phone"] .analysis-no-data-state-content p {
  display: none;
}

/* ======================================================================
 * PHONE - KILL WEB (supersedes the earlier scale experiment)
 * The whole graph fits the screen; the operator pinch-zooms for detail.
 * RF Paths and Relay become glyph buttons beside the reset glyph.
 * ====================================================================== */
:root[data-form-factor="phone"] .analysis-killweb-canvas {
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-x pan-y pinch-zoom;
}

:root[data-form-factor="phone"] .analysis-killweb-canvas > svg {
  height: auto;
  min-width: 0;
  width: 100%;
}

:root[data-form-factor="phone"] .analysis-killweb-header-right > button.ghost-button,
:root[data-form-factor="phone"] .analysis-killweb-relay-toggle {
  align-items: center;
  display: inline-flex;
  font-size: 0 !important;
  height: 34px;
  justify-content: center;
  min-width: 0 !important;
  padding: 0 !important;
  width: 34px !important;
}

:root[data-form-factor="phone"] .analysis-killweb-header-right > button.ghost-button::before,
:root[data-form-factor="phone"] .analysis-killweb-relay-toggle::before {
  background: currentColor;
  content: "";
  height: 20px;
  width: 20px;
  -webkit-mask: var(--kw-icon) center / contain no-repeat;
  mask: var(--kw-icon) center / contain no-repeat;
}

:root[data-form-factor="phone"] .analysis-killweb-header-right > button.ghost-button {
  --kw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 6h5c4 0 5 12 13 12M3 12h18M3 18h5c4 0 5-12 13-12'/%3E%3C/svg%3E");
}

:root[data-form-factor="phone"] .analysis-killweb-relay-toggle {
  --kw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='5' cy='6' r='2.2'/%3E%3Ccircle cx='19' cy='6' r='2.2'/%3E%3Ccircle cx='12' cy='18' r='2.6'/%3E%3Cpath d='M6.7 7.6 10.6 16M17.3 7.6 13.4 16'/%3E%3C/svg%3E");
}

:root[data-form-factor="phone"] .analysis-killweb-relay-toggle > * {
  display: none;
}

:root[data-form-factor="phone"] .analysis-killweb-relay-toggle.is-enabled {
  border-color: var(--accent-info);
  color: var(--accent-info);
}

:root[data-form-factor="phone"] .analysis-killweb-relay-toggle.is-disabled {
  color: var(--text-muted, var(--muted));
}

/* ---- Themed phase dropdown (built by installPhaseSelect) ------------------ */
.phone-phase-picker {
  display: none;
}

:root[data-form-factor="phone"] .analysis-phase-tabs-shell:not(.is-hf-phase-carousel) > .phone-phase-picker {
  display: block;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  position: relative;
}

:root[data-form-factor="phone"] .phone-phase-button {
  align-items: center;
  background: var(--control-bg);
  border: 1px solid var(--phase-color, var(--control-border));
  border-radius: 6px;
  color: var(--text);
  display: flex;
  gap: 8px;
  height: 40px;
  padding: 0 10px 0 8px;
  text-align: left;
  width: 100%;
}

:root[data-form-factor="phone"] .phone-phase-bar {
  align-self: stretch;
  border-radius: 2px;
  flex: 0 0 3px;
  margin: 6px 0;
}

:root[data-form-factor="phone"] .phone-phase-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}

:root[data-form-factor="phone"] .phone-phase-copy strong {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-form-factor="phone"] .phone-phase-copy small {
  color: var(--text-muted, var(--muted));
  font-size: 0.62rem;
  line-height: 1.1;
}

:root[data-form-factor="phone"] .phone-phase-menu {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  display: grid;
  gap: 4px;
  padding: 4px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: min(260px, calc(100vw - 16px));
  z-index: 2100;
}

:root[data-form-factor="phone"] .phone-phase-menu[hidden] {
  display: none;
}

:root[data-form-factor="phone"] .phone-phase-option {
  align-items: center;
  background: var(--control-bg);
  border: 1px solid var(--phase-color, var(--control-border));
  border-radius: 6px;
  color: var(--text);
  display: flex;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px 0 8px;
  text-align: left;
}

:root[data-form-factor="phone"] .phone-phase-option.is-active {
  background: rgba(255, 255, 255, 0.1);
}

/* ---- Sensor-to-Shooter page: scrolls as one page; recommendation map sized to read --- */
:root[data-form-factor="phone"] .analysis-sensor-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .analysis-sensor-layout > * {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
}

:root[data-form-factor="phone"] .analysis-reco-map-panel {
  height: auto;
}

:root[data-form-factor="phone"] .analysis-reco-map-chip {
  height: min(58dvh, 460px);
  min-height: 300px;
}

/* The distance / legs readout overlapped a third of the map; it rides under it. */
:root[data-form-factor="phone"] .analysis-reco-map-overlay {
  background: var(--bg-elevated);
  border-radius: 0 0 6px 6px;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: auto;
  width: auto;
}

/* ---- C2: one scrolling page, no dead panel ------------------------------- */
:root[data-form-factor="phone"] .analysis-c2-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:root[data-form-factor="phone"] .analysis-c2-layout > * {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
}

:root[data-form-factor="phone"] .analysis-c2-workspace {
  grid-template-rows: none;
  overflow: visible;
}

/* The Command Web heading repeats the summary above it and overprinted its
   own legend. */
:root[data-form-factor="phone"] #analysisCommandCard .analysis-killweb-title {
  display: none;
}

/* Command web: the drawing is ~6:1, so it scrolls sideways inside a frame that
   is exactly screen width (it was stretching its column to 596px). */
:root[data-form-factor="phone"] .analysis-c2-layout,
:root[data-form-factor="phone"] .analysis-c2-layout > *,
:root[data-form-factor="phone"] .analysis-c2-left,
:root[data-form-factor="phone"] .analysis-c2-left > * {
  max-width: 100%;
  min-width: 0;
}

:root[data-form-factor="phone"] #analysisCommandCard .analysis-killweb-canvas {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}

:root[data-form-factor="phone"] #analysisCommandCard .analysis-killweb-canvas > svg {
  min-width: 900px;
  width: 900px;
}

:root[data-form-factor="phone"] .analysis-command-tree-nav-label {
  flex-wrap: wrap;
  font-size: 0.66rem;
  max-width: 100%;
  white-space: normal;
}

/* ---- Collection comms: glyph actions, smaller map inset ------------------- */
:root[data-form-factor="phone"] #analysisCollectionCard button[data-collection-pairing-action="add"],
:root[data-form-factor="phone"] #analysisCollectionCard button[data-collection-pairing-action="remove"] {
  align-items: center;
  display: inline-flex;
  font-size: 0 !important;
  height: 40px;
  justify-content: center;
  min-width: 40px;
  padding: 0 !important;
  width: 40px;
}

:root[data-form-factor="phone"] #analysisCollectionCard button[data-collection-pairing-action]::before {
  background: currentColor;
  content: "";
  height: 20px;
  width: 20px;
  -webkit-mask: var(--co-icon) center / contain no-repeat;
  mask: var(--co-icon) center / contain no-repeat;
}

:root[data-form-factor="phone"] #analysisCollectionCard button[data-collection-pairing-action="add"] {
  --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

:root[data-form-factor="phone"] #analysisCollectionCard button[data-collection-pairing-action="remove"] {
  --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

:root[data-form-factor="phone"] .collection-visual-pip {
  height: 84px;
  width: 112px;
}

/* ---- Sensor Picture header: counts on one row, no restated prose ----------- */
:root[data-form-factor="phone"] .analysis-narrative-copy > p {
  display: none;
}

:root[data-form-factor="phone"] .analysis-narrative-copy > strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

:root[data-form-factor="phone"] .analysis-narrative-panel .analysis-mini-stat-grid {
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:root[data-form-factor="phone"] .analysis-narrative-panel .analysis-mini-stat-grid > * {
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
  text-align: center;
}

/* Spectrum / EW: the cluster carousel took 470px for a few dots and a
   paragraph, pushing the plot below the fold. Cap it; the plot leads. */
:root[data-form-factor="phone"] .analysis-spectrum-carousel {
  max-height: 210px;
  overflow: auto;
}

/* Analysis forms: field captions were ~7px uppercase. A floor of 10px keeps
   them readable without growing the controls. */
:root[data-form-factor="phone"] #analyzeView label {
  font-size: max(0.64rem, 10px);
  letter-spacing: 0.05em;
}

/* ======================================================================
 * PHONE / TABLET - HF PLANNING + ANALYSIS PICKER POLISH
 * ====================================================================== */
/* Section dropdown opens inside the screen, anchored to the picker's left
   edge (it was right-anchored and spilled 140px off the left). */
:root[data-form-factor="phone"] .analysis-view-picker .analysis-section-menu {
  left: 0;
  right: auto;
  width: min(330px, calc(100vw - 16px));
}

/* Selected rows and HF view tabs are white with black text like every other
   selected control, not blue-tinted. */
:root[data-form-factor="phone"] .analysis-section-menu > button[aria-selected="true"],
:root[data-form-factor="phone"] .hf-plan-view-toggle > button.is-active,
:root[data-form-factor="tablet"] .hf-plan-view-toggle > button.is-active {
  background: var(--text);
  color: var(--bg);
}

:root[data-form-factor="phone"] .analysis-section-menu > button[aria-selected="true"] small {
  color: color-mix(in srgb, var(--bg) 70%, transparent);
}

/* Link bar: one compact row. */
:root[data-form-factor="phone"] .hf-plan-link-picker-row {
  padding: 4px 6px;
}

:root[data-form-factor="phone"] .hf-plan-link-picker,
:root[data-form-factor="phone"] .hf-plan-link-picker-trigger {
  height: 44px;
  min-height: 0;
}

:root[data-form-factor="phone"] .hf-plan-link-picker-trigger {
  padding: 0 8px;
}

:root[data-form-factor="phone"] .analysis-section-menu > button[data-analysis-section-choice] {
  align-items: center;
  box-shadow: none;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 44px;
}

:root[data-form-factor="phone"] .analysis-section-menu > button[data-analysis-section-choice] small {
  flex: 0 1 auto;
  text-align: right;
}

:root[data-form-factor="phone"] .analysis-section-menu > button[aria-selected="true"] small {
  color: color-mix(in srgb, var(--bg) 75%, var(--text));
}