/* TopBar.kt: white surface bar — lighter than the Compose gradient original, which reads as
   too heavy on web at 1x density. Brand identity comes from the primary-colored title. */
.top-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 8px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 106, 142, 0.12);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.top-bar-title {
    color: #006a8e;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.01em;
}

.top-bar-menu {
    position: absolute;
    right: 8px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.top-bar-menu-button {
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-bar-menu-button:hover {
    background: rgba(0, 106, 142, 0.08);
}

.top-bar-dropdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
}

@keyframes dropdown-appear {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.top-bar-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 220px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 11;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: dropdown-appear 0.15s ease-out;
}

.top-bar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    background: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
    font-size: 14px;
    font-family: inherit;
    color: #2e2c28;
    transition: background-color 0.1s ease;
}

.top-bar-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Log out and other destructive actions — muted red, consistent with Slack/Linear/Notion. */
.top-bar-dropdown-item-destructive {
    color: #c0392b;
}

.top-bar-dropdown-item-destructive:hover {
    background: rgba(192, 57, 43, 0.06);
    color: #a93226;
}

.top-bar-dropdown-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.07);
    margin: 4px 0;
}

/* PageLayout.kt: horizontalPadding/edgeSpacing = 8dp on small screens (<600dp), 16dp otherwise —
   was a fixed 16px regardless of width here, so small screens had more edge padding than the
   real app. */
.dashboard-page-shell {
    max-width: 1000px;
    margin: 0 auto;
    padding: 8px;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .dashboard-page-shell {
        padding: 16px;
    }
}

/* FreeTrialBanner.kt: Surface, tertiaryContainer (#ffd8e4) / onTertiaryContainer (#31111d) —
   Material3 baseline tokens, not overridden by this app's theme. Shape 8dp. */
.free-trial-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffd8e4;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.free-trial-banner:hover {
    filter: brightness(0.97);
}

.free-trial-banner-text {
    flex: 1;
}

.free-trial-banner-title {
    color: #31111d;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.free-trial-banner-body {
    color: rgba(49, 17, 29, 0.85);
    font-size: 14px;
    margin: 0;
}

/* OnboardingScreen.kt's HeroImageStrip: 200dp (small) / 260dp (large) tall, bottom-rounded
   16dp, image cropped, gradient fade into the page background at the bottom. */
.hero-image-strip {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    margin-bottom: 24px;
}

@media (min-width: 600px) {
    .hero-image-strip {
        height: 260px;
    }
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-image-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, #fefefe 100%);
}

/* HeroCard.kt: Card, surfaceContainerHighest (#fbfaf7) + a 10%-alpha primary diagonal gradient
   overlay, shape 16dp. Single column on small screens; first-column-content + a 260dp-wide
   highlights second column on large screens — done with grid-template-areas so the same
   highlights markup just relocates, instead of being duplicated per breakpoint. */
.hero-card {
    background: linear-gradient(135deg, rgba(0, 106, 142, 0.10), transparent), #fbfaf7;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    display: grid;
    grid-template-areas: "badge" "title" "button" "subtitle" "highlights";
    gap: 20px;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .hero-card {
        grid-template-areas:
            "badge highlights"
            "title highlights"
            "button highlights"
            "subtitle highlights"
            ". highlights";
        grid-template-columns: 1fr 260px;
        /* The real Row wrapping these two columns has no horizontalArrangement (0 gap) — the
           visual separation comes only from HeroCardSecondColumn's own 12dp padding, not a gap
           between columns. row-gap stays 20px (Column's verticalArrangement = spacedBy(20.dp)
           within the first column). */
        column-gap: 0;
    }
}

