/* ================================
   Bank of Health — App Styles

   Built on mgy-tokens.css and mgy-components.css.
   All colors, spacing, and typography reference
   --mgy-* custom properties.

   Class names match the niwa boh templates which use
   .mgy-card / .mgy-btn-effect / .date-nav-btn / etc.
   ================================ */


/* ================================
   App wrapper

   .boh-app wraps every BoH page. It adds bottom padding for the mobile
   bottom nav.
   ================================ */

.boh-app {
    padding: var(--mgy-size-xs);
    padding-bottom: 8rem;
}

@media (min-width: 1025px) {
    .boh-app {
        padding-bottom: var(--mgy-size-xl);
    }
}


/* ================================
   Card layout helpers (additive to .mgy-card)
   ================================ */

.card-row {
    display: flex;
    gap: var(--mgy-space-md);
    margin-bottom: var(--mgy-space-md);
}
.card-row .card-half {
    flex: 1;
    margin-bottom: 0;
    /*aspect-ratio: 1;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card-row .card-two-thirds {
    flex: 2;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card-row .card-one-third {
    flex: 1;
    margin-bottom: 0;
    /*aspect-ratio: 1;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Stack the heatmap + summary row on mobile — both go full width. */
@media (max-width: 1024px) {
    .card-row:has(.card-two-thirds) {
        flex-direction: column;
    }
    .card-row .card-two-thirds,
    .card-row .card-one-third {
        flex: 1 1 auto;
        aspect-ratio: auto;
    }
}

.card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--mgy-space-sm);
}
.card-header h2 {
    margin: 0;
}
.card-header-effect {
    font-family: var(--mgy-font-brand);
    font-size: var(--mgy-text-2xl);
    font-weight: var(--mgy-weight-bold);
    white-space: nowrap;
}
/* Provider mark + title cluster in a card-header (Connected Devices).
   One shared icon size: Apple's artwork license requires the Health icon
   be no smaller than sibling icons, and Whoop's Puck minimum is 30px —
   32px satisfies both. The mark is decorative (the provider name sits
   beside it) and never a tap target. */
.card-header-brand {
    display: flex;
    align-items: center;
    gap: var(--mgy-space-sm);
    min-width: 0;
}
.card-header-brand img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* BrandMark.vue — brand stamp on auth/onboarding screens that otherwise
   have no BOH presence on phones (the top navbar is hidden ≤1024px in
   every mobile context). Sized to match the consent screen's inline
   piggy treatment (max-width 40% — Steven's reference, 2026-07-20).
   `-mobile` hides it on desktop for screens whose navbar already
   carries the brand there. */
.boh-brand-mark {
    display: block;
    max-width: 40%;
    height: auto;
    margin: var(--mgy-space-md) auto;
}
@media (min-width: 1025px) {
    .boh-brand-mark-mobile { display: none; }
}

/* Compact field pattern — the decade accordion's label/input recipe
   (.decade-body .control-group), extracted as a standalone class pair so
   general forms can use it (first adopter: the onboarding profile form).
   .boh-field-row deliberately does NOT collapse to a column on phones —
   that's the whole point (mgy-signup-form does, and it made the profile
   step nine screens tall on mobile). */
.boh-field-row {
    display: flex;
    gap: var(--mgy-space-sm);
    align-items: flex-end;
    margin-top: var(--mgy-space-md);
}
.boh-field-row > * {
    flex: 1;
    min-width: 0;
}
.boh-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.boh-field > label,
.boh-field-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mgy-text-muted);
    font-weight: var(--mgy-weight-medium);
    margin: 0;
}
.boh-field select,
.boh-field input {
    width: 100%;
    margin: 0;
}

/* Small uppercase eyebrow above a card's title — the welcome sequence's
   card grammar (the day toy's Sleep/Workouts/Alcohol, the tools screen's
   Today/This month/Your life). */
.boh-kicker {
    margin: 0;
    font-size: var(--mgy-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mgy-text-muted);
}

.boh-movement-row, .toggle-row.boh-movement-row {
    align-items: start;
}

@media (max-width: 600px) {
    .boh-movement-name {
        min-width: 240px;
        width: 240px;
        line-height: 1rem;
    }
    #total-net {
        font-size: var(--mgy-text-xl);
    }
}

/* ================================
   Big Numbers (hero stats)
   ================================ */

.big-number {
    font-family: var(--mgy-font-heading);
    font-size: var(--mgy-text-5xl);
    font-weight: var(--mgy-weight-bold);
    color: var(--mgy-success-text);
    line-height: var(--mgy-text-7xl);
}
.big-number.huge {
    font-size: var(--mgy-text-6xl);
}
.big-number.sentence {
    line-height: 1rem;
    margin-top: var(--mgy-space-xl);
    margin-bottom: var(--mgy-space-2xl);
}
.big-number.negative {
    color: var(--mgy-error-text);
}
.big-number.black {
    color: var(--mgy-text-heading);
}
.big-number small {
    font-size: var(--mgy-text-2xl);
}
.big-number.neutral {
    color: var(--mgy-text-heading);
}
.big-number .number.positive {
    color: var(--mgy-success-text);
}
@media (max-width: 600px) {
    .big-number .number {
        display: block;
        margin: 1.4rem 0 1.8rem 0;
        font-size: var(--mgy-text-6xl);
    }
    .big-number.sentence {
        margin-top: var(--mgy-space-md);
        margin-bottom: var(--mgy-space-xl);
    }
}
/* ================================
   Labels & Text Helpers
   ================================ */

.label {
    font-size: var(--mgy-text-xs);
    color: var(--mgy-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--mgy-weight-medium);
}

