/* Life-size scale strip on the exhibit card (scaletape.js renderScaleHtml) */

.scaleStrip {
  margin: 14px 0 4px;
  padding: 10px 12px 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

.scaleStrip svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.scaleStrip text {
  font: 600 11.5px Inter, system-ui, sans-serif;
  fill: var(--muted, #9fb0bf);
}

.scaleStrip figcaption {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted, #9fb0bf);
}

.scaleStrip figcaption b {
  color: var(--text, #f3ecdf);
  font-weight: 700;
}

.scaleRuler line {
  stroke: rgba(243, 236, 223, 0.45);
  stroke-width: 1;
}

.scaleRuler text {
  font-size: 10.5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 500;
}

.scaleAnimal path {
  stroke: none;
}

.scaleHuman {
  fill: var(--accent, #ffc857);
}

.scaleStrip .scaleYou {
  fill: var(--accent, #ffc857);
  font-weight: 700;
}

.scaleDim line {
  stroke: var(--text, #f3ecdf);
  stroke-width: 1.2;
}

.scaleStrip .scaleDim text {
  fill: var(--text, #f3ecdf);
  font-weight: 700;
  font-size: 12.5px;
}

.scaleBus rect,
.scaleBus circle {
  fill: none;
  stroke: rgba(159, 176, 191, 0.5);
  stroke-width: 1.1;
  stroke-dasharray: 4 3;
}

.scaleStrip .scaleBusLabel {
  font-size: 10.5px;
  fill: rgba(190, 204, 216, 0.95);
  paint-order: stroke;
  stroke: rgba(22, 29, 38, 0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.scaleOther path {
  fill: rgba(159, 176, 191, 0.12);
  stroke: rgba(159, 176, 191, 0.7);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

.scaleStrip .scaleOtherLabel {
  font-size: 10.5px;
}

@media (max-width: 520px) {
  .scaleStrip {
    padding: 8px 8px 7px;
  }
  .scaleStrip figcaption {
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .scaleStrip .scaleAnimal {
    animation: scaleGrow 0.6s var(--ease-out, ease-out) both;
  }
}

@keyframes scaleGrow {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}