/* Extend the existing Learn cards, quizzes and theme tokens. */
.learn-path { overflow-wrap: anywhere; }
.learn-path > section, .learn-path > nav { margin-block: 1.25rem; }
.learn-path .learn-card { display: block; }
.learn-path p { line-height: 1.7; }
.learn-path .ag-next-actions, .learning-main > .ag-next-actions { display: flex; flex-wrap: wrap; gap: 1rem; padding-block: .75rem; }
.learning-main > .ag-next-actions [aria-current] { font-weight: 800; text-decoration-thickness: 3px; }
.learn-controls { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); gap: 1rem; }
.learn-field { display: grid; gap: .5rem; min-width: 0; }
.learn-field[hidden] { display: none; }
.learn-field label { font-weight: 700; }
.learn-path select, .learn-path textarea { width: 100%; min-width: 0; box-sizing: border-box; color: var(--ag-text); background: var(--ag-surface); border: 1px solid var(--ag-border); border-radius: .5rem; padding: .75rem; font: inherit; }
.learn-path textarea { min-height: 17rem; }
.learn-path :focus-visible { outline: 3px solid var(--ag-accent); outline-offset: 3px; }
.learn-path pre { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: var(--ag-surface); color: var(--ag-text); border: 1px solid var(--ag-border); border-radius: .5rem; }
.learn-path details { margin-block: 1rem; }
.learn-path details pre { max-height: 26rem; }
.learn-path #learn-artifact-json { max-height: 30rem; }
.learn-path button:disabled { opacity: .65; cursor: default; }
.learn-pipeline { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr)); list-style-position: inside; padding: 0; gap: .75rem; }
.learn-pipeline li { border: 1px solid var(--ag-border); border-radius: .5rem; padding: .75rem; }
.learn-pipeline p { margin-bottom: 0; }
.learn-path summary { cursor: pointer; font-weight: 700; padding: .5rem; }
.learn-status { border-inline-start: 4px solid var(--ag-accent); padding: .75rem; }
.learn-table-wrap { max-width: 100%; overflow: auto; margin-block: 1rem; }
.learn-path table { width: 100%; border-collapse: collapse; text-align: left; }
.learn-path caption { text-align: left; font-weight: 700; padding-bottom: .5rem; }
.learn-path th, .learn-path td { padding: .6rem; border-bottom: 1px solid var(--ag-border); }
.learn-graph { display: block; width: 100%; max-height: 300px; }
.learn-graph line { stroke: var(--ag-muted); stroke-width: 3; }
.learn-graph line.crossing { stroke: var(--ag-accent); stroke-width: 5; }
.learn-graph line.conflict { stroke: #c23b48; stroke-dasharray: 6 4; }
.learn-graph circle { stroke: var(--ag-text); stroke-width: 2; fill: var(--ag-surface); }
.learn-graph circle.selected { stroke-width: 5; stroke: var(--ag-accent); }
.learn-graph text { fill: var(--ag-text); font-size: 16px; }
.learn-lane { display: flex; gap: .5rem; align-items: center; margin-block: .5rem; }
.learn-timeline { position: relative; height: 2.75rem; flex: 1; border: 1px solid var(--ag-border); }
.learn-operation { position: absolute; height: 100%; box-sizing: border-box; padding: .5rem; border: 2px solid var(--ag-accent); background: var(--ag-surface); color: var(--ag-text); white-space: nowrap; overflow: hidden; }
.learn-path .ag-button { margin: .3rem .5rem .3rem 0; }
body.theme-dark .learn-path .ag-button:not(.secondary) { color: #0f172a; background: #93c5fd; }
@media (max-width: 600px) { .learn-path .learn-hero { grid-template-columns: 1fr; } .learn-path .learn-card, .learn-path .quiz-card { padding: 1rem; } }