.positive { color: var(--mgy-success-text); }
.negative { color: var(--mgy-error-text); }
.neutral { color: var(--mgy-text-muted); }
.deposit { color: var(--mgy-success-text); }
.withdrawal { color: var(--mgy-error-text); }
.error { color: var(--mgy-error-text); margin-bottom: var(--mgy-space-md); }


/* ================================
   Forms

   Form fields and submit buttons use mgy-* component classes (`mgy-input`,
   `mgy-btn`) — see mgy-components.css. Boh.css does NOT redefine generic
   form/button styling so that toggle buttons (below) can render as pills
   without specificity wars.
   ================================ */

/* ================================
   Stat Rows
   ================================ */

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: var(--mgy-space-sm) 0;
    border-bottom: 1px solid var(--mgy-border-light);
    color: var(--mgy-text-body);
}
.stat-row:last-child {
    border-bottom: none;
}


/* ================================
   Date Navigation
   ================================ */

.date-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mgy-space-sm);
}
.date-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.2rem;
    background: var(--mgy-bg-warm);
    color: var(--mgy-text-body);
    border-radius: 50%;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--mgy-transition-normal);
}
.date-nav-btn:hover {
    background: var(--mgy-border-medium);
    color: var(--mgy-text-heading);
}


/* ================================
   Toggle Buttons (mgy-* component)

   A row of pill-style toggle buttons. One is active at a time
   (controlled in JS via the `.active` class on the chosen <button>).
   Each direct child is the cell — typically `.mgy-flex-col` containing
   a <button> and an optional `.mgy-btn-effect` badge below.

   This component lives here for now; promote to mgy-components.css
   in the thegoodyearsproject.com repo when ready.
   ================================ */

.mgy-toggle-buttons {
    display: flex;
    gap: var(--mgy-space-sm);
    flex-wrap: wrap;
    
    margin-top: var(--mgy-space-sm);
    align-items: flex-start;
}

.mgy-toggle-buttons button {
    padding: 8px 16px;
    font-size: var(--mgy-text-sm);
    background: var(--mgy-bg-warm);
    color: var(--mgy-text-body);
    border: 1px solid var(--mgy-border-light);
    border-radius: var(--mgy-radius-round);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--mgy-transition-normal);
    font-family: inherit;
}
.mgy-toggle-buttons button:hover {
    background: var(--mgy-border-light);
    border-color: var(--mgy-border-medium);
}
.mgy-toggle-buttons button.active {
    background: var(--mgy-brand);
    color: #fff;
    border-color: var(--mgy-brand);
}
.mgy-toggle-buttons input, .mgy-toggle-buttons input[type=number], .mgy-toggle-buttons input[type=text] {
    height: 2.5rem;
    border-radius: var(--mgy-radius-round);
    font-size: var(--mgy-text-sm);
}

.mgy-btn-effect {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--mgy-weight-normal);
    margin-top: 0.15rem;
}
@media (max-width: 600px) {
    .mgy-toggle-buttons.mgy-toggle-buttons-wide .mgy-toggle-component {
        display: block;
        width: 100%;
        margin-bottom: var(--mgy-space-sm);
    }
    .mgy-toggle-buttons.mgy-toggle-buttons-wide .mgy-flex.or {
        display: block;
        width: 100%;
    }
    .mgy-toggle-buttons.mgy-toggle-buttons-wide .mgy-flex.or small {
        display: block;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }


}


/* ================================
   Workouts (cards in log_today)
   ================================ */
#logForm {
    margin-top: var(--mgy-space-md);
}

.workout-icon {
    display: inline-block;
    width: 5em;
    height: 5em;
    vertical-align: -0.35em;
    margin-right: 0.4em;
    flex-shrink: 0;
}
.workout-icon svg,
.workout-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.workout-name {
    font-weight: var(--mgy-weight-semibold);
    font-size: var(--mgy-text-lg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Two-row workout header. min-width: 0 lets the column shrink inside the
   flex row so a long title ellipsizes instead of widening the card and
   pushing the hours + delete button off the right edge. */
.workout-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.workout-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mgy-space-xs);
    min-width: 0;
}
.workout-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mgy-space-sm);
    min-width: 0;
}
.workout-meta-left {
    min-width: 0;
}

.workout-duration {
    color: var(--mgy-text-muted);
    font-size: var(--mgy-text-md);
}

.workout-card {
    margin-bottom: var(--mgy-space-sm);
    position: relative;

    padding: var(--mgy-space-sm) 0; 
    border: 0;
    box-shadow: none;
}
.workout-card.open {
    border: 1px solid var(--mgy-bg-warm-dark);
    background: var(--mgy-bg-page);
    padding: var(--mgy-space-sm) var(--mgy-space-md);
    border-radius: var(--mgy-radius-lg);
}

.workout-delete {
    /*position: absolute;*/
    /*top: 6px;*/
    /*right: -6px;*/
    background: none;
    border: none;
    color: var(--mgy-text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: var(--mgy-text-sm);
    line-height: 1;
    opacity: 0.5;
    z-index: 1;
}

.workout-delete:hover {
    opacity: 1;
}

.workout-icon-large {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: bottom;
}

.workout-type-btn svg,
.workout-type-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.workout-duration-text {
    color: var(--mgy-text-muted);
    font-size: var(--mgy-text-md);
}

/* Local wall-clock start time shown beside the duration (e.g. "45 min · 2:30 PM"),
   to disambiguate multiple synced workouts. Smaller and lighter than the duration. */
.workout-start-time {
    font-size: 0.7rem;
    opacity: 0.75;
}

.workout-duration-group {
    align-items: center;
    gap: 0.3em;
}

.workout-type-duration-group {
    display: inline-flex;
    gap: 0.3em;
    flex-wrap: nowrap;
    align-items: start;

}
.workout-type-btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.3em;
}
.workout-duration {
    margin-top: var(--mgy-space-xs);
}

