.ht-academy-trainer {
    --academy-host-header-offset:62px;
    --bg:var(--trainer-bg);
    --bg-grad-1:var(--trainer-card-soft);
    --bg-grad-2:var(--trainer-bg);
    --surface:var(--trainer-card);
    --surface-2:var(--trainer-card-soft);
    --surface-3:var(--trainer-elevated);
    --text:var(--trainer-text);
    --text-2:var(--trainer-text-secondary);
    --text-3:var(--trainer-muted);
    --text-on-dark:var(--trainer-text);
    --text-on-dark-2:var(--trainer-text-secondary);
    --border:var(--trainer-border);
    --border-strong:var(--trainer-border-strong);
    --brand-600:var(--trainer-primary);
    --brand-500:var(--ht-primary-hover);
    --brand-400:var(--ht-accent-cyan);
    --ok:var(--ht-success);
    --warn:var(--ht-warning);
    --bad:var(--ht-danger);
    --info:var(--ht-info);
    width:100%;
    min-width:0;
    min-height:calc(100vh - 62px);
    background:var(--bg);
    color:var(--text);
    isolation:isolate;
}
.ht-academy-trainer #trainer-root { min-height:calc(100vh - 62px); }
.ht-academy-trainer .app { min-height:calc(100vh - 62px); }

/* WordPress integration contrast guardrails. These declarations deliberately
 * outrank feature-specific light-theme styles bundled by the Trainer app. */
.ht-academy-trainer[data-theme="dark"] .avatar,
.ht-academy-trainer[data-theme="dark"] .avatar--sm {
    color:#fff;
}

.ht-academy-trainer[data-theme="dark"] .badge--neutral {
    background:var(--trainer-card-soft);
    color:var(--trainer-text-secondary);
}

.ht-academy-trainer[data-theme="dark"] .badge--ok {
    background:var(--ht-success-soft);
    color:var(--ht-success);
}

.ht-academy-trainer[data-theme="dark"] .badge--warn {
    background:var(--ht-warning-soft);
    color:var(--ht-warning);
}

.ht-academy-trainer[data-theme="dark"] .badge--bad {
    background:var(--ht-danger-soft);
    color:var(--ht-danger);
}

.ht-academy-trainer[data-theme="dark"] .badge--info,
.ht-academy-trainer[data-theme="dark"] .product-dashboard__eyebrow {
    background:var(--ht-info-soft);
    color:var(--ht-info);
}

.ht-academy-trainer[data-theme="dark"] .product-hero .badge.badge--info {
    background:var(--ht-ai-accent-soft);
    color:var(--ht-ai-accent-hover);
}

.ht-academy-trainer[data-theme="dark"] .experience-case-card__skills span {
    color:var(--ht-accent-cyan);
}

.ht-academy-trainer[data-theme="dark"] .experience-page .eyebrow {
    color:var(--ht-accent-cyan);
}

/*
 * The trainer bundle uses scoped CSS. Some WordPress/browser combinations can
 * lose the app-shell grid while still rendering the individual components.
 * Keep the outer shell explicit here: navigation and workspace must start
 * side by side instead of becoming two vertical document sections.
 */
@media (min-width:1081px) {
    .ht-academy-trainer #trainer-root > .app {
        display:grid !important;
        grid-template-columns:248px minmax(0, 1fr) !important;
        align-items:stretch;
        min-height:calc(100vh - 62px);
    }

    .ht-academy-trainer #trainer-root .sidebar-shell {
        grid-column:1;
        grid-row:1;
        min-width:0;
    }

    .ht-academy-trainer #trainer-root .sidebar {
        box-sizing:border-box;
        width:248px;
        height:calc(100vh - 62px);
        max-height:calc(100vh - 62px);
        overflow-y:auto;
        position:sticky;
        top:0;
    }

    .ht-academy-trainer #trainer-root .main {
        grid-column:2;
        grid-row:1;
        min-width:0;
        min-height:0;
    }

    .ht-academy-trainer #trainer-root .content { min-width:0; }
}

@media (max-width:720px) {
    .ht-academy-trainer {
        --academy-host-header-offset:56px;
    }
    .ht-academy-trainer, .ht-academy-trainer #trainer-root, .ht-academy-trainer .app { min-height:calc(100vh - 56px); }
}