/* Learn v3: topic hub, primers, quizzes. Same palette as styles.css / v2.css */
.lt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 56px); align-items: start; margin-bottom: 3rem; }
.lt-primer .lt-sec { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--hair); scroll-margin-top: 100px; }
.lt-primer .lt-sec:last-child { border-bottom: 0; }
.lt-primer h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: .7rem; }
.lt-primer ul { margin: 0; padding-left: 1.1rem; }
.lt-primer li { margin-bottom: .45rem; }
.lt-primer li::marker { color: var(--brass); }
.lt-side { position: sticky; top: 96px; display: grid; gap: 14px; }
.lt-box { background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 1rem 1.1rem; }
.lt-box h3 { font: 600 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin-bottom: .7rem; }
.lt-toc { margin: 0; padding-left: 1.1rem; font-size: .9rem; display: grid; gap: .3rem; }
.lt-toc a { color: var(--text-dim); } .lt-toc a:hover { color: var(--brass); }
.lt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-chip { font-size: .8rem; border: 1px solid var(--hair); border-radius: 100px; padding: .25rem .65rem; color: var(--text-dim); transition: all .2s var(--ease); }
.lt-chip:hover { border-color: var(--brass); color: var(--brass); }
.lt-list { display: grid; gap: 6px; }
.lt-list a { display: flex; gap: .6rem; align-items: center; font-size: .86rem; color: var(--text-dim); padding: .35rem 0; border-bottom: 1px solid var(--hair-soft); }
.lt-list a:last-child { border-bottom: 0; }
.lt-list a b { color: var(--brass); font-family: var(--serif); font-weight: 500; white-space: nowrap; }
.lt-list a:hover span { color: var(--text); }
.lt-ep img { width: 72px; height: 40px; object-fit: cover; border-radius: 4px; flex: none; }
.lt-subgrid { grid-template-columns: repeat(2, 1fr); }
.lq-wrap { scroll-margin-top: 90px; background: linear-gradient(180deg, var(--surface), var(--bg-2, #0d1d2c)); border: 1px solid rgba(196,154,94,.35); border-radius: 14px; padding: clamp(20px, 4vw, 40px); margin-bottom: 2rem; }
.lq-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .3rem; }
.lq-head { margin-bottom: 1.4rem; }
.tq-q { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 1.1rem; outline: none; }
/* hub */
.lt-progress { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 2.2rem; }
.lt-progress .eyebrow { margin-bottom: .3rem; }
.lt-big { margin: 0; font-size: 1.02rem; color: var(--text-dim); } .lt-big b { color: var(--brass); font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.lt-h { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 1.1rem; }
.lt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 2.6rem; }
.lt-grid.sm { grid-template-columns: repeat(4, 1fr); }
.lt-card { position: relative; display: flex; flex-direction: column; gap: .45rem; background: linear-gradient(180deg, var(--surface), #132538); border: 1px solid var(--hair); border-radius: 12px; padding: 1.2rem 1.2rem 1rem; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); overflow: hidden; }
.lt-card:hover { transform: translateY(-3px); border-color: rgba(196,154,94,.55); box-shadow: 0 24px 40px -24px rgba(0,0,0,.8); }
.lt-num { font-family: var(--serif); font-size: 1.6rem; color: var(--brass); line-height: 1; }
.lt-num svg { width: 26px; height: 26px; }
.lt-card h3 { font-size: 1.22rem; }
.lt-card p { font-size: .88rem; color: var(--text-dim); margin: 0; }
.lt-meta { margin-top: auto; padding-top: .6rem; display: flex; justify-content: space-between; font-size: .76rem; color: var(--text-mute); }
.lt-status { color: var(--text-dim); }
.lt-card.is-started .lt-status { color: var(--brass); }
.lt-card.is-mastered { border-color: rgba(196,154,94,.7); }
.lt-card.is-mastered .lt-status { color: var(--brass); font-weight: 600; }
.lt-bar { display: block; height: 4px; border-radius: 4px; background: var(--hair); overflow: hidden; }
.lt-bar i { display: block; height: 100%; width: 0; background: var(--brass); transition: width .6s var(--ease); }
.lt-card.sm h3 { font-size: 1.08rem; }
@media (max-width: 1060px) { .lt-grid, .lt-grid.sm { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 920px) { .lt-layout { grid-template-columns: 1fr; } .lt-side { position: static; } }
@media (max-width: 560px) { .lt-grid, .lt-grid.sm, .lt-subgrid { grid-template-columns: 1fr; } }
@media print { .lq-wrap, .lt-side { display: none !important; } }