/* =========================================================
   Pace Clock — RESPONSIVE CSS v34 — swimmer faces travel direction
   File: pace_clock/pc-responsive

   STRUCTURE
   =========================================================

   01. TABLET / SMALL DESKTOP
   02. TABLET
   03. SMALL TABLET
   04. MOBILE CLOCK
   05. MOBILE HEADER
         Home / +Set / Workouts / TV / More
   06. VERY SMALL MOBILE
   07. DESKTOP WORKOUT LIST
   08. TABLET TV COACH
   09. COMPACT WORKOUT DETAILS
   
   ========================================================= */


/* Workout Details: the form scrolls; Save Details stays in view. */
#paceClockApp #workoutDetailsModal{
    align-items:center;
    padding:12px;
}

#paceClockApp #workoutDetailsModal .pcModalCard{
    display:flex;
    flex-direction:column;
    width:min(680px, 100%);
    max-width:680px;
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    padding:0;
    overflow:hidden;
}

#paceClockApp #workoutDetailsModal .pcModalHeader{
    flex:0 0 auto;
    margin:0;
    padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,.14);
    background:#191f24;
}

#paceClockApp #workoutDetailsModal .wdModalBody{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px 12px;
}

#paceClockApp #workoutDetailsModal .wdModalBody > .card{
    margin:0 0 8px;
    padding:10px 12px;
}

#paceClockApp #workoutDetailsModal .wdModalBody > .card:last-child{margin-bottom:0;}

#paceClockApp #workoutDetailsModal .settingsBlockTitle{
    margin:0 0 7px;
    font-size:15px;
    line-height:1.2;
}

#paceClockApp #workoutDetailsModal label{
    min-width:0;
    font-size:12px;
    line-height:1.25;
}

#paceClockApp #workoutDetailsModal .grid3{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
    width:100%;
    margin-top:7px !important;
}

#paceClockApp #workoutDetailsModal .grid3 > label{
    display:block;
    min-width:0;
}

#paceClockApp #workoutDetailsModal input[type="text"],
#paceClockApp #workoutDetailsModal input[type="date"],
#paceClockApp #workoutDetailsModal select{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    min-inline-size:0;
    min-height:36px;
    height:36px;
    margin-top:4px;
    padding:6px 8px;
    font-size:13px;
}

#paceClockApp #workoutDetailsModal textarea{
    box-sizing:border-box;
    max-width:100%;
    min-width:0;
    min-inline-size:0;
}

#paceClockApp #workoutDetailsModal .wdDisclosure{
    min-width:0;
    width:100%;
}

#paceClockApp #workoutDetailsModal .wdDisclosure summary{
    display:flex;
    align-items:center;
    gap:7px;
    min-height:25px;
    margin:0;
    color:#fff;
    cursor:pointer;
    list-style:none;
    font-size:14px;
    font-weight:700;
}

#paceClockApp #workoutDetailsModal .wdDisclosure summary::-webkit-details-marker{display:none;}

#paceClockApp #workoutDetailsModal .wdDisclosure summary::before{
    content:"▸";
    color:#9fd7ff;
    font-size:14px;
    line-height:1;
}

#paceClockApp #workoutDetailsModal .wdDisclosure[open] summary::before{transform:rotate(90deg);}

#paceClockApp #workoutDetailsModal .wdOptionalHint{
    margin-left:auto;
    color:#b9cbd8;
    font-size:11px;
    font-weight:500;
    white-space:nowrap;
}

#paceClockApp #workoutDetailsModal .wdDisclosureBody{margin-top:8px;}

#paceClockApp #workoutDetailsModal #wdDescription{
    width:100%;
    min-height:72px;
    height:72px;
    margin-top:7px;
    padding:8px;
    font-size:13px;
}

#paceClockApp #workoutDetailsModal .wdModalFooter{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 !important;
    padding:10px 14px;
    border-top:1px solid rgba(255,255,255,.16);
    background:#191f24;
}

#paceClockApp #workoutDetailsModal .wdModalFooterHint{
    color:#bbcedb;
    font-size:11px;
    line-height:1.25;
}

#paceClockApp #saveWorkoutDetailsBtn{
    flex:0 0 auto;
    min-width:136px;
    min-height:40px;
    font-weight:700;
}

/* =========================================================
   01. TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width:1024px){

    body:has(#paceClockApp) #paceClockApp .wrap{
        max-width:1400px;
        margin:0 auto;
        padding:10px;
    }

    body:has(#paceClockApp) #paceClockApp .appShell{
        min-height:calc(100vh - 20px);
        min-height:calc(100dvh - 20px);
        margin:10px;
        border-radius:20px;
    }

    #paceClockApp .appHeaderRow{
        display:grid !important;
        grid-template-columns:auto 1fr auto !important;
        align-items:center !important;
        gap:8px !important;
    }

    #paceClockApp .headerLeft,
    #paceClockApp .headerCenter,
    #paceClockApp .headerRight{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
        min-width:0 !important;
        flex-wrap:nowrap !important;
    }

    #paceClockApp .headerLeft{
        justify-content:flex-start !important;
        overflow-x:auto !important;
        scrollbar-width:none;
    }

    #paceClockApp .headerLeft::-webkit-scrollbar{display:none;}

    #paceClockApp .headerCenter{
        justify-content:center !important;
    }

    #paceClockApp .headerRight{
        justify-content:flex-end !important;
    }

    #paceClockApp .appHeaderRow .btn{
        white-space:nowrap !important;
        flex:0 0 auto !important;
    }

    #paceClockApp .appHeaderRow .btn.small{
        min-height:40px !important;
        padding:8px 10px !important;
        font-size:14px !important;
    }

    body:has(#paceClockApp) #homeTopBtn{display:inline-flex;}

    #homeTopBtn{
        width:40px;
        min-width:40px;
        padding:0 !important;
    }

    #homeTopBtn span{display:none;}

    #paceClockApp .settingsPanel{
        top:calc(var(--siteHeaderH) + 12px);
        right:12px;
        bottom:12px;
        left:12px;
        width:auto;
        max-height:none;
    }

   #paceClockApp .thead,
#paceClockApp .trow{
    grid-template-columns:
        30px
        54px
        68px
        78px
        minmax(90px, 1fr)
        minmax(150px, 2fr)
        34px;

    gap:5px;
}

    #paceClockApp .thead{
        padding:6px;
        font-size:12px;
    }

    #paceClockApp .trow{
        min-height:42px;
        padding:5px 6px;
    }

    #paceClockApp .trow .cell:first-child{font-size:15px;}

    #paceClockApp .trow input[type="number"],
    #paceClockApp .trow input[type="text"]{
        height:36px;
        min-height:36px;
        padding:6px 8px;
        border-radius:12px;
        font-size:14px;
    }

    #paceClockApp .iconbtn{
        width:40px;
        height:40px;
        font-size:18px;
    }

    #paceClockApp .headPlusBtn{
        width:32px;
        height:32px;
        border-radius:10px;
        font-size:18px;
    }

    #paceClockApp #rows{max-height:220px;}

    #paceClockApp #clockCard .startbar{
        position:sticky;
        bottom:0;
        z-index:5;
        padding-top:10px;
        padding-bottom:max(10px, env(safe-area-inset-bottom));
        background:transparent;
        backdrop-filter:none;
    }
}


/* =========================================================
   02. TABLET
   ========================================================= */

@media (max-width:768px){

    body:has(#paceClockApp) #paceClockApp .wrap{padding:6px;}

    body:has(#paceClockApp) #paceClockApp .appShell{
        min-height:100vh;
        min-height:100dvh;
        margin:0;
        border-radius:0;
    }

    #paceClockApp #clockCard{
        max-width:1120px;
        margin-top:12px;
        padding:14px;
    }

    #paceClockApp .metaInputs{
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }

    #paceClockApp .metaInputs input{
        height:42px !important;
        min-height:42px !important;
        padding:8px 10px !important;
        border-radius:12px !important;
        font-size:15px !important;
    }

    #templatesBtn,
    #quickBuilderBtn,
    #aiWorkoutBtn,
    #saveAsNewBtn{display:none;}

    #builderMoreBtn{display:inline-flex;}
}


/* =========================================================
   03. SMALL TABLET
   ========================================================= */

@media (max-width:640px){

    #paceClockApp .settingsInner .grid3,
    #paceClockApp .settingsInner .grid2{grid-template-columns:1fr;}

    #paceClockApp #screenSetList > .row:last-of-type{gap:8px;}

    #paceClockApp #screenSetList > .row:last-of-type .btn{
        flex:1 1 0;
        min-width:0;
    }

    #guideTopBtn{
        padding:8px 9px !important;
        font-size:13px !important;
    }

    #paceClockApp .lapRow{
        grid-template-columns:44px 1fr !important;
        gap:8px !important;
    }

    #paceClockApp .lapCompact{font-size:15px;}

    /* Keep the Set List focused on editing. Workout metadata remains
       available from Edit Details without consuming the first screen. */
    #paceClockApp #screenSetList .setlistTopbar{
        grid-template-columns:44px minmax(0, 1fr) 44px !important;
        min-height:44px;
        margin-bottom:8px !important;
    }

    #paceClockApp #screenSetList .backbtn{
        width:44px;
        height:44px;
        border-radius:13px;
        font-size:24px;
    }

    #paceClockApp #screenSetList h2{
        font-size:22px !important;
    }

    #paceClockApp #setListWorkoutDetailsCard{
        display:grid;
        gap:8px;
        margin:0 0 8px;
        padding:10px;
        overflow:visible;
    }

    #paceClockApp #setListWorkoutDetailsCard .workoutSummaryHeader{
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        align-items:center;
        gap:8px;
    }

    #paceClockApp #setListWorkoutDetailsCard .workoutSummaryHeading{min-width:0;}

    #paceClockApp #setListWorkoutDetailsCard .workoutDetailsLabel,
    #paceClockApp #setListWorkoutDetailsCard .workoutSummaryDescription,
    #paceClockApp #setListWorkoutDetailsCard .workoutSummaryMeta,
    #paceClockApp #setListWorkoutDetailsCard .workoutSummaryTags{
        display:none !important;
    }

    #paceClockApp #setListWorkoutDetailsCard .workoutDetailsTitle{
        margin:0;
        font-size:16px;
        line-height:1.2;
        overflow-wrap:anywhere;
    }

    #paceClockApp #setListDetailsBtn{
        width:auto !important;
        min-width:0 !important;
        min-height:36px !important;
        height:36px !important;
        padding:6px 10px !important;
        font-size:12px !important;
        white-space:nowrap;
    }

    #paceClockApp #setListWorkoutDetailsCard .workoutSummaryStats{
        display:grid;
        grid-template-columns:repeat(5, minmax(0, 1fr));
        gap:4px;
        width:100%;
        min-width:0;
    }

    #paceClockApp #setListWorkoutDetailsCard .workoutSummaryStat{
        min-width:0;
        min-height:52px;
        padding:6px 2px;
        border-radius:10px;
    }

    #paceClockApp #setListWorkoutDetailsCard .workoutSummaryStatValue{
        max-width:100%;
        font-size:clamp(13px, 3.8vw, 17px);
        line-height:1.05;
        white-space:nowrap;
    }

    #paceClockApp #setListWorkoutDetailsCard .workoutSummaryStatLabel{
        max-width:100%;
        font-size:clamp(7px, 2vw, 9px);
        line-height:1.05;
        letter-spacing:.04em;
        white-space:nowrap;
    }

    #paceClockApp #setListWorkoutDetailsCard + .card{
        display:none !important;
    }

    /* Workout Details remains compact while keeping the footer visible. */
    #paceClockApp #workoutDetailsModal{
        align-items:stretch;
        padding:max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom));
    }

    #paceClockApp #workoutDetailsModal .pcModalCard{
        width:100%;
        max-width:none;
        max-height:calc(100vh - 12px);
        max-height:calc(100dvh - 12px);
        margin:0;
        padding:0;
        border-radius:18px;
        overflow:hidden;
    }

    #paceClockApp #workoutDetailsModal .pcModalHeader{
        position:static;
        flex:0 0 auto;
        min-height:46px;
        margin:0;
        padding:8px 10px;
        border-bottom:1px solid rgba(255,255,255,.12);
        background:#191f24;
    }

    #paceClockApp #workoutDetailsModal .pcModalTitle{
        font-size:21px;
        line-height:1.1;
    }

    #paceClockApp #closeWorkoutDetailsBtn{
        width:40px !important;
        min-width:40px !important;
        height:40px !important;
        min-height:40px !important;
        padding:0 !important;
    }

    #paceClockApp #workoutDetailsModal .card{
        display:grid;
        gap:8px;
        width:100%;
        margin-top:8px;
        padding:10px;
        border-radius:14px;
    }

    #paceClockApp #workoutDetailsModal .settingsBlockTitle{
        margin:0;
        font-size:16px;
        line-height:1.2;
    }

    #paceClockApp #workoutDetailsModal .grid3{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:8px !important;
        width:100%;
        margin-top:0 !important;
    }

    #paceClockApp #workoutDetailsModal .grid3 > label{min-width:0;}

    #paceClockApp #workoutDetailsModal .grid3 > label:last-child:nth-child(odd){
        grid-column:1 / -1;
    }

    #paceClockApp #workoutDetailsModal label{
        min-width:0;
        font-size:12px;
        line-height:1.2;
    }

    #paceClockApp #workoutDetailsModal input[type="text"],
    #paceClockApp #workoutDetailsModal input[type="date"],
    #paceClockApp #workoutDetailsModal select,
    #paceClockApp #workoutDetailsModal textarea{
        width:100%;
        min-width:0;
        min-height:40px;
        height:40px;
        margin-top:4px;
        padding:7px 9px;
        border-radius:10px;
        font-size:14px;
    }

    #paceClockApp #workoutDetailsModal #wdDescription{
        min-height:72px;
        height:72px;
    }

    #paceClockApp #workoutDetailsModal label:has(#wdTemplate){
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
        margin-top:0 !important;
        font-size:14px;
    }

    #paceClockApp #workoutDetailsModal .wdModalFooter{
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        padding:8px 10px max(8px, env(safe-area-inset-bottom));
    }

    #paceClockApp #saveWorkoutDetailsBtn{
        width:100%;
        min-height:44px;
    }
}


/* =========================================================
   04. MOBILE CLOCK
   ========================================================= */

@media (max-width:480px){

    #paceClockApp #clockCard{
        margin-top:12px;
        padding:12px;
        border-radius:16px;
    }

    #paceClockApp #rows{
        max-height:132px;
        overflow-x:hidden;
        overflow-y:auto;
        padding-right:0;
        padding-left:0;
    }

    #paceClockApp .thead,
    #paceClockApp .trow{
        grid-template-columns:
            24px
            36px
            46px
            56px
            minmax(0, .8fr)
            minmax(0, 1.3fr)
            30px;
        gap:3px;
        padding-right:3px;
        padding-left:3px;
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    #paceClockApp .thead{font-size:11px;}

    #paceClockApp .thead > div{
        min-width:0;
        overflow:hidden;
        text-overflow:clip;
        white-space:nowrap;
    }

    #paceClockApp .thead > div:last-child{
        display:flex !important;
        justify-content:center !important;
        overflow:visible;
    }

    #paceClockApp .trow{
        min-height:40px;
        overflow:hidden;
    }

    #paceClockApp .cell{min-width:0;}

    #paceClockApp .trow input[type="number"],
    #paceClockApp .trow input[type="text"]{
        height:34px;
        min-height:34px;
        padding:4px 5px;
        border-radius:10px;
        font-size:12px;
    }

    #paceClockApp .trow .cell:last-child{
        width:30px;
        min-width:30px;
        max-width:30px;
        justify-content:center;
    }

    #paceClockApp .trow .cell:last-child .iconbtn,
    #paceClockApp .trow .iconbtn{
        width:28px;
        min-width:28px;
        max-width:28px;
        height:28px;
        flex:0 0 28px;
        padding:0;
        font-size:15px;
    }

    #paceClockApp .headPlusBtn{
        width:30px;
        min-width:30px;
        height:30px;
        font-size:18px;
    }

    #paceClockApp #clockCard .time{
        padding:14px 16px;
        border-radius:18px;
        font-size:clamp(52px, 12vw, 72px);
    }

    #paceClockApp #clockCard .status{
        grid-template-columns:minmax(0, 1.45fr) minmax(0, .78fr) minmax(0, .9fr);
        gap:8px;
        margin-top:10px;
    }

    #paceClockApp #clockCard .status .pill{
        min-height:42px;
        padding:6px 8px;
        font-size:clamp(11px, 3.2vw, 13px);
    }

    #paceClockApp #clockCard .startbar{
        grid-template-columns:minmax(0, 1.75fr) minmax(94px, .8fr);
        gap:8px;
        margin-top:10px;
        padding-top:8px;
        padding-bottom:max(8px, env(safe-area-inset-bottom));
    }

    #paceClockApp #startPauseBtn,
    #paceClockApp #skipBtn{
        width:100%;
        height:64px;
        min-width:0;
    }

    #paceClockApp #startPauseBtn{font-size:24px;}

    #paceClockApp #skipBtn{font-size:16px;}

    #paceClockApp .metaInputs{
        grid-template-columns:1fr 1fr;
        gap:6px;
    }
}


/* =========================================================
   04.1 MOBILE / TABLET WORKOUT BUILDER

   Keep the Block header and Adaptive Pace Clock controls in a
   predictable card grid instead of allowing inline flex widths to wrap.
   ========================================================= */

