/* 07-viewport.css: index.html@cd3fd3f lines 446-524 (viewport, canvas, overlay, info badge, viewport/gizmo control bars).
   06 T1 deleted the dead .grid-lines rule (its only element was commented out in the markup; that comment went too).
   06 T4a deleted the third-party logo (its inline SVG in the overlay and its rule), and maps the rest to role tokens: the
   info badge is the translucent overlay chip (--color-surface-overlay; text keeps >= 6.15:1 over any scene).
   06 T4b: the viewport watermark, morph-monogram-dark.svg at 44 px, top-left beside the gizmo column (20 px gutter +
   40 px button + 20 px gap = left 80 px; top 24 px centres its 32.5 px height on the first button). Full opacity, no
   filter, never recoloured; not a control (no id, no hover, no tab stop, no pointer events). It follows #pilot-info
   in the DOM, so the general-sibling rule hides it whenever the centred pilot banner shows (no JS, no :has()).
   will-change: transform gives it its own compositing layer (a hint only; it does not alter the artwork): without it
   Chrome paints the image into the layer of the overlay buttons and re-rasterises their SVG icons with a different
   anti-aliasing (up to 74 levels on the icon edges, found by the 06 T4b gate), so the watermark would change pixels
   far outside its own rectangle.
   B-L24 (the selection badge covering the help badge) landed in 06 T4a: .selection-indicator in
   09-viewport-tools.css sits 12 px above this file's .viewport-info (bottom: 20px), anchored to it by the anchor name
   --help-badge, so it also clears a help badge that wraps to two lines in a narrow viewport; bottom: 64px while the
   badge is one line, and the fallback where anchor positioning is unsupported.
   Slice of the original <style> minus the deleted rules, rewritten to role tokens (css-slices.mjs --report-only lists
   the difference, 07 S7); link order = file number. Do not reorder rules across files. */
.viewport {
    position: relative;
    background: var(--color-bg-app);
    overflow: hidden;
}

#three-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.viewport-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.viewport-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    anchor-name: --help-badge;
}

.info-badge {
    background: var(--color-surface-overlay);
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-secondary);
}

.viewport-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: all;
}

.gizmo-controls {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: all;
}

.brand-watermark {
    position: absolute;
    top: 24px;
    left: 80px;
    width: 44px;
    height: auto;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

.pilot-info.visible ~ .brand-watermark {
    visibility: hidden;
}