/* Approved Opsagon precision navigator. Lesson/content styling stays in styles.css. */
@media (min-width: 861px) { :root { --sidebar-w: 264px; } }
.ops-sidebar { background: var(--surface); }
[data-theme="light"] .ops-sidebar { background: #fafbfc; }
.ops-sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ops-sidebar .sidebar-nav { flex: none; overflow: visible; padding-top: 6px; }
.ops-sidebar .sidebar-foot { flex-shrink: 0; background: inherit; }
.ops-track-nav { width: calc(var(--sidebar-w) - 37px); margin: 22px 0 24px 18px; padding-bottom: 23px; border-bottom: 1px solid var(--stroke); }
.ops-track-current { display: flex; align-items: center; gap: 9px; margin: 0 6px 21px; color: var(--text); }
.ops-track-current img { width: 22px; height: 22px; object-fit: contain; }
.ops-track-current strong { font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.ops-track-current > span { margin-left: auto; font-size: 11px; color: var(--text-2); }
.ops-track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 8px; }
.ops-track-tile { display: block; height: 64px; min-height: 64px; padding: 1px; color: var(--text-2); background: var(--stroke); text-decoration: none; clip-path: polygon(23% 0,77% 0,100% 50%,77% 100%,23% 100%,0 50%); }
.ops-track-face { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; flex-direction: column; gap: 5px; font-size: 12px; line-height: 1.15; font-weight: 500; background: var(--surface-2); clip-path: polygon(23% 0,77% 0,100% 50%,77% 100%,23% 100%,0 50%); }
.ops-track-face img { width: 22px; height: 22px; object-fit: contain; filter: saturate(.85); }
.ops-track-tile:hover { background: #8194a3; text-decoration: none; }
.ops-track-tile:hover .ops-track-face { background: var(--surface-3); }
.ops-track-tile:focus-visible { outline: none; background: var(--text); padding: 3px; }
.ops-track-tile:focus-visible .ops-track-face { box-shadow: inset 0 0 0 1px var(--surface); }
.ops-track-tile[aria-current="page"] { background: var(--ops-track-accent); padding: 2px; }
.ops-track-tile[aria-current="page"] .ops-track-face { background: linear-gradient(150deg, color-mix(in srgb, var(--ops-track-accent) 16%, var(--surface)), color-mix(in srgb, var(--ops-track-accent) 27%, var(--surface))); color: var(--text); font-weight: 650; }
.ops-track-tile[aria-current="page"]:focus-visible { padding: 3px; background: var(--text); }
.ops-track-tile[aria-current="page"] img, .ops-track-tile:hover img { filter: none; }
.ops-track-contents { margin: 0 24px 8px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-2); }
[data-theme="light"] .ops-track-tile { color: #405463; background: linear-gradient(155deg,#cdd7df,#bac7d1); }
[data-theme="light"] .ops-track-face { background: linear-gradient(155deg,#fff,#f4f7f9); }
[data-theme="light"] .ops-track-tile:hover { background: #8194a3; }
[data-theme="light"] .ops-track-tile:hover .ops-track-face { background: #f0f4f7; }
[data-theme="light"] .ops-track-tile[aria-current="page"] { background: var(--ops-track-accent); }
[data-theme="light"] .ops-track-tile[aria-current="page"] .ops-track-face { background: linear-gradient(150deg,color-mix(in srgb,var(--ops-track-accent) 16%,#fff),color-mix(in srgb,var(--ops-track-accent) 27%,#fff)); color: #182b39; }
[data-theme="light"] .ops-track-tile:focus-visible { background: #182b39; }
@media (prefers-reduced-motion: reduce) { .ops-sidebar { transition: none; } }

/* Keep the two-line System Design label inside the hexagon's safe area. */
.ops-track-tile[aria-label="System Design learning path"] .ops-track-face { gap: 3px; }
.ops-track-tile[aria-label="System Design learning path"] .ops-track-face img { width: 18px; height: 18px; flex-shrink: 0; }
.ops-track-tile[aria-label="System Design learning path"] .ops-track-face > span { width: 50px; max-width: 100%; text-align: center; font-size: 10px; line-height: 1.12; white-space: normal; flex-shrink: 0; }