/* CLASSES-HUB-01: Classes learning hub styles. Token-based so both themes
   adapt automatically (light theme redefines the same variables). No
   font-family declarations here: type is owned by the font-fix lane.
   No transitions or animations by design, so reduced-motion changes
   nothing. Star widget is CSS-only (radio inputs plus sibling selectors). */
.ch-hub{margin-top:18px;display:grid;gap:18px}
.ch-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.ch-card h3{margin:0 0 8px;font-size:var(--fs-lg)}
.ch-card p{margin:0 0 10px;color:var(--body)}
.ch-muted{color:var(--mut);font-size:var(--fs-sm)}
.ch-progress .ch-barrow{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px}
.ch-progress .ch-barlabel{font-weight:700;color:var(--ink)}
.ch-progress .ch-barcount{color:var(--mut);font-size:var(--fs-sm);white-space:nowrap}
.ch-bar{height:10px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.ch-bar-fill{height:100%;background:var(--lime);border-radius:999px}
.ch-complete-note{color:var(--lime);font-weight:700;margin-top:8px}
.ch-upnext{margin-top:12px;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-in)}
.ch-upnext a{color:var(--lime);font-weight:700}
.ch-markrow{margin-top:12px}
.ch-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.ch-stars input{position:absolute;opacity:0;width:1px;height:1px}
.ch-stars label{font-size:28px;line-height:1;cursor:pointer;color:var(--mut);padding:2px}
.ch-stars input:checked ~ label,.ch-stars label:hover,.ch-stars label:hover ~ label{color:#F5C445}
.ch-stars input:focus-visible + label{outline:2px solid var(--lime);outline-offset:2px;border-radius:4px}
.ch-rate-avg{font-weight:700;color:var(--ink)}
.ch-rate-avg .ch-star{color:#F5C445}
.ch-fb-list,.ch-cmt-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ch-fb-item,.ch-cmt{padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-in)}
.ch-author{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ch-author img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.ch-av{width:32px;height:32px;border-radius:50%;background:var(--lime-dim);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);flex-shrink:0}
.ch-author b{color:var(--ink)}
.ch-time{color:var(--mut);font-size:var(--fs-xs)}
.ch-body{color:var(--body);white-space:pre-wrap;word-break:break-word}
.ch-cimg{max-width:100%;border-radius:var(--r-in2);margin-top:8px;display:block}
.ch-replies{list-style:none;margin:12px 0 0;padding-left:14px;border-left:3px solid var(--lime-dim);display:grid;gap:10px}
.ch-rx{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ch-rx button{background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--body);padding:4px 10px;cursor:pointer;font-size:var(--fs-sm)}
.ch-rx button.ch-mine{border-color:var(--lime);color:var(--ink)}
.ch-rx button:hover{border-color:var(--lime)}
.ch-textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-in);color:var(--ink);padding:10px;box-sizing:border-box}
.ch-textarea:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.ch-formrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.ch-formrow label{color:var(--body);font-size:var(--fs-sm)}
.ch-attach{display:none}
.ch-attach.on{display:block;margin-top:8px}
.ch-reply-form{display:none;margin-top:10px}
.ch-reply-form.on{display:block}
.ch-done{color:var(--lime);font-weight:700}
.ch-rate-meta{color:var(--mut);font-size:var(--fs-xs);white-space:nowrap}
.ch-rate-meta .ch-star{color:#F5C445}
.ch-week-done{color:var(--lime)}
.ch-emoji-panel{display:none;flex-wrap:wrap;gap:4px;margin-top:8px}
.ch-emoji-panel.on{display:flex}
.ch-emoji-panel button{background:transparent;border:0;font-size:20px;cursor:pointer;padding:2px;line-height:1}
.ch-yt{position:relative;cursor:pointer;margin-top:8px}
.ch-yt img{width:100%;border-radius:var(--r-in2);display:block}
.ch-yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.ch-yt-tag{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.65);color:#fff;font-size:var(--fs-xs);padding:3px 8px;border-radius:999px}
.ch-login-note{margin-top:8px}
.ch-login-note a{color:var(--lime);font-weight:700}
[data-theme="light"] .ch-bar-fill{background:#406607}
[data-theme="light"] .ch-done,[data-theme="light"] .ch-week-done,[data-theme="light"] .ch-complete-note,[data-theme="light"] .ch-upnext a,[data-theme="light"] .ch-login-note a{color:#406607}
[data-theme="light"] .ch-rx button.ch-mine{border-color:#406607}
[data-theme="light"] .ch-rx button:hover{border-color:#406607}
@media (max-width:640px){
  .ch-card{padding:12px}
  .ch-progress .ch-barlabel{font-size:var(--fs-base)}
  .ch-replies{padding-left:10px}
}