/* study.css — doubts (student + teacher) and the library with flashcards.
   Agent S3. Builds only on tna.css tokens and components; phone-first (390px). */

.study-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) 360px;align-items:start}
.study-grid>*{min-width:0}
.study-note{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-14);color:var(--ink-2)}
.study-note .ico{color:var(--brand-700);flex:none;margin-top:1px}
.subj{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:6px;font:600 var(--t-12)/1 var(--f-display);background:var(--brand-50);color:var(--brand-800);white-space:nowrap}
.subj .ico-sm{width:14px;height:14px}
.age{display:inline-flex;align-items:center;gap:4px;font:600 var(--t-12)/1.2 var(--f-display);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.age.old{color:var(--warn)}

/* ---------- ask composer ---------- */
.ask .sheet-body{display:grid;gap:14px}
.ask-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:end}
.ask-top .field{margin:0}
.ask .textarea{min-height:112px}
.ask-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ask-tools .chip{height:40px}
.ask-tools .chip .ico-sm{color:var(--brand-700)}
.ask-tools .chip[aria-pressed="true"] .ico-sm{color:inherit}
.ask-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px dashed var(--line)}
.ask-foot .study-note{flex:1 1 220px}
.ask-foot .btn{margin-left:auto}
.ask .field .err{display:none}
.ask .field.has-err .err{display:flex}
.ask .field.has-err .textarea{border-color:var(--danger)}

/* the photographed book page (drawn, not a real image) */
.photo{position:relative;display:inline-flex;gap:12px;align-items:center;padding:8px 10px 8px 8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);max-width:100%}
.photo svg.page{width:72px;height:88px;flex:none;border-radius:6px;box-shadow:var(--sh-1)}
.photo .who small{white-space:normal}
.photo .icon-btn{margin-left:4px}
.photo[hidden]{display:none}
.photo.in{animation:photo-in 260ms var(--ease)}
@keyframes photo-in{from{opacity:0;transform:scale(.94) rotate(-2deg)}to{opacity:1;transform:none}}
.thumb{display:inline-block;width:56px;height:68px;flex:none;border-radius:6px;box-shadow:var(--sh-1);vertical-align:top}
svg.page .pg{fill:var(--sheet);stroke:var(--line-2)}
svg.page .ln{fill:var(--brand-200)}
svg.page .ln.dk{fill:var(--d3)}
svg.page .fig{fill:none;stroke:var(--d3);stroke-width:1.4}
svg.page .hl{fill:var(--accent-100)}
svg.page .bg{fill:var(--paper-2)}

/* ---------- a doubt in the list ---------- */
.doubts{list-style:none;margin:0;padding:0}
.doubt{padding:16px 20px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.doubt:last-child{border-bottom:0}
.doubt[hidden]{display:none}
.doubt-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doubt-top .ch{font-size:var(--t-14);color:var(--ink-2);min-width:0}
.doubt-top .end{margin-left:auto;display:flex;align-items:center;gap:8px}
.doubt .q{font-size:var(--t-16);color:var(--ink-1);line-height:1.55}
.doubt .q-row{display:flex;gap:12px;align-items:flex-start}
.doubt .q-row .q{flex:1;min-width:0}
.doubt .meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--t-12);color:var(--ink-2)}
.doubt .meta span,.doubt .meta a{display:inline-flex;align-items:center;gap:5px}
.doubt.is-new{animation:doubt-in 320ms var(--ease)}
@keyframes doubt-in{from{opacity:0;transform:translateY(-8px);background:var(--accent-50)}to{opacity:1;transform:none;background:transparent}}
.doubt-acts{display:flex;flex-wrap:wrap;gap:8px}
.doubt-acts .is-done{color:var(--success);border-color:#bfdccb;background:var(--success-bg)}
.followup{display:grid;gap:10px;padding:12px;border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--paper)}
.followup[hidden]{display:none}
.followup .row{justify-content:flex-end}