@media (max-width:900px){

    #paceClockApp #blocksEditor > .card{
        min-width:0;
        overflow:visible;
    }

    #paceClockApp #blocksEditor .blockEditorHeader{
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) auto 42px !important;
        align-items:center !important;
        gap:8px !important;
        width:100% !important;
        min-width:0 !important;
    }

    #paceClockApp #blocksEditor .blockEditorTitle{
        grid-column:1;
        grid-row:1;
        min-width:0;
        white-space:nowrap;
    }

    #paceClockApp #blocksEditor .blockRoundsControl{
        grid-column:2;
        grid-row:1;
        min-width:0;
        justify-self:end;
    }

    #paceClockApp #blocksEditor .blockRoundsControl input{
        width:48px !important;
        min-width:48px !important;
        flex:0 0 48px !important;
    }

    #paceClockApp #blocksEditor .blockDeleteButton{
        grid-column:3;
        grid-row:1;
        width:42px !important;
        min-width:42px !important;
        height:42px !important;
        margin-left:0 !important;
        padding:0 !important;
        justify-self:end;
    }

    #paceClockApp #blocksEditor .blockAdaptivePaceClock{
        display:grid !important;
        grid-column:1 / -1;
        grid-row:2;
        grid-template-columns:minmax(0, 1fr) !important;
        gap:8px !important;
        width:100% !important;
        min-width:0 !important;
        flex:none !important;
    }

    #paceClockApp #blocksEditor .blockAdaptiveToggle{
        display:flex !important;
        width:100%;
        min-width:0;
        white-space:normal !important;
        font-size:clamp(15px, 4vw, 18px);
    }

    #paceClockApp #blocksEditor .blockAdaptiveFields[hidden]{
        display:none !important;
    }

    #paceClockApp #blocksEditor .blockAdaptiveFields:not([hidden]){
        display:grid !important;
        grid-template-columns:minmax(120px, 1.35fr) minmax(90px, .85fr) minmax(105px, 1fr) !important;
        align-items:center !important;
        gap:8px !important;
        width:100% !important;
        min-width:0 !important;
        flex:none !important;
    }

    #paceClockApp #blocksEditor .blockAdaptiveStrategy{
        grid-column:auto;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        height:42px !important;
        min-height:42px !important;
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset{
        display:grid !important;
        grid-template-columns:auto auto minmax(52px, 1fr) auto;
        align-items:center !important;
        gap:5px !important;
        min-width:0;
        min-height:42px;
        padding:3px 6px;
        border:1px solid rgba(255,255,255,.16);
        border-radius:12px;
        background:rgba(255,255,255,.07);
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset > input[type="number"]{
        width:100% !important;
        min-width:0 !important;
        height:34px !important;
        min-height:34px !important;
        flex:1 1 auto !important;
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset::after{
        font-size:12px;
        opacity:.8;
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset-pc2::after{
        display:none;
        content:"";
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset-pc3::after{
        display:block;
        content:"sec";
    }

    #paceClockApp #blocksEditor .blockAdaptiveUnit{
        display:none !important;
    }
}

@media (max-width:640px){
    #paceClockApp #blocksEditor .blockAdaptiveFields:not([hidden]){
        grid-template-columns:minmax(0, 1.28fr) minmax(0, .9fr) minmax(0, 1.05fr) !important;
        gap:4px !important;
    }

    #paceClockApp #blocksEditor .blockAdaptiveStrategy{
        height:40px !important;
        min-height:40px !important;
        padding:5px 24px 5px 7px !important;
        font-size:12px !important;
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset{
        grid-template-columns:auto auto minmax(24px, 1fr) auto;
        gap:3px !important;
        min-height:40px;
        padding:3px 4px;
        border-radius:10px;
        font-size:12px;
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset > input[type="checkbox"]{
        width:16px !important;
        min-width:16px !important;
        height:16px !important;
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset > input[type="number"]{
        height:32px !important;
        min-height:32px !important;
        padding:3px !important;
        font-size:13px !important;
        text-align:center;
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset-pc3::after{font-size:10px;}
}

@media (max-width:360px){
    #paceClockApp #blocksEditor .blockAdaptiveOffset{
        gap:2px !important;
        padding:2px !important;
        font-size:10.5px;
        overflow:hidden;
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset > input[type="checkbox"]{
        width:14px !important;
        min-width:14px !important;
        height:14px !important;
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset > input[type="number"]{
        min-width:20px !important;
        padding:2px !important;
    }

    #paceClockApp #blocksEditor .blockAdaptiveOffset-pc3::after{font-size:9px;}

    #paceClockApp #thDistance,
    #paceClockApp #thInterval{font-size:0;}

    #paceClockApp #thDistance::after{
        content:"Dist.";
        font-size:10px;
    }

    #paceClockApp #thInterval::after{
        content:"Int.";
        font-size:10px;
    }
}


/* =========================================================
   05. MOBILE HEADER
   Home / +Set / Workouts / TV / More
   ========================================================= */

@media (max-width:640px){

    /* -----------------------------------------------------
       MOBILE HEADER
       ----------------------------------------------------- */

    #paceClockApp .appHeaderRow{
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) auto !important;
        align-items:center !important;
        gap:6px !important;

        width:100% !important;
        padding:6px !important;
        overflow:hidden !important;
    }

    #paceClockApp .headerLeft,
    #paceClockApp .headerCenter,
    #paceClockApp .headerRight{
        display:flex !important;
        align-items:center !important;
        gap:6px !important;

        min-width:0 !important;
        overflow:visible !important;
    }

    #paceClockApp .headerLeft{
        justify-content:flex-start !important;
    }

    #paceClockApp .headerCenter{
        justify-content:center !important;
    }

    #paceClockApp .headerRight{
        justify-content:flex-end !important;
    }


    /* Hide unnecessary mobile buttons */

    #paceClockApp #resetTopBtn,
    #paceClockApp #statsTopBtn,
    #paceClockApp #guideTopBtn,
    #paceClockApp #openSettingsBtn{
        display:none !important;
    }


    /* Keep only:
       Home / +Set / Workouts / TV / More */

    #paceClockApp #homeTopBtn,
    #paceClockApp #setListTopBtn,
    #paceClockApp #myWorkoutsBtn,
    #paceClockApp #fsBtn,
    #paceClockApp #moreTopBtn{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        flex:0 0 auto !important;

        min-height:44px !important;
        height:44px !important;

        margin:0 !important;
        padding:0 10px !important;

        border-radius:13px !important;

        font-size:13px !important;
        line-height:1 !important;
        white-space:nowrap !important;
    }


    /* Home icon only */

    #paceClockApp #homeTopBtn{
        width:44px !important;
        min-width:44px !important;
        padding:0 !important;
    }

    #paceClockApp #homeTopBtn span{
        display:none !important;
    }


    /* +Set */

    #paceClockApp #setListTopBtn{
        min-width:58px !important;
    }


    /* Workouts takes available middle space */

    #paceClockApp #myWorkoutsBtn{
        width:100% !important;
        min-width:76px !important;
        max-width:108px !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }


    /* TV */

    #paceClockApp #fsBtn{
        min-width:48px !important;
    }


    /* More */

    #paceClockApp #moreTopBtn{
        width:44px !important;
        min-width:44px !important;
        padding:0 !important;

        font-size:22px !important;
    }

}


/* =========================================================
   06. VERY SMALL MOBILE
   ========================================================= */

@media (max-width:390px){

    #paceClockApp .appHeaderRow{
        gap:4px !important;
        padding:5px 3px !important;
    }

    #paceClockApp .headerLeft,
    #paceClockApp .headerCenter,
    #paceClockApp .headerRight{
        gap:4px !important;
    }

    #paceClockApp #homeTopBtn,
    #paceClockApp #moreTopBtn{
        width:40px !important;
        min-width:40px !important;
    }

    #paceClockApp #setListTopBtn{
        min-width:52px !important;
        padding:0 7px !important;
    }

    #paceClockApp #myWorkoutsBtn{
        min-width:68px !important;
        padding:0 7px !important;
        font-size:12px !important;
    }

    #paceClockApp #fsBtn{
        min-width:42px !important;
        padding:0 7px !important;
    }
}

/* =========================================================
   07. DESKTOP WORKOUT LIST
   ========================================================= */

@media (min-width:1025px){

    #paceClockApp #rows{
        max-height:none;
        overflow:visible;
    }
}

/* =========================================================
   08. TABLET TV COACH
   ========================================================= */

@media (min-width:768px) and (max-width:1366px){

    #paceClockApp.mode-tv.tv-layout-coach
    #screenClock{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        min-height:100vh !important;
        min-height:100dvh !important;

        padding:
            max(18px, env(safe-area-inset-top))
            14px
            max(64px, env(safe-area-inset-bottom)) !important;
    }

    #paceClockApp.mode-tv.tv-layout-coach
    #clockCard{
        width:calc(100vw - 28px) !important;
        max-width:none !important;

        margin:0 auto !important;
    }
}

/* =========================================================
   PACE CLOCK — UNIFIED ANALYSISSWIM THEME
   v=2026-09-25.9

   This section is appended to the existing pc-responsive stylesheet.
   It loads after the normal Pace Clock component styles.
   Normal workspace becomes light. Clock and TV modes remain high contrast.
   ========================================================= */

#paceClockApp{
  --pc-ui-text:#19324d;
  --pc-ui-muted:#587188;
  --pc-ui-soft:#f3f9fd;
  --pc-ui-card:#ffffff;
  --pc-ui-line:#c5ddea;
  --pc-ui-blue:#0787d5;
  --pc-ui-blue-dark:#066eaf;
  --pc-ui-shadow:0 8px 22px rgba(23,82,120,.08);
  --pc-ui-shadow-lg:0 16px 38px rgba(23,82,120,.10);
}

body:has(#paceClockApp:not(.mode-tv)){
  color:#19324d;
  background:#edf7fc;
}

#paceClockApp:not(.mode-tv){
  color:var(--pc-ui-text);
  background:#edf7fc;
}

#paceClockApp:not(.mode-tv) .wrap{
  width:min(1920px,calc(100% - clamp(12px,2vw,36px)));
  max-width:none;
  margin:0 auto;
  padding:12px 0 30px;
}

#paceClockApp:not(.mode-tv) .appShell{
  margin:0 auto;
  padding:12px;
  color:var(--pc-ui-text);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* Main command bar */
#paceClockApp:not(.mode-tv) .appHeaderRow{
  gap:9px;
  margin-bottom:12px;
  padding:10px;
  background:#fff;
  border:1px solid var(--pc-ui-line);
  border-radius:15px;
  box-shadow:var(--pc-ui-shadow);
}

#paceClockApp:not(.mode-tv) .headerLeft,
#paceClockApp:not(.mode-tv) .headerCenter,
#paceClockApp:not(.mode-tv) .headerRight{gap:8px;}

#paceClockApp:not(.mode-tv) .btn,
#paceClockApp:not(.mode-tv) .iconBtn,
#paceClockApp:not(.mode-tv) .iconbtn,
#paceClockApp:not(.mode-tv) .headPlusBtn{
  color:#0875b8;
  background:#fff;
  background-image:none;
  border:1px solid #a8d0e7;
  box-shadow:0 3px 9px rgba(23,82,120,.07);
}

#paceClockApp:not(.mode-tv) .btn:hover,
#paceClockApp:not(.mode-tv) .iconBtn:hover,
#paceClockApp:not(.mode-tv) .iconbtn:hover,
#paceClockApp:not(.mode-tv) .headPlusBtn:hover{
  color:#075f98;
  background:#eef8fe;
  border-color:#70b7dd;
  box-shadow:0 8px 17px rgba(23,82,120,.11);
}

#paceClockApp:not(.mode-tv) .btn:focus-visible,
#paceClockApp:not(.mode-tv) .iconBtn:focus-visible,
#paceClockApp:not(.mode-tv) .iconbtn:focus-visible,
#paceClockApp:not(.mode-tv) input:focus,
#paceClockApp:not(.mode-tv) textarea:focus,
#paceClockApp:not(.mode-tv) select:focus{
  outline:3px solid rgba(7,135,213,.20);
  outline-offset:2px;
  box-shadow:none;
}

#paceClockApp:not(.mode-tv) .btn.secondary{
  color:#496b82;
  background:#f5f9fc;
  border-color:#c4dae6;
}

#paceClockApp:not(.mode-tv) .btn.secondary:hover{
  color:#244d68;
  background:#eaf4fa;
  border-color:#9ec6dc;
}

#paceClockApp:not(.mode-tv) #setListTopBtn,
#paceClockApp:not(.mode-tv) #headAddSetBtn,
#paceClockApp:not(.mode-tv) #saveWorkoutBtn,
#paceClockApp:not(.mode-tv) .btn.primary{
  color:#fff;
  background:var(--pc-ui-blue);
  border-color:var(--pc-ui-blue);
}

#paceClockApp:not(.mode-tv) #setListTopBtn:hover,
#paceClockApp:not(.mode-tv) #headAddSetBtn:hover,
#paceClockApp:not(.mode-tv) #saveWorkoutBtn:hover,
#paceClockApp:not(.mode-tv) .btn.primary:hover{
  color:#fff;
  background:var(--pc-ui-blue-dark);
  border-color:var(--pc-ui-blue-dark);
}

#paceClockApp:not(.mode-tv) #fsBtn,
#paceClockApp:not(.mode-tv) #fsBtn.btn,
#paceClockApp:not(.mode-tv) #fsBtn.btn-primary,
#paceClockApp:not(.mode-tv) #fsBtn.primary{
  color:#fff;
  background:#173f5f;
  border-color:#173f5f;
}

#paceClockApp:not(.mode-tv) button:disabled,
#paceClockApp:not(.mode-tv) input:disabled,
#paceClockApp:not(.mode-tv) select:disabled,
#paceClockApp:not(.mode-tv) textarea:disabled{
  color:#8396a5;
  background:#edf3f7;
  border-color:#d2e1e9;
  box-shadow:none;
  opacity:.72;
}

/* Inputs */
#paceClockApp:not(.mode-tv) input[type="number"],
#paceClockApp:not(.mode-tv) input[type="text"],
#paceClockApp:not(.mode-tv) input[type="date"],
#paceClockApp:not(.mode-tv) textarea,
#paceClockApp:not(.mode-tv) select{
  color:#19364d;
  background:#fff;
  border-color:#bad5e5;
}

#paceClockApp:not(.mode-tv) input::placeholder,
#paceClockApp:not(.mode-tv) textarea::placeholder{color:#8095a5;}

#paceClockApp:not(.mode-tv) option{
  color:#19364d;
  background:#fff;
}

/* Set table */
#paceClockApp:not(.mode-tv) #setsTable,
#paceClockApp:not(.mode-tv) .table{
  color:var(--pc-ui-text);
  background:#fff;
  border:1px solid var(--pc-ui-line);
  border-radius:15px;
  box-shadow:var(--pc-ui-shadow);
}

#paceClockApp:not(.mode-tv) .thead{
  color:#fff;
  background:#137fbd;
  border:0;
}

#paceClockApp:not(.mode-tv) .trow{
  color:#19364d;
  background:#fff;
  border-top:1px solid #d3e4ed;
  opacity:1;
}

#paceClockApp:not(.mode-tv) .trow:nth-child(even){background:#f2f8fc;}

#paceClockApp:not(.mode-tv) .trow:hover{background:#eaf6fd;}

#paceClockApp:not(.mode-tv) .trow.active{
  background:#e3f3fc;
  border:2px solid #55abe0;
  box-shadow:inset 4px 0 0 #0787d5,0 8px 20px rgba(23,82,120,.10);
}

#paceClockApp:not(.mode-tv) .trow .cell,
#paceClockApp:not(.mode-tv) .metaCell,
#paceClockApp:not(.mode-tv) .rowMeta{color:#365871;}

#paceClockApp:not(.mode-tv) .trow .cell input{
  color:#19364d;
  background:#fff;
  border-color:#b7d2e1;
}

#paceClockApp:not(.mode-tv) .trow.active .cell input{
  color:#173f5d;
  background:#fff;
  border-color:#70b7dd;
}

#paceClockApp:not(.mode-tv) .trash,
#paceClockApp:not(.mode-tv) .blockSetDelete{
  color:#ad3f3f;
  background:#fff5f5;
  border-color:#e7bcbc;
}

/* High-contrast clock card */
#paceClockApp:not(.mode-tv) #clockCard{
  color:#fff;
  background:
    radial-gradient(circle at 90% 0,rgba(29,139,207,.25),transparent 38%),
    linear-gradient(145deg,#0b2940,#0a5e91);
  border:1px solid #0b719f;
  box-shadow:0 16px 38px rgba(7,48,74,.22);
}

#paceClockApp:not(.mode-tv) #clockCard .time{
  color:#fff;
  background:rgba(3,24,39,.50);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06);
  text-shadow:0 4px 16px rgba(0,0,0,.24);
}

#paceClockApp:not(.mode-tv) #clockCard .status .pill,
#paceClockApp:not(.mode-tv) #phaseStatus,
#paceClockApp:not(.mode-tv) #setStatus,
#paceClockApp:not(.mode-tv) #repStatus,
#paceClockApp:not(.mode-tv) #roundStatus,
#paceClockApp:not(.mode-tv) #roundInlineControl{
  color:#fff;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.20);
}

#paceClockApp:not(.mode-tv) #startPauseBtn{
  color:#fff;
  background:linear-gradient(180deg,#37b85a,#278f43);
  border-color:#57c475;
  box-shadow:0 10px 24px rgba(24,104,53,.28);
}

#paceClockApp:not(.mode-tv) #startPauseBtn:hover{
  color:#fff;
  background:linear-gradient(180deg,#42c666,#278f43);
}

#paceClockApp:not(.mode-tv) #skipBtn{
  color:#fff;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
}

#paceClockApp:not(.mode-tv) #skipBtn:hover{
  color:#fff;
  background:rgba(255,255,255,.19);
}

#paceClockApp:not(.mode-tv) #clockCard .clockBottomBar,
#paceClockApp:not(.mode-tv) #setRepLabel,
#paceClockApp:not(.mode-tv) #hint,
#paceClockApp:not(.mode-tv) #clockCard .sideArrows,
#paceClockApp:not(.mode-tv) .blockSetTimes,
#paceClockApp:not(.mode-tv) .blockSetOn,
#paceClockApp:not(.mode-tv) .pcPersonalTargetStatus{color:rgba(255,255,255,.82);}

/* Generic cards and screens */
#paceClockApp:not(.mode-tv) .card,
#paceClockApp:not(.mode-tv) .workoutDetailsCard,
#paceClockApp:not(.mode-tv) .workoutCard,
#paceClockApp:not(.mode-tv) .workoutStatCard,
#paceClockApp:not(.mode-tv) .workoutDistributionCard,
#paceClockApp:not(.mode-tv) .calendarWrap,
#paceClockApp:not(.mode-tv) .calendarDayPanel,
#paceClockApp:not(.mode-tv) .weekPlannerDay,
#paceClockApp:not(.mode-tv) .yearMonthCard{
  color:var(--pc-ui-text);
  background:#fff;
  background-image:none;
  border-color:var(--pc-ui-line);
  box-shadow:var(--pc-ui-shadow);
}

