/* ==============================================
   V3RSUS Predictor — editorial
   piggybacks on home.css for foundation
   (mast, hero, spread, prose, chart, animations)
   ============================================== */

:root {
    --f1-color: var(--accent);
    --f1-soft: rgba(138, 31, 31, 0.08);
    --f2-color: var(--indigo);
    --f2-soft: rgba(26, 42, 71, 0.08);
}

.red-text { color: var(--accent); }
.blue-text { color: var(--indigo); }
.red-fill { background: var(--accent); }
.blue-fill { background: var(--indigo); }


/* ============================================
   HERO + PREDICTION DISPLAY
   ============================================ */
.predict-hero { padding-bottom: 2rem; }


/* ---- PREDICTION DISPLAY ---- */
.prediction {
    margin: 2rem 0 0;
    padding: 2rem 0 1.75rem;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    position: relative;
}
.prediction.idle { display: none; }

.pm-matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: end;
    margin-bottom: 1.75rem;
}

.pm-side.l { text-align: left; }
.pm-side.r { text-align: right; }

.pm-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.7rem;
}

.pm-name {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.4rem;
}
.pm-side.l .pm-name { color: var(--accent); }
.pm-side.r .pm-name { color: var(--indigo); }

.pm-pct {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(3.6rem, 7.5vw, 6rem);
    line-height: 0.88;
    letter-spacing: -0.045em;
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
    margin-bottom: 0.35rem;
}

.pm-odds {
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-mid);
    padding: 0.25rem 0.5rem;
    display: inline-block;
    border: 1px solid var(--rule);
    background: var(--paper-warm);
}
.pm-side.l .pm-odds { margin-left: 0; }
.pm-side.r .pm-odds { margin-right: 0; }

.pm-vs {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    color: var(--accent);
    line-height: 1;
    padding-bottom: 0.8rem;
}

.pm-bar {
    display: flex;
    height: 3px;
    background: var(--rule);
    margin: 1.75rem 0 1.75rem;
    overflow: hidden;
}
.pm-fill.l {
    background: var(--accent);
    height: 100%;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.pm-fill.r {
    background: var(--indigo);
    height: 100%;
    flex: 1;
}

.pm-winner {
    text-align: center;
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--ink-mid);
}
.pm-winner em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    margin: 0 0.2em;
}
.pm-winner .arr {
    color: var(--ink-faint);
    font-style: normal;
    font-size: 0.7em;
    transition: color 0.25s, transform 0.25s;
    display: inline-block;
    margin: 0 0.4rem;
}
.pm-winner .arr.active {
    color: var(--accent);
    transform: scale(1.3);
}
#winner-arrow-r.active { color: var(--indigo); }


/* ---- LOADING OVERLAY (active during prediction fetch) ---- */
.pm-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 5;
}
.prediction.loading .pm-loading {
    opacity: 1;
    pointer-events: auto;
}
.prediction.loading > .pm-matchup,
.prediction.loading > .pm-bar,
.prediction.loading > .pm-winner {
    opacity: 0.08;
    transition: opacity 0.25s ease;
    filter: blur(1px);
}

.pm-loading-inner {
    text-align: center;
    max-width: 600px;
    padding: 2rem 1rem;
}

.pm-loading-orbit {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    height: 14px;
    margin: 0 auto 1.5rem;
}
.pm-loading-orbit span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    animation: dotPulse 1.3s infinite ease-in-out;
}
.pm-loading-orbit span:nth-child(1) { animation-delay: 0s; }
.pm-loading-orbit span:nth-child(2) { animation-delay: 0.12s; background: var(--indigo); }
.pm-loading-orbit span:nth-child(3) { animation-delay: 0.24s; background: var(--ink); }
.pm-loading-orbit span:nth-child(4) { animation-delay: 0.36s; background: var(--indigo); }
.pm-loading-orbit span:nth-child(5) { animation-delay: 0.48s; background: var(--accent); }

@keyframes dotPulse {
    0%, 100% { transform: scale(0.4); opacity: 0.25; }
    50%      { transform: scale(1.15); opacity: 1; }
}

.pm-loading-label {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}

