*::after {
    box-sizing: border-box;
}

.league-selectors {
    padding: 1rem 0;
    margin-bottom: 0.4rem;
    background-color: var(--cool-grey-800);
    border-radius: 1.6rem;
    box-shadow:
        0 5px 15px var(--shadow-ambient-high-button),
        0 2px 10px var(--shadow-direct-high-button);
}

/* putting each of the league and team selectors into its own */
/* div element that will then also hold a span element to assist */
/* with indicating when the selector has the focus */
.league-selectors-form {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
}

/* an area, typically containing multiple elements & datapoints, */
/* that is separated from other areas by a border or background colour */
.analysis-panel {
    /* margin-top: 2.4rem; */
    margin-top: 1.2rem;
    padding: 1.6rem;
    background-color: var(--cool-grey-050);
    border-radius: 1.6rem;
    box-shadow:
        0 5px 15px var(--shadow-ambient-high-button),
        0 2px 10px var(--shadow-direct-high-button);
}

.league-selectors select {
    /* remove default styling */
    appearance: none;
    /* possibly needed for other browsers */
    /* -webkit-appearance: none; */
    /* -moz-appearance: none; */
    /* additional resets for further consistency across browsers */
    background-color: transparent;
    border: none;
    /* provide padding on right-hand side for an arrow icon that */
    /* will be free from overwriting by long option text */
    padding: 0 1.2rem 0 0;
    margin: 0;
    width: 100%;
    outline: none;

    /* 1.4rem appears maximum font-size for mobile portrait display, */
    /* and then might prove too large for long league or team names. */
    /* Consider increasing via media queries for landscape layouts. */
    font-size: 1.4rem;
    /* set cursor to be hand pointer */
    cursor: pointer;
    /* stop blue highlighting on click on mobile device; */
    /* put this through https://autoprefixer.github.io/ and it didn't suggest other lines */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* see https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic */
    /* for other suggestions if highlighting on non-Chrome devices - though note at least some of the other lines there are now deprecated */
}

/* rule to remove native arrow for lower versions of IE; */
/* untested; not needed for our expected use cases; */
.league-selectors select::-ms-expand {
    display: none;
}

div.hierarchy-selector {
    /* set width constraints */
    min-width: 20ch;
    max-width: 25ch;
    /* apply several box model properties */
    border: 1px solid var(--orange-vivid-700);
    border-radius: 0.4rem;
    padding: 0.2rem 0.8rem;
    background-color: var(--cool-grey-050);
    /* add a gradient to add some subtle depth */
    background-image: linear-gradient(
        to top,
        var(--cool-grey-100),
        var(--cool-grey-050) 33%
    );
    /* set up grid layout to position arrow wrt the select text */
    display: grid;
    grid-template-areas: "select-area";
    align-items: center;
    /* set the element's children's position property to be relative to it */
    /* to align an overlay that will indicate focus */
    position: relative;
}

div.hierarchy-selector::after {
    content: "";
    width: 1rem;
    height: 0.8rem;
    background-color: var(--cool-grey-900);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    pointer-events: none;
}

/* define the select element and the ::after pseudo element to use the named grid-template-areas */
div.hierarchy-selector select,
div.hierarchy-selector::after {
    grid-area: select-area;
}

/* push arrow to the right of the select text */
div.hierarchy-selector::after {
    justify-self: end;
}

/* replace the native focus styling lost when the select element's outline was */
/* set to none with a bespoke appearance */
/* select the (span) element with the class "focus" that follows the selector 
   when the latter has actual focus; we'll use that span element to carry bespoke 
   styling to indicate the focus */
div.hierarchy-selector select:focus + .focus {
    /* set the positioning to use the parent as its frame of reference */
    position: absolute;
    /* set the span element to cover the entire area of the parent but pull it in 1 pixel on */
    /* all sides from the parent's box after which we will add a thick border */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    /* add a thick border */
    border: 2px solid var(--indigo-600);
    /* match the parent's border radius */
    border-radius: inherit;
}

/* set each selector to a standard text colour when a non-prompt option is selected; */
/* set the selector to a highlight/warning colour when the prompt option ("Pick a...") is selected; */
/* set every option to appear in the standard text colour when the dropdown is shown expanded; */

/* effecting the above requires a few steps - see sources: */
/* Alessio answer at https://stackoverflow.com/questions/22292822/how-to-style-select-dropdown-only-when-value-is-empty */
/* and https://ryanbigg.com/2022/12/using-a-css-has-selector-to-target-selects-that-have-selected-option */

/* first, set the text colour of the collapsed select box to the highlight/warning colour */
#leagues,
#teams {
    color: var(--orange-vivid-700);
}

/* set the text colour of the options, and of the optgroups in the leagues select element, */
/* when shown in the expanded dropdown list to the standard text colour */
#leagues option,
#leagues optgroup,
#teams option {
    color: var(--cool-grey-900);
}

/* overwrite the text colour of the collapsed select box to the standard text colour */
/* when the selected/checked option has a "value" property set to a non-blank string value; */
#leagues:has(option:checked:not([value])),
#leagues:has(option:checked:not([value=""])),
#teams:has(option:checked:not([value])),
#teams:has(option:checked:not([value=""])) {
    color: var(--cool-grey-900);
}

/* to use scroll-snap, its type must be set on the html element that owns the */
/* scrollbar; in Chrome dev tools, this is indicated by a scroll "badge" in the Elements tab */
html {
    scroll-snap-type: y proximity;
}

/* define specific sections as scroll snap points; */
/* added <main> to fix issue of page opening scrolled to bottom */
/* and so league hierarchy selectors were not immediately visible */
section.snap-point,
main {
    /* scroll-snap-align: start; */
    scroll-margin-top: 8.4rem;
    scroll-snap-stop: normal;
}

section.dashboard-content {
    /* separate the sections of content */
    margin-top: 2.4rem;
}

.team-dashboard-title {
    margin-bottom: 1.2rem;
}

.performance-bridge,
.projections-base-case {
    display: grid;
    grid-template-columns: 1fr 10rem 5rem 10rem 1fr;
}

/* rank driver refactor - Nov 2025 */
.performance-bridge #rank-change-drivers {
    grid-column: 1 / -1;
    grid-row: 5;
    display: grid;
    /* grid-template-columns: 1fr 6.4rem 3.2rem 6.4rem 3.2rem 6.4rem 1fr; */
    grid-template-columns: 1fr 8.4rem 2.4rem 8.4rem 2.4rem 8.4rem 1fr;
}