.hero-badge-row {
    grid-area: badge;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* OnboardingHeroCard's NewMemberBadgeRow has Modifier.padding(top=4dp); NoActiveProgram's
   TrainingProgramFinishedBadgeRow doesn't — so this is its own class, not on .hero-badge-row
   itself. */
.hero-badge-row-top-padded {
    padding-top: 4px;
}

.hero-badge-row span {
    color: #2e2c28;
    font-size: 14px;
    font-weight: 400;
}

.hero-title {
    grid-area: title;
    color: #2e2c28;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

/* Real composeApp's height(70.dp) on this button reads thinner there than a literal 70px-tall
   HTML button does — shrunk here too, same deliberate deviation as .primary-button. */
.hero-cta-button {
    grid-area: button;
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #006a8e, rgba(0, 106, 142, 0.8));
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.hero-cta-button:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 8px rgba(0, 106, 142, 0.4);
}

@media (min-width: 600px) {
    .hero-cta-button {
        width: 400px;
    }
}

.hero-subtitle {
    grid-area: subtitle;
    color: #2e2c28;
    font-size: 14px;
    margin: 0;
}

.highlights-section {
    grid-area: highlights;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    box-sizing: border-box;
}

/* HeroCardSecondColumn wraps HighlightsSection in Box(Modifier.padding(12.dp)) — only exists
   when HighlightsSection relocates to the second grid column on large screens. On small
   screens it sits directly in the first column with no such extra padding. */
@media (min-width: 600px) {
    .highlights-section {
        padding: 12px;
    }
}

.highlights-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

/* HighlightBadge: Card, surfaceContainerLow (#fedfc), shape 12dp, icon 40dp gradientTint
   (simplified to solid primaryBlue, see Icons.kt). */
.highlight-badge {
    flex: 1;
    background: #fefdfc;
    /* surfaceContainerLow is nearly identical to the page/card background it sits on — Material3's
       default Card elevation gives it a soft shadow for separation even with near-white colors,
       which a flat background color alone doesn't reproduce. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.highlight-badge-full {
    flex: none;
    width: 100%;
    box-sizing: border-box;
}

.highlight-badge svg {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.highlight-badge-title {
    color: #2e2c28;
    font-size: 20px;
    font-weight: 600;
}

.highlight-badge-text {
    color: #2e2c28;
    font-size: 14px;
}

/* ThreeStepProgram: Card shape 16dp, padding 20dp. Column on small screens, row on large. */
.three-step-card {
    background: #fefefe;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
}

.three-step-title {
    color: #2e2c28;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px;
}

.three-step-subtitle {
    color: #000000;
    font-size: 14px;
    margin: 0 0 16px;
}

.steps-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 600px) {
    .steps-row {
        flex-direction: row;
    }
}

/* StepCard: Card, surfaceContainerLow (#fefdfc), shape 16dp. Same near-invisible-background
   issue as .highlight-badge — needs the shadow to actually read as a card. */
.step-card {
    flex: 1;
    background: #fefdfc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    box-sizing: border-box;
}

.step-card-title {
    color: #2e2c28;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.step-card-text {
    color: #2e2c28;
    font-size: 14px;
    margin: 0;
}

/* Sizing/padding/centering is owned by the parent .dashboard-page-shell (DashboardPage.kt) —
   PageLayout.kt's default maxWidthIn = 1000.dp, which is set there once for every dashboard
   mode rather than redeclared (and double-padded) per mode page. */
.onboarding-page {
    display: block;
}

/* .primary-button defaults to margin: 24px 0 0 (assumes it's the last item in a form card);
   on every dashboard-mode page it's one of the first items instead, ahead of the rest. */
.test-button {
    margin: 0 0 16px;
}

/* ========== ProgramDashboardScreen.kt ========== */

.program-dashboard-page {
    display: block;
}

/* ========== NoActiveProgramDashboardScreen.kt ========== */

/* Unlike ProgramDashboardScreen.kt (Arrangement.Top + manual Spacers), this screen doesn't
   override PageLayout's default verticalArrangement = Arrangement.spacedBy(16.dp) — a flat
   16px gap between every top-level child, same on every screen size. The .summary-section
   selector here is more specific than the bare .summary-section rule (40px small/16px large,
   written for ProgramDashboardScreen's own itemSpacing) so it wins regardless of source order. */
.no-active-program-page > * {
    margin-bottom: 16px;
}

.no-active-program-page > *:last-child {
    margin-bottom: 0;
}

.no-active-program-page .summary-section {
    margin-bottom: 16px;
}

/* TrainingProgramFinishedBadgeRow's Text has an explicit FontWeight.Bold override, unlike
   OnboardingHeroCard's "New Member" badge (.hero-badge-row span, no override). */
.hero-badge-row-bold {
    color: #2e2c28;
    font-size: 14px;
    font-weight: 600;
}

/* ProgramDashboardScreen.kt overrides PageLayout's default Arrangement.spacedBy(16.dp) with
   Arrangement.Top and spaces sections with explicit Spacers instead: 8dp/16dp before
   NextWorkoutContainer, then itemSpacing (40dp small / 16dp large) between
   NextWorkout/Summary/Timeline. */
.next-workout-section {
    margin: 8px 0 24px;
}

.summary-section {
    margin-bottom: 24px;
}

@media (min-width: 600px) {
    .next-workout-section {
        margin: 16px 0 16px;
    }

    .summary-section {
        margin-bottom: 16px;
    }
}

/* TitleRow.kt: icon (gradientTint) + bold titleMedium text + HorizontalDivider below. */
.section-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    margin-bottom: 8px;
}

.section-title-row svg {
    width: 24px;
    height: 24px;
}

.section-title-row span {
    color: #2e2c28;
    font-size: 16px;
    font-weight: 600;
}

.section-divider {
    height: 1px;
    background: rgba(0, 106, 142, 0.1);
    margin: 0 0 16px;
}

/* DataRow (LabelValue.kt): bold "Label: " at a fixed 104dp width + value, inline. */
.data-row {
    display: flex;
    align-items: flex-start;
    margin: 4px 0;
}

.data-row-label {
    width: 104px;
    flex-shrink: 0;
    font-weight: 600;
    color: #2e2c28;
    font-size: 14px;
}

/* DataRow's value Text has no explicit fontWeight override, so it inherits titleSmall's own
   default weight — Medium(500), not the browser's normal(400). */
.data-row-value {
    color: #2e2c28;
    font-size: 14px;
    font-weight: 400;
}

/* FocusAreaChips.kt: pill chips, primary @ 6% alpha bg, primary text. */
.focus-area-chips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}

