.rank-app-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: calc(var(--header-height) + 18px) clamp(12px, 4vw, 56px) 18px;
  overflow: hidden;
  background: var(--page);
}

.rank-strength-panel {
  position: relative;
  width: min(var(--content-max-width), 100%);
  padding: clamp(16px, 2.5vw, 34px) clamp(12px, 2.5vw, 34px) clamp(15px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 18px 42px var(--shadow);
}

.rank-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  margin: 0 0 clamp(12px, 2vh, 18px);
}

.rank-dashboard-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: clamp(.98rem, 1.5vw, 1.25rem);
  font-weight: 850;
  line-height: 1.1;
}

.rank-dashboard-floating-controls {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 20;
}

.rank-filter-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--field);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.rank-filter-button:hover,
.rank-filter-button[aria-expanded="true"],
.rank-filter-button:focus-visible {
  border-color: var(--accent);
  background: var(--card);
  color: var(--accent-strong);
  outline: none;
}

.rank-filter-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.rank-filter-popover {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: auto;
  inset-inline-end: 0;
  z-index: 10;
  width: min(240px, calc(100vw - 40px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 16px 34px var(--shadow);
  max-height: min(340px, calc(100dvh - 90px));
  overflow-y: auto;
}

.rank-filter-title {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}

.rank-filter-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.rank-filter-bar-mode-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rank-filter-option {
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}

.rank-filter-option:hover,
.rank-filter-option:focus-visible {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent-strong);
  outline: none;
}

.rank-filter-option.is-active {
  border-color: var(--accent);
  background: transparent;
  color: var(--muted);
  outline: none;
}

.rank-filter-section-title {
  margin: 13px 0 8px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.rank-filter-currency-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.rank-filter-currency-option {
  min-width: 0;
  padding: 7px 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

.rank-filter-currency-option:hover,
.rank-filter-currency-option:focus-visible {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent-strong);
  outline: none;
}

.rank-filter-currency-option.is-active {
  border-color: var(--accent);
  background: transparent;
  color: var(--muted);
  outline: none;
}

.rank-filter-toggle-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  text-align: start;
}

.rank-filter-toggle-option:hover,
.rank-filter-toggle-option:focus-visible {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent-strong);
  outline: none;
}

.rank-filter-toggle-option.is-active {
  border-color: var(--accent);
  background: transparent;
  color: var(--muted);
  outline: none;
}

.rank-filter-toggle-indicator {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
}

.rank-filter-toggle-option.is-active .rank-filter-toggle-indicator {
  border-color: var(--accent);
  background: transparent;
}

.rank-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(var(--rank-column-count, 9), minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(2px, .45vw, 7px);
  width: 100%;
  height: clamp(220px, min(43vh, calc(100dvh - 230px)), 430px);
  min-width: 0;
}

.rank-dashboard-chart {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}

.rank-dashboard-table.has-guides .rank-dashboard-chart,
.rank-dashboard-table.has-guides .rank-dashboard-bottom-bar {
  grid-template-columns: var(--rank-guide-gutter, clamp(30px, 4vw, 44px)) minmax(0, 1fr);
}

.rank-dashboard-plot {
  position: relative;
  min-width: 0;
}

.rank-dashboard-table.is-baseline-50 .rank-dashboard-plot::before {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  z-index: 1;
  height: 1px;
  background: var(--ink);
  content: '';
  opacity: .32;
  pointer-events: none;
}

.rank-dashboard-table.is-horizontal .rank-dashboard-chart {
  grid-template-columns: 1fr;
  grid-template-rows: 0 minmax(0, 1fr);
}

.rank-dashboard-table.is-horizontal {
  --rank-horizontal-label-gutter: calc(76px + clamp(5px, 1vw, 11px));
}

.rank-dashboard-table.is-horizontal.has-guides .rank-dashboard-chart {
  grid-template-columns: 1fr;
  grid-template-rows: 28px minmax(0, 1fr);
}

.rank-dashboard-table.is-horizontal .rank-dashboard-scale {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 28px;
}

