/* Training Paths - uses theme tokens only (no colors, fonts or sizes of its own) */
.tr-bar { height: .55rem; border-radius: 999px; background: var(--c-surface2); border: 1px solid var(--c-border); overflow: hidden; margin-block: .6rem .25rem; }
.tr-bar > span { display: block; height: 100%; background: var(--c-accent); border-radius: inherit; min-width: 0; }
.tr-course-card.is-draft { opacity: .78; border-style: dashed; }
.tr-course-card .content-body > small { display: block; }
.tr-section + .tr-section { margin-top: calc(var(--space) * 5); }
.tr-cta { margin-top: .4rem; }

.tr-course-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: calc(var(--space) * 3); align-items: start; margin-bottom: calc(var(--space) * 4); }
.tr-course-head h1 { margin-block: .4rem; }
.tr-side-actions { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.tr-side-actions form { display: contents; }
.tr-side-actions .badge { align-self: flex-start; }

.tr-lessons { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.tr-lessons li { border-bottom: 1px solid color-mix(in srgb, var(--c-border) 45%, transparent); }
.tr-lessons li:last-child { border-bottom: 0; }
.tr-lessons a { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; color: var(--c-text); text-decoration: none; }
.tr-lessons a:hover { background: color-mix(in srgb, var(--c-border) 16%, transparent); }
.tr-title { flex: 1; min-width: 0; font-weight: 600; }
.tr-kind { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; white-space: nowrap; }
.tr-num { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: var(--bw) solid var(--c-border); font-size: .85rem; font-weight: 700; background: var(--c-surface2); }
.is-done > a > .tr-num { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-text); }
.tr-num svg { width: 1em; height: 1em; }

.tr-lesson-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: calc(var(--space) * 3); align-items: start; }
.tr-outline { position: sticky; top: 1rem; padding: calc(var(--space) * 2); }
.tr-outline-box > summary { cursor: pointer; font-weight: 700; list-style: none; }
.tr-outline-box > summary::-webkit-details-marker { display: none; }
.tr-outline ol { list-style: none; margin: .6rem 0 0; padding: 0; max-height: 60vh; overflow: auto; }
.tr-outline li a { display: flex; align-items: center; gap: .6rem; padding: .45rem .3rem; color: var(--c-text); text-decoration: none; border-radius: var(--radius); font-size: .92rem; }
.tr-outline li a:hover { background: color-mix(in srgb, var(--c-border) 16%, transparent); }
.tr-outline li.is-current a { background: color-mix(in srgb, var(--c-highlight) 45%, transparent); font-weight: 700; }
.tr-outline li.is-done .tr-num { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-text); }
.tr-outline .tr-num { width: 1.6rem; height: 1.6rem; font-size: .78rem; }
.tr-lesson { min-width: 0; }
.tr-lesson h1 { margin-block: .5rem 1rem; }
.tr-content { margin-block: 1rem; }
.tr-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: var(--bw) solid var(--c-border); background: var(--c-surface2); margin-block: 1rem; }
.tr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tr-task { border: var(--bw) solid var(--c-border); border-inline-start-width: 4px; border-radius: var(--radius); padding: .8rem 1rem; background: var(--c-surface2); margin-block: 1rem; }
.tr-task p { margin: .3rem 0; }
.tr-task details { margin-top: .4rem; }
.tr-task summary { cursor: pointer; color: var(--c-muted); }
.tr-task code { display: block; white-space: pre-wrap; margin-top: .4rem; padding: .5rem .7rem; background: var(--c-input-bg); border-radius: var(--radius); }

.tr-runner { margin-block: 1rem; }
.tr-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92rem; line-height: 1.6; direction: ltr; text-align: left; min-height: 12rem; resize: vertical; tab-size: 4; white-space: pre; overflow: auto; }
.tr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: .7rem; }
.tr-actions .btn svg { width: 1.05em; height: 1.05em; }
.tr-status { margin-inline-start: .4rem; }
.tr-output { min-height: 4rem; max-height: 22rem; overflow: auto; margin: .3rem 0 0; padding: .8rem 1rem; background: var(--c-surface2); border: var(--bw) solid var(--c-border); border-radius: var(--radius); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; }
.tr-output .err { color: var(--c-danger); }
.tr-result { margin-top: .7rem; }
.tr-result:empty { display: none; }
.tr-result .alert { margin: 0; }

.tr-complete { margin-block: calc(var(--space) * 3) 0; padding-top: calc(var(--space) * 2); border-top: var(--bw) solid var(--c-border); }
.tr-complete p { margin: 0; }
.tr-pager { display: flex; justify-content: space-between; gap: .7rem; margin-top: calc(var(--space) * 3); flex-wrap: wrap; }

.tr-dash { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.tr-dash-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tr-dash-row a { font-weight: 600; }
.tr-dash .tr-bar { margin-block: .35rem 0; }

/* admin */
.tr-admin-head .label { font-size: 1.05rem; }
.tr-admin-lessons-head { margin-top: calc(var(--space) * 4); }
.tr-admin-section, .tr-admin-track, .tr-admin-course { min-width: 0; }
.tr-admin-section { overflow: hidden; margin-bottom: calc(var(--space) * 2); }
.tr-row-actions { display: inline-flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.tr-diag-msg { display: inline-block; white-space: pre-wrap; word-break: break-word; max-width: 32rem; font-size: .85rem; }
.tr-diag-key { overflow-wrap: anywhere; word-break: break-word; min-width: 12rem; max-width: 18rem; white-space: normal; }
.tr-diag-result h3 { margin-top: 0; }
/* These three tables hold technical/English data (slugs, Settings keys, exception text): force ltr on the
   scroll container itself so the browser's default scroll position starts at the left (the natural reading
   start for this content) instead of the right, which is where an RTL page would otherwise anchor it, hiding
   the beginning of every key/slug behind a scroll a mobile admin has no reason to expect. */
.tr-diag-ltr-table { direction: ltr; }
.tr-diag-ltr-table .table { direction: ltr; }
@media (max-width: 560px) {
    .tr-diag-key { min-width: 0; max-width: 11rem; font-size: .82rem; }
}

@media (max-width: 900px) {
    .tr-lesson-layout { grid-template-columns: minmax(0, 1fr); }
    .tr-outline { position: static; }
    .tr-outline ol { max-height: 50vh; }
    .tr-course-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .tr-lessons a { flex-wrap: wrap; padding: .75rem .8rem; gap: .5rem .7rem; }
    .tr-kind span { display: none; }
    .tr-pager .btn { flex: 1 1 100%; justify-content: center; }
    .tr-actions .btn { flex: 1 1 auto; justify-content: center; }
    .tr-status { flex-basis: 100%; margin: 0; }
    .tr-code { min-height: 10rem; font-size: .88rem; }
}