/* Files panel (mod page + each version) */

.pf-k-assembly { --k: var(--clr-accent-5); }
.pf-k-docs     { --k: var(--clr-accent-2); }
.pf-k-symbols  { --k: var(--clr-accent-1); }
.pf-k-native   { --k: var(--clr-accent-3); }
.pf-k-image    { --k: var(--clr-accent-6); }
.pf-k-text     { --k: var(--clr-text-muted); }
.pf-k-other    { --k: var(--clr-accent-8); }

.pf > summary { list-style: none; cursor: pointer; }
.pf > summary::-webkit-details-marker, .pf-tree summary::-webkit-details-marker { display: none; }
.pf-head { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; font-size: 0.9rem; color: var(--clr-text-muted); }
.pf-head:focus-visible, .pf-tree summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--clr-link) 60%, transparent); outline-offset: 2px; border-radius: var(--radius-small); }
.pf-headline { flex: 1; min-width: 0; }
.pf-headline b { color: var(--clr-text); font-weight: 650; font-variant-numeric: tabular-nums; }
.pf-show { font-size: 0.85rem; font-weight: 600; color: var(--clr-link); white-space: nowrap; }
.pf-show::before { content: 'Show files'; }
.pf[open] > summary .pf-show::before { content: 'Hide files'; }
.pf-head:hover .pf-show { text-decoration: underline; }

.pf-caret { width: 1rem; flex: none; display: inline-flex; justify-content: center; color: var(--clr-text-muted); }
.pf-caret::before { content: ''; border: 4.5px solid transparent; border-left: 6px solid currentColor; border-right: 0; transition: transform 0.12s; }
.pf[open] > summary .pf-caret::before, .pf-tree details[open] > summary .pf-caret::before { transform: rotate(90deg); }
.pf-caret--none::before { visibility: hidden; }

/* mod page: the panel is the card */
.modl-card.pf { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.pf--mod[open] { padding-bottom: 1rem; }

/* versions page: a quiet row like the moderator controls */
.pf--version { margin-top: 0.75rem; padding-top: 0.4rem; border-top: 1px dashed var(--clr-border); }
.pf--version .pf-head { min-height: 32px; font-size: 0.8rem; }
.pf--version .pf-show { font-size: 0.8rem; }

.pf-body { margin-top: 0.4rem; }
.pf-status { margin: 0.4rem 0; font-size: 0.85rem; color: var(--clr-text-muted); }
.pf-totals { margin: 0; font-size: 0.85rem; color: var(--clr-text-muted); }
.pf-totals b { color: var(--clr-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-sep { margin: 0 0.3rem; }

.pf-bar { display: flex; gap: 2px; height: 8px; margin: 0.7rem 0 0.55rem; border-radius: 999px; overflow: hidden; background: var(--clr-surface-alt); }
.pf-bar i { display: block; min-width: 3px; flex-basis: 0; background: var(--k); }
.pf-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--clr-text-muted); }
.pf-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.pf-legend li::before { content: ''; width: 9px; height: 9px; border-radius: 2px; background: var(--k); }
.pf-legend b { color: var(--clr-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.pf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0.5rem; }
.pf-filter { flex: 1 1 220px; min-width: 0; font-size: 0.88rem; }
.pf-expand { font-size: 0.85rem; }

.pf-tree { margin-top: 0.6rem; border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-bg); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.82rem; overflow-x: auto; }
.pf-tools + .pf-tree { margin-top: 0; }
.pf-tree ul { list-style: none; margin: 0; padding: 0; }
.pf-tree ul ul { margin-left: 1.05rem; border-left: 1px solid var(--clr-border); }
.pf-tree summary { list-style: none; cursor: pointer; }
.pf-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; min-height: 28px; padding: 0.15rem 0.7rem 0.15rem 0.5rem; white-space: nowrap; }
.pf-row:hover { background: var(--clr-surface-alt); }
.pf-name { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.pf-tree .pf-caret { width: 2.7rem; }
.pf-dir { font-weight: 650; }
.pf-empty .pf-dir { font-weight: 400; color: var(--clr-text-muted); }
.pf-count { font-family: system-ui, sans-serif; font-size: 0.74rem; color: var(--clr-text-muted); }
.pf-ext { flex: none; width: 2.7rem; padding: 0.2rem 0; border-radius: 3px; text-align: center; font: 700 0.6rem/1 system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--k); background: color-mix(in srgb, var(--k) 15%, transparent); border: 1px solid color-mix(in srgb, var(--k) 35%, transparent); }
.pf-size { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--clr-text-muted); font-variant-numeric: tabular-nums; }
.pf-meter { display: inline-block; width: 56px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--clr-surface-alt); }
.pf-meter i { display: block; height: 100%; background: color-mix(in srgb, var(--clr-text-muted) 70%, transparent); }
.pf-chip { font: 600 0.68rem/1 system-ui, sans-serif; color: var(--clr-text-muted); border: 1px dashed var(--clr-border); border-radius: 999px; padding: 0.16rem 0.5rem; }
.pf-chip--meta { color: var(--clr-accent-8); border: 1px solid color-mix(in srgb, var(--clr-accent-8) 40%, transparent); }
.pf-nomatch, .pf-foot { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--clr-text-muted); }

@media (max-width: 600px) {
	.pf-meter { display: none; }
	.pf-head { flex-wrap: wrap; row-gap: 0.1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.pf-caret::before { transition: none; }
}

.modl--final #fn-files .op-h::before { background: var(--clr-accent-8); }