:root {
  --bg: rgb(20, 21, 25);
  --sidebar-bg: rgb(25, 26, 32);
  --highlight-bg: #222;
  --row-hover-bg: rgb(42, 44, 58);
  --point-bg: #34353a;
  --text: rgb(189, 189, 189);
  --brighttext: rgb(246, 246, 246);
  --darktext: rgb(71, 71, 71);
  --line: rgb(84, 84, 84);
  --darkline: rgb(63, 63, 63);
  --clickable: rgb(139, 178, 255);
  --clickable-bright: hsl(220, 100%, 88%);
  --clickable-hover: hsl(220, 100%, 96%);

  --gold: rgb(220, 192, 60);
  --darkgold: rgb(93, 78, 7);
  --silver: rgb(175, 178, 188);
  --bronze: rgb(162, 108, 62);
  --orange: rgb(168, 110, 35);
  --win: rgb(135, 138, 148);
  --row-bg: rgb(27, 29, 39);

  --transparent: rgba(0, 0, 0, 0);

  --other: rgb(45, 65, 88);

  --legend: var(--transparent);
  --tooltip: var(--transparent);
}

@font-face {
  font-family: "JetBrains";
  src: local("JetBrains Mono Thin"), url("./fonts/JetBrains_Mono/static/JetBrainsMono-Thin.ttf");
}
@font-face {
  font-family: "JetBrains";
  font-weight: 600;
  src: url("./fonts/JetBrains_Mono/static/JetBrainsMono-SemiBold.ttf");
}
@font-face {
  font-family: "JetBrains";
  font-weight: 600;
  font-style: italic;
  src: url("./fonts/JetBrains_Mono/static/JetBrainsMono-SemiBoldItalic.ttf");
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  touch-action: manipulation;

  background-color: var(--bg);
  color: var(--text);
  /* // font-variant: small-caps; */
  font-family: "JetBrains", monospace;
  /* margin: 2em; */
  font-size: 0.9em;
  user-select: none;
}

#Main {
  width: 55%;
  overflow-x: hidden;
  /* overflow: visible; */
  /* padding: 2em; */
  padding-bottom: 46px;
}

#Sidebar {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 45%;
  background-color: var(--sidebar-bg);
  border-left: 1px solid var(--darkline);
  margin-bottom: 2em;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.inlineSidebar {
  position: relative;
  padding: 1em;
  border-top: 1px solid var(--darkline);
  border-bottom: 1px solid var(--darkline);
  background-color: var(--sidebar-bg);
}

.portrait-wrapper {
  float: right;
  margin-left: 0.5em;
  margin-bottom: 0.5em;
  display: flex;
  gap: 0.4em;
}

.portrait-item {
  position: relative;
}

.portrait {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  padding: 2px;
  background-color: var(--point-bg);
  background-clip: content-box;
  background-size: cover;
  background-position: top center;
}



.name.selected,
.driver.selected {
  color: var(--gold);
}

.portrait-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--win);
  background-color: var(--point-bg);
  background-clip: content-box;
  background-size: cover;
  background-position: top center;
  padding: 1px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.name.selected .portrait-sm,
.driver.selected .portrait-sm {
  border-color: var(--gold);
}

#Sidebar .sidebarItem {
  padding: 0.5em 1em;
}

#Sidebar .portrait-wrapper {
  margin-top: 0.75em;
  margin-right: 0.75em;
  align-self: flex-end;
}

#Sidebar h2 {
  margin-top: 0.5em;
  margin-bottom: 0.4em;
}

.page {
  border: 1px solid #888;
  margin: 1em;
  padding: 1em;
}

.scene {
  /* padding: 0.5em 2em; */
  /* border: 1px dotted #8ac; */
  padding: 1em 2em;
}

.scene > .description {
  margin-bottom: 3em;
  color: var(--brighttext);
}

.subtitle {
  font-weight: normal;
}

h1 {
  margin: 1em auto;
}

h2 {
  margin-top: 1em;
}

h1,
h2,
h3 {
  color: var(--brighttext);
}

