/* ════════════════════════════════════════════════════════════════════════
 * Native Account + Instructor Portal (E34 / WC-optional)
 *
 * Tabbed dashboard chrome shared by [cits_wpel_my_account] and
 * [cits_wpel_instructor]. Brand-themed via `--cwl-primary` so it
 * picks up the Customizer accent automatically.
 * ════════════════════════════════════════════════════════════════════════ */

.cits-wpel-account {
    --cwl-primary: var(--cits-wpel-primary-color, #2271b1);
    --cwl-border: #e3e4e8;
    --cwl-muted: #646970;
    --cwl-card-bg: #ffffff;
    color: #1d2327;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 24px 0;
}

/* Header */
.cits-wpel-account .cwa-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cwl-border);
}
.cits-wpel-account .cwa-title {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    line-height: 1.25;
}
.cits-wpel-account .cwa-subtitle {
    margin: 4px 0 0;
    color: var(--cwl-muted);
    font-size: 0.95rem;
}

/* Tab bar */
.cits-wpel-account .cwa-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--cwl-border);
}
.cits-wpel-account .cwa-tab {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    font-weight: 600;
    color: var(--cwl-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color 150ms ease, border-color 150ms ease;
}
.cits-wpel-account .cwa-tab:hover {
    color: var(--cwl-primary);
}
.cits-wpel-account .cwa-tab.is-active {
    color: var(--cwl-primary);
    border-bottom-color: var(--cwl-primary);
}
.cits-wpel-account .cwa-tab:focus-visible {
    outline: 2px solid var(--cwl-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.cits-wpel-account .cwa-tab-logout {
    margin-left: auto;
    color: var(--cwl-muted);
    font-size: 0.9rem;
}
.cits-wpel-account .cwa-tab-logout:hover {
    color: #c83030;
}

/* Panel body */
.cits-wpel-account .cwa-panel {
    background: var(--cwl-card-bg);
    border: 1px solid var(--cwl-border);
    border-radius: 12px;
    padding: 24px;
}

/* Overview — stats row + 2-card grid */
.cits-wpel-account .cwa-stats {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}
.cits-wpel-account .cwa-stats li {
    background: #f6f7f7;
    border: 1px solid var(--cwl-border);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cits-wpel-account .cwa-stat-val {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--cwl-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cits-wpel-account .cwa-stat-label {
    font-size: 0.8rem;
    color: var(--cwl-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cits-wpel-account .cwa-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.cits-wpel-account .cwa-overview-card {
    background: #fafbfc;
    border: 1px solid var(--cwl-border);
    border-radius: 10px;
    padding: 16px 18px;
}
.cits-wpel-account .cwa-overview-card h3 {
    margin: 0 0 12px;
    font-size: 1.05rem;
}
.cits-wpel-account .cwa-overview-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}
.cits-wpel-account .cwa-overview-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--cwl-border);
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.cits-wpel-account .cwa-overview-list li:last-child {
    border-bottom: 0;
}
.cits-wpel-account .cwa-overview-list a {
    color: inherit;
    text-decoration: none;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.cits-wpel-account .cwa-overview-list a:hover {
    color: var(--cwl-primary);
}
.cits-wpel-account .cwa-progress {
    font-size: 0.8rem;
    color: var(--cwl-muted);
    font-variant-numeric: tabular-nums;
}
.cits-wpel-account .cwa-empty {
    margin: 0;
    color: var(--cwl-muted);
    font-style: italic;
    font-size: 0.9rem;
}
.cits-wpel-account .cwa-more {
    display: inline-block;
    color: var(--cwl-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.cits-wpel-account .cwa-more:hover {
    text-decoration: underline;
}

/* Memberships list */
.cits-wpel-account .cwa-memberships h3 {
    margin: 0 0 16px;
}
.cits-wpel-account .cwa-membership-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cits-wpel-account .cwa-membership-row {
    background: #fafbfc;
    border: 1px solid var(--cwl-border);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.cits-wpel-account .cwa-membership-name {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 2px;
}
.cits-wpel-account .cwa-membership-status {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cwl-muted);
}
.cits-wpel-account .cwa-membership-expiry {
    color: var(--cwl-muted);
    font-size: 0.875rem;
}

/* Order status pill (overview card) */
.cits-wpel-account .cwa-order-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f0f0f1;
    color: #1d2327;
}
.cits-wpel-account .cwa-order-status-paid {
    background: color-mix(in srgb, #2e8540 14%, transparent);
    color: #2e8540;
}
.cits-wpel-account .cwa-order-status-failed,
.cits-wpel-account .cwa-order-status-cancelled {
    background: #fdecea;
    color: #7a1f12;
}
.cits-wpel-account .cwa-order-status-refunded {
    background: #fcf9e8;
    color: #7a5d00;
}

/* Logged-out state */
.cits-wpel-account-loggedout {
    background: #fff;
    border: 1px solid #e3e4e8;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    max-width: 560px;
    margin: 32px auto;
}
.cits-wpel-account-loggedout h2 {
    margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────
 * E35 — Instructor banner + Teaching launcher tab
 * Shows only to users whose role grants any instructor cap.
 * Brand-coloured so it stands apart from the customer surfaces.
 * ───────────────────────────────────────────────────────────── */
.cits-wpel-account .cwa-instructor-banner {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cwl-primary) 8%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--cwl-primary) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cits-wpel-account .cwa-instructor-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cits-wpel-account .cwa-instructor-banner-text strong {
    font-size: 1rem;
    color: var(--cwl-primary);
}
.cits-wpel-account .cwa-instructor-banner-text span {
    font-size: 0.875rem;
    color: var(--cwl-muted);
}
.cits-wpel-account .cwa-instructor-banner-cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--cwl-primary);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 6px;
    transition: filter 150ms ease;
}
.cits-wpel-account .cwa-instructor-banner-cta:hover,
.cits-wpel-account .cwa-instructor-banner-cta:focus-visible {
    filter: brightness(0.92);
    color: #ffffff;
}
.cits-wpel-account .cwa-instructor-banner-cta:focus-visible {
    outline: 2px solid var(--cwl-primary);
    outline-offset: 2px;
}

/* Overview — Teaching summary card */
.cits-wpel-account .cwa-overview-card-teaching {
    background: color-mix(in srgb, var(--cwl-primary) 5%, #fafbfc);
    border-color: color-mix(in srgb, var(--cwl-primary) 22%, transparent);
}
.cits-wpel-account .cwa-overview-list-teaching li {
    justify-content: space-between;
}

/* Teaching launcher tab — card grid */
.cits-wpel-account .cwa-teaching .cwa-section-title {
    margin: 0 0 4px;
    font-size: 1.2rem;
}
.cits-wpel-account .cwa-teaching .cwa-section-sub {
    margin: 0 0 18px;
}
.cits-wpel-account .cwa-launcher-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.cits-wpel-account .cwa-launcher-card {
    background: #fafbfc;
    border: 1px solid var(--cwl-border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.cits-wpel-account .cwa-launcher-card:hover {
    border-color: color-mix(in srgb, var(--cwl-primary) 40%, var(--cwl-border));
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.cits-wpel-account .cwa-launcher-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cits-wpel-account .cwa-launcher-title {
    font-size: 1rem;
    color: #1d2327;
}
.cits-wpel-account .cwa-launcher-desc {
    margin: 0;
    color: var(--cwl-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}
.cits-wpel-account .cwa-launcher-cta {
    align-self: flex-start;
    color: var(--cwl-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.cits-wpel-account .cwa-launcher-cta:hover,
.cits-wpel-account .cwa-launcher-cta:focus-visible {
    text-decoration: underline;
}
.cits-wpel-account .cwa-launcher-foot {
    margin: 18px 0 0;
}

/* E38.0.3 — actionable empty state when the Instructor Portal
 * page is missing. Stands out from the generic "no access" copy. */
.cits-wpel-account .cwa-empty-actionable {
    background: color-mix(in srgb, var(--cwl-primary) 6%, #fafbfc);
    border: 1px solid color-mix(in srgb, var(--cwl-primary) 22%, var(--cwl-border));
    border-radius: 10px;
    padding: 16px 18px;
}
.cits-wpel-account .cwa-empty-actionable .cwa-empty {
    margin: 0 0 12px;
    color: #1d2327;
    font-style: normal;
}
.cits-wpel-account .cwa-empty-actionable p:last-child {
    margin: 0;
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .cits-wpel-account .cwa-tab,
    .cits-wpel-account .cwa-instructor-banner-cta,
    .cits-wpel-account .cwa-launcher-card {
        transition: none;
    }
}

/* ============================================================
 * E46.5 hot-fix — Preferences card (leaderboard opt-in toggle)
 *
 * Persistent control rendered in the Overview tab. In native
 * mode this is the only UI for students to manage their
 * leaderboard visibility; both this and the WC My Account →
 * Account Details surface write the same user-meta key, so
 * they stay in sync.
 * ============================================================ */
.cits-wpel-account .cwa-overview-card-preferences .cwa-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding-top: 0.25rem;
}

.cits-wpel-account .cwa-pref-row__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cits-wpel-account .cwa-pref-row__label {
    font-weight: 600;
    color: #1d2327;
}

.cits-wpel-account .cwa-pref-row__hint {
    color: #4a5158;
    font-size: 0.9rem;
    line-height: 1.4;
}

.cits-wpel-account .cwa-pref-row__form {
    margin: 0;
    flex: 0 0 auto;
}

.cits-wpel-account .cwa-pref-row__cta {
    font-weight: 600;
}

@media (max-width: 480px) {
    .cits-wpel-account .cwa-overview-card-preferences .cwa-pref-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .cits-wpel-account .cwa-pref-row__form,
    .cits-wpel-account .cwa-pref-row__cta {
        width: 100%;
    }
}

/* ============================================================
 * E47.2 — Account details tab (profile + password form)
 * ============================================================ */
.cits-wpel-account .cwa-account__title {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    color: #1d2327;
}

.cits-wpel-account .cwa-account__lead,
.cits-wpel-account .cwa-account__hint {
    margin: 0 0 1rem;
    color: #4a5158;
    font-size: 0.95rem;
    line-height: 1.5;
}

.cits-wpel-account .cwa-account__hint {
    font-size: 0.88rem;
    color: #646970;
    margin-bottom: 0.6rem;
}

.cits-wpel-account .cwa-account-flash {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.cits-wpel-account .cwa-account-flash--ok {
    background: rgba(0, 122, 61, 0.06);
    color: #14532d;
    border: 1px solid rgba(0, 122, 61, 0.2);
}

.cits-wpel-account .cwa-account-flash--err {
    background: #fdecea;
    color: #7a1f12;
    border: 1px solid #f0b5ad;
}

.cits-wpel-account .cwa-account-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cits-wpel-account .cwa-account-fieldset {
    border: 1px solid #e7e9ec;
    border-radius: 10px;
    padding: 1rem 1.25rem 1.1rem;
    background: #fff;
    margin: 0;
}

.cits-wpel-account .cwa-account-fieldset legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: #1d2327;
    font-size: 0.95rem;
}

.cits-wpel-account .cwa-account-fieldset--meta {
    background: #f6f7f9;
}

.cits-wpel-account .cwa-account-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

.cits-wpel-account .cwa-account-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.65rem;
}

.cits-wpel-account .cwa-account-row .cwa-account-field {
    margin-top: 0;
}

.cits-wpel-account .cwa-account-field__label {
    font-size: 0.85rem;
    color: #2c333a;
    font-weight: 600;
}

.cits-wpel-account .cwa-account-field__input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d6dade;
    border-radius: 6px;
    font-size: 0.95rem;
    background: #fff;
    box-sizing: border-box;
}

.cits-wpel-account .cwa-account-field__input:focus {
    border-color: var(--cwl-primary, #2271b1);
    outline: 2px solid rgba(34, 113, 177, 0.15);
    outline-offset: 1px;
}

.cits-wpel-account .cwa-account-field__hint {
    font-size: 0.82rem;
    color: #646970;
    line-height: 1.4;
}

.cits-wpel-account .cwa-account-meta {
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;
}

.cits-wpel-account .cwa-account-meta > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cits-wpel-account .cwa-account-meta dt {
    font-size: 0.82rem;
    color: #646970;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cits-wpel-account .cwa-account-meta dd {
    margin: 0;
    font-size: 0.95rem;
    color: #1d2327;
    font-weight: 500;
}

.cits-wpel-account .cwa-account-meta code {
    background: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    border: 1px solid #e1e5ea;
}

.cits-wpel-account .cwa-account-actions {
    display: flex;
    justify-content: flex-end;
}

.cits-wpel-account .cwa-account-submit {
    font-weight: 600;
}

@media (max-width: 600px) {
    .cits-wpel-account .cwa-account-row,
    .cits-wpel-account .cwa-account-meta {
        grid-template-columns: 1fr;
    }
    .cits-wpel-account .cwa-account-fieldset {
        padding: 0.85rem 1rem 1rem;
    }
    .cits-wpel-account .cwa-account-actions {
        justify-content: stretch;
    }
    .cits-wpel-account .cwa-account-submit {
        width: 100%;
    }
}

/* ============================================================
 * E48.3 — Unified Dashboard widget stack
 *
 * Same chrome whether the widgets render inside the native
 * [cits_wpel_my_account] Overview tab, the native
 * [cits_wpel_instructor] Overview tab, or WC's My Account
 * Dashboard endpoint (via WcDashboardInjection).
 * ============================================================ */
.cits-wpel-account .cwa-dashboard-stack,
.cwa-wc-injection .cwa-dashboard-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
}

.cits-wpel-account .cwa-widget,
.cwa-wc-injection .cwa-widget {
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}

/* ───────────────────────────────────────────────────────────
   Teaching Workspace Launcher (option B)
   /instructor/ Overview tab — Work / Author / Manage / Engage
   group cards. Distinct from /my-account/'s dashboard widgets.
   ─────────────────────────────────────────────────────────── */
.cits-wpel-account .cwa-teaching-launcher {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.cits-wpel-account .cwa-launcher-intro {
    margin: 0 0 0.25rem;
    color: #6b7280;
    font-size: 0.9rem;
}
.cits-wpel-account .cwa-launcher-group {
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}
.cits-wpel-account .cwa-launcher-group__label {
    margin: 0 0 0.85rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}
.cits-wpel-account .cwa-launcher-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.cits-wpel-account .cwa-launcher-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    color: #1f2937;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.cits-wpel-account .cwa-launcher-card:hover,
.cits-wpel-account .cwa-launcher-card:focus-visible {
    border-color: var(--cwl-primary, #2563eb);
    background: rgba(0, 0, 0, 0.025);
    text-decoration: none;
}
.cits-wpel-account .cwa-launcher-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--cwl-primary, #2563eb);
    flex-shrink: 0;
}
.cits-wpel-account .cwa-launcher-card__icon svg {
    width: 18px;
    height: 18px;
}
.cits-wpel-account .cwa-launcher-card__label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}
.cits-wpel-account .cwa-launcher-card__arrow {
    color: #9ca3af;
    font-size: 16px;
    transition: transform 0.15s, color 0.15s;
}
.cits-wpel-account .cwa-launcher-card:hover .cwa-launcher-card__arrow,
.cits-wpel-account .cwa-launcher-card:focus-visible .cwa-launcher-card__arrow {
    color: var(--cwl-primary, #2563eb);
    transform: translateX(2px);
}
@container cwa-shell (max-width: 600px) {
    .cits-wpel-account .cwa-launcher-cards {
        grid-template-columns: 1fr;
    }
}

.cits-wpel-account .cwa-widget__title,
.cwa-wc-injection .cwa-widget__title {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    color: #1d2327;
}

/* Welcome banner — softer chrome so it reads as a greeting, not a card */
.cits-wpel-account .cwa-widget--welcome,
.cwa-wc-injection .cwa-widget--welcome {
    background: linear-gradient(135deg, rgba(34, 113, 177, 0.05), rgba(0, 122, 61, 0.05));
    border-color: rgba(34, 113, 177, 0.15);
}

.cits-wpel-account .cwa-welcome__title,
.cwa-wc-injection .cwa-welcome__title {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
    color: #1d2327;
}

.cits-wpel-account .cwa-welcome__sub,
.cwa-wc-injection .cwa-welcome__sub {
    margin: 0;
    color: #4a5158;
    font-size: 0.95rem;
}

/* Stat tile grid */
.cits-wpel-account .cwa-stat-grid,
.cwa-wc-injection .cwa-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cits-wpel-account .cwa-stat-tile,
.cwa-wc-injection .cwa-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    background: #fafbfc;
    border: 1px solid #e7e9ec;
    border-radius: 8px;
    text-align: left;
}

.cits-wpel-account .cwa-stat-tile__value,
.cwa-wc-injection .cwa-stat-tile__value {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1d2327;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.cits-wpel-account .cwa-stat-tile__label,
.cwa-wc-injection .cwa-stat-tile__label {
    font-size: 0.85rem;
    color: #4a5158;
    font-weight: 600;
}

/* Recent activity list */
.cits-wpel-account .cwa-activity-list,
.cwa-wc-injection .cwa-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cits-wpel-account .cwa-activity-row,
.cwa-wc-injection .cwa-activity-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.1rem 0.85rem;
    align-items: baseline;
    padding: 0.6rem 0.85rem;
    background: #fafbfc;
    border: 1px solid #e7e9ec;
    border-radius: 8px;
}

.cits-wpel-account .cwa-activity-row__link,
.cwa-wc-injection .cwa-activity-row__link {
    display: contents;
    text-decoration: none;
    color: inherit;
}

.cits-wpel-account .cwa-activity-row__link:hover .cwa-activity-row__label,
.cwa-wc-injection .cwa-activity-row__link:hover .cwa-activity-row__label {
    color: var(--cwl-primary, #2271b1);
}

.cits-wpel-account .cwa-activity-row__label,
.cwa-wc-injection .cwa-activity-row__label {
    font-weight: 600;
    color: #1d2327;
}

.cits-wpel-account .cwa-activity-row__sub,
.cwa-wc-injection .cwa-activity-row__sub {
    font-size: 0.85rem;
    color: #4a5158;
}

.cits-wpel-account .cwa-activity-row__when,
.cwa-wc-injection .cwa-activity-row__when {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    font-size: 0.85rem;
    color: #646970;
    font-variant-numeric: tabular-nums;
}

/* Quick actions row */
.cits-wpel-account .cwa-quick-actions,
.cwa-wc-injection .cwa-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cits-wpel-account .cwa-quick-action,
.cwa-wc-injection .cwa-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    background: #fff;
    border: 1px solid #d6dade;
    border-radius: 999px;
    font-size: 0.9rem;
    color: #2c333a;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
}

.cits-wpel-account .cwa-quick-action:hover,
.cits-wpel-account .cwa-quick-action:focus,
.cwa-wc-injection .cwa-quick-action:hover,
.cwa-wc-injection .cwa-quick-action:focus {
    background: var(--cwl-primary, #2271b1);
    color: #fff;
    border-color: var(--cwl-primary, #2271b1);
}

/* WC injection wrapper — give the injected stack breathing room from
 * WC's own dashboard paragraph above it. */
.cwa-wc-injection {
    margin-top: 1.5rem;
}

@media (max-width: 600px) {
    .cits-wpel-account .cwa-widget,
    .cwa-wc-injection .cwa-widget {
        padding: 1rem 1.1rem;
    }
    .cits-wpel-account .cwa-activity-row,
    .cwa-wc-injection .cwa-activity-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .cits-wpel-account .cwa-activity-row__when,
    .cwa-wc-injection .cwa-activity-row__when {
        grid-row: 3;
        grid-column: 1;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * E48.4 — Enterprise Dashboard Design System
 *
 * Token-driven, theme-inheriting, two-column layout with off-canvas
 * drawer on mobile. Replaces the chip-strip tab nav with a left
 * sidebar grouped semantically per the nav research pass.
 *
 * Color tokens derive from --cwl-primary via color-mix() so the
 * operator's Customizer theme color flows through automatically.
 * Neutrals + semantic colors stay fixed (intentional — Stripe pattern).
 * ════════════════════════════════════════════════════════════════════════ */

.cits-wpel-account.cwa-dashboard-v2,
.cwa-wc-injection.cwa-dashboard-v2 {
    /* Theme color exposure */
    --cwl-primary: var(--cits-wpel-primary-color, #2271b1);

    /* Primary tints — color-mix derivatives */
    --cwl-primary-04: color-mix(in srgb, var(--cwl-primary) 4%, white);
    --cwl-primary-08: color-mix(in srgb, var(--cwl-primary) 8%, white);
    --cwl-primary-12: color-mix(in srgb, var(--cwl-primary) 12%, white);
    --cwl-primary-20: color-mix(in srgb, var(--cwl-primary) 20%, white);
    --cwl-primary-40: color-mix(in srgb, var(--cwl-primary) 40%, white);
    --cwl-primary-hover: color-mix(in srgb, var(--cwl-primary) 88%, black);

    /* Surfaces — tinted page with white cards (GitHub Insights inversion) */
    --cwl-surface-1: #ffffff;
    --cwl-surface-2: color-mix(in srgb, var(--cwl-primary) 2.5%, #f7f8fa);
    --cwl-surface-3: color-mix(in srgb, var(--cwl-primary) 5%, #eef0f3);

    /* Borders — softer than #e1e5ea (Vercel) */
    --cwl-border: hsl(220 13% 91%);
    --cwl-border-subtle: hsl(220 13% 95%);
    --cwl-border-strong: color-mix(in srgb, var(--cwl-primary) 30%, hsl(220 13% 85%));

    /* Text — fixed neutrals */
    --cwl-text: #111827;
    --cwl-text-muted: #6b7280;
    --cwl-text-faint: #9ca3af;

    /* Semantic — fixed, NOT theme-derived */
    --cwl-success: #16a34a;
    --cwl-success-bg: color-mix(in srgb, #16a34a 12%, white);
    --cwl-success-fg: #15803d;
    --cwl-warning: #d97706;
    --cwl-warning-bg: color-mix(in srgb, #d97706 12%, white);
    --cwl-warning-fg: #b45309;
    --cwl-danger: #dc2626;
    --cwl-danger-bg: color-mix(in srgb, #dc2626 12%, white);
    --cwl-danger-fg: #b91c1c;

    /* Focus ring — theme-aware */
    --cwl-focus-ring: 0 0 0 2px var(--cwl-primary), 0 0 0 4px color-mix(in srgb, var(--cwl-primary) 25%, white);
}

/* ─── Two-column shell ─── */
.cits-wpel-account.cwa-dashboard-v2 .cwa-shell {
    background: var(--cwl-surface-2);
    border-radius: 16px;
    padding: clamp(16px, 4vw, 32px);
    margin: 0;
    /* Container query target so a narrow theme content area collapses
       the two-column grid to drawer mode even on desktop viewports. */
    container-type: inline-size;
    container-name: cwa-shell;
}

/* E48.4.0.3 — Drawer pattern at ALL viewport sizes. The sidebar is
   off-canvas by default; user opens it via the trigger button, picks
   a destination, and the drawer closes on navigation. Main content
   always uses 100% width — maximises the dashboard's working area,
   especially inside narrow theme content containers. */
.cits-wpel-account.cwa-dashboard-v2 .cwa-grid {
    display: block;
    position: relative;
}

.cits-wpel-account.cwa-dashboard-v2 .cwa-main {
    min-width: 0;
}

/* Drawer trigger — prominent "Menu" button, always visible above the
   main content. Sits flush-left, theme-color outlined. */
.cwa-dashboard-v2 .cwa-drawer-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--cwl-surface-1);
    border: 1px solid var(--cwl-border);
    border-radius: 8px;
    color: var(--cwl-text);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    margin: 0 0 16px;
    transition: background 120ms ease, border-color 120ms ease;
    width: auto;
    justify-content: flex-start;
}

.cwa-dashboard-v2 .cwa-drawer-trigger:hover,
.cwa-dashboard-v2 .cwa-drawer-trigger:focus-visible {
    background: var(--cwl-primary-04);
    border-color: var(--cwl-primary-40);
    outline: none;
}

.cwa-dashboard-v2 .cwa-drawer-trigger svg {
    color: var(--cwl-primary);
}

/* E48.4.0.4 — Portaled drawer rules. The JS moves these elements to
   <body> on init so they escape parent stacking contexts (Blocksy,
   Astra, Kadence etc. use transform/will-change on wrappers, which
   would otherwise trap position:fixed inside the ancestor instead of
   the viewport). Selectors are now `.cwa-portaled` instead of
   `.cwa-dashboard-v2 .cwa-side-nav` so they apply at body level. */

.cwa-side-nav.cwa-portaled {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    z-index: 100001;
    background: #ffffff;
    border-radius: 0;
    border-right: 1px solid hsl(220 13% 91%);
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    padding: 56px 14px 16px;
    overflow-y: auto;
    transition: left 240ms ease;
    box-shadow: 0 0 0 transparent;
    margin: 0;
}

.cwa-side-nav.cwa-portaled.is-open {
    left: 0;
    box-shadow: 12px 0 32px rgb(0 0 0 / 0.22);
}

.cwa-drawer-backdrop.cwa-portaled {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
    z-index: 100000;
    opacity: 0;
    transition: opacity 200ms ease;
    cursor: pointer;
}

.cwa-drawer-backdrop.cwa-portaled.is-active {
    display: block;
    opacity: 1;
}

/* Drawer close (×) — top-right of the portaled sidebar */
.cwa-side-nav.cwa-portaled .cwa-drawer-close {
    position: absolute;
    top: 10px;
    right: 12px;
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: #111827;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    display: block;
}

.cwa-side-nav.cwa-portaled .cwa-drawer-close:hover {
    background: rgb(0 0 0 / 0.05);
}

/* The portaled sidebar still needs its internal group/list styling.
   Since it now lives at body level, we re-declare the rules here
   instead of relying on `.cwa-dashboard-v2 .cwa-side-nav__*` chains. */
.cwa-side-nav.cwa-portaled .cwa-side-nav__group {
    margin: 0;
    padding: 0;
}

.cwa-side-nav.cwa-portaled .cwa-side-nav__group + .cwa-side-nav__group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid hsl(220 13% 95%);
}

.cwa-side-nav.cwa-portaled .cwa-side-nav__group-label {
    margin: 4px 8px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
}

.cwa-side-nav.cwa-portaled .cwa-side-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cwa-side-nav.cwa-portaled .cwa-side-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #111827;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.3;
    transition: background 120ms ease, color 120ms ease;
}

.cwa-side-nav.cwa-portaled .cwa-side-nav__item:hover,
.cwa-side-nav.cwa-portaled .cwa-side-nav__item:focus-visible {
    background: rgb(0 0 0 / 0.04);
    color: #111827;
}

.cwa-side-nav.cwa-portaled .cwa-side-nav__item[aria-current="page"] {
    background: var(--cits-wpel-primary-color, #2271b1);
    color: #fff;
}

.cwa-side-nav.cwa-portaled .cwa-side-nav__item-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
}

.cwa-side-nav.cwa-portaled .cwa-side-nav__item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hide the original non-portaled fallback rules' visual artifacts —
   when JS hasn't run yet (or fails to run), keep the sidebar hidden so
   users don't see the menu rendered inline above content. */
.cwa-dashboard-v2 .cwa-side-nav:not(.cwa-portaled) {
    display: none;
}
.cwa-dashboard-v2 .cwa-drawer-backdrop:not(.cwa-portaled) {
    display: none;
}

/* ─── Left sidebar nav (replaces chip tabs) ─── */
.cwa-dashboard-v2 .cwa-side-nav {
    position: sticky;
    top: 24px;
    background: var(--cwl-surface-1);
    border: 1px solid var(--cwl-border);
    border-radius: 12px;
    padding: 12px;
    margin: 0;
}

.cwa-dashboard-v2 .cwa-side-nav__group {
    margin: 0;
    padding: 0;
}

.cwa-dashboard-v2 .cwa-side-nav__group + .cwa-side-nav__group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cwl-border-subtle);
}

.cwa-dashboard-v2 .cwa-side-nav__group-label {
    margin: 4px 8px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cwl-text-faint);
}

.cwa-dashboard-v2 .cwa-side-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cwa-dashboard-v2 .cwa-side-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--cwl-text);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.3;
    transition: background 120ms ease, color 120ms ease;
}

.cwa-dashboard-v2 .cwa-side-nav__item:hover,
.cwa-dashboard-v2 .cwa-side-nav__item:focus-visible {
    background: rgb(0 0 0 / 0.03);
    color: var(--cwl-text);
}

.cwa-dashboard-v2 .cwa-side-nav__item[aria-current="page"] {
    background: var(--cwl-primary);
    color: #fff;
}

.cwa-dashboard-v2 .cwa-side-nav__item-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
}

.cwa-dashboard-v2 .cwa-side-nav__item[aria-current="page"] .cwa-side-nav__item-icon {
    color: #fff;
}

.cwa-dashboard-v2 .cwa-side-nav__item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Mobile drawer trigger ─── */
.cwa-dashboard-v2 .cwa-drawer-trigger {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--cwl-surface-1);
    border: 1px solid var(--cwl-border);
    border-radius: 10px;
    color: var(--cwl-text);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    margin: 0 0 16px;
    width: 100%;
    justify-content: space-between;
}

.cwa-dashboard-v2 .cwa-drawer-trigger:focus-visible {
    box-shadow: var(--cwl-focus-ring);
    outline: none;
}

/* ─── Page header (above tabs) — LEGACY cwa-page-header retained
       for backwards compat on any surface still using the slim header.
       E62.A — replaced with `.cwa-hero.et-hero` on the main dashboard. ─── */
.cwa-dashboard-v2 .cwa-page-header {
    margin: 0 0 20px;
}

.cwa-dashboard-v2 .cwa-page-header__crumb {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--cwl-text-muted);
    margin: 0 0 4px;
}

/* ─── E62.A — Dashboard hero ───────────────────────────────────────────
   Uses the shared `.et-hero` design-system block so the dashboard
   tabs (Overview / Account / Memberships / Orders / Courses) all
   feel identical to the standalone Lesson Player / My Courses /
   Course Landing surfaces. Brand color is inherited via the
   `--cits-wpel-primary-color` chain — no hardcoded greens here. */
.cwa-dashboard-v2 .cwa-hero.et-hero {
    margin: 0 0 20px;
}
/* Title inside the hero is now rendered on a colored background, so
   force readable white regardless of the legacy cwa-page-header__title
   color rule below. */
.cwa-dashboard-v2 .cwa-hero.et-hero .cwa-page-header__title {
    color: #fff;
    margin: 0;
}
@container cwa-shell (max-width: 600px) {
    .cwa-dashboard-v2 .cwa-hero.et-hero {
        margin: 0 0 16px;
    }
}

/* E62.D — When the embedded StudentMyCoursesShortcode renders inside
   the dashboard (hide_hero="1" attribute), suppress its own top spacing
   so the cards sit directly under the dashboard hero. */
.cwa-dashboard-v2 .cwa-main .cits-wpel-my-courses--no-hero {
    margin-top: 0;
}

/* Breadcrumb in the instructor portal page header */
.cwa-dashboard-v2 .cwa-page-header__breadcrumb {
    margin: 0 0 6px;
    font-size: 0.8125rem;
    color: var(--cwl-text-muted, #6b7280);
}
.cwa-dashboard-v2 .cwa-page-header__breadcrumb .cwl-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.cwa-dashboard-v2 .cwa-page-header__breadcrumb .cwl-breadcrumb__item {
    display: inline-flex;
    align-items: center;
}
.cwa-dashboard-v2 .cwa-page-header__breadcrumb .cwl-breadcrumb__item + .cwl-breadcrumb__item::before {
    content: "/";
    margin-right: 6px;
    opacity: 0.55;
}
.cwa-dashboard-v2 .cwa-page-header__breadcrumb .cwl-breadcrumb__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.cwa-dashboard-v2 .cwa-page-header__breadcrumb .cwl-breadcrumb__link:hover,
.cwa-dashboard-v2 .cwa-page-header__breadcrumb .cwl-breadcrumb__link:focus-visible {
    color: var(--cwl-primary, #2563eb);
    text-decoration: underline;
}
.cwa-dashboard-v2 .cwa-page-header__breadcrumb .cwl-breadcrumb__item--current {
    color: var(--cwl-text, #1d2327);
    font-weight: 500;
}

.cwa-dashboard-v2 .cwa-page-header__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--cwl-text);
}

/* ─── Widget cards (override old flat treatment) ─── */
.cwa-dashboard-v2 .cwa-widget {
    background: var(--cwl-surface-1);
    border: 1px solid var(--cwl-border);
    border-radius: 12px;
    padding: 20px 24px;
}

.cwa-dashboard-v2 .cwa-widget + .cwa-widget {
    margin-top: 16px;
}

.cwa-dashboard-v2 .cwa-widget__title {
    margin: 0 0 12px;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cwl-text);
}

/* ─── Welcome banner refresh ─── */
.cwa-dashboard-v2 .cwa-widget--welcome {
    background: var(--cwl-primary-08);
    border-color: color-mix(in srgb, var(--cwl-primary) 18%, transparent);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 24px 28px;
}

.cwa-dashboard-v2 .cwa-welcome__title {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--cwl-text);
}

.cwa-dashboard-v2 .cwa-welcome__sub {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--cwl-text-muted);
    line-height: 1.5;
}

.cwa-dashboard-v2 .cwa-welcome__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--cwl-primary);
    color: #fff;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 120ms ease;
}

.cwa-dashboard-v2 .cwa-welcome__cta:hover {
    background: var(--cwl-primary-hover);
    color: #fff;
}

/* ─── Stat tile grid (4-up → 2-up → 1-up) ─── */
.cwa-dashboard-v2 .cwa-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cwa-dashboard-v2 .cwa-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: var(--cwl-surface-1);
    border: 1px solid var(--cwl-border);
    border-radius: 10px;
    text-align: left;
}

.cwa-dashboard-v2 .cwa-stat-tile__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cwa-dashboard-v2 .cwa-stat-tile__icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--cwl-primary-08);
    color: var(--cwl-primary);
}

.cwa-dashboard-v2 .cwa-stat-tile__icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
}

.cwa-dashboard-v2 .cwa-stat-tile__label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cwl-text-muted);
}

