/* Help Academy: courses for portal users (Pages/Help*.razor). Colours follow the portal's slate and blue. */
.ha-screen {
    --ha-ink: #0f172a;
    --ha-text: #1e293b;
    --ha-muted: #64748b;
    --ha-line: #e2e8f0;
    --ha-line-2: #cbd5e1;
    --ha-surface: #f8fafc;
    --ha-card: #ffffff;
    --ha-blue: #2563eb;
    --ha-blue-deep: #1d4ed8;
    --ha-blue-soft: #eff6ff;
    --ha-green: #15803d;
    --ha-green-soft: #f0fdf4;
    --ha-amber: #b45309;
    --ha-amber-soft: #fffbeb;
    --ha-gold: #a16207;
    --ha-radius: .75rem;
    --ha-radius-lg: 1rem;
    --ha-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .04);
    display: grid;
    gap: 1.25rem;
    color: var(--ha-text);
}
.ha-kicker { display: block; color: var(--ha-blue-deep); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ha-intro { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem; border: 1px solid var(--ha-line); border-radius: var(--ha-radius-lg); background: var(--ha-card); box-shadow: var(--ha-shadow); }
.ha-intro h1 { margin: .35rem 0 .4rem; color: var(--ha-ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.ha-intro p { max-width: 46rem; margin: 0; color: #475569; font-size: .92rem; line-height: 1.6; }
.ha-records-link, .ha-continue-btn { display: inline-flex; align-items: center; gap: .4rem; }
.ha-state { display: grid; justify-items: start; gap: .5rem; padding: 1.5rem; border: 1px solid var(--ha-line); border-radius: var(--ha-radius-lg); background: var(--ha-card); color: #475569; }
.ha-state strong { color: var(--ha-ink); }
.ha-bar { position: relative; display: block; height: .5rem; overflow: hidden; border-radius: 999px; background: #e9edf3; }
.ha-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ha-blue), #38bdf8); transition: width .4s ease; }
.ha-bar.is-small { height: .32rem; }

/* Home: level, progress and what's next */
.ha-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(15rem, .9fr); overflow: hidden; border: 1px solid var(--ha-line); border-radius: var(--ha-radius-lg); background: var(--ha-card); box-shadow: var(--ha-shadow); }
.ha-hero > * { padding: 1.35rem 1.5rem; }
.ha-hero-level { display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, #0f172a, #1e3a8a); color: #fff; }
.ha-hero-level .ha-kicker { color: #bfdbfe; }
.ha-hero-level h2 { margin: .15rem 0 .25rem; color: #fff; font-size: 1.65rem; font-weight: 800; }
.ha-hero-level p { margin: 0; color: #cbd5e1; font-size: .83rem; line-height: 1.45; }
.ha-level-badge { display: grid; flex: none; width: 3.6rem; height: 3.6rem; place-items: center; border: 2px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; }
.ha-level-badge.level-1 { border-color: #93c5fd; color: #dbeafe; }
.ha-level-badge.level-2 { border-color: #86efac; color: #dcfce7; }
.ha-level-badge.level-3 { border-color: #fcd34d; color: #fef3c7; background: rgba(252, 211, 77, .14); }
.ha-hero-progress { display: flex; flex-direction: column; justify-content: center; gap: .6rem; border-right: 1px solid var(--ha-line); }
.ha-progress-head { display: flex; justify-content: space-between; color: #475569; font-size: .84rem; }
.ha-progress-head strong { color: var(--ha-ink); }
.ha-ladder { display: flex; gap: .4rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.ha-ladder li { display: flex; flex: 1; align-items: center; gap: .4rem; padding: .4rem .55rem; border: 1px solid var(--ha-line); border-radius: .6rem; color: var(--ha-muted); font-size: .76rem; font-weight: 600; }
.ha-ladder li i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ha-line-2); }
.ha-ladder li.reached { border-color: #bbf7d0; background: var(--ha-green-soft); color: var(--ha-green); }
.ha-ladder li.reached i { background: var(--ha-green); }
.ha-ladder li.current { box-shadow: 0 0 0 2px rgba(21, 128, 61, .18); }
.ha-continue { display: flex; flex-direction: column; justify-content: center; gap: .25rem; background: var(--ha-surface); color: var(--ha-ink); text-decoration: none; transition: background-color .15s ease; }
a.ha-continue:hover { background: var(--ha-blue-soft); }
a.ha-continue:focus-visible { outline: 2px solid var(--ha-blue); outline-offset: -2px; }
.ha-continue strong { font-size: 1rem; line-height: 1.3; }
.ha-continue > span:not(.ha-kicker):not(.btn) { color: var(--ha-muted); font-size: .8rem; }
.ha-continue .btn { align-self: flex-start; margin-top: .5rem; pointer-events: none; }
.ha-continue.is-done strong { font-size: .9rem; }

.ha-section > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .75rem; }
.ha-section > header h2 { margin: 0; color: var(--ha-ink); font-size: 1.05rem; font-weight: 800; }
.ha-section > header p { margin: 0; color: var(--ha-muted); font-size: .84rem; }
.ha-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .9rem; }
.ha-course-card { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1rem .9rem; border: 1px solid var(--ha-line); border-radius: var(--ha-radius-lg); background: var(--ha-card); color: var(--ha-ink); text-decoration: none; box-shadow: var(--ha-shadow); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ha-course-card:hover { border-color: #93c5fd; box-shadow: 0 10px 24px rgba(37, 99, 235, .08); transform: translateY(-1px); }
.ha-course-card:focus-visible { outline: 2px solid var(--ha-blue); outline-offset: 2px; }
.ha-course-card.state-completed { background: linear-gradient(180deg, #fbfefc, #fff); }
.ha-course-top { display: flex; align-items: center; gap: .5rem; }
.ha-course-top .ha-badge { margin-left: auto; }
.ha-course-icon { display: grid; flex: none; width: 2rem; height: 2rem; place-items: center; border-radius: .6rem; background: var(--ha-blue-soft); color: var(--ha-blue-deep); }
.ha-course-level { color: var(--ha-muted); font-size: .75rem; font-weight: 600; }
.ha-course-card > strong { font-size: .97rem; line-height: 1.35; }
.ha-course-summary { flex: 1; color: #475569; font-size: .84rem; line-height: 1.5; }
.ha-course-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: var(--ha-muted); font-size: .76rem; }
.ha-course-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.ha-badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .15rem .55rem; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.ha-badge.tone-green { background: #dcfce7; color: #166534; }
.ha-badge.tone-amber { background: #fef3c7; color: #92400e; }
.ha-badge.tone-blue { background: #dbeafe; color: #1e40af; }
.ha-badge.tone-grey { background: #f1f5f9; color: #475569; }

/* Course player */
.ha-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--ha-muted); font-size: .84rem; }
.ha-crumbs a { color: var(--ha-blue-deep); font-weight: 600; text-decoration: none; }
.ha-crumbs a:hover { text-decoration: underline; }
.ha-player { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.ha-steps { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border: 1px solid var(--ha-line); border-radius: var(--ha-radius-lg); background: var(--ha-card); box-shadow: var(--ha-shadow); }
.ha-steps-head { display: flex; gap: .6rem; }
.ha-steps-head strong { display: block; color: var(--ha-ink); font-size: .9rem; line-height: 1.3; }
.ha-steps-head span { color: var(--ha-muted); font-size: .76rem; }
.ha-steps ol { display: flex; flex-direction: column; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.ha-steps li a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .5rem; border-radius: .6rem; color: #475569; font-size: .84rem; text-decoration: none; }
.ha-steps li a:hover { background: var(--ha-surface); color: var(--ha-ink); }
.ha-steps li a.active { background: var(--ha-blue-soft); color: var(--ha-blue-deep); font-weight: 700; }
.ha-step-mark { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 1px solid var(--ha-line-2); border-radius: 50%; background: #fff; color: var(--ha-muted); }
.ha-steps li a.done .ha-step-mark { border-color: var(--ha-green); background: var(--ha-green); color: #fff; }
.ha-step-title { line-height: 1.3; }
.ha-step-time { color: var(--ha-muted); font-size: .72rem; font-weight: 500; }
.ha-complete-note { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: .6rem; background: var(--ha-green-soft); color: var(--ha-green); font-size: .8rem; font-weight: 600; }

.ha-stage { min-width: 0; padding: 1.6rem 1.9rem; border: 1px solid var(--ha-line); border-radius: var(--ha-radius-lg); background: var(--ha-card); box-shadow: var(--ha-shadow); }
.ha-stage-head { margin-bottom: 1.1rem; }
.ha-stage-head h1 { margin: .3rem 0 0; color: var(--ha-ink); font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; }
.ha-stage-head p { margin: .5rem 0 0; color: #475569; font-size: .86rem; }
.ha-video { overflow: hidden; border-radius: var(--ha-radius-lg); background: #0b1120; }
.ha-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0b1120; }
.ha-lesson { max-width: 48rem; color: var(--ha-text); font-size: .97rem; line-height: 1.7; }
.ha-lesson h2 { margin: 1.6rem 0 .5rem; color: var(--ha-ink); font-size: 1.12rem; font-weight: 800; }
.ha-lesson h3 { margin: 1.25rem 0 .4rem; color: var(--ha-ink); font-size: 1rem; font-weight: 700; }
.ha-lesson p { margin: 0 0 .75rem; }
.ha-lesson ul, .ha-lesson ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.ha-lesson ul { list-style: disc; }
.ha-lesson ol { list-style: decimal; }
.ha-lesson li { margin-bottom: .3rem; }
.ha-lesson strong { color: var(--ha-ink); font-weight: 700; }
.ha-lesson a { color: var(--ha-blue-deep); text-decoration: underline; }
.ha-lesson code { padding: .05rem .3rem; border-radius: .3rem; background: var(--ha-surface); font-size: .85em; }
.ha-lesson blockquote { margin: 1rem 0; padding: .75rem 1rem; border-left: 3px solid var(--ha-blue); border-radius: 0 .6rem .6rem 0; background: var(--ha-blue-soft); }
.ha-lesson blockquote p:last-child { margin-bottom: 0; }
.ha-lesson table { display: block; width: 100%; max-width: 100%; margin: .6rem 0 1rem; overflow-x: auto; border-collapse: collapse; font-size: .86rem; }
.ha-lesson th, .ha-lesson td { padding: .5rem .65rem; border: 1px solid var(--ha-line); text-align: left; vertical-align: top; }
.ha-lesson th { background: var(--ha-surface); font-weight: 700; }
.ha-step-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--ha-line); color: var(--ha-muted); font-size: .84rem; }
.ha-step-footer .btn { display: inline-flex; align-items: center; gap: .4rem; }
.ha-done { display: inline-flex; align-items: center; gap: .4rem; color: var(--ha-green); font-weight: 600; }
.ha-message { margin-top: .9rem; }

.ha-quiz { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; }
.ha-question { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--ha-line); border-radius: var(--ha-radius-lg); }
.ha-question legend { display: flex; gap: .6rem; padding: 0 .35rem; margin-left: -.35rem; color: var(--ha-ink); font-size: .93rem; font-weight: 700; line-height: 1.4; }
.ha-question legend span { display: grid; flex: none; width: 1.4rem; height: 1.4rem; place-items: center; border-radius: 50%; background: var(--ha-ink); color: #fff; font-size: .74rem; }
.ha-question label { display: flex; align-items: flex-start; gap: .6rem; margin-top: .5rem; padding: .55rem .75rem; border: 1px solid var(--ha-line); border-radius: .6rem; color: #334155; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.ha-question label:hover { border-color: var(--ha-line-2); background: var(--ha-surface); }
.ha-question label.chosen { border-color: var(--ha-blue); background: var(--ha-blue-soft); color: var(--ha-ink); }
.ha-question input { margin-top: .2rem; accent-color: var(--ha-blue); }
.ha-result { display: flex; align-items: center; gap: .9rem; max-width: 48rem; padding: 1rem 1.1rem; border-radius: var(--ha-radius-lg); }
.ha-result.passed { background: var(--ha-green-soft); color: var(--ha-green); }
.ha-result.failed { background: var(--ha-amber-soft); color: var(--ha-amber); }
.ha-result strong { display: block; font-size: 1.05rem; }
.ha-result span { color: #475569; font-size: .86rem; }
.ha-review { display: flex; flex-direction: column; gap: .6rem; max-width: 48rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.ha-review li { padding: .75rem .9rem; border: 1px solid var(--ha-line); border-left-width: 3px; border-radius: .6rem; }
.ha-review li.correct { border-left-color: var(--ha-green); }
.ha-review li.incorrect { border-left-color: var(--ha-amber); }
.ha-review strong { display: block; margin-bottom: .25rem; color: var(--ha-ink); font-size: .9rem; }
.ha-review span { display: inline-flex; align-items: center; gap: .3rem; color: var(--ha-ink); font-size: .86rem; }
.ha-review li.correct span { color: var(--ha-green); }
.ha-review p { margin: .4rem 0 0; color: #475569; font-size: .84rem; line-height: 1.5; }

/* Training records */
.ha-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.ha-stats > div { display: grid; gap: .15rem; padding: 1rem 1.1rem; border: 1px solid var(--ha-line); border-radius: var(--ha-radius-lg); background: var(--ha-card); box-shadow: var(--ha-shadow); }
.ha-stats strong { color: var(--ha-ink); font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ha-stats span { color: var(--ha-muted); font-size: .8rem; }
.ha-panel { overflow: hidden; border: 1px solid var(--ha-line); border-radius: var(--ha-radius-lg); background: var(--ha-card); box-shadow: var(--ha-shadow); }
.ha-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; padding: .9rem 1.1rem 1.1rem; }
.ha-level-chip { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; overflow: hidden; padding: .75rem .9rem 1rem; border: 1px solid var(--ha-line); border-radius: .6rem; background: var(--ha-card); color: var(--ha-ink); font: inherit; text-align: left; cursor: pointer; }
.ha-level-chip strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.ha-level-chip span { color: #475569; font-size: .8rem; }
.ha-level-chip i { position: absolute; left: 0; bottom: 0; height: .25rem; background: var(--ha-line-2); }
.ha-level-chip.level-1 i { background: var(--ha-blue); }
.ha-level-chip.level-2 i { background: var(--ha-green); }
.ha-level-chip.level-3 i { background: #ca8a04; }
.ha-level-chip.selected { border-color: var(--ha-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.ha-level-chip:focus-visible { outline: 2px solid var(--ha-blue); outline-offset: 2px; }
.ha-level-badge-sm { display: inline-block; border-radius: 999px; padding: .15rem .55rem; background: #f1f5f9; color: #475569; font-size: .72rem; font-weight: 700; }
.ha-level-badge-sm.level-1 { background: #dbeafe; color: #1e40af; }
.ha-level-badge-sm.level-2 { background: #dcfce7; color: #166534; }
.ha-level-badge-sm.level-3 { background: #fef3c7; color: var(--ha-gold); }
.ha-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--ha-line); }
.ha-toolbar input[type=search] { flex: 1 1 15rem; max-width: 22rem; }
.ha-company-filter { width: auto; max-width: 16rem; }
.ha-inactive { display: inline-flex; align-items: center; gap: .4rem; color: #475569; font-size: .84rem; }
.ha-empty { margin: 0; padding: 1.25rem 1.1rem; color: var(--ha-muted); font-size: .88rem; }
.ha-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: .75rem; width: 100%; padding: .75rem 1.1rem; border: 0; border-bottom: 1px solid var(--ha-line); background: var(--ha-card); color: var(--ha-text); font: inherit; font-size: .86rem; text-align: left; }
button.ha-row { cursor: pointer; }
button.ha-row:hover, .ha-row.expanded { background: var(--ha-surface); }
button.ha-row:focus-visible { outline: 2px solid var(--ha-blue); outline-offset: -2px; }
.ha-row.inactive { opacity: .65; }
.ha-head { background: var(--ha-surface); color: var(--ha-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ha-person { display: flex; flex-direction: column; min-width: 0; }
.ha-person strong { color: var(--ha-ink); }
.ha-person small { overflow: hidden; color: var(--ha-muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.ha-progress-cell { display: flex; flex-direction: column; gap: .25rem; }
.ha-progress-cell small { color: var(--ha-muted); font-size: .76rem; }
.ha-detail { display: flex; flex-direction: column; gap: .4rem; padding: .75rem 1.1rem 1rem 2rem; border-bottom: 1px solid var(--ha-line); background: var(--ha-surface); }
.ha-detail-course { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem .65rem; border: 1px solid var(--ha-line); border-radius: .6rem; background: var(--ha-card); }
.ha-grow { display: flex; flex: 1; flex-direction: column; min-width: 10rem; }
.ha-grow strong { color: var(--ha-ink); font-size: .86rem; }
.ha-grow small { color: var(--ha-muted); font-size: .76rem; }
.ha-score { color: #475569; font-size: .8rem; white-space: nowrap; }

@media (max-width: 1180px) {
    .ha-hero { grid-template-columns: 1fr 1fr; }
    .ha-continue { grid-column: 1 / -1; border-top: 1px solid var(--ha-line); }
    .ha-hero-progress { border-right: 0; }
}
@media (max-width: 900px) {
    .ha-player { grid-template-columns: 1fr; }
    .ha-steps { position: static; }
    .ha-stats, .ha-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ha-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr); }
    .ha-row > :nth-child(4), .ha-row > :nth-child(5) { display: none; }
}
@media (max-width: 640px) {
    .ha-hero { grid-template-columns: 1fr; }
    .ha-hero > * { padding: 1.1rem; }
    .ha-intro { padding: 1.1rem; }
    .ha-stage { padding: 1.1rem; }
    .ha-stage-head h1 { font-size: 1.3rem; }
    .ha-ladder { flex-direction: column; }
    .ha-row { grid-template-columns: minmax(0, 1fr) auto; }
    .ha-row > :nth-child(3) { display: none; }
    .ha-detail { padding-left: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ha-bar > span, .ha-course-card, .ha-continue { transition: none; }
    .ha-course-card:hover { transform: none; }
}