/* teacher's reply in pen: a ruled answer sheet with the red margin */
.pen-reply{position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:var(--sheet);overflow:hidden;
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,var(--brand-50) 27px 28px);background-position:0 46px}
.pen-reply::before{content:"";position:absolute;top:0;bottom:0;left:36px;width:2px;background:var(--margin-rule)}
.pen-reply>*{position:relative}
.pen-head{display:flex;align-items:center;gap:10px;padding:10px 14px 6px 48px;flex-wrap:wrap}
.pen-head .who b{font-size:var(--t-14)}
.pen-head .end{margin-left:auto}
.pen-body{padding:4px 16px 12px 48px;display:grid;gap:10px}
.pen-body p{font-size:var(--t-16);line-height:1.75;color:var(--brand-900)}
.pen-u{background:linear-gradient(transparent 84%,var(--accent-500) 84%,var(--accent-500) 94%,transparent 94%);padding:0 1px;font-weight:600;color:var(--brand-900);text-decoration:none}
.margin-note{display:flex;gap:8px;align-items:flex-start;margin:2px 0 0;padding:8px 10px;border:1.5px solid var(--accent-200);border-radius:10px 14px 12px 8px;background:var(--accent-50);color:var(--accent-700);font:600 var(--t-14)/1.45 var(--f-display);transform:rotate(-.6deg);max-width:44ch}
.margin-note .ico-sm{flex:none;margin-top:2px}
.pen-tick{position:absolute;left:8px;top:12px;width:22px;height:22px;color:var(--accent-500)}
.pen-tick path{stroke-dasharray:40;stroke-dashoffset:0;animation:tick-draw 380ms var(--ease) 120ms both}
@keyframes tick-draw{from{stroke-dashoffset:40}}

