/* L'hub: la griglia dei tool. Solo ciò che è suo, i token e tutto il resto
   vengono da /ui.css.

   L'hub è l'unica pagina della suite che respira: larghezza minore, titolo
   più grande, ritmo più largo, testo base più grande. Non è gusto, è il
   compito: qui si scegli fra dieci cose, dentro un tool si confrontano
   molti dati. Il segnale "dove sono" viene dalla densità, non da un colore
   diverso. */

.app-main--hub {
  max-width: var(--w-hub);
  padding-top: var(--sp-7);
}

.app-main--hub .page-intro {
  margin-bottom: var(--sp-7);
}

.app-main--hub .page-intro__title {
  font-size: var(--fs-hub);
}

.app-main--hub .page-intro__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-read);
}

/* La barra: un campo stretto, non una ricerca da motore. Qui si cerca un nome
   che si conosce già, non si esplora un catalogo sconosciuto. */
.hub-barra {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.hub-barra__campo {
  flex: 0 1 320px;
}

.hub-barra__conteggio {
  color: var(--ink-3);
  font-size: var(--fs-meta);
}

/* Il segno della scorciatoia sta dentro il campo, spento: è un promemoria per chi
   usa la tastiera, non un elemento da leggere. */
.hub-barra .input-wrap__affix {
  color: var(--ink-3);
  font-family: var(--font-mono);
}

/* La prima sezione non prende il margine di .group: sotto la barra il ritmo è già
   dato, e un salto in più farebbe sembrare la barra scollegata dall'elenco. */
.hub-sezione:first-child {
  margin-top: 0;
}

/* L'intestazione di sezione deve dominare le card che contiene, altrimenti la
   gerarchia si inverte e le sezioni sembrano etichette perse fra le card. Sta
   sopra un filetto che percorre tutta la riga: il raggruppamento si legge dalla
   regione comune, non dal solo testo. */
.hub-sezione > .group__title {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-title);
}

.hub-vuoto {
  padding: var(--sp-6) 0;
  color: var(--ink-2);
  font-size: var(--fs-ui);
}

/* Il blocco dei tool non abilitati: separato dal resto da uno stacco più largo di
   quello fra le sezioni, perché non è un'altra famiglia di lavoro, è un'altra cosa. */
.hub-bloccati {
  margin-top: var(--sp-8);
}

.hub-bloccati > summary {
  color: var(--ink-2);
  font-size: var(--fs-ui);
  font-weight: var(--fw-normal);
}

.hub-bloccati > .hint {
  margin-top: var(--sp-3);
}

.hub-bloccati > .tool-grid {
  margin-top: var(--sp-4);
}

.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .tool-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-1), background-color var(--dur-1), transform var(--dur-1);
}

a.tool-card:hover {
  background: var(--surface-2);
  border-color: var(--border-field-hover);
  color: var(--ink);
  /* Un pixel, non due: a due la griglia sobbalza. E non si muove sul focus da
     tastiera, dove uno spostamento rende più difficile seguire il segno. */
  transform: translateY(-1px);
}

a.tool-card:active {
  background: var(--surface-3);
  transform: translateY(0);
}

/* Un gradino sotto l'intestazione di sezione: da quando le card stanno dentro una
   famiglia, un titolo di card grande quanto quello della sezione le metterebbe sullo
   stesso piano di ciò che le contiene. */
.tool-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

/* Il lavoro che fa, in una riga, con il verbo davanti. Prima erano due o tre
   righe di prosa con il gergo dei sistemi coinvolti: chi arriva qui sta
   scegliendo dove andare, non studiando. --ink-2 e non --ink-3 perché è testo
   che si legge davvero, non una didascalia. */
.tool-card__job {
  color: var(--ink-2);
  font-size: var(--fs-ui);
  line-height: var(--lh-normal);
}

/* Brand e famiglia di lavoro. Spinta in basso, così le card restano allineate
   fra loro anche quando il lavoro sta su una riga o su due. */
.tool-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
  color: var(--ink-3);
  font-size: var(--fs-meta);
}

/* Il quadratino di brand porta sempre la sigla accanto in testo. Prima il
   colore era assegnato con nth-child(odd/even), cioè per posizione nel DOM:
   lime e magenta, che nel gruppo significano PTDJA e MAT, finivano sui tool
   sbagliati e si invertivano tutti quando si aggiungeva una card. Adesso il
   colore viene dal dato, e non è mai il solo canale. */
.tool-card__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

/* Card senza accesso. Non nascosta (se non vedi che una cosa esiste non puoi
   chiederne l'accesso) e non disabilitata (lascia bloccati senza dire perché).
   Resta un link, con il motivo scritto e, per chi può, la strada per risolvere. */
.tool-card--bloccato {
  border-style: dashed;
}

.tool-card--bloccato .tool-card__title,
.tool-card--bloccato .tool-card__job {
  color: var(--ink-3);
}

.tool-card__blocco {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-meta);
}

/* Il meta va in fondo alla card, così le card restano allineate fra loro; quando
   c'è anche il blocco, è il blocco a chiudere. */
.tool-card--bloccato .tool-card__meta {
  margin-top: auto;
}

.tool-card--skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  pointer-events: none;
}