.tooltip.row {
  display: block;
  text-align: right;
  height: 3em;
  /* // width: 100%; */
  /* // border: 1px dotted purple; */
  background-color: var(--tooltip);
  /* // background-color: var(--highlight-bg); */
  overflow: hidden;
}

#champions {
}

.row {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0.75em;
  background-color: var(--row-bg);
  margin: 0.25em;
  padding: auto 0.5em;
}

.header > .row {
  border-bottom: 1px solid var(--darkline);
  background-color: var(--legend);
}

.row.scene1 {
  gap: 0.5em;
  align-items: center;
}
.header > .row.scene1 {
  justify-items: start;
}

#Scene1 .content .row {
  align-items: center;
  border-left: 3px solid transparent;
  padding-left: 0.35em;
}
#Scene1 .content .row.selected {
  border-left-color: var(--gold);
  background-color: var(--row-hover-bg);
}
#Scene1 .content .row.selected .name {
  color: var(--gold);
}
#Scene1 .content .row.selected .portrait-sm {
  border-color: var(--gold);
}
#Scene1 .content .name.clickable:hover {
  color: var(--clickable-bright);
  background-color: transparent;
}
#Scene1 .content .row:hover,
.row.scene2:hover,
.row.scene3:hover,
.row.scene3.points-active {
  background-color: var(--row-hover-bg);
}

.row.scene2 {
  grid-template-columns: auto 3.25fr 1fr 1.5fr 1fr 3.25fr;
}
.header > .row.scene2 {
  grid-template-columns: auto 3.25fr 2.5fr 4.25fr;
  gap: 0.25em;
  justify-items: start;
}

.row.scene3 {
  grid-template-columns: minmax(0, 0.5fr) 1fr 7fr 3fr;
  align-items: center;
  margin: 0;
}
.row.scene3 .pointsChart {
  align-self: stretch;
}
.header > .row.scene3 {
  grid-template-columns: 1.5fr 7fr 3fr;
  gap: 1em;
}
.sidebarItem.header {
  padding-bottom: 0;
}
.hidden {
  display: none;
}
.invisible {
  opacity: 0;
}

.legend.row {
  display: block;
  /* // background-color: var(--legend); */
  /* // background-color: var(--highlight-bg); */
  background-color: var(--transparent);
  /* margin-top: 1em; */
  /* // border: 1px dotted orangered; */
  /* // width: 100%; */
  /* // padding-left: 20%; */
  grid-template-columns: 1fr;
  text-align: right;
}

.row .name {
}

.clickable,
a {
  text-decoration: none;
  cursor: pointer;
  color: var(--clickable-bright);
}

.clickable {
  border-radius: 3px;
  padding: 0 4px;
  background-color: transparent;
}

.clickable:hover {
  color: var(--bg);
  background-color: var(--gold);
}
a:hover {
  color: var(--clickable-hover);
  text-decoration: underline;
}

.dsq-marker {
  color: var(--brighttext);
  font-size: 0.85em;
  margin-left: 2px;
}

.race {
  display: inline-block;
}
.race::before {
  content: "●";
  color: var(--darktext);
  font-size: 0.9em;
  padding-right: 2px;
  vertical-align: middle;
}
.race.small::before {
  font-size: 0.8em;
}
.race:hover:before {
  /* // color: green; */
}
.race.highlight::before {
  color: var(--gold);
}
.race.thatyear::before {
  color: var(--win);
}
.race.gold::before {
  color: var(--gold);
}
.race.silver::before {
  color: var(--silver);
}
.race.bronze::before {
  color: var(--bronze);
}
.race.other::before {
  color: var(--other);
}

.scene2row {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0;
  margin: 0 0 0.2em;
}
.scene2row.highlighted {
  background-color: var(--row-hover-bg);
}

.header > .scene2row {
  margin: 0.75em auto;
}

.scene3row {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1em;
  align-items: center;

  color: var(--text);
  cursor: pointer;
}

