/* ==========================================================================
   dashboard.css — Home / Overview page layout.
   The card grid, focus states and screen sizes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid — the health cards on Gezondheid are the only users left
   -------------------------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   Onboarding focus
   The score card is what focus shapes now: the two category cards it used to
   promote have gone, and their scores live in the ring's own legend.
   -------------------------------------------------------------------------- */

/* A sleep-focused dashboard keeps the general score, but tightens it. */
[data-focus="sleep"] .card--hero .score-ring { width: min(48vw, 168px); }
[data-focus="sleep"] .card--hero .score-ring__number { font-size: 2.35rem; }

/* --------------------------------------------------------------------------
   Very small phones — stop forcing two columns
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
    :root {
        --fs-score: 2.5rem;
        --fs-brand: 1.25rem;
        --radius-card: 24px;
    }

    /* The longest labels need the extra width down here, and the capsule is
       what gives it to them — the container adapts, the type does not, so the
       icon/label/spacing relationships are the same on every phone. */
    .tabbar { width: min(97vw, 27.5rem); }

    .legend {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .legend__item { justify-content: flex-start; }

    /* The weekday is the first thing to go when space runs out. */
    .card__meta-day { display: none; }
}

/* --------------------------------------------------------------------------
   Large phones / small tablets — a little more air, same mobile layout
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
    :root {
        --shell-w: min(88vw, 36rem);
        --fs-score: 3.1rem;
    }

    .app__main { padding-top: var(--space-6); }

    .stack { gap: var(--space-5); }

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

/* --------------------------------------------------------------------------
   Desktop — the mobile dashboard is centred in whitespace, never re-flowed
   into a desktop layout. The tab bar stays a phone-width control.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    :root { --shell-w: min(70vw, 38rem); }

    .app-dock { padding-bottom: var(--space-5); }

    .tabbar {
        width: var(--shell-w);
        max-width: var(--page-max);
        padding-inline: var(--space-2);
        border: 1px solid var(--glass-border-soft);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-float);
    }

    .fab { bottom: calc(var(--dock-clearance) + var(--space-6) + var(--space-4)); }

    .app__main {
        padding-bottom: calc(var(--dock-clearance) + var(--space-6) + var(--space-6) + var(--space-5));
    }
}

/* --------------------------------------------------------------------------
   Pointer-capable devices only — a restrained lift, never on touch
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .card {
        transition: transform var(--transition-fast), border-color var(--transition-fast),
            box-shadow var(--transition-fast);
    }

    .card:hover {
        transform: translateY(-2px);
        border-color: var(--glass-border);
        box-shadow: var(--shadow-inset), 0 18px 40px rgba(0, 0, 0, 0.22);
    }

    .pill:hover,
    .btn:not(:disabled):hover {
        background-color: var(--glass-strong);
        border-color: var(--glass-border);
        color: var(--text-primary);
    }

    .tab:hover { color: var(--text-secondary); }
    .tab.is-active:hover { color: var(--text-primary); }

    .fab:hover {
        background: rgba(255, 255, 255, 0.11);
        color: var(--text-primary);
    }

    .press:hover { transform: scale(1.02); }
    .card.press:hover { transform: translateY(-2px); }
    .fab.press:hover { transform: translate(var(--fab-x), -2px); }
}