/* F1SYH_LEARNER_SPACE_V1 */

.learner-space-page,
.course-personal-tools {
    --learner-accent: var(--accent, var(--primary, #176b87));
    --learner-border:
        color-mix(in srgb, currentColor 18%, transparent);
    --learner-muted:
        color-mix(in srgb, currentColor 66%, transparent);
    --learner-soft:
        color-mix(in srgb, currentColor 7%, transparent);
    --learner-ok: #187348;
    --learner-danger: #b33a3a;
}

.learner-space-page {
    display: grid;
    gap: 1rem;
    padding-block: 1.2rem 2.5rem;
}

.learner-space-hero,
.learner-space-app,
.learner-section,
.course-personal-tools {
    border: 1px solid var(--learner-border);
    border-radius: 1rem;
    background: var(--surface, Canvas);
    box-shadow: 0 0.6rem 1.7rem rgb(0 0 0 / 0.08);
}

.learner-space-hero {
    padding: clamp(1rem, 3vw, 1.6rem);
}

.learner-space-eyebrow,
.course-personal-tools-eyebrow {
    margin: 0 0 0.3rem;
    color: var(--learner-accent);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.learner-space-hero h1,
.learner-section h2,
.course-personal-tools h2 {
    margin-top: 0;
}

.learner-space-privacy {
    margin-top: 0.8rem;
    border-left: 0.35rem solid var(--learner-ok);
    padding: 0.65rem 0.8rem;
    background: var(--learner-soft);
}

.learner-space-app {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.learner-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.7rem;
}

.learner-summary-grid article {
    border: 1px solid var(--learner-border);
    border-radius: 0.8rem;
    padding: 0.8rem;
    background: var(--learner-soft);
}

.learner-summary-grid span {
    display: block;
    color: var(--learner-muted);
    font-size: 0.82rem;
}

.learner-summary-grid strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.25rem;
}

.learner-section {
    padding: 1rem;
    box-shadow: none;
}

.learner-section-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: center;
}

.learner-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.learner-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    border: 1px solid var(--learner-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.learner-list h3 {
    margin: 0;
    font-size: 1rem;
}

.learner-list p {
    margin: 0.25rem 0 0;
    color: var(--learner-muted);
    font-size: 0.86rem;
}

.learner-list-actions,
.learner-space-actions,
.course-personal-tools-actions,
.learner-space-back {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.learner-button,
.learner-list a,
.learner-space-back a,
.course-personal-tools button,
.course-personal-tools a {
    display: inline-flex;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--learner-border);
    border-radius: 0.7rem;
    padding: 0.5rem 0.75rem;
    color: inherit;
    background: var(--surface, Canvas);
    font: inherit;
    font-weight: 720;
    text-decoration: none;
    cursor: pointer;
}

.learner-button.primary,
.course-personal-tools button.primary {
    border-color: var(--learner-accent);
    color: #fff;
    background: var(--learner-accent);
}

.learner-button.danger {
    border-color: color-mix(
        in srgb,
        var(--learner-danger) 55%,
        transparent
    );
    color: var(--learner-danger);
}

.learner-empty {
    border: 1px dashed var(--learner-border);
    border-radius: 0.75rem;
    padding: 1rem;
    color: var(--learner-muted);
    text-align: center;
}

.learner-import-input {
    display: none;
}

.course-personal-tools {
    margin-top: 1.2rem;
    padding: 1rem;
}

.course-personal-tools-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: start;
}

.course-personal-tools textarea {
    width: 100%;
    min-height: 10rem;
    resize: vertical;
    border: 1px solid var(--learner-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
    color: inherit;
    background: var(--surface, Canvas);
    font: inherit;
}

.course-personal-tools-status {
    min-height: 1.3rem;
    color: var(--learner-muted);
    font-size: 0.86rem;
}

.course-personal-tools-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block: 0.7rem;
}

.course-personal-tools-stats span {
    border: 1px solid var(--learner-border);
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    background: var(--learner-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.course-learner-space-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

.course-learner-space-card h2 {
    margin-top: 0;
}

@media (max-width: 700px) {
    .learner-list li,
    .course-learner-space-card {
        grid-template-columns: 1fr;
    }
}