/* Class questions (.cq, js/screens/concerns.js) and the parent's card (.cq-her, Dxtr.herQuestions). Dark Dxtr theme,
   rem sizes like base.css; base classes (.tile, .lr, .chip, .seg, .btn) do the rest. Safe for Windows 7 browsers
   (Chrome/Edge 109, Firefox 115): flex/grid gap, no :has, no nesting, no color-mix. On the tablet the body scrolls
   under a fixed head; phones and upright iPads scroll the whole screen (css/phone.css) and get one column. */
.cq{flex:1;min-height:0;display:flex;flex-direction:column;gap:.8rem}
.cq .lcard{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);padding:.9rem 1rem;min-width:0}
.cq-body{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:.8rem;padding-bottom:.6rem}
.cq-body > *{flex:none}
.cq-lede{max-width:54rem}

/* tiles: five across */
.cq-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
.cq-tiles .tile{min-width:0}
.cq-tiles .tile .n{font-size:1.7rem}
.cq-tiles .tile .sm{margin-top:.3rem;font-size:.74rem;line-height:1.3}
.cq-tiles .tile .n.cq-subj{font-size:1.2rem;line-height:1.42;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cq-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1rem;align-items:start}
.cq-side{display:flex;flex-direction:column;gap:1rem;min-width:0}

/* what the class is stuck on */
.cq-legend{display:flex;gap:.25rem .7rem;flex-wrap:wrap;justify-content:flex-end;font-size:.7rem;color:var(--mut);font-weight:700}
.cq-legend i{display:inline-block;width:.6rem;height:.6rem;border-radius:.2rem;margin-right:.3rem;vertical-align:-.04rem}
.cq-topic{padding:.75rem 0;border-top:1px solid var(--hair2)}
.cq-topic.more{display:none}
.cq-main.open .cq-topic.more{display:block}
.cq-main > .btn{margin-top:.4rem}
.cq-tt{display:flex;align-items:center;gap:.6rem}
.cq-rank{width:1.6rem;height:1.6rem;border-radius:.5rem;background:var(--s2);border:1px solid var(--hair);display:grid;place-items:center;font-weight:800;font-size:.78rem;color:var(--gold);flex:none}
.cq-name{font-size:1rem}
.cq-tr{display:inline-flex;align-items:center;gap:.2rem;font-size:.74rem;font-weight:800;color:var(--mut);white-space:nowrap;flex:none}
.cq-tr .ic{width:.95rem;height:.95rem;stroke-width:2.4}
.cq-tr.up{color:var(--clay)}
.cq-tr.down{color:var(--green)}
.cq-tr.new{color:var(--gold)}
.cq-meta{display:flex;align-items:center;gap:.4rem .9rem;flex-wrap:wrap;margin:.35rem 0 0 2.2rem;font-size:.82rem;color:var(--mut)}
.cq-meta b{color:var(--paper)}
.cq-kbar{flex:1;min-width:5rem;max-width:14rem;height:.5rem;border-radius:99px;background:var(--s2);overflow:hidden;display:flex}
.cq-kbar i{display:block;height:100%}
.k-concept{background:var(--gold)}
.k-homework{background:var(--blue)}
.k-other{background:var(--mut2)}
.k-progress{background:var(--violet)}
.k-make{background:var(--pink)}
.cq-ex{list-style:none;margin:.45rem 0 0 2.2rem;padding:0;display:flex;flex-direction:column;gap:.3rem}
.cq-ex li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;font-size:.86rem;line-height:1.4;min-width:0}
.cq-ex q{color:var(--paper);font-style:italic;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.cq-via,.cq-who{font-size:.72rem;font-weight:700;color:var(--mut)}
.cq-who{color:var(--gold)}
.cq-live{font-size:.62rem;padding:.12rem .4rem;box-shadow:none}
.cq-teach{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.55rem 0 0 2.2rem}
.cq-teach .eb{margin-right:.15rem}
.cq-teach .as-act{background:var(--s2);color:var(--paper)}
.cq-note{margin:.3rem 0 .2rem}

/* worth a word, where Dxtr confuses them, everyone */
.cq-kid .t{font-weight:600}
.cq-av{width:1.7rem;height:1.7rem;flex:none}
.cq-av.anon{border-radius:50%;background:var(--s3)}
.cq-av.big{width:2.8rem;height:2.8rem}
.cq-check{margin-left:.3rem;padding:.15rem .45rem;font-size:.68rem;box-shadow:none}
.cq-feel{margin-top:.55rem}
.cq-app{padding:.55rem 0;border-top:1px solid var(--hair2)}
.cq-app:first-of-type{border-top:none}
.cq-app .cq-ex{margin-left:0}
.cq-app .row{gap:.5rem}
.cq-class{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.8rem,1fr));gap:.35rem;margin:.5rem 0}
.cq-kidbtn{display:flex;align-items:center;gap:.35rem;min-width:0;padding:.3rem .45rem;border-radius:.6rem;background:var(--s2);border:1px solid var(--hair2);font-size:.76rem;font-weight:700;text-align:left}
.cq-kidbtn img{width:1.2rem;height:1.2rem;flex:none}
.cq-kidbtn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-kidbtn b{color:var(--gold);font-size:.74rem}
.cq-kidbtn.none{opacity:.55}
.cq-foot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cq-foot > .ic{width:1rem;height:1rem;color:var(--green)}
.cq-foot > span{flex:1;min-width:14rem}