.scene3row .name {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.scene3row .rival {
  display: flex;
  align-items: center;
  gap: 0.3em;
  overflow: hidden;
}
.scene3row .name .clickable {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}
.scene3row .name .clickable:hover {
  color: var(--clickable-bright);
  background-color: transparent;
}
.scene3row.selected {
  background-color: var(--row-hover-bg);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(32, minmax(4px, 1fr));
  grid-template-rows: 1fr;
  gap: 1px;
  background-color: var(--bg);
}
.timeline.axis {
  margin-top: 0.25em;
  background-color: transparent;
}
.timelineYear {
  background-color: rgb(99, 67, 16);
  height: 100%;
}
.timelineYear.champion {
  /* // background-color: var(--gold); */
  /* // border: 1px solid #444; */
}
.timelineYear.missing {
  background-color: var(--transparent);
}
.timelineYear.missing.highlighted {
  background-color: var(--row-hover-bg);
}

.tick {
  color: #888;
  overflow-x: visible;
  /* // opacity: 0; */
}

.tick:hover,
.tick.highlighted {
  /* // opacity: 1; */
}

.driver:hover,
.driver.highlighted {
  background-color: var(--row-hover-bg);
}
.driver.clickable:hover {
  color: var(--clickable-bright);
  background-color: transparent;
}
.champion {
  background-color: var(--gold);
  color: black;
}
.championship {
  border: 1px solid var(--bg);
}
.championship,
.runnerup {
  background-color: var(--silver);
}
.thirdplace {
  background-color: var(--bronze);
}
.champion,
.runnerup,
.thirdplace {
  display: inline-block;
  border: 1px solid var(--row-bg);
}
.sidebarItem .row.champion {
  background-color: var(--darkgold);
  color: var(--brighttext);
}
.missing {
  background-color: var(--transparent);
  color: #555;
}
.legend .champion {
  /* // background-color: var(--gold); */
  display: inline-block;
  /* width: 10px; */
}
.sidebarItem .legend > * {
  display: inline-block;
  margin: 0.25em;
}

#Scene1 .legend.eitherside {
  margin: 1em auto;
}

#Scene3 {
  margin-bottom: 1em;
}

.race-entry {
  display: grid;
  grid-template-columns: 2em 1fr 1fr 1fr;
  column-gap: 0.4em;
  row-gap: 0.2em;
  align-items: start;
  margin: 0 0.25em 0;
  padding: 0.5em 0 0.25em;
  border-top: 1px solid var(--darkline);
}
.win-num {
  color: var(--text);
  font-size: 0.8em;
  text-align: right;
  padding-top: 0.1em;
}
.race-header {
  grid-column: span 3;
  font-size: 0.9em;
}
.dsq-note {
  font-size: 0.85em;
  color: var(--text);
  margin: 0.5em 0.25em 0;
  font-weight: normal;
}

.clinch-trophy {
  font-size: 0.85em;
  opacity: 0.85;
  cursor: default;
}
.tt-trophy {
  font-size: 0.8em;
  margin-right: 0.15em;
}

.sprint-label {
  font-size: 0.8em;
  color: var(--text);
  font-style: italic;
}

.sprint-s {
  font-size: 0.8em;
  font-style: normal;
  font-weight: 600;
}
.sprint-s.gold { color: var(--gold); }
.sprint-s.silver { color: var(--silver); }
.sprint-s.bronze { color: var(--bronze); }
.sprint-s.other { color: var(--other); }

.tt-label {
  color: var(--text);
}
.tt-race-name {
  color: var(--brighttext);
  font-weight: 600;
  margin-bottom: 0.4em;
}
.tt-driver {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0;
}
.tt-info {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  min-width: 0;
}
.tt-name {
  color: var(--brighttext);
  font-weight: 600;
}
.tt-name.gold { color: var(--gold); }
.tt-name.silver { color: var(--silver); }
.tt-name.bronze { color: var(--bronze); }
.tt-team {
  color: var(--text);
  font-style: italic;
}
.tt-pts {
  color: var(--brighttext);
  font-weight: 600;
  text-align: right;
  min-width: 2.5em;
  align-self: center;
}
.tt-note {
  margin-top: 0.35em;
  padding-top: 0.3em;
  color: var(--text);
  border-top: 1px solid var(--darkline);
}
.tt-num {
  color: var(--brighttext);
  font-weight: 600;
}

