/* Native navigator uses existing workbench tokens. View navigation has no easing. */
.jtc-native-navigator { min-width: 0; color: var(--painting-text-body, var(--color-text)); }
.jtc-navigator-surface { position: relative; width: 100%; height: 144px; overflow: hidden; touch-action: none;
  background: var(--painting-surface, var(--color-surface-soft)); border: 1px solid var(--painting-line, var(--color-border));
  border-radius: var(--radius-control); cursor: crosshair; }
.jtc-navigator-thumbnail, .jtc-navigator-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jtc-navigator-overlay polygon { fill: none; stroke: var(--painting-accent, var(--color-accent-vision)); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.jtc-navigator-message { position: absolute; inset: 8px; display: grid; place-items: center; text-align: center;
  font-size: 12px; line-height: 1.5; color: var(--painting-text-muted, var(--color-text-muted)); pointer-events: none; }
.jtc-navigator-message[hidden], .jtc-navigator-thumbnail[hidden] { display: none; }
.jtc-navigator-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.jtc-navigator-controls label { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  min-height: 32px; font-size: 12px; white-space: nowrap; }
.jtc-navigator-controls input { width: 64px; max-width: 100%; min-width: 0; height: 32px; padding: 4px;
  border: 1px solid var(--painting-line, var(--color-border)); border-radius: var(--radius-control);
  color: inherit; background: var(--painting-surface-raised, var(--color-surface)); text-align: center; font: inherit; }
.jtc-navigator-controls button { min-width: 0; min-height: 32px; padding: 4px 8px; font: inherit; font-size: 12px;
  border: 1px solid var(--painting-line, var(--color-border)); border-radius: var(--radius-control);
  color: inherit; background: var(--painting-surface-raised, var(--color-surface)); white-space: normal; overflow-wrap: anywhere; }
.jtc-navigator-controls button[aria-pressed="true"] { color: var(--painting-accent, var(--color-accent-vision));
  background: var(--painting-accent-soft, var(--color-surface-soft)); }
.jtc-navigator-controls :focus-visible, .jtc-navigator-surface:focus-visible { outline: 2px solid var(--painting-accent, var(--color-accent-vision)); outline-offset: 2px; }
.jtc-navigator-controls input[aria-invalid="true"] { border-color: var(--painting-danger); }
@media (pointer: coarse) {
  .jtc-navigator-controls button, .jtc-navigator-controls input, .jtc-navigator-controls label { min-height: 44px; }
  .jtc-navigator-controls input { height: 44px; }
}
@media (max-width: 430px) { .jtc-navigator-controls label { flex-wrap: wrap; } }

/* Formal painting host: viewport-only controls, existing palette/tokens. */
.mode-page[data-page='painting'] .painting-view-navigator-window {
  position: fixed; top: 96px; right: 20px; width: 252px; min-width: 0;
  padding: 10px; border: 1px solid var(--painting-line, var(--color-border));
  border-radius: var(--radius-panel, 12px); color: var(--painting-text-body, var(--color-text));
  background: var(--painting-surface-raised, var(--color-surface));
}
.mode-page[data-page='painting'] .painting-view-navigator-window[hidden] { display: none !important; }
.mode-page[data-page='painting'] .painting-view-navigator-window > .painting-floating-head {
  margin-bottom: 8px; gap: 8px; justify-content: space-between; flex-wrap: wrap;
}
.mode-page[data-page='painting'] .painting-view-navigator-window > .painting-floating-head button { min-width: 44px; min-height: 44px; }
.mode-page[data-page='painting'] .painting-view-finger-option { display: flex; gap: 6px; align-items: center; min-height: 44px; font-size: 12px; }
.mode-page[data-page='painting'] #paintingViewPreferenceStatus { display: block; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.mode-page[data-page='painting'] .painting-canvas-stage[data-tool='view-rotate'] { cursor: grab; }
.mode-page[data-page='painting'] .painting-canvas-stage[data-tool='view-rotate'][data-dragging='true'] { cursor: grabbing; }
.mode-page[data-page='painting'] :is(.painting-floating-window, .painting-large-float) {
  min-width: 0 !important; max-width: var(--painting-floating-safe-width, calc(100vw - 16px)) !important;
  max-height: min(var(--painting-floating-safe-height, calc(100dvh - 16px)), var(--painting-floating-default-max-height, 100dvh)) !important;
  box-sizing: border-box;
}
.mode-page[data-page='painting'] :is(.painting-stage-float, .painting-ai-float)[data-floating-viewport-escape='true'] { overflow: auto; }
.mode-page[data-page='painting'] :is(.painting-floating-head, .painting-panel-head) { min-width: 0; }
.mode-page[data-page='painting'] :is(.painting-stage-float, .painting-ai-float) :is(.painting-floating-head, .painting-panel-head) {
  flex-wrap: wrap; overflow-wrap: anywhere;
}
.mode-page[data-page='painting'] :is(.painting-stage-float, .painting-ai-float) :is(.painting-floating-head, .painting-panel-head) > * { min-width: 0; max-width: 100%; }
@media (max-width: 620px) {
  .mode-page[data-page='painting'] .painting-view-navigator-window { width: min(252px, calc(100vw - 16px)); }
  .mode-page[data-page='painting'] .painting-view-tools { flex-wrap: wrap; }
}