/* Toolkit 2A: use the imported white, cool-grey, navy and gold palette.
   Loaded after the original panel CSS; mobile keeps its existing accordion. */
#panel-course { --rt-paper:#FFFFFF; --rt-soft:#EEF1F5; --rt-border:#D4DAE3; --rt-ink:#0E2535; --rt-muted:#5A6B7B; }
#panel-course .rt-shell, #panel-course .rt-feed { background:var(--rt-paper); }
#panel-course .rt-rail { width:278px; padding:20px 18px; gap:16px; background:var(--rt-ink); border-color:var(--rt-ink); box-shadow:none; }
#panel-course .rt-ring-pct { color:#fff; }
#panel-course .rt-ring-label, #panel-course .rt-phase-label, #panel-course .rt-phase-count { color:rgba(255,255,255,.6); }
#panel-course .rt-ring-caption { color:rgba(255,255,255,.72); font-size:11.5px; font-weight:400; }
#panel-course .rt-phase.rt-ph-on .rt-phase-label { color:rgba(255,255,255,.6); }
#panel-course .rt-phase-rule { background:transparent; }
#panel-course .rt-bar-track { height:4px; background:rgba(255,255,255,.2); }
#panel-course .rt-barfill { background:#fff; }
#panel-course .rt-step { gap:11px; padding:9px 11px; border-radius:8px; }
#panel-course .rt-phase { margin:10px 0 4px; }
#panel-course .rt-phase:first-child { margin-top:2px; }
#panel-course .rt-step { padding-block:6px; }
#panel-course .rt-step:hover { background:rgba(255,255,255,.08); border-color:transparent; box-shadow:none; }
#panel-course .rt-step.rt-viewing, #panel-course .rt-step.rt-viewing:hover { background:var(--rt-paper); border-color:var(--rt-paper); box-shadow:0 4px 16px rgba(0,0,0,.28),inset 3px 0 0 #C9A84C; }
#panel-course .rt-step-title { color:rgba(255,255,255,.75); font-weight:500; }
#panel-course .rt-st-done .rt-step-title { color:rgba(255,255,255,.95); }
#panel-course .rt-viewing .rt-step-title { color:var(--rt-ink); font-weight:700; }
#panel-course .rt-step-count, #panel-course .rt-step-done { color:#D4B45A; }
#panel-course .rt-viewing .rt-step-count, #panel-course .rt-viewing .rt-step-done { color:var(--rt-muted); }
#panel-course .rt-mk-current, #panel-course .rt-mk-todo, #panel-course .rt-mk-done { width:24px; height:24px; font-size:11.5px; }
#panel-course .rt-mk-current { background:#C9A84C; color:var(--rt-ink); }
#panel-course .rt-mk-todo { background:transparent; border:1.5px solid rgba(255,255,255,.35); color:rgba(255,255,255,.75); }
#panel-course .rt-mk-done { background:rgba(255,255,255,.2); }
#panel-course .rt-viewing :is(.rt-mk-current,.rt-mk-todo,.rt-mk-done) { background:var(--rt-ink); color:#fff; border-color:var(--rt-ink); }
#panel-course .rt-main { max-width:1080px; padding:40px clamp(20px,3vw,56px) 60px; }
#panel-course .rt-hdr-title { font-size:34px; line-height:1.12; }
#panel-course .rt-hdr-sub { font-size:15.5px; font-style:italic; margin-top:7px; }
#panel-course .rt-gold { color:#8F6F23; }
#panel-course .rt-core { box-shadow:0 2px 4px rgba(5,28,44,.05),0 14px 32px rgba(5,28,44,.10); }
#panel-course .rt-core:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(5,28,44,.11); }
#panel-course .rt-core-main { flex-wrap:wrap; gap:20px 24px; }
#panel-course .rt-core-body { flex:1 1 240px; }
#panel-course .rt-core-title { font-size:23px; }
#panel-course .rt-cta-primary { padding:13px 22px; }
#panel-course .rt-grid { gap:14px; }
#panel-course .rt-card { height:auto; min-height:244px; box-shadow:0 1px 3px rgba(5,28,44,.05); }
#panel-course .rt-card-art { height:146px; background:var(--rt-soft); border-color:var(--rt-border); }
#panel-course .rt-card-body { padding:15px 16px; gap:10px; }
#panel-course .rt-card-meta { color:var(--rt-muted); }
#panel-course .rt-card-cta { color:var(--rt-ink); }
#panel-course .rt-tool-list { grid-template-columns:1fr; gap:8px; }
#panel-course .rt-tool-list .rt-card { min-height:72px; flex-direction:row; align-items:center; padding:13px 16px; gap:14px; }
#panel-course .rt-tool-list .rt-card-art { width:36px; height:36px; border:0; border-radius:8px; background:var(--rt-ink); }
#panel-course .rt-tool-list .rt-art { width:36px; height:36px; animation:none; }
#panel-course .rt-tool-list .rt-art>* { transform:scale(.19); flex-shrink:0; }
#panel-course .rt-tool-list .rt-card-body { flex:1; min-width:0; padding:0; gap:3px; }
#panel-course .rt-tool-list .rt-card-meta { display:none; }
#panel-course .rt-tool-list .rt-card-name { font-family:Inter,sans-serif; font-size:13.5px; }
#panel-course .rt-next-row { border-top:1px solid var(--rt-border); padding-top:18px; margin-top:34px; }
#panel-course :is(button,[role=button]):focus-visible { outline:2px solid #A8882E; outline-offset:3px; }
/* Use the same white header across all hub panels. */
#dashboard .hero { background:var(--cb-nav-bg); color:var(--cb-nav-text); box-shadow:0 1px 0 var(--cb-nav-border); backdrop-filter:none; }
#dashboard .hero::after { display:none; }
#dashboard :is(.hero-tab,.hero-logo-box,.hero-icon-btn) { color:#0E2535!important; }
#dashboard .hero-tab.active { color:#0E2535!important; }
#dashboard .hero-divider { background:#D4DAE3; }
@media(min-width:821px) and (max-width:1100px) {
  #panel-course .rt-main { padding:30px 24px 48px; }
  #panel-course .rt-core { flex-wrap:wrap; }
  #panel-course .rt-core-art { margin:auto; }
  #panel-course .rt-core-main { flex-basis:100%; }
  #panel-course .rt-lesson-list { grid-template-columns:1fr; }
}
@media(max-width:820px) {
  #panel-course .rt-fbody .rt-card { min-height:100px; }
  #panel-course .rt-core-title { font-size:19px; }
  #panel-course .rt-core-body { flex-basis:auto; }
}
#panel-course .rt-rail :is(.rt-st-todo,.rt-st-current) .rt-step-title { color:rgba(255,255,255,.75); }
#panel-course .rt-rail .rt-viewing .rt-step-title { color:var(--rt-ink); }
#panel-course .rt-step-detail { font-size:10.5px; font-weight:400; color:rgba(255,255,255,.65); }
#panel-course .rt-viewing .rt-step-detail { color:var(--rt-muted); }
#panel-course .rt-step-main { gap:2px; }
#dashboard .hero-tabs { min-width:0; overflow-x:auto; scrollbar-width:none; }
#dashboard .hero-actions { flex-shrink:0; }
#panel-course .rt-tool-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; color:#C9A84C; }
#panel-course .rt-tool-icon svg { width:17px; height:17px; }
@media(max-width:820px) {
  #panel-course .rt-fbody .rt-card-name { white-space:normal; overflow:visible; font-size:13px; line-height:1.3; }
  #panel-course .rt-fbody .rt-card { height:auto; min-height:112px; }
  #panel-course .rt-fbody .rt-card-art { width:96px; }
  #panel-course .rt-fbody .rt-card .rt-art>* { transform:scale(.47); }
  #panel-course .rt-fbody .rt-card-sub { white-space:normal; line-height:1.4; }
  #panel-course .rt-fbody .rt-card-foot { flex-wrap:wrap; }
}

/* Canvas neutral details: no inherited warm fills or gold metadata. */
body:has(#panel-course:not(.hidden)) { background:#DBE2EA; }
#panel-course .rt-main-wrap { background:#fff; }
#panel-course .rt-divider-label, #panel-course .rt-card-sub, #panel-course .rt-card-bar-label, #panel-course .rt-bar-label { color:#5A6B7B; }
#panel-course .rt-divider-line { background:#E4E9F0; }
#panel-course .rt-next { color:#0E2535; }
#panel-course .rt-art { opacity:1; }
#dashboard .hero-logo-box { background:var(--cb-nav-bg); }
#dashboard .hero-tab.active::after { background:#0E2535; }
#dashboard .nav-new-flag { background:#0E2535; color:#fff; }
#dashboard .hero-tab { background:none!important; }