.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.crumbs__item + .crumbs__item::before {
  content: "/";
  margin-inline-end: var(--space-2);
  color: var(--text-muted);
}

.files__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.files__pick {
  margin-inline-end: var(--space-2);
}

.files__bulk {
  margin-block-end: var(--space-3);
}

.files__drop {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--card-pad);
  border: var(--drop-edge) dashed var(--divider);
  border-radius: var(--radius-well);
}

.files__drop.is-over {
  border-color: var(--link);
  background: var(--accent-muted);
}

.files__queue {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.files__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.files__item--error {
  color: var(--status-error);
}

.files__file {
  overflow-wrap: anywhere;
}

.cm-editor {
  height: var(--editor-h);
  border-radius: var(--radius-well);
  background: var(--field-bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-md);
}

.cm-editor.cm-focused {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cm-scroller {
  font-family: inherit;
  overflow: auto;
}

.cm-gutters {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 0;
}

.cm-activeLine,
.cm-activeLineGutter {
  background: var(--accent-muted);
}

.cm-cursor {
  border-inline-start-color: var(--text);
}

.cm-selectionBackground,
.cm-editor .cm-selectionBackground {
  background: var(--accent-muted);
}

.tok-keyword,
.tok-operatorKeyword,
.tok-modifier {
  color: var(--link);
}

.tok-string,
.tok-string2,
.tok-regexp {
  color: var(--status-ok);
}

.tok-number,
.tok-bool,
.tok-atom {
  color: var(--status-warn);
}

.tok-comment {
  color: var(--text-muted);
  font-style: italic;
}

.tok-typeName,
.tok-className,
.tok-tagName,
.tok-attributeName {
  color: var(--status-busy);
}

.tok-invalid {
  color: var(--status-error);
}

.editor--ready textarea {
  display: none;
}

.grid td,
.grid th {
  max-width: var(--cell-max);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid__null {
  color: var(--text-muted);
}

.code {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-well);
  background: var(--terminal-bg);
  color: var(--terminal-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow: auto;
}

.history > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  cursor: pointer;
}

.history__list {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
}

.history__item {
  text-align: start;
  justify-content: flex-start;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.fm {
  display: grid;
  gap: var(--space-3);
  padding: var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.fm.is-over {
  outline: var(--drop-edge) dashed var(--link);
  background: var(--accent-muted);
}

.fm__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.fm__body {
  display: grid;
  grid-template-columns: var(--fm-side-w) minmax(0, 1fr);
  gap: var(--space-4);
}

.fm__side {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-inline-end: var(--space-4);
  border-inline-end: 1px solid var(--divider);
}

.fm__places {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.fm__place {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  text-decoration: none;
}

.fm__place:hover {
  color: var(--text);
}

.fm__place[aria-current] {
  background: var(--surface-2);
  color: var(--text);
}

.fm__place--trash {
  border-top: 1px solid var(--divider);
  border-radius: 0;
  padding-top: var(--space-3);
}

.fm__main {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
}

.fm__tools {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.fm__search {
  flex: 1;
  min-width: 0;
}

.fm__search .input {
  width: 100%;
}

.fm__views {
  display: flex;
  gap: var(--space-1);
}

.fm__view {
  display: grid;
  place-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}

.fm__view[aria-current] {
  background: var(--surface-2);
  color: var(--text);
}

.fm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fm-tile-w)), 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.fm__tile {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--divider);
  border-radius: var(--radius-well);
}

.fm__tilename {
  min-width: 0;
}

.fm__tilemenu {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
}

@media (width < 48rem) {
  .fm__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .fm__side {
    padding-inline-end: 0;
    border-inline-end: 0;
    border-block-end: 1px solid var(--divider);
    padding-block-end: var(--space-3);
  }

  .fm__places {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }

  .fm__place--trash {
    border-top: 0;
    padding-top: var(--space-2);
  }
}