/**
 * @file
 * "The scale of big numbers" comparison styling.
 */
.wl-edu-scale {
  margin: 1.5rem 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.14));
  border-radius: 12px;
  background: var(--color-surface-raised, rgba(255, 255, 255, 0.03));
  border-left: 3px solid #f7931a;
}
.wl-edu-scale__head {
  margin: 0 0 0.85rem; font-size: 0.92rem; line-height: 1.5;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.82));
}
.wl-edu-scale__head strong { color: #f7931a; }
.wl-edu-scale__hint { margin: 0 0 0.7rem; font-size: 0.76rem; color: var(--color-text-muted, rgba(255, 255, 255, 0.5)); }

.wl-edu-scale__list { display: flex; flex-direction: column; gap: 0.4rem; }
.wl-edu-scale__row {
  display: flex; flex-direction: column; gap: 0.35rem; width: 100%; text-align: left;
  padding: 0.55rem 0.7rem; border-radius: 10px; cursor: pointer;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  transition: border-color 0.15s ease, background 0.15s ease;
  font: inherit; color: inherit;
}
.wl-edu-scale__row:hover { background: rgba(255, 255, 255, 0.05); }
.wl-edu-scale__row.is-yard { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); }
.wl-edu-scale__row.is-star { border-color: rgba(247, 147, 26, 0.6); }
.wl-edu-scale__row.is-star.is-yard { border-color: #f7931a; }

.wl-edu-scale__top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.wl-edu-scale__label { font-size: 0.88rem; font-weight: 600; color: var(--color-text-primary, #fff); }
.wl-edu-scale__row.is-star .wl-edu-scale__label { color: #f7931a; }
.wl-edu-scale__val {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; white-space: nowrap;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.7));
}

.wl-edu-scale__bottom { display: flex; align-items: center; gap: 0.7rem; }
.wl-edu-scale__barwrap {
  flex: 1 1 0; min-width: 0; height: 0.5rem; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}
/* Every bar is the site blue — only the Bitcoin metric stands out in orange. */
.wl-edu-scale__bar { display: block; height: 100%; border-radius: 4px; background: var(--color-accent-secondary, #5b8dff); }
.wl-edu-scale__row--bitcoin .wl-edu-scale__bar { background: #f7931a; }

.wl-edu-scale__ratio {
  flex: 0 0 auto; font-size: 0.76rem; font-weight: 600; line-height: 1.3;
  width: 8rem; text-align: right;
}
.wl-edu-scale__ratio.is-up { color: #34d399; }
.wl-edu-scale__ratio.is-down { color: var(--color-text-muted, rgba(255, 255, 255, 0.45)); }
.wl-edu-scale__ratio.is-ref { color: #f7931a; }

@media (max-width: 480px) {
  .wl-edu-scale__top { flex-direction: column; gap: 0.1rem; }
  .wl-edu-scale__ratio { min-width: 7rem; }
}