#paceClockApp:not(.mode-tv) .cardTitle,
#paceClockApp:not(.mode-tv) .workoutTitle,
#paceClockApp:not(.mode-tv) .workoutDetailsTitle,
#paceClockApp:not(.mode-tv) .workoutSummaryHeading,
#paceClockApp:not(.mode-tv) .workoutStatsSectionTitle,
#paceClockApp:not(.mode-tv) .calendarTitle,
#paceClockApp:not(.mode-tv) .calendarDayPanelTitle,
#paceClockApp:not(.mode-tv) .yearMonthTitle{
  color:#17314c;
  font-family:"Philosopher",Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:700;
}

#paceClockApp:not(.mode-tv) .workoutMeta,
#paceClockApp:not(.mode-tv) .workoutDetailsMeta,
#paceClockApp:not(.mode-tv) .workoutSummaryDescription,
#paceClockApp:not(.mode-tv) .workoutSummaryMeta,
#paceClockApp:not(.mode-tv) .workoutStatSub,
#paceClockApp:not(.mode-tv) .yearMonthMeta{color:var(--pc-ui-muted);}

#paceClockApp:not(.mode-tv) .currentWorkoutBar,
#paceClockApp:not(.mode-tv) .workoutDetailsCardTop,
#paceClockApp:not(.mode-tv) .workoutSummaryHeader{
  color:#19364d;
  background:linear-gradient(135deg,#f5fbff,#e9f6fd);
  border-color:#b9d9ea;
}

#paceClockApp:not(.mode-tv) .workoutCard.selected,
#paceClockApp:not(.mode-tv) .workoutCard.isPinned{
  background:#edf8fe;
  border-color:#7ebfe1;
  box-shadow:inset 4px 0 0 #0787d5,var(--pc-ui-shadow);
}

/* Workout builder */
#paceClockApp:not(.mode-tv) #screenSetList,
#paceClockApp:not(.mode-tv) #screenSetList .setlistTopbar{
  color:var(--pc-ui-text);
  background:#fff;
}

#paceClockApp:not(.mode-tv) #screenSetList h2{
  color:#17314c;
  font-family:"Philosopher",Georgia,"Times New Roman",serif;
  font-style:italic;
}

#paceClockApp:not(.mode-tv) .blockSetRow{
  color:#19364d;
  background:#fff;
  border-color:#c8deeb;
}

#paceClockApp:not(.mode-tv) .blockSetRow:nth-child(even){background:#f3f9fd;}

#paceClockApp:not(.mode-tv) .builderMoreMenu{
  color:#19364d;
  background:#fff;
  border-color:#c3dce9;
  box-shadow:0 14px 34px rgba(18,63,91,.16);
}

/* Calendar */
#paceClockApp:not(.mode-tv) .calendarHeader,
#paceClockApp:not(.mode-tv) .calendarWeekday,
#paceClockApp:not(.mode-tv) .weekPlannerDayTitle{
  color:#31566f;
  background:#edf7fc;
  border-color:#c9dfea;
}

#paceClockApp:not(.mode-tv) .calendarCell{
  color:#19364d;
  background:#fff;
  border-color:#d0e2ec;
}

#paceClockApp:not(.mode-tv) .calendarCell.hasWorkout{
  background:#edf8fe;
  border-color:#8ec7e5;
}

#paceClockApp:not(.mode-tv) .calendarCell.hasWorkout:hover,
#paceClockApp:not(.mode-tv) .calendarCell.selected,
#paceClockApp:not(.mode-tv) .calendarCell.today,
#paceClockApp:not(.mode-tv) .weekPlannerDay.dragOver{
  background:#dff1fb;
  border-color:#5dafe0;
}

#paceClockApp:not(.mode-tv) .calendarBadge,
#paceClockApp:not(.mode-tv) .workoutSummaryBadge,
#paceClockApp:not(.mode-tv) .workoutSummaryTag{
  color:#086fae;
  background:#e5f4fc;
  border-color:#add6eb;
}

/* Settings */
#paceClockApp:not(.mode-tv) .settingsOverlay{
  background:rgba(8,29,44,.58);
  backdrop-filter:blur(5px);
}

#paceClockApp:not(.mode-tv) .settingsPanel{
  color:var(--pc-ui-text);
  background:#fff;
  border-color:#bdd7e6;
  box-shadow:0 24px 70px rgba(8,43,66,.28);
  backdrop-filter:none;
}

#paceClockApp:not(.mode-tv) .settingsHeader,
#paceClockApp:not(.mode-tv) .settingsBlockTitle,
#paceClockApp:not(.mode-tv) .settingsDetails > summary{color:#17314c;}

#paceClockApp:not(.mode-tv) .settingsBlock,
#paceClockApp:not(.mode-tv) .settingsDetails,
#paceClockApp:not(.mode-tv) .powerBlock{
  color:#35576f;
  background:#f6fbfe;
  border-color:#cbdfea;
}

#paceClockApp:not(.mode-tv) .settingsInner label span,
#paceClockApp:not(.mode-tv) #strokeRateInfo,
#paceClockApp:not(.mode-tv) #staggerMaxLine,
#paceClockApp:not(.mode-tv) .powerText{color:var(--pc-ui-muted);}

#paceClockApp:not(.mode-tv) .toggle{
  background:#0787d5;
  border-color:#0787d5;
}

#paceClockApp:not(.mode-tv) .toggle.off{
  background:#d5e3eb;
  border-color:#b9ccd7;
}

/* Modals */
#paceClockApp:not(.mode-tv) .pcModal,
#paceClockApp:not(.mode-tv) .pcAssignModal{
  background:rgba(7,29,44,.62);
  backdrop-filter:blur(6px);
}

#paceClockApp:not(.mode-tv) .pcModalCard,
#paceClockApp:not(.mode-tv) .pcAssignModalCard{
  color:var(--pc-ui-text);
  background:#fff;
  border-color:#bdd7e6;
  box-shadow:0 26px 80px rgba(7,35,53,.34);
}

#paceClockApp:not(.mode-tv) .pcModalHeader,
#paceClockApp:not(.mode-tv) .pcModalTitle{
  color:#17314c;
  background:#fff;
  border-color:#cbdfea;
}

#paceClockApp:not(.mode-tv) .pcAssignIntro,
#paceClockApp:not(.mode-tv) .pcAssignTargetPreview,
#paceClockApp:not(.mode-tv) .pcAssignField,
#paceClockApp:not(.mode-tv) .wdDisclosure,
#paceClockApp:not(.mode-tv) .wdModalBody > .card{
  color:#35576f;
  background:#f5faff;
  border-color:#c9dfea;
}

#paceClockApp:not(.mode-tv) .pcAssignFooter,
#paceClockApp:not(.mode-tv) .wdModalFooter{
  background:#f7fbfe;
  border-color:#cbdfea;
}

/* Empty workout */
#paceClockApp:not(.mode-tv) .pcEmptyWorkout{
  color:var(--pc-ui-text);
  background:
    radial-gradient(circle at 92% 8%,rgba(7,143,229,.12),transparent 34%),
    linear-gradient(135deg,#fff,#f1f9fe);
  border-color:#bcd9e9;
  box-shadow:var(--pc-ui-shadow);
}

#paceClockApp:not(.mode-tv) .pcEmptyWorkout__plus{
  color:#fff;
  background:#0787d5;
  box-shadow:0 8px 20px rgba(7,135,213,.20);
}

#paceClockApp:not(.mode-tv) .pcEmptyWorkout__eyebrow{color:#0879c2;}

#paceClockApp:not(.mode-tv) .pcEmptyWorkout__title{
  color:#17314c;
  font-family:"Philosopher",Georgia,"Times New Roman",serif;
  font-style:italic;
}

#paceClockApp:not(.mode-tv) .pcEmptyWorkout__text,
#paceClockApp:not(.mode-tv) .pcEmptyWorkout__hint{color:var(--pc-ui-muted);}

#paceClockApp:not(.mode-tv) .pcEmptyWorkout__create{
  color:#fff;
  background:#0787d5;
  border-color:#0787d5;
}

/* Adaptive clocks stay dark and readable. */
#paceClockApp:not(.mode-tv) .pcAdaptiveDisplay,
#paceClockApp:not(.mode-tv) .pcAdaptiveClock{
  color:#fff;
  background:linear-gradient(145deg,#0b2940,#0a5e91);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 12px 28px rgba(7,48,74,.20);
}

#paceClockApp:not(.mode-tv) .pcAdaptiveDisplayHeader,
#paceClockApp:not(.mode-tv) .pcAdaptiveDisplayFooter,
#paceClockApp:not(.mode-tv) .pcAdaptiveClockTop,
#paceClockApp:not(.mode-tv) .pcAdaptiveClockMeta{
  color:rgba(255,255,255,.84);
  border-color:rgba(255,255,255,.15);
}

/* Premium and login overlays live outside the app root. */
.pcAccessGate,
.pcLoginOverlay{
  background:rgba(7,29,44,.64);
  backdrop-filter:blur(6px);
}

.pcAccessGate__dialog,
.pcLoginModal{
  color:#19324d;
  background:#fff;
  border:1px solid #bdd7e6;
  box-shadow:0 26px 80px rgba(7,35,53,.34);
}

.pcAccessGate__header,
.pcAccessGate__actions{
  background:#f7fbfe;
  border-color:#cbdfea;
}

.pcAccessGate__brand,
.pcAccessGate__title,
.pcLoginTitle{color:#17314c;}

.pcAccessGate__eyebrow{color:#0879c2;}

.pcAccessGate__message,
.pcAccessGate__note{color:#587188;}

.pcAccessGate__button,
.pcLoginModal .btn{
  color:#0875b8;
  background:#fff;
  border-color:#a8d0e7;
}

.pcAccessGate__button--primary,
.pcAccessGate__button--primary:hover,
body .pcLoginModal button.loginBtn,
body .pcLoginModal button.loginBtn:hover{
  color:#fff;
  background:#0787d5;
  border-color:#0787d5;
}

/* TV mode intentionally remains controlled by pc-tv.css. */
#paceClockApp.mode-tv{color:#fff;}

@media (max-width:1024px){
  #paceClockApp:not(.mode-tv) .wrap{
    width:calc(100% - 16px);
    padding-top:8px;
  }

  #paceClockApp:not(.mode-tv) .appShell{padding:8px;}
}

@media (max-width:768px){
  #paceClockApp:not(.mode-tv) .appHeaderRow{
    padding:8px;
    border-radius:13px;
  }

  #paceClockApp:not(.mode-tv) #setsTable,
  #paceClockApp:not(.mode-tv) .table,
  #paceClockApp:not(.mode-tv) #clockCard{border-radius:13px;}

  #paceClockApp:not(.mode-tv) #clockCard{padding:12px;}

  #paceClockApp:not(.mode-tv) #clockCard .time{
    padding:16px 10px;
    border-radius:15px;
  }
}

@media (max-width:480px){
  #paceClockApp:not(.mode-tv) .wrap{
    width:100%;
    padding:4px 0 16px;
  }

  #paceClockApp:not(.mode-tv) .appShell{padding:5px;}

  #paceClockApp:not(.mode-tv) .appHeaderRow{
    gap:6px;
    padding:7px;
  }

  #paceClockApp:not(.mode-tv) .appHeaderRow .btn,
  #paceClockApp:not(.mode-tv) .appHeaderRow .iconBtn{
    min-height:40px;
    padding:7px 9px;
    font-size:12px;
  }

  #paceClockApp:not(.mode-tv) #clockCard .time{font-size:clamp(52px,18vw,78px);}

  #paceClockApp:not(.mode-tv) .pcModalCard,
  #paceClockApp:not(.mode-tv) .pcAssignModalCard,
  .pcAccessGate__dialog,
  .pcLoginModal{
    width:calc(100vw - 12px);
    max-height:calc(100dvh - 12px);
  }
}

@media (prefers-reduced-motion:reduce){
  #paceClockApp *,
  .pcAccessGate *,
  .pcLoginOverlay *{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}

/* =========================================================
   SET DRAG — END-OF-BLOCK DROP ZONE
   ========================================================= */

#paceClockApp:not(.mode-tv) .blockSetEndDrop{
  position:relative;
  transition:
    min-height .16s ease,
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

#paceClockApp:not(.mode-tv) #blocksEditor.pc-set-drag-active .blockSetEndDrop{
  min-height:46px;
  color:#0875b8;
  background:#eef9ff;
  border:1px dashed #59afe0;
}

#paceClockApp:not(.mode-tv) #blocksEditor.pc-set-drag-active .blockSetEndDrop::after{
  content:" — Drop here to place last";
  color:#3e7899;
  font-weight:700;
}

#paceClockApp:not(.mode-tv) #blocksEditor .blockSetEndDrop.pc-set-drop-end{
  color:#fff !important;
  background:#078bd8 !important;
  border-color:#078bd8 !important;
  box-shadow:0 0 0 3px rgba(7,139,216,.18), 0 10px 24px rgba(7,105,166,.18);
}

#paceClockApp:not(.mode-tv) #blocksEditor .blockSetEndDrop.pc-set-drop-end::after{color:#fff;}

@media (max-width:420px){
  #paceClockApp:not(.mode-tv) #blocksEditor.pc-set-drag-active .blockSetEndDrop::after{
    content:" — Drop as last";
  }
}

/* =========================================================
   2026-09-29.22 — STABLE STATISTICS REFRESH

   Keep the already rendered plan statistics in place while IndexedDB is
   refreshed. The compact status pill is absolutely positioned so loading
   never changes the dashboard height or moves the user's scroll position.
   ========================================================= */

#paceClockApp:not(.mode-tv) .pcStatsDashboard{position:relative;}

#paceClockApp:not(.mode-tv) .pcStatsRefreshStatus{
  position:absolute;
  z-index:8;
  top:10px;
  right:10px;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:calc(100vw - 24px);
  min-height:36px;
  padding:7px 11px;
  border:1px solid #9bcfe8;
  border-radius:999px;
  color:#075d91;
  background:rgba(244,251,255,.96);
  box-shadow:0 6px 18px rgba(12,77,113,.14);
  font-size:11px;
  font-weight:900;
  line-height:1.2;
  pointer-events:none;
}

#paceClockApp:not(.mode-tv) .pcStatsRefreshSpinner{
  flex:0 0 auto;
  width:14px;
  height:14px;
  border:2px solid #b9def0;
  border-top-color:#078bd8;
  border-radius:50%;
  animation:pcStatsRefreshSpin .75s linear infinite;
}

@keyframes pcStatsRefreshSpin{to{transform:rotate(360deg);}
}

@media (max-width:600px){
  #paceClockApp:not(.mode-tv) .pcStatsRefreshStatus{
    position:fixed;
    top:70px;
    right:12px;
    min-height:34px;
    padding:6px 10px;
  }
}

@media (prefers-reduced-motion:reduce){
  #paceClockApp:not(.mode-tv) .pcStatsRefreshSpinner{animation:none;}
}

@media (prefers-reduced-motion:reduce){
  #paceClockApp:not(.mode-tv) .blockSetEndDrop{transition:none;}
}

/* =========================================================
   SET DRAG — START-OF-BLOCK DROP ZONE + BLOCK ACTIONS
   ========================================================= */

#paceClockApp:not(.mode-tv) .blockEditorActions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex:0 0 auto;
}

#paceClockApp:not(.mode-tv) .blockCopyButton{
  min-width:82px;
  white-space:nowrap;
}

#paceClockApp:not(.mode-tv) .blockSetStartDrop{
  display:grid;
  place-items:center;
  max-height:0;
  min-height:0;
  margin:0;
  padding:0 12px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  color:#0875b8;
  background:#eef9ff;
  border:0 dashed transparent;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  transition:
    max-height .16s ease,
    min-height .16s ease,
    margin .16s ease,
    opacity .16s ease,
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

#paceClockApp:not(.mode-tv) #blocksEditor.pc-set-drag-active .blockSetStartDrop{
  max-height:46px;
  min-height:42px;
  margin:0 0 7px;
  opacity:1;
  pointer-events:auto;
  border-width:1px;
  border-color:#59afe0;
}

#paceClockApp:not(.mode-tv) #blocksEditor .blockSetStartDrop.pc-set-drop-start{
  color:#fff;
  background:#078bd8;
  border-color:#078bd8;
  box-shadow:0 0 0 3px rgba(7,139,216,.18), 0 10px 24px rgba(7,105,166,.18);
}

#paceClockApp:not(.mode-tv) #blocksEditor.pc-set-drag-active .blockSetStartTarget{cursor:ns-resize;}

@media (max-width:768px){
  #paceClockApp:not(.mode-tv) .blockEditorActions{
    width:100%;
    justify-content:flex-end;
    margin-left:0;
  }
}

@media (prefers-reduced-motion:reduce){
  #paceClockApp:not(.mode-tv) .blockSetStartDrop{transition:none;}
}

/* =========================================================
   11. WIDE-SCREEN GEOMETRY + LIGHT WORKOUT BUILDER
   Fixes legacy white-on-white text and keeps normal mode centred.
   ========================================================= */

/* .wrap and .appShell are the same element in the Pace Clock markup. */
#paceClockApp:not(.mode-tv) .wrap.appShell{
  width:min(1920px,calc(100% - clamp(12px,2vw,36px)));
  max-width:none;
  margin:0 auto;
}

#paceClockApp:not(.mode-tv) #screenClock{
  width:100%;
  min-width:0;
}

#paceClockApp:not(.mode-tv) #setsTable,
#paceClockApp:not(.mode-tv) .appHeaderRow{
  width:100%;
  max-width:none;
  margin-right:auto;
  margin-left:auto;
}

#paceClockApp:not(.mode-tv) #clockCard{
  width:min(1120px,100%);
  max-width:1120px;
  margin-right:auto;
  margin-left:auto;
}

/* Set List uses the available desktop space, but never becomes hard to scan. */
#paceClockApp:not(.mode-tv) #screenSetList{
  width:min(1500px,100%);
  max-width:1500px !important;
  margin:0 auto;
  padding:0;
  color:var(--pc-ui-text) !important;
  background:transparent;
}

#paceClockApp:not(.mode-tv) #screenSetList.active{
  display:grid;
  gap:14px;
}

#paceClockApp:not(.mode-tv) #screenSetList .setlistTopbar{
  min-height:64px;
  margin:0 !important;
  padding:8px 10px;
  color:var(--pc-ui-text) !important;
  background:#fff;
  border:1px solid var(--pc-ui-line);
  border-radius:15px;
  box-shadow:var(--pc-ui-shadow);
}

#paceClockApp:not(.mode-tv) #screenSetList .backbtn{
  color:#0875b8;
  background:#f2f9fd;
  border:1px solid #afd3e7;
  box-shadow:none;
}