.performance-bridge p {
    /* color: var(--indigo-900); */
    color: var(--cool-grey-900);
}

.bridge-summary,
.analysis-summary {
    line-height: 1.6;
    font-size: 1.4rem;
}

.rank-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 10rem;
    border-color: var(--cool-grey-900);
    border-style: solid;
    border-width: 0.1rem;
    border-radius: 1.4rem;
    color: var(--cool-grey-900);
}

.driver-rank-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    /* height: 6.4rem; */
    height: 8.4rem;
    border-color: var(--cool-grey-900);
    border-style: solid;
    border-width: 0.1rem;
    border-radius: 1.4rem;
    color: var(--cool-grey-900);
}

.performance-bridge > .rank-box.from,
.projections-base-case > .rank-box.from {
    grid-column: 2;
    grid-row: 1;
    background-color: var(--cool-grey-200);
}

.performance-bridge > .rank-box.to,
.projections-base-case > .rank-box.to {
    grid-column: 4;
    grid-row: 1;
}

:root {
    --modal-radius: 3.2rem;
    --modal-icon-color: var(--indigo-700);
}

.performance-bridge > .modal,
.recent-actuals > .modal,
.ppm-projection > .modal,
.ppm-actuals > .modal,
.wdl-bw > .modal {
    /* centre the dialog on screen */
    margin: auto;
    /* border: none; */
    /* width: 90%; */
    /* set the border-radius to match that of the <div> containing
       the content, else there can be side-effects of the borders 
       disappearing at the corners of the modal;
       setting background-color as transparent appears to "solve"
       the issue but only if shadows are turned off - but we want
       a shadow outline for the depth it brings to the layout */
    /* border-radius: var(--modal-radius); */
    border: 2px solid var(--modal-icon-color);
    width: calc(90% - 3.2rem - 1.6rem);
    border-radius: 2.4rem;
    /* box-shadow: 0 5px 15px var(--shadow-ambient-high-button),
        0 2px 10px var(--shadow-direct-high-button); */
    /* box-shadow: 0 10px 20px var(--shadow-ambient-high-button),
        0 4px 15px var(--shadow-direct-high-button); */
    /* box-shadow: 0 10px 20px hsla(0, 0%, 0%, 0.4),
        0 4px 15px hsla(0, 0%, 0%, 0.1); */
    box-shadow: var(--shadow-ambient-modal), var(--shadow-direct-modal);
}

.performance-bridge > .modal > button.close-button,
.recent-actuals > .modal > button.close-button,
.ppm-projection > .modal > button.close-button,
.ppm-actuals > .modal > button.close-button,
.wdl-bw > .modal > button.close-button {
    float: inline-end;
    /* margin-top: 0.4rem; */
    margin-top: 0.6rem;
    /* margin-inline-end: 0.4rem; */
    margin-inline-end: 0.6rem;
    /* space to stop other content getting too close from below */
    margin-bottom: 0.4rem;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background-color: var(--indigo-700);
    /* remove default focus behaviour */
    outline: none;
    /* pointer-events: none; */
    cursor: pointer;
    box-shadow:
        0 5px 15px var(--shadow-ambient-high-button),
        0 2px 10px var(--shadow-direct-high-button);
}

/* .modal > button.close-button circle {
    fill: var(--indigo-900);
    stroke-width: 0;

    pointer-events: all;
    cursor: pointer;

    filter: drop-shadow(0 5px 15px var(--shadow-ambient-high-button))
        drop-shadow(0 2px 10px var(--shadow-direct-high-button));
} */

.modal > button.close-button line.close-icon-cross-line {
    stroke: var(--cool-grey-050);
    stroke-width: 5;
    /* set line ends shape */
    stroke-linecap: round;
    pointer-events: none;
}

.performance-bridge > .modal > div,
.recent-actuals > .modal > div,
.ppm-projection > .modal > div,
.ppm-actuals > .modal > div,
.wdl-bw > .modal > div {
    padding: 2rem;
    /* border: 2px solid var(--modal-icon-color); */
    /* set the border-radius to match that of the modal, else there
       can be side-effects of the borders disappearing at the 
       corners of the modal; */
    /* border-radius: var(--modal-radius); */
    background-color: var(--indigo-050);
}

.info-icon {
    width: 3rem;
    height: 3rem;
    /* stop blue highlighting on click on mobile device */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* see https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic */
    /* for other suggestions if highlighting on non-Chrome devices */
}

dialog {
    line-height: 1.2;
    line-height: 1.6;
    font-size: 1.6rem;
}

dialog .dialog-heading {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--cool-grey-900);
    margin-bottom: 0.8rem;
}

dialog p {
    margin-bottom: 0.2rem;
    margin-bottom: 0.4rem;
}

dialog p.strapline {
    /* font-size: 1.4rem; */
    font-size: 1.8rem;
    font-weight: 500;
    /* margin-top: 0.4rem; */
    margin-bottom: 0rem;
    line-height: 1.2;
    line-height: 1.4;
    margin-right: 1.4rem;
    margin-left: 1.4rem;
    text-align: center;
}

/* set the last element with strapline class to have greater spacing after; */
/* select it by using :has(~ .class) to check if current element has a 
following sibling with the same class, and negating that condition to look for
elements that do not have such a sibling */
dialog p.strapline:not(:has(~ .strapline)) {
    margin-bottom: 0.4rem;
}

dialog .strapline > span.positive {
    color: var(--green-700);
}

dialog .strapline > span.negative {
    color: var(--red-700);
}

dialog .strapline > span.separator {
    font-weight: 400;
    font-style: italic;
}

dialog p strong.win,
dialog li strong.top,
dialog details summary strong.top {
    color: var(--green-700);
}
dialog p strong.loss,
dialog li strong.bottom,
dialog details summary strong.bottom {
    color: var(--red-700);
}
dialog p strong.draw {
    color: var(--cool-grey-600);
}

dialog ul {
    /* Remove default list styling */
    /* list-style: none; */
    list-style-position: inside;
    /* Add padding for spacing */
    padding: 0;
}

dialog ul li {
    /* Make the list item a positioning context for the triangle */
    position: relative;

    padding-left: 1rem;
    /* margin-bottom: 0.8rem; */
}

/* initially wanted triangular bullet markers but this */
/* conflicts with the <details> expand cue i.e. the rotating triangle */
dialog ul li::before {
    /* Create the pseudo-element for the bullet */
    /* content: ""; */
    /* Create the triangle using CSS borders */
    /* border-left: 0.5rem solid #000;
    border-top: 0.3rem solid transparent;
    border-bottom: 0.3rem solid transparent; */

    /* Position the triangle */
    /* position: absolute;
    left: 0; */
    /* Adjust this value to vertically center the triangle */
    /* top: 0.6rem; */
}

