/* Cards, stat tiles, tabs, empty states, the activity feed, training cards,
 * the video shell, toasts and the login sheet. var(--token) only. */

/* ——— Cards & panels ————————————————————————————————————— */
.card{background:var(--paper-2);border:var(--bw-1) solid var(--rule);box-shadow:var(--sh-1)}
.card-h{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);border-bottom:var(--bw-1) solid var(--rule);background:var(--paper-3);
}
.card-h h3{font-size:var(--fs-0);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--ink-2)}
.card-b{padding:var(--sp-5)}
.card-b.tight{padding:var(--sp-0)}

.instructor-mini{
  display:flex;gap:var(--sp-3);align-items:center;
  border:var(--bw-1) solid var(--rule);background:var(--paper-2);padding:var(--sp-3) var(--sp-4);
}
.instructor-mini .nm{font-weight:var(--fw-med)}
.instructor-mini .nm small{
  display:block;font-weight:var(--fw-reg);color:var(--ink-3);
  font-size:var(--fs-0);letter-spacing:var(--track-caps);text-transform:uppercase;
}
.instructor-mini .rating,.instructor-mini .progress-inline,.instructor-mini .muted{margin-left:auto}

/* ——— StatTile row ——————————————————————————————————————— */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--w-stat-min),1fr));
  border:var(--bw-1) solid var(--rule);background:var(--paper-2);
}
.stat{
  display:block;text-align:left;
  background:transparent;border:0;border-right:var(--bw-1) solid var(--rule);
  padding:var(--sp-4) var(--sp-5);color:inherit;text-decoration:none;
}
.stat:last-child{border-right:0}
.stat:hover{background:var(--paper-hi);color:inherit}
.stat .k{font-size:var(--fs-00);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3);display:block}
.stat .v{
  font-family:var(--font-display);font-size:var(--fs-8);line-height:var(--lh-tight);
  font-variant-numeric:tabular-nums lining-nums;display:block;margin-top:var(--sp-2);
}
.stat .x{display:block;color:var(--ink-3);font-size:var(--fs-1);margin-top:var(--sp-1)}
.stat.accent .v{color:var(--accent)}

/* ——— Tabs. Real URLs, server-rendered on first load, HTMX-swapped after. — */
.tabs{display:flex;border-bottom:var(--bw-1) solid var(--rule-ink);margin-bottom:var(--sp-5);overflow-x:auto}
.tab{
  background:transparent;border:0;cursor:pointer;white-space:nowrap;text-decoration:none;
  padding:var(--sp-3) var(--sp-5);
  border-bottom:var(--bw-3) solid transparent;
  margin-bottom:calc(-1 * var(--bw-1));
  color:var(--ink-3);
  font-size:var(--fs-1);font-weight:var(--fw-med);letter-spacing:var(--track-caps);text-transform:uppercase;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tab .cnt{
  font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink-3);
  margin-left:var(--sp-2);letter-spacing:var(--track-flat);
}
.tab[aria-selected="true"] .cnt{color:var(--accent)}

/* ——— EmptyState ————————————————————————————————————————— */
.empty{
  text-align:center;padding:var(--sp-8) var(--sp-5);
  border:var(--bw-1) dashed var(--rule-strong);background:var(--paper-2);
}
.empty > svg{width:var(--sp-7);height:var(--sp-7);color:var(--ink-3);opacity:var(--op-icon)}
.empty p{font-family:var(--font-display);font-size:var(--fs-4);color:var(--ink-2);margin-top:var(--sp-3)}
.empty .sub{font-family:var(--font-ui);font-size:var(--fs-1);color:var(--ink-3);margin-top:var(--sp-2)}
.empty .btnrow{justify-content:center;margin-top:var(--sp-4)}
.empty.compact{padding:var(--sp-5)}

/* ——— Activity feed ————————————————————————————————————— */
.feed{border:var(--bw-1) solid var(--rule);background:var(--paper-2)}
.feed li{
  display:flex;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5);border-bottom:var(--bw-1) solid var(--rule);font-size:var(--fs-2);
}
.feed li:last-child{border-bottom:0}
.feed .tm{flex:0 0 var(--fx-time);font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-3);padding-top:var(--sp-1)}
.feed .ev{flex:1 1 auto;min-width:0}
.feed .ev .who{font-weight:var(--fw-med)}
.feed .ev .where{display:block;color:var(--ink-3);font-size:var(--fs-1)}

