.two-horizontal-cards {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.two-horizontal-cards .card {
    flex: 1;
}

.grid-dashboard-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 24px 0;
}

@media (max-width: 900px) {
    .grid-dashboard-summary-cards  { grid-template-columns: repeat(2, 1fr); }
    .two-horizontal-cards          { flex-direction: column; }
    .two-horizontal-cards .card    { width: 100%; }
}

@media (max-width: 600px) {
    .grid-dashboard-summary-cards  { grid-template-columns: 1fr; }
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 24px 0;
}

.analytics-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin: 24px 0;
}

.analytics-card.full-width {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .analytics-grid { grid-template-columns: repeat(2, 1fr); }
}
.dash-page {
    max-width: 1100px;
    margin: 80px auto 60px;
    padding: 0 24px;
}

.dash-hero {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.5rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.dash-hero-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dash-ring-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.dash-ring-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.dash-hero-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.dash-hero-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-hero-stats {
    display: flex;
    gap: 22px;
}

.dash-hs-lbl {
    font-size: 10px;
    color: var(--text-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-hs-val {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

.dash-week-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 16px;
}

.dash-week-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.dash-week-strip-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-scroll-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-input);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.2s;
}

.dash-scroll-arrow:hover { background: var(--bg-hover); }

.dash-week-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
}

.dash-week-strip::-webkit-scrollbar { display: none; }

.dash-day-card {
    flex: 0 0 100px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: 12px 8px;
    text-align: center;
}

.dash-day-card.active {
    background: var(--gold-dim);
    border: 1px solid var(--gold-border);
}

.dash-day-lbl {
    font-size: 10px;
    color: var(--text-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.dash-day-card.active .dash-day-lbl { color: var(--gold); }

.dash-day-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.dash-day-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
}

.dash-day-meta {
    font-size: 11px;
    color: var(--text-hint);
}

.dash-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dash-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dash-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
}

.dash-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.dash-today-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.dash-today-row:last-child { border-bottom: none; }

/* Sprint 10 Task 4: the Nutrition row is now a real <a> wrapping the whole
   row (same visual row, just also a link) -- neutralizes default link
   styling and adds a hover affordance, same interaction weight the rest of
   the Dashboard's clickable rows already have. */
a.dash-today-row {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.dash-today-row:hover {
    background: var(--bg-hover);
}

.dash-today-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--gold-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-today-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.dash-today-meta {
    font-size: 11px;
    color: var(--text-hint);
}

/* Sprint 10 Task 4A: responsive Nutrition-row wording -- both spans are
   always in the DOM with the same underlying data, CSS alone decides which
   one is visible at the existing 900px breakpoint (no JS resize listener).
   The mobile abbreviation is exposed via its own aria-label (set in
   js/dashboard.js), so whichever span is actually visible/announced always
   carries a clear meaning. */
.dash-nutr-mobile {
    display: none;
}

@media (max-width: 900px) {
    .dash-nutr-desktop {
        display: none;
    }
    .dash-nutr-mobile {
        display: inline;
    }
}

.dash-rank-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.dash-rank-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

.dash-rank-sub {
    font-size: 11px;
    color: var(--text-hint);
    margin-top: 2px;
}

.dash-rank-score {
    font-size: 20px;
    font-weight: 600;
    color: var(--gold);
}

.dash-bar-bg {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.dash-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--green);
    transition: width 0.4s;
}

.dash-view-link {
    font-size: 12px;
    color: var(--gold);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-view-link:hover { text-decoration: underline; }

.dash-macro-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.dash-macro-lbl {
    font-size: 12px;
    color: var(--text-muted);
    width: 55px;
    flex-shrink: 0;
}

.dash-macro-bar-bg {
    flex: 1;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}

.dash-macro-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s;
}

/* Sprint 10 Task 4: same three colors the old static placeholder markup
   used inline (gold/green/red) -- moved into CSS classes so js/dashboard.js
   only ever sets width, never a cosmetic color constant. */
.dash-macro-bar-protein { background: var(--gold); }
.dash-macro-bar-carbs   { background: var(--green); }
.dash-macro-bar-fat     { background: var(--red); }

.dash-macro-val {
    font-size: 11px;
    color: var(--text-hint);
    min-width: 55px;
    text-align: right;
}

.dash-macro-note {
    font-size: 11px;
    color: var(--text-hint);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
    .dash-body-grid { grid-template-columns: 1fr; }
    .dash-hero { flex-direction: column; align-items: flex-start; }

    /* Sprint 10 Task 4B: mobile-only readability pass for the Activity Rank
       and Macros cards -- desktop base rules above are untouched. .dash-
       card-title is shared by all four dash-cards (Today/Workout trend/
       Rank/Macros); bumping it here is one small shared-rule adjustment
       rather than new markup/selectors, and Today/Workout trend get a
       harmless readability bonus as a side effect. */
    .dash-card-title {
        font-size: 16px;
    }

    .dash-rank-sub {
        font-size: 13px;
    }

    .dash-rank-score {
        font-size: 25px;
    }

    .dash-bar-bg {
        height: 8px;
    }

    .dash-macro-lbl {
        font-size: 14px;
    }

    .dash-macro-val {
        font-size: 14px;
    }

    .dash-macro-bar-bg {
        height: 8px;
    }

    .dash-macro-row {
        margin-bottom: 12px;
    }

    /* Approved tiny Goal-card density refinement -- padding only, no
       wording/calculation/structure change. */
    .dash-goal-band {
        padding: 10px 14px;
    }
}

/* ── PWA install discovery (js/pwa-install.js) ───────────────────────
   Two elements always exist in the DOM once rendered; JS only ever
   toggles the .pwa-cta-available class (never inline display) -- CSS
   alone decides which of the two is visible per the existing 900px
   breakpoint, same split Task 4A's responsive Nutrition row already
   established. Kept visually subtle: card-toned banner, small floating
   pill on desktop, never a large/dominant banner. */
.pwa-install-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
}
.pwa-install-banner.pwa-cta-available {
    display: flex;
}

.pwa-install-banner-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.pwa-install-banner-body {
    font-size: 12px;
    color: var(--text-hint);
    margin-top: 2px;
}
.pwa-install-banner-btn {
    background: var(--gold);
    color: #1a1200;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
}

.pwa-install-fab {
    display: none;
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: #1a1200;
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    min-height: 44px;
}

.pwa-sheet-steps {
    text-align: left;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0 0 20px;
    padding-left: 20px;
}

/* Desktop: the FAB may appear (only when actually installable); the
   banner never does. Mobile: the reverse -- the FAB never appears here
   regardless of state, avoiding a floating control that would collide
   with the bottom nav. */
@media (min-width: 901px) {
    .pwa-install-banner {
        display: none !important;
    }
    .pwa-install-fab.pwa-cta-available {
        display: inline-flex;
    }
}
@media (max-width: 900px) {
    .pwa-install-fab {
        display: none !important;
    }
}

/* ── Weight goal band ────────────────────────────── */
.dash-goal-band {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    margin: 14px 0;
}
.dash-goal-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
}
.dash-goal-bar-bg {
    flex: 1;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}
.dash-goal-bar-fill {
    height: 100%;
    background: var(--green);
    border-radius: 4px;
    transition: width 0.4s ease;
}
@media (max-width: 560px) {
    .dash-goal-band { flex-direction: column; align-items: stretch; gap: 8px; }
}