.pm-loading-status {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    min-height: 2.4rem;
    animation: statusTick 0.2s ease;
}

@keyframes statusTick {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Re-trigger animation on every text update by forcing reflow via content hash */
.pm-loading-status {
    animation: statusTick 0.25s ease both;
}

.pm-loading-sub {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mid);
    margin-top: 0.85rem;
}


/* ---- WINNER LINE ---- */
.pm-winner-text em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    margin: 0 0.15em;
}


/* ---- FORM ---- */
.form {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 2.5rem;
    padding: 1.75rem 0 0.5rem;
}
.form-tag {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-top: 1.25rem;
}
.form-right { min-width: 0; }

.form-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: end;
}
.form-field { position: relative; min-width: 0; }
.form-field label {
    display: block;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mid);
    margin-bottom: 0.85rem;
}
.form-field .input-wrap { position: relative; }
.form-field input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink);
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    letter-spacing: -0.02em;
    color: var(--ink);
    padding: 0.2rem 0 0.6rem;
    outline: none;
    transition: border-bottom-color 0.2s, border-bottom-width 0.2s;
    border-radius: 0;
}
.form-field input::placeholder {
    font-style: italic;
    color: var(--ink-faint);
}
.form-field input:focus {
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.55rem;
}

.form-vs {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--accent);
    letter-spacing: 0;
    padding-bottom: 0.85rem;
    white-space: nowrap;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.run-btn {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--accent);
    border: 1px solid var(--accent);
    cursor: pointer;
    padding: 0.95rem 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 1;
    border-radius: 2px;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.2s;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.run-btn::after {
    content: '\2192';
    font-family: var(--sans);
    font-size: 1em;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.run-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.run-btn:hover::after { transform: translateX(4px); }
.run-btn:active { transform: translateY(1px); }
.run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.run-btn:disabled::after { transform: none; }
.run-btn .loader {
    margin-left: 0.5rem;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--paper);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}
.run-btn .btn-text.hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-hint {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--ink-mid);
    text-align: right;
}
.form-hint strong {
    color: var(--ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}


/* ---- AUTOCOMPLETE ---- */
.autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--paper-warm);
    border: 1px solid var(--ink);
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.18);
}
.autocomplete-list.hidden { display: none; }
.autocomplete-list li {
    padding: 0.7rem 1rem;
    font-family: var(--display);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    border-bottom: 1px solid var(--rule-soft);
    cursor: pointer;
    transition: background 0.1s, color 0.1s, padding-left 0.15s;
}
.autocomplete-list li:last-child { border-bottom: none; }
.autocomplete-list li:hover,
.autocomplete-list li.active {
    background: var(--accent);
    color: var(--paper);
    padding-left: 1.35rem;
}
.autocomplete-list li strong {
    color: var(--accent);
    font-weight: 400;
    font-style: italic;
}
.autocomplete-list li:hover strong,
.autocomplete-list li.active strong {
    color: var(--paper);
}


/* ============================================
   RESULT LAYOUT — sticky rails + main reasoning
   ============================================ */
.hidden { display: none !important; }

.results {
    border-top: 1px solid var(--ink);
    padding: 2rem 0 4rem;
}

.results-layout {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 2.5rem;
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 3rem;
    align-items: start;
}

.main-reasoning {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.card-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    border-top: 1px solid var(--ink);
}
.card-pair > .card {
    border-top: none;
    padding-top: 1.75rem;
}
.card-pair > .card + .card {
    border-left: 1px solid var(--rule);
    padding-left: 1.75rem;
}

