/* 2026-10-11 10:05 | y6y.io v2.00 | home layout: a grid of tool cards (theme-neutral: colours, lines and shapes come from the shared theme.css tokens) */

.hm-intro { display: flex; flex-direction: column; gap: 8px; }
.hm-intro .ui-title { margin: 0; }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.hm-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; min-height: 140px;
  color: inherit; text-decoration: none; transition: transform 80ms ease, box-shadow 80ms ease;
}
.hm-card:hover { background: var(--ui-highlight-bg); color: var(--ui-highlight-ink); }
.hm-card:active { transform: var(--ui-press); box-shadow: none; }
.hm-card:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.hm-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-card__name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; text-transform: var(--ui-chrome-case); }
.hm-card__host { margin-top: auto; }

@media (max-width: 640px) {
  .hm-grid { gap: 12px; }
  .hm-card { min-height: 0; padding: 14px; }
}