/* Compact workout plan detail screen */

.workout-plan-detail-screen {
    position:relative;
    z-index:5;
    margin-top:8px;
    padding-bottom:110px;
}

.workout-page.showing-plan-details > :not(#workout-plan-detail-screen):not(.exercise-guide-screen) {
    display:none !important;
}

.plan-detail-back {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 18px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:#151519;
    color:#f4f4f6;
    font:inherit;
    font-size:13px;
    font-weight:700;
}

.plan-detail-header h2 {
    margin:4px 0 8px;
    font-size:30px;
    line-height:1.08;
}

.plan-detail-header p {
    margin:0;
    color:#a5a5ad;
    line-height:1.45;
}

.plan-detail-stats {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin:18px 0;
}

.plan-detail-stats > div {
    min-width:0;
    padding:12px 8px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:#121216;
    text-align:center;
}

.plan-detail-stats strong,
.plan-detail-stats span {
    display:block;
}

.plan-detail-stats strong {
    color:#fff;
    font-size:20px;
    line-height:1.1;
}

.plan-detail-stats span {
    margin-top:4px;
    color:#92929b;
    font-size:10px;
    font-weight:700;
    line-height:1.2;
}

.plan-detail-days {
    display:flex;
    gap:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;
}

.plan-detail-days::-webkit-scrollbar {
    display:none;
}

.plan-detail-day {
    flex:0 0 100%;
    width:100%;
    min-width:100%;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:#121216;
    scroll-snap-align:start;
    scroll-snap-stop:always;
}

.plan-detail-day-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding:13px 14px 11px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.plan-detail-day-heading span {
    display:block;
    color:var(--red);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.1px;
}

.plan-detail-day-heading h3 {
    margin:3px 0 0;
    font-size:16px;
    line-height:1.2;
}

.plan-detail-day-heading > strong {
    flex:0 0 auto;
    color:#8f8f98;
    font-size:10px;
}

.plan-detail-exercise-list {
    padding:3px 12px 6px;
}

.plan-detail-exercise-row {
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
    align-items:center;
    min-height:58px;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,.055);
}

.plan-detail-exercise-row:last-child {
    border-bottom:none;
}

.plan-detail-exercise-thumb {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:linear-gradient(145deg, rgba(255,43,54,.18), rgba(255,255,255,.025));
    color:#fff;
}

.plan-detail-exercise-thumb svg {
    width:36px;
    height:36px;
}

.plan-detail-exercise-copy {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-width:0;
    gap:12px;
}

.plan-detail-exercise-name {
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#f5f5f7;
    font-size:13px;
    font-weight:700;
}

.exercise-guide-label {
    flex:0 0 auto;
    padding:2px 5px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    color:#a5a5ad;
    font-size:8px;
    font-weight:800;
    letter-spacing:.03em;
    line-height:1.2;
    text-transform:uppercase;
}

.plan-detail-exercise-target {
    flex:0 0 auto;
    color:#9a9aa2;
    font-size:11px;
    text-align:right;
    white-space:nowrap;
}

.plan-detail-empty {
    margin:12px 0;
    color:#8f8f98;
    font-size:12px;
}

.plan-day-swipe-guide {
    display:grid;
    justify-items:center;
    gap:6px;
    margin:12px 0 2px;
    padding:10px 12px;
    color:#9a9aa3;
    text-align:center;
}

.plan-day-dots {
    display:flex;
    gap:7px;
    align-items:center;
    justify-content:center;
}

.plan-day-dots button {
    width:7px;
    height:7px;
    min-width:7px;
    min-height:7px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#4a4a52;
}

.plan-day-dots button.active {
    width:19px;
    border-radius:999px;
    background:var(--red);
}

.plan-day-swipe-guide > span {
    color:#f0f0f3;
    font-size:11px;
    font-weight:800;
}

.plan-day-swipe-guide > strong {
    font-size:10px;
    font-weight:700;
}