#paceClockApp:not(.mode-tv) #screenSetList .backbtn:hover{
  color:#075f98;
  background:#e5f4fc;
}

#paceClockApp:not(.mode-tv) #screenSetList h2,
#paceClockApp:not(.mode-tv) #screenSetList #addSetListTitle{
  color:#17314c !important;
}

#paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard{
  margin:0;
  padding:20px;
  border:1px solid var(--pc-ui-line);
  border-radius:15px;
}

#paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard .workoutSummaryHeader{
  margin:0;
  padding:0 0 16px;
  color:var(--pc-ui-text);
  background:transparent;
  border:0;
  border-bottom:1px solid #d5e6ef;
}

#paceClockApp:not(.mode-tv) .workoutDetailsLabel{
  color:#0879c2 !important;
}

#paceClockApp:not(.mode-tv) .workoutSummaryDescription,
#paceClockApp:not(.mode-tv) .workoutSummaryEmpty{
  color:var(--pc-ui-muted) !important;
}

#paceClockApp:not(.mode-tv) .workoutSummaryStat{
  color:var(--pc-ui-text);
  background:linear-gradient(180deg,#f7fbfe,#edf6fb);
  border-color:#c6deeb;
  box-shadow:inset 0 1px 0 #fff;
}

#paceClockApp:not(.mode-tv) .workoutSummaryStatValue{
  color:#17314c !important;
}

#paceClockApp:not(.mode-tv) .workoutSummaryStatLabel{
  color:#60788b !important;
}

#paceClockApp:not(.mode-tv) .workoutSummaryBadge{
  color:#244d68;
  background:#f0f8fc;
  border-color:#c7dfeb;
}

#paceClockApp:not(.mode-tv) .workoutSummaryBadgeLabel{
  color:#70889a !important;
}

#paceClockApp:not(.mode-tv) .workoutSummaryBadgeValue{color:#15577f;}

#paceClockApp:not(.mode-tv) .workoutSummaryTag::before{color:#1488ce;}

/* Structure and block cards. */
#paceClockApp:not(.mode-tv) #screenSetList > .card:not(#setListWorkoutDetailsCard),
#paceClockApp:not(.mode-tv) #blocksEditor > .card{
  margin:0;
  padding:14px;
  color:var(--pc-ui-text);
  background:#fff;
  border:1px solid var(--pc-ui-line);
  border-radius:15px;
  box-shadow:var(--pc-ui-shadow);
}

#paceClockApp:not(.mode-tv) #blocksEditor{
  display:grid;
  gap:12px;
  min-width:0;
  color:var(--pc-ui-text) !important;
}

#paceClockApp:not(.mode-tv) #blocksEditor .blockEditorHeader{color:var(--pc-ui-text);}

#paceClockApp:not(.mode-tv) #blocksEditor .blockEditorTitle,
#paceClockApp:not(.mode-tv) #blocksEditor .blockRoundsControl,
#paceClockApp:not(.mode-tv) #blocksEditor .blockAdaptiveToggle,
#paceClockApp:not(.mode-tv) #blocksEditor .blockAdaptiveFields,
#paceClockApp:not(.mode-tv) #blocksEditor label{color:#24465f;}

#paceClockApp:not(.mode-tv) #screenSetList .blockSetRow{
  color:#19364d;
  background:#f7fbfe;
  border-color:#c5ddea;
}

#paceClockApp:not(.mode-tv) #screenSetList .blockSetTimes,
#paceClockApp:not(.mode-tv) #screenSetList .blockSetOn,
#paceClockApp:not(.mode-tv) #screenSetList .blockSetTargetHelp{
  color:#60788b !important;
}

#paceClockApp:not(.mode-tv) #screenSetList .blockSetMore{
  color:#0875b8;
  background:#fff;
  border-color:#a8d0e7;
}

#paceClockApp:not(.mode-tv) #blocksEditor .blockAdaptiveOffset{
  color:#31566f;
  background:#f4f9fc;
  border-color:#c8deeb;
}

#paceClockApp:not(.mode-tv) #screenSetList .setEditorActions{
  justify-content:flex-end;
  margin:0;
  padding:12px;
  color:var(--pc-ui-text) !important;
  background:#fff;
  border:1px solid var(--pc-ui-line);
  border-radius:15px;
  box-shadow:var(--pc-ui-shadow);
}

#paceClockApp:not(.mode-tv) #screenSetList #saveBtn{
  color:#fff;
  background:var(--pc-ui-blue);
  border-color:var(--pc-ui-blue);
}

#paceClockApp:not(.mode-tv) #screenSetList #saveBtn:hover{
  color:#fff;
  background:var(--pc-ui-blue-dark);
  border-color:var(--pc-ui-blue-dark);
}

#paceClockApp:not(.mode-tv) #setListHint{
  margin:0;
  padding:2px 4px;
  color:var(--pc-ui-muted) !important;
  line-height:1.45;
}

/* Modal sizing stays comfortable on desktop without touching TV mode. */
#paceClockApp:not(.mode-tv) #workoutDetailsModal .pcModalCard{
  width:min(920px,calc(100vw - 32px));
  max-width:920px;
}

#paceClockApp:not(.mode-tv) #workoutDetailsModal .pcModalHeader{
  color:#17314c;
  background:linear-gradient(135deg,#f7fcff,#eaf6fd);
  border-bottom-color:#c9dfea;
}

#paceClockApp:not(.mode-tv) #workoutDetailsModal .pcModalTitle{color:#17314c;}

#paceClockApp:not(.mode-tv) #workoutDetailsModal .wdModalBody{background:#fff;}

#paceClockApp:not(.mode-tv) #workoutDetailsModal .settingsBlockTitle,
#paceClockApp:not(.mode-tv) #workoutDetailsModal .wdDisclosure > summary{
  color:#17314c !important;
}

#paceClockApp:not(.mode-tv) #workoutDetailsModal label{
  color:#35576f !important;
}

#paceClockApp:not(.mode-tv) #workoutDetailsModal .wdModalFooterHint{color:var(--pc-ui-muted);}

#paceClockApp:not(.mode-tv) #workoutDetailsModal .wdOptionalHint{color:#71899a;}

#paceClockApp:not(.mode-tv) #workoutDetailsModal .wdDisclosure > summary::before{color:#0787d5;}

#paceClockApp:not(.mode-tv) #workoutDetailsModal .wdModalFooter{
  color:var(--pc-ui-text);
  background:#f7fbfe;
  border-top-color:#cbdfea;
}

/* AI Workout: replace the remaining legacy dark form. */
#paceClockApp:not(.mode-tv) #aiWorkoutModal .pcModalCard{
  width:min(900px,calc(100vw - 32px));
  max-width:900px;
  color:var(--pc-ui-text);
  background:#fff;
  border-color:#bdd7e6;
}

#paceClockApp:not(.mode-tv) #aiWorkoutModal label,
#paceClockApp:not(.mode-tv) #aiWorkoutModal summary,
#paceClockApp:not(.mode-tv) #aiWorkoutModal strong,
#paceClockApp:not(.mode-tv) #aiWorkoutModal span{
  color:#35576f !important;
}

#paceClockApp:not(.mode-tv) #aiWorkoutModal section > div{
  color:var(--pc-ui-muted) !important;
}

#paceClockApp:not(.mode-tv) #aiWorkoutModal section{
  margin-bottom:12px;
  padding:12px;
  color:var(--pc-ui-text);
  background:#f5faff;
  border:1px solid #c9dfea;
  border-radius:14px;
}

#paceClockApp:not(.mode-tv) #aiWorkoutModal details{
  padding:8px 10px;
  background:#fff;
  border:1px solid #d2e4ed;
  border-radius:10px;
}

#paceClockApp:not(.mode-tv) #aiWorkoutModal #generateAiWorkoutBtn{
  color:#fff;
  background:var(--pc-ui-blue);
  border-color:var(--pc-ui-blue);
}

#paceClockApp:not(.mode-tv) #aiWorkoutModal #generateAiWorkoutBtn:hover{
  color:#fff;
  background:var(--pc-ui-blue-dark);
  border-color:var(--pc-ui-blue-dark);
}

/* Assignment feedback and target preview use the same light language. */
#paceClockApp:not(.mode-tv) .pcAssignMessage.is-info{
  color:#1e5f84;
  background:#eaf7fe;
  border-color:#8dc9e8;
}

#paceClockApp:not(.mode-tv) .pcAssignMessage.is-success{
  color:#1f6a3d;
  background:#edf9f1;
  border-color:#9dd8af;
}

#paceClockApp:not(.mode-tv) .pcAssignMessage.is-error{
  color:#913b43;
  background:#fff1f2;
  border-color:#ebb4b9;
}

#paceClockApp:not(.mode-tv) .pcAssignTargetPreview{
  color:#244d68;
  background:#eef8fe;
  border-color:#a6d2e8;
}

#paceClockApp:not(.mode-tv) .pcAssignTargetPreview strong{color:#17314c;}

#paceClockApp:not(.mode-tv) #workoutAssignModal .pcAssignTargetPreview{
  color:#244d68 !important;
  background:#eef8fe !important;
  border-color:#a6d2e8 !important;
}

#paceClockApp:not(.mode-tv) #workoutAssignModal .pcAssignTargetPreview > strong{
  color:#17314c !important;
}

@media (min-width:1600px){
  #paceClockApp:not(.mode-tv) .wrap.appShell{padding-top:16px;}

  #paceClockApp:not(.mode-tv) #screenSetList.active{gap:16px;}

  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard{padding:22px;}
}

@media (max-width:1100px){
  #paceClockApp:not(.mode-tv) #templatesBtn,
  #paceClockApp:not(.mode-tv) #quickBuilderBtn,
  #paceClockApp:not(.mode-tv) #aiWorkoutBtn,
  #paceClockApp:not(.mode-tv) #saveAsNewBtn{display:none;}

  #paceClockApp:not(.mode-tv) #builderMoreBtn{display:inline-flex;}
}

@media (max-width:1024px){
  #paceClockApp:not(.mode-tv) .wrap.appShell{
    width:calc(100% - 16px);
    margin:0 auto;
  }

  #paceClockApp:not(.mode-tv) #screenSetList{
    width:100%;
    max-width:none !important;
  }

  #paceClockApp:not(.mode-tv) #screenSetList.active{gap:10px;}
}

@media (max-width:768px){
  #paceClockApp:not(.mode-tv) #screenSetList .setlistTopbar{
    min-height:52px;
    padding:5px 7px;
  }

  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard{padding:12px;}

  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard .workoutSummaryHeader{padding-bottom:10px;}

  #paceClockApp:not(.mode-tv) #screenSetList > .card:not(#setListWorkoutDetailsCard),
  #paceClockApp:not(.mode-tv) #blocksEditor > .card{
    padding:10px;
    border-radius:13px;
  }

  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions{
    justify-content:stretch;
    gap:7px;
    padding:9px;
    border-radius:13px;
  }

  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions > .btn,
  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions > .builderMoreWrap{
    flex:1 1 auto;
    min-width:0;
  }
}

@media (max-width:640px){
  #paceClockApp:not(.mode-tv) .wrap.appShell{
    width:100%;
    margin:0;
  }

  #paceClockApp:not(.mode-tv) #screenSetList.active{gap:8px;}

  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard{padding:10px;}

  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard .workoutSummaryHeader{padding-bottom:8px;}

  #paceClockApp:not(.mode-tv) #workoutDetailsModal .pcModalCard{
    width:calc(100vw - 12px);
    max-width:none;
    max-height:calc(100dvh - 12px);
  }

  #paceClockApp:not(.mode-tv) #aiWorkoutModal .pcModalCard{
    width:calc(100vw - 12px);
    max-width:none;
    max-height:calc(100dvh - 12px);
    overflow-y:auto;
  }

  #paceClockApp:not(.mode-tv) #aiWorkoutModal section{padding:10px;}

  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions{
    display:grid;
    grid-template-columns:1fr 1fr auto;
  }

  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions > .btn,
  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions > .builderMoreWrap{width:100%;}
}

@media (max-width:420px){
  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions{
    grid-template-columns:1fr 1fr 44px;
    padding:7px;
  }

  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions .btn{
    min-height:44px;
    padding:7px 8px;
    font-size:13px;
  }

  #paceClockApp:not(.mode-tv) #setListHint{
    padding-right:8px;
    padding-left:8px;
    font-size:11px;
  }
}

/* Keep all five timer characters visible in the three-column TV scoreboard.
   pc-adaptive-display loads after this file, so the scoped override is important. */
@media (min-width:1401px){
  #paceClockApp.mode-tv .pcAdaptiveDisplay[data-clock-count="3"] .pcAdaptiveClockTime{
    max-width:100%;
    font-size:clamp(148px,10.6vw,400px) !important;
    letter-spacing:-.065em;
    text-align:center;
  }
}

/* The Home SVG has a legacy inline white stroke. Make it follow the
   secondary button colour on the light workspace. */
#paceClockApp:not(.mode-tv) #homeTopBtn svg [stroke]{
  stroke:currentColor !important;
}

/* =========================================================
   2026-09-26 — SET VALUES + DESKTOP ROW SCROLL

   The workout builder creates several inputs without a type attribute.
   Legacy dark-theme rules therefore left real values white on white.
   The desktop rows area also inherited a fixed height from pc-base while
   pc-responsive changed it to overflow:visible; the table then clipped
   longer workouts. Keep values readable and make the rows area scroll.
   ========================================================= */

#paceClockApp:not(.mode-tv) .blockSetRow input,
#paceClockApp:not(.mode-tv) .blockSetRow select{
  color:#19364d !important;
  -webkit-text-fill-color:#19364d !important;
  background:#ffffff !important;
  border-color:#b7d2e1 !important;
  opacity:1 !important;
}

#paceClockApp:not(.mode-tv) .blockSetRow input::placeholder{
  color:#7890a3 !important;
  -webkit-text-fill-color:#7890a3 !important;
  opacity:1 !important;
}

#paceClockApp:not(.mode-tv) .blockSetRow input:disabled,
#paceClockApp:not(.mode-tv) .blockSetRow input[readonly],
#paceClockApp:not(.mode-tv) .blockSetRow select:disabled{
  color:#365871 !important;
  -webkit-text-fill-color:#365871 !important;
  background:#edf4f8 !important;
  border-color:#c5dae6 !important;
  opacity:1 !important;
}

@media (min-width:1025px){
  #paceClockApp:not(.mode-tv) #rows{
    height:clamp(180px,26vh,300px) !important;
    max-height:clamp(180px,26vh,300px) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding-right:6px;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:#80b9d8 #edf7fc;
    touch-action:pan-y;
  }

  #paceClockApp:not(.mode-tv) #rows::-webkit-scrollbar{width:10px;}

  #paceClockApp:not(.mode-tv) #rows::-webkit-scrollbar-track{
    border-radius:999px;
    background:#edf7fc;
  }

  #paceClockApp:not(.mode-tv) #rows::-webkit-scrollbar-thumb{
    border:2px solid #edf7fc;
    border-radius:999px;
    background:#80b9d8;
  }

  #paceClockApp:not(.mode-tv) #rows::-webkit-scrollbar-thumb:hover{background:#4d9fca;}
}

/* =========================================================
   2026-09-26 — DRAGGABLE WORKOUT SETS

   The grip moves a complete Set, including its advanced fields and
   Adaptive Pace Clock overrides. Rows can be reordered inside a Block
   or dropped into another Block with a mouse, pen or touch screen.
   ========================================================= */

#paceClockApp:not(.mode-tv) .blockSetList{
  position:relative;
  min-height:6px;
  border-radius:14px;
  transition:background-color .16s ease, box-shadow .16s ease;
}

#paceClockApp:not(.mode-tv) .blockSetRow{
  position:relative;
  transition:
    opacity .16s ease,
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

#paceClockApp:not(.mode-tv) .blockSetDragHandle{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  min-width:34px;
  max-width:34px;
  height:38px;
  min-height:38px;
  margin:0;
  padding:0;
  color:#0875b8;
  -webkit-text-fill-color:#0875b8;
  background:linear-gradient(180deg,#fff,#edf7fc);
  border:1px solid #a8d0e7;
  border-radius:11px;
  box-shadow:0 3px 9px rgba(25,73,102,.10);
  font:800 17px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:-4px;
  text-indent:-4px;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

#paceClockApp:not(.mode-tv) .blockSetDragHandle:hover,
#paceClockApp:not(.mode-tv) .blockSetDragHandle:focus-visible{
  color:#fff;
  -webkit-text-fill-color:#fff;
  background:#078bd8;
  border-color:#078bd8;
  box-shadow:0 0 0 3px rgba(7,139,216,.18),0 6px 14px rgba(7,110,174,.20);
  outline:0;
}

#paceClockApp:not(.mode-tv) .blockSetDragHandle:active{
  cursor:grabbing;
  transform:scale(.96);
}

#paceClockApp:not(.mode-tv) #blocksEditor.pc-set-drag-active .blockSetRow{border-color:#9bcce7;}

#paceClockApp:not(.mode-tv) .blockSetRow.is-set-dragging{
  opacity:.38;
  transform:scale(.992);
  border-style:dashed;
}

#paceClockApp:not(.mode-tv) .blockSetRow.pc-set-drop-before::before,
#paceClockApp:not(.mode-tv) .blockSetRow.pc-set-drop-after::after{
  content:"";
  position:absolute;
  z-index:8;
  right:6px;
  left:6px;
  height:4px;
  border-radius:999px;
  background:#078bd8;
  box-shadow:0 0 0 3px rgba(7,139,216,.15);
  pointer-events:none;
}

#paceClockApp:not(.mode-tv) .blockSetRow.pc-set-drop-before::before{top:-6px;}

#paceClockApp:not(.mode-tv) .blockSetRow.pc-set-drop-after::after{bottom:-6px;}

#paceClockApp:not(.mode-tv) .blockSetList.pc-set-drop-end{
  background:rgba(7,139,216,.06);
  box-shadow:inset 0 -4px 0 #078bd8;
}

