@layer pages {
    .evaluation-table {
        font-size: 0.875rem;
    }

    /* 28px is the height of a chart row, so the gridlines of neighbouring rows meet. */
    .evaluation-table td {
        padding: 0 0.3125rem;
        height: 28px;
        border: none;
    }

    .evaluation-table tr:nth-child(2n) {
        background: var(--theme-color-white-solid);
    }

    .evaluation-table th:first-child,
    .evaluation-table td:first-child {
        padding-left: 0.5rem;
    }

    .evaluation-table .eval-type {
        font-size: .7143em;
    }

    .evaluation-table .feature {
        font-weight: 500;
        font-size: 0.8125rem;
    }

    .evaluation-table .value {
        font-weight: 600;
    }

    .evaluation-table thead th {
        border: none;
    }

    .evaluation-table th,
    .evaluation-table td {
        text-align: center;
        vertical-align: middle;
    }

    .evaluation-table th:first-child,
    .evaluation-table td:first-child {
        text-align: left;
        white-space: nowrap;
    }

    .evaluation-table__feature-head {
        width: 240px;
    }

    .evaluation-table__value-head {
        width: 30px;
    }

    .evaluation-table__chart-head {
        width: 460px;
    }

    .evaluation-table .evaluation-table__chart {
        padding: 0;
    }

    .evaluation-table__scale-low {
        padding-left: 0.25rem;
        text-align: right;
    }

    .evaluation-table__scale-mid {
        flex: 0 47.8261%;
    }

    .evaluation-table__scale-high {
        padding-right: 0.25rem;
        text-align: left;
    }

    #evaluation-genetic-traits-grid .evaluation-table {
        width: auto;
    }

    .animal-tile--neutral {
        color: #fff;
        background-color: var(--theme-color-dark-prev);
    }

    .animal-tile--primary {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        background-color: var(--theme-color-main);
    }

    .animal-tile--secondary {
        color: #fff;
        background-color: var(--theme-color-main-dark);
    }

    /* base.css gives a first h1 of a flex box this margin. */
    .animal-tile--primary > h1:first-child {
        margin-top: 0.5rem;
    }

    .evaluation-table {
        font-family: var(--font-heading);
    }

    .evaluation-view .evaluation-number {
        border: none;
        background-color: transparent;
    }

    .evaluation-view__bar {
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-4);
    }

    .animal-metrics {
        margin-top: -1px;
        text-align: center;
        text-transform: uppercase;
    }

    .animal-metrics__stack {
        display: flex;
    }

    @media (min-width: 576px) {
        .animal-metrics__stack {
            flex-direction: column;
        }
    }

    .data-value {
        font-family: var(--font-heading);
        margin-bottom: 0;
        font-weight: 700;
    }

    .animal-name .data-value {
        font-weight: 200;
        letter-spacing: 0.1rem;
        border: none;
    }

    .data-label {
        font-size: 0.8125rem;
        font-weight: 200;
        text-transform: uppercase;
    }

    .animal-tile .data-label {
        color: rgba(255, 255, 255, 0.8);
    }

    .animal-birth-date,
    .animal-breed {
        flex: 1;
    }

    @media (min-width: 576px) {
        .animal-birth-date,
        .animal-breed {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }

    .animal-metrics .animal-tile {
        padding: 0.3125rem;
        margin-top: 1px;
    }

    .animal-metrics .animal-int-number {
        margin-right: 1px;
    }

    @media (max-width: 575.98px) {
        .animal-metrics .animal-birth-date {
            margin-right: 1px;
        }
    }

    @media (min-width: 576px) {
        .animal-metrics .animal-name {
            margin-right: 1px;
        }
    }

    .evaluation-panel.card {
        margin: 0 auto 3rem;
        border-radius: 0;
        border: none;
    }

    .evaluation-panel__body {
        padding: 0.5rem 1.5rem 1.5rem;
    }

    .evaluation-genetic-traits .evaluation-panel__body {
        padding: 1.5rem;
    }

    @media (min-width: 576px) {
        .evaluation-panel__body {
            padding: 1rem 2rem 1.5rem;
        }
    }

    @media (min-width: 992px) {
        .evaluation-panel__body {
            padding: 1rem 2rem 2rem;
        }
    }

    @media (min-width: 992px) {
        .evaluation-genetic-traits .evaluation-panel__body {
            padding: 2rem;
        }
    }

    @media (min-width: 1200px) {
        .evaluation-panel__body {
            padding: 1rem 3rem 2rem;
        }
    }

    .evaluation-panel .card__header {
        background: var(--theme-color-main);
        color: #fff;
        border-radius: 0;
        border-bottom: 2px solid rgba(0, 0, 0, .2);
        font-weight: 200;
        padding: 0.75rem 1.5rem;
    }

    .evaluation-panel__section > summary {
        display: block;
        cursor: pointer;
        list-style: none;
    }

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

    .evaluation-view .tabs__panel {
        padding: 1.5rem 0 1em;
    }

    @media (min-width: 992px) {
        .evaluation-indexes__tabs {
            justify-content: flex-end;
        }
    }

    .legend {
        display: flex;
        justify-content: flex-end;
        margin: var(--space-3) 0;
    }

    .legend .legend-item {
        margin: 0 var(--space-3);
    }

    .legend .desc {
        margin-left: var(--space-2);
    }

    .evaluation-documents__list {
        display: flex;
        flex-wrap: wrap;
    }

    .evaluation-documents__list .button {
        margin: 0 var(--space-3) var(--space-3) 0;
    }

    /* Bars laid out as the Highcharts charts they replaced: margins of 120px, a 220px track, ticks every 10 over ±20 so five gridlines, and four equal colour steps. */
    .feature-bar {
        display: flex;
        align-items: center;
        width: 460px;
        height: 28px;
    }

    .feature-bar__label {
        flex: 0 0 120px;
        width: 120px;
        font-size: 11px;
        font-weight: 500;
        color: #555;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .feature-bar__label--left {
        text-align: right;
        padding-right: 6px;
    }

    .feature-bar__label--right {
        text-align: left;
        padding-left: 6px;
    }

    .feature-bar__track {
        flex: 0 0 220px;
        position: relative;
        height: 100%;
        background: linear-gradient(#e6e6e6, #e6e6e6) 0 0 / 1px 100% no-repeat,
        linear-gradient(#e6e6e6, #e6e6e6) 25% 0 / 1px 100% no-repeat,
        linear-gradient(#e6e6e6, #e6e6e6) 50% 0 / 1px 100% no-repeat,
        linear-gradient(#e6e6e6, #e6e6e6) 75% 0 / 1px 100% no-repeat,
        linear-gradient(#e6e6e6, #e6e6e6) 100% 0 / 1px 100% no-repeat;
    }

    .feature-bar__fill {
        position: absolute;
        top: 18.75%;
        height: 62.5%;
    }

    .feature-bar__fill--right {
        left: 50%;
        background: linear-gradient(to right,
        #C1E4A0 0 25%, #93C68A 25% 50%, #398B5F 50% 75%, #33724F 75% 100%);
    }

    .feature-bar__fill--left {
        right: 50%;
        background: linear-gradient(to left,
        #D6706E 0 25%, #CC5D59 25% 50%, #C14A44 50% 75%, #9A453D 75% 100%);
    }

    .feature-bar:hover .feature-bar__fill {
        filter: brightness(1.1);
    }

    .evaluation-indexes .svgicon {
        font-size: 24px;
        float: left;
        margin-right: 0.3333em;
        position: relative;
        top: -0.04167em;
    }

    .evaluation-indexes {
        position: relative;
    }

    .indexes-grid {
        display: grid;
        grid-template-columns: 4fr 1fr 1fr;
        gap: 1px;
    }

    .indexes-grid.has-legend-row {
        margin-top: -0.375rem;
    }

    .indexes-grid.has-legend-row::before {
        content: '';
    }

    .indexes-grid > .item {
        padding: .5rem;
        background: #fff;
        align-content: center;
    }

    .indexes-grid .data-label {
        font-weight: 300;
        text-align: right;
        padding-right: 1rem;
    }

    .indexes-grid .sub-index.data-label {
        color: color-mix(in srgb, var(--theme-color-dark) 85%, transparent);
        text-transform: none;
        margin-left: 1.75rem;
    }

    .indexes-grid .main-index.data-label {
        font-weight: 700;
        font-size: .875rem;
    }

    .indexes-grid .data-value,
    .indexes-grid .data-repeatability {
        font-size: 1.125rem;
        text-align: center;
    }

    .indexes-grid .data-repeatability {
        font-weight: 600;
        font-family: var(--font-heading);
    }

    .indexes-grid .main-index--first {
        margin-bottom: var(--space-3);
    }

    .indexes-grid .main-index--last {
        margin-top: var(--space-3);
    }

    .indexes-grid .main-index.data-value {
        color: #fff;
        background: var(--theme-color-main-dark);
    }

    .indexes-grid .main-index.data-repeatability {
        color: #fff;
        background: var(--theme-color-dark);
    }

    .indexes-grid .legend-item {
        margin-bottom: .5rem;
        text-align: center;
    }

    .evaluation-indexes .legend-item .label {
        background: var(--theme-color-dark);
        font-size: 0.875rem;
        font-weight: 500;
        min-width: 1.75em;
        text-align: center;
        color: #fff;
        display: inline-block;
        border-radius: 4px;
        padding: 0.25em 0.4em 0.2em;
        line-height: 1;
    }

    .evaluation-indexes .legend .desc {
        font-size: 0.8125rem;
        font-weight: 400;
        text-transform: uppercase;
    }

    .evaluation-features h2 {
        margin: 1rem 0 2rem;
    }

    @media (min-width: 992px) {
        .evaluation-indexes h2 {
            width: calc(100% - 16.5rem);
            position: absolute;
            margin-top: .5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    @media (min-width: 992px) {
        .evaluation-indexes h2 > span {
            border: 0;
            padding: 0;
            display: inline;
        }
    }

    @media (min-width: 992px) {
        .indexes-grid {
            grid-template-columns: 3.25fr 1fr 0.75fr;
        }
    }

    a.genetic-trait-result {
        color: inherit;
        text-decoration: none;
    }

    a.genetic-trait-result:hover,
    a.genetic-trait-result:focus {
        text-decoration: underline;
    }

    .genetic-trait-result {
        font-weight: 600;
        padding: 0 0.25em;
        border: 1px solid;
        display: inline-block;
        margin: 0.25rem 0 0;
        min-width: 3em;
        text-align: center;
        background: var(--theme-color-white-solid);
    }
}