/* Scale preview (_ScalePreview.cshtml): the screen's width × height beside a 1.70 m figure. */
.lc-scale { margin: 0; display: grid; gap: var(--lc-space-2); }
.lc-scale[hidden] { display: none; }

.lc-scale__stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.6rem;
  height: 196px;
  padding: 8px 12px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background:
    linear-gradient(var(--lc-border) 1px, transparent 1px) 0 100% / 100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--lc-graphite-990);
}

.lc-scale__screen {
  display: grid;
  place-items: center;
  border-radius: 2px;
  background:
    radial-gradient(70% 90% at 25% 70%, rgba(255, 112, 36, 0.8), transparent 65%),
    radial-gradient(60% 80% at 75% 30%, rgba(112, 148, 214, 0.7), transparent 70%),
    #101216;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: width var(--lc-dur-slow) var(--lc-ease-out), height var(--lc-dur-slow) var(--lc-ease-out);
}

.lc-scale__screen span { font-family: var(--lc-font-mono); font-size: var(--lc-text-2xs); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); white-space: nowrap; }
.lc-scale__person { display: block; aspect-ratio: 24 / 64; flex: none; transition: height var(--lc-dur-slow) var(--lc-ease-out); }
.lc-scale__person svg { width: 100%; height: 100%; fill: var(--lc-graphite-400); }
.lc-scale figcaption { font-size: var(--lc-text-xs); color: var(--lc-text-subtle); }

/* The size the engine settles on, under the drawing. */
.lc-scale__fit { display: grid; gap: var(--lc-space-1); font-size: var(--lc-text-sm); }
.lc-scale__fit[hidden], .lc-scale__others[hidden] { display: none; }
.lc-scale__fit p { margin: 0; }
.lc-scale__chosen { font-weight: 600; color: var(--lc-text); }
.lc-scale__note { color: var(--lc-text-subtle); font-size: var(--lc-text-xs); }
.lc-scale__others { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); color: var(--lc-text-subtle); font-size: var(--lc-text-xs); }