/* Course Hub — colours come from theme.json presets. */
.cs9-hub{
  --h-panel:var(--wp--preset--color--base-2, #fff);
  --h-alt:var(--wp--preset--color--surface, #ECEFF4);
  --h-line:var(--wp--preset--color--contrast-3, #DCE1EA);
  --h-ink:var(--wp--preset--color--contrast, #10182B);
  --h-muted:var(--wp--preset--color--contrast-2, #6B7690);
  --h-blue:var(--wp--preset--color--accent, #2657D9);
  --h-blue-dark:var(--wp--preset--color--accent-5, #1B3FA0);
  --h-blue-soft:var(--wp--preset--color--accent-2, #E9EFFD);
  --h-mint:var(--wp--preset--color--mint, #6FE0C4);
  --h-shadow:0 1px 2px rgba(16,24,43,.04), 0 8px 24px rgba(16,24,43,.06);
  font-family:var(--wp--preset--font-family--body);
}
.cs9-hub *{box-sizing:border-box;}
.cs9-hub-sub{color:var(--h-muted); font-size:1.05rem; max-width:60ch; margin:0 0 1.2rem;}
.cs9-hub-overall{display:flex; align-items:center; gap:20px; background:var(--h-panel); border:1px solid var(--h-line); border-radius:14px; padding:18px 22px; margin:0 0 28px; box-shadow:var(--h-shadow);}
.cs9-hub-overall .track{flex:1; height:10px; background:var(--h-alt); border-radius:99px; overflow:hidden;}
.cs9-hub-overall .fill{height:100%; width:0; background:linear-gradient(90deg,var(--h-blue),var(--h-mint)); border-radius:99px; transition:width .6s ease;}
.cs9-hub-overall .num{font-family:var(--wp--preset--font-family--mono); font-size:1.6rem; font-weight:700; color:var(--h-blue-dark);}
.cs9-hub-overall .label{font-size:.85rem; color:var(--h-muted);}
.cs9-hub-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.cs9-hub-list li{margin:0;}
.unit-card{display:flex; align-items:center; gap:18px; background:var(--h-panel); border:1px solid var(--h-line); border-radius:14px; padding:18px 20px; box-shadow:var(--h-shadow); text-decoration:none; color:inherit; transition:border-color .15s, transform .15s;}
a.unit-card.is-live:hover{border-color:var(--h-blue); transform:translateY(-1px);}
.unit-card.is-soon{opacity:.62;}
.unit-num{width:44px; height:44px; border-radius:12px; background:var(--h-blue-soft); color:var(--h-blue-dark); font-family:var(--wp--preset--font-family--mono); font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.unit-card.is-soon .unit-num{background:var(--h-alt); color:var(--h-muted);}
.unit-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.unit-title{font-family:var(--wp--preset--font-family--heading); color:var(--h-ink); font-size:1.05rem; line-height:1.3;}
.unit-blurb{font-size:.88rem; color:var(--h-muted);}
.unit-status{flex-shrink:0; text-align:right;}
.unit-status .pct{font-family:var(--wp--preset--font-family--mono); font-weight:700; color:var(--h-blue-dark);}
.unit-status .soon-tag{background:var(--h-alt); color:var(--h-muted); padding:4px 11px; border-radius:99px; font-weight:600; font-size:.8rem;}
.cs9-hub-note{margin-top:2rem; padding-top:1rem; border-top:1px solid var(--h-line); font-size:.8rem; color:var(--h-muted);}
@media (max-width:600px){ .unit-card{flex-wrap:wrap;} .unit-status{width:100%; text-align:left;} }