.rank-dashboard-table.is-horizontal .rank-dashboard-plot {
  grid-column: 1;
  grid-row: 2;
}

.rank-dashboard-table.is-horizontal .rank-dashboard-scale-label {
  top: 50%;
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: 32px;
  margin-inline-start: -16px;
  transform: translateY(-50%);
}

.rank-dashboard-table.is-horizontal .rank-dashboard-scale-label[data-scale-level="0"] { top: 50%; inset-inline-start: var(--rank-horizontal-label-gutter); }
.rank-dashboard-table.is-horizontal .rank-dashboard-scale-label[data-scale-level="25"] { top: 50%; inset-inline-start: calc(25% + var(--rank-horizontal-label-gutter) * .75); }
.rank-dashboard-table.is-horizontal .rank-dashboard-scale-label[data-scale-level="50"] { top: 50%; inset-inline-start: calc(50% + var(--rank-horizontal-label-gutter) * .5); }
.rank-dashboard-table.is-horizontal .rank-dashboard-scale-label[data-scale-level="75"] { top: 50%; inset-inline-start: calc(75% + var(--rank-horizontal-label-gutter) * .25); }
.rank-dashboard-table.is-horizontal .rank-dashboard-scale-label[data-scale-level="100"] { top: 50%; inset-inline-start: 100%; }

.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-scale-label[data-scale-level="0"] { inset-inline-start: 0; }
.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-scale-label[data-scale-level="25"] { inset-inline-start: 25%; }
.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-scale-label[data-scale-level="50"] { inset-inline-start: 50%; }
.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-scale-label[data-scale-level="75"] { inset-inline-start: 75%; }
.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-scale-label[data-scale-level="100"] { inset-inline-start: 100%; }

.rank-dashboard-table.is-horizontal .rank-dashboard-guide {
  top: 0;
  bottom: auto;
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: 0;
  height: 100%;
}

.rank-dashboard-table.is-horizontal .rank-dashboard-guide[data-guide-level="0"] { inset-inline-start: var(--rank-horizontal-label-gutter); }
.rank-dashboard-table.is-horizontal .rank-dashboard-guide[data-guide-level="25"] { inset-inline-start: calc(25% + var(--rank-horizontal-label-gutter) * .75); }
.rank-dashboard-table.is-horizontal .rank-dashboard-guide[data-guide-level="50"] { inset-inline-start: calc(50% + var(--rank-horizontal-label-gutter) * .5); }
.rank-dashboard-table.is-horizontal .rank-dashboard-guide[data-guide-level="75"] { inset-inline-start: calc(75% + var(--rank-horizontal-label-gutter) * .25); }
.rank-dashboard-table.is-horizontal .rank-dashboard-guide[data-guide-level="100"] { inset-inline-start: 100%; }

.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-guide[data-guide-level="0"] { inset-inline-start: 0; }
.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-guide[data-guide-level="25"] { inset-inline-start: 25%; }
.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-guide[data-guide-level="50"] { inset-inline-start: 50%; }
.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-guide[data-guide-level="75"] { inset-inline-start: 75%; }
.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-guide[data-guide-level="100"] { inset-inline-start: 100%; }

.rank-dashboard-table.is-horizontal .rank-dashboard-guide::after {
  inset-block: 0;
  inset-inline: auto;
  width: 1px;
  height: auto;
}

.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-plot::before {
  inset-block: 0;
  inset-inline-start: 50%;
  inset-inline-end: auto;
  width: 1px;
  height: auto;
}

.rank-dashboard-scale {
  position: relative;
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-latin);
}

.rank-dashboard-scale.is-hidden {
  visibility: hidden;
}

.rank-dashboard-guides {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.rank-dashboard-guide {
  position: absolute;
  inset-inline: 0;
  height: 0;
}

.rank-dashboard-guide[data-guide-level="0"] { top: 100%; }
.rank-dashboard-guide[data-guide-level="25"] { top: 75%; }
.rank-dashboard-guide[data-guide-level="50"] { top: 50%; }
.rank-dashboard-guide[data-guide-level="75"] { top: 25%; }
.rank-dashboard-guide[data-guide-level="100"] { top: 0; }

.rank-dashboard-guide::after {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--ink);
  content: '';
  opacity: .24;
}

