/* =========================================================
   Pace Clock — Clock UI
   File: /paceclock/pc-clock.css

   Main stylesheet for the Pace Clock interface.

   Contains the visual layout and responsive design for:

   01. CLOCK CARD
   02. STATUS PILLS
   03. START / SKIP CONTROLS
   04. CLOCK BOTTOM
   05. WORKOUT TABLE
   06. STOPWATCH LAPS
   07. WORKOUT BUILDER
       07.1 Desktop / Tablet / TV
       07.2 Mobile
       07.3 Small Mobile
   08. ROUND INLINE EDITOR

   Responsive Layout

   • Desktop / TV (769px+)
     - Full workout builder
     - Single-row set editor
     - Advanced fields expandable
     - Optimized for widescreen displays

   • Mobile (768px and below)
     - Compact two-row layout
     - Expandable advanced fields
     - Touch-friendly controls

   ========================================================= */

/* =========================================================
   01. CLOCK CARD

   Main timer card.
   Contains the clock, timer display and overall card styling.
   ========================================================= */

#paceClockApp #clockCard{
    width:100%;
    max-width:980px;
    margin:18px auto 0;
    padding:18px;
    background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.16));
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    box-shadow:0 12px 26px rgba(0,0,0,.16);
    overflow:hidden;
}

#paceClockApp #clockCard .topMeta,
#paceClockApp #clockCard .time,
#paceClockApp #clockCard .status,
#paceClockApp #clockCard .startbar,
#paceClockApp #clockCard .sub,
#paceClockApp #clockCard .clockBottomBar,
#paceClockApp #clockCard .clockBottom{
    max-width:none !important;
    width:100% !important;
}

#paceClockApp #clockCard .time{
    text-align:center;
    font-weight:800;
    letter-spacing:.03em;
    line-height:1;
    font-size:clamp(60px, 6vw, 96px);
    padding:18px 24px;
    border-radius:22px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.06);
}

#paceClockApp .blockSetTimes,
#paceClockApp .blockSetOn{
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.82);
    font-weight:700;
    white-space:nowrap;
    user-select:none;
}

#paceClockApp .blockSetTimes{font-size:16px;}

#paceClockApp .blockSetOn{
    font-size:12px;
    text-transform:lowercase;
}


/* =========================================================
   02. STATUS PILLS

   Phase, Block, Set and Round indicators.
   Includes all status pill styles and colors.
   ========================================================= */

#paceClockApp #clockCard .status{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:14px;
}

@media (min-width:900px){
    #paceClockApp #clockCard .status{
        grid-template-columns:1fr 1fr 1fr 1fr;
    }
}

#paceClockApp #clockCard .status .pill{
    min-height:42px;
    padding:8px 14px;
    border-radius:999px;
    font-weight:700;
    letter-spacing:.2px;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 6px 12px rgba(0,0,0,.10);
}

#paceClockApp #phaseStatus{min-width:140px;}

#paceClockApp #setStatus,
#paceClockApp #repStatus,
#paceClockApp #roundStatus,
#paceClockApp #roundInlineControl{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08);
}

#paceClockApp .phase-ready{
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
}

#paceClockApp .phase-prep{
    background:rgba(255,196,0,.16);
    color:#ffd24d;
    border:1px solid rgba(255,210,77,.22);
}

#paceClockApp .phase-work{
    background:rgba(0,200,120,.18);
    color:#6dffb0;
    border:1px solid rgba(109,255,176,.22);
}

#paceClockApp .phase-rest{
    background:rgba(0,150,255,.16);
    color:#7dc9ff;
    border:1px solid rgba(125,201,255,.22);
}

#paceClockApp .phase-stopwatch{
    background:rgba(180,120,255,.16);
    color:#d3a6ff;
    border:1px solid rgba(211,166,255,.22);
}


/* =========================================================
   03. START / SKIP CONTROLS

   Primary workout controls.

   • Start / Pause
   • Skip
   ========================================================= */

#paceClockApp #clockCard .startbar{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:18px;
    width:100%;
}

#paceClockApp #startPauseBtn{
    height:84px;
    min-width:240px;
    padding:0 26px;
    font-size:28px;
    font-weight:800;
    border-radius:999px;
    background:linear-gradient(180deg, var(--start1), var(--start2)) !important;
    border-color:rgba(0,0,0,.08) !important;
    box-shadow:0 12px 22px rgba(0,0,0,.18);
}

#paceClockApp #startPauseBtn:active{transform:scale(.97);}

#paceClockApp #skipBtn{
    height:64px;
    min-width:160px;
    padding:0 20px;
    font-size:18px;
    border-radius:999px;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.20) !important;
}

#paceClockApp #startPauseBtn,
#paceClockApp #skipBtn{
    margin-left:auto;
    margin-right:auto;
}