/* set margin-bottom for last li element */
dialog ul li:last-child {
    margin-bottom: 0.8rem;
}

dialog hr {
    margin-bottom: 0.4rem;
}

dialog details summary {
    color: var(--indigo-700);
    cursor: pointer;
}

button.info-icon {
    margin-top: -1.2rem;
    border: none;
    border-radius: 50%;
    background-color: var(--indigo-700);
    cursor: pointer;
    box-shadow:
        0 5px 15px var(--shadow-ambient-high-button),
        0 2px 10px var(--shadow-direct-high-button);
}

.performance-bridge > .info-icon {
    grid-column: 5;
    grid-row: 1;
    /* move icon towards corner of panel */
    margin-left: calc(100% - 1.8rem);
    /* stop blue highlighting on click on mobile device */
    /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
    /* see https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic */
    /* for other suggestions if highlighting on non-Chrome devices */
}

/* .performance-bridge > button:focus {
    outline: none;
    border: 1px solid #4055a844;
    border-radius: 50%;
} */
.panel-with-info-icon {
    /* set this class to the panel where an info icon is wanted */
    position: relative;
}

.recent-actuals.info-icon,
.ppm-projection.info-icon,
.ppm-actuals.info-icon,
.wdl-bw.info-icon {
    position: absolute;
    /* move icon towards corner of panel */
    right: 0.4rem;
    /* stop blue highlighting on click on mobile device */
    /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
    /* see https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic */
    /* for other suggestions if highlighting on non-Chrome devices */
}

.info-icon > svg > path {
    /* if current icon is reworked as a circle and an inner path, */
    /* then could transfer the pointer behaviours to be triggered */
    /* only over the circle rather than the whole containing svg */
    fill: var(--cool-grey-050);
    transform: scale(4);
    pointer-events: none;
    /* stop blue highlighting on click on mobile device */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* see https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic */
    /* for other suggestions if highlighting on non-Chrome devices */
}

.info-icon > svg > circle,
svg.close-icon > circle {
    cx: 0px;
    cy: 0px;
    r: 30px;
    fill: var(--modal-icon-color);
    opacity: 1;
    cursor: pointer;
    pointer-events: all;
    /* stop blue highlighting on click on mobile device */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* see https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic */
    /* for other suggestions if highlighting on non-Chrome devices */

    filter: drop-shadow(0 5px 15px var(--shadow-ambient-high-button))
        drop-shadow(0 2px 10px var(--shadow-direct-high-button));
}

/* when the close circle in the modal has its fill set to the */
/* value for the info icon circle, it apppears to be lighter, so this line */
/* sets it a bit darker to approximate the colour of the latter */
svg.close-icon > circle {
    fill: var(--indigo-800);
}

.performance-bridge > .text-before-chart {
    grid-column: 1 / -1;
    grid-row: 2;
    place-self: center;
}

.performance-bridge > .svg-container {
    grid-column: 1 / -1;
    grid-row: 3;
}

.performance-bridge > .text-after-chart {
    grid-column: 1 / -1;
    grid-row: 4;
    place-self: center;
}

:root {
    /* define equivalents of several constants used in the JS script(s) */
    /* so that changes to the bridge chart and rank boxes are synchronised */
    --fade-in-time-for-initial-block: 100;
    --grow-time-for-change-block: 200;
    --grow-time-for-final-block: 400;

    /* define meaninfully-named constants whose use we may specify several times */
    --standard-axis-colour: var(--cool-grey-900);
}

/* rank driver refactor - Nov 2025 */
/* .performance-bridge > .rank-box.own-impact {
    grid-column: 2;
    grid-row: 5;
} */

#rank-box-own {
    grid-column: 4;
    grid-row: 1;
    border-width: 0.3rem;
}

/* rank driver refactor - Nov 2025 */
/* .performance-bridge > .rank-box.others-impact {
    grid-column: 4;
    grid-row: 5;
} */

#rank-box-other {
    grid-column: 6;
    grid-row: 1;
}

.performance-bridge,
.projections-base-case {
    --positive-change-dark: var(--green-600);
    --positive-change-light: var(--green-100);

    --negative-change-dark: var(--red-600);
    /* --negative-change-light: var(--red-100); */
    /* set --negative-change-light at 30% of var(--red-600) */
    --negative-change-light: #a61b1b30;

    --neutral-change-dark: var(--indigo-600);
    --neutral-change-light: var(--indigo-050);

    --iniital-border: var(--cool-grey-900);
    --initial-fill: var(--cool-grey-200);
}

.y.axis.bridge > path,
.x.axis.bridge > path {
    stroke: var(--standard-axis-colour);
    stroke-width: 0.15rem;
}

.y.label.bridge {
    text-anchor: start;
    font-size: 3.6rem;
    font-weight: 600;
    fill: var(--standard-axis-colour);
}

.bridge-chart .block.initial {
    fill: var(--initial-fill);
    stroke: var(--iniital-border);
    transition: fill calc(var(--fade-in-time-for-initial-block) * 1ms)
        ease-in-out;
    transition: stroke calc(var(--fade-in-time-for-initial-block) * 1ms)
        ease-in-out;
}

.rank-box.positive,
.driver-rank-box.positive {
    border-color: var(--positive-change-dark);
    background-color: var(--positive-change-light);
}

.bridge-chart .block.positive {
    fill: var(--positive-change-light);
    stroke: var(--positive-change-dark);
}

.bridge-chart .block-label.positive {
    fill: var(--positive-change-dark);
}

.rank-box.negative,
.driver-rank-box.negative {
    border-color: var(--negative-change-dark);
    background-color: var(--negative-change-light);
    /* transition: border-color 0.4s ease-in-out;
    transition: background-color 0.4s ease-in-out; */
}

.rank-box.negative,
.rank-box.neutral,
.rank-box.positive,
.driver-rank-box.negative,
.driver-rank-box.neutral,
.driver-rank-box.positive {
    /* add a transition to the border color and background color */
    transition-property: border-color, background-color;
    transition-timing-function: ease-in-out;
}

.rank-box.to.negative,
.rank-box.to.neutral,
.rank-box.to.positive,
.driver-rank-box.to.negative,
.driver-rank-box.to.neutral,
.driver-rank-box.to.positive {
    /* add a transition to the border color and background color */
    transition-duration: calc(var(--grow-time-for-final-block) * 1ms);
}

