/* 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 and by the match and accuracy
   tables on the archive pages. Any table whose rows are readable on their own
   can opt in with class="stacking-table" and a data-label on each cell. */
@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);
}

.archive-hit,
.archive-miss {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .1rem .4rem;
    border-radius: .25rem;
    margin-left: .35rem;
    vertical-align: middle;
}

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

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

/* 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: 768px) {
    .archive-match-table td[data-label="Our call"],
    .archive-match-table td[data-label="Goals call"],
    .archive-match-table td[data-label="Safer line"] {
        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.25;
    padding-top: .6rem;
    padding-bottom: .6rem;
    /* 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 on a phone.

   The generic stacking pattern gives every cell its own labelled line, which
   is right for four columns of sentences and wrong here: fifty matches became
   three hundred labelled blocks and a page twenty thousand pixels tall. A
   match reads naturally as a few short lines, so below the tablet breakpoint
   each row becomes a small card laid out on a two column grid. */


/* 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: 768px) {
    .archive-match-table td[data-label="Our call"],
    .archive-match-table td[data-label="Goals call"],
    .archive-match-table td[data-label="Safer line"] {
        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);
        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;
    }

    .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. */
.archive-stat {
    line-height: 1.2;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.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 on a phone.

   The generic stacking pattern gives every cell its own labelled line, which
   is right for four columns of sentences and wrong here: fifty matches became
   three hundred labelled blocks and a page twenty thousand pixels tall. A
   match reads naturally as three short lines, so below the tablet breakpoint
   each row becomes a small card laid out on a two column grid. */
@media (max-width: 767.98px) {
    .archive-match-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: baseline;
        gap: .15rem .6rem;
        padding: .7rem .85rem;
    }

    .archive-match-table tbody tr > th,
    .archive-match-table tbody tr > td {
        border: 0;
        padding: 0;
    }

    /* When and where, on one line above the match. The date is a fixed ten
       characters so it takes one 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;
        font-size: .78rem;
        color: #6c757d;
    }

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

    .archive-match-table th[data-label="Match"] {
        order: 3;
        grid-column: 1 / 3;
        font-weight: 600;
    }

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

    /* The three calls take a third of the width each and sit on one baseline,
       so a verdict is always under the market it belongs to. They used to be
       placed by two rules that disagreed, and the one that won named only two
       of the three, which left the safer line adrift in a cell of its own. */
    .archive-match-table td[data-label="Our call"] {
        order: 5;
        grid-column: 1;
    }

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

    .archive-match-table td[data-label="Safer line"] {
        order: 7;
        grid-column: 3;
    }

    .archive-match-table td[data-label="Our call"],
    .archive-match-table td[data-label="Goals call"],
    .archive-match-table td[data-label="Safer line"] {
        font-size: .82rem;
        margin-top: .4rem;
    }

    /* Only those three carry a label. The date, the score and the match name
       say what they are. */
    .archive-match-table td[data-label="Our call"]::before,
    .archive-match-table td[data-label="Goals call"]::before,
    .archive-match-table td[data-label="Safer line"]::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;
    }

    .archive-match-table td[data-label="Date"]::before,
    .archive-match-table td[data-label="Competition"]::before,
    .archive-match-table td[data-label="Score"]::before,
    .archive-match-table tbody tr > th::before {
        display: none;
    }
}


/* ---------------------------------------------------------------------------
   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; }
}