/* predictor_styles.css */
body { font-family: sans-serif; line-height: 1.5; margin: 1em; }
.predictor-home { font-family: Arial, Helvetica, sans-serif; color: #17212f; background: #f8fafc; }
.predictor-home h1 { color: #123b66; letter-spacing: -.02em; }
h2, h3 { margin-top: 1.5em; margin-bottom: 0.5em; color: #333; }
.predictor-home h2, .predictor-home h3 { color: #123b66; }
hr { margin: 2em 0; border: 0; border-top: 1px solid #ccc; }
select, input[type=submit], input[type=reset] { padding: 8px 12px; margin: 5px 0; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; }
select { min-width: 200px; }
input[type=submit], input[type=reset] { background-color: #4CAF50; color: white; border: none; cursor: pointer; transition: background-color 0.3s ease; }
input[type=submit]:hover, input[type=reset]:hover { background-color: #45a049; }
input[type=submit]:disabled { background-color: #ccc; cursor: not-allowed; }
input[type=reset] { background-color: #aaa; margin-left: 10px;}
input[type=reset]:hover { background-color: #888; }
label { display: inline-block; margin-right: 5px; min-width: 100px; }
footer { margin-top: 3em; font-size: 0.9em; color: #555; border-top: 1px solid #eee; padding-top: 1em; }
footer p { margin: 0.5em 0; }
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }
.error-message { color: #D8000C; background-color: #FFD2D2; border: 1px solid #D8000C; padding: 10px; margin-bottom: 1em; border-radius: 4px; }
.predictor-home .predictor-section { margin-bottom: 1.5rem; padding: 1.25rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(15, 23, 42, .08); }
.predictor-home .predictor-section h2 { margin-top: 0; padding-bottom: .55rem; border-bottom: 2px solid #d5a021; }
.prediction-result { border: 1px solid #ccc; padding: 15px; margin-bottom: 1em; background-color: #f9f9f9; border-radius: 4px; }
.vs-field-result { max-height: 300px; overflow-y: auto; border: 1px solid #eee; padding: 10px; margin-top: 0.5em; font-size: 0.9em; background-color: #fff; line-height: 1.6; }
.archive-links p { line-height: 1.8; }
.form-section { margin-bottom: 2em; padding: 1.5em; border: 1px solid #ddd; border-radius: 5px; background-color: #fefefe;}
.form-section h3 { border-bottom: 1px solid #eee; padding-bottom: 0.3em; margin-top: 0;}
.year-select-label { font-weight: bold; display: block; margin-bottom: 0.2em; }
.form-row { margin-bottom: 1em; }
input[type="radio"] { margin-right: 3px; }
input[type="radio"] + label { margin-right: 15px; cursor: pointer; }
input[type="radio"]:disabled + label { color: #999; cursor: not-allowed; }
#hfa-controls span { font-weight: bold; }
.feature-subnav { margin: 0.15rem 0 0.35rem 1.5rem; padding-left: 1rem; }
.feature-subnav li { margin: 0; }
/* Matchup separator and readable prediction results. */
.vs-separator { text-align: center; font-weight: 700; margin: 0.5rem 0; }
.prediction-result { margin-top: 1.5rem; padding: 1.25rem; color: #17212f; background: #f5f7fa; font-size: 1rem; line-height: 1.7; }
.predictor-home .prediction-result { border-color: #cbd5e1; border-radius: 8px; background: #f1f5f9; box-shadow: 0 3px 12px rgba(15, 23, 42, .08); }
.prediction-result h3 { margin-top: 0; }
.prediction-summary { font-size: 1.125rem; font-weight: 400; }
.prediction-helmets { display: flex; justify-content: flex-start; align-items: center; gap: 1rem; margin: 0.75rem 0 1rem; }
.prediction-helmet { flex: 0 1 160px; min-width: 0; margin: 0; text-align: center; }
.prediction-helmet img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.prediction-helmet figcaption { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.4; overflow-wrap: anywhere; }
.prediction-helmet[data-result-role="winner"] figcaption { font-weight: 700; color: #123b66; }
.prediction-outcome-word { flex: 0 0 auto; color: #123b66; font-size: 1.05rem; font-weight: 700; text-transform: lowercase; }
.prediction-result strong { font-weight: 700; }
.prediction-result .ratings-table { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: 1rem; }
.prediction-result .ratings-table th, .prediction-result .ratings-table td { padding: 0.5rem 0.65rem; text-align: left; border-bottom: 1px solid #d8dee6; }
.prediction-result .ratings-table th { font-weight: 400; color: #364152; }
.prediction-result .disclaimer-note { font-size: 0.95rem; color: #364152; font-style: normal; }
.ratings-status { margin: 0.6rem 0 0; color: #364152; font-size: 0.95rem; font-style: italic; }

/* Keep predictor labels visually attached to their controls. */
.team-selection-area { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; }
.team-column { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; flex: 1 1 18rem; max-width: 34rem; }
.predictor-home .team-column { flex: 0 1 22rem; width: min(100%, 22rem); max-width: 22rem; }
.team-column label { display: block; min-width: 0; margin: .55rem 0 0; color: #263547; font-size: .82rem; font-weight: 700; line-height: 1.2; }
.team-column select { width: 100%; min-width: 0; margin: 0; box-sizing: border-box; background: #fff; }
.predictor-home .team-column select { color: #17212f; border-color: #cbd5e1; }
.team-column select:focus-visible { outline: 2px solid #d5a021; outline-offset: 1px; border-color: #123b66; }
.predictor-home .predictor-form button[type="submit"] { padding: 8px 12px; border: 0; border-radius: 4px; color: #fff; background: #123b66; font: inherit; font-weight: 700; cursor: pointer; transition: background-color .2s ease; }
.predictor-home .predictor-form button[type="submit"]:hover { background: #174d82; }
.team-selection-area .vs-separator { align-self: center; margin: 0; padding: 0 .25rem .55rem; }
.team-selection-area.single-team { display: block; }
.options-area { margin: 1rem 0; }
.rating-system-area { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.rating-system-area label { color: #263547; font-size: .9rem; font-weight: 700; }
.rating-system-area select { min-width: 12rem; background: #fff; color: #17212f; border-color: #cbd5e1; }
.rating-system-note { color: #526173; font-size: .85rem; }

@media (max-width: 700px) {
    .team-selection-area { display: grid; grid-template-columns: 1fr; gap: .5rem; }
    .team-column { max-width: none; }
    .predictor-home .team-column { width: 100%; max-width: none; }
    .team-selection-area .vs-separator { padding: .2rem 0; }
}
.sectional-outlook { margin-top: 2rem; }
.sectional-outlook nav { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.sectional-probabilities { border-top: 1px solid #d8dee6; padding: 1rem 0; scroll-margin-top: 1rem; }
.sectional-probabilities h3 { text-align: left; }
.sectional-probabilities li { line-height: 1.8; overflow-wrap: anywhere; }