.hero-prediction-title-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hero-prediction-icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 6px;
    flex: 0 0 54px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-prediction-title-row h2 {
    margin-top: 0;
}

.hero-prediction-feature-grid {
    grid-template-columns: minmax(0, 1fr);
}

.hero-prediction-table td:first-child,
.hero-patch-table td:nth-child(2) {
    display: table-cell;
}

.hero-prediction-table td:first-child strong,
.hero-patch-table td:nth-child(2) strong {
    display: block;
}

.hero-performance-table th:nth-child(1),
.hero-performance-table td:nth-child(1) {
    width: 24%;
}

.hero-performance-table th:nth-child(2),
.hero-performance-table td:nth-child(2) {
    width: 22%;
}

.hero-performance-table th:nth-child(3),
.hero-performance-table td:nth-child(3) {
    width: 54%;
}

.hero-prediction-table th[data-sort] {
    cursor: pointer;
    user-select: none;
}

.hero-prediction-table th[data-sort]:hover {
    opacity: 0.75;
}

.hero-prediction-table th.sort-asc::after {
    content: " ↑";
    font-size: 0.8em;
}

.hero-prediction-table th.sort-desc::after {
    content: " ↓";
    font-size: 0.8em;
}

.hero-prediction-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 1rem;
}

.hero-prediction-filter-label {
    font-size: 0.82em;
    opacity: 0.65;
}

.hero-prediction-filter-btn {
    padding: 0.2rem 0.65rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 0.82em;
    opacity: 0.55;
}

.hero-prediction-filter-btn.active {
    opacity: 1;
    font-weight: 700;
}

.hero-stage-summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 1rem;
}

.hero-stage-number {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #64d5ba;
    background: #202525;
    color: #8cf7d8;
    font-weight: 700;
}

.hero-stage-summary h3 {
    margin: 0;
}

.hero-stage-probability {
    margin-top: 0.2rem;
    color: #8cf7d8;
    font-size: 1.65rem;
    font-weight: 700;
}

.hero-stage-summary p {
    margin-bottom: 0;
}

.hero-model-warning {
    border-left-color: #d89b52;
}

