/* ===========================================================================
   App switcher

   The row of Four Leaf apps between the wordmark and the page nav. Ships as a
   pair with `js/ui/app-nav.js` and is meant to be copied whole into the
   launcher and the maths tools, so it depends on nothing but the theme tokens
   every one of those apps already defines.

   It has to read as a *different kind* of control from the rail links below
   it — those change the page, these leave the app — which is why it is a row
   of tiles rather than three more rows in the same list.
   ======================================================================== */
.apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 0 10px 12px;
  border-bottom: 1px solid var(--line);
  /* The rail is resizable, so the tiles' own width is what decides whether
     the labels fit — not the viewport. */
  container-type: inline-size;
}

.apps__app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 9px 2px 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  text-decoration: none;
  transition: background 0.12s var(--ease), color 0.12s var(--ease),
    border-color 0.12s var(--ease);
}

.apps__app svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.apps__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Sized to the longest label — "Launchpad" — at the default rail width.
     Two characters more than the next longest, and it is what sets the floor
     for every number in this block. */
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.apps__app:hover {
  background: var(--surface-sunk);
  color: var(--ink);
  border-color: var(--line);
}

.apps__app:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.apps__app[aria-current] {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Narrow rail: the icon and its tooltip carry it. A clipped "LAUNCHPA…" says
   less than the icon alone and costs a line of height to say it. The threshold
   is where the longest label stops fitting, not a round number. */
@container (max-width: 194px) {
  .apps__label {
    display: none;
  }
  .apps__app {
    padding: 9px 2px;
  }
}

/* The mobile rail is a horizontal strip, so the switcher becomes a fixed
   cluster at its start rather than a third of an unbounded row. */
@media (max-width: 760px) {
  .apps {
    flex: none;
    gap: 2px;
    padding: 8px 10px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    /* Containment makes the block's width independent of its contents, which
       is the point on the rail and a collapse to nothing anywhere it is sized
       to fit — a grid `auto` track, a flex item. The labels are hidden here
       anyway, so there is no query left to answer. */
    container-type: normal;
  }
  .apps__label {
    display: none;
  }
}