/* Learn tab v16: three hub buttons (Games, Coding, Languages) that share the screen, each opening a list built from
   the framework rows. Both components live in app/ui.css (.ui-hub, .ui-row); learn.js sizes .lx-hubs to the space
   between the header and the tab bar. Only the pieces the framework doesn't have live here: today's workout card and
   the letter tiles. */
#app .lx{padding:4px 0 24px;animation:lxIn .25s ease both}
#app .lx .ui-list + .ui-list{margin-top:12px}
#app .lx-glyph{font:700 19px/1 var(--ui-font);letter-spacing:-.01em}

/* today's workout: title + count, the three games, one button */
#app .lx-wo{display:flex;flex-direction:column;gap:16px;margin-bottom:4px}
#app .lx-wo-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#app .lx-wo-h h2{margin:0;font:var(--ui-t-title);letter-spacing:-.01em;color:var(--b-ink)}
#app .lx-wo-h p{margin:4px 0 0;font:var(--ui-t-sub);color:var(--b-mute)}
#app .lx-wo-n{font:700 28px/1 var(--ui-font);font-variant-numeric:tabular-nums;color:var(--b-ink)}
#app .lx-wo-n small{font:600 15px var(--ui-font);color:var(--b-mute)}
#app .lx-wo-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#app .lx-wo-i{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
#app .lx-wo-i small{max-width:100%;font:var(--ui-t-cap);color:var(--b-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .lx-wo-i.done .ui-ic{color:#fff;background:var(--ui-accent)}

@keyframes lxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#app .lx{animation:none}}

/* v21: the Languages list's streak and today's XP (Celebration, DESIGN.md) */
.lx-lang-strip{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.lx-ls{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:999px;font-weight:700;font-size:13px;color:var(--b-mute,#8A8496);background:color-mix(in srgb,currentColor 10%,transparent);min-height:32px}
.lx-ls.on{color:#F07A1A}.lx-ls.goal{color:#2F9D63}
.lx-ls b{font-variant-numeric:tabular-nums}