.source-badge {
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.6rem;
    font-weight: var(--mgy-weight-semibold);
    letter-spacing: 0.03em;
    color: var(--mgy-text-muted);
    background: var(--mgy-surface-raised, rgba(128, 128, 128, 0.12));
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.workout-type-editor {
    display: flex;
    gap: var(--mgy-space-sm);
    padding-top: var(--mgy-space-sm);
}

form input[type="number"].workout-minutes-input,
.workout-minutes-input {
    width: 4rem;
    padding: 6px 8px;
    font-size: var(--mgy-text-sm);
    font-family: inherit;
    border: 1px solid var(--mgy-border-light);
    border-radius: var(--mgy-radius-round);
    background: var(--mgy-bg-warm);
    color: var(--mgy-text-body);
    text-align: center;
    margin-bottom: 0;
    -moz-appearance: textfield;
}

.workout-minutes-input::-webkit-outer-spin-button,
.workout-minutes-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.workout-type-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 8px 16px;
    font-size: var(--mgy-text-sm);
    font-family: inherit;
    background: var(--mgy-bg-warm);
    color: var(--mgy-text-body);
    border: 1px solid var(--mgy-border-light);
    border-radius: var(--mgy-radius-round);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--mgy-transition-normal);
    height: 2rem;
    margin-top: 4px;
}

.workout-type-btn:hover {
    background: var(--mgy-border-light);
    border-color: var(--mgy-border-medium);
}

.workout-type-btn .workout-icon {
    width: 0.85em;
    height: 0.85em;
    margin-right: 0;
    opacity: 0.8;
}

.workout-type-btn.active {
    background: var(--mgy-brand);
    color: #fff;
    border-color: var(--mgy-brand);
}

.workout-type-btn.active .workout-icon {
    opacity: 1;
}

@media (max-width: 380px) {
    .workout-type-editor {
        gap: 0;
    }
    .mgy-card.add-workout .add-workouts {
        margin: 0 -10px;
    }
}

#workout-list {
    margin-right: -12px;
}
@media (max-width: 600px) {
    #workout-list {
        margin-left: -6px;
    }
}

/* Mobile-only movement collapse: once a workout is logged, the quick-add
   grid folds behind one "Add more movement" button so the rest of the day
   (Sleep, Drinking, Sitting) stays above the fold. Desktop always shows
   the full grid — the UX is different there, and it fits. */
.boh-add-more-movement {
    display: block;
    margin-bottom: 0;
    border-radius: var(--mgy-radius-round);
}
@media (max-width: 1024px) {
    .mgy-card.add-workout .add-workouts.collapsed {
        display: none;
    }
}
@media (min-width: 1025px) {
    /* The grid keeps its normal flex layout on desktop — the .collapsed
       class only bites inside the mobile query above. */
    .boh-add-more-movement {
        display: none;
    }
}


#weight_lbs {
    width: 5.5rem;
}
@media (max-width: 600px) {
    #weight_lbs {
        width: 5rem;
    }
}


/* ================================
   Toggle Rows (checkboxes)
   ================================ */

.toggle-row {
    display: flex;
    align-items: center;
    gap: var(--mgy-space-md);
    padding: var(--mgy-space-sm) 0;
}
.toggle-row input[type="checkbox"]:not(.mgy-checkbox):not(.mgy-toggle) {
    width: auto;
    margin: 0;
}


/* ================================
   Bottom Nav (Mobile only) — BoH-scoped
   ================================ */

.boh-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mgy-bg-card);
    border-top: 1px solid var(--mgy-border-light);
    display: flex;
    justify-content: center;
    gap: 0;
    z-index: 100;
    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0));
}
.boh-bottom-nav a {
    flex: 1;
    max-width: 130px;
    text-align: center;
    padding: 0.6rem 0.25rem 0.5rem;
    color: var(--mgy-text-muted);
    text-decoration: none;
    font-size: var(--mgy-text-xs);
    font-weight: var(--mgy-weight-medium);
    -webkit-tap-highlight-color: transparent;
    transition: color var(--mgy-transition-normal);
    position: relative;
}
.boh-bottom-nav a.active {
    color: var(--mgy-brand);
}
.boh-bottom-nav a.active .nav-icon {
    color: var(--mgy-brand);
}
.boh-bottom-nav a:hover {
    color: var(--mgy-brand-hover);
}

.boh-bottom-nav .nav-icon {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 2px;
    line-height: 1;
    position: relative;
}

/* "What's New" unseen indicator. The dot rides the More tab icon and the
   desktop account avatar; the sparkle sits inline in the menu rows. Both
   clear when the What's New page is opened (server marks seen + the store
   optimistically clears chrome.updates_unseen). */
.boh-nav-dot {
    position: absolute;
    top: -2px;
    right: 50%;
    transform: translateX(12px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mgy-brand);
    pointer-events: none;
}
.niwa-account-avatar {
    position: relative;
}
.niwa-account-avatar .boh-nav-dot {
    top: -1px;
    right: -1px;
    transform: none;
    border: 2px solid var(--mgy-bg-page);
    width: 10px;
    height: 10px;
}
.boh-nav-sparkle {
    margin-left: 0.35em;
    font-size: 0.9em;
    line-height: 1;
}

.boh-bottom-nav .nav-icon svg {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The More sheet — the bottom nav's own menu (Lifetime, Projections,
   Methodology, Settings, Log out). Rides .mgy-dropdown-content for the
   card + item styling; this modifier only re-anchors it above the nav
   (dropdown-content defaults to display:none inside a closed
   .mgy-dropdown — here Vue's v-if owns visibility). */
.mgy-dropdown-content.boh-more-sheet {
    display: block;
    position: fixed;
    right: var(--mgy-space-sm);
    bottom: calc(64px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    top: auto;
    min-width: 180px;
    z-index: 101;
}
.boh-more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.2);
}

