/* base.css */

@font-face {
  font-family: 'NotoSans';
  src: url("/static/fonts/NotoSans-Regular.c8e58befd243.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --primary-color: #228B22; 
  --secondary-color: #FFBF00;
  --text-color-dark: #222; 
  --text-color-light: #333; 
}

body {
  font-family: 'NotoSans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary-color);
}

h1 .step-number, h2 .step-number, h3 .step-number, h4 .step-number, h5 .step-number, h6 .step-number {
  color: var(--secondary-color);
}

h1 .step-text, h2 .step-text, h3 .step-text, h4 .step-text, h5 .step-text, h6 .step-text {
  color: var(--primary-color);
}

a, p {
  color: var(--text-color-light);
}

.icon-primary {
  color: var(--secondary-color);
}

.card-title-primary {
  color: var(--primary-color);
}

.nav-link {
  color: var(--primary-color) !important;
  transition: color 0.3s ease;
}

.nav-link:hover, .nav-link:focus {
  color: var(--secondary-color) !important; /* Slightly darker shade on hover/focus */
}

.nav-link.active {
  color: var(--secondary-color) !important; /* Slightly darker shade when active */
}

.navbar-toggler {
  border-color: var(--primary-color) !important;
}

.navbar-toggler-icon { 
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(34, 139, 34, 1)' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); 
}

.text-custom-title {
  text-align: left;
  font-size: 1.25rem; /* Adjust the font size as needed */
  color: var(--primary-color); /* Use the primary color defined in :root */
}

.text-custom-subtitle {
  text-align: left;
  font-size: 1.0rem; /* Adjust the font size as needed */
  color: var(--primary-color); /* Use the primary color defined in :root */
}

.border-custom {
  border-color: var(--primary-color) !important;
  border-radius: 10px; 
}


.custom-checkbox:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}


.custom-table {
  color: var(--primary-color) !important;
  border: 1px solid var(--secondary-color);
}

.custom-table .list-group-item {
  border-color: var(--secondary-color);
}


.clear-button {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: #aaa;
}

.clear-button:hover {
  color: #000;
}

.custom-card {
  border: 2px solid var(--secondary-color); /* Use the secondary color defined in :root */
  border-radius: 15px; /* Adjust the border-radius as needed */
}

.custom-btn {
  background: linear-gradient(90deg, rgba(255, 191, 0, 1) 0%, rgba(204, 153, 0, 1) 100%) !important;
  border: none !important;
  color: #fff !important;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.custom-price-btn {
  background: linear-gradient(90deg, rgb(0, 204, 34) 0%, rgb(4, 130, 20) 100%) !important;
  border: none !important;
  color: #fff !important;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.custom-btn:hover {
  background: linear-gradient(90deg, rgba(204, 153, 0, 1) 0%, rgba(255, 191, 0, 1) 100%) !important; /* Ensure the background is not white */
  color: #fff !important; /* Ensure the text color remains white */
  transform: scale(1.05);
}

.custom-price-btn:hover {
  background: linear-gradient(90deg, rgba(4, 130, 20) 0%, rgba(0, 204, 34) 100%) !important; /* Ensure the background is not white */
  color: #fff !important; /* Ensure the text color remains white */
  transform: scale(1.05);
}

.custom-btn:active {
  transform: scale(0.95);
}

/* Additional styles for the file input label */
label.custom-btn {
  display: inline-block;
  margin-bottom: 0;
}


.custom-danger-btn {
  background: linear-gradient(90deg, rgba(255, 77, 77, 1) 0%, rgba(204, 0, 0, 1) 100%) !important;
  border: none !important;
  color: #fff !important;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.custom-danger-btn:hover {
  background: linear-gradient(90deg, rgba(204, 0, 0, 1) 0%, rgba(255, 77, 77, 1) 100%) !important;
  color: #fff !important;
  transform: scale(1.05);
}

.custom-danger-btn:active {
  transform: scale(0.95);
}


/* Hide the original file input */
input[type="file"] {
  display: none;
}


/* Ensure proper alignment of table rows and cells */
.table tbody tr {
  margin: 0;
  padding: 0;
}