/* voice note row */
.voice{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid var(--line);max-width:420px}
.voice .play{width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--brand-900);color:var(--on-brand);cursor:pointer;flex:none}
.voice .play:focus-visible{box-shadow:var(--focus)}
.voice .wave{flex:1;display:flex;align-items:center;gap:2px;height:28px;min-width:0;overflow:hidden}
.voice .wave i{display:block;width:3px;border-radius:2px;background:var(--d2);flex:none}
.voice .wave i.on{background:var(--brand-900)}
.voice .dur{font:600 var(--t-12)/1 var(--f-display);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- batch FAQ ---------- */
.faq{list-style:none;margin:0;padding:0}
.faq>li{border-bottom:1px solid var(--line)}
.faq>li:last-child{border-bottom:0}
.faq details>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:14px 20px;align-items:start}
.faq details>summary::-webkit-details-marker{display:none}
.faq summary b{font-weight:600;color:var(--ink-1);line-height:1.45}
.faq summary .ico-sm{color:var(--ink-3);margin-top:3px;transition:transform var(--dur) var(--ease)}
.faq details[open] summary .ico-sm{transform:rotate(180deg)}
.faq summary small{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--t-12);color:var(--ink-2)}
.faq summary:hover b{color:var(--brand-900)}
.faq summary:focus-visible{box-shadow:inset var(--focus);outline:0}
.faq .ans{padding:0 20px 16px;font-size:var(--t-14);line-height:1.6;color:var(--ink-1);display:grid;gap:8px}
.faq .ans .by{font-size:var(--t-12);color:var(--ink-2)}
.eq{font-family:var(--f-display);font-weight:600;color:var(--brand-900);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- teacher inbox ---------- */
.inbox-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line)}
.inbox-tools .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
.inbox-tools .chip{white-space:nowrap}
.chip .n{font:600 var(--t-12)/1 var(--f-display);opacity:.75;font-variant-numeric:tabular-nums}
.chapter{border-bottom:1px solid var(--line)}
.chapter:last-child{border-bottom:0}
.chapter[hidden]{display:none}
.chapter-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 20px 4px}
.chapter-h h3{font-size:var(--t-16)}
.chapter-h .n{font:600 var(--t-12) var(--f-display);color:var(--ink-2)}
.same-ask{margin:8px 20px 4px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r-md);background:var(--brand-50);border:1px solid var(--brand-200);font-size:var(--t-14);color:var(--brand-900)}
.same-ask .ico{flex:none}
.same-ask p{flex:1 1 240px}
.same-ask b{font-weight:650}
.dq{padding:14px 20px;display:grid;gap:10px}
.dq+.dq{border-top:1px dashed var(--line)}
.dq[hidden]{display:none}
.dq .who b{font-size:var(--t-16)}
.dq-top{display:flex;align-items:center;gap:10px}
.dq-top .end{margin-left:auto;display:flex;gap:8px;align-items:center}
.dq .q{font-size:var(--t-16);line-height:1.55;color:var(--ink-1)}
.dq .q-row{display:flex;gap:12px;align-items:flex-start}
.dq .q-row .q{flex:1;min-width:0}
.dq-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dq.is-open{background:var(--paper)}
.reply{display:grid;gap:10px;padding:14px;border-radius:var(--r-md);background:var(--sheet);border:1px solid var(--line-2);box-shadow:var(--sh-1)}
.reply[hidden]{display:none}
.reply .textarea{min-height:120px}
.reply .chips .chip{height:38px}
.reply .chips .chip .ico-sm{color:var(--brand-700)}
.reply .chip.rec{background:var(--danger-bg);border-color:#ecc2c2;color:var(--danger)}
.reply .chip.rec .ico-sm{color:var(--danger)}
.reply .chip.got{background:var(--success-bg);border-color:#bfdccb;color:var(--success)}
.reply .chip.got .ico-sm{color:var(--success)}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.reply-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.reply .err{display:none;font-size:var(--t-12);color:var(--danger);align-items:center;gap:6px}
.reply.has-err .err{display:flex}
.reply.has-err .textarea{border-color:var(--danger)}
.answered>li{align-items:flex-start}
.answered .who{align-items:flex-start}
.answered .who small{white-space:normal}
.answered li.is-new{animation:doubt-in 320ms var(--ease)}

/* ---------- library ---------- */
.lib-tools{display:grid;gap:12px;margin-bottom:20px}
.lib-tools .row{gap:10px;flex-wrap:wrap;align-items:center}
.lib-tools .input-icon{flex:1 1 260px}
.lib-tools .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px}
.lib-tools .chip{white-space:nowrap}
.resume{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:center;padding:16px;margin-bottom:20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--sheet);box-shadow:var(--sh-2)}
.resume h2{font-size:var(--t-18);margin-bottom:4px}
.resume p{font-size:var(--t-14);color:var(--ink-2)}
.resume .vmeter{margin-top:12px}
.board-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--brand-950);border:0;padding:0;cursor:pointer;width:100%}
.board-thumb>svg{position:absolute;inset:0;width:100%;height:100%}
.board-thumb svg .chalk{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.6;stroke-linecap:round}
.board-thumb svg .chalk-t{fill:rgba(255,255,255,.6)}
.board-thumb svg .chalk-o{fill:none;stroke:var(--accent-400);stroke-width:1.8;stroke-linecap:round}
.board-thumb .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--brand-900);display:grid;place-items:center;box-shadow:var(--sh-2);transition:transform var(--dur) var(--ease)}
.board-thumb:hover .pl{transform:translate(-50%,-50%) scale(1.06)}
.board-thumb:focus-visible{box-shadow:var(--focus);outline:0}
.board-thumb .ts{position:absolute;right:8px;bottom:8px;padding:2px 6px;border-radius:5px;background:rgba(7,26,51,.82);color:var(--on-brand);font:600 11px/1.4 var(--f-display);font-variant-numeric:tabular-nums}
.vmeter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;font-size:var(--t-12);color:var(--ink-2)}
.vmeter .meter{height:6px}
.vmeter .meter>i{background:var(--accent-500)}
.vmeter.done .meter>i{background:var(--success)}
.vmeter b{font:600 var(--t-12) var(--f-display);color:var(--brand-900);font-variant-numeric:tabular-nums}

.new-row{list-style:none;margin:0;padding:4px 20px 16px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x proximity}
.new-row>li{scroll-snap-align:start;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);min-width:0}
.new-row b{display:block;font-weight:600;color:var(--ink-1);line-height:1.35}
.new-row small{display:block;font-size:var(--t-12);color:var(--ink-2);margin-top:2px}
.new-row a,.new-row button.lnk{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;margin-top:8px;font:600 var(--t-14) var(--f-display);color:var(--brand-800);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-500)}
.new-row a:focus-visible,.new-row button.lnk:focus-visible{box-shadow:var(--focus);border-radius:4px}

