/* Rift Table — the Academy (academy.js): the list of chapters and lessons, the Home card, and the lesson panel on
   the table (instruction column next to the live board). Uses the tokens of style.css (docs/design.md). */

/* ------------------------------------------------------------------ list view */
.acv{display:flex;flex-direction:column;gap:var(--s6);max-width:1200px;margin:0 auto;padding:var(--s6) var(--s5) var(--s7);min-width:0}
.acv-load{color:var(--ink-2);padding:var(--s7) 0;text-align:center}
.acv-head{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:flex-end;justify-content:space-between;padding-bottom:var(--s5);border-bottom:1px solid var(--hair)}
.acv-intro{flex:1 1 440px;min-width:0}
.acv-intro h1{margin:var(--s2) 0 var(--s3);font:600 var(--fs-5)/1 var(--display);letter-spacing:.005em;color:var(--ink)}
.acv-intro p{margin:0;color:var(--ink-2);font-size:var(--fs-3);line-height:1.55;max-width:64ch}
.acv-sum{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s3);font-size:var(--fs-2);color:var(--ink-2)}
.acv-sum b{color:var(--ink)}
.acv-sum .hbtn.primary{min-height:48px;padding:0 var(--s5);font-size:var(--fs-3)}
.acv-note{flex:1 1 100%;margin:0;font-size:var(--fs-1);color:var(--ink-3)}
.acv-ch{display:flex;flex-direction:column;gap:var(--s3)}
.acv-ch-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--hair)}
.acv-ch-h h2{margin:0;font:600 var(--fs-4)/1.1 var(--display);color:var(--ink)}
.acv-ch-h p{flex:1 1 100%;margin:0;color:var(--ink-2);font-size:var(--fs-2)}
.acv-cnt{font-size:var(--fs-1);color:var(--ink-3);font-variant-numeric:tabular-nums}
.acv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s3)}
.acv-card{display:flex;flex-direction:column;gap:6px;text-align:left;min-height:104px;padding:var(--s3) var(--s4) var(--s4);border-radius:var(--r-lg);border:1px solid var(--hair);
  background:var(--surface);transition:border-color .15s,transform .15s}
.acv-card:hover{border-color:var(--hair-3);transform:translateY(-1px)}
.acv-card.done{border-color:rgba(143,204,160,.35)}
.acv-card.next{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(212,178,106,.5);background:linear-gradient(180deg,rgba(212,178,106,.08),var(--surface) 60%)}
.acv-card.ch{background:linear-gradient(180deg,rgba(212,178,106,.05),var(--surface))}
.acv-top{display:flex;align-items:center;gap:var(--s2);min-height:22px}
.acv-n{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:11px;border:1px solid var(--hair-2);
  font:600 var(--fs-0)/1 var(--ui);color:var(--ink-2);font-variant-numeric:tabular-nums}
.acv-card.done .acv-n{background:rgba(143,204,160,.15);border-color:transparent;color:var(--good)}
.acv-card.next .acv-n{border-color:var(--gold);color:var(--gold-hi)}
.acv-card.ch .acv-n{color:var(--gold-hi)}
.acv-top .ac-stars{margin-left:auto}
.acv-todo{margin-left:auto;font-size:var(--fs-1);color:var(--ink-3)}
.acv-t{font:600 var(--fs-4)/1.1 var(--display);color:var(--ink)}
.acv-g{font-size:var(--fs-1);color:var(--ink-2);line-height:1.45}
/* Home card */
.acv-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.acv-bar{height:6px;margin-top:var(--s2);border-radius:3px;background:rgba(233,223,198,.08);overflow:hidden}
.acv-bar i{display:block;height:100%;border-radius:3px;background:var(--gold)}
.acv-next{margin:0 0 var(--s1);font:600 var(--fs-4)/1.15 var(--display);color:var(--ink)}
.lb-acad .linkbtn{align-self:flex-start}

/* ------------------------------------------------------------------ shared bits */
.ac-stars{color:var(--gold-hi);letter-spacing:1px;font-size:var(--fs-2);white-space:nowrap}
.ac-lvl{display:inline-flex;gap:3px;align-items:center;vertical-align:middle}
.ac-lvl i{width:6px;height:6px;transform:rotate(45deg);border-radius:1px;background:var(--hair-2)}
.ac-lvl i.on{background:var(--gold)}
.ac-rule{font:500 .92em var(--mono);color:var(--gold-hi);white-space:nowrap}
.ac-k{display:block;margin-bottom:var(--s1);font:600 var(--fs-1)/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ------------------------------------------------------------------ lesson panel (side, and #sheetLesson on phones) */
.academy{border-color:rgba(212,178,106,.4);box-shadow:0 0 0 1px rgba(212,178,106,.1)}
.ac-body{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s1) var(--s4) var(--s3);font-size:var(--fs-2);line-height:1.55;color:var(--ink-2)}
.sheet .ac-body{padding:var(--s4) var(--s4) var(--s5)}
.ac-steps{display:flex;gap:var(--s2)}
.ac-steps i{width:28px;height:4px;border-radius:2px;background:var(--hair-2)}
.ac-steps i.done{background:rgba(212,178,106,.5)} .ac-steps i.on{background:var(--gold)}
.ac-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px var(--s2);font:600 28px/1.05 var(--display);color:var(--ink)}
.ac-title .ac-lvl{margin-left:auto}
.ac-badge{font:600 var(--fs-0)/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--on-gold);background:var(--gold);border-radius:4px;padding:4px 6px}
.ac-goal{color:var(--ink)}
.ac-rule-box{border:1px solid var(--hair);border-radius:var(--r);background:rgba(0,0,0,.18);padding:var(--s2) var(--s3);color:var(--ink-2);font-size:var(--fs-2)}
.ac-rule-box summary{cursor:pointer;color:var(--ink);font-size:var(--fs-2);font-weight:500}
.ac-rule-box[open] summary{margin-bottom:6px}
.ac-task{padding:var(--s3) var(--s4);border-radius:var(--r);background:rgba(212,178,106,.09);border:1px solid rgba(212,178,106,.35);color:var(--ink)}
.ac-task::before{--c:var(--gold)}
.ac-task .ac-k{color:var(--gold-hi)}
.ac-fb{padding:var(--s2) var(--s3);border-radius:var(--r);border:1px solid var(--hair-2);color:var(--ink)}
.ac-fb.ok{border-color:rgba(143,204,160,.5);background:rgba(143,204,160,.08)}
.ac-fb.wrong{border-color:rgba(232,131,111,.55);background:rgba(232,131,111,.08)}
.ac-fb.done{border-color:rgba(212,178,106,.6);background:rgba(212,178,106,.1)}
.ac-fb.ok b{color:var(--good)} .ac-fb.wrong b{color:var(--bad)} .ac-fb.done b{color:var(--gold-hi)}
.ac-hint{display:flex;flex-direction:column;padding:var(--s2) var(--s3);border-radius:var(--r);border:1px dashed var(--hair-3);color:var(--ink)}
.ac-acts{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding:0 var(--s4) var(--s4)}
.ac-acts .grow{flex:1}

@media (max-width:720px){
  .acv{gap:var(--s5);padding:var(--s3) var(--s3) var(--s5)}
  .acv-head{padding-bottom:var(--s4)}
  .acv-intro h1{font-size:30px}
  .acv-intro p{font-size:var(--fs-2)}
  .acv-sum{align-items:stretch;width:100%}
  .acv-sum .hbtn{width:100%}
  .acv-grid{grid-template-columns:minmax(0,1fr)}
  .acv-card{min-height:0}
  .ac-title{font-size:24px}
}