/* ——— Training cards (home) ——————————————————————————————— */
.tcards{display:grid;gap:var(--sp-4)}
.tcard{background:var(--paper-2);border:var(--bw-1) solid var(--rule);border-top:var(--bw-3) solid var(--rule-strong)}
.tcard-h{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-4) var(--sp-5) var(--sp-3)}
.tcard-h .ttl{flex:1 1 var(--fx-card);min-width:0}
.tcard-h .ttl h3{
  font-family:var(--font-display);font-size:var(--fs-5);font-weight:var(--fw-reg);
  letter-spacing:var(--track-tight);line-height:var(--lh-tight);
}
.tcard-h .ttl h3 a{color:inherit;border:0}
.tcard-h .ttl h3 a:hover{color:var(--accent)}
.tcard-h .ttl .sub{color:var(--ink-3);font-size:var(--fs-1);margin-top:var(--sp-2)}
.tcard-facts{
  display:flex;flex-wrap:wrap;
  border-top:var(--bw-1) solid var(--rule);border-bottom:var(--bw-1) solid var(--rule);
  background:var(--paper-3);
}
.tcard-facts > div{padding:var(--sp-3) var(--sp-5);border-right:var(--bw-1) solid var(--rule);flex:1 1 var(--fx-fact);min-width:0}
.tcard-facts > div:last-child{border-right:0}
.tcard-facts .k{display:block;font-size:var(--fs-00);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3)}
.tcard-facts .v{
  display:block;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:var(--fs-3);margin-top:var(--sp-1);
}
.tcard-facts .v.txt{font-family:var(--font-ui);font-size:var(--fs-2)}
.tcard-foot{padding:var(--sp-4) var(--sp-5);display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.tcard-private{padding:var(--sp-0) var(--sp-5) var(--sp-5)}

/* ——— VideoPlayer ————————————————————————————————————————— */
.videoshell{border:var(--bw-1) solid var(--rule-ink);background:var(--paper-3);padding:var(--sp-3)}
.videoshell video{display:block;width:100%;height:var(--h-video);background:var(--ink);border:var(--bw-1) solid var(--rule)}
.videoshell .vmeta{
  display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;
  padding-top:var(--sp-3);font-size:var(--fs-1);color:var(--ink-2);
}
.videofallback{
  display:grid;place-items:center;width:100%;height:var(--h-video);
  background:var(--ink);color:var(--ink-invert);text-align:center;padding:var(--sp-5);
}

/* ——— Toast — hx-swap-oob target region ——————————————————— */
.toasts{
  position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:var(--z-toast);
  display:grid;gap:var(--sp-3);max-width:var(--w-toast);
}
.toast{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-3) var(--sp-4);
  background:var(--paper-2);border:var(--bw-1) solid var(--rule-ink);
  border-left:var(--bw-4) solid var(--color-ok);
  box-shadow:var(--sh-2);font-size:var(--fs-2);
  animation:toast-out var(--dur-toast) var(--ease) forwards;
}
.toast.err{border-left-color:var(--color-danger)}
.toast > svg{width:var(--sz-icon-lg);height:var(--sz-icon-lg);color:var(--color-ok);flex:0 0 auto}
.toast.err > svg{color:var(--color-danger)}
@keyframes toast-out{
  0%,90%{opacity:1;visibility:visible}
  100%{opacity:0;visibility:hidden}
}

/* ——— Login ————————————————————————————————————————————— */
.loginwrap{
  min-height:100%;display:grid;grid-template-columns:minmax(0,1fr);
  justify-items:center;align-content:center;padding:var(--sp-8) var(--sp-5);
}
.loginsheet{width:var(--w-modal);max-width:100%;background:var(--paper-2);border:var(--bw-1) solid var(--rule-ink);box-shadow:var(--sh-2)}
.login-h{text-align:center;padding:var(--sp-7) var(--sp-6) var(--sp-5);border-bottom:var(--bw-2) solid var(--rule-ink)}
.login-h .crest{width:calc(var(--w-crest) * 2);height:calc(var(--w-crest) * 2);margin-left:auto;margin-right:auto;display:block}
.login-h h1{
  font-family:var(--font-display);font-size:var(--fs-7);font-weight:var(--fw-reg);
  letter-spacing:var(--track-tight);margin-top:var(--sp-4);
}
.login-h .sub{font-size:var(--fs-0);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3);margin-top:var(--sp-2)}
.login-b{padding:var(--sp-6)}
.login-f{
  padding:var(--sp-4) var(--sp-6);border-top:var(--bw-1) solid var(--rule);background:var(--paper-3);
  text-align:center;font-size:var(--fs-0);color:var(--ink-3);letter-spacing:var(--track-wide);
}

@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-bottom:var(--bw-1) solid var(--rule)}
  .tcard-facts > div{flex:1 1 50%}
  .toasts{left:var(--sp-4);right:var(--sp-4);max-width:none}
  .feed li{flex-direction:column;gap:var(--sp-1)}
  .feed .tm{flex:0 0 auto}
}
@media (max-width:420px){
  .card-b{padding:var(--sp-4)}
}