/* Aria's Violin Studio — journey pages as a course outline (curious.html, little-ones.html). Used with journey.js.
   Follows the Design Guide: plum = act, gold = done, crimson = play, flat buttons with 10px corners, Close at bottom-right. */
.j-top{position:sticky;top:72px;z-index:10;background:#fbfaf7;padding:12px 16px 12px;border-bottom:1px solid var(--line);margin:0 -16px}
.j-bar{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--muted)}
.j-track{flex:1;height:8px;background:#ece6dd;border-radius:999px;overflow:hidden}
.j-fill{height:100%;width:0;background:#d1a854;border-radius:999px;transition:width .5s ease}
.j-stars{white-space:nowrap;font-weight:700;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.j-fill{transition:none}}

/* the rabbit's note at the top */
.j-mascot{display:flex;gap:12px;align-items:center;margin:20px 0 0;background:#f2edf4;border:1px solid #e4d9ea;border-radius:14px;padding:12px 16px;max-width:760px}
.j-mascot img{width:44px;height:44px;border-radius:10px;flex:none}
.j-say{color:#4d3f55;font-size:15px;line-height:1.55}

/* a part: eyebrow + heading, then its numbered steps */
.j-unit{margin:34px 0 6px;padding-left:14px;border-left:4px solid var(--brand)}
.j-unit small{display:block;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--brand)}
.j-unit b{display:block;font:700 clamp(24px,3.5vw,32px)/1.2 Georgia,serif;color:var(--ink);margin-top:2px}
.u2 { border-left-color:var(--gold) } .u2 small{color:var(--gold)}
.u3 { border-left-color:#7c2f22 } .u3 small{color:#7c2f22}
.u4 { border-left-color:var(--brand) } .u5 { border-left-color:var(--gold) } .u5 small{color:var(--gold)}
.u6 { border-left-color:#7c2f22 } .u6 small{color:#7c2f22}

.j-path{list-style:none;margin:10px 0 0;padding:0;position:relative}
.j-path:before{content:"";position:absolute;left:21px;top:14px;bottom:14px;width:2px;background:var(--line)}
.j-node{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;padding:8px 0;cursor:pointer;font:inherit;color:var(--ink)}
.j-btn{position:relative;z-index:1;flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--line);font:700 17px Georgia,serif;color:var(--muted)}
.j-node.done .j-btn{background:#d1a854;border-color:#d1a854;color:#fff}
.j-node.next .j-btn{background:var(--brand);border-color:var(--brand);color:#fff}
.j-card{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;transition:border-color .15s}
.j-node:hover .j-card,.j-node:focus-visible .j-card{border-color:var(--brand)}
.j-node:focus-visible{outline:none}
.j-node.next .j-card{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.j-ico{font-size:24px;flex:none;width:30px;text-align:center}
.j-txt{flex:1;min-width:0}
.j-node .lbl{display:block;font-weight:700;font-size:18px;line-height:1.3}
.j-node .cnt{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.j-state{flex:none;font-size:13px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.j-node.done .j-state{background:#f6ecd8;color:var(--gold)}
.j-node.next .j-state{background:var(--brand);color:#fff}
.j-node.soon .j-state{background:#f2eee8;color:var(--muted)}
.j-node.soon .j-card{background:#fbfaf7;border-style:dashed}
@media(max-width:420px){.j-state{display:none}.j-node.next .j-state{display:inline}}

/* finish card */
.j-goal{text-align:center;margin:34px 0 0;padding:26px 20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.j-goal .big{font-size:48px;line-height:1;filter:grayscale(1);opacity:.4;transition:all .4s}
.j-goal.won{background:#faf5e8;border-color:#e3d3b2}
.j-goal.won .big{filter:none;opacity:1}
.j-goal h2{font-size:24px;margin:10px 0 4px}
.j-goal p{margin:0 0 14px;color:var(--muted)}

/* buttons */
.j-cta{display:inline-block;background:var(--brand);color:#fff;font-weight:700;font-size:18px;border-radius:10px;padding:13px 22px;text-decoration:none;text-align:center;border:0}
.j-cta:hover{background:var(--brand-dark)}
.j-cta.play{background:#7c2f22}.j-cta.play:hover{background:#5e2219}
.j-cta.off{background:#d9d3c9;pointer-events:none}

/* the step panel (slides up) */
.j-sheet-bg{position:fixed;inset:0;background:rgba(20,15,25,.4);z-index:40;display:none}
.j-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:#fff;border-radius:16px 16px 0 0;padding:22px 20px 14px;transform:translateY(105%);transition:transform .25s ease,visibility 0s .25s;visibility:hidden;max-width:640px;margin:0 auto;box-shadow:0 -10px 40px rgba(0,0,0,.15)}
.j-open .j-sheet-bg{display:block}.j-open .j-sheet{transform:none;visibility:visible;transition:transform .25s ease}
.j-sheet .j-steplbl{display:block;color:var(--muted);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.j-sheet h2{font-size:26px;margin:4px 0 8px;display:flex;gap:10px;align-items:center}
.j-sheet p{margin:0 0 18px;font-size:17px;color:#3d4047}
.j-sheet .j-cta{display:block}
.j-sheet .more{display:block;text-align:center;margin-top:12px;font-weight:700}
.j-close{display:block;margin:14px 0 0 auto;background:none;border:0;font:inherit;font-size:15px;color:var(--brand);text-decoration:underline;cursor:pointer;padding:6px 0}
.j-tag{display:inline-block;background:#f6ecd8;color:var(--gold);font-weight:700;font-size:13px;border-radius:999px;padding:3px 10px;margin:0 0 8px}
.j-lad{background:#faf5e8;border:1px solid #e3d3b2;border-radius:12px;padding:12px 14px;margin:0 0 14px}
.j-lad .row{display:flex;align-items:center;gap:10px}
.j-lad .nm{flex:1;font-weight:700;font-size:18px;line-height:1.3}
.j-lad .of{color:var(--muted);font-weight:600;font-size:14px}
.j-lad .nav{flex:none;min-width:48px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;color:var(--ink);padding:0 10px;white-space:nowrap}
.j-lad .nav:disabled{opacity:.35;cursor:default}
.j-dots{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.j-dots i{width:9px;height:9px;border-radius:50%;background:#e2dbd0;display:block}
.j-dots i.on{background:#d1a854}.j-dots i.at{outline:2px solid var(--brand);outline-offset:1px}

.j-toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-12px);background:var(--ink);color:#fff;font-weight:600;font-size:15px;padding:10px 18px;border-radius:10px;opacity:0;transition:all .3s;z-index:60;pointer-events:none}
.j-toast.show{opacity:1;transform:translate(-50%,0)}