.plan-detail-bottom-actions {
    position:sticky;
    bottom:calc(86px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:10px;
    margin-top:10px;
    padding:12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(14,14,18,.96);
    backdrop-filter:blur(14px);
    box-shadow:0 -10px 30px rgba(0,0,0,.28);
}

.plan-detail-bottom-actions button {
    min-height:48px;
    margin:0;
    border-radius:12px;
    font-size:13px;
    font-weight:800;
}

@media (max-width:600px) {
    .plan-detail-header h2 {
        font-size:27px;
    }

    .plan-detail-bottom-actions {
        bottom:calc(92px + env(safe-area-inset-bottom));
    }

    .plan-detail-exercise-copy {
        display:block;
    }

    .plan-detail-exercise-name,
    .plan-detail-exercise-target {
        display:block;
    }

    .plan-detail-exercise-target {
        margin-top:3px;
        text-align:left;
        white-space:normal;
    }
}

.plan-detail-exercise-row.has-exercise-guide{width:100%;border:1px solid rgba(255,255,255,.08);background:#121216;color:inherit;font:inherit;text-align:left;cursor:pointer;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}.plan-detail-exercise-row.has-exercise-guide:active{transform:scale(.99);background:rgba(239,68,68,.08)}.exercise-guide-screen{padding-bottom:110px}.exercise-guide-header{margin-bottom:15px}.exercise-guide-header h2{margin:5px 0 7px}.exercise-guide-header p{margin:0;color:var(--muted,#a1a1aa);font-size:.8rem;line-height:1.5}.exercise-guide-section{margin-top:12px;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}.exercise-guide-section h3{margin:0 0 11px;font-size:1rem}.exercise-guide-section ol,.exercise-guide-section ul{margin:0;padding-left:21px}.exercise-guide-section li{margin:8px 0;color:#e4e4e7;font-size:.79rem;line-height:1.45}.exercise-muscle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.exercise-muscle-card{display:flex;min-width:0;flex-direction:column;align-items:center;padding:10px 7px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#0d0d10;text-align:center}.exercise-muscle-image-frame{position:relative;width:100%;height:150px;margin-bottom:8px;overflow:hidden;border-radius:10px;background:#050506}.exercise-muscle-figure{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));transition:transform .2s ease}.exercise-muscle-image-frame.crop-core .exercise-muscle-figure{transform:scale(1.08);transform-origin:center center}.exercise-muscle-image-frame.crop-upper .exercise-muscle-figure{transform:scale(1.75);transform-origin:center 25%}.exercise-muscle-image-frame.crop-mid .exercise-muscle-figure{transform:scale(1.65);transform-origin:center 56%}.exercise-muscle-image-frame.crop-lower .exercise-muscle-figure{transform:scale(1.65);transform-origin:center 78%}.exercise-muscle-card strong{font-size:.76rem}.exercise-muscle-card>span{margin-top:5px;padding:3px 7px;border-radius:999px;font-size:.56rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.exercise-muscle-card>span.primary{background:#dc2626;color:#fff}.exercise-muscle-card>span.secondary{background:#3f3f46;color:#e4e4e7}.exercise-cue-list{display:flex;flex-wrap:wrap;gap:7px}.exercise-cue-list span{padding:7px 9px;border:1px solid rgba(239,68,68,.34);border-radius:999px;background:rgba(239,68,68,.08);color:#fca5a5;font-size:.7rem;font-weight:800}@media(min-width:520px){.exercise-muscle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}


.builder-exercise-guide {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    margin-top:7px;
    padding:4px 8px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:rgba(255,255,255,.035);
    color:#b4b4bc;
    font:inherit;
    font-size:9px;
    font-weight:800;
    letter-spacing:.04em;
    line-height:1;
    text-transform:uppercase;
}

.builder-exercise-guide:active {
    background:rgba(255,255,255,.09);
}


/* Keep the builder guide action obvious without adding a separate screen row. */
.builder-exercise-guide {
    display:flex;
    justify-content:center;
    width:100%;
    min-height:36px;
    margin-top:8px;
    border-color:rgba(239,68,68,.34);
    background:rgba(239,68,68,.08);
    color:#f4f4f5;
    font-size:10px;
}

.builder-exercise-guide:active {
    background:rgba(239,68,68,.16);
}