body.pc-set-dragging{
  cursor:grabbing !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

@media (min-width:769px){
  #paceClockApp:not(.mode-tv) .blockSetRow{
    grid-template-columns:
      34px
      44px
      18px
      64px
      28px
      78px
      minmax(110px,1fr)
      minmax(160px,2fr)
      44px
      36px !important;
  }

  #paceClockApp:not(.mode-tv) .blockSetDragHandle{
    grid-column:1;
    grid-row:1;
    justify-self:center;
  }

  #paceClockApp:not(.mode-tv) .blockSetReps{grid-column:2;}
  #paceClockApp:not(.mode-tv) .blockSetTimes{grid-column:3;}
  #paceClockApp:not(.mode-tv) .blockSetDist{grid-column:4;}
  #paceClockApp:not(.mode-tv) .blockSetOn{grid-column:5;}
  #paceClockApp:not(.mode-tv) .blockSetInterval{grid-column:6;}
  #paceClockApp:not(.mode-tv) .blockSetStroke{grid-column:7;}
  #paceClockApp:not(.mode-tv) .blockSetNote{grid-column:8;}
  #paceClockApp:not(.mode-tv) .blockSetMore{grid-column:9;}
  #paceClockApp:not(.mode-tv) .blockSetDelete{grid-column:10;}
}

@media (max-width:768px){
  #paceClockApp:not(.mode-tv) .blockSetRow{
    grid-template-columns:
      34px
      minmax(54px,.75fr)
      minmax(68px,.95fr)
      minmax(82px,1.15fr)
      44px !important;
  }

  #paceClockApp:not(.mode-tv) .blockSetDragHandle{
    grid-column:1;
    grid-row:1 / 3;
    align-self:center;
    justify-self:center;
  }

  #paceClockApp:not(.mode-tv) .blockSetReps{
    grid-column:2;
    grid-row:1;
  }

  #paceClockApp:not(.mode-tv) .blockSetDist{
    grid-column:3;
    grid-row:1;
  }

  #paceClockApp:not(.mode-tv) .blockSetInterval{
    grid-column:4;
    grid-row:1;
  }

  #paceClockApp:not(.mode-tv) .blockSetDelete{
    grid-column:5;
    grid-row:1;
  }

  #paceClockApp:not(.mode-tv) .blockSetStroke{
    grid-column:2;
    grid-row:2;
  }

  #paceClockApp:not(.mode-tv) .blockSetNote{
    grid-column:3 / 5;
    grid-row:2;
  }

  #paceClockApp:not(.mode-tv) .blockSetMore{
    grid-column:5;
    grid-row:2;
  }
}

@media (max-width:420px){
  #paceClockApp:not(.mode-tv) .blockSetRow{
    grid-template-columns:
      30px
      minmax(42px,.68fr)
      minmax(52px,.86fr)
      minmax(64px,1.08fr)
      40px !important;
    gap:5px;
  }

  #paceClockApp:not(.mode-tv) .blockSetDragHandle{
    width:30px;
    min-width:30px;
    max-width:30px;
    height:40px;
    min-height:40px;
    border-radius:10px;
    font-size:16px;
  }
}

@media (prefers-reduced-motion:reduce){
  #paceClockApp:not(.mode-tv) .blockSetList,
  #paceClockApp:not(.mode-tv) .blockSetRow{transition:none;}
}

/* =========================================================
   2026-09-27 — DRAGGABLE BLOCKS + RESPONSIVE COPY BUTTON
   ========================================================= */

#paceClockApp:not(.mode-tv) .blockEditorCard{
  position:relative;
  transition:opacity .16s ease, transform .16s ease, box-shadow .16s ease;
}

#paceClockApp:not(.mode-tv) .blockDragHandle{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  min-width:38px;
  height:40px;
  padding:0;
  color:#0875b8;
  background:#eef8fe;
  border:1px solid #a8d0e7;
  border-radius:11px;
  box-shadow:0 2px 7px rgba(10,95,145,.08);
  font-size:17px;
  font-weight:900;
  line-height:1;
  cursor:grab;
  touch-action:none;
  user-select:none;
}

#paceClockApp:not(.mode-tv) .blockDragHandle:hover,
#paceClockApp:not(.mode-tv) .blockDragHandle:focus-visible{
  color:#fff;
  background:#078bd8;
  border-color:#078bd8;
  outline:none;
  box-shadow:0 0 0 3px rgba(7,139,216,.16);
}

#paceClockApp:not(.mode-tv) .blockDragHandle:active{cursor:grabbing;}

#paceClockApp:not(.mode-tv) .blockCopyButton{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:88px;
  height:40px;
  padding:0 12px;
  color:#0875b8;
  background:#f4faff;
  border:1px solid #a8d0e7;
  border-radius:11px;
  box-shadow:0 2px 7px rgba(10,95,145,.08);
  font-weight:800;
  white-space:nowrap;
}

#paceClockApp:not(.mode-tv) .blockCopyButton:hover,
#paceClockApp:not(.mode-tv) .blockCopyButton:focus-visible{
  color:#fff;
  background:#078bd8;
  border-color:#078bd8;
  outline:none;
  box-shadow:0 0 0 3px rgba(7,139,216,.16);
}

#paceClockApp:not(.mode-tv) .blockCopyButtonIcon{
  font-size:16px;
  line-height:1;
}

#paceClockApp:not(.mode-tv) #blocksEditor.pc-block-drag-active .blockEditorCard{
  box-shadow:0 8px 24px rgba(13,78,116,.12);
}

#paceClockApp:not(.mode-tv) .blockEditorCard.is-block-dragging{opacity:.34;}

#paceClockApp:not(.mode-tv) .blockEditorCard.pc-block-drop-before::before,
#paceClockApp:not(.mode-tv) .blockEditorCard.pc-block-drop-after::after{
  content:"";
  position:absolute;
  z-index:20;
  left:8px;
  right:8px;
  height:5px;
  border-radius:999px;
  background:#078bd8;
  box-shadow:0 0 0 3px rgba(7,139,216,.16);
  pointer-events:none;
}

#paceClockApp:not(.mode-tv) .blockEditorCard.pc-block-drop-before::before{top:-9px;}

#paceClockApp:not(.mode-tv) .blockEditorCard.pc-block-drop-after::after{bottom:-9px;}

body.pc-block-dragging{
  cursor:grabbing !important;
  user-select:none !important;
}

@media (max-width:900px){
  #paceClockApp:not(.mode-tv) #blocksEditor .blockEditorHeader{
    grid-template-columns:38px minmax(0,1fr) auto auto !important;
  }

  #paceClockApp:not(.mode-tv) #blocksEditor .blockDragHandle{
    grid-column:1;
    grid-row:1;
  }

  #paceClockApp:not(.mode-tv) #blocksEditor .blockEditorTitle{
    grid-column:2;
    grid-row:1;
  }

  #paceClockApp:not(.mode-tv) #blocksEditor .blockRoundsControl{
    grid-column:3;
    grid-row:1;
  }

  #paceClockApp:not(.mode-tv) #blocksEditor .blockEditorActions{
    grid-column:4;
    grid-row:1;
    width:auto;
    min-width:0;
    margin-left:0;
    justify-content:flex-end;
  }

  #paceClockApp:not(.mode-tv) #blocksEditor .blockAdaptivePaceClock{
    grid-column:1 / -1;
    grid-row:2;
  }
}

@media (max-width:640px){
  #paceClockApp:not(.mode-tv) #blocksEditor .blockEditorHeader{
    grid-template-columns:38px minmax(0,1fr) auto 90px !important;
    gap:6px !important;
  }

  #paceClockApp:not(.mode-tv) .blockEditorActions{gap:6px;}

  #paceClockApp:not(.mode-tv) .blockCopyButton{
    width:42px;
    min-width:42px;
    padding:0;
  }

  #paceClockApp:not(.mode-tv) .blockCopyButtonLabel{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
}

@media (max-width:420px){
  #paceClockApp:not(.mode-tv) #blocksEditor .blockEditorHeader{
    grid-template-columns:36px minmax(0,1fr) auto 86px !important;
  }

  #paceClockApp:not(.mode-tv) .blockDragHandle{
    width:36px;
    min-width:36px;
  }
}

@media (prefers-reduced-motion:reduce){
  #paceClockApp:not(.mode-tv) .blockEditorCard{transition:none;}
}


/* =========================================================
   17. WORKOUT DETAILS GRID + INTERACTIVE STATISTICS
   The selectors stay outside TV mode so pool-deck displays keep their
   dedicated layout. Existing statistics markup remains supported while the
   richer dashboard classes can be introduced progressively.
   ========================================================= */

/* A native date field can have a wide intrinsic size on iPad. Keep every
   Workout Details control inside its grid track at all viewport sizes. */
#paceClockApp:not(.mode-tv) #workoutDetailsModal .grid3 > label,
#paceClockApp:not(.mode-tv) #workoutDetailsModal .grid3 input,
#paceClockApp:not(.mode-tv) #workoutDetailsModal .grid3 select,
#paceClockApp:not(.mode-tv) #workoutDetailsModal .grid3 textarea{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
  min-inline-size:0;
}

/* Statistics modal owns its scrolling. The page behind it stays still and
   the title/close action never disappear during a long report. */
#paceClockApp:not(.mode-tv) #workoutStatsModal{
  align-items:center;
  padding:16px;
}

#paceClockApp:not(.mode-tv) #workoutStatsModal .pcModalCard{
  display:flex;
  flex-direction:column;
  width:min(1160px, calc(100vw - 32px));
  max-width:1160px;
  max-height:min(900px, calc(100vh - 32px));
  max-height:min(900px, calc(100dvh - 32px));
  padding:0;
  overflow:hidden;
  color:#17314c;
  background:#fff;
  border:1px solid #bdd8e7;
  border-radius:18px;
  box-shadow:0 24px 70px rgba(18,54,78,.24);
}

#paceClockApp:not(.mode-tv) #workoutStatsModal .pcModalHeader{
  position:sticky;
  top:0;
  z-index:20;
  flex:0 0 auto;
  min-height:64px;
  margin:0;
  padding:14px 18px;
  color:#17314c;
  background:linear-gradient(135deg,#f8fcff,#eaf6fd);
  border-bottom:1px solid #c8dfec;
}

#paceClockApp:not(.mode-tv) #workoutStatsModal .pcModalTitle{
  color:#17314c;
  font-size:clamp(20px, 2vw, 26px);
  line-height:1.15;
}

#paceClockApp:not(.mode-tv) #closeWorkoutStatsBtn{
  flex:0 0 auto;
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;
  padding:0;
}

#paceClockApp:not(.mode-tv) #workoutStatsBody{
  flex:1 1 auto;
  min-height:0;
  padding:18px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#fff 0,#f8fcff 100%);
  scrollbar-gutter:stable;
}

#paceClockApp:not(.mode-tv) .workoutStatsDashboard{
  display:grid;
  gap:18px;
  min-width:0;
  color:#17314c;
}

#paceClockApp:not(.mode-tv) .workoutStatsControls{
  position:sticky;
  top:-18px;
  z-index:12;
  display:grid;
  grid-template-columns:auto minmax(230px,1fr) minmax(220px,auto);
  align-items:center;
  gap:12px;
  min-width:0;
  margin:-18px -18px 0;
  padding:14px 18px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #d5e6ef;
  box-shadow:0 8px 18px rgba(33,79,108,.07);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

#paceClockApp:not(.mode-tv) .workoutStatsPeriodTabs,
#paceClockApp:not(.mode-tv) .workoutStatsMetricTabs,
#paceClockApp:not(.mode-tv) .workoutStatsBreakdownTabs{
  display:inline-grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(84px,auto);
  align-items:center;
  gap:4px;
  min-width:0;
  padding:4px;
  background:#edf7fc;
  border:1px solid #c6dfec;
  border-radius:12px;
}

#paceClockApp:not(.mode-tv) .workoutStatsPeriodTabs > button,
#paceClockApp:not(.mode-tv) .workoutStatsPeriodTabs > [role="tab"],
#paceClockApp:not(.mode-tv) .workoutStatsMetricTabs > button,
#paceClockApp:not(.mode-tv) .workoutStatsMetricTabs > [role="tab"],
#paceClockApp:not(.mode-tv) .workoutStatsBreakdownTabs > button,
#paceClockApp:not(.mode-tv) .workoutStatsBreakdownTabs > [role="tab"]{
  min-height:38px;
  padding:7px 12px;
  color:#315c77;
  background:transparent;
  border:0;
  border-radius:9px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}

#paceClockApp:not(.mode-tv) .workoutStatsPeriodTabs > .active,
#paceClockApp:not(.mode-tv) .workoutStatsPeriodTabs > [aria-selected="true"],
#paceClockApp:not(.mode-tv) .workoutStatsMetricTabs > .active,
#paceClockApp:not(.mode-tv) .workoutStatsMetricTabs > [aria-selected="true"],
#paceClockApp:not(.mode-tv) .workoutStatsBreakdownTabs > .active,
#paceClockApp:not(.mode-tv) .workoutStatsBreakdownTabs > [aria-selected="true"]{
  color:#fff;
  background:#078bd8;
  box-shadow:0 4px 10px rgba(7,139,216,.24);
}

#paceClockApp:not(.mode-tv) .workoutStatsPeriodTabs > button:focus-visible,
#paceClockApp:not(.mode-tv) .workoutStatsMetricTabs > button:focus-visible,
#paceClockApp:not(.mode-tv) .workoutStatsBreakdownTabs > button:focus-visible{
  outline:3px solid rgba(7,139,216,.25);
  outline-offset:2px;
}

#paceClockApp:not(.mode-tv) .workoutStatsPeriodNav{
  display:grid;
  grid-template-columns:42px minmax(150px,1fr) 42px auto;
  align-items:center;
  gap:7px;
  min-width:0;
}

#paceClockApp:not(.mode-tv) .workoutStatsPeriodNav > button{
  min-width:42px;
  min-height:42px;
}

#paceClockApp:not(.mode-tv) .workoutStatsPeriodNav > :not(button){
  min-width:0;
  overflow:hidden;
  color:#17314c;
  font-weight:850;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#paceClockApp:not(.mode-tv) .workoutStatsScope{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}

#paceClockApp:not(.mode-tv) .workoutStatsScope label{
  min-width:0;
  color:#557185;
  font-size:12px;
  font-weight:750;
}

#paceClockApp:not(.mode-tv) .workoutStatsScope select,
#paceClockApp:not(.mode-tv) .workoutStatsScope button{
  box-sizing:border-box;
  min-width:0;
  min-height:42px;
  max-width:100%;
}

#paceClockApp:not(.mode-tv) .workoutStatsSummary,
#paceClockApp:not(.mode-tv) #workoutStatsBody > .workoutStatsGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  min-width:0;
}

#paceClockApp:not(.mode-tv) .workoutStatsSummary > *,
#paceClockApp:not(.mode-tv) #workoutStatsBody .workoutStatCard{
  box-sizing:border-box;
  min-width:0;
  min-height:132px;
  margin:0;
  padding:18px 14px;
  color:#17314c;
  text-align:center;
  background:linear-gradient(180deg,#fff,#f4faff);
  border:1px solid #c8deeb;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(32,77,104,.07);
}

#paceClockApp:not(.mode-tv) .workoutStatTrend{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  max-width:100%;
  margin-top:9px;
  padding:4px 8px;
  color:#466b82;
  background:#eef6fa;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}

#paceClockApp:not(.mode-tv) .workoutStatTrend.is-positive{
  color:#217344;
  background:#e9f7ef;
}

#paceClockApp:not(.mode-tv) .workoutStatTrend.is-negative{
  color:#9a4147;
  background:#fff0f1;
}

#paceClockApp:not(.mode-tv) .workoutStatsMetricTabs,
#paceClockApp:not(.mode-tv) .workoutStatsBreakdownTabs{
  width:max-content;
  max-width:100%;
}

#paceClockApp:not(.mode-tv) .workoutVolumeChart{
  display:flex;
  align-items:flex-end;
  gap:clamp(5px,1vw,12px);
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:250px;
  padding:22px 18px 30px;
  overflow-x:auto;
  overflow-y:hidden;
  background:
    repeating-linear-gradient(to top,transparent 0,transparent 49px,#e2eef5 50px),
    #fbfdff;
  border:1px solid #cbdfea;
  border-radius:14px;
  scrollbar-width:thin;
}

#paceClockApp:not(.mode-tv) .workoutVolumeBar{
  position:relative;
  flex:1 1 34px;
  align-self:flex-end;
  min-width:22px;
  max-width:68px;
  min-height:8px;
  height:var(--workout-volume-height,8%);
  color:#fff;
  background:linear-gradient(180deg,#28a8ee,#087fc6);
  border:0;
  border-radius:8px 8px 3px 3px;
  box-shadow:0 6px 12px rgba(7,126,196,.17);
  transition:filter .16s ease,transform .16s ease;
  cursor:pointer;
}

#paceClockApp:not(.mode-tv) .workoutVolumeBar:hover,
#paceClockApp:not(.mode-tv) .workoutVolumeBar:focus-visible{
  filter:brightness(.95) saturate(1.12);
  transform:translateY(-2px);
}

#paceClockApp:not(.mode-tv) .workoutVolumeBar:focus-visible{
  outline:3px solid rgba(7,139,216,.28);
  outline-offset:2px;
}

#paceClockApp:not(.mode-tv) .workoutBreakdownBars{
  display:grid;
  gap:10px;
  min-width:0;
}

#paceClockApp:not(.mode-tv) .workoutBreakdownBars > *{
  box-sizing:border-box;
  min-width:0;
}

#paceClockApp:not(.mode-tv) .workoutBreakdownBar{
  display:grid;
  grid-template-columns:minmax(90px,160px) minmax(100px,1fr) auto;
  align-items:center;
  gap:10px;
  color:#31546c;
  font-size:13px;
  font-weight:750;
}

#paceClockApp:not(.mode-tv) .workoutBreakdownBarTrack{
  height:10px;
  overflow:hidden;
  background:#e8f2f7;
  border-radius:999px;
}

#paceClockApp:not(.mode-tv) .workoutBreakdownBarFill{
  display:block;
  width:var(--workout-breakdown-width,0%);
  min-width:2px;
  height:100%;
  background:linear-gradient(90deg,#078bd8,#45b8ef);
  border-radius:inherit;
}


@media (max-width:1024px){
  #paceClockApp:not(.mode-tv) .workoutStatsControls{
    grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  }

  #paceClockApp:not(.mode-tv) .workoutStatsScope{
    grid-column:1 / -1;
    justify-content:flex-start;
  }

  #paceClockApp:not(.mode-tv) .workoutStatsSummary,
  #paceClockApp:not(.mode-tv) #workoutStatsBody > .workoutStatsGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


