/* =====================================================================
   📁 Finder App
   ===================================================================== */

.finder-content {
  display: flex;
  padding: 0;
  height: 100%;
}
.finder-sidebar {
  width: 150px;
  background: #e0e0e0;
  padding: 10px;
  border-right: 2px solid #000;
  flex-shrink: 0;
}
.sidebar-item {
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.sidebar-item.active,
.sidebar-item:hover { background: #000; color: #fff; }

.finder-main {
  flex-grow: 1;
  padding: 15px;
}
.finder-main-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-height: 100%;
}
/* 2px of side padding rather than 4, which is 4px more label inside the same
   80px cell and the same grid. Measured: the widest one-word label in the app
   is `Community` at 74px and `Calculator` lands on exactly 72, so both were
   breaking a single word across two lines against a 72px column while nothing
   else needed the room. Every remaining wrap is now at a space or at a dot. */
.finder-icon {
  width: 80px;
  padding: 6px 2px;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  user-select: none;
}
.finder-icon.selected {
  background: #000;
  color: #fff;
}
/* hyphens: manual, i.e. only where a soft hyphen was actually typed. `auto` was
   inserting its own, and half the labels in this app are filenames: the one the
   whole endgame turns on rendered as `in-staller.d-mg` in Downloads, with a
   hyphen dropped into the middle of the extension. The Security Monitor thread
   tells the player to go and look at that exact filename, so it has to be the
   exact filename. overflow-wrap still breaks a label too long for the 80px
   column — it just breaks it without inventing a character. */
.finder-icon span {
  display: block;
  font-size: 14px;
  margin-top: 6px;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: manual;
}
.finder-icon.selected span {
  color: inherit;
}

/* Leaf images are their own icons, so they are framed like prints on a contact
   sheet: cropped square so mixed aspect ratios still line up in the grid, and
   hard-bordered so a pale image still reads as a file. Folders never take this
   class; a container should look like a container. */
.finder-icon img.finder-thumb {
  object-fit: cover;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  background: #fff;
}
.finder-icon.selected img.finder-thumb {
  border-color: #fff;
}

.finder-socials-folder .android-folder-box {
  background: #e0e0e0;
  border: 2px solid #999;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
  backdrop-filter: none;
}

.finder-socials-folder .android-folder-grid img {
  width: 14px;
  height: 14px;
}

.finder-socials-folder.selected .android-folder-box {
  background: #bdbdbd;
  border-color: #fff;
}