/* ─── Company Grid ───────────────────────────────────────────────────────── */

.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4);
}

.company-card {
  /* Surface: .surface-group applied in HTML. */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-5);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.company-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.18);
}

.company-card__name {
  font-size: var(--font-size-400);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-strong);
}

.company-card__icons {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
}

.company-card__icon {
  width: var(--app-icon-size);
  height: var(--app-icon-size);
  border-radius: var(--launchpad-icon-radius);
  object-fit: cover;
  flex-shrink: 0;
}

/* ─── App Grid ───────────────────────────────────────────────────────────── */

.app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.app-card {
  /* Surface: .surface-card applied in HTML. */
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  min-height: 13rem;
  border-radius: calc(var(--radius-5) + var(--space-1));
}

.app-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: var(--radius-3);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(var(--theme-rgb) / 0.18) 100%);
  color: rgb(var(--theme-rgb) / 0.95);
  font-size: var(--font-size-500);
  font-weight: var(--font-weight-semibold);
}

.app-card__meta {
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.app-card__title {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-strong);
}

.app-card__summary {
  color: var(--color-text-secondary);
  font-size: var(--font-size-300);
}

.catalog-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  padding-inline: 0;
  padding-block: var(--space-3);
}

.catalog-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-12);
  text-align: center;
}

.catalog-empty__title {
  color: rgb(255 255 255 / 0.82);
  font-size: var(--font-size-600);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.catalog-empty__subtitle {
  color: rgb(255 255 255 / 0.4);
  font-size: var(--font-size-400);
}



.catalog-item {
  display: grid;
  grid-template-columns: var(--catalogue-icon-size) 1fr;
  gap: var(--catalogue-icon-content-spacing);
  align-items: start;
  padding: 0;
}

.catalog-item__icon-link {
  display: block;
  overflow: hidden;
  border-radius: var(--launchpad-icon-radius);
  flex-shrink: 0;
}

.catalog-item__icon {
  display: block;
  width: var(--catalogue-icon-size);
  height: var(--catalogue-icon-size);
  object-fit: cover;
}

/* Universal (new-style) icons: a square asset without baked-in
 * roundness, so we inset via transform and round the image itself. */
.catalog-item__icon--universal {
  transform: scale(0.84);
  border-radius: var(--launchpad-icon-radius);
}

.catalog-item__icon--placeholder {
  color: rgb(var(--theme-rgb) / 0.92);
  font-size: var(--font-size-500);
  font-weight: var(--font-weight-semibold);
}

.catalog-item__body {
  min-width: 0;
}

.catalog-item__meta {
  margin-bottom: 0.15rem;
  color: rgb(255 255 255 / 0.55);
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.catalog-item__title {
  font-size: var(--font-size-300);
  line-height: var(--line-height-snug);
  color: rgb(255 255 255 / 0.96);
}

.catalog-item__title a {
  color: inherit;
  text-decoration: none;
}

.catalog-item__summary {
  margin-top: 0.25rem;
  color: rgb(255 255 255 / 0.65);
  font-size: var(--font-size-200);
}

.catalog-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-2);
}

.catalog-item__tag {
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-2);
  background: rgb(255 255 255 / 0.15);
  color: rgb(255 255 255 / 0.82);
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-medium);
}

/* ─── AppGroup grid ──────────────────────────────────────────────────────── */

.launchpad-grid {
  display: grid;
  grid-template-columns: repeat(var(--launchpad-column-count), var(--app-group-size-1x1));
  grid-auto-rows: var(--app-group-total-height-1x1);
  gap: var(--inter-app-group-spacing);
  grid-auto-flow: dense;
  justify-content: center;
  align-items: stretch;
}

/* ─── AppGroup component ─────────────────────────────────────────────────── */

.launchpad-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--launchpad-group-gap);
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
  height: 100%;
}

.launchpad-group[data-bento="1x1"] {
  width: var(--app-group-size-1x1);
  height: var(--app-group-total-height-1x1);
}

.launchpad-group[data-bento="2x1"] {
  grid-column: span 2;
  width: var(--app-group-size-2x1);
  height: var(--app-group-total-height-1x1);
}

.launchpad-group[data-bento="1x2"] {
  grid-row: span 2;
  width: var(--app-group-size-1x1);
  height: var(--app-group-total-height-2x);
}

.launchpad-group[data-bento="2x2"] {
  grid-column: span 2;
  grid-row: span 2;
  width: var(--app-group-size-2x2);
  height: var(--app-group-total-height-2x);
}