@media (max-width:640px){
  /* Override the two-column tablet rule and the legacy one-column rule with
     one explicit, predictable phone layout. */
  #paceClockApp:not(.mode-tv) #workoutDetailsModal .grid3{
    grid-template-columns:minmax(0,1fr) !important;
  }

  #paceClockApp:not(.mode-tv) #workoutDetailsModal .grid3 > label{
    grid-column:auto !important;
  }

  #paceClockApp:not(.mode-tv) #workoutStatsModal .pcModalHeader{
    min-height:58px;
    padding:max(8px,env(safe-area-inset-top)) 12px 8px;
  }

  #paceClockApp:not(.mode-tv) #workoutStatsBody{
    padding:12px 12px max(14px,env(safe-area-inset-bottom));
    scrollbar-gutter:auto;
  }

  #paceClockApp:not(.mode-tv) .workoutStatsDashboard{gap:14px;}

  #paceClockApp:not(.mode-tv) .workoutStatsControls{
    top:-12px;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    margin:-12px -12px 0;
    padding:10px 12px;
  }

  #paceClockApp:not(.mode-tv) .workoutStatsPeriodTabs{
    display:grid;
    grid-auto-columns:1fr;
    width:100%;
  }

  #paceClockApp:not(.mode-tv) .workoutStatsPeriodNav{
    grid-template-columns:42px minmax(0,1fr) 42px;
  }

  #paceClockApp:not(.mode-tv) .workoutStatsPeriodNav > :last-child{
    grid-column:1 / -1;
  }

  #paceClockApp:not(.mode-tv) .workoutStatsScope{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
  }

  #paceClockApp:not(.mode-tv) .workoutStatsScope select,
  #paceClockApp:not(.mode-tv) .workoutStatsScope button{width:100%;}

  #paceClockApp:not(.mode-tv) .workoutStatsSummary,
  #paceClockApp:not(.mode-tv) #workoutStatsBody > .workoutStatsGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  #paceClockApp:not(.mode-tv) .workoutStatsSummary > *,
  #paceClockApp:not(.mode-tv) #workoutStatsBody .workoutStatCard{
    min-height:112px;
    padding:13px 8px;
  }

  #paceClockApp:not(.mode-tv) #workoutStatsBody .workoutStatValue{
    font-size:clamp(21px,7vw,28px);
    overflow-wrap:anywhere;
  }

  #paceClockApp:not(.mode-tv) .workoutStatsMetricTabs,
  #paceClockApp:not(.mode-tv) .workoutStatsBreakdownTabs{
    display:grid;
    grid-auto-columns:1fr;
    width:100%;
    overflow-x:auto;
  }

  #paceClockApp:not(.mode-tv) .workoutVolumeChart{
    min-height:220px;
    padding:18px 10px 26px;
  }

  #paceClockApp:not(.mode-tv) .workoutBreakdownBar{
    grid-template-columns:minmax(80px,120px) minmax(70px,1fr) auto;
    gap:7px;
  }

  #paceClockApp:not(.mode-tv) #workoutStatsBody .workoutStatsDistributionGrid{grid-template-columns:minmax(0,1fr);}
}


@media (max-width:360px){
  #paceClockApp:not(.mode-tv) .workoutStatsSummary,
  #paceClockApp:not(.mode-tv) #workoutStatsBody > .workoutStatsGrid{grid-template-columns:minmax(0,1fr);}

  #paceClockApp:not(.mode-tv) .workoutBreakdownBar{
    grid-template-columns:minmax(0,1fr) auto;
  }

  #paceClockApp:not(.mode-tv) .workoutBreakdownBarTrack{
    grid-column:1 / -1;
    grid-row:2;
  }
}


@media (prefers-reduced-motion:reduce){
  #paceClockApp:not(.mode-tv) .workoutVolumeBar{transition:none;}
}


/* =========================================================
   18. SAVED WORKOUT PLAN STATISTICS — REAL v6 MARKUP
   Styles live here instead of being injected by JavaScript. This keeps the
   modal predictable on Safari/iPad and lets the normal cache version control
   every visual change.
   ========================================================= */

html.pcStatsModalOpen,
body.pcStatsModalOpen{overscroll-behavior:none;}

#paceClockApp:not(.mode-tv) #workoutStatsBody{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

#paceClockApp:not(.mode-tv) .pcStatsDashboard{
  --ps-blue:#078bd8;
  --ps-deep:#142b45;
  --ps-muted:#587089;
  --ps-line:#c7deec;
  --ps-soft:#f2f9fd;
  box-sizing:border-box;
  color:var(--ps-deep);
  font:500 14px/1.45 Arial,sans-serif;
}

#paceClockApp:not(.mode-tv) .pcStatsDashboard *,
#paceClockApp:not(.mode-tv) .pcStatsDashboard *::before,
#paceClockApp:not(.mode-tv) .pcStatsDashboard *::after{box-sizing:border-box;}

#paceClockApp:not(.mode-tv) .pcStatsIntro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:2px 2px 14px;
  border-bottom:1px solid var(--ps-line);
}

#paceClockApp:not(.mode-tv) .pcStatsIntro p{
  margin:3px 0 0;
  color:var(--ps-muted);
}

#paceClockApp:not(.mode-tv) .pcStatsEyebrow,
#paceClockApp:not(.mode-tv) .pcStatsSectionKicker{
  color:#0876b9;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#paceClockApp:not(.mode-tv) .pcStatsTruthNote{
  width:min(440px,100%);
  padding:8px 12px;
  border:1px solid #b8dced;
  border-radius:10px;
  background:#eef9ff;
  font-size:12px;
}

#paceClockApp:not(.mode-tv) .pcStatsControls{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 -2px;
  padding:12px 2px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--ps-line);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

#paceClockApp:not(.mode-tv) .pcStatsPeriodTabs,
#paceClockApp:not(.mode-tv) .pcStatsMetricTabs,
#paceClockApp:not(.mode-tv) .pcStatsBreakdownTabs,
#paceClockApp:not(.mode-tv) .pcStatsDateNav{
  display:flex;
  align-items:center;
  gap:6px;
}

#paceClockApp:not(.mode-tv) .pcStatsDashboard button{font:inherit;}

#paceClockApp:not(.mode-tv) .pcStatsControlButton,
#paceClockApp:not(.mode-tv) .pcStatsTodayButton,
#paceClockApp:not(.mode-tv) .pcStatsIconButton{
  min-height:42px;
  border:1px solid #abd1e7;
  border-radius:10px;
  color:#095f96;
  background:#fff;
  font-weight:800;
  cursor:pointer;
  transition:.16s ease;
}

#paceClockApp:not(.mode-tv) .pcStatsControlButton{padding:0 14px;}
#paceClockApp:not(.mode-tv) .pcStatsTodayButton{padding:0 15px;}
#paceClockApp:not(.mode-tv) .pcStatsIconButton{
  display:inline-grid;
  place-items:center;
  width:42px;
  padding:0;
  font-size:20px;
  line-height:1;
}

#paceClockApp:not(.mode-tv) .pcStatsControlButton:hover,
#paceClockApp:not(.mode-tv) .pcStatsTodayButton:hover,
#paceClockApp:not(.mode-tv) .pcStatsIconButton:hover,
#paceClockApp:not(.mode-tv) .pcStatsControlButton:focus-visible,
#paceClockApp:not(.mode-tv) .pcStatsTodayButton:focus-visible,
#paceClockApp:not(.mode-tv) .pcStatsIconButton:focus-visible,
#paceClockApp:not(.mode-tv) .pcStatsControlButton.is-active{
  color:#fff;
  background:var(--ps-blue);
  border-color:var(--ps-blue);
  outline:none;
  box-shadow:0 0 0 3px rgba(7,139,216,.16);
}

#paceClockApp:not(.mode-tv) .pcStatsPeriodLabel{
  min-width:175px;
  text-align:center;
  color:var(--ps-deep);
  font-weight:900;
}

#paceClockApp:not(.mode-tv) .pcStatsSection{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--ps-line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(13,78,116,.06);
}

#paceClockApp:not(.mode-tv) .pcStatsSectionHeading,
#paceClockApp:not(.mode-tv) .pcStatsBucketHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

#paceClockApp:not(.mode-tv) .pcStatsSectionHeading{margin-bottom:14px;}
#paceClockApp:not(.mode-tv) .pcStatsBucketHeader{align-items:center;margin-bottom:10px;}

#paceClockApp:not(.mode-tv) .pcStatsSectionHeading h3,
#paceClockApp:not(.mode-tv) .pcStatsBucketHeader h4{
  margin:2px 0 0;
  color:var(--ps-deep);
  font-family:Georgia,serif;
  font-size:21px;
  font-style:italic;
}

#paceClockApp:not(.mode-tv) .pcStatsSectionHeading > span{
  color:var(--ps-muted);
  font-size:12px;
  font-weight:800;
}

#paceClockApp:not(.mode-tv) .pcStatsSummaryGrid,
#paceClockApp:not(.mode-tv) .pcStatsSkeletonGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

#paceClockApp:not(.mode-tv) .pcStatsSummaryCard{
  min-width:0;
  padding:15px;
  border:1px solid #c6deeb;
  border-radius:13px;
  background:linear-gradient(145deg,#fff,#f3faff);
}

#paceClockApp:not(.mode-tv) .pcStatsSummaryTitle{
  color:var(--ps-muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#paceClockApp:not(.mode-tv) .pcStatsSummaryValue{
  display:flex;
  align-items:center;
  min-height:55px;
  margin-top:7px;
  overflow-wrap:anywhere;
  font-size:26px;
  font-weight:900;
  line-height:1.08;
}

#paceClockApp:not(.mode-tv) .pcStatsSplitValue{
  display:flex;
  flex-direction:column;
  gap:3px;
}

#paceClockApp:not(.mode-tv) .pcStatsSplitValue > span{
  display:flex;
  align-items:baseline;
  gap:6px;
}

#paceClockApp:not(.mode-tv) .pcStatsSplitValue strong{
  color:inherit;
  font:inherit;
  white-space:nowrap;
}

#paceClockApp:not(.mode-tv) .pcStatsSplitValue small{
  color:var(--ps-muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}

#paceClockApp:not(.mode-tv) .pcStatsComparison{
  margin-top:8px;
  color:var(--ps-muted);
  font-size:11px;
  font-weight:800;
}

#paceClockApp:not(.mode-tv) .pcStatsComparison.is-up{color:#147a43;}
#paceClockApp:not(.mode-tv) .pcStatsComparison.is-down{color:#b24c3b;}
#paceClockApp:not(.mode-tv) .pcStatsComparison.is-new{color:#0876b9;}

#paceClockApp:not(.mode-tv) .pcStatsChartHeading,
#paceClockApp:not(.mode-tv) .pcStatsBreakdownHeading{align-items:center;}

#paceClockApp:not(.mode-tv) .pcStatsChartPanel{
  min-width:0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}

#paceClockApp:not(.mode-tv) .pcStatsChart{
  display:grid;
  grid-template-columns:repeat(var(--pc-stats-bucket-count,7),minmax(44px,1fr));
  gap:8px;
  min-width:max(100%,calc(var(--pc-stats-bucket-count,7) * 52px));
  min-height:245px;
  padding:10px 2px 0;
  border-bottom:1px solid var(--ps-line);
}

#paceClockApp:not(.mode-tv) .pcStatsChart[data-period="year"]{gap:5px;}

#paceClockApp:not(.mode-tv) .pcStatsBarButton{
  display:grid;
  grid-template-rows:32px 1fr 28px;
  min-width:0;
  min-height:220px;
  padding:0 2px;
  border:0;
  border-radius:9px;
  color:var(--ps-deep);
  background:transparent;
  cursor:pointer;
}

#paceClockApp:not(.mode-tv) .pcStatsBarButton:hover,
#paceClockApp:not(.mode-tv) .pcStatsBarButton:focus-visible,
#paceClockApp:not(.mode-tv) .pcStatsBarButton.is-selected{
  outline:none;
  background:#eef9ff;
  box-shadow:0 0 0 2px rgba(7,139,216,.25);
}

#paceClockApp:not(.mode-tv) .pcStatsBarValue{
  align-self:end;
  overflow:hidden;
  color:var(--ps-muted);
  font-size:10px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#paceClockApp:not(.mode-tv) .pcStatsBarTrack{
  position:relative;
  align-self:stretch;
  width:min(38px,75%);
  margin:5px auto 0;
  overflow:hidden;
  border-radius:8px 8px 3px 3px;
  background:#e5f2f9;
}

#paceClockApp:not(.mode-tv) .pcStatsBarFill{
  position:absolute;
  inset:auto 0 0;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#21a7eb,#0876b9);
  transition:height .25s ease;
}

#paceClockApp:not(.mode-tv) .pcStatsBarButton.is-selected .pcStatsBarFill{background:linear-gradient(180deg,#41c779,#159251);}

#paceClockApp:not(.mode-tv) .pcStatsBarLabel{
  align-self:center;
  overflow:hidden;
  font-size:11px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#paceClockApp:not(.mode-tv) .pcStatsChartNote{
  margin:9px 0 0;
  color:var(--ps-muted);
  font-size:11px;
}

#paceClockApp:not(.mode-tv) .pcStatsBucketDetails{
  margin-top:14px;
  padding:14px;
  border:1px solid #abd7eb;
  border-radius:12px;
  background:#f3faff;
}

#paceClockApp:not(.mode-tv) .pcStatsPlanList{
  display:grid;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}

#paceClockApp:not(.mode-tv) .pcStatsPlanList li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:10px 12px;
  border:1px solid #d2e5ef;
  border-radius:10px;
  background:#fff;
}

#paceClockApp:not(.mode-tv) .pcStatsPlanList li > div:first-child{
  display:flex;
  flex-direction:column;
  min-width:0;
}

#paceClockApp:not(.mode-tv) .pcStatsPlanList strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#paceClockApp:not(.mode-tv) .pcStatsPlanList li span{
  color:var(--ps-muted);
  font-size:12px;
}

#paceClockApp:not(.mode-tv) .pcStatsPlanMetrics{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}

#paceClockApp:not(.mode-tv) .pcStatsBreakdownPanel,
#paceClockApp:not(.mode-tv) .pcStatsBreakdownRow{
  display:grid;
  gap:13px;
}

#paceClockApp:not(.mode-tv) .pcStatsBreakdownRow{gap:6px;}

#paceClockApp:not(.mode-tv) .pcStatsBreakdownLabel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#paceClockApp:not(.mode-tv) .pcStatsBreakdownLabel strong{
  color:var(--ps-muted);
  font-size:12px;
}

#paceClockApp:not(.mode-tv) .pcStatsBreakdownTrack{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:#e4f1f8;
}

#paceClockApp:not(.mode-tv) .pcStatsBreakdownTrack span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#078bd8,#42b8ef);
}

#paceClockApp:not(.mode-tv) .pcStatsInlineEmpty,
#paceClockApp:not(.mode-tv) .pcStatsEmptyNotice,
#paceClockApp:not(.mode-tv) .pcStatsError,
#paceClockApp:not(.mode-tv) .pcStatsEmptyState{
  border:1px dashed #b7d8e9;
  border-radius:13px;
  color:var(--ps-muted);
  background:#f1faff;
}

#paceClockApp:not(.mode-tv) .pcStatsInlineEmpty{
  margin-top:12px;
  padding:14px;
  text-align:center;
}

#paceClockApp:not(.mode-tv) .pcStatsEmptyNotice,
#paceClockApp:not(.mode-tv) .pcStatsError{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:16px;
  padding:16px;
}

#paceClockApp:not(.mode-tv) .pcStatsEmptyNotice > span,
#paceClockApp:not(.mode-tv) .pcStatsError > span{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  height:42px;
  border-radius:50%;
  color:#0876b9;
  background:#dff3fd;
  font-size:22px;
  font-weight:900;
}

#paceClockApp:not(.mode-tv) .pcStatsEmptyNotice > div,
#paceClockApp:not(.mode-tv) .pcStatsError > div{flex:1;}

#paceClockApp:not(.mode-tv) .pcStatsEmptyNotice p,
#paceClockApp:not(.mode-tv) .pcStatsError p{margin:3px 0 0;color:var(--ps-muted);}

#paceClockApp:not(.mode-tv) .pcStatsEmptyState{
  display:grid;
  place-items:center;
  margin-top:18px;
  padding:45px 20px;
  text-align:center;
}

#paceClockApp:not(.mode-tv) .pcStatsEmptyState > span{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  color:#fff;
  background:var(--ps-blue);
  font-size:28px;
}

#paceClockApp:not(.mode-tv) .pcStatsEmptyState h3{
  margin:14px 0 3px;
  font-family:Georgia,serif;
  font-size:23px;
  font-style:italic;
}

#paceClockApp:not(.mode-tv) .pcStatsEmptyState p{margin:0;color:var(--ps-muted);}
#paceClockApp:not(.mode-tv) .pcStatsError{border-color:#efc5bd;background:#fff6f4;}
#paceClockApp:not(.mode-tv) .pcStatsError > span{color:#b84935;background:#fde2dc;}
#paceClockApp:not(.mode-tv) .pcStatsError h3{margin:0;}
#paceClockApp:not(.mode-tv) .pcStatsError .pcStatsTodayButton{margin-left:auto;}

#paceClockApp:not(.mode-tv) .pcStatsLoading{
  display:grid;
  gap:14px;
  padding-top:16px;
}

#paceClockApp:not(.mode-tv) .pcStatsSkeleton{
  border-radius:12px;
  background:linear-gradient(90deg,#eaf3f8 20%,#f8fcfe 45%,#eaf3f8 70%);
  background-size:300% 100%;
  animation:pcStatsShimmer 1.25s infinite;
}

#paceClockApp:not(.mode-tv) .pcStatsSkeleton.is-wide{height:54px;}
#paceClockApp:not(.mode-tv) .pcStatsSkeleton.is-card{height:125px;}
#paceClockApp:not(.mode-tv) .pcStatsSkeleton.is-chart{height:260px;}

#paceClockApp:not(.mode-tv) .pcStatsSrOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@keyframes pcStatsShimmer{to{background-position:-150% 0;}}