.kind{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--brand-50);color:var(--brand-800)}
.kind.k-video{background:var(--brand-900);color:var(--on-brand)}
.kind.k-sheet{background:var(--paper-2);color:var(--brand-900)}
.kind.k-ncert{background:var(--accent-50);color:var(--accent-700)}
.kind.k-cards{background:#ece5f3;color:#4a3470}

.subject-block{margin-bottom:20px}
.subject-block[hidden]{display:none}
.subject-block>.sheet-head h2{display:flex;align-items:center;gap:8px}
.chap{border-top:1px solid var(--line)}
.chap[hidden]{display:none}
.chap>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 20px;font:600 var(--t-16) var(--f-display);color:var(--brand-900)}
.chap>summary::-webkit-details-marker{display:none}
.chap>summary .n{margin-left:auto;font:500 var(--t-12) var(--f-body);color:var(--ink-2);white-space:nowrap}
.chap>summary .ico-sm{color:var(--ink-3);transition:transform var(--dur) var(--ease);flex:none}
.chap[open]>summary .ico-sm{transform:rotate(180deg)}
.chap>summary:hover{background:var(--paper)}
.chap>summary:focus-visible{box-shadow:inset var(--focus);outline:0}
.items{list-style:none;margin:0;padding:0 0 8px}
.item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 20px}
.item[hidden]{display:none}
.item+.item{border-top:1px dashed var(--line)}
.item .t b{display:block;font-weight:600;color:var(--ink-1);line-height:1.35}
.item .t small{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:var(--t-12);color:var(--ink-2);margin-top:2px}
.item .t .pill{margin-top:6px}
.item .t .vmeter{margin-top:8px;max-width:340px}
.item .go{display:flex;gap:6px}
.yt{display:flex;gap:10px;align-items:flex-start;padding:12px 20px 16px;border-top:1px solid var(--line);font-size:var(--t-14);color:var(--ink-2)}
.yt .ico{color:var(--brand-700);flex:none}
.yt b{color:var(--ink-1);font-weight:600}

/* ---------- flashcards ---------- */
.deck .sheet-body{display:grid;gap:14px}
.deck-meta{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;font-size:var(--t-14);color:var(--ink-2)}
.deck-meta b{color:var(--brand-900);font-family:var(--f-display);font-variant-numeric:tabular-nums}
.fcard{all:unset;display:block;cursor:pointer;perspective:1000px;min-height:230px;border-radius:var(--r-md)}
.fcard:focus-visible{box-shadow:var(--focus)}
.fc-in{position:relative;display:grid;min-height:230px;transition:transform 360ms var(--ease);transform-style:preserve-3d}
.fcard.flipped .fc-in{transform:rotateY(180deg)}
.fc-face{grid-area:1/1;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px 44px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--sheet);box-shadow:var(--sh-2);backface-visibility:hidden;-webkit-backface-visibility:hidden;position:relative;overflow:hidden;
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,var(--brand-50) 27px 28px);background-position:0 40px}
.fc-face::before{content:"";position:absolute;top:0;bottom:0;left:30px;width:2px;background:var(--margin-rule)}
.fc-face>*{position:relative}
.fc-front{justify-content:center}
.fc-front .term{font:700 var(--t-24)/1.25 var(--f-display);color:var(--brand-900);letter-spacing:-.01em}
.fc-front .hint{font-size:var(--t-12);color:var(--ink-2);display:inline-flex;gap:6px;align-items:center;margin-top:auto}
.fc-back{transform:rotateY(180deg)}
.fc-back .term{font:600 var(--t-14) var(--f-display);color:var(--accent-700)}
.fc-back .fc-text{display:block;font-size:var(--t-14);line-height:1.75;color:var(--ink-1)}
.fc-num{position:absolute;top:12px;right:14px;font:600 var(--t-12) var(--f-display);color:var(--ink-3);font-variant-numeric:tabular-nums}
.fc-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fc-acts .btn{width:100%}
.fc-done{display:grid;gap:10px;justify-items:center;text-align:center;padding:24px 12px;border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--paper)}
.fc-done[hidden]{display:none}
.fc-done .seal{transform:rotate(-6deg)}
.fc-bar{display:flex;gap:3px}
.fc-bar i{flex:1;height:6px;border-radius:3px;background:var(--paper-2)}
.fc-bar i.k{background:var(--success)}
.fc-bar i.a{background:var(--accent-400)}
.fc-bar i.c{box-shadow:inset 0 0 0 1.5px var(--brand-900)}

