/* Quiet, compact navigation inspired by the supplied Linear reference. */
body{--nav-hover:#ededf0;--nav-selected:#e5e5e9;--nav-text:#54545e;--nav-current:#222229;--nav-icon:#797983}
body.account-dark{--nav-hover:#202023;--nav-selected:#2b2b30;--nav-text:#aaaab2;--nav-current:#f2f2f4;--nav-icon:#95959f}
body :is(.content-subnav,.channel-list,.manage-subnav){background:transparent;border:0;box-shadow:none}
body :is(.content-subnav button,.channel-list button,.manage-subnav button,.navitem){color:var(--nav-text);font-weight:500;border-radius:6px;transition:background-color .12s,color .12s}
body :is(.content-subnav button,.channel-list button,.manage-subnav button,.navitem)>.icon{color:var(--nav-icon)}
body :is(.content-subnav button,.channel-list button,.manage-subnav button,.navitem):hover{background:var(--nav-hover);color:var(--nav-current)}
body :is(.content-subnav button.active,.channel-list button.active,.manage-subnav button.active,.navitem.active){background:var(--nav-selected);color:var(--nav-current);font-weight:600}
body :is(.content-subnav button.active,.channel-list button.active,.manage-subnav button.active,.navitem.active)>.icon{color:currentColor}
body :is(.content-subnav summary,.channel-list .side-label,.manage-subnav .side-label){color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0}
body .content-subnav summary{padding:8px;line-height:20px}
body .content-subnav nav>details+details{margin-top:22px}
body :is(.channel-list .side-label,.manage-subnav .side-label){margin:10px 8px 8px}
body :is(.content-subnav button,.channel-list button,.manage-subnav button,.navitem,.side-course,.content-subnav summary):focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body .navitem{gap:10px;padding:8px 10px;margin-bottom:2px;font-size:13px}
body .navitem>.icon{width:17px;height:17px;flex:0 0 17px}
body .side-course{border-radius:6px;padding:8px 10px}
body .side-course:is(:hover,.selected){background:var(--nav-hover)}
body .side-label{letter-spacing:0}
body .course-tabs{background:transparent;gap:4px;margin-bottom:20px}
body .course-tabs button{padding:12px 8px;border-bottom-width:2px;color:var(--nav-text)}
body .course-tabs button.active{background:transparent;color:var(--nav-current);border-color:var(--nav-current);font-weight:600}
body .course-tabs button:hover{background:var(--nav-hover)}
body :is(.content-sort-options,.plan-actions-popup){border-radius:8px;box-shadow:0 6px 22px #00000012}
body.account-dark :is(.content-sort-options,.plan-actions-popup){box-shadow:0 6px 22px #0006}
body .content-sort-options button:hover{background:var(--nav-hover)}
body .content-sort-options button[aria-pressed=true]{background:var(--nav-selected);color:var(--nav-current)}
@media(min-width:801px){
  body :is(.content-subnav,.channel-list,.manage-subnav){padding:8px}
  body :is(.content-subnav button,.channel-list button,.manage-subnav button){min-height:36px;padding:7px 8px;margin:2px 0;font-size:13px;line-height:22px;gap:8px}
  body .navitem{min-height:36px}
}
@media(max-width:800px){
  body :is(.content-subnav button,.channel-list button,.manage-subnav button,.navitem,.side-course){min-height:44px}
}
@media(prefers-reduced-motion:reduce){body :is(.content-subnav button,.channel-list button,.manage-subnav button,.navitem){transition:none}}
/* Match the dark palette's state selectors without tinting navigation blue. */
body.account-dark :is(.content-subnav button.active,.channel-list button.active,.manage-subnav button.active,.navitem.active){background:var(--nav-selected);color:var(--nav-current)}
body.account-dark .course-tabs{background:transparent}
body.account-dark .course-tabs button.active{background:transparent;color:var(--nav-current)}
body.account-dark .content-sort-options button[aria-pressed=true]{background:var(--nav-selected);color:var(--nav-current)}

/* A shared page title/action bar, separate from filters and list content. */
body .page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:10px 20px;border-bottom:1px solid var(--line);margin:0}
body .page-heading h2{min-width:0;margin:0;font-size:14px;line-height:1.6;font-weight:600;overflow-wrap:anywhere}
body .page-heading-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
body .page-heading-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 8px;border:0;border-radius:6px;background:transparent;color:var(--nav-text);font-size:12px;font-weight:500;white-space:nowrap}
body .page-heading-action:hover{background:var(--nav-hover);color:var(--nav-current)}
body .page-heading-action:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body .page-heading-inset{margin:-20px -20px 20px}

@media(max-width:800px){
  body .page-heading-inset{margin:0 0 16px;padding-left:0;padding-right:0}
  body .page-heading{gap:8px;min-height:56px}
  body .page-heading-actions{gap:4px}
  body .page-heading-action{min-height:44px;padding:8px;font-size:12px}
  body .manage-content .page-heading{padding:6px 14px}
  body .page-heading h2{font-size:14px}
}

/* Counts live beside the title; secondary list tools open from icon buttons. */
body .page-heading h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body .page-heading-count{color:var(--muted);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}
body .page-heading-action>.icon{width:15px;height:15px}
body .content-results .content-icon-tools{justify-content:flex-end;gap:8px;position:relative;margin-bottom:16px}
body .content-icon-tools>.content-sort,body .content-icon-tools>.content-read-filter{flex:0 0 auto;position:static}
body .content-icon-tools .content-sort>summary{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:50%;background:var(--paper);color:var(--nav-text);border:1px solid var(--line)}
body .content-icon-tools .content-sort>summary .icon{width:18px;height:18px}
body .content-icon-tools .content-sort>summary:hover,body .content-icon-tools .content-sort[open]>summary{background:var(--nav-hover);color:var(--nav-current)}
body .content-icon-tools .content-sort.is-active>summary:after{content:'';position:absolute;right:1px;top:0;width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px var(--paper)}
body .content-icon-tools .content-sort-options{right:0;left:auto;top:calc(100% + 6px);max-width:100%;z-index:20}
body .content-icon-tools .search-options{width:300px;padding:14px}
body .content-icon-tools #ws-search{display:block;width:100%;max-width:none;margin:0}
body .content-icon-tools #ws-search label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
body .content-icon-tools #ws-search>div{position:relative}
body .content-icon-tools #ws-search .icon{position:absolute;top:12px;left:10px;width:16px;height:16px;color:var(--muted)}
body .content-icon-tools #ws-search input{width:100%;padding-left:34px}
body .content-filter-result{margin-right:auto;font-size:11px;color:var(--muted);overflow-wrap:anywhere;min-width:0}
body .content-icon-tools summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:800px){body .content-icon-tools .content-sort>summary{width:44px;height:44px}body .content-icon-tools #ws-search input{font-size:16px;height:44px}}
body .content-results .content-icon-tools>.content-read-filter{flex:0 0 auto;width:auto}
body .content-results .content-icon-tools #ws-search{display:block;width:100%;max-width:none;margin:0}

/* Desktop management navigation can collapse without resetting the current list. */
.manage-nav-heading{display:none}
@media(min-width:801px){
  body .manage-nav-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-bottom:6px}
  .manage-nav-heading>span{padding-left:8px;font-size:11px;color:var(--muted);white-space:nowrap}
  body .manage-subnav .manage-nav-toggle{flex:0 0 36px;width:36px;height:36px;min-height:36px;display:grid;place-items:center;padding:8px;margin:0}
  body .manage-layout.manage-menu-collapsed{grid-template-columns:60px minmax(0,1fr)}
  body .manage-menu-collapsed .manage-nav-heading{justify-content:center}
  body .manage-menu-collapsed .manage-nav-heading>span,body .manage-menu-collapsed #manage-nav-items button>span{display:none}
  body .manage-menu-collapsed #manage-nav-items button{justify-content:center;width:44px;min-height:44px;padding:12px;gap:0}
  .manage-menu-collapsed .manage-nav-chevron{transform:rotate(180deg);transform-origin:14.5px 12px}
}

/* On top-level desktop pages the global menu remains usable as an icon rail. */
.sidebar-desktop-heading,.sidebar-compact-icon{display:none}
.sidebar .joined-arrow{display:inline-flex}
@media(min-width:651px){
  body:not(.course-context) header>.menu-toggle{display:none}
  body:not(.course-context) .sidebar-desktop-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-bottom:12px}
  .sidebar-desktop-heading>span{padding-left:10px;font-size:11px;color:var(--muted)}
  .sidebar-toggle{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:6px;color:var(--nav-icon)}
  .sidebar-toggle:hover{background:var(--nav-hover);color:var(--nav-current)}
  body:not(.course-context).menu-collapsed .shell{grid-template-columns:64px minmax(0,1fr) 260px;max-width:1460px}
  body:not(.course-context).menu-collapsed .sidebar{display:flex;padding-right:0;align-items:stretch}
  body:not(.course-context).menu-collapsed .sidebar-desktop-heading{justify-content:center}
  body:not(.course-context).menu-collapsed .sidebar :is(.nav-label,.new,.course-name,.permission,.course-chevron,.side-label,.menu-empty,.joined-arrow,.sidebar-desktop-heading>span,.side-bottom>p){display:none}
  body:not(.course-context).menu-collapsed .sidebar :is(.navitem,.side-course,.all-joined,.reset,.coverage-link){display:flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:10px;margin:2px auto;gap:0;border-radius:6px}
  body:not(.course-context).menu-collapsed .sidebar .side-course{padding:7px}
  body:not(.course-context).menu-collapsed .sidebar .sidebar-compact-icon{display:flex}
  body:not(.course-context).menu-collapsed .sidebar .all-joined svg{width:18px;height:18px}
  body:not(.course-context).menu-collapsed .sidebar .menu-section{margin-top:12px;padding-top:10px}
  body:not(.course-context).menu-collapsed .sidebar .side-bottom{margin-top:14px;padding-top:10px}
  body:not(.course-context).menu-collapsed .sidebar :is(.reset,.coverage-link):hover{background:var(--nav-hover)}
  body:not(.course-context).course-screen.menu-collapsed .shell{grid-template-columns:64px minmax(0,1fr)}
}
@media(min-width:651px) and (max-width:1180px){body:not(.course-context).menu-collapsed .shell{grid-template-columns:64px minmax(0,1fr) 235px}}
@media(min-width:651px) and (max-width:1000px){body:not(.course-context).menu-collapsed .shell{grid-template-columns:64px minmax(0,1fr);max-width:960px}}