.rank-dashboard-scale-label {
  position: absolute;
  inset-inline: 0;
  transform: translateY(-50%);
  color: var(--ink);
  font-size: clamp(.7rem, 1.05vw, .92rem);
  font-weight: 850;
  letter-spacing: .04em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.rank-dashboard-scale-label[data-scale-level="0"] { top: 100%; }
.rank-dashboard-scale-label[data-scale-level="25"] { top: 75%; }
.rank-dashboard-scale-label[data-scale-level="50"] { top: 50%; }
.rank-dashboard-scale-label[data-scale-level="75"] { top: 25%; }
.rank-dashboard-scale-label[data-scale-level="100"] { top: 0; }

.rank-dashboard-bottom-bar {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}

.rank-dashboard-bottom-scale {
  min-width: 0;
}

.rank-dashboard-label-grid {
  display: grid;
  grid-template-columns: repeat(var(--rank-column-count, 9), minmax(0, 1fr));
  align-items: start;
  gap: clamp(2px, .45vw, 7px);
  width: 100%;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.rank-dashboard-label-column {
  display: grid;
  grid-template-rows: auto auto;
  align-items: start;
  gap: clamp(5px, 1vh, 8px);
  min-width: 0;
  text-align: center;
}

.rank-filter-empty {
  margin: 0;
  padding: 24px 12px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
}

.rank-dashboard-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: end;
  min-width: 0;
  min-height: 0;
  text-align: center;
}

.rank-dashboard-bar-track {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-bottom: 0;
}

.rank-dashboard-bar {
  display: block;
  width: min(100%, var(--rank-bar-width, 56px));
  height: 5%;
  min-height: 6px;
  border-radius: 8px 8px 3px 3px;
  background: var(--accent);
  transition: height .45s ease, background-color .25s ease;
}

.rank-dashboard-bar[data-bar-level="1"] { height: 10%; }
.rank-dashboard-bar[data-bar-level="2"] { height: 15%; }
.rank-dashboard-bar[data-bar-level="3"] { height: 20%; }
.rank-dashboard-bar[data-bar-level="4"] { height: 25%; }
.rank-dashboard-bar[data-bar-level="5"] { height: 30%; }
.rank-dashboard-bar[data-bar-level="6"] { height: 35%; }
.rank-dashboard-bar[data-bar-level="7"] { height: 40%; }
.rank-dashboard-bar[data-bar-level="8"] { height: 45%; }
.rank-dashboard-bar[data-bar-level="9"] { height: 50%; }
.rank-dashboard-bar[data-bar-level="10"] { height: 55%; }
.rank-dashboard-bar[data-bar-level="11"] { height: 60%; }
.rank-dashboard-bar[data-bar-level="12"] { height: 65%; }
.rank-dashboard-bar[data-bar-level="13"] { height: 70%; }
.rank-dashboard-bar[data-bar-level="14"] { height: 75%; }
.rank-dashboard-bar[data-bar-level="15"] { height: 80%; }
.rank-dashboard-bar[data-bar-level="16"] { height: 85%; }
.rank-dashboard-bar[data-bar-level="17"] { height: 90%; }
.rank-dashboard-bar[data-bar-level="18"] { height: 95%; }
.rank-dashboard-bar[data-bar-level="19"],
.rank-dashboard-bar[data-bar-level="20"] { height: 100%; }

.rank-dashboard-bar.is-baseline {
  position: absolute;
  bottom: 50%;
  z-index: 2;
  height: 0;
  min-height: 6px;
  transform: none;
}

.rank-dashboard-bar.is-baseline.is-negative {
  top: 50%;
  bottom: auto;
  border-radius: 3px 3px 8px 8px;
}

.rank-dashboard-bar.is-baseline-level-1 { height: 2.5%; }
.rank-dashboard-bar.is-baseline-level-2 { height: 5%; }
.rank-dashboard-bar.is-baseline-level-3 { height: 7.5%; }
.rank-dashboard-bar.is-baseline-level-4 { height: 10%; }
.rank-dashboard-bar.is-baseline-level-5 { height: 12.5%; }
.rank-dashboard-bar.is-baseline-level-6 { height: 15%; }
.rank-dashboard-bar.is-baseline-level-7 { height: 17.5%; }
.rank-dashboard-bar.is-baseline-level-8 { height: 20%; }
.rank-dashboard-bar.is-baseline-level-9 { height: 22.5%; }
.rank-dashboard-bar.is-baseline-level-10 { height: 25%; }
.rank-dashboard-bar.is-baseline-level-11 { height: 27.5%; }
.rank-dashboard-bar.is-baseline-level-12 { height: 30%; }
.rank-dashboard-bar.is-baseline-level-13 { height: 32.5%; }
.rank-dashboard-bar.is-baseline-level-14 { height: 35%; }
.rank-dashboard-bar.is-baseline-level-15 { height: 37.5%; }
.rank-dashboard-bar.is-baseline-level-16 { height: 40%; }
.rank-dashboard-bar.is-baseline-level-17 { height: 42.5%; }
.rank-dashboard-bar.is-baseline-level-18 { height: 45%; }
.rank-dashboard-bar.is-baseline-level-19 { height: 47.5%; }
.rank-dashboard-bar.is-baseline-level-20 { height: 50%; }

.rank-dashboard-table.is-horizontal .rank-dashboard-grid {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--rank-column-count, 9), minmax(0, 1fr));
  gap: clamp(3px, .7vh, 7px);
}

