/* Shared workshop sidebar for course experiments and open challenges. */
.workshop-layout { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:calc(100vh - 74px); }
.workshop-sidebar { box-sizing:border-box; display:flex; flex-direction:column; gap:0; margin:0; padding:35px 20px; border:0; border-right:1px solid #e3e9f2; background:#fff; font:13px/1.7 "Microsoft YaHei","PingFang SC",sans-serif; }
.workshop-sidebar > small { color:#8b99ad; font-size:8px; letter-spacing:1.3px; }
.workshop-sidebar > h2 { margin:13px 0 0; color:#172c48; font-size:23px; font-weight:700; line-height:1.7; }
.workshop-sidebar > p { margin:0; color:#76849b; font-size:11px; line-height:1.7; }
.workshop-sidebar > h4 { margin:30px 10px 12px; color:#92a0b3; font-size:10px; font-weight:400; line-height:1.7; }
.workshop-sidebar > button, .workshop-sidebar > a { box-sizing:border-box; display:block; min-height:44px; margin:0 0 5px; padding:12px 9px; border:0; border-radius:7px; color:#62718a; background:transparent; font:12px/1.7 "Microsoft YaHei","PingFang SC",sans-serif; text-align:left; text-decoration:none; cursor:pointer; }
.workshop-sidebar > :is(a,button):hover { color:#172c48; background:#f6f8fc; }
.workshop-sidebar > .selected { color:#2c60e9; background:#edf3ff; font-weight:600; }
.workshop-sidebar > :is(a,button):focus-visible { outline:2px solid #2c60e9; outline-offset:2px; }
.workshop-sidebar > [hidden] { display:none!important; }
.workshop-challenges-page main { min-width:0; }
@media (max-width:950px) {
  .workshop-layout { grid-template-columns:minmax(0,1fr); }
  .workshop-sidebar { max-width:100%; min-width:0; flex-direction:row; flex-wrap:wrap; gap:6px; padding:10px 20px; overflow:visible; border-right:0; border-bottom:1px solid #e3e9f2; overscroll-behavior-x:contain; }
  .workshop-sidebar > small, .workshop-sidebar > h2, .workshop-sidebar > p, .workshop-sidebar > h4 { display:none; }
  .workshop-sidebar > button, .workshop-sidebar > a { display:block; flex:0 0 auto; margin:0; white-space:nowrap; }
}

/* Resource navigation keeps the shared 220px sidebar and wraps with learning links. */
.workshop-layout > main { min-width:0; }
@media(max-width:950px) { .workshop-sidebar > button { max-width:100%; white-space:normal; overflow-wrap:anywhere; } }