.launchpad-group__icons {
  /* Surface: .surface-group applied in HTML. */
  width: 100%;
  height: calc(100% - var(--launchpad-group-label-height) - var(--launchpad-group-gap));
  min-height: calc(100% - var(--launchpad-group-label-height) - var(--launchpad-group-gap));
  padding: var(--app-group-inset);
  border-radius: var(--launchpad-group-radius);
  overflow: hidden;
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(4, var(--app-icon-size));
  grid-auto-rows: var(--app-icon-size);
  gap: var(--inter-icon-spacing);
  align-content: start;
  justify-content: start;
}

.launchpad-group[data-bento="1x1"] .launchpad-group__icons,
.launchpad-group[data-bento="1x2"] .launchpad-group__icons {
  grid-template-columns: repeat(4, var(--app-icon-size));
}

.launchpad-group[data-bento="2x1"] .launchpad-group__icons {
  grid-template-columns: repeat(9, var(--app-icon-size));
}

.launchpad-group[data-bento="2x2"] .launchpad-group__icons {
  grid-template-columns: repeat(9, var(--app-icon-size));
}

.launchpad-group__text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--launchpad-group-label-height);
  overflow: hidden;
  padding-inline: calc(var(--app-group-inset) * 0.35);
  text-align: center;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.35);
}

.launchpad-group__label {
  display: block;
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: rgb(255 255 255 / 0.9);
  line-height: var(--line-height-snug);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ─── Placeholder icons ──────────────────────────────────────────────────── */

.launchpad-icon {
  width: var(--app-icon-size);
  height: var(--app-icon-size);
  border-radius: var(--launchpad-icon-radius);
  background: rgb(200 210 220 / 0.55);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.launchpad-icon[data-bento="2x2"] {
  width: var(--app-icon-size-2x2);
  height: var(--app-icon-size-2x2);
  grid-column: span 2;
  grid-row: span 2;
}

.launchpad-icon--app {
  background-color: transparent;
  box-shadow: none;
}

/* Universal (new-style) app icons are a square asset without the
 * baked-in squircle — render the art at 82% centered and clip the
 * visible area to a matching rounded-square inset, so the image itself
 * shows rounded corners. */
.launchpad-icon--universal {
  background-size: 82% 82%;
  background-position: center;
  clip-path: inset(9% round var(--launchpad-icon-radius));
}

.launchpad-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--app-icon-size));
  gap: calc(var(--inter-icon-spacing) * 3) calc(var(--inter-icon-spacing) * 5);
  justify-content: center;
}

.launchpad-app {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  color: rgb(255 255 255 / 0.9);
  text-align: center;
  text-decoration: none;
}

.launchpad-app__label {
  width: calc(var(--app-icon-size) * 2.25);
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.35);
  white-space: nowrap;
}

.launchpad-empty {
  color: rgb(255 255 255 / 0.72);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.launchpad-grid > .launchpad-group,
.launchpad-group__icons > .launchpad-icon {
  min-width: 0;
  min-height: 0;
}

@media (max-width: 70rem) {
  :root {
    --sidebar-width: 16rem;
    --launchpad-column-count: 3;
    --site-background-bleed: 4rem;
    --site-background-scale: 1.08;
    --site-background-saturate: 1.12;
    --site-background-theme-alpha: 0.08;
    --site-background-shade-alpha: 0.05;
  }

  .app-grid {
    grid-template-columns: 1fr;
  }

  .catalog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-item {
    grid-template-columns: 5rem minmax(0, 1fr);
  }

  .catalog-item__icon,
  .catalog-item__icon-link {
    width: 5rem;
  }
}

@media (max-width: 56rem) {
  :root {
    --launchpad-column-count: 2;
    --page-inline-padding: var(--space-2);
    --site-background-bleed: 2rem;
    --site-background-scale: 1.04;
    --site-background-saturate: 1;
    --site-background-theme-alpha: 0.04;
    --site-background-shade-alpha: 0.03;
  }

  .sidebar {
    height: 100vh;
    padding: var(--space-4) 0 var(--space-4) var(--space-4);
  }

  .sidebar__inner {
    gap: var(--space-4);
  }

  .content-area {
    height: 100vh;
    overflow-y: auto;
    padding: var(--space-2) 0 var(--space-8);
  }

  .catalog-list {
    grid-template-columns: 1fr;
  }
}