.rank-dashboard-table.is-horizontal .rank-dashboard-column {
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(5px, 1vw, 11px);
  text-align: start;
}

.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-plot::before {
  inset-inline-start: 50%;
}

.rank-dashboard-row-meta {
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(5px, 1vw, 10px);
  min-width: 0;
  white-space: nowrap;
}

.rank-dashboard-row-meta .rank-dashboard-code,
.rank-dashboard-row-meta .rank-dashboard-value {
  flex: 0 0 auto;
  font-size: clamp(.7rem, 1.05vw, .92rem);
  font-weight: 850;
  letter-spacing: .04em;
}

.rank-dashboard-table.is-horizontal.is-baseline-50 .rank-dashboard-column.is-baseline-row {
  position: relative;
  grid-template-columns: 1fr;
}

.rank-dashboard-table.is-horizontal.is-baseline-50 .is-baseline-row .rank-dashboard-bar-track {
  position: absolute;
  inset: 0;
  grid-column: 1;
  grid-row: 1;
}

.rank-dashboard-table.is-horizontal.is-baseline-50 .is-baseline-row .rank-dashboard-row-meta {
  position: absolute;
  top: 50%;
  z-index: 3;
  padding: 2px 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  transform: translateY(-50%);
}

.rank-dashboard-table.is-horizontal.is-baseline-50 .is-baseline-row.is-positive-row .rank-dashboard-row-meta {
  inset-inline-start: calc(50% + 8px);
  flex-direction: row;
}

.rank-dashboard-table.is-horizontal.is-baseline-50 .is-baseline-row.is-negative-row .rank-dashboard-row-meta {
  inset-inline-end: calc(50% + 8px);
  flex-direction: row-reverse;
}

.rank-dashboard-table.is-horizontal .rank-dashboard-bar-track {
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  min-height: 0;
}

.rank-dashboard-table.is-horizontal .rank-dashboard-bar {
  width: 5%;
  height: 90%;
  min-width: 6px;
  min-height: 0;
  border-radius: 3px 8px 8px 3px;
}

.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="1"] { width: 10%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="2"] { width: 15%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="3"] { width: 20%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="4"] { width: 25%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="5"] { width: 30%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="6"] { width: 35%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="7"] { width: 40%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="8"] { width: 45%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="9"] { width: 50%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="10"] { width: 55%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="11"] { width: 60%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="12"] { width: 65%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="13"] { width: 70%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="14"] { width: 75%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="15"] { width: 80%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="16"] { width: 85%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="17"] { width: 90%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="18"] { width: 95%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="19"],
.rank-dashboard-table.is-horizontal .rank-dashboard-bar[data-bar-level="20"] { width: 100%; }