.table tbody tr td {
  padding: 0.5rem 0; /* Adjust padding as needed */
}

.table tbody tr td p {
  margin: 0;
  padding: 0;
}

/* Custom styles for tables if needed */
.table thead th {
    color: var(--primary-color) !important;
    vertical-align: middle;
    text-align: center;
}

.text-primary {
  color: var(--primary-color) !important;
}


/* Custom styles for language switcher buttons */
.language-switcher .btn-outline-secondary {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.language-switcher .btn-outline-secondary.active {
  background-color: var(--secondary-color);
  color: white;
}


@keyframes colorWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.color-wave {
  background: linear-gradient(270deg, var(--primary-color), var(--secondary-color), var(--primary-color));
  background-size: 200% 200%;
  animation: colorWave 5s ease infinite;
}

.recommended-badge {
  position: absolute;
  top: -15px; /* Adjust this value to position the button on top of the card's edge */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.color-wave-small {
  background: linear-gradient(270deg, var(--primary-color), var(--secondary-color), var(--primary-color));
  background-size: 200% 200%;
  animation: colorWave 5s ease infinite;
  border: none;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
}


/* Custom styles for the wave background */
.wave-bg {
  background: linear-gradient(45deg, 
    #73f273,   /* Lighter bright blue */
    #6dabf2,  /* Lighter purple */
      rgba(242, 131, 245, 0.7)   /* Lighter cyan */
  );
  background-size: 200% 200%;
  animation: backgroundWave 15s ease-in-out infinite;
}

@keyframes backgroundWave {
  0% {
      background-position: 0% 25%;
  }
  25% {
      background-position: 50% 50%;
  }
  50% {
      background-position: 100% 75%;
  }
  75% {
      background-position: 50% 50%;
  }
  100% {
      background-position: 0% 25%;
  }
}


.form-control {
  border: 2px solid var(--primary-color) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%; /* or a chosen max-width */
  font-size: 1rem;
}

.form-check-input {
  border: 2px solid var(--primary-color) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
  position: relative;
  margin-top: 0.25em;
}

.form-check-input:checked {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.form-check-input:focus {
  outline: none;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(34, 139, 34, 0.25); /* Based on your primary color */
}

.form-check-input:hover {
  transform: scale(1.05);
  border-color: var(--primary-color) !important;
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-label {
  margin-left: 0.5rem;
  font-size: 0.9rem;
  vertical-align: middle;
}

.form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
/* ---------------------------------------------------------------------------
   Store buttons.

   One definition, loaded on every page, because six templates each carried
   their own copy and they had drifted: the same two buttons looked different
   on the app page and on the dashboards. The markup lives in
   templates/partials/_store_buttons.html and nowhere else.
   --------------------------------------------------------------------------- */

.store-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}

.store-btns.store-btns-stacked {
  flex-direction: column;
  flex-wrap: nowrap;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}

.store-btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18);
}

.store-btn i {
  font-size: 1.05rem;
}

/* On a light card. */
.store-btn-primary { background: #1c1c1e; color: #fff; }
.store-btn-primary:hover { background: #000; color: #fff; }
.store-btn-secondary { background: transparent; color: #1c1c1e; border-color: #1c1c1e; }
.store-btn-secondary:hover { background: #1c1c1e; color: #fff; }

/* On the gradient heroes, where a dark outline disappears. */
.store-btns-on-dark .store-btn-primary { background: #fff; color: #14321c; }
.store-btns-on-dark .store-btn-primary:hover { background: #fff; color: #14321c; }
.store-btns-on-dark .store-btn-secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.75); }
.store-btns-on-dark .store-btn-secondary:hover { background: #fff; color: #14321c; }

/* The logo is one 500px master served through <picture>, so the size it is
   drawn at is decided here rather than by a height attribute repeated across
   four templates. The intrinsic width and height stay on the <img> so the
   browser reserves the space before the bytes arrive. */
.navbar-logo,
.footer-logo,
.login-logo {
    width: auto;
    max-width: none;
}

.navbar-logo { height: 50px; }
.footer-logo { height: 45px; }
.login-logo  { height: 75px; }

/* The cookie table in the privacy policy is prose, not a dashboard. The two
   rules above are written for the prediction tables, where cells are numbers
   packed tight and headings are centred over them; a table of sentences needs
   room to breathe and headings above the column they name. */
.stacking-table thead tr th,
.stacking-table tbody tr td {
    padding: .6rem .75rem;
    vertical-align: top;
}

.stacking-table thead tr th {
    text-align: left;
    white-space: nowrap;
}

.stacking-table td code {
    white-space: nowrap;
}

/* Four columns of sentences do not fit a phone, and sideways scrolling is not
   reading. Below the tablet breakpoint each row becomes its own block and
   every value is introduced by the heading it sat under.

   Used by the cookie table on the privacy policy. Any table whose rows are
   readable on their own can opt in with class="stacking-table" and a
   data-label on each cell. The archive tables lay out their own cards. */
@media (max-width: 767.98px) {
    .stacking-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .stacking-table,
    .stacking-table tbody,
    .stacking-table tbody tr,
    .stacking-table tbody tr td,
    .stacking-table tbody tr th {
        display: block;
        width: 100%;
    }

    .stacking-table tbody tr {
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: .5rem;
        margin-bottom: 1rem;
        padding: .25rem 0;
    }

    .stacking-table tbody tr td,
    .stacking-table tbody tr th {
        border: 0;
        padding: .45rem .9rem;
        text-align: left;
    }

    .stacking-table tbody tr td::before,
    .stacking-table tbody tr th::before {
        content: attr(data-label);
        display: block;
        font-size: .78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: var(--primary-color);
        margin-bottom: .15rem;
    }
}

/* The archive tables: concluded matches and our record in each market.

   Numbers are right aligned in a real table and left aligned once the table
   has stacked into labelled blocks, where a value floating away from its own
   label just reads as a mistake. Bootstrap's text-end carries !important and
   cannot be undone at a breakpoint, so alignment lives here instead. */
@media (min-width: 768px) {
    .archive-table .archive-num {
        text-align: right;
    }
}
.archive-table th,
.archive-table td {
    border-color: rgba(0, 0, 0, .07);
}

/* **Every cell starts at the top, a row header exactly like an ordinary cell.**
   A row is as tall as its tallest cell and these cells are not the same
   height: "Our call" is three lines, a date is one. Centring the short ones
   floated them into the middle of the tall ones, so a row read as a staircase
   rather than a line, and the eye lost which value belonged to which column.
   This has to name `th` as well as `td`: the match name is a row header, and a
   rule written for `td` alone left that one column sitting 20px lower than the
   six beside it.

   `baseline`, not `top`. A row mixes sizes on purpose, a figure at 1.05rem
   over its sample size at .68rem, and `top` lines up the boxes rather than the
   writing, so a larger figure still sat two or three pixels high. `baseline`
   puts the first line of every cell on one line however big it is set, which
   is what a reader actually sees. */
.archive-table > thead > tr > th,
.archive-table > tbody > tr > th,
.archive-table > tbody > tr > td {
    vertical-align: baseline;
}

.archive-table thead th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-color-light);
}

/* The verdict is the last line of a call, under its price, and starts where
   the pick and the price start. It used to trail the pick with a left margin;
   once the price moved under the pick the verdict wrapped under it too, and
   the margin only pushed it out of line with the two lines above. */
.archive-hit,
.archive-miss {
    display: block;
    width: max-content;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .1rem .4rem;
    border-radius: .25rem;
    margin-top: .3rem;
}

.archive-hit {
    background: rgba(34, 139, 34, .12);
    color: #176617;
}

.archive-miss {
    background: rgba(0, 0, 0, .06);
    color: #6c757d;
}

/* The match archive as a table, from 1200px.

   The site-wide table rules near the top of this file are written for the
   dashboard's prediction tables: no gutter between cells and every heading
   centred. This table needs a gutter so two columns never touch, and each
   heading over the column it names. A row header is a cell too, so the match
   name gets the same gutter as the date beside it.

   A call, its price and its verdict belong on one line. Letting them wrap
   makes one row twice the height of its neighbours and the column reads as
   ragged rather than dense. The column widens instead. */
@media (min-width: 1200px) {
    .archive-match-table > thead > tr > th,
    .archive-match-table > tbody > tr > th,
    .archive-match-table > tbody > tr > td {
        padding: .6rem .75rem;
    }

    .archive-match-table > thead > tr > th {
        text-align: left;
        white-space: nowrap;
    }

    .archive-match-table .archive-call {
        white-space: nowrap;
    }
}

/* The price that stood beside a call when we published it. */
/* The price we recorded beside a pick is support for the pick, not a second
   headline, so it sits under it rather than trailing along the same line. */
.archive-odds {
    display: block;
    font-variant-numeric: tabular-nums;
    font-size: .68rem;
    line-height: 1.25;
    color: #6c757d;
    margin-top: .1rem;
}

/* A row that is the same call read at a safer line, not a pick of its own. */
.archive-derived th[scope="row"] {
    font-weight: 400;
}

.archive-note {
    display: block;
    font-size: .75rem;
    color: #6c757d;
}

/* The app is the only thing this site asks anyone to do, so its button carries
   a little more weight than an ordinary one and lifts on hover. */
.navbar-cta {
    font-weight: 600;
    box-shadow: 0 .25rem .75rem rgba(34, 139, 34, .25);
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

.navbar-cta:hover,
.navbar-cta:focus {
    transform: translateY(-1px);
    box-shadow: 0 .4rem 1rem rgba(34, 139, 34, .32);
}

/* The sport menus. Bootstrap opens these on click; inside the collapsed mobile
   panel they sit in the flow instead of floating over the page, so the card
   treatment is applied only where the menu actually floats. */
.navbar .dropdown-menu {
    padding: .35rem;
}

@media (min-width: 992px) {
    .navbar .dropdown-menu {
        box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
    }
}

.navbar .dropdown-item {
    border-radius: .5rem;
}

@media (max-width: 991.98px) {
    .navbar .dropdown-menu {
        border: 0;
        box-shadow: none;
        padding-left: 1.25rem;
    }

    .navbar-cta {
        width: 100%;
        text-align: center;
        margin-top: .5rem;
    }
}

/* The record table on a phone. Four labelled lines per market is eight lines
   for one row and forty for the table; a market reads perfectly well as its
   name over three figures. */
@media (max-width: 767.98px) {
    .archive-record-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .archive-record-table,
    .archive-record-table tbody {
        display: block;
    }

    .archive-record-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* A grid item is not a table cell, so `vertical-align` does nothing
           here and the alignment has to be asked for again. Without it the
           hit rate, set larger than the two counts beside it, sat five pixels
           above them. */
        align-items: baseline;
        gap: .4rem .5rem;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: .5rem;
        padding: .7rem .85rem;
        margin-bottom: .75rem;
    }

    .archive-record-table tbody tr > th,
    .archive-record-table tbody tr > td {
        border: 0;
        padding: 0;
        text-align: left;
        /* One line box for all three, so the values under the labels share a
           baseline. `align-items: baseline` lines up the first line, which is
           the label; the second line only follows it when the text on it is
           set the same. */
        line-height: 1.35;
    }

    .archive-record-table .archive-stat-rate {
        font-size: 1rem;
        line-height: 1.35;
    }

    .archive-record-table tbody th[scope="row"] {
        grid-column: 1 / -1;
        font-size: .95rem;
    }

    .archive-record-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: var(--primary-color);
        margin-bottom: .1rem;
    }
}

/* The "how the record changes" table: one row per venue or per competition,
   one cell per market, each carrying its own sample size. */
/* **The figure first, on its own line; what it rests on underneath, smaller.**
   These cells used to read "64% from 221" as one run of text at one size, and
   with six of them across a row the eye could not tell where one column's
   value ended and the next began. The number is what the reader came for, so
   it gets the line and the weight; the sample size is support, so it goes
   under it, smaller and grey, where it can wrap without pushing anything
   sideways. The same shape is used in every table on these pages. */
.archive-stat {
    line-height: 1.2;
    padding-top: .55rem;
    padding-bottom: .55rem;
    /* A gutter, so two columns of numbers can never touch even when both are
       at their widest. */
    padding-left: .85rem;
    padding-right: .85rem;
}

.archive-stat-rate {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.archive-stat-n {
    display: block;
    font-size: .68rem;
    line-height: 1.25;
    color: #6c757d;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    margin-top: .12rem;
    /* Support text may wrap. It is the headline that must never move. */
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
}

.archive-split-table thead th {
    font-size: .7rem;
    line-height: 1.2;
}

/* On a phone the row becomes a card: the slice it describes on one line, then
   its five markets flowing three across. Five labelled blocks stacked would be
   twenty five lines per team and unreadable. */
@media (max-width: 767.98px) {
    .archive-split-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .archive-split-table,
    .archive-split-table tbody {
        display: block;
    }

    .archive-split-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem .5rem;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: .5rem;
        padding: .7rem .85rem;
        margin-bottom: .75rem;
    }

    .archive-split-table tbody tr > th,
    .archive-split-table tbody tr > td {
        border: 0;
        padding: 0;
        text-align: left;
    }

    .archive-split-table tbody th[scope="row"] {
        grid-column: 1 / -1;
        font-size: .95rem;
    }

    .archive-split-table .archive-stat::before {
        content: attr(data-label);
        display: block;
        font-size: .65rem;
        line-height: 1.15;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: var(--primary-color);
        margin-bottom: .15rem;
        /* "Over or under 2.5 goals" wraps to two lines and its neighbours do
           not, which left the figures in a row sitting at three different
           heights. Reserving the taller of the two lands them all on one. */
        min-height: 2.3em;
    }
}

/* The A to Z on the team index, and the country groups on the competition
   index: dense lists of links that should still breathe on a phone. */
.archive-link-list {
    columns: 3 14rem;
    column-gap: 2rem;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.archive-link-list li {
    break-inside: avoid;
    padding: .18rem 0;
}

@media (max-width: 575.98px) {
    .archive-link-list {
        columns: 1;
    }
}


/* The match archive below 1200px.

   Four calls beside a date, a match, a competition and a score need more room
   than a tablet or a small laptop has. With three calls the table already ran
   48px wider than its card at 768px and pushed the whole page sideways; with
   four, the team page folded match names onto three lines at 1100px and still
   poked out of its card. Measured on the full width card, every row fits on
   one line from 1400px, and only the longest names fold to two from 1200px.
   So below 1200px each row becomes a small card: when and where on one line,
   the match and its score on the next, then the four calls, each under its
   own label.

   Not the generic `stacking-table`. That pattern gives every cell a labelled
   line of its own, which made fifty matches three hundred labelled blocks and
   a page twenty thousand pixels tall, and it switches at 768px, which is far
   too late for this table. So the card is written out whole here.

   One twelve column grid carries every width. Twelve splits into thirds for
   the date and the competition, and into quarters or halves for the calls:
   four across on a tablet, two by two on a phone. */
@media (max-width: 1199.98px) {
    .archive-match-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .archive-match-table,
    .archive-match-table tbody {
        display: block;
        width: 100%;
    }

    .archive-match-table tbody tr {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        align-items: baseline;
        gap: .15rem .6rem;
        padding: .7rem .85rem;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: .5rem;
        margin-bottom: 1rem;
    }

    .archive-match-table tbody tr > th,
    .archive-match-table tbody tr > td {
        display: block;
        border: 0;
        padding: 0;
        text-align: left;
    }

    /* The date is a fixed ten characters, so it takes a third; the
       competition takes the other two, because "UEFA Europa Conference
       League" in a third of 390px wraps to three lines and pushes the whole
       card down. */
    .archive-match-table td[data-label="Date"] {
        order: 1;
        grid-column: 1 / 5;
        font-size: .78rem;
        color: #6c757d;
    }

    .archive-match-table td[data-label="Competition"] {
        order: 2;
        grid-column: 5 / 13;
        text-align: right;
        font-size: .72rem;
        color: #6c757d;
    }

    /* The score is four characters at most, so the match name takes all but a
       sixth. At two thirds, a long pairing ran to three lines on a phone. */
    .archive-match-table th[data-label="Match"] {
        order: 3;
        grid-column: 1 / 11;
        font-weight: 600;
    }

    .archive-match-table td[data-label="Score"] {
        order: 4;
        grid-column: 11 / 13;
        text-align: right;
        font-weight: 600;
    }

    /* The calls sit on one baseline, so a verdict is always under the market
       it belongs to. Every call is placed by name: a layout that named only
       some of them once left the safer line adrift in a cell of its own. */
    .archive-match-table td[data-label="Result call"] {
        order: 5;
        grid-column: 1 / 4;
    }

    .archive-match-table td[data-label="Double chance"] {
        order: 6;
        grid-column: 4 / 7;
    }

    .archive-match-table td[data-label="Goals call"] {
        order: 7;
        grid-column: 7 / 10;
    }

    .archive-match-table td[data-label="Safer line"] {
        order: 8;
        grid-column: 10 / 13;
    }

    .archive-match-table .archive-call {
        font-size: .82rem;
        margin-top: .4rem;
    }

    /* Only the calls carry a label. The date, the score and the match name
       say what they are. */
    .archive-match-table .archive-call::before {
        content: attr(data-label);
        display: block;
        font-size: .62rem;
        font-weight: 600;
        line-height: 1.15;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: var(--primary-color);
        margin-bottom: .15rem;
    }
}

/* A quarter of a phone is about 65px, and "Home or draw" and its label need
   more than that, so on a phone the calls go two by two: the two result
   markets on one line, the two goals markets under them. */
@media (max-width: 575.98px) {
    .archive-match-table td[data-label="Result call"],
    .archive-match-table td[data-label="Goals call"] {
        grid-column: 1 / 7;
    }

    .archive-match-table td[data-label="Double chance"],
    .archive-match-table td[data-label="Safer line"] {
        grid-column: 7 / 13;
    }
}


/* ---------------------------------------------------------------------------
   The ranked charts on the most predictable page.

   One series, so one colour: #228B22, the brand green, which clears the
   lightness band, the chroma floor and 3:1 against a white surface. Colouring
   the bars by their own value would spend the identity channel re-encoding
   what the bar length already says.

   Bars are thin, run from a zero baseline across the full 0 to 100 range, and
   round only at the data end. The hairline rule inside each track is our rate
   across the whole archive in that market.
   --------------------------------------------------------------------------- */
:root {
    --chart-mark: #228B22;
    --chart-track: rgba(11, 11, 11, .06);
    --chart-rule: #898781;
}

.rank-chart th,
.rank-chart td {
    border-color: rgba(0, 0, 0, .07);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.rank-chart thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-color-light);
    font-weight: 600;
}

.rank-head-position { width: 2.5rem; }
.rank-head-bar { width: 34%; }

.rank-position {
    font-variant-numeric: tabular-nums;
    color: #898781;
    font-size: .85rem;
}

.rank-name {
    font-weight: 500;
    line-height: 1.25;
}

.rank-context {
    display: block;
    font-size: .72rem;
    color: #898781;
    font-weight: 400;
    /* One line, always. Letting it wrap made every third row a different
       height and the column read as ragged; the full text is on the row's
       title either way. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-bar-cell { vertical-align: middle; }

.rank-track {
    position: relative;
    display: block;
    height: 14px;
    background: var(--chart-track);
    border-radius: 2px;
}

.rank-bar {
    display: block;
    height: 100%;
    background: var(--chart-mark);
    /* Square where it leaves the baseline, rounded at the data end. */
    border-radius: 0 4px 4px 0;
}

.rank-average {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 1px;
    background: var(--chart-rule);
    z-index: 1;
}

.rank-rate {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* On a phone the row becomes three lines: who, the bar, and the rate. */
@media (max-width: 767.98px) {
    .rank-chart thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .rank-chart,
    .rank-chart tbody {
        display: block;
    }

    .rank-chart tbody tr {
        display: grid;
        grid-template-columns: 1.6rem 1fr auto;
        align-items: baseline;
        gap: .1rem .6rem;
        border: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .07);
        padding: .6rem 0;
    }

    .rank-chart tbody tr > th,
    .rank-chart tbody tr > td {
        border: 0;
        padding: 0;
        text-align: left;
    }

    .rank-chart .rank-position { grid-column: 1; grid-row: 1; }
    .rank-chart .rank-name { grid-column: 2; grid-row: 1; }
    .rank-chart .rank-rate { grid-column: 3; grid-row: 1; text-align: right; }

    .rank-chart .rank-bar-cell {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: .35rem;
    }
}


/* ---------------------------------------------------------------------------
   The most predictable page: twenty rankings, five markets, one screen.

   The market bar sticks under the navbar so no ranking is ever more than one
   click from any other, and each section clears both bars when jumped to.
   --------------------------------------------------------------------------- */
:root {
    --navbar-height: 76px;
    /* The market bar's own height, measured: .6rem of padding top and bottom,
       a 33px pill and two hairline borders. The section header stacks directly
       under it, so the two numbers have to agree or the header tucks a few
       pixels behind the bar. */
    --market-bar-height: 55px;
}

.market-nav {
    position: sticky;
    top: var(--navbar-height);
    z-index: 1019;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .06);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .03);
}

.market-nav-scroll {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 0;
    overflow-x: auto;
    /* Five pills do not fit 390px, so the row scrolls rather than wrapping
       into a block that pushes the page down on every phone. */
    scrollbar-width: none;
}

.market-nav-scroll::-webkit-scrollbar { display: none; }

.market-nav-label {
    flex: none;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #898781;
    padding-right: .35rem;
}

.market-pill {
    flex: none;
    display: inline-block;
    padding: .35rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .1);
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-color-light);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.market-pill:hover,
.market-pill:focus {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.market-section {
    /* Clears the navbar, the market bar and the sticky section header. */
    scroll-margin-top: calc(var(--navbar-height) + var(--market-bar-height));
    padding-top: 1.5rem;
}

/* The section header sticks for as long as its own section is on screen, so
   the market name and the active ranking stay with the table they describe.
   Four tables under one heading meant that by the third you could no longer
   tell what you were reading. */
.market-header {
    position: sticky;
    top: calc(var(--navbar-height) + var(--market-bar-height));
    z-index: 1018;
    background: #f9f9f7;
    padding: 1rem 0 .65rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid rgba(34, 139, 34, .18);
}

.market-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .35rem 1.5rem;
}

