/* Training (tr-): the page, the player, Ask a question.
   Moved out of app.css as they were (design system wave 0.4, Source\Docs\Design system\Design system.md section 14): one
   file per area, so that the app waves never edit the same file. Linked by Components\App.razor right after app.css,
   in the order the rules had there (home, admin, monitoring, management, account, messaging, support, training,
   azurecosts, tools), so every rule keeps its place in the cascade. Tokens only: light and dark both work. */

/* V1.21, Training: a deck's view button and its small download button side by side */
/* Training page (V1.40): a header band in the brand's dark and gold, one card per level with a progress bar per language */
.tr-hero { display: flex; align-items: flex-start; gap: 16px; padding: 22px 26px; border-radius: 14px; color: #f4eee5;
  background: linear-gradient(135deg, #2e2e2e 0%, #3a352c 100%); border-left: 6px solid var(--brand-gold); box-shadow: var(--shadow); }
.tr-hero-text { flex: 1; min-width: 0; }
.tr-hero h2 { margin: 0 0 6px; font-size: 1.5rem; color: #ffffff; }
.tr-hero p { margin: 0 0 14px; max-width: 760px; line-height: 1.55; color: #e6dccb; }
.tr-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #e1c041; font-weight: 700; }
.tr-hero-links .mud-button-root { background: rgba(255, 255, 255, 0.08); color: #ffffff; border-color: rgba(255, 255, 255, 0.35); }
.tr-hero .hint { color: #cfc6b4; }
.tr-note { padding: 12px 16px; border-radius: var(--radius); background: var(--note-soft); color: var(--warn); border: 1px solid var(--border); }
.tr-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
.tr-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); }
.tr-card-head { display: flex; align-items: center; gap: 12px; }
.tr-card-head > div { flex: 1; min-width: 0; }
.tr-card-head h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.tr-badge { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800;
  background: var(--os-accent); color: var(--os-on-accent); }
.tr-level { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.tr-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 0.88rem; }
.tr-facts span { display: inline-flex; align-items: center; gap: 4px; }
.tr-audience { margin: 0; line-height: 1.5; color: var(--text); }
.tr-modules { border-top: 1px solid var(--rule); padding-top: 8px; }
.tr-modules summary { cursor: pointer; font-weight: 700; color: var(--accent-strong); }
.tr-modules ol { margin: 8px 0 0; padding-left: 1.5em; line-height: 1.6; color: var(--muted); }
.tr-langs { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); }
.tr-lang { display: flex; flex-direction: column; gap: 6px; }
.tr-lang-top { display: flex; justify-content: space-between; align-items: baseline; }
.tr-bar { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.tr-bar > i { display: block; height: 100%; background: var(--brand-gold); border-radius: 3px; }
.tr-foot { margin: 0; }
.tr-guide { margin-top: 4px; }

/* Training player (V1.39): one scroll bar, the one of the frame; the page around it keeps still */
.tr-player { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 420px; overflow: hidden; }
.tr-player-bar { padding: 4px 2px 8px; }
.tr-back { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 600; }
.tr-player-frame { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--mud-palette-lines-default, #ddd); border-radius: 8px; background: #fbf8f3; }
/* V1.44, Ask a question: the bar holds the button on the right; the panel beside the frame (below it on a phone), its own scroll */
.tr-player-bar { display: flex; align-items: center; gap: 8px; }
.tr-player-body { flex: 1; display: flex; gap: 12px; min-height: 0; }
.tr-player-body .tr-player-frame { min-width: 0; }
.tr-ask { width: 360px; flex: none; overflow-y: auto; border: 1px solid var(--mud-palette-lines-default, #ddd); border-radius: 8px; padding: 10px 12px; background: var(--mud-palette-surface, #fff); }
.tr-ask-head { display: flex; align-items: center; justify-content: space-between; }
.tr-ask-head h3 { margin: 0; font-size: 1rem; }
.tr-ask h4 { margin: 14px 0 6px; font-size: .9rem; }
.tr-ask-list { list-style: none; margin: 0; padding: 0; }
.tr-ask-list li { border-top: 1px solid var(--mud-palette-lines-default, #ddd); padding: 8px 0; }
.tr-ask-q { font-weight: 600; }
/* V1.52: the quick questions of the slide (TrainingPlayerPage.razor), the Ask PI chips' look (askpi.css .ap-example), one a line */
.tr-ask-quick { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.tr-ask-meta { font-size: .75rem; color: var(--mud-palette-text-secondary, #666); margin: 2px 0 4px; }
.tr-ask-a, .tr-asked-answer { white-space: pre-wrap; font-size: .9rem; }
.tr-ask-flag { display: inline-block; font-size: .75rem; font-weight: 600; color: #8a5a00; background: #fff4d6; border-radius: 4px; padding: 1px 6px; margin: 2px 0; }
@media (max-width: 760px) {
    .tr-player-body { flex-direction: column; }
    .tr-ask { width: auto; max-height: 45%; }
}