.train-root{background:radial-gradient(1200px 480px at 85% -8%,var(--wh-indigo-muted,#3b82f61a),transparent 70%),var(--wh-bg);flex-direction:column;flex:1;animation:.3s trainFadeIn;display:flex}.train-content{padding:18px 22px 28px}@keyframes trainFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.train-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;display:grid}.train-card{--st:var(--wh-text-muted);--st-soft:color-mix(in srgb,var(--wh-text-muted)14%,transparent);background:var(--wh-surface);border-radius:var(--wh-radius-card,18px);border:1px solid var(--wh-border,#0f172a14);box-shadow:var(--wh-shadow-card,0 0 2px #0000000a,0 1px 4px #0000000f);cursor:pointer;appearance:none;text-align:left;font:inherit;color:inherit;flex-direction:column;width:100%;margin:0;padding:0;transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;position:relative;overflow:hidden}.train-card:hover{box-shadow:var(--wh-shadow-lg,0 10px 24px #00000014);border-color:color-mix(in srgb,var(--st)45%,var(--wh-border));transform:translateY(-4px)}.train-card:focus-visible{outline:2px solid var(--wh-indigo);outline-offset:2px}.train-card:before{content:"";background:var(--st);opacity:0;width:3px;transition:opacity .18s;position:absolute;inset:0 auto 0 0}.train-card:hover:before,.train-card.train-st--in-progress:before,.train-card.train-st--completed:before,.train-card.train-st--failed:before{opacity:.9}.train-media{justify-content:center;align-items:center;height:116px;display:flex;position:relative;overflow:hidden}.train-media--ph{background:radial-gradient(120px 90px at 30% 20%,color-mix(in srgb,var(--wh-indigo)16%,transparent),transparent 70%),color-mix(in srgb,var(--wh-indigo)7%,var(--wh-surface));border-bottom:1px solid var(--wh-border-subtle,#0f172a0a)}.train-media-glyph{background:var(--wh-surface);box-shadow:var(--wh-shadow-sm,0 1px 2px #0000000d);border:1px solid var(--wh-border,#0f172a14);border-radius:16px;justify-content:center;align-items:center;width:56px;height:56px;display:inline-flex}.train-media-img{object-fit:cover;width:100%;height:100%;display:block}.train-media-badges{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;display:flex;position:absolute;top:10px;left:10px;right:10px}.train-flag{border-radius:var(--wh-radius-pill,999px);font-family:var(--wh-font);letter-spacing:.2px;white-space:nowrap;background:var(--wh-surface);box-shadow:var(--wh-shadow-sm,0 1px 2px #0000000d);backdrop-filter:var(--wh-blur-light,blur(8px));align-items:center;gap:4px;padding:3px 9px 3px 7px;font-size:10.5px;font-weight:700;display:inline-flex}.train-flag--required{color:var(--wh-warning)}.train-flag--status{color:var(--st);background:color-mix(in srgb,var(--st)14%,var(--wh-surface))}.train-card-body{flex-direction:column;flex:1;padding:14px 16px 16px;display:flex}.train-card-title{color:var(--wh-text);font-size:15px;font-weight:700;line-height:1.35;font-family:var(--wh-font);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 5px;display:-webkit-box;overflow:hidden}.train-card-desc{color:var(--wh-text-muted);font-size:12px;font-family:var(--wh-font);-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:36px;margin:0;line-height:1.5;display:-webkit-box;overflow:hidden}.train-card-desc--empty{opacity:.7;font-style:italic}.train-meta{flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;display:flex}.train-meta-item{color:var(--wh-text-muted);font-size:11.5px;font-weight:600;font-family:var(--wh-font);align-items:center;gap:4px;display:inline-flex}.train-meta-due{white-space:nowrap;margin-left:auto}.train-meta-due.is-overdue{color:var(--wh-error)}.train-progress{margin-top:auto;padding-top:14px}.train-progress-head{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.train-progress-label{font-family:var(--wh-font);letter-spacing:.2px;color:var(--st);align-items:center;gap:5px;font-size:11.5px;font-weight:700;display:inline-flex}.train-progress-pct{font-family:var(--wh-font);color:var(--wh-text);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700}.train-progress-track{border-radius:var(--wh-radius-pill,999px);background:color-mix(in srgb,var(--wh-text-muted)16%,transparent);height:7px;overflow:hidden}.train-progress-fill{border-radius:var(--wh-radius-pill,999px);background:var(--st);min-width:7px;height:100%;transition:width .4s cubic-bezier(.4,0,.2,1)}.train-progress-fill[style*="width: 0%"]{min-width:0}.train-card-footer{border-top:1px solid var(--wh-border-subtle,#0f172a0d);justify-content:flex-end;align-items:center;margin-top:14px;padding-top:12px;display:flex}.train-cta{border-radius:var(--wh-radius-pill,999px);font-family:var(--wh-font);letter-spacing:.2px;color:var(--wh-indigo);background:var(--wh-indigo-muted,#3b82f61a);align-items:center;gap:6px;padding:7px 14px;font-size:12.5px;font-weight:700;transition:background .18s,transform .18s,color .18s;display:inline-flex}.train-cta>*{transition:transform .18s}.train-card:hover .train-cta{background:var(--wh-indigo);color:var(--wh-text-inverse)}.train-card:hover .train-cta>:last-child{transform:translate(2px)}.train-st--not-started{--st:var(--wh-text-muted);--st-soft:color-mix(in srgb,var(--wh-text-muted)14%,transparent)}.train-st--in-progress{--st:var(--wh-indigo);--st-soft:var(--wh-indigo-muted,#3b82f61f)}.train-st--completed{--st:var(--wh-success);--st-soft:var(--wh-success-light,#10b98124)}.train-st--failed{--st:var(--wh-error);--st-soft:var(--wh-error-light,#ef444424)}.train-empty-wrap{background:var(--wh-surface);border:1px solid var(--wh-border,#0f172a14);border-radius:var(--wh-radius-card,18px);box-shadow:var(--wh-shadow-card,0 1px 4px #0000000f);padding:28px 20px}.train-skel-card{background:var(--wh-surface);border-radius:var(--wh-radius-card,18px);border:1px solid var(--wh-border,#0f172a14);box-shadow:var(--wh-shadow-card,0 1px 4px #0000000f);flex-direction:column;display:flex;overflow:hidden}.train-skel-media{border-radius:0;height:116px}.train-skel-lines{flex-direction:column;gap:10px;padding:16px;display:flex}.train-skel-line{border-radius:6px;height:12px}.train-skel-line--title{width:70%;height:16px}.train-skel-line--short{width:45%}@media (prefers-reduced-motion:reduce){.train-root,.train-card,.train-progress-fill,.train-cta,.train-cta>*{transition:none!important;animation:none!important}.train-card:hover{transform:none}}