@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/navigation.css

@@ -1,900 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Navigation
- *
- *  Responsibilities:
- *    - Provide the entire navigation architecture: primary/secondary nav,
- *      mobile nav, vertical nav, sidebar, pills, tabs, pagination,
- *      breadcrumbs, toolbars, and announcement bars
- *    - Define interactive states: hover, active, disabled, focus-visible,
- *      depth indentation, collapsed/expanded sections
- *    - Expose brand/logo slots and action areas for headers & sidebars
- *    - Supply panel + backdrop patterns for mobile overlay navigation
- *
- *  System Notes:
- *    - Fully token-driven: spacing, radii, borders, colours, z-index, motion
- *    - Pure CSS; JS only toggles `.nav-panel--open` and `.nav-backdrop--visible`
- *    - Safe namespacing: can embed in header/footer/sidebars without collisions
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. CORE NAV PRIMITIVES
---------------------------------------------------------- */
-
-.nav {
-    display: flex;
-    align-items: center;
-    gap: var(--space-6);
-}
-
-.nav__item,
-.nav__link {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-
-    font-size: var(--text-sm);
-    color: var(--color-text);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-
-    padding: var(--space-1) 0;
-    gap: var(--space-2);
-
-    cursor: pointer;
-
-    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.nav__item:hover,
-.nav__link:hover {
-    color: var(--color-text-muted);
-}
-
-.nav__item:active,
-.nav__link:active {
-    color: var(--color-text);
-    background-color: var(--color-surface-subtle);
-}
-
-.nav__item:focus-visible,
-.nav__link:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color);
-    border-radius: var(--radius-sm);
-}
-
-.nav__item--active,
-.nav__link--active,
-.nav__item--active:hover,
-.nav__link--active:hover {
-    font-weight: 600;
-    color: var(--link-text-hover);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-}
-
-.nav__item--disabled,
-.nav__link--disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.nav__item svg,
-.nav__link svg {
-    width: 1em;
-    height: 1em;
-    stroke: currentColor;
-    fill: currentColor;
-}
-
-.nav--a .nav__item,
-.nav--a .nav__link {
-    padding: var(--space-2) var(--space-2);
-}
-
-.nav--b .nav__item,
-.nav--b .nav__link {
-    padding: var(--space-1) var(--space-1);
-}
-
-.nav--c .nav__item,
-.nav--c .nav__link {
-    padding: 0 var(--space-1);
-    font-size: var(--text-xs);
-    gap: var(--space-1);
-}
-
-.nav--c .nav__item svg,
-.nav--c .nav__link svg {
-    width: 0.875em;
-    height: 0.875em;
-}
-
-.nav-section {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-6);
-}
-
-/* ---------------------------------------------------------
-   2. BRAND / LOGO / ACTION SLOTS
---------------------------------------------------------- */
-
-.nav__brand {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-3);
-}
-
-.nav__brand--compact {
-    gap: var(--space-2);
-}
-
-.nav__logo {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.nav__logo .logo {
-    padding: 0;
-}
-
-.nav__actions {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-3);
-}
-
-/* ---------------------------------------------------------
-   3. NAV TOGGLE (MOBILE HAMBURGER)
---------------------------------------------------------- */
-
-.nav__toggle {
-    display: none;
-    cursor: pointer;
-    padding: var(--space-2);
-    border-radius: var(--radius-sm);
-
-    color: var(--color-text);
-    background-color: transparent;
-    border: var(--border-width) solid transparent;
-
-    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.nav__toggle svg {
-    width: 24px;
-    height: 24px;
-    stroke: currentColor;
-}
-
-.nav__toggle:hover {
-    background-color: var(--color-surface-subtle);
-    border-color: var(--color-border-subtle);
-}
-
-.nav__toggle:active {
-    background-color: var(--color-muted-bg);
-}
-
-.nav__toggle:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color);
-}
-
-.nav__toggle--active {
-    background-color: var(--color-accent-soft);
-    border-color: var(--color-accent);
-    color: var(--color-text);
-}
-
-/* ---------------------------------------------------------
-   4. HORIZONTAL / PRIMARY NAV
---------------------------------------------------------- */
-
-.nav--primary {
-    display: flex;
-    align-items: center;
-    gap: var(--space-6);
-}
-
-.nav--primary .nav__item,
-.nav--primary .nav__link {
-    padding: var(--space-2) var(--space-2);
-    border-radius: var(--radius-sm);
-}
-
-.nav--primary .nav__item:hover,
-.nav--primary .nav__link:hover {
-    background-color: var(--color-surface-subtle);
-}
-
-.nav--primary .nav__item--active,
-.nav--primary .nav__link--active {
-    background-color: var(--color-accent-soft);
-    color: var(--color-text);
-}
-
-/* ---------------------------------------------------------
-   5. SUB NAV (TABS) + PILL NAV
---------------------------------------------------------- */
-
-.nav--sub {
-    display: flex;
-    gap: var(--space-6);
-    border-bottom: var(--border-width) solid var(--color-border-subtle);
-    padding-bottom: var(--space-2);
-    margin-bottom: var(--space-8);
-}
-
-.nav--sub .nav__item,
-.nav--sub .nav__link {
-    padding-bottom: var(--space-2);
-}
-
-.nav--sub .nav__item--active::after,
-.nav--sub .nav__link--active::after {
-    content: "";
-    position: absolute;
-    bottom: calc(var(--border-width) * -1);
-    left: 0;
-    height: var(--tab-indicator-height);
-    width: 100%;
-    background-color: var(--color-accent);
-}
-
-.nav--sub .nav__item--disabled,
-.nav--sub .nav__link--disabled {
-    opacity: 0.45;
-    pointer-events: none;
-}
-
-.nav--sub .nav__item:focus-visible,
-.nav--sub .nav__link:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color);
-    border-radius: var(--radius-sm);
-}
-
-.nav--pills {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-2);
-}
-
-.nav--pills .nav__item,
-.nav--pills .nav__link {
-    padding: var(--space-1) var(--space-3);
-    border-radius: 999px;
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--color-surface);
-    font-size: var(--text-xs);
-}
-
-.nav--pills .nav__item:hover,
-.nav--pills .nav__link:hover {
-    background-color: var(--color-surface-subtle);
-    border-color: var(--color-border-subtle);
-}
-
-.nav--pills .nav__item--active,
-.nav--pills .nav__link--active {
-    border-color: var(--color-accent);
-    background-color: var(--color-accent-soft);
-    color: var(--color-text);
-}
-
-.nav--pills .nav__item--disabled,
-.nav--pills .nav__link--disabled {
-    opacity: 0.45;
-    pointer-events: none;
-}
-
-.nav--pills .nav__item:focus-visible,
-.nav--pills .nav__link:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color);
-}
-
-/* ---------------------------------------------------------
-   6. VERTICAL NAV + SIDEBAR
---------------------------------------------------------- */
-
-.nav--vertical {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-}
-
-.nav--vertical .nav__item,
-.nav--vertical .nav__link {
-    padding: var(--space-1) 0;
-}
-
-.nav--vertical .nav__item--depth-2,
-.nav--vertical .nav__link--depth-2 {
-    padding-left: var(--space-4);
-}
-
-.nav--vertical .nav__item--depth-3,
-.nav--vertical .nav__link--depth-3 {
-    padding-left: var(--space-6);
-}
-
-.sidebar {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-}
-
-.sidebar__section {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-}
-
-.sidebar__section--collapsible .sidebar__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-2);
-    cursor: pointer;
-}
-
-.sidebar__section-title {
-    font-size: var(--text-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--color-text-muted);
-}
-
-.sidebar__section-toggle-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition: transform 0.15s ease;
-}
-
-.sidebar__section--expanded .sidebar__section-toggle-icon {
-    transform: rotate(90deg);
-}
-
-.sidebar__section--collapsed .sidebar__nav {
-    display: none;
-}
-
-.sidebar__nav {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-}
-
-.sidebar__nav .nav__item,
-.sidebar__nav .nav__link {
-    font-size: var(--text-sm);
-    padding: var(--space-1) 0;
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-    color: var(--color-text);
-}
-
-.sidebar__nav .nav__item:hover,
-.sidebar__nav .nav__link:hover {
-    background-color: var(--color-surface-subtle);
-    color: var(--color-text-muted);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-}
-
-.sidebar__nav .nav__item--active,
-.sidebar__nav .nav__link--active {
-    font-weight: 600;
-    color: var(--color-accent);
-}
-
-.sidebar__section--collapsible .sidebar__section-header {
-    cursor: pointer;
-}
-
-.sidebar__nav .nav__item:focus-visible,
-.sidebar__nav .nav__link:focus-visible {
-    outline: 2px solid var(--focus-ring-color, var(--color-accent-soft));
-    outline-offset: var(--space-1);
-}
-
-/* ---------------------------------------------------------
-   7. ANNOUNCEMENT BAR
---------------------------------------------------------- */
-
-.announcement {
-    width: 100%;
-    background-color: var(--color-muted-bg);
-    color: var(--color-text-muted);
-    border-bottom: var(--border-width) solid var(--color-muted-border);
-    padding: var(--space-2) 0;
-}
-
-.announcement__inner {
-    max-width: var(--content-width-xl);
-    margin: 0 auto;
-    padding: 0 var(--space-6);
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-4);
-}
-
-.announcement__content {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-}
-
-.announcement__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--text-sm);
-}
-
-.announcement__text {
-    font-size: var(--text-xs);
-}
-
-.announcement__link {
-    font-size: var(--text-xs);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    color: var(--color-text);
-}
-
-.announcement__link:hover {
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-}
-
-.announcement__close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    border-radius: var(--radius-sm);
-    padding: var(--space-1);
-
-    border: var(--border-width) solid transparent;
-    background-color: transparent;
-
-    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.announcement__close:hover {
-    background-color: var(--color-surface-subtle);
-    border-color: var(--color-border-subtle);
-}
-
-.announcement__close:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color);
-}
-
-.announcement--info {
-    background-color: var(--color-info-soft);
-    color: var(--color-info-strong);
-}
-
-.announcement--success {
-    background-color: var(--color-success-soft);
-    color: var(--color-success-strong);
-}
-
-.announcement--warning {
-    background-color: var(--color-warning-soft);
-    color: var(--color-warning-strong);
-}
-
-.announcement--danger {
-    background-color: var(--color-danger-soft);
-    color: var(--color-danger-strong);
-}
-
-/* ---------------------------------------------------------
-   8. BREADCRUMBS
---------------------------------------------------------- */
-
-.breadcrumbs {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-    flex-wrap: wrap;
-}
-
-.breadcrumbs__item {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-1);
-    max-width: 100%;
-}
-
-.breadcrumbs__link {
-    color: var(--color-text);
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-    max-width: 16rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.breadcrumbs__link:hover {
-    color: var(--color-text-muted);
-}
-
-.breadcrumbs__link:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color);
-    border-radius: var(--radius-sm);
-}
-
-.breadcrumbs__separator {
-    color: var(--color-text-soft);
-}
-
-/* ---------------------------------------------------------
-   9. PAGINATION
---------------------------------------------------------- */
-
-.pagination {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-1);
-    font-size: var(--text-xs);
-}
-
-.pagination__item {
-    min-width: 2rem;
-    height: 2rem;
-    padding: 0 var(--space-2);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    border-radius: var(--radius-sm);
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--color-surface);
-    color: var(--color-text);
-
-    cursor: pointer;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-
-    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.pagination__item:hover {
-    background-color: var(--color-surface-subtle);
-    border-color: var(--color-border-subtle);
-    color: var(--color-text);
-}
-
-.pagination__item:active {
-    background-color: var(--color-muted-bg);
-}
-
-.pagination__item:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color);
-}
-
-.pagination__item--active {
-    border-color: var(--color-accent);
-    background-color: var(--color-accent-soft);
-    color: var(--color-text);
-}
-
-.pagination__item--disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.pagination__prev,
-.pagination__next {
-    min-width: auto;
-    padding: 0 var(--space-2);
-}
-
-.pagination__ellipsis {
-    min-width: auto;
-    border: none;
-    background-color: transparent;
-    cursor: default;
-}
-
-/* ---------------------------------------------------------
-   10. TOOLBAR
---------------------------------------------------------- */
-
-.toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-4);
-
-    padding: var(--space-3) var(--space-4);
-    border-radius: var(--radius-md);
-    background-color: var(--color-surface);
-    border: var(--border-width) solid var(--color-border-subtle);
-}
-
-.toolbar--dense {
-    padding: var(--space-2) var(--space-3);
-}
-
-.toolbar--spacious {
-    padding: var(--space-4) var(--space-5);
-}
-
-.toolbar__section {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-}
-
-.toolbar__title {
-    font-size: var(--text-sm);
-    font-weight: 500;
-}
-
-.toolbar__actions {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-3);
-}
-
-/* ---------------------------------------------------------
-   11. FOOTER NAV CONTEXT
---------------------------------------------------------- */
-
-.footer .nav {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-}
-
-.footer .nav.nav--vertical {
-    align-items: flex-start;
-}
-
-.footer .nav__item,
-.footer .nav__link {
-    color: var(--color-footer-text);
-    opacity: 0.85;
-    font-size: var(--text-sm);
-    text-align: left;
-    padding-left: 0;
-    padding-right: 0;
-}
-
-.footer .nav__item:hover,
-.footer .nav__link:hover {
-    opacity: 1;
-}
-
-.footer .nav__item--active,
-.footer .nav__link--active {
-    opacity: 1;
-    font-weight: 500;
-}
-
-/* ---------------------------------------------------------
-   12. MOBILE NAV (OVERLAY / PANEL PATTERN)
---------------------------------------------------------- */
-
-.nav-panel {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-
-    width: 18rem;
-    max-width: 100%;
-
-    background-color: var(--color-bg-elevated);
-    border-left: var(--border-width) solid var(--color-border-subtle);
-    box-shadow: var(--shadow-2);
-
-    transform: translateX(100%);
-    opacity: 0;
-    pointer-events: none;
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-    padding: var(--space-4);
-
-    transition: transform 0.2s ease, opacity 0.2s ease;
-    z-index: 40;
-}
-
-.nav-panel--open {
-    transform: translateX(0);
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.nav-backdrop {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--overlay-backdrop-default);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-    z-index: 30;
-}
-
-.nav-backdrop--visible {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.nav--mobile {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-}
-
-.nav--mobile .nav__item,
-.nav--mobile .nav__link {
-    font-size: var(--text-md);
-    padding: var(--space-2) 0;
-}
-
-@media (max-width: 768px) {
-    .nav__toggle {
-        display: inline-flex;
-        align-items: center;
-    }
-}
-
-/* ---------------------------------------------------------
-   TABS (Standalone Component)
---------------------------------------------------------- */
-
-.nav-tabs {
-    display: flex;
-    align-items: center;
-    gap: var(--space-6);
-    border-bottom: var(--border-width) solid var(--color-border-subtle);
-    padding-bottom: var(--space-2);
-}
-
-.nav-tabs__item {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: var(--space-1) var(--space-2);
-    font-size: var(--text-sm);
-    font-weight: 500;
-
-    background: none;
-    border: none;
-    cursor: pointer;
-
-    color: var(--color-text);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-
-    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.nav-tabs__item:hover {
-    color: var(--color-text-muted);
-}
-
-.nav-tabs__item:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color);
-    border-radius: var(--radius-sm);
-}
-
-.nav-tabs__item--active,
-.nav-tabs__item[aria-selected="true"] {
-    color: var(--color-text);
-    font-weight: 600;
-}
-
-.nav-tabs__item--active::after,
-.nav-tabs__item[aria-selected="true"]::after {
-    content: "";
-    position: absolute;
-    bottom: calc(var(--border-width) * -1);
-    left: 0;
-    width: 100%;
-    height: var(--tab-indicator-height); /* already used in nav--sub */
-    background-color: var(--color-accent);
-}
-
-.nav-tabs__item--disabled,
-.nav-tabs__item[disabled] {
-    opacity: 0.45;
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.nav-tabs__item:hover:not(.nav-tabs__item--active):not([aria-selected="true"]) {
-    color: var(--color-text);
-    background-color: var(--color-surface-subtle);
-    border-radius: var(--radius-sm);
-}
-
-.nav-tabs--compact {
-    gap: var(--space-4);
-    padding-bottom: var(--space-1);
-}
-
-.nav-tabs--compact .nav-tabs__item {
-    padding: var(--space-0_5) 0;
-    font-size: var(--text-xs);
-}
-
-.nav-tabs__item {
-    gap: var(--space-2);
-}
-
-.nav-tabs__icon {
-    width: var(--icon-sm);
-    height: var(--icon-sm);
-    flex-shrink: 0;
-}
-
-.nav-tabs__badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    min-width: 1.25rem;
-    height: 1.25rem;
-
-    padding-left: var(--space-1);
-
-    padding-right: var(--space-1);
-
-    background-color: var(--accent-soft-surface, var(--color-accent-soft));
-    color: var(--accent-soft-on, var(--color-on-accent));
-
-    font-size: var(--text-xs);
-    font-weight: 500;
-
-    border-radius: var(--radius-pill);
-
-    line-height: 1;
-    flex-shrink: 0;
-}
-
-.nav-tabs__item--active .nav-tabs__badge,
-.nav-tabs__item[aria-selected="true"] .nav-tabs__badge {
-    background-color: var(--accent-soft-surface-strong, var(--accent-soft-surface));
-    color: var(--accent-soft-on, var(--color-on-accent));
-}
+.nav{align-items:center;display:flex;gap:var(--space-6)}.nav__item,.nav__link{align-items:center;color:var(--color-text);cursor:pointer;display:inline-flex;font-size:var(--text-sm);gap:var(--space-2);padding:var(--space-1) 0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.nav__item:hover,.nav__link:hover{color:var(--color-text-muted)}.nav__item:active,.nav__link:active{background-color:var(--color-surface-subtle);color:var(--color-text)}.nav__item:focus-visible,.nav__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav__item--active,.nav__item--active:hover,.nav__link--active,.nav__link--active:hover{color:var(--link-text-hover);font-weight:600;-webkit-text-decoration:none;text-decoration:none}.nav__item--disabled,.nav__link--disabled{cursor:not-allowed;opacity:.45;pointer-events:none}.nav__item svg,.nav__link svg{stroke:currentColor;fill:currentColor;height:1em;width:1em}.nav--a .nav__item,.nav--a .nav__link{padding:var(--space-2) var(--space-2)}.nav--b .nav__item,.nav--b .nav__link{padding:var(--space-1) var(--space-1)}.nav--c .nav__item,.nav--c .nav__link{font-size:var(--text-xs);gap:var(--space-1);padding:0 var(--space-1)}.nav--c .nav__item svg,.nav--c .nav__link svg{height:.875em;width:.875em}.nav-section{gap:var(--space-6)}.nav-section,.nav__brand{align-items:center;display:inline-flex}.nav__brand{gap:var(--space-3)}.nav__brand--compact{gap:var(--space-2)}.nav__logo{align-items:center;display:inline-flex;justify-content:center}.nav__logo .logo{padding:0}.nav__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.nav__toggle{background-color:transparent;border:var(--border-width) solid transparent;border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;display:none;padding:var(--space-2);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.nav__toggle svg{stroke:currentColor;height:24px;width:24px}.nav__toggle:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.nav__toggle:active{background-color:var(--color-muted-bg)}.nav__toggle:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav__toggle--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.nav--primary{align-items:center;display:flex;gap:var(--space-6)}.nav--primary .nav__item,.nav--primary .nav__link{border-radius:var(--radius-sm);padding:var(--space-2) var(--space-2)}.nav--primary .nav__item:hover,.nav--primary .nav__link:hover{background-color:var(--color-surface-subtle)}.nav--primary .nav__item--active,.nav--primary .nav__link--active{background-color:var(--color-accent-soft);color:var(--color-text)}.nav--sub{border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;gap:var(--space-6);margin-bottom:var(--space-8)}.nav--sub,.nav--sub .nav__item,.nav--sub .nav__link{padding-bottom:var(--space-2)}.nav--sub .nav__item--active:after,.nav--sub .nav__link--active:after{background-color:var(--color-accent);bottom:calc(var(--border-width)*-1);content:"";height:var(--tab-indicator-height);left:0;position:absolute;width:100%}.nav--sub .nav__item--disabled,.nav--sub .nav__link--disabled{opacity:.45;pointer-events:none}.nav--sub .nav__item:focus-visible,.nav--sub .nav__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav--pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}.nav--pills .nav__item,.nav--pills .nav__link{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.nav--pills .nav__item:hover,.nav--pills .nav__link:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.nav--pills .nav__item--active,.nav--pills .nav__link--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.nav--pills .nav__item--disabled,.nav--pills .nav__link--disabled{opacity:.45;pointer-events:none}.nav--pills .nav__item:focus-visible,.nav--pills .nav__link:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav--vertical{display:flex;flex-direction:column;gap:var(--space-2)}.nav--vertical .nav__item,.nav--vertical .nav__link{padding:var(--space-1) 0}.nav--vertical .nav__item--depth-2,.nav--vertical .nav__link--depth-2{padding-left:var(--space-4)}.nav--vertical .nav__item--depth-3,.nav--vertical .nav__link--depth-3{padding-left:var(--space-6)}.sidebar{gap:var(--space-4)}.sidebar,.sidebar__section{display:flex;flex-direction:column}.sidebar__section{gap:var(--space-2)}.sidebar__section--collapsible .sidebar__section-header{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}.sidebar__section-title{color:var(--color-text-muted);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase}.sidebar__section-toggle-icon{align-items:center;display:inline-flex;justify-content:center;transition:transform .15s ease}.sidebar__section--expanded .sidebar__section-toggle-icon{transform:rotate(90deg)}.sidebar__section--collapsed .sidebar__nav{display:none}.sidebar__nav{display:flex;flex-direction:column;gap:var(--space-1)}.sidebar__nav .nav__item,.sidebar__nav .nav__link{border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;font-size:var(--text-sm);padding:var(--space-1) 0;-webkit-text-decoration:underline;text-decoration:underline}.sidebar__nav .nav__item:hover,.sidebar__nav .nav__link:hover{background-color:var(--color-surface-subtle);color:var(--color-text-muted);-webkit-text-decoration:none;text-decoration:none}.sidebar__nav .nav__item--active,.sidebar__nav .nav__link--active{color:var(--color-accent);font-weight:600}.sidebar__section--collapsible .sidebar__section-header{cursor:pointer}.sidebar__nav .nav__item:focus-visible,.sidebar__nav .nav__link:focus-visible{outline:2px solid var(--focus-ring-color,var(--color-accent-soft));outline-offset:var(--space-1)}.announcement{background-color:var(--color-muted-bg);border-bottom:var(--border-width) solid var(--color-muted-border);color:var(--color-text-muted);padding:var(--space-2) 0;width:100%}.announcement__inner{align-items:center;display:flex;gap:var(--space-4);justify-content:space-between;margin:0 auto;max-width:var(--content-width-xl);padding:0 var(--space-6)}.announcement__content{align-items:center;display:flex;gap:var(--space-2)}.announcement__icon{align-items:center;display:inline-flex;font-size:var(--text-sm);justify-content:center}.announcement__link,.announcement__text{font-size:var(--text-xs)}.announcement__link{color:var(--color-text);-webkit-text-decoration:none;text-decoration:none}.announcement__link:hover{-webkit-text-decoration:underline;text-decoration:underline}.announcement__close{align-items:center;background-color:transparent;border:var(--border-width) solid transparent;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--space-1);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.announcement__close:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.announcement__close:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.announcement--info{background-color:var(--color-info-soft);color:var(--color-info-strong)}.announcement--success{background-color:var(--color-success-soft);color:var(--color-success-strong)}.announcement--warning{background-color:var(--color-warning-soft);color:var(--color-warning-strong)}.announcement--danger{background-color:var(--color-danger-soft);color:var(--color-danger-strong)}.breadcrumbs{align-items:center;color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2)}.breadcrumbs__item{align-items:center;display:inline-flex;gap:var(--space-1);max-width:100%}.breadcrumbs__link{color:var(--color-text);max-width:16rem;overflow:hidden;-webkit-text-decoration:underline;text-decoration:underline;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs__link:hover{color:var(--color-text-muted)}.breadcrumbs__link:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.breadcrumbs__separator{color:var(--color-text-soft)}.pagination{font-size:var(--text-xs);gap:var(--space-1)}.pagination,.pagination__item{align-items:center;display:inline-flex}.pagination__item{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;height:2rem;justify-content:center;min-width:2rem;padding:0 var(--space-2);-webkit-text-decoration:none;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}.pagination__item:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text)}.pagination__item:active{background-color:var(--color-muted-bg)}.pagination__item:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.pagination__item--active{background-color:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.pagination__item--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.pagination__next,.pagination__prev{min-width:auto;padding:0 var(--space-2)}.pagination__ellipsis{background-color:transparent;border:none;cursor:default;min-width:auto}.toolbar{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;gap:var(--space-4);justify-content:space-between;padding:var(--space-3) var(--space-4)}.toolbar--dense{padding:var(--space-2) var(--space-3)}.toolbar--spacious{padding:var(--space-4) var(--space-5)}.toolbar__section{align-items:center;display:flex;gap:var(--space-3)}.toolbar__title{font-size:var(--text-sm);font-weight:500}.toolbar__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.footer .nav{display:flex;flex-direction:column;gap:var(--space-2)}.footer .nav.nav--vertical{align-items:flex-start}.footer .nav__item,.footer .nav__link{color:var(--color-footer-text);font-size:var(--text-sm);opacity:.85;padding-left:0;padding-right:0;text-align:left}.footer .nav__item:hover,.footer .nav__link:hover{opacity:1}.footer .nav__item--active,.footer .nav__link--active{font-weight:500;opacity:1}.nav-panel{background-color:var(--color-bg-elevated);border-left:var(--border-width) solid var(--color-border-subtle);bottom:0;box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:var(--space-4);max-width:100%;opacity:0;padding:var(--space-4);pointer-events:none;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .2s ease,opacity .2s ease;width:18rem;z-index:40}.nav-panel--open{opacity:1;pointer-events:auto;transform:translateX(0)}.nav-backdrop{background-color:var(--overlay-backdrop-default);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity .2s ease;z-index:30}.nav-backdrop--visible{opacity:1;pointer-events:auto}.nav--mobile{display:flex;flex-direction:column;gap:var(--space-4)}.nav--mobile .nav__item,.nav--mobile .nav__link{font-size:var(--text-md);padding:var(--space-2) 0}@media (max-width:768px){.nav__toggle{align-items:center;display:inline-flex}}.nav-tabs{align-items:center;border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;gap:var(--space-6);padding-bottom:var(--space-2)}.nav-tabs__item{align-items:center;background:none;border:none;color:var(--color-text);cursor:pointer;display:inline-flex;font-size:var(--text-sm);font-weight:500;justify-content:center;padding:var(--space-1) var(--space-2);position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.nav-tabs__item:hover{color:var(--color-text-muted)}.nav-tabs__item:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.nav-tabs__item--active,.nav-tabs__item[aria-selected=true]{color:var(--color-text);font-weight:600}.nav-tabs__item--active:after,.nav-tabs__item[aria-selected=true]:after{background-color:var(--color-accent);bottom:calc(var(--border-width)*-1);content:"";height:var(--tab-indicator-height);left:0;position:absolute;width:100%}.nav-tabs__item--disabled,.nav-tabs__item[disabled]{cursor:not-allowed;opacity:.45;pointer-events:none}.nav-tabs__item:hover:not(.nav-tabs__item--active):not([aria-selected=true]){background-color:var(--color-surface-subtle);border-radius:var(--radius-sm);color:var(--color-text)}.nav-tabs--compact{gap:var(--space-4);padding-bottom:var(--space-1)}.nav-tabs--compact .nav-tabs__item{font-size:var(--text-xs);padding:var(--space-0_5) 0}.nav-tabs__item{gap:var(--space-2)}.nav-tabs__icon{flex-shrink:0;height:var(--icon-sm);width:var(--icon-sm)}.nav-tabs__badge{align-items:center;background-color:var(--accent-soft-surface,var(--color-accent-soft));border-radius:var(--radius-pill);color:var(--accent-soft-on,var(--color-on-accent));display:inline-flex;flex-shrink:0;font-size:var(--text-xs);font-weight:500;height:1.25rem;justify-content:center;line-height:1;min-width:1.25rem;padding-left:var(--space-1);padding-right:var(--space-1)}.nav-tabs__item--active .nav-tabs__badge,.nav-tabs__item[aria-selected=true] .nav-tabs__badge{background-color:var(--accent-soft-surface-strong,var(--accent-soft-surface));color:var(--accent-soft-on,var(--color-on-accent))}