@media (min-width: 1025px) {
    .boh-bottom-nav,
    .mgy-dropdown-content.boh-more-sheet,
    .boh-more-backdrop { display: none; }
}

/* Rule of thumb (Steven, 2026-07-12): if we're showing the bottom nav,
   hide the footer — mobile app pages end at the nav. Keyed directly to
   the nav's presence in the DOM (BottomNav renders only on app routes
   once the store is ready), so the two can never drift. Marketing/auth
   pages have no bottom nav and keep their footer. Browsers too old for
   :has() just keep the footer — harmless. */
@media (max-width: 1024px) {
    .niwa-layout:has(.boh-bottom-nav) .mgy-footer { display: none; }
}

@media (display-mode: standalone) {
    .mgy-footer { display: none; }
}
@media (display-mode: standalone) and (max-width: 1024px) {
    .mgy-navbar { display: none; }
    .niwa-main { padding-top: var(--mgy-space-sm); }
}
/* html.boh-standalone: class twin of the (display-mode: standalone)
   blocks, set by the Onboarding Studio's PWA simulation (studio/stub.js)
   — an iframe can never match the media query. Keep every standalone
   rule in both forms. */
html.boh-standalone .mgy-footer { display: none; }
@media (max-width: 1024px) {
    html.boh-standalone .mgy-navbar { display: none; }
    html.boh-standalone .niwa-main { padding-top: var(--mgy-space-sm); }
}
.mgy-last-card {
    padding-bottom: var(--mgy-space-lg);
}


#total-card {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0;
    border-top: 1px solid var(--mgy-border-light);
    border-bottom: 1px solid var(--mgy-border-light);
    z-index: 99;
    background: var(--mgy-bg-warm-light);
    border: 0;
    box-shadow: 2px -2px 4px 0px rgba(0,0,0,0.15);
    padding: var(--mgy-space-md) 20%;
}
#total-card .card-header {
    margin-bottom: 0;
    max-width: var(--mgy-width-standard);
}
/* Footer visibility: hidden only in true app contexts — installed PWA
   ((display-mode: standalone) above) and the native wrapper
   (html.boh-native, in the SPA shell). In-browser pages, public or app,
   keep their footer. */
.niwa-main { padding-top: var(--mgy-space-sm); }
h1 {margin: var(--mgy-space-sm) 0;}
.boh-app { padding-bottom: var(--mgy-space-3xl); margin-bottom: var(--mgy-space-2xl); }


/* Pinned total card on mobile */
@media (max-width: 1024px) {
    #total-card {
        position: fixed;
        bottom: calc(3.5rem + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 0;
        border-top: 1px solid var(--mgy-border-light);
        border-bottom: 1px solid var(--mgy-border-light);
        z-index: 99;
        /* 8px sides: matches .mgy-container's mobile padding so the bar's
           content aligns with the cards, and buys the header row width. */
        padding: var(--mgy-space-md) var(--mgy-space-sm);
        background: var(--mgy-bg-warm-light);
        border: 0;
        box-shadow: 2px -2px 4px 0px rgba(0,0,0,0.25);
    }
    #total-card .card-header {
        margin-bottom: 0;
        max-width: 100%;
    }
    /* Title + nowrap effect ("+12.4 future hours") share one phone-width
       row and must fit a ~360dp screen; both step down from the heading
       sizes, and the title is the one that never gives. */
/*    #total-card .card-header h2 {
        font-size: var(--mgy-text-xl);
        white-space: nowrap;
        flex-shrink: 0;
    }
    #total-card .card-header-effect {
        font-size: var(--mgy-text-xl);
    }
*/  
    .niwa-main { padding-top: var(--mgy-space-sm); }
    h1 {margin: var(--mgy-space-sm) 0;}
    .boh-app { padding-bottom: var(--mgy-space-3xl);}
}

/* Bottom-chrome geometry shared by every installed, app-like context on
   iOS: the Home-Screen PWA (matched by @media display-mode: standalone,
   below) and the Capacitor native app (matched by html.boh-native in
   spa_shell.html). Both get an already-inset viewport under
   viewport-fit=cover — content does NOT extend under the home indicator
   even though env(safe-area-inset-bottom) still reports ~34px — so adding
   env() to the FIXED chrome paints a button-sized dead zone below the tab
   bar and floats #total-card too high. These are the device-verified flat
   values; they live here, defined once, so the two contexts can never
   drift out of sync again (that drift was the original bug). */
:root {
    --boh-installed-nav-pad: var(--mgy-space-md);
    --boh-installed-total-bottom: calc(2.5rem + var(--mgy-space-md));
    --boh-installed-total-header-margin: var(--mgy-space-md);
}

@media (display-mode: standalone) and (max-width: 1024px) {
    .boh-bottom-nav {
        padding-bottom: var(--boh-installed-nav-pad);
    }
    #total-card {
        bottom: var(--boh-installed-total-bottom);
    }
    #total-card .card-header {
        margin-bottom: var(--boh-installed-total-header-margin);
    }
    /* Scroll clearance keeps env(): extra room past the last card is
       invisible until you reach it, and guarantees the card is never
       covered by the pinned total card regardless of how a given iOS
       build resolves the inset. */
    .boh-app {
        padding-bottom: calc(var(--mgy-space-3xl) + env(safe-area-inset-bottom, 0px));
    }
}
/* html.boh-standalone twin of the block above (Onboarding Studio PWA
   simulation — see the twin note at the first standalone block). */
