/* YBN Student Platform. Mobile first. Colours: tokens only (css/tokens.css, synced from /site). */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:1rem;line-height:1.5;background:var(--bg);color:var(--text);padding-bottom:calc(5.5rem + env(safe-area-inset-bottom));min-height:100vh}
svg{display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.sr,.sr-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--secondary);color:var(--on-secondary);padding:.75rem 1rem;z-index:500}
.skip:focus{top:1rem}
.icon{width:1.4em;height:1.4em;flex:none}
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1}
.eyebrow{font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.hint{color:var(--text-muted);font-size:.9rem}
.lede{font-size:1.1rem;margin-bottom:1.25rem}
.empty{color:var(--text-muted);padding:.5rem 0}

/* buttons: 44px minimum */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;min-width:2.75rem;padding:.4rem 1.2rem;border:0;border-radius:3rem;font-weight:700;cursor:pointer;background:var(--secondary);color:var(--on-secondary);text-decoration:none;text-align:center}
.btn--accent{background:var(--accent);color:var(--on-accent)}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--text)}
.btn--small{padding:.3rem .9rem;font-size:.9rem}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:active:not(:disabled){transform:translateY(1px)}
.chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--bg);color:var(--text);font-weight:700;font-size:.75rem;padding:.2rem .6rem;border-radius:3rem}
.chip .icon{width:1em;height:1em}
.chip--soon{background:var(--accent);color:var(--on-accent);letter-spacing:.08em;text-transform:uppercase}
.chip--wait{background:var(--accent);color:var(--on-accent)}

/* chrome */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.5rem;padding:.25rem 1rem;background:var(--bg);border-bottom:2px solid var(--text)}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;min-height:2.75rem}
.brand svg{width:2.2rem;height:2.2rem}.brand .bub{color:var(--accent)}.brand .mic{color:var(--on-accent)}
.bars-chip{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:0 1rem;border-radius:3rem;background:var(--secondary);color:var(--on-secondary);font-weight:700;text-decoration:none}
.bars-chip .icon{color:var(--accent)}
#app{max-width:44rem;margin-inline:auto;padding:1.25rem 1rem 2rem;display:grid;gap:1.75rem;outline:none}
#app>*{min-width:0}
.page-h{font-size:2.4rem}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem}
.sec-h h2{font-size:1.6rem}
.sec-h a{font-weight:700}
.back{display:inline-flex;align-items:center;gap:.3rem;min-height:2.75rem;font-weight:700;text-decoration:none}
.flip{transform:rotate(180deg)}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg);border-top:2px solid var(--text);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:3.75rem;font-size:.72rem;font-weight:700;text-decoration:none;color:var(--text-muted);position:relative}
.tabbar a[aria-current="page"]{color:var(--secondary)}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:-2px;left:25%;right:25%;height:4px;background:var(--accent);border-radius:0 0 4px 4px}
.tabbar .icon{width:1.6rem;height:1.6rem}
.tabbar__create{display:none!important}   /* phones: Create is the floating button instead */
.fab{position:fixed;right:1rem;bottom:calc(4.75rem + env(safe-area-inset-bottom));z-index:55;display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--accent);color:var(--on-accent);text-decoration:none;box-shadow:0 .25rem 0 var(--secondary)}
.fab .icon{width:1.8rem;height:1.8rem}
.fab:active{transform:translateY(2px);box-shadow:0 .1rem 0 var(--secondary)}
body[data-route="create"] .fab{display:none}