.win-count {
  font-size: 0.85em;
  color: var(--gold);
  vertical-align: middle;
  margin-left: 2px;
}

.overlay-close {
  display: none;
}

.row.scene3.sprint-row {
  opacity: 0.7;
}

.row.scene3 > :first-child {
  text-align: center;
  justify-self: center;
}

.app-tooltip {
  position: fixed;
  z-index: 1000;
  background: var(--sidebar-bg);
  border: 1px solid var(--win);
  border-radius: 4px;
  padding: 0.5em 0.75em;
  font-size: 0.9em;
  color: var(--text);
  pointer-events: none;
  max-width: 260px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.4;
}
.app-tooltip-hidden {
  display: none;
}
.app-tooltip[data-direction="down"]::before,
.app-tooltip[data-direction="down"]::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--line);
}
.app-tooltip[data-direction="down"]::after {
  border-width: 5px;
  border-bottom-color: var(--sidebar-bg);
  margin-bottom: -1px;
}
.app-tooltip[data-direction="up"]::before,
.app-tooltip[data-direction="up"]::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--line);
}
.app-tooltip[data-direction="up"]::after {
  border-width: 5px;
  border-top-color: var(--sidebar-bg);
  margin-top: -1px;
}
.app-tooltip[data-direction="right"]::before,
.app-tooltip[data-direction="right"]::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--line);
}
.app-tooltip[data-direction="right"]::after {
  border-width: 5px;
  border-left-color: var(--sidebar-bg);
  margin-left: -1px;
}
.app-tooltip.app-tooltip-clinch {
  border-color: var(--gold);
}
.app-tooltip.app-tooltip-clinch[data-direction="right"]::before {
  border-left-color: var(--gold);
}
.app-tooltip[data-direction="up-right"]::before,
.app-tooltip[data-direction="up-right"]::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 10px;
  left: auto;
  transform: none;
  border: 6px solid transparent;
  border-top-color: var(--line);
}
.app-tooltip[data-direction="up-right"]::after {
  border-width: 5px;
  border-top-color: var(--sidebar-bg);
  margin-top: -1px;
}
.points-discover-hint {
  animation: hint-pulse 2s ease-in-out infinite;
}
.points-discover-hint[data-direction="up-right"]::before {
  border-top-color: rgba(246, 246, 246, 1);
}

@keyframes hint-pulse {
  0%, 100% {
    border-color: rgba(246, 246, 246, 0.45);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 4px rgba(246, 246, 246, 0.1);
  }
  50% {
    border-color: rgba(246, 246, 246, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 7px 1px rgba(246, 246, 246, 0.25);
  }
}

.driver-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
}
.driver-card {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.driver-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.podium-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  font-size: 0.9em;
  overflow: hidden;
}
.podium-name {
  font-weight: 600;
  color: var(--brighttext);
  line-height: 1.2;
}
.podium-name.gold { color: var(--gold); }
.podium-name.silver { color: var(--silver); }
.podium-name.bronze { color: var(--bronze); }
.podium-team {
  font-style: italic;
  color: var(--text);
  font-size: 0.9em;
  line-height: 1.2;
}

.pointsChart {
  position: relative;
  padding: 5px;
}
.points {
  /* // width: 100%; */
  height: 100%;
  box-sizing: border-box;
  border-right: 3px solid var(--silver);
  position: absolute;
  top: 0;
  left: 0;
}
.points.gold {
  border-color: var(--gold);
}
.points.silver {
  border-color: var(--silver);
}
.points.bronze {
  border-color: var(--bronze);
}

.row.scene2 .points {
  background-color: var(--point-bg);
}

.right {
  text-align: right;
  /* font-weight: bold; */
}

#Intro {
  background-color: var(--sidebar-bg);
}

#Credits {
  margin-top: 4em;
  background-color: var(--sidebar-bg);
  padding: 1em 2em;
  border-top: 1px solid var(--darkline);
}

.emphasis {
  color: var(--brighttext);
  font-weight: 600;
}
.rival {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  vertical-align: middle;
}