@media (max-width: 1024px) {
    html.boh-standalone .boh-bottom-nav {
        padding-bottom: var(--boh-installed-nav-pad);
    }
    html.boh-standalone #total-card {
        bottom: var(--boh-installed-total-bottom);
    }
    html.boh-standalone #total-card .card-header {
        margin-bottom: var(--boh-installed-total-header-margin);
    }
    html.boh-standalone .boh-app {
        padding-bottom: calc(var(--mgy-space-3xl) + env(safe-area-inset-bottom, 0px));
    }
}


/* ================================
   Ledger Table
   ================================ */

/* Title row: h1 left, view-mode pills right; pills wrap under the
   title on narrow screens. */
.ledger-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mgy-space-md);
    flex-wrap: wrap;
}
.ledger-header h1 {
    margin-bottom: 8px;
}
.ledger-header .ledger-view-toggle {
    margin: -16px 0 8px 0;
}
@media (max-width: 600px) {
    /* Wraps under the title and spans the row on narrow screens. */
    .ledger-header .ledger-view-toggle {
        width: 100%;
    }
}


/* The card must NOT set overflow or content-visibility: either establishes
   a scroll / paint-containment context that would pin the sticky <th> to
   the card (which scrolls away) instead of the viewport. On mobile the
   table is laid out to fit the viewport width (whole-hour numbers keep the
   columns narrow — see fmtHours in LedgerView), so no horizontal-scroll
   container is needed and the header stays sticky there too. (Per-row
   content-visibility on tbody rows still provides the off-screen paint
   savings for the ~750-row ledger.) */

.ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mgy-text-sm);
}
/* Desktop only: lock column widths from the colgroup so the browser doesn't
   measure all ~750 rows before painting. Mobile keeps auto-layout because
   the table is horizontally scrolled with per-cell pixel widths set below. */
@media (min-width: 601px) {
    .ledger-table {
        table-layout: fixed;
    }
    .ledger-table col.col-date { width: 6.5rem; }
    .ledger-table col.col-net  { width: 4.5rem; }
}
.ledger-table th,
.ledger-table td {
    padding: var(--mgy-space-sm) var(--mgy-space-sm);
    text-align: right;
    border-bottom: 1px solid var(--mgy-border-light);
}
.ledger-table th {
    font-weight: var(--mgy-weight-semibold);
    color: var(--mgy-text-muted);
    font-size: var(--mgy-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Pin the column headers to the top of the viewport as the page
       scrolls. Works because the card no longer establishes a scroll /
       paint-containment context (see .ledger-card) — the sticky reference
       is the document. An opaque background + z-index keep the scrolling
       rows from showing through or above it. */
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--mgy-bg-card);
}
.ledger-table td:first-child,
.ledger-table th:first-child {
    text-align: left;
}
.ledger-table tr:hover td {
    background: var(--mgy-bg-warm-light);
}
.ledger-table .positive { color: var(--mgy-success-text); }
.ledger-table .negative { color: var(--mgy-error-text); }
.ledger-table .row-odd td { background: var(--mgy-bg-warm-light); }
.ledger-table .row-even td { background: transparent; }
.ledger-table .month-break td {
    border-bottom: 2px solid var(--mgy-text-muted);
    padding: 0;
    line-height: 0;
    height: 0;
}
.ledger-table .ledger-month-summary td {
    font-weight: var(--mgy-weight-normal);
    background: var(--mgy-bg-warm);
    border-bottom: 1px solid var(--mgy-border-light);
}
.ledger-table .ledger-month-summary.ledger-summary-expanded td {
    font-weight: var(--mgy-weight-semibold);
}
.ledger-table .ledger-month-summary td:first-child {
    white-space: nowrap;
}
/* Weekly summary rows blend into the normal zebra striping instead of
   the warm highlight — higher specificity (3 classes) wins over the
   2-class background rule above regardless of source order. */
.ledger-table .ledger-month-summary.row-odd td {
    background: var(--mgy-bg-warm-light);
}
.ledger-table .ledger-month-summary.row-even td {
    background: transparent;
}
/* Month header above a block of week rows (Weekly view + Natural's
   weekly zone): warm highlight sitting over the zebra weeks. Reassert
   the warm background at higher specificity so it wins over any zebra
   class the row may also carry. */
.ledger-table .ledger-month-summary.ledger-month-header td,
.ledger-table .ledger-month-summary.ledger-year-header td {
    background: var(--mgy-bg-warm);
}
/* Year rollup header (Natural view): same warm/bold treatment as a month
   header, with a heavier top rule to read as the larger division. */
.ledger-table .ledger-month-summary.ledger-year-header td {
    border-top: 2px solid var(--mgy-border-medium);
}
.ledger-table .ledger-month-summary.ledger-year-header td:first-child {
    font-weight: var(--mgy-weight-bold);
    letter-spacing: 0.02em;
}
/* Summary rows that fold/unfurl their day rows. */
.ledger-table .ledger-foldable td {
    cursor: pointer;
}
.ledger-fold-chevron {
    display: inline-block;
    width: 1.1em;
    font-style: normal;
    transition: transform var(--mgy-transition-normal);
}
.ledger-fold-chevron.open {
    transform: rotate(90deg);
}
/* Skip layout/paint of off-screen rows. With ~750 rows in a single ledger
   render, this is the difference between the browser doing all the work up
   front vs. only paying for what's visible. The markup still parses (so
   Cmd-F find-on-page and screen readers see everything), but layout +
   paint are deferred. `contain-intrinsic-size: auto N` reserves a
   placeholder height so the scrollbar stays accurate; `auto` keyword
   lets the browser remember real per-row sizes after first render.
   Supported: Chrome 85+, Safari 18+, Firefox 125+. Older browsers
   gracefully ignore the property and render as before. */
