/* ============================================================
   The other tabs. Chat stays primary, but every function has a
   surface of its own for the people who would rather click.
   ============================================================ */
.chatwrap{flex:1;min-height:0;display:flex;flex-direction:row}
.chatmain{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}

/* ---- the route through a learning ---- */
.prog{flex-direction:column;align-items:stretch;gap:9px}
.progtop{display:flex;align-items:center;gap:14px}
/* Ask about this, in the app bar. It sits where the tour link sits because
   they are the same kind of thing: the one useful action for wherever you are. */
.barask{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--link);
  border:1px solid var(--hair);border-radius:99px;padding:6px 12px 6px 10px;white-space:nowrap;
  flex-shrink:0}
.barask svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.barask:hover{border-color:var(--link);background:var(--sel)}
.barask.on{border-color:var(--link);background:var(--sel)}

/* The fold on the named steps. Drawn as a chevron rather than a word, because
   the word would be the fourth thing competing for one row on a phone. */
.stepsx{display:none;flex-shrink:0;width:26px;height:26px;border-radius:8px;
  align-items:center;justify-content:center}
.stepsx:after{content:"";width:7px;height:7px;margin-top:-3px;
  border-right:1.9px solid var(--muted);border-bottom:1.9px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s}
.prog.stepsopen .stepsx:after{transform:rotate(-135deg);margin-top:2px}
.stepsx:active{background:var(--hair)}
/* One pip per step, named. A bar alone answers how far along, which is the
   question nobody has. What is next is the question everybody has. */
.steps{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.steps::-webkit-scrollbar{display:none}
.steps button{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--muted);border:1px solid var(--hair);border-radius:99px;padding:4px 10px;white-space:nowrap}
.steps button .dot{width:6px;height:6px;border-radius:99px;background:var(--hair);flex:0 0 auto}
.steps button.done{color:var(--body)}
.steps button.done .dot{background:var(--ok)}
.steps button.on{color:var(--head);border-color:var(--link);background:var(--sel)}
.steps button.on .dot{background:var(--grad)}
.steps button.locked{opacity:.55;cursor:default}
.steps button:not(.locked):hover{border-color:var(--link);color:var(--head)}

/* ---- ask about this ---- */
.askside{flex:0 0 340px;min-width:0;display:flex;flex-direction:column;
  border-left:1px solid var(--hair);background:var(--panel)}
.askhead{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:12px 10px 12px 16px;
  border-bottom:1px solid var(--hair)}
.askhead span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.askhead b{font-size:13px;color:var(--head)}
.askhead em{font-style:normal;font-size:11.5px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.askthread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px;
  display:flex;flex-direction:column;gap:14px}
.askthread .aq{align-self:flex-end;max-width:92%;background:var(--card);border-radius:12px 12px 3px 12px;
  padding:8px 12px;font-size:13px;color:var(--head)}
.askthread .aa{font-size:13.5px;line-height:1.62;color:var(--body)}
.askthread .aa p{margin:0 0 9px}
.askthread .aa p:last-child{margin:0}
.askthread .aa .say{font-size:inherit;color:inherit;margin:0 0 9px}
.askthread .anote{font-size:11.5px;color:var(--muted)}
.askempty{font-size:12.5px;line-height:1.65;color:var(--muted)}
.askempty b{color:var(--body)}
.askdock{flex-shrink:0;padding:10px 12px 12px;border-top:1px solid var(--hair)}
.composer.sm{padding:6px 6px 6px 12px}
.composer.sm textarea{font-size:13px;max-height:110px}
.composer.sm .sendb{width:30px;height:30px}
.askhint{font-size:11px;color:var(--muted);text-align:center;margin-top:7px;line-height:1.5}

/* Below a laptop the side chat is a sheet over the lesson rather than a column
   beside it, because 340px of a phone is the whole screen. */
@media (max-width:1100px){
  .askside{position:absolute;inset:0;z-index:40;flex:1 1 auto;border-left:0}
}

/* ---------- the You tab ---------- */
.wk{display:flex;gap:7px;margin:4px 0 10px}
.wk i{flex:1;aspect-ratio:1;max-height:52px;border-radius:10px;background:var(--hair);display:grid;
  place-items:center;font-size:12px;font-weight:800;color:var(--muted);font-style:normal}
.wk i.on{background:var(--grad);color:#000}
.wk i.pend{background:none;border:1.5px dashed var(--hair)}
.wk i.prot{background:none;border:1.5px solid var(--muted);color:var(--muted);font-size:10px}
.bignum{display:flex;align-items:baseline;gap:9px;margin-bottom:2px}
.bignum b{font-size:30px;font-weight:800;color:var(--head);letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.bignum span{font-size:13px;font-weight:700;color:var(--muted)}
.arow{padding:10px 0;border-bottom:1px solid var(--hair)}
.arow:last-of-type{border-bottom:none}
.ahead{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.ahead b{flex:1;min-width:0;font-size:13.5px;color:var(--head);font-weight:700;line-height:1.3}
.ahead .n{font-size:14px;font-weight:800;color:var(--head);font-variant-numeric:tabular-nums}
.ahead .mv{font-size:11px;font-weight:800;color:var(--ok)}
.ahead .mv.dn{color:var(--red)}
.sbar{display:block;position:relative;height:6px;border-radius:99px;background:var(--hair);width:100%}
.sbar>i{display:block;height:100%;border-radius:99px;background:var(--grad)}
.sbar>i.low{background:var(--red)}
.sbar>u{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--muted);
  opacity:.55;text-decoration:none}
.recl{display:grid}
.recl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--hair);font-size:13px;align-items:baseline}
.recl div:last-child{border-bottom:none}
.recl b{color:var(--head);font-weight:700;line-height:1.35}
.recl span{color:var(--muted);font-size:11.5px;white-space:nowrap;font-weight:600}
.qp{margin-bottom:11px}
.qp:last-child{margin-bottom:0}
.qph{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.qph b{flex:1;font-size:13px;color:var(--head);font-weight:700}
.qph span{font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.bandbar{position:relative;height:28px;border-radius:9px;margin:10px 0 7px;background:linear-gradient(90deg,
  var(--hair) 0%,var(--hair) 33%,rgba(253,183,69,.35) 33%,rgba(253,183,69,.35) 66%,
  rgba(238,47,76,.28) 66%,rgba(238,47,76,.28) 100%)}
.bandbar u{position:absolute;top:-4px;bottom:-4px;width:3px;border-radius:3px;background:var(--head);
  text-decoration:none}
.bandlab{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase}
.tgt{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:10px}
.tgt button{font-size:13px;font-weight:700;border:1.5px solid var(--hair);border-radius:999px;
  padding:7px 14px;color:var(--head)}
.tgt button:hover{border-color:var(--red);color:var(--red)}
.tgt button.on{background:var(--grad);color:#000;border-color:transparent}
.ygrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:900px){.ygrid{grid-template-columns:1fr}}
.ycol{display:flex;flex-direction:column;gap:16px;min-width:0}