.rank-box.own-impact.negative,
.rank-box.own-impact.neutral,
.rank-box.own-impact.positive,
.rank-box.others-impact.negative,
.rank-box.others-impact.neutral,
.rank-box.others-impact.positive,
.driver-rank-box.own-impact.negative,
.driver-rank-box.own-impact.neutral,
.driver-rank-box.own-impact.positive,
.driver-rank-box.others-impact.negative,
.driver-rank-box.others-impact.neutral,
.driver-rank-box.others-impact.positive {
    /* add a transition to the border color and background color */
    transition-duration: calc(var(--grow-time-for-change-block) * 1ms);
}

.bridge-chart .block.negative {
    fill: var(--negative-change-light);
    stroke: var(--negative-change-dark);
}

.bridge-chart .block-label.negative {
    fill: var(--negative-change-dark);
}

.rank-box.neutral,
.driver-rank-box.neutral {
    border-color: var(--neutral-change-dark);
    background-color: var(--neutral-change-light);
}

/* .bridge-chart .bar.neutral text { */
.bridge-chart .block-label.neutral {
    fill: var(--neutral-change-dark);
}

/* neutral rect could only be for final step */
.bridge-chart .bar.neutral rect {
    fill: var(--neutral-change-light);
    stroke: var(--neutral-change-dark);
}

.bridge-chart .bar.initial line {
    stroke: var(--cool-grey-900);
    stroke-width: 0.2rem;
}

.bridge-chart .block.neutral {
    fill: var(--neutral-change-light);
    stroke: var(--neutral-change-dark);
}

.bridge-chart .block.own {
    stroke-width: 1rem;
}

.bridge-chart .connector {
    stroke: var(--cool-grey-800);
    /* avoid putting units of rem for stroke-dasharray */
    /* because iOS <=18 replaces with solid line; */
    /* px, or no units, appears to be fine */
    stroke-dasharray: 3;
    stroke-width: 0.4rem;
}

.rank-box,
.driver-rank-box {
    font-size: 1rem;
}

/* set border of projection rank-box to dashed with larger spacing */
.rank-box.to.projection {
    border-style: dashed;
    border-width: 0.4rem;
}

.rank-box > .line-1,
.driver-rank-box > .line-1,
.rank-box > .line-3,
.driver-rank-box > .line-3 {
    /* font-weight: 600; */
    font-weight: 500;
    text-align: center;
    width: 90%;
    /* larger than a standard size  for driver-rank-box legibility*/
    line-height: 1.3;
}

.rank-box > .line-1,
.rank-box > .line-3 {
    font-size: 1.2rem;
}

.driver-rank-box > .line-1,
.driver-rank-box > .line-3 {
    font-size: 1rem;
}

.driver-rank-box > .line-1 {
    margin-top: 0.2rem;
}

.rank-box > .line-2 {
    font-size: 3.6rem;
    font-weight: 700;
    /* start opacity at 0 to transition to 1 when polarity class added */
    opacity: 0;
}

.rank-box.from > .line-2 {
    /* we enforce opacity 1 for this "starting" value because other rank boxes have this line transition from zero */
    opacity: 1;
}

.driver-rank-box > .line-2 {
    font-size: 2.8rem;
    font-weight: 700;
}

.rank-box.own-impact > .line-2,
.rank-box.others-impact > .line-2,
.driver-rank-box.own-impact > .line-2,
.driver-rank-box.others-impact > .line-2 {
    /* show the initial rank value promptly, without a transition effect */
    transition: opacity calc(var(--grow-time-for-change-block) * 1ms)
        ease-in-out;
}

.rank-box.to > .line-2 {
    /* show the final rank value with a slower transition effect */
    transition: opacity calc(var(--grow-time-for-final-block) * 1ms) ease-in-out;
}

.rank-box.positive > .line-2,
.driver-rank-box.positive > .line-2 {
    color: var(--positive-change-dark);
    opacity: 1;
}

.rank-box.negative > .line-2,
.driver-rank-box.negative > .line-2 {
    color: var(--negative-change-dark);
    opacity: 1;
}

.rank-box.neutral > .line-2,
.driver-rank-box.neutral > .line-2 {
    color: var(--neutral-change-dark);
    opacity: 1;
}

/* .driver-rank-box > .line-3 {
    line-height: 1.3;
} */

.rank-change-operator.arrow {
    grid-column: 3;
    grid-row: 1;
}

/* .rank-change-operator.plus, */
#driver-rank-change-plus-first {
    grid-column: 3;
    grid-row: 5;
}

.rank-change-operator {
    font-weight: 700;
    font-size: 3rem;
    place-self: center;
}

#driver-rank-change-plus-first {
    grid-column: 3;
    grid-row: 1;
}

#driver-rank-change-plus-second {
    grid-column: 5;
    grid-row: 1;
}

/* #driver-rank-change-plus-first,
#driver-rank-change-plus-second, */
.driver-rank-change-operator {
    font-size: 2.4rem;
    font-weight: 700;
    place-self: center;
}

.performance-bridge .text-before-chart {
    padding: 1.6rem 0 0.8rem;
    font-size: 1.4rem;
}

.performance-bridge .text-after-chart {
    padding: 1.6rem 0 1.2rem;
    font-size: 1.2rem;
}

.bridge-chart text {
    /* font-size: 2rem; */
    font-size: 2.9rem;
    /* fill: var(--cool-grey-600); */
    fill: var(--cool-grey-900);
}

.bridge-chart .title {
    font-size: 2.4rem;
    font-weight: 600;
    text-anchor: middle;
}

.bridge-chart .block-label {
    text-anchor: middle;
    font-size: 4rem;
    font-weight: 600;
}

/* .bridge-chart .block-label.initial,
.bridge-chart .block-label.final {
    font-size: 3.6rem;
    font-weight: 600;
} */

/* //////////////////////////// */
/* styles for timeline chart */

.chart.title {
    font-size: 2.4rem;
    font-weight: 600;
    fill: var(--cool-grey-900);
    text-anchor: middle;
}

/* svg implementation of PPM actuals chart title is shrinking it in comparison with html version for timeline charts  */
.chart.ppm-actuals.title {
    font-size: 3rem;
}

.axis.tlc > path {
    stroke: var(--standard-axis-colour);
    stroke-width: 0.1rem;
}

text.y.label.tlc {
    /* font-size: 1.4rem; */
    font-size: 2.4rem;
    fill: var(--cool-grey-700);
    font-weight: 600;
    text-anchor: start;
}

.x.axis.tlc > .tick {
    font-size: 2.2rem;
}