/* recording placeholder in the player dialog */
.player-box{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--brand-950);display:grid;place-items:center;text-align:center;color:var(--on-brand-2);padding:20px}
.player-box>svg{position:absolute;inset:0;width:100%;height:100%}
.player-box svg .chalk{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.6;stroke-linecap:round}
.player-box p{position:relative;font:600 var(--t-16)/1.5 var(--f-display);color:var(--on-brand)}
.player-box small{position:relative;display:block;font:400 var(--t-14) var(--f-body);color:var(--on-brand-2);margin-top:4px}
.player-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:14px}
.player-bar .meter>i{background:var(--accent-500)}
.player-bar span{font:600 var(--t-12) var(--f-display);color:var(--ink-2);font-variant-numeric:tabular-nums}
.dlg-head h2{font-size:var(--t-18)}
.dlg-head .icon-btn{margin-left:auto}

/* ---------- phones ---------- */
@media (max-width:1180px){
  .study-grid{grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:920px){
  .study-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  body:has(.sticky-cta) .content{padding-bottom:168px}
  .ask-top{grid-template-columns:minmax(0,1fr)}
  .ask-top .seg{width:100%}
  .ask-top .seg button{flex:1;justify-content:center}
  .ask-foot .btn{width:100%;margin-left:0}
  .doubt{padding:14px 16px}
  .doubt-top .end{margin-left:0;width:100%}
  .pen-reply::before{left:24px}
  .pen-tick{left:2px;width:18px;height:18px}
  .pen-head{padding-left:34px}
  .pen-body{padding:2px 12px 12px 34px}
  .faq details>summary{padding:14px 16px}
  .faq .ans{padding:0 16px 16px}
  .inbox-tools{padding:12px 16px}
  .chapter-h{padding:14px 16px 4px}
  .same-ask{margin:8px 16px 4px}
  .same-ask .btn{width:100%}
  .dq{padding:14px 16px}
  .dq-top{flex-wrap:wrap}
  .dq-top .end{margin-left:46px;width:100%}
  .reply{padding:12px}
  .reply-foot .btn{width:100%}
  .resume{grid-template-columns:minmax(0,1fr);padding:12px}
  .new-row{padding:4px 16px 16px;grid-auto-columns:minmax(232px,82%)}
  .chap>summary{padding:14px 16px}
  .item{grid-template-columns:40px minmax(0,1fr);padding:10px 16px}
  .item .go{grid-column:2}
  .yt{padding:12px 16px 16px}
  .fc-face{padding-left:40px}
  .fc-face::before{left:26px}
}

/* teacher inbox head: tabs sit on the sheet's top edge */
.inbox-head{padding:4px 12px 0;border-bottom:1px solid var(--line)}
.inbox-head .tabs{margin:0;border-bottom:0}
.tips{display:grid;gap:12px}
@media (max-width:640px){.inbox-head{padding:4px 4px 0}}
.fcard[hidden],.fc-acts[hidden]{display:none}
.fc-done .glyph{width:48px;height:48px;border-radius:14px;background:var(--success-bg);color:var(--success);display:grid;place-items:center}
.fc-done b{font:600 var(--t-16) var(--f-display);color:var(--brand-900)}
@media (max-width:640px){
  .ask-top .seg button{padding:0 8px;gap:4px}
  #mine-filter{width:100%;display:flex}
  #mine-filter button{flex:1;justify-content:center;padding:0 6px;font-size:var(--t-12)}
  .sheet-head .end:has(#mine-filter){width:100%}
}
@media (max-width:400px){.ask-top .seg .ico-sm{display:none}}
.sheet-foot>span{display:inline-flex;align-items:flex-start;gap:6px}