/* labelSmall's default weight is Medium(500), not the browser's normal(400) — no explicit
   fontWeight override in FocusAreaChips.kt, so the typography token's own default applies. */
.focus-area-chip {
    display: inline-block;
    background: rgba(0, 106, 142, 0.06);
    color: #006a8e;
    border-radius: 50px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 400;
    width: fit-content;
}

/* InformativeTextBox.kt: horizontal gradient surfaceVariant 80%->30%, rounded 8dp. */
.info-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 106, 142, 0.06);
    border: 1px solid rgba(0, 106, 142, 0.12);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
}

.info-box svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.info-box span {
    color: #000000;
    font-size: 13px;
}

/* NextWorkoutContainerSmall has no outer card — TitleRow/InfoBox/Card sit as plain siblings.
   NextWorkoutContainerLarge wraps all three in a NonClickableCardContainer (20dp rounded,
   1px onSurface@8% border, surfaceContainerHighest bg, no elevation), padding(20dp). */
@media (min-width: 600px) {
    .next-workout-section {
        background: #fbfaf7;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 20px;
        padding: 20px;
        box-sizing: border-box;
    }
}

/* NextWorkoutComponentSmall: Card elevation=6dp (real shadow), fillMaxWidth, gradient 2nd stop
   = surfaceContainerHigh (#fcfbf9). NextWorkoutComponentLarge: elevation=0dp (no shadow — it's
   nested inside the outer card already), margin start/end=8dp top=8dp, gradient 2nd stop =
   surfaceContainerLow (#fefdfc). 4px primary left accent bar on both. */