/* add further variables to root element of the document, <html> */
:root {
    --boundary-good-color-default: hsl(126 49% 84%);
    --boundary-good-opacity-default: 0.1;
}

/* set default appearance for good boundary zone */
.boundary.good {
    fill: var(--boundary-good-color-default);
    opacity: var(--boundary-good-opacity-default);
}

/* "good1" represents the very best zone */
.boundary.good1 {
    fill: hsl(123 38% 63%);
    opacity: 0.2;
}

.boundary.good2 {
    fill: hsl(122 42% 75%);
    opacity: 0.15;
}

/* add further variables to root element of the document, <html> */
:root {
    --boundary-bad-color-default: hsl(360 100% 97%);
    --boundary-bad-opacity-default: 0.15;
}

/* set default appearance for bad boundary zone */
.boundary.bad {
    fill: var(--boundary-bad-color-default);
    opacity: var(--boundary-bad-opacity-default);
}

/* "bad1" represents the very worst zone */
.boundary.bad1 {
    fill: hsl(360 77% 78%);
    opacity: 0.15;
}

.boundary.bad2 {
    fill: hsl(360 82% 89%);
    opacity: 0.15;
}

.boundary-label {
    /* font-size: 1.7rem; */
    font-size: 2rem;
    /* fill: var(--cool-grey-400); */
    fill: var(--cool-grey-600);
    /* font-weight: 600; */
    font-weight: 400;
    /* opacity: 0.8; */
    opacity: 0.85;
    text-anchor: middle;
}

/* style for projected range areas in timeline chart */
.tlc.rangeArea {
    fill: var(--indigo-100);
}

/* style for (main) line in timeline chart */
.tlc.line {
    fill: none;
    stroke: var(--indigo-800);
    stroke-width: 0.4rem;
    stroke-linecap: round;
    /* add shadow - replace the hard-coded trial below in future */
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
    /* add shadow */
}

/* set projections line in timeline chart to be dashed */
.tlc.line.projection {
    /* stroke-dasharray: 0.8rem 1.2rem; */
    /* fix for iOS <=18 failure to show dashed line; */
    /* "rem" seems to be the issue; px, or no unit, possibly fine */
    /* stroke-dasharray: 1rem 1rem; */
    stroke-dasharray: 10px 10px;
    stroke-width: 0.4rem;
}

/* 2025-08-22 */
/* rect.matchBox-detail-background.actuals,
text.matchBox-detail-text.actuals,
line.matchBox-detail-connector.actuals {
    opacity: 1;
    transition: all 0.2s ease-in-out;
} */

/* rect.matchBox-detail-background, */
/* rect.matchBox-detail, */
/* text.matchBox-detail-text, */
/* text.matchBox-detail, */
/* line.matchBox-detail-connector, */
/* line.matchBox-detail {
    opacity: 1; */
/* transition in */
/* transition: all 0.2s ease-in-out; */
/* } */

/* line.matchBox-detail {
    stroke-width: 1;
} */

/* rect.matchBox.win, */
/* rect.matchBox-detail-background.win, */
/* rect.matchBox-detail.win {
    fill: var(--green-700);
} */
/* line.matchBox-detail-connector.win, */
/* line.matchBox-detail.win {
    stroke: var(--green-700);
} */

/* rect.matchBox.draw, */
/* rect.matchBox-detail-background.draw, */
/* rect.matchBox-detail.draw {
    fill: var(--cool-grey-700);
} */
/* line.matchBox-detail-connector.draw, */
/* line.matchBox-detail.draw {
    stroke: var(--cool-grey-700);
} */

/* default */
/* rect.matchBox.lose, */
/* rect.matchBox-detail-background.lose, */
/* rect.matchBox-detail.lose {
    fill: var(--red-700);
} */
/* line.matchBox-detail-connector.lose, */
/* line.matchBox-detail.lose {
    stroke: var(--red-700);
} */
/* projection timeline */
/* rect.matchBox.lose.projection,
rect.matchBox-detail-background.lose.projection {
    fill: none;
    stroke: var(--red-700);
    stroke-width: 0.2rem;
    stroke-dasharray: 0.3rem 0.3rem;
} */

/* text.matchBox-label, */
/* text.matchBox {
    fill: var(--cool-grey-100);
    font-weight: 600;
    text-anchor: middle;
} */

/* text.matchBox-detail-text, */
/* text.matchBox-detail {
    fill: var(--cool-grey-100);
    font-weight: 400;
} */

/* UPDATE TO MatchBox and matchBox-detail components */

rect.tlc.matchBox-detail,
text.tlc.matchBox-detail,
line.tlc.matchBox-detail {
    opacity: 1;
    /* transition in */
    transition: all 0.2s ease-in-out;
    stroke-width: 0.3rem;
}

rect.tlc.matchBox-detail.hidden,
text.tlc.matchBox-detail.hidden,
line.tlc.matchBox-detail.hidden {
    opacity: 0;
    /* transition out */
    transition: all 0.2s ease-in-out;
}

text.tlc.matchBox {
    font-weight: 600;
    text-anchor: middle;
}

/* detail text less bold than single-letter result box */
text.tlc.matchBox-detail {
    font-weight: 400;
    font-size: 2.2rem;
}

/* no stroke outline for actuals boxes */
rect.tlc.matchBox.actual,
rect.tlc.matchBox-detail.actual {
    stroke: none;
}

/* shadow for match boxes and match details boxes */
rect.tlc.matchBox,
rect.tlc.matchBox-detail {
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}

/* stroke outline for projection boxes */
rect.tlc.matchBox.projection,
rect.tlc.matchBox-detail.projection {
    /* fix for iOS <=18 failure to show dashed line; */
    /* "rem" seems to be the issue; px, or no unit, possibly fine */
    /* stroke-dasharray: 0.3rem 0.3rem; */
    stroke-dasharray: 3px 3px;
    /* stroke-width: 0.1rem; */
    stroke-width: 0.3rem;

    /* box-shadow: 0 5px 15px var(--shadow-ambient-high-button),
        0 2px 10px var(--shadow-direct-high-button); */
    /* box-shadow: 0px 1px 3px var(--shadow-ambient-high-button); */
    /* 0 2px 10px var(--shadow-direct-high-button); */
    /* filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)); */
}

/* box fill colours for actuals results */
rect.tlc.matchBox.actual.win,
rect.tlc.matchBox-detail.actual.win {
    fill: var(--green-700);
}
rect.tlc.matchBox.actual.draw,
rect.tlc.matchBox-detail.actual.draw {
    fill: var(--cool-grey-700);
}
rect.tlc.matchBox.actual.lose,
rect.tlc.matchBox-detail.actual.lose {
    fill: var(--red-700);
}