/* =========================================================
   04. CLOCK BOTTOM

   Legacy clock elements.
   Hidden or simplified in the current UI.
   ========================================================= */

#paceClockApp #clockCard .clockBottomBar,
#paceClockApp #setRepLabel,
#paceClockApp #hint,
#paceClockApp #clockCard .sideArrows{
    display:none !important;
}


/* =========================================================
   05. WORKOUT TABLE

   Workout rows displayed while running.

   Includes:
   • Table
   • Active row
   • Inputs
   • Meta information
   ========================================================= */

#paceClockApp #setsTable{
    display:flex;
    flex-direction:column;
}

#paceClockApp .table{
    margin-top:10px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 20px rgba(0,0,0,.14);
}

#paceClockApp .thead,
#paceClockApp .trow{
    display:grid;
    grid-template-columns:
        34px
        54px
        72px
        82px
        minmax(100px, 1fr)
        minmax(180px, 2fr)
        34px;

    align-items:center;
    gap:6px;
}

#paceClockApp .thead{
    background:rgba(255,255,255,.14);
    font-size:13px;
    color:rgba(255,255,255,.92);
    font-weight:650;
}

#paceClockApp .trow{
    min-height:42px;
    padding:5px 8px;
    border-top:1px solid var(--line);
    background:rgba(0,0,0,.08);
    opacity:.72;
    transform:none;
    transition:all .18s ease;
}

#paceClockApp .trow.active{
    opacity:1;
    transform:none;
    border:2px solid #4db8ff;
    border-radius:14px;
    background:rgba(77,184,255,.14);
    box-shadow:0 0 0 1px rgba(77,184,255,.18), 0 8px 24px rgba(0,0,0,.18);
    transition:all .15s ease;
    animation:none;
}

#paceClockApp .trow.active .cell{font-weight:600;}

#paceClockApp .cell{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    min-height:32px;
}

#paceClockApp .metaCell{
    font-size:13px;
    line-height:1.2;
    color:rgba(255,255,255,.88);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#paceClockApp .rowMeta{
    display:none !important;
}

#paceClockApp .trow .cell input{
    height:30px;
    min-height:30px;
    padding:4px 8px;
    font-size:14px;
    border-radius:10px;
    transition:background .18s ease, border-color .18s ease, opacity .18s ease;
}

#paceClockApp .trow.active .cell input{
    border-color:rgba(77,184,255,.65);
    background:rgba(255,255,255,.06);
}

#paceClockApp .trow:not(.active) .cell{opacity:.85;}

#paceClockApp #rows{
    max-height:clamp(180px, 26vh, 300px);
    overflow-y:auto;
    overflow-x:hidden;
    padding:8px 4px 10px;
    -webkit-overflow-scrolling:touch;
    touch-action:manipulation;
}

#paceClockApp .metaInputs{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
}

#paceClockApp .metaInputs input{
    width:100%;
    min-width:0;
}

#paceClockApp #setsTable.is-running .trow .cell input,
#paceClockApp #setsTable.is-running .trow .iconbtn{pointer-events:none;}

#paceClockApp #setsTable.is-running .trow .cell input{opacity:.82;}

#paceClockApp .trow .cell:first-child{
    justify-content:center;
    font-weight:700;
    font-size:15px;
    color:rgba(255,255,255,.78);
    letter-spacing:.02em;
}

#paceClockApp .trow .cell:first-child::before{content:"";}

#paceClockApp .thead > div:first-child{text-align:center;}


/* =========================================================
   06. STOPWATCH LAPS

   Lap list used in Stopwatch mode.
   ========================================================= */

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

#paceClockApp #lapsList{
    display:flex;
    flex-direction:column;
    gap:8px;
}

#paceClockApp .lapRow{
    display:grid;
    grid-template-columns:56px 1fr;
    gap:10px;
    align-items:center;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
}

#paceClockApp .lapNo{
    font-weight:700;
    white-space:nowrap;
}

#paceClockApp .lapCompact{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:600;
}


/* =========================================================
   07. WORKOUT BUILDER

   Workout editor used for creating and editing blocks.

   Desktop / TV
   • Single-row layout
   • Expandable advanced fields

   Mobile
   • Two-row compact layout
   • Expandable advanced fields
   ========================================================= */

#paceClockApp #screenSetList{
    max-width:1100px;
    margin:0 auto;
    padding:0;
    color:#fff !important;
}

#paceClockApp #screenSetList .setlistTopbar{
    display:grid !important;
    grid-template-columns:56px 1fr 56px;
    align-items:center !important;
    gap:10px !important;
    margin:0 0 18px 0 !important;
}

#paceClockApp #screenSetList .backbtn{
    width:56px;
    height:56px;
    border:none;
    border-radius:16px;
    background:rgba(255,255,255,.16);
    color:#fff;
    font-size:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:var(--shadow2);
}