.ledger-table tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 36px;
}
.ledger-table .ledger-day-row {
    text-align: right;
}
.boh-app .mobile {
    display: none;
}


@media (max-width: 600px) {
    .boh-app .desktop {
        display: none;
    }
    .boh-app .mobile {
        display: inline-block;
    }
    /* Fit the viewport width so no horizontal-scroll container is needed
       (that would break the sticky header). Whole-hour numbers keep the
       numeric columns legible in the narrow tracks. */
    .ledger-table {
        font-size: var(--mgy-text-xs);
        table-layout: fixed;
        width: 100%;
    }
    .ledger-table col.col-date { width: 4.4rem; }
    .ledger-table col.col-net  { width: 2.6rem; }
    .ledger-table th,
    .ledger-table td {
        padding: var(--mgy-space-xs) 2px;
    }
    .ledger-table td:first-child {
        padding-right: var(--mgy-space-xs);
    }
    /* Stays sticky on mobile too (sticky is still a containing block, so
       the rotated label spans below anchor to it). */
    .ledger-table thead th {
        padding: 0 2px 4px 2px;
        position: sticky;
        top: 0;
        height: 7rem;
        vertical-align: bottom;
        text-align: left;
    }
    .ledger-table thead th span {
        display: block;
        transform: rotate(-90deg);
        white-space: nowrap;
        width: 7rem;
        top: 2rem;
        left: -2.2rem;
        position: absolute;
    }
    .ledger-table thead th:first-child {
        height: auto;
        vertical-align: bottom;
        width: 4.4rem;
    }
    .ledger-table td {
        text-align: center;
    }
    .ledger-table td:first-child {
        text-align: left;
    }
    .ledger-table td:last-child {
        text-align: right;
    }
    .ledger-card {
        padding: var(--mgy-space-sm);
    }
    .ledger-table td:first-child,
    .ledger-table th:first-child {
        padding-right: 2px;
    }
    .ledger-table td:first-child a {
        font-size: 0.7rem;
        letter-spacing: -0.02em;
    }
    
}


/* ================================
   Ledger Day Cards (older list view)
   ================================ */

.ledger-day {
    background: var(--mgy-bg-card);
    border: 1px solid var(--mgy-border-light);
    border-radius: var(--mgy-radius-2xl);
    margin-bottom: var(--mgy-space-md);
    box-shadow: var(--mgy-shadow-card);
    overflow: hidden;
}
.ledger-day-header {
    display: flex;
    justify-content: space-between;
    padding: var(--mgy-space-md) var(--mgy-space-md);
    background: var(--mgy-bg-warm-light);
    border-bottom: 1px solid var(--mgy-border-light);
    font-weight: var(--mgy-weight-semibold);
}
.ledger-line {
    display: flex;
    justify-content: space-between;
    padding: var(--mgy-space-sm) var(--mgy-space-md);
    border-bottom: 1px solid var(--mgy-bg-warm-light);
    font-size: var(--mgy-text-sm);
}
.ledger-line:last-child { border-bottom: none; }
.ledger-erosion { background: var(--mgy-error-bg); }


/* ================================
   Decade Accordion (health history)
   ================================ */

.decade-accordion {
    width: 100%;
}
.decade-hint {
    font-size: var(--mgy-text-sm);
    color: var(--mgy-text-muted);
    margin-bottom: var(--mgy-space-md);
}
.decade-block {
    background: var(--mgy-bg-card);
    border: 1px solid var(--mgy-border-light);
    border-radius: var(--mgy-radius-lg);
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: var(--mgy-shadow-card);
}
.today-block {
    margin-top: var(--mgy-space-md);
    border-color: var(--mgy-brand);
    border-width: 1.5px;
}
.decade-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
}
.decade-header:hover {
    background: rgba(128, 128, 128, 0.05);
}
.decade-title {
    font-size: var(--mgy-text-sm);
    font-weight: var(--mgy-weight-semibold);
    color: var(--mgy-text-heading);
    white-space: nowrap;
}
.decade-summary {
    font-size: 11px;
    color: var(--mgy-text-muted);
    flex: 1;
    margin-left: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.decade-chevron {
    font-size: 14px;
    color: var(--mgy-text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 8px;
}
.decade-block.open .decade-chevron {
    transform: rotate(180deg);
}
.decade-body {
    display: none;
    padding: 4px 16px 14px;
}
.decade-block.open .decade-body {
    display: block;
}
.decade-body .factor-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.decade-body .control-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.decade-body .control-group label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mgy-text-muted);
    font-weight: var(--mgy-weight-medium);
    margin: 0;
}
.decade-body .control-group select,
.decade-body .control-group input {
    font-size: var(--mgy-text-sm);
    padding: 4px 6px;
    border: 1px solid var(--mgy-border-light);
    border-radius: var(--mgy-radius-md);
    background: var(--mgy-bg-warm);
    color: var(--mgy-text-body);
    font-family: inherit;
    margin: 0;
}
.decade-weight-input {
    width: 5rem;
}
.decade-social {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--mgy-border-light);
}
.decade-social .social-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--mgy-text-muted);
    cursor: pointer;
    line-height: 1.3;
    margin: 0;
}
.decade-social .social-check input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .decade-body .factor-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .decade-summary {
        display: none;
    }
    .decade-header {
        padding: 8px 12px;
    }
    .decade-body {
        padding: 4px 12px 12px;
    }
}

@media (max-width: 380px) {
    .decade-body .factor-row {
        grid-template-columns: 1fr;
    }
}


/* ================================
   Scenario blocks (Projections)
   ================================ */

/* Projection paths share the decade-accordion vocabulary; these rules add
   the color dot, the always-visible stats strip, and the editable bits
   (name / color swatches / remove). */

