/* Grammar lesson list (the Grammar page of the Learning Path): navy, gold, cream, in the style of the stone pages. */
:root{box-sizing:border-box;--ink:#1e3a5f;--card:#fff;--line:#e3e9f1;--gold-l:#e6bd47;--gold-d:#a87a0c;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif}
*,*::before,*::after{box-sizing:inherit}
html{height:100%}
body{min-height:100%;margin:0;background:linear-gradient(135deg,#fdf6e4 0%,#f1f6fb 45%,#dcebf8 100%) fixed;font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);touch-action:manipulation;overflow-x:hidden}
#draft{display:none}
.hub-header{text-align:center;padding:22px 12px 10px}
.hub-header h1{font:700 clamp(2.2rem,6vw,3.4rem)/1.08 var(--serif);margin:0;letter-spacing:-.02em}
.subtitle{margin:6px 0 0;font-size:1.05rem;color:#3b5573}
.subtitle a{color:var(--ink);font-weight:700}
main{max-width:1040px;margin:0 auto;padding:10px 16px 100px}
.overview{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 18px;margin:8px auto 22px;max-width:620px;box-shadow:0 8px 22px rgba(30,58,95,.08)}
.overview h2{margin:0 0 6px;text-align:center;font:700 1.2rem var(--serif)}
.progress-summary{text-align:center;font-size:1.05rem;font-weight:600}
main>h2{font:700 1.5rem var(--serif);margin:26px 0 10px;text-align:left}
.lessons{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.lessons{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.lessons{grid-template-columns:repeat(3,1fr)}}
.lesson-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 6px 18px rgba(30,58,95,.09);display:flex;flex-direction:column;gap:8px}
.card-header{display:flex;justify-content:space-between;align-items:center}
.badge{font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#4a627e}
.stars{font-size:1.1rem;min-height:1.2em}
.lesson-card h3{margin:0;font:700 1.12rem/1.25 var(--serif);min-height:2.5em}
.status{margin:0;font-size:.9rem;color:#4a627e}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 22px;border-radius:999px;font:700 1rem inherit;text-decoration:none;color:#fff;background:linear-gradient(180deg,var(--gold-l),var(--gold-d));box-shadow:0 4px 10px rgba(168,122,12,.3);border:2px solid transparent}
.go:hover,.go:focus-visible{transform:translateY(-1px)}
.go.alt{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:none}
.go[hidden]{display:none}
.note{max-width:620px;margin:30px auto 0;text-align:center;color:#4a627e;font-size:.95rem}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 16px;font:700 1rem inherit;min-height:44px;cursor:pointer;color:var(--ink);box-shadow:0 4px 12px rgba(30,58,95,.1)}
footer{text-align:center;padding:20px}