#paceClockApp #screenSetList h2{
    margin:0 !important;
    text-align:center;
    color:#fff !important;
    font-size:28px;
    font-weight:800;
    line-height:1.1;
}

#paceClockApp .blockSetRow{
    display:grid;
    grid-template-columns:72px 90px 90px 1fr 1fr 60px 44px;
    gap:8px;
    align-items:center;
    width:100%;
    margin-bottom:8px;
}

#paceClockApp .blockSetRow input{
    height:44px;
    border-radius:14px;
    background:rgba(255,255,255,.14);
    color:#fff;
    border:1px solid rgba(255,255,255,.22);
    font-size:15px;
}

#paceClockApp .blockSetRow > *{min-width:0;}

#paceClockApp .blockSetStroke,
#paceClockApp .blockSetNote{
    width:100%;
    min-width:0;
}

#paceClockApp .blockSetRow > input{
    width:100%;
    min-width:0;
    box-sizing:border-box;
}

#paceClockApp .blockSetDelete{
    box-sizing:border-box;
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    padding:0 !important;
    margin:0;
    justify-self:center;
    align-self:center;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;
    border:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.16);
    color:#fff;

    font-size:16px;
    font-weight:700;
    line-height:1;
}

/* tablet / mobile: compact set cards */

#paceClockApp .blockSetMore{
    display:none;
    box-sizing:border-box;

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    padding:0 !important;
    margin:0;
    justify-self:center;
    align-self:center;

    align-items:center;
    justify-content:center;

    border-radius:11px;

    font-size:17px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

#paceClockApp .blockSetAdvanced{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
    grid-column:1 / -1;
}

/* ---------------------------------------------------------
   07.1 DESKTOP / TABLET / TV WORKOUT BUILDER

   Wide-screen workout builder layout.

   • Main set fields remain in one horizontal row
   • Advanced fields open underneath
   • More and Delete controls remain fixed on the right
   --------------------------------------------------------- */

@media (min-width:769px){

    /*
     Main row:
     reps | distance | interval | stroke | note | more | delete
    */

    #paceClockApp .blockSetRow{
    grid-template-columns:
        44px
        18px
        64px
        28px
        78px
        minmax(120px, 1fr)
        minmax(220px, 2fr)
        44px
        36px;

    gap:8px;
    align-items:center;
    padding:8px;

    border-radius:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
}

    #paceClockApp .blockSetReps{grid-column:1;}

#paceClockApp .blockSetTimes{grid-column:2;}

#paceClockApp .blockSetDist{grid-column:3;}

#paceClockApp .blockSetOn{grid-column:4;}

#paceClockApp .blockSetInterval{grid-column:5;}

#paceClockApp .blockSetStroke{grid-column:6;}

#paceClockApp .blockSetNote{grid-column:7;}

#paceClockApp .blockSetMore{
    display:flex;
    grid-column:8;
    justify-self:center;
}

#paceClockApp .blockSetDelete{grid-column:9;}

    /*
     Advanced fields are hidden until ••• is pressed.
    */

    #paceClockApp .blockSetAdvanced{
        display:none;
        grid-column:1 / -1;
        grid-row:2;

        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:8px;
        padding-top:2px;
    }

    #paceClockApp .blockSetRow.expanded .blockSetAdvanced{display:grid;}

    /*
     Advanced row 1:
     equipment | zone | pace | rest
    */

    #paceClockApp .blockSetEquipment{
        grid-column:1;
        grid-row:1;
    }

    #paceClockApp .blockSetZone{
        grid-column:2;
        grid-row:1;
    }

    #paceClockApp .blockSetPace{
        grid-column:3;
        grid-row:1;
    }

    #paceClockApp .blockSetRest{
        grid-column:4;
        grid-row:1;
    }

    /*
     Advanced row 2:
     target | intensity | tags
    */

    #paceClockApp .blockSetTargetTime{
        grid-column:1;
        grid-row:2;
    }

    #paceClockApp .blockSetIntensity{
        grid-column:2;
        grid-row:2;
    }

    #paceClockApp .blockSetTags{
        grid-column:3 / 5;
        grid-row:2;
    }

    #paceClockApp .blockSetAdvanced input{
        width:100%;
        min-width:0;
    }

    /*
     Reps: remove native spinner arrows
    */

    #paceClockApp .blockSetReps{
        appearance:textfield;
        -moz-appearance:textfield;
        padding-right:8px;
    }

    #paceClockApp .blockSetReps::-webkit-inner-spin-button,
    #paceClockApp .blockSetReps::-webkit-outer-spin-button{
        -webkit-appearance:none;
        margin:0;
    }
}