/* Discovery focuses on the feed, without a recommendation rail. */
@media(min-width:651px){
  body.discovery-screen .shell{grid-template-columns:250px minmax(0,800px);max-width:1148px}
  body.discovery-screen:not(.course-context).menu-collapsed .shell{grid-template-columns:64px minmax(0,1fr);max-width:1148px}
  body.discovery-screen #main{width:100%;max-width:900px;min-width:0;margin-inline:auto}
}
@media(min-width:651px) and (max-width:1000px){
  body.discovery-screen .shell{grid-template-columns:225px minmax(0,1fr)}
}

/* Discovery uses the course content card with a public author byline. */
.content-results.discovery-results{background:transparent;border:0;padding:0}
.discovery-results .library-grid.discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.discovery-grid .teacher{margin:0 0 14px;gap:8px;min-width:0}
.discovery-grid .teacher .avatar{width:30px;height:30px;flex-shrink:0;font-size:11px}
.discovery-grid .teacher-info{min-width:0;text-align:left}
.discovery-grid .teacher-info strong{font-size:11px}
.discovery-grid .teacher-info small{font-size:10px;overflow-wrap:anywhere}
@media(max-width:650px){
  .discovery-results .library-grid.discovery-grid{grid-template-columns:minmax(0,1fr);margin:0 16px 20px;gap:16px}
}