/* Beer Scholar Study Lab: app-specific styles on top of beer-scholar.css */

main#app{min-height:calc(100vh - 78px - 120px);padding-top:40px;padding-bottom:80px}
.view[hidden]{display:none}
.lab-badge{font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);border:1px solid var(--line);border-radius:3px;padding:7px 12px}
html[data-theme="pilsner"] .lab-badge{color:var(--gold)}
.btn-ghost{background:transparent}
.btn-signout{padding:9px 16px;font-size:.78rem}
@media(max-width:560px){.lab-badge{display:none}.btn-signout{padding:8px 12px;font-size:.72rem}}

/* ---- sign in ---------------------------------------------------------- */
.login-card,.done-card{max-width:520px;margin:8vh auto 0;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:44px 40px;text-align:center}
.login-card h1,.done-card h1{font-size:2.2rem;margin:12px 0 14px}
.login-lead{color:var(--dim);font-size:1rem;margin-bottom:26px}
#login-form{display:flex;flex-direction:column;gap:10px}
#login-form input{padding:15px 18px;border-radius:4px;border:1px solid var(--line);background:rgba(128,128,128,.08);color:var(--hd);font-family:inherit;font-size:1rem}
#login-form input::placeholder{color:var(--dim)}
.login-msg{margin-top:16px;font-size:.92rem;color:var(--amber);font-weight:600;min-height:1.4em}
html[data-theme="pilsner"] .login-msg{color:var(--gold)}
.login-msg a{text-decoration:underline}
.login-fine{margin-top:22px;font-size:.82rem;color:var(--dim)}
.login-fine a{color:var(--amber);font-weight:700}
html[data-theme="pilsner"] .login-fine a{color:var(--gold)}

/* ---- deck list -------------------------------------------------------- */
.decks-head{margin-bottom:36px}
.decks-head h1{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:12px 0 10px}
.decks-sub{color:var(--dim);font-weight:600}
.level-group{margin-bottom:44px}
.level-group h2{font-size:.8rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:20px}
html[data-theme="pilsner"] .level-group h2{color:var(--gold)}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.deck-card{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;transition:.2s;cursor:pointer;text-align:left;font-family:inherit;color:var(--txt)}
.deck-card:hover{border-color:var(--card-hover);transform:translateY(-3px)}
.deck-card h3{font-size:1.12rem;line-height:1.35}
.deck-card .topic{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
html[data-theme="pilsner"] .deck-card .topic{color:var(--gold)}
.deck-card .counts{font-size:.82rem;color:var(--dim);font-weight:600}
.deck-card .counts b{color:var(--amber);font-weight:800}
html[data-theme="pilsner"] .deck-card .counts b{color:var(--gold)}
.mastery{height:7px;border-radius:4px;background:rgba(128,128,128,.18);overflow:hidden;margin-top:4px}
.mastery i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--amber),var(--gold));transition:width .4s}
.deck-card.locked{opacity:.55;cursor:default}
.deck-card.locked:hover{transform:none;border-color:var(--line)}
.deck-card .lock-note{font-size:.78rem;color:var(--dim);font-style:italic}

/* ---- study ------------------------------------------------------------ */
.study-top{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.back-link{color:var(--dim);font-weight:700;font-size:.85rem}
.back-link:hover{color:var(--amber)}
.study-meta{display:flex;gap:14px;align-items:baseline}
#study-deck-title{font-weight:800;color:var(--hd)}
.study-count{font-size:.82rem;color:var(--dim);font-weight:700}
.study-progress{height:5px;border-radius:3px;background:rgba(128,128,128,.18);overflow:hidden;margin-bottom:34px}
#study-bar{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--gold));transition:width .3s}

.flash-stage{perspective:1400px;max-width:680px;margin:0 auto}
.flashcard{cursor:pointer;outline:none}
.fc-inner{position:relative;width:100%;min-height:340px;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.flashcard.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:34px 32px;display:flex;flex-direction:column;gap:14px}
.fc-back{transform:rotateY(180deg);border-color:var(--gold);box-shadow:0 0 34px rgba(174,132,31,.14)}
.fc-label{font-size:.68rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
html[data-theme="pilsner"] .fc-label{color:var(--gold)}
.fc-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;font-size:1.18rem;line-height:1.6;color:var(--hd);font-weight:600}
.fc-content{margin:auto;width:100%;text-align:center;padding:4px 2px}
.fc-content p{margin-bottom:10px}
.fc-content ul{text-align:left;margin-left:22px;font-size:1.02rem;display:inline-block}
.fc-hint{font-size:.74rem;color:var(--dim);text-align:center;font-weight:600;letter-spacing:.06em}

.rate-row{max-width:680px;margin:26px auto 0;text-align:center}
.rate-q{font-weight:800;color:var(--hd);margin-bottom:14px}
.rate-btns{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.rate{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:14px 6px;cursor:pointer;font-family:inherit;color:var(--txt);transition:.15s;display:flex;flex-direction:column;gap:4px;align-items:center}
.rate b{font-size:1.25rem;font-weight:900;color:var(--hd)}
.rate span{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.rate:hover{transform:translateY(-2px)}
.rate.r1:hover{border-color:#c0574f}.rate.r2:hover{border-color:var(--orange)}
.rate.r3:hover{border-color:var(--yellow)}.rate.r4:hover{border-color:var(--amber)}.rate.r5:hover{border-color:var(--gold);box-shadow:0 0 22px rgba(174,132,31,.25)}
.rate-hint{margin-top:12px;font-size:.74rem;color:var(--dim);font-weight:600}
@media(max-width:560px){.rate-btns{gap:6px}.rate{padding:11px 2px}.rate span{font-size:.58rem}.fc-inner{min-height:300px}.fc-body{font-size:1.05rem}}

/* ---- done ------------------------------------------------------------- */
.done-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:26px 0 30px}
.done-stats .s{background:var(--bg-2);padding:20px 10px}
.done-stats b{display:block;font-size:1.9rem;font-weight:900;background:linear-gradient(120deg,var(--yellow),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="pilsner"] .done-stats b{background:linear-gradient(120deg,var(--gold),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.done-stats span{font-size:.72rem;color:var(--dim);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.done-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}