/* The bar across the top and the menu behind it are the site's own blue into green, and they are the
   two brightest things on any page. In the dark theme they keep the blue and lose the green, running
   the site blue down into the darkest colour in the palette instead, so the menu is still
   unmistakably the blue thing rather than a strip of daylight down the side of a dark page. The
   white text on it reads on either.

   Through variables rather than a second rule further down, so that each gradient is written once
   with both its colours beside each other instead of half of it here and half of it at the bottom.

   The menu carries transition: all, so switching the theme cross-fades it over 250ms rather than
   swapping it. That is the right look and it is left alone, but it is worth knowing about: for a
   quarter of a second the menu is genuinely still the old colour, and anything asking the browser
   what colour it is during that window gets the old answer and is not wrong. */
:root {
  --bar-gradient: linear-gradient(90deg, #1897FF 100%, #07E316 100%);
  --menu-gradient: linear-gradient(180deg, #1897FF 10%, #07E316 100%);
}

html[data-bs-theme="dark"] {
  --bar-gradient: linear-gradient(90deg, #0B4D8C 0%, #0B4D8C 100%);
  --menu-gradient: linear-gradient(180deg, #0B4D8C 10%, #0A0E15 100%);
}

.header {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  position: fixed;
  height: 60px !important;
  overflow: hidden;
  z-index: 10;
  background: var(--bar-gradient);
}

/* A percentage minimum height only means something when the thing above has a height of its own, and
   nothing here does, so this was 80% of nothing for years. Measured against the screen instead, less
   the 60px the header sits in, so a short page still fills what you can see and the footer has a
   bottom to be pushed to. */
.main {
  margin: 0 auto;
  display: block;
  min-height: calc(100vh - 60px);
  margin-top: 60px;
  transition: 250ms all ease-in-out;
}

.mainInner {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}

.mainInner div {
  display: table-cell;
  vertical-align: middle;
  font-size: 3em;
  font-weight: bold;
  letter-spacing: 1.25px;
}

/* 98 rather than 1, which is what this was for years and only ever worked by luck. Bootstrap lifts a
   button inside a group to z-index 1 when it is active, hovered or focused, so it can draw its own
   border over its neighbour's. That tied with the menu, and a tie is settled by whichever comes later
   in the document, which is always the page. The result was the selected range button on the stats
   page showing through the menu that was supposed to be covering it, and the same waiting to happen
   on every submit button on the home page the moment one was hovered.

   98 puts it clear of anything the page can reach for on its own while staying under the hamburger at
   99, so the button that closes the menu is still on top of it, and well under the modals, the footer
   and the blocking overlay, all of which are meant to cover the menu. */
#sidebarMenu {
  height: 100%;
  position: fixed;
  left: 0;
  width: 250px;
  margin-top: 60px;
  transform: translateX(-250px);
  transition: all 250ms ease-in-out;
  background: var(--menu-gradient);
  z-index: 98;
}

.sidebarMenuInner {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li {
  list-style: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li.no-linky,
.sidebarMenuInner li.no-linky a {
  cursor: default;
}

.sidebarMenuInner li span {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.50);
}

.sidebarMenuInner li a {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

/* The one item in the menu that is a control rather than somewhere to go. Bootstrap indents a
   form-check to keep room for the box down the left, which puts the words out of line with every
   other item, so the indent comes off and the box goes to the far end instead. The label is stretched
   to fill what is left so the whole row toggles, not just the two words. */
.sidebarMenuInner li .form-check {
  display: flex;
  align-items: center;
  padding-left: 0;
  margin-bottom: 0;
  min-height: 0;
}

.sidebarMenuInner li .form-check-label {
  flex: 1;
  cursor: pointer;
}

.sidebarMenuInner li .form-check-input {
  float: none;
  margin: 0;
  order: 1;
  cursor: pointer;
}

input[type="checkbox"]:checked~#sidebarMenu {
  transform: translateX(0);
}

@media only screen and (min-width: 1200px) {
  input[type="checkbox"]:not(checked)~#sidebarMenu {
    transform: translateX(0);
  }

  .main {
    margin-left: 250px;
    transition: 250ms all ease-in-out;
  }

  .sidebarIconToggle.menu {
    display: none;
  }
}

/* Only the hamburger. This used to hide every checkbox on the site, which is fine while the hamburger
   is the only one but silently swallows any other, so it is named rather than left to catch all. */
#openSidebarMenu {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 22px;
  height: 22px;
  width: 22px;
}

/* Both of these were drawn at the size they look right at, twenty-two pixels and thirty, and both
   were therefore a target you had to aim at rather than one you could simply hit. A thumb is nearer
   ten millimetres across than three, which is why apple has been saying forty-four pixels for
   fifteen years, and two of the commonest complaints about this site on a phone were the menu and
   the stats button not taking the first tap.

   Grown with padding and pulled back with a matching negative margin. The padding is inside the
   element so it takes taps like any other part of it, and the margin puts the element back exactly
   where it was, so both icons are drawn at the same size in the same place and only the part of the
   screen that answers to them has changed. Growing the icons instead would have been the easy
   version of this and the wrong one -- nobody was asking for a bigger hamburger.

   Both boxes still finish inside the sixty pixel bar, which matters: an invisible target hanging
   below the bar would quietly eat taps meant for whatever is at the top of the page. */
.sidebarIconToggle.menu {
  left: 15px;
  height: 44px;
  width: 44px;
  padding: 11px;
  margin: -11px;
}

.sidebarIconToggle.back-button {
  right: 15px;
  top: 16px;
  color: #FFFFFF;
  height: 44px;
  width: 44px;
  padding: 7px;
  margin: -7px;
  /* transition:  color 1s ease */
}

.sidebarIconToggle.back-button[active="true"] {
  animation-name: pulsing-color;
  animation-duration: 1s;
  animation-iteration-count: 2;
}

/* Feather's loader is a still picture of a throbber -- eight spokes round a circle -- and turning the
   whole thing was too much movement for a 20px icon sat in the corner of a page nobody asked to have
   refreshed. Nothing moves here at all. The spokes are left where they are and only their opacity is
   animated, each one a fifth of a second behind the one before it, so the bright spot travels round
   the circle and the rest trail off behind it.

   The delays are negative, which starts each spoke partway through its fade rather than waiting to
   begin, so the ring is a full gradient from the first frame instead of lighting up one spoke at a
   time for the first second and a half.

   Feather writes the spokes out in pairs of opposites -- top, bottom, top left, bottom right, and so
   on -- so the order below looks scrambled and is not: it is 12 o'clock, half past one, three, and
   round from there, which is the order the light has to travel in. */
.sidebarIconToggle.back-button svg.feather-loader line {
  -webkit-animation: loader-fade 1.6s linear infinite;
  animation: loader-fade 1.6s linear infinite;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(1) {
  animation-delay: -1.4s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(8) {
  animation-delay: -1.2s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(6) {
  animation-delay: -1s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(4) {
  animation-delay: -0.8s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(2) {
  animation-delay: -0.6s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(7) {
  animation-delay: -0.4s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(5) {
  animation-delay: -0.2s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(3) {
  animation-delay: 0s;
}

/* Not down to nothing at the bottom: a spoke that disappears leaves a gap in the ring and the icon
   stops reading as a circle. A quarter still shows and still reads as the dim end of the trail. */
@-webkit-keyframes loader-fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.25;
  }
}

@keyframes loader-fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.25;
  }
}

@keyframes pulsing-color {
  0% {}

  50% {
    color: #07E316;
    /* width: 50px; */
    stroke-width: 3px;
  }
}

.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #fff;
}

.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

.input-group div {
  color: #1897FF;
}

#sidebarMenu ul> :last-child {
  position: absolute;
  bottom: 60px;
}
/* Everything in the menu is uppercase and bold, which is right for the items and wrong for a
   sentence explaining what to type. */
.login-hint {
  text-transform: none;
  font-weight: normal;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 8px;
  cursor: default;
  color: rgba(255, 255, 255, 0.50);
}

/* The same line wearing its other hat, so this only has to win the colour. Red on the blue gradient
   is close to unreadable, so a refusal is a pale pink that still says something has gone wrong
   without disappearing into the background. It is never set on its own any more, and it beats the
   grey above by being the later of two rules a single class deep. */
.login-error {
  color: var(--error-pink);
}

/* The offer to make an account, which appears under the login boxes rather than in a modal over them
   -- it is a question about what is in those boxes, and covering them up to ask it would be a poor
   way round. Same reasoning as the hint above about the case and the weight: this is a sentence, not
   another item in the menu. Bigger than the hint because it is a question waiting for an answer and
   not an aside, and full white for the same reason. */
.signup-offer {
  text-transform: none;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.35;
  margin-top: 12px;
  cursor: default;
}

/* Bootstrap's reboot already takes the uppercase back off a button and gives it its own weight, so
   the only thing left to say is that it wants a gap above it. */
.signup-offer button {
  margin-top: 8px;
}

/* The arrow beside the pin is a button in every way except the tag it was written with, so it should
   say so when the pointer is over it. It reaches for the not-allowed cursor of its own accord when
   the username in the box above could not be anybody's. */
.login-button {
  cursor: pointer;
}

/* The overlay is only a tint by default, and deliberately so. Most of what it covers is the first
   day's scores arriving, and there is no reason somebody cannot open the menu and log in while they
   wait for those. An account request is a different thing. It was started by a press, it is going to
   answer that press, and nothing else on the page should be reachable until it does -- otherwise you
   can start signing up halfway through signing in. So for those it comes up over everything, the
   sidebar and the modals included, and swallows the clicks itself.

   2000 rather than something smaller because it has three things to clear: the sidebar at 99, the
   footer at 1500, and Bootstrap's modals, which sit at 1055 with their backdrop just under. */
.overlay.blocking {
  z-index: 2000;
}

/* Worn by any button with a request in the air. The presses stop landing here rather than in the
   handler, so there is no window between the click and the check, and no way in for the return key
   either. No cursor is set alongside it: an element that takes no pointer events does not get to
   choose the pointer either, and whatever is underneath decides. The disabled attribute set with
   this does the same job for the two that are real buttons, and nothing at all for the login arrow,
   which is a div.

   No z-index here either, though the spinner it puts up does sit under the overlay and is dimmed by
   it. Raising it does nothing: the sidebar is fixed at z-index 98 and a modal is fixed at 1055, and
   neither lets a child climb out past it however high the child is told to go. Lifting the sidebar
   and the modals instead would put them back over the overlay and hand back the clicks it is there
   to swallow. The loader that arrives a second later is above it and is the one that has to be. */
.button-working {
  pointer-events: none;
}