/* text colour for actuals results - light on dark box fill */
text.tlc.matchBox.actual,
text.tlc.matchBox-detail.actual {
    /* fill: var(--cool-grey-100); */
    fill: var(--cool-grey-050);
}

/* box fill colour for projection results - light behind dark text of result-coded colours */
rect.tlc.matchBox.projection,
rect.tlc.matchBox-detail.projection {
    fill: var(--cool-grey-050);
}

/* box outline colours for projection results */
rect.tlc.matchBox.projection.win,
rect.tlc.matchBox-detail.projection.win {
    stroke: var(--green-700);
}
rect.tlc.matchBox.projection.draw,
rect.tlc.matchBox-detail.projection.draw {
    stroke: var(--cool-grey-700);
}
rect.tlc.matchBox.projection.lose,
rect.tlc.matchBox-detail.projection.lose {
    stroke: var(--red-700);
}

/* text colours for projection results - dark on light box fill */
text.tlc.matchBox.projection.win,
text.tlc.matchBox-detail.projection.win {
    fill: var(--green-700);
}
text.tlc.matchBox.projection.draw,
text.tlc.matchBox-detail.projection.draw {
    fill: var(--cool-grey-700);
}
text.tlc.matchBox.projection.lose,
text.tlc.matchBox-detail.projection.lose {
    fill: var(--red-700);
}

/* connector line */
line.tlc.matchBox {
    stroke-width: 1;
}

line.tlc.matchBox-detail.win {
    stroke: var(--green-700);
}
line.tlc.matchBox-detail.draw {
    stroke: var(--cool-grey-700);
}
line.tlc.matchBox-detail.lose {
    stroke: var(--red-700);
}

/* if a date has been selected on a timeline chart that is before any of */
/* matches shown, display the earliest match in a faded-out way, for example */
.tlc.matchBox-detail.display-as-future-match {
    opacity: 0.4;
}

/* END UPDATE TO MatchBox and matchBox-detail components */

rect.matchBox-shadowBar {
    fill: silver; /* silver was originally just a placeholder, but it works well */
    opacity: 0.17;
}

/* tooltip-related formatting */

.layer_TLC_tooltips > * {
    /* set all the child elements in this layer not to raise pointer events  */
    /* and override that for the tooltip-zone further below because that rect */
    /* is there to catch user events */
    pointer-events: none;
}

circle.tlc.tooltip-line-circle,
circle.tlc.tooltip-xaxis-circle {
    fill: var(--yellow-600);
    stroke: var(--indigo-400);
    stroke-width: 0.2rem;
    /* ensure there are no pointer events to interfere with/block tooltip zone mousemove events */
    pointer-events: none;
}

circle.tlc.tooltip-line-circle {
    r: 0.7rem;
}

circle.tlc.tooltip-xaxis-circle {
    r: 0.5rem;
}

rect.tlc.tooltip-zone {
    pointer-events: all;
    /* set cursor to be hand pointer */
    cursor: pointer;
    /* stop blue highlighting on click on mobile device */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* see https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic */
    /* for other suggestions if highlighting on non-Chrome devices */
    fill-opacity: 0;
    stroke-opacity: 0;
    z-index: 1000;
}

line.tlc.tooltip-date-axis-to-point-line {
    stroke: var(--cool-grey-900);
    stroke-width: 0.2rem;
    /* fix for iOS <=18 failure to show dashed line; */
    /* "rem" seems to be the issue; px, or no unit, possibly fine */
    /* stroke-dasharray: 0.4rem 0.4rem; */
    stroke-dasharray: 4px 4px;
    /* ensure there are no pointer events to interfere with/block tooltip zone mousemove events */
    pointer-events: none;
}

tspan.tlc.tooltip-text {
    /* font-size: 1.4rem; */
    font-size: 2.4rem;
    color: var(--cool-grey-800);
    text-anchor: middle;
}

tspan.tlc.tooltip-text.date {
    font-weight: 400;
}

tspan.tlc.tooltip-text.rank {
    font-weight: 600;
}

path.tlc.tooltip-path {
    fill: var(--cool-grey-050);
    stroke: var(--cool-grey-900);
    fill-opacity: 0.85;
    opacity: 0.9;
    /* set a drop-shadow to appear outside the path but not within the shape */

    /* filter: drop-shadow(3px 3px 2px rgba(0, 0,     /* add shadow - replace the hard-coded trial below in future */
}

path.tlc.tooltip-line-handle {
    fill: var(--cool-grey-900);
    stroke: var(--cool-grey-050);
    fill-opacity: 1;
}

/* //////////////////////////// */
/* styles for ppm actuals chart */
/* font sizes, etc., are relative to the viewBox dimensions */
/* and the values needed may seem out of sync with  */

.layer_ppmActuals_xAxis > path,
.layer_ppmActuals_yAxis > path {
    stroke: var(--standard-axis-colour);
    stroke-width: 0.15rem;
}

.layer_ppmActuals_xAxis text,
.layer_ppmActuals_yAxis text {
    font-size: 2rem;
    fill: var(--cool-grey-600);
}

text.ppm-actuals.axis.label {
    font-size: 2rem;
    fill: var(--cool-grey-900);
    font-weight: 600;
}

line.ppm-actuals.contour-line {
    stroke-dasharray: 10, 10;
    stroke: var(--cool-grey-500);
    stroke-width: 2;
    opacity: 0.35;
}

text.ppm-actuals.contour-label {
    /* font-size: 4rem; */
    font-size: 4.8rem;
    /* fill: var(--cool-grey-500); */
    fill: var(--cool-grey-050);
    /* stroke: var(--indigo-800); */
    stroke: var(--indigo-900);
    stroke-width: 2;
    font-weight: 900;
    text-anchor: middle; /* centre the text horizontally */
    dominant-baseline: central; /* centre the text vertically */
    /* dominant-baseline: middle sets the text a bit higher (too high) vs the contour line */
    /* opacity: 0.1; */
    opacity: 0.4;
}

/* ppm points on the chart */

circle.ppm-actuals.ppmPoint {
    opacity: 0.7;
    /* r: 8; */
}

circle.ppm-actuals.ppmPoint.teamPPM {
    fill: var(--yellow-600);
    stroke: var(--indigo-400);
    stroke-width: 0.4rem;
    opacity: 1;
    /* r: 10; */
}

