/* Training and assurance views, standalone training portal. Layer "features". */
@layer reset, legacy, features, ds, overrides;
@layer features {
#training-view { --training-accent: var(--ds-teal); }
.training-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.training-intro h2 { margin: 0 0 10px; }
.training-intro p { margin: 0; max-width: 70ch; line-height: 1.6; }
.training-progress { min-width: 180px; display: grid; gap: 10px; }
.training-progress progress { width: 100%; accent-color: var(--training-accent); }
.training-tools { display: flex; gap: 16px; align-items: end; margin-bottom: 14px; }
.training-tools label { display: grid; gap: 7px; flex: 1 1 220px; font-weight: 600; }
.training-tools input, .training-tools select { width: 100%; min-height: 44px; border: 1px solid var(--ds-border-strong); border-radius: 10px; padding: 10px 12px; background: var(--ds-surface); color: var(--ds-text-2); }
.training-layout { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.training-list { display: grid; gap: 12px; }
.training-card { display: grid; gap: 10px; text-align: left; width: 100%; border: 1px solid var(--ds-border); border-radius: 14px; padding: 20px; background: var(--ds-surface); color: var(--ds-text-2); cursor: pointer; font: inherit; line-height: 1.5; }
.training-card strong { font-size: 1.1rem; }
.training-meta { font-size: .85rem; color: var(--ds-muted); font-weight: 600; }
.training-card-action { color: var(--ds-teal); font-weight: 600; }
.training-lesson { padding: 26px; border: 1px solid var(--ds-border); border-radius: 16px; background: var(--ds-surface); color: var(--ds-text-2); overflow-wrap: anywhere; }
.training-lesson h2 { margin-top: 0; }
.training-lesson p, .training-lesson li { line-height: 1.7; }
.training-lesson li + li { margin-top: 12px; }
.training-example { padding: 16px; border-left: 4px solid var(--ds-success-line); border-radius: 4px; background: var(--ds-bg); }
.training-example h3 { margin-top: 0; }
.training-lesson fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.training-lesson legend { font-weight: 600; line-height: 1.5; margin-bottom: 12px; }
.training-answer { display: flex; align-items: start; gap: 12px; padding: 12px; margin: 8px 0; border: 1px solid var(--ds-border); border-radius: 10px; cursor: pointer; line-height: 1.5; }
.training-answer input { margin: 5px 0 0; flex: 0 0 auto; accent-color: var(--training-accent); }
.training-feedback { font-weight: 600; }
.training-feedback[data-result="correct"] { color: var(--ds-success); }
.training-feedback[data-result="retry"] { color: var(--ds-warning); }
.training-glossary { border-top: 1px solid var(--ds-border); padding-top: 16px; }
#training-view [hidden] { display: none; }
@media (max-width: 950px) { .training-layout { grid-template-columns: 1fr; } .training-lesson { grid-row: 1; } .training-intro { align-items: stretch; flex-direction: column; } }
@media (max-width: 480px) { .training-intro, .training-lesson { padding: 18px; } .training-card { padding: 16px; } }
.assurance-layout { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }
.assurance-form { display: grid; gap: 14px; margin: 16px 0; padding: 20px; border: 1px solid var(--ds-border); border-radius: 14px; background: var(--ds-surface); color: var(--ds-text-2); overflow-wrap: anywhere; }
.assurance-form label { display: grid; gap: 6px; }
.assurance-form input:not([type="checkbox"]), .assurance-form textarea, .assurance-form select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--ds-border-strong); border-radius: 8px; color: var(--ds-text-2); background: var(--ds-surface); font: inherit; }
.assurance-form input[type="checkbox"] { width: 20px; height: 20px; }
.assurance-form button { justify-self: start; }
.assurance-form h3 { margin: 0; }
#assurance-view details { padding: 12px 0; border-bottom: 1px solid var(--ds-border); overflow-wrap: anywhere; }
#assurance-view summary { cursor: pointer; font-weight: 600; line-height: 1.6; }
#assurance-view [data-privacy-cases], #assurance-view [data-operations-records] { display: grid; gap: 14px; }
@media (max-width: 950px) { .assurance-layout { grid-template-columns: 1fr; } }

/* ===== standalone training portal ===== */
body:has(> .training-portal) { display: block; min-width: 0; }
.training-portal { max-width: 1440px; margin: auto; padding: 24px; }
.training-portal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 24px; }
.training-portal-toolbar label { display: grid; gap: 4px; }
.training-portal-toolbar select { max-width: 100%; }
@media (max-width: 600px) { .training-portal { padding: 12px; } .training-portal-toolbar > * { max-width: 100%; overflow-wrap: anywhere; } }
}
@layer overrides {
#training-view :focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 3px; }

#assurance-view :focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 3px; }
}