.market-header-main { min-width: 0; }

/* The chart key. It sits as a chip rather than inline in a sentence: an
   inline-flex box takes its baseline from its first child, and with a bare
   rule as that child every browser hung it a few pixels above the text beside
   it. */
.market-average {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    font-size: .8rem;
    color: #52514e;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(11, 11, 11, .05);
}

.market-average-rule {
    display: block;
    width: 1px;
    height: .9rem;
    background: var(--chart-rule);
}

/* One ranking at a time. The tab that is open is the page's answer to "what
   am I looking at", so it has to read as selected at a glance. */
.rank-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: .35rem;
    margin: .85rem 0 0;
    padding: 0 0 .1rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.rank-tabs::-webkit-scrollbar { display: none; }

.rank-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    background: #fff;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-color-light);
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.rank-tab i { font-size: .8rem; }

.rank-tab:hover { border-color: var(--primary-color); color: var(--primary-color); }

.rank-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 .2rem .5rem rgba(34, 139, 34, .25);
}

.rank-tab.active i { color: #fff; }

/* Repeated inside the panel as well as on the tab. The tab is the control and
   the caption is the label, and a reader deep in a table of twenty rows should
   not have to look up to either. */
.rank-pane-caption {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #898781;
}

.rank-pane-caption i { color: var(--primary-color); }

@media (max-width: 991.98px) {
    :root { --navbar-height: 62px; }
}