/* Workshop presentation only. Measurement models, state and persistence are unchanged. */
#workshopView {
 --ws-gap: var(--db-space-5); --ws-radius: var(--db-radius);
 color: var(--db-ink); font-size: 16px; line-height: 1.6;
 max-width: 1120px; margin-inline: auto; padding-block: var(--db-space-6);
}
#workshopView [hidden] { display: none !important; }
#workshopView *, #workshopView *::before, #workshopView *::after { box-sizing: border-box; }
#workshopView .lesson-heading { margin-bottom: var(--ws-gap); }
#workshopView .lesson-heading .eyebrow { color: var(--db-cyan); font-size: 12px; letter-spacing: 1.8px; }
#workshopView #workshopTitle { margin: 8px 0; font-size: var(--db-title); line-height: 1.2; letter-spacing: -.8px; }
#workshopView .workshop-intro { margin: 0; color: var(--db-muted); font-size: 17px; }
#workshopView button, #workshopView select, #workshopView input { min-height: 48px; font-size: 16px; }
#workshopView button { white-space: normal; }
#workshopView :is(button,a,select,input,summary):focus-visible { outline: 3px solid var(--db-cyan); outline-offset: 4px; }
#workshopView .tool-gallery { padding: 0; border: 0; background: transparent; box-shadow: none; margin: 0 0 var(--db-space-6); }
#workshopView .tool-gallery-heading { display: block; margin: 0; }
#workshopView .tool-gallery-heading .eyebrow { display: none; }
#workshopView .tool-gallery-heading h2 { font-size: 24px; line-height: 1.3; }
#workshopView .tool-gallery-note { margin: 8px 0 20px; font-size: 15px; line-height: 1.6; color: var(--db-muted); }
#workshopView .tool-gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--db-space-4); }
#workshopView .tool-card {
 --tool-accent: var(--db-cyan); position: relative; text-align: left;
 gap: 12px; padding: 20px; border: 1px solid var(--db-border); border-radius: var(--ws-radius);
 background: linear-gradient(145deg,var(--db-surface-raised),var(--db-surface)); box-shadow: none;
 transition: border-color .18s, background .18s; min-width: 0;
}
#workshopView .tool-card[data-tool-card="multimeter"] { --tool-accent: var(--db-orange-soft); }
#workshopView .tool-card[data-tool-card="test-light"] { --tool-accent: var(--db-teal); }
#workshopView .tool-card.is-interactive::before { content: ''; position: absolute; top: 0; left: 20px; right: 55%; height: 2px; background: var(--tool-accent); }
#workshopView .tool-card.is-interactive::after { content: 'Open tool →'; color: var(--tool-accent); font-size: 15px; font-weight: 700; margin-top: 8px; }
#workshopView .tool-card.is-interactive:hover { transform: none; border-color: var(--tool-accent); background: var(--db-surface-raised); box-shadow: var(--db-shadow); }
#workshopView .tool-card-art { aspect-ratio: 16/11; border: 0; border-radius: var(--db-radius-small); background: radial-gradient(ellipse at center,#13678840,transparent 72%); }
#workshopView .tool-card-art::before { opacity: .5; }
#workshopView .tool-card-art img { width: 86%; height: 88%; }
#workshopView .tool-card h3 { font-size: 22px; line-height: 1.3; color: var(--db-ink); }
#workshopView .tool-card p { font-size: 15px; line-height: 1.6; color: var(--db-muted); }
#workshopView .tool-render-badge { font-size: 11px; letter-spacing: 1px; padding: 6px 8px; top: 0; right: 0; border-color: var(--db-border); color: var(--tool-accent,var(--db-cyan)); }
#workshopView .workshop-reference { margin-top: var(--ws-gap); border-top: 1px solid var(--db-border); padding-top: var(--db-space-4); }
#workshopView .workshop-reference summary { cursor: pointer; min-height: 48px; padding: 12px 0; color: var(--db-muted); font-size: 16px; }
#workshopView .workshop-reference .tool-gallery-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
#workshopView .tool-card.is-reference { opacity: 1; padding: 12px; pointer-events: auto; user-select: auto; background: var(--db-surface); }
#workshopView .tool-card.is-reference h3 { font-size: 17px; }
#workshopView .tool-card.is-reference .tool-render-badge { font-size: 10px; letter-spacing: .4px; padding: 4px; }
#workshopView .essentials-heading { margin: var(--db-space-6) 0 var(--db-space-4); padding-top: var(--ws-gap); font-size: 24px; line-height: 1.3; border-color: var(--db-border); }
#workshopView .hub-grid { gap: var(--db-space-4); }
#workshopView .hub-card { gap: 16px; padding: 20px 36px 20px 20px; border-radius: var(--ws-radius); background: var(--db-surface); }
#workshopView .hub-card .home-option-copy strong { font-size: 21px; line-height: 1.3; }
#workshopView .hub-card .home-option-copy > span:not(.option-detail) { font-size: 15px; line-height: 1.6; margin-top: 8px; }
#workshopView .hub-card .option-detail { font-size: 13px; line-height: 1.5; }
#workshopView .lesson-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--ws-gap); }
#workshopView .lesson-tabs button { padding: 12px 18px; border-radius: var(--db-radius-small); }
#workshopView .diagnostic-tool-workspace { padding: var(--ws-gap); gap: var(--ws-gap); margin: 0; border-radius: var(--ws-radius); border-color: var(--db-border); background: var(--db-surface); box-shadow: none; }
#workshopView .diagnostic-tool-header { gap: 16px; align-items: center; }
#workshopView .diagnostic-tool-header h2 { font-size: 28px; line-height: 1.3; }
#workshopView .diagnostic-tool-header .eyebrow { font-size: 12px; line-height: 1.6; letter-spacing: 1px; }
#workshopView .diagnostic-scenario-banner { gap: 16px; padding: 16px; border-radius: var(--db-radius-small); border-color: var(--db-border); }
#workshopView .diagnostic-scenario-banner strong { font-size: 18px; line-height: 1.4; }
#workshopView .diagnostic-scenario-select { font-size: 14px; }
#workshopView .diagnostic-tool-layout { gap: var(--ws-gap); grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
#workshopView .diagnostic-tool-hero { border-color: var(--db-border); border-radius: var(--db-radius-small); }
#workshopView .multimeter-hero { min-height: 320px; }
#workshopView .tool-controls { gap: 16px; }
#workshopView .diagnostic-segmented { gap: 8px; padding: 8px; border-radius: var(--db-radius-small); }
#workshopView .diagnostic-segmented button { font-size: 15px; border-radius: 6px; }
#workshopView .diagnostic-tool-field { font-size: 15px; line-height: 1.5; gap: 8px; }
#workshopView .diagnostic-lead-row { gap: 16px; }
#workshopView .probe-connection-strip > span { padding: 12px; font-size: 14px; line-height: 1.5; }
#workshopView .probe-connection-strip b { font-size: 12px; }
#workshopView .diagnostic-result { padding: 20px; gap: 12px; border-radius: var(--db-radius-small); }
#workshopView .diagnostic-result-caption { font-size: 13px; }
#workshopView .diagnostic-result-reading { font-size: clamp(28px,4vw,40px); line-height: 1.3; }
#workshopView .diagnostic-result-note { font-size: 15px; line-height: 1.6; }
#workshopView .scan-tool-layout { gap: 20px; grid-template-columns: 180px minmax(0,1fr); padding: 16px; }
#workshopView .scan-menu { gap: 8px; }
#workshopView .scan-menu button { font-size: 15px; line-height: 1.4; padding: 12px; }
#workshopView .scan-device-bar strong, #workshopView .scan-device-bar span { font-size: 13px; }
#workshopView .scan-scope { padding: 12px; gap: 12px; }
#workshopView .scan-scope-field { font-size: 14px; line-height: 1.5; }
#workshopView .scan-panel h3 { font-size: 20px; }
#workshopView :is(.dtc-card,.live-data-card,.actuator-card) { padding: 16px; gap: 8px; border-radius: 8px; }
#workshopView :is(.dtc-card p,.actuator-card p,.live-data-card small,.scan-feedback,.diagnostic-empty) { font-size: 14px; line-height: 1.6; }
#workshopView .live-data-card span { font-size: 14px; }
#workshopView .live-data-card strong, #workshopView .actuator-card strong { font-size: 18px; }
@media (max-width: 900px) {
 #workshopView .workshop-reference .tool-gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 #workshopView .diagnostic-tool-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
 #workshopView .scan-tool-layout { grid-template-columns: minmax(0,1fr); }
 #workshopView .scan-menu { grid-template-columns: repeat(3,minmax(0,1fr)); }
 #workshopView .scan-menu button { text-align: center; }
}
@media (max-width: 600px) {
 #workshopView { padding-top: var(--db-space-5); --ws-gap: var(--db-space-4); }
 #workshopView .workshop-intro { font-size: 16px; }
 #workshopView .tool-gallery-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
 #workshopView .tool-card.is-interactive { grid-template-columns: 88px minmax(0,1fr); column-gap: 16px; padding: 16px; align-items: center; }
 #workshopView .tool-card.is-interactive .tool-card-art { grid-column: 1; grid-row: 1 / 4; aspect-ratio: 3/4; align-self: stretch; }
 #workshopView .tool-card.is-interactive :is(h3,p) { grid-column: 2; }
 #workshopView .tool-card.is-interactive::after { grid-column: 2; margin-top: 0; font-size: 14px; }
 #workshopView .tool-card.is-interactive .tool-render-badge { display: none; }
 #workshopView .tool-card h3 { font-size: 21px; }
 #workshopView .workshop-reference .tool-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 #workshopView .hub-grid { grid-template-columns: minmax(0,1fr); }
 #workshopView .hub-card { padding: 16px 32px 16px 16px; }
 #workshopView .diagnostic-tool-workspace { padding: 16px; }
 #workshopView .diagnostic-tool-header { flex-wrap: wrap; gap: 12px; }
 #workshopView .diagnostic-tool-header h2 { font-size: 25px; }
 #workshopView .diagnostic-tool-layout { grid-template-columns: minmax(0,1fr); }
 #workshopView .diagnostic-tool-hero { grid-row: auto; aspect-ratio: 16/10; }
 #workshopView .multimeter-hero { height: 260px; min-height: 260px; }
 #workshopView .diagnostic-lead-row, #workshopView .probe-connection-strip, #workshopView .scan-scope { grid-template-columns: minmax(0,1fr); }
 #workshopView .tool-controls, #workshopView .diagnostic-result { grid-column: 1; grid-row: auto; }
 #workshopView .scan-device-bezel { margin: 6px; padding: 6px; }
 #workshopView .scan-tool-layout { padding: 8px; gap: 12px; }
 #workshopView .scan-menu { grid-template-columns: minmax(0,1fr); }
 #workshopView .scan-menu button { text-align: left; }
 #workshopView .dtc-list, #workshopView .live-data-list { grid-template-columns: minmax(0,1fr); }
 #workshopView .actuator-card { grid-template-columns: minmax(0,1fr); }
 #workshopView .lesson-tabs { display: grid; grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
 #workshopView .tool-card, #workshopView .meter-rotary-pointer, #workshopView .test-light-indicator { transition: none; }
}
/* Replaced images use an explicit artwork box; percentage heights must not
   resolve against the image's intrinsic size and clip the probes. */
