/* Shared hub tile grid — the launchpad format the Planning hub established, lifted out so
   every domain hub (Execution, Learning, Wellness, Body, Life Design, Passions) renders the
   same way from one set of rules.

   Global rather than scoped because seven pages share it. Every colour resolves through a
   token that flips, so light and dark come from these rules alone with no theme blocks.

   Planning still carries its own scoped copy under .plan-* names, including the headline
   metric strip these pages have no data for yet; migrating it onto .hub-* is a later tidy-up. */

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--sf-space-3);
}

/* A <button>, not a clickable <div>, so the tile is keyboard reachable. */
.hub-tile {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    width: 100%;
    padding: var(--sf-space-3);
    background: var(--sf-bg-secondary);
    border: 1px solid var(--sf-border-color);
    border-radius: var(--sf-radius-xl);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hub-tile:hover {
    background: var(--sf-bg-hover);
    border-color: var(--sf-border-color-hover);
}

.hub-tile:focus-visible {
    outline: 2px solid var(--sf-primary, var(--sf-info));
    outline-offset: 2px;
}

.hub-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--sf-radius-lg);
    background: var(--sf-bg-hover);
    color: var(--sf-primary, var(--sf-info));
    font-size: 0.95rem;
}

.hub-tile:hover .hub-tile-icon {
    background: var(--sf-bg-secondary);
}

.hub-tile-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.hub-tile-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Planning's meta is a short count on one line; these hubs carry a sentence, so this one
   wraps to two lines and then clips rather than pushing tiles out of alignment. */
.hub-tile-meta {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--sf-text-secondary);
    font-variant-numeric: tabular-nums;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-tile-chevron {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--sf-text-muted);
}

/* ── Narrow screens ───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .hub-grid {
        grid-template-columns: 1fr;
        gap: var(--sf-space-2);
    }
}