.hero-readiness-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.hero-readiness-grid > div {
    min-width: 0;
    padding: 14px;
    background: rgba(24, 24, 28, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-readiness-grid strong,
.hero-readiness-grid span {
    display: block;
}

.hero-readiness-grid strong {
    margin-bottom: 4px;
    color: #8cf7d8;
    font-size: 1.45rem;
}

.hero-readiness-grid span {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.35;
}

.hero-readiness-table th:first-child,
.hero-readiness-table td:first-child {
    width: 75%;
}

.hero-readiness-table th:nth-child(2),
.hero-readiness-table td:nth-child(2) {
    width: 25%;
}

.hero-prediction-library {
    display: grid;
    gap: 10px;
}

.hero-prediction-library-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-width: 0;
    padding: 13px 15px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(24, 24, 28, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-prediction-library-card[hidden] {
    display: none;
}

.hero-prediction-library-card img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
}

.hero-prediction-library-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.hero-prediction-library-copy > span {
    position: relative;
    display: block;
    padding-right: 122px;
}

.hero-prediction-library-copy strong {
    color: #fff;
    font-size: 1.05rem;
}

.hero-prediction-library-copy > span > strong {
    color: inherit;
    font-size: inherit;
}

.hero-prediction-library-copy > span > .prediction-pill {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    min-width: 76px;
    text-align: center;
    white-space: nowrap;
}

.hero-prediction-library-copy span,
.hero-prediction-library-copy small {
    overflow-wrap: anywhere;
}

.hero-prediction-library-copy small {
    color: rgba(255, 255, 255, 0.58);
}

.hero-prediction-library-card > a {
    padding: 8px 12px;
    color: #fff;
    background: rgba(12, 12, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.hero-prediction-library-card > a:hover,
.hero-prediction-library-card > a:focus-visible {
    border-color: #8cf7d8;
}

.hero-three-stage-table th:nth-child(1),
.hero-three-stage-table td:nth-child(1) {
    width: 20%;
}

.hero-three-stage-table th:nth-child(2),
.hero-three-stage-table td:nth-child(2) {
    width: 14%;
}

.hero-three-stage-table th:nth-child(3),
.hero-three-stage-table td:nth-child(3) {
    width: 17%;
}

.hero-three-stage-table th:nth-child(4),
.hero-three-stage-table td:nth-child(4),
.hero-three-stage-table th:nth-child(5),
.hero-three-stage-table td:nth-child(5) {
    width: 11%;
}

.hero-three-stage-table th:nth-child(6),
.hero-three-stage-table td:nth-child(6) {
    width: 16%;
}

.hero-three-stage-table th:nth-child(7),
.hero-three-stage-table td:nth-child(7) {
    width: 11%;
}

.hero-three-stage-table td:nth-child(2),
.hero-three-stage-table td:nth-child(4),
.hero-three-stage-table td:nth-child(5),
.hero-three-stage-table td:nth-child(6),
.hero-three-stage-table td:nth-child(7) {
    white-space: nowrap;
}

.hero-model-metrics-table th:nth-child(1),
.hero-model-metrics-table td:nth-child(1) {
    width: 52%;
}

.hero-model-metrics-table th:nth-child(2),
.hero-model-metrics-table td:nth-child(2) {
    width: 14%;
}

.hero-model-metrics-table th:nth-child(3),
.hero-model-metrics-table td:nth-child(3),
.hero-model-metrics-table th:nth-child(4),
.hero-model-metrics-table td:nth-child(4) {
    width: 17%;
}

.hero-model-metrics-table td:first-child .prediction-muted,
.hero-patch-table td:nth-child(2) .prediction-muted {
    display: block;
    margin-top: 3px;
}

.hero-patch-table,
.hero-patch-table tbody {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.hero-patch-table {
    margin-top: 14px;
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
}

.hero-patch-table thead {
    display: none;
}

.hero-patch-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "predictor predictor predictor predictor"
        "patch direction before after"
        "notes notes notes notes";
    gap: 13px 18px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 14px;
    padding: 16px 17px;
    background: rgba(24, 24, 28, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-patch-table td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0;
    border: 0;
    white-space: normal !important;
}

.hero-patch-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.hero-patch-table td:nth-child(1) {
    grid-area: patch;
}

.hero-patch-table td:nth-child(2) {
    grid-area: predictor;
}

.hero-patch-table td:nth-child(2) strong {
    font-size: 1.04rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.hero-patch-table td:nth-child(3) {
    grid-area: direction;
}

.hero-patch-table td:nth-child(4) {
    grid-area: before;
}

.hero-patch-table td:nth-child(5) {
    grid-area: after;
}

.hero-patch-table td:nth-child(6) {
    grid-area: notes;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.55;
}

.hero-patch-table .prediction-pill {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 760px) {
    .hero-prediction-title-row {
        align-items: center;
    }

    .hero-prediction-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .hero-readiness-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-prediction-library-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .hero-prediction-library-card img {
        width: 40px;
        height: 40px;
    }

    .hero-prediction-library-card > a {
        grid-column: 1 / -1;
        text-align: center;
    }

    .hero-prediction-library-copy > span {
        display: block;
    }

    .hero-prediction-library-copy > span > .prediction-pill {
        display: inline-block;
        margin: 2px 4px 2px 0;
        min-width: 0;
    }

    body.item-prediction-page.hero-prediction-page .hero-readiness-table tr {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "item chance" !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-readiness-table td {
        width: auto !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-readiness-table td:nth-child(1) {
        grid-area: item !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-readiness-table td:nth-child(2) {
        grid-area: chance !important;
        justify-self: end;
        text-align: right;
    }

    body.item-prediction-page.hero-prediction-page .hero-three-stage-table td,
    body.item-prediction-page.hero-prediction-page .hero-model-metrics-table td,
    body.item-prediction-page.hero-prediction-page .hero-patch-table td {
        width: auto !important;
    }

    /* The shared mobile card layout in style.css only names grid areas for
       6 columns (item/chance/direction/confidence/agreement/notes). The
       three-stage forecast table has 7 columns, so the 7th cell (Combined
       priority) was falling through to unstyled auto-placement and the 6th
       cell (Mixed/rework if selected) was inheriting the "notes" treatment
       (full-width, top border, paragraph padding) meant for long text, not
       a percentage. Override both so every cell lands in a named area. */
    /* Compound selector (both body classes) so specificity beats the base
       .item-prediction-page .item-prediction-table rules outright, instead of
       relying on equal-specificity + later-source-wins tie-breaking. */
    body.item-prediction-page.hero-prediction-page .hero-three-stage-table tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "item item"
            "chance direction"
            "confidence agreement"
            "mixed priority" !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-three-stage-table td:nth-child(1) {
        grid-area: item !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-three-stage-table td:nth-child(2) {
        grid-area: chance !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-three-stage-table td:nth-child(3) {
        grid-area: direction !important;
        justify-self: end;
        align-self: end;
    }

    body.item-prediction-page.hero-prediction-page .hero-three-stage-table td:nth-child(4) {
        grid-area: confidence !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-three-stage-table td:nth-child(5) {
        grid-area: agreement !important;
        justify-self: end;
        text-align: right;
    }

    body.item-prediction-page.hero-prediction-page .hero-three-stage-table td:nth-child(6) {
        grid-area: mixed !important;
        padding-top: 0;
        border-top: 0;
    }

    body.item-prediction-page.hero-prediction-page .hero-three-stage-table td:nth-child(7) {
        grid-area: priority !important;
        justify-self: end;
        text-align: right;
    }

    body.item-prediction-page.hero-prediction-page .hero-model-metrics-table tr {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-areas:
            "stage stage stage"
            "rows accuracy f1" !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-model-metrics-table td:nth-child(1) {
        grid-area: stage !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-model-metrics-table td:nth-child(2) {
        grid-area: rows !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-model-metrics-table td:nth-child(3) {
        grid-area: accuracy !important;
        justify-self: center;
        text-align: center;
    }

    body.item-prediction-page.hero-prediction-page .hero-model-metrics-table td:nth-child(4) {
        grid-area: f1 !important;
        justify-self: end;
        text-align: right;
    }

    body.item-prediction-page.hero-prediction-page .hero-patch-table tr {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "predictor predictor"
            "patch direction"
            "before after"
            "notes notes" !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-patch-table td:nth-child(1) {
        grid-area: patch !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-patch-table td:nth-child(1)::before {
        display: block;
    }

    body.item-prediction-page.hero-prediction-page .hero-patch-table td:nth-child(2) {
        grid-area: predictor !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-patch-table td:nth-child(2)::before {
        display: none;
    }

    body.item-prediction-page.hero-prediction-page .hero-patch-table td:nth-child(3) {
        grid-area: direction !important;
        justify-self: end;
        align-self: end;
    }

    body.item-prediction-page.hero-prediction-page .hero-patch-table td:nth-child(4) {
        grid-area: before !important;
    }

    body.item-prediction-page.hero-prediction-page .hero-patch-table td:nth-child(5) {
        grid-area: after !important;
        justify-self: end;
        text-align: right;
    }

    body.item-prediction-page.hero-prediction-page .hero-patch-table td:nth-child(6) {
        grid-area: notes !important;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}