#workshopView .tool-card-art > img,
#workshopView .tool-card-art > .tool-render { position: absolute; inset: 6%; width: 88%; height: 88%; }
#workshopView .diagnostic-tool-field { position: relative; grid-template-columns: minmax(0,1fr); }
#workshopView .diagnostic-tool-field select { grid-column: 1 / -1; }
#workshopView .diagnostic-tool-field .probe-swatch { position: absolute; right: 0; top: 6px; }
#workshopView .diagnostic-meter-device { width: 100%; height: 100%; min-height: 320px; aspect-ratio: auto; }
#workshopView .diagnostic-meter-device .diagnostic-tool-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media(max-width:600px) {
 #workshopView .diagnostic-meter-device { min-height: 260px; }
}
/* Explicit rows keep the device beside its controls, above the full-width result. */
#workshopView .diagnostic-tool-layout > .diagnostic-tool-hero { grid-column: 1; grid-row: 1; }
#workshopView .diagnostic-tool-layout > .tool-controls { grid-column: 2; grid-row: 1; }
#workshopView .diagnostic-tool-layout > .diagnostic-result { grid-column: 1 / -1; grid-row: 2; }
#workshopView .multimeter-hero { aspect-ratio: auto; min-height: 390px; }
#workshopView .diagnostic-meter-device { height: 390px; width: 260px; max-width: 100%; min-height: 0; aspect-ratio: 2 / 3; }
@media(max-width:600px) {
 #workshopView .diagnostic-tool-layout > .diagnostic-tool-hero { grid-column: 1; grid-row: 1; }
 #workshopView .diagnostic-tool-layout > .tool-controls { grid-column: 1 !important; grid-row: 2 !important; }
 #workshopView .diagnostic-tool-layout > .diagnostic-result { grid-column: 1; grid-row: 3; }
 #workshopView .multimeter-hero { height: 260px; min-height: 260px; }
 #workshopView .diagnostic-meter-device { height: 260px; width: 173px; }
}
#workshopView:has(#diagnosticToolWorkspace:not([hidden])) > .essentials-heading,
#workshopView:has(#diagnosticToolWorkspace:not([hidden])) > .hub-grid { display: none; }

#workshopView a.tool-card{text-decoration:none;color:inherit;min-width:0}#workshopView .tool-card.is-interactive::after{content:"Start hands-on test →"}