/* =========================================================
   Pace Clock — base
   #pace_clock/pc-base
   ========================================================= */

/* =========================================================
   01. VARIABLES / APP ROOT
   ========================================================= */

#paceClockApp{
    --pc-blue1:#00aaff;
    --pc-blue2:#0088dd;
    --pc-blue3:#0077cc;

    --white:#fff;
    --muted:rgba(255,255,255,.82);
    --line:rgba(255,255,255,.18);

    --siteHeaderH:90px;

    --btn:#0088dd;
    --btnHover:#0077cc;

    --start1:#41c45a;
    --start2:#2da240;

    --panel:rgba(10,35,50,.78);
    --panelLine:rgba(255,255,255,.14);

    --shadow:0 10px 24px rgba(0,0,0,.18);
    --shadow2:0 6px 14px rgba(0,0,0,.14);

    color:var(--white);
    overflow-x:hidden;
    isolation:isolate;
}

#paceClockApp,
#paceClockApp *{
    box-sizing:border-box;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body{overflow-x:hidden;}


/* =========================================================
   02. WRAPPERS / BASIC LAYOUT
   ========================================================= */

#paceClockApp .wrap{
    max-width:1200px;
    margin:0 auto;
    padding:14px;
}

#paceClockApp .row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}

#paceClockApp .layout{display:block;}

#paceClockApp .screen{display:none;}

#paceClockApp .screen.active{display:block;}

#paceClockApp .appShell{
    background:linear-gradient(180deg,var(--pc-blue1),var(--pc-blue2));
    border-radius:18px;
    padding:14px;
    margin-bottom:24px;
    box-shadow:var(--shadow);
    border:1px solid rgba(255,255,255,.18);
}


#paceClockApp #factoryResetBtn{
    background:rgba(255,80,80,.16) !important;
    border-color:rgba(255,80,80,.34) !important;
    color:#ffb3b3 !important;
}

/* =========================================================
   03. HEADER
   ========================================================= */

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

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

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

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

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

#paceClockApp #homeTopBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

#paceClockApp #homeTopBtn svg{opacity:.9;}



/* =========================================================
   04. BUTTONS
   ========================================================= */

#paceClockApp .btn{
    background:var(--btn);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    padding:10px 14px;
    border-radius:12px;
    font-size:15px;
    cursor:pointer;
    user-select:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:var(--shadow2);
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease;
}

#paceClockApp .btn:hover{
    background:var(--btnHover);
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(0,0,0,.18);
    filter:brightness(1.02);
}

#paceClockApp .btn:active{
    transform:translateY(0);
    box-shadow:var(--shadow2);
}

#paceClockApp .btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

#paceClockApp .btn.secondary{
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.20);
}

#paceClockApp .btn.secondary:hover{background:rgba(255,255,255,.22);}

#paceClockApp .btn.small{
    padding:9px 12px;
    font-size:14px;
}

#paceClockApp .iconBtn{
    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:18px;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:var(--shadow2);
    transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}

#paceClockApp .iconBtn:hover{
    background:rgba(255,255,255,.22);
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(0,0,0,.16);
}

#paceClockApp .iconBtn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

#paceClockApp .iconbtn{
    width:32px;
    height:32px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.14);
    color:#fff;
    cursor:pointer;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
}

#paceClockApp .iconbtn:hover{background:rgba(255,255,255,.22);}

#paceClockApp .headPlusBtn{
    width:34px;
    height:34px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.14);
    color:#fff;
    cursor:pointer;
    font-size:20px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow2);
}

#paceClockApp .headPlusBtn:hover{background:rgba(255,255,255,.22);}

#paceClockApp .headPlusBtn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

#paceClockApp #fsBtn,
#paceClockApp #fsBtn.btn,
#paceClockApp #fsBtn.btn-primary,
#paceClockApp #fsBtn.primary{
    color:#1487dc !important;
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
    border:1px solid #d7e8f7 !important;
    box-shadow:none !important;
    opacity:1 !important;
    filter:none !important;
}

#paceClockApp #fsBtn:hover,
#paceClockApp #fsBtn:focus{
    color:#0f79c7 !important;
    background:#eaf6ff !important;
    background-image:none !important;
    border-color:#bcdcf5 !important;
}


/* =========================================================
   05. FORMS / INPUTS
   ========================================================= */

#paceClockApp input[type="number"],
#paceClockApp input[type="text"],
#paceClockApp textarea,
#paceClockApp select{
    width:100%;
    padding:10px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.12);
    color:#fff;
    outline:none;
    min-width:0;
}

#paceClockApp textarea{
    min-height:120px;
    resize:vertical;
}

#paceClockApp input::placeholder{color:rgba(255,255,255,.75);}

#paceClockApp option{color:#111;}

#paceClockApp input:focus,
#paceClockApp textarea:focus,
#paceClockApp select:focus{
    border-color:rgba(0,170,255,.65);
    box-shadow:0 0 0 2px rgba(0,170,255,.25);
}


/* =========================================================
   06. SETTINGS PANEL / OVERLAY
   ========================================================= */

#paceClockApp .settingsOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.38);
    z-index:9998;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
}

#paceClockApp .settingsOverlay.open{
    opacity:1;
    pointer-events:auto;
}

