.filesystem {
    color: var(--white-alpha-muted);
    font-family: var(--font-family-base);
    font-size: var(--font-prose);
    line-height: var(--line-height-loose);
    padding: var(--space-xl) 0;
}

.filesystem-body {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: 1fr;
}

.filesystem-tree {
    align-self: stretch;
    background: var(--card-bg);
    border: var(--border-s) solid var(--white-alpha-border);
    border-radius: var(--radius-md);
    min-width: 0;
}

.tree-scroll {
    min-width: 0;
    overflow: hidden;
    padding: var(--space-md);
}

.tree-title {
    color: var(--tab-accent);
    font-family: var(--font-family-heading);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    margin: 0 0 var(--space-sm);
    text-transform: uppercase;
}

.tree-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--indent-tree);
}

.tree-root {
    padding: 0;
}

.tree-folder > .tree-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--space-xxs);
    list-style: none;
    min-width: 0;
}

.tree-folder > .tree-summary::-webkit-details-marker {
    display: none;
}

.tree-chevron {
    color: var(--accent-half);
    font-size: var(--font-xs);
    transition: transform var(--transition-fast);
}

.tree-folder[open] > .tree-summary > .tree-chevron {
    transform: rotate(var(--rotate-quarter));
}

.tree-link {
    align-items: center;
    border-radius: var(--radius-xs);
    color: var(--white-alpha-secondary);
    display: inline-flex;
    font-size: var(--font-sm);
    gap: var(--space-xs);
    max-width: var(--percent-full);
    min-width: 0;
    padding: 0 var(--space-xs);
}

.tree-file {
    margin-left: var(--indent-tree);
}

.tree-name {
    white-space: nowrap;
}

.tree-icon {
    color: var(--accent-half);
    flex: none;
}

.tree-link:hover {
    background: var(--overlay-subtle);
    color: var(--white);
}

.tree-link.active {
    background: var(--overlay-subtle);
    color: var(--tab-accent);
}

.tree-link.active .tree-icon {
    color: var(--tab-accent);
}

.filesystem-view {
    min-width: 0;
    overflow-anchor: none;
}

.filesystem-node + .filesystem-node {
    border-top: var(--border-s) solid var(--white-alpha-border);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}

.filesystem-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0 0 var(--space-xs);
}

.filesystem-crumb {
    align-items: center;
    color: var(--accent-half);
    display: inline-flex;
    font-size: var(--font-xs);
    gap: var(--space-xxs);
}

.filesystem-crumb + .filesystem-crumb {
    border-left: var(--border-s) solid var(--white-alpha-border);
    padding-left: var(--space-xs);
}

.filesystem-crumb:hover {
    color: var(--tab-accent);
}

.filesystem-node-title {
    color: var(--tab-accent);
    font-family: var(--font-family-heading);
    font-size: var(--font-xxl);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-sm);
    overflow-wrap: anywhere;
}

.filesystem-intro {
    color: var(--text-light-gray);
    font-size: var(--font-regular);
    margin: 0 0 var(--space-lg);
}

.filesystem-listing-title {
    color: var(--tab-accent);
    font-family: var(--font-family-heading);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    margin: var(--space-lg) 0 var(--space-sm);
    text-transform: uppercase;
}

.filesystem-metrics > .filesystem-listing-title {
    margin-top: 0;
}

.filesystem-listing {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(min(var(--percent-full), var(--width-card-min)), 1fr));
}

.filesystem-card {
    background: var(--card-bg);
    border: var(--border-s) solid var(--white-alpha-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    padding: var(--space-md) var(--space-lg);
}

.filesystem-card-title {
    align-items: center;
    color: var(--tab-accent);
    display: inline-flex;
    font-family: var(--font-family-heading);
    font-size: var(--font-md);
    font-weight: var(--font-weight-semibold);
    gap: var(--space-xs);
    min-width: 0;
}

.filesystem-card-title:hover {
    color: var(--white);
}

.filesystem-card-text {
    color: var(--white-alpha-secondary);
    font-size: var(--font-sm);
    margin: 0;
}

.filesystem-intro strong,
.filesystem-card-text strong,
.filesystem-node .record-field-value strong {
    color: var(--tab-accent);
    font-weight: var(--font-weight-semibold);
}

.filesystem-node .record-field-value a,
.filesystem-node .record-chip a {
    color: var(--white);
}

.filesystem-node .record-field-value a:hover,
.filesystem-node .record-chip a:hover {
    color: var(--tab-accent);
}

.filesystem-node > .chapter-panel,
.filesystem-node > .record-chips {
    margin: 0 0 var(--space-md);
}

.filesystem-node .diagram-canvas {
    contain: size;
    flex: none;
    height: var(--height-diagram-collapsed);
}

@media (width >= 56.25rem) {
    .filesystem-body {
        grid-template-columns: fit-content(var(--width-tree-max)) minmax(0, 1fr);
    }
}