.cwa-dashboard-v2 .cwa-stat-tile__value {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cwl-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* ─── Recent activity (Linear hover) ─── */
.cwa-dashboard-v2 .cwa-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cwa-dashboard-v2 .cwa-activity-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: baseline;
    padding: 14px 8px;
    margin: 0 -8px;
    border-radius: 8px;
    border-top: 1px solid var(--cwl-border-subtle);
    background: transparent;
    transition: background 100ms ease;
}

.cwa-dashboard-v2 .cwa-activity-row:first-child {
    border-top: 0;
}

.cwa-dashboard-v2 .cwa-activity-row:hover {
    background: rgb(0 0 0 / 0.025);
}

.cwa-dashboard-v2 .cwa-activity-row__link {
    display: contents;
    text-decoration: none;
    color: inherit;
}

.cwa-dashboard-v2 .cwa-activity-row__link:hover .cwa-activity-row__label {
    color: var(--cwl-primary);
}

.cwa-dashboard-v2 .cwa-activity-row__label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cwl-text);
}

.cwa-dashboard-v2 .cwa-activity-row__sub {
    font-size: 0.8125rem;
    color: var(--cwl-text-muted);
}

.cwa-dashboard-v2 .cwa-activity-row__when {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 0.8125rem;
    color: var(--cwl-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ─── Quick actions as labeled cards (not pills) ─── */
.cwa-dashboard-v2 .cwa-quick-group {
    margin: 0 0 16px;
}

.cwa-dashboard-v2 .cwa-quick-group:last-child {
    margin-bottom: 0;
}

.cwa-dashboard-v2 .cwa-quick-group__label {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cwl-text-muted);
}

.cwa-dashboard-v2 .cwa-quick-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cwa-dashboard-v2 .cwa-quick-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cwl-surface-1);
    border: 1px solid var(--cwl-border);
    border-radius: 10px;
    color: var(--cwl-text);
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}

