:root {
    --man-home-max-width: 430px;
}

/*
 * MAN home has two deliberately separate visual systems.
 * The existing board is the dark theme. Light mode uses the warm paper / ink
 * language from the new MAN references instead of inheriting dark values.
 */
body.theme-dark {
    --man-board-line: #2b3037;
    --man-board-muted: #8d929b;
    --man-board-text: #f4f1ea;

    --man-next-bg: #f1ede4;
    --man-next-text: #171411;
    --man-next-muted: #625b54;
    --man-next-accent: var(--man-belt);

    --man-action-bg: #111318;
    --man-action-text: #f4f1ea;
    --man-action-hover: #20242b;
}

body.theme-light {
    --man-board-line: #ded8cb;
    --man-board-muted: #7e776f;
    --man-board-text: #14120f;

    --man-next-bg: #14120f;
    --man-next-text: #f4f1ea;
    --man-next-muted: #b3ab9f;
    --man-next-accent: #d9762f;

    --man-action-bg: #d9762f;
    --man-action-text: #14120f;
    --man-action-hover: #e58a45;
}

.man-home-frame {
    width: 100%;
    max-width: var(--man-home-max-width);
    margin: 0 auto;
}

.man-home-shell {
    /* Match the Progress and Account top inset; the board supplies 18px. */
    padding: 0 0 26px;
}

/* MAN content sits directly on the app canvas; the session card is the
 * deliberate elevated surface. Keep these final board rules canonical here
 * instead of defining a card first and flattening it later. */