.card {
    padding: 1.75rem 0 1.75rem;
    background: transparent;
    border: none;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.main-reasoning > .card:first-child {
    border-top: none;
    padding-top: 0;
}

.card.dark {
    background: var(--ink);
    color: var(--paper);
    border-top: none;
    padding: 1.75rem 1.75rem 2rem;
    margin-top: 1.75rem;
}
.card-pair .card.dark {
    margin-top: 0;
    padding: 1.75rem 1.75rem 2rem;
}
.card.strip { padding-top: 1.5rem; padding-bottom: 1.75rem; }


/* ============================================
   CORNER RAILS (sticky)
   ============================================ */
.corner-rail {
    position: sticky;
    top: 1.25rem;
    align-self: start;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}
.corner-rail::-webkit-scrollbar { width: 3px; }
.corner-rail::-webkit-scrollbar-track { background: transparent; }
.corner-rail::-webkit-scrollbar-thumb { background: var(--rule); }

.corner-rail.red {
    border-left: 3px solid var(--accent);
    padding-left: 1.25rem;
}
.corner-rail.blue {
    border-right: 3px solid var(--indigo);
    padding-right: 1.25rem;
    text-align: right;
}

.rail-corner {
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-mid);
    margin-bottom: 0.55rem;
}
.corner-rail.red .rail-corner { color: var(--accent); }
.corner-rail.blue .rail-corner { color: var(--indigo); }

.rail-name {
    font-family: var(--display);
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 0.5rem;
    word-break: break-word;
}
.corner-rail.red .rail-name { color: var(--accent); }
.corner-rail.blue .rail-name { color: var(--indigo); }

.rail-record {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.75rem;
}

.rail-tags {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.corner-rail.blue .rail-tags { justify-content: flex-end; }

.rail-divider {
    height: 1px;
    background: var(--rule);
    margin: 1.5rem 0 1.25rem;
}

.rail-kicker {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.85rem;
}

.rail-stats {
    display: flex !important;
    flex-direction: column;
    gap: 0;
}
.rail-stats .stat-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.corner-rail.blue .rail-stats .stat-item {
    grid-template-columns: auto 1fr;
}
.corner-rail.blue .rail-stats .stat-label { order: 2; text-align: right; }
.corner-rail.blue .rail-stats .stat-value { order: 1; text-align: left; }
.rail-stats .stat-label {
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mid);
}
.rail-stats .stat-value {
    font-family: var(--display);
    font-size: 0.95rem;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.card-head {
    padding-bottom: 0.95rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--rule);
}
.card.dark .card-head { border-bottom-color: rgba(239,234,221,0.2); }

.card-num {
    display: block;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.card.dark .card-num { color: var(--paper); opacity: 0.65; }

.card-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.35rem;
}
.card.dark .card-title { color: var(--paper); }
.card-title em { font-style: italic; color: var(--accent); }

.card-sub {
    display: block;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mid);
}
.card.dark .card-sub { color: rgba(239,234,221,0.55); }

/* Fighter column header inside half-width cards */

/* Fighter-column header (Red / Blue labels above bars) */
.ch {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 0 0.55rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.ch .l {
    color: var(--accent);
    font-weight: 500;
}
.ch .r {
    color: var(--indigo);
    font-weight: 500;
}


/* ============================================
   A.1 — DOSSIER
   ============================================ */
.dossier {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}
.dossier-head {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
}
.dossier-corner {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.35rem;
}
.dossier-name {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}
.dossier-record {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--ink-mid);
    margin-bottom: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.dossier-tags {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.meta-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mid);
}
.meta-tag:empty { display: none; }

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}
.stat-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.stat-label {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mid);
}
.stat-value {
    font-family: var(--display);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}


/* ============================================
   A.2 — HEAD TO HEAD (cmp-row)
   ============================================ */
.comparison-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3rem;
}

.cmp-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    align-items: center;
    gap: 1.25rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.cmp-row:last-child { border-bottom: 1px solid var(--rule-soft); }

.cmp-val {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.65rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.cmp-val.left { text-align: right; }
.cmp-val.right { text-align: left; }
.cmp-val.advantage { color: var(--ink); font-size: 1.95rem; }
.cmp-val.left.advantage { color: var(--accent); }
.cmp-val.right.advantage { color: var(--indigo); }

.cmp-center {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}
.cmp-label {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mid);
}
.cmp-bar-wrap {
    display: flex;
    height: 2px;
    width: 100%;
    max-width: 260px;
    background: var(--rule);
    overflow: hidden;
}
.cmp-bar-left { background: var(--accent); opacity: 0.35; height: 100%; }
.cmp-bar-right { background: var(--indigo); opacity: 0.35; height: 100%; }
.cmp-bar-left.lead { opacity: 1; }
.cmp-bar-right.lead { opacity: 1; }