/* ---------------------------------------------------------
   07.2 MOBILE WORKOUT BUILDER

   Compact workout builder layout.

   • Main fields use two rows
   • Advanced fields open underneath
   • Controls remain touch-friendly
   --------------------------------------------------------- */

@media (max-width:768px){


    /* Compact mobile notation:
       hide × and "on" markers to keep the 2-row grid clean
    */

    #paceClockApp .blockSetTimes,
    #paceClockApp .blockSetOn{
        display:none !important;
    }

    #paceClockApp #screenSetList{max-width:100%;}

    #paceClockApp #screenSetList .setlistTopbar{
        grid-template-columns:56px 1fr 56px;
        margin-bottom:14px !important;
    }

    #paceClockApp #screenSetList h2{
        font-size:24px !important;
        color:#fff !important;
    }

    #paceClockApp .blockSetRow{
        grid-template-columns:
            minmax(54px, .75fr)
            minmax(68px, .95fr)
            minmax(82px, 1.15fr)
            44px;

        gap:8px;
        padding:10px;
        border-radius:18px;
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.12);
    }

    /* First row:
       reps | distance | interval | delete
    */

    #paceClockApp .blockSetReps{
        grid-column:1;
        grid-row:1;
    }

    #paceClockApp .blockSetDist{
        grid-column:2;
        grid-row:1;
    }

    #paceClockApp .blockSetInterval{
        grid-column:3;
        grid-row:1;
    }

    #paceClockApp .blockSetDelete{
        grid-column:4;
        grid-row:1;
    }

    /* Second row */

    #paceClockApp .blockSetStroke{
        grid-column:1;
        grid-row:2;
    }

    #paceClockApp .blockSetNote{
        grid-column:2 / 4;
        grid-row:2;
    }

    #paceClockApp .blockSetMore{
        display:flex;
        grid-column:4;
        grid-row:2;
    }

    /* Advanced fields */

    #paceClockApp .blockSetAdvanced{
        display:none;
        grid-column:1 / -1;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:8px;
        padding-top:2px;
    }

    #paceClockApp .blockSetRow.expanded .blockSetAdvanced{display:grid;}

    #paceClockApp .blockSetEquipment{
        grid-column:1 / -1;
    }

    #paceClockApp .blockSetZone,
    #paceClockApp .blockSetPace,
    #paceClockApp .blockSetTargetTime,
    #paceClockApp .blockSetRest,
    #paceClockApp .blockSetIntensity,
    #paceClockApp .blockSetTags{min-width:0;}

    /*
     Reps: remove native spinner arrows
    */

    #paceClockApp .blockSetReps{
        appearance:textfield;
        -moz-appearance:textfield;
        padding-right:8px;
    }

    #paceClockApp .blockSetReps::-webkit-inner-spin-button,
    #paceClockApp .blockSetReps::-webkit-outer-spin-button{
        -webkit-appearance:none;
        margin:0;
    }
}

/* ---------------------------------------------------------
   07.3 SMALL MOBILE WORKOUT BUILDER

   Additional spacing and sizing adjustments
   for narrow phone screens.
   --------------------------------------------------------- */

@media (max-width:420px){

    #paceClockApp .blockSetRow{
        grid-template-columns:
            minmax(48px, .7fr)
            minmax(60px, .9fr)
            minmax(72px, 1.1fr)
            42px;

        gap:6px;
        padding:8px;
    }

    #paceClockApp .blockSetRow input{
        height:42px;
        min-width:0;
        padding-left:6px;
        padding-right:6px;
        font-size:13px;
    }

    #paceClockApp .blockSetReps{padding-right:6px;}

    #paceClockApp .blockSetDelete,
    #paceClockApp .blockSetMore{
        width:42px;
        height:42px;
        min-width:42px;
    }

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

    #paceClockApp .blockSetTags{
        grid-column:1 / -1;
    }
}



/* =========================================================
   08. ROUND INLINE EDITOR

   Inline round selector displayed inside the status bar.

   Includes:

   • Current round display
   • Previous / Next round controls
   • Inline round value
   ========================================================= */

#paceClockApp .roundSlot{
    display:block;
    min-width:0;
    width:100%;
}

#paceClockApp #roundStatus,
#paceClockApp #roundInlineControl{
    width:100%;
    min-height:42px;
    border-radius:999px;
}

#paceClockApp #roundStatus{
    display:flex;
    align-items:center;
    justify-content:center;
}

#paceClockApp #roundInlineControl{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:6px 10px;
    white-space:nowrap;
    overflow:hidden;
}

#paceClockApp #roundInlineControl .btn{
    flex:0 0 32px;
    width:32px;
    height:32px;
    min-width:32px;
    padding:0;
    border-radius:10px;
}

#paceClockApp #roundInlineValue{
    flex:1 1 auto;
    min-width:0;
    text-align:center;
    font-weight:700;
    line-height:1;
}