:root {
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --padding-size: 0.5rem;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.5;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: var(--padding-size);
}

.container {
    width: 100%;
    max-width: 800px;
}

header {
    text-align: center;
    margin-bottom: var(--padding-size);
}

header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: var(--padding-size);
}

header p {
    color: var(--text-muted);
}

.input-section {
    background: var(--card-bg);
    padding: var(--padding-size);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    margin-bottom: var(--padding-size);
}

.input-group {
    margin-bottom: var(--padding-size);
}

.input-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--padding-size);
    color: var(--text-main);
}

.row {
    display: flex;
    gap: 1rem;
}

input, select {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

input:focus, select:focus {
    border-color: var(--primary-color);
}

#distance-input {
    flex: 2;
}

#distance-unit {
    flex: 1;
}

.time-inputs {
    display: flex;
    gap: 0.5rem;
}

.time-field {
    position: relative;
    flex: 1;
}

.time-field input {
    width: 100%;
    padding-right: 2rem;
    text-align: center;
}

.time-field span {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}

button {
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: var(--primary-hover);
}

.results-section {
    animation: fadeIn 0.5s ease-out;
}

.hidden {
    display: none;
}

.vdot-card {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.vdot-card h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.vdot-value {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.predictions-card {
    background: var(--card-bg);
    padding: var(--padding-size);
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.predictions-card h3 {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.predictions-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
    padding: 1rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.predictions-list {
    display: flex;
    flex-direction: column;
}

.prediction-item {
    border-bottom: 1px solid var(--border-color);
}

.prediction-item:last-child {
    border-bottom: none;
}

details {
    width: 100%;
    cursor: default; /* No longer expandable really, or maybe we don't need details? Plan just said render list. Plan kept details? Let's check plan. */
    /* Plan didn't specify removing details, but the requirements changed significantly. 
       The user request was "replace with a table". 
       Let's stick to the div grid layout matching header.
       Since we might not need the splits dropdown anymore?
       Wait, the request REPLACED the predicted race paces. 
       The splits functionality was for race paces. 
       This implies the old splits view is gone or maybe secondary? 
       For now, let's assume we render these as simple rows. 
       If I use details/summary it's fine but no content inside?
       Actually, I'll just make them divs matching the header. 
    */
}

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

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

.summary-content {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
    padding: 1rem;
    align-items: center;
    transition: background-color 0.2s;
}

details[open] .summary-content {
    background-color: #f1f5f9;
}

.summary-content:hover {
    background-color: #f8fafc;
}

.splits-table-container {
    padding: 0 1rem 1rem 1rem;
    background-color: #f1f5f9;
    animation: fadeIn 0.3s ease-out;
}

.splits-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.splits-table th,
.splits-table td {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
}

.splits-table th {
    background-color: #f8fafc;
    font-weight: 600;
    color: var(--text-muted);
}

/* Remove old splits-container styles if no longer used, or keep for safety */
.splits-container {
    display: none;
}

/* If we keep using the same class names in JS, we need to update styles. */
.workout-item {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
    padding: 1rem;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.workout-item:last-child {
    border-bottom: none;
}

.workout-item:hover {
    background-color: #f8fafc;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    body {
        padding: 0;
    }
    
    .time-inputs {
        gap: 0.25rem;
    }
    
    .time-field input {
        padding-right: 1.5rem;
        padding-left: 0.25rem;
    }

    .summary-content {
        font-size: 1rem;
        padding: 0.25rem;
    }

    .splits-table-container {
        padding: 0 0.25rem 0.25rem 0.25rem;
    }

    .splits-table th,
    .splits-table td {
        padding: 0.25rem
    }
}