.cwa-dashboard-v2 .cwa-quick-card:hover,
.cwa-dashboard-v2 .cwa-quick-card:focus-visible {
    background: var(--cwl-primary-04);
    border-color: var(--cwl-primary-40);
    color: var(--cwl-text);
}

.cwa-dashboard-v2 .cwa-quick-card__icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cwl-primary-08);
    color: var(--cwl-primary);
    flex-shrink: 0;
}

.cwa-dashboard-v2 .cwa-quick-card__icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
}

.cwa-dashboard-v2 .cwa-quick-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.cwa-dashboard-v2 .cwa-quick-card__label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cwl-text);
}

.cwa-dashboard-v2 .cwa-quick-card__desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--cwl-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

/* ─── Section dividers within Overview (Learning / Teaching) ─── */
.cwa-dashboard-v2 .cwa-widget__section-label {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cwl-text-muted);
}

/* ─── Mobile breakpoints ─── */
@media (max-width: 900px) {
    .cwa-dashboard-v2 .cwa-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cwa-dashboard-v2 .cwa-welcome--mobile-stack {
        grid-template-columns: 1fr;
    }
}

/* E48.4.0.3 — Responsive grid breakpoints (drawer now always-on so the
   sidebar-collapse rules above this section moved up to the base layer). */