/* ============================================
   A.3 — FEATURE IMPORTANCE (factor-row)
   ============================================ */
.factors-list, .shap-wall {
    display: flex;
    flex-direction: column;
    counter-reset: factor;
}

.factor-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 1rem;
    row-gap: 0;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule-soft);
    counter-increment: factor;
}
.card.dark .factor-row { border-bottom-color: rgba(239, 234, 221, 0.15); }
.factor-row:last-child { border-bottom: none; }
.factor-row::before {
    content: counter(factor, upper-roman);
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    font-family: var(--display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--ink);
    opacity: 0.55;
    line-height: 1;
    padding-top: 0.2rem;
}
.card.dark .factor-row::before { color: var(--paper); }
.factor-row > * {
    grid-column: 2;
    min-width: 0;
}

.factor-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.factor-name {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.card.dark .factor-name { color: var(--paper); }
.factor-cat {
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mid) !important;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--rule);
    background: transparent !important;
    border-radius: 0;
    flex-shrink: 0;
}
.card.dark .factor-cat {
    color: rgba(239, 234, 221, 0.6) !important;
    border-color: rgba(239, 234, 221, 0.25);
}

.factor-bottom {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    gap: 0.75rem;
    align-items: center;
}
.factor-val {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink-mid);
    text-align: left;
}
.card.dark .factor-val { color: rgba(239, 234, 221, 0.7); }
.factor-val.red-text { color: var(--accent); }
.factor-val.blue-text { color: var(--indigo); }
.card.dark .factor-val.red-text { color: var(--accent-soft); }
.card.dark .factor-val.blue-text { color: #7f94b8; }
.factor-val + .factor-bar-wrap + .factor-val { text-align: right; }

.factor-bar-wrap {
    height: 2px;
    background: var(--rule);
    overflow: hidden;
}
.card.dark .factor-bar-wrap { background: rgba(239, 234, 221, 0.15); }
.factor-bar {
    height: 100%;
    transition: width 0.6s ease;
}
.factor-bar.red-fill { background: var(--accent); }
.factor-bar.blue-fill { background: var(--indigo); }
.card.dark .factor-bar.red-fill { background: var(--accent-soft); }
.card.dark .factor-bar.blue-fill { background: #7f94b8; }

.factor-adv {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    margin-top: 0.45rem;
    color: var(--ink-mid);
}
.card.dark .factor-adv { color: rgba(239, 234, 221, 0.6); }
.factor-adv.red-text { color: var(--accent); }
.factor-adv.blue-text { color: var(--indigo); }
.card.dark .factor-adv.red-text { color: var(--accent-soft); }
.card.dark .factor-adv.blue-text { color: #7f94b8; }


/* ============================================
   A.4 — EDGE ANALYSIS (edge-row)
   ============================================ */
.edge-list, .edge-wall {
    display: flex;
    flex-direction: column;
}
.edge-row {
    display: grid;
    grid-template-columns: 110px 1fr 44px;
    gap: 0.85rem;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.edge-row:last-child { border-bottom: none; }

.edge-label {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}
.edge-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
    transform: translateY(-1px);
    background: var(--accent) !important;
}
.edge-name {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.edge-bar-container {
    position: relative;
    height: 14px;
}
.edge-bar-track {
    display: flex;
    height: 2px;
    background: var(--rule);
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    transform: translateY(-50%);
    overflow: hidden;
}
.edge-fill-left { background: var(--accent); height: 100%; opacity: 0.85; }
.edge-fill-right { background: var(--indigo); height: 100%; opacity: 0.85; }
.edge-midline {
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--ink);
    transform: translateX(-50%);
}

.edge-score {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    text-align: right;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.edge-score.red-text { color: var(--accent); }
.edge-score.blue-text { color: var(--indigo); }


/* ============================================
   A.5 — MODEL CONSENSUS (model-row)
   ============================================ */
.models-list, .model-stack { display: flex; flex-direction: column; }

.model-row {
    display: grid;
    grid-template-columns: 120px 1fr 74px;
    gap: 0.85rem;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.model-row:last-child { border-bottom: none; }

.model-row.model-ensemble {
    padding: 0.75rem 0.85rem;
    margin-top: 0.4rem;
    background: var(--paper);
    border-left: 2px solid var(--accent);
    border-bottom: none;
}

.model-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.model-name {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--ink);
}
.model-ensemble .model-name {
    font-style: italic;
    color: var(--accent);
}
.model-acc {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: var(--ink-mid);
}

.model-bar-wrap { display: flex; align-items: center; }
.model-bar {
    flex: 1;
    display: flex;
    height: 2px;
    background: var(--rule);
    overflow: hidden;
}
.model-fill {
    height: 100%;
    transition: width 0.6s ease;
}
.model-fill.red-fill { background: var(--accent); }
.model-fill.blue-fill { background: var(--indigo); }

.model-probs {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.model-prob.red-text { color: var(--accent); }
.model-prob.blue-text { color: var(--indigo); }


/* ============================================
   A.6 — WIN METHODS
   ============================================ */
.method-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 0.25rem 0;
}
.method-col { display: flex; flex-direction: column; gap: 0.75rem; }
.method-labels { display: flex; flex-direction: column; gap: 0.75rem; text-align: center; }
.method-row-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mid);
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    white-space: nowrap;
}
.method-bar-wrap { display: flex; align-items: center; height: 24px; }
.method-bar-wrap.left { justify-content: flex-end; }
.method-bar-wrap.right { justify-content: flex-start; }
.method-bar {
    height: 100%;
    display: flex;
    align-items: center;
    min-width: 38px;
    transition: width 0.6s ease;
}
.method-bar.red-bar {
    background: var(--accent);
    justify-content: flex-end;
    padding-right: 0.7rem;
}
.method-bar.blue-bar {
    background: var(--indigo);
    justify-content: flex-start;
    padding-left: 0.7rem;
}
.method-count {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}


/* ============================================
   A.8 — SIMILAR HISTORICAL MATCHUPS (compact list for half-width card)
   ============================================ */
.hist-list { display: flex; flex-direction: column; }

.hist-row {
    display: grid;
    grid-template-columns: 1.6fr 70px 24px;
    gap: 0.9rem;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.hist-row:last-child { border-bottom: none; }

.hist-matchup {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hist-matchup em { font-style: italic; }
.hist-matchup small {
    display: block;
    font-family: var(--mono);
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    color: var(--ink-mid);
    margin-top: 0.25rem;
    font-style: normal;
    text-transform: uppercase;
}

.hist-verdict {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.hist-status {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}
.hist-row.right .hist-status { color: var(--olive); }
.hist-row.wrong .hist-status { color: var(--accent); }
.hist-method {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mid);
    text-align: right;
    display: none;
}


/* ============================================
   A.9 — DIRECT H2H (history-row, JS)
   ============================================ */
.history-list { display: flex; flex-direction: column; }

.history-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    align-items: baseline;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.history-row:last-child { border-bottom: 1px solid var(--rule); }

.history-date {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--ink-mid);
}
.history-result {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.history-winner {
    font-style: italic;
    color: var(--ink);
}
.history-winner.red-text { color: var(--accent); }
.history-winner.blue-text { color: var(--indigo); }
.history-method {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mid);
    font-style: normal;
}


/* ============================================
   SCROLL ANIMATION — extra staggers for JS-populated rows
   ============================================ */

.reveal.visible .cmp-row,
.reveal.visible .factor-row,
.reveal.visible .edge-row,
.reveal.visible .model-row,
.reveal.visible .hist-row,
.reveal.visible .history-row {
    animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal.visible .cmp-row:nth-child(1),
.reveal.visible .factor-row:nth-child(1),
.reveal.visible .edge-row:nth-child(1),
.reveal.visible .model-row:nth-child(1),
.reveal.visible .hist-row:nth-child(1),
.reveal.visible .history-row:nth-child(1) { animation-delay: 0.45s; }
.reveal.visible .cmp-row:nth-child(2),
.reveal.visible .factor-row:nth-child(2),
.reveal.visible .edge-row:nth-child(2),
.reveal.visible .model-row:nth-child(2),
.reveal.visible .hist-row:nth-child(2),
.reveal.visible .history-row:nth-child(2) { animation-delay: 0.53s; }
.reveal.visible .cmp-row:nth-child(3),
.reveal.visible .factor-row:nth-child(3),
.reveal.visible .edge-row:nth-child(3),
.reveal.visible .model-row:nth-child(3),
.reveal.visible .hist-row:nth-child(3),
.reveal.visible .history-row:nth-child(3) { animation-delay: 0.61s; }
.reveal.visible .cmp-row:nth-child(4),
.reveal.visible .factor-row:nth-child(4),
.reveal.visible .edge-row:nth-child(4),
.reveal.visible .model-row:nth-child(4),
.reveal.visible .hist-row:nth-child(4),
.reveal.visible .history-row:nth-child(4) { animation-delay: 0.69s; }
.reveal.visible .cmp-row:nth-child(5),
.reveal.visible .factor-row:nth-child(5),
.reveal.visible .edge-row:nth-child(5),
.reveal.visible .model-row:nth-child(5),
.reveal.visible .hist-row:nth-child(5),
.reveal.visible .history-row:nth-child(5) { animation-delay: 0.77s; }
.reveal.visible .cmp-row:nth-child(n+6),
.reveal.visible .factor-row:nth-child(n+6),
.reveal.visible .model-row:nth-child(n+6),
.reveal.visible .history-row:nth-child(n+6) { animation-delay: 0.85s; }

.reveal.visible .dossier { animation: fadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both; }
.reveal.visible .method-grid { animation: fadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.reveal.visible .ch { animation: fadeUp 0.45s ease 0.3s both; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* Hero poster load animations */
.predict-hero .prediction { animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.predict-hero .form       { animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both; }


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1180px) {
    .results-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .corner-rail {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-bottom: 0;
    }
    .corner-rail.red {
        border-left: none;
        border-top: 3px solid var(--accent);
        padding-left: 0;
        padding-top: 1.25rem;
    }
    .corner-rail.blue {
        border-right: none;
        border-top: 3px solid var(--indigo);
        padding-right: 0;
        padding-top: 1.25rem;
        text-align: left;
    }
    .corner-rail.blue .rail-tags { justify-content: flex-start; }
    .corner-rail.blue .rail-stats .stat-item {
        grid-template-columns: 1fr auto;
    }
    .corner-rail.blue .rail-stats .stat-label { order: 0; text-align: left; }
    .corner-rail.blue .rail-stats .stat-value { order: 0; text-align: right; }
    .rail-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0 1.5rem;
    }

    /* Order: red rail first, then main, then blue rail */
    .corner-rail.red { order: 1; }
    .main-reasoning { order: 2; }
    .corner-rail.blue { order: 3; }

    .card-pair { grid-template-columns: 1fr; }
    .comparison-rows { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 920px) {
    .prediction { padding: 2rem 0 1.75rem; }
    .pm-matchup { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
    .pm-side.l, .pm-side.r { text-align: center; }
    .pm-vs { order: 0; padding-bottom: 0; font-size: 1.2rem; }

    .form { grid-template-columns: 1fr; gap: 1.25rem; }
    .form-tag { padding-top: 0; }
    .form-inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .form-vs { text-align: center; padding: 0; }
    .form-actions { flex-direction: column; align-items: flex-start; }
    .form-hint { text-align: left; }

    .dossier { grid-template-columns: 1fr; gap: 2rem; }
    .stat-grid { grid-template-columns: 1fr; }

    .results-layout { padding: 0 1.5rem; gap: 1.5rem; }
    .card { padding: 1.25rem 1.25rem 1.5rem; }
    .rail-stats { grid-template-columns: 1fr !important; }

    .cmp-row { grid-template-columns: 1fr 50px 1fr; gap: 0.5rem; }
    .cmp-val { font-size: 1.15rem; }
    .cmp-val.advantage { font-size: 1.4rem; }
    .cmp-bar-wrap { display: none; }
    .cmp-label { font-size: 0.5rem; }

    .factor-row { grid-template-columns: 1fr; gap: 0.75rem; }
    .factor-row > * { grid-column: auto; }
    .factor-row::before { grid-column: auto; grid-row: auto; margin-bottom: -0.5rem; }
    .factor-top { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .factor-bottom { grid-template-columns: 50px 1fr 50px; gap: 0.5rem; }

    .edge-row { grid-template-columns: 1fr 50px; gap: 0.75rem; }
    .edge-row .edge-bar-container { grid-column: 1 / -1; }

    .model-row { grid-template-columns: 1fr 70px; gap: 0.5rem; }
    .model-row .model-bar-wrap { grid-column: 1 / -1; }
    .model-row.model-ensemble { margin: 0.35rem 0; padding: 0.85rem 0.85rem; }

    .hist-row { grid-template-columns: 1fr; gap: 0.25rem; }
    .hist-verdict, .hist-status, .hist-method { text-align: left; }

    .history-row { grid-template-columns: 1fr; gap: 0.35rem; }

    .method-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .method-labels { flex-direction: row; gap: 0.5rem; flex-wrap: wrap; }
    .method-col { flex-direction: row; gap: 0.3rem; flex-wrap: wrap; }
    .method-bar-wrap.left, .method-bar-wrap.right { justify-content: flex-start; }
}

.predict-hero .hero-title { font-size: clamp(3.2rem, 7vw, 5.75rem); }
.predict-hero .hero-standfirst { max-width: 38ch; }
.predict-hero .form, .predict-hero .prediction { animation: none; }
.form-status, .form-error, .section-note, .profile-date {
    font-family: var(--sans);
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: normal;
    color: var(--ink-mid);
}
.form-error { color: var(--accent); margin-top: 1rem; }
.form-status:empty { display: none; }
.form-status { margin-top: 1rem; }
.retry-btn { margin-top: 0.75rem; padding: 0.6rem 0; font: inherit; color: var(--accent); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.section-note { margin: 0 0 1rem; }
.models-list + .section-note, .edge-list + .section-note { margin: 1rem 0 0; }
.profile-date { font-size: 0.75rem; margin: 0.5rem 0 1rem; }
.prediction { scroll-margin-top: 5rem; }
.pm-odds { border: 0; padding: 0; background: none; }
.pm-odds small { font: 0.7rem var(--sans); letter-spacing: normal; color: var(--ink-mid); }
.corner-rail { top: 5rem; max-height: calc(100vh - 6rem); }
.card-pair { grid-template-columns: 1fr; }
.card-pair > .card + .card { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
.card-sub { letter-spacing: 0.08em; line-height: 1.6; }
.reveal.visible .cmp-row, .reveal.visible .factor-row, .reveal.visible .edge-row,
.reveal.visible .model-row, .reveal.visible .history-row { animation: none; }
@media (max-width: 1180px) {
    .results-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .corner-rail { max-height: none; }
    .corner-rail.red { order: 1; }
    .corner-rail.blue { order: 2; }
    .main-reasoning { order: 3; grid-column: 1 / -1; }
    .rail-stats { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
    .pm-matchup { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; }
    .pm-side.l { text-align: left; }
    .pm-side.r { text-align: right; }
    .pm-label { letter-spacing: 0.06em; line-height: 1.5; }
    .pm-pct { font-size: clamp(2.5rem, 9vw, 4.5rem); }
    .pm-odds small { display: block; margin-top: 0.4rem; }
    .card { padding-left: 0; padding-right: 0; }
    .method-grid { grid-template-columns: 1fr auto 1fr; gap: 0.5rem; }
    .method-col, .method-labels { flex-direction: column; flex-wrap: nowrap; }
    .method-bar-wrap.left { justify-content: flex-end; }
    .history-result { flex-wrap: wrap; gap: 0.25rem; }
    .rail-name { font-size: 1.6rem; overflow-wrap: anywhere; }
    .rail-stats .stat-item { gap: 0.25rem; }
    .rail-stats .stat-label { font-size: 0.55rem; letter-spacing: 0; }
    .rail-stats .stat-value { font-size: 0.95rem; }
    .form-inner { gap: 0.75rem; }
    .form-vs { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pm-fill, .method-bar { transition: none; }
}
.imputed-note { display: block; color: var(--ink-mid); font: 0.75rem/1.5 var(--sans); margin-top: 0.35rem; }