:root {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: 15px;
  --bd: 1px solid var(--fgb);
  --bg: #f6f7f8;
  --c0: #7baa17; /* oklch(0.679 0.169 127.3) */
  --c1: #00a48d; /* oklch(0.643 0.118 178.0) */
  --c2: #0095d9; /* oklch(0.638 0.145 239.4) */
  --c3: #a26aa9; /* oklch(0.606 0.112 322.8) */
  --c4: #f071ad; /* oklch(0.716 0.169 352.6) */
  --c5: #e6002f; /* oklch(0.584 0.236 023.2) */
  --c6: #ec6800; /* oklch(0.670 0.185 047.1) */
  --c7: #e79a3e; /* oklch(0.747 0.139 067.1) */
  --fg: #080808;
  --fga: #08080890;
  --fgb: #08080830;
  --fgc: #08080810;
}
:root.dark {
  --bg: #080808;
  --fg: #f6f7f8;
  --fga: #f6f7f890;
  --fgb: #f6f7f830;
  --fgc: #f6f7f810;
}
* {
  box-sizing: border-box;
  margin: 0;
  overscroll-behavior: none;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}
a {
  color: var(--fg);
  text-decoration: none;
}
body {
  background: var(--bg);
  color: var(--fg);
  display: grid;
  font-size: 1rem;
  font-weight: 500;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas:
    "record-header tabparam-nav-up rikishi-header chart"
    "record-panel tabparam-nav rikishi-panel chart"
    "record-footer tabparam-nav-down rikishi-footer chart";
  grid-template-columns: calc(20rem + 1px) 2.4rem calc(16.2rem + 2px) 1fr;
  grid-template-rows: 2.8rem 1fr 2.8rem;
  height: 100dvh;
  overflow: hidden;
}
button {
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  position: relative;
}
span {
  visibility: hidden;
}
/* Mobile variant; 581px = sum of the fixed columns in px - 1 */
@media (max-width: 581px) {
  body {
    grid-template-areas:
      "record-header tabparam-nav-up"
      "record-panel tabparam-nav"
      "record-footer tabparam-nav-down";
    grid-template-columns: 1fr 2.4rem;
  }
  div.desktop {
    display: none;
  }
}

/* --- Grid assignment and bordering ---------------------------------------- */

.chart {
  grid-area: chart;
}
.info-panel,
.record-panel {
  border-block: var(--bd);
  border-right: var(--bd);
  grid-area: record-panel;
  padding: 0 0 1rem 1rem;
}
.legend-footer,
.rikishi-footer {
  border-inline: var(--bd);
  grid-area: rikishi-footer;
  padding: 0.4rem 1rem 0.4rem 0.9rem;
}
.legend-header {
  border-inline: var(--bd);
  grid-area: rikishi-header;
  padding: 0.4rem 0.9rem 0.4rem 1rem;
}
.legend-panel,
.rikishi-panel {
  border: var(--bd);
  grid-area: rikishi-panel;
  padding: 0 0 1rem 1rem;
}
.record-footer {
  border-right: var(--bd);
  grid-area: record-footer;
  padding: 0.4rem 0.9rem;
}
.record-header {
  border-right: var(--bd);
  grid-area: record-header;
  padding: 0.4rem 0.9rem;
}
.rikishi-header {
  border-inline: var(--bd);
  grid-area: rikishi-header;
  padding: 0.4rem 1rem 0.4rem 0.9rem;
}
.tabparam-nav {
  grid-area: tabparam-nav;
}
.tabparam-nav-down {
  grid-area: tabparam-nav-down;
}
.tabparam-nav-up {
  grid-area: tabparam-nav-up;
}

/* --- Grid display and alignment ------------------------------------------- */

.info-panel,
.legend-panel,
.record-panel,
.rikishi-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.legend-footer,
.record-footer,
.rikishi-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.legend-header,
.record-header,
.rikishi-header {
  align-items: center;
  display: flex;
}
.tabparam-nav {
  display: flex;
  flex-direction: column;
}
.tabparam-nav-down,
.tabparam-nav-up {
  align-items: center;
  display: flex;
  justify-content: center;
}

/* --- Grid overlay styling ------------------------------------------------- */

.info-panel,
.legend-footer,
.legend-header,
.legend-panel,
.record-footer,
.rikishi-footer {
  background: var(--bg);
}
.info-panel,
.legend-header,
.legend-panel {
  z-index: 2;
}
.info-panel.closed,
.legend-footer.closed,
.legend-header.closed,
.legend-panel.closed {
  display: none;
}
.legend-footer,
.record-footer,
.rikishi-footer {
  z-index: 4;
}

/* --- Table styling -------------------------------------------------------- */

table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  table-layout: fixed;
}
td {
  border-top: var(--bd);
  font-weight: 400;
  padding-block: 0.2rem;
  text-align: left;
}
td.clickable,
th.clickable,
tr.clickable {
  cursor: pointer;
}
th {
  background: var(--bg);
  border-bottom: var(--bd);
  font-weight: 500;
  padding-block: 0.8rem 0.2rem;
  position: sticky;
  text-align: left;
  top: 0;
  z-index: 1;
}
tr.hovered span,
tr.selected span {
  visibility: visible;
}
tr.muted td {
  color: var(--fga);
}
tr.muted td:first-child {
  color: var(--fgb);
}
/* .inert is declared after .clickable and .muted to override styling. */
tr.inert {
  cursor: default;
  pointer-events: none;
}
tr.inert td {
  color: var(--fgb);
}
tr:first-child td {
  border-top: none;
}
.rating-table td:first-child,
.record-table td:first-child {
  color: var(--fga);
}

/* --- Table element alignment and scroll containers ------------------------ */

