/* Remove link decoration */
a {
    text-decoration: none;
    color: inherit;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.ellipsis.is-expanded { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; cursor: zoom-out; }

/* Disable zoom cursor for ellipsis text inside interactable elements */
a .ellipsis,
button .ellipsis,
[onclick] .ellipsis,
.ellipsis:is(a, button, [onclick]) {
    cursor: inherit;
}
.text-nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* --- Dynamic Scroll-Based Elevation (Pure CSS Hybrid) --- */
.overflow-x-auto {
    overflow-x: auto;
    touch-action: auto;
    overscroll-behavior-x: none;
    container-type: scroll-state;
    scroll-timeline-name: --overflow-x;
    scroll-timeline-axis: inline;
}

.overflow-y-auto {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    container-type: scroll-state;
    scroll-timeline-name: --overflow-y;
    scroll-timeline-axis: block;
}

.rail-body, .panel-body {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    container-type: scroll-state;
    scroll-timeline-name: --overflow-y;
    scroll-timeline-axis: block;
}

.view-item {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    container-type: scroll-state;
    scroll-timeline-name: --overflow-y;
    scroll-timeline-axis: block;
}

.overflow-hidden { overflow: hidden; }
.break-all { word-break: break-all; }

/* Method 1: Scroll Timeline (Linked Animation) */
.overflow-x-auto > [class*="b-"],
.overflow-x-auto > * > [class*="b-"] {
}

.overflow-y-auto > [class*="b-"],
.overflow-y-auto > * > [class*="b-"],
.rail-body > [class*="b-"],
.rail-body > * > [class*="b-"],
.panel-body > [class*="b-"],
.panel-body > * > [class*="b-"],
.view-item .row-item {
}

/* Specificity Win: Ensure Stagger Items can still fade in even if they are row-items */
.view-item .row-item {
    opacity: 1; /* Force visibility in case animation-fill-mode fails */
}

/* Global Transition for Elevation */
[class*="b-"] {
}

.stagger-item {
    opacity: 1;
}

.animate-fade-in { opacity: 1; visibility: visible; }
.animate-fade-out { opacity: 0; visibility: hidden; }

.view-item.hidden { display: none; }
.view-item.active-view { opacity: 1; visibility: visible; }
.view-item {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    flex: 1;
    flex-basis: auto;
    background: var(--bg-1);
    isolation: isolate;
}

/* --- Layered Header Stacking --- */
.page-header {
    z-index: var(--z-header, 80);
}

@media screen and (min-width: 48rem) {
    .ratio-md-3 { aspect-ratio: 1 / 1 !important; }
}

.table-header {
    position: sticky;
    top: 0;
    background: var(--bg-1);
    z-index: var(--z-header, 80);
}

[data-glass="on"] .table-header {
    background: color-mix(in srgb, var(--bg-1), transparent var(--glass-opacity));
    backdrop-filter: blur(var(--glass-blur, 20px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 20px));
}

.table-header {
    top: 0;
}

/* Stacked view styling (Overlays) */
.view-item:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: none;
}

/* Transitions */
.view-item.slide-in {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.view-item.slide-out {
    display: none;
}

.view-item.go-deep {
    position: absolute;
    top: 0; left: 0;
}

.view-item.come-back {
    position: absolute;
    top: 0; left: 0;
}

.view-item.slide-out-to-left {
    display: none;
}

.view-item.slide-in-from-left {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
}

.view-item.slide-in-from-right {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
}

.view-item.slide-out-to-right {
    display: none;
}

.view-item.slide-in-from-bottom {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
}

.view-item.slide-out-to-bottom {
    display: none;
}

.view-item.slide-in-from-top {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
}

.view-item.slide-out-to-top {
    display: none;
}

.view-item.revealing {
    display: flex;
}

/* --- High-Contrast Theme Toggle --- */
#theme-toggle { }

/* Global Interactive Feedback (CSS Haptics) */
.interactive-row, .rail-item, .nav-item, .topbar-btn, button {
    transition: transform var(--m-fast) var(--m-spring);
}

.interactive-row:hover, .rail-item:hover, .nav-item:hover, .topbar-btn:hover, button:hover {
    transform: scale(1.015);
}

.interactive-row:active, .rail-item:active, .nav-item:active, .topbar-btn:active, button:active {
    transform: scale(0.97);
}

/* Default: Dark button (suggesting switch to Dark or representing Light state) */
#theme-toggle {
    background-color: #000000;
    color: #ffffff;
}

/* Explicit Dark Mode: Light button */
[data-theme="dark"] #theme-toggle {
    background-color: #ffffff;
    color: #000000;
}

/* Explicit Light Mode: Dark button */
[data-theme="light"] #theme-toggle {
    background-color: #000000;
    color: #ffffff;
}

/* System Mode with Dark Preference: Light button */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #theme-toggle {
        background-color: #ffffff;
        color: #000000;
    }
}