/* Codon One — /learn web app (Phase 1). Builds on styles.css variables. */

.learn-hero{background:linear-gradient(180deg,var(--mint-2),#fff);padding:54px 0 30px;border-bottom:1px solid var(--line)}
.learn-hero.compact{padding:30px 0 20px}
.learn-hero h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.15em 0 .3em;line-height:1.12}
.learn-hero .lede{max-width:660px}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.crumb a{color:var(--green-deep);text-decoration:none}
.crumb a:hover{text-decoration:underline}

.container.narrow{max-width:760px}

/* Section grid on the hub */
.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.sec-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.sec-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(16,35,26,.22)}
.sec-card img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff;padding:4%;box-sizing:border-box}
.sec-card-body{padding:14px 16px 18px}
.sec-num{font-size:.72rem;font-weight:700;color:var(--green-deep);text-transform:uppercase;letter-spacing:.04em}
.sec-card h3{margin:.3em 0 .45em;font-size:1.14rem;line-height:1.25}
.sec-count{font-size:.85rem;color:var(--muted)}

/* Lesson reading column */
.lessons .lesson{margin:0 0 44px}
.lessons .lesson img{display:block;width:100%;max-width:560px;aspect-ratio:3/2;object-fit:contain;margin:0 auto 18px;border-radius:14px;background:#fff;padding:3.5%;box-sizing:border-box}
.lessons .lesson:first-child img{border:1px solid var(--line);padding:0}
.lessons .lesson h2{font-size:1.4rem;margin:.1em 0 .55em;line-height:1.25}
.lessons .lesson p{margin:0 0 .95em;line-height:1.72}
.gl-link{color:var(--green-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.gl-link:hover{color:var(--green)}

/* Prev / up / next */
.sec-nav{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:34px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.sec-nav a{color:var(--green-deep);font-weight:600;text-decoration:none;font-size:.95rem}
.sec-nav a:hover{text-decoration:underline}
.sec-nav .up{color:var(--muted);font-weight:500}
.sec-nav .next{margin-left:auto;text-align:right}

/* Call-to-action band */
.learn-cta{background:var(--green-ink);color:#fff;text-align:center;padding:50px 0;margin-top:24px}
.learn-cta h2{color:#fff;font-size:1.6rem;margin:0 0 .45em}
.learn-cta p{max-width:600px;margin:0 auto 24px;color:rgba(255,255,255,.85);line-height:1.6}
.learn-cta .appstore{display:inline-flex}

/* Section quiz */
.quiz-wrap{border-top:1px solid var(--line);background:var(--mint-2)}
.quiz-intro{color:var(--muted);margin:-.2em 0 22px}
.quiz-progress{font-size:.78rem;font-weight:700;color:var(--green-deep);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
.quiz-img{display:block;width:100%;max-width:420px;aspect-ratio:3/2;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px;margin:0 0 16px;padding:3.5%;box-sizing:border-box}
.quiz-q{font-size:1.2rem;font-weight:600;line-height:1.4;margin:0 0 18px}
.quiz-opts{display:grid;gap:10px}
.quiz-opt{text-align:left;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:1rem;color:var(--ink);cursor:pointer;transition:border-color .12s ease,background .12s ease}
.quiz-opt:hover:enabled{border-color:var(--green)}
.quiz-opt:disabled{cursor:default}
.quiz-opt.correct{border-color:var(--green);background:var(--mint);color:var(--green-ink);font-weight:600}
.quiz-opt.wrong{border-color:#e2574c;background:#fdeceb;color:#a3271d}
.quiz-fb{min-height:1.3em;margin:15px 0 0;font-weight:600}
.quiz-fb.ok{color:var(--green-deep)}
.quiz-fb.no{color:#c23b30}
.quiz-next,.quiz-again{margin-top:16px}
.quiz-score{text-align:center;padding:14px 0}
.quiz-score-title{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.quiz-score-num{font-size:2.7rem;font-weight:800;color:var(--green-deep);margin:.08em 0 .12em}
.quiz-score-sub{color:var(--muted);max-width:440px;margin:0 auto 20px}

/* Quiz hub banner + topic picker */
.quiz-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;padding:22px 24px;background:var(--green-ink);color:#fff;border-radius:16px;text-decoration:none;flex-wrap:wrap}
.quiz-banner h3{color:#fff;margin:0 0 .18em;font-size:1.25rem}
.quiz-banner p{margin:0;color:rgba(255,255,255,.85)}
.quiz-pick-hint{font-weight:600;margin:0 0 14px}
.quiz-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.quiz-topic{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:20px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font:inherit;transition:border-color .12s ease,transform .12s ease}
.quiz-topic:hover{border-color:var(--green);transform:translateY(-2px)}
.quiz-topic strong{font-size:1.15rem;color:var(--ink)}
.quiz-topic span{color:var(--muted);font-size:.9rem}
.quiz-topic-img{width:72px;height:72px;object-fit:contain;margin-bottom:8px}

/* Flashcards */
.flashcards{max-width:480px;margin:0 auto}
.fc-progress{text-align:center;font-size:.8rem;font-weight:700;color:var(--green-deep);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.fc-card{perspective:1400px;cursor:pointer;margin:0 auto 18px}
.fc-card-inner{position:relative;transform-style:preserve-3d;transition:transform .5s ease;min-height:420px}
.fc-card.flipped .fc-card-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 12px 30px -16px rgba(16,35,26,.2);padding:24px;display:flex;flex-direction:column;overflow:auto}
.fc-front{align-items:center;justify-content:center;text-align:center}
.fc-back{transform:rotateY(180deg);text-align:left}
.fc-img{width:100%;max-width:300px;aspect-ratio:3/2;object-fit:contain;background:#fff;padding:3%;box-sizing:border-box}
.fc-name{font-size:1.7rem;font-weight:800;margin-top:12px;color:var(--ink)}
.fc-hint{color:var(--muted);font-size:.85rem;margin-top:14px}
.fc-back-title{font-size:1.15rem;font-weight:800;color:var(--green-deep);margin-bottom:8px}
.fc-subtitle{font-weight:600;color:var(--green-ink);line-height:1.35}
.fc-detail{margin:.7em 0 0;line-height:1.6;font-size:.98rem}
.fc-controls{display:flex;justify-content:center;gap:12px}
.fc-btn{padding:10px 22px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-weight:600;color:var(--green-deep);cursor:pointer;transition:border-color .12s ease}
.fc-btn:hover{border-color:var(--green)}
.fc-shuffle-btn{display:block;margin:16px auto 0;background:none;border:0;color:var(--muted);font:inherit;font-weight:600;cursor:pointer}
.fc-shuffle-btn:hover{color:var(--green-deep);text-decoration:underline}

/* Glossary */
.gl-search{width:100%;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:1rem;margin-bottom:22px;box-sizing:border-box}
.gl-search:focus{outline:none;border-color:var(--green)}
.gl-empty{color:var(--muted)}
.gl-group{margin-bottom:26px}
.gl-group h2{font-size:1.1rem;color:var(--green-deep);border-bottom:1px solid var(--line);padding-bottom:8px;margin:0 0 6px}
.gl-list{list-style:none;margin:0;padding:0}
.gl-item a{display:flex;flex-direction:column;gap:2px;padding:12px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.gl-item a:hover{background:var(--mint-2)}
.gl-term{font-weight:600;color:var(--ink)}
.gl-sub{font-size:.9rem;color:var(--muted)}
.gl-detail-img{display:block;width:100%;max-width:480px;aspect-ratio:3/2;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:14px;padding:3%;box-sizing:border-box;margin:0 0 18px}
.gl-detail-sub{font-weight:600;color:var(--green-ink);line-height:1.4;margin:0 0 4px}
.gl-detail p{line-height:1.7;margin:0 0 .9em}
.gl-detail-sub + p{margin-top:14px}
.gl-back{margin-top:24px}
.gl-back a{color:var(--green-deep);font-weight:600;text-decoration:none}
.gl-back a:hover{text-decoration:underline}
.quiz-back-link{display:block;margin:14px auto 0;background:none;border:0;color:var(--green-deep);font:inherit;font-weight:600;cursor:pointer}
.quiz-back-link:hover{text-decoration:underline}