/* avatars + covers + badges */
.av{display:inline-grid;place-items:center;border-radius:50%;flex:none}
.av .icon{width:56%;height:56%}
.av--xs{width:1.5rem;height:1.5rem}.av--sm{width:2.25rem;height:2.25rem}.av--md{width:3rem;height:3rem}.av--lg{width:3.5rem;height:3.5rem}.av--xl{width:6rem;height:6rem}
.av--secondary{background:var(--secondary);color:var(--on-secondary)}
.av--accent{background:var(--accent);color:var(--on-accent)}
.av--text{background:var(--text);color:var(--bg)}
.cover{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden}
.cover>.icon{width:3rem;height:3rem;position:relative;z-index:1}
.cover i{position:absolute;background:currentColor;opacity:.16}
.cover i:nth-of-type(1){width:60%;aspect-ratio:1;border-radius:50%;right:-12%;top:-30%}
.cover i:nth-of-type(2){width:140%;height:22%;left:-20%;bottom:14%;transform:rotate(-8deg)}
.cover--a{background:var(--secondary);color:var(--on-secondary)}
.cover--b{background:var(--accent);color:var(--on-accent)}
.cover--c{background:var(--text);color:var(--bg)}
.cover--d{background:var(--surface);color:var(--secondary)}
.hex{--ring:var(--secondary);--fill:var(--surface);--ink:var(--secondary);width:3.6rem;height:4rem;display:inline-grid;place-items:center;flex:none;background:var(--ring);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hex__in{width:calc(100% - 7px);height:calc(100% - 7px);display:grid;place-items:center;background:var(--fill);color:var(--ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hex .icon{width:1.5rem;height:1.5rem}
.hex--t0{--ring:var(--line);--ink:var(--text-muted)}
.hex--t2{--ring:var(--accent);--fill:var(--secondary);--ink:var(--on-secondary)}
.hex--t3{--ring:var(--secondary);--fill:var(--accent);--ink:var(--on-accent)}
.pips{display:inline-flex;gap:.25rem}
.pips i{width:.6rem;height:.6rem;border-radius:50%;border:2px solid currentColor}
.pips i.on{background:currentColor}
.meter{height:.6rem;border-radius:1rem;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--secondary);border-radius:1rem;transition:width .4s}
.meter--lg{height:.8rem}

/* home */
.tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;align-items:start}
.tile{display:flex;flex-direction:column;gap:.15rem;justify-content:flex-end;min-height:7.5rem;padding:.9rem .8rem;text-decoration:none;position:relative}
.tile .icon{width:2rem;height:2rem;margin-bottom:auto}
.tile b{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.tile small{font-weight:600;font-size:.8rem}
.tile--create{background:var(--secondary);color:var(--on-secondary);clip-path:polygon(0 0,100% 0,100% 80%,86% 100%,0 100%);border-radius:.4rem 0 0 .4rem}
.tile--compete{background:var(--accent);color:var(--on-accent);border-radius:.4rem}
.tile--win{background:var(--surface);min-height:9.5rem;border-radius:.4rem .4rem 2rem .4rem}
.hello{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem 1rem;align-items:center;background:var(--text);color:var(--bg);padding:1.1rem;border-radius:.4rem .4rem 2.2rem .4rem}
.hello .hi{font-size:1.1rem}
.bars-big{display:flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.bars-big .icon{width:1.6rem;height:1.6rem;color:var(--accent)}
.bars-big output{font-size:2.6rem;line-height:1}
.bars-big span{font-size:1rem;font-family:var(--font-body);font-weight:700}
.hello .bars-big output{color:var(--accent)}
.streak{display:inline-flex;align-items:center;gap:.2rem;background:var(--accent);color:var(--on-accent);font-weight:700;border-radius:3rem;padding:.3rem .7rem}
.streak small{font-weight:600}
.hello .goal{grid-column:1/-1}
.hello .meter{background:color-mix(in srgb,var(--bg) 25%,transparent)}
.hello .meter i{background:var(--accent)}
.hello .goal p{margin-top:.5rem;font-size:.95rem}
.hello a{color:var(--bg);font-weight:700}

.rail{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-1rem;padding:.25rem 1rem .75rem;scrollbar-width:thin}
.rail>*{scroll-snap-align:start;flex:none}
.topic{width:10.5rem;min-height:9rem;padding:.9rem;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.topic b{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;line-height:1.05}
.topic .icon{width:1.8rem;height:1.8rem;align-self:flex-end}
.topic--a{background:var(--secondary);color:var(--on-secondary);clip-path:polygon(0 0,100% 0,100% 100%,14% 100%,0 88%)}
.topic--b{background:var(--accent);color:var(--on-accent);clip-path:polygon(12% 0,100% 0,100% 88%,88% 100%,0 100%,0 12%)}
.topic--c{background:var(--surface);clip-path:polygon(0 0,86% 0,100% 12%,100% 100%,0 100%)}
.topic--d{background:var(--text);color:var(--bg);clip-path:polygon(0 12%,12% 0,100% 0,100% 100%,0 100%)}
.beats{display:grid;gap:.6rem}
.beat{display:grid;grid-template-columns:auto 1fr;gap:.5rem .8rem;align-items:center;background:var(--surface);border-radius:.4rem;padding:.8rem}
.beat b{display:block}.beat small{color:var(--text-muted)}
.beat .picks{display:flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:600;color:var(--text-muted)}
.beat .picks .icon{width:1rem;height:1rem}
.beat .btn{justify-self:start}
.beat>:nth-child(n+3){grid-column:2}
.play{width:3rem;height:3rem;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer}
.play.is-on{background:var(--secondary);color:var(--on-secondary)}
.minis{gap:.5rem}
.mini{width:5.2rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;font-size:.75rem;font-weight:700;text-decoration:none;min-height:2.75rem}

/* network / work */
.friend{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:5.2rem;text-align:center;font-size:.85rem}
.friend small{display:flex;align-items:center;gap:.2rem;color:var(--text-muted)}
.friend small .icon{width:.9rem;height:.9rem}
.feed{display:grid;gap:1rem}
.work{background:var(--surface);border-radius:.4rem;overflow:hidden}
.work__cover{position:relative;display:block}
.work__cover .chip--type{position:absolute;left:.6rem;bottom:.6rem;z-index:2}
.work__cover .chip--wait{position:absolute;right:.6rem;top:.6rem;z-index:2}
.work__body{padding:.9rem;display:grid;gap:.4rem}
.work h3{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1.05}
.work h3 a{text-decoration:none}
.by{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--text-muted)}
.by span:nth-child(2){color:var(--text);font-weight:700}
.work__acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:0 1rem;border-radius:3rem;border:2px solid var(--text);background:var(--bg);font-weight:700;cursor:pointer}
.pill .icon{width:1.2rem;height:1.2rem}
.pill.is-on{background:var(--secondary);color:var(--on-secondary);border-color:var(--secondary)}
.pill:disabled{cursor:default}
.count{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;min-height:2.75rem}
@media (min-width:760px){.feed{grid-template-columns:1fr 1fr}}

/* cards + forms */
.card{background:var(--surface);border-radius:.4rem;padding:1.1rem;display:grid;gap:.75rem}
.card h2{font-size:1.5rem}
.studio-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;text-decoration:none;background:var(--secondary);color:var(--on-secondary)}
.studio-card .icon{width:2rem;height:2rem}
.studio-card small{display:block;font-weight:400}
.form label{font-weight:700}
.form input[type=text],.form input:not([type]),.form textarea,#ob-name{width:100%;min-height:3rem;padding:.6rem .9rem;border:3px solid var(--text);border-radius:.5rem;background:var(--bg);color:var(--text)}
.form small{font-weight:400;color:var(--text-muted)}
.types{border:0;padding:0}
.types legend{font-weight:700;margin-bottom:.4rem}
.typechips{display:flex;flex-wrap:wrap;gap:.5rem}
.typechip input{position:absolute;opacity:0;width:1px;height:1px}
.typechip span{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:0 1rem;border-radius:3rem;border:2px solid var(--text);background:var(--bg);font-weight:700;cursor:pointer}
.typechip input:checked+span{background:var(--secondary);color:var(--on-secondary);border-color:var(--secondary)}
.typechip input:focus-visible+span{outline:3px solid var(--text);outline-offset:2px}
.upload{display:grid;gap:.9rem;padding:1rem;border:3px solid var(--text);border-radius:.5rem;background:var(--bg)}
.upload__file{display:grid;gap:.35rem;align-content:start;justify-items:start}
.filebtn{cursor:pointer}
.upload__file:focus-within .filebtn{outline:3px solid var(--text);outline-offset:2px}
.fname{font-weight:700;word-break:break-all}
.consent-check{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;padding:.8rem;border-radius:.4rem;background:var(--surface);font-weight:400!important;font-size:.92rem;cursor:pointer}
.consent-check input{width:1.75rem;height:1.75rem;margin:0;accent-color:var(--secondary);flex:none;cursor:pointer}
.consent-check .req{display:inline-block;background:var(--accent);color:var(--on-accent);border-radius:.3rem;padding:0 .4rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-right:.3rem}
@media (min-width:640px){.upload{grid-template-columns:minmax(0,13rem) 1fr;align-items:start}}
.tip{display:flex;gap:.6rem;font-size:.9rem;color:var(--text-muted)}
.tip .icon{margin-top:.15rem}
.success{justify-items:start}
.success__ic{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.row{display:flex;flex-wrap:wrap;gap:.5rem}

/* compete / win */
.comps{display:grid;gap:1rem}
.comp{display:grid;gap:.5rem;padding:1.2rem;border-radius:.4rem;justify-items:start}
.comp h2{font-size:1.9rem}
.comp--a{background:var(--secondary);color:var(--on-secondary);clip-path:polygon(0 0,100% 0,100% 90%,94% 100%,0 100%)}
.comp--b{background:var(--accent);color:var(--on-accent);clip-path:polygon(0 0,94% 0,100% 10%,100% 100%,0 100%)}
.comp--c{background:var(--text);color:var(--bg);clip-path:polygon(6% 0,100% 0,100% 100%,0 100%,0 10%)}
.comp .prize{display:flex;gap:.4rem;align-items:center;font-weight:700}
.comp .types{display:flex;gap:.4rem;flex-wrap:wrap}
.comp .btn{background:var(--bg);color:var(--text)}
.comp .entered{display:flex;gap:.4rem;align-items:center}
.balance{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;background:var(--text);color:var(--bg);padding:1.1rem;border-radius:.4rem .4rem 2rem .4rem}
.balance .bars-big output{color:var(--accent)}
.balance a{color:var(--bg);font-weight:700}
.rewards,.plain,.earn{display:grid;gap:.6rem}
.reward,.plain li,.earn li{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;background:var(--surface);border-radius:.4rem;padding:.8rem}
.plain li{grid-template-columns:auto 1fr}
.reward small,.plain small{display:block;color:var(--text-muted)}
.reward>.icon,.plain li>.icon,.earn li>.icon{width:1.8rem;height:1.8rem;color:var(--secondary)}
.reward.is-locked b{color:var(--text-muted)}
.earn b{background:var(--accent);color:var(--on-accent);border-radius:3rem;padding:.1rem .7rem}
.board{display:grid;gap:.5rem;counter-reset:r}
.board li{display:grid;grid-template-columns:2rem auto 1fr auto;gap:.7rem;align-items:center;background:var(--surface);border-radius:.4rem;padding:.6rem .8rem}
.board .rank{font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.board .bars-s{display:inline-flex;align-items:center;gap:.25rem;font-weight:700}
.board .bars-s .icon{width:1rem;height:1rem;color:var(--secondary)}
.board .is-me{background:var(--accent);color:var(--on-accent)}
.board .is-me .bars-s .icon{color:var(--on-accent)}
.code{font-family:var(--font-display);font-weight:800;font-size:2.4rem;letter-spacing:.08em}

/* badges + profile */
.badge-list{display:grid;gap:.75rem}
.badge-card{display:flex;gap:1rem;align-items:center;background:var(--surface);border-radius:.4rem;padding:.9rem}
.badge-card>div{flex:1;min-width:0;display:grid;gap:.25rem}
.badge-card h3{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.badge-card p{font-size:.9rem;color:var(--text-muted)}
.badge-card.is-locked{opacity:.9}
@media (min-width:700px){.badge-list{grid-template-columns:1fr 1fr}}
.who{display:flex;gap:1.2rem;align-items:center}
.who>div{display:grid;gap:.4rem;justify-items:start}
.who .name{font-size:2.2rem}
.who .sub{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;font-weight:600}
.who .sub .icon{width:1.1rem;height:1.1rem;color:var(--secondary)}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.stats3>div{background:var(--surface);border-radius:.4rem;padding:.9rem .5rem;text-align:center;display:grid}
.stats3 b{font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--secondary)}
.stats3 span{font-weight:700;font-size:.85rem}
.activity{display:grid}
.activity li{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line)}
.activity li.empty{display:block}
.activity li>.icon{color:var(--secondary)}
.activity small{color:var(--text-muted);white-space:nowrap}
.menu-list{display:grid}
.menu-list a{display:flex;align-items:center;gap:.8rem;min-height:3.25rem;padding:.4rem 0;border-bottom:1px solid var(--line);font-weight:700;text-decoration:none}
.menu-list .icon{color:var(--secondary)}
.prose p+p{margin-top:.5rem}
.prose a{font-weight:700}
.demo-grid{display:grid;gap:.6rem}
.file{display:flex;align-items:center;gap:.5rem}
.pick{display:grid;gap:.5rem;margin:1rem 0}

/* school card + pathways */
.school-card{--school-navy:#041937;--school-gold:#f29d1b;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;text-decoration:none;padding:1rem 1.1rem;border-radius:.4rem;
  background:color-mix(in srgb,var(--school-navy) 55%,var(--secondary));color:var(--on-secondary);border-left:.5rem solid color-mix(in srgb,var(--school-gold) 55%,var(--accent))}
.school-card img{width:4.5rem;height:auto;filter:drop-shadow(.25rem .25rem 0 color-mix(in srgb,var(--school-gold) 55%,var(--accent)))}
.school-card .display{display:block;font-size:1.9rem}
.school-card small{display:block;font-weight:600}
.school-stats{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin-top:.5rem;font-size:.85rem}
.school-stats b{font-family:var(--font-display);font-weight:800;font-size:1.15rem}
.school-pill{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;margin-top:-1rem;font-weight:700;background:var(--surface);border-radius:3rem;padding:.25rem 1rem .25rem .5rem}
.school-line{display:flex;align-items:center;gap:.4rem}
.school-chip{display:flex;align-items:center;gap:.7rem;background:var(--surface);border-radius:.4rem;padding:.6rem .8rem}
.school-chip small{display:block;color:var(--text-muted)}
.pcards{gap:.6rem}
.pcard{position:relative;width:8.6rem;min-height:7.5rem;padding:.8rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.1rem;text-decoration:none;border-radius:.4rem}
.pcard .icon{width:1.8rem;height:1.8rem;margin-bottom:auto}
.pcard b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;line-height:1.05}
.pcard small{font-weight:700;font-size:.78rem}
.pcard__ok{position:absolute;right:.6rem;top:.6rem;width:1.3rem!important;height:1.3rem!important;margin:0!important}
.pcard--a{background:var(--secondary);color:var(--on-secondary)}
.pcard--b{background:var(--accent);color:var(--on-accent)}
.pcard--c{background:var(--text);color:var(--bg)}
.pcard--d{background:var(--surface)}
.path-hero{display:grid;gap:.7rem;justify-items:start;padding:1.4rem 1.2rem;border-radius:.4rem .4rem 2.4rem .4rem}
.path-hero h1{font-size:2.6rem}
.path-hero__ic{width:2.6rem;height:2.6rem}
.path-sub{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.path-hero .chips{display:flex;flex-wrap:wrap;gap:.4rem}
.path-hero .chips span{border:2px solid currentColor;border-radius:3rem;padding:.1rem .7rem;font-weight:700;font-size:.85rem}
.path-hero--a{background:var(--secondary);color:var(--on-secondary)}
.path-hero--b{background:var(--accent);color:var(--on-accent)}
.path-hero--c{background:var(--text);color:var(--bg)}
.path-hero--d{background:var(--surface)}
.path-hero--a .path-hero__go{background:var(--accent);color:var(--on-accent)}
.path-hero--b .path-hero__go{background:var(--text);color:var(--bg)}
.path-hero--c .path-hero__go{background:var(--accent);color:var(--on-accent)}
.path-hero--a .btn--ghost,.path-hero--c .btn--ghost{color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.path-hero--b .btn--ghost{color:var(--on-accent);box-shadow:inset 0 0 0 2px var(--on-accent)}
.path-hero [aria-pressed="true"]{background:var(--bg)!important;color:var(--text)!important;box-shadow:none!important}

/* dialogs */
dialog{margin:auto;border:3px solid var(--text);background:var(--bg);color:var(--text);padding:1.4rem;border-radius:.8rem;max-height:calc(100dvh - 2rem);overflow:auto}
dialog::backdrop{background:color-mix(in srgb,var(--text) 55%,transparent)}
.modal{width:min(32rem,calc(100% - 1.5rem));box-shadow:.5rem .5rem 0 var(--accent);margin:auto}
.modal__icon{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--accent);color:var(--on-accent);margin-bottom:.8rem}
.modal h2{font-size:1.9rem;margin-bottom:.8rem}
.modal p{margin-bottom:.7rem}
.modal a{font-weight:700}
.modal__btns{display:grid;gap:.6rem;margin-top:1rem}
#ob-form{display:grid;gap:.5rem}
#ob-form fieldset{border:0;padding:0;margin-top:.5rem}
#ob-form legend{font-weight:700;margin-bottom:.4rem}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.avopt{display:grid;place-items:center;cursor:pointer}
.avopt input{position:absolute;opacity:0;width:1px;height:1px}
.avopt span{display:grid;place-items:center;padding:.3rem;border-radius:50%;border:3px solid transparent;min-width:2.75rem;min-height:2.75rem}
.avopt input:checked+span{border-color:var(--text)}
.avopt input:focus-visible+span{outline:3px solid var(--text);outline-offset:2px}
.sheet{width:100%;max-width:none;margin:auto 0 0;border-radius:1rem 1rem 0 0;border-bottom:0;padding:1.4rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom))}
.sheet h2{font-size:1.7rem;margin-bottom:.6rem}
.sheet p{margin-bottom:.6rem}
.sheet__x{position:absolute;right:.5rem;top:.5rem;width:2.75rem;height:2.75rem;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
@media (min-width:640px){.sheet{width:min(30rem,calc(100% - 2rem));margin:auto;border-radius:.8rem;border-bottom:3px solid var(--text)}}

/* toasts */
.toasts{position:fixed;top:4.2rem;left:50%;transform:translateX(-50%);width:min(24rem,calc(100% - 1.5rem));z-index:300;display:grid;gap:.5rem;pointer-events:none}
.toast{display:flex;align-items:center;gap:.6rem;background:var(--text);color:var(--bg);padding:.7rem 1rem;border-radius:.6rem;font-weight:600;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.toast .icon{color:var(--accent)}
.toast--badge{background:var(--secondary);color:var(--on-secondary);position:relative;padding:.9rem 1rem;gap:1rem}
.toast--badge small{display:block;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}
.toast--badge b{font-family:var(--font-display);font-weight:800;font-size:1.4rem;line-height:1.05;display:block}
.toast--badge span{font-weight:600}
.burst{position:absolute;left:2.7rem;top:50%;width:0;height:0;pointer-events:none}
.burst i{position:absolute;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);animation:burst .9s ease-out forwards}
.burst i:nth-child(even){background:var(--bg);width:.4rem;height:.4rem}
@keyframes burst{from{transform:rotate(calc(var(--i)*36deg)) translateX(.5rem);opacity:1}to{transform:rotate(calc(var(--i)*36deg)) translateX(3.6rem);opacity:0}}
@keyframes pop{from{transform:translateY(-.6rem) scale(.95);opacity:0}to{transform:none;opacity:1}}

/* laptop / desktop: the tab bar moves to the top */
@media (min-width:900px){
  body{padding-bottom:2rem}
  #app{max-width:60rem}
  .tabbar{top:0;bottom:auto;left:auto;right:7.5rem;width:auto;height:3.5rem;background:transparent;border:0;display:flex;padding:0;z-index:60}
  .tabbar a{flex-direction:row;gap:.4rem;min-height:3.5rem;padding:0 1rem;font-size:.95rem}
  .tabbar a[aria-current="page"]::before{top:auto;bottom:-2px;left:1rem;right:1rem;border-radius:4px 4px 0 0}
  .tabbar .icon{width:1.3rem;height:1.3rem}
  .tabbar__create{display:flex!important}
  .fab{display:none}
  .tiles{grid-template-columns:1fr 1fr 1fr}
  .tile{min-height:9rem}.tile--win{min-height:11rem}
  .beats{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* language picker (Profile) */
.langpick{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.langpick label{display:block}
.langpick input{position:absolute;opacity:0;width:1px;height:1px}
.langpick span{display:grid;place-items:center;min-height:3.25rem;border-radius:.5rem;border:3px solid var(--text);background:var(--bg);font-weight:700;font-size:1.1rem;cursor:pointer}
.langpick input:checked+span{background:var(--secondary);color:var(--on-secondary);border-color:var(--secondary)}
.langpick input:focus-visible+span{outline:3px solid var(--text);outline-offset:2px}

/* tour */
.tour{position:fixed;inset:0;z-index:400}
.tour--plain{background:color-mix(in srgb,var(--text) 70%,transparent)}
.tour__spot{position:fixed;display:none;border-radius:1rem;box-shadow:0 0 0 100vmax color-mix(in srgb,var(--text) 70%,transparent);outline:4px solid var(--accent);transition:left .25s,top .25s,width .25s,height .25s}
.tour__card{position:fixed;left:50%;transform:translateX(-50%);width:min(30rem,calc(100% - 1.5rem));background:var(--bg);color:var(--text);border:3px solid var(--text);border-radius:1rem;padding:1.2rem;box-shadow:.4rem .4rem 0 var(--accent);display:grid;gap:.6rem}
.tour__card[data-at="top"]{top:4.5rem}
.tour__card[data-at="bottom"]{bottom:calc(5.25rem + env(safe-area-inset-bottom))}
.tour__card[data-at="center"]{top:50%;transform:translate(-50%,-50%)}
.tour__ic{width:3.4rem;height:3.4rem;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.tour__ic .icon{width:1.8rem;height:1.8rem}
.tour h2{font-size:1.8rem}
.tour__dots{display:flex;gap:.35rem}
.tour__dots i{width:.6rem;height:.6rem;border-radius:50%;border:2px solid var(--text)}
.tour__dots i.on{background:var(--text)}
.tour__dots i.done{background:var(--secondary);border-color:var(--secondary)}
.tour__btns{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.tour__gap{flex:1}
@media (prefers-reduced-motion:reduce){.tour__spot{transition:none}}

/* art challenge + teacher review */
.demo-frame{display:grid;place-content:center;justify-items:center;gap:.5rem;aspect-ratio:16/9;border-radius:.8rem;background:var(--text);color:var(--bg);text-align:center;padding:1rem;font-weight:700}
.demo-frame .icon{width:3rem;height:3rem}
.challenge-note{display:flex;align-items:center;gap:.6rem;font-weight:700;background:var(--accent);color:var(--on-accent)}
.review{display:grid;gap:1rem}
.review h3{font-size:1.5rem}
.review .card{gap:.6rem}
.menu-list .menu-btn{display:flex;align-items:center;gap:.8rem;width:100%;min-height:3.25rem;padding:.4rem 0;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;font-weight:700;text-align:left;cursor:pointer;color:inherit}
.menu-list .menu-btn .icon{color:var(--secondary)}
.upload__file .btn+.btn,.upload__file .filebtn+input+.filebtn{margin-top:.2rem}

/* real files from the server */
.cover--img{padding:0;overflow:hidden}
.cover--img img{display:block;width:100%;height:100%;object-fit:cover}
.rv-media{display:block;width:100%;max-height:70vh;border-radius:.6rem;background:var(--surface);object-fit:contain}
audio.rv-media{background:none}

/* sign-in gate, recovery codes, dashboard */
#gate-body{display:grid;gap:.8rem}
#gate-body form{display:grid;gap:.6rem}
#gate-body input[type=text],#gate-body input[type=password],#gate-body input:not([type]),#gate-body input[id^="g-"]:not([type=checkbox]){min-height:3rem;padding:.4rem .8rem;border:3px solid var(--text);border-radius:.6rem;background:var(--bg);color:var(--text);font:inherit;font-weight:600;width:100%}
#gate-body input[data-upper]{letter-spacing:.2em;font-family:var(--font-display);font-size:1.4rem;text-transform:uppercase}
.pick--names{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.4rem;list-style:none;padding:0;max-height:13rem;overflow:auto}
.pickname{width:100%;justify-content:center}
.pickname[aria-pressed="true"]{background:var(--secondary);color:var(--on-secondary);box-shadow:none}
.code{font-family:var(--font-display);font-weight:800;font-size:1.7rem;line-height:1.15;word-break:break-word;background:var(--surface);border:3px dashed var(--text);border-radius:.8rem;padding:.9rem 1rem;text-align:center}
.check{display:flex;gap:.6rem;align-items:center;font-weight:600;min-height:2.75rem}
.check input{width:1.4rem;height:1.4rem;accent-color:var(--secondary);flex:none}
.classcode{display:inline-block;font-family:var(--font-display);font-weight:800;letter-spacing:.15em;background:var(--accent);color:var(--on-accent);padding:.1rem .7rem;border-radius:.5rem}
.classcode--big{font-size:2.4rem;padding:.2rem 1rem}
.tnav{margin-bottom:.8rem}
.account .row{margin-top:.6rem}
body[data-gated="1"] .tabbar,body[data-gated="1"] #bars-chip{display:none}
body[data-role="teacher"] #bars-chip,body[data-role="admin"] #bars-chip{display:none}
.crest-generic{display:inline-grid;place-items:center;flex:none;border-radius:.5rem;background:var(--secondary);color:var(--on-secondary)}
.crest-generic .icon{width:60%;height:60%}