.file-tiles {
  --file-tile-min: calc(var(--sp-600) * 2 + var(--sp-400));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--file-tile-min), 100%), 1fr));
  gap: var(--sp-100);
  outline: none;
}
.file-tiles > .empty-state { grid-column: 1 / -1; }
.file-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-050);
  padding: var(--sp-100) var(--sp-050);
  border-radius: var(--r-s);
  color: var(--ink);
  text-align: center;
  cursor: default;
  user-select: none;
}
.file-tile:hover { background: var(--a-200); }
.file-tiles {
  --file-tile-pick: color-mix(in srgb, var(--acc) 32%, var(--card));
  --file-tile-pick-hover: color-mix(in srgb, var(--acc) 40%, var(--card));
}
.file-tile.picked { background: var(--file-tile-pick); }
.file-tile.picked:hover { background: var(--file-tile-pick-hover); }
.file-tile.drag-live, .file-tile.drag-live:hover { background: var(--card); }
.file-tile.drag-lift { background: var(--card); }
.file-tile.picked.drag-lift { background: var(--file-tile-pick); }
:is(.sblock, .card):has(> .file-tiles > .file-tile.drag-live) { overflow: visible; }
.file-tile.picked.drag-live, .file-tile.picked.drag-live:hover {
  background: var(--file-tile-pick);
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input).file-tile-edit {
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 0 var(--sp-050);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  text-align: center;
}
.file-tile-page {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sp-600);
  height: calc(var(--sp-600) * 1.25);
  color: var(--acc);
}
.file-tile-page > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.file-tile-sheet { fill: var(--card); stroke: var(--line2); stroke-width: 1.5; }
:root[data-theme="dark"] .file-tile-sheet { fill: color-mix(in srgb, var(--card), var(--ink) 16%); }
:root[data-theme="dark"] .file-tile-fold { fill: color-mix(in srgb, var(--card), var(--ink) 30%); }
.file-tile-fold { fill: var(--a-200); stroke: var(--line2); stroke-width: 1.5;
                  stroke-linejoin: round; }
.file-tile-page > .ic { position: relative; margin-top: var(--sp-150); }
.file-tile-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  overflow-wrap: anywhere;
}
.file-tile-sub { max-width: 100%; font-size: var(--fs-s); line-height: var(--lh-s);
                 color: var(--ink2); }
.file-tile-note { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3);
                  white-space: nowrap; }
.file-tiles > .file-tile-tail { grid-column-end: -1; cursor: pointer; }
.file-tile-tail {
  --file-tile-can: calc(var(--sp-600) * 1.5);
  justify-content: center;
}
.file-tile-tail > .file-tile-page {
  width: calc(var(--file-tile-can) * 47 / 72);
  height: calc(var(--file-tile-can) * 67 / 72);
}
.file-tile-page > .tcan {
  --tcan-w: var(--file-tile-can);
  --tcan-rise: var(--sp-600);
  --tcan-shadow: 0 2px 5px rgba(28, 27, 24, .28);
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% calc(-50% - var(--tcan-w) * 3.7 / 72);
}
.file-tile-tail > .file-tile-note:empty { display: none; }
.file-tile-tail:has(.tcan.hot) { background: var(--a-200); }