@media (max-width: 768px) {
    .cwa-dashboard-v2 .cwa-quick-cards {
        grid-template-columns: 1fr;
    }
    .cwa-dashboard-v2 .cwa-welcome--mobile-stack,
    .cwa-dashboard-v2 .cwa-widget--welcome {
        grid-template-columns: 1fr;
    }
}

@container cwa-shell (max-width: 760px) {
    .cwa-dashboard-v2 .cwa-quick-cards {
        grid-template-columns: 1fr;
    }
    .cwa-dashboard-v2 .cwa-widget--welcome {
        grid-template-columns: 1fr;
    }
    .cwa-dashboard-v2 .cwa-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cwa-dashboard-v2 .cwa-stat-grid {
        grid-template-columns: 1fr;
    }
    .cwa-dashboard-v2 .cwa-welcome--mobile-stack {
        grid-template-columns: 1fr;
    }
    .cwa-dashboard-v2 .cwa-shell {
        padding: 12px;
        border-radius: 0;
    }
    .cwa-dashboard-v2 .cwa-widget {
        padding: 16px 18px;
    }
}

/* ─── E48.4b — Avatar dropdown in theme header ─── */
.cits-wpel-avatar-menu {
    position: relative;
    display: inline-block;
}

.cits-wpel-avatar-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    /* v1.5.50 — trigger text/icon color falls back to `inherit` when the
     * operator hasn't set a per-state override. Sticky + transparent
     * overrides come in via body-class-scoped rules emitted by
     * CustomizerCssInjector. */
    color: var(--cits-wpel-avatar-trigger-text, inherit);
    font: inherit;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.cits-wpel-avatar-menu__trigger:hover,