/* one student (a sheet over the screen) */
.cq-panel .tiles{margin-top:.8rem}
.cq-panel .cq-ex{margin-left:0}
.cq-care{margin-top:.6rem;font-size:.88rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

/* a student or parent on the teachers' page */
.cq-not{overflow-y:auto;gap:1rem}
.cq-not > *{flex:none}
.cq-for{max-width:36rem;width:100%;margin:2rem auto 0}

/* the parent's card: complete in itself, wherever it is drawn */
.cq-her{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);padding:.9rem 1rem;max-width:46rem;width:100%;margin:0 auto;min-width:0}
.cq-her h3{margin-top:.15rem;font-size:1.05rem}
/* inside another card (the parent controls' "Her questions"): no second frame */
.lcard .cq-her,.card .cq-her{background:none;border:0;border-radius:0;padding:.4rem 0 0;max-width:none}
.cq-her2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;margin:.6rem 0}
.cq-her .cq-ex{margin-left:0}
.cq-her .cq-tip .t{font-weight:500;font-size:.88rem}
.cq-words{margin-top:.5rem}
.cq-teacher{display:flex;gap:.5rem;align-items:flex-start;margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--hair2)}
.cq-teacher > .ic{width:1rem;height:1rem;margin-top:.12rem;color:var(--green)}

/* narrower than the tablet: no label under 11 px */
@media (max-width:1279px){
  .cq-via,.cq-who,.cq-legend,.cq-tr,.cq-kidbtn,.cq-kidbtn b,.cq-check,.cq-live,.cq-rank{font-size:max(11px,.72rem)}
  .cq-tiles .tile .sm{font-size:max(11px,.74rem)}
}
/* upright iPads and phones: the screen scrolls (css/phone.css), so the body does not scroll on its own */
@media (max-width:1199px) and (orientation:portrait){
  .cq-body{overflow:visible}
  .cq-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .cq-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cq-tiles .tile:first-child{grid-column:1 / -1}
  .cq-grid,.cq-her2{grid-template-columns:minmax(0,1fr)}
  .cq-meta,.cq-ex,.cq-teach{margin-left:0}
  .cq-legend{justify-content:flex-start}
  .cq-foot > span{flex:1 1 100%;min-width:0}
  .cq-teach .as-act{min-height:2.4rem}
}