.scenario-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 8px;
}
.scenario-block .scenario-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 2px 16px 10px;
    text-align: center;
}
.scenario-block .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mgy-text-muted);
    font-weight: var(--mgy-weight-medium);
}
.scenario-block .stat-val {
    font-size: var(--mgy-text-xl);
    color: var(--mgy-text-heading);
    line-height: 1.3;
}
.scenario-block .stat-delta {
    font-size: 11px;
    min-height: 15px;
    color: var(--mgy-text-muted);
}
.scenario-block .stat-delta.good { color: var(--mgy-success-text); }
.scenario-block .stat-delta.bad { color: var(--mgy-error-text); }
.scenario-block .stat-sub {
    font-size: 10px;
    color: var(--mgy-text-muted);
}
.scenario-block.open .decade-body {
    border-top: 1px solid var(--mgy-border-light);
    padding-top: 12px;
}
.scenario-block .decade-body select:disabled,
.scenario-block .decade-body input:disabled {
    opacity: 0.65;
}
.scenario-meta {
    margin-bottom: 10px;
}
.scenario-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 200px;
}
.scenario-swatches .color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
}
.scenario-swatches .color-swatch.active {
    border-color: var(--mgy-text-heading);
}
.scenario-remove-btn {
    background: none;
    border: none;
    padding: 4px 0;
    margin-top: 10px;
    font-size: 11px;
    font-family: inherit;
    color: var(--mgy-error-text);
    cursor: pointer;
}

/* The public calculator's About You demographics render as an always-open
   block so they match the decade cards below. */
.about-you-block .decade-body {
    padding-top: 12px;
}

@media (max-width: 600px) {
    /* Unlike the decades, a scenario header keeps its factor summary on
       mobile — as a second line — so a collapsed path still says what it
       assumes. */
    .scenario-block .decade-header {
        flex-wrap: wrap;
    }
    .scenario-block .decade-summary {
        display: block;
        order: 1;
        flex-basis: 100%;
        margin-left: 20px;
        margin-top: 2px;
    }
}


/* ================================
   Onboarding
   ================================ */

.onboarding-progress {
    display: flex;
    gap: var(--mgy-space-sm);
    justify-content: center;
    margin-bottom: var(--mgy-space-xl);
}
.onboarding-step {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mgy-border-light);
}
.onboarding-step.active {
    background: var(--mgy-brand);
    width: 24px;
    border-radius: 4px;
}
.onboarding-step.done {
    background: var(--mgy-success-text);
}


/* ================================
   Baseline Timeline Bars
   ================================ */
.baseline-timeline-container {
    margin-left: var(--mgy-space-xl);
}

.baseline-timeline {
    position: relative;
    margin-bottom: var(--mgy-space-xs);
}
.baseline-timeline-bar {
    display: flex;
    height: 18px;
    border-radius: var(--mgy-radius-md);
    overflow: hidden;
    gap: 2px;
}
.baseline-timeline-bar-sm {
    height: 14px;
}
.baseline-timeline-segment {
    border-radius: var(--mgy-radius-sm);
    flex-shrink: 0;
}
.baseline-timeline-past {
    background: var(--mgy-bg-warm-medium, #D4C8BC);
}
.baseline-timeline-healthy {
    background: var(--mgy-success-text);
    opacity: 0.9;
}
.baseline-timeline-optimal {
    background: var(--mgy-success-text);
    opacity: 1;
}
.baseline-timeline-impaired {
    background: #E8C07A;
}
.baseline-timeline-labels {
    position: relative;
    height: 18px;
    font-size: var(--mgy-text-xs);
    color: var(--mgy-text-muted);
    margin-top: 3px;
}
.baseline-label-left {
    position: absolute;
    left: 0;
}
.baseline-label-right {
    position: absolute;
    right: 0;
}
.baseline-label-pos {
    position: absolute;
    transform: translateX(-50%);
}
.baseline-timeline-legend {
    display: flex;
    justify-content: center;
    gap: var(--mgy-space-md);
    font-size: var(--mgy-text-xs);
    color: var(--mgy-text-muted);
    margin-top: var(--mgy-space-sm);
}
.baseline-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
}

.baseline-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mgy-space-lg);
    margin: var(--mgy-space-md) 0;
    text-align: center;
}
.baseline-comparison-arrow {
    font-size: var(--mgy-text-2xl);
    color: var(--mgy-text-muted);
}
@media (max-width: 600px) {
    .baseline-timeline-container {
        margin-left: 0;
    }

}

/* ================================
   Heatmap (Monthly View)
   ================================ */

/* One grid for the whole heatmap — labels, date header, and cells share
   the same column tracks, so rows can't drift out of alignment the way
   independent per-row flex containers did (per-row subpixel snapping). */
.heatmap-wrap {
    display: grid;
    grid-template-columns: max-content repeat(var(--heatmap-cols, 31), 1fr);
    gap: 2px;
    align-items: center;
    width: 100%;
}
.heatmap-dates,
.heatmap-row {
    display: contents;
}
.heatmap-label {
    font-size: clamp(0.55rem, 1.8vw, var(--mgy-text-xs));
    color: var(--mgy-text-muted);
    text-align: right;
    padding-right: var(--mgy-space-xs);
}
.heatmap-date-label {
    min-width: 0;
    font-size: clamp(5px, 1.5vw, 10px);
    color: var(--mgy-text-faint);
    text-align: center;
    line-height: 1;
}
.heatmap-cell {
    min-width: 0;
    aspect-ratio: 1;
    border-radius: clamp(1.5px, 0.5vw, 3px);
    cursor: default;
}
.heatmap-cell[title] {
    cursor: pointer;
}
.heatmap-weekly .heatmap-cell {
    aspect-ratio: 3 / 1;
}
.heatmap-weekly .heatmap-date-label {
    font-size: clamp(7px, 2.5vw, 11px);
}
.heatmap-hours-cell {
    min-width: 0;
    font-size: clamp(8px, 2.2vw, 11px);
    font-weight: var(--mgy-weight-semibold);
    color: var(--mgy-text-muted);
    text-align: center;
    line-height: 1.2;
    padding-top: 2px;
}