@media (max-width:800px){
  #paceClockApp:not(.mode-tv) .pcStatsIntro{flex-direction:column;gap:8px;}
  #paceClockApp:not(.mode-tv) .pcStatsTruthNote{width:100%;}
  #paceClockApp:not(.mode-tv) .pcStatsControls{align-items:stretch;flex-direction:column;}
  #paceClockApp:not(.mode-tv) .pcStatsPeriodTabs{display:grid;grid-template-columns:repeat(3,1fr);}
  #paceClockApp:not(.mode-tv) .pcStatsDateNav{display:grid;grid-template-columns:42px minmax(0,1fr) 42px auto;}
  #paceClockApp:not(.mode-tv) .pcStatsPeriodLabel{min-width:0;}
  #paceClockApp:not(.mode-tv) .pcStatsSummaryGrid,
  #paceClockApp:not(.mode-tv) .pcStatsSkeletonGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #paceClockApp:not(.mode-tv) .pcStatsChartHeading,
  #paceClockApp:not(.mode-tv) .pcStatsBreakdownHeading{align-items:stretch;flex-direction:column;}
  #paceClockApp:not(.mode-tv) .pcStatsMetricTabs,
  #paceClockApp:not(.mode-tv) .pcStatsBreakdownTabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;}
  #paceClockApp:not(.mode-tv) .pcStatsPlanList li{align-items:flex-start;flex-direction:column;}
  #paceClockApp:not(.mode-tv) .pcStatsPlanMetrics{width:100%;justify-content:space-between;}
}

@media (max-width:600px){
  #paceClockApp:not(.mode-tv) .pcStatsDashboard{font-size:13px;}
  #paceClockApp:not(.mode-tv) .pcStatsSection{padding:12px;}
  #paceClockApp:not(.mode-tv) .pcStatsSectionHeading h3{font-size:19px;}
  #paceClockApp:not(.mode-tv) .pcStatsSummaryValue{font-size:21px;}
  #paceClockApp:not(.mode-tv) .pcStatsChart{gap:3px;}
  #paceClockApp:not(.mode-tv) .pcStatsChart[data-period="year"]{gap:2px;}
  #paceClockApp:not(.mode-tv) .pcStatsBarTrack{width:min(28px,80%);}
  #paceClockApp:not(.mode-tv) .pcStatsBarValue{visibility:hidden;}
  #paceClockApp:not(.mode-tv) .pcStatsBarLabel{font-size:10px;}
  #paceClockApp:not(.mode-tv) .pcStatsEmptyNotice,
  #paceClockApp:not(.mode-tv) .pcStatsError{align-items:flex-start;flex-wrap:wrap;}
  #paceClockApp:not(.mode-tv) .pcStatsEmptyNotice .pcStatsTodayButton,
  #paceClockApp:not(.mode-tv) .pcStatsError .pcStatsTodayButton{width:100%;margin:0;}
}

@media (max-width:360px){
  #paceClockApp:not(.mode-tv) .pcStatsDateNav{grid-template-columns:42px minmax(0,1fr) 42px;}
  #paceClockApp:not(.mode-tv) .pcStatsDateNav .pcStatsTodayButton{grid-column:1/-1;}
  #paceClockApp:not(.mode-tv) .pcStatsSummaryGrid,
  #paceClockApp:not(.mode-tv) .pcStatsSkeletonGrid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  #paceClockApp:not(.mode-tv) .pcStatsDashboard *{
    scroll-behavior:auto!important;
    transition:none!important;
  }

  #paceClockApp:not(.mode-tv) .pcStatsSkeleton{animation:none;}
}

/* Training Statistics modal: isolate it from legacy page header rules. */
html body #pcTrainingStatisticsModal.pcTsModal > section.pcTsDialog > header.pcTsDialogHeader{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  min-height:65px;
}

body .pcTsModal .pcTsClose{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
}

/* =========================================================
   15. COMPACT TABLET / MOBILE TOOLBAR
   Desktop keeps labels. Tablet and phone keep every main action visible.
   ========================================================= */
@media (max-width:1024px){
  #paceClockApp:not(.mode-tv) .appHeaderRow{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    padding:6px !important;
    overflow:hidden !important;
  }

  #paceClockApp:not(.mode-tv) .headerLeft,
  #paceClockApp:not(.mode-tv) .headerCenter,
  #paceClockApp:not(.mode-tv) .headerRight{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    min-width:0 !important;
  }

  #paceClockApp:not(.mode-tv) .headerLeft{justify-content:flex-start !important;}
  #paceClockApp:not(.mode-tv) .headerCenter{justify-content:center !important;}
  #paceClockApp:not(.mode-tv) .headerRight{justify-content:flex-end !important;}

  #paceClockApp:not(.mode-tv) #resetTopBtn,
  #paceClockApp:not(.mode-tv) #guideTopBtn,
  #paceClockApp:not(.mode-tv) #openSettingsBtn{
    display:none !important;
  }

  #paceClockApp:not(.mode-tv) #homeTopBtn,
  #paceClockApp:not(.mode-tv) #setListTopBtn,
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn,
  #paceClockApp:not(.mode-tv) #statsTopBtn,
  #paceClockApp:not(.mode-tv) #trainingStatsBtn,
  #paceClockApp:not(.mode-tv) #fsBtn,
  #paceClockApp:not(.mode-tv) #moreTopBtn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:12px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  #paceClockApp:not(.mode-tv) #homeTopBtn span{
    display:none !important;
  }

  #paceClockApp:not(.mode-tv) #homeTopBtn svg{
    width:21px !important;
    height:21px !important;
  }

  #paceClockApp:not(.mode-tv) #homeTopBtn svg path{
    stroke:currentColor !important;
  }

  #paceClockApp:not(.mode-tv) #setListTopBtn,
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn,
  #paceClockApp:not(.mode-tv) #statsTopBtn,
  #paceClockApp:not(.mode-tv) #trainingStatsBtn,
  #paceClockApp:not(.mode-tv) #fsBtn{
    font-size:0 !important;
    line-height:1 !important;
  }

  #paceClockApp:not(.mode-tv) #setListTopBtn::before,
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn::before,
  #paceClockApp:not(.mode-tv) #statsTopBtn::before,
  #paceClockApp:not(.mode-tv) #trainingStatsBtn::before,
  #paceClockApp:not(.mode-tv) #fsBtn::before{
    display:block;
    color:currentColor;
    font:800 22px/1 Arial,sans-serif;
  }

  #paceClockApp:not(.mode-tv) #setListTopBtn::before{content:"＋";}
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn::before{content:"▤";}
  #paceClockApp:not(.mode-tv) #statsTopBtn::before{content:"▥";}
  #paceClockApp:not(.mode-tv) #trainingStatsBtn::before{content:"◷";}
  #paceClockApp:not(.mode-tv) #fsBtn::before{content:"▣";}

  #paceClockApp:not(.mode-tv) #moreTopBtn{
    font-size:22px !important;
    line-height:1 !important;
  }
}

@media (max-width:390px){
  #paceClockApp:not(.mode-tv) .appHeaderRow{
    gap:4px !important;
    padding:5px 3px !important;
  }

  #paceClockApp:not(.mode-tv) .headerLeft,
  #paceClockApp:not(.mode-tv) .headerCenter,
  #paceClockApp:not(.mode-tv) .headerRight{
    gap:4px !important;
  }

  #paceClockApp:not(.mode-tv) #homeTopBtn,
  #paceClockApp:not(.mode-tv) #setListTopBtn,
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn,
  #paceClockApp:not(.mode-tv) #statsTopBtn,
  #paceClockApp:not(.mode-tv) #trainingStatsBtn,
  #paceClockApp:not(.mode-tv) #fsBtn,
  #paceClockApp:not(.mode-tv) #moreTopBtn{
    flex-basis:40px !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
  }
}

/* Keep the five workout totals readable at the top of +Sets on phones. */
@media (max-width:480px){
  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard .workoutSummaryStats{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:4px !important;
  }

  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard .workoutSummaryStat:nth-child(1),
  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard .workoutSummaryStat:nth-child(2){
    grid-column:span 3;
  }

  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard .workoutSummaryStat:nth-child(n+3){
    grid-column:span 2;
  }

  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard .workoutSummaryStat{
    min-height:48px;
    padding:6px 3px;
  }

  #paceClockApp:not(.mode-tv) #setListWorkoutDetailsCard .workoutSummaryStatValue{font-size:15px;}
}

/* =========================================================
   16. CLEAR MOBILE NAVIGATION + ISOLATED BUILDER ACTIONS
   Real Font Awesome symbols plus short labels make every compact
   toolbar action identifiable. The builder More control owns its
   grid column and can no longer overlap Save.
   ========================================================= */
.pcMobileNavVisual{display:none;}

@media (max-width:1024px){
  #paceClockApp:not(.mode-tv) #homeTopBtn,
  #paceClockApp:not(.mode-tv) #setListTopBtn,
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn,
  #paceClockApp:not(.mode-tv) #statsTopBtn,
  #paceClockApp:not(.mode-tv) #trainingStatsBtn,
  #paceClockApp:not(.mode-tv) #fsBtn,
  #paceClockApp:not(.mode-tv) #moreTopBtn{
    flex-direction:column !important;
    gap:2px !important;
    font-size:0 !important;
    line-height:1 !important;
  }

  #paceClockApp:not(.mode-tv) #homeTopBtn svg{
    flex:0 0 auto !important;
    width:18px !important;
    height:18px !important;
  }

  #paceClockApp:not(.mode-tv) #setListTopBtn::before,
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn::before,
  #paceClockApp:not(.mode-tv) #statsTopBtn::before,
  #paceClockApp:not(.mode-tv) #trainingStatsBtn::before,
  #paceClockApp:not(.mode-tv) #fsBtn::before,
  #paceClockApp:not(.mode-tv) #moreTopBtn::before{
    display:block !important;
    width:auto !important;
    height:auto !important;
    color:currentColor !important;
    font-family:"Font Awesome 5 Free",FontAwesome,Arial,sans-serif !important;
    font-size:17px !important;
    font-style:normal !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-rendering:auto;
  }

  #paceClockApp:not(.mode-tv) #setListTopBtn::before{content:"\f067" !important;}
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn::before{content:"\f46d" !important;}
  #paceClockApp:not(.mode-tv) #statsTopBtn::before{content:"\f080" !important;}
  #paceClockApp:not(.mode-tv) #trainingStatsBtn::before{content:"\f201" !important;}
  #paceClockApp:not(.mode-tv) #fsBtn::before{content:"\f26c" !important;}
  #paceClockApp:not(.mode-tv) #moreTopBtn::before{content:"\f141" !important;}

  #paceClockApp:not(.mode-tv) #homeTopBtn::after,
  #paceClockApp:not(.mode-tv) #setListTopBtn::after,
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn::after,
  #paceClockApp:not(.mode-tv) #statsTopBtn::after,
  #paceClockApp:not(.mode-tv) #trainingStatsBtn::after,
  #paceClockApp:not(.mode-tv) #fsBtn::after,
  #paceClockApp:not(.mode-tv) #moreTopBtn::after{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    color:currentColor !important;
    font:700 8px/1 Arial,sans-serif !important;
    letter-spacing:-.1px !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  #paceClockApp:not(.mode-tv) #homeTopBtn::after{content:"Home";}
  #paceClockApp:not(.mode-tv) #setListTopBtn::after{content:"Sets";}
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn::after{content:"Workouts";}
  #paceClockApp:not(.mode-tv) #statsTopBtn::after{content:"Stats";}
  #paceClockApp:not(.mode-tv) #trainingStatsBtn::after{content:"Training";}
  #paceClockApp:not(.mode-tv) #fsBtn::after{content:"TV";}
  #paceClockApp:not(.mode-tv) #moreTopBtn::after{content:"More";}

  #paceClockApp.pcMobileNavReady:not(.mode-tv) #homeTopBtn::before,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #homeTopBtn::after,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #setListTopBtn::before,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #setListTopBtn::after,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #myWorkoutsBtn::before,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #myWorkoutsBtn::after,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #statsTopBtn::before,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #statsTopBtn::after,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #trainingStatsBtn::before,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #trainingStatsBtn::after,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #fsBtn::before,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #fsBtn::after,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #moreTopBtn::before,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #moreTopBtn::after{
    display:none !important;
    content:none !important;
  }

  #paceClockApp.pcMobileNavReady:not(.mode-tv) #homeTopBtn > svg,
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #homeTopBtn > span:not(.pcMobileNavVisual){
    display:none !important;
  }

  #paceClockApp.pcMobileNavReady:not(.mode-tv) .pcMobileNavVisual{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    width:100% !important;
    height:100% !important;
    color:currentColor !important;
    pointer-events:none !important;
  }

  /* The original Home rule hides every descendant span; this more specific
     selector keeps the injected mobile visual and its label visible. */
  #paceClockApp.pcMobileNavReady:not(.mode-tv) #homeTopBtn > .pcMobileNavVisual{
    display:flex !important;
  }

  #paceClockApp.pcMobileNavReady:not(.mode-tv) .pcMobileNavVisual svg{
    display:block !important;
    flex:0 0 auto !important;
    width:18px !important;
    height:18px !important;
    color:currentColor !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  #paceClockApp.pcMobileNavReady:not(.mode-tv) .pcMobileNavLabel{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    color:currentColor !important;
    font:700 8px/1 Arial,sans-serif !important;
    letter-spacing:-.1px !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  #paceClockApp.pcMobileNavReady:not(.mode-tv) #homeTopBtn .pcMobileNavLabel{
    display:block !important;
  }
}

@media (max-width:640px){
  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions{
    --bs-gutter-x:0 !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px !important;
    grid-template-rows:48px !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    column-gap:8px !important;
    row-gap:0 !important;
    width:100% !important;
    max-width:100% !important;
    padding:8px !important;
    overflow:visible !important;
  }

  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions > #addBlockBtn{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions > #saveBtn{
    grid-column:2 !important;
    grid-row:1 !important;
    position:relative !important;
    z-index:0 !important;
  }

  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions > #addBlockBtn,
  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions > #saveBtn{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    transform:none !important;
  }

  #paceClockApp:not(.mode-tv) #screenSetList .setEditorActions > .builderMoreWrap{
    box-sizing:border-box !important;
    display:grid !important;
    grid-column:3 !important;
    grid-row:1 !important;
    place-items:stretch !important;
    align-items:stretch !important;
    justify-content:center !important;
    position:relative !important;
    inset:auto !important;
    flex:none !important;
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    z-index:1 !important;
  }

  #paceClockApp:not(.mode-tv) #screenSetList #builderMoreBtn{
    box-sizing:border-box !important;
    display:flex !important;
    position:static !important;
    inset:auto !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 48px !important;
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }
}

@media (max-width:390px){
  #paceClockApp:not(.mode-tv) #homeTopBtn::after,
  #paceClockApp:not(.mode-tv) #setListTopBtn::after,
  #paceClockApp:not(.mode-tv) #myWorkoutsBtn::after,
  #paceClockApp:not(.mode-tv) #statsTopBtn::after,
  #paceClockApp:not(.mode-tv) #trainingStatsBtn::after,
  #paceClockApp:not(.mode-tv) #fsBtn::after,
  #paceClockApp:not(.mode-tv) #moreTopBtn::after{
    font-size:7px !important;
  }

  #paceClockApp.pcMobileNavReady:not(.mode-tv) .pcMobileNavLabel{
    font-size:7px !important;
  }
}

/* =========================================================
   2026-09-29.20 — MOBILE NUMBER FIELD FIT

   Bootstrap's generic .cell padding was still applied inside the compact
   workout table. On a phone that padding consumed most of the Reps,
   Distance and Interval tracks, so otherwise valid values such as 100,
   400 and 03:00 appeared clipped. Keep every value inside its own track
   and give the workout builder predictable numeric columns as well.
   ========================================================= */

@media (max-width:480px){
  #paceClockApp:not(.mode-tv) .thead > div{
    box-sizing:border-box !important;
    min-width:0 !important;
    padding:0 1px !important;
    text-align:center;
  }

  #paceClockApp:not(.mode-tv) .trow .cell{
    box-sizing:border-box !important;
    min-width:0 !important;
    padding-right:0 !important;
    padding-left:0 !important;
    overflow:hidden !important;
  }

  #paceClockApp:not(.mode-tv) .trow .cell:first-child,
  #paceClockApp:not(.mode-tv) .trow .cell:last-child{
    overflow:visible !important;
  }

  #paceClockApp:not(.mode-tv) .trow .cell input{
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding-right:4px !important;
    padding-left:4px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    font-variant-numeric:tabular-nums;
  }

  #paceClockApp:not(.mode-tv) .trow .cell:nth-child(2) input,
  #paceClockApp:not(.mode-tv) .trow .cell:nth-child(3) input,
  #paceClockApp:not(.mode-tv) .trow .cell:nth-child(4) input{
    text-align:center !important;
  }
}

@media (max-width:768px){
  #paceClockApp:not(.mode-tv) .blockSetRow input,
  #paceClockApp:not(.mode-tv) .blockSetRow select{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  #paceClockApp:not(.mode-tv) .blockSetReps,
  #paceClockApp:not(.mode-tv) .blockSetDist,
  #paceClockApp:not(.mode-tv) .blockSetInterval{
    padding-right:5px !important;
    padding-left:5px !important;
    text-align:center !important;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.1px;
  }

  #paceClockApp:not(.mode-tv) .blockSetReps{
    appearance:textfield;
    -moz-appearance:textfield;
  }

  #paceClockApp:not(.mode-tv) .blockSetReps::-webkit-inner-spin-button,
  #paceClockApp:not(.mode-tv) .blockSetReps::-webkit-outer-spin-button{
    margin:0;
    -webkit-appearance:none;
  }
}

@media (max-width:420px){
  #paceClockApp:not(.mode-tv) .blockSetReps,
  #paceClockApp:not(.mode-tv) .blockSetDist,
  #paceClockApp:not(.mode-tv) .blockSetInterval{
    padding-right:4px !important;
    padding-left:4px !important;
    font-size:13px !important;
  }
}

@media (max-width:360px){
  #paceClockApp:not(.mode-tv) .trow .cell input{
    padding-right:3px !important;
    padding-left:3px !important;
    font-size:12px !important;
  }

  #paceClockApp:not(.mode-tv) .blockSetReps,
  #paceClockApp:not(.mode-tv) .blockSetDist,
  #paceClockApp:not(.mode-tv) .blockSetInterval{
    padding-right:3px !important;
    padding-left:3px !important;
    font-size:12px !important;
  }
}

/* =========================================================
   2026-09-29.21 — SAVED WORKOUT STATISTICS MOBILE PARITY

   Keep the saved-plan Stats screen aligned with the responsive behaviour
   of Training Statistics. Only layout and wrapping are changed here;
   period calculations and saved workout data stay untouched.
   ========================================================= */

#paceClockApp:not(.mode-tv) #workoutStatsBody{
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