.band-table td:nth-child(2) {
  position: relative;
}
.bout-table td:nth-child(4) {
  padding-right: 0.1rem;
}
.bout-table :is(th, td):is(:nth-child(2), :nth-child(3)),
.record-table :is(th, td):is(:nth-child(3), :nth-child(4)) {
  text-align: center;
}
.bout-table :is(th, td):nth-child(4),
.info-table :is(th, td):nth-child(3),
.rating-table td:nth-child(3),
.rating-table th:nth-child(2),
.record-table :is(th, td):is(:nth-child(5), :nth-child(6)),
.rikishibasho-table td:is(:nth-child(2), :nth-child(3)),
.selection-table td:nth-child(3),
.selection-table th:nth-child(2),
.shortcut-table :is(th, td):nth-child(3) {
  text-align: right;
}
.info-scroll,
.legend-scroll,
.record-scroll,
.rikishi-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 1rem;
  scrollbar-width: thin;
}
.rikishibasho-table {
  padding-top: 0.6rem;
}

/* --- Table column widths -------------------------------------------------- */

/* dot+name+axis+rating+link+linkwide = body.grid_template_columns[0] - 2rem - 1px */
/* dot+info = body.grid_template_columns[0] - 2rem - 1px */
/* dot+infoleft+inforight = body.grid_template_columns[0] - 2rem - 1px */
/* name+axiswide+linkwide = body.grid_template_columns[2] - 2rem - 2px */
/* name+rank+rating+dot = body.grid_template_columns[2] - 2rem - 2px */
/* bandleft+bandright = body.grid_template_columns[2] - 2rem - 2px */
/* dot+name+threshold = body.grid_template_columns[2] - 2rem - 2px */
/* dot+namewide+link = body.grid_template_columns[2] - 2rem - 2px */
col.axis {
  width: 2.8rem;
}
col.axiswide {
  width: 4.8rem;
}
col.bandleft {
  width: 9.8rem;
}
col.bandright {
  width: 4.4rem;
}
col.dot {
  width: 1.2rem;
}
col.info {
  width: 16.8rem;
}
col.infoleft {
  width: 10rem;
}
col.inforight {
  width: 6.8rem;
}
col.link {
  width: 1.4rem;
}
col.linkwide {
  width: 1.6rem;
}
col.name {
  width: 7.8rem;
}
col.namewide {
  width: 11.6rem;
}
col.rank {
  width: 2rem;
}
col.rating {
  width: 3.2rem;
}
col.threshold {
  width: 5.2rem;
}

/* --- SVG display and interaction ------------------------------------------ */

g.hidden {
  visibility: hidden;
}
svg {
  height: 100%;
  overflow: hidden;
  touch-action: none;
  width: 100%;
}
svg.inset {
  height: calc(100% - 0.4rem);
  inset: 0.2rem 0;
  position: absolute;
}
svg.panning {
  cursor: grabbing;
}

/* --- SVG element styling -------------------------------------------------- */

circle {
  cursor: pointer;
  fill: var(--fga);
  r: 3.5px;
}
circle.hidden {
  visibility: hidden;
}
circle.hovered {
  r: 7px;
}
circle.muted {
  fill: var(--fgb);
}
line {
  stroke: var(--fgb);
  stroke-width: 1px;
}
line.arc {
  stroke: var(--arc-color, var(--fga));
  stroke-linecap: round;
  stroke-width: 3px;
}
line.cutoff {
  opacity: calc(1 / 3);
}
line.provisional {
  stroke-dasharray: 0 8;
}
path {
  fill: var(--fgc);
}
text {
  dominant-baseline: middle;
  fill: var(--fg);
  font-size: 0.8rem;
  font-weight: 400;
}
.label-x line {
  transform: translateY(2.8rem);
}
.label-x text {
  text-anchor: middle;
  transform: translateY(1.4rem);
}
.label-y text {
  text-anchor: end;
  transform: translate(-1rem, 1rem);
}

/* --- Icon styling --------------------------------------------------------- */

*.icon {
  display: inline-flex;
  position: relative;
  top: -0.08rem;
  vertical-align: middle;
}
a.icon {
  color: inherit;
  font-size: 1rem;
}
a.icon.disabled,
button.icon.disabled {
  color: var(--fgb);
  cursor: default;
}
button.icon {
  font-size: 1.4rem;
}
button.icon.selected {
  font-variation-settings: "FILL" 1;
}
table button.icon {
  font-size: 1rem;
}
.rikishibasho-table button.icon {
  cursor: default;
  top: -0.12rem;
}
.tabparam-nav-down button.icon,
.tabparam-nav-up button.icon {
  font-size: 2.4rem;
}

/* --- Div and text button styling ------------------------------------------ */

button.color {
  bottom: -0.05rem;
  opacity: calc(1 / 3);
  padding-inline: 0.2rem;
}
button.color.selected,
button.color:hover {
  opacity: 1;
}
div.tabparam {
  cursor: pointer;
  flex: 1;
}
div.tabparam.active {
  background: var(--fgb);
}
/* :hover is declared after .active to override styling. */
div.tabparam:hover {
  background: var(--fga);
}

/* --- Unique element styling ----------------------------------------------- */

.glyph-preload {
  font-weight: 400;
  position: absolute;
}
.logo {
  display: block;
  margin-inline: auto;
  padding-block: 2.4rem 0.8rem;
  width: 3.2rem;
}
.record-title {
  padding-left: 0.8rem;
}
.rikishi-dot {
  color: var(--fga);
}
.rikishi-dot.muted {
  color: var(--fgb);
}
.rikishi-name {
  padding-left: 0.5rem;
}
.rikishi-rating {
  margin-left: auto;
}