circle.ppm-actuals.ppmPoint.goodBoundary {
    fill: var(--green-700);
}

circle.ppm-actuals.ppmPoint.badBoundary {
    fill: var(--red-700);
}

circle.ppm-actuals.ppmPoint.target-team-duplicate {
    opacity: 0;
}

circle.ppm-actuals.ppmPoint.leagueAvg {
    fill: var(--cool-grey-700);
}

/* labels for the ppm points on the chart */

/* text.ppm-actuals.point-label {
    font-size: 1.4rem;
    fill: var(--cool-grey-900);
    font-weight: 400;
} */

/* text.ppm-actuals.point-label.teamPPM {
    font-size: 1.8rem;
    fill: var(--indigo-700);
    font-weight: 600;
} */

/* text.ppm-actuals.point-label.start {
    text-anchor: start;
} */

/* text.ppm-actuals.point-label.end {
    text-anchor: end;
} */

/* tooltip-related formatting */

g.ppm-actuals.tooltipBox.hidden,
g.ppm-actuals.tooltipBox.target-team-duplicate {
    opacity: 0;
}

text > .ppm-actuals.tooltip-text {
    font-size: 2.4rem;
    color: var(--cool-grey-800);
    text-anchor: middle;
    font-weight: 600;
}

text > .ppm-actuals.tooltip-text.hidden {
    opacity: 0;
}

tspan.ppm-actuals.tooltip-text.date {
    font-weight: 400;
}

tspan.ppm-actuals.tooltip-text.rank {
    font-weight: 600;
}

path.ppm-actuals.tooltip-path {
    fill: var(--cool-grey-050);
    stroke: var(--indigo-900);
    fill-opacity: 0.85;
    opacity: 0.9;
    /* set a drop-shadow to appear outside the path but not within the shape */

    /* filter: drop-shadow(3px 3px 2px rgba(0, 0,     /* add shadow - replace the hard-coded trial below in future */
}

path.ppm-actuals.tooltip-path.goodBoundary {
    stroke: var(--green-700);
}

path.ppm-actuals.tooltip-path.badBoundary {
    stroke: var(--red-700);
}

path.ppm-actuals.tooltip-path.leagueAvg {
    stroke: var(--cool-grey-700);
}

/* crosshair-type lines for the point(s) */
line.ppm-actuals.crosshair-line {
    stroke: var(--cool-grey-900);
    stroke-width: 0.1rem;
    /* fix for iOS <=18 failure to show dashed line; */
    /* "rem" seems to be the issue; px, or no unit, possibly fine */
    /* stroke-dasharray: 0.4rem 0.4rem; */
    stroke-dasharray: 4px 4px;
}

/* circles that mark the intersection of the crosshair line with the axis */
circle.ppm-actuals.crosshair-axis-circle {
    fill: var(--yellow-600);
    stroke: var(--indigo-400);
    stroke-width: 0.2rem;
    opacity: 1;
}

/* boundary zones */

text.ppm-actuals.ppmZoneLabel {
    /* font-size: 2rem; */
    font-size: 2.4rem;
    /* default colour; expected to be overwritten by more-specific class combination */
    fill: var(--cool-grey-500);
    text-anchor: middle;
    font-weight: 700;
}

text.ppm-actuals.ppmZoneLabel.goodBoundary {
    fill: var(--green-500);
}

text.ppm-actuals.ppmZoneLabel.badBoundary {
    fill: var(--red-500);
}

path.ppm-actuals.ppmArea {
    opacity: 0.15;
    /* default colour; expected to be overwritten by more-specific class combination */
    fill: var(--cool-grey-100);
}

path.ppm-actuals.ppmArea.goodBoundary {
    fill: var(--green-100);
}

path.ppm-actuals.ppmArea.badBoundary {
    fill: var(--red-100);
}

line.ppm-actuals.threshold {
    stroke-width: 4px;
    opacity: 0.35;
}

line.ppm-actuals.threshold.goodBoundary {
    stroke: var(--green-700);
}

line.ppm-actuals.threshold.badBoundary {
    stroke: var(--red-700);
}

/* toolltip selectors */
.ppm-actuals.tooltip-selectors .title {
    font-size: 2rem;
    color: var(--cool-grey-800);
    font-weight: 700;
    /* text-align: center; */
}

div.ppm-actuals.tooltip-selectors {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 1.2rem;
    align-items: center;
}

label.ppm-actuals.tooltip-selector {
    cursor: pointer;
    font-size: 2.4rem;
    color: var(--cool-grey-800);
    font-weight: 600;
    /* vertical-align: top; */
}

div.ppm-actuals.tooltip-selectors input[type="checkbox"] {
    width: 3rem;
    height: 3rem;
    vertical-align: middle;
    /* cursor: pointer; */
}

/* calendar slider */

circle.ppm-actuals.slider-button {
    fill: var(--cool-grey-900);
    opacity: 1;
    /* set cursor to hand pointer */
    cursor: pointer;
    /* stop blue highlighting on click on mobile device */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* see https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic */
    /* for other suggestions if highlighting on non-Chrome devices */
    /* filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)); */
    filter: drop-shadow(0 5px 15px var(--shadow-ambient-high-button))
        drop-shadow(0 2px 10px var(--shadow-direct-high-button));
}

circle.ppm-actuals.slider-button.hidden {
    opacity: 0;
}

path.ppm-actuals.slider-button-icon {
    fill: var(--cool-grey-050);
    fill-opacity: 1;
    pointer-events: none;
}
path.ppm-actuals.slider-button-icon.hidden {
    fill-opacity: 0;
}

path.ppm-actuals.slider-button-icon.hidden {
    opacity: 0;
}

rect.ppmActuals.slider-zone {
    pointer-events: all;
    fill-opacity: 0;
    stroke-opacity: 0;
    z-index: 1000;
    /* set cursor to hand pointer */
    cursor: pointer;
    /* stop blue highlighting on click on mobile device */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* see https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic */
    /* for other suggestions if highlighting on non-Chrome devices */
}

path.ppmActuals.slider-pointer {
    pointer-events: none; /* ensure there are no pointer events to interfere with/block slider zone mousemove events */
    fill: var(--cool-grey-900);
    fill-opacity: 1;

    filter: drop-shadow(0 5px 15px var(--shadow-ambient-high-button))
        drop-shadow(0 2px 10px var(--shadow-direct-high-button));
}

/* components beneath chart and around slider */

text.ppm-actuals.date-of-data {
    font-size: 2.4rem;
    fill: var(--cool-grey-500);
    font-weight: 700;
    text-anchor: middle;
}

