/* Reusable pieces for the new pages (Dashboard, Practice, Revision, Progress, Admin). Built only from css/tokens.css.
   Preview them all on ui-kit.html. Nothing here changes an existing page until a page uses a class below. */

/* ---- card: the base surface. .card-glow adds a violet edge that wakes on hover ---- */
.card{position:relative;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r-lg);padding:22px;transition:border-color var(--dur),transform var(--dur-slow) var(--ease),box-shadow var(--dur)}
.card-lift:hover{border-color:var(--v2);transform:translateY(-3px)}
.card-glow{overflow:hidden}
.card-glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(260px 160px at var(--mx,50%) var(--my,0%),rgba(var(--v-rgb),.28),transparent 70%);opacity:0;transition:opacity var(--dur);pointer-events:none}
.card-glow:hover::before{opacity:1}
.card-glow:hover{border-color:rgba(var(--v2-rgb),.7);box-shadow:var(--glow-soft)}
.card>*{position:relative}
.card-h{font:500 .9rem var(--hf);color:var(--tx2);margin-bottom:12px}
.card-big{font:600 1.7rem/1.2 var(--hf)}
.card-sub{color:var(--tx2);font-size:.95rem;margin-top:6px}

/* ---- pill: small status label. Four result colours match tokens.css ---- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--bd);background:var(--card);color:var(--tx2);font:500 .8rem var(--hf)}
.pill::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--tx2)}
.pill-ind::before{background:var(--res-ind);border-color:var(--res-ind)}
.pill-ast::before{background:var(--res-ast);border-color:transparent}
.pill-self::before{background:var(--res-self);border-color:var(--v2)}
.pill-need::before{border-style:dashed;border-color:var(--res-need)}
.pill-on{color:var(--tx);border-color:var(--v2)}

/* ---- ring: circular progress. Set --p (0 to 100). Animates when --p changes ---- */
@property --p{syntax:"<number>";inherits:true;initial-value:0}
.ring{--p:0;--s:84px;position:relative;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--v) calc(var(--p)*1%),rgba(var(--v-rgb),.14) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
  transition:--p 1s var(--ease);filter:drop-shadow(0 0 10px rgba(var(--v-rgb),.45))}
.ring-wrap{position:relative;display:inline-grid;place-items:center}
.ring-wrap .ring-t{position:absolute;font:600 1rem var(--hf)}

/* ---- meter: horizontal bar for counts such as "3 of 5". Hatching, not colour alone, marks "needs work" ---- */
.meter{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;font-size:.95rem}
.meter b{font:600 .95rem var(--hf)}
.meter .track{grid-column:1/-1;height:10px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--bd);overflow:hidden}
.meter .fill{display:block;height:100%;width:calc(var(--p,0)*1%);border-radius:inherit;background:var(--v);transition:width var(--dur-slow) var(--ease);box-shadow:0 0 14px rgba(var(--v-rgb),.6)}
.meter-ast .fill{background:var(--res-ast);box-shadow:none}
.meter-need .fill{background:repeating-linear-gradient(135deg,var(--tx2) 0 4px,transparent 4px 8px);box-shadow:none}

/* ---- tile: the small square used for units and questions (same look as the existing .stp / .om) ---- */
.tile{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);border:2px solid var(--bd);background:none;color:var(--tx);font:600 1rem var(--hf);transition:background var(--dur),border-color var(--dur),box-shadow var(--dur)}
.tile-ind{background:var(--res-ind);border-color:var(--v);color:var(--bg)}
.tile-ast{background:var(--res-ast);border-color:transparent}
.tile-self{background:var(--res-self);border-color:var(--v2)}
.tile-need{border-style:dashed;border-color:var(--res-need)}
.tile-on{border-color:var(--v2);box-shadow:var(--glow-ring)}

/* ---- layout helpers ---- */
.grid-auto{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.stack{display:grid;gap:14px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.eyebrow{color:var(--v2);font:500 .85rem var(--hf);letter-spacing:.02em}

/* ---- skeleton: shown while data loads (later: while the server answers) ---- */
.skel{border-radius:var(--r-sm);background:linear-gradient(100deg,var(--bg2) 30%,var(--card) 50%,var(--bg2) 70%);background-size:200% 100%;animation:skel 1.4s linear infinite}
@keyframes skel{to{background-position:-200% 0}}

/* ---- scroll reveal. js/motion.js adds .mo to <html> only when motion is allowed, so without it everything just shows ---- */
.mo [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*var(--stagger))}
.mo [data-reveal].in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .skel{animation:none}
  .mo [data-reveal]{opacity:1;transform:none;transition:none}
  .ring,.meter .fill{transition:none}
}