/* Launcher: a responsive app-tile grid, comfortable on phone, tablet and PC. */

state.loading panel:not([name="loading"]),
state.apps panel:not([name="apps"]) {
  display: none;
}

/* A tile filtered out of the current view (a tag tile in tag view, or a tagged
   app at the top level) is hidden but kept in the DOM. */
.tiles .hidden {
  display: none;
}

/* shell.css `.tiles` already lays out a responsive auto-fill grid; nudge the
   tile floor a little larger so icons stay a good tap target on touch devices,
   and cap the very smallest screens at two columns. */
panel[name="apps"].tiles {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1.25rem;
  padding-top: 0.5rem;
}

@media (max-width: 360px) {
  panel[name="apps"].tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

app {
  padding: 1.1rem 0.6rem;
}

app appicon {
  width: 64px;
  height: 64px;
}

/* The monogram fallback fills the larger launcher tile more prominently (the
   apps-list row keeps the smaller shared size from shell.css). */
app appicon.initials {
  font-size: 2.4rem;
  letter-spacing: 0;
}

/* An app's version: a small, quiet badge straddling the icon's bottom-right
   corner. Absolutely placed, so it never shifts the icon or its monogram. */
app appicon:has(appversion) {
  position: relative;
}

app appicon appversion {
  position: absolute;
  right: -8px;
  bottom: -6px;
  max-width: calc(100% + 4px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 5px;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  opacity: 0.85;
}

/* A tag tile is a folder of apps, not an app: badge its (otherwise app-like)
   square with a small folder glyph in the corner to signal that. */
app[data-tag] appicon {
  position: relative;
}

app[data-tag] appicon::after {
  content: "folder";
  font-family: "Material Icons";
  position: absolute;
  right: -6px;
  bottom: -6px;
  font-size: 20px;
  line-height: 1;
  padding: 2px;
  color: var(--accent);
  background: var(--panel);
  border-radius: 50%;
}