/* HVL Physics Graph V8.6.7 — HAT Physics Learning inspired sidebar.
   This file deliberately only styles the index sidebar. Existing graph modules
   and their physics calculations are not touched. */
:root{--hpl-primary:#2859bd;--hpl-muted:#526c8f;--hpl-border:#dfe6f1;--hpl-orange:#ce771b}
@media(min-width:781px){
 .app-shell{grid-template-columns:minmax(360px,420px) minmax(0,1fr)}
 .app-header .site-logo-link{display:none}
 .app-header .header-actions{margin-left:auto}
}
@media(min-width:781px) and (max-width:1100px){.app-shell{grid-template-columns:360px minmax(0,1fr)}}
.sidebar.hpl-sidebar{background:#fff;box-shadow:none;padding:0;display:flex;flex-direction:column;overflow:hidden;min-width:0;border-right:1px solid var(--hpl-border)}
.hpl-sidebar .hpl-brand{height:90px;min-height:90px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:7px 20px 3px;border-bottom:1px solid var(--hpl-border);background:#fff}
.hpl-brand-logo{display:inline-flex;align-items:center;align-self:center;min-width:0;flex:0 0 auto;outline-offset:2px}
.hpl-brand-logo img{display:block;width:108px;height:54px;object-fit:contain;object-position:left center}
.hpl-brand>span{color:#526b8c;font-size:11px;font-weight:650;white-space:nowrap;margin-bottom:1px}
.hpl-brand>span strong{font-weight:850;color:#315d9f}
.hpl-sidebar .hpl-search-panel{padding:23px 20px 13px;background:#fff;border-bottom:1px solid var(--hpl-border)}
.hpl-block-title{font-size:14px;line-height:1.2;font-weight:850;letter-spacing:.055em;color:#55719a;margin:0 0 14px}
.hpl-sidebar .search-wrap.hpl-search-box{position:relative;padding:0;margin:0;display:flex;align-items:center;border:1px solid #d9e4f1;border-radius:15px;height:52px;min-height:52px;background:#fff;overflow:hidden}
.hpl-sidebar .search-wrap.hpl-search-box:before{content:none!important}
.hpl-search-icon{display:inline-grid;place-items:center;flex:none;width:42px;color:#8095b7;font-size:24px;line-height:1;user-select:none}
.hpl-sidebar .hpl-search-box input{border:0!important;box-shadow:none!important;outline:none!important;min-width:0;height:100%;padding:0 4px!important;font-size:15px!important;flex:1;background:transparent!important;color:#233c61!important}
.hpl-sidebar .hpl-search-box input:focus-visible{outline:0!important;box-shadow:none!important}
.hpl-sidebar .hpl-search-box:focus-within{border-color:#2860c8;box-shadow:0 0 0 3px rgba(47,98,214,.14)}
.hpl-sidebar .hpl-search-box input::placeholder{color:#7486a4;opacity:1}
.hpl-sidebar .hpl-shortcut{flex:none;margin:0 9px 0 5px;width:24px;height:24px;min-height:24px;border-radius:5px;border:1px solid #d6e0ec;background:#f1f5fc;color:#8b9cb3;font-size:13px;cursor:pointer;padding:0}
.hpl-sidebar .hpl-grade-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
.hpl-grade-tabs button{height:42px;min-width:0;padding:4px 2px;border:1px solid #dce5f1;border-radius:11px;background:#fff;color:#5d6c84;font-size:14px;font-weight:850;white-space:nowrap;cursor:pointer}
.hpl-grade-tabs button:hover{border-color:#91ade0;background:#f1f6ff}
.hpl-grade-tabs button.active,.hpl-grade-tabs button[aria-pressed="true"]{background:var(--hpl-primary);border-color:var(--hpl-primary);color:#fff}
.hpl-sidebar .hpl-tree-toolbar{min-height:53px;display:flex;align-items:center;justify-content:space-between;gap:7px;padding:0 20px;background:#fff;color:#4e688a;font-size:13px;font-weight:750}
.hpl-tree-tools{display:flex;gap:13px;align-items:center;flex:none}
.hpl-tree-tools button{border:0;padding:4px 0;background:none;color:#2559bf;font-weight:800;font-size:13px;cursor:pointer}
.hpl-tree-tools button:hover{text-decoration:underline}
.hpl-sidebar .hpl-home-btn{display:flex;flex:none;margin:0 16px 5px;padding:7px 12px;min-height:34px;border:1px solid #e2e9f3;border-radius:9px;background:#f8faff;box-shadow:none;transform:none;color:#536885;font-size:12px;font-weight:700}
.hpl-sidebar .hpl-home-btn.active{color:#2459bd;background:#eaf1ff;box-shadow:none;transform:none}
.hpl-sidebar .hpl-tree{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 16px 20px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cad7e6 transparent}
.hpl-sidebar .hpl-tree-grade{margin:0 0 3px;background:transparent;border:none;box-shadow:none;border-radius:0}
.hpl-sidebar .hpl-tree-grade:hover{box-shadow:none;background:transparent;border-color:transparent}
.hpl-sidebar .hpl-tree-grade>.tree-grade-btn{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:9px 12px;background:#eaf1ff!important;color:#2259ba!important;border-radius:11px;text-align:left;font-size:15px;font-weight:850;box-shadow:none}
.hpl-sidebar .hpl-tree-grade>.tree-grade-btn.collapsed{background:#f7faff!important}
.hpl-sidebar .hpl-tree-grade>.tree-grade-btn:hover{background:#dce9ff!important}
.hpl-triangle{width:13px;flex:none;display:inline-grid;place-items:center;color:#91a5c0;font-size:16px;font-weight:500;line-height:1}
.hpl-folder{font-size:16px;line-height:1;flex:none}
.hpl-grade-title{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.hpl-sidebar .hpl-grade-content{max-height:none!important;transform:none!important;opacity:1!important;padding:4px 0 9px;overflow:visible!important}
.hpl-sidebar .hpl-grade-content[hidden],.hpl-sidebar .hpl-graph-list[hidden]{display:none!important}
.hpl-chapter-row{margin:1px 0}
.hpl-sidebar .hpl-chapter-row>.tree-chapter-btn{display:flex;gap:12px;align-items:center;width:100%;margin:0!important;border:0!important;min-height:47px;padding:11px 10px 11px 23px!important;text-align:left;border-radius:8px;background:transparent;color:#152c4a;font-size:14px;font-weight:850;line-height:1.4;transition:background .13s}
.hpl-sidebar .hpl-chapter-row>.tree-chapter-btn:hover{background:#f0f5ff;color:#1451a9}
.hpl-sidebar .hpl-chapter-row>.tree-chapter-btn.active{background:#f1f6ff;color:#2058b7}
.hpl-chapter-icon{width:12px;height:17px;flex:none;border-radius:1px;background:linear-gradient(160deg,#60d2eb,#3474d2);border-bottom:1px solid #377dca}
.hpl-chapter-title{min-width:0;flex:1;overflow-wrap:anywhere}
.hpl-sidebar .hpl-special>.tree-chapter-btn{color:var(--hpl-orange)}
.hpl-sidebar .hpl-special>.tree-chapter-btn:hover{color:#b66810}
.hpl-special .hpl-chapter-icon{background:linear-gradient(180deg,#ffbd5d,#d93e54)}
.hpl-sidebar .hpl-graph-list{padding:0 9px 7px 54px;max-width:100%}
.hpl-sidebar .hpl-graph-list .tree-graph{font-size:12.5px;line-height:1.4;padding:7px 7px 7px 15px;color:#506988;white-space:normal;overflow-wrap:anywhere}
.hpl-sidebar .hpl-graph-list .tree-graph:before{top:14px;background:#a8bfdd}
.hpl-sidebar .hpl-graph-list .tree-graph:hover{background:#ecf4ff;color:#1759bc}
.hpl-sidebar .hpl-tree-empty{padding:18px;color:#64748b;font-size:13px;text-align:center}
.hpl-sidebar .hpl-tree-empty[hidden]{display:none!important}
.hpl-sidebar .hpl-sidebar-footer{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--hpl-border);padding:12px 20px;font-size:13px;color:#526d90;background:#fff}
.hpl-sidebar .hpl-sidebar-footer strong{font-weight:850;color:#13284c}
.hpl-sidebar .hpl-sidebar-footer small{font-size:12px;font-weight:500;color:#5a7291}
/* Respect the existing dark-mode switch instead of forcing light mode. */
html[data-theme="dark"] .sidebar.hpl-sidebar,html[data-theme="dark"] .hpl-sidebar :is(.hpl-brand,.hpl-search-panel,.hpl-tree-toolbar,.hpl-sidebar-footer){background:var(--surface)!important;border-color:var(--line)!important}
html[data-theme="dark"] .hpl-sidebar :is(.hpl-block-title,.hpl-brand>span,.hpl-tree-toolbar,.hpl-sidebar-footer small){color:#a8bddb!important}
html[data-theme="dark"] .hpl-sidebar .hpl-grade-tabs button:not(.active){background:#14263d!important;color:#c4d4e8!important;border-color:#3a4d66!important}
html[data-theme="dark"] .hpl-sidebar .hpl-grade-tabs button.active{background:#2b63c9!important;color:#fff!important}
html[data-theme="dark"] .hpl-sidebar .hpl-tree-grade>.tree-grade-btn{background:#1b3454!important;color:#e1ecff!important}
html[data-theme="dark"] .hpl-sidebar .hpl-tree-grade>.tree-grade-btn.collapsed{background:#16283f!important}
html[data-theme="dark"] .hpl-sidebar .hpl-chapter-row>.tree-chapter-btn{color:#d6e2f4!important;background:transparent!important}
html[data-theme="dark"] .hpl-sidebar .hpl-special>.tree-chapter-btn{color:#f7b56b!important}
html[data-theme="dark"] .hpl-sidebar .hpl-home-btn{background:#1a2d47!important;color:#e6edf7!important}
html[data-theme="dark"] .hpl-sidebar .hpl-chapter-row>.tree-chapter-btn:is(:hover,.active){background:#1c3859!important}
html[data-theme="dark"] .hpl-sidebar .hpl-search-box{background:#0f1e32!important;border-color:#3a4d66!important}
html[data-theme="dark"] .hpl-sidebar .hpl-search-box input{background:transparent!important;color:#e5edf8!important}
html[data-theme="dark"] .hpl-sidebar .hpl-sidebar-footer strong{color:#e5edf8!important}
@media(max-width:780px){
 .sidebar.hpl-sidebar{width:min(94vw,420px);height:calc(100dvh - 54px);top:54px;z-index:40}
 .hpl-sidebar .hpl-brand{height:75px;min-height:75px;padding:4px 15px 2px}
 .hpl-brand-logo img{width:98px;height:49px}
 .hpl-sidebar .hpl-search-panel{padding:16px 15px 10px}
 .hpl-sidebar .hpl-tree-toolbar{padding:0 15px}
 .hpl-sidebar .hpl-tree{padding:0 12px 14px}
 .hpl-sidebar .hpl-sidebar-footer{padding:11px 14px}
}
@media(max-width:360px){
 .hpl-sidebar .hpl-grade-tabs{gap:4px}
 .hpl-sidebar .hpl-grade-tabs button{font-size:12px}
 .hpl-sidebar .hpl-tree-toolbar{gap:4px;font-size:11px}
 .hpl-tree-tools{gap:7px}.hpl-tree-tools button{font-size:11px}
 .hpl-sidebar .hpl-chapter-row>.tree-chapter-btn{font-size:12.5px;padding-left:12px!important}
}
@media(prefers-reduced-motion:reduce){.hpl-sidebar *, .hpl-sidebar *::before{transition:none!important}}
/* The brand logo links to Home; omit the redundant Home row so the tree
   begins directly beneath the count/actions bar, as in HAT Physics Learning. */
.hpl-sidebar .hpl-home-btn{display:none!important}

/* Restore the drawer backdrop on mobile (legacy index CSS had a later
   display:none rule that could suppress it). Hide the AI FAB above the drawer. */
@media(max-width:780px){
  .mobile-backdrop:not([hidden]){display:block!important}
  body.hpl-sidebar-open .hvl-ai-fab{display:none!important}
}