/* Basic Reset & Global Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body { /* Global defaults */
    height: 100%; /* Often useful, but be mindful of specific page needs */
    width: 100%;
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 1.1;
    /* DO NOT put overflow: hidden; here globally */
    /* Base background for all pages if not overridden */
    background-color: #f0f2f5; /* Light grey, matching index.html body for consistency */
}

/* Provide fallback message if JS is disabled */
noscript p {
     background-color: #fff;
     color: #b71c1c;
     border: 2px solid #b71c1c;
     border-radius: 5px;
     margin: 20px;
     padding: 15px;
}


/* --- Styles SPECIFIC to the WORKOUT TIMER PAGE --- */
/* We can target the body when on the workout page by adding a class in JS,
   or target the #timer-container directly */

body.workout-page, #timer-container, #finished-screen {
    /* Ensure these take full viewport height for timer page layout */
    height: 100vh; /* Use vh for full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #FFFFFF;
    text-align: center;
    transition: background-color 0.3s ease;
}

body.workout-page {
    overflow: hidden; /* Prevent scrolling ONLY on the workout page itself */
    background-color: #E65100; /* Default for workout page body if timer container doesn't cover all */
}

#timer-container, #finished-screen { /* Shared properties for these full-screen views */
    width: 100%;
    padding: 2vh 3vw; /* Padding inside these views */
}

#timer-container {
    background-color: #E65100; /* Default exercise color */
}

#timer-container.resting {
    background-color: #1565C0; /* Blue */
}

/* Remaining styles for #total-time-section, #exercise-name-section, etc.,
   are for elements *within* #timer-container and do not need to change. */

#total-time-section {
    font-size: clamp(1.5rem, 5vmin, 2.5rem);
    opacity: 0.8;
    flex-shrink: 0;
}

#exercise-name-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 0;
    padding: 1vh 0;
}

#exercise-name {
    font-size: clamp(2.5rem, 10vmin, 6rem);
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.1;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 95%;
}

#next-exercise {
    font-size: clamp(1.3rem, 5vmin, 2.2rem);
    opacity: 0.7;
    max-width: 95%;
    overflow-wrap: break-word;
    word-break: break-word;
}

#current-timer-section {
    width: 100%;
    flex-shrink: 0;
}

#current-timer {
    font-size: clamp(10rem, 35vmin, 22rem);
    font-weight: bold;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 1vh;
    width: 100%;
}

.controls { /* ... (Keep previous production styles for controls) ... */
    display: flex; justify-content: center; align-items: center; width: 100%;
    padding-bottom: 1vh; flex-shrink: 0; gap: 15px;
}
.controls button {
    background:rgba(0,0,0,0.15); border:none; color:#FFFFFF; border-radius:50%;
    width:clamp(35px,8vmin,50px); height:clamp(35px,8vmin,50px);
    font-size:clamp(0.8rem,2.5vmin,1.2rem); cursor:pointer; display:flex;
    justify-content:center; align-items:center; transition:background-color .2s ease;
}
.controls button:active { background:rgba(0,0,0,0.4); transform:scale(0.95); }
#play-pause-btn {
    width:clamp(45px,10vmin,65px); height:clamp(45px,10vmin,65px);
    font-size:clamp(1rem,3.5vmin,1.7rem); background:rgba(0,0,0,0.25);
}

#finished-screen { /* ... (Keep previous production styles) ... */
    justify-content:center; background-color:#2E7D32;
}
#finished-screen h1 { font-size:clamp(2.5rem,10vmin,6rem); margin-bottom:20px; }
.button-link {
    padding:12px 25px; font-size:clamp(1.1rem,4.5vmin,1.6rem); display:inline-block;
    background-color:#fff; color:#333; text-decoration:none; border-radius:8px;
    font-weight:bold; transition:background-color .2s ease,color .2s ease,transform .1s ease;
}
.button-link:hover { background-color:#e0e0e0; }
.button-link:active { transform:scale(0.97); }


/* --- Landscape Styles for WORKOUT PAGE --- */
@media (orientation: landscape) {
    body.workout-page #timer-container, /* Target more specifically */
    body.workout-page #finished-screen {
        padding: 1vh 4vw; /* Reduced vertical padding */
    }

    body.workout-page #total-time-section { font-size: clamp(1.2rem, 4vmin, 2rem); }
    body.workout-page #exercise-name-section { padding: 0.5vh 0; }
    body.workout-page #exercise-name { font-size: clamp(2rem, 8vmin, 5rem); margin-bottom: 2px; }
    body.workout-page #next-exercise { font-size: clamp(1rem, 4vmin, 1.8rem); }
    body.workout-page #current-timer { font-size: clamp(6rem, 30vmin, 16rem); line-height: 1; margin-bottom: 0; }
    body.workout-page .controls { padding-bottom: 0.5vh; }
    body.workout-page #finished-screen h1 { font-size: clamp(2rem, 8vmin, 5rem); }
    body.workout-page .button-link { font-size: clamp(1rem, 4vmin, 1.5rem); }
}