.sidebar-footer {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  background: var(--sidebar-bg);
  border-top: 1px solid var(--darkline);
  padding: 0.5em 1em;
  height: 46px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85em;
}
.sidebar-footer.hidden {
  display: none;
}
.sidebar-footer-hint {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.sidebar-key {
  display: inline-block;
  background: var(--point-bg);
  border: 1px solid var(--win);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  font-family: inherit;
  font-size: 0.85em;
  color: var(--brighttext);
  font-style: normal;
  line-height: 1.4;
}

#MobileNav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 55%;
  z-index: 50;
  background: var(--sidebar-bg);
  border-top: 1px solid var(--darkline);
  height: 46px;
}

.mobile-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--text);
  border-top: 3px solid transparent;
  cursor: pointer;
}

.mobile-tab.active {
  color: var(--brighttext);
  border-top-color: var(--gold);
  font-weight: 600;
}

.nav-key {
  position: absolute;
  right: 0.75em;
}

.tab-hidden {
  display: none !important;
}

.scene3-sticky-header,
.scene2-sticky-header {
  display: none;
}

@media (max-width: 900px) {
  #Main {
    width: 100%;
    padding-bottom: 46px;
  }
  #Sidebar {
    display: none;
  }

  #MobileNav {
    width: 100%;
  }
  .nav-key {
    display: none;
  }
  .tab-hidden {
    display: none !important;
  }
  .scene3-sticky-header,
  .scene2-sticky-header {
    display: block;
    border-bottom: 1px solid var(--darkline);
    padding-bottom: 0.45em;
    margin-bottom: 0.5em;
  }
  .scene3-year-row {
    display: flex;
    align-items: center;
    padding-bottom: 0.3em;
  }
  .scene3-year-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    color: var(--brighttext);
    font-weight: 600;
    font-size: 1.15em;
  }
  .scene3-year-nav {
    display: flex;
    gap: 0.75em;
  }
  .scene3-nav-btn {
    color: var(--clickable);
    font-size: 1.15em;
    cursor: pointer;
  }
  #InlineSidebar2 .scene3-year-nav {
    flex: 0 0 66%;
    gap: 0;
  }
  #InlineSidebar2 .scene3-nav-btn {
    flex: 1;
  }
  .scene3-nav-btn.invisible {
    cursor: default;
  }
  #InlineSidebar2 .subtitle {
    font-weight: 600;
    color: var(--brighttext);
    font-size: 1.15em;
  }
  .scene {
    padding: 0.5em 1em;
  }
  .row {
    grid-template-columns: 1fr 3fr 4fr;
  }
  .scene2row {
    grid-template-columns: 1fr 1fr;
  }
  .wins-num {
    display: none;
  }
  .row.scene2 {
    grid-template-columns: auto 4fr 1fr 1.5fr 2fr;
  }
  .header > .row.scene2 {
    grid-template-columns: auto 4fr 2.5fr 2fr;
  }
  .scene3row {
    grid-template-columns: auto 1fr;
    gap: 2em;
  }
  .scene3row .name {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em 0;
  }
  .scene3row .rival {
    flex: 1 0 45%;
    min-width: 0;
  }
  .inlineSidebar.mobile-overlay-active {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 100;
    border-top: 2px solid var(--line);
    border-bottom: none;
    border-left: none;
    border-right: none;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
    padding: 1em 0.5em 3em;
  }
  .inlineSidebar.mobile-overlay-active .overlay-close {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 101;
    text-align: center;
    padding: 0.9em;
    background: var(--sidebar-bg);
    border-top: 1px solid var(--darkline);
    color: var(--brighttext);
  }
  .race.small::before {
    padding-right: 1px;
    font-size: 0.7em;
  }
  #Credits {
    padding: 1em;
  }
  #Legend {
    padding: 1em;
  }
  .race-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }
  .race-header {
    flex: 1;
  }
  .podium-spacer {
    flex-basis: 100%;
    height: 0;
  }
  .podium-cell {
    flex: 1 0 0;
    min-width: 0;
  }
}