/* île Curriculum — "Your path". A sage trail on a flat dark ground: Up next on top, search, a row of stage milestones (one stage at a time),
   and the chapters as stops along a dashed trail. Starting a chapter is unchanged (curriculum.js practise()). */
#panel-curriculum .g { display:none; }
#panel-curriculum .stage { background:#0F0F0E; }
.cu-scroll { --cu-gold:#9FB59A; --cu-gold-soft:rgba(159,181,154,.3); --cu-ink:#E8E2D0; --cu-faint:rgba(232,226,208,.58); --cu-rule:rgba(255,255,255,.07);
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; padding:52px 24px 96px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; }
.cu-scroll::-webkit-scrollbar { width:4px; } .cu-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:2px; }
.cu-root, .cu-status, .cu-confirm, .cu-go { width:100%; max-width:760px; box-sizing:border-box; }
/* notices (status line, "end it and practise this one?", "Go to Classroom") sit above the list, so they are never lost at the bottom of a long page */
.cu-status, .cu-confirm, .cu-go { order:0; }
.cu-root { order:1; }
.cu-status { font-size:14px; color:var(--cu-ink); margin:0; min-height:0; }
.cu-status:not(:empty) { margin:0 0 16px; padding:12px 16px; border:1px solid var(--cu-gold-soft); border-radius:12px; background:rgba(159,181,154,.07); }
.cu-confirm { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 18px; padding:14px 16px; border:1px solid var(--cu-gold-soft); border-radius:14px; background:rgba(159,181,154,.06); }
.cu-confirm-msg { flex:1 0 100%; margin:0; font-size:14px; color:var(--cu-ink); }
.cu-go { width:auto; align-self:flex-start; margin:0 0 16px; }

.cu-head { margin:0 0 22px; }
.cu-eyebrow { display:block; font-size:14px; letter-spacing:.1em; text-transform:none; color:var(--cu-gold); }
.cu-title { font-family:'Spectral',Georgia,serif; font-weight:300; font-size:52px; line-height:1.05; color:var(--cu-ink); margin:8px 0 6px; }
.cu-sub { font-family:'Spectral',Georgia,serif; font-style:italic; font-size:18px; color:var(--cu-faint); margin:0; }

.cu-next { display:flex; align-items:center; gap:16px; margin:0 0 24px; padding:16px 20px; border:1px solid var(--cu-gold); border-radius:18px;
  background:linear-gradient(90deg, rgba(159,181,154,.15), rgba(159,181,154,.02)); box-shadow:0 0 40px rgba(159,181,154,.1); }
.cu-next-text { min-width:0; }
.cu-next-tag { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cu-gold); }
.cu-next-name { display:block; font-family:'Spectral',Georgia,serif; font-weight:400; font-size:21px; line-height:1.3; color:var(--cu-ink); overflow-wrap:anywhere; }
.cu-next .cu-btn { margin-left:auto; flex:none; }

.cu-searchbox { display:block; margin:0 0 22px; padding:10px 16px 12px; border:1px solid var(--cu-gold-soft); border-radius:14px; background:rgba(255,255,255,.04); transition:border-color .2s, box-shadow .2s, background .2s; }
.cu-searchbox:focus-within { border-color:var(--cu-gold); background:rgba(159,181,154,.06); box-shadow:0 0 0 3px rgba(159,181,154,.14); }
.cu-searchlabel { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cu-faint); margin-bottom:2px; }
.cu-search { width:100%; border:0; background:transparent; color:var(--cu-ink); font:400 17px 'Spectral',Georgia,serif; padding:2px 0; outline:0; box-shadow:none; }
.cu-search::-webkit-search-cancel-button, .cu-search::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }
.cu-search::placeholder { color:rgba(232,226,208,.38); }