.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline {
  top: 0;
  right: auto;
  bottom: auto;
  inset-inline-start: 50%;
  inset-inline-end: auto;
  width: 0;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 3px 8px 8px 3px;
}

.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline.is-negative {
  top: 0;
  inset-inline-start: auto;
  inset-inline-end: 50%;
  border-radius: 8px 3px 3px 8px;
}

.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-1 { width: 2.5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-2 { width: 5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-3 { width: 7.5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-4 { width: 10%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-5 { width: 12.5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-6 { width: 15%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-7 { width: 17.5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-8 { width: 20%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-9 { width: 22.5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-10 { width: 25%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-11 { width: 27.5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-12 { width: 30%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-13 { width: 32.5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-14 { width: 35%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-15 { width: 37.5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-16 { width: 40%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-17 { width: 42.5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-18 { width: 45%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-19 { width: 47.5%; }
.rank-dashboard-table.is-horizontal .rank-dashboard-bar.is-baseline-level-20 { width: 50%; }

.rank-dashboard-table.is-horizontal .rank-dashboard-label-column,
.rank-dashboard-table.is-horizontal .rank-dashboard-bottom-bar {
  display: none;
}

.rank-dashboard-row-label {
  text-align: start;
}

.rank-dashboard-row-value {
  text-align: end;
}

.rank-dashboard-row-value.is-empty {
  visibility: hidden;
}

.rank-dashboard-bar.is-negative {
  background: var(--ink);
}

.rank-dashboard-code,
.rank-dashboard-scale-label,
.rank-dashboard-value {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-latin);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.rank-dashboard-code {
  overflow: hidden;
  font-size: clamp(.7rem, 1.05vw, .92rem);
  font-weight: 850;
  letter-spacing: .04em;
  text-overflow: ellipsis;
}

.rank-dashboard-value {
  direction: ltr;
  font-size: clamp(.68rem, 1vw, .88rem);
  font-weight: 800;
}

.rank-dashboard-value:not(.is-negative) {
  color: var(--accent-strong);
}

.rank-dashboard-value.is-negative {
  color: var(--ink);
}

.rank-dashboard-note {
  width: min(var(--content-max-width), 100%);
  margin: clamp(12px, 2vh, 18px) 0 0;
  color: var(--muted);
  font-size: clamp(.82rem, 1.1vw, .96rem);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 820px) {
  .rank-app-shell {
    height: 100dvh;
    min-height: 0;
    padding: calc(var(--header-height) + 10px) 8px 12px;
    overflow: hidden;
  }

  .rank-strength-panel {
    padding: 12px 7px 14px;
    border-radius: 15px;
  }

  .rank-dashboard-header {
    margin-bottom: 10px;
  }

  .rank-dashboard-grid {
    gap: 2px 1px;
    height: clamp(180px, 40svh, 300px);
  }

  .rank-dashboard-label-column {
    gap: 5px;
  }

  .rank-dashboard-bar {
    width: min(100%, var(--rank-bar-width, 30px));
    min-height: 5px;
  }

  .rank-dashboard-code {
    font-size: clamp(.55rem, 2.5vw, .7rem);
  }

  .rank-dashboard-row-meta .rank-dashboard-code,
  .rank-dashboard-row-meta .rank-dashboard-value {
    font-size: clamp(.55rem, 2.5vw, .7rem);
  }

  .rank-dashboard-scale-label {
    font-size: clamp(.55rem, 2.5vw, .7rem);
  }

  .rank-dashboard-value {
    font-size: clamp(.52rem, 2.3vw, .68rem);
  }

  .rank-dashboard-note {
    max-width: calc(100% - 20px);
    margin-top: 10px;
  }
}

@media (max-width: 420px) {
  .rank-strength-panel {
    padding-inline: 5px;
  }

  .rank-dashboard-grid {
    gap: 1px 0;
  }

  .rank-dashboard-label-grid {
    gap: 1px 0;
  }

  .rank-dashboard-bar {
    width: min(100%, var(--rank-bar-width, 24px));
  }
}