/* Johanna Learning – personal profile and H5P progress. */
.johanna-profil,
.johanna-progress {
    --johanna-petrol: #236d6c;
    --johanna-muted: #52635d;
}

.johanna-profil > h2 {
    margin-block-end: 1.5rem;
}

.johanna-profile-details,
.johanna-profile-placeholder {
    margin-block: 1.75rem;
}

.johanna-profile-details dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin: 0;
}

.johanna-profile-details dl > div {
    background: #f3f8f4;
    border-radius: 10px;
    padding: 1rem;
    min-width: 0;
}

.johanna-profile-details dt {
    font-size: .85em;
    color: var(--johanna-muted);
}

.johanna-profile-details dd {
    margin: .25rem 0 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.johanna-progress {
    margin-block: 2rem;
}

.johanna-progress-summary {
    color: var(--johanna-muted);
}

.johanna-progress-card {
    border: 1px solid #d8e5df;
    border-radius: 12px;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    margin-block: 1rem;
}

.johanna-progress-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .6rem 1rem;
}

.johanna-progress-card-head h4 {
    margin: 0;
    flex: 1 1 240px;
}

.johanna-progress-card-head h4 a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.johanna-progress-status {
    display: inline-block;
    border-radius: 999px;
    padding: .3em .75em;
    font-size: .82em;
    font-weight: 600;
    white-space: nowrap;
}

.johanna-progress-status--passed {
    color: #145336;
    background: #e2f3e8;
}

.johanna-progress-status--not-passed {
    color: #7b4413;
    background: #fff0d7;
}

.johanna-progress-status--not-started {
    color: #4c5b55;
    background: #edf1ef;
}

.johanna-progress-score {
    margin: 1rem 0 .55rem;
}

.johanna-progress-score strong {
    font-size: 1.4em;
    color: var(--johanna-petrol);
}

.johanna-progress-bar {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: #e8efeb;
}

.johanna-progress-bar > span {
    display: block;
    height: 100%;
    background: var(--johanna-petrol);
}

.johanna-progress-threshold {
    font-size: .85em;
    color: var(--johanna-muted);
    margin-block: .65rem;
}

.johanna-progress-action {
    margin-block-end: 0;
}

.johanna-progress-action a {
    color: var(--johanna-petrol);
    font-weight: 600;
}