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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    color: #222;
    background: #f5f4f0;
    padding: 2rem 1rem;
}

.container {
    max-width: 720px;
    margin: 0 auto;
}

h1 { font-size: 1.8rem; margin-bottom: 0.25rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; color: #444; }
h3 { font-size: 1rem; margin-bottom: 0.25rem; }

.tagline { color: #666; margin-bottom: 2rem; }

/* Dev controls */
.dev-tier-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff8e1;
    border: 1px dashed #f0a500;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
}
.dev-label {
    font-weight: 700;
    color: #f0a500;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}
@media print { .dev-tier-toggle { display: none; } }

/* Form */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field.full { grid-column: 1 / -1; }

.form-section-header {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2d6a4f;
    border-bottom: 1px solid #d0e8da;
    padding-bottom: 0.35rem;
    margin-top: 0.5rem;
}

label { font-size: 0.85rem; font-weight: 600; color: #444; }
label .hint { font-weight: 400; color: #888; }

input, select {
    padding: 0.5rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    background: white;
}

.radio-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.radio-group label { font-weight: 400; font-size: 1rem; display: flex; align-items: center; gap: 0.3rem; color: #222; }

.form-message {
    grid-column: 1 / -1;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
    display: none;
}
.form-message.error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
.form-message.warning {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
}

button[type="submit"] {
    margin-top: 1rem;
    padding: 0.75rem 2rem;
    background: #2d6a4f;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
button[type="submit"]:hover { background: #245a42; }

/* Base-building phase block */
.base-phase {
    background: #f0f7f4;
    border: 1px solid #b7d9c8;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.base-phase-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.base-phase-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #2d6a4f;
}
.base-phase-meta {
    font-size: 0.8rem;
    color: #666;
}
.base-phase p {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 0.6rem;
}
.base-phase p:last-child { margin-bottom: 0; }

/* Plan display */
.plan-header { margin-bottom: 1.25rem; }

.token-info {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 0.4rem;
}

@media print { .token-info { display: none; } }

.plan-summary {
    background: #eef6f1;
    border-left: 4px solid #2d6a4f;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.6;
}
.plan-header p { color: #555; margin-top: 0.25rem; }

.week {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e0ddd6;
}

.week-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.week-total { font-size: 0.85rem; color: #888; }

.workout { padding: 0.6rem 0; border-bottom: 1px solid #f0ede8; }
.workout:last-child { border-bottom: none; }

.workout-meta {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    margin-bottom: 0.2rem;
}

.workout-date { font-size: 0.8rem; color: #999; min-width: 80px; }
.workout-name { font-weight: 600; }
.workout-duration { font-size: 0.85rem; color: #666; }
.workout-desc { font-size: 0.9rem; color: #444; line-height: 1.5; }

.workout.rest-day { border-bottom-color: #f0ede8; }
.workout.rest-day .workout-date { color: #aaa; }
.workout.rest-day .workout-name { font-weight: 400; color: #888; font-style: italic; }
.workout.rest-day .workout-desc { color: #999; font-size: 0.85rem; }

.workout.race-day { background: #eef6f1; border-radius: 6px; padding: 0.6rem 0.75rem; margin: 0.25rem -0.25rem; border-bottom: none; }
.workout.race-day .workout-name { color: #2d6a4f; font-size: 1.05rem; }
.workout.race-day .workout-date { color: #2d6a4f; }
.workout.race-day .workout-duration { color: #2d6a4f; font-weight: 600; }

.print-btn {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.6rem 1.5rem;
    background: white;
    color: #2d6a4f;
    border: 2px solid #2d6a4f;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

@media print {
    body { background: white; padding: 0; }
    .print-btn, button { display: none; }
    .week { border: 1px solid #ccc; break-inside: avoid; }
}

@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .field.full { grid-column: 1; }
}