.cits-wpel-avatar-menu__trigger:focus-visible {
    background: var(--cits-wpel-avatar-trigger-hover-bg, rgb(0 0 0 / 0.04));
    border-color: var(--cits-wpel-avatar-trigger-hover-bg, rgb(0 0 0 / 0.08));
    outline: none;
}

.cits-wpel-avatar-menu__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}

.cits-wpel-avatar-menu__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cits-wpel-avatar-menu__chevron {
    width: 14px;
    height: 14px;
    color: inherit;
    opacity: 0.7;
}

.cits-wpel-avatar-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    /* v1.5.50 — panel bg + text inherit from Customizer overrides when
     * set; fall back to white / current color. Border tints from the
     * panel background so dark panels get a subtle darker rim. */
    background: var(--cits-wpel-avatar-panel-bg, #fff);
    color: var(--cits-wpel-avatar-panel-text, inherit);
    border: 1px solid var(--cits-wpel-avatar-panel-border, hsl(220 13% 91%));
    border-radius: 12px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.12), 0 2px 4px rgb(0 0 0 / 0.04);
    padding: 6px;
    z-index: 100001;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}

.cits-wpel-avatar-menu.is-open .cits-wpel-avatar-menu__panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}

.cits-wpel-avatar-menu__header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid hsl(220 13% 95%);
    margin-bottom: 6px;
}