.next-workout-card {
    background: linear-gradient(to right, rgba(0, 106, 142, 0.08), #fcfbf9);
    border-left: 4px solid #006a8e;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 600px) {
    .next-workout-card {
        background: linear-gradient(to right, rgba(0, 106, 142, 0.08), #fefdfc);
        box-shadow: none;
        margin: 8px 8px 0;
    }
}

/* NextWorkoutComponentSmall's Column (fields, then a centered Row with the button) vs
   NextWorkoutComponentLarge's Row (fields weight(1f) beside the button, vertically centered) —
   the same small/large split already applied to TimelineDayCard's body. */
.next-workout-body {
    display: flex;
    flex-direction: column;
    padding: 8px 8px 8px 16px;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .next-workout-body {
        flex-direction: row;
        align-items: center;
    }
}

.next-workout-fields {
    flex: 1;
}

.next-workout-button-row {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

@media (min-width: 600px) {
    .next-workout-button-row {
        margin-top: 0;
        margin-left: 16px;
        flex-shrink: 0;
    }
}

/* NextWorkoutComponentSmall/Large's "Start Workout" PrimaryButton both only have
   Modifier.padding(horizontal=16.dp) — no width/height override on either — so it's the
   standard, full 280x60 PrimaryButton on every screen size, not a custom compact one. */
.next-workout-button-row .primary-button {
    margin: 0;
}

/* SummaryComponent.kt picks ONE of two structurally different composables based on
   isSmallScreen (<600dp) — not a reflow of the same layout. Both are rendered; CSS shows
   exactly one per breakpoint, same as the real screen-size branch. */
.summary-large {
    display: none;
}

.summary-small {
    display: block;
}

@media (min-width: 600px) {
    .summary-large {
        display: block;
    }

    .summary-small {
        display: none;
    }
}

/* ---- SummaryComponentLarge.kt ---- */

.this-week-card,
.summary-secondary-card {
    background: #fbfaf7;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 16px;
    box-sizing: border-box;
}

.this-week-card {
    margin-bottom: 16px;
}

/* ThisWeekCard's title has an explicit FontWeight.Bold override; TotalWorkoutsCard's and
   ConsistencyStreakCard's titles don't — they fall back to titleMedium's own default
   (Medium/500), not Bold. A real asymmetry in the source itself, not a typo to "fix" away. */
.summary-card-title {
    color: #2e2c28;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
}

.summary-card-title-medium {
    font-weight: 400;
}

.summary-card-footnote {
    color: rgba(46, 44, 40, 0.55);
    font-size: 13px;
    margin: 8px 0 0;
}

.week-stats-row {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 8px;
}

.week-stat-column {
    text-align: center;
}

/* ThisWeekCard's NumberComponent uses headlineLarge (~32sp); the secondary cards
   (Consistency/Total Workouts) use the smaller headlineMedium (~28sp) — was one flat size. */
.week-stat-number {
    color: #006a8e;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 4px;
}

.this-week-card .week-stat-number {
    font-size: 32px;
}

/* NumberComponentSecondary{Large,Small} pass highlightColor=secondary for "Total Time" — was
   always rendering with the primary color regardless of metric. */
.week-stat-number-secondary {
    color: #00b4a2;
}

.week-stat-label-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.week-stat-label-row svg {
    width: 16px;
    height: 16px;
}

.week-stat-label-row span {
    color: rgba(46, 44, 40, 0.65);
    font-size: 13px;
    font-weight: 600;
}

.summary-secondary-row {
    display: flex;
    gap: 16px;
}

.summary-secondary-row .summary-secondary-card {
    flex: 1;
    text-align: center;
}

/* ---- SummaryComponentSmall.kt ---- */

/* Column, radial gradient surfaceContainerHigh@60% -> surfaceContainerHighest@80%, 16dp shape,
   padding start/end=16dp top/bottom=8dp. */
.summary-small {
    background: radial-gradient(circle, rgba(252, 251, 249, 0.6), rgba(251, 250, 247, 0.8));
    border-radius: 16px;
    padding: 8px 16px;
    box-sizing: border-box;
}

.summary-small-row {
    display: flex;
    align-items: stretch;
}

.week-stat-section {
    flex: 1;
}

.week-stat-section-title {
    color: #2e2c28;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.week-stat-section-rows {
    padding: 0 0 8px 24px;
}

/* SummaryRowInfo: value (bodyLarge, bold, highlight color) above label (bodySmall, medium). */
.summary-row-info {
    margin: 4px 0;
}

.summary-row-info-value {
    color: #006a8e;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.summary-row-info-secondary .summary-row-info-value {
    color: #00b4a2;
}

.summary-row-info-label {
    color: #000000;
    font-size: 12px;
    font-weight: 400;
    margin: 0;
}

.summary-small-column-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(46, 44, 40, 0.08);
    margin: 0 8px;
}

.summary-small-divider {
    height: 1px;
    background: rgba(46, 44, 40, 0.05);
    margin: 4px 0;
}

/* TotalsComponent: Row padding(top=8dp, start=8dp). */
.summary-small-totals-row {
    display: flex;
    padding: 8px 0 0 8px;
}

.summary-small-totals-row .totals-stat-column {
    flex: 1;
}

/* ConsistencyComponent: Column padding(top=4dp, start=8dp) — same left inset as
   TotalsComponent's Row above, so the icon/title in both rows line up horizontally. Was
   missing the start=8dp here, so this row sat 8px to the left of the totals row above it. */
.summary-small-consistency {
    padding: 4px 0 0 8px;
    box-sizing: border-box;
}

/* TotalsStatColumn/ConsistencyComponent: icon+title row (gradientTint icon), value below
   indented 24dp to align under the title text (not the icon). */
.totals-stat-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.totals-stat-title-row svg {
    width: 16px;
    height: 16px;
}

.totals-stat-title-row span {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
}

.totals-stat-value {
    color: #006a8e;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    padding-left: 24px;
}

/* TotalsComponent passes highlightColor=secondary for "Total Time" — was always primary. */
.totals-stat-value-secondary {
    color: #00b4a2;
}

/* CustomLinearProgressIndicatorWithLabel: 12dp track, onSurface@10%, fill = horizontal gradient
   primary@90% -> secondary(teal)@70%, percentage label in primaryBlue bold. */
.progress-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar-track {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(0, 106, 142, 0.9), rgba(0, 180, 162, 0.7));
}

.progress-bar-label {
    color: #006a8e;
    font-size: 14px;
    font-weight: 600;
}

/* ProgramTimelineScreen.kt's programTimelineScreen(): one continuous rounded card wrapping the
   header and every day row (surfaceContainerHighest background, 20dp rounded top/bottom only on
   the first/last child — simplified here to one rounded card with internal dividers). */
.timeline-container {
    background: #fbfaf7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ProgramDashboardScreen.kt: only the timeline gets Modifier.fullBleed(8.dp) on small screens —
   it escapes the page's 8dp padding to render edge-to-edge, while every other section
   (banner/next-workout/summary) keeps the normal inset. The 20dp rounding is applied inside
   programTimelineScreen() independent of fullBleed, so corners stay rounded even at the edge. */
@media (max-width: 599px) {
    .timeline-container {
        margin-left: -8px;
        margin-right: -8px;
    }
}

/* TrainingProgramHeader.kt: HeaderSmall = padding(horizontal=8dp) only; HeaderLarge =
   padding(20dp) all sides. Was a flat 20px/20px/16px regardless of screen size. */
.timeline-header {
    padding: 8px 8px 16px;
}

@media (min-width: 600px) {
    .timeline-header {
        padding: 20px;
    }
}

/* HeaderSmall vs HeaderLarge: both rendered, CSS shows exactly one per breakpoint — see
   TimelineHeader()'s comment for why (the Update Program button changes position, not just
   layout direction). */
.timeline-header-large {
    display: none;
}

@media (min-width: 600px) {
    .timeline-header-small {
        display: none;
    }

    .timeline-header-large {
        display: block;
    }
}

.timeline-header-subtitle {
    color: rgba(46, 44, 40, 0.6);
    font-size: 13px;
    margin: 4px 0 8px;
}

/* HeaderSmall: Row(SpaceBetween) of completed-text + Update Program button. */
.timeline-header-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

/* HeaderLarge: Row(SpaceBetween) of the title/subtitle column + Update Program button. */
.timeline-header-large-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.timeline-header-large-title-column {
    flex: 1;
}

.timeline-header-large .timeline-header-completed {
    display: block;
    margin: 8px 0 4px;
}

.timeline-header-completed {
    color: rgba(46, 44, 40, 0.65);
    font-size: 13px;
    font-weight: 600;
}

/* programTimelineScreen()'s row Box is just fillMaxWidth() — no horizontal padding of its own
   on either breakpoint; the inset comes entirely from the column/day-card's own padding. */
.timeline-row {
    display: flex;
    padding: 0;
}

.timeline-row:last-child .day-card {
    margin-bottom: 16px;
}

/* TimelineColumn.kt: TimelineColumnSmall = 40dp wide, no leading space; TimelineColumnLarge =
   72dp wide + 20dp leading space (92dp total footprint), matching the day-card's own start
   offset. This padding-left is the source's actual value — it now reads fine since the
   redundant 16px on .timeline-row above (which was compounding the offset) is gone. */
.timeline-column {
    width: 40px;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 600px) {
    .timeline-column {
        width: 92px;
        padding-left: 20px;
    }
}

.timeline-connector {
    width: 2px;
    flex: 1;
    background: rgba(0, 106, 142, 0.2);
    min-height: 12px;
}

.timeline-connector-hidden {
    background: transparent;
}

.timeline-dot {
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.timeline-dot svg {
    width: 16px;
    height: 16px;
}

.timeline-dot-completed {
    background: rgba(0, 106, 142, 0.1);
}

.timeline-dot-next {
    background: transparent;
    border: 2px solid #006a8e;
}

.timeline-dot-upcoming {
    background: transparent;
    border: 2px solid #cac4d0;
}

/* TimelineDayCard.kt: Card, surfaceContainerLowest, 16dp rounded, 4px primary left accent when
   it's the next workout. TimelineDayCardSmall's Column = padding(start=16,end=8,top=8) — no
   bottom padding; TimelineDayCardLarge = padding(horizontal=16,vertical=8). Was a flat
   12px/16px regardless of screen size. */
.day-card {
    flex: 1;
    background: #fefefd;
    border-radius: 16px;
    margin: 0 0 4px;
    padding: 8px 8px 0 16px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 600px) {
    .day-card {
        padding: 8px 16px;
    }
}

.day-card-next {
    background: linear-gradient(to right, rgba(0, 106, 142, 0.08), #fefefd);
    border-left: 4px solid #006a8e;
}

.day-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.day-card-index {
    color: rgba(46, 44, 40, 0.45);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.status-badge {
    border-radius: 50px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 400;
}

.status-badge-completed {
    background: rgba(0, 106, 142, 0.1);
    color: #006a8e;
}

.status-badge-next {
    background: #006a8e;
    color: #ffffff;
}

.status-badge-upcoming {
    background: rgba(46, 44, 40, 0.06);
    color: rgba(46, 44, 40, 0.55);
}

/* TimelineDayCardSmall puts FieldsColumn then ButtonColumnSmall centered below it (Column);
   TimelineDayCardLarge puts FieldsColumn(weight 1f) and ButtonColumnLarge side by side in a Row
   with SpaceBetween — so the button sits on the right only once there's room for it. */
.day-card-body {
    display: flex;
    flex-direction: column;
}

@media (min-width: 600px) {
    .day-card-body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.day-card-fields {
    flex: 1;
}

/* ButtonColumnSmall's Box: fillMaxWidth().padding(horizontal=20dp); ButtonColumnLarge's Box:
   fillMaxHeight().padding(start=12dp). */
.day-card-action {
    display: flex;
    justify-content: center;
    margin-top: 8px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
}

@media (min-width: 600px) {
    .day-card-action {
        justify-content: flex-end;
        align-self: flex-end;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 12px;
        padding: 0;
        flex-shrink: 0;
        width: auto;
    }
}

/* ButtonColumnSmall's "Start" PrimaryButton has NO width/height modifier at all, so
   PrimaryButton's own fixed 280x60 sizing applies unconstrained — it's the same big button as
   everywhere else, not a compact one. ButtonColumnLarge explicitly clamps it to 160x48 via
   Modifier.width(160.dp).height(48.dp) (smaller than PrimaryButton's 280x60, so the clamp wins). */
.day-card .primary-button-small {
    margin: 0;
}

@media (min-width: 600px) {
    .day-card .primary-button-small {
        width: 160px;
        height: 40px;
        font-size: 13px;
    }
}

/* OutlinedSmallButton: outlined pill, primary border/text. Small = fillMaxWidth (no fixed
   width); Large = fixed 160dp width. Default height ~40dp (Material3 OutlinedButton default)
   on both. */
.outlined-small-button {
    margin: 0;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    border-radius: 9999px;
    border: 1px solid rgba(0, 106, 142, 0.8);
    background: transparent;
    color: #006a8e;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
}

@media (min-width: 600px) {
    .outlined-small-button {
        width: 160px;
    }
}

.outlined-small-button:hover {
    background: rgba(0, 106, 142, 0.08);
}

/* SubscriptionLockedOverlay.kt: Box.fillMaxSize() filling the Scaffold's content area below the
   64px TopBar (not capped to PageLayout's 1000dp, since this replaces the dashboard content
   entirely), Color.Black @80% backdrop, centered column. */
.locked-overlay {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 64px);
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.locked-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    text-align: center;
    max-width: 400px;
}

.locked-content svg {
    margin-bottom: 24px;
}

.locked-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: 400;
    margin: 0 0 16px;
}

.locked-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 32px;
}

/* Plain Material3 Button (not the custom PrimaryButton/CardButton elsewhere in this app):
   ButtonDefaults shape = fully rounded pill, MinHeight=40dp, ContentPadding=24dp horizontal/8dp
   vertical, containerColor=primary, contentColor=onPrimary (white). */
.locked-upgrade-button {
    border: none;
    border-radius: 9999px;
    min-height: 40px;
    padding: 8px 24px;
    background: #006a8e;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.locked-upgrade-button:hover {
    filter: brightness(1.1);
}

/* LoadingIndicator.kt's LoadingScreen(): Box.fillMaxSize() centered, same viewport-fill
   treatment as .locked-overlay since neither calls PageLayout. */
.loading-overlay {
    width: 100%;
    min-height: calc(100vh - 64px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Material3's default indeterminate CircularProgressIndicator: 40dp size, 4dp stroke, primary
   color. Reuses the same rotating-arc technique as .button-spinner (a faint full ring + a
   solid-color "head" arc via border-top-color) rather than the real multi-phase sweep
   animation, consistent with that existing simplification. */
.page-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 106, 142, 0.25);
    border-top-color: #006a8e;
    border-radius: 50%;
    animation: button-spinner-spin 0.7s linear infinite;
}

/* DescriptionDialogButton: a plain IconButton, no background. */
.description-dialog-button {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.description-dialog-button:hover {
    background: rgba(0, 106, 142, 0.08);
    border-radius: 50%;
}

/* DescriptionDialog: a Material3 AlertDialog — scrim backdrop, centered rounded surface,
   title + body text + a single "Close" TextButton right-aligned in the button row. */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    padding: 16px;
    box-sizing: border-box;
}

.dialog-box {
    background: #fbfaf7;
    border-radius: 28px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

.dialog-title {
    color: #2e2c28;
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialog-body {
    color: #2e2c28;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    white-space: pre-line;
}

.dialog-button-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

/* StepProgressIndicator: a row of circles connected by lines. Past/current = primary border +
   primary@12% fill; future = onSurface@25% border + onSurface@6% fill, icon dimmed to 35%. */
.step-progress-indicator {
    display: flex;
    align-items: center;
    padding: 8px 16px;
}

.step-connector {
    flex: 1;
    height: 2px;
    background: rgba(46, 44, 40, 0.2);
}

.step-connector-done {
    background: #006a8e;
}

.step-circle {
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-circle svg {
    width: 16px;
    height: 16px;
}

.step-circle-past {
    border: 1.5px solid #006a8e;
    background: rgba(0, 106, 142, 0.12);
}

.step-circle-current {
    border: 2px solid #006a8e;
    background: rgba(0, 106, 142, 0.12);
}

.step-circle-future {
    border: 1.5px solid rgba(46, 44, 40, 0.25);
    background: rgba(46, 44, 40, 0.06);
}

.step-circle-future svg {
    opacity: 0.35;
}

/* ========== AddNewTrainingScreen1.kt (and shared wizard chrome) ========== */

/* LazyPageLayout: maxWidthIn=600dp (narrower than Dashboard's 1000dp), same
   8dp/16dp small/large horizontalPadding as PageLayout, Arrangement.spacedBy(16dp) between
   top-level children. */
.wizard-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 600px) {
    .wizard-page {
        padding: 16px;
    }
}

/* LazyPageLayout only reserves this extra space "if (bottomContent != null)" — screens with no
   sticky Next button (e.g. Screen 2/3, which auto-advance on row click) don't need it. */
.wizard-page-has-bottom-bar {
    padding-bottom: 80px;
}

@media (min-width: 600px) {
    .wizard-page-has-bottom-bar {
        padding-bottom: 16px;
    }
}

/* PageTitle: centered, uppercase titleMedium SemiBold with 0.12em letter-spacing, an info
   dialog button beside it, padding(top=8dp, bottom=16dp since there's no hint text here). */
.wizard-page-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px 16px;
}

.wizard-page-title-with-hint {
    padding-bottom: 8px;
}

/* SemiBold(600) in source, shifted to 500 to match the rest of the app's intentionally
   lightened weights (see the earlier global font-weight reduction). */
.wizard-page-title h1 {
    color: #2e2c28;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

.wizard-page-title-description {
    color: rgba(46, 44, 40, 0.6);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
    margin: 6px 0 0;
    max-width: 360px;
}

.wizard-page-title-hint {
    color: #000000;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    margin: 4px 0 8px;
}

.wizard-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* AddTrainingRow: Card, 80dp tall, 8dp rounded, elevation 2dp. Selected = surfaceVariant bg +
   1dp inverseSurface border; unselected = surface bg, no border. */
.add-training-row {
    margin: 0 8px;
    min-height: 80px;
    border-radius: 8px;
    background: #fefefd;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

.add-training-row-selected {
    background: #e0e0e0;
    border: 1px solid #303030;
}

.add-training-row-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    object-fit: cover;
    align-self: center;
}

.add-training-row-title {
    flex: 1;
    padding: 10px 8px 10px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
}

.add-training-row-title-text {
    color: #2e2c28;
    font-size: 18px;
    font-weight: 400;
}

.add-training-row-description {
    font-size: 13px;
    color: rgba(46, 44, 40, 0.55);
    line-height: 1.5;
    margin-top: 4px;
}

.add-training-row-expand-btn {
    background: none;
    border: none;
    padding: 0 12px;
    cursor: pointer;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    opacity: 0.35;
    transition: opacity 0.15s;
}

.add-training-row-expand-btn:hover {
    opacity: 0.75;
}

.add-training-row-expand-btn svg {
    transition: transform 0.2s;
}

.add-training-row-expand-btn.expanded svg {
    transform: rotate(180deg);
}

/* RowItem.image == null -> title + description centered horizontally, title SemiBold */
.add-training-row-title-no-image {
    align-items: center;
    padding-left: 0;
}

.add-training-row-title-no-image .add-training-row-title-text {
    font-weight: 500;
}

/* LazyPageLayout's bottomContent: sticky to the viewport bottom on small screens (no
   background/shadow in the source — content can scroll behind it), a normal inline list item on
   large screens. */
.wizard-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 16px 8px;
    box-sizing: border-box;
}

.wizard-bottom-bar .primary-button {
    margin: 0;
}

@media (min-width: 600px) {
    .wizard-bottom-bar {
        position: static;
        padding: 16px 0 0;
    }
}

/* ========== AddNewTrainingScreen4.kt + WeekdayPillPicker.kt ========== */

.wizard-schedule {
    display: flex;
    flex-direction: column;
}

/* Bold(700 in source, shifted to 600) error/bodySmall text, padding(bottom=8dp). */
.wizard-schedule-error {
    color: #b00020;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
}

.weekday-pill-row {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

/* DayPill: Surface, CircleShape, 44dp. Unchecked = surfaceVariant bg + onSurfaceVariant text,
   Normal weight; checked = primary bg + onPrimary text, Bold(shifted to 600). */
.weekday-pill {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #e0e0e0;
    color: #000000;
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.weekday-pill:hover {
    filter: brightness(0.95);
}

.weekday-pill-checked {
    background: #006a8e;
    color: #ffffff;
    font-weight: 600;
}

.weekday-pill-checked:hover {
    filter: brightness(1.1);
}

.weekday-duration-divider {
    height: 1px;
    background: rgba(46, 44, 40, 0.06);
    margin: 16px 0;
}

.weekday-duration-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

/* Medium(500 in source, shifted to 400) bodyMedium day title. */
.weekday-duration-row-title {
    color: #2e2c28;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

/* SingleChoiceSegmentedButtonRow: equal-width buttons, rounded only on the first/last item,
   shared borders. Selected = secondaryContainer bg + onSecondaryContainer text (NOT primary —
   Material3's SegmentedButton default token); unselected = transparent bg + onSurface text.
   Border color (outline/DarkerBlue) is the same on every segment regardless of selection. */
.duration-segmented-row {
    display: flex;
    width: 100%;
}

/* labelLarge's own default weight is Medium(500), shifted to 400 — no explicit fontWeight
   override on either state in the source, so selected/unselected share the same weight. */
.duration-segment {
    flex: 1;
    height: 36px;
    border: 1px solid #005b6e;
    border-left: none;
    background: transparent;
    color: #2e2c28;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.duration-segment-first {
    border-left: 1px solid #005b6e;
    border-radius: 18px 0 0 18px;
}

.duration-segment-last {
    border-radius: 0 18px 18px 0;
}

.duration-segment-selected {
    background: #e0f2f1;
    color: #000000;
}

.duration-segment:hover {
    background: rgba(0, 106, 142, 0.06);
}

.duration-segment-selected:hover {
    background: #d3ebe9;
}

/* ========== AddNewExistingTrainingScreen.kt ========== */

.existing-training-card {
    background: #ffffff;
    border: 1px solid rgba(0, 106, 142, 0.15);
    border-radius: 16px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 12px rgba(0, 106, 142, 0.08);
}

.existing-training-icon-row {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #006a8e, #00897b);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.existing-training-question {
    font-size: 16px;
    font-weight: 500;
    color: #2e2c28;
    text-align: center;
    line-height: 1.55;
    margin: 0;
}

.existing-training-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.existing-training-btn {
    width: 100%;
    max-width: 280px;
}

/* ========== AddNewTrainingSuccessScreen.kt ========== */

.wizard-success-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 8px;
    text-align: center;
}

/* PageSubTitle: titleMedium, no fontWeight override -> the token's own default Medium(500),
   shifted to 400. */
.wizard-success-subtitle {
    color: #2e2c28;
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 24px;
}