/* Files panel: tiles, newest first, labelled with the posting date. */
.files { --panel-width: 88ch; }

.files__room {
  align-items: center;
  display: flex;
  font-size: 1.15em;
  gap: 0.5em;
  margin-block: var(--block-space) 0.25em;
}

.files__month {
  color: oklch(var(--fu-muted));
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-block: var(--block-space) 0.5em;
  text-transform: uppercase;

  @media (prefers-color-scheme: dark) { color: oklch(var(--fu-night-muted)); }
}

.file-grid {
  display: grid;
  gap: 0.8em;
  grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-tile {
  background-color: oklch(var(--lch-white));
  border: 1px solid oklch(var(--lch-gray-darker));
  border-radius: 0.8em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-tile__media {
  aspect-ratio: 4 / 3;
  background-color: oklch(var(--lch-gray));
  display: block;
  overflow: hidden;
}

.file-tile__image {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

.file-tile__icon {
  align-items: center;
  block-size: 100%;
  display: flex;
  justify-content: center;
}

.file-tile__ext {
  background-color: oklch(var(--fu-cyan));
  border-radius: 0.4em;
  color: oklch(var(--fu-ink));
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.3em 0.7em;
}

.file-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: 0.6em 0.7em 0.2em;
}

.file-tile__date {
  color: oklch(var(--fu-deep-text));
  font-size: 0.75em;
  font-weight: 600;

  @media (prefers-color-scheme: dark) { color: oklch(var(--fu-cyan)); }
}

.file-tile__name {
  font-size: 0.9em;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-tile__meta {
  color: oklch(var(--fu-muted));
  font-size: 0.75em;

  @media (prefers-color-scheme: dark) { color: oklch(var(--fu-night-muted)); }
}

.file-tile__actions {
  display: flex;
  gap: 0.4em;
  padding: 0.5em 0.7em 0.7em;

  .btn { --btn-padding: 0.3em 0.7em; font-size: 0.8em; }
}