.archive,
.archive-directory,
.archive-file {
    --archive-entry-min-width: 16rem;
    padding-block: var(--size-max);
    display: grid;
    gap: var(--size-max);
}

.archive__container,
.archive-directory__container,
.archive-file__container {
    display: grid;
    gap: var(--size-lg);
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding-inline: var(--page-side-padding);
    width: 100%;
}

.archive__header {
    display: grid;
    gap: var(--size-sm);
    max-width: 56rem;
}

.archive__title,
.archive-directory__title,
.archive-file__title {
    font-size: clamp(2rem, 3vw + 1rem, 2.5rem);
    font-weight: 700;
}

.archive__description,
.archive-file__description {
    color: var(--color-secondary);
    line-height: 1.6;
}

.archive__body {
    display: grid;
    gap: var(--size-max);
}

.archive-tree {
    display: grid;
    gap: var(--size-base);
}

.archive-tree-title,
.archive-directory-files-title {
    margin-bottom: var(--size-sm);
}

.archive-tree__hint,
.archive-tree__empty {
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
}

.archive-tree__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--size-sm);
    grid-template-columns: repeat(auto-fit, minmax(var(--archive-entry-min-width), 1fr));
}

.archive-tree__item {
    gap: var(--size-sm);
    min-width: 0;
}

.archive-tree__entry {
    display: flex;
    height: 100%;
}

.archive-tree__entry-link {
    display: flex;
    align-items: center;
    gap: var(--size-sm);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: var(--size-base);
    border: 1px solid var(--color-border);
    height: 100%;
    width: 100%;
}

.archive-tree__entry-link:hover {
    border-color: var(--color-border-hover);
}

.entry-link__icon {
    height: calc((var(--size-mid) + var(--size-base)) / 2);
    width: calc((var(--size-mid) + var(--size-base)) / 2);
    stroke: var(--color-text);
    fill: var(--color-text);
}

.archive-breadcrumbs {
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
}

.archive-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.archive-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.archive-breadcrumbs__link {
    color: var(--color-secondary);
    text-decoration: none;
}

.archive-breadcrumbs__link:hover,
.archive-breadcrumbs__link:focus-visible {
    text-decoration: underline;
}

.archive-directory__header,
.archive-file__header {
    display: grid;
    gap: var(--size-sm);
    max-width: 56rem;
}

.archive-directory__sections {
    display: grid;
    gap: var(--size-max);
}

.archive-directory__panel {
    display: grid;
    gap: var(--size-base);
}

.archive-directory__items {
    list-style: none;
    display: grid;
    border-top: 1px solid var(--color-border);
}

.archive-directory__items--directories {
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--size-sm);
    grid-template-columns: repeat(auto-fit, minmax(var(--archive-entry-min-width), 1fr));
    border-top: none;
}

.archive-directory__items:not(.archive-directory__items--directories) .archive-directory__item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--size-sm);
    gap: var(--size-sm);
    flex: 1;
    border-bottom: 1px solid var(--color-border);
}

.archive-directory__item-title {
    font-size: var(--font-size-base);
    font-weight: 600;
}

.archive-directory__item-link {
    color: var(--color-primary);
    text-decoration: none;
}

.archive-directory__item-link:hover,
.archive-directory__item-link:focus-visible {
    text-decoration: underline;
}

.archive-directory__item-description {
    color: var(--color-secondary);
    line-height: 1.6;
}

.archive-directory__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-base);
    border-bottom: 1px solid var(--color-border);
    padding: var(--size-sm) 0;
}

.archive-directory__file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-sm);
    align-items: center;
}

.archive-directory__file-meta {
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
}

.archive-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-xs);
    padding: var(--size-sm) var(--size-base);
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-opposite);
}

.archive-button:hover,
.archive-button:focus-visible {
    background: var(--color-primary-hover);
    text-decoration: none;
}

.archive-button--ghost {
    background: transparent;
    color: var(--color-primary);
}

.archive-button--ghost:hover,
.archive-button--ghost:focus-visible {
    background: color-mix(in srgb, var(--color-primary-transparent) 70%, transparent);
}

.archive-file__meta {
    display: flex;
    gap: var(--size-base);
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    flex-wrap: wrap;
}

.archive-file__meta-item {
    flex: 1;
    display: grid;
    gap: var(--size-sm);
    white-space: nowrap;
}

.archive-file__meta-label {
    font-weight: 600;
    color: var(--color-text);
}

.archive-file__preview {
    display: grid;
    gap: var(--size-sm);
}

.archive-file__iframe {
    width: 100%;
    min-height: 75vh;
    border: none;
    border-radius: var(--size-sm);
    background: var(--color-bg);
}

.archive-file__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.archive-file__preview-hint {
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
}