/* Practical training controls and feedback. */
.workspace-preview #workspaceFilters { border-top: 1px solid var(--workspace-line); border-bottom: 1px solid var(--workspace-line); padding: 1rem 0px; }
.workspace-preview .workspace-crop-choices { background: white; border: 1px solid var(--workspace-line); border-radius: 6px; padding: 0.4rem; }
.workspace-preview .workspace-crop-choices label { display: flex; gap: 0.75rem; align-items: center; min-height: 44px; padding: 0.4rem 0.6rem; }
.workspace-preview .workspace-grid { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 1.25rem; align-items: start; }
.workspace-preview #workspaceEvidence, .workspace-preview #workspaceAdjustments { min-width: 0px; }
.workspace-preview #workspaceEvidence { display: contents; }
.workspace-preview #workspaceAdjustments { grid-row: 2; }
.workspace-preview #environmentBox, .workspace-preview #sliderBox { width: 100%; min-height: 0px; display: block; }
.workspace-preview #environmentBox h3, .workspace-preview #sliderBox h3, .workspace-preview #symptomsBox h3, .workspace-preview #quizBox > h3 { font-size: 1.1rem; line-height: 1.4; margin: 0px 0px 0.65rem; }
.workspace-preview .env-grid .vpd-display { grid-column: 1 / -1; display: flex; align-items: center; align-content: start; gap: 0.5rem; padding: 0.15rem 0px; background: transparent; }
.workspace-preview .env-grid .vpd-display > strong { display: inline; margin: 0px; font-size: 0.85rem; }
.workspace-preview .vpd-value { font-size: 0.9rem; }
.workspace-preview .vpd-tooltip-icon { background: white; color: var(--workspace-green); border-color: var(--workspace-line); font-family: inherit; margin: 0px; box-shadow: none; }
.workspace-preview .vpd-tooltip-icon:hover { background: rgb(237, 243, 237); }
.workspace-preview .vpd-tooltip { display: none !important; }
.workspace-preview #symptomsBox table { margin-top: 0.5rem; table-layout: fixed; }
.workspace-preview #symptomsBox th, .workspace-preview #symptomsBox td { font-size: 0.85rem; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(230, 235, 229); border-image: none; padding: 0.5rem 0.25rem; text-align: left; background: transparent; overflow-wrap: anywhere; }
.workspace-preview #symptomsBox th { color: var(--workspace-muted); font-size: 0.75rem; font-weight: 500; }
.workspace-preview #symptomsBox th:last-child, .workspace-preview #symptomsBox td:last-child { width: 32%; text-align: right; }
.workspace-preview #symptomsBox tr:last-child td { border: 0px; }
.workspace-preview #quizBox { margin-bottom: 0px; }
.workspace-preview .quiz-instruction { color: var(--workspace-muted); font-size: 0.9rem; margin-bottom: 1rem; max-width: 70ch; }
.workspace-preview #quizBox fieldset { min-width: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--workspace-line); padding: 1rem 0px 0px; margin: 1.25rem 0px 0px; }
.workspace-preview #quizBox legend { font-size: 0.95rem; font-weight: 700; padding: 0px 0.5rem 0px 0px; max-width: 100%; }
.workspace-preview #quizBox fieldset p { margin: 0px 0px 0.75rem; font-size: 0.85rem; color: var(--workspace-muted); }
.workspace-preview #quizBox label { align-items: center; gap: 0.7rem; min-height: 44px; padding: 0.6rem 0.75rem; border: 1px solid var(--workspace-line); border-radius: 6px; font-size: 0.9rem; line-height: 1.4; background: white; display: flex !important; margin: 0.4rem 0px !important; }
.workspace-preview #quizBox label:hover { border-color: rgb(111, 139, 116); background: rgb(245, 248, 243); }
.workspace-preview #quizBox label:has(input:checked) { background: rgb(234, 241, 230); border-color: rgb(85, 118, 91); color: var(--workspace-green); }
.workspace-preview #quizBox label + br { display: none; }
.workspace-preview .workspace-panel-intro { margin: -0.1rem 0px 0.75rem; color: var(--workspace-muted); font-size: 0.85rem; }
.workspace-preview .slider-container { margin: 0px; padding: 1rem 0px 0.75rem; }
.workspace-preview .slider-header { gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.15rem; }
.workspace-preview .slider-label { color: var(--workspace-ink); font-size: 0.9rem; font-weight: 600; }
.workspace-preview .slider-value { font-size: 0.85rem; background: rgb(240, 244, 237); color: var(--workspace-green); border-radius: 5px; box-shadow: none; padding: 0.25rem 0.5rem; }
.workspace-preview #sliderBox input[type="range"] { height: 44px; margin: 0px; padding: 0px; background: transparent; border-radius: 4px; }
.workspace-preview .workspace-range-limits { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--workspace-muted); margin-top: -0.4rem; }
.workspace-preview .vpd-reference-container { margin: 1rem 0px 0px; padding: 0.75rem; border: 1px solid var(--workspace-line); border-radius: 6px; box-shadow: none; background: rgb(244, 247, 241); }
.workspace-preview .vpd-reference-header { gap: 0.5rem; flex-wrap: wrap; }
.workspace-preview .vpd-reference-label { font-size: 0.85rem; }
.workspace-preview .vpd-reference-value { font-size: 1rem; color: var(--workspace-green); }
.workspace-preview .vpd-reference-status { font-size: 0.85rem; }
.workspace-preview .workspace-actions { border-top: 1px solid var(--workspace-line); padding: 1.1rem 0px; margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.workspace-preview #workspaceActionHint { max-width: 48ch; color: var(--workspace-muted); font-size: 0.85rem; }
.workspace-preview .workspace-action-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.workspace-preview #resultBox { font-size: 1rem; background: white; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top: 3px solid var(--workspace-green); scroll-margin-top: 1rem; overflow-wrap: anywhere; }
.workspace-preview #resultBox > p { font-size: 1rem; line-height: 1.5; margin: 0.5rem 0px; }
.workspace-preview #resultBox h4 { font-size: 1rem; margin: 0.85rem 0px; }
.workspace-preview #resultBox hr { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--workspace-line); margin: 1.25rem 0px; }
.workspace-preview .performance-grid { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 1rem; }
.workspace-preview .metric-card { min-width: 0px; box-shadow: none; border: 1px solid var(--workspace-line); transform: none; }
.workspace-preview .metric-card:hover { transform: none; box-shadow: none; }
.workspace-preview .metric-header, .workspace-preview .metric-value { flex-wrap: wrap; gap: 0.5rem; }
.workspace-preview .metric-current { font-size: 1.5rem; }
.workspace-preview #resultBox:has(.scenario-feedback-summary) { border-radius: 8px; box-shadow: none; }
.workspace-preview .scenario-feedback-summary { padding: min(1rem, 16px) min(1.25rem, 20px); background: rgb(244, 247, 241); border: 1px solid var(--workspace-line); border-radius: 7px; }
.workspace-preview #resultBox .scenario-feedback-eyebrow { margin: 0px 0px 0.35rem; color: var(--workspace-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.workspace-preview #resultBox .scenario-feedback-score { margin: 0px; font-size: 1.15rem; line-height: 1.5; }
.workspace-preview .scenario-feedback-score strong { display: inline-block; white-space: nowrap; font-size: 1.75rem; color: var(--workspace-ink); }
.workspace-preview .scenario-feedback-outcome { font-weight: 700; }
.workspace-preview .scenario-feedback-outcome[data-result="correct"] { color: rgb(40, 99, 68); }
.workspace-preview .scenario-feedback-outcome[data-result="incorrect"] { color: rgb(154, 63, 59); }
.workspace-preview #resultBox .scenario-feedback-description { margin: 0.5rem 0px 0px; color: var(--workspace-muted); font-size: 0.95rem; max-width: 75ch; }
.workspace-preview #resultBox .scenario-feedback-meta { margin: 0.65rem 0px 0px; color: var(--workspace-muted); font-size: 0.85rem; }
.workspace-preview .scenario-feedback-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--workspace-line); }
.workspace-preview .scenario-feedback-summary + .scenario-feedback-section { border-top: 0px; padding-top: 0px; }
.workspace-preview #resultBox .scenario-feedback-section > h3 { display: block; margin: 0px 0px 1rem; color: var(--workspace-ink); font-size: 1.15rem; line-height: 1.4; }
.workspace-preview #resultBox .scenario-feedback-section > p { margin: 0.75rem 0px; max-width: 85ch; line-height: 1.6; }
.workspace-preview .scenario-feedback-cards { display: grid; gap: 0.85rem; }
.workspace-preview .scenario-feedback-card { --feedback-accent: #286344; --feedback-border: #94b79b; min-width: 0px; padding: min(1rem, 16px) min(1.15rem, 18px); background: rgb(234, 243, 233); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--feedback-accent); border-radius: 7px; }
.workspace-preview .scenario-feedback-card[data-result="incorrect"] { --feedback-accent: #9a3f3b; --feedback-border: #d7a29c; background: rgb(251, 239, 237); }
.workspace-preview .scenario-feedback-card-header { padding: 0px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem 1rem; }
.workspace-preview #resultBox .scenario-feedback-card-header h4 { flex: 1 1 22rem; min-width: 0px; margin: 0px; color: var(--workspace-ink); font-size: 1rem; line-height: 1.5; }
.workspace-preview .scenario-feedback-card-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.75rem; }
.workspace-preview .scenario-feedback-status { color: var(--feedback-accent); font-weight: 700; font-size: 0.85rem; }
.workspace-preview .scenario-feedback-points { color: var(--workspace-muted); font-size: 0.85rem; }
.workspace-preview .scenario-feedback-answers, .workspace-preview .scenario-feedback-facts { display: grid; gap: 0.65rem; margin: 0.85rem 0px 0px; }
.workspace-preview .scenario-feedback-answers > div, .workspace-preview .scenario-feedback-facts > div { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 0.15rem 0.75rem; }
.workspace-preview .scenario-feedback-answers dt, .workspace-preview .scenario-feedback-facts dt { color: var(--workspace-muted); font-size: 0.85rem; }
.workspace-preview .scenario-feedback-answers dd, .workspace-preview .scenario-feedback-facts dd { min-width: 0px; margin: 0px; font-size: 0.95rem; }
.workspace-preview .scenario-feedback-your-answer { color: var(--feedback-accent); font-weight: 600; }
.workspace-preview .scenario-feedback-correct-answer { color: rgb(40, 99, 68); font-weight: 600; }
.workspace-preview #resultBox .scenario-feedback-explanation { margin: 0.85rem 0px 0px; padding-top: 0.75rem; border-top: 1px solid var(--feedback-border); color: var(--workspace-ink); font-size: 0.9rem; line-height: 1.6; }
.workspace-preview .scenario-feedback-section .metric-card { padding: 1rem; border-radius: 7px; }
.workspace-preview #resultBox .scenario-feedback-section .metric-title { margin: 0px; }
.workspace-preview .scenario-feedback-section .metric-header { margin-bottom: 0.65rem; }
.workspace-preview .scenario-feedback-section .metric-explanation { color: var(--workspace-muted); font-size: 0.9rem; font-style: normal; line-height: 1.6; }
.workspace-preview .scenario-feedback-section .metric-optimal { color: var(--workspace-muted); }
.workspace-preview .scenario-feedback-section .status-warning { background: rgb(252, 245, 230); color: rgb(128, 91, 33); }
.workspace-preview .scenario-feedback-section .status-critical { background: rgb(251, 239, 237); color: rgb(154, 63, 59); }
.workspace-preview .scenario-feedback-section .progress-optimal { background: rgb(40, 99, 68); }
.workspace-preview .scenario-feedback-section .progress-warning { background: rgb(128, 91, 33); }
.workspace-preview .scenario-feedback-section .progress-critical { background: rgb(154, 63, 59); }
@media (min-width: 600px) {
.workspace-preview .scenario-feedback-answers > div, .workspace-preview .scenario-feedback-facts > div { grid-template-columns: minmax(0px, 10rem) minmax(0px, 1fr); }
}
@media (min-width: 600px) {
.workspace-preview .env-grid .vpd-display { grid-column: auto; padding: 0.65rem 0.75rem; background: rgb(243, 246, 241); flex-wrap: wrap; }
.workspace-preview .env-grid .vpd-display > strong { flex-basis: 100%; font-size: 0.75rem; }
.workspace-preview .performance-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@container trainer-workspace (width < 1100px) {
.workspace-preview .env-grid .vpd-display { grid-column: 1 / -1; padding: 0.75rem; border: 1px solid var(--workspace-line); border-radius: 6px; background: rgb(244, 247, 241); box-shadow: none; flex-wrap: wrap; }
.workspace-preview .env-grid .vpd-display > strong { flex-basis: auto; margin: 0px; font-size: 0.85rem; font-weight: 600; color: rgb(51, 51, 51); }
.workspace-preview .env-grid .vpd-value { font-size: 1rem; color: rgb(51, 51, 51); }
}
@container trainer-workspace (min-width: 1100px) {
.workspace-preview .workspace-grid { grid-template-columns: minmax(0px, 1.65fr) minmax(300px, 1fr); gap: 1.5rem; }
.workspace-preview #workspaceEvidence { display: block; }
.workspace-preview #workspaceAdjustments { grid-row: auto; position: sticky; top: 1.5rem; }
}
@media (max-height: 650px) {
.workspace-preview #workspaceAdjustments { position: static; }
}
.workspace-preview #workspaceSymptomsOverview { margin-bottom: 1rem; border: 1px solid var(--workspace-line); border-radius: 7px; background: white; }
.workspace-preview #workspaceSymptomsOverview summary { padding: 0.75rem 1.1rem; font-size: 0.85rem; cursor: pointer; min-height: 44px; }
.workspace-preview #workspaceSymptomsOverview #symptomsBox { border: 0px; margin: 0px; padding-top: 0px; }
.workspace-preview #workspaceSymptomsOverview #symptomsBox h3 { display: none; }
.workspace-preview #quizBox fieldset { padding-top: 0.65rem; margin-top: 1rem; }
.workspace-preview #quizBox fieldset p { margin-bottom: 0.5rem; }
.workspace-preview .workspace-action-buttons { min-width: 0px; max-width: 100%; }
@media (max-width: 599px) {
.workspace-preview #quizBox label { padding: 12px; gap: 8px; }
.workspace-preview #resultBox li { padding-left: 20px !important; }
.workspace-preview #resultBox ul ul { margin-left: 12px !important; padding-left: 12px !important; }
.workspace-preview #resultBox pre { padding: 12px !important; }
}