/* stage milestones: numbered circles on a dashed line; scrolls sideways on a phone */
.cu-mile { margin:0 0 20px; padding:8px 4px 10px; overflow-x:auto; scrollbar-width:none; }
.cu-mile::-webkit-scrollbar { display:none; }
.cu-mile[hidden] { display:none; }
.cu-mile-in { position:relative; display:flex; min-width:max-content; }
.cu-mile-in::before { content:''; position:absolute; left:48px; right:48px; top:21px; border-top:1.5px dashed var(--cu-gold-soft); }
.cu-m { position:relative; flex:1 1 0; min-width:104px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:0 4px; background:none; border:0; cursor:pointer; color:var(--cu-faint); font:inherit; }
.cu-m-n { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--cu-gold-soft); background:#0F0F0E; font:400 20px 'Spectral',Georgia,serif; font-style:normal; color:var(--cu-faint); transition:background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s; }
.cu-m-name { font:400 15px 'Spectral',Georgia,serif; margin-top:5px; }
.cu-m-count { font-size:11.5px; letter-spacing:.06em; opacity:.8; }
.cu-m:hover .cu-m-n { border-color:var(--cu-gold); color:var(--cu-gold); transform:translateY(-2px); }
.cu-m.on .cu-m-n { background:var(--cu-gold); border-color:var(--cu-gold); color:#1a1405; box-shadow:0 0 0 6px rgba(159,181,154,.16); }
.cu-m.on .cu-m-name { color:var(--cu-ink); }
.cu-m.up .cu-m-n::after { content:''; position:absolute; top:-1px; left:calc(50% + 12px); width:10px; height:10px; border-radius:50%; background:var(--cu-gold); box-shadow:0 0 0 3px #0F0F0E; }
.cu-m.on.up .cu-m-n::after { background:#fff; }
.cu-m:focus-visible { outline:2px solid rgba(232,226,208,.7); outline-offset:3px; border-radius:10px; }

.cu-stagehead { display:flex; align-items:baseline; gap:12px; margin:0 0 6px; }
.cu-stagetitle { font:300 30px 'Spectral',Georgia,serif; color:var(--cu-ink); margin:0; }
.cu-stagecount { font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cu-faint); }
.cu-none { font-family:'Spectral',Georgia,serif; font-style:italic; font-size:17px; color:var(--cu-faint); margin:14px 0; }

.cu-trail { position:relative; list-style:none; margin:0; padding:0 0 0 34px; }
.cu-trail::before { content:''; position:absolute; left:5px; top:14px; bottom:14px; border-left:1.5px dashed var(--cu-gold-soft); }
.cu-ch { position:relative; display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--cu-rule); }
.cu-ch::before { content:''; position:absolute; left:-34px; top:50%; width:11px; height:11px; border-radius:50%; background:#0F0F0E; border:1.5px solid var(--cu-gold-soft); transform:translateY(-50%); transition:background .25s, border-color .25s; }
.cu-ch:hover::before { border-color:var(--cu-gold); }
.cu-ch.is-up::before { background:var(--cu-gold); border-color:var(--cu-gold); box-shadow:0 0 0 5px rgba(159,181,154,.2); }
.cu-ch-text { min-width:0; flex:1 1 auto; }
.cu-ch-name { display:block; font:400 18px/1.35 'Spectral',Georgia,serif; color:var(--cu-ink); overflow-wrap:anywhere; }
.cu-ch-meta { display:block; font-size:12.5px; color:var(--cu-faint); margin-top:2px; }
.cu-ch-desc { display:block; font-size:13.5px; color:var(--cu-faint); margin-top:3px; }

/* the Practise buttons (still the .account-action pill underneath) */
.cu-scroll .cu-btn { flex:none; border-radius:999px; border:1px solid var(--cu-gold-soft); background:transparent; color:var(--cu-gold); padding:7px 18px; font:500 13.5px 'DM Sans',system-ui,sans-serif; cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s; }
.cu-scroll .cu-btn:hover:not(:disabled) { background:rgba(159,181,154,.14); border-color:var(--cu-gold); color:var(--cu-gold); }
.cu-scroll .cu-btn:disabled { opacity:.5; cursor:default; }
.cu-scroll .cu-btn-main { background:var(--cu-gold); border-color:var(--cu-gold); color:#1a1405; font-weight:600; font-size:14px; padding:10px 22px; }
.cu-scroll .cu-btn-main:hover:not(:disabled) { background:#F0C86F; color:#1a1405; }
.cu-scroll .cu-scroll .cu-btn:focus-visible, .cu-more:focus-visible { outline:2px solid rgba(232,226,208,.7); outline-offset:3px; }
.cu-more { margin:18px 0 0 34px; border:1px solid var(--cu-gold); background:transparent; color:var(--cu-gold); border-radius:999px; padding:9px 22px; font:500 14px 'DM Sans',system-ui,sans-serif; cursor:pointer; }
.cu-more:hover { background:rgba(159,181,154,.14); }

@media (max-width:640px) {
  .cu-scroll { padding:28px 16px 80px; }
  .cu-title { font-size:36px; } .cu-sub { font-size:16px; }
  .cu-next { flex-wrap:wrap; } .cu-scroll .cu-next .cu-btn { margin-left:0; width:100%; }
  .cu-ch { gap:10px; } .cu-scroll .cu-ch .cu-btn { padding:7px 14px; }
  .cu-m { min-width:92px; }
}
@media (prefers-reduced-motion:no-preference) {
  @keyframes cuRise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  .cu-trail.cu-rise .cu-ch { animation:cuRise .45s cubic-bezier(.2,.7,.2,1) both; }
  .cu-trail.cu-rise .cu-ch:nth-child(2) { animation-delay:.04s; } .cu-trail.cu-rise .cu-ch:nth-child(3) { animation-delay:.08s; }
  .cu-trail.cu-rise .cu-ch:nth-child(4) { animation-delay:.12s; } .cu-trail.cu-rise .cu-ch:nth-child(n+5) { animation-delay:.16s; }
}
@media (prefers-reduced-motion:reduce) {
  .cu-m-n, .cu-ch::before, .cu-btn, .cu-searchbox { transition:none; }
  .cu-m:hover .cu-m-n { transform:none; }
}
