/* XCodefix One — the front door.
   Everything else comes from the shared platform sheet. */

.app-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.app-tile-form { display: contents; }

.app-tile {
  display: grid; gap: 6px; align-content: start; text-align: left; width: 100%;
  padding: var(--space-6); font: inherit; color: var(--text); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  /* The accent is a left edge rather than a fill: eight saturated tiles compete
     with each other and with the content they are meant to introduce. */
  border-left: 3px solid var(--tile-accent);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
button.app-tile:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
button.app-tile:focus-visible { outline: 2px solid var(--tile-accent); outline-offset: 2px; }

.app-tile-icon { color: var(--tile-accent); }
.app-tile b { font-size: var(--text-lg); }
.app-tile small { color: var(--text-2); }
.app-tile-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-2);
}

/* An app that does not exist yet is shown, not hidden: the point of a front door
   is to say what the building contains. */
.app-tile.is-soon { opacity: .62; cursor: default; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .app-tile { transition: none; }
  button.app-tile:hover { transform: none; }
}