text.ppm-actuals.latest-result-label {
    /* font-size: 2rem; */
    font-size: 2.4rem;
    fill: var(--cool-grey-500);
    font-weight: 600;
    text-anchor: middle;
}

/* slider formatting */
.ppm-actuals-chart .layer_ppmActuals_slider .tick {
    font-size: 1.8rem;
}

/* default background to be invisible; */
/* used when we don't have a match and want to display basic warning */
rect.ppm-actuals.latest-result-background {
    opacity: 0;
}

rect.ppm-actuals.latest-result-background.win {
    fill: var(--green-700);
    opacity: 1;
}

rect.ppm-actuals.latest-result-background.draw {
    fill: var(--cool-grey-700);
    opacity: 1;
}

rect.ppm-actuals.latest-result-background.lose {
    fill: var(--red-700);
    opacity: 1;
}

text.ppm-actuals.latest-result-text {
    /* font-size: 2rem; */
    /* font-size: 2.2rem; */
    font-size: 2.4rem;
    /* default text colour to dark to be used when no match result provided */
    /* and so no background with a result-matching colour should be shown */
    fill: var(--cool-grey-800);
    font-weight: 400;
    text-anchor: middle;
}

text.ppm-actuals.latest-result-text.win,
text.ppm-actuals.latest-result-text.draw,
text.ppm-actuals.latest-result-text.lose {
    fill: var(--cool-grey-100);
}

text.ppm-actuals.prompt,
text.tlc.instruction {
    font-size: 2.2rem;
    fill: var(--cool-grey-500);
    font-weight: 700;
    text-anchor: middle;
    font-style: italic;
}

.body-container {
    max-width: 60rem;
}

/*****************************************************/
/* Media queries */
/*****************************************************/

@media screen and (min-height: 30em) {
    .analysis-panel {
        margin-top: 2.4rem;
    }
}

@media screen and (min-width: 70em) {
    .body-container {
        max-width: 120rem;
    }

    section.snap-point,
    main {
        /* scroll-margin-top: 17.8rem; */
        scroll-margin-top: 16.5rem;
    }

    /* main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    } */

    /* increase height of navbar items */
    .header-navbar {
        border-top: 0.6rem solid var(--orange-vivid-700);
        height: 7.2rem;
    }

    .header-navbar > .main-nav.home-link {
        font-size: 2rem;
    }

    /* .header-title {
        font-size: 3rem;
    } */

    .menu-icon {
        width: 40px;
        height: 40px;
    }

    .league-selectors-header {
        padding-top: 2.4rem;
    }

    .league-selectors {
        padding: 1.2rem 0;
    }

    div.hierarchy-selector {
        /* font-size: 2.4rem; */
        font-size: 1.8rem;
    }

    /* apply the font size set for hierarchy-selector to the actual elements; */
    /* setting it to inheit it from the parent element both increases the font */
    /* size and increases the width of the element */
    #leagues,
    #teams {
        font-size: inherit;
    }

    /* increase size of the bespoke dropdown arrows */
    div.hierarchy-selector::after {
        width: 2rem;
        height: 1.6rem;
    }

    /* increase margin above first analysis panel to allow for the increaed */
    /* height of the selector row */
    #performance-section {
        /* margin-top: 6.4rem; */
        margin-top: 4.8rem;
    }

    .analysis-panel {
        /* padding: 3.2rem; */
        padding: 2.4rem;
    }

    button.info-icon {
        /* margin-top: -2.4rem; */
        margin-top: -1.6rem;
    }

    .info-icon {
        width: 4rem;
        height: 4rem;
    }

    #performance-section {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    #recent-performance-intro {
        grid-column: 1;
        grid-row: 1;
    }

    #recent-performance-charts {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        /* grid-template-columns: 1fr 1fr; */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3.2rem;
    }

    #recent-performance-bridge-chart {
        grid-row: 1;
        grid-column: 1;
    }

    #recent-performance-actuals-timeline-chart {
        grid-row: 1;
        grid-column: 2;
    }

    #ppm-chart-and-projected-tlc {
        grid-column: 1;
        grid-row: 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3.2rem;
    }

    #ppm-section {
        grid-row: 1;
        grid-column: 1;
    }

    #projections-section {
        grid-row: 1;
        grid-column: 2;
    }

    /* wider rank boxes, aligned with change in height for .rank-box, for the base projection */
    .projections-base-case {
        grid-template-columns: 1fr 14rem 5rem 14rem 1fr;
    }

    #extreme-projections-section {
        grid-column: 1;
        grid-row: 4;
        display: grid;
        /* grid-template-columns: repeat(4, 1fr); */
        grid-template-columns: 1fr 3.2rem 1fr 3.2rem 1fr 3.2rem 1fr;
        grid-template-rows: auto;
    }

    #extreme-projections-intro {
        grid-row: 1;
        grid-column: 1 / span 7;
    }

    #wdl-bw-ww-chart {
        grid-row: 2;
        /* grid-column: 1 / span 2; */
        grid-column: 1 / span 3;
    }

    #wdl-bw-dd-chart {
        grid-row: 2;
        /* grid-column: 3 / span 2; */
        grid-column: 5 / span 3;
    }

    #wdl-bw-ll-chart {
        grid-row: 3;
        /* grid-column: 2 / span 2; */
        grid-column: 3 / span 3;
        margin-top: 3.2rem;
    }

    .heading-primary {
        /* font-size: 3.6rem; */
        font-size: 3rem;
    }

    .heading-secondary {
        /* font-size: 2.4rem; */
        font-size: 2rem;
    }

    .bridge-summary,
    .analysis-summary {
        /* font-size: 2rem; */
        /* font-size: 1.6rem; */
        font-size: 1.4rem;
    }

    .performance-bridge {
        grid-template-columns: 1fr 14rem 5rem 14rem 1fr;
    }

    .performance-bridge #rank-change-drivers {
        grid-template-columns: 1fr 12rem 4rem 12rem 4rem 12rem 1fr;
    }

    .rank-box {
        height: 14rem;
    }

    .rank-box > .line-1,
    .rank-box > .line-3 {
        font-size: 2rem;
    }

    .driver-rank-box {
        height: 12rem;
    }

    .driver-rank-box > .line-1 {
        font-size: 1.4rem;
    }

    .driver-rank-box > .line-2 {
        font-size: 3.6rem;
    }

    /* create gap between final analysis panel and footer */
    .footer {
        margin-top: 3.2rem;
        /* font-size: 2rem; */
        font-size: 1.6rem;
        height: 8.4rem;
    }
}