/* --- STYLES FOR INDEX.HTML (from its <style> block, moved here for organization) --- */
/* These apply to the body when it DOES NOT have .workout-page class */
body:not(.workout-page) {
    /* background-color: #f0f2f5; -- This is now default for body */
    /* color: #1c1e21; -- This is now default for body */
    padding: 20px; /* Padding for the index page body */
    /* height: auto; Allow index page to scroll by NOT setting height: 100% */
}

body:not(.workout-page) .container {
    max-width: 700px; margin: 20px auto; background: #ffffff;
    padding: 25px 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
body:not(.workout-page) h1 { text-align:center; color:#1c1e21; font-size:2em; margin-bottom:1.2em; }
body:not(.workout-page) h2 { text-align:center; color:#333; font-size:1.5em; margin-top:1.5em; margin-bottom:1em; border-bottom:1px solid #e0e0e0; padding-bottom:0.5em; }
body:not(.workout-page) ul { list-style:none; padding:0; margin-bottom:2em; }
body:not(.workout-page) li { margin:12px 0; padding:15px; background:#f7f7f7; border:1px solid #ddd; border-radius:6px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
body:not(.workout-page) .routine-link { font-weight:600; color:#0d6efd; flex-grow:1; word-break:break-word; overflow-wrap:break-word; margin-right:15px; font-size:1.1em; }
body:not(.workout-page) .start-button { padding:10px 18px; background-color:#198754; color:white; border:none; border-radius:5px; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background-color .15s ease-in-out,transform .1s ease; flex-shrink:0; font-size:1em; font-weight:500; }
body:not(.workout-page) .start-button:hover { background-color:#157347; }
body:not(.workout-page) .start-button:active { transform:translateY(1px); }
body:not(.workout-page) hr { margin:40px 0; border:0; border-top:1px solid #ccc; }
body:not(.workout-page) form { margin-top:25px; text-align:center; }
body:not(.workout-page) .form-input-group { margin-bottom:20px; }
body:not(.workout-page) .form-input-group label { display:block; margin-bottom:8px; font-weight:500; color:#333; }
body:not(.workout-page) input[type="file"] { display:block; margin:0 auto 15px auto; padding:10px; border:1px solid #ccc; border-radius:4px; max-width:100%; background-color:#fff; }
body:not(.workout-page) input[type="submit"] { padding:12px 30px; background-color:#0d6efd; color:white; border:none; border-radius:5px; cursor:pointer; font-size:1.05rem; font-weight:500; transition:background-color .15s ease-in-out,transform .1s ease; }
body:not(.workout-page) input[type="submit"]:hover { background-color:#0b5ed7; }
body:not(.workout-page) input[type="submit"]:active { transform:translateY(1px); }
body:not(.workout-page) .no-routines { text-align:center; color:#555; margin-top:25px; font-style:italic; }
body:not(.workout-page) .options-group { display:flex; flex-direction:column; align-items:stretch; gap:15px; margin-bottom:25px; padding:15px; border:1px solid #e0e0e0; border-radius:6px; background-color:#f9f9f9; }
body:not(.workout-page) .options-group > div { display:flex; flex-direction:column; align-items:center; }
body:not(.workout-page) .options-group label { margin-bottom:6px; font-weight:500; font-size:0.95em; color:#333; }
body:not(.workout-page) .options-group input[type="number"] { width:100px; padding:10px; border:1px solid #ced4da; border-radius:4px; text-align:center; font-size:1em; -moz-appearance:textfield; }
body:not(.workout-page) .options-group input[type="number"]::-webkit-outer-spin-button,
body:not(.workout-page) .options-group input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

@media (min-width: 480px) {
    body:not(.workout-page) .options-group {
        flex-direction: row; justify-content: space-around; align-items: flex-end;
    }
    body:not(.workout-page) .options-group > div {
        flex-basis: auto;
    }
}

/* Styles for Tap to Begin overlay (from workout.html, moved for organization) */
#autoplay-prompt {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background-color:rgba(0,0,0,0.75); color:white;
    display:flex; /* Controlled by JS */
    flex-direction:column; justify-content:center; align-items:center;
    text-align:center; font-size:clamp(1.5em,5vmin,2em);
    cursor:pointer; z-index:1000; padding:20px;
    opacity:0; visibility:hidden; /* Start hidden, controlled by .visible class */
    transition:opacity .3s ease, visibility 0s linear .3s; /* Fade out and then hide */
}
#autoplay-prompt.visible {
    opacity:1; visibility:visible;
    transition:opacity .3s ease, visibility 0s linear 0s; /* Fade in */
}
#autoplay-prompt p { margin-bottom:25px; font-weight:300; }
#autoplay-prompt button {
    padding:clamp(12px,4vmin,18px) clamp(25px,8vmin,35px);
    font-size:clamp(1em,4vmin,1.3em);
    background-color:#198754; border:none; border-radius:8px;
    color:white; cursor:pointer; transition:background-color .2s ease;
    font-weight:600; box-shadow:0 2px 5px rgba(0,0,0,.2);
}
#autoplay-prompt button:hover { background-color:#157347; }