/* ================================
   Methodology page
   ================================ */

.methodology-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mgy-text-sm);
    margin: var(--mgy-space-sm) 0 var(--mgy-space-xl);
}
.methodology-table th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mgy-text-muted);
    padding: var(--mgy-space-lg) var(--mgy-space-sm) var(--mgy-space-xs) var(--mgy-space-sm);
    border-bottom: 1px solid var(--mgy-border-light);
}
.methodology-table td {
    padding: 4px var(--mgy-space-sm);
    vertical-align: top;
}
.methodology-table .factor-header td {
    font-weight: 600;
    color: var(--mgy-text-heading);
    padding-top: var(--mgy-space-lg);
    border-top: 1px solid var(--mgy-border-light);
}
.methodology-table .factor-header:first-child td {
    border-top: none;
}
.methodology-table .good { color: #16a34a; }
.methodology-table .bad { color: #dc2626; }
.methodology-table .neutral { color: var(--mgy-text-muted); }

.boh-research-sources {
    margin-bottom: var(--mgy-space-xs);
}
.boh-research-sources summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--mgy-text-heading);
    padding: var(--mgy-space-xs) 0;
    font-size: var(--mgy-text-sm);
}
.boh-research-sources .source-list {
    padding: var(--mgy-space-xs) 0 var(--mgy-space-sm) var(--mgy-space-md);
    font-size: var(--mgy-text-sm);
    color: var(--mgy-text-muted);
    line-height: 1.7;
}
.boh-research-sources .source-list a {
    color: var(--mgy-brand);
}

/* Methodology disclaimer. Self-contained (uses --mgy tokens) so the SPA
   doesn't depend on Good Years Left's calculator.css, which owns the
   equivalent .hr-note-light styling on the public methodology page. */
.boh-medical-disclaimer {
    padding: var(--mgy-space-md);
    background: var(--mgy-bg-warm-light);
    border: 1px solid var(--mgy-border-light);
    border-radius: var(--mgy-radius-md);
    font-size: var(--mgy-text-sm);
    color: var(--mgy-text-muted);
    line-height: 1.6;
}
.boh-medical-disclaimer strong {
    color: var(--mgy-text-heading);
}

/* Small-screen containment. .mgy-card is a flex container, so its children
   default to min-width: auto and won't shrink below their content — a wide
   <pre> (the disability-shift formula) or a multi-column table would punch
   past the card and force a page-level horizontal scroll. Wrap the formula,
   let it shrink, and keep the SPA section clipped as a final safety net.
   The <pre> rule is on .mgy-card (not .methodology-content) so it also
   reaches the public methodology page, which lacks that wrapper — the
   formula is the only <pre> in the BOH app, so there's no collateral. */
.methodology-content { overflow-x: hidden; }
.mgy-card pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
}

@media (max-width: 600px) {
    /* Reflow the factor / recovery / disability tables to fit a phone:
       overflow-wrap: anywhere drops each column's min-content so the 2- and
       3-column tables shrink instead of forcing the page wide. */
    .methodology-table {
        font-size: var(--mgy-text-xs);
    }
    .methodology-table th,
    .methodology-table td {
        padding: 3px var(--mgy-space-xs);
        overflow-wrap: anywhere;
    }
    /* HR values in "The Eight Factors" (the .good/.bad/.neutral cells) stay
       on one line — otherwise overflow-wrap: anywhere lets the layout starve
       that column and break "0.65" across two lines. */
    .methodology-table td.good,
    .methodology-table td.bad,
    .methodology-table td.neutral {
        white-space: nowrap;
        overflow-wrap: normal;
    }
    /* Recovery Curves + Healthy-vs-Impaired tables (the ones with a <thead>):
       keep the Factor column wide enough that short labels ("BMI", "Sleep")
       don't get squeezed to a sliver. "The Eight Factors" has no <thead>, so
       it's untouched. */
    .methodology-table:has(thead) th:first-child,
    .methodology-table:has(thead) td:first-child {
        min-width: 80px;
    }
}

@media (max-width: 600px) {
    .mgy-toggle-buttons {
        gap: var(--mgy-space-xs);
    }
    .mgy-card.drinking .mgy-toggle-buttons {
        gap: 0;
        justify-content: space-between;
    }
    .mgy-container {
        padding: 0 var(--mgy-space-sm);
    }
}


.boh-baseline .mgy-card {

}
.boh-baseline .mgy-card h1 {
    margin: -0.5rem 0 0.5rem 0;
    font-size: var(--mgy-text-3xl);
}
.boh-baseline p {
    color: var(--mgy-text-light);
}
.baseline.boh-app {
    margin-bottom: 0;
    padding-bottom: 0;
}

@media (max-width: 600px) {
    .boh-baseline .mgy-card h1 {
        margin: -0.25rem 0 1rem 0;
        font-size: var(--mgy-text-2xl);
    }   
}

@media (max-width: 600px) {
    .data-sources.mgy-flex {
        flex-direction: column;
        margin-bottom: 4rem;
    }
}
/* ── Big Picture: maxed-out celebration ─────────────────────────────── */
/* Artwork slot on the celebration card — collapses until an image lands. */
.bp-maxed-graphic:empty {
    display: none;
}
.bp-maxed-graphic {
    text-align: center;
    margin: var(--mgy-space-md) 0;
}
.bp-maxed-graphic img {
    max-width: 100%;
    max-height: 220px;
}