.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 12.5px; color: var(--ink-soft); }
.breadcrumb button { padding: 2px 4px; background: none; border: none; color: var(--ink-soft); font-size: 12.5px; cursor: pointer; }
.breadcrumb button:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb button.current { color: var(--ink); font-weight: 600; text-decoration: none; }
.breadcrumb .sep { color: var(--ink-faint); }

.filegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  padding: 0 1px 1px 0;
}
.fileitem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  margin: 0 -1px -1px 0; /* collapse neighbouring borders */
}
.fileitem .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  font: 10px "IBM Plex Mono", monospace;
}
.fileitem .nm { padding: 0; background: none; border: none; color: var(--ink); font-size: 12.5px; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.fileitem button.nm { cursor: pointer; }
.fileitem button.nm:hover { text-decoration: underline; }
.fileitem .mt { font-size: 11px; color: var(--ink-faint); }
.fileitem .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.fileitem .acts .btn { padding: 4px 7px; font-size: 10.5px; }