#paceClockApp:not(.mode-tv) .pcStatsDashboard{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}

#paceClockApp:not(.mode-tv) .pcStatsSummaryCard{
  min-width:0;
  overflow:hidden;
}

#paceClockApp:not(.mode-tv) .pcStatsSummaryTitle,
#paceClockApp:not(.mode-tv) .pcStatsComparison,
#paceClockApp:not(.mode-tv) .pcStatsTruthNote,
#paceClockApp:not(.mode-tv) .pcStatsChartNote{overflow-wrap:anywhere;}

#paceClockApp:not(.mode-tv) .pcStatsSplitValue,
#paceClockApp:not(.mode-tv) .pcStatsSplitValue > span{
  min-width:0;
  max-width:100%;
}

#paceClockApp:not(.mode-tv) .pcStatsSplitValue > span{
  flex-wrap:wrap;
  column-gap:5px;
  row-gap:2px;
}

#paceClockApp:not(.mode-tv) .pcStatsChartPanel{
  max-width:100%;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}

#paceClockApp:not(.mode-tv) .pcStatsBreakdownLabel{
  min-width:0;
  align-items:flex-start;
}

#paceClockApp:not(.mode-tv) .pcStatsBreakdownLabel > span{
  min-width:0;
  overflow-wrap:anywhere;
}

#paceClockApp:not(.mode-tv) .pcStatsBreakdownLabel > strong{
  flex:0 0 auto;
  text-align:right;
}

@media (max-width:800px){
  #paceClockApp:not(.mode-tv) .pcStatsPeriodTabs,
  #paceClockApp:not(.mode-tv) .pcStatsMetricTabs,
  #paceClockApp:not(.mode-tv) .pcStatsBreakdownTabs{gap:6px;}

  #paceClockApp:not(.mode-tv) .pcStatsPeriodTabs > .pcStatsControlButton,
  #paceClockApp:not(.mode-tv) .pcStatsMetricTabs > .pcStatsControlButton,
  #paceClockApp:not(.mode-tv) .pcStatsBreakdownTabs > .pcStatsControlButton{
    min-width:0;
    white-space:normal;
    line-height:1.15;
  }

  #paceClockApp:not(.mode-tv) .pcStatsPlanList strong{
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  #paceClockApp:not(.mode-tv) .pcStatsPlanMetrics{
    flex-wrap:wrap;
    row-gap:4px;
    white-space:normal;
  }
}

@media (max-width:600px){
  #paceClockApp:not(.mode-tv) #workoutStatsModal .pcModalHeader{
    gap:9px;
    min-height:60px;
    padding:max(9px,env(safe-area-inset-top)) 11px 9px;
  }

  #paceClockApp:not(.mode-tv) #workoutStatsModal .pcModalTitle{
    min-width:0;
    font-size:clamp(19px,6vw,22px);
    overflow-wrap:anywhere;
  }

  #paceClockApp:not(.mode-tv) #closeWorkoutStatsBtn{
    flex:0 0 44px;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
  }

  #paceClockApp:not(.mode-tv) #workoutStatsBody{
    padding:10px 10px max(12px,env(safe-area-inset-bottom));
  }

  #paceClockApp:not(.mode-tv) .pcStatsIntro{
    gap:7px;
    padding:1px 1px 11px;
  }

  #paceClockApp:not(.mode-tv) .pcStatsIntro p{overflow-wrap:anywhere;}

  #paceClockApp:not(.mode-tv) .pcStatsTruthNote{
    padding:8px 10px;
  }

  #paceClockApp:not(.mode-tv) .pcStatsControls{
    top:-10px;
    gap:8px;
    margin:0;
    padding:10px 0;
  }

  #paceClockApp:not(.mode-tv) .pcStatsControlButton,
  #paceClockApp:not(.mode-tv) .pcStatsTodayButton,
  #paceClockApp:not(.mode-tv) .pcStatsIconButton{min-height:44px;}

  #paceClockApp:not(.mode-tv) .pcStatsDateNav{
    grid-template-columns:42px minmax(0,1fr) 42px;
    gap:6px;
    width:100%;
  }

  #paceClockApp:not(.mode-tv) .pcStatsPeriodLabel{
    min-width:0;
    padding:0 4px;
    overflow-wrap:anywhere;
  }

  #paceClockApp:not(.mode-tv) .pcStatsDateNav .pcStatsTodayButton{
    grid-column:1 / -1;
    width:100%;
  }

  #paceClockApp:not(.mode-tv) .pcStatsSection{
    margin-top:12px;
    padding:12px;
    border-radius:13px;
  }

  #paceClockApp:not(.mode-tv) .pcStatsSectionHeading{
    gap:9px;
    margin-bottom:11px;
  }

  #paceClockApp:not(.mode-tv) .pcStatsSummaryGrid,
  #paceClockApp:not(.mode-tv) .pcStatsSkeletonGrid{gap:8px;}

  #paceClockApp:not(.mode-tv) .pcStatsSummaryCard{
    padding:12px;
    border-radius:12px;
  }

  #paceClockApp:not(.mode-tv) .pcStatsSummaryTitle{
    font-size:9px;
    letter-spacing:.065em;
  }

  #paceClockApp:not(.mode-tv) .pcStatsSummaryValue{
    min-height:48px;
    margin-top:5px;
    font-size:clamp(20px,6.5vw,24px);
  }

  #paceClockApp:not(.mode-tv) .pcStatsComparison{
    margin-top:5px;
    font-size:10px;
    line-height:1.35;
  }

  #paceClockApp:not(.mode-tv) .pcStatsChart{min-height:220px;}

  #paceClockApp:not(.mode-tv) .pcStatsBarButton{min-height:200px;}

  #paceClockApp:not(.mode-tv) .pcStatsBucketDetails{
    margin-top:10px;
    padding:11px;
  }

  #paceClockApp:not(.mode-tv) .pcStatsBucketHeader{
    align-items:flex-start;
    gap:8px;
  }

  #paceClockApp:not(.mode-tv) .pcStatsBucketHeader > div{min-width:0;}

  #paceClockApp:not(.mode-tv) .pcStatsBucketHeader h4{overflow-wrap:anywhere;}

  #paceClockApp:not(.mode-tv) .pcStatsPlanList li{
    gap:8px;
    padding:9px 10px;
  }

  #paceClockApp:not(.mode-tv) .pcStatsBreakdownLabel{
    flex-wrap:wrap;
    row-gap:3px;
  }
}

@media (max-width:420px){
  #paceClockApp:not(.mode-tv) .pcStatsSummaryGrid,
  #paceClockApp:not(.mode-tv) .pcStatsSkeletonGrid{gap:7px;}

  #paceClockApp:not(.mode-tv) .pcStatsSummaryCard{padding:10px;}

  #paceClockApp:not(.mode-tv) .pcStatsSummaryValue{font-size:clamp(19px,6.3vw,22px);}

  #paceClockApp:not(.mode-tv) .pcStatsMetricTabs,
  #paceClockApp:not(.mode-tv) .pcStatsBreakdownTabs{gap:5px;}

  #paceClockApp:not(.mode-tv) .pcStatsMetricTabs .pcStatsControlButton,
  #paceClockApp:not(.mode-tv) .pcStatsBreakdownTabs .pcStatsControlButton{
    padding-right:5px;
    padding-left:5px;
    font-size:12px;
  }
}

/* =========================================================
   23. STABLE TOOLBAR + CONSISTENT OVERLAY SURFACES

   The complete primary screen stays in place while saved workout data is
   restored. Workouts, plan statistics and official training statistics also
   share one viewport contract so switching between them never produces a
   vertical jump.
   ========================================================= */

/* Match management/athletes: never paint half-hydrated controls. pc-base v5
   already keeps the final geometry in the document with visibility:hidden.
   Do not override that gate or replace real values with temporary numbers. */
#paceClockApp{position:relative;}

#paceClockApp:not(.pc-state-ready)::before{
  content:"";
  position:absolute;
  z-index:20;
  top:12px;
  left:50%;
  width:min(180px, calc(100% - 32px));
  height:42px;
  pointer-events:none;
  background:
    radial-gradient(18px 8px at 18px 31px, transparent 47%, #70c9f3 50% 61%, transparent 64%) 0 0 / 36px 18px repeat-x,
    rgba(248,252,255,.94);
  border:1px solid #b9d9ec;
  border-radius:999px;
  box-shadow:0 10px 28px rgba(17,74,111,.12);
  transform:translateX(-50%);
  animation:pcLoadingWave .9s linear infinite;
}

#paceClockApp:not(.pc-state-ready)::after{
  content:"🏊";
  position:absolute;
  z-index:21;
  top:14px;
  left:calc(50% - 72px);
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  pointer-events:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:24px;
  line-height:1;
  filter:drop-shadow(0 3px 5px rgba(7,94,150,.22));
  animation:pcSwimmerLoading 1.8s ease-in-out infinite;
}

#paceClockApp:not(.pc-state-ready) .appShell{
  pointer-events:none;
  user-select:none;
}

#paceClockApp.pc-state-ready::before,
#paceClockApp.pc-state-ready::after{content:none;}

@keyframes pcLoadingWave{
  from{background-position:0 0, 0 0;}
  to{background-position:36px 0, 0 0;}
}

@keyframes pcSwimmerLoading{
  0%{opacity:0;transform:translateX(0) translateY(1px) rotate(-4deg) scaleX(-1);}
  12%{opacity:1;}
  50%{transform:translateX(55px) translateY(-2px) rotate(3deg) scaleX(-1);}
  88%{opacity:1;}
  100%{opacity:0;transform:translateX(110px) translateY(1px) rotate(-4deg) scaleX(-1);}
}

@media (prefers-reduced-motion:reduce){
  #paceClockApp:not(.pc-state-ready)::before{animation:none;}

  #paceClockApp:not(.pc-state-ready)::after{
    left:50%;
    opacity:1;
    transform:translateX(-50%) scaleX(-1);
    animation:none;
  }
}

/* Workouts, Stats and Training use the same first-load surface. It keeps a
   stable viewport and never paints temporary zero values. */
body .pcPanelLoader{
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  box-sizing:border-box;
  width:100%;
  min-height:clamp(300px,52dvh,560px);
  padding:32px 20px;
  color:#315975;
  text-align:center;
}

body .pcPanelLoaderTrack{
  position:relative;
  width:min(180px,calc(100% - 24px));
  height:42px;
  margin-bottom:4px;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(18px 8px at 18px 31px,transparent 47%,#70c9f3 50% 61%,transparent 64%) 0 0 / 36px 18px repeat-x,
    rgba(248,252,255,.96);
  border:1px solid #b9d9ec;
  border-radius:999px;
  box-shadow:0 10px 28px rgba(17,74,111,.12);
  animation:pcLoadingWave .9s linear infinite;
}

body .pcPanelLoaderTrack::after{
  content:"🏊";
  position:absolute;
  top:1px;
  left:16px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:24px;
  line-height:1;
  filter:drop-shadow(0 3px 5px rgba(7,94,150,.22));
  animation:pcPanelSwimmerLoading 1.8s ease-in-out infinite;
}

body .pcPanelLoader strong{
  color:#123c59;
  font-size:15px;
  font-weight:850;
}

body .pcPanelLoader > span{
  max-width:430px;
  color:#59758a;
  font-size:12px;
  line-height:1.45;
}

#paceClockApp:not(.mode-tv) .pcStatsEmptyActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}

#paceClockApp:not(.mode-tv) .pcStatsRefreshStatus.is-error{
  color:#8b3d2f;
  background:rgba(255,247,244,.98);
  border-color:#e9b8ae;
}

#paceClockApp:not(.mode-tv) .pcStatsRefreshStatus.is-error button{
  min-height:28px;
  padding:3px 9px;
  color:#8b3d2f;
  background:#fff;
  border:1px solid #dca79c;
  border-radius:999px;
  font:800 11px/1 Arial,sans-serif;
  cursor:pointer;
}

@keyframes pcPanelSwimmerLoading{
  0%{opacity:0;transform:translateX(0) translateY(1px) rotate(-4deg) scaleX(-1);}
  12%{opacity:1;}
  50%{transform:translateX(55px) translateY(-2px) rotate(3deg) scaleX(-1);}
  88%{opacity:1;}
  100%{opacity:0;transform:translateX(110px) translateY(1px) rotate(-4deg) scaleX(-1);}
}

@media (prefers-reduced-motion:reduce){
  body .pcPanelLoaderTrack{animation:none;}

  body .pcPanelLoaderTrack::after{
    left:50%;
    opacity:1;
    transform:translateX(-50%) scaleX(-1);
    animation:none;
  }
}

/* Desktop and tablet: every large surface begins 16px below the viewport. */
#paceClockApp:not(.mode-tv) #workoutLibraryModal,
#paceClockApp:not(.mode-tv) #workoutStatsModal{
  align-items:flex-start !important;
  justify-content:center !important;
  overflow:auto !important;
  overscroll-behavior:contain;
  padding:16px !important;
}

body #pcTrainingStatisticsModal.pcTsModal{
  place-items:start center !important;
  overflow:auto !important;
  overscroll-behavior:contain;
  padding:16px !important;
}

#paceClockApp:not(.mode-tv) #workoutLibraryModal > .pcModalCard,
#paceClockApp:not(.mode-tv) #workoutStatsModal > .pcModalCard,
body #pcTrainingStatisticsModal.pcTsModal > .pcTsDialog{
  box-sizing:border-box;
  width:min(1160px,calc(100vw - 32px)) !important;
  max-width:1160px !important;
  margin:0 !important;
  height:min(900px,calc(100dvh - 32px)) !important;
  max-height:calc(100vh - 32px) !important;
  max-height:calc(100dvh - 32px) !important;
}

/* Workouts now follows the same modal contract as Stats and Training: the
   page stays fixed, the header remains visible and only the content scrolls. */
html.pcWorkoutLibraryOpen,
body.pcWorkoutLibraryOpen{overscroll-behavior:none;}

#paceClockApp:not(.mode-tv) #workoutLibraryModal > .pcModalCard{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

#paceClockApp:not(.mode-tv) #workoutLibraryModal .pcModalHeader{
  position:sticky;
  top:0;
  z-index:20;
  flex:0 0 auto;
}

#paceClockApp:not(.mode-tv) #workoutLibraryList{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

/* Saved and coach-assigned plans keep one total calendar, while the compact
   M/A segments make the source visible without relying on colour alone. */
#paceClockApp:not(.mode-tv) .workoutSourceLegend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:8px 0 10px;
  color:#35576f;
  font-size:12px;
  font-weight:700;
}

#paceClockApp:not(.mode-tv) .workoutSourceLegendItem{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

#paceClockApp:not(.mode-tv) .workoutSourceLegendItem,
#paceClockApp:not(.mode-tv) .calendarSourceCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:22px;
  height:20px;
  padding:0 5px;
  border:1px solid currentColor;
  border-radius:999px;
  font:800 10px/1 Arial,sans-serif;
  white-space:nowrap;
}

#paceClockApp:not(.mode-tv) .workoutSourceLegendItem.sourceOwn,
#paceClockApp:not(.mode-tv) .calendarSourceCount.sourceOwn{color:#0879bd;}

#paceClockApp:not(.mode-tv) .workoutSourceLegendItem.sourceAssignedGroup,
#paceClockApp:not(.mode-tv) .workoutSourceLegendItem.sourceAssignedDirect,
#paceClockApp:not(.mode-tv) .calendarSourceCount.sourceAssignedGroup,
#paceClockApp:not(.mode-tv) .calendarSourceCount.sourceAssignedDirect{color:#7250b5;}

#paceClockApp:not(.mode-tv) .workoutSourceLegendItem.sourceOwn,
#paceClockApp:not(.mode-tv) .calendarSourceCount.sourceOwn{
  background:#e5f6ff;
  border-color:#8acced;
}

#paceClockApp:not(.mode-tv) .workoutSourceLegendItem.sourceAssignedGroup,
#paceClockApp:not(.mode-tv) .workoutSourceLegendItem.sourceAssignedDirect,
#paceClockApp:not(.mode-tv) .calendarSourceCount.sourceAssignedGroup,
#paceClockApp:not(.mode-tv) .calendarSourceCount.sourceAssignedDirect{
  background:#f0eaff;
  border-color:#bba8e6;
}

#paceClockApp:not(.mode-tv) .libraryEmptyMessage,
#paceClockApp:not(.mode-tv) .libraryLoadError{
  box-sizing:border-box;
  width:100%;
  margin:8px 0 12px;
  padding:13px 15px;
  color:#35576f;
  background:#f4faff;
  border:1px dashed #9dcce8;
  border-radius:12px;
  font-size:12px;
  line-height:1.45;
  text-align:center;
}

#paceClockApp:not(.mode-tv) .libraryLoadError{
  color:#8b3d2f;
  background:#fff7f4;
  border-color:#e9b8ae;
}

/* Phone: all three products use the same edge-to-edge surface. */
@media (max-width:640px){
  #paceClockApp:not(.mode-tv) #workoutLibraryModal,
  #paceClockApp:not(.mode-tv) #workoutStatsModal,
  body #pcTrainingStatisticsModal.pcTsModal{
    align-items:stretch !important;
    justify-content:stretch !important;
    place-items:stretch !important;
    overflow:hidden !important;
    padding:0 !important;
  }

  #paceClockApp:not(.mode-tv) #workoutLibraryModal > .pcModalCard,
  #paceClockApp:not(.mode-tv) #workoutStatsModal > .pcModalCard,
  body #pcTrainingStatisticsModal.pcTsModal > .pcTsDialog{
    width:100% !important;
    max-width:none !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
  }

  #paceClockApp:not(.mode-tv) #workoutLibraryModal .pcModalHeader,
  #paceClockApp:not(.mode-tv) #workoutStatsModal .pcModalHeader,
  html body #pcTrainingStatisticsModal.pcTsModal .pcTsDialogHeader{
    padding-top:max(10px, env(safe-area-inset-top)) !important;
  }

  body #pcTrainingStatisticsModal.pcTsModal .pcTsBody{
    padding-bottom:max(12px, env(safe-area-inset-bottom)) !important;
  }

  #paceClockApp:not(.mode-tv) .workoutSourceLegend{
    gap:6px 10px;
    margin:6px 0 8px;
    font-size:11px;
  }

  #paceClockApp:not(.mode-tv) .calendarSourceCount{
    min-width:19px;
    height:17px;
    padding:0 3px;
    font-size:8px;
  }

}