#gcode-preview-dialog { width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); box-sizing: border-box; margin: auto; padding: 20px; border: 1px solid var(--ws-line); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); box-shadow: var(--ws-menu-shadow); font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif; }
#gcode-preview-dialog::backdrop { background: var(--ws-backdrop); }
#gcode-preview-dialog header, #gcode-preview-dialog .gp-toolbar, #gcode-preview-dialog .gp-playback { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#gcode-preview-dialog header { justify-content: space-between; margin-bottom: 4px; }
#gcode-preview-dialog h2 { margin: 2px 0; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 20px; }
#gcode-preview-dialog h3 { margin: 0 0 10px; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 14px; }
#gcode-preview-dialog .gp-eyebrow { display: none; }
#gcode-preview-dialog p { font-size: 12.5px; line-height: 1.5; }
#gcode-preview-dialog .gp-intro, #gcode-preview-dialog .gp-assumptions { color: var(--text-secondary); }
#gcode-preview-dialog #gp-status { padding: 8px 12px; border-radius: var(--ws-radius-input); background: var(--background); border-left: 3px solid var(--ws-primary-ring); }
#gcode-preview-dialog .gp-error { color: var(--text-primary); border-left-color: var(--error) !important; }
#gcode-preview-dialog .gp-layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 16px; }
#gcode-preview-dialog .gp-visual, #gcode-preview-dialog aside { min-width: 0; }
#gcode-preview-dialog button, #gcode-preview-dialog select, #gcode-preview-dialog input:not([type=range]):not([type=checkbox]) { box-sizing: border-box; min-height: var(--ws-input-h); padding: 0 10px; border: 1px solid var(--border-color); border-radius: var(--ws-radius-input); font: inherit; font-size: 12.5px; color: var(--text-primary); background: var(--background); }
#gcode-preview-dialog button { cursor: pointer; background: transparent; color: var(--ws-text-label); }
#gcode-preview-dialog button:hover { background: var(--surface-light); color: var(--text-primary); }
#gcode-preview-dialog button:disabled { opacity: .45; cursor: default; }
#gcode-preview-dialog :focus-visible { outline: 2px solid var(--ws-primary-ring); outline-offset: 2px; }
#gcode-preview-dialog #gp-play { background: var(--accent); border-color: var(--accent); color: var(--background); font-weight: 600; min-width: 74px; }
#gcode-preview-dialog #gp-play:hover { background: var(--accent); color: var(--background); opacity: .9; }
#gcode-preview-dialog label { font-size: 12px; color: var(--ws-text-label); }
#gcode-preview-dialog .gp-toolbar label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#gcode-preview-dialog .gp-stage { position: relative; margin-top: 8px; }
#gcode-preview-dialog #gp-canvas { display: block; width: 100%; height: 340px; background: var(--background); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-input); box-sizing: border-box; touch-action: none; cursor: crosshair; }
#gcode-preview-dialog #gp-scene { position: absolute; inset: 0; border-radius: var(--ws-radius-input); overflow: hidden; background: var(--background); touch-action: none; }
#gcode-preview-dialog #gp-scene[hidden] { display: none; }
/* Preview3D positions its canvas inline at z-index 10; the toolbar, legend and assumptions pill sit above the stage. */
#gcode-preview-dialog #gp-scene canvas { z-index: 0 !important; }
#gcode-preview-dialog .gp-view { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--border-color); border-radius: var(--ws-radius-input); background: var(--background); }
#gcode-preview-dialog .gp-view button { min-height: calc(var(--ws-input-h) - 6px); padding: 0 10px; border: none; border-radius: calc(var(--ws-radius-input) - 2px); font-weight: 600; }
#gcode-preview-dialog .gp-view button[aria-pressed="true"] { background: var(--accent); color: var(--background); }
#gcode-preview-dialog .gp-3d-only { display: none; }
#gcode-preview-dialog.gp-3d .gp-3d-only { display: inline-flex; }
#gcode-preview-dialog.gp-3d .gp-2d-only, #gcode-preview-dialog.gp-3d .gp-legend { display: none; }
#gcode-preview-dialog .gp-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-secondary); }
#gcode-preview-dialog .gp-legend span:first-child { color: var(--accent); }
#gcode-preview-dialog .gp-legend .gp-lead-in { color: var(--ws-lead-in); }
#gcode-preview-dialog .gp-legend .gp-lead-out { color: var(--ws-lead-out); }
#gcode-preview-dialog #gp-lead-note { font-size: 12px; margin: 6px 0 10px; }
#gcode-preview-dialog #gp-progress { width: 100%; margin: 12px 0; accent-color: var(--accent); }
#gcode-preview-dialog #gp-time { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
#gcode-preview-dialog .gp-playback label { display: inline-flex; align-items: center; gap: 6px; }
#gcode-preview-dialog #gp-readout { display: block; min-height: 56px; font: 12.5px/1.8 'JetBrains Mono', 'SF Mono', Menlo, monospace; overflow-wrap: anywhere; }
#gcode-preview-dialog #gp-position { display: block; font-size: 14px; white-space: pre-wrap; }
#gcode-preview-dialog #gp-machine { display: block; margin-top: 4px; color: var(--text-secondary); }
#gcode-preview-dialog #gp-line-form { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
#gcode-preview-dialog #gp-line { width: 90px; }
#gcode-preview-dialog #gp-code { overflow: auto; max-height: 350px; border: 1px solid var(--ws-line); border-radius: var(--ws-radius-input); background: var(--background); }
#gcode-preview-dialog #gp-code button { display: flex; gap: 12px; width: 100%; border: 0; border-radius: 0; text-align: left; min-height: 28px; font: 12px/1.5 'JetBrains Mono', 'SF Mono', Menlo, monospace; padding: 4px 8px; background: transparent; color: var(--ws-text-label); }
#gcode-preview-dialog #gp-code button span { color: var(--ws-text-muted); min-width: 35px; text-align: right; }
#gcode-preview-dialog #gp-code code { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
#gcode-preview-dialog #gp-code button.gp-current { background: var(--ws-accent-tint); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent); }
#gcode-preview-dialog #gp-code button.gp-current span { color: var(--text-primary); }
#gcode-preview-dialog #gp-findings { max-height: 150px; overflow: auto; }
#gcode-preview-dialog #gp-findings p { font-size: 12px; }
#gcode-preview-dialog .gp-assumptions { margin-top: 14px; border-top: 1px solid var(--ws-line); padding-top: 12px; font-size: 12.5px; }
#gcode-preview-dialog summary { cursor: pointer; min-height: 28px; }
#gcode-preview-dialog .gp-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
#gcode-preview-dialog .gp-fields label { display: flex; flex-direction: column; gap: 6px; }
#gcode-preview-dialog .gp-fields input { min-width: 0; width: 100%; }
@media (max-width: 700px) {
    #gcode-preview-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 14px; }
    #gcode-preview-dialog .gp-layout { grid-template-columns: 1fr; gap: 14px; }
    #gcode-preview-dialog #gp-canvas { height: 260px; }
    #gcode-preview-dialog .gp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #gcode-preview-dialog input:not([type=range]), #gcode-preview-dialog select { font-size: 16px !important; }
}
#gcode-preview-dialog.gp-docked { position: absolute; inset: 0; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; display: grid; grid-template-rows: 32px minmax(0, 1fr) 230px; grid-template-columns: minmax(0, 1fr) 380px; background: var(--background); z-index: 20; }
#gcode-preview-dialog.gp-docked header { grid-column: 1 / -1; grid-row: 1; margin: 0; padding: 0 10px; background: var(--surface); border-bottom: 1px solid var(--ws-line); }
#gcode-preview-dialog.gp-docked header h2 { font-size: 13px; margin: 0; }
#gcode-preview-dialog.gp-docked header h2::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
#gcode-preview-dialog.gp-docked #gp-close { min-height: 24px; padding: 0 8px; font-size: 12px; }
#gcode-preview-dialog.gp-docked .gp-intro { display: none; }
#gcode-preview-dialog.gp-docked #gp-lead-note { display: block; font-size: 11px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gcode-preview-dialog.gp-docked #gp-status { grid-column: 1 / -1; grid-row: 1; justify-self: center; align-self: center; margin: 0 auto; padding: 0 10px; font-size: 11.5px; background: transparent; border: none; color: var(--text-secondary); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gcode-preview-dialog.gp-docked #gp-status.gp-error { border-left: 3px solid var(--error); padding-left: 8px; color: var(--text-primary); }
#gcode-preview-dialog.gp-docked .gp-layout { display: contents; }
#gcode-preview-dialog.gp-docked .gp-visual { display: contents; }
#gcode-preview-dialog.gp-docked .gp-visual > .gp-toolbar:first-child { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; margin: 8px; padding: 4px; background: var(--surface); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-seg); z-index: 1; }
#gcode-preview-dialog.gp-docked .gp-stage { grid-column: 1 / -1; grid-row: 2; margin: 0; min-height: 0; }
#gcode-preview-dialog.gp-docked #gp-canvas { height: 100%; margin: 0; border: none; border-radius: 0; }
#gcode-preview-dialog.gp-docked #gp-scene { border-radius: 0; }
#gcode-preview-dialog.gp-docked .gp-legend { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; margin: 8px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-seg); z-index: 1; }
#gcode-preview-dialog.gp-docked .gp-dock { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--ws-line); min-width: 0; overflow: auto; }
#gcode-preview-dialog.gp-docked aside { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; padding: 8px; background: var(--surface); border-top: 1px solid var(--ws-line); border-left: 1px solid var(--ws-line); min-height: 0; }
#gcode-preview-dialog.gp-docked aside h3, #gcode-preview-dialog.gp-docked #gp-line-form { display: none; }
#gcode-preview-dialog.gp-docked #gp-code { flex: 1; max-height: none; border: none; background: transparent; }
#gcode-preview-dialog.gp-docked #gp-findings { max-height: 60px; }
#gcode-preview-dialog.gp-docked .gp-assumptions { grid-column: 1 / -1; grid-row: 2; justify-self: end; align-self: start; margin: 8px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-seg); font-size: 11px; z-index: 1; }
#gcode-preview-dialog.gp-docked .gp-assumptions[open] { position: absolute; top: 40px; right: 8px; width: min(460px, 60%); max-height: calc(100% - 48px); overflow: auto; margin: 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-input); box-shadow: var(--ws-menu-shadow); z-index: 30; }
#gcode-preview-dialog.gp-docked .gp-assumptions .gp-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
#gcode-preview-dialog.gp-docked #gp-progress { margin: 4px 0; }
#gcode-preview-dialog.gp-docked #gp-readout { min-height: 0; font-size: 12px; line-height: 1.5; }
#gcode-preview-dialog.gp-docked #gp-position { font-size: 12px; white-space: nowrap; }
@media (max-width: 1199px) {
    /* The narrower 220px dock column wraps the lead/playback toolbars onto
     * extra lines; grow the dock row to fit that instead of letting the
     * readout get squeezed out by the flex column's overflow:auto. */
    #gcode-preview-dialog.gp-docked { grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: 32px minmax(0, 1fr) 300px; }
    #gcode-preview-dialog.gp-docked .gp-assumptions .gp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}