/* Learner accounts: the /learn/ pages (templates/learners/) and the account bar on Free
   Lessons pages (templates/resources/_account.html). Builds on resources.css, whose
   colour variables (--rs-*) follow the light and dark themes. */

.ln-main {
    max-width: 44rem;
}

.ln-main > * + * {
    margin-top: 16px;
}

.ln-main h2 {
    margin-top: 40px;
    font-size: 1.375rem;
}

/* Forms */

.ln-form {
    display: grid;
    gap: 20px;
    margin-top: 24px;
}

.ln-field {
    display: grid;
    gap: 6px;
}

.ln-field label {
    font-weight: 600;
}

.ln-field input[type="text"],
.ln-field input[type="email"],
.ln-field input[type="password"] {
    width: 100%;
    max-width: 24rem;
    min-height: 48px;
    padding: 10px 12px;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font-size: 1rem;
}

.ln-field--check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ln-field--check input {
    width: 22px;
    height: 22px;
}

.ln-field--check .ln-help {
    flex-basis: 100%;
}

.ln-help {
    color: var(--muted);
    font-size: 0.875rem;
}

.ln-field--error input {
    border-color: var(--rs-bad);
}

.ln-field-error {
    color: var(--rs-bad);
    font-weight: 600;
}

.ln-error-summary,
.ln-notice {
    padding: 14px 16px;
    border-radius: 8px;
}

.ln-error-summary {
    border-left: 4px solid var(--rs-bad);
    background: var(--rs-bad-bg);
}

.ln-notice {
    border-left: 4px solid var(--rs-ok);
    background: var(--rs-ok-bg);
}

.ln-form .rs-button {
    justify-self: start;
}

.ln-aside {
    color: var(--muted);
    font-size: 0.9375rem;
}

.ln-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.ln-sign-out {
    margin-top: 48px;
}

.ln-danger {
    --rs-button: #b91c1c;
    --rs-button-hover: #991b1b;
}

/* Progress lists */

.ln-topic {
    margin-top: 24px;
}

.ln-topic h3 {
    font-size: 1.125rem;
}

.ln-topic-count {
    color: var(--muted);
    font-size: 0.875rem;
}

.ln-lessons {
    margin-top: 8px;
    border-top: 1px solid var(--line);
}

.ln-lessons li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.ln-state {
    color: var(--muted);
    font-size: 0.875rem;
}

.ln-lessons li.is-done .ln-state {
    color: var(--rs-ok);
    font-weight: 600;
}

.ln-device {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.ln-device .rs-button {
    margin-top: 12px;
}

/* My learners */

.ln-table-wrap {
    overflow-x: auto;
}

.ln-table {
    width: 100%;
    border-collapse: collapse;
}

.ln-table caption {
    text-align: start;
    font-weight: 600;
    padding-bottom: 8px;
}

.ln-table th,
.ln-table td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--line);
    text-align: start;
}

/* The account bar on Free Lessons pages */

.rs-account {
    max-width: 44rem;
    margin-bottom: 24px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.9375rem;
}

.rs-account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: 6px;
}

.rs-account-actions form {
    display: inline;
}

.rs-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Every quiz try for a lesson (_progress.html). */
.ln-attempts { flex-basis: 100%; font-size: 0.9rem; }
.ln-attempts summary { cursor: pointer; }
.ln-attempts ol { margin: 0.25rem 0 0; padding-left: 1.25rem; }

.ln-research { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }