/* =============================================================================
   Dashboard — desktop polish (≥ 900px)
   Mobile (< 900px) keeps the original stacked layout untouched.
   ========================================================================== */

/* Subtle card lift on quick actions on ALL sizes — pops a little. */
.qa { transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
.qa:hover { transform: translateY(-1px); }

/* Faint accent strip on the Today snapshot card. */
.dash-card.snapshot {
    position: relative;
    overflow: hidden;
}
.dash-card.snapshot::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--nr-yellow), var(--nr-lime));
    opacity: 0.85;
}

@media (min-width: 900px) {
    /* Wider, breathier container */
    .dash {
        max-width: 1120px;
        padding: 1.5rem 1.75rem 5rem;
    }

    /* Larger greeting */
    .dash-greet     { margin: 0.75rem 0 1.75rem; }
    .dash-title     { font-size: 2rem; }
    .dash-quote     { font-size: 1.05rem; }

    /* Side-by-side: Today snapshot + Weight trend */
    .dash-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 1.25rem;
        margin-bottom: 1.25rem;
    }
    .dash-grid > .dash-card {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }
    .dash-grid > .weight-card .sparkline-wrap {
        margin-top: auto;   /* push the chart toward the bottom of the card */
    }

    /* Bigger, more confident Today card */
    .dash-card.snapshot { padding: 1.5rem 1.5rem; }
    .snapshot-row {
        grid-template-columns: auto 1fr 1fr;
        gap: 1.5rem;
        padding: 0.5rem 0 0.25rem;
    }
    .snapshot .points-ring,
    .snapshot .points-ring svg { width: 110px; height: 110px; }
    .snapshot .points-ring svg circle { stroke-width: 7; }
    .snapshot .ring-num    { font-size: 1.8rem; }
    .snapshot .ring-target { font-size: 0.8rem; }
    .snapshot .ring-label  { bottom: -1.25rem; font-size: 0.72rem; }
    .snapshot .tick        { width: 32px; height: 32px; font-size: 0.78rem; }
    .snapshot .workout-line{ font-size: 1rem; }

    /* Weight card matches snapshot rhythm */
    .weight-card { padding: 1.5rem 1.5rem; }
    .weight-card .sparkline { height: 150px; }

    /* Quick actions: roomier, more tactile */
    .qa-grid { gap: 0.75rem; margin: 1.25rem 0; }
    .qa {
        padding: 1.15rem 0.75rem;
        font-size: 0.9rem;
        gap: 0.5rem;
        border-radius: 16px;
    }
    .qa-icon { font-size: 1.9rem; }
    .qa:hover {
        background: var(--nr-bg);
        border-color: var(--nr-yellow);
        transform: translateY(-2px);
    }

    /* Weekly summary: bigger numbers, more presence */
    .summary-grid { gap: 0.75rem; margin-top: 1.25rem; }
    .summary-card { padding: 1.35rem 1rem; border-radius: 16px; }
    .sc-num       { font-size: 2.3rem; }
    .sc-lbl       { font-size: 0.78rem; margin-top: 0.55rem; }
}

@media (min-width: 1200px) {
    .dash { max-width: 1200px; }
    .qa-icon { font-size: 2rem; }
    .sc-num  { font-size: 2.5rem; }
}

/* =============================================================================
   Add-meal picker — 2x2 grid of meal-type cards (replaces a <select>)
   ========================================================================== */