.man-board {
    --man-belt: #d9b24c;
    position: relative;
    overflow: hidden;
    padding: 18px 18px 10px;
    color: var(--man-board-text);
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.man-board,
body.theme-dark .man-board,
body.theme-light .man-board {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.man-board::before,
body.theme-dark .man-board::before,
body.theme-light .man-board::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Belt palette: dark keeps the board we already tuned; light is a little earthier. */
body.theme-dark .man-belt-white { --man-belt: #d5d0c8; }
body.theme-dark .man-belt-yellow { --man-belt: #d9b24c; }
body.theme-dark .man-belt-orange { --man-belt: #f08a3c; }
body.theme-dark .man-belt-green { --man-belt: #72a883; }
body.theme-dark .man-belt-blue { --man-belt: #75a0bd; }
body.theme-dark .man-belt-brown { --man-belt: #a8755a; }
body.theme-dark .man-belt-black { --man-belt: #bbb8b2; }

body.theme-light .man-belt-white { --man-belt: #8b857d; }
body.theme-light .man-belt-yellow { --man-belt: #b7892d; }
body.theme-light .man-belt-orange { --man-belt: #c86628; }
body.theme-light .man-belt-green { --man-belt: #54785f; }
body.theme-light .man-belt-blue { --man-belt: #567b94; }
body.theme-light .man-belt-brown { --man-belt: #795442; }
body.theme-light .man-belt-black { --man-belt: #36332f; }

.man-board-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.man-board-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.man-board-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--man-board-muted);
    font-size: 10px;
    line-height: 1.3;
}

.man-board-heading h1 {
    margin: 0 !important;
    color: var(--man-board-text) !important;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.man-board-stage {
    margin-top: 22px;
}

.man-board-stage-bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

.man-board-stage-bar {
    height: 5px;
    border-radius: 99px;
    background: var(--man-board-line);
}

.man-board-stage-bar.is-completed {
    background: var(--man-belt);
}

body.theme-dark .man-board-stage-bar.is-completed {
    box-shadow: 0 0 7px color-mix(in srgb, var(--man-belt) 24%, transparent);
}

.man-board-stage-bar.is-current {
    background: var(--man-belt);
}

body.theme-dark .man-board-stage-bar.is-current {
    background: color-mix(in srgb, var(--man-belt) 90%, #ffffff);
    box-shadow:
        0 0 8px color-mix(in srgb, var(--man-belt) 48%, transparent),
        0 0 18px color-mix(in srgb, var(--man-belt) 18%, transparent);
}

.man-board-stage-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: var(--man-board-muted);
    font-size: 10px;
    line-height: 1.4;
}

.man-board-stage-name {
    color: var(--man-belt);
}

.man-board-next {
    position: relative;
    overflow: hidden;
    margin-top: 26px;
    padding: 23px 21px 21px;
    border-radius: 18px;
    background: var(--man-next-bg);
    color: var(--man-next-text);
    box-shadow: 0 9px 24px rgba(0,0,0,0.16);
    transition: background-color 150ms ease, color 150ms ease;
}

body.theme-light .man-board-next {
    box-shadow: 0 10px 28px rgba(20,18,15,0.14);
}

.man-board-next-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--man-next-accent);
    font-size: 10px;
    line-height: 1.3;
}

.man-board-next h2 {
    margin: 0 !important;
    color: var(--man-next-text) !important;
    font-size: 26px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.man-board-next-copy {
    margin: 9px 0 0 !important;
    color: var(--man-next-muted) !important;
    font-size: 14px;
    line-height: 1.48;
    font-weight: 400;
}

.man-board-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin-top: 19px;
    padding: 0 16px;
    border: 0;
    border-radius: 11px;
    background: var(--man-action-bg);
    color: var(--man-action-text) !important;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.man-board-action:hover,
.man-board-action:focus,
.man-board-action:active {
    color: var(--man-action-text) !important;
    text-decoration: none !important;
    background: var(--man-action-hover);
}

.man-board-action:hover {
    transform: translateY(-1px);
}

.man-board-action:focus-visible {
    outline: 2px solid var(--man-belt);
    outline-offset: 2px;
}

body.theme-light .man-board-action:focus-visible {
    outline-color: #d9762f;
}

.man-board-complete {
    margin-top: 26px;
    padding: 22px 20px;
    border: 1px solid var(--man-board-line);
    border-radius: 14px;
}

.man-board-complete h2 {
    margin: 0 !important;
    color: var(--man-board-text) !important;
    font-size: 23px;
    font-weight: 600;
}

.man-board-complete p {
    margin: 8px 0 0 !important;
    color: var(--man-board-muted) !important;
}

.man-home-empty {
    padding: 26px 22px;
    border-radius: 13px;
    color: var(--man-board-text);
}

body.theme-dark .man-home-empty {
    background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,0.025), transparent 34%),
        linear-gradient(180deg, #0c0f13 0%, #11151a 100%);
}

body.theme-light .man-home-empty {
    border: 1px solid rgba(20,18,15,0.07);
    background: #f4f1ea;
    box-shadow: 0 10px 28px rgba(20,18,15,0.08);
}

.man-home-empty h1 {
    color: var(--man-board-text) !important;
    font-size: 24px;
}

.man-home-empty p {
    margin-bottom: 0 !important;
    color: var(--man-board-muted) !important;
}

@media (max-width: 360px) {
    .man-board {
        padding-left: 15px;
        padding-right: 15px;
    }

    .man-board-next {
        padding-left: 18px;
        padding-right: 18px;
    }

    .man-board-next h2 {
        font-size: 24px;
    }
}

/* Recent training history. */
.man-recent-section {
    margin-top: 31px;
}

.man-recent-heading {
    margin-bottom: 10px;
    color: var(--man-board-muted);
    font-size: 10px;
    line-height: 1.35;
}

.man-recent-list {
    display: flex;
    flex-direction: column;
}

.man-recent-item {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    min-height: 57px;
    padding: 9px 0;
    border-bottom: 1px solid var(--man-board-line);
}

.man-recent-item:last-child {
    border-bottom: 0;
}

.man-recent-rail {
    width: 4px;
    height: 30px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--man-belt) 62%, var(--man-board-line));
}

.man-recent-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.man-recent-copy strong {
    overflow: hidden;
    color: var(--man-board-text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.man-recent-copy span {
    color: var(--man-board-muted);
    font-size: 12px;
    line-height: 1.35;
}

.man-recent-empty {
    margin: 4px 0 0 !important;
    color: var(--man-board-muted) !important;
    font-size: 13px;
    line-height: 1.45;
}

/* Secondary action by design: no filled surface, no competing CTA treatment. */
.man-progress-link-row {
    display: flex;
    justify-content: center;
}

.man-progress-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 6px 0;
    color: var(--man-board-text) !important;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    text-decoration: none !important;
    opacity: 0.68;
    transition: opacity 120ms ease, transform 120ms ease;
}

.man-progress-link:hover,
.man-progress-link:focus,
.man-progress-link:active {
    color: var(--man-board-text) !important;
    text-decoration: none !important;
    opacity: 1;
}

.man-progress-link:hover .man-progress-arrow,
.man-progress-link:focus .man-progress-arrow {
    transform: translateX(2px);
}

.man-progress-link .man-progress-arrow {
    color: var(--man-belt);
    transition: transform 120ms ease;
}

/* Progress detail remains flat and subordinate to the main training CTA. */
.man-progress-page {
    padding: 18px 18px 28px;
    color: var(--man-board-text);
}

.man-progress-title {
    margin: 0 !important;
    color: var(--man-board-text) !important;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.man-progress-summary {
    margin-top: 22px;
    padding: 19px 0 4px;
    border-top: 1px solid var(--man-board-line);
}

.man-progress-numbers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.man-progress-stat strong {
    display: block;
    color: var(--man-board-text);
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
}

.man-progress-stat span {
    display: block;
    margin-top: 5px;
    color: var(--man-board-muted);
    font-size: 10px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.man-progress-history {
    margin-top: 30px;
}

/* Canonical MAN contexts on the progress screen. */
.man-context-list {
    border-top: 1px solid var(--man-board-line);
}

.man-context-group {
    border-bottom: 1px solid var(--man-board-line);
}

.man-context-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    cursor: pointer;
    list-style: none;
    color: var(--man-board-text);
}

.man-context-summary::-webkit-details-marker {
    display: none;
}

.man-context-name {
    min-width: 0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
}

.man-context-count {
    color: var(--man-board-muted);
    font-size: 9px;
}

.man-context-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--man-board-muted);
    font-size: 10px;
    line-height: 1;
}

/* JS keeps the visual chevron state separate from the native open attribute
 * while the close animation is still finishing. */
.man-context-chevron i {
    transform: rotate(0deg) !important;
    transition: transform 180ms ease;
}

.man-context-group.is-content-visible .man-context-chevron i {
    transform: rotate(180deg) !important;
}

.man-context-items {
    padding: 1px 0 7px 38px;
    will-change: opacity, height;
}

/* Native <details> still opens at once; only the revealed content fades in. */
.man-context-group[open] .man-context-items {
    animation: manContextItemsFadeIn 180ms ease-out both;
}

@keyframes manContextItemsFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.man-context-item {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr) 14px;
    gap: 11px;
    align-items: center;
    min-height: 58px;
    padding: 8px 0;
    border-top: 1px solid color-mix(in srgb, var(--man-board-line) 72%, transparent);
    color: var(--man-board-text) !important;
    text-decoration: none !important;
}

.man-context-item .man-recent-rail {
    width: 3px;
    height: 27px;
}

.man-context-item-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.man-context-item-copy strong {
    overflow: hidden;
    color: var(--man-board-text);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.man-context-item-copy span {
    color: var(--man-board-muted);
    font-size: 11px;
    line-height: 1.3;
}

.man-context-item-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--man-board-muted);
    font-size: 9px;
    line-height: 1;
    transition: transform 120ms ease, color 120ms ease;
}

.man-context-item:hover .man-context-item-arrow,
.man-context-item:focus .man-context-item-arrow {
    color: var(--man-belt);
    transform: translateX(2px);
}

.man-context-empty {
    margin: 0 !important;
    padding: 13px 0 14px;
    border-top: 1px solid color-mix(in srgb, var(--man-board-line) 72%, transparent);
    color: var(--man-board-muted) !important;
    font-size: 12px;
    line-height: 1.45;
}

/* Use Home's progress link styling while keeping the back action above
   the detail heading and moving its arrow in the opposite direction. */
.man-training-detail .man-progress-back {
    margin-top: 0;
    margin-bottom: 20px;
}

.man-training-detail .man-progress-back:hover .man-progress-arrow,
.man-training-detail .man-progress-back:focus .man-progress-arrow {
    transform: translateX(-2px);
}

/* Completed MD detail. */
.man-training-detail-meta {
    margin: 8px 0 0 !important;
    color: var(--man-board-muted) !important;
    font-size: 13px;
    line-height: 1.4;
}

.man-training-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 26px;
}

.man-training-stat {
    min-width: 0;
    padding: 14px 9px 13px;
    border: 1px solid var(--man-board-line);
    border-radius: 12px;
    text-align: center;
}

.man-training-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--man-belt) 12%, transparent);
    color: var(--man-belt);
    font-size: 11px;
}

.man-training-stat strong {
    display: block;
    color: var(--man-board-text);
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
}

.man-training-stat > span:last-child {
    display: block;
    margin-top: 6px;
    color: var(--man-board-muted);
    font-size: 9px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.man-training-about {
    margin-top: 29px;
    padding-top: 20px;
    border-top: 1px solid var(--man-board-line);
}

.man-training-about p {
    margin: 0 !important;
    color: var(--man-board-text) !important;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
}

.man-training-about .man-training-completed-at {
    margin-top: 13px !important;
    color: var(--man-board-muted) !important;
    font-size: 11px;
}

.man-training-replay {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin-top: 27px;
    border-radius: 11px;
    background: var(--man-action-bg);
    color: var(--man-action-text) !important;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 120ms ease, transform 120ms ease;
}

.man-training-replay:hover,
.man-training-replay:focus,
.man-training-replay:active {
    color: var(--man-action-text) !important;
    background: var(--man-action-hover);
    text-decoration: none !important;
}

.man-training-replay:hover {
    transform: translateY(-1px);
}

/* The dark shell's default action color is near-black, so give the replay
   CTA its own readable, high-contrast treatment on the detail screen. */
body.theme-dark .man-training-detail .man-training-replay {
    background: #f1eee6;
    color: #171510 !important;
}

body.theme-dark .man-training-detail .man-training-replay:hover,
body.theme-dark .man-training-detail .man-training-replay:focus,
body.theme-dark .man-training-detail .man-training-replay:active {
    background: #ffffff;
    color: #171510 !important;
}

@media (prefers-reduced-motion: reduce) {
    .man-context-items,
    .man-context-chevron i {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 360px) {
    .man-board,
    .man-progress-page {
        padding-left: 15px;
        padding-right: 15px;
    }

    .man-training-stats {
        gap: 6px;
    }

    .man-training-stat {
        padding-left: 6px;
        padding-right: 6px;
    }
}



/* Shared Progress v2 timeline — uses the SAME width, vertical inset, typography,
 * belt palette, and page-title styles as Home above. No separate stylesheet
 * inside the HTMX-swapped page; only timeline-specific components live here. */
.dp-root {
    position: relative;
    z-index: 1;
    isolation: isolate;
    color: var(--man-board-text);
}

.dp-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

/* Heading text and top inset come from .man-board-kicker,
 * .man-progress-title, and the same .man-board container as Home. */
.dp-belt-mark {
    display: inline-block;
    flex: 0 0 30px;
    width: 30px;
    height: 7px;
    margin-top: 9px;
    border-radius: 2px;
    background: var(--man-belt);
}

.dp-source {
    margin: 19px 0 0;
    padding: 8px 0 8px 11px;
    border-left: 2px solid var(--man-belt);
    color: var(--man-board-muted);
    font-size: 11px;
    line-height: 1.55;
}

.dp-day {
    margin-top: 30px;
}

.dp-day-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

/* DZIŚ and HISTORIA reuse precisely the POSTĘP kicker typography.
 * Only neutralize the default h2 weight/margin; do not set independent
 * font-size, line-height or tracking values here. */
.dp-section-label {
    display: block;
    margin: 0;
    font-weight: 400;
}

.dp-count {
    color: var(--man-belt);
    font-size: 10px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dp-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dp-item {
    display: flex;
    align-items: center;
    gap: 17px;
    min-height: 55px;
    margin: 0;
    padding: 0 8px;
    border-bottom: 1px solid var(--man-board-line);
}

.dp-item-open {
    display: flex;
    align-items: center;
    gap: 17px;
    flex: 1;
    min-width: 0;
    min-height: 55px;
    color: var(--man-board-text) !important;
    text-decoration: none !important;
}

.dp-item-open:focus-visible {
    outline: 2px solid var(--man-belt);
    outline-offset: -2px;
    border-radius: 4px;
}

.dp-status-icon {
    display: inline-block;
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
    border: 2px solid color-mix(in srgb, var(--man-board-muted) 76%, transparent);
    border-radius: 50%;
}

/* Three progress states:
 * assigned: hollow grey; attempted: solid grey; completed: belt accent. */
.dp-item.is-started .dp-status-icon {
    border-color: var(--man-board-muted);
    background: var(--man-board-muted);
}

.dp-item.is-completed .dp-status-icon {
    border-color: var(--man-next-accent);
    background: var(--man-next-accent);
}

.dp-item-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
}

.dp-item-title {
    color: var(--man-board-text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
}

.dp-item.is-completed .dp-item-title {
    color: var(--man-board-muted);
}

.dp-item-arrow {
    margin-left: auto;
    color: var(--man-board-muted);
    font-size: 16px;
    line-height: 1;
    transition: transform 150ms ease, color 150ms ease;
}

.dp-item-open:hover .dp-item-arrow,
.dp-item-open:focus .dp-item-arrow {
    color: var(--man-belt);
    transform: translateX(2px);
}

.dp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dp-history {
    margin-top: 28px;
}

.dp-history > .dp-section-label {
    margin-bottom: 7px;
    color: var(--man-board-muted) !important;
}

.dp-history details {
    border-bottom: 1px solid var(--man-board-line);
}

.dp-history summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 67px;
    padding: 10px 0;
    cursor: pointer;
    list-style: none;
}

.dp-history summary::-webkit-details-marker {
    display: none;
}

.dp-history-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.dp-history-name {
    color: var(--man-board-text);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
}

.dp-history-date {
    color: var(--man-board-muted);
    font-size: 12px;
    line-height: 1.3;
}

.dp-history-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--man-board-muted);
    font-size: 11px;
    transition: transform 180ms ease;
}

.dp-history details[open] .dp-history-chevron {
    transform: rotate(90deg);
}

/* History is deliberately quieter than today's training: a smaller,
 * neutral completed marker and a single bottom divider per expanded day. */
.dp-history .dp-status-icon {
    flex-basis: 8px;
    width: 8px;
    height: 8px;
    border-width: 1px;
}

.dp-history .dp-item.is-completed .dp-status-icon {
    border-color: var(--man-board-muted);
    background: var(--man-board-muted);
}

.dp-history .dp-item:last-child {
    border-bottom: 0;
}

.dp-history .dp-items {
    padding-bottom: 0;
}

.dp-lock {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 25px;
    padding: 16px 0;
    border-top: 1px solid var(--man-board-line);
    border-bottom: 1px solid var(--man-board-line);
}

.dp-lock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    color: var(--man-belt);
    font-size: 12px;
}

.dp-lock-title {
    color: var(--man-board-text);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
}

.dp-lock-note {
    margin-top: 3px;
    color: var(--man-board-muted);
    font-size: 12px;
    line-height: 1.4;
}

.dp-lock + .dp-day {
    margin-top: 21px;
}

.dp-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    margin-top: 28px;
    text-align: center;
}

.dp-stats-link {
    color: var(--man-next-accent) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
}

.dp-secondary-link {
    color: var(--man-board-muted) !important;
    font-size: 12px;
    text-decoration: none !important;
}

.dp-stats-link:hover,
.dp-stats-link:focus-visible,
.dp-secondary-link:hover,
.dp-secondary-link:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

.dp-empty {
    margin-top: 30px;
    color: var(--man-board-muted);
    font-size: 13px;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .dp-item-arrow,
    .dp-history-chevron {
        transition: none;
    }
}

/* Developer-only virtual midnight; lives inside Progress, never touches nav. */
.dp-lab-midnight {
    margin-top: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--man-board-divider, #d8d1c6);
    text-align: center;
}
.dp-lab-midnight button {
    border: 1px solid #c48b42;
    border-radius: 12px;
    padding: 12px 20px;
    background: transparent;
    color: #bd6e25;
    font: 700 13px Archivo, sans-serif;
    cursor: pointer;
}
.dp-lab-midnight p {
    margin: 10px auto 0;
    max-width: 330px;
    color: #807a73;
    font: 400 11px/1.6 Archivo, sans-serif;
}
body.theme-dark .dp-lab-midnight button { color: #e6a454; }
body.theme-dark .dp-lab-midnight p { color: #aaa39a; }


/* Program enrollment and today's assigned-item detail share MAN's canonical
   430px .man-home-frame, .man-progress-page, title, kicker, link and CTA.
   Keep only component-specific rhythm and choice treatment here, never
   separate page-wide width, typography or hard-coded light-theme colors. */
.man-program-enroll,
.man-assignment-detail {
    --man-belt: #b7892d;
}
body.theme-dark .man-program-enroll,
body.theme-dark .man-assignment-detail {
    --man-belt: #d9b24c;
}

/* Enrollment deliberately omits the bottom nav, and therefore the usual
   authenticated shell's 24px top inset; compensate without a second wrapper. */
.man-program-enroll {
    padding-top: calc(42px + env(safe-area-inset-top));
    padding-bottom: 64px;
}
.man-program-enroll-kicker {
    margin: 0 0 7px;
}
.man-program-enroll .man-progress-title {
    margin: 0 !important;
}
.man-program-enroll-intro {
    margin: 19px 0 27px !important;
    color: var(--man-board-muted) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}
.man-program-enroll-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 11px;
    padding: 15px 14px;
    border: 1px solid var(--man-board-line);
    border-radius: 12px;
    color: var(--man-board-text);
    font-size: 14px;
    cursor: pointer;
}
.man-program-enroll-choice:focus-within {
    border-color: var(--man-belt);
}
.man-program-enroll-choice input[type="radio"] {
    flex: none;
    margin-top: 4px;
    accent-color: var(--man-belt);
}
.man-program-enroll-choice > span,
.man-program-enroll-choice > div {
    flex: 1;
    min-width: 0;
}
.man-program-enroll-choice strong {
    display: block;
    margin-bottom: 6px;
    color: var(--man-board-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}
.man-program-enroll-choice small {
    display: block;
    color: var(--man-board-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
}
.man-program-enroll-choice select {
    width: 100%;
    margin-top: 11px;
    padding: 11px;
    border: 1px solid var(--man-board-line);
    border-radius: 10px;
    background: transparent;
    color: var(--man-board-text);
}
.man-program-enroll-submit {
    margin-top: 21px;
    cursor: pointer;
    font-family: inherit;
}
.man-program-enroll-back {
    display: flex;
    width: fit-content;
    justify-content: center;
    margin: 21px auto 0;
}

/* An assigned item is part of Progress, not its own oversized page. */
.man-assignment-back {
    margin: 0 0 28px;
}
.man-assignment-overline {
    margin: 0 0 7px;
    color: var(--man-belt);
}
.man-assignment-description {
    margin: 18px 0 28px !important;
    color: var(--man-board-muted) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}
.man-assignment-start {
    margin-top: 0;
    font-family: inherit;
}
.man-assignment-note {
    margin: 18px 0 0;
    color: var(--man-board-muted) !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
}
.man-assignment-lab-activate {
    margin-top: 14px;
}