#paceClockApp .settingsPanel{
    background:var(--panel);
    border:1px solid var(--panelLine);
    border-radius:14px;
    padding:12px;
    box-shadow:var(--shadow);
    position:fixed;
    top:calc(var(--siteHeaderH) + 12px);
    bottom:12px;
    right:12px;
    width:min(360px, calc(100vw - 24px));
    z-index:9999;
    transform:translateX(110%);
    transition:transform .22s ease;
    overflow:auto;
    backdrop-filter:blur(10px);
}

#paceClockApp .settingsPanel.open{transform:translateX(0);}

#paceClockApp .settingsHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

#paceClockApp .settingsBlock{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:12px;
    margin-top:12px;
}

#paceClockApp .settingsBlockTitle{
    font-weight:700;
    margin-bottom:8px;
    color:rgba(255,255,255,.94);
}

#paceClockApp .settingsBtns{
    display:grid;
    gap:8px;
}

#paceClockApp .settingsBtns .btn{width:100%;}

#paceClockApp .divider{
    height:1px;
    background:rgba(255,255,255,.18);
    margin:6px 0;
}

#paceClockApp details > summary{
    list-style:none;
    outline:none;
    cursor:pointer;
}

#paceClockApp details > summary::-webkit-details-marker{display:none;}

#paceClockApp .settingsDetails{
    margin-top:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    overflow:hidden;
}

#paceClockApp .settingsDetails > summary{
    position:relative;
    padding:12px 40px 12px 14px;
    background:rgba(255,255,255,.12);
    font-weight:700;
    color:rgba(255,255,255,.96);
    transition:background .12s ease;
}

#paceClockApp .settingsDetails > summary:hover{background:rgba(255,255,255,.18);}

#paceClockApp .settingsDetails > summary::after{
    content:"+";
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:20px;
    line-height:1;
    opacity:.9;
}

#paceClockApp .settingsDetails[open] > summary::after{content:"–";}

#paceClockApp .settingsInner{padding:12px;}

#paceClockApp .settingsInner .grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    align-items:start;
}

#paceClockApp .settingsInner .grid3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
}

#paceClockApp .settingsInner label span{
    display:block;
    font-size:14px;
    line-height:1.2;
    margin-bottom:6px;
}

#paceClockApp #strokeRateInfo,
#paceClockApp #staggerMaxLine{
    line-height:1.2;
    text-align:left;
}


/* =========================================================
   07. POWER TOGGLE
   ========================================================= */

#paceClockApp .powerBlock{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:10px 12px;
    margin-top:12px;
}

#paceClockApp .powerRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:nowrap;
    min-width:0;
}

#paceClockApp .powerText{
    flex:1 1 auto;
    min-width:0;
    margin:0;
    padding:0;
    font-size:17px;
    font-weight:700;
    line-height:1.1;
    color:rgba(255,255,255,.96);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#paceClockApp .toggle{
    width:52px;
    height:28px;
    min-width:52px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    position:relative;
    cursor:pointer;
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);
    flex:0 0 52px;
}

#paceClockApp .toggle.off{background:rgba(255,255,255,.10);}

#paceClockApp .knob{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    position:absolute;
    top:2px;
    left:26px;
    transition:.2s;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}

#paceClockApp .toggle.off .knob{
    left:2px;
    background:rgba(255,255,255,.85);
}


/* =========================================================
   08. CARDS
   ========================================================= */

#paceClockApp .card{
    margin-top:10px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    padding:12px;
}

#paceClockApp .cardTitle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:rgba(255,255,255,.92);
    margin-bottom:10px;
}

#paceClockApp .trash{
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.14);
    color:#fff;
    cursor:pointer;
    font-size:18px;
}

#paceClockApp .trash:hover{background:rgba(255,255,255,.22);}

/* =========================================================
   17. FOCUS MODE / UTILITY STATES
   ========================================================= */

#paceClockApp.focus #setsTable{
    display:none !important;
}

html.pc-no-scroll,
body.pc-no-scroll{
    overflow:hidden !important;
    height:100% !important;
    overscroll-behavior:none !important;
    touch-action:none !important;
}

@keyframes pcPulse{
    0%{transform:scale(.96);}
    100%{transform:scale(1.01);}
}


/* =========================================================
   18.1 GLOBAL PAGE CLEANUP
   hide site header/footer for Pace Clock
   ========================================================= */

body:has(#paceClockApp){
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden;
    background:linear-gradient(180deg,#00aaff,#0088dd);
}

body:has(#paceClockApp) header,
body:has(#paceClockApp) footer,
body:has(#paceClockApp) .site-header,
body:has(#paceClockApp) .siteHeader,
body:has(#paceClockApp) .main-header,
body:has(#paceClockApp) .mainHeader,
body:has(#paceClockApp) .navbar,
body:has(#paceClockApp) .header-wrap,
body:has(#paceClockApp) .footer,
body:has(#paceClockApp) .site-footer,
body:has(#paceClockApp) .main-footer,
body:has(#paceClockApp) .footer-wrap{
    display:none !important;
}

body:has(#paceClockApp) #paceClockApp{
    min-height:100vh;
    min-height:100dvh;
    width:100%;
    margin:0 !important;
    padding:0 !important;
    --siteHeaderH:0px !important;
}

#paceClockApp button:disabled,
#paceClockApp input:disabled,
#paceClockApp select:disabled,
#paceClockApp textarea:disabled{cursor:not-allowed;}