/* BALIA Trade Tools - Learning Centre styles.
 * Builds on the shared balia-trade-tools.css tokens:
 * navy #0A2540, warm cream #F7F4EE, gold #85681E on light, ink, muted, line.
 * Mobile-first; generous readable typography for lesson text. */

/* ---------- module grid ---------- */
.balia-tt-learn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 0 1.25rem;
}
@media (min-width: 640px) {
    .balia-tt-learn-grid { grid-template-columns: 1fr 1fr; }
}

.balia-tt-learn-card {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--balia-line);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(10, 37, 64, 0.06);
    padding: 1.25rem 1.35rem;
    cursor: pointer;
    font: inherit;
    color: var(--balia-ink);
}
.balia-tt-learn-card:hover {
    border-color: var(--balia-gold);
    box-shadow: 0 4px 18px rgba(10, 37, 64, 0.10);
}
.balia-tt-learn-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}
.balia-tt-learn-card-title {
    display: block;
    color: var(--balia-navy);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
}
.balia-tt-learn-card-tag {
    display: block;
    color: var(--balia-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0.75rem;
}
.balia-tt-learn-card-meta {
    display: block;
    color: var(--balia-muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.balia-tt-learn-card .balia-tt-progress { margin-bottom: 0; }

.balia-tt-learn-badge {
    flex: 0 0 auto;
    background: var(--balia-cream);
    border: 1px solid var(--balia-gold);
    color: var(--balia-gold);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    white-space: nowrap;
}

/* ---------- module view: lesson rows ---------- */
.balia-tt-learn-rows { display: grid; gap: 0.6rem; }

.balia-tt-learn-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--balia-line);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    font: inherit;
    color: var(--balia-ink);
}
.balia-tt-learn-row:hover { border-color: var(--balia-gold); }

.balia-tt-learn-num {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--balia-cream);
    border: 1px solid var(--balia-line);
    color: var(--balia-navy);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.balia-tt-learn-num.is-done {
    background: var(--balia-navy);
    border-color: var(--balia-navy);
    color: #fff;
}
.balia-tt-learn-row-title {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--balia-navy);
    line-height: 1.4;
}
.balia-tt-learn-start {
    flex: 0 0 auto;
    color: var(--balia-gold);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.balia-tt-learn-banner {
    background: var(--balia-cream);
    border: 1px solid var(--balia-gold);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem;
    color: var(--balia-navy);
}
.balia-tt-learn-banner p { margin: 0.4rem 0 0; color: var(--balia-ink); }

/* ---------- lesson view: readable typography ---------- */
.balia-tt-learn-lesson .balia-tt-learn-body {
    max-width: 68ch;
    margin-bottom: 1.5rem;
}
.balia-tt-learn-body p {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--balia-ink);
    margin: 0 0 1.1rem;
}
.balia-tt-learn-hint {
    font-size: 0.92rem;
    color: var(--balia-muted);
    margin: 0 0 1rem;
}

/* ---------- quiz ---------- */
.balia-tt-learn-opts { display: grid; gap: 0.6rem; margin: 0 0 1.25rem; }

.balia-tt-learn-opt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 2px solid var(--balia-line);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--balia-ink);
}
.balia-tt-learn-opt:not(:disabled):hover { border-color: var(--balia-navy); }
.balia-tt-learn-opt:disabled { cursor: default; }

.balia-tt-learn-opt-letter {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: var(--balia-cream);
    border: 1px solid var(--balia-line);
    color: var(--balia-navy);
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}
.balia-tt-learn-opt.is-correct {
    border-color: var(--balia-good);
    background: #eef6f1;
}
.balia-tt-learn-opt.is-correct .balia-tt-learn-opt-letter {
    background: var(--balia-good);
    border-color: var(--balia-good);
    color: #fff;
}
.balia-tt-learn-opt.is-wrong {
    border-color: var(--balia-gap);
    background: #faf0ee;
}
.balia-tt-learn-opt.is-wrong .balia-tt-learn-opt-letter {
    background: var(--balia-gap);
    border-color: var(--balia-gap);
    color: #fff;
}
.balia-tt-learn-opt.is-dim { opacity: 0.55; }

.balia-tt-learn-feedback {
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem;
    border: 1px solid var(--balia-line);
    background: var(--balia-cream);
}
.balia-tt-learn-feedback.is-good { border-color: var(--balia-good); }
.balia-tt-learn-feedback.is-bad { border-color: var(--balia-gap); }
.balia-tt-learn-feedback p { margin: 0 0 0.5rem; line-height: 1.65; }
.balia-tt-learn-feedback p:last-child { margin-bottom: 0; }

/* ---------- misc ---------- */
.balia-tt-learn-related .balia-tt-btn { margin: 0 0.4rem 0.6rem 0; }

@media (max-width: 480px) {
    .balia-tt-learn-body p { font-size: 1.02rem; line-height: 1.75; }
    .balia-tt-learn-row { padding: 0.8rem 0.85rem; gap: 0.7rem; }
    .balia-tt-learn-start { font-size: 0.8rem; }
}