.cits-wpel-avatar-menu__header-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
}

.cits-wpel-avatar-menu__header-email {
    display: block;
    font-size: 0.8125rem;
    color: #6b7280;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cits-wpel-avatar-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cits-wpel-avatar-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    /* v1.5.50 — item text inherits from the panel's color (which itself
     * respects --cits-wpel-avatar-panel-text). Fallback keeps prior ink. */
    color: var(--cits-wpel-avatar-panel-text, #111827);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background 100ms ease;
}

.cits-wpel-avatar-menu__item:hover,
.cits-wpel-avatar-menu__item:focus-visible {
    /* Use color-mix so dark panels get a lighter hover tint and vice
     * versa. Falls back to the classic subtle black overlay when the
     * item text color is unset. */
    background: color-mix(in srgb, var(--cits-wpel-avatar-panel-text, #111827) 6%, transparent);
    color: var(--cits-wpel-avatar-panel-text, #111827);
    outline: none;
}

.cits-wpel-avatar-menu__item-icon {
    width: 16px;
    height: 16px;
    /* Mutes the item icon relative to the item text using color-mix. */
    color: color-mix(in srgb, var(--cits-wpel-avatar-panel-text, #111827) 55%, transparent);
    flex-shrink: 0;
}

.cits-wpel-avatar-menu__divider {
    height: 1px;
    background: hsl(220 13% 95%);
    margin: 6px 4px;
}

@media (max-width: 480px) {
    .cits-wpel-avatar-menu__name {
        display: none;
    }
    .cits-wpel-avatar-menu__panel {
        right: -8px;
        min-width: calc(100vw - 32px);
    }
}

/* ────────────────────────────────────────────────────────────────
   WC MY ACCOUNT — DRILL-DOWN CHROME
   Root /my-account/ keeps WC's vertical sidebar visible. On any
   sub-endpoint the body picks up `.cits-wpel-wc-subpage` (injected
   by Commerce\Frontend\MyAccountChrome). These rules hide the WC
   nav aside, reset the parent `.woocommerce` layout so the content
   column doesn't stay offset by the now-hidden nav, and style the
   drill-down breadcrumb at the top of the content.

   Rules are scoped to `body.cits-wpel-wc-subpage` so they NEVER
   fire outside WC sub-endpoints — native-mode pages are not
   affected. The body class is added only by
   `MyAccountChrome::filterBodyClass` on WC sub-endpoint requests.
   ──────────────────────────────────────────────────────────────── */
body.cits-wpel-wc-subpage .woocommerce-MyAccount-navigation {
    display: none !important;
}
/* Reset the WC parent's layout so the content fills the full row
   regardless of whether the theme uses floats, grid, or flex. */
body.cits-wpel-wc-subpage .woocommerce-account .woocommerce,
body.cits-wpel-wc-subpage .woocommerce {
    display: block !important;
}
body.cits-wpel-wc-subpage .woocommerce-account .woocommerce-MyAccount-content,
body.cits-wpel-wc-subpage .woocommerce-MyAccount-content {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
}
/* Clearfix on the parent so any residual float doesn't collapse it. */
body.cits-wpel-wc-subpage .woocommerce-account .woocommerce::after,
body.cits-wpel-wc-subpage .woocommerce::after {
    content: '';
    display: block;
    clear: both;
}

/* Drill-down breadcrumb at top of content area */
body.cits-wpel-wc-subpage .cits-wpel-wc-breadcrumb {
    margin: 0 0 1.25rem;
    font-size: 13px;
    color: #6b7280;
}
body.cits-wpel-wc-subpage .cits-wpel-wc-breadcrumb .cwl-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
body.cits-wpel-wc-subpage .cits-wpel-wc-breadcrumb .cwl-breadcrumb__item {
    display: inline-flex;
    align-items: center;
}
body.cits-wpel-wc-subpage .cits-wpel-wc-breadcrumb .cwl-breadcrumb__item + .cwl-breadcrumb__item::before {
    content: "/";
    margin-right: 6px;
    opacity: 0.55;
}
body.cits-wpel-wc-subpage .cits-wpel-wc-breadcrumb .cwl-breadcrumb__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
body.cits-wpel-wc-subpage .cits-wpel-wc-breadcrumb .cwl-breadcrumb__link:hover,
body.cits-wpel-wc-subpage .cits-wpel-wc-breadcrumb .cwl-breadcrumb__link:focus-visible {
    color: var(--cits-wpel-primary-color, #2271b1);
    text-decoration: underline;
}
body.cits-wpel-wc-subpage .cits-wpel-wc-breadcrumb .cwl-breadcrumb__item--current {
    color: #1d2327;
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════════
 * E70 — Universal account menu shortcode [cits_wpel_account_menu]
 *
 * Two render paths share the .cits-wpel-avatar-menu markup:
 *   - fixed mode  → floating top-right corner (HeaderAvatarMenu auto-inject)
 *   - inline mode → operator-placed via shortcode/widget/block (E70.1)
 * Plus a logged-out CTA pair (Sign in / Sign up) for the inline path.
 *
 * The inline modifier wipes the fixed-positioning the auto-injection
 * sets via inline style. Alignment + size variants tune the rendering
 * to fit common header-builder slots.
 * ════════════════════════════════════════════════════════════════════════ */

/* ---------- Inline-placement modifier ---------- */

/* The inline container drops the floating positioning baked into the
   fixed-mode inline style (display:none + position:fixed) so the
   shortcode renders in document flow at the operator's chosen spot. */
.cits-wpel-account-menu--inline {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
}

/* Alignment variants — work when the parent gives the container space
   to align within (block-level wrappers in builder HTML elements). */
.cits-wpel-account-menu--inline.cits-wpel-account-menu--align-left {
    justify-content: flex-start;
    text-align: left;
}
.cits-wpel-account-menu--inline.cits-wpel-account-menu--align-center {
    justify-content: center;
    text-align: center;
    display: flex !important;
    width: 100%;
}
.cits-wpel-account-menu--inline.cits-wpel-account-menu--align-right {
    justify-content: flex-end;
    text-align: right;
    margin-left: auto;
}

/* Size variants — trigger button density. Compact for tight header
   slots; default mirrors the floating-corner sizing. */
.cits-wpel-account-menu--size-compact .cits-wpel-avatar-menu__trigger {
    padding: 6px 8px;
    gap: 6px;
}
.cits-wpel-account-menu--size-compact .cits-wpel-avatar-menu__avatar {
    width: 28px;
    height: 28px;
}
.cits-wpel-account-menu--size-compact .cits-wpel-avatar-menu__name {
    font-size: 13px;
}

/* Hide the trigger name on mobile by default to keep the header tidy.
   The show-name-mobile modifier overrides for operators who want it. */
@media (max-width: 600px) {
    .cits-wpel-account-menu--inline .cits-wpel-avatar-menu__name {
        display: none;
    }
    .cits-wpel-account-menu--inline.cits-wpel-account-menu--show-name-mobile .cits-wpel-avatar-menu__name {
        display: inline;
    }
}

/* When inline, the dropdown panel can hit viewport edges depending on
   placement. Default to right-aligning the panel (it grows leftward
   from the trigger's right edge). Themes can override per their layout. */
.cits-wpel-account-menu--inline .cits-wpel-avatar-menu {
    position: relative;
}
.cits-wpel-account-menu--inline .cits-wpel-avatar-menu__panel {
    right: 0;
    left: auto;
}
.cits-wpel-account-menu--inline.cits-wpel-account-menu--align-left .cits-wpel-avatar-menu__panel {
    right: auto;
    left: 0;
}

/* ---------- Logged-out CTA pair ---------- */

/* Rendered when the visitor isn't authenticated. Matches the enterprise
   SaaS pattern (Stripe/Linear/Vercel/Notion): secondary text-link for
   Sign in + primary accent button for Sign up. */
.cits-wpel-account-cta-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
}
.cits-wpel-account-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    padding: 8px 14px;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.cits-wpel-account-cta:focus,
.cits-wpel-account-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--cits-wpel-primary-color, #2271b1), 0 0 0 4px rgba(34, 113, 177, 0.18);
}
.cits-wpel-account-cta--secondary {
    color: var(--cits-wpel-primary-color, #2271b1);
    background: transparent;
    border: 1px solid transparent;
    padding-left: 4px;
    padding-right: 4px;
}
.cits-wpel-account-cta--secondary:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cits-wpel-account-cta--primary {
    color: #ffffff;
    background: var(--cits-wpel-primary-color, #2271b1);
    border: 1px solid var(--cits-wpel-primary-color, #2271b1);
}
.cits-wpel-account-cta--primary:hover {
    background: color-mix(in srgb, var(--cits-wpel-primary-color, #2271b1) 88%, black);
    border-color: color-mix(in srgb, var(--cits-wpel-primary-color, #2271b1) 88%, black);
    color: #ffffff;
}

/* Compact size — smaller CTAs for tight header slots. */
.cits-wpel-account-menu--size-compact .cits-wpel-account-cta {
    font-size: 13px;
    padding: 6px 10px;
}

/* Mobile: ≥44x44 px tap target per WCAG 2.2 Target Size (Minimum).
   `min-height` lets the CTA grow vertically without breaking the
   trigger's inline-flex alignment in the header bar. */
@media (max-width: 480px) {
    .cits-wpel-account-cta-group {
        gap: 8px;
    }
    .cits-wpel-account-cta {
        padding: 10px 14px;
        font-size: 14px;
        min-height: 44px;
    }
    .cits-wpel-account-cta--secondary {
        padding-left: 10px;
        padding-right: 10px;
    }
    /* Avatar trigger gets the same 44px floor for parity. */
    .cits-wpel-account-menu--inline .cits-wpel-avatar-menu__trigger {
        min-height: 44px;
    }
}

/* Reduce-motion: kill CTA transitions. */
@media (prefers-reduced-motion: reduce) {
    .cits-wpel-account-cta {
        transition: none;
    }
}

/* ---------- E70.0.3 hot-fix: injected into theme header nav ----------
 * dashboard.js wraps our markup in <li class="menu-item cits-wpel-account-menu-injected">
 * and appends it to the theme's main header <ul>. The injected modifier
 * neutralises any vertical-rhythm cruft + lets the parent <li> handle
 * spacing/alignment from the theme's menu CSS. */
.cits-wpel-account-menu-injected {
    list-style: none;
    display: inline-flex;
    align-items: center;
}
.cits-wpel-account-menu-injected .cits-wpel-account-menu--injected {
    margin: 0;
    padding: 0;
    line-height: 1;
}
/* CTA tightening when injected — themes typically have generous menu-item
   padding, so we make our buttons match the menu's text density. */
.cits-wpel-account-menu-injected .cits-wpel-account-cta {
    padding: 6px 12px;
    font-size: inherit;
}
.cits-wpel-account-menu-injected .cits-wpel-account-cta-group {
    gap: 8px;
}
/* The avatar trigger inside a menu item should sit at the menu's
   baseline + use the menu font sizing. */
.cits-wpel-account-menu-injected .cits-wpel-avatar-menu__trigger {
    padding: 4px 8px;
    /* E71.0.3 — Defensive font-size so themes that apply
       font-size:0 / text-indent tricks on menu items (Blocksy /
       Astra / Kadence sometimes do this for icon-only nav items)
       can't make our display name disappear. */
    font-size: 14px;
    line-height: 1.2;
    color: inherit;
    gap: 8px;
}
.cits-wpel-account-menu-injected .cits-wpel-avatar-menu__name {
    /* Inherit from the trigger above (which has explicit font-size +
       color), NOT the menu item — defends against theme rules that
       inline-hide non-anchor text via font-size:0 or visibility. */
    font-size: 14px;
    line-height: 1.2;
    color: inherit;
    display: inline-block;
    visibility: visible;
    text-indent: 0;
    overflow: visible;
    max-width: none;
    white-space: nowrap;
}
.cits-wpel-account-menu-injected .cits-wpel-avatar-menu__chevron {
    display: inline-block;
    visibility: visible;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ---------- E70.0.4 hot-fix: theme accent auto-detect ----------
 *
 * Our CTA buttons used `var(--cits-wpel-primary-color, #2271b1)`. That
 * default fallback (WP admin blue) shipped to every site that hadn't
 * explicitly set our plugin's primary color in the Customizer — even
 * when the theme had a perfectly good brand color sitting in its OWN
 * CSS variable. The chained fallback below walks the common theme
 * accent variables in order of popularity:
 *
 *   1. --cits-wpel-primary-color   (operator-set in our Customizer)
 *   2. --theme-palette-color-1     (Blocksy)
 *   3. --ast-global-color-0        (Astra)
 *   4. --global-palette1           (Kadence)
 *   5. --wp--preset--color--primary (WordPress core / FSE block themes)
 *   6. #2271b1                      (hardcoded WP admin blue — last resort)
 *
 * On Blocksy sites where the operator hasn't touched our Customizer,
 * the chain falls through to Blocksy's accent → CTAs automatically
 * pick up the site palette. Same for Astra/Kadence/FSE.
 *
 * Defined as a CSS variable so the chain is computed ONCE per page
 * and reused on hover/focus states. */
.cits-wpel-avatar-menu-container {
    --cits-wpel-accent: var(
        --cits-wpel-primary-color,
        var(
            --theme-palette-color-1,
            var(
                --ast-global-color-0,
                var(
                    --global-palette1,
                    var(--wp--preset--color--primary, #2271b1)
                )
            )
        )
    );
}

/* Override the literal #2271b1 fallbacks shipped in the earlier rules
   with the resolved chain. Specificity-wise these rules sit AFTER the
   E70 originals so they cascade-win without !important. */
.cits-wpel-account-cta--primary {
    background: var(--cits-wpel-accent);
    border-color: var(--cits-wpel-accent);
}
.cits-wpel-account-cta--primary:hover {
    background: color-mix(in srgb, var(--cits-wpel-accent) 88%, black);
    border-color: color-mix(in srgb, var(--cits-wpel-accent) 88%, black);
}
.cits-wpel-account-cta--secondary {
    color: var(--cits-wpel-accent);
}
.cits-wpel-account-cta:focus,
.cits-wpel-account-cta:focus-visible {
    box-shadow: 0 0 0 2px var(--cits-wpel-accent),
                0 0 0 4px color-mix(in srgb, var(--cits-wpel-accent) 22%, transparent);
}

/* ---------- E71.2: Customizer-driven trigger icon styles ----------
 *
 * The Account Menu Customizer section lets operators pick one of three
 * trigger styles:
 *   - avatar   (default) — Gravatar / uploaded WP avatar via <img>
 *   - initials             — text-circle with first letter of display name
 *   - user_svg             — generic stroke-outline person icon
 *
 * AccountMenuRenderer dispatches to renderTriggerIcon() which emits the
 * right markup. CSS below sizes them consistently so swapping styles
 * doesn't shift the header layout. */

/* Initials text circle. Uses the resolved --cits-wpel-accent so it
   inherits the operator's color choice automatically. */
.cits-wpel-avatar-menu__avatar--initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cits-wpel-accent);
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
    flex-shrink: 0;
}

/* Generic user-icon container — same 32×32 footprint as the <img>
   variant so trigger width stays consistent. */
.cits-wpel-avatar-menu__avatar--svg {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    /* E71.0.2 — Icon stroke uses --cits-wpel-accent so the existing
       Customizer "Button accent color" picker controls it too. Subtle
       gray background stays so this variant remains visually distinct
       from the "Initials" variant (brand-bg + white text). */
    color: var(--cits-wpel-accent);
    flex-shrink: 0;
}
.cits-wpel-avatar-menu__avatar--svg svg {
    display: block;
}

/* Compact-size trigger reduces the avatar slot too — applies to all
   three styles uniformly. */
.cits-wpel-account-menu--size-compact .cits-wpel-avatar-menu__avatar,
.cits-wpel-account-menu--size-compact .cits-wpel-avatar-menu__avatar--initials,
.cits-wpel-account-menu--size-compact .cits-wpel-avatar-menu__avatar--svg {
    width: 28px;
    height: 28px;
}
.cits-wpel-account-menu--size-compact .cits-wpel-avatar-menu__avatar--initials {
    font-size: 12px;
}

/* ---------- E71.0.1: hide header avatar on mobile ----------
 *
 * Reasoning: on phones the avatar competes with the theme's burger
 * menu tap zone. Even when visually separated, the open dropdown
 * panel often overlaps the burger button, trapping it underneath.
 * Industry pattern (Stripe / Linear / Notion / GitHub / Coursera-mobile)
 * is to hide the avatar on mobile and surface account access via the
 * burger drawer.
 *
 * dashboard.js's initMobileDrawerInjection() takes care of inserting
 * a "Sign in" / "My Account" link INTO the theme's mobile drawer so
 * users on phones still have a reachable entry point.
 *
 * Breakpoint: 782px matches WP core's admin bar mobile threshold +
 * matches most theme nav-collapse points. */
@media (max-width: 782px) {
    .cits-wpel-avatar-menu-container.cits-wpel-account-menu--fixed,
    .cits-wpel-account-menu-injected {
        display: none !important;
    }
}

/* ---------- E71.0.1: drawer-injected menu item ----------
 * Minimal styling — let theme menu-item rules cascade. We just ensure
 * the link is a block-level anchor (matches most theme drawer menu
 * patterns) and inherits color from the surrounding drawer chrome. */
.cits-wpel-account-menu-drawer-injected {
    list-style: none;
}
.cits-wpel-account-menu-drawer-injected > a {
    color: inherit;
}

/* ---------- v1.8.34: in-shell order-detail sub-view ----------
 * `/my-account/?section=orders&order=<uuid>` renders a full enterprise
 * order-detail chrome inside the shell. Composed from the same design
 * tokens as the rest of the account UI so the tone matches. */
.cwl-acct__order-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cwl-acct__order-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.cwl-acct__order-head-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.cwl-acct__order-back {
    font-size: 13px;
    color: #4b5563;
    text-decoration: none;
}
.cwl-acct__order-back:hover {
    color: #1f2937;
    text-decoration: underline;
}
.cwl-acct__order-head-main .cwl-acct__section-title {
    margin: 0;
}
.cwl-acct__order-head-meta {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
}
.cwl-acct__order-uuid {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* State-aware status card — one card, mode-driven colours. */
.cwl-acct__order-status {
    padding: 14px 16px;
    border-radius: 8px;
    border-left: 4px solid #9ca3af;
    background: #f9fafb;
}
.cwl-acct__order-status--paid       { border-left-color: #16a34a; background: #f0fdf4; }
.cwl-acct__order-status--refunded   { border-left-color: #16a34a; background: #f0fdf4; }
.cwl-acct__order-status--verifying  { border-left-color: #d97706; background: #fffbeb; }
.cwl-acct__order-status--rejected   { border-left-color: #dc2626; background: #fef2f2; }
.cwl-acct__order-status--pending    { border-left-color: #d97706; background: #fffbeb; }
.cwl-acct__order-status--cancelled  { border-left-color: #6b7280; background: #f9fafb; }
.cwl-acct__order-status--failed     { border-left-color: #dc2626; background: #fef2f2; }
.cwl-acct__order-status-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #111827;
    margin-bottom: 6px;
}
.cwl-acct__order-status-body {
    margin: 0;
    font-size: 14px;
    color: #1f2937;
    line-height: 1.55;
}

/* Standard card wrapper reused across line-items / payment / timeline
 * / support. Consistent chrome so the eye tracks section-to-section. */
.cwl-acct__order-card {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.cwl-acct__order-card-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

/* Line items table — muted header, striped body. */
.cwl-acct__order-items {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cwl-acct__order-items th {
    text-align: left;
    padding: 8px 10px;
    background: #f9fafb;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}
.cwl-acct__order-items td {
    padding: 10px;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
}
.cwl-acct__order-items tfoot td {
    border-bottom: none;
    border-top: 1px solid #e5e7eb;
    font-size: 13px;
}
.cwl-acct__order-item-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: #f3f4f6;
    color: #6b7280;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 8px;
}
.cwl-acct__order-item-title {
    font-weight: 600;
}

/* Payment details — dl grid so wide screens get 2 columns. */
.cwl-acct__order-defs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin: 0;
}
.cwl-acct__order-def {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cwl-acct__order-def dt {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin: 0;
}
.cwl-acct__order-def dd {
    margin: 0;
    font-size: 13px;
    color: #1f2937;
}
.cwl-acct__order-def dd code {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .cwl-acct__order-defs {
        grid-template-columns: 1fr;
    }
}

/* Timeline — vertical list, muted timestamps, notes on the same line. */
.cwl-acct__order-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cwl-acct__order-timeline-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed #f3f4f6;
    font-size: 13px;
}
.cwl-acct__order-timeline-item:last-child { border-bottom: none; }
.cwl-acct__order-timeline-when {
    color: #6b7280;
    font-size: 12px;
}
.cwl-acct__order-timeline-label {
    color: #111827;
    font-weight: 600;
}
.cwl-acct__order-timeline-note {
    color: #6b7280;
    font-weight: 400;
    margin-left: 6px;
}

@media (max-width: 640px) {
    .cwl-acct__order-timeline-item {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* Support card — subtle blue tint to say "we're here to help". */
.cwl-acct__order-support {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.cwl-acct__order-support p {
    margin: 0;
    font-size: 13px;
    color: #1f2937;
    line-height: 1.55;
}
.cwl-acct__order-support a {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Print — hide shell chrome, print the detail cleanly. */
@media print {
    body::before, body::after,
    .cwl-acct__hero,
    .cwl-acct__sidebar,
    .cwl-acct__order-head-top,
    .cwl-acct__order-support {
        display: none !important;
    }
    .cwl-acct__body { display: block !important; }
    .cwl-acct__main { padding: 0 !important; }
    .cwl-acct__order-card, .cwl-acct__order-status {
        border: 1px solid #ccc !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
}