/* Scoped to the replacement 02 readout; all other instrument and shell styles unchanged. */
.attention-hud .phase-segment{stroke-width:.65;stroke:currentColor;fill:#071217;stroke-opacity:.2}
.attention-hud .phase-segment.complete{fill:currentColor;fill-opacity:.85;stroke-opacity:1;filter:drop-shadow(0 0 1px currentColor) drop-shadow(0 0 2px currentColor)}
.attention-hud .phase-segment.current{fill:currentColor;fill-opacity:.16;stroke-opacity:1;stroke-width:1.5;filter:drop-shadow(0 0 1px currentColor)}
.attention-hud .project-code{fill:#def5f5;stroke:none;font:8px ui-monospace,monospace;letter-spacing:.1px}
.attention-hud .workflow-led{stroke:none;fill:#fff2c7;color:#eeb850;filter:drop-shadow(0 0 1px currentColor) drop-shadow(0 0 3px currentColor)}
.attention-hud .workflow-led.red{fill:#ffe2e3;color:#dc5866}

/* Remaining steps stay dark, but their full seven-step structure is legible. */
.attention-hud .phase-segment.future{fill:#173039;fill-opacity:.88;stroke:#638b96;stroke-opacity:.65;stroke-width:.8}

.attention-hud .phase-heading-box{fill:#0a2028;stroke:#628f99;stroke-width:.8}
.attention-hud .phase-heading{font:6.5px ui-monospace,monospace;fill:#d4f9fa;stroke:none}
.attention-hud [data-development]{cursor:pointer;outline:none}
.attention-hud .column-hit{fill:transparent;stroke:none;pointer-events:all}
.attention-hud [data-development].selected .column-hit{fill:#a6eaf00b;stroke:#b7eff333;stroke-width:.7}
.attention-hud [data-development]:focus-visible .column-hit{stroke:#d6ffff;stroke-width:1}
.attention-hud .selected .current{stroke-width:2;fill-opacity:.3}
.attention-hud .project-page{cursor:pointer}
.attention-hud .project-page rect{fill:#0a2028;stroke:#628f99;stroke-width:.8}
.attention-hud .project-page text{font:8px ui-monospace,monospace;fill:#d4f9fa;stroke:none}

/* The phase field is shown only while a project column is hovered. */
.attention-hud .phase-heading-box,.attention-hud .phase-heading{visibility:hidden;pointer-events:none}
.attention-hud .development-chart:has(> [data-development]:hover) .phase-heading-box,
.attention-hud .development-chart:has(> [data-development]:hover) .phase-heading{visibility:visible}
.attention-hud .phase-heading-box{stroke:var(--hover-project-color,#628f99)}

/* Keyboard/touch selection exposes the same phase-only field as hover. */
.attention-hud .development-chart.phase-selected .phase-heading-box,
.attention-hud .development-chart.phase-selected .phase-heading{visibility:visible}

.attention-hud .hud-face{position:relative}
.attention-hud .development-info{position:absolute;z-index:8;top:0;left:50%;transform:translate(-50%,-35%);width:260px;max-width:calc(100% + 28px);box-sizing:border-box;padding:7px 9px;border:1px solid var(--project-color);background:rgba(5,17,22,.97);box-shadow:0 0 5px color-mix(in srgb,var(--project-color) 25%,transparent);color:#e9f7f8;text-align:left;pointer-events:none;font:11px/1.35 system-ui,sans-serif;letter-spacing:0;text-transform:none}
.attention-hud .development-info[hidden]{display:none}
.attention-hud .development-info strong{display:block;font-size:12px;font-weight:500;margin-bottom:3px;overflow-wrap:anywhere}
.attention-hud .development-info span{display:block;overflow-wrap:anywhere}
/* Keep the complete information field within the instrument's clipped mobile viewport. */
.attention-hud .development-info{transform:translateX(-50%);max-width:100%;top:0}