/* One navigation component for sidebar and mobile bar. */
.app-mobile-navigation { display:none; }
.app-practice-panel-heading button svg { display:block; width:20px; height:20px; }
.app-navigation > button { display:flex; align-items:center; flex-shrink:0; gap:13px; min-height:48px; padding:12px; border:0; border-radius:10px; background:transparent; color:#483b60; font:inherit; font-size:13px; line-height:1.4; text-align:left; cursor:pointer; }
.app-navigation > button:hover { background:#eee7fa; }
.app-navigation > button.is-current,.app-navigation > button[aria-expanded="true"],body:has(#app-practice-panel:popover-open) .app-navigation > button { background:var(--color-primary); color:#fff; font-weight:650; }
.app-navigation > :focus-visible,.app-practice-panel :focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.app-practice-panel { display:none; }
.app-practice-panel { position:fixed; inset:160px auto auto calc(var(--app-sidebar-width) + 12px); width:330px; max-width:calc(100vw - var(--app-sidebar-width) - 24px); max-height:calc(100dvh - 180px); margin:0; padding:26px 20px 20px; overflow-y:auto; border:1px solid var(--color-border); border-radius:16px; background:#fff; color:var(--color-text); box-shadow:0 -8px 40px #23183518; opacity:0; transform:translateY(32px); transition:opacity 240ms ease,transform 280ms cubic-bezier(.22,1,.36,1),display 280ms allow-discrete,overlay 280ms allow-discrete; }
.app-practice-panel:popover-open { display:block; opacity:1; transform:translateY(0); }
.app-practice-panel::backdrop { background:#201b2d40; opacity:0; transition:opacity 280ms ease,display 280ms allow-discrete,overlay 280ms allow-discrete; }
.app-practice-panel:popover-open::backdrop { opacity:1; }
@starting-style {
  .app-practice-panel:popover-open { opacity:0; transform:translateY(32px); }
  .app-practice-panel:popover-open::backdrop { opacity:0; }
}
.app-practice-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.app-practice-panel-heading h2 { margin:0; font-size:22px; line-height:1.3; letter-spacing:-.03em; }
.app-practice-panel-heading button { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; padding:0; border:0; border-radius:10px; background:transparent; color:inherit; cursor:pointer; }
.app-practice-panel > a { display:flex; align-items:center; gap:14px; min-height:60px; margin-top:10px; padding:14px; border:1px solid transparent; border-radius:12px; background:var(--color-primary-soft); color:#483b60; font-size:15px; font-weight:600; line-height:1.4; text-decoration:none; }
.app-practice-panel > a:hover,.app-practice-panel > a.is-current { border-color:var(--color-primary); color:var(--color-primary); }
.app-practice-panel > a svg { width:24px; height:24px; flex-shrink:0; }
.app-practice-panel-chevron { margin-left:auto; font-size:24px; }
@media (prefers-reduced-motion:reduce) { .app-practice-panel,.app-practice-panel::backdrop { transition:none; } }