/* M3 pages: Dashboard (My study), Revision, Practice sessions. Built from tokens.css and components.css. */

/* dashboard: three cards, the first one is the wide one */
.dgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:14px;margin-bottom:44px}
.dc{display:flex;flex-direction:column;min-height:210px}
.dc .card-big.sm{font-size:1.3rem}
.dc-act{margin-top:auto;padding-top:18px}
.dc-main .btn,.dc .btn{align-self:flex-start;margin-top:auto}
.tilerow{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.tilerow .tile{width:40px;height:40px;text-decoration:none;font-size:.95rem}
.tilerow a.tile:hover{border-color:var(--v2)}
.helplist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:.95rem;color:var(--tx2)}
.crows{display:grid;gap:12px;max-width:820px;margin-bottom:6px}
.crow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 20px;text-decoration:none}
.crow h3{font:600 1.15rem/1.3 var(--hf)}
.crow-main p{color:var(--tx2);font-size:.9rem;margin-top:2px}
.crow-go{color:var(--v2);font-size:1.3rem;transition:transform var(--dur) var(--ease)}
.crow:hover .crow-go{transform:translateX(4px)}
.crow .ring-t{font-size:.8rem}
.sec-label{margin-top:34px}
.sec-label:first-of-type{margin-top:0}
.note.nm{margin:0 0 14px}

/* revision rows (also used for extra practice and the session chooser) */
.qrows{display:grid;gap:12px;max-width:820px}
.qrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px 16px;align-items:center;padding:14px 18px}
.qrow .tile{font-style:normal}
.qr-main h3{font:600 1.1rem/1.3 var(--hf)}
.qr-main p{color:var(--tx2);font-size:.88rem;margin-top:2px}
.qr-st{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.qrow.is-done{opacity:.8}
.demo{margin-top:46px;max-width:820px;padding:14px 18px;border:1px dashed var(--bd);border-radius:var(--r-lg)}
.demo summary{cursor:pointer;font:600 1rem var(--hf);color:var(--v2)}
.demo-day{margin:0 0 12px;font-size:.92rem}
.qpanel .pill{margin-bottom:10px}

@media(max-width:900px){.dgrid{grid-template-columns:1fr 1fr}.dc-main{grid-column:1/-1}}
@media(max-width:600px){
  .dgrid{grid-template-columns:1fr}
  .dc{min-height:0}
  .qrow{grid-template-columns:auto minmax(0,1fr)}
  .qrow>:nth-child(n+3){grid-column:2;justify-self:start}
  .qrow>span:empty{display:none}
  .qr-st{justify-content:flex-start}
  .crow{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .crow-go{display:none}
}

/* M4: Progress page */
.pg-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:10px}
.pg-sum .meter{margin:14px 0 6px;font-size:.88rem;color:var(--tx2)}
.pg-sum .meter b{display:none}
.pg-chaps{display:grid;gap:14px;max-width:820px}
.pg-top{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.pg-top h3{font:600 1.25rem/1.3 var(--hf)}
.pg-meters{display:grid;gap:14px;margin:16px 0 4px}
.pg-pills{gap:8px}
.tile{position:relative}
.tile .rd{right:-5px;top:-5px}
.sec-label.sub{font-size:1rem;color:var(--tx2);margin-top:26px}
.pg-empty{max-width:820px;margin-bottom:6px}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;height:150px;margin:14px 0 8px;max-width:520px}
.wk-d{display:grid;grid-template-rows:18px 1fr auto;gap:6px;height:100%;justify-items:center;text-align:center;font-size:.78rem;color:var(--tx2)}
.wk-d b{font:600 .8rem var(--hf);color:var(--tx)}
.wk-d i{align-self:end;width:min(34px,100%);height:calc(var(--h,0)*1%);min-height:3px;border-radius:8px 8px 3px 3px;background:var(--v);box-shadow:0 0 14px rgba(var(--v-rgb),.5);transform-origin:bottom;animation:grow .8s var(--ease) both}
@keyframes grow{from{transform:scaleY(0)}}
@media(prefers-reduced-motion:reduce){.wk-d i{animation:none}}
@media(max-width:900px){.pg-sum{grid-template-columns:1fr}.pg-sum .meter b{display:none}}

/* numerical answer field (unit page and practice sessions) */
.numrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.numin{flex:1 1 200px;min-width:0;height:48px;padding:0 16px;border-radius:var(--r-md);border:1px solid var(--bd);background:var(--bg);color:var(--tx);font:500 1.05rem var(--bf)}
.numin:focus{border-color:var(--v2);outline:none;box-shadow:var(--glow-ring)}
.numin:disabled{opacity:.7}